Sistema de diseño de Figma desde cero - Clase magistral UI

1. Qué aprenderá en esta clase de sistemas de diseño: Bienvenido a mi clase sobre sistemas de diseño usando Figma. En esta clase, vamos a aprender qué son los sistemas de diseño, cómo conformamos nuestro sistema de diseño, y cómo convertimos eso o diseñamos eso en Figma. Y podemos reutilizar eso en nuestros proyectos con desarrolladores, con nuestros compañeros de equipo y diferentes diseñadores. Antes de profundizar en los sistemas de diseño, vamos a aprender un poco más sobre cuáles son nuestros principios de diseño. ¿ Cuál es la declaración de propósito de sus sistemas de diseño? ¿ Cuáles son los diferentes componentes? ¿ Cuáles son sus cualidades? ¿ Cómo debe ser un componente? ¿ Qué son los tokens, reglas, temas? Entonces muchas cosas que vamos a aprender antes de profundizar en diseñar realmente nuestro sistema de diseño. Así que mantente en sintonización conmigo. Vamos a trabajar en cuadrículas. Vamos a trabajar en iconos, ilustraciones. Vamos a trabajar en diferentes sistemas de red, diseñar un montón de cosas, incluyendo nuestros botones. Entonces vamos a crear componentes más simples que vamos a crear. Los componentes más grandes se llaman moléculas. Si conoces el sistema de diseño atómico. Eso es todo lo que vamos a cubrir en esta clase. Vamos a crear un tema completamente oscuro, a menudo aplicación de aprendizaje de aplicaciones usando Figma. Y vamos a construir su sistema de diseño. Y voy a compartir contigo mis técnicas, cómo vamos a usar diseños de auto y cómo vamos a usar diferentes componentes y cómo podemos intercambiar fácilmente diferentes componentes entre sí o nosotros puede manipularlos fácilmente. Espero que aprendas mucho conmigo. Aprendamos juntos y comencemos esta clase de sistema de diseño conmigo. Te conoceré pronto en la clase. Hasta entonces, cuídate. 2. Introducción a el sistema, beneficios y las salidas del sistema de diseño: En este video, vamos a hablar de sistemas de diseño. Ahora las primeras preguntas que surgen incluso en nuestras mentes es lo que realmente está diseñado sistema. Así que piense en todo lo que se maquille en cualquier producto. Tienes, cualquier aplicación móvil o cualquier empresa, por ejemplo, digamos Google. Sea cual sea el diseño que utilice, colores, ícono, topografía, tono y voz. Cuáles son sus estilos, diferente estilo de diseños. Entonces tenemos convenciones de codificación. Entonces todos estos en realidad conforman un sistema de diseño. Ten en cuenta que los sistemas de diseño van a ser parte de todas estas cosas. Tu tono y estilo, tu gramática, tu personalidad, producto, personalidad, que va a ser tu estilo o voz de tu producto. Y luego tenemos tipografía, colores, diferentes animaciones, incluso las micro animaciones, estas también forman parte de tus sistemas de diseño. ¿ Cómo se va a hacer clic en el botón cuando, qué va a pasar cuando se va a hacer clic en el botón? O lo que va a, qué animación va a tocar allí durante todo un tiempo. Entonces todos estos son en realidad la parte de tu sistema de diseño. Vamos a estudiar algunos de los pilares del sistema de diseño. Muchos de ustedes, malentendieron los sistemas de diseño. Muchos de nosotros, piensan que solo la biblioteca de componentes o la biblioteca de patrones, o simplemente la guía de estilo es su sistema de diseño, pero no lo es. Entonces vamos a mirar cinco pilares del sistema de diseño y luego vamos a ver diferentes beneficios de los sistemas de diseño. Cuáles van a ser las entradas, lo siento, las salidas de los sistemas de diseño. Empecemos a ver cuáles son esas cosas. En primer lugar, vamos a mirar los pilares del sistema de diseño. Y esas son en realidad pautas de marca que van a ser tu primer paso. Las pautas de marca se desarrollan principalmente cuando estás diseñando los Logos o la imagen de marca. Incluye tono y voz, personalidad de tu marca. Entonces tenemos en realidad, lo que dice es que es tu presencia general de tu marca o de tu producto. Por ejemplo, si soy persona y salgo al mercado, todo mi vestidor, mi tono, mi estilo de hablar, mi estilo de caminar, todos estos van a ser parte de mi personalidad. Por lo que estas son las cosas que se van a definir en tus pautas de marca. Entonces tenemos guía de estilo. Las guías de estilo van a contener toda tu tipografía, tus iconos o ilustraciones. Todas estas cosas realmente van a estar en la guía de estilo. En su mayoría se trata de diseño de nivel atómico. Te refieres a que los elementos básicos y de tu diseño, los elementos más pequeños de tu diseño, rejillas, rejillas también forman parte de él. Entonces tenemos lenguaje visual. El lenguaje visual es en realidad toda la sensación de tu producto. Si uso solo una palabra, va a ser la sensación de tu producto, cómo realmente se siente tu producto. Entonces tenemos biblioteca CSS, aunque va a ser al final de tu proceso, pero es una parte muy importante. Biblioteca Css o marco CSS básicamente es el estilo de codificación o biblioteca de codificación que está utilizando. Siempre que tus codificadores estén utilizando una biblioteca específica, tienes que, como diseñador, tienes que atenerse a esas reglas o tienes que adoptarlas en tus propios diseños. Por ejemplo, si nos fijamos en Bootstrap, todas las aplicaciones o sitios web que son construidos por Bootstrap, se ven casi iguales. De igual manera, tenemos Fundación. Recientemente, tenemos CSS de viento de cola. Realmente me encanta ese diseñador. He comprado algunos de los cursos de ese desarrollador. En realidad es diseñador plus desarrollador pesado como desarrollador primero y luego fue al diseño. He aprendido diseño de eso de él también. Entonces tenemos fundación, bootstrap, Bulmer, el CSS y otras, muchas otras plataformas CSS. O también puedes llamarlos frameworks front-end. Estos realmente te van a ayudar a diseñar toda tu interfaz en formato HTML y CSS. El último es la biblioteca de patrones. En realidad mejor biblioteca es en realidad la segunda última. Pero ahora mismo, lo que venga a la mente, te voy a decir que el quinto es biblioteca de patrones, que va a ser tus componentes, por ejemplo, tus cartas, tus repetibles. Por ejemplo, tienes blogposts. Hay párrafos más algunos botones y algunos encabezamientos. Entonces vas a combinar esos y crear una biblioteca de componentes. Ahora hablemos de los beneficios de los sistemas de diseño. Mucha gente, en su mayoría empresas más grandes, si eres un nuevo diseñador, van a resistirse a que no necesitamos un sistema de diseño. Y cómo los vas a convencer. Los sistemas de diseño en realidad van a eliminar todas las inconsistencias en sus interpretaciones. Por ejemplo, he diseñado algo y eso va a ser, por ejemplo, he diseñado un botón y El estado de hover del botón va a tener animación de la sombra paralela. Esa es la mía, se puede decir, la percepción de ese diseño mientras estaba diseñando. Ahora cuando ese diseño va a un desarrollador, podría pensar que ni siquiera se cuenta de ese leve cambio en la sombra. Por lo que estos problemas van a reunir tiempo en tiempo y dentro un año o dos años habrá muchas inconsistencias y esto en realidad sellama profundidad de inconsistencias y esto en realidad se diseño de interfaz de usuario. Esa profundidad va a seguir recogiendo. Y el sistema de diseño en realidad no puede reducir esa profundidad de diseño y también los problemas de interpretación. Mi desarrollador podría estar pensando que es otra cosa. Podría estar pensando que es otra cosa. Estas interpretaciones se van a reducir. Entonces tenemos una única fuente de verdad para desarrolladores y diseñadores. Los desarrolladores saben que este es el bloque que van a utilizar. Van a tirar ese bloque de código CSS y van a usar eso la mayor parte del sistema de diseño. También vienen con ejemplos codificados de esos componentes. Esto es otra cosa que muchos, muchos diseñadores que no entienden. Entonces tenemos consistencia, uniformidad, enfoque de diseño cohesivo en todos nuestros diferentes productos. La mayoría de las cosas como puedes ver estás usando Facebook, Google, todas las demás apps, empresas más grandes, están en múltiples plataformas o incluso si tu app es solo una munición de sitio web Anna, y una app móvil, solo para producto app o dos producto a facet producto son dos fases del mismo producto. Aún así puedes, este sistema de diseño te puede ayudar mucho. Entonces si tienes dos fases, puedes mostrar la misma personalidad en ambas direcciones de tu. Entonces por ejemplo, si soy persona y estoy usando una camiseta y unos pijamas o tal vez unas zapatillas. Y cuando doy la vuelta al otro lado, llevo puesto un esmoquin. Esto es realmente irritante para los usuarios. Por ejemplo, el espaciado de botones de diseño de tu sitio web es diferente y en tu aplicación móvil es diferente. Esto va a crear muchos problemas. Entonces la cohesividad, la consistencia entre tus diferentes plataformas. Por ejemplo, una aplicación similar se ve igual en iOS y casi lo mismo en teléfonos Android. Por lo que esto es básicamente se puede lograr con sistemas de diseño. Entonces tenemos una cosa más es que los desarrolladores y diseñadores, no tienen que luchar una y otra vez por pequeños problemas de diseño. Por ejemplo, quiero esta naranja y el desarrollador dice, quiero este naranja, este tono de la naranja. Entonces este es un problema muy pequeño. Una vez que nos hayas diseñado sistema de diseño, estos problemas no van a surgir. Tienes que resolver los problemas reales del usuario o los problemas más grandes que tienes para mirar el panorama más amplio. En lugar de clasificar pequeños cambios y pequeños problemas. Eso es todo acerca de los beneficios del sistema de diseño. Y veamos cuáles serán las salidas del sistema de diseño. Muchos de nosotros, no sabemos cuál será la salida. El resultado es en realidad una documentación clara y actualizada donde todo se explica. Entonces tenemos lineamientos, lineamientos de diseño, reglas, estilos, todo lo que es fácil entender para los desarrolladores y para los diseñadores. Segundo es documentar el razonamiento por qué en realidad elegimos este diseño o esta animación. Esto es en realidad, se puede justificar fácilmente. Por ejemplo, después, después de seis meses, tu CEO o tu manager te llama y dice por qué esta animación está sucediendo así. Puedes mostrarles que esta fue la razón detrás de ella. A los usuarios realmente les encantó. Tal vez algo más. Entonces contamos con herramientas y procesos que te ayudan a implementar el sistema de diseño a diario. Eso es en realidad, por ejemplo, si has elegido un Figma o has elegido un framework CSS específico o específico, puedes decir convenciones de nomenclatura. Estas son en realidad terminologías diferentes que pueden tener un impacto muy grande en cuando vas a colaborar con tus diseñadores y desarrolladores. De igual forma podemos, en diferentes procesos como por ejemplo, nosotros, podemos, por ejemplo, si quiero cambiar todo el tema de mi app, por ejemplo, quiero una actualización o mi CEO me llama y dice que necesitamos actualizar nuestro sistema de diseño a un look más moderno o tal vez algo más. Podemos, podemos implementar eso de muchas maneras diferentes. Podemos implementar eso dentro de un solo producto y ver cuál es la respuesta de los usuarios. Son muchos los procesos que puedes desarrollar para implementar ese sistema de diseño. Y puedes decirles a tus desarrolladores o a los gerentes de producto que así es como vamos a implementar este sistema de diseño, esta terminología de diseño o algo nuevo. Si estás trayendo algo nuevo a tu sistema de diseño, lo vamos a tener así. Este va a ser el nuestro proceso. Estas son todas las cosas sobre el sistema de diseño. Entonces tenemos, hemos aprendido los pilares del sistema de diseño o partes principales del sistema de diseño. ¿ Cuáles son los beneficios del sistema de diseño? Espero que hayan disfrutado esta lección. Hasta entonces vamos a aprender mucho sobre los sistemas de diseño. Vamos a construir nuestro primer sistema de diseño en esta clase. Y te voy a ver pronto en otra lección. Hasta entonces, cuídate. Adiós. 3. Declaración de propósito en sistemas de diseño: Siempre que iniciamos nuestro sistema de diseño o construcción como un sistema de diseño, lo primero que tenemos, tenemos que hacer es que tengamos que construir una declaración de propósito de nuestro sistema de diseño. Ahora, para la declaración de propósito, vamos a hacer sólo tres o cuatro preguntas simples a todos nuestros interesados. Diseñadores, desarrolladores, gerentes de equipos de productos, CEOs, o gerente de producto o lo que sea, la persona que se invierte en esa app. Entonces las preguntas serán, la primera pregunta será, ¿cuál es el objetivo de este producto? Entonces tenemos, ¿por qué es importante? ¿ Por qué estás creando este sistema de diseño? Y entonces el tercero es, ¿cómo nos ayudará? Y el cuarto es, ¿para quién es? Podría haber respuestas diferentes para diferentes equipos o diferentes apps para el mismo, mismas estas preguntas. Las respuestas podrían ser que nuestro sistema de diseño nos ayude a liberar nuestro tiempo para nuestros diseñadores y desarrolladores de productos. Y pueden enfocarse en grandes problemas por parte de los usuarios o los principales problemas que enfrentan y los usuarios están enfrentando. El segundo es ¿por qué es importante? Podría haber muchas respuestas a esta, pero un ejemplo está por aquí. Si no vamos a innovar, nuestro producto será comido por nuestros competidores. O podría ser que nuestros usuarios se puedan confundir con la inconsistencia en nuestro diseño de producto. Tercero es ¿cómo nos va a ayudar? Entonces, ¿cómo nos ayudará? En realidad, se va a ahorrar con el tiempo. No vamos a hacer lo mismo. Se puede decir discusiones sobre el color del botón o el tamaño del botón. Esto va a ahorrar mucho tiempo y dinero. Entonces vamos a tener patrones repetibles. Podemos reutilizarlos una y otra vez. Se va a ahorrar mucho tiempo y muchos dolores de cabeza para nuestros desarrolladores y diseñadores. Ahora el cuarto es para quién es? Normalmente lo es para todo nuestro equipo de productos. Y lo van a utilizar, excluyendo el, creo que el CEO o el dueño de esa empresa, su mayoría los diseñadores, desarrolladores, incluso los gerentes de producto. Quizás también necesiten usarlos de vez en cuando cuando están desarrollando algunos wireframes o algunas maquetas o algo así. Por lo que estas son las preguntas que vas a hacer a tus partes interesadas, tus desarrolladores, o tus diseñadores antes de que vayas a empezar a hacer un sistema de diseño, asegúrate de crear estas preguntas. Obtienes al menos la dirección de que este va a ser nuestro sistema de diseño. Este es el propósito sobre el sistema de diseño. ¿ Por qué es importante? ¿ Cómo nos va a ayudar y para quién es? Por lo que voy a compartir con ustedes todas las diapositivas. aquí hay dos ejemplos, así que asegúrate de descargar estos archivos PDF y todos nodos junto con este curso, puedes revisarlos y siempre que publique eso, tienes que enviar su asignación, puede enviarla fácilmente. Eso es todo acerca de la declaración de propósito del sistema de diseño. Ojalá les haya gustado esto, aprendido algo nuevo, nos reuniremos en otra lección. Pasemos a la nueva lección. Cuídate. Adiós. 4. Principios del diseño y cómo hacer que ellos sean con ellos: En este video, vamos a aprender sobre los principios de diseño. Cuáles son sus dos tipos principales y cómo realizar un taller de principios de diseño. Cómo vas a reunir a todos tus equipos y qué preguntas, y cómo vamos a llegar a esos principios, principios de diseño. Así que empecemos. En primer lugar, vamos a introducir lo que en realidad es principios de diseño. Los principios de diseño son básicamente pautas que te van a ayudar a lo largo de todo tu proceso de diseño desde el principio hasta el final, donde tienes donde va a estar la dirección de diseño. Entonces, ¿por qué? Porque podemos tener experiencia más alineada o experiencia similar a través de diferentes productos o, o plataformas. Ahora bien, esto va a quedar claro cuando vamos a ver algunos de los ejemplos. Y eso es agradable y sencillo. Estas son solo palabras, pero importan mucho. A estos se les llama principios universales. Encantador se va a aplicar a todo el conjunto de productos. Pero si quieres llegar a un producto específico, principio de diseño específico, por ejemplo, como principio de diseño de Intercom, tienen algo así como transacciones de diseño, Conversaciones de diseño establecido que luego transacciones. Por lo que en realidad significa que las transacciones son muy robóticas si vas o visitas a algún banco o cualquiera de ese tipo de instituto, la gente va a ser muy formal. Van a requerir mucho documento, documentación y cosas así. No son cálidas y muy acogedoras, son muy amables. Diseñar conversaciones en lugar transacciones es uno de los principios de diseño, estáticos , muy específicos, que vamos a tener una sensación muy acogedora o muy cálida por parte de nuestro producto. Ahora, ¿por qué necesitamos estos principios de diseño? Este es en realidad todo tu diseño, tu comportamiento de producto, tu tono y voz, todo en realidad va a ser parte de tus principios de diseño. Ahora, la principal razón detrás de esto es que vamos a utilizar estos principios de diseño para tomar mejores decisiones de diseño. Esto es en realidad, se puede decir, se puede decir la espada del principio de diseño. Entonces, ¿por qué necesitamos eso? Nosotros, somos, por ejemplo, tenemos dos conjunto de botones o Botones Estilos y tenemos que decidir sobre uno de ellos o tema, uno de ellos tenemos que múltiples temas y uno de ellos, refleja nuestro diseño como la sencillez placentera. Y el otro es un poco, puede decir formal o se puede decir un poco aburrido en su tema. Entonces cuál vamos a decidir vamos a ir hacia tema más agradable y simple o botón simple en lugar del complejo o el volumen formal. Estos principios de diseño van a guiar nuestras decisiones de diseño. Hablemos de cómo vamos a realizar un taller de principios de diseño y cómo vamos a llegar a estos principios de diseño. Ahora el primer paso es que vamos a reunir a todos los miembros de nuestro equipo. Eso incluye desarrolladores, diseñadores, redactores, expertos en SEO. Entonces tenemos gerentes de producto o cualquier persona que se invierta en el producto que esté vinculado a este producto. Segundo es que vamos a conseguir una hora todos los materiales, por ejemplo, nota post-it o Sharpies agrios, marcadores o lo que necesites. Entonces vamos a dar esos papeles a los miembros de nuestro equipo y pedirles que escriban al menos cinco principios. Vamos a reunir todos esos principios y los vamos a publicar en un tablero y los vamos a reorganizar y hacer converger un tema. Y el tema es el siguiente paso. Entonces una vez que se forme el tema, los vamos a combinar en, votándolos y clasificándolos que estos son los mejores principios. Estos en realidad, estos son los principios que reflejan nuestro producto. Esto, esto se siente como que este es nuestro producto. Entonces esto se trata en realidad de sentir más que soluciones de diseño concretas. Esto es en realidad, sin embargo, tono será lo que será la, puede decir, la personalidad de nuestros productos. Entonces podemos clasificarlos fácilmente y luego votarlos y vamos a seleccionar cinco de ellos. Más de cinco personas van a olvidarlas. Así que asegúrate de que sean menos de cinco principios de diseño para tu producto que van a formar parte de tu sistema de diseño. Espero que hayas aprendido mucho y disfrutado esta lección sobre principios de diseño, cómo ayudan a tomar nuestras decisiones de diseño, y cómo van a formar parte de nuestro sistema de diseño. Así que pasemos a la siguiente lección y aprendamos algo nuevo. Adiós. 5. 7 pasos para crear tu sistema de diseño: En este video, vamos a discutir algunos de los pasos, cómo vamos a construir un sistema de diseño. Pero antes de eso, antes de pasar a eso, vamos a mirar cosas diferentes que ya tenemos. Entonces cada vez que vamos a empezar a construir nuestro sistema de diseño, vamos a empezar con lo que ya tenemos. Por lo que básicamente hay dos o tres grupos de partes interesadas que van a estar presentes, por investigar lo que ya tenemos y qué problemas ya tenemos. Así que empieza con tus CEOs, tus gerentes de producto, tu gerente de marketing, y también con tu equipo de desarrolladores y tu equipo de diseño. Entonces pregúntales a todos ellos qué ya tienen, qué necesitan, cuáles son sus problemas? Vamos a preguntar a estas partes interesadas qué ya tienen. Entonces lo que ya tienen se llama inventario de UI. Tienes que construir eso. Vamos a ver algunos de los pasos en la siguiente diapositiva. Entonces antes de eso, tenemos que mirar todas las diferentes plataformas o superficies, básicamente, superficies que van a ser parte de nuestro sistema de diseño. Por ejemplo, es posible que necesite plantillas de correo electrónico para marketing que pueda necesitar y publicaciones de blog, plantillas o diseños de blogs para marketing. Tienes que entender que tu sistema de diseño no sólo va a ser tu aplicación web o móvil, sino que también va a tocar todas las superficies diferentes. Por ejemplo, el marketing, por ejemplo, adquisición de nuevos clientes de los anuncios de Facebook. Por lo que habrá muchas superficies diferentes, se puede decir, adheridas a su sistema de diseño. Así que pasemos al siguiente y vamos a ver todos los pasos. Ahora vamos a ver siete pasos diferentes que debemos dar para crear nuestro sistema de diseño. Nuevamente, como ya dije, que vamos a empezar con lo que ya tenemos, por lo que vamos a hacer inventario de lo que ya tenemos hoy. Vamos a tomar nuestro inventario de UI. Hay una lección sobre el inventario de los EAU. Te voy a mostrar cómo hacer eso. El siguiente paso es conseguir todos a bordo con su sistema de diseño, su desarrollador, en su equipo de diseño, sus directores ejecutivos o gerentes, u otras partes interesadas, hay que ponerlos a bordo que realmente necesitamos para desarrollar nuestro sistema de diseño. En tercer lugar se establecen los componentes de línea de base. Por lo que los componentes de línea base son básicamente los componentes principales que van a ser los bloques de construcción de tu sistema, tu, tu aplicación móvil o tu sitio web. Sin eso, no se puede construir nada. Estos son los componentes de línea de base. Vamos a construir todo eso. Por ejemplo, tus botones, abatibles , todo lo que las cosas se forman. Entonces tenemos tocho, boletas, topografía, escalas, tipografía, y colores es creo, el principal componente principal de equipo de tu sistema de diseño que va a definir tu lenguaje de marca, su esquema de diseño de diseño. Entonces se va a decidir a dónde va realmente tu diseño , en qué dirección. El quinto es Strand, ¿verdad? Estos estandarizan estos a través de sus productos. No trates de exagerar tu sistema de diseño. El inicio, hay que crear cosas simplemente simples. No tienes que crear una gran cantidad de sistema de diseño complejo son sistema de diseño muy grande. Primero hay que estandarizar puertas, todos los colores, paletas de colores que esas topografía, tipografías a través de todas tus plataformas, tu sitio web de laboratorio móvil, deberían verse casi armoniosas, Creo que no es idéntico, sino armonioso. Y deberían parecer que forman parte del mismo sistema o de un producto o de una empresa. Entonces tenemos que integrar el sistema de diseño con nuestro proceso. Tenemos que construir un proceso de cómo vamos a crear nuestro sistema de diseño sobre cómo vamos a implementar eso. Cómo van a procesar nuestros diseños desde figma o desde nuestro sistema de diseño en nuestra herramienta hacia los desarrolladores en qué formato. Más bien vamos a utilizar el JSON según lenguaje o CSS o HTML, lo que sea. Tienes que crear un proceso. Entonces el último es mantener tu sistema de diseño. Tenemos que mantenerlo. Porque el sistema de diseño va a estar siempre evolucionando. No se puede tener un sistema de diseño que sea estático por como cinco años. Tienes que crear nuevos componentes. Es posible que no necesite componente o un botón que tenga que crear. Tal vez después de uno o dos años, ¿tienes que crear nuevo tema para todo tu sistema de diseño? Quizás necesites un tema oscuro e iluminación para tu sistema de diseño. Habrá cambios que tienes que mantener. Por lo que habrá un equipo de diseñadores o tal vez un desarrollador que te va a ayudar a construir o mantener o mantener tu sistema de diseño. Eso es todo, estos son todos los pasos para construir un sistema de diseño. Siete pasos. Vamos a discutir un poco más en las próximas lecciones. Y luego vamos a Figma y comenzaremos nuestro sistema básico de diseño en Figma. Hasta entonces toma, vamos a verte y conocerte pronto en la próxima lección. Hasta entonces, cuídate. Adiós. 6. ¿Cómo auditar el inventario de UI?: En este video, vamos a aprender a auditar tu inventario de diseño de interfaz de usuario o lo que ya tienes. Hay que empezar con virtud ya tener un MOU o construir un sistema de diseño. Son pocos pasos. No voy a ser muy elaborado al respecto ni que sea una conferencia muy larga. Este va a ser un video corto de dos o tres minutos, y veremos qué, cómo auditar nuestro inventario UA. Entonces el primer paso es que tenemos que tomar las capturas de pantalla de todas las diferentes pantallas. Ahora, lo que estamos buscando, estamos buscando inconsistencias. Ten eso en cuenta. Estamos buscando inconsistencias en color, en diáfisis y tamaños de Typhoeus, tamaños de fuente. Entonces estamos buscando inconsistencias en estilos, tal vez tus gradientes. Hay que tomar esas, todas esas inconsistencias. Toma las capturas de pantalla, tienes que mirar cada pantalla que ya hemos diseñado o construido. Si tu empresa o tu producto es nuevo, no has construido nada. Esto no es lo que necesitas. Esto es para si la empresa ya ha construido algo y hay que auditar el inventario de la interfaz de usuario. Así que toma esas capturas de pantalla de todas esas inconsistencias, entonces vamos a agruparlas en diferentes categorías como cabecera de navegación, desplegable, tarjetas o lo que sean esas diferentes categorías. Entonces también podemos subcategorizarlos como Estados botón. Podría haber diferencias en los estados de botones. Y luego tenemos que mostrar estas inconsistencias al CEO, a tu equipo de desarrolladores o a tu equipo de diseño que estas son las inconsistencias a través de tus diferentes productos, a través de tus diferentes plataformas. Y eso es todo. Tenemos que trabajar desde esas inconsistencias. Tenemos que limitarlos. Tenemos que unificarlos en un solo sistema de diseño. Voy a compartir con ustedes un artículo escrito por aquí tenemos el artículo creo que está escrito por no estoy seguro. Brad Frost. Brad Foster es un tipo famoso. Eso es un acerca de estas moléculas, átomos y todas las cosas de los sistemas de diseño. Se puede ver aquí el ejemplo de la página web de mi banco. Y aquí se puede ver la inconsistencia ANS en los diseños de botones. Hay como creo que tienen como diez tipos diferentes de botón. Hay diferentes estilos, son de diferentes tamaños. Existen múltiples inconsistencias en todos estos botones. Para que puedas ver estas son sólo las capturas de pantalla. Él ha tomado. Otro por aquí. Se puede ver solo el botón Aprender más o Empezar con esta flecha. Tiene como diez variaciones diferentes y esto es realmente frustrante. Aquí puedes ver por cada C, puedes ver aquí tienen todos los diferentes insisten pueden inconsistencias en botón. Se pueden ver los tamaños, los, incluso los gradientes, son diferentes. Esto es gris total, esto es gradiente grisáceo y esto es un poco diferente a lo que tenemos dos diferentes, se puede ver el inscribirse y lo sugerido tienen dos gradientes diferentes. Uno es un poco más oscuro y uno es un poco más ligero. Puedes ver el checkout con PayPal o añadir al carrito. Son yo creo que los significan diferentes acciones, pero tienen el mismo color. Puedes ver que estas son como vas a descubrir diferentes inconsistencias y tienes que denunciarlas. Tienes que empezar con estas auditorías de la interfaz de usuario. Por lo que hay que crear un archivo separado en Figma o cualquier software que esté utilizando. Toma esas capturas de pantalla y agruparlas en diferentes categorías y preséntalas a tu gestión. Eso es todo acerca de cómo auditar tu inventario de IU. Espero que hayan disfrutado esta lección y hayan conseguido algo, algún buen conocimiento de ella. Nos vemos pronto. Te veré pronto en la próxima lección. Hasta entonces, cuídate. Adiós. 7. Qué son los componentes del sistema de diseño: Este video se trata de componentes. Son los, qué, nuestros componentes de cuadrícula o cómo construir un buen componente, y cómo ordenarlos, cómo categorizarlos, y qué debe estar presente en un componente que es el, da más valor. Empecemos y veamos cómo los vamos a nombrar, cómo los vamos a categorizar. ¿ Qué debe estar presente en componente? Lo primero es que hay dos tipos principales de componentes. Cómo vamos a construir un componente. Intenta ver cuál es la cosa más frecuente que Lee usó o elemento de diseño en tu diseño. Por ejemplo, botones, se van a utilizar una y otra vez, impuesto que se va a utilizar una y otra vez. Encabezados, se van a utilizar una y otra vez. Todos estos son, pueden ser componentes. Podría haber componentes más pequeños, podría haber componentes compuestos principales son componentes más grandes que se llaman moléculas. Entonces primero vamos a mirar componentes de alta frecuencia, los componentes que se van a utilizar una y otra vez. Segundo es que vamos a ver qué componente es ese va a mostrar la esencia de nuestra marca o espectáculo. Se puede ver cada vez que un cliente, miran ese componente, van a adivinar que este es el producto de Google. Esto es Airbnb. Tenemos que, esto, estos componentes, tienen componentes de alto valor porque van a mostrar su marca. Van a contar la historia de tu marca. Por lo que hay que categorizarlos también. Tienes que, tienes que crear componentes de alto valor, de alta frecuencia también. ¿ Qué son diferentes? Se pueden decir diferentes propiedades de un buen componente. Entonces primero es decidida. Siempre que estés creando un componente, debe resolver nuestro problema de diseño. Si no está resolviendo un problema de diseño, entonces creo que no es un componente. ¿ Segundo es eso reutilizable? Reutilizable no significa que tengamos que usar el mismo botón una y otra vez. Reutilizable significa que podemos cambiar fácilmente su color y forma. No es bueno para un solo caso de uso, o no se usa solo en formas. Puedes usarlos en cualquier lugar. Tercero es que debe ser flexible. De la flexibilidad viene, puedes cambiar su color, puedes cambiar su tamaño, puedes cambiar su estilo. Entonces estas son tres cosas que van a hacerlo flexible, tamaño, color, y estilo. Tal vez puedas delinear ese mismo botón y usarlo en otro lugar. Entonces es decir, te voy a mostrar algunos ejemplos por aquí. Veamos, veamos un ejemplo. Aquí. Ya puedes ver, déjame mostrarte. Puedes ver por aquí, si miras esta página de Airbnb, este componente más grande, este componente de encabezado superior donde tenemos Mostrar todas las fotos que es muy específico para Airbnb. Siempre que muestres esto, solo todo este producto, todo este componente, el componente más grande, en cualquier lugar alguien vaya a adivinar que este es el sitio web de Airbnb. Entonces otra vez, este componente por aquí, este 1 $13 por noche, todo este bloque de tarjeta de precios de tarjeta o tarjeta de check-out está realmente mostrando la esencia de toda esta marca, esta empresa agujero o firme. Uno. Esto va a ser muy, muy único de este producto. Entonces estos son componentes de alto valor. Vengamos a la reutilización de la flexibilidad de un componente. Se puede ver por aquí, aquí tenemos comprobar disponibilidad, un botón muy bien diseñado. Y si nos refrescamos por aquí, se puede ver esto es de nuevo un botón mostrar todas las 11 amenidades. Y es misma forma, misma altura, mismas curvas de los bordes, redondez de los bordes, esquinas, y el mismo estilo, mismo tamaño, todo, incluso el tamaño del texto es el mismo, sólo los colores son diferentes y hay estilo diferentes softwares, línea de borde delgada. Esto se llama la flexibilidad de un componente. Entonces este es en realidad un mismo componente, pero con estilo diferente. Entonces estos son lo que debes tener en un componente, reutilización, flexibilidad para resolver un problema. Por ejemplo, se puede ver aquí este botón en realidad muestra todo este lugar va a ofrecer. En realidad está ocultando algunas de las características. Entonces si haces click en él y esto se va a mostrar. En todas las diferentes 11 amenidades por aquí. Similar, pero este botón, esto realmente está resolviendo un problema que es muy único, que en realidad es característica de producto única que en realidad es comprobar la disponibilidad. Esto realmente va a reservar o mostrarte la disponibilidad de este lugar. De igual manera, se puede ver este botón, esto es totalmente diferente. Tiene un tamaño más pequeño, tiene ícono, tiene menos espacio a su alrededor porque está sirviendo a un propósito diferente. conjunto. Te va a mostrar todas las fotos. Estos son diferentes estilos de botón y estos son tienen diferentes propósitos. De acuerdo, Así que eso es todo. Pasemos a la siguiente diapositiva. La siguiente pregunta es cómo vamos a agruparlos? ¿ Cómo vamos a nombrar estos componentes? Esta es una pregunta muy grande. Lo primero es siempre categorizarlos en base a propósito. Entonces si tienes encabezados o textos, van a estar sentados en una sola página, página guía de estilo donde vas a dar estilo a todos los textos. Entonces tenemos propósito es como por ejemplo, tenemos una página de checkout. Son, tenemos una página de propiedades de Airbnb, por ejemplo, digamos que tenemos página de propiedad. Lo vamos a arrepentir. Vamos a agrupar todas esas cartas o todos aquellos componentes relacionados que se van a sentar están relacionados con esa página específica o esa característica específica. Vas a agruparlos así. Por lo que te va a ayudar a crear componentes más grandes o grupales más grandes como nosotros tenemos tarjetas. No podemos programar esas tarjetas en diferentes páginas. Por ejemplo, todas las tarjetas que estén relacionadas con la página del producto, tenemos que guardarlas en una sola página. La próxima vez, cada vez que entró un nuevo diseñador, puede ver fácilmente que esto es, estos son todos los componentes relacionados con nuestra página de productos. Así es como vas a agrupar tus componentes. A continuación, déjame mostrarte algunas de las convenciones de nomenclatura. Por ejemplo, encabezamientos. Podemos tener mega rumbo H1, H2, H3. También podemos nombrarlos relacionados con lo que realmente usan los codificadores. Nuestro familiarizado con el encabezado dash blog. Se puede ver este encabezado dot dash blog está muy relacionado con el propósito de este encabezado en lugar de su tamaño. Estoy categorizando o usando el nombre basado en el propósito de ese rubro, que va a ser el encabezado del blog, entrada de blog. Entonces tenemos tarjetas, tarjetas de préstamo, tarjeta de registro, pie de página, grande. Se trata de autos diferentes que se van a pagar específicos o se puede decir nombre específico que este nombre muestre el propósito. Tercero es Button. Nunca nombre tus botones como botón azul, botón rojo, botón verde. Eso no muestra ni cuenta la historia de un propósito. Tienes que nombrarlos botones de acción primarios. Botones de acción secundaria. Los botones desplegables son tal vez también puedes llamarlos botones de pago o botón de página de pago, algo así. Eso va a mostrar el propósito de ese botón. Entonces déjame mostrarte el ejemplo. Déjame mostrarte otra vez la misma página por aquí, Airbnb puedes ver por aquí, si miras este botón rojo rosáceo, realidad es el botón de acción principal de aquí. Entonces es el botón principal por aquí en esta página. Si miras a todos los demás botones, ellos, no muestran tanto de un bop. Bop significa que no son muy visibles, o son un poco tenues, o han sido limitados en su estilo. Y se puede decir saturación. Se puede ver esto es un botón gris, blanco y gris de nuevo por aquí. Si miramos por aquí, esto es nuevo un botón blanco grisáceo. No tiene ningún color. Entonces si bajamos contacto host esto de nuevo. Botón que es aburrido y gris mezclado con, casi mezclado con el fondo. Pero se puede ver por aquí, si nos dejamos bajarlo, se puede ver que la disponibilidad de cheques sigue en la parte superior y te muestra que es una acción primaria, pero hay que nombrarlos que se trata de un botón de acción principal. Y puedes ver por aquí este estilo es en realidad nuestro botón de acción secundario o botón de acción terciaria. Entonces esto es, esta es la jerarquía y el propósito integrados en su sistema de diseño. Espero que hayan disfrutado esta lección y hayan aprendido algo nuevo. Te conoceré pronto en la próxima lección. Hasta entonces, cuídate y adiós. 8. Cómo funciona la jerarquía de componentes en sistemas de diseño: En este video, voy a hablar diferentes niveles o jerarquía de componentes. Jerarquía no significa qué componentes van a ser más importantes. Se trata de qué son diferentes clases de componentes desde básico hasta avanzado. El primero es en realidad tus componentes básicos o estacionarios que van a ser tus botones forma tus campos de entrada que son en realidad, también eres tus iconos. Estos van a ser a nivel muy básico o base. Entonces tenemos componentes compuestos. Estos son los componentes que van a ser componentes un poco más grandes, pero se van a hacer combinando dos o tres componentes. Por ejemplo, tenemos un encabezado en navegación que va a combinar diferentes enlaces y tal vez un botón y un logotipo. Este es un componente compuesto. Entonces tenemos contenedores. Los contenedores son en realidad, eres por ejemplo, una sección, por ejemplo, tengo un contenedor de tarjetas de noticias. Por lo que será un contenedor, tendrá 1234 noticias diferentes. Te voy a mostrar los ejemplos. No, no te preocupes ahora mismo. Entonces entonces tenemos diseño. El último es el diseño. Tenemos que mostrar a los desarrolladores son otros que cómo vas a diseñar todos estos contenedores en una página. Esta va a ser la última parte. Asegúrate de que cada vez que creas un componente, tienes que contar su propósito, qué está resolviendo, y cuál fue la razón detrás de él. Tienes documento que también. Déjame mostrarte algunos de los ejemplos. Y aquí tenemos el New York Times. Para que puedas ver en la parte superior tenemos esta suscribirse ahora. Esto es en realidad un compuesto, un componente o es un componente grande y tiene un botón, texto y logotipos por aquí. Si bajamos, se puede ver por aquí, esta es la de arriba. Esto es de nuevo un componente compuesto. O puedes ver nuestro contenedor, tal vez un contenedor porque es una cabecera y tiene algo de espacio. Mucho estilo son como esta navegación, esto es en realidad la navegación es componente compuesto. Y luego tenemos dos botones. Entonces tenemos esta temperatura, fecha y todo por aquí. Por lo que en realidad es componente, componente compuesto, y también es parte del contenedor de diseño. En realidad es un contenedor. Entonces este es en realidad nuestro encabezado o cabeza de masthead. Entonces se puede ver a la izquierda tenemos noticias muy grandes destacadas que en realidad es un componente muy específico que es específico para esta marca o este New York Times. Y se puede ver este tinte teme al estilo. Este pequeño texto, gran x. Ya muestra que se trata de una noticia del New York Times. la derecha se puede ver de nuevo tenemos una noticia de largometraje a la derecha, y es un componente totalmente diferente. la derecha tenemos un contenedor separado que contiene todas las diferentes noticias. la izquierda tenemos un contenedor que en realidad es como 60 o 60%, 70 por ciento del ancho y solo contiene diferentes noticias en el diseño de arriba a abajo. En realidad, esto va a ayudar a construir el diseño. El diseño será que tengamos un nombre de característica está por aquí. Entonces tenemos un pequeño componente, pequeñas noticias en vivo, algo por aquí. Entonces tenemos que encabezar noticias o malas noticias. Entonces tenemos de nuevo una pequeña noticia destacada por aquí. Creo que es de nuevo, la característica mismo estilo, se puede ver casi lo mismo. Sólo el texto. Dex tratamiento del rubro es diferente, todo es igual. Se puede ver que esto es en realidad el diseño. Tienes que decirles esa característica. Entonces tenemos que mostrar algún texto, noticias de texto, luego otra vez un destacado. Entonces se puede ver de nuevo tenemos algunos gráficos y elemento gráfico. Todo este componente compuesto es en realidad un contenedor. Esto es en realidad las actualizaciones. Puedes llamarlos actualizar actualizaciones de contenedores todas las noticias del coronavirus. Y luego nuevamente tenemos otra noticia que vuelve a aparecer. Esto es solo este lado izquierdo. Ahora si nos fijamos en el lado derecho, el diseño es totalmente diferente. Tenemos este primer componente que es nuestra noticia de largometraje a la derecha. Entonces tenemos de nuevo texto para que puedas ver las similitudes en la repetitividad de la misma recámara. Por lo que de nuevo, tenemos dos textos noticias, entonces otra vez tenemos. Un uso de opinión. De acuerdo, así que una cosa más está a la derecha, se puede ver que la tipografía utilizada es muy diferente. Es muy alto. Y de nuevo, tenemos algo destacado con una imagen. Nuevamente, algunas noticias más o tal vez artículos. Entonces otra vez, otra que vuelve a estar con pequeño video. De nuevo a la característica, la característica o algo así. Y entonces tenemos esto también puede tipo de cosa. Esto es en realidad, esto es lo que les vas a contar en la parte de diseño de tu sistema de diseño. Esto es un poco avanzado. Si tienes un producto muy grande de productos muy importantes, tienes que mostrarles que así es como vas a diseñar tu landing page o la primera página. Entonces si vas a este negocio, va a tener un diseño diferente. Se puede ver el diseño de la sección superior ha sido cambiado. Se puede ver que esto ha sido aplastado. Muy pequeño. Navegación superior. Entonces tenemos esta nueva cubierta de negocio componente, donde tenemos diferentes categorías de negocio. Y se puede ver el diseño se ha cambiado, totalmente cambiado. Ya se puede ver tenemos tres columnas en esta página. Por lo que tenemos esta noticia de largometraje como una noticia un poco más pequeña. Entonces tenemos del lado derecho, nuevamente tenemos dos noticias diferentes que están relacionadas que tengo una imagen pequeña y el estilo es diferente. Un poco de arreglo en diferente, pero el componente básico, el textil, ese tratamiento de texto es casi el mismo. Entonces tenemos este contenedor por aquí. Esto es de nuevo un contenedor de noticias de largometrajes o cosas por el estilo. También estuvo presente en el mayor salario. Déjame mostrarte si nos arrastramos hacia abajo. Veamos aquí tenemos el mismo componente. Este es un componente compuesto común o contenedores. puede ver que contiene cuatro guardias que son básicamente noticias. Se va a repetir de nuevo al fondo, si bajo, se puede ver de nuevo se ha repetido por aquí. Y de nuevo, ponlo aquí. Y otra vez. Lo mismo se ha repetido por aquí, cuatro áreas. Y eso es todo. Entonces así es como vas a crear tus componentes. Este, este botón es en realidad nuestro componente básico, el componente básico inicial. Esto de nuevo este enlace, se puede ver esto vincula tratamiento. Esto es de nuevo un componente básico. Y toda esta navegación es un componente compuesto. Todo este, esta sección es un contenedor. Tiene una gran cantidad de componentes dispuestos en diseño para crear este encabezado hetero emparejado. Espero que tengas industrial todos estos contenedores de diseño diferente, componentes básicos o componente compuesto cosa. Pasemos a la siguiente lección y luego algo nuevo. Hasta entonces, cuídate. Adiós. 9. Tokens, valores de papel en el sistema de diseño: Si quieres empezar a construir un sistema de diseño, tienes que entender cuáles son los tokens y sus valores y sus roles. Entonces esta es la lección sobre ellos. Esta es la lección más importante, creo que en todo este curso o en toda esta clase. Entonces comencemos a ver cuáles son esos tokens y sus valores. De acuerdo, Así que solo para entender que el token es en realidad un código, en realidad se extrae de lo que los desarrolladores usan para hacer. Utilizaban para asignar una variable a un valor. Este es en realidad el mismo concepto que se ha importado al sistema de diseño. Lo que hacemos es, por ejemplo, tenemos un token de textos. Entonces token de texto se puede aplicar la regla de los textos primarios, podría ser un texto de botón, podría ser cualquier cosa. Entonces cada regla o cada rol token podría ser diferente. Entonces habría cinco o seis o tal vez 20 tokens en tu sistema de diseño de diseño. Y habría como dos o tres roles diferentes para cada token. Por ejemplo, podemos dar la regla de los textos primarios al texto. Del mismo modo, el valor es en realidad la variable o estática. Lo siento, el valor será variable, nombre será estático, que en realidad es el mismo concepto que usamos en la programación. Si eres de un fondo de programación, ya lo sabes, que tenemos un nombre estático de una variable y luego el valor realmente cambia. Fichas de diseño. Se puede ver que tenemos mesa, fondo, página, fondo, valor de iluminación, valores de tema oscuro. La superficie es en realidad lo que está en la parte superior de ese fondo. Componente BG o puedes decir que es una tarjeta BD, puedes nombrarla de acuerdo a lo que utilicen tus desarrolladores o tu equipo. A lo mejor tu equipo usa tarjetas, usa tarjeta BG para fondo, tema claro, equipo oscuro, valor de textos, token de texto va a tener texto primario. Y luego tenemos luz, el equipo claro y oscuro. De igual manera, hemos silenciado textos. La acción interactiva es en realidad el botón que también puedes usar. En lugar de tener token off acción interactiva, puede usar el botón en su lugar. Eso no es un, no un muy, se puede decir, todo esto depende de lo que su equipo esté realmente usando. O también puedes usar botones y enlaces por separado. Eso depende de ti, interactivo en textos o botón en texto, eso depende de ti. Para que puedan ver casi hemos entendido el concepto de tokens y sus roles. Ahora hablemos de cómo los vamos a nombrar. Hay un método muy simple que tenemos que usar categoría primero, luego escribir, cuál es el tipo de ese componente o token, luego item y luego su estado. Por ejemplo, tenemos categoría de botón. Y el tipo sería qué tipo de botón es. Es un botón de llamada a la acción o botón silenciado o lo que sea, un botón deshabilitado. Por lo que tenemos botón dash o pequeños CTA de tablero, CTA para el botón Call to Action. Entonces tenemos guión, ¿cuál es el artículo? En realidad es un fondo. Entonces tenemos artículo es en realidad estado. Entonces aquí no tenemos estado porque es un color. Entonces el color en realidad va a tener sólo rodar fuera del color de fondo. Lo vamos a nombrar botón CTA, color de fondo. Este va a ser nuestro nombre. Del mismo modo, se pueden utilizar muchos otros nombres diferentes. Por ejemplo, si sólo está nombrando una sección o un botón o un texto, o si hay un botón, tendrá un estado de activo o deshabilitado o presionado, algo así. Entonces el estado estará al final. Aquí hay un ejemplo del código que usarán los desarrolladores. Simplemente lo pego por aquí para que puedas entender lo que será. Puedes ver aquí tenemos un token de color de fondo, luego tenemos otro valor o regla aplicada a ella. Luz de color de fondo. La luz del color de fondo es en realidad un tema ligero. Y después tenemos frontera, frontera , rayita, radio fronterizo. Podría ser regular border-radio de rollo o algo así. A lo mejor sobre radio algo quizá tengamos tres o dos roles diferentes que podemos aplicar por aquí. Por lo que es muy fácil cambiar un tema a algo. Del mismo modo, se puede ver por aquí Bill reverse es en realidad color de fondo, color del borde oscuro es en realidad color de fondo, color oscuro, color de texto claro. Por lo que este es esquema invertido. Esto es realmente, realmente fácil si sabes nombrar tokens y son variables y sus valores. Aquí está en realidad la representación visual de lo que estábamos hablando. Este es el fondo. Entonces tenemos superficie en la parte superior. Entonces tenemos texto que es nuestro se puede ver el texto es nuestro encabezamiento o párrafo. Entonces tenemos textos silenciados, que es un poco de un texto aburrido. No es texto muy nítido ni regular, es un delta x Entonces tenemos acción interactiva, que es un botón, que es fondo de botón. Y entonces tenemos texto propio interactivo sobre texto significa que es el botón en el texto. Puedes usar el botón en su lugar si lo deseas. Esto es otra cosa. A la derecha puedes ver hemos personalizado tu método de envío. Es tema inverso de lo mismo para que podamos cambiar los valores como nos gusten. Este es el concepto más simple de roles y valores token. Cómo podemos usarlos para cambiar todo un tema en algo más fácilmente. Y también podemos acortar nuestro trabajo de mantener muchas variables. Los tokens son en realidad la solución a todo este lío de diseño. Por lo que tenemos como 15 o 20 colores diferentes para usar. Diferentes superficies, diferentes sombras, diferentes. Se puede ver espaciado. Todo lo que puedes hacer es simplemente asignarles un token y cambiar las reglas. Eso es todo. Espero que hayan disfrutado esta lección. Vamos a pasar a otra lección para aprender algo nuevo. Pasemos a la siguiente lección. 10. Tipografía para ti de diseño: En este video, voy a simplificar tu sistema de diseño donde hablamos de tipografía. Entonces, ¿dónde caerá nuestra topografía en el sistema de diseño y cuántos tamaños usaremos? ¿ Cómo vamos, nombraremos esas diáfisis y sus tamaños? Así que empecemos. Ahora el primer paso será tendremos que seleccionar y comenzar con un tamaño base. Por lo que tienes que seleccionar tu tamaño de texto, que es tu tamaño base. Por ejemplo, 16 píxeles, 18 píxeles, 19 píxeles, que depende de la fase TI. Y si quieres aprender más al respecto, puedes tomar mi clase de tipografía. Una vez que hayas decidido tu tamaño base, que es legible, fácilmente legible, ilegible, vas a generar una escala tipográfica de tipo. En el siguiente, vamos a decidir nuestra line-height. Entonces si queremos que nuestro diseño sea muy área o tenemos, queremos tener un diseño moderno. Va a ser tener más espacio entre la line-height. Si quieres un diseño de baile donde tengamos, por ejemplo, una noticia o un blog donde queremos mostrarlo como si tuviéramos un periódico o tal vez algún otro sitio web que use un diseño muy denso, maquetación más oscura, tenemos para acercarlas. La altura de la línea será menor. La siguiente pregunta es, cómo tenemos que nombrar nuestra escala de tipo o diferentes tipos tamaños. Lo que realmente hago es que en realidad uso para un máximo de cuatro o cinco categorías diferentes. Al igual que tenemos un mega encabezado que va a estar presente en nuestra área de imagen de héroe en la parte superior, muy arriba, cuando aterrices en una página de destino de página web. Después tenemos en estos tres encabezamientos, encabezados 123, rumbo más grande, segundo rumbo, y tercer rumbo. Entonces tenemos textos normales, que es párrafo que es nuestro tamaño base. Entonces tenemos leyendas o texto pequeño o metadatos donde tenemos nuestros, puedes decir, si lees rojo, has leído alguna entrada de blog que hayas visto que está escrita por nombre de autor y la fecha que es en realidad metadatos. En realidad usamos un tamaño muy pequeño para metadatos, o tamaño pequeño de tifus para metadatos o leyendas. Esa va a ser nuestra pequeña categoría. Entonces tenemos, tal vez podríamos tener un tamaño diferente para nuestros botones, cualquiera que sea el texto va a estar en los botones, tal vez estoy usando 18 pixeles para mi texto, texto de párrafo, y podría ser usando 19 píxeles en un botón. Así es como en realidad divido el tamaño. Hay diferentes métodos, personas diferentes. A lo mejor podrían, tu empresa podría usar el tamaño 123456 o talla extra pequeña, pequeña, mediana, grande, mega, algo así. Depende de ti cómo nombra tu escala de tipo. Entonces también puedes nombrarlos o categorizarlos en base a su propósito. Por ejemplo, tenemos títulos de historias, encabezados, encabezados de sección de página de copia de cuerpo, metadatos, texto de botón de leyenda que en realidad hemos discutido que cómo realmente los nombro. Se trata de diferentes categorías. Así es como vas a nombrar el sistema de tipografía. Vamos a hacer todo eso en nuestra última sección donde realmente vamos a diseñar nuestro primer sistema de diseño. Así que quédate atentos, quédate conmigo y veremos mucho en las próximas lecciones. Así que hasta entonces, cuídate. Adiós, te conoceremos en la próxima lección. Vamos adelante. 11. Define el sistema de espacio: El siguiente paso en el sistema de diseño es que tenemos que crear un sistema de espaciado. Se puede ver que esto es realidad espaciado vertical y horizontal, ambos en la mayoría de un sitio web o en la mayoría de los diseños donde no estamos diseñando un sistema de diseño para y aplicación muy, muy grande. Normalmente podríamos necesitar el espaciado vertical. Cómo vas a empezar tu espaciado primero es que tienes que seleccionar tu número base, igual que tu tipografía. Tienes que seleccionar tu número base como cuadrícula de cuatro píxeles u ocho píxeles para pixel es un poco más flexible. Puede tener tamaños como 12 píxeles si quieres tener un espacio entre elementos muy pequeños en tu, tal vez estés diseñando una tabla llena de información de datos. Es posible que necesites cuatro píxeles. Y si estás creando un sitio web, creo que ocho píxeles son más que suficientes. Vale, entonces la siguiente es, una vez que hayas seleccionado tu base. Además, tienes que seleccionar tu báscula, tienes que hacer crecer tu escala, por ejemplo, para, entonces estaremos saltando a 16 u tal vez ocho, o tal vez hasta el tamaño que vayas. Tendremos como siete u ocho pasos diferentes. Esto es justo, es como construir una escalera. Por lo que especificas un paso y luego vas a subir. Y como vamos a tener escalera de ocho escalones. El siguiente es menor o más contraste con el espaciado. Es el mismo diseño de baile o aéreo si quieres un diseño muy rediseño, moderno donde tengamos mucho espacio vacío, entonces vamos a tener más espacio entre nuestro sistema de espaciado. Por ejemplo. Primero es tal vez nuestro primer inicio sería de 16 píxeles, luego el 32, luego tal vez 64. Más que eso, tendremos pasos más grandes de espaciado. Ahora, vamos a cómo vamos a nombrarlos. Hay dos formas. Primero es que hay que nombrarlos con su corbata. Por ejemplo, si es espaciado vertical, el espaciado horizontal sea lo que sea. Y también puedes hacer eso, o puedes mezclar todo el espaciado en un sistema, una letra. Y se puede decir que tenemos espacio 01234, hasta diez o 15, lo que quieras usar, pero creo que hasta diez serían más que suficientes. Segunda parte es que, por ejemplo, si estás diseñando para móvil a tu diseño, los espacios van a cambiar o cambiar a espacios más pequeños cuando vas a cambiar a aplicación móvil o tamaño móvil. Por ejemplo, si tienes un sitio web y estás diseñando una versión receptiva o más pequeña sobre cómo se vería en un teléfono móvil. Los tamaños cambiarán. También puede especificar que el espacio 0 es como 16 píxeles en el escritorio. espacio 0 es de ocho píxeles en un móvil. Para que puedas generar este sistema en dos ramas diferentes. Por lo que se recuperará, significaría lo mismo que donde hemos utilizado el espacio 0, se desplazaría a él en un dispositivo móvil. Entonces así es como se puede lograr una armonía en su diseño. Y puedes tener un sistema de espaciado que va y subió todas tus aplicaciones móviles, tus iPads, y tus vistas de escritorio. Si hay alguna app o algún sitio web que extienda de escritorio a tablet a móvil, puedes tener un sistema de espaciado donde todo el sistema de espaciado va a tener tres sucursales para escritorio, tablet, y móvil. Así es como vas a tener tu sistema de espaciado y así es como lo vas a nombrar espacio 01234. Normalmente lo que hago normalmente es que en realidad no tengo espacios muy separados. Lo que realmente hago es que sería más fácil si el sistema es más pequeño. Entonces si tienes un sistema muy grande, eres como dos o tres equipos de desarrollo y desarrolladores, o tal vez cuatro o cinco diseñadores diferentes, entonces esto no va a funcionar. Lo que realmente hago es en mi trabajo freelance, realidad nombro o etiqueta el espacio en él. Entonces primero, espaciado de categorías. En segundo lugar es vertical, cómo el elemento con un spurt vertical u horizontal. Entonces en realidad escribo el espacio. Se puede utilizar tal vez el espacio vertical. Y eso es todo. Pero normalmente trato de mencionar que son 20 pixeles, 32 fases, 40 píxeles, 64 píxeles, 44 píxeles, eso depende de ti. Por lo que hay estos, Estos son dos métodos. Por lo que sugeriría que el espacio 01234 es un enfoque un poco mejor porque puede desarrollar tanto sus diseños de escritorio como sus diseños de aplicaciones móviles también. Por lo que se va a desarrollar o aplicar a ambos y reducirá la confusión. Eso es todo acerca del sistema de espaciado. Espero que hayan aprendido algo nuevo. Pasemos a la nueva lección y veamos algunas cosas más en los sistemas de diseño. 12. Sistema de color y cómo nombrarlo correctamente: En este video, vamos a estudiar otra partícula del sistema de diseño, que es color, sistema de color. Tienes que definir tu sistema de color, cómo funcionarán tus colores sobre fondo diferente, diferentes temas, fondo más oscuro, fondos más claros. Empecemos a ver lo que tenemos en nuestros sistemas de color. Por lo que el primer paso es siempre experimentar en colores no puedes tener razón. Tienes que probar primero tus colores en diferentes fondos. Por ejemplo, si tienes un fondo más oscuro o un fondo más claro, tienes que probar los colores que tienen colores más accesibles y accesibles, que tienen más. Se puede decir oscuridad o ligereza. Te mostraré plugins de Figma que realmente lo hacen automáticamente. Por lo que no necesitamos, No necesitas preocuparte por eso. Segundo paso es que hay que tener al menos cuatro, básicamente dos colores. Uno será su color primario o acento, donde vamos a acciones, y colores secundarios para fondos y otras cosas. Y entonces tendremos colores de éxito o advertencia. En realidad, solo necesitamos dos colores que son básicamente para fondos y tu color de acento. O tal vez puedas introducir una tercera. Los colores de advertencia de éxito serán verde, azul, o tal vez rojo o alguna variante de esos colores. Entonces tendremos otra categoría que es BG, colores, es decir tres colores diferentes para fondos, tenemos fondos oscuros, tenemos fondo claro. Entonces podríamos tener colores neutros, que podrían ser algún tono de gris, azul grisáceo, o tal vez algún tono de amarillo verdoso, o tal vez algún tipo cremoso de color amarillento que es un poco opaco. Por lo que estos podrían ser tus colores neutros que también pueden ser útiles cuando intentas crear un equipo diferente dentro de tu diseño. Te mostraré mi diseño cómo todos estos colores he creado. Ahora, nombrando esos colores. Entonces lo primero es que tienes que agrupar tus colores en diferentes categorías. Por ejemplo, los colores de acción serán diferentes. Tus vínculos, elecciones están en realidad más cerca el uno del otro. Son un grupo separado. Entonces tenemos colores de texto. Necesitas saber que tenemos texto silenciado, tenemos encabezados, tenemos subtítulos, tenemos título. Entonces todos estos van a tener diferentes colores. De igual manera, podríamos tener texto para entrada, texto dentro de nuestra entrada, donde tenemos, tenemos que escribir algún texto. Entonces habría una gran cantidad de textos diferentes colores. Entonces tendremos colores apagados. Ya hemos discutido énfasis de de-enfatizar donde tenemos texto en negrita. A lo mejor queremos cambiar el color del texto en negrita. Entonces tendremos antecedentes. Los fondos serán diferentes. Fondos de acción, énfasis, de-enfatizar. Los enlaces también están muy cerca de las acciones. Quizás listas, lista, elemento, viñetas. También son, creo que en la categoría de énfasis. Los textos de texto tendrán, creo que tres o cuatro categorías máximas. Uno es texto deshabilitado, su texto normal, textos de párrafo, usted es encabezados, y tal vez algunos textos sugerentes o de leyenda que está en tres o cuatro tipos diferentes de textos, colores. Entonces también vamos a definir reglas de color. Por ejemplo, en primaria negra, ¿cuál será el color primario sobre un fondo más oscuro? En negro secundario, ¿cuál será el color secundario sobre el fondo oscuro? Vamos a tener todas esas reglas diferentes. Estoy en acento negro, que va a ser nuestras etiquetas son textos suplementarios sobre hover negro en bordes de cubierta. Si hay algo que va a cambiar en un negro tal vez el color del borde, el color del hover o tal vez el color acento. Vamos a definir esos roles. Déjame mostrarte el sistema de color de en realidad mi sistema cerrado favorito, Google Material Design. Tienen muy, muy, se puede decir, tipo sólido de sistema de color. Y se puede ver aquí tengo un esquema de color simple y a la derecha se puede ver cada fuente 1234, diferentes áreas. Entonces tenemos primaria, fff, que es de color blanco. En Secundaria es nuestro este color negro oscuro. Entonces tenemos en fondo, luego tenemos en superficie, superficie realmente descartar sobre error, tenemos un color blanco. Por lo que se puede ver si vamos a este cinco de aquí, esto también es cinco, esto también es cinco. Si correlacionamos estos, puede ver que este error rojo es realidad tener un color blanco encima de él. Sobre error significa en adulto, sobre fondo PNL, vamos a usar color blanco. De igual manera en fondo, vamos a utilizar el negro oscuro. Antecedentes. Antecedentes es en realidad, déjame mostrarte aquí. Este es nuestro trasfondo. El fondo es blanco, la superficie también es blanca, el error es rojo. De igual manera, tenemos variantes primarias, primarias, secundarias, variantes secundarias. Entonces dos colores a primaria a secundaria. Y se puede ver por aquí, este color púrpura se usa en realidad. Se utiliza el color primario. El análisis, la analítica por aquí. Y este color secundario verde es en realidad nuestro excelente color donde lo ha, se ha utilizado para la acción. Esta es la metodología, se puede decir. Puedes obtener ideas de, puedes usar en tu propio sistema de diseño. Eso es todo acerca del sistema de color en los sistemas de diseño. Pasemos a la siguiente lección y te conoceré en otra lección hasta entonces, ten cuidado buh-bye. 13. Sistema de grilla y diseño: Ahora la siguiente parte de tu sistema de diseño es en realidad tu diseño de degradado. La cuadrícula es diferente y el diseño son diferentes. Grid es en realidad cómo todo tu sistema va a usar la cuadrícula. Diferentes columnas, diferente ancho de diferente espaciado entre columna que es cortadores. Y tu diseño es en realidad qué tan diferentes tus moléculas o diferentes. Puedes ver áreas de tu diseño que estás diseñando se van a unir. Estas son dos cosas diferentes. Es posible que tengas el mismo sistema de cuadrícula, pero puedes tener un diseño totalmente diferente. Se pueden generar tres o cuatro diseños diferentes. Te voy a mostrar un ejemplo que será más fácil para ti captar la idea. Lo primero es que tienes que seleccionar un framework bootstrap o cualquier framework personalizado que estén usando tus codificadores o desarrolladores, intenta comunicarte con ellos. Empieza desde ahí. Entonces vamos a decidir sobre el número de columnas en mayor tamaño de escritorio. Serían 12. Los tamaños medios podrían usar 12 u ocho, y los dispositivos más pequeños podrían usar dos o cuatro columnas. Entonces tienes que definir tu rejilla, esa 1284 o tal vez dos, entonces cuánta área debe ser tu diseño, vale, Así que esto también depende de tus calificaciones. Entonces si tus cuadrículas tienen mucho espacio entre tus dos columnas así, tendrá más espacio. Se verá más especial y moderno. Y si tienen brecha que es muy menos así, se verá un poco más densa. Entonces así es como vas a usar grid para hacer tu área de diseño o cambiar el tema de tu área de diseño frente a densa. Ahora el diseño ayudará a que cómo el diseño va a ser cohesivo. Cómo en realidad, se puede decir, se revela en presencia de un usuario. Te voy a mostrar algunos diseños por aquí. Aquí se puede ver tenemos un wireframe muy simple. Y muestra que tenemos sección superior que tenemos por aquí. Entonces si definimos esto, esta es en realidad nuestra sección superior. Después tenemos sección donde tenemos dos trozos de información más grandes. Y luego tenemos nuestra siguiente sección. Tenemos nuestra esta barra de pestañas. Entonces nuevamente tenemos algunos registros para diferentes registros. Entonces tenemos este layout. Para que puedas ver esto se puede arreglar de muchas maneras diferentes. Pero una vez que especifique que así es como vamos a diseñar nuestro diseño, va a ser así. Vas a definir tu diseño en un móvil. Y por ejemplo, éste, esto es en realidad dashboard. Y puedes ver Dashboard regiones medio específicas para cosas específicas. Por ejemplo, su gráfico, gráfico circular va a estar en el lado derecho y el segundo, en la segunda fila. la izquierda, se puede ver que tenemos una presentación visual muy grande de diferentes países y cosas así. En la parte superior, arriba a la derecha, tenemos una sección donde tenemos dos errores diferentes, mensajes o algo así. Entonces así es como vas a definir el diseño que será un pelo. Mostrarás esta cosa, esta cosa, esta cosa y esta cosa. Por ejemplo, tenemos sitios web de noticias, noticias de tiempo, y tienen diseños muy específicos para cada una de sus diferentes páginas o diferentes categorías. Así es como vas a utilizar diferentes diseños. Vas a especificar diferentes diseños que así es como seguirás crear tu diseño o crear, o vas a vincular diferentes artículos de diseño son áreas entre sí. Entonces eso es todo sobre el diseño de cuadrícula en tu sistema de diseño. Espero que hayan entendido la idea detrás de ella. No quiero ir a mostrarte cientos de ejemplos diferentes. Haremos esto en la próxima lección, en la siguiente sección. Creo que eso es todo. Creo que usted ha entendido la idea y vamos a pasar a la siguiente lección ahora. Hasta entonces, cuídate. Adiós. 14. Tematización en tu sistema de diseño: Ahora hablemos de formar equipo en tu sistema de diseño. Cuánto se debe permitir la formación de equipo. Te vas a dar unos desarrolladores que pueden cambiar tu tipo con mosaicos o pueden cambiar totalmente el tipo de letra. Por ejemplo, si has usado Roboto y quieren usar Open Sans, ¿ permitirías eso? Entonces estas son las preguntas si vas a tener solo tema negro u oscuro a blanco donde tenemos temas claros y oscuros y solo quieres que cambien los colores. Por ejemplo, desde un fondo más oscuro hasta un fondo más claro, tema claro o tema oscuro. O tal vez quieras usar un tema totalmente diferente, es decir tema otoñal o equipo de primavera. Eso depende de ti. Diferentes diseños o diferentes proyectos. Tienen diferentes requisitos. Entonces en este video, vamos a discutir cuánto se debe permitir la temática y qué son cosas diferentes que debes estar cuidando cuando les vas a dar mucho diseño independencia. Lo primero es que oscuro versus luz. Esto es en realidad sólo el cambio de corriente. Entonces este es el nivel donde van a estar la mayoría de los diseños. Creo que del 70 al 80% van a estar por aquí. Sólo necesitamos dos temas diferentes. Todo lo demás será igual. El espaciado será la misma altura de línea será igual. Texto, estilo o cara de Fort o tipografia realmente va a ser igual. Ahora el siguiente es, por ejemplo, si tienes un sistema donde se va a utilizar en Windows, macOS, android, iOS, en diferentes sistemas, hay alguna especificación de algunas cosas o sistema ajustes que no se pueden cambiar. Tienes que adoptar a eso. Entonces para hacer eso o para hacer, para crear todo este tema, es posible que tengas que cambiar un poco tu diseño original. Tienes que tener eso en cuenta. A veces es posible que tu personalización de diseño no funcione en Windows, por lo que tienes que cambiar eso. Ahora el siguiente nivel es estructura de contenido o estilo. Si solo vas a cambiar el estilo de tus colores o tu diáfisis o quieres cambiar la estructura? Por ejemplo, el título está arriba, o tal vez tú, en el siguiente diseño, está en la parte inferior de la imagen. Ese es un cambio muy grande. Asegúrate de que tienes que ser muy específico. Creo que no deberías ir por demasiado cambio. Tal vez los usuarios o usuarios estén familiarizados en su mayoría con los patrones de diseño similares. Así que no intentes cambiar mucho entre estructura y contenido. El contenido podría ser cambiado. Por ejemplo, si tenemos tal vez un correo electrónico o tenemos unas plantillas de Instagram. Por lo que tal vez van a seguir los mismos tokens, tokens de diseño o misma estructura de diseño, pero el estilo será totalmente diferente. Es decir, eso puede suceder. Aquí hay un ejemplo de la izquierda se puede ver tenemos dos colores de color diferentes donde tenemos dos temas diferentes, claro y oscuro, donde en realidad la tipografia es realmente cambiar. Tanto está construido con directrices de diseño de materiales, pero se puede ver que no están utilizando diseño de materiales. Diafisis específica, por ejemplo, Roboto o algo así. Están usando su propio estilo. Esta es una cosa a la derecha. Se puede ver que tenemos otra vez, lo mismo pasando por aquí, pero formas estandarizadas, equipos oscuros y claros. Ahora veamos algunas variaciones más por aquí. Puedes ver aquí tenemos variaciones de color, espaciado muscular versus tecnología y coloración. El espaciado en realidad va a cambiar. Entonces si intentas cambiar tu tipo de letra, por ejemplo, tratas de usar un sans-serif. Estabas usando un sans-serif y empezaste a cambiar entre una tipografia serif. Las alturas de línea van a cambiar. tifus es una altura de línea totalmente diferente, sus tamaños de carta son totalmente diferentes. Por lo que hay que tener cuidado de que todo su sistema de espaciado se vaya a ajustar. Una vez que cambies tu tipografia, todo el sistema de espaciado, tu altura de línea, se deben ajustar. Eso es lo que tienes que considerar en tu teming. Porque si le das a tus desarrolladores o a tu equipo de diseño mucha independencia que puedan usar y cambiar cualquier cosa que va a ser un desastre y tienes que preocuparte por ello. Eso se trata de tematizar y de qué debería ser domesticar en su sistema de diseño. Me encontraré que viste en la lección y en la siguiente sección vamos a empezar a diseñar un sistema básico de diseño. Y lo usaremos para crear una app o algo similar. Hasta entonces cuídate, adiós. 15. Principios y declaración de propósito: Antes de comenzar nuestro sistema de diseño, tenemos que hacer nuestra declaración de propósito. Y para eso, hemos creado este documento de principios de diseño y declaración de propósito. Y he creado otra página, página separada, y esto es muy sencillo. Voy a pasear a través de ellos. Y puedes ver aquí tenemos el logo básico sobre blanco y negro. Y luego tenemos nuestros principios de diseño. Práctico más que teoría. Mostrar en lugar de contar. Significa que debemos ser más prácticos y tenemos que mostrar todo en nuestro diseño lugar de contar mucha historia. Mostrando significa que los videos son en realidad la parte de este sistema de diseño que ha aprendido en el aprendizaje es parte de los videos. Muéstrales en lugar de contarles todo el asunto. En todas partes medios accesibles en cada dispositivo, iOS y Android, será accesible. Tienes que crear el diseño para que sea adoptable en ambos. Enfoque en la experiencia de aprendizaje. Tienes que enfocarte en el aprendizaje. Entonces significa que los reproductores de video que todo controla serán más accesibles, más fáciles de usar, tap más resistivo y cosas por el estilo. Entonces tenemos declaraciones de este propósito. Para que puedas ver que tenemos oro, ¿por qué beneficiar a los usuarios? Ya hemos visto todo eso, pero he creado esto para esta aplicación en particular. El objetivo es ahorrar tiempo y construir rápidamente diseño, añadir nuevas pantallas características impulsaron nuestra aplicación. Si no generamos diseño rápidamente, ¿por qué? Cada nueva característica se entregará dos semanas mínimo. Por lo que íbamos a enfrentar retrasos beneficio por resolver problemas similares repetitivos. Por lo que el equipo de producto puede enfocarse en realmente muestra los usuarios quiénes serán los usuarios de este propósito. Este sistema de diseño será utilizado internamente dentro de nuestro equipo. Esto es, ya lo hemos discutido en nuestra conferencia de declaración de propósito. Esto es lo que deberías estar creando por primera vez, y esta va a ser tu tarea. Esta va a ser tu asignación dos. Eso es todo. Antes de pasar a tu sistema de diseño, intenta crear algunos principios de diseño que van a ser factor decisivo para todo tu equipo y diseño. Entonces tendremos una declaración de propósito de que por qué estamos construyendo este sistema de diseño. Así que quédate conmigo. Vamos a construir un sistema de diseño. Te conoceremos en otra lección. Hasta entonces, cuídate, adiós. 16. Disposición auto de Figma y variantes 01: Si quieres construir tu sistema de diseño en Figma, hay dos conceptos que realmente necesitas dominar, y uno de ellos es auto-layout y segundo es variante. En este video, voy a compartir contigo algunas de las técnicas que puedes usar en auto-layout y varianza, usando varianza para crear tus componentes en Figma. Empecemos a ver qué podemos hacer con estos. Si miras esta pantalla, puedes ver que tenemos esta navegación y si tratamos de exprimirla, es fácilmente ampliable que puedas ver que todo se está quedando por aquí. De igual manera, tenemos estos dos botones. En realidad son componentes y varianza, pero antes de eso eran en realidad auto-diseño. Se crean utilizando el diseño automático. Del mismo modo, se puede ver por aquí, aquí hay una entrada con etiqueta. Y se puede ver que esto también se crea con auto-layout. Entonces si trato de cambiarlo, por ejemplo, mi nombre por aquí, se puede ver que se está expandiendo. ¿ De acuerdo? Si no quieres ir y quería expandirte, tienes que entrar en este arreglo interno de autodisposición. Y vamos a poner este texto para llenar un contenedor. Ya se puede ver que no se está expandiendo. Entonces lo hemos arreglado. De acuerdo, así que aquí hay una entrada de texto dentro de la acción o botón de aquí. Una cosa más es el arreglo por aquí. Se puede ver que esto es en auto-layout y si esta etiqueta está en la parte inferior, por lo que si trato de moverlo por la parte superior, se puede ver que va a estar en la parte inferior. Esto realmente se invierte en Figma. El de abajo estará en la parte superior y la de arriba estará al final de este arreglo. Lo voy a mover de vuelta aquí. Empecemos a ver cómo podemos construir todos estos. Entonces primero vamos a construir esto, este cuadro de entrada de texto con una etiqueta. Para eso. Vamos a usar sólo un texto. Así que vamos a moverlo un poco de lado. Tratemos de ampliar más el bit del marco. Muévelo hacia arriba. Acercar. Aquí tenemos el lienzo y voy a presionar T para el texto. Y utilicemos tu nombre. Usaremos un poco regular de color grisáceo por aquí. Vamos a agregar auto-layout a éste, Shift a. se puede ver que tenemos nuestro auto-layout agregado. Vamos a llamarlo texto. Vamos a duplicarlo presionando sosteniendo tu tecla alt u opción y arrastrándola así. Así que voy a arrastrarlo para que me guste, digamos 60 píxeles de diferencia. Voy a nombrarlo ahora acción. O tal vez puedas usar upload. Por ejemplo, si estás creando un botón de subida, voy a usar diferentes colores de textos porque vamos a tener enlace. Y vamos a pegar ambos. Nuevamente. Esto no es en realidad texto. Vamos a llamarlo. Selecciona ambos y otra vez, presiona Shift it. Ahora se puede ver tenemos este borde alrededor de ellos y otro marco, llamémoslo input. Si amplio, amplía esta entrada y se puede ver que tenemos acción y texto. Por lo que se puede ver la acción está en la parte superior, que en realidad está a la derecha, y el texto está a la izquierda, que está en la parte inferior derecha. Ahora, si hacemos click en Input, puedes ver por aquí a la derecha tenemos 60 píxeles de separación. Entonces esto es, este es en realidad el espaciado entre los elementos dentro y el diseño automático. Entrada tiene en realidad dos ítems dentro de ella. Y este diseño automático, se puede ver que está en la dirección horizontal. Por lo que dos ítems horizontalmente, son 60 píxeles separados. Sólo consigue el concepto. Y si quieres agregar relleno a su alrededor, por ejemplo, toda esta sección, queremos agregar relleno alrededor de este cuadro de entrada. Podemos usar algo por aquí como diez píxeles. Ya puedes ver que agregó 101010 por todos lados. Usaremos ocho por aquí. Te mostraré por qué lo usé al final. Y este es en realidad el arreglo. Ahora mismo. No importa porque sólo tenemos dos elementos y ya están alineados adecuadamente. Vamos a usar en el medio. A continuación vamos a ir, se puede ver que he seleccionado esta entrada más que la interna. En los artículos. Por lo que se selecciona toda esta entrada. Ahora voy a ponerle un relleno. Y el blanco es genial. Vamos a añadir ocho píxeles redondez por aquí. Puedes ver que nuestro elemento básico está listo, la entrada está lista. Pero el problema es una vez que empiezo a escribir, en realidad se está expandiendo. Arreglar que vamos a usar click en texto en lugar de contenido caliente. Vamos a usar contenedor lleno. Creo que va a arreglar esto. Otra forma de arreglar esto es que pocos se deslizaron. Seleccione esta entrada. Se puede ver que hemos empacado y espacio entre opciones. Si intentas usar el espacio entre, se va a arreglar esta opción. Siempre será esta subida es estar siempre en el lado derecho va a espacio todo usando este espaciado por aquí, este relleno. Se va porque tenemos dos ítems. Uno va a estar a la derecha y uno va a estar a la izquierda. Creo que eso es. Muy bien. Ahora veamos. Si trato de cambiar. Seleccionemos entrada e intentemos expandirla. Para que puedas ver ahora subir se está moviendo con la derecha. Si trato de expandirlo, se va a mover así. También podemos añadir una etiqueta por aquí. Así que seleccionemos texto. Vamos a crear una etiqueta. De nuevo, vamos a poner un diseño automático en la etiqueta para cambiar a Y lo trataremos un poco y lo agregaremos a la entrada. Ahora se ha agregado esta etiqueta y también es un marco, así que llamémosla etiqueta. Se puede ver que tiene un relleno de diez por aquí. Lo vamos a usar. Y alinémoslo con la etiqueta de aquí. El texto dentro de nuestra entrada. Nuevamente, vamos a seleccionar toda esta pista. Vamos a usar turno a para crear el marco. Este marco será de entrada más etiqueta. Así es como realmente creé esto. Ahora puedes ver si miras éste, la dirección del trazado automático es vertical porque no tenemos dos ítems dentro de éste. Déjame mostrarte. Uno es entrada y uno está etiquetado. Y se puede ver etiquetado está en la parte inferior, ahora mismo está en la parte superior. Aquí lo tenemos. Vamos a usar 0 porque queremos que la etiqueta esté muy cerca. Esta etiqueta tiene en realidad ocho píxeles de relleno, por lo que es ocho píxeles aparte del área de texto de entrada inferior. Así es como se crea y utiliza esta técnica de auto-diseño. 17. Diseños auto y variaciones en Figma 02: Y lo siguiente sería que si has creado esto, vamos a crear, crear un componente. Entonces vamos a crear un componente, Control o Comando Opción K o Control Alt K. Hagamos click en esto y ya puedes ver que tenemos esto. Vamos a sumar un brillante. Entonces vamos a la propiedad a ser estatal. Vamos a mantenerlo simple. Aquí está nuestro estado predeterminado, y éste será, llamémoslo estado activo. Aquí vamos, podemos cambiar el texto para que sea más negro y cambiar éste por nombre. Que sea un poco más ligero. Sólo para tener la diferencia entre estos dos estados. Si votas, también puedes agregar un derrame cerebral por aquí. Hagámoslo así. De acuerdo, así que aquí tenemos otra variante, esta es variante activa. Y agreguemos otra variante. Haga clic aquí, y agregue otra variante y nueva variante. Y esto en realidad se quedaría, tres estarían deshabilitados. Entonces hagamos este color blanco a color verdoso. Usa este gris. Creo que de esta manera funcionaría. Esta Subir sería ahora un color grisáceo. Tal vez así. Etiqueta sería pecado. Ahora puedes ver que hemos creado tres variantes de esta, input plus label. Puedes hacer lo mismo con cualquier componente, cualquier botón que tengas. Por ejemplo, vamos a crear un botón por aquí. Volveremos a utilizar el diseño automático. Primero creemos un texto. Vamos a cambiar un para agregar auto-diseño. Voy a usar un relleno de, um, eso es usar un relleno de 12. Arriba a la derecha, 16161612 en la parte inferior. Así. Usa esto en el medio. Todo será igual. Contenidos de Huc. Sí. Vamos a agregar un color de relleno de compañero guerrero. Cambiemos el color a algo como esto. El color del texto será blanco. Aquí tenemos el botón básico con nuestro auto-layout. Agreguemos ocho píxeles por aquí para la redondez. Para mí, creo que a la derecha y a la izquierda, quiero más espacio. Yo añadiría 2020 por aquí. Se puede ver que este es ahora el botón simple con diseño automático. Puedes crear varianza. Ahora si queremos agregar, llamemos a este botón. Si quieres agregar un ícono por aquí, esa es otra historia. Así que utilicemos Control o Comando barra inclinada hacia adelante. Tengo este plug-in instalado íconos lúcidos, y voy a usar, vamos a usar algún micrón. Vamos a usar este ícono por aquí. Aquí es donde el icono de aquí. Vamos a traerlo dentro del marco. Arrástralo por aquí. Aquí está la sobrecarga. Tratemos de arrastrar esto dentro del botón. Ahora puedes ver una vez que lo arrastré, está al final del botón porque en realidad es como lo llamas, abajo y arriba. Entonces lo que sea que esté en la parte superior, sería al final del botón. Porque nuestro diseño es en realidad dirección horizontal. Este es nuestro gamepad. Tratemos de usar un color blanco por aquí. Entonces aquí hay un botón de registro con un ícono. Ahora, si quieres aumentar el espacio entre estos dos ítems, haz click en el botón, y este es el espacio entre. Entonces si trato de aumentarlo, utilicemos 40 por aquí. Creo que 36 sería lo suficientemente bueno. Ahora se puede ver que se ve genial. ¿ Cuál es el relleno a la derecha? Vamos a usar 1818. Aquí. Esto se ve mejor ahora. Vale, entonces tenemos este botón. Ahora vamos a crear un componente fuera de él. Y vamos a seleccionar nuestro componente. Ahora. Se ha convertido en un componente dentro del diseño automático. Vamos a crear una variante. Ahora aquí está la segunda variante. Y para la propiedad vamos a volver a utilizar el estado en este momento. Que sea sencillo. Esta es la distancia entre las dos variantes. Entonces, si quieres disminuirlo, puedes disminuirlo. Pero creo que 24 sería genial. 20 serán. Al segundo video. Cambiemos los colores de la segunda varianza. Hagámoslo un poco más brillante cuando vayas a flotar sobre él. Y eso es todo, creo en este momento sólo voy a cambiar el color en este momento. Aquí tenemos el defecto. Este es el estado de segunda variante sería estacionario o activo. Llamémoslo estado activo. Entonces esto es predeterminado, esto está activo. Vamos a usar un caso mayúscula por aquí. Aquí hay otro botón radiante con varianza están utilizando el diseño automático. Esto es, se puede decir la esencia de su sistema de diseño. Si entiendes estos dos conceptos, puedes hacer cualquier cosa. Se puede ver esto es un botón con un ícono. Si quieres mover el ícono al inicio, vamos a moverlo por aquí. Vamos a moverla por aquí. Ahora, es al inicio o en el lado izquierdo. Que sea para traerlo de vuelta. Ahora si quieres cambiar la distancia entre el ícono, hagamos el, por ejemplo, si lo querías así, y lo quiero así, 30. Ya se puede ver que está encogido en esta dirección. 1818. Aquí hay un simple video sobre el diseño automático, y este es el poder de Figma. Estas son las dos cosas que más vas a utilizar para crear diferentes variantes y todo. Si traté de cambiar el texto por aquí, cambie el texto ahora se puede ver que es auto expandiéndose por aquí. Si quieres una fija, creo que la V es que tienes que usar fijo. Creo. Creo que hay que hacer el escenario en el inicio. Veamos si puedo tener un botón de tamaño fijo. De acuerdo, entonces todo esto es sobre esto. Abrazo el contenido y los artículos de ancho fijo. En su mayoría vamos a utilizar los contenidos de contenido. Eso es todo. Entonces este es mi sencillo video sobre la varianza sigma y el diseño automático. Espero que hayan entendido y aprendan algo nuevo. Usaremos mucho esta técnica en nuestras próximas lecciones cuando vamos a construir nuestro diseño, topografía, y todo. Así que hasta entonces, cuídate. Adiós. Nos reuniremos en otra lección. 18. Resizing automático de diseño: Este es un concepto muy básico que hay que entender, que es lo que es contenido caliente y contenedor completo y ancho fijo. Esta es la diferencia entre el cambio de tamaño de un diseño automático, lo cual es muy confuso para mí. Me tomó mucho tiempo entender esto. Voy a compartir contigo de dos maneras. Una es que quieres que todo el diseño se expanda automáticamente. Segundo es que quieres el fijo con tal vez texto de entrada o algo así usando Auto Layout. Vamos a usar este ejemplo. Puedes ver por aquí cómo el contenido es en realidad tu marco padre o maquetación automática o marco padre que se va a expandir según su hijo. Entonces si los niños se van a expandir, se va a expandir con ella. Contenedor lleno es realmente para usado para el niño. Entonces el objeto hijo realmente llena el contenedor. Sea cual sea el espacio que quede va a llenar eso. Estos son conceptos un poco difíciles. ¿ Cómo el contenido también va a funcionar en el padre? Los objetos hijos van a padre se va a expandir con objetos hijo. Esto es un poco difícil. Así que sólo un simple consejo. Si quieres un botón de expansión automática con el texto o etiquetas o puedes decir iconos. Tienes que usar contenido caliente en todo. Por ejemplo, aquí se puede ver esta es en realidad nuestra entrada en una entrada y he establecido que es para abrazar contenido. Por lo que se va a expandir abrazando su contenido si traté de cambiar su contenido. Entonces intentemos cambiar este texto por aquí para que puedas ver que se está expandiendo. Este es el padre se está expandiendo. Cada vez que intento cambiar su texto hijo, el objeto secundario está cambiando su tamaño y el padre se está expandiendo. Si bajamos al texto y a los niños infantiles interiores, puedes ver que también están utilizando contenidos de Hulk y link también está usando contenidos de abrazo. Esto es muy, muy importante. Tienes que usar contenido caliente si estás creando un botón o texto de entrada donde tienes que expandirlo con el texto. Tienes que usar el contenido del abrazo. Ahora en el caso de esto de aquí, este texto de aquí, que en realidad es nuestra área etiquetada. No voy a usar contenidos calientes, voy a usar ancho fijo. Ancho fijo. Intenta cambiar esto. Ahora. Ya puedes ver que he cambiado a un ancho fijo. Por lo que este texto va a afectar y toda mi etiqueta o toda esta entrada se va a quedar. Lo mismo. La acción va a estar a la derecha. Entonces otra forma es dejarme mostrarte de otra manera. Se puede ver si hace clic en esta entrada de aquí, esto es en realidad, tiene dos elementos y su diseño automático se establece a espaciado de 40 píxeles aparte ocho píxeles es el relleno y la dirección es horizontal. Si trato de usar en lugar de embolsado, si traté de usar espacio entre, en realidad va a tener ese efecto, que es si trato de expandirlo así. Para que puedas ver que se está moviendo con éste así. Y ahora si trato de cambiarlo, otra vez va a ser lo mismo. Ahora, una configuración más es que voy a, en lugar de usar ancho fijo, voy a usar contenedor de relleno. Por lo que ahora se puede ver que tomó este espacio por aquí. Entre esto y esto, tenemos un espaciado auto. Entonces intentemos expandirlo. Para que puedas ver ahora, ahora puedes ver este efecto de relleno, contenedor lleno ha surtido efecto realmente llenar el contenedor cada vez que lo expandí. Entonces este es nuestro contenedor. Y si trato de expandirlo o exprimirlo, va a cambiar el tamaño del campo de texto. Ya puedes ver, y vamos a tratar de hacerlo un poco más grande. Por lo que ahora se puede ver que esto está configurado en contenedor completo. En realidad está llenando el contenedor hasta aquí. No estoy seguro de qué es esta distancia entre ellos? Es de nuevo 40. La distancia nuevamente 40, que fijamos inicialmente el inicio o secado ahora se establece en OK, por lo que se establece en 40. Es mantener esa distancia. Así que intentemos usar el espacio entre aquí y tratemos de expandirlo. Y C. Ahora, ¿qué está pasando? Ahora se puede ver que está llenando el contenedor. Y está llenando todo el espacio porque lo hemos configurado para haberlo configurado a auto. Espacio entre. espacio entre en realidad se está ajustando automáticamente el espacio entre estos dos ítems. Y se puede ver que lo está espaciando así y llenando todo el contenedor. Por lo que normalmente no usaría espacio entre, pero usaría bat. Ahora está estropeando toda mi sección por aquí. Así que tratemos de exprimirlo, listo para empacar. El problema es éste. Vamos a exprimirlo así. Para el texto, vamos a usar ancho fijo. Esto va a tener contenidos y esto es de ancho fijo. Entonces así es como realmente vas a usar contenedor de relleno y contenido caliente y ancho fijo usando tu diseño automático. Si tienes alguna pregunta, por favor pregúntame. Siempre estaré aquí para responder a estas preguntas. Este es el concepto más confuso, cuál tienes que usar en el niño o el padre. Así que asegúrate de que si tienes un botón de expansión automática, todo estará configurado para abrazar el contenido y el padre se ajustará al espaciado entre ellos. Por ejemplo, este espaciado de maquetación, voy a configurarlo a 40 o 30 o 20, cualquiera que sea el espaciado que quiera entre los artículos y este es el relleno. Entonces eso es todo. Espero que hayan entendido este concepto de contenido lleno contenedor, auto-layout, espaciado, redimensionamiento. Diles que la conoceremos en la lección. Cuídate. Adiós. 19. Navbar responsivo en Figma con diseños de auto: Bienvenido a otro tutorial de Figma donde vamos a crear una barra de navegación sensible usando Figma y estaremos usando auto-layout. Empecemos. Te voy a mostrar cómo puedes usar el diseño automático para crear una barra de navegación receptiva en Figma. Ahora comencemos y creemos esta barra de navegación sensible. Pulse T para crear un texto. Y vamos a teclear casa. Vamos a replicar esto sosteniendo la tecla Alt. Y utilicemos el Comando D para tener otra copia. Y lo vamos a nombrar, llamemos a este contacto. Y seleccionemos todos estos y vamos a distribuir el espaciado horizontal entre ellos solo para asegurarnos de que el espaciado sea preciso. Por lo que en este momento son 19, tenemos que aumentarlo. Vamos a usar 46467. Entre estos. Ahora vamos a seleccionar todas ellas y vamos a añadir auto-layout shift k Primero creamos tres capas de textos, capas textos simples, y hemos creado un marco a su alrededor. Aquí tenemos el marco sólo para controlar estos ítems. En este momento la dirección del marco está en dirección horizontal. Entonces si tratamos de sumar, se puede ver si abrimos este fotograma e intentamos agregar algo nuevo comando D. que puedan ver que se va a sumar en dirección horizontal, por lo que esta es la dirección correcta. De acuerdo, así que aquí tenemos, llamémoslo enlaces. Ocultemos esta barra de navegación ahora mismo, el botón inferior. De acuerdo, así que aquí tenemos éste. Y el siguiente paso es que vamos a crear nuestros botones. Por lo que de nuevo, vamos al prestigio. Este va a ser nuestro botón. Vamos a llamarlo login. Y vamos a agregar un diseño automático a este turno, un auto-layout agregado. Por lo que vamos a añadir un color de relleno de este botón a este botón. Usaremos este verde o tal vez este azul. Y el color del texto será blanco. Entonces aquí tenemos el botón listo, y vamos a añadir un poco de relleno por aquí de ocho. Y a partir de aquí vamos a utilizar diferentes rellenos por todos los lados. Para un botón, vamos a usar ocho en la parte superior, 16 por aquí, 16 a la derecha, y ocho en la parte inferior. Este va a ser nuestro patrón. Vamos a llamarlo. Llamémoslo TTN. Guárdalo Gideon. Y lo vamos a replicar sosteniendo la tecla Alt u Option. Y vamos a separarlos 16 pixeles. Para que puedas ver presiona, mantén presionado la tecla Alt u Opción para ver el espaciado. Y lo vamos a llamar inscribirse. Ahora se puede ver que se está expandiendo por sí solo porque hemos establecido el cambio de tamaño para abrazar contenidos. Entonces cada vez que los contenidos van a expandir el contenedor en general, se va a abrazar el contenido manteniendo el espacio que hemos especificado. Se puede ver si hacemos click en el botón, tenemos diez espaciado. Entonces Dan es el espaciado entre dos ítems. Estos son los márgenes o paddings que hemos aplicado. Se va a mantener siempre estos. Vamos a hacer clic en éste y vamos a, vamos a usar algún otro color, tal vez naranja para inscribirse. Vamos a usar naranja. Ahora tenemos dos botones. Y esto es también, en realidad tenemos tres auto-layout. Uno es enlaces a nuestros botones, un botón, segundo botón. Vamos a seleccionar todos ellos. De nuevo, vamos a presionar Shift a. y se puede ver que tenemos este marco auto layout, por lo que este va a ser nuestro NANDA son. Y antes de eso creo que necesitamos tener otro marco para los botones. Esto es en realidad z Alineemos estos botones primero, desplacemos a tener un diseño automático para estos botones y los vamos a llamar, pero porque tenemos que arreglar el diseño de ambos botones también. Si queremos controlar el espaciado entre dos botones ahora podemos hacer eso por aquí. Vamos a usar 12 por aquí ahora mismo. Y así ahora tenemos botones, ambos botones en otro marco de capa. Ahora, lo que vamos a hacer es que vamos a seleccionar todos estos. Se puede ver a la izquierda, esto es muy importante. Contamos con botones. Entonces de nuevo, dentro de los botones tenemos dos botones diferentes diseño automático. Y luego en los enlaces tenemos tres capas de textos. Ahora vamos a seleccionar todos ellos. Turno a. y se puede ver tenemos esta barra navbar, casi nav bar que está terminada. Ahora puedes ver que nuestro texto se está moviendo hacia arriba. Entonces cada vez que creamos algo como esto, a veces sucede que nuestro texto se mueve hacia arriba. Se puede ver que este es el espaciado entre artículos. Entonces si trato de reducirla, se puede ver que se va a acercar al texto que tenemos aquí. Para arreglar eso. Se puede ver que he seleccionado esta barra de navegación. Esto es muy importante. Y voy a ir en el medio así. Estas son las opciones de alineación. Entonces si uso esto, se puede ver que el texto está alineado en la parte superior. fondo. Y se puede ver que dice en la parte inferior, y vamos a seleccionar esto. Va a ser a la izquierda y a la mitad. Ahora vamos a añadir un color de relleno al snack bar, que va a ser blanco. Vamos a usar blanco. Y a partir de aquí vamos a utilizar ocho píxeles de radio. Y por aquí vamos a usar algún relleno en la parte superior. Vamos a usar 16. En la parte inferior. Vamos a usar 16. Vamos a sumar 24 a la derecha y 24 a la izquierda. Ahora ya puedes ver tenemos lista nuestra navbar. Hemos aplicado todos los rellenos a su alrededor mediante el uso de este panel por aquí. Ahora si se puede ver si tratamos de expandirlo, no se está expandiendo, el contenido no se está expandiendo, no es receptivo. Porque puedes ver por aquí que este espaciado está configurado en personalizado. Entonces en este momento tenemos que arreglar eso. Entonces para hacer eso, tenemos que ir por aquí. Y vamos a pasar a, volvamos a donde sea nuestra configuración original y anotemos. Se puede ver que he seleccionado navbar y vamos a ir al espacio entre lo que está haciendo es, ya se puede ver este espacio entre ítems en realidad está configurado a auto, por lo que es ajustando automáticamente el espacio cada vez que trato arrastrar o hacer la barra de navegación más grande o más pequeña. Este es el truco detrás de esta capacidad de respuesta. Por lo que ya puedes ver si trato de arrastrar algo como esto, ya puedes ver que es totalmente receptivo. Entonces este es el último paso. Ahora se puede ver una barra de navegación sensible está casi completa. Ahora si queremos agregar algo por aquí, por ejemplo, quiero agregar notificaciones. Así que llamémoslo notificaciones por aquí. O tal vez algunos mensajes. Si quiero o arrastrar algo por aquí en la parte superior, por ejemplo, tengo un pequeño punto rojo para las notificaciones. Por ejemplo, éste. Y si trato de arrastrarlo y colocarlo por aquí, se puede ver que me está mostrando que se va a caer dentro de este auto-layout. Por lo que está adoptando automáticamente el diseño automático. Si trato de dejarlo así, va a ser por aquí. Si no lo quieres o quieres escapar de este comportamiento, tienes que sostener tu barra espaciadora y simplemente arrastrarla y soltarla así. Y va a ser así por aquí. Tratemos de hacerlo un poco hecho. Aquí tenemos los mensajes. Puedes moverlo así. Así es como se crea una barra de navegación receptiva en Figma. Espero que hayas disfrutado este video y asegúrate de ver el siguiente video también. Entonces hasta entonces nos encontraremos en otro video con otro truco de Figma y Tutorial, cuídate y adiós. 20. Ventana modal de caja responsiva en Figma: Bienvenido a otro video sobre Figma. Y hoy vamos a crear una ventana modal receptiva. O se puede decir un complejo auto-layout en el uso de Figma. Empecemos. Te voy a mostrar primero lo que vamos estar construyendo y te voy a mostrar técnicas, cómo puedes lograr ventana sensible o un protector de interfaz de usuario de tarjeta que puedas construir usando Figma. Empecemos. Para que puedas ver en la pantalla tenemos responsive modal ventana auto-layout. Y esta es la ventana modal que hemos construido. Entonces si tratamos de exprimirlo desde la derecha, se puede ver que es totalmente receptivo. Los botones y el icono de la ropa se está quedando en la parte superior y la parte inferior y sus posiciones fijas y el texto en realidad se aprieta con la caja. Esto es muy fácil de crear. Tengo que mostrarte cuáles son las realmente las capas dentro de ella. Por lo que tenemos botones a botones están dentro de marcos de auto y luego se combinan en otro Auto Frame. Vamos a crear eso. Así que empecemos. En primer lugar, vamos a crear nuestro botón. Presione T. Voy a tener esta eliminación, agregar un diseño automático a este turno. Tenemos auto-layout agregado. Agreguemos color de relleno por aquí. Y esta vez vamos a usar este color rojo para el texto. Vamos a usar color blanco. Aquí tenemos nuestro botón básico y se puede ver este es el relleno alrededor del artículo y este es un espaciado. Para el siguiente ítem. Tratemos de usar un relleno de 81620 a la derecha. Usaremos 28 por aquí. Este va a ser mi botón. Vamos a añadir algunas esquinas redondeadas, ocho píxeles por aquí. Vamos a usar cuatro. Aquí tenemos nuestro botón de descenso. Voy a usar 1010 en la parte superior e inferior. Por lo que tenemos algunos de buen tamaño pero botón. Tenemos nuestro botón. Vamos a llamarlo btn. Vamos a replicarlo presionando o manteniendo presionado la tecla Alt u Option y replicándola. Y lo voy a colocar, digamos 16 píxeles aparte. Y esta vez voy a cambiar su color a este color. Y esto va a ser cancelado. En este momento se puede ver lo hemos puesto para abrazar contenidos. Entonces es por eso que en realidad se está expandiendo cambiando su contenido. Por lo que siempre se acomodará contenidos y se expandirá y contrata. Cuando tengamos este ajuste, que es abrazo, abrazar contenido. De acuerdo, así que tenemos son los dos botones. Vamos a envolverlos adentro, por dentro y otros auto-layout. Entonces Turno, he seleccionado ambos de estos turno a. esto es realmente importante. Esto es botones. Hasta ahora hemos creado para auto-layout botones dentro del marco de otro botón, que es marco de diseño automático. Y los hemos combinado en ambos. Para que puedas ver aquí tenemos la dirección de maquetación automática horizontal. Entonces si agregamos un poco y va a estar a la derecha. Este es el espacio entre ellos. Entonces si quieres controlar el espacio como 12 pixeles o diez píxeles entre ellos, que puedes hacer eso por aquí, tenemos nuestros botones listos. ¿ De acuerdo? Ahora necesitamos texto y un icono. Aquí tenemos nuestro botón. Usaremos algún rumbo. Encabezado. Por aquí. Intenté usar negrita. Vamos a usar 24. Voy a replicar esto. Nuevamente. Esto es, vamos a tratar de usar mejor gráfico así d, Así que voy a usar un marco como este, así. Y tratemos de ver si tenemos, esta es una caja. Voy a usar Control back tan lejos slash Lauren. Además. Tratemos de añadir algunos textos por aquí. Verbos en inglés, graph. Añadamos dos párrafos por aquí. Este es nuestro párrafo. Vamos a usar 1616. Vamos a usar regular. Vamos a usar un párrafo. Creo que debería eliminar el segundo. Voy a saltarme todos estos ajustes. Esto es sólo, vamos a usar algo como esto. Tal vez algo como esto. Ok. Tenemos nuestro párrafo de texto, que es éste. Éste, y rumbo a fingir. Y ahora vamos a añadir un, un ícono por aquí. Vamos a agregar un icono, iconos, icono de cruz. Vamos a añadir otro icono por aquí para el botón cerrar. Vamos a usar flujos. Entonces esta vez vamos a usar esta. Este es nuestro botón. Tratemos de usar este color, tal vez éste. Para cerrar esta ventana. Tenemos este círculo por aquí. Ahora vamos a seleccionar todos ellos. Y turno de senos y agrega un diseño automático. Ya puedes ver que ahora se ha agregado el diseño automático. Llamémoslo ordenando. Tenemos que añadir un color de relleno, que va a ser blanco. Tenemos que tener algún relleno por aquí. Entonces 16 en la parte superior, digamos a las 24 a la izquierda, 2416 en la parte inferior. Se puede ver que tenemos el diseño básico de nuestra ventana modal. Usaremos algunas esquinas redondeadas. Usaremos algo de sombra a su alrededor. Por ciento sombra va a ser dos. Esta, agregamos una sombra muy clara a su alrededor. Ahora se puede ver tenemos que usar algo que va a ser este layout. He seleccionado este modelo, modelo y vamos a utilizar el diseño correcto. Entonces para traer estos botones y todo a la derecha, se pueden ver estos botones, este texto, estos botones inferiores y esta esquina. Uno ha sido trasladado a la derecha. Así es como se va a lograr eso. El primer paso es este. Y entonces si tratamos de exprimir esto, se puede ver el texto no responde porque salir de la caja. Entonces para lograrlo, tenemos que hacer click en el texto y en lugar de ancho fijo, vamos a usar contenedor de relleno. De igual manera para éste, este va a ser llenado contenedor. Ya se puede ver que ya ha estado llenando el contenedor, por lo que tenemos que simplemente usar esto. Y se puede ver ahí nuestra caja receptiva y nuestro impuesto en realidad está apretando con ella. Se puede ver la distancia entre estos dos es realmente controlada desde aquí, tenemos diez. Entonces si traté de reducir, whoops, no los botones, sino la ventana del modelo. Entonces tenemos 23, vamos a usar 16. Y va a ser así. Esta es la, si quieres controlar más cosas, puedes darles otro diseño. Por lo que he seleccionado ambos de estos textos y les voy a dar más auto-diseño. Y en lugar de contenido caliente, tenemos que volver a usar el contenedor completo. Y aquí podemos controlar el espaciado entre solo el texto. Por lo que se puede ver si por ejemplo, quiero que sea así. Ahora si trato de seleccionarlo y exprimirlo, oops, ¿qué está pasando? El marco es en realidad el marco. Creo que el, el texto se ha desplazado. Nuevamente. Tenemos que hacer el contenedor completo. Y puedes encargarte de nuevo. Esta es otra forma. Por lo que ahora mismo mi texto está en realidad dentro. Ambos textos están dentro de otro diseño automático. Se puede ver por aquí texto dentro de otro diseño de la arteria. Puedes hacer lo mismo sin este auto-layout, pero me encanta, ya sabes, controlar el espaciado entre mis diferentes artículos. Así es como se puede hacer eso. Esto resume nuestra ventana modal, donde estamos creando ventana modal sensible, que se va a apretar y expandir y los textos que vamos a estar envolviendo con todos los bordes son el espaciado o relleno a su alrededor. Espero que hayas amado o disfrutado este video de maquetación automática. Asegúrate de ver mis otros cursos, gafas, clases de video y videos de YouTube. Te conoceré en otro video hasta entonces, cuídate. 21. Sistema de tipografía - Escalas y estilos 01: El primer paso en tu sistema de diseño va a ser la tipografía. Entonces vamos a seleccionar tipografía y luego su escala y diferentes categorías. Título, título uno encabezado, subtítulo, título, todas esas categorías diferentes. Vamos a definir eso en nuestro sistema de diseño. Entonces empecemos y esto va a ser donde empieces. Entonces vamos a crear un nuevo marco. Y vamos a llamar a este marco Bob Murphy. Ahora, vamos a seleccionar cualquier Typhoeus. Tienes que experimentar al respecto. Hay otra clase, mi clase, que se trata de direcciones de diseño, selección de tipos de letra. No vamos a pasar por cómo vas a seleccionar este tipo de letra. Ahora mismo, voy a seleccionar cualquier tipo de letra, llamémoslo portal. Texto. Base, tamaño de fuente base va a ser 18. Intenta acercar para que puedas ver correctamente. Entonces aquí tenemos textos de Roberto, y ahora voy a usar un plugin presionando Control o Comando barra inclinada hacia adelante. Y eso se llama escalas. Veamos cuál es la escala es igual a escala de tipo. Este tipo escalas. Aquí lo tenemos. Y se puede ver que me está mostrando el valor de escala que es 1.25 y la altura de línea es 1.2. Voy a ponerlo en 1.4. Seis escalas en la dirección hacia adelante, o de tamaño pequeño a más grande, más grande, tamaños demasiado pequeños. Vale, entonces creo que necesito estos muchos, estos son buenos. Voy a hacer click en Generar. Y aquí tenemos nuestra escala en este momento. puede ver que ha creado una escala muy bonita. Eliminemos esto. Y voy a eliminar éste y también voy a usar esta biografía de marco. Se puede ver me muestra que este es nuestro valor base es 18, escala es 1.25. Y luego estos son nuestros diferentes tamaños. Normalmente los vamos a nombrar en realidad adecuadamente porque esto no es lo que necesitamos. Entonces este va a ser nuestro título o título o título, algo así. Vamos a llamarlo uno. Vamos a llamarlo, llamémoslo H1. Si tenemos más estilos, por ejemplo, barra de escritorio, uno, eso depende de usted. Entonces si tienes dos o tres escalas diferentes para aplicaciones de escritorio y móviles, escalas diferentes, esa es otra historia. En este momento. Puedes ver, sí, quédate con estos. Y yo voy a hacerlo, lo que voy a hacer es nombrarlos de primera vez. Vamos a llamarlo. En este momento. Lo que estoy tratando de hacer es que estoy tratando de nombrarlos adecuadamente. Vamos a llamarlo subtítulo. Llamemos a este un subtítulo. Subtítulo. Vamos a llamarlo un subtítulo pequeño. Esto se llama llamémoslo 4D. Te voy a mostrar por qué estoy nombrando este título. Vamos a llamarlo por encima de la línea. Este va a ser nuestro título. 12 pixel es nuestro texto de leyenda y esta es nuestra línea. Entonces lo voy a cambiar de estilo. Todas las lagunas. Brechas. Esta, todas las gorras así. Y también voy a aumentar su espaciado entre caracteres a ser de 10%. Vamos a usar 5% o 1% Bien, para que puedan ver que este es un texto en línea voy a compartir contigo por qué estoy haciendo esto. Aquí hay pautas de interfaz humana de Apple, y se puede ver que tienen estos diferentes estilos. Título grande, Título Uno, 23 titular, semi negrita, rótulo corporal, subtítulo, pie de nota uno y título también. Entonces esta es en realidad su escala. Se trata de diferentes categorías que se van a implementar en el sistema de diseño de Apple. Si nos fijamos en Sistema de Diseño de Materiales, se puede ver que tenemos Titular Uno, 234566 titulares. Entonces tenemos dos subtítulos a tamaños de cuerpo. Uno es el cuerpo 116 pixeles. También vamos espaciado se menciona 0.5. Aquí tenemos 14 pixeles. El botón es un poco más grande. Píxeles de proteína, peso medio , medio y título está por aquí. Y luego tenemos una superposición. Overlying es básicamente déjame mostrarte en realidad. De acuerdo, para que puedas ver que así es como en realidad lo está usando overline es en realidad la línea en la parte superior de cualquier encabezado. Elegimos tal vez alguna categoría, algo así. Titular y cuerpo. Se trata de texto corporal. Así es como vas a aplicar tu sistema de diseño o escalas de tipo a tu sistema de diseño. Ahora, volvamos a Figma. Y ahora vamos a crear estilos de tipo por aquí. Voy a hacerlo, estoy sosteniendo Control y Turno. Comando y Turno y haciendo clic en sólo estos encabezamientos o impuestos por aquí. No, los he seleccionado a todos. Voy a ejecutar otro plugin, control o comando forward slash tipo estilos. Este es un plugin muy bonito que se llama estilos de tipo. Y puedes usar cualquiera de las familias de fuentes, tamaño de fuente, lo que quieras usar. Ejemplo, voy a utilizar la familia de fuentes en el nombre. Vamos a usar el tamaño de fuente. Y vamos a usar. Creo que eso sería genial. Así que en realidad estoy renombrando, nombrándolos. Hagamos estilos de tipo y se puede ver temas creados nueve tipos textiles. Si selecciono por aquí, se puede ver que es, ha creado Roboto. Y dentro de Roboto tengo todo este textil. Déjame ver lo que pasó por aquí. Entonces en realidad, el nombre que lo sugerimos, sugerimos que el nombre del tipo es. Haga clic aquí. Se puede ver si elimino todos estos pulsando Eliminar, puedo recrear ellos. Tratemos de recrear ellos. Estoy sosteniendo mi tecla de mando y turno o tecla Control y Mayús. Nuevamente, voy a ejecutar los mismos estilos de tipo plug-in. Ahora puedes hacer click en Texto personalizado. Llamémosles estilos de tipo. Por aquí. Voy a utilizar el tamaño de la familia de fuentes. Y haga clic en Hacer tamaño de tipo. Ahora se puede ver que dice de nuevo nueve veces décimo graduado. Y si hacemos click por aquí ahora se puede ver tenemos estilo tipo y en eso tenemos Roboto. Y estos son diferentes tamaños de tipo. Y se puede ver 140 es en realidad su line-height. 22. Sistema de tipografía - Escalas y estilos 02: Este va a ser tu primer paso para crear tu tamaño de tipo. Entonces una vez que actualizamos nuestro tamaño tipo, lo siguiente es que también vamos a crear algunas otras cosas que puedan mostrarte lo que está sucediendo. Entonces estos son en realidad marcos. A continuación, intenta hacerlo un poco más grande. Y por qué este auto-diseño en este marco, tengo que quitar el diseño automático. Disposición. De acuerdo, así que este es un marco regular. Ahora, permítanme intentar agregar algo por aquí, que va a ser nuestro uso. Entonces tenemos que mostrar a nuestros desarrolladores u otros diseñadores que es como vas a usar esto. Digamos de encabezamiento párrafo. Aquí tenemos éste. Y si nos trasladamos a los activos por aquí, tenemos que usar estos estilos. Tratemos de usar esto con el párrafo. De nuevo, vamos a replicar esto y vamos a tener una distancia de 1828. Vamos a usar 24. En lugar de usar 44, vamos a usar 18, que es nuestro párrafo. Cambia el color de este párrafo a un gris un poco más oscuro como este. Usaremos otro lorem. Además. Vamos a usar el párrafo inglés o dos párrafos. Aquí lo tenemos. Aplica qué textil, que es 18, cambia el color. Ahora se puede ver nosotros, les estamos mostrando que este es el uso de muestra de encabezamiento con un párrafo. Por lo que también tendrá el espacio entre ellos. Hay que mostrar el espaciado también que esto va a ser espaciado. Estos van a ser los colores del encabezado y los colores del párrafo que vamos a crear en la siguiente lección. En este momento estamos más preocupados por esto. Por lo que también por aquí, también puedes crear un enlace de texto por aquí si quieres. ¿ Qué pasa con un párrafo por aquí con algún overline? Así que vamos a crear ese feed overline o textos por aquí. Llamémoslo categoría overline, categoría producto. Ahora vamos a seleccionar sobre línea desde aquí. De acuerdo, Así que esto fue 14, en realidad. Lo tenemos. También vamos a mostrar el espaciado entre ellos, que va a ser ocho. Uy. Por lo que en este momento son nueve. Lo que realmente estoy haciendo es que estoy sosteniendo mi tecla Alt u Option y haciendo clic en uno de los elementos y también mudarme a Microsoft a otro. Muestra que es de ocho píxeles separados. Así es como se les va a mostrar. Además, puedes usar algún color por aquí, por ejemplo, intentemos usar este morado. Morado. Tratemos de usar esto. Entonces así es como vas a mostrar a tus desarrolladores y diseñadores que esto es todo lo que vas a usar mi texto con superposición y encabezados así serán los párrafos. Se puede ver la line-height. Entonces si quieres cambiar la altura de la línea o algo así, tienes que entrar en tu click sobre cualquier área vacía y tienes que ir más allá en este textil y tratar de cambiar ajustes por aquí. Por ejemplo, aquí tenemos 8% y quiero tener 10%. Ahora se puede ver que tiene 10% de espaciado. En esto de aquí en este estilo, así es como los vas a nombrar. También puedes nombrarlos. Por ejemplo, si tengo esto, sólo puedo hacer clic aquí. Y en lugar de tener 14, también puedo usar esto es en realidad superposición. Este es el subtítulo. Así que asegúrate de nombrarlos correctamente. Este es nuestro cuerpo. Esto fue llamémoslo subtítulo. Sí. Esta es la subpartida. Nombrarlos correctamente. Este es un gran título. Esto se encabeza uno. Llamémoslo rumbo uno Cada a h3. Para que puedas ver ahora los nombres son más significativos y más fáciles de recordar. Entonces así es como va a ser tu archivo de texto. Voy a compartir contigo mi proyecto. Déjame mostrarte lo que he hecho en estos textiles por aquí. Aquí tengo la escala de tipo. Se puede ver aquí tengo la Escala de Tipo rumbo 123. No estoy mostrando los tamaños por aquí porque están dentro de este texto. Tengo diferentes textos para móviles de escritorio, placa, tres o cuatro enlaces diferentes tratamientos de texto en negrita. Y puedes ver aquí tenemos estilos de color. Si miras por aquí, puedes ver que estoy mostrando mi trato fiscal en ambos orígenes, oscuros y ligeros. Déjame mostrarte. Entonces aquí tenemos los componentes de los textos. Para que puedan ver aquí están los textos con el encabezado y luego tenemos el texto del cuerpo, luego tenemos un botón. En realidad estoy mostrando que así es como vas a tratar tus textos. De igual manera, se puede ver si ve aquí este es un elemento de lista con algún párrafo. También está mostrando las distancias entre ellos. Esta es otra vez un gran rumbo. Por lo que se puede ver si hago click en esto, se puede ver que está rumbo 75. Entonces así es como realmente los nombro. Entonces así es como en realidad los nombro texto slash escritorio slash encabezado. Y se está mostrando para diferentes encabezamientos. Por otra parte, el texto slash móvil slash encabezado. Por qué te estoy mostrando esto, porque necesitas saber que hay muchas formas en que puedes nombrarlos correctamente. Por lo que sólo puedo guiarte cómo puedes empezar a construir tu sistema de diseño. El descanso depende de ti que cómo realmente seleccionas la fase TI. Tipo de letra diferente para el encabezado, tipografia diferente para el texto del cuerpo. Se puede ver que estoy en lugar de usar body, estoy usando el párrafo. Se puede ver esto es el párrafo de escritorio 14182430. Así que en realidad esto fue para un proyecto de diseño web. Entonces no usé subtítulos o etiquetas pequeñas son nota al pie de página o algo así. Entonces estoy usando estos cuatro tamaños. Asegúrate de que cada vez que estés construyendo tu sistema de diseño, también estás mostrando el uso del tipo. Se puede ver por aquí en el tipo de esquina uso. Esto es muy, muy importante cómo van a saber tus desarrolladores que cómo usar este componente son, o cómo espaciar las cosas, cómo usar estos párrafos. También puedes, lo que también puedes hacer es, por ejemplo, este todo este párrafo, todo este párrafo con tu encabezado, puedes crear un componente. Y se puede ver por aquí esto es un componente. Entonces cuando quiera, puedo tratar de arrastrar mi componente fuera de él. Entonces aquí tenemos texto componente. Aquí lo tenemos textos componentes. Así que sólo puedo arrastrarlo y soltarlo a cualquier parte. Y se va a crear un texto componente por aquí. Estas son, se pueden decir las claves de crear un sistema de diseño. Creas escalas de tipo, selecciona tu tipo de letra base. Se crean escalas de tipo y, a continuación, se crean tipos de estilos. Luego crea componentes utilizando esos estilos de tipo, usando su encabezado y su párrafo y el que lo compartió con sus desarrolladores. Y van a simplemente arrastrarlo y soltarlo. Y todos tus otros diseñadores y ellos lo van a utilizar en tu sistema de diseño. Eso es todo acerca de las escalas de texto y de tipo, toque estilos de texto. Nos vemos pronto en la próxima lección donde vamos a discutir sobre los colores. 23. Escalas y estilos de color en el sistema de diseño 01: Bienvenido a otro video sobre sistema de diseño. Hoy vamos a manejar nuestros colores. Vamos a generar colores, escalas. Entonces vamos a dar fines tardíos dos colores diferentes que este color es para este propósito. Este color es para este propósito porque si vamos a crear escalas, podríamos tener como 4050 colores. Pero no vamos a usarlos a todos. Vamos a usar tal vez unas selectivas diez o 12 curvas. Tenemos que especificar que este color es para este propósito específico. Entonces comencemos y veamos qué podemos hacer. Ahora ya puedes ver que tengo por aquí, vamos a acercarle el zoom. Esta va a ser mi paleta de colores inicial. Y en realidad utilicé una herramienta web de servidor web, que se llama ésta, coolers dot CEO. Y utilizo Generar y creé el esquema de color desde aquí. El primer color, que fue uno morado yo mismo seleccioné y los otros en realidad están apoyando colores que se pueden generar por aquí. Sólo hay que, por ejemplo, si quieres bloquear éste, por ejemplo, esto, Supongamos que este es mi color primario. Si presiono barra espaciadora, se puede ver que va a generar unos colores diferentes relacionados con éste. A lo mejor quiero usar morado con algunos Sian, que es una muy buena combinación. También verde. Voy a encerrarlos, voy a rotar a otros. Vamos a usar un 12 oscuro. Y utilicemos éste. Entonces así es como creo un esquema de color y lo exporto como SVG para empezar a construir mi diseño. Entonces aquí tenemos colores muy agudos. Aquí tenemos como 12345 colores, cinco colores, y uno va a ser nuestros negros, uno va a ser nuestro color primario, uno va a ser nuestro color secundario. Entonces empecemos con éste. Aquí lo tenemos. Desagrupe esto, y eliminemos estos. Este va a ser mi color primario. Este va a ser mi color secundario. Lo has visto en los botones. Déjame mostrarte. Si voy por aquí, se puede ver que este es nuestro color primario, este es morado y esta es la acción secundaria explorar. Esta es una segunda, acción secundaria. Y estamos usando eso. Se puede ver que este es nuestro color terciario cuando tenemos un campo activo, se puede ver que tenemos un tipo muy azulado, azulado, azul verdoso de color español claro español por aquí. Así que volvamos a la guía de estilo. Entonces este es nuestro en realidad sí se disparan o digamos. También podemos llamarlo un color activo. Este será nuestro negro. Mantengámoslo aquí así. Este es nuestro, esto es otra vez, nuestro color complementario. Lo vamos a utilizar en algún lugar en algún lugar que no lo vamos a utilizar. Aparte de eso, podríamos necesitar un color rojo. Para los adders. Tal vez. Tratemos de replicar éste porque nuestro estado, los colores de estado se llaman en realidad colores semánticos. Los autos semánticos van a mostrar los estéricos de diferentes objetos, diferentes elementos. Entonces intentemos pasar a este azulado. Rojo. La saturación es demasiado. Hagámoslo más cerca. La saturación es demasiado, así que voy a reducir la saturación. Entonces aquí hay una saturación en el medio. Vamos a probar dos, que sea menos saturado y tratemos de aumentar o disminuir su brillo. Hue. De nuevo quería estar un poco más roja. Éste parece bueno. Vamos a intentarlo. 99 tonalidad. El brillo sería 7490. Este va a ser mi color para mi estatus. Entonces ampliemos esta mesa de trabajo. Tener colores. Tratemos de expandirlo a dos. Ahora vamos a reducir el tamaño de éste también. Vamos a seleccionar todos ellos. Selecciona todas ellas. Hagámoslo un 100 por un 100, así. Vamos a arreglarlo así. Primero queremos el propósito del color. Entonces llamémoslo. Este va a ser el texto seguidor de color. Entonces este va a ser nuestros textos negros. Así que vamos a nombrar por aquí. Colores de texto. A lo mejor estos son sólo colores negros. Esto es demasiado pequeño. Voy a usarlo por aquí, 18 o aquí. Y voy a usar Roboto. A lo mejor también puedes traer esto por aquí. Se trata de cuadro de información. Voy a replicarlo o golpear. Sería más fácil para mí. ¿ Sabes, usa todo? Vamos a moverlos hacia abajo. Hagámoslo así. Aquí tenemos nuestras escalas de color, por lo que hay que renombrarlas. Voy a saltarme esto. Tenemos nuestro esquema de color. Ahora necesitamos crear algunas habilidades. Entonces para eso vamos a utilizar un plugin control o comando, barra inclinada hacia adelante, escalas de color, generador de escala de color. Entonces voy a usar hay muchos plugins. Tengo un video completo sobre cómo crear estos. momento, he seleccionado este verde. Por lo que si hago click en, voy a seleccionar, seleccionemos unos pasos densos y basta con hacer click en Crear. Va a crear todo este esquema de color. Se puede ver por aquí, esto es lo que tenemos aquí mismo. De igual manera, vamos a repetir los mismos pasos para todos esos. Voy a saltarme esto porque hará que el video sea muy largo. Ahora puedes ver que hemos generado nuestro esquema de color. Se pueden ver estas son nuestras escalas de color. Estos se ven realmente geniales. Si quieres tener un color neutro, puedes tener algo por aquí con el negro, tal vez algún color verde claro o tal vez alguna luz en color azulado opaco que depende de ti. Ahora mismo voy a usar estos negros para mi blanco y negro para mis colores DAX. Y estos van a ser nuestro color primario, de acción primaria. Este es en realidad nuestro color de acción secundaria. Y no vamos a usarlos a todos. Así que vamos a seleccionar los colores que se van a utilizar por aquí. Entonces tal vez si quieres, puedes ampliar esto o puedes usar algo, el espacio por aquí, probemos dos. Vamos a revisar nuestra app ahora. Entonces este es nuestro color primario, que es 775 CFF 77, que es, creo que éste, este es en realidad nuestro color primario. Este es nuestro color de botón de acción. Así que tal vez podamos hacer muchas cosas como tal vez podamos agregar un derrame cerebral alrededor de él como cinco. Este va a ser nuestro color de acción principal. Entonces nuestro color secundario fue 79 FEC 47979 boletos. Tratemos de traerlo aquí. Por lo que queremos ver si se va a temer esto. En realidad coincide. Creo que está muy cerca de éste. Este color por aquí dos, fc 98. Acerquemos. Creo que está más cerca de éste. Este va a ser nuestro color. Agreguemos un trazo de cinco por aquí. Entonces este es nuestro color. Podrás resaltar los colores donde crees que este va a ser nuestro color principal para el mismo propósito, colores primarios y secundarios, entonces tenemos mayor que el negro. Así que intentemos cuál es el color de fondo 1 sexto, 1 sexto, 1 sexto. Entonces creo que esto está más cerca de éste. A lo mejor creo que está más cerca de éste. Entonces intentemos ver si el color de fondo es una e Tratemos de abrirlo. Está en el azul, 209 a 516. El matiz es 209. Entonces intentemos ver 209. ¿ Cuál es el tono para este 1188? Esto es 250. A lo mejor lo que necesitamos para arreglar eso, vamos a usar este color, tal vez este color, o tal vez podamos usar este color, éste. Tratemos de crear más escala de colores para este tono más oscuro. O tal vez vamos a usar el rojo. Replica esto por aquí. Vamos a mover el deslizador por aquí. Voy a usar este color para el fondo. Muévelos. Entonces este va a ser nuestro color de fondo. Destacémoslo con un trazo de color blanco. Usaremos el rojo por aquí porque no podemos verlo así. Tal vez si quieres, puedes nombrarlos correctamente. Entonces intentemos mover esto ahora mismo. Tratemos de quitar. Se puede ver que está aquí, esto es de nuevo un 100, esto es de nuevo un 100. Queremos llamarlo. Llamémoslo 1 décima. Tenemos que nombrarlos en realidad correctamente. Así que vamos a seleccionar todos ellos. Te voy a mostrar cómo cambiarles el nombre. Entonces Control o Comando R. Así que vamos a cambiarles el nombre, hacer barra principal para usar, llamémosla púrpura. Y luego vamos a usar un número como este. Puedes usar algo como esto. Es, también puedes intentar usar patrón numérico como agregar un 0 al final, así, luego 20, y vamos a presionar el cambio de nombre. Así es como los vas a cambiar el nombre. Colores primarios slash morado, morado, morado, morado. Entonces así es como va a ser. Tratemos de desagruparlos y seleccionarlos todos. Entonces así es como los vas a cambiar el nombre, y así es como vas a crear estilos de color fuera de ellos. Entonces voy a usar también, puedes hacer una cosa más. Así que intentemos mostrarte Vamos nuestro nombre actual. Antes de eso vamos a usar colores slash colores primarios. Entonces esto va a ser más, mejor. A continuación, renio ellos como este colores recortan los colores primarios recortan el color que tienes. De igual manera para estos, vamos a desagruparlos y vamos a seleccionar todos ellos. Y de nuevo, los vamos a renombrar a Fellows. Slash, slash de color secundario. Próxima calidad, verde afilado. Verde. Entonces vamos a usar un número. Número será al final, agregaremos 03, eliminaremos esta n, renombraremos. Es así como los vamos a renombrar y luego vamos a seleccionarlos a todos. Vamos a ejecutar otro plugin llamado malo Schuyler, creo. Tratemos de ejecutarlo. Uy. Tenemos que pensar que había una opción para crear múltiples estilos. Ahí se generó éste. De acuerdo, entonces este es el plugins Tyler generar estilos. Haga clic en eso. Y va a generar todos los estilos, 21 estilos. Y se puede ver por aquí, si vamos por aquí, eliminemos todos estos. Se puede ver que voy a eliminar las anteriores. También se va a eliminar el azul primario. Eliminemos todos los textiles de aquí. Estilo de color, y puedes ver aquí tenemos colores y por dentro tenemos color primario. Entonces tenemos nuestro color secundario como este. Se puede ver que podemos aplicar todos estos así. Así es como vas a crear tu primaria, secundaria y todos esos colores. Entonces voy a hacer lo mismo por los demás. Entonces vamos a saltarte eso. 24. Escalas y estilos de color en el sistema de diseño 02: Ahora puedes ver hemos creado todos los colores, estilos y todo. Y puedes ver aquí nuestros colores están muy bien hechos. Los colores primarios van a ser estos. Colores secundarios o esta escala. Entonces tenemos negros. Estos son nuestros negros y blancos. Entonces tenemos color semántico. Estos son azules semánticos, rojos y verdes. Estos van a ser nuestros eruditos de estatus de colores semánticos. Eso es todo lo que tienes que crear, todo tu esquema de color, estilo de color, todo por aquí. Y el siguiente paso es que hay que mostrar el propósito. Tienes que seleccionar diferentes colores que van a ser para el propósito de estos colores. Entonces intentemos expandirlo así. Tratemos de seleccionar primero estos y escalar el tablero de arte. Vamos a llamarlo izquierda. Y normalmente no tienen que expandir eso. Nuevamente, éste también está escalando. Vamos a llamarlo top izquierdo. Todos estos también a la izquierda y arriba, en realidad los estamos limitando para que no escalen con nuestra expansión de esta caja. Esto lo hemos creado. Entonces intentemos dar el propósito a nuestros colores. Este color era en realidad, este color era para fondo. Y creo que este color estaba siguiendo nuestra acción primaria. Este color era nuestro botón secundario. Vamos a escribir todo eso. Vamos a seleccionar esto. Copiarlo por aquí. Así. Corona. Y vamos a usar parcela a escala un poco más pequeña, este 24. Uy, tenemos que usar 24 tipos de tamaño. Este va a ser nuestro color de fondo. Así. Así es como se muestra el propósito. Entonces vamos a demostrar que esta va a ser nuestra acción primordial. No se puede ver cuál es la distancia entre ellos. Esta va a ser nuestra segunda reacción. Hemos definido el propósito. También puedes alinearlo por aquí así. De igual manera para los negros, hay ver dónde hemos utilizado, por ejemplo, éste es para fondos, para los campos de texto. Y éste fue por los antecedentes de, ya lo hemos hecho. Esto es lo que vamos a buscar. Este va a ser nuestro trasfondo. Creo que fue algo más cerca. Tratemos de agarrar esto por aquí. C y pegarlo aquí para ver qué color realmente coincide. Está muy cerca de éste. Este es el color. Entonces tenemos que replicar. Se, nos controla arte presionando Alt. Vamos a replicarlo. Y vamos a usar lo mismo por aquí. Lo vamos a llamar el color de fondo. Y vamos a ver si tenemos más. Esto es también, creo que del mismo color. Lo mismo que se ha usado por aquí. Mismo color. Éste es diferente. 353344, y es en este tono púrpura. Vamos a definir todos estos. Este es nuestro fondo de entrada. Y esto también fueron cuatro. Este es en realidad el primero, llamémoslo fondo dabs. Esto también es para el fondo de pestañas. Es así como vamos a generar diferentes tokens. Entonces este es el propósito y el token. Tenemos que usar estos colores. Entonces si revertimos al equipo, entonces vamos a revertir estos tokens. Asegúrate de tener, has especificado que esta es la regla que está jugando este color. Tienes la idea. Y luego lo tenemos. Unos pocos colores semánticos. Entonces veamos, creo que fue éste o éste. Vamos a usar este. Uy, no son opcionales aquí. Esta es nuestra aportación activa o activa. Esto realmente está mostrando que se trata de entrada activa. Ahora tenemos que hacerlo, teníamos otro. Replicémoslo por aquí e intentemos cambiar el color. Creo que hemos usado algo como esto o aquí, déjame mostrarte. Entonces aquí tenemos otro pilar que está salpicado de color verdoso. Creo que fue éste. Voy a agarrar este color. Eliminemos éste. Así. Esta es nuestra esta es nuestra barra porcentual o barra de progreso. También podemos llamarlo progreso. Antecedentes. Ya no es el color que nos hemos perdido. Aquí. Tenemos analítica, que es de color verde azulado, tipo de. No estoy seguro de qué color es este. Tratemos de traer ese color. Creo que lo hemos usado algunos lugares. Éste, creo que este es el color. Este es otro color para que hemos utilizado por aquí. Así que vamos a agarrarlo. Este color es en realidad progreso. Llamémoslo progreso, color oscuro, progreso. Esta va a ser nuestra barra de progreso para los errores. Creo que intentemos ver si se aplica algún color por aquí. Tratemos de usar frontera por aquí. Traza y trata de seleccionar el color desde aquí. Veamos cuál va a igualar. Este se ve bien, lee 50. Entonces vamos a usar eso. Uy. Volvamos a nuestra guía de estilo. Leer 50 es éste. Este se ve muy bien en una adder. Vamos a usar ese mortero. Tenemos que usar el mercado de insumos, ¿de acuerdo? Así es como acabamos de emparejar las distancias. Es así como vamos a definir todos los propósitos. Entonces creo que nuestro esquema de color está listo. Una cosa que nos hemos perdido es en realidad nuestro color de texto. Entonces este es nuestro color de texto, que es Crear Cuenta. Este es en realidad este color púrpura. Entonces este es en realidad este color. Este es nuestro color de texto. Así que vamos a moverla por aquí. Y también puedes crear una sección separada o aquí para los colores de textos. Vamos a agarrar esto. Mueve esto un poco más abajo. Así. Vamos a moverla por aquí. Vamos a llamarlo texto. Este es nuestro color de texto de párrafo. Este es un rumbo, rumbo. Encabezado va, porque sabemos que se trata de texto. Tenemos un color, color de texto por aquí. Y tratemos de encontrar que hemos silenciado el color del texto por aquí, que es un tipo poco aburrida de color grisáceo por aquí. También este texto de entrada, este es del mismo color. Entonces intentemos acercarlo y ver con qué color va a coincidir. Creo que va a coincidir en algún lugar por aquí. Creo que este color, o tal vez éste, este va a funcionar mejor. Así que intentemos crear un rectángulo por aquí así y aplicar este color por aquí. Creo que está más cerca de éste, este color que vamos a utilizar para el texto silenciado. Vamos a agarrar este color. Lo vamos a utilizar aquí para texto silenciado. Texto, silenciado. De acuerdo, así que aquí tenemos dos colores de textos. Uno es rumbo o nuestro color primario. Veamos si hemos usado un color más. Entonces esto es lo mismo. Tenemos un color más que está en foco, que es un poco más oscuro, donde solo tenemos pequeña sección de información. Así que intentemos usar eso por aquí. Se trata de textos silenciados, que fue BW 50. Vamos a probar 60, BW 64. Los otros textos para el texto info, pequeños en texto completo. Ahora se puede ver tenemos todas las secciones preparadas. Contamos con diferentes colores primarios y secundarios. Entonces tenemos nuestros textos colores o textos colores. Puedes hacerlos alineados correctamente. O Triumph, ahora mismo esta conferencia ya es muy larga. Entonces aquí tenemos fichas de fondo de entrada, color. Entonces tenemos nuestros colores de status, diferentes colores semánticos. Como se puede ver, estamos usando casi 1234567891011 colores por aquí. Yo creo. Dental 15 colores va a construir todo su sistema de diseño que se va a utilizar. Otros colores son sólo para apoyar. A lo mejor necesitamos un nuevo color en alguna parte, por lo que tal vez tengamos que usar eso. Entonces eso es todo esto sobre cómo vas a usar tus colores y todo y crear todo tu sistema de color en tu sistema de diseño. Entonces me aseguraré de que aprendas, voy a compartir este enlace de archivo contigo para que puedas ver lo que he hecho. Nos reuniremos en otra lección hasta entonces, cuídate. Adiós. 25. Sistema de componentes e iconos de botón 01: Antes de empezar con componentes más grandes y construir componentes poco más grandes, vamos a empezar con los más pequeños. Vamos a crear diferentes botones, diferentes chips, diferentes texto pequeño de texto Informaciones, cosas así. Vamos a profundizar en estos botones sección y vamos a crear botones con auto-layout y diferente varianza. Empecemos. Ahora ya puedes ver qué aquí tenemos este botón, solo creamos una cuenta. Hay otro estilo que es el botón fantasma. Estos son dos estilos, el mismo botón. Entonces tenemos este problema. Este es un botón destacado de saber desenrollado. Este es un botón un poco diferente. Entonces tenemos este botón Explorar, los verdes que son cuatro cursos diferentes más pequeños. Entonces tenemos esta navegación superior. La navegación va a tener un estado activo y un estado normal. Esta es otra. Creo que todos estos son también éste. Este es también botón desplegable. Vamos a crear eso. Y entonces tenemos esto. Esto también es una barra de progreso, bar. No va a ser no vamos a usar auto-layout para éste porque esto tiene tres elementos. Pero vamos a crear un componente fuera de él para que podamos actualizarlo fácilmente y renombrarlo y cambiar su textura va a golpear. Creo que eso es todo. Entonces primero vamos a ir con los botones. Por lo que en este momento tenemos nuestras páginas para diseñar sistema. Este es otro marco y lo tengo llamando botón. En primer lugar, vamos a ver que este botón es en realidad 327 por 48 pixeles. Tratemos de replicar eso en nuestro sistema de diseño. También puede mandar C o copiar, copiar el Comando V o Control V para crear una copia de ésta. Y ahora vamos a seleccionar estos botones y presionar D y todo lo que vamos a utilizar. Asegúrate de haber seleccionado esta topografía BD y textual aquí. En este momento esto está seleccionado y esto es lo que vamos a utilizar. Pulsemos Shift and Shift a para agregar auto-layout a éste. Y lo primero que vamos a hacer es que vamos a añadir algún relleno por aquí también. Vamos a sumar 16 y el top 16 en la parte inferior. Voy a sumar 58 o 57.5. Vamos a llamarlo así. 57.5 por aquí. A lo mejor vamos a llamarlo 5757. Esta es nuestra estructura principal y te voy a decir por qué he añadido 5757 antes. Déjame decirte cuál será el problema en realidad, agreguemos un pilar libre. Entonces vamos a utilizar un color de relleno, que es éste, púrpura 50. Entonces púrpura 50 es el color que está muy cerca de nuestro color real. Vamos a sumar ocho píxeles de redondez y abrir esto. Y vamos a usar las esquinas alisando. Este es nuestro diseño real de un botón. Pero en este momento no es igual a la talla 327. Tenemos que arreglarlo porque vamos a utilizar el mismo tamaño para todos los botones. Ahora vamos a seleccionar esta capa de texto dentro de este marco, y tenemos que hacerla de ancho fijo. Vamos a hacerlo más grande. Porque por ejemplo, si agrego texto, no debería expandirse. Voy a usar como 200 y vamos a usar el ancho de altura de 212. Y ahora si lo arrastro más cerca de esto, para que puedas ver que es 27 es 326, por lo que es un pixeles aparte. Entonces creo que esto va a hacer por el texto de aquí, estoy usando este color blanco, así que tengo, he agregado esto a mis colores. Estilos. Seleccione, seleccionando desde aquí. Ahora, hemos replicado esto, así que vamos a eliminar esto. Y este es nuestro botón. Vamos a llamarlo btn muesca. Tenemos 3D agrandar, y ahora vamos a crear un componente fuera de él Control Alt K o Command Option K. Así que hemos sido comprimidos eso. Para que puedan ver tenemos este botón grande. Hemos creado con éxito nuestro botón. Y si trato de cambiar su contenido como login, funciona. No está cambiando su Smith. Esto es lo que necesitamos. Ahora, avanzando, vamos a crear alguna varianza fuera de ella, al menos tres varianza. Entonces antes de eso vamos a hacer click en este todo este componente e intentar establecer la propiedad. Por ejemplo, vamos a establecer la propiedad del estilo de botón. Este valor predeterminado será el botón normal. Y éste será nuestro estilo de costos. Ahora vamos a cambiar nuestro estilo que vamos a hacer click sobre esta costa y quitar este color de relleno y un trazo, que va a ser este color o fue más claro que 50. Entonces vamos a usar este 40 por aquí. Así es como estos dos botones realmente van a ir. Este color viene por aquí. Mira, creo que hemos seleccionado los colores de nuestra paleta de colores, que hemos creado estilos de color. Entonces así es como hemos creado el segundo. Y ahora vamos a añadir otra variante. Demos clic aquí, añada otra variante. Y esto se llamaría discapacitado. Entonces en este momento sólo vamos a cambiar su color de éste a este quizá. Sí. Y para el color blanco, vamos a usar un poco de color grisáceo por aquí. Por lo que esto se va a deshabilitar. Entonces para estos 3 estilo de tercer botón, vamos a haber deshabilitado o aquí, esta declaración. Tenemos tres estilos de botones en realidad, este es nuestro lote PDN y deshabilitado, fantasma y normal. Por lo que estos son tres botones, o también se puede llamar fallido y normal falló o lo que sea. Depende de ti. Voy a llamarlo normal ahora mismo. Este es un conjunto de botones que hemos creado. Ahora vamos a crear otros botones también. Por ejemplo, tenemos éste. Éste, éste. Déjame mostrarte este también se crea usando frame. Tenemos que no preocuparnos por cómo crearlo. Así que déjame mostrarte los ajustes por aquí. Entonces ayuda superior, inferior, derecha e izquierda diez. Entonces vamos a recrear si quieres copiarlo. Y vamos a crear otro conjunto de botones por aquí. Uy. Vamos a recrear. ¿ Es? Vamos a copiar esto. Copia este marco. Voy a pegarlo por aquí. Aquí tenemos este marco. Aquí, tenemos este marco. En este momento lo vamos a llamar punto dash item. Asegúrate de que los nombras correctamente. Esto es realmente, realmente importante. No queremos que sea de ancho fijo. Por lo que va a flotar con el texto. Si trato de cambiarlo, es dextro aquí, por ejemplo. negocios, la educación comunitaria deben expandirse. No necesitamos preocuparnos por el aspecto de ancho fijo por aquí. Esto va a ser así. Vamos a crear un componente por aquí así. Y este es nuestro top nav item. Y vamos a crear dos videos para éste. ¿ Por qué? Porque alguien tiene que hacer click en él. Uno va a ser, vamos a seleccionar propiedad. Aquí. Se va a dirigir y uno va a ser 40 va a ser básicamente activo. Puedes llamarlo falso, llamémoslo falso. Este va a ser nuestro estado verdadero o activo. Éste es en realidad etapa activa, así que intentemos cambiar su color de éste también. Esto va a ser utilizar puntiagudos en blanco y negro y seguir el color del texto. Voy a usar el revés. Entonces voy a usar éste. VW nueve en blanco y negro. Así es como se ven estos dos. Uno está activo y uno es estado inactivo, o también se puede llamar falso y verdadero. Entonces creo que activo o inactivo tiene más sentido. No quiero confundir a mis desarrolladores. Por lo que este estado va a estar activo. Éste va a estar inactivo. Éste, esto tiene más sentido. Esto lo hemos creado con éxito. Y ahora podemos, vamos a crear más o aquí. Aquí tenemos este botón Inscribirse. Vamos a copiarlo y pegarlo aquí porque necesitamos replicar su configuración. Entonces es 48152. Esto es en realidad 50 suma. Vamos a usar 50 ahora mismo. Esto también se va a arreglar. Creo que vamos a usar Inscribirse Ahora. Este es este vértices de texto se va a fijar 152. Así que de nuevo, vamos a utilizar la misma técnica que usamos por aquí, ancho fijo. Vamos a usar Inscribirse. Ahora. Shift a. auto-layout se ha añadido ocho pixeles o esquinas suavizando vamos a añadir, vamos a añadir color de relleno, que va a ser el mismo, que usamos éste o 50. Este es nuestro color primario principal. Este vamos a usar blanco. Ahora. Vamos a añadir algún relleno por aquí. Entonces arriba abajo va a ser 1515. El uso 4040 estaban aquí. Me gustaría ver cuántas tallas. 38. De acuerdo, entonces primero vamos a seleccionar este texto por aquí. En lugar de usar esto, esto de aquí, vamos a usar ancho fijo, ancho fijo, y voy a tratar de expandirlo así. A lo mejor podríamos cambiar un poco el texto, tal vez cambiarlo a otra cosa. Entonces voy a tener algún relleno a su alrededor. Entonces llamémoslo 100. Creo que éste va a funcionar. Ahora vamos a sumar, cambiar el relleno por aquí. Vamos a usar 3030. Creo que 2424. Ahora mismo estamos en 148 con éste es 152, por lo que necesitamos dos más en ambos lados. 4626. Hemos replicado este botón usando auto-layout. Además, podemos cambiarlo a otra cosa, tal vez justo ahora. De acuerdo, Así que éste también viene dentro esta sección o área. Esto es genial. Esto es genial. Eliminemos el otro. Aquí tenemos nuestra y btn y regla. De nuevo, vamos a replicar lo mismo. Vamos a tener un estado más que se compra. Si ya has comprado los goles, se va a aparecer en turno de pecho a menos z Así que ahora mismo lo vamos a convertir en componente. Y ahora vamos a añadir una variante. Así que vamos a hacer clic en la variante y este momento será estado del botón. Esto es por defecto stick uno es predeterminado, uno va a ser, llamémoslo comprado. Éste va a ser, vamos a mantenerlo así. Default en las compras. Comprado va a tener diferente comprado o aquí, el color sería diferente también. Entonces intentemos usar algún color desde aquí. Probemos verde, algo verde por aquí así. Tal vez algo como esto. Tenemos que probarlo en ese fondo. En realidad. Voy a elegir éste, verde 70. Creo que esto se vería genial. Además, este color de texto no debe ser blanco. Voy a usar demo verde aquí, o tal vez un montón verde. Así. Esto va a ser dos pasos. Vamos a probarlo. Podríamos cambiarlo de rastreo. Si tratamos de ver que el color de fondo no está buceando, ¿verdad? Contamos con tres conjuntos de botones. Se puede ver que éste está realmente deshabilitado, pero éste es en realidad un estado diferente. Muestra que ya se ha comprado. Entonces tenemos vamos a lo pongas aquí y patatas fritas por aquí. Un chip más que tenemos, creo que ¿dónde estuvo este? Esto es sólo un chip de información. Se va a expandir o a experimentar. No necesitamos preocuparnos por su tamaño. Entonces éste, éste, voy a necesitar en realidad éste, éste, éste es en realidad este desplegable. Entonces creo, creo que ya lo hemos hecho usando este diseño automático. Entonces voy a mostrar, compartir contigo mi técnica, cómo he usado esto con el ícono. Se puede ver este ícono. De acuerdo, así que antes de pasar a éste, hay que crear un documento donde estarían todos los iconos. Estaremos agregando iconos a partir de ahí. Entonces déjame compartir rápidamente contigo cómo vas a hacer eso. Vamos a bloquear esta capa de fondo en realidad no se debe mover accidentalmente. Este icono en realidad va a ser un componente primero antes de agregarlo por aquí. Por lo que hay que hacer un componente. Llamemos a iconos. Lo que usamos es en realidad hemos utilizado fósforos, iconos. También puedes escribir por aquí que has usado iconos de fósforo. Hemos utilizado una barra de iconos de espalda y todo eso. Por lo que estos iconos hay que añadir por aquí. Por lo que haga clic al hacer clic en él. Por ejemplo, podríamos necesitar estos en el video. Flechas. Se usó una flecha, ésta que he usado. Así que sigo agregando estos abajo. Flecha abajo es en realidad conseguirlo. Entonces fui a conseguirlo, éste, he usado éste. Puedes ver que puedes agregar todos estos iconos que necesites. Así que utilicemos el juego. Es posible que necesitemos pantalla o pantalla, o pantalla. Así que sigue agregando todos los iconos que pueda necesitar por aquí. Porque creo que he usado esta. Hemos agregado todos los iconos, así que te voy a mostrar lo que realmente tenemos que hacer. Por lo que este fondo debería ser, Somos todos estos iconos, estos se han agregado en algún otro lugar fuera de esto. Voy a traerlos a todos de vuelta. Seleccionando todos estos y arrastrándolos a iconos. Aquí. Tenemos todos los iconos, así que vamos a usar el color de relleno para ser éste. Uy, no así. Para que puedas usar el color de relleno si quieres. Intenta arreglarlos. Voy a mantenerlo así. Y selecciona todos estos. Distribuir el espaciado horizontal. Voy a mantenerlos así. Entonces una cosa es que hay que mantener el tamaño de 24 millones. Por lo que se puede ver ha sido 3232. Es posible que necesites 3232 píxeles o es posible que necesites 2424. Éste está realmente usando, se ha utilizado como 24. Por lo que voy a reducir su tamaño a 24. Esto es lo que estamos usando. Entonces veamos si el vector a su alrededor es de 24. De acuerdo, entonces este se tiene es 24. Veamos qué tendrían otros por aquí. Entonces voy a usar el color para ser éste. Y para el fondo vectorial, voy a eliminar este color porque este fondo vectorial es solo para el límite de este ícono. Tienes que hacer lo mismo por todos estos iconos. Y el siguiente paso sería que hay que crear componente. Llamémoslo barra de iconos. Yo lo entiendo. Mantenlo así porque ya tenemos este ícono por aquí, todo este trabajo llevado hacia abajo, crea iconos como este. Entonces déjame ver si tenemos esta flecha hacia atrás. También es 24. Déjame ver si éste, éste también es 24. Entonces todo nuestro ícono que es descargar la configuración. Estos son todos 24 pixeles. También hay que usar estos iconos para, estos también son, no estoy seguro, muy duro esto, pero tengo que buscarlos. De todas formas. En tu sistema de diseño, en tus iconos, estos son todos 24, así que vamos a redimensionarlos a 24. Selecciona todas ellas. 24. Estos son todos saben, fijos. Tenemos que cambiar el color a continuación. Voy a saltarme esto. 26. Sistema de componentes e iconos de botón 02: Tenemos todos nuestros iconos, por lo que también puedes, lo que también puedes hacer éste ya ha sido creado en componente. Selecciona todas ellas. Haga clic aquí, cree múltiples componentes. Esto, estos van a ser componentes. Guárdalos así. Además, creo que necesitamos un topo, que era ajustes. Creo que los ajustes. Creo que éste, tal vez éste, no lo recuerdo, pero vamos a usar este de aquí. Voy a usar esto. Vamos a usar 24 por aquí. Así. Haz lo mismo. Selecciona todos ellos, cambia el color y crea un componente como este. Crea todos estos iconos como este antes de agregarlos a tus botones. Tenemos este ícono por aquí. Ha sucedido. En lugar de agregar arrastrado por aquí, lo que estamos tratando de hacer es que vamos a usar realmente Comando o Control D para crear una instancia, y vamos a arrastrar esa instancia a nuestro componente. Se puede ver que la he arrastrado y caído por aquí así. Se puede ver que esto es en realidad el que creé. Este es el anterior. Esto es lo que estoy usando. Por lo que es muy fácil simplemente crear una herramienta de texto de tipo por aquí llamada un año a 221. Turn a para crear esto. Y ya sabes, el taladro, vamos a tener un poco más de espacio. Y esto estaría en el medio porque tal vez tengamos que cambiar ese año o algo así, tal vez cambio de texto. Entonces aquí lo tenemos. Déjame duplicar. Ahora vamos a, lo que vamos a hacer es agregar un relleno. Uy, ya hemos terminado compañero aquí. Para este marco, necesitamos agregar un relleno. En realidad, el relleno será este color morado que estamos utilizando. Uy, este no. Éste por usar nuestros patrones. Y esta parte superior e inferior sería, vamos, vamos a usar ocho por aquí. Esto se ve genial. Yo creo. Tratemos de agregar esto así a esto. Simplemente arrastra y suelta y tienes que cambiar tienes que cambiar el espaciado. He arreglado el botón, por lo que la configuración estaba en realidad por aquí. Entonces este movimiento en realidad, fue así. Entonces hay que estar en el medio así para crear este tipo de botón. Porque tenemos dos elementos, así que tenemos que auto-layout, arreglarlos. Entonces publicar es que en realidad reduzca la distancia entre ellos para que puedas aumentarla si quieres. Lo estoy guardando en cuatro pixeles. Para arriba y abajo, 66810. A la derecha ocho relleno es porque tenemos este ícono por aquí. No debería verse muy grande a la derecha. Así. Se ve bien. Puedes usar siete o seis si quieres. Seis también se ve muy bien. Entonces 10666, así. Y aquí tenemos nuestro botón para que puedas ver oreja está en la parte inferior, llevada hacia abajo está en la parte superior, por lo que estará a la derecha. Asegúrate de hacer clic en este marco. Por lo que vamos a renombrar para que se caiga. Y esta es la configuración de auto-layout de este menú desplegable. Entonces da click en este desplegable y tenemos para éste, y para este mixto estamos realmente usando el arreglo de aquí. Entonces esto en realidad va a arreglar ese texto moviéndose hacia arriba y hacia abajo. Para que puedas ver que esto es un problema. Asegúrate de que esté en el centro o a la izquierda. Depende de ti. Creo que centrado Se ve muy bien para mí. Es así como voy a estar creando este proyecto de ley. Ahora voy a eliminar esto y crear componente fuera de él. Entonces creando un componente. Y si quieres crear una acción desplegable o tal vez selección o algo así, depende de ti. Como seco ahora voy a mantenerlo así. Por lo que no hay estado para éste. Este va a ser mi menú desplegable. Creo que lo mantendría aquí. Ahora vamos a crear esto, esto, esto en realidad ya está creado. Nada listo difícil. Esto es en realidad el próximo otoño en plena fuerza en chip completo, núcleos de chip y cuatro, depende de ti. Esto es en realidad usando los colores de, vamos a tratar de usar los colores de aquí. Este gris se ve muy bien, y tendremos el color de trazo para ser esta pantalla. Creo que esto se ve muy bien. Ya luce genial. Éste. Asegúrate de elegir los colores desde aquí. Por ejemplo, aquí si tenemos esta dispersión por una oreja, intenté usar los colores de tus estilos de color por aquí. Entonces si intentas cambiar algo ya lo va a reflejar en todo tu sistema de diseño. De igual manera, se puede ver por qué he añadido esta dispersión por aquí. Entonces si quieres cambiarlo a otra cosa, por ejemplo, quieres cambiarlo a mano de obra, entonces puedes hacerlo solo seleccionando un incienso por aquí, rebobinar. Así que todos tus iconos son en realidad ahora. Todos tus iconos están por aquí porque los has creado en un componente para que puedas desechar los componentes por aquí. Entonces esta es la belleza de este sistema de diseño. Aquí tenemos el chip de goles en su totalidad. Y creo que esto es otra vez, he usado el diseño auto por aquí. Creo que debería mantenerlo en el medio porque si trato de agregar un ícono por aquí, se va a interrumpir. Entonces es la distancia entre el relleno, pero lo necesitamos. Entonces voy a crear un componente fuera de él. Y es auto expandiéndose, así que no tenemos que preocuparnos. Control o Comando Alt Opción K. Aquí tenemos componente chip por aquí. Hemos creado como diferentes botones y chips. Veamos si necesitamos uno más. A lo mejor podemos crear este progreso, pero necesitamos hacerlo. Esto no es muy difícil y vamos a usarlo y tratemos replicarlo en nuestro sistema de diseño. No es botón, pero creo que es una barra de progreso. Entonces llamémoslo botones, más chips, más barras de progreso. Sólo para asegurarnos de que el ataque teníamos usando todo por aquí. Aquí lo tenemos. Se puede ver que esto está en realidad en el medio y el centro. Si trato de cambiarlo, no debemos expandirlo. Debería ser igual así, por lo que se quedará así. Éste debe ser movido fácilmente. Así. El ajuste sería lo mismo. Estoy usando el mismo ajuste para este. Y creo que eso está encendido. Déjame ver si tenemos una barra de progreso diferente por aquí. Este está utilizando una configuración diferente. Por lo que quiero usar 11 por aquí, que sea similar a éste. Por lo que vamos a estar usando la misma barra de progreso. Entonces el vert es 199. Hagámoslo 200. Sólo para estar en el lado seguro. Este es un poco más grande. Esto es 213. Entonces intentemos usar 200 y ver si encaja. Sí. Por lo que voy a usar 200 por aquí de nuevo. Hagámoslo un poco más grande que doscientos doscientos diez. Este también 210. Esta también barra de progreso 210. Por lo que MIG tamaño de cada uno de ellos similar. Esto va a hacer en el medio. Vamos a crear lo mismo con nuestro sistema de diseño. Va a ser de 210 pixeles. Entonces creo que no vamos a ser más complejos. Entonces vamos a tratar de renio ellos. Rellene BG para el fondo, calidad verde en BD, y seleccione este comando Clave de opción para crear un componente. Se puede ver que hemos creado este componente por aquí y podemos acceder fácilmente a él en los activos. Para que puedas ver que tenemos, puedes ver por aquí en los activos, si te mudas a activos, tenemos este chip para iniciar sesión. Botón pequeño. Creo que nos perdimos un botón por aquí, que fue éste. Nos hemos perdido este. Explora. A continuación, cópielo y arrástrelo por aquí. Y vamos a replicar este botón en nuestro propio sistema de diseño. Y ya conoces el simulacro como creamos esta inscribirte sin iniciar sesión aquí. Así que voy a saltarme esto rápidamente. Y vamos a crear dos estados para esto. Uno a, uno se compra y el otro es Explorer. Hemos replicado con éxito ese botón. Entonces en este momento lo que estoy tratando de hacer es que estoy tratando de tener un poco más de espacio en el texto para que podamos cambiarlo a otra cosa, y el tamaño sería 102. Entonces vamos a reducir como 16 pixeles. Ahora. Vamos a intentar 16. En 16. Muy cerca. 1515 haría el truco. Aquí tenemos el botón y lo vamos a llamar más pequeño. Aquí lo tenemos y crear un componente fuera de él. Vamos a crear un componente. Vamos a crear una variante. La segunda variante sería, pero creo que vamos a usar el mismo equipo para eso. ¿ Qué está pasando? ¿ Aquí? Vamos a utilizar la propiedad. Ya teníamos estatus. Steve. Hagamos extinguido. Entonces vamos a usar el estado del botón. Uy, oops, oops, ¿qué pasó? Estado. Y este estado predeterminado, esto se va a comprar. Se compró. Entonces tenemos que arreglar eso entrando aquí y tratar de replicar esto. Intenté tenerlo así. Ahora tenemos 213 y vemos si tenemos el mismo tamaño, 10210411 por aquí. Aquí lo tenemos, pero SIG y explorar dos estados se secan. Ahora tenemos que cambiar el color de fondo por otra cosa, que va a ser un erudito. Creo que hemos usado verde 70, sí, verde 17, punto verde antes del texto. De verde a verde. Este punto verde D, éste. Si hemos comprado el curso, va a ser así que es a éste. Entonces dos botones, rojo. Hemos hecho y completado esta tarea de crear todas estas barras de progreso, chips y botones. Y creo que déjame ver si nos hemos perdido algo. No, no hemos mezclado perdido, perdimos nada. Para que puedas ver tenemos un icono por aquí el cual es check en círculo. También vas a copiar esto a tu ícono o iconos por aquí. Éste es en realidad 32 por 32, y vamos a crear un componente fuera de él así. Guárdalo con tus iconos o tus iconos. Y vamos a mencionar los tamaños por aquí más adelante. Te voy a mostrar algunos trucos sobre cómo mantener tus iconos. No intentes hacer eso. Va a estropear el tamaño de tus iconos. Aquí tenemos todos los iconos. Y lo que puedes hacer es también intentar copiar estos por aquí desde aquí. Así. Copia esto porque éste no está ahí en el sistema de diseño. Haga clic aquí. Y esto es en realidad tratar de acercar como este componente. Descarga simple. Tratemos de ver si tenemos esta libertad es horizontal. Intenta copiar estos desde aquí porque creo que ha estado bien, así que EQ en los iconos, éste es diferente, éste es diferente. Entonces escualor, no alimentadores, pero lo vamos a llamar Ajustes. Y éste es ajustes. Esto tiene más sentido. Se puede ver tenemos todos los iconos diferentes en 24 pixeles. Este está empezando a, si tienes 30 para mantenerlos en regla separada. Y creo que eso es todo. También necesitamos estos tres iconos. Vamos a copiar estos de aquí a aquí lo tenemos Qué sencillo estudiante y circular. Entonces vamos a copiar todos estos tres. A continuación, intenta ir a este sistema de diseño. Da click en estos iconos, controla V. Y tenemos nuestros iconos por aquí. momento estamos usando este color, razón por la que tenemos esto. Vamos a utilizar este color, estos iconos, BW. Entonces para todos estos, voy a usar vw. Aquí lo tenemos. Bw. Bw puede seguir estos iconos. Estos son en realidad 32 por 32, lo que esto debe mantenerse en esta línea. Esto es de 32 por 32 pixeles. Aquí lo tenemos. Cómo símbolos usar un engranaje de círculo. Mantengámoslos así. Tenemos que crear múltiples componentes así. Y aquí tenemos nuestro conjunto de iconos de 32 por 32 píxeles y 24 por 24. Lo que voy a hacer electrón es que voy a añadir algo como esto o aquí, que es nuestra barra de información. Este, éste se va a sumar a nuestros iconos 3224, y eso sería todo. Voy a hacer que suceda y te mostraré en la próxima lección. Esta lección es muy larga. Así que pasemos a la siguiente lección y estudiemos algo más sobre nuestra creación de componentes más complejos. Entonces se encargarán, adiós. 27. Componentes más grandes01: Ahora antes de hacerte unos componentes más grandes, tenemos que usar otro marco para tener nuestras ilustraciones sobre eso. Hagámoslo rápidamente. Entonces aquí lo tenemos sistema diseñado. Vamos a replicar estos iconos como este. Cambie el nombre para mover esto, mover todos esos. Y estas van a ser nuestras ilustraciones. Tener ilustraciones grandes y pequeñas. Así que utilicemos la cabeza solo para tenerla un poco simple. Así que estoy tratando de copiar esto sucediendo. Entonces, ¿qué es la ilustración? Entonces éste, ha sido cerrado. Así que voy a salir Comando C, Control C. Sólo péguelo aquí así. Esta es una ilustración. Lo que tienes que hacer es solo crear componente sobre tema que voy a tener un mayor hacer lo mismo para los otros. Esta es una más pequeña. Hemos utilizado la ilustración de progreso. Voy a mantenerlo así. Hay pocas cosas más que hemos usado. Por ejemplo, estos pequeños puntos rojos y azules. No los usé como ilustración de fondo o algo así. Entonces lo que he hecho es que los he usado en todo este componente. Entonces vamos a agregarlos a este componente en lugar de mantenerlos separados. Ahora, creo que estamos listos para seguir adelante para crear algunos de los que hemos alineado nuestra ilustración. Por lo que ahora vamos a crear componentes más grandes. Siguiente. Usa este. A continuación, llámalos componentes. Voy a quitar estos. Llamémosles componentes. Estos van a ser nuestros elementos de lista, algo así. Y vamos a ver, por ejemplo, este es el caballo característica y este es el curso normal. Tenemos uno más, que es éste. Por lo que en realidad tenemos tres variaciones para estos. Tratemos de crear esto primero, esto primero. Aquí los tenemos. Se puede ver tenemos esta imagen destacada. O bien puedes mantenerlo así porque ya le hemos agregado gradiente lineal. Este es nuestro título del curso. Esto en absoluto. Han sido seleccionados para éste. Y el botón vamos a utilizar otros componentes que creamos. Vamos a Activos y video de conferencias de cinco horas. Vamos a dejarlo así. Qué vuelta por aquí. Eso para chip está por aquí. En nuestras capas, lo vamos a sumar. Fue dentro de este curso destacado. Esta es la forma de entrada. Creo. Éste contó con el curso. Tenemos que abrirlo y añadir este chip albercas dentro de él. Esta es en realidad esta nación tipo. Entonces voy a cambiarle el nombre a q duración. Esta es nuestra demanda futura. Lo vamos a mantener como este botón que tenemos que reemplazar. Entonces vamos a usar nuestro botón Inscribirse por aquí, el mismo. Y éste necesitamos reemplazarlo. Primero vamos a moverlo en la parte superior. Regla de Btn, y vamos a quitar esto. Ahora vamos a tener éste, que va a ser nuestro componente más grande. Lo tenemos casi listo. Veamos si tenemos alineaciones. Las alineaciones son perfectas. Y se puede ver tenemos múltiples instancias de diferentes otros botones y diferentes otros componentes más pequeños para construir uno más grande. Ahora vamos a crear nuestro componente fuera de ella publicaciones destacadas. De igual manera, vamos a hacer lo mismo con estos más pequeños. Ahora, por qué no estoy usando auto-layout porque tenemos que tener diferentes espacios. Por ejemplo, ocho píxeles por aquí y 16 píxeles por aquí. Esto no es posible porque va a tener el mismo relleno. Esto va a ser un masivo. Tratamos de crearlo con eso. Nuevamente, este título de curso. Vamos a hacer lo mismo. Esta va a ser nuestra imagen, nuestra imagen del curso llamada imagen de curso de calidad. Así, duración y estudiantes, este va a ser nuestro mismo, éste. Voy a repetir lo mismo o aquí, así que vamos a saltarnos. Tenemos a la nación tipo. Tratemos de replicarlo. Debe ser removido. Éste, éste es estudiantes. Entonces voy a replicar este lunes por aquí. Y ahora voy a quitar esta son historias estudiantiles 450. Entonces. El problema es que se debe mantener a la izquierda. Podemos manejarlo. Aquí, no hemos explorado, pero entonces tenemos que conseguir el botón explorador desde aquí y agregarlo por aquí así. Esto va a poder explorar el botón, desplazarse hacia atrás por las orejas. Explora pequeño. Por lo que los artilleros, los estudiantes de duración. Imagen del curso Btn. Nosotros hemos hecho. Tratemos de ver si tenemos un título del curso es perfecto. Todo es un componente dentro de un componente y estilos. Vamos a crear un componente fuera de él así. Este va a ser nuestro ítem del curso. Este es nuestro componente más grande. Para ese componente del curso, conviértete en uno, más pequeño. De acuerdo, entonces para éste tenemos que crear, también crear estos dos. Vamos a agarrarlos y traerlos aquí. Comando V, control V para pegarlo aquí. Esto ya ha sido seleccionado párrafo más texto silenciado. Entonces tenemos que reemplazar esto porque hemos hecho una barra de progreso en nuestro propio sistema de diseño. Vamos a Activos. ¿ Y dónde está nuestra barra de progreso? Entonces voy a traerlo aquí así e ir a capas. Este es en realidad mi curso destacado. No debe ser destacado tablero, pero es la lista. Fuerzas. Fuerza. Yo puedo. Entonces voy a arrastrar y soltar este progreso por aquí. Esta, esta va a comprar mi imagen destacada. Estos son en realidad garabatos y si lo desea, se puede crear un componente fuera de él y mantenerlo en otro lugar. Vamos a crear un componente en la parte superior garabatos. Y voy al Comando D, duplicarlo. Control X o Comando X. Vamos a pegarlos en nuestras ilustraciones. Aquí lo tenemos. Estos van a ser mis garabatos así. Voy a guardarlo por aquí en alguna parte. En mis ilustraciones. Ahora si quería cambiar el color de ese fondo, tenemos que hacer eso por aquí y se reflejará en todos ellos. Esta es nuestra imagen destacada. Vale, así que llamémoslo Imagen, Imagen. Imagen como esta. Aquí lo tenemos. Esto está completo. Vamos a crear un componente fuera de él. Por lo que tenemos estos componentes listos para agregarlos a nuestros sistemas de diseño son tres componentes que hemos creado. Y permítanme ver si hemos creado otros componentes para el texto. Yo alejé el zoom. Aquí tenemos otro componente, que es para el texto. Así que vamos a agarrar eso. Creo que debería estar por aquí a nuestro sistema de diseño y debería estar presente en los componentes más grandes como este. Lo que hace, en realidad ha creado. Vamos D y utilicemos este componente maestro. Componente maestro y traerlo aquí. Componente de postura. Necesitamos un maestro. Tenemos, estamos tratando de alinear estos. Estos no son componentes del curso, por lo que estos son en realidad componentes gravados. Vamos a mantenerlos en el fondo. Así. He creado algunos componentes por aquí. Lo mejor es que puedes cambiarlos a lo que quieras. Por ejemplo, como este de aquí, puedo tener un chip y por ejemplo, esta ilustración de progreso, puedo usarlos ambos para que puedas arrastrarlo y soltarlo así. Además, se puede ver que tenemos a este jugador por aquí. ¿ Qué está pasando? No tengo a Claus VG. Yo los he nombrado correctamente. ¿ Qué está pasando? ¿Por qué tenemos esto detrás de esto? Por lo que tenemos que eliminarlo. Control V G, Esto es imagen de video. Esto es progreso de revisión. Podemos crear un componente fuera de él. Entonces este es logo. Éste. ¿ Podrías subtítulo? Si el progreso es barra de progreso, lee tu leyenda no debería estar por aquí. Tenemos esta LAN G, control G y video. Puede crear un componente de reproductor de video. Y puedes hacer que te lo muestre. Vamos a crear un reproductor de video por aquí. Lo que necesitamos por aquí es déjame decirte, whoops, pasó, acaba de pasar. Mis iconos. De acuerdo, por lo que estas no son la parte de déjame simplemente traerlas a esto. ¿ De dónde sacas éste? ¿Ahora? La otra parte de ella, asegúrate de intentar esconderte y elegir Comando C o Control C. Y volvemos a nuestro sistema de diseño. Aquí vamos a tener este reproductor de video. Lo que tenemos que hacer es que tengamos que añadir nuestros iconos o severos en mis iconos. Este es un icono falso. Tienen que agregarlo por aquí. Descargar icono, esto es descarga. Esto es para configuraciones. Éste ha sido usado. Ahora. Sólo trata de superponerlo. Esto es ícono. Sí. Lópalo. Nadie va a ir nunca a las capas. Estos en mis iconos. Y tengo que borrar estos símbolos. Sencillo. Guárdalo así. No queremos crear un componente de ellos. Esto está bien, así que este es reproductor de video. Entonces intentemos crear un componente. Por eso he usado por aquí. Así que déjame mostrarte, por ejemplo, si quiero usar el azul aquí, puedo usar el play por aquí. Si quiero usar rebobinado por aquí, puedo usar recordatorio William. Entonces esta es la magia de crear esto. Usando estos iconos de componentes. Quiero enseñarte cuáles son los, puedes ver la esencia de estos, todo esto, lo que deberías llamarlo, toda esta idea de usar tu sistema de diseño. ¿ Por qué tienes que crear un sistema de diseño? Porque quieres que sea fácil cambiarlo o modificarlo. Y deberías tener más opciones para crear y controlar cosas. Por ejemplo, puedes ver aquí, este es mi nav inferior y quiero crear algo para éste. Lo que estoy tratando de hacer es que crearé diferentes estados para estos 13 estados. Uno está activo en casa, mi clase activa y cuenta activa. Entonces intentemos hacer eso. Entonces para eso, voy a usar un color desde aquí para hacerlo normal. No así. Estoy usando blanco y negro 60 en este momento, argumento que puede usar 52. Creo que 60 se ve bien. Blanco y negro 60. Y antes de seguir adelante, tenemos que traer nuestros iconos por aquí. Entonces aquí tenemos nuestros activos. Aquí en nuestros iconos, ¿dónde están mis símbolos de casa? Entonces este es mi icono de símbolo de casa. Y entonces tenemos más que iconos, éste. Y éste. Voy a superponerlos sólo para ahorrar el tiempo de posicionarlos una y otra vez. Así. Aquí lo tenemos así. Y eliminar el resto de los fondos. Nosotros tenemos. Vamos a moverlos dentro de él. Estos oops, ¿qué pasó? Yo la dejé garabatos. De acuerdo, entonces no voy a creer a los que tenemos texto y tenemos esto. Tratemos de usar el mismo color para que el texto a, para los iconos. 60. También para estos vector, voy a usar blanco y negro 6060. Este va a ser mi estado para el estado normal, donde no va a pasar nada. Selecciona todos estos blanco y negro 60. Seleccione en éste. Vamos a hacerlo, lo que vamos a hacer es que vamos a ocultar esto así. Esto va a estar en el fondo NAB, estado normal. Esto va a ser normal. Y tenemos tres iconos. ¿ Por qué hemos usado esto? Porque si quería cambiar un icono en cualquier momento, puedo usar arrastrar y soltar por aquí y puedo darle una bofetada icono de 2032 píxeles. Esa es una cosa. De acuerdo, así que ahora podemos crear un componente fuera de él. Este es nuestro componente. Necesitamos alguna varianza. Por lo que voy a hacer click en varianza. Así es como vamos a utilizar esto. En. Este primer video no va a ser predeterminado, pero va a ser activo, estado activo. Y el segundo será, tercero será un video, estará activo. Tenemos estos, hagamos click sobre éste para describir el inmueble. Y es la barra de nav. Sólo llámenlo status. Creo que eso se crearía en lugar de llamarlo así. Ok. En primer lugar, vamos a hacer click sobre esto y vamos cambiar el vector a no. No vamos a chasquear esa instancia. ¿ Qué está pasando? Guárdalo así. Y vamos a cambiar el color a blanco y negro. Y el hogar será blanco y negro. Este va a ser activo y nulo para el segundo estado. Esto va a estar activo, pero se va a mover por aquí. Así. Blanco y negro. Ya has conseguido la idea de cómo estoy tratando de lograr mi objetivo. Y cuenta sería, de nuevo, esto todos los demás que voy a usar back y ver 60. Veamos si tenemos plan EU y ancho 60, blanco y negro 60. Entonces si trato de cambiar el color, puedo hacerlo en un solo clic. 606060 Dan. Aquí tenemos que hacer es que tengamos que usar esta pierna. Aquí. Tenemos los tres estados listos para remoto. Y podemos simplemente arrastrarlo y soltarlo y seleccionar qué estado queremos. Y va a ser así. Bueno. Hemos creado nuestra barra de navegación, que es el botón de navegación inferior. Ahora estamos tratando de crear un diseño más complejo. Adelante. Whoops. Hemos dejado algo por aquí. Puedes crear este componente con diferentesavatares múltiples, avatares múltiples, pero creo que lo voy a omitir ahora mismo. También puedes crear un chip por aquí, que es éste, que es sobre el progreso de un estudiante. Puedes crear eso y también puedes crear eso. Entonces vamos a crear 12, estos dos, y los vamos a arrastrar y soltar en nuestro, en nuestro diseño. Éste es otro. Éste. Empecemos con este sistema de diseño. Y yo voy a hacer esto. Aquí. Lo tenemos en el marco de puntos Avid. Es alguien para comprar 72 y escualor 72. Debido al rectángulo. También puedes, puedes ver que tenemos este efecto, que es para todo este contenido en este viaje. Déjame ver si la sombra paralela, está bien, Así que tenemos puerta del elevador de sombra paralela aquí. De todos maneras. Este es el contenido y este es el fondo. Entonces llamémoslo. Este es el contenido. Depende de ti si quieres crear un componente fuera de él o no, depende de ti porque creo que será mayormente este ancho fijo. Normalmente. Depende de ti si quieres crear un componente, eso es eso, esa es tu decisión. Ahora mismo vamos a crear, empecemos a crear un componente, pero necesitamos arrastrar una ilustración por aquí. Aquí tenemos la ilustración. Arrástralo por aquí. Veamos si tenemos lo mismo. El libro está un poco por encima de esto. El libro púrpura está arriba por aquí. Así. casi este archivo desde aquí. Ahora voy a crear un componente fuera de él porque necesito tener esto. Mantengámoslo así. Desagruparlo. Ahora voy a agruparlos y vamos a crear un componente de todo este. Puedes usar el diseño automático, pero hará que las cosas sean complejas. Si tienes dos, voy a seleccionar todo esto y crear un componente va a ser mi información de usuario, nuestro usuario, llamémoslo progreso del usuario . Uy, ¿qué pasó? Tenemos que sumar el efecto por aquí, que es éste. Perfecto. Este es mi componente maestro. Podemos arrastrarlo y soltarlo en cualquier momento. 28. Componentes más grandes02: Déjame ver si podemos crear más componentes. En tanto que el último, también podemos crear éste. Esta es en realidad nuestra navegación superior, y la distancia entre ellos es en realidad 16 píxeles. Si también podemos tener diferentes estados para éste. Tratemos de traerlo de los activos. Este es nuestro chip. Ya tenía esos estados, creo. Veamos si tiene factor inactivo, inactivo. Lo que vamos a hacer es que lo vamos a replicar así. 16 píxeles sería la distancia entre ellos. Antes de eso, vamos a usar y crear auto-layout para éste. Y totalmente o dirección sería esto. La distancia sería de 1616. Tratemos de replicar esto. Estoy presionando el Comando D o Control D para duplicar esto. Para crear éste, vamos a utilizar, digamos usuario. Entonces vamos a, nuevo, no, no así, tengo que seleccionar esto. Y aquí tenemos la interfaz de usuario de navegación completa. De acuerdo, para que puedas hacer clic y puedes cambiar inactivo a activo, SAP para ti. Antes de entrar en otra cosa. En realidad vamos a usar rectangular aquí. Tratemos de ver si podemos agregar un relleno por aquí. Que no va a ser esto. Pero en realidad necesitamos así. El problema es en realidad los pasadores que vienen por aquí. Déjame ver si puedo desde ahí. Aquí lo tenemos. Se trata de un rectángulo. Este es el relleno lineal degradado, el grupo de máscaras. Déjame ver si puedo replicar esto por aquí. Lo mismo que obvia. Este es el problema. Todos. He añadido otro color aquí. Entonces ese es el problema o esto está sucediendo, eso está sucediendo. Estoy agregando ahora, revirtiéndola. Este, éste no va a ser un 100%, sino 80%. Lo vamos a mantener al 100%. Tenemos que cambiar el color para que puedas ver si trato de cambiar el color. Así que tal vez justo por aquí. Esto no debería ser así. Éste debería ser al 100% así. Estamos creando en realidad gradiente lineal que es de 200% por ciento porque está totalmente va a ocultarlo. Por lo que se creará el veinticinco por ciento. Y entonces éste va a ser un 100%. Se puede ver que este es nuestro grupo de Maestros. Esta es nuestra mezquita. Y vamos a crear un componente. Vamos a llamarlo. Este es nuestro componente. Si quieres cambiar la máscara, puedes hacerla llena así. Es así como vamos a crear más navegaciones. Y si quieres tener, creo que no necesitamos tener dos o tres escenarios diferentes para éste porque podemos encender y apagar cualquier cosa. Déjame mostrarte cómo puedes usarlos por aquí. Por lo que tenemos una distancia de 41 píxeles por aquí. Eliminemos éste. Y vamos a utilizar desde activos nuestros propios creados. Considerando que mi Así que aquí tenemos los componentes. Abre esto. Aquí tenemos el cuello de fondo. Voy a arrastrarlo y soltarlo por aquí. Sería 4000 pixeles. 47, creo que fue 47. Veamos cuál es el sonido 50 48. Eso es de siete colores. Así. Parece que a 30 años de aquí. La altura fue de 48. Entonces éste es 48. No importa. No hay problema. Éste fue 3s orbital. Éste es 305. Voy a moverla en el medio. Treinta y cinco. Treinta y cinco. Sí. Vamos a elegir 44 o una cabeza nula. De acuerdo, entonces tiene algunos otros problemas, así que voy a usarlo. Tratemos de usar 4444. El fondo está empezando a. Eso es genial. Este es mi navbutton. Si quiero cambiar el estatus a casa activa clase activa, yo también puedo hacerlo. Una cosa más es que también se puede la sección prototipo. También puedes crear un prototipo. Tenemos toda esta navegación que se va a cambiar a otra. Para que puedas tener este cambio a en dapp, en onclick. Onclick. No debe ser en cambio sino inteligente animar hacia fuera y hacer lo mismo más lejos. Así. Y también desde esta disciplina, atrás. A partir de esto, va a volver así. Se puede crear algo como esto y se vería genial en cuando se animará. Me divierto. Creo que tengo un tutorial de prototipado en mi canal de YouTube que está mostrando este. Cómo animar esto. Te he estado mostrando en este entorno en su lugar. Así es como vamos a reemplazar nuestro nav de fondo. Eliminemos esto mañana y veamos y Martin V. Del mismo modo, tenemos esto por aquí. De nuevo, traeremos para eliminar esto. Uy, ¿qué está pasando? De acuerdo, así que tengo que seleccionar el marco. Aquí. Se puede ver que tenemos que hacer el otro. Va a ser diseño del próximo trimestre. nav de fondo va a ser mis clases. Esta clase de estado activa. Aquí tenemos, llamémoslo mis clases. Haga clic en este activo serían gafas. Esto es casa. Tratemos de ir al prototipo y te mostraré lo que realmente quiero decir. Vamos a probar dos. Tratemos de ejecutar esto. Se puede ver si hace clic aquí, se puede ver cómo estos realmente se están moviendo. Los oscuros se están moviendo y todo está cambiando. Para que puedas ver esto se ve realmente, realmente genial animación de, así que en realidad no he conectado éste de nuevo a éste. Puedes hacer eso en tu sistema de diseño y te detienes aquí. También puede seleccionar elemento. Creo que podemos volver así. Este va por aquí. Este va por aquí. Éste se remonta a las clases en realidad. De todos maneras, así es como guiñarías para tener este efecto animado de tu aquí. Entonces intentemos sumar de mis activos. Voy a añadir esto por aquí. Así. De mis capas. Voy a quitar u ocultar esto ahora mismo. Para que puedan ver así es como voy a hacer en eso. Una cosa más es que también puedes eliminar estos y seguir agregando tus componentes desde aquí. Vayamos a Diseño. Tratemos de tenerlos. 50, así que en realidad me quedo con 6044. Aquí. Contamos con más componentes como estos, por lo que puedes crear diferentes categorías. Por ejemplo, tengo este video. Esto es, estos son texto alimentario, estas son navegaciones. Voy a tenerlos en diferentes secciones. Por ejemplo, estos son mis también puedes agregar, puedes ver puedes agregar descripción de todos estos componentes si quieres. Por ejemplo, esta es en realidad una lista de reproducción. Lo llamaría lista de reproducción por aquí. Y también puedes agregar un enlace de documentación si quieres vincularlo a alguna página de documentación donde mostrarás cómo usar eso o cómo lo sabes? Más detalles sobre este componente? Así es como en realidad tengo, estoy tratando de manejarlos en grupos. Hemos completado todos nuestros componentes promediando. Te he mostrado cómo crear diferentes variantes, diferentes componentes, diferentes componentes más grandes para usar esos componentes más pequeños. ¿ Cómo vas a usar esos iconos? Cómo implementar esos iconos, cómo reemplazarlos en su sistema de diseño si lo desea. Cómo tienes que construir tus ilustraciones e iconos y todo, todo el sistema. También puedes crear diferentes enlaces en tus iconos, por ejemplo, también puedes decirles que estos son falsos. Escritura de iconos. Estos fueron para los iconos de fósforo es falso para los iconos. Estos son iconos de fósforo. También puedes vincular, crear enlaces. Por ejemplo, si lo tienes, puedes ver que tenemos esta topografía y estamos utilizando esta estos dos tipos de letra. Y voy a crear un enlace para ellos. Para ello, puedes ver si seleccionas un índice, habrás creado enlace en la tecla Comando de Control superior. Lo que estoy tratando de hacer es que en realidad estaré moviendo esto así. Y no sería descarga carga de bonos. Da click en este enlace y puedes ver puedo pegar la URL aquí. Entonces voy a ir a google.com y voy a pegar el link de esta botella o tal fórmula. Voy a usar este enlace. Copiar. Voy a pegarlo por aquí. Así es como puedes basar los enlaces en tu cabello. Vamos a intentarlo. Cambia el color de éste por otra cosa para que parezca link. Entonces voy a usar, intentemos usar éste. Este se ve muy bien. Si desea agregar enlaces a diferentes porciones son diferentes. Diferentes páginas web o cosas diferentes que usted, sus diseñadores o desarrolladores necesitan descargar. Puedes hacer click en eso y se moverá a, por ejemplo, estos son iconos de fósforo. Puedes crear un enlace para iconos de fósforo. Para ir a esa página. Los desarrolladores pueden descargar todas las especificaciones, todo. Por ejemplo, estas ilustraciones donde grabamos esas ilustraciones, puedes tener el enlace a estas ilustraciones. Eso es todo. Entonces esto es, creo que otro consejo que me gustaría darte para que puedas agregar diferentes enlaces diferentes a todo tu sistema de diseño. Hay una cosa más que la gente intentó hacer es que intentan crear diferentes páginas y tener tus botones y todo por separado. 29. Sistema de grilla y sistema de diseño: Una cosa más que olvidamos es en realidad grid. Puedes definir tu sistema de cuadrícula en tu documento por aquí. Para ello, vamos a crear un nuevo marco. Para marco. Vamos a tratar de crear iPhone, que hemos usado, creo que iPhone permitiendo Pro Max. Y hemos utilizado una rejilla. Veamos si hemos creado un estilo de rejilla. Permítanme, déjame ver si tenemos esta rejilla. Ya tenemos la rejilla. Vamos a crear un estilo grid, llamémoslo columna de alimentos. Para usar eso vamos a ir por aquí y seleccionar esto y esta es nuestra grilla. Puedes definir el modo como cuál es la distancia a la izquierda y la derecha en tu cuadrícula, y también los colores. Por ejemplo. tener diferentes colores o propiedades. Por ejemplo, intentemos cambiar el color del fondo a algo como esto. Para mostrar la rejilla. Rejillas. Además, si quieres tener el layout, por ejemplo, tenemos un layout de todos estos elementos como este, trazando así. Y por ejemplo como este, también puedes crear un diseño. Tenemos un gran elemento por aquí, luego dos elementos por aquí así. Puedes crear este diseño también, el taburete de rejilla. Así que ahora mismo, no estamos preocupados por ello, ¿quién? Sólo vamos a desarrollar nuestras aplicaciones móviles. Contamos con rejillas para móviles. Si quieres. Sistema de diseño donde tenemos Web T2, entonces vamos a tener un sistema grid para el diseño web para dejarme hacer eso. Crea otro marco. Y esta vez voy a usar un escritorio 1440. Este va a ser mi escritorio. Vamos a crear un diseño de cuadrícula. Y vamos a usar un diseño de cuadrícula de columna, 12 columnas. Línea central. Deberían ser 72, llamémoslo 72. Cortador no sería de 30. Así es como mostrarías una cuadrícula de escritorio. También puedes guardarlo por aquí. Esto será más fácil que práctico para cuadrícula de escritorio de tus desarrolladores. Y eso haría el truco. Creo que todo se trata de las cuadrículas. Creo que dejé esto. Tienes que crear un sistema de grilla a donde vas a mostrar todas las diferentes cuadrículas. Mejor si ha creado estos estilos de cuadrícula que se pueden aplicar fácilmente cuando está tratando de crear una nueva página en un nuevo diseño. Creo que hemos completado todo eruditos de cuadrícula, topografía, fichas de botón, barras de progreso, iconos, ilustraciones y componentes. Creo que eso va a terminar y algunas de las puntuaciones. Si tienes alguna pregunta o si me queda algo, si tienes alguna pregunta, siempre me puedes preguntar. Puedes crear y hacer esto lo más complejo que puedas. Pero traté de simplificarlo y traté enseñarte la esencia del sistema de diseño, lo que realmente necesitas, y por qué realmente necesitas construir un sistema de diseño que te va a hacer la vida más fácil. Y todos los consejos y trucos que he dado en esta clase que te van a ayudar mucho a la hora de usar Figma. Te conoceré en otro video y otro curso. Asegúrate de descargar los recursos para este curso hasta entonces, cuídate Adiós, y nos encontraremos en otro momento. 30. Crear componentes de combo de tipotipo: En la última lección, hemos creado nuestra sección de tipografía de nuestro sistema de diseño. Ahora vamos a ver algunas de las más cosas que podrías necesitar en tu sistema de tipografía. Éstas son adicionales. Para que puedas ver aquí tenemos nuestro sistema de diseño donde tenemos un título título. Entonces tenemos sección que he descrito por todos aquí con los tamaños a la izquierda. Y cada uno de ellos es en realidad un estilo tipo. Ya puedes ver, puedes adivinar fácilmente lo que es ahora tenemos, también las he aplicado todas a mi app de aprendizaje de diseño. Déjame mostrarte. Aquí lo tenemos. Por lo que si hace clic aquí, es un encabezado de sección de tipografía. Y si va a hacer clic aquí, este es párrafo topografía más texto silenciado. Si hacemos clic aquí, este es pequeño libro de texto más navegación inferior. Hemos aplicado todo donde debe estar. Estoy presionando Comando o Control para hacer click en Slack. Se puede ver campo de texto y etiquetas. De igual manera, si hace clic aquí, este es párrafo mutar dentro del texto. Entonces este es el FiltText. En realidad aplica ese estilo por aquí. Entonces de nuevo dentro de estos, todos estos botones. Entonces estos son en realidad botones o controles. En todos estos controles tenemos o botones hemos aplicado el texto del botón si hace clic aquí y botón de texto, si hace clic y btn texto, estos son todos los textos de botón. De igual manera para este texto, esto es sólo una información, información más pequeña. Entonces está en texto completo. Vamos a revisar distancias. Nuevamente. Si vas por aquí, este es párrafo más silenciado. Por lo que cada título a continuación por aquí es en realidad párrafo. Por lo que si hace clic aquí, esto también es Párrafo más silenciado. De igual manera, tenemos éste. Este es un texto pequeño. Si vas por aquí en la parte inferior, este es pequeño texto más navegación inferior. Para que puedas ver así es como aplicas toda tu tipografía a tu sistema de diseño. Ahora, si quieres mostrarles la combinación de diferentes tipos de letra. Por ejemplo. Aquí se puede ver estamos combinando dos de ellos. Es una diferencia entre ellos. Puedes copiar desde aquí. Se puede ir a la guía de estilo y se puede ver que se dirigía a esta sección por aquí. Tan rápido los pasaban. Esta es la distancia entre ellos. Este es un texto que necesitamos para obtener ambas capas por aquí por separado. ¿ Qué pasó aquí? Veamos dónde está. De acuerdo, así que aquí lo tenemos. Vamos a agarrar estos dos comandos C. Y vamos a ver si podemos llamar a la gente. Cuanto más aquí. Sí, Ahora han sido gastos generales en realidad, copió el texto solamente. Intenta usar un color de fondo por aquí, que es Docker. Fondo oscuro. Éste, creo que hemos usado éste. Trató de mostrar todo sobre un fondo oscuro. Es más fácil para ellos. Aquí lo tenemos. Muévelo hacia abajo. Copiar estos dos también. Vamos a presionar Alt y arrastrar por aquí así. Y los vamos a llamar tipo. Desde la izquierda 88. Puedes compartir tus combinaciones de tipografias por aquí. También le dirá a los kudos que cuánta distancia estaría de un texto a otro. Se puede ver aquí tenemos la distancia de diez. De igual manera, si tenemos más como éste, esta sección donde tenemos títulos de conferencias, y vamos a copiar esto. Y vamos a volver a la guía de estilo. Y vamos a usar eso por aquí. Así. A continuación, amplíe este fondo un poco más. Aquí lo tenemos. Hablemos de este trasfondo. Creo que estamos usando esta. Así es como tus desarrolladores van a saber que las distancias entre estos tipos de letra, quieren crear componente. Tú también puedes hacer eso. Entonces, por ejemplo, si quisiera crear un componente de esto por aquí, solo puedo ir a aquí. Va a ser un componente. Para que puedas cambiarlo más adelante. que puedas crear un componente y llamarlo, por ejemplo, sección, lista de videos de sección, algo así. De igual manera, puedes tener, puedes seleccionar ambos y crear un componente. Llamémoslo info de usuario. Puedes ver así es como vas a crear algunos de los componentes que van a ayudar a tus desarrolladores a agarrar los rápidamente y usarlos en su diseño. Si hay una tecla de acceso directo, si quieres agarrar estos, simplemente presiona Shift. Slash. Hubo un turno I. Tienes que presionar Turno I. Se puede ver aquí tenemos tipografía. Tenemos que Sección Lista de Video. Si hago clic aquí, se va a agarrar. O aquí se puede ver que esto es lo que tenemos por aquí. De igual manera, esta es nuestra sección. De igual manera, si quiero usar este turno yo y puedo buscar cualquier componente. Por ejemplo, estos fueron pocos los que creamos. Y también puedes crear, usar estos, por ejemplo, userinfo. Y va a pagar algo así. Si quieres crear más componentes, como tal vez todo este componente de objetivos destacados y todos estos. Vamos a crear estos en los próximos pasos atrás, no, estamos más preocupados por la tipografía. Entonces vamos a nuestra guía de estilo. Y creo que aquí teníamos, vamos a dejar esta pelea ahora. Tenemos dos componentes por aquí, que es, que vamos a utilizar en nuestros desarrolladores o diseñadores van a utilizar en su tipografía. Sección. Vamos a mover este grupo. Tenemos dos o cadera. Llamemos a este fondo. Solo debes saber si quieres extenderlo por aquí así. Eso depende de ti. Así. Ahora puedes ver que tenemos algunos componentes de uso donde estamos mostrando al usuario las distancias entre párrafos o títulos o algo así. Además, estamos mostrando toda la escala de diseño donde tenemos todos los tipos de letra diferentes y sus estilos. Y su propósito es qué propósito está vinculado a ese estilo de tipo. Eso es todo lo que tienes que aplicar todos estos, ya los hemos aplicado. Vamos a pasar en la siguiente sección ness siguiente lección y vamos a mirar combos de colores y generando otro esquema de color. Vamos a la siguiente lección. 31. Uso de íconos en campos de entrada 01: Ahora en la última lección creamos el sistema de iconos y el sistema de botones. Los datos son pocas cosas que vamos a utilizar ahora, que es nuestra entrada. Vamos a crear videos y campos de entrada de hora. Empecemos y por qué creamos los iconos antes. Te voy a mostrar ahora para que puedas ver por aquí, si miras este botón, así que los he etiquetado botones con estados. Entonces estos son nuestros botones. Entonces tenemos barras de progreso en pushups donde tenemos que inferir chips y barra de progreso, y luego tenemos esta barra de progreso. Entonces éste está en realidad en Port. Usar desplegable. Aquí vamos a utilizar este desplegable. Y ahora vamos a recrear nuestros campos de entrada, que son éste. Nosotros tenemos estos. Entonces vamos a copiar ambos. Veremos si podemos replicarlas utilizando nuestro sistema de diseño. Entonces aquí tenemos uno y éste es uno, éste está activo, por lo que el ancho es de tres cantidades 7. Lo primero es que podemos usar el mismo ancho, que es 346. Estamos aquí. Tratemos de replicar eso. En primer lugar, vamos a usar y crear este presionando D. Y voy a usar esto. Esta es mi aportación. A lo mejor podemos usar el email shift a para crear un diseño automático a su alrededor. Y la altura es de 48. Entonces vamos a usar, vamos a usar 88 por aquí. El estatura es de 34 en este momento creo que encabezaríamos el 1212. De acuerdo, Entonces una cosa es que vamos a haber hecho doble clic en este texto. Lo vamos a alinear a la izquierda. Esto va a estar siempre a la izquierda. Como saben, los vamos a tener altura fija. Por lo que voy a hacer click en ese medio. Voy a hacerlo por lo menos tanto tiempo. Este tiempo es suficiente. Creo que esto es lo suficientemente bueno para el texto. Importante, puedo tener correo electrónico o cualquier cosa a cambio dentro de él. Eso es todo. Tal vez un poco más largo que eso. Voy a usar 260 palabra. Agreguemos un color de relleno en este marco. Color de relleno. Y va a ser algo así, pequeño más oscuro que éste. Entonces éste, BW E9, este es el color de nuestros diseños son algunos que va a coincidir con este color. De acuerdo, entonces creo que de izquierda tenemos 16. Así que voy a guardar 16 por aquí, así. Y también desde aquí voy a guardar 16, el medio. Lo vamos a mantener en el medio porque una vez vamos a añadir este ícono, eso va a estropearlo todo. Eso es todo. Entonces vamos a tratar de ver 42. Éste es 48, por lo que necesitamos un poco más de relleno en la parte superior e inferior. 46. Usaremos 15 por aquí y veamos si se ve muy bien. Vamos a Sí. Quince, Quince, Quince, Quince, 161648. Ahora vamos a hacer esto blanco. Esto va a ser 330. Entonces no así. Por lo que vamos a utilizar el click este marco y tratar de ver. Ahora, intenta agregar este ícono por aquí. Entonces vamos a ir a nuestros iconos. Vamos a ir a Activos desde aquí e ir a los iconos. Voy a añadir esto y soltar esto por aquí así. Uy, se puede ver que ya ha sido igual al tamaño, casi igual al tamaño. Ahora vuelve a las capas y vamos a revisar tus cosas. Por ejemplo, arriba, abajo. Vamos a reducir porque este 32 en realidad está teniendo mucho agregando ancho a éste. Ir a este fotograma uno, que es, llamémoslo input. Tendremos en la parte superior e inferior será de 12 a, veamos cuál es la altura 50. Éste es 48. Es de nuevo mucho. Vamos a probar 88 por aquí es en realidad añadiendo. Esto es 48. Perfecto. Y nos olvidamos de esto. Agregando así el radio de la esquina. Veamos cuál es el ancho es 327, esto es 334. Este ícono se ve un poco demasiado lejos de este borde, así que voy a reducir el lado de tamaño desde este lado. Entonces el relleno sería, intentemos reducir. Es. Se ve genial. O aquí. Este 330 y esto es 327. Tratemos de reducir este tamaño. Doscientos cincuenta y seis. Cincuenta y siete. Y ahora veremos el tamaño 327320 segundos. Entonces esto es perfecto. Ahora ya puedes ver puedo añadir una dirección de correo electrónico por aquí, M.com. Creo que va a ser fácilmente para todo el e-mail. Esto va a ser estado sin llenar en realidad. Entonces intentemos usar algo que esté bien para tener esto. Y tenemos que hacer otra cosa. Sistema de diseño y estos iconos, voy a replicar esto. Este va a ser mi icono vacío. No, no así. Voy a crear una caja de 32 por 32. Y éste en realidad va a tener color de relleno holanceo. Tratemos de usar opacidad del 0%. Por éste. Voy a llamarlo vacío. O llamémoslo no. No. Voy a crear un componente fuera de él. Hagámoslo más cerca de éste. 32. Uso de íconos en campos de entrada 02: Este es nuestro nuevo ícono. Te voy a mostrar por qué creé esto. Aquí tenemos este estado fallido. Hemos creado el campo. Por lo que en realidad habrías forzado Falta una cosa más, que es esta dirección de correo electrónico, que es la etiqueta, que es etiquetas de datos libres de impuestos. Así que intentemos agregar eso por aquí. Fui al puerto D. Va a ser la etiqueta, etiqueta, etiqueta, etiqueta con etiqueta, etiquetas de texto. Esta es la etiqueta y el color es en realidad algo más cercano a esto. Sí. Ahora vamos a arrastrarlo a este diseño automático. Se puede ver que se ha agregado por aquí, así que queremos que esté en la cima. De acuerdo, entonces ahora tenemos un problema. Antes de añadir éste a esto. Vamos a utilizar otro auto-layout. Este es de seis píxeles. Vamos a quedármela Seis. Aparte de aquí. Vamos a seleccionar a ambos. Turno. ¿De acuerdo? Aquí tenemos otro marco y quiero que sea, esta va a ser mi aportación. Más etiquetado. Se puede ver que el diseño automático es de dirección vertical, por lo que es mantener esta pierna que el espaciamiento entre artículos es de seis, que hemos establecido en este momento. Y a la izquierda vamos a sumar algún relleno de seis. Se está agregando relleno en ambos. Esto de aquí. Esto en realidad está agregando todo a este todo. Tratemos de crear un diseño automático para éste. Este correo electrónico eliminará el relleno superior, inferior. Esto se está volviendo muy complejo. Bottom 0 y esto va a ser 16. Creo que va a coincidir así. Entonces 15, voy a mantenerlo así. Lo que hice es que en realidad revisé el diseño automático para éste también. Así que normalmente no me gusta crear esos muchos diseños de automóviles y cosas así. Entonces vamos a volver y mantenerlo más sencillo. Así que vamos a quitar el diseño automático. Vamos a quitar el marco. Desagrupa así. Entonces lo que estoy tratando de hacer es que también voy a desagrupar esto. Para mantenerlo sencillo. Sólo vamos a agruparlos juntos. Comando G, y esto es de entrada, enable, input plus label. Se puede hacer mucho con el diseño automático, pero no me gusta demasiados complejos auto-layout mezclándose así. Esta no es una buena manera de empezar tu diseño. Por lo que voy a alinear esto personalizado desde aquí. Esto es en realidad seis píxeles aparte de aquí. Así será mi campo de correo electrónico. Seis pixeles. Sí. Lo que estoy tratando de hacer es ahora que estoy tratando de crear un componente simple que es este. Mantente así por aquí. Entonces esto es en realidad, vamos a necesitar alguna varianza por aquí. Y vamos a mantenerlo simple ahora mismo. Vamos a usar la etiqueta por aquí. Vamos a llamarlo. Esto va a ser normal. Volvamos a llamarlo etiqueta. Aquí. Llamemos a esto va a ser, hagámoslo vacío. No podemos hacerlo vacío. Entonces llamémoslo texto de entrada. Ahora vamos a reemplazar esto a nuestro ícono, que era nuevo ícono. Símbolo es que este texto es, queremos que sea algo así. No queremos estar muy resaltados porque es sólo un texto de relleno antes de que alguien entre. Este es nuestro estado normal. Entonces llamémoslo estado. Este es nuestro estado normal. Estado de entrada. Este es en realidad nuestro estado. Y necesitamos uno más que sea estado activo. Para que podamos moverlos así. No voy a agregarles auto-layout. Y vamos a crear uno más. Que va a ser donde tengamos esta frontera. Y el fondo es, creo que más ligero. No estoy seguro. Voy a añadir un trazo. Y el trazo estaría en realidad en estos colores. Esto no es un color. Creo que esto está muy cerca. Voy a usar otro color, que es éste. Azul 50 es en realidad nuestro color para este estado. Y ícono sería como estamos tratando de llenarlo. Por lo que vamos a utilizar en el icono en este momento campo de entrada. Esto, esto es realmente activo. Así es como traté de usar create components para mis campos de entrada. Si tienes más campos de entrada, puedes crear muchas otras cosas. Se trata de textos normales. Esto es que también puedes, si quieres ocultar este texto, solo puedes hacerlo 0% y se esconderá así si quieres tener una entrada como esta. Hemos creado nuestro desplegable de texto de entrada. Esto es déjame ver si necesitamos algo más. Vale, así que aquí tenemos los avatares. Si quieres crear un marco de avatar, creo que también necesitas un icono de 32 bits de 32 píxeles. Ve a este ícono. Y esto es en realidad aquí lo tenemos. Vamos a usar una elipse. Vamos a crear una elipse sosteniendo Shift y el ancho y la altura deben ser 32. Este va a ser nuestro Aquí tenemos uno vacío. Así que vamos a tener otro por aquí. Mantén el vacío por aquí. Vamos a usar, que es lo mismo para estos. Este va a ser nuestro resultado. Para el relleno. En realidad vamos a usar una imagen. Para el relleno. Vamos a usar una imagen y mantenerla así. Voy a usar avatar y tenemos que hacer un componente fuera de él. Resuelve. Casi hemos creado todos nuestros componentes más pequeños, y ahora vamos a ir hacia los más grandes como este. Navegación inferior, esta navegación superior para estos, siguiéndolos en estos por aquí, estos y también estos. Creo que ya las hemos creado. Entonces vamos a crear estos componentes ahora. Por ejemplo, este reproductor de video, podemos tener todo un componente de este reproductor de video y no vamos a utilizar demasiado de la complejidad de agregar demasiados auto-layout y cosas por el estilo. Vamos a utilizar, combinar estos y crear nuestro sistema. Vamos a hacer eso en la próxima lección. Vamos a pasar a la siguiente lección y crear algunos componentes más complejos. Podemos agregarlos a nuestros diseños fácilmente. Y también vamos a tener las ilustraciones copiadas a otro fotograma llamado ilustraciones, que podamos arrastrarlas y soltarlas por aquí. Te conoceré en la próxima lección hasta entonces, cuídate. Adiós. 33. Creación de un sistema de espacio: 01: Ahora en el video de hoy, vamos a discutir un aspecto muy importante que en realidad olvidé mientras grababa este curso, que es sistema de espaciado. En tu sistema de diseño, el espaciado va a ser mayormente vertical. O a veces podemos ver espacio rápido que va a estar alrededor de todo tu diseño o página. Y hay diferentes categorías de espaciado. Entonces vamos a ver cuáles son los espaciamientos que necesitamos sistema de espaciado, necesitamos en nuestro sistema de diseño. Empecemos. Ahora se puede ver He creado un tablero de arte por aquí, el sistema de espaciado vertical. Y vamos a ir a nuestra app de aprendizaje y vamos a ver algunos de los espaciados. Por ejemplo, puedes ver aquí desde este logo hasta la parte superior, tenemos 34 pixeles. El espaciado es casi, creo que fueron 36. Entonces vamos a usar 36 por aquí. A lo mejor podemos usar 32. Vamos a usar 32. Nuevamente aquí vamos a usar 32 de nuevo. Por aquí. Era b igual en cada lado. De igual manera, estos dos tienen un espaciado de 24. Se puede ver que estos son los pocos sistemas de espaciado diferentes, acuerdo, Así que a la izquierda y derecha, nuestro sistema de cuadrícula en realidad tiene 24 píxeles de margen a la izquierda y a la derecha. Para que puedas ver, si miras por aquí, tenemos 24 en la parte superior. 24. Así. De igual manera, tenemos 24 a la derecha. Hagámoslo 24. Entonces este es en realidad nuestro espacio envoltorio. En realidad estamos usando veinticuatro, veinticuatro, veinticuatro. Por lo menos estamos utilizando 24 espacios alrededor de nuestro diseño. Así que lleguemos al fondo y veamos cuál es el espacio que tenemos aquí sobrante. Vamos a tener algo como esto. Entonces esta es nuestra navegación inferior y tiene espaciado de alrededor. Tratemos de hacerlo un poco más grande. Creo que son 32 más. Aquí lo tenemos. Tratemos de acercar y ver. ¿ Está en el fondo? Sí. Entonces el espaciado es 0.77, así que sí, es 32 en la parte inferior. Ahora el espaciado es casi coincidente. Nuestros espacios pequeños más pequeños. Un bloque es 24, otro es 32. Entonces estos son los dos tamaños. Entonces vamos a escribir por aquí, misma manera que en realidad lo hicimos por nuestra topografía aquí. Voy a copiar esto. Voy a pegarlo por aquí. El primero es 24, tenemos, segundo es 32. Estos son los dos espacios. Uy. Volvamos a ver si estamos utilizando más espacio entre estos dos. Creo que debe serlo. Uno es 36. Veamos qué es este 20, esto es 211. El espaciado es en realidad 20 píxeles. Por lo que se puede ver por aquí 3621 paso más que vamos a utilizar, que es menos de 24, que es 20. Hemos identificado tres espaciados entre nuestro diseño. Aquí tenemos 40 entre secciones, secciones más grandes. Y de igual manera tenemos, el problema de aquí es que necesitamos ver el espaciado. Esto es básicamente un bloque. Tenemos 16 espaciado por aquí entre este rumbo y este bloque. Entonces vamos a tratar de ver aquí debería, debe ser 24 desde la parte superior. De igual manera, estos 224.5, esto es en realidad en 101. Esto también debe ser 01, así, 2424. Ok. Vamos a usar espécimen de 16 por aquí. Y a partir de aquí son 28. Creo que debería ser algo así como 32 quizá. Tratemos de ver. Tenemos un espaciado más, que es 16. Entonces vamos a sumar 16 o aquí tenemos 16. Por lo que hemos identificado cuatro pasos. 16202432, creo que teníamos, vale, así que tenemos cuatro. Tratemos de ver si es 3232 que ya hemos identificado. Sí. Uno fue de 40, que fue entre estas dos secciones. Entonces esto es 40. Tenemos para el espaciado. Ahora, intentemos ver si tenemos algo como 20202024. Vale, eso es bueno. 12. Se pueden ver artículos muy adyacentes. Tienen 12 espacios espaciados. Vamos a probar 12 por aquí. Tenemos ahora 123456 espaciamientos, sistemas de espaciado vertical. Y tratemos de ver si tenemos 36. Entonces esto es 24. Esto es 40. Sí, creo que todo nuestro diseño se basa en estos cuatro o cinco espacios. 1216202430 a 40. Déjame ver si necesitamos espaciado entre. Contamos con un espaciado de 16 entre dos ítems. Por lo que el espaciado horizontal es también tener el mismo paso. Y veamos si tenemos algo como cuál es el espacio entre estos dos. Por lo que he usado dos o tres veces este 27. Creo que debería ser en algunos números pares. 27 no es algo bueno. En realidad se basa en esto. De acuerdo, así que vamos a tratar de ver a este ocho. El más pequeño, ¿verdad? Aquí es ocho entre. Se pueden ver estos son textos de tres líneas, por lo que estamos usando ocho por aquí. Vamos a añadirlo para agregar un poco más de flexibilidad. Entonces si tenemos el espacio más pequeño entre nuestros artículos, sería 881216202430 a 40. Y creo que eso completaría nuestro sistema de diseño. 36 no debe ser 36, pero debe ser 32. Aquí tenemos, intentemos ajustarlos a uno. También podemos usar 40 por aquí, pero creo que usaría 32 por aquí. Y la distancia entre estos es de moda. Y éste también va a ser 20. Dato de que sea, intentemos ver la distancia entre 168 capas. Entonces esto es bueno. Tratemos de ver que este sistema, debe ser 16. Y tratemos de ver diez. Esto no es bueno. Tenemos que tenerlo por aquí. Y tratemos de ver la distancia entre estos dos. Eso es bueno. Y esto debe ser en realidad 16. Aquí. Esto se ve muy bien. Se puede ver que estoy cambiando mi diseño para acomodar, por lo que debería ser ocho. Entonces otra vez, y luego son 16. Ahora es perfecto. Eso es todo lo que creo que estos son los sistemas de espaciado que queremos utilizar en nuestros diseños. Empecemos a construirlos. Entonces lo que estoy tratando de hacer es que vamos a construir algunos bloques de los espacios. Vamos a conseguir nuestro rectángulo. Aquí lo tenemos. Debe ser de 40 de altura. Tratemos de usar 45. Normalmente lo que intenté hacer es para ritmo vertical, voy a usar el ancho de éste, por lo que tiene 375 píxeles de ancho. Lo que estoy tratando de hacer es que voy a usar 375 por aquí. Entonces voy a escribir presionando T 40 Bx, así. Voy a alinearlo en el medio. Combínalos. Puedes colorearlos si quieres. Por ejemplo, podría querer que fuera algo así. Para este color, estaré usando algo. Este va a ser mi espaciado. Esto va a ser, voy a crear un componente. Vamos a crear un componente. Y lo vamos a llamar espacio. Esta va a ser mi última escala, 1234567, Espacio siete. O también puedes llamarlo sección, espacio, espacio que sección de guión. Llamémoslos por algunos nombres significativos. Esta va a ser sección espacial o llamémosla Espacio siete. Por lo que debería ser el más grande sería más fácil recordar siete, tenemos siete por aquí. Vamos a repetir lo mismo otra vez. Y para eso vamos a desagruparlo D esa instancia. Entonces esto es otra vez, voy a resolver, estoy haciendo lo mismo una y otra vez. Entonces vamos a saltarnos este 32. Entonces voy a reducir el tamaño de la altura, 32. Así. Alinearemos el texto en el medio. Whoops, en realidad me gusta esto. Vamos a moverla hacia arriba. Ahora voy a volver a crear éste, y lo vamos a llamar espacio seis. Este va a ser mi espacio seis. De igual manera, vamos a hacer todos los demás. 34. Creación de un sistema de espacio02: Ahora puedes ver que hemos creado nuestro sistema de espaciado. Y te voy a mostrar cómo puedes crear una nueva pantalla soltando estos sistemas de espaciado. Ahora, también puedes nombrarlos, por ejemplo, puedes nombrarlos así va a ser nuestro margen. Sé que este va a ser mi margen. Este va a ser espacio de sección. Por lo que sé que este va a ser mi espacio de sección. Y de igual manera, todos estos, esto va a ser el más pequeño entre algo así o simplemente llamarlo espacio uno. Esta será la más pequeña. Este va a ser mi margen. Esta va a ser mi sección, espaciado de secciones o margen de sección de trimestre siguiente. Sólo para mantener la misma técnica de nomenclatura. Así que ahora si vienes por aquí, así que por ejemplo, estoy construyendo una nueva pantalla o estoy construyendo un nuevo diseño por aquí. Así que vamos a copiar este. Y déjame mostrarte. Si no tengo nada por aquí. Y quería arrancar mi pantalla para que lo haría rápidamente es turno, turno. Yo una vez presiono Shift I, se puede ver que tengo cosas diferentes por aquí. Puedo soltar botones. Puedo soltar ilustración. Aquí tenemos el sistema de espaciado. Entonces empecemos con este margen espacial o espacio seis. Aquí lo tenemos para que pueda dejarlo así. Y ahora si trato de escribir algo aquí, vamos a Sally calificación. Entonces sé que necesito mantener este margen por aquí antes de empezar algo. Este va a ser mi espacio. De igual forma, si quiero agregar un texto nuevo o quiero agregar algo debajo de él, llamémoslo subtítulo. Sé que necesito ocho píxeles de espacio entre ellos. Para que pueda presionar rápidamente Shift I, y puedo agregar mi espaciado. Y también puedes mostrar a tus desarrolladores este sistema de espaciado. Puedes crear un documento y mostrarles que este es el sistema de espaciado o este es el espaciado que se va a utilizar. Por ejemplo, pongamos yo, turno I, y este va a ser mi espacio de sistema de espaciado T2 en realidad se está utilizando entre botones. Entonces los desarrolladores van a saber que el espacio dos es de 12 píxeles y es el espacio entre cuando se tienen dos botones adyacentes. Voy a preparar un documento para mostrar todo mi sistema de espaciado. Creo que se usó espacio para. Aquí hemos usado el más grande, creo que el espacio de la Sección. Agreguemos el último. Espacio siete por aquí. Por lo que hay que preparar algo como esto o esto. Para que puedan ver aquí tenemos el espaciado de 3624 en realidad turno I. Uy, no tipografía. Yo quiero ir al sistema de Espaciado y voy a sumar espacio tres, creo que 16 comida espacial. Puedes ver que puedes nombrarlos. Es difícil para mí dibujarlo por aquí. También puedes nombrarlos por sus tamaños, temporales, voy a usar 2020 o aquí. Y 43, voy a poner 16. Esto es más fácil de comprender y más adivinación digital se puede ver por aquí, cuando hago clic aquí dice Sexual 40 sección marginal. De igual forma, puedo sumar 32, que necesitamos 24 vías, por lo que vamos a utilizar. También puedes buscar por aquí. Entonces vamos a otorgar por lo que está sucediendo. Espacio. Aquí tenemos espacio y perdemos 24. A lo mejor tengo no lo he nombrado correctamente. Por eso no venía. De nuevo, voy a buscar Shift I para buscar dentro de mis componentes. Y voy al tipo 24 va a ir rápidamente a eso. Y voy a preparar un documento para mis desarrolladores. Del mismo modo, se puede ver que tenemos espaciado. No podemos comprender el espaciado. Es 32. Así que vamos a sumar 32 por aquí. Esto, así es como vas a mostrar tu pantalla a tus desarrolladores. Entonces esto es 43, pero creo que debería ser de 40. Así que intentemos sumar para la pantalla, creo que vamos a mantenerla un poco más alta. Así que intentemos agregar Shift I, y agreguemos 40 por aquí, al menos 40 píxeles cuando haya botones para que los usuarios puedan presionarlos fácilmente. Este es el tema de accesibilidad. Entonces aquí lo tenemos. A lo mejor podemos añadir algunas sombras o algo así. Entonces así es como es toda nuestra pantalla. También puedes desplazar un poco hacia abajo toda esta pantalla, muestra 123. Entonces podemos esto arriba. Aquí tenemos un diseño de pantalla perfecto. Así es como vas a utilizar tu sistema de espaciado, sistemas en tus sistemas de diseño. También puede especificar si su sistema de diseño tiene tablas y una gran cantidad de datos, también puede especificar un espaciado horizontal. Tal vez necesites cuatro píxeles. Entonces para el espaciado horizontal, vas a crear unos bloques más pequeños. Bloques más pequeños para mostrar el espaciado horizontal. En lugar de crear estos. Por ejemplo, déjame mostrarte, vamos a crear bloque de ocho píxeles. Y te voy a mostrar que es dy dt en ello. Y voy a escribir aquí ocho píxeles. Esto va a tener una altura separada sería, vamos a mantener la altura 40 y vamos a usarla. Sería, vamos a quitar el pixel porque es muy difícil. Uy, tenemos. Pongámoslo aquí. No es necesariamente que siempre necesites poner algún texto por aquí. Puedes cambiarles el nombre. Por ejemplo, lo voy a llamar espacio horizontal. Mantengamos el borde pequeño espacio. Esto va a ser en la alberca espacial, que va a ser ocho. Mantengámoslo entre los paréntesis. Tamaño. Así es como vamos a crear. Vamos a crear componente. ¿ Qué está pasando? Comando Alt u Opción K. Este es nuestro espacio publicitario. Y este será un espaciado y también podemos crear para 1216 horizontalmente, el espaciado sería no ver genial, sería muy pequeña escala. Pero puedes crear eso y mostrarle a tus desarrolladores que así es como vamos a utilizar ese espacio. Para que puedas ver esto es en el espacio. También puedes usar el espacio por aquí así y el naming. Por lo que es fácil, fácil de entender que se trata de espacio vertical. Algo como esto. nomenclatura debe ser muy compacto y significativo para que tus desarrolladores puedan entender fácilmente o cualquier nuevo diseñador si van a venir o unirse al equipo de diseño de tu equipo, pueden entender fácilmente eso así es como va a funcionar tu sistema de espaciado. Eso es todo acerca del sistema de espaciado. Así es como vas a Control Comando Turno cuatro para ocultar mi diseño. Y así es como vas a mostrar éste a tu desarrollador. Y también puedes poner todos estos en un grupo y llamarlo espaciado. Y puedes esconderlo y mostrarlo así. Permítanme acercar solo a esta pantalla. Simplemente puedes esconderlo y mostrarlo así. Es más fácil manejar esto así. Chicos, todo esto se trata de su sistema de espaciado en su sistema de diseño. He visto a muchos diseñadores que no usan esto y no saben usar todo este espacio en escala de sistemas. Así es como los vas a nombrar adecuadamente. Así es como vas a crear componentes de ellos y caer rápidamente en tus diseños mientras creas tu sistema de diseño. Hasta entonces vamos a aprender mucho y luego cuidarnos. Adiós. 35. Enlaces y documentación en Figma: vinculación de páginas y cuadros: Ahora hemos terminado nuestro sistema de diseño. Hablemos de algunos de los tips que te voy a dar, que puedes usar en Figma. Y uno de ellos es que se puede ver en la pantalla, en la pantalla se puede ver que he usado algunos. Por aquí. Se puede ver que este es un documento de principio de diseño, y estoy usando pequeño icono por aquí, que se llama emojis. Para que puedas usar emojis por aquí. Lo que tienes que hacer es simplemente ir a más G, copiar y pegar. Entonces aquí lo tenemos. Consigue emoji.com. Entonces intentemos usar uno desde aquí. Tratemos de usar, intentemos usar cualquiera de ellos. Por ejemplo, como éste, este va a ser tal o por esto no puedo seleccionarlo. Déjame ver. Sí. Ok. Por lo que voy a seleccionar esto. Esto no es tal en realidad, a veces es difícil seleccionarlos. Voy a seleccionar eso, seleccionar éste, comando C o control C. Y voy a volver a Figma. Se puede ver por ejemplo, esta declaración de propósito. Puedo llegar al final y solo puedo pegarlo por aquí así. Se puede ver que me está mostrando ahora emojis por aquí. De igual manera, puedes, lo puedes hacer es que puedas pegarlo aquí en el inicio si quieres recordar así. Así es como va a verse. Puedes copiar un emoji. Y por ejemplo, tengo éste. Me gusta este, así que no estoy seguro de por qué no soy capaz copiarlo en este navegador. Probemos con otro. Aquí. Es más fácil para mí. De acuerdo, así que de nuevo, está sucediendo lo mismo. Tratemos de hacerlo más pequeño. Y aquí lo tenemos, por ejemplo, como éste. Voy a seleccionar este comando C. Y volvamos a esto. Y voy a usar principios de diseño como ese. Y también por aquí voy a quitar esto. Este es un truco muy simple para usar estos. Entonces este es un buen truco para usar iconos en tu diseño. De igual manera, por ejemplo, se puede ver que he usado por aquí. Lo que hice es que en realidad lo hice copia, solo copia de aquí. Puedes usar cualquier imagen si quieres. Y he visto gente, intentan usar iconos y otras cosas. Por ejemplo, han visto a personas usando estas marcas de verificación, garrapatas por ejemplo. Y utilicemos este cheque. Y voy a volver a mi sistema de diseño. Entonces aquí lo tenemos, por ejemplo, se puede ver que esto es lo mismo que he hecho con esto. Se puede ver aparte de usar esto, puedo arrastrar y soltar por aquí así. Por lo que se puede ver no visible así. Estos son en realidad enlaces y se puede ir a, y enlazar a otra página o dentro de Figma. Entonces el truco es por ejemplo, quiero ir a este sistema de diseño de página o hacer clic derecho Copiar enlace a página y escribir cualquier textura por aquí. Por ejemplo, vaya a Sistema de diseño. Da click en este enlace, pega tu URL, presiona enter, y eso es todo lo que necesitas. Puedes cambiar el color de la misma, sea cual sea el color que quieras. Y también puedes usar un emoji. Tal vez pueda probar algo como este corazón por aquí. Voy a usar eso y pegar, solo pegarlo al principio. Uy, así que escapa. Aquí tenemos un enlace muy bonito. Entonces si quieres pasar a esa página, basta con hacer click en, ve a esa página. Se va a ir por ahí. He visto a mucha gente que intentaron tener diferentes categorías, diferentes rejillas y todo y vinculados por aquí. Entonces en cada página tienen el enlace a esta documentación o sistema de diseño y todo. que puedas volver a diseñar principios de diseño de sistemas desde aquí, también puedes usar estos enlaces a otras páginas si lo deseas. Entonces esto es en realidad una navegación. También puedes crear un marco separado por aquí, llamar a navegación en navegación. Al igual que este sistema de diseño de navegación, algo así. Y también puedes enlazar, por ejemplo, si quiero enlazar esto, así que creo que también puedo copiar la URL de ésta. Desde aquí, puedo copiar Copy link. Para que puedas ver por aquí dentro de esta copia, Copy link button chips. Y si quieres añadir por aquí, vamos a acercar esta navegación para poder replicarla. Y puedo llamarlo En fichas de botón, elementos de forma. Puedo pegar mi URL por aquí y volverá a allá. Si hago clic en ir al marco, va directamente a ese marco. Por lo que hay muchas maneras en que puedes usar estos enlaces dentro de tu Figma. Puedes enlazar nuestro marco, puedes vincular toda nuestra página y crear todo este sistema de navegación de diseño. En este momento no voy a hacer click enlazar esto. Voy a quedarme con éste por aquí. Así. Intenta minimizar el tamaño. Tratemos de seleccionar ambos. Muévalos afuera así que voy a mantenerlo aquí así. Apenas más cerca de mi primera pantalla. Y eso es todo. Estos son algunos consejos para mantener su sistema de diseño. También, puedes ver por aquí, te voy a dar una última mirada sobre cómo en realidad, lo he unido. Este es el color. Este es un color de fondo que estamos utilizando en toda nuestra app. Lo que estoy tratando de hacer es que estoy tratando de usar y emparejar. Todo el equipo está usando el mismo fondo para cada elemento de aquí. Para que puedas ver iconos, botones, Todo está usando los mismos colores. Permítanme acercar. Y te voy a mostrar aquí está el link para descargar la tipografía Barlow. Aquí están nuestros colores. Estos son los tres colores utilizados por nuestros colores de textos. Y también su propósito que este color sea para éste. Entonces en realidad estamos tratando de usar, creo 12345678910 o 12 colores máximo en todo este diseño. Espero que hayan aprendido mucho y disfruten de todo este viaje conmigo. Altibajos pueden venir en todo este viaje de enero. Y me encantaría embarcarme y otros suelen ser debidos pronto. Entonces ahora mismo nos vamos a ver unos a otros y vamos a despedirnos. Porque esta va a ser la última lección. Quiero que creas algo parecido a éste, un sencillo sistema de diseño de tu app. Puedes usar versión ligera y versión oscura. Depende de ti. Eso es todo. Espero que hayan disfrutado de este curso y permanezcan sintonizados conmigo, echa un vistazo a mis otros cursos hasta entonces, cuídate. Adiós. 36. Assignment de sistemas de color: Ahora es el momento de tu primera asignación. Ahora tu primera asignación debe ser crear un sistema de color para tu sistema de diseño. Y antes de eso, hay que crear al menos cuatro o cinco, al menos cuatro pantallas de su aplicación móvil o sitio web o cualquier cosa que esté desarrollando. Una pantalla o dos pantallas, al menos dos páginas de tu sitio web y al menos cuatro pantallas de tu app móvil. Así que dame, muéstrame un esquema de color. Crea un sistema de color como este, y muéstrame tus colores primarios, secundarios, tus colores para tus colores de texto, los colores, tus grises y negros tú o cualquier color o estados suplementarios o invokers que vas a utilizar. Y muéstrame todo propósito definido, dales propósito, y muéstrame lo que tienes quad. Por lo que estoy deseando mostrar, ver tu pantalla. Puedes crear una captura de pantalla. Puedes hacer click en esto, por ejemplo, esto es colores. Puedes crear un click por aquí, exportar. Puedes exportar esto, exportar colores en tu escritorio y subir esto y mostrarme este sistema de color, todo tu sistema de color. Estoy esperando un sistema cerrado. Te conoceré y te responderé siempre que pueda para tu asignación. Empecemos. 37. Sistema de tipografía: escalas y estilos: Ahora es el momento de tu segunda asignación. Ese sería tu sistema tecnológico o tu escala de tipo y tus diferentes estilos de tipo que vas a construir para tu sistema de diseño. Por lo que estoy deseando ver tus tareas. Tienes que crear una escala de tipografía y un sistema de diseño de tipografía tal como lo hice yo. Te voy a enseñar. Entonces así es como tienes que presentarme. Tienes que mostrarme que este es tu sistema tipográfico o tus tipos de letra, diferentes escalas y asignarles el propósito, lo que este estilo estaría haciendo así. Este es mi título, este es mi título de sección o subencabezado cualquiera que sea el título del curso asignado fines a estas escalas de tipo. Y tienes que mostrarme también puedes compartir tu documento, por ejemplo, haciendo click en Comprar aquí. Puedes copiar el enlace y simplemente enviarme el enlace en lugar de mostrarme todo el asunto. Puedes mostrarme el enlace que termino. Puedes seguir actualizando ese enlace. Yo lo voy a ver. Simplemente envíame un mensaje que tenemos. He actualizado y he agregado mi sistema de iconos o mi sistema de cuadrícula o cualquier cosa a mi sistema de diseño. Y voy a echar un vistazo a eso. Asegúrate de crearlo y muéstrame y comparte conmigo el enlace. Y hay que crear también algún tipo combo combos, como se puede ver que he creado por aquí userinfo, y esta es mi sección, reproducción de video. Entonces depende de ti. Hay que mostrar la combinación, cómo serán los componentes, cuáles serán las distancias entre diferentes. Ya hemos cubierto aquellos en nuestros sistemas complejos por aquí. Componentes del curso. No es necesario que te preocupes, solo crea una escala de tipografía. Eso es todo lo que puedes encontrar el link de este archivo que voy a compartir contigo en los recursos. También voy a compartir el archivo Figma, el archivo real de Figma para todo este ejercicio. Asegúrate de descargarlo e importarlo. Y se puede hacer eso haciendo clic aquí. He vuelto a Inicio, pincha en el archivo de importación y puedes abrir este archivo. Volvamos a nuestro sistema de diseño. Esta es tu segunda asignación, sistema de escala de tipografía, y muéstralo a mí. Cuídate, adiós. 38. Sección de botones y átomos: Ahora tu tercera tarea es que tienes que crear los átomos de tu sistema de diseño, que en realidad son tus componentes más pequeños como botones, unos pequeños chips en cuatro chips, algo así. Navigaciones. Este es el documento que te compré. Chips de botón, barras de progreso, elementos de formulario. Así que crea un documento como este y muéstrame en diferentes usando diferentes estados. Puedes crear diferentes variantes y mostrar este documento o compartir el enlace conmigo. Puedes dar click aquí en el compartir y compartir el enlace, copiar enlace y mostrarme el enlace de este documento. Asegúrate de que lo nombra correctamente. También puedes escribir tu nombre por aquí. Por ejemplo, mi nombre, dash UX, diseñador. Puedo crear y usar el más grande de aquí. O puedo elegir esta capa y puedo usar 48, algo como esto, y usar negro. De esta manera voy a saber que este es tu expediente o éste te pertenece. A veces abro una gran cantidad de sistemas de diseño son muchas tareas que revisar y olvidé qué, quién en realidad, o quién es el estudiante o quién diseñó eso. Asegúrate de poner tu nombre aquí. Vale, así que aquí tenemos esto es lo que necesito. Puedes crear esto y mostrármelo. Estoy deseando sus tareas. Empecemos ahora. 39. Iconos illutrations y sistema cuadrícula: sistema de illutrations y cuadrícula: Ahora tu próxima tarea es que tienes que crear tus iconos y sistema de ilustración y mostrármelo. El sistema de iconos también va a tener tus logotipos. Se puede ver lo que él y yo tenemos dos logotipos. que puedas crear logotipo, logotipo pequeño y asegurarte de que estos sean componentes para que puedas agregarlos fácilmente mientras estás diseñando. De igual manera ilustraciones, hay que redimensionarlas. Tienes que dimensionarlos correctamente para que estos se puedan insertar fácilmente en tu sistema de diseño. Estas son dos cosas que necesito de ti. Además, si puedes lograr crear este sistema grid desktop, tablet móvil, eso sería un plus. Por lo que necesito tres de ellos, iconos, ilustraciones, y sistema de cuadrícula. Estos son los tres que vas a crear a continuación. Y en la próxima asignación los veremos, estoy esperando sus asignaciones. Acaba de empezar ahora. 40. Proyecto de clase: sistema de diseño con Figma: Ahora es el momento de crear componentes más grandes. Por lo que hay que crear una sección de componentes por aquí, un tablero de arte y mostrarme cuáles son los componentes más grandes de tu sistema de diseño y cómo los vas a implementar. Asegúrate de que sean más fáciles navegar y tengan varianza y adecuado todo si tienen algún exagerado o cualquier estado activo intentó crear varianza. Esto es lo que necesito de ti, tus componentes del recogedor. Entonces esta va a ser la última, creo. En tanto, si se puede crear un sistema de espaciado, estas son las dos últimas cosas que creo que queda sistema de espaciado. Este es el núcleo de su sistema de espaciado del sistema de diseño, rejillas, tipografía y colores. Estas son estas cuatro cosas son, se puede decir la base o los pilares de su sistema de diseño. Toda otra cosa va a basarse en ellos. Por ejemplo, los botones, van a importar los colores y el texto y también el espaciado desde su sistema de espaciado vertical. De igual manera, tus iconos, van a utilizar un sistema de espaciado como nosotros tenemos 3224 pixel como en tus componentes más grandes, van a usar todo. Eso es todo esto va a ser tu última tarea. Puedes compartir todo el sistema de diseño y también intentaste crear diferentes páginas. Entonces puedo ver que tienes la idea de separar tu sistema de diseño. Y también puedes crear un enlace. Por ejemplo, por aquí se puede ver que tengo un enlace por aquí. que pueda volver al sistema de diseño haciendo clic aquí, ir a la página, y también puedo ir hacia atrás por ahí desde aquí. Eso es todo esto va a ser tus tareas finales. Muéstrame tu completo sistema de diseño y estaré más que feliz de mandar y contestar y ver lo que has logrado. Eso es todo lo que creo que hemos cubierto muchas cosas en esta clase. Espero que hayas disfrutado y aprendido algo nuevo para mí. Asegúrate de enviarme algunos comandos y contestar de nuevo. Sería un placer ver tus comentarios sobre esta clase. Nos reuniremos en otra clase hasta entonces, cuídate. 41. Qué sigue: Gracias por quedarse conmigo durante toda esta clase de sistemas de diseño usando Figma, hemos aprendido mucho sobre los sistemas de diseño. Espero que vayas a echar un vistazo a mis otras clases que son sobre esquema de color, tipografía, diseño de maquetación, y muchas otras cosas que van a hacer o convertirte en una interfaz de usuario profesional y usuario diseñador de experiencia, del, entonces te conoceré en mis otras clases. Cuídate, adiós.