5 estrategias para usar símbolos en Sketch: para equipos y proyectos en crecimiento

Los símbolos son la característica más poderosa de Sketch.

Los símbolos tienen potencial: potencial para vincular, sincronizar, compartir, fusionar, escalar, ajustar, anidar y, lo mejor de todo, crear prototipos fácilmente. Si me encuentro con una herramienta de creación de prototipos que no tiene funcionalidad de símbolos, la descarto casi por completo.

Los símbolos son elementos de diseño flexibles vinculados a una fuente editable, también conocida como una única fuente de verdad. En resumen, son mágicos.

Esta es la magia de los símbolos. Está bien si todas las piezas no encajan juntas por usted; estaremos analizando en profundidad los sistemas de símbolos.

Sus símbolos de croquis no tienen que sobrevivirle, pero deberían poder crecer a medida que lo hacen sus proyectos. También deberían poder compartirse convenientemente con otros. Aquí hay tres estrategias para usar los símbolos de Sketch en formas escalables y fáciles de usar.

1. Construye símbolos de la manera correcta

Cree símbolos bien y envejecerán bien. No es divertido tener que reconstruir un símbolo porque no lo hiciste lo suficientemente flexible la primera vez, especialmente cuando lo usaste en una docena de lugares. Aquí hay algunos consejos para ayudarlo a usted y a su equipo a construir símbolos que no necesiten renovaciones constantes.

Comience con lo básico

Comience con los componentes más básicos que pueda. Todo debería comenzar a nivel atómico. Cuando sus sellos son modulares, encajan mejor y son más fáciles de trabajar.

Símbolos de nido

Puede anidar símbolos dentro de otros símbolos para hacer que la creación de prototipos sea simple y flexible. Anidar es cuando pones un sello en un sello más grande. Y con una característica conocida como anulaciones, podrá intercambiar y personalizar impresiones de sellos en una docena de lugares diferentes de una docena de formas diferentes.

Anidar te obligará a pensar en niveles. Los símbolos de nivel uno pueden ser iconos y bloques de texto, los símbolos de nivel dos pueden ser botones y listas, y los símbolos de nivel tres pueden ser paneles completos y ventanas emergentes. Los bits, piezas y niveles se verán diferentes dependiendo de la complejidad del proyecto, pero el punto de anidar símbolos es siempre el mismo. Para anular elementos en niveles superiores.

Mientras que un símbolo funciona como un sello, una instancia de un símbolo funciona como la impresión de un sello. Y debido a que los sellos son mágicos, las impresiones del mismo sello pueden ser diferentes. Estas variaciones se llaman anulaciones. Si su sello grande tiene un sello de fecha dentro, puede usar anulaciones para hacer que una impresión diga el 1 de junio y otra el 22 de diciembre. Del mismo modo, con un sello de frase cambiable, una impresión puede decir RECIBIDA y otra puede decir PAGADA. Incluso con anulaciones, las impresiones aún están vinculadas al sello mágico. Si cambia la tinta del sello de fecha a rojo, tanto el 1 de junio como el 22 de diciembre se vuelven rojos. ‍ ​​Magia.

Aquí están las opciones de anulación para un símbolo de botón todopoderoso. Con este botón puede anular A) el símbolo de estilo de texto anidado, B) el texto en sí, y C) la forma del botón, y D) el estilo de relleno.

Pero, ¿hasta dónde debe llegar la anidación? ¿Cuántos símbolos dentro de los símbolos son necesarios para tener un sistema de diseño inteligente? La respuesta es relativa a cada proyecto. Una buena regla general es tener fuentes simples de verdad para sus símbolos, pero no tener opciones abrumadoras o innecesarias. Por ejemplo, para una biblioteca de diseño potente que se utilizará para muchos proyectos diversos, querrá un símbolo de botón como su fuente de verdad, con símbolos anidados para los estilos de forma, relleno de color, estado y texto. Sin embargo, si está construyendo wireframes básicos, no se vuelva loco. Cree el símbolo de su botón con una o dos anulaciones que necesita.

La Ley de Tesler, también conocida como La Ley de Conservación de la Complejidad, establece que para cualquier sistema hay una cierta cantidad de complejidad que no se puede reducir.
(Leyes de UX)

Aproveche los estilos de texto como símbolos

En la versión actual de Sketch no puede anular un estilo de texto en un símbolo. Cuando desee cambiar el estilo de texto en su botón favorito de cta-red-bold a cta-blue-italic, ¡eso duele! Pero hay buenas noticias. Hay una solución alternativa.

Estamos diseñando una aplicación de mensajería, por ejemplo. La interfaz de usuario necesita un cajón donde las conversaciones pueden aparecer en negro, rojo o gris, según la disponibilidad de un amigo:

a. Haga un símbolo con texto rojo, un símbolo con texto negro y un símbolo con texto gris. La mesa de trabajo de cada símbolo debe ser del mismo tamaño.

si. Haz un símbolo para el cajón de conversaciones.

C. Anide los símbolos de nombre, desde el paso 1, dentro del símbolo del cajón. Haga esto tantas veces como sea necesario hasta que tenga una lista:

Puede ver que los símbolos

re. Ahora, si llevo el símbolo del cajón a mi prototipo de nivel de página, puedo anular los estilos de texto en el panel de propiedades:

Una vez que el símbolo se coloca en una página, sus opciones de anulación aparecen en el panel del inspector a la derecha.

Organizar capas

Dentro de los símbolos complejos, vea: símbolos anidados, asegúrese de organizar las capas de forma intuitiva. El panel izquierdo de su ventana es donde puede encontrar y organizar sus capas. Coloque los elementos superiores en la parte superior y los elementos inferiores en la parte inferior. Dé a sus símbolos anidados nombres simples como "Texto aquí" e "Icono" en lugar de "Icono 10 Copia de copia 2".

El orden de capas dicta cómo se organizan las anulaciones. Además, al nombrar sus cuadros de texto y símbolos, tenga en cuenta que sus nombres aparecen junto a sus opciones de anulación.

Si eres inteligente al respecto, tus opciones de anulación serán tan simples que cualquiera podría usarlas. Un sueño para tantos equipos de diseño.

También es fundamental para organizar las capas bloquearlas. Una capa bloqueada no puede tener anulaciones asignadas. Por ejemplo, el símbolo de la barra de navegación podría tener una línea de texto que no necesita cambiar; bloquee la capa con ⌘⇧L y se ocultará de sus opciones de anulación. Sea un buen curador eliminando la personalización donde no sea necesario.

Use las opciones de símbolos para cambiar el tamaño fácilmente

El panel del inspector de la derecha tiene muchas restricciones útiles para construir símbolos redimensionables. Usalos, usalos a ellos. Después de todo, desea que sus impresiones de sellos se vean bien en todos los tamaños de papel.

Las restricciones de cambio de tamaño están aquí para ayudar. Los encontrará en su panel de inspección cuando tenga un objeto o símbolo seleccionado.

Invierta tiempo en el comportamiento de cambio de tamaño inteligente de un símbolo: enlace corregido en enero de 2018. Use restricciones de cambio de tamaño para fijar elementos a uno o varios lados de su contenedor, arreglar el ancho de un elemento y / o arreglar la altura de un elemento. Algunas cosas deben estirarse, algunas cosas deben permanecer en la esquina; Las restricciones de cambio de tamaño le dicen a una instancia de símbolo cómo comportarse cuando cambian sus dimensiones.

https://www.sketchapp.com/images/pages/docs/03-layer-basics/video/after@2x.mp4 - Enlace fijo enero de 2018

Nota n. ° 1: si desea mantener un relleno consistente al cambiar el tamaño de un símbolo, fije los objetos en los cuatro bordes. (Fuente de vídeo)

Nota # 2: Los símbolos cambiarán de tamaño mejor si los diseñas de forma condensada. Después de todo, un símbolo es más fácil de expandir que de comprimir.

Los símbolos que contienen imágenes pueden redimensionarse fácilmente si se configuran como relleno. En lugar de insertar una imagen (Insertar> Imagen), debe usar un patrón de relleno. Esto significa hacer primero la forma del contenedor (Insertar> Forma), elegir "Relleno de patrón" en la sección de relleno del inspector, luego elegir su imagen como patrón. Admito que esto puede parecer indirecto o contra intuitivo, pero la técnica de relleno mantiene la integridad de su imagen cuando se cambia el tamaño, en última instancia para evitar una distorsión incómoda.

Puede especificar cómo desea que las imágenes llenen la forma: Relleno, Ajuste, Estirar o Mosaico.La imagen de la izquierda es un relleno de patrón para una forma, y ​​la imagen de la derecha es una imagen estándar. Los estiré verticalmente para mostrar qué tan bien funciona el relleno del patrón. Lección # 1: No estires a los cachorros.

2. Organiza tus símbolos

Ser organizado es crítico. Si su colección de sellos se hace grande, necesita un organizador de escritorio. Si su colección de sellos se hace más grande, debería obtener algunos cajones. Desea que sus estampillas estén tan organizadas que, cuando esté de vacaciones en Bali, un pasante pueda sentarse en su escritorio y encontrar la estampilla que está buscando. Aquí hay algunos consejos para eso.

Nombra tus símbolos

Con los símbolos de Sketch, hay mucho en un nombre. Un nombre no solo especifica qué es un símbolo, sino que también especifica dónde está un símbolo; un símbolo llamado botón / primario tendrá la carpeta de botones como padre.

Nombra y organiza tus símbolos consistentemente. Más importante que tener grandes nombres para sus iconos es que sus nombres tengan sentido entre los otros símbolos de su biblioteca. Preferiblemente, nombre sus símbolos por función en lugar de señales visuales. Una señal visual como "azul" está sujeta a cambios, mientras que una función como "estado presionado" se mantendrá a largo plazo.

Usar anulaciones de estilo

Su sistema de iconos puede tener una docena de variaciones de color, contorno o borde, una posible pesadilla para cualquier biblioteca de símbolos. 20 iconos negros significa ordenar 20 símbolos. 20 iconos en 12 colores significa ordenar la friolera de 240 símbolos.

Afortunadamente, desde Sketch 52, puede usar reemplazos de estilo, puede hacer ediciones de símbolos fácilmente. Es una alternativa mucho más bonita a la basura que tuvimos que hacer en Sketch 51.

Afortunadamente, Jon Moore de UX Power Tools cubre cómo hacerlo.

El estilo anula en acción. (Tomado del artículo de Jon)

Organice sus símbolos visualmente, donde sea

¡La presentación importa! Incluso si tiene un pequeño equipo de diseño con expectativas relativamente bajas, debe separar, agrupar y etiquetar los símbolos para que sea más fácil de encontrar para todos.

Un lugar para cada símbolo y cada símbolo en su lugar.

Método n. ° 1 para organizar símbolos: cada vez que haga un símbolo, mantenga marcada la opción Enviar símbolo a la página ‘Símbolos. Deje que la página de símbolos se vuelva desordenada. Crea una nueva página con ⌘⇧N donde agregarás y organizarás todos tus símbolos.

Al diseñador Javier Cuello le gusta el Método # 1. A la izquierda está su página de símbolos. A la derecha está la página donde mantiene su acto juntos. (Fuente de imagen)

Método # 2 para organizar símbolos: organice sus símbolos en su página de símbolos. ¡Es sencillo! Elijo ordenar mis símbolos en la página Símbolos, y aquí hay un complemento que utilizo para ayudarme a hacerlo rápidamente.

3. Compartir bibliotecas de símbolos

Ahora que sus sellos están bien diseñados, nombrados consistentemente y organizados de manera inteligente, es hora de compartirlos. En una actualización reciente, Sketch agregó bibliotecas, una función para vincular, sincronizar y compartir de manera inteligente los símbolos de Sketch.

Sin embargo, hay un inconveniente si usted y un colega desean vincularse a la misma biblioteca: ambos deberán acceder al mismo archivo en la misma ubicación. Puede acceder al mismo archivo a través de una carpeta compartida en la nube, o si tiene un equipo como el mío que no funciona mucho fuera de la oficina, configure una unidad de red compartida.

Acceda a sus preferencias, que se encuentran usando ⌘ o debajo de ‘Bosquejo’ en el menú de su aplicación para navegar a las preferencias de su biblioteca. Desde allí, puede agregar una biblioteca desde cualquier archivo de Sketch, siempre que tenga símbolos. Las preferencias de la biblioteca son donde agregaría su archivo compartido. Si desea obtener más información sobre las bibliotecas, consulte la documentación de Sketch.

Nota: Un propósito de Sketch Libraries es evitar que edites accidentalmente símbolos que se comparten con otros. Muy bien, Sketch te presentará un popover para confirmar las ediciones de símbolos que intentas hacer; ¿Estás seguro de que deseas editar el archivo fuente? ¿O le gustaría desvincularlo y luego editar la biblioteca?

Si usted o un compañero de equipo actualizan una biblioteca compartida, se le dará la opción de elegir qué cambios se aplican a los archivos de Sketch conectados.

Me he topado con el complemento Sketch de brand.ai varias veces, y es una opción costosa para compartir que me gusta ignorar. Fue desarrollado como un complemento, antes de que existiera la función de bibliotecas de Sketch, y diseñado para resolver el mismo problema. No hay necesidad de duplicar. Además, InVision lo adquirió recientemente y se integrará en su próximo Design System Manager. El DSM podría ser una dura competencia para las herramientas de creación de prototipos como Adobe XD, Framer y Sketch. Hasta entonces, sigue compartiendo tus bibliotecas de Sketch. Tu equipo te lo agradecerá.

4. Establecer control de versiones

En un equipo de diseño corre el riesgo de sobrescribir archivos o perder el seguimiento de las versiones de los archivos. Algunos equipos resuelven esto usando GitHub para bifurcar, fusionar y confirmar archivos de Sketch. Debido a que GitHub es una solución centrada en el desarrollador, Elastic Projects creó Abstract, un complemento de Sketch de terceros que hace que el control de versiones sea más amigable para el diseñador.

El almacenamiento en la nube también puede ayudarlo a controlar la versión. Dropbox guarda instantáneas de todos los cambios realizados en un documento en 30 días, por ejemplo. Sin embargo, más allá de esos 30 días, los cambios no son recuperables a menos que tenga DropBox Business o Extended File Recovery. Incluso hay algunas formas indirectas de control de versiones con Google Drive.

5. Aprende de los mejores

La mejor manera para que un fabricante de sellos aprenda es aprender de los maestros de sellos. Al profundizar en las bibliotecas de Sketch más populares y / o complejas, aprenderá muchos trucos avanzados. ¿Cómo el equipo de Apple superpone sus símbolos? ¿Cómo se anidan los símbolos en un kit de interfaz de usuario profesional? Recomiendo usar su práctica barra de búsqueda de Internet para buscar archivos de Sketch de alto secreto como el de los Recursos de diseño de la interfaz de usuario de iOS.

Tal vez esté planeando construir algo complejo como una tabla o un menú desplegable de varios niveles. Whoah ahora! ¡Tranquilízate, bribón! Navega alrededor primero. Verifique los recursos de la aplicación Sketch y vea si alguien ha construido algo similar.

Pedir prestado, pedir prestado. Y no olvide probar las opciones de anulación en los archivos que encuentre.

Para cerrar, aquí hay algunas opciones de archivos de bocetos llenos de símbolos para que pueda cavar, separar y experimentar con:

  • Biblioteca de formularios de Davide Pisauri
  • Botón inteligente de Domenico Laricchia
  • Android 7.0 Nougat Material Design GUI Kit de Great Simple
  • Hoja de pegatinas de diseño de materiales de Google
  • Tabla UI Kit de O / M Studio