Advertisement
  1. Web Design
  2. Sketch
Webdesign

Cómo Hacer Archivos de Sketch Fácil de Usar y Reutilizables

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by James (you can also view the original English article)

Final product image
What You'll Be Creating

Un tiempo atrás publicamos un tutorial sobre la creación de un archivo de Sketch personalizado con diagramas de flujo reutilizables. Es un gran recurso para crear su propio usuario flujos o sitemaps. En este tutorial vamos a reforzar ese archivo de Sketch para hacer más utilizables para otros.

Puede tener colegas que deseen utilizar el archivo o tal vez pagando los clientes. De cualquier manera, las mejoras que realizar en el archivo significará que otros abren, entenderlo y utilizarlo.

Te recomiendo que vaya por delante y lee el tutorial original. Por lo menos, coge el archivo de dibujo final para poder empezar con el pie derecho y seguir con esta segunda parte. Este tutorial es cargado con consejos de Sketch y trucos, consejos profesionales aquí y allá, así como algunos plugins relacionados con que probar por ti mismo.

El Manual del Usuario

Lo primero que haremos es crear una página nueva. Estoy llamando a mi "Manual del usuario". Esta página servirá como un rápido tutorial sobre cómo utilizar los elementos de diagrama de flujo. La usaremos para explicar el papel de cada elemento, cómo utilizarlos y cómo manipular sus propiedades como los puntos de partida para las flechas.

"Cómo Utilizar las Flechas"

Empezaremos con una nueva mesa de trabajo, mina llamo "Cómo usar las flechas". Presione A para crear una nueva mesa de trabajo y en la esquina superior derecha seleccione Tamaño de Papel y Letra. Bosquejo colocará automáticamente la mesa de trabajo adecuada para usted (esto funciona también con tamaños de pantalla de escritorio y móviles)!.

Paper sizes for Artboards in Sketch
Tamaños de Papel para Mesas de Trabajo en Sketch

Quiero que los nuevos usuarios a entender algunas cosas, incluyendo cómo seleccionar una línea y coloque en una mesa de trabajo, cómo cambiar su forma y cómo cambiar sus puntos inicial y final. Cómo explicas estas cosas es su opción; las instrucciones y descripciones específicas son hasta usted. Yo he mejorado mis descripciones mediante la inclusión de un par de capturas de pantalla.

Organización de Estilos de Texto

Apenas como con símbolos o estilos de capa también podemos organizar estilos de texto. Por estas páginas del manual tengo tres estilos de texto diferentes, H1, H2 y el cuerpo.

Mi H1 es 24px Regular, Helvetica Neue, de tamaño con la altura de la línea de 30px. El H2 es Helvetica Neue Bold, 14px en tamaño con la altura de la línea de 20px. El cuerpo es de 12px Regular, Helvetica Neue, de tamaño con la altura de la línea de 20px. Los tres utilizan el color #325372.


Podemos utilizar sintaxis de organización de Sketch a estos estilos que organizó en el desplegable. Yo les he nombrado como sigue, que se puede ver reflejado en el menú desplegable de arriba:

  • Manual textos/titular/H1
  • Manual textos/titular/H2
  • Manual textos/cuerpo

Me encanta esto, hace que mis archivos de dibujo mucho más organizado!

"Cómo Usar las Anotaciones"

La siguiente página en el manual del usuario se va a discutir las anotaciones. Para ahorrar tiempo, copiar la página de la flecha y editar el texto e imágenes para reflejar las anotaciones. Para las anotaciones tenemos que discutir lo siguiente: agregar a una página, seleccionar una anotación diferente y cambiar el tamaño.

Botón que Puede Cambiar Automáticamente el Tamaño

En el tutorial inicial, nos aseguramos que las anotaciones de medidas y etiqueta eran manualmente ajustables con propiedades nativas de Sketch. ¿Sin embargo, si desea utilizar un plugin fresco para hacer el cambio de tamaño para usted, sugiero descargar y utilizar el botón rebelde o arroz?

"Cómo Utilizar la Página"

Por último, estoy agregando una página de "Cómo hacer páginas". He incluido las instrucciones por defecto acerca de cómo agregar una página a la mesa de trabajo, así como cómo cambiar el texto de "página" por defecto.

Consejo: Si necesita colocar con precisión los elementos, seleccione un elemento y pulse la Opción en el teclado. Como el ratón se cierne sobre los otros elementos en la mesa de trabajo, indicadores de relé las distancias exactas pixel entre ellos.

La Guía de Estilo

Lo siguiente que tenemos que configurar es la guía de estilo. He creado una nueva página y usted lo adivinó, lo he llamado "Guía de estilo". Como cualquier otra guía de estilo, esto está destinado a introducir a los usuarios a los diferentes estilos utilizados en el archivo. Dentro de la guía de estilo que voy a hablar de los colores, tipografía y estilos, incluyendo flecha línea estilos de capa (sólidos vs discontinua).

Colores

En el diseño original de los diagramas de flujo que terminó con nueve colores diferentes, así que vamos a crear una nueva mesa de trabajo para ellos. Colocar todos los colores que en la página y ponerles nombre. ¡Las cosas viene a continuación!

Creación y Organización de Estilos de Color

Ahora, añadiremos estos colores como estilos. De esta forma, si alguien quiere personalizar los colores de los diferentes elementos que pueden.

Primero, la sintaxis: Estilos/Color/{nombre de color}. Así, Estilos/Color/Error Rojo o Estilos/Color/Fondo azul. Una vez que termines añadirlos, mirar y admirar cómo perfectamente organizados esos colores aparecen en el menú desplegable Estilo de Capa. Además, puedes ver los que se quedan en estilos desde el tutorial original. Nos pondremos a la organización de aquellos un poco más adelante.

La primera razón para todos los colores presentados es mostrar lo que está en uso (como si de una guía de estilo). La segunda razón es para recolouring fácil. Que no se aplican a los diferentes elementos (como texto), pero fácilmente podría afectar a los que tienen sólo un fondo como el y No anotaciones. Trataremos de hacer exactamente eso siguiente.

Personalización de Colores

Volver a la página de símbolos. A continuación, aplicar los mismos estilos que acabamos de crear a la acción, etiqueta, sí y sin elementos. De esta forma, si decide que no desea el sí para ser amarillo sino verde, todo lo que tienes que hacer es actualizar el color de la guía de estilo y todo el sí en todo el archivo de Sketch cambiará de color.

Colores de Documento

Para facilitar el flujo de trabajo un poco, puede guardar sus colores a los colores del documento. Esto hará que les sea más fácil acceso en todo momento.

Mantener Sus Capas y las Mesas de Trabajo Organizadas

Si te gusta organizar, te sugiero Me descargar el plugin Sort Me. Ordena las capas y las mesas de trabajo, por orden alfabético y numérico (o invertir demasiado). Aquí están algunos otros recursos de eficiencia para Sketch:

Tipografía

La siguiente guía de estilo que necesitamos crear es de tipografía. Queremos mostrar todos los estilos de texto en el documento y quiero dividir en dos categorías, textos del documento (tal como en la guía manual y estilo aquí) y en los diagramas de flujo.

Reorganización de Estilos de Texto

Ahora me gustaría mostrar cómo reorganizar sus actuales estilos de texto y les cambie el nombre (si es necesario). El Estilo de Texto desplegable, seleccionar la última opción Organizar Estilos de Texto... Te llevará a una nueva ventana que se llena con cada uno de sus estilos de texto. Si hace doble clic en uno, usted puede cambiar. Quiero que les cambie el nombre como sigue:

  • Por defecto texto > Diagrama de flujo de textos/Acción
  • Texto de la etiqueta > Etiqueta del diagrama de flujo/Etiqueta
  • Notas > Textos de diagrama de flujo/Notas
  • Texto de la página > Página de diagrama de flujo/Página
  • Manual textos/... > Documento textos/...

También quiero cambiar el nombre de los tres "textos Manual" a "Texto del documento". Creamos el nombre inicial con la intención de sólo usarlos dentro de documentación manual del usuario, pero desde luego hemos añadido a la guía de estilo que ya no precisa la Convención de nomenclatura. Como se puede ver los estilos de texto de cambio de nombre es simple. Si se escribe incorrectamente un nombre o su Convención de nombres debe ser actualizada, no es un problema!

Consejo: poco menos icono de [-] en la esquina inferior izquierda eliminará el estilo seleccionado. Pero ten cuidado: no hay deshacer y no pregunte si estás seguro.

Actualizar el estilo de texto en la guía de estilo para actualizar la tipografía a lo largo de todo el archivo (al igual que con los colores).

Compartir Estilos en los Elementos Restantes

Esto va a ser la última mesa de trabajo en la sección de guía de estilo. Aquí discutiremos cómo volver a colorear y tratar los elementos restantes, el símbolo de la página y el símbolo de anotación de decisión. Último, analizaremos las flechas justo después de terminar la sección de estilos compartidos.

Organización para Comparte Estilos de Capa

Si miras hacia atrás a la sección de colores, te acordarás que teníamos algunos estilos adicionales que dije que te organizamos más adelante. Bien, ahora es el momento! La idea es exactamente la misma como con la organización de estilos de texto. Decide organizar el estilo de capa; puede renombrar, organizar y eliminalos a todos igual que con los estilos de texto.

Para los estilos de capa, quiero mantener todos y cada uno de los Estilo/Color /... hicimos previamente. A continuación, cambie el nombre del resto como sigue:

  • Acción bg > Fondo/Acción
  • Flecha - Punteada  > Flecha línea/Punteada
  • Flecha - Sólido > Flecha línea/Sólido
  • Bg Etiquetas > Fondo/Etiquetas
  • Página > Fondo/Página

Consejo: presionar la tecla Tab no navega la lista de nombres de estilo lo mismo abajo la lista de capas. En cambio, en esta ventana, la tecla Tab hace nombre del estilo seleccionado editables o no. ¡Cambiar una o dos veces para ver exactamente lo que quiero decir!

¿Recuerde menos icono de [-] mencioné antes? Es para borrar estilos. Necesito eliminar el gris de fondo. Es un remanente de mi exploración del diseño inicial y no está en uso en cualquier lugar.

Por último, cerrar la ventana, seleccionar el fondo de la anotación de la decisión y seleccione Crear Nuevo Estilo de Capa, de la lista desplegable. Nombre el nuevo estilo "Decisión/Fondo". A seguir adelante y ajustar los estilos de estos, ahora en la página de la guía de estilo. Copiar los fondos de la anotación de decisión y los elementos de página.

Agregar y Actualizar los Estilos de Capa Compartidos

En la guía de estilo, pegue los dos fondos en la mesa flechas y elementos de trabajo. (Sólo voy a copiar a través de la página y la anotación de decisión).

Sólo para dar un ejemplo real de cambiar el estilo y actualización universal, quiero seguir adelante y cambiar el estilo de Fondo de la Anotación de la Decisión. Por eso le tuve que crear un Estilo de Capa independiente, por lo que no afecta la Anotación de la Acción. Cambiar a todo lo que quieras, no tiene que coincidir con el diseño. Agregar un borde de 1px con color de su elección y un nuevo color de fondo así.

Una vez haya terminado, seleccione Actualizar Estilo de Capa en el desplegable Estilo de Capa. Si vas a la página de diagrama de flujo muestra o volver a la página de símbolos, verás que los estilos han sido actualizados. Es un gran ejemplo de los estilos actualización en acción. Eso es exactamente lo que debe esperar a pasar si se va a actualizar el documento para el nuevo estilo de diseño, tales como colores de marca diferente.

Consejo: Si cambia el estilo de un elemento con un estilo de capa en él, usted puede llevarlo hacia el estilo original seleccionando Restablecer el Estilo de Capa.

"Flechas, Estilos de línea, Puntos de Inicio y Fin"

Bueno, hemos llegado a través de los bienes finales y se trata de las flechas! He dejado lo mejor para el final, naturalmente. Primero lo primero, tenemos que añadir flechas a nuestra guía de estilo. Ahora sólo tenemos un tipo de flecha a nuestra disposición. Sin embargo, si usted recuerda durante el estilo de capa limpieza, teníamos una línea sólida y una línea de puntos. Vamos a agregar las flechas punteadas a nuestra colección.

Crear una Flecha Punteada

En la página de símbolos, quiero copiar la primera flecha, la Flecha/por defecto/Derecha, y cámbiele el nombre Flecha/Punteada/por defecto/Derecho. Seleccione línea de la flecha y en el desplegable de Estilos de Capa seleccionar Flecha línea entonces seleccione Punteada. Y eso es todo! Tenemos nuestro primer flecha punteada.

Dos cosas más aquí. En primer lugar, vaya por delante y las flechas restantes. Adherirse a la Convención de nombre Flecha/Punteada/... para mantener un menú desplegable de Símbolos bien organizado. Hablar de sintaxis y convenciones de nombre, lo segundo que debes hacer es cambiar el nombre de cada una de las flechas de línea continua original. El menú desplegable de Símbolos va a ser desordenado si no.

¡Usar el plugin de Renombrar de Sketch para hacerlo más suave para usted! Seleccione Plugins > Cambiar el nombre > Buscar y Reemplazar los Nombres de Capas/Mesa de trabajo. O puede presionar Control + Opción + Comando + R para la ventana del plugin para aparecer. Allí, escribe en Flecha/Default o Flecha/Forma-S y reemplazarlo con Flecha/Sólido/Default y Flecha/Sólido/Forma-S y así sucesivamente. Asegúrese de que el actual ámbito de búsqueda se selecciona en la Página Actual en vez de Capa.

Los Puntos Inicial y Final

Lo último cuando se trata de flechas son los puntos inicial y final. En el primer tutorial te mostré cómo agregar diferentes ejemplos como un contorno. Agregar muchos estilos como quieras, luego cuando termines no olviden incluir toda la nueva y temible puntos inicial y final en la guía de estilo también.

Y con eso, terminamos creando la guía de estilo!

Conclusión

El propósito de este tutorial era construir fuera original y le enseñará más impresionantes formas de usar el bosquejo. Al mismo tiempo, esto se muestra algunas formas prácticas para mejorar y empaquetar todos los archivos de Sketch para hacerlos más usables para los clientes y los miembros del equipo.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.