Clase magistral avanzada de Figma: sistemas de diseño, prototipos y UI responsiva

1. ¡Bienvenidos a la clase magistral avanzada de Figma!: Bienvenido a la clase magistral avanzada de Figma. Si ya conoces Figma y quieres llevar tus habilidades a un nivel verdaderamente profesional, entonces este es el curso adecuado para ti Hola. Mi nombre es Ahmed, y seré tu instructor para este curso. Soy diseñador de UIUX con más de cuatro años de experiencia trabajando en el mundo real, experiencias digitales y productos, como sitios web y aplicaciones en diferentes industrias, como la industria tecnológica, la industria turística Trabajó en varios proyectos que no solo requerían un buen ojo para el diseño, sino también flujos de trabajo eficientes, colaboración y sistemas que pueden crecer en el tiempo. Y eso es exactamente lo que te voy a enseñar en este curso. En este curso, vamos más allá del diseño básico, y nos centraremos en cómo trabajan los diseñadores avanzados en proyectos del mundo real. Aprenderás a construir sistemas de diseño escalables, trabajar con variables y bibliotecas de equipo, así como a crear diseños receptivos que funcionan en diferentes tamaños de pantalla. También entra en técnicas avanzadas de prototipado, como la creación de micro interacciones, animaciones suaves y gestos Todas estas cosas que van a dar vida a tu diseño. Además de eso, exploraremos herramientas modernas de diseño de Figma como FIG Jam, Figma buzz, diapositivas Figma y mucho más para ayudarlo a comprender cuándo usarlos y cómo puede usarlos para adaptarlos a un flujo de trabajo más profesional y eficiente Al final de esta clase, no solo mejorarás tus habilidades técnicas, sino que también estarás mejorando tu forma de pensar como diseñador. Podrás trabajar más rápido, manera más eficiente y con más estructura. Entonces comencemos. 2. Qué hace que un diseñador sea "avanzado" en Figma + hoja de ruta del curso: Hola y bienvenidos al curso avanzado de Figma. Aquí estarás aprendiendo todo lo que necesitas saber, para poder estructurar y crear prototipos rápida y profesional como un senior Ahora, por supuesto, para la antigüedad, necesitas un par de años de experiencia de trabajo real Pero a través de este curso, podrás aprender y comprender los conceptos más complejos con los que tratamos cuando diseñamos en Figma. Estarás aprendiendo algunos consejos y trucos que solo conocen las personas que tienen un alto nivel de experiencia y conocimiento sobre Figma, y generalmente comprenderás las herramientas difíciles, los complejos mecanismos con los que trabaja Figma. Sin más preámbulos, echemos un vistazo a lo que vas a aprender en este curso. He recopilado toda la información sobre este curso, una visión general solo para que entiendas en lo que te estás metiendo. Te aconsejo que sigas adelante y tomes nuestro curso de FIGMA el curso base de Figma, no el avanzado por si no lo has hecho ya Pero si sientes que tienes una buena cantidad de experiencia, has trabajado con Figma antes, entonces este es el curso para ti De lo contrario, por favor, continúe e intente captar primero los elementos más básicos a través del primer curso donde tocamos un poco estas características avanzadas, pero no del todo. Pero en este curso, asumiré que ya conoces las habilidades básicas, sabes cómo crear marcos, cómo crear tipo de flujos de usuario y así sucesivamente. Entonces es por eso que en caso de que aún no estés completamente ahí, no te sientes completamente en forma como diseñador, entonces tal vez da un paso atrás e intenta aprender lo básico y luego vuelve aquí. Pero si estás diciendo, oye, ¿sabes qué? Esto lo sé, y creo que puedo hacerlo. Conozco un par de cosas en Figma. Ya lo he usado antes. Ya lo he diseñado antes. Yo estoy, ya sabes, a un buen nivel, quiero mejorar , entonces este es el curso para ti. Entonces el primer capítulo que vamos a tener es el diseño escalable de sistemas y variables. Ahora en este capítulo, vamos a hablar de tres cosas principales o características principales de Figma que son muy importantes y algunas de estas características han sido lanzadas más recientemente Cuando digo recientemente, me refiero en los últimos cuatro años más o menos. Eso es para muchos diseñadores, bastante recientes. Lo primero de lo que vamos a hablar es arquitectura de componentes, que se relaciona con la creación de elementos reutilizables, que llamamos componentes que también tienen diferentes instancias y variantes. Entonces vamos a hablar de variables y modos, que es una de esas características más recientes, diría yo, con las que se pueden crear variables, colores, textos, y así sucesivamente ese cambio o que se puede cambiar en algún momento. Y vamos a hablar de bibliotecas de equipo y organización de archivos, lo cual es una parte muy crucial de trabajar dentro de un equipo en Figma. Entonces tiene muchas ventajas, y vamos a hablar de ellas. Ahora, dentro del segundo capítulo, nos vamos a centrar más en el diseño avanzado y la capacidad de respuesta Ahora, en caso de que no sepas qué es la capacidad de respuesta, básicamente es diseñar tus aplicaciones o diseñar tus productos o lo que sea que sean para adaptarse a diferentes pantallas, incluyendo pantallas de PC, pantallas de tabletas, pantallas de teléfonos Entonces, en la primera lección, vamos a hablar de que vamos a tener una inmersión profunda de diseño automático. Los diseños automáticos son esta característica increíble que en su mayoría solo tiene Figma que le permite organizar elementos Vamos a hablar de eso más adelante, pero probablemente ya tengas una introducción al mismo. Entonces vamos a hablar sobre restricciones y puntos de interrupción y cómo puedes usarlos para hacer que un diseño sea receptivo Al final, vamos a tener una construcción de sección responsive del mundo real , que es básicamente un ejemplo, un paseo por donde te voy a mostrar cómo puedes convertir un diseño muy receptivo a un diseño. Ahora en el tercer capítulo, vamos a estar hablando prototipado avanzado y micro interacciones Ahora bien, como alguien que no es un novato completo, probablemente hayas tenido algunos encuentros con la creación de prototipos Ya sabes cómo hay diferentes elementos y cómo puedes prototimarlos. Y lo que eso básicamente significa es que puedes tener una animación o puedes hacer que un botón haga algo. A lo mejor te vaya a navegar a otra página o tal vez tenga efecto hover Micro interacciones exactamente eso, pero a un nivel micro, solo más pequeño. Esa va a ser la primera lección de la que vamos a hablar. Micro interacciones, comencemos con el nivel básico. Entonces vamos a hablar interacciones de desplazamiento y gestos. Bastante básicamente, cómo se desplaza horizontalmente, verticalmente, y así sucesivamente, Porque eso también necesita ser configurado en Figma. Al final, vamos a hablar de dominio de Smart animate Animate inteligente es esta gran característica que te permite crear animaciones suaves y suaves y fáciles sin tener que hacer mucho, para ser honesto, es bastante fácil Entonces a partir de ahí, pasaremos al último capítulo. Que son modernas herramientas Figma para diseñadores avanzados. si no te enteraste de esto, Figma tiene su parte principal, que es la parte de diseño normal de la que solemos hablar y la mayoría de los diseñadores usan, pero ya han introducido un conjunto de herramientas a mano que puedes usar para otros fines Ahora bien, estas herramientas no son completamente diferentes de la herramienta de diseño, pero están un poco más enfocadas. Entre estas herramientas, vamos a hablar de Figma Jam. Lo que te ayuda a trabajar en equipo e intercambiar ideas con tu equipo. Entonces Figma zumbó por las redes sociales, creando publicaciones e imágenes para sus redes sociales sobre la marcha sin tener que poner demasiado esfuerzo o quedarse atascado con muchos ajustes de diseño Entonces los sitios Figma, que le permite diseñar y publicar sitios web directamente desde Figma, diapositivas de Figma, lo cual es bastante Básicamente, te permite crear presentaciones de diapositivas al igual que PowerPoint. Entonces Figma M, que es el especial AI BiFigma que le permite crear diferentes soluciones, prototipos, pantallas e incluso código Por último, después de discutir todas y cada una de estas herramientas por separado y darte una visión general e introducción a ellas, vamos a hablar sobre cuándo estas herramientas nos ayudan realmente a ayudarnos versus cuándo nos distraen Porque hay que tener en cuenta, estas herramientas son geniales, pero también están enfocadas. La idea es tener las mismas características o las mismas herramientas que normalmente tienes a la hora de diseñar, pero ahora están enfocadas para propósito especial como crear diapositivas, que va a venir con sus limitaciones, y va a venir con su distracción Vamos a discutir las mejores prácticas y mis recomendaciones personales y mi experiencia con estas herramientas. No quiero que esto sea demasiado largo porque estoy bastante seguro de que estás ansioso por aprender y tienes hambre de conocimiento, así que comencemos. Empecemos a aprender, y vamos a empezar despacio y luego vamos a recoger algo de velocidad, así que prepárate, siéntate y vamos. Te veré en la siguiente diapositiva. 3. Teoría de UX: Hola y bienvenidos a otra lección del curso Figma. Y esta lección de hoy trata sobre presentarte qué diseño de experiencia de usuario o para ser más específico qué es UIUX Pero vamos a tener un poco más de enfoque en la parte UX. Entonces, sigamos adelante. Entonces, antes que nada, tengamos una definición rápida de qué se supone que debe referirse la experiencia del usuario. La experiencia del usuario en general, se puede definir como es cómo un usuario interactúa y experimenta un producto, sistema o servicio, ¿de acuerdo? Puede ser cualquiera de esas cosas. E incluye las percepciones de utilidad de una persona. Facilidad de uso y eficiencia. Ahora bien, si queremos descomponer esto rápidamente, se trata básicamente de interacción. Esa es una palabra enorme resaltada. Se trata de la interacción y experiencia de un producto, un sistema, un servicio. Y por eso siempre digo una especie de experiencia digital. Siempre defino estas cosas. Podría ser un sitio web, podría ser una aplicación, podría ser lo que sea, ¿verdad? Porque cuando dices físico, podría ser incluso digital. Cuando dices que un producto que podría ser cualquier cosa es un producto, ¿verdad? Podría ser cualquier tipo de cosa. Podría ser una taza, podría ser un sitio web. Podría ser, ya sabes, un número al que llamas y te dan algún tipo de servicio, ¿verdad? Y por eso el tipo de encapsular todas estas cosas Podría ser un producto o un sistema o un servicio porque hay diferentes categorizaciones, y se trata de entender cómo los usuarios interactúan con ellos. Y dice que también incluye sus percepciones de utilidad, facilidad de fusible y eficiencia. Y estos también son temas bastante grandes. ¿Les resulta útil? ¿Esta app o sitio web o servicio? ¿Es fácil de usar y es eficiente? Como en, ¿hace lo que se supone que debe hacer? Todas estas son preguntas muy importantes. Y ahora voy a decir, espera un minuto. ¿Cuál es la diferencia entre la experiencia de usuario y la interfaz de usuario? Y tengo esta pregunta exacta ya que también estaba aprendiendo y entrando en el campo. Yo me preguntaba, seguimos usando estas dos palabras, y siempre se juntan? ¿Son lo mismo? ¿Sólo estamos diciendo lápiz o bolígrafo? Ya sabes, están tan unidos que solo estamos diciendo que son equivalentes. No, no exactamente. ¿Bien? Entonces resaltemos las diferencias. Entonces la experiencia del usuario se trata más de la sensación. Se trata de cómo se siente un producto o una experiencia, cómo alguien lo experimenta. Mientras que, por otro lado, la interfaz de usuario es más sobre el look. Se trata de cómo se ven los colores, la tipografía, el texto, ya sabes, las imágenes, Si bien la experiencia del usuario es más sobre cómo te hacen sentir las imágenes? ¿Cómo te hace sentir el texto? ¿Te convence el texto? ¿Te tranquiliza o te hace enojar? Ya sabes, entonces se trata de la experiencia de la misma, la sensación otro punto es experiencia del usuario también maneja mucha investigación de usuarios. Se trata de sentarse, hablar con los usuarios, ver lo que piensan y tratar de entender sus comportamientos, y dejar que eso guíe el diseño posterior, la interfaz de usuario. Se trata de guiar nuestra comprensión. Se trata de obtener resultados reales de nuestros usuarios. Mientras que la interfaz de usuario es más sobre tendencias de diseño. Entonces, ¿las tendencias de diseño se trata de lo que hay ahí afuera? ¿Qué está haciendo la gente? ¿Cuáles son los diseños y formas y colores más queridos? Sabes, cada año, viene una nueva cosa diferente. A veces nos encantan los gradientes, y luego otro año, los gradientes no son geniales Ya sabes, una vez, los íconos son increíbles. Otro día, ya sabes, los íconos tal vez no sean tan geniales. Y siempre se trata de estas cosas cambiantes, y no tiene por qué cambiar dramáticamente de uncool a cool o viceversa, pero podría ser que las formas tengan esquinas redondeadas, y luego a veces tienen esquinas afiladas Ahí están todas estas tendencias, y se trata de seguirlas. La experiencia del usuario también es más sobre principios psicológicos. Entonces, ¿se trata de cómo perciben los usuarios las formas? Ya sabes, ¿cómo los entienden? Debería haber alguna explicación psicológica de lo que está pasando en su cerebro cuando ven algo y cómo les hace sentir. Mientras que, por otro lado, la interfaz de usuario se trata de principios de diseño. La interfaz de usuario se basa en reglas que tenemos que establecemos que determinan si el diseño es bueno. Pero la experiencia de usuario quiere entender aunque este diseño sea bueno o malo, ¿funciona? ¿Evoca las emociones que queremos evocar? ¿Conduce a la comprensión o a la gente a entender cómo usarlo? ¿Es fácil? ¿Es agradable y así sucesivamente? La experiencia de usuario también está un poco más en el lado teórico. Eso no quiere decir que no esté involucrado con la práctica y con los datos reales, con la implementación real. Definitivamente lo es. Pero en general, se siente más por sentarse, investigar un poco, hablar con la gente, hacer mucho, ya sabes, papeleo, básicamente Y no es papeleo real, sino que se trata más de obtener los hechos, bien, y luego decidir qué hacer con interfaz de usuario se trata de saltar, ya sabes, elegir los colores, elegir el texto, seguir adelante, hacer un prototipo, hacer un boceto o algo así La experiencia del usuario implica muchas pruebas e iteraciones. Se trata de probar, darse cuenta de que estás equivocado, o que hay algunos aspectos en los que puedes mejorar las cosas y luego volver atrás y cambiarlas en función de los resultados. La interfaz de usuario implica mucha interactividad y animación Por lo que resalta eso como el objetivo. También se trata más del look, como decíamos. Entonces se trata de que las cosas se vean vivas, se vean bien, sean atractivas, sean impresionantes. Y ese es uno de los principales focos esta es una gran imagen para resumir la diferencia entre la interfaz de usuario y la experiencia del usuario Así que el diseño es básicamente igual que esta imagen. Tienes una calle preciosa o, ya sabes, una carretera, una pasarela, un sendero para caminar en este jardín, en este parque, y está planeado muy bien, ¿verdad Y entonces la experiencia del usuario es lo que realmente hace la gente los usuarios, las personas que caminan por ahí, que utilizan el parque encuentran que esta carretera es la más eficiente. Eso es evidente por el hecho de que la hierba ya no está ahí porque mucha gente la pasaba por encima. Y eso te demuestra que hay una tendencia en el comportamiento de los usuarios. Están caminando por todas partes, y el diseño se trata de verse bien y verse genial y planificarlo de una manera hermosa, pero no necesariamente de una manera eficiente o funcional. Y la razón es porque si quisieras seguir esto, tendrías que caminar hasta allí, y luego puedes ir a la derecha. Pero mientras tanto, esto es tomar un atajo. Entonces, la experiencia del usuario se trata entender qué hace realmente la gente? No se trata solo de Hey, diseñamos esto para ellos. No, se trata de ¿ realmente lo usan? ¿Es realmente útil y así sucesivamente? La experiencia del usuario se trata de interacciones. Piénsalo, ya sabes, en cuanto a estos airpods o auriculares que son inteligentes, hazte la pregunta ¿Cómo saltarse canción? ¿Cómo me salto una canción? Bueno, si estás familiarizado con este tipo de auriculares, normalmente hay, ya sabes, un botón o tienes que tocarlos una o dos veces o tal vez tocar y mantener presionado para saltarte una canción Entonces, la experiencia del usuario se trata estas pequeñas interacciones diminutas que haces con tu tecnología para lograr cosas porque los auriculares en sí mismos son inventos increíbles, y hay mucho trabajo que se pone en cómo se ven Pero, ya sabes, después de diseñarlos, una de las cosas que me vienen a mente primero es, ¿cómo me salto una canción? Quiero decir, tengo mis auriculares puestos. Mi teléfono está en mis pantalones. Quiero saltarme una canción sin tomar mi así que la experiencia de usuario se trata de pensar en todos los tipos interacciones que tengas con tu tecnología, con tu experiencia digital, con tu servicio, con tu producto, quieras llamarlo, y pensar en cómo puedes hacerlo más suave, mejor, más fácil. Y lo segundo también se trata de expectativas. Entonces, la experiencia del usuario se trata de ¿qué esperas cuando ves un producto como este? Y aquí, por ejemplo, ¿qué pasa si sacas uno? Y nuevamente, si alguna vez has tenido uno, sabrías que si sacas uno de tus auriculares, detendría la música Esto fue bastante inteligente porque entendió que esta es una necesidad que mucha gente tiene. Se sacan un trasero de oreja, alguien les habla. Quieren responderles, y quieren continuar una conversación o algo así. Quieren escuchar lo que dicen las otras personas o cualquiera por el estilo. Y así, entender que esto viene de una necesidad y esta necesidad es tal vez detener la música. Entonces manejando las expectativas. Entonces el usuario, tal vez no lo sepa, tal vez no lo esté entendiendo, pero esto es básicamente acomodando su necesidad sin siquiera saber experiencia del usuario se trata de las interacciones que los usuarios tienen con el producto y sobre manejar sus expectativas, asegurándose de que la tecnología haga lo que se supone que debe hacer. Y otra cosa son las emociones. Entonces, ¿cómo te hace sentir? Mis primeros auriculares que probé, estaba increíblemente, ya sabes, cómodo. Me sentí como un rey. Sentí que finalmente puso en mis manos algo que me entendía y lo entendía. Y iba de acuerdo con todas mis expectativas. Era intuitivo de usar. Estaba haciendo todo a la perfección. Y simplemente fue mucho mejor que cualquier cosa que jamás haya tenido. Y esto no es un anuncio, por cierto, para cualquier tipo de tecnología, sino que solo digo que se trata de emociones. Y a menudo es que te encuentras cuando estás construyendo un producto o un servicio, gente puede frustrarse. Se pueden enojar. Se pueden poner tristes. Tienen una gama de emociones porque son humanos. Y así la experiencia del usuario se trata manejar estas emociones y asegurar que tengas tanto como sea posible que tengas tantas emociones positivas y muy pocas negativas. Entonces ese es el trabajo de un producto. Se trata de hacerte sentir que tus necesidades están siendo satisfechas y el producto es increíble, genial y sorprendente. Entonces este es un buen resumen de lo que es la experiencia del usuario. Y ahora avanzando, hablemos de por qué diseñas. Entonces hay dos partes principales. Hay un problema, y hay una solución, ¿verdad? En el mundo, en todo el mundo, en cualquier negocio que quieras hacer, suele haber un problema y una solución. El problema, así es como podría describirlo. Un producto existe porque hay una necesidad o un problema en el mundo. Piensa en cualquier producto que tengas. Hay un problema o una necesidad. Necesitas lograr algo y necesitas algo para ello. Ya sabes, tienes un auto porque quieres cruzar distancias muy largas con él porque tal vez antes tenías un caballo, pero un auto es más rápido. Antes tenías una bicicleta, ya sabes, más barata, pero un auto es más rápido. Entonces es resolver un problema y la necesidad de llegar a lugares en momentos muy convenientes cuando quieras, no tienes que esperar un tren o un autobús. Puedes ir cuando quieras, como quieras , en el momento en que lo quieras. Y así fue resolver una necesidad o un problema. Y como se puede ver, la segunda parte, solución producto resolver problemas. Ahí están sus verdaderos valores. Entonces entendiendo eso te permite entender tu rol como diseñador. Estás resolviendo los problemas de la gente. No estás solo, ya sabes, dando algo bonito para tener. No estás diciendo, oye, mira esta app genial. Mucha gente descarga aplicaciones porque son geniales y porque agregan algo a sus vidas. Pero muchas veces, ya sabes, las apps más exitosas son apps que necesitas, apps que resuelven un problema que tienes, ¿verdad? Piénsalo. Podrías decir, Oye, redes sociales, ya sabes, estoy en redes sociales. Estoy en Instagram. Estoy en Facebook. No es resolver un problema. No tengo ningún problema. Bueno, sí. Es decir, hay un problema. Hay una necesidad. La necesidad es conectar con las personas, hablar con ellas, sentirse conectadas con ellas, verlas. Y debido a que todos ya están en estas aplicaciones, sentirías que te lo estás perdiendo si no estás en ellas. Entonces es, en cierto modo, resolver un problema. Y como puedes ver a la derecha, esta es la portada de un libro llamado El diseño de las cosas cotidianas. Y está escrito por Don Norman persona que fue vista en general como, ya sabes, algo así como el antepasado del diseño UX de todo el campo Y es porque escribió este libro que detallaba de muchas maneras los principios y pautas del diseño UX. Y este fue un libro muy perspicaz. Te recomendaría que lo leyeras si quieres conocer más al respecto. Es un clásico. No te va a dar consejos sobre Figma ni nada porque es bastante viejo, pero te va a hacer entender qué es el diseño UX, qué se trata y, ya sabes, cómo puedes usar los principios básicos Y te darás cuenta, aunque el libro es muy antiguo, pero maneja las mismas necesidades y problemas que tenemos hoy en día. En este libro, discutió un concepto muy interesante, que se llama puertas normandas. Y en este concepto, que es muy esclarecedor, habló de cuántas puertas hay en el mundo, probablemente notes el paso Son bastante confusos. Y eso es lo que él llama una mala puerta. Si miras esta imagen aquí, verás dos puertas diferentes. Y la pregunta es, ¿ qué puerta empujo? Y a qué puerta saco, ¿de acuerdo? Y te voy a dar unos segundos para pensarlo. Hecho. Eso es tiempo suficiente para ti. Básicamente, la izquierda es que jalas, y la derecha es la puerta que empujas. Y podrías preguntarme, ¿cómo lo sabías? Y la respuesta muy sencilla es porque se muestra a través de las asas, ¿verdad? Ahí está la clave. la izquierda, tienes un asa que te facilita sujetarlo, poner tu agarre alrededor de él y jalarlo hacia ti, cual es bastante fácil para la acción de tirar. Mientras que a la derecha, no tienes realmente un mango, y realmente no puedes sostenerlo de esa manera. No es fácil tirar, pero es bastante fácil de empujar, ¿verdad? Y así se trata de un diseño intuitivo. Y eso es lo que Don Norman notó es que en el mundo, él y muchas otras personas tendían a confundir puertas Van a una puerta que se supone que debe ser empujada y la jalan o viceversa, se supone que hay que jalarla y la empujan. Y piensan que son tontos. Piensan que están haciendo algo mal o que siempre están confundiendo estas puertas, y es su culpa. Y señaló que, no, no es tu culpa. Es culpa del diseñador. Quien se adelantó y desarrolló y construyó esta puerta y planeó de la manera que es es la persona que se equivocó por todas las cosas, una puerta debería ser la más sencilla Sabes, descubrimos esto hace mucho, mucho, mucho tiempo. Ya deberíamos tenerlo resuelto. No debería ser tan duro. Pero te das cuenta, no, sigue siendo duro. No sabes cuando llegas a una puerta, no sabes si la empujas, la tiras, o si se abre por sí sola. A veces hay indicios, pero muchas veces no estás muy seguro y tienes que seguir adelante, jalarlo, empujarlo, tratar de ver. Y a veces no sabes, ¿ Esto necesita fuerza, menos fuerza? ¿Está cerrada? ¿No está cerrada? Y así lo discutió y a través de esta historia, a través de este ejemplo, habló cómo se muestra el buen diseño. Un buen diseño es fácil de entender, es fácil de explicar. No necesita una explicación, en realidad. Se explica por sí mismo. Al igual que estas puertas, cuando diseñamos buenas puertas, somos capaces de hacer que la manija sea tan clara que la gente entienda cuándo es empujar y cuándo es jalar. Y eso es exactamente lo mismo que tenemos a la hora de diseñar. Eso nos lleva a un segundo punto que es el diseño centrado en el ser humano. Y es un enfoque de resolución de problemas comúnmente utilizado en procesos de gestión de productos, servicios y sistemas de diseño y marcos de ingeniería que desarrollan soluciones a problemas al involucrar la perspectiva humana en todos los pasos del proceso de resolución de problemas. Son muchas palabras, lo sé, lo sé. Vamos a desglosarlo. ¿Qué es el diseño centrado en el ser humano? Es centrado en las personas. Está diseñado para personas, para humanos. Y, ya sabes, aquí está hacer productos para robots. No estamos haciendo esto para extraños robots que entienden el código. Lo estamos haciendo para los humanos. Así que haz que sea más fácil de entender para los humanos que son tus usuarios. Así empatizar El segundo punto es, resolver el problema correcto. Mucha gente tiende cuando está construyendo, tiende a pensar en las cosas equivocadas. No, hazlo más fácil para tus usuarios. Enfócate en lo que están tratando resolver en sus problemas y sus necesidades. Y ahí va el dicho: Si no está quebrado, no lo arregles, ¿verdad? No arregles algo que no necesita ser arreglado. Centrarse en los problemas reales y resolverlos. Entonces tenemos al final iterar. Human Center Design afirma que el proceso de diseño es iterativo, lo que significa que es un ciclo continuo de diseño y rediseño, pensamiento y replanteamiento, construcción y reconstrucción que el proceso de diseño es iterativo, lo que significa que es un ciclo continuo de diseño y rediseño, pensamiento y replanteamiento, construcción y reconstrucción. Es interminable. Nunca hay un producto perfecto, y siempre los productos o servicios que siempre necesitan ser reelaborados, mejorados, y así sucesivamente Ese es uno de los pilares. Así que déjame darte algunos ejemplos de lo que hace un buen diseño de UX y lo que hace que el diseño de UX sea malo. Y así vamos a ignorar la parte de la interfaz de usuario por ahora. Vamos a ignorar el look, pesar de que ambos se ven muy similares. Ahora bien, ¿cuál preferirías? Botella de ketchup a la izquierda o a la derecha. Espero que la mayoría de la gente dijera la derecha porque esa es la respuesta correcta. Y la razón es porque si no lo sabes, la izquierda es bastante difícil de manejar, la forma en que se forma la botella y no sólo eso, sino el material de la botella, el hecho de que es de vidrio, que no es exprimible Y el hecho de que la tapa de la botella sea de arriba hace que sea muy difícil poner el ketchup porque hay que abrir la botella, voltearla, y luego empezar agresivamente, ya sabes, agitándola para que tengan un poco de ketchup, y la mayoría de las veces, eso lleva al caos Eso es bastante desordenado. Pero el de la derecha, autoexplicativo. Está hecho de plástico, por lo que puedes apretarlo, y siempre está inclinado hacia abajo. Así que siempre se debe inclinar hacia abajo sobre la tapa. Y así, la gravedad tira el ketchup siempre hacia abajo. Y luego tenemos estos cuadros de mando de autos. Otra vez, cuál prefieres o cuál crees que tiene mejor diseño UX, el de la izquierda o el de la derecha, y ¿por qué? Bien, déjame responderte. Es el de la izquierda. Déjame decirte por qué. No solo digo esto porque este es mi favorito o algo por el estilo. Pero si lo piensas bien, los dashboards que solíamos tener o que todavía tenemos, pero con autos más antiguos son bastante simplistas Quiero decir, no muy. Podrían parecer abrumadoras. Al igual que, hay muchos botones y muchas formas e iconos. Pero como puedes ver, antes que nada, se muestran con números simples o iconos que supuestamente son fáciles de entender. A lo mejor necesitarás algún día seguirás adelante y tratarás de entenderlos a todos. Los probarás, los presionarás y entenderás lo que hacen. Pero hay botones que están ahí. Tienen una función específica. Algunas cosas giras a la derecha, algunas cosas giras a la izquierda, algunas cosas empujas, algunas cosas tiras. Hay todas estas interacciones diferentes, ¿verdad? Cuando estás conduciendo y quieres cambiar algo, quieres presionar algo. Sabes que cuando se trata de aire acondicionado, hay que cambiar la temperatura girando la báscula girando la perilla a la derecha o a la izquierda, ¿verdad? Entonces sabrías que este no es para la temperatura. No lo mezclarías con botón de reproducción de radio porque ese es un botón que presionas. Y así la forma en que se hizo el tablero fue tan ideal para las personas que están manejando, que están enfocadas en la misión, la actividad de conducir y no tienen tiempo para mirar el tablero. En tanto, los autos más nuevos, como el de la derecha, tienen una enorme increíble. Es genial. Es bonito. Pero es bastante distrayente. Te distrae del camino. Y lo que es más molesto de que tiene tantas aplicaciones, tantas características, lo que hace que, ya sabes, tengas que mirar todas las opciones. No hay botones que sean familiares. No sabes dónde están los botones. No sabes cómo se sienten. Ya sabes, no puedes simplemente poner tu mano ahí sin buscar saber exactamente en qué estás presionando. Tienes que mirar la pantalla, y tienes que salir de la app, ir a otra aplicación, ya sabes, conectarla a Bluetooth, para conectarla a tu teléfono. Y todas estas cosas, toman tiempo y llaman la atención y te ponen en peligro. Entonces por eso es un mal diseño de UX. Ahora, muy rápido, comparemos los de la derecha y la izquierda. Cual estos son ambos dos blogs o revistas o artículos de noticias diferentes , sistemas de noticias. El de la izquierda es más viejo, obviamente. Pero lo que puedes ver es que el la izquierda es mucho más difícil de leer, y hay muchas razones por las que. Pero contiene tiene un diseño que tiene muchas imágenes, diferentes tamaños, diferentes imágenes, y son muy difíciles de distinguir. No sabes qué es un anuncio, qué es un artículo de noticias, qué es el título, qué es lo que no sabes nada porque tienen, ya sabes, todos tienen el mismo tipo de títulos, los mismos colores, y es bastante confuso, y está muy lleno de mucha información. Es decir, ¿cuántos artículos ves ahí? 14, al menos, 15, 16, algo así. Pero mirando a la derecha, ves algo mucho más organizado. En primer lugar, tienes Todas tus diferentes categorías, US, mundo, negocios, arte, estilo de vida. Para que puedas elegir entre ellos. Este es su menú, creo. Y luego tienes un gran artículo que se destaca en el medio medio, un poco a la izquierda. Y entonces tienes 28 recetas de Acción de Gracias a la derecha. Tienes otro artículo abajo. Pero se puede decir por los colores, las formas, por el texto en negrita ¿qué es un título? ¿Qué no es un título? Y se puede ver, por ejemplo, dicen vivir en rojo, y dice hace 32 minutos. Entonces es muy tipo de auto explicación. Entiendes, Bien, esto es en vivo. Esto fue hace 32 minutos. No es demasiado caótico. Hay algo de espacio vacío en blanco. Tan claramente, el correcto es un ganador por muchas razones, pero básicamente es capaz de brindar una experiencia de usuario mucho más cómoda para el ojo entienda dónde hacer clic, en qué hacer clic. Ya sabes, y el de la izquierda, parece que todo son anuncios, para ser honestos. Parece que no son enlaces reales. Parece que quieren que haga clic en algo. Incluso el hecho de que se trata de fotos de stock, la mitad de ellas. Este es un anuncio. Esto es falso. Esto no es realmente salvaje. El de la derecha es capaz de alguna manera con todos los diferentes elementos de diseño para darte una mejor sensación, no la mejor sensación, sino una ligeramente mejor. Ahora, viniendo al diseño de UIUX, permítame presentarle un poco pensamiento de diseño de procesos, que es el proceso de creación de productos digitales a través del diseño UIUX Se trata de cinco pasos principales. Algunas personas lo definen con otros pasos o nombres diferentes. Hay diferentes clases de escuelas de pensamiento. Pero usemos estos pasos. El primer paso es empatizar. primer paso es entender quiénes son tus usuarios, empatizar con ellos y seguir adelante y, ya sabes, tratar de entender de dónde vienen, cuáles son sus problemas, cuáles son sus necesidades, etc. El segundo paso es definir. Entonces se trata de definir el problema que estás tratando de resolver, definir las soluciones, definir los supuestos que tienes. Ya sabes, ¿qué les puede ayudar? ¿Qué necesitan? ¿Por qué tienen un problema? ¿Cuál es la fuente de la misma, y cuál es la solución y demás? Y se trata de definir la dirección en la que irás como empresa o como diseñador. ¿Qué tipo de solución está proporcionando para ellos? ¿Verdad? ¿Cuál es su modelo de negocio? Lo que es muchas de las veces esto no es sólo de ti. Ya sabes, estás en una empresa. Ya cuentan con un modelo de negocio. Ya tienen una estrategia. Tu parte es entender cómo puedes resolver mejor los problemas del usuario. Después de definir mejor la dirección, seguimos adelante a la ideación. Ahí es cuando intercambiamos pensamientos, donde hacemos una lluvia de ideas, tratamos de entender cuáles son nuestras opciones Quiero decir, ¿qué podemos hacer? Y sigues adelante y tiras alrededor de un par de ideas. Entonces la parte anterior, cuando dije, dar una solución, no estás diciendo, vamos a hacer uno, dos, tres, cuatro. Sólo estás dando una dirección general. A lo mejor deberíamos construir una app para, ya sabes, ayudar a la gente a pagar impuestos. Pero no sabes cómo. No sabes cómo funcionaría la app. No sabes cuál es el alcance de la misma. No lo sabes, ¿va a ser una app o va a ser un dispositivo, o es un servicio? A lo mejor es un servicio. Llamas a alguien y te comunicas con él. Entonces se trata de eso, y luego te ide. Ahí es cuando en realidad pones algunas ideas sólidas de lo que quieres hacer. Y luego sigues adelante y pasas a la etapa de wireframing y prototipado Y ahí es donde tus pensamientos al papel o a la pantalla, y dibujas cómo debería quedar cuando en realidad sigues adelante y lo dibujas. ¿Cómo debería ser la experiencia de la aplicación, o si es un servicio, cómo debería funcionar el servicio? Cómo debemos posicionarnos en términos de marketing, en términos de lo que sea. Pero nuevamente, todas estas ideas, nada está finalizado. No se está haciendo nada para siempre. Es a través de este proceso que llegas a una mirada más final, ya sabes, platicando con tus compañeros, colaborando con ellos, mostrándolo a los stakeholders, a las personas que están invertidas. Podrían ser tus jefes, podrían ser tus inversionistas, tus clientes, quienquiera que sea, hay gente que tiene interés en esto Entonces tienes que tipo de a través de ellos y a través de tus compañeros y a través de tu trabajo, llegar a una versión más final. Al principio, es sólo un boceto. Y luego una vez que obtienes más confirmación, empiezas a finalizarla un poco más Se convierte en un diseño de sitio web adecuado, y de eso se trata más o menos de lo que trata este curso. Se trata más de esta parte, el prototipado. Ahora, claro, vamos a hablar de todas las demás partes. Prototipado y encuadre de alambre, estos son nuestros puntos de enfoque Y estás cursando un curso de Figma, no un curso de diseño UIUX Y luego aquí, tenemos pruebas. Ahora, probando. No todo el mundo lo hace, para ser honesto, pero probar se trata de seguir adelante, mostrar tus aplicaciones a usuarios reales y ver lo que piensan, obtener retroalimentación. Y una vez que hayas terminado con el paso, ahí es cuando puedes iterar, ¿de acuerdo? Ahí es cuando puedes iterar y reiterar y así sucesivamente, volviendo a empatizar Encuentra tus metas, redefinirlas, ideando, inventando más ideas, más características, más historias, más secciones, sea lo que sea Y luego prototipado una y otra y otra vez, arreglando problemas, arreglando errores Sabes, no vas a hacer un trabajo perfecto. Siempre va a haber cosas por las que trabajar. Así que siempre tenlo en cuenta. En general, este es el proceso de crear con design thinking. Así es como como diseñador de UIOX, puedes ir desde cero, desde empatizar hasta el punto de probar, crear prototipos Esto puede verse muy diferente dependiendo del equipo en el que estés, pero más o menos así es como debería verse. Espero que hayas aprendido un par de cosas sobre lo que se trata el diseño de UI UX. Ahora, en las próximas lecciones, vamos a hablar un poco más sobre UI, y lo que es más importante, vamos a hablar mucho más sobre lecciones prácticas, lecciones de práctica, proyectos de la vida real sobre qué es Figma, cómo usarlo Cuáles son las herramientas, cuáles son los sistemas, las características, etc. Así que muchas gracias por escuchar, y los veré en las próximas lecciones. 4. Arquitectura de componentes: Hola, y bienvenidos a otra lección del curso avanzado de Figma Ahora, en esta lección, vamos a discutir todo sobre los componentes. Ahora bien, si todavía no has aprendido de esto, lo voy a explicar muy fácilmente y simplemente los componentes son elementos de diseño que creamos en Figma que se nos permite usar una y otra vez Y básicamente tenemos una relación de un componente padre y un componente hijo. Básicamente es un elemento que podemos copiar y ponerlo en múltiples instancias. Pero siempre está la versión original. Y una vez que cambies la versión original, puede cambiar todas las demás instancias. Eso significa que si tienes un botón y luego decides hacer que el botón sea amarillo en lugar de verde, solo tienes que hacerlo una vez. No es necesario cambiar el botón en cada página. Eso es sólo un ejemplo y vas a entender esto mejor a medida que avancemos. Hablando de botones, tomemos eso como ejemplo por ahora. Sigamos adelante y creamos un botón muy rápidamente. Sólo voy a conseguir la herramienta de texto y voy a hacer click una vez y voy a escribir botón. Ahora tenemos un elemento de texto. Voy a convertirlo en un marco, así que voy a sostener Shift y A. Eso básicamente lo convierte en un marco con un diseño automático. Entonces ya tiene algunos valores puestos. Podemos cambiar estos valores según nuestras propias preferencias. Vamos a darle un relleno. Voy a darle un relleno. Voy a hacer algo azul. ¿También podría ser morado? No hay problema con eso. Solo tienes que asegurarte de que el texto sea legible, que puedas leer el texto si es blanco o si debe ser negro, depende de ti. Ahora podemos perder el tiempo con algunos de los valores al principio. Podemos hacer que sea un poco el relleno a la derecha y a la izquierda un poco más y luego hacerlo de arriba y abajo un poco más apretado, más pequeño Entonces también podemos hacerlo un poco más redondo. Diez u ocho. De veras depende de nosotros. Esto ahora mismo es un botón. Pero por lo general, cuando se trata de diseño, nos gustaría tener, como dije, un componente. Así que una versión original que podemos controlar o todas las demás versiones a través. Aquí lo tenemos llamado frame one. Vas a ir aquí y dar clic en Crear componente. Ahora esto es supuestamente un componente, y se llama frame one. Sólo vamos a llamarlo botón. Y ahora que tenemos este botón, es genial. Es genial, pero cómo se ve este botón con efecto AHver o cómo se ve con una flecha, con un emoji con muchas cosas Necesitamos diferentes variaciones de este botón. La forma en que podríamos hacer esto es que podríamos crear una variante. Damos click aquí y llegamos a este botón aquí. Dice agregar variante. Con sólo hacer clic en él, se agrega otra variante, básicamente otra versión o una variación de la misma. Esto está en el guión original. Estos son los originales, una vez que tomas este botón, quiero decir, esta versión del mismo, cópialo, Control C, y luego lo pegas Ahora bien, este es un componente hijo. Probablemente ya lo sepas si estás familiarizado con Figma. Se puede ver que aquí esta es una plaza ahuecada. Eso significa que este es básicamente el componente hijo. Entonces aquí tenemos el componente principal. Como puedes ver aquí, cuando cambiemos el color, el color va a cambiar también aquí. Pero esta es una segunda varianza, así que esto no está conectado a ella. Esto es diferente. Entonces así es básicamente como funciona. Así podrás tener el botón original y afecta a todas las demás variaciones. Puedes tener múltiples copias, y todas serán cambiadas. ¿Bien? Entonces ahora que tenemos eso escrito, lo entendemos. Sigamos adelante y sigamos haciendo nuestro trabajo. Así que nos gustaría crear aquí una variante diferente. No voy a entrar en los detalles del prototipado, así que sólo voy a dejar eso a un lado por ahora Pero normalmente cuando tenemos un efecto hover, suele ser un poco más oscuro Simplemente haciéndola súper fácil, puedes agregar un 20% o 30% de color negro, o podrías hacerlo más ligero también. Esa también es una posibilidad. Alternativamente, también podrías simplemente cambiar el color desde aquí. A veces puedes conseguirlo más hacia tu preferencia desde estos botones porque es más fácil elegir el tono exacto que quieras. A lo mejor podría hacer esto, tal vez incluso podría hacerlo más hacia el azul. Podría ponerse un poco más azul. Eso depende totalmente de mí. Ahora que he hecho esta variación hover, también puedo crear una variante de variación donde la hayamos presionado No solo pasamos el mouse, sino que hicimos clic en él. Puedes seguir adelante y crear otra variante o simplemente hacer clic en el más aquí, y luego podríamos hacer esto mucho más oscuro incluso. Como pueden ver, esta es una versión muy simplista. Podríamos agregar sombras, podríamos agregar bordes. Depende totalmente de ti cómo quieres estilizar esto. Pero solo estoy haciendo diferentes variantes pero manteniéndola simple para tu comprensión. Otra variante que podríamos crear es el botón activo. Entonces esta es una bastante habitual. Entonces básicamente, esto es para decir que este botón no está funcionando. Entonces, si estás lidiando con el modo de luz, básicamente mantendrías este gris, solo para demostrar que no está funcionando. Entonces solo para mostrarte cómo se vería. Voy a copiar todos estos, copiarlos, y voy a pegarlos aquí. Entonces así es básicamente como se vería, y se puede ver el gris se ve gris afuera que se ve inactivo mientras este se llena color y luego este se pone el cursor sobre y éste se presiona Para que puedas ver los significados a través de los colores. Y aquí, la legibilidad tal vez no sea tan importante porque de todos modos no puedes elegir este botón Pero podemos seguir adelante y hacer de esto, por ejemplo, ya sabes, un gris más oscuro. Así que tiene un poco mejor de legibilidad y podríamos hacer el fondo un poco más ligero también. Sí, esto parece más inactivo. Ahora, solo como nota, puedes cambiar el componente hijo, así puedes decir, ¿sabes qué? Voy a hacer de esto un amarillo, ¿de acuerdo? Y qué pasa cuando haces esto, cuando cambias el componente padre, no va a cambiar nada. Así que básicamente has sobrescrito esta propiedad. Has decidido que esta propiedad, el color ahora va a ser desconectado del componente principal. Y así ahora es como un hijo legítimo. No va a seguir ni seguir siguiendo al padre de familia, va a ir a su manera. Entonces, cuando se trata del texto, todavía lo va a seguir. Cuando se trata del relleno, podemos cambiar el relleno, sigue siguiéndolo. Es solo la calidad que cambias. Así que ten cuidado. Asegúrate de no estar cambiando cualidades sin saberlo. Intenta cambiarlos aquí porque como dije, este debería ser el texto original, la obra original, y entonces esto simplemente debería seguirlo. De lo contrario, tendrás múltiples variaciones con diferentes colores y eso va a estropear las cosas. Por lo general, los componentes se utilizan para mantener el orden. Se utilizan para que puedas hacer un seguimiento de lo que estás haciendo. No quieres tener 1 millón a colores del botón. No, quieres tener los originales y luego se usan en tu diseño de diferentes maneras Creo que hasta ahora está claro, pero tenemos que entender, bien, tenemos todas estas versiones. Tenemos que entender ahora y si queremos expandirlos. Por lo general, tienes un botón primario, y luego desde el botón principal, tal vez tengas un color diferente. Sigamos adelante y hagamos eso. Voy a copiar todos estos, copiarlos y pegarlos. Los estoy pegando dentro de esta zona. Eso significa que también son variantes. Se puede ver la variante cinco, seis, siete, ocho. Ahora voy a cambiar el color. Voy a decir, ¿sabes qué? Algo de amarillo es limpio. Pero si hacemos amarillo, entonces tenemos que hacer negro para el botón. Bonito. Veamos cómo se ve aquí y no se ve tan mal. Ahora bien, esto debería seguir su ejemplo. Voy a elegir este amarillo. Voy a hacerlo y tal vez llevarlo un poco hacia el naranja. Ese es el sombreado. Como dije, depende de usted. hacerlo más ligero, puedes hacerlo. Puedes hacerlo lo que quieras, depende de ti y yo voy a hacer esto negro. A lo mejor puedas cambiar, hacer esto mucho más brillante y luego hacer esto también más brillante. Entonces aquí, voy a elegir el mismo color hacerla aún un poco más oscura, más anaranjada. Como dije, nuestro trabajo aquí para hoy en esta lección no es ver la interacción, solo estamos averiguando el componente Entonces aquí, tal vez también podría ser calificar de la misma manera. No tiene que ser tan especial. No tenemos que diferenciar entre estos dos. Depende de nosotros. Pero ahora tenemos un problema porque a esto se le llama variante ocho, esto se le llama variante siete, seis, no sé, están por todas partes. Necesitamos encontrar un sistema que básicamente les nombre. Entienderlos. Entonces esto es cuando se trata de organizar tu componente porque a medida que sigues expandiéndote, tienes diferentes variantes y demás y hay que hacer un seguimiento de ellas. Esto es lo que voy a hacer. Voy a decir, estos son los botones primarios y estos son los secundarios. Lo que vas a hacer es que vas a escoger todos estos, vas a escribir para propiedad uno, secundaria. Y luego la propiedad, vas a decir tipo. Este es el tipo de botón. Estos son secundarios. Te va a decir que las propiedades y valores de estas variantes son contradictorias. Cambie los valores aplicados en esta variante para resolverlo. El tema es, todos estos son secundarios, secundarios, secundarios. Figma no lo entiende diciendo: Oye, no puedes hacer que todos sean secundarios, pero eso lo vamos a resolver en un segundo Ahora llamemos a todos estos primarios. Primaria. Ves que este tipo de variable es primaria y todas ellas son secundarias. Pero también hay una diferencia. Quiero decir, estos son los estados Hover, y estos son los estados presionados, y estos son los estados inactivos, y estos son los estados activos Entonces, ¿cómo diferenciamos estos? Bueno, podemos hacerlo de la siguiente manera. Entonces lo que podemos hacer es que podemos venir aquí. Quiero decir, así es como lo hago. Probablemente haya diferentes formas de hacerlo. Puedo ir al nombre. Voy a añadir una coma y escribiré estado Activo. Y así esto va a estar activo. Entonces voy a elegir ambos y escribir, de nuevo, activo. Voy a elegir estos y voy a escribir Hubbard, estos y escribir prensa, y estos, voy a llamarlos inactivos. Bien. Entonces ahora esta notificación desaparece porque la FIMA se ha dado cuenta, tenemos esto bajo control, entendemos la diferenciación, y se puede ver que los nombres son todos diferentes ahora Ninguno de los nombres se está repitiendo, ¿verdad? Y lo que es genial es que cuando vengas aquí al componente infantil, puedes seguir adelante y cambiarlos. Puedes cambiar lo que quieras, ya sea activo, hover, presionado, inactivo Tienes acceso a todas estas variaciones, y puedes elegirlas de este menú desplegable. ¿Correcto? Entonces así es como básicamente puedes organizar básicamente tus componentes dentro de una variante. Entonces así es básicamente como puedes organizar tu varianza dentro de un componente. Ahora, hay más que eso. Como mencioné, tal vez alguien venga y diga: Oye, quiero agregar, ya sabes, una flecha. Eso estaría muy bien, pero no todo el tiempo. A veces quiero tener una flecha. A veces no quiero tener una flecha, ¿verdad? A veces, ya sabes, las flechas a la derecha, a veces a la izquierda. A ver. ¿Bien? Entonces, antes que nada, vamos a crear una flecha muy simplista Así que solo escogí la herramienta de línea aquí, y voy a extender la línea y puedo venir aquí y decir flecha de línea y en el otro lado, voy a hacerlo alrededor. Entonces es muy simplista y encaja bien. Voy a cortar este Control X, y voy a agregar esto aquí. Bastante bien, ¿verdad? Bueno, vamos a deshacer eso. Yo quiero hacerlo a todos estos. Lo que voy a hacer es que voy a recogerlos a todos, y voy a controlar la pasta. Ahora está pegado por todas partes. Pero es un poco desordenado. Tenemos que resolverlo. Tenemos que organizarlo. Yo solo voy a alejar estos y voy a elegir esta flecha y esta y esta y esta y esta. Voy a hacerlas, en realidad, no esta. Voy a elegir éste, éste, éste, voy a hacerlos blancos solo para que coincidan. Ahora, estos, voy a darles el color de este gris oscuro. Ahí vamos. Todo bien. Ahora también podemos ajustar otras cosas. Quiero decir, la distancia entre ellos podría ser un poco menor, tal vez cuatro, y creo que ya es bastante buena. Pero como mencionamos, no queremos que eso suceda todo el tiempo. No queremos que siempre tenga esa cosita. ¿Qué podemos hacer al respecto? No queremos que siempre tenga una flecha. Aquí hay un pequeño truco pulcro. Escoge la flecha. Ahora mismo hicimos clic en la flecha Y entonces lo que podemos hacer al respecto es que podemos seguir adelante y hacer clic en este pequeño botón, que dice, aplicar propiedad variable, y luego hacer clic en el más y se va a agregar una propiedad llamada Mostrar línea dos. Sólo voy a hacer que muestre error. Ahora mismo se establece como cierto, pero voy a seguir adelante y hacerlo falso. Voy a crear la propiedad. Como pueden ver, ahora lo que pasó es que no hay flecha. No hay ninguna flecha disponible aquí, pero aún está dentro del elemento. Es solo que tienes que alternar si quieres que se muestre o no. Te voy a mostrar dónde está. Está justo aquí. Ahora tenemos un toggle llamado show arrow. Cuando hacemos clic en él, está ahí. Cuando lo quitamos, no está ahí. Pero tenemos un problema porque solo está disponible en esta variante, no en las otras. Entonces lo que podemos hacer al respecto es que podemos venir aquí podemos elegir esto y luego podemos agregar la variable aquí y se puede ver que ya está en las propiedades. Simplemente puede hacer clic en él aquí. Voy a enjuagar y repetir. Voy a elegir todas las flechas aquí. Y les voy a dar la misma propiedad. Haga clic aquí, mostrar flecha, falso. Ahora todos estos tienen este toggle. Puedes agregarles una flecha si lo deseas, o puedes eliminarla. Ahora realmente estamos personalizando nuestros botones en una dirección que me gusta mucho Podemos ir un paso más allá. ¿Qué podemos hacer? Bueno, podemos copiarlos, pegarlos todos, ponerlos aquí. Pero lo que vamos a hacer es que vamos a hacer botones fantasmas. Los botones fantasma son básicamente botones que solo tienen bordes. Vamos a copiar este código hexadecimal de este color, eliminarlo, y aquí, un trazo, enjuagar y repetir solo haz lo mismo para las otras variaciones o depende de ti. Puedes ajustarlo como quieras. Debido a que este es el hover, podría ser que sea un botón fantasma y luego cuando pasas el cursor sobre él, se llena, y luego cuando lo presionas, se vuelve así, depende totalmente de ti, pero podemos cambiar la versión inactiva Así que así. Aquí vamos a hacer lo mismo, voy a copiar esto. Pon el trazo aquí y lo mismo aquí. Copia el código hexadecimal, ponlo en el trazo. Ahora tenemos lo que llamamos botones fantasma y ellos tienen su propio hover presionado y una variante activa Lo que vamos a hacer es que vamos a hacer algo similar. Entonces vamos a seguir adelante con el nombre y vamos a hacer clic en coma y luego vamos a decir Ghost es igual a sí Vamos a elegir todos estos aquí y todos estos aquí. Mientras sostiene Shift, puedes elegir muchos quiero decir, muchos elementos a la vez, y vamos a decir fantasma sí, y vamos a elegir estos y estos y escribir no. Ahora, presta atención. Cuando escribes no con una N o una O o algo así, va a aparecer como un valor diferente, asegúrate de escribirlo de la misma manera. Ahora cuando vengamos aquí, vas a ver que ese fantasma también se convirtió en un botón de alternar. Puedes activarlo o desactivarlo o desactivarlo. En cada pequeña variante aquí, puedes hacerlos botones fantasma o no. Pero puedes ver nuestro error aquí. Hicimos de esto un botón fantasma, pero el texto es blanco. Tenemos que arreglar esto. La manera de hacerlo es venir aquí, podemos hacer esto negro. Podemos hacer que el texto sea negro o podemos hacerlo morado. Veamos ahora. Ahí vamos. Así como así. Ahora hemos aprendido a crear no sólo un componente, sino muchas variantes del mismo componente. Aprendemos a hacer versiones hover. Quiero decir, variantes de hover, aprendemos a hacer varianza presionada inactiva varianza Aprendemos a hacer variantes fantasma. Si prestas atención, esto es algo así como una mesa, y te lo puedo demostrar. Básicamente, estas son las versiones activas. Esto podría facilitarte las cosas. Las variantes activas aquí tenemos el hover, varianza, y aquí tenemos la varianza presionada y aquí activa Básicamente es una tabla con columnas y filas y aquí podemos hacer lo mismo. Aquí tenemos primaria, y luego la siguiente es fantasma primaria. Yo sólo voy a escribir P fantasma, y luego secundaria, y luego S fantasma. Y así sucesivamente y así sucesivamente. Puedes seguir creando muchas variables diferentes aquí para asegurarte de que tus botones tengan diferentes looks y diferentes aspectos a ellos. Esto te permite cuando estás diseñando, no ahorrar algo de tiempo en lugar de pensar, ¿de qué color debería ser este? ¿Qué tipo de interacción prototipo debo tener? ¿Debería ser fantasma o no fantasma? No, no hace falta que hagas eso. Ya tienes todas las variantes posibles dentro de tu diseño. Sé que esto podría parecer mucho, pero en realidad no es porque se trate de estados de flotación, estados prensa y estados activos, y así sucesivamente Entonces parece que es mucho, pero en realidad no lo es. Así que tenlo en mente. Ahora tenemos una cosa más que discutir. Esto es bastante interesante. Se llama componentes anidados. Ahora los componentes anidados son básicamente componentes dentro de los componentes. ¿Cómo funciona eso? Bueno, déjame aclarar un poco. Lo que podemos hacer es decir, ya sabes, bueno, a veces me gustaría tener una flecha, ¿verdad? Pero otras veces me gustaría tener otro elemento. A lo mejor podría ser algo diferente en lugar de una flecha o podría ser una flecha a la derecha hacia arriba, hacia abajo. Depende de mí. Podría ser un icono. Podrían ser muchas cosas diferentes. Así que nos gustaría agregar algunos iconos aquí. ¿Cómo vamos con eso? Bueno, podemos seguir adelante y buscar algunos plugins. Entonces ya hay un plugin llamado símbolos de material proporcionado por Google. Entonces nos ayuda solo a obtener sus íconos básicos, y sí, solo cosas muy simples. Entonces lo que podemos hacer es recoger algunos de ellos aquí. Sólo voy a elegir algunos de ellos. A lo mejor podríamos tener un ícono más. Um, podríamos tener un icono de cámara, y vamos a tener un icono de cuenta. Sé que no los puedes ver porque tienen diferente color. Entonces voy a seguir adelante y hacerlos un poco más pequeños. Veamos cómo se ven aquí. Sí, creo que ya es suficiente. Voy a seguir adelante y crear A frame dentro de su tamaño. Voy a darle un color, quizá rojo por ahora. Voy a hacer de esto un componente, y voy a agregarle esto, asegurarme de que esté centrado vertical y horizontalmente. No está muy centrado, pero está bien. Cuando se trata de elementos muy pequeños, es difícil centrarlos, no te preocupes por eso. Podemos crear ahora otra variante de la misma. En lugar de este plus, voy a eliminarlo. En lugar de este plus, voy a tener esta foto, esta cámara y vamos a agregar otra y hacer lo mismo. En lugar del plus, voy a eliminarlo por completo y luego agregar este icono de cuenta y luego agregar este de aquí, pegarlo Bb. Ahora, solo necesitaba el rojo solo para poder ver el color correctamente y pueda ver el marco, pero ya no lo necesito, así que solo voy a quitar el color rojo. Ahora podemos llamar a este icono o Glifo o como quieras llamarlo. Entonces podemos traer esto aquí. Y agrégalo al botón. Así como así, tenemos un icono dentro del botón. Ahora, me gustaría agregarlo a todos ellos a la vez. Sólo voy a copiarlo y voy a elegirlos a todos, y voy a pegarlo. Así como hago eso, inmediatamente antes de hacer algo, voy a seguir adelante y elegir de aquí. Aplicar propiedad, no mostrar flecha, va a ser mostrar icono. Mostrar icono. Por ahora, voy a dejar que sea verdad sólo por ahora. Entonces puedo seguir adelante y ajustarlo. Aquí, el botón es negro, por lo que debería ser negro y lo mismo aquí. Todos los botones aquí son negros, los iconos deben seguir los botones. No es una regla, pero creo que es bueno seguir. Mantener turno y elegir todos ellos. Aquí voy a copiar el código. Entonces ahora que los colores están todos ordenados, aunque los botones estén fuera de lugar, voy a seguir adelante y elegir este plus y voy a hacer clic por aquí, seleccionar capas coincidentes, y va a seleccionar todas las ventajas, todos los iconos de todas estas variantes Entonces tenemos este ícono de show, podemos ver que está mostrando el ícono. Ahora que los tengo todos elegidos, voy a dar click aquí, ir a la propiedad, y voy a hacerla falsa, no va a mostrar icono automáticamente. Eso significa que si me gustaría, puedo mostrar una flecha o puedo mostrar un icono. Lo que es aún más genial de lo que hicimos con este elemento anidado, colocamos un elemento, un componente de icono dentro los componentes de botón. Ahora puedo elegir esto. Puedo elegir esto aquí y puedo ir aquí y cambiar la variante. Puedo convertirlo en un ícono diferente. Aquí podría ser subir imagen, aquí podría ser iniciar sesión o crear cuenta. Aquí podría ser marcador. Ahora tenemos muchos íconos que podemos usar o simplemente podemos eliminarlos u ocultarlos. Ahora, una cosa que hay que saber es una cosa importante es que tenemos que etiquetarlas. Cuando venimos aquí, podemos decir tipo y podemos decir, esto es ad o plus. Aquí se puede decir cámara, más miembro o usuario. Y marcador. Así que ahora es mucho más fácil saber qué icono exacto estás usando cuando vas a bajar por esta lista. Sobre todo si tienes una biblioteca grande y tienes muchos íconos, esto viene muy útil porque puedes entender, Bien, esto es marcador, esto es usuario, en lugar de tener que hacer clic en él y ver qué es la variante número 27. ¿Bien? Entonces así es básicamente como funciona con estos elementos anidados Entonces solo para recapitular, comenzamos con un botón, solo un componente, y luego hicimos diferentes variantes del mismo, así que flotar variante, variante presionada y variante inactiva A partir de ahí, hicimos variante secundaria, y luego comenzamos a aprender las convenciones de nomenclatura, entonces cómo crear diferentes propiedades Entonces primero empezamos con el tipo, entonces primaria y secundaria. Y luego nombramos a todos los tipos de estado, por lo que active hover pulsado y activo Y luego también configuramos la propiedad arrow. Entonces ahora pudimos establecer una propiedad y hacer que escondiera al principio o tal vez mostrarla Depende totalmente de ti y siempre tendrás la opción de activarlo o desactivarlo. Pero me gusta guardarlo para que al principio, solo tengas un botón, nada, sin íconos, sin errores, no nada. Puedes agregarlo más adelante si quieres, pero depende de ti. Después aprendimos a crear componentes anidados. Así que básicamente crea emojis como ejemplo, emojis, iconos, glifos, lo que quieras, y puedes agregarlos a tu botón, y luego puedes activarlos o apagarlos, y luego puedes cambiar el tipo de icono que Es así de simple. Lo bueno es que si tienes interacciones entre estos botones, si este botón realmente tiene un efecto hover, presionar efecto, y puedes configurarlo, y esto es algo que vamos a ver en las próximas lecciones, conservará las mismas propiedades Tendrá el mismo emoji, el mismo icono porque lo configuramos aquí para que tenga un icono. Entonces en la variación hover, también va a tener el mismo icono En la variación presionada, va a tener el mismo icono. Y así sucesivamente y así sucesivamente. Esta es la forma más sencilla de explicar cómo funcionan los componentes. Pero si entiendes esto, entonces serás un maestro. Podrás crear componentes suavemente sin fricción, sin problemas. Pero lo más importante es que prestes atención a trabajar manera limpia porque crear un sistema de diseño, crear un archivo de diseño en figma, grande o pequeño que sea, puede volverse caótico muy rápidamente Por eso siempre es importante definir de manera limpia y clara tus propiedades, tus botones, porque esto no solo te va a ayudar a medida que diseñas, también va a ayudar a los desarrolladores que van a tomar tu diseño y convertirlo en realidad. Entonces vamos a hablar un poco más de componentes en las próximas lecciones, pero será más en segundo plano. Hasta el momento, debes tener todo el conocimiento que necesites para crear componentes. Ahora hay muchas más posibilidades con estos. Puedes crear efectos que sean puedes crear muchas variantes diferentes con diferentes variables y así sucesivamente. Así que adelante y pruébalo. Espero que aprendas algo, y te veré en las próximas lecciones. 5. Variables y modos: Hola y bienvenidos a otra lección del curso avanzado de Figma En esta lección, vamos a hablar variables, modos y estilos. Ahora bien, todos estos son conceptos diferentes de los que vamos a hablar de los que quizás hayas escuchado. También existen en el mundo del desarrollo. Entonces, si vienes de una formación en ingeniería o sabes un poco sobre codificación, entonces probablemente hayas escuchado componentes o tokens y variables, entiendes cómo interactúan entre sí. Eso es básicamente lo que estamos haciendo hoy aquí. Para explicar esto muy simples las variables son cosas que no son constantes. Están cambiando. Entonces podría ser un número, podría ser un número. Una vez este número es diez, una por 20, una por 30. Entonces, sólo por darte un ejemplo, tu edad es una variable que cambia cada año, ¿verdad? Entonces puede cambiar cada año que al principio, tu edad sea uno y luego dos y luego tres hasta que estés en tus 20, 30 años, sigue cambiando contigo y depende otras circunstancias como el paso del tiempo. Lo mismo aquí se aplica en figma, es un poco diferente Así que tenemos múltiples tipos de variables diferentes. La forma de acceder a ellos es deseleccionar todo e ir aquí a las variables Da click aquí y encontrarás que no tienes variables en tu colección. Simplemente siga adelante y haga clic en Crear. Entonces vas a ver que están estos cuatro tipos diferentes, variables de color. Para que puedas tener una variable que sea un color específico. Entonces tienes morado aquí, tienes amarillo, tienes otro color sea un número que cambie, como hablamos de edad, por ejemplo, o podría ser una cuerda. Las cadenas podrían ser un texto, por ejemplo, y el booleano es algo un poco más avanzado, así que vamos a mantener eso para adelante y comencemos con el color ya que creo que esta es la variable más práctica que puedes usar en Figma, y también es la más fácil de explicar primero es lo primero, este es un diseño que hice antes y es solo un ejemplo. No es un diseño real para una app real, pero podemos usarla para nuestros propósitos. Lo primero que ves aquí es que hay un esquema de color específico. Aquí tienes el color púrpura. Hay una versión más clara, una versión más oscura, hay algunos gradientes. También hay amarillo, y aquí están estos colores. El color más importante aquí que tenemos es el color primario, que es el púrpura. Podrías nombrarlo primario, podrías llamarlo morado. Realmente depende de ti, pero me gusta mantener las cosas en la primaria secundaria, me gustaría llamarlas así solo para que quede extra claro. Podemos seguir adelante y seleccionarlo desde aquí y podemos elegir esta primaria. Ahora mismo tenemos eso como variable. Podemos seguir adelante y crear otro, podrías llamarlo luz primaria. Entonces esta es la versión más ligera de esta primaria, y luego podemos elegirla aquí. Podemos elegir esta. Así que ahora esta es la versión primaria más ligera, ¿de acuerdo? Podemos crear una secundaria. Entonces la variable secundaria es la amarilla. Ahora aquí, ya sabes, solo lo estamos recogiendo más o menos aleatoriamente, pero podemos elegir este, por ejemplo, eso sería más exacto. Y también podemos tener una versión más oscura, secundaria ya sabes, básicamente depende de lo que estés viendo aquí. Aquí veo que aquí hay una versión más oscura, así que solo voy a hacer clic en I y usar la herramienta de caída de ojos para seleccionarla. También podemos hacerlo así o podemos hacerlo aquí se puede ver luz primaria, oscuridad secundaria. Podemos cambiarlo, hacerlo tanto primario, oscuro, secundario oscuro. Depende de ti cómo quieres hacer esto. Podemos hacerlo ahora mismo. Esta podría ser nuestra primaria y esta es la versión oscura de la misma. Ahora ya tenemos esto resuelto. Podemos hacer mucho más. Podemos hacer antecedentes, por ejemplo. Esa es una buena. Antecedentes donde solo puedes escribir BG y seleccionar el fondo aquí. Es blanco, bastante simple, ¿verdad? Entonces ahora tenemos estas variables. Ahora bien, ¿cómo los usamos? Bueno, hay que conectar los colores aquí a estas variables. La forma de hacerlo es seleccionar el elemento. Ven aquí y en vez de elegir un relleno normal, vas a dar click en estos cuatro pequeños círculos, entonces vas a elegir la variable, que aquí es oscuridad primaria, solo haz click sobre eso. Ahora, una forma más fácil de hacerlo es seleccionar todo el marco e ir a los colores de selección y luego puedes elegirlos desde aquí. Aquí se puede ver el púrpura claro, es la luz primaria. Se puede ver este fondo blanco. Sólo voy a dar click aquí en PG. También hay otro aquí, pero esto es del 50%, presta atención a eso. Realmente no puedes agregar 50% a tus variables, así que tienes que dejar eso como está. Tenemos mucho más. Ahora degradados, no puedes tenerlos como variables Es bastante triste porque fastidia con nuestro sistema. Lo que voy a hacer ahora mismo es otro que estos, voy a cambiar todos los gradientes o la mayoría de ellos, y voy a hacerlos colores normales solo para que esto sea un poco más fácil Voy a hacer de esta nuestra secundaria y voy a hacer de esta nuestra primaria, escogiendo cosas. Se puede ver que hay negro y ahí está este gris así que sólo voy a escribir. Gris, Negro. Esto es negro absoluto. Y voy a seleccionar de nuevo el marco. Voy a elegir el negro para éste. Voy a convertir esto también en negro. Es decir, es gris oscuro, pero lo haré negro. Puedes preguntarte, dónde se encuentra esto y puedes presionar aquí y puedes ver que estos son de este color, por ejemplo. No lo veo bien, estas son las líneas. Podemos hacer estas grises, creo, pero eso es demasiado gris, así que voy a crear gris claro. Entonces como puedes ver, es un proceso. Se trata de entender, ¿qué colores tenemos? ¿Qué color necesitamos? Y entonces, así que aquí, hay un entendimiento. Entonces estos son diferentes tonos de gris, y ahora podemos hacer estos grises claros. Ahora, seleccionaremos de nuevo, iremos a los colores de selección, y se puede ver que quedan algunos. Quiero decir, podemos hacer esto simplemente gris. Esto también solo gris. Y estos otros, veamos qué podemos hacer al respecto. Creo que algunos de estos solo podemos mantener como están. Sí, no necesitamos cambiarlo todo. Ahora tenemos todas estas configuraciones. Lo que es realmente genial de las variables es que al igual que hablamos de componentes, tener un componente padre que controla todos los demás componentes hijos. Aquí tenemos el mismo concepto. Entonces lo que puedes hacer aquí es que puedes decir, ¿sabes qué? Decidí cambiar todo el esquema. En lugar de púrpura, quiero que sea azul. Puedes seguir adelante y hacer este azul, tienes que hacer esto también azul más oscuro, y luego puedes hacer este naranja si quieres. Haz esto también naranja. Así como así, aquí cambiamos muchos colores, ¿de acuerdo? Entonces las cartas, las dejamos ser porque estas son cartas y tienen gradientes, lo cual es difícil de cambiar Pero todo lo demás, los colores principales que tenemos aquí, los primarios aquí se han cambiado mayormente. Aparte de éste, porque también esto es un gradiente, pero quiero decir, también podríamos hacer este cambio esto o no tenemos que hacerlo. Entonces voy a seguir adelante y solo presionar Control Z y volver a poner todo a donde estaba. Pero esto es sólo un ejemplo para mostrarte lo que podrías hacer con estas variables. Así que eso es genial. Entonces eso es una cosa que puedes hacer. Ahora, les voy a mostrar lo que podemos hacer con otro tipo de variables. Voy a crear una variable de número. Voy a dejarlo abajo sólo para crear una buena separación entre ellos. No quiero que se mezclen. Cuando se trata del número, esto es un poco más interesante. Con números, se trata de valores y podrías preguntar, ¿para qué necesito eso? Bueno, una cosa que podrías usar es que podrías usarla para espaciar, por ejemplo. Si nota que la mayoría de estos están dentro diseños de auto y los diseños Auto generalmente tienen espaciado. Se puede ver aquí hay 16. Se puede ver aquí son 24, aquí es Auto. Aquí tienes cero, pero entre estos, es auto. Aquí son siete, por ejemplo, entonces la cosa es, quiero decir, aquí hay siete, aquí, son 12. Entonces aquí tenemos mucha inconsistencia. Esto es cero, esto es siete, esto es 12. Entonces eso es algo que podemos tratar de eliminar. Entonces podríamos decir, Bien, hagamos que el espaciado entre texto y elementos sea ocho, ¿verdad? Entonces no sé, podemos llamarlo exactamente ese elemento de texto o algo así, y podemos llamarlo ocho, ¿verdad? Y entonces lo que vamos a hacer es que vamos a venir aquí y vamos a llegar al espaciado aquí. Lo siento, esto no es cero, esto es cinco. Así que en vez de tenerlo como cinco, vamos a hacer click sobre esta flecha aquí y vamos a hacer clic en Aplicar variable vamos a elegir texto más elemento. Ahora está configurado como ocho, pero no sólo como ocho. Este es un elemento, por lo que está conectado aquí. Yo solo voy a aplicar esta misma cosa aquí, aplicar variable y luego elegir la variable que acabamos de hacer. Aplicar variable. Ooh. Ahora lo tenemos configurado. Es lindo es si decidimos, espera un minuto. Esto es especialmente importante porque cuando tienes clientes, los clientes siempre van a quejarse, van a tener sus propios comentarios, y van a decir, Oye, el espaciado aquí no se ve tan bien o tal vez tus compañeros de diseño o jefe o quien sea, podrían decir el doble de eso, hacer que duplique el espaciado. Todo lo que tienes que hacer es llegar a tu ventana de variables aquí y solo necesitas cambiar eso de aquí. Simplemente haces clic en 16 y prohibirlo ha cambiado por todas partes. Pero entonces notaremos, oh, no, ahora, no se puede decir que sus tarjetas están relacionadas con el elemento arriba o el de abajo porque está justo en el medio. Volvamos a ponerlo, Control Z. Bam, se pone de nuevo así así Podemos hacer esto y repetirlo mucho para muchas cosas diferentes, ¿de acuerdo? Pero se puede decir para espaciado, podemos usarlo para muchas cosas. Pero lo que es aún más genial es que puedes venir aquí. Y puedes elegir este ícono de ajuste o edición y puedes venir aquí al alcance. Ahora en este ámbito, puede elegir dónde se mostrará esta variable. Ahora, queríamos que esto se usara principalmente para brechas, diseños de auto. No es un contenido de texto, no es un radio de esquina, no es ancho y alto, no es ninguno de estos. Entonces básicamente, podemos simplemente deshacer esto y luego lo va a quitar en todas las propiedades y solo lo vamos a tener adentro Entonces cuando venimos aquí a otro elemento, por ejemplo, veamos. Quiero decir, apoplejía. Entonces, si aquí agregamos un trazo y podemos decir, ¿ veamos qué tipo de variables tenemos? No tenemos ninguna variable creada en este archivo, y eso es exactamente lo que queríamos. Podemos agregarlo aquí, y luego ahora lo tenemos por aquí. Pero no necesitamos hacerlo. ¿Bien? Entonces es sólo para entender que este texto más elemento sólo está destinado a brechas. Podemos seguir adelante y podemos quitar el trazo aquí. Podemos crear otro y podemos decir radio. Radio de esquina para perdón, acabo de crear una variable de color. Sólo voy a borrarlo. Entonces vamos a crear un número uno, y vamos a llamarlo radio de esquina o simplemente radio. Voy a ver qué tipo de radio tenemos aquí? Son 16, aquí, son 16. Yo sólo voy a escribir 16. Y voy a elegir todos estos. Quiero decir, idealmente, cuando trabajas de manera limpia, ya deberías haber hecho esto como primer paso, ¿de acuerdo? Entonces ahora venimos aquí, da clic en él y escoge radio, bam, está configurado. Si elegimos que solo tenga esquinas afiladas, podemos simplemente hacer este cero y boom, ahora está configurado un cero, como pueden ver. Así como así. Quiero decir, no todos los elementos, pero entiendes la idea. Como dijimos antes, podemos comprobar el alcance y podemos hacer desmarcar todo y decir que esto es sólo para radio de esquina Esta es una característica bastante genial que puedes usar para todas estas cosas. Se puede usar para trazo, para texto, para efecto, para altura de línea, para muchas cosas. No hay que restringirlo. mantenerlo en todas las propiedades compatibles, pero luego va a ser bastante desordenado Bien, entonces eso es lo que puedes hacer con estas variables numéricas. Y luego tenemos variables de cadena. Ahora bien, las variables de cadena son un poco menos útiles, en mi opinión, pero a lo mejor no la estoy usando al máximo. Entonces las variables de cadena son básicamente variables que deciden qué texto tienes. Entonces cuando tienes texto aquí, por ejemplo, tienes un número, ¿verdad? Puedes hacer click aquí. Y puedes optar por tenerlo como valor de cadena. El valor de cadena en este momento es el valor de cadena, pero se puede decir que esto es $100 y eso va a cambiarlo. Ahora bien, esto es bueno para diferentes propósitos, pero básicamente es bueno si quieres tener el mismo número o el mismo texto en muchos lugares diferentes. Entonces en lugar de tener que cambiarlos una y otra vez, solo puedes hacer que se queden en un lugar así. Esto es cuando se trata de variables de cadena. Ahora me gustaría seguir adelante y explorar lo que llamamos modos. Modos es otro lado de esta característica, una adición, una extensión a esta característica, que es realmente genial. Y básicamente, se ven todas estas variables que hicimos. Aquí hay una mesa. Esta es en realidad una tabla que podemos extender, y tenemos esta columna, pero podemos agregar otra, y eso es lo que se llama un modo. Entonces ahora tenemos dos modos, el modo uno y el modo dos. Ahora bien, hay muchos usos diferentes para esto, ¿verdad? Pero el uso principal o uno de los mejores usos que encuentro es crear diferentes modos o diferentes esquemas de color o modo día y modo luz diurna o modo noche, ¿verdad? Entonces podemos decir que esto es de día. Y esto es de noche. Ahora tenemos estos dos modos. Lo genial es que podemos ver justo frente a nosotros cómo podemos elegir estos diferentes modos y mostrarlos de manera diferente. Voy a copiar este tablero. Voy a copiarlo y pegarlo. Voy a copiarlo y pegarlo aquí mismo. Voy a venir aquí, ya ves esta apariencia. Vas a hacer clic en Aplicar modo variable, Colección uno, y voy a hacer clic en Noche. Ahora volvamos a nuestra ventana de variables. Lo que vamos a hacer es que vamos a cambiar la combinación de colores. Vamos a revertir algunos de estos colores, especialmente los blancos y los negros y los grises . Vamos a revertirlos. Todo el negro debería ser ahora blanco y todo el blanco debe ser negro. No tiene que ser completamente negra. Puede ser un poco gris oscuro ish. El motivo es porque tenemos sombras que nos gustaría seguir mostrando aquí. Entonces podemos venir aquí y decir, para el gris claro, tiene que ser gris oscuro. Bien. A ver. Lo ves aquí. Mientras sea visible, entonces cumple su propósito, y entonces este gris debería ser más claro. Se puede ver que este es el texto. Este texto debe ser legible. Ahora invertimos estos. Ya se puede ver esto se ve bastante limpio. Está funcionando, pero en algunos lugares no está aquí, por ejemplo, aquí, no está funcionando porque el negro no funciona. Podemos tener múltiples soluciones. Una forma de resolver esto es asegurarse de que este texto blanco permanezca blanco. En su lugar puedes elegir esos en lugar de tenerlo conectado a este BG, podemos hacerlo simplemente siempre blanco. Esa es una forma de resolverlo. Otra forma de resolverlo es básicamente seguir adelante a esta oscuridad y básicamente, vamos a revertir estos. Vamos a hacer esta luz y tal vez incluso más ligera que eso. Entonces vamos a hacer esto bastante oscuro pero no demasiado oscuro. Ahora puedes ver que invertimos estos tonos también. Pero no siempre funciona de esa manera. No hay un método único porque ahora se podría decir, bueno, este es un morado completamente diferente a este. No tiene la misma identidad. Puede que tengas razón, y así podemos seguir adelante con nuestra otra solución de hacer esto simplemente blanco manualmente. Entonces este no cambia con los modos. Yo sólo me quedo blanco. Como regla general, cuando cambias la luz del día a modo oscuro a modo nocturno o modo oscuro, que quieres hacer es que puedas hacer algunos de los colores un poco más brillantes. Este morado no se ve tan bien cuando todavía está oscuro aquí. Es agradable hacerlo un poco más brillante y lo mismo con este. ¿Ves? Ahora parece consistente. No se ve tan raro, pero en realidad hemos hecho estos púrpuras mucho más ligeros, hay un propósito en eso Hay un propósito de visibilidad. Ahora, una cosa que podríamos hacer más es que podemos hacer estas sombras un poco más intensas porque ahora mismo son en su mayoría invisibles. No vemos la diferenciación. Una forma de hacerlo es básicamente elegir estos para que veas que aquí hay una sombra paralela. Entonces lo que vamos a hacer es que vamos a crear una variable y vamos a hacer una variable numérica y llamarla sombra. Podría ser que vamos a averiguar cuál debería ser esta variable. Entonces cuando abrimos el efecto de las sombras aquí, tenemos múltiples cosas. Tenemos desenfoque, tenemos posición, y nos hemos extendido. Ahora, veamos qué efectos tienen estos. Podemos hacer que se propague más. Podemos desdibujarlo más, podemos hacer que tenga más distancia, pero en realidad no podemos cambiar la opacidad, desafortunadamente Eso es algo que podemos cambiar con estos modos. Entonces tendríamos que elegir uno de estos elementos para conectarlo a la variable o tendríamos que simplemente cambiarlo manualmente. Depende más o menos de ti. Lo que puedo hacer es, como solución alternativa, también podríamos darles un trazo y darle una variable, así se puede decir, Stroke Y aquí, el trazo en modo normal, quiero decir, vamos a conectarlo. Vamos a darle trazo. ¿Bien? Podría ser gris muy claro. Y entonces cuando viene aquí, podría ser de color gris oscuro. Ahora bien, esta es generalmente una buena solución porque se asegura de que la sombra no sea tan invisible. Hace muy visible que se trata de elementos específicos, que se trata de tarjetas o cajas. Entonces cuando lo conviertes en modo oscuro, también sigue siendo visible. Es muy visible. Pero en lugar de confiar solo en las sombras, que son más difíciles de ver con el modo oscuro, confían más en estas fronteras, y aquí podemos hacer lo mismo. Podemos agregar un trazo y así así, ahora tenemos un trazo aquí y allá y para estos botones también. Entonces solo voy a agregarlo aquí. Y voy a tenerlos ahí también. Bien, entonces ahora tenemos dos modos diferentes, luz diurna y el modo nocturno o el modo oscuro. Como puedes ver, así es como puedes usar los modos a tu favor de una manera en que puedes convertir un diseño simple en dos tipos diferentes, dos esquemas de color diferentes. Es una característica bastante genial. Úsalo. Es decir, si lo necesitas, úsalo. Si no tienes que hacerlo. Pero lo que es genial es que siempre puedes perder el tiempo con esto. Siempre puedes seguir adelante y cambiar la apariencia a partir de aquí. Puedes cambiar de esto a aquello, o puedes recuperarlo. Depende totalmente de ti. Y déjame mostrarte un truco más. Entonces vas a seguir adelante, cerrar esta ventana e ir a crear una sección, crear una sección grande. Y entonces lo que vamos a hacer es que vamos a meter este tablero en él, y luego vamos a elegir la sección, venir aquí a la aparición, y hacerlo de noche. Y mira lo que va a pasar cuando saque esto de aquí. Se convierte en modo día o modo luz, y luego aquí está el modo oscuro. Este es un truco bastante pulcro, y es realmente agradable porque una vez que terminas todas tus pantallas, todos tus diseños, todo lo que tienes que hacer es poder duplicarlos y ponerlos en una sección como esta, y luego puedes ver exactamente cómo se vería en modo oscuro. Entonces así es como puedes usar variables a tu favor, como un maestro, como un profesional. Se pueden utilizar variables de color. Puede usar variables de cadena. También puedes usar una serie de variables, y puedes usarlas para el espaciado. Puedes usarlos para colores, cuerdas, cualquier cosa que realmente necesites. Funcionan como un encanto. Pero siempre existe esa pregunta. ¿Por qué necesito variables? Bueno, sí te expliqué un lado por qué lo necesitas porque antes que nada, oye, puedes cambiar muchas cosas de un solo lugar, una sola ventana que lo decide todo, ¿verdad? La segunda razón es que esto obviamente hace que tu flujo de trabajo sea más fácil, rápido, y te hace más fácil y más limpio saber lo que has hecho y qué colores has elegido en lugar de tener tus colores por todas partes, esta manera, está un poco mejor definido. Pero también está la pregunta, ¿por qué no debería simplemente usar estilos, verdad? Si no estás familiarizado con los estilos, lo tenemos aquí mismo. Los estilos son un concepto similar. Que permiten crear estilos de texto, estilos de color. Pero además de eso, también puedes tener estilos de efecto y guías de diseño. Ahora, déjenme decir esto. Quiero decir, las variables no son un reemplazo para los estilos. Solo trata de dejar que eso se hunda , trata de entenderlo. No es un reemplazo. Creo que en muchos lugares, las variables son lo correcto para usar, mientras que en otros, los estilos son mejores para usar. Bien, entonces déjame explicarte, antes que nada, si no sabes qué son las variables y qué son los estilos, ya te explicamos las variables, pero aprendamos qué son los estilos. Ahora, los estilos son formas más sencillas de usarlo para usar variables. Puedes seguir adelante y elegir un color y solo le das un color y puedes decir, esto es morado, voy a elegir esto como estilo. Se le puede dar un nombre. agregar una descripción si lo deseas. Pero lo bueno de esto es que puedes agregar múltiples colores diferentes dentro de un estilo. Eso es algo que las variables no pueden hacer y encima de eso, puedes crear un estilo que también sea un degradado. Eso es algo que las variables no pueden hacer todavía. Entonces cuando creamos un estilo de manera muy similar, simplemente hacemos clic en estas cuatro cajas, cuatro círculos, y podemos ver que estas son todas nuestras variables, y luego también tenemos estilos aquí mismo. Entonces esto es algo que está disponible para usar, y se usa de una manera muy similar a las variables. Entonces los estilos y variables son muy similares. Pero la diferencia radica en el hecho de que cuando se trata de estilos, no se pueden tener modos diferentes. Así que al igual que tienes variables aquí, tienes tus estilos todos aquí. Para que puedas cambiarlos desde un solo lugar. Si cambias de opinión y dices: Oye, quiero cambiar el esquema de color, quiero que sea azul. Eso se puede hacer. Eso se puede hacer. Y si tuviéramos el estilo configurado aquí, se vería reflejado aquí. Pero la idea es, sin embargo, que no se pueden tener modos. No se puede tener demde, modo oscuro, y así sucesivamente. Eso es una cosa, pero sí sobresalir en otras cosas. Entonces, cuando se trata de efectos, puedes agregar efectos completamente hechos. Puedes tener sombra paralela, puedes tener un número específico a la misma, una opacidad específica o color incluso Todas estas cosas son cosas que puedes configurar. Puedes cambiarlo a ruido o desenfoque de capa, una vez que lo configuraste no lo configuramos, pero agreguemos un efecto ahora y lo vamos a crear como un estilo. Ahora podemos seguir adelante y elegirlo de aquí. Efectos. Ahora tenemos sombra caída. Podemos asegurarnos de que todas nuestras sombras, por ejemplo, sean más o menos consistentes dentro del diseño. Las variables no pueden hacer eso. Ténganlo en mente. Tenemos todos nuestros estilos aquí también. Puedes ver los estilos de color, los estilos de efecto, y lo que es aún más genial son los textiles. Ahora tal vez recuerdes que dije, ya sabes, las variables de cadena son más o menos inútiles. Al menos no tengo un caso de uso sólido para ellos, y creo que la mayoría de los diseñadores no lo hacen porque muchas veces, ya sabes, no estamos tratando mucho con variables numéricas. No estamos tratando con variables de texto. Estamos tratando con colores y formas y esas cosas, y las variables de cadena no siempre son útiles cuando se trata de eso. Pero aquí, lo que puedes hacer es configurar estos estilos que se relacionan con la tipografía Entonces digamos que queremos mantener una tipografía consistente dentro del diseño Así que puedes ver aquí, la bienvenida de vuelta es regular. Ya sabes, es una fuente que es regular, y entonces esta es negrita y más grande, y luego esta es más pequeña, esta es negrita, esto es mucho más grande, y así sucesivamente y así sucesivamente. Así que tenemos diferentes estilos. A lo mejor incluso tenemos diferentes fuentes. Entonces la manera de hacerlo es que puedes crear un textil y puedes decir, ya sabes, quiero decir, veamos qué textil es esto. Esto es inter um, 16, y este es Inter negrita 24. Entonces lo que hacemos es seguir adelante y creamos un estilo y decimos. Creamos un estilo y decimos que este es el Inter, debería ser 16, y es regular, ¿de acuerdo? Podemos elegir incluso, ya sabes, la altura de la línea y así sucesivamente. Y podemos nombrarlo. Podemos decir que esto es regular o podemos decir que es texto. Y esto es bastante importante cuando se quiere escribir encabezamientos, ¿verdad Entonces vas a tener rumbo uno, dos, tres, cuatro, y aquí lo tenemos. Entonces tenemos 24, así podemos seguir adelante y crear un estilo aquí. ¿Qué es bonito? Quiero decir, no tienes que hacer esto. Simplemente puedes venir aquí, dar clic en los cuatro círculos y dar clic en más. Solo puedes decir, guardar todos estos ajustes que tengo aquí y simplemente crear un estilo a partir de ellos. Podemos decir H uno. Este es nuestro H uno, y entonces podemos venir aquí y decir que este es H dos. Nuevamente, da clic en los cuatro círculos en el más H dos, y este es nuestro H tres. Bien, crea el estilo. Entonces podemos ver todos nuestros textyles aquí. Tenemos que conectarlos aquí. Aquí, esto está conectado. Esto no está conectado, solo vamos a conectarlo aquí al texto. Entonces lo que podemos hacer es que podemos venir aquí y podemos decir, ¿sabes qué? Decidí hacer H uno encabezando uno mucho más grande. Puedo escribir 36. Bam, aquí se hace más grande. Yo podría decir, H dos o H tres, eso es demasiado pequeño. Son 12. Hagámoslo 16, se puede ver que éste ha cambiado. Quiero decir, idealmente, también deberíamos configurar esto para que sea H tres y todos los demás también. Se entiende la idea. Los estilos son muy similares a las variables a la hora cambiar las cosas desde un lugar central, pero los estilos tienen mucho más control para muchas cosas diferentes, estilos de texto, estilos de color , estilo de efecto. Si bien las variables siguen siendo un poco limitadas. O sea, recuerdo cuando esta característica salió por primera vez, creo que estaba más o menos en modo Beta. Entonces no era muy confiable ni estable. Ahora lo es, pero como dije, sigue siendo un poco limitado, así que hay que prestar atención a eso y ver en qué se puede trabajar con él porque creo que las variables son más frescas cuando se trata de color cuando se trata de tal vez cuerdas, pero los estilos son mucho más superiores cuando se trata de textiles, cuando se trata de estilos de efecto porque te ahorra mucho tiempo y siempre puedes volver y decir, ¿sabes qué? Esta sombra no se ve bien. No necesito seguir adelante y cambiarlo de cada elemento. Simplemente puedo hacerlo con presionar un botón. Puedo cambiar todo esto. Y si, idealmente, no deberías tener una sombra llamada sombra de tambor. Deberías decir sombras de botones, y luego puedes decir sombras grandes, sombras de cartas. No sé, solo sombras diferentes para diferentes elementos o efectos que quieras mostrar. Y sí, estas son las principales diferencias entre estilos y variables. Espero haber hecho esto comprensible. Así que adelante e intenta trabajar con estos efectos, intenta trabajar con estos elementos características, variables y estilos, quiero decir. Pero para ser honestos, si sientes que tu proyecto no tiene un alcance tan grande y no necesitas tener variables o estilos, entonces no tienes que usarlos. Es decir, siempre sugeriría trabajar limpio. Así que usa estilos si puedes si tienes el tiempo especialmente si tu empresa tiene el presupuesto para ello. Pero si sientes que no creas diseños muy rápidos que no tienen que ser súper consistentes, entonces seguro, no los necesitas. Intenta medir tus prioridades, entenderlas. ¿Necesitamos enfocarnos en dedicar mucho tiempo a descubrir los estilos de efecto y crear un estilo consistente que se repita y que sea realmente consistente, o solo estamos tratando de hacer algo rápido y sucio y simplemente no prestar atención a la consistencia Depende de ti. Espero que esto tenga sentido para ti y te veré en la siguiente lección. 6. Bibliotecas de equipo y organización de archivos: Bienvenido a otra lección del curso avanzado de Figma. En esta lección, vamos a hablar sobre archivos de equipo y publicar archivos de equipo para tener componentes en diferentes archivos y compartirlos con tu equipo. Déjame explicarte a qué me refiero. Lo que hemos hecho en las lecciones pasadas, si no las has investigado, puedes ir a revisarlas ya. Básicamente creamos variables, creamos componentes con diferentes variantes, y también creamos estilos, y todos estos son conceptos diferentes. Pero todos ellos se relacionan entre sí de una manera muy agradable porque una parte esencial de su uso es la consistencia. Entonces, cuando estás trabajando en un proyecto específico, digamos, ahora mismo, estamos creando aplicación financiera tal como ves aquí, entonces probablemente queramos crear varios archivos, o tal vez dentro del mismo archivo, nos gustaría tener los mismos componentes, los mismos estilos, y así sucesivamente. Básicamente, para recrear y mantener esta consistencia a través de los archivos Figma, nos gustaría poder traerlos Ahora bien, la forma más fácil de hacerlo o la forma directa más directa sería copiar algo y pegarlo. Entonces cuando tengas tus botones aquí, puedes copiarlos y simplemente pegarlos en los demás documentos. Pero eso puede llegar a ser agotador. Quiero decir, al principio, parece lo más fácil, pero no lo es. Lo que realmente tiene más sentido es compartirlos, básicamente publicarlos a través de la biblioteca de tu equipo. La forma de hacerlo es ir aquí, entonces tienes dos pestañas aquí. Tienes tu expediente y tienes tus bienes. Ahora, el archivo te muestra las páginas que tienes así como las capas. Ahora puedes colapsar estos también, así puedes esconderlos si quieres. Vamos a ir a bienes. El assets Sab te muestra todos los diferentes componentes, estilos, variables que tienes o más fácilmente dicho, te muestra todas las bibliotecas que tienes guardadas Ahora, puedes ver un par de bibliotecas que tengo aquí y es porque las hemos visto en la página de la comunidad. Yo los he visto. Están a disposición del público, y los he agregado. Puedo seguir adelante y entrar en iPadOS 26, por ejemplo, hay kit de interfaz de usuario, y esto me permitió ver todos los componentes que tienen dentro de ese kit Puedo traer cualquier cosa de aquí a mi archivo de diseño actual. Puedo decir Face ID, déjame obtener el Face ID, así puedo insertar y así, tengo una instancia de Face ID, que tiene diferentes variantes, por ejemplo, el éxito de autenticación, y demás. Podemos hacer lo mismo que hace Apple con sus UIKits La forma de hacerlo es seguir adelante y dar click en este botón. Así que elige tus bibliotecas, y lo que vas a ver aquí los activos creados en este archivo. Entonces va a haber activos que se limiten a este archivo. Estos, nuevamente, son los estilos, variables y componentes, y luego tienes bibliotecas agregadas a este archivo. Puedo eliminarlos si están siendo demasiado molestos y no quiero usarlos, por ejemplo, no creo que vaya a usar WatRos 26 o Vision OS, así que simplemente puedo eliminarlos de aquí o puedo volver a agregarlos Pero entonces lo que vas a querer hacer en caso de que ya tengas un conjunto de componentes que has creado en este archivo que te gustaría publicar, vas a seguir adelante y dar clic en Publicar. Entonces te va a decir aquí quiero decir, ahora mismo, ya está publicado, pero normalmente aquí te dice los cambios, ¿verdad? Entonces te muestra lo que has agregado. Entonces, lo que hemos agregado, quiero decir, antes, en realidad no fue publicado. Hemos agregado nuestra colección de variables, y te muestra aquí tenemos 12 variables cambiadas. Entonces tenemos los estilos. Entonces te muestra agregué textil H uno, textil, H dos estilo, H tres estilo. Teníamos un estilo en cuanto a estilos, añadimos un degradado, añadimos una sombra paralela. Hicimos la mayor parte de estos en la última lección. Como estábamos hablando de estilos y variables. Como puede ver, están las variables, los estilos y los componentes. Ahora, hasta ahora solo hemos creado dos componentes, que son el botón y el icono. Esto te da la oportunidad quitar alguno de estos para decir, ¿sabes qué? No quiero compartir los componentes porque estos componentes son específicos de este archivo. Pero me gustaría compartir, por ejemplo, el de colección. Me gustaría compartir las variables en él, y puedes ver qué variables tienes cuáles se agregan y cuáles no. Creo que todas ellas están añadidas. Puedes verlas todas aquí. De nuevo, puedes optar anular la selección de todas y luego no estás publicando nada realmente, o puedes agregar todas estas Vamos a seguir adelante y publicarlos. Dice que es biblioteca editorial. Va a tomar un tiempo. Perfecto. Ahora ya está publicado. Aquí abrimos un nuevo archivo de diseño, y cuando vamos a las bibliotecas, no encontramos nuestra propia biblioteca. Entonces solo vamos a seguir agregando más bibliotecas y vamos a ir a equipos y vas a encontrar dentro de los equipos, vas a encontrar la freelance. Puedes agregarlo a este archivo si aún no lo ha agregado. Así como eso haciendo clic en él, accederás a todos los componentes que están disponibles. Lo que es más es que también puedes usar el estilo. Si creamos algún tipo de objeto aquí, puedo seguir adelante aquí y voy a ver aquí todas las diferentes bibliotecas. Ahora bien, no le dimos nombre a nuestra biblioteca, así que tal vez deberíamos hacerlo , para ser sinceros. Si solo venimos aquí, vamos a la biblioteca y podemos simplemente cambiar el nombre aquí para que podamos decir Finance app. Y luego aquí dice Finance app. Entonces, cuando añadimos un estilo aquí, entonces queremos agregar un estilo. Entonces va a decir que es la app de Finanzas. Entonces puedes ver todas nuestras variables aquí, o variables de color, así como nuestro estilo aquí, que era solo un degradado. Entonces, cuando agregamos texto, solo estamos probando esto. Así que hola hola mundo. Puedo comprobar la tipografía y voy a ver mi app de Finanzas, estilos de tipografía Ahora, claro, puedo ver todos los demás sistemas a los que he agregado las IU, las bibliotecas Pero ahora mismo sólo necesitamos este, el que creamos nosotros mismos. Y así, creamos la biblioteca de equipos, y la publicamos, y ahora pudimos usarla en otro archivo. Es tan fácil como eso. Pero lo que es más genial es cuando estamos llegando a trabajar aquí y decidimos, ¿sabes qué? Déjame crear otro componente. Quiero decir, déjame hacer esta cosa o tal vez una de estas, voy a convertirla en un componente, solo hago click aquí y digo, estadísticas, ¿verdad? Entonces puedo ir aquí mismo a mis bibliotecas. Y entonces aquí dice un cambio. Realiza un seguimiento de los cambios que haces. Un cambio porque creamos un componente. Vamos a crear un nuevo estilo, que sea un color. Sólo vamos a hacer este gris y sólo vamos a crearlo sin nombre, así que es solo poner el código hexadecimal. Entonces ahora comprobamos y luego dice dos cambios. Ves que realiza un seguimiento cuando llegamos a las variables como último ejemplo, agregaremos una variable de cadena. No lo vamos a meter, sólo vamos a escribirlo ahí. Y luego ahora lo comprobaremos. De nuevo, hay tres cambios. Ahora, hay que aceptar o publicar manualmente estos cambios para que puedan pasar por ellos. Entonces voy a seguir adelante a publicar y voy a que los voy a elegir a todos. Puedo elegir y decir, Oye, ¿sabes qué? No, no quiero que se tomen estadísticas. No quiero que se tome este color. No estoy seguro de por qué o en qué caso, alguien decidiría por eso. Realmente depende de usted en sus propios casos de uso. A lo mejor decidirás que esto no debería ser parte del sistema. Esto era algo fuera de todo este sistema de diseño. Tal vez fue por error. Entonces quieres que sepas, excluirlo, eso depende de ti. Puedes ver aquí todos los estilos y variables sin cambios también se enumeran aquí solo para tu información. Entonces podemos seguir adelante y publicarlo. Ahora tenemos un nuevo componente, un nuevo estilo y una nueva variable. Ahora vamos a comprobar lo rápido que es eso. Mientras estamos comprobando. En 3 segundos, se actualizó. 3 segundos de mí esperando aquí, se actualizó y puedo traer esto aquí igual que esa gota de dragón donde puedo hacer click sobre ella y puedo ver colección. Puedo ver cómo se ve el modo oscuro de demostración, y lo mismo aquí, puedo comprobar todas las instancias. Esto es más como una función de vista previa si quieres ver, bueno, déjame echarle un vistazo. ¿Qué puedo hacer aquí? Entonces puedes ver cómo se ve, y luego puedes insertar la instancia. Pero para ser honestos, creo que este es un camino más largo y lleva más tiempo. Prefiero bastante simplemente arrastrarlo, soltarlo, y luego simplemente ajustarlo como quiera. sea secundaria, activa, sin embargo, lo que yo quiera. Así es básicamente como puedes usar las bibliotecas de equipo a tu favor, para publicar tus cambios cuando hayas hecho cambios para publicar al principio. Entonces a medida que realice cambios, puede publicarlo nuevamente o publicar estos cambios específicamente puede usar y reutilizar la biblioteca de Steam en sus archivos. Ahora bien, esto probablemente sea muy tranquilizador para mucha gente, muchos diseñadores a los que les gusta trabajar en diferentes proyectos y les gustaría tener los mismos elementos, ya sea que pertenezcan a la misma identidad de marca o tal vez elementos específicos que hayas diseñado que podrían funcionar en diferentes proyectos No es necesario que un botón no siempre tenga un diseño súper único y sorprendente. Puedes usarlo y reutilizarlo. Depende de que sepas, depende de tu flujo de trabajo, depende de cómo te guste trabajar. Pero esta característica fue más o menos pensada en términos de un proyecto. Tienes un proyecto donde tienes, digamos, algo muy parecido a los kits de UI. Entonces tiene que ser un kit de interfaz de usuario consistente como IOS 26, y luego tienes un botón o en términos de botones, tienes estos múltiples botones, entonces hay vidrio líquido, hay botones normales. Y cuando hagas clic en él, verás tantas opciones. O sea, ¿está tintado o no? ¿Es modo luz, modo oscuro? Te muestra ¿está habilitado o deshabilitado? Sí, y puedes elegir los colores. Es muy interesante de ver y mirar. Quiero decir, obviamente, no se ve muy bien aquí, pero creo que una vez que lo coloquemos, eso tendría mucho más sentido lo que realmente están cambiando estos escenarios. Siento que esta característica de verlo, previsualizar tu botón o tu elemento no siempre está funcionando a la perfección Entonces deberías simplemente seguir adelante arrastrarlo y soltarlo y ver cómo se ve, sobre todo si tiene un desenfoque de fondo como este, es bueno ver cómo se vería. Es decir, esto es un efecto de cristal. Puedes ver cómo se ve con algo en el fondo, y podemos comprobar aquí las diferentes posibilidades. Sí, bastante agradable. Así que solo para terminar, en esta lección, aprendimos a publicar nuestra biblioteca, nuestra biblioteca de equipo. Eso significa publicar nuestras variables, estilos y componentes. Esto nos permite publicarlos en un archivo que es accesible a través de diferentes archivos, y aprendimos a actualizar esta biblioteca actualizando los componentes. Entonces a medida que trabajamos y cambiamos estos componentes, estilos variables, entonces podemos seguir adelante y simplemente actualizarlos y volver a publicarlos y aprendimos a colocar estos componentes en cualquier otro proyecto de diseño Por supuesto, tiene sus limitaciones. Es decir, no se puede hacer en otra cuenta o en un equipo completamente diferente a menos que se publique y agregue. Entonces, por ejemplo, podemos agregar las cosas de IOS porque está disponible públicamente. Pero si estuvieras en una cuenta completamente diferente, tendrías que acceder de alguna manera a esta biblioteca, así que tiene que ser compartida de alguna manera. Pero si estás dentro de la misma cuenta, puedes simplemente agregarla desde aquí, agregar más bibliotecas, y puedes encontrarla desde las bibliotecas de tu equipo aquí mismo. Entonces espero que hayas aprendido algo útil y que sigas adelante y uses esta función como quieras, siempre y cuando te esté ayudando a lograr tus metas como equipo y hacer que tu trabajo fluya un poco mejor. Muchas gracias, y nos vemos en la siguiente lección. 7. Análisis detallado del diseño automático: Hola, y bienvenidos a otra lección. En esta lección, vamos a hablar de diseño responsive. Más específicamente, vamos a hablar de ciertos comportamientos. Estos son los ajustes o estados fijos de abrazo y relleno. No estoy seguro de cómo los llamaría alguien. Son un poco difíciles de definir así como difíciles de entender. Creo que muchos diseñadores desgraciadamente no conocen esta característica. No lo usan mucho, pero este es tu primer y más crucial paso a la hora de diseñar responsive. Intenta escuchar lo que me refiero, trata de asimilarlo, entenderlo, si no intentas volver a escuchar. Voy a tratar de explicar esta lección de la manera más sencilla posible, pero siéntete libre de hacer cualquier pregunta si no entiendes más adelante. Esto es algo que tarda mucho en comprender y solo viene con la práctica. Entonces, antes que nada, hablemos de lo que significa el diseño receptivo. El diseño responsive es lo que llamamos, ya sabes, una app o sitio web o lo que sea, cuando eres capaz de estirarlo hacia la derecha y hacia la izquierda, y, ya sabes, se cambia en consecuencia. Entonces para entender esto, quiero decir, podemos mirar esto dentro de Figma. Entonces tenemos el menú lateral. Ya sabes, podemos estirarlo hacia la derecha y hacia la izquierda, y mantiene los mismos elementos. No se pierden ni se eliminan elementos. Pero a veces, ya sabes, si aquí hay texto largo, tal vez se va a acortar. Eso no es un problema. De igual manera, aquí tenemos lo mismo. Ciertos elementos se alargan mientras que otros elementos, mantienen el mismo tamaño, pero algunos de ellos están alineados a la derecha, algunos de ellos están alineados a la izquierda, y así sucesivamente. Incluso podemos cambiar todo el tamaño de esta ventana. Si abrimos Figma, podemos cambiar el Pigma de tamaño entero, y seguirá teniendo sentido Seguirá mostrando toda la información relevante que necesitamos. Eso es exactamente de lo que estamos hablando. diseño responsivo es la capacidad de un diseño para adaptarse a diferentes tamaños de pantalla, a diferentes condiciones que lo hacen más pequeño, más grande, más ancho. Más flaco, como quieras llamarlo. Para entender esto, primero, necesitamos entender este concepto aquí, que está relacionado con los diseños de auto. Tenemos aquí fijo abrazar y llenar. A lo que me refiero más específicamente es a este botón. Aquí tenemos botones. Son el mismo componente que creamos antes en el curso. Ahora bien, esto es básicamente un marco que tiene un diseño automático, y este marco que tiene un diseño automático tiene un elemento de texto dentro de él. Ignora la línea, ignora el icono, están ocultos. Solo tenemos un marco que tiene un diseño automático. Tiene un elemento de texto en su interior. Lo que vamos a hacer o lo que ya he hecho es he configurado el elemento de texto aquí para que se corrija. Tiene ancho fijo, y también podemos darle altura fija. Entonces aquí tenemos abrazo. Aquí tiene abrazo para el ancho y abrazo para la altura. Ahora, solo como nota, solo puedes hacer estos ajustes cuando tienes un elemento. No importa si es un elemento de texto, podría ser un objeto, podría ser una línea de forma o lo que sea, tiene que estar dentro de un marco con un diseño automático. Entonces si creamos un texto aquí y agregamos algo de texto, no puedes hacerlo abrazar o llenar. Eso no está disponible. Pero cuando llegamos a este texto, somos capaces de elegir ancho fijo, abrazar o llenar. Estas son las cosas a las que me refiero. Entonces aquí, tenemos relleno, y para la altura, tenemos un abrazo, que por ahora no importa. Quiero decir, solo nos estamos enfocando en el ancho más, bien. Entonces, ¿qué significa esto exactamente? Bueno, arreglado es bastante comprensible. Básicamente significa que tiene un ancho fijo y una altura fija. Entonces, no importa cuál sea el texto dentro de él, no va a cambiar sus dimensiones. Así que vamos a probar eso. Entonces voy a decir aquí, suscríbase ahora. Entonces como se puede ver, el cuadro en sí, el cuadro de texto no ha cambiado sus dimensiones. Lo que pasa es que el texto no va recto, baja, se envuelve, ¿de acuerdo? Y sale fuera de la caja por esta limitación, ¿verdad? Entonces este es un caso claro de coincidencia incorrecta o incorrecta o desajuste. Básicamente configuras los ajustes, las dimensiones de este botón de manera incorrecta. Entonces no es comportarse de una manera que sea receptiva o, ya sabes, tal vez no responsiva, sino de una manera que sea correcta Ahora, viniendo aquí, tenemos relleno. Entonces tenemos este botón con relleno, y aquí vamos a escribir la misma frase. Vamos a escribir suscríbase ahora. Ahora bien, lo que se nota aquí, tenemos algún comportamiento diferente, diferente resultado de lo fijo. Ahora aquí le dijimos que tuviera un relleno. Lo que esto básicamente significa, dice, llenar el espacio tanto como puedas. Extiéndete tanto como el marco te permita. Ahora bien, el marco no te permite mucho. Básicamente es limitado. Está arreglado. Pero mientras tanto, la altura es abrazo. Está configurado como abrazo. Entonces eso significa abrazo, puedes extender todo lo que necesites. Entonces porque escribimos suscribirse vez en cuando el marco es limitado, así que el texto bajó, pero el cuadro bajó con él. El marco fue y lo envolvió todavía. Como puede ver, estas son las diferencias, algunas de las diferencias. La forma en que se está comportando la caja de aquí, es decir que este es el cuadro de texto, no está cambiando El texto va a salir del cuadro de texto porque no hay ningún lugar para que sea, pero no vamos a cambiar nada. Los tamaños van a ser todos iguales. Esta es una forma muy estática. Está muerto. No reacciona de ninguna manera. Esto de aquí es un poco mejor porque si bien no mostraba el texto como nos gustaría que se mostrara, aun así bajaba y la caja bajaba con él. El tamaño del botón ajustado con el texto. Esto es un poco mejor. Pero me gustaría que se dieran cuenta de lo que sucede cuando extiendo la caja. Como puedes ver, ahora, la caja sí tomó forma, la forma siguió adelante y se volvió normal. El cuadro de texto volvió a su tamaño normal. En tanto, cuando extendemos éste, no pasa nada. ¿Por qué? Porque tiene un tamaño fijo. No va a cambiar pase lo que pase. Pero aquí está configurado como lleno. Dice básicamente, si hay espacio, voy a extender las piernas. Si no hay espacio, voy a estar abarrotado en este lugar. Eso es exactamente lo que pasa. Está abarrotado, pero aquí tiene espacio, por lo que se está extendiendo Eso es lo que está pasando. Ahora, vamos a ver este botón de aquí. Veamos qué hace. Aquí tenemos el botón configurado como abrazo. Lo que pasa aquí sería ahora mismo suscríbase ahora. Tiene el comportamiento perfecto porque el texto no baja porque los botones como regla general, los botones no deberían tener múltiples líneas, idealmente, no debería estar suscrito y luego en la siguiente línea ahora, no debería haber varias filas o demás. Se puede ver que este botón va junto con él. El marco del botón se extiende con él. Esta es una de las diferencias que tienes, y esto se relaciona no solo con objetos de texto o elementos de texto, sino que también todo tipo de elementos tienen el mismo comportamiento. Resumen. Hemos arreglado abrazar y llenar. Solucionado hace que el tamaño del texto permanezca exactamente igual mientras que Hug se extiende con el texto. Pero hay un problema con Hug es que puedes escribir para el infinito. Nunca va a bajar. Esto podría ser un problema más adelante porque ¿y si tienes un elemento muy, muy largo? Debería bajar en algún momento. Pero para este caso de uso específico, tenemos aquí un botón. Ya sabes, como regla general, tu botón no debería ser demasiado largo. ¿Bien? Entonces ese no es un problema para esto. Mientras que Phil, ya sabes, Phil es inteligente porque reconoce el límite del marco. No va más allá del límite. Entonces es ideal pero no cuatro botones. Entonces esto es una especie de solo un resumen. Y lo que es lindo es con el abrazo, no necesitas ajustar el marco, ¿verdad? El marco ya se está ajustando por sí solo. Entonces, si borras algo, se va a ajustar. En tanto, con el relleno, si borras algo, el marco no sigue, así que debes seguir adelante y hacerlo por tu cuenta, que puede no ser súper preciso y no es genial. Estás haciendo todo dos pasos. Esta es una de las principales diferencias. Se puede practicar esto y se puede ver, donde el cuadro de texto limita, no sólo sobre el aspecto general, sino mira el cuadro de texto aquí, arreglado aquí Se fue a lo largo. Seguí tirando de los elementos Si tenía más texto, lo abrazaba, lo contenía. En tanto, aquí, lo está llenando, pero siempre y cuando el marco tenga espacio. Mira, aunque el texto esté hasta aquí, el elemento texto va más allá, va hasta el final del marco, y eso es lo que significa llenar. Llena todo el espacio. Si hay agua, llena toda el área con agua con lo que quieras. Eso es lo que está pasando aquí. Considéralo pensar en ello en ese término. Si hay algún espacio, si hay una botella, se va a llenar. Ahora, sigamos adelante e intentemos crear nuestros propios elementos. Solo quiero recordarte que esto no es tan fácil porque tienes el marco que también tiene contenido fijo o abrazo, y luego también tienes los elementos dentro de él, que también tienen opciones de abrazo fijo o relleno. Esto no es tan fácil. Pero tratemos de explicarlo un poco más. Entonces aquí tengo una tarjeta. Entonces esta tarjeta te muestra una reseña, nombre de revisión, apellido y contenido de revisión, la revisión real. Esto es solo un ejemplo de cómo podría verse una reseña. Ahora, copiemos esto y vamos a darle un nombre. Se llama revisión, y aquí la vamos a poner en este pequeño marco, acuerdo? Vamos a hacerlo más grande. Y lo que vamos a hacer ahora es, nos gustaría probar esto un poco, ¿verdad? Entonces voy a escribir un nombre aquí y este nombre debería ser Jonathan Simpson, el Élder John. No lo sé, sólo estoy escribiendo cosas. Entonces te vas a dar cuenta, espera un minuto, esto no es apropiado. Quiero decir, es dejar el marco. Esto es un problema porque estamos teniendo aquí múltiples cosas para mirar la anatomía, aquí hay un marco. Se puede ver. Este es el marco principal. Luego hay un elemento de texto, y luego hay otro marco con un diseño automático. Este marco tiene un círculo, una elipse y un elemento de texto, y luego tienes el contenido de revisión, el marco principal tiene un diseño automático con tres elementos, texto, marco uno y contenido de revisión Echemos un vistazo y tratemos de entender dónde está el problema. Entonces el tema principal que aquí está sucediendo es que esto se está extendiendo demasiado. Entonces la forma de arreglarlo, tenemos que ir y dar click sobre este elemento y ver qué tiene? Bueno, tiene abrazo. El contenido del abrazo está haciendo que se extienda y siga adelante y siga adelante. ¿Todo bien? Ahora, veamos qué pasa cuando lo damos arreglado. Ahora bien, lo que pasó con fijo es que de alguna manera consiguió un número 162, y esto es porque este es el número original, ¿de acuerdo? Porque quiero decir, en el marco de aquí, eran 162. Entonces básicamente va a alternar a su tamaño original. O aquí, se puede ver 162. ¿Qué pasa cuando ponemos contenedor de llenado? Como pueden ver, se adaptó al marco en el que está y decía, voy a llenar el contenedor, pero no voy a ir más allá de él. En cambio, voy a ir a una segunda línea. Ahora pasó a una segunda línea. Ahora, volvamos y mantengámoslo en un abrazo. Ahora bien, hay otra manera de resolver esto. O sea, si lo piensas bien, el tema es que el marco no está conteniendo estas cosas. El marco tal vez en vez de que este texto sea más pequeño. Quiero decir, no podemos hacerlo más pequeño. A lo mejor nos gustaría hacer el marco un poco más largo. Eso también podría funcionar. Pero no debemos hacerlo manualmente moviéndolo. Voy a regresar. Lo que deberíamos hacer es quizá, quiero decir, veamos, arreglado, ya está arreglado. Queremos que sea un poco más interactivo. O bien debe abrazar el contenido o llenar el contenedor. Bueno, hagamos que llene el contenedor. Bien. Entonces ahora ves lo que pasó fue que todo este marco es un contenedor. Es un marco con un diseño automático, y siguió adelante y se extendió todo el marco. Se llevó todo el espacio. Pero lo que resulta aquí es que ahora tenemos mucho espacio en blanco vacío que quizás no es necesario. Entonces, ¿cómo arreglas esto? Bueno, pongamos abrazo contenido. Bueno, abrazar contenido no hizo nada, ¿verdad? Bueno, ¿está abrazando el contenido? Vamos a revisar. La revisión es hasta aquí. ¿Bien? Y hay acolchado en los laterales, solo para que sepas, hay 24, 24 de arriba y abajo, 24 de derecha e izquierda. Bien, entonces la revisión está siendo contenida. Y entonces también se está conteniendo este texto, bonito, y miramos aquí, aquí hay un tema. Pues bien, este texto no contiene los elementos su interior, los elementos están saliendo. A lo mejor también deberíamos hacer que esto tenga contenidos de abrazo. Así como así, lo arreglamos. Entonces abrazar contenidos significa extenderte tanto como los elementos dentro de ti. Entonces solo para recapitular, si hay un nombre largo, entonces deberías adaptarte a ese nombre largo y alargarte tú mismo Deberías saber, como marco, debes contenerlo. Entonces cuando hacemos abrazar contenidos, va a contenerlo, y luego el marco fuera de él también debería abrazarlo. Entonces, cuando tienes múltiples elementos uno dentro del otro, múltiples diseños que están anidados uno dentro del otro, tienes que decirles que se contienen entre sí como abrazar los contenidos dentro de ti Entonces aquí tenemos un abrazo y aquí tenemos un abrazo. Se están abrazando, ¿de acuerdo? Entonces vamos a revisar estos elementos. Bueno, quizá escribamos una reseña aquí, voy a escribir. Me gustó mucho la película. Fue absolutamente increíble y agradable, bla, bla, bla Entonces ahora empiezas a meterte en algunos temas. Probablemente ya te diste cuenta. Solo te estoy guiando por el proceso de crear un elemento y entender cómo estas cosas se relacionan con el elemento. Bueno, tenemos múltiples problemas. Un problema es que si miras el elemento, no está ocupando toda el área. El segundo problema es que se extiende más allá de la línea, más allá del marco. Ahora bien, si recuerdas esto más allá del tema del marco, ya lo resolvimos con el nombre, la solución fue usar el abrazo. La opción de contenidos de abrazo. Entonces ahora ya tenemos contenidos de abrazo, pero esto es por el ancho. Ahora tenemos que usar lo mismo para la altura. Al igual que cuando hacemos eso, inmediato resuelve el problema. Se va hacia abajo. Si acortamos este texto, va a subir. Eso hace que el elemento sea un poco receptivo contigo. Ahora el marco general o el más alto tiene abrazo en ambos lados para ancho y alto. Pero todavía tenemos otro tema, como dijimos, esto no es retomar todo el marco. ¿Cómo lo hacemos? Bastante fácil. Bueno, esto no se soluciona la opción de abrazo porque Hug va a mantenerlo en la misma línea. Con texto, cuando se trata de texto, simplemente va a permanecer en la misma línea. Pero esta tarjeta no se ve muy bien, siendo súper larga, sobre todo si duplicamos el texto aquí, solo se va a extender hasta el infinito. Sólo voy a volver, voy a deshacer. La solución en lugar de usar contenido fijo de W o abrazo es usar contenedor de llenado. Entonces cuando haces llenar contenedor, dice, llene el área que está aquí, que está vacía, ¿verdad? Entonces si lo hacemos fijo, fijo sólo va a quedar exactamente igual, no va a reaccionar. Pero cuando sí llenemos, va a decir que no, solo llenemos el área que esté disponible. Y ahora mismo, esta es la única zona que está disponible. Entonces si le agregamos más texto, se va a extender, y luego va a ocupar el área que está disponible. ¿Ves de lo que estoy hablando? Entonces se trata de diseñar estos elementos de manera que se adapten a sus necesidades, entendiendo que, bueno, tal vez el nombre no debería ponerse en dos líneas. Quiero decir, no importa cuánto tiempo sea tu nombre, alguna manera aún debería extenderse. Pero entendiendo eso, oye, tu reseña no debería ser larga, súper amplia, pero a lo mejor debería bajar en lugar de ir a la derecha, debería bajar. Y esto es básicamente todo el uso de estos elementos. Tan fijo es genial, fijo ancho o alto, pero es muy rígido. Es estático. No cambia por sí mismo. Es por eso que utilizamos elementos abrazo y contenedor de relleno para permitirnos decir a estos elementos cómo deben comportarse en relación unos con otros. Y solo para que sepas, también existe la oportunidad de hacer, llenar contenedor para la altura también. Esto también es una posibilidad. Entonces cuando dices llenar contenedor para la altura, lo que hace es, ahora mismo no hizo nada, pero va a llenarlo si hay espacio para ello. Entonces si extendemos esto aquí mismo, por alguna razón, lo extendemos. Comprobamos el elemento y ves el cuadro de texto ya rellenado el área Entonces la cogí y dijo: Oye, esto es mío. Sabes, no se lo voy a dar a nadie, ¿de acuerdo? Ahora, volvamos. Vamos a deshacer eso. Entonces ahora mismo, la tarjeta no está mal. Quiero decir, no es perfecto. Vamos a configurar esto como relleno. Pero no está mal. Está funcionando para nuestros propósitos. Si acortamos el nombre, quiero decir, élder John, no sé qué es eso, todavía se ve bastante bien, ¿verdad? Así que hicimos el nombre más corto para que podamos leer la reseña y todo está perfecto. Bueno, ahora vamos a jugar, vamos un paso más allá y juguemos con algunos elementos más. Entonces lo que podemos hacer es que podemos copiar esto y pegarlo, así estoy copiando este elemento. Y solo para que sepas, como mencioné, hice de todo este marco un diseño automático, pero es de ancho fijo, así que no va a reaccionar ante estos, ¿de acuerdo? Y ahora tenemos estos dos objetos. Entonces ahora podemos hacer algo interesante, bien. Entonces, qué es esto, tal vez estás viendo este diseño y estás diciendo, bueno, ya sabes, aquí hay algo de espacio en blanco. Sólo está vacía. Es sólo ahí sentado. ¿Por qué no lo llenamos? Pero si agrego otra reseña, se va a cortar. No quiero eso. Quiero que sean dos críticas, y quiero que ocupen el espacio. Bueno, hay una manera de hacerlo. Así que escoge estos, ambos elementos y sigue adelante y en vez de hacerlos abrazar, así que básicamente solo están abrazando su contenido, solo son tan amplios como sus contenidos necesitan que sean Vamos a decir llenar contenedor. Lo que va a pasar aquí es que ambos van a tratar de llenar el espacio tanto como puedan. El resultado que tenemos es que ambos están luchando por el espacio. La regla general cuando se trata de Figma es que cuando tienes dos elementos dentro de un layout automático que están ambos configurados para llenar el espacio, lo que va a pasar es que van a tomar 50% y 50% Esa es la idea general. Si seguimos adelante y copiamos y pegamos esto y luego tenemos tres elementos, ahora van a tomar 30%, 30%, 30%. Por supuesto, excluyendo el espaciado porque hay espaciado entre ellos, eso son diez píxeles. Pero ahora se ve un poco chiflado si te diste cuenta porque ahora el nombre es demasiado largo y porque configuramos esto para llenar el contenedor, pero no realmente Abrazo el contenido. No le importa el contenido dentro de él, solo le importa llenar el contenedor. Este es un problema porque, oye, acabamos de aprender a hacer que las cosas respondan y ahora las estamos rompiendo. Bueno, esta es una parte natural del uso de estas tecnologías. Hay una solución para ello. Una solución es, voy a elegir todos estos elementos. En lugar de tener esto como abrazo, podemos convertir esto en relleno. Entonces vamos a elegir el texto y también convertirlo en relleno, entonces eso va a hacer que el texto aquí tenga dos líneas. Entonces le vamos a decir la altura también para abrazar porque ves que se extiende más allá del marco. Vamos a decirle al marco, no abrazar todo en cuanto a la altura, y luego va a tomar la altura y así, tenemos estos ocupando el espacio adecuado. Quiero decir, ahora no se ven locas, no están dejando el marco, y están bien dentro de su Simplemente puedes quedártelo como está ahora mismo. Ahora la otra solución básicamente es elegir estos e ir por aquí. Ahora te voy a enseñar algo completamente nuevo, que es lo mínimo y máximo. Bien, entonces para ancho y alto, siempre tienes la opción de agregar un ancho mínimo o un ancho máximo. Ahora, en este caso, tenemos tres elementos que están luchando por el espacio, y esto está provocando que sean más pequeños de lo previsto, tal vez, tal vez no deberían ser los pequeños. Este tipo. Entonces lo que podemos hacer es agregar un ancho mínimo. este momento estamos a 220 alrededor. ¿Bien? Entonces podemos decir, ¿sabes qué? No se le permite ser menor de 300. Entonces ahora estamos estableciendo que el ancho mínimo de todos ellos sea 300. Como puedes ver ahora, se hace más pequeño hasta 300 y luego se detiene. Pero el resultado es que uno de ellos está oculto. Ahora bien, esto tiene una solución fácil. Vamos a elegir el marco que contiene todas estas tarjetas, y vamos a venir aquí y elegir esta opción que se llama monótono Lo que esto hace es que toma todos los elementos que no son adecuados y los deja abajo. Ahora tienes los elementos luciendo muy receptivos, llenando el marco lo suficientemente bien, pero sin distorsionarse Mira lo que pasa cuando copiamos esto y lo pegamos, se arregla exactamente igual que los anteriores perfectamente ¿Qué pasa cuando lo copiamos y pegamos de nuevo? Pone uno justo abajo, y te voy a mostrar cómo se ve, y así sucesivamente y así sucesivamente. Es el mismo principio. Así es básicamente como puedes usar este diseño responsive y usar más específicamente la opción hug content, la opción fill container y las opciones mínima y máxima para asegurarte de que estos elementos están interactuando correctamente entre sí y no se distorsionan Ahora, de manera similar, volvamos un poco atrás. Borremos esto aquí. Hay algo que podemos hacer. Voy a elegirlos a todos. Esto es básicamente cuando lo piensas, podrías decir, una revisión nunca debería ser tan larga. O sea, podría ser largo, no tiene que ser 300, pero nunca debería ser tan largo. La solución es básicamente ir aquí y agregar un ancho máximo y decir, ¿sabes qué? Debe estar entre 300 el mínimo y entre y 400 el máximo. Lo que pasa aquí es que ves que esta reseña no llega más de 400 y luego cuando la copiamos y pegamos, no llega a ser menor de 300. Vigila lo que pasa cuando sigo adelante y amplío todo este marco. Las cartas se hacen un poco más largas a 400 y luego se detienen. Entonces así como consigo un poco más de espacio, ahora tienen tres columnas diferentes. Yo hago más, y luego tenemos cuatro columnas distintas. ¿Qué pasa cuando lo hace más pequeño? ¿Ves eso? Eso es exactamente de lo que estoy hablando. Es toda la idea de la capacidad de respuesta, el hecho de que todo el marco, así como los elementos dentro de él, están reaccionando a los cambios de tamaño y se ve tan suave Obviamente, no es perfecto, pero puedes ver que se está organizando de formas que responden. Es como un ser vivo. Y no es, ya sabes, lo que suele hacer la gente, lo que hacen muchos diseñadores, desafortunadamente, siguen adelante y crean esto y obtienen la reseña, y la ponen aquí, y la copian y pegan, y la ponen aquí. Y luego dicen, vaya, ya sabes, no está en el medio, así que voy a moverlo en el medio Voy a ponerlo aquí, y luego voy a copiar estos, pegarlos, bajarlos. Y luego voy a copiarlos todos, pegarlos, bajarlos. Vaya, solo me estoy asegurando de que todos los espacios estén perfectamente alineados entre sí Y lo que termina pasando es cuanto haces esto más largo, entonces tienes que pensar, ¿qué hago ahora? Bueno, ¿traigo esto aquí? Bueno, como que encajan. Pero entonces, ¿qué hago con estos? ¿Cuánto tiempo más deberían estar? Ahora, tengo que averiguar este largo, ese largo, completamente más largo. Y luego cuando digan, Oh, hagamos que sea versión móvil, y luego tienen que replantearlo todo desde el principio Este es un ejemplo de mal diseño que no responde , mal diseño insensible Hagámoslo un poco más grande. Aquí hay un ejemplo de buen ish, diseño receptivo. Ya sabes. Y sólo para, ya sabes, este marco no es una pantalla, no es una página. Esto es probablemente solo un elemento dentro de una página, ¿de acuerdo? Entonces no creo que este sea todo el diseño. Esto no parece un diseño completo, pero, ya sabes, así es básicamente como lo haces. Cuando se trata de diseño receptivo, es asegurarse de que las cosas sean elásticas y flexibles y reaccionen a tu toque. Estos son los conceptos básicos del diseño receptivo usando diseños de auto. Ahora, hay mucho más en esto. Tomamos el ejemplo de una tarjeta de revisión y tomamos el ejemplo de un botón. Pero es mucho más profundo que eso, ¿de acuerdo? Solo necesitas entender los tres modos principales diferentes. Puedes tener un tamaño fijo que no cambia, nunca, o puedes tener abrazo, que solo cambia de acuerdo a lo que hay dentro de él. Si hay texto, entonces abraza el texto dentro de él. Si hay elementos, elementos de diseño, objetos, entonces los abraza Pero suele ser cuando se trata de texto, no va a una segunda línea. Simplemente sigue yendo y viniendo. Cuando se trata de llenar, solo dice, voy a llenar el contenedor tanto como esté disponible. No voy a ir más allá, y voy a hacerlo si no hay suficiente espacio, iré a una segunda línea, una tercera línea, cuarta línea. Esa es básicamente toda la idea de ello. Una vez que entiendas eso, una vez que lo internalizas y comprendes de qué se trata, entonces puedes seguir adelante y comenzar a crear tu propio buen Ahora, en la siguiente lección, vamos a hablar un poco más sobre restricciones y puntos de interrupción, lo que también se relaciona con el diseño responsivo Así que adelante y trata de practicar esto, trata de entender esto un poco mejor. Luego, en la siguiente lección, vamos a discutir toda esta otra parte del diseño receptivo, que todavía se relaciona mucho con lo que hablamos, pero está un poco más lejos de los diseños de auto. No se basa completamente en ellos. mí mismo me encantan los diseños de auto, y creo que tú también deberías, porque son tus amigos. Te ayudan y hacen milagro ahí está lo que hace especial a Figma que la hace destacar entre la competencia Por eso es una gran herramienta para usar. Pero como dije, en la siguiente lección, vamos a hablar un poco restricciones y puntos de interrupción, si no sabes cuáles son estos, y seguir adelante y verlo en la siguiente lección También vamos a tener un ejemplo que te muestre en tiempo real cómo podemos hacer una respuesta de una página web o una app así que aquí acabamos hacer una pequeña sección con estas tus tarjetas de vista. Pero en las próximas lecciones, lo vamos a hacer con un proyecto de diseño real, y es solo para la práctica. Ya sabes, cuando digo real, digo realista. No quiero decir que sea un proyecto real que se va a construir, sino solo algo para que echemos un vistazo. 8. Restricciones y puntos de ruptura: Hola, y bienvenidos a otra lección del curso avanzado Figma En esta lección, vamos a hablar de puntos de interrupción y restricciones Ahora bien, en la última lección, hablamos sobre diseño responsive y cómo podemos lograrlo a través de auto layouts, a través de abrazar contenidos y llenar contenedor tipo de configuración, no has visto eso, adelante y véalo, pero esto es una continuación, aunque no se trata exactamente de lo mismo. Seguimos hablando de diseño responsive. Aquí nos estamos deshaciendo de los diseños de auto. Quiero decir, podemos usar diseños de auto, pero esto no tiene que estar completamente confiando en ello. Estamos usando principalmente por ahora, lo que llamamos restricciones. Las restricciones son básicamente formas en las que podríamos comunicarnos con Figma y configurar las cosas para que sin diseños, podamos asegurarnos de que los diseños sean receptivos y estén reaccionando de una forma u otra A los cambios en su entorno, específicamente a los cambios del marco o al tamaño de la pantalla. Como puedes ver ahora mismo, construí un elemento aquí que te muestra un producto, un matcha, una maravillosa mezcla de sabores, y puedes pedirlo ahora, y hay un precio Tómate un minuto para simplemente analizar y entender este elemento. Es solo un elemento completamente aislado que elaboré muy rápidamente y no tiene dimensiones perfectas, pero entiendes la idea. Entiendes a dónde va esto. Ahora lo que vamos a tratar de hacer es tratar de entender qué son las restricciones, en primer lugar, y luego entendiendo las restricciones, vamos a tratar de entender cómo podemos hacer que esto sea un poco más receptivo, solo para hacerle saber, la capacidad de respuesta nunca es un atributo que sea absoluto No se trata de ser receptivo o no receptivo, sino que hay niveles para ello. Es como un espectro. Hay muy, muy buena capacidad de respuesta o alta respuesta a ella, y luego hay baja capacidad de respuesta No puedes ser completamente perfecto, pero intentamos serlo cuando se trata de hacer productos realmente. Intentamos serlo, pero a veces estamos muy limitados en cuanto FigMA y luego solo tenemos que asegurarnos de que los desarrolladores hagan bien su trabajo Gmas muy limitados, pero con la codificación, con la programación podemos lograr una respuesta mucho mayor ¿Qué son las restricciones? Cuando haces clic en cualquier tipo de elemento en un marco que no tenga un diseño automático, vas a notar estas líneas punteadas. Estas son básicamente cuerdas que cuelgan tu elemento. Se puede ver una cuerda de arriba y de izquierda. Estas son sus limitaciones. Básicamente están justo aquí, puedes esconderlos de aquí. O puedes abrirlos y te muestra dónde a qué lado de este marco está atado este elemento. ¿Qué significa eso? Bueno, cuando cambiamos el tamaño, no pasa nada. Pero me gustaría que te daras cuenta de lo que pasa cuando cambio la talla de arriba. ¿Ves eso? El elemento va subiendo con el lado superior. Pero cuando lo cambio de abajo, no pasa nada. Es estático. De igual manera, derecha e izquierda, desde la derecha, no pasa nada desde la izquierda, el elemento va con él. Eso es lo que básicamente está sucediendo es que está atado y dejado y puedes cambiar esto atándolo hacia abajo. Ahora está atado a abajo y a la izquierda. Ahora cuando lo mueva hacia abajo, mueva el lado inferior, se va a mover a lo largo de lado. Se va a mover con él, de manera similar aquí. Ahora se va a mover con el lado derecho. Esto es una cosa principal que podemos hacer. Entonces solo para darte una idea, puedo copiar esto y ponerlo aquí, y luego puedo decir, esto debería estar atado a la parte superior y a la izquierda. Esto debe estar atado a la parte superior y a la derecha. Entonces lo que pasa es que están separados. Bien, entonces ahora se está extendiendo tanto como queramos, y esto se queda a la derecha, esta cosa a la izquierda. Pero para ser honestos, lo que sucede la mayor parte del tiempo es cuando haces esto demasiado pequeño, va a tener algo de superposición, ¿verdad? Entonces de esto es de lo que estoy hablando, esto no es perfecto porque sin diseños de auto, no se puede lograr una capacidad de respuesta completa Así que esto es como la mitad con la solución, ¿de acuerdo? Y si realmente quieres hacer un buen diseño receptivo, deberías usar tanto las restricciones como diseños de auto a tu favor, ¿de acuerdo? Entonces como mencioné, lo que pasa aquí es que solo estás jugando con él y va a un lado, lo cual es genial, pero no responde del todo. Aquí podemos hacer lo mismo. Podemos copiar esto pegado aquí y podemos atarlos al fondo, déjame justo cuando haces clic en Control, desactiva las restricciones Puedes dimensionarlo sin restricciones. Sin control, va con él. Ya ves de lo que estoy hablando. Ahora tenemos a cada lado, hay un elemento y va con ellos. Pero esa no es una solución perfecta. Una mejor solución sería poner todos estos, ponerlos en un layout automático. Entonces como puedes ver ahora, hay un wrap, es decir si no hay suficiente espacio, luego déjalo, y luego tenemos que configurarlo de manera receptiva. Pero vamos un paso atrás y solo eliminemos todos estos. Simplemente eliminemos estos y solo trabajemos con uno. Ahora hay diferentes configuraciones de restricción. Hablamos de izquierda arriba abajo, pero también hay media. Puedes recogerlo desde aquí o desde aquí. Ahora, existe la opción de hacer a la izquierda y a la derecha. Entonces, lo que pasa aquí, está empatado de ambos lados. Bien. Lo que ves ahora es que se desgarra o extiende el elemento dentro de él. Pero esta es una de las opciones. Podemos hacer centro. Ahora, centro, no extiende el elemento en sí, no lo estira, sino que solo trata de mantenerlo en el centro. Obviamente, no está en el centro. Está aquí, más en el primer tercio e intenta asegurarse de que siempre esté en el primero o entre el primero y el segundo tercio. Esa es otra opción y luego tenemos escala. La escala se trata más de estirarlo. Es muy similar a izquierda y derecha, y básicamente dice, mucho que lo tomes, se va a estirar. Si lo haces más pequeño, también se va a poner más pequeño. Tenemos los mismos ajustes para arriba y abajo. Déjame configurarlo como a la izquierda. Entonces también podemos hacer escala. Se puede ver que lo está escalando. Podemos hacer arriba y abajo. También lo está estirando y podemos hacer centro. Centros tratando de mantenerlo en la misma posición más o menos en el centro. Bien. Entonces estas son solo algunas opciones. Pero como notas, cuando lo estamos estirando, realidad no se está estirando correctamente. Se está distorsionando. Entonces podemos tratar de solucionar este problema. La forma de hacerlo es ir dentro de este elemento dentro de este marco y hacer clic en los objetos que se encuentran dentro de él. Ahora bien, esto no es un diseño automático. Lo que hicimos aquí, estos fueron todos los diseños de auto. Aquí, quería enseñarte más sobre las restricciones. Incluso este marco no es no tiene un diseño automático. ¿Ves este botón? No está alterado. Lo que vamos a hacer es que vamos a elegir esta imagen y vamos a tratar configurarla las restricciones para ello porque esto tiene una restricción, pero los elementos dentro de ella también tienen restricciones. Pregúntate, ¿qué quieres que suceda cuando extendamos todo este marco? ¿La imagen debe permanecer en el medio o debería extenderse? Bueno, creo que debería extenderse. Yo diría escala. Ahora, vamos a ver. Como puedes ver, la imagen está escalando. Ahora, no podemos controlar el enfoque de la imagen, como pueden ver, está centrada. Obviamente, cuando lo estiramos, ya no va a ser visible qué tipo de producto es este. Pero vamos a ignorar eso por ahora. Podemos tener mejores fotos después. Pero por ahora, esto es lo suficientemente bueno, hicimos esta escala. ¿Qué pasa con la parte superior e inferior? Cuando lo movemos, ¿la imagen debería moverse también con nosotros o debería permanecer igual? Bueno, creo que si lo hacemos más pequeño, debería hacerse más pequeño. ¿Cómo podríamos hacer esto? Bueno, probemos la escala y veamos cómo funciona. Bien, eso no está tan mal. Probemos otra cosa. ¿Qué pasa con el centro? Bueno, el centro lo hace salir del marco, lo cual no es bueno estamos ignorando estos otros elementos Ahora, vamos a llegar a ellos. ¿Qué pasa con la parte superior e inferior? Se trata de intentarlo. Ahora, me gusta mucho arriba y abajo aquí. Aquí puedes notar la diferencia. La razón es, antes que nada, deja aquí un espacio igual. No lo hace más pequeño y tampoco hace que los márgenes aquí sean más pequeños. Entonces, cuando lo comparamos ahora con la escala, así es como se vería. Como pueden ver, se ve muy similar, pero antes que nada, esta área ahora era completamente más pequeña, así que ya no hay espacio para el texto, y se puede ver que los márgenes aquí también se hicieron más pequeños, las dimensiones aquí están desordenadas Pero volvamos a arriba y abajo. Escogeremos arriba y abajo aquí. Y se puede ver que los márgenes de arriba, izquierda y derecha siguen siendo los mismos y esta área para el texto está intacta. Esto es perfecto. ¿Qué elegimos aquí por ahora? Elegimos escala para derecha e izquierda y para arriba e abajo, elegimos top plus bottom. Perfecto. Ahora vamos a llegar a estos. Ahora bien, una cosa que sé es esto debería estar atado al fondo. Esto siempre debe permanecer en el fondo y no debe estirarse, no vamos a hacer escala y no vamos a hacer arriba e abajo. Lo que vamos a hacer es sólo fondo. Ahora vamos a probarlo. Ahora, por mucho que nos metamos con esto, va a quedar en el fondo. ¿Y cuando lo estiramos a derecha e izquierda? ¿No es estirarse? Bueno, queremos que se estire. Eso significa que podemos hacer escala o podemos hacer a derecha e izquierda. Vamos a probarlo. Pero un problema con la escala es como la escalamos, se puede ver el espaciado, los márgenes aquí también se están haciendo más grandes, lo mismo para la imagen. Así que vamos a elegir a los dos y vamos a darles de izquierda y derecha. Ahora cuando los escalamos, los márgenes quedan intactos. Eso es perfecto. Ahora, averigüemos qué podemos hacer con estos también. Una cosa que sé es que estos deben estar atados a la izquierda. No deberían estar exactamente estirados o tal vez deberían. A ver. Vamos a atarlos al fondo por ahora. Podemos ver que estos están atados al fondo, lo cual es perfecto, y voy a hacer esto también atado al fondo. Estas son las limitaciones, y están funcionando perfectamente cuando estamos redimensionando las cosas en esta dirección. Hasta aquí, entonces ya no puedes ver la foto. Pero hasta aquí, es bastante bueno, creo. Más allá de eso, entonces todo está en mal estado. Esto el mínimo, podemos establecerlo como un tamaño mínimo, pero como puedes ver, puedes extenderlo, hacerlo mucho más grande, sin problemas. ¿Qué pasa con la derecha y la izquierda? Bueno, no hay problema con estos, pero tal vez los cinco deberían estar amarrados a la derecha. Eso lo podemos hacer. Simplemente haciendo clic a la derecha. Ahora bien, el precio siempre va a la derecha, a la más derecha, y estos se quedan a la izquierda, lo que tiene sentido. Bueno, hasta aquí. Eso es un problema. Desafortunadamente no resolver esto sin un diseño automático, necesitamos un diseño automático para esto. Si solo volvemos, lo que podemos hacer aquí es que podemos ponerlos en un layout automático, y podemos decir izquierda y derecha. Ahora se van a extender y se puede ver que se detiene aquí mismo y luego podemos decirle Ap. Rap significa que en cuanto esté demasiado ajustado, el precio debería bajar. Como puedes ver ahora el precio bajó, pero está un poco desordenado porque los ajustes aquí están deshechos. Aquí, dice auto, pero para el espaciado vertical, es 58, lo que no tiene sentido. Entonces haremos 16 u ocho. Pero entonces el número va a quedar oscurecido por el botón Entonces preferentemente, también deberíamos poner el botón, ya sabes, yo sólo voy a controlar Z, sólo voy a volver un poco atrás. Así que solo para recapitular, vamos a hacer este espaciado ocho, y vamos a hacer de este un diseño automático con un dos, y vamos a decir izquierda y derecha y atarlo al fondo Ahora, veamos qué pasa. Vamos a hacerlo mucho más amplio, sigue funcionando. Sobre demasiado pequeño. Ahora funciona, pero ahora la macha tiene un problema. Esfix tomaremos la macha, cortaremos, y la agregaremos aquí y la pondremos arriba Con los botones de flecha, puedes simplemente sacarlo hacia abajo o hacia arriba o simplemente con tu mouse. Sólo voy a hacer que el espaciado entre ellos sea más pequeño tal vez cuatro. Ahora veamos abajo izquierda y derecha. Vuelva a probar, obras más amplias. ¿Qué pasa con los pequeños? Como puedes ver, funciona, pero aún golpea la imagen, lo cual es un problema. ¿Qué pasa con el plumón funciona perfectamente? Todo bien. Entonces, el último paso a hacer es obtener también todo esto, cortarlo y agregarlo a todo esto en este diseño automático. Y entonces lo que haríamos es que, ya sabes, lo probaríamos. Vamos a probarlo. Ahora no se extiende con nosotros a la izquierda y a la derecha. ¿Y qué hay de abajo? Tampoco se extiende. Lo que vamos a hacer aquí es simplemente hacer clic en él y vamos a decir, llenar contenedor para derecha e izquierda, vamos a traer esto aquí abajo. Bien. Entonces ahora lo hacemos más amplio. Funciona. Perfecto. ¿Y qué hay de derribarlo? No funciona. Aquí lo que haremos es que también le diremos que llene el contenedor en cuanto a altura. Ahora derecha e izquierda trabaja arriba y abajo no funciona. La razón es que necesitamos cambiar las restricciones y aquí vamos a decir arriba y abajo. Veamos ahora. Perfecto. Estos no se ven afectados. estos elementos no se ven afectados, pero la imagen se hace más grande y reajusta el tamaño de acuerdo con el marco Creo que esta es una solución bastante buena. Sigue siendo limitado, cuando llegas aquí, pero creo que siempre debes tener un límite para tus cartas. Quiero decir, no deberían ser menores que un cierto número. Cuando creas tu tarjeta, debes entenderlo. Pero podemos optimizar aún más esto haciendo este relleno. ¿Bien? Así que estamos recapitulando algunas lecciones, ya sabes, de la última lección que tuvimos Y sí, solo usando ambas cosas, restricciones y usando diseños de auto para resolver esto. ¿Bien? A lo mejor es hacer trampa, a lo mejor no lo es. Pero creo que esta es la solución ideal. Todo bien. Entonces esta es una manera de hacerlo. Y aquí es donde las restricciones pueden ser muy útiles. Es el hecho de que se le puede decir cómo comportarse exactamente. Y ahora, lo que podemos hacer es que también podemos hacer restricciones para todo el marco. Entonces, si hacemos el marco aquí, ya sabes, como por ejemplo, un marco de teléfono, y un marco de teléfono suele rondar los 300, digamos, alrededor de 390 93, 393 de ancho. Esto lo podemos hacer. Lo que podemos hacer es ajustarlo para que sea de izquierda y derecha. Entonces esto es para izquierda y derecha, estas son las restricciones, y para arriba e abajo, solo va a ser la parte superior. Ahora cuando pasemos de teléfono a tablet, esto es lo que va a pasar. Básicamente extenderá la tarjeta. Esta es una manera de hacerlo. Otra forma de hacerlo como lo hicimos antes es copiar y pegar esto y armarlo como un layout automático. Incluso podemos copiarlo y pegarlo más. Así se vería en un teléfono. Entonces lo que vamos a hacer es que vamos a decir que esto debe ser horizontal. Como puedes ver ahora, es horizontal, pero está desordenado, pero vamos a decir wrap No es envoltorio, no va a bajar. El motivo es porque estos están establecidos para llenar sin mínimo. Vamos a decir que no, ya sabes, debería haber un límite. Como te dije, debería haber un límite. Nunca debe ser de extremo abierto. Oh, puede ser lo más pequeño que pueda. No. Tiene que tener, por ejemplo, 200 como el límite más pequeño. Mira lo que pasa ahora cuando llamamos a esto aquí móvil y luego lo voy a copiar y pegar. Entonces esto es lo que son los puntos de interrupción. Vamos a decir, Bien, así es como se vería en el móvil. Pero luego cuando nos subamos a la tableta, vamos a extender la pantalla. Bien. Lo siento, sólo vamos a arreglarlo lo estropeó. Vamos a arreglar las restricciones. Vamos a decir izquierda y derecha. Ahora cuando extendamos esto, esto se va a extender con nosotros, como pueden ver. Esto es ser receptivo. Si tienes un teléfono pequeño, va a quedar así. Esto es lo más pequeño que puede. No puedo ir más pequeño que esto. Si tienes un teléfono más grande, va a quedar así. Si tienes una tableta, va a quedar así, como puedes ver. Ahora puedes ver que esto es iPad M y luego este es un modo apaisado de iPad adecuado, sea lo que sea. Ahora logramos un efecto muy similar al que teníamos en cuanto a estos diseños de auto. Lo logramos aquí y este es, por ejemplo, el modo tablet. Estos son puntos de interrupción. Esto es lo que llamamos puntos de interrupción. Ahora hablamos de restricciones, los puntos de interrupción están definiendo ciertos números donde tu diseño se rompe o no se rompe, pero se rompe de la vista móvil y se convierte o se transforma en una vista de tableta Entonces, lo que hicimos ahora fue un buen diseño receptivo o buen diseño receptivo de borde porque lo configuramos una manera para que estos elementos se ajusten a su lugar. Si agregamos más elementos, si agregamos más elementos a este marco, también deberían ajustarse a su lugar. No importa cómo redimensionemos esto. Pero alternativamente, podríamos simplemente decir en la tableta, debería ser esto, en el PC, debería ser así. Sólo para darte un ejemplo, vamos a crear una versión mucho más amplia. Ahora voy a extenderlo y mostrar cómo debería quedar para el PC. Esto se parece más al tamaño de PC, al tamaño de la computadora portátil. Pero lo que se nota aquí es que este es demasiado grande. Este es un error que tuvimos. En primer lugar, no configuramos un máximo para el tamaño. Así que podemos resolver esto siguiendo adelante y configurando ancho máximo para todas estas tarjetas, o simplemente podemos cambiarlo manualmente. Podemos decir por estos diseños, solo para el PC, voy a escribir aquí PC, solo para la pantalla del PC, estos deberían tener un mínimo, no de 200, sino de 300. Y entonces deberían tener un máximo de 500. Cuando agrego otro, te voy a mostrar cómo parece que solo debería tener 500. Como puedes ver ahora, los elementos aquí son diferentes a los de aquí. Tienen diferentes mínimos y tienen diferentes máximos De esto se tratan los puntos de interrupción. Se trata de ajustar cómo se verían las cosas. Basado en el tamaño de la pantalla, ¿verdad? Como dije antes, hacer diseño que sea totalmente, completamente 100% receptivo no es posible. Siempre va a haber problemas. Va a haber una pantalla que sea demasiado pequeña o demasiado grande. Yo mismo trabajo. Tengo una pantalla ultra ancha, que es demasiado ancha. Y así para la mayoría de los sitios web, no se ven exactamente bien, y eso es completamente normal. Eso sucede. La mayoría de las veces cuando abres un sitio web, se encoge. Tienes la pantalla es así de grande, y entonces todo el sitio web solo está tomando la parte media o tal vez la parte izquierda. Y entonces esto es algo común porque no podemos asegurarnos de que lo sepas, nuestro diseño se ve bien en el 100%, todos los dispositivos, todos los tamaños de pantalla. Y así es por eso que tenemos que tener un compromiso. A este compromiso se le llama puntos de interrupción. Y en estos puntos de ruptura, tenemos la libertad de ajustar las cosas. Podemos decir, ¿sabes qué? En lugar de estos, en el teléfono, por ejemplo. Bueno, se puede ver en la PC, puedo ver hasta siete tragos, ¿verdad? En la tableta, puedo ver, cuatro tragos y dos mitades. En el móvil, sólo puedo ver tres. Entonces podemos decir, espera un minuto, espera un minuto. mejor en el móvil, esto no debería ser un movimiento de desplazamiento hacia abajo para ver, tal vez debería ser un control deslizante. Entonces lo que hago es desactivar el wrap y lo mantendría así como deslizador para que puedas deslizar los elementos de derecha a izquierda. Muchas apps hacen eso y vamos a ver ejemplos de eso. Entonces lo que podemos hacer es que puedes ver todas las bebidas aquí y luego podemos copiar esto, pegarlo, y luego aquí tomarías otras bebidas, tal vez diferentes tipos de bebidas o de diferente color. Aquí tienes tu primera opción, puedes desplazarte por ellas y te puedo mostrar cómo se vería. Sólo voy a configurarlo y voy a decir desplazamiento horizontal Y así se vería en el teléfono. Esto tiene mucho sentido. A lo mejor el teléfono debería ser un poco más largo. Esto tiene mucho sentido porque querrías ver diferentes categorías y a veces desplazarte horizontalmente te muestra mucho más solo desplazarte En lugar de ver tres cartas grandes, tal vez las tarjetas deberían ser pequeñas. Nuevamente, los puntos de interrupción te dan la libertad de ajustar y adaptar tu contenido pendiente o en función del tamaño de pantalla que tengas Entonces aquí, no es necesario usar deslizadores horizontales. Ya ves una buena cantidad en tu pantalla, así que no necesitas eso. Entonces eso es algo en lo que pensar. Entonces, para recapitular lo que aprendimos hoy, aprendemos sobre dos conceptos principales que son las restricciones y los puntos de interrupción Las restricciones son básicamente nuestra forma de atar contenido en un marco para decirle a Figma a qué lado de este marco debe estar atado este contenido, a la parte superior o inferior o a ambos, cuando extendemos esta pantalla, ¿debería el elemento, expandirse o debería permanecer atado a la parte superior o inferior? Y de manera similar, derecha o izquierda, y ese es básicamente todo el concepto. Esto nos permite comunicarnos con Figma, configurar las cosas para que los elementos puedan extenderse, estirarse o moverse de la manera correcta También aprendimos sobre los puntos de interrupción, que nos permiten crear diferentes tamaños de pantalla y configurar diferentes looks para cada tamaño de pantalla Para el móvil, tiene un aspecto diferente para tablet, aspecto diferente, y PC, uno diferente. Ahora, por lo general son solo estos tres. No tienes que ir más allá y decir monitor ultra viento de PC grande. No, no necesitas eso. Y la mayor parte del tiempo, también puedes configurarlo para que puedas decir todo más pequeño que este tamaño hasta 393 o algo así, 393-530, eso va a ser todo Sólo para aclarar esto un poco mejor. Es decir que cualquier cosa por encima de 393 e inferior a 530 en cuanto a ancho debe ser de acuerdo con este diseño. Entonces cualquier cosa entre 530, a partir del 530 o cualquier número que configuremos, estos números son simplemente aleatorios. Yo sólo los escojo al azar. 530-1200, la pantalla se considerará una pantalla de tableta y seguirá este aspecto de diseño exacto Entonces otra vez, una vez que pase de cualquier pantalla que sea 1274 o superior debe seguir estas reglas Entonces, básicamente, esto tiene sus limitaciones, pero cuando trabajamos con auto layouts, evitamos muchas de estas limitaciones. Mi consejo para ti es que uses tanto Best Words usa diseños de auto, usa restricciones y puntos de interrupción para hacer el mejor diseño absoluto y no tener ningún compromiso cuando se trata Porque debemos tratar de lograr la máxima y la mejor cantidad de capacidad de respuesta tanto como podamos, y entonces podemos llamarlo un día Pero solo trabajar con restricciones es demasiado limitante y solo trabajar con diseños autos también es demasiado limitante. Así que trata de usar ambas cosas. Ahora bien, para darte un ejemplo, un último ejemplo de lo que podrías hacer con las restricciones, es un caso muy especial de lo que solemos trabajar. No tiene que hacerse de esta manera, pero esta es una forma en la que podrías hacerlo. Ahora, agreguemos una pantalla McPro de 16 "por aquí. Digamos que estamos diseñando un sitio web, este sitio web suele tener una barra de navegación Estoy creando un marco aquí y voy a darle un color, así que tal vez debería ser verde. Normalmente tendríamos un logo. Pero en vez de un logo, sólo voy a añadir este círculo, esta elipse Este es ahora nuestro logo. Convirtamos esto en un diseño automático. Este diseño automático tiene un marco dentro de él, y este marco es nuestro Navbar Vamos a llamarlo Navbar. Tiene nuestro logo aquí. Voy a llamarlo logo. Y luego tiene algunos elementos del menú. Podría decir, podría decir obra o obras de arte o algo así. Puedes hacer esto 24. Esto está haciendo un Navbar muy grande. Entonces aquí dice Team Au nosotros. Y luego tenemos contacto. Entonces tal vez tengamos un botón. Voy a copiar y pegar esto, hacer este diseño automático con shift y A y luego darle un color y luego voy a elegir este click yo para usar la herramienta cuentagotas, escoge el color aquí, y luego hacer esta vuelta con un radio de esquina de ocho o tal vez 24 y luego voy a hacer este 16 y luego voy a hacerlo de arriba y abajo solo El botón debería decir reservar una cita. Voy a traer estos aquí a la derecha. Empecemos por la izquierda. Ahora tenemos este menú justo por aquí y vamos a comprobar y vemos que el ancho del mismo es de 1728 Pero lo que voy a hacer es que voy a elegir todos estos, y voy a enmarcarlos. Voy a enmarcarlos, no a los diseños de auto. Ahora mismo, estamos tratando de no trabajar con diseños de auto tanto como podamos. Lo primero es lo primero, ahora tenemos un marco. Eso se llama barra NAB dentro de ella, llamemos a esta barra esencial de Navbar elementos esenciales de Navbar Entonces tenemos estos puntos y tenemos este marco que es nuestro llamado a acción CTA que vamos a hacer es vamos a configurar esto Vamos a elegir estos y vamos a seguir adelante y hacer clic en este botón. Una vez que eliges muchos elementos y haces clic en este botón, esto va a igualar los espacios entre ellos. Voy a elegir todas ellas y hacerlas alineadas a la derecha. En lugar de alinearse a la parte superior, van a estar alineados con el centro. Y entonces sólo voy a ponerlos al máximo derecho del marco para que veas que el marco está justo aquí, y yo solo voy a centrar también, ponerlos en el centro. Ahora están centrados en el marco. Del mismo modo aquí, voy a alinearlo a la izquierda. Ya está alineado y voy a hacerlo en el centro. Así que vamos a probarlo. Ahora cuando cambiamos el tamaño aquí, no pasa nada, pero tenemos que cambiar el tamaño del marco interior de los elementos Navbar Se puede ver que está funcionando, y cuando lo llevamos a la derecha, está funcionando. Todo bien. Entonces ahora lo que vamos a hacer es que vamos a elegir estos elementos esenciales de Navbar y vamos a configurar las limitaciones de la misma Vamos a decir izquierda y derecha, yendo a izquierda y derecha, y vamos a decir que va a tener arriba e abajo también. Entonces ahora lo que pasa es cuando extendamos esto, va a venir con ellos, va a estar centrado. Y cuando lo extendamos a la derecha, va a ir con eso. Pero lo que vamos a hacer es ahora mismo que está configurado como relleno. La barra de navegación general se configura como relleno. Ahora considera que tenemos esta pantalla del MacBook Pro de 16 pulgadas. Pero, ¿y si fuera más pequeño? ¿Ves eso? Ahora, configuramos la Navbar para que estos artículos permanezcan a la derecha y el logotipo quede a la izquierda ¿Y si es más grande? Bueno, todavía va a quedar bien. Quiero decir, va a parecer un poco vacío a partir de aquí, pero eso está completamente bien. Pero hay un problema porque antes que nada, una vez que llegamos a la talla, ahí es cuando deberías tener un punto de interrupción Ahí es cuando deberías decir cuándo llega a aquí, es cuando se convierte en modo tablet o incluso modo teléfono. Ahí es cuando empezamos a considerar la pantalla es una tableta en lugar de una PC. Entonces podemos usar un menú de hamburguesas en lugar de esta barra de navegación horizontal Pero esa es una lección para otro momento. Pero tenemos otro problema es que cuando lo extendemos demasiado, digamos que tienes una pantalla en blanco como la mía, entonces tienes todas estas opciones en un lado y el logo en el otro lado, se ve un poco desordenado ¿Cómo podemos arreglar esto? Bueno, hay una manera de arreglar esto. La forma de hacerlo es básicamente configurar la barra de siesta interna, los elementos esenciales de la barra de nab y decir que ésta debe tener un ancho máximo Pero la única manera de hacerlo es si hacemos de la propia Navbar un layout automático Tenemos que usar diseños de auto. Una vez que hagamos eso, vas a ver aquí algunas restricciones, podemos ajustarlas, podemos hacer el 16, 24, depende de ti. Entonces vamos a elegir esto aquí mismo, el Navbar interior, los elementos esenciales de la barra de navegación, y vamos a decir agregar ancho máximo de Bien. Entonces vamos a configurarlo para llenar el contenedor, y vamos a asegurarnos de que la barra NAP, el fotograma completo esté centrado en el medio. Iba a la izquierda, solo lo centramos. Ahora, mira lo que sucede cuando lo extendemos o mira lo que sucede cuando lo hacemos más pequeño. Bueno, todavía se ajusta correctamente hasta cierto punto, que es lo que teníamos. Bueno, ¿qué nos beneficiamos de esto? ¿Por qué tuvimos que usar el diseño automático? Bueno, ahora cuando lo hacemos mucho más amplio, se detiene. Como pueden ver, en cierto punto, dejó de crecer y este cierto punto es exactamente 1,400 porque ese es el máximo que configuramos Bueno, ¿qué es todo el alboroto? ¿Por qué hicimos esto? Bueno, la razón principal por que podrías hacer esto es para asegurarte de que si alguien tuviera una pantalla más grande, que su experiencia no se va a estirar hacia la izquierda porque estos extremos van a impedir que la persona vea correctamente la navegación Por lo general, como regla general, lo que podrías hacer es que podrías o deberías establecer un máximo para que todo, mayor parte del contenido de la página permanezca en el medio. Incluso aconsejaría esto para la mayor parte del contenido. Si tienes un sitio web o una app o programa o lo que sea, no debería extenderse hasta los máximos hasta los extremos a menos que el caso de uso sea algo más profesional Por ejemplo, la propia Figma, cuando tienes una pantalla ancha, estás usando la pantalla panorámica para tener un espacio más grande con el que trabajar Y entonces puedes tener estas ventanas a la izquierda. Está bien. No necesitan estar centrados. Lo que hay que centrar es tu trabajo. Pero en tal caso, hay que pensarlo desde una perspectiva de experiencia de usuario. Hay que pensarlo desde la perspectiva de los propios usuarios. Cuando se trata de un sitio web, la navegación es una de las partes esenciales. Contenido de su sitio web. Si hay una imagen, si hay un texto, quieres que ese texto sea visible y legible. Deberían poder leerlo y experimentar el sitio web. La mejor manera de hacerlo es mantenerlo más o menos en el medio, no completamente estirado. Déjame explicarte a qué me refiero. Cuando lleguemos aquí, hacemos esto pequeño para una tableta, y luego agregamos algo de texto aquí y decimos, no lo sé, solo voy a usar IA. Escribe 600 palabras sobre delfines. Ahora te estoy pidiendo que escribas algo y es escribir algo muy largo. Entonces voy a limitarlo a 300. Bien. Ahora ya ha terminado de escribir. En este momento está dentro de este diseño automático. Voy a hacer de esto un diseño automático en sí mismo haciendo clic en Mayús y A solo para darle un poco de relleno. Ahora, digamos que esto es texto en tu sitio web. Ahora lo que puedes hacer es elegir este marco y ya está configurado para llenarlo. Ahora cuando extiendes esto, el texto se extiende con él, lo cual es bastante genial porque ahora tienes mucho más espacio para leer. Bueno, ¿y si tu pantalla fuera realmente amplia? Esto es extremadamente difícil de leer porque en este punto, ahora hay que leer todo el camino desde la izquierda hasta allá y luego volver otra vez, y esto es bastante agotador La mayoría de los sitios web, se ajustan para pantallas más amplias estableciendo un límite. No estoy hablando de pantallas realmente, realmente anchas. Quiero decir, aquí mismo, tenemos 2.600. Pero hasta mil 600, 1,800, 900, hay muchas pantallas así, y esto sigue siendo demasiado. La solución para es elegir este diseño automático y darle un máximo de 1,400 o 1,200 o lo que quieras, y puedes mantenerlo alineado a la izquierda o preferiblemente medio a la parte superior, media, y luego mirar lo que pasa ahora No importa cuán grande sea tu pantalla, todavía vas a encontrar el texto en el medio, que es un poco más fácil de leer. Si lo haces más pequeño, entonces no va a haber este espacio en blanco, este espacio en blanco a la derecha y a la izquierda. Se va a ajustar. Así se vería en una tableta, aún legible y no hay espacio desperdiciado a la derecha o a la izquierda, y así sucesivamente. Así es básicamente como funciona. Usando restricciones, usando a diseños para hacer que su texto sea legible y ajustarlo para todo tipo de pantallas. Pero como mencionamos, como platicamos, usar puntos de interrupción es una gran cosa porque te ayuda a evitar estas situaciones No puedes mostrar cómo se vería en el teléfono porque el menú está todo desordenado, por lo que necesitas un menú móvil Eso es algo que debes tener en cuenta. Tener menú móvil te permite tener un punto de interrupción de una versión móvil, una vista móvil puede ayudarte a reemplazar esta barra de navegación en lugar de tener este lío superpuesto aquí. Pero solo quería mostrarles cómo pueden crear una barra de navegación con diseños de auto así como restricciones Así es básicamente como funciona, y solo asegúrate de entender los máximos y mínimos así como las restricciones y puntos de interrupción porque realmente son útiles Ahora, por supuesto, crear un diseño a un nivel básico no requiere de eso. Pero cuando estás creando, como dije, un diseño responsive, ahí es cuando estás trabajando a una mayor capacidad a un nivel superior. Y sí, adelante, practícalo por tu cuenta y domínalo. Muchas gracias por escuchar. Espero que no esto demasiado complicado para ustedes chicos. En la siguiente lección, voy a estar trabajando un poco más rápido, asumiendo que ustedes ya están un poco más familiarizados con los conceptos. Va a ser una buena práctica para que entiendas como deberías estar trabajando. Muchas gracias por escuchar, y nos vemos en la siguiente lección. 9. Creación de secciones adaptativas en el mundo real: Hola ahí. En esta lección, vamos a tomar este diseño, que encontré en las formas comunitarias y está disponible públicamente. Alguien lo logró. Gracias, extraño. Voy a seguir adelante y tratar de convertir esto en un diseño más o menos receptivo usando los conceptos que aprendimos sobre las técnicas y conceptos que hemos aprendido, incluyendo diseños de auto, restricciones y puntos de interrupción No tenemos mucho tiempo. Voy a tratar de hacer esto muy rápido. Como ya puedes ver, este diseño carece mucho. Está funcionando solo con grupos y sin auto layouts o cosas así en absoluto. Se puede ver eso aquí. Quiero decir, aquí hay un diseño automático, creo, pero, ya sabes, es solo un botón o algo así. Entonces ahora, naturalmente, partiríamos desde el principio. Ya sabes, empezaríamos con la creación de botones que sean consistentes y todo estilo. Pero no voy a hacer eso. Sólo voy a trabajar con lo que tengo solo para mostrarte un pequeño atisbo de cómo podría estar luciendo Sólo voy a copiar y pegar esto solo para que podamos tener una versión original y luego algo así como una versión editada, ¿de acuerdo? Entonces lo primero es lo primero, hagamos de esto un punto de partida de flujo, y quiero ver cómo se ve. Entonces me gustaría previsualizarlo y ver cómo se ve en mi pantalla. Todo bien. Entonces lo primero es lo primero, vamos a tratar de entender lo que está pasando aquí con esta sección. Puedo ver que aquí hay una imagen con algún texto con esta imagen encima. Ahora bien, esto está completamente bien para usar este tipo de grupo, pero estos no deberían ser un grupo en absoluto. Así que vamos a comprobarlo. Ahora, primero vemos que esta es una imagen en el fondo y luego hay una superposición encima de ella, y luego está este texto. Entonces lo primero es lo primero, voy a empezar por recrear esto más o menos, y voy a tratar de ver qué tan cerca puedo llegar Entonces conseguimos el ancho correcto, y esto es casi correcto. Entonces lo que voy a hacer es tratar de ver el radio. Entonces aquí son seis. Entonces voy a conseguir la imagen. Sostener el control, voy a escoger el relleno, agregarlo aquí, y luego tenemos este relleno lineal. Voy a agregarlo encima, pero voy a asegurarme de que sea más o menos similar, algo así. Entonces voy a tomar el texto aquí. Esto parece ser, ¿es esto un grupo? Este es un grupo, así que voy a traerlo aquí. Y voy a hacer un diseño automático manteniendo pulsada Shift y A. Ahora en lugar de ser un grupo, es un diseño automático con cuatro espacios. Mientras tanto, esto no es un diseño automático así que voy a convertirlo en un diseño automático y luego se va a quedar así. Voy a volver a tomar las dimensiones aquí y voy a hacer las adecuadas y además el ancho es 270. primero es lo primero, solo voy a asegurarme de que la imagen no esté recortada, debe llenarse Incluso si no se ve uno a uno, fill se asegura de que la imagen no va a ser problemática cuando se redimensiona Ya ves cómo se ve esto. Esto es problemático. Por eso tenemos que usar la opción llena. Cuando usamos eso, no debería tener un problema. Entonces vamos a asegurarnos el texto esté en el lugar correcto, así que lo vamos a colocar hacia abajo y vamos a asegurarnos también del espaciado, el relleno es adecuado. Aquí vamos a hacerlo 16 por 16 y llamarlo un día. Ahora tenemos las mismas dimensiones. Voy a convertir esto en un componente y voy a decir tarjeta de artículo. Voy a reemplazarlo aquí y sólo voy a pegarlo aquí. Entonces voy a crear otra versión justo debajo de ella usando esta imagen. Yo sólo voy a tomar el relleno, pegarlo aquí, quitar el relleno viejo, poner la imagen aquí, y hacer este relleno de nuevo, no prop. Entonces ya veremos, copiaremos este texto. El tipo de letra aquí es diferente, así que solo voy a reemplazar esto con monster rot on hole page. Bien. Lo siento por eso Montserrat, reemplace en la página Hole, seleccione estilo Debe ser de reemplazo medio. No se ve muy similar, pero está bien. No hay problemas. Entonces aquí dice hoy. Yo sólo voy a borrar estos y voy a traer estos y ponerlos en un autotolayou manteniendo turno en A. Entonces ves Es dentro de un grupo. Voy a quitarlo del grupo y voy a agregarlo aquí. El espaciado aquí es de 23. Lo haremos 24 solo para que podamos tener un número adecuado. Entonces tenemos esto aquí. Ahora, podemos optar por mantener esto más o menos como una imagen que depende de nosotros porque es un poco y se extiende hacia la izquierda, lo cual es un poco problemático para mí. Una cosa que podemos hacer es que podemos tener esto ahora mismo como un diseño automático. Así que solo voy a hacer clic en Mayús y A. En vez de que sea un grupo, ahora es un diseño automático, y luego tenemos, este tipo, y eso, todas estas cosas, voy a convertirlas en un marco, clic derecho y luego vamos a decir selección de fotogramas. Lo que voy a hacer es que los voy a hacer. Voy a bloquear la relación de aspecto aquí dando click aquí para que cuando los redimensionemos, quiero decir, si lo hacemos, los volvamos de un fotograma, lo voy a quitar manteniendo el retroceso de control y voy a hacerlos un grupo con gen control Voy a bloquear la relación de aspecto que cuando los cambiemos de tamaño, básicamente no se distorsionen Entonces lo que podemos hacer es hacer las restricciones a la derecha, esta a la izquierda, y esta a la izquierda, y luego veamos cómo se ve cuando la parte trasera la dimensiona. No es tan malo, creo, ¿verdad? Todo bien. Ahora mismo, no está tan mal. Ahora lo que podemos hacer es juntarlos en un layout automático, mantener pulsada Shift y A. Ahora, claro, va a reorganizarlos un poco diferente, pero ahora son un layout automático Ahora, descubramos qué está pasando con el menú. Aquí, esto es un rectángulo. Lo primero que vamos a hacer es que vamos a eliminar esto. No tenemos un rectángulo en el fondo. Sólo tenemos un marco. Sostenga F, cree un marco, y luego este marco contiene todos estos tres elementos dentro de él. Vamos a convertir esto en auto layout. Así como así, se aseguró de que el espaciado y todo sea correcto y adecuado. Entonces los voy a sostener y voy a crear estos en un diseño automático interno, si recuerdas lo que hice la última vez. Voy a decir que el ancho máximo debería ser de 1,400. Podemos hacerlo aún más pequeño mil 200 y vamos a fijarlo para que llene el contenedor. Vamos a establecer esto también, quiero decir, ahora mismo, todavía no, pero vamos a hacer que llene contenedor más tarde. Vamos a darle un relleno, vamos a hacerlo blanco. Si notas el fondo es un poco blanquecino. Comprobemos cómo se ve ahora. Bien. Bonito. No se ve tan diferente. Voy a seguir adelante esto en un menú fijo. Porque eso me gusta. Ya se puede ver que viene abajo con nosotros y va a lo largo. Una cosa que no me gusta de esto, esto parece un botón, pero normalmente debería ser un campo. Sólo voy a extenderla y hacerla centrada a la izquierda, y voy a hacerla un poco más legible. Voy a hacer el texto aquí, darle el mismo color, pero hacerlo un poco más oscuro. Y tal vez pueda hacer que el fondo sea un poco más ligero. Eso se parece más. Ahora, ya no parece un botón, parece un campo. Bien. También puedo simplemente llenar el contenedor. Ahora mismo podemos ver aquí hay 101. Intead de 101, voy a hacerlo Auto. Lo que hace Auto es simplemente crear espaciado automático. Ya ves que las noticias deportivas se están extendiendo demasiado. Voy a hacer que se abrace contenido. Déjame simplemente reemplazar la fuente aquí. Sólo le voy a dar una fuente diferente. Todo bien. El tema es que es que todo está de cerca, lo que me está creando un problema. Entonces intentemos resolverlo. En lugar de Auto, podemos darle 24. Ahora veamos cómo se ve. Se ve un poco mejor. Incluso podemos llegar a 36. Esto se ve un poco más natural. Un poco más espacioso. Ahora tenemos esta sección resuelta. Aquí, ¿qué podemos hacer? Tratemos de entender. Aquí, tienes un rectángulo con el fútbol en él, que ya es catástrofe Lo que voy a hacer es que voy a crear un marco en su lugar. El mismo color, y le voy a dar radio y voy a agregarle este futbol. Ahora acabamos de sustituir este elemento aquí. Vamos a hacer lo mismo por los demás. Copia esto, pégalo, y voy a tener básquetbol en su lugar. También podemos hacer de esto un autoayp esto también, y solo voy a tener la misma longitud aquí y voy a borrar esto y esto Ahí vamos. Colócala aquí y enjuaga y repite. No tiene que ser perfecto. No, estas son solo imágenes para que podamos mantenerlas como solo imágenes. Eso está completamente bien. ¿Bien? Entonces lo que voy a hacer es que voy a hacerlo en vez de ponerlos uno al lado del otro, voy a poner déjame antes que nada, solo elige a todo este grupo y lo voy a colapsar. Voy a quitar al grupo, desagruparlos manteniendo el control y el retroceso Entonces voy a elegir estos y hacerlos un diseño automático, estos, pero luego como un diseño automático, arregle el errata aquí. No importa. Aquí, el diseño automático aquí. Aquí ves también está el mismo tema de que hay una imagen dentro de esto. Sólo vamos a extender la imagen, extenderla y voy a hacerla negra debajo de ahí, o simplemente voy a dejar caer el color aquí y darle seis. Ahora esta imagen no necesita este fondo. Entonces voy a armar estos. Ahora, idealmente, el espaciado debería ser similar. Aquí son 31, 30, 31. Vamos a hacer todos estos 36. ¿Qué tal eso? Los juntaremos y haremos de todo esto un diseño automático, solo voy a asegurarme de que todos estén llegando al borde. Casi. Veo aquí hay algunos elementos innecesarios aquí. Voy a elegir todo y luego voy a anular la selección de este diseño automático Borré todo lo que hay detrás de ellos. Bueno. Aquí dice categoría y luego voy a hacer de esto un diseño automático y el espaciado aquí es 16. Bueno. Recordemos eso. Ahora bien, estos los voy a hacer envolver para que si alguna vez los hago más pequeños, se envuelvan así así. También podemos configurarlos para que se llenen. Eso también es algo que podemos hacer. Eso depende de nosotros. Se puede ver que está lleno. Pero entonces si hacemos eso, tenemos que asegurarnos que estos no se recorten, sino que se llenen Ahora, obviamente, esto va a quitarle un poco el encuadre que quien hizo esto hizo con él Pero ahora mismo, vamos a tener que correr ese riesgo, no hay problema. También necesito hacerlo aquí. Todo bien. No se ve tan mal. Pero asegurémonos de que haya un mínimo. Decimos que un mínimo es 200. Tan pronto como los hagamos demasiado pequeños, simplemente colapsarán y se meterán uno debajo del otro. Creo que se ve bastante bien. Bastante aseado. Esta es una respuesta bastante agradable. Aquí estamos llegando a otra parte dura. Los elegiremos juntos y los haremos un diseño automático, incluso espaciado. Quiero decir, no tenemos que hacer eso. hacer de estos un diseño automático por su cuenta. Entonces esto es cuatro y luego con esto, el espaciado es 12. Y luego haremos una maquetación automática con esto. El espaciado es automático, preferiblemente no debería serlo. Quiero decir, vamos a hacer 16. Entonces voy a tomar esto, café, pegarlo, hacerlo componente y decir vertical u horizontal, no es una tarjeta. Tenemos ficha Artículo, Artículo horizontal, y luego voy a borrar esto justo por aquí, basar esto. Perfecto. Entonces voy a copiarlo y voy a tomar el texto aquí. Aquí hay muchas fuentes diferentes que están usando que no aprecio porque está tomando mucho tiempo averiguarlo. Sólo voy a rehacer esta pudrición monstruosa, semi atrevida. Bien. Bien. Todo bien. Entonces copiamos esto, ¿verdad? No, lo siento, no copiamos esto. Copia esto, pégalo. Boom. Tomaremos la imagen manteniendo el control, pegarla, eliminarla, copiarla, pegar, tomar el texto otra vez, ponerla aquí tomar este texto, pegarlo aquí, tomar este texto, basarlo aquí, y luego tenemos la imagen también, tomarla, pegarla, boom. Ahora, eliminaremos estas dos versiones y las pondremos aquí. Bien. Y ahora, lo que vamos a hacer es que vamos a elegir estos con los divisores y voy a convertirlos en un diseño automático, y los voy a hacer a la derecha Van a estar alineados a la derecha. Así se puede ver el mismo espaciado que tenían. Aunque podemos hacer el espaciado, por ejemplo, técnicamente podemos hacer que llene toda la parte así o simplemente así. Es decir, me gustó como era. No hay problema. Y entonces tenemos esta imagen aquí. Tienes que pensar en todo en términos de diseños de auto. ¿Está alineado horizontal o verticalmente? Éstas están alineadas verticalmente. Esto se alinea verticalmente con ellos. Ves esto son ocho, pero aquí eran 16, tal vez deberías hacerlo 16, ¿verdad? Entonces tienes estas alineadas horizontalmente. Pero primero, tenemos que convertir esto en un diseño automático. Esto lo haremos creando este visual. Tomaremos el texto. Quiero decir, veamos qué es esto, déjalo a un lado. Toma la imagen, hazla seis radios redondeados, toma este relleno. Está al 60%. Hacer el 60%, quitar el relleno blanco, y luego vamos a tomar este texto y ponerlo encima encima de este diseño. Vamos a hacer un layout automático con shift y A. Vamos a hacer 12 en vez de 14. Se puede ver que este texto es demasiado grande, así que sólo voy a hacerlo abrazar. Parece que vamos a cambiar el texto. Montserrat, audaz, hazlo extra audaz o algo así. Bien. No hay problemas. Ahora vamos a tomar esta categoría lo vamos a poner arriba. Ahora tomaremos esto y haremos de todo esto un diseño automático. Ahora, Figma es inteligente, el espaciado, intenta que sea similar para que esto esté arriba y esto esté abajo, pero sí 358 En lugar de eso, sólo vamos a decir auto. Auto significa que no importa lo grande que sea, el ciclismo va a estar arriba y esto va a estar abajo. Acabo de notar que la imagen se está estirando, así que vamos a hacer que vuelva a llenarla bien y veremos qué más podemos hacer. Haremos estos valores propios 16 16 o 24, 24, y borraremos todo este lío aquí. Ahora, llevaremos esto al centro de atención. Lo estiraremos y eliminaremos esta caja y crearemos un marco en lugar de él. Este marco va a incluir todos estos elementos, como puedes ver, y vamos a convertirlo en un layout automático. Vamos a tener que incluir esto en él. Vamos a poner esto en el marco. Ahí vamos. Vamos a hacer de todo esto una capa automática, y luego la vamos a extender aquí. Lo que vamos a hacer es que vamos a hacer que ambos tengan contenedor de llenado. Ellos van a compartir 50 50. Eso es lo que va a pasar. Pero vamos a asegurarnos de que haya relleno a derecha e izquierda. En realidad, no hagamos relleno porque la imagen no necesita relleno, pero hicimos esto en una capa automática por sí sola, así que le daremos a esta su propio relleno arriba y abajo izquierda y derecha, y luego haremos la distancia entre ellos 24 o algo así. Bien. Y vamos a dar este color, que es este color, creo, y tiene que tener radio de esquina de seis. Pero puedes ver que aquí hay un poco de espaciado. Así que podemos hacer es que podamos decirle a esta imagen que llene la altura también. Ahora está llenando la altura para que no haya espaciamiento hacia arriba y hacia abajo. Se puede ver que esto se ve bastante limpio, bastante similar. Quiero decir, aquí hay un poco más de espaciado aquí. Podemos hacer eso 36, 36. Ahora, creo que es más similar y hay menos espaciado entre la imagen y el otro texto. Podemos hacerlo como ocho. O algo así. ¿Bien? Bueno. Todo bien. Genial. Ahora, lo que vamos a hacer es asegurarnos de que esto también responda. Qué pasa cuando lo hacemos demasiado pequeño, esto sucede. Esto no es lo ideal. Entonces lo que vamos a hacer es que vamos a crear valores mínimos para estos y vamos a decir una vez que lleguen a los 400, tienen que colapsar o tienen que ir uno debajo del otro, es lo que quiero decir, hacemos clic en basura para asegurarnos de que eso suceda Entonces ahora vamos a comprobarlo. Bien. Bonito. Pero esta parte no responde en absoluto, así que trabajemos en eso. Entonces vamos a hacer clic en estos y hacerlos llenar, lo cual ya están establecidos para hacer. Pero lo que notamos es que algunas cosas no funcionan. Entonces puede estar aquí a nivel de componente, y eso es cierto. Entonces aquí, no hay nada configurado. Entonces vamos a hacer que tanto la imagen como este texto, este marco, ambos se llenen, así que van a compartir un 50 50, y luego vamos a llegar al texto, y ya está llenando aquí, ya está llenando aquí. Perfecto. Creo que esto es bastante bueno. Veamos cómo va a reaccionar ahora. Entonces como pueden ver, está reaccionando un poco. Tenemos el tema de la distorsión de la imagen, podemos arreglarlo. Y tenemos otro tema que es el hecho de que el texto aquí se superpone. El tema es el tema de contenido abrazo aquí. Esto es abrazar contenidos, pero aquí hay algo que no es abrazar ¿Qué es? Son estos. Deben llenar en términos del ancho, deben llenar el contenedor, pero deben tener contenido abrazo cuando se trata del contenido que tiene. Esta opción no está disponible por alguna razón. Entonces ahora tenemos que solucionar problemas Así que intentemos entender esto o por qué está teniendo un problema Entonces vamos a armar este abrazo aquí. Veamos cómo funciona ahora. Sigue teniendo un problema. Bien, entonces creo que aquí cometimos un error porque era un marco dentro de un marco. Quité el marco inferior, así que ahora es solo este marco y luego estos dentro de él. Ahora vamos a comprobar. Todavía de alguna manera no está disponible. A veces esto sucede porque estás un poco demasiado concentrado y necesitas tratar entender cuál es el problema o dónde te metiste la pata y eso puede ser un poco complicado En este momento no está funcionando para nada, así que debemos haber estropeado en algún nivel Esto tiene un relleno. Esto tiene un relleno. Estos tienen un relleno. Algo está pasando. Bien, así que solo para recapitular, aquí tienes un relleno. Aquí tienes un relleno, y aquí tienes un contenedor de llenado. Cuando entres en estos, ya no tienen relleno. Ahí es donde estamos. Vamos a elegir, esto no es un autolayout. Ahí es donde está el tema. Entonces estos deberían tener contenedor de llenado, y todo esto debería tener abrazo. Vamos a comprobarlo ahora. Perfecto. Ese era el tema. En algún nivel, no teníamos un diseño automático, pero todo debería regularse con diseños autos. Ahora lo solucionamos Bien, todavía estamos teniendo el problema de superposición de texto Lo resolveremos haciendo este contenido de Ha hub. Ahora ya veremos, perfecto, funciona perfectamente. Sólo tenemos que asegurarnos de que esta imagen no se recorta de manera similar aquí. Ahora, vamos a comprobarlo. Perfecto. Ahora, voy a revisar las otras partes y ver qué tenemos. Disponemos de suscripción al boletín. Tenemos las cosas, cool, cool. Entonces ahora probemos algo con restricciones. Voy a agregar esto a la izquierda. Lo siento, esto a la derecha, estas a la izquierda, arriba, abajo o supongo que aqui es supongo abajo. Este tipo lo va a poner al fondo. Vamos a poner esto a la derecha, estas a la izquierda. Veamos cómo se ve. Sí, no es genial. Y vamos a hacer esto a derecha e izquierda. Entonces, esto no es tan malo, como se puede ver. Todo bien. Pero estas partes son un poco, quiero decir, no tenemos tiempo para hacer todas estas, así que hagámoslo todo hasta aquí. Ahora el siguiente paso que vamos a hacer es asegurarnos de que todos estos estén incluidos dentro del mismo marco. Hago todo esto en un diseño automático y lo pongo justo en estas líneas de cuadrícula, que son 1170 No estoy seguro de por qué estaban aquí estas líneas de cuadrícula, voy a asegurarme de que esté algo centrada. Voy a asegurarme de que esto también esté centrado. Voy a hacer que escriba una línea para que estas sean línea a la derecha y luego esta imagen pueda ir un poco a la izquierda sin problemas porque aquí no es la imagen más importante. Quiero decir, es solo una imagen, y este es el texto que hay que leer. Entonces, ahora que tenemos esto resuelto, necesitamos asegurarnos de que en realidad sea receptivo. Entonces ahora tenemos este diseño automático y esto como un diseño automático, y haremos que ahora toda la página sea un autotolayou, todo el marco Entonces ahora todo esto es un autoayou. Veamos cómo se ve cuando lo extendemos, no pasa nada porque necesitamos hacer este contenedor de llenado, pero tenemos que limitarlo. Llene el contenedor con un máximo de 1,200. Ahora veamos cómo se ve, no pasa nada, pero cuando lo hacemos más pequeño, debería reajustarse Bien, no está pasando. ¿Por qué? Tenemos que hacer todo en contenedor de llenado. Necesitamos ajustarlo para asegurarnos todas las secciones dentro de él estén llenando completamente el contenedor. Todo bien. Entonces ahora vamos a comprobarlo. Bien. Se puede ver que las cosas se están ajustando aquí. Pero esta zona no es genial. ¿Por qué? Esta área, quiero decir, tiene marcos, algunos diseños de auto, pero no es todo completamente autolayted Esto no es un diseño automático y no está llenando el contenedor. Lo que vamos a hacer aquí es que vamos a hacer esto aquí. Esta es una sección de héroes, y vamos a hacer que esta llene el contenedor. Entonces ahora lo encajamos aquí y vamos a hacer que este también llene contenedor. Pero como puedes ver, va a ocupar demasiado espacio, así que le daremos un máximo de 300. Aún menos 250, ¿ no? No lo sé. Ahora vamos a comprobarlo de nuevo. Bien. Entonces las cosas se ven geniales, otras cosas como esta zona no se ven tan bien. Lo que yo sugeriría personalmente es convertir esto de alguna manera en un marco. Entonces vamos a convertirlo en una selección de fotogramas. decir, lo mejor sería tomar todo esto como imagen, para ser honestos. Eso es algo muy grande tomarlo como imagen porque eso ayudaría mucho. Eso es algo que podemos intentar hacer. ¿Cómo lo hacemos? Podemos copiar esto, pegarlo aquí, y le tomaremos una captura de pantalla, así como así. Pegaremos la captura de pantalla. Y luego borraremos toda esta imagen y tomaremos esta y la agregaremos como fondo a esta sección de héroes. Vamos a convertir esta sección de héroe en un diseño automático y vamos a agregar el relleno y lo vamos a hacer mucho más grande. Esta sección, es llenar, pero le vamos a dar un máximo de 400 y la vamos a extender un poco así. Así como así, lo tenemos como imagen. Veamos cómo se ve cuando lo hacemos más pequeño. Entonces las cosas arriba. Vamos a hacer que llene contenedor. Todo bien. Ahora, como puede ver, la imagen ya no es legible. Ya no puedes leerlo, pero eso es algo con lo que tienes que vivir o puedes seguir adelante y tal vez bloquear la relación de aspecto para que cuando la hagas más pequeña, la imagen también se haga más pequeña. Eso es algo que puedes hacer. Una cosa que me di cuenta es que el fondo no es completamente blanco. Pero aquí, supongo que lo hicimos muy blanco, así que podemos deshacer esto sólo vamos a tomar este color. Bien, solo podemos pedirle a Figma que quite el fondo ¿Vamos a dejar que haga lo suyo? Bien. Ahora vamos a comprobar. Bien. Ahora una cosa para asegurarte de que también tienes todo este diseño automático es tomar todo el cuerpo de la página, deberías darle un poco de relleno a la derecha y a la izquierda. Y a la hora de esto, también debes darle algún relleno a la derecha y a la izquierda 24 o algo así. Y luego lo extenderemos un poco. Lo siento. Voy a hacer este abrazo contenidos desde la altura. Ya puedes ver cómo se ve cuando lo estoy redimensionando. Por lo que se puede ver que muchos de estos elementos se ven muy pulcros. Así se vería en un teléfono, un teléfono muy blanco o una tableta. Pero aquí todavía tenemos algunos temas, que es el envoltorio. También podemos hacer este diseño, llenar el contenedor de llenado, y darle un mínimo de 400 y veamos cómo se ve ahora. Pero tenemos que hacerlos envolver. Ya están envolviendo. Entonces esto es 250. Vamos a hacer esto sí 500 o algo así. Entonces como pueden ver, como llegue ahí, le daremos a este am mínimo de 200. Entonces a medida que lleguemos a este punto, simplemente va hacia abajo. El tema es que le dimos a esto un máximo, así que ahora no puede extenderse a toda la zona. Entonces ese es un problema, y ahí es donde entran en juego los puntos de ruptura. Lo que podemos hacer aquí es que puedo quitar estos. Puedo copiar esto pegarlo y puedo decir, copiar y pegarlo de nuevo, o simplemente hagamos una versión móvil. Yo voy a hacer esto. Entonces voy a decir 393, así es como debería quedar un iPhone. primero es lo primero, me voy a ajustar, hacerlo 16 o no estoy seguro de qué hacerlo. Yo sólo voy a ajustar las cosas para que se vean bien. Eliminemos esto del camino. Genial, genial. Todo esto está bien. Pero aquí, es tener un problema porque este texto, creo, tiene un mínimo o algo así. Esto tiene un mínimo. Vamos a seguir adelante y hacer el mínimo 300. Vas a ver qué pasa aquí. Pero vamos a venir aquí y decir que esto debería envolverse en algún momento y los mínimos deberían ser, vamos a establecer un mínimo, que es de 200 tal vez Entonces puedes ver ahora que se ve mucho mejor. Todo bien. Ahora vamos a subir este lugar es un desastre. Entonces vamos a decir para el móvil, solo para el móvil como punto de ruptura, aquí vamos a quitar el máximo. Vamos a hacer click aquí y vamos a ver el máximo mínimo. Vamos a eliminar el máximo para que esto pueda extenderse al máximo. Y vamos a hacer el relleno de toda esta área 16 en vez de 24 solo para que podamos tener más pantalla inmobiliaria. Y se puede ver que estex aquí es un poco desordenado porque tiene un mínimo, creo, o máximo Entonces vamos a tratar de resolver esto. Entonces, ¿cuál es el problema aquí? Esto tiene un mínimo, quita el mínimo, y luego va a estropearlo así. Voy a decir, voy a tratar de arreglarlo. Bien. Regresar un poco territorio inexplorado. Entonces vamos a decir que vamos a tratar redimensionarlo por nuestra cuenta para eliminar el mínimo Y vamos a decir, bien, vamos a decir que estos son verticales, no horizontales. Y entonces aquí vamos a eliminar la relación de aspecto. Vamos a cambiar esto. Y tal vez podamos seguir adelante y recortar la imagen en este caso solamente. Lo haremos más pequeño. Lo traeremos así. Eso es lo traeremos así. Eso es básicamente todo. Entonces vamos a bloquear la relación aspecratio contra ella solo para que este tipo no se distorsione Ahora lo que básicamente estamos haciendo y podemos cambiar las fuentes por cierto, creo que podemos cambiarlas, podemos hacerlas más pequeñas o más grandes. Como quiera que queramos. Puedes ver esta sección se ve bastante horrible en comparación con lo que teníamos aquí. Quiero decir, aquí se veía mucho más agradable. Aquí, se ve un poco horrible. Entonces podemos hacer es que podemos jugar con estos para que sea texto, imagen, texto, imagen, texto, imagen, o lo que podríamos hacer incluso es que podamos convertir todo esto en No estoy seguro, amable podemos convertirlo en un deslizador. A pesar de que no estoy seguro de lo agradable que sería eso. Pero, hay que preguntarse, ¿cuál es todo el propósito de estos botones? ¿Se puede hacer clic en ellos? ¿Puedes hacer algo con ellos o no? Pero sí, supongo que podrías convertirlos en algo que puedas deslizar a través de un deslizador horizontal o algo así si realmente es necesario. Sí, entonces esta es la idea completa de hacer que la página land dink en forma móvil esté optimizada para pantallas móviles De esto se tratan los puntos de interrupción porque como viste, no pudimos hacer esto a la perfección Incluso ahora, todavía no es perfecto. Al igual que el menú de aquí, me acabo de dar cuenta de que necesitamos centrarlo. Yo no estaba centrado. Esto es que a veces notas estas cosas mucho después, aquí tienes que tener en lugar de este tipo de menú, voy a borrar esto. Voy a borrar. Voy a borrar esto. Solo necesitas tener tres líneas para el menú de hamburguesas. No tiene que ser perfecto. Cortaré esto, lo pegaré aquí, y los haré auto. Ahora tenemos un menú de hamburguesas ahí. Aquí, sólo tenemos que probar esta cosa. Como puedes ver aquí, hay un problema con la búsqueda. Quiero decir, se está borrando completamente aquí. A lo mejor podamos tener un mínimo para ello. Podemos decir, Oye, 100 como mínimo. Cuando hagamos esto más pequeño , llegará a esto y luego desaparecerá. Ese es un buen compromiso, diría yo. En vez de cortarlo, simplemente va a desaparecer y así sucesivamente y así sucesivamente, porque no podemos hacer que estos se cortarlo, simplemente va a desaparecer y así sucesivamente y así sucesivamente, porque no podemos hacer que pongan encima unos de otros ni nada por el estilo. Eso no es realmente posible. Pero esta es una demostración muy rápida y sucia de cómo puedes convertir una página en algo un poco más receptivo. No es fácil, pero tampoco es lo más difícil del mundo. No es ciencia espacial. Así que adelante y prueba esto por tu cuenta. Esta página fue un reto, para ser honestos, porque tenía muchos elementos a la derecha e izquierda y arriba y abajo, y eso puede meterte en problemas. Como puede ver, tenemos que hacer todo con los diseños de auto. Y creo que trabajar con diseños de auto es lo más limpio. Las restricciones son agradables, pero son muy limitadas. Te pusieron en una situación muy dura. Entonces por eso intenté evitar usarlos esta vez. Te mostré cómo puedes usarlos para algunos elementos como estos aquí, pero es muy torpe, así que realmente no lo recomendaría Y así es como se hace. Muchas gracias por escuchar, y nos vemos en la siguiente lección. 10. Microinteracciones: Entonces en esta lección, me gustaría hablar de micro interacciones. Ahora bien, lo que llamamos micro interacciones son básicamente las pequeñas interacciones que tienes a medida que usas o navegas por un sitio web o una app o cualquier tipo de experiencia digital, y tienes cosas muy pequeñas que cambian. A lo mejor cambian de color y forma y tamaño. Algo pasa y estas micro interacciones, te dicen algo, comunican ciertos tipos de información. Ahora bien, una de estas microinteracciones que usamos casi hoy en día en todo, para ser honestos, son los efectos hover Esto es algo que normalmente usamos con botones. Los usamos con muchos elementos, pero lo más importante con botones. Hoy vamos a practicar hacer eso y tratar de entender cómo las microinteracciones afectan la experiencia del usuario y tratar de ver cómo podemos aplicar eso con Figma de la manera más fácil Créeme, esto es bastante fácil. Entonces, si hasta ahora no has hecho ningún prototipo, esto va a ser algo nuevo para ti Entonces, si no sabes a lo que me refiero, tienes tu página de diseño aquí, tu pestaña de diseño. Entonces, cuando haces clic en cualquier elemento, puedes configurarlo en cuanto al diseño, y luego tienes tu pestaña de prototipo aquí donde puedes configurar las interacciones, ¿de acuerdo? Entonces, como pueden ver, cuando cierro el cursor sobre las interacciones, se vuelve blanco Quiero decir, es un poco grisáceo. Y cuando pasas el cursor sobre él, se vuelve blanco. Y esto es exactamente a lo que me refiero cuando hablo micro interacciones porque esto me dice que Figma entiende en lo que estoy rondando. Entonces cuando haga clic aquí, algo va a pasar, como pueden ver, ya pasó algo. adelante e intentemos crear algunas micro interacciones usando estos botones, estas instancias de un componente que ya habíamos hecho antes en una lección anterior. Ahora, lo primero es lo primero, como dije, primero, vaya a la pestaña de prototipado Ahora, como te darás cuenta, las cosas se ven un poco diferentes de lo normal. Entonces, cuando eliges algún artículo, vas a ver estos pequeños círculos a cada lado. Y cuando te acerques a ellos, van a ser signos más. Esto también es una micro interacción. Cuando llegues a ellos, estas son opciones para que hagas clic y mantengas presionado, y luego puedes poner una flecha a cualquier otra instancia aquí. También podrías ponerlo a otros marcos. Pero ahora mismo para los fines de esta lección, que son efectos hover, los vamos a poner en el estado hover ¿Correcto? Entonces una vez que haces eso, inmediatamente creas una interacción que puedes ver aquí. La interacción ya tiene algunos campos ya establecidos. Ahora, cada vez que crees una interacción, va a estar al hacer clic en default. Entonces aquí, Figma entiende que la acción que queremos hacer es cambiar dos, entonces cambiamos el botón de esto a esto, y luego muestra que cambias a El tipo es primario, así que cambia de primario. Dos primarias. Ambos son primarios, pero ¿este es qué estatus? Este es el hover Entonces estamos cambiando de esto a hover primario, no fantasma. Entonces aquí, tienes que entender esto en estos términos, tienes tu gatillo aquí. ¿A qué hora aparece esta animación o interacción? ¿Cómo se activa? Aquí, puedes elegir onclick. Se podría decir arrastrar cuando arrastras y, ya sabes, mantén presionado, cuando sostienes algo y lo arrastras, y aquí tienes mientras estás flotando mientras pulsas, tecla o gamepad, así puedes poner algunos botones aquí en tu teclado para configurarlos Mouse enter, mouse leave, mouse down, mouse up o simplemente después de cierto retraso después de 10 segundos. O diez milisegundos. Entonces, lo que vamos a hacer para nuestros propósitos es mientras flotamos Queremos configurarlo para que cuando coloques el cursor sobre esto, vaya a cambiar a Nuevamente, las acciones tienen muchas otras opciones. Se puede hacer que navegue a. Entonces si lo quieres que al pulsar sobre este botón, vayas a otra página a la que estaría navegando. Podrías regresar, ir a la página anterior, desplazarte a un determinado elemento, abrir un determinado enlace, puedes establecer una variable, establecer un modo variable, condicional. Abrir superposición, intercambiar superposición, cerrar superposición. Estas son cosas de las que vamos a hablar un poco más tarde. Pero por ahora, estamos empezando pequeños y fáciles. Ahora configuramos la acción y ahora tenemos que configurar la animación. Ahora, la animación a veces se configura como predeterminada en lo que sea que la tuvieras antes. Entonces, si lo has tenido al instante, va a ser instantáneo. Al principio, siempre se configura como instantánea. Pero también tienes otras animaciones principales como disolver y animar inteligente Aquí tenemos algunas opciones de calificar porque no se te permite hacerlo con el cambio a la acción. Pero si eliges algo como navegar a, llegas a tener algunas animaciones más. Si lo sabemos, algo aquí, se puede ver entrar, entonces este es un movimiento en animación. Se te ocurre si ya has trabajado con PowerPoint antes. Estas son tus transiciones, ¿verdad? Entonces, cómo sería la transición y cómo se vería el animado Pero vamos a llevarlo de vuelta para cambiar también, y primaria y el estado deben estar flotando Entonces solo tenemos estas opciones en estos momentos. Instantáneo, probémoslo. Tan instantáneo Básicamente significa que fue solo un error, no te preocupes por ello. Significa que una vez que nos metemos en él, inmediatamente cambia a ese color. Ahora bien, esto es bastante agradable porque es muy rápido. Reacciona muy rápido, y te dice, este es un botón con el que puedes interactuar. Si bien este botón es estático, no muestra vida, no muestra interacciones, ni animaciones. Instantáneo es agradable. Lo que podemos hacer es también disolvernos. Una vez que eliges disolver, puedes elegir ciertas curvas. Entonces, si estás un poco familiarizado con la animación, las curvas son como comienza la animación. ¿Empieza? ¿Facilita en? ¿Está comenzando muy lentamente y luego cogiendo velocidad, o está comenzando normalmente y luego flexionando ya que en ella se ralentiza al final Puedes hacer facilidad de entrada y salida, así que se ralentiza al principio y luego coge velocidad y luego se ralentiza al final, o podrías tener un rebote, ya sabes, o podrías tenerlo gentil. hay muchas Aquí hay muchas opciones diferentes que puedes explorar, y luego puedes configurar la duración. Ahora, como por defecto está configurado es de 300 milisegundos. Entonces veamos cómo se ve eso. Entonces, si notas esto es mucho más suave, ya sabes, toma su tiempo, lo que significa que si pasas el cursor muy rápido, tal vez no aparezca o no termine la animación Pero es mucho más suave y elegante, para ser honestos, porque toma su propio tiempo, lo cual es bastante agradable. Entonces esta es una que yo recomendaría, y luego tenemos la última opción es Smart Animate, que también tiene una curva y duración Pero Smart Animate, lo que hace es que básicamente te permite animar diferentes cosas, Entonces, para darte una mejor idea, digamos que vamos a hacer, no estoy seguro. Vamos a agregar vamos a agregarle un icono. Va a ser un botón y luego va a estar teniendo un icono. Así es como cambiemos esto para ocultar el icono. Y luego ahora cuando colocamos el cursor sobre él, vas a que el tamaño se ajusta y luego obtienes un icono agregado a él Como puedes ver, esto te muestra flexibilidad. Muestra una interesante animación. Ahora, claro, no creo que esto sea muy productivo para un botón de verdad. No deberías simplemente mostrar una animación al azar, sino que es algo interesante de hacer porque esa es una buena manera de ver la opción de animación inteligente Bueno, déjame mostrarte la diferencia con disolver. Entonces, si te disuelves, lo que hace es simplemente no te muestra, no lo extiende lenta y suavemente. Lo que hace es que simplemente desvanece esto y se desvanece el otro botón adentro Es muy poco suave y bastante molesto. Pero cuando haces la opción de animación inteligente, lo siento, suave. Pero de todos modos, no creo que esto sea algo que debas hacer, pero hay algunos buenos efectos hover con los que podrías usar alguna animación animada inteligente, para Pero por ahora, no necesitamos eso. Podemos quedarnos con Smart Animate. O podemos hacerlo como disuelto. Prácticamente hacen lo mismo en este caso. Ahora que tenemos esto, podemos hacer lo mismo por estos. Y sólo para mostrarte esta es otra forma de hacerlo en lugar de sostener estos, lo cual creo que esta es la forma superior porque es mucho más visual. Lo que puedes hacer en cambio es simplemente hacer clic en más y luego crear una interacción, y luego decir disparador al hacer clic, y luego puedes hacer cambio a. Fantasma activo primario. Esto es primario porque es morado, pero es fantasma y luego queremos que esto vaya de aquí para aquí, que es fantasma flotante P fantasma como en fantasma primario. Sobresalte primario, fantasma. Ahora puedes ver una flecha recién creada a sí misma, y luego puedes configurarla como disolverla y luego podemos copiarla y pegarla y convertirla en un fantasma y luego ver cómo se ve eso. Cometimos un error. Nosotros no flotamos Dijimos clic. Veamos cómo se ve eso ahora. Se hace clic en él una vez y luego se pone de color. Pero eso no tiene sentido. Así que vamos a quitarlo. Voy a reiniciarlo. Bien. Parece que hay algo estropeado aquí, así que solo recargaré toda la ficha Esto sucede a veces. Solo vas a asegurarte de que si no se ve exactamente como lo que tienes aquí, solo vuelve a cargarlo y se arreglará Puedes ver el efecto hover aquí y aquí también. Es lo mismo más o menos, y eso significa que está funcionando. Ahora podemos hacer Smart animate para ver si hay alguna diferencia, no mucha realmente, pero buena Bonito. Ahora pasemos al siguiente nivel. Voy a venir a sostener la flecha otra vez porque me parece que esto tiene más sentido. Voy a hacer la animación prensada. Ahora dice al hacer clic, pero no queremos onclick porque OnClick significa que una vez que haces clic en él, cambia aquí y luego nunca vuelve atrás Lo que vas a hacer en cambio es que vas a decir mientras presionas. Cuando estás presionando, se va a oscurecer. Y entonces va a ser primaria presionada, no fantasma. Bueno. Se va a hacer una sonrisa animar agradable. Pero me gustaría hacer esto un poco más oscuro solo para demostrar o mostrar la diferencia de una manera más pronunciada. Veamos cómo se ve ahora. Sólo voy a hacer click. Yo sólo voy a refrescarme. Reiniciar. Bien. Ahora, hay un error porque no está funcionando y te diré cuál es el error. Yo hice la animación o la interacción aquí. Pero si lo piensas, cuando pasas el cursor sobre esto, inmediatamente va a cambiar a este estado y este estado no tiene ninguna interacción Entonces lo que vas a hacer es que vas a mantener esta interacción de pulsación, mantener presionado el Control C, copiarlo y pegarlo aquí. Ahora tienes la misma interacción exacta. Ahora nuestro cursor muestra esta mano con el dedo mostrando con el dedo índice subiendo. Eso significa que se puede hacer clic. Si bien aquí no se puede hacer clic. Aquí, hay un efecto hover, pero no se puede hacer clic en él. Aquí, hay un efecto hover y se puede hacer clic en él. Ves que estoy presionando y cuando estoy presionando, se está poniendo muy oscuro, quiero decir, casi negruzco, y eso es para demostrar que le estoy dando click ¿Correcto? Así es básicamente como puedes hacerlo. Aquí puedes hacer lo mismo. Así que también puedo hacerlo por múltiples puedo hacer una interacción para múltiples botones. Puedo cambiar, sostenerlos a los dos. Y luego ahora, como pueden ver, estoy extendiendo dos flechas, y luego puedo decir, mientras presionas, hecho. Veamos ahora. Ahora, sigamos adelante y probemos esto con este otro botón. Entonces solo para recapitular, voy a sostenerlo aquí y decir mientras cierne y luego voy a elegir ambos y señalarlos a la versión prensada y decir mientras presionas Ahora, veamos. Hay un efecto hover. Genial. Una vez que presiono, se pone muy oscuro. Ahora, lo que puedes hacer si lo deseas, puedes elegir estas interacciones y puedes simplemente por diversión, hacerlas 100 milisegundos en su lugar, tres veces más rápidas Al hacer clic, reacciona mucho más rápido. Creo que eso tiene sentido porque un clic no es algo que lleva mucho tiempo. Sucede instantáneamente. Bam, bam, bam. No debería tomarme mucho tiempo. Incluso puedes hacerlo instantáneo si quieres. Ya ves que sólo está parpadeando. Pero creo que siempre es agradable tener una duración muy pequeña. Lo hace un poco más suave. Entonces sí, así es básicamente como puedes usar las interacciones para crear estas micro interacciones como los efectos de desplazamiento Ahora bien, una cosa que podríamos hacer que cuenta como una micro interacción, pero que no es exactamente solo botones y efectos de desplazamiento es una animación de carga Entonces como mencioné, podemos hacer muchos efectos hover, pero ya has visto cómo funciona esto y puedes entender cómo va a funcionar en otros casos Pero una cosa que podemos hacer es, como dije, cargar animaciones. Hay muchas animaciones de carga diferentes que podrías hacer, pero algo que me gustaría mostrarte. O sea, un método que me parece muy regular, muy predeterminado que siempre funciona es hacerlo de la siguiente manera. Lo primero es lo primero, vamos a crear un círculo. Mantenga el turno mientras lo crea, para que cuando lo esté creando, mantenga una relación de aspecto que está bloqueada. Entonces no es más largo ni más ancho de lo que es, sabes, las dimensiones no se estropean. Ahora, lo que vamos a hacer es que vamos a clic en Trazo y vamos a darle un trazo blanco. Hagámoslo un poco más pequeño, solo por talla, así que tal vez algo así. Y podemos hacerlo gris, para ser sinceros, un poco grisáceo. Ahora vas a copiar y pegar esto. Entonces ahora tenemos una segunda versión y luego copiarla y pegarla nuevamente, pero quitamos el trazo y dale un color púrpura. Ahora que tenemos este color púrpura, tenemos tres círculos diferentes. Estos son los mismos, y luego tenemos el círculo con un color púrpura. Ahora, señala una vez que te metes en el círculo, aquí encontrarás este pequeño círculo, que te permite cortar el círculo. Vas a seguir adelante y hacer eso y vas a crear tal vez un cuarto. Ahora tenemos el 25% de un círculo. Y cuando rotemos esto, va a rotar dentro del círculo, lo cual es un efecto agradable y en realidad es el efecto que queremos hacer. Entonces vamos a seguir adelante y hacer clic en esto y clic en el círculo con el trazo debajo de él. Y vamos a seguir adelante e ir a enmascarar. Una vez que hagas eso, el trazo va a enmascarar este cuarto de círculo y luego va a dar un aspecto de barra de carga. Todo lo que necesitamos hacer es básicamente rotar esto para dar el efecto de que hay algo cargando. Ahora, claro, también podemos subir aquí y hacer que el trazo sea un poco más grueso. Vamos a darle cuatro y vamos aquí a darle cuatro, ¿de acuerdo? Entonces ahora este es un círculo de carga grueso. Pero ahora la pregunta es, ¿cómo animamos esto? Así que adelante y ponlos en un grupo, agruparlos clic derecho y selección de grupo o simplemente grupo G, lo siento, solo Control G, y luego seguir adelante y convertirlos en un componente. Entonces vamos a escribir animación de carga. Vas a crear otra variante. En esta variante, vas a sostener este grupo de máscaras y luego lo vas a rotar 25%. Entonces vas a crear otro, y lo vas a rotar al otro quiero decir, un poco más. Como pueden ver, lo estamos rotando aquí 90 grados y luego otros 90 grados y luego al final, vamos a hacer uno últimos 90 grados. Entonces va a aterrizar más o menos aquí. Entonces esto significa que estos son básicamente tus marcos clave. Entonces este es el primer fotograma y luego va a subir hasta aquí y luego va a venir aquí y rotar hacia aquí, y luego va a volver. Entonces estos son los cuatro marcos principales que tenemos, ¿de acuerdo? Entonces vas a seguir adelante, aguanta este plus, tráelo aquí. En lugar de estar al hacer clic, va a ser después del retraso y hacer que el retraso sea cero milisegundos y va a ser predeterminado a uno, lo cual no es problema Entonces no edites nada aquí, solo hazlo inteligente animado y lineal Ahora debería estar moviéndose linealmente, van a tomar 100 milisegundos, que es décima de segundo para llegar de aquí a esto Ahora podemos extender esto y hacer exactamente lo mismo. Después de retraso, cero, eso es todo. Enjuague y repita después del retraso cero, y luego vamos a cerrar este bucle. Vamos a traerlo de vuelta al primero después de retraso, cero. Entonces vamos a probarlo. Lo vamos a poner aquí en el medio y ver cómo se ve. Reiniciar. Ahora como pueden ver, va muy bien. Ahora bien, si lo deseas, lo que puedes hacer es configurar la primera animación para facilitar entrada y la última para que sea fácil. Veamos qué tipo de efecto va a dar esto. Como puedes ver, hay un bonito efecto donde se está desacelerando aquí. Pero yo recomendaría que para todos ellos que vengas aquí, elijan todos ellos y vayan a las interacciones y hagan que sea tal vez 300 milisegundos porque esto es demasiado rápido, viniendo de nuevo, voy a hacerlos 200 o 300 Esto se ve bastante bien o simplemente puedes hacerlo lineal donde no se detiene en absoluto. Pero creo que esto es bastante bueno. Ahora la pregunta es, ¿cómo lo hacemos para que cuando presionamos un botón, esto aparezca. Es una muy buena pregunta. Sigamos adelante y borremos estos botones. Sigamos adelante y borremos estos botones y vayamos a crear un botón aquí y digamos procesar o enviar factura. Entonces vamos a centrarlo. Nosotros también vamos a centrar esto. Pero en vez de que esto esté aquí, lo vamos a sacar y vamos a empezar a trabajar con superposiciones, que es algo de lo que voy a hablar un poco más después Pero lo que haremos aquí es que sostenemos esto y lo traeremos aquí y lo diremos cuando hagas clic en click, vas a abrir overlay y va a estar centrado, luego puedes elegir cerrar ala haciendo clic afuera y hacer que el fondo se tiñe de negro, la animación se disuelve, por ejemplo Ahora veamos cómo se ve. Presiono enviar factura, y luego obtenemos esta animación de carga. Pero vamos a quitar esta cosa de fondo. Voy a reiniciar, da clic aquí, y luego se puede ver que esta animación va. Ahora se está procesando. Podrías dar un paso más. Podrías seguir adelante e ir un paso más allá y básicamente puedes hacerlo de una manera para que esta animación se detenga después de un tiempo. La forma de hacerlo es seguir adelante y crear un marco. Retira el relleno, agrega este círculo en él, céntralo, y luego conéctalo al marco exterior, luego ve al fotograma y agrega una interacción y di, después de 4,000 milisegundos, como en 4 segundos, tienes que cerrar la superposición Ahora mira lo que pasa. Sólo vamos a abrir este fotograma, una vez que presione en sind invoice, obtendré la animación por 4 segundos y luego ya no está. Así como así. Entonces esto es bastante ordenado porque esto imita el proceso de que realmente envíes una factura o tengas una animación, y estas son las pequeñas interacciones que le dicen al usuario qué está pasando, qué ha pasado, qué va a pasar Entonces una vez que haces esto, dices enviar factura, y luego obtienes este pequeño círculo. Se va, se está cargando. Y entonces idealmente deberías aquí mismo, factura se ha enviado con éxito, lo que sea. Ya sabes, así que esa es toda la idea de ello. Así es como crear un gran conjunto de micro interacciones que se comuniquen de micro interacciones que se comuniquen manera efectiva con el usuario para darle retroalimentación, para hacerles saber que estás pasando el ratón sobre un botón ahora Haces clic, estás presionando un botón ahora. Ya tienes cargando animación, lo que significa que se está procesando algo. Así es básicamente como puedes seguir adelante y crear una animación de carga de manera muy sencilla. Por supuesto, como dije, puedes hacerlo mucho más complejas o de maneras geniales, pero esto es algo para que sigas adelante y pruebes tú mismo. Muchas gracias por escuchar, y nos vemos en la siguiente lección. 11. Interacciones de desplazamiento y gestos + dominio de Smart Animate: Hola a otra lección del curso avanzado de Figma. En esta lección, vamos a hablar de múltiples conceptos, incluyendo desbordamiento, desplazamiento y gestos, animaciones o interacciones Todos estos son conceptos muy diferentes, diría yo, pero están muy conectados entre sí de alguna manera. Todos están interconectados. Podría parecer que ¿qué tiene que ver esto con eso? ¿Qué tiene que ver el desbordamiento con el desplazamiento? Pero si tienes un poco de experiencia en programación, entonces probablemente sepas que estos dos términos están algo relacionados. Quiero aclarar las diferencias entre estas acciones y al mismo tiempo mostrarte cómo puedes seguir adelante y establecer tus propias interacciones únicas. Ahora, platicamos en otras lecciones sobre micro interacciones, que es la idea de tener un efecto muy pequeño que potencie tu experiencia de cualquier manera pequeña. Y el ejemplo que tomamos fue un botón. Entonces solo para conectarnos a esa lección, cuando tienes un botón y tiene un efecto Her, es algo muy sencillo y no lo necesitas del todo. Simplemente puedes quitarlo. No necesitas tener un efecto Ella. Es simplemente más o menos una cosa estética que además tiene una funcionalidad que muestra al usuario, esto es clicable Esto es algo en lo que puedes hacer clic o con el que puedes interactuar de alguna forma u otra. Pero esto es más en la micro escala. De lo que hoy vamos a hablar es un poco más sobre la macro porque no se trata solo de estética, sino más de cómo puedes interactuar con las cosas para obtener más información o para llegar a algún lado. Hagamos menos platicar y más trabajar y probar. Déjame mostrarte de lo que estoy hablando. Entonces voy a seguir adelante y abrir esto solo para que podamos probarlo. Aquí tenemos múltiples formas diferentes de tener un desbordamiento. Sé ahora mismo que no estás seguro de lo que es un desbordamiento. Te lo voy a explicar con bastante facilidad. El desbordamiento es en realidad muy similar a la idea de desplazamiento Desbordamiento es la idea de que cuando tienes un marco, igual que éste, hay elementos que fluyen sobre ellos. Como pueden ver ahora mismo, cuando voy por encima de las capas aquí, se puede ver que estas cartas, se extienden hacia abajo fuera del marco. Aquí empezamos a tener un problema. Que es el hecho de que hay información fuera del marco. La pregunta es, ¿cómo llegamos a ella? La respuesta es a través del desplazamiento. Esto en realidad se trata de desplazarse, el hecho de que puedes desplazarte verticalmente, horizontalmente o en ambas direcciones Pero el término oficial que Figma utiliza para esto es desbordamiento Yo sólo voy a seguir adelante y configurarlos como puntos de flujo. Vamos a tener vertical, y luego vamos a tener horizontal. Y ambos. Vamos a probarlo. Ahora mismo, ya está funcionando. Se desplaza hacia arriba y hacia abajo. Cuando llegamos a la horizontal, como pueden ver, de esto es de lo que estoy hablando. Es el hecho de que algo podría desplazarse horizontalmente de derecha a izquierda. Y se puede ver, esto no está relacionado con arriba y abajo. Es justo a la derecha y a la izquierda. No es arriba y abajo. Entonces aquí tenemos un ejemplo de un mapa que se desplaza en ambas direcciones Probablemente hayas visto cualquier tipo de aplicación de mapas que uses personalmente, y puedes ver que funciona exactamente de la misma manera. Solo estás desplazándote en ambas direcciones. Estos son muy, muy fáciles de configurar. La forma de hacerlo es ante todo, crear un marco. Ahora bien, este marco debería ser preferiblemente un diseño automático, pero no tiene por qué serlo, cuando creas un frame, vas a seguir adelante y aquí tenemos un frame. Tenemos múltiples artículos en él. Así que asegúrate de tener artículos que salgan del marco. Si no los dejan, entonces no funciona. Si tienes este marco, lo hice en un diseño automático, como puedes ver, agregué estos elementos y copié pegados, pegados, pegados, pegados Esta podría ser cualquier tipo de aplicación que tenga listas, y me aseguré de que esté desbordada Una vez que tengas eso, vas a ir en el marco que está sosteniendo estos elementos desbordantes Vas a ir en prototipo. Bien. Entonces vas a ver aquí comportamiento de desplazamiento y bajo comportamiento de desplazamiento verás desbordamiento, y ahí es donde vas a ir y hacer clic en Vertical. Ahora, normalmente, está configurado como sin desplazamiento. Veamos cómo se ve eso. Realmente no puedes desplazarte. Estoy tratando de desplazarme, no está funcionando, y luego volveremos a la vertical, y ahí es cuando funciona. Bien. Así es básicamente como puedes hacerlo. Y lo mismo que podrías hacer aquí. Pero lo que hicimos aquí es un poco más diferente. No hicimos que todo el marco fuera un diseño automático, pero creamos un diseño automático solo para la parte que necesita ser desplazada por la que hay que deslizar Esta parte es la que quiero decir, y la convertí en un marco. Ahora, este marco aquí es un diseño automático con múltiples elementos. Pero nuevamente, lo que necesitas para asegurarte es que el marco no los contenga todos. Podría haberlo hecho abrazar contenidos. Pero cuando haces eso, se pone un poco difícil. No funciona o podría funcionar un poco, pero no exactamente como lo quieres. Lo que haces es hacerlo más pequeño y preferentemente, deberías hacerlo tan grande como el área en la que debería verse. Normalmente, esta es la zona en la que se debe ver. Ahora, claro, se ve esta parte todavía, pero la idea es que esto no cuenta porque hay relleno de derecha e izquierda. Puedes ver aquí hay estos márgenes. Y de la derecha también. Esto no cuenta. Todo lo que cuenta está aquí, así es básicamente como puedes hacerlo. Entonces, si quería desmontarlo, simplemente lo volveré a armar. Voy a copiar este artículo. Déjame quitar esto, por ejemplo, fuera del camino. Voy a copiar esto y voy a voy a quitar todo el marco. Ahora no es un marco. Elijo todos estos elementos y luego sostengo Shift y A. Los hago un marco con un layout automático, directamente. Y luego hay 15 básicamente es el espaciamiento entre ellos. En lugar de hacer cualquier cosa, voy a ir al prototipo y voy a ir al desbordamiento de comportamiento de desplazamiento, y ahí es cuando voy a ir a horizontal. Bien. Pero aún no estamos ahí. Aún no estamos ahí. No está funcionando. Necesitas hacerlo más pequeño. Nuevamente, como dije, que solo se muestre, muestre la zona que normalmente se va a ver. Y cuando haces eso, funciona así como así. Súper fácil. Así es básicamente como puedes hacerlo. No es gran cosa. Solo volvamos a ponerlo de nuevo a como era, y eso es todo. Ahora, llegando a la última opción, aquí tenemos, tenemos un marco. No convertí esto en un autoau a propósito. Entonces dentro de este marco, se puede ver que agregué una imagen. Esto es sólo una imagen. Pero podrías crear tu propio mapa que sea con muchos detalles. Va a llevar mucho tiempo, pero asegúrate de que este mapa se ponga en un grupo o un marco para que puedas mantenerlo todo unido igual que esta imagen. Y entonces lo que vas a hacer es que solo vas a colocar esta imagen donde quieras. Simplemente lo guardé en el centro y luego voy al marco y luego simplemente haga clic en ambas direcciones. Y eso es todo. Es así como puedes seguir adelante y crear un mapa que se desplace en ambas direcciones Ahora pasemos a otra cosa que se relaciona con el desplazamiento, pero no se trata exactamente de desplazarse Esto se trata más o menos de posicionamiento. Simplemente llamemos a eso posicionamiento. He traído aquí exactamente la misma situación de desplazamiento vertical que teníamos Pero lo que hice aquí, los puse en un marco, todos estos en un marco, e hice este marco. Lo guardé como un diseño automático, pero los encerré aquí. Ahora tenemos algo llamado posicionamiento. Hay múltiples cosas de las que me gustaría contarte. Uno de ellos, y esto es muy importante. Es lo que se llama un Navbar. Ahora bien, estos artículos, por cierto, solo estos elementos, los obtuve de los bienes de material. Este es el kit de diseño de materiales de Android. Lo acabo de conseguir de ahí. Lo puedes conseguir y es bastante receptivo, funciona muy bien, solo para que pruebes las cosas. Voy a sostener esto y llevarlo al diseño automático. Pero voy a dar click aquí, que básicamente ignora el diseño automático y congela este ítem del layout automático y lo traigo arriba y lo pongo aquí Ahora que lo puse aquí, esto es básicamente lo que podríamos llamar una barra de navegación. Es decir, abreviatura de barra de navegación. Esta es la barra que permite cambiar entre diferentes pestañas. Ahora, normalmente, este bar debería quedarse ahí. Vamos a hacer esto un flujo y llamarlo barra NAP. Entonces ahora lo que ves sin embargo, es que no se queda ahí. ¿Por qué? Porque este es un marco desplazable que construimos aquí. Todo este marco por el que puedes desplazarte. Hay una solución a ello y esto se relaciona con el posicionamiento. Todo lo que necesitas hacer es ir al prototipo, del diseño al prototipo e ir a la posición. En lugar de decir scroll con parent, que es el predeterminado, sigue adelante y elige pegajoso o fijo, ¿de acuerdo? Entonces esto es lo que hay que hacer. En este momento no podemos escoger fijo, y la razón es porque ponemos eso dentro de un marco. Entonces hay un marco dentro de todo el marco. Lo que hay que hacer es poner un marco dentro de un marco para que sean dos anidados Vamos a cortar esto con Control X, y vamos a pegarlo aquí. Así que asegúrate de no ponerlo en otro marco y luego vendremos aquí y podremos escoger fijo. Eso significa permanecer en su lugar. Ahora vamos a probarlo. Como puedes ver, permanece en su lugar y ahora puedes cambiar entre diferentes partes. Esta es una característica realmente genial que podrías usar. Muchos sitios web los usan en la parte superior. Tienes tu propio menú, muchas aplicaciones las usan en la parte inferior. Hay diferentes estándares comunes. Pero todo lo que necesitas saber es que puedes arreglar esto en su lugar usando esta función de posicionamiento, pero tenemos otra característica más. Entonces voy a hacer uso de esta etiqueta. Estas son categorías, básicamente. Los voy a insertar aquí y los voy a sacar. Quiero insertarlos entre estos elementos, lo cual es difícil de hacer. Sólo voy a cortar esto con Control X y lo voy a pegar aquí sólo voy a guardarlo afuera. Ahora en este marco, tenemos esto, estas etiquetas, y luego las tenemos, ¿de acuerdo? La razón por la que lo guardé afuera es porque quiero que esto sea pegajoso. ¿Qué significa sticky? A ver. Sticky básicamente es cuando sigues adelante y eliges el posicionamiento aquí pegajoso, lo que significa parar en el borde superior. Entonces eso significa que este artículo no está fijo, pero una vez que llegas a él, se queda contigo, ¿de acuerdo? Entonces como notas, este movimiento, se queda contigo. Muchas aplicaciones usan eso, especialmente si estás desplazándote por una lista de cosas, y luego tienes tus filtros aquí Por ejemplo, digamos que esta es una app de música, esto sería, no sé, como la música pop o no lo sé, esto sería rock y esto sería metal y esto sería country. Y sea lo que sea, tienes estas etiquetas y vas a bajar, y luego solo puedes escoger de ellas. Entonces se mantienen en la cima para que cuando bajes, siempre puedas escoger de ellos. Sin embargo, tenemos un problema aquí, y este es un problema con el que podrías encontrarte. Cuando nos desplazamos por aquí, nos damos cuenta que todos los demás artículos van encima de nuestras etiquetas, ¿verdad? Esto está en mal estado. ¿Por qué? Quiero decir, la etiqueta debería estar en la parte superior, ¿verdad? Así es como debería ser. Así es como lo sé. Bueno, eso es cierto, pero podemos arreglarlo de diferentes maneras. En primer lugar, ve a tu diseño automático y asegúrate de que tus fichas no sean transparentes. Si no tienen relleno, entonces, por supuesto, van a ser transparentes y vas a ver a través de ellos. Lo primero que nos damos cuenta son transparentes. Así que adelante y dales un color o simplemente asegúrate de que todo el marco aquí tenga un color. Puedo ver que todo el marco tiene un relleno, así que no necesitamos darle un relleno a cada uno de ellos. Todo este marco tiene un relleno de sin embargo, todavía se está viendo a través. La razón es que es porque está apareciendo detrás de estos elementos detrás de ellos. Pero al mismo tiempo, quiero decir, este es un diseño automático. Entonces, si muevo esto hacia abajo, entonces no va a aparecer. Quiero que esté arriba, pero al mismo tiempo, quiero que aparezca frente al texto. Bueno, hay una solución rápida a esto. Simplemente vas a todo el marco que está conteniendo estos elementos. Y luego vienes aquí. Entonces dentro de Autoayout tienes esta opción de ajuste o configuración Y entonces aquí verás apilamiento de Canvas y dice último en la parte superior. Entonces eso significa que los últimos artículos se consideran encima de los que están por encima de ellos. Entonces esto está por encima de esto, y ese es exactamente el problema que estamos teniendo. Así que sólo vamos a seguir adelante y revertirlo y hacerlo primero en la parte superior. Y así así, ahora las etiquetas están encima de la quiero decir, estos elementos, todos ellos. Entonces ahora tenemos este menú fijo, y tenemos este menú pegajoso o no exactamente un menú, sino estos banners pegajosos o etiquetas adhesivas que tenemos en la parte superior. Así es básicamente como puedes usar diferentes comportamientos de posicionamiento para tu propio beneficio. De esta manera, puedes configurar tu aplicación móvil o tu sitio web para que sea un poco interactivo. Entonces en este sentido, no va a ser aburrido, solo te desplazas por las cosas, sino que también podrá mostrarle elementos a las personas y mantenerlo con ellos fijos o pegajosos si los necesitan, derecho así que solo ten en cuenta como nota, a veces cuando haces esto, tienes algunos problemas como por ejemplo, aquí, tenemos la barra NAP mostrando como si estuviera detrás del texto Pero cuando realmente vamos al diseño, se nota que es bastante normal. Entonces, a veces con estos comportamientos de desplazamiento con estos posicionamientos, es posible que veas alguna diferencia entre tu diseño, lo que estás haciendo aquí y la visualización real Así que solo tenlo en mente. Hace un poco difícil editar las cosas porque parece que algo anda mal aquí, pero no las hay. Así que solo tenlo en mente. Bien. Ahora hay una cosa más que me gustaría llevarte a través, y esa es en realidad la idea de los gestos. Probablemente hayas usado una app donde tenía gestos. Creo que la mayoría de los teléfonos móviles hoy en día tienen gestos, y de lo que estoy hablando es que cuando te desplazas o deslizas el dedo desde la parte inferior de tu pantalla hacia arriba, hay algo que sucede y esa cosa es en realidad el hecho de que cierras tu app. Y cuando te desplazas y sostienes el dedo arriba, te desplazas como deslizas desde abajo y mantienes así, te desplazas desde abajo y lo mantienes arriba. Lo que sucede es que normalmente ves todas las aplicaciones que están abiertas y así sucesivamente y así sucesivamente. Y cuando te desplazas desliza de arriba a abajo, también ves tu centro de control o ves tu configuración de WiFi o lo que sea. Entonces esto es algo que también puedes aplicar aquí. Te voy a dar un ejemplo. Muchas aplicaciones tienen estos botones donde puedes cambiar entre diferentes pestañas de tu Nabbar Pero algunos de ellos también tienen el movimiento de deslizar, y esto es algo que podemos establecer en su lugar Aquí te explicamos cómo puedes hacerlo. Lo que voy a hacer ahora es que voy a elegir esta página horizontal, y voy a traer esta y esta, y voy a traerlas aquí. vamos a derribar y los vamos a poner como nuestras segundas pestañas. Entonces ahora que queremos escoger esta barra de navegación, solo subimos, vamos al marco y abrimos las capas, y veremos en la parte fija, veremos que dice barra de navegación fija y pergaminos Estas son las cosas que en realidad desplazan contigo y vas a ver todas las demás. Pero ahora mismo, sólo vamos a ir con la solución, ¿de acuerdo? Entonces este es el que queremos. Y lo que podemos hacer es que vamos a copiar esto y lo vamos a pegar aquí en el horizontal. pegamos aquí, lo que vamos a hacer es que vamos a seguir adelante y elegir esta etiqueta media, y vamos a decir seleccionado, y vamos a eliminar el seleccionado de aquí Esta es nuestra ficha en el medio. Y entonces vamos a repetir eso. Copia esto, pegarlo, asegúrate de que esté arreglado, y luego vamos a elegir el de la derecha, hacerlo seleccionado. Bien. Ahora normalmente, de preferencia, lo que harías es que básicamente los cambiarías. Entonces, si vengo aquí y elijo estos, puedo cambiarlo. Le puedo dar un ícono diferente. Quiero decir, aquí está la estrella. Aquí hay muchos íconos diferentes. Éste, digamos, es mapa. Veamos si tienen algo sobre mapa o digamos que es solo buscar. Entonces vendré aquí y elegiré buscar también. Y luego aquí también. Para la segunda , no lo sé, solo me quedaré con la estrella, y para la primera, déjame elegir algo. Voy a tener la flecha de juego. Entonces voy a hacer lo mismo aquí. Yo sólo tomaré el juego. Ahora bien, normalmente tendría sentido si tuvieras esto como componente para que no tengas que seguir adelante y cambiarlo cada vez. Pero de todas formas, ahora que tenemos esto hecho, lo que vamos a hacer es que lo vamos a configurar para que con solo hacer click, puedas desplazarte por ellos. Y así sería un botón normal. Así es como siempre lo hicimos. Entonces la forma en que haríamos esto es elegiríamos estos, por ejemplo, y los traeríamos aquí y diríamos al hacer clic, navegar a esto. Quiero decir, podría ser instantáneo o podría ser inteligente. Entonces esa es una buena manera de hacerlo. Y podemos elegir el del medio, éste , y éste, y luego simplemente podríamos llevarlo al cuadro medio. Entonces, por último, podríamos elegir estos y liderarlos. Vaya, elige el equivocado. Voy a elegir este elemento, etiqueta y etiqueta, y voy a hacer que lleven a aquí. Sólo aguanta el plus y tráelos aquí. Ahora van a navegar hasta él, no es necesario configurarlo. Todo está bien. Ahora vamos a probarlo. Doy click aquí, va ahí. Perfecto. Es bastante ordenado porque solo te está haciendo ir a la pestaña que necesitas. Bien, entonces, ¿cómo arreglamos esto? Bueno, hay una solución limpia. Verás, aquí lo hemos conectado mucho. Hemos tenido interacciones por todas partes. Entonces, lo que vas a hacer es elegir las opciones de arrastre que necesites. Entonces esta es una. Este es uno. Y estas son opciones de arrastre. Ese no fue uno. Este es uno. Ahora creo que los tenemos todos. Lo que vas a hacer es que vas a seguir adelante e ir a tu animación de drag. En lugar de Smart Animate, vas a elegir entrar o Push. Push se ve más bonito. Ya veo que no hemos escogido todos los drag unos. Hagamos esto uno por uno. Vas a querer arrastrar de aquí para allá. Eso quiere decir que debe venir de derecha a izquierda. Así. Y al mismo tiempo, está el tipo opuesto de animación, de derecha a izquierda, que debería ser así. Ahora vamos a probar esto por su cuenta. Bam. Así como así, podemos cambiar de derecha a izquierda. Este es exactamente el tipo de animación que nos gustaría tener. Pero hay un problema. Míralo al Navbar También está cambiando de una manera extraña. Bueno, la solución para eso es hacer clic en animar capas coincidentes Yo también voy a elegir el otro. Esto asegura que si hay una capa coincidente como esta Navbar, no se vería afectada Pero en cambio, estaría animada de cierta manera. Como puedes ver, así es exactamente como funciona. Es muy agradable. Adelante, pruébalo. También lo conecté con el Navbar, pero en realidad no necesitas esto Yo sólo voy a borrar esto. No necesitas eso. Ahora sigamos adelante y veamos qué podemos hacer. Nosotros también vamos a elegir estos. Entonces este de derecha a izquierda. Eso significa que la animación debería ser así, y ahora elegiremos lo contrario. Debería ser así. ¿Qué más tenemos? ¿Algo más? Vamos a comprobarlo. Nos olvidamos. Tenemos que asegurarnos de que haya capas coincidentes animadas Ese es el escenario que queremos y ahora vamos a probarlo. Es difícil con este porque tienes un mapa, realmente no puedes desplazarte ni hacer el gesto para que tengas que tener cuidado a la hora de eso. Pero veamos, fui de aquí para acá, y también fui para allá. Pero como puedes ver, hay algunos temas a veces que surgen porque aquí no hay antecedentes. Por lo que a veces está teniendo algunas dificultades. Y normalmente no tendría un problema, pero como esto va a la izquierda, tiene un problema. Ahora bien, la forma de arreglar esto es asegurarse de que elementos como por ejemplo, este marco tenga un relleno blanco. Cuando te desplazas, no es transparente, no hay nada detrás de él. Esto asegura que no haya problema y lo mismo aquí, podemos asegurarnos de que todos estos, podemos ponerlos todos. Podemos ponerlos en un marco, y podemos darles un poco de relleno y demás y solo podemos asegurarnos de que tengan un fondo blanco Ahora cuando lo probamos, sí, quiero decir, sigue siendo problemático, ¿verdad? Entonces sí, hay que tener cuidado. Quiero decir, porque aquí está pasando algo más. Sabes, esto es algo a tener en cuenta. Necesitas asegurarte de que estás listo para este tipo de problemas. Asegúrate de intentar resolverlos a tu manera. Pero como dije, este es un proceso un poco buggy. No siempre funciona a la perfección, y hay que asegurarse de que tiene que trabajar en ello. Como puedes ver aquí con el Navbar, hay algunos problemas pasando, y eso sucede, pero no debes aceptar que debes seguir adelante e intentar arreglarlo de una forma u otra A lo mejor una solución para eso es hacer el arrastre también funcione con la propia Navbar Sostando todo el Navbar, podría darle un lastre y podría hacer que vaya a la izquierda así como así Veamos cómo funciona. Ya ves, con el propio Navbar, puedo hacerlo. Sea que tenga sentido. Quiero decir, me estoy desplazando por aquí Estoy mirando a través de mi mapa. No quiero ir a otro lado. Pero si voy lo suficientemente lejos, se desplazará. Si voy muy a la izquierda, va a funcionar. Al parecer, no todo el tiempo. Pero si, si, asegúrate de que funcione con el menú con la barra de navegación y luego ya estás listo para ir Sí. Pero aparte de estos errores, así es básicamente como puedes hacer cómo puedes usar los gestos y no solo con esto, no solo con la navegación. Hay muchas animaciones diferentes que puedes hacer. Así que adelante, pruébalos, mira cómo te funcionan. Y de eso se trata de trabajar en Figma. Se trata de probar y experimentar y ver qué funciona y qué no En esta lección aprendimos sobre el posicionamiento. Aprendimos sobre desbordamiento y desplazamiento, y ahora al final, aprendimos sobre animaciones de gestos Espero que le haya dado sentido a esto y que pueda seguir adelante y practicar por su cuenta ahora. Muchas gracias por escuchar, y nos vemos en la siguiente lección. 12. FigJam: Hola y bienvenidos a otro capítulo del curso Avanzado de Figma En este capítulo, vamos a estar explorando diferentes tipos de servicios o herramientas que son proporcionados por la propia Figma. Muchas veces, dependiendo de tu suscripción, estas son herramientas que obtienes junto a tu paquete. Pero nuevamente, esto realmente varía depende tu suscripción con FIGMA y algunos de ellos también pueden ser accesibles dentro del nivel gratuito si eres estudiante o si de alguna manera puedes obtener la suscripción gratuita En esta lección, vamos a hablar de Fig Jam aquí mismo. Ahora, ya ves que hay diseño. Este es el producto principal que proporcionan o la herramienta principal. Entonces tenemos a Fig Jam, slides, buzz, side, y M. Así que hoy vamos a comenzar con Fig Jam, y todo lo que necesitas hacer es simplemente pasar a este ícono de aquí y simplemente hacer clic en él. Y así, abrirá una ventana de FikJam. Ahora bien, esto podría ser un poco impactante para ti. Ha sido para mí, O porque probablemente estés acostumbrado a tu pantalla esté en modo oscuro si no la has configurado y luego de repente esto es inmediatamente solo blanco. Pero esta es básicamente la interfaz que obtienes en Fike Jam Empecemos por decir qué es Fike Jam. Fig Jam es una herramienta para tocar con tus amigos, igual que alguien con jam en una banda o con músicos, al igual que alguien con jam en una banda o con músicos, simplemente tocarían música de una manera aleatoria, que podría ser caótica, que no está que podría ser caótica, estructurada o practicada específicamente, sino de una manera de crear música juntos para llegar a algo con la comunidad, con la gente con la que estás, y para conseguir algo hermoso Eso es exactamente lo que se supone que debes hacer. Como diseñadores. Ahora, por supuesto, también se puede trabajar en esto con otros diseñadores, con gerentes de proyecto, incluso con ingenieros. Esto es más o menos autoexplicativo. Es muy sencillo en comparación con la otra parte de FigMA. Primero, tenemos un marcador aquí. Aquí es donde puedes simplemente dibujar cosas, dibujar tus ideas por aquí y puedes configurarlo. Puedes elegir un resaltado, puedes elegir una cinta washi borrar y seguir adelante y borrar lo que hiciste Al mismo tiempo, quiero decir que esta es una característica nueva, pero aquí te dice ya sabes, puedes usar IA para usar esta función, seguir adelante y crear ciertos gráficos o lo que sea. Pero mantengamos esto a un lado por ahora. Aparte de eso, quiero decir, tenemos múltiples cosas. Tenemos notas adhesivas. Esto es bastante genial. Cuando estás con el equipo, puedes seguir adelante y poner una idea y puedes decir, cómo o simplemente puedes decir, esta es una app para personas mayores que buscan conectarse en línea y podrías simplemente poner eso ahí y moverlo, puedes moverlo para más tarde o puedes agregar otras notas adhesivas al lado. Tienes formas, pero muchas de las cosas son muy rudimentarias Es muy sencillo. No estás creando cosas que se ven locas. Ahora, obviamente, puedes configurar las cosas, puedes cambiar colores específicos, pero se supone que no debes pensarlo tan profundamente. Se supone que esto es algo muy simple solo para idear ideas y hacer una lluvia de ideas con el equipo También puedes crear este tipo de gráfico, lo cual es muy agradable porque puedes ampliar las cosas y otras cosas, crear otras ramas, lo cual es realmente agradable Puedes agregar solo texto normal, ideas, o ideas para el sitio web o lo que sea, y solo puedo ponerlo aquí. También contamos con secciones. Esto también es muy similar a lo que tenemos en el diseño Figma Tenemos mesas, lo cual es bastante ordenado. Puedes seguir adelante y crear una tabla y elegir en cuántas columnas tienes, cuántas filas, y simplemente escribir en ella. Simplemente es muy autoexplicativo, muy fácil. Solo sigue adelante y pruébalo y salta dentro de él. Pero todo el propósito de esto es básicamente trabajar con las personas y hacer una lluvia de ideas con ellas de manera efectiva. También puedes tener un sello con tu propia foto, lo cual es bonito porque puedes decir, Esta es mi idea o apruebo esto. O mejor aún, puedes simplemente poner un me gusta. Entonces cuando alguien viene, pueden ver quién pone esto como, Oh, la persona que aprobó es Ahmed, tan genial. También puedes usar la función de comentario normal, y también tienes algunas de las funciones de IA aquí, y luego también puedes tener tus widgets y tienes otras cosas como pegatinas y otras cosas. Es muy similar a la sección de diseño normal, pero es solo que tiene algunas adiciones más que hacen tu vida un poco más fácil. También tienes algunas plantillas aquí, lo cual es bastante ordenado. Um, podemos agregar uno, por ejemplo. Puedes ver estas plantillas solo te muestran exactamente, quiero decir, lo que necesitas. Mostrando ayer hoy bloquea elementos de acción y es lo mismo, y para diferentes miembros del equipo, podrías hacer esto todos los días para organizar o no todos los días, pero cada dos días o algo para organizar lo que se supone que debes hacer, lo que quieres hacer o tus bloqueadores y lo que sea. Y aquí tienes sincronización diaria, buena para recibir reportes de tareas, actualizaciones, bla, bla, bla Todo esto es muy agradable. Así que adelante y pruébalo. Es una buena manera de no tomarlo todo tan en serio que está en figma, y no todo es solo diseño y wireframing y prototipado, sino que a veces solo estás teniendo un Solo quieres poner unas notas adhesivas aquí y allá. Podrías decir, Oh, tomaré color rojo de la nota pegajosa para que puedas diferenciar, pero quiero decir, tiene tu nombre de todos modos. Sí, eso es básicamente de lo que trata Fake Jam. Hay algunas cosas más que puedes explorar aquí, como temporizadores, música, que son características bastante bonitas que puedes agregar a tu sesión. Y como están trabajando juntos, si ustedes también se están uniendo a la conversación, pueden hablar entre ellos, tocar la música o tener un temporizador. Entonces sí, es una característica bastante ordenada. Gracias por escuchar, y nos vemos en la siguiente lección. 13. Figma Buzz (equipos de marketing): Entonces otra herramienta que ahora tiene Figma que es más o menos reciente se llama Figma Sigue adelante y dirígete a aquí y haz click en él, y luego abrirás el archivo Figma buzz Y primero, te va a decir que elijas una plantilla. Ahora, puedes seguir adelante y elegir solo sigue adelante y comienza tu propio diseño desde cero. Realmente depende completamente de ti. Pero vamos a comprobarlo. Lo bueno es que te dice que puedes iniciar un activo en blanco y te da algunas sugerencias. Instagram, Facebook, X, y así sucesivamente. Antes de ir más allá, déjame dar un paso atrás y decirte ¿de qué se trata realmente el zumbido de Figma Figma Buzz es una herramienta en la que se piensa mayormente. Toda la idea es hacer que la gestión de redes sociales y diseño de redes sociales sean mucho más fáciles. Porque Figma se dio cuenta de que mucha gente necesita diseñar para redes sociales Es decir, se está volviendo cada vez más popular, sobre todo con herramientas como Canva Mucha gente estaba usando FIGMA como herramienta de diseño para muchas cosas incluyendo las redes sociales Pensaron, por qué no hacerlo oficial. Pero en lugar de simplemente convertirla en la misma herramienta compleja, igual que usar Photoshop, Photoshop es bastante complicado si solo estás haciendo administración de redes sociales. Por lo que hicieron que fuera mucho más fácil para diseñadores y gerentes de redes sociales crear e interactuar. Entonces te lo voy a explicar en un poquito. Entonces lo que puedes hacer es, quiero decir, antes que nada, solo dejarte saber, puedes copiar tu trabajo del diseño de Figma en Figma Buzz y publicar plantillas guiadas o simplemente puedes copiar y pegar tu trabajo porque a veces es más cómodo trabajar en el diseño de Figma Tiene muchas más herramientas. Pero como dije, puedes comenzar con un set en blanco y ya te dan algunas plantillas. Quiero decir, no plantillas, sino formatos. Y luego tienes algunas plantillas de la propia Figma. Y también has ordenado por categoría. Anuncios, imprimir. Incluso puedes tener algún negocio de cosas impresas. Los encuentro muy pulcros, pero para ser sinceros, estoy un poco decepcionado con la cantidad o la variedad. No estoy seguro de cuánto lo expandieron ahora mismo, pero desde hace mucho tiempo estuvo muy falto, sobre todo porque incluso hasta ahora se puede ver que esto no es mucho. El caso es, creo que su mayoría solo están confiando en su propio trabajo. No estoy seguro si está abierto a gente en este momento, es solo de Figma. Es muy limitante. Pero si quieres, puedes seguir adelante y elegir una plantilla y simplemente puedes agregarla aquí. Aquí tienes texto, imagen, texto. Ahora solo para presentarte esto, hay dos modos. Ahí está el modo de diseño, que está muy cerca del modo Figma normal Es decir, aquí tiene la mayoría de las herramientas. Hay algunas diferencias, pero es muy similar y luego tienes tu modo buzz. Entonces, el modo buzz es principalmente para los gerentes de redes sociales, para los gerentes de proyectos, para las personas que tal vez no tienen mucho que ver con el diseño en sí, pero en realidad están editando el contenido. Entonces alguien que no tiene mucho que decir sobre el layout o tal vez no le importa mucho el layout, pero se preocupa por lo que está escrito aquí, qué imagen viene aquí, o tal vez cómo se soluciona, cómo se organiza. Entonces como mencioné, así que aquí puedes hacer muchas de las cosas, pero puedes ver que las capas se ponen aquí abajo, y luego aquí tienes tus diferentes marcos. Y aparte de eso, sin embargo, tienes casi los mismos controles aquí excepto que no tienes la pestaña de prototipado También puede ver la vista de activos, por lo que solo un activo o puede ver la vista de cuadrícula. Esto permite crear, quiero decir, múltiples versiones, filas y columnas. Y entonces lo que puedes ver es que puedes ver, por ejemplo, aquí, tienes esto y aquello diferentes diseños, o puedes ver uno de ellos a la vez, igual que diapositivas o algo así. Entonces cerremos esto por ahora las plantillas y devolvamos a ésta. Ahora, la mayoría de las cosas de diseño de las que ya hablamos, vamos al lado del zumbido de Figma Lo realmente interesante aquí es que es muy limitado. Solo te ofrece ciertas cosas como el color. Puedes elegir el color que quieras, pero como puedes ver, no es la primera opción que obtienes. Puedes elegir los bordes y esas cosas, pero es muy, muy simplificado como si fuera para bebés. Y esto no quiere decir, los gerentes de proyectos o los gerentes de redes sociales no son todo eso o no son tan comprensivos, pero es solo el hecho de que están en movimiento y a veces no les importa tanto el diseño. Para que para ellos sea mucho más importante ver cómo funcionan las cosas juntas y el contenido de las mismas. Entonces, si ya tienen una plantilla, pueden trabajar con ella. No necesita ser perfecto. Entonces, el mejor flujo de trabajo aquí que sugeriría es que alguien diseñe las plantillas aquí, y luego hay un administrador de redes sociales que sigue adelante y usa las plantillas dentro de su diseño. Como puedes ver, es muy sencillo. Y aquí hay herramientas que pueden usar a su disposición. Por lo que pueden agregar ciertos medios que también son proporcionados por FigMA. Pueden agregar texto. Ahora bien, este texto, como pueden ver, hay mucho texto básico. Están tratando de copiar más o menos FigMA con esta idea. Pueden insertar ciertas cosas como iconos o stickers y demás, y por supuesto, hay plugins porque siempre hay plugins Puedes seguir adelante y explorarlos tú mismo. Pero lo que es realmente interesante, puedes ver que todos estos son bastante regulares. Lo que es realmente interesante es la opción de creación masiva. Lo genial de esto es el hecho de que puedes subir una hoja de cálculo con mucha información Es una hoja de cálculo que dice que el título debería ser esto y luego la descripción debería ser esta y luego este debería ser el texto pequeño Entonces podrías configurar esto para cualquier cantidad de publicaciones que quieras y puedes tener todas creadas de manera muy simple, muy fácil, e inmediata, solo con Figma arriba No tienes que poner toda la información manualmente con solo subir el documento Eso es increíble porque mucha gente planeó su contenido con anticipación y en lugar de tener que ir y poner en cada texto copiar pegar copiar pegar, simplemente pueden subir toda la hoja de Excel que tienen, lo cual es bastante genial. Y aquí puedes ver esta también es una versión mucho más simplificada de lo que ves aquí. Esto es muy visual, y esto está muy basado en el texto. Entonces esto es para la gente que dice, no quiero tocar esto, no quiero romper el layout, no quiero romper la plantilla. Entonces puedes simplemente seguir adelante y decirles, Bien, no necesitas romperlo, cambiar las cosas de la parte del texto. Y también es más rápido hacerlo. Entonces puedes decir, Hola, Los Ángeles, ahora hagamos eso. Hola en Nueva York. Y entonces estamos buscando una Brista, ¿eres tú? Seguro que puede quedarse. Y luego nueva ubicación. No sé qué. Y luego también puedes mediar y navegar por una imagen, elegir esta o esta y llamarla día. Así como así, solo cambias las cosas. Así es más o menos como funciona esta herramienta. No tienen mucho que hacer con esta herramienta, pero eso es exactamente lo que la hace perfecta porque crea un gran flujo de trabajo entre diseñadores y gerentes de redes sociales. 14. Diapositivas de Figma: Entonces hoy, vamos a hablar otra gran herramienta más proporcionada por Figma. Realmente parece que es solo un paquete completo que viene con la suscripción, y simplemente sigue dando Hoy vamos a hablar de las diapositivas de Figma, y la historia del origen es bastante agradable porque mucha gente usaba Figma básicamente como un reemplazo o alternativa a PowerPoint por alguna razón porque era mucho más fácil diseñar ahí y demás Y FigMA se dio cuenta de eso y aprovechó esa oportunidad e hizo su propia sección para crear diapositivas, lo cual es bastante inteligente Cuando vayas a las diapositivas de Figma, vas a volver a ver la misma idea, igual que la tuvimos con otros servicios u otras herramientas Se puede empezar desde cero. Puedes comenzar con un esquema que hiciste en tu mermelada de FIG, que es súper genial. Es decir, esto es lindo porque está dibujando de tu otro trabajo, lo cual es lindo. Otra vez, porque no tienes que hacer todo manualmente. O puedes hacer una plantilla y que sea reutilizable. También puedes elegir cualquiera de estas plantillas que tengas aquí, que algunas de ellas son bonitas. Puedes seguir adelante y simplemente elegir uno. Este es bastante bonito. Tema de cuadrícula de píxeles, y puede elegir cuáles desea agregar. Puedes agregar nuevas diapositivas 1 por una, o puedes agregarlas todas y ver cuál quieres quedarte y cuáles quieres deshacerte de ellas. Sólo estoy agregando uno por uno. Nuevamente, realmente lo clavaron en términos de simplicidad y también hicieron un diseño muy similar al de PowerPoint Puedes ver aquí suelen ser tus notas, tus notas de presentador, así puedes cerrar esto o puedes abrirte cuando quieras Entonces tienes tus diapositivas aquí. También puedes verlos como si fueran marcos, que es como mucha gente solía diseñar sus diapositivas antes de que saliera esta característica. Entonces tienes un estilo de plantilla, así puedes continuar aquí, puedes barajar los colores o cambiarlos. Remizlas como puedes ver, lo cual es bastante ordenado porque muchas veces quieres probar algo diferente, pero no sabes exactamente cómo hacerlo Sí, veamos si podemos volver a nuestro color original. No realmente original, pero funciona y también puedes ajustar las cosas más de una manera más cercana. Para que puedas ir directamente a los colores y cambiarlos de la manera que quieras. Por ejemplo, no me gusta este azul. Podría convertirlo en un azul diferente. Depende totalmente de mí. Lo cual es bonito. Tener esa opción es bastante agradable. Pero se puede ver que todo está simplificado. Tu fondo es de un solo color. Se podría decir, no, eso no me gusta. Hagámoslo un gradiente. ¿Qué tipo de gradiente? Déjame mostrarte. Voy a hacer un gradiente por mi cuenta. Sí, puedes seguir adelante y hacer eso y puedes, por supuesto, cambiar los colores de tu selección tal como lo harías con Figma. Entonces tienes algunas de las herramientas aquí, algunas de ellas ya conocemos texto, imagen, eso es otra cosa, pero es solo una función de importación. Simplemente da clic en él y elige la imagen que desea agregar. Agrega una imagen muy rápido. Así que sólo lo puedo poner aquí. Ahora se pone en el texto, lo cual es bastante bonito, o puedo traerlo de vuelta. Y entonces puedo arrastrarlo y ponerlo aquí. Simplemente muy simple e intuitivo. También podemos crear cualquier tipo de formas que queramos. Podemos usar esta función aquí, que es la interacción en vivo. Esta característica te permite agregar tiradores, sellos, alineación, cosas que hacen que tu presentación interactiva, solo para mostrarte , por ejemplo, cómo se vería un agujero, puedes agregar una opción aquí y decir, no sé. Se puede decir rojo o azul. No es azul correcto. Entonces puedes mostrar esto a tu audiencia y hacer que lo voten e interactúen con él. Déjame mostrarte cómo se vería. Aquí todavía no tenemos votos y entonces la gente podría elegir el rojo o el azul y luego votarlo. Lo interesante de esta característica es la forma en que se piensa de esta manera es que las personas se unan a tus diapositivas. No vas a seguir adelante y solo compartir tu pantalla con una audiencia, sino que podrías estar invitando gente a unirse a tu presentación. Simplemente copia esto aquí, y luego se lo das a alguien y ellos vienen a ver tu presentación en vivo como estás presentando o puedes compartirla desde aquí. Pero no tiene que ser así. Solo está destinado a ser así cuando se tienen elementos interactivos como este donde la gente puede votar. Pero sí, se pueden ver otros tipos de interacciones, para que la gente pueda poner sus sellos. La gente puede poner su alineación, ponerse, estoy de acuerdo, no estoy de acuerdo. Déjame mostrarte cómo se ve. Totalmente de acuerdo o en desacuerdo para que pueda votar. Pero no parece que se esté mostrando correctamente. Resultados ocultos. Entonces puedo decir, ¿sabes qué? Estoy totalmente de acuerdo o en desacuerdo. Es una característica muy simple, para ser honestos. Es solo poner una foto donde quiera que haga clic. Pero puede agregar algo de interactividad o se puede agregar un prototipo Entonces tienes la sección de comentarios. Tienes tu IA y plugins. Y aquí también puedes agregar tablas, bloques de código, iconos, muchas cosas diferentes. Nuevamente, igual que siempre nos acostumbramos, siempre puedes volver a tu modo de diseño, lo que te da mucho más control. Es decir, este panel de diseño, este menú lateral me resulta muy familiar. Es cómodo y sé exactamente en qué estoy haciendo clic y qué está pasando. Puedo crear cosas complejas en lugar de simplemente elegir colores simples. Puedo crear efectos complejos y simplemente jugar con las cosas. ¿Por qué no? Esa es toda la idea, creo. Que si lo necesitas, entonces siempre tienes este modo para que siempre puedas volver a tu modo de diseño y crear el diseño de la manera que quieras. Entonces así es más o menos como se ve la herramienta. Adelante, pruébalo para tu próxima presentación y hazme saber cómo funciona. No es exactamente para todos, pero si sientes que esto es algo que te gustaría, entonces adelante por ello. Gracias por escuchar y nos vemos en la siguiente lección. 15. Sitios de Figma (descripción general): Sitios Figma, es posible que hayas oído hablar de él. Si no lo has hecho, entonces necesitas. A pesar de que creo que todavía está en Beta, todavía no está 100% desarrollado correctamente. No está ahí afuera. Pero Figma sites es una herramienta que permite crear un diseño desde dentro de Figma de un sitio web y publicarlo todo desde dentro de Como puedes ver aquí, dice Beta, así que diseña y publica tu sitio web todo figma Beta Esto le permite construir un sitio web que sea receptivo, interactivo y completamente listo. Es bastante increíble. Sigamos adelante y probémoslo. Ahora, claro, hay que saber que esto es bastante limitado. Podemos seguir adelante y comenzar con una plantilla solo para mostrarte lo que otras personas han hecho. Nuevamente, hay muchas limitaciones. Pero escojamos algo que parezca difícil de hacer. Ya sabes, no sólo una página normal. Siento que esto es un interesante quiero decir, este es un diseño bastante interesante. Puedo hacer click y ver cómo lo han hecho. No es tan complejo, pero podemos seguir adelante y previsualizar este sitio web en el navegador. Aquí está el sitio web y puedes ver que funciona. Quiero decir, para ser honesto, siento que este es el mejor, no exactamente el mejor sitio web o ejemplo que podamos ver no es tan malo. Quiero decir, la imagen no es de tan alta calidad, pero tal vez porque es un sitio de FigMA o porque es solo un sitio web de prueba, se ve así Pero es bastante asombroso y revolucionario que seas capaz de seguir adelante y diseñar sitios web desde dentro de Figma y tenerlos publicados y publicados con poca o ninguna habilidad de programación Así que ahora podemos elegir otra plantilla y simplemente echarle un vistazo, algo, de nuevo, que no es tan típico. Pero no lo sé, esto se ve bastante bien, bastante ordenado. A lo mejor puedas ir con él. Sí, vamos a ver qué tienen aquí. Usemos esta plantilla. Vamos a usar la plantilla y ver cómo se ve y ver si incluso podemos publicarla solo para probarla. Puedes ver aquí los ingredientes de hoy, acelgas, mérdeme, dosis diaria de vegano, entonces tienes un par de productos aquí. Um, o elementos en el menú, todavía están cargando las fotos. Y puedes ver aquí, estos son los puntos de quiebre. Ya hemos hablado de estos, y así es básicamente como se crea un diseño adecuado, y se pueden ver los diferentes puntos de ruptura aquí y están anotando entre qué valores estaría mostrando esta pantalla. Entonces esto es 1280 píxeles más. Esto es 800-1279, y esto es 1-799, Vamos a ver cómo se vería este sitio web. Al igual que abrir la versión de vista previa, esto básicamente nos permite ver cómo se ve, y puedo verlo en la tableta, puedo verlo en un teléfono y puedo intentar interactuar con los elementos. Quiero decir, esto debería ser más avanzado que Figma porque esto no es simplemente ya sabes, FigMA, se trata de un sitio web interactivo que debe interactuar con los usuarios correctamente A ver. Vamos a la página Acerca de mí, estamos encontrando a este tipo. Vamos a TikTok y en realidad nos está llevando a Tik Tok Por lo que los enlaces están funcionando correctamente. Bonito. Pero de lo que estoy confundido es que cuando vas a casa, estos parecen que son cliqueables. Bien. Yo la abrí. Se puede hacer clic Pensé que estos también eran clicables, pero en realidad no lo son. Yo sólo voy a regresar. Bien. Entonces veamos Ensalada de cítricos de manzana. Creo que solo paginan o revisan mis recetas veganas diarias. Sí, dice sopa de tomate y luego siempre es albahaca Kali, la mejor pasta Pero supongo que esto es solo un ejemplo porque es solo una plantilla. Pero se supone que esto es algo que es publicable. Veamos qué sucede cuando compartimos este enlace o cuando lo publicamos. Puedes dar click en Publicar y puedes seguir adelante y darle un título al sitio, y puedes ver también los números que tienes aquí. En términos de auto layout, en términos de desbordamiento y en términos de accesibilidad. Este es realmente el verdadero negocio. Aún no están ahí, pero es bastante ordenado lo que están haciendo. Sí, ya puedes ver cómo se ve. Tenemos muchas más opciones diferentes aquí. Estás agregando una página web, es solo una página y luego puedes agregarle punto de interrupción de tablet, punto interrupción móvil o uno personalizado Esto es desde el principio muy diferente en lugar de solo marcos. Entonces tienes Sigma make del que vamos a hablar más adelante y tienes embed, tienes formas, y luego tienes las herramientas normales de lápiz y lápiz , importación, importación imágenes, texto, comentario, y así sucesivamente y así sucesivamente. Muchas cosas son similares puedes encontrar tus capas aquí, igual que estás acostumbrado, luego tus páginas web, aunque, las puedes encontrar aquí. Se puede ver que tenemos casa sobre la entrada. Estas son las tres páginas principales que tenemos por ahora, pero puedes ver las interacciones o el prototipado y puedes ver cómo están conectadas entre sí Ahora todos los botones aquí, todos ellos se conectan a esta página, pero normalmente cada uno debería tener su propio destino de enlace. Deberían tener cada uno su propia página. Pero por ahora, eso es más o menos suficiente para una plantilla. Así es básicamente como funciona esta herramienta. Para ser honesto, es un poco más complejo que la versión de diseño normal. Te vas a encontrar con algunas limitaciones y otras cosas cuando la compares con la versión normal, pero tienes que entender que esto te está construyendo o publicando para ti un sitio web completo por su cuenta Si nos vamos a publicar, en realidad podemos conseguir que se publique. Esa es una cosa que puedes tener en mente. Solo tienes que introducir un título, y por ahora, solo va a usar esta URL, pero estoy bastante seguro de que puedes en algún otro momento, seguir adelante y poner tu propia URL. Pero sí, bastante pulcro. Adelante, pruébalo, y creo que este es el futuro. Creo que esta va a ser la solución estándar en un par de años y todos van a estar construyendo sitios web directamente usando estas herramientas que no tienen código. Muchas gracias por escuchar, y nos vemos en la siguiente lección. 16. Figma Make (caso de uso de la ideación): Y ahora llegamos a Figma hacer. Figma make es Figmas propia IA de una especie. Entonces no es exactamente eso, y puede ser un poco confuso, pero va a guiarte a través de él y te dice que conectes tus herramientas, agregues conectores para construir con contexto desde tus aplicaciones favoritas. Simplemente haciendo clic aquí, puede seguir adelante y adjuntar un diseño. Así que pega en un marco Figma o una imagen para adjuntarlo. Puedes seguir adelante a cualquiera de los marcos que hemos diseñado antes. Entonces como esta, puedo copiarla y puedo pegarla aquí, así como así, se agrega y pega. Aquí tienes diferentes modos porque está basado en Gemini y en la nube y diferentes versiones o modelos de ellos. También puedes venir aquí y seleccionar una biblioteca cuando se trata del diseño y los componentes y demás O puedes partir de un ejemplo que ya está hecho. Pero todo lo que necesitas hacer en realidad, al igual que cualquier otra IA es describir tu idea, hablar de ello, hablar de lo que quieres hacer, y podría hacer lo que quieras. Sé que todavía no estás entendiendo él ¿Esta herramienta está generando una imagen? ¿Está generando texto libre? ¿Qué está pasando aquí? O sea, tenemos Chat GIT, tenemos Gemini, tenemos muchas otras herramientas. ¿Qué está haciendo esto por mí en realidad? Te diré de qué se trata. Te está construyendo algo un poco más interactivo que todo con lo que has tenido experiencia. Pongo esto y voy a decir, construirme un tablero de app para un banco criptográfico con tarjetas de crédito y análisis de gasto, valor, inversiones, etcétera Y resumen de gastos. Y si, solo estoy diciendo eso. Entonces podría decir algo. No estoy seguro de lo que va a llegar a ocurrir porque a veces es difícil esperar sus comportamientos o los resultados para saber qué se les va a dar. Entonces solo voy a decir que debería haber una opción interactiva para cambiar entre diferentes tarjetas. Entonces vamos a darle a eso y luego vamos a tener nuestro chat aquí a la izquierda, y luego va a empezar a pensar y construir nuestra idea con código usando, creo, JavaScript y otros scripts y demás, va a intentar construir un prototipo Este prototipo es algo que podemos seguir adelante e importar de nuevo a Figma al diseño de Figma, o creo que incluso podemos usarlo de alguna manera en caso de que quieras agregarlo al diseño al sitio web real que tienes o a la Pero no estoy seguro de cómo va eso, para ser honesto, esa no es mi área en absoluto. Bien, entonces aquí ya tenemos un resultado. Lo que es bastante sorprendente de esto, quiero decir, ya le hemos alimentado con el diseño real que tenemos. Pero siguió adelante e hizo que muchas de las cosas fueran interactivas. Yo tomé sus propias decisiones. Cambió los pictogramas según lo que pensara que era mejor Cambió los tamaños y demás aquí de los elementos aquí Se puede ver que jugó con algunas cosas y creo que cuando reinicias esto, incluso agregó una animación, lo cual es bastante increíble. Para que puedas ver la animación de cómo van apareciendo las cosas y luego bajas y ves si comparamos esto lado a lado, mío parece un juego de niños. Parece que alguien simplemente estaba siendo aleatorio y esta parece una aplicación real, Bitcoin eerium o como sea que se pronuncie y es poner los números que no sé cuánto has invertido, tu cartera de inversión, resumen de gastos, y puedes ver que siguió adelante y agregó una barra para mostrar cuánto de porcentaje gastó de esto o aquello Pero quiero decir, solo mostraba las categorías y luego mostraba las transacciones individuales. Supongo que aquí se mantuvo fiel a mi diseño. Pero puedes ver aquí, mira, hizo exactamente lo que le dije que hiciera. Debería poder cambiar entre diferentes tarjetas. Es decir, quitó nuestra configuración aquí, que me gustó un poco más, donde se podía ver la tarjeta apilada. Lo que hizo aquí es que lo hizo un poco más funcional donde cambias entre ellas, lo cual es bastante genial. Veamos qué pasa. ¿Puedo hacer clic en él? ¿Puedo interactuar con él? En realidad no, pero se puede ver que descubrió el nombre Newman en esta página y simplemente se quedó con John Newman Acabo de cambiar las fechas. Pero bastante gracioso, esta tarjeta está caducada. Yo vence en 2024. Este aún no ha caducado. Este ya está caducado. Para que veas, quiero decir, algunas cosas tal vez no pensaron bien o tal vez solo estaba haciendo un ejemplo del pasado. Y al mismo tiempo, hay cosas en las que podría preguntarme, Bien, ¿por qué cambiaste esto? ¿Por qué cambiaste esta talla aquí o algo así? Pero sin embargo, es bastante genial porque tienes una herramienta que simplemente siguió adelante y entendió lo quería y la cambió de la manera que yo quería. Entonces le puedo pedir cosas distintas. O puedes ver aquí dice tres advertencias. Se puede ver cuáles son las advertencias. ancho cero y el alto cero de carga deben graduarse en cero. Y esto es conectar conectando. No estoy segura. Creo que esto es algo que un programador estaría mucho mejor capaz de estimar o entender y podemos pedirle que simplemente lo arregle por mí. Por ahora, sólo voy a cerrarlo. Podemos seguir adelante y copiar este diseño y simplemente pegarlo aquí. Una cosa que inmediatamente veo dejó ser un diseño móvil por alguna razón. No estoy seguro de por qué lo hicieron, pero esa es una elección interesante, y obviamente podemos intentar cambiarla. Como pueden ver, quiero decir, de muchas maneras, no estoy segura. Este es un producto muy desordenado, lo que nos produjeron aquí. O sea, no es como el trabajo de un artista. Muchas de las cosas están mal y no funcionan y no estoy segura Pero es algo con lo que puedes trabajar. Creo que esta es una base realmente genial. Es decir, como pueden ver, estoy teniendo sólo un montón de cosas para que funcione correctamente. Pero creo que, como dije, funciona como una gran base para hacer diseño real. Este es un buen lugar para empezar a ver, ¿qué puedo ajustar? ¿Qué puedo cambiar? decir que ya metí algunas cosas, lo cual no es problema Pero lo estoy mirando uno al lado del otro y estoy como, ¿sabes qué? Esto no está nada mal. Se adelantó, se llevó mi diseño. Algunas cosas no son perfectas aquí, no estoy seguro de por qué el espaciado es así, o lo estropeamos. Parece que lo estropeamos de alguna manera. Sí. No sé cómo lo estropeamos, o tal vez dentro copiando, lo estropeamos Pero algunas cosas tengo que preguntarme , ¿por qué lo hizo así? ¿Eso tiene sentido? ¿De qué se trata todo eso? Pero sí, muchas otras cosas funcionan bastante bien. Como dije, toma esto como inspiración como base y ve y trabaja adelante a partir de ahí. Incluso podría ser una mejor idea no hacer esto en absoluto, agregar una base desde su propio diseño y luego pedirle que la ajuste. A lo mejor debería ser al revés. Ahora voy a decir, hazlo que cuando haga clic en una tarjeta de crédito, vea los estados de cuenta montos totales, estadísticas, y pueda tomar decisiones como borrar la tarjeta o reportar que es robada y cosas tan típicas con aplicaciones bancarias. Bien. Entonces ahora, parece que ha agregado una segunda versión. Veamos qué pasa ahora. Ya puedo ver que es clicable. Ahora cuando hago clic en él, B, enseguida me sale esto. Sólo me doy cuenta de que puedo cambiar esto. Es completamente receptivo, lo que me está volando la cabeza en este momento. Um, ya sabes, porque es súper genial que una herramienta así ya sea receptiva. No solo está construyendo toda tu aplicación, sino que también la está haciendo receptiva, construyendo en una animación, agregando cosas que ni siquiera pediste. Te está diciendo este mes cuánto gastaste, agregando quiero decir, pedí estadísticas, pero no definió de qué tipo, está diciendo que tu saldo actual es tanto y el crédito disponible es tanto. Y puedes congelarte o puedes descargarte. No estoy seguro de lo que estás descargando aquí y a lo que me refiero, bien, supongo que solo puedes congelarte. Declaración descargada. O sea, es dar una notificación de que algo está descargado. Entonces aquí dice pendiente también. Se puede reportar el robo de la tarjeta. Mira, incluso construyó un pop up para eso. Y ya ves, esto es algo bastante genial. Se puede eliminar la tarjeta. Oh, Dios mío, e incluso lo borró. Al igual que, pensé en el futuro para seguir adelante y eliminarlo. Es decir, ¿qué pasaría si elimináramos todas las tarjetas? Ahora tengo curiosidad. ¿Va a tener un estado vacío? Mira, y ahora dice que no hay tarjetas disponibles. Yo también pensé en ese caso. Esto es lo que es completamente alucinante de esta característica, y puedes ver muchas cosas o la mayoría de las cosas que realmente no hizo prototipo, y puedes ver aquí esto es salir del marco, lo que te dice que esta herramienta no es perfecta. Pero muchas cosas que ya es capaz de hacer son ya no necesitan ser perfectas. Ya son súper impresionantes. Pero hay que tener en cuenta, solo para ser honestos, esto se basa más o menos en los diseños de otras personas. Creo que se alimenta de los datos de las personas desde que están diseñando. Entonces, cuando tú y yo vamos y diseñamos en nuestros propios archivos, Figma va a usar eso de alguna manera, o tal vez esté usando productos en público o lo que sea Pero esta IA tiene que alimentarse los datos de algunas personas como conjuntos de datos de entrenamiento, por lo que realmente es que le estás alimentando estos datos y te los está arrojando de vuelta. El hecho de que si recargamos esto, el hecho de que entienda cómo se puede administrar una tarjeta, me acabo de decir, averiguar hacer esto interactivo y se dieron cuenta de todas las cosas que se pueden aprender Puedes ver que aquí hay algunos bichos. Esto es esquinas redondeadas y luego te desplazas y luego ya no es redondo. Entonces es raro. Pero averiguó muchas cosas, pero al mismo tiempo, lo sabe porque ha visto otras aplicaciones bancarias. Sabe cómo funcionan, y así es más o menos robar estas ideas y remezclarlas para ti Y sí, se puede ver que configuró estos colores para que se ajusten a los colores que ya tenemos. De nuevo, es genial, pero solo hay que tener cuidado cuando confías en esto porque lo que sea que te esté confías en esto porque lo que sea que dando va a ser algo que en algún momento ha sido hecho en algún momento por alguien Así que tenlo en mente. Pero nuevamente, esta herramienta es genial. Adelante, pruébalo por muchas cosas diferentes. Esto es solo la punta del iceberg. Hay muchas más cosas que puedes hacer con esto, adelante y pruébalo por tu cuenta. Gracias por escuchar, y nos vemos en la siguiente lección. 17. Cuándo estas herramientas ayudan o distraen: Entonces ahora que hemos echado un vistazo a muchas o todas las herramientas que actualmente están disponibles dentro de Figma, es momento de que tomes la decisión y tomes el juicio y entiendas si estas herramientas están a el juicio y entiendas si tu favor, si te benefician y te ayudan a alcanzar tus metas y hacer tu trabajo o si se interponen en tu camino y te distraen en su Esto es algo que no puedo decidir por ti. Pero tal vez pueda darte una idea contándote mi propia experiencia. Ahora, me encanta y aprecio absolutamente el modo de diseño, y creo que es totalmente brillante, y está en el centro de Figma Es decir, es el producto principal. De eso o antes de eso, obtuvimos Fig Jam Fi Jam también es genial para trabajar en equipo Es genial para la lluvia de ideas y muchos de estos procesos Pero al mismo tiempo, si no tienes un equipo grande o no estás colaborando tan estrechamente, no estás trabajando juntos de esa manera, entonces FikJam puede venir en tu A lo mejor en lugar de hacer el trabajo real, te quedarás atrapado en la parálisis del análisis. Solo estarás escribiendo ideas, ponerlas, categorizarlas, escribir comentarios y demás, y nunca hacer nada Entonces es una gran herramienta. Sigue adelante y pruébalo, pero todo depende de tu caso de uso. Personalmente solo lo uso en algunos proyectos donde siento que ahí es muy esencial trabajar en equipo, y hay gente que está entusiasmada y dispuesta a participar y poner sus ideas ahí fuera sin gastar demasiado tiempo Entonces tenemos Figma slide, que sin duda es una gran herramienta Pero personalmente prefiero usar algo como PowerPoint. Sé que esto puede parecer conservador o tradicional, pero realmente siento que PowerPoint ha demostrado ser líder en la industria, ser un producto confiable y confiable Y así, pase lo que pase, sé que PowerPoint me ha dado la espalda y si mi computadora se incendia, y sé que si voy a otro lado a la computadora de otra persona, probablemente tengan PowerPoint. No sé si tienen Figma. Es decir, seguro que puedo entrar en Figma en línea, pero no sé si su computadora va a poder ejecutarla correctamente Muchas de estas preguntas, me vienen a la mente y por eso solo pienso que PowerPoint es solo la opción fácil, la opción obvia. Pero si buscas algo diferente y algo que permita un poco más de flexibilidad y cambio, entonces las diapositivas de FigMA son gratuitas Entonces tenemos a Figma Buzz, que creo que es definitivamente uno de los mejores productos de Figma Después del diseño, tal vez sea el segundo o el tercero después de FIG Jam. Simplemente es genial. Es absolutamente increíble para las personas que están administrando las redes sociales y que necesitan una visión general muy clara de lo que están haciendo sin todas estas complejas herramientas. Entonces tenemos el sitio Figma, que es, de nuevo, lo dije antes y voy a decir ahora que es revolucionario y simplemente genial Pero para ser sinceros, el hecho de que todavía esté en Beta me da muchas dudas. Creo que antes de seguir adelante y construir un portafolio o un sitio web o un conjunto de sitios web, espere un poco, porque no sabemos a dónde se dirige esto y no sabemos cómo va a funcionar esto en el futuro. Pero no puedo negar que es una característica increíble. Entonces tenemos al final, M. Figma make es una gran herramienta de IA, y me atrevería que incluso sea alucinante y se diferencia de muchas de las otras herramientas, muchas de las otras AI, y el hecho de que sea específica y enfocada en el diseño y prototipado de UIUX No es solo crear texto o imágenes, sino que está haciendo ambas cosas y está creando marcos, está generando interacciones y flujos de usuarios y otras cosas Pero yo te advertiría en contra y diría, ten cuidado. No te reemplacen por él. No te hagas reemplazable cuando lo abusas. Y recuerda que estoy bastante seguro de que las fuentes que están usando son los diseños de otras personas. Cuando vas a abrir un diseño en Figma o tal vez publicas un diseño en el mundo real, Figma AI podría haber llegado a eso y podría haber usado eso y alimentarse de él como datos de entrenamiento, cual está un poco estropeado porque este es Este es tu trabajo y nadie te pide permiso y ellos siguen adelante y simplemente toman tu trabajo y crean aplicaciones fuera de él. La ética sabia un poco sospechosa, pero aparte de eso, la capacidad que tiene es absolutamente una locura Creo que en algún momento es necesario que cada diseñador de UIUX aprenda y use Pigma de manera regular y efectiva Si, esta es mi toma personal, mi reseña personal de todas estas herramientas. Si fuera por mí, yo diría, adelante y usa todos ellos. Úselos y mira qué funciona y qué no solo asegura que no te distraigan de hacer el trabajo real Si te ayudan a hacer una lluvia de ideas, te ayudan a presentar, te ayudan a organizar tus ideas o publicar tu sitio web sin código, entonces absolutamente increíble Me alegro por ti. Pero si sientes que esto se está saliendo de la carretera y te estás saliendo de tu camino para hacer algo, entonces no lo hagas. Centrarse en el diseño real. Entonces, muchas gracias por escuchar, y los veré en la siguiente lección. 18. Proyecto final: SaaS responsivo + microinteracciones: Hola y bienvenidos a otra lección del curso avanzado de Figma En esta lección, vamos a trabajar en un proyecto ficticio nuestro, una especie de práctica, si se quiere Entonces aquí, tenemos un prompt muy simplista con un sistema de diseño muy simplista, no realmente un sistema de diseño, sino solo algunos elementos para guiarnos en el proceso de creación, cosas que hice que he hecho justo antes de esta lección Entonces aquí tenemos un logo o un icono. Nuevamente, muy simplista, y esto es para una app llamada Istify y aquí están los colores Ahora, no se deje engañar, esto no es Spotify, no está relacionado exactamente con él, sino que tiene un nombre muy parecido Spotify, en stify La idea de esta aplicación o este software como producto de servicio es básicamente ayudar a las personas a obtener información y analizar datos, un montón de datos. Todo el caso de uso de este proyecto es que muchas veces nos encontramos con algunos datos. Recopilamos muchas fotos, recolectamos muchos números e información sobre las personas sobre si es para investigación o para estudio o para entonces no sabemos qué hacer con ellas. No tengo ni idea. Ahora, normalmente puedes ir a ciertos productos en tu teléfono para hacer ciertas cosas. Puedes escanear un documento con tu teléfono. Puedes subir un documento a la Nube o algo así. Pero, ¿qué pasa cuando no sabes qué hacer con él? Hoy en día, solo vas directamente a la IA, inteligencia artificial. Dime, ¿qué puedo hacer con él? Esto es como una aplicación impulsada por IA donde te ayudaría a entender cuáles son tus datos y te ayudaría a visualizarlos. Es como un prompt de IA que ya es input y ya tiene opciones específicas. Empecemos a diseñarlo. Entonces voy a estar diseñando la interfaz del teléfono, así que va a ser como una app. Y este es un producto de software como servicio. Entonces piensa en Zoom, piensa en Slack, piensa en Dropbox o Google Drive. Estas son cosas que están vendiendo este software como un servicio. Entonces este es un servicio que estamos brindando a la gente. Entonces es como un modelo de negocio. Así que vamos a agregar un marco de iPhone 17. Voy a tratar de mantener lo simplista solo para que no haga esta lección de cinco horas porque no se puede crear una hora, pero vamos a intentar hacerlo para la página principal, al menos Entonces lo primero es lo primero, quiero decir, deberías tener algunos wireframes anteriores, borradores y bocetos anteriores para entender lo que quieres hacer y cómo puedes hacerlo mejor Pero por ahora, estamos saltando al proceso. Ya tenemos el logo aquí. Entonces podemos darle nombre a este logo, y solo voy a copiarlo y pegarlo aquí por ahora, y lo voy a tratar con K, puedo redimensionarlo y lo puedo poner aquí por ahora, también puedo quitar el fondo Entonces es solo el logo de aquí. Bien. Entonces esta es nuestra app. Ahora, voy a tratar entender la navegación o la primera página, y sigamos adelante con la navegación y tratemos la navegación y tratemos entender cómo va a ser eso. Voy a seguir adelante y tratar de crear una navegación muy apple. Entonces voy a darle a estas 50 esquinas redondeadas y voy a hacerlo una manera donde haya toda una barra aquí en caso de que no estés familiarizado con el nuevo lenguaje de diseño de Apple, y aquí hay un botón. Bien pero vamos a tratar de mantenerlos lo más pequeños posible, no demasiado grandes. Creo que esto es lo suficientemente bueno. Entonces voy a seguir adelante y darles un relleno. El relleno puede ser un poco grisáceo. Podemos usar este color específicamente y le daremos un trazo. Ahora, quiero hacer esto en vidrioso, darle un aspecto vidrioso Mira lo que voy a tratar de estar haciendo. No es tan fácil, pero puedes intentar decir a dónde voy. Entonces cuando se trata del trazo, quiero que sea algo así. Y luego le voy a dar un 50%. Y voy a copiar aquí. Ahí vamos. Estos son nuestros botones y en realidad no necesito crear dos versiones. Yo sólo puedo crear uno de ellos y partir de ahí. Pero veamos qué podemos hacer con ellos. primero es lo primero, vamos a hacer vamos a agregar algo de transparencia y darle un efecto de desenfoque de fondo de diez quizá. Entonces voy a crear un cuadrado debajo de ellos aquí mismo y simplemente lo redimensionaré y le daré el color azul, haga clic en I, lo pongo en el fondo, y ahora podemos examinar este efecto de desenfoque de fondo Solo para asegurarnos de que realmente lo conseguimos de la manera que queremos que sea. Ahora puedo decir, Bien, esto es un poco mejor. O sea, porque de lo contrario, no es muy legible, así que tenemos que encontrar una forma de evitar esto, encontrar un buen valor. Se puede aumentar el desenfoque o podemos hacerlo menos transparente. De veras depende de nosotros. También puede alternativamente simplemente usar el efecto de vidrio. Entonces hace más o menos lo que quieres que haga aquí en este caso, y es bastante ordenado. Así que vamos a usar eso por ahora ya que es una característica nueva y quiero probarla. Y lo importante es que se puedan ver estos incluso cuando no lo son, quiero decir, hay nada detrás de ellos, para que puedan verlos y decir que estos están separados y eso es algo que podemos lograr en la actualidad con esto que está dando una pizca de lo que está pasando aquí. Ahora sigamos adelante con los botones. Ahora, podemos trabajar con íconos y solo estoy tratando entender lo que quiero agregar aquí para esta navegación. Eso que quiero tener absolutamente, primero, vamos a cambiar el tamaño de estos y asegurarnos que la fuente aquí es Rubik es lo que elegí, así que podemos usar Rubik aquí, negrita o no negrita Entonces solo pensemos en lo que queremos agregar aquí. Yo personalmente, creo que debería haber una pestaña de informes, informes o análisis, y luego debería haber una pestaña de perfil o configuración, y luego debería haber una pestaña de anuncios aquí. O crear o analizar. Yo sólo voy a hacerlo como un botón más aquí, y luego traeré estos aquí hacia el medio. Y entonces podemos tener un tercer botón, y este tercer botón podría ser algo sobre la comunidad o algo así, para ver qué está haciendo la comunidad, ¿verdad? Entonces veamos cómo podemos resolver esto. Entonces ahora puedes traer esto aquí solo para ver cómo se vería. Veamos cómo se ve. Bien, tal vez necesitemos tenerlo un poco más pequeño y ver cómo va eso. Bien. Entonces ahora, idealmente, tendremos un ícono aquí. Voy a estar usando increíbles iconos gratuitos. Y lo que está bien con estos es que, ya sabes, a veces puedes escribir el nombre del ícono que quieres usar, pero solo tienes que asegurarte de que sea sólido y no regular. Entonces por ejemplo, informes, podría escribir documentos o algo así o papel o, ya sabes, puedo escribir podemos verificar lo que tienen. Tienes que asegurarte de que lo que sea que quieras conseguir se llame así en realidad. Por ejemplo, aquí ves, no hay nada llamado documentos, pero debes asegurarte de que sea gratis. Puedes seguir adelante y filtrarlo de aquí para liberarlo y luego ver qué se te ocurre. portapapeles es bastante bueno para los informes, creo, así que solo puedes usar eso Puedes usar este regular y sólido. Depende de la disponibilidad. Vamos a hacer esto más grande. Y luego vamos a crear un autolayout entre estos manteniendo pulsada Shift y A. Ahora tenemos un Vamos a seguir adelante y convertir eso en un componente, así que vamos a decir botón Nav. Así es como lo vamos a llamar. Lo ideal es que lo que deberíamos hacer respecto es que deberíamos darle un poco de relleno arriba y abajo, ¿verdad? Y luego hacer doble clic va a hacer el abrazo ancho. Quiero decir, sí, así que ahora es abrazar. Y lo que vamos a hacer es crear un fondo, crear un relleno y darle una esquina redonda. Porque este va a ser el botón que tenemos, ¿verdad? Entonces esta es una especie de área que queremos haber delineado. Y lo que podemos hacer es que podemos copiar esto y pegarlo aquí y ver cómo se ve. Podemos cambiar el color aquí y puedes ver cómo se ve. O sea, a lo mejor necesitas un poco más de acolchado en ambos lados. Y ya ves, esta es la zona que se escoge. No tenemos que usarlo de esta manera, pero esto es simplemente bueno saberlo. Sí, así que ahora tenemos estos y básicamente podemos copiar y pegar, copiar y pegar. Ahora vamos a convertir todo esto en un diseño automático justo desde aquí. Ahora es un autolayout con cuatro píxeles como espaciado. Entonces podemos cambiarlos aquí. Dijimos ajustes y luego aquí podemos escribir engranajes. Veamos si los engranajes funcionan. Eso no funcionó. Engranaje o engranajes. Pero esto sólo está disponible cuando es sólido. Tal vez solo tengamos que hacer que todo sea sólido. Esto es lo que sucede cuando tienes un presupuesto. Pero si usas la versión pro, puedes usar la sólida y la pro. Entonces tenemos comunidad. Aquí solo vamos a escribir comunidad y luego tendremos usuarios tal vez eso funcione perfectamente. Usuarios. Ahora tenemos estos tres botones. Ahora, idealmente, no deberías tener botones que tengan una forma tan diferente, supongo, no debería ser que uno sea mucho más grande que el otro y demás Quiero decir, eso sí sucede. Puedes vivir con él, o lo que idealmente puedes hacer es hacer que todos tengan el mismo tamaño. Vamos a seguir adelante y hacer estos 12 y hacerlos un poco más pequeños y luego los veremos y hacerlos también un poco más pequeños. Haremos un poco todo este botón. Vamos a cambiar las cosas. Bien. Entonces lo que podamos hacer en vez de tenerlo como abrazo, podemos hacer que sea un ancho fijo. Entonces este ancho fijo podría ser, no estoy seguro de 70 o algo así. Pero el tema es, quiero decir, que ya tienen sus propios valores ahora. Así que solo regresa. Así que pasa de abrazo y luego solo escribe un número y solo tienes que editarlos porque todos tienen sus propios tamaños. Entonces no sólo se están abrazando, solo hay que hacerlo 60, 70 Pero como te das cuenta el tema aquí es, quiero decir, se ponen muy mal moldeados cuando haces este método. Así que tienes que asegurarte de que sean tan grandes como el más grande, que es este. Veamos qué tan amplia es esta. Entonces 89 solo podemos hacer 90 por todos ellos. Entonces se ve un poco mejor. Asegúrate de que todo esté en el así que incluso este texto debería estar centrado, y luego se ve un poco más agradable Vamos a eliminar esto y vamos a probar cómo se ve esto. Sólo voy a quitar esto o simplemente puedo tener que sea muy gris y luego ver cómo se ve. Bien. Se ve bien. Se ve mejor. Vamos a comprobarlo con el marco real del dispositivo. No está tan mal. Podemos llevarlo un poco a un lado. Sí, eso no está tan mal. Conviértelo en un componente. Sigamos adelante y tratemos de hacer esto. Podemos tener dos versiones de esto, o simplemente podemos ocultar esto y crear algo así como un círculo del mismo tamaño. Dijimos que esto es 90 y 54, 90. Y luego puedes darle 50 esquinas redondeadas, y luego podemos hacerlo negro con 10%, luego podemos tomarlo y agregarlo aquí y vamos a ignorar el diseño automático, así que va a estar justo en el fondo aquí. Lo que vamos a hacer es crear dos versiones distintas del botón Nav. Una de ellas se va a poner gris y la otra va a ser completamente coloreada. Veamos cómo podría quedar eso. Vamos a echar esto al fondo, y luego voy a elegir esto y ver cómo se ve con la variante dos. Bueno, no se ve muy bien. Vamos a agregarlo aquí y ver cómo se ve en el negocio real. Aquí se ve un poco mejor, para ser honestos, no tan mal. Bien. Ahora podemos ponernos a trabajar. Esto se llama RNvBr y podemos agregar múltiples versiones del mismo Sólo voy a seguir sumando. Y entonces lo que voy a hacer es que voy a tomar esto aquí y voy a darle esta, hacerla variante dos. Éste, hazlo variante uno y lo mismo aquí, variante dos, variante uno, y luego voy a tomar el fondo y traerlo aquí. Bien. Entonces ahora tenemos estas diferentes versiones, y voy a llamar a esto informes, esta configuración, y a esta comunidad. Puedes llamar a toda la página de la propiedad. Y entonces ahora tenemos esta configuración de Nabbar, y se parece mucho a la manzana Entonces esto es bastante ordenado. Y si, entonces ahora tenemos esto. Vamos a hacer que funcione en un poco, pero estoy pensando en crear la otra versión, que es el botón más. Voy a copiar esto y lo voy a pegar aquí, y después voy a eliminar dos de ellos. Voy a borrar el círculo dos, lo primero que voy a hacer es que solo voy a hacer click derecho y seguir adelante y separar esta instancia, después voy a escribir plus, así podemos hacer un botón más o podemos crear nuestro propio botón más Pero lo más importante es que ésta tiene una altura 54, al igual que la altura de esta, debería ser la misma altura. En realidad, no esto fue 64, asegúrate de que esto sea 64. Ahora esto está centrado. Podemos hacerlo un poco más grande y podemos darle el mismo color. Ahora otra vez, no hay razón por la que esto deba ocupar toda esta área, así que ahora solo lo hacemos abrazar y luego vamos a llamar a este botón de anuncio, copiar, pegar, traerlo por aquí y vamos a hacer esto en un diseño automático, ambos los pondremos en el centro central ellos, y ahí lo tenemos. Ahora tenemos estos dos botones. No se ven perfectos, pero se ven bastante bien, yo diría. Ahora solo agreguemos esto al fondo para ver cómo se vería. Así se ven los botones. Son un poco, pero interactúan con el fondo. Ahora, siento que esto podría ser un poco más pequeño. Pero vamos a editarlo desde el componente real. Entonces voy a hacer el 64 por 64 y hacer el diseño automático en el medio y voy a hacer este 24 solo para que los iconos se vean tan diferentes entre sí. Esto se ve un poco mejor, y entonces lo que vamos a hacer es que vamos a empezar a trabajar en el diseño real aquí. Cuando entras en reportes, ahora normalmente deberías tener unos botones que digan reportes actuales, estos reportes, esos reportes, lo que sea. Entonces al mismo tiempo, deberíamos tener una idea de lo que tenemos en la página principal. Quiero decir, ¿qué tenemos? ¿Tienes un reporte real o no? Lo que podemos hacer es que podemos hacer un estado vacío. Ahora bien, este es un estado vacío es básicamente cuando no hay nada, muestras esto. Lo que podemos hacer es que no lo hagas, vamos a convertirlo en Rubik Aún no tienes reportes. Podemos poner esto en el medio, 16, y luego podemos hacer una ilustración o agregar algo aquí. O sea, podemos hacer algo por nuestra cuenta, una cara triste o algo así. Ahora bien, se supone que esto culpe a los usuarios para que usen su producto. Yo sólo puedo copiar el código hexadecimal aquí, fuera de aquí. Copiar y pegar. Voy a copiar y pegar esto. Yo lo haré así. Entonces, se prefiere que de alguna manera mantengas una identidad a todo esto. Voy a agrupar estos y luego centrar estos. Voy a quitar la agrupación. Y lo que puedo hacer, por ejemplo, es que puedo agregar unas gafas porque esta es una app para insights y demás Esto podría estar demostrando que, oye, ya sabes, todos somos un par de nerds Esta es una buena pista para ello porque crea algunas identidades. No es sólo un estado vacío genérico, sino que muestra lo que está pasando. Yo elegiré estos y les haré las gafas. Y también podría hacerlas un poco más delgadas si queremos. Por lo que aún no tienes reportes. Esta es nuestra página principal. Entonces solo diciendo que aún no hay informes, pero al mismo tiempo, podríamos crear un diseño automático aquí y podríamos darle un poco de color. Podemos elegir esto nuevamente y hacer este 36 y luego agregarle algo de texto, hacer un diseño automático. Ahora, el texto, podríamos darle el mismo color por ahora. Y danos un poco de relleno. Entonces ocho por ocho, o podrían ser 12 o lo que queramos. Entonces básicamente podríamos decir informes recientes o simplemente podemos tener un par de categorías. Crea algún espaciamiento entre ellos y podríamos tener todos los recientes, lo que sea. Voy a añadir un poco más de relleno a la derecha y a la izquierda. 16 en realidad sería mucho más agradable. Entonces esto es para que filtres a través de todo el asunto, solo para filtrar a través de todos los reportes que tengas por si tienes alguno, pero ahora mismo no tenemos ninguno. Entonces como dije, reciente, todos podríamos decir visuales o textuales o o algo así, sólo para filtrar a través de los reportes. Y sí, también podemos darle una identidad similar, darle el mismo trazo o algo así. Pero, hay que en algún momento también entender. Quiero decir, cuál es el Navbar. Ahora mismo, lo estamos manteniendo así solo para demostrar que este es un elemento que no es muy importante. Esto se supone que hay que destacar, pero esta no debería ser así que lo voy a mantener así. Esta es nuestra primera página. Tenemos nuestro logo aquí. Podríamos ponerlo en el medio también. O alternativamente, lo que hacen muchas aplicaciones hoy en día es que no tienen el logotipo en ningún lado solo para ahorrar algo de espacio. Esto es algo que podrías hacer, y te aconsejo que lo hagas. Pero sí, eso es algo que tienes que decidir por tu cuenta. O alternativamente podrías hacerlo un poco más pequeño. Entonces entonces vamos a seguir adelante y crear tres versiones diferentes y asegurarnos de que las páginas estén alineadas correctamente. vamos a prototipar para que al hacer clic en un elemento, como por ejemplo, ir al componente ahora, al original, al hacer clic en configuración, debería ir a ajustes. Al hacer clic en Comunidad, debe ir a la página de Comunidad, y al hacer clic en Informes, debe ir a la página de puertos. Así que ahora mismo los estoy vinculando. Y luego después de eso, también voy a configurarlo para que haya un movimiento de arrastre. Esto lo hemos hecho en una lección anterior para que cuando arrastras o deslizas por la página, pueda ir adelante de la primera a la segunda a la tercera, solo deslizar el gesto Esta, se puede hacer creando un prototipo o creando una interacción, y esta interacción debe ser drag, no tap, drag, y luego no debe ser smart animate, debe ser push Entonces podría ser push se podría mover, podría ser empujado, pero push es el más suave y se ve bien O sea, es la que más se usa, entonces hay que hacerlo de derecha a izquierda. Entonces ves que la pantalla viene de derecha a izquierda, y luego también puedes revertirla cuando vas de derecha a izquierda, puedes hacer que la pantalla venga de izquierda a derecha. Entiendes la idea. Ahora me gustaría crear un poco de menú pop up. Este es un menú que al hacer clic en el signo más, te va a contar un par de acciones. Aquí me estoy inspirando un poco de Google Drive porque Google Drive tiene algunas opciones. Dice escanear documento, subir archivo, crear documentos, crear hojas, etc. Estas son las opciones que estamos buscando aquí. Sólo como ejemplo, lo que podríamos hacer es analizar archivo, escanear documento, o crear gráfico o algo así. Déjame obtener los íconos para ellos, configurarlos correctamente, crear algo de relleno, y ahí vamos. Ahora voy a prototipar esto para que cuando alguien haga clic en el botón más, esté de barril, vaya a abrir overlay y este overlay va a ser manual, así que voy a elegirlo y va a estar justo encima de él, así como esto. Y se va a cerrar al hacer clic afuera. Va a tener un fondo de fondo negro 25%, y se va a disolver, pero va a ser muy rápido. Van a ser 100 milisegundos o algo así. Entonces ahora tenemos esto. Ahora veamos cómo se ve. Volvemos al click, y así es como se ve. Ahora, por supuesto, podemos crear una animación de esto. Sería mucho más ordenado hacer eso. Pero déjame mostrarte cómo podemos hacerlo muy rápido. Entonces agrega botón, y voy a llamar a este pop up uno y pop up dos. Pega dos. Lo que voy a hacer aquí es que voy a hacer esto más pequeño y voy a hacerlo de arriba o de abajo, ¿de acuerdo? Entonces se va a abrir así o tal vez así incluso, y luego va a continuar a su tamaño completo. Y como haces esto es que agregas el plus y dirás, después del retraso y harás que el retraso sea cero, que va a ser de un milisegundo, y vas a decir smart animate y swap overlay Va a cambiar de esta superposición a esta usando smart animate, y va a suceder en 300 o digamos 100 milisegundos y los componentes de reinicio permanecen restableciendo la posición de desplazamiento y veamos Ahora voy a probarlo. Permítanme convertir esto en un punto de partida de flujo. Entonces solo voy a eliminar esto no debería ser un punto de partida de flujo. Y luego haces clic aquí, supuestamente, y así es como sucede. Pero quiero decir, debería ir de abajo a arriba. Esta es toda la idea. Tú creando un poco de animación que te dé algunas opciones. Ahora, por supuesto, podemos agregar un poco más de espacio entre las opciones solo para asegurarnos que las personas puedan hacer clic en ellas si así lo desean. Así que asegúrate de que esté disponible, y luego voy a configurar esto para que ahora tenga una posición diferente. A ver. Bien, para que pueda analizar el documento de escaneo de archivos. Puedo traerlo un poco más bajo. Y ahí vamos. Puedes hacer estas acciones. Puedes cambiar estas páginas, así como así, tenemos un producto que está tomando forma. Ahora solo tenemos que hacer algunos ajustes rápidos, opciones rápidas aquí, voy a copiar este elemento aquí, pegarlo aquí. Y voy a cambiarlo un poco. Voy a hacerlo para que esto sea 20, y esto también sea 20. Ahora los tamaños son diferentes y voy a copiar y pegar esto. Voy a agregar un poco más de espacio entre ellos, tal vez 16, y voy a convertir estos en un diseño automático. Voy a hacer que el espaciado entre ellos sea 24, e incluso voy a añadir una línea. Entonces haz clic en L, mantén presionada la tecla Mayús y luego puedes hacer una línea recta, pegarla aquí y asegurarte de que esté llenando el contenedor. También puedes hacerlo de color gris muy claro, y luego puedes extender el contenedor, y puedes ver que estos también están llenando el contenedor, y luego quiero decir, prefiero convertir esto en un componente, así que llamaré a este ítem. Vamos un poco más fantasioso con este. Voy a darle un poco de relleno. Y haga doble clic para que se abrace a la altura. Entonces veamos cómo se ve con, con un relleno. Así es como se vería. Podemos mantenerlo así. Quiero decir, esto es más o menos cuadrado, o podemos seguir nuestras esquinas redondeadas y hacerlo un poco redondeado. Entonces podemos agregar un estado y podemos hacer el estado hover. Perdón por eso. Las tapas se bloquean. Entonces con el estado Huber, agregaríamos un relleno que es negro y que es 10% Esto es cuando haces clic en él. Nuevamente, podemos prototipar esto y hacerlo de manera que de barril o mientras se presiona, así es como se vería. Copia esto, pegarlo aquí, eliminarlos, y luego solo trae la línea entre ellos, mira cuánto es el espaciado. Se siente como que es demasiado. Voy a hacer este 16 y luego copiar pegar, copiar pegar, copiar y pegar, copiar y pegar. Estos son tus ajustes. Voy a ponerlos en el medio, asegurarme de que haya algo de relleno a la derecha y a la izquierda. O sea, podemos extenderlo y darle un poco de relleno, sólo 16 o algo así. Estos son nuestros ajustes, y podemos simplemente escribir un texto grande que diga ajustes. Eso es algo que podemos hacer. Entonces como puedes ver, el espacio aquí no es lo mismo que el espacio de arriba. Así que podemos hacer es que podemos agregar y hacer que sea 16 relleno de arriba y abajo solo para asegurarnos de que todo sea igual. También podemos crear una línea aquí solo para demostrar que este es el título y entonces todo lo demás aquí es algo así como ya sabes, parte puedes copiar el color aquí, en él aquí y ver si eso es lo suficientemente claro. Yo diría que lo es. Pero ahora vamos a asegurarnos de que esto es comprensible qué tipo de configuración, así podemos decir las preferencias del usuario, y luego escribir usuario aquí. Entonces podemos decir privacidad, términos y condiciones. Podemos decir perfil, y escribo apretón de manos y luego aquí red, tal vez o no estoy seguro Bien. Suscripción. Entonces, digamos monedas. O simplemente suscripción. ¿Cómo se vería la suscripción ? No, eso no ayuda. Así podemos crear un ojo y eso es algo así como la privacidad. Así que copia este pase aquí, y podemos simplemente tirar los términos y condiciones hasta el final, tomar la línea con él. Y para las otras cosas, solo podemos resolver algo. Entonces preferencias de usuario, privacidad, suscripción, perfil de usuario. Perfil público o perfil social. Vamos a traer esto aquí arriba. Escribo perfil. Es usuario círculo. Usuario del círculo. Entonces este podemos cambiarnos a engranajes. Podemos hacerlo más grande solo para que quede más claro que estos son los ajustes, y podemos darle el mismo color. Es decir, ahora mismo, el negro oscuro es un poco duro, así que puedes darle esto y aquí también podemos agregar el mismo texto aquí y decir reportes. Ya que aquí está más inclinado a la izquierda o alineado a la izquierda, también puedes hacerlo aquí o podemos mantenerlo en el medio ya que esto es solo un filtro, depende totalmente de ti Totalmente bien hacerlo así, y luego podemos pegarlo aquí y decir comunidad. H Ahora bien, como pueden ver, no estoy alineando esto perfectamente en estos momentos, solo estamos trabajando muy rudo. Ahora, ¿qué podemos hacer aquí? Quiero decir, déjame volver a poner esto aquí. En lugar de hacer esto, podemos hacerlo. Por lo general, en las redes sociales, hay una página para ti y luego hay una página de comunidad o página donde en realidad es solo una página de seguimiento, solo mostrándote lo que estás siguiendo en lugar de mostrarte solo a toda la comunidad. Eso es algo de lo que también podemos hacer uso totalmente. Para que podamos mantenerlo así. Entonces para ti y siguiendo y una cosa de la que no nos aseguramos es que podemos copiar esto aquí y llevarlo a este marco y luego cambiarlo de tamaño solo para asegurarnos de que está claro qué opción se elige actualmente, ¿verdad Entonces solo centra esto. Así que básicamente, algo así. Y lo mismo aquí. Podemos lograrlo. O sea, podemos hacerlo el 5% aquí para que no sea demasiado fuerte y lo mismo aquí, ahí vamos. Ahora es un poco más comprensible dónde estás y qué estás haciendo. Voy a sacar esto un poco más alto ahí, y luego tenemos nuestra página de la comunidad donde deberíamos tener publicaciones e información de la gente de lo que están hablando y así sucesivamente. Esta es una interfaz de usuario muy rudimentaria solo para hacerte saber que este proyecto es bastante simplista Estoy tratando de mostrarte cómo puedes usar estas habilidades avanzadas usando FigMA crear una buena experiencia en una aplicación o sitio web o lo que sea que sea Acabo de darme cuenta de que todas estas interacciones que hicimos con estos botones, no deberían haber sido inteligentes animadas, sino más bien push Entonces, solo asegúrate de tener eso abajo. Pero hay que asegurarse de que de aquí para aquí, va a ser un empujón específico. Entonces va a ser así. Sí. Entonces a la comunidad, también va a ser de la misma manera. Y así sucesivamente y así sucesivamente. Pero aquí se va a revertir. Para que veas y asegúrate de que todos tengan capas coincidentes animadas elegidas en ellas. Elíjalos, mantén presionado Control Alt A, o simplemente puedes hacer clic aquí o aquí, y luego puedes hacer clic en todas las capas coincidentes y luego ir aquí y asegurarte de tener capas coincidentes animadas Lo mismo aquí. Y aquí. Esto es trabajo manual. Ahora cuando hacemos clic sobre ellos, siempre va a haber el efecto de desplazamiento Se puede ver que es bastante suave, bastante agradable y tenemos aquí de nuevo este botón que nos dice lo que podemos hacer, analizar archivo, escanear, documentar, crear gráfico, o lo que sea que sea. No voy a trabajar tanto del lado comunitario porque eso nos va a llevar en una posición diferente. Pero me gustaría trabajar más en la característica principal, el MVP, que es esto básicamente analizar archivos, escanear documentos, crear gráficos Una cosa que podemos hacer. copiar y pegar todo este fotograma, copiarlo, pegarlo, puedo traerlo aquí, borrar todo de él. Y entonces voy a hacerlo un poco más corto. Lo que voy a hacer es que le voy a dar un poco de esquinas redondeadas así como así, pero justo arriba, no desde abajo, y voy a añadir un poco de barra aquí. Esto es básicamente un pop up que va a aparecer desde abajo. Simplemente haz este tres o algo así, hazlo un poco gris, y luego danos algunos extremos redondeados. Lo agrego aquí. Bien, perfecto. Esto parece muy iPhone, y voy a llamar a esto Analizar archivo. Entonces, cuando haces clic en Analizar archivo, te va a pedir que compartas tu archivo. Ahora para esto, necesitamos entender cómo funciona cuando quieres compartir dicho archivo y ¿cómo funciona? Da clic en Subir archivo. Y cuando se trata de iPhones, va a seguir adelante y abrir una ventana mostrando tus archivos Va a decir algo como en mi teléfono o en mi iPhone. Lo va a poner aquí, y luego va a poner algunos botones para ti aquí o tal vez incluso te mostrará algunos archivos. Así que sigamos adelante y escribamos el icono del archivo IOS. No compras, sino imágenes. Una vez que encuentres una con la que estés contento, puedes copiar esa imagen y traerla hasta Figma. Entonces lo que voy a hacer es rodear la zona y decirle que la aísle. Ahora tenemos este icono que queríamos usar aislado. Ahora podemos traerlo aquí y mostrar cómo podría quedar en un iPhone. Sólo voy a escribir aquí descargas o algo o lo que sea que sea. Copiarlo y agregar algo más. A lo mejor no iCloud, pero a lo mejor hay una X aquí o algo así. Entiendes la idea y luego vamos a ir a Analizar archivo, sostenerlo y traerlo hasta Analizar archivo. Vamos a decir básicamente superposición abierta, vamos a decir inferior centro. Lo va a poner aquí en la parte inferior central. Y quiero decir, veamos si funciona. Y vamos a decir fondo cerca al hacer clic afuera, y va a pasar de abajo a arriba, y va a estar dentro de los 300 milisegundos. Entonces veamos si eso funciona. Hacemos clic aquí y hacemos clic en Analizar archivo. Y así, lo abrió. Pero realmente no podemos, quiero decir, se puede ver que podemos cerrarlo pero y si queremos básicamente tirarlo hacia abajo, no podemos ir a la otra página, pero no podemos tirarlo hacia abajo. Ahora bien, la forma de hacerlo es básicamente sostener esto, darle una interacción, y esta interacción debe ser arrastrada. Ahora, puedes ver si ponemos drag aquí, tenemos un problema porque tenemos dos opciones de arrastre. Quiero decir, funciona, pero en realidad necesitamos cambiar uno de ellos. Esto no debería ir a la configuración, como puede ver, no deberíamos poder hacer clic en esto y luego ir a la configuración. Pero más bien, lo que queremos que suceda es en lugar de navegar, queremos cerrar la superposición. Cuando lo arrastras hacia abajo, debería cerrarlo. A ver si eso funciona así. Simplemente fue fácil así así. Lo tiras hacia abajo, y entonces estás como, no, no, no, no, no quería analizar un archivo. Más bien, quería escanear un documento. Ahora, un documento también podría ser lo mismo, o lo que podemos hacer es crear un marco de iPhone 17 y podemos crear una situación de cámara. La forma en que funcionaría es que mostraría dos barras negras. Y luego un círculo blanco. Podemos hacer esta barra un poco más pequeña. Y entonces también podemos traer esta X aquí arriba. Entonces, veamos. Quiero decir, esa podría ser la opción de documento escaneado, y luego podemos ir aquí. Y podemos mostrar, como, cómo se ve un documento. Imagen de un formulario sobre una mesa. De un documento. Bien, entonces ahora encontré una foto, lo cual es bastante divertido. O sea, alguien se está declarando en bancarrota, lo cual no siempre es gracioso, sino solo una foto divertida para este caso de uso. Alguien está tratando de escanear un documento y éste abre la cámara de su teléfono y esta es la primera pantalla. Sólo voy a mantener las superposiciones por aquí o las acciones específicas aquí abajo solo para organizarlas un poco Voy a borrar esto aquí. No lo necesitamos. Entonces vamos a necesitar escanear documento y éste básicamente abriría esto como una superposición, supongo. Y estaría centrado o se puede decir inferior centro también, podemos darle las mismas cosas y también podemos hacerlo un poquito más corto. De hecho vamos a ver cómo se ve ahora mismo. Cuando haces clic en él, simplemente abre la cámara o puedes cerrarla desde aquí. En realidad no hicimos prototipos de estas interacciones, superposición cercana, lo mismo aquí, pero no debería ser tan alto. O también podemos tener aquí este pequeño bar para demostrar que puedes tirar esto hacia abajo. Entonces podemos darle la misma acción aquí. Podemos simplemente copiar la interacción, pegarla aquí, y luego como pueden ver, podemos tirarla hacia abajo. Pero eso significa que también tenemos que darle 36 esquinas redondeadas de arriba y abajo solo para que se vea suave. También puedes hacer que todo el marco sea un poco más pequeño así. De esta manera, no ocupa toda la pantalla, sino que puedes escanearla así así y luego puedes tirarla hacia abajo. Pero luego muestra esta parte que no me gusta mucho. Sólo voy a guardarlo como estaba antes. Creo que esto se ve bastante bien. Estaba enfocado. Podrías echar un vistazo a tus documentos y escanearlos correctamente. Lo que sería aún más ordenado es si tienes este pop up al principio y básicamente decía, así es como puedes escanear tus documentos A Muy bien, así que rápidamente prototipo esto y luego lo que voy a hacer es que voy a poner esto afuera y llamar a esta instrucción o tutorial pop up y luego sostendré este frame, crearé una interacción. Esto será después del retraso y va a ser un retraso de 100 segundos, y va a abrir la superposición y va a estar centrada y va a tener lo mismo que fondo cerrado al hacer clic afuera. En lugar de entrar, solo va a disolverse dentro de los 100 milisegundos. Te lo vamos a decir cuando hagas clic en click. Empecemos, básicamente va a cerrar la superposición. Entonces vamos a probarlo ahora. Vas a Escanear documento, se abre esto. Debería tener un poco más de retraso. Y digamos que este retraso es 500 milisegundos. Ahora vamos a repetir. Haga clic en Escanear documento, lo abre y dice: Tome una foto para escanear documento, asegúrese de que sus documentos estén en marco y que la cámara esté enfocada. Empecemos, y luego puedes seguir adelante y tomar una foto o puedes bajarla y decir, ¿ sabes qué? Quiero crear un gráfico. Entonces, lo que hemos hecho hasta ahora en esta aplicación, básicamente hemos creado diferentes pestañas. Creamos este SAAS, que es so 19. Proyecto de clase: diseña una interfaz SaaS responsiva: Ahora es el momento de poner en práctica todo lo que has aprendido. Para este proyecto de clase, vas a diseñar una interfaz de software como servicio utilizando características y técnicas avanzadas de Figma , como componentes, diseños de auto, variables y micro interacciones Comience por crear un sistema de diseño limpio y escalable que pueda usar dentro de su diseño. Eso significa que sigue adelante y elige los colores que vas a usar, configura tus variables y estilos, elige fuentes y todos los pequeños detalles que quieras obtener justo. Después de que hayas terminado, sigue adelante y empieza por crear tu diseño. Crea una pantalla. Puedes comenzar con una pantalla de escritorio o puedes comenzar con una pantalla móvil. Una vez que hayas terminado de crear y diseñar cómo se verá, asegúrate de que también sea receptivo usando el diseño automático, usando restricciones, asegúrate de poder estirarlo y mostrarlo en diferentes tamaños de pantalla, y aún así se vería bien. Como pequeño consejo, también puedes usar puntos de interrupción para crear una versión diferente, para una computadora de escritorio, otra para una tableta y otra para un teléfono Ahora, da vida a tu diseño mediante uso de micro interacciones y animaciones usando las funciones de animación inteligente y prototipado avanzado en Una vez que hayas terminado, sigue adelante y exporta tu proyecto y subirlo a la galería de proyectos. Siéntase libre de agregar un poco de descripción sobre sus decisiones de diseño, hablar sobre su sistema de diseño y demás, solo para aclarar qué hizo y por qué lo hizo Ahora, recuerden, el objetivo aquí no es solo diseñar algo que se vea bien y hermoso, sino también diseñar algo que se vea real y funcional al igual que una interfaz lista para la producción. Esta es tu oportunidad de mostrar tus habilidades avanzadas de figma, así que tómate tu tiempo y diviértete con él 20. ¡Felicidades!¿Qué sigue?: Enhorabuena por terminar la clase. A estas alturas, ya has aprendido a abordar y usar Figma como un diseñador avanzado, desde creación de sistemas de diseño escalables y diseños receptivos hasta la creación hermosos prototipos interactivos y el uso efectivo de herramientas modernas Estos son el tipo exacto de habilidades que realmente marcan la diferencia cuando estás trabajando en proyectos profesionales. Y la clave para dominar todo esto es la práctica, mucha y mucha práctica Así que sigue experimentando, sigue probando diferentes cosas y refinando tus flujos de trabajo y aplicando estas técnicas a tus propios proyectos Si aún no lo has hecho, por favor sigue adelante y sube tus archivos de diseño a la galería del proyecto. Realmente me encantaría ver lo que se les ocurrió a ustedes. Y si has disfrutado de esta clase, no dudes en dejarnos una reseña. Realmente nos ayuda a obtener un poco de comentarios para crear contenido aún mejor para ti. Muchas gracias por unirte, y te veré en el próximo curso.