O Dev Mode no Figma tem tudo de que você precisa para navegar nos arquivos de design e transformar os designs em código. Com o Dev Mode, designers e desenvolvedores se mantêm alinhados, garantindo que nenhuma informação importante se perca no processo de handoff.

Os desenvolvedores usam o Dev Mode para:

• Acessar recursos de inspeção avançada e mais linguagens de geração de código
• Garantir que estão utilizando as especificações mais recentes no desenvolvimento por meio da comparação facilitada das versões dos quadros
• Revisar rapidamente os designs que estão Ready for Dev com status e anotações
• Simplificar os fluxos de trabalho com integrações centradas no desenvolvedor, como o JIRA, Storybook e GitHub
• Explorar todas as variantes de um conjunto de componentes sem editar o arquivo
• Vincular designs a tíquetes, documentos e componentes de código
• Inspecionar designs e gravar código lado a lado usando a extensão Figma para VS Code

Entrar no Dev Mode

O Dev Mode é uma interface centrada no desenvolvedor que se destina a inspecionar designs e navegar neles. É possível acessar o Dev Mode em qualquer arquivo de design do Figma. Para alternar entre o modo Design e o Dev Mode:

1. Abra um arquivo de design do Figma.
2. Clique no botão Dev Mode ou use o atalho do teclado ShiftD.

Navegar

No Dev Mode, a barra lateral esquerda oferece uma maneira simples de alternar entre designs marcados como Ready for Dev.

• A

  Visualize os recursos que estão Ready for Dev

  O ícone do Dev Mode indica quais páginas contêm quadros, componentes, instâncias e seções marcadas como Ready for Dev. Os objetos na tela marcados como Pronto aparecem sob Ready for Dev no painel de camadas do Dev Mode.

  Para marcar um recurso como Ready for Dev:

  1. No Dev Mode, selecione um quadro, componente, instância ou seção.
  2. Clique em Marcar como Ready for Dev na barra de ferramentas.

  Além disso, se você tiver uma licença completa, de desenvolvedor ou de visualizador em uma organização ou empresa, o Dev Mode fornece uma visualização dos designs que estão marcados como Ready for Dev. Essa visualização só aparece se houver pelo menos um design com status de desenvolvimento no arquivo.

• B

  Saiba quando um quadro foi editado pela última vez

  Logo abaixo do nome do quadro, no painel de navegação, você consegue ver quando um quadro foi editado pela última vez.

• C

  Navegue por quadros e camadas

  No modo Design, qualquer pessoa pode agrupar conteúdos relacionados em seções e marcá-las como Ready for Dev. O Dev Mode prioriza o conteúdo que está em uma seção. O conteúdo que está fora da seção continua visível na barra lateral esquerda, mas fica recolhido por padrão.

  Clique em um quadro na barra lateral esquerda para centralizá-lo na tela. Selecione o quadro na tela para visualizar as camadas aninhadas nele. Quando um quadro é selecionado, o painel de navegação é transformado em um painel de camadas e mostra somente as camadas do quadro de nível superior selecionado.

  Navegue por quadros e camadas no Dev Mode ->

Inspecionar

O painel Inspeção mostra as especificações do design e informações relevantes sobre os componentes, que são necessárias para compreender o design e transformá-lo em código.

• A

  Compare as alterações do design

  Se houve mudanças no arquivo depois que você o visualizou pela última vez, a opção Comparar alterações aparecerá ao lado das informações sobre a camada no painel inspeção. Clique no link para abrir o modal de histórico do quadro, onde é possível comparar a versão atual do design com as versões anteriores.

  Você também pode comparar um componente desvinculado com as versões anteriores e com o componente principal ao qual ele estava vinculado. É possível limpar o histórico de desvinculação para não ver informações sobre o componente principal original.

  Compare alterações no Dev Mode ->
• B

  Adicione links externos e recursos para desenvolvedores

  Tanto os designers quanto os desenvolvedores podem adicionar links para recursos externos que podem ser úteis na implementação do componente, por exemplo, links do GitHub, Jira e Storybook, além de links do VS Code que podem ser usados com a extensão Figma para VS Code. Os recursos de desenvolvimento adicionados ao componente são propagados para todas as instâncias do componente.

  Adicione links para recursos às camadas no Dev Mode →

C

Crie mais rápido com trechos de códigos personalizáveis

• D

  Visualize os nomes e os tipos de camadas

  O nome da camada selecionada aparece no topo do painel Inspeção, junto com o tipo de camada (componente, instância, quadro, texto etc.). A data da última atualização da camada também é exibida.

• E

  Faça testes com variações do componente no playground de componentes

  Ao selecionar um componente ou uma instância, você verá uma visualização do componente, um link para o componente principal, bem como links para documentação relevante e recursos de desenvolvimento.

  O playground de componentes aparece no painel inspeção quando você seleciona uma instância do componente. Use o playground para fazer testes com as várias propriedades do componente sem alterar de fato o design.

• F

  Visualize os estilos aplicados

  Visualize estilos e variáveis aplicados na camada selecionada.

• G

  Baixe os recursos

  O Dev Mode consegue detectar os ícones automaticamente e apresentá-los aos desenvolvedores como recursos que podem ser baixados. Para inspecionar uma camada vetorial individual em um ícone, desative a detecção automática de ícones:

  1. Clique em Menu principal na barra de ferramentas
  2. Passe o mouse sobre a opção Visualizar no menu suspenso
  3. Desmarque a opção Detectar ícones automaticamente

  Os recursos também permitem baixar nós de GIF e MP4.

• A

  Exportar

  Você pode aplicar as configurações de exportação às camadas para definir o formato e qualquer outra configuração de exportação. O Figma permite exportar nos seguintes formatos: PNG, JPG, SVG e PDF. Saiba mais sobre exportações no Figma →

Anotar

Os designers podem usar anotações para adicionar contexto, especificações e medições aos designs. Assim fica mais fácil para os desenvolvedores garantirem que não deixaram passar nenhuma informação crucial durante o handoff. Use anotações e medições no Dev Mode para:

• Destacar propriedades importantes para que não passem despercebidas pelos desenvolvedores
• Ajudar os desenvolvedores a visualizar rapidamente os espaços e as dimensões
• Acrescentar contexto com notas de texto diretamente conectadas aos designs

Saiba como adicionar medições e fazer anotações no design no Dev Mode →

Gerenciar o handoff ao desenvolvedor

Quando há seções, quadros e componentes marcados como Ready for Dev, você pode utilizar as visualições em foco e de desenvolvedor do Dev Mode para ajudar no gerenciamento do processo de handoff ao desenvolvedor:

• A Visualização Ready for Dev é um jeito fácil de explorar todos os designs marcados como Ready for Dev em um arquivo. Você pode filtrar e visualizar todos os seus designs marcados como Ready for Dev. Saiba mais sobre a visualização Ready for Dev e o processo de handoff →
  

• A visualização focada exibe apenas um design Ready for Dev por vez. Você pode usar todas as ferramentas que costuma usar no Dev Mode, explorar as camadas do design e encontrar informações importantes, como um histórico de versões anotado. Saiba mais sobre o modo Foco →

Status e notificações do Dev Mode

Os status e as notificações no Dev Mode ajudam a gerenciar o handoff de desenvolvimento. Os status são usados para rastrear quando seções, quadros ou componentes estão Ready for Dev. As notificações são baseadas em alterações de status para que os desenvolvedores possam reagir ao estado dos designs.

Status

Todos os planos que oferecem o Dev Mode incluem o status Ready for Dev. É possível definir o status Ready for Dev em componentes, quadros e seções, para indicar que o design está Ready for Dev. Um status adicional, Concluído, estará disponível se você tiver um plano Organização ou Enterprise.

Para mais informações, incluindo como usar os status, consulte Status e notificações do Dev Mode.

Notificações

Se você visualizou um arquivo no Dev Mode e possui uma licença completa ou de desenvolvedor, você receberá uma notificação sempre que um design for marcado como Ready for Dev nesse arquivo. Isso inclui a primeira vez que um design for marcado como Ready for Dev e também quando o status Ready for Dev for removido e depois definido novamente.

Para mais informações, incluindo como ativar e desativar as notificações do Dev Mode, consulte Status e notificações do Dev Mode.

Usar plugins do Dev Mode

Os plugins do Dev Mode ajudam a automatizar tarefas e conectar outras ferramentas para documentação e comunicação. Por exemplo:

• Acompanhar as tarefas de desenvolvimento por meio da sincronização do Jira com o Figma, FigJam e Dev Mode
• Conectar seu sistema de design do Figma e seu sistema de design em código com o Storybook
• Vincular designs ao código, para que fiquem sempre sincronizados, trazendo o GitHub para o Figma
• Personalizar o código produzido para Tailwind ou React ou para seus próprios componentes de código

A aba Plug-ins no Dev Mode mostra os plug-ins que você usou recentemente e os plug-ins recomendados pela Figma Community.

Saiba como usar plug-ins em arquivos →

Confira o arquivo de playground Plug-ins para Dev Mode para aprender a usar os plug-ins do Dev Mode na prática.

Figma para VS Code

O Figma para VS Code permite navegar e inspecionar arquivos de design, colaborar com designers, acompanhar alterações nos designs e acelerar a implementação do design – tudo isso sem sair do editor de texto. Aumente a produtividade do desenvolvedor, eliminando a alternância entre contextos e o trabalho intenso de transformar designs em código.

• Ver e responder comentários e atividades em tempo real
• Obter sugestões de códigos com base nos designs
• Vincular arquivos de códigos para criar componentes

Saiba mais sobre a extensão Figma para VS Code →