Praticando Figma: componentes

Prototipando no Figma - Apresentação

Olá! Meu nome é Maria Silveira, sou instrutora e monitora na Alura.

Audiodescrição: Maria é uma mulher de pele parda, cabelos cacheados e olhos castanhos. Usa uma camiseta regata na cor branca, brincos dourados e fones de ouvido sem fio. Na sua frente, um microfone. Ao fundo, uma parede lisa com iluminação roxa e ao lado direito uma prateleira com livros e itens de decoração.

Criando um componente no Figma

Neste curso, vamos praticar juntos a criação de componentes no Figma. Para isso, faremos uma revisão. Sabemos que um componente é um elemento reutilizável que construímos para usar em diferentes momentos nas interfaces digitais. Então, vamos acessar o Figma para construir um componente, que será um botão.

Estruturando um botão

No Figma, no centro da tela, deixamos dois ícones que serão utilizados na construção do botão, um em formato de círculo e outro de seta para o lado direito.

Para começar, pressionamos a tecla "T" para ativar a ferramenta de texto. Depois, clicamos no centro da tela e escrevemos "Botão". Feito isso, selecionamos essa caixa de texto e clicamos como botão direito, depois em "Frame selection" para transformarmos esse texto em um frame. Outra forma de fazer isso é selecionando a caixa e pressionando "Ctrl + Alt + G".

Agora que a caixa de texto foi transformada em um frame, podemos aplicar o Auto Layout, o que facilitará a construção do componente, especialmente ao inserir os ícones. Podemos usar o atalho "Shift + A" ou então, na barra de ferramentas localizada na lateral direita da tela, clicar em "Layout" e depois no ícone identificado por um símbolo de "+", um retângulo e um quadrado.

Com o Auto Layout aplicado, vamos adicionar paddings ao frame. Nessa caixa de texto, também na lateral direita, definimos "8" pixels em cada lado.

Em seguida, na seção "Fill", adicionamos uma cor de fundo ao frame. Inicialmente, ele está com a cor branca padrão, mas vamos mudar para um tom de azul. Também mudaremos a cor do texto de preto para branco para facilitar a leitura. Para finalizar, arredondaremos os cantos do frame na seção "Apperance", definimos "4" pixels. Assim, temos nosso botão.

Como estamos trabalhando com componentes, queremos adicionar diferentes estados e propriedades. Vamos transformar o botão em um componente usando o atalho "Ctrl + Alt + K" ou clicando com o botão direito no botão e depois em "Criate component". Vamos renomeá-lo de para "Button".

Criando variantes e estados

Podemos, por exemplo, mudar a cor do botão, ao fazer isso o componente base não será alterado. No entanto, queremos aplicar variantes e propriedades. Então, na barra de ferramentas da lateral direita, clicamos em "Add variant", botão identificado por um losango com um símbolo de "+" dentro. Em sequência, adicionamos outra variante clicando no ícone de "+".

Feito isso, temos três botões idênticos e já existe uma propriedade aplicada que renomearemos para "State", representando os estados do botão. O primeiro botão é o Default, o segundo Hover e o terceiro Pressed, representando o estado pressionado. Vamos mudar sutilmente as cores desses dois estados para diferenciá-los na prática. Definimos o segundo botão como roxo e o terceiro um tom de roxo mais escuro.

Dessa forma, conseguimos alterar o estado do botão sem necessariamente mudar sua cor, simbolizando essa mudança por meio da cor selecionada no color picker ou adicionando o código de cor diretamente. Na ferramenta ao lado direito, no campo "State", mudamos de "Default" para "Hover" e de "Hover" para "Pressed".

Agora, vamos falar sobre os ícones. Utilizaremos esses ícones para adicionar outras propriedades ao nosso botão. Então, no primeiro botão, adicionamos o círculo ao lado esquerdo e a seta ao lado direito, deixando o texto "Botão" no centro. Fazemos o mesmo para os outros botões.

Poderíamos ter feito isso antes de transformar o botão em um componente, mas é importante mostrar que existem vários caminhos para alcançar o mesmo resultado.

Em seguida, selecionaremos cada um desses ícones e alteraremos sua cor para a mesma cor do nosso label (rótulo) do CTA (chamada para ação), que é o botão. Seleiconamos um ícone e depois, na lateral direita, na seção "Circle" clciamso no botão "Multi-edit variants". Para editar todos os ícones semelhantes de uma só vez. Feito isso, em "Selection colors", mudamos a cor para branco. Fazemos o mesmo com o ícone de seta.

Controlando a visibilidade dos ícones

Para controlar a visibilidade dos ícones de forma prática, sem precisar acessar a camada, utilizaremos uma propriedade booleana. Na barra de ferramentas à direita, após selecionar o componente, criaremos uma nova propriedade booleana clicando no botão de "+" na seção "Properties" e depois em "Boolean". Depois, renomeamos essa propriedade para "ícone esquerdo", que virá ativada por padrão. Faremos o mesmo para o ícone à direita.

Para aplicar essas propriedades, selecionaremos os ícones à esquerda e, na barra de ferramentas à direita, em "Apparency", clicamos no ícone de aplicar variável ou propriedade ao elemento. Feito isso, selecionamos "ícone esquerdo". Depois, fazemos mesmo para os ícones à direita.

Após aplicar as propriedades, podemos verificar que o botão possui três propriedades: estado, ícone esquerdo e ícone direito. Ao copiar o componente e criar um componente filho, podemos ver todas as propriedades, tanto as de estado quanto as de ícone, que podem ser ativadas ou desativadas.

Com isso, concluímos nossa revisão sobre criação de componentes no Figma, suas variantes e propriedades, e como aplicá-las. Esperamos que você pratique esse conhecimento nas atividades a seguir, criando diferentes componentes, como checkbox, componentes de entrada, modais e até mesmo avatares.

Nos encontramos na próxima aula. Até mais!

Sobre o curso Praticando Figma: componentes

O curso Praticando Figma: componentes possui 12 minutos de vídeos, em um total de 10 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Prototipando no Figma