Figma: o que é e como funciona?
O Figma é um editor de gráficos vectoriais inovador e interessante, concebido para a Web, cuja utilização tem vindo a crescer cada vez mais ao longo dos anos: atualmente, é uma das plataformas mais utilizadas por UX/UI designers, agências de comunicação e empresas de todo o mundo!
A primeira versão do Figma foi lançada em 2015 com o objetivo declarado de permitir a todos “serem criativos usando um navegador“. Em 2022, a Adobe, o gigante americano conhecido pelo seu conjunto de programas gráficos digitais, comprou a Figma por cerca de 20 mil milhões de dólares.
Ainda não sabemos qual será o futuro do Figma, mas sem dúvida que a plataforma é uma das ferramentas de edição gráfica mais populares para websites e interfaces de aplicações atualmente. Hoje, vamos dar uma olhadela ao que é o Figma e como funciona: um guia, este, para aqueles que ainda não conhecem o programa ou apenas ouviram falar dele!
O que é o Figma?
Figma é uma plataforma de edição gráfica e design de interfaces: é baseada na Web e colaborativa. Com o Figma, é possível fazer um pouco de tudo graficamente – desde a conceção de sítios Web e interfaces gráficas de utilizador para aplicações até à criação de publicações nas redes sociais e apresentações – e é, por isso, uma ferramenta cada vez mais popular para empresas e estúdios de design gráfico.
Uma das características mais inovadoras do Figma é certamente o facto de ser uma ferramenta de colaboração. Diferentes membros de uma equipa trabalham no mesmo ficheiro e em tempo real, o que significa que diferentes designers gráficos podem colaborar na criação de um design, mas também que os programadores e redactores já estão envolvidos nas fases iniciais do trabalho.
O resultado? Poupa-se muito tempo: acabaram-se as intermináveis trocas de ficheiros. Além disso, a colaboração aumenta a criatividade.
O facto de o Figma ser baseado na Web – ou seja, é simplesmente acedido através do browser – é outra caraterística muito apreciada: não é necessário instalar e atualizar programas ou comprar licenças; todos os membros da equipa podem trabalhar a partir de qualquer sistema operativo sem terem de se preocupar, entre outras coisas, com as fontes instaladas nas máquinas ou com a mudança de computador.
Tudo é guardado na nuvem e em tempo real, evitando assim vários problemas – como trabalhar descuidadamente em ficheiros desactualizados ou perder muito tempo a trocar documentos, mesmo os mais pesados. Claro que, para utilizar o Figma, é necessário estar online praticamente todo o tempo e ter uma boa e estável ligação à Internet.
Agora já tem uma ideia melhor do que é o Figma. Finalmente, devemos dizer que o Figma é um programa gratuito, pelo menos na sua versão básica. O pacote Starter gratuito permite que as equipas trabalhem em três ficheiros dentro de um projeto e guarda as versões anteriores durante 30 dias. É de salientar que os estudantes e os professores podem também solicitar o acesso gratuito (a partir daqui) à versão profissional do Figma – que, caso contrário, custa 12 dólares por utilizador e por mês.
Em resumo, o que é o Figma:
- O Figma é um programa de edição gráfica e de criação de protótipos.
- O Figma é utilizado principalmente para o design digital, ou seja, o design de sítios Web e interfaces de aplicações.
- O Figma é baseado na Web: isto significa que não há software para descarregar e instalar, mas é utilizado através do navegador e de uma ligação à Internet.
- O Figma é colaborativo: vários utilizadores com diferentes funções podem trabalhar num projeto em simultâneo.
- Figma é em tempo real: tudo é constantemente guardado na nuvem.
- O Figma é gratuito na sua versão básica.
Como é que o Figma funciona?
Tem uma ideia mais clara do que é o Figma e do seu potencial? Antes de analisarmos em conjunto o funcionamento do Figma – pelo menos nos seus elementos básicos e mais inovadores – vamos esclarecer desde já um aspeto importante: o Figma mostra toda a sua eficácia não só na conceção final de um produto gráfico, mas também e sobretudo em todas as fases anteriores.
Brainstorming, avaliação de diferentes opções gráficas, criação de protótipos, recolha e implementação de feedback: pode utilizar o Figma de forma muito eficaz em todas estas fases! Por exemplo, no Figma, uma equipa de designers pode construir em colaboração o wireframe de um sítio Web, ou seja, o esqueleto simples de um design sem cores ou estilos, e recolher imediatamente o feedback inicial de outros membros da equipa ou pedir-lhes que votem na melhor opção. Ou criar um protótipo da interface de uma aplicação, ou seja, simular a navegação e a interação de um desenho numa fase inicial.
Vamos agora explicar como funcionam os aspectos básicos do Figma. No final do artigo, recomendamos alguns cursos e recursos para aprofundar os seus conhecimentos e tornar-se um profissional Figma!
Criar uma conta
Para criar uma conta, basta registar-se gratuitamente em figma.com. Uma vez registado, pode criar equipas, projectos e trabalhos (ficheiros). Convide outros utilizadores para a sua equipa para que possa dar-lhes acesso aos projectos em que vão colaborar.
A área de trabalho
A área de trabalho no Figma é um ambiente enorme – um quadrado com até 65.000 pixels – no qual pode colocar os diferentes ecrãs do desenho em que está a trabalhar.
Para configurar ecrãs, utilize a ferramenta de molduras: pode escolher entre dezenas de tamanhos predefinidos, por exemplo, iPhone 14, Apple Watch 41 mm ou uma publicação no Facebook. Desta forma, por exemplo, pode reunir as diferentes páginas de um sítio Web num único ficheiro ou mostrar como a mesma página deve ser apresentada em diferentes dispositivos.
Bibliotecas e comunidades
Outro aspeto interessante do Figma são as bibliotecas de componentes. Se não quiser perder tempo a construir elementos de raiz, pode acelerar a criação de um desenho – ou de um projeto – utilizando os elementos gráficos mais díspares já existentes nas bibliotecas. Nas bibliotecas, encontrará uma barra de navegação pré-fabricada, por exemplo, ícones ou os botões mais comuns.
Navegue na comunidade Figma – um dos locais mais interessantes e úteis para quem utiliza a plataforma – para procurar estes e outros elementos. Aqui pode encontrar inspirações, materiais de brainstorming, elementos gráficos e os chamados sistemas de design, ou seja, um conjunto de regras, directrizes e elementos gráficos que ajudam a dar coerência ao seu produto gráfico.
Prototipagem
Na secção Protótipo do Figma, pode ligar diferentes ecrãs ou elementos gráficos através da identificação de nós: por exemplo, pode ser colocado um nó no item “sobre” de um menu que levará o utilizador à página correspondente. Ou num botão “registar-se para receber a newsletter”. Ao iniciar o protótipo, pode simular o funcionamento de um sítio Web ou de uma interface de aplicação numa fase inicial, para que possa compreender o que funciona e o que precisa de ser melhorado!
Depois de o ficheiro ter sido partilhado com o resto da equipa, é possível receber e colocar feedback através de post-its coloridos convenientes. Os post-its são utilizados para votar, comunicar problemas ou dar conselhos através de comentários mais estruturados. Por exemplo, pode apresentar à sua equipa três opções diferentes para o design de uma página inicial e ver, em tempo real, a opinião dos seus colegas.
Os comentários também podem ser comunicados verbalmente ao programa, que os transcreverá. É cómodo, não é?
Cursos e outros materiais úteis para utilizar o Figma
Já viste o que é e como funciona o Figma? O potencial, como já deve ter percebido, é infinito! Apostamos que já tem vontade de pôr as mãos no programa e fazer as primeiras experiências criativas com a sua equipa.
Se quiser tornar-se um profissional, existe uma grande quantidade de recursos gratuitos online para aprender a utilizar o Figma ainda melhor.
Uma primeira introdução útil é a fornecida pela própria Figma e que encontrará abaixo: em pouco mais de uma hora, os vários vídeos dão uma visão global da plataforma.
Online há também uma miríade de cursos, a maioria dos quais gratuitos. Destacamos, por exemplo, este curso da Sherpa Design, a comunidade italiana de UX/UI Designer. Depois, há os cursos oficiais propostos pela Figma, com módulos de cerca de dez minutos cada, e o curso para principiantes proposto pela The Designer Ship.
É giro, não é? Agora que já percebemos o que é o Figma e como funciona, em que próximos projectos o vai utilizar?