El pasado 14 de junio, estuvimos en el VLCTechFest. Si te preguntas por qué, la respuesta es que tenía una misión clara: reducir el ruido entre diseño y desarrollo. Lo hice hablando en un idioma que ya hablamos en Secture en el departamento de diseño desde hace tiempo: Figma.

No fue una charla técnica más. Fue un recorrido por cómo una herramienta, bien usada, puede convertirse en el catalizador de una relación fluida entre diseñadores y developers. Un puente, no una barrera.

Entonces, ¿puede ser Figma la herramienta definitiva para que diseño y desarrollo dejen de hablar idiomas? Sigue leyendo y lo sabrás.

¿Por qué Figma?

Porque Figma no es solo una herramienta para diseñar. Es, sobre todo, una plataforma para colaborar.

Desde su lanzamiento en 2016, ha ido ganando terreno en equipos donde el diseño no termina en el diseño, sino que se construye junto a desarrollo, producto y negocio.

Cuando en 2023 llegó Dev Mode, Figma terminó de cerrar el círculo: ahora también piensa en developers.

Lo importante aquí no es la herramienta, sino lo que permite: hablar el mismo idioma. De esta manera consigue tener un valor diferencial respecto a otras herramientas de diseño.

Un mismo archivo, muchas formas de trabajar

Vamos a hacer un repaso desde lo más básico hasta lo más potente.

¿Cómo está estructurado un archivo de Figma?

• A la izquierda, las páginas del proyecto y las capas.
• A la derecha, un panel de propiedades que cambia según lo que selecciones.
• En el centro, un lienzo infinito que, sí, puede abrumar al principio, pero tiene truco: buscar es tu amigo, y no se puede romper nada.

¿Cómo cambia la experiencia dependiendo del rol?

• Viewers, ideales para clientes o stakeholders que solo necesitan ver y comentar.
• Editors, los diseñadores que crean, modifican, prototipan.
• Developers, que acceden al Dev Mode para extraer directamente lo que necesitan para desarrollar: medidas, estilos, assets, e incluso fragmentos de código.

Ese último punto es importante: Figma no reemplaza VSCode, pero sí reduce las idas y venidas innecesarias. Cuando el diseño está bien montado, Dev Mode se convierte en un diccionario visual del producto.

Las capas son tu bestie (si sabes usarlas)

Uno de los mayores bloqueos al abrir Figma por primera vez es el concepto de “capas”.

Si vienes del mundo del código o de herramientas más lineales, la idea de un canvas infinito y jerárquico puede sonar a caos. Pero si entiendes que hay una lógica clara —frames, grupos, layers hijas, componentes—, todo encaja.

Es muy importante tener en cuenta que la estructura del archivo es tan importante como el diseño mismo. Si nombras bien, agrupas con sentido y organizas por secciones, el developer que reciba el archivo lo va a agradecer. Y lo va a notar.

Porque sí, entregar un archivo bien estructurado también es diseño.

¿Y qué tal Dev Mode?

Mi parte favorita.

Dev Mode no es simplemente “otra vista”. Es una experiencia completamente diferente, pensada para developers.

Desde ahí pueden:

• Medir cualquier elemento.
• Copiar estilos en CSS, iOS o Android.
• Descargar assets en diferentes resoluciones.
• Ver tokens de diseño como variables reutilizables.

Es decir: lo que antes eran mails, capturas, dudas y “¿esto cuánto mide?”… ahora está todo en el mismo sitio.

¿Y qué tiene que ver esto con el desarrollo?

Todo.

Nosotros trabajamos en proyectos complejos, con equipos distribuidos y mucha interacción entre diseño y desarrollo.

Y en ese contexto, Figma es más que útil: es necesario.

No hablo solo de eficiencia (aunque también). Hablo de que si todos trabajamos sobre el mismo archivo, con las mismas reglas, la comunicación fluye. Y entonces lo que diseñamos no es solo bonito, es funcional, coherente y más rápido de implementar.

Si trabajas en producto digital, sabes de lo que hablo. Si no, te invito a probarlo.

Si te interesa el tema, puedes echarle un ojo a la presentación completa aquí.

Y si te quedaste sin ver la charla, aquí tienes el vídeo:

Lee más en nuestro blog.