Passei várias horas criando um design figma de uma página de destino. Cada cor está correta, cada pixel está no lugar com um fluxo de usuário contínuo, mas agora vem a parte assustadora de realmente codificar esta página de destino.

Construir um design Figma é uma tarefa enorme de ser concluída. Foi aí que conheci o Dualite, que traduz designs figma em código real usando IA, ajudando desenvolvedores como eu a minimizar o esforço de codificação real. Vamos ver como usei o Dualite para converter minha landing page em código real
 

O que é Dualita?

Dualite é um plugin Figma inovador com tecnologia de IA projetado para preencher a lacuna entre design e desenvolvimento. Ele se concentra na conversão de designs Figma em código reutilizável de alta qualidade, com suporte de tecnologias populares como Reactjs, TailwindCSS e muito mais.

Dualite permite converter qualquer design figma ou animações em código eficiente com um único clique que você pode personalizar de acordo com seu projeto, ele vem com recursos interessantes, deixe-me dar um resumo sobre eles:

• Modos: Dualite oferece dois modos, Modo Componente e Modo Página, ideais para desenvolvedores e designers converterem seu design em código gerado. Esses modos garantem que o layout, a interatividade, as animações e muito mais sejam traduzidos com precisão do design ao código.
  • Modo Componente: concentra-se em elementos de design individuais, permitindo a criação de componentes reutilizáveis.
  • Modo Página: Converte páginas inteiras, mantendo o layout e a estrutura geral.
  • Saiba mais sobre modos neste blog
• Recursos avançados:
  • Dualite oferece configurações avançadas onde os usuários podem fornecer mais informações técnicas sobre seu design. Isso garante que o código gerado seja responsivo e preciso.
  • Essas configurações avançadas dão mais poder aos designers e desenvolvedores, permitindo-lhes personalizar a saída para atender aos requisitos específicos do projeto. Esse recurso é particularmente útil para designs complexos que precisam de controle preciso sobre o código final, como layouts responsivos ou animações complexas. Para começar rapidamente com Dualite, você pode seguir seus documentos

Figma Design

Vamos começar com um design figma de uma landing page, veja abaixo:

Então, Dualite tem um recurso de modo onde você pode alternar entre o Modo Página e o Modo Componente

Basicamente, o modo Página serve para converter o design completo de uma só vez e o Modo Componente serve para criar componentes separados que podemos integrar em nosso projeto, saiba mais sobre os componentes na documentação

Utilizaremos o Modo Componente para gerar código para todos os componentes presentes no design e depois iremos integrá-los em um único projeto

Vamos começar dividindo a landing page em componentes, veja abaixo:

Configuração inicial do projeto

Vou usar Reactjs e Tailwind no Dualite para gerar código, então vamos configurar o projeto primeiro:

• Reactjs App: Crie um aplicativo react usando Vite ou qualquer outra ferramenta. Vite é uma escolha popular para criar aplicativos Javascript
• Configurar Tailwind: Siga o Tailwind Docs para configurar o tailwind em um aplicativo Reactjs sem nenhum erro desnecessário. Certifique-se de adicionar também as dependências, como PostCSS e autoprefixer, para uma configuração suave do Tailwind.
• Arquivos de configuração: Crie tailwind.config.js e postcss.config.css na raiz do projeto. tailwind.config.js pode estar presente se você seguir todas as etapas dos documentos do Tailwind. Se já estiver lá, atualize-o adequadamente
• Use Javascript: No momento, Dualite não oferece suporte a Typescript, portanto, certifique-se de criar o aplicativo Reactjs apenas com Javascript

Comece a converter componentes em Dualite

Configuração inicial:

• Modo: Estaremos usando o modo componente. Use o botão de alternância no canto superior direito para alternar entre o modo de página e o modo de componente
• Frameworks: Ao selecionar um design para converter em código, você verá várias opções de linguagem e frameworks. Usarei Reactjs e Tailwind para gerar código.
• Para começar a usar o Dualite rapidamente, leia isto

Agora, vamos começar a converter o design em componente:

1. Componente da barra de anúncios: verifique o código gerado aqui
    

2. Componente da barra de navegação: verifique o código gerado aqui
    

3. Componente de filtro de categoria: verifique o código gerado aqui
    

4. Componente do cartão: verifique o código gerado aqui
    

5. Componente de paginação: verifique o código gerado aqui
    

6. Componente de rodapé: verifique o código gerado aqui
    

Personalizações

1. Copiar componentes:
   • Agora, copie a pasta Components de todo o código gerado acima e cole-o no projeto em uma pasta de componentes
   • Você deve ter notado que todos os nomes dos componentes são apenas “Componente”, então vamos nomear todos os componentes de acordo. Exemplo: o componente da barra de anúncios será denominado “AnnouncementBar”. Confira como fiz isso aqui
2. Renderizar todos os componentes:
   • Agora, importe todos os componentes de acordo com o design dentro do arquivo App.jsx
   • Execute o projeto e você verá a saída, verifique o arquivo App.jsx aqui
   • Você deve ter notado que alguns componentes precisam ser consertados. Vamos começar com as personalizações
3. Corrigindo estilos de componentes:
   • Fontes:
     • Como você pode ver no design, temos nossas próprias fontes. Adicionando-os dentro das pastas de ativos para que eu possa usar a fonte no projeto em qualquer lugar.
     • Também é necessário criar @font-face para todas as fontes que estamos usando no arquivo index.css onde as diretivas Tailwind estão presentes
   • Componente da barra de navegação:
     • O layout é impreciso, portanto, o estilo precisa ser corrigido
   • Componente do cartão:
     • Ícone de estrela: Adicionado ícone de estrela dentro da pasta de gráficos
     • Text.js: Arquivo Text.js atualizado para corrigir o rótulo do botão e outros textos do componente
     • Estilos: estilos atualizados para adicionar espessura de fonte a um elemento de texto específico e rótulo de botão
   • Lógica dos componentes do cartão:
     • Card Component renderiza apenas um único componente porque é apenas um único componente.
     • Para renderizar vários componentes de cartão, preciso adicionar alguns dados de demonstração para mapeá-los e renderizar vários cartões

Nota: Todas as alterações e o código podem ser vistos no CodeSandBox aqui

Saída

Assim que fiz todas essas customizações e alterações no projeto, posso ver uma versão melhor do meu design, verifique o código e a saída aqui

Dualite foi útil?

Vamos entender bem, todos os componentes que geramos usando Dualite estavam prontos para uso, sim, fizemos algumas customizações no código para deixá-lo o mais próximo possível do design, apesar disso, todos os estilos dos componentes, todos a hierarquia dos componentes com os dados em arquivos separados é gerada pelo Dualite.

Em vez de gastar muito tempo construindo a UI, posso usar o Dualite para isso.

Comparando com a codificação manual, isso levaria muito tempo. A saída de todos os componentes foi muito boa, nada pode estar 100% correto, todo código precisa de um toque final do desenvolvedor e foi isso que fizemos aqui

Sim, Dualite foi muito útil e rápido na geração de código para meus componentes.

Conclusão

Aí está, uma maneira eficiente de gerar código de seus designs Figma com muito menos codificação manual. O processo de codificação dos designs é uma montanha-russa, que pode ser menos complicada se você usar Dualite e personalizar o código de acordo com suas necessidades e o projeto.