🚧 O Dev Mode não está mais em beta
O Dev Mode no Figma oferece aos desenvolvedores tudo o que eles precisam para transformar designs em código. A partir de 31 de janeiro, o Dev Mode exigirá uma licença paga para acesso.
Antes de você começar
Quem pode usar este recurso
Incluído em uma licença Full ou Dev nos planos Professional, Organization e Enterprise.
Qualquer pessoa com acesso ao Dev Mode pode usar os recursos do Dev Mode.
Ativar o Dev Mode altera a interface de um arquivo Figma Design. No Dev Mode, a barra lateral esquerda oferece uma maneira simples de navegar entre designs e identificar quais seções estão Ready for Dev.
-
A
Buscar
Use o campo Search para encontrar um componente específico. O Figma procura objetos no arquivo atual, bem como em todas as bibliotecas às quais você tem acesso.
- Clique na barra lateral esquerda ou use o atalho de teclado a seguir para abrir a barra de pesquisa:
- Mac:Command f
- Windows:Ctrl f
- Digite o texto ou nome da camada que deseja encontrar. Os resultados da pesquisa são preenchidos automaticamente à medida que você digita.
- Você pode exibir os resultados por página atual ou ver os resultados de todas as páginas
- Clique em Settings para adicionar filtros de pesquisa para o tipo de camada, como texto, quadro, forma etc
- Use e para navegar pelo resultados
- No menu Settings, use Other para pesquisar tudo o mais, como nomes de widgets ou porções
- Clique em um resultado para ir até a camada no canvas.
- Para retornar ao painel de navegação, clique em ou pressione Esc.
- Clique na barra lateral esquerda ou use o atalho de teclado a seguir para abrir a barra de pesquisa:
-
B
Páginas
O ícone do Dev Mode indica quais páginas contêm seções marcadas como Ready for Dev. As seções marcadas como prontas aparecem em Ready for development no painel de navegação do Dev Mode.
-
C
Seções marcadas como Ready for Dev
O ícone do Dev Mode indica quais páginas contêm seções marcadas como Ready for Dev. As seções marcadas como prontas aparecem em Ready for development no painel de navegação do Dev Mode.
-
D
Camadas
O ícone do Dev Mode indica quais páginas contêm seções marcadas como Ready for Dev. As seções marcadas como prontas aparecem em Ready for development no painel de navegação do Dev Mode.
Usar o cursor para passar o mouse sobre as camadas da tela revela mais informações sobre o layout, como tamanho, espaçamento interno e espaçamento.
Quando um quadro de nível superior é selecionado, você pode usar as teclas de seta esquerda e direita ou clicar nas setas na tela para se mover entre cada quadro na página.