O Figma é uma ferramenta muito utilizada no UX (User Experience, ou experiência do usuário) e no UI (User Interface, ou interface de usuário). Nesse artigo, vamos abordar os conceitos mais básicos de como começar nessa área ou utilizar o Figma em outros setores, como administração, design, social media etc.
Se você é um desenvolvedor querendo aumentar suas habilidades, um designer iniciando no UI, um profissional estudando possibilidades de carreira, esse artigo é para você.
Em futuros artigos, vamos explorar o modo desenvolvedor do Figma, a criação de protótipos e como se especializar na área para o qual ele é mais usado.
Continue a leitura e aprenda mais!
Conteúdo
O que é Figma?
O Figma é uma das ferramentas mais usadas para criar wireframes (rascunhos de sistemas e aplicações) e design de apps, sistemas complexos ou templates de social media e/ou e-mails.
Concorrente direto do Adobe XD, costumam dizer que o Figma ganha por várias de suas funcionalidades, que exploraremos bastante por aqui.
O que se pode criar com o Figma? Essa é uma pergunta bem difícil de responder, ao mesmo tempo que muito fácil:
- Criação de interfaces responsivas para aplicativos, websites e softwares que se ajustam automaticamente a diferentes tamanhos e configurações de tela;
- Desenvolvimento de protótipos e fluxos de navegação para otimizar a experiência do usuário;
- Implementação de sistemas de design (Design Systems) para garantir a consistência visual e funcional em todos os projetos;
- Produção de peças gráficas para e-mails e redes sociais, além de apresentações, e-books e infográficos;
- Criação de animações e gráficos dinâmicos, com base em dados reais, utilizando plugins e recursos como Figmotion, LottieFiles e Chart.
Existem dezenas de templates disponíveis que podem ser usados, como podemos ver abaixo:
Conhecendo as funções e ferramentas do Figma
Para aprender sobre algo, primeiro começamos do começo, certo? A estrutura do Figma é bem simples de se compreender, vamos por cada parte separadamente. Primeiro pela página de projeto, em seguida os menus disponíveis.
Ao criar um projeto de design, é essa tela que veremos:
Menu lateral direito – arquivo, páginas e recursos
Contém as páginas do projeto, as camadas e os assets (itens que podem ser adicionados, como botões e derivados, para o caso de estarmos criando uma interface ou protótipo). Por exemplo:
No modo gratuito, temos três páginas de projeto, mas dá para criar frames e conteúdo ilimitadamente dentro de cada uma.
Menu de funcionalidades – usado para a criação
Respectivamente, essas funcionalidades são:
- Mover;
- Ferramenta mão;
- Alterar escala.
- Quadro;
- Seção;
- Fatia.
- Retângulo;
- Linha;
- Flecha;
- Elipse:
- Polígono;
- Estrela;
- Inserir imagem.
- Caneta;
- Lápis.
- Texto;
- Comentários;
- Ações.
Menu lateral direito
Aqui é onde ficam as modificações de design e protótipo, também onde modificaremos a cor da página para dar mais contraste ao projeto. Como iniciaremos com um wireframe (que possui cores cinzas por padrão), o fundo da página é preto, mas sinta-se à vontade para mudar quanto quiser.
O que são:
- Variáveis locais (Local variables): itens reutilizáveis que você aproveitará ao longo do projeto, como botões, caixas de texto e outros itens repetitivos;
- Estilos locais (Local styles): estilos de texto, cor, efeito e grade. Geralmente usamos quando temos uma paleta de cores definida e uma tipografia;
- Exportar (Export): exportar para PNG, JPG, SVG ou PDF o projeto inteiro ou páginas selecionadas.
Começando um projeto simples: wireframe de site
Um wireframe é o rascunho básico do que será sua aplicação, site ou interface. Assim, não nos preocupamos muito com cores e tipografia, mas sim com a ideia básica de onde as coisas vão ficar.
Copiando e colando referências
O Figma permite que você copie elementos e os cole dentro de seu projeto, como prints de sites ou interfaces que você já conhece e quer reproduzir. Se você encontrou uma interface que gostou, pode reproduzi-la para seu projeto, facilitando a reprodução do layout que funciona bem.
Aqui, faremos isso com a home do nosso site:
Esse design pode funcionar tranquilamente para qualquer outro e-commerce.
Antes de começarmos, uma observação:
- Sempre renomeie o elemento que você criar ou adicionar ao design, isso é muito importante para definir a hierarquia dos elementos e reproduzi-los quando precisar.
Usando uma referência
No menu lateral direito, diminua a opacidade da imagem que você usará como referência, no caso a nossa home.
Isso permite que você desenhe os elementos do wireframe diretamente sobre a imagem de fundo, começando pelos retângulos, que são o ponto de partida. Eles têm uma cor padrão de cinza, então um fundo mais transparente vai te deixar enxergá-los melhor.
No menu esquerdo de camadas, renomeie a imagem como “referência”. Basta dar dois cliques em cima da camada respectiva.
Criando o layout básico
A maioria dos projetos no Figma se baseia em retângulos e hierarquias. Crie um retângulo grande para o fundo da interface, ele deve abranger toda a imagem que você colou. O tamanho vai depender da resolução do seu monitor, pois, se você printou a tela do site, então será a resolução em que o site é apresentado para você que será usada.
Em seguida, preste atenção às áreas marcadas em vermelho na imagem de referência, elas são o alinhamento que garante que seu retângulo e a imagem são do mesmo tamanho. Se arrastar o mouse não surtir muito efeito, você apenas pode selecionar a imagem ou o retângulo maior e ver a altura e largura, ajustando manualmente.
Na hierarquia das camadas, você pode enviar a imagem para trás (menu com o botão direito + send to back) e deixar o retângulo na frente, visível.
Construindo o menu e elementos centrais
Crie um retângulo adicional para o menu e envie-o para trás da imagem de referência. Sempre partindo das bordas da referência.
Modifique a cor dele para branco, para podermos lembrar que ele está ali.
Repita o processo para criar um retângulo central que será o corpo principal do seu layout, onde temos a imagem na referência.
Utilize cantos arredondados (menu direito, opção “Mixed”, valor 10) para imitar o exemplo fornecido.
Ctrl c + ctrl v
A partir daqui, todos os elementos da nossa home serão reproduzidos em retângulos com suas medidas exatas, mesmo aqueles que são textos. Como dissemos: o wireframe é o rascunho básico, a imaginação de como o layout será, então não precisamos inserir muitos elementos agora.
Utilizaremos o copiar e colar o tempo todo, pois os retângulos são repetitivos e, por exemplo, no menu e na área de preços há vários com tamanho igual:
São 6 retângulos no total, então depois de criar os 3 primeiros, seguramos shift e os selecionamos, copiamos e colamos. É só ajustar, depois selecione os 6 e use ctrl G, para criar um grupo com esses elementos.
Use o menu de redimensionamento para deixar os itens com o espaçamento igual:
Para facilitar a organização, use as teclas Ctrl e Shift para selecionar e redimensionar todos os elementos do design no menu direito.
Envie os elementos para trás novamente para comparar o tamanho com a referência. Ajuste o arredondamento dos cantos para 10.
Ajustando Tamanhos e Renomeando Itens
Se os itens não estiverem no mesmo tamanho, modifique-os. Lembre-se de renomear cada um dos itens conforme você os ajusta. Nomeie os elementos de fundo, barra de menu e o retângulo de preços.
Personalizando cores
Use a ferramenta conta-gotas para selecionar as cores da imagem de referência.
Finalizando Detalhes e Simulando Textos
Após ajustar os botões e demais elementos, certifique-se de que tudo está organizado e renomeado corretamente. Você pode simular os textos utilizando a ferramenta de texto (T) e colocando-os sobre os elementos correspondentes. Teremos um wireframe semelhante a esse, no final:
Quando estiver satisfeito com o layout, remova a imagem de referência. Agora, você tem um wireframe limpo e ajustado pronto para ser utilizado!
Conclusão
Quando se utiliza o Figma para trabalhar as suas ideias, o trabalho se torna ainda mais fácil. Basicamente, tendo um bom conhecimento de formas geométricas, usabilidade e teoria das cores já adianta mais de metade do processo.
Nesse artigo você conheceu as principais funcionalidades do Figma e como utilizá-lo daqui em diante, mesmo não sendo um profissional da área. É claro que, em se tratando de especialização, recomendamos que você estude mais a fundo e compreenda quais seus pontos mais fortes.
Acompanhe a série de artigos que estamos preparando e continue aprendendo mais sobre essa ferramenta realmente útil para diversos profissionais.
