Guia de inspeção
Se estiver usando o UI3, o novo design do Figma, algumas partes deste artigo podem não corresponder ao que você vê no produto atualmente. Agradecemos a sua paciência enquanto fazemos as atualizações. Saiba mais sobre a reformulação do Figma →
Inspecionar designs ajuda desenvolvedores ou outras partes interessadas a compreender a estrutura e as propriedades de um design, facilitando sua tradução em código.
A forma como você inspeciona um arquivo de design depende do tipo de plano, tipo de licença e das permissões do arquivo. Use a ferramenta abaixo para aprender a realizar tarefas comuns de inspeção, como exportação, medição, geração de código, visualização de anotações e uso de plugins para desenvolvimento, com base no seu nível de acesso ao arquivo.
Independentemente do seu acesso ao arquivo, há uma experiência de inspeção disponível para você.
Primeiro, verifique se você tem acesso ao Dev Mode no arquivo que está inspecionando, alternando para o Dev Mode na parte superior do arquivo ou usando o shortcut de teclado Shift + D. Se você não tiver acesso ao Dev Mode, estará inspecionando no modo de design. Você pode selecionar se tem acesso de editor ou visualizador para ver como inspecionar.
Não tenho Dev Mode e tenho acesso somente de visualização
Precisa de acesso ao Dev Mode? Se você estiver no plano básico, precisará fazer o upgrade para um plano pago ou mover seu arquivo para uma equipe paga. Se você estiver em um plano pago, precisará de uma licença Full ou Dev.
Medir distâncias
Você pode medir distâncias entre objetos, mesmo se estiverem aninhados dentro de estruturas, grupos ou componentes.
- Selecione o primeiro objeto no canvas.
- Mantenha pressionada a tecla modificadora:
- Mac: ⌥ Option
- Windows: Alt
- Passe o mouse sobre o segundo objeto.
O Figma exibirá uma linha vermelha entre os dois objetos, bem como medidas horizontais e verticais.
Dica: está com dificuldades para medir? Confira o guia para medir a distância entre objetos.
Gerar código
Copiar trechos de código gerados automaticamente para CSS, iOS ou Android.
- Selecione um objeto no canvas.
- Clique com o botão direito no objeto e selecione Copiar/Colar como > Copiar como código.
- Escolha a opção de código que melhor atende às suas necessidades.
Visualizar propriedades
A tab Properties exibe uma lista de propriedades dos objetos na tela. Isso inclui propriedades como: layout, cor, tipografia, cadeias de texto, propriedades de componentes, estilos e variáveis. Para visualizar as propriedades de um objeto:
- Selecione um objeto no canvas.
- Clique na tab Properties na barra lateral direita.
Exportar
- Selecione as camadas que deseja exportar. Caso deseje exportar a tela inteira da página atual, desmarque todas as seleções feitas na tela.
- Na tab Export, clique no ícone de mais para adicionar uma configuração de exportação. Adicione quantas configurações de exportação forem necessárias.
- Configure as definições de exportação. Saiba mais sobre os formatos e configurações de exportação do Figma →
- Se quiser, clique em Visualizar para ver como o recurso ficará. Se você tiver vários objetos selecionados, a configuração Preview não será exibida.
- Clique em Exportar.
Dica: quer saber mais sobre exportação? Confira o guia completo de exportações no Figma.
Visualizar ou adicionar comentários
Os comentários ajudam designers e desenvolvedores a colaborar, destacando partes específicas do design. Você pode deixar comentários para fornecer mais contexto sobre como partes do design devem funcionar.
- Clique na barra de ferramentas ou pressione C para entrar no modo de comentário. Seu cursor se transformará em um .
- Selecione um local para comentar:
- Clique no local do canvas onde você quer que o comentário seja fixado.
- Ou, clique e arraste o cursor para selecionar uma região para comentar.
- Digite sua mensagem no campo de texto. Digite @ para mencionar um colega ou colaborador.
- Clique em para enviar sua mensagem.
Usar plugins
Você precisará de acesso de editor para usar plugins em um arquivo.
Não tenho o Dev Mode e tenho acesso de editor
Precisa de acesso ao Dev Mode? Se você estiver no plano básico, precisará fazer o upgrade para um plano pago ou mover seu arquivo para uma equipe paga. Se você estiver em um plano pago, precisará de uma licença Full ou Dev.
editor a um design, você pode usar as ferramentas de inspeção diretamente no Design Mode:
Medir distâncias
Você pode medir distâncias entre objetos, mesmo se estiverem aninhados dentro de estruturas, grupos ou componentes.
- Selecione o primeiro objeto no canvas.
- Mantenha pressionada a tecla modificadora:
- Mac: ⌥ Option
- Windows: Alt
- Passe o mouse sobre o segundo objeto.
O Figma exibirá uma linha vermelha entre os dois objetos, bem como medidas horizontais e verticais.
Dica: está com dificuldades para medir? Confira o guia para medir a distância entre objetos.
Gerar código
Copiar trechos de código gerados automaticamente para CSS, iOS ou Android.
- Selecione um objeto no canvas.
- Clique com o botão direito no objeto e selecione Copiar/Colar como > Copiar como código.
- Escolha a opção de código que melhor atende às suas necessidades.
Visualizar propriedades
A tab Design oferece uma lista de propriedades para os objetos no canvas. Isso inclui propriedades como: layout, cor, tipografia, strings de texto, propriedades de componentes, estilos e variáveis. Para visualizar as propriedades de um objeto:
- Selecione um objeto no canvas.
- Na tab Design, na barra lateral direita, role até a seção com as propriedades que deseja inspecionar.
Exportar
- Selecione as camadas que deseja exportar. Caso deseje exportar a tela inteira da página atual, desmarque todas as seleções feitas na tela.
- Na guia Design, clique no ícone de mais na seção Export para adicionar uma configuração de exportação. Adicione quantas configurações de exportação forem necessárias.
- Configure as definições de exportação. Saiba mais sobre os formatos e configurações de exportação do Figma →
- Se quiser, clique em Visualizar para ver como o recurso ficará. Se você tiver vários objetos selecionados, a configuração Preview não será exibida.
- Clique em Exportar.
Dica: quer saber mais sobre exportação? Confira o guia completo de exportações no Figma.
Visualizar ou adicionar comentários
Os comentários ajudam designers e desenvolvedores a colaborar, destacando partes específicas do design. Você pode deixar comentários para fornecer mais contexto sobre como partes do design devem funcionar.
- Clique na barra de ferramentas ou pressione C para entrar no modo de comentário. Seu cursor se transformará em um .
- Selecione um local para comentar:
- Clique no local do canvas onde você quer que o comentário seja fixado.
- Ou, clique e arraste o cursor para selecionar uma região para comentar.
- Digite sua mensagem no campo de texto. Digite @ para mencionar um colega ou colaborador.
- Clique em para enviar sua mensagem.
Usar plugins
Você pode executar um plugin da Comunidade ou diretamente de um arquivo no Figma ou FigJam.
- Clique em Resources na toolbar.
- Na tab Plugins, selecione entre os plugins usados recentemente ou salvos ou procure um plugin na Comunidade.
- Clique em um plugin para visualizar seus detalhes.
- Clique em Run para rodar o plugin no arquivo atual.
Eu tenho o Dev Mode
Para inspecionar designs, entre no Dev Mode selecionando o botão Dev Mode usando o atalho de teclado Shift + D. A partir daí, você pode usar as seguintes ferramentas de inspeção:
Medir distâncias
Você pode medir distâncias entre objetos, mesmo se estiverem aninhados dentro de estruturas, grupos ou componentes. No Dev Mode, selecione qualquer camada pai ou filho na tela. Ao passar o cursor sobre camadas ao redor, o Figma exibe os valores de padding ou as distâncias entre os dois objetos. Você também pode medir a distância entre objetos específicos:
- Selecione o primeiro objeto no canvas.
- Mantenha pressionada a tecla modificadora:
- Mac: ⌥ Option
- Windows: Alt
- Passe o mouse sobre o segundo objeto.
O Figma exibirá uma linha vermelha entre os dois objetos, bem como medidas horizontais e verticais.
Gerar código
Clique em qualquer objeto na tela enquanto estiver no Dev Mode para preencher a seção Code no painel de inspeção. Dependendo do que estiver selecionado, será exibida uma preview tipográfica ou um modelo de caixa, seguido de trechos de código gerados automaticamente para o objeto.
Para alterar suas preferências de idioma e unidade, ou usar um plugin de geração de código:
- No canto superior direito da seção Code, selecione um idioma ou plugin no menu suspenso.
- Se necessário, clique em Inspect settings e selecione uma unidade no menu suspenso.
Saiba como usar trechos de códigos no Dev Mode→
Observação: alguns recursos do Dev Mode, como a seção Code, não aparecerão no painel de inspeção se a cópia e o compartilhamento estiverem desativados no arquivo.
Visualizar propriedades
No Dev Mode, a tab Inspect exibe uma lista de propriedades dos objetos na tela. Isso inclui propriedades como: layout, cor, tipografia, cadeias de texto, propriedades de componentes, estilos e variáveis. Para visualizar as propriedades de um objeto:
- No Dev Mode, selecione um objeto no canvas.
- Na tab Inspect, na barra lateral direita, role até a seção com as propriedades que deseja inspecionar.
Dica: ao inspecionar um componente ou instância, você verá uma prévia do componente, um link para o componente principal e links para documentação e recursos de desenvolvimento relevantes. O component playground aparece no painel Inspect quando uma instância de componente é selecionada. Use o playground para testar as diferentes propriedades dos componentes sem alterar o design real.
Explorar variáveis
O Dev Mode inclui algumas formas de trabalhar com variáveis ao inspecionar um design:
- Veja detalhes sobre uma variável, incluindo o valor e o modo. Você pode alternar entre os modos e, se o valor utilizar algum alias, toda a cadeia de aliases até o valor bruto da variável.
- Obtenha variáveis sugeridas para valores brutos em um design, caso os valores coincidam com uma ou mais de suas variáveis existentes.
- Acesse as coleções de variáveis criadas no arquivo atual e visualize todas as variáveis e modos em uma tabela.
Para mais detalhes, veja Variáveis no Dev Mode.
Exportar ou baixar assets
O Dev Mode pode detectar ícones automaticamente e apresentá-los como assets para download para os desenvolvedores. Você verá esses assets na tab Inspect acima das configurações de exportação. Passe o mouse sobre qualquer item, selecione um tipo de arquivo e clique no ícone de download.
Para definir uma exportação personalizada:
- No Dev Mode, selecione as camadas que deseja exportar.
- Na tab Inspect, clique no ícone de mais na seção Export para adicionar uma configuração de exportação. Adicione quantas configurações de exportação forem necessárias.
- Configure as definições de exportação. Saiba mais sobre os formatos e configurações de exportação do Figma →
- Se quiser, clique em Visualizar para ver como o recurso ficará. Se você tiver vários objetos selecionados, a configuração Preview não será exibida.
- Clique em Exportar.
Ver ou adicionar anotações
Com as anotações, os designers podem comunicar detalhes importantes sobre um design diretamente aos desenvolvedores. Isso inclui destacar propriedades importantes, visualizar espaçamento e dimensionamento com medições ou compartilhar contexto com notas de texto.
No Dev Mode, as anotações aparecem na canvas como um ponto verde. Clique em uma anotação para revelar seu conteúdo.
Observação: você precisa de uma Licença Full e acesso de editor para adicionar anotações a um arquivo.
Para adicionar anotações a um design:
- Clique no botão Dev Mode na parte superior direita da barra de ferramentas ou use o atalho de teclado Shift + D.
- Clique em Annotate na barra de ferramentas ou use o atalho de teclado Shift + T.
- Selecione a camada que você gostaria de anotar.
- Escreva uma nota no campo de texto ou clique em + Property para selecionar uma propriedade da lista. Você pode incluir texto simples e propriedades em uma anotação.
Para adicionar uma medida a um design:
- Clique em Measure na barra de ferramentas ou use o atalho de teclado Shift + M.
- Passe o mouse sobre uma camada para ver as opções de onde começar a medida.
- Clique e arraste do ponto inicial até a camada em que você deseja que a medida termine.
- Clique e arraste a medida para que ela não cubra o design.
Usar plugins
A tab Plugins no Dev Mode mostra os plugins usados recentemente, bem como os plugins recomendados da Comunidade Figma.
Saiba como usar plug-ins em arquivos →
Compare alterações
Se uma estrutura ou componente tiver sido atualizado desde a última vez em que foi visualizado, você poderá comparar o histórico de versões. Isso ajuda a acompanhar as atualizações mais recentes e a manter o código de produção preciso.
Você também pode comparar componentes desvinculados (ou instâncias com substituições de design) com o componente base.
- Selecione uma estrutura ou um componente de nível superior.
- Na tab Inspect da barra lateral direita, clique em Compare changes.
Dica: mantenha pressionado Shift e clique para selecionar dois componentes na tela e comparar um com o outro.