Crie botões adaptativos usando formas combinadas no esboço

Travis Folck Blocked Unblock Seguir Seguindo 16 de dezembro de 2018 O problema que estamos resolvendo, as formas não respondem ao texto de substituição.

Se você já tentou criar botões dentro de um símbolo Sketch, percebeu rapidamente as limitações. Botões sólidos e botões destacados não respondem ao comprimento do texto de substituição. É provável que você tenha de fazer trocas, criar botões de largura fixa ou ter que ser criativo com o texto do botão para ajustá-lo ao botão de largura fixa.

Este é o primeiro de dois posts mostrando diferentes métodos para criar botões adaptáveis que podem ser aninhados em outros símbolos.

Apresentando o método de forma combinada

Usando o poder das formas combinadas, este tutorial mostrará a você como criar um botão e grupos de botões que se adaptam ao comprimento do texto de substituição. Esses botões podem ser usados sozinhos e podem ser aninhados em outros símbolos.

Este tutorial mostra como criar botões adaptáveis que podem ser aninhados em símbolos.

?? Baixar arquivo de esboço

Este método pode ser usado para criar várias combinações de estilo de botão, nós estaremos focando na criação de um botão sólido e um botão somente texto para este tutorial.

Este método também pode ser usado para criar qualquer combinação de estilo de botão.

Como esse método funciona

Este método combina tudo em uma única forma. Se você estiver familiarizado com formas, perceberá rapidamente as desvantagens desse método. Algumas camadas serão subtraídas de outras, como o texto. Qualquer coisa atrás do botão aparece onde o texto está. Além disso, apenas uma cor pode ser aplicada à forma inteira.

Use esta técnica se:

  • Apenas uma cor é necessária para todos os botões
  • A cor do texto do botão sólido e a cor da superfície do pai são as mesmas

Não use esta técnica se:

  • O botão sólido precisa de uma sombra projetada; se uma for aplicada aqui, aparecerá atrás do texto.
  • Cores diferentes são necessárias para os botões ou o contorno dos botões

Sugestão : Escreverei outro artigo para mostrar outra técnica que permita sombras e botões com cores diferentes.

Já chega, mostra-me como!

Este tutorial pressupõe que você tenha alguma experiência com a criação de formas combinadas no Sketch, mas que, espera-se, seja escrito para que qualquer pessoa possa segui-lo.

Nós estaremos criando botões alinhados à direita. Botões alinhados à esquerda podem ser criados fazendo o inverso.

Dica : para que o botão responda ao tamanho do texto de substituição, usaremos o método descrito em: Criar um símbolo de esboço adaptativo para o campo de texto delineado do material design .

Crie o símbolo

Qualquer tamanho de quadro de arte pode ser usado, criaremos uma placa de arte grande o suficiente para manter um botão OK sólido e um botão Cancelar somente texto.

  • Nome do símbolo : Button Row — Solid and Text / Right Aligned
  • Largura : 140
  • Altura : 36

Adicione a camada de superfície

Como não sabemos o comprimento máximo do botão, vamos dar uma camada ridícula à camada de superfície. Será revelado à medida que o tamanho do texto de substituição aumenta. Este também é o lado direito do botão, portanto os cantos direitos serão arredondados.

Adicione uma nova forma de retângulo:

  • Nome da camada : Surface
  • Largura : 500
  • Altura : 36
  • X : -360
  • Raio : 0;4;4;0 (para os cantos arredondados do lado direito)
  • Cor : 6200EE (ou qualquer cor)

Dica : Se você criar um estilo de camada, poderá alterar a cor do botão quando estiver aninhado em um símbolo.

Adicione texto para o botão sólido

Para tornar o botão alinhado à direita, vamos fixá-lo à direita da prancheta. A substituição de texto vai empurrar tudo para a esquerda, à medida que cresce.

Adicione uma camada de texto acima da camada de superfície:

  • Nome da camada : Solid Button Text (este será o nome na substituição)
  • Pino para a borda : right
  • Tamanho fixo : Height
  • Fonte : Roboto
  • Tamanho : 14
  • Peso : Regular
  • Linha : 36
  • Alinhamento : Right
  • Transformação de texto : Upper case (opcional)
  • Texto : OK

Dica : O segredo deste método é a altura da linha. Substituir texto apenas empurra camadas vizinhas que são da mesma altura ou menores que o texto e não se sobrepõem. A altura da linha é usada para aumentar a altura do texto. Confira este post para mais informações sobre texto adaptável.

Combine camadas de superfície e texto em uma forma

Crie uma forma combinada:

  • Selecione as duas camadas e clique em Subtract na barra de ferramentas ou no menu: Layer > Combine > Subtract .
  • Renomeie a camada para Surface Mask
  • Renomeie a camada para Button Color . Este será o rótulo do menu de substituição para alterar a cor do botão.

Adicione a camada de máscara de superfície

Precisamos "mascarar" a camada de superfície para que ela apareça apenas à medida que a camada de texto cresce em tamanho. A camada de máscara precisa ser o comprimento da camada de Surface , menos a largura da camada de texto ( 19px ) e espaçamento do texto até o final da placa de arte ( 16px ).

A camada de máscara precisará ser colocada antes da camada de texto e não se sobrepor a ela. Caso contrário, a camada de máscara não se moverá quando o texto de substituição for inserido.

Acima do Solid Button Text na forma combinada, adicione uma camada de retângulo.

  • Nome da camada : Surface Mask
  • Largura : 465
  • Altura : 36
  • X : -360
  • Método de Combinação : Subtract

Teste seu progresso

Adicione o símbolo à página e adicione texto na substituição de Solid Button Text . O texto de substituição deve mover a camada Surface Mask , revelando mais da cor da Surface Mask .

Deve parecer que o botão está se adaptando ao tamanho do texto.

Complete o botão sólido

Precisamos "cortar" parte da Surface Mask . Um retângulo de forma fixa com dois cantos arredondados será usado. Como a Surface Mask , ela se moverá com o texto de substituição.

Acima de Surface Mask, adicione uma nova camada de retângulo:

  • Nome da camada : Left Cutout
  • X : 89 (Nota: não deve sobrepor a camada de superfície.
  • Largura : 16
  • Altura : 36
  • Raio : 4;0;0;4
  • Tamanho fixo : horizontal

Teste seu progresso

Como antes, teste seu progresso adicionando o símbolo à página e inserindo o texto no menu de substituição. A camada de Left Cutout deve se mover quando o texto de substituição é inserido. Também não deve mudar de forma quando o símbolo é redimensionado.

Adicionar botão somente texto

Ufa, quase pronto! Complete o grupo de botões adicionando um botão somente texto.

Adicione uma camada de texto:

  • Nome da camada : Text Button (este será o nome na substituição)
  • Tamanho fixo : Height
  • Fonte : Roboto
  • Tamanho : 14
  • Peso : Regular
  • Linha : 36
  • Alinhamento : Right
  • Transformação de texto : Upper case (opcional)
  • Texto : Cancel

Feito!

Agora você deve ter um símbolo com botões sólidos e somente texto que podem ser usados sozinhos ou aninhados em outros sistemas e ainda responder ao texto de substituição.

Se você usou os estilos de camada anteriormente, poderá alterar a cor dos botões por meio da substituição da Button Color do Button Color , mesmo quando aninhada em outros símbolos.

O que você pode fazer com esse método?

Como mencionado anteriormente, esse método pode ser usado para criar tantas variações e combinações de texto adaptável. Deixe-me saber o que você cria usando essa técnica!

Este método também pode ser usado para criar qualquer combinação de estilo de botão.

?? Baixar arquivo de esboço