<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=332593&amp;fmt=gif">

Como criar um layout de página simples e objetivo pelo Figma

Carolina Barbosa
Carolina Barbosa

dez 14, 2022

Pensando em criar um site? Quando se trata de colocar uma página no ar, além de ter um site rápido, é preciso ter um layout de página visualmente agradável, objetivo e organizado. Mas, você sabe como fazer isso?  

Se a sua resposta foi negativa, temos uma boa notícia para você! Com as ferramentas certas, você pode criar um bom layout sem precisar de muita experiência técnica e é sobre isso que vamos falar hoje.

Continue a leitura deste post e descubra passo a passo como usar o Figma para criar um layout simples e objetivo. Vamos lá?

Neste post você confere:


Antes de construir um bom layout, é importante entender o que é essa ferramenta. Por isso, caso você nunca tenha utilizado o Figma, não se preocupe que estamos aqui para apresentá-lo, ok? A seguir, vamos falar mais sobre o programa e as suas vantagens. 

Boa leitura!

O que é o Figma?

Focado na criação de interfaces e designs, o Figma é um editor gráfico online que conquistou diversos produtores de conteúdo devido à sua praticidade, onde o usuário não precisa baixar nada para ter acesso à plataforma, basta abri-la utilizando seu navegador. 

Lançado em 2016 por Dylan Field e Evan Wallace, o Figma disponibiliza planos gratuitos e pagos, e mesmo na versão grátis, os profissionais têm acesso a diversas funcionalidades. 

Outro grande diferencial da plataforma é a possibilidade de colaboração. O Figma permite que a sua equipe trabalhe em conjunto em um mesmo projeto de forma simultânea e, por isso, se tornou uma febre entre alguns setores, como por exemplo, na área de UX Design.

Se você não sabe o que é UX Design, vamos te explicar. Em resumo, os ux designers têm como objetivo desenvolver um site ou aplicativo focado na experiência do usuário. 

Ou seja, o profissional é responsável por elaborar uma página que seja simples de navegar, onde o cliente não terá dificuldades para encontrar um produto ou serviço e, nesse caso, o Figma pode ser um importante aliado.

E já que falamos em praticidade e colaboração, esses não são os únicos diferenciais da plataforma. O Figma chegou para facilitar as suas criações e no próximo tópico vamos falar sobre algumas das suas vantagens.

Quais as vantagens do Figma?

Como você já sabe, o Figma é uma plataforma grátis, online e colaborativa, e essas já são grandes vantagens para quem trabalha com a criação de designs e layouts. Mas, cá entre nós, o editor tem muito mais a oferecer. A seguir, reunimos algumas das principais vantagens do Figma.

Recurso de Auto-layout: 

Se você está acostumado a criar designs para plataformas diferentes, sabe bem que adaptar as medidas pode demandar um grande tempo. Mas, com o auto-layout do Figma, esse problema pode chegar ao fim! A própria plataforma faz esse ajuste de medidas, mantendo os tamanhos correntes e evitando desalinhamentos.

Possibilita diversas integrações:

Com o Figma, chegou ao fim aquela enorme burocracia para integrar seus projetos! A ferramenta possibilita a integração com diversas outras plataformas, como: Confluence, Slack, Axure, Maze, Notion, entre outras. 

Permite o gerenciamento de times:

Na hora de criar um layout ou um belo design, pode não ser fácil organizar toda sua equipe, não é? Mas, com o Figma, isso pode mudar! Além de possibilitar um trabalho colaborativo, dentro do Fgma, é permitido criar times diferentes e estabelecer permissões para cada usuário. 

Acesse a comunidade global:

Outra grande vantagem do Figma é a sua comunidade global. Por meio dela, os usuários podem trocar experiências, ter novos insights e publicar diversos conteúdos, como: plugins, templates, entre outros.

Passo a passo para criar um Layout no Figma 

Depois de criar a sua conta na plataforma e selecionar o melhor plano para sua equipe, é hora de dar o próximo passo: construir o seu layout. Quer saber como fazer isso? A seguir, explicamos como funciona a plataforma e o passo a passo de como podemos criar um layout do zero no Figma, sem precisar ter muita experiência técnica. 

Veja também:

Conheça a plataforma

Para começar o seu processo de criação, você deve clicar em “New Design File”. Logo após, você será direcionado para a página do seu arquivo. No canto esquerdo, é possível ver uma aba intitulada de “layers”. É nessa parte onde todos seus elementos gráficos (imagens, textos, formas) serão separados e organizados em camadas.

 

Plataforma Figma

 

Ao selecionar uma camada, você terá acesso a um menu no lado direito da sua tela, onde você pode editar os elementos dela, desde o posicionamento, cor, efeito ou até mesmo a fonte. 

Enquanto isso, no menu superior, você tem ao seu alcance diversas funcionalidades como: criação de textos e formas. Conhecendo esses elementos, chegou a hora de criar o seu layout.  Vamos lá?

1. passo: escolha o tipo e o tamanho do projeto

Para começar o seu projeto, você deve criar um frame, ou seja, um quadro para montar o seu layout. Para isso, basta apertar a tecla F ou clicar no menu superior.

Ao selecionar o frame, o Figma apresentará diversos formatos pré-definidos para o seu projeto, como medidas de uma tela de celular, desktop, tablet e para as redes sociais.

Caso você tenha dificuldades em saber as medidas corretas, essa ferramenta pode facilitar bastante o processo. Basta escolher uma e começar a trabalhar. 

Lembrando que, apesar do Figma ter tamanhos pré-definidos, você ainda pode personalizá-lo como preferir. Se você quer ver como pode personalizar na prática, acesse o link abaixo e confira passo a passo no nosso canal do YouTube.

2. passo: adicione uma grade

Pronto, agora que você escolheu o tamanho do seu design, é hora de adicionar uma grade ao seu projeto. Mas, afinal, para quê serve esse elemento? Ao incluir a grade no seu frame, você terá uma espécie de guia para desenvolver o seu layout, facilitando na hora de alinhar objetos, medir e organizar a sua página. 

Para adicionar uma grade, basta selecionar o seu frame, ir até a coluna da direita e clicar no botão de “mais”, que aparece ao lado do nome “Layout Grid". 

3. passo: insira objetos 

Chegou a hora de dar vida ao seu layout com objetos e formatos!  Para isso, basta acessar o menu que fica na parte superior do Figma, onde é possível ter acesso a todas ferramentas rápidas. 

Como a plataforma é bem intuitiva, essas ferramentas serão representadas por elementos. Então não será difícil encontrar o que você procura. Por exemplo, se você quiser adicionar um retângulo, saiba que a aba de formas não tem nome e sim uma ilustração de elementos geométricos, como na imagem abaixo.

objetos no Figma

Sabendo disso, vamos colocar a mão na massa? Se você está desenvolvendo uma página principal, comece criando um formato retangular para o menu. Após criar a barra, insira outros formatos que representarão os botões.

Coloque quantos forem necessários de acordo com os conteúdos que estarão na sua página principal. Mas, lembre-se de não poluir demais, ok? 

Após inserir um objeto, você pode ainda modificar a cor, tamanho, posição e até mesmo aplicar efeitos. Basta selecioná-lo e na aba ao lado direito, você terá acesso às suas propriedades. No exemplo abaixo, o Layout começou a ser montado utilizando apenas formas retangulares.

Botões no Figma

 

4. passo: adicione Plugins

E não é só de formatos que se constrói um bom layout. Para personalizar e torná-lo mais atrativo, chegou a hora de adicionar alguns Plugins. A própria plataforma do Figma já disponibiliza diversos conteúdos e recomendamos que você baixe alguns elementos decorativos.

Para instalá-lo, siga as instruções a seguir:

  1. Clique do lado direito do mouse;
  2. Selecione Plugins;
  3. Clique em Find more plugins (encontrar mais plug-ins).

Logo em seguida, aparecerá diversas opções de Plugins, como ícones, imagens e textos para personalizar o seu layout.

5. passo: insira textos

Chegou o momento de adicionar informações sobre a sua empresa e acrescentar os textos ao seu Layout. Mas, calma que isso não é nenhum mistério. Na verdade, esse passo é semelhante ao de adicionar objetos.

Você terá que clicar no elemento de texto no menu superior, selecionar o local onde quer acrescentá-lo e pronto, é só escrever agora. Para modificar tamanho e cor, é só clicar no texto e modificá-lo na barra do lado direito do seu computador.

Lembre-se que existem plugins de texto disponíveis no Figma, então você pode dar um up na fonte do seu site.

6. passo: é hora de exportar

O layout foi concluído com sucesso e é hora de dar o próximo passo: exportá-lo. Para isso, basta clicar na camada do seu frame e do lado direito do monitor terá uma aba, você vai descer a página até o final e encontrará um botão escrito "export". 

Em seguida, é só selecionar o formato e a qualidade em que você deseja salvar o seu layout, e pronto, todo seu produto final será baixado. Agora o seu design feito do Figma está finalizado e pode ser implementado dentro da sua ferramenta. 

Gostou do conteúdo? Para você colocar em prática e começar a criar o seu Layout no Figma, nós preparamos um infográfico com o passo a passo detalhado. Clique no link abaixo e faça já o download gratuito!

baixe agora seu infografico

 

cta_saiba_mais_sobre_nos_blog_4revops

Gostou deste conteúdo? Compartilhe!

Tecnologias que usamos

O mundo muda o tempo todo e com a tecnologia não é diferente! Aqui na Mkt4Edu, tecnologia está no nosso DNA, trabalhamos com diversos softwares diferentes para fazer todo o processo de automação e inteligência artificial funcionar com mais eficiência e alcançar mais resultados.

Aqui, novos softwares são testados o tempo todo. Ferramentas modernas e novas funcionalidades são testadas a todo momento, já foram mais de 200 testes para que você possa ter o melhor resultado na sua instituição.

Biblioteca de Conteúdos

Um guia com as principais ferramentas do inbound marketing

Um guia com as principais ferramentas do inbound marketing

Que tal conhecer as ferramentas de Inbound Marketing para melhorar as estratégias de marketing digital da sua empresa? Faça o download do nosso novo guia de Inbound Marketing!

CTA Um guia com as principais ferramentas do inbound marketing
Mockup_Metas SMART: um guia para criar um planejamento de conteúdo

Metas SMART: um guia para criar um planejamento de conteúdo

Crie metas mais inteligentes! Saiba no nosso novo e-book como utilizar as metas SMART para direcionar seus esforços e atingir seus objetivos.

cta_Metas SMART: um guia para criar um planejamento de conteúdo
Mockup Sua empresa no digital: guia de como começar a empreender na internet

Sua empresa no digital: guia de como começar a empreender na internet

Guia completo para empreender na internet: faça o download agora para começar a prospectar novos clientes. Chegou a hora de vender seus produtos e serviços na internet!

cta_Sua empresa no digital: guia de como começar a empreender na internet

Da captação à retenção de clientes: a Mkt4edu pode fazer a diferença na sua operação de marketing.

captacao_leads

Aumente a sua captação de leads

retencao_clientes

Melhore a sua retenção de clientes

reducao_custos

Reduza os seus custos de captação