Criar botões adaptativos avançados usando camadas no esboço

Travis Folck Blocked Unblock Seguir Seguindo 7 de janeiro

Este é o segundo método para criar botões adaptativos no Sketch. Certifique-se de verificar o primeiro método: Criar botões adaptativos usando formas combinadas no esboço .

Esse método permite criar botões adaptáveis com uma sombra projetada, capacidade de alterar a cor da superfície dos botões e a cor do texto; mesmo quando aninhado em outros símbolos.

Este método permite botões sólidos adaptativos com sombra opcional

?? Baixar arquivo de esboço

Como mencionado no artigo Combined Shapes , os símbolos não respondem ao tamanho do texto. Assim, as dimensões do botão sólido não se adaptam ao tamanho do texto de substituição. Vamos consertar isso.

Apresentando o método de camada

Este artigo pode ser usado para criar uma combinação de vários estilos de botões. Vamos nos concentrar em criar uma linha de botões. Para máxima flexibilidade, criaremos dois símbolos: um com uma sombra e outro sem.

Como esse método funciona

Esse método usa algumas técnicas do artigo anterior, mas usa camadas em vez disso, permitindo a capacidade de aplicar cores diferentes à superfície do botão e aos rótulos.

Esse método usa uma camada para ocultar a cor da superfície do botão sólido. A camada é da mesma cor que a superfície em que os botões são redimensionados.

Instruções passo a passo

Este tutorial parece bastante longo, mas deve ser rápido. Supõe-se que você tenha alguma experiência com as camadas do Sketch e crie formas combinadas. Se você encontrar este método muito difícil, por favor, verifique o meu outro post para um método mais simples para a criação de botões adaptativos .

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/Left Aligned — No Shadow
  • 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 esquerdo do botão, portanto os cantos esquerdos serão arredondados.

Adicione uma nova forma de retângulo:

  • Nome da camada : Solid Button Color
  • Largura : 500
  • Altura : 36
  • Raio : 4;0;0;4 (para os cantos arredondados do lado esquerdo)
  • Cor : 2E73E7 (ou alguma 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

A substituição de texto vai empurrar tudo para a direita, à medida que cresce. Ao contrário do método de forma combinada, podemos aplicar estilos ao texto do botão sólido.

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 : left
  • Tamanho fixo : Height
  • Fonte : Roboto
  • Tamanho : 14
  • Peso : Medium
  • Cor : White, 87% opacity
  • Linha : 36
  • Alinhamento : Right
  • Transformação de texto : Upper case (opcional)
  • Texto : OK

Sugestão : o texto de sobreposição irá empurrar as camadas vizinhas, revelando a cor da superfície à medida que o comprimento do texto aumenta. A altura da linha é usada para aumentar a altura do texto. Confira este post para mais informações sobre texto adaptável.

Adicione a camada de superposição de superfície

Precisamos esconder a camada de superfície para que ela apareça somente à medida que o texto de substituição do botão aumenta. Essa camada precisará ter a mesma cor da camada na qual os botões ficarão. A camada precisará ser iniciada imediatamente após a camada de texto e cobrirá o restante da camada Solid Button Color .

Adicione uma camada retangular:

  • Nome : Solid Button Overlay
  • X : 42 (imediatamente após a camada de texto)
  • Largura : 458
  • Altura : 36

Dica : para flexibilidade máxima, considere aplicar um estilo de camada a essa camada. Isto permitirá que você mude a cor para combinar a cor atrás do botão.

Complete o botão sólido

Precisamos recortar a Solid Button Overlay Vamos criar uma nova camada de tamanho fixo com dois cantos arredondados e, em seguida, subtrai-lo da camada de Solid Button Overlay .

Acima do Solid Button Overlay , adicione uma nova camada de retângulo:

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

Combine formas

Usando o método Subtrair, combine a camada de Cutout e a camada de Solid Button Overlay .

  • Nome da camada de forma combinada : Solid Button Overlay
  • Tamanho fixo : horizontal

Teste seu progresso

Adicione seu símbolo à página e digite o campo de texto de substituição. O texto deve empurrar a camada Surface Button Overlay , revelando a camada Solid Button Color .

Se você usou um estilo de camada para a cor, a cor da superfície do botão também pode ser alterada na camada Solid Button Color .

Adicione o botão de texto

Complete o grupo de botões adicionando um botão somente texto ao símbolo.

  • Nome da camada : Text Button Text
  • Tamanho fixo : Height
  • Fonte : Roboto
  • Tamanho : 14
  • Peso : Medium
  • Cor : Black, 87% opacity
  • Linha : 36
  • Alinhamento : Left
  • Transformação de texto : Upper case (opcional)
  • Texto : Cancel

Adicione a máscara

Você pode ter notado que a camada Solid Button Overlay estende além da placa de arte, vamos corrigir isso agora.

Adicione uma nova camada de retângulo como a última camada e dê as dimensões da placa de arte:

  • Nome da camada : Button Row Mask
  • Largura : 140
  • Altura : 36
  • Pin : all sides

Teste seu progresso

Experimente o seu símbolo de linha de botão. O botão sólido deve adaptar o comprimento do texto de substituição.