Tutoriales de croquis

Sketch Libraries: cómo funcionan y las cosas locas que puedes hacer con ellas

Esta nueva característica es incluso mejor que los símbolos anidados. Lo prometo.

Antes de hacer nada, asegúrese de haber actualizado a Sketch 47.

Algunos antecedentes rápidos

Si hay una frase que ha afectado al mundo del diseño más que cualquier otra durante el año pasado, es esta: "UNA SOLA FUENTE DE VERDAD".

No, este no es un tatuaje real. Sí, siempre combino mis camisetas con mi alfombra.

No, no es un anuncio de solteros para un adivino ("27, hombre. Soltero, fuente de la verdad. Ama la playa"). Es esta idea de mantener un documento central o una biblioteca como la versión final del diseño, y todas sus piezas relacionadas.

No es una idea nueva. Los desarrolladores siempre han luchado entre sí (y Git ) para mantener la base del código sincronizada en los grandes equipos de desarrollo.

Y realmente, tampoco es nuevo para el diseño.

Pero el proverbial megáfono para la verdad se ha vuelto más fuerte en los últimos años a medida que más y más empresas invierten en diseño y distribuyen el trabajo entre equipos de 5, 10 y más de 100 sorbos de espresso, jardinería suculenta, color jogger. entendidos

Cómo funcionan las cosas hoy

Existen toneladas de complementos, aplicaciones y servicios diferentes que pueden ayudarlo a mantener su fuente dorada de verdad, pero es un juego peligroso cuando su producto depende del de otra persona. Cada vez que Sketch se actualiza, estas soluciones se rompen y todos se quejan en Twitter durante 24 horas hasta que se pone en marcha un parche.

Funciona, pero está roto. Justo debajo del control de borde de un solo lado y encima de las anulaciones de color para los símbolos (ejem, Sketch) se encuentra una solicitud de características abrumadoramente popular para los equipos de diseño: Bibliotecas de diseño compartido.

Características por las que abandonaría mis AirPods ™ por:
1. Control de fronteras nativo de una cara
2. Bibliotecas de diseño compartidas
3. Anulaciones de color para símbolos

Prepárate para algunas buenas noticias.

Toda esta historia de fondo se basa en esto: Sketch acaba de lanzar una solución nativa que hará que compartir sea más fácil que hacer tostadas de aguacate

Presentamos ... ¡Bibliotecas de croquis!

Prepárate para que te quiten los pantalones de jogger.

¿Qué son las bibliotecas?

Las bibliotecas son documentos de croquis que se pueden utilizar de forma global.

¿Cómo trabajan?

  1. Abra sus preferencias de Sketch y vaya a la pestaña "Bibliotecas".
  2. Haga clic en "Agregar biblioteca ..." y elija un archivo de croquis.
  3. ¡Hecho!

Ahora puede usar cada símbolo de este archivo de croquis en cualquier documento:

Cuando agrega un símbolo externo, se ven así en su lista de capas:

Cada vez que guarde los cambios en un símbolo en el archivo de la biblioteca maestra, se le notificará sobre los cambios y se le solicitará que sincronice cualquier documento que use símbolos de esa biblioteca:

Es fácil pasarlo por alto, pero no me importa que esté fuera del camino. No quisiera que me molesten cada 5 segundos si alguien está trabajando en el archivo maestro. Al hacer clic en este botón, tiene la oportunidad de sincronizar selectivamente cualquiera / todas las actualizaciones que se han realizado en la biblioteca maestra, mostrándole lo que es diferente entre su copia y la copia maestra. Este paradigma debería ser familiar para los diseñadores con experiencia en desarrollo:

Si desea editar el símbolo externo, simplemente haga doble clic en él. Sketch te preguntará cómo quieres editarlo:

  • Desvincular de la biblioteca: piense en ello como otro nivel de "desconectar del símbolo". En este caso, primero lo separa de la biblioteca externa y crea un símbolo local. En este punto, sigue siendo un símbolo, pero la mesa de trabajo de símbolos ahora existe en su archivo local.
  • Abrir en documento original: Esto abrirá el archivo de la biblioteca maestra y lo llevará directamente a la mesa de trabajo para el símbolo en el que hizo clic.

Sí. Eso es.

Mis queridos amigos ... realmente es así de fácil.

Inténtalo tú mismo

Aquí hay una Biblioteca de bocetos gratuita de avatares de usuarios que he creado para que pueda usarlos como símbolos externos. Esto es útil si desea utilizar siempre el mismo grupo de personas en sus maquetas, en lugar de confiar en la aleatoriedad del Generador de contenido.

Preguntas frecuentes

¿Los símbolos externos no llenarán la página de Símbolos en mi archivo local?
No! Los símbolos externos NO se agregan a su página de símbolos local. Eso sería una especie de derrota del propósito de una biblioteca externa, ¿no te parece?

¿No perderé todas las anulaciones de símbolos para mi símbolo de botón elegante?
No! Sketch trata los símbolos externos como los símbolos locales, por lo que cualquier anulación que esté disponible en su archivo maestro también estará disponible en su archivo local. Eso significa que si su archivo maestro tiene cinco símbolos de color diferentes que se pueden usar para intercambiar el color de un símbolo de botón, esos mismos cinco colores estarán disponibles en su archivo local. ¡¿CUAN GENIAL ES ESO?!

¿Perderé anulaciones locales si sincronizo los cambios de símbolo de la biblioteca?
Siempre que el símbolo maestro conserve los mismos atributos y el mismo conjunto de capas, todas sus anulaciones deben conservarse. Solo perderá anulaciones si realiza cambios en los símbolos anidados en el símbolo maestro (esto no es diferente de la forma en que funcionan los símbolos hoy en día).
¿Funciona con estilos de texto y estilos de capa?
Todavía no, pero está en la hoja de ruta de Sketch.
Si agrego símbolos a una biblioteca, ¿los usuarios de esa biblioteca tendrán que actualizar sus archivos?
No! Si agrega nuevos símbolos, estos solo aparecerán en el menú desplegable "Agregar símbolo de la biblioteca". ¡Eso fue fácil!
No quiero que Dave se meta con la biblioteca principal. ¿Hay alguna forma de administrar los permisos de usuario?
Nativamente, no en este momento. Sin embargo, puede lograr esto a través de los permisos de carpeta de Dropbox o Google Drive.
¿Cuántas bibliotecas puedo tener?
No sé ... ¿cuántas estrellas hay en el cielo?

¿Puedo hacer referencia a una biblioteca en una biblioteca [en una biblioteca]?
Sí. Sin embargo, las actualizaciones irán pasando por cada una de ellas, por lo que deberá sincronizarlas todas de forma individual (no lo olvide).

¿Es esto lo mejor desde el pan rebanado?
Es mantequilla Err, mejor.

Alguna inspiración de la biblioteca

Las bibliotecas son fantásticas para compartir componentes de la interfaz de usuario en un equipo de diseño, pero no nos detengamos allí. Así es como las bibliotecas de bocetos cambiarán la forma en que diseñas para siempre:

  1. Biblioteca de componentes central: administre todos sus botones, campos, entradas, etc., todo en una biblioteca central. Mi equipo de diseño usa UX Power Tools y funciona perfectamente con Sketch Libraries.
  2. Biblioteca de iconos: administre todos sus iconos en una biblioteca. Cada vez que se agrega un nuevo icono, estará inmediatamente disponible para todos los diseñadores.
  3. Biblioteca de ilustraciones: administre todas sus ilustraciones de marketing y productos en una biblioteca. Los diseñadores de productos y diseñadores web pueden hacer referencia a ilustraciones de su archivo. No importa si no ha terminado con sus ilustraciones. Se les notificará cada vez que realice actualizaciones.
  4. Biblioteca de activos de marca: administre todos los activos de su marca en una biblioteca. Si todos los diseñadores hacen referencia a una biblioteca de una sola marca, los logotipos y los activos relacionados siempre estarán sincronizados.
  5. Biblioteca de colores: administre todos los colores de marca o interfaz de usuario en una biblioteca. ¿Usa símbolos de color anidados en botones e íconos para permitirle anular su color? Haga referencia a los colores de esta biblioteca de colores en otras bibliotecas y será increíblemente simple actualizar los colores en varios documentos.
  6. Biblioteca de gráficos: administre cuadros, gráficos y visualizaciones en una biblioteca. Estos tienden a ser diseños bastante robustos, por lo que alojarlos en su propia biblioteca mantendrá los archivos de la interfaz de usuario limpios y de alto rendimiento.
  7. Biblioteca de componentes individuales: administre componentes de IU individuales en una biblioteca. ¿Sabes cómo LESS, Sass y otros preprocesadores de CSS suelen modularizar estilos para facilitar la gestión? Divida su sistema de diseño en múltiples bibliotecas con referencias cruzadas para una mayor organización y una inserción de símbolos más fácil.

Un fantástico movimiento empresarial por boceto

Esta función de biblioteca nativa será ENORME para el negocio de Sketch.

¿Quién usa Sketch? Diseñadores de productos y diseñadores web (o como quieran llamar a estos roles). Eso es todo.

Aunque es una gran población, estos diseñadores solo constituyen una pequeña porción de la comunidad de diseño. ¿Y todos los demás? Bueno, tienden a favorecer productos más amigables con las ilustraciones como Affinity Designer y Adobe Illustrator:

  • Marca del producto: Adobe Illustrator. Define colores, fuentes, logotipos, etc. Crea activos de marca principales.
  • Diseño de iconos: Adobe Illustrator, Affinity Designer. Crea iconos personalizados para productos y marketing.
  • Ilustración: Adobe Illustrator, Diseñador de afinidad. Crea ilustraciones personalizadas para productos y marketing.
  • Datos Viz: Excel, Illustrator, D3. Diseña cuadros, gráficos y visualizaciones para el producto.

Esa es mucha gente y muchos ingresos que Sketch se está perdiendo.

Sketch Libraries hará que sea mucho más fácil (y más atractivo) para estas personas ingresar al flujo de trabajo de diseño de Sketch. En lugar de exportar SVG de Illustrator e importarlos a Sketch, un ilustrador puede administrar su propio archivo de ilustraciones, luego un diseñador de productos puede hacer referencia a esos dibujos como símbolos externos. Cada vez que el ilustrador necesite realizar actualizaciones, se propagarán directamente al archivo de la interfaz de usuario. Todos los activos ahora se pueden compartir. Ahora y siempre. ¡Va a ser tan brillante y no puedo esperar hasta que se publique públicamente!

Otras cosas geniales

Estos son solo algunos pensamientos e ideas desorganizados, pero creo que encontrarás inspiración en uno o en todos.

  • Las bibliotecas pueden hacer referencia a otras bibliotecas. Woah Leonardo DiCaprio tendría un maldito apogeo con este nivel de inicio.
  • Los gerentes de producto ahora pueden hacer maquetas sucias con símbolos y componentes reales sin tener que preocuparse de que arruinen algo en la biblioteca de componentes base.
  • La implementación de nuevos símbolos no requiere sincronización. Solo aparecen en la lista de símbolos de la biblioteca externa. Esto no interrumpirá el flujo de trabajo de un usuario.
  • Puede definir símbolos de datos de InVision Craft en una biblioteca externa, y cuando un usuario los usa con Craft Duplicate, completará automáticamente los datos ficticios.
  • Puede anidar símbolos externos en los locales.
  • Puede tener dos bibliotecas separadas con símbolos y componentes coincidentes. Uno para estructuras metálicas. Uno para alta fidelidad. Puede anular entre BIBLIOTECAS en lugar de solo entre símbolos.
  • Las bibliotecas pueden ser su propio generador de contenido personal. Haga una biblioteca que contenga solo elementos de la lista. O solo avatares. O solo gráficos. El trabajo de diseño ahora se puede distribuir y compartir entre un equipo de diseño. Evan puede hacer los gráficos. Jon puede hacer la interfaz de usuario. Andy puede hacer la marca. Illustrator puede hacer su trabajo y hacer cambios sin interrumpir el diseñador de la interfaz de usuario. Todos los archivos pueden hablar entre sí.
  • Los archivos ya no están hinchados con cientos de símbolos no utilizados o subutilizados.
  • Puede hacer una biblioteca de símbolos de mesa de trabajo (Holy Sh * t). Esto es como la hoja de calcomanías Heaven.

Resumen

No hace falta decir que esta es una nueva característica ENORME que tendrá un impacto muy positivo para los equipos de diseño de todos los tamaños.

No podría ser más fácil de usar, así que juega con la versión beta para comenzar a aprender cómo funciona. Serás un profesional en unos 3 minutos.

Mientras espera el lanzamiento público de Sketch 47 (creo que harán al menos unas pocas semanas de pruebas beta en este caso), consiga una copia de los sistemas de diseño UX Power Tools. Funcionan perfectamente con las bibliotecas, y su equipo de diseño alcanzará un nivel de velocidad y consistencia que ni siquiera sabía lo que era posible.

Cuando no escribo sobre bibliotecas externas, estoy trabajando en herramientas de diseño de Sketch en UX Power Tools para convertirlo en un diseñador mejor y más eficiente.

Sigue a UX Power Tools en Twitter
Sigueme en Twitter