O figma pode ser utilizado em Mac, Linux e Windows, tanto no navegador quando instalado na máquina para uso offline.
DICA: Caso queira ver as imagens em tamanho real é possível clicar nelas com o botão direito e selecionar "abrir imagem em uma nova guia".
Caso prefira trabalhar com o Figma instalado na sua máquina o caminho mais fácil é clicar aqui, ou pesquisar pelo Figma no google e ir direto no link para download.
Nesta tela basta selecionar a plataforma que está utilizando e instalar.
Essa é a tela inicial. A seguir temos algumas explicações.
Clicando no botão "Create new team" é iniciado o fluxo para criar um novo time.
Despois de nomear serão adicionados os membros do time.
Após adicionar os membros o site irá perguntar sobre o plano desejado. No momento vamos seguir com o plano gratuito, que permite 3 arquivos, 3 páginas e 1 projeto. Isso significa que só pode ser criado 1 projeto, dentro do qual podem haver 3 protótipos com 3 páginas cada um, mas não se preocupem, pois é possível criar um número aparentemente ilimitado de telas dentro de 1 página.
Após esse processo temos a área inicial do time.
Clicando em um dos pequenos quadrados dentro do quadrado maior será possível criar um novo protótipo. O quadrado com uma estrela indica que aquele não está disponível, pois faz parte de um plano pago.
Essa é a tela inicial quando se abre um novo protótipo. Para incluir uma tela é necessário clicar no botão evidenciado no canto superior esquerdo, que abrirá opções de tamanhos de telas na coluna da direita. Costumo sempre iniciar com o tamanho indicado abaixo (Apresentação > Slide 16:9) por ser o tamanho de uma tela comum e aumento sua altura quando se trata de uma tela com rolagem.
É possível aumentar a tela tanto arrastanto o topo ou a base ou inserindo um novo número no campo evidenciado abaixo.
Os botões no topo da página possuem nomes, deixando o mouse sobre eles mostra os mesmos. Nessa sessão vou falar um pouco sobre cada um e resaltar as funções mais importantes de cada, além de deixar logo abaixo uma tabela com os atalhos mais relevantes (é possível ver a maioria deles no próprio Figma também).
| Local | Descrição |
|---|---|
| Main menu > File > Save local copy | Salvar uma copia local ou fazer download como arquivo. Pode ser útil como uma forma alternativa de compartilhar protótipos. |
| Atalho | Local | Descrição |
|---|---|---|
| Ctrl + Z | Main menu > Edit > Undo | Desfaer |
| Ctrl + Y | Main menu > Edit > Redo | Refazer |
| Ctrl + D | Main menu > Edit > Duplicate | Duplicar |
| Del ou Backspace | Main menu > Edit > Delete | Deletar |
| i | Main menu > Edit > Pick color | Conta Gotas/Selecionar uma cor já existente no protótipo. |
| Atalho | Local | Descrição |
|---|---|---|
| Ctrl + + | Main menu > View > Zoom in | Aproximar |
| Ctrl + - | Main menu > View > Zoom out | Afastar |
| Main menu > View > Zoom to fit | Ajustar a prancheta para encaixar na tela. | |
| Espace + Botão esquerdo do mouse | Permite navegar arrastando a tela. | |
| Ctrl + roda do mouse | Aproximar e afastar | |
| Roda do mouse | Movimento vertical | |
| Shift + Roda do mouse | Movimento horizontal | |
| Shift + Botão esquerdo do mouse | Selecionar diversos itens um a um. | |
| Arrastar botão esquerdo do mouse | Selecionar itens em uma área. | |
| Alt + Arrastar botão esquerdo do mouse | Arrasta uma copia do objeto selecionado. |
| Atalho | Local | Descrição |
|---|---|---|
| Ctrl + G | Main menu > Object > Group selection | Agrupar objetos selecionados (Dica: um grupo é tratado como um objeto individual, portanto é possível fazer um grupo de vários grupos.) |
| Ctrl + Shif + G ou Ctrl + Backspace | Main menu > Object > Ungroup selection | Desfazer grupo (Dica: Se for um grupo de grupos, o desagrupar não vai desfazer todos, somente o mais abrangente.) |
| ] | Main menu > Object > Bring to front | Traz para a camada mais da frente possível. Ficará na frente de qualquer objeto até que seja criado um objeto novo ou outro seja trazido para frente. |
| Ctrl + ] | Main menu > Object > Bring forward | Traz somente uma camada para frente. |
| Ctrl + [ | Main menu > Object > Send backward | Envia para a camada mais atrás possível. Ficará atrás de qualquer objeto até que outro seja colocado ainda mais atrás. |
| [ | Main menu > Object > Send to back | Envia somente uma camada para trás. |
| Shif + H | Main menu > Object > Flip horizontal | Inverte o objeto na horizontal. |
| Shif + V | Main menu > Object > Flip vertical | Inverte o objeto na vertical. |
| Main menu > Object > Rotate 180o | Gira o objeto em 180o deixando ele de ponta cabeça. | |
| Main menu > Object > Rotate 90o left | Gira o objeto em 90o para a esquerda. | |
| Main menu > Object > Rotate 90o right | Gira o objeto em 90o para a direita. | |
| Ctrl + E | Main menu > Object > Flatten selection | Faz com que o objeto ou grupo selecionado vire um vetor, não será mais possível desagrupar ou editar os objetos individualmente. |
| Ctrl + Shif + H | Main menu > Object > Show/Hide selection | Torna o objeto selecionado invisível e vice-versa. |
| Ctrl + Shif + L | Main menu > Object > Lock/Unlock selection | Bloqueia/desbloqueia o objeto selecionado, isso impede que ele seja editado ou arrastado. Útil quando ele está no meio de muitos outros itens que você queira editar em conjunto ou mover. |
| Atalho | Local | Descrição |
|---|---|---|
| Ctrl + B | Main menu > Text > Bold (disponível no menu em coluna da direita) | Negrito |
| Ctrl + I | Main menu > Text > Italic (disponível no menu em coluna da direita) | Italico |
| Ctrl + U | Main menu > Text > Underline (disponível no menu em coluna da direita) | Sublinhado |
| Ctrl + Shift + X | Main menu > Text > Strikthrough (disponível no menu em coluna da direita) | Tachado |
| Ctrl + K | Main menu > Text > Create link | Adicionar link |
| Atalho | Local | Descrição |
|---|---|---|
| Main menu > Arrange > Round to pixel | Ajusta o tamanho do objeto para que seja em pixeis perfeitos, sem números decimais. (Ex. um quadrado de 2,3 pixels será arredondado para 2) | |
| Alt + A | Main menu > Arrange > Align left | Alinha todos os objetos selecionados à esquerda. |
| Alt + H | Main menu > Arrange > Align horizontal centers | Centraliza os objetos de forma horizontal. |
| Alt + D | Main menu > Arrange > Align right | Alinha todos os objetos selecionados à esquerda. |
| Alt + W | Main menu > Arrange > Align top | Alinha todos os objetos selecionados à esquerda. |
| Alt + V | Main menu > Arrange > Align vertical centers | Centraliza os objetos de forma vertical. |
| Alt + S | Main menu > Arrange > Align bottom | Alinha todos os objetos selecionados à esquerda. |
| Alt + Shift + H | Main menu > Arrange > Distribute horiontal spacing | Distribui os objetos selecionados de forma uniforme na horizontal. |
| Alt + Shift + V | Main menu > Arrange > Distribute vertical spacing | Distribui os objetos selecionados de forma uniforme na vertical. |
Continuação da explicação das ferramentas mais relevantes no menu do topo à esquerda.
A ferramenta Move é a padrão, serve para selecionar, arrastar e fazer diversas interações com os objetos, porém quando se trata de redimensionar ela não faz o que esperamos, pois ela não aumenta ou diminui de forma uniforme. Para isso temos que utilizar a ferramenta Scale.
A ferramenta Frame permite criar novas telas clicando no fundo e arrastando.
Essa ferramenta trata de criar formas, é chamada de Shape Tools, e permite criar as formas indicadas, cada uma tem algumas opções particulares de cada. A ferramenta estrela, por exemplo, possui configurações que permitem alterar a quantidade de pontas e a razão da estrela (deixar ela mais fina ou mais cheia). Elas se encontram no menu contextual da coluna da direita.
A ferramenta Pen permite criar uma linha, clicando em ESC para parar de editar, ou uma forma personalizada se finalizar no mesmo ponto em que iniciou.
É possível fazer curvas também se, no segundo ponto e nos seguintes, clicar e arrastar. As curvas criadas podem ser editadas depois de criadas clicando novamente nos pontos criados com a Pen.
A ferramenta Pencil permite fazer uma linha desenhando, não costuma ser útil.
Essa opção é bem direta, serve para criar um texto. Basta clicar em qualquer lugar na tela e começar a digitar. As opções para configurar textos são bem variadas, disponíveis tanto no Main Menu > Text quanto no menu contextual na coluna da direita.
Nessa área existem ferramentas muito úteis que podem poupar retrabalho ou agilizar algumas tarefas. Em Components serão mostrados os componentes criados. Para criar um componente basta selecionar um objeto, um grupo ou até um conjunto não agrupado, clicar com o botão direito do mouse e selecionar "Create component" (Ctrl + Alt + k)
Este menu mostra diversas configurações diferentes dependendo do que estiver selecionado ou que se está fazendo. A maioria das opções mais importantes costuma aparecer aquil, inclusive muitas opções só aparecem nesse menu, como para alterar a fonte do texto ou configurar as curvas de uma forma. Abaixo será falado de alguns menus importantes que aparecem nessa lateral.
Esse menu possui as ferramentas para alinhamento, respectivamente: alinhar à esquerda, centralizar verticalmente, alinhar à direita, alinhar acima, centralizar horizontalmente, alinhar abaixo e no último há algumas opções de distribuição. Ele só funciona com mais de um objeto/grupo selecionado,
O menu seguinte é referente a posição (X e Y), tamanho (W e H), ângulo (é possível girar o objeto) e curvas
Há três formas de redimencionar de forma proporcional, uma é utilizando a ferramenta Move, arrastando um canto da forma enquanto segura Shift, outra é utilizando a ferramenta Scale, e por último é possível alterar o tamanho inserindo um valor de altura ou largura nos campos W e H (Width "largura" e Height "altura"). Ao clicar no botão indicado na imagem os valores de ambos serão alterados proporcionalmente. Exemplo: Se os valores forem W 10 e H 30, se dobrar o W para 20 o H também será dobrado para 60.
É possível arredondar os cantos de uma forma inserindo um valor no campo resaltado abaixo.
Clicando no botão indicado abaixo é possível editar cada canto individualmente.
Quando o que está selecionado é a tela em si o menu fica da forma abaixo, com opções novas para alterar a orientação da tela e "clip content", que faz com que tudo que ficar para fora da tela não seja visível.
Este menu fica disponível quando se está editando um texto, clicando em ... é possível acessar muito mais opções.
Esta é uma configuração que auxilia na adaptação do design de um tamanho de tela para outro. Se um objeto está limitado à esquerda e ao topo, quando a tela for redimensionada ele manterá a distância entre à esquerda e do topo.
Nesta próxima camada se encontra a configuração da cor de preenchimento. Clicando no quadrado é possível ver diversas opções para a escolha do preenchimento, dentre elas a possíbilidade de escolher um gradiente, uma imagem e até videos no caso de assinantes. Clicando no icone de conta-gotas é possível copiar a cor de qualquer item na tela.
Este menu é similar a anterior, mas configura o traçado, linhas e bordas dos objetos. Possui as mesmas opções de preenchimento, sendo possível inserir imagens e usar gradientes. Possui também outras configurações como a espessura do traço, permite escolher quais traços estarão visiveis, escolher se o traço ficará por centralizado, por fora ou por dentro da forma, alem de poder configurar que seja tracejado e todo tipo de configuração desse tracejado.
Neste menu é possível fazer duas coisas, inserir sombras dentro e fora da forma, e borrar a forma por dentro e por fora. DICA: Na última opção, Background blur, para que funcione é necessário que exista ao menos 1% de transparência na área Fill (preenchimento). Se o objetivo for somente borrar, sem usar cor, basta usar branco com transparência de 1%.
Exemplo:
A última camada tem a função de permitir uma exportação rápida do que estiver selecionado nos formatos PNG, JPG, SGV ou PDF.
Existem centenas de plugins para o Figma, mas no momento um dos mais úteis será o html.to.design, que é capaz de pegar uma tela existente e converter em um arquivo editável para o Figma. Ele utiliza o link da tela para gerar um arquivo que pode ser aberto no figma, mas também é possível usar uma extensão para pegar o design de telas que não se pode enviar o link, como telas em que é necessário login. Segue abaixo o passo a passo de como fazer:
O caminho é Main Menu > Plugins > Find more plugins... ou ir direto no botão de plugins 
.
Como existem muitos plugins é necessário pesquisar por ele e então é só clicar em Run.
No primeiro acesso a tela irá aparecer assim, é necessário instalar a extensão. Basta clicar em "Install our brouser extension" que ele irá encaminhar para a instalação.
Após instalado já é possível utilizar em praticamente qualquer site. Fiz um teste no nosso Conexão Dimensa, aproveitando que ele é bem atualizado e possui vários icones e textos diferentes. Para começar basta clicar na extensão 
. Se ela não estiver visivel deve estar dentro de 
.
Para prosseguir recomendo selecionar o tamanho que for usar no protótipo e selecionar a opção azul ou clicar na opção em amarelo que permite que você selecione apenas uma área, caso queira pegar uma parte dessa tela e usar em outra.
A extensão irá fazer o download da página ou seleção em forma de arquivo .h2d, que pode ser lido pelo plugin no figma.
Basta abrir novamente o plugin e o campo para enviar o arquivo estará lá, basta arrastar e soltar ou clicar dentro da área azul que ele irá abrir o explorador de arquivos.
A conversão não é perfeita, mas poupa muito trabalho para recriar uma tela.
Aqui é possível ver que existem alguns erros que precisariam ser corrigidos. DICA: Quando quiser editar itens dentro de um grupo basta clicar duas vezes para entrar dentro do grupo, pode ser necessário fazer isso mais de uma vez quando houver grupos dentro de grupos.
Outra coisa importante de se notar é que mesmo que os tamanhos e fontes das letras sejam os mesmos ainda há uma diferença na visualização. A segunda imagem é como está no site do Conexão Dimensa, a primeira é como ficou no Figma e a terceira é uma versão com ajustes.
- Verifiquei usando o F12 que no site todas as fontes estão como Poppins, a mesma que o Figma utilizou, porém o texto dentro das tags e as datas ficaram mais parecidos com o Conexão Dimensa quando alterei para a fonte Segoe UI. Ainda não identifiquei porque isso ocorre, mas é comum tanto no Figma quanto no Adobe XD.
Existe a possibilidade de baixar o Figma para outros dispositivos como celulares, tablets e ipads, porém infelizmente não é possível a edição de protótipos, eles serve apenas para visualização, teste de protótipos e feedback.
Está é uma ferramenta nova que está em beta, necessita um pouco mais de exploração, mas pode vir a ser útil.
