Transcripciones
1. Conoce y felicite: [ Música] El diseño se mueve rápidamente. Trabajamos en equipos Agile e iteramos rápidamente en base a los comentarios de los usuarios y las partes interesadas. Desafortunadamente, pasamos mucho más tiempo haciendo cambios maquetas de lo que hacemos pensando en los grandes problemas que enfrentan los usuarios. Mi nombre es Tina Musich y soy diseñadora de UX. Llevo usando Sketch casi todos los días durante los últimos años. De verdad he llegado a conocer los ins y outs. Apenas el año pasado, busqué convertir nuestra biblioteca de patrones
UX de nuestros equipos en elementos reutilizables en boceto con gran éxito. Yo quiero compartir lo que he aprendido contigo en esta clase. A través de estas lecciones, aprenderás a crear prototipos e iterar más rápido mediante el uso de una biblioteca de símbolos en Sketch. Ya sea que estés usando un sistema de diseño o creando patrones a medida que vas, bibliotecas
similares ayudan a agilizar tu proceso
así como a mantener la consistencia en tus proyectos. Puedes hacer un elemento como un botón una vez y usarlo para siempre y para siempre en Sketch. Si estás trabajando en un equipo que tenga una biblioteca de símbolos es crucial para mantener sincronizados tus maquetas. Empecemos.
2. ¿Qué son los símbolos?: Entonces en primer lugar, hablemos un poco de lo que son los símbolos. Un símbolo en boceto es una única fuente de verdad, es un elemento que existe en un punto y se mantiene en ese spot pero puede ser utilizado en múltiples otros tableros o proyectos de arte y así funcionan. Entonces tienes tu símbolo y esa es la única fuente de verdad pero también puedes usar ese símbolo en diferentes lugares y cuando haces eso, esos se llaman instancias del símbolo. Cuando actualiza un símbolo, el cambio descarta a todas las instancias en las que utilizó ese símbolo y para volver a cambiar el símbolo, se actualiza de nuevo en todas las instancias. Entonces ahora entiendes lo que hacen los símbolos, pero ¿por qué deberías usarlos? El primero es que mantiene consistencia en todo tu proyecto. Digamos que estás trabajando en tu proyecto y tienes dos tableros de arte que son bastante similares y quieres hacer un cambio. Por lo que normalmente lo que haces es agregar algunos enlaces extra a tu navegación superior. Podría cambiar el color. A lo mejor estás haciendo algunos elementos más grandes entonces tienes que tomar esos cambios y o bien pegarlos o rehacerlos en todos los demás tableros. Entonces sí, eso es realizable, pero lleva tiempo y es solo molesto tener que seguir haciendo. Si tienes una biblioteca de símbolos, puedes hacer algo como esto. Quiero agregar un par de enlaces a mi navegación y actualizaciones en todos mis tableros de arte. Ahora quiero cambiar el color y sigue actualizándolos tableros de arte. Por último, quiero cambiar el tamaño de ese elemento y la cadena descarta a todos los tableros de arte. No puedo decirte cuántas veces quiero mover algo, tal vez incluso unos pocos píxeles. Quiero intercambiar cosas y construyendo en símbolos a mi trabajo, puedo hacer que esos cambios atraviesen todo mi arte cerca realmente fácilmente sin usar símbolos y boceto, estaré haciendo mucho copiando, pegando, creando nuevos tableros de arte y generalmente solo bulliciosos alrededor con un montón de elementos una y otra vez. Cuando estoy trabajando en proyectos, siempre
estoy experimentando y cambiando las cosas alrededor y usando los símbolos me permite hacerlo realmente rápido y sin ese dolor de copiar y pegar 1000 veces. Otra razón para usar símbolos y boceto es mantener la consistencia en los proyectos de todo tu equipo. Por lo que hablamos de solo mantener sincronizados todos tus tableros de arte en tu proyecto. Pero podrías estar trabajando en equipo y podría haber algunos símbolos que compartes en equipo, tal vez la navegación superior en tu aplicación sea siempre la misma o tienes una guía de estilo con botones y colores y forma campos y todos esos elementos que todos compartes como equipo con una biblioteca de símbolos, si alguien de tu equipo lo está, digamos que agregar algo a la navegación superior se
propagará a través de todos los archivos usando esa biblioteca de símbolos. Si decides cambiar el color, tanto los archivos de Neha como Kevin se actualizarán y tendrán la navegación superior correcta. Si tu equipo de proyecto o equipo de diseño tiene el problema donde todas tus maquetas se ven ligeramente diferentes y tal vez esté causando confusión con tus equipos de ingeniería o causando confusión y dentro de tu propio equipo, usar su biblioteca de símbolos puede ayudar a asegurarse de que todos en el equipo estén sacando de los mismos elementos y por lo tanto crear un diseño más consistente en toda su empresa. El último ítem es que te ayuda a crear prototipos de forma más rápida y eficiente. No sé ustedes, pero siempre estoy recibiendo comentarios de diferentes personas en
el equipo de diseño y el equipo de producto y las partes interesadas. En ocasiones oiré algo de nuestro equipo de ingeniería sobre lo que es más difícil de construir y necesito
hacer ajustes o lo que no encaja con los datos que estamos usando y antes de empezar a usar símbolos, lo haría tienen que seguir cambiando constantemente múltiples elementos en cada página cada vez que recibí comentarios. También estaba creando muchos elementos una y otra vez. No había realmente un buen lugar para mantenerlos y yo estaba sacando de archivos viejos y todas estas cosas contribuyen a ralentizar tu prototipado. Haciendo más difícil para ti crear wireframes y maquetas y ponerlos en manos de los usuarios para que puedas hacer tus pruebas. Entonces si tienes una biblioteca de símbolos, tienes todos estos elementos que solo puedes tirar según sea necesario. Serán realmente fáciles de cambiar de tamaño, editar si quieres hacer cambios y ayuda a acelerar todo el proceso de diseño,
iteración, etcétera, etcétera.
3. Hacer un símbolo: Entremos a la colección de la biblioteca de símbolos nitty-gritty. Si tienes guía de estilo en diferentes componentes como botones y campos de formulario, entonces ya estás un paso adelante y crear una biblioteca, va a ser mucho más fácil. En cuanto a mí, a menudo estoy creando símbolos como los necesito. Trabajaré en una maqueta, también agregando símbolos, editaré esos símbolos ya en mis maquetas. Lo primero que quiero hacer es agregar algunos colores como símbolos. Esto es súper fácil y vamos a aprender lo básico. Ya tengo esta paleta de colores aquí. Para hacer un símbolo, todo lo que tienes que hacer es seleccionar lo que quieras estar en ese símbolo. Por lo que esta es copia de rectángulo 13. No le cambié el nombre. Tampoco tienes que renombrarlo ahora mismo porque podemos nombrarlo cuando hagamos el símbolo. Todo lo que podrías hacer con este símbolo es solo dar click en lo que quieras estar en el símbolo. En este caso sólo un elemento. Entonces quiero dar click derecho y abrir este menú y voy a bajar a crear símbolo. Por ahora voy a llamar negro a esto. Puedo nombrar mi símbolo lo que quiera aquí. [ inaudible] en nombrar un poco más tarde y luego te ayudaré a organizar tu biblioteca, pero por ahora vamos a mantenerla simple y sólo lo llamaremos negro. Después está este botón, enviar símbolo a la página de símbolos. Voy a mantener esto comprobado. Esto va a crear una página para nosotros que contiene todos nuestros símbolos. Todo lo que voy a hacer es hacer clic en “Ok”. Ahora algunas cosas cambiaron. Vamos a comprobarlo. En el lado izquierdo, se
puede ver enorme copia rectángulo 13 dice negro, y ese era el nombre que elegimos para nuestro símbolo. Ya sabes que esto es símbolo porque tiene este icono con las dos flechas. Ese es el ícono de los símbolos. ¿Qué más ha cambiado. En el lado derecho podemos ver esta zona de símbolos. Puedo cerrarlo si quiero. Aquí es donde se pueden intercambiar símbolos. Si abro esto, me muestra todos los símbolos que tengo en mi biblioteca de símbolos. Acabamos de hacer nuestro primero, así que sólo tenemos un símbolo y ese es el color negro. Aquí puedo hacer un par de cosas, pero llegaré a ello un poco más tarde. Por último, tenemos la página de símbolos y ahí es donde viven todos nuestros símbolos. Si hacemos click en eso, puedes ver esta página y
tenemos básicamente una mesa y todo lo que hay en la mesa de trabajo es justo este color negro. Tenemos negro pero queremos agregar los otros colores. Voy a volver a mi página 1. A menos que estés agregando el resto de estos colores, haz clic con el botón derecho en crear símbolo. Llamaremos a esto gris 4 y luego vamos aquí, y yo llamaré a este gris 3. Echemos un vistazo a cómo se ve la sencilla página. Tengo todos mis colores, todos apilados aquí arriba y se les nombra. Después los veremos a la izquierda. Todas las mesas de trabajo con los rectángulos. Si voy a mi página, puedo ver todos estos son símbolos porque tienen las flechas dobles. En la siguiente lección, vamos a utilizar estos símbolos de colores para hacer nuestro diseño más flexible.
4. Agrega y la edición de símbolos: Tenemos estos símbolos que viven en nuestra página de símbolos. Pero cuando los usamos en otra página, se llaman Instancias. Ve que puedes tener múltiples instancias de un símbolo, y esa es la idea. Ahí hay una fuente de verdad que vive en la página de símbolos. Puedes cambiar las cosas en una página de símbolos y actualiza en todas partes que hay una instancia de ese símbolo en tu documento. A pesar de que profundizamos en las bibliotecas de símbolos, puede aparecer en cascada a través de múltiples documentos. Pasemos a nuestro documento. Se puede ver que tengo este encabezado gris más oscuro que quiero
usar uno de mis grandes símbolos de colores en su lugar. Voy a eliminar este encabezado, y quiero subir a la parte superior izquierda y bajar a los símbolos. Puedo ver todos estos símbolos en mi documento aquí son negros, durazno de tierra. Yo también quería gris, así que voy a poner en esta plaza. Se puede ver dentro de mi página de página de inicio, tengo mi símbolo gris de dos. Voy a tomar eso, y sólo voy a arrastrarlo al tamaño que yo quiera. Entonces lo voy a mandar a la parte de atrás para que esté debajo. Lo que puedo hacer ahora es un par de cosas. Ahora que es un simple, por una, podría editar este símbolo y podría cambiar este color. Puedo hacer doble clic en cualquier símbolo y me lleva derecho a la página de símbolos y a ese símbolo. Puedo entrar, dar click en el rectángulo, ir aquí a rellenos, y puedo cambiarlo a azul brillante. Entonces puedo volver a la instancia. Ahora, mi encabezado es azul, pero voy a deshacer eso porque me gusta el color [inaudible]. Aquí vamos, deshacer, enviarlo de vuelta. Otra cosa que podría hacer es tirar de todos los colores que
acabamos de crear aquí como símbolos. Puedo hacer click en él y puedo ir al área de símbolos. Da click en el “desplegable”, y puedo elegir de cualquier color
quiero tener un encabezado de durazno, cabecera de melocotón oscuro. Esto me da la flexibilidad de
meterme y ver cómo funcionan las cosas de una manera muy ligera. Tengo algunos iconos aquí. Tengo este icono de usuario que es la estrella de flecha
desplegable que
quiero convertir en símbolos para poder utilizarlos en todo mi proyecto. Lo primero que vamos a hacer es hacer clic en mi ícono, este ícono estrella. Voy a hacer click derecho y crear símbolo. Déjalo llamarlo estático. Pero no quiero que este ícono sea negro, en realidad
quería quizá diferentes colores en diferentes lugares. Voy a entrar en este símbolo, haga doble clic en. Voy a hacer algo llamado símbolo Inicio, donde tomo un símbolo y lo pongo en otro símbolo. Suena confuso, pero es súper poderoso y te voy a guiar a través de él. Lo que quiero es que este símbolo sea cierto color. Voy a subir aquí, poco mis símbolos. Yo quiero que sea melocotón oscuro. Plaza Spiegel, paja hacia abajo. En realidad, solo estoy haciendo el tamaño más pequeño, para que eso no se interponga en el camino. No tiene por qué ser perfecto. Ahora lo que voy a hacer es mover esta carpeta. Yo quiero que todo esté fuera de las carpetas. Voy a desagruparlo seleccionar tanto esta forma de estrella como este color. Voy a hacer clic derecho, y voy a ir a enmascarar. Ahora lo que tengo es mi color durazno oscuro con una máscara de estrella sobre él. Podrías estar diciendo: “Tina, ¿por qué no cambiaste el color de la estrella? Podrías haber hecho clic en la estrella vectorial, cambiar el color señalado en realmente fácil”. Definitivamente hago eso a veces, hay algunos símbolos que no creo que vaya a cambiar su color tan a menudo. Solo puedo entrar aquí y cambiarlo por donde quiera que sea. Pero te mostraré por qué hice esto. Voy a volver a la instancia, y ahora tengo mi estrella melocotón. Ahora, puedo subir aquí y puedo añadir más estrellas en mi documento, ver icono estrella. O puedo sostener Shift, drag, hacer unas cuantas estrellas más. Estos están todos conectados a ese ícono estrella original. Se puede ver aquí es un icono de estrella. El libro era bueno pero no genial y sólo realmente consiguió cuatro estrellas. Si miras por aquí, a anular. Aquí es donde puedes editar una instancia de un símbolo de formas muy particulares, dependiendo de cómo lo construiste. Para el texto, puedes anular y poner texto diferente ahí dentro. Para este icono, puedo anular este color y agregar un color diferente. Es el mismo símbolo, mismo icono de estrella. Para esta instancia, es un durazno claro si
quisiera, podría añadir más estrellas. Pueden ser de cualquier color que añadimos. De esta manera cuando estás haciendo tus maquetas, puedes intercambiar colores de las cosas. Realmente te da mucha más flexibilidad. Es realmente fácil probar cosas diferentes, y eso es una gran parte de los prototipos. Quieres poder reaccionar a los comentarios de los interesados, tenemos que usar tus comentarios, cambiar las cosas sobre la marcha. Si tienes una biblioteca de símbolos realmente robusta que vamos a construir, puedes hacer esos cambios muy fácilmente.
5. Resizing de símbolos: Bienvenido a esta lección sobre el cambio de tamaño de los símbolos. Fuimos e hicimos algunos símbolos. Tenemos nuestros colores aquí, todos nuestros símbolos y luego tenemos un ícono. Si volvemos a nuestro creador, fue realmente fácil para nosotros marcar un símbolo de color gris, estirarlo y convertirlo en nuestro encabezado. Una vez que comienzas a entrar en símbolos más complejos como texto en un botón, por ejemplo, o un campo de formulario, algo que está combinando múltiples elementos, realmente
quieres aprender a hacer el cambio de tamaño y asegurarte de que lo haces bien. El valor que viene de poder cambiar el tamaño de los símbolos es que puedes crear consistencia en todo tu equipo. Puedes asegurarte de que todos tus botones tengan la misma altura, puedes asegurarte de que todos tengan el mismo ancho. Puedes asegurarte de que todos tus iconos permanezcan en la relación de aspecto correcta. Estas son cosas que simplemente harán que sea más fácil que todo tu equipo se mantenga alineado. Probemos cambiar el tamaño con este botón que tenemos aquí. Tenemos este botón Agregar actualización y a partir de ahora, voy a sacar el icono para que las cosas sean un poco más fáciles para nosotros. Empecemos con un botón centrado. Tengo mi texto y tengo mi forma. Para hacer este símbolo, voy a seleccionar ambos. Voy a hacer clic derecho, crear un símbolo. Vamos a llamarlo botón. Veamos qué pasa ahora eso es un símbolo cuando intentamos cambiar el tamaño. Pasan algunas cosas raras. Podemos hacer que este botón sea realmente grande. Podemos hacerlo revertir. Podemos hacer un montón de cosas. Para algunos elementos, un comportamiento como este es genial. Pero para este botón, queremos asegurarnos de que siempre sea la misma altura y que el contenido se mantenga en el lugar correcto. Voy a hacer doble clic en para poder editar este símbolo. Es de vuelta al tamaño que era porque cuando creamos este símbolo, especificamos que sería esta altura y este ancho. En primer lugar, voy a sumar en una instancia de este símbolo. Sólo para que podamos ver lo que sucede mientras cambiamos las cosas. Yo quiero subir al documento y encontrar mi botón. Yo solo lo voy a poner justo debajo para que puedas ver lo que pasa. Déjame etiquetar esto rápidamente para que no nos confundamos. Asegúrate de saber que este es el símbolo. El primero que queremos hacer es asegurarnos de que para este botón, siempre
quiero que sea de la misma altura. No quiero que sean 50 píxeles en algunos lugares o 30 píxeles en otros lugares. Yo quiero este 41. Hagámoslo 40 solo para hacer las cosas un poco más fáciles. Simplemente encogí un poco el tablero de arte para que encajara. Ahora tenemos un botón de altura de 40 píxeles. Lo que quiero hacer es ir a un costado. Dice redimensionar. Tengo algunas opciones diferentes aquí. Tenemos pin a edge, tenemos tamaño fijo y Sketch tiene esta manera realmente genial ver qué va a pasar cuando expandas o encoges tu símbolo, dependiendo de lo que selecciones. las cosas que puedes seleccionar aquí, puedes seleccionar esta parte superior, esta izquierda, inferior, y la derecha y pin a borde, o puedes seleccionar todas, si haces clic en el medio, anular la selección, haces clic en el medio arriba también. También puedes fijar el tamaño verticalmente o fijar el tamaño horizontalmente, o fijar el tamaño de ambos dependiendo de dónde hagas clic. Si haces click en el medio, arreglará el tamaño en todas las direcciones. Si hago un elemento y siempre quiero que se mantenga la misma altura, expanda este botón para que podamos ver cómo cambian las cosas. Para mi botón, quiero que el ancho sea flexible. Yo quiero poder ser un botón ancho si hay muchos textos, quiero que sea más corto por menos textos. Siempre quiero que la altura sea de 40 píxeles. Voy a ir aquí a Fix Size, y voy a arreglar el contenido verticalmente. Ahora se puede ver en nuestra instancia del botón, que a pesar de que yo había arrastrado esto para ser más alto, el botón todavía tiene sólo 40 píxeles de altura, pero también podemos ver que al expandir este botón, está centrado en esta caja, lo que dificultaría la alineación. Se puede ver que las guías rojas se están centrando en el área del rectángulo y no en este rectángulo redondeado, el botón durazno. Eso tampoco es lo que yo quiero. Tenemos la altura, pero también quiero que este botón
sostenga el borde superior izquierdo para que sea más fácil alinear. Ahí es donde la otra opción de cambio de tamaño, Pin to Edge, es muy útil. Tenemos arriba, abajo, izquierda, y derecha. Eso básicamente te permite seleccionar un elemento dentro de tu símbolo y puedes tener ese elemento abrazar un borde diferente. Puedes tenerlo fuera solo con la derecha, puedes tenerlo abrazando la parte inferior derecha. Puedes tenerlo abrazando el extremo superior derecho inferior para todos los bordes. Juguemos y veamos cuáles son esos diferentes efectos. Si sostenía la parte superior, puedo ver que aquí abajo, mi rectángulo saltó a la parte superior de la caja. Si abrazo el fondo, salta al fondo de la caja. este momento, debido a que nuestro rectángulo no es un ancho fijo, se está expandiendo al tamaño completo del contenedor, por lo que realmente no marca la diferencia si abrazamos el lado izquierdo o derecho. Cuando hago elementos, uso mucha alineación superior izquierda o superior derecha para las cosas. Si tomo este rectángulo lo voy a tener a la parte superior izquierda y ahora como empiezo a cambiar el tamaño de este botón, se
puede ver que la forma del botón se mantiene de la misma altura y en el lugar correcto. Pero nuestro texto sigue haciendo algo gracioso. Yo quiero que este texto esté centrado así que
voy a dar clic en el texto y voy a pasar
al alineamiento y asegurarme de que esté centrado dentro del cuadro de texto. Yo quiero que este texto se quede con el botón, pero quédate en el centro del botón, voy a fijar este texto a la parte superior. Ahora cuando lo anclé en la parte superior, puedo expandir mi botón o incluso encogerme mi botón, y mi texto se queda donde quería que fuera, y tengo mi botón exactamente como quería. Cuando estés editando un símbolo, ten en cuenta que cada elemento dentro de tu símbolo puede tener su propia configuración de cambio de tamaño. También tienes ajustes para el símbolo en su conjunto. Si hago click en el up-board y solo estoy seleccionando el botón. Ahora puedo cambiar si quiero ajustar el contenido al redimensionar, lo cual es muy útil, y luego también puedo habilitar o deshabilitar la anulación. Vimos la anulación un poco con nuestro símbolo de estrella, donde en una instancia de la estrella pudimos cambiar el color. Para este botón, la única anulación que tenemos en este momento es poder cambiar este texto. Se puede ver que dice, “Agregar valor de texto de actualización”, tener esto pulsado nos permitirá cambiar el texto del botón en cualquier parte de nuestro proyecto. Te mostraré cómo se ve esto. Si voy aquí a la instancia del símbolo, no
lo he anulado, eso me permite cambiar el texto en el botón. Puedo hacer que diga “Está bien” o “Guardar”. Si no quiero que tenga ningún texto, y esto viene muy bien para hacer un símbolo donde a veces hay contenido y a veces no lo hay, puedes agregar un espacio. Eso solo asegurará que el texto esté en blanco. Tengo este botón, pero volvamos a la marca para arriba. Originalmente quería tener un icono más en mi símbolo. Cuando vaya y copie este ícono que quería, voy a hacer doble clic en este símbolo. Yo quiero tener la capacidad de tener un botón que sea solo texto, pero también quiero tener este botón plus. Voy a duplicar este botón, puedo ir por aquí y puedo decir “Duplicar”. También puedes hacer clic en el símbolo, autoduplicarlo, ahí vamos. Tengo un botón aquí y tengo copia de botón, luego llamo a este botón plus, pego en el ícono. Yo quiero que el icono se quede en el lado izquierdo del botón, y quiero que este botón se cuelgue del lado izquierdo. Voy a, pin al borde izquierdo. También voy a sumar,
la instancia del botón solo para que veas lo que pasa. Tengo este icono plus poniendo el lado izquierdo, veamos qué pasa cuando amplío el botón. Tengo la posición correcta, pero lo que está pasando es a medida que amplío el botón, el icono se está distorsionando. Lo que quiero hacer es entrar aquí a
este ícono y voy a arreglar el tamaño porque no importa cómo lo redimensione, no
quiero que este ícono consiga ningún tiro más alto, más ancho, truco en todos modos. Entonces solo voy a dar clic en el centro, eso va a arreglar el tamaño. Se puede ver en nuestra instancia que el icono vuelve a encajar al tamaño correcto. Pero cuando miras el texto, el texto se separa del botón de una manera extraña y también sangra en él. En lugar de que el texto esté centrado, quiero que el texto quede alineado a la izquierda. Ahí lo vamos a alinear, y también voy a fijar el texto al lado izquierdo. De esta manera, el espacio entre este icono y este texto siempre es el mismo, no importa cómo amplíe el botón. Déjame volver a ajustar esto un poco. Queremos hacer esto un poco más pequeño, y quiero que la tabla todo sea del mismo tamaño. Podría encontrarse con esto a veces, tengo esta casilla marcada que dice “Ajustar contenido al redimensionar”, y es por eso que cuando estoy cambiando el tamaño del tablero, realidad no está encogiendo nuestro tablero para que coincida con el final de este rosa botón. Simplemente lo está estirando. Lo que hay que hacer es desmarcar eso. Ahora te permitirá encogerte el todo tablero por lo que abraza el borde del botón. Veamos qué pasa ahora con el botón cuando dice ajustar contenido redimensionar y eso es objeto, todavía funciona. Dedico una buena cantidad de tiempo probando mis símbolos para asegurarme de que el cambio de tamaño funcione correctamente. Puede que no te pongas en el primer intento, está bien. Voy a entrar aquí y cambiar este texto, ya que este es el botón de agregar. Yo solo haré esto, di “Guardar”. Si volvemos a nuestro expediente, déjame deshacerme de este signo más, tenemos nuestro botón regular que el primero que hicimos ese cambio para decir “Guardar”. Pero ahora quiero usar el botón más. Lo que tenía que hacer es, ir aquí al menú desplegable de mi símbolo y lo voy a cambiar a botón plus. ¿Qué pasó aquí? El área de símbolos para el botón que intercambiamos se expande a esta altura. Cuando hice este símbolo, tenía este icono abrazando el lado izquierdo, pero no abrazaba la parte superior izquierda. Por lo que se está quedando en proporción al lado izquierdo del botón, pero no en proporción a la parte superior. Voy a volver a entrar y arreglar eso. Voy a hacer doble clic en, y voy a seleccionar este ícono y lo voy a fijar a la parte superior también. Volvamos a ver si lo arregló. A veces si reemplazas un símbolo por otro, tal vez sea un símbolo más grande reemplazado por símbolo
más pequeño o un símbolo más pequeño reemplazado por el símbolo más grande, las cosas podrían verse un poco funky. Simplemente entra y haz clic derecho en el símbolo y baja para ajustar al tamaño original, y luego lo encogeré hasta el tamaño del símbolo. También voy a tirar de esto en un poquito. Por lo que tenemos nuestro botón Agregar actualización, y es un símbolo. Nos estamos acercando realmente a tener este objetivo macro simplificado.
6. Crear símbolos complejos: Muy bien, entonces ahora vamos a trabajar en un símbolo más complejo. Tengo por aquí esta nueva columna de recomendaciones. Este rectángulo, quiero que sea por mostrar portadas de libros, hay texto para el título, el autor. Tengo una línea divisora aquí. Entonces tengo quien me lo recomendó. Aquí hay lugar para una foto de alguien y luego nombre de amigo y otro divisor. Cuando estás haciendo símbolos, depende de ti decidir cuántos elementos quieres convertir en símbolos. Podemos descomponerlo todo el camino hasta el punto en que cada pieza de texto a este símbolo y trabajar tu camino hacia arriba para que tus símbolos sean realmente amplios también. Normalmente estoy en algún lugar intermedio y a medida que
pases, aprenderás qué elementos son símbolos más útiles y otros. Haremos algunos símbolos a partir de esto, voy a hacer esta línea divisoria a un símbolo, va a aumentar símbolo aquí. Quiero utilizar este símbolo de líneas divisorias también para esta línea divisora. Eliminaré este y luego arrastraré esto hacia abajo. Ahora ya es suficiente. me voy a llevar todos estos elementos. Selecciónalos todos y conviértalos en un solo símbolo complejo. Voy a hacer clic derecho, “Crear Símbolo” para ser. Ahora tengo mi símbolo. Puedo arrastrar múltiple, pasaré mi página. Son muy genéricos ahora mismo aunque. Dirá “Título del libro”, “Autor” y no tengo ninguna foto. Pero hay un plugin llamado Craft, hecho por Envision, y es realmente útil. Tengo este plugin instalado y me da estas opciones a la derecha. Uno que está realmente aseado para usar los símbolos son los datos. Con otra pestaña de datos, verás todos estos diferentes tipos de datos, algunos de estos que agregué, pero estos son los genéricos. Primero quiero hacer las portadas del libro. Entré e hice una carpeta, solo sacando fotos de Internet de un montón de portadas de libros y lo metí en Craft. Entré a mi sección de fotos y agregué una carpeta y la llamé Portadas de libros. Todo lo que pude hacer es seleccionar mis instancias del símbolo e ir aquí a portadas de libros. Ahora, me preguntan qué diseño dentro de ese símbolo quiero poblar. No hice un trabajo de nombrar mis símbolos, estoy desordenado de esa manera. Pero si los nombraras sería mucho más fácil. Porque es una imagen, sólo me está mostrando qué contenido podría llenarse con una foto. Tengo un rectángulo, y ovalado, y dos líneas. Las dos líneas son esas líneas divisorias que creamos. El óvalo es este círculo y nombre extra de amigo, y el rectángulo es el área que tenía pensado para portadas de libros. Voy a seleccionar “Rectángulo Copy 6”, voy a golpear, “Está bien”. Tiró en tres portadas de libros al azar de mi lista. Paso puede maqueta puede parecer un poco más real. Ahora, puedo entrar en mi símbolo y mirar mis anulaciones. Ya se anuló la imagen usando Craft. Pero puedo anular el título del libro para que coincida con la imagen ahora. Se puede ver que este contenido se actualizó. Yo sólo voy a pasar y terminar el resto de estos. No me encanta la jerarquía entre el título y el autor. Voy a entrar en mi símbolo, no
estoy acostumbrado a eso, editarlo un poco. Haré este medio, no eso suficiente, lo haré pesado. Voy a hacer texto al autor. Esto puede ser tapadera, veamos cómo se ve. Mucho mejor, el título destaca mucho más. Incluso haré que el autor sea un poco más pequeño. Está bien. También tenemos una carpeta amigo fotos, y puedo añadir aquí. Volveré a seleccionar los símbolos. [ inaudible]. Entra aquí. Añadiré esta carpeta. Esta vez quiero reemplazar el óvalo. Estas imágenes no sobresalen lo suficiente. Iré aquí y le añadiré un poco de frontera. Enumerar los nombres de los amigos. Los nombres están un poco lejos de las imágenes, así que sólo puedo volver a mi símbolo, puedo fusionar eso más. Esperemos que se esté viniendo a través de lo fácil que es hacer cambios cuando estás usando símbolos. Algo que podemos hacer por la forma en que construí este símbolo es, no
puedo apagar ninguna de estas líneas divisorias. Si no quiero que la última imagen tenga una línea debajo de ella. Esto es realmente útil para tablas, acordeones, montones de filas repetidas, puedo hacer clic en esta instancia y puedo pasar a la línea divisoria. Creo que es la copia. En realidad, se puede ver que resalta azul cuando paso el cursor sobre él, y quiero seleccionar, “Ninguno”. Sólo por esa instancia, no
hay resultado final. Eso se debe a que construí estas líneas como símbolos y las
incluí en el símbolo para poder anularlo. Con eso, estamos un paso más cerca de una impresionante biblioteca de símbolos.
7. Nombres y organización: Seguí adelante y agregué algunos símbolos más y aquí los podemos ver. Pero se ha vuelto un poco desorganizado, ¿no crees? Se mezclaron todos los elementos veleros y hay muchos de ellos. Te mostraré cómo organizarlos mejor. Lo que quieres hacer es ir a nuestra página de símbolos y la forma en que el boceto anida los símbolos es usando una barra diagonal en el título. Nombres el grupo que quieres. Para esta primera columna, haré un grupo de colores. Barra de colores y luego le das nombre al color o icono barra diagonal y nombre al icono. Entonces voy al negro y lo nombro, color slash negro y voy a nuestro gris y lo nombro, colores slash gris--4. Simplemente estoy renombrando lo [inaudible]. Puedes hacer clic en [inaudible] de la izquierda, o puedes hacer clic con el botón derecho, “Cambiar nombre”, y ahora veamos lo que sucede. Ahí están los documentos y vemos, ahora tenemos un grupo de colores, es negro y gris. Puedo hacer lo mismo con los iconos. Puedo llamar a este ícono estrella de barra. Aquí está nuestro icono de búsqueda, llámalo icono barra búsqueda. Ahora cuando subo por aquí, puedes ver que tengo estos iconos. A éste ya le había llamado y también puedo hacer esto. Yo quiero hacer un grupo de entradas realiza y cosas así. búsqueda de barra diagonal de entrada y en la casilla de verificación forma parte de nuestras entradas, así que haré barra de entrada barra barra de verificación sin marcar. Ese es el estado de la casilla de verificación. Voy a nombrar a éste,
barra de entrada casilla de verificación barra corredera comprobada. Lo que esto está diciendo es, quiero grupo de símbolos que son todas las entradas, entonces quiero agrupar de sólo las casillas de verificación, y luego esta llamando al estado específico checa ahí, sin marcar. Te vas por aquí, vas a mis símbolos, vas a entrada, y tengo mi búsqueda, y también tengo casilla de verificación, y puedo elegir marcado o sin marcar. Nombrar tus símbolos es útil para la organización, pero también ayuda a ordenar todos tus prototipos. Tomemos dos símbolos. Tenemos nuestra casilla de verificación, sin marcar, y también voy a tirar de nuestro botón de radio y seleccionarlo. Desde trabajar en un flujo de trabajo, y quiero mostrar una casilla de verificación, sin marcar y luego comprobada. Puedo ir aquí, click en la “Checkbox”, pasar a mi símbolo y al lado derecho, y puedo elegir y simplemente cambiarlo a comprobado. Pero si no nombro a mis símbolos y los organizo de una manera fácil de acceder, cuando voy por aquí para cambiar mi botón de radio para decir que estaba seleccionado, solo
me desplazo por todos los símbolos para seleccionar el botón de radio seleccionado. Nombrar es útil para la organización, para que tú y tu equipo entiendan cómo encontrar lo que estás buscando, pero también es útil para crear prototipos y asegurarte de que puedes moverte muy rápido cuando estás iterando. Ahora quiero pasar por y renombrar todos estos símbolos. Vuelvo después de cambiar el nombre de todos mis símbolos y se puede ver que todos están bien organizados en grupos. Pero en mi página de símbolos, nada realmente está agrupado de la forma en que podría ser para hacerlo más fácil. He usado este plugin realmente genial llamado organizador de símbolos. Todo lo que necesitas hacer es configurar el organizador de símbolos. Existen diferentes opciones de cómo puedes agrupar tus símbolos. Puedes mostrar títulos sobre los símbolos, puedes cambiar el espaciado, y te mostraré lo que pasa. Organicemos y ahora, todos mis símbolos están agrupados bajo estos encabezados, y los encabezados corresponden a estas carpetas que creamos. Ahora cuando miro en mi sola página, es realmente fácil encontrar lo que busco. Agrega algo de información de este plugin al curso, y a medida que creas nuevos símbolos, todo lo que necesitas hacer es ir a tu sencillo organizador, ejecutar tu sencillo organizador y todo se agrupará de la manera que quieras.
8. Uso de tu biblioteca: Tenemos un montón de símbolos. Nosotros construimos nuestra biblioteca, nombramos, la organizamos. ¿ Ahora qué? Esta es la parte más corta y fácil de todo lo que estamos haciendo. Digamos que entraste y creaste toda tu biblioteca de símbolos. A lo mejor es solo para que lo uses, a lo
mejor es para ti y tu equipo, y quieres meterlo en algo en lo que estás trabajando, para que puedas usar todos los símbolos que hiciste. Voy a crear un nuevo archivo de boceto. También puedes tirar de esto a cualquier archivo de boceto existente. Ve a “Sketch”, “Preferencias”, y tienes todas estas pestañas. Vamos a ir a “Bibliotecas”, y vamos a “Agregar Biblioteca”. Voy a encontrar el archivo que creamos para construir esa biblioteca. Lo llamamos Biblioteca de Símbolos. Se puede ver que son nuestras marcas y algunos símbolos. Entonces lo abro, y ahora está comprobado. Lo que significa ser comprobado es que si voy aquí a mi plus, tengo la opción de utilizar todos estos símbolos que creé en otro documento. Aquí hay m colores. Ahora puedo usar esa biblioteca que creamos en múltiples lugares. Si alguna vez quiero editar algo. Entonces si quiero tomar crea dos y quiero cambiarlo a un gris diferente. Puedo hacer doble clic y obtengo este menú, dice que el símbolo pertenece a una biblioteca externa, siendo las bibliotecas externas ese archivo que creamos. O bien puedo desvincularlo de la biblioteca, por lo que ya no está conectada de esa manera o puedo abrirlo en ese documento. Si tienes acceso al documento, te
lo abrirá. Nos lleva derecho al símbolo. Puedo ir aquí y puedo cambiar ligeramente el color si quiero. Voy a hacer tal vez un gris más oscuro, y me dice que este documento es una biblioteca. Yo lo puedo guardar. Por lo que sólo manzana S, lo guardé. Si devolví mi nuevo documento, tengo esta actualización en la parte superior derecha. Dice que hay actualizaciones bibliotecarias disponibles. Ya veo que hubo un cambio. Tenía este color viejo, era el gris claro. Ahora el nuevo color es el gris y puedo elegir actualizarlo y asegurarme de que mi biblioteca esté actualizada. Si estoy en un archivo y no quiero usar esa biblioteca, puedo entrar y puedo desmarcarlo y no aparecerá a mi izquierda. Se puede ver aquí sin embargo, ya que agregué en estos símbolos como símbolos, se pegan en mi documento aunque desenlace esa biblioteca. Pero si lo tire hacia atrás y lo vuelvo a enlazar,
vuelven a la derecha a la biblioteca de símbolos.
9. Uso de símbolos en los factores de la forma: Hablé de cómo los símbolos hacen que tu prototipado sea más rápido. Yo sólo quería mostrarte cómo puedes tomar una maqueta de que tal vez sea escritorio y convertir en una página móvil. Los símbolos, puede ser mucho más fácil. Tengo esta página de perfil que realmente no está construida. Pasé por encima de nuestro encabezado, podría incluso hacer esto en su propio símbolo en algún momento, y voy a agregar algunos campos. A éste quiero llamar, decir nombre, correo electrónico. Yo quiero hacer uno que sea sobre ti. Se puede ver que aún no he trabajado en el cambio de tamaño de estos símbolos. Hay un espacio entre el nombre y el lado izquierdo del símbolo, solo
necesito entrar y veo que el texto está centrado y no alineado a la izquierda aquí en el área de alineación. Voy a hacer clic en eso. Ahí vamos. Tengo esto sobre ti entrada pero no nos da mucho espacio para teclear. Quiero hacer un nuevo símbolo que sea un área de texto más grande. Lo que puedo hacer es tomar una instancia de un símbolo y desconectarlo, para luego hacer un nuevo símbolo. Quiero que hagas clic derecho en este “Acerca de ti” Quiero bajar a “Desprender del símbolo”. Si miramos a la izquierda, es una carpeta, no un símbolo porque no tenemos el icono de flecha doble. A partir de aquí, voy a hacer esto, voy a no desagrupar esto por un segundo. Yo quiero hacer esto más grande algo así. Agruparé esto de nuevo, haga clic derecho, “Crear Símbolo” llámalo entrada/texto grande. También tengo esta foto de perfil, opción editar imagen. Tomemos esta página básica de perfil y veamos cómo se ve en el móvil. Sé que también hay un móvil de trabajo primero, diseñando primero en móvil y después de escritorio. Voy a tomar este título, y quiero que esté centrado en esta página. Siguiente es la foto de perfil, yo envié a eso también. Tiraré en sus campos. Se puede ver que este campo es un poco demasiado largo para que pueda meterlo en scooch para que se ajuste mejor. A ver. No puedo ajustar su tamaño ahora mismo, pero eso podría ser algo que quiero hacer, así que voy a entrar y editar mi símbolo y lo tengo a una altura fija. Voy a desmarcar eso. Ahora debería permitirme ampliar esto tanto como yo quiera. Algo que no agregué a estas entradas que realmente recomiendo, vamos a ver, voy a editar esto y voy a añadir en algún texto. Info de campo. Voy a arreglar la altura, pero quiero que esto sea capaz de ser mientras quiera llenar el espacio. Quiero agregar el campo superior a la izquierda. Ahora vuelvo. Tenía estos campos editables. Puedo decir por nombre y decir, Tina Musich, esa soy yo. Correo electrónico. Si quería simular un perfil vacío, entremos aquí y solo
agreguemos un espacio a mi texto de campo. Agrega un espacio aquí y se mostrará en blanco. Entro a esta imagen y puedo hacer de esto un símbolo si quisiera. Vamos a cambiar esto a gris. Así como así, tengo un ejemplo de un perfil sin editar y
un perfil editado y tengo la versión de escritorio.
10. ¡Tiempo de proyectos!: Ahora que tienes el lowdown y creando la biblioteca de ensamblar, es hora de poner a trabajar tus habilidades. Toma un proyecto en el que estás trabajando, e intenta convertir algunos de esos elementos en símbolos. Entrena símbolos con símbolos para hacer las cosas aún más poderosas. Incluye el archivo para que lo utilices en caso de que necesites algo para simbolizar. ¿Tienes alguna pregunta? Por favor, publique en la junta comunitaria y les ayudaré. Cuando hayas terminado, no te olvides de compartir tus bibliotecas, así que ser todos pueden echarles un vistazo. Cuidado para ver lo que hiciste.
Tina Musich, Lead Product Designer @ PowerSchool
