Mejores prácticas de símbolos de croquis (ahora que las anulaciones anidadas son una cosa)

En Tradeshift, estamos comenzando a mantener un documento Sketch central con todos nuestros símbolos. Para ser agregado a este documento, un símbolo debe ser de cierta calidad. Todos los que diseñen para nosotros (y potencialmente nuestros socios) utilizarán este documento, por lo que no queremos distribuir nada más que los símbolos más sólidos.

Los símbolos deben comportarse de manera similar, ser lo suficientemente pequeños como para ser modulares, ser lo suficientemente grandes como para ser útiles y estar bien organizados para facilitar la edición (o incrustarlos en un documento cuando se separan).

A nadie le gusta heredar un archivo Sketch mal organizado, así que no distribuyamos símbolos mal organizados.

Crea el componente más básico que puedas

Idealmente, no deberías separar los símbolos a menudo, porque eso frustra el propósito. Cree la versión más básica de un componente, símbolos individuales que puede combinar más adelante para crear un conjunto más fácil de mantener. Puede hacer cambios con mayor confianza si el símbolo cambia, está haciendo cambios con un alcance más pequeño.

Los símbolos anidados hacen que esto sea un poco más un asunto matizado, pero use su sentido común y creará símbolos potentes y fáciles de mantener.

Sea inteligente al dividir los símbolos y combinarlos para una fácil manipulación

Nombrando tus símbolos

Nombra tus capas apropiadamente. Intentamos mantenernos en minúsculas, separados por guiones.

Sketch organiza automáticamente los símbolos en carpetas cuando pones un / en el nombre:

Las dependencias del campo de entrada se ordenan en la carpeta / in /

Recomiendo una convención de nomenclatura de control / definición del estado de la propiedad. Los estados predeterminados no deberían tener un estado: tab-inactive y tab-active es redundante. tab, tab-active es el camino a seguir. Sus nombres no deberían estar demasiado vinculados a los atributos físicos de los controles, ya que es probable que evolucionen.

botón / mouseover primario
botón / desactivado primario
en / entrada / campo / activo

Denota dependencias de símbolos anidados

También recomiendo usar su convención de nomenclatura para denotar dependencias ahora que los símbolos anidados son una cosa. Cuando copie símbolos entre documentos, es bueno saber que necesita copiar todos los símbolos con el prefijo en / para que los campos de entrada se comporten como espera. También mantiene su panel de símbolos de inserción ordenado.

Los símbolos organizados hacen tu vida más fácil

Al usar Sketch Runner, establecer una convención de nomenclatura significa que siempre podrás encontrar lo que estás buscando porque hay un patrón en lo que estás buscando.

Nombrando tus capas

Dé a las propias capas nombres apropiados y consistentes. Los fondos siempre deben llamarse fondo y no mezclarse con bg, por ejemplo. Si separa el símbolo, debe seguir siendo un objeto ordenado y autónomo.

El texto es especialmente importante. Asegúrese de que los símbolos anidados que reemplazará regularmente (es decir, para diferentes estados) tengan los mismos nombres de capa de texto. Si reemplaza un símbolo, persistirá cualquier texto de anulación si comparte el mismo nombre de capa de texto.

Puede cambiar el nombre de las instancias de símbolos y no afectará el enlace al original. Como tal, he decidido nombrar instancias de símbolos con texto en minúsculas y texto que editan en mayúsculas. Esto es solo una cuestión de preferencia.

Jerarquía de capas

Ponga cualquier texto editable en la parte superior de sus grupos como regla. Luego, cuando presiona regresar dos veces para expandir un grupo, ¡está editando el texto de inmediato!

Los símbolos se reutilizarán, separarán y volverán a mezclar; deben estar muy bien organizados, para que cualquiera pueda entender rápidamente lo que sucede cuando miran debajo del capó.

Su jerarquía de capas se refleja en el panel de anulaciones. Si su símbolo principal tiene símbolos anidados que se editarían en un orden lógico, asegúrese de que el panel de anulaciones lo refleje.

Usar símbolos anidados en el panel de anulación

Los símbolos que tienen las mismas dimensiones estarán disponibles en el panel de anulaciones como opción de reemplazo. Esto es especialmente útil para los iconos:

todos estos íconos comparten las mismas dimensiones

También es realmente poderoso para los estados cambiantes:

Mediante el uso de símbolos anidados, puede crear controles súper flexibles que imiten sus posibles estados en cualquier biblioteca de IU que pueda estar usando (como nuestra biblioteca de componentes de IU en Tradeshift)

Todos estos son el mismo símbolo:

El mismo símbolo con varias anulaciones forzadas

Cambio de tamaño a prueba de balas

Si distribuye símbolos que se rompen cuando los redimensiona, ya ha perdido la guerra. Alguien que no esté familiarizado con el funcionamiento interno de los símbolos se separará del símbolo más rápido de lo que puede parpadear y todo su trabajo fue en vano.

Juega con ellos, pruébalos, intenta romperlos. ¡Construye algo a prueba de balas! Unos minutos extra de tu tiempo para perfeccionar el símbolo te ahorrará dolores de cabeza en el futuro y hará felices a todos los que tengan que usar y mantener tus símbolos.

Mira la hoja de trucos para cambiar el tamaño de Peter Nowell

Consejos varios

El texto debe ser arreglado

El texto debe estar fijo y alineado correctamente, de modo que cuando cambie el tamaño de un símbolo mantenga su posición y relleno correctamente. El texto debe tener una propiedad de cambio de tamaño de "Cambiar tamaño de objeto". Esto rompe el ajuste de cambio de tamaño de la capa final, pero de todos modos nunca puedo lograr que funcione de manera confiable.

El texto de marcador de posición es una oportunidad para reforzar las mejores prácticas

Por ejemplo, nuestro contenido de texto de marcador de posición (no el nombre de la capa) es "INTENTO DE ACCIÓN" como un recordatorio pasivo de cómo se debe redactar la microcopia de un botón.

Diseña la versión más pequeña de un símbolo

Es más fácil diseñar alrededor de símbolos de estiramiento que comprimirlos.

Sustitución de símbolos

Boceto reemplazará un símbolo con otro y comprimirá / estirará el símbolo para que se ajuste a las mismas dimensiones. Si reemplaza símbolos con dimensiones que no coinciden, puede hacer clic con el botón derecho-> Establecer en tamaño original para corregirlo.

Use alt + enter para insertar un salto de línea en objetos de texto anidados

Soporte multilínea para texto, ¡boom!

Bloquee símbolos anidados para evitar que aparezcan en el panel de anulaciones

Al bloquear símbolos anidados en la mesa de trabajo original de símbolos, ya no aparecen como una anulación en el inspector. Gracias a Matt Healy!

Los símbolos deben explicarse por sí mismos.

Sin embargo, no está de más proporcionar algunos antecedentes sobre los más complejos, especialmente si su equipo no está tan familiarizado con ellos.

Archivos de ejemplo

En los comentarios, me pidieron un archivo de ejemplo. No es algo que pueda regalar todavía, ¡pero UX Power Tools ha hecho un gran trabajo! Echale un vistazo.

Deja un comentario o @Lloyd en Twitter con cualquier comentario o idea para v3.

¡También estamos contratando en Tradeshift!