Como Criar uma Grelha no Figma – Layout Simplificado

Aprenda a criar grelhas no Figma usando grelhas de layout para colunas, linhas ou quadrados. Perfeito para design de UI, espaçamento e alinhamento perfeito ao píxel.

Crie vídeos e documentação de produto impressionantes com IA

Este tutorial foi criado com o Trupeer em menos de 5 minutos

Crie gratuitamente

Este guia acompanha-o ao longo do processo de adicionar e personalizar linhas de grelha no Figma, garantindo uma disposição de design bem organizada.
Siga os passos abaixo para adicionar linhas de grelha aos seus projetos no Figma de forma eficiente.

O Figma permite-lhe aplicar grelhas a frames de layout, tornando mais fácil alinhar e organizar os elementos de design.

1. Selecione um Frame

Clique no frame ao qual pretende aplicar a grelha. As grelhas de layout só estão disponíveis para frames — não para elementos individuais.

2. Adicione uma Grelha de Layout

Vá para a barra lateral direita (painel Design), desloque-se até à secção Grelha de layout e clique no ícone "+".

3. Escolha um Tipo de Grelha

O Figma oferece três tipos de grelha:

Grelha (quadrados uniformes)
Colunas (úteis para disposições responsivas)
Linhas (boas para alinhamento horizontal)

Utilize o menu pendente para selecionar o tipo de grelha preferido.

4. Personalize as Definições da Grelha

Contagem de Colunas/Linhas: Defina o número de colunas ou linhas.
Entrelinhas: Ajuste o espaçamento entre colunas/linhas.
Margem: Defina o espaçamento entre o frame e a grelha.
Alinhamento: Escolha como as colunas ou linhas se alinham:
- Colunas: Esquerda, Centro, Direita ou Esticar
- Linhas: Topo, Centro, Inferior ou Esticar
Cor & Opacidade: Altere a cor e a transparência das linhas da grelha para se adequarem ao seu design.

5. Ative/Desative a Visibilidade da Grelha

Utilize o atalho Shift + G para mostrar ou ocultar a grelha de layout em qualquer altura.

Guia Passo a Passo: Como Criar uma Grelha no Figma

Passo 1

Vamos começar a aprender - 'Como adicionar linhas de grelha no Figma'. Abra o seu ficheiro do Figma. Selecione a opção de frame para criar um novo frame.

Lets begin learning - 'How to add gridlines in Figma'. Open your Figma file. Select the frame option to create a new frame.

Passo 2

Se ainda não criou um frame, certifique-se de que cria um e define as suas dimensões em conformidade. Navegue até às definições da grelha da camada.

If you haven't created a frame yet, ensure you create one and set its dimensions accordingly. Navigate to the layer grid settings.

Passo 3

Navegue até às definições da grelha da camada. Nas definições da grelha, escolha o tipo de grelha que preferir, como uma grelha quadrada, e personalize-a de acordo com as suas necessidades.

In the Navigate to the layer grid settings. In the grid settings, choose the grid type you prefer, such as a square grid, and customize it to your needs.

Passo 4

Ajuste as colunas e as linhas nas definições da grelha para satisfazer os requisitos do seu design.

Adjust the columns and rows within the grid settings to suit your design requirements.

Passo 5

Depois de definir o número de linhas e colunas, prossiga para finalizar a personalização da sua grelha.

After setting the number of rows and columns, proceed to finalize your grid customization.

Passo 6

Clique em 'Criar Estilo' para guardar a sua grelha como um ficheiro com as definições da grelha preservadas. Guarde-o com o nome de um estilo específico — para que faça sentido para o projeto e possa utilizá-lo no futuro.

Click 'Create Style' to save your grid as a file with grid settings remaining intact. Save it with the name of a particular style - so that it makes sense for the project and you can use it in future.

Dicas profissionais para criar uma grelha no Figma

Usa grelhas de layout para manter a consistência:
Seleciona o frame ou a prancheta a que queres adicionar linhas de grelha. No painel da direita, na secção Grelha de layout, clica no ícone + para adicionar uma grelha. Isto garante consistência em todo o teu design e ajuda a alinhar os elementos com precisão.
Personaliza o tipo de grelha:
O Figma permite-te escolher entre Grelha, Colunas e Linhas para a tua composição. Seleciona Grelha para uma grelha uniforme, Colunas para uma composição baseada em colunas, ou Linhas para uma estrutura horizontal. Personaliza o espaçamento, o número e a margem de acordo com as tuas necessidades.
Configura várias grelhas:
Podes adicionar várias grelhas a um único frame. Usa diferentes tipos de grelha para trabalhares em diferentes aspetos do teu design, como usar uma grelha de colunas para texto e uma grelha padrão para o alinhamento geral.
Usa a grelha para design responsivo:
Para design web ou mobile responsivo, usa uma grelha de colunas e ajusta a largura da grelha e o espaçamento entre colunas para se adaptar a diferentes tamanhos de ecrã. Isto ajuda a manter as proporções e a legibilidade em vários dispositivos.
Alterna a visibilidade da grelha:
Alterna a visibilidade das grelhas premindo Shift + G. Isto permite-te mostrar e ocultar grelhas rapidamente sem alterar o design.

Erros comuns e como evitá-los ao adicionar linhas de grelha no Figma

Espaçamento da grelha incorreto:
Correção: Verifica novamente as definições da tua grelha e garante que o espaçamento e as colunas/linhas são adequados ao teu design. Usa medições consistentes para manter o alinhamento.
Encher demasiado o frame com grelhas:
Correção: Evita adicionar grelhas a mais ou usar grelhas que não se adequem ao conteúdo. Mantém-te num único estilo de grelha (por exemplo, colunas), a menos que tenhas uma necessidade específica de diferentes grelhas.
Elementos de design desalinhados:
Correção: Usa a grelha para alinhar os teus elementos, mas garante que os elementos do teu design ficam totalmente alinhados com a grelha. Aproxima o zoom para garantir que tudo encaixa corretamente nas linhas da grelha.
Composição pouco clara para os utilizadores:
Correção: Se estás a desenhar para outros verem, garante que as tuas grelhas não poluem o design. Usa as grelhas apenas como orientação e desativa-as para a exportação final.
Confusão com a visibilidade da grelha:
Correção: Se as grelhas forem demasiado distrativas, usa o controlo deslizante de Opacidade no painel Grelhas de layout para reduzir a visibilidade da grelha, mantendo-as úteis para o alinhamento.

Perguntas frequentes comuns sobre a adição de grelhas no Figma

Posso adicionar grelhas a uma parte específica do meu design, como uma imagem?
As grelhas são aplicadas a frames e pranchas no Figma. Para focar a grelha numa parte específica, crie um frame à volta da área pretendida e aplique a grelha a esse frame.
Como posso personalizar o tamanho da grelha?
Pode personalizar o tamanho da grelha, o espaçamento e o intervalo entre colunas ajustando os valores na secção Grelhas de layout no painel da direita quando tiver um frame selecionado.
Como oculto as grelhas quando apresento ou exporto?
Basta desativar as grelhas premindo Shift + G ou desmarcando a opção Grelhas de layout no painel da direita para as remover da visualização e da exportação.
As grelhas são imprimíveis no Figma?
Não, as grelhas não são impressas nem exportadas por predefinição. Pode desativar a sua visibilidade antes de exportar o seu design para garantir que não aparecem no resultado final.
Posso usar grelhas para design móvel ou web?
Sim, as grelhas são extremamente úteis para design web e mobile. Pode usar grelhas de colunas para alinhar elementos, garantindo que o seu design se adapta bem a diferentes tamanhos de ecrã.
Este é o guia passo a passo para adicionar grelhas no Figma.
Como gravar o ecrã num Mac?
Para gravar o ecrã num Mac, pode usar o Trupeer AI. Permite capturar o ecrã inteiro e oferece capacidades de IA como adicionar avatares de IA, adicionar locução e fazer zoom in e out no vídeo. Com a funcionalidade de tradução de vídeo por IA do Trupeer, pode traduzir o vídeo para mais de 30 idiomas.
Como adicionar um avatar de IA a uma gravação de ecrã?
Para adicionar um avatar de IA a uma gravação de ecrã, terá de usar uma ferramenta de gravação de ecrã com IA. O Trupeer AI é uma ferramenta de gravação de ecrã com IA, que o ajuda a criar vídeos com vários avatares e também o ajuda a criar o seu próprio avatar para o vídeo.
Como gravar o ecrã no Windows?
Para gravar o ecrã no Windows, pode usar a Game Bar integrada (Windows + G) ou uma ferramenta de IA avançada como o Trupeer AI para funcionalidades mais avançadas, como avatares de IA, locução, tradução, etc.
Como adicionar locução a um vídeo?
Para adicionar locução a vídeos, descarregue a extensão do Chrome do Trupeer AI. Depois de se registar, carregue o seu vídeo com voz, escolha a locução pretendida no Trupeer e exporte o seu vídeo editado.
Como faço zoom numa gravação de ecrã?
Para aplicar zoom durante uma gravação de ecrã, use os efeitos de zoom no Trupeer AI, que permitem aumentar e diminuir o zoom em momentos específicos, melhorando o impacto visual do conteúdo do seu vídeo.