Tutorial de croquis

Cómo crear un sistema de diseño en Sketch (quinta parte)

Aquí me sumergiré en Símbolos Anidados y le mostraré cómo crear Componentes con todas las funciones para su Sistema de Diseño

¿Desea mejorar drásticamente su flujo de trabajo con mi sistema de diseño premium para Sketch? Puedes recoger una copia de Cabana aquí.

Use el código de oferta MEDIUM25 para recibir un 25% de descuento.

Construyendo componentes usando símbolos anidados

En los artículos anteriores, le mostré cómo construir las bases de lo que se convertirá en su Sistema de Diseño en Sketch, incluida la creación de elementos básicos como Color y Tipografía, Símbolos básicos como Iconos y Texto, y la construcción de Componentes más pequeños para usar en el sistema.

Ahora, en la Parte Cuatro, solo toqué brevemente los Componentes, y en la Parte Cinco realmente quería profundizar un poco más en la construcción de Componentes con todas las funciones con el poder de los Símbolos Anidados detrás de ellos.

Vamos a sumergirnos en ...

Campo de formulario (con etiqueta y mensaje)

Ok, déjenme mostrarles cómo construí algo que la gente clasificaría más como un componente con todas las funciones, todo cantando, bailando, con chispas adicionales.

Y todo con el poder de los Símbolos Anidados. Sí, vamos a 3 niveles de profundidad. ¡Christopher Nolan estaría muy, muy orgulloso!

Bueno, es un campo de Forma para ser exactos, nada demasiado alucinante, pero como te mostraré, verás cómo una variedad de elementos más pequeños (Símbolos) componen este Componente, y lo dividiré todo como vamos a lo largo

Echemos un vistazo a ver si ...

El componente terminado, como puede ver aquí, es un campo de formulario simple, con una etiqueta y un mensaje ...

Lo que etiqueté en su estado final de Símbolo como Entrada / Icono derecho + Etiqueta + Mensaje (se saca de la lengua, lo admito, pero es más fácil de encontrar en el menú desplegable de Símbolo más adelante, créanme).

Y aquí puede verlo en su estado de Símbolo intacto, antes de que se hayan ajustado las numerosas Anulaciones disponibles ...

Con el componente final compuesto por 3 símbolos separados ...

  • Etiqueta
  • Entrada
  • Mensaje

Okay. Déjame mostrarte cómo armé este componente ...

Símbolo de entrada

Oh. El símbolo de la etiqueta? Bueno, esto era simplemente un símbolo de texto que había creado anteriormente, por lo que volveremos a ese en breve.

El símbolo de entrada estaba compuesto por 4 símbolos separados ...

  • Cursor
  • Texto
  • Icono
  • Estado

En primer lugar, incluí uno de los símbolos de estado que había creado antes (puede leer más sobre estos en la Parte Tres aquí).

Cambió el nombre de la capa simplemente a State y la redimensionó a 160x40.

Luego inserté un símbolo de cursor que también había creado anteriormente (esto era simplemente una capa de forma en 1x24 construido a partir de un símbolo de color de relleno. Nada demasiado celoso), lo renombré simplemente como cursor y lo posicioné a 8 puntos de la izquierda, Parte superior e inferior del símbolo del estado.

Para el texto del marcador de posición, inserté uno de mis símbolos de texto existentes y opté por el color gris claro.

Cambió el nombre de la capa y luego la colocó en consecuencia.

Luego aumenté el ancho de su cuadro delimitador para que estuviera a 40 puntos del borde derecho del símbolo de estado, esto también lo haría a 8 puntos del borde izquierdo del símbolo de icono que agregué a continuación. Puedes ver a dónde voy, ¿verdad?

Y finalmente inserté uno de mis símbolos de icono, lo renombré y luego lo posicioné a 8 puntos del borde superior, inferior y derecho del símbolo de estado.

Luego, para terminar, seleccioné todas las Capas, las convertí en un Símbolo y lo llamé Entrada / Ícono derecho.

Con mi símbolo recién hecho en su lugar, simplemente agregué algunas restricciones de cambio de tamaño para terminar las cosas.

Para el cursor, lo fijé al borde izquierdo y arreglé el ancho y la altura ...

Para el texto, lo fijé al borde izquierdo y arreglé la altura ...

Y para el icono, lo fijé al borde derecho y arreglé el ancho y la altura ...

Símbolo de mensaje

El símbolo del mensaje estaba compuesto por un icono y un símbolo de texto. Muy simple.

Déjame mostrarte rápidamente cómo juntar esos elementos.

Primero, inserté un símbolo de icono que había creado anteriormente, lo renombré y luego lo reduje a 16x16.

Luego agregué uno de los Símbolos de texto, optando por un tamaño de texto más pequeño aquí debido al contexto en el que iba a aparecer.

Luego cambié el nombre del Símbolo de texto, seleccioné ambas Capas y lo convertí en un Símbolo, nombrándolo Entrada / Mensaje.

Con mi nuevo Símbolo listo, fue nuevamente, como te mostré antes, un caso de ajustar el tamaño de la mesa de trabajo para que se ajuste a la altura del símbolo del icono (16 puntos) ...

... ajustando la redacción (mediante anulaciones) del símbolo de texto, y ajustando el ancho de la mesa de trabajo en consecuencia ...

... luego para terminar, fue un simple caso de agregar algunas restricciones de cambio de tamaño.

Para el icono, lo fijé a los bordes superior e izquierdo, y arreglé el ancho y la altura ...

Y para el texto, lo fijé en los bordes superior, izquierdo y derecho ...

Entonces, con los 3 símbolos listos ...

  • Etiqueta
  • Entrada
  • Mensaje

... podemos anidarlos para crear un poderoso símbolo y, a su vez, un componente. Vamos a juntarlos todos.

En primer lugar, para la etiqueta, inserté un símbolo de texto, nuevamente optando por un tamaño de texto más pequeño, y cambié el nombre de la capa a etiqueta.

Luego inserté el símbolo de entrada, lo renombré simplemente a entrada y lo coloqué debajo de la etiqueta.

Luego, finalmente, insertó el Símbolo del mensaje, cambió el nombre a Mensaje y lo colocó debajo de la Entrada.

No me preocupaba la alineación y el espaciado todavía. Todo eso podría solucionarse una vez que los 3 Símbolos se hayan empaquetado en un Símbolo nuevo y nuevo.

Todo lo que hice fue asegurarme de que las Capas estuvieran organizadas de manera lógica ...

  • Etiqueta
  • Entrada
  • Mensaje

Lo que a su vez, coloca las anulaciones en un orden más manejable para usted más adelante.

Luego seleccioné los 3 símbolos y creé un nuevo símbolo.

Con el símbolo final construido (a partir de los 3 símbolos anidados), fue solo un caso de, como antes, hacer un pequeño cambio de tamaño de Artboard, ajustar las restricciones de cambio de tamaño y otros ajustes menores.

Y fue un poco algo como esto. Golpealo…

En primer lugar, cambié el tamaño de la mesa de trabajo para que se ajustara a los bordes izquierdo y derecho de la entrada ...

… Luego, con el Símbolo de entrada aún seleccionado, y utilizando las Restricciones de cambio de tamaño, lo fijó en Todos los bordes.

Y para el símbolo de etiqueta, aumentó su ancho al ancho completo de la mesa de trabajo y lo ajustó al borde superior.

Luego ajusté la anulación de texto para leer la etiqueta, y luego la fijé a los bordes superior, izquierdo y derecho, y fijé la altura usando las restricciones de cambio de tamaño.

Para el símbolo de mensaje, y como la etiqueta anterior, aumentó su ancho al ancho completo de la mesa de trabajo y luego lo ajustó al borde inferior.

Luego ajusté la anulación de texto para leer el mensaje, y luego lo fijé en los bordes inferior, izquierdo y derecho, y fijé la altura usando las restricciones.

Lo último que debía hacer era simplemente alinear los elementos verticalmente entre sí utilizando 8 puntos entre cada elemento y reajustar el tamaño de la mesa de trabajo si fuera necesario.

Con este componente finalmente construido, ahora tenía una gran cantidad de anulaciones al alcance de la mano ...

… Y esto me permitió personalizar con la mayor facilidad al trabajar en un proyecto.

Oh. Y antes de que te vayas (y si todavía estás conmigo), aquí hay una pequeña bonificación adicional sobre cómo construí las casillas de verificación, los botones de radio y los interruptores de palanca en mi sistema de diseño ...

Caja

Para las casillas de verificación fue simplemente un caso de reunir 2 elementos existentes desde el interior de mi sistema; Icono y símbolos de texto, creando las anulaciones necesarias y luego aplicando las restricciones de cambio de tamaño requeridas.

Los 5 Estados diferentes que buscaba en forma de Componente eran los sospechosos habituales ...

  • Normal
  • Flotar
  • Indeterminado
  • Comprobado
  • Discapacitado

Déjame mostrarte cómo armar la casilla de verificación ...

En primer lugar, hice referencia a los símbolos de icono / casilla de verificación que había creado antes ...

... y de los que inserté la casilla de verificación / estado normal.

Luego hice referencia a los símbolos de texto que también había creado anteriormente ...

... y se dejó caer en uno de esos ...

Luego cambié el nombre de las capas a algo un poco más manejable (icono y texto), seleccioné ambas y las convertí en un nuevo símbolo (entrada / casilla de verificación + etiqueta).

Una vez que tuve este nuevo Símbolo listo y listo, fue un caso de hacer un poco de ajustes para obtener el tamaño y el espaciado correctos.

Ajusté la mesa de trabajo para que se ajustara a la altura del símbolo del icono (24 puntos) ...

Luego, usando las Anulaciones en el Símbolo de texto, renombré eso a 'Etiqueta' y (una vez más invocando el poder todopoderoso de Grayskull, me refiero al Sistema de cuadrícula de 8 puntos) lo posicioné 8 puntos a la derecha del Icono, y luego modifiqué el ancho de la mesa de trabajo para el borde derecho se ajustó al borde derecho del Símbolo de texto ...

Finalmente, para mantener todo en modo de cambio de tamaño feliz avanzando, fijé el ícono en el borde superior e izquierdo, y arreglé el ancho y la altura.

Y para el símbolo de texto, anclado a los bordes superior, izquierdo y derecho.

Ahora tenía un componente de casilla de verificación que podía fácilmente (con una serie de anulaciones a mi disposición), ajustar los estados, editar el texto, cambiar el tamaño con facilidad y más ...

¡¡Días felices!!

Luego seguí un proceso muy similar tanto para el botón de radio como para los componentes del interruptor de palanca ...

Elegir 4 estados para los botones de radio ...

  • Normal
  • Flotar
  • Comprobado
  • Discapacitado

... y para el interruptor de palanca ...

  • Apagado
  • En
  • Discapacitado

Espero que con esta mirada más profunda a los Símbolos dentro de un Sistema de Diseño, en particular los Símbolos Anidados (que se sabe que asustan a algunas personas cuando se trata de comprender cómo funcionan correctamente), ahora tienen una mejor comprensión de cómo construya componentes con todas las funciones que están listos para la personalización y con la mayor facilidad.

¿No quieres construir un sistema de diseño tú mismo? Puedes recoger una copia de Cabana aquí.

Use el código de oferta MEDIUM25 para recibir un 25% de descuento.

Gracias por leer el articulo,

Bagazo

Diseñador, autor, padre y amante de grandes secuelas (Blade Runner 2049 te estoy mirando)