La versión 47 de Sketch vio la tan esperada introducción de Bibliotecas que le permite sincronizar sus símbolos globalmente en todos sus archivos de Sketch. Los sistemas de diseño se benefician especialmente de una característica como esta: poder tener una forma accesible de incorporar los activos del sistema de diseño y garantizar que se mantengan actualizados para todos es el sueño de un diseñador hecho realidad. Después de probar todo, desde InVision's Craft hasta crear nuestro propio Sketch Plugin, nos complació finalmente tener esto en Sketch como una función nativa. Estas son algunas de las decisiones a las que llegamos y las lecciones que aprendimos al poner nuestro sistema de diseño en una Biblioteca.

Objetivos de nuestra biblioteca

Para comprender algunas de las ideas que se tomaron en nuestras decisiones, a continuación se incluye una breve descripción de cuáles eran los objetivos de nuestra Biblioteca:

  1. Una ventanilla única para nuestros diseñadores. Solo un archivo que podrían extraer y tener lo último que nuestro sistema de diseño tiene para ofrecer.
  2. Lo más cerca posible de una coincidencia 1: 1 con nuestros componentes codificados, independientemente de la plataforma, tanto visual como estructuralmente.
  3. Facil de mantener. Las actualizaciones o adiciones de componentes deben ser simples para que los diseñadores obtengan lo último sin esperar mucho.

Anidado vs. Soltero

En este excelente video de Sketch Together, Pablo Stanley habla sobre cómo anidar bibliotecas. Hacerlo le permite dividir cosas como colores y componentes en diferentes archivos de croquis y luego hacer referencia a símbolos en esos archivos. Si realiza una actualización de un símbolo en uno de los archivos, aún se propagará a los otros archivos que hacen referencia a ese símbolo.

La otra opción es poner todo en un archivo. No obtienes la separación limpia que te proporciona tener archivos Sketch separados, pero para nuestros propósitos, esto realmente terminó funcionando mejor porque:

  • El mantenimiento es más fácil, ya que solo necesitamos tener un archivo abierto cuando hacemos actualizaciones en la Biblioteca (Objetivo # 3).
  • Requiere que nuestros diseñadores agreguen solo una Biblioteca (Objetivo # 1).

Usar páginas para la organización

Volcar todos nuestros colores, íconos, componentes, etc. en un solo archivo no es lo primero que viene a la mente cuando se piensa "fácil de mantener". Afortunadamente, puedes dividir tu biblioteca en páginas dentro de Sketch. Aquí hay un resumen de cómo hicimos el nuestro:

Mantener las cosas separadas por páginas hace que incluso una gran biblioteca sea fácil de mantener.

Las partes clave de nuestro sistema de diseño (Color, Tipo, Iconos) están en la parte superior y luego simplemente enumeramos nuestros componentes alfabéticamente. Verá en la parte inferior dos páginas adicionales. La página de prueba, si no lo había adivinado, es una página donde podemos probar rápidamente cualquier símbolo nuevo que agreguemos. La Vista previa de la biblioteca usa el obsequio de Sketch Hunt para darle a nuestra Biblioteca una imagen de vista previa personalizada cuando va a agregar la Biblioteca en las preferencias de Sketch (esto ahora es compatible de forma predeterminada en Sketch a partir de la v48).

Nombrando Símbolos

Los elementos en el menú Símbolos se pueden agrupar por la forma en que nombra los símbolos. Al separar las cosas con a / las coloca en un nuevo grupo de menús. Usando la organización que describimos anteriormente y sabiendo cómo se agrupan las cosas en el lado del componente, decidimos lo que parecía más lógico; para algo como botones, que se ve así:

Lo que crea un menú que se parece a esto (editado un poco para que sea más fácil de ver):

Agregar color

Actualmente, Sketch no tiene una forma de compartir colores con la función Bibliotecas. Claro, hay complementos que le permiten crear paletas compartibles, pero eso fue en contra de nuestros objetivos de una ventanilla única y fácil mantenimiento. En cambio, creamos nuestros colores usando rectángulos viejos y simples.

Utilizamos nuestros símbolos de color como el bloque de construcción principal para nuestros otros componentes.

Si bien no es lo ideal, no es demasiado complicado para nuestros diseñadores, ya que la mayoría de sus necesidades de color deben manejarse en las anulaciones de símbolos de cada componente. Además, nos permite usar esos rectángulos de colores para construir esos componentes reales (explicados a continuación). Si realizamos una actualización del color, actualizará todos los componentes que usan ese símbolo de color.

Nuestros colores de nivel principal (como marca, utilidades, colores de fondo) se encuentran en la página Colores y se agrupan en consecuencia. Los colores que son específicos de un componente van en la página de ese componente para mantener esa facilidad de mantenimiento. Todavía podemos crear símbolos de rectángulo que hagan referencia a colores de nivel principal si es necesario, lo que hace que las actualizaciones más adelante sean mucho más rápidas.

Estos colores de utilidad se pueden incorporar a cualquier otra página de componentes según sea necesario: botones, tostadas, iconos, etc.

La última parte de la limpieza de la casa que teníamos que hacer era asegurarnos de que cuando abrieras una anulación de color, no recibieras una gran lista de colores. Para remediar esto, simplemente dimensionamos esos rectángulos de color en incrementos de 10, ya que la agrupación de las anulaciones de símbolos se basa en el tamaño. Por ejemplo, los colores de la marca son 20px por 20px, los colores de utilidad son 30px por 30px, y así sucesivamente. Ahora, cuando un diseñador quiere cambiar a un color de icono diferente, solo está viendo los colores de los iconos y no todos los demás colores en la Biblioteca.

Agregar iconos

Los iconos se manejaron de manera similar a los colores, ya que los agrupamos lógicamente por su uso (navegación, deportes, tipos de archivos, etc.). Para permitir que los diseñadores cambien entre los diferentes colores que tenemos para los iconos, simplemente agregamos esos colores como máscaras.

Cada ícono incluye una marca de color de nuestra lista de colores de íconos.

Recuerde que dimensionar las cosas de manera similar las hace aparecer juntas en el menú de anulación. Con eso en mente, dimensionamos los colores de nuestros íconos de la misma manera que cuando un diseñador cambia un color, solo está viendo los colores disponibles para los íconos.

Un desafío que tuvimos fue manejar los tres tamaños diferentes en los que vienen nuestros íconos. Para evitar esto, simplemente creamos tres símbolos en su tamaño correcto con un ícono predeterminado (nuestro logotipo). Como estamos usando un símbolo, un diseñador ahora puede elegir un icono diferente del panel de anulaciones; tenga en cuenta que puede cambiar el tamaño de un símbolo insertado al contenido de su corazón sin afectar lo que ve en el panel de Anulaciones. Con una gran cantidad de iconos, puede llegar a ser una lista bastante complicada, especialmente en comparación con la forma muy bien categorizada de hacer los iconos anteriores. No tenemos muchos casos en los que se necesite un ícono que no sea de tamaño mediano, por lo que esta solución, uh, funciona para nosotros.

El mismo símbolo, solo redimensionado.

Agregar tipo

Esta es otra área donde la función Bibliotecas no satisface nuestras necesidades. Editar texto en el panel Anulaciones puede ser un poco engorroso teniendo en cuenta lo pequeño que es el cuadro de texto. Simplemente haga su inicial Al igual que los colores, hay complementos de Sketch que pueden manejar la incorporación de Type a sus documentos de Sketch como estilos de texto, pero van en contra de nuestros objetivos de ventanilla única y fáciles de mantener.

Finalmente decidimos crear símbolos de todos modos. Los diseñadores pueden usar el cuadro de texto en el panel Anulaciones o simplemente Separar del símbolo y editar el texto como lo harían normalmente. Y, a partir de Sketch v48, puede ampliar el cuadro de texto en el panel Anulaciones aumentando la cantidad de texto en el símbolo de forma predeterminada.

La cantidad de texto en el símbolo determina qué tan grande de un cuadro de texto se obtiene en el panel de anulaciones.

Hay una última cosa que debemos abordar con texto y son los colores. Con nuestro texto, ya está configurado correctamente en el componente. Pero, ¿qué pasa con un entorno diferente, temas o cosas como estados de error? Para eso, nuevamente confiamos en el tamaño del símbolo para determinar qué aparece en las anulaciones. Para algo así como una etiqueta de formulario, solo nos aseguramos de que esos símbolos de texto en particular sean todos del mismo tamaño.

Las etiquetas de diferentes colores en el mismo tamaño hacen que sea fácil para nuestros diseñadores elegir entre los colores permitidos para algo así como etiquetas de formulario.

Agregar componentes

Después de crear todas las cosas difíciles, hacer botones, modales, tostadas, etc., en realidad fue bastante simple. Para algo como Modals, solo traemos el color de fondo correcto, agregamos un símbolo de tipo con un buen mensaje predeterminado y finalmente colocamos el ícono Cerrar. En este punto, nos estamos acercando mucho a hacer símbolos como lo haríamos con React.

Y eso es intencional ya que queremos que nuestros símbolos estén lo más cerca posible de una coincidencia 1: 1 de nuestros componentes. Con ese fin, el nombre del símbolo anula exactamente cómo nombramos nuestros accesorios de componentes en el código. Para que sea aún más claro para nuestros diseñadores, estos son accesorios de componentes, incluso mantenemos los nombres en minúsculas. Cualquier cosa que en realidad no sea parte del código del componente (como los bloques de relleno que discutiremos a continuación), titulamos caso. Mantener las anulaciones de símbolos nombradas de manera idéntica a los accesorios del componente es una excelente manera de cerrar esa discusión entre diseñadores y desarrolladores cuando llega el momento de construir las interfaces.

Cuando los diseñadores y desarrolladores hablan, deberían usar el mismo lenguaje. Nuestro nombre de anulación de Sketch coincide con el nombre en los componentes codificados reales.

consejos y trucos

Aquí hay algunas otras cosas que aprendimos mientras construíamos componentes que pueden ayudarte:

  • Haga las cosas más fáciles para usted y descargue el complemento Sketch Symbol Organizer. Puede organizar sus símbolos alfabéticamente y agrupar elementos según el nombre. Además, incluso espaciará las cosas como desee. Un gran ahorro de tiempo.
  • El orden de sus capas en sus símbolos es importante. Cómo se ordenan en el símbolo es cómo se ordenarán en el panel Anulaciones.
  • Vale la pena repetir aquí por enésima vez que el tamaño de sus capas también es importante. Recuerde: así es como se pueden agrupar elementos como fondos, tipos, iconos, etc.
  • Lo más probable es que tenga símbolos que sus diseñadores realmente no necesitan, pero son importantes para la composición de sus componentes. Decidimos crear un elemento de menú _Building Blocks (el guión bajo lo mantiene anclado en la parte inferior) que actúa un poco como un cajón de basura. Estos elementos permanecen en la página del componente respectivo, pero se nombran con el prefijo _Building Blocks para garantizar que todos estén debajo de ese elemento del menú.
Prefijar los elementos que no desea que se muestren, como lo hemos hecho con
  • El boceto actualmente no maneja muy bien el cambio de tamaño del símbolo anidado. Para evitar esto, generalmente creamos lo que llamamos "bloques espaciadores". Un ejemplo de dónde esto podría ser necesario son los botones; coloca un botón, le da más texto que el predeterminado y de repente el relleno está fuera de control. Para esto, tenemos un símbolo de bloque de espaciado mostrar / ocultar que cae en "bloques" semitransparentes. El diseñador ahora solo necesita cambiar el tamaño del botón hasta que los bloques se alineen.
Estos bloques se pueden agregar a cualquier componente para reducir las conjeturas a la hora de cambiar el tamaño.

Haciéndolo disponible

Una vez completada la biblioteca, necesitábamos una forma de asegurarnos de que siempre se mantuviera actualizada para nuestros diseñadores. Usamos Google Drive, por lo que ese era el lugar obvio para ponerlo. Bloqueamos el acceso al archivo de la biblioteca en sí para asegurar que no ocurrieran eliminaciones o adiciones innecesarias y luego escribimos una guía de Inicio.

Una de las características de nuestra guía de inicio es las instrucciones sobre cómo configurar Sketch Runner. Si bien esto va un poco en contra de nuestro objetivo de ser una ventanilla única, descubrimos que los beneficios de usar este complemento van mucho más allá de solo usarlo con nuestra biblioteca: es una herramienta realmente invaluable.

Con Sketch Runner, puede insertar rápidamente símbolos simplemente escribiendo su nombre, lo que para muchas personas es bastante más rápido que recorrer los menús. Recomendamos a nuestros diseñadores desactivar Fuzzy Search en las opciones y agregar los "_Building Blocks" al prefijo ignorado en la Configuración.

Aquí está nuestra configuración recomendada para Runner.

Desde su lanzamiento, hemos recibido muchos comentarios sobre cuánto tiempo se ha ahorrado al usar la biblioteca. Esperamos que Sketch continúe realizando mejoras en el futuro para que sea una herramienta aún más impresionante.