Do Figma ao código sem perder o design

A tela aprovada no Figma e a tela que chega no celular costumam ser diferentes. A diferença raramente está em um erro grande. Ela vem de dezenas de pequenas interpretações: um espaçamento arredondado, uma cor parecida, um componente refeito do zero. A solução é diminuir o que precisa ser interpretado.

Comece pelas variáveis

Cores, tamanhos de texto, espaçamentos e raios de borda devem existir como variáveis no Figma e como tokens no código, com os mesmos nomes. Quando o designer muda o azul principal, o desenvolvedor muda um valor só.

Componentes com o mesmo nome dos dois lados

Um botão no Figma deve corresponder a um botão no código, com as mesmas variantes: primário, secundário, desabilitado, carregando. O Code Connect do Figma liga os dois e mostra, dentro do arquivo de design, o trecho de código do componente real. Isso evita que cada tela ganhe a sua própria versão do botão.

O papel do servidor MCP

O servidor MCP do Figma entrega para agentes de código, como o Claude Code e o Cursor, o contexto de um frame: variáveis, componentes e layout. Com o Code Connect configurado, o código gerado usa os componentes que o time já tem, em vez de criar novos. Ele também faz o caminho contrário: transforma a interface que já está no ar em camadas editáveis no Figma.

Isso só funciona bem se o arquivo estiver organizado. Camadas sem nome, componentes soltos e cores fora das variáveis viram código bagunçado.

Um checklist para a passagem

• —Variáveis de cor, tipografia e espaçamento criadas e usadas em todas as telas.
• —Componentes com variantes e estados: vazio, erro e carregando.
• —Camadas e frames com nomes que fazem sentido.
• —Code Connect ligando os componentes principais ao código.
• —Telas revisadas no tamanho real, no celular.

Design e código no mesmo time

A forma mais simples de manter o design igual no produto é deixar quem desenha e quem desenvolve trabalhando juntos. Na BAUX, os dois trabalham lado a lado desde o primeiro rascunho.

Veja como fazemos design de produto