Como criar um botão no Figma

2023/08/17

Os botões de design no Figma podem ser criados de diferentes maneiras, utilizando componentes e propriedades de layout automático na plataforma. Dessa forma, os botões podem ser personalizados usando rótulos, tamanhos e ícones. Se você não tem certeza de como criar botões no Figma, você veio ao lugar certo.

Este artigo explicará como criar botões e como tirar o máximo proveito do Figma.

Criando um botão

Botões são elementos comuns usados ao projetar uma interface de usuário funcional. Você pode criar um botão em um design Figma. Se você é novo no Figma, primeiro deve entender o básico.

Aqui está um guia passo a passo para criar botões:

Crie um novo projeto Figma.
Adicione um quadro pressionando a tecla F no teclado e selecione “área de trabalho” ou “telefone”.
Adicione um retângulo com dimensões de 50px de altura e 200px de largura usando a tecla R do teclado.
Adicione texto pressionando “T” no teclado. Centralize o texto para que fique no meio da caixa de texto horizontal e verticalmente.
Coloque esta caixa de texto no meio do seu retângulo.
Agrupe os componentes como quiser.

Você pode adicionar cores criando algumas usando o seletor de cores ou pode acessar cores hexadecimais na Internet.

Contraste

A cor do texto dentro do botão depende se contrasta melhor com um fundo preto ou branco. Você pode usar as duas opções para ver qual funciona melhor. Se você não gostar de nenhuma das opções, poderá ajustar o estilo e a cor do botão.

Criando Botões Básicos

Existem três botões básicos que podem ser criados no Figma.

Botão Primário

Os botões principais são cores sólidas com texto em preto ou branco. Este botão atrai os usuários conforme eles usam um aplicativo. É assim que você pode criar um:

Escolha uma cor para o seu botão.
Escolha o retângulo e aplique a cor selecionada.
Texto colorido em branco ou preto, dependendo do melhor contraste.

Botão Secundário

Geralmente é um botão branco, mas contornado com a cor que você escolher. O texto do botão também pode ter a mesma cor. Este é o segundo botão mais importante que você pode criar. Também deve atrair os olhos do usuário.

Mude a cor do seu retângulo para branco (#FFFFFF).
No retângulo, adicione um traço. Você pode escolher a cor que preferir aqui.
Altere a cor do texto para ter a mesma cor do texto.

Botão Terciário

Os botões terciários não são tão importantes quanto os dois primeiros. Eles podem funcionar como botões de link, cancelamento de assinatura ou voltar. Eles geralmente estão em texto simples e podem ser sublinhados em alguns casos.

Faça seu retângulo branco sem traçado.
Altere a cor do texto para o que você preferir.

Você pode criar um botão terciário semelhante a um botão principal ou secundário. Você também pode alterar a largura do traçado para obter melhor visibilidade.

Criar um botão usando texto, layout automático e cor

Com as ferramentas da plataforma, você pode obter experiência prática usando a Ferramenta Auto Layout and Text. Com orientação passo a passo, criar um botão deve ser relativamente simples de conseguir. Para criar um botão, você precisa criar sua camada de texto, converter sua camada de texto em um quadro de layout automático e estilizar seu botão.

Criando uma camada de texto

Nesta etapa, a ferramenta de texto é usada.

Tocar na ferramenta de texto na barra de ferramentas ou pressionar a letra “T.”
Quando a ferramenta Texto estiver ativa, toque na tela e digite a palavra “Botão”. Observe que o nome da camada de texto corresponderá ao que for digitado na tela, a menos que seja alterado manualmente no painel de camadas.
Se o nome da camada precisar ser alterado, clique duas vezes na barra lateral esquerda e digite o novo nome escolhido.

Agora, você também pode brincar com o tamanho da fonte aumentando ou diminuindo.

Selecione sua camada de texto.
Navegue até a barra lateral direita e altere o tamanho da fonte na seção “Texto”. Você também pode alterar a fonte ou manter a opção padrão.

Converta sua camada de texto em quadros de layout automático

Neste ponto, o botão precisa ser ajustado ainda mais para torná-lo glamoroso. Com o layout automático, você pode apimentar um pouco mais as coisas. O layout automático é um recurso poderoso do Figma e pode ser aplicado para designs responsivos. Esses designs se adaptam automaticamente a alterações como tamanho do conteúdo, posicionamento do objeto e tipo de dispositivo.

O layout automático pode ser aplicado para transformar camadas em molduras ou em molduras existentes. Para aplicar o layout a um quadro existente, selecione sua camada de texto e pressione o atalho “Shift” “A”. Depois que o layout for aplicado, você notará algumas alterações.

A camada de texto estará dentro de um quadro. O layout automático é aplicado apenas a componentes e quadros, então o Figma coloca a camada de texto dentro do novo quadro automaticamente. A moldura não tem uma cor de preenchimento. Isso é aplicado na etapa de estilização do botão.
Ao selecionar seu porta-retratos, as configurações de layout automático são exibidas na barra lateral direita. Os layouts automáticos podem ser ajustados ainda mais.
Você percebe que o quadro encolhe e cresce com as alterações de texto. Com esses elementos dinâmicos, você economiza tempo gasto para projetar o conteúdo visualizado em vários dispositivos ou traduzido para outros idiomas.

Estilizando o botão

Você pode começar adicionando cor.

Escolha uma camada de quadro e escolha “Configurações de preenchimento” na barra lateral direita. Isso preenche a cor
automaticamente. O seletor de cores altera a cor.
Selecione a camada de texto e ajuste o preenchimento para #FFFFFF.
Escolha o quadro novamente e use a configuração da barra lateral direita para ajustar o raio do canto.

A próxima coisa é consertar o preenchimento do quadro. Depois que o texto da letra é convertido em um layout de quadro automático, um preenchimento é adicionado automaticamente entre o texto e o limite do quadro. O preenchimento neste ponto parece igual em todos os lados. Você pode alterar o preenchimento inferior e superior para serem menores do que o preenchimento direito e esquerdo.

Você pode atualizar o preenchimento como quiser. O preenchimento esquerdo e direito ou o preenchimento superior e inferior podem ser alterados ao mesmo tempo com os atalhos abaixo:

Segure <⌥ Option> ou <Alt> e clique na área de preenchimento para inserir o valor de preenchimento para os lados opostos
Segure <⌥ Option> ou <Alt> enquanto arrasta as alças para alterar o preenchimento dos lados opostos

Neste ponto, o botão parece bom, mas você ainda pode atualizar o rótulo. Você precisa clicar duas vezes no texto para permitir a edição. Digite as palavras “Inscreva-se”. O botão é redimensionado conforme você digita. É assim que você cria um botão usando a ferramenta de layout e texto automático. Agora você pode tentar algo novo, como transformar o botão em um componente ou adicionar uma variante.

Fazendo um botão clicável

Figma é usado por empresas como Uber, Facebook, Google e Netflix. O recurso de botão clicável torna mais fácil para os designers dessas empresas criar botões interativos e clicáveis. Os botões facilitam muito a navegação nessas plataformas.

Veja como desenvolver esses botões no Figma:

Escolha a opção “Protótipo” no menu (à direita).
Clique no ícone “Mais” (+) localizado abaixo da guia Protótipo. Isso permite que você adicione uma interação.
Escolha “Ao clicar” na janela de detalhes da interação.
Selecione a opção “Abrir link”.
Adicione o link da página para onde o botão irá direcionar uma vez clicado.
Toque no ícone “X” para sair da janela de detalhes da interação.
Navegue até o botão de opção “Play” no canto superior direito.
Toque no botão “Reproduzir” para obter uma visualização do design.

Se você passar o cursor sobre o botão, ele mudará para um ícone semelhante a uma mão. Isso indica que o botão agora pode ser clicado.

Observação: ao criar o botão Figma clicável, sempre use “Ao clicar” e não “Ao arrastar”. “Ao clicar” permite adicionar um link clicável ao botão possível. Os botões “Ao arrastar” não podem ser clicados.

Projete melhor com os botões Figma

Os botões do Figma têm variáveis como tema, estado, preenchimento interno, comprimento da tabela, largura e altura. Ao aprender como criar botões na plataforma, você pode tirar o máximo proveito do Figma e agregar valor usando componentes dentro da biblioteca Figma.

Você já tentou criar botões no Figma? Se sim, como foi sua experiência? Deixe-nos saber na seção de comentários abaixo.