Estruturas no Figma Design
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.
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.
- Escolha predefinições para os principais modelos de dispositivos e assets:
- Telefone
- Tablet
- Computador
- Apresentação
- Assistir
- Papel
- Redes sociais
- Comunidade Figma
- Arquivo
- Clique na seta para expandir a seção e selecione uma predefinição na lista.
- Escolha predefinições para os principais modelos de dispositivos e assets:
Identifique as estruturas no painel de camadas.
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.
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.
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.
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