Repolode
Enviar
bernaferrari

bernaferrari/FigmaToCode

Plugin do Figma que converte uma seleção de design em código editável para HTML, React, Svelte, Tailwind, Flutter ou SwiftUI, executado localmente.

Alternativa open source a:LocofyAnima

Ver no GitHubSite
Estrelas
5,265
Forks
507
Issues abertas
53
Último commit
há 3 meses

O que é?

Figma to Code é um plugin do Figma que transforma um frame, componente, grupo ou camada selecionado em código inicial para web e plataformas nativas. Os formatos de saída incluem HTML, React (JSX), Svelte, styled-components, Tailwind CSS (com sintaxe do Tailwind 3 e 4), widgets do Flutter e views do SwiftUI. Ele também pode empacotar o código gerado e os arquivos de imagem locais em pequenos projetos iniciais, como configurações de Vite, Next.js, Flutter ou SwiftUI.

O gerador é determinístico e roda dentro do sandbox de plugins do Figma. Ele lê a seleção pela Figma Plugin API, converte o conteúdo em uma árvore interna e gera o código sem chamar um modelo de IA nem enviar dados de design para outro serviço. O manifest publicado do plugin não solicita permissões e não permite domínios de rede.

A saída foi pensada como uma estrutura editável para começar, não como código pronto para produção. Auto Layout, aninhamento, tipografia, preenchimentos, bordas e muitos efeitos são mapeados, mas semântica, interações, estado e acessibilidade ainda precisam ser trabalhados manualmente. A interface exibe avisos sobre limitações da conversão.

Recursos principais

  • 01Gera código HTML, React, Svelte, styled-components, Tailwind, Flutter e SwiftUI a partir de uma seleção do Figma.
  • 02Mapeia Auto Layout, frames aninhados, alinhamento e posicionamento absoluto misto.
  • 03Oferece saída para Tailwind 3 e Tailwind 4, com prefixos de classe opcionais.
  • 04Usa variáveis de cor do Figma e incorpora imagens como Base64 na saída HTML.
  • 05Exibe uma prévia ao vivo e avisos para elementos que não são convertidos corretamente.
  • 06Exporta projetos iniciais de Vite, Next.js, Flutter ou SwiftUI com arquivos de recursos locais.

Casos de uso

  • Entregar um componente finalizado do Figma para desenvolvedores como uma primeira versão da implementação.
  • Prototipar uma seção de página com Tailwind ou React antes de conectar a lógica da aplicação.
  • Criar um ponto de partida em Flutter ou SwiftUI com base em um design mobile existente.
  • Trabalhar em ambientes onde os arquivos de design não podem ser enviados para serviços externos de IA ou na nuvem.

Início rápido

  1. 1

    Instale o plugin gratuito pela Figma Community

  2. 2

    Selecione um frame, componente, grupo ou camada no Figma e execute o plugin; em seguida, escolha um destino

Antes de usar

  • É necessário ter o Figma; o plugin só funciona no ambiente de plugins do Figma.
  • O código gerado é uma estrutura visual básica que precisa de revisão humana quanto à semântica, acessibilidade e lógica da aplicação.
  • A licença é GPL-3.0, uma licença copyleft que afeta a forma como o código derivado pode ser distribuído.

Em coleções

Apps open source para Mac

Tópicos

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

Perguntas frequentes

O que é FigmaToCode?
Plugin do Figma que converte uma seleção de design em código editável para HTML, React, Svelte, Tailwind, Flutter ou SwiftUI, executado localmente. Figma to Code é um plugin do Figma que transforma um frame, componente, grupo ou camada selecionado em código inicial para web e plataformas nativas. Os formatos de saída incluem HTML, React (JSX), Svelte, styled-components, Tailwind CSS (com sintaxe do Tailwind 3 e 4), widgets do Flutter e views do SwiftUI. Ele também pode empacotar o código gerado e os arquivos de imagem locais em pequenos projetos iniciais, como configurações de Vite, Next.js, Flutter ou SwiftUI.
FigmaToCode é gratuito? Qual é a licença?
FigmaToCode é open source sob a licença GPL-3.0. Confira os termos da licença antes de usá-lo em produtos comerciais.
FigmaToCode ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de FigmaToCode foi em 5 de ago. de 2026.
Para que posso usar FigmaToCode?
Entregar um componente finalizado do Figma para desenvolvedores como uma primeira versão da implementação. Prototipar uma seção de página com Tailwind ou React antes de conectar a lógica da aplicação. Criar um ponto de partida em Flutter ou SwiftUI com base em um design mobile existente. Trabalhar em ambientes onde os arquivos de design não podem ser enviados para serviços externos de IA ou na nuvem.
Como instalar FigmaToCode?
Instale o plugin gratuito pela Figma Community Selecione um frame, componente, grupo ou camada no Figma e execute o plugin; em seguida, escolha um destino
Onde consigo FigmaToCode?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/bernaferrari/FigmaToCode

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados