Crie seu primeiro botão – Figma Learn - Central de ajuda

Visão geral do projeto

Produto: Figma Design
Tópicos: Texto, layout automático, cor
Duração: 10 minutos

Neste projeto, vamos criar um botão simples que se redimensiona automaticamente com base no comprimento do rótulo. Os botões são elementos comuns usados no design da interface do usuário e, com este projeto, você vai ganhar experiência prática com a ferramenta Texto e o layout automático.

Para criar nosso botão, vamos fazer o seguinte:

Adicione uma camada de texto
Converta a camada de texto em um quadro de layout automático
Estilize o botão
Transforme o botão em um componente

Se você seguir o passo a passo, o botão final será semelhante ao seguinte:

Um exemplo de imagem do design final do botão.

Adicione uma camada de texto

Começaremos adicionando uma camada de texto.

Ative a ferramenta Texto clicando na ferramenta Texto na barra de ferramentas ou usando o atalho do teclado T.
Clique no canvas e digite Botão para criar a camada de texto.

Na barra lateral esquerda, você notará que o painel Camadas tem uma nova camada de texto chamada "Botão". Clique duas vezes na camada e renomeie-a como Rótulo.

Por que nomear camadas?

A nomeação de camadas no Figma Design é uma prática opcional, mas benéfica. Nomear suas camadas ajuda a organizar seus designs, localizar e modificar camadas mais rapidamente e garantir que os colaboradores possam encontrar o que precisam ao visualizar seu arquivo.

Quando você adiciona uma camada de texto, o nome dela é definido automaticamente como o que você digitou no canvas, até que você a renomeie. Para outros tipos de objetos, os nomes padrão são menos descritivos. Por exemplo, cada quadro que você adiciona ao arquivo de design será chamado de “Quadro 1”, “Quadro 2” e assim por diante.Considere dar nomes descritivos a essas camadas para melhorar seu fluxo de trabalho e a organização dos arquivos.

Para alterar o nome de uma camada, clique duas vezes na camada na barra lateral esquerda e digite um novo nome.

Já que estamos aqui, vamos aumentar o tamanho da fonte na camada de texto. Com a camada de texto selecionada, use a configuração na seção Texto da barra lateral direita para alterar o tamanho da fonte para 16. Continuaremos com a fonte Inter padrão, mas, se quiser, você pode escolher outro estilo de fonte.

Como escolher um tamanho de fonte?

Ao criar experiências digitais, é bom estabelecer uma base para o seu sistema de tipos.

Você pode fazer isso criando uma hierarquia de tipografia, que determina a escala das fontes, da menor para a maior. Comece decidindo o tamanho da fonte do corpo do texto, já que é o que você usará com mais frequência em seus designs. É uma boa prática definir o corpo de texto entre 16px e 18px, dependendo da fonte que você escolher.

16px geralmente é recomendado pela facilidade de criar escalas tipográficas consistentes. O número 16 é facilmente divisível em seções para criar espaçamentos, margens, tamanhos de cabeçalhos harmoniosos, etc.

Lembre-se de que é importante considerar o contexto do design geral ao criar a hierarquia. Por exemplo, se você estivesse projetando botões para uma tela touch screen de um carro, a escala da fonte talvez precisasse ser aumentada para se ajustar a botões com superfícies clicáveis maiores.

Além disso, nem todas as fontes são dimensionadas visualmente para o mesmo tamanho. Se os usuários tiverem dificuldade em ler o corpo do texto, considere aumentar o tamanho ou mudar o estilo da fonte.

Converter a camada de texto em um quadro de layout automático

O visual do nosso botão ainda não está legal, mas vamos usar o layout automático para dar uma apimentada nele.

Você pode aplicar o layout automático a um quadro existente ou usá-lo para transformar uma camada em um quadro. Usaremos a segunda opção. Selecione a camada Rótulo e use o atalho Shift A

Na seção Layout automático da barra lateral direita, verifique se as configurações de redimensionamento horizontal e redimensionamento vertical estão definidas como Ajustar. Clique duas vezes no novo quadro na barra lateral esquerda e altere o nome para Botão.

Por que usar o layout automático?

O layout automático é um dos recursos mais avançados do Figma Design. Você pode usar o layout automático para criar designs responsivos, que ficam ótimos em diferentes tipos de dispositivos e que se adaptam a alterações como o tamanho do conteúdo. Os quadros de layout automático têm propriedades de redimensionamento, que informam ao quadro como se comportar quando as camadas dentro dele são redimensionadas e se ajustam.

Existem duas propriedades de redimensionamento que você pode escolher para um quadro de layout automático:

Largura fixa ou altura fixa: o quadro não será redimensionado, mesmo que suas camadas aninhadas estejam sendo redimensionadas e se ajustando
Envolver conteúdo: o quadro será redimensionado para se ajustar às camadas aninhadas

Como estamos usando a propriedade de redimensionamento Englobar conteúdo, nosso botão será redimensionado de acordo com o comprimento do rótulo. Para testar, clique duas vezes no texto e digite Crie sua conta ou Continuar.

Estilize o botão

Dar um toque colorido

Selecione a camada Botão e clique no sinal de mais na seção Preenchimento da barra lateral direita para adicionar uma cor de preenchimento.
Use o seletor de cores para alterar a cor. Estamos usando o código de cor #33B249.
Selecione a camada Rótulo aninhada dentro da camada do quadro e ajuste o preenchimento para #FFFFFF.

Arredondar os cantos

Selecione a camada Botão .
Na barra lateral direita, defina o Raio do canto para 6.

Por que arredondar os cantos dos botões?

Cantos arredondados podem parecer coisa pequena, mas podem ter um grande impacto na aparência dos designs finais. Os cantos arredondados suavizam a estética do seu design, fazendo com que ele pareça mais amigável e acessível do que objetos com bordas afiadas.

Além da estética, é comum que elementos interativos em interfaces digitais modernas tenham cantos arredondados. Isso significa que é mais provável que os usuários entendam que podem clicar no botão se o design corresponder a outras interfaces que usam.

Corrigir o espaçamento interno

Por fim, vamos consertar o espaçamento interno do quadro. Ao convertermos a camada de texto em um quadro com auto layout, o Figma adicionou automaticamente um preenchimento entre a borda do quadro e o texto interno.No momento, o espaçamento interno é igual em todos os lados. Queremos que o espaçamento interno superior e inferior seja menor do que o espaçamento interno esquerdo e direito.

Selecione a camada Botão .
Passe o cursor sobre o quadro selecionado. As alças que aparecem permitem que você altere o espaçamento interno. Você pode clicar e arrastar a alça para modificar o espaçamento interno ou clicar uma vez na alça e digitar um número na caixa exibida.
Use qualquer um dos métodos para atualizar o espaçamento interno para o seguinte:
- Espaçamento interno superior e inferior:8
- Espaçamento esquerdo e direito: 16

Dica: você pode alterar o espaçamento interno superior e inferior ou o espaçamento interno esquerdo e direito ao mesmo tempo usando os seguintes atalhos:

Segure ⌥ Option (macOS) ou Alt (Windows) e clique no espaçamento interno para inserir o valor para os lados opostos
Mantenha pressionada a tecla ⌥ Option (macOS) ou Alt (Windows) enquanto arrasta as alças para alterar o espaçamento interno de lados opostos

Transforme o botão em um componente

Terminamos o design do nosso botão! Antes de concluir nosso projeto, vamos transformá-lo em um componente para que possamos reutilizá-lo em futuros designs.

Selecione a camada Botão .
Clique em Criar um componente na barra lateral direita.

Agora você pode adicionar instâncias do seu botão na aba Recursos na barra lateral esquerda, para que nunca precise desenhar um botão do zero novamente. Saiba mais sobre o uso de componentes →

Qual a próxima etapa?

Parabéns! Você desenhou um botão responsivo no Figma Design usando layout automático. Procurando seu próximo desafio? Confira nosso projeto Criar um botão interativo para obter mais experiência prática.