Componentes no Figma — Um guia para te ajudar a começar!

Eduardo Gonçalves Souza — Thu, 05 Dec 2024 23:39:23 +0000

Você alguma vez já ficou algum tempo mudando elementos de uma interface apenas porque mudou a cor ou a fonte, ou qualquer outro detalhezinho? Se sim, sabe o quanto é maçante e desgastante fazer isso, mas nesse artigo te ensinarei como deixar esse processo extremamente rápido e dinâmico!!

Direto ao ponto: O que é essa funcionalidade?

Essa funcionalidade se chama “Componente”, mas o que é esse componente? Em geral, é parecido com o que utilizamos na programação, ou até mesmo parecido com peças de LEGO.
Se fossemos falar de programação, seria algo como uma variável em “JavaScript”, vou mostrar abaixo um exemplo…

// Aqui vamos definir "variavel1" com o valor 1

const variavel1 = 1;

// E aqui vamos ver o que a variável está me retornando

console.log(variavel1);
// Resultado: 1

// Assim como componentes no figma, podemos usar a mesma base!
const variavelFinal = variavel1 + 1;

console.log(variavelFinal);
// Resultado: 2

// Se em algum momento trocarmos o valor da variavel1 todos os lugares
// serão trocados pelo novo valor
const variavel1 = 5;

console.log(variavel1);
// Resultado: 5

// E assim quando trocarmos o valor, mudará em todos os lugares que chamamos "variavel1"
const variavelFinal = variavel1 + 1;

console.log(variavelFinal);
// Resultado: 6

No exemplo acima, eu usei somente somei, mas daria para subtrair ou dividir, traduzindo, independente do lugar que chame ela, vai continuar sendo “1”, a não ser que seja alterada. Se a “variavel1” for alterada para o número “5”, todos os lugares que eu chamei a “variavel1” vão começar a retornar 5.

No Figma é exatamente igual, se tu tens um componente e trocar a cor, todos os lugares que têm aquele componente irão trocar a cor!

Utilizando na prática: Passo a Passo!

Vamos sair da teoria e colocar isso na prática, e é mais fácil do que parece!

Vamos criar um elemento quadrado básico para fazer um botão, e agrupá-lo :

Agora temos várias formas de transformar esse elemento em componente, entre essas várias vou falar de duas:

Selecione o grupo e clique no botão na barra superior
Ou Selecione o grupo e aperte na sequência Ctrl + Alt + K

E agora seu elemento já é um componente 🎉 Para utilizar esse componente, basta duplicar apartando Ctrl + D ou, como está no gif abaixo, pressionando a tecla Alt e arrastando. Assim que fizer isso, ele criará uma nova instância do componente:

Ou no canto superior, no menu, clicando em “Assets”, apertando no componente que acabou de criar que aparecerá lá, ele fará uma instância também:

E toda vez que alterar alguma propriedade no componente principal, todas as instâncias criadas a partir dele serão alteradas:

Resumindo!

Com tudo que vimos até aqui, resumindo, temos os seguintes passos:

Agrupe os elementos que deseja transformar em componente.
Selecione o grupo.
Clicar no botão de criar componente ou na sequência de botões.
Por fim, duplique ou arraste dos “Assets”

Admito que o nome e a ideia, quando não se entende, assustam um pouco, mas é mais fácil do que parece e acelera muito o desenvolvimento do projeto!

E ao dominar os componentes, você não está apenas criando designs; está construindo um sistema de design robusto que pode evoluir com seu projeto. Então vá em frente, comece a componentizar seus designs e veja sua eficiência disparar!

DEV Community: Eduardo Gonçalves Souza

Componentes no Figma — Um guia para te ajudar a começar!

Direto ao ponto: O que é essa funcionalidade?

Utilizando na prática: Passo a Passo!

Resumindo!