Uso de las bibliotecas de croquis para crear un mejor sistema de diseño de interfaz de usuario - Parte 2

Cree un sistema flexible de avatares con propiedades de partículas (primitivas) y anulaciones de símbolos de croquis

Cuando la primera parte le ofrece una introducción a la construcción de bibliotecas "primitivas" para usar en un sistema de diseño de interfaz de usuario, este artículo se centra en el uso de los símbolos almacenados en estas bibliotecas para crear un componente de nivel Atom altamente flexible.

Para aquellos nuevos en estos conceptos, el término primitivos se usa para describir propiedades subatómicas; las "partículas" de nivel más bajo de las cuales se compone todo lo demás en un sistema. Estas ideas se exploran en profundidad en el trabajo de Dan Eden sobre sistemas de diseño subatómico.

"En lugar de crear un conjunto limitado y vasto de elementos de la interfaz de usuario, se define el sistema en términos de sus propiedades de partículas, lo que limita los estilos disponibles pero abre vías de creatividad potencialmente ilimitadas para las piezas reales de la interfaz de usuario" —Daniel Eden, Diseñador @ Facebook .
Diseño subatómico visualizado

Podemos utilizar el concepto de "partículas" para comprender mejor las bibliotecas creadas en el primer artículo. Como el proceso implica identificar o extraer las propiedades centrales de nuestro trabajo y almacenarlas en bibliotecas para su reutilización.

Pero por qué hacer esto? Nuestra intención es hacer referencia a estas partículas al construir piezas de IU. Como nuestros componentes compartirán propiedades, permanecerán consistentes, pero lo suficientemente flexibles como para permitir la creatividad en su construcción.

Las piezas particulares de la interfaz de usuario en las que nos centraremos aquí se conocen comúnmente como átomos. Los átomos son los componentes identificables más pequeños de un sistema, tomados del diseño atómico de Brad Frost con el que probablemente estará familiarizado.

Como se entiende ampliamente el diseño atómico, podríamos usarlo como la guía principal para las estructuras de nuestros componentes, tomando prestado el concepto de "partículas" del diseño subatómico para ayudar a explicar las propiedades que componen un átomo.

Una interpretación de cómo se vería el diseño atómico y la fusión de diseño subatómico

El diagrama anterior ilustra dónde estamos en una escala de complejidad de IU. En esta etapa, nos interesan principalmente las propiedades subatómicas y cómo podemos usarlas para construir átomos.

Al almacenar estas propiedades (partículas por diseño subatómico) como una colección de símbolos y anulaciones de símbolos en bibliotecas de bocetos, podemos construir un sistema altamente flexible de componentes de interfaz de usuario de bajo nivel (átomos por diseño atómico). Y con estos componentes, prototipos rápidos de estructuras complejas con carga cognitiva mínima.

Antes de comenzar con las cosas prácticas, aquí hay algunas razones por las que podría considerar abandonar el enfoque del "Kit de interfaz de usuario de un solo archivo" a favor de dividir su sistema de interfaz de usuario en varios archivos. Y cómo Sketch Libraries puede llevar el proceso de su sistema de diseño de interfaz de usuario al siguiente nivel.

Cómo las bibliotecas mejoran nuestros sistemas de diseño

Fundamentalmente, las bibliotecas ayudan a reducir la complejidad e inconsistencia en nuestro trabajo y aumentar la portabilidad y la reutilización de los activos de la interfaz de usuario.

En otras palabras, las bibliotecas nos ayudan a crear trabajos útiles que satisfagan nuestras necesidades a largo plazo. Como dice el pensador de sistemas de diseño Nathan Curtis:

“Centrarse en la entrega de guías de estilo como clímax es la historia equivocada que contar. Un sistema no es un proyecto con un fin, es la historia de origen de un producto vivo y en evolución que servirá a otros productos ". - Nathan Curtis

Beneficios de usar bibliotecas para crear sistemas que duran:

  • Proyectos organizados y mantenibles: más archivos, menos partes móviles por archivo. Sincronizar cambios desde una única fuente de verdad.
  • Diseño reducido de deudas y redundancia: no más símbolos rotos e inconsistencias, ya que estará compilando composiciones usando propiedades compartidas almacenadas en bibliotecas "primitivas"
  • Sistemas escalables y flexibles: realice cambios, sincronice actualizaciones y desarrolle su sistema con relativa facilidad. La anulación de símbolos permite menos símbolos y componentes flexibles.
  • Recursos de diseño portátiles: las bibliotecas son archivos independientes y, por lo tanto, se pueden usar en varios archivos de Sketch y reutilizar en otros proyectos.

Donde es posible que haya tenido problemas para mantener un sistema en el pasado, las bibliotecas de croquis lo ayudan a construir sistemas livianos que son más fáciles de administrar a medida que su producto crece y evoluciona.

Actualice la biblioteca de la paleta de colores y obtenga acceso instantáneo a la nueva opción de anulación en otros archivos.

Al organizar los Símbolos en múltiples archivos de la Biblioteca, podemos anidar los Símbolos de un archivo dentro de otro y mantener esos archivos ligeros en complejidad y pequeños en tamaño. Con las bibliotecas, nuestros activos se vuelven portátiles y las actualizaciones son más fáciles de sincronizar en proyectos completos.

Eso significa que no habrá más maquetas redundantes de diseño después de la entrega del desarrollador, no más batallas para mantener sus diseños actualizados y, en general, un tiempo libre de estrés con Sketch.

Entonces, ¿cómo puede adoptar este enfoque para los sistemas de diseño de IU con bibliotecas?

Uso de bibliotecas para un sistema de diseño de interfaz de usuario

Dejando a un lado la teoría, construir un sistema de diseño con Bibliotecas es bastante simple. Un resumen de alto nivel podría verse así:

  1. Desacople las propiedades recurrentes que se encuentran en sus diseños.
  2. Almacene propiedades como símbolos en una serie de archivos de biblioteca.
  3. Use las bibliotecas para construir componentes identificables.
  4. Utilice componentes para compilaciones rápidas de diseño de prototipos

Cubro las 2 primeras partes anteriores en el primer artículo. La tercera parte es donde nos centraremos desde aquí. Sigamos con eso ahora.

Símbolos básicos necesarios para crear un componente de Avatar flexible con anulaciones de símbolos

Construyendo un átomo usando Sketch Libraries

Ahora que todos estamos familiarizados con el diseño atómico, comprendemos bien cómo podemos usar las propiedades primitivas o de partículas para construir un átomo. Luego, en casos futuros, Átomos para construir moléculas, Moléculas para construir organismos, etc.

Como he compartido mi proceso para crear botones, veremos cómo crear un componente Avatar flexible, otro Atom de bajo nivel. Más tarde usaremos este Avatar dentro de un componente de tarjeta. Espere leer sobre eso en un artículo futuro.

Con alguna metodología de sistema de diseño en mente, comenzaremos identificando las propiedades necesarias para construir el componente.

Paso 1: audita tu trabajo

Llámalo como quieras, Brad Frost se refiere a esto como un Inventario de interfaz, pero "Auditoría" es agradable y breve, así que vamos con eso por ahora.

Un inventario de interfaz es una colección completa de los elementos que componen su interfaz. - Brad Frost

Independientemente de cómo elija hacerlo, ya sea que use una hoja de cálculo, en Evernote, en una hoja de papel, simplemente hágalo. Tener una visión holística de todo su producto lo ayudará a identificar patrones y relaciones entre diferentes componentes de la interfaz de usuario.

En nuestro caso, esto significa casos potenciales de reutilización entre propiedades, que podemos desacoplar de nuestro diseño y almacenar en bibliotecas.

Al auditar mi trabajo en el sistema de diseño AIN, me di cuenta de que muchos patrones de diseño en el producto estaban hechos de variables de un puñado de tipos de propiedades: color, icono, forma, borde, texto.

Propiedades primitivas (color, icono, forma, borde, texto) compartidas por diferentes componentes.

En teoría, esto significaba que podía construir la mayoría de cualquier componente (avatares incluidos) usando variables de estas 5 propiedades primitivas. Esto hizo un buen punto de partida al considerar qué almacenar en bibliotecas primitivas.

Agregar bibliotecas faltantes

Si lees la primera parte, sabrás que ya he creado Bibliotecas para 2 de las 5 propiedades primitivas utilizadas en mi sistema: colores e iconos.

Desde entonces, he creado Bibliotecas para formas y bordes, que contienen todas las instancias de estas propiedades utilizadas en mis diseños.

Todas las instancias de borde y forma almacenadas en un archivo de Biblioteca para una máxima reutilización y portabilidad

En este punto puedes estar pensando; ¿Por qué no usar estilos de capa?

Nuevo para Sketch 51 (actualmente en Beta): tanto los estilos de texto como los estilos de capa definidos en las bibliotecas estarán disponibles en todos los documentos, al igual que los símbolos. Esta es una gran actualización y nos ayudará a resolver inconsistencias entre los estilos que actualmente tenemos que recrear para cada biblioteca.

Sin embargo, los estilos de capa aún no mantienen la forma, lo que significa que no tenemos forma de controlar el radio del borde cuando se usan los estilos de capa.

Por esta razón, decidí deshacerme de los estilos de capa por completo, en lugar de crear símbolos para todas las instancias de forma, almacenándolos en bibliotecas que se pueden usar en todo el sistema.

Al hacer esto, podría reducir la cantidad de Símbolos únicos creados a nivel de componente y reducir la complejidad de cada componente.

Manejo de texto en un nivel de componente

La tipografía en Sketch, como sabrás, no es una bestia fácil de domesticar. Por esta razón, decidí no crear una biblioteca de texto. En cambio, manejo todas las instancias de texto "por componente", lo que significa que cualquier texto requerido vivirá en el mismo archivo que el componente mismo.

Esto no es un gran problema si configura su texto usando una escala modular o crea estilos de texto compartidos con el complemento Estilos de texto para evitar inconsistencias. Pero tenga en cuenta que no necesitará el complemento de Sketch 51.

4 bibliotecas primitivas utilizadas como propiedades de partículas para todos los componentes en el sistema de diseño de la interfaz de usuario

Ahora tengo 4 bibliotecas primitivas que puedo usar para construir componentes. Como la mayoría de los componentes harán referencia a estas bibliotecas, los archivos de componentes se volverán más pequeños, menos complejos y más fáciles de administrar. Los componentes contendrán solo unos pocos símbolos únicos, nativos de su archivo.

Menos piezas únicas significa que los componentes siguen siendo ultra ligeros. Al usar la tienda de símbolos en mis bibliotecas, ahora puedo utilizar anulaciones para crear componentes altamente flexibles.

Dejemos estos 4 archivos de la Biblioteca por ahora. Volveremos a ellos más tarde cuando sea el momento de construir el componente.

Paso 2: identificar las variables componentes

Antes de construir su componente, intente identificar los requisitos del componente en particular. En otras palabras, ¿cuáles son los atributos únicos que comprenden el componente?

Para AIN Design System tenía sentido construir 2 estilos de Avatar, para diferenciar entre los 2 tipos de usuarios diferentes en el producto:

  • Personas: en forma de imagen de perfil.
  • Proyectos: en forma de logotipo de la empresa.

Para hacer que estos 2 tipos de usuarios sean notablemente diferentes, se tomó la decisión de diseño de usar 2 estilos visualmente diferentes: redondo para usuarios y cuadrado para empresas.

Propiedades almacenadas en símbolos organizados en 4 archivos de biblioteca primitivos

La siguiente variable a considerar fue si un usuario carga o no una imagen. Esto significaba que tendríamos que crear 2 estados componentes, uno con una imagen y otro sin una imagen, tanto para estilos redondos como cuadrados.

Decidimos recurrir a las iniciales de los usuarios para los casos en que no se carga una imagen. Esto significaba que el texto también tendría que ser considerado para ambos estilos.

2 estilos de componentes: solo con iniciales y con imagen

La variable final a considerar fue el tamaño del Avatar. Esto fue difícil de hacer exactamente antes de conocer todos los casos de uso potenciales. Se requirió un ajuste fino después de que comenzamos a usar el sistema, sin embargo, la escala de tamaño se mantuvo fiel a la cuadrícula de 8 puntos, que utilizamos para todos los componentes y espacios en el sistema final. Si es nuevo en la cuadrícula de 8 puntos, esto significa que todas las unidades de espacio son múltiplos de 8, lo que ayuda a garantizar un ritmo constante en su trabajo.

Tamaños de componentes basados ​​en la cuadrícula de 8 puntos para un ritmo constante entre todos los componentes y el diseño de la página

Ok, eso es mucho para recordar! Analicemos los requisitos de estos componentes para que sean más manejables y tengamos una dirección clara que tomar.

Desglosando los requisitos

Los avatares necesitarán tener estados de anulación para:

  • Redondo: (radio de 99 píxeles) para avatares de usuario
  • Cuadrado: (radio de 4px) para avatares de logotipos de empresas
  • Con una imagen: para cuando un usuario carga una
  • Con iniciales y un fondo de color: para cuando un usuario no carga una imagen
  • 5 tamaños: xl, l, m, s y xs

Paso 3: identificar casos de reutilización

Ahora que conocemos los requisitos para el componente, volvamos a esas 4 bibliotecas primitivas. ¿Cuál de estas bibliotecas existentes podemos usar para construir nuestro componente Avatar?

Como identifiqué en mi auditoría, los avatares en el sistema están compuestos de 5 propiedades primitivas:

Color, forma, borde, texto e imagen

3 de los cuales pueden hacer uso de las bibliotecas que hicimos:

Color, forma y borde

El texto y, en este caso, la Imagen, son específicos del componente Avatar, lo que significa que estos tienen poca o ninguna reutilización en otras partes de mi sistema. Por lo tanto, tiene sentido manejar estas especificidades directamente dentro del archivo Avatar Sketch.

Paso 4: compila el componente avatar

Ahora que conocemos los requisitos, es hora de crear un nuevo archivo de Sketch y compilar nuestro componente. En mi caso llamé al archivo AIN-avatares, donde AIN– es el prefijo del nombre del proyecto. Útil para si decide crear más de un sistema.

Desde aquí actualicé la estructura de mi carpeta de un sistema plano a la organización de bibliotecas por principios de diseño atómico. Este paso no es crucial, pero puede ayudarlo a pensar en las partes de su sistema en orden de complejidad.

Darle sentido a la complejidad de la Biblioteca al actualizar el sistema de carpetas

Método usando Resumen para control de versiones

Si está utilizando Resumen para realizar un seguimiento de las revisiones y cambios, la configuración de los archivos es ligeramente diferente. Deberá crear su archivo desde Resumen: Agregar archivo> Crear archivo de boceto como biblioteca. Esto evitará que te encuentres con problemas en los que Abstract no reconoce los símbolos que hiciste anteriormente.

Crear una nueva biblioteca a partir de resumen
Consejos profesionales para Resumen: siempre abra archivos desde Resumen a través del botón "Editar en boceto" y no desde Boceto. Esto garantizará que Abstract haga un seguimiento de los cambios que realice en sus archivos.

Crear anulaciones de símbolos para imágenes de avatar

Dentro de mi nuevo archivo, creé 5 Artboards, en mi tamaño xl (120px x 120px), dándome 5 opciones de anulación para usar para las imágenes de perfil de usuario.

Recordando la forma de mis imágenes de perfil de usuario, llamé a estas mesas de trabajo avatar / imagen / redondeado / 1 (1 a 5) y creé un círculo de 120 píxeles para llenar cada mesa de trabajo. Luego convertí cada forma en una máscara: ctrl + clic en la capa, luego seleccioné Máscara.

Utilicé el plugin UI Faces Sketch para generar automáticamente mis 5 imágenes. Por supuesto, no tienes que quedarte con 5 imágenes aquí, puedes crear tantas anulaciones de imágenes de usuario como necesites. Una vez hecho esto, convierta cada mesa de trabajo en un símbolo.

Generación automática de imágenes de perfil con caras de interfaz de usuario

A partir de aquí, creé 5 Artboards más, nuevamente en mi tamaño xl para las 5 anulaciones del logotipo de mi empresa. Nombro estas mesas de trabajo avatar / image / 4px / 1 (1 a 5). A continuación, agregué una capa de forma con un radio de 4 píxeles, cambié el relleno de color y agregué una opción de logotipo diferente para cada uno. En mi caso, utilicé logotipos de nuestros otros productos, pero puedes usar cualquier Logos o gráfico que desees.

No olvides convertir tus nuevas mesas de trabajo en símbolos una vez que hayas terminado.

Anulaciones de símbolos de construcción para logotipos de empresas

¡Excelente! Ahora tengo un total de 10 símbolos nuevos para usar como Anulaciones para imágenes de perfil de usuario y logotipos de la compañía.

Crear símbolo maestro para cada tamaño de componente

Construir el componente maestro es donde sucede la verdadera magia de la Biblioteca. Aquí haremos uso de nuestras bibliotecas de bordes, formas y colores de antes. Lo llamo un componente "maestro", ya que este es el componente Avatar que colocaremos en los diseños al construir componentes más grandes y compilaciones de diseño.

Componentes Master Avatar en 5 tamaños

Para hacer los componentes maestros, hice 5 mesas de trabajo más, en los 5 tamaños diferentes determinados usando el sistema de cuadrícula de 8 puntos:

  • xl: 120px
  • l: 96px
  • m: 80px
  • s: 64px
  • xs: 40px

Agregar anulaciones de símbolos desde bibliotecas

Ahora necesitamos insertar nuestra Biblioteca de formas. Haga esto para cada uno de los 5 tamaños de mesa de trabajo: Insertar> AIN-formas> forma / radio> redondeado. Esto nos permitirá cambiar la forma del Avatar de redonda a cuadrada para los logotipos de la compañía.

Agregar Biblioteca de formas al componente maestro para permitir anulaciones de formas

Como mi Biblioteca de colores está anidada dentro de mi Biblioteca de formas, eso mata a dos pájaros de un tiro. Ahora tenemos el control de nuestra forma y color de Avatar en forma de Anulaciones de símbolos.

Asegúrese de que la capa de forma se encuentre en la parte inferior y que haya cambiado el nombre de la forma de la capa por un nombre limpio en las opciones de Anulación.

Ahora hagamos lo mismo para la frontera. Nuestro borde será útil para cuando el Avatar contiene una imagen que choca con el color de fondo de su contenedor. Inserte un borde para cada tamaño de mesa de trabajo ahora: Insertar> bordes AIN> borde / radio> redondeado> blanco.

Agregar biblioteca de bordes para bordes opcionales

Una vez que haya colocado su biblioteca de bordes y coincida con la forma, asegúrese de que la nueva capa se encuentre en la parte superior de la pila de capas y haya cambiado el nombre de la capa a borde. Nuevamente, esto mantendrá su panel de Anulaciones limpio y fácil de leer.

Agregar el símbolo de anulación de imagen al componente maestro

Ahora insertemos las anulaciones de imágenes que creamos anteriormente. Siempre que haya nombrado sus Artboards secuencialmente, siguiendo la misma convención de nomenclatura, debería poder anular su imagen con cualquiera de las 5 opciones que hicimos anteriormente: Insertar> Símbolos> avatar> imagen> redondeado> 1

Insertar imagen Anulación de símbolos internos. Esto nos permite cambiar la imagen de perfil y el logotipo de la empresa.

Asegúrate de hacer esto para cada tamaño. Nuevamente, cambie el nombre de la nueva capa a imagen para obtener nombres de anulación limpios. La capa de tu imagen debe estar por encima de tu capa de forma.

Agregar texto para las iniciales de los usuarios

La etapa final es agregar el texto utilizado para escribir las iniciales de nuestro nombre de usuario o empresa. Las iniciales solo se muestran en el componente si un usuario no puede cargar una imagen, tanto para las imágenes de perfil de usuario como para los logotipos de la empresa.

Como se mencionó, puede crear estilos de texto basados ​​en su escala de tipografía, o usar el complemento Textstyl.es para sincronizar sus estilos de texto * compartidos desde otro archivo de boceto a su archivo componente Avatar.

* Los estilos de texto compartido se convertirán en una característica de Sketch nativa llamada "Estilos de biblioteca" en Sketch 51.

Utilizando la escala de tipos utilizada en todo mi sistema de diseño, elegí 3 tamaños de fuente: 20px, 16px, 14px que se ajustan a los 5 tamaños de componentes.

Hice una nueva capa de texto para cada tamaño de Símbolo, colocándola debajo de la capa de imagen. Ahora el texto estará oculto a la vista cada vez que se seleccione una imagen.

Agregar una capa de texto para permitir iniciales de usuario personalizadas

Configuré la alineación en automático, centré el texto y lo arreglé en el medio. No creé estilos de texto debido a la altura de línea variable y la falta de reutilización. Una vez que haya terminado, recuerde cambiar el nombre de la nueva capa a texto.

Paso 5: uso de anulaciones de componentes

Ahora debe tener un componente de Avatar flexible, creado utilizando el menor número posible de símbolos únicos.

Para probar su nuevo componente y sus Anulaciones, inserte un símbolo maestro en el tamaño que elija: Insertar> Símbolo> Avatar> xlarge

Uso del componente Avatar y anulación de estilos de imagen de usuario

Siempre que tenga el símbolo seleccionado, en la ventana del Inspector a la derecha verá todas las anulaciones posibles, incluidas las de sus bibliotecas externas.

Anular la forma y la imagen para mostrar el avatar de estilo del logotipo de la empresa

Para dar sentido a todas mis opciones de anulación, hice una página llamada Avatares donde mantengo una referencia visual de todas las instancias posibles de Avatares utilizadas en mi diseño.

Referencia visual de posibles estados de avatar

Ahora debe tener un componente completo de Avatar almacenado en una Biblioteca que se puede anidar en otros archivos de Sketch. Echaremos un vistazo a cómo funciona esto cuando creamos un componente de tarjeta en el siguiente artículo.

Llevándolo más lejos

Hay varias formas de mejorar su flujo de trabajo desde aquí. Comenzaré con algunos elementos esenciales y te dejaré correr desde allí. Es muy posible que tenga requisitos específicos para su proyecto que no he tenido en cuenta.

Usando Sketch Runner para mejorar la velocidad y la eficiencia

Sketch Runner es una herramienta valiosa a la hora de utilizar tus símbolos y bibliotecas. Inserte sus componentes con cmd + ', luego comience a escribir el nombre de su símbolo. Esta será la forma más rápida de crear maquetas usando sus componentes a medida que comience a recordar todos los nombres de sus componentes.

Versionado y colaborando en Bibliotecas usando Resumen

Toqué antes el uso de Resumen para versionar tu trabajo.

Cuando sigue un flujo de trabajo basado en componentes utilizando múltiples bibliotecas, Abstract lo ayudará a estar al tanto de todos sus archivos a medida que su sistema crezca o si está trabajando como parte de un equipo.

Protip: Agregue sus archivos a Abstract desde el principio. Esto evitará que tenga que revisar los archivos actualizando los Símbolos para que Abstract los rastree. Tenía que hacer esto, ¡y no fue muy divertido!

Compartir bibliotecas con su equipo a través de Sketch Cloud (de Sketch 49+)

Sketch 49 vio el lanzamiento de Sketch Cloud. Ahora es posible compartir y colaborar de forma nativa en sus bibliotecas con otros diseñadores, por lo que no necesita Dropbox ni Google Drive. Personalmente, he estado trabajando como un diseño individual en los sistemas de diseño que he creado, así que no he usado Sketch Cloud, pero me interesaría saber de alguien que lo haya hecho.

Terminando

En este artículo hemos analizado cómo la adopción de principios tanto del diseño atómico como subatómico puede ayudarnos a comprender mejor cómo construir componentes de nivel Atom altamente flexibles, utilizando Sketch Libraries y Symbol Overrides.

Al construir componentes principalmente utilizando Símbolos de Bibliotecas, podemos reducir la redundancia y diseñar deudas. Mientras que las anulaciones de símbolos nos permiten mantener la máxima flexibilidad en nuestros componentes. Almacenar nuestros componentes en bibliotecas mantiene los archivos livianos, lo que hace que nuestro sistema sea más fácil de mantener y menos complicado de actualizar.

Estos componentes se convertirán en una parte integral de nuestro sistema de diseño de interfaz de usuario basado en componentes, ya que los usamos como bloques de construcción para prototipar rápidamente partes más grandes de la interfaz de usuario más rápido y con menos inconsistencias.

En la siguiente parte, veremos el uso de componentes de nivel Atom, los Avatares creados aquí junto con los botones, para crear patrones de componentes más complejos, como tarjetas. Puede clasificar estos componentes más grandes como moléculas, según el diseño atómico, pero, por supuesto, es totalmente su decisión.

Si este artículo le resultó útil, dele algunos aplausos , para que otros que puedan beneficiarse de leerlo puedan encontrarlo más fácilmente.

¡Gracias por leer!

Recursos

  • Sistemas de diseño subatómico de Daniel Eden
  • Mantenimiento de sistemas de diseño por Brad Frost
  • Una guía completa para diseñar sistemas por Will Fanguy
  • Sketch Libraries: Construyendo un mejor sistema de botones por Harry Cresswell
  • Sketch Libraries: cómo funcionan y las cosas locas que puedes hacer con ellos por Jon Moore.
  • Diseño atómico: crea sistemas de diseño, no páginas habladas por Brad Frost
  • Dominio del sistema de texto con estilos compartidos por Bunin Dmitriy
  • Exportar estilos de texto con Textstyl.es
  • Plugin de sincronización de estilos de biblioteca para sincronizar estilos compartidos de biblioteca a documento

Soy Harry Cresswell Cofundé indtl.com y trabajo como diseñador de UX / UI en Angel Investment Network. Diseño tipografía en mis noches libres y envío un boletín sobre diseño y tipografía.

Búscame en Twitter si quieres saludar.