Repolode
Enviar
bernaferrari

bernaferrari/FigmaToCode

Plugin de Figma que convierte un diseño seleccionado en código editable para HTML, React, Svelte, Tailwind, Flutter o SwiftUI, y se ejecuta localmente.

Alternativa open source a:LocofyAnima

Ver en GitHubSitio web
Estrellas
5,265
Forks
507
Issues abiertos
53
Último commit
hace 3 meses

¿Qué es?

Figma to Code es un plugin de Figma que convierte un frame, componente, grupo o capa seleccionados en código inicial para web y plataformas nativas. Entre los formatos de salida compatibles están HTML, React (JSX), Svelte, styled-components, Tailwind CSS (con sintaxis de Tailwind 3 y 4), widgets de Flutter y vistas de SwiftUI. También puede empaquetar el código generado y los recursos de imagen locales en pequeños proyectos iniciales, como configuraciones de Vite, Next.js, Flutter o SwiftUI.

El generador es determinista y se ejecuta dentro del sandbox del plugin de Figma. Lee la selección mediante Figma Plugin API, la convierte en un árbol interno y genera código sin llamar a un modelo de IA ni enviar datos de diseño a otro servicio. El manifest del plugin publicado no solicita permisos ni permite dominios de red.

El resultado está pensado como una estructura editable para empezar, no como código de producción. Se convierten Auto Layout, el anidamiento, la tipografía, los rellenos, los bordes y muchos efectos, mientras que la semántica, las interacciones, el estado y la accesibilidad requieren trabajo manual. La interfaz muestra advertencias sobre las limitaciones de la conversión.

Funciones clave

  • 01Genera código para HTML, React, Svelte, styled-components, Tailwind, Flutter y SwiftUI a partir de una selección de Figma.
  • 02Convierte Auto Layout, frames anidados, alineación y posicionamiento absoluto combinado.
  • 03Admite salidas para Tailwind 3 y Tailwind 4, con prefijos de clase opcionales.
  • 04Usa variables de color de Figma e incrusta imágenes como Base64 en la salida HTML.
  • 05Muestra una vista previa en vivo y advertencias sobre los elementos que no se convierten correctamente.
  • 06Exporta proyectos iniciales de Vite, Next.js, Flutter o SwiftUI con recursos locales.

Casos de uso

  • Entregar un componente de Figma terminado a los desarrolladores como primera versión de la implementación.
  • Crear un prototipo de una sección de página en Tailwind o React antes de conectar la lógica de la aplicación.
  • Crear una base para Flutter o SwiftUI a partir de un diseño móvil existente.
  • Trabajar en entornos donde los archivos de diseño no se pueden enviar a servicios externos de IA o a servicios en la nube.

Inicio rápido

  1. 1

    Instala el plugin gratuito desde Figma Community

  2. 2

    Selecciona un frame, componente, grupo o capa en Figma y ejecuta el plugin; después, elige un destino

Antes de usarlo

  • Se necesita Figma; el plugin solo funciona dentro del entorno de plugins de Figma.
  • El código generado es una estructura visual básica que requiere revisión humana en cuanto a semántica, accesibilidad y lógica de la aplicación.
  • La licencia es GPL-3.0, una licencia copyleft que afecta a la forma de distribuir el código derivado.

En colecciones

Apps open source para Mac

Temas

#figma#figma-plugin#code-generation#tailwind#react#flutter#swiftui#design-to-code#conversion#figma-plugins

Preguntas frecuentes

¿Qué es FigmaToCode?
Plugin de Figma que convierte un diseño seleccionado en código editable para HTML, React, Svelte, Tailwind, Flutter o SwiftUI, y se ejecuta localmente. Figma to Code es un plugin de Figma que convierte un frame, componente, grupo o capa seleccionados en código inicial para web y plataformas nativas. Entre los formatos de salida compatibles están HTML, React (JSX), Svelte, styled-components, Tailwind CSS (con sintaxis de Tailwind 3 y 4), widgets de Flutter y vistas de SwiftUI. También puede empaquetar el código generado y los recursos de imagen locales en pequeños proyectos iniciales, como configuraciones de Vite, Next.js, Flutter o SwiftUI.
¿FigmaToCode es gratuito? ¿Qué licencia tiene?
FigmaToCode es open source bajo la licencia GPL-3.0. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿FigmaToCode sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de FigmaToCode fue el 5 ago 2026.
¿Para qué puedo usar FigmaToCode?
Entregar un componente de Figma terminado a los desarrolladores como primera versión de la implementación. Crear un prototipo de una sección de página en Tailwind o React antes de conectar la lógica de la aplicación. Crear una base para Flutter o SwiftUI a partir de un diseño móvil existente. Trabajar en entornos donde los archivos de diseño no se pueden enviar a servicios externos de IA o a servicios en la nube.
¿Cómo se instala FigmaToCode?
Instala el plugin gratuito desde Figma Community Selecciona un frame, componente, grupo o capa en Figma y ejecuta el plugin; después, elige un destino
¿Dónde consigo FigmaToCode?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/bernaferrari/FigmaToCode

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados