Símbolos en Sketch: Aprovechándolos al máximo
No importa si estás diseñando un sistema completo o tan solo un par de pantallas: los símbolos en Sketch te ayudarán a tener tu archivo organizado y, a la larga, te ahorrarán un montón de tiempo. En este artículo, compartiré contigo buenas prácticas y trucos para sacarles el máximo provecho posible.
Antes de comenzar, un poco de contexto. Empecé a usar Sketch hace unos pocos años atrás, como reemplazo de mi herramienta favorita de diseño hasta entonces, Fireworks, que había sido discontinuada por Adobe —dejando con el corazón roto a una generación completa de diseñadores. Desde mis primeros días con Sketch, me sorprendió lo fácil y directo de usar que era. Había, una vez más, encontrado un programa enfocado en diseño de interfaces (e iconos) y nada más.
La aparente falta de funciones de Sketch, comparado con otras alternativas llenas de menús y paneles apilados a las que estaba acostumbrado, fue, de hecho, una gran ventaja… y lo que precisamente me ayudó a diseñar más rápido. Entre esas herramientas, los símbolos (o Symbols) fueron las que usé más frecuentemente, y aún sigo usando en la actualidad prácticamente cada día (sí, incluso los fines de semana… ¡así es la increíble vida del diseñador freelance!).
Pero, ¿qué son los símbolos? ¡Me alegra que preguntes! En resumen, los símbolos te permiten usar y reusar un elemento a lo largo de todo un proyecto, manteniendo un símbolo maestro que automáticamente actualiza otras instancias de ese símbolo cuando se le hace algún cambio.
Este concepto no es precisamente nuevo (y para ser honesto, tampoco es exclusivo de Sketch). De cualquier forma, si diseñas interfaces lo encontrarás increíblemente útil, especialmente cuando uses componentes como parte de un sistema de diseño.
En este artículo comentaré cómo usar símbolos en Sketch para aprovecharlos al máximo, yendo desde los usos más básicos hasta algunas situaciones más complejas. También incluiré consejos y trucos que he aprendido en el camino.
Una pequeña introducción
Antes de profundizar un poco más, y en caso de que seas nuevo en Sketch (si es así, ¡bienvenido/a!), déjame darte una breve (espero) introducción para que entiendas cómo funcionan los símbolos.
Básicamente, los símbolos pueden crearse a partir de cualquier elemento en Sketch: texto, formas, imágenes e incluso de otros símbolos (hablaré de eso más adelante). Dentro de cada símbolo (tienes que hacer doble-click en él para entrar al modo de edición) encontrarás un artboard o lienzo principal que contendrá las capas del símbolo. Este artboard también sirve para definir los límites del símbolo.
Generalmente, los símbolos se crean para aquellos elementos en tu interfaz que piensas usar más de una vez (como botones, ítems de una lista, pestañas, etc.) y que estarán repartidos a través de diferentes pantallas, páginas y artboards en tu archivo de Sketch.
Nota: Para futura referencia, ten en cuenta que las “copias” de un símbolo se llaman instancias.
Lo mejor de usar símbolos (en vez de elementos agrupados, independientes y desconectados) es que si en algún momento decides cambiar una propiedad en particular (por ejemplo, el color, forma, tamaño del texto, dimensiones o lo que quieras) sólo tendrás que editar el símbolo maestro una vez, y ese cambió se replicará automágicamente en las instancias de ese símbolo maestro, sea donde sea que estén. No sé qué te parece, pero para mi, esto es bastante conveniente.
Truco 1: Organízate
Tal como en la vida misma, es fundamental mantener todo en orden. Siempre diseña como si alguien más fuera a abrir y trabajar con tu archivo, y como si además necesitara entenderlo sin tu ayuda. Esto también aplica a la forma en que nombras los símbolos, que debería seguir una lógica concreta.
Una de las recomendaciones en este sentido es usar una barra(/) en el nombre del símbolo. Sketch creará una categoría automáticamente con la parte de antes de la barra, y nombrará y ubicará el símbolo dentro de ella, usando la parte del nombre que va después de la barra. Por ejemplo, si tienes dos símbolos llamados “Button/Primary” y“Button/Secondary,” así es como se verán cuando quieras insertarlos desde la barra de herramientas:
¿Lo ves? Puedes repetir esta técnica cuantas veces quieras para tener varios símbolos bajo la misma raíz, agrupados con la misma lógica, y haciéndolos más fáciles de encontrar. Y si tu “árbol” crece demasiado, toma un momento para ver si lo estás haciendo bien, o si hay alguna forma de optimizarlo y hacerlo más simple de gestionar.
Truco 2: Convenciones en el nombre
Hay muchas convenciones sobre cómo deberían nombrarse los símbolos, quizás una por cada diseñador. Personalmente, prefiero no usar nombres que hagan referencia a propiedades visuales de los elementos —por ejemplo, “Red Button” sería una mala elección en mi opinión, porque si el color del botón luego cambia por alguna razón, entonces el nombre del símbolo ya no tendría sentido. En lugar de eso, lo que intento hacer es diferenciar la función y el estado del símbolo (por ejemplo, “Primary/Disabled”).
De cualquier manera, sé consistente y encuentra algo que funcione tanto para ti como para tu equipo y apégate a él; no alternes sistemas de nombres dependiendo del caso. Esto también aplica a las capas dentro de los símbolos: incluso hay diseñadores que usan emojis para destacar cuál de ellas debe editarse (por ejemplo, añadiendo un lápiz al nombre). Para hacer esto, presiona Control + Command + Space para abrir el panel y seleccionar emojis.
Nota: Acerca de esto mismo de nombres en los símbolos, tienes que saber que las instancias toman su nombre del símbolo maestro, pero luego las puedes cambiar a lo que quieras. De esta forma, instancias del mismo símbolo pueden tener nombres diferentes entre sí.
Truco 3: Una alternativa a la página de símbolos
Cuando creas un símbolo, Sketch te preguntará si lo quieres enviar a la página de símbolos. Mi consejo aquí es elegir esta opción, aún cuando luego de un rato (y algunos símbolos más tarde) esta página dedicada se irá volviendo gradualmente un cajón de sastre (Sketch ubica un símbolo al lado de otro a medida que van siendo creados, y cuando eliminas uno, notarás que queda un espacio en blanco en su lugar).
En lugar de prestarle atención, lo que hago para solucionar este tema es crear mi propia página de símbolos (que es tan solo una página normal que se llama “Símbolos”, o como quieras en realidad) donde puedo ordenar las instancias de los símbolos de la manera que quiera, ignorando entonces la página de símbolos “oficial”.
De esta manera, puedo crear artboards para cada categoría (como listas, botones, inputs y así sucesivamente) y ubicar las instancias de los símbolos de la manera que me parezca más conveniente y que tenga sentido para mi. Aún así, necesitarás invertir algo de tiempo para actualizar esta página de vez en cuando, pero una vez que está creado, hará todo mucho más fácil y serás capaz de construir una pantalla nueva en, literalmente, un par de minutos.
Nota: Si prefieres usar la página de símbolos oficial, el plugin Symbol Organizer puede ayudarte a mantener todo más organizado.
Truco 4: Reemplazar símbolos
Reemplazar un símbolo existente por otro es bastante simple. Tan solo elige “Replace with” desde el menú contextual que se abre cuando usas el click derecho sobre la instancia. Sólo tienes que saber que el nuevo símbolo mantendrá la misma posición y tamaño que su predecesor; pero puedes solucionar esto último eligiendo “Set to original size” desde el mismo menú contextual (lo que hará será llevar la instancia a su tamaño real).
Truco 5: Separar
Una vez haz creado un símbolo, puedes separarlo para recuperar los elementos que lo forman, como grupo. Para hacer esto, elige “Detach from symbol” en el mismo menú contextual que he mencionado antes.
Truco 6: Exportar símbolos como imágenes
Los símbolos, como otros elementos, también pueden exportarse como imágenes de mapa de bits. Para hacer esto, tendrás que marcarlos como exportables (selecciona la instancia, y luego elige “Make Exportable” al fondo del Inspector —la barra que aparece a la derecha de la pantalla).
El problema que encontré en este proceso es que si el símbolo tiene algo de padding (por ejemplo, si las formas internas son más pequeñas que el tamaño total del símbolo, dejando espacio alrededor), cuando se exporte el símbolo Sketch ignorará el espacio en blanco y creará una imagen con el contenido visible solamente.
Una forma de solucionar esto es usando un slice. Cuando crees el slice, ubícalo sobre la instancia y asegúrate que coincida en tamaño (ancho y alto) y posición con la instancia; luego, selecciona el slice y usa las opciones de exportación que necesites.
Nota: Necesitarás hacer esto mismo cuando uses otras herramientas como Zeplin.
Lectura complementaria
“Sketch Symbol Best Practices (Now That Nested Overrides Are a Thing),” Lloyd Humphreys
Menciona varias técnicas y buenas prácticas para hacer un buen uso de símbolos.
Gestionando tamaños diferentes
En este mundo lleno de pantallas de múltiples tamaños y relaciones de aspecto, es importante asegurarse que tu diseño se adapte a diferentes escenarios. Esto es más fácil de conseguir si no tienes que diseñar todo desde cero cada vez; si no reutilizando elementos (o símbolos, como puede que ya hayas adivinado).
Aquí es cuando las opciones de escalado en símbolos son de más utilidad, para ayudarte a usar el mismo elemento con diferentes anchos y altos sin ninguna complejidad: por ejemplo, si cambias el tamaño de una instancia, esto no afectará a las otras. Recuerda que las opciones de escalado se aplican a capas individuales dentro del símbolo maestro, no a las instancias en sí mismas; entonces, aún cuando puedas cambiar los tamaños de instancias de forma individual, los elementos internos mantendrán el mismo comportamiento.
Nota: Las opciones que se mencionan a continuación son útiles no solamente para símbolos, si no también para grupos. Por otro lado, los comportamientos no son siempre predecibles, así que es muy posible que tengas que jugar y explorar un poco antes de encontrar lo que necesitas, combinando configuraciones en la mayoría de los casos.
Estirar (“Stretch”)
Cuando usas Stretch, una forma que tiene, digamos, el 50% del ancho total del símbolo mantendrá esta misma relación cuando la instancia se escale vertical u horizontalmente. Este es el comportamiento por defecto.
Anclar a la esquina (“Pin to Corner”)
“Pin to Corner” (como el nombre lo sugiere) anclará un elemento a la esquina más cercana, y ese elemento no escalará de tamaño, manteniendo la misma distancia a esta esquina. Ten en mente que si el objeto está centrado (con el mismo espacio a los lados) no sabrá cuál es la esquina más cercana (porque las dos los son… ¿o ninguna?) entonces se quedará en el medio, paralizado de indecisión.
Escalar objeto (“Resize Object”)
Cuando usas“Resize Object”, los elementos crecerán al mismo tiempo que mantienen un espaciado igual (o fijo) a los lados.
Flotar en el lugar (“Float in Place”)
“Float in Place” hará que un objeto mantenga su tamaño y su posición relativa a los límites del símbolo.
Truco 1: Volver al tamaño original
Si has cambiado el tamaño de la instancia, pero no estás satisfecho con el resultado, puedes volver a comenzar eligiendo “Set to original size” desde el menú contextual.
Truco 2: Límites
Ten en cuenta que los símbolos tienen sus propios artboards dedicados, y son estos los que definirán los límites del símbolo (aún cuando las formas que estén dentro los superen). Puedes hacer que este artboard tenga el mismo tamaño que su contenido seleccionándolo y eligiendo “Resize to fit” en el Inspector.
Truco 3: Usando caracteres y operadores
En los campos de ancho y alto en el Inspector, puedes usar operadores matemáticos para cambiar los valores. Por ejemplo, puedes usar100*2 para cambiar el ancho de un elemento a 200 pixeles. Otros operadores disponibles son + (sumar), - (restar) y / (dividir).
Además de los operadores matemáticos, en estos mismos campos también puedes usar L para escalar un elemento desde su esquina izquierda superior (este es el comportamiento por defecto), R para escalarlo desde la derecha, T para que sea desde su parte superior (por defecto), B para escalarlo desde abajo, y C y M para escalarlo desde su centro o mitad.
Por ejemplo, si tienes una forma que tiene un ancho de 200 pixeles y quieres cambiar su tamaño para que escale desde su lado derecho hacia la izquierda, podrías usar algo como300r.
Lectura complementaria
”Sketch 39 Resizing: Cheat Sheet” Peter Nowell
Este artículo es una buena referencia para entender las diferencias en las opciones de escalado que he comentado arriba. También incluye algunos trucos y consejos, ¡así que dale una leída!
Símbolos anidados (“Nested Symbols”)
¿Qué podría ser mejor que un símbolo? ¡Quizás un símbolo con otro dentro!
Esta función es relativamente nueva en Sketch, y ofrece un montón de posibilidades al combinar símbolos. Puedes poner un símbolo sobre otro, seleccionar ambos, y crear un nuevo símbolo que contenga las dos instancias. Puedes repetir esto tantas veces quieras. Aún así, tienes que ser moderado, o te encontrarás perdido en niveles y niveles de símbolos anidados, uno dentro de otro. Esto podría hacer el mantenimiento mucho más difícil, y también ser un síntoma de problemas de organización más grandes.
Los símbolos anidados pueden ser especialmente útiles cuando creas variaciones de un símbolo. Por ejemplo, podrías seguir un proceso como este:
- Elige un símbolo que servirá como base (este símbolo será el común a todos los otros casos);
- Superpónlo con otros símbolos complementarios (como iconos), que se mostrarán solo en determinadas ocasiones;
- Finalmente, crea un símbolo nuevo con el diseño resultante.
En la imagen que verás debajo, puedes observar que todas las filas tienen las mismas características (comparten el mismo tamaño, propiedades del texto y mismo margen a la izquierda); por eso creé un símbolo base que contiene solo los elementos comunes (es decir, aquellos compartidos con los otros símbolos). Usando este símbolo mínimo como punto de partida, creé otros elementos que se superponen, guardando el resultado en cada caso como un símbolo diferente; de esta forma todas las instancias debajo del título “Variations” son en realidad símbolos diferentes.
Pero no tienes —necesariamente— que crear un símbolo nuevo por cada estado de esa fila. Puede que haya una forma más simple, usando Overrides.
“Nested Overrides”
Si tuvieras que crear un montón de símbolos solo porque una parte de su contenido cambia, te volverías loco/a. Uno de las principales ventajas de los símbolos es precisamente tener que diseñar lo menos posible, y tener la menor cantidad de elementos que se pueda—y por lo tanto, más control sobre ellos. ¡Dale la bienvenida a “Nested Overrides”!
Un ejemplo práctico de este flujo de trabajo sería diseñar una barra de pestañas con sus diferentes estados. En este caso, el símbolo principal con las pestañas inactivas serviría como base, y luego habría un símbolo diferente por cada uno de los estados activos. Solo tienes que elegirlos en la sección de “Overrides” en el Inspector.
Nota: Para que esta técnica funcione, ten en cuenta que las pestañas inactivas dentro del símbolo principal (la barra) tienen que ser símbolos también. Además, asegúrate que todos los símbolos (tanto las pestañas activas como inactivas en el ejemplo) tengan exactamente las mismas dimensiones (en ancho y alto). En caso contrario, no aparecerán como opciones disponibles en el menú desplegable de “Overrides”.
Veamos otro caso de uso. Si tienes varios botones en tu diseño, pero cada uno con diferentes textos, entonces la opción de Overrides te permitirá cambiar el valor del texto (no así la fuente, o el tamaño; esto deberías editarlo directamente dentro del símbolo maestro) sin tener que crear un símbolo nuevo cada vez. Esto es tan simple de hacer como seleccionar la instancia y cambiar el contenido del texto en el Inspector.
Los Overrides no sirven solamente para textos, también los puedes usar para imágenes en mapa de bits e incluso para otros símbolos, como he comentado antes. De esta manera, puedes tener varias instancias de un mismo símbolo, cada una con una imagen diferente —y todo esto sin tener que editar el símbolo maestro.
Habrán algunos casos en los que no quiero que ninguna imagen en particular forme parte del símbolo maestro. En situaciones así, lo que suelo hacer es crear una imagen .png “vacía” sin contenido visible; crear una forma; y usar esta imagen como patrón de relleno (puedes encontrar esta opción en “Fill Options” cuando seleccionas una forma). Luego, cuando uso las opciones de Override en el símbolo, solo tengo que reemplazar la imagen transparente por la que quiera usar en cada caso.
Para sacarle el mayor partido posible a esta técnica, también uso un sistema de capas con un icono u otro elemento que actúa a modo de placeholder debajo de la imagen, y que por lo tanto será visible sólo en los casos en los que se mantenga la imagen original transparente. Una de las ventajas de hacer esto es que puedo simular el comportamiento del estado vacío, que normalmente debería mostrarse mientras las imágenes se cargan en un producto real, algo que me parece que debería diseñarse de todas maneras.
Truco 1: Nombres y orden de las capas
Uno de los motivos por los que ser organizado es una buena idea es porque la forma en que nombras y ordenas las capas dentro de un símbolo influirán en cómo se muestran en el panel de Overrides. Las etiquetas a la izquierda de los campos de ingreso de texto en el Inspector respetarán el nombre y orden que has definido previamente en el mismo símbolo, por lo que es mejor que prestes atención a esto si quieres tener un flujo de trabajo más eficiente.
Truco 2: El tamaño importa
Puedes reemplazar un símbolo anidado por otro solamente si el nuevo símbolo tiene exactamente el mismo ancho y alto que el actual.
Truco 3: Desplazando elementos dependiendo del largo del texto
Cuando cambias el valor de un texto en las opciones de Overrides, puedes hacer que un elemento se mueva a medida que el que está a su izquierda vaya haciéndose más extenso (mira la imagen de abajo para entenderlo mejor).
El texto o forma secundaria (el texto en azul en la imagen) tiene que necesariamente estar a la derecha del otro texto para que esto funcione. Además, ambos elementos deben estar separados por no más de 20 píxeles de distancia entre ellos (más sobre esto en las lecturas complementarias debajo).
Truco 4: Evitar los Overrides
Un símbolo puede empezar a verse un poco complejo por las opciones disponibles en Overrides. Por eso, si no quieres que un elemento aparezca como disponible para ser sobrescrito, tienes que bloquear o ocultar esa capa dentro del símbolo maestro para que no aparezca en la lista.
Truco 5: Ocultando símbolos anidados
Solo selecciona “None”en la sección de Overrides para ocultar un símbolo anidado. Por supuesto, sólo será invisible en esa instancia en particular.
Truco 6: Ocultando texto
Hay una forma para rápidamente hacer que un texto “desaparezca” en una instancia, usando los Overrides. Para conseguir esto, pon el valor del texto a un espacio en blanco, usando la barra espaciadora seguido de Enter en las opciones de Overrides.
Truco 7: Recuperar la imagen original
Si tienes una imagen de mapa de bits (un bitmap, vamos) dentro de un símbolo, se puede cambiar por otra usando las opciones de Overrides. Si ya lo has hecho, también es posible recuperar la imagen que estaba originalmente en la instancia (y que forma parte del símbolo maestro) eligiendo “Remover image override” haciendo click derecho sobre la cajita con la imagen a la derecha de “Choose Image” en el Inspector.
Lectura (y un video) complementaria
- “Hacking the Button in Sketch,” Aleksandr Pasevin
Muestra un hack simple para mantener un icono a la izquierda del texto (en lugar de la derecha, tal como es el comportamiento por defecto) en tan solo un par de pasos. - “Adaptive Text Elements,” Yaron Tamuz
Explica cómo usar elementos ocultos como separadores de textos, para evitar que se superpongan cuando cambiar sus valores. - “Sketch: Tint icons using nested symbols,” Francesco Bertocci
Una técnica sencilla para cambiar los colores de iconos dentro de un símbolo, usando máscaras. - “This Is, Without a doubt, the Coolest Sketch Technique You’ll See All Day,” Jon Moore
Comenta cómo ahorrar tiempo usando símbolos anidados, personalizándolos y ajustándolos a tus necesidades. El artículo también incluye algunas técnicas interesantes de otros diseñadores. - “Creating a Button System With Nested Symbols in Sketch App” (video), Pablo Stanley
En un video, Pablo te lleva por los pasos que necesitas para crear un sistema de botones, usando muchas de las cosas que hemos aprendido hasta ahora.
Plugins que se llevan bien con símbolos
Otra de las cosas buenas de Sketch, es que ahí dónde se queda corto en una funcionalidad, hay algún plugin que toma la posta y extiende el comportamiento para hacerlo más interesante que lo que viene “de fábrica”. Y algunos de estos plugins funcionan especialmente bien con símbolos, haciéndolos aún más potentes.
Sketch Runner
Entre sus muchas funciones, el plugin de Sketch Runner te va a ayudar a insertar símbolos en un documento usando una combinación de teclas. La opción de “go to” es muy útil para saltar a un símbolo en particular —interesante si tu proyecto tiene muchos símbolos y es complicado encontrarlos por otro medio.
Automate
Automate es muy potente y posiblemente hará que tu trabajo sea más eficiente. Sus opciones para gestionar símbolos incluyen algunas para remover los símbolos que no se estén usando, seleccionar todas las instancias de un símbolo, y mucho más.
Symbol Instance Renamer
Symbol Instance Renamer cambia el nombre de todas las instancias para que coincidan con el nombre de su símbolo maestro.
Symbol Organizer
Con Symbol Organizer puedes organizar los símbolos en tu página de símbolos por orden alfabético (incluyendo las capas) y en grupos separados, definidos por el nombre de los símbolos.
Auto Layout
Auto Layout se integra perfectamente con Sketch, y permite definir y ver diferentes tamaños para iPhone y iPad, tanto en formato vertical como horizontal. También permite funciones más avanzadas, como los “stacks” (un tipo especial de grupo que define la diagramación de sus capas internas), y opciones predefinidas tanto para iOS como para Android. Dale una mirada a su página de ejemplos para más información.
Nota: Estos son solo algunos de los plugins que pienso que pueden ser de más utilidad para ti, pero hay muchos más. Para más información, te recomiendo que visites de vez en cuando la página oficial de plugins de Sketch o la sección de plugins en Sketch App Sources.
Algunas ideas finales
Los símbolos en Sketch están evolucionando constantemente de versión en versión, por lo que es normal que veamos futuras mejores que los hagan aún más valiosos y relevantes para nuestro trabajo. Sin embargo, si tuviera que decir solo una cosa que me gustaría que tuvieran, sería la posibilidad de tener librerías compartidas de símbolos, quizás algo como lo que ya está haciendo Figma. Esto podría ser extremadamente útil, especialmente para el trabajo en equipo, cuando varios diseñadores trabajan sobre el mismo proyecto al mismo tiempo, tomando elementos de un documento primario, siempre actualizado, almacenado “en la nube”.
Nota: Acerca de esta función, estoy al tanto que el equipo de Sketch está trabajando en ello, así que con algo de suerte la veremos disponible pronto. El formato más abierto, disponible desde la versión 43 posiblemente está sentando las bases para que esto ocurra. De cualquier manera, lo espero con ansias, porque esto podría ser algo que mejore radicalmente el flujo de trabajo de muchos diseñadores.
Para ser sinceros, ya hay algunos plugins que te permiten conseguir más o menos el mismo comportamiento que he comentando más arriba, pero siempre encontré más fiable cuando esto es parte de la base de Sketch como software —algo que asegura que seguirá funcionando cuando el programa se actualice a una nueva versión.
Soy consciente de que hay muchas más técnicas y trucos. La forma de trabajar suele ser algo personal, y muchas veces no hay solo una manera correcta de hacer las cosas. En este artículo, he compartido aquellas técnicas que me parecen más confiables, interesantes, y que no requieren mucho hackeo. Por eso mismo hay algunas que no he mencionado, y que por lo tanto han quedado fuera.
¡Espero que te haya servido! Si lo fue, seguramente los símbolos se convertirán en la columna vertebral de tus archivos de diseño y los usarás a menudo (ojalá no también los domingos, como yo). Siéntete libre de dejar tus pensamientos e ideas, incluso otros consejos y trucos que conozcas en los comentarios. ¡También puede encontrarme en Twitter si necesitas ayuda!
¡Gracias por leer! Si crees que ha sido útil o interesante, por favor dale duro a esas 👏
También estoy publicando cosas en Twitter que te pueden interesar.
Este artículo apareció originalmente (en inglés) en Smashing Magazine.
