Ir para o conteúdo principal Desenvolvimento e design conectados em cada etapa Adicione contexto do Figma a uma IDE Conecte componentes de design e código Uma visualização exclusiva para o desenvolvedor O servidor MCP do Figma insere componentes de design system diretamente em sua base de código. Adicione contexto do Figma a uma IDE Conecte componentes de design e código Uma visualização exclusiva para o desenvolvedor Sincronize o design e a programação, de forma que a visualização da tela de trabalho seja construída automaticamente. Adicione contexto do Figma a uma IDE Conecte componentes de design e código Uma visualização exclusiva para o desenvolvedor Inspecione os componentes e brinque com os pontos de corte sem quebrar o design. 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. 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. Obtenha documentação do Figma MCP 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. 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. Gravar na tela de trabalho 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. Comece a usar o Code Connect 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. Use variáveis no Dev Mode 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.

Diretor de design system da HP 90% 90 % 90% dos desenvolvedores observaram melhorias na qualidade do trabalho 90% dos desenvolvedores observaram melhorias na qualidade do trabalho 1h30 1h30 de trabalho economizada por semana 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. Sobre os status do Dev Mode 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. Como comparar alterações 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. Sobre a transformação de código em tela de trabalho 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. Saiba mais 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. Sobre o 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. Como inspecionar 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. Configurar um playground 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. Os desenvolvedores podem obter informações de variáveis, propriedades e medidas de camadas específicas. Trabalhe com suas ferramentas agentes favoritas no Figma