O que são os componentes e as variantes do Figma?

O que são os componentes e as variantes do Figma?

Última atualização:
13/12/2022
Pessoa autora:
Brenda
Categorias:

“Tempo é dinheiro”. Com certeza, você já ouviu essa expressão e tenho certeza que ela faz muito sentido para várias pessoas. Inclusive, podemos associar essa frase tão famosa ao âmbito dos nossos projetos profissionais, fazendo mais sentido ainda.

Quando temos um projeto com prazo apertado, cada minuto é valioso. Por isso, sempre buscamos alternativas para otimizar nosso trabalho. Por exemplo, um pedreiro com uma escavadeira é mais rápido que um pedreiro com uma pá. Para os designers, não é diferente. Precisamos trabalhar com ferramentas que otimizem nosso tempo.

A cada artigo sempre falo sobre o Figma para vocês. Hoje, trago algumas informações sobre a funcionalidade de componentização, que, na minha opinião, é uma das mais revolucionárias.

O que é um componente?

Componentes são elementos “reutilizáveis” dentro do seu design. Você pode usá-los para gerar consistência, rapidez e otimização nos seus projetos. Dentro dos componentes, é possível construir variantes para trazer mais diversidade para os elementos e, assim, gerar mais cenários para o seu trabalho.

Componentes do Figma
(Créditos: Figma)

O que são variantes?

As variantes servem para o agrupamento e a organização de componentes que são similares. Elas diferenciam cada elemento dentro de um componente. Por exemplo, pense em um botão, ele será nosso componente “mãe”, ou seja, qualquer alteração feita nele será replicada para os demais.

Agora, vamos mais a fundo: dentro desse botão, existem as suas variações, ou melhor, variantes. Então, nesse botão pode haver diversas variações, como: desabilitado, pressionado, ativo, inativo e assim vai - lembrando que isso muda de projeto para projeto, é somente um exemplo.

Variantes do Figma
(Créditos: Figma)

Analogia do passarinho

Vamos mentalizar um passarinho. As suas propriedades são: duas asas, um bico, dois olhos, etc. Agora, imagine um passarinho amarelo, um preto, um azul e um verde. Eles possuem as mesmas propriedades (características), mas também possuem diferenças nas suas variações, que, neste caso, são as cores das suas penas. Tudo isso forma um componente.

Acho que assim ficou mais claro de entender o que são variantes e componentes e como eles funcionam, né?

Passarinhos
(Créditos: Freepik)

Conclusão

Optar por trabalhar com componentes e variantes em um arquivo pode reduzir boa parte do tempo do seu projeto, ajudando a chegar ao objetivo mais rápido e entregando o projeto no prazo determinado (mas isso depende de você, tá?). Além disso, algumas vantagens como consistência, otimização do tempo e credibilidade também podem estar presentes nesse processo.