Minitutorial – Trabalhando com os componentes do botão Figma

Publicados: 2022-03-11

No Figma, os elementos da interface do usuário são chamados de Componentes. Construídos corretamente, eles são incrivelmente versáteis e fáceis de atualizar, mas do que os componentes são capazes e como eles operam? Demonstraremos seu poder trabalhando com um dos elementos de interface do usuário mais comuns de todos: o botão.

Por que botões?

Os botões estão repletos de variáveis ​​como altura, largura, comprimento da etiqueta, preenchimento interno, estado e tema. Ao construir um sistema básico de botões, aprenderemos o imenso valor de usar o Figma com uma mentalidade baseada em componentes e a biblioteca de componentes do Figma.

*Nota do Editor: Este tutorial escrito foi derivado de um tutorial em vídeo criado por David Luhr do Build UX.

Tarefa 1: Construir um componente básico do botão Figma

  1. Começaremos criando um novo quadro e renomeando-o como Botões no painel de camadas.
  2. Digite o texto do rótulo do botão. Usaremos "Sign Up" para este tutorial.
  3. Nossa tipografia é:
    • Roboto Médio
    • Tamanho da fonte 18
    • Altura da Linha 24
    • Centro de alinhamento de texto
    • Alinhar ao meio
    • Redimensionamento = Tamanho Fixo
  4. Depois de escrever o rótulo do botão, clique duas vezes no canto inferior direito da caixa de texto para que ela seja dimensionada automaticamente para as menores restrições do texto.
  5. Renomeie o rótulo do botão da camada de texto .
  6. Componente do botão Figma. Clique para ver a imagem em tamanho real.
    Tarefa 1: Etapas 1-5
  7. Faça um retângulo, coloque-o abaixo do Button Label no painel de camadas e renomeie-o para Button Container . Permita que a cor do contêiner do botão permaneça o cinza padrão.
  8. Estabeleça uma altura fixa para o recipiente do botão. Usaremos 60 pixels.
  9. Agora, adicionaremos preenchimento interno ao contêiner do botão.
    • A largura do rótulo do botão é de 63 pixels.
    • Precisamos de 24 pixels de preenchimento direito e esquerdo. Combinados, isso equivale a 48 pixels.
    • Então, vamos inserir a largura do rótulo (63 pixels) + preenchimento total (48 pixels).
  10. Selecione o rótulo e o recipiente e centralize-os com as ferramentas de alinhamento.
Tutorial Figma Clique para ver a imagem em tamanho real.
Tarefa 1: Etapas 6-9

Nós projetamos um botão rudimentar. No entanto, o preenchimento interno do nosso botão ainda não é capaz de acomodar a alteração do comprimento das etiquetas. Em uma etapa posterior, abordaremos o layout interno, que permitirá que a largura do nosso container de botões seja flexível em relação ao comprimento da etiqueta.

Procuravam-se designers de UI freelancers em tempo integral nos EUA

Tarefa 2: Torne o botão interativo

Para tornar o botão interativo, adicionaremos um anel de foco.

  1. Duplique o Container Button e renomeie-o como Button Focus Ring .
  2. Certifique-se de que o anel de foco esteja abaixo do recipiente do botão no painel de camadas.
  3. Remova o preenchimento do anel de foco e adicione um traço interno preto com espessura de 4 pixels.
  4. Também queremos um espaço de 4 pixels entre o contêiner do botão e o anel de foco nos quatro lados, então adicionaremos +16 à largura e à altura.
  5. Selecione e centralize o rótulo, o recipiente do botão e o anel de foco.
  6. É assim que nosso botão, em sua forma mais simples, ficará em um estado focado.

    Biblioteca de componentes Figma Clique para ver a imagem em tamanho real.
    Tarefa 2: Etapas 1-5
  7. Selecione todos os três elementos (rótulo, recipiente de botão, anel de foco), clique com o botão direito do mouse e escolha "Criar componente".
  8. componentes figma Clique para ver a imagem em tamanho real.
    Tarefa 2: Etapa 6
  9. Renomeie o componente Button/Primitive/Default .
    • Botão = Tipo de Componente
    • Primitivo = Variação
    • Padrão = Estado

Este é o nosso botão primitivo. Ele não aparecerá em nosso design final, mas funcionará como uma base sobre a qual todas as nossas variações de botões serão construídas. A vantagem? Se precisarmos reprojetar nossos botões no futuro, basta editar em um só lugar.

aplicativo Figma Clique para ver a imagem em tamanho real.
Tarefa 2: Etapa 7

Tarefa 3: Estabeleça uma grade de layout de botão

  1. Selecione Button/Primitive/Default , vá para o painel de design e clique no ícone "+" ao lado de "Layout Grid".
  2. Arquétipo Figma Clique para ver a imagem em tamanho real.
    Tarefa 3: Etapa 1
  3. Em seguida, clique no ícone de grade, selecione "Colunas" e insira os seguintes valores:
    • Contagem de colunas = 1
    • Largura = Automático
    • Calha = 0
    • Tipo = Esticar
  4. "Margem" fornece o preenchimento dentro do contêiner do botão.
    • Lembre-se, precisamos de 24 pixels de preenchimento esquerdo e direito.
    • Também precisamos considerar a borda grossa de 4 pixels e o intervalo de 4 pixels do nosso anel de foco.
    • Isso significa que precisaremos de uma margem de 32 pixels.
  5. Estados do componente Figma Clique para ver a imagem em tamanho real.
    Tarefa 3: Etapas 2-3
  6. Com a margem adicionada, você notará uma área indicadora vermelha que mostra o preenchimento interno do contêiner do botão e se ajusta exatamente à largura da etiqueta.
  7. Desenho Figma Clique para ver a imagem em tamanho real.
    Tarefa 3: Etapa 4

    Agora devemos adicionar restrições de layout a cada elemento do nosso botão.

  8. Selecione todas as três camadas dentro do componente, vá para “Restrições” e fixe-as em “Esquerda e Direita” e “Centro”.
  9. Neste ponto, você pode selecionar o componente e arrastá-lo para qualquer largura que desejar. Você verá que o layout funciona exatamente como foi projetado.
  10. Se você diminuir a largura do botão do que o rótulo, notará que o rótulo quebra para outra linha.
Ferramenta de design Figma Clique para ver a imagem em tamanho real.
Tarefa 3: Etapas 5-7

Tarefa 4: Ajuste a largura do botão para o comprimento do texto

Vamos ver como nosso botão funciona com um rótulo de botão mais longo.

  1. Vá para o painel de ativos, arraste uma nova instância do botão e digite "Agendar compromisso" ou algo mais. O que acontece? O rótulo transborda para a próxima linha - não exatamente o que queremos.
  2. Design de interface Figma Clique para ver a imagem em tamanho real.
    Tarefa 4: Etapa 1
  3. Volte para o painel de camadas, selecione o novo componente que você acabou de arrastar e use as teclas de seta para ajustar a largura para a dimensão exata que se encaixa no rótulo.
  4. Ao fazer isso, você verá que todas as variáveis ​​de layout permanecem conforme o esperado - preenchimento interno, posicionamento da etiqueta, traçado de 4 pixels e intervalo de 4 pixels do anel de foco. (Apague este botão duplicado antes de passar para a Tarefa 5.)

Ao usar uma grade de layout, você pode criar um botão que pode ser usado em todos os seus designs, e tudo o que você precisa fazer é ajustar a largura para qualquer comprimento de etiqueta que você precisar.

Protótipo Figma Clique para ver a imagem em tamanho real.
Tarefa 4: Etapas 2-3

Tarefa 5: Criar estados de foco e foco

Com nosso botão padrão no lugar, vamos criar primitivos de nossos estados de foco e foco.

  1. Desative o anel de foco no padrão do botão.
  2. Segure a tecla Alt e arraste uma nova instância do botão padrão.
  3. Faça o recipiente do botão com uma cor cinza mais clara (#E7E7E7).
  4. Clique com o botão direito do mouse em "Criar componente" e renomeie Button/Primitive/Hover .
  5. Ferramentas de webdesign Clique para ver a imagem em tamanho real.
    Tarefa 5: Etapas 1-4
  6. Arraste outra instância do estado padrão, ative o anel de foco e combine a cor do contêiner do botão com a cor do contêiner do estado de foco (#E7E7E7).
  7. Clique com o botão direito do mouse em "Criar componente" e renomeie Button/Primitive/Focus .

Agora temos uma alça sobre o layout do botão e como ele funciona em diferentes estados. A partir daqui, podemos começar a adicionar temas ou estilos específicos, dependendo do que precisamos.

Design de interface do usuário Figma Clique para ver a imagem em tamanho real.
Tarefa 5: Etapas 5-6

Tarefa 6: Implementar Temas de Botões

Agora, vamos criar variações estilísticas.

  1. Segure a tecla Alt e arraste em outra instância de Button/Primitive/Default .
  2. Altere a cor do contêiner para corresponder à cor do tema desejado (#204ECF).
  3. Torne o rótulo do botão branco (#FFFFFF), ative o anel de foco, altere o traço para a cor do tema desejado (#204ECF) e desative.
  4. Clique com o botão direito do mouse, "Criar componente" e renomeie Button/BrightBlue/Default .
  5. Figma UX Clique para ver a imagem em tamanho real.
    Tarefa 6: Etapas 1-4
  6. Arraste duas instâncias deste novo botão padrão: uma para o estado de foco e outra para o estado de foco.
  7. Altere a cor do contêiner do botão para corresponder à cor do tema desejado (#678FFF), clique com o botão direito do mouse em "Criar componente" e renomeie Button/BrightBlue/Hover .
  8. Aplique a mesma cor ao contêiner do botão de foco, ative o anel de foco, clique com o botão direito do mouse em "Criar componente" e renomeie Button/BrightBlue/Focus .

Você pode usar esse mesmo processo para qualquer número de temas que precisar em seu design.

Figma web design Clique para ver a imagem em tamanho real.
Tarefa 6: Etapas 5-7

Tarefa 7: Contemple a beleza dos componentes Figma

Depois de criar todos os seus temas, reserve um segundo para observar o quão poderoso pode ser trabalhar com componentes.

  1. Selecione seu Button/Primitive/Default , adicione um raio de canto e você verá que todas as instâncias do seu botão são atualizadas automaticamente.
  2. Ferramenta de maqueteClique para ver a imagem em tamanho real.
    Tarefa 7: Etapa 1
  3. Em seguida, vá para o painel de componentes. Todas as instâncias do seu botão estão disponíveis para serem arrastadas para qualquer parte do seu design.
  4. Ferramenta de design on-line Clique para ver a imagem em tamanho real.
    Tarefa 7: Etapas 2
  5. Além disso, como usamos essa convenção de nomenclatura, agora podemos trocar qualquer botão por uma instância/tema alternativo. Para ver isso em ação, arraste uma instância do botão e vá para "Instância" no painel de design, selecione qualquer instância que você precise e ela muda imediatamente.
Ferramentas de design UX Clique para ver a imagem em tamanho real.
Tarefa 7: Etapa 3

Trabalhar dentro da estrutura de componentes nos permite gerenciar nossos botões de forma rápida e eficiente em todas as áreas do nosso design. O melhor de tudo, não funciona apenas com botões, funciona com componentes de interface do usuário de todos os tipos.

• • •

Leia mais no Blog Toptal Design:

  • O poder do Figma como ferramenta de design
  • Figma vs. Sketch vs. Axure – Uma Revisão Baseada em Tarefas
  • Simplifique o design colaborativo com o Figma
  • Design de botões ao longo dos anos - A linha do tempo do Dribbble
  • Tutorial do Framer: 7 microinterações simples para melhorar seus protótipos