Tutorial de croquis

Cómo crear un sistema de diseño en croquis (parte cuatro)

Te mostraré cómo combinar varios símbolos para construir componentes más personalizables.

¿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.

Desarrollando sus Componentes

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 y luego en los Símbolos básicos, como Iconos y Texto, que luego se pueden implementar en innumerables otros símbolos a medida que avanza.

En la Parte Cuatro, quiero mostrarle cómo combinar estos Símbolos más pequeños, como Color, Texto, Iconos, Formas de botones y Estados para comenzar a construir algunos Componentes pequeños para su sistema de diseño, con la ventaja adicional de Restricciones de cambio de tamaño de Sketch para que sean adaptables a diferentes tamaños de pantalla.

Tenga en cuenta: como mencioné en los artículos anteriores, no le mostraré cómo crear cientos de símbolos o componentes. Solo te daré una breve idea de algunos de los elementos clave aquí.

Vamos a sumergirnos en ...

Para los componentes del botón, opté por 3 tamaños (pequeño, mediano y grande) para darme cierta adaptabilidad al crear ilustraciones para varios tamaños de pantalla.

También traje el sistema de cuadrícula de 8 puntos que mencioné en la primera parte una vez más, para mantener un elemento de uniformidad en todo momento.

Comenzando con los botones grandes, elegí crear 4 variantes de componentes:

  • Predeterminado (sin icono)
  • Ícono (sin texto)
  • Icono izquierdo (con texto)
  • Icono derecho (con texto)

Suficiente en cuanto a variedad de diseño para ubicar en el 99.9% de los proyectos que creará en una etapa posterior.

Entonces, comenzando con el componente de botón Grande / Predeterminado, primero coloqué la Forma / Relleno / Radio - 4px que había creado anteriormente. Ahora puede elegir el símbolo con un radio de 0px o 100px para que sea el valor predeterminado que depende totalmente de usted.

Luego cambié el nombre de la Capa simplemente a Botón, y noté que con solo esta Capa en su lugar, también tenía las Anulaciones de Símbolo (Estado y Color del Botón) a mi disposición en adelante. Muy práctico de hecho!

De los Símbolos de texto que había creado anteriormente, coloqué el Texto / Botón / Grande / Centro / Símbolo blanco, y simplemente cambié el nombre de la Capa a Texto.

Ahora, con el deseo de adherirme al sistema de cuadrícula de 8 puntos, y usando un poco de cálculo, ajusté el ancho y la altura de la capa del botón para que la capa de texto que acabo de agregar se alineara 8 puntos desde la parte superior e inferior del botón, y 32 puntos desde Los bordes izquierdo y derecho.

Con la capa de botones redimensionada en consecuencia, y la capa de texto alineada correctamente, seleccioné ambas capas y las convertí en un símbolo nombrándolo como tal: Botón / Grande / Predeterminado.

Ahora trabajando con el Símbolo de botón recién creado, seleccioné el Símbolo de texto dentro de él ...

... y desde las Restricciones de cambio de tamaño en el Panel del inspector, lo fijó en los bordes izquierdo y derecho, y fijó la Altura. Ahora, cada vez que cambio el tamaño de este Símbolo de botón dentro de mis proyectos, sé que el texto dentro de él se alineará perfectamente.

Ahora, insertando este símbolo en un proyecto, tengo una gran cantidad de opciones (anulaciones) a mi disposición, lo que me permite modificar este componente con un mínimo esfuerzo. ¡Huzzah con chispas!

Sobre el botón del icono. Nuevamente, simplemente inserté la Forma / Relleno / Radio - Símbolo de 4px que había creado anteriormente, lo renombré y luego lo ajusté a una forma más cuadrada.

Luego, desde mis Símbolos, soltado en uno de los Iconos que había creado anteriormente, renombrado Capa (Icono), cambió su Anulación de color a Blanco ...

... y luego, usando la herramienta Escala, aumentó su tamaño a 32 x 32px.

Luego ajusté las dimensiones de la capa de forma, por lo que el símbolo del icono se alineó 8pt desde todos los bordes.

Con la capa de botones y la capa de texto alineadas correctamente, seleccioné ambas capas y las convertí en un símbolo nombrándolo como tal: Botón / Grande / Icono.

Ahora, trabajando con el Símbolo de botón recién creado, seleccioné el Símbolo de icono dentro de él, y al usar Resize Restricciones se corrigió el Ancho y la Altura. Esto simplemente evita la distorsión del icono cuando el símbolo cambia de tamaño dentro de sus proyectos.

Pasando al botón / símbolo de icono grande / izquierdo, siguiendo pasos similares a los botones anteriores que había creado, inserté un símbolo de forma / relleno / radio - 4px y luego ajusté sus dimensiones ligeramente (180px x 47px si quería saber el dimensiones exactas) ...

Luego inserté un símbolo de icono, lo renombré, lo escalé a 32 x 32px y cambié la anulación de color a blanco.

Y a partir de los Símbolos de texto que había creado anteriormente, coloqué el Símbolo de texto / botón / Grande / Izquierda / Blanco y cambié el nombre de la Capa a Texto.

Y una vez más, adhiriéndome al sistema de cuadrícula de 8 puntos, alineé el símbolo del icono, por lo que era 8 puntos desde el borde superior, inferior e izquierdo.

Y para el símbolo de texto, de modo que estaba a 16 puntos a la derecha del icono, a 8 puntos de la parte superior e inferior del símbolo de botón, y usando los controles de cambio de tamaño, ajústelo de modo que su cuadro delimitador esté a 16 puntos del borde derecho del símbolo de botón .

Ahora, con las 3 capas seleccionadas (texto, icono y botón), lo convertí en un símbolo y lo llamé botón / icono grande / izquierdo.

Trabajando desde el símbolo del botón recién creado, primero seleccioné el icono y lo fijé al borde izquierdo, y luego fijé su ancho y alto.

Luego, con el Símbolo de texto seleccionado, lo fijé a los bordes izquierdo y derecho, y arreglé la Altura.

Finalmente, para el Botón / Símbolo de icono grande / derecho, seguí un proceso similar a los botones anteriores.

  • Insertar un símbolo de relleno de forma y ajustar sus dimensiones
  • Insertar un símbolo de icono, ampliarlo y anular su color
  • Insertar un símbolo de texto (nuevamente usando la variante alineada a la izquierda)

Luego, alinee y cambie el tamaño (cuadro delimitador) del Símbolo de texto para que quede 16 puntos desde el borde izquierdo, 8 puntos desde el borde superior e inferior del botón y 16 puntos desde el borde izquierdo del icono.

Y para el símbolo del icono, entonces estaba a 8 puntos del borde derecho, superior e inferior del botón.

Luego seleccioné las 3 capas (texto, icono y botón), y una vez más lo convertí en un botón de símbolo / icono grande / derecho.

Y finalmente, con las restricciones de cambio de tamaño, fijó la capa de texto en los bordes izquierdo y derecho, y fijó su altura.

Y para el icono, lo fijó en el borde derecho y fijó su ancho y alto.

Después de poner en juego los símbolos de botón grande, pasé por las variantes media y pequeña siguiendo un proceso muy similar al que te he mostrado, pero esta vez insertando, por ejemplo, el texto / botón / medio / centro / blanco Símbolo, y escalar el Símbolo de icono en consecuencia, pero aún adherido al Sistema de cuadrícula de 8 puntos.

Hasta que tenía 12 componentes bastante buenos ahora a mi disposición. Oooh me gusta eso!

Luego creé componentes como elementos de formulario, menús y menús desplegables, navegación, paginación y más. Elementos clave para cualquier proyecto en el que esté trabajando, pero en una forma que ahora era fácilmente personalizable y me permitió mantenerme en el punto al trabajar en un proyecto.

Me abrió los ojos a cómo solo crear esos elementos fundamentales más pequeños como Texto, Color y Símbolos de iconos, luego te permite simplemente construir componentes mucho más grandes con facilidad, y cómo esos pequeños bloques de construcción son clave para cualquier tipo de Sistema de diseño que Estás esperando construir.

Únete a mí para la Parte 5 (que puedes ver aquí)

¿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 las patatas fritas (o papas fritas, si está al otro lado del estanque)