Figma para começar bem
Tags: figma, frontend, ux, ui
Published: 2024-01-26 01:59:46

Ultimamente tenho frequentado comunidades dev e me deparo com um déficit de conhecimentos forte em Figma e em como construir um bom mockup no app para trabalhar com automação ou facilitar a vida quando partimos para o front-end da aplicação.

Esse post é para você que já se aventurou no figma mas não sabe aplicar as melhores práticas para otimizar sua vida ou de sua equipe.

### Sumário

* Conceitos básicos
  * Frames
  * Grid
  * Auto layout
* Components
  * Variantes
  * Protótipos
* Organização é essencial
  * Cores
  * Tipografia


## Conceitos básicos

O figma tem uma infinidade de opções e ferramentas, mas nesse artigo vou buscar te dar uma boa base e nos seguintes trazer um aprofundamento de cada item que mencionarei.


### Frames

Utilize a ferramenta de criação ao seu favor, lá tem tamanhos **predefinidos** para a maioria das telas. É de suma importância quando você quer ter um **design 100% responsivo** usar o desktop, phone e tablet, além de várias outras opções.

![Frame exemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4uyxij700h24wglniem.png)


### Grid

O grid é seu **maior aliado** para deixar seu site com o melhor alinhamento e distanciamento correto dos seus elementos.

![Grid exemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4liqdthrxl54ulj6j2xm.png)

Nele você pode definir três tipos, _pixels_, _column_ e _row_, o mais indicado para **centralização horizontal** é column e por conseguinte o row para **vertical**, com esse combo o seu mockup ficará muito melhor e fácil de montar.

#### ⚙️ Configuração que mais utilizo:

* Desktop: Column 12 e margin 60
* Phone: Column 6 e margin 34
* Tablet: Column 8 e margin 60

E para se aprofundar melhor nesse mundo o figma tem um [vídeo explicando](https://www.youtube.com/watch?v=zd8wrAdURN0) tudo sobre.


### Auto Layout

Sem dúvidas essa é a configuração **mais necessária** do seu design, é com ele que você poderá aplicar as configurações certas para atribuir na sua folha de estilo.

Ele tem o papel de imitar uma _div_ e seu comportamento, com ele você terá todas as opções de posicionamentos dos seus itens, _padding_, _margin_, _justify_, _aling_ e o _flex direction_ dos elementos.

![Auto layout exemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ir8qlo8h8w6s95sjlhx.png)


> 💡 **Dica abstrata**
> _Sempre ligue o **auto layout** a uma **div** quando for organizar seus elementos de texto, imagem, etc. Da mesma forma que você tem uma div dentro da outra com configurações distintas o mesmo se aplica para essa ferramenta._


## Components

Assim como dentro das principais linguagens e frameworks que tem o foco de enfatizar e otimizar o uso dos componentes, dentro do Figma nós temos a possibilidade com esta ferramenta de configurar _variantes_, _propriedades_ e status _booleanos_.

### Variantes

Se você ja trabalhou com _props_ ou _diretivas_, sabe do poder que tem dentro da construção de um site, e no figma temos também!

![Variantes Exemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkl5ge4gqh2tnthtg1jm.png)

Você pode dentro do Figma, até a versão atual deste post, ter propriedades de texto, booleanas, variantes de modelos, e troca de instancias.

Com isso você pode por exemplo fazer vários modelos de um único elemento, modo claro e escuro, quando estiver em _hover_, quando _selecionado_, em telas diferentes, e muitas outras possibilidades.

### Protótipos

Dar vida ao seu site dentro do figma é possível também, vamos imaginar que você quer ver como tudo vai funcionar antes de realmente codificar aquilo, com essa ferramenta você consegue e é bem intuitiva viu!

![Protótipos Exemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14fhuj4ump3lfvv6k9xa.png)

Com esta funcionalidade você imita as ações que o html recebe do usuário, como já citado o _hover_, _click_, _selected_, _pressing_, ações do mouse, e também pode ser configurado para acontecer algo após _delay_.

## Organização é essencial

E em como todo fluxo de trabalho e criação, temos que saber nos organizar dentro dele e facilitar o entendimento de qualquer um sem precisar passar horas explicando cada peça, com o **section** você pode definir os temas de cada componente que você está construindo, ícones e seus tamanhos, telas, e tudo que você julgar útil ter etiquetado.

### Cores de forma muito mais fácil

Você ja se pegou usando o conta gotas para pegar uma cor várias vezes porque estava com preguiça de copiar o código dela? Não precisa disso, da pra armazenar o valor dela numa variável também!

![Cores exemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ocq9t1uwiq5ndgwmn7q.png)

Além de somente a cor, conseguimos também os estilos de cor como _linear_, _radial_, _angular_ e _diamond_, e as tipografias!

### Header, subtitles e estilos de texto!

Essas variáveis também tem suporte para definir estilos de texto que você desejar, então ter uma _section_ para a tipografia e tamanhos é muito importante!

![Tipografia Exemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7jp8h7ybpj0xh4lu354.png)


## Conclusão

Hoje em dia não é mais obrigatório ter que passar horas no html css e se lascando para entender o pdf que o designer mandou, temos pessoas incríveis criando soluções para otimizar e melhorar nosso dia a dia. E se quiser saber mais sobre esse software incrível é só me acompanhar por aqui e também acompanhar o [YouTube oficial](https://www.youtube.com/@Figma) deles!