Como criar um botão no Adobe XD

Aqui, você é direcionado pelas etapas para criar um botão simples com um preenchimento sólido e algum texto no Adobe XD. Siga estas etapas simples.

Selecione a ferramenta Retângulo e clique e arraste para criar um retângulo de qualquer tamanho em uma prancheta.
Neste exemplo, o modelo padrão do iPhone 6 está selecionado.

Com o retângulo ainda ativo, digite 200 na caixa de texto Largura e 70 na caixa de texto Altura. Pressione Tab após digitar cada um para confirmar o valor.

Aplicando um preenchimento sólido

Aqui, você adiciona uma cor de preenchimento sólida à sua forma:

Certifique-se de que seu retângulo ainda esteja selecionado. Clique na caixa branca à esquerda de Preencher no painel Propriedades para abrir o seletor de cores.

Percorra as cores clicando e arrastando o controle deslizante Matiz. Depois de inserir a cor de matiz desejada, clique em uma cor no painel de cores para aplicá-la ao retângulo.

Você pode salvar cores que pode usar com frequência clicando no sinal de mais Salvar amostra de cor na parte inferior do seletor de cores.

Você pode aplicar transparência ao seu preenchimento usando o controle deslizante no lado direito da janela do seletor de cores.

Desmarque a caixa de seleção à esquerda de Borda para remover o traço ao redor do retângulo.

Aplique uma cor com o seletor de cores. Salve uma cor clicando no sinal Salvar amostra de cor +.

Arredondando seus cantos

Você pode deixar os cantos quadrados ou seguir qualquer uma das próximas etapas para arredondar os cantos da forma:

• Você pode arredondar os cantos visualmente clicando e arrastando os widgets de canto dentro dos cantos dos retângulos.

  Clique e arraste os widgets de canto para arredondar seus cantos.

Mantenha pressionada a tecla Alt (Windows) ou Option (Mac OS) e arraste um raio de canto para torná-lo um valor independente.

• Você também pode inserir valores para o seu raio de canto inserindo valores nas caixas de texto Rádios de canto no painel Propriedades.

  Insira valores no painel Propriedades para adicionar tamanhos variados no raio do canto.

Adicionando texto ao seu botão

Agora você adiciona o texto ao botão:

Selecione a ferramenta Tipo no painel Ferramentas e clique dentro do botão. Um cursor de texto é exibido. Não se preocupe com o posicionamento exato da caixa de texto porque ela pode ser movida posteriormente.

Digite a palavra Enviar e selecione o texto pressionando Ctrl + A (Windows) ou Command + A (Mac).

Com a palavra selecionada, altere as propriedades na área Texto do painel Propriedades para selecionar uma fonte e um tamanho de tipo de sua preferência. Você também pode alterar o alinhamento selecionando os botões Alinhar à esquerda, Centralizar ou Alinhar à direita.

Você pode selecionar o tamanho da fonte atual na caixa de texto Tamanho da fonte e pressionar a seta para cima ou para baixo para aumentar ou diminuir o tamanho da fonte.

Clique na caixa Preencher para alterar a cor do seu texto.

Selecione suas propriedades de tipo usando a seção Texto no painel Propriedades.