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 A Adobe adquiriu a Figma em 2022, pode haver algumas mudanças que irão reorganizar a tabela de classificação.
Há 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
- Designer de Web
- 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 plugins, e até mesmo criar modelos mestres para designs Figma para poupar 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—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 a arquivos Figma ilimitados e histórico de versões e muito mais, por $ 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 Menu principal ícone - o logotipo da 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 plug-ins, widgets e bibliotecas.
A seguir, você encontrará o Mover ferramenta (V), com o Escala ferramenta (k) aninhado sob ele. 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, Quadro (F), Seção, e Fatiar, aninhados juntos.
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 Region estão os Forma ferramentas, Caneta ferramentas e o Texto ferramenta. Seguido, então, por Recursos—Componentes, Plugins, e Widgets-e a Mão ferramenta para mover seu arquivo. E finalmente, o Comentários ferramenta que é ó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 títulos para Projeto, Protótipo, e Inspecionar. Como o nome sugere, a opção Design é o menu que você usará para projetar os elementos do 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, Disposição automática, Grade de layout, Camada, Preencher, AVC, efeitos, e Exportar. Alguns deles são minimizados por padrão, mas clicando no botão + sinal, você pode abrir qualquer menu ou clicar – 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 adicionar texto usando a ferramenta Texto de maneiras que você provavelmente já fez em outros Programas.
Assim que tiver formas ou texto na Moldura, use as várias opções do menu à direita para editar e projetar esses elementos. O Camada o menu oferece modos de opacidade e mesclagem; com Preencher você pode adicionar cores ou inserir imagens com alguns recursos de edição como Exposição, Contraste, Temperatura, e mais.
À medida que você cria mais elementos em seu projeto, as camadas se formam à esquerda Camadas menu ao lado do Ativos aba. 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 do Projeto opção de menu é a Protótipo cardápio. 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 Protótipo O menu 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 Figma que anima de um slide para o outro, mas a ferramenta também permite visualizar habilmente 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 criar um site não seja o mesmo que criar um site ao vivo, você pode entregar seu Figma design 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 local na rede Internet. 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.
