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:
- O que é o Figma?
- Quais as vantagens do Figma?
- Recurso de Auto-layout:
- Possibilita diversas integrações:
- Permite o gerenciamento de times;
- Acesse a comunidade global;
- Passo a passo para criar um Layout no Figma;
- Conheça a plataforma;
- 1 passo: escolha o tipo e o tamanho do projeto;
- 2 passo: Adicione uma grade;
- 3 passo: Insira objetos;
- 4 passo: Adicione Plugins;
- 5 passo: Insira textos;
- 6 passo: é hora de exportar.
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:
- Como a Hubspot pode ajudar na sua capacitação profissional
- Como iniciar um projeto? Tudo sobre as reuniões de Kick-Off!
- Relação experiência do cliente x inteligência artificial.
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.
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.
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.
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:
- Clique do lado direito do mouse;
- Selecione Plugins;
- 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!