Repo: https://github.com/edicardenas/figma-to-flutter-skill

Porque una cosa es tener una pantalla bonita en Figma.

Y otra muy distinta es preguntarnos:

¿Ese componente ya existe?
¿Está usando los tokens correctos?
¿Respeta el Design System?
¿El diseño está listo para implementarse o solo se ve terminado?

Ahí es donde muchas veces empieza el retrabajo.

No porque diseño o desarrollo hagan mal su chamba, sino porque el puente entre ambos equipos no siempre está bien construido.

Por eso quiero compartir Figma to Flutter Skill, un proyecto open-source que estuve construyendo para explorar una idea muy concreta:

Antes de generar código, deberíamos entender mejor el diseño.

¿Qué es Flutter Skill?

Flutter Skill es un experimento para mejorar la forma en la que los equipos pasan de diseño a código.

La idea no es solo generar Flutter desde Figma.

Eso suena muy bonito, pero también puede ser peligroso si lo hacemos sin criterio.

Porque si el diseño viene desordenado, incompleto o desconectado del sistema de diseño, el código también va a heredar ese desorden.

Y después aparecen las frases clásicas:

“Ese componente no existe.”
“Este estilo no está en el Design System.”
“Lo hicimos custom porque no había otra opción.”
“Esto no estaba contemplado.”

Y bueno… ahí empieza el teatro, pero no del bonito.

No se trata solo de IA

Este Flutter Skill no busca vender magia.

Tampoco pretende decir que una IA va a resolver todo el trabajo entre diseño, producto y desarrollo con un botón bonito que diga: “hazme la app, por favor”.

Ojalá, pero no.

La intención va más por otro lado:

Crear un flujo más claro para revisar el diseño antes de convertirlo en código.

Porque generar rápido no siempre significa avanzar mejor.

A veces solo significa equivocarnos más rápido.

El Design System también debe estar antes del código

Un Design System no debería vivir solo como una librería bonita en Figma.

Tampoco como documentación eterna que todos dicen respetar, pero nadie abre cuando el sprint se pone intenso.

Un Design System debería funcionar como un acuerdo real entre diseño, producto y desarrollo.

Por eso este Flutter Skill está pensado para revisar elementos como:

• Componentes.

• Tokens.

• Estilos.

• Patrones.

• Estructura visual.

• Diferencias contra el sistema de diseño.

La meta no es correr por correr.

La meta es avanzar con más claridad.

Porque generar una pantalla en Flutter puede ser útil.

Pero generar una pantalla que respete el sistema, que sea mantenible y que tenga sentido para el producto real, es mucho más valioso.

Capture, Audit, Map, Generate

El flujo base del proyecto es:

Capture → Audit → Map → Generate

Dicho en cristiano:

Primero capturamos el diseño.
Después auditamos qué tan listo está.
Luego mapeamos componentes, tokens y patrones.
Y hasta el final generamos.

Ese orden importa.

Porque muchas veces queremos brincar directo a la generación.

Pero si no entendimos bien el diseño, solo vamos a generar problemas más rápido.

Y esa no es la innovación que queremos, amigos.

¿Por qué compartir un Flutter Skill open-source?

Porque creo que los equipos de UX/UI, Flutter y producto necesitan mejores formas de colaborar.

No solo más herramientas.

Mejores acuerdos.
Mejores revisiones.
Mejores formas de saber qué está listo, qué está parcial y qué falta antes de mandar algo a desarrollo.

Este Flutter Skill es un experimento, pero también es una forma de poner sobre la mesa una conversación importante:

El futuro entre diseño y desarrollo no está solo en generar más rápido. Está en generar con más estructura, más criterio y menos retrabajo.

Manos a la obra

Si eres diseñador UX/UI, Flutter dev, product designer, product owner o simplemente te interesa el cruce entre Design Systems e implementación, te dejo el repo para que puedas verlo, probarlo o dejar feedback.

No es una solución final.

Es una exploración abierta para aprender, mejorar y seguir construyendo mejores puentes entre diseño y código.

Repo: https://github.com/edicardenas/figma-to-flutter-skill

Ahora, te invito a visitar estos enlaces para conocer más sobre Creativos Atómicos:

• Glosario UX/UI: Un glosario completo de términos de UX/UI.

• Recursos UX/UI: Herramientas y guías para mejorar tus habilidades en UX/UI.

• Notas para Diseñadores UX/UI: Artículos y consejos para diseñadores en nuestro blog.

• Lo-Fi para diseñadores UX/UI: Música creada por mi para tus ratos creativos.

Nuevamente, gracias.