Uso de los símbolos de Sketch como enlaces para grandes proyectos

Un truco simple para navegar proyectos de Sketch enormes más rápido

Una de las cosas que me encanta de Sketch es la facilidad con que los proyectos pueden seguir creciendo dentro del mismo archivo. No hay límites en la cantidad de mesas de trabajo o páginas que puede caber en un documento.

En un proyecto de diseño reciente, mi archivo Sketch creció a 25 páginas. (Estoy seguro de que para muchos otros usuarios avanzados, ¡este número no es impresionante!). Estaba perdiendo un tiempo precioso simplemente cambiando entre páginas, a pesar de los trucos existentes como el atajo de teclado fn ⬆ / ⬇, o el complemento Sketch Runner. Pero un día me topé con un pequeño truco por usar Símbolos, tanto sus Artboards e instancias maestras, para ayudarme a sortear el proyecto masivo.

En Sketch, hacer doble clic en una instancia de Symbol lo teletransportará a la mesa de trabajo maestra de ese Symbol, donde sea que esté en el proyecto. Así que traté de crear un símbolo que solo incluyera el título de mi página (por ejemplo, "iconos"), luego incluí una instancia de ese símbolo en cualquier otro lugar de mi documento donde pudiera beneficiarme de un enlace rápido a esa página (por ejemplo: " Barras de herramientas "que usan esos iconos).

Poder hacer doble clic en la instancia del símbolo "Iconos" (desde cualquier parte de mi proyecto) y saltar de inmediato a la página de iconos comenzó a ahorrarme entre 5 y 10 segundos cada vez que necesitaba cambiar a esa página. Ya no tuve que desplazarme por docenas de páginas (y leer sus nombres) para llegar a mis íconos. Esto puede parecer una cantidad de tiempo insignificante, pero puede ser perjudicial para el enfoque y el flujo, y cuando se multiplica por la cantidad de veces que cambia entre las áreas de un gran proyecto de Sketch todos los días, el impacto es significativo.

Muchos diseñadores ya usan una capa de texto grande sobre sus Artboards como encabezado. Algunas veces esto refleja el nombre de la Página (ej .: “Iconos”), y otras veces el encabezado denota áreas separadas en la misma Página. Los ejemplos del último escenario incluyen "Iconos finales" y "Espacio de trabajo de iconos"; o las versiones "Android" e "iOS" de las mismas maquetas.

Lo bueno de este truco de Symbol Links es que se basa perfectamente en ese hábito. La única diferencia es que esos encabezados ahora tienen una mesa de trabajo a su alrededor y se han convertido en un símbolo.

Puede pensar en estos Símbolos como marcadores de los lugares importantes alrededor de su proyecto, y las instancias de esos Símbolos como hipervínculos.

Además, este truco de enlaces de símbolo funciona igualmente bien entre páginas o dentro de la misma página. Por lo tanto, puede organizar su proyecto de Sketch como desee: distribuir Artboards en muchas páginas o acumular toneladas de Artboards en un pequeño número de páginas. (Sin embargo, vale la pena señalar que menos Artboards por página pueden mejorar el rendimiento de Sketch al navegar por el lienzo).

Me sorprendió la cantidad de situaciones en las que se puede utilizar este simple truco, y dudo que haya descubierto todo su potencial.

Aquí están mis consejos favoritos y casos de uso:

Los enlaces pueden ser de cualquier tamaño

Sketch 48 introdujo la capacidad de escalar instancias de símbolos proporcionalmente (que no es lo mismo que cambiar el tamaño de su ancho o alto). Al usar el truco de Enlaces de símbolos, Escala le permite hacer los enlaces (instancias de símbolos) más pequeños que su mesa de trabajo maestra original. Por lo tanto, la mesa de trabajo maestra de Symbol para el título / marcador de su área (ej .: "Iconos") puede ser enorme, pero todos los enlaces a ella (instancias de Symbol) pueden ser más pequeños.

Agregar iconos para mayor claridad

Debido a que estamos creando Símbolos para todo el proyecto a partir de estos encabezados para cada área, es importante que su contenido sea único. Para usar un ejemplo anterior, en lugar de escribir "Android" e "iOS" sobre esas maquetas dentro de una Página, tiene sentido incluir también una descripción de esas maquetas, como el nombre de la Página. De lo contrario, tendrá varios símbolos que dicen "Android" o "iOS".

Si bien generalmente es una buena idea describir el tema del área con palabras (por ejemplo, "Pantalla de inicio de sesión"), algunos otros descriptores pueden simplemente usar íconos.

Otro ejemplo sería un diseño web receptivo. Puede organizar cada página web para que sea su propia página en Sketch y luego crear marcadores para los teléfonos inteligentes, tabletas y maquetas de escritorio. Los iconos pueden denotar el tamaño de la pantalla.

Si estamos usando íconos, ¿por qué no convertirlos en símbolos también, para que cada enlace (instancia) pueda intercambiar entre íconos en las anulaciones de símbolos? Puede ser útil convertirlos en una flecha o un ícono de enlace, para que pueda identificar fácilmente los enlaces en torno a su proyecto. Para una solución rápida y sucia, puede usar emojis en las anulaciones de texto en lugar de iconos personalizados.

Utilice las anulaciones de símbolos para cambiar el texto de un enlace o intercambiar su icono. (Nota: el icono debe ser un símbolo anidado)

Encontrará una demostración de todos estos ejemplos, junto con copias de los íconos, en el archivo Sketch, a continuación.

Crear una tabla de contenido

Puede usar enlaces de símbolos en sus proyectos tanto o tan poco como desee. Si lo usa sistemáticamente para organizar sus documentos de Sketch, ¡incluso podría crear una tabla de contenido para proyectos grandes!

Cuando trabaje en un equipo o proporcione a otros acceso a sus archivos de Sketch, una tabla de contenido es una forma amigable de mostrar a las personas. Incluso puede agregar notas junto a los enlaces, como "trabajo en progreso", o oraciones completas que sirven como documentación.

Página

Una tabla de contenido definitivamente no es necesaria para todos los proyectos. Pero si su documento de Sketch crece a un tamaño grande, o si otras personas lo abrirán, una tabla de contenido puede ser una solución fantástica.

Enlace entre sus borradores y finales

Creo que es tan importante que los diseñadores tengan un área de experimentación desordenada en sus documentos de Sketch. El hecho de que nuestro diseño final pueda parecer un sistema bien cuidado, una cuadrícula perfecta de mesas de trabajo terminadas, no significa que nuestro proceso creativo deba ser tan rígido. Te animo a que tengas áreas de tu lienzo (si no páginas completas) donde puedas jugar. Y con Symbol Links, es fácil ir entre el área de experimentación y sus activos finales.

"Pero ya uso símbolos en todas partes"

Si todos sus íconos y componentes de la interfaz de usuario ya son símbolos, es posible que piense que este truco no es útil: ya puede hacer doble clic en una instancia para volver a su mesa de trabajo maestra. Pero puede beneficiarse colocando enlaces cerca de esas mesas de trabajo maestras de símbolos; enlaces a diferentes diseños que usan esos símbolos. Por ejemplo, junto a un conjunto de iconos de la barra de herramientas, podría tener un enlace a las "Maquetas de la barra de herramientas" que usan esos iconos.

Además, pasar de A a B puede ser frustrante si sus símbolos incluyen otros símbolos ("anidados"). Imagine un icono Símbolo dentro de un elemento de la interfaz de usuario Símbolo dentro de un diseño de "fila" Símbolo dentro de una maqueta final: se encontrará haciendo doble clic muchas veces para pasar de su maqueta a ese icono. Los enlaces de símbolos pueden hacer esto mucho más fácil si crea enlaces para los lugares de su proyecto donde es probable que vaya a continuación.

Consejos y trucos esenciales

  • Al hacer doble clic en un símbolo, Sketch mantiene la misma cantidad de zoom en el lienzo. Eso significa que si está trabajando con Artboards de íconos pequeños, luego hace clic en un enlace para ir a las maquetas de pantalla completa, tendrá que alejarse. Por esa razón, el método abreviado de teclado del comando 1 es su mejor amigo: se aleja para mostrarle todo en la página. Constantemente uso este acceso directo después de hacer clic en un enlace.
  • Los documentos de croquis pueden llenarse rápidamente de símbolos, por lo que sugiero agrupar todos estos enlaces de símbolos para que ocupen un espacio mínimo en su lista de símbolos. Simplemente comience los nombres de los símbolos con Enlace / u Otro /.
  • Aunque el color de fondo de la mesa de trabajo maestra de símbolos de un enlace se puede cambiar fácilmente al color gris claro del lienzo (# F2F2F2), si las sombras de la mesa de trabajo lo molestan, se pueden deshabilitar en la barra de menú: Ver> Lienzo> ✓ Mostrar sombra de mesa de trabajo .
  • He descubierto que la forma más eficiente de crear un nuevo enlace de encabezado (la mesa de trabajo maestra de Symbol con el nombre de esa área) es copiar y pegar una anterior que haya creado, luego cambiar el nombre de la mesa de trabajo y su contenido. Incluso podría comenzar con los que están en mi archivo Sketch, a continuación.

Boceto de demostración y plantilla:

Descargue mi archivo Sketch, que muestra todos los ejemplos de este artículo. Es un punto de partida útil para integrar enlaces de símbolos en su propio proyecto.

Descargo de responsabilidad!

No olvide que técnicamente se trata de un truco: utiliza una determinada funcionalidad de una manera diferente a la prevista originalmente. Sketch podría cambiar el comportamiento de cómo las instancias de Symbol se vinculan de nuevo a sus Artboards principales, lo que podría afectar este flujo de trabajo. Parece poco probable, pero vale la pena señalarlo.

¿Podría un plugin hacer esto mejor?

¡Absolutamente! Un complemento podría mejorar este truco de varias maneras: agregando una IU formal para hipervínculos, especificando en qué área del lienzo del objetivo se enfocará inicialmente y eliminando el desorden adicional agregado a su lista de símbolos. Si eres un desarrollador interesado en crear este complemento, ¡estaré encantado de ayudarte!

Pero no hubiera escrito este artículo si pensara que un complemento es necesario. El flujo de trabajo del uso de símbolos ha demostrado ser lo suficientemente bueno.

Espero que Symbol Links te ayude a acelerar tu flujo de trabajo, y me encantaría saber si tienes nuevos usos o sugerencias para este truco. ¡Gracias por leer!

Suscríbete a mi boletín para obtener información sobre mi proceso creativo y sé el primero en saber cuándo publico nuevos artículos.

Si disfrutaste este artículo, te encantará Sketch Master, mis cursos de capacitación en línea para profesionales que aprenden Sketch. Aprenderá toneladas de trucos y flujos de trabajo prácticos, diseñando proyectos de íconos y UI / UX del mundo real.