Mejora tus habilidades de UI/UX con los símbolos bocetados y las guías de estilo dinámicas

1. Avance: Soy [inaudible] y soy diseñador de productos aquí en SkillShare. actualidad, algunos de los mayores retos que enfrentan los diseñadores de UI/UX, están luchando contra inconsistencias a través de su aplicación o sitio web, además de tratar de agilizar su flujo de trabajo de diseño y desarrollo para construir productos mucho más rápidamente. Cuando faltan activos de diseño reutilizables, los diseñadores tienden a hacer cada componente desde cero, lo cual es realmente difícil de escalar. También crea muchas inconsistencias en todo el sitio. Esto puede llevar a mucha confusión del usuario. Cuando hay demasiados patrones o elementos visuales, los usuarios no están seguros de qué esperar cuando están interactuando y pasando por diferentes flujos de usuarios en un sitio. Recientemente, muchos equipos de diseño han estado adoptando sistemas de diseño mucho más grandes, complejos y escalables que ayudarán a combatir estos problemas. Estos podrían incluir color simple, tipografía y documentación de patrones diferentes, pero también pueden incluir componentes mucho más complejos que son específicos de esa aplicación exacta. Por ejemplo, en SkillShare, tenemos componentes muy repetitivos para indicar tarjetas de clase. Estos sistemas diseñados son adaptables y reutilizables. Hace que tu proceso de diseño sea mucho más eficiente y aumenta la consistencia a través de una aplicación grande, o incluso un conjunto de productos. Bueno, estos se han vuelto muy corrientes en las corporaciones, creo que hay un gran uso para éstas, ya sea que seas un freelancer, un diseñador trabajando en un proyecto por tu cuenta, o incluso un pequeño equipo de diseñadores. Estos sistemas se pueden armar fácilmente y realmente pueden agilizar el flujo de trabajo de cualquier diseñador. En esta clase, te voy a mostrar cómo realmente puedes crear rápidamente una guía de estilo personalizada personalizada para usarla en una app. Esta podría ser una aplicación en la que estás trabajando personalmente, o una aplicación en la que has decidido mirar más de cerca, vas a conseguir una perspectiva privilegiada en el flujo de trabajo de un diseñador de UI/UX. Bueno, este podría ser un tema que suena un poco nicho. Definitivamente esto es algo que cualquiera puede usar en su flujo de trabajo de diseño, ya sea que recién comiences en la industria o realmente buscas pulir algunas de tus habilidades de boceto. Todo lo que necesitas para esta clase se puede descargar en línea de forma gratuita, o para una prueba gratuita. Entonces no te preocupes si eres nuevo en alguna de estas herramientas. Vamos a iniciar esta clase identificando y documentando los patrones de diseño existentes en tu app. Después usaremos una plantilla personalizada que proporcioné para que cualquiera que tome esta clase realmente arranque el proceso de guía de estilo. A continuación, estamos pasando a crear componentes personalizados en boceto por nuestra cuenta. Estos serán únicos para cualquier aplicación en la que hayas decidido trabajar. Por último, vamos a compartir un poco más sobre cómo usar estos sistemas a través de equipos o incluso a través diferentes computadoras si eres un freelancer o un diseñador independiente. Mi objetivo para cualquiera que tome este curso es incorporar un sistema de diseño en su flujo de trabajo UI/UX. Al seguir junto con esta clase, verás lo sencillo que puede ser configurar este sistema de diseño, y terminarás con una guía de estilo bastante completa que podrás trabajar de fuera inmediatamente siguiendo este curso. Estoy tan emocionado de ayudar a cada uno de ustedes a aprovechar el poder del sketch, para crear una guía de estilo personalizada que ayude a acelerar su flujo de trabajo, además de eliminar inconsistencias en su aplicación o sitio web. Espero que se unan a mí. 2. ¿Qué es un sistema de diseño? : Quería tomarme sólo un minuto para describir algunas de las diferencias entre guías de estilo, sistemas diseñados, y muchas otras palabras de moda que se utilizan en la industria en este momento. En el pasado, las guías de estilo se producían más como artefacto. Después de que se finalizaran todos los estilos de UI, un diseñador se encargó de revisar y realmente documentar todos los elementos visuales que se incluyeron en los diseños iniciales. Porque este era un artefacto del proceso de diseño y no realmente parte del proceso en sí. Estas guías de estilo se volvieron rápidamente desactualizadas y realmente no se referían mucho más allá de su creación inicial. actualidad se ha producido un cambio en las personas que utilizan estos sistemas de diseño como parte más integrada de su flujo de trabajo de diseño. Entonces en lugar de simplemente documentar el diseño inicial, éstos se convierten en la única fuente de verdad de lo que los diseñadores son capaces de sacar en sus diseños que están creando. Entonces, cuando un diseñador está creando una nueva maqueta, en lugar de diseñar cada cosa por su cuenta de forma independiente, tendrán este sistema de diseño que está integrado en su flujo de trabajo de boceto. Que podrán tirar de elementos prefabricados que sean flexibles y responsivos, que se ajusten a cualquier necesidad que pudieran tener para esa situación de diseño. Al trabajar desde este sistema unificado, los cambios de diseño se reflejan en toda la aplicación o en todo el sitio web. Esto hace que el proceso sea mucho más fluido para diseñadores y desarrolladores, ya que los desarrolladores también son capaces de hacer referencia a los mismos elementos y saben que hay consistencia en todas las instancias de la aplicación o sitio web. Airbnb, Shopify, IBM y muchas otras grandes empresas tienen sistemas de diseño realmente bien documentados e interesantes que son geniales para mirar a través, para solo ver el potencial con este tipo de sistemas y lo que tú podría ser capaz de hacer en una empresa más grande. Voy a incluir enlaces a estos a continuación en la clase describe estos tipos de sistemas pueden ser geniales para todo tu equipo, tanto diseñadores como desarrolladores, y realmente cualquier otra persona que pudiera estar tocando tu producto en el futuro. Debido a que estos estilos están predefinidos y repetidos, Hay mucha más consistencia para todos en el equipo. Ya no tendrás que anotar cada instancia, cada maqueta o cualquier otro patrón de interfaz de usuario de tiempo se aplican en tus diseños. Los desarrolladores ya están acostumbrados a estos componentes y patrones y saben implementar tus diseños, justo al verlos. También es mucho menos eficiente. Eres capaz de diseñar mucho más rápidamente al poder ver todas tus opciones de diferentes elementos que podrían entrar en tus diseños. mejor consistencia es definitivamente una gran manera de tener mejor UX en tu sitio. Los sistemas diseñados van desde una simple documentación de colores y tipografía, hasta sistemas que documentan contenido editorial y pautas de implementación, e incluso sistemas de diseño totalmente integrados que están alineados con las bibliotecas front-end de desarrolladores que utilizan para construir y mantener aplicaciones enormes. Para esta clase, sin embargo, nos vamos a centrar más en el sistema de diseño para diseñadores. Entonces algo que documente completamente todos los estilos y componentes en la aplicación. Pero esta será una herramienta que sólo es utilizada por los diseñadores o equipo de diseño. Ahora que entendemos qué son los sistemas de diseño y cómo se diferencian de las guías de estilo del pasado. Creo que estamos listos para sumergirnos en poner en marcha nuestro proyecto. Nos vemos en la siguiente lección. 3. Crear un inventario de interfaz: Crear un sistema de diseño es una gran manera de ayudar a acelerar tu flujo de trabajo y crear menos inconsistencias en toda tu aplicación. El primer paso para hacer el paso hacia la creación un sistema de diseño es crear un inventario de diseño. Lo que eso significa es que vamos a pasar por el estado existente de su aplicación o sitio web y tomar una imagen mucho más amplia de cómo están funcionando las cosas en este momento. Vamos a ir a capturar capturas de pantalla de todos los diferentes elementos y componentes en su sitio. Cuando digo elementos, me refiero a las piezas más pequeñas de diseñar tu sitio. Estos podrían incluir el color y la topografía. Los componentes se refieren a elementos mucho más independientes y repetibles en el sitio. Esta podría ser la tarjeta de clase en Skillshare o el anuncio de casa en Airbnb. Algo que es dinámico y el contenido cambia, pero en su conjunto el diseño se repite en todo el sitio. El inventario de la interfaz es realmente una herramienta fenomenal para presumir de los problemas de diseño que existen en la aplicación actual. Esta es una gran manera de conseguir que los interesados comprendan la participación así como solo para que los diseñadores entiendan toda la escala de los temas con los que están tratando. Dicho esto, definitivamente estos pueden ser los pasos que consumen más tiempo, así que no te defraudes si estás pasando mucho tiempo buscando a través de tu aplicación existente y encontrando muchas inconsistencias que necesitas documentar. Primero necesitamos seleccionar una app o sitio web con la que vamos a estar trabajando para este proyecto. Esta decisión se llevará a cabo para el resto de sus proyectos. Definitivamente, selecciona algo en lo que no te importa pasar unas horas trabajando. Voy a estar trabajando junto con el diseño de esta app de Skillshare para iOS. Animo a cualquiera que sea un poco más reciente a Scratch o más reciente a símbolos y bosquejo a que siga conmigo ya que podría hacerlo un poco más fácil. Algunas otras grandes opciones serían aplicaciones bien conocidas como Medium, Airbnb, Apple Music, algo que realmente admiras el diseño y la consistencia de. Tu también definitivamente bienvenido a usar un proyecto personal pero te advertiría que debería ser algo que está bastante lejos y tiene una guía de estilo establecida ya para que no estés creando nuevos elementos de diseño mientras trabajas a través del proyecto. Una vez que hayas seleccionado tu app, puedes seguir adelante y descargar la plantilla de nota clave de inventario de interfaz que he incluido en la sección de recursos de clase a continuación. Esto solo seguirá adelante y te dará un marco donde podrás empezar a dejar caer diferentes capturas de pantalla de todos los elementos en categorías específicas. Esto te dará una visión general de un lugar para agregar botones, un lugar para agregar diferentes diseños de formularios, realmente solo te ayudará a organizar y estructurar tu inventario de interfaz. Se desea identificar todos los diferentes diseños y cosas que ocurren con frecuencia en el sitio. No necesitas necesariamente capturar pantalla cada instancia de un botón, pero vas a querer buscar específicamente un botón que pudiera tener esquina afiliada frente a una esquina cuadrada, o tal vez iconos y botones versus no iconos. Se pueden identificar todos los estilos existentes con los que se tiene que trabajar. Una vez que todos estos elementos estén documentados y listos para ser corregidos, obsoletos o incluidos en su diseño avanzando, estamos listos para dar el siguiente paso. Tendremos que decidir qué estilo visual tiene más sentido para tu aplicación en particular. Algo que funcione bien en una aplicación podría no ser el mejor ajuste para tu proyecto. Piensa en tus usuarios cuando estás haciendo este paso y piensa cómo debe ser la experiencia de tu sitio. A continuación, tendrás que decidir qué estilos quieres adoptar para avanzar. Definitivamente quieres eliminar cualquier redundancia. Sólo debe haber un botón primario por ejemplo. Una vez que hayamos tomado decisiones sobre qué estilos van a avanzar con nosotros en las próximas fases de este proyecto, estamos listos para empezar a construir nuestra guía de estilo. 4. Introducción a los símbolos de bocetados: Para aquellos de ustedes que son completamente nuevos para bosquejar, voy a dar una visión general rápida de la interfaz para que puedan seguir junto con el resto de la lección. Si te interesa bucear un poco más lejos, voy a proporcionar algunos enlaces a continuación a los activos de boceto en su página web. Tienen algunos videos introductorios geniales que realmente ayudarán a arrancar tus conocimientos y a que te muevas muy rápido. Si tienes más experiencia con el sketch, esta podría ser una ligera revisión para ti. Eres bienvenido a saltar adelante o quedarte con nosotros y solo tienes que refrescarte un poco en la interfaz y cómo utilizar algunas de estas diferentes herramientas. Entonces, cuando primero vas a descargar Sketch, es realmente fácil. Eres bienvenido para descargar una versión de prueba gratuita. También hay una opción de licencia muy asequible. Hacen que sea realmente fácil empezar cuando abres boceto por primera vez, vas a ver una interfaz similar a ésta. Obviamente todo este contenido es personal para mí. Los años sólo serán un lienzo en blanco, pero en este momento sólo nos vamos a centrar en los diferentes elementos de la interfaz de boceto. A la derecha, vas a encontrar al inspector. Inspector te va a permitir ajustar la configuración para lo que sea que sea la capa seleccionada actual o las opciones para la herramienta actual que estás usando. Cuando tengas seleccionada una capa, verás que el inspector se divide en varias secciones. Estos incluyen propiedades de alineación, dimensionamiento, estilo así como algunas opciones de exportación para estas capas o elementos individuales. Hacia la izquierda, vas a encontrar el panel Capas. Se trata de una lista de capas que contiene cualquier capa de la página actual, se puede ver cualquier atributos de capas como si está oculto o bloqueado, además de poder organizar su documento reorganizando y cambiando el nombre de las capas. Por último, en la parte superior, vas a encontrar la barra de herramientas. Sketch hace un gran trabajo de ilustrar realmente lo que hace cada herramienta y hacer que sea fácil de seguir. Especialmente si has usado Illustrator o Photoshop en el pasado, realmente vas a estar ya bastante familiarizado con muchas de las herramientas que brinda el sketch. Al hacer clic derecho en la parte superior de la página, hay una opción de personalizar la barra de herramientas, que abrirá un prompt que te permite arrastrar y soltar diferentes herramientas que te gustaría incluir en tu barra de herramientas. Por ahora las configuraciones por defecto están bien, pero es genial una vez que comienzas a usar Sketch con más frecuencia para personalizar esto y ahorrarte aún más tiempo. Ahora vamos a ver cómo crear símbolos, insertarlos y usarlos a lo largo de tu documento. Vamos a empezar con un ejemplo realmente simple, sólo explorando algunas formas básicas. Pero esto realmente ayudará a ilustrar el poder de los símbolos y los símbolos anidados y cómo éstos se pueden utilizar en un proyecto real. Voy a empezar con este sencillo documento con tan solo un par de formas. Puedes descargar esto y seguir junto conmigo y los recursos de la clase. Se puede ver que creó varias páginas, cual se puede hacer pulsando el botón más aquí, lo que creará una página completamente en blanco de la que podrás trabajar cuando estés listo para iniciar una nueva sección. Por ahora, estamos empezando en esta primera página llamada Intro a los símbolos. puede ver que creó varias formas geométricas bastante básicas. A través de Insertar, Forma, rectángulo, oval, estrella, lo que sea que estés de humor para crear en este momento. Entonces vamos a empezar haciendo este rectángulo verde un símbolo que podremos utilizar a lo largo de nuestro proyecto. Lo primero que vamos a hacer es presionar seleccionar este rectángulo, y luego presionar el botón Crear símbolo. Te permite escribir lo que quieras para un nombre. Por ahora, sólo voy a mantener este llamado rectángulo. A primera vista, no parece que haya sucedido mucho. Pero si haces doble clic en este rectángulo, puedes ver que me ha llevado a una página llamada símbolos. Este rectángulo está ahora en la página de símbolos. Si quisiéramos añadir otra instancia de este rectángulo ya está disponible para nosotros en la biblioteca de símbolos. Tengo algunos otros símbolos que están aquí para las próximas lecciones, pero se puede ver que nuestro símbolo de rectángulo también se ha agregado a esta sección. Si selecciono la opción de rectángulo, ahora tengo otra instancia del rectángulo para agregar a mi proyecto. Esto se vuelve realmente interesante cuando te gustaría hacer cambios en cualquiera de estos por el camino. Entonces digamos que estaba trabajando en un proyecto y quería cambiar este rectángulo para que fuera morado. En el pasado, esto podría ser bastante engorroso, cavar a través de toda una app o todos mis maquetas y encontrar realmente cada ejemplo de este rectángulo y asegurarnos de actualizar cada uno para que sea un nuevo color. Pero con este nuevo proceso de símbolos de boceto, solo puedo volver al símbolo original y actualizar el color a amarillo, y luego cuando regresé a mi página original, se puede ver que ambas instancias se han vuelto amarillas. Entonces lo siguiente que quiero revisar es cómo organizar tus símbolos y asegurarte de que sean fáciles de encontrar, aunque estés trabajando solo. Pero lo que es aún más importante, si estás trabajando con un equipo de diseñadores, poder encontrar rápidamente muchos símbolos diferentes es realmente importante. Digamos que tengo otro símbolo que quiero crear, que es otro rectángulo, pero es una versión de esquema en lugar de la inversión llena aquí. Entonces, cuando voy a crear símbolo, digamos que me gustaría que estos dos símbolos se agruparan en una carpeta. A lo mejor quiero que la carpeta se llame rectángulo. Empezaré con rectángulo, y luego agregando una barra inclinada y otro nombre que agregará este símbolo a una carpeta llamada rectángulo. Vamos a nombrar este, delinear rectángulo. Cuando hacemos doble clic en este, nos va a llevar aquí también. Ya que ya he nombrado este rectángulo original, voy a necesitar entrar en mi panel Capas aquí para editarlo. Pero todo lo que necesito hacer es agregar la palabra llenada. Sería rectángulo, barra inclinada, rectángulo de relleno. Ahora, cuando voy al desplegable de mis símbolos aquí abajo, se puede ver que tengo una carpeta llamada rectángulo y dos instancias dentro de ella que representan estos diferentes rectángulos. Vamos a seguir adelante y hacer lo mismo con estos dos óvalos. Flash ovalado, relleno ovalado, y contorno de barra ovalada. Ahora, te voy a mostrar la parte divertida y ahí es donde los símbolos anidados se vuelven realmente importantes. Lo que vamos a hacer es crear otro rectángulo, uno más grande, y devolver los bordes en este panel inspector por aquí. Vamos a crear un símbolo a partir de esto. Voy a nombrar esta única tarjeta. Digamos que este es un diseño de tarjeta que tengo en una app en la que estoy trabajando. Dentro de esta tarjeta, hay algunos elementos diferentes que cambian de instancia a instancia, pero el diseño general es el mismo cada vez. Cuando hacemos doble clic en esto, entonces puedo entrar y diseñar mi tarjeta para que sea mucho más dinámica. Puedo insertar un símbolo dentro de otro símbolo, lo que me permitirá tener anulaciones. Déjame mostrarte cómo funciona esto. Entonces es un poco más sencillo de entender. Cuando voy y puedo insertar un símbolo dentro de esta tarjeta símbolos. A lo mejor quiero un rectángulo de relleno para bajar en esta esquina de aquí. A mí me gustaría que un óvalo de contorno suba aquí en esta esquina. Cuando vuelvo a mi instancia de esta tarjeta, ahora puedes ver que hay estas dos opciones de anulación que antes no estaban allí. Eso se debe a que hay estos dos símbolos dentro de este símbolo mismo. De este desplegable, ahora puedo seleccionar de todas mis diferentes formas para elegir. Se puede ver cómo esto sería realmente poderoso ya que estás creando elementos en boceto. Si estás creando un listado de casas, por ejemplo, en Airbnb, es posible que quieras que la imagen cambie de tarjeta a tarjeta, incluso el nombre o el avatar del usuario que fue el anfitrión. Al crear este símbolo de la tarjeta, puedes colocar otros símbolos dentro de ella que pueden actualizarse dinámicamente en todas las instancias de tu sitio. Un par de cosas que tener en cuenta aquí antes de seguir adelante. Estos símbolos están todos disponibles como opciones de anulación porque cada uno de estos cuatro símbolos es del mismo tamaño tablero de arte. Si esto nuestro tablero se encogió a estos apenas un poco más pequeño. Verías que ahora, no todas estas opciones están disponibles como anulaciones. Entonces esto definitivamente es algo a tener en cuenta. Si estás incluyendo muchas anulaciones en tus diseños, quieres asegurarte de que cada uno de nuestros tableros tenga un tamaño realmente específico solo para los elementos que quieres aparecer en este panel de anulación. Otra gran cosa a destacar es mirar cómo aparecen estos nombres en el panel de anulación. Si tienes incidencias donde tienes 30 opciones de anulación diferentes, quieres asegurarte de que sean nombradas y ordenadas de una manera realmente estratégica. Es fácil editar tus componentes. Si vamos a buscar en este diseño de auto, quizá quiera nombrar aquí esta capa, objeto 1 y ésta, objeto 2. Ahora, cuando regrese a mi instancia original, se puede ver rápidamente una edición, cuál voy a estar editando. Una última cosa a tener en cuenta es pensar qué elementos de un componente no van a cambiar de instancia a instancia. Podría tener una tarjeta donde haya un símbolo. Digamos que es nuestro óvalo de contorno. Siempre está presente en esta esquina superior izquierda en cada instancia, solo para que no te pongas un panel de anulación muy hinchado y difícil de seguir. Vas a querer seguir adelante y bloquear esta capa. Al hacer clic derecho sobre él y golpear capa de bloqueo. Ahora, cuando vuelvas a tu símbolo original, puedes ver que este objeto no aparece en el panel de anulación. Esta es definitivamente una gran herramienta cuando estás construyendo componentes mucho más complejos para aprovechar y recordar. Ahora que entendemos los conceptos básicos del boceto y sabemos un poco más en profundidad cómo crear, editar y manipular símbolos así como utilizar el poder de los símbolos anidados y las anulaciones de símbolos, estamos listos para movernos en crear algunos elementos más personalizados específicos para la aplicación que has seleccionado para tu proyecto. 5. Personalizar tu plantilla: Lo más importante de tener un sistema de diseño es realmente tener todo lo que necesitas en un solo archivo, por lo que estás listo para ir y capaz de enfocarte en cosas más importantes que recolectar todos los elementos de la interfaz de usuario para empezar a construir maquetas. hoy, he incluido una plantilla para que empieces y realmente saltes a la creación de una guía de estilo muy rápidamente. El template se puede encontrar en los recursos de clase que aparecen a continuación, y va a incluir muchos de los activos que necesitarás para empezar a construir tu app o sitio web. Esto es algo que se puede utilizar una y otra vez al iniciar proyectos. Es especialmente genial para freelancers o personas que a menudo están trabajando fuera de diversos sistemas y quieren crear guías de estilo rápidamente para sus proyectos. Esto puede ser una gran adición de valor para los clientes y realmente puede ser útil para agilizar su proceso de diseño. Cuando descargues esta plantilla de los recursos de la clase, vas a querer seguir adelante y abrirla. Aquí, verás que hay tres páginas que he creado. El primero es una página de símbolos. No estés demasiado abrumado cuando estés viendo esto por primera vez. Estos son todos símbolos que ya he creado para ti que se van a actualizar dinámicamente a medida que personalizamos la guía de estilo para tu app en la que estás trabajando. Voy a saltar a un poco más de detalle sobre todos estos componentes individualmente, pero primero, vamos a empezar centrándonos en esta sección aquí que dice configuración inicial. Aquí, he configurado un sistema que será muy fácil de actualizar y puede arrancar todo tu proceso de diseño. En el primer paso, vamos a seguir adelante y actualizar los colores en nuestra app. Aquí se puede ver que estos colores son símbolos, puede decir por la escritura morada que está en la parte superior. Además, al seleccionar uno, vas a ver que hay este icono junto al nombre de la capa, que indica que es un símbolo. Estos contenidos a continuación van a ser lo que realmente está en ese símbolo mismo. Sólo podría haber un elemento, pero como hemos tocado antes, los símbolos anidados van a incluir múltiples símbolos dentro de ese símbolo. Verás varios elementos debajo de este nombre de símbolo que incluyen cualquier símbolo que esté anidado dentro de él. Para este ejemplo, vamos a seguir adelante y seleccionar esta casilla aquí. Verás en el inspector que hay un color de relleno aplicado que corresponde al color de esta caja. Este color es en realidad el color de Skillshare. Pero voy a seguir adelante y hacer algunos cambios sólo para que veas cómo esto puede afectar el diseño general de todos los componentes de esta plantilla. Digamos que el color de la app que estaba construyendo era, ¿qué tal este color rojo de aquí? Al instante, se puede ver que todos estos botones y diferentes elementos aquí se han actualizado para reflejar ese cambio que he realizado. Esto puede ser realmente útil si alguna vez necesitas hacer cambios en toda tu aplicación, o quieres personalizar algo realmente rápidamente en función comentarios de otro miembro del equipo o de un cliente. Adelante y actualiza aquí todos estos elementos y como haces cada uno, vas a querer seguir adelante y sincronizar este color. Lo que eso hace es sincronizar el color en tu paladar a través de toda la plantilla para que esté ahí para tu referencia en el futuro. Voy a seguir adelante y cambiar esto de vuelta ya que sí queremos estar siguiendo guía de estilo de Skillshare y voy a seguir adelante y refrescar esto. Se puede ver que todo ha vuelto a nuestro color azul. Adelante y cuida estos. No necesitas usar todos y cada uno. He incluido lo que pensé que sería un número bastante típico de colores, pero no es necesario utilizar todas estas opciones. Lo siguiente que vamos a hacer es personalizar nuestra tipografía. Se puede ver a la izquierda de esta pantalla que he incluido todos los estilos de fuente que se incluyen en esta plantilla. Siempre se puede agregar más o usar menos, pero pensé que este era un buen punto de partida para nosotros para tener una idea de cómo funcionan los estilos de tipo y cómo podemos aplicarlos a lo largo de nuestro diseño. Si quieres agregar más, puedes hacerlo en el futuro. Por ahora, vamos a empezar solo seleccionando todos estos estilos de tipo. Aquí se puede ver que hay un lugar para tipografía. Aquí podrás seleccionar qué tipo de letra quieres que estén todas tus fuentes a través de tu sitio. Para mí, sé que Skillshare usa Proxima Nova. Voy a seguir adelante y seleccionar Proxima Nova y presionar el botón de sincronización. Ahora, puedes ver cualquier texto aquí se ha actualizado para estar en fuente Proxima Nova y que será consistente través de cualquier aplicación de impuesto a lo largo de mi app. Lo siguiente que podemos hacer es seleccionar colores de fuente específicos. Digamos que quiero que mi texto primario sea verde. Podemos seguir adelante y sincronizar esos estilos. Se puede ver que esto es un poco más duro porque no hay todas las aplicaciones de textil a lo largo de estos componentes, sino en cualquier lugar en que se aplicara ese texto, ahora podrás ver esos cambios a lo largo de la app. Voy a seguir adelante y deshacer eso ya que sí quiero que mi texto sea azul, pero puedes actualizar cualquiera de estos estilos para que coincida con tus necesidades. Yo diría que en general, definitivamente es la mejor práctica tener, al menos, una o dos versiones de una fuente gris o negra que puedas usar en toda la app, así como algo que sea blanco en cada talla para que puedas aplicar esas en más oscuro o una interfaz de usuario más oscura. Ahora que hemos personalizado nuestro tipo y sincronizado esos estilos a través de la app, también podemos personalizar los bordes. Este es definitivamente un paso opcional porque ya he incluido opción afiliada, una opción redondeada, así como una opción cuadrada de frontera. Pero si hay algo personalizado que estés buscando incluir, adelante. Selecciona todos estos bordes y realiza los cambios que puedas desear en el radio, el grosor del borde, o cualquier otra cosa que encuentres adecuada para tu aplicación específica. Realmente no sabes o no estás seguro de lo que quieres hacer, no te preocupes por este paso por ahora mismo. Esto se está poniendo un poco más en la basura y podría ser útil cuando estés trabajando en otro proyecto en el futuro. El paso final es agregar tu logo. Este ejemplo, solo uso Google rápidamente. Puedes usar add in your logo para tu app. Definitivamente quieres asegurarte de que los bordes exteriores de tu logo van hasta los lados de este tablero de arte o contenedor de símbolos aquí. Tenemos un lugar para que tengas tu logo blanco así como tu logo oscuro. Se puede ver que estos se nombran en la estructura que mencioné anteriormente. Estos van a aparecer en una carpeta de logotipos con ambas opciones disponibles. También puedes agregar diferentes opciones de color o variantes de tu logo ahí dentro también, dependiendo de cuáles sean tus necesidades. Ahora, hemos hecho todo este trabajo para personalizar nuestra plantilla aquí. Podemos jugar con algunos de estos símbolos que he añadido solo para tener una idea del poder de todos estos símbolos anidados y la personalización que hemos hecho en esta plantilla. Un gran ejemplo es esta forma. Puedes ver que hay opciones para cambiar el color del texto con todos los diferentes estilos de texto que configuramos antes. Si quisiera que el texto fuera mi color azul, puedes ver aquí que eso ya está actualizado. También es muy fácil editar este texto. Se puede decir, Form Title, y eso se va a actualizar muy rápidamente. También puedes actualizar algunos de los estilos aquí. Si quisieras un tipo de formulario diferente, tal vez, querías un icono ahí dentro, sería realmente rápido agregar eso también. También puedes ver que mi texto está siendo recortado un poco. Por suerte, este componente es sensible para mí, que vamos a aprender a hacer en futuras lecciones, pero soy capaz de hacer clic y arrastrar y asegurarme de que todo mi texto esté encajando. También puedo personalizar este texto y hacer cualquier otra opción que pueda querer desde aquí. Si quiero que mi borde sea azul también, o que mi color de fondo sea azul también, eso es muy fácil de editar. Lo mismo con este botón. Ya puedes ver que ahora soy capaz de hacer cambios realmente rápidamente. Esta va a ser la forma en que estás actualizando rápidamente instancias de símbolos a través de tu aplicación. Después de personalizar esta plantilla, estoy seguro que ahora tienes una comprensión mucho mejor de lo poderosos pueden ser estos sistemas de diseño con todas las herramientas de símbolos anidados que se encuentran en las nuevas versiones de Sketch. Espero que estés tan emocionado como yo por todas estas herramientas y listo para seguir adelante con la construcción de algunos elementos más personalizados para la app en la que estás trabajando. 6. Uso de símbolos en tu flujo de trabajo: Simplemente voy a correr rápidamente y mostrarte un poco más sobre algunos de estos diferentes componentes que ya he creado para que los uses en tus futuros proyectos. He tratado de mantener las cosas bastante básicas. Definitivamente no quieres estar creando estos sistemas de diseño de una manera que acabes con tantos elementos y tantos símbolos en tu archivo que es realmente difícil de manejar y hacer un seguimiento de todas las diferentes opciones. He incluido lo que pensé que necesitarás para empezar, obviamente eres bienvenido para quitar y agregar las cosas según sea necesario. Voy a correr en la siguiente lección, cómo crear componentes personalizados. Por ahora, te he dado opciones de complementos como cursores, algunos avatares, muchos botones e insignias. Estos son definitivamente elementos de interfaz de usuario muy comunes que van a aparecer con frecuencia en toda tu aplicación o sitio web. También he incluido muchas formas que son muy comunes también. Opciones de configuración como radios, casillas y otros sistemas de etiquetado, así como elementos de lista y menú que aparecen con frecuencia, especialmente en aplicaciones iOS y Android. También tener elementos de navegación como encabezados, barras de estado, y otras cosas que van a aparecer con frecuencia como una barra de pestañas que aparece en la parte inferior de una aplicación. Otra cosa a destacar es, todos estos estilos de texto que aquí se muestran como elementos. Si alguna vez quieres que tus estilos de texto sean editables, necesitarás que se agreguen a un componente como símbolo en lugar de solo como estilo de texto. Si quieres que el texto sea siempre un cierto tamaño, peso y color, entonces no necesariamente lo necesitas para ser ensamble. Pero si quieres poder anular texto blanco para negro en un botón diferente de instancia a instancia, es importante agregar eso a tu símbolo como otro símbolo. Por ejemplo, en estos botones, se puede ver que en realidad se trata de símbolos de texto. Al mirar aquí en tu panel de capas, puedes ver este pequeño ícono que indica que es un símbolo de texto. Eso me permitirá anularlo con cualquier otro símbolo de texto que tenga el mismo tamaño. Esto definitivamente es útil para botones, pero también hay instancias como en formularios y otros elementos de encabezado y navegación que a veces vas a querer usar textos negros, a veces usar blanco, y no quieres tener que crear un símbolo diferente para cada color de texto. Eso sería redundante y definitivamente derrotaría el propósito de las anulaciones de símbolos y boceto. Lo mismo aplica para diferentes colores y rellenos de botones. Debido a que sus diferentes elementos de la interfaz de usuario pueden variar en color de instancia a instancia. Desea asegurarse de que estos colores estén disponibles como anulaciones de símbolos en ese símbolo específico. Definitivamente verás que esto entra en juego más adelante en el proceso. Pero incluso en instancias como tus iconos o diferentes etiquetas, querrás que el color de este fondo en la etiqueta sea editable. Se puede ver aquí que el contenedor, en realidad es un símbolo y eso me permite editar el relleno de interfaz para ser diferentes colores dependiendo de la instancia que esté usando. Digamos que queríamos entrar y añadir otro estilo de texto aquí de este 20 punto. Te voy a mostrar este ejemplo en texto, pero definitivamente eres bienvenido a hacer este proceso similar para otros elementos de esta página o en otros componentes simples de bloque de construcción como estos, cualquier lugar que sientas que son necesarios para tu app. Si seguimos adelante y copiamos este símbolo, todo lo que estoy haciendo es sostener el control' y arrastrar. También puedes simplemente seleccionar el símbolo y pulsar 'Comando D' que lo duplicará por ti. Cualquiera de esas es grandes opciones. Aquí, se puede ver que es un duplicado porque tiene la palabra 'Copiar' al final. Pero probablemente voy a querer cambiarle el nombre. Digamos que éste va a ser primario, que indicará que es mi color primario, que aquí es azul y va a ser audaz. El color de fondo en este símbolo es negro, solo para dejarte ver que este texto blanco está aquí. No necesitamos eso ya que mi texto va a ser azul. Entonces voy a seguir adelante y apagar eso, pero voy a seleccionar este texto y voy a crear un nuevo estilo, y eso se va a llamar 20 móvil normal y luego otra vez, primaria, negrita. Todo lo que necesito hacer, es entrar y actualizar este para que sea mi color azul y golpear 'Sincronizar'. Ahora tenemos un símbolo que es mi color azul primario y va a ser intercambiable con cualquiera de estos otros símbolos cuando se utilicen en símbolos anidados. Para probar eso, podemos seguir adelante y simplemente crear rápidamente una nueva página. Adelante e insertemos mi símbolo. Si vamos a símbolos y luego bajo el texto 20, normal y luego primaria negrita. Este fue un símbolo que acabamos de crear. Se puede ver que ahora esto es intercambiable entre todos estos diferentes elementos. Esto definitivamente es aún más útil si está anidado dentro de otro símbolo. Si vuelvo a mi página de símbolos, sigamos adelante y probemos cómo se podría usar esto. Digamos que, sé que este estilo talla 20 se usa en mi botón, símbolos grandes. Vamos a seguir adelante y crear una nueva página haciendo clic en este signo más. Esto es solo por un ejemplo así que no necesitamos ponerle nombre. Vamos a seguir adelante e insertar un símbolo y va a ser nuestro símbolo de botón grande. Hagamos sólo un botón de la izquierda aquí. Yo quiero que mi texto sea, oh, ahí está, texto 20 puntos primarios normales negrita. Ese es el símbolo que acabamos de crear y se puede ver que ahora es intercambiable en dinámica dentro de este símbolo anidado. Una vez que selecciono eso, probablemente quiera un fondo diferente. Ya puedes ver ahora soy capaz de seleccionar de todos estos nuevos colores de fondo. A lo mejor quiero un fondo gris claro. Ahora, puedes ver al tener todas estas opciones diferentes, he creado un sistema realmente dinámico para crear estilos de botones. Esperemos que ahora puedas ver todo el poder de símbolos anidados y cómo crear una guía de estilo rápidamente, eso realmente acelerará tu flujo de trabajo. En la siguiente lección, vamos a pasar por la creación de algunos componentes más personalizados y complejos para que los uses en el diseño de tu app. 7. Crear componentes personalizados con símbolos: Para hacer una recapitulación rápida, los componentes se pueden considerar como elementos más grandes que están formados por elementos pequeños y simples dentro de su interfaz de usuario. Este podría ser un botón que está conformado por un estilo de texto, un color de fondo. También podrían ser artículos mucho más complejos. Una tarjeta de clase en Skillshare o un anuncio de casa en Airbnb son dos grandes ejemplos. También podría haber elementos más generales que se utilizan en todos los diseños de interfaz de usuario como formularios, modelos, y otros elementos que comúnmente verás en sitios web y aplicaciones. Cuando hizo su inventario de interfaz, probablemente notó muchos de estos componentes a lo largo de su interfaz de usuario, y probablemente tenga una buena idea de algunos de estos que podrían ser algo bueno para que usted construya y dibuje. Al construir estos como componentes dinámicos y flexibles, podrás utilizar un solo elemento numerosas veces a lo largo de tu diseño de boceto, y ahorrar toneladas de tiempo en lugar de construir una edición de cada símbolo. Después tener que volver atrás y actualizar cada uno de forma individual si es necesario realizar algún cambio. Vamos a seguir adelante y seleccionar 1-3 componentes que te gustaría construir y bosquejar. Serían útiles para ti mientras construyes tu interfaz en tu guía de estilo. Para empezar, sugeriría elegir algo bastante sencillo con sólo unos pocos elementos. Entonces podemos construir sobre algo más complejo que tenga actualizaciones más dinámicas que deben hacerse a lo largo de la interfaz. Adelante y piensa en algo que viste comúnmente a lo largo de tu interfaz que te gustaría construir como componente. Si piensas en un ejemplo como Airbnb que hemos estado discutiendo, tienen este componente muy comúnmente repetido que es un listado de un alquiler específico. Este elemento en sí no cambia, pero las cosas dentro de él se actualizan de instancia a instancia. Aquí puedes ver, muchas opciones de listado de casas diferentes que son todas del mismo componente, pero son muy dinámicas para reflejar las necesidades de cada listado individual. Algunos ejemplos más que puedes ver aquí desde Airbnb muestran cuántos componentes se usan realmente a lo largo de una interfaz. Es posible que tengas cientos de componentes diferentes que son lo suficientemente dinámicos y flexibles como para construir pantallas completas en toda tu aplicación. Al mirar la aplicación Skillshare, identifiqué tres componentes que me gustaría construir como componentes de boceto flexibles. Traté de escoger cosas que no eran demasiado complicadas solo para ilustrar cómo podíamos construirlas muy rápidamente. Pero entonces también quería construir algo más complejo como una fila de múltiples clases que pudiera insertarse realmente rápidamente, personalizarse, y sentirse como una aplicación real en vivo. Para empezar, quería construir este estado vacío de nuestra app. Esto ocurre con frecuencia a lo largo del diseño de la aplicación, pero el icono, el texto y el botón, el estilo y los contenidos pueden ser diferentes en cada instancia. Este es un gran ejemplo de algo que podrías querer construir como símbolo anidado. Lo primero que haremos cuando empecemos a pensar en construir estos componentes es, mirar qué elementos cambian y qué elementos son consistentes a lo largo del diseño. Para nosotros realmente, todo cambiará en este ejemplo específico excepto quizás el espaciado entre cada elemento y el ancho en general. Seguí adelante y copié algunos de estos elementos de abajo solo para sacar solo los ítems específicos con los que vamos a estar trabajando. Como mencionamos antes, un símbolo anidado es solo un símbolo que contiene otros símbolos dentro de él. Vamos a empezar creando un símbolo que simplemente tiene todo el contenido de este elemento aquí mismo. Simplemente crea símbolo. Por ahora podemos llamarlo Estado vacío. Posteriormente a medida que empecemos a construir más componentes, definitivamente querremos estar más conscientes de cómo estamos nombrando esto, y cómo encajará en la estructura de archivos del resto de nuestros símbolos. Cuando haga doble clic en esto, me llevará de vuelta a nuestra página de símbolos, y se puede ver que aquí se ha creado un símbolo. Si termina en un grupo, eres bienvenido a desagrupar ahí para que puedas ver lo que hay todo aquí. Para mí, en realidad ya estaba usando un icono para este diseño específico, lo cual es genial porque ahora soy capaz de usar el panel de anulación para seleccionar otros iconos en esta opción. Si no estás usando iconos o cualquier otro símbolo aquí, querrías seguir adelante y responder estas cosas como símbolos. Por ejemplo, se ve que este botón es en realidad sólo un grupo. No es un símbolo de botón, así que vamos a querer reemplazar esto por un símbolo de botón para que podamos anularlo dinámicamente en diferentes instancias. Si vamos a nuestro menú desplegable Símbolos y vamos a Botón, voy a seguir adelante y seleccionar un botón Pequeño y centrado. Se puede ver que el estilo es un poco diferente. Esto realmente ilustra el propósito de tener una guía de estilo. Este diseño de botón en realidad no estaba incluido en mi guía de estilo, lo que significa que era un diseño singular que no estaba alineado con el resto de la interfaz de usuario en la aplicación. Es realmente importante asegurarte de mantener un buen inventario de tus estilos y no dejar que el sistema se hinche demasiado a medida que crece tu app. Vamos a seguir adelante y en realidad sólo quita este viejo botón ya que tenemos este aquí ahora. En este panel de anulación, soy capaz de actualizar el contenido, tal vez solo quería decir botón de muestra por ahora. Ya que estamos diseñando esto como un componente que se va a utilizar a lo largo de mi diseño, no necesita ser específico de este estado vacío. Puedo seguir adelante y añadir esto aquí. Tenemos que pensar en cómo se va a utilizar este estado vacío. ¿ Estos textos van a necesitar cambiar su estilo? Podríamos querer un gris claro en algunas instancias, un gris oscuro en algunas, tal vez sería azul a veces. No estoy seguro, pero solo para estar seguro, quiero seguir adelante y usar un símbolo de texto aquí para que sea mucho más flexible por el camino. Nuevamente, esta es la talla 17. Voy a seguir adelante y decir, “Símbolos”. Vamos a ir al Texto 17, y vamos a estar Centrados, y queremos uno gris. Ahora tenemos nuestro texto de titular, y seguiré adelante y agregaré alguna copia de marcador de posición, y lo haremos todo el ancho de esto, y lo pondremos justo ahí. Ahora, podemos eliminar ese original. Entonces queremos tener también nuestros subtextos. Añadamos otro símbolo que es Texto, y éste es talla 14. Haremos centración, y quizá empecemos con el segundo grado. Cualquiera que sea la opción de estilo que selecciones originalmente será la opción predeterminada que aparece al insertar este símbolo en el camino, pero no estás pegado a ese diseño. Normalmente solo intento seleccionar el estilo que creo que usaré con más frecuencia, pero luego a partir de ahí, puedes editarlo en cada instancia. Adelante y actualiza esto para que sea la altura correcta. Lo siguiente que queremos hacer es realmente utilizar un plug-in para Sketch que realmente va a hacer mucho más fácil organizar estos elementos de una manera que puedan ser alturas variables en diferentes instancias y aún tengan el mismo espaciado . Diga este desplegable a ser tres líneas o una línea en lugar de dos líneas. Con la forma en que está diseñado actualmente, este botón no respondería a ese cambio y así tendrías algunos problemas de espaciado. Lo que vamos a hacer es descargar un plugin llamado Launchpad for Sketch. Estoy incluyendo un enlace para esto a continuación en los detalles de la clase pero es gratis y es muy fácil de instalar, solo tienes que descargar, hacer doble clic, y se va a instalar de forma automática en Sketch para ti. Una vez que tengas eso instalado, va a aparecer en tu esquina inferior derecha de tu pantalla y verás algunas funcionalidades añadidas. La funcionalidad que vamos a revisar en este momento es esta funcionalidad de diseño automático, pero el resto se puede explorar a través de la página web de las aplicaciones. En tu nuevo componente que has creado, vas a seguir adelante y seleccionar todas las diferentes capas, y esto te va a dar muchas opciones añadidas que no están incluidas en Sketch para empezar. En este momento queremos alinear verticalmente todos nuestros elementos. Otras opciones serían el forro izquierdo, pero vamos a pegarnos a una línea vertical y luego te va a dejar especificar el espaciado entre cada elemento. A lo mejor queremos 15 píxeles entre cada elemento, sin importar cuántas líneas de texto sean en cada uno de estos o cuán grande sea el icono. Nosotros también, mientras seguimos en nuestro símbolo, queremos asegurarnos de que la estratificación de este objeto sea una manera lógica que podremos entender cuando estemos viendo los paneles de anulación. Por ejemplo, ahora mismo este titular está en la parte inferior. A lo mejor un poco confuso ya que este botón es en realidad el último elemento. Queremos seguir adelante y mover esto hacia arriba para que quede justo debajo del ícono, y luego tendremos el subtexto aquí, y quizás queramos incluso nombrar esto así que quizá queramos renombrar esta capa, Subheader, y luego llamaremos a esta capa Encabezado, y luego le nombraremos a éste CTA. Genial, así que ahora cuando volvemos a nuestros componentes, podemos ver que el Encabezado y el Subencabezado claramente etiquetados para que no tengamos que hacer ninguna conjetura en cuanto a qué textos deberíamos estar editando. A lo mejor queremos que nuestro Subencabezado solo sea una línea. Se puede ver que el botón se movió automáticamente hacia arriba para acomodar ese cambio en el espaciado para que nuestro espaciado se arreglaría sin importar en qué instancias se encuentren. Esta es una gran herramienta para usar cuando estás creando estos símbolos más dinámicos que no estás realmente seguro de cuánto tiempo va a ser cada elemento de texto o cuán grandes podrían ser los diferentes elementos gráficos que permitirán mucho más espaciado consistencia en toda la aplicación. Lo siguiente que voy a hacer es correr a través de un ejemplo más de un componente ligeramente más complejo que se utilizaría con mucha frecuencia en la aplicación Skillshare iOS. Aquí puedes ver la maqueta completa de una página de clase bastante estándar en Skillshare. Esto definitivamente se usa cuando estás navegando, cuando estás buscando, cuando estás descubriendo contenido nuevo, o incluso cuando estás viendo contenido recomendado en tu página de inicio. Este es un elemento de uso muy frecuente que definitivamente queremos ser realmente reutilizable, fácil de actualizar, y personalizable a diferentes páginas de un sitio. Te guiaré por un poquito de la lógica de cómo podría construir un elemento como este. Empezaría por mirar qué piezas de esto son flexibles y cambiantes, y cuáles podrían ser más consistentes a lo largo de cada instancia. Ves esta línea de cabello, esto es algo que va a ser en cada instancia este componente. Cuando miras hacia abajo, puedes ver que se aplica a casi todas las filas de clases. En esta instancia, y realmente en todas nuestras páginas. Obviamente, algo que no actualizaría. También poder ver todas las clases, eso es probablemente algo que va a estar en cada instancia. Pensaríamos en eso más como un elemento estático. El texto de las clases de tendencia es algo que estaría en cada elemento, pero puede o no cambiar en lo que va la copia. Quisiéramos que eso fuera flexible, pero siempre tendríamos eso como opción en ese componente. Para cada clase individual, siempre quisiéramos mostrar la hora, pero la hora real escrita allí podría variar de instancia a instancia. Así como el título, artista e imagen de fondo de la portada de la clase. La forma en que pensaría en construir esto sería comenzar por construir un solo elemento de una clase y luego construir un solo elemento de este encabezado y luego poder compilar eso en una mayor, más símbolo anidado que se puede aplicar como una fila de clase en general. Ya me adelanté y arreglé un poco esto, pero te voy a guiar por parte de la lógica aquí. Empecé por crear este elemento de clase única, y realmente solo está compuesto por cuatro cosas específicas. Uno siendo esta imagen de fondo de clase, uno siendo el tiempo, y luego tenemos el título y los artistas, y luego tenemos el título y el profesor. Definitivamente queremos pensar en estos. Se trata de tres ítems específicos, pero ya nos adelantamos y los agrupamos en un grupo llamado Tiempo. También fuimos adelante y agrupamos la imagen de clase y el Tiempo juntos ya que realmente están en el mismo objeto y queremos mantener a los anidados juntos. También nos aseguramos de usar un estilo de texto específico. Vamos a seguir adelante y usar talla 12, normal y vamos a seguir adelante y hacer negrita blanca aquí. Ahora ese es un estilo conjunto que va a coincidir con todo lo demás en nuestra app. También utilizamos un icono específico en este diseño para que pueda editarse y actualizarse para ser otros iconos si alguna vez necesitábamos esa funcionalidad en el futuro. Esto también mantiene la consistencia. Si alguna vez queremos actualizar el icono del reloj en todo el sitio será realmente fácil para nosotros actualizarlo en una sola ubicación en nuestro sistema de diseño. Queremos hacer lo mismo con el título de la clase y el profesor. Para esto, seguiremos adelante y aplicaremos estilo de texto así como para el profesor. Aquí hay un ajuste que te permite ajustar el contenido de esta tarjeta para que se ajuste al tamaño de la mesa de trabajo. Cuando debería devolver eso si alguna vez estamos ajustando el tamaño general de la mesa de trabajo aquí. Apagaré eso solo para editar esto, y luego podremos volver a encenderlo para que el símbolo esté adoptando cada vez que cambiemos el tamaño de instancia. Voy a cubrir esto más a fondo en la siguiente lección, pero solo es importante a la hora de editar estos símbolos. También seguí adelante y aplicé nuestra funcionalidad de grupo apilado también, y se puede ver cuando golpeo mi capa de grupo apilada, puedo entrar y ver la configuración de nuevo para que siempre pueda editarla para estar más cerca o más alejada. Volvamos a mi mesa de trabajo general y veamos más esta composición. Se puede ver que tendríamos dos instancias de este objeto de clase, y luego tendríamos una instancia de este elemento de encabezado. Creo que lo siguiente que haría es construir este encabezado. Ya he empezado esto en mi biblioteca de símbolos como puedes ver. He empezado por crear un componente simple que tiene dos estilos de texto aquí. Uno siendo el ver todo y uno siendo clases populares, así como esta línea horizontal, y como mencioné antes, esta líneas horizontales consistentes en todas las instancias. Voy a seguir adelante y bloquear esta capa. Eso lo va a ocultar del panel de anulación y sólo hacer que todo sea un poco más fácil de trabajar con. Ahora cuando vuelvo a mis símbolos, se puede ver eso bajo “Contenido”, que es como anidé estos. Ahora tengo una opción para un encabezado de sección así como una sola clase. Voy a seguir adelante y agregar mi encabezado de sección aquí, y puedo eliminar estos objetos que ya no son ensamblados. Se puede ver que ahora tengo tres símbolos donde solía ser una lista completa de capas. Mucho más simple de ver en mi panel de capas y entender lo que estoy mirando. Lo siguiente que haría aquí sería crear un símbolo de los tres. Esto no es necesariamente algo que tendrías que hacer, pero sé que como esta fila se va a usar muchas, muchas veces en la app, prefiero que todos estos estén juntos en lugar de tener que insertar siempre tres símbolos. Para mí, esto tiene más sentido en esta instancia. Seguí adelante y creé este componente de fila de clase de contenido que tiene dos clases así como este encabezado de sección que creamos previamente. Se puede ver en este objeto, hay un grupo apilado ya creado y va a tener el encabezado así como un grupo que tiene dos clases en él. Al crear un grupo, la funcionalidad de grupo apilado en realidad contará ese grupo como un solo elemento. Debido a que los hemos agrupado primero, estos son capaces de estar directamente adyacentes entre sí. Los estilos de diseño automático no se aplicarán a cada uno de esos componentes de forma individual. Ahora tenemos un componente bastante flexible que se puede utilizar una y otra vez. Ahora quiero mostrarles lo flexibles que pueden ser estos componentes. Cuando volvemos a nuestra página original, se puede ver que tenemos algunas instancias que podría querer aplicar este nuevo objeto. Si vamos a nuestro “Símbolo” y vamos a nuestra sección de “Contenido” y miramos una fila de clase. Puedo seguir adelante e insertar esto aquí, ponerlo en el mismo posicionamiento, y luego simplemente seguir adelante y borrar el viejo. Ahora tenemos una fila completa con todo el mismo contenido que antes, pero ahora somos capaces de anular y personalizar rápidamente todas estas opciones sin tener que manipularlas individualmente a gran escala. Esto definitivamente es útil. Si alguna vez quieres hacer cambios o hacer algo que parezca una maqueta muy realista sin tener que hacer tanta personalización. Incluso eligiendo una imagen de clase aquí podemos entrar y tengo algunas guardadas, entrar y actualizarlas muy rápidamente, y se puede ver, en lugar de tener contenido falso, realmente se puede hacer que las cosas parezcan convincentes, lo cual es ideal para clientes, incluso presentando a los titulares de participaciones si trabajas en una empresa más grande. Esto definitivamente viene muy útil a la hora de presentar tu trabajo a los demás. Una última cosa que quiero mostrar en esta lección es cómo hacer cambios en estos símbolos complejos puede ser un ahorro de tiempo. Al entrar y hacer clic en nuestro símbolo, también puedes hacer doble clic en un símbolo dentro de ensamblar para llevarte a ese símbolo. Esto será realmente útil si no estás seguro en qué parte de tu archivo está ese símbolo. Con solo hacer doble clic te saltará directamente a ese símbolo y te permitirá editarlo desde ahí. Digamos que decidí que en lugar de tener este texto fuera negro, en realidad queríamos cambiar esto, uno de mis clientes, digamos que me pide actualizar esto para que sea un texto azul y audaz. Solo puedo actualizar esto en esta sola ubicación, y ahora puedes ver que está actualizado en este símbolo además de estar también actualizado en la maqueta final. Si esto me hubiera aplicado un 100 veces en mi proyecto, ahora están todas actualizadas, ahorrándome tanto tiempo de tener que ir a localizar cada instancia y actualizarlas individualmente. Esperemos que esto realmente ilustre la potencia y las capacidades de ahorro de tiempo de estos símbolos y componentes anidados en Sketch. 8. Ajustes del tamaño del boceto: Quieres aprender un poco más sobre la configuración de cambio de tamaño, que podemos hacer que nuestros componentes sean aún más flexibles y sensibles. Esto es realmente útil, especialmente si estás diseñando para varios tamaños de pantalla o dispositivos. Cambiar el tamaño de los ajustes puede ser un poco complicado cuando empiezas por primera vez, pero he incluido algunos grandes recursos en el archivo de boceto de recursos de clase, en la siguiente descripción de clase, que pueden abrirse y hacerse una gran idea de una gran cantidad de las opciones y cómo funcionan en aplicaciones reales. Al mirar este archivo de boceto en la configuración de cambio de tamaño aquí, se puede ver que hay un ejemplo con cuatro aplicaciones muy simples, pero diferentes configuraciones de cambio de tamaño. En el primer ejemplo, se puede ver que no se aplica ninguna configuración de cambio de tamaño. Esto significa que esta caja blanca simplemente se va a estirar para ajustarse a la misma proporción y proporciones que el propio grupo general. Entonces cuando voy a este grupo general y voy a redimensionarlo, se puede ver que esta caja blanca simplemente se está estirando para encajar la misma proporción que estoy arrastrando el objeto general hoy. El segundo ejemplo tiene diferentes configuraciones de cambio de tamaño aplicadas. Este tiene pintura de las cuatro esquinas. Esto significa que el número de píxeles entre el borde exterior de esta caja verde y esta caja blanca en los cuatro lados, se mantendrá consistente sin importar el tamaño total de este objeto. Cuando voy a cambiar el tamaño de todo este grupo, se puede ver que el espaciado en los lados del objeto y la parte superior son consistentes. En el tercer ejemplo, se puede ver que hemos aplicado un ancho fijo y una altura fija a esta caja blanca. Eso significa que cuando hago clic en el grupo general y voy a redimensionar, el cuadro blanco en realidad no cambia de tamaño sin importar el tamaño del grupo en general. En el cuarto ejemplo aquí, se aplican configuraciones similares, pero también estamos aplicando pin a la esquina superior derecha. Por lo que está anclado a la derecha y a la parte superior aquí. Se puede ver que algo similar está sucediendo excepción de que el objeto ahora está anclado en la parte superior derecha. Entender estos cuatro tipos de configuraciones, definitivamente es realmente útil al empezar por primera vez y aplicar ajustes de cambio de tamaño a los objetos de sus componentes. Para ver algunos ejemplos más complejos, aquí se pueden ver varios grupos de objetos que juntos conforman una galería más grande, potencialmente con un avatar y algunos objetos fiscales o diferentes aquí. Podría aplicarse de diferentes maneras. Para familiarizarse con cómo funcionarían algunas de estas configuraciones de cambio de tamaño en estos grupos más grandes, puede seguir adelante y comenzar a jugar con este grupo de muestra a la derecha. Al hacer algunos cambios en el tamaño y la relación de este objeto, y luego volver a referenciar estos ajustes aplicados aquí, obtendrás una mejor comprensión de cómo funcionan estos componentes reales y cómo se podrían aplicar a sus componentes específicos para el diseño de su aplicación. Para dar algunos ejemplos un poco más realistas, pero todavía bastante simples, quiero hacer referencia a este elemento de menú aquí, así como a este campo de formulario que he aplicado en este archivo. Este es un gran ejemplo porque las formas son definitivamente algo que se utiliza a través diferentes dispositivos y muchas aplicaciones diferentes con diferentes restricciones. Entonces esta instancia parece estar funcionando bastante bien aquí mismo, pero digamos que queremos hacer una copia de esto. Si íbamos a aplicar este mismo diseño en el móvil, podríamos estar restringidos en el ancho de nuestros objetos. Si sigo adelante y encojo esto hacia abajo, se puede ver ahora el texto se extiende a dos líneas. Esto definitivamente podría ser un problema. No es muy legible y no es muy realista buscar cómo se vería esto en una aplicación en vivo. Si voy a ajustar la altura aquí, puedes ver que he configurado esto para que el campo sí tenga una altura flexible sensible, pero estos otros objetos, como este pequeño icono aquí son un ancho fijo y una altura fija y tienen diferentes configuraciones de cambio de tamaño. Al aplicar estos ajustes de manera estratégica, puedes hacer que cada elemento sea muy adaptable y personalizado a sus necesidades específicas. Por un ejemplo más, para este elemento de menú aquí, si fuéramos a encogernos el ancho para ser mucho más estrecho, se puede ver que ahora se está recortando mi texto. posible que desee aumentar la altura para que sea más legible y más realista de aspecto, pero notan que mi avatar tiene ajustes que eran de ancho fijo, altura fija en pin a corner, mientras que algunos de estos otros elementos son más sensibles y capaz de ajustar texto sin cambiar ninguna de la relación del componente general. Ahora quiero seguir adelante y saltar de nuevo a nuestro otro archivo de boceto con nuestra plantilla aquí, y mostrarles cómo algunas de estas configuraciones podrían aplicarse a nuestro componente de estado vacío que hicimos en la última lección. Buscando componente en nuestro archivo original, puede ver cuando voy a redimensionarlo, que definitivamente hay algunos problemas que probablemente no son ideales. Se puede ver que nuestro botón realmente se está estirando para ajustarse al tamaño del componente general que estoy adaptando, pero en realidad no está funcionando bien para el impuesto ni la legibilidad de ninguno de estos objetos. Además, creo que este icono en la parte superior podría ser mejor si fuera un tamaño consistente. No me gusta realmente cómo se está adaptando y creciendo y encogiendo con el componente a medida que muevo esto. Entonces voy a ir a hacer doble clic y volver a saltar a la Página de Símbolos y hacer algunos ajustes. Lo primero que voy a hacer es lidiar con este botón. Definitivamente quería ser un ancho fijo, no quiero que se pueda conseguir tan estrecho que el texto ya no cabe en el botón. También quiero arreglar la altura. Si tengo que arrastrar hacia fuera la altura de este objeto en general, no quiero que mi contenedor de botones esté creciendo y encogiendo. El segundo que voy a hacer es añadir aquí un ancho fijo y una altura fija a mi ícono. Entonces ahora cuando vuelvo a mi página original y siempre se puede decir, establecer el tamaño original como opción, cual es una gran cosa de tener. Ahora puedes ver cuando vuelvo y escalando el tamaño de esto, el botón es mucho más consistente y el icono es un tamaño consistente también, que es lo que buscaba con este componente. Por lo que puedes ver que al realizar estos pequeños cambios la configuración de estos elementos individuales dentro de un componente, se vuelven mucho más personalizados y flexibles a tu aplicación específica así como dinámicos, si 're diseñando para diferentes dispositivos o diferentes tamaños de pantalla. Esperemos que esto esté ayudando a que tus componentes y tus diseños parezcan como un mucho más flexible y utilizable para tu aplicación. 9. Comparte tu guía de estilo: Ahora que tenemos un Sistema de Diseño mucho más integral establecido, incluye componentes sensibles y dinámicos que se construyen solo para una aplicación específica. Creo que es hora de que aprendamos a compartir este Sistema con otros de nuestro equipo, o incluso solo a través de Computadoras. Incluso si eres solo un Freelancer trabajando por tu cuenta, es una gran idea tener el Sistema almacenado a través múltiples dispositivos y con fácil acceso en caso de que estés saltando o quieras compartirlo con los clientes. La primera herramienta que vamos a ver es un plugin llamado Craft by InVision. Algunos de ustedes pueden conocer InVision como software de prototipado griego. También tienen algunos plugins geniales para sketch. Hay varias que ofrecen, pero la que vamos a tocar hoy se llama Biblioteca. Vas a seguir adelante y descargar Craft online. Herramienta realmente fácil, gratuita que puedes descargar e instalar realmente rápidamente. Te va a dar Craft Manager instalado en tu barra de herramientas donde podrás ver todas las diferentes opciones para instalar, así como cuando tengas actualizaciones como lo hago actualmente, podrás actualizar directamente desde aquí. Ya que ya lo tengo instalado, verás un Panel justo al lado mi inspector que me permite acceder rápidamente a las herramientas que proporcionan. Esta segunda opción abajo es una herramienta Biblioteca. Al hacer clic en eso, vas a ver una interfaz bastante sencilla que te permite importar una biblioteca o crear una nueva. En esta instancia, ya que somos nosotros los que creamos la guía de estilo, vamos a crear una nueva biblioteca. Puedes nombrar esto como quieras. Voy a seguir adelante y llamar a la mía Habilidad Compartir. Entonces vas a necesitar elegir un destino. Solo voy a elegir mi Escritorio por ahora, pero vas a querer elegir algún lugar como Dropbox o una carpeta compartida si vas a estar compartiendo esto entre varios equipos o incluso múltiples computadoras. Simplemente pulsa Crear Biblioteca y ahora verás una interfaz que te permite agregar elementos. Cuando entremos a nuestra, voy a ir a mi página de Símbolos para que pueda ver todo el contenido que me gustaría agregar aquí. Bibliotecas artesanales, definitivamente una gran herramienta para almacenar todos los ajustes de tu tipo, todos tus colores, cualquier cosa que sea más un ajuste de estilo que vas a querer ver a través de dispositivos, esta es una gran herramienta para eso. cuanto al almacenamiento de componentes generales, voy a tocar eso en la siguiente herramienta que comparto en la siguiente lección. Por ahora vamos a añadir algunos colores a nuestra biblioteca de Craft. Cuando pulsas “Añadir nuevo elemento”, puedes ver que obtienes un diálogo para agarrar diferentes colores de tu pantalla. Simplemente puedes agarrar directamente desde tu página de símbolos y empezar a agregar todos estos colores a tu biblioteca de Craft. Una cosa que es una gran idea de hacer es después de agregar estos mientras los estás agregando, adelante y dales un nombre que va a corresponder a cómo te refieres al color a través de tus equipos. Eso podría ser, sin embargo, tus desarrolladores se refirieron al color en su base de código, o simplemente podría ser cómo quieres recordarlo a lo largo de todas tus referencias de guía de estilo. Una vez que añadas todas esas, también puedes seguir adelante y agregar tus estilos de texto. Una gran manera de hacerlo, va a ser sólo seleccionar todos estos textiles que teníamos como referencia antes y golpear “Añadir nuevo artículo”. Podría tardar un minuto, solo un minuto si estás haciendo múltiplos del mismo tiempo. Pero puedes ver realmente rápidamente ahora tengo todos mis estilos de texto como punto de referencia en mi biblioteca Craft. En este punto, es realmente fácil compartir esto a través, como mencioné, múltiples computadoras o con compañeros de equipo. También lo que necesitamos hacer para usar las mismas bibliotecas, usted sería tener esa misma carpeta accesible para ellos. Recomiendo Dropbox sync como una gran opción, pero hay muchas formas de compartir estos archivos entre los equipos. Cuando alguien va a la biblioteca de Ava a su panel de manualidades, simplemente seleccionaban, “Agregar nueva biblioteca”, “Importar biblioteca”, y luego serían capaces de elegir rápidamente esa misma ubicación. Esto te permite actualizar la biblioteca de Craft y tener esos cambios reflejados en una computadora de compañeros de equipo o en tu computadora de casa, si realizaste cambios en el trabajo. Definitivamente una gran manera de permanecer en la misma página con todo su equipo, asegurándose de que los cambios se reflejen en todas las computadoras y todas las instancias de estos símbolos. La siguiente herramienta que voy a compartir hoy con ustedes chicos es nueva en la versión de sketch 47, que es la versión más reciente de Sketch. Esto va a permitir agregar todos sus símbolos en una sola biblioteca a la que se puede hacer referencia desde todos sus archivos de boceto. De nuevo, esto es genial para equipos, pero también es ideal para cualquiera que trabaje en múltiples archivos que quiera compartir la misma guía de estilo a través de todos estos archivos o múltiples computadoras que quieran tener la misma referencia de biblioteca. Lo que vamos a hacer para usar las bibliotecas de Sketch es que vamos a ir a nuestras “Preferencias de Sketch”. y vamos a dar click en la ficha de la biblioteca. Esto hace que sea realmente fácil agregar nuevas bibliotecas a su carpeta de bibliotecas compartidas. Todo lo que vas a hacer es seleccionar “Agregar biblioteca” y seleccionar un archivo real para utilizarlo como biblioteca. En este caso, es posible que desee seleccionar el archivo en el que realmente estamos trabajando en este momento como su biblioteca de Sketch. Qué va a hacer eso, si fuera a seleccionar uno, tengo un ejemplo de mi otra guía de estilo para la versión de escritorio de skill share. He agregado eso aquí como una guía de estilo de muestra, y lo que puedes ver es que ahora todos mis símbolos de mi versión de escritorio de guía de estilo están disponibles para mí aquí. Es una manera realmente genial de reducir el tamaño del archivo y hace que los símbolos sean mucho más fáciles de acceder porque realidad no están almacenados en este archivo estamos trabajando para arriba están almacenados en el archivo de la biblioteca. No tenemos que tener todos los símbolos listados en nuestra página de símbolos, podemos tener un archivo de referencia grande que esté sosteniendo todos estos símbolos para nosotros. Esto también nos permite realizar cambios en la biblioteca de símbolos una vez, y que luego se refleja a través de cualquier archivo de boceto que esté haciendo referencia a esa biblioteca. Si tuviera un archivo en el que trabajé hace seis meses, pero tener esta misma biblioteca incrustada en él, cuando vuelva a abrir ese archivo, me alertaría que todos mis estilos se actualizarían para reflejar los cambios que se hicieron en esa biblioteca de símbolos. Esta definitivamente es una buena herramienta, sobre todo para equipos más grandes, si alguien es responsable de hacer cambios, están haciendo actualizaciones a esa biblioteca de símbolos, hace que nuestro trabajo sea mucho más fácil porque solo necesitan hacer un solo lugar y todos se actualizarán automáticamente, que necesitan volver a sincronizar con la biblioteca. Como puedes ver, definitivamente las convenciones de nomenclatura y las herramientas de organización que te enseñé en lecciones anteriores fueron una gran manera de ayudar a mantener a todos en la misma página y permitir que todos trabajen fuera de la misma biblioteca. Esperemos que estas herramientas realmente te hayan ayudado, ya sea un freelancer trabajando en múltiples computadoras o trabajando en un gran equipo para hacer realmente tu flujo de trabajo más eficiente y mantener guías de estilo más consistentes a través de todos tus archivos. 10. Recapitulación: Yo quiero que todos recuerden que se supone que este sistema funciona para ti. Esto definitivamente no es una talla que se ajuste a todos y siéntete libre de retocar este proceso, o incluso acercarte para adaptarse mejor a las necesidades de tu proyecto o tu estilo de trabajo. Estoy muy emocionado de ver parte del trabajo que ustedes producen y me encantaría que todos publiquen proyectos y capturas de pantalla en la sección de proyectos de abajo en esta clase. Definitivamente, me encanta escuchar cualquier pregunta que tengan ustedes, problemas con los que se topa, o cualquier otra cosa que les gustaría saber sobre la creación guías de estilo y sistemas de diseño para sus proyectos. Definitivamente hay tanta información que aprender sobre este tema. Hay mucha gente que es muy activa en la comunidad con la que me encanta estar al día. Voy a publicar algunos recursos a continuación, especialmente de empresas más grandes que están haciendo cosas realmente de vanguardia con sistemas de diseño, y realmente empujando a la industria hacia adelante para que se adapte mucho más bien al la forma en que trabajan los desarrolladores y la forma en que los equipos de diseño y los desarrolladores deben trabajar juntos en el futuro. Muchas gracias por tomar esta clase. Realmente espero que haya sido útil para mostrarte cómo crear estos sistemas de diseño personalizados y dinámicos que realmente pueden ayudar a evolucionar tu proceso de diseño, así como hacer que tu aplicación o sitio web en general sea más cohesivo.