Share
Lo que vas a crearEste tutorial te mostrará cómo organizar una guía de estilo usando Sketch. Además, te enseñará algunas habilidades básicas para usar Sketch en otras situaciones. Revisaremos todo, desde la configuración de la tipografía, el uso de diversos tipos de cuadrículas, hasta las mejores prácticas para el uso de “símbolos” y “estilos compartidos”.
Establecer estilos de letra reutilizables en Sketch le ahorrará mucho tiempo. Con la herramienta de texto seleccionada, verá un pequeño cuadro en el lado derecho de la aplicación que le permite configurar todo tipo de estilos de tipos como la familia de fuentes, el peso de la fuente e incluso el espaciado de caracteres..
Veamos cómo podemos usarlo en nuestro propio documento de guía de estilo..
Cada vez que trabajo con tipografía me gusta usar una copia real (en lugar de una copia de relleno genérica). Creo que facilita la experiencia de diseño y le da al resultado final más contexto y voz genuina.
Comience con los diferentes tipos de texto que tendrá su diseño. En este archivo tenemos cuatro encabezados, no seis, ya que no necesitamos tantos.
Nota: Cada uno de estos es un objeto de texto separado..
Es recomendable poner las capas en el orden correcto.El primer elemento que se diseñará es el subencabezado, que acompaña al H1, pero más sobre esto más adelante. Sketch no tiene una configuración para dictar el "caso" del carácter, por lo que para que el subencabezado sea mayúscula, debo ingresarlo manualmente..
Haga esto cuando sea relevante para cada elemento de texto que tenga. No se preocupe por el espacio en la mesa de trabajo todavía, lo veremos más adelante.
Puede crear estilos de texto reutilizables de dos maneras. Primero, seleccione un texto con el estilo que le gusta y luego haga clic en Sin estilo de texto desde arriba los ajustes de tipo a la derecha. Luego, seleccione Crear nuevo estilo de texto de la parada abajo.
Nota: Para transferir estos estilos a otro los archivos copian y pegan los objetos de texto deseados y los estilos se transferirán automáticamente.
La segunda forma de crear un estilo de texto en Sketch es crear el nuevo estilo de texto en el menú desplegable, como se vio anteriormente, y luego agregar el estilo para ese estilo. No importa cuál venga primero. Lo que importa es que entiendas que cualquier cambio en el estilo de un estilo de texto afectará a todos los demás elementos de texto que usan ese estilo. Por lo tanto, si cambiara el color del encabezado Mini, reflejaría este cambio en cada artículo..
No hay una manera fácil de ajustar el estilo para diferentes tamaños de pantalla. Mi trabajo actual es crear estilos de texto separados para pantallas móviles además de mis estilos de escritorio.
Hay tres referencias para las medidas en Sketch: cuadrícula, diseño y regla. Repasemos los tres muy rápido y veamos cómo deben usarse. Una vez hecho esto, hablaremos sobre su uso para configurar el diseño de su página.
Para alternar la vista de la regla presione Ctrl + R (Fácil de recordar). Los gobernantes no deben usarse como principal Forma de cuadrícula en Sketch, las otras dos opciones son mucho más adecuadas para eso. Use la regla para alinear las cosas o para verificar la alineación como en la captura de pantalla a continuación.
De forma similar a la regla, para alternar la vista de cuadrícula, presione Ctrl + G. La cuadrícula es un sistema de cuadrados que puede ajustar el lado de. Los uso para diseños que no necesariamente se adhieren a un estilo de página web centrado típico. Lo mejor de la cuadrícula en Sketch es que cubre toda la mesa de trabajo (si aumenta el tamaño de la mesa de trabajo, la cuadrícula crecerá).
Puedes configurar el tamaño de las unidades de Grid para que sea cualquier cosa. También puede resaltar un conjunto de filas, el valor predeterminado es cada 10.
Para alternar el diseño, presione (adivinar) Ctrl + L. Este es un toque más complicado en términos de todos los diferentes puntos de datos que debe proporcionar, pero le proporciona una cuadrícula de diseño perfectamente personalizada; perfecto para el diseño de sitios web!
Nuestra cuadrícula se basa en unidades de 30 px, por lo que todos los números que ve en la captura de pantalla de abajo lo reflejan. Una vez que sepa cuál es su cuadrícula, ingrésela en la opciones de diseño.
Si no sabe cuál debería ser su grilla, use la opciones de diseño Para jugar, mantiene las proporciones y recalcula todo para ti. Digamos, por ejemplo, que mi diseño use once columnas en lugar de doce, pero aún así mantenga su ancho total. Si disminuyo el recuento de columnas, Sketch me dará los anchos actualizados de columna y canal. Jugar a ver qué pasa.
La desventaja de las cuadrículas en Sketch es que no se puede tener una nueva cuadrícula para nuevas mesas de trabajo. Tal vez sea algo bueno, pero no es así como tiendo a trabajar. Si tengo dos tableros de arte, uno de los cuales es para escritorio y el otro para dispositivos móviles, es imposible trabajar en ellos al mismo tiempo. Aquí es donde Páginas son útiles Si usted tiene Lista de capas vista abierta, puedes ver arriba en la parte superior algo llamado Páginas.
Las páginas son muy útiles, ya que permiten una capa adicional de diseño dentro de un solo documento. Puede cambiar Grid y Layout dentro de las páginas y se mantendrán igual solo dentro de esa página.
Es posible que haya notado en mis capturas de pantalla que mi tipografía no está alineada con las líneas de la cuadrícula. Tener líneas de cuadrícula no significa que las cosas que antes estaban allí se alinearán mágicamente. Cada vez que cambie la ubicación de sus cuadrículas, tendrá que alinear sus elementos con ella. La tipografía es diferente porque no comienza ni termina donde está el área del elemento completo. Puede colocar la línea de base de la tipografía como desee en relación con la cuadrícula. Tu decides. Lo puse encima de las líneas. Así que déjame realinearlo por ti.
Como puedes ver, el párrafo móvil no se alinea; Su altura de línea es de 24px. Por lo tanto, necesita su propia página y diseño de cuadrícula. Pero para el propósito de este tutorial puede permanecer desalineado..
Veamos cómo guardar colores en Sketch para poder reutilizarlos..
Digamos que me gustaría agregar una fila de color púrpura para usar como acentos en este diseño. Copiaré y pegaré la fila verde y escogeré una púrpura. Para hacer las cosas mucho más rápidas, me decidí por los tonos más claros de púrpura cambiando la opacidad de los colores originales a 70%, 50% y 20% respectivamente.
Lo que debe hacer a continuación para obtener el color es usar la herramienta Color Eyedrop Tool y seleccionar el nuevo tono. No olvides volver a cambiar la opacidad al 100%..
A continuación, utilice el poco + en la parte inferior de las muestras de color para guardar el color en la paleta de Sketch. La diferencia entre Colores globales y Colores del documento Como lo sugieren sus nombres, Global Colors se guardará en Sketch para reutilizarlo en todos los demás archivos de Sketch que abra, mientras que Document Colors solo se mantendrá dentro de ese documento específico..
Tengo un montón de elementos simples de la interfaz de usuario en mi archivo Sketch.
Los guardo aquí para poder copiar rápidamente los que necesito en los nuevos diseños en los que estoy trabajando. Le mostraré cómo crear estilos y símbolos compartidos para reutilizarlos..
Los estilos compartidos son los estilos que puede reutilizar nuevamente. Por ejemplo, la entrada activa / enfocada se compone de tres componentes, el texto de la etiqueta, el texto de entrada y el cuadro de entrada.
El rectángulo tiene un estilo específico, tiene un fondo blanco, un borde azul de un solo píxel y una sombra interior azul claro. Eso es algo que se puede reutilizar si está trabajando en varias entradas.
En el lado derecho, sobre todo el estilo que acabo de describir, puede ver el texto que dice Sin estilo compartido. Puede guardar estas características de estilo de la misma manera que guardamos el estilo de texto para nuestros encabezados. Guárdalo y reutilizalo todo lo que quieras. Pero recuerde que si cambia algún aspecto del estilo guardado en el futuro, afectará a todos los elementos que compartan ese estilo.
Utilizo esta función para muchos estilos diferentes, como el estado de entrada de error e incluso mis tres botones (el azul, el negro y el blanco).
Los símbolos son una gran característica de Sketch que uso mucho. Los símbolos son reconocibles por su carpeta púrpura en el Lista de capas Que no tengo abierto en mis capturas de pantalla. Para cambiar su vista vaya a Ver> Mostrar lista de capas o presione Comando + Opción + 1.
Hagamos la entrada que utilicé en Estilos compartidos como el ejemplo para Símbolo también. Primero, hagámoslo un grupo. Para hacer eso presione Comando + G.
Para convertirlo en un símbolo, puede utilizar el icono en la parte superior izquierda de la aplicación Sketch. También puede usar la misma área para guardar un estilo compartido para guardar un grupo como un símbolo también. Una vez que hagas eso, nombralo.
Un símbolo difiere del otro estilo reutilizable en que es un grupo de elementos que puede actualizar en todas partes, en lugar de un solo estilo como el color del rectángulo de entrada o el estilo de texto de la etiqueta. Los símbolos mantienen el espaciado y el tamaño de estos elementos a medida que los reutiliza..
Otra característica interesante de Symbols es que puede seleccionar qué elemento de texto desea reutilizar literalmente, lo que significa que el texto real permanece igual, o puede excluir el valor de texto de un elemento de texto seleccionado. Esta es una característica increíble que me encanta. Sería inútil reutilizar mis símbolos de entrada si no pudiera cambiar el nombre de uno a "Nombre" y el otro a "Apellido".
Estas características te ayudarán a crear tus propias guías de estilo dentro de Sketch. Descarga los archivos de origen y juega con lo que se ha construido. Espero escuchar sus sugerencias de mejoras! Y si está buscando más inspiración para trabajar con Sketch, eche un vistazo a la categoría de archivos de Sketch en Envato Market.
Accentsconagua