Adicionar medidas e fazer anotações em designs no Dev Mode
Esse artigo está disponível tanto no Figma UI anterior como no novo Figma UI. Use o botão de alternância no canto inferior esquerdo da página para selecionar o UI atual. Conheça o UI3: a reformulação do Figma →
Antes de você começar
Quem pode usar este recurso
Disponível em todos os planos pagos
Qualquer pessoa com uma licença total para design e acesso de editor a um arquivo pode adicionar medidas e anotações
Qualquer pessoa com uma licença total para design ou uma licença do Dev Mode e acesso de visualizador ou superior a um arquivo pode visualizar medições e anotações
Crie handoffs mais rápidos e transparentes com anotações e medidas que permanecem atualizadas, mesmo se os designs mudarem.
Com as anotações, os designers podem comunicar e conectar detalhes importantes diretamente aos designs:
- Destacar propriedades importantes para que não passem despercebidas pelos desenvolvedores
- Ajudar os desenvolvedores a visualizar rapidamente especificações como os espaços e as dimensões
- Compartilhar contexto adicional com notas de texto
Os desenvolvedores podem ver as anotações sendo atualizadas em tempo real enquanto trabalham no Dev Mode. Dessa forma, nenhuma informação importante é perdida durante o handoff.
Dica: no Modo de Design, você recebe notificações quando novas anotações são adicionadas a um arquivo. Clique no ponto ao lado do design e selecione View annotations in Dev Mode para ver as anotações atualizadas no Dev Mode.
Adicionar medidas a um design
Adicionar medidas ajuda os desenvolvedores a visualizar rapidamente os espaços e o tamanho.
Para adicionar uma medida a um design:
- Clique no botão Dev Mode no canto superior direito da barra de ferramentas ou use o atalho de teclado Shift D.
- 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.
Dica: para excluir uma medida, clique nela e pressione a tecla Delete ou Backspace.
Adicionar anotações a um design
Os designers podem adicionar anotações para fornecer contexto, definir propriedades de design ou comunicar outras informações relevantes para que os desenvolvedores transformem design em código. Uma mistura de texto livre e propriedades definidas, como direção de alinhamento ou dimensionamento, pode ser anotada. Mesmo que os designs sejam atualizados posteriormente, as propriedades de anotação permanecem atualizadas e precisas, garantindo que nada se perca na tradução.
Para adicionar anotações a um design:
- Clique no botão Dev Mode no canto superior direito 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.
Dica: com a API de plugin, as equipes podem criar plugins personalizados do Dev Mode para criar e gerenciar anotações em massa.
Ocultar anotações
Todas as anotações em um arquivo do Figma Design são visíveis no Dev Mode por padrão. Para ocultar anotações:
- Clique em Menu principal na barra de ferramentas.
- Passe o mouse sobre a opção View no menu suspenso.
- Desmarque a opção Annotations.
Dica: para excluir uma anotação, clique nela e pressione a tecla Delete ou Backspace.
Antes de você começar
Quem pode usar este recurso
Disponível em todos os planos pagos
Qualquer pessoa com uma licença completa do Design pode editar anotações no Dev Mode
Qualquer pessoa com uma licença do Dev Mode pode ver as anotações no Dev Mode
Crie handoffs mais rápidos e transparentes com anotações e medidas que permanecem atualizadas, mesmo se os designs mudarem.
Com as anotações, os designers podem comunicar e conectar detalhes importantes diretamente aos designs:
- Destacar propriedades importantes para que não passem despercebidas pelos desenvolvedores
- Ajudar os desenvolvedores a visualizar rapidamente especificações como os espaços e as dimensões
- Compartilhar contexto adicional com notas de texto
Os desenvolvedores podem ver as anotações dos designers em tempo real enquanto trabalham no Dev Mode, garantindo que não percam nenhuma informação importante durante o handoff.
Dica! No Modo de Design, você recebe notificações quando novas anotações são adicionadas a um arquivo. Clique no ponto ao lado do design e selecione View annotations in Dev Mode para ver as anotações atualizadas no Dev Mode.
Adicionar medidas a um design
Adicionar medidas ajuda os desenvolvedores a visualizar rapidamente os espaços e o tamanho.
Para adicionar uma medida a um design:
- Clique no botão Dev Mode no canto superior direito da barra de ferramentas ou use o atalho de teclado Shift D.
- 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.
Dica: para excluir uma medida, clique nela e pressione a tecla Delete ou Backspace.
Adicionar anotações a um design
Os designers podem adicionar anotações para fornecer contexto, definir propriedades de design ou comunicar outras informações relevantes para que os desenvolvedores transformem design em código. Uma mistura de texto livre e propriedades definidas, como direção de alinhamento ou dimensionamento, pode ser anotada. Mesmo que os designs sejam atualizados posteriormente, as propriedades de anotação permanecem atualizadas e precisas, garantindo que nada se perca na tradução.
Para adicionar anotações a um design:
- Clique no botão Dev Mode no canto superior direito 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.
Dica: com a API de plugin, as equipes podem criar plugins personalizados do Dev Mode para criar e gerenciar anotações em massa.
Ocultar anotações
Todas as anotações em um arquivo do Figma Design são visíveis no Dev Mode por padrão. Para ocultar anotações:
- Clique em Menu principal na barra de ferramentas.
- Passe o mouse sobre a opção View no menu suspenso.
- Desmarque a opção Annotations.
Dica: para excluir uma anotação, clique nela e pressione a tecla Delete ou Backspace.