No desenvolvimento web moderno, devemos sempre pensar na experiência do usuário, isso é, se o fluxo das telas é adequado e fácil de ser utilizado. Existem muitas ferramentas no mercado para prototipar esses tipos de telas, sendo uma delas o Figma.
Antigamente não havia esse tipo de ferramentas para a criação de telas web, dessa maneira, acabávamos por criar sites não muito intuitivos e com uma usabilidade baixa. Conforme foram passando os anos, paramos de fazer isso e começamos a melhorar o nosso fluxo de desenvolvimento.
A principal vantagem do Figma é a simplicidade que temos ao compartilhar as telas com clientes e o time de desenvolvimento. Temos integrado também a isso as metodologias ágeis que auxiliam no desenvolvimento dessas telas.
- O que é Figma e para que serve?
- Quais as vantagens de usar o Figma?
- Quais as diferenças entre Figma e Adobe XD?
- Como fazer download e criar sua conta no Figma?
- Como usar o figma? Conheça a interface!
- Como funciona a movimentação no figma?
- O que são constraints e para que servem?
- Conheça as estruturas de Grids
- Atalhos úteis para usar no Figma!
- Figma pago ou Figma gratuito: qual usar?
O que é Figma e para que serve?
Basicamente, Figma é uma ferramenta de design e prototipagem. É um programa de design de UI e UX que pode ser usado para criar sites, aplicativos ou pequenos componentes de interface do usuário que podem ser integrados a outros projetos.
Figma é uma ferramenta que utiliza vetores e que fica totalmente na nuvem, permitindo que as pessoas trabalhem em qualquer lugar a partir de um navegador. Além disso, é rápida e feita para sistemas de design, prototipagem, colaboração e design organizacional.
Também é compatível com outras ferramentas de design, tais como Sketch, Adobe XD, Invision e Framer.
Como é de se esperar, o Figma é suportado por uma comunidade robusta de designers e desenvolvedores que compartilham plugins que aumentam a funcionalidade e aceleram os fluxos de trabalho. Dessa maneira, qualquer pessoa pode contribuir e compartilhar.
Quais as vantagens de usar o Figma?
Temos muitas vantagens ao utilizar o Figma, principalmente por ser uma ferramenta de trabalho tão escalonável.
As suas principais características são:
- Ferramenta de caneta que permite desenhar em qualquer direção e designs de arco instantâneo.
- Fontes Open Type
- Tarefas automatizadas por meio de plugins para elementos repetidos, acelerando os projetos.
- Ferramenta de seleção inteligente com ajustes automáticos de espaçamento, arranjo e organização.
- Estilos flexíveis que ficam salvos diretamente no seu projeto.
- Possibilidade de criação de sistemas e componentes de design.
- Arrastar e soltar bibliotecas acessíveis.
- Capacidade de ter espectadores ilimitados em um projeto, fazendo com que toda a equipe consiga acompanhar as telas.
- Inspecionar arquivos de design e coletar os trechos de código.
- Recurso de exportação fácil, que possui um link ativo (não apenas um PDF)
- Interações de design e protótipos otimizados para celular.
Quais as diferenças entre Figma e Adobe XD?
Desde o lançamento do Figma e a primeira versão beta do Adobe XD em 2016, uma grande competição surgiu no mercado. Utilizando Sketch, Figma ou Adobe XD, você consegue criar wireframes, protótipos e designs usando apenas um único aplicativo. Logo abaixo podemos ver uma comparação entre as ferramentas.
| Adobe XD | Figma | |
| Preço | De graça | De graça para pequenos times |
| Suporte de SO | Mac e Windows | Mac, Windows e Linux (pode ser usado através do navegador) |
| Páginas | Todas as artes estão na mesma página | Você consegue separar por páginas |
| Colaboração simultânea | Você consegue colaborar com outras pessoas, porém não ao mesmo tempo. Ele vai sempre pedir permissão para salvar e você pode acabar perdendo um pouco do seu trabalho | Sim |
| Plugins | Sim, no entanto não muitos | Sim |
| Funciona Offline | Sim | Não |
Como fazer download e criar sua conta no Figma?
É bem simples criar uma conta no Figma, siga esses passos:
- Entre no site oficial do Figma.
- Clique no botão de se inscrever (Sign up)
- Você pode criar uma conta com o e-mail do Google ou utilizar um outro e-mail.
- Após o processo de cadastro, vai chegar um e-mail confirmando a criação da sua conta.
- Agora você já conseguiu criar a sua conta no Figma.
Para fazer o download da aplicação, basta entrar na seção de downloads do Figma e baixar o aplicativo que corresponde a sua versão do Sistema operacional.
Como usar o figma? Conheça a interface!
A primeira interface que veremos é a de Camadas e objetos. Nela você encontra as ferramentas para criação ou importação de imagens, objetos, grupos, símbolos, etc.
Por ser chamada de “camadas” significa que existe uma ordem hierárquica. Se você clicar e arrastar os objetos da lista, você consegue alterar essa hierarquia jogando objetos para frente ou para trás de outros.
Páginas
Caso já tenha usado o Photoshop ou algo similar, já deve ter percebido que nesse tipo de software você cria um novo arquivo e dá um nome para ele. No Figma também temos isso, no entanto com algumas pequenas diferenças.
No figma conseguimos criar diversas páginas com diversos conteúdos, ou seja, se queremos separar o nosso projeto em partes, podemos facilmente definir grupos em casa, algo como Style Guide, User Flow, Wire Frames e Protótipo.
Dessa maneira, entendemos que o Figma, diferentemente do Photoshop, se aproveita das suas páginas para separar o conteúdo e trazer um novo nível organizacional para a equipe. Devemos lembrar também que as páginas podem ter o tamanho que a pessoa usuária quiser, logo não precisamos definir a altura e largura em pixels dessas seções.
Regiões e botões importantes
No Figma temos algumas opções muito interessantes e que são realmente úteis para o seu fluxo de trabalho.
Para começarmos, você consegue alterar o nome do projeto clicando na parte central superior da tela.
- Botão de compartilhamento (Share): Localizado no canto superior direito, ele tem uma das funcionalidades mais úteis do Figma: ao clicar nele você consegue gerar um link que qualquer pessoa pode entrar e visualizar em tempo real o que você está trabalhando no arquivo. Muito parecido com as funcionalidades do Google Drive ou Google Docs.
- Botão Play: Basicamente, inicia uma apresentação de slides do projeto, é muito útil para apresentar as telas de uma forma mais organizada.
- Botão de zoom (100%): Na ação de clique você consegue controlar o zoom e também ativar os grids, régua, visualização em pixel, etc.
No painel à direita você consegue ver 3 abas: Design, Prototype e Code. Na primeira aba você encontrará todas as opções de manipulação e edição de tudo que você criar, também encontramos o botão de mudar a cor do fundo do arquivo (que por padrão é cinza) e o botão de exportar o arquivo todo.
Em Prototype temos as opções de criar um protótipo interativo do nosso app. Por último, a aba Code tem os detalhes técnicos para quando um programador ou programadora for implementar a interface que você criou.
Vamos agora voltar para a aba Design. Logo em seguida, na folha em branco, precisamos desenhar um retângulo qualquer. Para isso segure a tecla R e use o mouse para criar o formato na tela. Você provavelmente criará algo parecido com isso:
Quando o retângulo estiver selecionado, vão aparecer algumas opções no menu lateral, tais como a cor de preenchimento, cor do contorno, efeitos (como o box-shadow), entre outras configurações.
- Fill: É aqui que definimos a cor de preenchimento de uma forma geométrica vetorial que você criou. Basta clicar no quadradinho da cor e as opções vão se abrir para você escolher uma cor, também podemos escolher o tipo de fill (preenchimento) clicando em “Solid” e trocando para Linear, por exemplo.
- Stroke: Esse é o contorno do seu quadrado, você pode ver que não tem nada pré-configurado, mas basta apenas clicar no botão de + para adicionar alguma cor. Também nesta aba temos as opções de espessura do contorno e também se vai ser para dentro ou para fora ou ao contrário. Clicando nos 3 pontinhos você tem outras opções específicas de contorno.
- Effects: Aqui conseguimos adicionar as famosas sombras que amamos. Basta clicar no botão + e por padrão vai aparecer o efeito de drop shadow. Ao clicar no nome do efeito você conseguirá alterar ele, e, clicando no ícone do efeito, você pode modificá-lo.
- Estilos: Cada seção possui um botão com 4 pontinhos, que é onde ficam os estilos. Dentro do Figma é possível criar estilos personalizados de cores, efeitos e tipografia de uma maneira extremamente fácil e versátil.
Vale ressaltar que em todas essas abas é possível adicionar vários, basta clicar no botão + e você poderá adicionar quantas cores, contornos ou efeitos que quiser.
Como funciona a movimentação no figma?
No Figma conseguimos movimentar e ver os elementos do seu arquivo de várias formas, uma delas é segurando a barra de espaço e clicando com o botão esquerdo do mouse, assim usando a opção de PAN.
Além disso, outra maneira de se movimentar é clicando e segurando a rodinha do mouse. Também é possível usar a HAND TOOL (Atalho H) para se movimentar só clicando com o botão esquerdo.
Para fazer o zoom temos 3 maneiras, clicando no botão superior da direita onde diz a porcentagem atual (exemplo: 100%) e alterar os valores, ou segurar a tecla CTRL + Girar a rodinha do mouse para ampliar e reduzir. Também dá para segurar a tecla CTRL e apertar as teclas de subtrair e somar no teclado.
Para medirmos a distância entre os elementos, devemos segurar a tecla ALT e passar o mouse por cima de um elemento. Você também pode clicar e selecionar um elemento e pressionar ALT para usar esse elemento como base de medidas.
- Ferramenta MOVE (Atalho: V): É a ferramenta mais básica para selecionar elementos, grupos, etc. Você deve se acostumar a apertar a tecla V quando você quiser usar essa ferramenta. Vale lembrar que você consegue aumentar e diminuir o tamanho de alguns elementos com essa ferramenta.
- Ferramenta SCALE (Atalho: K): Essa ferramenta tem apenas uma função: aumentar e diminuir o tamanho de elementos. Sempre que você precisar aumentar ou diminuir algum elemento, não é recomendável utilizar a ferramenta de seleção.
- Ferramenta FRAME (Atalho: F): Essa é uma das ferramentas mais importantes do Figma, com ela conseguimos criar vários espaços em branco para que a gente possa continuar trabalhando. Uma coisa legal é que podemos padronizar o tamanho e utilizar como sequência das nossas telas.
O que são constraints e para que servem?
O conceito é bem simples, quando um elemento estiver dentro de um frame, você pode selecioná-lo e adicionar as opções de constraints. Isso é, você consegue “grudar” o elemento selecionado em uma determinada extremidade da interface.
No momento que a altura ou largura do frame for alterado, o elemento manterá a posição dele ou acompanhará o frame. Tente fazer um teste por conta própria, é bem simples de usar.
Conheça as estruturas de Grids
Ao clicar em um frame repare nas opções do menu lateral, a seção com o nome de Layout Grid + é a qual queremos utilizar. Clicando no botão de “+” você consegue criar uma camada de grids no frame.
Essa camada consegue ser alterada e manipulada para criar um sistema de grid que seja útil para você, para isso basta clicar em cima do ícone de quadradinhos logo atrás da palavra “Grid (10px)”.
Nessa janela você pode alterar para Grid, Columns e Rows. No Ui Design é utilizado majoritariamente as columns, mas também é possível utilizar outras estruturas em casos mais específicos.
Devemos compreender que no mundo do Design de interfaces o grid é o esqueleto da nossa interface. O principal uso de um grid é definir uma regra de organização e alinhamento dos diversos elementos que uma interface possui.
Existem 2 tipos de grids que são recomendados para iniciantes.
A estrutura de 3 linhas
Essa estrutura consiste em 3 linhas horizontais no seu frame. Adicionamos 30px de margem horizontal e 30px de distância entre elas. Essa estrutura serve tanto para mobile quanto desktop.
A estrutura de 12 colunas
Essa outra estrutura é muito útil para interfaces desktop. É recomendável utilizar um frame com pelo menos 1366 de largura, dessa forma basta você adicionar as seguintes opções no menu de colunas:
- 12 colunas
- 70 width (largura)
- 30 gutter (distância entre elementos)
- alinhado ao centro
Dessa maneira, temos uma estrutura bem simples e clean para o desenvolvimento de novas telas.
8 atalhos úteis para usar no Figma!
Ferramenta Texto (Atalho: T)
Uma das coisas mais importantes que você deve entender sobre a ferramenta de texto é a criação de uma bounding box.
No Figma temos duas maneiras de inserir um texto, clicando apenas uma vez com o botão esquerdo e digitando ou também ao clicar com o botão esquerdo e criar uma área para o texto.
Ao clicar e arrastar com o botão esquerdo, você criará algo que se chama bounding box, essa caixa representa os limites do texto, onde ele começa e onde ele termina. Essa delimitação é útil para um monte de casos.
Se atente que ao aumentar ou diminuir o seu texto por meio dessa caixa, você perceberá que o seu texto não está alterando de tamanho, isso porque você está aumentando a bounding box e não a escala do texto. Para resolver isso, utilize o tamanho do scale pressionando a letra K.
Atalhos de formas geométricas
- Retângulo (Atalho: R)
- Linha (Atalho:L)
- Seta (Atalho: Shift + L)
- Pen Tool (Atalho: P)
- Elipse (Atalho: O)
Todas essas ferramentas fazem parte do conjunto de formas geométricas. Logo, todas funcionam da mesma forma, basta você criar o objeto e manipulá-lo da maneira que for necessária.
Componentes (Atalho: Ctrl+Alt+K)
Mais uma funcionalidade do Figma que é realmente útil. Através desse comando você consegue criar componentes reutilizáveis para o seu projeto, no momento que você cria o componente aparecerá um elemento “pai” do qual poderá ser criado várias instâncias.
Quando você muda as propriedades visuais do componente pai, todos os outros filhos são alterados também. Isso é muito útil para formulários, cartões, botões, etc.
Para criar um componente, basta você agrupar todos os elementos com as características utilizando o comando CTRL+A+K, e pronto, o componente vai ser criado. Para utilizá-lo basta acessar a aba “assets” que fica no painel da esquerda.
Máscaras (Atalho: Ctrl+Alt+M)
Se você já usou o photoshop já deve saber mais ou menos o conceito de máscaras. Aqui no Figma é um pouco diferente, com exceção da exclusão e subtração de pretos e branco.
No Figma, você consegue cortar imagens e objetos através de máscaras. Para isso, basta você ter uma imagem e uma forma da qual deseja inserir a imagem dentro. Coloque a imagem em cima da forma geométrica, selecione ambos os elementos e pressione CTRL+ALT+M.
Essa alteração não é permanente, logo você consegue alterar e desfazer através das camadas, basta selecionar a máscara e você vai ver que todos os elementos estão em perfeito estado.
Figma pago ou Figma gratuito: qual usar?
Para responder essa pergunta, devemos entender o seu perfil. Abaixo organizamos as principais diferenças entre as versões do Figma.
De graça
Começando, a principal vantagem dessa categoria é que você não gastará absolutamente nada e obterá as seguintes vantagens:
- 3 Figma e 3 arquivos Fig Jam
- Acesso ilimitado a arquivos pessoais
- Colaboradores ilimitados
- Alguns plugins e templates
Temos algumas boas vantagens mas acabamos tendo uma grande limitação de recursos e privacidade.
Profissional
De início, devemos pagar 12 dólares por mês para essa licença. As vantagens desse grupo são:
- Acesso ilimitado a arquivos e projetos
- Acesso ilimitado ao histórico de versionamento
- Permissão de compartilhamento
- Projetos privados
- Conversas por áudio
Nessa outra categoria temos muitas vantagens para se trabalhar em grupos e o preço consegue ser um pouco agradável.
Organização
Nesse último conjunto, temos as principais características de uma organização. O preço mensal é de 45 dólares e os principais benefícios são:
- Gigantes bibliotecas
- Sistemas de análise de Design
- Versionamento melhorado com branches e merges
- Gerenciamento de conteúdo centralizado
- Painel de administrador e pagamento unificados
- Plugins privados
- SSO com segurança avançada
- Provisionamento automático via SCIM
Essa é a estrutura mais completa e que entrega mais utilidades organizacionais, logo é indicado para empresas de pequeno, médio ou grande porte.
Se você quiser ver mais detalhadamente as diferenças entre as versões, entre na seção de preços da Figma.
Na nova internet que estamos vivendo é necessário pensar principalmente na pessoa usuária final, tanto em questão de usabilidade quanto de facilidade no fluxo. Com todos esses adventos e novas tecnologias, conseguimos criar as nossas telas no Figma e repassá-las para alguma pessoa desenvolvedora escrever em HTML e CSS rapidamente.
Ao utilizar o Figma, percebemos que a sua principal vantagem é de ser totalmente integrado com a nuvem, facilitando o trabalho colaborativo e também o compartilhamento do progresso das telas. Além do mais, temos muitos atalhos no teclado que nos ajudam a melhorar a produtividade das telas e componentes.
Quer arriscar no mundo do desenvolvimento web? Então, leia mais sobre Como aprender CSS com facilidade? Confira 5 dicas essenciais!
