Figma

Qué es Figma y para qué lo usamos

Figma es la herramienta de diseño de interfaces donde dibujamos, pantalla por pantalla, cómo se va a ver y a comportar un proyecto antes de escribir una línea de código. Trabajamos ahí todo lo que tiene interfaz: sitios corporativos, aplicaciones móviles, paneles de administración y plataformas internas. El cliente entra por un enlace desde el navegador, sin instalar nada, y ve exactamente lo que va a recibir.

Por qué diseñamos antes de programar

Porque cambiar una pantalla en el diseño cuesta una revisión y cambiarla programada cuesta desarrollo. Cuando un proyecto arranca directamente en código, las decisiones visuales se toman sobre la marcha, se discuten en palabras y se descubren tarde: el cliente ve por primera vez la pantalla cuando ya está construida, y cada ajuste obliga a rehacer trabajo terminado.

Diseñar primero invierte ese orden. La conversación difícil —dónde va cada cosa, qué se ve primero, cuántos pasos tiene el formulario— ocurre sobre algo que se puede señalar, y ocurre cuando todavía es barata. El equipo entra a programar con la interfaz cerrada y aprobada, y programa una sola vez.

Qué entregamos en Figma

• Pantallas de cada vista, en escritorio y en móvil, con el contenido real del proyecto y no con texto de relleno.
• Sistema de diseño: colores, tipografías, botones, formularios y tarjetas definidos una vez y reutilizados en todo el proyecto, para que la marca se sostenga a medida que el sitio crece.
• Prototipo navegable: el recorrido completo enlazado, para revisar el flujo —de la portada al formulario, del listado al detalle— antes de construirlo.
• Entrega al desarrollo: medidas, colores, espaciados y recursos exportables que el equipo toma directamente del archivo, sin interpretar ni aproximar.
• Versiones y comentarios: el historial de cambios y las observaciones quedan en el mismo archivo, así que la decisión y su motivo no se pierden en una cadena de correos.

Qué gana el cliente con este paso

Gana poder aprobar lo que va a recibir. Ver el diseño terminado antes del desarrollo convierte una expectativa en un acuerdo concreto: el alcance queda visible, el presupuesto deja de moverse por ajustes de última hora y la fecha de entrega se calcula sobre algo definido.

En proyectos con muchas pantallas —una aplicación, un panel de gestión, un sitio con varias secciones— es donde más se nota. Y en proyectos de salud, donde cada cambio implica revisión clínica, cerrar la interfaz antes de programar evita rondas completas de rehacer.

Cómo se conecta con el resto del trabajo

El diseño aprobado en Figma es el que después se implementa: en Flutter cuando el proyecto es una aplicación móvil, en el tema del sitio cuando es web, y en Vue o Svelte cuando se trata de un panel o una aplicación de gestión. El archivo queda como referencia viva del proyecto, así que cuando meses después hay que añadir una pantalla nueva, se diseña dentro del mismo sistema y no se improvisa.