Estruturas no Figma Design – Figma Learn - Central de ajuda

Antes de você começar

Quem pode usar este recurso

Qualquer pessoa em qualquer equipe ou plano pode usar estruturas.

Qualquer pessoa com acesso de editor a um arquivo pode criar e editar estruturas.

No Figma, você pode adicionar camadas diretamente no canvas. Se o design for para um dispositivo ou tamanho de tela específico, talvez seja melhor criar um contêiner para ele. É aí que entram as estruturas.

Se você já usou ferramentas de design antes, deve conhecer os artboards. Assim como as artboards, as estruturas permitem que você escolha uma área no canvas para criar seus designs.

Diferente dos artboards tradicionais, você também pode aninhar estruturas dentro de outras estruturas. Isso permite criar designs mais complexos, que funcionam juntos.

As estruturas também dão acesso a funcionalidades extras, como grades de layout, layout automático, restrições e prototipagem.

Criar estruturas

Para criar estruturas no canvas, use a ferramenta de estruturas. Existem várias maneiras de selecionar a ferramenta de estruturas:

Use os atalhos de teclado F ou A
Selecione a ferramenta de estruturas na barra de ferramentas.

Location of the frame tool as the second option in the Figma toolbar.png

Em seguida, você pode criar uma variedade de tamanhos de estruturas no canvas:

Clique no canvas para criar um estrutura padrão com dimensões de 100 x 100
Clique e arraste no canvas para criar uma estrutura com dimensões personalizadas
Use o menu suspenso na barra lateral direita para selecionar uma predefinição de estrutura.
1. Escolha predefinições para os principais modelos de dispositivos e assets:
  - Telefone
  - Tablet
  - Computador
  - Apresentação
  - Assistir
  - Papel
  - Redes sociais
  - Comunidade Figma
  - Arquivo
2. Clique na seta para expandir a seção e selecione uma predefinição na lista.

Identifique as estruturas no painel de camadas.

Image showing a frame in the Layers panel with a grid-like icon.png

Dica! Você também pode criar uma estrutura em torno de objetos existentes, seja uma única camada ou uma seleção de camadas. Use o atalho de teclado para seleção de estrutura:

Mac: ⌥ Option ⌘ Command G
Windows: Ctrl + Alt + G

Dica: você pode transferir estruturas para desenvolvimento sem precisar reorganizar o arquivo. Crie uma seção para sua estrutura ou converta a estrutura em uma seção. Em seguida, marque a seção como Pronta para desenvolvimento →

Propriedades da estrutura

Existem várias propriedades associadas às estruturas. As estruturas aceitam as seguintes propriedades.

Raio do canto: arredonde o canto de uma estrutura para criar bordas mais suaves.
Recortar conteúdo: oculte todos os objetos dentro da estrutura que se estendam além dos limites dela.
Grades de layout: crie diretrizes para ajudar na estrutura visual dos seus designs.
Layout automático: crie estruturas dinâmicas que respondam ao seu conteúdo
Preenchimento: aplique um preenchimento sólido, gradiente, imagens (PNG, JPEG, GIF, TIFF e WEBP) a uma estrutura.
Traçado: adicione traçados a uma estrutura para criar uma borda ou um contorno
Efeitos: adicione uma sombra ou desfoque a uma estrutura

Funcionalidades extras

Com as estruturas, é possível acessar funcionalidades extras no Figma. Você precisará de estruturas para utilizar os seguintes recursos ou funções:

Grades de layout: aplique grades, colunas e/ou linhas transparentes a estruturas para fornecer estrutura visual
Restrições : defina como os objetos secundários responderão quando você redimensionar uma estrutura. Aplique restrições a objetos dentro de uma estrutura.
Layout automático: adicione layout automático às estruturas para criar layouts dinâmicos que respondam ao seu conteúdo
Prototipagem: crie protótipos interativos que se movem entre as estruturas do canvas

Uma estrutura é um objeto primário. Isso significa que ela pode controlar ou influenciar qualquer objeto secundário que você colocar dentro dela.

Saiba mais sobre relacionamentos primário/secundário no Figma →

Ajustar as propriedades da estrutura

Antigamente, era possível ajustar as propriedades dos objetos secundários ao selecionar a estrutura. Agora, você pode ajustar as propriedades da própria estrutura.

Selecione um objeto secundário usando o atalho de teclado: Enter ou Return.
Pressione a tecla Tab para selecionar o próximo objeto relacionado.
Pressione Shift + Tab para selecionar o objeto relacionado anterior.
Pressione Shift + Enter para selecionar o objeto primário

Se quiser ajustar as propriedades de preenchimento e traçado de uma estrutura e seus secundários, você pode usar Cores de seleção para visualizar ou ajustar as cores em uma seleção mista.

Aninhar estruturas dentro de outras estruturas

No Figma, é possível criar estruturas dentro de outras estruturas. Esse processo é conhecido como aninhamento. Isso permite combinar estruturas com propriedades diferentes para construir interfaces complexas.

Dessa forma, são criadas novas hierarquias ou relacionamentos:

Estruturas de nível superior: qualquer estrutura que esteja diretamente no canvas. Para que uma estrutura seja uma estrutura de nível superior, você não pode aninhá-la em outra estrutura, grupo ou objeto
Estrutura aninhada: qualquer estrutura colocada dentro de outra estrutura. Você pode colocar estruturas dentro de estruturas de nível superior ou dentro de outras estruturas aninhadas. As estruturas aninhadas são uma primária e uma secundária
Secundários: qualquer objeto que esteja dentro de uma estrutura

Saiba mais sobre relacionamentos entre primários, secundários e relacionados →

Estruturas de nível superior

O Figma coloca em negrito estruturas de nível superior no painel de camadas e mostra o nome de todas as estruturas de nível superior no canvas.

Image showing a top-level frame in the canvas and layers panel.png

Estruturas aninhadas

Estruturas aninhadas são estruturas que você coloca dentro de outra estrutura ou objeto. Dessa forma, eles são primárias e secundárias. É possível colocar estruturas dentro de:

Estruturas de nível superior
Outras estruturas aninhadas
Em grupos

No exemplo abaixo, cada um dos elementos está na própria estrutura. Temos uma barra de status na parte superior e um menu de navegação na parte inferior. Também temos um cartão que inclui os detalhes de nossos próximos ingressos.

Usando uma de nossas predefinições de dispositivo, podemos criar uma estrutura de nível superior para os elementos. Podemos adicionar os elementos à estrutura de nível superior para criar uma única tela no aplicativo móvel.

Image of an example app design in the canvas, where you can see the individual frames by themselves on the left and then combined into a single frame on the right.png

Redimensionar estruturas

Você pode interagir com as estruturas como qualquer outro objeto no canvas, inclusive alterar o tamanho ou a escala das estruturas. Existem várias maneiras de alterar o tamanho de uma estrutura:

Arrastar a estrutura

Arraste para redimensionar uma estrutura manualmente.

Selecione a estrutura no canvas ou no painel de camadas na barra lateral esquerda.
Clique na alça em um dos cantos e arraste para redimensionar. Ou clique em uma das bordas e arraste.

Dica! Para ignorar todas as restrições em objetos secundários, mantenha pressionada a tecla modificadora:

Mac: ⌘ Command
Windows: Ctrl

Alterar a predefinição da estrutura

Selecione outra predefinição de estrutura para alterar o tamanho da estrutura.

Selecione a estrutura.
No Painel de propriedades na barra lateral direita, selecione o campo da estrutura.
Selecione uma predefinição na lista.
Escolha predefinições para os principais modelos de dispositivos e assets:
- Telefone
- Tablet
- Computador
- Apresentação
- Assistir
- Papel
- Redes sociais
- Comunidade Figma
- Arquivo
O Figma atualizará as dimensões da estrutura para que correspondam à predefinição.

Observação: se você aplicar restrições a qualquer objeto secundário, o Figma os redimensionará para corresponder à nova predefinição de estrutura. Caso contrário, os objetos dentro da estrutura permanecerão com as dimensões e a posição originais.

Painel de propriedades

Atualize a largura e a altura da estrutura usando a barra lateral direita.

Insira um novo número nos campos W e H ou passe o mouse sobre o ícone para limpar o campo. Arraste para a esquerda para diminuir e para a direita para aumentar.

Ative o botão de link ao lado do Largura e Altura para restringir o redimensionamento às proporções atuais.

Image of the top-right corner of the Design tab in the right sidebar. The width and height fields have a highlight rectangle around them.png

Dica: você pode usar os campos de dimensão para realizar cálculos. Isso permite escalar ou redimensionar objetos rapidamente.

% Porcentagem, como 50%
+ Adicionar, como +100
- Subtrair, como -20
* Multiplicar, como *4
/ Dividir, como /8

Não é possível multiplicar a largura ou a altura por uma porcentagem, por exemplo, * 50% resultará em um valor de 50x o original, não 50%.

Redimensionar para ajustar

Você pode redimensionar uma estrutura para que ela diminua ou aumente para se ajustar aos objetos secundários. Isso redesenhará a estrutura em torno dos limites externos dos objetos dentro dela.

Use o atalho de teclado:
- Mac: ⌥ Option Shift ⌘ Command R
- Windows: Alt Shift Control R
Clique em na seção Layout da barra lateral direita

Desagrupar uma estrutura

Para desagrupar uma estrutura, selecione-a e pressione:

Mac: ⌘ CommandShiftG ou ⌘ CommandDelete
Windows: ControlShiftG ou ControlBackspace