Servidor MCP do Figma
Permita que os agentes de IA acessem um contexto de design estruturado para gerar código preciso e informado pelo design.
Dev Mode
Desenvolvimento e design conectados em cada etapa
O servidor MCP do Figma insere componentes de design system diretamente em sua base de código.
Passe da tela de trabalho para a programação, e vice-versa.
Alternância fluida das diversas partes do processo de produção, conectando a intenção do design e a programação.
Gravar na tela de trabalho
Crie Figma Designs a partir do próprio agente de IA. Eles são editáveis, permitindo que sua equipe faça ajustes na tela de trabalho.
Conecte código e design
Mapeie os componentes de design para componentes de produção reais. Dessa forma, o novo código usa seu sistema atual.
Sintaxe de código em variáveis
Represente variáveis no código para facilitar a implementação. O trecho de código da variável aparece na inspeção.
Os produtos que você ama são projetados no Figma
Com o Dev Mode, veio também uma grande mudança de mentalidade. Ele está ajudando designers e desenvolvedores a falarem a mesma língua, e nós estamos repensando o processo de criação de produtos.
Andrei Garcia
Diretor de design system da HP
- 90%
90% dos desenvolvedores observaram melhorias na qualidade do trabalho
- 1h30
1h30 de trabalho economizada por semana
Sintonia sem reuniões.
Transforme seu código em visuais revisáveis, acompanhe quando os designs estiverem Ready for dev e veja todas as atualizações em um feed feito para desenvolvedores.
Status e notificações Dev
Acompanhe quando os designs estão Ready for dev. Receba notificações de mudança de status ou atualizações dos designs.
Compare alterações
Veja exatamente o que mudou com o tempo, comparando lado a lado.
Do código para a tela de trabalho
Transforme a UI ao vivo em um arquivo Figma editável, permitindo que os designers revisem com contexto.
Recursos Dev
Conecte arquivos do GitHub, tickets do Jira e histórias do Storybook diretamente às camadas.
Encontre os detalhes de que você precisa para criar com velocidade.
Entenda a estrutura de cada design. Experimente, teste e programe sem afetar o arquivo de design.
Modo Foco
Visualização isolada dos quadros que você está construindo, filtrando o restante da tela de trabalho.
Inspeção avançada
Acesse trechos de código, propriedades do componente e dados de camada estruturados diretamente da tela de trabalho.
Playground de componentes
Explore interativamente as propriedades do componente e variantes. Saiba qual componente usar e como usá-lo.
Anotações
Os desenvolvedores podem obter informações de variáveis, propriedades e medidas de camadas específicas.
