Fuente: Material.io

Cree un símbolo de boceto adaptativo para el campo de texto contorneado del diseño de material

Al ayudar a los diseñadores a adherirse a un sistema de diseño con croquis, mostré un símbolo adaptativo para el campo de texto del diseño de materiales que creé. El símbolo se adapta a la longitud del texto de anulación para la etiqueta y la entrada.

Al final de este tutorial, habrá creado un cuadro de entrada resumido adaptable y redimensionable.
Este artículo responde a quienes preguntan cómo hice este símbolo. En lugar de solo explicar cómo hacerlo, intento explicar por qué funciona; paso a paso.
⬇Descargue el archivo de croquis

La técnica de Google frente a esta técnica

Google lanzó su increíble plugin Sketch Theme Editor para crear sus propios símbolos temáticos de Material. Sin embargo, su utilidad está limitada por cómo se hace.

El símbolo de Google de su editor Sketch Theme no se adapta al texto de anulación.

Al momento de escribir esto, todo el texto son símbolos. Esto evita que los elementos vecinos se muevan a medida que cambia la longitud del texto de anulación. El resultado es que solo se pueden ingresar cuatro caracteres en la etiqueta y el cursor tampoco se mueve con el texto de anulación. Se coloca una forma, usando el color de superficie predefinido, encima del borde superior para que parezca un recorte para la etiqueta. Esto solo funciona si el fondo usa el mismo color de superficie que la forma superpuesta; de lo contrario, es visible.

Por el contrario, la técnica descrita en este artículo muestra cómo crear el mismo símbolo, pero es realmente adaptable para anular el texto y tiene un recorte real de la etiqueta, lo que permite colocarlo en cualquier fondo. Estas técnicas se pueden aplicar para crear una multitud de símbolos adaptables.

Paso 1: configuración

  1. Cree un símbolo con las dimensiones 328x56
  2. Déle una etiqueta significativa, como Outline Text Field Active

Paso 2: crea el borde

El borde no es una forma cerrada. Para lograr esto, restaremos una forma de esta en un paso futuro. Entonces, la opción de borde estándar no funcionará aquí. Usaremos una técnica diferente.

Material Design utiliza un radio de borde de 4 píxeles para los campos de entrada y un borde de 2 píxeles para el estado activo. Se restarán dos formas para crear el borde. Para mantener el grosor del borde consistente al cambiar el tamaño, la forma interna se fijará a todos los lados.

Agrega el rectángulo exterior

  • Nombre de etiqueta: Borde
  • Ancho: 328; Altura: 56
  • Color: # 6200EE (o cualquiera)
  • Radio: 4

Agrega el rectángulo interno

  • Nombre de etiqueta: recorte de superficie
  • Ancho: 324; Altura: 52
  • Radio: 2
  • X: 2; Y: 2
  • Pin: todos los lados

Restar formas

Restar recorte de superficie de la capa de borde crea una forma. Renombrar a Recorte de superficie.

El grosor y el radio del borde no cambian al cambiar el tamaño.

Pon a prueba tu progreso

Debería poder cambiar el tamaño del símbolo sin que cambie el grosor del borde o el radio de la esquina. Si lo hacen, asegúrese de que la capa de corte de la superficie esté fijada en todos los lados.

Paso 3: agregue el recorte de etiqueta

Para hacer la etiqueta adaptable y el borde superior, se debe crear un recorte en la parte superior. Siempre debe ser de 11 píxeles desde los lados, independientemente de las dimensiones del símbolo. Se usará una máscara para lograr esto y tendrá una altura fija y se fijará para que se adapte a las dimensiones del símbolo.

Siguiendo la técnica en el Paso 2, cree un rectángulo con las siguientes especificaciones y reste de la forma del borde:

  • Nombre de etiqueta: recorte de etiqueta
  • Ancho: 306; Altura: 2
  • X: 11; Y: 0
  • Altura fija
  • Pin: izquierda, superior, derecha

Pon a prueba tu progreso

Debe poder cambiar el tamaño de la forma y la máscara superior debe permanecer en su lugar.

Paso 4: Agregar etiqueta y borde superior

Ahora podemos agregar la etiqueta y el borde adaptables en el recorte que hicimos en el paso anterior. A medida que aumenta la longitud del texto, empujará el borde superior.

Cómo funciona el texto adaptable

Antes de continuar, debemos entender cómo funciona el texto adaptable en Sketch. A medida que se ingresa texto en un menú de anulación, se empuja el elemento adyacente para mantener la distancia igual entre los dos. Esto solo ocurre si la alineación del texto se establece en automático y la altura de la forma adyacente es igual o menor que la altura del elemento de texto. Consulte Elementos de texto adaptables para obtener más detalles.

El círculo se mueve porque su altura es menor que la altura del texto.El círculo no se mueve porque su altura es mayor que la altura del texto.

Agregar la capa de texto para la etiqueta

Para empujar elementos vecinos, la capa de texto no puede tener un ancho fijo. Al fijar la etiqueta y el borde superior los mantendrá en su lugar, incluso cuando se cambia el tamaño del símbolo. La alineación de la etiqueta debe establecerse en automática para empujar el borde superior.

  • Nombre de etiqueta: Etiqueta
  • X: 16; Y: -9
  • Pin: izquierda y arriba
  • Color: # 6200EE (o cualquiera)

Agrega el borde superior

El borde superior se separa del resto de la forma para que el texto pueda moverlo. El ancho del borde superior responde al ancho de la etiqueta. La dimensión del borde superior debe responder al ancho del símbolo y mantener la misma distancia del texto de anulación y el borde del símbolo. Como actualmente esto no es posible en Sketch, vamos a fingirlo.

Al igual que el campo de texto, el borde superior debe permanecer en la parte superior del símbolo cuando se cambia el tamaño. También debe responder a la longitud del texto de anulación para Etiqueta. Como no sabemos la longitud máxima a la que se cambiará el tamaño de este símbolo, vamos a darle al borde superior una longitud ridícula y ocultar la longitud adicional en el siguiente paso.

  • Nombre de la capa: borde superior
  • X: 56; Y: 0
  • Pin: superior
  • Altura fija
  • Color: # 6200EE (o cualquiera)

Pon a prueba tu progreso

La distancia entre la etiqueta y el borde superior debe ser coherente cuando se ingresa texto en el menú de anulación.

El texto empuja el borde superior.

Paso 5: Ocultar el desbordamiento del borde superior

Se usará una máscara para ocultar la longitud adicional del borde superior. Abarcará la etiqueta y el borde superior. La máscara tendrá el mismo ancho que el recorte de etiqueta del paso 3 y la misma altura que la capa de etiqueta.

la máscara oculta una longitud adicional del borde superior.
  • Agregue un nuevo rectángulo debajo de la capa del borde superior
  • Etiqueta: máscara de borde superior
  • X: 11; Y: -9
  • Pin: izquierda, superior, derecha
  • Altura fija
  • Color de relleno: ninguno
  • Color del borde: ninguno

Paso 6: Agregar texto de entrada y cursor adaptativo

El cursor también debe moverse a medida que se ingresa el texto de anulación para el campo de entrada.

Agregar capa de texto de entrada

Agregue una capa de texto como la última capa en el símbolo.

  • Etiqueta: texto de entrada
  • X: 16; Y: 16
  • Pin: izquierda, superior y derecha
  • Alineación: Auto, izquierda

Agrega el cursor

Agregue una forma de rectángulo como la última capa en el símbolo.

  • Ancho: 1; Altura: 17
  • X: 85; Y: 20
  • Pin: superior
  • Ancho fijo; Altura fija

¡Lo hiciste!

Felicitaciones, si llegaste hasta aquí, tu símbolo debería verse a continuación. Ha creado un símbolo avanzado que se adapta para anular el texto y puede cambiar su tamaño.

Su símbolo debería verse así.

Estas técnicas se pueden utilizar para crear símbolos muy robustos, incluso con texto alineado a la derecha. Como el borde es una forma, incluso puede usarse como una máscara para permitir la opción de cambiar el color del borde.

⬇︎Descargue el archivo de boceto.

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