Criar, prototipar e explorar as propriedades das camadas na barra lateral direita

Quando você estiver no Figma Design, verá uma barra lateral em cada lado do canvas. Juntamente com a barra de ferramentas, essas barras laterais compõem a Figma UI.

A interface de usuário do Figma permite acessar, criar e ajustar elementos do seu design.

• A barra lateral esquerda dá acesso às camadas, assets e páginas incluídas no seu arquivo. Esse é o painel de camadas. Saiba mais sobre como navegar no painel de camadas.
• A barra lateral direita permite visualizar ou ajustar as propriedades de design e as configurações de protótipo do seu design.

Neste artigo, faremos um tour pela barra lateral direita.

O que você pode acessar na barra lateral direita depende de suas permissões no arquivo e de seu tipo de licença:

Usar a barra lateral direita com acesso de edição

Criar

A aba Design permite que você visualize, adicione, remova ou altere as propriedades dos objetos em seu design.

Se nada estiver selecionado no canvas, você poderá fazer o seguinte na aba Design:

• Acessar estilos e variáveis que locais no arquivo
• Atualizar a cor de fundo do canvas
• Exportar a página inteira

Se você selecionar uma camada, poderá acessar muitas configurações diferentes para editá-la. As configurações disponíveis dependerão da camada selecionada.

• Alinhamento e distribuição
• Tamanho e orientação da estrutura 
• Posição (X e Y)
• Dimensões e rotações (largura e altura)
• Raio do canto
• Restrições 
• Grade de layout
• Propriedades do componente
• Instância
• Auto layout
• Camada (modos de composição)
• Texto 
• Preenchimento 
• Traçado
• Efeitos 
• Configurações de exportação 

Protótipo

Use a aba Protótipo para começar a criar protótipos.

Selecione qualquer objeto para começar. Em seguida, na aba Protótipo:

1. Adicionar um ponto de partida do fluxo
   Um fluxo  é um caminho que os usuários percorrem na rede de estruturas conectadas que compõem seu protótipo. Adicione um ponto de partida para escolher a primeira estrutura da jornada.
2. Adicionar uma interação
   Abra o modal Detalhes da interação, onde você pode definir o gatilho, a ação e quaisquer animações para a interação.
3. Definir o comportamento de rolagem
   Selecione como o protótipo responde à rolagem.
4. Mostrar configurações do protótipo
   Permite ajustar o dispositivo e o plano de fundo de seu protótipo.

Saiba mais sobre prototipagem no Figma →

Entrar no Dev Mode

O Dev Mode é um espaço no Figma criado apenas para desenvolvedores. O Dev Mode mostra as especificações de design e informações relevantes necessárias para entender um design e transformá-lo em código.

Use o Dev Mode para:

• Visualizar e copiar propriedades, valores e códigos de componentes de design
• Ver o que mudou desde a última vez que você visualizou um arquivo comparando as versões de estruturas
• Inspecionar e navegar pelos arquivos de design com interações simples que revelam informações importantes da camada
• Encontrar rapidamente os designs prontos para desenvolvimento com os status de seções
• Otimizar o fluxo de trabalho com integrações enfocadas nos desenvolvedores, como Jira, Storybook e GitHub
• Adicionar links relevantes e recursos para desenvolvedores aos componentes

O Dev Mode é acessado a partir de um botão na barra de ferramentas. Depois de entrar no Dev Mode, a interface, incluindo a barra lateral direita, mostrará recursos voltados para desenvolvedores.

Saiba como usar o Dev Mode ->

Usar a barra lateral direita com acesso somente visualização

Os usuários com acesso de visualizador e visualizador com restrição podem colaborar em designs, visualizar propriedades do design, copiar código básico e exportar assets.

O acesso de visualizador é ótimo para pessoas que não precisam editar designs ou para desenvolvedores que precisam acessar designs, mas não precisam do conjunto completo de recursos do Dev Mode.

Comentário

Selecione Comentários na barra lateral direita para adicionar novos comentários ou visualizar os existentes.Você pode usar comentários para adicionar ou responder a feedbacks, colaborar e criar novas versões mais rapidamente, tudo a partir do arquivo de design original.

Na aba Comentários, você pode ver todos os comentários existentes em um arquivo. Ou localizar um determinado comentário ou conjunto de comentários em um arquivo:

• Digite uma palavra-chave no campo de pesquisa para encontrar um comentário específico.
• Use o filtro para visualizar os comentários de acordo com a data em que foram publicados ou veja apenas aqueles que você ainda não leu. Aqui, você pode filtrar para visualizar apenas um determinado conjunto de comentários.

Clique em Configurações para ocultar ícones ou gerenciar suas notificações de comentários em um arquivo.

Saiba como adicionar comentários a um arquivo do Figma Design → ou como visualizar e gerenciar comentários →

Propriedades

A aba Propriedades da barra lateral direita permite inspecionar camadas específicas no canvas.

Para começar, selecione uma camada no canvas. É possível fazer isso selecionando o elemento no próprio canvas ou no painel de camadas na barra lateral esquerda. Você pode selecionar qualquer tipo de camada, como uma forma, texto, grupo ou estrutura.

Em Propriedades, você verá o nome da camada selecionada e detalhes sobre ela, como layout e cores.

Clique com o botão direito na camada no canvas para:

• Copiar a camada
• Copiar/colar como código (CSS, iOS ou Android), SVG, PNG, copiar o link ou copiar suas propriedades
• Selecionar outra camada dentro da camada que você selecionou

Quer medir distâncias entre objetos? É possível usar atalhos do teclado para acessar rapidamente as informações de espaçamento e espaçamento interno.  Saiba como adicionar diretrizes de medição →

Exporte

Com acesso somente visualização, você pode exportar designs do Figma em vários formatos de arquivo e escalas. A exportação ajuda você a compartilhar conteúdo com outras pessoas, mover conteúdo entre ferramentas e salvar cópias de seus designs fora do Figma.

Aprenda a exportar conteúdo do Figma →