Tutoriales de croquis

Dominio del sistema de texto con estilos compartidos

Aprenda a usar y almacenar fuentes de manera efectiva con la aplicación de bocetos para llevar su consistencia tipográfica a un nuevo nivel.

Esto es parte de Frames for Sketch: una serie de tutoriales sobre las mejores prácticas que utilizamos para hacer que la herramienta Kit de marcos sea realmente útil. Cubriremos cómo mantener su tipografía consistente en diferentes proyectos para que los estilos de texto compartidos se mantengan limpios y útiles para que pueda trabajar.

¡Hola! Volvemos a usted con otro tutorial para que pueda aprender algo nuevo sobre el uso de las fuentes en nuestra aplicación favorita. No hace mucho, Sketch nos presentó un nuevo menú de administración de estilo de texto, echemos un vistazo breve y veamos cómo podemos usarlo para mantener un sistema de tipografía accesible y armonioso que incluya 2 tipos de letra separados.

Estilos de texto con una jerarquía fuerte

Es posible que haya notado que a veces sus dedos, sin pasar por el pensamiento, logran encontrar más rápidamente un nombre para una nueva capa o estilo, por lo que puede haber notado opciones de menú en su proyecto como Título-2, subtítulo-pequeño, encabezado- 3, etc., así que dejemos de hacer y distribuir estilos mal organizados.

Cuando tenemos un desorden en los estilos, se vuelve más complicado comunicar incluso los requisitos básicos cuando se trata de todo lo relacionado con el texto o la fuente. El sistema de texto de un proyecto debe tener un buen lugar en la mente de cualquier diseñador de productos, por lo que nuestro objetivo es crear un sistema de tipografía accesible y reutilizable que pueda expandirse o colapsarse según el tamaño del proyecto.

Para hacer esto, necesitaremos determinar de antemano el número de estilos de texto utilizados, para este ejemplo, utilizaremos el estándar existente para el desarrollo web, para nosotros, los diseñadores HTML ofrece seis encabezados de diferentes niveles que muestran la importancia de una sección, título o texto Por lo tanto, la etiqueta

es el encabezado más importante del primer nivel, y la etiqueta

se usa para indicar el encabezado del sexto nivel y es el menos significativo.

Veamos cómo aplicar este enfoque a los estilos de texto y realice algunos pasos simples para organizarlos en grupos para que podamos darles una estructura y administrarlos.

Crear un sistema de tipografía

1. Abra la aplicación Sketch y comience por escribir todos sus estilos de texto en una lista simple, en orden de mayor a menor, configure todas las capas de texto en el centro. Sugerencia: recuerde que la cantidad de sus estilos puede afectar la sensación general de tipografía en el proyecto, por lo que más no significa mejor, intente reutilizar constantemente los mismos tamaños en lugar de crear uno nuevo al diseñar una nueva página web o pantalla.

2. Ahora duplique la columna y haga que las columnas alineadas izquierda y derecha formen una tabla de fuentes, y no olvide cambiar la alineación de cada capa de texto para que se ajuste a la columna apropiada.

3. Copie la tabla resultante y duplique el número requerido de veces de acuerdo con el color de estado de su marca o interfaz, por ejemplo, estado de texto Acentuado, Desactivado o Activo.

4. Ahora, la nomenclatura es realmente lo que importa en esta fase. Debe asignar nombres para cada capa de texto de acuerdo con sus columnas para que los mismos estilos puedan formar grupos y el estilo podría tener una estructura de menú, para ello, utilizaremos el complemento Rename It .

Nuestra estructura de menú se ve así:

% * / Nombre de fuente / Alineación / Color
Donde (% *) es el nombre de la capa actual

(Si no planea agregar otro tipo de letra, no necesita incluir / Nombre de fuente en la estructura).

5. Ahora necesita crear un estilo de texto a partir de cada capa de texto, puede usar https://github.com/lucaorio/sketch-styles-generator plugin para generar rápidamente estilos desde nuestra estructura de nombres. Por lo tanto, ya no es necesario asignar manualmente cada capa a un estilo de texto compartido desde el menú desplegable.

Después de esto, debería tener una estructura de menú de texto similar a la siguiente:

Siéntase libre de descargar el archivo de boceto de la plantilla a continuación, para usarlo como punto de partida para su próximo proyecto. Puede configurar sus propias fuentes en el archivo para acelerar este proceso la próxima vez.

Freebie se actualiza con un nuevo conjunto de estilos de texto compatibles con la versión 52, ambas plantillas están disponibles como un paquete, con plantillas de fuente Single y Duo. (29.10.18)

Descargar paquete de estilos de texto

Disparo original: https://dribbble.com/shots/5461577-Text-Styles-Bundle-for-Sketch

Emparejamiento de fuentes

Entonces, ¿realmente necesita una segunda familia de fuentes en su proyecto?
El segundo tipo de letra en su documento le permitirá hacer su texto más eficiente y crear combinaciones atractivas que podría ver en esas elegantes páginas de destino o puede usar múltiples fuentes en términos de accesibilidad de su producto para diferentes grupos de usuarios.

Para conectar un segundo tipo de letra necesitará:

  1. Duplique las tablas creadas previamente y cambie la fuente para todas las capas de texto. Por ejemplo: de tipo de letra Arial a Roboto.
  2. Use el complemento Rename it para reemplazar el / Nombre de fuente en la estructura del menú, por ejemplo: de / Arial a / Roboto
  3. Ahora, sobrescriba todas las nuevas capas de texto como nuevos estilos compartidos.

Y ya está, ahora puedes relajarte y mirar estilos de texto compartido bien estructurados que probablemente te salvarán el día. Vea el GIF para ver cómo debería verse el menú desplegable:

Consulte la página de promoción del Kit de marcos para obtener más funciones útiles.

Comparte e importa tus estilos de texto

Ahora que tenemos un sistema de estilos de texto listo para usar, una persona normal que desea utilizar este enfoque lo más rápido posible para otros proyectos, el complemento de estilo de texto compartido nos ayudará a que esto sea posible.

Al usarlo, puede exportar un archivo JSON que existirá independientemente de su documento actual, y que puede guardar en cualquier lugar de su disco duro o Dropbox. Este archivo contendrá toda la información de sus estilos compartidos, por lo que puede volver a colocarlo en un nuevo proyecto una vez más y tener este menú bien estructurado nuevamente en muy poco tiempo, y mantendrá su tipografía a un nuevo nivel más consistente.

Obtenga el complemento de estilo de texto compartido.

Mantén la cabeza fría y la tipografía limpia.

Más consejos profesionales:

  • Prepare diferentes archivos JSON para la tipografía de diseño web y móvil.
  • A medida que su proyecto crezca y cambie constantemente, haga el control de versiones para su archivo de sistema de tipografía, manténgalo sincronizado con GitHub o abstract.
  • Puede volver a importar un archivo JSON para sobrescribir los estados de estilo de texto iniciales, por lo que puede volver a cargar jugando con croquis.
  • Aquí puede encontrar una gran cantidad de combinaciones de fuentes diferentes que puede probar: http://fontpair.co/.

Y antes de que te vayas

  • Descarga la plantilla de estilo de texto gratis.
  • Descargar con Dropbox
  • Visite la página de promoción de Frames Kit para obtener más trucos y funciones, explore el sistema de diseño más útil para bocetos y obtenga un descuento compartiéndolo.
  • Sigue a Robowolf en Twitter para obtener más regalos y tutoriales increíbles.