Hace una década, el diseño de producto vivía en Photoshop, Illustrator o Sketch — herramientas pensadas para diseñadores, con archivos binarios opacos para el resto del equipo. Figma, lanzado en 2016, cambió las reglas: colaboración en tiempo real, navegador como plataforma, y una filosofía abierta al feedback multidisciplinar. Hoy es el sustrato sobre el que producto, diseño e ingeniería dialogan.
Del archivo binario al documento vivo
El cambio fundamental de Figma no fue técnico en primer lugar — fue cultural. Cuando varias personas pueden editar el mismo fichero a la vez, con comentarios anclados a componentes, el diseño deja de ser “algo que alguien entrega en PDF” y pasa a ser una conversación continua.
Tres consecuencias concretas:
- Revisión sin tickets. Producto puede comentar un botón directamente en la maqueta, con threads de discusión que permanecen asociados al elemento aunque este evolucione.
- Handoff sin handoff. Los desarrolladores abren el archivo, inspeccionan medidas, copian CSS o tokens y ven la última versión sin solicitar “por favor, exporta y mándamelo por Slack”.
- Documentación siempre al día. Frente al eterno problema del documento desactualizado, un archivo Figma bien mantenido es la fuente de verdad — porque es el mismo que se está usando para diseñar.
Prototipado con interacciones reales
Más allá del diseño estático, Figma incluye un motor de prototipado que permite enlazar frames con transiciones, animaciones y estados interactivos. Un prototipo de Figma puede simular:
- Navegación entre pantallas con timing específico.
- Overlays (menús desplegables, modales) con gestión de estado básica.
- Hover, pressed y variables que se propagan entre componentes.
- Device frames (iPhone, Android, tablet) que permiten probar el prototipo a escala real.
No es un entorno de desarrollo, pero para validar un flujo con usuarios antes de escribir código es más que suficiente. Herramientas de testing como Maze o Useberry se integran directamente con prototipos Figma para medir éxito de tareas, tiempo de resolución y patrones de clic.
Componentes, variantes y design systems
El siguiente salto de abstracción son los componentes. Un botón diseñado una vez puede reutilizarse en 50 pantallas, y al editarlo en origen — por ejemplo, cambiar el radio del borde de 4 px a 6 px — el cambio se propaga automáticamente a todas sus instancias. Las variantes permiten encapsular estados (primario/secundario/destructivo × tamaño pequeño/mediano/grande) en un solo componente con un panel de propiedades.
Para equipos maduros, esto se eleva a un design system: biblioteca compartida entre múltiples archivos, con tokens de color, tipografía, espaciado y sombras. Existen patrones para vincular esos tokens con el código — herramientas como Style Dictionary o Tokens Studio convierten tokens de Figma en variables CSS, Swift, Android XML u otros formatos, cerrando el círculo entre diseño y producción.
Esto encaja con la idea de pensamiento de diseño como disciplina que atraviesa el producto: un design system operativo refleja decisiones estratégicas, no solo estéticas.
FigJam: del diseño al mapeo de procesos
En 2021 Figma lanzó FigJam, un lienzo de pizarra colaborativa orientado a dinámicas de equipo: sesiones de brainstorming, mapas de empatía, journey maps, retrospectivas de sprint. Aunque existe competencia fuerte (Miro, Mural), la ventaja de FigJam es que vive en el mismo espacio que el diseño. Un equipo puede empezar por un journey map en FigJam, derivar los pantallazos clave en un archivo Figma, y mantener ambos linkados.
Para equipos que tratan producto como disciplina amplia — y no solo como flujo de tickets de Jira —, la continuidad entre descubrimiento y ejecución visual es valiosa.
Consideraciones prácticas
Algunas advertencias para equipos que se inician o que escalan:
- Rendimiento en archivos grandes. Por encima de ~500 frames, Figma empieza a arrastrar. Dividir en varios archivos vinculados por biblioteca es mejor que uno gigante.
- Permisos y licencias. El modelo por editor puede ser costoso a escala. Plantéate un tier “viewer” para perfiles que solo consultan.
- Control de versiones. Figma guarda un historial automático, pero para cambios importantes crea páginas tipo “v1”, “v2” o ramas con la feature “Branching” del plan Organization.
- Accesibilidad del propio Figma. Paradójicamente, su editor aún no es del todo accesible por teclado — un tema abierto, a vigilar si tu equipo tiene diseñadores con necesidades específicas.
Relacionado, ver cómo la elección de palabras en tu aplicación interactúa con el diseño visual: coherencia terminológica y tipográfica se gestiona mejor cuando ambas viven en el mismo archivo.
Conclusión
Figma no es solo una herramienta de diseño: es el lenguaje común de muchos equipos modernos de producto. Su valor real está en la continuidad entre descubrimiento, diseño, prototipado y handoff, sin saltar de herramienta ni perder contexto entre etapas.
Síguenos en jacar.es para más sobre herramientas de producto, diseño de interfaces y colaboración entre diseño e ingeniería.
