Crear botones adaptativos con formas combinadas en croquis

Nota: Con Sketch 58, este método ya no es necesario. Consulte mi nuevo artículo sobre cómo crear fácilmente botones adaptativos con el diseño inteligente de Sketch.
El problema que estamos resolviendo es que las formas no responden al texto de anulación.

Si alguna vez ha intentado crear botones dentro de un símbolo de Sketch, rápidamente se dio cuenta de las limitaciones. Los botones sólidos y los botones contorneados no responden a la longitud del texto de anulación. Es probable que tenga que hacer concesiones, crear botones de ancho fijo o tener que ser creativo con el texto del botón para que se ajuste al botón de ancho fijo.

Esta es la primera de dos publicaciones que muestran diferentes métodos para crear botones adaptativos que se pueden anidar en otros símbolos.

Presentación del método de forma combinada

Utilizando el poder de las formas combinadas, este tutorial le mostrará cómo crear un botón y grupos de botones que se adapten a la longitud del texto anulado. Estos botones se pueden usar solos y se pueden anidar en otros símbolos.

Este tutorial muestra cómo crear botones adaptables que se pueden anidar en símbolos.
⬇︎ Descargar Sketch File

Este método se puede usar para crear múltiples combinaciones de estilos de botones, nos centraremos en crear un botón sólido y un botón de solo texto para este tutorial.

Este método también se puede utilizar para crear cualquier combinación de estilo de botón.

Cómo funciona este método

Este método combina todo en una sola forma. Si está familiarizado con las formas, se dará cuenta rápidamente de los inconvenientes de este método. Algunas capas se restarán de otras, como el texto. Cualquier cosa detrás del botón aparece donde está el texto. Además, solo se puede aplicar un color a toda la forma.

Use esta técnica si:

  • Solo se necesita un color para todos los botones
  • El color sólido del texto del botón y el color de la superficie de los padres es el mismo

No use esta técnica si:

  • El botón sólido necesita una sombra paralela; si uno se aplica aquí, aparecerá detrás del texto.
  • Se necesitan diferentes colores para los botones o el contorno del botón

¿Necesita la capacidad de tener diferentes botones de color, color de texto o una sombra paralela en el botón? Mira la publicación sobre un método más avanzado:

Ya es suficiente, ¡muéstrame cómo!

Este tutorial asume que tienes algo de experiencia con la creación de formas combinadas en Sketch, pero esperamos que esté escrito para que cualquiera pueda seguirlo.

Crearemos botones alineados a la derecha. Los botones alineados a la izquierda se pueden crear haciendo lo inverso.

Consejo: para que el botón responda a la longitud de texto anulada, utilizaremos el método descrito en: Crear un símbolo de boceto adaptativo para el campo de texto contorneado del diseño de material

Crea el símbolo

Se puede usar cualquier tamaño de tablero de arte, crearemos un tablero de arte lo suficientemente grande como para contener un botón Aceptar sólido y un botón Cancelar solo de texto.

  • Nombre del símbolo: fila de botones: sólido y texto / alineado a la derecha
  • Ancho: 140
  • Altura: 36

Agregar la capa superficial

Como no conocemos la longitud máxima del botón, le daremos a la capa superficial una longitud ridícula. Se revelará a medida que aumente la longitud del texto de anulación. Este también es el lado derecho del botón, por lo que las esquinas correctas se redondearán.

Agregue una nueva forma de rectángulo:

  • Nombre de la capa: superficie
  • Ancho: 500
  • Altura: 36
  • X: -360
  • Radio: 0; 4; 4; 0 (para las esquinas redondeadas del lado derecho)
  • Color: 6200EE (o cualquier color)
Sugerencia: si crea un estilo de capa, podrá cambiar el color del botón cuando esté anidado en un símbolo.

Agregar texto para el botón sólido

Para alinear el botón a la derecha, lo fijaremos a la derecha de la mesa de trabajo. La anulación de texto empujará todo hacia la izquierda, a medida que crezca.

Agregue una capa de texto sobre la capa de superficie:

  • Nombre de capa: Texto de botón sólido (este será el nombre en la anulación)
  • Pin a borde: derecha
  • Tamaño fijo: altura
  • Fuente: Roboto
  • Talla: 14
  • Peso: regular
  • Línea: 36
  • Alineamiento: derecho
  • Transformación de texto: mayúscula (opcional)
  • Texto: OK
Consejo: El secreto de este método es la altura de la línea. La anulación de texto solo empuja las capas vecinas que tienen la misma altura o menos que el texto y no se superponen La altura de línea se usa para aumentar la altura del texto. Consulte esta publicación para obtener más información sobre el texto adaptable.

Combina capas de superficie y texto en una forma

Crea una forma combinada:

  • Seleccione ambas capas y haga clic en Restar en la barra de herramientas o en el menú: Capa> Combinar> Restar.
  • Cambiar el nombre de la capa a Máscara de superficie
  • Cambie el nombre de la capa a Color de botón. Esta será la etiqueta del menú de anulación para cambiar el color del botón.

Agregar la capa de máscara de superficie

Necesitamos "enmascarar" la capa de superficie para que solo aparezca a medida que la capa de texto crece en longitud. La capa de máscara debe ser la longitud de la capa de Superficie, menos el ancho de la capa de texto (19px) y el espacio desde el texto hasta el final del tablero de arte (16px).

La capa de máscara deberá colocarse antes de la capa de texto y no superponerse. De lo contrario, la capa de máscara no se moverá cuando se ingrese el texto de anulación.

Sobre el Texto del botón sólido en la forma combinada, agregue una capa rectangular.

  • Nombre de la capa: máscara de superficie
  • Ancho: 465
  • Altura: 36
  • X: -360
  • Método combinado: restar

Pon a prueba tu progreso

Agregue el símbolo a la página y agregue texto en la anulación de Texto de botón sólido. El texto de anulación debe mover la capa de máscara de superficie, revelando más del color de la máscara de superficie.

Debería parecer que el botón se está adaptando a la longitud del texto.

Completa el botón sólido

Necesitamos "cortar" parte de la máscara de superficie. Se utilizará un rectángulo de forma fija con dos esquinas redondeadas. Al igual que la Máscara de superficie, se moverá con el texto de anulación.

Sobre la máscara de superficie, agregue una nueva capa rectangular:

  • Nombre de la capa: recorte izquierdo
  • X: 89 (Nota: no debe superponerse a la capa superficial.
  • Ancho: 16
  • Altura: 36
  • Radio: 4; 0; 0; 4
  • Tamaño fijo: horizontal

Pon a prueba tu progreso

Al igual que antes, pruebe su progreso agregando el símbolo a la página e ingresando texto en el menú de anulación. La capa Recorte izquierda debe moverse a medida que se ingresa el texto de anulación. Tampoco debe cambiar de forma a medida que se cambia el tamaño del símbolo.

Agregar botón de solo texto

¡Menos mal! Complete el grupo de botones agregando un botón de solo texto.

Añadir una capa de texto:

  • Nombre de la capa: Botón de texto (este será el nombre en la anulación)
  • Tamaño fijo: altura
  • Fuente: Roboto
  • Talla: 14
  • Peso: regular
  • Línea: 36
  • Alineamiento: derecho
  • Transformación de texto: mayúscula (opcional)
  • Texto: Cancelar

¡Hecho!

Ahora debería tener un símbolo con botones sólidos y de solo texto que se puedan usar solos o anidados en otros sistemas y aún responder al texto de anulación.

Si utilizó estilos de capa anteriormente, puede cambiar el color de los botones mediante la anulación de Color del botón, incluso cuando está anidado dentro de otros símbolos.

¿Qué puedes hacer con este método?

Como se mencionó anteriormente, este método puede usarse para crear tantas variaciones y combinaciones de texto adaptable. ¡Déjame saber lo que creas usando esta técnica!

Este método también se puede utilizar para crear cualquier combinación de estilo de botón.
⬇︎ Descargar Sketch File

También te pueden gustar mis artículos relacionados: