Como criar um botão no Figma

Por Lee StantonLee Stanton Autor Lee Stanton é um escritor versátil com foco no cenário de software, abrangendo aplicativos móveis e de desktop, bem como tecnologias on-line. Leia mais• Editado por Evan GowerEvan Gower Editor Com mais de uma década de experiência em publicação digital. Evan lidera nossa equipe com um olhar atento às tendências tecnológicas emergentes. Leia mais17 de agosto de 2023

Os botões de design no Figma podem ser criados de diferentes maneiras, utilizando propriedades de componentes e 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 aproveitar ao máximo o Figma.

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:

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

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

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

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

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.

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 inscrição ou voltar. Eles geralmente estão em texto simples e podem ser sublinhados em alguns casos.

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

Com as ferramentas da plataforma, você pode obter experiência prática usando Auto Layout e Text Tool. 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, convertê-la em um quadro de layout automático e estilizar seu botão.

Nesta etapa, a ferramenta de texto é usada.

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

Neste ponto, o botão precisa ser ajustado ainda mais para parecer 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 mudanças como tamanho do conteúdo, posicionamento de objetos e tipo de dispositivo.

O layout automático pode ser aplicado para transformar camadas em quadros ou em quadros 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.

Você pode começar adicionando cor.

O próximo passo é consertar o preenchimento da moldura. Depois que o texto da carta é 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 ser menor que o preenchimento direito e esquerdo.

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

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 automático e texto. Agora você pode tentar algo novo, como transformar o botão em um componente ou adicionar uma variante.