Figma Make Acabou de Se Tornar uma Ferramenta Real de Design para Código
O Figma Make agora exporta React conectado aos seus tokens de design reais e mapeamentos de Code Connect em vez de marcação descartável. Veja o que mudou em 18 de junho, onde ainda precisa de um humano e um fluxo de trabalho que você pode executar esta semana.
A versão curta: o Figma Make agora entrega código que um engenheiro front-end não deletaria imediatamente. Esse é o único motivo pelo qual designers estão falando sobre isso, e é algo mais significativo do que mais uma melhoria de velocidade.
Em 18 de junho, o Figma lançou uma atualização de produção no Make. O destaque não é "ficou mais rápido." O destaque é fidelidade. O Make agora exporta componentes conectados aos seus tokens de design reais e mapeamentos de Code Connect, em vez da marcação solta e avulsa que a exportação costumava produzir.
Essa diferença é a linha entre um truque de palco e uma ferramenta. Código descartável vai para o lixo. Código que referencia seu sistema é mergeado.
Os diffs que todo mundo está postando
Esta atualização rompeu o confinamento porque as pessoas estão mostrando os recibos. O thread de anúncio do @figma cruzou cerca de 9,2 mil reposts em dias, e as respostas se encheram de diffs lado a lado do Figma para React de equipes rodando contra os próprios sistemas.
Esse é o sinal que vale notar. O sinal mais alto não é o texto de marketing do Figma, são os engenheiros postando diffs de antes e depois e não odiando o resultado. Quando os céticos ficam quietos, algo mudou.
Designers ouviram promessas de "design para código" por uma década. A promessa sempre morria ao entrar em contato com um codebase real, porque a saída ignorava o sistema sobre o qual o codebase foi construído. Desta vez, os diffs sobrevivem ao encontro.
O que mudou de fato (tokens e Code Connect, não hex bruto e marcação)
O Make antigo lia um frame e descrevia o que via. Via um botão azul e escrevia #2D7FF9. Via padding e escrevia um valor em pixels. O resultado parecia certo e não se conectava a nada.
O novo Make lê o mesmo frame e o resolve contra seu sistema. O botão azul compila para uma referência de token, não um valor hex congelado. O componente compila para o seu mapeamento real de Code Connect, então aponta para o componente real no seu codebase em vez de inventar um novo.
Essa é toda a mudança em uma frase. A exportação parou de descrever pixels e começou a referenciar sua fonte da verdade.
Por que isso importa na prática: referências de token significam que seu código herda mudanças de tema de graça. Mude o token, toda exportação rastreia. Os mapeamentos de Code Connect significam que a exportação reutiliza o Button que seu time já mantém, em vez de criar um quase-duplicado que deriva no momento em que alguém o toca.
Saída antiga do Make vs. a atualização de 18 de junho
Aqui está a comparação, porque a comparação é o argumento.
| Dimensão | Make do ano passado / exportação | Atualização de 18 de junho |
|---|---|---|
| Valores de cor | Hex bruto inserido no componente | Referências de token que herdam mudanças de tema |
| Espaçamento | Valores de pixel avulsos | Espaçamento mapeado por token |
| Componentes | Marcação nova inventada por frame | Mapeamento de Code Connect para seu componente existente |
| Relação com seu sistema | Nenhuma, saída independente | Conectado aos seus tokens e biblioteca de componentes |
| Primeiro movimento do engenheiro | Deletar e reescrever | Ler, manter a estrutura, refinar |
| Rótulo honesto | Demo | Ferramenta |
A coluna da direita é a única que merece um lugar em um pull request. A da esquerda é o motivo pelo qual ninguém confiava em "design para código" até agora.
Onde ainda precisa de você
O Make constrói o corpo, não o cérebro. Superestimar essa linha não ajuda ninguém, então aqui está o limite honesto do que a atualização de 18 de junho faz por você.
Layout, tokens e scaffolds estáticos de componentes saem limpos. Tudo que requer uma decisão ainda requer você. A exportação não sabe como um estado de carregamento deve parecer, o que acontece em caso de erro, ou se o seu estado vazio deve incentivar ou se desculpar.
| O Make faz isso bem | Isso ainda precisa de você |
|---|---|
| Layout e estrutura | Lógica de estado (carregando, erro, vazio, sucesso) |
| Estilo mapeado por token | Comportamento de interação e movimento |
| Scaffolds estáticos de componentes | Acessibilidade além do óbvio (ordem de foco, intenção ARIA, regiões ao vivo) |
| Espaçamento e hierarquia fiéis | Dados reais, casos extremos, strings longas, campos ausentes |
| Estrutura React de primeira passagem | Decisões de sistema: quando reutilizar vs. criar um novo componente |
Acessibilidade merece sua própria linha. O Make pode incluir atributos alt e tags semanticamente adequadas, mas não pode decidir a ordem de foco, anunciar uma região ao vivo, ou entender que seu modal precisa prender o foco e devolvê-lo. Essas são decisões de julgamento sobre como um humano se move pela sua interface, e julgamento não está na exportação.
Dados reais são o outro assassino silencioso. Um frame mostra uma linha perfeita. Produção mostra o usuário cujo nome tem 40 caracteres, o preço que é nulo, a lista que está vazia no primeiro dia.
O Make cria o scaffolding do caminho feliz. Você lida com a realidade.
Um fluxo de trabalho sano com Figma Make esta semana
Você não precisa reconstruir seu processo. Você precisa encaixar o Make no ponto certo e manter um humano nas costuras. Aqui está uma versão que você pode rodar em um componente real esta semana.
- Primeiro, mapeie de verdade seus tokens e Code Connect. Este é o pré-requisito sem glamour. O Make é tão bom quanto o sistema que ele referencia, então se seus tokens têm meios-nomes e sua cobertura de Code Connect é fraca, corrija isso antes de culpar a exportação.
- Rode o Make em um componente bem construído, não numa tela inteira. Escolha algo com estrutura clara e uma boa história de tokens. Você está testando fidelidade, não pedindo um milagre.
- Leia o diff como um revisor de código, não como um fã. Confirme que ele resolveu para referências de token e mapeou para seu componente real. Se inventou um valor hex ou um componente duplicado, esse frame não estava limpo em termos de sistema. Corrija a fonte.
- Entregue o scaffold ao engenheiro com o trabalho de estado, dados e acessibilidade claramente sinalizados como dele. A exportação é a estrutura inicial. As decisões são o trabalho.
- Alimente o que você aprende de volta ao sistema. Cada lugar em que o Make adivinhou é um lugar onde seus tokens ou mapeamentos de Code Connect eram ambíguos. Apertá-los torna a próxima exportação melhor. O sistema se fortalece.
O padrão é humano no loop, não humano fora do trabalho. O Make remove a etapa tediosa de tradução. Não remove o pensamento.
O que isso faz com seu entregável
Ver ao vivo em atlassian.design
Isso muda silenciosamente o que "pronto" significa para um designer. Por anos, o entregável era um frame pixel-perfect e uma esperança educada de que a engenharia o correspondesse. A correspondência sempre era com perda.
Agora o frame está mais próximo de um contrato. Se o seu design referencia tokens reais e seus componentes mapeiam através do Code Connect, a exportação carrega sua intenção para o código com menos deriva. O handoff para de ser uma tradução e começa a ser uma transferência.
Isso eleva o valor do trabalho de sistema e diminui o valor de screenshots bonitas. Os designers que ganham no próximo ano são aqueles cujos arquivos estão estruturados o suficiente para que o Make produza uma saída limpa. Um arquivo bagunçado produz código bagunçado mais rápido, enquanto um sistema disciplinado produz código herdável.
Então o upgrade real não é a IA. É a pressão para finalmente nomear seus tokens corretamente e mapear seus componentes. O Make apenas fez essa disciplina compensar imediatamente em vez de eventualmente.
Perguntas frequentes
A atualização de 18 de junho muda as respostas reais para as perguntas que designers fazem mais sobre o Figma Make.
O Figma Make escreve React pronto para produção agora?
Mais próximo, mas não sozinho. A atualização produz React conectado aos seus tokens reais e mapeamentos de Code Connect, o que é sólido e vale manter. Ainda deixa estado, acessibilidade e dados reais para você. Trate como um primeiro rascunho sólido, não uma funcionalidade pronta.
O que é Code Connect e por que importa para a exportação?
O Code Connect mapeia um componente no seu arquivo Figma para o real no seu codebase. É a diferença entre o Make inventar um botão novo e o Make reutilizar o Button que seu time já mantém, então a exportação aponta para sua fonte da verdade em vez de criar um duplicado.
O Make usa meus tokens de design ou inventa seus próprios valores?
Usa seus tokens, que é o núcleo da mudança de 18 de junho. Exportações antigas inseriam hex bruto diretamente na marcação. A atualização resolve valores para referências de token, então seu código herda mudanças de tema em vez de congelar um snapshot. Um hex bruto na saída significa que aquele frame nunca foi mapeado para um token.
Onde o Make ainda fica aquém?
Cinco lugares ainda precisam de um humano, os mesmos que a tabela acima lista:
- Lógica de estado: carregando, erro, vazio, sucesso
- Comportamento de interação e movimento
- Acessibilidade além do óbvio
- Dados reais, casos extremos e strings longas
- Quando reutilizar um componente versus criar um novo
O Make lida com layout, estilo mapeado por token e scaffolds estáticos. As decisões de julgamento são onde fica o trabalho de verdade.
Devo mudar meu fluxo de trabalho esta semana?
Sim, de uma forma pequena. Rode o Make em um único componente limpo, revise o diff como um engenheiro, e use o que ele revela para apertar seus tokens e cobertura de Code Connect. Não vire toda sua equipe para handoff com IA da noite para o dia.
A conclusão
O Figma Make cruzou a linha de demo para ferramenta em 18 de junho. A prova não são os cerca de 9,2 mil reposts no thread de anúncio do @figma, são os diffs de produção que engenheiros postaram abaixo e não deletaram.
O mecanismo é simples. O Make parou de descrever pixels com hex bruto e marcação avulsa, e começou a referenciar seus tokens reais e mapeamentos de Code Connect. Essa é a diferença entre código que você descarta e código que você mergeia.
Não superestime para seu time. O Make constrói o esqueleto. Estado, interação, acessibilidade e casos extremos ainda são seu trabalho, e sempre serão. O movimento mais inteligente desta semana é usar a atualização como motivo para finalmente acertar seus tokens e Code Connect, porque um sistema limpo é o que transforma essa funcionalidade de brinquedo em ferramenta que você pode realmente enviar.
Need a design system your code actually inherits? We build them.
Get Started
