Design System

# Figma para desenvolvedores

# O que é o Figma ?

Figma é uma plataforma de design e prototipação de intefaces que funciona diretamente em seu navegador, facilitando o processo de "handoff", ou seja, o processo em que o time de design entrega a tela para ser construida pelo time de desenvolvedores.

# Como utilizar o Figma ?

Ao ser adicionado como colaborador, você pode usar o Figma de duas maneiras:

  1. No navegador, utilizando este link (opens new window) ou
  2. Baixando o aplicativo Desktop (opens new window) para Windows ou MacOS

# Conhecendo a plataforma

A inteface do Figma é dividida em 3 partes principais:

  • No lado esquerdo há uma barra lateral que contém as camadas, recursos e páginas de um arquivo.
  • No meio, você encontrará uma grande tela onde todos os designs estão localizados.
  • Na barra lateral direita contém todas as informações sobre o elemento ou frame selecionado.

  • Você pode dar Zoom in ou Zoom out ao segurar Ctrl e scrollando para cima/baixo ou pressionando as teclas + e -

  • Se desejar scrollar horizontalmente pelos designs, basta pressionar SpaceBar e arrastar o mouse.

  • Pressione Shift + 2 para rapidamente dar Zoom in em um único frame ou elemento.

  • Pressione Shift + 1 para dar Zoom out e todos os elementos aparecerem na tela.

    DICA

    Para vizualizar todos os atalhos disponiveis, basta pressionar Ctrl + Shift + ?

# Visualizando os estilos do projeto


Ao abrir um arquivo pela primeira vez, possivelmente seja útil vizualizar e aplicar todos os estilos básicos do projeto. O figma apresenta todos os estilos do projeto na barra lateral direita.

Nela é possivel vizualizar todas as informações do projeto, como a tipografia, cores, espaçamento dos elementos e outros estilos usados no design

DICA

Note que os estilos do projeto só estão disponiveis quando nenhum elemento está selecionado. Se ao selecionar um elemento você desejar visualizar novamente os estilos do projeto, basta pressionar a tecla Esc.

# Selecionando elementos


Selecionar um elemento (uma ilustração svg, por exemplo) pode não ser tão simples como apenas clicar em tal elemento. Isso acontece pois a maioria dos designs possuem diversos níveis de aninhamento nos elementos.

Para selecionar uma camada específica, você pode clicar com o mouse direto sobre o elemento desejado para abrir um menu com todas as camadas aninhadas e selecionar a correta.

Existem diversas outras formas de selecionar uma camada no Figma, para aprendê-las visite a documentação ensinando a navegar por camadas (opens new window)

Após ter selecionado uma camada, a barra lateral direita apresentará todas as informações do elemento, como a tipografia, propriedades, cores, conteúdo e um código CSS.

ATENÇÃO

Note que o código CSS apresentado pelo Figma é gerado automaticamente e não é perfeito, especialmente para o posicionamento de elementos. Não copie o código para seu projeto, mas use-o como uma forma de rapidamente obter informações sobre elementos.

Além dessas informações, ao selecionar um componente presente em nosso Design System (opens new window), a opção "Show Documentation" aparecerá na barra lateral. Clique nessa opção para ser rapidamente redirecionado à página referente ao componente selecionado.

# Medidas e Espaçamento


Quando quiser medir a distancia entre dois elementos, posiciona-los de forma correta ou até mesmo aplicar o padding/margin certos, basta selecionar o elemento a partir do qual deseja medir e passar o mouse sobre o elemento para o qual deseja medir a distância.

← Instalação →