Como usar o Figma: um guia para iniciantes

O mundo do software de design gráfico é enorme e tem muita concorrência. Figma é uma ferramenta de design que está alcançando o primeiro lugar entre os designers de UX/UI em todo o mundo. Mas o que você sabe sobre essa ferramenta intuitiva?

Embora seja simples, também há uma curva de aprendizado se você estiver acostumado com outras ferramentas de design. Vejamos o Figma e como usá-lo. Bem-vindo ao Figma 101.

O que é Figma?

Se você trabalhou como designer gráfico ou web designer nos últimos anos, provavelmente já ouviu falar do Figma. Você pode até ter usado.

Figma é uma ferramenta de design e tornou-se cada vez mais a favorita dos designers digitais, superando opções como Adobe XD, Adobe Photoshop e Sketch, para web design e muito mais. No entanto, desde que a Adobe adquiriu a Figma em 2022, pode haver algumas mudanças que irão reorganizar a tabela de classificação.

Existem muitos usos para Figma. É usado principalmente para design digital e você não pode criar em CMYK para impressão. Alguns dos principais usos do Figma incluem:

• Prototipagem
• Design UX/UI
• design do aplicativo
• web design
• Design de apresentação

Você pode usar plug-ins de maquete Figma para ajudar a exibir seus designs, converter páginas da Web reais em designs Figma usando plug-ins e até mesmo criar modelos mestres para designs Figma para economizar tempo em tipos de design repetitivos.

Quanto custa Figma?

Você pode criar uma conta Figma gratuitamente no site Figma ou baixando o aplicativo Figma . Uma conta gratuita fornece funcionalidade para todos os aspectos de design do aplicativo. Você pode projetar com Figma e FigJam – a ferramenta de colaboração da Figma.

Se você estiver usando o Figma como hobby ou como freelancer único, a versão Free Forever é quase perfeita. Você ainda tem acesso a todos os plugins, pode convidar colaboradores ilimitados, usar arquivos pessoais ilimitados e usar o Figma de todas as plataformas.

Embora a versão gratuita do Figma ofereça mais do que o suficiente para qualquer designer padrão, uma assinatura do Figma Professional permite que você convide colegas de equipe, trabalhe em bibliotecas de equipe, tenha acesso ilimitado a arquivos Figma e histórico de versões e muito mais, por US $ 12 por mês por editor. Se você é um estudante ou educador, pode obter o Figma Professional gratuitamente.

Como usar o Figma: o básico

Se você usa o aplicativo Figma ou a versão do navegador, pode acompanhar facilmente.

Ao abrir o Figma, você terá opções para iniciar um novo arquivo Figma, um novo arquivo FigJam ou importar um arquivo feito em outro programa, como Sketch ou Adobe XD. Se você já usou o Figma antes, também verá seus projetos anteriores do Figma que você pode abrir e trabalhar.

Navegando no espaço de trabalho do Figma

Abrir um novo arquivo inicialmente parece pouco inspirador. Ao contrário de muitos outros programas de design, você não começa com sua prancheta ou tela, mas com uma página de design totalmente em branco. Mas com a mente cheia de inspiração, não ficará um espaço vazio por muito tempo.

O menu horizontal superior esquerdo começa com o ícone do menu principal – o logotipo Figma. Selecionando o menu principal, você pode navegar para seus outros arquivos, ações rápidas do Figma, opções típicas de arquivo e acesso a plugins, widgets e bibliotecas.

Em seguida, você encontrará a ferramenta Move ( V ), com a ferramenta Scale ( K ) aninhada abaixo dela. Essas ferramentas são para mover elementos ou dimensionar partes do seu design para cima ou para baixo. E à direita dessas ferramentas, você verá as ferramentas Region, Frame ( F ), Section e Slice , aninhadas juntas.

No Figma, um quadro é o que outros programas podem chamar de prancheta ou tela. Selecione Quadro para desenhar sua tela de tamanho personalizado. Quando selecionado, o menu à direita apresentará opções de molduras predefinidas para tamanhos de dispositivos comuns: smartphones, tablets, desktops, smartwatches, apresentações e opções de mídia social. Você também pode clicar e arrastar seu quadro diretamente para torná-lo qualquer tamanho personalizado.

De volta ao menu superior esquerdo, à direita das ferramentas Região estão as ferramentas Forma , Caneta e Texto . Seguido, então, por Recursos — Componentes , Plugins e Widgets — e a ferramenta Mão para mover seu arquivo. E, finalmente, a ferramenta Comentários , ótima para fazer anotações e colaborar com colegas de equipe.

O menu de design Figma

Com um quadro desenhado, selecionar seu título ativa o quadro, pronto para o design. O menu à direita mostra os títulos de Design , Prototype e Inspect . Como o nome sugere, a opção Design é o menu que você usará para projetar os elementos em seu quadro.

Embora o menu Design inicial seja um tanto simplista, à medida que você adiciona mais elementos ao seu design, as opções do menu evoluem. A princípio, o menu é executado de cima para baixo com ferramentas de alinhamento, ferramentas de dimensionamento, Layout automático , Grade de layout , Camada , Preenchimento , Traçado , Efeitos e Exportação . Alguns deles são minimizados por padrão, mas clicando no sinal + , você pode abrir qualquer menu ou clicar em – para minimizá-lo.

Depois de desenhar o quadro principal do projeto, você pode usar as ferramentas Forma ou Caneta para desenhar formas ou adicionar espaços reservados para imagens, e pode adicionar texto usando a ferramenta Texto de maneiras que provavelmente já fez em outro software.

Assim que tiver formas ou texto na Moldura, use as várias opções do menu à direita para editar e projetar esses elementos. O menu Camada oferece modos de opacidade e mesclagem; com Preenchimento , você pode adicionar cores ou inserir imagens com alguns recursos de edição, como Exposição , Contraste , Temperatura e muito mais.

À medida que você cria mais elementos em seu projeto, as camadas se formarão no menu Camadas à esquerda, próximo à guia Ativos . Você pode clicar duas vezes em um título de camada para localizar o elemento e vice-versa; você pode clicar duas vezes em um elemento de design para localizar a camada destacada. Clicar duas vezes nos títulos permite renomeá-los para uma organização ideal.

O Menu Protótipo Figma

À direita da opção de menu Design está o menu Protótipo . Depois de finalizar os aspectos visuais do seu design e definir as caixas de imagem e texto onde eles devem ir, você pode usar as ferramentas de protótipo para adicionar animações e transições aos seus designs.

O menu Protótipo permite conectar quadros ou componentes como transições. Você pode escolher qual ordem e como cada quadro faz a transição para outro.

Isso funciona muito bem se você estiver fazendo uma apresentação do Figma que anima de um slide para o outro, mas a ferramenta também permite que você visualize animações para botões ou menus para aplicativos e web design. Você pode adicionar várias transições por página para todas as coisas diferentes, para poder ver como os usuários se envolveriam com seu site quando ele estiver no ar.

Embora usar o Figma para projetar um site não seja o mesmo que criar um site ao vivo, você pode entregar o design do Figma para sua equipe de desenvolvimento, que pode recriar suas interações de protótipo como designs de animação da vida real para o seu site. Isso significa que você pode fazer a transição de página para página de cliques, tempo ou outras interações.

Começar com o Figma é fácil

Agora você sabe como navegar no layout do Figma e como funcionam as ferramentas básicas de design e protótipo. Como o Figma é tão facilmente acessível, é hora de mexer nessa ferramenta de design e ver o que você pode criar.