Neste guia, abordaremos os princípios básicos do trabalho com arquivos de design no Figma Design.

Se você é novo no Figma Design, recomendamos fazer nosso curso de Figma Design para iniciantes. Neste curso, cobrimos tudo, desde a navegação em arquivos de design, trabalho com camadas, aplicação de layout automático em quadros, criação de componentes e adição de conexões de prototipagem aos designs. Ao final, você terá criado um site de portfólio personalizável completamente do zero. Saiba mais sobre o curso de Figma Design para iniciantes.

Quer saber mais sobre a diferença entre os produtos Figma? Confira nosso guia O que é o Figma.

O que são arquivos de design?

Os arquivos de design oferecem as ferramentas de que você precisa para criar, compartilhar e testar seus designs. Os arquivos de design são muito utilizados por designers, gerentes de produto, redatores e desenvolvedores. Mas qualquer pessoa que queira criar ou se comunicar visualmente pode usá-los!

Crie arquivos de design para explorar problemas específicos ou gerencie todo o processo de design. Você pode criar ideias por conta própria ou compartilhá-las com outras pessoas para criar juntos e receber feedback.

Os arquivos Figma são ativos e sempre atualizados, de modo que as pessoas podem trabalhar no mesmo arquivo ao mesmo tempo. Ter um arquivo em tempo real deixa todo mundo em sincronia, sem a necessidade de salvar, fazer download ou repassar documentos.

Cada arquivo tem seu próprio histórico de versões, onde é possível acompanhar a evolução dos designs. Explore versões anteriores ou crie novas versões para registrar etapas.

Arquivos de design no navegador de arquivos

Você pode identificar arquivos do Figma Design no navegador de arquivos pelo ícone no cartão do arquivo.

Um exemplo de arquivo de design com o ícone do arquivo de design circulado.

Saiba como fazer

Se você está usando o Figma pela primeira vez, é normal não saber muito bem o que fazer ao abrir um arquivo pela primeira vez. Vamos fazer um tour para que você possa se orientar e começar a colaborar com a equipe.

Interface de usuário Figma abstrata com barras laterais e uma barra de ferramentas inferior; a tela de trabalho central está em grande parte em branco.

Os arquivos de design têm quatro áreas distintas: uma barra de ferramentas na parte inferior, uma barra lateral esquerda, uma barra lateral direita e o canvas.

Barra de ferramentas do Figma Design com várias ferramentas contra um plano de fundo roxo claro.

A barra de ferramentas é o ponto central para interagir com o canvas e adicionar objetos. Ela contém todas as suas ferramentas para selecionar objetos, se movimentar pela tela e criar quadros, formas, texto e outras camadas ↓. Esses serão os elementos fundamentais dos seus designs.

Se quiser se aprofundar, você pode explorar cada uma das ferramentas da barra de ferramentas →

Barra lateral esquerda exibindo opções de arquivo de Figma Design, navegação de páginas e ferramentas de Recursos contra um plano de fundo roxo.

A barra lateral esquerda dá acesso a camadas, páginas, assets e é onde você pode realizar ações em seus arquivos.

Use o painel de recursos para visualizar componentes locais ou localizar componentes de kits ou bibliotecas (requer acesso de edição).
Acesse ações no arquivo, como movê-lo, publicar uma biblioteca, criar um rascunho ou mostrar o histórico de versões.
Use o menu para acessar mais funções, ações e configurações. Ou ajuste suas Preferências, como modo escuro ou comportamento de rolagem.

Explore a barra lateral esquerda →

A barra lateral direita é onde você pode acessar mais informações sobre seus designs. Quando não tiver nada selecionado, você pode visualizar recursos locais, como cores ou estilos de texto.

Com uma camada selecionada, você pode explorar as propriedades da sua seleção atual. Suas permissões determinarão o que você pode ver na barra lateral e quais ações você pode executar.

A barra lateral direita também é onde você encontrará ferramentas para compartilhar seus designs e trabalhar em conjunto em tempo real. Por exemplo, você pode compartilhar o arquivo, ver quem mais está aqui, conversar por áudio, e mais.

Se necessário, você também pode ajustar suas opções pessoais de zoom e visualização. As alterações que você fizer aqui aplicam-se apenas à sua visualização.

Comparação lado a lado das abas de Comentários e Propriedades, mostrando comentários à esquerda e propriedades de design à direita.

Acesso somente visualização

Comentários: exibir e pesquisar comentários
Propriedades: veja as propriedades da sua seleção

Uma comparação lado a lado da barra lateral direita, mostrando um exemplo quando a aba Design está selecionada e outro quando a aba Protótipo está selecionada. As configurações associadas são mostradas abaixo da aba selecionada.

Acesso de edição

Design: visualizar e editar as propriedades de design das camadas
Protótipo: visualizar e editar interações, fluxos e configurações do protótipo

Explore a barra lateral direita →

Inspecionar designs com o Dev Mode

Você está visualizando o arquivo como parte do processo de handoff? O Dev Mode é uma interface voltada para os desenvolvedores para inspecionar e navegar pelos arquivos de design.

O Dev Mode permite identificar designs que estão Ready for Dev e acessar as informações necessárias para transformar designs em código. Guia do Dev Mode →

Tela

O canvas é a área de trabalho onde você organizará as camadas para criar seus designs. Você encontrará muito espaço para explorar e criar versões de suas ideias.

Mover-se para se deslocar

Desloque-se para se movimentar pelo arquivo e ver o que mais há no canvas.

Mouse: segure a barra de espaço, depois clique e arraste para se mover pela tela de trabalho.

Trackpad: com dois dedos, deslize em qualquer direção para deslocar a tela de trabalho. O Figma usará as configurações de direção de rolagem padrão do seu computador.

Aumentar e reduzir o zoom

Aumente o zoom para dar uma olhada mais de perto ou reduza o zoom para ver o panorama geral. Veja o nível de zoom atual no canto superior direito da tela.

Mouse: Segure ⌘ Command/Ctrl e role para baixo para aumentar o zoom e para cima para reduzir o zoom.

Trackpad: una dois dedos para afastar o zoom ou afaste dois dedos para aproximar.

Uma imagem animada mostrando um exemplo de beliscar, mover e ampliar na tela de trabalho.

Exploração sem estresse

Se for a primeira vez que você entra ou explora um arquivo, a interação com os itens na tela pode parecer um pouco assustadora. As pessoas geralmente se preocupam com a possibilidade de mover, alterar ou excluir algo por acidente.

Com grandes poderes, não necessariamente vêm grandes responsabilidades. Selecione a ferramenta manual na barra de ferramentas ou pressione H no teclado. Agora, você pode clicar, arrastar e aplicar zoom em um arquivo sem medo de fazer alterações indesejadas.

Junte tudo

Vamos fazer uma recapitulação rápida! A barra de ferramentas oferece as ferramentas e funções necessárias para criar e combinar camadas. Em seguida, você pode organizar essas camadas no canvas para criar seus designs.

Na barra lateral esquerda, você pode explorar e organizar seu arquivo. Na barra lateral direita, você pode visualizar as propriedades da camada.

Vamos nos aprofundar um pouco mais em alguns conceitos-chave: páginas e camadas.

Páginas

As páginas ajudam você a organizar seus arquivos de design. Cada página é o próprio canvas, dando a você ainda mais espaço para criar e explorar suas ideias. As pessoas usam as páginas para:

Gerenciar designs por etapa ou status
Organizar componentes
Manter um rascunho de ideias
Arquivar designs mais antigos

Navegador de arquivos do Figma mostrando páginas organizadas por marcos como visão geral, pesquisa do usuário e componentes em uma barra lateral esquerda.

Para navegar pelas páginas de um arquivo, clique no nome da página atual na barra lateral esquerda. Você também pode tocar em para criar uma nova página. Visualizar páginas na barra lateral →

As páginas são ótimas para compartilhar uma coleção específica de designs. Por exemplo, você pode criar uma página diferente para uma revisão ou quando os designs estiverem prontos para o desenvolvimento.

Para compartilhar uma página, clique com o botão direito do mouse no nome da página e clique em Copiar link para a página. Quando uma pessoa abrir esse link, ela será direcionada para a página certa.

Camadas

Os designs geralmente são criados a partir de uma combinação de formas, texto e outros elementos.

Quando você adiciona objetos ao canvas, o Figma trata cada objeto como uma camada separada. Ter camadas separadas permite que você altere ou edite as propriedades de cada camada isoladamente.

Como este design para um post social, que inclui um nome, uma foto de perfil, uma imagem e uma legenda.

Design de post para mídias sociais mostrando um cachorro com donuts, incluindo nome do perfil, imagem e legenda em uma tela de trabalho em camadas do Figma.

Você não precisa ser um gênio da geometria para usar o Figma. Mas ajuda saber que estamos trabalhando com três dimensões na tela.

Temos os eixos X (horizontal) e Y (vertical) que nos fornecem as coordenadas de uma camada no canvas. Também temos uma terceira dimensão, o índice Z, que nos dá a profundidade da camada ou a ordem em que ela aparece.

Exibir camadas no painel Camadas

As camadas podem ficar em cima, atrás, ao lado ou dentro de outras camadas. Para ver como as camadas estão organizadas, verifique o painel Camadas na barra lateral esquerda.

Tipos de camadas

Cada camada tem um nome e um ícone de tipo. Você deve ter notado que alguns desses ícones aparecem na barra de ferramentas. Você pode selecionar essa ferramenta na barra de ferramentas ou usar o atalho de teclado para criar mais camadas do mesmo tipo.

Ícone de camada	Nome da camada	Shortcut
	Quadro	`F`
	Grupo	`⌘ Command` `G`
	Componente	`⌥ Option` `⌘ Command` `K` ou `Ctrl` + `Alt` + `K`
	Instância	N/A
	Texto	`T`
	Forma	`R`
	Imagem	`⇧ Shift` `⌘ Command` `k` ou `Shift` `Ctrl` `k`
	Layout automático	`Shift` `A`
	Seção	`Shift` `S`
	GIF ou vídeo	`⇧ Shift` `⌘ Command` `k` ou `Shift` `Ctrl` `k`

Ordem e hierarquia das camadas

A ordem em que as camadas aparecem no painel de camadas também é importante. A ordem das camadas determina como as camadas se sobrepõem na tela.

Este menu tem um retângulo que funciona como plano de fundo. Como está abaixo das outras camadas no painel de camadas, ele também aparece acima dessas camadas na tela. Se estivesse acima das outras camadas no painel de camadas, não poderíamos ver nenhuma das camadas de texto ou ícones.

Camadas como contêineres

Mencionamos que camadas podem estar dentro de outras camadas. Você pode saber se uma camada contém outras camadas se houver uma seta ao lado dela no painel de camadas. Clique na seta para visualizar quaisquer camadas dentro desse contêiner.

Relações entre camadas

Usamos os termos primário e secundário para descrever os relacionamentos entre contêineres e as camadas dentro deles.

As camadas principais contêm outras camadas, como quadros, componentes e grupos.
As camadas secundárias são camadas dentro de uma camada primária. Elas podem ser camadas individuais, como uma forma, ou algum texto, ou contêineres com seus próprios secundários.

Relacionamentos entre pais, filhos e irmãos →

Trabalhando com contêineres

Existem vários tipos diferentes de camadas que funcionam como contêineres: grupos, quadros e seções. Embora possam parecer semelhantes, cada um deles tem seus próprios benefícios.

Grupos

Os grupos são uma ótima maneira de combinar camadas em um único elemento. Eles simplificam o painel de camadas e oferecem um único objeto com o qual você pode interagir na tela. Por exemplo: você tem uma coleção de formas que gostaria de manter juntas.

Os grupos são coleções de camadas e não elementos distintos, portanto, não têm dimensões ou propriedades próprias. Quando você faz alterações em um grupo, na verdade está aplicando essas alterações a cada camada do grupo.

Quadros

Os quadros são outra maneira de combinar camadas no Figma. Elas podem atuar como ‌suportes para um dispositivo ou tamanho de tela específico, como uma única página em um design de aplicativo. Também podem atuar como contêineres para camadas que compõem elementos distintos, como as camadas de uma barra de navegação. Você pode até colocar quadros dentro de outros quadros.

Ao contrário dos grupos, os quadros podem ter dimensões e propriedades próprias — como preenchimentos, cantos arredondados e sombras. Eles também possuem recursos como layout automático, restrições e grades de layout, que permitem controlar ou influenciar as camadas dentro deles.

Predefinições de quadro

O Figma possui predefinições de quadros para Recursos comuns, dispositivos e tamanhos de tela. Seja ao projetar um app ou uma postagem no Instagram. Explore predefinições de quadro →

Seções

A ferramenta de seção permite que você designe e rotule uma região específica da tela de trabalho. Você pode usar seções para agrupar conceitos e ideias relacionados ou organizar seus designs.

As seções ajudam a enfocar, contextualizar e orientar os colaboradores nos processos. São perfeitas para atividades como avaliações ou para compartilhar designs para o handoff.

Confira nosso guia de melhores práticas para mais informações sobre quando usar grupos e quadros.

Explore as propriedades das camadas

Quando você passa o mouse sobre uma camada ou um objeto na tela, uma caixa aparece ao redor do elemento todo. Clique em uma camada para selecioná-la e visualizar mais informações sobre suas propriedades.

Na barra lateral esquerda, você pode ver o nome da camada e como ela está organizada. Na barra lateral direita, você pode visualizar as propriedades da camada.

As propriedades de uma camada incluem informações básicas sobre ela, como suas dimensões e localização na tela, assim como qualquer estilo, como cor, propriedades de texto ou efeitos como sombras.

As propriedades que você pode ver dependerão do tipo de camada selecionado. Se uma camada usar um estilo, apenas o nome e o ícone desse estilo ficarão visíveis na barra lateral direita.

Compatível com:

Quadros Grupos Componentes Instâncias Layout automático Seções GIFs