De Figma a Código: Cerrando el gap entre los equipos de Diseño y Desarrollo
Uno de los problemas más frecuentes que encuentro en los equipos de Diseño es no poder comunicar a los equipos de desarrollo ciertas decisiones con claridad. Esto se debe a múltiples factores, de los cuales exploraremos algunos a continuación.
Figma se niega a utilizar nomenclatura estándar.
Figma surgió como una herramienta pensada específicamente para diseñadores, y su experiencia de usuario está claramente centrada en ellos.
Este enfoque tiene un lado positivo: ha logrado crear una comunidad sólida y un lenguaje propio que se ha vuelto familiar para quienes trabajan con su software. Sin embargo, también presenta un aspecto negativo: se aleja de los estándares de nomenclatura utilizados en el desarrollo de código. Conceptos ampliamente conocidos como flexbox, CSS grid, overflow, media query, o z-index tienen años de historia y son fundamentales en la definición de interfaces web. Esta divergencia en el lenguaje puede generar confusiones y malentendidos entre diseñadores y desarrolladores.
Los diseñadores no queremos ser desarrolladores
Una de las frases más escuchadas últimamente en el ámbito del diseño es: “No queremos estar forzados a convertirnos en desarrolladores”. Esta declaración refleja una problemática que necesita ser atendida.
Es evidente que la fase de diseño de producto comienza con los equipos de diseño y se materializa gracias al trabajo de los equipos de desarrollo. Por lo tanto, es fundamental crear un puente de comunicación efectivo entre estos dos mundos para fomentar la sinergia y la colaboración.
Los diseñadores están cada vez más cerca de interactuar con desarrolladores front-end, quienes suelen encargarse de la maquetación, el desarrollo de componentes y sus interacciones. Idealmente, estas decisiones deberían ser una consecuencia directa del trabajo de los equipos de diseño, donde se definen estilos, propiedades, layouts, criterios de aceptación, historias de usuarios, entre otros aspectos clave.
Si el entregable no es claro y legible para los desarrolladores, se genera la primera brecha en la comunicación.
Son pocos los profesionales que oscilan entre el mundo del diseño y el desarrollo
Existen pocos perfiles especializados en diseño con un conocimiento suficiente de desarrollo como para servir de puente en la comunicación entre ambos mundos.
En general, las carreras de diseño y los cursos de capacitación se enfocan exclusivamente en técnicas y metodologías de diseño, dejando de lado la importancia de aprender a comunicarse con otras disciplinas. La falta de esta comunicación interdisciplinaria puede generar malentendidos, retrasos y entregables que no cumplen con las expectativas del proyecto.
Si los diseñadores tienen al menos un conocimiento básico de desarrollo, podrán optimizar los procesos y mejorar la eficiencia de los entregables. Algunos ejemplos que podemos citar incluyen conocer el stack tecnológico que se utilizará, familiarizarse con las nomenclaturas comunes en el desarrollo, entender en qué momento se realiza una llamada a base de datos y comprender las implicaciones de diseño que puede tener optar por un guardado estándar frente a un autoguardado.
Conclusiones
El futuro de las herramientas de diseño
En los últimos años, Figma ha demostrado su capacidad para escuchar a la comunidad de diseño, incorporando funcionalidades que no solo facilitan el proceso de diseño, sino también la preparación de entregables para desarrollo.
Herramientas como Variables (Tokens), Dev Mode o Code Connect reflejan esta necesidad de acercar a diseñadores y desarrolladores dentro de un mismo entorno de trabajo. Estas funcionalidades ayudan a estandarizar aspectos cruciales como las variables de estilos CSS, permiten la inspección detallada de los diseños a través de Dev Mode, y facilitan la construcción de componentes sincronizados directamente con el código gracias a Code Connect.
Mientras tanto, otras plataformas emergentes como Penpot están innovando al integrar funcionalidades como CSS Grid y Flexbox de forma nativa, adoptando un enfoque que combina lo mejor de Figma con una mayor proximidad al desarrollo real. Por otro lado, herramientas como Framer y Webflow, referentes en el ámbito del desarrollo no-code, están trazando un camino diferente al apropiarse del lenguaje del código, pero utilizando interfaces típicas de diseño. Esto permite a los diseñadores crear experiencias visuales y funcionales complejas sin necesidad de escribir código directamente.
El futuro de los diseñadores de producto
A la luz de todo lo anterior, es importante señalar que el objetivo no es formar perfiles híbridos que sean expertos tanto en diseño como en desarrollo, sino fomentar una comprensión básica de los conceptos de desarrollo entre los diseñadores.
Si bien cada profesional puede decidir hasta qué punto desea profundizar en estos conocimientos, no cabe duda de que adquirir estas habilidades permitirá a los diseñadores aportar un mayor valor a sus equipos y proyectos. Una mejor comprensión del lenguaje y las necesidades del desarrollo no solo mejora la colaboración, sino que también enriquece el proceso creativo y asegura que las ideas concebidas en la fase de diseño se traduzcan de manera efectiva en el producto final.
