Figma para React: Como gerar componentes limpos de React no Figma

Reading Time: 4 minutes

Anima é uma parceira oficial do Figma, e nossa inteligência artificial de geração de código está integrada nativamente ao novo Painel de Modo de Desenvolvimento (Dev Mode) do Figma. Com o Dev Mode da Anima para o Figma, você pode gerar código eficiente, legível e de fácil manutenção para qualquer componente ou tela do Figma em tempo real.

O que você pode esperar do código da Anima:

React + TypeScript/JavaScript funcional com suporte a subcomponentes que pode ser executado instantaneamente.
Componentes React com state e interativos baseados em variantes e props do Figma.
Flex responsivo de CSS baseado no Layout Automático (Auto Layout) do Figma.
Estilos de sua escolha: CSS clássico, Styled Components, Tailwind CSS e em breve CSS modules.

👉 Por tempo limitado, a geração, cópia e download do código React da Anima dentro do Dev Mode do Figma é gratuito. Leia mais sobre a parceria da Anima com o Figma aqui. 👈

Vamos lá!

Como converter designs do Figma em código React com o Anima

Anima oferece duas maneiras de gerar React a partir de designs no Figma:

1. 1. 1. Código React para componentes individuais (disponível com permissões somente de leitura no Figma):
      - A opção mais eficiente e acessível para desenvolvedores que querem componentes reutilizáveis de React.
      - Transforme os componentes do Figma em componentes de React (JSX ou TSX) dentro do Dev Mode do Figma.
      - Gere, inspecione e copie instantaneamente o código para o componente selecionado, assim como para seus subcomponentes individuais.
      - Faça o download de um pacote de código completo ou abra no CodeSandbox com apenas um clique.
    2. Código React para telas inteiras e flows completos (requer permissões de edição no Figma):
      - A melhor opção para protótipos e MVPs suportados por React.
      - Sincronize telas e flows completos do Figma com o aplicativo web da Anima.
      - Exporte React (JSX ou TSX) para sua seleção sincronizada, com suporte para breakpoints e links do Figma entre páginas.
      - Requer sincronização externa e processamento de código. **

Opção 1: Gerar código React para componentes individuais e telas

Passo 1: Mude para o Modo de Desenvolvimento usando a alternância no topo do painel de Inspeção do Figma, em seguida, selecione a aba ‘Plugins’.

Passo 2: Execute o plugin do Anima para o Dev Mode (se você não o ver na lista, digite “Anima” no campo de pesquisa).

Passo 3: Selecione qualquer componente, camada ou frame no Figma.

Passo 4: No painel à direita, você obterá código React e CSS executável. Você pode usar o toggle para mudar para Tailwind ou Styled Components.

Você pode alternar facilmente entre a instância selecionada do seu componente (‘Usage’) e sua definição completa (‘Source’), que inclui todas as variantes e subcomponentes.

Você também pode alternar entre JSX e TSX usando o menu dropdown acima da janela de código.

Passo 5: Clique em ‘Download selection’ para obter um arquivo zip com todo o seu código ou clique em ‘Open in CodeSandbox’ para executá-lo instantaneamente.

Aqui está ele no CodeSandbox👇

Opção 2: Gerar código React para flows completos

Passo 1: Abra o plugin do Anima no Figma.

Open the Anima plugin from Figma's main dropdown menu.

Passo 2: Selecione a opção ‘Turn Design to Code’.

Passo 3: Selecione os componentes do Figma, telas ou flows que você quer converter para React.

Selecting a series of Figma frames to sync with Anima's web app and convert to React code.

Com esta opção, Anima vai conectar os tamanhos de tela diferentes que você definiu com breakpoints, e convertê-los em media queries para produzir código responsivo de React a partir de qualquer design no Figma.

Passo 4: Clique o botão ‘Sync’ na parte inferior da janela do plugin.

Passo 5: Clique ‘Go to Anima’ quando a sincronização estiver completa.

Passo 6: Você será redirecionado para o seu projeto no applicativo web do Anima, onde você deve selecionar o ícone de ‘<> Code’ para alternar para o modo de código.

Passo 7: Selecione ‘React’ nas opções de framework, escolha entre ‘Javascript’ ou ‘Typescript’ e clique ‘Change to React’.

Passo 8: Clique o botão ‘Export Code’ no topo da tela, onde você pode fazer download do arquivo .zip do seu pacote de código para uma seleção específica, tela, ou o projeto completo.

Figma para React: Como gerar componentes limpos de React no Figma4 min read

Reading Time: 4 minutes Anima converte instantaneamente os componentes do Figma em componentes React dentro do próprio Figma. Aqui está um guia passo a passo.