Dev Mode
Criado para desenvolvedores, o Dev Mode permite inspecionar facilmente os designs e traduzi-los em código, sem modificar o arquivo de design. O Dev Mode está incluído nos acessos Full e Dev em todos os planos pagos.
Equipes que confiam no Figma:
Gere um código melhor usando o contexto do Figma
Transforme os Figma designs em código preciso com o servidor Figma MCP. Ele leva o contexto do Figma diretamente para ferramentas de codificação agentivas como VS Code, Cursor, Windsurf e Claude, para um fluxo de trabalho mais eficiente.
Encontre as informações que você precisa para começar logo a construir
Com funcionalidades projetadas para simplificar a inspeção de código e destacar o que está Ready for Dev, seu fluxo de trabalho será mais fluido do que nunca.
Compare alterações do design
Veja quando foi a última edição de estruturas e componentes, ou abra o histórico de versões para comparar as alterações no design lado a lado.
Explore as especificações de design
Inspecione as propriedades dos componentes, como códigos de cores e valores de token, verifique o espaçamento e copie e cole o código para acelerar o processo de desenvolvimento.
Mude a visualização para ter mais clareza
Clique na visualização “Ready for Dev” para ver os designs marcados como prontos para desenvolvimento. Você também pode clicar em componentes específicos para isolá-los na visualização focada.
Crie com a extensão para VS Code
Trabalhe em um ambiente que você já conhece e adora com a extensão para VS Code: menos alternância de telas e mais programação.
O Dev Mode do Figma facilita muito a colaboração entre desenvolvedores e designers, reduzindo atritos entre eles — estamos adorando.
Sandra Schaus
Lead UX Expert, Business Development Services, Volkswagen Group Services
Conecte seu design system e sua base de código para criações consistentes
O Dev Mode permite criar designs consistentes e reutilizáveis, e com o Code Connect você pode conectá-los perfeitamente à sua base de código.
Conecte sua base de código ao Code Connect
O Code Connect permite que você gere instantaneamente trechos de código prontos para uso ao vincular sua base de código ao seu design system no Figma.
Ver todas as opções de componentes
O playground de componentes permite visualizar todas as variações possíveis de componentes e ver como eles se comportam. Você conta até mesmo com o código para implementação. Você só precisa escolher a melhor opção.
Acesse variáveis de design em todo o sistema
Mantenha a consistência da marca e poupe tempo usando variáveis existentes, ou valores de token, com as sintaxes de código correspondentes no Figma. Isso faz com que seja fácil manter a consistência em todos os seus aplicativos.
O que adoramos no Code Connect é que ele reduz muito da troca de contextos que os desenvolvedores precisavam fazer anteriormente.
Gilson Hoffmeister
Design Systems Strategist, HP
Simplifique o vai e vem com parceiros de design
Recursos como atualizações de status, comentários e anotações mantêm o alinhamento com os designers durante todo o processo de criação.
Reduza a repetição de trabalho com uma melhor comunicação
Receba notificações de alterações no design em tempo real para nunca trabalhar com informações desatualizadas. A visualização Ready for Dev fornece um resumo claro do que está pronto para ser criado, o que foi alterado e o que foi concluído.
Código com contexto
Revise as anotações e os comentários dos designers para ter uma compreensão clara do que você precisa criar.
Verifique suas medições
Designers podem adicionar medições para ajudar você a visualizar rapidamente o espaçamento e o dimensionamento, garantindo que nada se perca na transição do design para o código.
Acesse mais recursos de design e desenvolvimento
Tudo o que você precisa saber sobre o Dev Mode
Criamos o Dev Mode para tornar o desenvolvimento de produtos mais eficiente, da ideia à programação. Saiba mais sobre a nossa filosofia de produtos e o que vem por aí.
5 coisas que designers precisam saber para facilitar o handoff
O handoff é um processo, não um momento. Então, como simplificar as coisas diante de um fluxo constante de designs em andamento, comunicação e colaboração? A designer Lauren Andres dá algumas dicas.
Explore os plugins da comunidade para desenvolvedores
Explore milhares de plugins criados pela Comunidade Figma que podem expandir a maneira como você trabalha no Figma.