Figma to Code

Figma to Code es una poderosa herramienta de Flow que permite crear componentes de una app basado en su diseño en Figma. Nuestro objetivo es que todos los equipos utilicen esta herramienta desde el primer sprint, haciendo la experiencia de desarrollo aún más ágil.

Cómo funciona

1. El desarrollador debe seguir las instrucciones para habilitar Figma to Code en su tenant para Flow Chat: [Figma to Code - DOCS]
2. Localizar un componente en Figma que desea desarrollar.
3. Copiar la "URL de selección" del componente:
4. Haga clic derecho sobre el componente deseado.
5. Haga clic en "Copy as".
6. Seleccione la opción "Copiar enlace a la selección".

Generando el prompt para Flow Chat

Después de configurar Figma to Code y copiar el enlace del componente deseado, simplemente genere el prompt para Flow Chat. Ejemplo:

[PEGAR EL ENLACE] - Crea este formulario de login utilizando Next.js, MUI y TypeScript

Consideraciones Importantes

• Figma to Code es un acelerador para el desarrollo, pero el código generado no será el 100% del código final. El desarrollador necesitará revisarlo y ajustarlo según sea necesario.
• Para obtener mejores resultados, evite generar pantallas enteras de una sola vez.
• Genere componentes más pequeños de forma incremental para mayor precisión y una mejor componentización.
• Seguir los principios de componentización granular es esencial. Si la IA genera un componente muy grande, será necesario dividirlo en partes más pequeñas y lógicamente organizadas.

Este enfoque garantizará un desarrollo más eficiente y modular, facilitando el mantenimiento y la escalabilidad del proyecto.