Saltar al contenido

Taxfyle · 2025

De Figma a código con IA

Sistema y flujo para que el diseño no se quede en Figma: entregas en código alineadas al design system, con herramientas que el equipo puede adoptar.

Oportunidad:

Cerrar el gap entre Figma y código: el diseñador entrega código funcional que el desarrollador refina, no que reconstruya desde cero.

Resultado del flujo: pantalla en código fiel al diseño y al sistema.

Contexto

El flujo tradicional de entrega en diseño es: el diseñador entrega en Figma, el desarrollador interpreta y reconstruye desde cero en código. Eso genera gaps de fidelidad, tiempo perdido y retrabajo. Con herramientas como Cursor, Claude Code, Figma MCP y Code Connect, identifiqué la oportunidad de eliminar ese gap: que el entregable del diseñador ya sea código funcional que el desarrollador solo refina.

Investigación

Investigación técnica de Code Connect, Figma MCP, Cursor y Claude Code para entender cómo integrarlos en el día a día.

Análisis del flujo de entrega actual del equipo entre diseño y desarrollo.

Solución

  • Design system de la web pública en Figma y en el repo.

  • Componentes enlazados a su implementación con Code Connect; con Figma MCP, la IA reutiliza piezas y tokens reales.

  • Aplicación progresiva: home primero, luego interiores de servicios.

  • El desarrollador dejó de reconstruir pantallas enteras y se enfocó en performance, integraciones y QA.