Como otimizar o trabalho no Figma com componentes

Marciele Rommel
3 min readFeb 21, 2021

Aprenda como criar e utilizar os componentes no software Figma

Photo by Alexander Shatov on Unsplash

Os componente é um elemento que pode ser completo ou não, parte de um grupo. Ele pode ser maleável como outros elementos de um todo.

No Figma o componente nos permite que sejam criadas várias copias do elemento original, reutilizando-o dentro de um projeto. Isso é muito bom principalmente para botões, ícones e inputs de interfaces que precisam ser reutiliza-los várias vezes. Além disso caso o componente mestre for alterado no projeto como por exemplo a cor de um botão, todos os outros botões cópia mudaram de cor também.

Falando em botão vamos criar um botão, crie um retângulo:

Tamanho: 120px X 40px

Raio de canto: 10

Cor: #6FCF97

Insira o texto SALVAR:

Fonte: Sora Regular

Tamanho: 21

Cor: Branca

O botão verde para salvar

Após ter criado o botão e ele estar em um grupo ou frame com a informação de texto e do retângulo dentro, use a função Create Component (Ctrl+Shift+K) e terá criado seu componente mestre.

Create Component

Veja que o componente mestre ficara com o ícone semelhante à opção Create Component:

Componente mestre

Clicando na opção ao lado dos layers em Assets terá acesso a todos os componentes criados:

Assets

Arraste esse componente para a área de criação e terá o componente secundário. Esse elemento pode ser editado e alterado e não impactara no componente mestre, mas o contrário acontece.

Componente mestre e secundário

Veja que o ícone do componente secundário é um quadrado virado é o que diferencia do componente mestre. Você pode arrastar botões e outros componentes que criar tantas vezes que for necessário.

Alterando componente mestre

Na gif apresento a diferença do componente mestre para o secundário, caso alterado o componente mestre muda todos os secundários que são suas copias, mas caso a cópia for alterada o componente mestre não muda.

Além dessa possibilidade o Figma nos permite também inserir duas variantes do botão na estrutura para trazer mais opção, reutilizando configurações porem mudando a função do botão, criando uma guia de estilos dos botões para aquela interface sendo trabalhada no projeto.

Duas variações do botão

Essas variações após serem criadas podem ser diferentes uma da outra, tranquilamente e serviram para uso no botão secundário, que após ser selecionado no Assets podem alterar opção do botão a ser adicionado.

Alternando o botão

Podem ser adicionadas mais variantes do mesmo componente, não apenas duas. O componente mestre também permite que seja adicionado comentário importante e links para que outros designers acessem informações.

Faça bom uso dos componentes, espero que otimizem seu dia a dia.

--

--

Marciele Rommel

UI/UX Designer com experiência em desenvolvimento de sistemas. Amo design, inovação, tecnologia, música, aquarela, ilustração e livros.