DEV Community

Cover image for Componentes no Figma — Um guia para te ajudar a começar!
Eduardo Gonçalves Souza for Código ao Ponto

Posted on • Originally published at codigoaoponto.com

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

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
Enter fullscreen mode Exit fullscreen mode

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!

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

Image description

  1. 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

Image description

  1. 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:

Image description

  • 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:

Image description

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

Image description

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!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay