Diseño UX y UI avanzado en Figma: conviértete en un profesional de Figma

1. Introducción al curso avanzado de Figma: Hola ahí. Oye, mi nombre es Dan Scott y este es el Curso Avanzado Figma Entonces, ¿quién soy yo? Yo soy Dan. Soy diseñadora de UX e instructora Figma. He ganado múltiples premios de enseñanza y he ayudado a más de 1 millón de personas convertirse en mejores diseñadores ahora a través de mis cursos. Ahora este curso está dirigido a personas que ya conocen los fundamentos de Figma. O has hecho mi curso Essentials Figma o es Autodidacta Pero sabes que hay herramientas y consejos y flujos de trabajo y actualizaciones que simplemente no has tenido tiempo de ir a explorar. Entonces eso suena familiar. Vamos a cursos para ti. Durante el curso, se le dará su propio resumen y persona únicos y creará una aplicación que está lista para caer en su cartera. Comenzarás por sumergirte profundamente en los autolayouts anidados multinivel Harás componentes robustos que son fáciles de actualizar pero difíciles de romper. Aprenda trucos de flujo de trabajo para administrar activos de diseño, estilos, componentes, diseños de cuadrícula y columnas. Por último, aprenda a usar las Variables y ponerlas a trabajar. La creación de prototipos aún más completos puede usar variables para hacer fáciles modos de luz y oscuridad y versiones de espaciado compacto y cómodo de todos sus componentes Y con todos nuestros nuevos conocimientos variables podremos entender y crear nuestros propios Tokens de Diseño. Aprende técnicas avanzadas de animación en Figma. Construirás elementos receptivos listos para cualquier tamaño de dispositivo, todo lo salvaje aprendiendo los mejores atajos y complementos para hacerte un diseñador de UX más eficiente, aprenderás lo poderosa que puede ser la película para manipular y enmascarar imágenes y videos Conocerás todas las funciones avanzadas de tipografía y cómo usar la IA en tu proceso para hacerte mejor diseñador de UX Aprenderás todas las técnicas avanzadas de prototipado para subir de nivel tus pruebas de usuario Por supuesto que sería un perro carlino ahí en alguna parte. Ahí está su Aprenda las herramientas y técnicas de accesibilidad adecuadas . Te conviertes en un jefe variante. Aprende a reducir esos cien componentes variantes difíciles de manejar a uno mediante Mastering Properties, llama por teléfono a todas las mejores formas de trabajar con otros diseñadores, desarrolladores y todas las Ahora hay mucho más que eso en este curso hay más de 160 videos. Entonces echa un vistazo a la tabla de contenidos, mira qué cubrimos. Echa un vistazo a las opiniones y testimonios de los estudiantes. Y verás que este curso te llevará de Figma bueno a Figma genial. En este curso, utilizaremos proyectos prácticos del mundo real. Puedes descargar los archivos de ejercicios y las hojas de acceso directo para que puedas trabajar a mi lado en los proyectos de mini clase, no en la tarea. Entonces, si quieres llevar tus habilidades Figma al siguiente nivel, regístrate y pasa de ser bueno a un Superhéroe Figma. Me siento como un superhéroe durante todo el recorrido. Me verás hinchando el pecho porque de lo contrario, vi algunas de las Ves mi culo metido en mi barriga, mi barriga hambrienta. Nunca, nunca, nunca, nunca. Diseño Rooney. Entonces hay mucho resoplado en el pecho. De todos modos 2. Primeros pasos en el curso avanzado de Figma: Bien, para empezar, lo primero es descargar los archivos de ejercicio Entonces habrá un enlace en la página. descargue los archivos que usamos para Sin embargo, descargue los archivos que usamos para este curso en esa carpeta, también habrá la hoja de acceso directo. Es un PDF. Puedes imprimirlo y van a ser muchos atajos en este curso. Voy a pasar por ellos montones, pero sería útil tenerlo a tu lado para que puedas quedarte con los que realmente te gustan y realmente quieres recordar. Sí, así que descarga los archivos y luego ¿qué sigue? Eso es lo que sigue. ¿Qué tan rápido es Dan hablar? La mayoría de la gente piensa que hablé demasiado rápido y probablemente lo hago. Algunas personas. La gente ha dicho que hablo demasiado lento, quieren acelerarme. Adivina lo que puedas. Ahí hay un diente abajo en la esquina inferior Me puedes sentar a la velocidad que quieras. Gay, despacio rápido y lo que quieras. ¿Puedes hacerlo con la versión gratuita? Puedes totalmente. Prácticamente todo este curso puedes hacer la versión gratuita de Figma. Veremos algunas de las funciones de pago porque es un curso avanzado. Quieres saber lo que podrías estar perdiendo si estás en la cuenta gratuita. Pero la mayor parte lo hace con equipos más grandes y no faltan tantas características. Tiene más que ver con la colaboración, pero te llevaré a través de esos que tengas una idea por ellos. Pero sí, puedes pasar por la mayor parte de este curso con la versión gratuita y los pequeños bits que se pagan, vale la pena saberlo aunque sí tengas la versión gratuita sobre lo que se puede hacer. Si terminas en una posición en la que estás viendo la versión paga. No estoy seguro de qué es esto. ¿Qué más? Bien, Por último está el nivel uno y el nivel dos. Si miras en los contenidos, verás que algunos de los temas más grandes que partes más chunkier de Figma con su mucho por recorrer Me he dividido en dos partes. Nivel uno. Nivel dos. ¿Por qué? Principalmente porque me estaba volviendo loco tratando de armarlo porque hay mucho esas cosas como autolayouts, una de ellas, por ejemplo, hay mucho que hacer y es muy importante aprender en este curso, pero hacerlo todo a la vez, incluso preparándolo, yo estaba como, Hombre, necesito ir a hacer Y eso es lo que he hecho. los mejores trozos de chunky realmente buenos y el Nivel uno Entonces cuanto más oscuro oscurece la manera equivocada de romperlo para que cuanto más detallados tengamos, lo vamos a continuar más adelante en el Vamos a tomar dos va en un par de esos grandes temas, Nivel uno, Nivel dos, ¿Eso tiene sentido? Porque me estaba volviendo loco y sé que tú también te aburrirás. Porque esto es realmente largo. queremos mezclarlo un poco, pero el diseño automático aprende un montón de cosas buenas Tómate un descanso, haz algunas otras cosas. Vuelve al diseño automático y realmente me gusta obtener súper avanzado Bien, eso es todo, para empezar. Empecemos. Hacer algo 3. 03 Diseño receptivo: Hola a todos. Bienvenidos al curso propiamente dicho. Este video aquí es como un video de ponerse al día. Son algunos fundamentos que probablemente ya conozcas, ¿de acuerdo? Sólo para asegurarse de que todos estén en el mismo nivel, ¿de acuerdo? Necesito asegurarme de que todos sepan qué creación básica de un diseño automático, para qué sirve, componentes, ese tipo de cosas. Y vamos a hacer estas dos páginas aquí. No son súper especiales, así que si estás razonablemente avanzado, puedes saltarte este si estás en el medio o no tienes mucha confianza. Solo quieres asegurarte de que estás todo bien. ¿Quieres refrescar? Este es el video para ti. Yo me aseguraré. Además, también agregaré algunos buenos atajos a lo largo este video para asegurarme de que sea valioso. Pero si eres como, hombre, esto es un tipo de cosas que ya conocemos, está bien. Salta a lo largo. Nos adelantamos cada vez más en el curso. Solo necesito asegurarme de que todos estén bien. ¿Estás bien? La versión corta es auto. Los diseños son geniales porque puedes hacer cosas como esta. Se puede mover por ahí. Es ajustable. Es flexible. Bien. Puedo decidir que va a estar en este marco de diferente tamaño aquí, el iphone más grande. Y puedo encender y apagar las cosas. Entonces es por eso que los diseños de auto son buenos, los componentes son realmente buenos. Porque podría decidir más adelante que este tipo de aquí, voy a acercar, bien, es un componente, lo hacemos en este video. Pero yo podría decidir en realidad en el interior aquí está él. No lo sé, tengo esto en marcha, no sé qué es esto. Pero como es un componente K tiene un oído, se parece a mi bola de pelo en la parte superior, K, ¿puedes ver que esta se ajusta también Así que revisemos qué hace un diseño automático, por qué y cómo hacer componentes. Además, voy a lanzar algunas cosas interesantes sobre los iconos, los tamaños de los iconos, cómo escalarlos. Derecha. Y vamos a empezar el inicio de nuestro proyecto. ¿ Te llevarías bien, Dan? Bien. Bien, comencemos. Voy a usar el nuevo archivo de diseño. Hay muchas formas diferentes de iniciar un archivo de diseño. Tú eliges el que más te guste. Voy a cambiar el nombre de éste en vez de Sin título. Sólo voy a hacer doble clic en el título. Voy a llamar a este Event App V 1.0 Hit Enter y ahora el primer atajo va a ser la clave para fotograma. Bien, ahí está, ahí está el icono, y voy a poner un teléfono. Ahora mi consejo es elegir cualquier teléfono que estés usando para hacer las pruebas. Bien, si tienes un iphone muy viejo, usa eso si tienes el más nuevo, que puedes probar en tu teléfono usando la app Figma, puedes descargarlo desde el Android o la App Store Nuevamente, es genial poder burlarse de eso porque coincide bien. Siempre va a ser el futuro cuando estés viendo este podría ser el iphone 27. Usa eso. Bien, voy a usar el iphone 14 y lo que me gustaría hacer es usar un marco de otro tamaño también. Entonces voy a conseguir el FK otra vez. Voy a usar la talla más grande más el teléfono 914 más ¿por qué? Porque supongo que este curso aquí te está mostrando cómo construir componentes, auto layouts, variables de restricciones, todo ese tipo de cosas. Es para que podamos construir unidades que podamos usar en nuestros diseños que sean bastante flexibles y resistentes a diferentes tamaños, ¿de acuerdo? Y cambia y siendo utilizado por otras personas. Y ya sabes, ese es el objetivo aquí en este tipo de curso avanzado, es hacer cosas que no son solo bofetadas es la palabra equivocada para ello, sino como algo así como hacer cosas y luego seguir adelante Queremos hacer cosas que sean realmente receptivas. El uso en diferentes dispositivos puede ser utilizado por diferentes miembros del equipo, pero sin romperlo y por usted usarlo en el futuro, ahorrándose tiempo. Bien, lo primero que tenemos que hacer es alinearlos. ¿Bien? Entonces necesitan alinearse en la parte superior. No estoy seguro de por qué turno uno te muestra todo en tu documento. Sólo un par de pequeños atajos para flexionar nuestros músculos. Probablemente ya los conocemos. Bien, el siguiente es que vamos a traer algunos íconos. Entonces vamos a usar otro atajo que conocemos muy bien. Probablemente tal vez mandar turno K en una PC, es turno de control K trae iconos o trae imágenes, al menos en tus archivos de ejercicio hay unos iconos de cancha doblados. Vamos a traer a todos estos tipos. Vamos a hacer clic en abrir ahora cuando estés poniendo varias imágenes, bien, puedes hacer clic una vez y obtienes como el tamaño al que se asignaron los SPG Bien. A veces son enormes y ni siquiera los puedes ver. Son tan grandes. ¿ Alguna vez has hecho eso? Bien. Es como si hubiera un gigantesco archivo SG Illustrator que trajiste Bien. Puede hacer clic y arrastrar. Bien, Pero terminas con estas tallas calamar, puedes cambiarte para meterlas. ¿Verdad? Pero no es lo que queremos. Lo que quiero hacer es que voy a deshacer para deshacerme de todos ellos. Presiona ese mismo comando de atajo, cambio K, control de cambio K en una PC. Tráelos a todos y es más fácil ir a colocar todos y se atascan en medio de tu documento. Primero, veamos que Están todos dentro de los marcos. Ahí vas. Bien. Y me gustaría decirte, voy a mover por todas partes hasta los bordes solo para sacarlos del marco del iphone por el momento. Porque quiero hacer un par de cosas. Lo primero que quiero hacer es convertirlos en componentes, porque normalmente todo termina siendo un componente. Me sale esa pregunta como, ¿qué debería ser un componente? La mayoría de las cosas no hace daño para convertirlo en un componente. Y te ayudaremos más adelante, sobre todo si va a ser usado más de una vez, como estos íconos. Y por más de una vez, no como necesariamente en la misma página o incluso en el mismo documento. A lo mejor va a ser utilizado en otro, ya sabes, un archivo Figma completamente nuevo. ¿Bien? Y ya sabes, va a ser utilizada para futuros proyectos. Debería ser un componente porque todos conducen de nuevo a ese original, y cuando haces una actualización, vienen por la derecha. Todo sea un componente. Todo bien. Lo siguiente que quiero hacer es que quiero hacerlos, los tengo todos seleccionados aquí. En realidad quiero decir hacer múltiples componentes, no solo uno gigante, ¿de acuerdo? Quiero hacer varios componentes todos separados, ¿de acuerdo? Están todos ahí, bonito. Vamos a llevarlos a un tamaño apropiado. Ahora, escalarlos es fácil, ¿verdad? Si los tienes todos seleccionados, mantén el turno y agarras la esquina y ellos bajan, eso funciona la mayor parte del tiempo. Pero en mi opinión, es mejor usar la herramienta de escala para hacer todo tu escalado. Entonces es la tecla K de tu teclado. Bien, O puedes simplemente elegirlo aquí. Bien, usa esa porque escalará cosas como el trazo y los efectos al mismo tiempo. Si alguna vez has descargado los íconos de otra persona y no están escalando del todo bien y los trazos siguen siendo los mismos y los refugios están haciendo cosas raras, solo usa la herramienta de escala. La otra cosa buena de la herramienta de báscula está por aquí. Puedes escoger básculas. Se puede decir, quiero que sea, ya sabes, estás trabajando en un diseño que es cuatro veces el tamaño o es la mitad del tamaño. Sin embargo, para lo que tiendo a usarlo es que puedo ingresarlo. Por aquí puedo ver. Bien, quiero que tengas un buen tamaño de icono. ¿Qué es un buen tamaño de icono? Puedes elegir cualquier tamaño de icono que te guste, pero 32 o 48 es generalmente un tamaño de icono muy bueno. Todo el mundo, quería darle un poco más de explicación. Tengo un par de personas perdidas. Yo sólo quería mostrarte cómo sales de él si te quedas atascado tú mismo. Y es bueno saber para todos es que tengo estos, están todos apilados. Y si los selecciono a todos y voy al comando K. No, solo golpeo la den K K y voy a hacerlos todos de la misma altura y ancho que funcionan perfectamente Si deshago, si solo les doy una selección perezosa y hago lo mismo, vayamos a K, hazlos 32. Lo que terminó pasando es que en realidad tengo, ¿ves que todos los nombres están todos por aquí, pero los íconos están aquí abajo Entonces el marco que es un, en el exterior no se escaló, pero los bits en el interior terminaste con como esta cosa extraña donde el envoltorio padre, ¿de acuerdo? El marco, el vector en su interior son de diferentes tamaños y hace que todo sea realmente complicado, ¿de acuerdo? Y a veces se pueden seleccionar sólo pedacitos de uno y no del otro. Entonces, si terminas con este nombre pasando el rato en medio de no win'sland, si terminas con un nombre solo una especie de pasar el rato en el, estás como, ¿qué Peligro significa que tienes un icono separado de su marco padre. Sigue ahí dentro, como si pudieras agarrar el nombre y moverlo. Lo que pasa con los nombres también es solo para reiterar, si realmente estás en un marco, bien, estás dentro de un marco padre, el nombre desaparece. Sólo le da el nombre al envoltorio más exterior. Nada ha cambiado realmente al respecto, pero no se puede ver el nombre aquí. Todavía tengo el mismo problema. El marco gigante con la cosa en el interior. Bien. Entonces eso es algo a tener en cuenta. Bien. Solo asegúrate de que cuando estés escalando, agarres todo y solo mantén un ojo aquí en el panel de capas para que los padres sean todos seleccionados antes que tú, pequeño. Eso fue un problema es que si tuviera una herramienta de escala, están todos uno encima del otro y si los hago todos 32, 32, son todos 32 de ancho. Pero si los traigo de una manera diferente en este curso, hago mucho solo arrastrando archivos Ves que lo trajo de manera diferente a cuando lo hicimos antes, donde usamos el archivo, importamos archivo, importamos los apila uno encima del otro, Arrastrándolos hacia adentro, terminas con esto como una pequeña cuadrícula Si lo haces ahora vas a K y vas a ancho de 32. Vamos a cambiar dos, acercarles el zoom. Lo que termina pasando es que ha hecho todo este grupo tenga 32 píxeles de ancho, no los iconos individuales. Este icono ahora solo tiene 15.4 píxeles, por lo que es fácil de arreglar Puedes trabajar tu camino individualmente y hacerlos todos 32, o puedes simplemente conseguirlos en la posición como las otras opciones de importación. Simplemente apílelos uno encima del otro usando alineación horizontal y vertical. Y luego hacer exactamente lo mismo. Ir a K y hacer el ancho o alto y 32. Ahí vas. Solo un poco de conocimiento extra para ti, para cualquiera que se haya perdido, y para aquellos de ustedes lo entendieron bien, es bueno para ustedes se toparán con este problema eventualmente. Bien, continúe. Depende de para qué lo estés usando, a dónde tienen que ir. Pueden hacerse más grandes, pueden hacerse más pequeños. Es muy común aunque uses múltiplos de ocho. Lo cubriremos más adelante en el curso por qué eso es tan útil. Bien, así que les estoy haciendo a todos una altura de 32 y es posible que ya hayas hecho esto. Podría haber hecho clic y se fue, oh, no puedo manejar, necesitan ser tendidos, Dan Bien, voy a deshacer eso. No importa, no tienes que hacerlo. Pero solo los dejo ahí porque los voy a manchar a todos y voy a dar el turno A K para mi diseño automático Y ese es el diseño automático de accesos directos como shift A. Es lo mismo en Mac y PC. Figma parece estar moviéndose mucho a esa tecla de mayúsculas para ser un atajo Porque es lo mismo para Mac, y PC, y Linux o lo que sea que estés usando Figma. Y luego nos vamos, vamos a conseguir un diseño automático o nosotros ¿Tenemos un auto roto? Bien, fueron y cambiaron la cosita en Figma y ha causado algunos problemas en el curso Estoy de vuelta para actualizarlo. Y es realmente interesante porque probablemente aún no te hayas topado con él. Puede que lo hayas hecho. Pero lo que termina pasando está en el video, lo que hice fue que seleccioné todos estos y dijimos, hagamos que el auto out sea genial. Y todos se apilan uno al lado otro porque ahora están todos uno encima del otro. Bien, que han decidido que en lugar del tipo predeterminado de hacer que todos se derramen en objetos individuales, simplemente se han ido y los han apilado todos uno encima del otro e hicieron esta cosa llamada salida automática. Aún así. Excepto que dentro de este marco. La diferencia ahora es ¿puedes ver a estos tres tipos? ¿Puedes ver la diferencia en los íconos? Básicamente es algo llamado posicionamiento absoluto. Si conoces algún diseño web básico, sabrás lo que está pasando aquí. Pero básicamente lo está forzando a que todos se alineen uno encima del otro mediante el uso algo llamado posicionamiento absoluto. Eso lo cubriremos más adelante en el curso, pero por ahora sólo tenemos que apagarlo. Bien, si te voy, tienes posicionamiento absoluto porque puedo ver el ícono tiene la cosa A en el exterior. Puedes seleccionarlo e ir por todas partes aquí y apagarlo. Entonces aquí hay opción. No quiero posicionamiento absoluto. Voy a manchar estos dos últimos todo el camino de regreso por aquí, ¿de acuerdo? Y ahora todos no son un posicionamiento absoluto. Tienen algo llamado posicionamiento relativo, que era el predeterminado, pero ahora no es solo significa que se apilan como queremos que hagan nuestro menú. Y en nuestro caso, voy a patear el marco exterior y voy a decir en su lugar hacia abajo, vamos a ir a la derecha, en realidad horizontal. Y todo estará bien para el resto del video. Lo raro es, es que estos son los diferentes componentes. Y si no están apilados uno encima del otro, bien, puedo hacerlo y darle al diseño automático y funciona perfectamente. Es horizontal, está haciendo todo lo que necesitaba hacer excepto ese tipo, mira a este tipo, no está incluido. ¿Por qué no se le incluyó? Bien, oh bien, ahí vamos. Sabemos que si este tipo no está incluido en, es como hacer algo raro. Mira esto. Vertical, Horizontal. ¿Por qué ese tipo no lo incluyó? Es otro error que acabo de encontrar en este video. Sin embargo, es un buen caso de uso de por qué es importante vigilar si las cosas no funcionan. Echa un vistazo en las capas, mira si está absolutamente posicionada. Apágalo, y ahora será parte de la pandilla. Aquí vamos. Marco aparente arriba hacia abajo. Excelente. Haremos envoltorio, que es uno nuevo más adelante en el curso también. Ahí vas. Si las cosas no funcionan, comprueba que no estén absolutamente posicionadas. Otro pequeño consejo antes de irme, que vi causó solo un par de personas y es útil saberlo. Deshacer. Deshacer. Deshacer, Deshacer, Deshacer Cuando estamos trabajando en íconos, generalmente, estoy trabajando en un marco. Bien, no en esta tierra de No Man. Cuando estás en la tierra de Nadie, llegas a ver el pequeño nombre de como se llame. Puedes ver ese tipo de nombre de marco, Ka, o en nuestro caso nombre de componente. Si terminas arrastrando el interior de él, di si entro de esto por accidente y puedo arrastrarlo por separado de él, bien, eso es malo, obviamente Bien, entonces lo que quieres hacer es cuando están fuera de aquí, es muy fácil agarrar y arrastrar los nombres en lugar de intentar agarrar los objetos. En su mayoría funciona bien, pero a veces puedes agarrar la parte interior por separado del marco. Así que es fácil solo agarrarle el nombre cuando estás afuera y es algo así como la tierra de nadie. Bien. Es un poco más fácil trabajar cuando realmente estás dentro de un marco, el nombre desaparece y es un poco más deliberado con su selección Ahí tienes, un pequeño bono de actualización para ti. Continúa con el video. Entonces vamos a hacer esa cosa genial receptiva en la parte inferior, ya viste. Así que han conseguido componentes dentro de ellos. Tengo un diseño automático. Probablemente has hecho salidas de auto antes. Bien, Lo básico es, ver el pequeño icono ahí, ese es el marco para mi diseño automático. Estoy por aquí pensando dónde están todas mis opciones. Es porque sigo en escala. Pulsa la tecla V k y todo volverá a aparecer K, escala me da algunas cosas muy específicas y luego voy a tener V para volver a mi herramienta de movimiento en realidad solo se escribe ahí Al ir a golpear cruz, vete. Bien, así que ordene los diseños normalmente por defecto al correcto. Podemos ir a la izquierda y a la derecha. Podemos jugar con el espaciado. Bien, todos hemos hecho esto antes. Haz clic y arrastra el pequeño icono para jugar con el espaciado. Vamos a moverlo por aquí para que lo veas. ¿Bien? Puedes hacerlo en el documento. ¿Bien? Para que puedas hacer click en él. Y voy a hacer zoom un poco. Y puedes ver que puedes arrastrarlo sobre esto. Excelente. Fácil. reorganizarlos haciendo clic en solo uno de ellos. ¿Bien? O bucear dentro de él. Puedes ver este clic a la vez. Haga doble clic en él para entrar. Y puedes arrastrarlos por ahí, porque quiero que este sea el primero, quiero que el corazón sea el siguiente, y en cambio puedes arrastrarlos. Puedes usar tus llaves, así tienes una seleccionada. Solo usa tu izquierda y derecha o estás arriba y abajo dependiendo de en qué dirección tengas esto. ¿Bien? Y quiero el boleto, así que le hice doble clic , flecha izquierda Quiero esa ahí. Lo que quiero hacer por este es en realidad quiero apagar la venta de boletos, la opción de boleto. ¿Bien? Para la persona que no ha iniciado sesión porque aún no tienen boletos y está ocupando un valioso espacio. Ahora, bajo v. Hablando de v baja, llamémoslo nav, guión inferior Haremos los nombres adecuados más adelante en el curso. ¿Bien? Pero va a ser mi baja nev Pongo nervio primero para que estén ordenados muy bien para que nunca puedas tener el lado de nav más bajo. Bien. Y lo que quiero hacer es hacer doble clic a este tipo, maldita sea, ese es él. Y quiero apagar el globo ocular . Vine a borrarlo. Bien. Puedo borrarlo y ver esto en realidad doble clic. Eliminarlo y ya se ha ido por completo. No quiero eso, en realidad. Quiero traerlo de vuelta más tarde cuando la persona haya iniciado sesión, quiero que aparezca mágicamente Eso es lo bueno de la salida automática, cierto, es que el espaciado es genial, pero es este tipo de refluir, bien, esta capacidad de respuesta lo que lo hace súper útil Entonces solo quiero esos tres por el momento. Lo siguiente que quiero hacer es sostener la barra espaciadora. Vamos a conseguir esto aquí abajo y simplemente tirarlo en la esquina inferior. ¿Bien? Y arrastra esto por aquí y podrás perder el tiempo por aquí. Auto outs. Bien, voy a usar la central. Puedes jugar con tu espaciado. Bien, entonces tenemos nuestro diseño automático. Voy a duplicarlo en el tamaño de teléfono más grande, manteniendo presionada mi tecla de opción en una Mac, tecla en una PC y simplemente haga clic y arrástrela, puede obtener un duplicado, agarrar el cuadrado en la esquina. Si no agarras el cuadrado, a veces puedes agarrar el relleno, y eso puede ser un poco frustrante Bien. Así que agarra el cuadrado y puedo redimensionarlo, buscar el otro tamaño más grande y todo se sienta ahí muy bien Todavía no es particularmente resistente. Bien. Pero lo suficientemente bueno como para empezar. El problema con nuestro diseño automático en este momento es que si entonces digo, bien, genial. Dan dijo que podría encender el boleto para éste. Bien, este es el que tiene un usuario conectado. ¡Vaya! Uno equivocado. Entonces, iphone plus, y aquí quiero este. Enciéndalo, eso es bueno. Bien. Y puedo hacer doble clic en él y puedo ajustarlo y eso podría ser suficiente. Bien. Pero estamos aquí por las cosas avanzadas. Necesitábamos refluir automáticamente, queríamos ser resilientes y receptivos Hagámoslo en el siguiente video. 4. 04 Espaciado automático: Hola a todos. Vamos a ver hacer el espaciado automático entre estos diferentes iconos. Porque por el momento tenemos algo que es bastante manual. Y el problema con ello es que si encendemos otros íconos, las cosas no fluyen Bueno, no refluyan muy bien, todo tipo de derrama Mientras que este de aquí, ahora que tenemos la configuración automática en marcha, bien, cuando encendemos nuestro pequeño boleto, ves que todo se refluye muy bien Todavía tenemos todos nuestros acolchados a la izquierda y a la derecha. Todo es agradable y receptivo. También haremos un poco al final después de aprender auto, solo para agregar algún tipo de esquinas redondeadas e interfaz tipo de color en el fondo. Un poco de sombra paralela aquí en nuestro diseño automático Por ninguna otra razón que no sea realmente hacer algo durante este curso en lugar de simplemente no aprender herramientas individuales, hagamos algo juntos. Bien, solo envía esto a auto en lugar de un espacio fijo entre como 98 que tengo. Bien. Todo lo que haces es con él seleccionado por aquí bajo diseño automático, ve a los tres pequeños puntos. Hola a todos, una pequeña actualización. Y se han ido y lo han movido de las tres líneas punteadas a debajo de este desplegable ahora Y han cambiado el nombre. Entonces solía llamarse Espacio Entre, así verás cosas en línea que dicen espacio entre Y ve a los tres puntitos. Pero ahora es lo mismo, pero lo han llamado algo nuevo y lo han trasladado a otro lugar. Entonces ahora está debajo de esta brecha horizontal. ¿Bien? Si pasas el cursor por encima, se convierte en un pequeño menú desplegable Y este desplegable tiene auto. ¿Bien? Entonces en lugar de espacio entre él es automático y se pone en lugar de mi 98, automáticamente se llena el espacio. Entonces el marco es de un tamaño específico, los iconos son de un tamaño específico, Todo lo demás es automático. Ellos sólo van a llenarlo. Y lo que tenemos que hacer ahora es agregar el relleno al exterior, y eso también es una nueva actualización. Entonces esto podría cambiar porque lo han actualizado y es realmente doloroso agarrar el relleno realmente en el marco. Solías poder flotar fácilmente por encima del costado y simplemente arrastrarlo hacia adentro Eso podría volver a cambiar. Vigila. Lo puedes conseguir. Mira esto, buscando eso, mira ese pequeño número que ahí aparece. Si hago clic y mantengo pulsado, arrastre eso, eso me da relleno de la mano derecha. Bien. Y puedo tratar de encontrarlo por aquí. Y eso es en realidad este derecho, esto es acolchado para la mano izquierda. Si lo agarras y mantienes presionada la opción en una Mac, en una PC, puedes hacer ambas cosas al mismo tiempo. Lo puedes ver Arrastra ambos lados, lo cual es un poco práctico. Lo mismo con el fondo. Si quieres un poco de acolchado inferior, simplemente es muy difícil obtener cuál era el número. Puedes ver que parpadea pintar el botón, así que no lo arrastres sobre el documento, Solo ve por aquí y escréalo para decir que quiero la izquierda y la derecha y el espaciado vertical si quieres. Una vez que está ahí, en realidad es fácil de arrastrar, acercar un poco. Y lo que notarás es que si pasas el cursor por encima de él, ¿ puedes ver obtener esto como una pequeña línea azul Esa línea de hash azul es el relleno. Así que no estamos metiendo con el marco. El marco es el tamaño específico. Solo estamos jugando con el relleno que es genial para esta opción como auto Volvamos al video y te mostremos por qué es increíble en diseños responsive. Recuerda dos cambios, el espacio entre ahora se llama auto, y el relleno es realmente doloroso de agarrar. Sólo tienes que escrébalo por aquí. Ahí vas. Pero el enfriamiento al respecto, una vez que he establecido mi margen, Estos son solo auto, puedes ver que solo cambian el tamaño para que quepan. Y eso significa ahora si lo agrego por aquí, arrástrelo a través, manteniendo presionada la opción más antigua, mira esto. Si me arrastre la esquina ahora, ¿lo ve? Deja el mismo margen porque he decidido que digo margen bastante cuando me refiero al relleno. Acolchado, figmadin Bien, así que todavía tengo exactamente el mismo relleno en el exterior, que quiero por consistencia en diferentes aplicaciones. Sin embargo, un poco más de espacio, y mira auto va y llena ese espacio. ¿Por qué es eso bueno? Ahora mismo estarías como, si, puedo hacer eso. Es cuando hay que encender y apagar diferentes partes. Bien. Y conseguir que las cosas refluyan el momento aquí abajo. Mira esto. Este es el viejo con el espaciado fijo. Bien. Si enciendo mi globo ocular, mira esto Enciéndalo. Se destroza debido a mi espaciado fijo. Bien. Trata de obligar a que todo eso suceda y simplemente no hay suficiente espacio. Mientras que si es auto, bien, puedo decir donde está. Puedo decir que le das la vuelta al ojo en mi boleto vendido. Bien. Mira eso. Todo refluye automáticamente es increíble Quiero un relleno específico desde el borde por consistencia, pero estos se les permite hacer malabarismos Ahora lo que tiendo a hacer es no usar el camino largo. Bien. El espaciamiento mone lleno de espacio entre Eso está bien. Bien, puedes hacerlo de una manera más rápida y simplemente reemplazar el número de aquí. Bien, el espacio horizontal entre los artículos. Bien, el espacio entre nuestros íconos, simplemente haga doble clic en él y simplemente escriba un auto. Generalmente es más rápido y fácil. Se puede ver el cambio de icono mirar antes, después, antes, antes. De hecho, también lo puedes escribir aquí abajo, que es esto. Si voy a deshacer, puedes darle click una vez y ves dice 113 escriba un pedido. Bien, usamos nuestro miembro de acceso directo Alt u opción para arrastrar ambos lados a la vez, o puedes escribir aquí. Se puede decir que en realidad izquierda y derecha va a ser 48 o tal vez 56 dependiendo de la cantidad de relleno que desee. Bien, Lo siguiente que quiero hacer es darle estilo al marco. Esto no tiene nada que ver con el auto out automático. Solo tenemos que hacer esto antes de que nos vayamos porque encuentro que trabajar en un rectángulo está bien. Pero si miras tu teléfono, notarás que no tienes rectángulo. Es rectángulo ish con esquinas redondeadas. Así que voy a hacerle eso a nuestro encuadre. Antes de seguir adelante, puedes saltarte adelante si no quieres hacer esquinas redondeadas. Voy a dar click en el nombre iphone 14 para dar click en ese marco. Y voy a decir que tienes un radio fronterizo de 30, ¿de acuerdo? Y lo recorre todo, es más realista para un teléfono. Especialmente cuando intentas hacer márgenes y relleno. puede ver un poco estaba demasiado cerca del fondo, pero con una vuelta de esquinas, excepcionalmente demasiado cerca del fondo Así que voy a hacer clic en mi diseño de pedido y quiero un poco de relleno desde la parte inferior. Bien, 24, Se trata de lo correcto. Si estás pensando qué es lo correcto, ¿Quién hace estas reglas? Puedes hacer tus propias reglas dependiendo de cuánto estés usando el sistema operativo, ¿de acuerdo? Como Android o iPhone. Cuánto quieres imitarlo, o cuánto quieres hacer lo tuyo Si estás buscando y eres como nuevo en UX, nuevo en el diseño de UI, y te resulta un poco complicado. Como por qué escogió lo que tiendo a hacer cuando estoy trabajando en un componente del que no conozco mucho, como este nav inferior. Iré a revisar la documentación de IOS o la documentación de Google Android . Bien, veamos uno de ellos. Puedes mirar a cualquiera de ellos. Ambos. Bien, echemos un vistazo a este de aquí. Estoy usando el de Android. Hago mucho más diseño en Android porque ese es el teléfono que tengo, eso es en lo que quiero probar, y tienen muy buena documentación. Bien. Google Android llama a su sistema de diseño llamado Material. Bien, es a la M tres. Por el momento, podría ser M 20 para cuando llegues a él. Sin embargo, lo bueno de esto, es que puedes ir a cosas como esta, ¿de acuerdo? Vaya a componentes, eche un vistazo, vea si puede encontrar el nombre de la cosa que está tratando de diseñar. Y si eres un nuevo diseño de interfaz de usuario, tal vez ni siquiera lo sepas. Quizá tengas que ir a pasar algún tiempo aquí e irte, ¿qué demonios es un cajón de navegación? ¿Qué es un carril de navegación? Algunos de ellos son fáciles, como quiero una barra de navegación. Lo bueno de ello es que tendrá mucha documentación sobre cómo usarlo. Dónde usarlo, lo mejor es, ¿ves que en realidad hay un kit de diseño Figma para esto Se puede abrir y empezar a copiar y pegar bits demasiado bien. Bien, ten una lectura a través. Es bueno que tu idioma sea correcto. Entonces ya sabes, estás usando, ya sabes, un menú de hamburguesas y no un sándwich de navegación porque nadie lo llama así excepto Dan. ¿Bien? Y puedes ir a través y averiguar todo tipo de cosas sobre espaciado, ¿de acuerdo? Qué tan lejos deberían estar las cosas, ¿de acuerdo? Aquí hay muchas cosas buenas. ¿Cuántos deberías caber aquí? ¿Cuántos no deberían caber ahí? Qué tan grandes deberían ser para que se pueda hacer clic en ellos. Un montón de cosas buenas, junto con ejemplos. Ahora lo estamos haciendo para Android aquí. Puedes mirar la versión de manzanas IOS. Puedes mirar tal vez un framework que estés usando. K, di que es un diseño web que estás haciendo. Echa un vistazo a lo que han hecho. Bootstrap, Tailwind, Wordpress. Todos tendrán documentación específica sobre cómo se deben implementar las cosas K cotizaciones. Y puedes usar eso punto de partida para tu diseño. Lo siguiente que quiero hacer es que tengo mis esquinas redondeadas. Quiero que esto sea un poco más alto. Me gustaría tener un poco de relleno en la parte superior. Bien, a menudo es más acolchado en la parte inferior que en la parte superior. Tipo de pensar fotografía enmarcada o pintura enmarcada en una pared que tipo de barbilla en la parte inferior. Hay más que la parte superior, le da una especie de buen pie La base en nuestro caso mantiene alejada del borde del marco. La otra cosa que quiero hacer es que quiero, viste al principio aquí, a lo mejor lo hiciste. Quiero que el color de fondo sea un color de interfaz ligeramente diferente al del frontal aquí. Haz que esto se destaque un poco. Solo estamos haciendo algunas cosas básicas, puedes saltarte adelante. No más cosas geniales de diseño automático, más solo cosas de diseño. Voy a hacer que el iphone sea de un color particular, ¿de acuerdo? Fff es el blanco, F siete es lo que me gusta con estos colores aquí Si solo abres uno, sé que el color que quiero es 777. ¿Bien? En repetición. Si solo tecleas uno de ellos y lo ingresas, los llenarás todos por ti y te dará el color que deseas. Ese es el color que quiero. ¿Bien? Una especie de gris más oscuro, algo así. Color de fondo del sistema operativo Windows. Es para que cuando vaya a este diseño automático aquí abajo y digo, quiero que tengas un fondo lleno de blanco, Mira hay un poco de contraste entre los dos. No enorme, solo nos permite ver los límites entre estos dos. Lo que voy a hacer en realidad es agregar un poco de sombra paralela. Voy a decir efectos. Voy a decir sombra paralela, voy a hacer clic en el pequeño sol para cambiarlo. Quiero que se levante un poco. Quiero que sea cero abajo. Y quiero que esté borrosa. Y quiero que sea, echemos un vistazo cambiar uno para verlo todo. Probablemente sea un poco fuerte. Voy a decir que estás abajo a 15. Sólo quiero ese pequeño indicio sutil de que, mira, estoy separado de esto. Una pequeña actualización del video es que si lo encontraste cuando estás agregando sombras, así que las he seleccionado todas aquí abajo, agregé efectos. Y las sombras que puedes ver aquí se están aplicando a los íconos y no al fondo, lo que quizás te hayas perdido. Bien. O lo que necesitas verificar es que lo voy a deshacer para deshacerme de él, es que necesitas el marco padre externo. En mi caso marco, uno necesita tener relleno de blanco y luego agregar el efecto. El efecto se aplicará alrededor del exterior del marco en lugar de las cosas dentro de él. He aplicado el efecto, no puedo verlo, así que voy a darle al pequeño sol. Voy a decir, quiero que seas como menos seis solo para que veas. Bien, así que si el marco no tiene relleno, aplicará la sombra paralela a los propios iconos. Práctico de conocer. Seguir adelante. Bien, entonces ahora quiero copiar los detalles de este marco a este. Bien, voy a seleccionar el título del marco. Vamos Comando opción C. Entonces es como una copia. Bien, pero con esa llave extra en una PC es similar, es control Olt para copiarla Y luego por aquí son esas mismas dos llaves. Y V otra vez, trae a través de mi color de fondo, trae a través de todos los radios. Ahora hay atajos. Estamos como, hombre, no voy a recordar todos estos. Entonces lo que me parece es el súper atajo que todos podrían conocer, que quizás no. Lo tengo seleccionado aquí. No puedo recordar qué son las propiedades de la pasta. Entonces con él seleccionado, simplemente mantenga presionada la tecla de comando o control en una PC y presione la diagonal hacia adelante Echa un vistazo a tu teclado. Bien, es el slash delantero, el que se inclina hacia adelante y simplemente escribe, no sé, propiedades Puedes ver ahí, copiar y pegar propiedades, aprenderás los atajos. Pero también es casi igual de rápido simplemente hacer clic en estos, sobre todo si no es un atajo, usas todo el tiempo. Eso es comando en una Mac, control en una PC, y barra diagonal hacia adelante, puedes obtener cualquier atajo que te guste pegar propiedades, no lo necesitaba en eso Bien, entonces nos hemos topado con un pequeño problema. Bien, esto se ha actualizado con una sombra paralela y tiene un fondo blanco. Este no lo hizo. ¿Por qué no? Ooh, porque no es un componente, Componentes dentro de los componentes Hagámoslo en el siguiente video. 5. Cuándo y cuándo no usar componentes en Figma: Hola a todos. Hablemos de cuándo debes hacer componentes, cuándo no deberías, y algunas de sus cosas de galletas que hacer con los componentes cuando los estás fabricando. Empecemos por convertir esto en un componente porque estos son dos autolayouts separados y puedes verlos El pequeño icono no es nuestra hermosa forma de gofre o estos diamantes Bien, entonces vamos a convertirlo y lo primero va a pasar. Va a ser un poco raro. Mira esto. Lo tengo seleccionado. Voy a usar mi atajo, que es la tecla Command Option en una Mac, tecla Control Alt en una PC. Y haz clic en eso. Y lo va a convertir en nuestro componente. Genial. ¿Qué pasó por aquí? Bien. Se ha escupido todos estos componentes internos Estos son estaban dentro de mi autolayout y se fueron, Oye, no puedes estar Entonces los escupieron y dejaron instancias de esos componentes dentro de su mirada alguna vez Así que vamos a deshacerlo y tener un pequeño desglose solo para que te hagas una idea de lo que está pasando. Entonces dentro de aquí están estos, Estos son mis componentes principales. Estos gobiernan todos los demás componentes en todas las demás opciones. Y es una buena práctica no sólo dejarlos en la página uno. Mucha gente lo hace y puede trabajar. El problema es, es que no podemos tener estos componentes principales que controlan todos estos dentro de otro componente principal. Entonces cuando lo hagas, usa tu atajo, recuerda la tecla Opción de Comando en una Mac, Opción de Control, Control de concierto , Tecla Alt en una PC, va, tienes que estar aquí y escupirlos por aquí y tenemos estos componentes pasando por aquí ¿Bien? Y luego ni siquiera dentro de este marco, bien, simplemente pasan el rato debajo de él. Entonces lo que podemos hacer es que esté bien, como totalmente bien. Se derrumba. Voy a agarrarlos a todos. Es un globo ocular encendido en éste porque lo apagamos antes de agarrarlos a todos y con ellos seleccionados, voy a simplemente moverlos por aquí. Vamos a acercarles un poco. Si los tienes seleccionados, puedes presionar Mayús a y saltará a lo que hayas seleccionado. Y vamos a usar este ordenado solo porque ordenar es increíble. Te diste cuenta antes de que no estemos aquí arriba, no pude hacer el orden porque Icahn no encaja. Vas a acercar. Aquí está. Solo tienes que estar en un nivel de zoom donde encaje esta cosa y simplemente hazlos amablemente así. Genial. Entonces eso te puede pasar y tal vez ni siquiera te des cuenta, terminarás con cosas raras, poco escondidas debajo de otras capas y es un poco problema Pero bueno, ya lo hemos resuelto. Y la otra cosa es que tampoco vamos a dejar esto aquí. Porque en el primer fotograma, puedes, bien, no me imagino que voy a poner esto en otro componente, pero puede que sí. Así que es solo una buena práctica arrastrarlo por aquí, manteniendo presionada mi tecla Opción en una Mac, tecla alt en una PC, haga clic en mantener y arrastrar y simplemente moverla por aquí. Y lo que tengo es en realidad menos solo arrastrar el conjunto, no arrastrar eso. Golpee el icono real en sí mismo. Y así voy a mantener mi componente principal por aquí, y vamos a mantener una instancia. Toda mi primera mesa de trabajo. Aquí vamos. Ahora es un componente. Este de aquí necesita ser cambiado. Todos ellos necesitan ser las instancias. Y porque tenemos la configuración, dulce, Oh, deberíamos poder simplemente irnos, te ves así, Eso está todo bien. Puedes ver aquí este está configurado para Auto. Entonces como este todo controlado muy bien por nuestro componente principal de aquí, lo conseguimos. Ahora, la cuestión de cuándo hacer componentes es que no hay una regla específica cuando estás en tu etapa inicial de diseño y simplemente te gusta perderte cosas alrededor No necesitas Componentes. No es hasta que consigas ese segundo fotograma. Y sobre todo para cosas como botones e iconos, siempre deben ser componentes porque los vas a reutilizar. Pero como yo, terminarás haciendo cosas donde te gusta hacer, hacer una pequeña tarjeta aquí y terminarás duplicando en lugar de hacer componentes Y entonces no hay nada que los controle a todos. Así que tienes que pasar por y rehacer todo o al menos ajusta cada uno de ellos para que termines chocando con cuando necesites Componentes Lo último de los componentes es que cuando estás almacenando tus componentes principales a un lado, a menudo pueden estar en otra página. Cuando tienes un documento un poco grande, lo guardo en la misma página cuando los diseños son bastante pequeños, faltan mucho por ahí. Quiero volver mucho a los componentes principales, así que solo los pongo por un lado aquí. Pero cuando los tienes por un lado, es muy importante ponerlos dentro de un marco de marcador Así que el FK para herramienta de marco, y yo sólo voy a ponerlos en esto. Probablemente voy a hacer que sea de un color diferente solo para poder ver el contraste del blanco, por qué ahí dentro principalmente. Entonces, saquemos esto aquí. Así que no está dentro de un marco padre es simplemente pasar el rato por sí mismos. Ellos van a MainComponent Aquí no hay nada que pueda establecer las restricciones, las restricciones. Vamos a casa este, porque está dentro del marco de mi teléfono. Dice que puedo establecer las restricciones a la parte superior o a la izquierda, mi caso probablemente la parte inferior izquierda. Bien, porque quiero que se pegue al fondo de este marco. Significa que cuando ajuste este, solo el marco padre. Se ve que se pega al fondo. Perfecto. Pero quiero hacer eso para el principal, así que se sienta el valor por defecto. Así que cada vez que saco uno y tengo que cambiarlo. Pero por aquí, mira, no puedo hacer eso. Pero cuando se trata de perspicacia va a hacer eso. Arrastre el nombre cuando esté dentro de esto puede ver que aparecen las Restricciones porque está dentro de un marco padre en solo un marcador de posición usándolo para cualquier otra cosa que no sea decir que es eso Para que cuando arrastre los nuevos, tenga el valor por defecto de bottom e left. Los componentes principales no pueden ser perspicaces, otros componentes principales. Y es útil tenerlos todos dentro del marco de marcador de posición, incluso si está en otra página, solo para que puedas establecer cosas como tus Restricciones Oh, un último consejo al respecto también es que no se pueden eliminar cosas en los componentes. Entonces si entro aquí y antes de seguir adelante, borramos algo, se fue de un cesto. Si presiono mi botón Eliminar, entonces pienso componente es ¿puedes ver el globo ocular recién apagado Vamos a pasar esto para que veas. Entonces fui Eliminar en mi teclado. Adiós, solo enciende y apaga el globo ocular. Bien, así que eso es lo genial los componentes es que no puedes eliminar cosas. Si quieres eliminarlo, tienes que volver al componente principal y luego eliminarlo de aquí. Haciendo que todos los elementos que estamos construyendo sean un poco más resistentes y asegurándonos de que cuando otras personas los estén usando, los estamos dando a otros miembros del personal que no lo están arriesgando y eliminando completamente los bits allí, solo encienda y apague el globo ocular Ahí vamos. Dev se volvió un poco más largo de lo que pensaba que sólo vamos a convertir eso en un componente. Ahí vamos. Espero que hayas aprendido algo. Siguiente video 6. 06 Buen espaciado: Hola. Hagamos esto. Es solo una guía espaciadora auxiliar y es una respuesta a una pregunta. Me gusta mucho, ¿a qué distancia deberían estar las cosas? ¿Qué espaciamiento deberían ser? ¿De qué tamaño deberían ser? ¿Qué es realmente común? Son estos. ¿Y qué hace esto? No es nada. Es sólo una señal visual. Entonces, cuando estamos diseñando algo, estamos como, ¿qué tan grande debería ser? Puedes mirar esto e irte, debería ser alrededor de 24, en realidad, 32. ¿Qué tan lejos debería estar? Ah, usemos seis. Usemos 16 plus. Me va a dar una razón para mostrarte un enchufe realmente genial. Bien, eso ayudará a hacer todo este tipo de documentación por nosotros. Es bueno para estos pequeños espacios de aquí. Pero también cuando llegas más lejos y comienzas a hacer cosas como especificaciones de diseño para tu desarrollador y tal vez un sistema de diseño. Bien, cajas y enchufes, espacios entre cajas. Vamos a hacerlo. Bien, así que hagamos una grilla Voy a hacerlo por aquí. Una pequeña rejilla de espaciado. Voy a por la herramienta rectángulo, mantén pulsada mi tecla Mayús en mi teclado para obtener la altura y el ancho igual. Y quiero que mi primera va a ser ocho. Ese es un buen nivel base. Si están vinculados, ambos deberían convertirse en ocho. Bien. El ancho y la altura. Y le pegué Enter en mi teclado. Excelente. Voy a elegir nuestro color de muy alto contraste. Lo que me gustaría hacer es tener múltiplos de ocho a medida que vamos subiendo. Bien, haciendo zoom un poco, lo que podemos hacer es mantener pulsada la tecla de opción Ok en una PC para duplicar Y sólo voy a arrastrarlo a una talla. Y voy a usar mis matemáticas por aquí porque no soy bueno en matemáticas, y solo digo, más ocho. Aquí vamos, 16. ¿Bien? Yo puedo hacer eso de matemáticas, pero hagamos otra. Vamos más ocho. Y sólo voy a seguir subiendo a una talla que se vuelve demasiado grande. Hagámoslo. Quiero hacer esto en modo velocidad, bien. Probablemente sea suficiente. En cuanto a espaciamiento. Bien. Y las cosas lejos de los bordes de otras cosas. Siento que es lo suficientemente grande cuando llegamos a 48, es bastante masivo. Puedes seguir subiendo a ti. A mí también me gusta ver el espaciamiento entre las cosas. Esto es bueno para como unidades de cosas. ¿Qué tan grande debe ser tu ícono? ¿Qué tan grande debe ser esa caja de imagen? ¿Qué tan lejos de los bordes debería estar? Otra forma es que el espaciado intermedio puede ser muy útil visualmente cuando lo estás haciendo. Y también hay algunos tamaños comunes para eso. Tengo mi primera caja. ¿A qué distancia está la distancia más pequeña? El más pequeño es cero. Entonces no necesitamos cero. Todos podemos imaginar cero. Veamos el primero. Son cuatro, ¿bien? Así que cuatro píxeles de ancho. ¿Cómo sé que son cuatro? Bien, es un zoom in. ¿ Puedes ver la grilla ahí? Puedo ver que son cuatro. También puedes verificar doble con esta seleccionada mantener en la opción KampC, Y puedes simplemente como pasar el cursor sobre cosas y puedes ver, mira, estoy a cuatro pixeles Cuatro, seis es el siguiente. Ese es el siguiente tamaño realmente común, no divisible por ocho Lo sé, pero es un espaciamiento muy común entre las cosas. Ahí tienes, seis. El siguiente, cuando nos alejamos más píxeles, a ocho de algo, es más fácil probablemente solo arrastrarlo junto a él, completamente al lado, para decir X e Y por favor muévase más cuatro píxeles a lo largo de la X. Veamos cómo puede hacer su espaciado. Hay algunos pequeños, 468, y luego básicamente vamos en divisiones enteras o medias de ocho. Voy a ir 12 para el siguiente, 12. El siguiente va a ser 16, que es dos ocho. Mi último, no tengo uno último, probablemente necesito un 20 entre ellos. Entonces me voy a ir, este va a ser más ocho, más ocho, y voy a hacer que sea 20 es otro espaciado que uso. Ahora bien, estas no son las reglas de las reglas, pero a menudo estas son muy buenas tallas para las cosas y estos son muy buenos espacios entre cosas. Ahora eso es práctico, pero es difícil de saber. Bueno, en realidad puedes hacer clic y decir, oh sí, eso es 48 y luego ir a hacer cosas y mirar espaciado e ir, bien, ¿qué tan lejos debería estar eso de arriba? Sobre eso. Mantén pulsado tu opción Koga, son 12 Y luego volver por allá. Sé amable. Si todos están etiquetados, puedes escribirlos. Eso es aburrido y tedioso. Echemos un vistazo a nuestro primer plug in para el curso. Así que los plug ins se pueden encontrar en este icono aquí bajo recursos. Bien, vamos a ir a Plug Ins y el que vamos a ver es Design Doc para este caso. Ahora hay muchos competidores en esta aplicación en particular. Encuentra el que te guste y Design Doc podría no estar trabajando en poco tiempo. Básicamente, cuando hago estos cursos, ya es el momento en que quien decidió hacer este plug in decida no actualizarlo más. Entonces nuevamente, esto es más de un, por ejemplo, que un ir real y usar este en particular. Entonces lo voy a encontrar buscando el diseño doc. Una palabra, voy a ejecutarlo. Esta cosa se abre. Es bastante dulce. Mira esto. Si hago clic en éste, vamos a moverlo por aquí y decir que me doy la altura por encima de él. Mira, boom. Éste de aquí. Quiero la altura por encima de ella. Boom. No lo puedes ver, ¿verdad? Aquí tienes. Y simplemente lo hace agradable y grande y fácil, así que no puedo tener que ir a medir esto. Ahí vamos. Podemos usar esto en proyectos futuros una vez que lo hayamos hecho. Lo que también quiero hacer es dar click sobre esto y esto. Estoy sosteniendo turno para seleccionar dos cosas y en realidad quiero mostrarme el espaciado exterior. Enchufe de aplicación muy bien diseñado. Bien, voy a hacer eso por todos ellos. Vuelva en un segundo. Bien, así que esa es una app dulce. Control de opción de comando de atajo pequeño rápido, Alt P es abrir el último enchufe. Y si lo estás usando una y otra vez y algunos de ellos cierran después de haberlos usado, ese es un buen atajo. Me aseguraré de que esté en la hoja de acceso directo. Bien, con esta app de aquí, es genial. Está hecho esto, puedes ver Es una especie de hecho una cosa superpuesta Quiero que todos se mezclen. Probablemente los quiera a todos en su propio marco. Por el momento están en grupo, ponen ahí una pequeña línea punteada así que voy a resbalar, agarrar mi herramienta de marco, dibujar una caja alrededor de todo y decir que tienes un relleno de este color oscuro y voy a tener que jugar con una capa, ordenarla, agarrar algunos de mis rectángulos y algo del contenedor, no todo Es un contenedor, vas por encima de todo eso. Aquí tengo todos mis rectángulos. Haremos Locura de Capa. Capa más adelante en el curso. Bien, aunque por el momento, vamos a ir al estilo cavernícola Simplemente arrástrelos al lugar correcto, no funcionaron del todo. Ahí vamos. Bien, estas van a ser mis medidas. Impresionante. Tan práctico, conecta tanto para lo que estamos haciendo justo aquí y más tarde cuando empieces a hacer especificaciones para el desarrollador, ya sea un documento de entrega o tal vez un sistema de diseño Entonces esto será lo que usaremos como guía visual a medida que estemos pasando por este curso. Sí, para ayudar con nuestro espaciamiento y saber lo grandes que deben ser las cosas. Bien, al siguiente video. 7. Qué espaciado debo usar para el diseño de sitios web y aplicaciones en Figma: Hola a todos. Hablemos solo un poquito más sobre lo que debería ser el espaciado. Te he dado algunas cosas genéricas y la última que hicimos, me sale esa magia. ¿Cómo se mejora en ello? Si ya eres bastante competente, estás espaciando, puedes seguir adelante Pero si quieres un poco de y ayuda a asegurarte de que las cosas sean consistentes y fáciles de trabajar con tu desarrollador cuando entregues tu aplicación, sin causar problemas, o al menos ser consciente del desarrollador y con qué van a estar trabajando Mira este video. Entonces hay muchos lugares en los que tu app o sitio web voy a terminar. Y lo que acabará sucediendo es tu ingeniero, tu desarrollador, quien sea que uses para hacerlo, podrías ser tú. Es muy probable que se construya sobre lo que se llama un framework, tu desarrolladora, Ella no va a estar pasando y poniendo todos los nudos y ceros Van a estar construyendo encima de las cosas que se construyen encima de las cosas que se construyen encima de las cosas. Entonces, si eres desarrollador de iOS, el desarrollador va a estar usando el pre-made, o al menos pautas de Apple Si es Android, va a ser este material como lo llaman un sistema de diseño. Y te dan muchas cosas útiles sobre cómo deben espaciarse las cosas. Si vas a azotar, podría ser bootstrap, podría ser viento de cola Así que habla contigo para desarrollar nuestra figura hacia dónde va, en qué consiste, y luego leer un poco. Puede ser confuso, pero necesitamos que nos citen en este tipo de cosas para que realmente puedas comenzar tu comprensión de tal vez un poco de CSS, un poco de código para que no arrojes tu espaciado de desarrollador de siete porque siete es complicado porque no puedes dividirlo por la mitad. Tienes un poco de medio píxel. Se puede dividir lo suficiente. Se pueden tener cuatro píxeles. Echemos un vistazo a por qué ocho es bueno también. Entonces echemos un vistazo al material para Android. Ahí dentro, Material IO, están en su versión tres en el futuro, podrías estar en la versión cuatro o cinco, Chicken Out. Bien, estoy bajo fundaciones. Estoy viendo Layout, entendiendo eso. Y es muy agradable pasar y decir que el espacio entre columnas es un valor predeterminado de 24 DP, que es esencialmente píxeles, abreviatura de píxeles independientes del dispositivo. Ellos usan esto porque muchos teléfonos diferentes tienen diferentes densidades de píxeles como Solo considéralo píxeles si entiendes que cuando estás diseñando en Figma, DP es igual a Px Así que usan espaciado de 24 para asegurarte cuando estás construyendo tu pequeño bloque espaciador y vas primero a Android, te hacen obtener 24. Ese es el valor por defecto. Es felizmente divisible por ocho, no por casualidad, o al menos es un espaciado muy común por el momento Echemos un vistazo. Y iOS tiene una lectura a través de lo que hacen. Creo que usan 20 para sus márgenes en sus lados, tienen algunos valores predeterminados diferentes a muchos otros. Y lo que pasa con iOS es que hay ambos teléfonos, hay TV, hay Gadgets, hay Relojes. Así que mira un poco. ¿Para qué estás diseñando? Habrá documentación en línea. Si salías a azotar, digamos construyendo un sitio web o una aplicación web, averigua es que WordPress es WordPress usando Bootstrap Bootstrap es un framework que ayuda a los desarrolladores a trabajar rápido, bien, y lo que terminarán haciendo es echar un vistazo. Encontré esto, las canaletas es como lo llaman, el espacio entre cosas. Y las canaletas por defecto son 1.5 llanta. Y ahí se puede ver que decían 24 pixeles lo mismo que el material. Entonces, si uso 24 como mi espaciado, al desarrollador le va a gustar porque es un poco consistente con Bootstrap y es consistente con Android dependiendo de a dónde vayas Ahora hay 100 marcos diferentes, vientos de cola a la gente que usa esto mucho para ayudar con su estilo Se puede ver en aquí me encontré bajo GAAP K bootstrap causa una canaleta, tau1 Todo es útil saber como diseñador de UI, puedes ver aquí lo que un desarrollador va a escribir es que en realidad no estaban tecleando el número. Esperemos que estén cerca de uno de estos. Entonces van a poner espaciado cuando estén codificando para decir gap es cero, que es cero, gap es uno, que es 0.25 de marine, un anillado por defecto es 16.25 de 16 es píxeles completos Recuerda que un poco de espaciado que teníamos antes, ese es el mínimo aquí. Es una buena regla no ir. Tres divisiones se vuelven complicadas y te desarrollas. Va a tener que ir y anular muchos de los valores predeterminados del marco Puedes hacerlo, pero desarrollas un probablemente simplemente ignorarlo y usar algunos de los valores por defecto a menos que los fuerces. Bien, echemos un vistazo. Entonces 166810. Oh, estos un diez. Podrías decidir que en tu diseño necesitas una lata o ¿era así? No tenemos una lata. Tenemos 46812 No hay reglas realmente duras y rápidas sobre lo que estas pueden ser, pero algunas diseñan para frameworks o los entienden un poco, especialmente si sabes a dónde va. Si sabes que el desarrollador usa viento de cola genial, escribe todos estos La gran comida para llevar es múltiplos de ocho. Bueno. Pero realmente deberías ver cómo se hace y se copia que no hacen que la transición de Figma al diseño y desarrollo real mucho más suave y no tienes que hacerlo, pero también tengo una ola Essentials, que cubre muchas de las cosas que miramos aquí, como ¿qué hace el borde con el DP ¿Qué es Bootstrap? ¿Qué hace Flexbox Hay todo tipo de cosas buenas que puedes aprender que informarán tu diseño cuando estés en Figma, pero un poco fuera del alcance de este curso Pero un poco de conocimiento de HTML y CSS y framework te convierte en un mejor diseñador de UX, en mi opinión. Bien, ¿eso fue confuso? Un poco serpenteante. De todas formas, pasemos a algunas habilidades más duras en Figma 8. 08 Diseño automático frente a restricciones: Hola, hablemos de restricciones. Lo cubrimos un poco en el curso de esenciales. Veamos asegurándonos de que cuando vayamos y volvamos a dimensionar para diferentes teléfonos no se rompa. Lo que queremos hacer es poder tener algo que sea resiliente, robusto y receptivo. Bien. Todas las Rs para que cuando cambiemos , venga para el paseo. Tú y mi amigo necesitan ser Android mini. Oh, mira qué rápido y fácil es eso para que no lo rompas, tus compañeros de equipo no lo rompan Y se ve igual en todos tus dispositivos. Bien, entonces es fácil. Lo que tenemos que hacer es seleccionar en nuestro navegador inferior. Probablemente deberíamos hacerlo a nuestro componente principal, para que si lo duplicamos más adelante, todos lo estemos haciendo a este. Si no se ven las restricciones, ahí están, bien. Recuerda que necesitan estar dentro de un marco padre. El mío es como un marcador de posición. Sólo para que pueda cambiarlo, ¿de acuerdo? No hace nada. Pero voy a decir, en realidad, no te quedes y abajo, Vamos a estar pegados al fondo, lo cual es bueno. Pero yo quería ir no a la izquierda sino a la izquierda y a la derecha. Quiero que se estire. No quiero que se escale en este caso porque no quiero escalar los contenidos. Yo solo quería estirarme hasta los bordes. Ahora, podemos hacer una o dos cosas porque en realidad esta no es una de mis instancias. Entonces voy a borrarlo y voy a arrastrar éste, sosteniendo mi tecla de opción. Y ahora debería estar incumpliéndose a izquierda, derecha, abajo. Y estás como, eso no me pareció muy útil, bien, porque simplemente lo sacamos Es cuando te mueves de aquí. Entonces cuando te vayas, bien, necesito dos de estos ahora, o necesito otra talla. Entonces voy a hacer mi tamaño de Android. Voy a duplicar todo esto. ¿Bien? Esto se va a llamar Android. ¿Bien? Y voy a decir, en realidad tiene que ser del tamaño de, así que tengo el nombre seleccionado. Tiene un marco. Vayamos al iphone. Va a ser Android pequeño. ¿Bien? Uno de los dispositivos más pequeños para los que vamos a diseñar en este curso. ¿Ves lo que pasó? Oh, mira eso. Si no lo tienes puesto, debería haberlo hecho. Debe tener antes y después. Creo que estábamos pegados a la cima. Sí, Top e izquierda. Si no hacemos eso y decimos, oye, ve a cambiarle el tamaño. Disfrútalo pequeño, no muy útil. Es como que desapareció del marco, así que devuélvemelo, y voy a cambiarlo de nuevo a ese tamaño más pequeño. Aquí vamos. Bastante el pequeño componente receptivo ahora. Ahora recuerda un par de notas. Si el tuyo no es una especie de cambio de tamaño como quieres, es probable que tu auto no esté configurado como el espaciado, ¿bien? Así que puedes resbalarlo y asegurarte de que es automático, lo contrario podría no estar haciendo exactamente lo que quieres Y recuerda, las restricciones solo se pueden encontrar si está dentro de un marco padre, ¿de acuerdo? Y por padre quiero decir que hay esto fuera de uno y que este niño, bien, está dentro del padre sin él. Bien. Ahí se va. Ahora, otro pequeño problema que están teniendo algunas personas quiero agregar aquí por si el tuyo no está funcionando. Es algo extraño para lo que no he podido encontrar una solución . ¿Es un bicho? ¿Es una característica? No estoy seguro, pero este es mi componente maestro por aquí. Lo he llamado frame one y acabo de reconstruirlo rápidamente. Hago una instancia. ¿Puedo arrastrarlo hasta aquí y lo pongo todo bien alineado? Bien, ahora el componente maestro original, en realidad componente principal, bien, con él seleccionado, tiene restricciones del valor predeterminado de izquierda a arriba. Y estás como, bien, esa es una instancia de ello y eso está puesto a izquierda y arriba, eso tiene sentido. Pero si te digo componente principal y digo que estás izquierda y a la derecha y te pones al fondo como lo hice antes, la instancia debería actualizarse y no puede funcionar por qué he estado como mirar esto media hora probando cosas diferentes. Si sabes, avísame en los comentarios, lo que estoy haciendo mal, no puedo resolverlo al revés esto y la forma en que lo hice en el video, por eso no parece un problema es lo que hice es que borré esto y una vez lo he cambiado a izquierda y derecha e inferior, entonces arrastré una instancia Bien. Y luego le redimensionó y llegó para el paseo Pero de nuevo, el instante no se actualiza si lo cambio, si digo que ahora necesitas ser componente principal van a ser en lugar de abajo arriba, crees que este viene para el paseo pero sigue en la parte inferior, se siente como un bicho. Esto puede actualizarse para cuando llegues a este video, pero sí, atrapó a algunas personas y fue interesante para mí aprender también. Un poco de dolor, tener que alargar una nueva instancia de la misma. Pero oye, ho, ahí vamos. Bien, continúa con un video. Ahora estamos aplicando restricciones a un componente. Puedes aplicarlos a cualquier cosa, restricciones regulares de rectángulo antiguo siempre y cuando esté dentro de un padre. Podría ser diseño automático, puede ser texto, puede ser cualquier cosa. Pero eso ya lo sabías. La otra cosa interesante de las restricciones es que aquí las llaman restricciones, K n Figma. Pero si has escuchado antes la palabra flex box, básicamente esos son los atributos que estamos agregando a esto. Están haciendo lo mismo. Si nunca has oído hablar de flex box, es una de esas cosas para ir a echar un vistazo. Es como se implementa en el lado web. Entonces, ya sea tu costumbre hacerlo, hackear tu propio CSS, o si estás usando Webflow, lo llaman Flex Layouts Es lo mismo. Componentes, Caja Flex, Diseños Flex. Todo tiene que ver con cómo los niños interactúan con sus padres, ¿de acuerdo? Y puedes hacer un par de opciones diferentes de manera fácil. Una última cosa es que cuando lo estás redimensionando, simplemente lo escribimos y lo rehicimos todo Si solo lo arrastras, también funciona, bien. Solo significa que tienes mucha bondad y flexibilidad porque eso es lo que estamos tratando de hacer. Hacer cosas que no se puedan romper, se pueden usar en muchas situaciones diferentes. Ir restricciones, bien, al siguiente video. 9. Atajos de asistencia automática: consejos y trucos para trabajar con Maquetación automática más rápido: Hola. Voy a poner todos los atajos de autolayout y cuando el video los untó un poco a través de todos los videos hasta ahora para todos en un solo lugar para que puedas volver a ellos todos en un solo lugar para que puedas volver a Marcar este video, si quieres que sea autolayout, fácil, hágalos a todos, cambia a. Es un diseño automático. Es Necesidad de romper un diseño automático. Es un poco lo mismo. Desplaza una Opción plus en una Mac, alt en una PC, golpea todos esos, y va hacia atrás. Es solo un marco, no un diseño automático. Para agregar cosas a un fotograma automático, puede hacer clic una vez que haga doble clic, haga clic en el elemento que está en el marco de pedido, copiarlo y pegarlo. gente le gusta golpear el Comando D o Control D por duplicación, no importa. Se puede agregar arrastrando, ¿de dónde vino esa pila? Lo hizo ver esto. Hago clic en mantener arrastrar, y simplemente aparece en mi encantador diseño automático. Eso no funciona. Si estás tratando de arrastrar a la instancia, deshacer. Esto, no quiere entrar aquí, necesita entrar en el principal, aunque lo quiera aquí. Pero fuera por aquí, recuerda que realmente no puedes eliminarlo, solo apaga el globo ocular. El principal gobierna todo, aunque pongas más de lo necesario para que puedas ir ¿te necesito? Te necesito fuera. Pero es a la estrella. De vuelta en este, es posible que tengas que meter un poco demasiado en tu componente para que funcione para ti. Lo que no va a entrar dentro de nuestro diseño automático es esto. Es un componente principal. Es el componente principal para mi icono de boleto. No puedo meterlos. Mira, simplemente no iré. Si es una instancia así, va a entrar ahí, bien. Bien. ¿Por qué no es eso porque sea un diseño automático, es porque en realidad este es un componente principal en sí mismo. No se pueden poner componentes principales dentro de otros componentes, no me gustó. Puedes poner componentes principales dentro de esto, que es solo un Layout automático, no un componente. Irás en el feliz, eso tiene sentido. Componentes principales uno dentro del otro. Entonces te vas, Es un poco de taquigrafía para el relleno. Así que tengo mi componente Instancia seleccionada. Tengo un montón de relleno pasando. Voy a golpear cero, tab cero, tab zero, tab zero tab. Para deshacerse de todo, haga clic en off, haga clic de nuevo en. Y yo solo tengo estas dos opciones aquí que normalmente se enfrentan, puede decir en realidad quiero que sean 48. Y luego haremos ambos lados. Puedo tabular al otro lado y luego puedo decir arriba e abajo separados por comas Así que puedo decir en realidad quiero que sea 64 en la parte superior y luego una coma y que me auxilien la parte inferior y presione Enter en mi teclado Asume arriba e abajo. Ahí vamos. Tu coda elegante que usando comas, puedes copiar y pegar partes de un diseño automático y todo ello Entonces con este seleccionado, quiero ponerlo en esta otra instancia. Puedo usar el atajo que hemos usado antes cuando copiamos el marco. Recuerda que es Opción de Comando C para copiar control Alt C para copiar en una PC, bien, esas mismas dos teclas, pero V, mira eso. Está ahí abajo en alguna parte. Ahí está. Y pegó mi acolchado. Y en este caso tengo una altura fija absoluta sobre esto. Entonces no está funcionando un poco. Entonces voy a decir Tú, amigo mío, en una altura fija, puedes abrazar el contenido por favor, y se ven igual. Y el último ya lo hemos hecho. Puedes hacer click en esos y usar tus flechas la izquierda y a la derecha para moverlo. Bien, Esos son atajos de autolayout. Hasta el momento, habrá en tu hoja de acceso directo que podrás descargar y seguiremos practicándolos lo largo del curso. Gracias video 10. Proyecto de clase 01: navegación inferior y receptiva: Hola, oye, bienvenidos al proyecto de primera clase. Y yo sencillo. Quiero que ya se suban a donde estamos en el proyecto. K, quiero tres fotogramas y quiero que puedas hacer esto. No había un grupo de trabajo, Dan. Bien. Yo estaba abajo e izquierda y derecha. Entonces quería responder o los íconos para mover, quería pegarme al fondo pesar de que te he mostrado qué hacer. Entonces quiero tres versiones diferentes. Asegúrate de que trabajaron en. Si no has hecho una clase conmigo antes, hacemos proyectos de clase solo para mantenerte al día. Y así no solo estás viendo, en realidad estás haciendo cursos a tu altura. No tienes que hacerlas. Yo no soy la mayoría de ustedes, pero la parte de hacer es lo que realmente lo hace pegarse. Entonces, si estás interesado, los proyectos de clase aparecen listados en los archivos de ejercicio. Bien. Proyecto de clase, no uno, quiero que cree tres tamaños de teléfono diferentes. El Nav inferior, quiero que responda a todos esos tamaños. Así que vamos a estar viendo estos temas principales, autolayout, el Espaciado Automático entre los ítems y Ahí está lo último que me perdí, asegúrate de que eres nav es un componente. En este caso, los entregables. Lo que me encantaría que hicieras es poder tomar un screencast Por qué no quiero que lo hagas es hacer un video tuyo haciendo este fotograma yendo así y todo encuestado A no responder, Dan, yo no tengo excusas. Quiero que haga esto. Bien. Entonces video, los screencasts haciendo eso, eso es Ahora grabar tu pantalla puede ser complicado para algunas personas. Otras personas estarán bien con eso si no lo has hecho antes, Max tiene una cosa incorporada llamada captura de pantalla. Las PC tienen algo similar. Estoy bastante seguro de que si quieres, hay una manera algo incorporada a Figma. Ve a aparecer, ve a tus plugins. Y el último, genial disco de Vimeo. Tienes que iniciar sesión en una cuenta de Vimeo y el estado subió si no tienes una, es gratis Es realmente bueno en significa que después de un poco de confirmar la dirección de correo electrónico y todas esas cosas, ¿te gustaría que Vimeo grabara tu pantalla? Sí, por favor. Bien. Puedes ejecutarlo y en realidad puedes simplemente grabar tu pantalla de Tim mi cámara apagada, mi micrófono apagado porque quería hacer una grabación de pantalla. Y una vez que hayas terminado, puedes subirlo a Vimeo y luego obtener un enlace y agarrar ese enlace Y eso es lo que puedes enviar para tu proyecto de clase. Ahora bien, si todo eso es demasiado duro, voy a permitir una captura de pantalla. Asegúrate de que tienes algo seleccionado para que podamos ver un poco lo que estás haciendo que el Auto está ahí y llegó Restricciones, eso pasará, pero ojalá sea capaz de hacer la grabación de pantalla Bien, y eso es todo. Sube a donde ya estamos. Puede que ya lo hayas hecho como si, solo haz la grabación de pantalla. Si acabas de estar viendo, vamos, ahora es el momento. Regresa, haz estas cosas si puedes hacerlo te gusta Oh si, eso entiendo. Demostrarlo. Vamos a hacerlo. Pero eso depende de ti. Por ahora, aunque. Entremos al siguiente video. En realidad vas y haces eso, y luego te veré en el siguiente video. ¿Bien? 11. 11 Manejo de archivos: Buenos días a todos. Es un nuevo día. Y hoy vamos a empezar con algunos trucos avanzados de flujo de trabajo. En particular, este video trata sobre el manejo de archivos. Parece aburrido, pero es uno de esos atajos que, a lo largo de tu jornada laboral, te ahorrará lo largo de tu jornada laboral, mucho tiempo. Y los voy a utilizar a lo largo del curso. voy a presentar a todos aquí, así que están en unos pequeños grupos agradables que sabemos lo que estamos haciendo. intentaré hacerlas todo el camino a lo largo del E intentaré hacerlas todo el camino a lo largo del curso para que te guste que te conviertas en un maestro de atajos Figma de manejo de archivos Bien, comencemos. Bien, el primero es fácil, solo asegúrate y créame, tienes un par de pestañas abiertas, aunque solo sean documentos sin título. Eso está bien. Y pulsa comando control automático en una PC y solo golpea 1234, así que uno te lleva de vuelta a la base de operaciones, ¿de acuerdo? Y 234 solo significa que puedes alternar entre dos aplicaciones diferentes, copiando y pegando. Si eres como yo, terminas con como todas las pestañas llenas. También funciona principalmente en un navegador. Entonces el mismo atajo, estoy en, comando o control de Chrome en un PC 123, excepto que uno no vuelve a casa base, irá a cualquier pestaña que sea. Y al igual que Chrome, puedes tener múltiples pestañas. Si voy hasta cinco ahí, eso es solo un sitio web antiguo normal. Entonces no es específicamente para Figma, solo todas las pestañas. Eso es control, eso es comando en una Mac. Control en una PC. siguiente dominio de archivos es que en realidad puedes anclar estos aquí. Entonces este es el principal con el que estoy trabajando, evento en uno. Entonces, en lugar de estar todo a través de todo, puedes hacer clic derecho en él y decir en realidad solo pin esta pestaña, por favor. Se convierte en una bonita versión pequeña. Puedes tener toda la otra basura por aquí sabiendo que esa es la tuya buena. También puedes reordenarlos. Entonces di Sin título, en el que en realidad estás trabajando. Entonces quieres moverlo por aquí. Simplemente haga clic en el mismo en un navegador, haga clic derecho en él, Pin él. Arrástralo, fácil. Nota al margen, lo hago todo el tiempo. En Chrome, tengo algunos documentos a los que siempre hago referencia todo el tiempo, mi como cajón de basura para hacer listas, todos los diferentes correos electrónicos que tengo que revisar, y mi calendario simplemente siempre está abierto. Entonces me da espacio para hacer mis otras cosas como Figma y buscar en Internet Al, ahora mismo, el siguiente, Al. ¿Correcto? El siguiente es que estos pequeños puntos aquí arriba tienen todos sus archivos recientes que pueden ser útiles en lugar de volver a esto y luego estar en la comunidad y necesitar ir al lugar correcto. Sólo tienes que ir allí todos tus archivos recientes. Si eres como yo, esto también puede quedar inutilizable porque tienes un montón de soporte sin título para que funcione Colócate por encima de todo lo que uses todo el tiempo y ve aquí a esta pequeña estrella Puedes agregar dos favoritos. ¿Los ves aparecer por aquí? Así que las cosas en las que estás trabajando todo el tiempo y las cosas que quieres dejar atrás y ser basura, ¿de acuerdo? O ser tragado por el flujo. Pero estos de aquí van a estar en mi archivo favorito, ¿de acuerdo? Y recuerda en la versión de escritorio, tienes una pequeña casa , ¿cuál es qué? ¿Cómo se llega rápidamente? Es correcto. Comandar uno o controlar uno. En la versión del navegador, todavía puedo ir al comando uno, pero simplemente va a la primera pestaña y todos mis archivos están algo escondidos en la F ahí. Ver lo mismo. Todos los favoritos están listos para el siguiente. Una es si estás trabajando en archivos realmente grandes o estás trabajando con una computadora portátil muy vieja y asquerosa Hay esta vista de aquí, hay una llamada uso de recursos. Hey pandilla, se han ido y se han cambiado el nombre. Solía llamarse uso de recursos, ahora se llama uso de memoria. Lo habrías resuelto. Lo sé. Y un poco más de cambio es cuando haces clic en él. Solía solo tener como una pequeña ventana aquí sobre cuánto estrés estaba encendida tu computadora. Ahora tiene un panel gigante sobre cuánto estresan tus computadoras. Eso lo cubriremos en el video. Otra cosa es que ya puedes hacer clic en este botón, y te da mucho más detalle de lo que solía hacer. Pero los consejos anteriores siguen funcionando a la perfección. Solo tienes un poco más de detalle para resolver qué es lo que está causando a tu computadora muchos problemas. Si son las capas, qué capas puedes activar una pequeña casilla Y puedes ver aquí, ninguno de ellos me da ningún problema porque tengo cero uso de memoria, porque no estoy haciendo nada y es un archivo muy pequeño. Continúa con el cambio de nombre del video. Recuerda recursos ahora, memoria, ¿de acuerdo? Y te dirá cuántas capas tienes. Te dirá cuánto, algo así como gigabytes está usando Básicamente, tienes 2 gigabytes para usar en este archivo, bien, Figma, Y si te acercas al final de eso, puedes ver si las cosas empiezan a funcionar Compruébalo para ver si estás casi en el máximo. La otra cosa que también puede pasar es que las cosas pueden ser estresantes en la aplicación. Y te va a mostrar en esta última barra aquí, si pego un documento grande, voy a pegar un archivo grande. Se ve como que subió ahí, me voy a deshacer de él. Ves que a veces es hacer cosas que también pueden llegar al máximo dependiendo de lo que estés haciendo A menudo puede ser un enchufe que es simplemente deficiente o simplemente realmente exigente con el sistema. Tal vez lo encuentres, ¿por qué está todo roto? Tener eso abierto y ya puedes ver, bien, está tratando de hacer algo, ¿ es súper útil? Amable es bastante. Sin embargo, si empieza a agotarse al máximo, lo que puedes hacer es como que imágenes grandes como esta sean demasiado grandes para Figma. Y si tienes cientos de ellos, bien, puedes quedarte sin recursos. Entonces necesitas hacerlos más pequeños, no solo escalarlos hacia abajo, necesitan ser más pequeños. Entra. Y si eso no es apropiado, solo tiene múltiples documentos para un archivo. Si su aplicación o sitio web se está volviendo masivo en el diseño, posible que tenga que tener dos archivos separados y dividirlos que no esté tratando de procesar todo. La otra cosa que podría pasar es que podrías estar usando la biblioteca de otra persona. Bien, así que vayamos a nuestros activos. Echemos un vistazo a nuestras bibliotecas. Si nosotros, encenderé una de nuestras bibliotecas y lo hará potencialmente, nuestra, una solo es realmente pequeña. ¿Bien? Entonces no está haciendo mucho. Pero puedes tener la biblioteca de otra persona en la que tenga miles. Podría ser una comunidad, una que alguien haya hecho esta cosa gigantesca que parece muy buena Pero eso es lo que está frenando tu máquina. Puede ser que tengas que elegir las cosas que necesitas o hacer tu propia versión similar de la biblioteca solo para ordenarla. También puede ser solo si alguien ha hecho componentes y variables y no los han hecho de manera muy inteligente, son como copias y copias y copias y copias y copias y copias Y estás tratando de usarlas ya sea a través una biblioteca o simplemente copiarlas y pegarlas. Voy a compartir en este curso cómo ordenarlos y hacerlos agradables, pero podrías estar trabajando con el archivo de otra persona. Tan solo mantén un ojo en esto, puedes deshacerte de él. Haga clic a la vez. Haga doble clic en él, en realidad, de nuevo, este está en escritorio y navegador, y el mismo límite de dos gigabytes es algo así como en ambos. Es una especie de cosa de navegador. Y esencialmente eso es lo esta versión de escritorio de los productos. Es solo que ese navegador se carga sin todos los bits de Chrome. Otro, pequeño. Mira esto, puedes cambiar el tamaño de esto. ¿Sabías eso? Hace mucho que no lo sabía. Es muy útil, especialmente cuando te metes en nombres muy largos. Simplemente puedes ir eso es mejor, y alternativamente, puedes hacerlo más pequeño. ¿Por qué es eso útil? Pensé que era útil cuando lo descubrí . Todo bien. Siguiente propina. En realidad el último consejo. Acciones rápidas. Ya lo hemos hecho antes. Es comando forward slash bien. O control ford slash la barra inclinada hacia adelante. ¿Bien? Y puedes escribir cualquier cosa como hay tantos atajos en este curso y aprender y figmin estás como, bien, qué era esa cosa, lo uso de recursos de lo que estaba hablando Mira ese RS y yo puedo ir, bien, vamos a encender eso Bien, entonces en realidad han hecho otro atajo para ello para teclados como internacionales, es shift P. No es shift P, es comando P. Bien, y volverá a aparecer y podrás escribir recurso, y ahí está ese otra vez Bien, y funciona para cualquier atajo. Entonces lo que podría hacer es cambiar al comando solo por mí mismo. Me pongo mejor usando el comando P porque el comando forward slash siempre ¿ alguien termina haciendo eso? Comando barra diagonal inversa o control barra inversa es activar y desactivar la interfaz de usuario, lo cual es un buen consejo. Aquí tienes. Pero hago eso todo el tiempo y luego le pego a éste porque ese es el que realmente quiero. Usemos comando o control P, dos atajos para hacer lo mismo. Notarás que eso sucede cada vez más en Figma. porque iban con igual que ya sabes, teclado USA Quirt al principio. Y ahora están tratando de hacer atajos que sean un poco más universales a diferentes idiomas. Teclados. Entonces lo encontrarás. ¿Por qué hay dos? porque hay dos. Bien, ese es mi expediente que maneja la hechicería . En el siguiente video. 12. ¿Cómo usar trucos avanzados de copiar, pegar y seleccionar en Figma?: Sí, leíste la introducción, ¿verdad? Copia y pegado avanzado en la selección de cosas. Voy a tratar de hacerlo emocionante, pero es avanzado y es bueno. Vas a necesitar saberlo. Entonces ahí vamos. Vamos a ponernos en marcha. Te puedo sentir ahí. Estás como que me voy a saltarme un poco este video para ponerme bien rápido. Bien, te va a llevar allí algunas cosas útiles. Entonces sabemos que si agarramos algo de este encuadre, lo copiamos y lo queremos en éste, podemos darle a Paste y lo pone exactamente donde se fundó en éste, que en realidad no está alineado al fondo Sí. Bien. Así es. Guau. ¿Qué atajo tiene Dan? Lo que podemos hacer es copiarlo como antes y luego hacer clic en lo que queremos pegarlo. Bien, da click en él y puedes presionar Comando Mayús V o Control Shift V. Y mira eso. Lo pone por encima, no donde no está el marco, sino que dormimos como si hago clic en esto y tuviera ese mismo comando de atajo Shift V, Control Shift V. Es solo que lo pega sobre la parte superior de lo que has seleccionado, cual es casi bueno. Mira. Sin embargo, sigue ahí. No lo reemplazó, solo que lo pone un poco encima. Entonces voy a deshacer eso. no puedo entender por qué eso es bueno. Pero el ego se puede reemplazar sobre la parte superior de una selección. Sin embargo, lo que es mejor, es si lo copio y hago un atajo ligeramente diferente, que es Command Shift V R o Control Shift. Boom, en realidad lo pone y reemplaza lo que has seleccionado. Tienes esto y necesitas reemplazar la puerta de estos gimnasios. Voy a copiarlo y después voy seleccionarlo e ir a Shift de Comando V. Voy a ir a Comando Turno R. Ahí tienes. Lo reemplazó. Lo que había seleccionado, no porque normalmente vas a copiar. Se hace clic en el marco y va exactamente a donde lo desea. Eso es un poco bueno y sobre todo útil. puedes hacerlo en muchos goles, lo que dice que voy a deshacer, traer de vuelta a nuestro encantador Comic Sans. Voy a copiar esto. Yo te voy y tú lo harás a él nosotros haremos a Comando Shift, Control Shift o donde sea que esté en el marco. No sólo se ha escalonado por encima de la parte superior. Se lo reemplazó. Eso estará seguro en tu hoja de acceso directo. Y la mayoría de ustedes conocerán el atajo. Yo solo dibujo un rectángulo, la parte superior, por ejemplo, gay y voy a seleccionar todos estos fotogramas sosteniendo Mayús y golpeando Pegar, solo viejo ritmo regular. ¿Puedes ver que lo pone en cada mesa de arte? Este ahora, lo siento, marco. Esto no encaja a través, pero está bien. Gran manera de hacer que Nav atraviese muchos fotogramas diferentes a la vez. Eso es pasta múltiple. No hiciste nada. Simplemente seleccionas varios fotogramas y presionas Pegar y lo pega donde lo consiguió en todos ellos. Ahora lo interesante es si copio esto y lo que suele suceder es como la mayoría de los programas, si voy a éste y le doy pegarlo lo pone exactamente donde lo consiguió. O si no tienes nada seleccionado, simplemente lo pega de donde lo sacó de unidad con su duplicado sobre la parte superior ¿Esto es práctico? De hecho, puede hacer clic derecho en él y tenemos que clic con el botón derecho en su cursor es esta opción especial Esto es pasta aquí. Entonces di que querías, porque de lo contrario si estoy aquí arriba y le pego a Paste, ¿ves que la quiero por aquí, no allá abajo, vete y se superpone Va a decir clic derecho pegar aquí. Va a donde sea que esté tu cursor . Aunque estoy tratando de seis. Sin embargo, tiene una buena, ¿verdad? Fue con los treinta segundos de todos modos. Bien. Es hora de raspar el fondo del barril El siguiente es seleccionar inverso. Entonces digamos que quiero dejar el nav en esta página de engranaje por encima de todo lo demás. Así que selecciona todo comando a, selecciona todo. Lo bueno del comando a es que si estás dentro de un marco, selecciona todo lo que hay dentro de ese marco. Si no tienes nada seleccionado y vas a Comandar a o Controlar a y selecciona todo en tu documento, puedes presionar eliminar. Pero si estás dentro de aquí, selecciona todo, normalmente todo dentro de ese marco o haz lo que necesites para copiarlo, pégalo, haz el pegado aquí, tal vez. Pero ahora hay una inversa selecta, bien, Así que estoy aquí, quiero seleccionar todo, pero esto, hago esto todo el tiempo. Voy a aclarar todo aquí va cambiar el color de todo en el marco, pero no esta disgustó lo que no quieres Pulsa Comando Mayús a o Control Mayús a en una PC y selecciona todo inversa excepto esta mirada, se queda atrás. Excepto extrañamente en Figma en este momento, ese atajos selecciona todo en cada fotograma lo que lo hace inutilizable. Porque muchas veces donde lo necesito es cuando estoy aquí y estoy como en este grupo aquí y estoy dentro de él y quiero dejar esta sola porque he cambiado el color de la misma. Yo solo quiero atenerme a todo lo demás porque aquí hay muchas cosas diferentes, día de turno de comando, pero agarra todo en cada cuadro que hay Espero que se arregle en pollo Figma. Podría ser arreglado. Ahora, hay un plug-in para eso, que hay uno llamado Select Inverse de verdad. Hagámoslo en algunos dentro de este grupo de aquí. Tengo este seleccionado y seleccionará a todos. Vamos a ejecutar ese plugin. Herman's con un atajo para ejecutar plugin anterior es, Así es. Nadie recuerda Command Option P en una Mac o Control Alt P. Es útil cuando eres un poco amante de los plugins Y éste, es bastante genial porque si voy mi Opción de Comando P, K, simplemente ejecuta el último plugin que utilicé, el ego para encontrarlo primero, ejecutarlo, y luego puedes usar ese atajo. Sostener ese plugin hace, es exactamente eso. Entonces vayamos a otra vez, entrémonos en mis grupos como éste. Y debido a que ya ejecuté el plug-in, Command Option P, Control Option P, hit Delete. Mira, está seleccionado todo pero eso no es solo todo en el documento. Ojalá eso se convierta solo en la característica predeterminada regular en Figma. Bien, entonces Select Inverse things using a plugin is the bottom of the barrel for my advanced select and copy and paste Se terminó con una buena que quizás ya conozcas. Desplaza uno para ir a ver todo. Quiero realmente agarrar todos los nervios en los cien tableros de aplicaciones, cien fotogramas que tengo ahora puedo recordar el atajo para este. Entonces vamos a usar el atajo para gobernar o atajos. Recuerda, es comando o control forward slash, pero vamos a empezar a usar el Comando o Control P porque eso parece simplemente más fácil, bien, y yo tecleo lo mismo Entonces vas a tener algo seleccionado como yo nav. Vamos a decir seleccionar todas las mismas propiedades. Aquí tienes. Es una gran manera de seleccionar todo y eliminarlo, moverlo, encontrarlo todo, cambiar el color. Obviamente ALS es un Components así que podríamos hacerlo arriba allá arriba, pero ahí tienes. Seleccione Mismas propiedades. mismo aquí. Sólo para volver a practicar ese atajo, Comando o Control P. Y como ya está en la parte superior ahí, no solo tengo que entrar en mi teclado, seleccionarlo Comando o Control P. Y ahí puedes ver, tengo esos últimos pocos que han usado a quienes están escribiendo requeridos. Bien, ¿cómo te fue? ¿Eso fue súper avanzado copiar y pegar y Selección? Ojalá uno de ellos fuera bueno e intentaremos usarlos todos nuevo en el curso en algún lugar del siguiente video. 13. ¿Cómo hacer cosas locas con tus campos de Figma?: Bien, bienvenido a todas las locuras de financiamiento que puedes hacer con los campos en Figma. Es bastante genial. Así que prácticamente cualquier campo que quieras, acabo de tener un marco aquí. Cualquiera de estos campos puede ser operado por el teclado. Entonces digamos que quiero agregar esquinas redondeadas y no estás seguro simplemente haciendo clic en él una vez y usa tu flecha hacia arriba. Bien, ¿ves solo agregarlo? Vamos a moverlo para que el editor no tenga que hacer zoom tanto como nosotros. Puedes hacerlo ir más rápido para mantener presionado Shift y usar arriba y abajo, irá múltiplos de ocho. Entonces estamos a los 20 Ahora sube uno, va ocho. ¿Por qué ocho? Ya sabes por qué ocho ahora todo el mundo ama a ocho. Es una buena cantidad de codazo. Sin que vaya en el turno de mantenimiento de uno, entra en cualquier campo antiguo, rotación, golpéelo alrededor hasta que te guste funciona con digamos, color también. Bien, este relleno aquí, tengo mi cursor seleccionado ahora uso mi flecha hacia arriba. Puedes ver que solo se mueve muy ligeramente arriba en la escala de brillo. Eso es lo que está haciendo. Si Alt Shift, va en trozos más grandes. En realidad, va en ese brillo no. Va en la tonalidad. ¿Ves moverse a lo largo? Eso no es tan útil que la opacidad es mejor. Y diga el trazo aquí, no está seguro de cuál es el tamaño que he hecho clic en uno, arriba y abajo. Saltar en ochos probablemente no sea tan útil en este caso Pero en cualquier cosa que quieras hacer clic, puedes usar la tecla Mayús arriba y abajo para que vaya más rápido. Me gustan los tamaños de fuente, bien, así que seleccionando aquí, haciendo clic en este y solo usa tu arriba y abajo hasta que encuentres el tamaño que quieras. Quieres subir y octavos porque quieres apegarte a una cuadrícula de ocho puntos, todo a mano, a mano Ahora, muchas de las cosas que puedes hacer tan bien como las puedes fregar, bien. Cualquier cosa que tenga un pequeño icono al lado. Entonces ustedes todos estos, este de aquí en mi kerning o déjenos espaciar aquí vamos Simplemente arrástralo. No tengo ninguna altura de línea, pero entiendes la idea Lo mismo ocurre con estos de aquí, en lugar de intentar ticket y en realidad puedes simplemente arrastrarlos, diciendo con la rotación, cualquiera de los campos que tengan un ícono, haz clic en él, manténtelo presionado, arrástralo, y lo recorrerá un poco Agreguemos un trazo y veamos pequeño icono de trazo. Ahí vamos, fregando. Ahora cuando estamos moviendo las cosas usando levantando mi flecha, no usando nada de esto. Sólo estoy haciendo clic en él usando mi flecha arriba, abajo, izquierda, derecha. Bien. Esto se llama codazo, ¿de acuerdo? Y puedes darle un codazo en grandes trozos manteniendo el turno. Probablemente ya lo sepas. ¿Qué grandes trozos está usando? Probablemente esté usando ocho. Si no estás usando la cuadrícula de ocho puntos porque usas otra cosa, en realidad puedes ir y cambiarla y tus preferencias. Voy a ponerme un poco, si voy a ir a Preferencias Ahí está ahí. Y aquí abajo hay una analogía Mt, da clic en eso. Y el gran empujón, que está sosteniendo turno es ocho, podrías decidir en realidad tus pequeños codazos ocho y tu gran empujón Probablemente no lo estabas. Pero podrías volver a esto. Este fue el valor predeterminado en Figma durante mucho tiempo y es posible que no use la cuadrícula de ocho puntos, el espaciado de punto correcto Así que vuelve a diez. Dejaré mío por la noche para que pueda hacer la gestión. Ahora, ocho es bueno también, tal vez cuatro porque la mitad de ocho, y a veces sí lo necesitas hasta ti, pero ahora sabes que está ahí. Entonces, por último, creo que ya hemos cubierto esto. Se pueden hacer matemáticas en estas cosas. Entonces, si necesitabas ser dividido por su barra invertida, barra diagonal hacia adelante 2/2, puedes agregar más, digamos U1 Claramente sabías menos ocho píxeles. Puedes usar Times, que es el pequeño hachís, no, no 50. Aquí vamos. Cualquiera de estos campos, al 100%. Quieres que esté medio dividido por dos. Bien, eso son todas las cosas geniales, locas que puedes hacer con los campos en Figma sí agregando las palabras Cool y Crazy hacen que todo parezca más emocionante Probablemente te gusto, entusiasman estos consejos y trucos y Figma. Bien, vamos a meternos en algunos más de ellos. 14. Trucos de encuadre: consejos y trucos para trabajar con marcos de Figma de manera efectiva: Bien, aprendamos todos los consejos y trucos sobre cómo trabajar con marcos, atajos y similares Bien, antes que nada, hagamos clic en este y usemos un atajo que sea usar shift to, para acercarle un poco Quieres pasar al siguiente fotograma, solo toca tu teclado, mira eso. Un poco como ciclos a través de todos los marcos disponibles Bonito. Cambio en, tipo de va hacia atrás, adelante, simplemente tocando hacia atrás, cambio en. Súper útil. Algunas personas prefieren el botón Inicio y Fin en tu teclado. Mira hacia abajo tu teclado. ¿Tienes Hogar y Fin? Algunos teclados no lo hacen, o tienes que mantener presionadas algunas teclas de función especiales ¿Por qué es mejor o peor? Hace exactamente el mismo trabajo salir uno hace zoom y otro no Entonces usemos end para pasar al siguiente fotograma. ¿Puedes ver que no lo hizo zoom en el centro de la pantalla Lo mismo con el siguiente, final, siguiente. No es acercar, mientras que la clave como llena el siguiente fotograma lo más rápido, tan grande como puede ser, mientras que end mantiene el mismo nivel de zoom ¿Bien? Decide cuál te gustó más. Ya sea al final o al final. El hogar va hacia atrás y simplemente no hace Zoom. ¿Cuál utilizo? Principalmente uso en, porque cuando estoy usando mi MacBook Pro, es muy difícil llegar a las llaves de casa en la India. Pero cuando está enchufado aquí, cuando estoy haciendo mis tutoriales con un teclado elegante, click and clack, clack id2 Tengo mi casa en inky así puedo hacerlo aquí. Ahora el dulce truco es que quiero ir a éste. El Android simplemente hace doble clic en el icono y simplemente se mueve hacia él, hace zoom a través de una ICC No, estás como que lo consigue en medio de la pantalla cuando vuelvo a las medidas. Bien, otro pequeño truco para los fotogramas es en este momento, arrastré el tamaño de este marco y simplemente tiré todo en él, lo que puedes hacer es decir las mediciones en realidad simplemente se aplasta para envolver solo alrededor de las cosas que están dentro de esto puede ser útil cuando estás trabajando en o como un dibujo dentro de un marco o has eliminado poco como envolverlo amablemente Puedes apretarlo de esa manera. Hay un atajo, mantén pulsado. Ahí lo puedes ver. Mantenga un atajos más antiguos y luego presione. Nunca me acordaría de esa. Simplemente haga clic en el botón. Bien, el siguiente es útil para usar marcos. Voy a traer una imagen solo porque ojalá exprese este postor de atajo Soy mando Mayús K, Control Tecla Mayús. En una PC, tus archivos de ejercicio tienen una carpeta llamada imágenes en ella, toma la imagen uno. Y yo sólo voy a sostener Shift y arrastrar una talla. Y digamos que vamos a hacer algunos desplazamientos horizontales, lo que haremos en este curso Entonces necesitamos que las cosas como salgan del costado de la página. ¿Qué termina pasando si terminamos duplicando estos? ¿Ves que realmente se escapó? Yo quería estar fuera de la página pero escondido dentro de aquí. Y eso puede ser complicado. Las cosas apenas empiezan a saltar fuera de los marcos. ¿Cómo soluciono eso? Mantenga presionada la tecla de la barra espaciadora mientras arrastra. Entonces voy a copiar y pegar esto. Tengo dos de ellos, lo que dice que si empecé a arrastrar a través, quiere saltar. Se puede ver un poco sobre el, en las capas. Lo puedo ver. Se moverá a través. Y lo puedes ver aquí en mi mesa Pero si sostienes la barra espaciadora mientras estás arrastrando, mira, puedes ir por todas partes y aún está fuera. Ahí vamos. Lo mismo para cosas como si quiero que una imagen se vea como que está un poco como escarchada por la parte inferior y es como casi fuera de la pantalla manteniendo pulsada la tecla Shift Y un poco como yo solo quería sostener la barra espaciadora. Mira, puede ser donde quieras. Puede ser todo el camino por aquí. Todavía está en ese marco o barra espaciadora El último, está aquí en mi lista. Te voy a enseñar porque este es el curso avanzado. Aunque no sé por qué está aquí. Voy a usar mi atajo Comando P, bien, para mis acciones rápidas. Y voy a escribir la cosa que yo porque nunca sé lo que es. Van a mostrar contornos de marco. El que vas ¿puedes ver el pequeñito marco? Y luego mira. Ahí vamos. Mostrar el marco Contornos Comando P Nuevamente, sólo puedo hacer clic en Entrar. Ahí vas. Da la vuelta a los contornos del marco. Ahí está. Alguien en alguna parte lo necesitará. Nunca lo he necesitado. Házmelo saber en los comentarios. Si eres esa persona. Es un marco esboza que no es tan útil. Solo contornos generales es un atajo bastante bueno. No es parte de los marcos, pero oye, estamos aquí. Comando uno, no le pegues al Comando uno, cambia a uno para verlo todo. Entonces puedes mantener presionada la tecla Mayús y presionar 0 para los contornos. Así que sostenga Shift hit 0. Es lo mismo en Mac y PC. Puedes alternar para ver los contornos de cosas que en realidad son bastante útiles si eres usuario de Illustrator, qué alelo eres Comando Y, que es el que también funciona en Illustrator aquí Entonces puedes ser una persona de turno 0 o una persona de Comando Y, no importa. Eso es mostrar los contornos de las cosas de las víctimas. Bien, eso es todo lo que obtuve por el movimiento por marco dulce, unos trucos y consejos para seguir con el curso Si tienes un truco o consejo para marcos, aluminio, los comentarios siempre estoy buscando más para agregar a mi repertorio y agregar a futuros cursos Y si estás viendo, echa un vistazo a los comentarios, ver si hay otros buenos ahí dentro. Pero por ahora, entremos al siguiente video. 15. Técnicas avanzadas de zoom para trabajar de precisión en Figma: Bien, aprendamos a acercar y alejar. Lo que el aferramiento. Es Avanzado. Estoy haciendo cotizaciones aéreas, avanzadas, Consejos y trucos de zoom , cosas que quizás no conozcas Abróchese el cinturón para la emoción. Ahora, todos sabemos si mantienes presionado el comando y golpeas Plus o Control plus en una PC, acercas la misma tecla pero menos para alejar el zoom. Eso es lo mismo en todos los productos de Adobe. Lo que no me di cuenta hasta hace poco, ya que solo puedes golpear más y menos en tu teclado y hace zoom dentro y fuera. Vete tú. Estoy como institucionalizado con atajos de Adobe, pero solo funciona más o menos Un consejo más emocionante es que es, obtuve esto seleccionado aquí abajo y me acerco usando ese mismo atajo dulce más zoom en ese mismo atajo dulce más zoom en el centro de mi pantalla sobre lo que había seleccionado Puedes cambiar eso como tu preferencia, bien, debajo de tus pequeñas opciones de Figma, Bajemos a Preferencias Y esto está desactivado por defecto. Me gusta en obras como Adobe Illustrator. Estamos, tienes algo seleccionado y golpeas plus. Se acerca a lo que has seleccionado. Puede que odies eso. Entonces puedes apagarlo, cambiar uno para verlo todo, luego seguir trabajando en esta cosa aquí. Y luego plus, plus, plus, plus, plus luego se acerca a él, obtienes, ¿es eso zoom avanzado? A lo mejor no. Ahora el último pequeño consejo y truco es para las personas que usan ratones, tienen una rueda de desplazamiento. Hago esto todo el tiempo. Cuando tengo un mouse con rueda de desplazamiento, que es la mayoría de las veces cuando estoy enchufado a una pantalla grande es la rueda de desplazamiento sube y baja aquí por defecto, si mantienes presionado Shift, va a izquierda y derecha Haz que mantengas presionado el comando en una Mac, Control en una PC, entra y sale. Pero todo rueda de desplazamiento. Si no tienes rueda de desplazamiento, eso no va funcionar. Ahí vas. Desplázate hacia arriba y hacia abajo, Mayús a la izquierda y a la derecha, Comando o Control para acercar o alejar. Bonito. Bien, eso es todo para cotizaciones aéreas avanzadas, Técnicas de zoom Bien, entremos al siguiente video. 16. Luz u oscuridad frente a un tema del sistema: ¿cuál usar en Figma?: Hola ahí. Quizás te estés preguntando por qué su fondo es UY o oscuro y malhumorado y genial como cuando el tuyo es así, tienes habilitado el modo de luz Ese es el valor predeterminado normalmente, déjame mostrarte cómo alternar entre los dos y algunas de las cosas que le pasan a los predeterminados cuando lo cambias Bien, entonces, ¿cómo obtuve mi fondo oscuro y malhumorado? Vamos a ir y cambiarlo al comando de tema ligero P, Control P. Y digamos que como vas a usar el modo de luz. Oye, todo está ligero. El trasfondo no cambia. Una vez que lo hayas cambiado. Si hago un nuevo documento, usa todas las cosas ligeras. ¿Puedes ver la interfaz de usuario en vivo, pero también un color de fondo claro El color de fondo no se actualiza. Es como sentarse una vez y ya está hecho. Entonces, si voy y cambio este comando P y voy de humor oscuro, puedes ver los colores de fondo, estado, y el modo de luz. Puedes cambiarte tú mismo, correcto, sin nada seleccionado, solo ve y elige un color oscuro. Pero una vez que lo hayas cambiado, cada nuevo documento recordará y será modo oscuro y tendrá un fondo oscuro. Y por qué hay un modo de luz y modo oscuro que no sea el factor cool, el modo Doc es genial por cierto, está lleno cuando estás en una habitación mal iluminada o es de noche y estás trabajando en la oscuridad, la interfaz de usuario y el modo de luz La luz es en realidad bastante brillante, sobre todo si el fondo viene a lo largo del viaje. En realidad es una luz bastante brillante en la habitación. No es que te duela los ojos porque tus ojos se ajustan, pero tal vez sea una distracción del trabajo Para mí, no me preocupa en Figma, elegí el modo oscuro porque se ve genial Pero cuando estoy usando algo como Premiere Pro será Photoshop y Lightroom cuando estoy haciendo como mucha gradación y corrección de color y esas cosas, entonces no quiero distraerme con la interfaz de usuario Puedes conseguir que siga lo que sea que esté haciendo tu computadora. Entonces como mi Mac aquí tiene una opción donde puedes configurarlo en Auto. Así que por la noche se oscurece y durante el día empieza a encenderse. Yo solo falso mío la interfaz de usuario de mi MSc para ser ligero. Pero puedes conseguir que siga eso. Puedes fingir, encontrarla en algún lugar ahí está. Así que presiona la F, ve a Preferencias, ve al tema, y puedes hacer clic en Tema del sistema y se actualizará dependiendo de lo que diga tu computadora. No sé si eso funciona en una PC. Cuelga una PC justo aquí frente a mí. Espera, chapuzón. Yo lo sabía. Sabía que si empezaba ese peasy diría algo así como actualizaciones en marcha. Por favor, espere. Bien, esperemos por favor. Bien, la forma en que se acabó. Y sí, tú también puedes hacer System Theme en una PC. ¿Eso valió la pena entonces? No, no lo fue. En fin, no tengo PC odiosa. Tengo un poco tarde para BC. Pero si las de una Mona, son igual de buenas por medio precio suficiente Pasemos al siguiente video. 17. Proyecto de clase 02: restricciones de tarjetas de eventos: Hola. Oye, es hora de otro proyecto de clase. Voy a conseguir que hagas una Tarjeta de Evento que tenga una caja de fecha que se pega a la esquina. Déjame mostrarte. Entonces vamos a querer que hagas esto un rectángulo y pongas un marco y pongas una cajita de fecha en la esquina que se pega en la esquina. Bien. Incluso es que eso funcione. Son habilidades que ya hemos aprendido a través del curso. Pero yo solo quería hacer cosas quiero que practiques porque a veces te gusta solo hazlo una vez y un poco cae a tu cabeza Pero también, vamos a usarlo para seguir adelante en este curso para construir cuadrículas Así que no solo estamos mirando características, realidad estamos haciendo algo, hacer algo como esto. Las esquinas redondeadas son opcionales. Entonces ya sabes, donde finalmente estamos golpeando es que vamos a hacer algo que sea un poco más receptivo como este en los próximos videos. Entonces necesitamos el núcleo de ello hecho y un poco de práctica. Si no eres capaz de hacerlo, no te preocupes. En el siguiente video, voy a hacer un video terminado. De hecho lo estamos haciendo por si acaso te pierdes. Lo que querías comparar tu método de mi método, lo único que debes recordar para este proyecto de clase es asegurarte de que es un componente que tenemos instancias de él aquí que estamos usando y cuando mantenemos nuestro componente principal fuera del fuselaje ¿Algo más? Entregables, igual que el último Haz un video si puedes, si no, captura de pantalla. Y solo quiero que arrastres el borde mostrando que es responsive y subas el enlace a tu video. A menudo puedes subir el video en sí. Así que tenlo en algo como Vimeo o YouTube. Esos son los mejores lugares. Y luego solo vincúlelo y luego publique el enlace en la sección del proyecto de barras de asignaciones Bien, diviértete haciéndolo. Si te quedas atascado. Te veré en el siguiente video. 18. Proyecto de clase 02: limitaciones con tarjetas de eventos: Bien, esta es la versión terminada del proyecto de clase Entonces en caso de que te hayas quedado atascado y no estuvieras seguro de cómo hacerlo. Puedes ver esto. Te voy a mostrar como hacer las cosas atrapadas en la esquina superior derecha muy rápido Eso es bastante fácil. Y luego seguiré y en realidad solo haré el resto. Al igual que cómo lo haría a nivel profesional, como asegurarme de que sea componente. Voy a convertir esta cosa en un diseño automático porque voy a retener lo hice a propósito realmente. Lo hice y descubrí lo increíble que era más tarde. Pero vamos a hacer eso, asegurarnos de que realmente fluya, se pegue a la esquina. Te voy a enseñar cómo sacarlo para que sea de 16 por 16. hay algunos pequeños consejos y trucos, pero no tienes que ver el video porque puedes ver que es un poco largo. Pero para los que queremos un paseo, podría ser interesante, al menos compararlo con cómo lo hiciste, con cómo, por qué lo hiciste. Siempre es bueno ver algunas veces. Bien, vamos a saltar. Bien, chicos, pensaron en este de aquí y dan clic en el nombre del marco. Voy a cambiar uno, turno dos para acercar. Si eres como yo al principio, no estabas seguro como mando uno y vamos a cambiar uno. Te gusta que me estaba equivocando. La forma en que lo recuerdo es como el turno uno a tres es que estoy cambiando mi punto de vista, mientras que comando te estoy ordenando que cambies pestañas a. ¿Ayuda? De todos modos? Hagámoslo simplemente muy rápido, lo básico para que nosotros, lo tengas y luego voy a repasar y diseñar mi todo eso va a bacalao cosas o al principio. Y puedes ver algunas ganas si necesitas la experiencia. Entonces, ¿quieres ver cómo lo hice? Bueno, tal vez se quedó atascado en alguna parte. Entonces hagamos lo básico. Vamos si clave, porque es mejor que un rectángulo. Más opciones para un marco, voy a dibujar una talla. Voy a darle un color para que veas lo que estoy haciendo. Escoge cualquier color, verde, verdoso, aguamarina. Si te metes dentro de ella va a ser otro marco. Entonces voy a darle de nuevo a la tecla F y con ella seleccionada y un poco dibujando sobre la parte superior de la misma, termina entrando se puede ver el fotograma uno, lo cual no es un buen nombre para ello Es genial. Este guión de una tarjeta Evento Entonces este va a ser mi estado. Bien, voy a darle a este un relleno de blanco, solo para que lo veas en todo lo que quiero hacer es decir fecha. Mi pequeño tipo de marco está constreñido a la nota izquierda a la derecha. A la cima. Sí. Entonces cuando selecciono esto ahora, se mueve alrededor, viene para el paseo Impresionante. Bien, despedido. A menos que quieras verlo todo, hay algunos consejos y trucos. Pero como puedes ver de la época, me abriré camino un poco, me quedaría si fuera tú, pero no tienes que hacerlo Bien, vamos a entrar en un poco más de detalle. Esto tiene que ser componente porque lo voy a usar muchas veces. Así que recuerda ese dulce atajo. Te acuerdas de la Opción de Comando K, eso es justo en una tecla de Opción de Control de Mac en una PC, ahora es nuestro componente principal. Y los componentes principales deberían pasar el rato por ahí. Y deberíamos tener Instancias aquí. Solo tomemos un par de porque es interesante. Pero tenemos que hacer más sobre la edición en el componente principal porque queríamos fluir a través de un par de cosas, es que queremos tener, voy a hacer clic en hold y arrastrar el pequeño icono ahí a la derecha mantenga presionado Shift y salta hacia arriba y ochos ¿Cuánto queremos? 16, 24, 24, usemos 24. Asegúrate de que sea un garabato. Golpeé las pequeñas opciones aquí, golpeé los puntitos porque los garabatos se ven mejor que solo esquinas redondeadas Ios hacer esto con una suave la esquina llamada esquinas moviéndose. Voy a acercarme. Vamos a usar mi rueda de desplazamiento. Va a mantener presionado Comando o control en una PC y acercar y alejar. El camino equivocado puño y te vas, ¿ puedes ver los bordes luego cambiando? ¿Te gusta? ¿Te importa siquiera? Y vas como, si, es un poco hacer lo mismo por esto. Así que vamos ustedes ocho va a ser bueno con el suavizado de esquina. Bien, garrapatas que están dentro de ella. Así que voy a agarrar mi herramienta Type y si haces clic dentro de las cosas, a menudo, va a entrar ¿Puedes verlo cuando dentro de ese DataFrame funciona un poco? Entonces voy a decir 17 en cuanto al tamaño, es usar ese pequeño atajo cuando haces clic en él y usas arriba o abajo Bien, lo que quieres el mío sobre las 10:10 es bastante pequeño para una aplicación, pero esto es más como una sugerencia y no una completa como la accesibilidad y poco de fecha estarán en el listado real Esta es una pequeña tarjeta tratando meter demasiada información Tengo dos bits de texto. Éste va a decir mamá, máscara mayúscula, selecciónalo todo, dale al Comando B para que quede en negrita. El control B en una PC simplemente se vuelve audaz instantáneamente, lo cual es genial. Voy a golpear a Escape para salir de ella. Mantenga pulsada la tecla Mayús, haga clic en ambas. Voy a mantener pulsada la tecla Opción en mi Mac, tecla alt en una PC, voy a presionar H para alinearlos horizontalmente a esa misma tecla ya V los alineará verticalmente. Nosotros sólo tomaremos esos juegos. No recuerdo cuáles son esos atajos porque no tienen sentido, pero este tiene sentido. Busque Opción o Alt en una PZ H para alineación horizontal. Bien, así que voy a hacer esto. Y lo que me gustaría hacer es que el mío terminó dentro de mi marco, lo cual es bueno. Puedes arrastrarlo si necesitas pandillas y arrastrarlo sobre esta manera. A mí me gustaría el mío adentro. Así que arrastra ULs dentro de este DataFrame. Porque lo que quiero hacer es que quiero este marco en este momento tengo un fijo o es que eres un ancho fijo y altura 32. 32, gran tamaño, pero quiero que se amplíe si hay más tiempo. Y algunos de los dígitos voy a encajar perfectamente aquí. Así que quería en esto en un diseño automático, tal vez turno de día para que esté perfectamente en el medio. ¿Ves que está por defecto para abrazar contenidos si no tiene ancho fijo, bien? puede decir en realidad solo hazlo abrazar todo por dentro para que cuando más tarde y alguien vaya, sé lo que es uno corto. Probablemente sea igual de largo. Yo quería quería expandirme y contratar. Y me permite un poco de control aquí, no me gustó, digamos en realidad puedo jugar con este espaciado si quiero El acolchado para un poco más receptivo. Entonces vamos a cambiar uno. Es lo que aparece ahí amablemente. Quiero líneas espaciadas un poco mejor del borde. Más, más, más. Borro en el camino. Quiero que el mío vaya un poco en esta esquina superior de aquí. Pero quiero que sea, quería ser menos ¿cuánto? Usemos nuestro pequeño sistema de red. Cómo los estoy viendo un poco a los dos a diferencia del espaciado sabio, ¿qué opina 12 16 a 16? 16 se siente como un buen hueco desde los bordes. Entonces voy a decir que vas a estar -16 para cruzar y luego más 16 abajo. Y sé que es perfecto, mira como perfecto y ojalá siga respondiendo. Eso es elegir el lado derecho, las Restricciones para configurar perfectamente. Tal vez las Restricciones en hecho con un padre, se hace con un niño en el interior que está dentro de un marco? Sí. Pero trabaja en este tipo. Mira, tienes Restricciones, una parte superior y derecha. Tener sentido. Y ahora lo bueno, el turno uno es que puedo tener estos como en un dispositivo más pequeño, de ancho completo, pero en estos más grandes, mi plan es tener como dos de ellos apilados en un teléfono ancho realmente grande y tener cuadrículas como esta D. Esto va a funcionar también para nuestra vista de escritorio. Pero uno de los problemas aquí ahora es poco de consistencia con el espaciado por el que podemos pasar y tipo de ir como si fuera una especie de pintura como tú quiero que sea ¿qué? Más ocho, más 16, ¿de acuerdo? Y puedes hacer eso por todo. Pero un sistema de red nos va a ayudar a que esto sea mucho más rápido y nos permitirá ser un poco más consistentes en muchas cosas en lugar de simplemente arrastrarlo y tratar de no olvidar usar 16 en lugar de 17 Lo sentimos, ese es el segway al siguiente video, por qué estamos en esta sección llamada cuadrículas Bien, ahora, podrías haberlo hecho otra manera. Eso está bien. No importa mientras esté un poco pegada en esa esquina, bien. Y podrías diseñarlo pero diferente en cuanto a looks. Tal vez no lo usaras entonces autolayout, ¿era necesario ? Probablemente no. Sentí que lo necesitábamos de todos modos. ¿Por qué podría ser bueno? En realidad, esto podría ser bueno. Más adelante, podríamos usarlo en una versión de escritorio y podríamos usarlo de esta manera. Mira esto. No puedo cambiar la dirección de autolayout en una instancia Bien, tengo que hacerlo aquí arriba. Tú en la principal y es una, puedes ir por aquí. Mira eso o eso es que debí haber vivido con eso. Ese es un muy buen caso de uso para el autolayout. Ve tú, vamos a fingir que lo hice a propósito. Bien, ese es el final del video a lo largo de uno, espero que hayas recogido algunos consejos o confirmes algunos de tus conocimientos o hayas descubierto cómo hacerlo de una mejor manera Házmelo saber en los comentarios. Si lo hiciste de otra manera. Si estás viendo este video, echa un vistazo a los comentarios. Podrías ser una forma genial en la que Dan no pensó. Bien, eso es. Voy a dejar de hablar de mí y de la tercera persona. Es pasar al siguiente video. 19. Cuadrícula contra restricciones contra asistencia autónoma en Figma: ¿cuál usar y cuándo?: Hola, oye, antes de profundizar en las cuadrículas, hablemos de la diferencia entre cuadrículas y Restricciones y autolayouts porque pueden ser confusos sobre cuándo usar cada una de ellas, ¿ cuál es bueno para cuál Es confuso porque todos comparten un propósito similar. Se trata de la capacidad de respuesta. Y si soy honesto, he grabado este video unas diez veces ya tratando que sea conciso y no me goteando por 15 min Está destinado a ser un recapitulación Dan, vamos, recapitulación. Empecemos con autolayouts. Autolayout ya sabemos que podemos agarrar cuatro cosas diferentes y podemos decir shift a para un diseño Y nos da algún tipo de capacidad de respuesta. Y tiene más que ver con el contenido internamente en nuestro diseño automático, a diferencia de Restricciones y cuadrículas que responden al cuadrículas que responden al Bien, entonces si tengo un tamaño de escritorio diferente o un modelo de teléfono diferente, la capacidad de respuesta que sucede hay cuadrículas y restricciones, autolayouts, y más que ver con lo que responde dentro de Entonces puedo entrar y decir en realidad esto es, en lugar de sentar su cuenta, ves que realmente fluye Es sensible, no al marco exterior, solo a sus bits internos. Puedo agarrarte y marcharte, tú vete. Y la capacidad de respuesta. Excelente. Bien, aunque las Restricciones, que hemos hecho, si selecciono en esto y digo en realidad quiero que seas Restricciones del ascensor y nota, perdón, la derecha en la parte superior. Significa que cuando voy a cambiar el tamaño de este escritorio, bien, tal vez para una vista de tablet, ya ves viene para el paseo Entonces es receptivo, pero tiene más que ver con el tamaño del marco. Por lo que a menudo usas estos dos juntos. Puedo redimensionarlo y puedo entrar aquí y decir, en realidad no se cierran la sesión, quiero cerrar sesión y el autodiseño Entonces cuadrículas, ¿por qué las tenemos? Son visualmente útiles. Simplemente te ayudan a obtener márgenes consistentes, espaciado consistente entre páginas en varias páginas. Tienen algunas otras cosas útiles. ¿Tengo esto? Verás que le brota, lo cual es genial. Puedo tener un espaciado consistente entre todos ellos en diferentes páginas. Ya se dijo que donde se vuelve súper útil es realmente se relaciona con Restricciones. Por aquí dijimos que usted constreñido a la derecha y a la parte superior. Pero podemos hacer con una grilla es que podemos decir ustedes, quiero estar constreñidos a la izquierda y a la derecha, pero no es hacer todo el frame, en realidad es solo hacer la grilla en sí. ¿Por qué es eso genial? Es que cuando tienes un tamaño diferente, tenemos una página de diferente tamaño. Bien. Digamos que es una página más pequeña. Mira lo que pasa. Mira eso. Así que las rejillas atadas con Restricciones significan para un arrecife más consistente que fluye y Responsive Design ¿Así es como poner esas tres cosas diferentes en su propia cajita? Y puedes ver cómo se complementan entre sí? Ojalá. ¿Cuándo usas cada una de ellas? Entonces autolayouts, obtuve un poco como tres niveles o cuatro niveles Y para tu diseño inicial de scrappy, no tenemos idea de lo que estás haciendo Sí. Simplemente obtienes cosas en la página, tienes todo arreglado. No necesitas ninguno de estos. No necesita autolayout o Las restricciones son cuadrículas a menos que lo desee Pero a menudo en esa etapa hay tanto flujo y flujo, solo estás arrastrando las cosas y tratando de poner las cosas en orden Etapa conceptual, ninguna de estas o aquella útil. ¿Cuándo se vuelven útiles? En diferentes momentos la cuadrícula me parece útil. Básicamente, una vez que hayas hecho esa etapa conceptual, usa cuadrículas porque te permite ser consistente en tus diferentes diseños y es una de esas cosas para conseguir que es fácil hacerlo bien ¿Sabes qué tipo de tamaño de cuadrícula vas a usar, cuántas columnas? Hagámoslo en todas las páginas. Impresionante. El diseño automático es otro que puedes usar al principio de tu diseño. Porque quieres, tú, sigues ajustando las cosas. Estás moviendo cosas y moviéndolas por ahí. Entonces todavía tenías una etapa conceptual razonable, pero es mucho más fácil tener un diseño automático para refluir estas cosas que ser manualmente como apagarlas y borrarlas, obteniendo el espacio perfecto entre todas ellas Muy a menudo voy a usar autolayouts temprano en mi proceso de diseño, después del concepto, tal vez después de la aprobación de un cliente, o tal vez solo estoy contento con mi decir alambre-frame será alta fidelidad y quiero Así que las cuadrículas anticipan autolayouts temprano donde empiezo a preocuparme por las Restricciones, es más tarde cuando necesito construir diferentes tamaños, a menudo solo voy a trabajar en un tamaño de teléfono, cualquiera que sea el tamaño genérico más típico para empezar, lo mismo con Pero cuando me acerco al final de mi proyecto donde en realidad tengo que averiguar qué voy a hacer por tablet? Qué voy a hacer por una pantalla grande, por una pequeña pantalla, por un teléfono Pro Max o uno pequeño Android, ahí es cuando las restricciones se vuelven mucho más útiles. Entonces eso es para mi, ¿ soy de diferentes tallas? Pero también si vas a salir con otras personas. Entonces en cuanto tengas que dárselas a otra persona, probablemente deberías ser decidir cómo estas cosas Restricciones, para que así sea de la manera que imaginaste. Guau, eso fue un gran desastre waffly, pero ese fue el gran lío waffly que se me ocurrió una esperanza que sí ayude un Mis palabras de despedida son que los autolayouts, las restricciones y las cuadrículas no tienen que usarse en absoluto, especialmente al principio donde se vuelven útiles es cuando tienes más de una página, varias páginas y quieres consistencia porque tienes un diseño razonablemente establecido y son absolutamente esenciales cuando estás trabajando con cosas por ti mismo para ser utilizadas más adelante en futuros proyectos. O probablemente debería empezar con eso. Bien, ese es el final del video. Pasemos a hacer algunas cosas. Dan, deja de hablar 20. Cómo copiar y pegar cuadrículas y exportar estilos de cuadrícula en Figma: Hola ahí. En este video haremos una cuadrícula de columnas, solo una grande con márgenes en el lateral. Haremos que una segunda cuadrícula haga en este caso en cuadrícula de ocho puntos, para que podamos obtener un buen diseño dentro de nuestras tarjetas, no solo el marco padre. Voy a mostrar cómo copiar y pegar cuadrículas de un fotograma a otro Te voy a mostrar cómo crear un estilo, ese estilo en un par de atajos. Vamos a meternos en ello. Bien, hagamos una cuadrícula que haga clic en el primer teléfono, el marco del teléfono Y voy a decir Layout Grid plus. Y voy a usar las columnas. Así que dirígete al pequeño icono de ahí, switcher dos columnas. Bien, voy a tener un diseño de una columna para mi pequeño teléfono Y voy a tener un margen de un diseño muy pequeño y ajustado usa 16 píxeles, como si estuviera bastante cerca de los bordes. Y si tienes mucho que apretarte, tal vez tengas que hacerlo. Bien. Pero voy a usar 24, le da un poco más de espacio para respirar alrededor de los bordes. Y tengo el lujo porque no tengo tanto que meter Ahora puedes copiar y pegar estos dos teléfonos diferentes. Si tienes muchos diferentes, puedes simplemente copiar y pegar esto en todo. Mi caso, voy a dar click en el marco. Y lo que quieres hacer es encontrar tu cuadrícula de Layout y luego quieres hacer click en esta área aleatoria aquí. No lo sé, ahí no. Son solo un poco te permite seleccionar cosas. Eso se puede hacer con muchas cosas. Puedes seleccionar en estas áreas blancas aquí. Y puedes copiarlos y pegarlos una vez que los hayas seleccionado. Bien, Así que voy a ir, tú vas a copiar y puedo hacer click en cuantos amigos me gusten y solo dale Paste. Entonces solo está el Comando C, Comando V o Control C, Control V, solo tu copia y pegado regular. Esa es una buena manera de atravesar muchos documentos. Pero el problema con eso es que probablemente sea fácil. Solo usa un estilo. Entonces vamos a deshacer eso y vuelvo a hacer clic en mi primera y voy a darle ahí a los cuatro puntitos pequeños, digamos hacer un sólido de esta cuadrícula. Voy a añadir uno. ¿Bien? Y voy a llamar a esta columna 11. Y podría poner el margen aquí también para que sepa lo que es de un vistazo porque podría tener que tener en diferentes páginas, podría tener que tener diferentes márgenes. Bien, vamos a crear un estilo. Si necesitas actualizar un estilo, puedes hacer click off en el fondo para que veas todos tus estilos, o hacer click en el teléfono, ahí verás tu estilo. Puedes romper el estilo para que no esté conectado o puedes ajustarlo. Podemos ajustarlo con solo hacer clic sobre él. Ahí está ahí. Y puedes editarlo dando click sobre este pequeño. Verlo estilos. Y a mitad de camino se pone como, genial, puedo cambiar el nombre, pero quiero cambiar digamos el margen 24-3 En realidad puedes hacer click sobre esto aquí, este pequeño ícono ahí. Puedes meterte en lo más profundo de todo cambia tu margen y obtendrás un, bien, así que eso es crear y editar nuestra cuadrícula, el atajo para afinarlo dentro y fuera del Shift G. ¿Ya lo he hecho No estoy segura. Turno G. Bien. Porque es genial cuando lo estás poniendo. Pero cuando quieres diseñar cosas, esa gran cosa roja no es tan útil. La otra cosa para asegurarse de que está haciendo cuando haya agregado sus cuadrículas es establecer las restricciones Depende si quieres tu, voy a querer menos cortar este lado y chasquear por aquí Lo mismo para estos, en realidad, voy a borrar ese porque son solo instancias de sí mismo. Y voy a asegurarme de que ambos seleccionados no sean solo a la izquierda, sino a la izquierda y a la derecha, que cuando se ajusten, para que cuando se ajusten, vengan a dar el paseo. De lo contrario no lo hacen. Hagamos un estilo más que vamos a usar. En lugar de las columnas, vamos a hacer una cuadrícula. Lo vamos a hacer en esta tarjeta aquí porque teníamos, estábamos tratando de empujar las cosas por encima 16 píxeles y hacia abajo 16 píxeles. Y digamos que quiero un poco abajo de mi tarjeta aquí abajo. ¿Cómo me aseguro de que está por defecto a múltiplos de ocho? Y eso lo podemos hacer con una grilla. Entonces hago clic en el real, podríamos hacerlo a la instancia, pero si lo hacemos al componente principal y pasa por todos ellos. Y puedo decir en realidad quiero Layout grid en ti. Voy a dejarlo como la grilla. Se incumplió a ocho puntos. Podemos cambiarlo haciendo clic en el icono aquí. Y solo significa ahora cuando estoy poniendo las cosas con mi marco, sé que se romperá. ¿Se ve que se ajusta a los diferentes ocho puntos? Bien, Consistencia, Dan, me encanta. Lo que podría hacer es agregar el borde de esto, así sigue siendo algo de capacidad de respuesta No todo va a ser un punto porque todos los teléfonos y escritorios son tan diferentes. Pero vamos a poner muy bien mi componente principal. Bien, acabo de acercarme un poco para poder ver realmente en los ocho puntos, no se rompe cuando estás haciendo el exterior del marco, brota con cosas en el interior como ese marco que hice que no puedes ver, vamos a darle un color Pero aquí los bordes, vamos a ordenarlo diciendo que el fondo está, ¿dónde está a puntos? La parte inferior de esto va a ser de ocho puntos también. Todos. Bien, y vamos a convertirnos en un estilo. Entonces estoy seleccionando el exterior y voy a decir, vamos a hacerte un estilo de grilla. Y esta es nuestra cuadrícula de ocho puntos. Es genial. Yo estilo. Bien, así que conseguimos un par de estilos diferentes. Una cosa que podrías notar que acabo notar también es que no se está ajustando. ¿Por qué es eso ajustar Restricciones, Dan? Bien. Así que voy a pegarlo al borde ahí, pero en realidad quería expandirme y contraerse dependiendo del marco padre. Entonces voy a decir, sabemos que las restricciones levantan la derecha. Ahí nos va a ayudar y va a estar pegado al fondo. Bonito. Recuerda el atajo Shift G encendido y apagado. Bien, lo siguiente que quiero hacer es cuando estamos redimensionando estos por los diferentes puedes ver que no es ¿cómo consigo que se rompa a un punto Puedo ver la rejilla dentro de ella, pero el marco exterior no. Puedo acercar el zoom e ir a la derecha. Vamos a conseguir que esto se ajuste a esa cuadrícula de ocho puntos. Perfecto. Ish. Agreguemos nuestro tercer conjunto de cuadrículas, que tiene filas Hemos hecho columnas, hemos hecho grid. Echemos un vistazo a agregar filas 21. Cómo agregar filas y cuadrículas de columnas a un diseño en Figma: Hola a todos. En este video pasaremos de tener una columna por la mitad como una cuadrícula súper útil a tener filas también Parece que nosotros como Waldo, ¿Dónde está Wally? Dependiendo de donde seas. Pero estos pequeños chicos a rayas son súper útiles para obtener un diseño consistente usando nuestra encantadora cuadrícula de ocho puntos Bien, confesado, creo que me faltaba ronda con mi diseño ahí no lo consiguió del todo hasta el borde de la columna Voy a asegurarme de que éste esté atascado en este lado. Lo que también quiero hacer son cuadrículas, bien, bien. No los uso muy a menudo. Te muestro porque mucha gente lo hace. Entonces lo que voy a hacer por esta Tarjeta de Evento aquí es que en realidad voy a darle la vuelta a mi, me voy a quitar de mi parrilla. Lo tengo como estilo, pero puedo usar más tarde y aplicar. Lo va a apagar por el momento. Te voy a mostrar por qué me gustan las filas amargas. No son realmente mejores que solo visualmente menos confusos para mí al menos. Y usa mi tecla F para un marco, dibuja. Va a ser mi navegación superior y sólo voy a arrastrarla a la parte superior y a los lados. Mientras estoy aquí, mi mente dice es hacerlo arriba, lo siento, hazlo a izquierda y derecha para que redimensione con el marco Voy a darle un color de relleno. Voy a darle cualquier color viejo por el momento. Y ahora que está a la izquierda y a la derecha Restricciones, eso va a cambiar el tamaño perfecto, pero ¿qué tan alto lo hice? Acabo de hacer que sea una altura aleatoria que se veía bien. Bien. Y eran 55. Pero quiero ser consistente. Quiero usar cuadrícula de ocho puntos. Hay suficiente flexibilidad en el y para obtener el tamaño, quiero ser capaz de ser consistente en todos los dispositivos en diferentes proyectos. Entonces encendamos nuestra canción rosa. Doy click en el marco exterior. Por el momento hay un estilo aplicado a ella. Bien, así que tuve otro. Entonces voy a decir en realidad vamos a romper esto porque quiero mantener la columna, pero quiero agregar otra, no una cuadrícula, pero quiero agregar filas. Rosa extraña. No es extraño, pero por el momento el estiramiento, así que conseguí cinco de ellos turno a cinco de ellos. Bien. Es cerrar esto abajo. Cambio a para ver lo que tengo seleccionado y este cinco de ellos y se estira para encajar. Y eso funciona para columnas, pero no tanto para filas, porque filas, puedo desplazarme arriba y abajo de la pantalla siempre y cuando me guste No es un tamaño fijo. Así que vamos a hacer es que voy a hacer clic en él y voy a editar estas filas. Y voy a decir que no eras elástico, vas a simplemente pegarte a la parte superior Y quiero que tengas una altura de ocho con una canaleta de ocho también Es un poco wiki. Están ahí arriba, solo necesitas muchos más de ellos. ¿Cuántos más? Sólo hay que poner un número gigante. Cien, siempre y cuando cubra todo tu marco. Se puede poner en 200, realmente no importa, sólo un poco se va al infinito Se puede ver cómo es eso. Para mí. Tengo mis Restricciones para mi columna, izquierda y derecha. Ahora tengo mis filas y ahora me permite un poco como la grilla, pero menos missy Bien. Así que sólo te puedo ir y chasquear a ella así puedo decir 48 es perfecto Está lo suficientemente cerca de ese 50-algo al azar que escogí. Y ahora con estos artículos, puedo empezar a colocar estos y encajarlos en la parte superior Lo mismo con el fondo de la misma. Bien. Si decido que el fondo de esto tiene que ser lo alto que va a encajar a mi cuadrícula de puntos. ¿Cuál es el espaciado y no lo hará entre ellos? Digamos que son 16 puntos. Necesito Event Card tiene una cosa blanca dentro de ella. Cambiemos eso de marco gay blanco a solo voy a usar un color más oscuro para que aquí abajo sea más, más visual visual. No es un Dan raro, pero significa que ¿ves que puedo? Estoy sosteniendo a Shift para asegurarme de que suba y baje. De hecho, solo necesitaría arrastrarlo por ahí. Y yo, ya sabes, son 16 entre los dos. Quiere que coincida con el exterior. Puedo arrastrarlo uno más para conseguir mis 24. Ahí vamos. Los Bros son mejores que las rejillas. En mi opinión. Este no está haciendo fila. Entonces va a eliminar a este tipo y se va, vas 24. Bonito. Recuerda verificar, seleccionar en lo real. Mantenga pulsada la tecla Opción, anémica, toldos OK, y luego coloque el cursor sobre el Componente encima de él y mire eso. Son 24. Perfecto. Bien, mueve uno para verlo todo Vamos a hacer clic en este turno para. Y parece que, ¿Dónde está Waldo siempre Wally, de dónde soy Rayas tu rojo y blanco. Pero eso es uno útil cuando estás poniendo las cosas, cuando intentas diseñar ahí en el camino, ¿Cuál es el atajo para asegurarte de que desaparezca? Es correcto Shift G. Entonces eso es usar filas y columnas. Puedes ver mi top uno no es suficiente. Te voy a ti, eso son filas y columnas en Figma, de Ingrid si quieres usarlas Bien, En el siguiente video. 22. Cómo actualizar los estilos de cuadrícula en Figma: Todos, hablemos de editar un estilo de cuadrícula existente. En el momento en que tenemos un estilo, bien, tengo este marco seleccionado. Tengo este estilo aquí llamado una columna, pero quiero que todas las filas formen parte de ella también. Entonces en vez de romper el enlace y convertirlo en uno nuevo, pero debería haberlo hecho en el último video es con su seleccionado aquí, en realidad puedo ir, no quiero romper el enlace, en realidad quiero ir y editarlo. Entonces voy a dar click sobre este pequeño icono aquí. Y voy a decir éste de aquí. Me gustaría ajustarme. Entonces, en vez de una columna, me gustaría que fuera una columna con fila de ocho puntos. ¿Bien? No quiero agregar para adherir, en lugar de romperlo y agregar otro diseño de cuadrícula voy a entrar aquí, en mi estilo y editar en este, no en ese. Quiero ir a filas y me gustaría que el estuviera arriba. ¿Cuántos deberían estar aquí? Cuantos, ya sabes, se carga. Bien. Y quiero que lo ponga en la parte superior y no sea elástica Quiero que la altura sea as y quiero que la cuneta sea ocho Si te pierdes con el desplazamiento es solo el desplazamiento de la parte superior. Tal vez quieras, digamos 20 píxeles todo el camino redondo es margen arriba y se mete con tu cuadrícula de ocho puntos De hecho, puede simplemente compensar al 20, hacer que sus márgenes sean 20 y luego seguir corriendo una cuadrícula de ocho puntos dentro de ahí. Eso está totalmente bien. Estoy feliz de que estoy usando en todos los sentidos. Entonces vamos, he actualizado esa. Por qué no quiero hacer esto ahora es que en realidad puedo deshacerme de estos y decir, vamos a aplicar ese estilo de una columna y todas las filas. Bonito. Bien, hubo uno corto actualizando estilos en Figma 23. Cuadrículas dentro de marcos que no son el marco principal: Hola a todos. Agreguemos columnas a este marco aquí, no al marco general porque tenemos este extraño caso de uso donde solo necesitamos cuatro columnas solo para esta cajita aquí, agregaremos una pequeña cuadrícula de diseño de columnas. Entonces lo llevaremos un poco más allá. Y trabajaremos en este turno a donde tenemos una navegación de ancho fijo. A lo mejor es la parte de administración de nuestro sitio web. Este tiene que ser de este tamaño, pero el resto necesita ser elástica y Responsive, fácil de hacer, y permite que las rejillas sean un poco más únicas para nuestros requisitos específicos Bien, vamos para que podamos agregar columnas o cualquier tipo de cuadrícula de diseño dentro de los marcos Así que voy a agarrar mi herramienta de marco. Lo voy a dibujar como un conjunto de cajas de características aquí, pero quería tener cuatro columnas. Entonces, en lugar de tratar de hacerlo al marco general, que es mi teléfono, solo voy a hacerlo a este marco. Voy a decir agregar cuadrícula de diseño. Y quiero que sean columnas. Y quiero que sea, digamos, cuatro, que es muy diferente a la mía. Pero solo es único para esto como pequeñas tarjetas de características. Y voy a hacer aquí cajitas en las que puedes hacer click para ir a las diferentes subcategorías de gigs Y el intestino es que voy a emparejar otras cosas, 24, quizá 16. Y significa ahora cuando dibujo mi F2 y dibujo cajas dentro de él, bien, puedo conseguir que se ajuste a las filas, pero también puedo conseguir que se ajuste a estas nuevas columnas que dentro de ella. Y puedo decir, ¿puedes ser de izquierda y derecha? Vamos a darle un color de relleno. ¿Dónde estás? Eres invisible. Color de relleno de no blanco. Significa que estos se ajustarán. Entonces puedes tener columnas, no solo en el marco padre sino dentro de marcos secundarios, como ocasiones especiales como esta. Hagamos eso. Otro, ordenaste el inicio con el nav fijo izquierdo. Entonces saltemos una tierra móvil ahora y se le da la tecla F. Y vamos al escritorio. Y voy a elegir el tamaño genérico de escritorio y lo voy a poner aquí abajo. Bien, lo que queremos hacer es que no queremos la cuadrícula genérica de 12 columnas. 12 columnas es una muy buena cuadrícula para escritorios. Y voy a hacer lo mismo. Dios va a tener 24. Voy a tener un margen de la, a, tal vez un poco más. 40. El problema es, es que necesito este nav izquierdo fijo. Entonces lo que quiero hacer es cambiar a, para acercar. Usemos la tecla F para diseñar mi navegación. Bien, entonces voy a un tamaño fijo. ¿Qué tan amplio va a ser? Podría estar usando la cuadrícula de ocho puntos. Puedes escribir lo que quieras porque es un ancho fijo. No va a cambiar dependiendo de las distintas computadoras que van a estar viendo. Esto necesita cambiar. Esto no necesita ser de un tamaño fijo para ajuste a todo lo que necesitamos aquí. Entonces, ¿qué haces con esto? Entonces lo que voy a hacer es darle a esto un color de relleno, escoger cualquier cosa, siempre y cuando este verdoso. Y lo que voy a hacer es copiar y pegar ese estilo, o podríamos eliminarlo, pero voy a seleccionarlo aquí. Estábamos en el borde pequeño, pero ahí Copy. Lo borraré de esto. Y lo que voy a hacer es que voy a agarrar el marco y voy a sacar una caja que entre aquí. Ya ves lo que vamos a hacer. Se lo va a aplicar hasta aquí. Entonces necesitas salir del modo de aplicar cuadrículas solo al fondo, pero puedes editar a fotogramas individuales Entonces vamos a golpear a Paste. Y por qué no quiero estar seguro es que está haciendo constreñir a izquierda y derecha Éste no va a constreñir y preguntarse que esto sea un fijo, así que va a pegarse a levantar Y lo que podría hacer es hacer arriba y abajo. Entonces se estira igual con este, arriba y abajo. Ahora tenemos un Nav izquierdo fijo, N columnas elásticas en este lado Bien, eso es Rejillas de diseño con marcos secundarios, no solo el padre general Bien, ya tenemos nuestra grilla arreglada hecha, vamos a meternos en otra cosa. 24. Proyecto de clase 03 - Event Branding: Hola, Es tiempo de proyecto de clase. Quiero que crees una pequeña marca. No vamos a gastar, no es una clase de Branding, pero tengamos algo único para todos nosotros que cuando estemos avanzando, estamos construyendo algo que podamos usar en nuestro portafolio y luego lo hará cuando lo compartamos. Pero no todos haciendo tecno limerick. ¿Cómo conseguimos un poco de variedad? Y usamos en tus proyectos de clase, habrá un enlace a este proyecto aleatorio generator.com Lo hice con el equipo de Bring Your Laptop para que puedas obtener un brief generado. Bien, así que ve a él, ve al Figma Avanzado y mejora el tipo en tu pueblo, tu pueblo, tu ciudad No importa. Bien, y entonces deberías presentarte limerick y luego un género musical y solo usa el que te da Te ayudará a impulsar tu capacidad para trabajar en proyectos que pueden ser el jazz no es mi favorito mío, jazz, pero teniendo algunas restricciones aquí, supongo que me ayudaremos a definir cómo es la app en lugar de simplemente hacer las mismas cosas de siempre en mi portafolio. Así que usa esto como tu nombre y este es el logo. Entonces, qué usaremos una marca de logotipo y no tienes que pasar demasiado tiempo en ella o puedes. Así que solo puedes usar un icono para mi pájaro, un ícono gratis. Te voy a mostrar el siguiente video y un widget interesante. Para obtener iconos gratis, obtienes puntos bonus si pasas algún tiempo y confeccionando tu logo, pero en realidad diseñarlo tú mismo, eso sería súper increíble si te puedes dar algo de tiempo para diseñar, en este caso, logo oficial para limerick jazz Entonces tenemos nuestro resumen, tenemos nuestro nombre, bien, y quiero que hagas un logo, ya sea un ícono de stock gratis o diseñes el tuyo propio. Y luego quiero que escojas algunos colores. Eran como tres colores básicos. Vas a necesitar color primario, secundario y neutro. Es posible que tenga un tercer tipo de color de acento adicional aquí, así sucesivamente. Depende de ti. Terminé con esto. Mi primaria. Mi secundaria va a ser mi color neutro. Yo tengo esta. No es mi color de acento, este es mi color de interfaz. No hay que tener esta. Simplemente me gusta tenerlo como el fondo aquí es ese color de interfaz que vimos antes. Es para que pueda poner cosas blancas por encima y se destaque un poco más. Eso es opcional para ti. Hay un montón de lugares para ir a buscar muestras de color, bien, unos colores que funcionan juntos Le he puesto un link a Adobe Color, que uso mucho. Si quieres profundizar más en el color, he dejado dos enlaces aquí para el sistema de materiales más antiguo, el sistema diseño y la versión M3 más nueva. Podrían ser una salida M4. Ahora, ve a revisarlos. Si quieres sumergirte un poco más, es mucho más detalle y lo voy a hacer en este video, pero lo mínimo es solo escoger tres colores. ¿Cómo obtuve mis tres colores? Yo sólo fui a moodboard, astillé uno. Bien. Y tenía un montón de cosas y yo estaba como, estaba mirando a mi alrededor y recién comencé a elegir eso con la herramienta cuentagotas así después de que la herramienta Rectángulo sostenga Shift, así que es un Entonces tuve la tecla I en mi teclado y viento. Eso me gusta. No. ¿Recuerdas que los obtuve de Dudo que los conseguí? No creo que los tenga todos del mismo lugar. Y entonces creo que los cambié, pero yo mood board es una buena manera de tal vez salir de esto. Yo, a veces son simplemente sacarlos directamente de una imagen porque solo hay una imagen realmente genial con algunos colores geniales y estás como, Oh, ahí tienes. Así es como conseguí los míos. Bien, entonces necesitas tu logo, necesitas colores y entregables son tres capturas de pantalla de tu brief Puedes capturarlo o hay una descarga como PNG. Y luego quiero ver tus opciones de color y el logo en tu Nav, bien, así que si los arreglas muy bien aquí, puedes tomar una captura de pantalla de todo esto, ¿de acuerdo? Y eso sería perfecto si tu nombre se alarga. Entonces terminas con como música clásica y es muy larga. Se puede utilizar un acrónimo. Entonces fue la música clásica de limerick. Yo también estoy feliz por eso. Elige una fuente a tu altura. Hablaremos de fuentes más adelante, o al menos entraremos en tipografía mucho más avanzado más adelante en el curso Nos pondremos en color, más avanzados también. Pero por el momento, elige algunos colores, haz un pequeño logo o simplemente usa un ícono de stock gratis como lo hice yo, cárgalo y te veré en el siguiente video. 25. Logos con Iconscout: ¿cómo crear logotipos en Figma con Iconscout?: Hola a todos. En este video te voy a mostrar cómo hacer un logo de marcador Y vamos a usar, o he usado nuestro icono de este plugin aquí. Podría, Iconscout no puede ser una marca registrada porque es un icono gratuito de Internet, por lo que cualquiera puede usarlo, pero va a hacer muy bien para nuestra pieza de cartera aquí Además, conseguir algunos de estos íconos puede ser un poco complicado. Entonces voy a demostrar que eres algunos, es posible que te hayas topado con algunos problemas. Y el último video, quiero mostrarte cómo tomar algo como este pájaro aparentemente simple que en realidad tiene bastante agrupamiento y enmascaramiento pasando. Te voy a mostrar cómo no me gusta, smoosh que se convierta en una víctima realmente simple Podría ser un poco más fácil de usar. Además le dará al ave de Mohawk también hará nuestro top nav o componente, además de poner un logo ahí también, que también será un componente Bien, vamos a ponernos en marcha. Bien, entonces el icono que uso, o al menos el plug-in que utilicé se llama Iconscout Podemos sostener turno para abrir aquí este panel de recursos. Y simplemente quedará por defecto a lo que sea el último que hayas seleccionado. Así que ese turno yo tanto Mac como PC, y se puede ver el Iconscout Ahora bien, Iconscout podría no ser el más popular cuando buscabas Bien, yo uso, a veces también conduzco. Hay muchos plugins de iconos diferentes de la forma en que elijo suyo generalmente solo miré para ver usado por cuántas personas? Cuando algo está siendo usado por solo unas pocas personas, siento que no es tan bueno como el que usan las cargas. Entonces no es una gran medida. Pero de todas formas, voy a usar Iconscout y luego vamos, bien, ahora con Iconscout y la mayoría de ellos, hay una opción gratis y premium Así que voy a ir a liberar y escribí pájaro. Y me desplazé para siempre y finalmente encontré mi chico en alguna parte, abajo en alguna parte. No puedo recordar. Pero lo encontré. Ahí está. Hola. Lo genial de estos es como que escojamos otro al azar. Escojamos a este tipo. Se ve genial. Vamos a echarles un vistazo. Ahí está el creador o radio. Muchas gracias. Y muchas veces es parte de un paquete. Si buscas otros animales u otros íconos en estilos similares , muchas veces puedes ir a la manada y echar un vistazo y decir, Oh sí, la pequeña corona en esta aplicación en particular significa que pagó. Entonces están regalando algunas cosas gratis. Pero si quieres todo el paquete de cuento de hadas, puedes ir Pro y decidir si eso vale la pena para ti. Mucho más fácil que dibujar todos estos. Una cosa que voy a hacer es meternos en ello. Y éste, tiene un SVG y un PNG. Voy a insertar el SVG, bien, y recojamos otra vez el buen pájaro de otro. Gratis, no lo es, bueno, solo voy a usar a este tipo, es libre. Entonces volvamos a hacer esto. Te voy a mostrar la diferencia entre estos dos. miré antes y son un poco diferentes cuando no has hecho mucho dibujo en Figma, eso puede ser un poco complicado Éste, es fácil. Miro. Así que tengo estos dos marcos de inserción de pájaros dentro de este uno es simplemente demasiado, hay un dibujo vectorial y luego hay un conducto para ese PSI que es bastante fácil de entender y empezar a manipular y decidir en realidad, no quiero el ojo Haga clic en él. Puedo apagar el globo ocular. Te vas adiós yo por uno y haz doble clic en él y agarra lo oculto. Digamos que necesita un mohawk de pato. Perfecto. En este caso se puede ver que se está recortando de la parte superior Entonces voy a hacer click en mi marco. Y voy a decir, no corten los contenidos. Y lo que podría hacer con el marco es que puedes ver aquí, esta opción aquí es, es redimensionar para que quepa, cambiar el tamaño de mi marco para que pueda caber todos los bits dentro Este es bastante fácil. Este es más difícil. Para echar un pequeño vistazo al interior. Vamos a acercar el turno a. Y dentro de este marco, Coppard es path group, ¿de acuerdo? Dentro de este grupo hay otro grupo. Y dentro de este grupo hay un montón de vectores diferentes que son bastante fáciles de entender. Había una mezquita pasando aquí, ¿de acuerdo? Pueden complicarse mucho dependiendo de quién los dibujó. Entonces lo que podemos hacer sólo para, como, me parece fácil solo ir a seleccionar en él, el marco padre, hacer clic derecho en él y decir, vamos a aplanar este comando E. Cualquiera hace eso de manos en alto desde Photoshop Sólo un smoosh, todas las capas juntas. Sigue siendo vector, lo cual es genial. Es solo el Victor ordenando. No hay tantos grupos sobre grupos y grupos engarzados. Depende de ti. Dependerá de tu experiencia Figma. Mi uno tiene un borde negro ahora lo voy a hacer es hacer doble clic en él para ir dentro de mi vector. Voy a dar click en la parte exterior. Puedo cambiar, hacer clic en todas las esquinas, o simplemente puedo presionar Eliminar y eliminar de nuevo. No fui a patear más. Bueno por marco padre. Y ahora voy a dar click Listo. Acabo de conseguir esta cosa más simple que entiendo un poco más depende de ti. Command Option P abrirá el último plugin que hayas usado en una PC. Es Control Alt P lo abrirá. Lo último que quiero que hagas es cambiar uno. Veamos qué estamos haciendo aquí, que si T2 es mantener pulsada la rueda de desplazamiento Comando o Control. Y echemos un vistazo a esto. Voy a convertirlo en un componente. Mi componente está por aquí, mientras que tú ahí son ellos. Bien, es mi componente principal. Voy a conseguir que se ajuste al marco. Y en lugar de simplemente llamarlo logo, llamémoslo marca de logotipo. Y el mío es frío, limerick techno. Bien, entonces, ¿cómo componentes fuera de su primer fotograma Ponlo aquí en un comienzo de un top nav, asegúrate de que nuestras cuadrículas Entonces Shift G, K, y solo asegúrate de que este marco aquí para mi fondo esté encajando a mi cuadrícula de 16 puntos Encuentra algo que funcione para ti, encuentra un tamaño de logotipo que funcione para ti. Y posición sabia o que se ve bien. Shift G, apágalos. Todo esto debería ser un componente. Entonces, la opción de comando K, la opción de control K, se llama herramienta de marco, se llama a esta , nav guión superior Bien, y deberíamos guardar el original por aquí y volver a poner una instancia por aquí. Tenemos lo último que voy a hacer antes irme es que mi Zoom es hacia atrás, así que uso mi rueda de desplazamiento, como mencioné anteriormente, voy a Comandar hacia abajo o controlar en una PC, puedes usar una rueda de desplazamiento para entrar y salir La mente está operando hacia atrás. A todos les gusta la rueda de desplazamiento para hacer algo diferente. Estoy acostumbrado a que me moleste ir por el otro lado. Entonces voy a ir Figma o preferencias. Podemos ir aquí e ir a Preferencias y placehold invertir dirección de zoom Eso es lo que quiero porque prefiero hacerlo de esta manera. Es solo, significa que cuando todo lo que he hecho es conmutar la forma en que va el zoom. Entiendes, ¿verdad? Entonces ahora, cuando me desplace, mi rueda se acerca en lugar de un Zoom out, que de todos modos no se sentía bien Bien, así es como obtuve mi logo. Todo lo que realmente necesita hacer es asegurarse de que su logotipo y su Nav sean dos componentes separados. Bien, siguiente video 26. ¿Qué son los widgets en comparación con los complementos de Figma?: Hola a todos. En este video veremos la diferencia entre plugins, plugins poco tradicionales de Figma , y estos widgets nuevos, elegantes, novedosos y elegantes. ¿Por qué tenemos dos de ellos? Te voy a mostrar la diferencia, y te mostraré un par de mis favoritos. Vamos a ver éste. Estilo automático de color, agradable. Bien, las amplias diferencias generales es que los plugins hacen más Los widgets son criaturas bastante simples. Los plugins tienden a hacer cargas y montones de cosas potencialmente. La otra cosa es que solo puedes tener un plugin, abrir, editar momento y widgets. Puedes tener lotes abiertos a la vez porque son livianos. Los plugins generalmente aparecen como este pequeño icono uno. Iconscout aparece en su propia pequeña ventana y produce cosas para tu lienzo Entonces cuando terminaste con él, lo cierras, mientras que los widgets viven en tu Canvas, bien, y puedes haberlos llevado a que se abran. Entonces abramos este de aquí. Todo esto lo hace, bueno. A veces terminan en lugares extraños. Entonces las mentes terminaron atadas a esto y está atrapada ahí dentro. Esto trae a colación un buen punto. Widgets en ti. Y agregan desarrollados por mucha gente diferente, todas con diferentes habilidades. Y algunos de ellos se actualizan todo el tiempo para mantenerse al día y algunos de ellos no lo están. Entonces voy a compartir un par de aquí, pero a veces simplemente no funcionan. Este lo hace normalmente, pero muy a menudo termino dando smooshed aquí y en realidad no puedo encontrarlos Opción, haga clic en la cosita ahí dentro que está escondido. Entonces, si mantengo Option en una Mac, alt en una PC, y hago clic en el pequeño chevron, es derrama entonces todo lo que pueda decir en realidad solo sale del aire y ven aquí por A veces con plugins y widgets, tienes que cerrar Figma y abrirlo de nuevo antes de que funcionen correctamente y todo el tiempo Pero me he topado con ese problema mucho. Este de aquí solo te permite escoger una fecha. La fecha en la que has hecho algo funciona tanto para FIG Jim como para Figma. Y es genial. Está en un ángulo. Se pueden elegir diferentes ángulos. Puedes elegir una fecha diferente. Bien. Podría ser toda la fecha para completarse. Se terminó la fecha, el día en que la vas a entregar, compré. Lo bueno de esto es que ahí se pone un pequeño icono dulce. Bien, es mi pequeño widget, pero puedo tener más de un turno. Abro los recursos y ahí está, ahí. Vamos a usar este en el siguiente video, generador de niveles de color. Es increíble, bien, y vive en la lona. Y mientras que los plugins generalmente producen algo que se hizo en el lienzo se acaba de producir y está terminado. Estos son dinámicos. Puedo cambiar la fecha y eso se ajusta. Y este de aquí, puedo cambiar los colores y se ajusta. Es dinámico. Es hacer algo ligero, pero es hacer algo. Puedo guardar estos estilos en mi biblioteca de estilos. Todo es muy genial. Entonces por eso tenemos plug-ins y widgets. Ojalá solo los aplastaran juntos porque siento que los términos hacen lo mismo Pero ahora todos sabemos que puedes tener múltiples widgets en el lienzo a la vez, plugins, solo uno abierto a la vez. Pero generalmente pueden hacer cada vez más potencia de procesamiento, widgets, cosas ligeras, simples. Y por último, antes de ir atajo, ¿Quién recuerda abrir el último plugin que usaste? Si aún no lo has hecho, encontraremos un plugin que conoces y te encanta y que usas todo el tiempo. Esto se convertirá en un práctico atajo. Te lo prometo. Así es, es Command Option P en un Mac, Control Alt P en nuestro PC, vas, No hay tal para el plugin. Oh, una última cosa sobre los plugins. En realidad puedes copiarlos y pegarlos. Tienes dos de ellos. Tengo dos del mismo plugin ahora, necesito que estos se unan a dos de ellos. No realmente, probablemente necesite cargas son estas aunque. Bien, ahí tienes. Plugins versus widgets en Figma 27. ¿Cómo crear variantes de color UX con un Widget de Figma?: Hola a todos. Vamos a crear algunas variantes de color a partir de nuestros colores primarios, secundarios y neutros. Solo así tenemos algunas variantes de estos colores para diferentes situaciones a lo largo de nuestro diseño de aplicaciones, vamos a usar este widget aquí llamado generador de niveles de color. Es práctico, crea estilos. Te voy a mostrar como ordenar tus estilos a veces es esta cosa produce un poquito demasiados. Y hablaremos brevemente sobre lo que significan estos números o. Bien, hagamos algunas variantes de color. Shift I, voy a estar usando un widget llamado generador de niveles de color. Este es uno que me gusta, pero hay que recordar en el futuro puede que ya no se apoye. Puede que ya no esté funcionando. Figma, poderoso cambio. Podrían ser uno mejor ahí fuera. Entonces esto es solo un por ejemplo, bien, así que estoy usando el generador de niveles de color. Y lo voy a poner aquí. Fuera del camino. La forma en que funciona esta es que voy a agarrar mi color primario. Voy a pegar eso aquí. Voy a ver que hizo todas mis variantes de color. Mira eso. Quinientos es el color principal, ese es el que he escrito Y luego hay menos, y luego hay más en lugar de ti, como hicimos en el curso Essentials, simplemente nos gusta bajar el brillo y levantarlo Este, voy a agregar un nombre de color. Este va a ser mi color primario. Lo bueno de esto es que se ha utilizado una convención de nomenclatura muy buena Esto sería muy típico en el diseño web tanto para los colores de fuente como para los pesos de fuente. Utilizan este tipo de estilos. Quinientos es el medio, y tienes como 1,000 sería una fuente muy ligera y 900 sería tu fuente negra Bueno, podemos hacer es que también puedes golpear Guardar estilos. Eso es lo genial de los widgets. Estas cosas en realidad están haciendo cosas. Y puedes ver por aquí, o mis estilos, lo mejor si tienes esta seleccionada, puede que no estén ahí. Así que haz click en el fondo. Escapa cuando teclados, mira color primario y ahí tengo todos mis colores. Ahora bien, esto es probablemente demasiado detalle de lo que necesito. Lo que tiendo a hacer es hacer esto. Ya ves que corté todos los del medio, así que volvamos. Entonces no quiero 50, es a la luz. 100 es mucho como yo quiero. No quiero cien, no quiero 400. No quiero 600. No quiero 800. Te puede gustar no hay regla para ello, pero me parece que es un spread suficientemente bueno para mí. Voy a hacer los otros tres colores. Simplemente puedes duplicar estos como duplicar cualquier cosa. Mantengo pulsado mi tecla Opción en una Mac, tecla alt en una PC para arrastrarla hacia afuera. Y voy a añadir mis otros colores. Voy a conseguir que el editor acelere esto. A la vez que lo aceleran. Agregué mis estilos y vaginalmente y los llamo primarios, el tipo de anulado mis estilos de color Entonces me olvidé de cambiar el nombre. Voy a deshacer, deshacer, deshacer, y solo asegurarme de que cambies el nombre porque anuló mis números primarios originales en mi estilo Entonces deshacer. Bien, este es mi color secundario. Guardar estilos. Escapar es mi primaria que los salve, ellos hace. Ahora vamos a acelerar y hacer la última. Buen exceso de velocidad Dan. Bien. Como los otros, me voy a deshacer de Ew, Ew, Ew, Ew, Ew, Ew Acabo de tener numeración extraña aquí, lo mismo con esta, mi velocidad secundaria, la velocidad. Ahora bien, estos podrían colorear estilos cuando los estés usando, Digamos que tengo mi lección. Él lo describe. Si herramienta para la herramienta de marco, arrástrela hacia afuera y cuando estés por aquí, bien, mis colores de relleno, voy a golpear mis estilos de rellenos. Y puede llegar a alargarse un poco dependiendo de cuantos hayas llegado hasta aquí. A veces es agradable solo escribir 500. 500 es ese estilo medio, ese es el todo color. Puedes ver aquí ahí está mi color primario. Recuerda quinientos es el que elegí y todo lo más bajo es un poco más brillante Todo lo que está por encima es un poco más oscuro. Entonces contigo, solo puedo escribir 500 aquí y solo me va a dar mi, solo cortarlo a un nivel más manejable Lo último que quiero hacer es agregar el color de mi interfaz, y no voy a hacerlo a través de esto. No quiero que todas las diferentes variaciones sobre su quiera editar como un estilo. Y a éste se le va a llamar Interfaz. Puede que no tengas esto. Lo que notarás es si hago click off en el fondo, te tengo. Pero todos estos tipos en grupo. Ahora, estoy contento con eso. Y solo para recordarte, puedes reordenar estos dependiendo cómo, ya sabes cuál has puesto , bien, así puedes decir, bien, Secundaria primero, estamos por si acaso te equivocaste Primaria, secundaria, y voy a tener neutral en la parte inferior. No puedo hacer que la interfaz baje por la parte inferior ahí porque es un grupo de colores separados en la parte inferior, colores individuales en la parte superior. ¿Algo más? Una cosa es que esta en particular no funciona muy bien. Si no tienes el hash delante de él, es un poco solo si tecleo digamos, si, si si si un poco simplemente no sabe qué hacer, por defecto a lo que era antes Así que asegúrate de lo que entra el hash y necesitas estos. Ni siquiera los borras. Entonces está limpio en el marco. Vete, vete, vete. Bien, así que tenemos algunos de nuestros colores, pero ahora también tenemos variantes de color Dame útil para construir nuestra aplicación. Bien, En el siguiente video. 28. Introducción a la sección de diseños automáticos anidados y adaptativos: Hola a todos. Oye, estoy fuera de la computadora. Oye, quería saltar porque quería presentarte esta siguiente sección. Los pros y los contras de ello, vamos a entrar en diseños de anidamiento y Responsive Auto Ya sabes, lo que son el diseño automático es ahora que vamos a empezar a colocarlos uno dentro del otro y luego uno dentro del otro. Y luego más que, más que más de ellos. Restricciones. Y va a ser razonablemente Avanzado. Algo bastante complicado componente, que es increíble, genial de aprender. Y va a ser responsable de diferentes dispositivos. Y va a hacer que sea muy difícil para alguien estropearlo en tu equipo o en tu futuro yo. Este poco de trabajo por adelantado para hacerlo. Déjame mostrarte lo que vamos a hacer antes de darte los contras. Entonces déjame mostrarte lo que estoy haciendo. Bien, así que esto es lo que estamos haciendo. Es una Tarjeta de Evento. Y lo genial de esto es que vamos a hacerlo una manera que sea responsive significa puede ajustar exactamente ese mismo componente aquí no es un formato diferente, mismo componente, pero puedes ver las capas diferentes. Este tiene el texto arriba del precio madrugador que éste. Puedes ver que incluso hemos cambiado el precio de la oferta anticipada para que esté a la izquierda y a la derecha. Y es súper receptivo, lo cual es realmente genial. Entonces vamos a hacer algo que esté un poco avanzado en la meta de que sea bastante resistente para que otras personas lo usen. Podemos usarlo Bueno y todos los tamaños diferentes. Y en los términos de este curso va a ser muy útil para entrar ahí y aprender a poner una S y una cara dentro de nidos Y algunas de las complicaciones que lo acompañan. Podemos hacer cosas geniales con un decir en realidad, quiero que seas de la talla más grande. Te voy a ir, y voy a decir en realidad sea de ese tamaño más grande con un diseño diferente. Pero cuando hicimos este diseño, me gustaría que esto estuviera en la cima o tal vez simplemente nos deshagamos de todo juntos. Bien, entonces un solo componente realmente genial con mucha flexibilidad. Entonces hay como tres razones por las que quería hacer esto como un pequeño video de interludio Una es mostrarte lo que estamos haciendo porque bastantes videos antes de llegar a algo realmente genial. Hay mucho aburrido, pero es que sí, voy a hacer algunas cosas. Vamos a una es que quería mostrarte lo que va a hacer. Lo siguiente fue, es que quería hacerles saber que los siguientes videos son en realidad solo videos de producción mecánica a colon. De hecho, solo estamos haciendo algunas cosas para usar en los futuros videos. Vamos a estar dibujando cajas y haciendo autolayouts realmente simples para obtener todos los componentes Entonces, si estás siguiendo, míralos , construyes el tuyo. Si solo te estás saltando hasta allí, dame las cosas avanzadas, puedes saltarte algunos videos Ve al video llamado anidar múltiples autolayouts, 60 nombre, bien, y eso te llevará directamente a las cosas de creación real y puedes saltarte el cosas de creación real y puedes bit de creación de activos, pero omítelo bajo tu riesgo a menos que tu avance puedas omitirlo menos que tu avance puedas La otra cosa que quería hacer era hablar de lo que estamos construyendo va a ser probablemente muy complicado. Vamos a pasar algún tiempo en la maleza consiguiendo que esta cosa funcione perfectamente y sea ajustable. Y es genial para este curso porque nos va a permitir empujar nuestros límites de lo que sabemos y lo que realmente podemos hacer. Pero en el mundo real, a menudo y UX, como una buena UX, lean UX se trata de ir rápido. Por eso Figma es increíble Se trata de prototipado rápidamente y sacarlo y probarlo y entrar en desarrollo No hacer demasiado complicado. Y componentes y variables. Hay momentos para eso, pero supongo que solo quería tirar eso aquí. Cuestionario. Algunas personas van a estar como, nunca voy a ser capaz de hacer todo así. Y tal vez no tengas que hacerlo. Pero habrá momentos en los que las cosas tengan que estar al menos cerca de esto porque van a ser reutilizadas o entrando en un sistema de diseño o trabajando con un equipo enorme con mucha gente Pero eso no es todo el mundo en todos nosotros. Esa es la razón por la que está aquí el video de introducción. De hecho, solo hagamos la cosa. Y ¿por qué dije que hicieras la cosa? Vamos a hacer las cosas para la cosa el próximo par de videos. Y luego nos sumergiremos en super nerd auto Layout. Bondad 29. Video de producción: ordena mi desorden de armazón y componentes: Hola a todos. En este video vamos a ordenar este gran lío viejo que se inició. Este video es totalmente saltable si quieres, porque solo voy a ordenar los componentes, cubrirá algunos atajos, pero solo los que ya conoces Sólo voy a configurar un poco lejos de mis componentes principales. El momento que se duplica en todas partes, bien, esto es a lo que me refiero Voy a poner todos mis componentes principales dentro de este contenedor, bien, de un teléfono para que sea más fácil de diseñar. Voy a mover esto solo para que las cosas no estén en todas partes. Y así puedo usar mi dulce atajo que aprendimos antes en, en, en, en, en, en lugar de usar antes, entramos y simplemente volamos alrededor de todos los marcos que tenía tirados por todas partes. Eso es lo que vamos a hacer. Oh si, vamos a hacer que los iconos sean púrpuras. Bien, hagámoslo. Bien, voy a empezar con sólo hacer un marco viejo y grande por aquí Y vamos a llamar a éste componentes principales. Voy a darle un color de fondo. Esto es un buen contraste con el teléfono. Yo algunos grandes los fáciles. Así que las mediciones pueden entrar aquí. Se va a asegurar que esté dentro de mi marco de componentes principales. Bien, puedes bajar por aquí por el momento. Los colores también pueden entrar aquí. Estos componentes pueden atravesar. O van a ir apretando ahí. Y si cambio a y me acerco, solo puedo ordenar estos un poco. A lo mejor este es un componentes rectos, pero son componentes principales, lo cual es bueno. Si uno, qué más puede repasar eso puede ir en la papelera. Eso fue sólo un ejemplo. Estás como, Oye, yo no haría que puedas quedarte con todas las otras cosas que necesitamos Lo que me gustaría hacer es esto, esto, y esto no son muy útiles y luego simplemente tumbarse solos, especialmente cuando estás tratando de diseñar tu Tarjeta de Evento. Tienes que decirlo, o voy a diseñarlo por aquí. Pero tengo que estar vigilado por aquí. Eso no es bueno. Entonces lo que voy a hacer es crear un lugar donde todos mis componentes principales puedan vivir separados de mis teléfonos de producción por aquí. Yo sólo voy a tener uno separado por aquí que sólo va a contenerlos. Mis componentes principales van a diseñar por aquí y simplemente se reflejan por aquí. Sólo estoy duplicando éste. Bien. Voy a tener que hacer todo esto mucho más grande. Agrega tus propios efectos de sonido. Voy a usar esto ahora. Es mi marcador de posición. En el momento en que puedes ver se llama iPhone 14. Voy a llamar a esto componentes de una aplicación. Dentro de aquí, tengo instancias y no quiero Instancias, no te quiero, quiero que mi componente principal se esconda aquí para que cuando haga diseños, se refleje en todas estas otras páginas. Entonces lo que puedo hacer es que puedo decir, quiero cortarte mi componente principal y quien quita ese dulce atajo donde queremos cambiar esto, quiero pegar para reemplazar incluso recordar lo que es. Es Command Shift R en una Mac, controla Shift en una PC. Ya lo tienes. Bien, entonces acabo cambiar esa instancia por mi componente principal. Voy a dar vuelta a todas mis cuadrículas. Quién recuerda el atajo para el desplazamiento de cuadrícula G, Si golpeas Mayús H, lo hago todo el tiempo Mira, Shift H, voltea horizontalmente, golpéalo todo el tiempo por accidente, Shift G. Bien, así que ahora puedo alinear esto y decir realmente te quiero ahí. ¿Ves por qué hago esto? Es para que cuando haga ajustar esto ahora y digo en realidad quiero que este sea Dover aquí. En realidad se refleja en mis diferentes marcos de producción. Esto es igual que el control sobre todos ellos. Y porque lo he estado haciendo porque en realidad está dispuesto en un teléfono, realidad puedo obtener el espaciado y todo correcto. Lo mismo con esto de aquí abajo, esta es una instancia porque la duplico aquí. Quiero mi principal o el escondite. Hay estos en este. Así que voy a cortarlo también y usar ese mismo dulce comando de atajo Shift o Control Shift down en un cambio de PC a y ahora él es ese componente principal. Entonces cuando estoy haciendo cambios de diseño, nuevo, empiezo a meterme con cosas. De hecho, está haciendo todos estos tableros de aplicaciones diferentes. Ese de ahí ni siquiera está cambiando. Oh, tiene algunas anulaciones sobre él para el más grande. Ahí vamos. ¿Qué más tenemos? Esto necesita tener un hogar. Es un MainComponent Y cuando lo corte, voy a hacer click en esta instancia aquí, comando Shift, Control Shift en una PC poniéndose enfermo o no son turno nuevo para, entonces vas, él es un logo y como que golpeaste por el medio. Qué hace eso es el atajo de cuadrículas para cuadrículas, Shift G, nada Shift H. Bien, es echar un pequeño vistazo Ahí está mi último teléfono Android. Tengo este marco gigante aquí arriba. No necesito seleccionarlo y eliminarlo en clave. ¿Qué tenemos? Tengo componentes principales y luego solo mis tres teléfonos de producción aquí. Impresionante. Lo voy a hacer es que MainComponent mantenga pulsada la tecla Option en una Mac, tecla alt en una PC para obtener ambos lados Porque quiero un poco de lo que estos sean aquí abajo. Solo son un poco más útiles para poder verlas mientras estoy trabajando en todo esto es cerrar. Por favor, déjeme ir. Y ahora es raro, no está alineado. Ahí vamos. Lo último que quiero hacer antes seguir adelante es que quiero, podría hacerlo a las Instancias, pero en realidad quiero hacerlo a estos componentes de aquí abajo. Mis componentes principales puedo querer hacer entonces mi color de selección, quiero usar mis colores de documentos, colores locales. Quiero usar esa. Entonces cambian todo a través del documento. Ahora que tenemos algunos colores con los que trabajar. Bien, eso es todo para este video. Un poco de ordenar. ¿Hago esto a medida que voy? No, termino llegando a un punto en el que estoy como Este es Macy necesito arreglarlo y luego lo ordeno. O cuando tengo que compartir mi archivo con alguien más, entonces lo ordeno y paso por cosas y de repente nombrando cosas. Hasta entonces puedo ponerme un poco desordenado de todos modos. Bien, eso es todo. Lo voy a ver en el siguiente video. 30. 30 Plugin de Unsplash: todos, vamos a traer imágenes usando mi complemento de imagen favorito llamado unsplash Me preguntan mucho cuáles son los mejores plugins. Este es uno de mis favores, es bastante fácil de usar. que configuramos esto aquí así que se esparce en el fondo. Hay un poco más de información sobre las imágenes, no solo algo así como cómo ponerlas en una página, sino si te sientes cómodo con imágenes y unsplash de las que has oído hablar antes, sigue adelante y omita este video Quiero guardarlo aquí porque estamos construyendo algo. Todos estamos en diferentes niveles. Y además si estás razonablemente, ya sabes, sabes como que sabes lo que estás haciendo, tal vez solo salta al final de este video. El editor va a poner el código de tiempo aquí arriba, bien, donde lo rompo. Y por alguna razón cuando cambio esto, todo esto no cambia, ¿de acuerdo? Y voy a arreglar ese problema que tengo. Eso podría ser interesante para ti si lo tuviste antes, y si no lo has hecho, probablemente lo tendrás en el futuro. Así que vamos a agregar algunas imágenes a nuestro diseño. Bien, comencemos usando un enchufe. Bien, voy a usar el enchufe. Es muy común que las imágenes de stock gratuitas usen unsplash hasta usted Hay muchos de ellos por ahí. Este es realmente bueno, ¿de acuerdo? Y lo que estoy buscando es encontrar una imagen que se ajuste a tu tipo de resumen en el que tienes tu país, tipo occidental que en, ¿bien? Podrías ser creativo dependiendo del género que tengas. Garrapata. No, tienes suficiente, bien. Cuando estás trayendo imágenes de como cualquier tipo de enchufe, realmente unsplash incluido. Probablemente, hay dos formas, ¿verdad? Puedes simplemente hacer clic una vez y obtienes esto como versión gigante grande. A veces pueden ser realmente grandes. Entonces es más fácil bajar primero un marco y luego hacer clic en ellos si quieres saber qué. Bien, para que puedas tener una imagen por sí sola. Puedes tener una imagen dentro de un marco, lo que te da puntos extra de bonificación. ¿Bien? Te da cosas como diseños de auto que es solo una imagen vieja y simple, no lo hace. Ahí vas. La otra cosa que puedes hacer es que puedes tener un marco dentro de mi componente. Entonces voy a intentar arrastrarlo dentro de esto. Adiós. Así que encima, mira, bien. Y hay dos formas en las que podemos hacer que esto suceda. Puedo intentar meterlo dentro de aquí cuando es demasiado grande, realmente no sabe a dónde ir. Encuentro que es más fácil hacer las cosas más pequeñas y luego saltan dentro de mi componente de evento de tarjeta más fácil. Bien. Antes simplemente se sentó encima de él. Así lo puedo hacer de dos maneras. Puedo tener la imagen en la mitad superior y tener mi tipo de cosas abajo. O tal vez pueda tenerlo funcionando completamente ahí, moverlo hacia atrás, y tal vez tener esta cosa un poco transparente. Creo que eso es lo que quiero hacer. Realmente no importa, excepto la forma en que lo voy a exponer. Si voy a tenerlo arriba aquí como como una unidad separada, bien, Todavía necesita estar en la parte de atrás. Estoy usando mis corchetes de acceso directo, así que échale un vistazo a tu teclado. Ahí está en mi teclado, al lado de la tecla, abre corchetes cerrados. Eso simplemente lo envía hacia adelante y hacia atrás dentro del componente. ¿Bien? Mi tarjeta de evento o mi componente de evento de tarjeta. Y a veces eso es útil si lo quieres igual que el fondo completo. No hay ningún problema real con eso dejándolo ahí. Pero en realidad podría ser más agradable en lugar de tener esta tarjeta de evento que tiene su propio fondo de verde Y luego dentro de ahí tengo otro marco tipo de desorden Bien. Lo llamaré imagen para que sea menos desordenado, realmente no necesito eso Derecha. Lo que puedo hacer es decir, en realidad sé que mi marco padre, bien, El componente tiene un fondo de relleno. Cambiemos eso por una imagen. Hay algunas maneras diferentes. La forma en que me gusta hacerlo es que voy a dar click en mi imagen y decir, este marco tiene un Phil. Voy a dar click en esta parte. A lo mejor este pedacito de afuera. Bien, déjame seleccionar todo el asunto. Acabo de recibir una copia. Ahora me voy a deshacer de ese marco. Adiós. Haga clic en el componente principal. Bien, mi evento de tarjetas. Y puedes tener dos rellenos que simplemente pegan directamente sobre la parte superior. Todos, algunas personas se han topado con un pequeño problema, solo unas pocas personas, no puedo recrearlo, pero en los comentarios, ha habido una solución para este problema que no puedo resolver Entonces lo agregaré a esto en caso de que te encuentres con él. Básicamente, es copiar y pegar. Si no va de uno a otro. Bien, hay un terreno de trabajo. Lo que estamos destinados a hacer es seleccionar en este marco que tenga este relleno. Creo que uno de los problemas podría ser que es una cosa de PC Mac. El otro es que creo que podría ser que no esté seleccionando esto, bien, Porque se puede seleccionar algo en esta cosa. Realmente necesitas hacer clic en esta pequeña área aquí para que se ponga azul. Luego ve a copiar, haz clic en el bit que quieres que entre y presiona Pegar. Bien. Si eso no funciona, bien, es la solución que Haley ha resuelto Gracias. Hayley está dando click en esto En lugar de simplemente hacer copy, que es el comando C en un control en una PC, puedes ir a editar e ir al que dice copy properties. Usaremos las propiedades de copia y las propiedades de pegado. Ellos han dicho que arreglan sus problemas. Va a dar click en esto y vaya a Editar Pegar Propiedades. Bien, eso me funciona. Y parece que soluciona el problema también. Si tienes ese problema, puedes hacerlo. Bien, continúa con el video. ¿Necesito éste? Probablemente lo dejaré la re si acaso borre la imagen. Bien. Como respaldo, solo tengo que asegurarme de que esté arriba. Aquí vamos. Realmente no importa excepto que eso es más ordenado, sobre todo si se lo entregues a alguien más. Y hay como un montón de marcos que realmente no necesitas. Y este de aquí va a ser la parte inferior de esto. Voy a llamar, en vez de fotograma dos, esto va a llamarse tarjeta inferior. Y va a ser un relleno de mis colores locales, que va a ser mi morado, mis 500. Desearía que fuera una lista para ti aquí, porque entonces o tal vez simplemente surgió para decirte cuál era el nombre cuando te rondaste sobre ella decirte cuál era el nombre cuando te rondaste sobre Estoy adivinando que está en el medio. Parece que 500. Y voy a bajar la capacidad a algo así, 80, 70. Lo que tendrás que hacer es probar con un par de imágenes antes de comprometerte. Bien, esto es muy oscuro. Así que déjame abrir mi último enchufe que usé. ¿Quién recuerda cuál es el atajo? ¿Te acuerdas? ¿Te importa siquiera? Hago opción de comando control opción P en una PC. Eso no funciona si has cerrado Figma abajo, porque no recuerda De alguna manera, no recuerda cuál es el último. Si quieres, apágalo y vuelve al día siguiente, no lo recuerda, está bien. Nosotros te perdonaremos. Tengo que ir a revisar. Solo asegúrate de que encuentre una imagen que en realidad sea la voy a seleccionar aquí. Puedo ver que tengo la correcta. Y hago clic en éste, y el morado está bien. Voy a poder leer además de eso también. Voy a ir a buscar a todos que se supone que sea. Pero estos no se están actualizando. Deberían hacer cambiar el componente principal. Cambia esto. Lo borro y lo agrego de nuevo. No están borrando la extrañeza. Tú esperas ahí. Voy a cerrar Figma y volver a abrirlo. Súper raro. Oh bueno voy a seleccionar esta y voy a ir, así que voy a ir al comando Ford para que vaya a mis acciones rápidas y voy a ir a seleccionar las mismas propiedades. Bien. Entonces selecciona todo en mi documento que haga lo mismo. Te vas, Phils. Ahora si me llevo a Phil Phil, y no es blanco en lo que está pasando, película, realmente no quiero agregar. Estos deben ser primordiales desde el principio. Debo haberles hecho tanto o haber estado jugando que estos no han llenado anulación. Entonces no es escuchar esto. Entonces lo que voy a tener que hacer eres tú, amigo mío, debería hacer mi selección de nuevo lo mismo, pero voy a decir click derecho. Y voy a ir a reasentar Cambios que funciona están todos muertos. Ahora momentos divertidos entonces voy a dejar esto en el curso porque pasan cosas como esta. Bien, ahora debo haber jugado con la película. El tuyo podría estar funcionando. Puede que no me lo haga saber en los comentarios. Pero ahora cuando cambie mi imagen, debería poder ir a Zuck y todos se borran Ahí vamos, hombre, ahora odio esa imagen, escogí antes en el curso. No soy fan, voy a volver a cambiarlo a uno techno cool Bien, así que eso va a ser. Yo, ya veremos en el siguiente video. 31. Video de producción: confecciona piezas para nuestro sistema de asistencia automática anidado: Bien, aquí no hay nada que ver. Ir al siguiente video. Si quieres andar por ahí, vamos a hacer algunas cajas de autolayout que vamos a necesitar cuando nos metamos en algunos autolayouts en algunos Pero estos son simplemente un autolayout viejo para que cuando escribo las cosas y las pongo en diferentes precios, todas se Si sabes cómo hacerlo, puedes saltarte adelante. Aquí no hay nada extra. si quieres andar por ahí y hacerme compañía Sin embargo, si quieres andar por ahí y hacerme compañía, anda por ahí. Hagamos algunos cuadros de texto. Bien, lo primero aburrido es, quiero cambiar el tamaño de fuente aquí, probé esto en mi teléfono, lo eché un vistazo, y la fecha era demasiado pequeña, así que la subí a 14 El siguiente bit es, quiero el Text madrugador, una cosa de pastilla neta con una envoltura alrededor del exterior Entonces sé que quiero el envoltorio por fuera, así que sé que tiene que ser un diseño automático. Entonces, en lugar de depender de que puedas tener métodos, es posible que te escriban en la herramienta Tipo y escribas madrugadores Y luego vas a tomar tiene que ser un diseño automático que no puedes hacer con el texto. Entonces tiene que estar en un marco. Así que voy a obtener la selección de marco con el botón derecho del ratón. Ahora puedo hacer autolayout, OK, y ahora puedo agregar mi relleno y cosas y relleno Bien, para agregar, déjame mostrarte aquí es donde podrías estar haciendo bien? Extraer el acolchado. Ahí vamos. Ese es un método, pero podemos ir al grano e ir T por Type Tool y volvamos a escribir madrugadores. Bien, y solo ve, dale a Escape para cerrar el cuadro de texto. Porque si presionas V para volver a la herramienta Mover y simplemente obtener un escape de V y luego solo cadena de inquilino a un componente porque el componente lo cubre en un marco y un franco se puede tender a un diseño automático Entonces Comando Opción K o opción de control, lo siento, Control Tecla Alt en una PC. Y vamos a ir a los autolayouts. Es un poco más rápido y ya es un componente. Bien, bien, y voy a hacer algo de velocidad diseñe tu peso ahí. ¿Bien? Diseñas el tuyo como te gusta. Se. Simplemente hace que sea un marco de pedido y decía abrazar, abrazar para que cuando el texto cambie, se vuelva a lo largo para el paseo. Bien, hecho temprano. A continuación está el precio. Y como tiene la mayor parte del trabajo hecho, voy a duplicarlo. No quiero una instancia de esto y tratando variantes y esas cosas porque es muy diferente. Así que sólo voy a agarrarlo ahí y romperlo a pedazos. En realidad se llama separar Instancia, pero es carne de res o descomponerla Entonces va una B. Así que eso es Command Option B o Control Alt B de B, descompáñalo, y ahora es solo un auto layout trimestral, raro. No es un gran nombre. Entonces vamos a llamar a éste. En realidad, sólo vamos a poner empresa. Vivo en la eurozona. Entonces vamos a tener 24, 95. Usted pone en su precio. No quiero que me llamen madrugador. Ahora, vamos a entrar en el hábito ahora de usar el atajo de Comando R o el cambio de nombre alfa de control Simplemente en lugar de tener que hacer doble clic ahí arriba. Hagámoslo a partir de ahora, el precio de Dan Wilson. Y voy a moverlo encima de esto, pero no quiero que esté dentro del componente todavía. Bien, entonces, ¿quién recuerda cómo retengo las cosas sin unirme a ellas David mencionó esto todavía, yo le di barra espaciadora de bodega. Se puede ver que en realidad no va dentro de la tarjeta, simplemente sentado encima de ella. Mientras que si no intento volcar, ver por aquí, trata de entrar dentro de ella. Entonces me voy a quedar Barra espaciadora. Es simplemente sentarse encima de las capas. Así que ahora puedo ir, en realidad, ¿de qué color debería ser? Voy a usar mis colores locales y la compra puede usar el blanco. El color del texto no va a ser blanco, pero voy a empezar a usar para gran parte de los colores locales del texto. Voy a usar mi color neutro. Bien, los quinientos, una especie de negro pero un poco no un poco Bien, entonces ahí está, puedes bajar los dos. Voy a súper rápido en realidad solo salta cortado a un par de cuadros de texto Bien, vamos a saltar hasta aquí y puede diseñar consideración blanco se ve bien sobre este fondo oscuro, pero en cuanto obtengan un fondo claro, no va a funcionar tan bien. Y entonces o necesito una sombra muy fuerte o una caja trasera para ello. Y eso es lo que voy a hacer, pero una pequeña caja trasera alrededor de ella, básicamente en orden alto. Déjame saltar cortado hasta ahí. Bien, vamos a saltar hasta aquí Una cosa a notar, recuerda, es que yo no, he hecho un color de fondo. Quiero que se desvanezca, pero todo es solo un marco de pedido Entonces, lo que necesito tener en cuenta no es bajar la opacidad de la capa, sino la Opacidad de Relleno al 50% porque recuerden, la capa baja todo el asunto De todas formas. Vamos a saltar un poco más allá. Bien, ahí vamos. Solo voy a poner un cuadro de texto aquí que es este de aquí es un alto y ancho fijos, mientras que este de aquí es, mientras que es elástica Las palabras no se estiran. A ustedes les gustan las garrapatas dentro de ella. Ahí está, orden de ancho de agrupamiento con, eso es todo, para que pueda escribirse También es buena idea encontrar un título que tenga mucho tiempo. Lo he tenido solo de un sitio de eventos cerca de mí, ¿o debería ser un buen evento? Estoy segura. Pero escogí uno muy largo porque quiero diseñar para un título muy largo. No quiero que me sorprenda eso más adelante. ¿Cuál debería ser Componente? Eso probablemente no solo bloque de texto que no lo hace. Planeo usar esto probablemente varias veces a lo largo de la aplicación y esto también. Entonces eso ya es componente. Esta va a ser una. Entonces Opción de Comando K, Opción de Control, Tecla Alt de Control en una PC, es Componente. Excelente. Bien, esas son las partes que necesitamos para que puedas irte y hacerlas a medida que vamos pasando por el curso, necesito construirlas. No quieren saltarlo. Sí, pero hay algunas personas a las que les gustó seguir el proceso completo, sobre todo cuando estamos haciendo cada vez más autolayouts, vas, tienes que verlo Bien, estamos listos. Es la locura automática de Layout. A partir de ahora, te prometo que te veré en el siguiente video. 32. Cómo anidar múltiples diseños de automóviles uno dentro del otro en Figma: Bien, vamos a empezar a rebelarnos por el útero, toda la madriguera del conejo, frotar una madriguera entera de autolayouts anidados en el camino frotar una madriguera entera de autolayouts anidados autolayouts anidados Y sobre todo en esta es que vamos a hacer una simple anidación Entonces vamos a poner el out autolayout que es madrugador dentro del precio que se ve así Y luego vamos a tener una opción que la va a convertir en una variable para que podamos entrar en algunas de estas otras y decir realidad las primeras palabras no en esta, para que podamos apagarla para que realmente fluya hacia la parte correcta. Es bastante receptivo. Ya es bastante fácil comenzar. En los próximos videos, vamos a conseguir cada vez más por nuestro vientre slash rabbit hole Pero por ahora, hagamos ésta. Bien, entonces quiero que este Componente entre dentro de esto, bueno, este autolayout, que entre dentro de este autolayout, ¿ cómo consigo que eso suceda? Para arrastrarlo, vas ¿ por qué está arrastrando adentro? Entra de ahí. Yo lo haré por aquí. Iré temprano. Pájaro va a entrar de precio ahí está ahí. ¿Por qué lo hace? Ya sabes, porque los componentes principales pueden ir dentro de otros componentes principales, así que hazlo mejor y pasar el rato ahí puede ser una instancia de ello y eso va a entrar. Es duro ganador del mismo tamaño. Instancia madrugadora, que es el pequeño diamante que hay. Entra en el precio, vas tú. Está funcionando. No es el diseño que quiero. Entonces voy a hacer clic en el padre externo , su componente principal. Voy a bajar e ir en el medio. Y vamos a jugar con los extremos de espaciado que esperas ahí haya este préstamo para Y4 Cuatro por cuatro. Bien. Yo sólo quería ver cómo se ve. Estoy contento con ello. Va a caber aquí abajo. Probablemente me guste hecho, pero voy a tener que faltar con las esquinas redondeadas para que funcionen ahí dentro. Vamos, contentos con ello y que mi amigo es Auto Layouts dentro de otros autolayouts lanzando componentes para ser confusos, pero sí se ponen confusos , no estaba Lo siguiente que quiero hacer es convertirlo en una variable. ¿Por qué? Porque hice este tipo de cosas de autolayout porque quería poder apagar madrugadores porque no siempre necesito que esto va a ser un momento en el que esta cosa no es casi Entonces lo que me gustaría hacer es seleccionar mis componentes principales. Me gustaría agregar una propiedad y quiero que la propiedad sea una variante. ¿Bien? Y sé que uso variante y Variables tipo de indistintamente Es la variante que queremos. El resto del curso cuando digo variables, me refiero a variante porque tipo de cosas diferentes. Bien, entonces esta variable va a ser alguna, pero en serio, ¿qué quiero? Quiero Variantes y quiero que el inferior no tenga doble clic Nadie lo haría. Excelente. Así que ahora tengo dos de ellos, me hacen clic, clic en el conjunto de componentes Mis padres Hay una pequeña línea punteada alrededor del exterior, tal vez recuerdes del curso Essentials. Entonces es un componente con dos variantes distintas. Y en el momento en que se les llama default y early bird. Entonces voy a decir y da click en la X, vas a hacer click en esta. ¿Bien? Y voy a decir madrugador, el primer valor va a ser encendido y apagado. Si usas palabras encendidas y apagadas, transformará mágicamente en un interruptor de palanca Lo que quiero decir con eso es que vamos a arrastrar una instancia de este componentes lo. Así que voy a ir a mis bienes, echar un vistazo al local y a los componentes en los que no hemos estado aquí, harías pesado. Yo tengo este de aquí. Ahí está mi precio uno. Voy a arrastrarlos fuera. Y ahora porque uso la palabra encendido y apagado, se convierte en una variante con este interruptor de palanca. Bonito. También quiero que este componente esté dentro de aquí. Quiero que esté dentro de este componente principal para mi Tarjeta de Evento. Quiero que este texto sea más pequeño para que encaje. Ahí. Vamos. Tiene que romper un poco la K. Tenemos algunas cosas para hacer esto y vamos a tomarlo en las otras páginas Y lo que notarás es, es que no es muy receptivo. ¿Por qué no está en la parte superior derecha de ésta? Oh, ya lo tienes. Componentes Restricciones con él seleccionado. Voy a decir que te limites a la derecha y a la parte superior, probablemente la parte inferior, no, arriba, arriba va a quedar mejor Sólo significa ahora y está por aquí. Cuando cambio el tamaño de éste, es mucho más receptivo. El texto está roto. Entonces bien, lo arreglaremos en otro video. Pero ahí vamos con una especie de meternos un poco en ello. Tuvimos que autolayouts, los apilamos uno dentro del otro Entonces quisimos variable. Entonces lo hicimos un conjunto de componentes, lo que sucede automáticamente cuando vas así y solo le agregas una propiedad. Se convierte en un conjunto de componentes. Bien, entonces decimos que quieres Propiedad de componente variante ya que yay, queremos al menos dos de ellos y luego hacer algo diferente Y podría ser que sea oscuro o claro o de color diferente o de diferente tamaño. Pero acabamos de encender y apagar algo, que es lo de Iturbide Y se envolverá muy bien porque era un diseño automático dentro de otro diseño automático Oh, sí, hagámoslo. Entonces por aquí podemos decir, bien, este es un madrugador Este no lo es. Entonces voy a entrar en mi componente. Voy a encontrar esto aquí llamado precio, y puedo afinar esto se apagó. Ahí vamos, e incluso reps hasta arriba a la derecha. Lo último que quiero hacer es que quiero jugar con mi espaciado, pero no tienes que andar por ahí para eso. Sólo voy a ajustar esto para que sea un poco más alto y te veré en el siguiente video. Bueno, echo de menos con lo grande que debería ser todo esto 33. Nesting de asistencia autónoma con variantes y texto responsivo en Figma: Todos en este momento, esto es lo que hace poco receptivo Card. Un poco funciona. Este aspecto de garrapatas. Settext no funciona. En este video. Vamos a hacer que haga este tipo de muestra de re baraja Y también vamos a añadir una variante. Di que apagamos el precio. Mira, los textos vuelven a fluir. Sí, he estropeado la ortografía del egipcio. Eso también es parte de este video. Una cosa que sí quiero tirar aquí es que puede que te resulte confuso. Algunos de ustedes Buber como una brisa es fácil. Para aquellos de ustedes lo están encontrando complicado y duro y va, ¿tienen que ser este complejo? Ellos no. Pero es bueno entender estas cosas para que puedas construir cosas complejas si necesitas terminar estirándote en estas cosas más complicadas, hace que las cosas que parecían difíciles, fáciles. La comparación de Pike se nos mete en la cabeza. Y podrías ser como yo y como el reto de construir estas cosas que sean bastante receptivas y resilientes y podamos verlas y la gente no puede romperse, romperse. Arrástralo hacia abajo, el arrastrando hacia abajo, pero un video futuro Pero por ahora, es bueno que lleve a reflujo. Bien, entonces necesitamos ese reflujo de texto y eso está ahí dentro Además queremos hacer de eso una variable podamos encenderla y apagarla. Hay dos cosas que tenemos que hacer. Necesitamos que sea un diseño automático de todo el fragmento inferior, y necesitamos hacer que este cuadro de texto llene el contenedor Entonces por el momento si hago clic en suficiente, bien, dentro de mi componente principal, que es mi tarjeta, tengo esta enmarcada justo en la parte inferior de aquí, que comenzó como una caja morada y que metí el precio ahí dentro y tiré algún texto. Entonces lo primero que tengo que hacer es todo el Rapa, este marco aquí y él ha sido autolayout Conocemos el atajo para ese día de turno, haciéndolo todo el día, preocúpate por el diseño en un segundo. ¿Dónde quieres saltar y hacer padding y margin? Pero déjame mostrarte. La otra cosa que tenemos que hacer es este cuadro de texto aquí por el momento es conseguir un ancho fijo Entonces es por eso que cuando cambio tamaño de esta cosa, en realidad no funciona Si decimos llenar el contenedor, nada cambia realmente excepto que cuando responda, va a llenar el espacio, siempre y cuando vaya al borde de esto. Mira lo que sucede cuando lo estamos redimensionando? Voy a añadir que se ajusta. Vete tú. Tienen permitido este laboratorio de pedidos dentro de este, que ahora está dentro de este diseño automático, el inicio de Figma Y antes de ir a arreglar el relleno, hagamos lo último y lo convertiremos en una variable solo para meternos en el swing de las cosas, ¿esto necesita ser variable? Vamos a hacerlo de todas formas. Entonces, para que esto tenga variables varianza bajada, necesita ser un conjunto de componentes, que es lo mismo que un componente principal. Y podemos un componente principal no vivir dentro de aparente componente principal. Estás como, estoy fuera haciendo el video apagado. Empezamos fácil, nos poníamos más calientes. Esto es bueno. Seguiremos practicando. Vas a ir por aquí. No vas a ser un componente en este momento. Entonces voy a decir que alguna vez te escuchas Mi Componente principal, Opción de Comando K, Control Alt K, eres un componente. Quiero agregarle una propiedad. Bien Propiedad, una variante, no una variable. Eso es tener que variantes. Y pongámoslo en alguna parte. Vamos a agarrar el borde de la misma y ponerla en alguna parte. No es una especie de superposición y todo en una segunda variante aquí tenemos que apagar esto y porque está en un diseño automático, solo hazlo entonces. Mira eso. Es un diseño automático, lo que significa que desaparece, todo lo que fluimos. Y porque esta cosa dice, llenar contenedor, nada de cerdo no arreglado, va bien, voy a llenar el Mientras que en este se está llenando todo el camino hasta el borde aquí porque hay algo en el camino. Pero cuando no hay nada en el camino, dice que todavía lo estoy llenando. Puede que miren hasta dónde voy. Pon un poco por ahí. ¿Cómo lo conseguimos? Vayamos al panel Activos. Tomemos una instancia de la misma y la pongamos por aquí. No está en el lugar correcto. Entonces, si miro nuestras capas, necesito estar dentro de este evento de NACADA Ahora, voy a jugar con el acolchado para tratar de que se vea bien. Y lo que quiero decir con eso está en el autolayout aquí del nav inferior, sólo voy a intentar empujar todo alrededor Pero no voy a hacerlo en la instancia. Lo voy a hacer en la instancia. Y luego te voy a mostrar cómo están todos los que te gustan y conseguir que esto se vea bien, eso es genial. Después mira el acolchado del lado derecho. Quieres que tenga 16 años. Perfecto. Bien, entiendo esta cosa. Mirar en dulce. Y entonces me doy cuenta que estoy trabajando en la instancia. ¿Qué hago? ¿Por qué lo hago? Se puede seleccionar sobre la incidencia y decir clic derecho y decir en realidad, quiero empujar, ¿a dónde vamos? Empuje los cambios al componente principal. Entonces se ajustará por aquí. ¿Dónde está ese de ahí? Porque te olvidas y es un poco pesado solo ajustando esto y luego vigilando este, en ajustar este A veces es fácil simplemente ajustar la Instancia y luego empujarla a la principal. Principalmente porque me olvido. Y mientras golpeamos, vamos a ordenar el en realidad está por aquí. Ordenemos los nombres de las propiedades. Entonces esto va a ser precio. Y me gustaría, voy a darle a esta pequeña opción aquí para decir de vez en cuando. Se puede decir verdadero o falso, eso también funciona. Se puede pensar en cualquier otro. Ve a parar. Eso no funciona. Si conoces alguno de los otros que enciendan este interruptor golpista, házmelo saber en los comentarios. Aquí vamos. Notarás que el fondo está cambiando en éste. ¿Cómo soluciono eso? Voy a apagarlo, arreglarlo y mi instancia, golpearlo un pixel más. Entonces voy a decir que haces Componente. Vamos a empujarlo antes de que me olvide. Ahora cuando enciendo y apagando un ahí vamos. Otro problema es que ajusté todo mi relleno cuando tenía esto puesto para conseguirlo como quería eso, lo empujé de nuevo al componente principal, el componente configurado aquí. Pero estos son en realidad separados. Ahora puedes ver que el espaciado es diferente en este. Entonces necesito el espaciado en esto. En realidad el espaciado de este 1651010 para ser el mismo que Puedo copiarlo Comando Opción C para copiar es Control Alt Z y éste, así mismo dos teclas más V. Ahí vamos. Ahora ojalá, este de aquí es ¿qué estoy haciendo? Oh, nos perdimos un poco. Aquí vamos. Tú, mi amigo, necesita estar ahí. Me viste hacerlo. No sé cómo lo hice, pero ahora seguramente puedo entrar aquí y activar eso, eso apagado. Lo mismo. Bien, así que estuvo bien Compramos un par de puntos faltantes con una de las variantes y asumiendo que lo estás haciendo por ambas, luego dándote cuenta de tu error y poder copiar y pegar esas propiedades en ambas de estas. Bien, salga al bono. Bien, hagamos una última cosa. En realidad, solo pensé que tenemos un par de variantes en marcha. Puedo decir en realidad, este de aquí. Mi tarjeta más baja. Mi precio en realidad tiene su propio interruptor de palanca. Wally, yo estaba dirigiendo y ellos van, pensé que acababa de hacer que esto funcionara No funciona. En realidad lo hace. Es solo que están, en realidad es ver, se puede ver que se está extendiendo. Pero la forma en que el egipcio, si fuera más pequeño, sería mejor. Aquí vamos. Vamos a activar este toggle. Desactivar. Ahora funciona. Estaba funcionando para hacerse la idea es solo que la línea era demasiado larga para descomponerse a la siguiente. Bien, y estoy de vuelta. Terminé este video e hice el outro Y entonces yo estaba como, si, mira un culombo Esto funciona el encendido y apagado de la Variable. Entonces, si hago doble clic en la línea de fondo, continúo esto en los flujos de un oferente, ¿por qué no refluye agradable y Responsive aunque Bien. Es porque si hago clic en mi carta inferior, bien, las Restricciones y mantengo presionada Shift, para que tengamos izquierda y derecha yendo a donde puedas recogerla desde aquí. Ahora qué obra. ¿Por qué se fueron? Porque estaba funcionando al principio. Recuerda antes cuando hice esto, porque recuerda que dije que necesitaba convertirlo en un componente. Así que vamos a sacarlo de aquí. Y hice un componente y luego lo volví a meter. Cuando sale de aquí, lo volvió a hacer. Mira, la arrastré y va no la arrastró y no la perdí Pero cuando hice todas estas cosas, hazlo, alguna manera perdí eso y simplemente me alineé a la izquierda Ellos van. Ese es el misterio, resuelto. El problema que creé y arreglamos. Me gusta fingir que a veces las pongo como experiencias de aprendizaje. Pero hombre, cuando estás construyendo estas cosas, cuando empezaron a hacer cosas complicadas como las que estamos haciendo ahora, terminas teniendo que probar slots y luego ir. ¿Qué pasó? Al igual que en los próximos videos vamos a ir ¿Qué está pasando aquí? Ignora eso por el momento. Arreglaremos todo eso mientras nos convertimos en maestros de diseño automático, componente, variable , perdón, variante y restricción. Ahí vamos. Te veré el siguiente video. 34. 34 diseños automáticos avanzados: Hola. Oye, vamos a hacer esta versión. Bien, hemos estado ignorando la pequeña columna del iphone más grande Hemos estado diseñando por aquí y destrozando esto y simplemente ignorándolo Como, pero Dan, mira, no encaja ¿Por qué no es apropiado? Eso es lo que abordaremos en este video. Haremos algo que sea agradable y elástica. Tiene tanto el precio por debajo del cual es increíble, y el precio está uno al lado del otro para usar mejor el espacio. Y es receptivo. ¿Puedes ver cuatro líneas? ¿Tres líneas? Dos líneas. Se va a poner un poco de conejo agujero de gusano Santo. Bien, estamos haciendo esto probablemente demasiado complicado, pero es divertido para el curso, pero también es un poco áspero la cabeza también Entonces, si estás encontrando esto bastante como, oh mi hombre, ¿se espera que haga esto solo por presupuesto realmente grande, trabajos de equipo grande? E incluso entonces, estos podrían ser demasiado complicados. Podría ser mejor solo tener un par de ejemplos y dejar que el desarrollador lo haga, pero eso no es divertido. Vamos a complicarnos en figma para que puedas hacer las cosas fáciles más Eso tiene sentido. En fin, vamos a hacer que esto lo vea, mira lo divertido que es. Lo primero es lo primero, sólo voy a moverlo por aquí. Mi versión pequeña. ¿Por qué? Porque voy a estar ajustando esto. K, mi componente principal y todos estos conjuntos de componentes K estas variantes. Así que los quiero cerca en lugar de tener que fregar de un lado a otro. Bien, entonces, ¿qué tiene de malo este? En primer lugar, lo que me gustaría hacer es simplemente restablecer la instancia. Bien, puedes escribir, hacer clic en él, hay un atajo. Puedo recordar lo que es. Reasentar los cambios, mira, ni siquiera hay un atajo. Por eso no lo recuerdo. Bien con lo seleccionó que esto se remonta a una copia realmente buena. Sin anulaciones eso es bueno. Porque entonces puedo ir así y saber que en realidad no lo he hecho, no hay demasiados cambios en esta cosa. Entonces el gran problema es que quiero, en primer lugar , que el precio, vaya por debajo porque realmente no encaja en este pequeño diseño de dos columnas. Entonces hagámoslo. No tenemos una columna de dos. Ahora lo que estaría bien es que puedes hacer clic en la instancia de mi tarjeta de madera e ir, bien, diseño automático, ir, ir abajo, vas a la derecha, baja Eso sería fácil, pero no puedes hacerlo en la instancia. Te juro que solías hacer esto. Bien. Allá por los días de Figma, pero no lo sé, pero en realidad no puedo probarlo, así que tal vez nunca sucedió Entonces lo que tenemos que hacer es hacerlo aquí en mi componente principal, que es una variante, perdón, variable. No quiero cambiar el principal porque ahí es bueno eso. Este de aquí sin el precio está bien, así que voy a necesitar otro. Voy a hacer esta primera porque tiene el precio ahí dentro. Y voy a decir que puedes tener esta disposición vertical. Casi funciona. Voy a darle algo de espacio. Voy a hacer clic en el, Saltó, saltó a todos. Nueva actualización a Figma. Aquí está esta nueva opción que dice wrap. Si pudieras preguntar, es como ¿podemos hacer eso en lugar de esta tercera variante para apilarla una encima de la otra? La respuesta es no, no va a funcionar para nosotros. Es mejor usarlo para cosas como solo una pila de iconos, una pila de repetibles Las mismas cosas exactamente lo que estamos haciendo es que las queremos apilar, pero también queremos cambiar el texto para que quede centrado. Queremos que sea redimensionable. Entonces envolver no va a funcionar. En este caso, hay demasiadas cosas que queremos cambiar después que eso no resuelve. Cubriremos rapear más adelante en el curso. Es realmente útil, simplemente no funciona para este video. Y la otra cosa es lo que estoy haciendo es actualizar. Es este video es muy duro. Como que dije al principio, pero si te pierdes en este video, creo que todos podrían, bien, Incluso yo viendo este video podría perderse. Bien, por primera vez, es algo complicado de hacer. Instancias anidadas anidadas. Se pone, sí, se pone bastante de inicio y si llegas al final estás como, oh, tengo pedacitos, pero es bastante complicado Está bien, fue un video complicado. Traté de meterme en algunas cosas avanzadas temprano. Básicamente, muchas de las cosas que me piden cuando la gente quería el curso avanzado, queremos ruidos automáticos y queremos ruidos automáticos anidados y queremos convertirnos en maestros de los ruidos Siento que tal vez si acabas de salir curso de lo esencial, esto podría ser complicado. Pero sí, hazlo. Si no lo entiendes, no te preocupes. La mayoría de la gente encuentra este realmente complicado. Se hace más fácil en el curso y estas cosas se doblarán a medida que avanzamos. Ahí vas. Envolver no lo arregla, y sí, este es un video súper duro. Espero que lo disfrutes independientemente. Bien, continúe. Bien, voy a ir ahí. No quiero saltar. ¿Cómo no consigo que salte? Oh, ¿recuerdas el atajo? Sostenga la barra espaciadora. Bien, empieza a arrastrar primero, luego mantén la barra espaciadora, no saltes. La otra cosa es que puedo hacer clic en esto y simplemente cambiarlo de tamaño, o puedo usar mi dulce atajo Aprendimos antes, tipo de selección de fotogramas este de aquí. Pero el atajo son todas las teclas más R. Así llamaremos al exterior seleccionado. Vamos un turno de opción o controla turno Olt y pulsa R. Demasiados atajos Dan, puedes ignorar los que no quieres Y este de aquí es genial. Está en la parte superior e inferior. Y puedo subir aquí y decir que no vas a estar encendida o apagada. El interruptor de palanca está roto, ¿de acuerdo? Voy a tener un precio de tres, ¿de acuerdo? Ese es ese. Ahora cuando tenemos más de dos, bien, teníamos encendido y apagado, y eso funcionó muy bien. Hicimos un interruptor de palanca, tú una especie de interruptor de palanca de tres ajustes , así que simplemente se rompe. Así que vamos a seleccionar en esto y hecho ir a nuestras opciones aquí para nuestras propiedades y decir que el precio sigue siendo bueno tiene sentido. Se puede tener grande y nosotros podemos tener pequeños. Eso tiene más sentido. Así puedo subir aquí ahora y decir, quiero el pequeño. Tal vez mejores diseños horizontales. Sí, eso es mejor de todos modos. Entonces tenemos que hacer un par de cosas cuando cambie esto y parece que está funcionando, pero no lo es. Dale un jiggle. Bien. Se puede ver que es una especie de trabajo, ese tramo. No es estirar la altura, que probablemente sea lo principal. La otra cosa que voy a hacer es simplemente apagar esta parte. Voy a apagar el globo ocular porque eso es algo que arreglaremos en un futuro video Será muy similar a lo que estamos haciendo aquí. Entonces pedacitos de ella funcionando, bits para no Lo primero es como consigo que esa cosa se pegue al fondo. Y aquí es donde hasta yo tipo de lo que estoy haciendo. Y sé que no sé exactamente de la parte superior de mi cabeza cuál es, pero te voy a mostrar mi metodología de pasar y simplemente averiguarla no lleva demasiado tiempo A veces tropieza con él la primera vez. Entonces, ¿qué podría estar haciendo? Probablemente sea la altura de esta cosa, ¿de acuerdo? O la restricción. Echemos un vistazo a la restricción. Entonces podemos decir, ¿ está en esta cosa? No, no las limitaciones sobre esto. Los tienes, pero esta es una pieza que está dentro de esto. Este es mi componente principal para mi evento. Entonces puedo dar click en éste y decir, estás abajo de abajo a arriba, tipo de eso. Aquí tienes. Realmente no tenía un plan para el cual iba a estar adivinando a medida que avanzo Y tenemos algo de eso bien. Bien. El problema con él ahora, se está pegando al fondo, lo cual es genial. Simplemente no está creciendo. ¿Por qué no está creciendo? Entonces hagamos lo mismo. Veamos esto y digamos ¿por qué no estás creciendo por aquí? Es abrazar contenidos, que es lo que quiero, y no es hacerlo. A lo mejor son las limitaciones que está trabajando en esta, lo mejor es esta. Vamos a hacer clic en eso. Eso es la mitad de lo que quería. Yo sí quería que fuera al centro. Bien, entonces eso es todo. Y este texto aquí, mientras estoy aquí, quiero que eso esté centrado. Ahí vas. Pero aún no está creciendo. ¿Por qué no está creciendo? Tú afuera no estás creciendo. Bien. Entonces no lo es, esto es parte de esto, sí, éste, tal vez no lo es. Es, esta es de altura fija, por lo que esta puede abrazar contenidos cerca. Tal vez abajo por aquí, tal vez sean las restricciones abajo abajo. Y este es el divertido juego de lo que está controlando qué. Cuando tienes anidado dentro de, anidado dentro de diseños automáticos anidados, puede ser bastante complicado porque a veces no es el diseño automático en absoluto En este caso, apuesto a que es el cuadro de texto. Voy a usar esta. ¿Bien? Y te voy a decir, no tienes una altura fija. Quiero que llenes contenedor abrazo contenido. Bueno, es como que funciona pero no es éste. Creo que es este tipo, tú, mi amigo eres de altura fija, eso es contenido de abrazo, es contenedor de llenado. No. Todo bien. Voy a hacer una pausa y ponerme el sombrero pensante, tratar de averiguar qué es. Debería preparar más. Al derecho. No lo he hecho, pero lo he pensado. Estoy pensando que en realidad puedo hacerlo como instancia y decir abrazar contenidos, llenar contenedor. No, Abrazo contenido no, llenar contenedor. Oh, pensé que eso era todo. Todo bien. Volver a pensar, oh, tal vez sea la tarjeta, no la caja real. Entonces vamos, es fijo, altura dura, da lo hicimos. Trabajo en equipo. ¿Dan siquiera sabe lo que está haciendo? No cuando obtenemos estos profundos en estos diseños automáticos y sus variantes en la parte superior de los diseños automáticos, puede ser complicado. Entonces si estás luchando, estás como, hombre, eso me llevó años hacer ejercicio, no te preocupes. A menos que estés haciendo algo sencillo, puede tomar un poco de tiempo resolverlo . Esa es mi excusa de todos modos. Bien, ¿qué vamos a hacer aquí? Quiero mover el espaciado aquí. Quiero abrirla, pero puedo hacerlo en esta instancia, entonces tengo que hacerlo en todas ellas. Así que voy a volver uno y decir, en realidad tienes un poco de relleno ahí dentro. Oh, hay otra palabra. Entonces lo que también voy a tener que hacer es jugar con el tamaño del espaciado, lo siento. Entonces 18 no va a funcionar, ¿verdad? Entonces voy a usar mi flecha hacia abajo, probablemente vaya a 16 y voy a tener que, cuando el desarrollador construya esto, tener un recuento de personajes para que no tengan un trillón y tipo de soplar el tamaño de Bien, así que esa es la talla. Voy a tener que ir a decir que necesitas un poco de relleno más pequeño. Aquí estás. Vamos a hacerle una prueba solo para asegurarnos de que no lo hemos roto, así que está funcionando bien. Comprobemos sus otros cuerpos, como la instancia con una gran carta inferior ahí dentro. Bien, y funciona. ¿Lo dejaría ahora? ¿Lo necesitamos para romper a tres? Hagámoslo porque ya aprendimos lo que es. Hemos aprendido que es el texto en sí sobre la instancia el que necesita ser configurado para abrazar y el padre necesita ser enviado a abrazar ya. Ahí vamos. Muy bien, bonito. Hagamos una última cosa, porque ese no es un buen uso del espacio. Vamos a conseguir esto lado a lado, ¿de acuerdo? Y recuerda, no puedo entrar, en mi instancia, como al principio, puedo decir, ¿verdad? Para que pueda volver a ésta. Quiero un duplicado de esto. Voy a decir D, y lo quise decir con eso es comando D o control D. Y este de aquí puede ir por aquí. Da clic en el exterior, todas las teclas más R, es opción de comando shift o control lt shift y pulsa R. Bien, Y lo que quiero hacer es que esté roto mi toggle otra vez. Echemos un vistazo. Vamos a hacer clic en el conjunto. Vamos a hacer clic en la configuración aquí. Madrugador encendido apagado, y luego horizontal. Bien. O sí, creo que eso es mejor. Ahora, puedo ir a éste y decir que eres horizontal. Más habitación. ¿Hemos creado un monstruo? Aquí hemos creado totalmente un monstruo. ¿Haría algo así? Sí. Es divertido conseguir que Figma se doble a mi voluntad Bart, ¿pasé medio día poniéndolo en marcha? Probablemente. ¿Vale la pena? Dependerá del trabajo. Sistemas de diseño más grandes donde hay mucha gente que lo usa en un elemento de página que se usa mucho. Claro. Incluso si no quieres llegar demasiado lejos esta madriguera de conejo de llevar todas estas cosas dentro de ella. Hazlo para este curso para que realmente te acostumbres a que te guste qué buscar. Y, ya sabes, cuando tienes problemas con tal vez un activo menos complicado en Figma al, ¿verdad Eso es. Te voy a ver en el siguiente video. 35. Texto receptivo: Uno. En este video, vamos a conseguir nombre de este lugar como se pegue a la parte superior del nombre en el módulo de precios de cama temprana. Bien. Entonces ese tipo de ajustes es un poco más fluido ahora en el curso original. Bien. Lo grabé y simplemente no pude averiguar cómo hacerlo. Simplemente me perdí tanto. Y en cambio tenía un video marcador de posición que decía, cualquiera en el curso me ayudó. Y ustedes respondieron. muchos comentarios geniales a continuación. Bien, sobre cómo se podría resolver este problema. Y creo que lo he sintetizado hasta las necesidades básicas Para mí fue un verdadero doblador de la mente. Deberías haber visto el video original. Es un poco desesperado, perdí mi camino. Por suerte les conseguí ayuda, y la solución real es razonablemente fácil. Bien, vamos a saltar. Bien, primero, tengo mi componente principal. Voy a alargar una instancia de ello. ¿Bien? Porque lo que quiero hacer es volver a mi componente principal y quiero decir en realidad el thinkor frame four, que es mi tipo de nombre de lugar como, voy a renombrarlo, antes que nada, llamarlo lugar Bien. Y lo que notarás es que funciona de alguna manera. Pero entonces tan pronto como se rompe en unas pocas líneas diferentes, simplemente desaparece. Es un poco el orden equivocado originalmente en este video, simplemente no pude resolverlo. Mi principal era como, oh, solo agarra esto y di restricciones. Vamos a alinearlo hasta el fondo y todavía no funciona. Entonces me perdí un poco y te pedí tu ayuda y tú lo hiciste, entregaste. Bien. Entonces la forma de arreglar esto está bien. Vuelvo a mi componente principal. Tengo dos cosas en la parte inferior aquí, lugar, y la de precios en la parte inferior. ¿Bien? Esta cosa se llama precio, pero tiene todo tipo de cosas pasando en ella. Esos son los dos bits en la parte inferior. Lo que puedo hacer es manjar a los dos. Lo estoy haciendo aquí en las capas, bien. Y voy a escribir Click en realidad ahora solo voy a hacer click por aquí y decir envolver estos en un marco, pero no solo en el viejo marco. Y auto out, Bien, y estás como, oh, descansos increíbles. Se pone peor de lo que era. Entonces lo que tenemos que hacer es que envolver un marco, vamos a darle un nombre en lugar de frame six, llamémoslo wrapper. Ese envoltorio necesita hacer un par de cosas. Necesita tener limitaciones. Vamos a pegarlo al fondo, lo cual es increíble. Vamos a conseguir que vaya todo el camino a la izquierda y a la derecha. No funciona todavía. Está funcionando manera es si hago doble clic en el envoltorio, bien, Que es esta cosa de aquí que tiene un par de mis partes en ella, mi lugar y mi bloque de precios. Bien. Va a la izquierda y a la derecha. ¿Lo puedes ver? Envuelve derecho a los bordes. Sin embargo, este bloque inferior, solo se está quedando atascado aquí. ¿Por qué? Echemos un vistazo. Vamos a darle un click sobre él. Estoy en mi componente principal, en realidad no lo estoy. Estoy en mi instancia Obtener mi componente principal claro, haré clic, Bajar a este módulo de precios abajo en la parte inferior. Y voy a decir, en realidad no quiero que seas un ancho fijo. Quiero que llenes el contenedor en el que estás el envoltorio. Y el contenedor envoltorio está diciendo, estando todo el camino a la izquierda, todo el camino a la derecha, y estar pegado al fondo. Ahora bien, esa es la solución. podría terminar pasando Lo que podría terminar pasando es una de las cosas que encontré cuando estaba jugueteando con esto para querer intentar que funcione es que este texto aquí en este momento, tal vez tengas que ir a cambiar esto para ir a llenar contenedor Puede por defecto un fijo, terminas algo que funciona pero no del todo. Bien, en realidad estíralo. Si voy a este texto, este texto tiene que pasar de fijo a relleno. Hay algunas cosas extravagantes con Figma. Sí, ahí tienes. Trabajó. Gracias a la ayuda de tus chicos. Muchas gracias. Si el tuyo es un poco diferente y sigue sin funcionar, voy a hacer un par de cosas, echa un vistazo a los comentarios, porque hubo algunas otras soluciones diferentes. Sentí que esa era la versión más fácil , más sintetizada. La otra cosa que voy a hacer es que voy a pasar por mis componentes principales. Así que vamos a cerrarlo por todas las distintas partes. Y puedes ver en la pantalla lo que tengo ajustes por aquí para esta es mi tarjeta Vent, ¿de acuerdo? No es salida de petróleo. Solo un marco básico de componentes principales. Entonces tengo este envoltorio. Bien, ese envoltorio, solo voy a dejar que puedas pausarlo e irte, oh, bien, está arreglado y abrazado y ponlo a izquierda e izquierda, y derecha e inferior Simplemente trabaje a través de sus diferentes partes. Bien. Nos vemos. Dentro de un lugar está solo el cuadro de texto y le permiten lugar tiene estos ajustes aplicados a él. Bien. El módulo de precios tiene fill hug y puedes ver la configuración de diseño automático para él. Simplemente revisa y compara con el tuyo si no está funcionando. Así que mira la estructura de capas de aquí. Lo que he hecho en las opciones de diseño, envoltorio de lugar, solo compara el tuyo. Las otras cosas, hagamos clic en el texto real en sí para que veas si hay algo diferente con el tuyo. Funk del gueto Y el módulo de precios. Ahí vas. Y deberíamos poder cambiarlo de off a horizontal. Y se puede ver que se alza y sigue encajando porque esa cosa viene a lo largo para el paseo también. Bueno. Muy bien, eso es todo. Buena suerte con el video, y voy a ver en el siguiente. 36. Fondo abstracto degradado en Figma de forma fácil: Hola a todos. Vamos a hacer esta pequeña cosa de animación de fondo borrosa degradado Lo vamos a estar tomando prestado de este sitio aquí, stripe.com, bien, todos Gradiente animado. ¿Lo ves moviendo el fondo? Vamos a hacerlo de la manera rápida, fácil y sucia para empezar. Sólo vamos a animar una imagen principalmente para flexionar nuestras habilidades de animación Haz que nos recordemos todas esas cosas que hicimos en el curso Essentials, nos aseguramos de que todos estemos en el mismo lugar. Y vamos a llegar cada vez más avanzados con mallas degradadas y cosas buenas, buenos atajos y aquí también Pero sí, vamos a hacer esto en Figma. Bien, comencemos haciendo nuestra pantalla de bienvenida. Vamos a hacerlo aquí abajo. Si llave, voy a usar el teléfono, iPhone 14. Va a entrar en un lugar aleatorio, iniciarlos aquí abajo y darles un nombre. Va a ser mi pantalla de bienvenida. Esta va a ser bienvenida pantalla uno. Vamos a hacer fotograma a fotograma en esta animación y luego te voy a mostrar cómo hacerlo más elegante en una Bien, quiero todos los detalles de esto. Voy a ir, voy a manchar este marco porque quiero las esquinas redondeadas en el color de fondo Entonces vamos a ir a Comando Opción C para copiar, eso es Control Alt C en una PC. Y las mismas teclas más V me darán mi color de fondo y pueden ser mis esquinas redondeadas. Vamos a usar un plugin. Y ahora hay un par de plugins para obtener la imagen abstracta que vamos a usar. Entonces vamos a animar esa foto, ¿verdad? En lugar de hacerlas todas por separado, lo que haremos en un poquito, empieza de la manera fácil, haznos más complicados. Ahora solo voy a usar unsplash y solo obtener imágenes de uso comercial para esta, obtener un fondo abstracto Si tecleas gradiente en la búsqueda, encontrarás que hay muchos creadores de Gradient hasta ti como disfraz quieres ir. Bien, en realidad no es necesario porque podemos dibujar nuestros propios gradientes. Pero comencemos con una imagen. Bien, es unsplash y voy a usar abstract. Y solo voy a usar esta primera. Ahora no quiero ponerlo en el fondo de esto porque quiero animarlo. Entonces no quiero que sea un fondo de esta pantalla. Simplemente voy a agarrar mi F2 para marco, dibujar más grande que mi teléfono porque quiero moverlo por ahí con él seleccionado. Haga clic en eso. Y vamos a ver. Ahí vamos. En realidad, probablemente quiera poder ver todos los diferentes colores para poder moverlo. Y necesito cerrar mi plugin y tengo que asegurarme de que esté dentro del marco. Entonces tu Se ha hecho un poco mal porque yo hago el marco alrededor del teléfono Es como que lo mezcló. Entonces lo voy a arrastrar arriba. No pantalla de bienvenida. Fuera de ahí, por favor. Ahí está. ¿Puedes ver la pequeña línea que aparece para que no vuelva a hacerlo ahora Entonces adentro, afuera, ahí vamos. Y puedes ir de adentro hacia afuera. Es un poco de uno. ¿Puedes ver la pequeña línea ahí? Eso, se acercará, mirará afuera, adentro. A los marcos se les va a llamar gradiente. Agreguemos algo de texto. Ahora he añadido algunos textos. Lo único que pasó es que automáticamente lo puso dentro del marco al que llamé gradiente solo porque dibujé dentro de él. Entonces voy a arrastrarlo para que no esté dentro del gradiente. Es justo al lado en N necesitaba estar arriba, y vamos, bien, así que voy a tener dos de estos Comando D o Control D en una PC Se le ha renombrado muy bien uno a la pantalla dos. Ahora es necesario cambiarlos. Voy a hacer click sobre el degradado en sí y puedes hacer cualquier cosa, solo una sutil rotación pequeña mirando la equivocada. Éste. Bien, y quiero, ¿qué voy a hacer? Voy a moverlo. Y voy a rotarlo un poco y probablemente escalarlo un poco también. Aquí vamos. Ahora el truco aquí es conectar estos dos arriba con Shift para agregar. Quiero cambiar a prototipo. Entonces vamos a aprender el atajo. ¿Ya lo hemos hecho? No estoy segura. Turno E. Bien. Cambiando las alternancias entre el diseño y los prototipos por honorablemente, una vez que llegas a esta última etapa en un diseño, terminas alternando entre las Existen diferentes atajos para utilizarlos si lo conoces. Cambio de ámbito ya sea solo un buen toggle. Así que estar en prototipo. Da click en este marco aquí. Y quiero decir, vas a ésta. Puede que tengas el mismo problema soy yo. Nunca me había dado cuenta de esto antes de este curso. Pero con esta gran imagen de fondo aquí, no puedo agarrar ese puntito y sigue saltando al menos, menos. Se puede ver que está saltando al marco exterior. Lo que voy a hacer ahora mismo es voy a seleccionar en ese gradiente uno y solo lo estoy bloqueando un poco, que es Opción de Comando L, Control Alt L. No lo es Es Command Shift L. Entonces Command Shift L, Control Shift L en una PC como atajo usas cargas. Déjame, voy a dejar entrar en la hoja de acceso directo. Sólo significa que ahora no va a intentar hacer clic en él. Entonces ahora ves estos mi puntito que quería que fueras ahí. Lo que quiero que hagas, no de barril. Después de un retraso. Anda un poco. ¿Cuánto tiempo? De hecho, solo quería que se volviera a cerrar. No quiero que espere mucho en la pantalla, solo quería llegar directo por aquí. Pero, ¿cómo llega ahí? No al instante. Quería llegar a través Smart Animate. Es mi Animate. Sólo va a mirar las cosas que han cambiado en animate entre ellos, bien, y, uh, ahora caso los tics no han cambiado, pero la imagen de fondo ¿Cuánto tiempo quiero que pase? Solo dejémoslo por defecto y echemos un poco de mirada. Otro atajo que vamos a aprender a través este curso es Control Alt en la tecla Enter en tu teclado es previsualizar otro realmente práctico . Demasiados atajos yo, voy a, voy a tratar de presentarlos. Postor. ¿Puedes ver este de aquí? Para echar un vistazo, voy a volver una. Apenas tardó un tiempo en cargarse. Por eso no lo vi. Bien. Y simplemente no es muy agradable. Si saltó a alguna otra página donde necesita asegurarse es cuando se pulsa vista previa, sólo tiene que seleccionar esa primera pantalla. Vista previa de golpe delgado. Y lo que tengo que hacer es que necesito esta animación aquí para pasar de no demorar, bueno, pasar de animate inteligente Voy a entrar y salir tranquilamente porque se ve bien. Y cuánto tiempo hubo mil milisegundos y un segundo. Así que quería ir como 5 s aún más, este derecho, 50 s. Puedes presionar el botón Reproducir. Si no estás seguro dónde están los presentadores, puedes ver los atajos Bien, pero vamos a usar la Opción de Comando P, Control Alt P. Eso abre el último plugin. Entonces las mismas dos llaves pero te gusta un no P. Dan, vamos. Bien, es adelanto Se tarda un tiempo en cargar esa imagen gigante. Entonces mi caso, no puedo simplemente dejarlo ir porque es como medio atascado entre esto. Voy a presionar el botón Atrás. Parece que está animando y moviéndose y haciendo cosas así Y en realidad no hicimos mucho para enmarcar la imagen de otra persona. Muy fácil de implementar también. En el lado del desarrollo, es solo una imagen en movimiento, trabajo escala y rotación, lo cual es fácil de hacer Bien, eso es. Voy a añadir un poco más de pizzazz Al hacer clic en este , voy a golpear el Comando D para obtener otra versión del mismo. Y con este de aquí, quiero volver al principio. En primer lugar, voy a tener que empezar a bloquear algunos de estos extendidos para animar este gradiente antes de desbloquearlo Voy a tratar de adivinar algo genial, pero oh, buen punto. ¿Cómo lo consigo de dejar de saltar por ahí? ¿Qué está pasando? Recuerda el atajo para meter cosas dentro del marco Así es. Una vez que comiences a arrastrar, mantén presionada la barra espaciadora Y entonces se quedará en ese marco. O qué gran uso de ese atajo, Dan. Pretendo que eso era parte de mis notas ahí. Sí, ya es lo suficientemente bueno como para rotarlo. No puedo recordar un escalar también. Bien, y necesito asegurarme de que vayas al modo prototipo No puedo ver ese punto otra vez. ¿Por qué? O esa cosa en el fondo. Esto normalmente no sucede. Hazme saber en los comentarios si quieres, está pasando a mí también, o es solo que lo harías en caso de que esté seleccionando mi gradiente y este de aquí, tal vez sea el atajo. Así es. Comando Mayús L para bloqueo. Nunca recordarás al topo. Eso está bien. Voy a hacer todo lo posible para golpearlos , vamos a encerrarlos a todos. El icono de bloqueo, solo puedes hacer clic en eso obviamente también. Y ahora quiero decir que realmente no puedes ver el punto. Eso lo puedo ver. Aquí vamos. Sólo un poco de calor para ver. Ahí vamos. Debería recordar lo último que hiciste. Hago 10,000 s o hice 10 s ahora hice 50%. ¿Qué no? No se puede hacer eso. Hola, ¿qué es este tipo? Todos aprendimos algo hoy. Sólo para que vayas tan alto como quieras, 10 s. Bien, déjame ir y hagamos eso Y quiero que vuelva al principio. Entonces quiero que solo vuelvas a cuando termine de usar las mismas cosas. Bien, esperemos que esto se vea bien. Haga clic en la primera pantalla, comando Opción, retorno, control alt en, en una PC. A veces hay que darle a esta cosa un poco de jiggle. Volvemos a mi primera pantalla. Qué es algo hacer cosas, está cambiando de color, se mueve lentamente, poco a poco Solo hay una imagen moviéndose que es bastante genial y no está funcionando del todo. Vamos a depurarlo por qué estás llegando y deteniéndote. Entonces va tú ¿hiciste esta? Vuelve a esa pantalla Smart Animate te en tap jaja, después de retraso para hacer lo mismo en esta ¿Fue algo de esto trabajando Dan usted de barril? Si estaba funcionando, buen trabajo, Dan. Bien. La otra cosa que podría ser diferente a la tuya, es posible que hayas visto todas tus pantallas cuando entraste aquí. Y podría haberse lanzado en alguna pantalla aleatoria en lugar de la primera de aquí. Y cuando presionas el botón Atrás y los agarra a todos, bien, así que solo recuerda que en realidad puedes pegar esta primera pantalla e iniciar un flujo puede decir que a veces lo hace automáticamente, bien, a veces no lo hace. Entonces se puede decir Iniciar flujo. Entonces cuando seleccionas en este, no va a saltar alrededor de estos otros marcos. Entonces va a comenzar por esa, lo que lo hace fácil cuando se quiere reiniciar, que es la arquea ¿Puedes ver aquí abajo el hockey? Vamos. Octavos. Está bien, necesita rotar y escalar más. Apuesto a que lo usas se ve mejor. Así que encuentra una imagen diferente. Voy a volver a probarlo y arreglar el mío. Espera, en realidad son una cosa antes de que yo haga eso, solo quería señalar que existe la opción de usar esta opción de espalda, unir a todos, solo hacer eso. No va a funcionar lo que queremos hacer en este momento, lo haremos más adelante. Es increíble para prototipos avanzados, pero por el momento, todo lo que hace es volver al marco del que vino Así que no va a volver al bucle. Se va a volver solo a esta. Entonces va a ir por aquí y luego volver a eso. Y no es tan útil cuando aprendemos secciones y un poco, que es algo de prototipado avanzado que es súper impresionante Sin embargo, no lo uses por el momento. Solo vuelve a este de aquí. Bien, continúa con el video. Bien, entonces déjame regresar y un poco jugó con eso y aposté, vas a hacer un poco de línea de mandíbula, solo parece que Así que juega con él. Conseguirás que sienta que está escalando y esas cosas Eso es poco amargo llegar allí. Pero de todas formas, todo lo que hice fue sí, volver atrás y escalar y cambiar un poco la rotación. Hay mucho ensayo y error. Voy a hacer una última cosa junto con nosotros. Vamos a desdibujarlo. Entonces lo que vamos a hacer es agarrar todas las pantallas de bienvenida. Tú. Y voy a ir al turno E para volver a Diseño. Y agreguemos un efecto a todos ellos, no sombra paralela, desenfoque de capa. Agarró esta opción y la puso en marcha hasta, sólo voy a arrastrarla. Aquí vamos. A ver si lo hace mejor. Comando, Opción, Entrar, Control, Alt, Entrar para previsualizar. Déjeme ir. Offeree estudiando. No estoy seguro de por qué está pasando eso. Oh, mucho mejor. Aire vamos. No lo sé. No puedo esperar a ver qué vas a hacer haría un proyecto de clase a continuación, y voy a conseguir que hagas uno o al menos presente el tuyo para que pueda ver que alguien es mejor que el mío. Bien, te veré en el siguiente video. 37. Cómo copiar y pegar interacciones en Figma: Hola a todos. Aprendamos a copiar y pegar las interacciones que ha creado para un fotograma a través de otro, varios fotogramas. Los fotogramas primero arriba, vamos a cambiar al modo prototipo, cambiar E. Y ya he conseguido indirección en este primer fotograma que quiero copiar y pegar, lo selecciono Y entonces lo raro es, es que por aquí en modo prototipo, Ahí están mis interacciones. Ahí está el que quiero. Se da click en él, no ahí, ahí y ese pequeño hueco, ahí y ese pequeño hueco, bien, selecciona un poco toda la capa Siento que pronto habrá un poco de solución a esto muy pronto en Figma porque hay mucha gente como, como nosotros, vamos a usar nuestro atajo para copiar en seleccionar uno o todos los fotogramas a los que quieres que vaya y simplemente presione Pegar Aquí vamos. Así que las interacciones a través de todas ellas, para mí, todas están apuntando hacia atrás a este segundo fotograma. Voy a tener que actualizarlos. Pero ahí tienes. Así es como copiar y pegar Interacciones a través de muchos fotogramas todos a la vez. Es ese secreto, secreto, poco área cliqueable. Entonces mi caso, voy a tener que trabajar a través y decir, Esto no vuelve a sí mismo, sino que va a la pantalla. Éste va a la pantalla. Éste va a esta pantalla, pero viene toda la animación para el paseo. Entonces te gusta Eso no parece tan rápido. Es cuando todo esto viene para el paseo, ¿vas un pequeño atajo? 38. Cómo animar malla de degradado con Variants in Figma: Hola a todos. Vamos a hacer este tipo de bondad de gradiente animado en el fondo aquí también unirá nuestra técnica donde vamos a usar Variables y animarlas en unirá nuestra técnica donde vamos a usar Variables y lugar de simplemente hacer un montón de marcos en nuestra mesa de Porque terminas con cosas como este ancho es como un trillón, trillón de marcos conectados y están bien, pero pueden Entonces los vamos a meter en CI. Entonces en nuestro Canvas solo tenemos un fotograma dentro de eso como componente, ocultando toda nuestra animación usando Variables. Bien, vamos a hacerlo. Bien, para aquellos de ustedes quieren simplemente saltar al uso de Variantes en lugar de marcos Me he saltado un poco adelante y te voy a mostrar un rápido Y luego si quieres, después de que te lo haya mostrado, voy a pasar por y construir esta cosa desde cero y agregar algunos consejos y trucos a medida que avance. Pero para los que solo querían saber, básicamente lo que queremos hacer es que he creado un marco separado de mi teléfono principal solo porque necesito un poco de espacio de trabajo. Entonces quiero mantenerlo separado en lugar de duplicar los frames y conectarlos usando el modo prototipo, lo que voy a hacer es seleccionar mi frame. Voy a darle un poco, un nombre. Voy a convertirlo en una Opción de Comando Componente K, Tecla Control Alt en PC. Y voy a crear una variante del mismo. Y tienen dos de ellos. Bien, y eso es lo que quiero hacer. Voy a moverme entre estos dos, conectarlos con Prototipos, mismo que hago con los marcos, pero van a ser componentes con variantes Significa que podemos esconderlos y esconderlos . Entonces hagámoslo rápidamente. Sólo voy a entrar en este de aquí y cambiarlo un poco. No va a hacer mucho. Haré más en un segundo cuando lo pase por completo. Pierdes el modo de velocidad. Bien, algo diferente en los dos. Voy a ir al Shift E para cambiar al modo prototipo. Voy a seleccionar esto y decir Tú, mi amigo se va a conectar a aquí usando el Animate después de retraso, retraso Sólo voy a usar un milisegundo, ¿de acuerdo? Y voy a decir, quería cambiarlo a smart animate. Voy a entrar y salir con facilidad. Y va a tomar 5 s, que son 5 mil milisegundos. Cuando esté terminado. Va a volver a esa de arriba. Usted retrocede. Ahí vamos. Necesita cambiarse de nuevo a después de un retraso de un milisegundo, pero todo lo demás debería estar bien. Ahora que lo hemos logrado, puedo ir a mi panel de activos, opción dos. Bien, voy a decir que entras aquí, lo alineas para que la animación se hornee en este componente al que ahora puedo ir y previsualizar y mirar ese degradado de película. Dios, bien, así que si solo querías hacer eso, ella solo quería descubrir esta forma diferente de animar en lugar de tener ese gran documento masivo de marcos conectados. Así es como lo haces. Oye, equipo, antes de continuar solo una pequeña actualización, Figma ha lanzado una nueva opción de vista previa A lo largo de este curso. Sólo había uno. Así que solo usaremos el presente y el presente, lo abriremos en una nueva pestaña para previsualizar nuestra dulce nueva animación. Sin embargo, lo que podemos hacer ahora es que en realidad puedes hacer esta otra opción aquí, que dice vista previa que están presentes. Preview lo abrirá en una pequeña pestaña similar dentro de la aplicación para que puedas verla. Lo bueno de esto es que puedes tenerlo ahí. Y agarré mi herramienta de marco y le agreguemos algo. Puedes ver las actualizaciones en vivo. Entonces, dependiendo del tamaño de la pantalla, podrías tener este tipo de metido en la esquina Siempre previsualizando, mostrando tus animaciones y todos tus cambios Entonces eso es genial, es nuevo. El único problema con ello es previsualizar el escritorio. Un poco hacer que suceda. Pero realmente quiere el momento en que esto pueda cambiar boleto. Tengo muchas ganas de previsualizar aplicaciones telefónicas o sitios web móviles. Bien, mi versión de escritorio se aplaste un poco ahí, eso podría funcionar para ti Se puede abrir en otra pestaña y eso es un poco lo que sigo haciendo Podría acostumbrarme a esta nueva forma. Pero por el momento y el resto del curso por lo menos, voy a tenerlo en una pestaña aparte. Y muchas veces me gusta porque esto entra en otro documento u otra pantalla, al menos tengo otra pantalla que he conectado a mi computadora. Y lo tengo por aquí, siempre previsualizando este de aquí. Este tipo, no sale de la pantalla, o al menos no lo hace en este momento, no puedo arrastrarlo a esta otra pantalla. Está un poco atascado dentro de esta ventana. Bien, entonces depende de ti, cuál quieres usar, bien, hay un atajo para ambos. Espacio de un turno. K es el nuevo o espacio Option Command Shift que es el mismo en Mac o PC, o presentar la forma original que es Option Command Enter en una Mac y eso es lo que hace Alt Control Enter en una PC. Ahí vas. Bien, continúe con el rumbo. Actualización sobre. Voy a dar marcha atrás ahora y mostrarte cómo hacer este tipo de cosas de gradiente golpista Y hay algunos consejos y trucos y algunas cosas que podrían atraparte. Va a estar ahí ahora. Bien, así que acabo de hacer un tablero de aplicaciones Lo he llamado, bienvenido al viejo. Lo que me gusta hacer es con el F2 voy a hacer un frame por aquí. Bien, entonces solo escribe la tecla F. Me gusta hacerlo por separado de esta principal lo hace para que sea una unidad separada es más grande de lo que necesito un poco más de espacio para diseñar porque se recorta más adelante . Conseguir lo va a nombrar. Podríamos tener problemas para dibujar las manchas es agarrar la tecla P para la Herramienta Lápiz, lo siento, herramienta de pluma, y mira este vicio del festival de dibujo phi comenzar de nuevo aquí Lo que termina pasando es que me sale una forma que se le da para llenar. En realidad no está en mi animación. ¿Se pueden ver golpes por encima de él? Y necesito arrastrarlo ahí. Eso es una cosa que podría pasar. El otro va a deshacer. Empezaré a dibujar y pegaré la menor cantidad de puntos que tengas. Cuanto más bonito se ve esta cosa así que cuatro es bueno, tres está bien Los puntos de anclaje de Tyndall son malos. Y para conseguir una esquina suave, sólo estoy dando clic y arrastrando. Al hacer clic y arrastrar me dan puntos suaves. Pero el primero y el último puede anclar punto que los une a todos, termina siendo un punto. Por alguna razón. Puedes mantener presionada la tecla Comando en una Mac, controlar la tecla en una PC y hacer clic en mantener y arrastrar para suavizar eso. Voy a darle un relleno y trazo y ningún trazo. Y aquí es donde termina. Puedes hacer que se vea bastante victoria o malla bastante degradada como, bien, cambiando esto de sólido a radio y luego jugando con colores. Entonces se ve un poco, no se ve genial ahora. Pero una vez que superpones un par de estos, empieza a verse realmente genial. Así que voy a pasar de mi color primario a la versión apenas desteñida Estoy usando la radio para este caso. Puedes arrastrar esto por ahí. Bien. Lo siguiente que podría sorprenderte ya que vas a empezar a dibujar una forma única ahora. Si empiezo a dibujarlo ahora, bien, porque parece que está terminada esa otra forma, ¿verdad? Pero ahora lo que terminó teniendo mi segunda forma es realidad aplastado en mi primer vector, lo que puede hacer que sea difícil de animar Entonces, lo que necesitas recordar u olvidar en deshacer como lo hice yo, es cuando llegas a tu punto de meta, clic en Listo o presionas Entrar o presionar Escape un poco comete ese Víctor Y luego vuelve a la herramienta PIE para herramienta pluma y empieza a dibujar tu siguiente forma. Bien, Entonces puedes ver por aquí se convierte en un segundo Víctor. Y otra vez, voy a mantener presionada la tecla de control de barra diagonal de comando y llenarla con un. no tiene que ser Rachel. Puede ser lineal. Da click en este primer color aquí y voy a decir que eres ese color púrpuras en color, aunque la opacidad esté abajo, todavía tiene un Para que pueda ver ese color oscuro. Pero quiero bajar la opacidad. Cuando no. Y voy a dibujar una forma 3D. Los pesas. Y luego te vas, yo no golpeé. Bien. Entonces terminó siendo aplastado contra ese vector Como dije, no hagas un buen trabajo, Dan. Y hecho, y luego hazlo de nuevo. pesas. Bien. Entonces, qué formas dibujan cualquier cosa funciona. A veces salen geniales y a veces salen horribles, pero solo juegan con dibujar formas. tengo un relleno de fondo en el mío, un color ligeramente más oscuro para llenarlo. Se puede ver que estamos empezando a poner esas formas en marcha. Es difícil saber por dónde empezar. Empecemos a hacerlo y veamos lo malo que es. La otra cosa que me gustaría hacer es agregar un poco de desenfoque. Así que voy a ir a arreglar, desenfoque de sombra a capa. Haga clic en el sol. Y voy a decir haga clic en mantener y arrastre en el Zhou hasta algo. Cierra eso abajo. Voy a copiarlo. Intenta hacer clic en esa medida, Gary, y luego presiona Copiar. Y luego selecciona estas otras dos formas y pulsa pegar. Bien, veamos qué podemos hacer. Asegúrate de que esté de vuelta ahí. Tal vez cuando estés arrastrando Deshacer mantén presionada, Mayús mientras arrastras la barra espaciadora, Significa que no saltará fuera del marco. No lo sé, solo eso Making entonces tenemos nuestro primero, tenemos algo de blues. Hagamos lo que hicimos antes. Bien, así que fuimos, vas a ser una Opción de Comando Componente K, Tecla Alt de Control en una PC. Vayamos a Variantes. La variante termina por la parte inferior, lo cual es molesto. Solo adivina a dónde debería ir. Lo que voy a hacer es que quiero que suba aquí, pero no quiero que salte de mi conjunto de componentes. Quiero decir mantener la barra espaciadora. Entonces empiezo a arrastrar la barra espaciadora y luego voy por aquí. Excelente. Se puede ver. Agarró el conjunto de componentes, mantenga presionado. Cada atajo es Command Option Shift, y eso es Mac, es Control Alt Shift R. Básicamente solo estoy haciendo clic en ese botón ahí. Y tratando de impresionarte con mi conocimiento de atajos, ¿ necesitarás saberlo de memoria? No. Pero el ego, cambia el tamaño de los componentes establecidos para simplemente envolver esto en él. Bien, así que lo que quiero hacer es sólo éste. Solo voy a jugar con el tamaño y escala y simplemente como moverlo Y porque hay un poco de anís transparente y un poco de difuminado y Voy a ver lo bueno que es esto. Así que piensa en escala y rotación Y espero que podamos conseguir algo, podríamos conseguir algo de magia. No parece magia, Dan. Bien, saquemos nuestra animación. Así que voy a cambiar a chiflado que miren eso. Hay ganas de que yo esté ahí. Copié y pegué esto solo para ahorrar tiempo para poner todas las esquinas redondeadas Y pensé que había borrado todo, pero no borró el prototipo que estaba ahí dentro. Vete. Quiero que vayas a ti. Y quiero que vayas después de un retraso de cero milisegundos, que saltaremos de nuevo hasta un milisegundo Bien, quiero llegar a hacer smart animate. Quiero que entre y salga fácilmente. Puedes jugar con él usando ese deseo que quieras. Y cuanto tiempo quiero que tome. 5 s. Quiero ser como lento y malhumorado. 5 s es 5,000 milisegundos. ¿Bien? Y cuando ese esté hecho, cuando vuelva aquí y urban haga la mitad de lo que hiciste, bien, recuerda es la animación inteligente facilidad de entrada y salida 5 s, pero no recuerda esto por alguna razón. Después de un retraso de un milisegundos, el resto está bien. Ahora llegamos a usarlo. Podemos decir que cambió el panel de activos. Es practicar fuera. ¿Quién recuerda qué es el cambio al panel de Activos Shocker. ¿He mencionado siquiera? Es la opción dos. Opción uno, opción a en una Mac alterna entre capas ¿Puedes ver capas y activos? Es Alt 1.2 en una PC, especialmente las que tienes ahí dentro. Y se puede ver por eso que hay animación es más grande de lo que la necesito porque me dejan de hacer todo tipo de tamaños de fotogramas y va a encajar. Ahora puedo hacer click en esto y probablemente voy a iniciar un flujo aquí solo para que no salte a este de aquí. Ya lo tienen, voy a hacer click en esto. Voy a pegarle a Play. La otra cosa es cuando tienes que fluir, puedes ver que aquí tengo ese botón Reproducir , que es Andy. Ahora, espera la magia. ¿O fue bueno? No son palabras rayadas. Entonces te das la idea. Y aposté. Si lo estás haciendo, el tuyo se verá muy diferente. Practicé esto antes. He hecho esto 01:00 A.M. Me veía muy bien. Se ve realmente promedio. Ahí vas. A veces es solo la forma que eliges y los diferentes gradientes lo que decides sobre la animación A lo mejor necesita ir más lento. A lo mejor necesito un poco más de transparencia pasando. Lo único que en realidad notarás es que hay un pequeño salto en el mío. El mío tiene un pequeño salto. A ver si podemos encontrarlo después de los 5 s. Espéralo. Ahora. Entérate ahora, espéralo. ¿Puedes ver eso? Salta todo lo que buscábamos a su editor. ¿Puedes saltar esa otra vez? Repítelo. Y trabajo al revés cuando estaba probando como estaba, nunca había visto que eso pasara antes. No sé si es un problema de mí o es una versión actual del problema de Figma, o siempre ha estado ahí Jura que no siempre ha estado ahí. Pero básicamente si eliminas el blues de estas Animaciones, se va. Entonces alguien lo hizo con el borrón. No sé qué es, pero no está en tu versión y ya se ha ido para cuando este curso sea video. Pero, ¿vas? Vamos a ordenar esto porque hablamos de que estaba más limpio y por el momento, turno uno, no está limpiando. Sólo vamos a unirnos a la animación por aquí. Pero lo que podemos hacer es que podemos eliminarlo, eliminar completamente nuestro conjunto MainComponent Porque lo tenemos aquí. Podemos decir, voy a volver a la vista de diseño vectorial Shift E. Voy a entrar de aquí y voy a decir componente principal, restaurar el componente principal y vuelve, turno uno. Ahí vas. O puedes mantenerlo ordenado con solo hacer eso. O puedes cortarlo y ponerlo en su propia página. Entonces vamos a ir Nueva página. Voy a llamar a esta animación. Péguela aquí. Y voy a poner todas mis animaciones en esta página. Y vuelves a la página uno usando nuestro dulce atajo de página arriba, página abajo. Sé que algunos teclados no tienen arriba y abajo un, un paciente, otros. Entonces, si tienes un MacBook Pro del que a veces trabajo, cuando no tengo un teclado enchufado, tengo que mantener presionada alguna tecla de función para que eso funcione Eche un vistazo a su computadora portátil, vea si hay una página arriba, página abajo, si eso es realmente útil. Si tienes que mantener presionadas un montón de llaves, pero si lo haces como gran manera de ir entre tus páginas. Así que de vuelta a la página uno y esta de aquí, voy a Comando Opción Enter o Control Alt Enter en una PC. Y mira mi dulce animación. Y no estoy seguro de donde estamos viendo otra vez, pero miren lo minúsculo que es. Sí, eso es todo por sí mismo. Y por aquí, ahí está mi encantadora animación. Bien, eso es todo. Creo que lo que deberíamos hacer ahora es ir y nombrar ya a todos mis vectores, mi varianza, prometo scouts, honor, eso es lo que estoy a punto de hacer o ya es bastante tarde el día y estoy perdiendo la voz ¿Se oye eso de hablar al micrófono o al día? Y si, lo dejaremos. Ahí. Vete tú. Nombre variarás. Iré a hacer el mío más tarde. Bien, eso es todo. Te veré en el siguiente video. 39. Cómo dar retroalimentación sobre un proyecto de UX - The Critique Sandwich: Hola a todos. Oye, quería salir de la computadora y hablar contigo en persona sobre dar comentarios sobre proyectos de diseño de UX Entonces, ¿por qué estamos hablando de comentarios sobre proyectos es porque en el siguiente video, no estoy seguro de por qué está detrás de mí, pero el siguiente video de esta serie aquí es un proyecto de clase donde realmente lo vamos a enviar y hay, vas a estar buscando comentarios. Y el problema con el donde me encontré profesionalmente ahora es que como creo que cruzamos medio millón de estudiantes no fue en realidad hace bastante tiempo ahora Entonces, aunque quisiera hacer esto a tiempo completo, solo da retroalimentación y nunca volvería a hacer cursos. Todavía no podía seguir el ritmo de los proyectos de todos. Y quieres comentarios. Quiero que me des tu opinión. Entonces el trato es, es que vas, cuando envíes un proyecto, tienes que dar retroalimentación a otros proyectos de personas hacen algo similar o algo así. Bien, entonces vamos a deshacernos del trato. ¿Por qué lo hacemos? Hay dos razones. Quieres comentarios. Quieres comentarios críticos. Quieres ver si lo estás haciendo bien. Es agradable conseguir esa interacción, bien, es importante que crezcas como diseñador. Y probablemente lo más importante es que dar retroalimentación a otras personas le ayudará más de lo que cree. Y poder articularte, articularte en términos de lo que es, lo que te gusta, lo que no te gusta a otras personas realmente te ayuda a entender lo que te gusta, lo que no te Y te permite realmente ser bueno vendiendo tus ideas cuando estás presentando proyectos de diseño UX. Entonces es ganar-ganar, envías uno, que nosotros el siguiente proyecto y comentas sobre otros dos, nosotros lo pagamos adelante, bien, porque es bueno para todo lo que estamos haciendo aquí Trae tu laptop. Es bueno que vayas con la gente sobre la que estás comentando Es todo tipo de dónde. El problema es, es que no todo el mundo sabe dar retroalimentación. Algunos de ustedes lo calificarán. Así que ve a hacer eso. Te voy a dar mis consejos para que lo hagas. Sí, hagamos eso al principio, hablemos de las cosas que no haces que no hacen estos emojis bien hechos de pulgares arriba Eso no es útil para nadie. Entonces vamos a agregar un poco más de valor no tiene que ser párrafos. Pero te voy a dar una buena estructura en un segundo sobre cómo hacer algo significativo a la persona que lo estás haciendo. Y para que realmente puedas desarrollar tu articulación de revisión. Ni una palabra, pero déjame ir. Lo primero es, es que si ves algo que te gusta, ni siquiera sé qué decir porque ni siquiera estoy seguro de lo que estoy criticando Si ese es el caso, no estás seguro, en lugar de saltarlo, haz una pregunta, esa es una excelente manera de comenzar el diálogo, lo cual es increíble Pero también ayuda a la persona que está publicando el proyecto a ser un poco más para saber que la gente lo está revisando para que vaya a ser un poco más articulada sobre cómo lo están entregando, bien, explicándolo , tal vez poco de capturas de pantalla, tal vez un a y B. Así que haz una pregunta si no estás seguro y haz una pregunta específica, ¿Para qué sirve esto? No solo interrogación, ¿qué es esto? Sea un poco más específico para iniciar un diálogo. Entonces, si no estás seguro, haz una pregunta sobre el proyecto, bien, Entonces digamos que sí sabemos lo que están tratando de hacer Tenemos una opinión al respecto. No estamos seguros de lo que dice. Trayendo El Sandwich de la Crítica. ¿Qué es el Sandwich de Crítica? Entonces lo es, es una metodología que me parece. Funciona para mí. Entonces lo tomas, usa los bits que te gusten, tira los bits que no. Si tienes mucha experiencia, probablemente tengas una forma de hacerlo, ve a hacerlo por eso, pero va a haber mucha gente que en realidad acababa de hacer el curso Essentials, entrando en el Figma Advanced, a pesar de que son bastante nuevos en la industria, porque quieren mejorar estas habilidades Entonces ese es probablemente tú. Para dar una buena crítica. Me parece que son los sándwiches un poco formados por cuatro partes, bien, son dos pedacitos de pan y a trozos carnosos en el medio, o bits Vg, bien, porque soy vegetariano, pero son trozos criados son son trozos criados son En el bit medio está la carne real de la misma. No es tanta negatividad, es más la parte constructiva Entonces encuentro Leading With las cosas que te gustan al respecto, lo ayuda y deja que la persona reciba las partes que sientes que se podrían hacer mejor o tus preguntas sobre liderar con las cosas que te gustaría. Y terminando. El final fue fácil. Bien hecho, sigue adelante. Entonces ese es el sándwich, los trozos en el medio. Entonces hacemos una pausa, recogemos mis pensamientos ahí mismo. Hablemos de la parte carnosa del sándwich, de los buenos trozos Y hay dos partes para ello. Ahí está La Crítica y nuestra solución. Hablemos de que hay una Crítica primero y la parte más importante probablemente de todo esto Es lo que encuentro dando. Encontré críticas muy difíciles de dar bajo Dan llegó a complacer a todo el mundo chico. Así que me costó mucho dar críticas hasta que me di cuenta de que si cambio el posicionamiento de en vez de ser yo contra ti, bien. No creo que los botones creo que los botones son demasiado grandes. Por qué no dejar que los colores de esos botones. ¿Esa es mi opinión versus tu opinión? No la forma en que trabajo. A mí me parece complicado. Y la otra persona que lo recibe es es un es un ligero sobre ellos y su toma de decisiones. Si lo movemos a través de 1.2 en la persona y el proyecto, bien, encuentro que funciona mejor para todos. Bien, entonces digamos que estamos hablando los botones, del tamaño de los botones. Entonces, si digo algo más como considerar la persona, una persona experta en tecnología encontraría estos botones demasiado grandes. No lo sé. ¿ Se siente mejor que? No creo que piense que los botones son demasiado grandes y la persona encontrará estos botones demasiado grandes. O tradicionalmente, este tipo de persona o este tipo de tareas tiene botones de este tamaño. Tengo ganas de cambiarlo un poco más. Puedo ponerme realmente, y luego puedo ir a buscar investigación y tener cosas que respaldarla en lugar de a mí contra ti. Entonces eso es todo. Mira la tarea. Podría ser la tarea, podría ser la persona, lo que sea que estén tratando de hacer. Permítanme pensar en otro buen ejemplo de tarea. ¿Qué tal esta mala manera? Hubo demasiados pasos en este proceso de cancelación, yo contra ti. Mientras que si utilizo la persona y la tarea, digo que creo que a la audiencia le resultarán estos muchos pasos en confusos estos muchos pasos en el proceso de cancelación, bien. Se siente, Se siente bien y me data, tal vez no a ti, pero usar a la persona y luego encontrar la tarea problemática luego nos lleva a lo que podemos hacer a continuación. Mientras que si digo, no me gustas, la forma en que Diseñas es una forma complicada. De todas formas. Lo mezcló. Bien, Entonces después de La Crítica es el, hay que ofrecer una solución y no ser demasiado prescriptivo No sea como hacer un logotipo más grande, o hacer los botones más pequeños, o hacer que los botones sean 20 píxeles o 25 píxeles o 40 píxeles. Habrá muy específico. Sé más dirección apuntando como oye, ¿verdad, puedes expresar botones morales? Y oye, ¿has echado un vistazo a este sistema de diseño? Utilizan estos tamaños, se les da una audiencia similar. Ve a comprobarlo. Así que le permite a la gente un poco de libertad creativa, ¿de acuerdo? Y si, no seas demasiado prescriptivo, pero ofrezcas algo alguna dirección Bien. ¿Lo has probado es otro bueno? Podemos explorar es un lenguaje que nos permite a ambos decir tú, La Crítica, y no sé lo que diseñas de todos modos, para salir juntos a explorar cosas en lugar de Enmascarado chocando Van Critique solution, la mitad del Sandwich Bien, eso es. Ese es El Sandwich de la Crítica. Ahora, una última cosa es que quería darte permiso para poder criticar el trabajo de cualquiera Podrías ser como Own, no quieras, se ven mejor que yo. Bien. En este espacio y es Bring Your Laptop mundo. Está bien porque la persona que recibe la Crítica, aunque sea realmente buena y solo la llevas haciendo tres días. Ellos lo saben. Y ya sabes, y sé que estamos practicando nuestras críticas Y el primero es, voy a ser muy bueno. Se te permite no ser muy bueno en eso. Y luego a medida que superes el curso, cada vez más, vas a mejorar en ello. Te convertirás en un mejor diseñador de UX, más capaz de comunicar tus ideas. Así que vete y haz eso. Bien, eso es. Vamos a entrar en el proyecto de la clase y somos Dan limpiar la oficina. Está dejando ir las cosas como yo voy al principio y tengo que ordenar más. Deja que esa cosa borrosa al fondo ahí, ya ves que es nuestra caja de impresión 3D Estoy haciendo algo de impresión 3D con unos plásticos apestosos y necesita un, lo que él llama contenedor de vivienda de todos modos Entonces todo está en pedacitos. Todo está volando, pero la creatividad está en todas partes. También falta. Hasta el siguiente video 40. Proyecto de clase 04: animación de fondo: Bien, tiempo de proyecto de clase. Para este video aquí cubriremos los proyectos de clase si no los estás haciendo, saltar al final de este video, tengo como si tuviera un montón de actualizaciones que vienen a través de Figma mientras grababa este video Entonces te muestro un poco al final cómo me mantengo al día camino a seguir, solo salta al final Pero si estás haciendo los proyectos de clase, vigila. Estará ahí al final esperándote. Básicamente, quiero que hagas gráfico de fondo animado, bien, usando las técnicas de los últimos videos. Así que echemos un vistazo a los imprescindibles. Así que Fondo Degradado, usa tus propios colores de marca. Experimenta con el desenfoque y los diferentes gradientes, pero depende de ti si los usas . Sólo juega con ellos. Podrías terminar con algo más de colores planos de victoria. Eso depende totalmente de ti. Sin embargo, quieres asegurarte de que estás usando la animación y cuando haces tu animación, está en ese conjunto de componentes en lugar solo fotogramas que están conectados. Por eso. Quiero decir, recuerden, tuvimos que separar la malla de degradado en su propia página Teníamos este componente degradado, K y yo teníamos variantes dentro de esto, bien, y animamos entre estos en lugar de hacerlos. En esta página aquí. Hemos tirado el componente dentro de aquí. Eso es lo que me gustaría ver. Bonita página ordenada. A unos textos de bienvenida y dos botones. Los botones necesitan ser ordenados diseños para que puedan ser todos suaves y ajustarse para la edición de texto dentro de ellos. ¿Y qué quiere decir con entregar? Quiero ver un video del mismo. Sé ojalá todos podamos hacer videos. Recuerda que Mac lo hace, agregar PC tiene un poco de software para grabar tu pantalla si lo has intentado y realmente simplemente no puedes hacer que eso funcione. Un par de capturas de pantalla de las diferentes Animaciones mostrándolo un poco y tal vez mostrando este tipo de todos conectados usando esta vista Bien, ser capaz de demostrar que lo hiciste. Nos gustaría verlo. Voy a ver la animación de todos, bien, Así que subirla a la página del último proyecto de asignaciones en este sitio web. Y luego a diferencia de los demás, me gustaría compartir lo que has hecho en las redes sociales, estas cosas hasta ahora como principalmente solo para ponernos día a todos y mantenernos junto con el curso, practicar algunas de las técnicas. Pero éste, es bastante visual, así que me encantaría verlo en las redes sociales. Aquí están mis diversas plataformas de redes sociales. Así que elige tu veneno y me encantaría que lo compartieras conmigo, me etiquetaras en él y uses el hashtag Figma Advanced, porque es una forma en la que puedo buscar y simplemente ver lo que la gente está haciendo para este curso en particular Pero estoy buscando, si, cuando solo busco cosas que sean para diferentes cursos, estoy empezando a usar estos hashtags, así que usa eso también. Y me encanta que compartas cómo va. Problemas con los que te topaste con cosas que superas, cosas que aún no puedes hacer. Porque recuerda, y la gente va a estar comentando tu trabajo Así que asegúrate de agregar una pequeña explicación. Cosas que estabas tratando de lograr Pueden problemas que tengas porque va a haber pupal alrededor para ayudarte. Así que recuerda, cada publicación que pongas comentario sobre el trabajo de otras personas. Y esta va a ser, echemos un vistazo. Va a haber cosas como la animación. Sí, pueden ser algunas cosas que quieras comentar sobre eso. Pero en términos de eso, podría ser el tipo, los tipos de botones que espacian. Entonces, si puedes usar tu nuevo Sandwich encontrado, tu Sandwich de Crítica, noticias Oye, quería agregar esto al final solo porque estaba trabajando en el siguiente video y solo lo estoy haciendo comenzó a abrir Figma ya que tienes 42 nuevas actualizaciones, estaba como, es bueno, como a nosotros nos encanta que el producto se actualice, lo nosotros nos encanta que el producto se actualice, que hace que Figma Pero también es por supuesto crear. Lo hace complicado porque siempre lo están actualizando. Algunos de ellos productos más heredados en la industria del diseño no reciben grandes actualizaciones. Así que de todos modos, ese es mi problema. Lo cual es interesante para ti, es que después de este curso y quieres estar al día de lo nuevo en Figma, bien tableros, solo quieres ser increíble en Figma Hay un poco dos lugares a los que voy cuando busco nuevas actualizaciones para Figma. Es éste de aquí. Figma.com slash release guión notas y éste de aquí, Lo nuevo es la página picante de like look, tiene buenas demos pero no cubre todo, solo las cosas grandes contundentes En las notas de lanzamiento. Es un poco más básico y una linda lista y muchas veces pasa por cosas como quien no sabía eso. No sé si termina. Yo estoy como, Oh, eso es triste. Pepita. Ellos no creen que sea importante, pero yo sí. Bien, y lo puse en algo así, Curso Avanzado o Curso Esenciales. Entonces estos son los dos lugares a los que voy para recibir actualizaciones. Y entonces muchas veces lo que puedes hacer es como, voy a seguir actualizando el curso. Pero también si hay algo a estrenar, estrenar y encuentra el término, cópialo y pega e intenta encontrar algo más de información. A menudo, Figma tendrá la información ellos mismos. Entonces, ¿qué hay de nuevo? ¿Y notas de lanzamiento? Estas URL pueden cambiar, ¿de acuerdo? Los términos son generalmente los mismos. Habrá notas de lanzamiento en alguna parte y lo que hay de nuevo en alguna parte, luego vas. Así es como paso hasta la fecha y cómo puedes hacerlo, bien, disfrutar del proyecto de clase Haz un fondo genial, y te veré en el siguiente video. 41. 41 Texto Houdini: Hola a todos. Vamos a hacer esto, ¿qué tan genial es eso? Bien. Vamos a hacer texto houdini Va a aparecer de la nada. Vamos a, sabemos enmascarar ya lo que realmente estamos haciendo es un, es un efecto genial pero también nos permite hacer timing. Eso son dos animaciones diferentes. Vea el gradiente de fondo moviendo esta animación sucediendo en diferentes momentos en nuestra página. Aquí está otra vez, simplemente agradable y limpio. Ahí está mi animación, mi fondo, no tengo un trillón Así que mira, diferentes marcos todos conectados porque estoy usando varianza y porque estoy usando varianza separada, significa que no todos tienen que suceder al mismo tiempo, mientras que antes, recuerda esto. Bien, es divertido. Pero la animación está cronometrada al mismo ritmo porque todas se dirigen al siguiente fotograma Mientras que ahora, debido a que son varianza separada, pueden tener su propio ritmo y su propio tiempo y su propia flexibilización tiempo y su propia flexibilización Creo que lo he explicado en exceso lo expliqué. Yo tengo. Sólo hagámoslo. Todo bien. Vamos a saltar. Bien. Lo primero es que necesitamos dos cuadros de texto separados. Así que me he ido por una tapa Viv Techno, crea tu propia pantalla pegadiza de bienvenida Podría ser que esto es Country Bienvenido al Rock Clásico. Solo asegúrate de que sean dos cuadros de texto separados porque queremos animarlos por separado. ¿Bien? Haz lo que quieras con las fuentes, ¿de acuerdo? Y pesos de fuente. Solo necesitamos dos cajas separadas. Lo siguiente es que necesitamos rectángulos que vamos a usar como máscaras Entonces esta es una de las pocas veces voy a usar la herramienta rectángulo, que es el Arche en lugar de la herramienta de marco porque no tiene que tener todos los poderes especiales, solo necesita ser una caja sobre la parte superior El atajo genial aquí es Shift. ¿Bien? Shift O es un poco útil en tu teclado y para mostrar el modo de esquema. Bien. Así que en realidad se puede ver porque lo encubrimos. Es difícil de ver. ¿ Lo hicimos bien? Sí, lo está encubriendo. Y lo que podría hacer es con mi herramienta V para la mudanza, podría conseguirla así que se alineara relativamente cerca del fondo para asegurarme de que lo cubra todo. Voy a volver a ser la herramienta rectángulo y dibujar otra y solo conseguir que se ajuste al fondo. Ahí vamos, turno para volver. La otra cosa que tiene que pasar es que el texto tiene que estar encima del rectángulo. Para el trabajo maestro, voy a moverlo hacia atrás y voy a usar mi atajo. Ok. Abajo junto a tu llave están los corchetes abiertos y cerrados. Si golpeo el abierto, va todo el camino hasta la parte posterior del marco padre, que se llama Welcome Alt one. Y desafortunadamente, se ha ido detrás de mi malla de gradiente. Puedes ver que ha desaparecido detrás del fondo genial para hacer esa herramienta un poco más fácil, echa un vistazo por aquí. Mira esto. Si uso ropa abierta, cierro abierta, puedes ver que el rectángulo 18 va todo el camino hasta la parte superior, todo el camino hasta la parte inferior. Que a menudo es lo que quiero hacer, pero si quieres subir en pequeños pasos, bien, mantén la tecla de comando abajo en una tecla de control en una PC. Y mira esto. Saltará entre sus amigos. Bien, ¿lo ves? Se puede obtener justo detrás del texto. Lo mismo con usted mantiene el comando o control en una PC y usa esos corchetes para que vaya a donde lo necesite. Bien, hagamos las máscaras ahora. Entonces lo que tiendo a hacer es que puedo bloquear el fondo. Bien. Voy a hacer doble clic para agarrar la malla de degradado, en la que terminé sumergiéndome demasiado. Y puedo cerrarlo usando mi dulce atajo que nadie recuerda Vamos turno de salida. Eso significa que puedo arrastrar a través y solo obtener solo estos dos bits. ¿Bien? Sin embargo, lo que tiendo a hacer es dejar la cosa desbloqueada. ¿Bien? Y lo que hago es que los entiendo a todos. Así que he agarrado tanto el rectángulo como el texto y el fondo y solo mantengo presionada la tecla shift y click Lo hago durante todo el curso, así que ya no voy a explicar eso, pero eso es lo que hago. Ustedes turno. Haz clic en el fondo para deseleccionarlo, y tengo todo debajo. Hagamos una máscara. Boom. Bien, haz lo mismo por este. Boom. Hay un atajo u opción de comando M. Bien, estoy de vuelta. No sabías que fui, pero paré la grabación. porque si presionas la opción de comando M , minimizará todo. Bl bien. No golpees esa tecla. Ese es en realidad mando control M. Es un atajo. Nunca uso hover por encima de él. Podría ser algo que uses lo suficiente para recordar. Yo no. Y una cosa conmigo es, ¿ves que está recortada de la parte inferior de mi texto? Entonces voy a agarrar mi rectángulo y solo hacerlo un poco más profundo. Realmente no importa lo grande que sea, siempre y cuando esté cubriendo el fondo ahí. Siempre y cuando esté mostrando todo mi texto. Porque va a saltar desde abajo. Ahí vamos, Turno dos. Bien, así que tengo mis máscaras en realidad no ha hecho mucho, ¿verdad? Han aplicado más, más, más. Pero el texto dentro de este grupo de máscaras ya puede desaparecer. Eso es lo que queremos. Necesito tres variantes. Voy a animar entre ellos. Bien, aquí es donde estamos en el mismo punto para el miembro de degradado de fondo. Lo hicimos un conjunto de componentes con una varianza y luego animamos entre aquellos con todo seleccionado. Voy a ir a la opción de comando control opción K en una PC para que sea un componente. Comendamos el control en una PC para darle un nombre. Animación de página de bienvenida. Lo que vamos a hacer es tener una variante y otra variante. Podría hacerlo en esta página aquí lo que podría hacer es simplemente agarrar todo el conjunto de componentes ir a cortar ir página arriba y pegarlo en esta página. Dale su propio turno de spot a. Lo que quiero hacer es la primera, esta primera variante llamada default. Cambiemos el nombre de éste. Llamemos a esto one frame one, shift tab sube uno, así podemos renombrarle este también. Comando, va a ser cuadro a tabulador de cambio. Ese es un atajo aleatorio que usé mucho para renombrar. Bien, control de comando R en una PC. Llamemos a este fotograma tres solo para que quede más claro. Weedly, necesito que estén en orden porque tiene más sentido Bien, es el marco uno. No voy a ver nada. Entonces lo que voy a hacer es que voy a hacer doble clic hasta que me llegue el texto. Y voy a mantener turno y arrastrarlo hacia abajo. O usa mis teclas de flecha en mi teclado solo para tocarlo hacia abajo para que no pueda verlo. Bien, El techno en este de aquí va a ser el mismo Voy a arrastrarlo hacia abajo, sostén. Si salta de su cajita, ¿cómo paramos que salga de su cajita? Bien, vamos a decir arrastre hacia abajo. Contempla la barra espaciadora. No saltes la parte espacial al rescate. Todo bien a todos. Oye, yo quería saltar aquí. Algunas personas se toparon con un problema en el curso, así que voy a actualizarlo. El principal problema era, bueno, lo que tiene la gente es que estaban como arrastrando esto hacia abajo y no estaba desapareciendo Bien, de lo que tienes que tener muy claro y de lo que no estaba claro en el video es ver al grupo de máscaras. Este es el grupo de máscaras. Hay un rectángulo, hay un poco de texto si agarras a todo el grupo. Bien, que a veces parece que tienes el texto y si lo arrastro hacia abajo, no está funcionando. Es porque en realidad tengo el texto más el grupo, más el rectángulo. Entonces tienes que sumergirte. Y lo que hice en los videos, acabo de decir rápidamente doble clic para ir dentro del texto y luego arrastrarlo hacia abajo. Bien. Una forma más fácil hacerlo a veces es cuando haces clic en él. Bien. Se pueden ver todas estas cosas. Solo encuentra la palabra real en el panel de capas. Puede que tengas que bajar las cosas. Puede que tengas que ir bien y encontrarlo y decir, bien, ahí está lo del techno e incluso entonces tal vez no lo arrastres Podrías usar tu flecha hacia abajo en tu teclado, ¿de acuerdo? Por techno, bien, puedes mantener turno y golpear hacia abajo y desaparecerá hacia abajo. Solo necesitas que esté justo fuera de la pantalla. Bien. Ese parece ser el mayor culpable de tener problemas es que arrastrarlo hacia abajo no está funcionando Bien. Es solo porque no estás seleccionando específicamente el texto. Todo bien. Siga adelante. Bien. Nada. quiero que aparezca primero pero no a ti. Vas a bajar. No hagas eso. Asegúrate de tener el texto seleccionado dentro la barra espaciadora de retención de marco para que no salte. Nada de lo que aparece luego desaparece. ¿Entuviste la idea? Ahora tenemos que vincularlos. Turno decimos que vaya esto decimos en retraso de. Dejémoslo tal como está. Consiguió un fotograma dos para animar de forma inteligente. Vamos a entrar y salir y regresar. Hagamos lo mismo por éste. Ahí vas, pero por alguna razón no recuerda. Tiene que ir a después del retraso. Nuevamente, todo lo demás es bueno. Bien, usemos página abajo. Bien. Aquí no tenemos nada. Ahora vamos a mi activo opción dos. Y quiero alargar esto. Uno de mis problemas es que el primer fotograma es invisible, lo que hace que no sea un muy buen componente por aquí. No puedo encontrar una manera en este momento de actualizar la miniatura aquí Puedes hacer la miniatura para todo el proyecto, pero no para componentes individuales Avísame si tienes que trabajar o si eso es una actualización que ha pasado. Házmelo saber en los comentarios. Bien, entonces tenemos nuestra caja invisible. Vamos a probarlo. ¿ Funciona? No lo sé. Bien, da clic en él. Opción de comando Entrar. Opción de control Enter. Es un poco rápido. Pulsa nuestra tecla en tu teclado para restablecerla. Bien, necesito un momento mejor, pero guardemos eso para el siguiente video. Te voy a mostrar algunas de las nuevas opciones de flexibilización en Figma. Hay algunos geniales, pero ahí tienes. Digamos que enmascara el texto y cómo vamos del temido fotograma a fotograma Todo tiene que ser igual hasta ahora. Tenemos algo que la animación de fondo va muy despacio y nuestra animación de texto es suceder súper rápido. No todos tienen que hacer lo mismo porque somos usuarios profesionales de Figma Bien, ya voy a ver en el siguiente video. 42. Cómo usar las animaciones de primavera en Figma: Hola a todos. En este video vamos a ver estos nuevos presets o nuevos presets aunque los presets de Spring tendrán un vistazo a los cuatro que tendrían costumbre en Yo, lo que voy a hacer es hacerte construir algo para demostrarlo todo, que lleva el resto de este video. Pero si solo quieres ver lo que hacen, ellos hacen esto. Eso es echar un vistazo a lo que construimos. Volvamos al principio. Estamos vigilando el fondo aquí. Mira, la primavera general. Es gentil, curiosamente bastante rápido. Es rápido. Bouncy es muy bien llamado hinchable y lento es lento. Si eso es todo lo que querías saber, eso es lo que hacen, puedes seguir adelante. Pero si quieres construir esta superposición para practicar superposiciones y practicar algunos de nuestros atajos. Sígueme. Construyamos este artilugio. Para empezar. Me he saltado un par de pasos He hecho una nueva página. Bien, acuerdo, son las pruebas de animación de primavera, no Missy sube nuestra hermosa página en la que va a trabajar solo mantén todo separado He editado un marco de iPhone 14, hago cualquier tamaño que te guste, y eso es lo que va a cambiar a mis activos. Entonces opción a, alternar a esta opción 12 capas de activos. Bien, voy a encontrar ese nav que hicimos antes. Se puede hacer con cualquier cosa, ¿de acuerdo? Sin embargo, la única cosa es que vamos a establecer los pop absolutos hacia arriba por la parte inferior como viste, y eso se llama superposición. Hemos hecho overlay en Essentials, oso, podemos volver a hacerlo aquí. Lo único para que la superposición funcione es que este consciente sea una vieja Instancia solitaria. Entonces voy a volver a cambiar a capas. A quien se acuerda de la opción uno, solo dejamos que esa. Bien, entonces ahí está mi componente. La superposición no funcionará a menos que haya un marco. Entonces voy a hacer clic derecho en él y decir selección de fotogramas. Dar mi marco y nombre. Nav pop up. Ahora vamos a poner la pelota rodando. Entonces, ¿dónde tiene que estar? Puede ser donde quieras. Voy a poner el mío en la parte superior. Simplemente no puede estar en la página tiene que venir de otra parte. Entonces esto de aquí, me gustaría agregar una animación. Así que cambiando, arrastrándolo a cualquier parte, un poco quieres hacer eso Puedes hacer eso, supongo, y cambiarlo después. A veces, sin embargo, solo quieres tener este marco seleccionado y listo. En realidad, agreguemos una interacción manualmente para decir cuándo se hace clic en ella Después de un retraso de hola 1 s, me gustaría que abriera una superposición de Nav pop. Ahí es donde no lo hará si no es frame, no aparecerá ahí a ahí está. Mi ventana emergente de navegación Va a estar abajo, va a ser ningún instante, no sonríe Animate. Se va a mover. Se va a mover desde abajo. Y estas son las cosas viejas, más tradicionales. Ahora bien, estos de aquí, la Primavera, los llaman Primavera, pero eso suena como un gentil cuando empezó el principio. Chinchillas. Chinchillas. Ahí hay un poco de elasticidad, pero una primavera suave Está bien, se da para ponerte a prueba, amigo mío, vamos a ir Opción de Comando Entrar, Control Alt en una PC, voy a dejar de decir eso Me golpeas en la cara. No más previsualizado, tenía un adelanto. Ahí. Está reventado por la parte inferior y golpea Refresh, y va a volver a ese primer fotograma que tenemos Así que arreglemos eso. Digamos que tienes unos flujos empezando por aquí. Bien, entonces vamos a comenzar el flujo. Y significa que no intentará saltar de nuevo al cuadro porque estamos en un flujo atascado aquí. Ahora bien, si golpeamos nuestro, mira lo gentil que es la navegación. 0 es encantador. Puede que suba y luego vuelva a bajar un poco, un poco de primavera. Entonces vamos a saltar de nuevo a la otra pestaña. Recuerda, dependiendo si estás cuando el navegador o si estás en la versión de escritorio como yo, mantén presionado Command en una Mac, Control en PC y 123 dependiendo de cuántas pestañas tengas abiertas. Voy a ir a por el mío. Si estás encontrando ese atajo, difícil de recordar, esto es raro. Me gusta comandar Figma cambiar páginas. No sé si ya lo hizo de todos modos. Me gusta controlar las páginas. ¿Puedes saltar a esa? Y entonces la opción es esta de aquí, dentro de aquí es opcional o alternativa en una PC o lo que sea que vaya a funcionar para usted. 12 son capas en activos, eso es Opción o Alt, y Comando o Control es 2.3. Salta entre los dos. Ahora, eso no fue útil, Dan, bien, lo que estamos haciendo, vamos a duplicar esta carga para que podamos verificarlos todos y practicar haciendo algunas animaciones diferentes y atajos de aprendizaje Y usa mi herramienta tipo. Y voy a escribir gentil. ¿Deletrearlo bien? Y voy a volver a cambiar al modo de diseño. Schiff shifty no funciona cuando estás en el tipo de golpear Escape, luego Shifty voy a asegurarme de que esté centrado y, y grande en Porque voy a duplicarlo y eso es querer ver todos los diferentes cuando estoy adivinando Entonces voy a copiarlo y pegarlo. El comando D lo duplicará. ¿Y cuántos quieres? No puedo recordar. Para 54. Sí, cuatro. Desplazar uno. Verlas todas. Este va a ser rápido. Esta va a ser hinchable. Y éste, va a ser lento. Genial, porque lo copiamos y pegamos de esa primera Si voy al Turno E, Ahora, verás que todos estos tienen las mismas conexiones hechas. Todo lo que tenemos que hacer es ir después de un retraso, no gentil, sino rápido. Tú después de un retraso. Penalti suave. Usted después de retraso. Lento. ¿Qué hace la primavera personalizada en el siguiente video? Porque lo que queremos hacer ahora es que empecemos nuestro flujo. Suave. Restablecer riesgo puede herramienta. Asegurémonos de que estén conectados. De lo contrario no pasa nada. Bien, entonces volvamos a éste y digamos, éste. Va a su onClick, vaya a, van a cambiarlo a instantáneo para que yo pueda hacer lo mismo por todos estos Hiciste clic, ve ahí. Tú, cuando estás click para ir allí. Bien, ahora probemos nuestro flujo. Para restablecer aparece muy bien mirando hacia abajo por la parte inferior aquí y usa mi tecla de flecha. Rápido. Es rápido. Bouncy. Bouncy, lento Lento. Bien. Nos mostraste al principio y luego nos hiciste hacer buenas estas probabilidades para aprender cómo funcionan las superposiciones Y tenemos que mover algunos de sus atajos. Muchas cosas. Un bonito y genial. Entonces esos son los presets. Hagamos algunas cosas personalizadas y aprendamos cómo funciona eso en el siguiente video, dispuestos a hacernos tomar años para construir algo, para probarlo todo. Él lo hará. Es phon lo estás disfrutando. Sí. ¿Qué tal independientemente del naranja, el siguiente video? 43. Animación de primavera: cómo crear animación de primavera personalizada en Figma: Hola a todos. En este video vamos a ver esta configuración personalizada de Spring. Vamos a ver la diferencia entre rigidez, máscaras de amortiguación Hay una relación entre todos ellos más el tiempo. Qué carajo es esto lo cubrirá todo en el video. Pero si quieres la versión corta, la versión corta es esta primavera es lo elástica que es algo básicamente cómo de atrás y adelante va a ir antes de que se detenga Por ida y vuelta. Quiero decir, esto como el vaivén de ida y vuelta en un resorte más rígido y la cosa se pone más hinchable un resorte más rígido y la cosa se pone más hinchable La amortiguación, por otro lado, es básicamente la cantidad azul o resistencia que hay a esa primavera, no le dan ninguno, y simplemente continúa para siempre. Dale cargas. Básicamente no va a ninguna parte misa. ¿Qué tan pesado es eso? Es muy pesado. Se siente cada, al menos. Dale aún más matemáticas. Esta cosa es súper pesada y está luchando contra la Primavera. Va a tardar una eternidad en detenerse. Ahí vamos. No ensuciar mucho las cosas como una pluma en un resorte súper elástico sin amortiguación Bien, esa es la versión corta. Aguanta y nos sumergiremos y configuraremos esta pequeña cosa de botón porque esto es un poco útil para saber cómo hacer. Bien, hagámoslo. Bien, para comenzar, solo voy a usar la página que estamos usando para nuestra prueba Spring Animations. He hecho un marco. He dibujado algo que parece un botón. Es sólo un marco. No voy a hacer componentes por el momento porque no quiero perder mi panel de activos porque esto es solo una demo. Entonces lo que quiero hacer es configurar el primero. Consigamos algo de mi opción de panel de activos para detenernos en una PC. Voy a usar el icono del corazón. Podemos usar ese mismo truco de Superposición para jalarlo. Bien, entonces necesita ser un frame Command Option G o Control Alt G en un PC Command R para cambiarle el nombre, llamemos a este punto caliente. Lo que voy a hacer ahora Shift E o los atajos Dan, estás aplastando a la gente. Se te permite simplemente hacer clic en prototipo. Entonces por qué no quiero hacer es que quiero que esto vaya a eso, me gustaría que fuera al click tan bueno. Podrías notar que podrías estar de barril. De barril. La mente también debería estar de barril. Y básicamente trata de adivinar si estás en un dispositivo móvil o de escritorio, y cambia el idioma, lo que confunde a todos En fin, onclick están de barril, no importa. Y entonces me gustaría que fuera a abrirlo overlay, a lo mejor tu frame tiene que estar fuera de la página. Voy a ir a corazón. Sólo voy a conseguir que vaya al centro. Voy a conseguir que se cierre cuando haga clic en cualquier parte alrededor del botón solo para detener la animación para poder reiniciarla. Vamos a conseguir que se mueva desde la derecha es bueno para mí. De hecho, tengamos el ajuste preestablecido suave como una buena comparación. Ahora lo que quiero hacer es querer otro de estos. Estoy manteniendo presionada la tecla Opción en una Mac, tecla alt en una PC y cambio para arrastrarla hacia abajo y darme otra. Y lo que quiero para este es que quiero que sea gentil. Vayamos a Spring personalizado y dejemos que el primero B. Juguemos con rigidez, básicamente es cuántos rebotes va a hacer Así que mira la línea aquí para el género simplemente va un poco. Y esta línea aquí es donde va de derecha a izquierda. Y sólo va a ir un poquito más allá de donde tiene que ir y volver un poquito, pero un poquito porque es gentil. Pero si agarré la rigidez y digo Europa 500, digamos que va a ir trayéndolo todo el camino pasado digamos que va a ir trayéndolo todo el camino pasado . Se puede ver un poco aquí arriba Mira, mira, están rebotando positivo. Entonces lo que haremos en realidad es hacer la primera demo con una rigidez de lo que era el 100 predeterminado, ¿verdad? Sí, vamos a hacer 500. Duplicemos éste de esta manera y hagamos exactamente lo mismo. Y cambiar éste a K de rigidez 100. Vamos a ir a 2000 cantidad loca. Ahora, vamos a demostrarlo. Ya no te estoy diciendo el intestino visual para el adelanto. Bien. Vamos a asegurarnos de ir a la correcta. Es usar este. ¿Bien? Y lo que quiero es el primero, voy a ir a estar en forma de pantalla en esta primera. Ese es el tipo de preajuste suave, pero R1, cuando subimos la rigidez a lo que era 500. Mira, cuántas veces rebota de un lado a otro. ¿Cómo puedo primavera fuertemente es? Vamos a subir, no puedo recordar lo mucho que fue. Pero puedes ver más bajo cuanto más alto se pone, más rebotes tiene que hacer Ahora lo interesante con la rigidez es que el tiempo juega un factor importante. Entonces voy a ir comando a controlar a en una PC para cambiar las pestañas. Y voy a decir, voy a hacer una tercera. Voy a estar molesto porque no los hice lo suficientemente grandes como para tener un tercero Este de aquí, voy a duplicar y no voy a cambiar nada excepto por, mira aquí abajo, vamos a ver qué pasa cuando cambiemos la hora. Se va a perder con todo esto, solo hagámoslo primero. Entonces es 10151. ¿Te acuerdas de eso? Si lo cambio a 2 s o 2000 milisegundos, estás como, por qué esto va cambiar y de esta manera simplemente seguir confuso Ya lo he deshecho. Así que básicamente estamos diciendo es que voy a ir 12345, tal vez un pequeño sexto uno a los 1006 resortes de ida y vuelta Entonces tiene que caber ahí en 0.8 s. genial. Pero si cambio la hora, quiere hacer esas mismas seis un poco atrás y cuarenta Pero tiene la hija de mucho más tiempo Así que la rigidez de la Primavera tiene la menor. Entonces hace un poco lo mismo seis de ellos. Están todos en su taburete. 123456. Bien. Pero tiene que tomar más tiempo. Entonces dice el Primavera en ese tieso, si tiene que tomar tanto tiempo hacer seis de ellos. ¿Estoy ayudando? Bien, vamos a previsualizarlo. Vamos. Estamos comparando este, que es como muelles de seis pies traseros sucediendo bastante rápido. Este todavía son seis resortes de ida y vuelta, pero tiene que llevar mucho, mucho tiempo porque se lo dijimos a la Primavera no se ve muy rígida ¿Va claro como barro entonces hagamos algunos otros y veamos qué podemos conseguir un mejor, duplicar el gentil otra vez. Y voy a cambiar el color para el salto, cortarme ir. Y en cambio va a ser un buen color, pero un cambio de color. Veremos la amortiguación. Entonces, qué es la amortiguación, si sabes, los amortiguadores ralentizan un poco la forma de Primavera lo describo en la forma en que ocupa mi cabeza es poco como agregar un montón de pegamento o melaza a la animación para ralentizarlo un poco y dejar de ser tan libre movimiento Bien, así que hagámoslo. Vamos a 50. Da click en éste. Tú, todo vuelve a ser gentil. Bien, vamos a cambiarlo por un Spring personalizado. Entonces ahí están los valores por defecto humedeciendo en uno. Esto está amortiguado. Amortiguación al estar en. Mira éste. Vamos a humedecer a los 50. Se puede ver que realmente cambia la gráfica ahí, pero echemos un vistazo a la animación. Entonces te vas y haces clic en éste. No se ve ninguna amortiguación, sin pegamento, sin melaza, sin anillo amortiguador de los resortes Springs se queda para enloquecer. Entonces cambia la rigidez. No pienses que la rigidez piensa cuántas veces rebota de un lado a otro porque se deja a mucha humedad. Simplemente va para siempre. Y este de aquí, la rigidez otra vez, simplemente no tiene límites Entonces echemos un vistazo rápido a esos dos. Entonces este de aquí, porque cambiamos la amortiguación, almacenamos la misma rigidez, pero terminamos arrancando el tiempo un montón de tiempo para obtener muchos de ida y vuelta y mirar Se puede ver la misma rigidez, pero nos cambió el tiempo. Está un poco al revés en términos de mirar los números, pero tiene sentido cuando realmente lo estás haciendo Si querías tener más amortiguación, bien, va a ralentizarlo así que no necesita mucho tiempo para ir y venir. Primavera, cuántas veces quiero que vayamos de un lado a otro amortiguando, melaza gluey, cosas de miel para amortiguar Déjame duplicar y cambiar el color de éste. Vamos a ver una misa. Bien, me he ido por hiperscaler de los 90 ¿Alguien entendió eso? Si naciste en los 80, quizá lo sepas de todos modos Entonces por qué no quiero hacer es mirar este es gentil. Entonces cambiémoslo de suave y pasemos a misa de primavera personalizada, qué pesado es algo. Entonces estos son los incumplimientos. Esto sube la masa a estaño, misma rigidez, misma amortiguación, pero el tiempo se hizo muy largo Hagamos uno más y hagamos la misa. Qué pesado es algo, hasta 500. Mira eso. Va a tomar, vamos matemáticas Stan, 80 s por minuto y 20 s. buen trabajo, Dan. Vamos a previsualizarlos. Y ese tipo, vuelves a entrar, mira, es súper pesado. Bueno, este extremadamente pesado. Listo, extremadamente pesado. Pero tiene que hacer todas sus espaldas y cuarenta. Porque dijimos la rigidez ahí. Cuántas veces de ida y vuelta tiene que ver eso. Entonces. Va a estar ahí por un tiempo Quieres ver una película, no lo sabes. Bien, hagamos una más. Y hagamos exactamente lo mismo. Así que vamos a tener un lío bajo, tener la amortiguación baja y el tiempo, o la rigidez hasta 200 Ok. Y hagámoslo mucho tiempo. No estoy seguro de cuánto tiempo puede durar esto. ¿Eso está al máximo? ¿Qué hay a las 2 s? Ir minuto 20, el sedimento al 21 sube a 10,000 Entonces 10 s. Así que vamos a ir y vamos. Oh, hay barba o en tu teclado, solo para restablecerla. Aquí vamos. Él va, no puedo realmente lo que hicimos. Nosotros no bajamos la amortiguación y lo hacemos en el lío abajo y volteamos la tasa de Primavera hacia arriba. Bien. Y todavía se puede ver que todavía se mueve ahí dentro. Se tarda una eternidad. Las papas fritas no tienen manera. Puedes sentirlo bien. Ahora puedes usar estos deslizadores arrastrando cosas aquí. Entonces veamos esto. Hemos estado usando solo el lugar aquí. Bien, estas cosas y tecleándolas. Contrata estos, puedes arrastrar este, pero en realidad puedes arrastrar esto. Así que volvamos a gentil. Después vuelve a Primavera personalizada, desplácese hacia abajo. Y lo que puedes hacer tan pronto como bol aquí. Realmente no lo entiendo. Se puede arrastrar alrededor y hace rigidez y amortiguación. Podrías ser animador y ser así, esta cosa gráfica lineal que usamos todo el tiempo Me resulta bastante complicado de usar, pero puedes arrastrarlo. Bien. Así que la amortiguación es arriba y abajo y la rigidez es izquierda y derecha. También puedes arrastrar esto en parte. ¿Bien? No se fijaron los dos porque esto se queda un poco por debajo de esta curva aquí ¿Bien? Al arrastrar el Zane, quiero decir que estás arrastrando Entonces es un poco cambiando estos para que se ajusten a los parámetros dentro Ahí vas. No encuentro que seas realmente útil. éste va a ser bueno. ¿Estás listo? Tiempo de vista previa, ve a la luz, vuelve. Todo eso es bueno. A lo mejor solo arrastrarlo por ahí. Habrá algún número, Dan. Bien, espero que haya sido de ayuda. Aprendiendo los ajustes de primavera en ellos, facilidad de entrada y salida. Es genial, agradable y sutil. Pero realmente puedes comunicar animación a través de algunos de estos ajustes de primavera y ahora puedes ser súper personalizado con ellos. Gracias, Figma es bueno. Un poco de bondad. Bien, te veré en el siguiente video. Oh, una última cosa antes de irnos. Ellos cuando la actualización que tenía hace apenas un minuto. Bien. O antes de hoy cuando reinicié mi ¿por qué estaba acercando y alejando Recuerda que mantengo el comando para usar mi rueda de desplazamiento en una Mac. Es Control en una PC para acercar y alejar. Estos son todo el tiempo, pero estaba funcionando al revés. Soy como el hombre es mi cerebro cambiado en realidad esa actualización cuando y cuando a las preferencias en, lo invertí. Entonces ese tick fue, normalmente lo tengo encendido para invertirlo, pero por defecto está apagado. Entonces cuando se actualiza la preferencia, me la encendieron y se van. Eso pasa un poco para ti al final. Bien, ahora en el siguiente video 44. ¿Por qué falta en Figma la interacción con tap y click en gris?: Hola a todos, están atascados. Sé que lo eres porque vas a escuchar este video es para mostrarte por qué esta cosa está atenuada. ¿Por qué al hacer clic o al tocar aparece atenuado? ¿Por qué cambia eso? A veces hay onclick, a veces está de barril. El primero, por qué está atenuado es porque no se puede tener una cosa con es un componente de framework Puedes tenerlo haciendo dos cosas. Si hago clic en el mío, en realidad es deshacerme de eso. Si quiero agregar de grifo para ir a esto y dice que no puede. Es porque ya está pasando algo. Ya tiene un onclick. No puedo hacer demasiado, porque de una manera de ir, eliminemos el que tengo. Puedes eliminar este fideo aquí o este cable, o con las cosas seleccionadas Puedes ir por aquí y un prototipo y puedes decir Interacciones click, eso es solo menos. Entonces es agradable y limpio. Ahora podemos hacer uno. Y ahora irá a onclick. Ahora la pregunta es por qué es a veces al hacer clic y a veces al tocarlo porque Figma, Figma está tratando de ser elegante Hacen exactamente lo mismo. Pero cuando estás diseñando en un marco que claramente es un marco móvil, dice de barril porque hacemos toques, no clics. Tocamos con el dedo en una computadora, hacemos un onclick con un mouse No cambia lo que estamos haciendo. Entonces si estás siguiendo a alguien Cithaeron, es como usar de grifo y no puedes verlo, solo usa onclick Wheatley, Este marco que tengo solía estar bien, era para un iPhone 14, pero en algún lugar de la línea, lo Entonces se cambió a OnClick. Puedo cambiarlo. Puedo decir que en realidad muestran configuraciones de prototipo. Y voy a decir, qué dispositivo estás usando, iPhone 14 más lo que sea que estés usando. Ahora cuando vuelva ahí, debería decir de barril, Lo mismo, lo mismo. Cuando vas a lo temido, atenuado al tocar, al hacer clic fijo Ojalá, si eso no lo arregla. Avísame en los comentarios si lo arreglas o si hay otro problema. Me topé con esto todo el tiempo y así es como lo arreglo. Bien, y así el siguiente video 45. Proyecto de clase 05 - Prototipos de animación de texto en Houdini - Nivel 1: Hola a todos, tiempo de proyecto de clase. Quiero que hagas esta animación y la compartas. Bien, entonces ese tipo de efecto houdini, tu efecto Houdini lo inventé Entonces nadie más lo llama el houdini de vectores en caso de que sí. Swag alrededor de la oficina diciendo que acaba de hacer el efecto de texto houdini No van a saber de qué hablas. Me lo inventé un poco. Crea la animación de texto en nuestra pantalla de bienvenida. Bien, usa las técnicas que hemos usado. Lo hemos aprendido en los últimos videos. Quiero que experimentes con la animación primaveral personalizada y encuentres algo que funcione para ti. Grabe un video y comparta el enlace para el video en la sección de asignación. También me encanta verlo en las redes sociales. Esto es opcional, pero si usas el hashtag Figma Advanced, así lo puedo encontrar. Y si puedes, y quieres un enlace de vuelta al curso que estás haciendo solo para que otras personas en las redes sociales, estés como, Guau, yo quiero hacer eso también. Quiero venir a unirme al curso de Dan. Esa es una gran venta cruzada para mí para involucrar a más estudiantes, se lo agradecería No tienes que hacerlo. Cuando estés compartiendo, elige tu veneno, súcalos a todos. Asegúrate de etiquetarme cuando lo subas. Y no lo olvides, recuerda la severa plática con la que te di en el video temprano donde comentas el trabajo de otras personas. Cuando subes tu uno, pagarlo hacia adelante hace que el mundo dé la vuelta. Bien, así que disfruta experimentando con tu primavera. Probablemente vas a tener que volver a ver el video porque te gusta que esté roto por un poco hacer la máscara Por qué no está animando nuestro, tengo que hacer la varianza Todo es parte del fondo de aprender algo nuevo es el hacer real de ello para encontrar todos esos agujeros y bichos si tienes algún problema o tal vez no he explicado algo bien en el video. Háganos saber en los comentarios y cómo lo solucionó. Bien, Adelante, haz una animación. Te veré en el siguiente video. 46. Crea y quita alambres de fideos múltiples a la vez en Figma: Hola a todos, cableado. Todos estos prototipos pueden llevar años. Entonces este video son algunos consejos y trucos de hacer adición masiva de estos fideos o alambres o terminales, quiera llamarlos líneas W. Y además, te voy a mostrar como a Granel eliminarlos todos solo para ordenar un documento, súper práctico. Bien, así que simplemente dupliqué uno de nuestros marcos y les renombré el nombre home Buscar cuenta wish-list Y el primer consejo es en lugar de pasar por cada uno y decir cuando se hace clic en la navegación, vuelve a aquí, bien, y ve, cada individuo se vuelve agotador Lo que puedes hacer es deshacer eso es simplemente seleccionarlos todos, bien. Y agarra a cualquiera de ellos y te vas, y ves que todos van al mismo tiempo. Te puedes poner un poco más elegante. Voy a dejar eso. También. Si no puedes ver las y, solo asegúrate de estar en modo prototipo. Y la otra es, digamos que queríamos hacerlo aquí abajo, pero realmente no podemos hacer clic fácilmente en todas estas porque están dentro de nuestra instancia, bien, pero quiero volver a vincularlas todas estas lupas Entonces lo que podemos hacer es seleccionarlo. Voy a usar mi atajo de acciones rápidas. ¿Quién recuerda qué es eso? Comando barra diagonal hacia adelante o Control forja menos en una PC. Y solo escribo seleccionar porque nunca puedo recordar cuál es el atajo. En realidad no hay atajo. Está ahí. Quiero el que diga seleccionar todos con la misma instancia. Es posible que pueda pasar con el mismo efecto o el mismo relleno las mismas propiedades. Mi caso, porque es una instancia. Quiero las mismas instancias. Ya ves que los agarra a todos. Cambio uno, desechado hasta los de aquí abajo. Y ahora estoy en Prototipado. No dije que todos regresaran a la página principal. Mira eso. En realidad, quiero que vaya a la que puedo deshacer. Y voy a decir en realidad ir a la página de búsqueda. Entonces así es como hacer algunas conexiones masivas. Cuando otra cosita, mientras estoy aquí, éste, turno dos es que puedes ver que en realidad puedes arrastrar la materia a cualquier lado ahora, todavía necesitas arrastrarlos fuera de la derecha, pero puedes, realidad no ayuda mucho, pero quizás ya te hayas dado cuenta de eso. De todas formas. Se puede arrastrar a cualquier lado. Hablemos de la eliminación masiva. Este no está tan mal, Bien, turno uno es que hay algunos cables que van a todas partes. En la clase Essentials. Hicimos esto y tampoco es que falte. Apuesto a que probablemente has trabajado en documentos que tienen mucho más para deshacerte de todos ellos. Podrías descargar el archivo de otra persona o simplemente como quieras empezar de nuevo, me pasa cuando tengo cosas de la comunidad. Quiero usarlos, pero solo quería deshacerme de todos los cables. Todo lo que necesitas hacer es no tener nada seleccionado, solo haz clic derecho en el fondo. Y ahí está esta cosa genial. eliminación Interacciones. Así que lo he hecho a continuación. También puedes hacerlo solo para marcos individuales. Yo digo que solo quieres que este marco esté desconectado. Todas las cosas van de esto. Selecciónela, haga clic derecho en cualquier lugar y solo diga eliminar e indicaciones y lo haré solo por esa. Bien. Bueno, el resto de los cilios. Gracias. Y eso es todo. saber en los comentarios cómo los llamas. Creo que Figma los sobrepescó son fideos . Bueno, solían, yo los llamo cables porque empezó un poco UX en Adobe XD y lo llaman He escuchado a la gente llamarlos terminales, pedacitos de viaje. Yo lo invente. En fin, vamos con los fideos porque esa es la opción más cool Ya no voy a cambiar. ¿Por qué estos tipos son fideos? Bien, entremos en pequeños prototipos en el siguiente video 47. Cómo actualizar de forma masiva los enlaces de navegación en tu prototipo de Figma: El último video te mostré cómo seleccionar cosas a granel y luego ir todos van a la página principal. Y eso es genial. Pero hay una mejor manera porque eso solo funciona cuando en realidad puedes seleccionar todo y no hay 100 de ellos. Lo que vamos a hacer es que en realidad lo vamos a hacer desde el componente principal. Y aunque entro en ello un poco más de detalle en este video, el básico es si lo haces al componente principal, todas las instancias, mira eso. Todos obtienen ese mismo vínculo, lo harán a este nervio inferior también. Bien, donde actualizamos uno de ellos y todos se actualizan, se ve desordenado, pero nos llevó como 2 s hacer fideos por todas partes Alguien dejó caer un plato de ellos en nuestros diseños. Pero en fin, déjame mostrarte con un poco más de detalle. Bien, para empezar, voy a ser un turno uno para verlo todo. Y voy a ir al Shift D para pasar al modo prototipo. Y voy a hacer clic derecho en cualquier lugar e ir a eliminar todas las interacciones. Puede que tengas que ser un poco más específico si has amañado algo, no quieres tocarlo, pero estoy quitando todo el mío Entonces el truco es, es en este momento, bien, para mí al menos, puedes ver por aquí, esto es en realidad un marco. Debería ser un componente, y ese es el truco de magia, ¿verdad? Vamos a trabajar con ese componente principal centralizado. Y si los vinculamos, todos se actualizan. Entonces voy a ir a este de aquí. Estos van a ser mis componentes principales llamados frame three. Vamos a convertirlo en un componente. Voy a entrar aquí y voy a decir que esto es Nav upper. Y voy a copiarlo y necesito reemplazar a todos estos chicos porque estos son solo marcos viejos perezosos, no están conectados a él. Entonces lo que voy a hacer es hacerlos lisos a todos. Y recuerdo mi comando de atajo Shift o vas que funcionó ese trabajo. La forma en que verifico es que voy y reviso para deshacer porque ellos, van a llamar al fotograma tres. Intenta recordar el atajo y todos han cambiado a Nav, superior. Días felices. ¿ Tengo otro? Vaya, gran atajo. Comando Shift R, o Control Shift en un BZ, lo siento, PC chicos y chicas Bien, ahora lo que hacemos en vez de arrastrarlos por todas partes como ese truco genial que te mostré en el último Mientras lo hacemos es cuando se hace clic en ellos se hace clic en la navegación, vamos a ir a esta página de inicio Y lo genial de esto es que puedes ver que este lo hizo, este lo hizo. Éste lo hizo. Anuncia una navegación realmente simple. Hagámoslo a los que están abajo del fondo de aquí. Para mí, las mías ya son instancias de este MainComponent. ¿Dónde está el componente principal? Sé dónde está, pero si no lo sabes, haz clic derecho, ve al componente principal. Ahí estoy. Hola. Y lo que podemos hacer es ir dentro de éste en lugar de hacer todo ese selecto todo como hicimos en el último video, eso es como, ese es un corte crucial y útil. Pero cuando nos ocupamos de la navegación, podemos ser un poco más intencionales con los componentes. Entonces quiero que Search vaya a cambiar uno para disparar, no puedo ver nada. Quiero que vaya a. No queremos ir a yo quiero que vaya a ti. Vayan a su casa. Página de mi cuenta. Para ir a la página de mi cuenta, quiero mi página de lista de deseos No he decidido cómo los llamo, ir a ellos. Obviamente, podemos jugar con todas las diferentes transiciones compradas por el momento en que te hagas la idea. Mira, lo está haciendo, pero vamos a ver esta. Todos lo están haciendo ahí. Vamos al lugar correcto. Durante el curso Essentials, estamos arrastrando cosas y tú estás como, él tiene que ser un poco de camino Bienvenido a la puja de distancia. Simplemente hazlo al componente principal y todos se actualizan. Entonces esa es la forma masiva de actualizar todos tus fideos. No estoy seguro si me voy a acostumbrar a esa palabra fideos, pero de todas formas, así es como hacerlo. Pasemos al siguiente video. 48. Cómo configurar el teléfono correcto y encontrar prototipos de teléfonos antiguos en Figma: Hola a todos, ha pasado esto y estás como, ¿por qué encaja en mi prototipo? Es demasiado pequeño o demasiado grande. Hay video, te voy a mostrar cómo cambiarlo tanto en el modo prototipo donde cambiamos el teléfono que eres frame citizen, y también te mostraré cómo ir por el otro lado e intentar conseguir que tu frame coincida con el teléfono gigante. Bien, vamos a cavar en el primero. Mientras estoy en modo prototipo, solo puedes cambiar el dispositivo para que coincida con lo que tienes. Puedes seleccionar en tu marco aquí, ir al modo de diseño y simplemente calcular tu ancho y alto. Entonces estoy usando el 39844. Entonces modo prototipo, solo puedo volver a verificar bajo mi prototipo de ahorro, simplemente no tengo nada seleccionado Y puedo entrar aquí y recoger mi dispositivo. No puedo ir a ninguno. Bien. Y luego simplemente me deshago de todo o puedo pasar por y averiguar cuál estaba usando. Estaba usando este y cambié mi teléfono. Vamos a comprobarlo. Ahí tienes, encaja. Nos ocuparemos de un recorte pronto en este curso. Vamos a cómo conseguir que coincida siempre van a ser nuevas tallas. Y es por eso que estamos construyendo estos diseños responsive para que si queremos usar ese Max, deshaciéndolo para volver, puedo decir que cambias D para volver al diseño ahora no son solo un marco general en un iPhone 14 Voy a usar la cuenta 14 Pro. Recuerda cuál está usando el ego. ¿Puedes verlo ajustar, deshacer, rehacer, si el tuyo no está ajustando, como este abajo abajo tú antes de tu ajustado, debería estar configurado para no izquierda e inferior Deshacer, deshacer. Digamos que necesitas no estar levantando abajo, necesitas estar a la izquierda y a la derecha. Eso arreglará esa. Por lo que el marco Pro Max se verá receptivo. Lo fue, estos no se están ajustando. Estará abajo a izquierda y derecha. Y para asegurarnos de que estamos usando autolayouts y todas las demás cosas de bienes que hacen que esta cosa sea agradable Siempre vas a estar persiguiendo el nuevo tamaño de los teléfonos, lo cual siempre es DIVERTIDO. Ahora una cosa ahí quiero doblar la espalda y volver a grabar porque estaba saltando entre Design, mirando este cuadro y dándole tamaño de marco Bien, eso es lo que hicimos para que sea este tamaño máximo, lo cual es genial. Está separado de la forma en que lo prototipos. En prototipo y tengo sesiones prototipo, bien, podría tener algo separado Estos pueden actuar de manera independiente. No puedes hacer que cambie por cuadro, bien, Así que tienes diferentes tamaños. No va a saltar todo el camino a través. Lo que podrías hacer es ir a Tamaño Personalizado. Entonces se va a deshacer del Kromer por fuera o ¿ quiere decir con Chrome Eso es lo que hay por fuera. Se puede ver que simplemente desapareció. Bien, el editor lo vuelve a apagar para retroceder, encender, apagar. Pero entiendes bien la idea. Aún puedes hacer que parezca un teléfono. Y significa que cuando pasé en ciclo a los diferentes tamaños, simplemente va a estirarse Juego encaja en esta ventana. No va a poner la corriente fuera, lo cual es bastante genial. El cromo es el bit del teléfono alrededor del exterior. La otra cosa que hicieron fue que estoy en modo prototipo. Si entro aquí y digo en la parte superior aquí que un poco más nuevos, estoy seguro de que estarás a la altura de como el iPhone 30 cuando estés viendo esto. Bien. Han puesto algunos de los viejos y es incluso los más viejos abajo aquí abajo. Si te desplazas hacia abajo por la parte inferior. Entonces estamos haciendo 14, pero es como faltan algunos ahí mismo fueron a este tamaño más antiguo porque hay un buen tamaño genérico de teléfono antiguo y es muy utilizado para las pruebas. Bien, pero hecho el fondo aquí hay algunos otros que acaban de ver en el fondo, podría haber lo que te estás perdiendo. Bueno viejo pixel 21. Lo último es que si piensas si ahora cambiamos el tamaño a mucho más grande, ¿hay una actualización automática? Bien, cuando voy, vas de ese tamaño de cuadro dos. Es el más grande que tenemos, solo hicimos eso. No hay cosas que se estiren automáticamente. Necesitas configurarlo de antemano, bien, sin restricciones como vimos antes, autolayouts, todas esas cosas buenas que necesitabas con ese trabajo inicial en algunos de Y vale la pena más tarde cuando hay ese nuevo teléfono en el que tienes que probar. Bien, así es como actualizar los teléfonos para que se ajusten Simplemente cambió el lado de la presentación o ve a actualizar en modo de diseño e ir y actualizar el marco para que coincida con lo que necesitabas ser. Bien, eso es, voy a ver en el siguiente video 49. Cómo crear una barra de búsqueda de posición con desplazamiento adhesivo en Figma: Hola a todos En este video ven aquí esta pequeña barra de búsqueda. Imagina que si pudieras desplazarte hacia arriba y mirar eso, un poco se atasca y no se sale de la página Bien, entonces veremos algo llamado posicionamiento pegajoso también conseguirá la navegación y la navegación inferior para dejar de desplazarse también mientras estamos aquí, bien, saltando, bien, primero arriba, tengo un diseño de truco para poder ver mi prototipo de teléfono al mismo tiempo que hago Te lo voy a mostrar al final. Entonces las cosas que hay que hacer para que esto funcione, hay un par de ellas. En primer lugar, necesitamos algún contenido que desborde todo el frame Yo solo uso Loren ipsum y solo pegué hasta que se fue por el borde Entonces tenemos que ir al modo prototipo. Y tenemos que asegurarnos de que el marco padre, queremos sentar el comportamiento de desplazamiento para vertical. Ahora, aún no está funcionando, pero puedes ver que está desplazándose, mientras que antes no estaba desplazándose Excelente. Entonces ahora tenemos que hacerlo pegajoso. Así que acabo de dibujar algunas cosas al azar aquí. Parece un cuadro de búsqueda, solo un cuadro con algunos ticks en él. Ahí puedes ver mi marco. ¿Bien? Y voy a seleccionarlo, ir al modo prototipo y decir scroll con parent. No, no, no. Vamos a hacer un desplazamiento pegajoso genial Detener en el borde superior. Eso es. Es un poco, poco reloj de trabajo listo hoy Me encanta esta característica no está funcionando porque a, se pega a la parte superior y se esconde detrás de esa muesca. Entonces vamos a agregarle un poco de relleno. La forma más fácil de agregarle un poco de relleno es dentro de Autolayout en Design View, tengo No quiero convertir todo esto en un diseño de pedidos porque si lo hice, va a funcionar. Pero va a envolver alrededor de estas dos unidades. Bien, no es lo que quiero. Lo que quiero hacer es ponerlo en un marco padre. Te digo amigo mío, enmarca esta Selección. Bien. Tengo una mirada por aquí. Mi marco de cuadro de búsqueda está dentro este marco padre llamado frame saving, gran nombre Dan Y si agrego un Auto Layout al frame padre, frame seven, lo que permitió que esté haciendo todo y está tratando de barajar todo a su alrededor, pero solo hay una cosa en él, Cuadro de búsqueda Entonces ahora puedo hacer cosas geniales como eructar. Bien, quiero un poco de relleno. Vamos a tener una idea de lo mucho que necesitamos primero y luego probarlo y darnos cuenta de que no funciona. Sigamos con lo que pasó. Bueno, lo que pasó fue que aplicamos la pegajosidad al cuadro de búsqueda original, no a este nuevo marco padre que acabamos Así que solo selecciona el marco padre, el marco siete, y no quieres desplazarte con el padre, queremos que te adhieras a la parte superior. Ahora vamos camino. Bien, así que tenemos que hacer algunas cosas de Layout. Pero el ego, cómo sobresalga un poco Busca a la cima. A mí me encanta. Ahora un par de cosas más antes de irnos. Una es que me siento en este Layout, podrías ser como, eso es fácil, pero si quieres, ¿cómo lo hizo? Lo que hice fue deshacernos de él por el momento. Lo que hice fue ya que en realidad puedes abrir más de una versión de Figma en un navegador Es más fácil, pero también puedes hacerlo en la versión de escritorio. Entonces voy a previsualizarlo. Bien, estoy en la página equivocada. Probablemente. Mira, yo soy éste de aquí. Sigo haciendo Es genial. Scroll cosas es, estas son pestañas separadas. En realidad puedes arrastrar, sostener, simplemente arrastrarlo al azar. Ahora, tengo dos versiones de Figma que te dejan boquiabierto. Haz esto. Bien, y lo que hago es que solo hago un poco de magia de arreglo de escritorio, así puedo ver que ambos arrastran eso por ahí y esto es exagerado. Eso es lo que hago. En realidad, solo dos de este tutorial para ser honestos, lo que normalmente hago es tener esto abierto en esta otra pantalla de aquí. No se ve que tiene todas mis notas. Así que lo configuré. La otra cosa fue que pensé que había mencionado aquí que no necesitábamos ángeles, pero bueno, vamos a tirarlo aquí. Es esto en esto, voy a copiarlo, pegarlo. No hay un jalado es porque mira lo que pasa. Se van y esta cosa está haciendo cosas raras. Entonces básicamente lo mismo. ¿Bien? Te voy a decir prototipo, scroll con parent. No, en lugar de hacer pegajoso a la cima, voy a decir arreglado en su lugar. Vamos a darle una oportunidad ahora. Vamos a conseguir que están acostumbrados a ir a permitir que el relleno para que esta cosa parezca que empuja hacia arriba contra la barra superior y vamos a trabajar alrededor de la muesca y los bordes lo harán en un futuro video. El último es este Nav en la parte inferior de aquí y simplemente como rueda alrededor sigue al padre No queremos que sigas a los padres. ¿Quieres decir que prototipo, desplázate un padre? Quiero que arregles, permanezcan en su lugar. Mira lo geniales que somos. Bien, se pone mejor en el futuro videos, pero no lo sé, Ahora es bastante genial. Estamos teniendo que hacer esto. Aquí vamos. De todas formas. Bien, ahí está nuestra característica. Recapitulemos algunas cosas que tienes que recordar para hacer solo como recordatorio, y cosas que no pueden hacer Entonces, antes que nada, el marco padre que estás previsualizando tiene ser desbordamiento vertical no espera a horizontal en este momento, son ambos uno en vertical que podría cambiar en el futuro Otra cosa es, es que no se puede conseguir que se pegue al fondo y se apile. Bien. Sólo se puede conseguir que se pegue a la parte superior, no a la derecha, a la izquierda, no a la parte inferior. Hay que tener textos que se desborden. Así que en realidad tienes algo que desplazarte. Podrás activar la barra vertical de desbordamiento. Tu vista previa no se moverá. Si no hay suficiente espacio, podrías hacer una lista muy bonita, cual debería haber hecho, bien, o simplemente una caja gigante de colores o en Ipsum como lo hice yo ¿Y cómo conseguí mi Loren Ipsum? De hecho fui al contenido real. Me gusta el contenido real porque puedes ir al texto y puedes decir que, quiero un poco de Lauren. Lauren, bien. Hit Enter y tipo de combina muchas formas de otras personas de hacer Loren Ipsum Acabo de ir antes, no puedo recordar ni entender. Préstamo solo lo llena. Copié y pegué un par de veces. Pero si eres de la vieja escuela y no quieres usar un plugin. Este lado. Cualquiera que use esta diapositiva, he demostrado no estar con el sitio. Podrías estar usándolo también. Los buenos viejos aprendices los lados tan feos, pero todos lo usan. Quiero que esto muchos párrafos genere. Terminas con esto y puedes copiarlo y pegarlo y recibir spam por el ayuno intermitente de Ed según mi edad En fin, ahí vamos. Eso es un desplazamiento pegajoso. Bien, te veré en el siguiente video. 50. Desplazamiento vertical: Hola a todos. En este video vamos a hacer esto donde tenemos un rumbo en la parte superior y está pegado a la parte superior. Ya lo hemos hecho, pero mira lo que pasa. Mira, viene un lugar que se dirige. Ya viene. Ya viene. Oh, mira, y se apila encima. todos les gusta que se peguen a la cima y se colapsen uno encima del otro Súper práctico, una especie de característica complicada de hacer. Yo hice un video de esto originalmente cuando salió y me pareció que no iba bien. Revisa los comentarios que mucha gente da sobre mi terrible explicación. Entonces he vuelto a grabar este, así que la interfaz de usuario será un poco diferente. Pero siento como que, no sé, he encontrado mi Zen y ojalá pueda entregar este un poco mejor y reconocí que es un proyecto complicado de hacer, pero buena suerte. Es muy divertido y lo haremos. Vamos a entrar ahí. Bien, primero, tengo una página vacía. He añadido mi navegación y mi navegación inferior. Y lo que hice fue simplemente para que no se desplacen mientras estoy trabajando en ello, ya hemos hecho esto antes. Hacen clic en ellos, van a un prototipo y dicen posición. No quiero que se desplacen con el padre. Quiero que se arreglen. Hazlo tanto en la parte superior como en la inferior para que no se desplacen. La otra cosa que quiero hacer es que quiero poder, hay muchas pruebas con este proyecto en particular, así que lo que voy a hacer es que los voy a tener a ambos en la pantalla encabezando play presente. Asegúrate de tener el nombre, tienes tu cosa real que quieres presentar , seleccionada en la parte superior ahí. Bien, aparece en su propia ventana. Bien, original. Este es el prototipo. Voy a arrastrarlo y simplemente redimensionarlo. Y apague los flujos y redimensionarlo para que sea como que pueda verlos a ambos al mismo tiempo En realidad son solo dos ventanas separadas ahora. ¿Bien? Puedes hacerlo en un navegador. Normalmente lo hago en otra pantalla, que tengo aquí, pero no se puede ver. Voy a hacerlo de esa manera. Entonces probando el doc. de trabajo. Entonces, lo primero que tenemos que hacer es poner todo dentro de un marco envoltorio. Bien, entonces voy a subir la herramienta de marco, voy a decidir qué tan grande tiene que ser mi cuadro de texto. Sólo voy a adivinarlo por el momento sobre ese tipo de grandes, pongámoslo en mi página. Bien, y voy a decir ¿qué hacemos? Vamos a llamar a este rapero. Bien, bien, vamos a Design View. Así que tengo mi envoltorio dentro de este envoltorio. Me gustaría todo mi contenido. Bien, porque va a desplazarse dentro de este envoltorio. Así que agreguemos nuestras partes. Voy a agarrar mi herramienta tipo y simplemente hacer clic dentro de mi envoltorio en cualquier lugar. Agregar un título, Detalles del evento. Bien, es un encabezamiento. Ahora podrías estar inclinado a ir. Todo bien. Voy a darle a Return y luego agregar todos, ya sabes, los detalles sobre el evento. ¿Bien? El problema es que para desplazarse es que estos necesitan ser cuadros separados y separados Lo que quieres que se pegue a la parte superior a la que se dirigen y todo el texto del cuerpo tiene que estar en cuadros de texto separados Tengo mi versión terminada por aquí, porque ves aquí que esta está separada de esta , eso pueda pegarse a la parte superior y esto se desplaza a lo largo Vamos a previsualizar este solo para ser súper claros. Bien, ahí tienes. Cuando estoy desplazándome por la parte superior, puedes ver los palos de rumbo Y todo lo demás está en cajas separadas Incluso ese segundo rumbo, se dirigen ahí en su propia caja. Esto está en su propia caja. Esto está en nuestra propia caja. Y esa es una de las grandes derivaciones de esto, es que todos tienen que estar en sus propias cajas separadas Bien, así que volvamos a nuestro. Tenemos un rumbo, bien, me voy a deshacer de todo esto y sólo tengo mi viejo y solitario rumbo aquí. Mm hmm. Lo voy a poner en el borde superior de mi envoltorio, solo asegúrate de que todavía esté dentro de mi envoltorio. Bien, tengo mi rumbo. En realidad voy a, ya sabes, lo dejaremos como detalles del evento. Ahora, necesito mi copia corporal. Tengo algunos por aquí que acabo de tener por ahí. Voy a agarrar un trozo de ella. Copiarlo. Puedes usar el carrete de contenido o podrías tener algunos por ahí o simplemente puedes obtener cualquier tipo de detalles. Entonces escribe dos, voy a dibujar su propia caja tipo separada. Bien, no es parte del golpeo, es difícil ver el envoltorio. Bien, si quieres que vaya directo al borde, pero vamos a arrastrarlo hacia afuera. Vamos a pegar. Bien, voy a hacer click off, y luego voy a simplemente arrastrarlo por ahí para que en realidad se ajuste a mi envoltorio padre externo Ahí lo puedes ver. Entonces copia corporal. Realmente no importa. Yo sólo quiero que se alinee. Genial, así que tenemos un envoltorio dentro de ese rapero, tenemos un hit, y dentro de ese envoltorio, tenemos un hit. También tenemos una caja separada para copia corporal. Ahora para esta copia corporal, probablemente sea más fácil en este momento. Es una caja de ancho fijo dependiendo de cómo dibujaste la tuya. Lo arrastré así que está arreglado con eso realmente no importa, pero lo hace menos confuso Si está en alturas de auto, solo se expandirá y contraerá tal como lo tenemos. Entonces vamos a darle una prueba. Vamos por aquí, no pasa nada, ¿de acuerdo? Entonces, lo primero que tengo que hacer es agregar suficiente contenido para que pueda desplazarse porque todavía no hay desplazabilidad Así que tomemos todo esto y vayamos a copiar. Y lo voy a poner Regresar y encabezar Pegar. Devolver en Paste. Sé dobles devoluciones, sólo estoy pegando. Pegar, pegar Así que ahora tengo cosas que son desplazables. Todavía no puedo desplazarme. Bien, lo estoy intentando. No puedes ver que mi rueda de desplazamiento está ocupada haciendo cosas, así que asegurándome de que esté dentro de mi envoltorio. Tengo esta cosa, voy a llamarla copia corporal, copia una. Entonces, la forma de hacer que se desplace es veces lo hemos estado haciendo al marco padre. Bien, y hemos ido al prototipo. Y hemos pasado de desbordamiento, sin desplazamiento, a vertical Solo hagámoslo para este envoltorio porque no necesitamos nada más para desplazarnos justo dentro de aquí. Entonces te voy a decir bajo desbordamiento de prototipo. Sin desplazamiento. Ahora consigamos que se desplace verticalmente, por favor. Entonces hagámoslo. Entonces tenemos lo básico en marcha, bien. Una cajita desplazable en el medio. Ahora como hicimos en el cuadro de búsqueda, necesito hacer este rubro aquí. Bien, así que me he metido dentro de mi rapero, tengo detalles del evento y voy a decir prototipo. Me gustaría que no se desplazara con Parent, que es el predeterminado, y no arregle como lo hicimos con el nav superior e inferior. Quiero que quede pegajoso ya que quiero que se pegue al borde superior. Bien, entonces vamos a hacer clic en eso y vamos a darle un objetivo a esto. Ya listo se pega, es increíble. Bien, fase uno, listo. Tenemos un rumbo que se pega a la cima. Sin embargo, hay algunos problemas. Se puede ver que hay texto doblando debajo de él. Entonces esta es una de las peculiaridades, no sé, características que notas en muchos ejemplos de personas en línea Simplemente tienen una caja de colores. Y así es como simplemente evitan reconocer que hay un pequeño problema con las cosas que se superponen Reconozcámoslo y trabajemos realmente para arreglarlo. Lo que queremos hacer, es como un truco. Básicamente, vamos a poner una caja detrás de los detalles del evento que sea del mismo color que el fondo. Asegúrate de que el orden de las capas es correcto y el texto seguirá ahí, pero irá detrás de una caja grande. ¿Entiendes a lo que me refiero? Simplemente pondremos una gran caja de colores detrás de ella y nos deslizaremos detrás. Entonces intentemos hacerlo. Antes que nada, vamos a asegurarnos de que tenemos los detalles de golpeo seleccionados y si vamos a diseñar, bien, verás que no podemos agregarle un relleno porque es solo un cuadro de texto antiguo y plano. Puedo agregar un relleno si quiero que sea un relleno. Que sea el fondo. No es llenar la caja, en realidad es llenar el texto. Voy a deshacer eso. Entonces, lo que tenemos que hacer es envolverlo en su propia cajita. Bien, lo envolveremos en su propio pequeño marco. Entonces con el texto seleccionado, te diremos, mi amigo va a ir dentro de un marco. La única razón por la que estamos haciendo eso es para que podamos agregar un marco, podamos tener un relleno una pastilla, hagamos un gran color loco para ello. Voy a más vamos a hacer clic en esto y vamos a elegir algo loco. Echemos un vistazo a la pantalla. Veamos esto. Puede o no funcionar. Bien, vamos a echar un vistazo. No está funcionando. Sé que no está funcionando. Bien, piensa un poco, pausa. ¿Por qué esto no estaría funcionando ahora? Podrías estar trabajando en, oh, tal vez solo estés viendo. ¿Por qué ya no es pegajoso? ¿Sabes por qué es porque ahora está en un marco? Así que cambiemos el nombre a esto en lugar de Frame 35. Llamemos a éste encabezando uno. Así que hicimos que los detalles del evento en prototipo fueran pegajosos. Bien, Pero luego lo metemos dentro de esta otra envoltura y eso no es pegajoso. Así que en realidad no necesitamos que esto sea pegajoso. Ahora. Podemos apagarlo, puedes dejarlo como está, pero el rumbo, bien, el envoltorio, cosa de los padres, que está dentro de esta cajita verde, necesita estar pegajoso. Vamos a darle una prueba a eso. Encuestas, sin padre de desplazamiento. Vamos a conseguir que esté pegajoso. Entonces deberíamos volver a trabajar y tú estás como, Dan, todavía no funciona. La siguiente parte para conocerlo, bien, es que el orden de las capas es importante. Entonces los momentos, échale un vistazo, tenemos nuestro envoltorio y lo que sigue en línea en la parte superior es body copy. No queremos que esté en la cima porque es una especie de desplazamiento encima de las cosas Entonces lo que vamos a decir es decir, vamos a cerrarlo. Di golpearte estar arriba, sigue en el envoltorio pero por encima del cuerpo copia. Vamos a darle una prueba ahora. Verlo. Mira eso. Está funcionando, bien. Ahí vas. Entonces, lo que tenemos que hacer ahora es hacer que el marco sea un poco más grande. ¿Bien? Sólo voy a arrastrarlo cubra cualquier parte del texto potencial que va a ser. Puedes decir, mira, desaparece detrás de él y estás como, puedes quedarte con una gran caja verde. Bien, si te gusta. De hecho voy a cambiar la caja. Voy a ir a diseñar y decir, en realidad ahora eres el color de fondo. Entonces, ¿ahora puedes ver que está pasando la falsedad? Así es como haces que esta cosa funcione. Bien, Sofaza, bien, ¿cómo te va? Esta es una explicación mucho mejor que mi último video de todos modos, mucho más tranquilo. Bien, lo siguiente que vamos a hacer es agregar múltiples encabezados. Y lo que voy a hacer es que voy a deshacer el tabaco siendo verde, solo para que sea visualmente más fácil para ustedes chicos. Pero idealmente, quiero que sea del mismo color que el. Agreguemos otro encabezamiento. El problema es que este envoltorio aquí, por defecto está recortando contenidos Está atascado ahí dentro. Y quiero sumar más a esto y no lo ves. Estás como, ¿cómo agrego otra rúbrica aquí? Bien, quiero que esté dentro del envoltorio pero quiero estar dentro del envoltorio. Pero después de la copia del cuerpo uno, que se apaga aquí abajo, hagamos clic en el padre envoltorio. Y vamos a decir, no vamos a recortar el contenido por el momento, Bien, Tenemos que volver a encenderlo. Pero solo por el momento, mientras estamos trabajando, mantengamos esto fuera. Notarás que va ahí, cuelga por el fondo. Entonces estás como, pensé que acabamos de decir no recortar contenido que hicimos como que hicimos, lo hicimos para este envoltorio. Pero el documento real en sí, bien, el marco padre externo tiene exactamente el mismo problema. ¿Bien? También lo está recortando. Entonces ahora podemos verlo todo. Vamos a tener que volver a encenderlos a ambos . Confundir. Lo sé. Bien. Pero mientras estamos trabajando, vamos a tener recortes en el envoltorio y el marco padre, ¿de acuerdo? Y ahora podemos ver cosas. Entonces lo que queremos hacer es agregar más bits. Entonces lo que haremos es que en realidad es más fácil hacerlo por aquí en el panel de capas en este caso solo porque está pasando todo este recorte y está dentro del rapero y así lo que voy a hacer es agarrar ambos, copiarlos y pegarlos encabezando dos y copia del cuerpo dos y voy a intentar arrastrarlos hacia abajo Aquí vamos. A veces es más fácil solo usar la tecla Mayús y presionar la flecha hacia abajo. Si los tienes seleccionados en el panel de capas, puedes ver que ya han saltado detalles de su evento. Hay trucos para hacer eso por el momento. Sólo vamos a hacerlo al estilo cavernícola y simplemente moverlo hacia abajo. Bien, entonces son después. Bien, entonces están alineados. Hagamos dos de ellos mientras lo conseguimos. En realidad, voy a hacer este un poco más pequeño. Mi copia corporal, vamos a hacer esto más pequeño. Bien, voy a tener, voy a hacerlo por aquí otra vez, encabezando dos, body copy dos, copy paste. Tengo otra partida tres y una copia corporal tres. Vamos a arrastrar estos hacia abajo. Esto podría ser lo complicado es simplemente conseguir estos todos apilados. A veces es más fácil tener estos listos, no mientras estamos trabajando encabezando dos. Voy a cambiar, voy a decir que este va a ser los detalles de mi lugar o simplemente lugar. Y éste de aquí va a ser dónde, dónde, cuándo. Todo bien. funcionar porque hemos copiado y pegado el que estaba funcionando. Veamos cómo vamos. Primero que nada, vamos a revisar lo que tenemos. ¿Qué funciona? No está funcionando. Bien. Estoy desplazándome hacia arriba, pero no puedo ver ninguna otra cosa. ¿Por qué no lo puedo ver? Ya lo has visto, ¿verdad? Es porque en realidad no está en mi envoltorio. Mira, vamos a hacer que estas bajen. Rúbrica tres, ¿está ahí? Bien, Y ahí está la partida dos. Todos estos no están dentro de mi envoltorio. Ustedes bajen ahora dentro del envoltorio. Vamos a darle una prueba. Bien. Así que vamos a desplazarnos hacia arriba y hay lugar. Y ya sabes lo que he hecho. He hecho que el último trozo de texto no sea lo suficientemente largo porque ya no puedo desplazarme. ¿Verdad? Así que no hay posibilidad de que se superpongan entre sí. Bien, entonces hay el último texto aquí abajo. Voy, lo copio y voy a pegar, pegar, pegar, pegar. Entonces hay mucho más. ¿Entiendes a lo que me refiero? Como si no hubiera suficiente contenido real, no puedo seguir desplazándome hacia arriba ahora Hay un montón de contenido para seguir desplazándose. Así que mira. Detalles del evento, vamos. El lugar lo cubre y luego ¿cuándo lo cubre? Eso por Fluke Works. Bien. Podrías probar el tuyo y estarías como, no funciona. Bien. Es por el orden de las capas. Entonces si terminé simplemente arrastrando estos dentro de mi envoltorio en la parte inferior de aquí Bien. Lo que probablemente podría ser más la opción predeterminada. Bien, así que vamos. Los detalles del evento están en la parte superior, luego vamos. El lugar va en la cima, perfecto, y luego cuando miramos, desaparece por debajo. Bien, entonces el orden de las capas es realmente importante. Entonces el golpeo, entonces queremos que el golpeador uno y el body copy uno estén en la parte inferior. Queremos que nos cubran pegando dos y luego tapados por la partida tres. Pero copia tres, ¿ eso tiene sentido? Vamos a intentarlo ahora, cuando, donde ahora tenemos todas las cosas sobresalen y te gusta, ¿por qué sobresale eso? Es porque recuerden, abrimos contenido de este clip justo mientras estamos trabajando para ver estas cosas porque de lo contrario es como complicado trabajar obviamente. Podemos apagar eso otra vez por aquí. Ahora. Ahora tenemos algo un poco más como lo queríamos, bien, donde no se desplaza por la parte inferior, y tenemos estas cosas apiladas Ahí vas. Entonces nos desplazamos lejos. Lo que voy a hacer es ir a través de cada uno de estos y decir que Bill va a ser este fino encabezamiento dos, este es este color. Entonces a veces es más fácil simplemente usar el panel de capas. Golpear a uno se hace golpeando a uno. Lo que hemos hecho, golpear a dos es golpear a tres. Golpear a tres va a ser el color de fondo. Vamos a darle una prueba ahora. Ahora es un poco más sin fisuras, donde actúa como te habías imaginado. Ahí vas. Tenemos una cosa de desplazamiento que todo se apila. Es una especie de característica nueva. Es un poco complicado. Es realmente complicado. Bien, he tratado de ir despacio y pasar paso a paso. Bien, y por último, el envoltorio externo en realidad no necesita recortar el contenido. Depende totalmente de ti. Solo lo necesitas encendido o apagado. Realmente no importa cuando va a previsualizar. Simplemente, es más fácil cuando estás trabajando en segundo plano. La otra cosa que podrías hacer es que es muy difícil trabajar con texto negro si estás en tema negro. Por lo tanto, es posible que desee hacer clic en el fondo e ir a Página. Y solo elige algo más ligero para que veas tu copia corporal contra él. Y lo que hay que verificar es asegurarme de que solo iba a hacer click sobre estos. Para que puedas ver bajo diseño, es principalmente bajo, así que clip contenido que podría estar encendido o apagado. En serio, seguirá funcionando. Y bajo prototipo, no tengo ningún desplazamiento pasando. Este envoltorio necesita tener desbordamiento de desplazamiento vertical Bien, para que funcione y bajo diseño el contenido del clip para trabajar en él, vuelva a encenderlo. Desactiva el contenido del clip para que funcione en él cuando estés editando. Y luego vuelva a encenderlo para previsualizar amablemente. Bien, el interior de este envoltorio, el orden de las capas es realmente importante. Las partes superiores están en la parte inferior, ¿de acuerdo? Y las últimas partes están en la parte superior de la pila de capas. Porque querías construir en la parte superior cuando los miras bajo encabezado, Bien, ve al diseño. Se puede ver el contenido del clip. No hace ninguna diferencia en este, pero tengo mi texto dentro de este encabezado solo porque quería agregarle un color de fondo para ocultar el texto debajo. Bien, no tienes que tenerlo. Y tienes que asegurarte bajo prototipo que ese encabezado es pegajoso, ¿de acuerdo? Incluso si no usas un marco, asegúrate de que el encabezado esté pegajoso. Ambos pueden ser pegajosos. No importa. Es principalmente este de aquí, ¿de acuerdo? Lo que sea que haya en este nivel, ¿de acuerdo? Directamente, lo que sea que esté en este nivel, directamente debajo de la envoltura. Las otras cosas que podrían estar causándote problemas es tu copia corporal podría estar establecida. Se vuelve realmente confuso si se establece este tipo de como el último, como el tamaño fijo. Es mucho más fácil cuando es altura automática y no necesitas hacer nada en términos de prototipado con el Scrabble predeterminado con parent, ¿de acuerdo? Puedes dejarlo así y simplemente pasar y asegurarte de que todos sean iguales. partida dos es pegajosa y está por encima del encabezamiento uno y lo mismo con la partida tres. Bien, avísame los comentarios si te encuentras con algún otro problema y si lo tienes funcionando, revisa los comentarios y mira si puedes ayudar a alguien más. Voy a echar un vistazo también y ver si tal vez pueda explicar este un poco mejor. Definitivamente mejor que mi primera versión. Sigue siendo complicado de hacer si estás luchando bastante. Mi consejo sería empezar de nuevo, en lugar de tratar de arreglar uno que existe es solo un poco de plod a través y trabajar a través del video de nuevo y solo ser un poco más intencional que tienes algo como un poco de comprensión Te apuesto a que la segunda versión será buena y puede ser útil tener todos tus encabezados y body copy apenas listo para empezar antes de empezar a hacer algunas de las otras cosas Sólo para que no estés tratando de construirlo sobre la marcha y algo arrastrarlo y meterte en lugares extraños. Todo bien. Espero que haya sido de ayuda y eso es todo. Te veré en el siguiente video. Buena suerte con el desplazamiento. 51. Proyecto de clase 06: múltiples encabezados adhesivos: Oh, ¿sabes qué hora es? No es tarea dolorosa hacer tiempo. Es tiempo de proyecto de clase DIVERTIDA. Es muy diferente. Este de aquí es, vas a intentar hacer tus propios Encabezados Múltiples Adhesivos Ojalá estés jugando en el último video. Si no, ahora es tu oportunidad de practicarlo. Este es uno de esos videos clave que siento como si haces este proyecto de clase, aprenderás mucho porque te toparás con muchos problemas, pero esos temas te ayudarán a convertirte en un mejor Usuario de Figma Básicamente hacemos exactamente lo mismo que acabamos de hacer en el último video. Así que crea esas cosas apilables de desplazamiento de aquí. Se puede ver que se apilan uno encima del otro. Aunque quiero que uses datos reales. Por datos reales, no me refiero a como marcador de posición Loren Ipsum, quiero que ya sea cree un evento falso, irá a buscar algo en un sitio de eventos que pueda usar y pedir prestado y usarlo como texto Quiero que agregues una imagen también. Para mí, probablemente tenía la imagen justo encima del resumen del evento o debajo de ella. Te dejaré decidir dónde y ponerlo en fechas reales y lugar real. Asegúrate de que haya suficiente contenido desplazable. Eso es. La única otra cosa es buena, se vinculó. Entonces bajo prototipo, conéctalo a esta de estas tarjetas de inicio. Entonces, cualesquiera que sean las imágenes y cosas que uses aquí, haz que funcione por aquí. Entonces cuando se haga clic, va a saltar a esa página ahí Y cuando hayas terminado un video bien, de tu desplazamiento, Esa es la mejor opción Recuerda que hay captura de video tanto en Mac como en PC. Mac tiene uno incorporado llamado QuickTime Google ¿cómo usar eso Windows también tiene uno. No recuerdo que se llama y sube un enlace a tu video. También puedes usar YouTube o Vimeo o Behance. Los videos anfitriones ya han comentado este MNA. En fin, es un resumen. Comparte el video, súbalo a las asignaciones, el enlace a ellas, asignaciones, y etiquétame en las redes sociales, usa el hashtag miembro Figma Advanced sin el punto completo. No es una manera fácil que pueda ir y echar un vistazo al trabajo de la gente específicamente para ese curso. Elige tu veneno social y etiquétame en él. Me encanta ver lo que estás haciendo bien. Así que recuerda, cuando estás publicando no tanto en redes sociales, sino sobre todo en las secciones de asignación para comentar sobre el trabajo de otras personas. Recuerda la regla, pero pagándola adelante, bien, ya está. Tiempo de proyecto de clase. Disfrutar. Va a ser duro, prometo que tengo que ver ese video antes de este. Un par de veces podrías encontrarte con nuevos problemas. Si me lo haces saber en los comentarios. Si ves a alguien ahí abajo que está luchando o necesita ayuda, también saltó ahí abajo, ayúdalos en los comentarios. Vaya equipo. Bien, eso es, voy a ver en el siguiente video 52. Cómo crear componentes interactivos en Figma: Bien, aguanta. Ella tenía como ver esto. Si coloco el cursor sobre este botón, el equipaje duro cambia, es interactivo Es un componente que funciona. De hecho, lo he hecho antes en el curso con Animaciones, pero en realidad no lo llamamos componentes interactivos porque era animación. Pero ahora vamos a conseguir este estado hover. La única cosa va a ser, ¿es obvio? No lo sé. Y tenemos uno es realmente fácil aprender este principio. Sólo estamos para recapitularlo. La única cosa que no va a funcionar aunque, es flotar sobre un teléfono, bien, mucho que quieras tener será tu dedo sobre tu teléfono y llegar a cambiar. No funciona. Esto es más un botón de desplazamiento para escritorio, pero el estado de desplazamiento es una excelente manera de mostrar los componentes interactivos Entonces hagamos que sea nuestra primera parada. Solo para que lo sepas, esta es exactamente la misma técnica que hicimos antes para nuestra animación sin que surgieran tics, bien, la hicimos un componente Había variantes. interacciones entre estas variantes. Ese es un componente indirectivo, pero lo usaremos para como un truco para la animación Cuando la gente habla de Componentes Interactivos, normalmente están tratando con esos elementos de la interfaz como el botón útil. Así que vamos a hacerlo. Entonces, para empezar, creé un botón. El botón no es más que ticks y un rectángulo. He hecho el mío y el autolayout. El botón cambia de tamaño. Eso es totalmente opcional. Lo que es un opcional es que la cosa necesita ser Componente. Mi caso es un marco, eso es un marco de diseño automático. Voy a convertirlo en un componente. Se puede ver ahí abajo el símbolo de los componentes. Voy a hacer una variante de esto. Y este de aquí, voy a cambiar al modo de diseño, cambio D. Pulsa sobre el fondo, encuentra el fondo y escoge uno de mis colores más oscuros. Bien, ese bucle que tenemos que hacer ahora es agregar espectáculos de animación Shift E nuevamente para volver al modo prototipo y decir, esto va para aquí. Bien, pero de barril, voy a ir por la pared flotando. Bien. Y cuando está flotando cambiar a es variante a tengo algunos malos nombres en marcha, pero está funcionando. Vamos a decir muerte instantánea. Vamos a dejarlo todo por defecto y darle una prueba, tal vez una de turno. Voy a decidir en qué página trabajar. Voy a lanzarlo a mi página de lista de deseos. Cualquier página a la que quieras ir a mis activos Opción o Alt a K. Y yo voy a ir, ¿Dónde estás botón? Derecha. Ahí vas. Voy a tirarlo a esta página aquí, que estoy previsualizando por aquí Y ojalá que si me desplace por encima de ella así, tiene un hover No es muy bonito, pero eso es todo. Componentes indirectivos. Entonces las cosas que hay que pasar es que necesita ser Componente y necesitas tener más de una variante. Y necesitas animar un poco entre los dos Componentes Interactivos los dos Componentes Interactivos en una mina elegante No hay nada más que productivo en este video, haremos algo un poco más complicado el siguiente. Pero por el momento, me voy a poner muy bien el mío. Si quieres andar por ahí. Colgar por ahí. Si no lo haces, no cambies a, lo que quiero es que vuelvas a flotar en realidad primera lista, nombra estas cosas Así que voy a volver a Shift E al modo de diseño y te llaman default, está bien. Y este de aquí, no variante de diente, así que va a llamarse hover También me va a gustar este alguien con una sombra de caída. En efecto, mi sombra favorita es cero, algo así como dos. Estoy acompañando a algo así. A mí me gusta un poco apuntando recto en la parte inferior de ahí. Se puede ver esa. Ahora en un hover por encima de él. ¿Puedes ver que hay una pequeña sombra que aparece y también un poco atascada la forma en que cambia con Instancia Entonces Shift D, bien, para volver al prototipo, en vez de ir a Instancia, voy a ir a disolver o animar inteligente cuando vayamos a disolvernos Entonces hay un bonito desvanecido entre los dos. Bien, ¿ algo más quiere hacer? No. Es un botón de flotar, Dan. Bueno, te ha ganado hacer. Bien, eso va a ser por el momento. Entremos en algo más complicado en el siguiente video. 53. Cómo activar y desactivar una marca de verificación en Figma: Hola a todos. En este video te voy a mostrar otro caso de uso para eso. Componentes interactivos, como el botón Hover en el último video Solo una más para darte una buena comprensión de su potencial para muchas microinteracciones de interfaz de usuario diferentes Vea este aquí. Haga clic en, haga clic en, haga clic en, haga clic en desactivado. Bonito. Bien, comencemos Bien, para empezar, todo lo que he hecho es hacer un cuadro de texto He dibujado un rectángulo con esquinas redondeadas y le puse una marca de verificación. Se puede dibujar marca de verificación. Podemos encontrar uno de un plugin es plugins porque te gusto podría haber pasado unos 10 min durante una marca de verificación que todavía no se veía bien. Y te voy a mostrar otro plugin genial que utilizo para iconos llamados íconos ocho. Conseguí una licencia pagada para ésta. Hay una opción gratuita respecto aunque es una búsqueda, pero puedes pasar y elegir, digamos que estás haciendo un trabajo como lo tenemos para iOS, en realidad tendrá todos los iconos para ese sistema de diseño Lo mismo con cosas como material para Android. Windows ahí, hay todo tipo de cosas buenas, bien, y puedes elegir el tamaño correcto y SVG es de donde obtuve mi tick. O puedes dibujar el tuyo. Bien, para que esta cosa funcione, voy a seleccionar todos los bits desplazando haciendo clic en todo, y voy a convertirlo en un componente, puede obtener una variante y luego cambiar estos dos hacia arriba Voy a subir aquí y no borrarlo, sino solo un globo ocular apagado en esto Y eso es todo. Bueno en realidad la mitad. Voy a cambiar a mi modo prototipo y Shift D. Y te voy a decir variante. Un poco de doble clic pasando. Bien, Entonces vas ahí de barril, cámbiala a esta variante mal nombrada a Voy a conseguir que vaya Instance. Y eso es todo. Necesito poner un ejemplo de ello. Bien, así que tomemos una instancia de ello. Entra a un número de página vacío delante de las imágenes para pasar por marcos abiertos. Voy a ir a mi opción de panel de activos o Alt a, y te voy a decir aquí mismo. Entonces por aquí voy a ir a hacer click clack. Y va a funcionar un poco. Apareció la garrapata pero no se fue. Entonces arreglemos ese cambio para retroceder unos pocos. El infante Noviembre. Y aquí turno a y voy a decir que va ahí cuando se hace clic y esto va ahí cuando se hace clic o toca Recuerda que va a decir tupla móvil, clic en un escritorio, previsualizarlo igual, lo mismo, y debería funcionar muy bien Es bueno para ir. Haga clic en, haga clic en apagado, haga clic en golf. Como si fuera agradable y fácil. Ese es un componente que tiene variantes pero ahora tiene interacción en él. Bien, haciendo clic en cosquillas en el siguiente video. 54. 54 Button deslizante: Hola a todos. Llevemos nuestro conocimiento de componentes interactivos un poco más allá nuestro conocimiento de componentes interactivos y hagamos este prototipo que tiene la línea que aparece que me hipnotizé por mirada rebota de un lado a otro, siga hacia dónde vamos Vamos a saltar y hacer que funcione. Bien, para empezar, necesitamos tres páginas separadas. He llamado al mío hoy este fin de semana y lo más nuevo. Bien. Va a coincidir con esta navegación a lo largo de la parte superior aquí. Y en realidad acabo de duplicar la tarjeta que hicimos antes y todo lo que hice fue cambiar las imágenes. Entonces parece que estamos cambiando página por ti por el momento. Podrías simplemente poner texto en la página solo para que sepas que estás saltando de diferentes páginas. Lo que también hice fue que fui y creé tres bits de texto. Eso es todo lo que son. Y un marco aquí podría ser un rectángulo, es sólo una línea que nombrará comando R, control R. En una PC, voy a llamarlo línea. Esa va a ser la cosa que salte por ahí. Bien. Lo primero es lo primero es que tomemos todo esto y vamos a convertirlo en un componente. Vamos a configurar la navegación para saltar entre ellos y probarlo. Primero lo que voy a hacer es que voy a mover el componente apagado, el componente principal, porque no puedo cambiar para cambiar a prototipo. No puedo llegar hoy a ir a sí mismo porque está dentro de sí mismo. Entonces lo que tenemos que hacer es agarrar este componente, el componente principal. Puedes quedarte ahí arriba. Vamos a darle un turno de nombre que encienda a los gobernantes. Es mando y control. Nuestro En una PC es cambiar el nombre de este e ir nav guión sub como mi pequeño sub navegación Bien, pongamos una instancia aquí abajo. Opción o arrastre Olt. Y lo que voy a hacer es copiarlos y pegarlos en todos ellos. Así que haz clic en mantener, desplazar, hacer clic y simplemente ir a pegar. Ahí vamos. Así que esas son todas las páginas. Vamos a probarlo para ver si funciona. Bien, ya tengo mi prototipo abierto aquí. Nada está funcionando. ¿Por qué no funciona? Volvamos aquí. Oh, en realidad no agregamos la navegación. Cuando el clicked de hoy, estoy en modo prototipo. Vas ahí cuando se hace clic en fin de semana. Vas allí cuando se hace clic en lo más nuevo. A veces si no puedes ver la página porque tienes tantas, puedes simplemente en realidad, en lugar de arrastrarla en una interacción cuando se toca, quiero que navegue a mi página llamada caliente y nueva o simplemente nueva, donde es Lo más nuevo depende Lo mismo. Vamos a probarlo ahora, Hoy, fin de semana. Todo bien. Para que las piezas funcionen prueban a medida que avanza. Y lo genial de hacerlo de esta manera es que lo hemos hecho al componente principal que las interacciones se hagan dentro de ese componente para que todas las instancias lleguen para el viaje en lugar de intentar arrastrarlas a todas. Pero sabemos que esa es una buena práctica. Pero tenemos que evitar que salte. Necesitamos esa línea para movernos. Ahora bien, esto trae a colación un buen punto. Podemos cambiar instancias, podemos hacer cosas como la de hoy. Puedo cambiar el texto de la misma. Bien. Entonces este va a decir ayer. Bien. Para que podamos cambiar el texto. Podemos cambiar el color del texto. Gran cambio de color, Dan, es mejor. Hay algunas cosas que podemos cambiar de instancias, algunas cosas que no podemos. Uno de ellos es el orden de capas y el movimiento físico. Mira esto. Si voy a esta instancia, quiero que esté aquí. Pero en esta instancia, donde hice todo, yo hice algo. En esta instancia, quiero darle doble clic en gris. Ya lo tenemos. Y simplemente muévalo a través. No podemos moverlo. Bien. Todo está atenuado porque el componente principal es el jefe del movimiento. ¿Bien? Y orden de capas. Podemos hacer cosas de actualidad como el cambio de texto y podemos hacer cambios de color, pero algunas cosas no podemos. Entonces, ¿cómo hacemos esto? Para este en particular, lo que tenemos que hacer en nuestro componente principal, necesitamos múltiplos de éste. En realidad no se mueve, lo hace así que voy a simplemente arrastrarme, así que tengo múltiplos de estos ¿Bien? Voy a hacer que se alineen y sólo vamos a encenderlos y apagarlos. Para cada uno de estos. Voy a resetear esta. Restablecer todos los cambios para volver a esto, por lo que tipo de movimientos. Lo que termina pasando es siempre y cuando los nombres sean los mismos, así que tenemos una línea, línea línea. Eso es importante si estás copiando un fotograma y tiene frame 123 o rectángulo 123, cámbiale el nombre para que sean todos iguales. De lo contrario, smart animate no funciona, ¿verdad todos? Yo sólo quería saltar aquí. Algunas personas tienen preguntas y problemas principalmente en torno al desvanecimiento. Si el tuyo se está desvaneciendo, en lugar de deslizarse así, y el mío se ve diferente porque estoy más adelante en el curso, solo estoy un poco atrás para responder preguntas Y te voy a mostrar a alguien publicado en los comentarios, dejaron un video, lo cual es muy útil. Déjame, ¿puedes ver lo que está pasando aquí? Voy a conseguir que juegue. Juguemos. A ver cuándo están dando clic en él. Se está desvaneciendo en lugar de deslizarse. Bien. Y puedo ver en su video que es porque el componente tres, ese es el nombre de su componente. Lo han llamado 12, 13 y 14. Lo han llamado rectángulo. Llamé a mi línea. Todos deberían tener el mismo nombre para que este truco en particular funcione. ¿Bien? Ese sería el problema con éste. Si todos fueran del mismo nombre. Apuesto a que trabajarías. Sí, eso es lo único que hay que verificar. Se puede ver en el mío aquí tengo mi componente principal, y dentro de él están los tres cuadros de texto, pero por separado están estos línea, línea, línea. Asegúrate de que todos sean iguales y asegúrate de que la animación inteligente sea lo que los conecta. La página a la página, podrías estar como, ¿cómo hizo el grande? Esa línea que hicimos, puedes ver que es solo la línea pequeña. Depende de ti cómo quieres que haga, pero ojalá eso ayude. La siguiente pregunta que surgió fue, ¿ estabas usando animaciones inteligentes entre estos dos o tres fotogramas separados para que podamos obtener esta animación genial ¿Y si no quieres que todo en la página haga una animación inteligente? Podríamos hacerlo. Supongo que voy a querer señalar, me parece que cuando estoy trabajando es que muchas veces no es un prototipo 100% completo que funcione de todas y cada una de las maneras. Se pueden complicar mucho y puedo pasar días tratando de corregir errores y obtener este portafolio perfecto, lo siento, prototipo. Cuando de hecho podría tener fácilmente un marco separado para decir así es como funciona el menú y excluir todas estas partes inferiores. Entonces di que así es como se ven las páginas, así es como se ve una transición de página para que pueda dividirlas en partes separadas. Realmente fácil de hacer y no muy complicado y aún así consigue mi punto de vista. Habrá momentos en los que solo quieras hacerlo perfecto también. Lo que yo haría en este caso, si quisieras smart animate y algo más pasando abajo aquí, creo que fade está bien Bien, a menos que los muevas, como yo hice en esta primera, realidad, ¿qué harías? Bien, hizo una pausa. Lo que haría es hacer inteligente animar entre ellos y usted Llegaríamos a esta página, pero esta página estaría en blanco. Yo diría que haga clic en este botón. Llegue a esta página en blanco y no tenga nada de esto aquí. Esta página en blanco Tener un prototipo de una interacción que decía, esperar un poco después de un retraso de tiempo. Entonces ve a mi página con todos los bits en ella y haz una transición diferente. Acabarías creando algunas páginas extra. ¿Totalmente factible? Sí. Todo bien. Entonces espero que hayan respondido algunas de las preguntas que podrías tener en este momento, pero más por venir continuar con un video. Entonces vamos a hacer es decirte, no puedo moverte, pero puedo apagarte. Y ni siquiera quiero apagarte, solo quiero esconderte. Bien. Ahí vamos. Pop, apaga el globo ocular. Usa tu propio efecto arena. Bien, para este, cuando estemos en el fin de semana, queremos este encendido y estos dos fuera. Entonces voy a acelerar a través de esto. Bien, el atajo es comando shift en una Mac, es control shift H en una PC solo para ocultarlos automáticamente o puedes hacer el pequeño ruido agradable, encerrar el globo ocular que está funcionando Siempre y cuando el nombre sea el mismo deberíamos estar trabajando. Vamos. Una cosa que vamos a hacer también es que vamos a ir realmente al modo prototipo. Y hay un flujo aquí arriba. No necesito un flujo ahí arriba. No sé cómo llegó esa. El tuyo podría estar aquí abajo, puede que no tenga uno en absoluto. Voy a decir que en realidad fluyen. Va a ser hele, va a iniciar este flujo. Salta a la página derecha. Todavía no funciona. Sé por qué lo está haciendo. Lo que queremos hacer ahora es smart animate. ¿Qué bits animamos de forma inteligente? Podríamos hacerlo entre aquí. Podríamos pasar y decir, instantáneo, cambiarlo a smart animate. Pero tendríamos que hacerlo para cada instancia podemos hacerlo a este principal de aquí, nuestro componente principal. Y te digo, está haciendo lo correcto. Vamos a la página de la derecha. Pero va al instante. El tuyo podría haber incumplido con la animación inteligente Bien, recuerda lo último que hiciste. Vamos. Animado inteligente. Vamos ya. ¿Estás listo? Ah, la gloria. Mírelo. Cambia de forma para encajar debajo de los diferentes. Se mueve a lo largo de una especie de pequeña interacción agradable para ayudar al usuario a saber dónde está realmente. Bien, profundizando un poco con nuestros componentes interactivos, agregando un poco de animación. Hicimos una línea debajo, obviamente podrías hacer una línea sobre la parte superior. Oh, desafío de buena clase. Veré en el siguiente video. En realidad, antes de irnos, quiero mostrarte, bueno, vamos a hacer un poco mejor flexibilización porque eso es algo genial Pero se ve mucho mejor cuando la flexibilización es uno de estos o uno personalizado estos rápidos y puedes experimentar con los tuyos. Déjame acelerar a través de esto, bien. Mucho mejor. Ese tipo de pequeño rebote de ida y vuelta. Oh, es lindo. A mí me encanta. Bien, ahí vamos. Pero no te preocupes, no me he olvidado del pequeño reto que he decidido hacer. Y estás pensando, el reto de Dan tiene que ser alinear esto, mira ¿por qué está tan cerca de ese lado? Te está volviendo loco. No me di cuenta de eso Ahora también me está volviendo loco, así que voy a atravesar la navegación, pero lo haré entre videos, ya veré en el siguiente. 55. Proyecto de clase 07: Desafío de navegación deslizante de Button: Hola a todos. Es un desafío de barra de tiempo de proyecto de clase El primero, el de K Challenge es básicamente recrear lo que ya hemos hecho Esta línea que se mueve a lo largo, bien, crea tres páginas, crea tres enlaces de navegación. No tiene que ser hoy, podemos más nuevos, depende de ti. Quiere probar que la estructura funciona y hay una línea se mueve debajo de ella para hacerlo primero. Y luego el extra, esa parte desafiante es que quiero que te muevas a esta línea se ha ido y ahora hay un fondo que se mueve a lo largo. Y ¿puedes ver el cambio de texto a blanco debajo? Eso es. Quiero que vayas primero a la primera línea uno y tomes un video screencast de esa versión y luego te muevas a esta y hagas algunos cambios ¿Por qué? Porque es un reto con, creo que a tu alcance dB realmente lo hacen. Y sería interesante ver de qué manera lo afrontas. Y luego el siguiente video que verás en la lista aquí, hay una versión terminada de este reto donde lo haré, esta en particular. Sólo para que puedas comparar la forma en que lo abordaste con la forma en que yo lo abordé Quizá encuentres que te gustaría, estás mucho mejor. Puede que te guste la forma en que lo hago mejor, pero no olvides ese video todavía. Hazlo tú mismo. Algas, ve, mira lo que te queda atascado. Mira cuánto tiempo te llevó, lo complicado que era el tuyo, y luego compárelo con lo complicado que era el mío. Ahora, también, cuando estás haciendo un video de esto, si has estado haciendo screencasts ahora, tal vez busques usar tu teléfono para grabarlo Así que saca tu teléfono como ahora mismo. Bien. Tengo mi teléfono en la mano y solo te grabo pasando por él y mostrar un poco incluso espacio en disco sucio, limpio no importa. Sólo para hacer la revisión de estos poco más interesante para todos. Echa un vistazo, el escritorio de todos. Entonces, ¿qué está pasando? Entonces video de tu animación. No es esencial. Simplemente puedes tomar un pantalla-cast normal Bien, así que he enumerado todo en los ejercicios de clase, pero no lo sé Se siente largo y duro y siento que esa demo fue mejor. Grado tres páginas, crea un nav con los tres enlaces diferentes. Haz que esos funcionen. Así que saltaron cada página, luego consiguen que esa línea se mueva debajo de todas las diferentes Opciones de Nav, conseguir que rebote a lo largo. Una cosa que he editado aquí es el historial de versiones. Así que cada vez que estoy trabajando, muchas veces cuando llegas a este punto donde digamos, volvamos a este de aquí. Te gustaría, ¿dónde está? Y ya terminaste esta y quieres pasar a la siguiente opción de la misma, tal vez te interese simplemente ir en realidad, quiero guardar esto a tiempo poder volver a ello si es necesario. Cubrimos esto en los Esenciales, pero volvamos a cubrirlo aquí. No tengo nada seleccionado. Sube aquí y di el historial de versiones. Y puedes decir, bien, voy a ir a hacer de esto algo completamente diferente Así que solo quiero golpear Plus y decir sub nav. Digamos que estamos a la altura de los botones, deslizamos uno, y vamos a hacer otra cosa con un degradado. Solo significa que más adelante podrás volver a esa versión una vez que continúes, una vez que hayas hecho lo había hecho. Y es una cosa que te mete un poco atascado ahí dentro Sigue, continúa, continúa, y cámbialo todo, mézclalo, haz esta cosa que no sé, un color diferente y úrico todo Bien, entonces puedes decir realidad click off en segundo plano, volver a mi historial de versiones y decir, Déjame volver a su check it out. Solo puedes mirarlo y eso es todo y lo había hecho, saltará de nuevo a donde estabas. O se puede decir en realidad esto restaurar la versión. Voy a volver a aquí y volver completamente a eso, pero y luego pegaré Hecho. Ahora, ¿qué tipo de reinicio de nuevo a ellos? Guarda un historial de versiones una vez que hayas hecho la línea Desafío y luego haz ese botón Desafío, que es cambiar la línea a un botón. Ve cómo vas ahí y obtienes el fondo para moverte a lo largo de la línea lo hizo además, y el tipo de reto, pero ¿cómo consigues que cambie el color? Bien, puedes ver que va de blanco, Tim negro a blanco, botón de mujeres va por debajo de él y ese es uno de tus retos. Puntos de bonificación si también cambias el color del botón. Y puntos de bonificación triples por gradientes. Me encantó un gradiente. Comparte el video de ambos retos. Ella enlaza y la sube a la sección Asignaciones, también compartida en redes sociales. Etiquetanos con Figma Advanced. Elige tu plataforma o todas ellas y asegúrate de saltar y recibir algunos comentarios a, a otras personas. Pintura darse el lujo. Bien, ese es el reto Lo pasaré yo mismo en la siguiente, pero hágalo usted mismo primero. A ver que nos quedamos atascados. Mira cómo te acercas a ella. No hay una manera correcta. Si funciona, funciona, pero entonces puedes revisar mi uno en el siguiente video. Bien, buena suerte. 56. Proyecto de clase 07 - Completado: Bien, Este es el video de finalización. Te mandé una tarea y el último video, aquí es un poco donde estamos buscando terminar, déjame mostrarte la manera en que fui No de la manera correcta, no de la mejor manera, no de la manera más rápida Sólo una manera en la que fui y puedes compararla con la tuya. O si te has perdido, ojalá puedas irte, Ah, por eso estoy, me equivoco. Más aprendido de todos modos. Vamos a meternos en ello. Bien, las partes de terminación, ¿las completo? No lo sé. No he practicado esto. Mucho de su tipo de contenido en este curso y asegúrese de que lo haga de antemano. Obtenemos los bichos, hacemos el pedido bien. Dejo en algunos de los pedacitos en los que me pierdo porque sé que terminas perdiendo dos, así que bueno ver como trabajar tu manera de salir de las cosas. Pero con este, sólo voy yo dije el reto. Creo que sé lo que estoy haciendo. De hecho, solo hagámoslo diez. Entonces, lo que voy a hacer es que probablemente voy a reutilizar lo que tengo y manteniendo oprimido la tecla Opción para arrastrarla hacia la izquierda y hacia la derecha. Bien, la tecla Alt en una PC hace ambos lados. Y tenemos que jugar con el orden de capas. Entonces voy a usar mis corchetes. Vamos a hacer con todas las líneas. Porque recuerda, una de las cosas que no podemos hacer con Instancias, no podemos cambiar el orden de las capas. Entonces todos estos tienen que estar aquí abajo bajo todo el texto. Ahora en términos de realidad lo que podría hacer es deshacer, deshacer, deshacer, deshacer, deshacer, deshacer, deshacer, deshacer. Bien. Es hacer esto todo en una gran oportunidad. Entonces primero que nada, los voy a mover a todos hacia abajo, luego somos todos ellos seleccionados. ¿Hiciste el tuyo de forma individual? Podría haber sido algo que hiciste. Así que voy a hacer esto. Voy a mantener la tecla Opción. No puedo, no puedo hacer los anchos del todo. Lo que podría hacer es ver si puedo ir a mezclar ancho e ir plus o va a ir desde el centro? Ya veremos, puedes volver a las mismas anchuras. No salieron del centro, pero bueno, está bien, Genial. Ahora lo grande es el cambio de color, ¿verdad? Entonces siento que eso aún debería funcionar. Vamos a probarlo. Command Option en otro par de formas de hacer esto, ¿verdad? Puede que hayas encontrado una manera perfectamente buena. Incluso podría haber más rápido. Eso está bien. Bien, eso es bueno. No está alineando muy bien entonces. Lo arreglaré más tarde. Tiene a la mecánica funcionando. La única cosa es el cambio de color. Podrías cambiarlo aquí arriba con digamos, una variante. Puedes convertir esto en su propio componente, una K, puedes decir que eres un componente y tienes que hacer variantes. No podíamos hacerlo. No podemos hacerlo aquí porque está dentro de un sub principal. Pero en realidad, podrías bajar por el agujero de gusano y funcionaría, hacer de estos un componente separado agregar aquí, tener que Variantes, ponerlos de nuevo dentro o aquí abajo solo podemos decir, recuerda las cosas que podemos cambiar No podemos cambiar el movimiento de solo hoy, pero puedo decir que esto tiene un color de menos más. Vas a ser blanco. Copia el relleno. Y te voy a decir ahí, voy a tener este relleno. En realidad se terminó con dos rellenos. Se pega a los rellenos. Y echemos un poco de mirada hacia arriba. Ah, bien, házmelo saber en los comentarios cómo hiciste el tuyo. Me interesaría ver igual lo que hiciste de manera diferente que tardó más tiempo pero aún así llegó al mismo lugar porque es útil para que otras personas vayan como, Oh si, o ellos también son demasiado, o podrías estar como que hay una mejor manera. Y 100% de acuerdo que hay. Hay muchas maneras diferentes de hacerlo y te apuesto a que hay una mejor manera. Lo que voy a hacer ahora es jugar con este espaciado porque no es lo suficientemente bueno. ¿Qué hice más, más otros 16? Y barajando, eso alimenta mejor excepto la altura. Uno sobre. No quiero abrir la idea. Bien, buen trabajo en el reto, todos. Si no pudiste trabajarlo, ojalá haya un momento aha en este video para ti, pero eso es todo. Te veré en el siguiente video. Adiós ahora 57. Cómo usar Secciones en Figma para organizar tu contenido: Bien, manos arriba. Quien nunca ha usado esta opción aquí llamada Sección. Bien, si tienes las manos en alto, vamos a verlo en este video para usar secciones para organizar tu contenido poco así donde podamos Sección fuera de la tableta de escritorio móvil se duplicará y cambiará todo tipo de área de componentes para una Por qué estamos haciendo secciones para organización aquí en nuestra sección de prototipos del curso Porque en el siguiente video en realidad vamos a usar secciones para hacer algunos prototipos bastante dulces Pero apuesto tus dorsales, no conoces el propósito principal de las secciones, así que hagámoslo aquí Ese tipo de increíble, como un poco impresionante, pero necesitamos aprenderlos para que podamos usarlos en el siguiente video Bien, vamos a saltar . Bien, confesó un bar para archivar de la comunidad Figma. Gracias. Tener NSA enorme hasta octubre Baratta, solo para que encontré algo que tenía móvil y escritorio y iPad diferentes pantallas en ella Entonces este es un muy buen ejemplo de organización usando secciones. Las secciones se esconden bajo donde tenemos marco, bien, hay una llamada Sección con click en ella. Y podemos simplemente dibujar una caja alrededor de las cosas que queremos organizar. Ahí vas. Mira todas las capas. Todo está dentro de la Sección Uno. Ese es el Comando R para cambiarle el nombre. Y ese es el más genial . Bueno, ahora no podríamos simplemente hacer esto con un marco? Presiona la tecla F para fotograma, arrástrala alrededor de esta ranura. Y lo mismo, voy a nombrarlo y voy a llamarlo Escritorio. Sepa que no hay mucha diferencia entre los dos, excepto que solo hay diferencias visuales cuando se trata de organización. En el siguiente video, cuando empezamos a hacer algunos prototipos geniales, es mágico Pero por ahora, ¿puedes ver las diferencias aquí? Es un poco más diferente de todos los demás marcos, ¿Kay? Tiene una cajita alrededor. Podemos como marcos van. Tienes la oportunidad de elegir un color de fondo para ayudar a separarlo del fondo. Lo mismo que podemos hacer con el marco. Una de las cosas dulces que puedes hacer con él es hacer doble clic en el borde y lo envuelve un poco dejando algo de relleno. ¿Se puede decir que deja como relleno de 100 píxeles a ambos lados? Y es solo una diferencia visual de tipo como una jerarquía cuando estás tratando de separar las cosas, tratando de mostrar desarrolladores u otras personas o mantener tus ideas en algún tipo de cheque otras cosas que puedes hacer con ella es puedes hacer clic en esta sección. Y cuando vayas a Compartir, voy a compartir un enlace de vista. Y puedes ver que dice enlace a la sección actual. Puedes encenderlo si lo tienes seleccionado. Copiemos el enlace y lo abriré. Cuando se lo envío a otra persona, lo abren y se les dirige a esta sección en particular. Ahora los marcos también lo hacen. Ahora estamos de vuelta. Ahí está anónimo. Lo abrí en un navegador privado y anónimo se me ha unido. Bien, así que vamos a terminar las partes organizativas para ello. Entonces el atajo es Shift ya que puedes arrastrarlos hacia afuera. Puedes convertir las cosas en secciones. Entonces este marco aquí ahora, a lo mejor ya tienes algo, ya está seccionado. Puede hacer clic derecho en él y decir convertir a sección. Puedes agarrar un montón de cosas e ir a hacer clic derecho y decir rápida nueva sección, Comando-A Y esto va a ser tablet porque lo escuchamos porque avanzamos . Voy a deshacer eso. Se puede convertir de nuevo. Bien. Digamos que éste era un marco para empezar. Puedes convertirlo una sección aquí arriba en alternativa entre ellos. Ahora otra vez, es fácil agregar cosas a. Podrías decidir que esta pantalla en particular necesita estar aquí. Y simplemente saltó secciones como lo hacen los marcos. Puedes deshacerte de una sección haciendo clic con el botón derecho y diciendo desagrupar extrañamente, vas No se pueden poner secciones dentro de marcos. Curiosamente, vamos a convertir esto para volver a un marco. Y quiero decir, bien, dentro de aquí, quiero como marco grande, voy a decir Shift S para secciones Quiero que esta sea mi sección específica. Y funciona un poco excepto que no lo hace Parece que está dentro de él, pero ¿puedes ver que saltó de ese escritorio Franco y simplemente se fue por encima de él Siempre quiere ser el padre. Bien, así es bendecir. Se utiliza como organización de alto nivel, no para secciones dentro de marcos. Bien. La otra cosa a tener en cuenta ya que puedes tener secciones dentro de secciones aunque. Seguro. Tengo una sección aquí. Vamos a darle un color de fondo. Pero otra sección y aquí otra sección. Y entonces puedes, ya ves puedo conseguir que su jerarquía vaya a la sección tiene que ser el de alto nivel. Eso es todo para nosotros. Te ordeno que vayas a tabulación a comando, a controlar a en un ocupado. Porque quiero llegar a mi segunda pestaña. Y voy a ir a esta sección. Esto es perfecto para ser una sección. Se pone el icono dulce , obtiene un título ligeramente diferente. Puedo hacer doble clic en el exterior para que todo quede bien. Y estoy trabajando a mi manera y tengo pantallas de bienvenida y mi en mi proceso de registro es una sección separada Entiendes la idea. Bien, así que estamos bien con las secciones para la organización Pasemos al siguiente video. Haremos secciones para prototipado, que es super mole fund 58. Cómo usar secciones para crear prototipos en Figma: Hola a todos. Oye, vamos a ver el uso Secciones en Figma para hacer algunos Prototipos elegantes Creo que es elegante de todos modos, para darte una rápida demostración de lo que estamos haciendo, necesitas tener tu cara de concentración en ti lista. Lo que normalmente sucede cuando estamos cableando algo, bien, es que pasamos un poco a través de un flujo y todo es muy lineal Sin embargo, lo que podemos hacer normalmente es hacer esto. Compras un boleto, llegas a la caja, vas a la página siguiente, llegas a la información del asistente, llegas a la página de NASW y vas a Y una vez que estás de vuelta aquí y quieres volver a entrar en ello, tienes que empezar de nuevo, poco trabajar tu camino a través de una manera lineal Comprado, mira esto porque hemos usado secciones. Puedo decir compre un boleto, vigile uno para agregar los números ahí para que sea más fácil. Entonces llegamos a uno, llegamos a tumor como, ¿sabes qué? Me gustaría volver atrás y verificar algunos detalles antes de pagar. Para que puedas hacer eso. Y en el pasado, sin habilidades previas, si hago clic en comprar un boleto, vuelves al número uno. Pero pase lo que pase, directamente vuelta al número dos, de ninguna manera. Ese es el poder secreto de la sección en Figma. Déjame mostrarte cómo hacerlo para empezar. Tomé la página de detalles de cómo Vince que hicimos antes. Le puse un botón al azar en la parte superior. Entonces estaba como, de nuevo, voy a hacer un flujo de carrito de pago en boletos e información y pagos. Y ya ves que empecé con un poco de vigor y luego me aburrí. Tú para que esto funcione o necesitas es de tres páginas, llámalos gato 123. A lo mejor solo ponte estos títulos y podrás rellenar los demás detalles más adelante. Vamos a hacer que funcione. Ahora vamos a por qué esto arriba como lo haríamos normalmente sin nuestro truco secreto, modo prototipo Shift D, este botón, cuando hace clic, empiezo el flujo de checkout. Entonces una vez llego al siguiente paso eso va ahí y luego va ahí. Entonces eso es bastante normal. Sí, lo que voy a hacer son estos títulos aquí. Voy a decir, no, vas a ir aquí. Así que cuando alguien intenta escapar de mi tarjeta, bien, van a volver a este evento detalles uno. Vamos a probarlo. Así que voy a ir, voy a ir y agregar un punto de partida de flujos solo para asegurarme de que sean puntos en la página correcta. Esto es normal. Supongo que necesito mostrarte lo que está roto para mostrarte cómo, por qué esta cosa genial de la Sección es lo fijo. Entonces si voy aquí y llego a la caja y voy a la mitad de la información de los asistentes Estoy como, en realidad necesito revisar realmente los detalles del evento. Entonces hago clic aquí y luego estoy como, Oh no, eso es perfecto. Y así hago clic en la parte posterior para comprar boletos. Salta de nuevo al principio. No sabe de dónde vengo. Entonces para que lo recuerde, usamos secciones, así que lo voy a dejar todo como está, excepto que voy a crear una sección Shift S o de este desplegable de aquí arriba. Bien, y voy a decir U es Amanda para cambiarle el nombre. Y a eso se le llama éste. Flujo de caja. Presiona Escape para salir del nombre, haz doble clic en el borde que se envuelve muy bien Y todo lo que vamos a hacer es decir que te sientas y entres en ese primer cuadro. Voy a decir que en realidad vas a la sección. Ahí es donde ocurre la magia. Bueno, hay dos cosas. Suprimir el segundo. Entonces, cuando se haga clic en este botón a, ahí va a ir Y creo que eso es lo que tenemos que hacer. Vamos a previsualizarlo. Comprobemos nuestro flotador. Lo mismo que antes. Vamos, voy a comprar un boleto y no funciona. Tú esperas ahí. ¿Lo viste? No lo vi en drag. No estoy seguro de por qué y drag estaba ahí de barril, por favor. Gracias. Inténtalo de nuevo. Cuando hago clic en este, todavía está roto porque estoy usando smart animate. Kaizala no es inteligente animada. ¿Por qué? Porque estos botones tienen el mismo nombre. Debería cambiarlos. Ve fotograma nueve, y ese también es fotograma nueve, pero es olvidar que algo de eso pasó. ¿Sabe de lo que está hablando? Bien. Así que volvamos al inicio del flujo de salida. Voy a presionar Reiniciar Alfa. Y voy a decir por boleto, genial, llegar a la mitad de mis boletos, pasar a la siguiente parte Y yo estoy como, ojalá supiera lo que era otra vez. Para que pueda volver a las fechas de inicio. Perfecto. Así puedo volver a comprar un boleto, pero puedo saltarme ese paso. Mira eso en saltos de regreso a levantamos. Oh, tan bien. ¿Es bueno? No lo sé. Creo que es genio. Bien. ¿Qué más podemos hacer? Miramos antes , recuerden, había un flujo aquí dentro que decía atrás, estaba ese y le dije que lo dejara un poco para después Ahora es el encendedor. Lo que significa es que agreguemos un botón. Así que voy a abrir mi último plugin, bastante cortos icono hit Command Option P, control op, abrir el último plugin, el mío no abrió. No estoy seguro de por qué. Bien. ¿Son esos los atajos correctos? Vamos a cerrarlo. Lo es de todos modos. Entonces estoy usando el icono ocho y voy a encontrar un botón de retroceso. Y voy a usar esta. A lo mejor hay una cuenta gratuita, puedes hacer cosas gratis con esto. Tengo una cuenta de pago. El enlace aquí en la pantalla. Si quieres ir a registrarte en icon night, tengo un trato de afiliado con ellos y también obtienes un descuento si quieres inscribirte en él. Pero tengo mi botón de retroceso. Voy a decir, en realidad no hago esto correctamente y lo cortó. Voy a cambiar uno. Voy a ir a aquí, cambiar a, y voy a decir Pastas, eso va a entrar en mis componentes. ¿A dónde fue? Ha habido en la parte inferior. Hola, hazlo un Componente. Opción de Comando K, Tecla Alt de Control en una PC. Y voy a decir cuando te hagan clic, vuelve a simplemente arrastrarlo y sale, bien, o puedes hacerlo por aquí, barril, vuelve Y esto se debe a que el uso de las Secciones nos va a ayudar a hacer la espalda a donde estuvimos por última vez. Eso tiene sentido. Eso realmente lo demuestra. Así que olvida que ahora estamos en un algodón y solo piensa que somos un montón de páginas diferentes. Voy a ir a mis bienes y voy a sacar mi flecha. Y voy a poner este de aquí, copiar y pegar porque los componentes están de vuelta. Lo bueno de eso es, digamos que vamos a ir a hacer esto ahora. Vamos a ir Inició la página de resumen. Voy a ir aquí, pasar a la página siguiente. De vuelta, vuelve a la última página en la que estuve. Pero si me devuelvo a golpear, mira eso, saltó toda esa página porque sabe un poco el flujo que tú Winton Ahora claro, en este ejercicio en particular estarías como, probablemente solo quería volver al carro y a lo largo dejar fluir y eso está bien. Pero no quiero construir un conjunto de páginas completamente nuevo. Simplemente presiona el botón Atrás, te das la idea, aunque, opera más como el botón Atrás en un navegador, hay momentos en los que quieres que eso suceda. Bien, entonces eso es usar seccionamiento, usar estas secciones para hacer prototipos, el prototipado elegante, los fideos de Mandy se ponen ocupados después de un Muy chulo. Bien, eso es todo. Te voy a ver en el siguiente video. 59. Cómo agregar la barra de estado de conexión WiFi de batería de iOS a Figma: Hola a todos. En este video vamos a ver cómo agregar estos íconos de estado en la parte superior aquí, red wifi de batería o ellos el tiempo a lo largo de la parte superior también. Veremos cómo lidiar con esta muesca que está en algunos teléfonos. Y aunque este video tiene 10 min de duración, la respuesta rápida es, solo tienes que ir y robarlo a la comunidad Figma. En este caso, le robé una dulce a Wayne Dahlberg y la pegué. ¿Por qué este video tiene una duración de 10 min? Te voy a mostrar cómo seguir siendo bueno robando, quiero decir, apropiándose porque eso es lo increíble de la vieja comunidad Figma, ¿verdad? Vamos a saltar. Entonces hagámoslo. Vamos a apropiarnos de la barra de estado de otra persona. Y el truco es que la comunidad es el mejor lugar para encontrar algo como esto. Así que ve a la comunidad Figma y en la búsqueda, lo que estás buscando es poner en lo que sea la última versión de iOS o Android, el material de la funda o cualquier dispositivo que estés buscando Intenta elegir eso porque querías parecerte al nuevo que todos están usando. Satisface la otra palabra que quieras. ¿Bien? Y para mí, quiero ir no por Jim en Figma, solo Figma Y luego pasas, y lo que tiendo a hacer es que estoy mirando por aquí y este podría ser genial, bien, pero tiene cero me gusta y 18 descargas. Busco algo que tenga mucho más. Este de aquí tiene montones, tiene 525 likes, y tiene muchas descargas, y ya lo he comprobado. Entonces sé que es bueno. Ábrela. Lo vas a abrir en Figma. Y básicamente eso significa que estás tomando una copia de ella y luego vamos a ir a robarle pedazos. Entonces esa es nuestra portada. Vamos a usar Page Down para acostumbrarnos al atajo, para ir a esta otra página que ha creado cuya pesaba a alguien. Regresa aquí. Vete tú. Siempre. Dahlberg, te vas desquiciado Pick de duda. Muchas gracias por hacer esto porque es increíble. Y básicamente lo que buscas es que repasemos por sus activos u Option o Alt para echarle un vistazo. Sólo hay dos de ellos. Hay un montón de cosas que están incrustadas en él. Bien. Pero lo que queremos hacer es ir, quiero esta barra de estado. Vamos a arrastrar una copia. En realidad lo que quiero hacer es realmente agarrar el componente principal Entonces, cuando tengo que seguir saltando lado a otro hacia aquí para tal vez hacer cambios, no es que planee entrar o controlar, para saltar de nuevo a esa pestaña Y lo que tengo que hacer es simplemente pegarlo. Bien, pégalo aquí en mis componentes principales uno, ya debería estar en su propia página, pero empezando a ponerse un poco difícil de manejar Está ahí por el momento. Entonces debería tener en mis activos, voy a escribir estadísticas que enfríen un poco mis activos ahí está Lo que quiero hacer ahora es agregarlo a este top aquí. Podría editar a cada individuo, pero sabemos que esa es una mala idea. Queremos agregarlo al componente principal, que podemos encontrar haciendo clic derecho y diciendo, vaya a MainComponent, aquí está ahí Ahora vamos a agregarlo en eso un entrar y tal vez con la mente hacia atrás. Ese es un truco que no conozco. No lo es otra vez. Sé que a veces hago cosas como voltear horizontal y hacer eso todo el tiempo. Comando P, Vamos en horizontal. Entonces lo que hice, no estoy seguro. Bien, Así que tenemos que entrar aquí, veamos mi opción Capas o alt uno y terminé en mis componentes principales. Entonces va a aparecer en todo. Aparte de que llegamos a empujar el logo hacia abajo. Eso es todo lo que hacemos. Bien, veamos nuestro prototipo por aquí, necesita ser aplastado por allí un poco Y el ego, tiene que ir a la barra de estado. Ahora, sé que tenemos que ponernos un poco, pero eso es todo, si quieres, ¿cómo lo haces? Vas a robarlo, lo tomas prestado, lo apropias, mejores palabras Pero los pesos hicieron esto para que ahorraramos tiempo, lo cual es genial Puedes seguir adelante al siguiente video. Ahora, quiero sumergirme y echar un vistazo a este componente solo porque es bastante interesante Lo que se ha hecho y veremos la muesca. Y entonces lo que voy a tener que hacer ahora es que voy a tener que pasar por y asegurarme de trabajar en mi componente principal, darme suficiente espacio. Bien, voy a encender mi cuadrícula para asegurarme de que es un poco, sí, me estoy apegando un poco a mi patrón de cuadrícula Voy a agarrar mi logo y lo voy a arrastrar hacia abajo y se deshaga de mi grilla. Difícil de ver nuestro programa, algo por aquí que está previsualizando Voy a usar mi izquierda y derecha. Ese parece beta. Solo quiero encontrar uno donde esté un poco como colocarlo donde no todo se superponga y eso parece que va a estar a una buena distancia de la muesca Ahora puedes previsualizar la muesca aquí. Viene de Figma. Cuando estamos haciendo nuestro prototipo. El notch viene del teléfono que hemos escogido. Todos son diferentes. 13. Como un ocho no tiene muesca. Bien, entonces ese notch viene de ahí y puedes usar eso para un poco previsualizarlo. O puedes encenderlo en esta barra de estado en particular, porque cuando es increíble, gana. Volvamos al modo de diseño y creamos una variable para, para modo oscuro. También entró y en este estado aquí puedes ver que hay una muesca si hago clic en él. Bien. Hay una muesca como visible. No son las tallas adecuadas. No están seguros de que necesite mal. Wayne B tal vez solo quiera verlo oye que puedes diseñar alrededor o al menos saber qué tan lejos alimenta el logotipo de esta muesca aquí No lo quiero puesto. Estoy feliz de solo verlo por aquí. Incavemos también. Tengo tiempo. Bien. Éste, tiene una variable de vamos al verde. Un pequeño boleto lo rodea. Vuelvo a despejar. También aquí hay indicadores para está el micrófono encendido, está la cámara encendida. Echemos un vistazo a la barra de estado K, esta pequeña olla de aquí. Y aquí la hay. A lo mejor puedas arrastrar esto dentro y fuera. Bien, entonces hay una red digital. Entonces echemos un vistazo a la red. Uno, 3 bar, o me encanta este, a todos. Irlanda rural. La señal Wi-Fi, obviamente también puedes subir y bajar. Está bastante bien construido Componente, no pienses que es el tipo de cosas en las que pondrías el esfuerzo potencialmente cuando estás haciendo cosas. Bien. Echemos un vistazo a la batería. Bien. Para mí, vivo la vida de eso. Siempre estar cargando mi teléfono de la vida. A mi esposa por otro lado, le gusta cargar solo tu teléfono cuando muere. Así es como lo hace ella. Y luego una vez que vuelve a subir, ella pasa de estado normal a cargar en un cargador paranoico ahora, pero tú cada vez que me cobran un poquito, sabemos en los comentarios y eres paranoico cargos como yo o lo dejas correr hasta que muera y luego cobra en persona de todos modos, eso es usar el proyecto comunitario de otra persona Eso es lo que haces por muchos bits y piezas de la interfaz de usuario del sistema. Vamos a hacer uno más en un video a continuación. Pero para la barra de estado, ve a buscar a alguien más que lo haya logrado. O si estás loco, puedes construirlo tú mismo. Pero también, mi opinión es, ¿se suma a la demostración, tal vez para como piezas de portafolio final buscando pero para pruebas reales no ayuda. No lo encuentro. Déjame saber diferencia entre tener la barra de estado ahí arriba y no tenerla ahí. Conseguir que la gente haga algunas pruebas de usuario. Así que déjalo en tu decisión si quieres jugar el juego de me gusta y dejando espacio a el juego de me gusta y dejando lo largo de la parte superior aquí y todos nuestros diseños para esa barra de estado y luego notch. Bien, eso es. Te veré en el siguiente video. 60. Cómo agregar la interfaz de usuario de snack bar iOS o Android a Figma: Tostadas. Cualquiera mire esto, este pequeño tostado emergente aquí o cuadro de diálogo emergente Snack Bar Vamos a hacer esto. Entonces agregaremos el corazón y conseguiremos que esto aparezca. No lo estamos haciendo porque esta característica de interfaz de usuario en particular es realmente importante para el diseño de UX. Es más bien, por ejemplo, te voy a mostrar cómo salir y encontrar un elemento de interfaz de usuario en particular que quizás quieras usar, bien, hay algo que está siendo construido por Google o Apple, o WordPress o Laura Val o bootstrap o tailwind Algo, algo que ya está hecho ahí afuera. Quieres ir y encontrarlo implementado en tu diseño. Consulta las pautas para ello. Acaba de pasar que este me tomó la fantasía porque se llama Toast o Popup El brindis es bueno. Así que vamos a buscarlo. De hecho, vamos a ponerlo en marcha. Es como enseñarte a terminar. Podrás encontrar todas las otras cosas que podrías usar que ya existen en un sistema operativo y simplemente implementarlas en tu diseño de figma. Lo buscaré. Buh-bye. Hola. Hola, adiós. Bien, hagamos eso juntos. Bien, para empezar, vamos a tratar de encontrar un archivo Figma con alguien más lo ha dibujado Entonces no tenemos que dibujarlo nosotros mismos. Y alguna documentación básica sobre cómo debería implementarse en todo lo que hice fue para esta, solo busqué en Google Snack Bar para Android Y terminé el sitio de material aquí mismo. Si me desplace hacia abajo, ahí tienes. Incluso hay un archivo Figma, listo para ello. Días felices. Ahora, estoy en el navegador aquí. Y a lo largo de este curso he estado usando la versión de escritorio, pero solo puedes abrirla en el navegador. Lo bueno de Figma, mismo, mismo navegador de escritorio. Y lo que es genial es que en realidad puedes copiar y pegar desde la versión del navegador a la versión de escritorio para que no tengas que gustarte intentar encontrarla de nuevo en la comunidad ¿verdad? Ahora, tratando de encontrar los bits que quiero. Sé que probablemente esté en la mano, página abajo, página abajo. Como si hubiera todo tipo de cosas aquí. Una buena manera de hacerlo es aquí arriba en la búsqueda. Bien, puedo escribir en Snack Bar y no ver nada en esta página. Vayamos páginas viejas. Mira lo que puedo encontrar pierde cosas de Snack Bar. Estoy buscando un componente ojalá sea un diseño automático y puedas hacer doble clic en el nombre y te lleve a él no lo hizo. Va a buscar. Tal vez solo haga doble clic en un icono. Ahí vas. Y así está ese auto Layout y puedo ver lo que quiero ahí dentro, pero también estoy buscando Es filtrarlo por solo muéstrame los componentes. Vas Snack Bar, Dark, siempre todo tipo de cosas chulas. Entonces voy a agarrar esto. Ahí está ahí. Sólo voy a copiarlo. Saltar a mi versión de escritorio de Figma. Bien, encuentra un lugar feliz para ello y pegarlo aquí. Por mancha pesada. Quiero decir, voy a poner en mis componentes principales. Estamos tan realmente para poner esto en otra página, pero voy a resistirme. Bien, entonces necesitamos un par de cosas ahora vamos a poner una instancia de ello. Entonces, cambiemos a los activos. Y en realidad cambié el mío a de grilla a vista de lista solo para facilitarles las cosas porque mi Snack Bar los pop hip ahí. Ahora necesito el calor en la parte superior. Entonces voy a entrar en mi pila de activos y voy a escribir hot, hacerlo un poco más pequeño. Es bastante masivo, necesitamos para 24, tal vez múltiplos de ocho. No es necesario, pero voy a entrar dentro de él, haga doble clic en él para entrar. Y voy a hacer esta instancia en particular. Lo estoy haciendo en mis componentes principales que aparece en todos ellos. Cambia uno por allí también. Entonces, a continuación, cambia a, vamos a conectarlo. Ahora va a ser una superposición porque quería no ir a otra página, solo quería aparecer. La cosa es que con las superposiciones es que en realidad tiene que estar por sí sola fuera del marco Se va a iniciar fuera de pantalla y se cargará. Entonces lo que voy a hacer es que te va a decir cuando el más caliente haga clic, va a cambiar E para ir a prototipo Voy a decir ir a esta cosa, pero no quiero navegar hasta, quiero decir open Overlay to Snack Bar, lo cual es genial. Demasiado centrado. No, no quiero decir a la pantalla, puedo hacer manual. El problema con el manual es como, digamos, quiero que esté perfectamente ahí cuando se abra. Excelente. El problema es una relación entre donde sea que se haga clic en el botón y esta cantidad de píxeles hacia abajo. Entonces lo que termina pasando es porque mi prototipo, y si hago clic en este, perfecto, si hago clic en este. En realidad lo que vamos a tener que hacer es decir Cuando se cierra, al hacer clic afuera a, así se va. Entonces ahí vamos, se va, bastante haga clic en este en realidad está apareciendo, pero está abajo de las pantallas como aquí abajo. Entonces eso no va a funcionar en esta instancia. Lo que vamos a hacer es que vamos a decir que en realidad solo te quedas al fondo. Ahí hay uno en la parte inferior. El problema es que no hay relleno desde abajo si descubres una manera de hacerlo que no sea la forma en que te voy a mostrar ahora, avísame. Pero funciona ¿verdad? Significa que éste aparecerá ahí, ese uno en una página, solo necesito poco de relleno en la parte inferior. Entonces lo que tengo que hacer es agregar un poco de acolchado falso en este momento, si busco mi Opción de Panel de Capas o Alt uno, bien , capas, puedo ver que esta cosa es Snack Bar Colgando solo. Y lo que hago es sintonizar un autolayout, aunque sólo hay una cosa ahí dentro, solo para que pueda decir 00, estoy tabulando cero en la parte superior y en la parte inferior aquí solo para que pueda decir 00, estoy tabulando cero en la parte superior y en la . No sé Parece que acaba de escribir 64 ver, ¿nos vamos? Y vamos a abrirla. Ahora. Está asustada. ¿Por qué está asustada? Bueno, déjame pensar. Cualquiera pausa el video. Bien, ya lo tengo. Y estábamos enlazando con el Snack Bar. Queremos que se vincule a este padre de familia. Ahora voy a renombrar al padre. Recuerda, Comando o Control R en una PC. Es genial. Este, Snack Bar, envoltorio acolchado o Rapa Rapa. Podría ser mi nombre de representante, Snack Bar y broma de papá. Aparte de eso, lo que tenemos que hacer es volver a conectar esta cosa porque está tratando de entrar de ahí y está perdida y no puede hacerlo Entonces Shift D, digamos que ya no entro en Snack Bar. Vamos a nuestro envoltorio. ¿Dónde está? Snack de Rapa La hay. Ahora vamos a dar todo lo demás. Así que haz click hacia fuera al cerrar, estar en la parte inferior. Ahí vamos. 64 no es suficiente. ¿Está funcionando? Bien, entonces necesitas más. Todo esto. ¿Qué hacemos? 64, 54 más 16. Refrescar clic. Hemos terminado en una página aleatoria. Flechas izquierda y derecha. Ahí volvemos a la que estaba probando. Casi ahí. Otros ocho, ya lo haremos. Vete a verificar como yo quiero que esté por encima de eso. Echa un vistazo a la documentación. ¿Dónde estamos aquí? ¿A lineamientos? Y puedes tener una idea dónde están destinadas a estar las cosas Al igual que, puedo ver que está por encima de lo que hacen, no lo hacen. Estas cosas son realmente útiles solo para que entiendas cómo usarlas. No busque esquinas redondeadas en el, en el borde de la forma. Si estamos siguiendo las pautas de Android. Y el desarrollador de aplicaciones para Android o Swift o lo que sea que estén usando, simplemente voy a usar los predeterminados de todos modos No queremos estar personalizando todas esas cosas. Bien, de todas formas, así que tienes que leerlo. ¿Qué tan lejos debería estar? Ve a revisar la documentación. Probablemente necesite otros ocho. Aquí vamos. Y vamos a comprobarlo en las otras páginas. Así que ciérrala, ábrela. En realidad antes de ir a las otras páginas, necesitamos editar esta cosa aquí porque por el momento, y vamos a pegar eso ahí dentro. Tengo esto como tu eres Vint se ha señalado una lista de deseos. Sólo vamos a actualizar los ticks y vamos a ver qué tan buena es una variable listada. Entonces tengo seleccionada la Instancia y puedes ver toda esta semana, cosas buenas. Míralo. Tengo una acción. ¿Quiero una acción? ¿Quiero el cierre? Bien, voy a ir a la acción porque quiero tener la opción de decir, deshacer. Un componente tan bien hecho. Ahora también sabemos hacer componentes dulces. Y puedes ver lo útil que es esto para esos miles de diseñadores y desarrolladores que necesitan pasar y hacer esto sin romper las cosas. ¿Bien? Hay una acción más larga. ¿Bien? Dos líneas, líneas simples son tan buenas. Por eso voy a usar su evento se ha agregado. Una última cosa es que probablemente quiera que cuando se haga clic en Shifty Bien. Quiero que se cierre cuando esté afuera, no lo necesito Background Overlay, simplemente oscurece el fondo. Probablemente voy a hacer que se mueva desde abajo. Tengo que ir a revisar la documentación, pero es una vida viva al borde. Un poco genial pop up y di, Bueno, mira. Creo que el de Android hace una animación extraña que no puedo imitar aquí y Figma, pero va a Lo último es que fui cuando se hace clic en eso, quiero que se cierre Entonces lo que voy a hacer es decir, tú Instancia, voy a agregar una interacción. Como normalmente arrastras estos rieles por todas partes. No queremos hacer algo. El problema es, es que en realidad aparece . Puedes cerrar Overlay. Ahí vas. Iba a ir a editar aquí arriba. Así que selecciónala y edita aquí arriba. Lo mismo, tap. Se va a sacar de barril. A mí me gustaría que estuviera demasiado cerca. Sobrelapa la guía y date cuenta que puedes simplemente arrastrarla para cerrar Overlay. Bonito. Bien, así que ahora voy a encantar cosa se ha ido. Aquí cierras. No creo que eso necesite de ese gentil papá. Es un poco raro. Probablemente solo una pelea dentro y fuera. Ahí vas. Eso nos está llevando a través como 1 millón de cosas diferentes que podríamos estar agregando para agregar un poco de aviso realista a todos los prototipos. ¿Se espera que hagas esto por cada prototipo? De ninguna manera, si ayuda al usuario a probar, tal vez tu objetivo aquí sea trabajar en la lista de deseos Flujo de usuarios Entonces sí, estaríamos haciendo esto. Estaríamos agregando ese poco de tostadas o el snack bar que aparece y puedes hacer el deshacer. Es posible que tengamos que agregar una notificación que aparezca aquí. No tenemos que indagar en esa cosa en particular y agregar los elementos por qué de la aplicación móvil, bien, Android o Apple para ese flujo en particular, podrías simplemente editar porque se ve genial cuando intentas presentar o vender a un cliente. Esa es otra cosa que terminas haciendo si estás lanzando un diseño y estás buscando venderlo, a veces agregando muchas de las cosas como todas estas en la parte superior aquí con la barra de estado. ¿Algo más? Un poco dulce de tostada emergente hace que parezca que hemos ido el paso extra también demuestra un poco sobre las habilidades de Figma Bien, eso es todo por este video, hicimos algunos brindis. Significa que podrías destrozar. Te veré en el siguiente video. 61. Proyecto de clase 08: interfaz de usuario de sistemas operativos: Soy yo. Pensé que me escaparía la computadora porque tenemos un proyecto de clase porque no hay mucho que discutir. Entonces pensé que lo haría en persona. ¿Te refieres a ti? ¿Qué es lo que hace? Quiero que consigas un poco de UI, como hicimos en el último video, ese Snack Bar Popup tostado. ¿Bien? Algo distinto a eso e implementarlo. Bien. Y no quiero darte nada en particular, porque quiero que entres un poco de exploración, encuentres uno, veas si has implementado Dr. autogestionado tratando de ponerlo en marcha, elige algo más, es más fácil, ese tipo de cosas Bien. Entonces quiero que escojas un mínimo de uno, ¿de acuerdo? Y podría ser, hay muchas cosas que podrías implementar desde iOS o Android si quieres hacerlo por otro framework, estoy bien para eso también. Podrían ser cosas así. Selector de fecha o Apple tiene su cosa dinámica de Irlanda que aparece en la parte superior Echa un vistazo a tu teléfono y directo con él, mira si puedes copiar uno. Ve a buscar la documentación. Entonces, si puedes encontrar el archivo Figma, mira si puedes hacerlo funcionar en Figma Y eso es lo que quiero que hagas dentro de la clase Project. Un mínimo en la lista estará en el proyecto de clase todavía tiene lo que hay que hacer. Es como una línea. Asegúrate de que sea un elemento interactivo para que puedas implementarlo y mostrarme con un pequeño video como el que se está usando. Sí, y luego sube el enlace. Compartiendo la sección de tareas y compártela en las redes sociales, asegúrate de usar el hashtag Figma Advanced muchos lugares diferentes en los que puedes compartirlo allí, etiquetarme y asegurarte de que también puedes colaborar con trabajo de otra persona para darles un poco de retroalimentación. Bien, adelante, implementa un elemento de interfaz de usuario por tu cuenta. Buena suerte 62. Ten cuidado con lo que creas en Figma: Hola a todos. Este video es una advertencia. Ten cuidado con lo que lo creas y ¿puedes acercar y alejar así? Ten cuidado con lo que creas. ¿De qué está hablando? Estoy hablando de prototipos y animación Entonces Animaciones, cosas por las que simplemente juegan, bien, realmente no haces nada con ellas. Y luego prototipos, con los que estábamos haciendo los últimos videos es como la interactividad La advertencia es que solo a veces se pueden diseñar cosas que son imposibles de construir o que al menos consumen mucho tiempo, lo que significa muy caras A veces puede estar fuera de las habilidades de tu ingeniero o desarrollador o de ti mismo si vas a estar haciéndolo. Así que solo ten cuidado de no crear algo, venderlo al cliente, y luego no B. Y luego siendo o e6 y algo que amaban o siendo algo que costaba A veces algunas de esas interacciones cuando se especializan habilidades, podrían terminar duplicando el precio del trabajo o duplicando el tiempo Así que solo sé consciente de ello. Una buena manera. Al igual que hay momentos en los que necesitas todas esas cosas. Como si estás lanzando a un cliente, veces necesitas toda la indirección, así que hazlo sentir y vender realmente el concepto Y podría ser para su pieza de cartera, vaya a donde quiera que aborde para eso. Podría ser solo para impresionar al jefe. Hay momentos en los que hay que subir de nivel. Pero hay muchas veces en que en realidad todos empezamos a hacer algo y un poco seguimos agregando cosas. Y es, he duplicado el tiempo que me llevó construir para ningún juego de red real cuando se trata de las pruebas de usuario porque eso es lo que realmente queremos hacer. No construimos algo rápido, se lo llevamos a las partes interesadas, obtenemos las manos de nuestros usuarios y obtenemos comentarios. Y Figma es prototipado rápido. No estoy seguro de por qué lo hicieron. Es prototipado rápido. Y no hay nada rápido algunas de las cosas que hemos construido aquí. Solo ten cuidado y echa un vistazo al término Lean UX, bien. Es un poco solo que a veces puedes perderte un poco y los detalles y a veces todo lo que realmente necesita algo súper rápido, súper Wireframing e incompleto para llegar a donde necesitas ir y poder iterar. Entonces, eso es todo. Y a veces no necesitas todo el nivel, a veces solo necesitas algo rápido y luego a veces puedes construir cosas que pueden ser realmente difíciles de construir para el desarrollador o ingeniero. Tal vez no se pueda construir. Otra cosa es esa animación, que cubrimos en un capítulo anterior. Haremos un poco más de animación en Figma. No lo es, no está construido para eso. Bien, puedes hacer algo de animación básica. Lo haremos porque es ajeno y nos ayuda a explorar las herramientas y a ponernos realmente buenos. Pero si voy a ver animación por algo, algo va a jugar en la página principal o en la imagen de bienvenida o de héroe. Quiero algo de animación. Lo haré en otro programa. After Effects tiene un plugin llamado body moving, que tocaremos en la animación de Lottie Y solo lo recoges y lo vuelves a Figma. Bien, en realidad no es una herramienta de animación. Hay plugins que te ayudarán con la animación, animación de línea de tiempo. Solo debes saber que puedes hacerlo otros lugares y simplemente tirarlo en otros lugares y simplemente tirarlo cuando se trata de Prototipos, que ahí está Figma como especial, especialidad Bien, así que es muy bueno en prototipos interactivos y haciendo ese tipo de rápido Sin embargo, también hay límites para ello. Y si quieres ir extra especial, como, sé fotorrealista, no estoy seguro de cuándo usar estos Pero algo que se ve y se siente como un final real, tal vez tengas que luego dar el siguiente paso, que algo así como ProtoPie es bastante común Lo tocaremos más adelante. Pero sí, vas no diseñes algo que no se pueda construir. Eso es advertir que quería salir de aquí. Bien, eso es. Te veré el siguiente video. 63. Cuáles son los atajos avanzados de Figma: Hola a todos, bienvenidos al avanzado Layer Video. No te lo saltes, aunque suene aburrido, es súper útil cuando estás usando Figma a diario Yo personalmente estoy esperando este video en este curso porque no lo sé, lo hemos estado haciendo el largo camino. Ha habido mucho de este doble clic, doble clic, doble clic para entrar en estas cosas. Hay atajos y son increíbles. Vamos a meternos en ellos. Entonces la primera es, digamos que quería cambiar el texto y hay indebida como podemos hacer clic en el marco padre, hacer doble clic en él para entrar, hacer doble clic en él para volver a entrar ahí, estoy dentro del botón y solo voy bajando esta pila de capas haciendo doble Eventualmente podrás llegar ahí. Y por fin hemos, todavía me fui a hacer click en él porque estoy en modo prototipo y ese puntito estaba en el camino. Pero con el tiempo puedo llegar y cambiar el texto por otra cosa. Pero hay manera mejores atajos. Entonces, si solo seleccionas el padre al que quieres entrar un poco y luego solo presionas Enter Entrar solo termina buceando dentro de cosas. Super bueno para volver de ese tipo de pila de capas como es tu barra diagonal inversa Bien, entonces, ¿cuál es tu teclado? Es el que se está inclinando hacia atrás. Y puedes ir un poco arriba y abajo de esta Lissa en, en, en ¿puedes verla bajando por aquí en las capas y luego la barra diagonal, la barra diagonal reversa, la barra diagonal reversa sale a su padre Si quiero llegar a este texto aquí, o al menos seleccionar todo lo que hay dentro de él. Sólo puedo darle click una vez que presioné Enter, y estoy dentro de I Snack Bar. Ahora mi eliminarlo o cambiarlo. Esta es una buena manera de bucear dentro y fuera de las cosas. Hagamos una más. Hagamos nuestro botón por aquí, cambiemos a con él seleccionado como el inter. Y mira, en realidad puedo cambiar el texto sin tener que hacer clic en él y resaltarlo en absoluto. Acabo de empujar en un par de veces. Vas a salir de ella. El backslash te da una espalda fuera de ella. Si te has metido demasiadas veces, no uso tanto. Dije escape. Escapar significa que es salir de aquí. Escapar de nuevo, como que vuelve a no seleccionar nada. Entonces generalmente solo haz clic en lo que quieras. Pulsa Enter, Enter un par de veces hasta que el texto seleccionado, y luego podemos volver a, no puedo moverme pero hubo un acorde, luego mesh escape un par de veces. El siguiente que quería mostrarte es que en realidad puedes simplemente saltar hasta el final. Entonces, en lugar de ir a ti y usar el porque este es bastante complicado, bien, genial para que el botón te golpee solo baja por las capas De hecho, puedes simplemente saltar a él manteniendo presionada la tecla Comando en una Mac, tecla de control en una PC, no tengo nada seleccionado mucho. Eso es simplemente hacer clic en él. Estamos dentro. Se zombró a través de una tarjeta bastante complicada. Puedes ver que es bastante profundo, profundo, profundo. Bien. Estoy dentro de eso y puedo trabajar en esto y romperlo. Simplemente Comando haga clic en las cosas para ir directo a ellas. Antecedentes, haga clic en eso. Mantenga pulsada Comando, haga clic en esto. No tienes que ver con el doble clic que hemos hecho en el curso hasta ahora Happy Days, o el siguiente es elegir hermanos. Entonces voy a hacer clic en el turno a, para acercar y voy a presionar Enter para entrar y está seleccionado todo aquí. A lo mejor no es lo que quiero. Lo que pasa es que si tuviera tabulador en mi teclado, bien. ¿Puedes verlo pestañas a lo largo de lo que se llama los hermanos? Bien. Entonces el padre es el envoltorio en el exterior, las cosas dentro de él son los hijos de ella. Pero estos niños tienen hermanos porque los hermanos son como un nivel de profundidad. Estos que es el padre de esto y no tiene hermanos. No. Porque no hay nada más en el mismo nivel. Pero a este nivel, ese es el padre de familia. Estos chicos de aquí tienen una gran familia vieja y solo puedes tener alrededor de PC. Puedo tabular al siguiente, al siguiente que pueda ser útil. No uso muy seguido. estar lidiando con muchas más listas. Mi problema es que se desmorona un poco como vamos dentro de esto y es ficha o esa salió perfectamente. Entonces esa es una buena manera de usarlo y simplemente tabulando las diferentes variantes para seleccionarlas. ¿Y dónde está esto? ¿Encontraste otro que pudiera estar roto? Turno uno, huracán. Este es turno a me parece que es porque ya he practicado Si estoy aquí, estoy de barril hasta el siguiente. ¿Qué pasa? Yo no subo y vuelvo a tabular, y estoy en el fondo y voy por todas partes. Básicamente lo que hace es que no mira tu orden visual en tu alza. Mira el orden de las capas por aquí. Entonces puedes ver, vamos a moverlo para que podamos acercarnos hasta el momento. Entonces esta es que la parte inferior, pesar de que es toda la parte de arriba por aquí. Y ahí está la Tarjeta de Evento debajo, esa está ahí. Así que un poco se pone un poco a veces complicado cuando ese orden de capas no es el correcto, puedo reorganizarlos y eso luego funcionará Y probablemente quiera hacer eso para cuando esté un poco listo para que tal vez mi biblioteca comparta más con otras personas Si quieres, puedes ir súper nerd e ir a Shift Tab. Va por el camino equivocado. ¿Ya lo ves? Entonces tab va hacia atrás. Mantenga presionada la pestaña Mayús para ir por el otro lado. ¿Eso es útil entonces? A algunas personas les encantan los atajos de teclado. Tengo atajos de teclado. Algunas personas solo querrían hacer click sobre ellos. Eso también está bien. Nuevamente, si estás dentro de estas cosas la pestaña te saca del asiento eyector Lo último de los hermanos y se empareja un poco con el primer punto así como es que solo quiero eliminar todo de esto A veces estás como, no quiero borrar todo el fotograma. Bien. Quiero seleccionar todo en él y terminas haciendo estas selecciones de malezas. Lo que puedes hacer, hacer clic en el marco padre, presionar Enter, y solo selecciona a todos los hermanos dentro de él y presiona eliminar y puedes simplemente limpiar las cosas con bastante facilidad de esa manera, escapar para salir. El siguiente aquí es que ya hemos hecho esto antes, pero quiero incluirlo en este video como un bonito resumen de Nosotros sí queremos cambiar el orden de estos. Puedes usar tus corchetes, ¿de acuerdo? Bien, junto a la tecla P de tu teclado, bien, para mover las cosas hacia arriba y hacia abajo. Entonces hay dos formas de hacerlo. Simplemente manteniendo presionado nada y usando los corchetes ya sea abierto o cerrado. Puedes ver mi panel de capas, son solo va todo el camino hasta la parte superior, todo el camino hasta la parte inferior. Si quieres simplemente moverlo hacia arriba uno o dos K entre sus hermanos pueden sostener Comando y hacerlo Puedes, ves que sube uno a la vez. Entonces ahora puedo decir que estás en la pestaña superior a la siguiente. Escojamos éste o el fondo de aquí. Entonces necesito moverlo hacia arriba uno. Entonces voy a sostener Comando o Control en PC. Y solo, si, quieres estar ahí, ¿verdad? Perfecto. No, vas a ser uno abajo. Así que ahora shift tab. Tengo este en la parte superior. Este siguiente ahí. ¿Te das la idea de lo que estoy haciendo ahí? Yo sólo los estoy moviendo para que el mismo orden visual que están en los paneles ahí. Pero sé que algunos teclados por ahí no tienen esos corchetes Bien, Entonces lo que puedes hacer es mandar o controlar la barra diagonal hacia adelante y simplemente escribir los atajos de palabras clave Y luego echa un vistazo a un rango y para ver qué está configurado para tu teclado. Se esfuerzan mucho por alinear los teclados de todos Ojalá haya algo ahí dentro para ti ahí. ¿Por qué algunos de esos azules? Algunos de ellos son azules porque los he usado antes. Algunos de ellos no uso, o al menos no he usado en este curso hasta ahora porque restablezco mi versión cuando inicio estos cursos, vas otro buen acceso directo de Capas es hacer clic derecho Entonces digamos que este es el trabajo de otra persona. Es bastante complicado. Hay muchos niveles y marcos y autolayouts. Quiero recibir el texto de acción, ¿de acuerdo? O al menos para ver lo que hay debajo de aquí, puedo hacer clic derecho y puedo decir capa resbaladiza Y puedes ver que me está mostrando tanto el padre, en este caso, el padre abuelo, lo que hice clic derecho Y luego en su acción de Snack Bar, luego hay un diseño automático, y luego están los textos que quiero. Puedes sobrecargar eso simplemente manteniendo presionada la tecla Comando en una Mac, la tecla de control en una PC y simplemente haciendo clic con el botón derecho Y luego va directo a esta misma cosa solo un poco va directamente a esta lista de capas Y se puede decir en realidad quiero que este bit lo copie y luego lo pegue para hacer otras cosas con. Esa es la Dominación de las capas en Figma. Voy a añadir los atajos a la hoja de accesos directos. Recuerda que está en los archivos de ejercicios e intentaré incluirlos en el resto de este curso. O puedes ignorarlos y ser el chico o chica que simplemente sigue haciendo clic en la afinidad. Eventualmente harás clic en las cosas. Eso también está totalmente bien. Bien, es decir, es, voy a ver en el siguiente video 64. Cómo encontrar atajos de capa Zen en Figma: Hola a todos por aquí y mi panel de capas se ven, es desordenado Mi diseñador TOC es un poco como luz roja parpadeante. En este video, te voy a mostrar cómo encontrar la capa Zen usando unos pequeños atajos, ¿verdad? Vamos a saltar. Ahora, Sra. Day. Bien, el primero y mejor no ha tenido nada seleccionado, que es la clave de escape Aplasta eso un par de veces y luego simplemente mantén pulsada la tecla Option o Alt macro PC y presiona L. Mira eso. Todo simplemente se derrumba. Bueno, el documento de alguien más de que todo está en todas partes. De repente estás trabajando en extrañar a Missy, no tienes nada seleccionado y golpeas Option o Alt L. Bien, otra práctica es digamos que la sección aquí cuando entro en ella y un poco quiero entrar en esta y un poco quieres alternarlos a todos al igual que Exponerte No exponemos esto, te descolapsaste tú mismo. Quiero ver qué está pasando aquí. Lo que podemos hacer es que son inodoros todo arriba, es que podemos seleccionar primero la capa. Tienes que seleccionar el primero y luego mantener presionado el Comando en un Mac Control en una PC y simplemente hacer clic en el chevron, habrá una pequeña cosa de flecha Y luego simplemente haga clic, desempaqueta todo, se expone al mundo Bien, así que eso se pone incluso útil. De hecho lo estamos haciendo en esta página. Es demasiado complejo, así que veamos otra cosa. Digamos esta página de Animaciones. No hay mucho que hacer aquí. Bien, para exponerlos a todos, no tengo nada seleccionado. Sólo puedo hacer clic en uno, pero en realidad no puedo tener nada seleccionado. Escape de miembro o haciendo clic en el fondo, haga un Comando a o Controlar a para seleccionar todo. Y luego haz exactamente el mismo truco. Así que voy a sostener Command en mi Mac, controlar en tu PC y abre todo. Ambas, sólo hay dos cosas en esta, pero se puede ver en ésta, sobre todo trabajar con el trabajo comunitario, con alguien más lo ha hecho. Y solo quieres que te guste un poco despicar. Eres como lo que hay aquí. Simplemente seleccione una capa o haga una selección de todo y seleccione todo. Y luego solo Comando haga clic en él y tipo de herramientas para arriba. Y también lo colapsa también. Entonces, una vez en la opción L, tal vez solo estés haciendo eso. Bien, depende de ti. Aquí. Seleccione todo, mantenga pulsado, comando o control. Todo se abre. Bonito. Vuelva a darle clic, manteniendo esa misma llave, todo se cierra. Otras cosas, solo pon tus capas en orden. Si tienes una pequeña pantalla aquí arriba, si no estás usando páginas, realidad puedes simplemente hacer clic en esta flecha aquí y las páginas desaparecen. Si solo estás trabajando en una página, no necesitas páginas. A lo mejor tienes muchas páginas. Él es uno de ellos para que te vayas mientras trabajas, puedes usar page up y page down para llegar a ellos. También podemos hacer es que puedas arrastrar esta broca de fondo. Si tienes muchas páginas y se te ha sacado mucho espacio. Sólo hazlo más pequeño. Todavía puedes desplazarte dentro de aquí. Bien, es una buena manera de ordenarlo. Y lo último que hemos hecho antes es que en realidad puedes cambiar el tamaño de esto A veces estás trabajando con cosas para echar un vistazo, selecciona todo Comando, haz clic en él. Bien, no tengo ningún nombre realmente largo. Este de aquí tal vez vaya Page Up, Select All y haga clic en éste. Bien, en realidad se está bajando bastante en esta lista. En realidad no está tan lejos, pero puedes arrastrar esto dentro y fuera en el mismo espacio o poder ver todos los nombres de las tierras dependiendo de lo profundo que vaya. El último bit de capa Zen en realidad va a estar en las preferencias. Lo que pasa por defecto es si utilizo mi herramienta rectangular o herramienta, lo mismo para marcos, cualquier cosa. Lo que va a hacer Figma cuando lo arrastre hacia fuera puede ver el rectángulo 24 Si Opción o Alt la arrástralo para obtener un duplicado. Me dan 25. Si golpeo Comando D o Control D, obtengo otro 126. Entonces los nombra porque ve ese último sufijo, prefijo, sufijo, el número del ahí dentro y va, voy a añadir uno más, lo cual puede ser útil A veces aunque no es Handy. Él es uno de todos ellos para llamarse 24, cualquiera que sea el nombre de pila, puedes en tus preferencias. Bien, Entonces Figma preferencias, y hay uno aquí que dice Renombrar capas duplicadas Ahora ya puedes ver mis 20. Aunque lo duplique, obtengo otros 27. 27, 27 hasta usted, que me gusta. Normalmente solo lo dejo como el estándar de fábrica y luego me molesto cuando recuerda cuando no quiero que lo haga Entonces voy a darle la vuelta al mío. Cuales son sus preferencias donde no es negro ni blanco o, ya sabes, se necesita medio encendido, medio apagado. Ahí vas. Ahora ya sabes que puedes hacerlo. Bien, eso es. De todo el video. Si no recuerdas nada más, no tengas nada seleccionado, que es la tecla de escape y pulsa Opción o Alt L, y simplemente arregla todas estas cosas No hicieron nada. Es abrirlo, todo está abierto y no tengo nada seleccionado e ir Opción L Alt L en una PC, Es mi favorita. Bien, todas las capas están hechas. Te veré en el siguiente video. 65. Cómo ocultar y bloquear desbloqueando todas las capas en Figma: Hola a todos. En este video vamos a ver esconder cosas en Figma. Como, no sé cómo hacer eso. Oh, pero hay algunos trucos elegantes. No muchos, sino una pareja. Déjeme mostrárselos. Muy bien, comience con la manera cavernícola es que puede hacer clic en el globo ocular dentro y fuera de las capas ocultas. El atajo es Command Shift H en una Mac, es Control Shift H en una PC, habrá en tu hoja de acceso directo. En eso antes, puedes ponerte más elegante y digamos que sí necesitas simplemente esconder las cosas en estos tres marcos aquí Y voy a usar mis acciones rápidas porque no hay atajo para y está oculto. Profundizar los menús comando forward slash o control forward slash para llegar a mis acciones rápidas y luego escribir en hide en un segundo aquí abajo dice ocultar Mira esto. Limpio y ordenado, los necesito todos de vuelta. Simplemente presione Comando a o Controlar a para seleccionar todas las capas y luego simplemente use nuestro atajo nuevamente, que es, ¿ recuerdas familiar Es como hace 30 s. ¿Recuerdas que lo haces es Comando Shift H o Control Shift H. Así que puedes encenderlo y desactivarlo Y si estás pensando, ¿ Puedo seleccionar todo y Mayús y hacer clic en estos para deshacerme de ellos, luego usar mi atajo de ocultar? Lo consigues en el mismo lugar. Muy bien, eso es esconderse. Se va a volver 66. Cómo usar capas bloqueadas en Figma: Pensando, espero que este no sea un video sobre bloquear y desbloquear capas No se siente cursos muy avanzados. De alguna manera te voy a capas de bloqueo avanzadas , es un video corto. Cosas buenas para saber. Bien, primero mirando el diseño, manera del cavernícola, es un pequeño Lock por aquí Hay un atajo, Comando, Opción L, Opción de Control L. Estará en tu lista de accesos directos. Probablemente ya agregue sobrecarga de atajo, pero eso es lo mismo que ocultar. Mantienes las mismas dos llaves abajo. Uno es H, uno es L. Así que esconderse y cerrar, un poco atados entre sí Pero nuevamente, cursos no muy avanzados. Podemos hacer eso donde se pone mejor es a veces hay elemento Bloqueado. Entonces este de aquí está cerrado. Bien, lo que puedo hacer es recordar ese truco de antes. Quién recuerda cómo comencé esa lista de lo que hay debajo de mi cursor porque puedo hacer clic en ella. Pero si mantengo presionada mi tecla de comando en una Mac, la tienes, controlo canopy C. Y si hago clic derecho, me da ese lindo orden de capa dulce, me permite seleccionar incluso cosas que están bloqueadas. Y entonces puedo usar ese atajo para desbloquearlo así de útil. Puede ser de todos modos. Otras cosas que podemos hacer es que a veces solo quieres desbloquear todo el documento de otra persona. Por qué algunas cosas Locked, no estás seguro de que haya una opción. Bien. El atajo es ininteligible Entonces lo que haremos es hacer nuestras acciones rápidas. Entonces mando o control, barra diagonal hacia adelante. Y vamos a desbloquearlo. Hay un desbloqueo de todos los objetos. Ahí está el atajo, el Comando de Cambio Opción L en nuestro cuello y habrá Control de Cambio Alt L en una PC. No te acuerdes de esa. No lo usarás lo suficiente, pero las acciones rápidas nos dan acceso a él o simplemente sumergirte las acciones rápidas nos dan acceso a en cada cosa en toda esta página, en todas las páginas, solo esta página en la que la desbloqueará o cuáles son las cosas con las que podrías toparte es echemos un vistazo. Voy a ver algo complicado, esta cosa de aquí. Voy a bloquearlo usando mi atajo Comando Mayús L, Control Mayús L en una PC. Y terminas aquí. Estás como aquí abajo como estos puntitos, estos puntos de lo sabemos ahora, creo que como él me vio cerrarlo. Pero si estos puntos están a la mano, como no estuvieras bloqueado WACC ¿qué puedo moverte? Estás como, ¿Por qué aún no puedo moverte mi tarjeta? Bien. Ya veo que puedes desbloquearte. Es porque el padre está encerrado. Bien. Ahí vas. Bien. Eso es todo lo que tengo por capas bloqueadas, estás despedido. Te veré en el siguiente video. 67. Cómo encontrar búsqueda de capas de reemplazo y selección múltiple en Figma: Hola a todos. En este video vamos a hacer Buscar y Reemplazar, lo cual es interesante, fácil. Lo vamos a empujar un poco más cuando estemos tratando con archivos Figma realmente complejos. Así que vamos a saltar. Bien, así están todos mis paneles de capas aquí. No mucha gente sabe que puedes hacer una búsqueda en el panel Capas. Y digamos que quiero encontrar Bienvenido. Tengo en algunas páginas, tengo los dos cuadros de texto con las palabras darle la bienvenida. Y tengo unos marcos llamados pantalla de bienvenida. Bien, una buena manera de usarlo es que puedo mantener presionada la tecla de comando en mi Mac, tecla de control en una PC y solo seleccionar las tres. Van, hay un poco de color amarillo de hierba y me asustó cuando vi por primera vez, oye, no te hice Simplemente significa que lo está resaltando y solo puedo hacer algunos cambios realmente simples en cuanto al tamaño. Podrías simplemente usarlo para este simple hecho aquí, seleccionar muchas cosas a la vez sin tener que cambiar click todo, puedes llevarlo al siguiente nivel, que es ver esta pequeña configuración aquí. Se puede decir Buscar y reemplazar. Entonces voy a decir Encuentra, bienvenido, y cámbialo con start. Reemplazar Todo. Bien. Es una buena manera de pasar. Podrían ser algunos botones a los que has nombrado y el diseño inicial tenía inicio de sesión. Pero ahora para mantener todo consistente, va a ser iniciar sesión o cosas así donde solo quieres encontrar todo en el documento a un Buscar y Cambiar, deshacer eso Puedes llevarlo un poco más lejos y decir en realidad solo encuentra las porque usaría minúsculas, puedes decir que coinciden con las mayúsculas puedes decir que coinciden con las Eso podría ser útil. Vamos a apagarlo. Una cosa que hemos reemplazado, lo que realmente quería hacer es desmarcar Reemplazar Siento que podría apagarlo. Bien. No sé si lo vas a encontrar de esa manera. Simplemente haces clic en Buscar y vas porque cuando reemplaza on no es mucho aquí abajo. Pero cuando vuelvo a Find y vuelvo a mi configuración, mira esas cosas extra. Se trata de las cosas extra. Voy a desactivar esta opción de filtro aquí con caseta de coincidencia. Y subamos a la cima aquí. Hacer una búsqueda de madrugadores. Sólo voy a escribir una manera temprana demasiadas cosas. Bien, se han usado cargas, hay montones de componentes, marcos, instancias de esos marcos, esas instancias tienen Variables. Se pone desordenado. Es lo que puedes hacer es entrar aquí y decir, en realidad muéstrame todo lo que tal vez sea un componente principal. Bien, ahí lo tienes. Ahí está mi único componente principal y las diferentes variables. Se puede ver que hasta se mueve hacia ellos. Todo lo que podrías decir en realidad muéstrame mis instancias de esto, muchas instancias. Pero es una buena manera de filtrar todas las imágenes que tienen un nombre específico. Uno, encuentra el texto, entiendes la idea. Un último pequeño truco es recordar que podemos renombrar todo, digamos que seleccionaste todo esto. De hecho, puedes simplemente resbalarlos a todos. Bien, tengo cada cosa que podría eliminarlos ahora mismo. Pulsa Eliminar. No quiero hacer eso. Oh, guau. Eso rompió la Figma. Bien. Espera, el porro de cebolla, arréglalo. Todos. Mis pestañas puntean trabajando. Estoy por favor Está bien. Te imaginas otra vez, estoy de vuelta y se estrelló y ¿fueron todas las instancias madrugadoras? Ellos lo hicieron. ¿Y cómo vuelvo? Este es un buen proceso de aprendizaje para nosotros. Voy a fingir que fue hecho para ser parte del curso. Voy a entrar en nada seleccionado. Ve aquí arriba. ¿Podrías mostrar el historial de versiones? Y aquí voy a volver. No lo guardé a propósito, pero hay algunos guardado automático de antes. Entonces voy a darle click. Míralo aquí. Oye, están todos de vuelta. Entonces tú, amigo mío, vas a restaurar a esta versión. Y si alguna vez haces esto como yo, intentas trabajar con él y no puedes hacer nada, no puedo seleccionar nada que tengas que golpear Hecho arriba. Es un lugar raro para ello. Bien, estamos donde estábamos haciendo búsquedas, estábamos haciendo madrugadores Queremos sólo las instancias de la misma. Voy a seleccionarlo todo. Voy a seleccionar el primero, mantener presionada la tecla Mayús, agarrarlos a todos. Ahora voy a darle al Comando R para cambiarles el nombre. En realidad, esto es un cambio de nombre masivo. Hagamos esto en un video separado solo para que sea agradable y cuadrátelo para ti en el contenido del curso Bulk Rename es súper útil, ¿verdad Eso es para Buscar, Reemplazar, seleccionar varias cosas en tu panel Capas, tal vez hacer ajustes, tal vez cambiar el texto. No soy muy espectacular, pero muy importante forma de acelerar tu flujo de trabajo diario de Figma. Bien, en el siguiente video 68. Cómo cambiar el nombre de capas en masa con trucos avanzados de Figma: Hola a todos. En este video vamos a ver esta increíble opción de cambio de nombre masivo en Figma. Haremos algunas cosas fáciles. Haremos algunas cosas geniales donde ordenamos muchos de nuestros componentes e instancias. Y luego nos pondremos muy elegantes y te mostraré cómo no puedo escribir realmente una expresión, pero puedo mostrarte cómo copiar y pegar una para hacer algunas cosas DIVERTIDAS a Granel, Renombrar, pero no te excites demasiado. Realmente no sé qué estoy haciendo con la codificación de expresiones, pero es bueno saber eso ahí. Y te dará un buen ejemplo de cómo hacer que funcione y dónde encontrar más información. Bien, comienza el fondo de cambio de nombre a granel. Bien, comencemos cambiando el nombre estos íconos súper geniales del Pleistoceno. Sé que preguntarás. Y el ícono del Foro ocho, K 3D más Selena. Bien, súper genial. Empecemos con un poco de cambio de nombre fácil Entonces voy a seleccionar estos tres y voy a abrir el cambio de nombre masivo Ahora el cambio de nombre masivo es el mismo atajo Command R o control R en una PC Pero como tenemos varias cosas seleccionadas, se abre este tipo de ventana de cambio de nombre masivo ¿Tenemos que igualar algo? No en este caso. Sólo voy a renombrar va a haber icono y voy a usar un guion bajo Y voy a decir, quiero un poco de numeración a la baja. Bien, podría borrar eso y podría hacer, Es como números ascendentes o descendentes. Eso me parece, 123. Se puede ver esto, esto es interesante ish, esto es código para, poner un número en descendente No sé cómo funciona. Hace frío. Es una expresión regular y puedo buscar en Google mi camino a través de hacer que las cosas sucedan. Entonces vamos a hacer un poco en este video, pero solo mantén un ojo en estos. Estas son formas en que la computadora puede encontrar cosas en nuestro texto, buscadas a través de él, organizarlo ahí llamadas expresiones regulares. En fin, digamos como podemos modificarlos como al estilo cavernícola Al igual que se pone en 01, puedo poner otra N para poner en tres por montones de ints. Se puede averiguar un poco lo que está haciendo. Ahí. Tengo, quiero 3001, perfecto, renombrado, cambio de nombre masivo se pone poco Cuando, vamos a encontrar estos en mis iconos originales aquí, estos son los componentes principales, así que voy a renombrar estos a seleccionarlos todos, usar mi mismo atajo Comando o Control R y estamos Bulk Rename es realmente útil es cuando se quiere agrupar componentes usando este método. Porque por el momento, echemos un vistazo a nuestro panel de activos. Tenemos todas nuestras cosas como pasar el rato aquí. De nuevo, si tienes mil íconos, solo van a terminar pasando el rato aquí. Y yo bastante complicado de usar. Algunos documentos tendrán 100, 200 iconos. Entonces lo que podemos hacer es que podemos decir que todos ustedes volverán a cambiar el menú de capas para que puedan verlo. Usa mi comando. Y voy a decir, en realidad van a ser, vamos a renombrarles el nombre. vamos a poner en una carpeta llamada cuando una carpeta, pero un icono de color de grupo y luego usar su nombre actual. Entonces, el signo de dólar ampersand es la expresión regular para el nombre actual Entonces va a poner los íconos slash y luego su nombre regular Eso es Previas realmente práctico. Ahora bien, si hiciste el curso Esenciales, lo sabrás cuando haga esto y podrás verlo un poco por aquí en mi panel de activos Ahora, voy a tener justo con mi icono. Ahí vamos, Página uno y mis componentes principales, tengo icono, pero están todos agrupados. Se puede ver ahí en uno Bonito pedacito. Hace que sea más fácil más adelante cuando vayas Eso es usar una instancia de esto. Y por aquí, puedes ver que tengo lupa, pero en ese mismo pequeño grupo de iconos, puedo escoger el corazón o puedo escoger el uso de regular Es una manera fácil de cambiar entre estas instancias, bien, solo usando esa barra diagonal hacia adelante Bien, lo siguiente es, es que voy a usar este tipo de grupo de íconos Nuevamente, no tendrías estos, así que solo cógalos de cualquier plugin, como en ocho es bueno. Y ahí hay un montón de cosas gratis. Y lo que tengo aquí es que tengo un modo sólido y un esquema del mismo icono. Solo hay veces que se requiere el sólido porque como nosotros usando delineado estoy usando delineado aquí porque me gustó el aspecto de ellos, pero solo van a ser momentos en los que son demasiado pequeños contra un fondo mixto. De hecho vamos a tener que elegir la opción sólida, dos opciones. Entonces hagamos el cambio de nombre masivo. Habían seleccionado todo lo que usas Comando o Control. Extraño renombrarlos. Y voy a decir que es N a la carpeta de iconos. Eso lo haces agregando el slash. A algunas personas les gusta tener espacios a ambos lados de la barra. No importa. Podría decirse que se ve mejor, pero no importa. Voy a decir que los íconos no van a carpeta, usa el nombre actual. Pero también quiero ir otro nivel abajo y decir en realidad, quiero encontrar una versión sólida, una copia. Entonces estas van a ser las versiones de esquema. Vamos a patear Rename. Vamos a arrastrar una instancia que ahora me doy cuenta que no puedo hacer porque estas en realidad están por aquí. Son sólo marcos. Así que realmente no importa cuando los sintonizas en componentes antes, después de todo el nombre de levantar accidentalmente el mío después Pero vamos a crear múltiples componentes. Días felices. Ahora, arrástralo a Instancia. Y por aquí ahora, tengo una estructura un poco mejor. Así Misenus ordenanza mira todo debajo icono. Digamos que quiero encontrar la eliminación. Y puedes ver aquí tengo un esquema o una visión sólida a mano Otra cosa que podríamos hacer es echarle un vistazo al panel de activos. Se está empezando a ensuciar aquí como todo el panel de activos, un componente local, o es desordenado, no es tan Al igual que puedes ver estos aunque se están separando todos. Así que hay en la página uno y mis componentes principales que es útil el comienzo dentro del icono. Así que marque, ahora aunque estamos empezando a conseguir, en realidad, quiero hacer algo. Quiero agarrar todos estos. Voy a cortarlas de esta página. Voy a hacer una nueva página. Son mis páginas ahí tenemos app Plus, voy a tener mi página de componentes. Ahora bien, ¿cuándo deberías hacer esto? Lo hago sobre el tipo de escenario. Puedes hacerlo desde el principio. Solo asegúrate de ir a la página con todos tus componentes principales por aquí. Puede ser solo para ordenar para que trabajes o si te gustaría, solo me topo un poco con él, necesita ser arreglado Voy a pasar el siguiente poquito mientras lo hago funcionar. Bien, voy a empezar por hacer una sección o un marco y simplemente renombrarlo y llamarlo iconos Entonces tengo alguna manera de poner mis íconos. Y si pego mis íconos desde el de la página, entonces mis componentes principales simplemente verifican dos veces que obtuvieron los íconos correctos No son instancias. Y ahí vamos. Simplemente va a estar un poco ordenado. Ahora cuando estás trabajando con una instancia para decir en realidad tú, amigo mío, eres toda mi página de componentes. Como eres un ícono, ¿qué tipo de ícono? Necesito el borrado y necesito el sólido, ve tú. Sin embargo, una cosa que podría pasar es ordenar el documento de otra persona Bien, has abierto como el sistema de diseño iOS o material o algo más y solo necesitas deshacerte de la gran cantidad de estructura que no necesitan. Digamos que no vas a usar los sólidos que se han ido de tu archivo. Lo que va a pasar ahora es que tienes esta separación. ¿Puedes ver el contorno al final? Simplemente no lo necesitamos para poder ordenarlo por el momento todavía tenemos este paso extra que no necesitamos. Bien, así que vamos a ir, voy a entrar en iconos. Vamos a decir, sí, dame la eliminación y luego vamos a ir a elegir la visión de esquema. Sólo hay un paso extra. Es agarrar estos, usar Comando-A y decir, quiero encontrar, mantener un ojo en la vista previa de aquí Quiero deshacerme de todo el contorno, no solo del esquema. Compré el contorno de barras. Bien. Para limpiarlo todo, entonces puedo hacer eso. Bien, eso simplemente quitó una parte de esa convención de nomenclatura Ahora he conseguido instancia, dice que todos ustedes son mi página de componentes. Eres un ícono y acabo de enumerar, no tienes que entrar en el marcador y darle clic un paso hacia abajo o lo siguiente que quería mostrarte es algo que ver con expresiones regulares o expresiones regulares que mencioné anteriormente Y voy a levantar la mano y decir, no sé mucho sobre cómo codificarlo, pero sé que existe y puede ser útil. Pero para mí, necesito ayuda de un desarrollador para ayudar a brillar algunas de estas consultas de búsqueda. Entonces tengo este ejemplo aquí. Tenemos la palabra icono subrayado 001. Eso lo hicimos antes. Entonces voy a renombrarlos a todos. Y lo que quiero hacer es cambiar las palabras con los números. Aquí no hay opción. Dice elegir todos los nombres, bien, y luego cambiarlos por las parcelas de números. Si sabemos que podemos hacer alguna codificación en estos campos, deberíamos poder hacerlo, bien, y aquí es donde me pondré en contacto con un desarrollador y le diré: Oye, ¿me puedes ayudar? ¿Esto? Bien, voy a guiarte a través de un ejemplo y básicamente es que lo saqué del sitio web de Figma. Dejaré el enlace a este artículo. Es solo el artículo Buscar aquí. Y solo comienza con uno básico y luego tiene algún material de referencia que todavía está muy por encima de mi cabeza. Pero échale un vistazo, puedes ver algunos de los patrones de búsqueda que puedes escribir. Pero otra vez, vamos a hacer un ejemplo para que puedas arrasarlo y tu bolsillo trasero para saber que si tienes algo complicado que hacer, probablemente puedas conseguir ayuda porque podría ahorrar mucho tiempo Voy a copiar esto y el campo de partido. Y tengo entendido que es su agarra todas esas palabras o letras mayúsculas y minúsculas que también tienen un guión bajo entre ellas Y también están tiene, creo que eso es para todos los números para slash D, K. Y encuentra todo eso, todas las, todas las letras que tiene un guión entre él y luego todos los números, agarra todos esos Y luego el signo de dólar uno, que es lo primero que saqué, pero en realidad puso primero el signo del dólar dos. Entonces va a poner los números, lo que sea. Lo segundo que agarraste por aquí, primero, el primer bit, el segundo Y vamos a poner un guión bajo entre ellos para que podamos cambiarlo de ser icono 00120001 icono Buen ejemplo, Dan, es más, supongo que solo, quiero que sepas que Search, especialmente Bulk Search, puede hacer mucho más de lo que hay disponible ahí. Mencioné que el cuadro de diálogo en sí se actualizará con el tiempo para darte más opciones. Pero de todos modos, olvídate de lo mal que estoy codificando esas cosas. Y centrémonos en lo geniales que son esos pequeños íconos de procesamiento o van. Eso es el cambio de nombre masivo en Figma hace algunas cosas increíbles. Bien, eso es. Lo veré en el siguiente video. 69. Cómo reemplazar instancias y variantes con atajos en Figma: Hola a todos. Vamos a excavar y mostrarte cómo cambiar las cosas rápida y fácilmente, ya sea con instancias como esta de aquí, mira, cámbiala amablemente. Te voy a mostrar cómo hacerlo cuando está en lo profundo de un componente que es más difícil de hacer, también tenía un switch out instancias cuando están en Variables también Entonces esa pequeña cosa loca del objetivo que aparece a veces ya que te voy a mostrar cómo separar y restablecer todas las instancias también. Bien, y está saltando Lo primero es, es que hay algunos íconos que puedes poner en el documento. Entonces hay una carpeta ahora iconos de corte para traer los cuatro de estos, agregarlos al documento, hacerlos componentes. Sabemos cómo hacer eso. Lo haré al final de este video por si acaso te pierdes. Pero todo lo que necesitamos son componentes. Vamos a usar esta cosa con icono. Entonces hagamos el intercambio golpista. Ahora estoy en la página uno. Voy a hacer un marco solo para que pueda ver lo que estamos haciendo. Empecé a grabarlo en negro y realmente no se podía ver lo que hacía. Entonces necesitamos un par de cosas. Vamos a agarrar. Voy a empezar a usar esto, bien, Esta pestaña Recursos, Es Shift I, tanto Mac como PC. El turno lo abre. Si sigues escribiendo, empieza a buscar. Me gusta mucho porque turno lo abrí. Se recuerdan componentes de lo último que hice. Y ahora puedo escribir en caliente. Me parece que es muy fácil que usar el panel de activos de aquí. Así que voy a arrastrar esto y voy a arrastrar dos versiones. Dos versiones. ¿Por qué? Porque yo quería hacer uno en dejar uno intacto Y este de aquí con las Instancias siendo algo así como aplastadas. Porque te voy a mostrar la diferencia. Busquemos algo más que se use. El lápiz familiar. El lápiz por sí mismo. Realmente no hace nada y simplemente lo arrastra. Y es muy pequeña. Y entonces, ¿qué puedo hacer, si mantengo presionada la tecla Opción en una Mac, la tecla Alt en una PC, puedes ver que esta pequeña línea aparece a su alrededor? Esas pequeñas líneas es, bien, voy a cambiarte. Y lo que hizo fue, es que hice esos íconos realmente pequeños porque demuestra que si no cambio nada de esa instancia original caliente, la cosa con la que la estoy intercambiando usa su tamaño Pero si lo he destruido así, mantén esa misma tecla, Alt en una opción de PC en una Mac. ¿Ves si lo he distorsionado? Va, oh, voy a tratar de emparejarlo a mano. Sí, claro que existe la manera de entrar aquí y usar esto y encontrar tu camino a través de los componentes haciendo búsqueda, encuentro esa opción de simplemente mantener presionada la tecla Alt en una PC, opción en una Mac, y anularla es súper fácil Y a veces no funciona y te voy a mostrar el truco para sortearlo. Digamos que queremos cambiar esto aquí. Tenemos a estos tipos. Si solo uso ese mismo truco exacto y digo icono de lápiz, mantengo presionada la opción, como dijo Dan, o Alt en una PC. No aparece nada. Un poco simplemente lo tiró luego autolayout y así que simplemente como que lo tiró ahí dentro, no cambió nada Lo que puedes hacer es mantener presionada la misma opción de tecla en una Mac, alt en una PC, mantener presionado el comando también. Entonces ese es comando de opción, Mac Alt Control en una PC. Y ya ves que la línea aparece ahora. Tengo como zambullirme dentro y más profundo en algo. Y porque no había cambiado el tamaño de estos, reemplace eso por su nuevo tamaño Si quiero entrar en este y este hacer de este 31. 31. Ahora, manteniendo presionadas esas dos teclas, opción y comando en una Mac, Alt Control en una PC obtiene el nuevo tamaño. Digamos que cambias componentes donde al menos el atajo para ello, u otro atajo para cambiar las cosas es cuando estás trabajando con variantes. Así que encuentra algo en tu documento. Conjunto de componentes, estás buscando la varianza. Voy a usar este texto aquí. Voy a mantener presionado Comando y haga clic en Control, haga clic en una PC solo para bucear un poco dentro de mis variantes Y algunas cosas tendrán un objetivo a su lado. Algo gay y poco punta de herramienta es regalar lo que estamos haciendo. ¿Ves que dice, Oye, te gustaría que seleccionara todas las capas coincidentes? Bien, te pusiste increíble. Pueden pasar y decir en realidad quiero cambiar el tamaño de fuente o el color o decir que quieres cambiarlo. Digamos. Pero aquí he hecho clic en el exterior de esto Reconoce que hay más de uno. Ahí está ahí. Y puedo decir en realidad cambiarlo de su precio a, no sé qué más tenemos ahí dentro. El Nav superior, no es apropiado, pero es una gran manera cuando terminas con muchas variantes dentro de un componente todavía, y explica por qué a veces hay un objetivo y a veces no lo hay. ¿Por qué no está el retarget aquí? Estos se verán muy similares. Los dos diferentes Se busca cosas que se vean bastante similares. Llega a un punto en el que no estoy seguro de si tienes este ejemplo o no. Pero puedes ver en mi uno, Hagamos esto. F I comando haga clic en este. Dice: Oye, hay más. Te vas a dormir por mí, como yo. ¿Por qué no escogiste eso? Bien. Una de las cosas que está buscando es obviamente que es texto y es la fuente y el tamaño correctos. Está buscando esas cosas, pero también está buscando la estructura de las capas. Bien, entonces echemos un vistazo. Este de aquí no fue escogido. Comando lo hizo clic. Es porque estos de aquí, es, su amigo. Hay una instancia dentro de, directamente dentro de ella está el hijo de los textos. Mientras que esta de aquí es esta la Instancia dentro de ella es otra envoltura o marco. Y bien, así que normalmente se permite dentro de eso está el texto. Entonces no sabe cómo saltar profundamente en capas o al menos no lo hace en este momento el uso de pollito a veces aunque en lugar de reemplazar instancias y cambiar variables, solo quieres que te guste romperlo todo aparte. Así que hay una nueva característica genial donde vayamos Shift I para abrir nuestros componentes. Vamos a escribir en COD de lo que hicimos antes. Y voy a arrastrar en esto, esto es bastante complejo. Recuerda por aquí y mi panel de capas Bien, Echemos un vistazo a reabrirlo. Bien, mantén pulsada Comando en una Mac, Control en PC y debería derramarla abierta. Pero ya ves que tengo una instancia dentro de eso. Como instancia es una instancia de la parte inferior que tiene una instancia de precio y simplemente todo está atado. A veces simplemente te gusta dejarlo en paz. No quiero que todo sean Instancias. Yo solo quiero smoosh todo aparte para ser marcos y no conectado a nada más. Para hacerlo con la tarjeta seleccionada, sedimentarte un rápido acciones Entonces comando o control, slash hacia adelante. Y si escribe en la instancia de separación, de separación, desea separar todas las Instancias anidadas porque el momento de separar instancia funciona un poco, pero todas ¿Puedes ver? Mientras que si deshago eso, esperando acciones rápidas, use separar todas las instancias Notarás que estás viendo este comando click, todo se está rompiendo. Puede ser que usando el trabajo de otra persona o simplemente quieras comenzar de nuevo y un poco sacarlo todo a pedazos No hay realmente buen lugar para ir a buscarlo. Así que solo usa acciones rápidas y solo recuerda, puedes separar todas las instancias con suerte Bien, vamos a cerrar un pequeño laboratorio. Quién mueve el atajo mantenga pulsada la opción y presione L o holter Ahora, solo todas las capas colapsan de nuevo hacia abajo. Muchas gracias. El último atajo es cuando estás trabajando con Instancias y no quieres eliminarlas, quieres destrozarlas, las peleas quieren restablecerlas todas. Puede hacer clic con el botón derecho en cada uno e ir a restablecer todos los cambios. Obviamente, también puedes usar tus acciones rápidas. Lo que puedes hacer es en realidad puedes resbalar a muchos de ellos. Bien. Y los hicieron todos en un gran ir a decir que volvían a la forma en que estaban destinados a ser reasentados los cambios Te van lápices diminutos. Entonces así es como restablecer todas tus instancias, bien, y luego va a ser para como los atajos Entonces vamos a estar aprendiendo. Lo que voy a hacer ahora es que lo prometí al principio, te voy a mostrar los pedacitos que me salté para llegar a donde empezamos Si estás contento con hacer múltiples íconos y hacer la cosa de renombrar, totalmente bien Si necesitas un poco de un vistazo extra, voy a hacer eso aquí ahora. He restablecido todo antes de que empezáramos el video. Y voy a decir que está trayendo algunas imágenes son algunos íconos. Siempre casi siempre arrastro desde los iconos de una ventana del Finder para simplemente arrastrarlos. Bien, uso mi mouse Acercar, mantener el comando y usar mi rueda de desplazamiento dentro y fuera. Y voy a hacer múltiples componentes. Genial. Ahora les voy a cambiar el nombre Comando o Control R en una PC. Y los voy a poner en la misma subcategoría un poco como que tenía antes Barra diagonal de iconos. ¿Por qué? Porque los quiero agrupados con esos otros íconos. Entonces van a entrar ahí. Van a tener nombre actual. Y voy a darle a Rename. Y nuevamente, una especie de trabajo. Se ha saltado a nuestro panel de activos. Así que Alt a debajo de mis Componentes ahora tengo dos. Por qué no tengo dos de ellos es porque estos que acabo de hacer no han entrado a la sección que hice sí tienen un vistazo. Alguna razón cuando arrastré mis imágenes desde mi Finder, no entraron ahí dentro de esa sección Así que en realidad habrá un poco separados. Para echar un vistazo a mi Panel de Capas Opción uno. Estos son los tipos que son traídos. No terminaron aquí por alguna razón. Así que eso es lo que vamos a hacer para llegar ahí. Ahora, cuando miro en mi panel de activos a los componentes, solo hay un grupo de ellos. Bien, y así es como empecé con este curso arrastré en nombres de juegos, asegúrate de que el lugar correcto vamos, bien, eso es todo Te veré en el siguiente video. 70. Cómo usar Propiedades de componentes de intercambio de instancias con preferencias de Figma: Hola a todos. En este video vamos a ver algo llamado propiedades de componentes. Es un nombre realmente desalentador para algo que es espectacularmente bueno cuando nos metemos en componentes complejos y es una muy buena manera de una alternativa para Variantes Solo una visión general rápida. Este de aquí es lo que hemos estado haciendo tradicionalmente en Figma y lo que hemos estado haciendo en este curso, solo hacemos un botón y tenemos tres instancias del mismo Este de aquí hace exactamente lo mismo, pero luego le faltan todos estos bits extra. Pero eso es lo que hacen las propiedades de los componentes. En este caso, hay algunas propiedades de componentes diferentes. Vamos a ver el que se llama Instance Swap y a hacer una demostración rápida de lo que hace. Tengo dos botones, la vieja manera por la que paso y escojo la varianza mal llamada. Bueno, la nueva forma, el botón amarillo, bien, y el botón amarillo de aquí tiene una cosita encantadora diciendo icono, que puedo hacer tú quieres o bien hecho, quieres el Plus, quieres el lápiz, supongo que escogido de él. Es más fácil para la persona que usa el botón, alguien de mi equipo se encuentra con el futuro. Pero es poder real es aquí donde no tuve que crear todos estos componentes. Es sólo una. Cambié esta instancia usando una de las propiedades del componente. Y si estás como, oye, no parece que haya un montón de trabajo. Es cuando las variantes sintonizan algo como esto. No, no, no revises aquí los campos. Mira todas las diferentes variantes que necesitas en un campo usando los materiales de Google, tantas opciones que podríamos reducir a algo que se vea y funcione mucho más así. Bien, vamos a saltar y te voy a mostrar cómo armar uno Bien, para empezar, yo toda mi página de componentes, hice una sección de botones y dibujé algo que parece un botón Es solo un diseño automático en este momento con un color de fondo en algunas garrapatas en él. Ahora vamos a mostrarte el mal camino porque siento que es la única manera de apreciar y entender realmente la nueva forma elegante, la forma en que necesitaba mi cabeza de todos modos. Así que tomemos una frontera, se convierte en un componente, ¿de acuerdo? Voy a tener variantes de este componente, tres de ellas. ¿Bien? Voy a agregar algunas instancias. Es por eso que a esto se le llama Instance Swap y solo funcionará cuando hagas algo como esto. Entonces turno yo, bien, voy a encontrar lo que estamos tictac hay un hecho. Ahí está. Bien. Entonces voy a arrastrar en esto. Bien, ahí vamos. No encaja del todo, cambia el tamaño para que quepa. Entonces voy a tener una instancia de la garrapata y voy a tener una instancia de let's go icon y solo tener una instancia del lápiz ahí dentro. Y Shift voy por el ícono Plus. Necesitas estas Instancias aquí para que esto funcione. Entonces, ¿esta es la forma incorrecta de hacerlo bien? Entonces o no de la manera equivocada. Es solo la forma en que lo hemos estado haciendo desde ahora. Hemos hecho de esta cosa llamada botón una gran. Y para mí, tuve que hacer un poco tres versiones del mismo. No es un gran drama, donde se convierte en un gran drama es cuando hay que hacer algo que es más de tres instancias. Encontré este, sacude de esto. Ese es un componente principal y estos gobiernan las Instancias, Dios mío, probablemente sea el más complejo que pude encontrar. Se trata de los campos de entrada desplegable de materiales de Google. Entonces esto se siente realmente fácil, pero obviamente puedes llegar a ser mucho más complejo. Por otro lado, la persona que está usando esto va a la biblioteca de componentes que has compartido con ellos, abre esto y va, bien, Dan es el botón a. hay diferentes propiedades que no ha nombrado, bien, pero hay la variante 12.3 Entonces ese no es un gran drama, pero mira esto mejora. Entonces voy a hacer un duplicado. Voy a adjuntarlo. ¿Se puede rellenar color y usted color? Aquí vamos. Entonces esto no tiene nada que ver con esto ahora, estos son todos separados. Lo que hay que hacer ahora es que lo vamos a convertir en un componente como antes. Vamos a renombrarlo y llamarlo botón ser. Y lo que vamos a hacer es en lugar de hacer variantes, lo que vamos a decir es porque aquí hay una instancia, que es nuestra tecnología. Podemos decir, me gustaría que agregaras por aquí, bien, duns vienen del nombre de mi icono, pero quiero agregarlo Instance Swap. Es esta cosa de aquí. Sabe que es una instancia. Para que no hagas clic en el botón de afuera. Haces clic en la instancia dentro de mi componente y dices que en realidad me gustaría que hicieras un intercambio de instancias por favor. En la instancia el nombre va a ser icono. Así que la gente que va a estar usando esto, estoy pensando en el futuro a la persona que usa esto ahora diciendo que va a haber una opción dice icono, y van a poder agregar algunos preferidos. Aquí es donde esto se pone realmente bueno. Se puede decir que ha hecho, pero también quiero que puedan escoger, Multiplicar, que necesito renombrar para cerrar, agregar. Agreguemos el lápiz, pero no quiero el marcador ni el borrado. Simplemente no hay razón para tenerlo para este botón en particular ni para ningún botón. Se usa para algo completamente diferente. Hagamos clic en Crear propiedad. Y lo bueno es que esa cosa que hice se ve un poco bonita y limpia. Vamos a traer mi turno I y tecleemos de nuevo el botón, el tachar esto. Yo soy el usuario que lo usa ahora digo, Bien, Ronnie al botón, para animar este dulce botón. Aquí tienes. Bien, ¿qué opciones tengo por aquí ? Te dan estas cosas nuevas. Esto no estaba ahí antes. Pero ahora tengo este intercambio de instancias, esto está hecho. Y pueden escoger de estos sólo los tres. Si alguna vez has trabajado con un documento con como digamos 100 iconos en él, esta enorme lista del labio aquí, mientras que aquí solo puedo elegir los preferidos significa que el creativo puede decir en realidad, solo puedo usar estos tres. Pueden ir y cambiarlos. Así que realmente quería transmitir lo increíble que es esto. Supongo que vamos a tener que hacer otro par de videos cuando hagamos algo más complejo, creo que es la única manera, pero vamos a recapitular rápidamente Entonces para mí como creador, el mío se ve todo ordenado y podrías estar consiguiendo cosas ahora, te gustaría dónde está la varianza, cómo ocultarían estas obras de otras personas? Así que tengo mis componentes principales seleccionados por aquí. Tengo esta Propiedad Componente que tiene esto como este pequeño diamante aquí. Eso es un intercambio de instancias. Puede tener más de una Propiedad Componente. Los cubriremos todos en un minuto. Pero se puede decir aquí en realidad la persona necesita que no necesitaba otra cosa. Necesitan entrar en default tiene que ser un el plus y también para los preferidos. Y la gente está usando la eliminación y estás como, No puedes usar Eliminar, Dejar de usar eliminar. Lo que realmente necesitan es que necesiten poder agregar un marcador para este botón como opción. Para mí. No tuve que ir a hacer otras variantes que de alrededor de autolayout, el mouse, es agradable y ordenado y para el usuario cuando está usando este botón de aquí, este es el que Todo lo que tienen que hacer es entrar aquí y decir: Oye, ¿qué se me permite usar? ¿Todas las opciones preferidas? Y si son como, Oye, realmente necesito ese bote de basura uno, no me importa lo que sea el baile. Se prefiere el valor predeterminado, pero en realidad pueden llegar a todos los componentes dentro de un tono de biblioteca para usted o Componentes locales. Ahora puedo ir a buscar mis íconos y cavar y agarrar cada uno que quiera. Puedo anularlo, pero solo hace las cosas ordenadas sobre como lo que puedes y no puedes usar para mí como credo Y el usuario solo obtiene un pequeño y agradable desplegable para elegir entre cosas. Bien, eso es propiedades de componentes para una Instancia, Swap, super cool Bien, veamos el siguiente en el siguiente video. 71. Cómo usar la propiedad del texto componente en Figma: Hola a todos. En este video vamos a ver la Propiedad Componente llamada texto. Permite que la gente entre aquí al Inspector de Propiedades y realmente vaya, voy a cambiar esto para registrarse sin tener que cavar en el botón. ¿Eso es útil? No lo creo, pero hace el curso avanzado, y apuesto, hay algo importante esa Propiedad Componente de lo que realmente no entiendo es eso o Figma tiene planes más grandes para el futuro. Así que vamos a aprenderlo, saber que está ahí, y luego pasaremos a las otras propiedades de los componentes. Buena manera de pasar al inicio de un video. Dan, que quiere este video ahora, hazlo conmigo de todos modos. Bien, para empezar, tengo un botón. Es un componente al tratar con el componente principal de esto y tiene que ser texto y el interior, lo que hay que tener en cuenta está bajo las Propiedades, mis propiedades de componente. Esto es lo que hicimos en el último video. Voy a Intercambiar de instancia que llamamos icono. Aquí dentro. Agreguemos otra propiedad seleccionando el texto. Si vas hacia su contenido, tendrás que hacer un poco de desplazamiento aquí, encontrar contenido, y aquí puedes agregar Propiedad Componente, bien, el texto Propiedad Componente Y básicamente todos los valores por defecto son buenos aquí, ticks es el nombre de la Propiedad Componente y el valor como el tipo de ser cambiado, pones algo más Voy a dejarlo como botón, crear propiedad. Y lo que termina pasando es que esto se convierte en una pequeña pastilla, pero lo que termina pasando para la persona que lo usa turno soy Button. Me deshice de mis otros botones. Bien. Acabo de volver a la L1. Cuando arrastran esto, tienen debajo de nuestro Button be Component, tienen son Propiedades de Componente, bien, y ya hemos hecho esto antes. Podemos cambiarlo a plus, pero ellos pueden cambiar el texto aquí dentro. Ahora. Canta. Hola, regístrate. Ahí vas. Ahora bien, ¿por qué es útil? Decir el principio. No estoy seguro exactamente para qué sirve. Imagino que podremos inyectar cosas en esto en una etapa fuera de Figma o usando algunas, realmente no lo sé Pero puedes hacerlo. Puedo ver como es útil para la persona que no tuvo que entrar y hacer doble clic sobre esto y cambiarlo Bien, solo pueden hacerlo todo en el padre de aquí. Entonces tengo que cavar o mantener pulsada Comando o Control click para entrar. ¿Eso es un ahorro? Sí, tal vez no lo sea, pero te apuesto a que hay algo que me falta a que este pequeño campo de ticks va a ser un ancho increíble, quizás ya sepas que me lo ha hecho saber en los comentarios, pero es otra de las propiedades de los componentes, una bonita, fácil que parece que no puedo resultarle útil. El ego en el siguiente video. 72. Cómo usar la propiedad de componentes booleanos en Figma: Hola a todos. En este video, vamos a ver el código de Propiedad Componente booleano Es una vieja y loca palabra. ¿Qué hace? Lo hemos aprendido antes cuando hicimos variables con cosas encendidas y apagadas. Ese es el tipo de manera booleana, verdadera, falsa, sí-no Hemos hecho esto donde podemos hacer este pequeño interruptor de palanca de encendido y apagado. Pero lo vamos a hacer en estos videos ponernos más elegantes. Vamos a crear un componente principal, y en lugar de tener un par de opciones diferentes, vamos a construirlo usando la Propiedad Componente podría booleano y terminar en el mismo lugar para que pueda encender y apagar las cosas Pero ahorra tanto tiempo en estas variables aquí, y sobre todo cuando nos metemos en variables de múltiples dimensiones. Pero por el momento, hagamos uno agradable y fácil para entender esta rara palabra booleana y hacerla realidad en las propiedades de los componentes Bien, para empezar, tengo dos componentes principales separados, botones ver y Button D. Hagámoslo de la manera incorrecta, no de la manera equivocada, solo de manera menos avanzada, la manera del Curso Essentials, nada malo en ello Pero cuando te metes en sistemas de diseño más complejos, terminas aquí abajo. Y no queremos terminar aquí abajo. Lo que vamos a hacer es que vamos a hacer una variante. Recuerda que este es el camino equivocado. Voy a ir al interior como mi icono, voy a golpear Ocultar, que es Comando Shift H o Control Shift H en una PC Bien, y lo que quiero hacer es que quiero ponerles un nombre a estos. Voy a agarrar el componente, set, la propiedad, quiero darle un poco de nombre de propiedad para decir, ¿tiene un icono? Y entremos en esto y digamos que sí. Y si uso sí y no, bien, eso es un booleano. Significa encendido-apagado, verdadero, falso, sí, no. Y lo genial de eso es que puedo decir este botón de aquí tiene este pequeño interruptor de palanca. Impresionante. Entonces hagámoslo más elegante Entonces lo que hacemos es que no tenemos que hacer una variante porque Boolean es una de las opciones No lo hacemos aquí propiedades lo que hacemos es ir a buscar lo que queremos encender y apagar, bien me importa mi icono. Y lo que quieres hacer es un poco complicado. Me tomó un poco de tiempo hacer ejercicio con así como bajo capa. Bien, Así que no en la parte superior aquí bajo propiedades, queremos ir en esta capa. Quiero esta opción aquí, bien, crear propiedad booleana Y sabe un poco verdadero-falso, un poco hecho ya. No necesito hacer otra cosa. Vete tú. Ahí está mi componente principal, Ordenando que éste Bien, pero cuando voy a usarlo, turno, arrastre el botón aquí y puedo subir aquí, mira, un pequeño interruptor de palanca, hace lo mismo. Más agradable. Entonces Booleano puede ser cualquier cosa que sea un sí-no encendido-apagado, verdadero-falso Bien, ¿dónde está el intercambio de instancias? Recuerda desde el principio tuvimos que usar una instancia aquí puedes ver mis componentes aquí fue una instancia de mi icono, mientras que podemos hacerlo con el texto real también. Entonces este texto aquí podemos decir realmente aquí abajo, quiero encontrar la capa, mientras que mi capa ahí está ahí. Bien, ahí está esa opción booleana. Vamos a crear una nueva propiedad que diga solo Texto verdadero, falso. Ahora esta instancia de aquí tiene dos de ellas. Podemos tener solo el icono o podemos tener solo el texto, podemos tener nada y se enloquece. Ambos, perdón si no te apagaste los dos, no sabe qué hacer, pero luego te vas booleano Impresionante. Bien, empecemos a combinarlos todos en el siguiente video 73. 73 Campo de entrada: Todos, en este video, vamos a ver nuestras propiedades de componentes un poco más de detalle. Encadena a algunos de ellos juntos. Vamos a hacer nuestra etiqueta de texto. Lo vamos a hacer con un campo de entrada donde esto fácilmente puede convertirse en un montón de diferentes variantes para hacer posibles todas las diferentes opciones. Pero vamos a utilizar nuestros dulces nuevos trucos para poder hacer esto donde este es el componente principal que tiene todas estas diferentes opciones. Echemos un vistazo, veamos el poco campo requerido y encenderlo y apagarlo. No cambiamos la etiqueta. ¿Necesitas el texto auxiliar en la parte inferior? Sí, no, cambia las palabras que contiene. Pero, ¿y si necesitamos la línea roja a su alrededor? Podemos irnos, solo usemos la flecha. Una mirada a eso es súper ordenado y un muy buen ejemplo de por qué las propiedades de los componentes son increíbles. Bien, vamos a saltar. Bien, primero, voy a dibujar esa caja de entrada. Lo voy a hacer en modo velocidad. Haces uno similar. Bien, así que ahí tienes. La única cosa cuando construí esto fue que mantuve a estos dos separados. Bien. El asterisco, es como taquigrafía para campo obligatorio u Lo mantuve separado para poder encenderlo y apagarlo. Con esto, no hice de esto un diseño automático. Pongo el texto encima del marco, no dentro de él, porque quiero más adelante, como mostré al principio, hacer que el esquema cambie. El color, el cambio de color no es una de las propiedades de los componentes en este momento, pero podemos hacer intercambio instantáneo. Para que podamos cambiar eso. Entonces podemos cambiar una instancia de esto. jaula es el fondo, pero no quiero cambiar el texto, el nombre del texto. Cambia el color de fondo. Bien, ahora es cuestión de que funcione. Entonces lo que vamos a hacer es decir, hagamos las fáciles. En primer lugar, vamos a seleccionarlo todo y convertirlo en un componente. ¿Bien? Y vamos a darle un nombre. Se va a llamar Campo de Entrada. Fresco. Entonces hagamos los fáciles, como el booling Entonces vamos a hacer click en esto y vamos a entrar dentro de él. Bien. Y vamos a decir, por aquí, busca una capa. Busca ese pequeño icono. Bien, haz click en eso. Y eso es todo lo que tenemos que hacer. Consigamos una instancia de este turno de trabajo. Y vamos a escribir entrada. Y ahí vamos, componente principal. Esta es mi instancia. ¿Bien? Y vamos a decir que tienes este pequeño y genial interruptor de palanca. Se requiere, ¿no es así? Hagamos lo mismo con el ayudante técnico. No es necesario para todos ellos. Lo hemos querido como una opción. Bien, entonces me he metido en mi componente principal. Voy a encontrar mi capa, ahí está ahí. Y voy a decir que ya hay uno que se llama show ya que así es lo que es. Voy a crear una nueva propiedad que diga perfecta. Gracias. Ahora, aquí abajo, tengo dos interruptores de palanca. Demuéstrale esa. Demuéstrale esa. Días felices. ¿Algo más necesito para encender y apagar? Probablemente no por el momento. Pongamos ese texto de entrada. Y podría tener que conceder ahora que con tres bits de texto aquí, tal vez esa propiedad de componente de texto sea mejor de lo que pensaba. Mi instinto de agarrarlos a los tres y ver si puedo hacer bajar a un miembro de contenido El contenido es para el texto. Todo bien. Esta pequeña sección aquí que dice que el contenido ya no existe, poco cambio en la interfaz de usuario. Figma ahora lo ha movido, bien, y lo ha troceado en el texto Déjame mostrarte. Puedes ver aquí, ahí está mi texto. Y simplemente lo movieron para formar parte de todo este azulejo. Ya no hay contenido. Los tiempos que van a contentarse. Solo busca el aspecto exacto para este pequeño campo aquí con el toro aquí que va a crear nuestra propiedad de texto. No más contenido mezclado con el texto. Bien, adelante. Estas cosas están en todas partes, lo cual es un poco confuso. Pero busca esos íconos. Bajo contenido, dice Mix. Si hago clic en esto y solo hago clic bien, todos se convierten en lo mismo. Todos están conectados. Ahora si los consigo aquí abajo y empiezo a escribir, bien, ¿dónde está etiqueta en lugar de etiqueta, pongo texto de muestra, bien? O muestrear por lo menos, ¿ves que todos cambiaron? Eso no es lo que quiero. Bien, entonces voy a deshacer, lo voy a hacer de manera individual. Haz clic en Etiqueta, Encuentra abajo en Contenido, encuentra el ícono dulce en lugar de solo la palabra texto. Esta va a ser etiqueta. El valor se puede etiquetar. Eso está bien. Texto de muestra aquí, Lo mismo, no ese. Vamos a crear una nueva propiedad. El texto de muestra probablemente no sea un buen nombre para ello. Llamemos a esto texto de un campo. Este último de aquí va a estar en propiedad nueva uno. Eso va a llamarse texto auxiliar. Bien, entonces, ¿por qué estoy admitiendo que esto es realmente útil? Mira este. Cuando alguien saca una nueva versión de esto, pueden pasar y decir, oh mira la etiqueta para esta es decir nombre Pueden tabular hacia abajo, bien, solo tabulación en tu teclado. Y entonces puedes poner ahí dentro, ya sabes, lo que quieras. Y entonces el texto auxiliar será nombre y apellido. Bien, me lo llevaré de vuelta. Eso es algo útil entonces haciendo clic en todo esto. Una cosa que vamos a tener que hacer ahora, sería bueno que estos estuvieran juntos en este momento dice mostrar texto auxiliar. ¿Bien? Pero entonces la entrada del texto auxiliar está ahí abajo. Reorganice esto ¿Bien? Después de crearlo, tenemos que volver a ese componente principal donde estamos haciendo todo el trabajo principal solo en este. Esas pequeñas líneas son reparadoras, ¿las puedes ver ahí? Entonces, lo que vamos a hacer es probablemente lo más importante. En realidad lo haremos etiqueta en la parte superior, porque está en la parte superior de la pila aquí, ese es el texto de la etiqueta. Entonces lo conseguiremos. ¿Queremos que muestre el asterisco o no? Entonces el texto auxiliar probablemente necesite estar debajo del texto auxiliar, en realidad, probablemente al revés, ¿verdad? Muéstralo primero y luego poder escribir en él si se muestra. Miramos esto ahora. ¿Esto tiene más sentido? Cambiar la etiqueta, digamos correo electrónico? ¿Quiero demostrar que es obligatorio o no? Luego está el campo de texto. Bien. Smith, ¿quieres mostrar el texto auxiliar? Sí. Bien. Entonces, ¿qué queremos en él? Bien, eso tiene más sentido. Necesito cambiar el nombre de esto porque este show de aquí Asterix probablemente no sea tan Haces lo mismo cuando vuelves a la original. Y también puedes editar estos. Bien, así que puedes simplemente hacer doble clic en ellos aquí. Podríamos simplemente ponernos dentro o fuera de esto tiene sentido cuando dice mostrar texto auxiliar, pero solo haremos que eso sea requerido por aquí, encendido apagado, agradable. Ahora no hubo un buen uso de un intercambio instantáneo, ¿de acuerdo? mejor tenía un icono en algún lugar de aquí, es una flecha o algo así. lo harías tú. Para lo que voy a usarlo como un poco pirateo porque lo que quiero hacer es tener una opción de error, básicamente la línea roja que da la vuelta para demostrar que este es un campo que o te has perdido o te equivocaste. O no hay suficientes personajes, demasiados personajes, ese tipo de cosas por el momento. Bien, si hago clic en esto, no los hay. Si voy a mis propiedades, solo hay variantes booling, swap instantáneo y texto Podrías estar viendo esto y vete, oye, hay 40 más de ellos. Dan, estoy esperando que esto sea razonablemente nuevo. Puedo ver en mi cabeza todas las diferentes formas en que podrías hacer esto. Bien, sería genial poder cambiar los estilos de color, estilos de fuente, todo, desde los estilos que creo que va a aparecer Hazme saber en los comentarios si hay cosas nuevas aquí y si es solo una cosa pequeña, te dejaré resolverlo. Pero si es, ya sabes, si han agregado cargas, volveré y lo volveré a grabar. Todo bien. Entonces, ¿cómo vas a hacer esa línea roja alrededor del exterior? Hmm. Ten una piénsalo tú mismo. Pausa y piensa, ¿cómo lo harías? Todo bien. ¿Cómo voy a hacerlo? ¿Lo voy a hacer con este marco aquí? ¿Bien? Voy a llamarlo campo. Y en realidad voy a hacer que sea un instante, así que sólo voy a arrastrar el campo aquí. Bien, entonces ahora está fuera de mi componente principal. Nada que ver con eso. Voy a hacer dos de ellos. Vamos a tener comandante, éste va a ser época de campo. Este va a ser campo predeterminado. Ese es el que tenemos. Ahora hagamos esta. Sólo voy a cambiar el trazo, hazlo grande rojo. Lo que quiero hacer es que voy a agarrar esta. Lo que quiero hacer es convertirlos a ambos en componentes. Múltiples componentes. Separar los. ¿Bien? Esta voy a cambiar de nuevo a aquí. Se puede ver aquí, es sólo un marco. Por el momento, voy a ir a copiar. Vamos a usar ese dulce comando de atajo shift R o control shift para cambiarlo. Ahora bien, no es sólo un marco, es una instancia de esto. Pero como hay una instancia, ahora puedo ir a este componente principal y decir agregar un swap instantáneo. ¿Cómo lo hago? Debajo de las propiedades aquí, voy a golpear el pequeño plus y voy a decir que quiero intercambiar instantáneamente. Quiero entrar a ella y elegir la instancia primero, ¿de acuerdo? Entonces vamos a entrar aquí y decir, este es el campo predeterminado, quiero intercambio instantáneo aquí y quiero decir de cuáles puedes elegir solo del campo predeterminado y error de campo. Eso es. Ojalá ahora puedas cambiar esa a error. Oh hombre, mira qué bueno es eso. Aquí tenemos justamente esta cosa. Hemos tenido que tener un par de componentes principales adicionales que podríamos eliminar ahora porque hay una instancia escondida ahí. Aguanta. No, no puedes. He regresado del futuro. No se pueden eliminar esos componentes principales principalmente porque puedo restaurar este. Bien. Vuelve, ahí está. ¿Dónde está mi error uno? No lo encuentro para conseguirlo a menos que se haya usado en alguna parte. Bien, y no se usó en ningún lado, así que es como que se fue para siempre. Así que voy a deshacer cargas y volver. Espera ahí. Bien, estamos de vuelta. Entonces, no los eliminemos. Esa no es una buena práctica de todos modos. Sólo los vamos a esconder para que no los podamos ver. Ahí tienes, vas a estar por allá. Aún así bastante ordenado, ¿verdad? Tengo un componente principal que hace mucho trabajo, por lo que nuestras instancias de eso son realmente fáciles de crear y ajustar, pero aún mejor, es para aquellas personas que van a estar usando nuestro increíble componente tiene este pequeño panel encantador y dulce aquí encendido demasiado fácil. Bien, eso es todo. Hemos unido un par de propiedades de componentes. Miramos los swaps instantáneos. Eso lo hicimos por la parte de atrás del campo con la línea roja alrededor del exterior. También hicimos texto y los lingotes para encender y apagar las cosas Bien, eso es todo. Te veré en el siguiente video. 74. Cómo combinar variantes con propiedades de componentes en Figma: Hola a todos. Oye, en esta sección hasta el momento hemos aprendido mucho, aprendido, hasta hemos aprendido mucho sobre las propiedades de los componentes Miramos Boolean y Text y todos son geniales y nos ahorran mucho trabajo a la hora de crear nuestros componentes Pero hay limitaciones. Entonces terminarás combinando ambas propiedades de componente junto con la varianza que conocemos y amamos son solo algunas cosas que las Propiedades de Componentes no pueden hacer, al menos aún no. Cosas como los cambios de color, sobre todo si quieres agregar Interacciones como un hover sobre un botón como lo vamos a hacer aquí Se pueden hacer cambios de tamaño. Escogiendo nuevos colores, puede ser pirateado para hacerlo, pero probablemente sea fácil usar una variante Eso es lo que haremos ahora es que construiremos poco como un ejemplo del mundo real de mezclar propiedades de componentes junto con variantes más tradicionales, hará que esto sea Bien, tiene mucho que hacer. Puede hacer tanto. Comprado seguía siendo una cantidad bastante mínima en el conjunto de componentes. Bien, vamos a sumergirnos. Bien, para empezar, tengo algo que parece un botón. Yo lo llamaré botón principal. Es un Auto Layout y tiene una instancia de un icono aquí. Se convierte en un componente y vamos a crear una variante para ello. Un poco mezclado con todo esto ahora, bien, así que puedo crear una nueva propiedad variante para una de ellas. Bien, la segunda variante va a ser fría. Hola, Renombrar la propiedad a estado. Bien, entonces tenemos un default, un estado de default y un estado de hover Este de aquí voy a comandar haga clic en el fondo. Bien, para que pueda llegar al relleno, solo hazlo un poco más oscuro. Ahí vamos. Entonces una de las cosas que las Propiedades de Componentes no pueden hacer es en direcciones, bien, Así que cuando un cursor sobre esto, quiero que cambie de color No podemos hacer eso con Propiedades de componentes. Entonces vamos a hacer con variantes. Entonces turno E, digamos que vas a su onClick know mientras se cierne, cambia al estado hover Y hagámoslo. Disolver. Bien, previsualizándolo Y tenemos mi pequeña vista previa sentada aquí arriba. El de los problemas en este momento con estados que bastante nuevos y no te permiten tener flujos para comenzar aquí para previsualizarlo, aún necesitas un frame Así que voy a hacer es mantener todo en mi tipo de componentes ahí. Y todavía voy a darle a la tecla F y recoger un teléfono. Y voy a poner una instancia en esta de aquí. Entonces Shift voy a escribir en áreas principales de botón y Botón. Ahora, debería poder iniciar un flujo ahí. Vista previa, ponlo aquí con todas mis otras cosas. Vamos. Ahí está mi botón. Si pongo el cursor por encima de él, ahí vamos. Esa interacción tiene que hacerse con una variante. ¿Qué más hay que hacer con una variante en tamaño? Algo que no podemos hacer. Entonces lo que vamos a hacer es pegar el exterior, hacer dos varianzas más. Bien, en realidad, duplicaré los que tengo. Entonces te voy a manchar a ti y a ti. Y voy a duplicar ambos, estos dos aquí y diseño, solo voy a cambiar el, voy a ir, no sé, más ocho pixeles y tal vez Plus para esos va a ser mis botones grandes. Entonces, antes que nada, vamos a envolver esto. El atajo es una locura como Comando Opción Shift R. Como recuerdo ese, es Control Alt Shift R. Bien. Pero probablemente sea fácil solo hacer clic en el botón arriba. Sí, éste de aquí. Esto es un poco obtener los componentes establecidos para envolverlo con los componentes que se sientan las tapas seleccionadas crean esa propiedad de variante mu, ¿de acuerdo? A éste se le va a llamar tamaño. Y el por defecto, bien. Voy a agarrar estos dos y decir que aquí eres del tamaño de estos dos. Tamaño por defecto. Perfecto. Así que por aquí ahora tengo ah, instancia de botón que tiene que variantes. ¿Cuándo es el estado? M1 es el tamaño. ¿Bien? No he actualizado estos estados sobre estos dos. Y U2 son un estado de ti, una nota estás por defecto y eres un estado de todo Java Vamos. Ahora por aquí, te tenemos y tenemos estado de hover y default No voy a cambiar el estado. Sí quiero cambiar el valor por defecto al grande. Bien, todo está funcionando perfecto. Déjame crear un color secundario solo, lo haré en modo Speed solo para que podamos llegar al buen punto de como raro. Luego agregamos propiedades de un componente. Bien, entonces ahí, Sí, Otra cosa que tenemos que hacer en varianza es un gran cambio de color como este Bien, así que echemos un vistazo a nuestro botón. Tenemos talla, buen default, colores, secundario o por defecto, Genial, regular, variante antigua. Bien, Entonces, si hay cambios de tamaño, cambios de color, y si quieres agregar Interacciones seguirán usando Variantes. Malo. Lo que termina pasando es, aceleraré agregar la versión que le faltan todas las ventajas Tú esperas ahí. Aquí es donde entran las propiedades de los componentes. He añadido una variante que no tiene icono. Se duplicó. Lo que tenía aquí arriba, poco me hincharon los botones Funciona totalmente por aquí. Puedo escoger la opción que no tenga botón o botón grande. Esto se está volviendo bastante complicado, así que voy a deshacer y hacerlo de la manera correcta usando Propiedades de componentes. Bien, entonces lo que quiero hacer aquí es que quiero decir que vas a hacer doble clic. Voy a agarrar mi icono, no el vector en el interior. Estoy agarrando el envoltorio que estoy usando de mi instancia. Voy a decir que en realidad tienes tratando de encontrar el icono correcto en las capas correctas. En este caso es bajo capa. Quiero mostrar icono. Yo solo quería ir a mostrar icono. Aquí vamos. Y ahora voy a aplicarlo a todos ellos. Aquí es donde ese truco anterior. Entonces si hago doble clic para agarrar esto, ¿ves que puedo seleccionarlos todos y decir aplicar porque ya lo hice Sólo puedo encenderlo. Bien, así que ahora no tuve que duplicar todo ese conjunto Puedo ir por aquí y decir en realidad icono de encendido y apagado. ¿Ves el poder de la misma? Ahora, botón es un buen ejemplo para mí para mostrar las interacciones de desplazamiento y los diferentes tamaños en los que entran las propiedades de los componentes es para ese tipo de cosas como más que ver con cosas como tarjetas que estaban haciendo Si tuviéramos que tener muchas versiones de estas, podría ser complicado, especialmente si solo estás encendiendo y apagando las cosas. Y como vimos antes cuando estamos haciendo todos los campos aquí, bueno, hay muchas cosas por encender y apagar. Iconos para activar y desactivar. Impresionante. Bien, solo para completarlo antes de irnos, es probable que quiera agarrarte, agarrar todos estos golpeando la capa de hallazgo de objetivo pequeño Y voy a decir, voy a agregar uno nuevo que diga mostrar texto. Va a ser verdad. Y significa que ahora puedo decir en este botón, puedo ver el texto encendido y apagado. Lo mismo con el icono. En realidad, ya tenemos el icono apagado. Sin embargo, lo que probablemente quiera hacer con el icono, es tener una forma de cambiar entre diferentes íconos. Entonces es diferente de la capa uno que hicimos mostrar icono. Lo vamos a encontrar aquí. Ahí está mi instancia, tengo una instancia. Quiero encontrar ese pequeño icono ahí. Y voy a hacer el intercambio de instancias. Y va a ser este el que va a ser mi valor predeterminado. Voy a añadir algunos preferidos. Bien, voy a decir esto y aquello, y tal vez eso. Excelente. Ahora, de nuevo, no tuve que duplicarlo, sobre todo si obtengo íconos. No tenías que hacer diez conjuntos más de estos para tener iconos un poco diferentes y luego apagarlos todos. Otro conjunto. Hombre, se hace grande. Ahora te puedo decir Instancia, ésta. Tan ordenado. Hagamos lo último de ordenar. Dos bits más es el texto. Probablemente quiero bajo contenido. Recuerden, quiero que ahí sea editable por aquí, lo que está creciendo en mí. Bien, botón principal de texto, genial. Significa que las personas que usan la instancia por la que mis otros miembros del equipo pueden pasar y cambiar el texto aquí para que se registren. Y por último, pero un Tidying probablemente esté poniendo esto en algún tipo de orden Lo hacemos usando el componente principal K o el conjunto de componentes. Y podemos arrastrarlos por ahí. Entonces podemos decir que probablemente lo más importante va a ser el texto y podemos arrastrarlo hacia arriba. No puede pasar de estas variantes. Pero la parte superior de esta lista muestra el ícono de encendido y apagado. Pongamos texto mostrado probablemente después de este porque es menos probable que use el icono de show. Sí. Y luego escoge la Instancia que parezca acertada. En cuanto al estado, probablemente no necesite eso en la parte superior. Necesito ese estado ahí porque necesito la interacción. Pero no es algo que alguien va a estar cambiando. No creo que el tamaño y el color probablemente el color, el tamaño, estado tiene como creo que esto debería parecer para poder usar mi proyecto. De qué color quieren, qué tamaños tiene que ser. El texto que va a estar en él. A lo mejor el espectáculo que se necesita debería estar arriba. ¿Necesito el icono o no un impacto en el icono, bien, eso es una varianza de combinación mezclada con Propiedades de Componente ¿Y qué hemos ahorrado? Tenemos esto, que sigue siendo bastante, pero sobre todo con esos íconos. Y necesitaba para ellos, idealmente para más conjuntos de estos duplicados, duplicados, duplicados para mostrar todos los diferentes iconos y los diferentes tamaños y diferentes estados Hover. Batman. Bien, eso es un poco enredado, un poco más de un proyecto del mundo real Bien, te veré en el siguiente video. 75. Cómo aplicar propiedades de componentes a sistemas de diseño existentes: Hola a todos. Oye, aquí tenemos un sistema de botones de diseño existente. Fue construido en una época anterior a Figma. Hey Propiedades de los componentes. Y serán muchas veces ya sea con tu propio trabajo existente o con documentos de la comunidad. Queremos pasar y decir en realidad, quiero combinarlo hacia abajo y usar Propiedades de componentes. Y es un poco permitirnos hacer algo como esto donde en lugar de tantos botones o necesitamos es este mini, que es útil tanto de Estados Unidos para organizar para la gente que usa nuestros botones como para el equipo Pero realmente el video es, quiero mostrarte el tipo de atajos para poder hacer estas actualizaciones en Bulk rápidamente. Mientras que hasta ahora los hemos estado construyendo medida que avanzamos trabajando en partes individuales. Entonces, cambios masivos, actualización masiva y un buen ejemplo de actualización de archivos anteriores a un formato más nuevo y elegante Bien, vamos a tirar, bien, lo que vamos a hacer es trabajar en éste para obtenerlo de la comunidad Si haces una búsqueda en la comunidad Figma para el botón Material Design, probablemente Edward se mude y llegarás aquí Gracias Merv, gorila y ábrala en Figma. Si no lo encuentras, te dejaré un enlace en la parte inferior de los proyectos de clase. Ahí hay un enlace a él. Directamente. Abre una versión para ti mismo y veremos cuánto podemos cortar algunos de los atajos para que esto sea más fácil y menos doloroso. Bien, así que vayamos a la página de variantes de botones. Y lo que vamos a hacer es intentar y como si pudiéramos trabajar en todo esto que estaríamos en esto por un tiempo Se necesita un poco de tiempo para reconfigurar un sistema de diseño existente Lo que vamos a hacer es abordar esta parte y te mostraré algunos de los atajos. Si tienes que abordarlo tú mismo, no hay nada de malo en esto. Simplemente es bastante grande. Escojo este porque tiene íconos izquierdo y derecho, lo que va a dar un buen ejemplo. Y lo que voy a hacer es porque este es un sistema de diseño existente que otras personas podrían estar usando. Podría simplemente dejar esto en paz y luego hacer otra versión. Entonces estoy manteniendo pulsada la tecla Opción, Alt en una PC. Para dejar esto en paz, podría ser en una biblioteca compartida. No quiero meterme con eso. Lo que voy a hacer es, ojalá, reducir este lote. En realidad, los pondrá por aquí para que todos podamos sorprendernos de lo mucho que ahorramos Entonces no deberíamos necesitar estos, ¿verdad? Sólo necesito una versión. Y lo que probablemente deba hacer es agregar ambas flechas y así puedo tener fácilmente ninguna, flecha derecha y flecha izquierda usando nuestro toggle booleano Entonces estas son todas las instancias en este momento, voy a separarlas usando Opción de Comando B o Control Alt B. Ahora que solo las Autolayouts en un componente, no las en un componente, no Todo el mundo haga eso. Comando. Shift K está trayendo una imagen donde quiero Command Option K. Y eso ni siquiera es lo que quiero tampoco. Quería decirles a todos ustedes, quería convertirlos en un conjunto de componentes. Podríamos hacer múltiples componentes y luego combinarlos es una variable que hace que los componentes se configuren a usted. Sólo voy a deshacer e ir directo a hacer que los componentes se sientan con un montón de variables en él. Bien, así que le eché un vistazo. Entonces lo que quiero hacer es un poco de copiar y pegar. Déjame mostrarte algún trazo Eso es porque necesito que esta flecha derecha, izquierda esté hacia adentro, esta. Bien, así que voy a darle a Enter para bucear dentro del padre y darle a Paste. Y entonces puedo usar mi flecha izquierda para alternar un poco entre los hermanos Ahora quiero, para todos ellos, lo que probablemente voy a hacer es irme. Si haces click off, voy a hacer click una vez que pulsa Enter, y eso selecciona a todos los hermanos. Voy a copiarlo. Lo mismo para esto. Entra en mi teclado, selecciona todos los hermanos eliminados, haz clic de nuevo en él, presiona Pegar. Y voy a hacer eso por todos estos. Lo voy a hacer en modo Velocidad. Los pesas. Bien, siento que había una manera más rápida de hacerlo Déjame saber en los comentarios si quieres, Oye, cuando lo haces de esta manera, todos los demás echan un vistazo ahí abajo para decir si había una mejor manera de producir eso en masa Bien, entonces hemos tirado todo ahí dentro. Ahora lo que queremos hacer es agregar todas nuestras diversas propiedades de componentes. Y lo que vamos a hacer ahora es no hacerlas individualmente. Hemos estado entrando y encontrando esto e yendo a buscar la capa y diciendo, bien, en la capa, voy a tener un booleano donde digo encendido y apagado Lo que podemos hacer es realmente agarrar el conjunto de componentes, bien, y simplemente hacerlo a esto Vamos a agregar todo de una sola vez y luego ir a través y editar. Entonces, ¿qué necesitamos? Necesitamos un par de cosas. Algunas propiedades aquí. Ahora, cuando tienes todo seleccionado, tienes la justicia una capa de opciones Propiedades no la tiene específicamente. Entonces lo que podemos hacer es decir, vamos a tener booleano. Bien, este va a llamarse Icon lift. Voy a tener otra. Eso va a ser un icono, ¿verdad? Porque eso es algo que quiero encender y apagar para ellos. Probablemente quiera hacer algo con un texto para decir que texto va a ser texto de botón. Voy a aplicar eso. No presione enter, cree Propiedad. Otras cosas que quiero, voy a necesitar ya tengo una propiedad aquí. Editemos esto y digamos que este va a ser mi estado. Y quiero otro que va a ser una variante. Recuerda antes de elaborar el tamaño y el color del país. Entonces vamos a usar esa. Vamos a hacer una variante que se debe con el tamaño. Bien, así que vamos a aplicarlo. Ahora. Yo tengo esto, vamos a hacer clic en este de aquí. Usa nuestro dulce target y di, me gustaría aplicar el intercambio de instancias. No tengo otra instancia. Podríamos añadir eso. Pero por el momento en este documento aquí, porque en realidad 12 y no necesito cambiar esto. Sólo necesito encenderlo y apagarlo. Entonces no esta. Voy a encontrar la capa y decir, quiero que el booleano de ICANN a la izquierda se encienda y apague ¿Ves que lo agregaste un poco a los componentes?, y ahora podemos pasar por y fácil y rápidamente decir, en realidad, quiero el que este es correcto En lugar de crearlo a medida que avanzamos, vuelva a enviar un mensaje de texto, haga clic en esto. Quiero que los ticks tengan bajo contenido. Y porque ya lo hicimos, cuando hacemos clic en él, no hace uno nuevo. Dice, oh mira, ya hay uno. Se puede hacer uno nuevo. Pero ahí está esa. En cuanto a tamaño. Son estos de aquí. En realidad el estado sabio va a estar por defecto. Eso es lo que quiero. Este de aquí va a tener un nuevo valor de hover Este de aquí va a tener un nuevo valor de on click. Cuando haces clic un poco se oscurece y habrá un deshabilitado o inactivo Entonces agreguemos otro estado, y éste va a estar en activo. Bien, el siguiente que queremos es el tamaño. Entonces vamos a decir que todos ustedes son de tamaño de default Vas a ser grande, grande para solo todos incluso escuchar todo va a ser un tamaño de ti entiendes la idea. Ahora, voy a acelerar esta parte. Bien, turno yo, tengo mi botón, voy a arrastrarlo. Y ojalá ahora tengo los diferentes estados, bien, tengo los diferentes tamaños generalmente para jugar con el orden de capas aquí. Pero tengo Icon a la izquierda, ¿un icono a la derecha? Y puedo cambiar el texto del botón. Hemos pasado de este trozo de aquí, bien, a solo este de aquí, que es muy bonito y ordenado. Y es una buena manera de ordenar sistemas de diseño existentes anteriores que obtienes de alguien más en la comunidad, alguien más y tu equipo. Y una de las grandes cosas que podemos hacer es que podemos hacer muchas cosas a granel simplemente aplicándolas al conjunto de componentes. Luego usando muchos de nuestros buenos atajos donde podemos usar este pequeño objetivo para seleccionarlos todos y aplicarlos todos a granel. Idealmente, agregará propiedades de componentes a medida que las esté fabricando. Pero va a haber muchas cosas heredadas por ahí. Solo se construyeron antes de que esto fuera una característica en Figma. Ahí va, actualizando un sistema de diseño existente y agregando las propiedades de sus componentes encima de ellos. Bien, eso es. Lo veré en el siguiente video. 76. Qué es Simplificar instancias en Figma: Bien, entonces hay dos partes para ello. Veamos las propiedades de los componentes en este momento. Entonces lo que haces es seleccionar cualquier componente principal. No tiene que tener variables. Voy a usar este de aquí solo porque por defecto, si miro la instancia de este botón, puede ver que hay todo el esfuerzo que se ponen en las propiedades de los componentes. Pero mira todas estas otras cosas que potencialmente alguien que está usando mi componente, bien, el resto del equipo, el cliente que he diseñado, esta Figma extranjera, bien, tienen acceso a todas estas cosas No quiero eso. Entonces lo que puedo hacer es y volver al componente principal, ir al nombre del componente en su Inspector de Propiedades, uno se llama botón principal. Ahí está ahí. Y hago clic en la pequeña configuración. Y ahí está esta cosa, Simplifica todas las instancias. Y lo que hace fue, es ahora y miro esto, puedes ver todas esas cosas por el fondo se ha ido todo el color de relleno?, el trazo que afecta a alguna de esas cosas está simplemente arreglado Todavía pueden llegar hasta esto. Pero lo que estamos tratando de hacer es que sea fácil usar y voy a encenderlo y apagarlo. No sé cómo restablecerlo. Yo sólo hago eso. Bien. Y ha vuelto a ser agradable y limpio. Estamos tratando de enfocar a la gente en usar esto cuando lo usa. Sólo las cosas que he dicho se te permite ajustar. No quiero que ajustes los efectos llene el trazo, solo quiero que estés trabajando en estas cosas que he presentado en mis Propiedades de Componente y Variables, eso es todo. Y toca cualquier otra cosa, por favor. Y obviamente pueden si es necesario. Entonces ese es el Inspector de Propiedades. Veamos la otra cosa que hace. Voy a saltar página abajo a la página siguiente. Voy a usar esta tarjeta aquí que hicimos antes. Y esta es la instancia de esa tarjeta sin que se le agregue nada. Se puede ver, puedo ver el texto y el precio hay esta instancia de precio por aquí. Hay precio, ahí está la instancia madrugadora. Hay todo tipo de cosas ahí dentro. Entonces sucede lo mismo. Mira esto. Si digo componente principal, voy a encontrar ese nombre aquí, buscar la configuración o configuración y decir Simplificar todas las instancias. Significa que cuando selecciono en esto, ¿ Puedes decir que luzca ordenado para enrollar?. Simplemente significa que simplemente impide que la gente se sienta abrumada. Si pueden ser nuestro diseñador junior, e incluso si son un diseñador senior de UX, y podría ser que solo dé una indicación sobre qué cambiar, cuándo no cambiar, bien, y lo que termina pasando por aquí es que aún puedes ver todas las capas, ¿verdad? Y a veces verás algunas capas pero no otras. ¿Por qué es eso? Es, tú decides como creador del componente principal, puedes decidir qué lay se muestra dándoles Propiedades de Componente. Esto lo hicimos antes en el curso antes de aprender las propiedades de los componentes. Pero digamos ahora vamos a seleccionar sobre esto, bien, agárralos todos, y agreguemos nuestro texto. ¿Bien? Crear una propiedad. A éste se le va a llamar texto a. ¿Por qué está, por qué ya está el texto? Porque he vuelto a grabar este video y tuve que tomar uno y olvidé borrarlo de todos modos Entonces he agregado esta propiedad de texto aquí, mi Propiedad Componente, la diferencia ahora cuando digo Usted, mi amigo, es Simplificar todas las Instancias. Bien, esta cosa ahora mostrará esa capa. Entonces estoy destinado a estar trabajando y cambiando, pero no todas las otras capas antes de que esto estuviera oculto todo ahí porque no había razón para que yo entrara ahí porque no había ninguna Propiedad Componente. Sí. Y así hace dos cosas. Esta cosa de aquí, muy ordenada, no tiene todo el relleno y todo el trazo y todos los efectos como lo hace antes. Y además, ordena las capas y solo te mostrará las cosas que se han establecido como una Propiedad de Componente. Ambos aquí. Ahí está, puedo cambiarlo por aquí, o puedo cambiarlo en capas. Vas cuando no las estarías usando. Yo no los usaría para mí. Probablemente incluso mi yo futuro probablemente querrá entrar ahí y adentrarlo y realmente no detiene a nadie. Pero si me aseguraba de que esto estuviera listo para que lo usara un grupo más grande, definitivamente estar encendiendo eso. Bien, eso es Simplificar instancias en Figma en el siguiente video 77. Qué hacen las instancias anidadas de Expose en Figma: Hola a todos. En este video vamos a ver algo llamado exponer instancias anidadas ¿Qué es lo que hace? Lo voy a explicar muy rápido al principio aquí. Entonces haremos algo rápido. Bien, tómate alrededor de un minuto para hacer usando cosas existentes. Y luego en este video para la gente que necesita un poco más de comprensión hará algo desde cero lo que llevará un poco de tiempo Pero, ¿cuál es la respuesta fácil? La respuesta fácil es esta. Tengo dos componentes. Este de aquí, he puesto una instancia de ello dentro de aquí, ahí está él, ese Texto. Entonces lo meto ahí dentro y con las Instancias Anidadas de Exponer apagadas, bien, si hago una instancia de esto Ahí está él Instancia del componente principal. Si lo tengo seleccionado el padre, ves que puedo hacerle algunas cosas al padre, pero no puedo hacer nada a este campo Ticks que está adentro, no puedo verlo a menos que vaya, vas a Propiedades y digo Instancias anidadas, muéstrame todo dentro de él Yo sólo tengo una cosa que vas. Ahora cuando estoy trabajando con la instancia, no tengo que sumergirme en este texto. Puedo ver mira garrapatas de campo ahí está. Ahí. Puedo ir y cambiarlo a mecanografía. Burbuja todo hasta el padre superior para que puedas controlarlo con bastante facilidad. Te vas, son muy largas intro, pero así es como funciona Iremos a hacer otra. ¿Gané lo construimos desde cero para quienes lo necesitan? Bien, comencemos Bien, la forma en que esto funciona es que solo puedes usarlo cuando hay una Instancia Anidada Y la instancia anidada necesita una variante o cualquiera de las propiedades del componente, texto booleano, cualquiera de las que hayamos aprendido Entonces tenemos uno que ya existe que podemos hacer funcionar y luego iremos a hacer uno juntos solo para conducir realmente en casa. Pero tengo esta tarjeta que hicimos antes dentro de este cadmio, pero anidamos dentro de ella Esta cosa llamada precio. Ahí lo puedes ver. Y este es el componente principal. Esto va a estar metido esto ahí dentro. Bien, Entonces, como una Instancia Anidada dentro de esto, los componentes que aquí ni siquiera tienen que ser Componentes se sientan solo un componente antiguo regular también Y con esa estructura funcionando algo Anidado, puedes dar click en el padre Y puedes ir por aquí debajo de Propiedades, puedes dar click en este plus, y verás esto. Si no hay nada anidado dentro, no podrás verlo. ¿Bien? Y solo lo enciendes y podrás decidir cuándo se selecciona el exterior de mi instancia, como el padre, el wrapper. ¿Por qué no mostrar también a la persona que controla el precio, bien? Porque lo que pasa en el pasado es llegar a esto, haces click en él. Echemos un vistazo por ejemplo, y se mueve a través. Así que puedes ver aquí, hay precio en el que puedo cambiar el precio y se puede jugar con un texto sobre Aconex. Es ese precio. Puedo entrar ahí y hacer doble clic, entrar ahí está. Puedes hacer doble clic o hacer clic en Comando para entrar, para agarrar la Instancia y cambiarla por la forma Exponer. Simplemente es más agradable. Vamos, vamos a hacer clic en ti. Da click en las pequeñas Propiedades y debajo de todas estas, desaparece mágicamente. Y vamos a mostrarlo por precio. Bien, entonces ahora cuando alguien está trabajando en mi instancia, no tiene que ir y pueden ver precio por el envoltorio exterior. Puedes ver todos los cambios porque puedo cambiarlo a horizontal y apagado y horizontal. Pulsa entonces podrás ver las instancias anidadas y nuestro caso es solo variable, ¿de acuerdo? Pero puedes ver cualquiera de las cosas que podemos hacer con Propiedades de Componentes. Es solo útil que tener que cavar, especialmente algunas cosas realmente desordenadas. Entonces volvamos a hacer uno porque saltamos a otra cosa. Es posible que necesites un repaso o simplemente necesites un poco de ayuda, más o menos, hagamos uno juntos Si todo eso parece agradable y totalmente comprensible, puedes saltar al siguiente video. Pero para el resto de nosotros, lo que haremos es saltar a mi página de componentes usando page up. Voy a empezar con esto. No, esta la hicimos antes. Puedes diseñar el tuyo propio. Voy a hacer un duplicado de la misma y luego cambiarla a pedazos. Recuerda antes en el curso cómo smoosh algo a pedazos. Lo que voy a hacer es que voy a hacerlo, no hay ningún atajo increíble para ello. Entonces voy a ir al comando forward slash o control forward slash Y voy a buscar desapegarse, desatar instancia. Sabemos que hay un atajo, pero quiero ir al que dice D, adjuntar todas las Instancias Anidadas porque en realidad es bastante la jerarquía pasando, en el ASE Ahí está eso, también está eso ahí dentro que hicimos. Así que quiero smoosh todo de nuevo para separar, separar todas las instancias anidadas, separar todas las instancias anidadas, y todo está Vamos a darle un poco de nombre, porque tengo dos campos de entrada. Este va a ser mi campo de entrada v2, voy a convertirlo en un componente. Vamos a agregarle algunas propiedades. Cosas de padres de alto nivel, y luego haremos la instancia más profunda. Bien, así que agreguemos algunas propiedades que son un poco de forma de edición masiva Entonces no Variantes. Voy a añadir un par de booleanos Esta va a ser etiqueta, ya sea encendida o apagada. Quiero hacer otro booleano para decir si la ayuda de Text, Help text está encendida o simplemente dejarla llamada helper Hagamos que las garrapatas cambien. Este de aquí va a ser etiquetado y va a tener el valor propio label. Pero tiendo a hacer es ir etiqueta de guión de texto. Bien, ¿eso es lo que se va a poner en mi pequeño campo de garrapatas? Uno más. Cómo entramos en esto es este sentimiento más fácil, siguen siendo bastante confusos. Es bueno que lleguemos a hacer algunas distintas. Entonces esto va a ser un mensaje de texto para el ayudante. Y esto se va a llamar texto auxiliar. Voy a exportar texto al frente para que cuando esté viendo estas cosas, digamos que entro en mi texto aquí, lo etiquetaré de esa manera porque cuando haga clic en el padre, ¿ puede ver que toma textos etiquetados ayudante cuando es al revés y les resulta difícil averiguar a quién le va bien, vamos a aplicarlos a las cosas. Cualquier otra cosa que queramos hacer, bullying y Texas suficiente para la modalidad. Por lo que la etiqueta necesita contenido va a ser editado con texto. Etiqueta. Lo mismo con la ayuda de texto. Esto va a usar el mismo, pero va a usar takes helper. Con ella seleccionada. Vayamos a nuestra capa y vamos encender y apagar el booleano usando ese interruptor de palanca y etiquetar debajo de la capa, vamos a lo mismo Así que vamos a crear una instancia. Entonces turno solo voy a escribir v2. Bien, capa que es. Y ahora puedo ver la etiqueta dentro y fuera. Vamos a moverlo por aquí. Entonces solo un zoom hasta el momento. Tú encendido, apagado, encendido, apagado. Y puedo simplemente el texto de la etiqueta. Y puedo ajustar la ayuda del texto. Entonces esa es una parte de ella. ¿Cómo llego a la parte expuesta? Este podría ser un buen ejemplo donde quiero que esto se cambie. Bien, así que voy a cortar esto y sólo pegarlo por aquí. Voy a hacer esto como propio Componente, garrapatas de muestra fría, lo cual en realidad es bastante bueno. En realidad va a renombrarlo solo un cool it campo texto, campo, texto. Es hacer una variante de ello. Y éste, va a ser algo así como quiero que podamos cambiarlo para que parezca que alguien está escribiendo. Mecanografía. Voy a usar eso. Nos encargaríamos de eso. No estoy seguro de cómo se llama. El Grande te pone de pie en mi teclado, es el, está un poco atado con la barra inversa todos modos, En lo que te ha gustado Y voy a ajustar el color de la fuente en estos dos. Vamos a nombrarlos mejor. Entonces tengo una propiedad de texto. Y los dos valores diferentes van a ser tal vez no predeterminados sino marcador Y éste va a estar escribiendo. Yo uso tab para llegar un poco a todos ellos. Aquí vamos. Tiene estos dos. Vamos a meterlo. Entonces voy a ir al campo de texto o ¿está el campo Text Veritas ahí Y pongámoslo dentro de mi componente principal. Aparece aquí abajo. Entonces esta cosa aquí tiene sus propias cosas pasando. Tiene que Variantes garrapatas de campo es texto con dos variables diferentes. Estos para el padre aunque, tiene sus propias cosas sucediendo que está etiquetada ayudarla. Tiene estos booleanos y tiene estos ajustadores de Texto. Y lo que puedo hacer ahora es porque eso está anidado aquí, puedo decir que en realidad obtuve unas propiedades Instancias anidadas y tal vez no quieras, así que podrías ser como no cambies esto o sí, podrás cambiar esta en este Aquí vamos. Entonces ahora en mi instancia de esa, puedo ver con solo hacer clic en el padre, el exterior, puedo ver todo lo que necesito para darle la vuelta a la etiqueta en realidad es moverlo por aquí otra vez. Tengo que hacer zoom hasta ahora, la etiqueta encendida y apagada, ayudante de encendido y apagado. Pero también puedo ver aquí adentro, mira, ahí está el cambio de mecanografiar. Bien, bien marcador de posición. Siempre podemos hacer esto con solo hacer doble clic y entrar ahí y aún así poder verlo. Así que todavía puedo enseñarlo a marcador de posición. Pero ahora es mucho más fácil de usar para mí y para cualquiera del equipo para el que estoy diseñando esto. Bien, eso es exponer Instancias en Figma y que mis amigos van a ser componentes de variables por un rato hicimos cargas Y probablemente te cansarás de ello. Estoy un poco harta de ello. Habrá un nivel de Componentes y Variables para más adelante en el curso que haremos pero más. Pero por ahora, duro, respira profundo, edredón de un paseo, listo para el proyecto de clase, componentes, Variables, Propiedades de los componentes, instancias. Hay todos increíbles, súper serviciales y un poco una de las grandes razones por las que estamos aquí para el curso avanzado, pero respiración profunda, es hacer otra cosa por un poco Bien, te veré el siguiente video. Bien, una última cosa rápida. Terminé el video y estaba como, Hombre, eso es saber que no te conocía. ¿Por qué está ahí? ¿Cómo conseguirías que ese asterix avance cuando la gente empieza a escribir FirstName es realmente largo gente empieza a escribir FirstName es ¿Por qué un astérix se mueve? Oh, quiero que hagas una pausa aquí y veas si puedes conseguir que se vaya. Bien. ¿Lo hiciste una pausa? Bien, vuelve a la principal. Bien. Vas a seleccionar ambos, lo que puede ser complicado y estás alejado. Así que cosas como las dos y yo solo voy a ir cambiando. Bien. Y es un poco convertirlo en un diseño automático. Bien, no tengo espacio entre el mío podrías tener un poco y el tuyo. Bien, pero ahora todas las instancias, Hola, Mira, te moviste a lo largo. Tal vez días, ahí tienes. Comas restauradas en el siguiente video. 78. Proyecto de clase 09: un solo bambú para gobernar a todos: Hola a todos. Es tiempo de proyecto de clase. Vamos a empatar todas las propiedades de los componentes que hemos aprendido en los videos anteriores. Y voy a hacer que hagas un botón para gobernarlos a todos, ¿de acuerdo? Va a ser tu botón principal para tu app. Y voy a conseguir que te obligues a hacerle algunas cosas. Es muy buen ejemplo del tipo de botón que vas a crear. Así que básicamente, voy a leer a través de todos estos, pero déjame mostrarte algo así como que esta es una versión más pequeña de la misma. No iba a ser un poco más complejo. Pero básicamente este tipo de cosas donde hay un botón principal, hay dos colores diferentes, es de dos tamaños diferentes. Hay un icono a la derecha y por aquí, tengo la capacidad de ajustarlos y apagarlos todos cuando estoy trabajando con mi instancia de la misma, instancia de símbolo con mucho control. Entonces, ¿qué tienes que hacer realmente? Entonces el texto del botón, quiero que puedas encender y apagar con el edificio y hacer que los tics sean editables No voy a pasar por cada uno de estos, pero solo te doy un, por ejemplo, como en ese caso y tu componente principal o en realidad en mi instancia, quiero poder activar y desactivar el texto para el booleano y poder cambiar el texto desde dentro del Inspector de Propiedades Bien, con el icono, lo mismo, enciéndalo y apágalo. Pero esta tiene un intercambio de instancias para recordar antes que podamos pasar y de esta pasar y elegir una instancia diferente, los diferentes iconos de esta lista preferida. Y quiero que te asegures de que también usas la lista preferida para que puedas conseguir que funcione. ¿Qué más? Quiero que tengas Variantes. Va a ser un tamaño predeterminado, uno pequeño y uno grande. A menudo acaba de hacer con un acolchado. Es posible que también tengas que ajustar el tamaño de la fuente. Y va a ser de tres colores. Esta cosa va a conseguir hombres grandes, primaria, secundaria. Y cuando usamos outline, sería algo así donde hay una versión de esquema del mismo. Va a ser por defecto, una versión pequeña y otra grande de esos también. Quiero que te asegures de que las Instancias Simplificar estén encendidas. Entonces, cuando la gente lo está usando arregla un poco a ese Inspector de Propiedades, tal vez tengas que volver a ese video para resolver ese Y el último es así va a ser un poco de trabajo por sí solo. Si eres un mamón para el castigo. Y realmente quieres simplemente como impulsar tus habilidades y hacer algo realmente completo es que puedes poner en los estados opcionales, bien, Eso es por defecto Haber oprimido, discapacitado. Bien, esos son estos que esbozas tiene uno propio, tú y discapacitado. Eso es opcional porque me doy cuenta de que esto está consiguiendo un proyecto bastante grande por sí solo. Y si lo estás haciendo, consigue que las interacciones funcionen para que cuando tengas una instancia de la misma, aquí abajo la previsualizes. Que funcione, hover funciona. Al hacer clic en él, va al estado. Vas a ver si puedes hacer esos entregables. Quiero ver una captura de pantalla es probablemente la forma más fácil de echar un vistazo es lo que haría es obtener su componente principal, obtenerlo bien diseñado para que no se vea como un desastre. Y estar en la vista Diseño. Y toma una captura de pantalla de todo esto para que pueda ver todas las propiedades así como toda la varianza por aquí, ¿de acuerdo? Eso sería perfecto. Opcional es ser genial si puedes. Sé que no todo el mundo lo está haciendo, pero genial ver un video de ustedes están viendo esta instancia aquí. No es un adelanto de ello, sino solo pasando por aquí y yendo a quedar bien. Yo puedo hacer nosotros y todo funcionando. Ahí estaría el Qie Gei pudiendo hacer todas estas cosas con un video corto Si haces eso, asegúrate de subirlo. Recuerda, Vimeo, YouTube, behance es otro buen lugar. Y luego solo comparte el enlace tuyo haciendo que tu mega botón funcione. Compártelo también en las redes sociales, y usa el hashtag Figma Advanced para que pueda comprobarlo si te encuentras con algún problema, pútalo arriba Y porque estamos haciendo las dos personas comentando sobre lo del trabajo de otras personas, si no soy yo o uno de los TA, uno de tus compañeros de estudios te ayudará con cualquier problema que pudieras haber tenido Y si lo has encontrado mientras finalmente lo resolviste, asegúrate de ir y ayudar a alguien más que pueda estar teniendo problemas. Bien, Un botón para gobernarlos a todos. Disfruta de la frustración. Va a ser complicado si para unos que para otros, pero entra, ensuciarse si puedes hacer que suceda Y te voy a ver en el siguiente video. Oh, no tengas miedo de ver ninguno de los videos anteriores también. Bien. A ella le gusta, Oh hombre, ¿ cómo hizo eso? Salta ahí atrás. Todos los videos. Puedes ir a verlos otra vez. Bien, eso es. Entremos al siguiente video. 79. Cuáles son algunos consejos y trucos sobre fuentes en Figma: Hola a todos. En este video vamos a cubrir todos los atajos rápidos, Tips y trucos para tratar con fuentes, Type weight, interlineado, espaciado entre letras, letras, haciendo las cosas atrevidas y golpear a través de esto algunos atajos de buena calidad que funcionan no solo en Figma, sino en otros procesos de palabras y tipo de las cosas que uso a diario Y creo que los voy a encerrar en este video de aquí. Ojalá haya uno o dos que no hayas usado antes. Bien, vamos a sumergirnos primero, hay muchos atajos y los voy a poner todos en la hoja de atajos que puedes obtener de los archivos de ejercicios Y para empezar, acabo de llegar al cuadro de texto en una página vacía Seleccionemos todo el texto. Y mi primera y favorita es que mantienes pulsadas Comando y Opción en una Mac Control Alt en una PC, hay dos teclas, manténgalas pulsadas, y luego estás buscando las teclas mayor que y menor que. El editor los colocará en la pantalla aquí, bien, ahí están los que están abajo normalmente al lado del teclado M Kiana English, a menudo empatados con un comentario en el periodo, bien, y si vas de izquierda a derecha, así, ¿qué hace? Se puede ver por aquí que se está desplazando a través de los diferentes pesos. Me encanta porque de lo contrario hay este juego de fondo de clicky click, click the not quite click. Impresionante. Bien, entonces esa es Opción de Comando en una Mac, Controlar Alt en una PC y usar esa tecla mayor que y menor que, esas mismas teclas mayores que y menores que con todas las garrapatas seleccionadas, solo mantén pulsada la tecla Opción en una Mac, tecla alt en una PC y usa mayor que y menor que para extender y jugar con el espaciado entre letras El mío estaba mezclado porque antes estaba jugando con él, pero todos están seleccionados todos dentro y fuera. Lo bueno de esa de ahí. Y muchos de estos cortes texturales, funciona en todos los programas de tipografía, word, Illustrator, InDesign, todo tipo Se pueden hacer los individuales. Sólo tienes tu cursor parpadeando aquí. Mantenga pulsada la tecla Opción en una Mac, tecla alt en una PC y úsela mayor que y menor que. Y entonces se puede trabajar con espaciado de letras específico, no todo el asunto. Tal vez dados. Bien, pongámosle algo a un tipo de devolución. Porque lo que podemos hacer es slick eso todo y ajustar automáticamente la Altura de Línea, Es Opción Mayús o Alt Shift en una PC Y esos mismos, mayores y menores que, hacen cargas por nosotros. También se puede hacer un buen tamaño de fuente. Eso es turno de mando y lo mismo mayor que y menor que. Se puede ver mi tamaño de fuente subiendo y bajando. Tan bueno. A veces, aunque quieras escalar ticks y solo estás buscando un tamaño, no sabes lo que es y aplastar ese atajo puede ser problemático ya a veces solo quieres escalarlo Como si no lo estuviera escalando. Si pulsas el atajo K para llegar a escalar esa opción aquí en lugar de moverte a escala, entonces puedes arrastrarla. Hago esto mucho cuando trato de averiguar como herejes y un poco como texto de pantalla grande No sé qué tamaño tiene que ser. Estoy haciendo un poco de eso. Entonces podría entrar aquí y saltar de nuevo a V para mi herramienta de selección e ir en realidad, ¿a qué se acerca? ¿Está un poco atascado entre tallas? Va a ser 32, 24, dos de esos y el tío trabajan, voy a terminar haciendo 28 ocho Pero utilizo la herramienta K para acercarme un poco a donde quiero estar Otros atajos que son útiles son solo los básicos de tipografía que utilizo todo el tiempo Comando I Es cursiva. El comando B convertirá un texto normal en alternar entre regular y negrita. El tachado es otro que uso bastante. Es Comando Mayús X o Control Shift X. En una PC, estoy desnudo para líneas y listas y viñetas. Y otro es Command Shift otra vez, pero escribe ocho en tu teclado, bien, eso es Control Shift ocho, los mismos atajos otra vez, pero siete va un poco entre viñetas en números Entonces ocho son balas, siete como números. Hay otros. No los uso muy a menudo, así que asumo que nadie los usa, cual probablemente sea falso, pero puedes encontrarlos debajo, arriba, debajo de aquí, debajo de la F, debajo de los textos Se pueden ver estos aquí. Así Crear Enlace. Yo uso bastante también. Pero en cuanto a algunos de estos, no lo sé. Algunos de estos alinean el texto a la izquierda. Nunca me acuerdo. Debo recordar el centro de alineación de texto. Voy a añadir estos dos, las hojas de acceso directo en mi caso, Opción Comando R y L tiene sentido un poco de izquierda y derecha T por el pecado para ti en la forma en que trabajas podría encontrar algunos de estos otros útiles. Pero lo genial de todo esto es que funciona en Word, funciona en Google Docs, funciona en Illustrator e InDesign o Photoshop o los mismos atajos, súper útil. Un último pequeño consejo y truco es nuevo para Figma, poco lo vi antes, pero vamos a empatar Ahora hay un Buscar y Reemplazar para el tipo. Nunca solían estar despiertos hasta hace poco. Entonces, si eres usuario de la vieja escuela y esto es nuevo, puedes hacer Buscar y reemplazar por texto. Encontrarás la palabra Figma y la reemplazarás por Dan. Reemplazar Todo lo que hace excepto cuando está haciendo poco espaciado, opción o alt mayor que, menor que, haciéndolo levemente mejor Bien, esos son algunos de los atajos que uso todo el tiempo pueden ser un poco abrumadores Así que imprime la hoja de acceso directo y aborda uno o dos todos los días. Ver cuáles se pegan. Bien, eso es. Voy a ver en el siguiente video 80. Cómo ver vistas previas de fuentes en vivo en Figma: Hola a todos. Bienvenido al apasionante mundo del truncamiento. Bien, ¿qué es el truncamiento? Significa que cuando tengo un cuadro de texto dentro de un diseño automático, cuando mi permiso mayor se vuelve demasiado pequeño, simplemente se apaga. Bien, podemos establecer el desbordamiento, pero en realidad no es lo que quiero Lo que quiero hacer es esto, ver este. Se hace más pequeño, cada vez más pequeño, cada vez más pequeño. Mira esas tres líneas punteadas. Bien, entonces se trunca el texto. Es muy útil. Podemos establecer una cantidad máxima de líneas. Podemos dejar que el autolayout decida el tamaño y automáticamente agregará el pequeño punto-punto-punto, lo que agregará el pequeño punto-punto-punto, significa que hay más textos en este cuadro de texto que se este cuadro de texto Truncado es la palabra. Déjame mostrarte cómo hacerlo, justo para empezar, tengo un cuadro de texto, eso es todo Nada más especial al respecto. Y lo que puedo hacer es con él seleccionado, pasar a mi configuración de Tipo Avanzado y activar el texto truncado Ahí hay algo de punto-punto-punto. ¿Bien? Y a veces no pasa nada porque necesitas hacerlo realmente más pequeño y luego se trunca. Hay otra opción para el truncamiento es ese punto-punto-punto Más para ser rojo. Puedes ir un poco más elegante si configuras el cuadro de texto en lugar de esta altura fija o tamaño fijo, ve a este otro de aquí, esta su altura automática Bien, lo genial de la altura del pedido es con truncamiento apagado. Se expande y se contrae dependiendo del tamaño de las garrapatas en las que esté ahí. Bien, entonces es un buen lugar para parar por cualquier cosa. Pero lo que puede pasar es que si es altura automática, podemos ir a estos ajustes aquí y ahora hemos sintonizado este truncamiento Muchas gracias, y tienes líneas máximas, bien, pero tienes que tener puesta la altura del pedido. Y puedo decir en realidad, sólo quiero tres líneas. No quiero alargarlo cuando siempre sean un máximo de tres líneas. Ahí vas. Hagamos algo un poco más elegante con un diseño automático. Así que tengo mi cuadro de texto seleccionado, nada elegante en ello. Voy a cambiar a para que sea un diseño automático. Vamos a darle una película rápida. Ahora bien, si hago el texto dentro de esto, bien, truncado perfecto, con la siguiente línea del mismo puede tener tantas como necesite Bien. Quiero que la caja se redimensione para ello. Ya ves que no está funcionando del todo. Quiero que se trunca. Entonces lo que tengo que hacer son truncamientos encendidos Pero necesito decir este cuadro de texto aquí. Quiero que no estés arreglado y abrazando el contenido. Quiero que digan llenar el contenedor, Galilea el contenedor exterior Bien, entonces mi tecla de la Barra Inversa para hacer clic en los padres. Y ahora debería hacer cosas más geniales de autolayout Vete tú. Eso es texto truncado, palabra graciosa Y lo que hay que recordar es que si no tienes las líneas máximas, es porque estamos en un tamaño fijo. Tenemos que estar en altura automática y luego encenderla. Y estas líneas L max, bien, truncando, te veré en el siguiente video 81. Cómo restablecer fuentes y establecer fuentes predeterminadas en Figma: Hola ahí. En este video vamos a hacer dos cosas. Vamos a restablecer la fuente de nuevo a la fábrica en que los usuarios de Figma Y además, te voy a mostrar decepcionantemente que no puedes establecer el valor por defecto no es un predeterminado persistente para las fuentes, pero te voy a mostrar una especie de solución alternativa ish . Bien, vamos a saltar Bien, el primero es restablecer tus fuentes. A veces estarías haciendo algo como eres, ¿por qué sigue haciendo eso? ¿Cómo se vuelve normal? No hay fuente de reinicio o puedes hacer aunque, es solo cerca Figma, adiós, vuelve a abrirla Y ahora cuando empiezo a escribir, empieza a escribir por defecto. Ve, solo ciérrala y ábrela otra vez. Un dato extraño sobre Figma. Cuando empiezo a escribir encima del color, se vuelve blanco. Cuando voy por aquí y empiezo a escribir, ¿ ves que se pone negro Eso es solo cosas inteligentes de Figma. Bien, el siguiente es ¿cómo cambio el valor predeterminado para siempre Digamos que no estamos usando hasta que estemos usando Roboto. Y quiero que sea 16 punto. Puedo un poco no funciona. La respuesta corta. Puedo subir a ticks y puedo decir, puedo ir a editar y puedo ir a Establecer como Propiedades por Defecto. Bien, entonces cuando empiece a escribir lo siguiente, mira, todavía está en, el problema es que voy a cerrarlo y abrir de nuevo. Tu peso ahí, empieza a escribir de nuevo. Volver al inter, que es el valor por defecto actual para Figma. Ahí vas. Eso no funciona. Entonces apesta, pero es bueno saber que no hay forma de salvar el default en este momento. Hazme saber en los comentarios si eso cambia, obviamente puedes escoger un estilo, bien, Así que tengo una fuente. Voy a dar click en mi pequeño panel de Estilos. Voy a pegarle más. Y esto va a ser, digamos que este es mi h tres. Puedo obtener consistencia seleccionándolos a todos. Entra aquí y diciendo en realidad todos ustedes mayores de tres años. Cuando empiece a escribir, lo recordará, no estoy seguro de por qué escribir por defecto cada vez. Bien, escapa para salir de ella. Lo recuerda, pero si abro y cierro da ¿qué va a pasar? ¿Tu peso ahí? No, es espalda con espalda para mantener el tamaño de fuente extrañamente, pero eso no es tan útil Pero por suerte tenemos estilos. Entonces el ego, volver a una fuente predeterminada es solo abrirla y cerrarla. Y no se pueden establecer valores predeterminados persistentes. Simplemente recuerda lo último que hiciste, aunque le digas que establezca las propiedades predeterminadas al abrirlo y cerrarlo, vuelve al cuadrado uno en este momento Pero ahí tienes. Usamos estilos, bien, eso es todo. Te veré en el siguiente video. 82. Cómo usar el porcentaje de altura de línea en una cuadrícula de 8 puntos en Figma: Hola a todos. En este video, vamos a ver por qué a la gente le importa tanto sentarse ahí Altura de Línea o dejar que el espaciado entre líneas dos porcentajes en lugar del valor predeterminado en Figma, que es el orden La explicación rápida es que voy a darle la vuelta a mi grilla. Si estoy usando una cuadrícula de ocho puntos, que muchos de nosotros hacemos por consistencia. Podríamos el viejo Auto feo, dice que estoy un poco a mitad de camino a través la línea blanca y luego justo abajo de la Ahora estoy en la línea rosa. Yo no soy Willy. Estoy en todas partes. Es difícil alinear las cosas con ese cuadro de texto y es muy difícil ser consistente en muchas páginas. Mientras que mi porcentaje aquí mira iluminando la línea blanca, también alineando la línea blanca. También estás alineando con mi línea blanca de cuadrícula de ocho puntos. Y hace que sea más fácil alinearlo con otros cuadros de texto e imágenes. Oh, es muy emocionante. Sin embargo, algo útil. Déjame mostrarte cómo ponerlo en marcha. Bien, entonces editemos primero y luego hablemos de por qué es útil Así que tengo algunos textos y entregué un poco de Loren Ipsum por aquí donde tengo mi vida o Altura de Línea Podemos escribir en lugar de decir Auto. El momento auto escogerá la altura de línea apropiada para la fuente, y está por defecto a 16 aquí Si me topo eso para decir 24, bien. Y hago clic en un pedido, puedes ver que está usando 29. No quiero que escoja números fuera de mi cuadrícula de ocho puntos que estoy usando. Entonces lo que voy a hacer es usar porcentajes. Voy a deshacer. Entonces 16 punto en vez de auto, voy a escribir, digamos 100 por ciento porque como uno fácil de entender, probablemente sea demasiado ajustado para lo que necesito, pero es bueno entender este principio. Probablemente usaré 150, ¿de acuerdo? Porque esto es un porcentaje, es en relación con esto. Entonces lo que es la Altura de Línea o vivir para 16 puntos es 16 punto. ¿Y si era del 200 por ciento? Sería esta vez dos, que es deber de volverse en el cerebro si fuera 150 por ciento para el editor. Corta mi larga pausa, espero. Entonces. ¿Por qué es eso útil? Vamos a encender nuestra cuadrícula de ocho puntos. Si sigues a lo largo del curso, deberías tener, hago clic en mi aparente marco aquí, solo se hacen uno vacío. Deberías tener un estilo de cuadrícula o listo para usar. Si no lo haces, vamos a hacer rápidamente uno nuevo. Así que voy a ir a nueva grilla. Voy a cambiarlo de una rejilla, dos columnas y la cantidad puesta en cargas. Y vamos a iniciarlo en la parte superior e ir cuadriculada de ocho por ocho puntos. Lo que me gustaría hacer es que este cuadro de texto alineado hasta arriba aquí Y ¿puedes ver ahora como que todo se asienta en un espaciamiento parejo? Ahora, si vuelvo a, hagamos dos de ellos. Entonces vamos a hacer este más pequeño. Y hagamos este de aquí. Entonces si hago el que solo está configurado en auto, que es el predeterminado. Bien, puedes ver que se sienta un poco por encima de la línea rosa aquí Este es un poco más bajo y luego un poco a mitad de camino, se está poniendo a mitad de camino, camino abajo hasta el fondo Ahora, es simplemente inconsistente para diseñar las cosas. Esto lo puedes hacer totalmente. No tiene nada de malo. Pero si estás diseñando un sitio realmente complejo y quieres consistencia en todo el diseño, lo que muchos de nosotros hacemos como diseñadores, entonces usar un espaciado de ocho puntos es genial. Y luego usar los porcentajes para los vivos significa que las cosas se alinearán con otros cuadros de texto Y si estoy dibujando cosas y estoy usando la cuadrícula, voy a usar mi herramienta para marco. Puedes ver cómo las cosas alinearán una cantidad consistente desde la parte superior y una cantidad consistente desde abajo Práctico para alinear imágenes con cosas y hacer que los botones se alineen solo lo hace más fácil. Entonces para mí en este caso, un turno G, ¿hay suficiente peso? No la hay. Bien, entonces probablemente voy a usar un 150. Significa que ni una quinta parte de Altura de Línea, 150 por ciento. Eso es muy común. Es bastante abierto. Vas a decidir si eso es lo adecuado para ti. Comprado usando el 150 por ciento significa que cuando estoy mirando mi cuadrícula, las cosas aún terminan en un tipo similar de espaciado. ¿Puedes ver que este está un poco por debajo del rosa y es un poco alternativo porque estamos usando 150, así que eso es solo un poco debajo del blanco aquí, justo debajo del rosa, debajo del blanco sopla el rosa Es consistente, significa que todavía puedo alinear las cosas donde se pone realmente genial es una de las nuevas características de Figma, que haremos correctamente en el siguiente video Barra. Sólo para darte una pista, es el momento porque estás como, qué hace todo esto, ¿por qué se alinea con eso? Porque tienes que hacer esto y estás como, yo puedo hacerlo. Pero y si hubiera una opción debajo de aquí, debajo del texto, los tres puntitos, ahí está esta nueva cosa mágica. Dice la altura de la tapa a la línea base. Mira eso. Todo coincide con la parte superior, así que la parte superior de la gorra, bien, Por eso a esta se le llama lo que hace tapa fría de altura a la línea de base. Bien, entonces es un poco las cosas de línea hasta la altura de la tapa, así que su letra mayúscula, la parte superior y la línea de base es esta línea abajo por la parte inferior aquí solo hace que sea un poco más fácil esto fuera del marco se alinee Pero estamos viendo más en el siguiente video porque es bueno para body copy, pero es increíble para los botones. Vamos a saltar a esa ahora 83. Cómo usar el ajuste de entrada para limitar la altura a la línea de fondo en Figma: Hola a todos. Tienes un botón como este donde dijiste que el acolchado tiene que ser ocho en la parte superior y terminar en la parte inferior. ¿Qué es esta brecha gigante? ¿Y puedo apagarlo? La respuesta corta es sí. Ve a tus tres puntitos y cámbialo a esta cosa llamada altura de gorra a línea base. Mira eso, vamos a sumergirnos en eso un poco más. Bien, cuál es el problema en este cuadro de texto aquí tiene base en la parte superior y espacio en la parte ¿Qué hace eso? Es un problema que se encuentra en cada tipo Programa de Diseño. Es un dolor, pero hay soluciones a su alrededor. Bien. En CSS se llama Leading trim. Plomo como el borde principal de metal. Otra palabra para altura de línea, Figma llama a la hermosa palabra, mientras que tapa la altura a Y puedes dejarlo estándar o puedes tratarlo más como un objeto que tiene realmente a mano. Se pone peor como si hubiera hecho este botón de autolayout. Y nosotros usando into, que es el valor por defecto Figma. Y es razonablemente consistente porque tiene un poco de espacio en la parte superior y hay una distancia igual en la parte inferior. Pero si estoy tratando de usar como su mantenga presionada mi tecla Opción o Alt. ¿Ves? Estoy tratando de usar ocho en la parte superior y en la parte inferior, realidad no son ocho ya que son ocho más otros tres píxeles ahí y otros cuatro píxeles en la parte inferior. Y se pone peor dependiendo de la fuente. Entonces estoy usando más tarde para mi fuente. ¿Ves que éste se hunde aún más? ¿Qué hace esta brecha gigante en la cima? Y mira, hay 13 en la parte inferior. Entonces a pesar de que todavía dice ocho, bien, es un botón realmente descentrado. Y como antes, y la forma de combatirlo, y vamos a golpear Enter para entrar dentro de todo el autolayout Tiene la opción As y podemos elegir altura de la tapa a la línea base o el borde principal. Bonito. Ahora se siente más como 88. Siempre va a haber fuentes extrañas. Depende de la tipografía ver dónde está la altura de la tapa. Bien. Se puede ver la altura de la tapa en este es con la línea azul es que es la parte superior de la letra mayúscula, esa es la altura de la tapa. Pero para esta carta en particular, para B, está un poco por encima de ella. Así que echa un vistazo a algunos otros. La T mayúscula está por encima, están todas por encima, bien, por alguna razón después, el diseñador decidió que B iba a sacar la cima. No son lo mismo para el inter, está un poco abajo. Así que siempre va a haber algo de rareza ahí. Pero creo que esa altura de tope a línea base realmente resuelve muchos de nuestros problemas de diseño, especialmente cuando comenzamos a agregar cosas como iconos Entonces agreguemos un cambio de icono. Dije que voy a marcar. Se va a editar en mi Autolayout. Vamos a quitarnos esta cosa. Así que voy a convertir la altura de mi gorra a la línea base de nuevo a la norma. Y digo autolayout, estás centrado. Lo que notarás es que no hay nada centrado al respecto parece que la garrapata está muy por encima de la B. Y sabiendo cerca de la línea de base, MALO si entro en esto y digo eres el dulce nuevo tope de altura a línea de base, mira ese sinterizado, días pesados campos minados un poquito fuera porque no hay descendientes ¿Puedes ver mi línea de base? He escogido una palabra que no tiene descendentes. Nada va por debajo de la línea. Pero si escribo, eso era un total de huevos. Mirando hacia abajo en mi búsqueda de teclado, ¿qué has hecho? ¿Ya lo ves? Bien, pausa atrás y atrás. Cara de juego en tu Dan profesional. Ya ves que hay estos descendientes. Bien, entonces ahora está un poco más alineado. Vas cuando estás haciendo botones y haces Texto solo para en la altura de la tapa a la línea base, solo tómalo. Aún no puedes encenderlo por defecto. Puedes fijarlo en tus textiles cuando lo estés haciendo, bien, Así que cuando haces un estilo, puede ser parte de eso, lo cual es perfecto. Una cosa que podrías tener que hacer es que si mandas esto para desarrollarlo y ellos lo construyen, termina luciendo así, bien, con cosas un poco poco alineadas, solo habla con ellos sobre que es una clase CSS relativamente nueva llamada Leading trim, no Leading, liderando el lead middle Y si sigues teniendo problemas, puede que sea hasta el Font. Échale un pequeño vistazo. Podría estar haciendo algunas cosas locas que no es controlable codificar. Puedes arreglarlo haciendo clic con el botón derecho y diciendo trazo de contorno Pero ahora no es una fuente, es solo una forma y muy difícil de implementar al alza o al lado del sitio web. A veces solo necesitamos vivir con un poquito de felicidad que vayas Leading, trim o cap height to baseline in Figma 84. Cómo configurar la puntuación para usar en Figma: Hola a todos. En este video vamos a hacer esto donde la Puntuacion esta colgando fuera del cuadro de texto principal Vamos por cotizaciones pull o llamadas. Sencillo de hacer. haces es seleccionar el cuadro de texto que solo funciona para puntuación al principio y luego pasar a tu texto en tu diseño Inspector de propiedades, vamos a ir a los tres pequeños puntos Normalmente digo a lo básico, vamos a ir a Detalles. Y ahí está, ahí Puntuacion Colgada. Boom. Lo bueno que te mostraré mientras escuchamos es que puedes hacer lo mismo con viñetas. Voy a seleccionar los tres de estos. Y en lugar de estar incrustados esta cantidad, podemos ir al mismo lugar bajo Detalles Y justo debajo de eso, ¿ puedes ver listas colgantes? Boom, ellos también se destacan por ahí. ¿Por qué hacemos eso? Hay gente ahí afuera que quiere hacer eso. No tengo idea de lo que quieres esos es pasar por encima de la edad. Sé que había gente gritando a la pantalla yendo, oye, necesito hacerlo por trabajo, o me encanta la forma en que se presenta y está bien porque ya sabes dónde hacerlo Bien, Punción Colgada en Figma, eso es todo . Te veré en el siguiente video. 85. Cuáles son las opciones avanzadas de tipo de Figma: Hola a todos. En este video vamos a ver este menú aquí, escriba ajustes, todos estos ajustes avanzados que van junto con algunas de las fuentes. No vamos a cubrir todo porque algunos de ellos se explican por sí mismos y otros lo son. Es más en el camino de tipografía y la comprensión de los términos tipográficos, pero quiero cubrir los buenos que necesitarás y que sean útiles cuando estés trabajando con type in Figma para hacer Una visión general rápida y podrás profundizar en las que tú mismo encuentres más interesantes. Bien, La primera es que no todas son creadas iguales Entonces tengo tres, en realidad, puedo contar estas cuatro líneas de texto aquí. Lo que quiero mostrarles está bajo la configuración aquí, en es esta primera fuente aquí. Es el valor por defecto para Figma en este momento. Y digo por el momento porque lo han cambiado en el pasado. Entonces lo que encontraremos es que hay debajo de los detalles, hay mucho por lo que pasar. Vamos a cubrir la mayoría de ellos. Pero si voy a la peor de todas mis opciones, esta es una fuente gratuita que encontré en línea. No estoy seguro de por qué elegir esta fuente cactus todo el tiempo, pero se llama Caga Sandwich Y bajo detalles puedes ver me estoy desplazando hacia arriba y hacia abajo. No hay desplazamiento hacia arriba y hacia abajo. Como algunas de estas opciones estarán disponibles para tu fuente y algunas de ellas no. Y sus dos razones. Una es que si tiene forma de cactus, probablemente no va a ser una fuente muy completa. Y el otro es que quizás estés usando la versión gratuita y quizá no la versión pro. A veces hay una provisión de una fuente que le tiene mucha más profundidad. Y muchas veces hay que pagar por esas opciones. Pero encontré a alguien que todos deberíamos poder encontrar K. Estas son todas Google Fonts. Y las fuentes de Google son las predeterminadas que están integradas en Figma. Así que vamos a sumergirnos y echar un vistazo a algunos de esos Ajustes Avanzados. Bien, Entonces dentro a seleccionado, veremos las cosas básicas que no cubriremos. Lo hemos cubierto todo un poco. Los detalles cubrieron un poco de esto. Los que no quiero empezar son los de los que quizás no hayas oído hablar antes. Vamos a comenzar con lo más interesante, que es estilístico se sienta en Esto es realmente aburrido. ¿Ves la diferencia ahí arriba? ¿Ves la a y el final? Eso podría ser muy importante para lo que estás haciendo. Sé que con mis hijos en la escuela, los profesores siempre están buscando una fuente que tenga eso en ella. Terminan usando Comic Sans. Pero para nosotros como diseñadores, algo que quizá sea más interesante es que he escogido una fuente de script. A éste se le llama guión maullido. Muy profesional. Pero lo genial de esto está bajo los detalles, es un Font bastante robusto. Aquí están pasando muchas cosas. Veamos estos conjuntos estilísticos para esto, lo que podríamos hacer es simplemente romperlo por aquí Donde lo vamos a romper . No lo sé. A lo mejor te consiga Comando o Control D, D, D, para echar un vistazo a este y solo comparamos algunos de ellos. Entonces cuando se diseñó esta fuente, el tipógrafo o equipo de tipógrafos, no estoy seguro Ellos conformaron algunos otros conjuntos, sets estilísticos. Entonces echemos un vistazo a las alternativas estilísticas. Se ve ahí entre eso y eso, tanto de eso cambia. Entonces podrías llegar a un punto donde te guste, me gusta esta fuente pero la ayuda no lee bien. Había una alternativa, yo alternativa estilística llena esa fuente Entonces es hacer eso primero y mirar los diferentes sets porque estas son todas las alternativas y esto es como un grupo de ellos que van juntos. Aquí hay muchas opciones diferentes, así que puedes convertir esta en la diferencia. Veamos este de aquí, el tercero, o miremos diferente que como podrías ser como, sí, eso es lo que necesito. Me gusta el flujo pero todos los bits wiki directamente no funcionan para ti Bien, así que no voy a entrar demasiado en ello aparte de especialmente las fuentes de script. A menudo puedes encontrar algunos conjuntos estilísticos realmente geniales y construir algunas formas pequeñas realmente geniales Y sobre todo si estás tratando de hacer tal vez algún texto de héroe o algunos logotipos o algo más interesante. Y solo en comparación que encontré esa porque estaba razonablemente avanzada. Bien, este de aquí es INT. Así que vamos a seguir adelante y mirar aquí. Echemos un vistazo a los sets estilísticos. Sólo hay uno. ¿Qué hace? Tiene que ser un conjunto estilístico de miradas como el único de xi Y puedo simplemente encontrar que no tiene ninguna, ni siquiera las z's. El siguiente que es algo interesante son los compañeros de Kooning. Entonces usaremos esta fuente. No tenía ningún conjunto estilístico, tipografía BAD. Pasé y sudo mucho tiempo con. Echemos un vistazo a los detalles. Busquemos estilo, Kooning. Ahí vas. Espaciado horizontal, pares de limpieza. Está activado por defecto, lo que hace que se vea bien. Puedes apagarlo. ¿Qué termina pasando aquí? Es interesante ver que normalmente la T y la Y en esta distancia tan alejada, Eso es solo un poco ellas espaciadas como personajes Lo que decía la tipografía es si una T, T mayúscula está al lado de una minúscula Quiero que te metas bien y apretado. Como un bien es por eso que podrías estar usando algún tipo de como, no sé, algunos plugins en Figma o usando tal vez una herramienta Sé que tengo uno que uso para mi cortador de vinil aquí que no aplica a todos los compañeros Kooning. Entonces todo el tiempo esto termina luciendo asqueroso. Bien, así mismo con este de aquí. Tiene compañeros bromistas. Bien, es muy leve. Veamos este de aquí. Encendido, apagado, apagado Nada pasa en esa. Creo que probablemente le vendría bien un poco en algunos lugares. Oye, ¿qué sabría yo? Eso son los compañeros de Kooning. Bien, el siguiente que está en estas llamadas ligaduras, voy a dar click en el guión del cojín Y con ella seleccionada aquí abajo en los detalles para echarle un vistazo. Hay una llamada formas de letras y hay ligaduras para quienes no saben qué son las ligaduras Básicamente lo que termina pasando es encendernos y apagemos. ¿Ves que esta , la F y el ojo, cuando está junta, la fuente y Figma van, oye, la tipografía, dije, si estas dos letras están juntas, estas dos letras están juntas, quiero que las cambies a esta opción de aspecto más elegante? Bien. Es lo mismo si no lo hay. Si como ves que cambia automáticamente es porque la tipografía dije que no quiero, y si un búho mira, no quiero que hagan esto cuando se junten Opción de sostener y usar mi tecla menos que para hacer mi pequeño espaciado. ¿Ves que se pone un poco? ¿Qué hace eso ahora? Bien, entonces fueron y dijeron, bien, vamos, cuando se junten, hagamos magia de ligadura Oh, genial. Depende de la fuente. Algunas fuentes no tienen ninguna. Como sé, incluso este de aquí, voy a entrar no tiene ligaduras ni siquiera la F y la yo creo que uno sí, y voy a patear a este definitivamente no va a, porque es difícil vencer a la perfección Si yo. Algo más que es bastante útil es cuando estás haciendo con números, veamos dos cosas. Así que en, de nuevo, una fuente realmente compleja, increíble de usar porque tiene mucha profundidad con los números seleccionados voy a entrar aquí. Y éste de todos ellos es el único que tiene, ¿qué tiene? Tiene variantes de carácter. Y lo que podemos ver aquí es vamos, tiene una alternativa. Así que, en realidad, veamos acercar este. Bien, veamos la diferente. Porque cualquiera, oh, mira el cambio único, puntiagudos QB o mejor dicho para ¿necesitas un abierto para ropa para Bien, a veces no son solo números. Mira esto con el texto real aquí. Hay una cola minúscula para la L. Bien, puede encender y apagar eso Bien, entonces esto no va a cubrir todo lo que puedas hacer en esta fuente. Es más para mostrarte que algunas fuentes tienen mucho control y algunas de ellas no intentan elegir una buena fuente body copy puede ahorrarte algunos dolores el camino cuando tienes que lidiar con diferentes idiomas, tal vez notaciones científicas, o tu cliente realmente no le gusta eso Seis, ahí vamos. 26. Sí, lo que es útil para los números es que bajemos a uno de los otros. Esta de aquí, la fuente que estoy usando después. Bien, vamos a echar un vistazo aquí. No tiene los juegos de caracteres, lo que sí tiene bajo números, este número estilos. Y echemos un vistazo a esto. Volvamos y luego los estilos numéricos. ¿Ves la diferencia entre eso? ¿Éste? Bien, un estilo de números muy diferentes. ¿Puedes ver las diferencias ahí? Principalmente con el. Entonces nos metemos en esta opción donde es mono-espaciado, monoespaciado es, para que podamos tener diferentes números siempre y cuando la misma cantidad de caracteres que se alinearán, ¿ puedes ver números diferentes y ahí se alinearán Y ese no siempre es el caso de diferentes fuentes. Digamos este de aquí. Voy a deshacerme de cuatro caracteres, pero Escriba uno es porque no es monoespaciado, que la misma cantidad de dígitos, pero es muy difícil compararlos. ¿Dónde está mi Leto? Puedo encender eso. Entonces es monoespacio, tal vez no como rey ordenado, así puedo bajarlo para que todo encaje ahí muy bien usando este primer estilo, pero puedo usar este estilo modelo y todo se alinea muy bien Hay otros aquí. ¿ Alguna vez tienes una fuente que te guste? ¿Por qué está colgando? Bien, este, probablemente tenga más de ellos. Puede ir. Algunos de ellos están arriba, algunos de ellos están abajo. No soy fan de ese estilo de tipo. posible que desee encenderlo, o puede que tenga una fuente que tal vez quiera apagarla. Sepa que puede entrar aquí, otra vez, todos van a ser diferentes. Algunos tendrán el espaciado mono activado por defecto y no hay forma de apagarlo. Es por eso que muchas veces los diseñadores terminan enamorándose, o al menos como seguridad, de una fuente que les gustó el aspecto de. Y saben que puede ser bastante útil y saben que no les va a dar dolores de cabeza más adelante. Bien, esa es la visión general aproximada de las cosas que miro un poco a día, pero las cosas que conozco son bastante útiles cuando estoy trabajando Ahí hay mucho más. Así que echa un vistazo a tu alrededor, mira cuál es tu fuente Scott, podrías tener que investigar algunas fuentes y decidir de todas formas, vamos a seguir adelante con la fuente cactus donde está V, ahí está pateando su Sandwich de por vida No estoy seguro de por qué estoy cogiendo este teléfono. Principalmente porque tengo que facilitarme el Comic Sans y el guión de pincel, la IGA. Bien, eso es. Te veré en el siguiente video. 86. 86 Tipo variable: Las fuentes variables son increíbles. Eso es lo que vamos a hacer en este video. Voy a explicar lo que son para la gente que no sabe lo que hace. Y luego explicaremos tipo de razones por las que se están volviendo cada vez más populares en el diseño de UI, tanto por su flexibilidad como por cosas como el tamaño de los archivos y cómo podrían implementarse en CSS. Y luego voy en una gran tangente sobre fundiciones de fuentes independientes y por qué deberías usarlas Entonces sí, eso es hacia el final. Bien, eso es todo. Vamos a meternos en fuentes variables porque son increíbles. Bien, entonces algunos de ustedes saben, fuentes variables podrían estar usándolas. Yo sólo quiero señalarlos de alguna manera. Y señalarles por qué son tan útiles y cada vez más populares en el tipo de diseño de aplicaciones y diseño web. Bien, primero, ¿qué es la fuente variable? Esta fuente que he estado usando, escojo lato. No es una fuente variable. Cómo sé si hago clic en la configuración de tipo pequeño aquí, no hay una pestaña extra que diga variable. Tengo una gran cantidad de pesos diferentes, ¿de acuerdo? Y diferentes itálicas, diferentes inclinaciones sobre ella. Hay una fuente muy buena, me va a ir bien. Pero si tengo la oportunidad, estoy muy emocionada. Cuando elijo una fuente que me gusta esa también es variable, ¿qué aspecto tiene? Así que esto está en el default, ¿de acuerdo? Y éste es variable. ¿Bien? Lo que significa es que tengo lo mejor de ambas palabras, tengo la opción de ir directamente a negrita. Bien, para esta primera frase de aquí. Pero digamos por el título que quiero tal vez Bold. ¿Bien? Pero en realidad, ¿ves que hay todos estos pequeños ajustes en el medio? ¿Ves cuando arrastre esto, puedes ver el título? Mira cuanto control tengo. Bien, solo hay tantas fuentes. Estamos como, negrita no es lo suficientemente audaz, y el negro termina siendo demasiado , ya sabes, demasiado pesado. Entonces quieres volver a como si hubiera un poquito en el medio. ¿Y por qué es útil esto? Me permite mucho control, bien, para el diseñador de TOC en mí, pero también cuando se trata de implementación En el lado del código ya sea para la aplicación o el sitio web, variable. Las fuentes son más grandes, naturalmente. Déjame mostrarte una fuente con la que me faltaba hoy. Bien, esta fuente de aquí, Job Clarendon. Y lo que termina pasando es que hay dos versiones de esta fuente. Hay esta versión que es tu normal, o es esta de aquí, lato, bien, saltando entre todas estas, ¿de acuerdo? Solo hay un montón de opciones diferentes. Eso es todo esto. Los instalas todos. Y si las usas todas, bien, la persona que construye tu app o tu sitio web tiene que llamar a todas estas fuentes k para que funcione, ¿bien? Mientras que esto es más grande, se puede ver aquí. Ves los kilobytes. Es mucho más grande que esta fuente variable, pero tiene todo esto horneado y todos los bits intermedios. Y es muy común cuando estás haciendo, digamos, una fuente body copy tener al menos cuatro de estos de todos modos. Entonces terminas inventando el tamaño de eso. Ya sabes, las fuentes variables son más grandes seguro, pero cuando necesitas cuatro pesos diferentes de todos modos, terminas subiendo a ese tamaño y en realidad pasándolo mucho a menudo. Así que las fuentes variables mantienen el tamaño del archivo bajo y te dan un montón de control adicional para ese tipo de casos de borde. En realidad solo necesitamos que sea tal vez la accesibilidad sea incorrecta para esta tarjeta en particular, necesitamos simplemente aumentarla un poco más para que sea más visible en el fondo. ¿Se requiere? No, es agradable tenerlo, pero siempre es algo que estoy buscando. Y la otra cosa que quiero señalar mientras estamos aquí es que hemos estado usando Google Fonts hasta ahora. Bien, eso es lo que se hornea en Figma. Pero también hay montones de otros en todo el mundo. Bien, De tipógrafos independientes. Y solo quiero señalar, como estoy señalando, David, Jonathan Ross para esta, solo porque me topé con una de sus increíbles fuentes Y este de aquí, hay una prueba gratuita. Y sí, hay que pagarlo si necesita entrar en producción. Bien. O úsalo para clientes. Pero creo que como diseñadores de Ux, estamos consiguiendo, no sé, estamos llegando a abrir Sands. Roboto es donde ya no hay amor en las fuentes. Así que puedes encontrar grandes fuentes y también hay grandes fuentes variables como esta de aquí que se descargan. Es genial y variable. Y solo mira mucho que tenemos en esta , la cabaña de esta. Bien, Este es de Google, así que estará en tu lista desplegable. Voy a cambiar a mi nuevo. No te puedo dar la fuente porque es algo así, puedes obtener una prueba gratuita de esta fuente. Mira lo genial que es. Bien. Puedes ir a su sitio web aquí, Jar.com Bien, hay una prueba gratuita para ir De lo contrario, experimenta con una fuente de Google. Y por el momento también, realmente no se puede averiguar qué es variable. Espero que el enchufe de vista previa de fuente lo tenga como opción. Aguanta el teléfono, Lo han actualizado. Ahora puedes encontrar qué fuentes variables podrías tener ya. Bien, entonces con el texto seleccionado, haga clic en la fuente y por defecto será todas las fuentes. Puedes hacer click en esto y decir, en realidad muéstrame las fuentes variables y te muestra todo lo que tienes en términos de variable A. Mucho más práctico. Escojamos uno. ¿Bien? Entonces lo he escogido, ahora vuelvo a las propiedades, bien, los puntitos. Y puedes ir a mirar, es variable y ahora puedo jugar con ellos. Este es solo el peso, pero mira lo genial que es. Hombre, me encantan las fuentes variables. Todo bien. Una última cosa antes de que sigamos adelante es que probablemente lo acabas de ver. También hay fuentes populares. En Google Fonts, puedes separar por diferentes cosas. Eche un vistazo, podría haber cosas nuevas ahí ahora, pero eso es súper práctico. Voy a volver a todas las fuentes, ¿de acuerdo? Entonces están todos ahí. Nuevamente, lo deseo y ellos entregaron. Gracias, Fg. Bien, continúe. Y pero también puedes volver a Google Fonts y hacer lo que hice y solo decir muéstrame algo que es solo fuentes variables y puedes tipo de ver si tiene dos ejes o un eje. ¿Qué son dos ejes? Déjame deshacer eso. Entonces la cabina es un buen ejemplo de esto. Vamos a entrar bajo variable. ¿Puedes ver el peso y el ancho? Bien, me encanta cuando hay ancho, sobre todo para apps, la pantalla inmobiliaria, es muy pequeña. Hay que meter algunas cosas. Entonces tenemos Techno en bicicleta para el nombre de este tipo de eventos Pero si hay algo más largo, estoy un poco atascado rompiendo en dos líneas, teniendo una palabra cuenta con eso. Mira esto, puedo agarrar esto. No estoy seguro si tengo suficiente espacio, pero ¿lo ves? Puedo usar algo todavía no hay suficiente espacio, pero me da la posibilidad de encajar más mecanografiando en la parte superior aquí. Y todos son diferentes, algunos anchos van muy, muy bajos Y me encanta esa capacidad de mantener el mismo tema de fuente, mismo estilo, pero poder disminuir o aumentar el ancho. Y este de aquí, también tiene pesos. Este baja a 400 K y solo hasta 700. Bien, pero miren eso. Voy a volver a mi trabajo uno, sólo te voy a mostrar. Llévalo en bicicleta pero convicto en. Todo bien. Déjame simplemente hacer rápidamente un par de ejemplos que se ven lo mucho diferente aunque, como cuánta comunicación obtienes con una fuente variable. Al igual que puedo usar la misma fuente, mantener los tamaños de archivo pequeños, pero hacer algunas cosas muy diferentes con mis encabezados puestos. Variable. Las fuentes son razonablemente nuevas, así que si estás trabajando con un desarrollador, tal vez tengas que decir, oye, estoy usando una fuente variable, así que vas a ver todo tipo de tamaños locos. Normalmente estarían esperando ver 700 o 300, pero les has dado 7603 porque es perfecto para lo que quieres hacer Podrían simplemente tirarlo a 700 porque son como, ¿cómo consigo 7603 No es difícil, es solo una clase CSS. Fácil de entender pero es posible que tengas que recordarles o simplemente al menos señalarlos en la dirección correcta. Bien, eso es. Tu otra investigación es ir en Youtube techno en una bicicleta o drum and bass en una bicicleta A ese tipo me encanta. Da vueltas, toca música. Un montón de gente le sigue. Es muy divertido. De todos modos, fuentes variables. Las fuentes variables son increíbles. Si no sabías de ellos, de nada. Si sabías de ellos, ojalá eso te dé un poco de información para que puedas venderla al proyecto. Tal vez mire pagar por una fuente de una fuente independiente. Bien, hablando de tipógrafos independientes, te voy a dar los que sé que usan Y puedes avisarme en los comentarios, los que haces, para que podamos como que sacar un pequeño tirón. Entonces David, Jonathan Ross, alguien acaba de descubrir recientemente vínculos oliveales a esto en la parte inferior del expediente de ejercicio Clem, un compañero kiwi, un hermoso sitio web y hermosas fuentes y grandes en la escena Así que ve a ver los sitios web de Chris. Llama a Clem.com en CJ también. Alguien que conozco y hace fuentes muy geniales. A mí también me encanta usar su obra y el tipo Blaze. Es más una colección de independencia. Sí, cosas realmente geniales. Hay cargas ahí fuera. Entonces tal vez explore algo fuera de Google Fonts para su próximo proyecto. Sí. Todo bien. Eso es. Te voy a ver en el siguiente video. Go, Fuentes variables. Guau 87. Cómo curvar texto con texto en una ruta en Figma: Hola da lo que vamos a hacer. Adivinaste bien cómo curvar el texto, Figma, algunas personas lo llaman escribir en un camino envolviendo texto alrededor de un círculo Te voy a mostrar que Figma no lo hace de forma nativa, pero podemos usar un plugin, veremos las limitaciones de estos plugins y luego te mostraremos cómo hacerlo en Illustrator y traerlo Bien, vamos a un poco de texto, ¿verdad? Primero, necesitas algo de texto. En segundo lugar, necesitas una curva. Voy a usar la P para la herramienta pluma. Voy a hacer clic hacia arriba y arrastrar y hacer clic hacia arriba y arrastrar para obtener algo curvilíneo Y voy a golpear escape un par de veces para salir del modo de dibujo, y voy a combinarlos. Ahora Figma en sí no hace tipo en una curva. Entonces necesitas usar un plugin. Voy a usar a path parece ser el más común en este momento. Entonces cuando uso tiene algunos bichos, ¿ estará por ahí cuando estés mirando esto? ¿Quién sabe pollito? A ver si corre. Tal vez haga una búsqueda de texto tipo en una ruta o curva de Figma y vea cuál aparece. Pero este de aquí en este momento funciona razonablemente bien. Es como estas dos cosas. Y voy a decir link, y luego vas curvar texto en Figma. Hagamos la circular y luego nos sumergiremos un poco más y veremos dónde se rompe. Bien, voy a agarrar esta. Y ese plugin en particular no funciona para dar vueltas por completo. Así que vamos a usar ya que hay uno llamado Arc, hemos buscado unos plugins anuales. Nuevamente, esto no está aquí. Entonces si puedes encontrar uno que sea, puedes ver la vista previa aquí abajo, pero puedes verla aquí arriba. Y puedes ver cómo, cuánto quieres dar la vuelta a Woo-hoo ¿Bien? Ahí tienes, al 100%. Entonces es un círculo perfecto. Y luego vas por el, vas un poco solapado extrañamente Entonces todos estos plugins, éste y éste, solo quiero señalar que hay errores llenos, genial, que alrededor y me preguntan montones de gente que como hacer esto y puedes hacer que funcione en Figma usando esos plugins Así que los plugins mejorarán. Eventualmente Figma lo haría. Pero vamos a ver, vamos a uno aquí. No lo sé. La vista previa parecía que estaba chocando muy bien en la parte inferior, pero ahora está superpuesta ¿Puedes ajustar eso después? No se puede. Pero podríamos volver a hacerlo porque lo hace duplicado de él cuando lo hace. Entonces algo de rabiosidad, este de aquí tiene más peculiaridad. Sin embargo, lo genial de esta curva uno, es que con su seleccionado, puedo abrir mi plugin anterior, que se llama path. ¿Cómo se llamaba camino? Vamos a ejecutarlo. Bien, puedo seguir ajustándolo. Mira esto. termina haciendo algunas cosas graciosas que te gustan. ¿Qué es eso? El gran líder ahí. ¿Se puede ajustar la iluminación sobre la marcha? No se puede. Puedes hacer algunas cosas locas con como En realidad antes de que nos vayamos de aquí, hay un desplazamiento de píxeles. Así puedes empujarlo y volver a cero. Puedes alinearlo a la derecha. Se puede aprender en el centro. Y el desplazamiento aquí puedes decidir que va de cero, que está debajo a, voy a usar mi flecha hacia arriba a 0.1, 0.2, 0.3, 0.5 está a mitad de camino Y puedes ir todo el camino hasta uno. Si tu curva va de esta manera, puedes jugar con una alineación horizontal. Pero digamos que eso es hacer algunas cosas raras. Volver a mi offset siendo uno. ¿Cómo soluciono eso? Se puede hacer una solución alternativa. Bien, me voy a frustrar con esta alternativa y luego solo he estado en Illustrator, mostrarte cómo hacerlo porque esto está sacando de esto y están vinculados gay Así que voy a entrar aquí e ir a usar mi dulce atajo. Recuerda el cursor parpadeando entre cualquier cosa y listo. En realidad voy a seleccionar todos estos, tal vez solo esos. Y voy a mantener pulsada la tecla Opción en mi Mac, tecla alt en una PC. Y voy a usar los símbolos mayor que y menor que para abrirlo y estás como que eso no es suficiente. ¿Cómo? Porque no se actualiza dinámicamente. Pero ahora puedo abrir ese plugin Opción de Comando P. Tener este seleccionado y se puede ver que tipo de rechazarlo cuando se mira. Tengo la F y la clase de trabajo. Y ahora puedes pasar tu tiempo volviendo y diciendo en realidad, Vega, necesitas más y necesitas menos. Necesitas menos. Y España cae. Y al hacer eso, y cómo eso va bajista. Y lo que terminaría haciendo es frustrarme y simplemente saltar a Adobe Illustrator, que sé que no todos tienen. Voy a borrar mi texto ahí porque vas a copiar eso. Ilustrar es un producto más maduro para hacer este tipo de cosas al saltar de nuevo a Figma. Así que de nuevo, voy a usar mi herramienta Pluma, clic y arrastrar hacia arriba para obtener el mismo tipo de curva, desplazamiento X para cambiar el relleno al trazo. Usa la T para la Herramienta Tipo y mira esto. Si solo me cierras encima de él, el bonito texto en un camino Aquí vamos. Pega eso. Bien, lo hicimos usando Illustrator con el curso Figma y Essentials Pero una cosa que podrías encontrar es si copio esto porque está en algo tan extraño que Figma no reconoce cuando pego, solo viene en todo pixelado. Bien, simplemente no estuvo bien. Lo que quiero hacer es hacer un duplicado. Quiero esbozarlo. Estoy usando todos los atajos aquí, K Shift Command 0 o Control Shift 0 para delinearlo. Ahora puedo copiarlo. No es editable ahora en Figma, pero al menos como Victor, agradable y escalable y bueno Y solo la forma en que trata con el tipo es mucho más, mucho más mejor que tener que intentar hacer eso para que eso suceda. Vuelven a esa misma cosa con un círculo. Probablemente saltaría a Illustrator. Agarra mi herramienta elipse, mantén presionada la tecla Mayús, arrastra un círculo, agarra mi herramienta de pluma y haz clic No en eso porque va a entrar. Quiero encontrar ese tipo en una ruta para centralizarlo por defecto. A veces no se detiene el mío sobre ellos, luego te vas. Es bastante bueno. Por defecto, había muchas más opciones en Ruta de objeto, tipo, tipo en una ruta. Y se puede entrar en tipo en una ruta de opciones. Y hay mucho más que puedes hacer aquí. Asegúrese de que las previsualizaciones estén bien, y nuevamente, delinearlo y llevarlo a Figma. Los plugins son buenos consiguiendo Figma y un poco empujaron los límites de lo que hace y van a mejorar Y Figma presentará algunas de estas cosas en sí. A veces es más fácil salir a ilustrarlo, pero sé que no todos tienen Illustrator. El programa contará con las habilidades y el ilustrador. Pero me parece que como diseñadora de UX, hablé de ilustrar un poco para hacer, especialmente el dibujo de ilustración superior y un camino. Entonces podría ser el siguiente curso después de este, tengo un curso para Illustrator. Hay un Essentials y luego avanzado. Si quieres ir ahí, lo encontrarás en el mismo lugar. Ya tienes esto. Solo busca los elementos esenciales de Illustrator o venta cruzada avanzada de Illustrator hecha Bien, eso es todo. Te voy a ver en el siguiente video. 88. Cómo usar fuentes de adobe y fuentes locales en Figma: Hola a todos. En este video vamos a instalar fuentes adobe en Figma. No están ahí por defecto, y son un poco dos vías Empezaremos con la versión de escritorio de Figma, bien, que se descargue e instale en su máquina Y luego haremos la versión web. Son ligeramente diferentes. Ahora, adobe fonts es una parte paga de la licencia de Adobe. Si no tienes esta suscripción paga y te saltas este video, no puedes usar las fuentes de adobe, o al menos solo puedes usar las gratuitas. Y muchas veces las gratuitas ya están instaladas en Figma de todos modos, porque Figma usa fuentes de Google como base, esas son fuentes de uso comercial gratuito, pero tenemos una suscripción a fuentes de Adobe y la biblioteca es mucho Algunas fuentes realmente geniales aquí. No quiero usarlas. Entonces, antes que nada, necesitamos encontrar una fuente Adobe. Puedes empezar por, tengo como la aplicación Creative Cloud abierta en mi Mac aquí, ábrela en PC, un poco necesito esto abierto Y puedo ver que puedo manejar mis fuentes. Entonces, antes que nada, ¿no es tan útil encontrar una fuente en Creative Cloud? Simplemente puedes ir a este sesión de fonts.adobe.com con tu nombre de usuario de Adobe y olvidar tu y olvidar Ha sido un solo intento de restablecer eso. Finalmente entra y luego encuentra una fuente. Voy a ir a las fuentes navegables, y va a escoger algo al azar Buscaremos fuentes Variables justo en la parte superior porque es importante e ignorarlo. Y yo voy a recoger, y voy a escoger uno, espera ahí. 10 h después. Elige cualquier fuente. Bien, he decidido así , rock grotesco Entonces todo lo que necesitas hacer es activar la fuente. ¿Lo necesito todo? Voy a encenderlos a todos. Porque puedo hacer esto desde el sitio web, ¿verdad? Envía una señal a tu aplicación Creative Cloud. Y ojalá en un segundo, oye, mira, ahí está. Y va a empezar a activarlo. Genial. Así que ahora está disponible como toda mi máquina local en mi computadora portátil. Oh, aquí está el resto de ellos. Pero te darás cuenta en mirar Figma, si agarro esto y digo en realidad Rock, no hay fuente rock Tarea basculante. Entonces, lo que hay que hacer, Alemania es solo abrir y cerrar Figma. Así que adiós Figma, volveré. Figma. Y ojalá ahora debajo estén bien. Ok, somos grotescos. Ahí está ahí. ¿Qué tan genial es eso? Es una fuente variable. No lo es. Pero viste que había muchas opciones. Agradable si todavía no funciona o te encabeza las fuentes que estamos trabajando y ahora no lo están. Lo que hace Creative Cloud es porque puedes instalar un trillón de Lo que hace periódicamente, va y dice, nadie usa esta fuente en mucho tiempo. ¿Se puede ver activo anterior? Bien, este diseño podría cambiar. Es posible que tengas que buscar fuentes previamente activas o inactivas. Entonces ya he usado esto antes, pero todos han sido apagados. ¿Por qué? Porque cuando estoy cargando algo como Photoshop o Illustrator, si tiene las reglas de carga fuentes como parte de su inicio Y cuando tienes como un bazillion, se necesita para siempre, lo que hace es ir, furtivamente sin preguntar va, no has usado esto en Se va a quitar estos y tener la apariencia de cargar más rápido. Se carga más rápido. B podría encontrar que algunos de ellos se apagan. Así que podrías haber venido aquí y decir que en realidad vuelve a encenderlo. Bien, y cambiará al menú Fuente activo. Y entonces tendrás que cerrar Figma, vuelto a abrir de nuevo. Avísame si tienes algún otro problema en los comentarios con la versión de escritorio. El gran problema es asegurarse de que Creative Cloud, la aplicación de Adobe esté abierta y Jiminy se instale con todo lo demás. Y solo asegúrate también, y asegúrate de que has reiniciado Figma, ciérralo , ábrelo de nuevo. Bien, para las personas que usan la versión del navegador, voy a saltar a Figma. Bien, entonces la versión del navegador, más o menos exactamente la misma que la versión de escritorio, se ejecuta en las mismas cosas de backend. Lo que hay que hacer para asegurarse de que esto funcione son dos cosas. Necesitas ir a tu cuenta. Vaya a la configuración y debajo de las fuentes aquí, asegúrese de que las fuentes locales estén habilitadas. Si eso se hace, necesitas algo más. Bien, Si vas a Figma slash downloads, cuales son las opciones aquí dentro serán los instaladores de fuentes Así que elige tu Mac o PC venenosa. Recuerda que esto no es obligatorio si vas a estar usando la aplicación solo para escritorio, generalmente solo la instalo también porque hay montones de veces que estoy trabajando en proyectos de otras personas y termino trabajando en el navegador sin saber porque funciona. Entonces, de manera similar, instala eso y luego necesitas actualizar tu navegador. Entonces aquí en Figma, abres tu documento y presionas refrescar Si eso no funciona, ciérrelo, abra una copia de seguridad. Ahora estoy usando Chrome aquí, y eso es lo que sugiere Figma Se ejecuta en diferentes navegadores. Si no tienes más rareza, tricromo, guardar efectos, Porque creo que eso es lo que Figma apoya más que nada que pueda estar causando tu problema Y a partir de aquí, es exactamente como la versión de escritorio. Inicia sesión en tu cuenta de Adobe, eliges algunas fuentes, las activas, asegúrate de que Creative Cloud esté abierto en tu computadora. Ojalá los encuentre en las fuentes activas, y luego vuelva a cargar el navegador Deberían ser una forma, bien todos, así es como meter nuestras fuentes de adobe en todos los archivos Figma. Bien, eso es. Te veré en el siguiente video. 89. Cómo preservar las anulaciones de texto o las que no se usan en la variante de Figma: Hola a todos, Bienvenidos al video con nombre medio más aburrido de todo el curso. Cómo conservar las anulaciones de texto o no. En las variantes de Figma, esa melodía pegadiza es porque quiero que estos videos sean buscables y los encontrarías difícil para saber cómo los llaman a veces y a veces terminan siendo títulos apestosos Pero, ¿vale la pena tu tiempo viendo? Totalmente lo es. Te voy a mostrar las dos opciones por defecto, lo que pasa en Figma es si cambio este texto, esta es una instancia con una variable Hay dos de ellos, uno, para comenzar una pequeña Tidal, pero en realidad tienen diferente cantidad de personajes que pueden usar Por defecto, lo que pasa es que si voy y cambio este tipo de listado premium que se permiten más personajes, y voy y lo cambio a esta otra variable, los textos persisten, viene lo largo para el paseo, y ese es el valor predeterminado Normalmente eso es lo que quieres, pero no en esta. Quiero que el usuario de mi componente aquí sepa que hay cierta cantidad de caracteres. No quiero que se cambie automáticamente, y eso es lo que va a hacer este. Bien, puedo cambiar el texto aquí en el premium. Pero si lo cambio a la otra variante, ¿ puedes ver las garrapatas? Entonces esa variante viene y anula lo que escribí allí originalmente Eso es lo que quieres la mayor parte del tiempo, solo continúa. Pero hay momentos en los que necesitas que el texto cambie entre la varianza Déjame mostrarte cómo hacer eso. Bien, la acción predeterminada para Instancias es probablemente la correcta Y por derecho uno, quiero decir esto, voy a alargar una instancia. Y si cambio el texto aquí para apuntarme, y luego voy y cambio a una de estas otras variables. A pesar de que estas variables dicen que es botón principal, mi cambio de tics es persistencia. Entonces voy a ir aquí y decirle estado a Holla. Usó el color de fondo y tal vez el tamaño también. Pero el texto es persistente decaimiento que el texto anula que hice continúa a lo largo Pero hay momentos en los que no lo haces. Entonces voy a saltar a mi otra página. Bien, entonces lo que tengo aquí es que tengo dos listados de eventos y podemos elegir entre uno premium y uno regular, usar obtener menos caracteres y no solo escojo una fuente ellos. Y mencioné que van a ser empujados a la cima. Y para ir al persecución, lo haré correctamente, pero al persecución básicamente si tengo este llamado mensaje y este de aquí llamado mensaje por lo mismo convertirlos en variantes. Figma asume que hay intercambiables. Sólo se les llama mensaje. Si les nombras algo diferente, se anularán entre sí. Hagámoslo por si acaso eso no estaba claro. Voy a manchar este. Voy a meterlo en un marco. Opción de Comando G, Opción de Control G. Lo mismo con esta. Es como los dos. Y vamos a convertirlo en un componente sit up hasta ahora hemos estado haciendo un componente y agregando una variable. Lo usamos de una manera diferente para mezclarlo. Entonces veamos como funciona por defecto de manera incorrecta, voy a mantener presionada mi tecla Option, arrástrela una instancia. La persona que usa esto puede pasar y decir, bien, voy a agregar mi listado elegante ¿Deletrearlo bien? Y ellos pueden ir a escoger, en realidad, escojamos una variable diferente. Puedes ver que cambia, pero el evento de listado sigue siendo Leah Y si lo ponen en uno realmente largo, como pueden hacer en el premium, se van a quedar sin personajes. Va a romper mi diseño. Entonces, ¿cómo lo consigo para que cambie al texto enumerado en este otro Como recordatorio, para dar a todos un recuento de personajes para trabajar también, todo lo que tenemos que hacer es decir esto aquí. Comando clic, Control, clic. Bien, dice mensaje. Vamos a Comandar o Controlar R. Renombrarlo. Vamos mensaje, este es nuestro premium. Este de aquí va a ser regular. Vamos. Ahora restablecemos esto. Usted dijo que todos los cambios. Cambiémoslo a nuestra versión premium. Ahora alguien pasa por, bien, lo cambian y están como, Oh genial, voy a usar esto de nuevo para otra cosa. Y voy a ir a decir que voy a usar una versión más pequeña. Mira, los ticks se vuelven a cambiar a este listado de eventos y básicamente se debe a que los nombres de las capas sean diferentes. Eso es. Ahora bien esto podría estar trabajando en tu contra, alguien como eres, ¿por qué sigue cambiando? Puedes volver atrás y simplemente renombrar estos en el conjunto de componentes, bien, encuentra la Variable y solo asegúrate que tengan exactamente el mismo nombre. Bien, así que ese es el final del Video mejor nombrado en este curso Cómo conservar las anulaciones de texto o no en Figma Variables. Útiles. Traté de hacer que estos títulos fueran buscables. Para que puedas entrar en Búsqueda y el curso de averiguar dónde están Hombre, ese es un título realmente poco sexy pero útil. Bien, eso es todo. Te veré en el siguiente video. 90. Cómo usar la IA de Chat GPT para crear marcadores de posición y personajes en Figma: Hola a todos. En este video vamos a ver la inteligencia artificial, en inteligencia artificial, particular Chat GPT para crear contenido de marcador de posición y otras tareas de UX en Y si estás rodando los ojos ve y no U2 AI, sí, yo soy ese tipo. Vamos a quedarnos. Te voy a mostrar que es bastante útil, sobre todo si eres amante de Loren ipsum En realidad rápidamente creamos listados de eventos, algunos ficticios. Vamos y le preguntamos a Chat GPT qué características serían en una aplicación en particular Entonces te pedí que crearas una persona, alex. Los resultados son bastante sorprendentes. Si nada más, hay un gran punto de partida o lo estoy usando todo el tiempo para cosas como esta donde necesito darle estilo a algo en cada uno algunos contenidos y no es solo Loren ipsum estará en el sitio no ha cambiado en 1 millón Entonces Chat GPT es increíble para esto. He escrito algo así como cosas predefinidas, pero solo lo escribo. Es increíble lo bueno que lo consigue. Así que he pedido un evento ficticio, escuchar un evento techno en limerick se convierte en la ubicación de la fecha del título Es espectacular esperar para terminar. ¿Qué tan bueno es eso? ¿Mirar? Listo para remar. Y entonces puedes hacer cosas como un poco simplemente, no lo sé Digamos que lo necesito por 200. Hagamos 300 caracteres o menos, caracteres o menos. Un poco dejar que haga su magia. Pasas por cien caracteres o menos. Ahora esto es gratis, alguna manera mágicamente, puede que no sea cuando lo estás haciendo. Chat GPT podría no ser lo que en el momento estoy muy contento con él, Digamos que quiero tres variaciones de eso para mis listados Y voy a acelerar a través de esto. Mira esa variación 12.3, todo único. Tenga cuidado de no usar esto en un sitio en vivo y todo su cuerpo copie en sus ticks para un sitio web, sé que Google error verificando y castigando las personas que usan contenido creado por IA No estoy seguro de cómo se va a asentar todo ese polvo, pero mi consejo es que no lo use en un sitio en vivo es realmente bueno para otras cosas también. Digamos que voy a otro, como cada vez que estoy empezando un breve, en realidad estoy diseñando esta app. Eso es lo que hice para este curso en particular. Estaba como si escribiera algo así. Y en realidad no quiero regenerar en un nuevo chat. Y esta va a ser dame diez características principales para un listado de eventos. Y podría hacer esto y solo me lleva media hora y ahora, pero es bastante espectacular lo cerca que se acerca a lo que al final llegaría a lo que llegaría. Y es un buen punto de partida aunque nada más, Eco diez características que podemos usar como punto de partida, puedes seguir tratando de regenerar respuestas para acercarlas más a lo que Hagamos uno más que uso con bastante frecuencia, como los casos de uso son infinitos. Quieres crear una persona UX para mi evento techno. Patada atrás y relájate, conseguimos a Alex, que tiene 25 años. Está en Berlín, por supuesto, zonas. Y nos da antecedentes. Para mí. Encuentro esta parte del proceso. Sé lo que quiero que sea y me cuesta sacar las palabras. Entonces para mí es un punto de partida realmente genial. ¿Voy a usar esto textualmente? Probablemente no, pero hombre, es un buen punto de partida del curso o una plantilla. Hombre. Oh, estoy guapa como si me estuviera acostumbrando ahora. Pero hombre, esto es nuevo y emocionante. Si no te has metido en la IA, GBT para UX es bueno y se siente como en realidad algo que pueda usar en mi trabajo en lugar algunas cosas de IA tal vez esponjosas en el futuro con los pies en la tierra, no en el suelo Eso es lo que quería. Recuerda que estoy usando Chat GPT Esto podría no estar alrededor Chat GPT podría haberse vuelto pícaro y no lo sé, ya se hizo cargo de un país y podría no estar disponible Pero te apuesto a que hay otra alternativa para ello. Gratis, tal vez de pago, tal vez de todos modos, es una excelente manera de obtener texto de marcador de posición en lugar de Loren Ipsum, que usé mucho en el pasado Y esto son solo textos No me empezar con algunos de los generadores de imágenes. 91. Cómo crear un estilo de imagen en Figma: Bien, es hora de pasar a las imágenes. Voy a empezar con un bonito truco donde podamos darle la vuelta a una imagen que podríamos estar usando una y otra vez. Podría ser nuestra imagen de héroe, la ilustración que usamos en todas partes en lugar de tener que importarlo cada vez y ponerlo en cosas que podemos hacer es que podemos tomarlo en un estilo y aplicarlo a un montón de cosas a la vez y se estira y se ajusta. Es increíble. Entonces nos ponemos muy espeluznantes y te mostramos uno. Entonces, si la cara sucia de Dan, bien, el estilo de imagen es útil Vamos a echarle un vistazo e ignorar la espeluznante fase Dan. Bien, para empezar, quiero que consigas una imagen y quiero que consigas un marco y dibujes círculo y escriba algún texto. La imagen que acabo de obtener la mía de unsplash bien, de la app cuando me pusieron un resumen y abajo uno, ahí está justo ahí Bien, y voy a seleccionarlo. Y lo que notarás aquí en el Inspector de Propiedades es que en realidad una imagen es solo un relleno. Y sabemos desde antes que podemos rellenar estilos como lo hicimos sin colores primarios. Lo mismo, lo mismo. Así que voy a entrar ahí y pegaré más. Y este va a ser el nombre de mi estilo, va a ser imagen abstracta uno y todos terminan con otro. Bien, y eso es todo. Entonces solo tienes que ir y aplicarlo. Entonces voy a decir que tienes un relleno de no primaria 50. Voy a ir a deshacerme de eso. Entonces tienes un relleno de uno de mis estilos y una imagen abstracta. Aquí vamos, miren eso. Lo único con lo que podrías tener problemas, poco probable a veces con él seleccionado si lo has recortado primero Bien, salvo lo recortó. El estilo para esta cosa aquí ahora bajo relleno está configurado para recortar. Y solo podría darte problemas porque queremos que se siente, que llene para que se redimensione para llenar las diferentes formas Entonces, cuando crees el estilo, solo asegúrate de que esté configurado para llenar. Y luego puedes repasar y seleccionar algunas cosas y decir, bien, y no llenará mi estilo de imagen de Escherichia Pero Dios mío, estoy por aquí mi Tarjeta de Evento, voy a mostrar más propiedades. Ahí está mi imagen de relleno, puedo ir en realidad, vamos a usar esa. Bonito. Ahora si estás pensando, en realidad, ya sabes lo que realmente quiero, necesito que aumentemos la cara de la danza. Bien, así lo mismo. Voy a romper el enlace y crear y tu estilo. Va a tener esta imagen de fondo por ir a tener otro relleno gay. Y hago clic en él y voy a decir, no tengamos relleno de imagen. Voy a escoger la imagen loca. Bien. Elige la cabeza de baile, repite dos de la carpeta Imágenes en tus archivos de ejercicio. ¿Bien? Lo que voy a hacer es atar encendida, hacerla mucho más pequeña. Todos. Y lo que probablemente tenga que hacer es jugar con la opacidad Si agrega una segunda capa, defecto es 20 por ciento Lo va a poner al 100%. Si tu orden de capas es incorrecto, ves a su lado las pequeñas líneas que puedes decir realmente quieren eso frente a eso, solo lo arrastras hacia arriba. Bien, ahora puedo convertir este gimnasio en un estilo, bien, y esta va a ser la consulta al estilo Dan Y ahora puedo decir en realidad quiero que seas crear, instalar. Mira qué genial es eso. Mi peor máscara de la historia. No mires demasiado de cerca. Editar. Bien. Esa es una forma de convertir una imagen en un estilo especialmente útil si tienes una imagen de héroe, eres una especie de ilustración de gráfico que usas cargas y cargas se convierten en un estilo, compártela con el equipo. Todo el mundo puede usarlo. Ahorre algo de tiempo cavando, tratando de insertar imágenes en todas partes. Bien, eso es. En el siguiente video. 92. Qué diferencia hay de Imágenes dentro de marcos frente a Imágenes enmascaradas en Figma: Hola a todos. En este video vamos a ver estas tres opciones diferentes para poner imágenes en una caja. Sin embargo, qué emocionante es súper importante, porque atrapa a mucha gente. Especialmente cuando avanzamos más en el curso, porque se puede tener un marco que no tiene nada dentro de él, solo una imagen como relleno. Este de aquí es un marco que tiene una imagen escondida dentro de él. Este de aquí es un grupo de mezquita dentro de esto es mucho más complejo. Hay un objeto de enmascaramiento y una imagen y el grupo de máscara rápida, tropezarás con todos los casos de uso de este, y todos operan de manera ligeramente diferente Y después de este video, sabrás cómo funcionan para que no te atrapen demasiado. Bien, vamos a saltar, bien, para empezar, he hecho tres cuadros, Eso es todo. Bien. Encuadre 1,718.19 en algunas garrapatas debajo sin una buena razón Veamos las diferentes formas de poner imágenes en su interior. Entonces el primero y el más común, el más útil y más flexible es simplemente tener un marco y darle un relleno de este color. Pero todo de una nota sólida de una imagen. Elige la imagen. Lo voy a obtener de nuestros archivos de ejercicio puede a imágenes es uno llamado producto uno. Bien, lo genial de esto es por defecto, está configurado para llenar. Entonces significa que se estira y hace cosas buenas para la capacidad de respuesta Podemos pasar y decir que en realidad queremos recortarlo, ¿de acuerdo? Puedo agarrar los bordes y cambiar el marco. Haré clic en la imagen K y meteré con ella y la reorganizaré aquí Entonces es bastante flexible. Y deshacer. La otra forma de hacerlo es poner una imagen dentro del marco. Mientras que este de aquí ¿puedes ver la última estructura? No hay cheurón pequeño. Ellos no puedo aquí no hay nada . Es bastante ordenado. Es solo el relleno aplicado al marco. Vamos a traer una imagen. Vamos a ir comando shift K, Control Shift key y una PC, o golpear el convertir a componente, que es muy similar Command Option K. Lo hago todo el tiempo. ¡Vaya! Voy a traer producto a, y voy a esperar un segundo y después simplemente pegarlo aquí. Esa diferencia es, antes que nada, es gigante. En segundo lugar es que puedes ver aquí en mi marco como el mismo color de relleno de siempre y deshacerte de él. Realmente no hace nada, pero la imagen está dentro de ella. Tú vas, Es un objeto separado. Por eso no es escalar y redimensionar. Y si quiero redimensionarlo para que quepa dentro de este marco, puedo hacer doble clic en él, se da cuenta demasiado grande. Zoom ahí fuera que está. Bien. Mantenga presionada Mayús. Entonces es solo una peor manera de hacerlo. Bien. Pero terminas haciéndolo así todo el tiempo. Y a veces es más fácil en lugar intentar hacer esto e intentar hacer el recorte e intentar encajarlo aquí, ves que la imagen tiene un relleno aplicado a ella. Puedo copiar esto, deshacerme de él y eliminar. Agarré mi marco, que en realidad se deshace de la capa de imagen ahí Ve a mi marco, solo péguela ahí. Ahora está mucho más conectado, intranquilo, pero ahí es donde mucha gente se queda atascada, sobre todo a medida que avanzamos por este curso Probablemente mejor ser un relleno. Si quieres hacer todo lo separado dentro de él, tal vez quieras hacer una mezquita. Entonces hagamos eso como última opción. Entonces voy a traer el producto tres. Puede ser demasiado grande, así que voy a mantener turno y arrastrarlo hacia afuera, pegarlo en la parte superior de mi marco, hacer clic en el botón Máscara, y luego te vas, terminas en un lugar similar. Aquí es un tipo de estructura muy diferente. Tenemos este grupo de máscaras. Ahora dentro de ella está mi imagen. Y entonces esto es lo que lo está enmascarando. Así puedo trabajar en estos independientemente, en el marco para decirte en mi máscara, y puedo trabajar en mi imagen, redimensionarla y reposicionarla Entonces terminamos en un lugar muy parecido. Podemos hacer todo el recorte, ya sea un relleno, ya sea una imagen dentro de un marco, ya sea un relleno de un fotograma, ya sea una imagen dentro de un marco o es una máscara que tiene dos ingredientes La máscara, la cosa que hace la máscara, y la imagen misma. Pero cuando lo estamos viendo desde así, van a hacer lo mismo, pero diferentes métodos para llegar allí en su mayoría hacen estas imágenes un relleno. Pero de todos modos, solo quería señalar las diferencias antes ir demasiado lejos porque atrapa a mucha gente. Bien, eso es. Relleno de imagen, relleno, relleno. Te veré el siguiente video. 93. Cómo recortar imágenes con métodos abreviados de Figma: Hola a todos. Agradable, fácil. Vamos a ver cómo recortar imágenes usando algunos atajos dulces. Está saltando bien para empezar, he tirado tres imágenes. Los puedes obtener desde cualquier lugar. Bien, los acabo de tirar en mi escritorio aquí. Son de los expedientes de ejercicio. Estas son las gallinas espeluznantes hechas estas la semana pasada, luego un par de videos para ti, pero hombre, estos parecen más espeluznantes esta Entonces veamos el recorte para que podamos hacer clic en estos y aquí hay una opción de recorte Y le damos click y podemos empezar a hacer algún recorte. Bien, entonces hay una mejor manera sin embargo. Si pulso deshacer, deshacer otra vez. Bien, lo que quiero hacer es si tienes una imagen seleccionada, ahora, es solo una imagen vieja y llana. Si agarro el borde, solo redimensiona un poco. Pero si mantengo pulsada la tecla Comando en una Mac, la tecla de control en una PC, puedes ver cómo puedes realmente fácil simplemente agarrar estos bordes para cambiar el tamaño y recortarlo Esa es la mejor manera. Es mi forma favorita. Mantenga pulsada Comando en una Mac, Control en una PC. El otro atajo que es útil es hacerlo de esta manera. Realmente no se ve lo grande que es. Entonces, lo que puedes hacer es si mantienes pulsada la tecla Opción en una Mac, tecla alt en una PC y haces doble clic en ella. Te metes en esta modalidad aquí que muestra que te gusta. Para que puedas ver tanto el marco que lo está recortando como la propia imagen real Y puedes agarrar esa imagen, puedes cambiarla de tamaño, mantener pulsada la tecla Mayús para que no se meta con la escala Entonces aquí abajo, haga doble clic, no funciona. Si mantienes pulsada la tecla Opción , haz doble clic o Alt, puedes obtener ese recorte. Se puede trabajar con estos por separado. Depende de la forma en que quieras trabajar. O el que más usé es simplemente mantener presionado el comando. Y se pueden cosechar cosas. Ahí vamos. Vamos a Control en una PC, tienes una práctica es si agarro la herramienta de marco y quiero meter esto como relleno, si pongo eso en ella, se convierte en una imagen dentro del marco. Solo un recordatorio, lo que podemos hacer es copiar y pegar propiedades que incluyen este relleno. Así que voy a mantener la opción de comando C para copiar propiedades, Eso es Control Alt C. Entonces opción de comando B está funcionando un poco, mueve a través del punto porque hice este recorte por aquí Es un poco estirarlo para arreglar eso. Se puede entrar y decir que no cosecha, vamos a llenar. Aquí vamos. Entonces comando haga doble clic u Opción haga doble clic en una Mac o Control y Alt haga doble clic. Bien, eso es. Te voy a ver en el siguiente video. 94. Cómo enmascarar imágenes con texto en Figma: Hola a todos. En este video vamos a ver poner Imágenes dentro del texto. La manera más fácil es hacer clic en Rellenar, ir a sólido, elegir imagen, elegir una imagen y listo. Sin embargo, lo que vamos a hacer, es en este video, te voy a mostrar un par de formas diferentes y te voy a mostrar la diferencia entre enmascarar y llenar pondrá múltiples imágenes dentro de él, incluso exprimirá un vector. Y voy a ver un par de cosas que podrían atraparte. Bien, vamos a saltar. Primero, he traído algunas imágenes, trayendo cualquier cosa. He puesto algunos en los archivos de ejercicios llamados agua oh, 12.3, solo para usar como ejemplos, pero puedes usar cualquier imagen antigua ¿Bien? Y para obtener la imagen dentro del festival de texto que toma necesita ser lo suficientemente gruesa como para poder ver la imagen dentro de ella que es demasiado delgada. Hermione son los atajos para hacer el peso más grande o lo que es útil, Es Opción de Comando y el mayor que y menor que, bien, Eso es Control alt mayor que y menor que, y vamos Así que tengo algo bonito y grueso. Yo también, voy a usar el K2 para escalar mi tipo. ¿Recuerdas ese truco? Simplemente consíguela algo proporcional a mi imagen. Y la mejor manera en mi opinión es seleccionar esto y ni siquiera necesita estar cerca de él. Vamos a usar las propiedades de copia como aprendimos en el último video. Recuerda que es Opción de Comando y C, o Control Alt C, y luego Control Alt V o Opción de Comando V en una Mac que la pegará dentro de ese relleno. Eso copia los inmuebles, en este caso el relleno. Y lo pegaremos aquí. Y lo pondré dentro de un marco para que podamos verlo de verdad. Lo bueno de esto es que es cambiante. ¿Bien? Podemos eliminar cosas y podemos hacerlas alboronadas ¿Puedes ver los cambios de imagen para llenarla en el fondo? Entonces por eso es realmente agradable. Y la estructura de capas es realmente agradable. Las puertas simplemente teclean con un relleno dentro de ella. Fácil. Se puede ajustar después en el momento sentarse, es por defecto para llenar. Entonces va a tratar de cubrir cada parte del tipo. A veces quieres sentarte en parte de la imagen. Voy a sacar eso y debería haber hecho un duplicado al principio. Tienes un campo blanco puede ser gris, Está bien. Hagamos un par de cafés entonces. Nosotros tenemos esta. Digamos que quieres una parte específica de esta imagen, tal vez la parte superior de la misma, no la parte inferior. En realidad es usar esta imagen aquí. Entonces no lo queremos justo en el medio aquí. Queremos bajar por el fondo, digamos. Entonces lo que vamos a hacer es copiarlo usando nuestro atajo y luego pegarlo aquí. Bien, lo que podemos hacer es mover el atajo del último. Podemos aguantar. ¿Cómo conseguimos todo el recorte extra por fuera Ahora, los kiwis mantienen presionados, luego hacemos doble clic en la tecla es todo lo que tienes Opción en Mac, Alt en una PC Así que solo haz doble clic en él. Ahora podemos ver el marco y podemos decir en realidad quiero moverlo y tal vez cambiarlo de tamaño, bien, manteniendo turno Entonces queremos la parte superior de esto. No vamos a tratar de hacer pasar las burbujas. También podemos redimensionarlo en este modo. Bien, a lo mejor es lo que quieres. Aquí vamos Escape para salir. La única cosa cuando lo cambias de llenar dos, porque en el momento en que esto tiene nuestra propiedad de imagen de llenado por defecto, hemos cambiado golpeando ese atajo para escapar. Este ahora tiene fuera uno de cosecha. ¿Puedes ver el ancho y la altura de la misma aquí? La única cosa si lo redimensiono, hazlo realmente pequeño. Y como ejemplo, y mira esto si yo Alt u Opción hago doble clic en él. ¿Puedes ver lo que está hecho entonces está un poco hecho? Esto lo recortaríamos. No sé por qué lo hace, pero sí. Eso es una cosa a tener en cuenta. Puede que tengas que pasar y decir, no útil. Voy a copiarlo y pegarlo adentro y otra vez. Bien, así que lo he deshecho hasta que volví la otra manera puedes recortar imágenes miramos un poco hace un par de videos, el relleno versus cosecha Bien, voy a agarrar este para esta imagen de aquí. Las herramientas K lo hacen agradable y grande. En realidad solo hazlo a éste de aquí. Es que solo puedes seleccionarlos a ambos y hacer que una máscara se dé cuenta, deshacer que esto tiene que ser la parte posterior, que son los corchetes abiertos y cerrados cerca de pico. Envíalo a la parte de atrás, selecciona ambos, ve a la mezquita. No hay nada malo en esta forma aparte de que el panel de capas es un poco más complicado. Te muestro ambas formas es porque vas a conseguir el trabajo de otras personas con, lo has hecho de esta manera. Y algunos de ellos lo habrán hecho de esta manera con Es solo este texto. ¿Bien? Es sólo una imagen dentro de ella. La razón por la que lo haces de esta manera es que no hay una buena razón real que se me ocurra. Es útil cuando quieres enmascarar más de una cosa. Porque puedo decir que quieres esta, quieres Imágenes dentro de ella porque es una agrupación agradable y fácil de decir en realidad te quiero ahí y en realidad estás en la cima. Bien, entonces ahora tengo un grupo de mezquitas. Ese es mi texto de enmascaramiento y cualquier cosa debajo de esto, podemos tener muchas cosas que pueden entrar dentro de él. Probablemente más útil cuando tienes una víctima. Bien, vamos. Voy a vectorizar aquí. Y otra vez, siempre y cuando sea que tengas hermosa entonces puedes ponerle mucho. Pero en realidad puedes por aquí solo para que puedas tener más de un relleno. Gays. Y puedo decir que en realidad este tiene imagen. Rellene para recoger una imagen y luego elegir un producto, un pequeño auto. No voy a llenarlo. Voy a recortarlo. Porque lo que quiero hacer es decir tipo de getters y esto es un poco de nabo En realidad lo voy a mover por ahí. Por defecto, el relleno extra obtiene 20% del color de relleno. Así que en realidad puedes hacer lo mismo donde acabo de conseguir algo de texto viejo y plano. Tiene que llenarse. Igual que esto. Realmente no importa, pero nos acostumbramos a ambos. Bien, así que eso es enmascarar con texto. La comida para llevar es simplemente hacerlo de esta manera. Lo copiamos y pegamos en cuatro. Se puede ir por el camino más largo. No lo sé. ¿Es más largo? Rellena imagen, elige Imagen, pégala dentro de ahí. Vamos a agarrar este. Si lo cierro ahora, hay absolutamente ninguna diferencia lo que hicimos cuando lo copiamos y pegamos, todo lo llenó de una imagen, llegamos a la misma olla en lo mejor es que esto redimensiona porque envió a llenar, cambiará el tamaño y mantendrá mi imagen en Bien, vamos a ponernos alboroneros. En realidad. Terminemos y te veré en el siguiente video. Bye 95. Proyecto de clase 10: máscara de texto: Tiempo de proyecto de clase. Uno fácil. Vamos a poner Imágenes dentro del texto. Lo que quiero que hagas es usar el nombre de tu app, ¿de acuerdo? Y quiero que te dividas en dos bloques separados de texto. Y quiero que experimentes con ambas formas de enmascarar imágenes con texto. Miramos un video anterior. Esta de aquí es solo la capa limerick con un relleno todo el camino por aquí o esa imagen en ella Bien, de manera agradable, fácil, sencilla. Quiero que hagas esto hasta el final también donde usemos este enmascaramiento. Entonces es un grupo a mamás es mi imagen. Ese es el tipo de ahí. Quieres que sepas cómo hacer ambas cosas, porque obtendrás ambas de otras personas, de la comunidad. No hay manera correcta o incorrecta, pero es bueno saber manejar ambas cosas. Así que dos imágenes separadas en dos bits separados de texto. Lo que OPE hacer es ponerlo en marco de Instagram. Así que hasta ahora, un hit if key, hemos estado usando muchas de las cosas del teléfono. Quiero que bajes a las redes sociales y escojas uno de estos. Estoy usando la publicación de Instagram de la mía. Puedes usar lo que quieras porque vamos a estar haciendo una especie de anuncio a medida que vayamos por esta siguiente sección. Uno porque nos permite practicar muchas de las cosas de imágenes en esta categoría, en esta sección, pero también te da una pista de lo que están haciendo muchos diseñadores En realidad están usando Figma cumplió con propósitos de diseño gráfico No hace como si fuera un poco más tradicional el diseño gráfico basado en la impresión se puede hacer para hacerlo. No es realmente genial, pero dependiendo de donde estés trabajando para mí tanto mi trabajo de diseño ahora es más digital orientado a las redes sociales, especialmente. Así que puedes usar totalmente Figma para que las salidas excelentes archivos de grado para trabajar con Así que empieza con un post. Y lo que voy a conseguir que hagas es que quiero que te subas una captura de pantalla de las dos Máscaras de texto. Así que solo una captura de pantalla de ambas y subirla a la sección de asignación. Pero no te preocupes por compartirlo en redes sociales en este momento. Causa un poco de tiempo. Lo que vamos a hacer es que en realidad vamos a dejarme agarrar un Lowe's, mostrarlos a todos. Ahora mi trabajo base, bien, lo que vamos a estar haciendo es crear un anuncio y vamos a intentar forzar cada sección de esta parte de imágenes del curso en esto Por eso terminamos con esta abominación del diseño. Porque necesitamos pegar todos los elementos. Y así vamos a poner eso al final. Espero que el tuyo sea mejor que el mío, pero vamos a aprender todo tipo de cosas geniales de imágenes con cosas para pasar el rato y usar La transparencia son máscaras y todo tipo. Una máscara de luma es y todo tipo de cosas. Así que los vamos a aplastar a todos. Y lo que vamos a hacer es que vamos a llegar a compartir nuestro proyecto final al final, tú vas, los Dan verdes son tan malos o podría tener que ir a cambiar ese. Pero por el momento, solo haz estas dos partes de textos, súbelas, y te veré en el siguiente video. 96. Cómo enmascarar usando PNG transparentes con canales alfa en Figma: Hola a todos. Déjame mostrarte cómo usar imágenes que tengan transparencia para mezquita imágenes de fondo y rellenos. Esta imagen tiene transparencia, doble Bam enmascarando otra imagen. Te voy a enseñar cómo hacerlo. Y luego si quieres quedarte, te voy a mostrar cómo hice estas imágenes de fondo transparentes en Photoshop y agradables y fáciles de hacer un efecto realmente agradable al final. Bien, vamos a saltar , justo primero arriba, hemos conseguido tus archivos de ejercicios Hay dos alfa debajo de la imagen, ¿de acuerdo? Hay un JPEG y un PNG. Los Jpegs no tienen transparencia ni alfa. Alfa es otra palabra para transparencia, pero el PNG en este caso lo hace a menudo estamos buscando pngs para que esto funcione Bien, así que sólo voy a traerlo y voy a bajarlo. Él es Mike K2. Consígalo a un tamaño apropiado. ¿Qué haces ahí? Sí, ya grabé éste. No salió muy bien. Mucho de mi manera. Entonces estamos reiniciando Entonces tenemos esto, necesitamos una imagen para que esto se oculte. Bien, entonces voy a traer otro comando de imagen shift K. Y vamos a traer, voy a traer un Alfa cuatro. Fresco. Es una cosa abstracta genial. Voy a hacer que sea el tamaño adecuado para cubrir esto. Y hay que recordar que quien está en la cima es que esto va a eso, eso parece normal. Entonces está mal. Eso tiene que estar en la parte de atrás. Selecciona ambos y todo lo que tenemos que hacer es golpear Hacer Máscara. Y ahí vamos. Se ve nuestro PNG que tiene transparencia o índices alfa son voy a hacer tu máscara. Quién recuerda el atajo porque no está muy bien enmarcado Las marcas de pintura no están atravesando muy bien. ¿Quién recuerda el atajo para mostrar tanto esto como el exterior? Así es. Mantenga presionada la tecla Opción en una Mac, tecla alt en una PC, haga doble clic en ella. Y ahora puedo mover este fondo uno por ahí para llevarlo a donde te quiero. Aquí vamos, saltar un par de veces para salir. Así es como se hace una Máscara Alfa. También puedes hacerlo con formas. Wheatley, puedo hacerlo con este marco. Pero si este marco es un rectángulo, bien, esto podría cambiar y no sé por qué está sucediendo esto. Así que permítanme copiar las propiedades que pegan el rectángulo de propiedades usando la herramienta rectángulo, herramienta de marco. Voy a traer de nuevo mi PNG. Lo consigues a un tamaño apropiado sosteniendo Shift. Haré uno ahí y haré otro aquí abajo. Entonces el rectángulo, siempre este no sea el corchete BEC al dorso, puedo ir Máscara. Woohoo funciona. Juega con mi gradiente ahí. Encantadora. Sin embargo, este de aquí. En el momento que necesito volver a verificar que esta imagen no esté dentro del marco, lo que simplemente pasa a no ser donde como en mi fotograma 21 está ahí, ¿dónde está mi imagen? Y estos están muy separados en el panel Capas. Seleccionamos ambos y golpeé mis corchetes cerrados, todos llegan a la cima. Ahora bien, esta imagen necesita estar debajo del marco pero no dentro de él. Vete tú. Ahora, haz lo mismo y boom, yo no trabajaba. No sé por qué no he podido conseguir que eso funcione. Hazme saber en los comentarios si lo haces. Pero bueno, solo podemos convertirlo en un rectángulo. Deshacer eso. Ahí vas. Se puede hacer con cualquier cosa que tenga un canal alfa. Hay otra, una práctica nativa con esta cordillera. Lo que me gustaría hacer es en realidad solo mostrarte cómo hago, porque hice estos para nosotros. Podrías simplemente salir a algo como Google y decir cityscape PNG y encontrar algo que necesites para verificar las licencias si vas a usar esto correctamente o si es solo de uso personal y estás practicando descargar cualquier cosa Entonces, si quieres hacer cosas solo por interés, te mostraré cómo las hago en Photoshop. Yo tengo este de aquí. Quiero enmascarar el fondo. Bien. ¿Quiero el agua? Hay dos opciones, ¿verdad? Se puede seleccionar el tema que a menudo capta los intereses Y luego por aquí en tu panel Capas puedes golpear capa de máscara. Guarde esto como PNG a su manera. Puede que tengas que hacer un poco de limpieza. Bien, para que puedas usar la Herramienta de Selección Rápida. Mantenga presionada la tecla Opción y deshágase de algunos de estos bits aquí. Bien, solo los arrastras hacia abajo. Es bastante bueno. Hay agujeros que necesitas. Soltas esa tecla Alt u Opción y solo coloreas los bits que quedaron fuera. Depende de lo detallado que necesites ser. Whoop. Bien, voy a agregar mi Máscara de Capa y ¿cómo la voy a guardar Voy a usar la opción aquí. Así que uso Archivo, Exportar, Exportar Como es brillante porque me permite hacer un par de cosas. Me permite decir, porque recuerden, JPEGS que mencioné ahí no tienen transparencia, así que solo voy a llenarlo de blanco, cual no es bueno Queremos PNG. Por lo que tiene transparencia. Se puede ver ahí. Y tamaño inapropiado. Entonces lo voy a meter. Tiene 1,500 píxeles de ancho. Entonces no es tan grande. Y luego voy a exportarlo. Entonces eso es lo que hago. La otra opción podría ser esta de aquí. ¿Bien? Aquí hay una opción para decir Select Sky. Y puedo decir Select Inverse, y luego darle a esa opción Máscara de Capa e hice lo mismo, guárdala como PNG. Un último pequeño consejo. Si buscas una silueta realmente genial, a veces los bordes de esta no son muy fuertes. Lo que encontrarás es, si hago esto, ¿ves que está un poco borroso en los bordes aquí, que es tal vez lo que quieres, tal vez no Lo que puedes hacer es intentar no ser un tutorial de Photoshop. Eso si quieres aprender más Photoshop, tengo un curso básico y avanzado, pero lo que esta capa seleccionó, puedes ir a tus ajustes. Veamos los niveles, que es el segundo aquí dentro. Y solo puedes perderte porque en realidad no quieres, no te importa el cielo y las montañas, ¿verdad? Estás buscando un buen contraste alto entre los dos. Puedes perder el tiempo tratando de obtener una definición muy clara entre los dos. Se va a deshacer algo de la ambigüedad cuando vayas a seleccionar ambos, estamos siendo muy destructivos Ok, y vamos a fusionar capas. Acabo de hacer clic con el botón derecho Ahora bien, si voy a Select Sky, solo queda un poco más claro sobre qué es lo que puedo hacer. Lo mismo, vamos a invertir, bien, y mi Máscara de Capa. Y solo tenemos un bonito borde ordenado en mucho de esto porque él solo CRISPR. Puedes pasar más tiempo y mejorarlo. Ahora hacemos un Archivo, Exportar, Exportar Como, y solo asegúrate de que sea un PNG donde vayas, dale un tamaño más apropiado y hacemos lo que hicimos al inicio de este curso. Llévala y úsalo como Máscara. Bien, eso es enmascarar usando pngs transparentes, aka máscaras Alpha, alias canales alfa Eso es. Te veré en el siguiente video. 97. Proyecto de clase 11 - Máscara alfa: Hola a todos, soy super increíble proyecto para no hacer la tarea. Esta es la creación de tu propia Máscara Alfa. Así que crea una Máscara Alfa para enmascarar una imagen como hicimos en el último video. Ahora puedes crear la imagen que usas tú mismo, ¿de acuerdo? Así que haz la transparencia tú mismo con algo como Photoshop u otra herramienta que sepas usar. Si no sabes cómo usar ese tipo de cosas en este momento, puedes encontrar uno y PNG existente en Internet. Pngs, uno de esos archivos que tiene transparencia horneada tan a menudo si lo agregas a una búsqueda a algo como imágenes de Google, PNGs, con lo que fui veces encontrarás muchas imágenes que tendremos fondo transparente Verifique las licencias en esta etapa aunque las estamos usando con fines educativos, usándolas comercialmente. No estás tratando de venderla. Tan a menudo, solo puedes usar cualquier cosa menos verificar la licencia Cuando hayas terminado. Toma una captura de pantalla de ello. Bien. Ese es el que hicimos. Quiero que hagas algo nuevo y diferente. Pero recuerda, es posible que quieras estar todos miren las otras cosas que vamos a hacer. Se acerca. Lo vas a agregar a tu anuncio de Instagram, elige algo relevante para tu género musical. De lo contrario, U2 tendrá que intentar exprimir una ciudad con pintura o razón en tu edX. Ahí vas. Voy a ver en el siguiente video, disfruta del proyecto 98. Cómo crear una máscara de luma en Figma: Hola a todos. En este video vamos a ver cómo crear algo llamado Máscara de Luminancia o Máscara de Luma Básicamente utiliza las partes claras y oscuras de una imagen para enmascarar las cosas. Y puedes hacer algunos efectos de duotono geniales. Bien, déjame mostrarte cómo hacerlo. Bien, lo primero es traer una imagen, ¿de acuerdo? Voy a traer luma uno. No hay nada especial en esto es solo un JPEG que encontré en unsplash ve genial cuando hay un contraste muy alto entre el primer plano y el Vamos a entrar razón escogí este más que se ven muy palmera ish. Bien, Lo siguiente que debes hacer es asegurarnos de que la máscara esté en la parte inferior de la cosa que quieres enmascarar. Y asegúrate de que esté atrás. Seleccione ambos. Usted botón de enmascaramiento y no pasa nada hasta aquí en el Inspector de Propiedades, puedo ver que está por defecto a alfa No hay alfa y éste. Pero mira esta luminancia. Lo que está haciendo es usar las partes oscuras de mi imagen para poner un agujero en esta, voy a hacer click off, dar click en. Así que tengo todo el asunto. Puedes ver, mira, en realidad es un agujero. En este caso, el luminoso está utilizando partes oscuras para hacer un agujero en él. Y ahí es cuando obtienes este aspecto un poco agradable Duotone pasando Si el tuyo se ve un poco raro y tal vez elijo uno que tenga alto contraste porque se ve bien en este tutorial. Si tienes que usar una imagen y quieres intentar hacer algo diferente a ella, lo que podrías tener que hacer es entrar en la imagen es mi luma uno En realidad, no, es éste de aquí. Bien. Y yo puedo entrar en la imagen y puedes jugar con cosas como la exposición. ¿Puedes ver? Y tal vez quieras un poco más de detalle ahí dentro y solo tener una jugada con contraste y saturación. Apenas todas ellas para ver qué mueve la aguja en cuanto a llegar a como quieres. Son principalmente las luces y la oscuridad, los reflejos y las sombras. Ese tipo de cosas cambiarán la forma en que funciona esta máscara de luma A veces aunque quieras lo contrario en este momento hay un todo con el árbol es, digamos que quieres el todo en el fondo, ya sabes lo que el árbol sea púrpura. Déjenme traer el otro expediente. Bien, compré en luma para, e hice un par de cajas de colores para mostrarte la diferencia un poco Y de hecho ahí mismo, bien, la magia de la edición. Lo que quiero hacer es invertir esto primero. Por lo que no hay ninguna característica por el momento. Siguen agregando características como esta. No hay colores invertidos. Pero hay un plugin que he encontrado llamado Invertir color. Voy a golpear Ejecutar invertir. Necesito seleccionar al menos uno. Entonces voy a ejecutarlo. En realidad, creo que la forma en que funciona este es que para empezar, dirá algo como configurar ajustes, presionar Guardar, luego ejecutarlo de nuevo, e invertirá los colores. Así que básicamente solo los cambié. Tiene que ver principalmente con las luces y los oscuros. Bien. Ya ves ahora el gato era negro pero ahora es blanco. Bien, entonces voy a hacer lo mismo, ponerlo atrás, convertirlo en una Máscara. Asegúrate de que dicho a la iluminancia. Y es debido a la diferencia entre estos dos. Vas Lo mismo, lo mismo, excepto que uno está invertido y otro No depende de lo que quieras hacer. Es bastante genial. Bien, así es como hacer una máscara de luma en Figma 99. Proyecto de clase 12 - Máscara de lumina: Llegaste a clase de tiempo de proyecto. Esta vez para una Máscara Alfa, una máscara de luma, Dan, Oh, mayúsculas, teclado gritando Bien, haz lo que hicimos en el último video, pero con máscara de aluminio, superponlo con un marco de color como lo hicimos aquí Elige algo apropiado para tu app dependiendo del género de música que tengas. Bien, puedes usar tu propia imagen o puedes encontrar una imagen de biblioteca de stock, algo como Unsplash o Adobe Stock o Envato Elements, lo que sea a lo que tengas acceso, y luego tomar una captura de pantalla y subirla a las asignaciones Nuevamente lo mantendremos en la sección de asignaciones, pero lo armaremos más adelante. Lo que hice y ustedes todos llegan a decidir lo que quieren hacer es que lo puse en el fondo, ellos superponiendo la imagen de fondo Ahí está el mío. ¿Por qué tengo una palmera? Esa es muy buena pregunta. Porque eso es lo que elegí. Bien. Tú eliges algo más apropiado. Bien, haz el proyecto, cárgalo, y te veré en el siguiente video 100. Cómo crear una máscara de contagio fuera del marco en Figma: Hola a todos. En este video, vamos a ver algo llamado máscaras de derrame Es una palabra que hice, pero son estas imágenes las que un poco derraman los bordes de los rectángulos Y se ve realmente genial. Es muy fácil. Es solo una ilusión óptica en Figma, más una pila de capas, pero es genial Así que vamos a saltar y te voy a mostrar cómo eso hizo, bien, para empezar, traer a las imágenes Y tengo estos dos spiller una vez. Hay uno con la máscara, uno sin mezquita. Para que esto funcione, necesitas tener Enmascarado algo de fondo, pero necesitas a ambos para conseguir ese tipo de cosas geniales sobre Levy Ahora, no es un curso de Photoshop, pero al final voy a mostrarte que tengo esto enmascarado hasta ti Hay muchas otras herramientas para hacer enmascaramiento. Y lo que vamos a hacer es que necesitamos estos. Voy a hacer duplicados de ellos, ¿de acuerdo? Y voy a asegurarme de que esto sea exagerado de esto, por el mismo tamaño, deberían superponerse muy bien, el poco confuso, pero entiendes la idea. Entonces lo que vamos a necesitar es básicamente este de aquí que tiene una máscara. Voy a apagar el globo ocular para que no pueda verlo. Este de aquí, sólo voy a moverme hacia arriba así que está debajo de éste, solo por confusión hundirse porque tengo estas otras copias en la parte superior, una encima con el globo ocular apagado Bien, entonces está oculto. Entonces esta versión que voy a hacer es que voy a agarrar la herramienta Elipse, que es la tecla 0 en nuestra mantener presionada Opción en mi Mac, alt en una PC y turno justo para que comience desde el centro cuando empiece a arrastrar Y es un círculo perfecto. Consíguelo como quiera a la herramienta V, la herramienta de selección, alinearla y todo lo que tenemos que hacer es poner esto en la parte de atrás, bien, entonces tiene que estar detrás esta imagen. Voy a Shift clic en él. Así que me seleccionaron ambos, me hice la máscara, y luego solo le volví el ojo a este tipo de arriba Así, vas dentro por fuera, sus cosas se ven engañosas, pero es sólo una ilusión óptica. Otro tipo de truco interesante con esto es que voy a hacer lo mismo. Haz un duplicado, oh, mi teclado para obtener un círculo Option Shift o Alt Shift en una PC. Y lo haremos con un color como si estuvieras al principio. Pueden escoger cualquier color siempre y cuando sea porque voy a ser verde. Estoy buscando en realidad solo voy a elegir algo diferente, pero quiero algo para contrastar este tipo de color marrón, ocre cálido Y claro que está verde y lo alinea sosteniendo a Shift para que no aplaste mi círculo No tienes que hacer nada realmente, solo envíalo a la parte de atrás. Y este arriba de aquí, voy a agregar lo genial de algo que tiene transparencia. Si le agregas el efecto de sombra paralela, Bien, aquí dentro, voy a ir a cero para, dependerá de tu forma. Eso me parece bien. Golpe para Y4, así que está asomando por el fondo en 25 por ciento. Se ve bastante genial. Entonces es echar un vistazo. Sin sombra, sombra, sombra, sombra, fresco. Es realmente lo que pasa es la máscara, está hecha en otro lugar. Y solo hacemos algunas capas agradables aquí en Figma. Ahora, esa es una súper fácil. Hagamos uno que sea un poco más complicado. Entonces, vamos a traer las otras dos imágenes. Recuerde comando shift K, Control Shift key en una PC, trayendo el derrame O2s Bien, y voy a colocar todos y estos se los ponen encima encima del otro para mí, lo cual es genial. Tengo uno con una máscara en la parte superior y luego una mezquita en la parte inferior. Lo que queremos hacer es apagar el de masas. Vamos a apagar el globo ocular. Quién mueve lo que es el atajo. Comando Shift H o Control Shift H en una PC. Así que he ocultado esa. Ahora bien, esta de aquí, así que si consigo que esa existe, solo trabajemos en esto. Entonces voy a enmascarar el mío con un rectángulo. Usamos un marco porque podría arrojar otro problema que será útil para cubrir. Bien, entonces voy a usar un marco. Los mismos trucos funcionan si sostengo Option y Shift y empiezo en el medio, dibujará un cuadrado desde el centro, bien. Y luego consígalo para que quieras agregar para pop out. Sí, hagamos que ese no era mi plan original. Bien. Y todo lo que tenemos que hacer es manjar ambos y hacer una máscara que tenga que ser la parte de atrás Usando mis corchetes, luego haz una máscara. Bien, entonces es ocultar eso para tratar de no ser demasiado confuso. Bien. Y tenemos derrame a la otra vez En realidad, es hacer eso también continuó. A continuación, me puse la máscara. Bien. Y luego tengo a este viejo y sencillo spiller para enmascarar que acaba de pasar el rato aquí. Tenemos que recortarlo porque quiero que el fondo se recorte. Y lo que podríamos hacer para ahorrar tiempo es que solo quiero arrastrar esto desde abajo. Realmente hecho. Yo, que recuerda lo que sostengo en mi teclado solo para recortarlo un poco. Así es. Comando en una Mac, Control en una PC. Y luego vamos, vamos como es un poco asomando los bordes. Agradable y sutil. Uno grande en la parte superior. Podemos recortarlo más bien. Estoy sujetando esa misma llave abajo. Comando en Mac, Control en PC. No lo sé. Me gusta mucho ese efecto spillover Ahora, ¿cómo se obtiene la máscara? Y al siguiente comenzaremos con la herramienta pluma y la enmascararemos en Figma. Pero por el momento, hay algunos plugins K ahí. Bien. Ish, en realidad no. Y no estoy diciendo que tengas que aprender Photoshop, pero la mayoría de las personas que hacen mucho trabajo de diseño UX, pero también conocen un poco de Photoshop e Illustrator. No tiene que hacerlo. Aquellos de ustedes que sí. Te voy a mostrar lo que hice para que se iniciara el archivo. Bien, así que esta fue muy fácil. Todo lo que tenía que hacer era eliminar lo que hice. Abre la imagen en Photoshop. Si quieres seguir a lo largo, puedes hacer Quiero el derrame O1 y O2 que no opciones de máscara Voy a arrastrar eso a Photoshop, abrirlo y empezaremos con éste porque este fue súper fácil. Acabo de ir a Seleccionar tema, lo cual es mágico e increíble. Incluso hizo un trabajo bastante bueno de aquí dentro alrededor de las gafas. Depende. Como si pudiéramos pasar mucho tiempo haciendo máscaras, pero para lo que necesitamos, probablemente necesitamos recortar eso. A lo mejor es dejarme agarrar mi herramienta de varita mágica. Bien, y ya no usamos la varita mágica. Utilizamos la Herramienta de Selección Rápida, que es mejor. Y voy a mantener pulsada la tecla Opción en una Mac, tecla alt en una PC solo para deshacerme de algo de esto y soltar esa tecla para agregarla. ¿Puedes terminar ojalá con algo que esté un poco equilibrado? Y nuevamente, decide en cuanto detalle quieres entrar. Eso me parece suficiente. Entonces solo lo digo Musk y luego digo Comando Opción Shift S. Bien, para hacer esto aquí, está bajo archivo, está bajo Exportar, y es este de aquí La exportación es genial. Si sigues usando Save for Web dopado. Bien, este de aquí es mucho mejor. ¿Bien? Png, algo de transparencia. Le di anchura menor, una altura de mil 500, así que no es tan grande y así es como me enmascara esta. Bien, este todo el de aquí fue un poco más complicado. Así que fui a Seleccionar Asunto, retrocederme y me acerqué. Y es la misma clave. Podemos jugar. Hay dos cosas que tenemos que hacer. Volver a la Herramienta de Selección Rápida. Y sólo tienes que echarle un vistazo, no aguantemos nada ahora porque faltan pedacitos. Entonces yo solo, por defecto está en el plus agregando Modo. Yo solo arrastre por ahí hasta que empiece a recibir los pedacitos que quiero. ¿Bien? Estoy siendo muy perezoso aquí, bien, pero lo es un trabajo bastante bueno. Todo esto sigue siendo una buena imagen para enmascarar. Hay un contraste razonable. Otra vez, no estoy haciendo nada. Estamos un poco arrastrando por ahí. Ahora si quiero eliminar, porque por el momento eso está seleccionado, ¿verdad? Entonces, si hago eso gordo, lo que quiero hacer es menos este pedacito. Entonces, como antes, mantenga presionada la tecla Opción en una Mac, tecla alt en una PC y simplemente arrastrando la pintura solo realmente quiere romper hasta los bordes Y aprende a medida que avanzas. No quiero esta parte. Entonces voy a arrastrar Alt. Y fui, oh sí, grilla todo esto porque es un tono muy similar. También se deshace de ese foso. Entonces voy a agregar eso de nuevo al no mantener presionado nada. Ahora, ¿cuánto tiempo voy a pasar haciendo esto increíble? Todo lo que haya dependerá de ti. Simplemente puede hacer clic una vez. Opción Cuándo presentar. Haz clic en esto lo que terminas con este balance de como, si, es realmente bueno. A mí me encanta. Entonces esa es mi Máscara. Y luego guardar como PNG traer a Figma. En realidad, no, no es porque tuviera que mirar esto. Entonces, si hago esta mezquita, está un poco tropezada en los bordes, ¿verdad Como si las edades estuvieran bien. Pero es un poco, no, no masticado. Lo que podemos hacer es una vez que hayas agregado tu Máscara de Capa, puedes tener seleccionada la máscara e ir a esta que dice, porque en la máscara de capa ir a esta que dice Seleccionar una Máscara. Esta es la parte mágica de Photoshop. Bien, me quedaré bien y cerraré y veré esto si saco la toba del radio, bien, suavizará mis bordes Así que lo tengo arriba unos cuantos pixeles. Si tocas P, se mostrará original, bien, cámbielo de un lado a otro. Otra vez. Es un poco sumergido en todas las olas aquí y solo se ve un poco más agradable Hay mucho más para seleccionar una máscara. Lo que podría hacer es mirar suavizar. Lo voy a poner en marcha para suavizar demasiado los bordes. Pero un poco de alisado. O sólo una pareja. Siento que eso está bien para lo que necesito. Hace algún tipo de ghosting alrededor del exterior, se puede desplazar el borde y un poco, vamos a cambiar a todo el camino en ¿Lo puedes ver? ¿Todo el camino hacia arriba? Todo el camino en un poco elimina un poco de ese efecto ghosting. Bien, en un poquito. Y solo repara un poco esa Máscara o como no lo sé. Gracias. Ve eso un poquito. Entonces ahora voy a dar click sobre la capa. Voy a Exportar como PNG. Y así es como conseguí esas imágenes para ti para este video. Venta cruzada, baile, Photoshop essentials o curso avanzado, dependiendo de tu nivel, Eric y todos hacen Photoshop essentials o curso avanzado, dependiendo de tu nivel, Eric lo Essentials Uno, hay tanto ahí que quizás te hayas perdido aunque lo hayas experimentado razonablemente Photoshop, si ya has hecho mi curso choca los cinco, vas, bam, bien, así es como hacer máscaras de derrame en Figma. Hay demasiado menos 101. Cómo usar la herramienta Pluma para crear máscaras de imagen en Figma: Hola a todos. Oye, en este video vamos a hacer esta máscara aquí usando la herramienta pluma. Vamos a usarlo para crear una máscara de víctima. No es realmente un ejercicio de herramienta de alfiler como usar la herramienta pluma. Está un poco fuera del alcance de este curso, pero para aquellos de ustedes que amables de conocerlo ya no están petrificados de Te voy a mostrar cómo voy y hago estas máscaras, los pros y los contras de lo que se debe y no se debe hacer . Bien, así que eso es saltar Bien, antes de ir demasiado lejos en este video, la primera parte de esto es simplemente dibujar este contorno alrededor nuestra taza de café con las herramientas de pluma que podremos convertirla en una masa más adelante Esa parte podría ser particularmente aburrida para todos. Dependiendo de su conocimiento de la herramienta de pluma con usted se preocupa lo suficiente por la herramienta de pluma. Pero hay algunas cosas buenas en este video sobre hacer máscaras dentro de máscaras. Entonces ya habrá un código de tiempo en la pantalla, Gracias a la edición es Jason y Taylor por hacer que toda la magia de edición suceda y aparezcan los números, ejecutar informes Simplemente puedes saltar a la sala de Urgencias, a los bits interesantes. Si quieres aprender un poco más sobre la herramienta pluma y verme hacerlo, mi técnica, ¿Cuál es el video completo? De lo contrario, saltó a la parte en el video. Bien, así que tengo una imagen que lo evita de los archivos de ejercicios Se llama herramienta Pin. Está en la carpeta Imágenes. Trae eso. Es realmente grande. Es un poco el tema realmente no importa lo grande que sea. Recuerda que esto es para personas que ya tienen conocimiento de la herramienta de pluma. Está algo fuera del alcance de Figma. Nosotros sí lo cubrimos un poco más duradero más adelante. Entonces si pinto te gusta, hombre, eso es demasiado duro, está bien. Solo puedes verlos porque hay algunas cosas interesantes que suceden. Pero sería mucho de ustedes ahí fuera con la herramienta de pluma. conocimiento o bien será un maestro de ello, que serán unos pocos y todos los demás que asustaron a la herramienta pluma y la usarán si es necesario, voy a pasar por mi proceso, pero también algunos consejos y trucos para enmascararse dentro de máscaras y esas cosas Entonces, ¿qué vamos a hacer para que esto sea más fácil? Voy a abrir mis acciones rápidas. Entonces es Comando hacia adelante slash y solo escribiendo la palabra snap y apague eso, eso apagado, en eso apagado, bien. Solo significa que la herramienta de lápiz va a tratar de ajustar a un montón de cosas y hace que sea complicado dibujar estas formas un poco más naturales Entonces apago el mío e intento y recuerdo volver a encenderlos más tarde, pero te olvidarás. Eso está bien. La otra cosa es, es que no necesito todo el marco ni el cromo de Figma. Recuerda ese atajo anterior, Comando o Control barra invertida en lugar de barra diagonal hacia adelante, ¿ puedes simplemente limpiarlo Aún puedes trabajarlo. Y si conoces tus atajos como P para la herramienta pluma, solo puedes usar mucho de tu pantalla inmobiliaria para esto. Entonces lo que vamos a hacer es que no voy a tratar de explicar la herramienta pluma, pero voy a dar la vuelta porque un poco yo mismo Así que haga clic una vez para esquina abajo por la parte inferior aquí, lo que me gusta hacer es que podría hacer clic una vez y luego tratar de hacer una curva ahí. Así que mucha gente intenta no hacer nada realmente malo en ello, pero me parece que todo fluye mejor cuando llegas aquí abajo, haz clic en mantener y arrastrar, aunque sea Bindi Bien, me gusta alinearlo recto ish. Y eso significa que cuando hago clic en hold y arrastre aquí para una curva, todo simplemente fluye mejor cuando hay menos puntos de anclaje Estoy usando mucho mi barra espaciadora y estoy usando mi atajo para el mouse Estoy sosteniendo Comando o Control en una PC y usando mi rueda de desplazamiento, me parece una buena manera de moverme. Pero puedes usar más y menos para acercar y alejar si lo deseas. Por aquí, uno igual distante por este lado, voy a arrastrarlo un poco igual que el otro lado ¿Puedes ver estos un poco de partido ahora que te gusta, qué pasa con la gran brecha en el medio Hay muchas veces que tenemos que volver y arreglar las cosas. Porque más adelante volveremos y lo arreglaremos así. Pero en el momento en que lo voy a dejar, haz clic en mantener y arrastra uno aquí arriba. Y haciendo clic una vez aquí. Si estás consiguiendo el lugar equivocado, ahí es donde está, este de aquí es uno interesante. ¿Cómo se aborda? Es una curva aquí en una esquina allá. ¿Qué haces? Hago clic en mantener y arrastrar para obtener el bit un poco curvilíneo, luego mantengo presionada mi tecla Opción en una Mac, tecla alt en una PC y la ajusta, arrastro hasta aquí. Manera de arrastrarlo. Tanta experiencia viene con la herramienta pluma. Es difícil saber exactamente. No es hasta la izquierda, es 1 millón de veces y mejora en ello. Manos arriba, ¿quién está las manos arriba? ¿Quién ha tenido problemas con la herramienta pluma? ¿Quién está teniendo problemas? ¿Quién es un maestro? Porque sí bailaban, ilustraban un curso, venta cruzada. Bien, así que voy a subir aquí, hacer clic en mantener, arrastrar hacia arriba. A pesar de que quiero que sea recto. Quiero esa curva ahí, un poco sobresaliendo en la parte superior. Entonces probablemente quiero un gran ancho 01:00 P.M. para que esté curvándose pero realmente plano Y quiero imitar este de aquí. Entonces me voy a ir, no trabajaste del todo. Está bien. Haga clic una vez para esta esquina porque hay una esquina interior. Haga clic en mantener y arrastre aquí. Y si estás lo suficientemente lejos, como en todas tus líneas, luce bien. Y da click una vez lo que estoy buscando y si nada más es cuando llegas al final, ¿ puedes ver los pequeños cambios de icono? Todo está unido. Ahora, cambié a la herramienta de selección, que es la tecla V, y trabajo para arreglarla. A veces simplemente no están en la posición correcta y a veces los mangos que los sacan son los equivocados. Entonces otra vez aquí, ¿cuánto me importa esto? Debería importarme mucho más. Que esto no se alinea del todo. Pero no porque es solo una pequeña máscara muy pequeña que va a ser usada bastante pequeña en mi diseño. lo que salte a Photoshop para hacer esto, totalmente lo haría. Yo saltaría. ¿ De dónde vienes? Si tienes un punto perdido que no quieres. Lo que puedes hacer es con la herramienta de selección, puedes hacer clic en ella, presionar Eliminar, pero me deshice de toda esa línea. Entonces, lo que puedes hacer es usar la herramienta pluma, mantener presionada la tecla Opción o la tecla Alt en una PC. Ver el menos un poco deja la línea ahí, pero se deshace de ese punto de anclaje que no queríamos Volver a la herramienta Selección. Bien. ¿Tengo asas con las que trabajar? Yo no. Oye, tu BAC menos tú Herramienta de Selección. Eso sigue regresando. Bien. Vete. Escapar. Ha vuelto. ¿Por qué sigues regresando entonces? ¿Se ha ido? Tú me miras deshacerme de él. Y eso está de vuelta. ¿Eso es un asa? No es colgado. Voy a tener que abrir y cerrar Figma. Aquí, herramienta pluma, mantenga pulsada la tecla Alt u Opción. Te has ido a golpear a Escape para salir de ella. Golpea escapar un par de veces, sal de él, haz doble clic en él y vuelve. Yo, ¿o es Figma? Y luego cierra Figma hacia abajo y ábrelo de nuevo hacia arriba. Tú esperas ahí. Bien, estamos de vuelta. Veamos qué tenemos. Haga doble clic en él para entrar dentro de él. Tengo un punto que no quiero herramienta pluma, espera, Alt u Opción, ido. Está de vuelta. Bien. Lo estoy haciendo, deshaciéndome de esa manera Pinto Y luego arrastra esa hacia afuera y luego arrastra esa hacia afuera para conectarlos hacia arriba. ¿Por qué fue tan malo? No tengo idea. Eso normalmente no sucede. Bien, vamos a ignorar eso por ahora, si te pasa a ti y te vas, a veces eso pasa, eso se ve bien aquí abajo o se ve bien Consigamos que este sea equilibrado. Y el truco con buenas, bonitas curvas como esta es que esto debería ser lo mismo de este lado. Similares. Se puede ver que no son perfectos, pero el mismo tipo de enlaces golpeando el mismo tipo de dirección me da el tipo de una curva agradable y consistente. Nuestros derechos, ahora estamos en el pedacito del salto, o para los que se quedaron y vigilaban todo, escuchamos. Por supuesto, escuchamos a aquellos que saltaron y frotan la línea de tiempo de ida y vuelta de finalmente fundada. Escucharás, bienvenido. Te extrañamos. Bien, entonces tenemos una víctima. Puede ser dibujado por alguien más. El truco con él es un par de trucos en realidad es que el trazo alrededor del exterior tuyo probablemente sea negro, no es importante. Es el relleno si lo intento y en realidad lo ha hecho o como escapar. Bien, entonces ahí está mi vector, tiene un trazo si lo pongo en la parte posterior, como hicimos antes, seleccionarlos a los dos, hacer una máscara. Es hacer una mezquita. Es solo hacer una muy delgada, pequeña. La taza de café está ahí en alguna parte. Bien, pero no tan útil. Entonces voy a deshacer, deshacer así mis trazos en el frente o mover mi taza de café hacia atrás. Seleccione el trazo. Voy a deshacerme del trazo en un relleno. Y es el relleno, no importa de qué color sea, es lo que le va a dar a la máscara es Maschine Así que lo voy a enviar a la parte de atrás. Estoy usando mis corchetes. Usando el primero de los corchetes para enviarlo al dorso. Seleccione ambos, Hacer Máscara. Al mirarnos, hicimos una máscara y vamos a pegarla en una tecla circular 0 en tu teclado. Mantenga presionada la tecla Mayús Opción en una Mac, alt la tecla Mayús en una PC para arrastrar círculo perfecto desde el centro. Consíguelo. Entonces está alcanzando el pico de arriba, envíelo a la parte de atrás. Dale un color. Déjame usar mi color primario local. Consígalo tipo de posición ahí amablemente. Y voy a agregar una sombra paralela por ningún motivo que no sea que se vea genial. Entonces lo estoy agregando a la taza de café. Bien, y lo que voy a hacer es querer este tipo de grande y elevada Así que voy a ir 50 en realidad. Bueno eso no es lo suficientemente digno. Cien. Y si lo difuminas como 200, obtienes este tipo de como a mí me gusta bastante. ¿Ves a lo que me refiero con el desenfoque ahí? Voló, encendió, apagó encendido. En fin, esa es una forma de usar la herramienta pluma para hacer máscaras en Figma. No tiene nada de malo. Funciona muy bien con bonitos bordes nítidos. Simplemente tardó mucho más. Mucha gente todavía usa la técnica de la herramienta pluma en lugar de algunos de esos trucos de Photoshop, totalmente bien, solo lleva más tiempo. Con lo que te vas a encontrar problemas es que tienen uno de mis cajones de basura o ¿ está ahí el cajón de basura? Son sus cajones de basura donde guardo estas cosas que no ves es mi vida, mis cosas del gusto. ¿Puedes ver Enmascarado? Esto sería fácil y será fácil justo hasta aquí. Y entonces quién sabe lo fácil que sería eso, entonces realmente necesitas algo como Photoshop. Cualquier cosa está desenfocada, se mezcla un poco con el fondo, se superpone la luz Lo hace complicado con la herramienta pluma. Pero los productos, cosas como esta son súper fáciles aquí. Terrible con la herramienta pluma. Genial y Photoshop. Bien, eso es. Así es como usar la herramienta pluma y Figma para hacer nuestra máscara vectorial Lo importante para recordar es que el relleno tiene que estar en tu mezquita para que funcione correctamente. De lo contrario, no trabajo. Bien, eso es. Te veré en el siguiente video. Bien, pensabas que se había acabado. Estoy de vuelta. Vengo del futuro. Bien. Estaba haciendo algún otro trabajo para un proyecto diferente y me olvidé de mi snap back on. Así que justo cuando terminaste de hacer la herramienta pluma en la lección este ejercicio, recuerda que tus acciones rápidas salen de control, adelante slash e ir snap, y luego ir, Apuesta, pandilla Ábrelo de nuevo, chasquea, te vuelves a poner y haz los tres de esos. Bien, vete tú. Ahora puedes continuar 102. Cómo usar los modos de mezcla de capas de color en Figma: Hola a todos. Oye, este video, vamos a ver algo llamado modos de fusión de capas. Pueden ser útiles con cosas como logotipos en blanco y negro, no transparentes, pero si echamos de menos con el aspecto de los modos de fusión, podemos hacerlo transparente. Podemos ver a través de las cosas blancas. Es un buen hackeo. Sin embargo, para lo que me gusta usarlos, ¿esto puedes ver imágenes de fondo? Le quitamos todo el color. Entonces podemos jugar con los modos de fusión de colores, bien, para hacer algunas cosas geniales con solo un color sólido pero de color superpuesto consigue algunas cosas interesantes. Nosotros también lo hacemos con tipo. Este es tipo editable. ¿Puedes ver? Y solo está afectando un poco el trasfondo de una manera interesante Modos de capa de color, modos de fusión, modos de mezcla. Hay muchos nombres para ello, pero es la forma en que interactúan las capas. Y podemos usar esto a nuestro favor para hacer algún tipo de cosas geniales y creativas. Y está saltando, ¿verdad? Empecemos por traer el logotipo, uno-dos-tres, las mismas versiones del logotipo de Bring Your Own Laptop Y en un apresto, puedes usar un modo capa porque el momento que tengo este fondo blanco, es un JPEG, no hay transparencia comprada. Puedo fingirlo yendo por aquí, mi panel de Capas en lugar de pasar hasta que se mueve a través El editor no tiene que moverse tan rápido. Vamos a hacer zoom Bien, y podemos ir normales, no hace nada oscuro en hablar para multiplicar eso. Tenemos esta cosa que parece transparente y funciona. Obviamente, es mejor ir a buscar la versión vectorial en lugar un JPEG con el modo de fusión de capas configurado para multiplicarse. Pero bueno, funciona. Aquí hay una versión whiteout. Tendrás que jugar con los diferentes ajustes para ver qué funciona para tu logotipo. Aligera estos tres grupos. ¿Ves como que todos estos hacen lo mismo? Todos estos tipos de hacen lo mismo. Entonces las pequeñas líneas ahí, bien. Entonces no todos son exactamente iguales, pero como que los agruparon. Te vas como una versión whiteout. Funciona muy bien con logotipos rectos de color blanco y negro recto. Depende del logo, los giros en el color también. Entonces otra vez, es moverlo por ahí, Zooming y es echar un vistazo Entonces multiplicar, Kesey, multiplicar entre Multiplicar y normal. De hecho, cambia un poco el verde. Y yo tendría un problema con eso como el diseñador que hizo el logo, Bien. Por lo que dependerá del color de su logotipo. Puedes ver que podrías encontrar uno que esté lo suficientemente cerca para una maqueta, bien, hay muchas opciones diferentes aquí abajo Pero eso es interesante. Malo, podemos ponernos realmente creativos con ello, es vamos a traer una imagen. Así que vamos a traer una imagen llamada mezcla de capas. Yo sólo voy a arrastrarlo aquí es una talla, demasiado pequeña. Bien, así que tengo esta imagen, pero quiero hacer tal vez es simplemente copiar el relleno Porque si copio todas las Propiedades, recuerda nuestro atajo Opción de Comando C. Y hago click en este marco aquí, y voy a Comando Opción V. Funcionará porque en segundo plano. Pero lo que quizás no te hayas dado cuenta de esto, mira esta plaza. Mientras que antes de que se fueran, consiguieron sus proyecciones de esto es lo que puedes hacer es en realidad simplemente agarró la forma en que la agenda aquí, copiarla así, e ir a pegar Bien, así que está en la parte de atrás de mi marco. Quiero hacer un par de cosas. Quiero esta imagen aquí, probablemente saque toda la saturación y juegue con el contraste, probablemente la exposición. Bien, quería estar un poco oscuro y malhumorado en el fondo Así que puedes hacer algunas bonitas como todas las típicas cosas de edición de fotos dentro de Figma. Pero lo que quiero hacer ahora es superponer algo por encima de la parte superior. Así que sólo voy a agarrar mi herramienta de marco. Yo uso una herramienta rectangular. Por qué estoy decidido a no usar la herramienta de marco aquí es porque sé que quiero que esto solo sea un fondo. Y si hago un marco y empiezo a arrastrar las cosas en su un poco como embebido dentro Podría hacer un marco y cerrarlo. Sólo voy a usar R para la herramienta rectángulo. Rectángulo que es del tamaño de mi fondo. Bien, aquí vamos. Perfecto. Llénalo con un color. Voy a escoger color fiduciario listo. Vamos. Y solo hay que hacer es cambiar esto de paso a través, lo normal no hace nada, y entonces puedes encontrar lo que te funcione Lo bueno de hacer esto es que podrías cambiar la imagen de fondo como si pudieras simplemente hacer imágenes como esta y Photoshop, bien, hacer un montón de ellas. Pero en realidad lo que puedes hacer en CSS, tu desarrollador puede hacerlo diseñado, puede hacer, o podrías hacer, es que puedes tener dos cosas. La imagen de fondo, que se puede sacar todo el color de tal vez la saturación del suelo que se puede hacer por caso de código con el fin de hacer cada imagen. Y lo mismo con esto que es exagerado aquí. Puedes jugar con estos modos de fusión de capas. En CSS. Se les llama modo mezcla. Tener una mirada hacia arriba que es una clase CSS. Bien, puedes hacer algunas cosas bastante geniales. Voy a elegir uno. Aquí vamos. Ahora hemos hecho todo el fondo, pero podrías hacer algo interesante con, oh, lo sé, de hecho una manera aburrida podría ser algo así. Veamos esto redondeando las esquinas, manteniendo presionado Shift y arrastrándolo hacia arriba. Podrías hacer algo como esto. No sé lo que estoy haciendo. Esa no tiene que ser la cobertura completa. Tengo que jugar alrededor de mis capas. Tienes que rematar lo que voy a hacer. Voy a saltar a hacer algún dibujo. Espera ahí Bien, probablemente debería llevarte a dar el paseo. He hecho dos rectángulos y he hecho doble clic para entrar, vamos a uno de ellos fuera o haga doble clic en el que está arriba Y voy a arrastrar en realidad voy a agarrar mi herramienta pluma, mantener presionada mi tecla Opción en una Mac para deshacerme de ese punto. Y eso es un poco genial por sí solo. Hago clic en Listo. Lo que podría hacer es agarrar el otro rectángulo que escondí e ir Tú mismo, haz doble clic en él. Agarra este, un poco arrástralo por aquí. Oh, eso podría tener genial. Voy a hacer eso. ¿Va a quedar genial? Todo lo que vamos a ver, voy a elegir otro color porque lo que queremos es superponerse. Bien, eso es lo que he decidido que quiero hacer, es que voy a tratar de encontrar algo que tenga un solapamiento golpista. Y podríamos tener juego donde yo estoy los modos de capa aquí. Bien, entonces mientras esto se ve genial, eso se ve genial, esa superposición no es genial y tiene que ver con el modo capa. Podemos hacer todo tipo de cosas aquí para encontrar algo que sea bastante genial. ¿Eso es genial? Oh, no lo sé. Todo Eso está bastante bien. Entonces aceleras las edades, garabateas y dibujando cosas que parecen un poco Bien, ese es el que más me gustó. Oh, ahí vamos. Valió la pena. Despojado por el medio. Tratemos también con algún texto. Podemos hacer lo mismo, bien, así que acabo de duplicar. Empecé a escribir y luego iba a cambiar el tamaño y pensé, sé que voy a hacer es que usaremos algunos de nuestros atajos Entonces, para hacer tipo, puedes usar el atajo para el tamaño, lo cual es bueno para cosas pequeñas, que es Command Shift, Control Shift en una PC y eso mayor que y menos que a menudo aunque. Y quiero hacer cambios realmente grandes. Sólo voy a usar la herramienta K para escala y simplemente arrastrarla hacia arriba. Probablemente quiera una aún más grande. Bien, los otros atajos, voy a seleccionarlo todo. Ahora probablemente no vas a recordar estos de memoria, pero recuerda que tienes que imprimir la hoja de acceso directo depende tu tipo nerdiness como font-weight por alguna razón hay un buen atajo para mí, no será para mucha gente, pero es opción de comando o Control Alt en una PC y solo usa eso mayor o menor Encuentra algo que sea agradable y grande. Opción Shift o Alt Shift en una PC para jugar con la altura de línea Estamos teniendo esta malla porque era un tipo tan grande. Quién es el decreciente del espaciado entre letras. Bien, así es. Mantenga oprimida la tecla Opción o Alt y esa misma mayor que, menor que. Bien, ¿Y por qué queremos estar escuchando y darle a Escape en mi teclado? Porque si intento usar la tecla V, el atajo no funciona cuando estás en la herramienta Tipo. Voy a deshacer, pulsa la tecla Escape. Y voy a rotarlo alrededor y hacer texto gigante colorido. K para la herramienta de escala. Y escojamos un color. Amarillo fangoso. Ahí vamos. Va a cambiar cuando miremos nuestros modos de capa. Entonces si miro quería algo así como una cosa de fondo, no como un texto real como legible. Yo sólo quiero que sea una cosa de fondo genial. Voy a encontrar algo que funcione. Espera abajo, vas a retorcerte arriba y abajo esto por un tiempo. Conseguir va a ir con superposición. Tenía la cabeza **** a un lado todo el tiempo. Y podría jugar con la opacidad de esta capa. Aquí. Voy a bajar. Esto es solo atajo con él seleccionado hit 550 a en tu teclado, solo el número dos. Todo bien. Eso es lo que estoy buscando. Bien, eso es modos de fusión. Hay muchas cosas que puedes hacer con ellos. Se pueden implementar programáticamente. El ENS, tendrías que hacer un trillón de estos. Podría ser que sea cual sea el valor predeterminado, imágenes subidas eliminadas, transparencia, Ed Type, darle la mezcla, mezcla, modo CSS. Y puedes tener páginas luciendo realmente únicas que no tenías que hacerlas todas. Bien, eso es, modos de fusión, de Color. Te veré en el siguiente video. 103. Proyecto de clase 13 - Anuncio social: Hola a todos. Este proyecto de clase, vamos a hacer un anuncio en redes sociales. Así que vamos a unir muchas de las técnicas que hemos aprendido en esta sección sobre imágenes y principalmente recorte Entonces lo que he hecho es que lo he puesto en su propia página. Bien. He usado el marco. Bajo las redes sociales. Puedes usar cualquiera de estos. No me importa qué relación de aspecto uses o qué plataforma. Quiere que hagas algo que sea para una persona, no es tanto un reto de diseño. No te preocupes si estás como, Oh, no quiero hacer algo, solo un poco meterlo todo ahí Es un anuncio para promocionar tu app. Aunque algunos de ustedes, tómense su tiempo, hagan algo bonito. El problema y lo complicado es, no me importa qué hay aquí, dónde va, y lo que digas, el lenguaje que usas, las imágenes que usas. Realmente es más un reto técnico, ¿de acuerdo? Va a ser como creativamente, va a ser bastante complicado tratar de encajar todos estos en el anuncio en alguna parte Bien, entonces lo que quiero es que quiero las marcas de texto y los modos Alpha Mask, Luma Mask, spillover mask y layer blending Hay alguien que pueda ser complicado como una máscara de derrame, no todo el mundo ha tenido una máscara muy bien o usa la herramienta pluma, hazlo mejor No vas a presentar si no puedes hacerlo. Solo un recordatorio también mientras trabajas como un par de atajos que aprendimos antes. Si estás en una Mac, mantén apretada la tecla Comando mientras arrastras los bordes Y lo hemos recortado en una PC, es Control. Y salta a ese modo de cultivo. Tal vez puedas mantener pulsado Opción en una Mac, alt en una PC y hacer doble clic en ella. Ahí vas. Y salta un poco a este modo de recorte un poco genial. Sólo un recordatorio, no tienes que usarlos, pero ahí tienes. Entregables, una captura de pantalla, o puedes exportar tu add K y subirlo a las asignaciones Ahora, cuando estás exportando, puedes simplemente hacer una captura de pantalla como hemos hecho antes, o puedes seleccionar en tu marco aquí en tu Inspector de Propiedades, si no has terminado de exportar en la clase Essentials, aún no lo hemos hecho en este curso. Simplemente puede seleccionar en el marco y decir exportar como JPEG hasta usted, de qué manera desea hacer. No me importa. Sin embargo, para este. Me encantaría ver lo que realmente haces. Compártelo en redes sociales, usa el hashtag Figma Advanced Me encantaría ver lo que haces y no lo olvides, especialmente en la sección de tareas, si has visto el de alguien más, sería genial si pudieras dejar algunos comentarios no solo sobre el trabajo de una, sino de dos personas y vas a hacer una aplicación de redes sociales, tratar de exprimir todo eso ahí. Haz un mejor trabajo que Dan. Santo moly. Bien, te veo en el siguiente video. Disfruta de la tarea. En realidad no hay tarea, disfruté el proyecto de clase aprendiendo cosas 104. Cómo agregar video en Figma: Bien todos. Bienvenidos a esta sección de videos y al curso. No puedo dejar de sonreír porque amo a este tipo. Sin embargo, el video aleatorio de un pug me hace feliz. Te voy a mostrar cómo conseguir el video dentro del proyecto. Algunas de las razones por las que podría no estar funcionando para ti. Algunos de los requisitos, pros y contras. Y claro vamos a poner un plug en algunos textos gigantes, lo cual es increíble porque dice pug life Bien, está saltando. Bien, para empezar, hice un fotograma de video. Para traer un video. Lo traes igual que una imagen, y puedes usar tu comando de atajo shift K o controlar Shift K. Y en tus archivos de ejercicio hay una opción de video si están atenuados, eso es malo Una de dos cosas está pasando. Estás en un plan gratuito o estás en un plan de pago como una organización pro educación empresarial, hay algunos diferentes, pero incluso si estás en esos, no puedes estar en borradores Bien. Así que vuelve a mi página de archivos. Estoy en borradores. Ahí está mi archivo Figma Soy parte de un equipo, mi equipo de Bring Your Laptop. Es un equipo pagado y puedo arrastrarlo a él. He hecho una carpeta llena mía llamada Curso Avanzado Figma Cuando entra ahí, puedo abrirla. Y probablemente todavía va a quedar atascado anuncios entrando. En ocasiones hay que reiniciar Figma para que sepa dónde está A veces lo hace, a veces no. Ahora podemos traerles video. Pero aquellos de ustedes que solo tienen una cuenta gratuita, solo pueden ver esta parte. Aquí hay algunos videos sucesivos. Y esta sección sobre videos, hazlos porque no sólo aprendemos sobre video, y estarías como, no estoy usando video. Construimos algún tipo de componentes complejos. Añadimos algunas propiedades de componentes. Autodiseño. Sí, miro a través aunque no puedas hacerlo exactamente. Como dije, puedes traerlo como una imagen. Bien, voy a traer esta de aquí. Debería traer esto como porque estoy haciendo algo techno Como si fuera a hacer este disco porque los bichos son increíbles. Me hacen sonreír. Veo uno sin razón buena. Abrazos. Oh, increíble. Bien, y lo colocas igual que una imagen en la que puedes hacer clic quiere obtener el tamaño completo, lo que haces a lo grande, ¿bien? O simplemente puedes hacer clic y arrastrarlo y eso es lo que voy a hacer. Voy a arrastrarlo hacia afuera, esperar a que se cargue, haga clic y arrástrelo hacia afuera. Mantenga pulsada la tecla Mayús. Entonces viene a través de las proporciones adecuadas. Bien, no lo voy a recortar. Y van, vamos a previsualizarlo como es factorizando. Entonces voy a cambiar al modo de vista previa. ¿Quién recuerda cambiar entre diseño y vista previa? Ya ha pasado un rato. Shift a, ya lo tienes. Bien con este de aquí, voy a iniciar un punto de flujo para que simplemente salte a esta página correcta. Bien, ahí está mi pug, está jugando a un Fresco. Bien, una cosa estoy saltando desde el final. Terminé el video. Yo estaba como, Oh, debería mencionar esto por aquí. Entonces lo ponemos en una imagen usando nuestro atajo, bien, y solo lo colocamos, en realidad puedes simplemente dibujar un marco y aplicarlo como hacemos una imagen, bien, así podemos darle un relleno de sólido, buen video. Haga clic en Elegir video. Si dice, Oye, realmente no puedes explicar por qué. O es en borradores o no estás en una cuenta de pago. Y tal vez eso pueda cambiar y puedas traer tu dulce imagen. Oh dulce video, perdón. Acabas en el mismo lugar. Bien, ambos tenemos un contenedor con nuestro relleno. Este de aquí es un contenedor con relleno. Se ven un poco diferentes en el panel Capas. ¿Puedes ver éste? Él es mi marco llamado frame 24, mal Dan. Este de aquí es solo, tiene un pequeño icono bonito para video, pero puedes conseguir que hagan exactamente lo mismo. Bien, continúa con el video. Y sí, hacemos algunos textos video en él. Pero eso viene más adelante. Ignorar eso. Un par de cosas es cuando estás lidiando con la reproducción del video. Y a lo mejor hay Design View y luego hay prototipo para ti. La vista de prototipo tiene algunas cosas que ver con el video que puedes ver en el diseño. Bien, así que por aquí, vamos a mover esto por aquí. Así que la reproducción automática está encendida. Ahora para previsualizarlo Comando, Opción return, Control, Alt, return on your keyboard. Volví a mencionar, solo un pequeño recordatorio. Se puede ver que no juega, que no está ahí DIVERTIDO. Lo que podemos hacer bajo prototipo, podemos editar la interacción. Aquí es cuando se toca. Me gustaría que reproduzcan pausas de video y todo eso. Hay video toggle. Perfecto. Ahora vamos a darle un adelanto. Vamos tres, así puedo llegar a mi tercera pestaña, controlar tres en una PC. Sólo otro recordatorio. ¿ Puedo ver esta pose? Sólo estoy haciendo clic una vez. Tocando para jugar. Impresionante. Bien, carlino feliz Antes de seguir adelante y agregamos controles en el siguiente video, solo para saber que el video es simplemente llenar K como cualquier otra cosa. Si vuelvo a Design View, verás que es un relleno como nuestra imagen. Para que podamos hacer las cosas con esos campos como una imagen. Podemos recordar el atajo para mantener pulsado para comenzar a recortar. Bien, es Command en Mac, Control en PC para que podamos recortar video. Podría hacer que más tarde sea más divertido para el desarrollador producir la aplicación en esta extraña forma que has producido Normalmente el video es un poco atascarse en un cierto tamaño Gemini, es 16 en la parte superior y nueve abajo en el lateral Se llama la relación de aspecto. En fin, si no sabes mucho de video, puedes recortarlo. Sin embargo, puede causar problemas como una imagen. Puedo dibujar un marco aquí abajo y te puedo decir, puedo copiar propiedades o puedo agarrar solo el relleno, ir a copiarlo y pegarlo. Moverse. ¿Se puede poner en texto? ¿Cómo puedes esperar ahí totalmente? Bien, tupac no sería lazos felices porque ya lo hemos copiado, podría ser el relleno Debería poder seleccionar esto e ir a pegar. Y luego vas, vamos a asegurarnos de que el video y el prototipo sea reproducción automática Vamos a ver esto. Haz feliz a Dan. Oh, el perro que siempre parece que está empujado contra la ventana. Bien. Entonces sí, el video se puede usar como imágenes. Muchas de estas cosas, no voy a cubrir todo lo que puedas hacer, pero si puedes ir con una imagen, podemos hacerlo con un video. Cosas que debes saber que Kennan contexto. Entonces lo primero es que necesitas estar en profesionales del plan pagado, el inicial. Y hay muchos de esos algoritmos que verifican, podrían cambiar esto en este momento. Se paga solo si tienes una licencia gratuita de Figma, podrían hacerlo ahí dentro Es un poco raro que sea una parte de lo pagado. La otra cosa es que necesita no estar en borradores ya que no puede estar bajo gotas Tiene que estar en un equipo de pago. Ese es el mío. No son gratis, Control de cama libre para. La otra cosa es que soporta el formato de archivo más general. Entonces Mp4, probablemente el MOV más común. Hay otro, usa web él también. Normalmente así es como obtienes este tipo de cosas que no pueden ser demasiado grandes. Creo que 100 meg es el límite para un video de imagen que entra si necesitas hacer las cosas más pequeñas y cortarlas, probablemente algo así como Adobe Media Encoder. Ese es el que uso de todos modos, eso es parte de la suite de Adobe. Es realmente bueno simplemente recortando las cosas y haciendo que el tamaño del archivo sea más pequeño que lo que es la otra cosa en el momento de esta grabación, videos luego se reproducen en la aplicación móvil, lo cual es un dolor Entonces, antes de ir y pasar años haciendo que esta cosa funcione, sabiendo que vas a hacer pruebas de usuario en campo en la aplicación, simplemente no vas a funcionar. Entonces podrías simplemente hacer que parezca un video, pero no funciona en la aplicación en este momento. Entonces vuelve a verificar eso. La otra es, ¿de dónde consigo mis dulces imágenes de pug? Y los obtengo de para esta demostración. Y hago videos estreno Pro After Effects. Si solo necesito algunas cosas de marcador de posición, salté a algo así como píxeles También son buenas para las fotos, pero hay una opción de video y tengo una biblioteca muy grande. Esto va a cambiar. Puedes ver ahí está mi pug Buscar Y encontré a este tipo aquí, revisa sus licencias, pero la mayoría de estas, o puedes usarlas comercialmente sin retribución, pero verifícalo tú mismo Si necesito videos pagados, usaré elementos de Adobe Stock o Envato Eso es lo que uso para mis cosas. Si quieres alguno de estos, puedes usar estos enlaces de afiliados aquí. Me dan un pequeño corte cuando te inscribes, no te cuesta más. Es muy ganar-ganar De lo contrario este sitio píxeles para sólo algunos videos de marcador de posición Bien, entremos al siguiente video. 105. Cómo crear un video de reproducción automática de fondo en Figma: Hola a todos. Oye, vamos a hacer un video de fondo en Figma. Si estás pensando, Oye, Eric y yo ya tenemos la nariz para hacerlo, tú sí. Yo hice este pequeño video corto aquí para la gente saltando fuera de contexto y me gusta, ¿qué fue eso? ¿Cómo lo hacemos? que puedan saltar a este video, saber cómo hacer un video de fondo es solo un par de pequeñas cosas diminutas que podrían ser diferentes, video habitable usándolo Es fácil como es hacerlo. Bien, puedes hacerlo a cualquier marco viejo. No voy a hacerlo a ningún viejo encuadre y al fondo del marco de mi teléfono aquí Entonces con su seleccionado, tengo un relleno. Sólo voy a cambiarlo cambiándolo haciendo doble clic en el blanco ahí En realidad, hagámoslo de esta manera porque sí causa un problema. Si hago clic en un segundo relleno aquí, lo cual está bien, excepto el superior es del 20 por ciento. Entonces no quiero que mi video sea 20%, quiero que sea 100. Entonces voy a ir a su video sólido, y voy a elegir video si no puedes pasar por aquí, recuerda que necesitas estar fuera de tu carpeta de borradores en un plan de equipo pago Y voy a elegir mi como mi ahí vamos. Abstracto fondo video cosa. Dale un segundo. Los videos hacen estresar las cosas y por defecto debería funcionar. Bien, pero podemos verificar yendo al turno E. Bien, tengo mi fotograma seleccionado, está configurado para reproducción automática Voy a conseguir que establezca un bucle, lo cual es importante. Tenga en cuenta, asegúrese de que se enrolla. Lo hace. Quiero cualquier audio. Yo no. Esta es una imagen de fondo porque hay un video de fondo. Vamos a previsualizarlo. Ahí vamos. Oh, ahí está. Voy a ir un poco de fondo Gráfico va. Voy a tener que jugar con el tipo para que sea blanco, pero tienes la idea, bien, si buscas imágenes de fondo, fondo abstracto es útil, Tim para fondo abstracto es útil, conocer y Looper toro Si escribes la palabra Looper bull, significa que el principio al final de la misma Entonces cuando hace loop, no hay gran salto como este de aquí no tiene uno. Así que es agradable y capaz de bucle. Bien, eso es videos de fondo en Figma 106. Cómo reproducir una video mientras pasas el cursor en Figma: Hola a todos. En este video, vamos a crear un video que sólo se reproduce cuando se coloca el cursor sobre él. Bien, una nota muy importante es que estoy flotando sobre un celular, lo cual es imposible, ¿bien? Solo se puede hacer esto en una versión de escritorio. Bien, nosotros, alguien tiene un ratón que en realidad puede pasar el cursor sobre K, pero estoy poniendo el mío en un iPhone porque eso es lo que tenía tirado alrededor de los marcos que hemos construido Así que vamos a saltar y te voy a mostrar cómo flotar y jugar. Bien, así que voy a importar un video en un video Traerlo para obtener un poco más o menos el tamaño correcto aquí en mi tablero Voy a mantener el turno mientras sale para asegurarme de que es la relación de aspecto correcta, los pulgares de mayor ancho se tambalean alrededor. Bien, y voy a ir a sostener a Shift, conseguir que coincida con lo mío en la parte inferior de ahí. Genial. Ahora la forma en que la cosa es que no puedo hacer esto. No puedo decir que bajo prototipo tengas una interacción que diga cuando estoy, esto es lo que pensé que iba a hacer. Al igual que mientras se cierne. Quiero reproducir el video. De barril. Encendido. Esto podría cambiar. Bien, así que revisa de esta manera porque es mucho más fácil la forma que te voy a mostrar. Pero en el momento en que no se puede hacer reproducción de video mientras se cierne en esta indirección, podría ser una alternativa Hazme saber en los comentarios si lo has descubierto mejor que yo aquí, y sin embargo volveré a grabar este video por el momento Voy a deshacerme de esa interacción. Voy a decir video, ven aquí abajo. Voy a necesitar hacerte un componente. Bien, voy a cambiarle el nombre. Llamemos a este video Hover Play. Juega, o eso es Comando o Control R. Voy a necesitar variantes, se llama Rosa, van así y dan click en el conjunto de componentes, vuelven al diseño. Tenemos una propiedad llamada probablemente uno. Llamemos a esto reproducción. ¿Bien? Y tenemos dos varianzas, échale un vistazo, tenemos por defecto, que es la de arriba, y esta va a ser pausa Quería que me pausaran por defecto, estoy tabbing abajo y el segundo valor va a ser jugar para liderar para que eso suceda Esto es algo interesante solo en videos en general, mira si me resbalé en esta variante superior para hacer una pausa, necesito moverla arriba porque la señora con mi cabeza Bien. ¿Algún el mismo orden que escuchar? Pausa en la parte superior. Bien. Si voy al prototipo, que es Shift D, no tengo la reproducción automática de antes Estás como, Oye, con el Zant desaparecido, tweed. Ahora bien, debido a que esta es una variante en realidad se envuelven los videos ahí dentro. Y estas mi reproducción automática. Pero si hago clic solo en el envoltorio exterior, que es mi variante, no se puede ver mucho de esas cosas. Así que solo ten en cuenta que estás buscando el video en el fondo dentro de él. El primero es la reproducción automática desactivada. En el segundo, haga doble clic para entrar o mantener presionado Comando o Control, y haga clic en la inmersión dentro y asegúrese de que la reproducción automática esté establecida en bucle Probablemente voy a conseguirlo. El sonido apagado depende de lo que quieras hacer. No creo que haya sonido en este video, pero se puede encender y apagar. Entonces ahora necesitamos las interacciones. Voy a hacer click en este top. Bien, voy a decir cuando vayas a éste, no lo haré de barril. Quiero ir mientras flotaba, pero ahora puedo ir a reproducir pausa y me deja que no te haya ahí en drag mientras tengo ya tengo uno Ya tengo uno. Entonces ahí está esta de aquí. Vamos a deshacernos de eso. Tengo mientras flotaba. Ahora no quiero revisar el queso. Mi cerebro a veces no lo queremos en Hover. Lo que queremos hacer es decir en hover, no quiero que reproduzca pausa Entonces, deshagámonos de esto. Vuelve a empezar, Dan. Bien, lo harás. Voy a dejar esto aquí. Entonces al pasar el mouse, no quiero que reproduzca pausa. Quiero que solo cambie a esta variante. Entonces vamos a cambiar para cambiar a, a reproducir, a la versión play, que es la inferior. Entonces mientras se cierne, cámbielo a eso. Entonces este ensayo a la reproducción automática y debería ir. Vamos a arrastrar un duplicado, mantenga pulsada la tecla Opción o Alt. Arrastre cualquiera de estos hacia fuera. De hecho, agarra todo el conjunto de instancias, bien, no solo esa parte de él. Y aparte de que no se alinea, alineando. Ahora, vamos a darle ya un adelanto. Tengo mi vista previa abierta. Yo no. Pollos danzantes. Comencemos este flujo aquí y veamos cuando vayas. Mira eso. Él lo consiguió. Es más bien escenificada. DJ bien iluminado se sienta. De todas formas. Pero ahí vamos. Bien, eso es. Solo recuerda que no puedes flotar sobre un teléfono móvil Sólo estamos haciendo porque eso es lo que tenemos por ahí en términos de marcos. Bien, eso es todo por ahora. Te veré en el siguiente video. 107. Proyecto de clase 14 - Hover Play: A quien puedo sentirlo. Siento que te gustaría amén, espero que nos haga proyecto de clase. Se trata de un proyecto de clase. Yo solo quiero que hagas ese mismo tipo de tarjeta de video que se reproduce cuando pasas el cursor sobre ella. Crea una tarjeta de video que se reproduce cuando pasas el cursor sobre ella. Ahí vas, así, pero encuentra música que se adapte a tu género o usa tu propio lindo perro pequeño. Cualquiera de los dos. Yo solo quería que esta cosa funcionara y quiero que te lleves un video tuyo interactuando con ella. Así que comparte el enlace de video de tu interacción Hover, subirlo a la sección de asignaciones, subirlo a las redes sociales también si quieres. Me encantaría verla. Asegúrate de usar el hashtag Figma Advanced. Y si alguien pregunta, díselo, ve a ver a Dan podría revisar su increíble curso. Y todo es solo un recordatorio para comentar a los hovers de otras personas Este de aquí es más bien un buen trabajo, choca los cinco, a menos que haya algo Crítica al respecto Esto es más demostrar que puedes hacerlo tipo de proyecto. Bien, eso es todo. Te voy a ver en el siguiente video. 108. Cómo hacer que una obra de teatro haga pausa para video en Figma: Hola a todos. Oye, en este tutorial, obtendremos este video para se reproduzca cuando presionemos el botón Reproducir, pausar. Cuando pulsamos el botón de pausa conseguimos el sonido se encienda y apague para el botón de silencio. Y vamos a conseguir que se salte adelante 5 s. en realidad son solo 2 s porque depende de que escoja el video que solo tiene 4 s de largo. Bueno. En aquel entonces, pero bueno, funciona. Vamos a bucear para poder empezar. He traído algunos íconos de nuestros archivos de ejercicios. Los he puesto en su corte icono se llama Icono de video. Hay seis de ellos. Los compré en, lo hizo del tamaño apropiado. Yo uso 3d2 pixeles y los hice blancos. Y es toda mi página de componentes. En esta otra página, tengo una imagen. Tengo un video que es un pug que está en una moto. Por supuesto, es solo un video importado de la manera que quieras y pon una caja debajo. Entraremos en un poco más de detalle en el siguiente video, pero por el momento, apenas se está poniendo en marcha. Entonces primer paso, voy a necesitar a Shift I, y voy a ir a mis componentes. Voy a escribir en juego. Entonces tengo un botón de reproducción aquí. Voy a dejarlo, ponerlo donde quiera, y voy a cambiar al modo prototipo shifty. Voy a decir cuando se haga clic o se toque esto, en mi caso, va a saltar automáticamente a esto, ¿ de acuerdo Pero si no lo es, bien, baja a reproducir, pausar, reproducir, pausar, buscar el video. Y la mente va a ser un toggle, toggle para empezar. Bien, y ahora va a adelantarlo. Voy a dar click al título del video. Vamos a previsualizar. Bien, video con audio. Ahí vas. Reproducir, pausar, reproducir, pausar. Un par de cosas que tenemos que hacer es una es que se reproduce automáticamente. Entonces lo tengo seleccionado. Voy a desactivar la reproducción automática. Entonces ahí está mi vista previa ahora, play era play pause. La otra cosa que podría querer hacer es que voy a tener un mudo por defecto. Puede que no lo hayas escuchado a través del micrófono aquí, pero hay audio en este. Si quieres el mismo video, está en tus archivos de ejercicio debajo de videos, se llama o5 Un poco la línea cortada un poco para que quepa más en mi ventana Bien, entonces lo que queremos hacer, no es fácil. Estamos haciendo la siguiente. No es fácil simplemente alternar entre un icono que es play y pause. Puedes, pero no puedes hacer ese Angular para reproducir el video en este momento, o al menos yo no puedo. Te voy a mostrar lo que vamos a hacer y si encuentras una mejor manera, avísame en los comentarios. Entonces lo que quiero hacer es que voy a hacer clic en este. Voy a Comando o Control D Así que dos de ellos, bien, y voy a cambiar este icono aquí. Bien, Entonces el ícono en este momento es el ícono de Play. Vamos. Buen icono. Voy a hacer una pausa, y vamos a seleccionarlo en modo prototipo. Haga clic en esto. De barril. Esto va a reproducir pausa, pero ¿ qué queremos hacer? Yo sólo quería hacer una pausa en esta. Me gustaría alternar. No, sólo quería jugar. Ahí vamos. Vamos a darle un adelanto. Verás, funciona. Entonces no es jugar, lo cual es bueno. Vamos a conseguirlo. Jugar. Pausa. Oye, Play. Ahí vamos. Vamos a poner en marcha un botón de silencio. Como te puedes imaginar, como te voy a mostrar los otros, pero va a ser lo mismo. Mismo. Parece apropiado. ¿ Eso se parece a Tailandia? ¿De todas formas? Igual, igual pero diferente. Lo que vamos a hacer es cambiar D. Vamos a reemplazar este por el silencio ellos muy fácilmente. Vamos a ir a prototipar shifty y decir, cuando esto es tap, no play, pause, mute, unmute Y vamos a conseguir que ese se conmute. Bien, vamos. Realmente no se puede oír. ¿Puedes oír? Bien. Es posible que lo hayas escuchado en el fondo. El editor podría haber levantado un poco el sonido para que puedas escuchar la moto Hagamos una más. Hagamos el duplicado. Mueva este de otro lado. Vamos a cambiar el icono. El que no estoy seguro de lo que es el ir adelante 10 s uno. Entonces, un poco miré algunas aplicaciones y ¿cuál es el bache adelante 10 s. Miré YouTube y audible y algunos otros. No pude encontrar uno específico, así que solo hice esto lo que hace punto de bucle aquí, pero encontré, bien, ese ya tiene 32, voy a hacerlo blanco Vamos a acelerar esto. Una cosa que volteé esta, vamos a deshacer eso solo porque no lo sabes bien, si solo lo arrastras finalmente voltea Entonces eso es lo que hice. Yo sólo voy a terminar y sostuve presionado turno y opción para que vaya desde el centro. Y luego solo me aseguré de que fuera el día dos pixeles. Sólo estoy mirando el marco por aquí. Ahí vamos. Entonces va 14 s aquí lo hicimos. Bien, ¿qué pensamos que parezca un icono propio y se convierta en un símbolo, renombrarlo Bien, entonces tengo ahora un símbolo que debería ir a mi biblioteca de componentes trayendo, lo dejaré ahí para engrosar la línea también Pero entiendes la idea, ¿verdad? Necesito instancias de ello. Ahí vamos. Sí, no lo suficientemente grueso, pero de todas formas, lo que queremos hacer por este turno D es decir, este de aquí. Cuando se toca, quiero que lo haga Así que sólo voy a hacer saltado cuatro y volver. José, el tiempo específico es el mismo. Puedes escoger una hora y vas a video para saltarla. Sólo voy a dar un salto hacia adelante. 5 s, 10 s. Oh, creo que quería ser cinco. No estoy segura. No estoy seguro de que haya videos a lo largo de 10 s. Se te da la idea. Bien, así que vamos a darle esa en Previas. Eche un vistazo, restablecerlo. No quiero restablecerlo porque no tengo flujo en este. Entonces necesito cambiar D. Así que necesito hacer clic en esta vez. Comencemos un punto de flujo aquí. Entonces por lo menos lo incumple. Se saltó el juego. Sí. Juega saltar diez o cinco. En mi caso, el mío está un poco dando vueltas hacia atrás. ¿Cuánto tiempo tiene este video entonces verifique esto antes de comenzar ¿Cómo comprobarlo? Ir al modo de diseño, da clic en nuestro relleno y es exactamente. Se puede fregar. Mira, tengo que saltar. Una vez más, te das la idea. Hagámoslo 1 s. Bien, tengo el mío para saltar 2 s. Espera, ¿Dónde te dijeron? Oh, sí, el genio Dan. Okey-dokey. ¿Por qué tenemos dos de estos? No puedo recordar. De todas formas. Tenemos que silenciar botones, tenemos una jugada un polo es que puedes hacerte la idea de detenerlo como una acción de parada ahí también, no se acostumbra muy a menudo en este tipo de playbacks Déjame llevarnos más lejos, bien, y solo un recordatorio también. Si tu video no se está reproduciendo por alguna razón, es porque tu archivo de diseño está ya sea en borradores, quería cosas como ya sea en borradores y todo lo que no estás en un plan de equipo pago, ambas cosas tienen que suceder en este momento para estar usando videos que podrían cambiar en el futuro Ahí vas. ¿Eso molesta a todos demasiado flacos Sí, debería ir a arreglarlo. No voy a hacer ahora mismo. Bien. Te veré en el siguiente video. ¿Bien? Bien, voy a cambiarlo. Componente principal Comando de componente GoToMineting . Haga clic en él. Así que saltamos directo. Voy a Shift haga clic en ambos de esos van 2-3. Vamos por tres, se ve bien. Mi en realidad no coincide mucho mejor. Quién será el círculo no es los derechos son un juego DIVERTIDO de tratar de igualar íconos. Eso es lo suficientemente bueno por ahora. Pasemos al siguiente video. Pero no nos lleva centrados. Eso es, definitivamente. Vamos a seguir 109. Cómo crear una tarjeta de video en Figma: Hola a todos. En este video vamos a hacer este botón aquí toggle. Veo reproducir, pausar, reproducir pausa. Así que es como el último video donde teníamos botones separados, pero este queremos que reproduzca y queremos que cambie el icono Para ello, tenemos que abordar esto de una manera ligeramente diferente. Pero también en este video, voy a pasar por todo el proceso de construcción de esta tarjeta reutilizable. Bien, así que va a ser va a tomar más tiempo porque quiero no solo saltar a la funcionalidad, quiero construirla para un poco de práctica. También ten en cuenta que este video aquí que empecé a usar tiene algunas luces intermitentes en él. Bien. Es una escena de discoteca Así que ten cuidado si eres sensible a estas luces intermitentes. Lo que quiero hacer es asegurarme de no utilizarlos en ningún otro video del curso. Perdón por eso. Bien, entremos en el proceso completo de diseño de la tarjeta de video Alguien como la página Componentes. Voy a traer los íconos que pasé por alto un poco en el último video Voy a colocar todo lo que estoy arriba en esta tierra de nadie, así que tengo un poco de área para ello, todos los diferentes tamaños. Entonces no quiero hacer es seleccionarlos todos. Y tienes que asegurarte a la hora seleccionarlos de que si haces una selección un poco perezosa, puedes ver que se agarró a los vencedores pero no el marco que ahí hay no el marco que Entonces, o arrastra una caja todo el camino al azar o haz clic en esta primera, tecla Mayús, agárralas todas. Bien. Y ahora lo mezcló Canyon Lincoln así que cuando los cambio todos de varios tamaños a 32, son todos del tipo de tamaño correcto. Mientras que los colores seleccionados de la selección van a ser blancos. Quiero que alguna vez los vea a todos alineados el uno con el otro. Entonces quiero agarrar a los padres de parada. Bien. Y solo quiero arrastrarlo por aquí. Y lo que tiendo a hacer es simplemente agarrarlos todos ahora e ir a distribuir centros horizontalmente Entonces les gustará un poco el espacio fuera. Se puede hacer eso con a veces, a veces se puede hacerlo con este ordenado. Pero en el momento en que uno se fue como una grilla, una grilla por ahí, gracias. Hagámoslos todos múltiples componentes. Y ahora estamos listos para pasar a un video. Desplazar uno. Y voy a poner el mío en mi página de iconos porque ahí es donde deberían ir. Y luego vamos a ir página abajo. He hecho una página vacía para nuestro video. Bien, y empieza. Tengo algo de texto. Tengo un video ahí, ¿no es video Oh, seis K de los archivos de ejercicios. Y tengo marco al fondo. Y apenas en un buen hábito, voy a poner mis tics dentro de mi marco. Voy a convertir mi marco en un diseño automático. Déjame que mi autolayout sea del tamaño correcto. Trabajar en el acolchado. Y voy a traer turno. Voy a traer un componente llamado Play. Voy a arrastrarlo, un poco aplastar sobre mí. Convirtamos todo en un componente. Y probablemente deberíamos trabajar en nuestros componentes principales de aquí, CO. Porque lo que vamos a hacer ahora es que en realidad no vamos a usar este botón. Voy a hacer que parezca que el botón se acostumbra. Pero realmente lo que vamos a hacer es tener variantes que van a alternar entre esta variante superior. Se les ha dado nombres. Entonces es clic en el Componente dijo. Bien, vamos por aquí y hagamos clic en la pequeña configuración. Y llamemos a este modo Play. Modo de juego. Pestaña hacia abajo. Esta va a ser pausada Éste, uno va a estar jugando. Ahí vas. Pausa y reproduce. Entonces pensé que tenía mi nombre mezclado. Sigamos adelante. Entonces, lo que queremos hacer es este de abajo de aquí abajo. Voy a seguir haciendo clic hasta que tome mi instancia de ese icono y no voy a hacer ninguna Propiedades de Componente elegantes. Y vamos a decir, solo un poco alternar entre estos dos aquí Porque como la pausa, entonces lo que quiero hacer es que ellos cuando se haga clic en esto, así que voy a cambiar a modo shifty a prototipo, ir ahí abajo y decir de toque, cambiar al modo de reproducción de juego Se está reproduciendo, pero se llama el botón de pausa. Si entiendes lo que quiero decir ahí. Bien, disuelva, vamos a maldecir eso por el momento. A ver si funciona. En realidad, Layouts comando, click, Control, click para sumergirse en el video. Es a una reproducción automática en el primero apagado, debe dejarse encendido, en el otro Eso es Option o Alt, arrastra una instancia de mi componente principal y ponlo todo. Ahí hay una fila, cabaña que vamos. Oye, lo estamos haciendo. No vuelve a alternar. Entonces queremos ir de ahí. Cuando hayas terminado, sube ahí y debería chasquear a todo. Vamos a darle una oportunidad a eso. Ahora. Pasemos al modo prototipo. Comencemos un nuevo punto de flujo para que podamos en el pequeño botón Reproducir de ahí. Bien, línea predeterminada al medio, ignora esa jugada. Y luego vuelve a alternar para pausar, reproducir, pausar. Ahora lo que pasa es que se detiene un poco donde está. Un par de cosas para ordenar esto. Una es la brecha que ahí no podemos ver, pero ahí podemos ver. Esto sucede cuando hay especialmente videos a veces porque las proporciones pueden terminar siendo como medio tamaño, como medio píxel. En el momento en que uno esté bien. Este de aquí, voy a subir un poquito. En realidad no hacerlo en esto, lo voy a hacer en este. Vamos a moverlo hacia arriba. Un píxel. Lo mismo al fondo. Si eso no se deshace de eso Lo que normalmente estoy buscando es como medio píxel por aquí. Puede tener accidentalmente 0.5 píxeles. Entonces, ¿eso normalmente lo que te da una línea? No sé por qué estaba creando ahí la línea blanca. Si tomo esto por teléfono, estaría bien. Línea blanca solo un poco en este Nivel de Zoom en particular, vaya. Bien, otras cosas que quiero hacer es que quiero hacer esto un poco más utilizable Entonces voy a agregar Figma. Vamos a llamarlo Comando-A. Llamemos a éste. Se llama bacalao. Video de bacalao porque tenemos, creo que evento de carrito también. Excelente. Lo que quería hacer es agregar algunas propiedades dentro de ella. Está en las propiedades de los componentes. Entonces, ¿por qué no quiero hacer es resbaladiza en estas garrapatas de aquí? Así que un par de clics para agarrar el texto y encontrar contenido. Agregar una propiedad de componente. Este va a ser video texto. Y lo genial de eso está por aquí para mi instancia ahora, la persona que lo usa puede ver las dos variantes que tienen Play y Pause. Y por aquí pueden cambiar el texto. Lo único que tengo que hacer cuando estoy haciendo esto retrospectivamente, vamos a darle un adelanto, es cuando juego ¿Ves que está alternando al otro? Entonces necesito vincular aunque. Realmente no los vuelves a vincular. Solo tienes que asegurarte de que se enfríe lo mismo. Aquí abajo. Comando clic para saltar directamente al texto. Voy a añadir otro contenido. La propiedad del componente para el contenido. Y ya tengo ese de aquí llamado video texto. Ahora bien, éste debería cambiar. Excelente. Lo que más debemos hacer es ordenarlo porque el texto es demasiado alto y no está acostado en el medio fue genial cuando era solo una sola línea. Entonces lo que voy a hacer es ir aquí a ambos. Entonces uno, mantenga presionada la tecla Mayús, haga clic en ambas. Y voy a decir que en realidad se quede pero centrado. No va a cambiar mucho por aquí, pero debería cambiar a este tipo para que esté centrado, depende de lo que quieras hacer. No estoy seguro de que en realidad sea mejor. Bien, lo siguiente es, es que quiero poder cambiar esto para poder tener más de uno Bien, lo he duplicado . Éste de aquí. Voy dentro. Vas a asegurarte de que tienes el video seleccionado. A veces podrías haber construido a Joseph con un marco, con un fotograma con un video dentro de ese fotograma. No quieres estar cambiando eso. Quieres ir profundo, profundo, profundo en él para tratar de encontrar el video. Y eso es fácil. Recuerda, Comando en una Mac, Control en PC va directo a esa cosa. Y en Design View, puedo entrar en el video. Puedo elegir uno nuevo, traer de vuelta al pug, darle un cambio enfermo a nuestra vista previa Y aquí vamos. Reproducir pausa, pug, reproducir, pausar. El club nocturno O hay dos de ellos. No me di cuenta de eso. Mira, hay dos versiones de esto porque a esto se le ha dicho ir y reproducir ese nombre de videos ni un fotograma en particular y un video, pero ve a reproducir ese nombre de videos. Entonces por eso eso es jugar dos veces. Y tú vas, todos nosotros en algo que lo efectúe. No lo uses dos veces y te vas, bien, eso va a ser. Así es como conseguir que ese botón de pausa de reproducción se conmute en Figma. Si se te ocurre una mejor manera de poner eso en marcha, házmelo saber en los comentarios. Estoy deseando que llegue el día en que podamos agregar a tocar operaciones en ese botón One tocar operaciones en ese botón One para que se reproduzca y cambie a otro componente como el botón I Play por el momento esto funciona. Bien, voy a ver en el siguiente video 110. Proyecto de clase 15 - Tarjeta de video: Hola a todos. No es tiempo de tarea. Ha sido tiempo de proyecto de clase. Es muy diferente. Quiero que hagas una tarjeta de video como hicimos en los últimos videos. El video bien, se ve así. Bien. Los requisitos o necesidades para tener un título de video. Necesita querer que hagas el que tiene el botón de pausa de reproducción de alternar. Entonces cuando va, la obra se convierte en el menos, lo siento, la obra se convierte en la pausa. Quiero trabajar. Tener un botón de silencio allí también. Lo que quiero que hagas para el final es en realidad tener, quería ser un componente que se pueda reutilizar Entonces quiero que lo muestres como dos videos separados. ¿Qué videos? Y ojalá estén en línea con tu proyecto porque estamos construyendo eso. Pero si necesitas pugs en tu vida, ve a eso también. Bien, entonces es el mismo componente, pero solo a instancias con diferentes videos y lo que no quiero que hagas es antes de ir y simplemente copiar un poco lo que ya hemos hecho, echa un vistazo a otros reproductores de video No hay mucho que puedas hacer, pero hay algo más, quiero que seas más interesante que exactamente lo que hice fue muy inspirado. Lo que he hecho es que he puesto lugares a los que iría y echaría un vistazo. Ahora, estás buscando la palabra interfaz de usuario del reproductor de video, o tarjeta de video o video UX. Y eso es lo que hice. Así que fui de la mano mira el driblar, tuve algunos buenos resultados en diferentes cosas en los botones de reproducción y todo es muy bonito Yo también había mirado a Behance. He escrito en la interfaz de usuario de reproducción de video. Otro par de sitios que quizás no hayas usado, screen lane.com, Es bastante genial Acabo de escribir video y eché un vistazo y encontré algunas cosas buenas. Y la página Colectivo fue otra buena. Solo las cosas se han topado recientemente con las que estoy usando para obtener ideas para la interfaz He puesto enlaces a ellos aquí en tus proyectos de clase. Entonces hay entregables son como normales. Toma una captura de pantalla o pantalla Video, Screencast, grabación de pantalla, esa es probablemente la palabra Y subirlo a Vimeo, YouTube o Behance y luego compartir enlace del de ustedes interactuando con el bacalao, simplemente haga clic en el botón Reproducir, botón de pausa, botón de usted pausa, botón Bien, y sube ese enlace a la sección de asignaciones también. Este es uno de esos en los que me encantaría verlo en redes sociales, subirlo, etiquetarme, y también usar el hashtag Figma Advanced Si alguien pregunta por dónde estás, viene en mi camino. Y recuerda, esta es una linda donde puedes comentar sobre el trabajo de alguien, un poco de retroalimentación, bien, eso es todo Disfruta del proyecto de clase. Y te veré en el siguiente video en un poco después de que hayas terminado tu proyecto. ¿Bien? 111. Algunos de los trucos avanzados de color de figma son: Hola a todos. En este video vamos a ver consejos y trucos de color en figma, montones de atajos, un poco de conocimiento informativo sobre el color como el color dinámico Y al final, nos convertimos en ley de color. Divertidos memes de color de Internet. Creo que lo gracioso de todos modos, donde alguien decidió nombrar todos los colores. Bien, vamos a saltar . El primero. Uno fácil es usar el asqueroso para llegar al cuentagotas para robar colores Entonces yo por globo ocular, lo entiendes. Bien, pero la única advertencia con esta es esta de aquí. Si hago clic en esto, este es un estilo, mi color primario. Si quiero robarla usando la herramienta cuentagotas, lo haré. Bien, y hago clic en él. En realidad trae a través del número hexadecimal nada, el estilo real, que es un error físico Hay mucha gente quejándose de esto. Ojalá se actualice cuando lo hagas. Pero por el momento, no toma el estilo, solo el número hexadecimal. Así que hay que tener cuidado. Puedes usarlo y actualizarlo en una gran actualización de estilos de color, lo cual haremos en un video o dos, solo para asegurarnos de que estén usando estos estilos que vayas. Esa es la herramienta cuentagotas I para globo ocular. O el siguiente consejo es con algo como esto. Si golpeo mi número de teclas, saltará a través de la opacidad Probablemente ya lo sepas. Entonces solo los números en tu teclado, 33094900, resultan ser 100% de opacidad Y para llegar a 0% de opacidad, solo golpea cero dos veces, haz dos casos a 00 una, 100%, doble cero, 0% Confundir diez a la idea, recordó que en realidad puedes darle un toque de color aquí Bien, así que lo tengo abierto. usar mis flechas arriba y abajo. Puedes ver que baja, cruzar los colores mantenga presionado Shift para acelerarlo. Bien. Ahí vas, arriba y abajo. Fuera de fondo eso particularmente útil, pero la rueda de desplazamiento en el mouse es, entonces tú, mi rueda de desplazamiento aquí, podrías estar usando un touchpad o algo más, pero puedo frotar mi rueda de desplazamiento hacia arriba y hacia abajo Y podemos cambiar el matiz, mantener pulsado la tecla Opción mientras hacemos lo mismo. Cambia la opacidad. Yo no lo uso en absoluto. Pero ahí tienes. Consejos y trucos de color, es posible que los necesites. Cuales son las cosas que uso mucho, Hicks no es muy bueno Lo uso para copiar y pegar desde programas, pero encuentro HSB, RGB Realmente no entiendo. Sé que es rojo, verde, azul, pero realmente no puedo escribir el color. Quiero colores CSAs, bien, si eres desarrollador, puedes copiar y pegar desde código, bien, si estás usando RGB y a para alfa, así de transparente es Podrías estar copiando y pegando. Así que puedes cambiar a CSS y simplemente volcarlo ahí dentro. Lo mismo, no uso HSL. Yo uso HSB, Hue, Saturation, Luminance hue saturation brillos Básicamente lo mismo. Esto me gustó porque puedo jugar con el matiz, tal vez no juegues con el deslizador de tonalidad, bien, pero digamos que llego a un color que me gusta, pero sé que esa es la saturación. Puedo sostener a Shift y golpear hacia abajo, y simplemente lo baja un poco Me parece útil para elegir colores cuando estoy tratando elegir tal vez un color para complementar el que tengo. Y el brillo, lo verás ahí. Se mueve un poco recto a través. Y este de aquí si yo arriba y abajo. Bien, los encuentro a mano. Así que rueda de desplazamiento de izquierda y derecha a cuando me estoy frotando la rueda del ratón. Y este de aquí para subir, bajar, la saturación arriba y abajo y luego tabular a través, mantener turno arriba y abajo para obtener ligereza y oscuridad. Ahora el factoide interesante sobre color es que ahora puedes codificar programáticamente, obtener lo que se llama Déjame mostrarte eso muy rápido. Entonces voy a dejar un enlace a esto y a los archivos de ejercicio, pero es sólo una buena documentación de lo que es el color dinámico. La versión corta es, es que cuando estás cargando contenido en digamos, una app o sitio web, puedes codificar ir y decir, Oye, mira la imagen, Búscame un color de ella. Como un color general. La mayoría usa el color y establece eso como el Tema de Color. Entonces digamos que esa es la portada de nuestro álbum que se carga en nuestra app de música. Y en lugar de ser esto, estos podrían ser tus colores predeterminados. En realidad va y comprueba la imagen y luego el reajuste se colorea en base a ella. Verás que se carga cuando, digamos que esta barra inferior aquí va a estar sacando colores de esto. No puedes hacerlo en Figma, no te puede gustar mágicamente hacerlo Solo podrías usar el picker de color para imitarlo, usando el trabajo necesario con tu desarrollador para asegurarte de que es algo que sucede Es algo que has identificado y quieres que esto sea dinámico, requiere algo de documentación y hablando con el desarrollador, no es difícil de implementar. Podría significar que tu esquema de color no es perfecto, pero puede ser bastante comprensivo y dar la ilusión de que están sucediendo muchas cosas y muchas opciones de diseño cuando en realidad, es simplemente un poco sacando colores de la imagen Y el último es nombrar colores con palabras. Esto no es esencial. Esto es más DIVERTIDO si piensas que el diseño, el color, el nerd, las cosas de historia son DIVERTIDO Creo que es hilarante. Al igual que puedes escribir la palabra rojo si quieres leer. ¿Eso es práctico? Un poco es interesante de notar El Farm POD es que alguien en algún momento decidió nombrar todos los colores. Hay millones de colores. No todos tienen nombre, pero es parte del tipo de folclore de diseño de UI. Bien, así que como esta de aquí, alguien decidió que esto es almendra blanqueada Aquí hay algún tipo de Nombramiento de Color realmente extraño. Supongo que lo comparto contigo porque es uno de los fondos un poco medios de diseño y deberías conocerlos. No lo encuentro gracioso. Eso está bien, salte adelante Pero si lo estás matando, es interesante ver lo que puedes deletrear gris con un a o gris dentro del mismo, mismo. Este de aquí sin embargo, como vamos a escribir en gris oscuro. El gris oscuro es más claro que el gris normal. Hombres, es raro. Necesario rosa. Ahí vas. Es rosa. Necesita más rosa. ¿Y qué pasa con lo rosa? ¿No funcionó? Sin espacios de color rosa intenso. Ahí vamos. Rosa profundo. Hay fucsia No puedo deletrear si miras arriba, esa de una de mis favoritas es Aqua. Agua. Y es muy diferente. Cian, exactamente del mismo color. Y probablemente lo más famoso de todos los colores no es el melocotón. Duraznos útil es este de aquí. Hojaldre de durazno. Puff. ¿Cuáles son los mejores colores de nombre de todos los tiempos? Entonces, la próxima vez que estés en una conferencia de diseño y alguien empiece a hacer referencia puff melocotón o al sistema de nombres de color X 11 y el gris oscuro es mucho de ellos gris regular. Estás metido en el chiste, bien, eso es todo. Consejos y trucos sobre el color 112. Cómo cambiar los colores de reemplazo en Figma: Hola a todos. En este video vamos a ver el cambio de colores en Figma. Eso es bastante fácil. Se va a poner más desafiante cuando hayamos pasado por este curso. Y algunos están usando unos estilos de color y algunos yo usando el número de hicks, el color se ve igual Entonces haremos un cambio de búsqueda para asegurarnos de que todos esos sean consistentes. Veremos a algunos de los cocineros con estilos de color cuando estemos mirando la opacidad y el final, voy a pasar y en realidad voy a cambiar mi color primario de ese rojo que he estado usando a verde porque la tasa es un color terrible para un color primario, todos van a gritar eso al inicio del curso y me tomó un tiempo darme cuenta de estemos mirando la opacidad y el final, voy a pasar y en realidad voy a cambiar mi color primario de ese rojo que he estado usando a verde porque la tasa es un color terrible para un color primario, todos van a gritar eso al inicio del curso y me tomó un tiempo darme cuenta de 0 que eso parece una señal de error. Notarás que ninguno de mis botones es de ese color, así que no muy buen color primario. Entonces voy a cambiar esto a mi color de acento e introducir este verde como mi color primario. Tú ve, vamos a saltar. La forma rápida es no tener nada seleccionado y luego ir Comando a en una Mac, Controlar a en una PC para seleccionar todos los K y luego bajar a los colores de tu selección y decir, muéstrame todos, y luego ve y cambia el color que quieras aquí Bien, podrías pasar y hacer clic en esto y decir realidad quiero que sea el 900 ahora, bien, y pasa y se actualiza. Hazlo si es de un color diferente, tal vez tengas que ir a averiguarlo primero. Así que tal vez tengas que ir a hacer clic en este color aquí. ¿Bien? Ahí está ahí, 70, 65, e4. Y haz lo mismo. Selecciónalos todos, baja a Colores de sección y obtendrás los primeros ahí está ahí. Bien, y puedo ir a cambiar este usando mi rueda de desplazamiento para cambiar el tono con rapidez. Bien, entonces ahí está, ahí. Notarás que algunos de ellos no cambiaron. Está bien. Te voy a mostrar eso en un fregadero, pero esa es la forma más rápida y fácil Selecciona todo, encuéntralo, cámbialo. Voy a escapar y deshacer. Todo va a deshacer mucho. Hay mucho deshacer porque contaba cada pergamino como nuestro deshacer. Tienes. Sin embargo, habrá, algunos de ellos atados a esto hundieron mis colores principales aquí y mis estilos principales, cable, puedes ver que hay un montón de otros estilos, es un montón de otros colores en los que quizás tengas que cavar y averiguar qué es Y esa es la forma más fácil de cambiar de color. No hay Find Change en este momento en Figma, hay plugins No he tenido ningún éxito con ellos hasta ahora, terminan siendo igual de molestia o al menos más molestia que en realidad solo hacer un selecto todo y cambiar. Cualquier problema para hacerlo a mi manera es que tienes que hacerlo por página. Entonces, si tienes 100 páginas, tienes que hacerlo 100 veces y eso no es divertido. No he encontrado un plugin que sea mejor si tienes uno con el que hayas tenido éxito, avísame en los comentarios. Eche un vistazo ahí abajo usted mismo, vea si alguien más tiene un complemento genial que podría funcionar. ¿Bien? Una de las otras cosas que se pesa un poco de encontrar colores en este programa es que esto, te diste cuenta de que cuando dije seleccionar todos, encuentra este color, mientras que este de aquí es que no todos cambiaron Puedes ver que en realidad es golosinas. Voy a deshacer eso otra vez. Trata a este de aquí porque tiene una opacidad como un color separado, lo que significa doble inmersión, que es una pintura Selecciona todo lo que notarás es aquí abajo, hay un color ahí abajo con el mismo número, 70, 65, e4 Ahí está ahí. Bien. Entonces hay que cambiar ambos. Desafortunadamente, ahí está y puedo cambiarlo. Bien. Se considera un color separado. Ahora eso trae un buen punto cuando estás haciendo tus estilos. El momento que no es un porcentaje de mi estilo principal. ¿Por qué no lo es? Es porque solo para que sepas, si hago un color aquí, bien, voy a mis estilos de color y digo, hagámoslo por 500. No puedo jugar con la opacidad de esto, solo un bicho por el momento Si está aquí, sería genial. Es el futuro. Y tienes porcentajes para estilos. Pero por el momento no puedo aplicar capacidad, esta opacidad a la capa de relleno de un estilo Tengo que romperlo y luego jugar con la opacidad, lo cual está bien ¿Bien? Porque yo podría hacer esto, ¿verdad? Podría decir que lo eres. Y entonces podría jugar con la opacidad de la capa. Vamos a bajarlo al 50 por ciento. Sin embargo, el problema con eso, es este de aquí. ¿Aquí dónde está? Esto tiene un Porcentaje. Puedes ver que está ajustado al 80%. Eso para que podamos ver las cosas detrás de él, un poco probarlo. Vayamos aquí y digamos, en realidad, esto es lo que estoy usando todavía. Entonces esta es mi, esta de aquí que la versión que usamos. Este de aquí va a usar un relleno del estilo. Bien, los 500 costales. Y voy a jugar con ellos la opacidad de la capa bajando al 50 por ciento, ya ves que hace todo el asunto, no solo el color Entonces eso es algo a tener en cuenta. ¿Y es un bicho, alguien un bicho? Es simplemente algo que aún no se ha implementado en Figma. Otra cosa de esos estilos de color también es que no puedes tener más de uno. Que este estilo de color. ¿Me puede dar otra? No. Simplemente deshazte del color. Pero un poco a los estilos de color aplicados a ella con diferentes opacidades Vas, si quieres que esto sea parte de tus estilos, puedes crear otro estilo. Así que vamos a dar click en este de aquí. Vamos a encontrarlo y digamos que tú y no un actualmente un estilo BAD podríamos En el botón Estilos, pulsa más. Y podríamos llamar a esto 1500 y ponerlo en 1.8. Entonces 0.8. Entonces 0.8 es muy común y la forma de escribir porcentajes, y cuando se trata de web, podrías escribir 80 por ciento. Eso está totalmente bien aunque su desarrollador web front-end probablemente irá uno es 1.0 es 100% y 0.0 es 0%. Eso es 50 por ciento. Eso es un descenso. Depende de usted. Verás ambos alrededor, crear un estilo. Haga clic en el fondo en el lugar correcto. Tienes que entrar ahí. Tú para ir ahí. Ya ves, probablemente puedas ver instantáneamente cuál va a ser el problema aquí es que ¿ cuántos creo? Hago un 0.1, 0.2, 345-67-8910. Sólo voy a poner este porque eso es lo que estoy usando ahora mismo. Y sólo poniendo los que tengo que, porque de lo contrario van a parecer un poco locos, volverán menos útiles. Lo siguiente que voy a hacer es que estuve siendo perezoso a lo largo de este curso. Y apliqué el estilo a veces, y a veces fui así. Yo viento, tienes un color de relleno de local y ese. Ahora bien, el problema de hacerlo de esa manera es que usa el número hexadecimal, ¿de acuerdo? Entonces el número hexadecimal está bien, pero quiero que todo ahora esté conectado a este estilo. Entonces cuando lo cambio en todas las actualizaciones. Entonces cuando puedo hacer es usar el mismo tipo de truco es averiguar cuáles son los números hexagonales, um, así como todo. Bajar para mostrar Colores de selección. Encontremos el color que quiero. La hay. Y en lugar de reemplazarlo, en realidad solo voy a decir tú y ahora ese estilo de 500, y desaparece un poco de mi lista, todos deberían tener ese estilo aplicado después de lo mismo con el morado aquí abajo Entonces estoy buscando a E4. Voy a seleccionarlos todos. Voy a bajar. Voy a encontrar ese morado que tiene E4 ahí está ahí Y voy a cambiarlo por completo mis 500. Y ahora voy a agregar mi último color o mi nuevo color porque ese rojo simplemente no funciona. Parece un mensaje de error, rojo, mirada. Voy a cambiar eso por un verde como mi primaria y esa tasa se va a convertir en mi color de acento. Vamos a cambiar el nombre de éste, salir. Y la pantalla aquí, es la que voy a usar. Vas a ser un estilo llamado. En realidad no voy a hacerlo así. Usamos ese plugin como lo hicimos antes solo para acelerar las cosas, te va a agarrar. Vamos a abrir el plugin. Bien. Esos son widget, bien, Color pequeño generador, y haga doble clic en él para abrirlo. Recuerda esto desde hace mucho tiempo en el curso. Pop en mi color. Voy a golpear Guardar estilos. Bien, nombre del color, este va a ser mi color, primario. Ya ves como ponerlos en grupos como un todo mucho más fácil de lo que es nombrar a cada uno de ellos. Porque es muy fácil nombrar a Color Group y no tener que hacerlo por cada color. Quieres mantener a todos esos puestos para que no les gusten los opuestos e ir a eliminar Tengo que sólo para ordenar un conjunto de colores. Aquí vamos. Usted, muchas gracias y borre eso ahora. Bien, eso es. Cambiar de color es relativamente fácil. Sake dole, cámbialo. También pasamos por y simplemente lo escondemos. Alguien más estiliza ahora también. Bien, eso es. Te voy a ver en el siguiente video. 113. Cómo crear temas de color para luz y oscuridad en Figma: Hola a todos. En este video, te voy a mostrar cómo hacer que los Temas de Color tanto para el modo claro como para modo oscuro puedan ser un poco desalentadores para saber cómo usar lo que somos Entonces te mostraré la herramienta que utilizo para acercarme un poco, ponerme en marcha, dame a pensar en algunos de los diferentes casos de uso que quizás no tuviera antes Bien, entonces este es el enlace aquí. Lo dejaré en tus archivos de ejercicios. Ahora tenga en cuenta que esto podría cambiar, podría actualizarse. Utilizamos material M3. Sé que confío en el material. Gran parte de mi trabajo de diseño UX, principalmente porque está muy bien documentado Y aquí tienen estas grandes herramientas. A pesar de que no lo estoy usando necesariamente para el desarrollo de Android, simplemente muy buenas herramientas de diseño de UX. Entonces tenemos que cargarlo. Se cargará a cambio dinámico a personalizado. Y luego cambié mis colores primarios, secundarios y terciarios. Simplemente da click sobre ellos y copiarlos y pegarlos desde Figma. Y lo genial de ello es que me da algunas cosas que me dan cuáles son mis colores, además de muchas variaciones. ¿Ves que este verde no era parte de mi diseño inicial? Ni ninguno de estos colores aquí. Entonces está buscando colores armoniosos que puedan ayudar a expandir mis colores. Así que tengo más variaciones sobre si todos los diferentes casos de uso. Bien, Entonces mi color oscuro en el fondo de color primario y los que cambiaron, particularmente me gustó la pantalla. Entonces voy a ignorar que uno ahí lo compró podría dejar apuntar a otros colores y formas en que podrían combinarse. Además me da una versión ligera y una versión de pantalla oscura. Y otra vez, está tomando mi color primario. Cambiemos el matiz de la misma. En realidad es sólo oscurecer un poco. Vas aquí otro par de combinaciones interesantes y mi color primario con colores fuera de mi conjunto de colores original. Pero yo variaciones útiles dependiendo de qué tan nuevo, um, esta podría ser una buena captura de pantalla. Tome el esquema oscuro y el esquema de luz y podría ser simplemente bueno para que usted pueda soportar, pero un construir esto para un futuro sistema de diseño. Si te están gustando los colores, en realidad puedes pasar el cursor por encima de ellos y decir, dame eso la ley Copiar botón, y puedes pegarlo en Figma. De todas formas. Esa es una herramienta poco útil que me gusta. Pensé que compartiría contigo aquí en esta sección de color. No es difícil y rápido la forma de hacerlo. Es solo una buena manera de tal vez extender la forma en que podrías estar usando tus colores, darte algunas otras opciones. Además sugiere algunos modos de esquema de luz y oscuridad. Bien, ahora lo hace, voy a ver en el siguiente video 114. Cómo agrupar estilos de color con barras diagonales o carpetas en Figma: Hola a todos. Oye, vamos a ver cómo agrupar estilos de color en Figma usando tanto el método de barra diagonal haciendo una carpeta y arrastrándola adentro Déjeme mostrarles a ambos. Bien, antes que nada, veamos el método de slash principalmente porque es muy común Pero solía usar y enseñar. Y verás muchos tutoriales de personas usándolo como atajo. Entonces volveremos al doble solo a la agrupación que hemos hecho. Tanto un práctico, bien, así que tengo mi color primario aquí. Voy a hacer que sea un estilo de relleno va a dar click en mi botón de estilo, pulsa Plus. Voy a llamar a esto primaria. Y estos son mis 500, ¿verdad? El brillo medio de todo se complica ahora cuando digo que quiero otra versión y quiero una ligeramente oscura. Entonces voy a bajar hasta aquí, romper el enlace, dar click en esto, ir a brillo, saturación y brillo mantén pulsada la tecla Mayús y bajaré un par. Ese va a ser mi, mientras nosotros quinientos, esos van a ser mis 700 Entonces voy a hacer un nuevo estilo, estilo. Tu primaria 700. Y si hago clic en tierra de nadie, verás que estas están bien, pero puedes ver cómo puede florecer bastante rápido. Lo que hace la gente es cambiarle el nombre esto y digamos en realidad, vamos a cambiarle el nombre. Y es genial, este nombre slash. Así que mientras pongas el slash delantero ahí dentro o quieras hacer una broma sobre Guns and Roses, el guitarrista principal Slash no se te ocurre uno bueno Y la mayoría de ustedes, ¿serían jóvenes para saber qué es eso de todos modos Entonces si metemos una barra hacia adelante ahí dentro, bien, Ahora si le doy un golpe a Enter, mira qué pasa Lo ha cambiado de estar flotando por el fondo. Se hizo una carpeta la cual tiene 500 su interior debajo de lo mismo para esta. Haga doble clic en él. Bien. La leyenda del rock de A en el medio. Y todos están en un grupo agradable. Ahí vas. Por eso la gente va a poner cortes y todo Lo que tiendo a hacer ahora es en realidad simplemente ir, eres uno nuevo y eres mis 500. Y si hago clic en Off, puedo hacer clic derecho y decir nueva carpeta llamada secundaria. Acabas en el mismo lugar. Si ves a mucha gente en Internet usando tutoriales o en clases o compañeros usando el método de barra diagonal hacia adelante, está totalmente bien Tiendo a simplemente hacer carpetas aquí y el panel de estilos de color, nada bueno de agruparlas con un usando las barra diagonal o haciendo carpetas ya que puedes cambiarlas. Se puede decir en realidad estos HOMBRES para estar aquí. Mientras que si no usas esa convención de nomenclatura, bien, llamar a un primario quinientos es uno sólido Hace que sea difícil moverte y te hace tener que cambiar el nombre de todos tus estilos si lo haces, ve y cambia eso más adelante, bien, eso es, de cualquier manera, grupos de conjuntos de estilos de color en Figma, puedes hacer si algún estilo antiguo lo usamos para colores aquí, también funciona de fuentes Pero eso es, de cualquier manera es bueno. Pero ahora ya sabes ambos. Bien, te veré el siguiente video. 115. Cómo describir tus estilos en Figma para que otras personas las utilicen: Hola a todos. ¿Qué estamos haciendo? Estamos agregando descripciones a nuestros estilos. Podemos agregarlos aquí solo para agregar más información para los estilos que hacemos cuando agregamos compartir estos estilos con otras personas no deja claro tal vez qué se usa y para qué no se usa para que estos hagan. Déjame mostrarte cómo empezar. No tener nada seleccionado, haga clic y tierra de nadie o golpee a Escape algunas veces Bien, estás buscando tu estilo que quieres agregar una descripción a J. En mi caso, quiero agregarlo a este de aquí, el 100 haga clic en el icono de Configuración. Y aquí abajo tienes una opción para las descripciones. Ignora eso, eso vino del widget que hice. Bien, vamos a dejar eso por el momento. Hablaremos de eso y de AZEK, así que la scripción que podría agregar podría usarse para usar con los Modales Popup ¿Y dónde aparecen? Para mí, probablemente no los voy a documentar, pero cuando estoy esquilando esta biblioteca con otras personas, bien, es útil porque cuando me cierro por encima de ella, le da a la gente un poco que dar Eventualmente, en realidad no ahí. Es cuando en realidad se está utilizando. Entonces digamos que estoy diseñando mi modal, bien, voy a usar el color y voy a pasar el cursor sobre él y ver usado para Popup Modals, ya vas, Ahora funciona igual con el tipo K. Puedes agregar una descripción para aquí, H12 y tres, eso es bastante claro encabezamientos 12.3 y párrafo, pero podrías tener algunos otros nombres extraños que tienes que Y otra cosa es que es echar un vistazo. Así que he llenado esto con este color primario. ¿Ves que ahí tiene ese contraste? Bien, ¿de dónde vino eso? Echemos un vistazo aquí, mirando mis estilos. Esto estaba aquí por defecto. ¿De cuándo vino esto? ¿Recuerdas el widget del turno anterior I, este generador de niveles de color, esto lo hizo automáticamente Fue y dijo, soy Michael va a los colores del estilo, pero también voy a poner en el color de contraste. Ya lo ha hecho un poco en este ejemplo vemos oscuro, más claro, más ligero, más ligero Es un buen contraste con este trasfondo. Entonces te puede gustar esto. Es agradable saber de dónde vino. Festival. No está ahí por defecto. Pero podrías encontrar en realidad, voy a tener que pasar por y garabatear esto, entrar en este y ir, no quiero, no quieres esto, no quieres eso Entonces algunos widgets sí ingresan sus propias descripciones y puede ser confuso porque estás como, no quiero todas estas variaciones de colores de contraste, podrías ser mucho más específico. Vete tú. Así es como agregar descripciones de estilo a colores y fuentes, sobre todo útil cuando estás compartiendo esto con un equipo. Yo no lo haría por mí mismo. Y como yo sé, el futuro Dan va a olvidar totalmente cuál era ese color. Cuatro. Bien, eso es. Te veré en el siguiente video. 116. Edición de estilos o de la biblioteca de componentes de otra persona en Figma: Hola a todos, oigan, he empezado un nuevo documento. Alguien más ha compartido biblioteca conmigo, opción tres, Alt tres en una PC para abrir bibliotecas. Dulce atajo. Así que lo he habilitado, he empezado a usarlo, pero ahora quiero ir a editar algunos de estos estilos. ¿Cómo voy y hago eso? Déjame mostrarte cómo. Ah, y de hecho haremos un pequeño recapitulatorio para esas personas que muchos de ustedes van a estar usando bibliotecas todo el tiempo, eso sería genial Y esto va a estar saltando directamente a esto porque lo cubrimos en el curso Essentials. Habrá algunas personas que solo están siguiendo el Curso Essentials no han tenido mucha práctica. Entonces, al final de esto, voy a recapitular algunas de las cosas que se deben y no se deben hacer para crear una biblioteca Pero por ahora, vamos a mostrarte cómo editar la biblioteca de otra persona. Bien, primera parada. Necesitas tener una biblioteca compartida contigo. Esto lo cubrimos en el curso Essentials. Voy a cubrir eso al final de este video si ese es un recuerdo lejano. Bien, pero digamos que tienes biblioteca, está siendo compartida contigo. Usted ha citado su uso. He creado este archivo sin título Bien. Empecé a usar algunos de los elementos de la marca Bring Your Own Laptop de la biblioteca compartida, pero ahora quiero editarlos. Entonces hay dos formas de hacerlo, color y la fuente van de la mano. Tendrían un método similar. Entonces digamos este color aquí. Puedo verlo como un estilo de color por el aspecto de la misma. Bien, si hago clic en él, puedo bajar a mi estilo de color y casi puedo ver las pequeñas Opciones ahí. Se esconde detrás del MAC cristiano. Pero voy a darle click. Y puedes ver por cualquiera de estos, va a decir, en realidad puedo cambiarlo aquí. Necesito ir a la definición de estilo. Entonces va a saltar de nuevo a ese archivo original, bien, la biblioteca original en la que se creó, y puedo editarla ahí. Echemos un pequeño vistazo a Componentes ligeramente diferentes. Bien, Entonces componentes, Hay un par de formas diferentes en las que puedo hacerlo. Puedo escuchar, puedes ver aquí está mi instancia de este botón Lo he arrastrado para mi biblioteca de estilo Bring Your Laptop, y puedo hacer clic en esta opción aquí dice ir al componente principal y biblioteca, o puedo hacer clic derecho en él y decir ir al componente principal Entonces lo mismo, en realidad, no he agregado los estilos con este de aquí. Digamos que hago este párrafo cuando se aplica. Bien. No quiero romperlo. Quiero hacer click en él. Entra en lo mismo que Color, da clic en el pequeño icono de configuración y entra aquí, ve a definición de estilo. No importa en cuál de estos haga clic en los botones de fuente de color, terminará en el archivo de creación original. Si hago cambios aquí ahora, se derrama de nuevo al archivo original y cualquier otra cosa está conectada a. Ten cuidado, si no puedes llegar a este archivo, significa que el archivo no se ha compartido contigo para que puedas editarlo. Te han puesto en la categoría view one. Entonces lo que hay que hacer es volver al originador del archivo. En este caso para mi, es Victoria tomó prestada todo lo que hace el exhalas trae tu laptop, Acredita este archivo, y a regañadientes lo compartió conmigo para editar porque yo estaba como, lo necesito para Ella dijo, no rompas nada. Entonces no voy a romper nada. Así es como editar estilos que se han compartido contigo. Si estás bloqueado, lo que buscas que haga la persona solo para que sepas lo que parece es que voy a entrar aquí. En primer lugar, publiquemos esta biblioteca. Esto lo hicimos en el curso Essentials, pero si no has llegado a su, un atajo genial es la opción tres. K abrirá tu biblioteca, o puedes ir al panel de activos y hacer clic en esto. Necesito que este sea publicado. Entonces este es el archivo en el que estoy trabajando ahora. Bien. Publica todo primero. Bien. Y entonces el archivo necesita ser compartido con alguien. Si escribo Daniel Scott y puedo tener puede ver, eso significa que hay otra persona Daniel puede usar los estilos como lo hice yo para ese archivo original, pero no pueden editarlos. Puedes entrar aquí y decir En realidad se lo pueden comer, tú vas, Eso es lo que tiene que hacer la persona. Si puedes ver bibliotecas, pero no puedes cambiarlas. Un último pequeño dato para aquellos que son bastante nuevos en las bibliotecas se les recuerda desde el Essentials es que el archivo debe ser, el archivo que quieres compartir Puede estar en borradores, pero no se pueden compartir componentes Puede poseer estilos de fuente y color de cizalla a partir de borradores. Una vez que lo hayas trasladado a una de las bibliotecas de tu equipo, tiene que estar en una biblioteca de equipo de pago, no en esta biblioteca gratuita. Si muevo esto a este gratis, bien, voy a hacer clic en mover, compruébalo y entrar aquí. Y lo que notarás es si voy a mi biblioteca opción tres o las tres y una PC, ahí está publicarla, inédita, y volver a publicarla Vamos a fingir que es por primera vez. Puedes ver aquí 47 componentes no serán publicados. Solo los colores y las fuentes que necesitan estar en ese comando uno para saltar a la base de operaciones Y esto tiene que estar en un prime pagado. Ahí vamos. Así es como editar los estilos de otra persona que tienen cosas de sombra contigo. Y solo una pequeña recapitulación rápida sobre bibliotecas en general. Bien, te veré en el siguiente video. 117. Cómo ocultar los estilos de fuente y los componentes de color de la biblioteca de equipos en Figma: Hola a todos. En este video, te voy a mostrar cómo ocultar componentes, estilos de fuente, estilos color de tu biblioteca para que cuando los publiques, otras personas puedan acceder a ellos. Todavía se puede trabajar en ellos. Puede ser que sea un trabajo en progreso o simplemente sea algo que estés usando y no quieras confundir al equipo con También te mostraré un par de pequeñas cosas que podrían atraparte si la gente ya está usando los componentes o estilos. Pero por el momento, entremos y ocultemos algunos estilos y componentes. Bien, así que he publicado esta biblioteca de este archivo aquí y la he utilizado en este documento sin título Puedo ver todos los bits. Pero en a, b, c, d que hicimos, queremos ocultar cualquiera de esos para que otras personas no puedan usarlos. Hay dos formas de encontrarlo en su panel de activos. Así que recuerda, la opción uno es Capas, opción a como activos. Bien, voy a ir a mis botones y la manera fácil es hacer clic derecho en él y decir Ocultar al publicar, lo que pasa es que sale de aquí y baja a esta carpeta que dice cosas ocultas. Bien, ahí está ahí dentro. Pero tengo que volver a publicarlo. De lo contrario, esta persona todavía puede ver mi botón. Entonces voy a llamar a este tipo Doug. Doug puede ver el archivo de Daniel. Voy a tener que publicar esto. No hay una manera rápida y fácil de publicar, o al menos ningún atajo. Opción tres, publicó un cambio. Es esta cosa aquí se ha modificado, pero no, ahora Comando o Control tres, bien, se ha ido, no puedo verlo. Ahora con estilos, es ligeramente diferente. Comando para controlar a, para volver a esta pestaña, dejar de hacer atajos, estilos. Todo se reduce a nombrar. Así que no tengo nada seleccionado por aquí. Si no quiero que Doug pueda ver hay estilo 900. Voy a hacer click en él. Y lo que tengo que hacer es al frente, agregar un guion bajo o punto verás gente o punto completo. Depende. No creo que haga ninguna diferencia. Veo a mucha gente usando ambos ojos subrayados. Puedes usar un punto en la parte delantera. Yo no lo creo. Hazme saber en los comentarios si has averiguado alguna diferencia, Todo lo que sé es que todavía la puedo ver. Pero cuando presiono Publicar y bot opción tres, tecla Alt en una PC, o podrías usar tu clave rápida para, para publicar cambios en la biblioteca. Esa podría ser la forma más corta de hacerlo. Se puede ver que se ha eliminado. Y ahora vamos a revisar a Doug. Doug, cuando está calificando algo puede pasar por Krebs es llenar colores, pero no puede ver el 900. Se ha ido. Cuatro componentes. Volver a los componentes. Hicimos el clic derecho. De hecho, puedes hacer el mismo truco de nomenclatura. Digamos que quiero ocultar botón este de aquí, estamos poniendo botón B. Entonces lo que podría hacer es hacer clic derecho él publicó al esconderse. O si quiero mantener ese tipo de consistencia de subrayado, puedo cambiarle el nombre tal vez Comando o Control R. E iba a poner un subrayado o un punto delante de Y lo que va a pasar es cuando publique, no hasta que publiques acciones rápidas en, en, en, porque lo he hecho todo antes de que se publique esa. Vamos a ver a Doug. Se ha ido. No hay amarga real si voy a Activos, puedes ver que todos terminaron en la sección oculta, excepto que el nombre de esto ha cambiado. Realmente no he decidido de qué manera me gusta más. A veces puede quedar claro cuando hay un guion bajo que no está destinado a ser parte de la biblioteca Ahora una cosa que te podría llamar es que si Doug ya usa este sitio, eso va bien, necesito el botón rosa ¿Y eso qué hace? Caja aleatoria usa el botón rosa. Y luego de vuelta aquí, digo en realidad rápido, antes de que Doug vaya y use el botón rosa, voy a quitarlo de la publicación Publicar este archivo comando forward slash, control, forward slash. Ahí está ahí. Bien, rápido. Me alegro de que nadie lo usara. Por aquí. Doug todavía lo consiguió. No es algo que pueda arrastrar, pero no lo quita. Bien. Entonces una vez que alguien ya lo tiene, Está un poco en esos documentos, yo como Crear Cuenta, hago cambios en el botón de Doug A menos que volviera a publicar el botón en la biblioteca. Y luego se conectará de nuevo hacia arriba y empujará los cambios. Una última cosita es si te falta bastante con bibliotecas como intensamente como publicar, inéditas, vincular, desvincular, hacer muchas de Algunos en ti teniendo como hombre, solía trabajar. He encontrado muchos simplemente no en mi tipo normal de práctica de diseño, pero haciendo este curso Figma, se enloquece y solo tengo que cerrarlo , abrirlo de nuevo Básicamente lo que estaba haciendo es que yo era la mafia y estaba haciendo eso y publicando. Y se estaban quedando en el archivo de Doug y yo estaba como, este grandote, como tal vez he hecho algo mal o roto Internet Resulta que yo solo, creo que estaba un poco intensamente revisando las bibliotecas y solo tuve que cerrar Figma, tomar una pequeña siesta Bien, sólo por un segundo. Dormiremos y luego volveremos a subir y todo volvió a funcionar. Bien, eso es. Así es como ocultar los componentes. Los colores y las fuentes son iguales. Simplemente ponga un guion bajo frente a ellos, asegúrese de publicar la biblioteca y cualquier otra persona no podrá tener acceso a ellos a menos que hayan arrastrado instancias, entonces tendrán una instancia en su propio uso en esta biblioteca de archivos Ahí está bundy, bien, eso es todo. Te veré en el siguiente video. 118. Cómo comparar cambios en componentes con superposición en Figma: Hola a todos. En este video vamos a ver qué sucede cuando alguien actualiza o biblioteca que estamos usando. ¿Cómo vamos y revisamos las actualizaciones antes de comprometernos con ellas? Llegamos hasta aquí donde podemos hacer una comparación lado a lado. Muy claro lo que ha cambiado. O podemos hacer esto genial como pequeño overlay donde podamos decir, veamos la diferencia. Muy claro. Ahora vamos a actualizar, bien, déjame mostrarte cómo entrar ahí y usarlo, bien, así que llegué a los archivos Este es el archivo que está creando mi biblioteca, y este es un archivo que va a estar usando mi biblioteca. Entonces voy a agarrar un par de componentes de esa biblioteca. Genial, lo estoy usando, pero vienen en algunas actualizaciones. Así que volvamos al archivo original. Hagamos algunas pequeñas actualizaciones. Entonces 8-16 píxeles adicionales en el relleno. Este de aquí va a cambiar bastante. Bien, cambia mucho para recordar el atajo para cambiar el peso Sólo un recordatorio Opción de Comando y usar el mayor que y menor que, eso es Control alt mayor que y menor que K. Así que he hecho algunos cambios. Voy a publicarlo. Recuerda, Opción o Alt tres en una PC. Publiquemos esos cambios y veamos qué pasa aquí. Bien, como es normal, tenemos nuestras actualizaciones disponibles. Podemos ir a revisar, en cambio actualizarlos todos. Y lo interesante es que, en lugar de hacer clic en este clic en esta pequeña flecha aquí, terminas en la vista de comparación. Entonces no eso, que te voy a mostrar cómo llegar a individualmente en lugar de hacer cada uno porque estás como, Hombre, necesito trabajar a través de estos paso a paso para ver cuáles son las actualizaciones y cuánto me afectan. Lo que puedes hacer es trabajar en el botón azul. Y ya pueden ver, puedo actualizar estos individualmente. Hay una actualización disponible para esto. Genial. Voy a pinchar sobre él. En lugar de actualizar la instancia, voy a revisar la actualización y esto es útil. Se puede ver la actual actualizada, bien, y puedo decir, Si, eso quiero. Veamos el siguiente componente. ¿Bien? El problema con esto es que se ve exactamente igual que te gusta, ¿ ha cambiado algo? Así que podemos hacer es que podemos cambiar de lado a lado aquí para Puedes activar y desactivar la superposición, encenderla y desactivarla y nada ha cambiado. Cambio cualquier cosa, juro que sí. Oh, se puede ver por encima ellos miran los acolchados ahí, pero no está en esto. Oh hombre. Oh, solo actualicemos y veamos qué pasa. He hecho esto cargas y funciona cada vez, e incluso he hecho una demostración de este video Esta es aproximadamente la tercera vez que lo grabo para tratar de conseguir un poco de buen flujo, pero alguna razón hoy en día no está funcionando. Vamos a actualizar. Vamos a echar un vistazo. Hipo más grande. Eso estuvo raro. Normalmente solo te muestra el relleno y toda la excusa de esto era mostrarte que las superposiciones son útiles para ver cuando es solo cambios realmente pequeños como el padding. Pero por alguna razón ahí no funcionó. Voy a dejar esto en el curso porque a veces eso pasa, voy a cerrar Figma, abrir una copia de seguridad y saltar directamente nuevo a esa pantalla para ver si vuelve a funcionar Espera, lo hiciste, bien, así que he vuelto y lo cambié a ocho de 16 Volvamos a publicarlo. Publicó ese cambio. Y echemos un vistazo por aquí. Hay una actualización donde puede revisar, irá al otro lado, puede configurar Actualización colgante, da clic en la flecha. Bien, y hagamos Overlay. Y ahora está funcionando. Me ha dado una idea un poco más clara sobre cuáles son los cambios que podrían ser solo el píxel y estarías como, No hay forma en esta vista de ir al cambio de píxeles. Puedes verlo ahí ahora que es obvio, pero a veces es difícil de ver a menos que vayas y vengas con este Overlay. Estoy contento con eso. Voy a actualizarlo y cerrarlo. Y luego vas, así es como hacer una vista previa de los cambios que le han ocurrido a una biblioteca que comparte Estados Unidos Y lo que pasa cuando lo hace, no funciona. Ciérrala, ábrela otra vez. Bueno como el oro. Bichos como ese parecían limpiarse bastante con Figma, como los que voy a ir y reportar esto ahora a Figma y aposté en una actualización en un mes o dos, ese fallo se habrá ido Algún ingeniero lo atravesará y lo arreglará, o podrías estar haciéndolo tú mismo. Puede que te encuentres con él, pero ahora, ya sabes, apágalo y vuelve a encenderlo. La verdad para arreglar toda la tecnología. Bien, eso es. Te veré en el siguiente video. 119. Cómo refactorizar estilos en otro archivo de diseño en Figma: Hola a todos. En este video vamos a ver estilos de relinking o algunas personas lo llaman Vamos a ordenar todos nuestros estilos de nuestro documento de trabajo, recogerlos, moverlos a un documento completamente nuevo, bonito y ordenado, todo por su cuenta. Y vamos a usar este archivo para construir futuras aplicaciones y sitios web a partir del documento de trabajo no del loco, que es un mal lugar para tener todos tus estilos principales, especialmente cuando pasas al siguiente proyecto, déjame mostrarte cómo sacarlos, ponerlos en otro documento mientras sigues manteniendo conexiones que quizás ya tengas para diseñar archivos que ya tienes creado como este de aquí. Necesitan saber con un nuevo hogar para estos estilos sean automáticamente. Bien, déjame mostrarte cómo hacer eso. Entonces este es el archivo original en el que he creado muchos de mis estilos. He usado esos estilos en un documento separado. He usado algunos de los estilos de texto, algunos de los estilos de color, componentes que haremos en el siguiente video. Pero lo que quiero hacer ahora es que realmente quiero sacar todos mis estilos de este documento y ponerlo en un archivo principal y de estilos y componentes. Acabo de crear un nuevo documento y le di ese nombre. No tiene nada de especial excepto que no puede estar en borradores, por lo que necesita estar en una biblioteca de equipos, estilos o trabajar en el plan gratuito Si quieres estar trabajando con componentes, tal vez tengas que estar en un profesional o superior, básicamente cualquier tipo de plan de pago. Entonces ese es el tipo de estructura que necesitas. Lo principal es que esta copia y cae, lo contrario se rompe un poco Así que voy a ir a este de aquí. Esto sostiene todos mis estilos. Quiero sacarlos, así que no tengo nada seleccionado. Voy a agarrar mi color primario, todos estos en este grupo. Y tienes que usar cut Command X en una Mac, Control X en una PC, tienes que cortarlos, no copiarlos, moverlos a tus estilos principales y simplemente pegarlos. Ojalá esto aparezca abajo aquí abajo, y vayamos a publicar. Entonces tenemos que publicar estos porque quiere decir que se ha trasladado a este archivo. Voy a publicar esto para que todos los demás archivos como este de aquí se vean afectados, deberían actualizarse. Es echar un vistazo. Ahora arriba, echemos un vistazo. Repasemos el color primario que se ha movido de la aplicación Evento. No hay cambios visuales, simplemente se mueve. La forma de demostrarlo es ahora si hago clic en esto, voy a mi estilo y hago clic en la configuración para ello. Puedo ir a la definición de estilo que solía apuntar a esta primera pestaña. Ahora ojalá apunte a esta segunda pestaña. Ahí vas. Ordenado, ordenado. Míranos. Vamos a entrar en todos estos colores. Podemos agarrar Mayús y hacer clic tanto en el texto como en los colores. Tienes que hacer la cuadrícula por separado de los colores del texto. Pero vamos quiero esto quiero todos estos colores excepto esta exhibición. Dan espeluznante, quería mantener pulsada mi tecla de comando y una tecla de control de Mac en una PC Entonces no quiero estos. Voy a recordar, cortarlas, moverlas por aquí, pegarlas. Se va a decir publicar. Sí, por favor muévase a este archivo. Recuerda que obtendrás una indicación en cualquier app que hayas usado, esos colores en, que las cosas se han movido, pero también en la original la tomaste de caso lo he sacado todo de esto y esta esta actualizada ahora dice, Oye, se han ido todos. Voy a revisarla. Estos colores se mueven de este archivo todo el camino a este otro. Bien, podemos volver a verificar que este de aquí es ahora, oops, este de Ahí está. Él está ahí. Él es. Sentado e ir al estilo. Todos se han movido a través. Por lo que cualquier archivo que se utilice, los colores, incluso el de origen, necesita ser actualizado. Bien, terminemos obteniendo todos los estilos de cuadrícula también Pero es cortado, no Copiar, Pegar, publicar, publicar. Cualquier archivo que lo haya estado usando. Cuando se abran, se les ocurrirá esa opción para decir que necesita actualizarse, ya sea el archivo de origen o éste de aquí. ¿Qué más tenemos? Vamos a conseguir que el textil te corte y lo pongas aquí. Publica, entiendes la idea. Bien, así es como mover tus estilos de un documento a otro para ordenarlos un poco y sacarlos de tu documento de trabajo y mostrarles a todos lo que eres diseñador UX súper eficiente que eres con tu documento maestro Bien, eso es. Te veré en el siguiente video. 120. Cómo mover componentes de refactorización de revinculación a otro archivo de diseño en Figma: Hola diseñadores de missy, Es hora de ordenar nuestros componentes Tenemos un documento de trabajo para el que hemos generado muchos componentes principales. Incluso empezamos a utilizarlos en otros documentos. Entonces es un gran desastre. Cada vez que alguien quiere actualizar uno de estos, tiene que volver a este documento de trabajo que está conectado con otros documentos. Solo queremos tomar todos nuestros componentes y moverlos a un archivo centralizado y refactorizar o volver a vincular todos esos componentes a cualquier documento que pueda estar usándolos Para que podamos separar este documento de trabajo de misiles y tener una fuente de verdad Bien, vamos a conseguir algún componente Xin. Bien, entonces tengo un componente, es un componente principal Puedo decir si icono aquí, es, comenzó la vida en este documento de trabajo, lo he publicado, lo he usado en este diseño de aplicación móvil aquí, pero necesito moverlo a un ordenado de archivo. Bien, le estoy llamando a este estilos y componentes principales. Entonces tengo un sistema de diseño más centralizado que otras personas pueden usar y no vincularlo a este primer documento de trabajo. Entonces lo fácil es seleccionarlo, asegurarse de que tiene el componente principal, no la Instancia, y lo corta. No se puede usar copiarlo, corta o Comando X, Control X en una PC. Voy a moverlo por aquí y va a funcionar. Entonces va a funcionar. Va a decir, oye, has movido esto de nuevo. ¿Te gustaría publicarlo? Si esto no aparece, significa que este documento aquí es archivo de diseño que usas como tus estilos principales, no en una biblioteca de equipos. Entonces no puede estar en borradores para que esto funcione. La otra cosa que podría sostenerlo es que los componentes o solo pueden publicarse desde una cuenta de pago. Entonces, si tienes una cuenta gratuita, aunque esté en una biblioteca de equipos, puede que aún no funcione. Ellos sí cambian esto, pasan por y cambian su modelo de precios y caminar se puede hacer en diferentes niveles. Entonces no es una regla dura y rápida, podría ser la razón por la que no estás viendo esto publicado en la parte inferior aquí. Voy a publicarlo. Voy a mover este archivo. Es una advertencia. Bien, lee, publiquemos. Y vamos a trabajar. Echemos un vistazo a mi aplicación móvil ahora. Aquí. Voy a revisar cualquier cambio y para mí es solo un movimiento. Por lo que se ha movido de la aplicación Event. Vamos a actualizarlo. Días Felices. ¿Algo ha cambiado? Echemos un vistazo. Entonces voy a seleccionar en él. Voy a ir a aquí a editar mi componente principal. Y es saltar a este archivo, que es perfecto. Por lo que en su mayoría funciona. Una cosa que me va a llamar es que esta cosa en particular en realidad tiene incrustados dentro de ella componentes anidados, o al menos Instancias anidadas de esos Entonces componente principal, genial, eso es esto, pero si miro dentro ahí está esto, mira eso. Ahí está ese caliente, bien, ahí está el precio, que es esta pieza de fondo. Todo tipo de cosas tienen que volver. Ahora, mira esto. Si hago clic con el botón derecho en esto y digo ir a MainComponent, es un poco volver a este primer archivo Así que solo tienes que estar seguro cuando cortas las cosas y las mueves a través, estás agarrando todo En mi caso, necesito precio y la carta inferior, necesito los iconos que se están usando. Déjame mostrarte cómo resolver todo eso. La otra cosa a tener en cuenta, aparte de eso es que como hicimos con los estilos, cuando cortas algo y lo mueves hacia arriba cruz aquí, este archivo dice que necesita ser revisado porque estaba usando una instancia del mismo. Pero el archivo original dice: Oye, he cambiado, necesito que me revisen y esto se traslada de este documento a este otro. Sólo necesito actualizarlo. Y ahora todos estamos contentos. Vete tú. Sin embargo, es difícil hacer esto correctamente. En lugar de simplemente copiar a través del componente principal, necesitamos traer todas las instancias que están incrustadas en él. Había una opción antes sobre donde fuimos propiedades y podemos ver todas las Instancias anidadas, bien, exponerlas solo en expone las que tienen opciones como grandes, pequeñas No tiene las instancias. Obviamente este icono de aquí, aunque definitivamente es uno de mis íconos. Entonces, la forma de hacerlo es desempacar todo esto y solo ver qué está pasando En realidad, la forma más fácil es volver a este original, ir al panel de Activos, abrir componentes de aire local, y luego pasar por cada página y simplemente cortarlos y pegarlos todos. Entonces todo viene a través. Si queremos ser un poco más quirúrgicos, bien, lo que podemos hacer es que quiero abrir todos estos para ver dónde podría haber instancias buscando. ¿Quién recuerda el atajo para abrir todos estos? ¿Te acuerdas? Así es. Mantenás pulsado la tecla Opción en una Mac, tecla alt en una PC, y todos deberían estar en 12. Y se puede ver que hay una instancia es otra, es otra, hay otra. Bien, así puedo ir a recoger estas y cortarlas y pegarlas. Puedes ahorrar tiempo si estás desorganizado y estamos sobre el lugar como yo, puedes hacer clic derecho en ellos y decir ir al componente principal Ahí está. Se va a cortar. Ir a Pegar. No es ponerlos uno encima del otro. Y asegúrate de que esto se publique. Y éste es revisado y publicado también. Y luego pasar y decir, en realidad te necesito y él haría cualquier otra cosa que necesite. Creo que ya está. Pero cuando ETL los íconos también los cortaron como todo, creo que sí Pégalos por aquí. Voy a dejar de construir esta página con algunas secciones como lo hicimos antes. Pero se entiende la idea. Entonces hagámoslo. Las tapas lo publican. Terminémoslo en una última cosa al final. Revisemos este, actualicemos todos estos movimientos. Lo último es que quizás no quieras este archivo se publique como archivo de equipo, podría ser solo un archivo de trabajo para ti. Una vez que hayas cortado y pegado todo, puedes Anularlo. Recuerda, opción tres, las tres y una PC. No estoy seguro de lo que le hice a eso, pero hice algo. Bien. Voy a volver a entrar ahí y ahora puedo decir que vas a estar inédito Voy a dejar el mío abierto, pero eso es lo que quizás quieras hacer. Bien, así es como ordenas tus documentos de trabajo, metes todo en un archivo de diseño centralizado Bien, eso es. Te veré en el siguiente video. 121. Cómo intercambiar partes o componentes completos y una biblioteca de estilos en Figma: Hola a todos. En este video vamos a intercambiar completamente una biblioteca que un archivo de diseño está vinculado a su gran manera de probar nuevos diseños porque este es espantoso. En lugar de hacerlo mejor, cambiemos la biblioteca. Y ahí vamos, Nueva Biblioteca intercambiada. Entonces, si necesitas más Brush, Script o Comic Sans en tu vida, sigue viendo. O si solo quieres averiguar cómo intercambiar bibliotecas, tienes que seguir vigilando hasta ahora. Déjame preparar la escena, contar una historia. Tengo este archivo aquí llamado app de eventos. Bien, está usando un montón de componentes y colores y estilos de fuente, no en este documento. Lo trasladamos a este documento principal de estilos y componentes. Genial, pero ahora quiero ir a probar diferentes estilos. Entonces quiero cambiar la biblioteca, bien, no voy a hacerlo a esta app. Este es demasiado complejo, ¿están pasando las cosas? Solo quiero construir una versión dos de mis estilos y ver cómo se ven en todos los componentes antes de entrar y comprometerlos en todos los documentos a los que está conectado. Es un muy buen caso de uso para intercambiar bibliotecas. Así que aquí están mis principales estilos y componentes originales. He hecho una versión dos, solo con algunos de los elementos que arriba cerca del Nav inferior, he actualizado el botón en algunos de los guiones de texto peroné pincel Entonces lo que voy a hacer es en vez de simplemente ir a este archivo opción tres, los tres y una PC e ir, y puedo entrar aquí porque está conectado a estilos principales. Podría entrar aquí y decir que la biblioteca Swap puede actualizar todo, lo que voy a hacer, para que las cosas no se vuelvan locas. He creado este archivo aquí llamado prueba de cambio de diseño, igual de documento simple, todavía está conectado estilos de dominio. He arrojado algunos de los componentes y colores y tipo con los que quiero experimentar. Y voy a cambiar este solo para mantenerlo alejado de ese trabajo oscuro. Así que vamos a cerrar eso. Ya no estamos usando. Este original está relacionado con este documento. Vamos a cambiarlo a esta nueva versión donde he cambiado los colores y las fuentes. Así como una pequeña prueba de ejecución. Tú me consigues. Bien, vamos a darle un pozo Para que esto funcione, necesitas que ambos estilos sean publicados. Ambos necesitan estar en una biblioteca de equipos. Si quieres usar Componentes, necesitas estar en un plan de pago, al menos para la parte de componentes, salto sorpresa corte de EDA a cajas de colores usando mis colores primarios y secundarios. Solo para ayudar con el ejemplo, quiero intercambiar esta biblioteca de archivos opción tres, Alt tres en una PC. Entonces, ¿por qué no quiero ir a, es que quiero encontrar esto ir a pequeña flecha aquí y es una opción en la parte inferior dice Biblioteca de intercambio. Y va a pasar de mis estilos principales que creé primero a este nuevo aquí llamado main styles v2. Se dedicó a eso porque lo elegí antes cuando grabé este video por primera vez y me perdí y lo reinicié y lo volví a grabar de todos modos, así que tendrás que elegir el tuyo Ahora el gran truco aquí es asegurarse de que los estilos tanto en el primero el segundo tuvieran el mismo nombre. Puedes ver H3 desde mi estilo tick se llama H3 por aquí, como los colores tenían la misma estructura de carpetas Bien, así que échale un vistazo. Guión de color primario quinientos, lo mismo con este Guión de color, perdón, me volví perezoso y en dos colores, pero mientras los nombres coincidan, funcionará Te darás cuenta en este V2, no tengo mi color de acento, pandilla porque soy perezoso. Y voy a fingir. Es porque mira esto. Cualquier cosa que no se pueda encontrar inigualable seguirá conservando el estilo antiguo Esto podría ser un aviso para que vayas y realmente hagas ese color y nuevo estilo Voy a ignorarlo aquí abajo. El up y F se llama el up y tienen los dos estilos diferentes. Una cosa aquí es que le falta este botón principal. De hecho, hagamos esto ahora. Y luego voy a pasar y ver por qué esta está rota y va a intercambiar bibliotecas 321 y cambiar. Atraviesa, se actualiza el nav superior ese nervio inferior, los colores. La fuente no ha hecho el botón. Así que vamos y conectemos esos arriba. Entonces es una buena manera solo de estar trabajando en este tipo de tal vez una versión actualizada de tus archivos sin empujarla en vivo al equipo porque es un gran movimiento, bien, una vez que hayas hecho algunas pruebas, posible que quieras luego pasar y hacer que la gente cambie las caídas en el wicking on al nuevo Podría ser solo cambios sutiles, nada grande N brush scripty como este. Es bueno. Descubre por qué esto no conectó. Entonces aquí, se llama botón espacio principal. Entonces eso es lo que es ese componente principal. Vamos a verificarlo dos veces. Ir al componente principal. Se llama botón principal. ¿Cómo lo he llamado aquí en los estilos principales? Lo he llamado botón guión principal. Entonces necesito repasarlo y decir que vas, necesito volver a publicar esto. Todo necesita ser publicado. Opción tres, bien. Entonces, la última vez que lo voy a decir, prometo abrir el panel de la biblioteca. Vamos a publicarlo. Ahora podemos ir por aquí y decir actualización de biblioteca. Vayamos a aquí. Intercambiemos la biblioteca por esta biblioteca aquí. Lo único que se encuentra es éste de aquí. Para que podamos ir a intercambiar. Aquí vamos. Comic Sans, bondad, judía. Ese es un gran intercambio de bibliotecas antiguas. Si solo quieres hacer un individuo y Swap. Oh, atajo que tal vez no he compartido. Comando Shift T. Control Shift T en una PC abre la última pestaña de cierre. Bien, es un atajo. Utilizo un poco de tiempo tanto para navegador como en Figma. Bien, entonces puedes entrar aquí y decir en realidad, no quiero hacer todo eso de intercambio de biblioteca. Yo solo quería pasar y cambiar solo un poquito. Bien, voy a entrar en esto, bien, es una instancia de arriba. Y ahora puedo ir hasta aquí, algunos componentes se movieron desde la última vez que hice esto. ¿Qué eran? Ignorar eso. Bien, te voy a ir, no cambiemos toda la biblioteca. Esto es cambiar esta instancia. Entonces podemos ir por aquí y aquí arriba donde dice Nav, clic superior sobre esto. Voy a intercambiar Instancias. Está conectado a ese otro archivo aquí, mi estilo principal, en realidad quería conectar la biblioteca para mi versión dos. Entonces sólo voy a activarlo ahí, no hacer nada. Voy a cambiarlo. Yo solo voy a entrar aquí, encenderlo para que pueda decir que te pueden intercambiar Instancia Swap esa de ahí y dejar cambiarla con esta cosa de arriba Así que vamos a pasar eso a través. Se conserva el cambio de color que tengo en este top nab, hubo una anulación en ello Entonces puedo hacer clic derecho en él y decir cambios reasentados. Bien, para que puedas hacer bits individualmente o puedes intercambiar toda la biblioteca. Vamos a asegurarnos de que usando exactamente los mismos nombres es su biblioteca actual con su nueva biblioteca que vaya, es decir, intercambiar bibliotecas en Figma 122. Consejos y trucos avanzados de dibujo en figma: Hola a todos. Oye, este video trata sobre mi tipo de consejos avanzados de dibujo y trucos y técnicas solo para ayudarte cuando estás construyendo cosas, haciendo cosas, dibujando cosas. Todos son un poco pequeñas cosas. Realmente no merecían un video por su cuenta. Así que se meten todos en este video, montón de cosas buenas. Vamos a saltar. Mi primera y favorita es cuando estoy trayendo un montón de cosas, bien, así que voy a importar de todo, desde íconos para traerlo, ir a Reemplazar todo, y simplemente terminan siendo todos uno encima del otro. Como usar la opción de ordenar. Qué hago si solo hubiera una manera de desempacar todos estos, puedes usar tus acciones rápidas y escribir el paquete de palabras Y puedes ir vertical u horizontalmente y simplemente como una sabiduría poco suave Genial, ¿eh? Siempre es la vertical y la horizontal ahí, dependiendo del camino que necesites ir. Obviamente, ya sabes sobre la selección inteligente y el orden, podemos simplemente arrastrarlos para reemplazarlos y los huecos intermedios, bien. Para ajustar el tamaño. Bien, el siguiente consejo útil del fondo es que cuando traes logotipos y son todos los tamaños que haríamos, acabo de usar un plugin llamado Victor logos. Y vamos a traer entró. Y notarás que vienes a través de todos los tamaños diferentes. Entonces voy a seleccionarlos a todos. El camino. Un poco los golpeé en orden es que me aseguro de que el pequeño icono de bloqueo esté encendido Mixta es de 100, así que eso va a sólo 100 píxeles ahora, ancho, todos son de un tamaño apropiado. Ahora aquí es donde son útiles algunos atajos , los align unos. Entonces los son relativamente fáciles de recordar. Mantenga pulsada la tecla Opción en una Mac, tecla alt en una PC. Y si miras tu teclado, esto es teclados ingleses Y se puede ver TEA, si, y W ahí en el lado izquierdo Si eres un viejo jugador, sabrás que estas llaves se acostumbraron mucho para como moverse hacia arriba, abajo, izquierda y derecha. Así que eso funciona para la alineación. Así que mantén pulsada mi tecla Opción en mi Mac, tecla alt en una PC. Y si tuviera W, está arriba en alinea todo a la cima. ¿Lo puedes ver ahí? Si voy Opción S, que está abajo, alinea todo en la parte inferior. Si voy a deshacer, deshacer, y si voy a la opción a, todo a la derecha deshace esa opción D. ¿Eso es útil? Principalmente la izquierda y arriba, a y W. Las otras dos prácticas son esa misma clave y es V y H. Así que vertical, horizontal. Entonces puedes alinearlos verticalmente, a lo largo del medio, que es Andy. Y horizontalmente de esa manera probablemente haya un atajo de centros de distribución, pero es demasiado complicado para mí. El mío es Comando Opción V, no está mal. ¿Por qué nunca me acuerdo de eso? No lo sé. Voy a editar a la hoja de acceso directo ahora para un pequeño atajo raro es que digamos que te dedicas algún tiempo a conseguir tus logotipos en algún tipo de orden. A lo mejor no se alinean perfectamente y haces algo así como, interesante, cuando el lado blanco, los logotipos no se equilibran del todo técnicamente justo en el medio Entonces haces algún tipo de movimiento y quieres alinear esto algo ya sea en la parte superior o la derecha. Si selecciono estos, estoy dentro de este marco. Si quiero alinearlo a la derecha a esto, no va a funcionar. Pero puedo hacer es ver esto. Si mantengo pulsada la tecla Mayús y vuelo el cursor por encima, ¿ puedes ver el cambio activado, el cambio apagado Básicamente lo que hay que hacer es ponerlo en un grupo temporal porque lo que tendría que hacer es agruparlo entonces, bien. Alinear para seleccionar a un lado, y luego desagruparlo. Y eso funciona. Pero se puede agrupar temporalmente algo. Mantienes pulsada la tecla Mayús y básicamente hace que los grupos, te permite alinear. No se mete con ninguna de mis cosas. Entonces sin ella en solo va porque smush. Bien, pero si mantengo pulsada la tecla Mayús, da click en eso, la alinea en este como grupo temporal. Ahora déjalo ir. Ya no en grupo, obviamente funciona para cualquiera de estos bots, un grupo temporal a su alrededor y luego comienza a alinearlo. Es conseguir que esto se alinee verticalmente. Y horizontalmente. Vas, oh, sin tener que hacer un grupo. A continuación, dibujando trucos que uso, voy a usar la herramienta 0 para dibujar un círculo, mantener pulsada la tecla Mayús, arrastrarla hacia afuera. Yo uso esto bastante a menudo, turno X. Básicamente lo que hace es que alterna el relleno hace trazo, cualquiera que sea el campo, ahora es el trazo Hagamos esto un poco más obvio porque a lo mejor agregamos un trazo. Cuando estás diseñando íconos y o lo pones en el equivocado. Siempre quiero invertirlo para ver cómo se ve. Entonces ahora tengo un par de colores más interesantes. En color. A veces hay un verde con él seleccionado Shift X simplemente alterna entre los dos Si tienes algo que quieres quitar el relleno del comando forward slash para deshacerte de él, puedes quitar el trazo pero yendo shift forward slash Entonces tu Opción o Alt barra hacia adelante, esta, shift, shift forward slash, stroke gone or the fill gone, or the fill gone, or Command X los alterna . Vamos. De lo que estamos hablando. Los trazos son poca cosa que no todos conocen. Tengo que enmarcar. Voy a agregarle un trazo. Voy a cambiar, subir uno para saltar ocho. Y sabías esta pequeña opción aquí, trazos por lado, puedes decidir que solo quería algo en la parte superior o puedes entrar aquí, o puedes ir al aire, ir a Custom y decir, solo quiero, voy a tal vez la parte superior y la inferior 90 tanto. Vas trazos por lado de un marco o un rectángulo. atajo raro es, digamos que estos logotipos de aquí, son del mismo ancho, Un atajo raro es, digamos que estos logotipos de aquí, son del mismo ancho, pero este está ocupando más como bienes raíces visuales para mí Si solo usas tu mantén pulsada la tecla Comando en tu teclado, Tecla Control en una PC y usa tu flecha arriba y abajo . Lo escalará. No es como si tuvieras que subir dos ascensor a través. Entonces irá, lo escalará un poco y irá mucho si también sostienes Shift. Así que mantén presionado Command Shift en una Mac, controla Shift en una PC, arriba uno, hasta si a, puedes escalar las cosas. Mesero. Bien, otro consejo es el modo esquema. Digamos que hacemos este blanco empatado para ver. Así que muestran contornos. Shift TO en realidad solo le mostrará una versión de rayos X de sus documentos. En realidad se pueden ver todos los detalles hombre permitirse logos complicados. Pero todos estos puedes empezar a ver aunque sea blanco sobre blanco, eso puede ser muy útil cuando intentas alinear las cosas si eres un Illustrator de la vieja escuela, Command Y es el atajo de Illustrator que también funciona Shift 0, creo que funciona para un poco más teclados en todo el mundo, y es Mac y PC, mientras que Comando Y o Control Y en una PC A veces hay atajos para hacer lo mismo por un poco más de detalle. Vamos a este de aquí y vamos a esconderlo. Entonces Comando Mayús H para ocultar o Control Shift H para ocultar o simplemente apagar el globo ocular. Lo que puedes hacer es que no puedo seleccionarlo ni verlo si voy al cambio de modo Esquema. Oh, bien. Yo tampoco lo veo. Lo que puedes hacer es que en realidad puedes encender eso. Puedes ir a Figma. Puedes ir a Ver. Aquí hay uno que se llama bosquejos. Mientras que esboza, en realidad hay incluir capas ocultas. El ego. Así que en realidad puedo ver este aunque esté oculto. Y en realidad puedo seleccionarlo en modo esquema. A veces eso es útil, a veces no lo es. Pero ahora sabes que se puede encender y apagar, bien. Cambio para volver a encenderlo. Una última cosa es que sabemos que esto de antes es la tecla de la barra espaciadora Siempre que quisieras durante con estos, Vamos Shift X. Y querías acercarlo a un marco y le salta las comidas. Cuál es el atajo. Sólo un pequeño recordatorio. Eso es correcto. Si sostienes barra espaciadora, quieres acercarte algo o llevarlo al borde así Bien, sostén la barra espaciadora mientras la arrastras. Bien, entonces arrástrelo, arrástrelo, sostenga la barra espaciadora. Significa que conseguirá uno escapar del marco en el que está. Es genial para estos como, no lo sé. Grande, tan torpe Necesitas en la antigüedad de la página. Ahí vas. Esos son mis consejos y trucos para dibujar en Figma, pequeño resumen ¿Qué tan bueno es el pack? Tan bueno, bien, eso es todo. Te veré en el siguiente video. 123. Cómo dibujar en Figma con la herramienta de bolígrafo: dominio de los puntos de anclaje: Hola a todos. En este video, te voy a mostrar algunas técnicas avanzadas de herramientas de pin. No vamos a cubrir demasiado de lo básico. Te voy a mostrar si te resulta complicado dibujar cosas en Figma, te voy a mostrar dos formas, la forma en que tiene más sentido pero no es Avanzada Y luego te voy a mostrar la forma avanzada que utilizo cuando estoy dibujando en Figma, si ya eres un maestro de la herramienta pluma, puedes saltarte. Si la herramienta pluma le da miedo a tu calor. Mira este video y ojalá te lo haga un poco más útil y estés haciendo tu dibujo en Figma. Vamos a ponernos en marcha. Bien, así que voy a traer una imagen. Está en tu carpeta Imágenes llamada pinto práctica PNG. Tráelo. Voy a ir solo haga clic una vez para colocarlo. Bien, voy a cerrarlo. Comando Shift L. Control Shift L en una PC, solo para que no pueda moverlo. Y ahora vamos a dibujar. Entonces P para la herramienta pluma, te voy a mostrar dos técnicas. La forma un poco más comprensible y luego la forma hacky gris que me gusta hacerlo, que tiende a verse mejor Empecemos todos aquí abajo con la forma más comprensible. Haces click una vez para esquina, ¿de acuerdo? Y haces clic en tu bonita línea recta, haces clic y arrastras. Así que encuentra el centro de la curva. Quizá tengamos que apagar el chasquido. Así que haz clic en Acciones, Vamos a apagar el snap o estos. Bien, de vuelta a la herramienta de pluma. Aquí abajo. Haga clic una vez para la esquina, donde está en el vértice de la curva. Haga clic en mantener y arrastre para una esquina, Dale un meneo, mira lo que hace Y lo vamos a conseguir así, como lo hicimos antes en el curso No te preocupes, puedes arreglarlo más tarde. Pero me parece que esta es la forma más fácil de enseñar a la gente. Haga clic una vez para la esquina, haga clic y arrastre para curva. Esto es un quanta, es click una vez. ¿Esto es una esquina o una curva? Eso es un rincón. Haga clic una vez. Ahora la esquina haga clic una vez. La esquina haga clic una vez, encuentre el vértice de la curva, haga clic y arrastre hacia afuera. No tengas miedo de moverlo. Llévala ahí. Perfecto. Haga clic. Una vez que voy a llegar al ápice, no puedo hacer todo esto a lo grande. Puedo tratar de conseguir el ápice, pero se puede ver que simplemente no es suficiente. Estamos tratando de hacer demasiado con un punto de anclaje. Voy a necesitar probablemente, voy a necesitar uno ahí. Y uno de aquí es hacer clic en mantener y arrastrar. Uno por aquí, haga clic en mantener y arrastre. No lo hice bien la primera vez. Eso está totalmente bien. Acercarlo en algún lugar y podemos arreglarlo. Este es un rincón, está bien. Haga clic y arrastre la curva. Haga clic una vez para la esquina, haga clic una vez para la esquina, haga clic y arrastre para la curva. Haga clic una vez para la esquina, haga clic y arrastre. Tienes el swing de eso. Esa es generalmente la forma más fácil de comenzar. Puedes moverlos después usando tu herramienta de movimiento, que es la tecla V. Puedes hacer click sobre estos y decir que en realidad vas ahí y lo mueves de esa manera. Ahí vas y necesitas ir por este camino. Y vas así y luego simplemente como finura en algún tipo de forma aceptable Entonces se baja mucho para practicar, practicar , practicar, practicar con la herramienta pluma. Una vez que hayas hecho una mejor práctica y te vuelvas bien haciéndolo de esta manera o las formas más avanzadas. Y luego haz clic en Listo. Voy a eliminar esa de aquí, mi herramienta P otra vez. Y voy a usar algunos atajos diferentes. Entonces es bastante atajo pesado este. Así que vamos a empezar en algún lugar fácil como una esquina. Haga clic una vez para esquina, haga clic una vez para esquina. Aquí es donde se vuelve diferente en lugar de hacer clic una vez y luego tratar de hacer la curva por aquí, que funciona. Se ve mucho mejor cuando no tienes tantos puntos de anclaje Y lo que podemos hacer es que en realidad podemos hacer una curva aquí. Estás como, Oye, no queremos curvar en un poco recto. Lo que podemos hacer es empezar con una curva, poco ponerla recta ish, bien, así Mantenga pulsada la tecla Opción en una Mac, OK, el dosel Santa se rompe un poco Los mangos están saliendo de este punto de anclaje. Se llama espejado. Cuando ellos, Mirror recuperándose, cuando coincidan, voy a romper ese espejado Duplicación. Oye, significa que entonces puedo ir y tratar de predecir esta siguiente curva. Ahí es donde eso se reduce a la práctica. Sé que eso va a hacer que mi curva vaya en la dirección correcta Y antes de continuar, lo que puedes hacer en realidad es simplemente agarrar esto y arrastrarlo de vuelta a su casa. Y se puede ver que viene recto otra vez. Así que no hay manija saliendo de ese lado y solo quiero de este lado por aquí, voy a hacer lo mismo. Haga clic en mantener, arrastre. Mi curva suele ser un buen trabajo y no quiero dejar ir porque si lo hago, trata de curvar eso pero bien. Entonces voy a hacer clic en mantener y arrastrar y luego romperlo de nuevo, manteniendo pulsada esa misma opción de tecla en una Mac, alt en una PC. Y luego intenta adivinar a dónde tiene que ir esto ahí. Voy a poner un punto de anclaje ahí. Entonces, cuando no cabalgan otro directamente a través del mismo tipo de ángulos no lo hacen del todo bien? Y luego trabajar a mi manera alrededor. Si tienes Joel uno que es curva, puedes romperlo después. Mantenga pulsada la tecla Opción. Regresa a aquí y lo que haremos es que se lo vaya a romper. Bien, entonces tengo una esquina. O si haces una esquina, quieres que sea una curva. Puedes mantener pulsada la tecla Comando en una Mac, tecla de control en una PC y arrastrar nuevos mangos. Opción para romperlos. El comando para arrastrar los nuevos controlará en una PC. Entonces aquí, no lo sé, ¿esto te ayuda siquiera? Arrastra mis curvas ahí. Haz clic y arrastra hacia arriba aquí. Si David se separa, puedes simplemente hacer click sobre él una vez y se conectará de nuevo hacia arriba. Ahora bien, este de aquí estás como, Oh, es una esquina en una curva. Otra vez. Voy a ir así, acercarlo un poco, romperlo, y luego continuar. Pero antes de continuar, voy a arrastrarlo de regreso a su casa. Este necesita un trasero recto aquí, así que probablemente voy a alargar eso. Ve a hacer clic en mantener y arrastra hacia afuera. Seco, vuelve. Echa un vistazo a esto, romperla. Vuelve aquí, deshazte de este tipo. Se puede arrastrar perdió mi punto. Vamos a hacer clic en ese una vez, arrastrarlo, romperlo, en realidad arrastrarlo de vuelta antes de que vaya a aquí. Dulce dibujo Dan para ir a ordenarlo, voy a usar mi tecla V y simplemente pasar y mover estas cosas a donde necesitaba ir. Simplemente, de nuevo, siempre estoy buscando que los puntos de anclaje se vean muy simétricos. Termina teniendo una curva más agradable. Si estas cosas están equilibradas. Estos dos aquí, yo un poco directamente uno frente al otro, pero no del todo de la misma longitud Entonces estos dos de aquí, dice un punto de anclaje por la parte inferior. Echemos un vistazo a este que se ve más o menos del mismo tipo. Este necesita salir un poco, poco dar y recibir, un poco de reposicionamiento de puntos de anclaje para que sean perfectos. Sí, esto es un círculo. Yo sólo debería dibujar un círculo. Pero estamos practicando la herramienta pluma. Bien, así hago mis dibujos de victoria en Figma. Hay un pequeño resumen breve para aquellas personas que no han hecho mucho dibujo en Figma o al menos dev, poco tal vez un torpe su Ojalá hubiera algunos consejos y trucos ahí dentro para ayudarte con tu creación de iconos y logotipos en Figma, bien, y eso va a ser todo Te voy a ver en el siguiente video. 124. Cómo dibujar con ángulo curva y espejo en Figma: Hola a todos. En este video, vamos a ver cómo dibujar algo con un poco usando la herramienta pluma Pero no realmente si la herramienta pluma está en tu, no me gusta que cestes estos videos para ti. Te vamos a mostrar cómo usar algo llamado el bientot, lo que básicamente solo significa que puedes simplemente arrastrar líneas y obtener puntos de anclaje súper prácticos Además trabajaremos a través de estas locuras. ¿Qué significa el espejado, Ángulo de espejo? De hecho, son muy útiles cuando quieres evitar todos los atajos que hicimos en el último video. Así que empecemos a dibujar sin la herramienta pluma, un poco. Bien, entonces vamos a agarrar la herramienta de pluma que te gusta, Oye, nos prometiste no aprender la herramienta de pluma porque es dolorosa. Vamos a comenzar con la herramienta de lápiz solo para darle un poco de color Así que solo vamos a hacer clic y todas las transiciones clave, bien, solo pasa y ¿dónde quiero que pase por aquí? No lo sé. Como antes, vamos a poner un par de dólares de cabeza y sólo un poco golpear todas las transiciones y ápice es, y luego vamos a usar la herramienta pluma La herramienta pluma es esta de aquí, el atajo para ello como mantener pulsada la tecla Comando en una Mac, tecla de control en una PC. Y lo que puedes hacer es simplemente hacer clic en el medio y simplemente ir, debes ligando, eso nos hará hacer cosas doblando. Bien, podrías encontrar que esta es una manera fácil de poner tus íconos en algún tipo de orden. Estarías como, ¿qué pasa con estos tipos? Bien. Entonces cuando tienes cosas que no están reflejando, donde no puedo decir, lo que puedes hacer es volver a cambiar a esta Herramienta de Selección, que es tecla V y teclado Da click en este tipo y di en realidad, puedes ser o bien solo Ángulo de espejo o Ángulo y longitud de espejo. Y nada pasa realmente excepto cuando vas y cambias esto puedes ver, se vuelve ver la longitud en el otro lado cambia y el ángulo es el mismo. Terminas con solo, sí, es una forma de suavizar estas cosas. El otro es si selecciono mi herramienta de selección, haga clic en esta. Si voy Ángulo espejo, haga clic de nuevo en él. Refligirá el ángulo pero no la longitud. ¿Puedes ver? Necesitarás ambos. Bien, en este caso, probablemente quiera Ángulo y longitud del espejo. Bien. No sé por qué anular la selección, pero oye, lo hace, así lo hace el largo y el ángulo Ahora, es decir, puede haber una manera más agradable de hacer dibujo. Si la herramienta pluma y todos los atajos o simplemente un poco loco. Lo mismo es que si tienes una curva y necesitabas ser una esquina, ir a no espejar, y luego ir a romper Se. Dijo, bueno los atajos. Entonces, antes que nada, la herramienta de pluma, solo a mano. Mantenga pulsada la tecla Comando y simplemente vaya a Reino Unido, Reino Unido. Agrega tus propios efectos de sonido. Puedes acercarte mucho a lo que quieres. Y si necesitas cambiar algo, vas a ser Ángulo y longitud del espejo. Este de aquí, está peleando con ellos. Vamos ahora una última. Si hago clic en esto usando mi herramienta de Selección y pero puedes mover a este tipo de nuevo a su base de operaciones y desaparece. Bien, así es como usar la herramienta Pluma sin usar la herramienta Pluma Bien, eso es. Te veré en el siguiente video. 125. Puedes contar con puntos de anclaje animados o booleanos en Figma: Hola a todos. Oye, me preguntan mucho. ¿Se pueden animar puntos de anclaje en Figma? Así que podemos usar smart animate para hacer cosas geniales de Mophie, tal vez usar booleanos Y la respuesta corta es no. Aquí tengo estas dos formas. No se transforman juntos como esperarías Figma actualmente no permite esto con este booleano de aquí, quería un poco moverme porque lo que quiero es hacer esto con esta cosa, se mueve Es un tutorial genial que vi de los estudios de olía e intenté recrearlo y trae algunos puntos realmente buenos sobre lo que podemos y no podemos hacer con dibujar Entonces la respuesta es no. Déjame demostrar rápidamente cómo hice estos solo para que tengas súper claro lo que no puedes hacer. Gran historia, Rodin. Pero en el siguiente video, hecho vamos a ir y hacer de esto un poco de truco. Y el truco va a, voy a mostrarte lo que esto, ahí está el truco. Fácil. En realidad es solo ese bloque deslizándose a lo largo. Se ve genial, sobre todo cuando este tipo salta y cambia este color. Pero si intentas mover los puntos de anclaje, simplemente se desvanece, lo cual no está mal Todavía es un poco genial, pero no exactamente lo que queremos. Entonces, demos una demostración de cómo se rompe. Bien, sólo para una rápida demostración de Joel y lo que voy a llamar una corona Bien, es sólo un dibujo vectorial. Voy a convertirlo en nuestros componentes. Voy a hacer una variante. Y en lugar de simplemente cambiar el tamaño que podemos hacer, sabemos que realmente quiero perderme con estos puntos de anclaje, bien, y hacer algo interesante. Y desgraciadamente, vamos a terminar. Cambiemos E para ir al prototipo. Lo conectas a ti de toque, cambias a esta otra variante usando smart animate. Lo mismo retrocediendo por el otro lado. Vamos a arrastrar una instancia. Vamos a previsualizar esa instancia. Opción de Comando, Entrar, Opción de Control, Entrar en una PC. Haga clic, haga clic. Bien, simplemente no funciona. Desafortunadamente, así como un desvanecerse es lo mismo nosotros los booleanos. Si estás pensando, Oh, me pregunto si podría simplemente animar un booleano como ese ejemplo de Navegación que dice si dibujo un rectángulo, bien, voy a usar mi O'Toole para la herramienta Elipse, arrastra esto y ve, Ustedes dos personas van a ser booleanos, Ustedes dos personas van Yo voy a hacer lo mismo. Hagámoslo un componente es tener una variante del mismo y voy a cambiar a turno. Oh, bien, para el modo de silencio de esquema, esto me resulta más fácil cuando estamos trabajando con booleanos por no poder verlos, pero van a arrastrar este de esta manera Bien, y tratar de animar entre los dos, que ambas formas, pero por el momento, así que he mirado Shift 0, vamos a cambiar al modo prototipo y vamos, vas a su cambio de pulsación a Smart Animate Se puede ir a la parte de atrás, agarrar una instancia de la misma. Vamos a darle un adelanto. Déjame ponerme boop. Boop, igual que un desvanecerse. No estaba seguro de si solo te mostré el principio para decir, no, no puedes hacerlo. Ya sea que te muestre ejemplos de no se pueda hacer de todos modos, esa es la verdad del asunto en este momento, pero hay soluciones que haremos en el siguiente video para esta cosa de navegación un poco genial avance que no se pueda hacer de todos modos, esa es la verdad del asunto en este momento, pero hay soluciones que haremos en el siguiente video para que esta cosa de navegación un poco genial avance. Bien, hagámoslo 126. Cómo animar un menú de navegación móvil en Figma con un baño: Hola a todos, vamos a hacer esta cosa genial de la navegación donde se mueve un poco y choca alrededor Es muy genial. un tutorial en línea que uno de mis alumnos me trajo, aunque teniendo algunos problemas. Lo estaba recreando. También me topé con algunas cosas. Entonces creo que hace que sea un muy buen ejercicio de aprendizaje para que todos podamos hacer juntos. Combinará cómo animar caminos o al menos los trucos para que parezca que estamos animando ese pequeño chapuzón en el fondo ahí Y algunos de los problemas con los que podrías encontrarte si intentas hacerlo tú mismo. Además se ve realmente genial. Bouncy y Debbie, miren eso Bien, comencemos. Así que vi este tutorial y tutorial muy genial de Smelt Studios Lo que quiero hacer es desglosarlo porque he tenido estudiantes que vienen a mí tratando de recrearlo Se topan con un par de temas. Entonces lo que voy a hacer es hacer una versión realmente simple de esto y la haremos más interesante a medida que avancemos. Así que hagámoslo con Booleano realmente simple para empezar Entonces vamos a usar el auto para la herramienta rectángulo. ¿Por qué no un marco? Porque no podemos hacer un Booleano con un marco y no podemos hacer como la herramienta Pin, Anchor Point cosas con nuestro marco, solo podemos hacerlo con un rectángulo Voy a dibujar un rectángulo. Si quieres que me vuelva a poner mi mandato, consíguela. Lo que quiero hacer es que voy a agarrar la herramienta Elipse. Voy a mantener turno, arrastrar una elipse Voy a combinar estos dos, bien, usando un booleano, voy a usar el restar y sabemos que no podemos moverlo a lo largo de K como animación Pero lo que podemos hacer es decir dentro de los sustractores, las dos partes, ¿verdad Rectangular una elipse. La elipse, en realidad sólo voy a hacer mucho más tiempo de lo que necesito Estoy arrastrando el lado aquí del rectángulo, manteniendo presionada mi tecla Opción en una Mac, tecla alt en una PC, y se arrastra por ambos Así que tengo aversión, tengo un poco de área extra aquí para poder moverla ¿Ves que tiene que ser suficiente para que pueda llegar hasta aquí Entonces necesito que el mío sea un poco más grande. No todo el asunto. Yo sólo quiero el rectángulo. Voy a mantener presionado Comando y haga clic el rectángulo Control en una PC para sumergirse directamente en su mantenga presionada la tecla Opción, tecla Alt en una PC, solo arrastre una muy grande. Ahora lo realmente grande aquí antes seguir adelante es que simplemente lo arrastró hacia afuera para que podamos ver que todo es que toda esta sección necesita estar en un marco, necesita estar dentro de marcos que podamos moverla dentro de ella Bien. Tiene que ser hijo de un marco. Entonces para hacerlo, voy a usar el atajo para enmarcar algo, bien, envolverlo, sumarlos a un frame Entonces tengo todo seleccionado, Opción de Comando G o Control Alt G para poner todo dentro de un marco. Vamos a llamarlo comandante, llámalo Nav Alt. Uno. Lo vamos a hacer es convertirlo en un componente. Vamos a tener una variante es solo tener que por el momento, vuelvo a arrastrar a mi marco aquí, que no va a entrar, tú vas dentro de mi teléfono. Y este de abajo de aquí, no el envoltorio. La resta en el interior tiene que ir hasta aquí todo el camino. Bueno, no fuera. Sostén la barra espaciadora si necesitas mantenerla dentro del marco para que no quieras mover la variante en sí, todo el asunto. Porque podemos mover variantes de todos modos, nos gusta, al igual que más de una cosa organizativa. Queremos que las cosas dentro de ella se muevan. Entonces veamos si podemos hacer que funcionen ahora. Entonces voy a cambiar al modo prototipo, turno E, clic en esta primera variante y decir cuando se haga clic, vaya aquí Entonces, de barril, obtuve una variante para usar smart animate. Y voy a usar rápido porque se ve genial. Lo mismo aquí. Haga clic y arrastre la línea de fondo hasta aquí. Debería obtener todos los mismos valores predeterminados. Arrastremos una instancia de la misma haciendo clic en la primera dentro del conjunto, mantenga presionada la opción o Alt. Voy a arrastrar el mío hasta aquí. Esto ya no tiene que estar ahí. Entonces vamos a darle un adelanto. Entonces Comando Opción Enter, Control Alt, Enter, se va a previsualizar yendo, vamos a hacer click. Mira eso. Aquí vamos. Esa es la mecánica básica de la misma. El truco es, es que en realidad solo estamos deslizando esto solos y eso tiene que estar dentro de un marco padre. Y que no solo estás moviendo la variante, estás moviendo estas cosas dentro de la variante. Esa es la parte importante. Bien, ahora que sabemos que eso es hacer una versión un poco más bonita, preveo que nos lleve un poco Entonces te vas. Y voy a empezar con un bonito chapuzón. En lugar de en realidad comenzaremos con el cambio de iconos. Yo, vamos a escribir icono, y voy a trabajar solo con estos tres por el momento. Puedes obtener cualquier íconos que te gusten. Te atraparemos. Y voy a por el sombrero. Sólo voy a usar tres de ellos. Pegarlos todos en navegar dulce atajo. Si usas la selección rápida, ¿cómo las apilamos todas? Vamos a hacer clic con la acción. Eso se llama PAC, PAC horizontal. Ahí vamos. Los voy a alinear en la parte inferior. Así que voy a mantener presionada la opción en una Mac, alt en una PC y golpear S para el fondo. O en realidad vamos a hacer H V. Así que todos están alineados verticalmente. Deben ser una selección inteligente. Todavía estoy en modo prototipo, así que voy a ir a Shift, a arrastrar estos. Qué tan lejos voy a agarrar la herramienta Rectángulo para construir mi parte de esto. ¿Bien? Vamos, lo voy a mandar a la parte de atrás usando mis corchetes. Puede usar el primero tipo de empuja todo hasta la parte inferior de mi teléfono. Eso se ve un poco bien. Voy a entrar en esto para poder usar mis dulces habilidades con la herramienta de pluma. Entonces voy a ir mi tecla V, hacer doble clic para entrar, ir a mi Pinto, que es P. Estoy dentro de ella porque estoy en el modo de dibujo de objetos, haces doble clic en ella para entrar dentro de ella Bien, y probablemente voy a ir a tres, ¿verdad? 12.3 Volver a mi tecla V para mi herramienta de selección. Este abajo, puedes ponerlos alineados. ¿Eso parece una buena V? Eso creo. Algo así. Algunos de los atajos que aprendimos antes que voy a hacer para este es un no mirroring Voy a tener Ángulo y longitud del espejo. Para este abajo de aquí, voy a agarrar mi herramienta pin, manteniendo presionada la tecla Comando, que es esa herramienta Curvar, Caín realmente puede hacer clic en el icono mismo Ahora por el momento es un poco torpe, así que puedo decir en realidad Ángulo y longitud del espejo Vuelve a mi herramienta de selección. Y puedo decir, aquí vamos, va a ser del mismo largo y ancho. ¿Bien? Y quiero ser algo así. A lo mejor voy a redondear estos también. Voy a usar la herramienta pluma y simplemente haga clic en esto y simplemente arrástralo un poco. Lo mismo con este. Sí. Eso va a funcionar. Bien. Hecho. Así que tengo el Bend, tengo todas mis formas. Lo que quiero hacer es asegurarme de que esto sea realmente amplio. Entonces voy a alejar el zoom. Voy a ir, si lo arrastro, va a manchar mi cosa Entonces lo que voy a hacer es volver al modo de edición de objetos. Haz clic en este primer punto de anclaje, mantén presionado Mayús y toma el segundo. Simplemente haz un Same realmente grande con estos para sostener Shift, haz clic en ambos, hazlo realmente grande, más grande de lo que probablemente lo necesites , porque no importa. Se puede cortar. Este golpe escapa un par de veces para salir. Bien, ¿y ahora qué vamos a hacer? Ahora es el gran punto en el que tenemos que asegurarnos de que está en un marco. Seleccione todas las opciones de comando G, Control Alt G o haga clic con el botón derecho y diga convertir a una selección de fotograma. Eso, creo que sí Se convierte en Componente, puede ir variante Comando D o Control D para hacer otra. Y voy a hacerlo en realidad todo mi marco aquí porque quería poder verlos a todos dentro los límites de recorte. Lo voy a mover en un enfermo. Así que vamos aquí. Vamos a verificar que funcione. Entonces esta primera, perfecta, esta de aquí. Quiero no ajustar la variante. Yo quiero sólo el rectángulo de aquí y simplemente sube. Y vamos a hacer ese poco, Adrian efecto de sonido. Bien, y voy a pasar al modo prototipo. Ve tú, voy un poco aquí, cambio a probablemente variantes Miami Rápido. A ver si eso funciona. Vamos a agarrar una instancia de ello. Vamos a previsualizarlo. Se enloquece. Ciérrelo, vuelva a previsualizarlo. Vamos, es click. Ahí vamos. Tipo de trabajo. Bien, vamos a llenarlo. Entonces, ¿a qué vamos? Fui todo eso. Haga clic aquí abajo. Bien. Deshágase del fideo, haga clic en él, elimine Lo que me gustaría hacer es hacer este fondo. Entonces este de aquí, el rectángulo dentro de él, baja hasta aquí. Entonces esos son los tres pequeños saltos. Y lo que haremos es que lo amañemos. Entonces cuando esto, cuando esto, esto y esto, estoy aguantando turno. Entonces en esto se hace clic, no va a ninguna parte. O en el lugar correcto cuando se hace clic en esto va a aquí Lo mismo contigo. El corazón. Cuando el clic más caliente vaya al caliente. Caliente, él iría a esa. ¿Qué más tenemos? Vas a ir a la correcta. Éste. Entonces, cuando una venta de boletos vuelve a la primera opción de venta de boletos con esta, solo ¿Siguen usando smart animate y rápido? Bien, así que sigamos previsualizándolo. Vamos a probarlo. Tú, tú, tú, bien, todos trabajan en. Consigamos a estos tipos solo para que se vuelvan un poco diferentes en tamaño. Entonces este de aquí, voy a llegar a subir. Estoy sosteniendo mi tecla Mayús abajo usando mi flecha hacia arriba subir 123 probablemente. Quiero consistencia entre estos tipos. Uno-dos-tres. Uno-dos-tres, que tengo que ser lo que podría hacer así como el y ya sabes, ¿en qué he hecho clic? Entonces haga clic en esa mantenga presionada Mayús, haga doble clic en esa, haga doble clic en esa. Y voy a decir, todos ustedes no van a ser de ese color. Voy a hacer que lo cambien a los otros quinientos, ese de ahí Lo que también podría hacer es escalarlos. Ahora, tal vez te sientas tentado en la cima aquí solo para irte, bien Voy a, podrías simplemente ir más ocho o no en ese después del ancho, podrías ir más ocho, bien, y estirar ambos de ese. Eso es más ocho. Eso funciona un poco. Vemos un poco fue de arriba a la izquierda Como nosotros, la herramienta de escala es un poco útil, una cueva para la herramienta de escala. Y se puede ver, quiero escalar desde el centro cuanto como 0.25. Ahí vamos. Eso no funcionó. Pensando sobre la marcha, hagámoslo todo por separado. Bien, Entonces vas a ser un ancho de listado la altura porque creo que las alturas son todas iguales. Vamos más ocho. Y va desde el centro. Lo mismo para este de aquí. K2 más ocho. Ahí vas. K2 más ocho. Bien, veamos si eso funciona. Vayamos por aquí arriba. O ya casi está ahí. Eso no se sienta del todo en el centro. Me molesta. Tienes una mirada. Solo necesitas ser un poco así. Y como que los puse todos del mismo tamaño, pero este necesita subir un poco más alto porque no todos tienen las mismas alturas, ¿verdad Entonces va a haber un poco de ida y vuelta tratando de averiguar qué se ve mejor cuando se mueven a estos, vas, no podemos animar la pausa y no podemos animar a los booleanos Pero puedes hacer que se sienta como lo hace. Pero en realidad solo cambiando eso a lo largo de un buen poco de animación inteligente Creo que la flexibilización de esto rápido hace que todo esto sea realmente genial Ahí vas. Bien, ese va a ser un poco complicado juntarnos, pero un buen momento para algunos de esos atajos que estamos aprendiendo ¿Y es raro que estos no se hayan escalado en mi vista previa? Se puede ver que un tamaño pequeño regular, conocemos esas escalas aquí dentro. Bien, pero simplemente no han hecho una vista previa aquí. Ofrezcamos refrescar. Refrescar no les ayuda en absoluto. No sé por qué. Es una de esas Figma abiertas, ciérrala de nuevo de nuevo las cosas que creo enmarcar Volvamos ahí dentro. Vamos a meterlo dentro de mi iPhone. Echemos un vistazo ahora. Ahora que el tamaño correcto. Aquí vamos. Bien, eso es. Ahora, te veré en el siguiente video quien sé que va a haber un problema en el que estoy pensando por masticar su snus, por citar, estoy haciendo algo Creo que si haces esto en un orden diferente, que sé que algunos de ustedes lo harán Ya ves, tengo tres variantes. Todos son del mismo tamaño, pesar de que estos asoman en la parte superior, lo que puedes hacer si lo haces de una manera diferente es que estos pueden ser de diferentes tamaños. Podrías hacer estos primero, ellos hacen un conjunto de componentes. Puedo ver a la gente haciendo eso. Entonces, si encuentras eso, vamos a salvar a éste, se lo hará a éste. El marco, ¿bien? Todo el camino alrededor del exterior aquí tiene la misma altura que esta, manera que cuando hacen la transición, todos se alinean. Si no lo son, si hago clic en esta y agarré mi tecla Comando, tecla control en una PC, en realidad puedo ajustar el marco separado de todo lo demás. Sólo puedo envolver. Es un marco a pesar de que se le llama variante. Bien, puedo decir que hagamos esto más grande. Eso podría suceder. La cosa que termina siendo un poco más alta que esta, porque ésta es un poco clip ahí Echemos un vistazo a lo que le sucede ahora. Y entonces puedes verlo movido si terminas en esa trampa, bien, lo que tienes que hacer es un par de cosas. Lo que tienes que hacer es simplemente asegurarte esto sea rápido a algo que sea del mismo tamaño en todos ellos. Si mantengo presionada la tecla de comando en una Mac, tecla de control en una PC alrededor de la varianza. Entonces seleccioné la variante, puedo hacerla del tamaño correcto y eso debería funcionar para ti. Vamos a darle una prueba ahora. Bueno, lo sé porque lo rompí de esa manera, pero ese es un problema con el que podrías encontrarte y ojalá eso te lo arregle. Da clic en la variante, asegúrate de que tenga la misma altura. Puedo verlo un poco aquí. Simplemente puedes introducirlo. Si es necesario que sean 50, puedo introducirlo. No va a funcionar. Si no lo pusiste en un puño de marco, si sigue sin funcionar. Bien, tiene que estar dentro de ese primer cuadro que hicimos desde el principio. Envolviendo todo esto un pequeño y agradable contenedor para que todo se mueva dentro de, separado de los elementos reales, vas, bien, ese es ahora el final, definitivamente el final esta vez, Bye 127. Proyecto de clase 16 - Alt Nav Animation: Hola a todos, tiempo de proyecto de clase. Quiero que recrees esto. Si aún no lo has hecho del video anterior, lo que realmente estoy buscando es ese punto de anclaje que se mueve un poco a lo largo Sé que es un poco fingido. Hacer algo con los iconos puede ser un cambio de color. No tiene que ser este tipo de cosa de caída goteante o puede ser, no me importa Sólo quiero ver que se puede conseguir que la mecánica funcione. Yo quería ser para que ahí esté la forma, ¿quién es mi original? Usando los puntos de anclaje solo para practicar eso un poco también. Lo que podrías tener la tentación de hacer es hacer trampa. Hacer trampa está bien. Puedo comprobarlo, pero podrías tal vez como digamos este de aquí. Podría tener un círculo aquí que coincida con el fondo y solo mover el círculo solo. No lo sabrías. Lo harías en cuanto el contenido intentara ir detrás de él. Entonces vas, solo quiero que recrees un video tuyo interactuando con él, subas el enlace a la sección de asignaciones, compartas en redes sociales, me encantaría ver qué haces Usa el tuyo propio, usando tus propios colores, puedes usar mis iconos o cualquier íconos que quieras usar para tal vez solo configurarte un poco y no olvides comentar sobre el trabajo de otras personas, retroalimentación, aliento, trabajo en equipo Bien, eso es. Te veré en el siguiente video. 128. Cómo superponer y apilar cosas en un Autolayout de Figma: Hola a todos. En este video, te voy a mostrar cómo superponer las cosas para que se apilen una encima de la otra, si quieres, solo ponlas en diferentes órdenes de capa. Eso es parcialmente cierto, pero no si quieres hacerlos un layout automático donde podamos agradarlos y reorganizarlos. Ahí vas. También puedes jugar con el orden de apilamiento. Fancy. Bien, para empezar, estoy de vuelta en mi página uno con toda la basura. Yo he hecho. Cambio de fotograma para animar una caja para que los comentarios entren dentro Voy a traer algunos íconos que quiero superponer ahí en tus archivos de ejercicios. Desplazamiento de mando, K, Cambio de control. Es un poco tarde para los atajos. Dan, sobre todo esos, traen íconos. Voy a colocarlos todos o en el lugar equivocado. Voy a usar mis Acciones Rápidas. Voy a ir a empacar horizontal. Y la manera más fácil es con todos ellos seleccionados selección inteligente. Ahora vamos a hacer negativo. Ahí tienes, pero no te permitirá cambiar el apilamiento. Y si bien esa es la manera fácil, tal vez sea todo lo que necesitas. Déjame mostrarte el camino correcto. Probablemente estadísticas aquí estamos. Todos estos chicos necesitan ser múltiples componentes. Estos deben ser llevados a mi documento de componentes principales o a mi página de componentes. No voy a hacerlo ahora mismo. No me juzgues. Bien. Estas instancias, a pesar de que los componentes aún pueden estar alineados negativamente, pero el truco realmente sucede cuando los convertimos en autolayout, tal vez cambiar una K y es bueno uname Bien, ahora puedo usar autolayouts todavía usar Bien, pero lo bueno de aquí es que tenemos algunas opciones avanzadas de diseño automático, y ahora podemos ir en el apilamiento de Canvas. Ahora, están todos ahí z-index, dependiendo de como quieras llamarlo. Voy a hacer primero en la parte superior, perdido en la parte superior. Bien, depende de lo que quieras hacer esto correctamente, correctamente. ¿Qué tan grandes deben ser estos? Voy a volver a los componentes principales y decir K para la escala y la altura ahí. Voy a hacer estos los 16 si señora con mi autolayout porque todavía está usando el negativo esa sesión negativa, lo cual no tiene sentido cuando es realmente grande Estos en mi página. Lo último que quiero hacer es agregar algunas sombras. Probablemente pueda hacerlo a esto. En realidad, voy a ordenarlo, hacer que se vea bien. Pero realmente eso es todo. El espaciado negativo funciona solo con objetos antiguos regulares. Funciona cuando los haces componentes. Funciona cuando los haces autolayouts. Pero una vez que los autolayouts, puedes jugar con este apilamiento bajo las Lo que quiero hacer ahora es bastante arriba. Voy a seleccionarlos a todos. Bajar a, oh, esto vale la pena andar por ahí porque si vas a saltar es efectos. Voy a añadir una sombra de caída. Y lo que verás es que es echar un vistazo. Ellos por aquí. Ya ves vamos a moverlos hasta aquí. ¿Ves lo que ha pasado? No es bueno. Sombra. Lo que quiero hacer es agarrar a todos estos tipos. Ve a mi arreglo. ¿Tus efectos entran en la configuración Hay una opción ahora y aquí este es espectáculo detrás de transparente ¿quién? Eso no me gusta. No me gusta qué sombra, pero funciona. Quiero ir a lo mejor por ese camino cero, por ese camino. Me gusta tabular a través de estos ya que los estoy cambiando . A lo mejor sólo una de esa manera. Tal vez vaya. Y cuando se aplican negativamente, tienen un poco de sombra entre ellos. Me encanta esa cara. ¿Bien? Bien, eso es. Así es como superponerse y apilar fácilmente las cosas en Figma 129. Cuáles son los atajos de Figma para abrazar y rellenar: Hola a todos. En este video, vamos a ver cómo cambiar del relleno de abrazo fijo redimensionando usando atajos. La respuesta corta es hacer doble clic en el borde para abrazar y Opción o Alt doble clic para ir a Relleno ¿Por qué este video es tan largo? Hay un par de cosas que debes saber, pero no mucho más. Reconstruyamos esto y te mostraré los consejos y trucos. Bien, entonces estos atajos, vamos a agarrar la herramienta de tipo y dibujar un cuadro tipo como un rectángulo Bien, entonces va a ser una caja de tamaño fijo. Voy a poner algún texto, tecleas algunas cosas o pegando algún Loren Y voy a usar la herramienta de marco. Voy a golpear a Escape para deshacerme de todo. Si voy a trazar una línea aquí y usar un marco para hacerlo con un relleno de eso. Qué alto va a ser, una altura de ocho píxeles. Vamos a convertir todo esto en un diseño automático. Y la forma en que esto necesita funcionar es que se asegure de que su cuadro de comentarios, todo lo que hemos dibujado hasta ahora esté dentro de él. Le das un nombre a esto. Puede ser mi papel. Entonces todo aquí va a estar cambiando. Va a ser un diseño automático. Iba a estar arriba a la izquierda Entonces déjame mostrarte cuán receptivo es esto hasta ahora. No muy receptivo. Para que sea receptivo, necesitamos jugar con el cambio de tamaño, eso es abrazo y abrazo y altura fija En lugar de jugar con estos menús, puedes usar atajos. Tan bueno. El primero, abrazo, digamos que nuestro redimensionar esta caja a través de mis diseños y me doy cuenta de que se ha ido a arreglar No puedo ir y cambiarlo para abrazar o puedo usar el dulce atajo. Todo lo que tenía que hacer es hacer doble clic en el exterior de esta caja y se puede ver deshacer, arreglado a rehacer, abrazar Lo mismo para el ancho. Si desea que la horizontal se esté abrazando, simplemente haga doble clic en los bordes, se ajusta para Se necesita trabajo de manera ligeramente diferente. Oye, un poco el mismo tipo de cosas que quería abrazar porque por el momento esta cosa, una altura fija cuando sale de eso, mi marco de padres, no sabe lo que está pasando Sólo ve este cuadro de texto, bien. No ve todas estas otras cosas. Para conseguir que eso cambie a abrazar contenidos, ligeramente diferente con el texto, la operación es la misma, así que voy a golpear escape para salir se necesita modo, simplemente haga doble clic en la parte inferior. En lugar de ir a abrazar, lo que hace un poco. En realidad lo cambia de esta caja de altura fija a altura automática. Lo mismo, pero ahora para hacer doble clic, copiarlo, pegar, pegar, pegar. Ahora es receptivo. Bien, así que haga doble clic en los bordes para cambiarlo abrazar el lado aquí para las garrapatas, si quería abrazarlo , si hago doble clic en él, no hace exactamente lo que quiero porque lo hace, bien. Abrazo el contenido y el contenido no tiene descanso, así que simplemente continúa para siempre. Entonces como acabamos de hacer esta opción. Entonces, cuando estás usando una caja, cuando es un marco o un diseño de orden, haz doble clic en él, abrazará el contenido para el texto. Hace opciones similares pero diferentes. La convierte de ahí para allá a ahí. Fijo a auto altura o ancho. Simplemente haga doble clic en el borde. El que termino usando más a menudo es el siguiente atajo. Lo mismo. Haga doble clic en el borde, pero mantenga pulsada la tecla de opción. ¿Qué hace eso? Va a llenar contenedor. Entonces echemos un vistazo a esto. Esto ahora muy receptivo. Pero si hago clic en el texto aquí, mantenga pulsada mi tecla Opción en una Mac, tecla alt en una PC y haga doble clic en el borde. Mira por el momento dice arreglado, mira esto. Bam, llena, llena el contenedor. Ahora, es todo tipo de buen cambio de tamaño. Hagamos lo mismo con este pequeño bar de aquí. Un poco más difícil de hacer clic, Bien, pero si mantengo la opción doble clic, se cambió para llenar el contenedor padre. Entonces yo diría Haga doble clic en el borde para abrazar Opción o Alt, haga doble clic en el borde, cumpla Haití, ¿verdad? Eso dice en el siguiente video? 130. Cómo configurar el espaciado absoluto para que las cosas ignoren Autolayout en Figma: Hola a todos. En este video vamos a ver algo que se llama Posicionamiento Absoluto. Este cuadro de comentarios aquí, ¿ puedes ver que es un autolayout y tiene este avatar dentro de él tiene este avatar dentro Significa que puedo moverlo, viene a dar el paseo. Porque normalmente hace esto. Intentas ponerlo en autolayout y va necesito espacio Estás como No, no, solo ve por ahí y luego sale y luego vuelve a entrar. Vamos a arreglar eso con Posicionamiento Absoluto en Figma. Para empezar, tengo un círculo. Voy a abrir un plugin llamado content real. Lo uso hace apenas un minuto para poder usar el atajo Opción de Comando P, Control Alt P para reabrirlo Y voy a ir a Imagen y voy a buscar un avatar. Ve tú, no, quiero, no lo sé. Lo que termina pasando es que esto está bien. El avatar es genial, excepto que encontrarás que como otras mil maquetas tienen exactamente a esta misma mujer. Eso está bien. Entonces lo que quiero hacer es que quiero que esté ahí arriba. Sabemos que puedo sostener barra espaciadora. Entonces empiezo a arrastrar la barra espaciadora. Lo puedo poner ahí. Aunque no es parte de esta banda. Puedo hacer otro envoltorio de componentes en él y es solo un poco doloroso. Quiero que sea parte de esto, pero no quiero que esté en la carroza. Lo que vamos a hacer es que lo vamos a poner en la corriente. Lo queremos, y luego vamos a usar esta cosa mágica aquí. Se llama Posicionamiento Absoluto. Si eres Diseñador Web, conocerás el término. Si no eres un poco sentido, sino de término web de anualidad, das clic en él Absolutamente puedes posicionarlo como quieras. Bien. Voy a poner el mío aquí arriba. Puedes terminar arrastrándolo accidentalmente fuera de mi cuadro de comentarios no es lo que quiero Voy a deshacer eso. Entonces hay un par de cosas que puedo hacer. Una es que no quiero que sea recortada. Voy a presionar Shift Enter para seleccionar el padre, que es mi cuadro de comentarios. Y voy a decir no recorte los contenidos, lo que me está mostrando el borde. Haz doble clic para entrar en esto ahora para que no salga. Quién recuerda los atajos, para que no deje a ese miembro Space Buster funciona. Bien, así puedo conseguirlo aquí. Lo bueno de esto es que sigue siendo parte de ese cuadro de comentarios. Mira, cuadro de comentarios. Vienes a dar el paseo. Puedo convertir todo esto en un componente y eso quedará ahí. Si en lo positivo hecho como algunos trucos de altura cero, bien, este es el reemplazo para eso. Ahora bien, si nunca has oído hablar de un truco de altura cero para intentar hacer que cosas como esta funcionen. Sé agradecido. Bien, un par de cosas que quería hacer para atarlo es que voy a arrastrarlo por aquí sosteniendo la barra espaciadora Quiero jugar con el acolchado de esto para darle algo de espacio. Entonces voy a dar click sobre esto. Ahí vamos. Y solo voy a darle un poco de relleno extra para la parte superior para dejar espacio para mi avatar. He pasado años tratando de alinearlo. Espera, van a una sombra paralela. Pero no me gustó, de todas formas, vamos a dejarlo ahí. Eso es Posicionamiento Absoluto en Figma 131. Cómo posicionar de manera absoluta algo que sea receptivo en Figma: Hola a todos. En este video, vamos a agregar esta pequeña cosa de la gragea aquí, bien, Y la vamos a conseguir para que no solo esté fuera del flujo, sino que siga siendo parte de por Pero mira, es receptivo, viene a lo largo del viaje. Bien, vamos a saltar, bien, vamos a hacer esa cajita Lo voy a hacer en modo Velocidad. Bien, eso me llevó demasiado tiempo, pero por suerte obtuve una versión rápida de la misma. Es sólo una gragea que tiene texto en ella. He hecho el mío en orden alto para poder jugar con el acolchado que no es necesario. Lo que es necesario es que se va a quedar por aquí. Pero quiero que esté dentro del autolayout como éste. Así que voy a hacer es poner esto dentro de mi autolayout King y lo consigo aquí para que pueda ver la línea murmurando Realmente no importa porque va a ser absolutamente posición. Observe que es apenas el segundo en la lista de estos comentarios cuadro como antes, voy a decir absolutamente posicionado esta cosa. Boom. Entonces voy a moverlo por aquí, sostenga la barra espaciadora para que no salte. Las estancias dentro de mi autolayout, el cuadro de comentarios y ponlo donde quieras Voy a poner mi día. Ahora, vamos a ver qué tan receptivo es como podrías hacer, Duke, no muy receptivo en absoluto. Entonces lo que voy a hacer es que voy a usar algunos de mis atajos en la pestaña, pestaña, pestaña, pestaña, pestaña, pestaña, pestaña. Encuentra el que quiero y lo voy a configurar desde la izquierda. Bien. Por eso no es por eso que no responde. Entonces yo quería ser Santa, ¿verdad? Dependiendo de lo que quieras hacer a la cima. Muchas gracias. Ahora bien, debería, Oye, probablemente quiero que el mío sea no parece depender si quisieras estar en el centro, voy a tener el mío a la derecha. Aquí vamos. Cosas receptivos que están fuera de la caja. Mírennos. Una cosa que quiero que noten es que puedes ver que se ha movido mis votos a favor pequeña rombo que Dejaré de usar la gragea. Se acaba por la parte inferior, pesar de que ha empezado una especie de vida en la parte superior y parece que está en la parte superior Simplemente lo saca un poco de los flujos, lo han empujado hacia abajo por el avatar Y los votos a favor solían estar en la parte superior de este cuadro de comentarios, pero ahora los han empujado hacia abajo hasta el fondo aquí No sé por qué es interesante que vayas, bien, es como hacer Posicionamiento Absoluto más un poco de capacidad de respuesta Bien, te veré el siguiente video. 132. Cómo adaptar las cosas a la parte inferior derecha de la maquetación de un automóvil en Figma: Hola a todos. Vamos a poner esta imagen en la parte inferior derecha. No tiene que ser una imagen puede ser cualquier cosa. Vamos a usar el truco de Posicionamiento Absoluto. Además, veremos un poco del apilamiento que vimos antes, además de un poco de revisión de enmascaramiento . Bien, vamos a saltar Bien, vamos a hacer que funcione. Así que tengo esto aquí. Es solo una imagen recortada de una imagen recortada. Voy a quererlo aquí, ¿de acuerdo? Pero sólo voy a agregarlo al flujo donde quiera. Voy a ir por tu camino. Absolutamente. Posicionado sale del flujo, termina en la parte inferior de mi autolayout y voy a ponerlo en la Y lo último que tengo que hacer es que el momento no responde. Bien, así que solo hay que hacer clic en esta línea es el gran nombre del grupo mezquita Y voy a decir Restricciones. Voy a asegurarme de que esté a la derecha. Y voy a decir que se adhieren al fondo, por favor. Vamos. Mi chico es súper receptivo. Ellos consiguieron Cooley es ignora el acolchado se pega a la parte inferior derecha ¿Qué es esta cosa? No lo sé. Algo que diseñé en Adobe firefly, que es el creador de imágenes AI de Adobe He escrito en el tema particular de la flor Cyberpunk. En fin, una última cosa que quiero mostrarles es que eso está por encima de esto, lo que podría ser problemático, pero deberíamos poder hacer clic en el cuadro de comentarios de los padres. Y es un diseño automático. Recuerda antes de usarlo en contextos diferentes, pero entramos en la configuración avanzada. Y había lienzo apilado último en la parte superior porque estos tipos están en la parte inferior. Mi grupo de máscaras es el último y la lista que puedo decir en realidad puso el primero en la parte superior. El tuyo podría estar incumpliendo con el otro, ese ego. Puedes alternar entre los dos. ¿Bien? Se te permite ir. Ahora, voy a rehacer esta mezquita dentro de una máscara solo porque es bueno recapitular Un poco confuso. Sí, lo haremos de todas formas. Así que voy a golpear la herramienta 0 mantener desplazamiento dibujar círculo. Voy a ir a Comando op, comando shift K para traer una imagen que sea la tecla Control Shift en una PC, voy a traer esta Firefly uno, y hago clic ahí Bien, entonces lo que quiero hacer es que voy a agarrar un marco, dibujarlo por encima. Voy a darle lo mismo para el radio de píxeles que he estado usando para. Entonces voy a conseguirlo como lo quiero. Puedo ajustar eso después. Es como las dos. Voy a hacer click en la máscara. No va a funcionar porque esto tiene que estar al frente. Eso tiene que estar ahí y luego enmascarar, siempre equivocarse. Bien. Y así es como conseguí este tipo de como recortado mencionando la esquina ahí para que pudiera usar la sombra que está pasando Todavía puedo, obviamente, entrar dentro de ella. Pulsa enter tab a lo largo los diferentes niños en su la máscara y la flor. Y puedes moverte lo que sea. Probablemente me trasladarán la flor aquí. Bien, haz mis ajustes. Yo en realidad, probablemente se lo haré a éste. Haz doble clic para entrar en él en la pestaña, haz doble clic para entrar en la pestaña, pestaña entre los dos hijos. Bien. Y voy a ajustar esta. Vete tú. Así es como lo hice yo. Eso no valió la pena andar por ahí para Dan. Sí, probablemente tengas razón. Una última cosa antes de irme es básicamente que he terminado este video cuando estaba como, Oh, quiero que sea más grande. Cómo hacemos eso todo con el atajo, 0 lavar, recordar a la gente con el atajo. ¿Alguien recuerda cómo me meto? Porque en el momento en que está usando la opción de relleno, va si hago clic en mi elipse, está usando la opción de relleno, bien, dentro de esa elipse, cómo entro ahí y obtengo todos los atajos para poder escalarlo y moverlo y cambiarlo de tamaño Y es correcto, mantienes pulsada la tecla Opción. Entonces si hago click off, obviamente no puedo, OK, canopy C es un poco de click habe, un poco doble clic un par de veces hasta que finalmente empiece a ver todas estas cosas Recuerda, y puedo cambiarlo para recortar y redimensionarlo, pero solo arrastrando este bit medio, quieres que te guste romperlo del borde por eso, déjame jugar con el borde del recorte Esas cosas azules son déjame jugar con un círculo, pero eso no es lo que quiero. Quiero arrastrarlo un poco para que pueda obtener los bordes de este cambio de moldeo para que no se vuelva loco Y eso es lo que quiero conseguir un cultivo más interesante y cortar el ego escapar, escapar, escapar es EBITDA Sí, lo que es genial. Bien, ahí tienes. Te veré el siguiente video. 133. Cómo cambiar el tamaño de un cuadro de forma automática en Diseño automático para que coincida con el texto de Figma: Hola a todos. Mira esta cajita de colores al costado aquí. Seguro que tiene nombre. No sé qué es. Malo cuando eliminamos texto o editText. ¿Puedes ver que se expande, responde? Es una buena mezcla de autolayout, Posicionamiento Absoluto Bien, vamos a saltar a hacerlo, bien para empezar, voy a esconder algunas cosas porque lanzando todo a este tutorial y no terminamos con un poco de lío Entonces seleccioné mi avatar Comando Shift H para ocultarlo. Control Shift H en una pieza en la misma con esto. Y hagamos lo de los pequeños textos expandiendo. Entonces, antes que nada, necesito marco. Bien, voy a arrastrarlo fuera de tamaño. Puedo ajustar esto en un enfermo. Voy a usar un color 500. Voy a usar mi color 3D. Dale un nombre. Mal llamado Dan. Sé que hay una palabra técnica para esta cosa. No se me ocurre y si soy honesto, dudo que la palabra haya una palabra para ello. Antes me gustaría. primero entró arrastrándolo adentro, sosteniendo la barra espaciadora, un poco ponerla Voy a conseguir que el tamaño correcto primero entró arrastrándolo adentro, sosteniendo la barra espaciadora, un poco ponerla alineada. Supongo que bastante bien. En realidad. Hoy en día. Redimensiónela aquí, consíguela como quieras y luego arrástrala a tu autolayout a autolayout, igual que antes Vamos a sentar el Posicionamiento Absoluto para rutear aquí. Y lo que queremos hacer es que se estire, bien, así que voy a conseguir que se rompa al borde ahí. Está demasiado cerca del texto o lo arregla en un poco. Pero por qué no queremos hacer es que queremos decir Restricciones a la orilla izquierda, pero quiero la parte superior y la inferior. Lo que eso significa es que va a mirar el tamaño general y ajustar. Entonces, si ajustamos el tamaño general cambiando este cuadro de texto que se establece para abrazar contenido, o al menos el equivalente para un cuadro de texto que es altura automática Puedes ver que cambia una línea, muchas líneas. Voy a volver a lo que tenía. Ahora bien, el único problema con esto es que no es particularmente robusto en términos de responsabilidad. Responsabilidad, capacidad de respuesta, elástico Las cosas de texto no tienen responsabilidad en el mundo ¿Bien? Y lo que queremos hacer es hacerlo un poco más robusto. En realidad, va a hacer dos cosas. En realidad este siguiente bit voy a deshacer y volvemos a las cosas que quiero hacer. Necesito empujar esto y no puedo ir al cuadro de texto y decir que vas porque todo queda alineado dentro de, dentro de este autolayout Así puedo ir Shift Enter para seleccionar el padre. Y puedo decir a la derecha, Está funcionando un poco, pero está moviendo todo lo demás No es realmente lo que quiero. Voy a deshacerlo de esa manera. Lo que vamos a hacer es un poco de inicio para los autolayouts Tengo padre de autolayout, aunque este cuadro de texto. Sabemos que si le agregué autolayout se desplaza un bien. Se pone acolchado alrededor del exterior. Y lo que voy a hacer es ponerla a cero. Terrier cruza el cero y muéstralos todos para decir a la izquierda, vamos a tener un poco, un Lou, tengo algo de relleno, así que eso es bastante genial. Y la otra cosa es que eso sigue siendo un problema estirarse por lo que está haciendo es que es solo un truco. Estamos diciendo, Quédate tan lejos de la cima y esta lejos de la parte inferior. Y cuando el cuadro de texto se expande, lo hace esto, pero no hay conexión directa entre ambos. Este cuadro de texto hace que el padre general sea más grande, esto se hace más grande y funciona un poco hasta que haces esto Sin embargo, lo que podemos hacer es que te podemos decir, podemos meterte dentro de esto. Entonces vamos, ¿te gustaría dentro de ese autolayout porque ya es una Estoy dentro de este marco. Vamos a darle un poco de nombre-llamarlo . Viniendo a Xbox. Dentro de ella están mis bloques de tics más mi cosa elástica. Y porque está posicionada absoluta y arrastra hacia afuera, no la quiero demasiado lejos. No queremos alargarlo. Así que recuerda mantener la barra espaciadora, volvamos a entrar ahí. Sostenga la barra espaciadora, sostenga la barra espaciadora mientras la arrastra. Bien, y ahora es usar mi tecla de flecha. Todavía está dentro de mi libro de texto, que es un diseño automático. Vamos a darle click a este tipo. Todavía está puesto arriba y abajo, pero ahora está haciendo referencia a esta caja, cuando la haga más grande, ¿ves que no la destroza? Pero todavía tiene esa buena funcionalidad que se hace cada vez más pequeña. Bien, así es como hacer una elástica, dame el nombre Si lo sabes, si estás hablando de grafeno, estás como, Oh, eso se llama algo u otro Alguien que haga la cotización pull y sangría o algo así El nombre para ello, házmelo saber en los comentarios. Pero por ahora, creo que eso es todo para Posicionamiento Absoluto. Hicimos algunas versiones diferentes de la misma porque es bastante potente en súper útil para súper cargar tu autolayout Después vamos todos los adjetivos. Oh, una última cosa antes de ir a nuestras pruebas de atajo, pop quiz, redimensiono esto así que ahora es nuestro ancho fijo Cuál es el atajo para conseguir que salte y llene el contenedor. Lo recuerdas, haces las dos, haces doble clic. Me doy cuenta que no es el que quieres. Y luego vas Opción en una Mac, alt en una PC y haces doble clic en ella y llena el contenedor. Aquí vamos, pop quiz encima en que mi amigo es el final del video. Te veré en la siguiente. 134. Atajos de relleno y tamaño de la ayuda automática: Hola a todos. En este video vamos a ver algunos atajos para autolayouts, solo un par de prácticos Uno es cambiar el tamaño, cambiar el tamaño de un marco aquí. Normalmente podemos simplemente agarrar la esquina, pero si mantenemos pulsada la tecla Opción en una tecla Mac o Alt en una PC y lo hacemos, se arrastra desde el centro y redimensiona todo desde el centro Ya sabemos que uno un poco. Puedes usar ese mismo atajo para el relleno. Entonces puedo arrastrar ese relleno en esa diapositiva, pero puedo hacerlas todas ahí a las 19 ahora, lo cual no es un buen número. Bien, entonces voy a mantener pulsada mi tecla Opción en una Mac, tecla alt en una PC y arrastrar uno de estos encabezados. Se ve que sí levanta y a la derecha, lo cual es práctico, puedo conseguir que me guste 16, ahí es un poco donde lo quiero Pero si mantengo pulsadas Opción y Mayús, vamos a Alt y Shift en una PC, las hace todas al mismo tiempo. Mira eso. Bonito. O yo quería tener 16 años. Ahí vamos. Una cosa que noté ahí es que fuera del cielo probablemente quiera pegarse al fondo y redimensionarlo el momento en que está empacado ahí. Entonces, por defecto, todo dentro de mi diseño automático está configurado en un espacio empacado entre. Se puede ver un poco esa pequeña miniatura hay va a extenderla un poco Si voy aquí abajo, empacado significa que va a tratar de apretarlo todo en la parte superior o adentro a la izquierda, dependiendo de lo que esté sentado aquí, tienes horizontal o vertical Si lo cambias a espaciado entre, solo intenta estirarlo para llenar el espacio proporcionado va a Auto. Solo hay obras para una caja de altura fija. Porque en cuanto voy, quién recuerda cómo consigo que esto salte y abrace contenidos Recuerdas, hacemos doble clic en el borde. Cambia para escuchar a abrazar, lo que también lo vuelve a cambiar a Pacto para decir que no. Si le das un ancho fijo, pero si le das una altura fija, entonces puedes cambiarlo al espacio entre mucha gente simplemente hará esto. Simplemente van a escribir en orden. No hay bono ahí. Bien, entonces esos son los atajos. Además tenemos un poco de emojis pegados al fondo. Bien, te veré el siguiente video. 135. Cómo crear un button de altura mínima en Figma: Hola a todos. En este video vamos a ver las tallas mínimas y máximas en Figma. Así que tengo que botón aquí, es un diseño automático. Si lo hago más pequeño, eventualmente no puede llegar a ser más pequeño, va al ancho mínimo. Y de igual manera, puedo escribir muchas cosas y eventualmente no se hará más grande. Se llama Ancho mínimo y máximo. Genial para cosas como botones, pero puedes usarlo en cualquier cosa siempre y cuando haya un diseño automático. Déjame mostrarte cómo hacerlo. Hola a todos. Este es un video actualizado porque acaban de lanzar un mejor min-max Había un hack para hacerlo antes, así que las cosas podrían verse un poco diferentes. Entonces lo que vamos a hacer es como Normal, un botón de diseño automático puede llegar a ser muy pequeño o muy grande. Entonces queremos sumar ese mínimo y máximo para hacerlo. No lo hagas al cuadro de texto debido a que el padre entró, pero puedes tener barra diagonal Entonces, ¿entiendes que el padre le dio el autolayout aquí y le importa un diseño automático Sí. Bien. Y el nuevo presupuesto está por aquí, debajo del ancho, ya está este Dropdown, ¿de acuerdo? Y puedes agregar Min y max. Eso es. Solo asegúrate de que sea al exterior y no al cuadro de texto y al interior Bien, así que agreguemos un mínimo. ¿Cuál debería ser el mínimo B, depende de usted. Eso es bastante común que 44 píxeles tengan un tamaño mínimo de botón. Y 32 para un icono. Al igual que la gente necesita poder tocarlo, especialmente en un teléfono Genial, echemos un vistazo al máximo. Así que vamos a ir Tapas Dropdown ese. Volvamos al ancho y digamos agregar un ancho máximo. ¿Qué tan grande? Solo estoy uso múltiplos de ocho. No tengo idea de lo que es un buen tamaño para un botón gigante, pero 160 parece casi correcto. Ahora. Puedo empezar a escribir y seguirá adelante y eventualmente se romperá. Bien, entonces tenemos un tamaño máximo, lo cual es increíble. Bien, entremos nuestro texto. Y lo que quiero hacer es hacerte consciente de que voy a agarrar un marco y voy a sacar algo que sea un poco del mismo tamaño que esto Ahí vamos. Y lo que notarás es que cuando hacen mínimo y máximo sobre los anchos, incluyen el relleno. Bien. Se puede ver ahí que son 44, como mi mínimo estaba ahí, pero no incluye la sombra paralela. La sombra caída aquí es que acabo de hacer algo elegante. Y bueno, es solo de dos por dos píxeles con más noble, de nuevo, te da esa sombra un poco realmente cuboide, pero no se incluye La otra cosa a tener en cuenta es que le está dando un color de relleno. No estoy seguro de por qué color Garfield, pero esto de aquí, un marco no puede tener mínimo y máximo por el momento Tampoco puede un cuadro de texto antiguo plano, ni un rectángulo. Tiene que ser un diseño automático, que es esta opción aquí. Tal vez puedas ser un diseño automático. Ahora, puedo tener el desplegable para min-max. Otra cosa que puedes hacer porque es el curso avanzado, es que puedes arrastrarlo a una talla. Ya tienes botones existentes en tu diseño. Ya hay el tamaño adecuado. Lo que puedes hacer es subir hasta aquí, asegurarte de que sea un diseño automático. Entonces bajo ancho, puedes decir, voy a agregar un ancho mínimo, trayendo un desplegable de nuevo y decir ponlo al ancho actual, lo que sea que tengas. Bien, entonces eso usará las dimensiones existentes para el ancho. Y puedes hacer lo mismo para max. Y tienes uno no ancho, pero obviamente la altura funciona exactamente de la misma manera. Y si estás como, cuáles son esos diamantes que habían estado en el curso y Dan no los ha mencionado. El tipo de nuevo. Echemos un vistazo a un fotograma. Voy a cubrir estos más adelante en el curso llamado variables. Bien, es algo nuevo y hay toda una sección sobre eso más adelante en el curso. Entonces vamos a llegar a los pequeños hexágonos no son diamantes. Vas, Eso es tamaño mínimo y máximo en Figma, la nueva versión, una pequeña nota al margen es porque cuanto tiempo duró, que carajo, el curso sale en unas 10 h a partir de ahora porque ni siquiera se lanza y las nuevas actualizaciones me han hecho volver y volver a grabar el Buen trabajo. Figma, ustedes esperen a que grabe cosas y luego vayan a cambiarlas. En fin, ya está actualizado. Disfrutar. Te voy a pasar a Dan normal, quien conoces y amas. Soy futuro Dan escogió Dan irregular por 136. Cómo envolver objetos de diseño automático en Figma: Hola a todos. En este video vamos a ver cómo envolver autolayouts Bien, así que tengo estas pequeñas pastillas aquí, allá adentro y el autolayout que parecen representantes en el pasaje se ha ido recto hacia arriba, recto hacia abajo Ahora ya podemos envolver. Emocionante. Déjame mostrarte cómo hacerlo. Bien, así que el envoltorio que acabo de hacer y el autodiseño ahí tiene algunas garrapatas que tipo de se expande y se contrae Quiero ponerlos en un pequeño grupo agradable ese envoltorio, bien, así que voy a seleccionarlos a todos, todos mis pequeños autolayouts, ponerlos en su propio autodiseño, los froté a todos el día del turno froté Y la nueva versión de Figma en realidad la envuelve. O por defecto, lo que ha pasado en el pasado es esto y esto. Bien, así que vamos a hacerlo a propósito. Vamos a decir, vamos a envolverlos a cualquiera que sea el tamaño y lo chulo de ello. Entonces ese es el icono de envoltura, es que cuando lo arrastre, ¿ pueden ver que se expandirá y se contraerá dependiendo de lo que encaje ahí dentro Estas podrían ser imágenes. He hecho estas pequeñas pastillas con hashtags en ellas. Depende totalmente, tú. Podría haber incumplido como pegado en la parte inferior por Haz doble clic en la parte inferior para abrazarla, vas. Si vas a hacer algo como estos hashtags, que en el último movimiento de video aprendimos minmax que podría ser útil Así que voy a golpear Enter en mi teclado para sumergirme en mi diseño automático y seleccionarlos todos en un No te enseñé cómo hacer esto en el último es que puedo decir que todos ellos tienen un valor máximo de, digamos en eso, no va demasiado loco y sale mal Esta horda de hashtag que hemos diseñado es o se divide en dos líneas solo para restringir el ancho máximo de esas. Ahí vas. Eso es envolver en diseños de orden. Se trata de una nueva actualización de videos. Entonces ya te habrás topado con esto, pero el ego envolvió a propósito Bien, te veré en el siguiente video. 137. Qué significa el accidente cerebrovascular incluido excluido en la maquetación automática de Figma: Hola a todos, en la configuración avanzada de autolayout, está esta cosa Se incluye en Layout, excluido en ruidoso. ¿Qué significa? Déjame mostrarte lo que déjame mostrarte a lo que me refiero. Tengo este autolayout hecho el fondo aquí. Bien. Se compone de dos partes, este cuadro de texto, Bien, si hago doble clic en él, verá este cuadro de texto Es un poco difícil de ver, morado y morado, pero ¿puedes ver ese botón justo arriba contra este módulo que he hecho para el madrugador Bien, no hay espacio entre ellos. Bien, y agreguemos un trazo a este módulo madrugador. Voy a decir que tienes un derrame cerebral ahí y vamos a hacerlo muy grande. Bien. Pintémoslo por fuera. ¿Ves que no le hizo nada a este texto? El autolayout simplemente excluye el trazo, solo lo ignora. Ahora, normalmente, eso está bien con un gran trazo como este. De hecho, representa bastante distancia física y es posible que desee que el espaciamiento sea empujado hacia los demás. Autodiseño para incluir realmente el trazo cuando lo está haciendo es Layout el trazo cuando lo está haciendo es Para hacerlo, vamos a seleccionar el turno padre en, bien, y vamos a subir al autolayout Vamos a la Configuración Avanzada, y eso es lo que es este. Trazos incluidos o excluidos. Puedes ver cuando está incluido, lo cambia bastante, podría ser exactamente lo que necesitas. Ahora bien, este es un gran ejemplo de un trazo de 10 puntos. Lo que podría terminar pasando es digamos que diseñas algo que solo tiene un trazo de un punto, ¿de acuerdo? Y lo has alineado todo y lo está excluyendo. Bien. Entonces es ignorar el golpe que le entregaste a tu ingeniero Vuelven y dicen, lo he alineado exactamente como lo has diseñado en Figma, te gusta, no, no lo hace, no se alinea perfecto Lo que sucede en el desarrollo web o desarrollo de aplicaciones que la ingeniera desarrolladora, tiene que incluir realmente el trazo. No hay manera de excluir. Se. Podría ser solo un poco diferente. Entonces puedes imitar eso. Y en Figma diciendo incluir trazo Para algunos de ustedes eso va a ser súper importante y para mucha gente, no lo será. Pero esta es la clase avanzada. Eso es lo que hace esa cosa. Pero ahora ya sabes, bien, entremos en el siguiente video. 138. 137 Espaciado personalizado: Hola a todos, ¿ Tienes un diseño automático, pero necesitas un espaciado personalizado entre un par de ellos Descargo de responsabilidad en la grabación de este video, no hay forma oficial, Hay hacks. Hay tres de ellos. Todo tipo de trabajo. Empecemos por lo más fácil. Bien, hagámoslo primero con texto. Si tienes un poco de texto va a convertirlo en un componente, voy a duplicarlo. Comando o control DDD. Vamos a tener cinco. Voy a cambiar el texto. Tú esperas ahí. Bien. Un montón de texto. Hagámoslo un cambio de salida automática. Ahora podemos ajustar el espaciado, pero el momento no importa lo que mantengas pulsado. No se puede hacer relleno separado en este momento. Es una de esas otras características que siento que tanta gente está haciendo hacks para eso, saldrá pronto. Bien, hackear uno es que tengo esta instancia aquí. Quiero espacio entre estos dos, ¿verdad? ¿En realidad está configurado a una altura fija? Así que en realidad puedo decir que mis boletos son más grandes y puedes tener un espacio ahí dentro. Ahí tienes, hackea uno. Por alguna razón mi auto out está configurado a una altura fija. Recuerda cómo hacer doble clic en él en el borde, bien, para que se abrace con facilidad. Entonces eso es hackear número uno. Voy a deshacer eso, Eso funciona la mayor parte del tiempo. Otro y muy común es usar un marco invisible. Bien, entonces K puso a la altura que quieras, ya es suficiente para mí. Sea cual sea la altura que sea, 88. Perfecto. Accidentalmente tropezó con una cuadrícula de píxeles de ocho puntos. Bien. Y no tiene relleno, ni trazo, pero aun así puedo arrastrarlo y ponerlo ahí y mantiene el espacio yendo de nuevo. Voy a tener que hacer doble clic en él para ir a Abrazo. Y entonces solo puedes usar esto, bien, para hacer tu espaciado. Recuerda, Shift es una muy buena vista de esquema para que luego puedas verla un poco mejor. Aún necesitas dar cuenta de esto para el relleno, ¿de acuerdo? Entonces si necesitas que sea 88, tienes un menos, cualquiera que sea tu espacio entre aquí es un menos 2201, lo cual no es genial Digamos que son 16. 16 en la parte inferior, 16 en la parte superior, más lo que hay en el medio. Eso me va a dar mi espaciado. ¿Algo malo en eso? No, en realidad no. Puedes atarlo con un hack desde antes. Puedes resbalar sobre este marco invisible K, mantener pulsada la tecla de comando o control Recuerda arriba y abajo hace la altura arriba y abajo y solo puedes ponerla en marcha. Si mantienes turno lo hará en pasos de ocho puntos a mano hackear el número tres. Lo que podemos hacer es decir que ustedes tres están en un turno automático, también están en un turno de salida automática A. ¿Bien? Entonces tengo el marco padre, pero también tengo estas dos cosas por dentro. Y miramos esto antes. Si voy al marco padre y lo hago más grande, realmente no pasa nada. ¿Por qué? Porque ahí están empacados. Recuerda, hay una opción para salidas de auto bajo la configuración avanzada de salida automática. Y en lugar de empacados, podemos ir al espacio entre. Bien, y vamos a tratar de distribuirlos, a todos. ¿Sólo un recordatorio de que se han ido a mover que recuerdan de antes? Bien. Entonces solía estar debajo de aquí. ¿Bien? Llamado espacio entre. Ahora es justo si pasas el cursor por encima del espaciado vertical. Bien, La brecha entre este de aquí, hay un pequeño desplegable y ahora solo se llama auto. Bien, ahí tienes, lleva a cabo. Y estos tipos están atrapados dentro de sus propios piojos de auto, ¿de acuerdo? Y pone en esta brecha gigante en el medio. Este es útil porque intentará forzarse a bajar por el fondo. Entonces, dependiendo de lo que estés haciendo, esto podría funcionar bien si necesitas que esto esté en la parte inferior. Pero si quieres que tenga un tamaño consistente, posible que quieras mirar el rectángulo invisible o simplemente arrastrar el tamaño de ese cuadro más grande y estar atento a las actualizaciones de Figma. Actualizaré este video si encuentro una nueva forma de que Figma lo haga, pero por ahora, elige uno de los tres hacks Bien, eso es todo. Espaciado personalizado en o diseños dentro de Figma. Hecho. Veré en el siguiente video. 139. Cómo organizar componentes en grupos en Figma: Hola a todos. En este video vamos a ver cómo organizar nuestros Componentes en grupos que ya hemos tocado un poco , algo así como hacerlo más claro Vamos a estar usando esta Biblioteca de Diseño externa, bien, otro documento, y vamos a asegurarnos de que todo esté muy bien agrupado en diferentes secciones. Hay dos formas de hacerlo. Déjame mostrarte la vieja manera perfectamente buena y la nueva manera perfectamente buena. Bien, vamos a saltar, bien, empecemos a ordenar nuestra domesticación de componentes En el momento en que tenemos una mezcla de la convención de nomenclatura de barra diagonal y comenzamos a usar Sections Plus fue comenzar a usar nuestros otros documentos para mantener nuestros estilos principales Entonces déjame mostrarte las dos raíces y podrás decidir cuál quieres hacer es ordenar nuestros emojis, ¿de acuerdo? Estos son mis componentes principales aquí. Voy a cortarlas, bien, a lo mejor hay que cortar, vamos a moverlas a otro documento de estilos principales. vamos a pegar para asegurarnos de que la conexión funcione. Vamos a mantener presionada la Opción tres y una Mac, una alternativa tres y una PC. Y vamos a publicar esos cuatro cambios. Estos emojis se han movido. Esto asegura que este documento original sea correcto, y luego el nombre obtenga dos opciones Podemos seleccionar a todos estos tipos. Vamos a, en lugar de llamar a emoji smile, que vino de los nombres de archivo reales en sí, podemos renombrarlo con muchos de ellos seleccionados. Podemos sostener Comando o Control R. Lo que vamos a hacer es que vamos a decir que los emoji son reemplazados por emojis slash. Y usaremos espacios. No tienes que cambiarle el nombre. Esto, publícalo. Así que todo sabe lo que está pasando Y significa ahora atrás en este documento original, cuando estoy manteniendo presionado mi turno, te creo a mis componentes. Echemos un vistazo a ese documento que hemos compartido con este documento. Bien, estos son nuestros estilos principales. Se puede ver que el emoji está en su bonita carpeta pequeña. Ahí están todos para cortar es increíble. Lo que se está volviendo más popular ahora es en realidad solo usar una sección que hicimos secciones antes. Recuerda el escondite debajo de aquí, Shift S, dibuja una sección. Y voy a nombrar este comando o control van a llamar a este emoji. Lo que puedo hacer con estos chicos es que puedo cambiarles el nombre y decir realmente dónde dice emoji, espacio emoji, espacio de barra hacia adelante Voy a reemplazar por nada y solo voy a tener Rename. Va a sacar todo ese emoji y luego el nombre puede venir de esta sección Se publicaron esos. Bien, vuelve al original aquí y veamos el turno de biblioteca. Me encanta un buen nuestros estilos principales y puedes ver aquí, pasa lo mismo, bien, tengo esta carpeta emoji. Se ve exactamente igual. Bien. Y están ahí dentro, ¿por qué esto es mejor o peor? Es marginalmente mejor. Sólo significa que si digo que tengo una sección de botones, no tengo que nombrar todo. Yo sólo puedo ir a la sección Shift S. A éste se le va a llamar botón. Este botón y simplemente tíralo. No tengo que cambiarle el nombre. Tengo algunos íconos aquí abajo. Tienen esa convención de nomenclatura, barra de iconos, la voy a quitar Comando o Control en una PC Voy a decir icono barra reemplazada por nada. Shift S para una sección. Comandemos a R, jale este ícono, y luego solo agarra a estos tipos, tíralos. Es mucho más fácil moverlos de uno a otro. Porque realmente esa cosa que probablemente no hay botón podría terminar teniendo una sección de etiquetas y solo puedo ir a arrastrar esta sección emoji, bien, y la renombra y la vuelve a ordenar en todos los documentos de conexión que están haciendo referencia a este estilo, este Ahí tienes, el trono adentro. Y hace doble clic en el borde para que encajen todos, poniéndolo en una firma. Bien, pero ahora esa parte de esta subcategoría de botones, puedes ir más allá con una convención de nombre cortando Di que tienes estos, pero tienes dos versiones. Hay uno que es sólido y uno que ha delineado. Estas son versiones esbozadas que uno es un poco de ambos. Pero digamos que voy al Comando R Ahora, y voy a decir que este va a reemplazar con esquema slash y luego nombre actual Bien, entonces tengo algo de profundidad aquí, pero el padre es de íconos. Y puedo entrar en la maleza con esta convención de nomenclatura de barra aquí dentro. Publiquemos. Voy a revisar todos los cambios. Básicamente simplemente se movieron, vamos a aceptarlos a todos. Y ahora cambio tengo un vistazo, sus estilos de codominio e iconos aquí Todavía tengo este nivel extra para ir a Outline. ¿Bien? Y entonces aquí podría tener una versión sólida. Te lo mostré. Esto es porque principalmente en este momento, la gente solo está usando la convención de nomenclatura y luego solo usa marcos para este envoltorio externo aquí, debido a la introducción de Secciones, nos permite agrupar las cosas con bastante facilidad y moverlas de sección en lugar de tener que renombrar y agrupar renombrar cosas hasta usted cómo desea ordenar sus componentes. Verás tanto alrededor como ocasionalmente verás esto donde hay una barra de icono, nombre actual Bien, entonces ahora tienen icono slash, contorno slash lupa Pero porque están en esta otra cosa llamada, llamémoslo Icono. Ponte un poco confuso, no confuso, pero por aquí ahora publicaremos. Revisión. Actualicemos todo. Ahora bien, si entro en mis componentes y voy a mis estilos principales, puedes ver que tengo Icon Plus icon plus outline. Realmente no importa. Pero eso es lo que sucederá si estás usando una mezcla del naming completo de las barra diagonal y las secciones en la parte superior Voy a quitarlos. Deshacer y publicar. Ahora voy a tener que trabajar a través mi documento y revisar los activos y encontrar todo lo que se usa localmente, encontrar un hogar para ello en mi componente principal, ponerlos en la sección correcta. O si no estás usando un documento separado, tenlo en una página separada y simplemente muévalos todos a esa otra página, a una sección con algunos nombres de barra Bien, eso es. Veré en el siguiente video. 140. Cómo crear componentes de espacio de espacio para tragamonedas en Figma: Hola a todos. En este video vamos a hacer un componente de slot. ¿Qué es lo que hace? Básicamente, tenemos algo que vamos a reutilizar una y otra vez. Al igual que el exterior de este modal está a través de estas esquinas redondeadas, hay una sombra paralela. En lugar de tener dos o 100 Modales Popup diferentes o compartir muchos de los mismos Y cuando hay que ajustar, digamos la cruz, pero cuando hay que ajustar parte de ella y luego cuando quieres ajustar parte de ella, tienes que ir y ajustarlas todas. Lo que podemos hacer es crear algo que tenga una ranura de marcador de posición en el medio, esta de aquí, entonces podemos asignar algunos swaps de instancia preferidos, bien, para que la gente pueda pasar y simplemente cambiar el centro de la misma Dejará de que la gente vaya y piense, bien, necesito cambiar esto bastante Así que voy a separarlo y crear otra instancia haciéndose perder todo. Entonces un build one desde cero, nos vamos a perder un poco juntos. Lo arreglaremos otra vez. Entonces tendremos este dulce componente slot donde solo cambia la parte central , no la envoltura. Bien, vamos a saltar y hacerlo. Bien, así que tengo dos modales separados. He hecho una sección modal para estos chicos. ¿Bien? Y lo que voy a hacer es que quiero configurarlo primero con solo algo aquí, y luego lo cambiaré al marcador de posición después porque quiero algo de contenido real y podría estar usando para obtener un poco el relleno y esas cosas Entonces, para que esto funcione, el padre necesita ser un cambio de orden fuerte lo hará un componente porque eso es para lo que estamos usando esto. Ahora es en modales. Voy a llamar a éste Popup. Este punto de mira Voy a decir que estás absolutamente posicionado donde te voy a arrastrar para escuchar Voy a asegurarme de que estás en la parte superior derecha. Ahora el acolchado, voy a aumentar todo el camino. ¿Quién recuerda el atajo? ¿Coloca el cursor sobre él allí y mantengas presionada la tecla Opción en una Mac, tecla alt en una PC, asegúrate de estar alejada al frente para que puedas mantener presionada la línea Shift también Y va a hacer todos los lados. Voy a ir máscara puede ser bastante grande. Voy a subir a 40, recuerda múltiplos de ocho. Bien, entonces lo que voy a hacer ahora es que voy a sacar estas cosas y sacarlas. Bien, voy a sacarlo aquí abajo. Y dentro de aquí, voy a poner un componente slot. El componente de ranura debe ser su propio componente principal. Sabemos que los componentes principales no pueden vivir en otros componentes principales. Así que voy a decir frame, voy a Control o Comando R, y voy a llamar a este en mi ranura. Ahora puedes llamarlo como quieras. No hay reglas oficiales para ello. Pero la mayoría de la gente sí, es que le van a dar un derrame cerebral. Ellos harán que el trazo sea rosado. Y irán a la Configuración Avanzada y la cambiarán de sólido a tablero. No tenías que hacer eso, pero todo el mundo parece estar haciendo. ¿Necesita llenar? Se puede hacer. ¿Qué tamaño debería ser? Realmente no importa porque va a cambiarse a algo para mantener nuestro modal abierto cuando lo esté abrazando Entonces esto tiene que ser un componente. Entonces estoy usando mi atajo Opción de comando K Control tecla Alt en una PC. Solo un recordatorio, y voy a arrastrar una instancia de esto, bien, por aquí para entrar en esto y solo asegurarme que este modal emergente esté abrazando en ambos sentidos Ahora, vamos a hacer los pedacitos que van dentro de él. No necesitan el Chrome externo ni en este modal, bien, estos chicos de aquí solo necesitan ser componentes. Vamos a usar el intercambio de instancias. Entonces necesitamos hacer de esto un Comando Componente R. Está en la sección modal. Entonces esto va a ser el registro por correo electrónico. Este de aquí. No necesito el modal. Bien. Eso solo estaba ahí para diseño porque quería cambiar dentro de ahí. A éste se le llama eliminar. Sí, no lo estamos. Puedes venir modales. Vamos a ser lo suficientemente grandes. Tú también vas a entrar aquí. Asegúrate de que sea un componente y la ranura, probablemente lo mantendremos en otro lugar porque no va a ser, puedes usar esto en cualquier cosa que lo usemos para modal, puedes usar cualquier elemento K. ¿Esto va a funcionar? Vamos a darle una prueba. En realidad conocemos el componente principal aquí necesitamos agregar la propiedad, recordemos Instancias Swap antes en el curso. Entonces este componente de aquí, voy a decir bajo propiedades, como ustedes saben, lo voy a hacer por esta ranura. Así que selecciona la ranura dentro de ella. Yo solo diría ranura. Quiero que seas capaz de ser Instancias Swap. ¿Qué quiero? Quiero que puedas intercambiar con los valores preferidos de no todo, solo mi opción de modales dulces Y solo quiero borrar e inscribirme. Cierra eso abajo. Ahora, ¿va a funcionar? Cambiemos a la opción de mi biblioteca de activos para echar un vistazo a nuestros componentes donde obtuvimos modales. Vamos a decir, quiero este pop-up en este documento aquí, entrar en él, seleccionar en la ranura y decir en realidad, me gustaría cambiarlo de eso. Pausar el video, estearato por un rato, darme cuenta de mis valores preferidos en, en su, me di cuenta de lo que he hecho incluido en el curso porque probablemente te va a pasar. Es que fui e hice todas esas cosas enteras. Intercambios de instancias. E hice una lista y golpeé cruz en lugar de crear Propiedad. No hagas eso. Bien, entonces vamos a arreglarlo. Entonces voy a decir que tú y tú creas Propiedad no cruz. Ahora debería poder hacer clic en mi modal padre, ¿de acuerdo? Y están dentro de ella como una Instancia, Intercambia K con algunos valores preferidos, bien, y puedo cambiar esto ahora a lo que todos quiero excepto que uno está roto. Gran trabajo. Entonces te das la idea. Dejemos que los ignoren eso. Bien, en realidad cambia esto a la otra. Ese es el objetivo es que ahora tenga este control total del modal emergente y los elementos que son genéricos para muchas cosas diferentes. Si vuelvo y digo en realidad necesito ajustar el relleno. Bien. Se lo puedo hacer a éste. Bien. Y todos se ajustan. No tengo que ir a ajustar el equipo. Diferentes modales que tengo para popups. Puedes tener más de una ranura. Acabamos de hacer uno aquí. Bien, vamos a averiguar qué salió mal con este. Creo que sé lo que es. Esto no es un diseño automático. Se trata de solo dos bits dentro de un componente y se meten aquí y autolayouts El autolayout simplemente los aplaste. Entonces voy a decir como eres componente pero también cambias un en orden alto. Ahora ojalá por aquí, si cambio este, tienes que estarlo. Ahí vamos. Bien, ese es un componente de slot y como romperlo de un par de maneras diferentes y arreglarlo de nuevo, grande que te atrapará es que las cosas dentro, incluyendo esta, necesitan ser un componente y un diseño automático Y debido a que necesitan ser componentes principales, no pueden estar dentro de este original. Hay que hacerlos afuera aquí, traer una instancia de ellos. Y luego cuando estés listo, haz clic en la Instancia que quieras intercambiar, bien, en nuestro caso el slot, haz la propiedad Instage Swap, asegúrate de que golpeamos Create property y no cross. La otra cosa que podríamos hacer es agregar un poco de texto a esta ranura, o está bien, así que podríamos ir dentro de esta, agarrar el texto TO y llamarlo ranura de marcador de posición S1, solo para que cuando la gente lo esté usando poco les dé un poco de aguda a lo que estamos haciendo Aquí tienes todo tipo de notas. Creo que vamos a hacer antes de ir en realidad es vamos a publicarlo porque quiero volver a usarlo por aquí. Bien, entonces estoy en ese tipo de archivo de diseño de estilo principal. Tengo todos mis componentes. Voy a ir a la opción tres, Alt tres, y una PC. Publiquemos todas las cosas que hemos hecho. Y como ya hemos conectado este archivo de diseño, deberíamos poder la opción uno, opción a, para ir a la esencia, o puedes subir aquí. Y echemos un vistazo, no a los componentes locales. Echemos un vistazo a los principales estilos y formas de memoriales ahí está ahí. Se agarró el Popup Entonces yo o alguien que esté trabajando con mi sistema de diseño podemos pasar y decir en realidad quiero borrar. En realidad, no, necesito el correo electrónico de registro. Es un poco grande Dan, ve, bien, eso es todo. Hicimos un marcador de posición Swap Component. Te veré en el siguiente video. 141. Cómo convertir un sitio web existente en un diseño de figma: Hola a todos. En este video vamos a ver un plugin realmente genial. Estamos viendo el sitio web de la EPA. ¿Estamos viendo un archivo Figma mirar Outline View es un archivo Figma. ¿Será texto editable? ¿Para qué sirve? Nos permite lanzar cualquier URL y hará todo lo posible para convertirlo en un archivo figma. Genial para aquellos proyectos en los que no estuviste involucrado en el diseño inicial. A lo mejor ni siquiera fue diseñado en Figma. A lo mejor fue Photoshop o Illustrator o Microsoft Paint, algo más. Y hay que ir y empezar a recrear vainas. En este video, vamos y agarramos ese botón ahí. Hacemos que sea un diseño de foto genial, lo convertimos en componentes y comenzamos a usarlo en nuestro proceso. También es muy útil para ir en préstamo de imágenes, sacar colores, iconos, logotipos, general, todo reino genial herramienta de fondo, las herramientas llamadas HTML para diseñar Y déjame mostrarte cómo trabajarlo. Bien, para empezar, sólo tengo un documento vacío. Es y borradores. Voy a abrir el plugin. El que estás buscando es algo que se llama HTML para diseñar, hit Run. Hay una versión gratuita y otra de pago. Voy a pasar por la versión de libre que ya tengo disponible. Probablemente cambió para cuando llegues a ella. Voy a usar apple.com. Puedes escribir cualquier URL que te guste. Puedes preguntarle cuando es pollo el sitio web para pedir modo claro u oscuro y ¿de qué tamaño? Esto no viene directamente de Apple. Es sólo decir, Bueno, ¿te gustaría que intentáramos cargar una versión tamaño tablet de la misma? ¿Su sitio web tiene una versión que tiene tablet? ¿Su sitio web tiene un tamaño de tableta? Lo hace. Bueno, al menos Apple sí. Bien, así que elige eso, luego presiona Importar y puedes escribir cualquier URL. Puedes ver aquí que algunas de las actualizaciones para Pro, pero podemos conseguir mucho mientras necesitamos y la versión gratuita en este momento. Ahora, dependiendo si tienes las fuentes como las vimos antes, puedes ir y descargar las fuentes si las necesitas. Bien, tengo un montón de ellos tienen la helvética que necesito Y ahora tienes que prepararte porque hay asombro y luego hay cosas que no son algunas cosas increíbles que serían útiles si lo necesitara, digamos el logo Puedo recordar Comando o Control, haga clic y haga clic en cosas. Podría copiarlo fácilmente y pegarlo en mi otro documento con todos mis logotipos, tal vez un componente maestro. Bien. Ahí vamos. Tal vez tengamos que ordenarlo. Nadie ha pasado muy bien. Otras cosas que podrían ser más dolorosas. Digamos que quiero este botón, bien, para que pueda seguir dando clic y simplemente haga doble clic en las pocas veces que me he metido dentro de todas estas Etiquetas Div, encontré el botón. Desafortunadamente, si sigo entrando, esto en realidad no es texto, es solo una forma. Después SVG. ¿Por qué? No tengo idea. Yo asumiría que habría sido texto en el sitio web, pero al parecer ver el plugin o es Apple que lo están soportando como un vector y no texto editable real Los bits útiles son las imágenes. Bien, puedo Comando, haga clic, Bien, encuentre esa imagen. Y puedo decir, vamos a exportar lo que tengo seleccionado. Vamos a previsualizarlo como PNG JPEG. Claro, presiona Exportar y ya tenemos esa imagen, o simplemente cópiala y pégala en un documento diferente. Supercool, otras cosas geniales es que puedes comenzar a reconstruir algunos componentes. Entonces, busquemos un botón. Es usar este de aquí. Estoy un poco vamos, haz clic en el exterior Entonces, como que agarré el envoltorio de esta cosa. A lo mejor puedas alargar esto. Bien, voy a copiarlo y pegarlo. Es solo que, tengo mi propia versión por aquí y ya veremos lo buena que es esta. Va a haber momentos en que simplemente sea más fácil reconstruirlo. Y vamos a haber momentos en los que solo puedas usar este plugin para acercarte lo suficiente allí y va a haber algunos ordenando. Ahora, antes que nada, quiero comprobar si se trata de Text. Perfecto. Entonces es la muerte es Texto. El problema es que no es autolayout. Entonces voy a seleccionar el turno padre para un diseño automático. Se saltó un poco de relleno. Se ve genial. El único problema es que esto no está alineado en problemas es que esta cosa de aquí está un poco atrapada en una especie de máscara extraña Así podría apagar el contenido del club, podría llevarnos allí. Lo que podría hacer es en realidad solo usar recordar todas las teclas más cambiar el tamaño para que se ajuste a la opción de comando Shift, Control, Alt Shift en una PC, y simplemente volverá a dibujar alrededor del exterior Y eso está un poco alineado todo muy bien. Para echar un vistazo al fondo, Scott descomunal, esquinas redondeadas en él. Eso está bien. Puedo bajarlo a dos o 20. Bien. Entonces yo diría que esto valió la pena el esfuerzo de agarrarlo a través del plugin porque eso me hizo un poquito solo para prepararlo un poco Puedes ver lo increíble que es para el sitio web que has heredado, posible que hayas subido con un trabajo. Nadie está usando Figma, o al menos fue diseñado y digamos Photoshop o Illustrator antes de que alguien estuviera haciendo componentes Simplemente ya no podemos encontrar los archivos, descargarlos y empezar a recrearlos. Si nada más es genial para agarrar logotipos, iconos, colores y recrear algunos de estos componentes. Bien, eso es. La única advertencia es, he hecho que esto se sienta perfecto y funciona muy bien. Funciona bastante bien en el sitio de Apple y algunos sitios que he probado, he probado otros sitios y ajusta. En realidad hace demasiado calor. Solo hay ajustes están rotos y la profundidad de todas estas capas aquí un poco confusa, pero siento que podrías estar en un punto ahora tan lejos en el curso avanzado, realidad sabemos lo que estoy haciendo. Esto es súper útil, bien, eso es todo. Te veré en el siguiente video. 142. Cómo crear un inventario con superposiciones en Figma: Hola a todos. En este video vamos a hacer esta mirada a esto. Es un menú desplegable. Puedes pasar el cursor por encima de las cosas. Fancy. Se puede ir a diferentes páginas de gigante página dos, se pone mejor. Vamos a tener un segundo nivel. Podemos ir a Más Opciones y mirar, hay un segundo nivel. Ahora bien, este método en particular, hay un par de formas de hacer que los menús desplegables funcionen en Figma, esto es, esta es probablemente la forma más fácil Haremos otro en el siguiente video que sea poco más duro pero un poco más robusto. Usarías este para comenzar, bien, y es muy bueno si solo tienes uno o dos minuss, quieres agregar un poco de interactividad a este método en particular usa un montón de superposiciones abiertas donde solo tenemos un menú en el costado y solo lo abrimos en una posición debajo Así que una manera agradable y fácil de hacerlo funcionar. Bien, vamos a saltar y la trucha funciona. Bien, para empezar, he creado un nuevo archivo de diseño y solo para mantenerlo separado de todo lo demás porque puede ser un poco desordenado, Y he creado tres marcos, una página uno y una página dos. Estoy usando una vista de escritorio principalmente porque en esta se cayó. Como dije al principio, hay una acción de hover y no se puede hacer un hover en un dispositivo móvil, pero la gente quiere hacerlo en el escritorio Entonces eso es lo que vamos a previsualizar y aquí tendremos todos los componentes. Bien, hagamos dos botones. Bien, voy a usar la herramienta Tipo, clic una vez, alguna razón usando dietas, alguna razón estoy usando texto gigante. Voy a hacer el mío más apropiado. Ayuda de cambio de Scape, conviértalo en un autolayout. Voy a darle un color de fondo y un poco de relleno. ¿Idea? Porque no tiene nada de fantasía. Voy a tener dos de ellos. Voy a tener mi filtro y cuando lo hagas clic abajo, elemento de menú, este elemento de menú porque van a ser muchos enlaces diferentes. Y al menos pone un tipo, voy a decir, quiero que sea una altura y un ancho fijos, ¿bien? Y quiero que este sea 180 por 48. Y me voy a asegurar que es un poco de línea al centro de mi autodiseño No es importante. En realidad corre el medio. Ahí vamos. Para autolayout. Eso es. Deberíamos hacerlos ambos componentes para poder actualizarlo fácilmente más adelante. Bien, Así que crea múltiples componentes, no un conjunto, ni nada más. Renombrarlos a ambos. Comando R, Un botón, Shift Tab para ir al siguiente y te van a llamar elemento de menú. Bien, entonces lo que quería hacer es este filtro. Quiero agarrar una instancia de ello. En realidad, este filtro, cuando se hace clic, me gustaría abrir un montón de estos Así que voy a agarrar algunas instancias de ello, bien, y agarrar una, voy a duplicarlas. Comando D, D, D, agarra algunos de ellos, selecciónalos todos. Y lo que necesitan ser es que necesitan estar en un marco. Recuerda cuando hicimos superposiciones, hacemos clic en el botón, decimos abrir Overlay, y dice qué marco quieres No dice qué grupo de instancias o qué pila de ellas necesitamos para agruparlas todas juntas. Tenemos que unirlos a todos en un marco. Entonces esa es la Opción de Comando G. Para que sea un marco, solo dé marco y nombre. Vamos a llamarlo lista uno. Lo que pasa con las superposiciones es que volvamos a este botón de aquí Entonces este tipo de cosas que usamos simplemente lo moverá hacia abajo de cualquier manera. Los usamos para que podamos actualizarlo y él actualiza todos los artículos. Bien. Entonces para eso es para lo que está, pero olvidemos que se escabulle ahí abajo Lo que quiero hacer ahora es un botón de este. Cuando te hacen clic, vamos a Shift a para ir al modo prototipo Digamos que la indirección va a ser cuando se haga clic, me gustaría que abriera una superposición de la cual no puedo ver qué tipo de ver esta llamada list1 Bien. Las superposiciones tienen que venir de tierra de nadie Tienen que venir de fuera de otro marco, por lo que no se puede anidar dentro de él. Pongámoslo por aquí. Ahora, puedo decir, quiero la interacción al click. Quiero que abras una superposición de Cuál hay una. ¿Dónde lo quiero? Menú y luego vamos a moverlo por donde lo queramos. Voy a tener mi abandono del fondo. Pero el tuyo ¿te gustaría? Y vamos a tener el cerrado al hacer clic afuera. Entonces lo sabíamos pero él solo da vueltas, cierra la forma no oficial de escapar Quiero decir, tú, veamos si eso funciona. Así que estoy guardando mis componentes por aquí. Vamos a arrastrar la versión por aquí, bien, en la página uno. Y yo, y tengo un flujo en este caso. Si no dices que tienes un flujo en esta página para que pueda previsualizarlo de nuevo. Ojalá, he estado ahí para reiniciar. De todas formas. Doy click en esto. Oye, mira esto. Voy a decir que haces clic, clic, clic. Eso podría ser todo lo que quieras. ¿Por qué? Si quieres un tablero estacionario, si quieres conectarlo a una página, hagamos ambos como uno-a-uno Voy a volver a mi componente principal. Como saben, no lo estoy, voy a ir a este elemento del menú aquí. Y agreguemos los enlaces. Voy a decir que cuando el elemento del menú vaya al modo de diseño, puede tener su elemento de una pestaña hacia abajo a tres. Ve tú, he cambiado los nombres ahora voy a volver al modo prototipo. Di cuando se haga clic en éste, vaya a la página uno. Este ha hecho clic. Ir a la página dos. Voy a asegurarme de que el filtro esté en mis dos páginas. Voy a copiarlo y pegarlo para que cuando tenga una vista previa de esto, debería ofrecer refresh, vaya a Filtro, página a página uno. Aquí vamos. Tenemos un menú que funciona. Queremos algunos hovers porque los hovers son lo que los menús hacen normalmente Entonces por eso tenemos aquí este componente principal. Este de aquí podemos decir que quiero una variante, ¿de acuerdo? Y quiero que el segundo en modo diseño esté lleno de este brillo de saturación de tonalidad Voy a presionar Mayús Flecha Abajo para bajar mi brillo. Bien, hazlo de un color diferente. No va a funcionar del todo a menos que agreguemos nuestro prototipo y direcciones. Así que cambia al modo prototipo para decir cuándo eres lo que hiciste clic, nota al pasar el cursor, cambia a propiedad una variante No es exactamente lo que queremos. Y usaremos disolver. Lo mismo aquí vuelves por ese camino, va a funcionar. Tenemos algunos nombres terribles. Vamos a demostrar que funciona primero prueba, prueba, prueba. Bien, vamos a echarnos un vistazo. Impresionante. Bien hecho nosotros este nombre, estas variantes correctamente. He estado usando el modo de diseño y usando mucho esta opción por aquí. Sin embargo, lo que mucha gente hace, es que haré doble clic aquí y diré que el estado es igual a flotar Tab, tab. El estado es igual a default. Depende, como si eres más un desarrollador web, podrías hacerlo de esa manera. O si me quieres, termino haciéndolo de esta manera. clic en propiedades, dame el nombre del estado y luego hacerlo de esta manera. Y luego conseguir realmente TOC y ir por defecto debería estar por encima de Hover, no hace ninguna diferencia, salvo que ese es el orden en que están visualmente. De todas formas. Ahora, solo vuelve a verificar, no hemos roto nada. Bonito. Todavía va a las páginas. Bien, que mis amigos es el primer nivel del menú desplegable. Ahora bien, si eres como yo y todo está funcionando, estás como, qué orgulloso de mi este siguiente paso probablemente lo romperá. Entonces lo que vamos a hacer es ir a mostrar el historial de versiones. Entonces no tener nada seleccionado, golpear escapar, escapar, escapar. Este pequeño chevron aquí y decir, quiero mostrar el historial de versiones Vamos a guardar un pequeño botón más y podemos agregar este. Antes me fui quebró las mandíbulas para que podamos volver a cuando estaba funcionando y darle otra si lo rompemos, ¿por qué hago eso? Y no lo he hecho antes, es porque probablemente terminarás rompiéndolo. Es complicado hacer este siguiente paso ahora, tratar de explicarlo amablemente, bien , así que lo que queremos hacer es básicamente hacer lo mismo Tenemos este MainComponent aquí cuando modo prototipo, cuando se hace clic, tiene este menú abandonando Lo que queremos hacer ahora es que queremos hacer lo mismo. Queremos encontrar este elemento del menú, que es este pequeño componente de aquí abajo. Y cuando se haga clic, tenga otra opción que no quiero hacerles a todos ellos. Entonces lo que me gustaría hacer es aquí abajo y me entrego algo de espacio. Es que quiero agarrar este primer comando o Control D, duplicarlo. Quiero una tercera variante. Denles un nombre. Tengo Hover default y vamos a tener este estado frío igual al estado tres A esto lo llamaremos 1. El nivel S cambiará el nombre del mismo para que quede más claro. Llamaremos a éste uno más para que puedas hacer click sobre él. También le pondremos flechas en un rato. Pero sabes que puedes hacer click en esto y obtienes otro nivel de elementos del menú. ¿Bien? Entonces lo que vamos a hacer es duplicar esta lista, bien, así que así es como el nivel uno, vamos a duplicarlo. Terminó muy lejos. Ve por allá. Bien. Se llama automáticamente Atlas a lo que funciona para mí. Cambiemos el nombre de estos para hacerlos un poco más claros. Bien, entonces tenemos esta lista que va a aparecer por aquí Queremos decir, soy modo prototipo, no hover. Podemos hacer las dos. Vamos a decir, cuando me hagan clic, me gustaría abrir superposición de L2 Lo puedo ver porque es todo el camino se adhieren. No está anidado en otro marco. ¿Dónde lo quiero? ¿Terminado? Aquí a un lado, lugar ligeramente diferente al último. Cerrar al hacer clic en manual, se ve bien, ¿va a funcionar? No enseguida. Echemos un filtro de mirada. Saltas a las páginas. No lo puedo ver aquí. ¿Por qué lo puedo ver aquí? Yo puedo hacer está en la lista uno, necesito un interruptor en uno de estos, mi más uno. Debido a que había variante a debería poder pasar y decir en realidad esto, simplemente haga clic en esta. Ve a Design View y di: Sí, a mí me lo quiero. elemento del menú, que es esta cosa, es como los componentes han hecho aquí, pero no el predeterminado, no tener uno. Pero el segundo nivel. Así es como nos va en el hombre seccionado es raro para mí algunas veces para grabar esto en cualquier tipo de como no arrancarme el pelo, lo que queda de él, pero vamos a darle una Entonces filtro va a activar este de los ítems de aquí. Este tiene algunos ingredientes especiales donde nos muestra la lista aquí. Vamos a darle una prueba. Filtro preestablecido Más, enchufarlo. Míranos, estamos haciendo cosas. Ahora claro que pasamos por, y cuando hacemos clic en estos, vamos a algún lado, en el momento en que no lo son. Pero eso lo aprendimos al principio. Bien, las reglas de la casa van. Si necesitas regresar o tal vez puedas entrar aquí, muestra el historial de versiones. Volver a antes de que lo rompa. Puedes dar click en esta y decir esperar un segundo, ir a ahí y decir restaurar esta versión. No es lo que quiero hacer porque el mío está funcionando. Ahí vas. Otras cosas que podrías hacer para ordenarlo, simplemente moverlo y cambiar el tamaño de esto para que se vea mejor. La única cosa es, es que podemos tener un hover sobre esta opción aquí Porque por el momento, si prototipo y digo que quieres también un hover, hagamos un duplicado de esto Ha cambiado el color de la misma muy rápido Si digo Shift E, vas ahí. Al flotar, cambiar al estado cuatro, debería nombrarlo. Pero también hazlo la camarilla. ¿Ves para conseguir esto un poco queriendo decir que no puedes hacer ambas cosas, simplemente te gusta pasar el rato arriba? Se. Dice que la indirección no se puede activar Wilson otras activadas primero Entonces no puedo hacer que ambos funcionen. Solía ser capaz de trabajar solo ambos. Solía poder cambiar el orden de capas aquí de estos, pero ya no puedo hacer que funcione. Podrías probarlo y yo podría intentar hacer ambas cosas. Pero por el momento, si lo intento, filtro, Hover, hover funciona y hago clic en él, todos los dos trabajando Si la cierro y la vuelvo a abrir , bien, está funcionando de Eso lo dejaré en el curso porque los hombres, solía funcionar. Y luego cuando me estaba preparando para este video, no pude hacer que funcionara. Hizo exactamente lo mismo, lo juro, pero luego simplemente no pude hacer que funcionara. Entonces oye, cómo dice que no debería, pero ahora está funcionando. Ahí vas. Podrías tener más problemas, problemas. Y la otra cosa que quiero hacer es que voy a agregar un pequeño chevron ahí que la gente sepa hacer clic en él Bien, voy a cambiar clic en todos estos para decir realmente a la izquierda alinearlos porque quiero poner el pequeño chevron y voy a abrir un plugin, bien, voy a usar Iconscout, como para alternar entre todos los diferentes plugins de iconos que Voy a usar error. Y hago clic una vez SVG insert en mente se pone un poco aleatoriamente ahí, quiero agarrar el marco exterior de la misma y se asegura de que sea del tamaño necesario para ser En realidad, vamos a conseguir que vaya por ahí. Y en realidad ese es un tamaño bastante bueno. ¿Crees que es convertirlo en un componente? Tomemos una instancia de ese componente y pongámosla con mi autodiseño Y dependiendo de qué manera lo quieras, podrías, en lugar de tener cuatro flechas, solo puedes ir a rotar esto 90 grados contigo o bajando o empujando hacia afuera. Como por aquí. Está cayendo, pero de esa manera está empujando sobre algunos este de aquí tenemos que asegurarnos de que voy a ir centrado, tal vez alineado a la izquierda Lo mismo con este. Bien, este ya está santidad. Lo único con esto es que probablemente quiera, por fuera, está todo un poco machacado en el medio, aunque vaya al centro, aunque vaya al centro, recuerde ese truco que podemos hacer para empujarlos hacia el exterior a algo así como espaciar el Así que debajo de aquí, bajo autolayout, en lugar de empacado, podemos ir entre espacios Esa era la palabra que quería. Voy a hacer lo mismo y te agarro, copiarlo dentro de esta gráfica, el padre vaya aquí, diga espacio empacado entre. No deberías hacer esto al principio cuando lo estás creando. Simplemente no quería agregar demasiada confusión a este video. Vamos, vamos a restablecerlo. Filtro. Más. Míranos haciendo cosas. Sí, botones no muy bonitos. Están trabajando para nosotros. Bien, eso va a ser. Esa es una forma de hacerlo. Recuerda de esta manera él tiene simplemente muy bueno. Si tienes uno o dos menús, necesitas un poco más que hacer un prototipo Es más rápido, es fácil entender el siguiente video, pero el siguiente es un poco más robusto. Las personas pueden construir más componentes para un sistema de diseño más grande. Sí, vamos a entrar en eso ahora. 143. Cómo crear un menú desplegable de varios niveles en Figma: Hola a todos. En este video vamos a hacer este pequeño botoncito. Pero mira lo que pasa cuando hacemos clic en él, lo desplegamos y miramos, nos colocamos por encima de las cosas y miramos este listo alucinante Hay un menú de doble deserción. Algunos podrían llamar a un submenú Menú multinivel. Y cuando hacemos clic en las cosas, tenemos una página para ser estimulante Ahora bien, si has hecho el último video donde miramos una manera diferente de hacer un menú desplegable Terminamos en el mismo lugar, pero ahí usamos un boleto de método diferente. Y es importante aprender ambas cosas. Es una buena práctica para nosotros aprender oído y el curso avanzado, pero es útil cuando usamos el trabajo de otras personas, es posible que hayan ido creando menús desplegables y diferentes formas Y si conocemos ambos, podremos actualizarlo fácilmente o hacer el nuestro propio. Ahora el último video, dije que este método era un poco más caliente que el último No estoy seguro de que lo sea. Creo que me ha ido mejor explicándolo en la segunda versión. Entonces te parece más o menos lo mismo, cuál usas. Bien, vamos a saltar donde antes me gustaba. Tengo una página de Componentes y tengo dos páginas entre las que podemos saltar un poco Voy a comenzar con la Herramienta de Texto, Tiki, Botón de Filtro, texto descomunal, Voy a escapar en mi teclado para seleccionar todo, cambiar a para que sea un Layout automático. Voy a empezar una pequeña idea nueva. Bien, entonces tengo unos botones y realidad el botón dice en orden marco, voy a tener otro antes convertirlo en un componente porque en ellos para ser componentes separados cuando él va a ser mi elemento de menú. Porque van a tener diferente cantidad de textos en ellos. Quiero que sean de un tamaño específico, no el texto. No quiero cambiar el texto a ancho fijo. Quiero usar al padre para cambiar a, bien, no quiero que vayas a arreglar el ancho y voy a tener 160. Alineado a la izquierda está bien. Bien, Así que todos estos dos para ser componentes separados. Así que crea múltiples componentes. Ese es el nombre, el comando o control correcto, o va a ser mi filtro de botones. Este de aquí va a ser mi elemento de menú. Bien, así que aquí está la gran cosa que vamos a hacer. Vamos a dejar esto, bien, estos son nuestros componentes principales. Vamos a usar instancias de estos a partir de aquí. Bien, entonces ustedes son de ayuda pero pueden irse. ¿Bien? Entonces quiero esto, es una instancia de filtro Button. Quiero pegarlo dentro de otro componente. Vamos a darle un nombre mejor, se va a llamar desplegable. Desplegable. Puedo deletrear. Oh, ¿por qué no podemos ir al menú desplegable? Este va a hacer la mayor parte del trabajo que queremos a variaciones. Este de aquí va a tener algo de esto pasando. Entonces otra vez, no quiero el componente principal aquí. Quiero la instancia de esto. Voy a hacer una instancia manteniendo presionada mi tecla Option en una Mac, tecla alt en una PC. Entonces voy a arrastrarlo aquí. Bien, ¿y a dónde va a ir? Realmente no quería entrar en mi menú desplegable ahí para hacer zoom Así que solo puedes arrastrarlo e intentar meterlo ahí dentro. Quiero dentro de una variante para, ahí es realmente donde quería este nombre, estos. Bien, voy a hacerlo por aquí porque por eso prefiero. Bien. Esto va a ser derribado. Oh hombre, tecleando hoy. Bien. Y voy ficha a Variantes. Voy a haber cerrado y Tab nuevamente abierto. Y voy a cambiar el orden de las capas sin ninguna buena razón que no sea cerrada está en la parte superior y siento que abierta debería estar en la parte inferior. Dentro de abierto, tengo dos opciones. Ahora bien, estas dos instancias de estos dos tipos en la parte superior de aquí están envueltas en este padre aquí, marco padre, que resulta ser un diseño automático. Esto depende de usted si quiere mantenerlo en orden en voz alta, porque podría ser útil. Digamos que este diseño vertical es en realidad bastante útil y de momento o de manera incorrecta. Entonces voy a hacer click en Filtrar y me voy, estás en la parte superior. Y luego estos, puedo ir Comando D, D, D, o Control D, D, D, el padre Shift Enter. No tiene que ser un diseño automático. Se puede ir menos y seguirá funcionando. Simplemente entras ahora puedes moverte principalmente con ellos a donde quieras que esté en dejar el mío como el autolayout porque es con ellos a donde quieras que esté en dejar el mío como el autolayout porque es un poco útil. Entonces ya terminé. Bien, entonces ahora solo necesitamos la indirección. Entonces este top de aquí es Shift E, Bien, voy a decir que vas a la sala de urgencias al hacer clic cambia al desplegable de abrir y el botón Filtro Cuando te hagan clic, vuelve por ahí. Volver a cerrado. Vamos a darle una prueba. Entonces voy a hacer, es que voy a arrastrar una instancia. Observe que nada de eso estos tipos bajan por aquí. Tú eres el jefe. Estás haciendo todo el trabajo. Se quieren instancias de esto. Bien. Vamos a previsualizarlo. Bueno, funciona. No lo sé. Creo que debería. Página uno por clic en esta. Oye, funciona. Aquí vamos. Entonces hay un menú desplegable. En realidad estoy pensando ¿ cuál es el camino más difícil ahora? ¿Es la forma de visión general o de esta manera el menú? Va a aprender a ambos porque los encontrarás en línea. No bien o mal. Estoy seguro de que hay otras diez formas. Las tapas se imaginaron un poco con nuestro hover. Este de aquí es un MainComponent. Quiero varianza, quiero que la segunda variante, Shift E baje a Fill, haga clic en HSB Eso es así que me gusta usar este último mantén presionado Shift, golpea hacia abajo para oscurecerlo un poco Tengo a una Oscuridad, Una Luz. Vamos a nombrarlos. Vamos a hacer clic en el padre, vamos a hacer clic en la varianza, y llamemos a este estado. Y tenemos default y hover. Y vamos a ir al modo prototipo y te decimos que, cuando estés en el vuelo, cambies a hover Y vuelves a este onclick cambiar a default. Bonito. Debería funcionar sin ninguna otra molestia. Vamos Niza. Ahora bien, aquí es donde se vuelve confuso. Necesitamos una segunda opción. Bien, entonces necesitamos ese Dropdown extra si solo lo necesitas, tu trabajo está hecho Obviamente, tenemos que pasar y decir Tú en realidad por aquí, este de aquí, oh, diseño de pluma. Pasemos de cerrado a abierto y digamos cuando hiciste clic en el modo prototipo, voy a decir un poco como otra interacción que no Al hacer clic, vaya a navegar a la página dos, porque ya en la página uno, vamos a darle una prueba Tu página ambos llamaron página uno. Ambos son ir página uno. Ahí vas. ¿Te gusta que no funcionara entonces? Porque los llamé a ambos página uno. Ahora vamos a darle una prueba. Usando mi flecha izquierda para volver a apagarse o refrescar. No lo refresqué mucho en absoluto. Esta primera opción debería ir a la página dos. Aquí vamos. Bonito. Lo que podría querer hacer es por defecto, cerrar eso. Ahora. Copiarlo. Péguelo por aquí. Bien, le damos estilo a los botones. Cambia la escritura por aquí, bien, en vez de decir elemento de menú, puedes tener las diferentes páginas de categorías. Cambiar el mío. Bien, ahí los míos. Vamos. Bien, lo siguiente que quiero hacer es agregar ese segundo nivel. Entonces, lo que queremos hacer es que básicamente quieras recrear este tipo de artilugio aquí reutilizaremos porque estos elementos del menú, podrías tener un segundo conjunto de estos, pero ellos hacen lo que queríamos hacer. Básicamente, necesitamos recrear esto. Entonces necesitamos el primer botón, no una instancia del mismo. Tenemos que separarlo. Es Opción de Comando B, Control Alt B es Renombrarlo para que no nos confundamos demasiado. Lo que se llama esto uno al otro, cambia las garrapatas en él para decir otro. Se puede ver por aquí en el panel Capas que solo estoy tabulando Puede tabular un poco a través de los menús, lo cual es útil. Recuerden, no lo cambiaron en absoluto. Ahí vamos. Puntear, puntear, puntear la etiqueta y el texto. Bien, entonces tenemos esto, es un diseño automático. Hagámoslo un componente para que podamos controlarlo. Y ahora tenemos que hacer lo mismo que hacíamos antes. Duplicemos esto. Entonces tengo una instancia de ello. Ya no necesitamos eso. Ese es solo mi controlador general. Sin embargo, esta instancia puede estar dentro de un componente. Eso lo hacemos porque queremos variantes de la misma. Esta variante aquí no va a cambiar mucho excepto que vamos a hacer lo mismo que esta. Quiero uno de estos elementos del menú. Podrías crear otro conjunto de elementos del menú si necesitaban ser funcionalmente diferentes Pero voy a crear una instancia de esta, bien, no un componente nuevo, solo otra instancia porque quiero usar estas en todas ellas y ponerla dentro de aquí. Y no va a entrar. Terminó pasando el rato aquí, no dentro de él. Entonces echemos un vistazo a nombrar primero. Entonces con este seleccionado, voy a ir Propiedad, este va a ser desplegable secundario Voy a tener que voy a tener cerrado y tabulador abierto. Un poco más de sentido. Entonces quiero esto, que no está en nada para estar dentro de secundaria, o ¿está ahí? Dentro de mi componente que hice que se llaman otros, en realidad no lo llamé, solo lo sacó de ese nombre original. Así que vamos a cambiar el nombre de este botón Menú. Quiero que esté dentro la opción abierta una vez que estemos al revés. Entonces estás en la cima. Esto, quiero ser Comando D. Fui por el camino equivocado. Es un diseño automático así que no puedo moverlo a veces el autolayout no Entonces voy a hacer clic en el padre, Shift Enter, agarrar a todo ese grupo. Y no necesito que sea un diseño automático porque quiero hacer una cruz y luego abajo, bien, No es como un solo flujo. Yo terminé. Arrastre algunas opciones más, por muchas que necesite. Puedes cambiar, seleccionarlos a todos y decir, oh, mira, algunos de ellos terminaron muy lejos de aquí. Entras ahí. En realidad, necesitan estar ahí con sus amigos. Eso es probablemente lo que más problema te va a causar es que estás haciendo cosas y arrastrándolas y duplicándolas y terminando fuera de donde necesitan estar ya sea fuera del conjunto de componentes como lo hizo al principio, o va a terminar fuera de la variante Están todos en el ahora. Porque estoy raro tamaño y pasando, recuerda Comando, Opción shift, todas las teclas más R. Eso es Control Alt Shift R, envuélvala al menos. Y eso le va a Eric tan pronto como seleccionemos todos estos, recuerdo teclas rápidas. Vamos a usar pack verticalmente. Ahora es de la talla equivocada. Bien, tenemos en un teléfono un poco de tangente ahí. Básicamente lo que hemos hecho es rehacer esto. Tomamos una instancia de este botón. Ahí está ahí. Hicimos dos variantes de la misma. La segunda variante aquí, agarramos un montón de los elementos del menú y la tiramos Solo nos aseguramos de que esté dentro de la variante que llamamos Open. Y ahora probemos que funciona sin conectarlo hasta ese primero. Así que no quiero hacer es recordar, este es el jefe. Estos dos tipos fueron de ayuda para controlar el estilo de los botones, pero la mecánica está sucediendo con estos dos grupos aquí. Bien, entonces quieres una instancia de vista. Vamos a ponerte por aquí. Si trabajas, nosotros vamos a refrescar. No está funcionando. ¿Sabes por qué no está funcionando? Porque en realidad no agregamos ninguna interactividad. Entonces en mi prototipo, vas a su onClick cambiar para abrir este botón aquí No quiero hacerlo a todo el grupo cuando se hace clic porque quiero que estos elementos del menú vayan a otro lugar Pero cuando hay otro, se hace clic en otro botón, vuelve a esta primera opción Vamos a darle una prueba a eso. Obtienes que funcione. Ahora tenemos que atarlo con esto. Entonces lo que tenemos que hacer es que tenemos que ir aquí a mi primera lista. Este elemento del menú aquí, tenemos que cambiar hacia fuera. Podría agarrar esta copia, ir a esta, e ir a pegar y reemplazar comando Opción Mayús V, Control Alt Mayús V. Me pregunto por qué lo hice demasiado pequeño. Eso está bien. Flujo en un segundo. Pero ahora eso desencadenaría a este grupo. Este tipo disparará a su otro grupo. Creo que vamos a darle una prueba. Ya sabes, filtras, baja a Otro. Y ahí están mis menús que lo que hago es simplemente hacer el 160 original. Por eso tengo esto. Entonces vas a atraparte y no abrazar tu EUO 160 fijo ¿Qué estás destrozado aquí? Encajas, encajas. mejor las abejas necesitan tal vez solo moverse un poco también. Ojalá por aquí. No necesito esa. Solo hay que previsualizar este. Boop, boop, boop. Aquí vamos. Déjanos. Ahora puedes pasar algún tiempo repasando y diciendo en realidad cuando éste es coleccionar en modo prototipo, ¿a dónde va? Va a ir a hacer click e ir a la página donde quiera que necesite ir. Navega a esta otra página que he hecho, ¿verdad? Página uno. Filtro, otro elemento del menú, página dos. Bien, Entonces, ¿cómo se escondió, destrozado después de unos menús desplegables Y si te resulta un poco complicado, a menudo lo que la gente va a hacer es que en realidad no estaban construyendo un menú desplegable interactivo solo para ser algo que se parece Entonces voy a arrastrar esto y romperlo a pedazos. Y solo van a hacer esto, van a mostrar esto más esto. Y entonces podrían tener otro menú simplemente destruyendo mi diseño. Copiar Pega esto, chicos fuera de ahí. Y solo voy a hacer esto para mostrar un menú desplegable. Debido a que el desarrollador lo construye, nosotros usamos la probabilidad de JavaScript para construir tu menú. Y solo necesito ver las visuales para ello. Y es posible que tus grupos de interés solo necesiten ver cómo se ve uno de tus menús. Juego desplegable, tengo estos otros botones y solo estás mostrando cómo, por ejemplo, así es como funciona esto. Y eso es todo. No hay componentes, ni instancias, ni swaps, ni varianza que solo muestre esta versión Pero es realmente bueno mostrarlo en ese tipo de prototipos y versión interactiva lugar de solo una estética Bien, eso es todo por la otra forma de hacer menús desplegables, la otra forma de hacer menús desplegables, muchos componentes similares, pero una implementación diferente, no correcta o incorrecta Y encontrarás cosas en la comunidad que usa cualquiera de las dos versiones. Y es bueno saber cómo están hechos para que puedas usar el trabajo de otra persona y hacerlo funcionar en orina. Bien, eso es. Te veré en el siguiente video. 144. Proyecto de clase 17 - Menú desplegable anidado: Hola a todos. Es tiempo de proyecto de clase. Quiero que lo hagas el menú desplegable anidado. A mí tampoco me importa cómo lo hagas. Los dos últimos métodos que vimos, pero va a ser el complicado donde tengamos un submenú adicional Bien, así que haz el primero cuando hagas clic en un botón que se despliega, pero no quieren ver ninguno de los artículos. Poder expandirte para mostrarte otro menú. Por si acaso lo estoy explicando mal. Este botón con menú, con otro menú que sale. Lo que quiero que hagas es que puedas crearlo simplemente como lo hice yo, pero me gustaría que buscaras y investigaras un poco sobre la interfaz de usuario del menú desplegable Ese es el término que pondrías en los distintos lugares. Te he mostrado algunos lugares para buscar antes en el curso como este último enlace aquí arriba, K Dribble Behance, carril de pantalla, colectivo de páginas, mob, y hay muchos lugares que puedes consultar, incluso una búsqueda en Google solo para hacerte una idea de cómo podrías Además, si ya has hecho un menú desplegable en tu vida y está estructurado de una manera diferente Crees que la manera es diferente o mejor, o partes de ella una mejor. A mí también me encantaría ver esa versión. Muéstranos eso en la presentación y avísanos también en los comentarios. Hay más de una manera de hacer un menú desplegable. Bien, toma un video de tu pantalla usando tu Menú y luego sube el enlace a la sección Asignaciones. Comparte en redes sociales, hazlo con Figma Advanced y asegúrate de etiquetarme en los distintos lugares Y claro recuerda comentar también sobre el trabajo de un par de otras personas. Ese es el mínimo. Puedes comentar algunos de los trabajos, pero al menos dos. Bien, diviértete y dolor. Haciendo Tu Desplegable Anidado. Si te encuentras con problemas, pon tus notas en los comentarios. Si lo hiciste, revisa los comentarios y di Si puedes ayudar a alguien, voy a tratar de saltar ahí también. Juntos, haremos un menú desplegable anidado. Bien, eso es todo. Disfrutar. No son tarea. Veré en el siguiente video. 145. Cómo crear un efecto de crecimiento estacionario para imágenes en Figma: Hola a todos. En este video vamos a hacer esto un poco como lo de Hover donde se desvanecen un poco y se hacen un poco más grandes cuando te vuelves por encima de la parte superior ¿Por qué este video es tan largo? Es porque quiero mostrarte algo donde lo hacemos muy fácil, pero luego queremos seguir agregando cosas. También queríamos desvanecernos, así como crecer. Y queremos poder entrar en esto, abrir un plugin y simplemente ir y decir rápidamente, bien, quiero un nuevo conjunto de imágenes que todos vamos a ser masculinas y golpear Aplicar todos Se va a decir, ¿te gustaría aplicar a la sección de imagen que todos actualizan? A lo mejor el texto necesita cambiar. Bien, cambiemos el nombre o el nombre y apellido de cualquiera Eso es hacer clic en Aplicar todo ¿te gustaría que se aplicara a la Propiedad del Componente llamado nombre del artista, eres como, Sí, hagámoslo. Lo mismo con el país también. Y queremos que todo funcione con terminado. Así que quiero llevarte a través un poco de no sólo vamos a hacer la imagen Crecer cosa al principio, eso es muy fácil. Pero lo que voy a hacer es seguir sumando niveles de cosas que queremos hacer. Y vamos a seguir tropezando problemas e intentaremos resolver problemas juntos Porque a veces este curso puede ser un poco como, oye, así es como hacerlo. Es súper fácil. ¿Por qué no lo haces tan súper fácil? La verdad es que, ya que termino construyendo algo de la manera que creo que es bueno. Y luego me gusta un poco, oh, y también quiero hacer eso y se rompe la otra cosa que me hice como si estuviera bien. Y entonces estás como, oh, yo también quiero hacer esto y luego quiero que sea muy fácil de usar para otras personas. Y te gustaría, terminas por esta madriguera de hacerlo de la manera más fácil que piensas, luego agregándole un poco más de complejidad, rompiéndola, arreglándola. Supongo que esto es más un enfoque del mundo real de la forma que trabajo cuando estoy construyendo componentes en Figma y estoy hablando, ya es demasiado largo este video, pero espero que lo disfrutes . Sra. Jumping. Para empezar. un marco que es la raíz cuadrada y un marco aquí que puedes ver como un diseño automático. Y tengo algo de texto dentro de él para separar líneas de texto. Oye, agrega su nombre y país de origen. Bien, comencemos nuestro viaje. Este de aquí, sólo voy a poner en una imagen. Entonces voy a ir a Fill, voy a ir no sólido. Eres imagen. Elige una imagen y ejercitas archivos. Ahí está el artista 1.2. Tienes que sacarlo a la luz. Sólo una. Bien, va a estar bien. Voy a hacer un duplicado de esto porque probablemente voy a terminar haciendo otra versión en algún momento o mi hábito de todos modos. Bien, vamos a convertir esto en un componente. Vamos a darle un nombre, un artista, ¿de acuerdo? Y lo que quiero hacer es tener dos variantes del mismo. Y este de abajo de aquí, voy a usar el truco donde pueda entrar dentro de él, Opción de doble clic. Voy a cambiarlo a crop y voy a tratar de encontrar la ventaja, lo cual puede ser complicado. Mantenga pulsada la tecla Opción en mi Mac, tecla alt en una PC más turno. Bien, sólo voy a escalarlo un poco y ver cómo va esto. Intentemos obtener una instancia de ello. Y voy a previsualizar esto y no va a funcionar. ¿Por qué no? Así es. No he añadido las interacciones. Bien, entonces ese es mi primer pequeño problema. Así puedo hacer eso. Shift E, vas a su de barril mientras se cierne. Me gustaría que cambiaras esta variante a su nombre covarianza. A medida que vamos. Vamos a hacer clic en los padres ir a Diseño. Voy a decir en la configuración aquí, este va a ser mi estado y va a haber default y un hover Ahora vamos a previsualizarlo y ver cómo vamos . Oh, mira eso. Lo único que solo necesitamos para asegurarnos que está sucediendo es con la interacción, es que la configuramos a smart y Animate He cambiado mi amable CO, Bien, así que hagamos el trabajo, ¿verdad El problema va a toparse con esto cuando digo en realidad, quiero múltiplos de estos, siempre y cuando digas tú y luego otro conjunto, ¿qué harías de tener su duplicado se volvió un poco loco Bien, así que tengo un montón de estos. Voy a seleccionarlos a todos. Voy a usar plugin. Voy a usar el que se llama Content real ya lo tenía abierto, que es Command Option P, Control Alt P en una PC. Para abrir el último, usa plugin usando contenido real porque es realmente útil. Voy a golpear imagen y voy a decir, me gustaría que un montón de fotos se apliquen a todas ellas. Y va a decir Seleccionar Capa y estás como, Oh, guau, bien, dale una oportunidad a eso Voy a decir esta capa. Aquí vamos. Aplica esa. ¿Puedo hacer varios? Sí, sostén Shift, Shift y Command, indaga un poco y agarra todos estos y ahora vamos a tocarlos Excelente, Ahora una ficha. Entonces voy a previsualizar este flujo aquí. Oh, primer problema. Bien, entonces podrías volver a aquí e ir a esta opción y decir en realidad vamos a copiar las propiedades. Recuerda Comando Opción C y luego Control Alt Z en una PC, puedo decir que en realidad estás bajo diseño tienes otro estado de hover Y entonces podría entrar en esto y luego pegar ese estado, que tiene esos mismos dos atajos más V. Y ahora va a funcionar. Todo badaga escala ese. Ahora. Por supuesto que nosotros mismos. Nos encontramos con un callejón sin salida. Te voy a mostrar una manera de ser redondeado. No tanto como la forma oficial, sino simplemente tropezar con problemas Al arreglarlos a medida que avanzamos, tal vez encuentres que esa opción original que acabamos de escalar hacia arriba y hacia abajo con una persona es perfecta Escalas cada uno de ellos hacia arriba. Lo que quiero hacer es que quiero algo donde cuando actualice una imagen, ambas actualicen. Básicamente lo que queremos es que queremos algo dentro de aquí que esté en ambos, el momento en que estas son dos imágenes separadas, queremos hacer de esto un componente, tener dos instancias de esto. Entonces esa va a ser la solución. Entonces LEDS, es esconderte. No estoy seguro de que te necesitamos. Lo que quiero hacer es que solo voy a hacer doble clic sobre esto, arrastrar una versión del mismo. Bien, no es una instancia, no es nada. Simplemente lo arrastré un poco porque quiero la forma y voy a convertir esto en un componente Voy a renombrarlo y voy a llamar a este enganche. Y luego voy a arrastrar una instancia, copiarla. Y voy a decir que los pegas, colocas It's Command Option Shift V, Control Alt Shift V en BC. Oh hombre, atajos al mismo para éste, que estas sean dos instancias vinculadas al mismo componente. No necesito que lo hagas. Las instancias son el componente principal. Es un poco ojalá vaya a trabajar cuando actualicemos uno, actualicemos ambos A ver si eso funciona. Bien, pero a prueba y error, los seleccioné a todos. Voy a decir Contenido Abierto, imágenes reales, probablemente va a decir fotos. Seleccione la capa. Yo puedo hacer eso. Entonces Comando y Mayús, y estoy haciendo clic en todos estos comandos shift, eso es Control y Shift en una PC. Bien, aplique todo. No le gusta como solía hacerlo. Más problemas porque no puede cavar en el relleno en nuestra instancia. Aunque podemos hacer, es en lugar de esto solo ser mi jefe te dijo que es como dos formas de agregar imágenes Puedes ser un relleno o vamos a deshacernos de eso. Puede ser una imagen que se asiente dentro de nuestro marco. Entonces, vamos a traer una imagen. Entonces voy a traer artista, voy a sacarlo a relucir como dos. Ahora. Voy a mantener pulsada la tecla Mayús para asegurarme de que es el tamaño correcto, el tamaño apropiado. Voy a ponerlo dentro de esto. La diferencia entre esto. A menudo cuando estamos haciendo algunas cosas complicadas de imágenes, es bueno tener un marco con algo realmente táctil en su interior que podamos escalar y movernos y hacer cosas. Veamos cómo funciona esto ahora. En primer lugar, veamos qué está pasando. No pasa nada. Entonces, ¿está funcionando mi Hover? Lo es, pero simplemente no hay diferencia entre los dos. Entonces lo que voy a hacer es ir dentro de éste, dentro del tiro en la cabeza. Bien. Y en esto hay un auto S1 y ¿puedo simplemente escalarlo, digamos K? Y porque dentro de la Instancia, no podemos escalarla. Más problemas. Probemos con el padre. Vamos Shift Enter. Bien, para agarrar al padre, tal vez solo escalar eso para que el keto, puedas totalmente 1.05 un poco más grande A ver si funciona. En primer lugar, Hover no funciona Bien, así que te tengo. Ese va a su adelanto. Refrescar. Es un poco absorbente Algo le pasa. No disfrutes lo que son después de mirarlo un rato, solo cerré Figma y abrí de nuevo y luego funcionó bien Eso estuvo raro. Voy incluso eso en el curso porque hay momentos en los que te gusta, solo volví y estaba como, parecía estar trabajando y solo tenía que cerrar por arenilla y abrir una copia de seguridad, un poco la rompí y nos vamos a Está un poco fuera del alcance de esto. Bien. Entonces, ¿cómo arreglamos eso? Bien, ¿así que puedo cortarlo dentro de estos padres? Entonces conseguí este Hover, saqué mi marco Hover aquí. Tiene una frontera alrededor del exterior. Vamos a cortarlo. Bien, aquí vamos. A ver si eso funciona. Y funciona un poco. Se puede ver que hay un poco de ghosting que continúa porque no hay recorte en este Y es un poco tratando de convertirse en éste. Entonces es un poco como recortado aquí, no recortado aquí. Y a medida que crece a la mitad clips y a la mitad no así ambos Eclipse. Veamos vista previa, vista previa. Ahora mismo estamos trabajando abajo allá abajo. ¿Puedes ver el nombre? Depende de cómo quieras hacer esto. ¿Quiero tal vez esto de arriba hacia abajo lo ha hecho a éste Déjame usar mi corchete. Ven hasta la cima. Romper funcionaría. No pudiste ver que un poco salta de un lado a otro. No le gusta faltar con capas. Me gustaría que las capas fueran iguales en ambas. Aquí. Marco 37, que es un nombre terrible, Vamos a cambiarle el nombre. Bien, es mi bloque de texto de artista. Este de aquí también necesita ser llamado como cuadro de texto y necesitan estar en el mismo orden de capas ¿Ves que tiene que estar por encima del tiro a la cabeza para que el grupo coincida con ese grupo Vamos. Así que más violines y arreglos. Bien, vamos a hacer que se desvanezca porque sé que probablemente también va a haber un problema ahí. Bien. Entonces, lo que hicimos en el pasado antes, en realidad, vamos a asegurarnos de que estos aceites se actualicen cuando lo cambie, Ese es otro buen punto. Así que seleccione todos estos abiertos a mi plugin no se abrió porque he cerrado Figma y lo he vuelto a abrir Ahora mi atajo funcionará después de esto. Él es lo abrimos al menos una vez voy a ir imágenes, voy a hacer clic en fotos y voy a aplicar todas. Y ahora realmente puede acceder a esa imagen que está dentro. Tenemos un poco distraídos. Y así en vez de que sea un relleno, tenemos que tratar de seleccionar todo. Ahora, en realidad está esa unidad que está dentro del marco. Cuando digo unidad, quiero decir que por aquí, recuerden que no es sólo un marco con un relleno. Es un marco con esta imagen en realidad físicamente dentro de ella, ese pequeño icono de ahí. Bien, tal vez lo colocamos y lo arrastramos dentro del marco. Ahora, veamos si funciona. Ah-ja, Está funcionando. Faltan un par de imágenes cargadas ahora. Agradable, son fáciles de actualizar. Escalar un poco. Hagamos el desvanecedor. Entonces podría entrar dentro de este de aquí, seguir entrando y puedo aplicar relleno. A ver si eso funciona. Entonces un relleno extra como lo hicimos antes. No está funcionando. Bien. Entonces, ¿cómo lo hacemos? Entonces está encima de todo tapas. Tal vez sea trabajar con la imagen. Bien. Y digamos que la imagen va a ser la exposición hacia abajo. Vamos a probar eso. Ve aquí. Refrescar. Lo que se hace es quebrarlo aún más. No se puede hacer esa transición entre o en este momento, al menos no puede hacer esa transición de exposición entre los dos. Ve esto como una imagen diferente. Es esto ahora porque hemos hecho estos cambios. Bien, podemos vivir con los anuncios, más soluciones. ¿Cómo hacemos que funcione? Ya tuve que pensar en esto y me topé con el problema Así que estoy fingiendo pensando, bien, lo que voy a hacer es agregar nuestro marco. En realidad, quiero que el marco sea del mismo tamaño que este. Entonces lo que termino haciendo es duplicar e Instancia, separarla, deshacerme de la imagen por dentro Dale un relleno que yo quiera. Voy a darle el mío negro a digamos, $0.22, renombrarlo y llamarlo fade. Y voy a poner esto dentro de éste para que estén en ambos. Y entonces ojalá pueda ir a ti y decirte, olvidé el fade seleccionado. No lo he hecho, ahí está el desvanecimiento. Digamos que el desvanecimiento se establece en cero por ciento. ¿Esto va a chocar? Se desvanece ahí para empezar, y se va. Días felices. Bien, vamos a asegurarnos de que ya podemos ir y actualizarlo. Entonces, seleccionémoslos todos. Recuerda, estamos tratando de que esto sea útil para que nuestro equipo use lo que no lo rompen. Veamos si solo pueden pasar por elegir nuevas imágenes. Anunciar masculino. Ahora podemos cavar y recoger esa capa que es genial. A ver si funciona o funciona. Bien, la otra cosa que probablemente necesitemos renombrar es que en realidad se puede cambiar el nombre de Instancia Entonces aquí adentro, este desvanecimiento, ahí está esta cosa. ¿Podemos darle otro nombre? Vamos a enfriarlo imagen. Ahora cuando vayamos y actualicemos esto, podría ser un poco más claro. Escogiendo una opción diferente cada vez. Sí, sólo puedo agarrar la imagen. Bonito. Vista previa, funciona. Pero se está desvaneciendo bien y escalando. Y algunos de los últimos pedacitos para ordenar esto serán volver a nuestro componente aquí. Voy a configurar componentes y vamos a entrar y nombre de artista fino. Entonces voy a seleccionar el nombre del artista. Bien, y vamos a usar las propiedades de los componentes porque quiero poder actualizar todo el texto aquí fácilmente simplemente escribiéndolo y ojalá use algunos de esos complementos solo para rellenarlos un poco antes Entonces por qué no es necesario hacer es decir el nombre del artista, encuentra la opción de contenido aquí. Bien, hagamos una Propiedad Componente y digamos, quiero que el nombre sea nombre de artista. Va a tener un valor predeterminado del nombre del artista. Eso está bien. Lo mismo con este de aquí. Bien. Voy a decir que no has tenido un sname. Vamos a crear uno nuevo. Eso es lo que otro en dos text-box separados vamos a poner en el país. Excelente. Así que ojalá por aquí ahora, pueda seleccionarlos a todos y decir: Mira, puedo cambiar el nombre del artista por Dan Scott, quien vive en Nueva Zelanda, realidad de Nueva Zelanda, que vive en Irlanda. Vamos a probarlo. Está roto. Bien. Así que sólo lo hemos hecho en una de las dos instancias. ¿Bien? Tan gracioso, hecho en una de las dos Variantes. Bien, el aspecto es igual pero por aquí. Entonces, si hago clic en un artista llamado Kesey tiene este tipo de rombo, palabra terrible, cosa redondeada , rectángulo redondeado Es como una pequeña etiqueta para decir que se aplica. Tengo que contentar una propiedad, esta de aquí, Comando o Control click no la tiene, pero ya tengo una hecha. Puedo aplicar lo mismo con el país de la UE. Entonces ahora deberían estar amarrados. Vamos a darle un adelanto. Todo lo que me sale bien. Bien equipo, pero haciéndolo un poco de salto. Lo sé, pero olvidé mostrarte uno de los cupones es que puedo seleccionar todos estos ahora y decir en realidad, voy a usar plugin y voy a decir Text. Y debido a que agregamos esas Propiedades de Componentes, puedo decir pongamos en nombre de la gente primero y último. Voy a sentarme aplicar a todos y dice Cual quieres agregar dos y agregarlo al nombre del artista. Muchas gracias. Mira eso. Ellos lo actualizarán. Ahora soy Ralph Edwards Voy a volver. Otra es empresa no país. Aquí hay todo tipo de opciones. Digamos aplicar a todos Cuál país de origen. Miren ese Reino Unido de Gran Bretaña, hombres, escucharon eso el largo camino. Pero algo tienes que estar listo para nombres súper largos. Siempre es el Reino Unido de Gran Bretaña se acaba de escribir Reino Unido Ahí vamos. Problemas resueltos. Bien, sigamos con el video Simplemente se me olvidó mostrarle eso por el tiempo atrás hasta el final. Llevar a cabo. Ahora puedo mover esto a mi biblioteca de componentes maestros, actualizar la biblioteca, y ya sea futuro yo, todas las personas con las que estoy trabajando o cuatro pueden ir pueden ir opción de echar un vistazo a la biblioteca. Bien. El mío sigue aquí en la página uno, pero pueden probarlo de esta manera más extraña Van y cambian el nombre, el país, y ahora van y cambian la imagen. Ya sea usando el plugin, personas aleatorias, está probado, estás trabajando, o pueden ir y hacerlo manualmente. No puedo esperar a que sea una Propiedad Componente para las imágenes. Imagino que pronto saldrá. Vigila eso si no está ya ahí. Si quisiera hacerlo manualmente, bien. Normalmente puedo hacer clic en Comando y simplemente bucear dentro o algo así. Pero en el momento en que tengo este desvanecido eso está en el camino. Entonces lo que podríamos hacer es Lockett, Bien, así puedo mandar clic en esto para saltar directamente y cambiar la imagen Y ese es un buen punto, bien, vez de hacerlo en la instancia, poco desbloquea eso, voy a ir al componente principal, que es en este caso el fade viene del tiro a la cabeza, que está dentro del artista, que luego se pasa a mi instancia Puedo decir que bloquee eso para no poder cambiarlo. Cuando están arrastrando otra instancia, pueden hacer clic de comando y yo omitiré el fade con un candado, puedo llegar directo a la imagen y poder actualizarla manualmente Yoy necesita un poco de carbono. Bien, y vamos a previsualizarlo. Miras que fácil reutilizable, tardó un poco de tiempo en hacer, pero a veces hago que estos tutoriales parezcan muy fáciles, como si tuviera todas las respuestas y muchas veces hay mucho tipo de como prueba de laboratorio probarlo. Eso funciona y luego agrega un poco más. Y ahora no funciona. una cosa de emoji de cara genial. Descubrimos un par de formas de hacerlo. Puede que no tengas que bajar tan lejos por lo que estás haciendo. Pero siento que es interesante ver, no sé, problemas, resoluciones, más problemas, más resoluciones a algo que funcione al final, ojalá. Bien, eso es. Te veré en el siguiente video. 146. Proyecto de clase 18: efecto de crecimiento con hover-a-flotación: Espero que no nos haga hacer esa cosa de crecimiento de hover para un proyecto de clase, sorpresa, tiempo de proyecto de clase, efecto de crecimiento de hover Y no tienes que ir como lo central y tipo de serpenteante es que fui, me gustaría que te pongas a prueba, que se te aunque me gustaría que te pongas a prueba, que se te ocurra una idea, se te ocurra un diseño, lo lleves a las cosas que necesitas, es que necesitas tener texto un poco de dos líneas Teníamos el nombre del artista y país de origen. Se puede cambiar eso por otra cosa. No lo sé. Estaba tratando de pensar en otras ideas que se puedan hacer ahí género, no estoy seguro de lo importante que es el país de origen. Yo solo los quiero y con esas partes de textos, me gustaría que te asegures de que hay propiedades de componentes para hay propiedades de componentes que las instancias se puedan cambiar fácilmente en el Inspector de Propiedades, quiero decir así, pero puedes ir por aquí y ver fácilmente estas Propiedades de Componentes y actualizarlas. Me gustaría que hicieras crecer la imagen. También puedes conseguir que se desvanezca. Puedes conseguir que haga lo que quieras. Al igual que ella no le dio una prueba para ver si te encuentras con algún problema cuando lo has hecho. Quiero que te pongas el cursor sobre él. Me gustaría que enviaras una grabación tuya haciendo esto. Bien, entonces hay dos partes, captura de pantalla senior de vista, rondando y haciendo lo suyo Y también una captura de pantalla de esta parte de aquí haciendo algo como esto donde tienes esto seleccionado, haz una captura de pantalla de todo esto para que pueda ver tu real, estoy apuntando a la pantalla de mi computadora aquí, la imagen, pero también sobre el Inspector de Propiedades, sobre el asador y subo ambos de esos El video me gustaría obtener una captura de pantalla de enlace. Simplemente puedes subir directamente, subirlos a la sección Asignaciones. Para los que no puedes hacer videos, solo haz un antes y después de un par de capturas de pantalla de él pequeño y grande, eso va a funcionar. ¿Algo más? Captura de pantalla de tu Instancia, pequeño video tuyo en dirigir con ella, tener un poco de investigación o cómo podrías diseñar esto. Probablemente no vas a encontrar al artista Card, pero encontrarás algo como disparos a la cabeza o bios Los avatares de los usuarios echan un vistazo, vienen con algo un poco más interesante que mi caja verde con texto negro. Una vez que lo hayas hecho, compartido también en redes sociales, me encanta verlo. Asegúrate de usar el hashtag Figma Advanced, y asegúrate de ir y ayudar a otras personas Bien, disfrútalo, bumper a cualquier problema. A ver si puedes arreglarlos. Si encuentras una mejor manera de crear lo que hice ahí, ellos solo están conociendo los comentarios. Te apuesto a que hay 100 formas diferentes de hacerlo. Disfruta el aprendizaje. Y una vez que hayas terminado, te veré en el siguiente video. 147. Cómo crear una barra de búsqueda en expansión en Figma: Hola a todos. En este video vamos a hacer esto. Es Icono de búsqueda en círculo, pero mira cuando hago clic en él, se expande. El texto parece agradable. Tiene un pequeño rebote para ello. Déjame mostrarte cómo hacer esto en Figma. Para comenzar, en realidad estoy mirando mis principales estilos y componentes. Debería estar haciendo mis componentes principales aquí y luego ponerlos en los diversos documentos de diseño después, lanzar biblioteca de sombras. Bien, así que hagámoslo de esa manera. Y tengo un marco aquí que solo como marcador de posición para el tamaño que voy a necesitar esta barra de búsqueda, y tengo estas dos partes Voy a seleccionar a ambos. Entonces solo un icono, un poco de texto. Voy a bajar la opacidad de este 15 en tu teclado para bajarlo al 50 por ciento, ambos cambian a para que nuestro autolayout no tiene que ser un layout automático, pero nos gustan los autolayouts porque nos permite hacer nuestro autolayout no tiene que ser un layout automático, pero nos gustan los autolayouts porque nos permite A lo mejor tu 16, tabulador ocho. Bien, y voy a darle un relleno. Voy a usar el blanco porque aquí tengo un blanquecino de fondo Probablemente voy a necesitar una sombra paralela o una línea alrededor del exterior. Algo. La otra cosa que quiero hacer es que quiero hacerla redonda porque me gustó ese tipo de rebotar dentro y fuera de ese círculo Bien. Así que arrastra esto, puedes seguir arrastrándolo, ¿verdad Bien. Quieres que siga yendo a un número K alto para que sea perfectamente redondo. Yo sólo tecleé 100. Es mucho más de lo que necesito, pero al menos lo hace perfectamente redondo. Fresco. Lo siguiente que quiero hacer es esto, hacer este Componente ¿ Quiero hacer eso primero? No creo que importe. Hagámoslo un componente. Vamos a darle un nombre. Barra de búsqueda. Voy a conseguir el tamaño adecuado para empezar. Voy a decir que sales por ahí. Esto probablemente va a necesitar, pongámoslo en una sombra paralela. Empecemos con sombra paralela, y te voy a mostrar un trazo en un rato. Sombra paralela que 111 a la opacidad va a ser diez. ¿Eso es suficiente? Probablemente no. Sólo anciano. Entonces esta cosa ahora necesita variarse, bien, Entonces componente a Variantes, esta primera necesita ser recortada. Y debería funcionar si sé que no es recorte lo que recortará eso en un segundo Vamos a ver si la mecánica funciona. Entonces turno E, te voy a decir que la parte superior esta barra de aquí, queremos al padre de familia. Queremos que este valor predeterminado sea cuando se haga clic en él. Cambia a variante para usar Smart Animate. Y voy a usar, cuando vamos a usar. Y cuando vuelva al revés, voy a usar no hinchable Vamos a usar rápido. Vamos a darle una prueba. Así que deja nuestro MainComponent aquí. Agarra Instancia, no todo el asunto. Entonces esta parte de aquí, no se puede hacer un duplicado. Puedes, estoy en modo prototipo, conmutar el modo de diseño vectorial hacer las cosas más fáciles. Entonces vamos a darle un adelanto. Entonces todos ustedes Está funcionando un poco. El círculo está funcionando. Lo que queremos hacer para la última parte es que queremos decirte aquí la cima. Podríamos simplemente decir que esto está configurado para ocultar Comando Shift H o Control Shift H. Así que está oculto en este, pero están en este que es echar un vistazo. Así que sí, sí. Un poco funciona pero se desvanece en. Y el rebote me gusta cada vez menos. Entonces apagaremos el rebote. Vamos rápido. Y uno en el dorso blanco, también usaremos rápido. Bien, así que vamos a darle una prueba. Tú, no está funcionando para nada. Refresco alfa. Regresa a aquí, date cuenta de que has en lugar de iniciar flujo en prototipo para que podamos, al menos cuando golpeamos Refresh, vuelve a esta página aquí. Todavía no está funcionando. Fresco. ¿Qué rompí? ¿Idea? Bien, estamos de vuelta. Sí. Apenas cerrando y abriendo. Parecía arreglarlo. Estoy teniendo más problemas en este curso y normalmente tengo en Figma, normalmente es súper poco confiable y podrías encontrarlo súper confiable para ti Pero a veces hay que apagarlo y volver a encenderlo. Entonces echemos un vistazo. Lo que queremos hacer es en lugar de ocultarlo, echemos un vistazo y variante a. Volvamos a darle la vuelta al globo ocular por defecto. Dale la vuelta al globo ocular en éste. Lo que vamos a hacer en realidad es simplemente decir la variante por defecto. Vamos a ir a Design View y decir contenido del clip. Y veamos si funciona. Mantener las pruebas. Y funciona como que puedes ver que el editor hará zoom en una pixelización extraña Esto algo que nunca solía suceder. Ahora ¿qué pasa? Te apuesto a que cuando lo estás usando, no sucede. Creo que sé lo que es. Es que este de aquí nos sentamos recortando y no lo hicimos para esto, realmente no lo necesita, pero no le gusta trasladar entre los dos Echemos un vistazo. Diego. Ahora es lindo. Bien, entonces un par de cosas es que está recortada, lo cual es genial Y lo que probablemente quiera hacer en esta versión, así que Command click, en realidad, fui demasiado lejos en el vector. Quiero el componente de mi lupa pequeña y no puedo moverlo porque está dentro de un diseño automático Dice que tal vez no estamos usando el diseño automático y solo usando un marco con ellos sentados dentro solo usando un marco con ellos Podemos hacer que funcione. Bien, puedo dar click en este de aquí. Ahora bien, si el tuyo no está perfectamente redondeado aquí arriba, mente accidentalmente termina siendo la misma altura que el ancho. Por eso es así y no se ve bien del todo. Solo asegúrate de que sea cual sea la altura, es el ancho. Ahora podemos perder el tiempo con este top unos acolchados Y para tratar de ponerla alineada en el medio. Bien. Puedes dividirlo en partes individuales y dejar de jugar con eso No va a afectar al segundo. Vamos a darle una prueba ahora, se ve mejor. Probablemente necesitó un poco más pequeño allí también. Para que puedas usar básculas, la keto, voy a hacerla 0.75, pero en el tamaño correcto y meterse con mi padre Entonces voy a decir que tienes 40, pero en vez de abrazar contenidos, voy a decir que también eres un 40. Ahora, vamos a jugar con este tú por eso, pero creo que son buenos boop, boop, boop, boop Aquí vamos. Muy chulo. Escalas hacia abajo, rebota hacia abajo. A mí me gusta. Bien, un problema con el que me encuentro es ver esto en lugar de una sombra paralela, dejaré la sombra paralela Pero si agrego un trazo a ambos, porque digamos que quería ser, en realidad, pongamos un trazo, vamos a darle un color y usar mis 300 neutros. Descartar eso. Y vamos. Y al mismo de esto, voy a ir a trazo de 300. Estamos. Ahora bien, esto le da un poco de pixelización también. Puedes ver que hace algunas cosas raras con él, no puedo lidiar con eso en este momento. Pollo para ti. Hazme saber en los comentarios ya que sigue haciendo lo mismo por ti con un trazo. No puedo hacer que no haga eso en este momento. Te vas un poco más a la posición. Bonito. Lo último que haremos antes de irnos es deshacernos del trazo porque está haciendo que se vea feo. Pero también vamos a conseguir que salga de la derecha. Entonces vamos a deshacernos rápidamente del derrame cerebral. Slick. Ambos tenían menos los dos se han ido. Y lo que queremos hacer es que queremos que esté por aquí. Y vamos a previsualizar. Se. No funciona del todo, un poco empuja desde el otro lado de los valores predeterminados desde la izquierda Entonces podemos hacer no está en el componente principal. Tenemos que hacerlo en la Instancia. Necesita ver el marco padre. Y podemos decir en realidad vamos a usar bien, solo vamos a usar ese lado para empujar. Vamos a darle una cabra. Una mirada a nosotros. Bonito. Necesito alinearlo porque no se alinea del todo. Y puedes hacer totalmente un trazo como cuando realmente se hace en la app o en el sitio web. Pero para nosotros en este momento, solo hay un pequeño bicho en su Figma. Ese tipo de errores simplemente desaparecen con el tiempo cuando se lanzan y cuando el equipo se pone a actualizarlos. Pero por el momento, me encanta. Dio lo último. Lo estaba mirando y estaba a punto de terminar el video y estaba como, no puedo vivir con eso no estar en el centro. Y entonces yo estaba como, Oh, ¿lo sigo moviendo y volviendo aquí? Yo soy como, No, tú no haces eso. Lo que haces es volver a esta, ¿de acuerdo? Dices, desplázate hasta la parte superior, Encuentra tu varianza diferente. Estás tirando variante nombrada para simplemente cambiarla a eso. Entonces puedes hacer clic en él y ponerlo justo en el medio. Bien, entonces vuelve a cambiarlo a default y di magia. Ahora está perfectamente alineado. Lo último, lo último es, porque lo he puesto en mis principales estilos y componentes, necesito publicarlo. Lo que voy a hacer es que voy a conseguir esto y ponerlo en su propia sección. En ese turno es hacer una sección. Bien, voy a hacer una sección, voy a nombrarla, comando. Esto es un campo. En realidad no puedo pensar en lo que debería ser. ¿Es un campo? ¿Entra en otro? Copia ese estilo, ponlo en este. Y voy a conseguir la vista en el momento correcto. Ahí vamos. Ahora voy a publicarlo. Así que recuerda, opción tres, ya hemos hecho esto antes, ¿verdad? La opción tres lo abre, bien, Alt tres en una PC, ¿cómo bibliotecas? Vamos a publicar este cambio. Bien, ahí vamos, sólo un cambio. Y ahora con este documento aquí, ahora que quiero usarlo, debería poder o bien ir a mi turno I y escribir en búsqueda. Buscar incluso. Bien, iremos a mi panel de activos y luego voy a arrastrar esto. Voy a bajarlos un poco. Y luego te vas. Voy a tener que cambiar esto a esa variante para que se alinee muy bien. Hay algo más que tengo que recordar cómo hacerlo así que volvamos a cambiar a default. ¿A quién recuerdas lo que me refiero a hacer? Así es. Vamos a decir ascensor. Vamos a hacerlo bien. Entonces eso empieza de nuevo aquí. Y luego sale variante. ¿Está en el medio? Ahí vas en el medio. De vuelta a esa. Ahora vamos a previsualizarlo. Vigo, haciéndolo correctamente. Hacer componentes principales en nuestros estilos principales y archivos de componentes, asegurándolos con el resto del equipo. Bien, eso es en realidad ahora, unos pequeños aguinaldos al final ahí. En el siguiente video. 148. Proyecto de clase 19: ampliación de la barra de búsqueda: Hola a todos. Oye, el proyecto de clase para este video es la barra de búsqueda en expansión que hicimos en el último video. Quiero que hagas el tuyo. Muy bien, Así que aparece en los proyectos de clase, pero no hay mucho que eso. Haz la barra de búsqueda, avísame en los comentarios si te encuentras con algún problema, tal vez alguna solución para deshacerte de la pixelización, tal vez eso ya se haya ido, avísame tal vez eso ya se haya ido Así que hazlo a una grabación de pantalla de ti usándolo e interactuando con la barra de búsqueda y luego sube un enlace a la sección de asignación. Comparte en redes sociales, usa Figma Advanced. Te apuesto este. A la gente le encanta ver este en línea. Y si te preguntaron de dónde lo sacaste, dices, Oh, conozco una clase que deberías hacer. Yo me los estoy señalando. Cuando los subas, me etiquetaste en las redes sociales, y asegúrate de agregar algunos comentarios a, a otras personas. Es muy chulo. Hombre, hago clic en esto para siempre. He hecho 1,000 de estos, pero aún así se puede hacer clic. Muy bien, disfruta del proyecto de clase ahora tarea, y te veré en el siguiente video 149. Qué son las variables en Figma: Hola a todos. Oye, en la siguiente sección, bien, bueno las dos secciones siguientes vamos a ver Variables y quería videos de visión general rápida que puedas ver más a videos de visión general rápida que puedas lo largo de lo que vamos a estar haciendo para ojalá te den una mejor comprensión ahora, desde el principio, de qué variables son capaces Por lo que hay tres grupos principales de alimentos para las variables. Ahí está el primero donde está este prototipo aquí, mira esto. Cuando presiono el botón, mira eso, el número sube. Si vuelvo uno, bueno, vuelve a cero y ves el carro, cuando subo uno, sube también. Y esto apareció, Todo es muy chulo. Y no, no es un espagueti de un montón de marcos diferentes caso solo un marco con algunas variables locales que asignamos. Les decimos a estos botones que ajusten estas variables. Bien, parece un poco confuso, no te preocupes. Lo pasaremos paso a paso. Pero hay variables que podemos hacer para controlar nuestros prototipos y hacerlos lo que ellos llaman prototipos avanzados usando Variables muy CO y se aleja de los fideos yendo a todas partes tratando de conectar todos los marcos hacia Muy cool. Ahora el segundo grupo de alimentos, bien, le estoy llamando por rejillas, para casos de uso realmente Este es un caso de uso lógico basado en lógica para Variables. Haga clic en el botón que sube uno y cambia ese pequeño icono de esta variante de componente de vacío a lleno. Algo de lógica pasando usando Variables. El otro uso K para variables es usar Modos y Variables. Entonces puedo decir esta tarjeta aquí, bien, aquí abajo en mi panel Capas, puedo decir que eres el color del modo de luz. Puede ser modo oscuro, cambiado, color de fondo, colores de fuente todos actualizados. Se puede ir aún más lejos. También se puede decir en realidad quiero que el espaciado no sea compacto sino Cómodo. Vamos a estirarlo un poco. Oh, mira cómodo que es. Entonces esto es modos variables. En el último que veremos es Design Tokens, donde podemos definir muchas cosas y referenciarlas entre sí para hacer cosas como sistemas de entre sí para hacer cosas como diseño mucho más fáciles de implementar, tanto para nosotros como ampliar el diseño en Figma, y probablemente lo más importante, conectadas al lado del desarrollo de construir una aplicación o sitio web Así que usted y el desarrollador están usando Design Tokens para trabajar juntos para asegurarse de que las cosas se actualicen correctamente y sean escalables, es decir, los tokens de diseño cubrirán todos estos individualmente a medida que avanzamos. Pero quería ver si íbamos por estas dos secciones siguientes aquí y un video de visión general. Sí, el caso es que has sabido a lo largo del curso. Ya lo he mencionado antes que digo variante y variable. Me confunde ese lenguaje. Esta es una variante, bien, es un componente. Esto a variantes es la variable vacía y la variable completa tiene que ver básicamente con estas variables locales. Hay mucho para entrar en Variables. Vamos a cubrir muchas formas diferentes de usarlo para espaciar colores generales, todo tipo de variables geniales. Pero las variantes son solo estas diferentes opciones dentro de un componente. Ahí vas. Oh, la otra cosa antes de que empecemos, así como eso, hay un punto en el que necesitas la versión pro paga de Figma para usar todas las Variables Hay algunas partes que puedes hacer sin ella, algunas partes no puedes. Y si has notado aquí arriba estos pequeños hexágonos y pentágonos, sean lo que sean, iconos aparecen Bien, son Variables. Es una actualización un poco más reciente y eso es lo que representan, esas pequeñas formas ahí Variables. ¿ Irías a hacer algo, Dan? Claro que podemos hacer eso. Entremos en el siguiente video y hagamos nuestra primera variable 150. Cómo crear carrito de compras con variables numéricas en Figma: Hola a todos, Bienvenidos a este video sobre variables. Vamos a ver específicamente una variable numérica. Va a hacer esto, vamos a poder golpear más y menos en apretado nuestro prototipo. Muy chulo y una buena introducción a las variables para nosotros. Vamos a saltar y hacer que funcione. Bien, para empezar, he agarrado nuestro carrito de nuestro archivo anterior y lo acabo de poner en un nuevo documento solo para mantener las cosas separadas cierto, este es un video de actualización, por lo que las cosas pueden verse un poco diferentes y la Interfaz de Variables podría cambiar un poco, cambiar significativamente. Actualizaré el video, pero si se ve lo suficientemente cerca, obtendrás la deriva. Entonces, para empezar, lo que quiero que hagas es que voy a agarrar mi herramienta de texto. Haga clic una vez. Voy a escribir en el número cero, ¿de acuerdo? Y voy a ponerlo un poco en el lugar correcto. Puedes ir ahí. ¿Bien? Entonces lo que tenemos que hacer es definir nuestras variables, son variables locales. Lo que eso significa es que no tenemos nada seleccionado. Estoy usando escape y ahí está esta nueva opción por aquí llamada variables locales. Vamos a hacer clic en este Opciones aquí. Y vamos a crear una variable. Vamos a ver las variables numéricas en este video. Voy a darle un nombre. Puedes llamarlo como quieras. Cannonical, mío, total. ¿Cuál es el valor que va a ser? Vamos a cambiarlo. Sólo cámbialo a cinco. Y eso es todo. Bien, entonces hemos definido nuestra variable aquí. Vamos a cerrar esto. Ahora tenemos que asignarlo o aplicarlo a algo y vamos a aplicar a esto. Voy a hacer click en este cuadro de texto aquí y voy a decir Tú, mi amigo encima en el panel de texto, bien, ahí está esta opción Bien. Esa pequeña pintura hexagonal otra vez, no estoy seguro de cuál está conformada con dotnet Si haces clic en aplicar variable, solo tenemos una, que la facilita y la aplicamos y vemos lo que va a pasar con el cero. Estás viendo el cero, voy a cambiar su reloj a cinco. Emocionante, no realmente, pero al menos sabemos que está conectado. Bien, echemos un vistazo, abramos, no tengamos nada seleccionado. Haga clic en el fondo, y es abrir esto. Y puedo decir que el total es cero y verlo cambiar. ¿Ves que cambió por ahí? Están conectados, lo cual es increíble. Lo que me gustaría hacer ahora es en realidad mostrarte cómo romperlo justo mientras estamos aquí, tengo el cuadro de texto seleccionado. Así que abajo abajo aquí, esta pequeña píldora aquí que me está mostrando que este objeto de texto que he seleccionado tiene asignada esta variable llamada total. Puedo romperlo haciendo clic en esto. También puedo tirarlo por accidente, cambiándolo. Bien, si se resuelve que si lo cambio a, va, guau, simplemente me deshice de la conexión y ya está rota. Bien, no va a funcionar. Lo voy a deshacer hasta que esté funcionando. Y eso es allá atrás. Excelente. Bien, lo siguiente es hacer que este botón Plus funcione con él seleccionado. Cambiemos al modo prototipo. Esa es la gran cosa que me estaba confundiendo cuando me enteré de esto por primera vez fue que parte del trabajo ocurre en Design View, algún trabajo que sucede y vista prototipo Entonces en modo prototipo, con este seleccionado, voy a decir vamos a agregar una indirección. Ya lo hemos hecho antes. Al tocar o OnClick no importa Voy a decir que me gustaría sentarme variable en esta cosita que tengo seleccionada aquí. Lo que quería hacer es antes que nada, va a decir, Oye, si quieres hacer esto, necesitas moverlo a una cuenta paga. Voy a hacer eso de nuevo. Entonces con ella seleccionada, estoy editando la interacción, presionando el botón más. Voy a decir que quieres establecer la variable o variable. Yo quería ser el total. ¿Qué expresión quiero? Bien, así que quiero sentarme total, que es esta cosa de aquí Quiero decir eso lo que quiero hacer también, pero me gustaría total agregar uno. Acabo de escribir uno Entonces estoy diciendo encontrar el total y luego obtener el total y agregarle uno. Ahí vas. Vamos a golpear Enter en el teclado como se ve raro. Pero ahí tienes. A ver si funciona. Voy a ir a mis listas de prototipos, usar esta nueva y elegante que no has visto mucho en el curso porque sabía que obtendrían Shift Spacebar y ready city nos están mirando, continúa Bien, no tenemos un menos, pero el ego se sentaría afuera por su Variable choca cinco No tan caliente. Hagamos que vaya hacia atrás. Entonces hagamos lo mismo. Tengo este interruptor seleccionado al modo prototipo y la interacción. Va a ser un “on tap out”. Me gustaría que se fijara la variable en esta cosa. ¿Qué quiero sentarme? Yo quería controlar el total, que es esta cosa de aquí, mi pequeño cero. Lo que quiero que haga una vez que lo encuentre, quiero escribir la expresión que diga total. Yo quería ir menos uno. Golpea Enter. A ver si funciona. Barra espaciadora de desplazamiento Y vamos positivo, negativo, positivo, negativo, positivo, positivo, negativo, negativo, rodilla negativa. Ve, puede que haya un par de problemas con los tuyos. Podrías estar yendo como, sé que hay un negativo 01:00 A.M. Voy a pagar negativo muchos. ¿Me van a dar dinero? Eso lo arreglaremos en el siguiente video con condiciones. Pero por el momento está funcionando. Un par de cosas que quiero mostrarles es que me resulta más fácil operar en estas cosas. Quién es un poco de diamantes que salen una vez que has asignado la variable, en realidad son más fáciles de hacerlo cuando los seleccionas aquí. ¿Por qué son mejores? No lo sé. La cosa. Se siente muy desapegado por aquí. Es límites un aspecto diferente para cuando llegues a él porque esta es una actualización completamente nueva para el curso Lo último que quiero mostrarte antes de que vayamos es que puedes quitar todo de estos individualmente. Las variables sit. Podemos decir ninguno y se va a deshacer de él. Deshacer eso si quieres deshacerte de las variables locales. Así que recuerda en Design View, nada seleccionado bajo variables locales. Puedes ir, puedes hacer clic derecho en ellos y decir eliminar variable. Si quieres eliminarlo del texto aquí, puedes simplemente borrar esta cosa aquí, bien, digamos separar variable y lo romperá sobre el vas, agregamos algunas variables y controló algo Lo que es realmente genial de ello ya que sabemos que en el pasado probablemente hemos procurado crear prototipos y no los ha hecho caso, tan eficientemente porque no tenías que hacer frame tras frame tras frame y uniendo los prototipos juntos Entonces ahí tienes. Pasemos al siguiente video donde nos deshacemos de este menos y unas condiciones de frío. Así que en el siguiente video 151. Cómo agregar condiciones a variables en Figma: Hola a todos. En este video tenemos todos los botones add N menos funcionando, pero tenemos un problema donde irá a negativo uno a tres. Si seguimos golpeando menos Bar, vamos a arreglar con una condición que dirá, si llega a cero, no vayas más abajo. Entonces, entremos y descubramos cómo hacer un condicional. Bien, así que recuerda que nuestro problema es que podemos agregar cosas y podemos menos, pero eventualmente va a menos C. Queríamos detenernos en cero. Entonces para hacer eso, vamos a hacerlo a este botón menos. Bien, recuerda que podemos hacerlo por aquí y un prototipo. Entonces tenemos dos prototipos aleatorios y podemos empezar a trabajar en ello por aquí. Prefiero trabajar en ello por aquí usando esta pequeña forma aquí. Bien, entonces en el momento en que decimos, oye, encuentra el total que asignamos a eso, lo que quiero que hagas, quiero que menos uno de él, vas. Pero lo que tenemos que hacer es agregar lo que se llama una condición. Bien, entonces agreguemos un condicional. Conocer trabajos condicionales. Dice, si esto es cierto, hacer esta acción, de lo contrario, hacer esta otra acción. Lo que queremos hacer es decir, si el total es mayor que cero, aquí sólo estoy escribiendo cero. Quiero que hagas una acción. Lo que quiero que hagas es quiero que hagas todo esto que hicimos, la variable set aquí arriba. Voy a colapsarla para que sea más fácil de arrastrar y rejilla que se sentaría y la arrastraría aquí. ¿Qué es lo que acabamos de hacer? Dijimos que si el total es mayor a cero una vez que a menos uno fuera de él. Si no es mayor que cero, quiero que no hagas nada. No hay Stop. No hagas nada, los usos lo dejan en blanco. Entonces esto es dos que es mayor que cero, será menos uno apagado. Si es uno, también es mayor que cero. Así que vamos a menos uno de descuento. Si es cero, no es mayor que cero, así que no haremos nada para hacernos la idea. Dale una prueba adentro, baja, bien. Es porque estoy enseñando codificación y no soy muy buena coda Y subamos y bajemos y se atasca a cero. Déjanos, estoy impresionado conmigo mismo. Si eres desarrollador, estás sacudiendo la cabeza porque he pronunciado mal mucho y probablemente he hecho las cosas a lo largo del camino, pero bueno, eso es lo mejor que voy Bien, entonces esa es nuestra condición, condiciones que interesantes, Eso es un pequeño icono aquí, ¿bien? Y tenemos nuestra variable sit dentro de ella, pero solo se activa si esto es cierto. De lo contrario, haz esta otra cosa. Y esta otra cosa puede ser muchas cosas, pero si la dejas en blanco, la desactivará todo Bien, estás sobre explicándolo, Dan, entremos en el siguiente video y hagamos algo más de bondad variable 152. Cambio de variante con variable booleana: cambia el color del carrito: Hola a todos. En este video vamos a ver cómo obtener una variable para cambiar una variante y una componentes. Entonces esto es todo variante, bien, ¿qué variantes? Ahí está este carro vacío y este corte completo. Quería poder hacer click en un botón, Usar variables para ir y cambiarlo. Reloj listo, 321. Todo muy emocionante. Vamos a aprender la variable booleana, que es útil para hacer cosas como Bien, profundicemos para comenzar, dibuje algún tipo de botón de icono Vamos a necesitar la sala Variantes pero no Variables, solo dos versiones diferentes de un Components. Entonces voy a acelerar hacer este componente con dos variables. ¿Sabes cómo hacer eso ahora? Bien, entonces lo que queremos hacer es poner los componentes puestos en marcha en nuestra página de componentes Va a poner la mía en esta idea. Necesito una instancia de ello, así que voy a seleccionar esta primera, mantener presionada mi Opción en una Mac, alt en una PC, arrastrar esto. Entonces esta cosa es a los modos. Tiene dos variantes diferentes. Entonces, para un operador booleano, esto es lo que estamos haciendo aquí. On, off true-false solo puede tener dos opciones, bien, perfecto para esto Y lo que queremos hacer es nombrarlos correctamente. Entonces el naming es súper importante aquí. Así que volviendo a mis componentes aquí, vamos a abrirlo. Llamemos a este icono de un carrito. Y los dos valores tienen que ser verdaderos o falsos. Bien, así que voy a poner falso como el primero. Y cierto es el segundo. Al igual que la lógica que voy a usar, este es el gato lleno, verdadero o falso, bien, Entonces el primero es falso, no es llenar, no tiene nada en él. Eso tiene sentido para asegurarse de usar las palabras verdadero y falso. Eso es lo que hace que ese operador booleano funcione. ¿Bien? Ahora hay pocas cosas para que esto funcione, bien, así que antes que nada, no tener nada seleccionado. Vamos a un local Variables y fijemos una de estas. No te sientas tentado a presionar el botón Plus, bien, agrega un modo diferente, no lo que queremos No lo puedo deshacer. Voy a eliminar el Modo. Quiero que creamos una nueva variable. Vamos a usar este booleano, el encendido-apagado, verdadero, falso Entonces vamos, bien, vamos a darle un nombre. Deberíamos llamarlo algo así como y Cato. Mientras que a menudo usarán CamelCase. Entonces primero serán minúsculas. No habrá espacios y las mayúsculas B para denotar las diferentes partes en demasiado de una persona visual Y hago cosas así. Bien, esa es una manera terrible de nombrarlo. Probablemente cuestionarlos va a matar a todo. Pero no va a marcar la diferencia aquí en Figma. Pero si eres desarrollador, estás sacudiendo la cabeza, no puedes usar espacios, deberías usar CamelCase, el mejor de todos los casos Y el valor por defecto va a ser falso, lo que me funciona. Puede que lo tengas cierto. Depende de ti. Nosotros hemos hecho esa parte. Tenemos que asignarle eso a algo. Bien. Entonces cuando dices que has estado conectado a este de aquí y voy a decir que el gato está lleno. Sólo vuelve a verificar que eso funcione. Segundo, variables locales deseleccionadas, true, false, true, false Entonces eso está funcionando excelente. Ahora necesitamos el botón para que funcione. Empezaremos con el botón más aquí. ¿Cómo encuentro todas esas variables? Engañar a los prototipos porque eso es lo que estamos haciendo, ¿verdad Prototipado avanzado, ¿ cómo lo veo todo? Eso está bien. Tenemos que estar en modo prototipo, tan turbio. Y lo voy a hacer por aquí porque ya tengo una variable aplicada a ella. De lo contrario, stat despertó aquí. Bien, así que aquí ya me puse de barril. Ya tengo esta variable de conjunto para agregar a los ceros Voy a añadir algo nuevo. Voy a agregar un condicional. Y este condicional va a decir cosas como, ¿qué vamos a decir? Voy a hacer click aquí. Vamos a decir si el total es ahora hay algunas formas de hacer esto, ¿ verdad? Voy a decir que es mayor que cero. Pero se podría decir mayor o igual a uno. O estoy pensando para otros buenos que no sean iguales a cero, hay algunas formas diferentes de hacerlo. Voy a hacer más de cero. Lo que quería hacer, esta cosa va a cambiar porque es un poco torpe Si soy honesto. Golpea Enter o ¿ qué haces ahora? Botón Commit. Golpeé Enter. Eso funciona. Bien, entonces la condición es buscar si el total es mayor que cero, qué queremos hacer, vamos a agregar una acción que diga, establecer la variable L, ¿qué variable? El booleano, que es este Agregar al carrito. Lo que quería hacerle , quiero configurarlo en, si es mayor que cero, quiero fijarlo en verdadero hombre lleno. Ahora si le pego a Enter, va una cosa de EdX. Entonces es un poco raro. Tan cierto. Click out, ahí vamos. Y si eso es cierto, hazlo. De lo contrario simplemente no hacer nada. Excelente. Entonces vamos a darle una prueba. No va a funcionar. Oh, parece fácil. Barra espaciadora de desplazamiento Vamos a hacer un pequeño adelanto. Bien, cortes de salto. Alguien llegó a la puerta. Regresé listo para la acción. Bien, tenemos nuestro avance en marcha, viendo ahí, 321 Oye, míranos. Nosotros lo hicimos. Pero básicamente los codas decían que nadie. Pero ahí vamos. Yo, el único problema es que si bajamos a cero, no funciona. Bien, entonces lo que voy a hacer es sentarme como un reto. No va a ser un proyecto de clase completa como en un video para que ustedes lo envíen. Es más, te quiero ahora, ¿de acuerdo? Para pasar y agregar lógica a este botón menos para darle la vuelta. Bien, básicamente echa un vistazo a lo que hicimos para agregarlo, bien, y mira si puedes hacer que funcione la inversa por aquí. Si sale terriblemente mal, está bien, las variables son complicadas Lo voy a hacer en el siguiente video, pero definitivamente pruébalo ahora consigue que una cosa de trabajo de los menos van y avísame en los comentarios, ¿lo conseguiste o necesitarías ayuda? Eso está totalmente bien. Sólo me interesa ver como, si, buena suerte. Y si llegas ahí, increíble. Si no lo hiciste, está bien. Lo haremos juntos en el siguiente video. Bien, amigos míos, los veré en el siguiente video después de que hayan practicado 153. Convirtiendo nuestra variable booleana en falsa en Figma: Bien, Como ¿cómo te fue en el último video? ¿ Lograste que se apagara? Hiciste choca los cinco, bang. Buen trabajo. Si él era sus grandes mitos de Cody, está bien, lo haremos juntos Y veamos lo que estamos haciendo. Quiero poder apagar esto cuando vuelva a cero, para que no funcione. Entonces echemos un vistazo a la lógica aquí dentro ya. Bien, entonces una de las grandes cosas es como, ¿qué lo aplasto ahí ¿Dónde lo pongo? Vamos a agregar una segunda condición. Bien, para decir que si el dedo del pie es igual a cero, bien, también es un par de formas de hacerlo. Y me gustaría hacer esta acción. Me gustaría sentar esta variable, que variable es el carrito lleno a false. Después haz click hacia fuera. De lo contrario, haga esta otra acción que no es nada. Bien, entonces funciona, Dan, como la buena pregunta, que restablecerla aquí arriba. Mi uno, esto es un poco nuevo. Hay un poco de reinicio funciona. Esperando, esperando, esperando, esperando, esperando. Ahí va. ¿Seguro por qué? Pero lo he reiniciado y vamos a subir y bajemos. Sube y baja. Estamos haciendo cosas. Y lo hemos usado para activar y desactivar esto. Vas a usar tu imaginación sobre lo que puedes encender y apagar con un operador booleano, Hay como si pudieras tener algo donde es un botón. Alguien dice, me gustaría esta característica extra y podría habilitar o deshabilitar algunas otras características. O podría habilitar o deshabilitar diferentes botones en los que puede hacer clic porque ha ido al, usted un árbol de opciones. Podrías hacer clic en el, el anual allí podría mostrarte el descuento y cuánto estás ahorrando siempre y cuando sea que, si quieres usar Booleano, bien, tienes que usarlo encendido y apagado Hay otras cosas que puedes hacer, que haremos en un rato. Pero si, vas, eso es todo. Vamos a saltar en el siguiente video. 154. Cómo crear una ventana emergente superpuesta en el panel de acción variable de Figma: Hola a todos. En este video vamos a presionar el botón Plus y puede aparecer un pequeño mensaje, ya está listo. Eso es lo que vamos a hacer. ¿Bien? esto en esta sección aquí porque ya lo hemos hecho antes, ¿verdad? Estás como, oye, eso es solo una superposición totalmente es con esta nueva característica Variables aunque han tirado parte de esa funcionalidad para que puedas hacerlo en dos lugares. Al principio pensé que tal vez vamos hacer una variable para hacerlo. Y en realidad no, solo usan un poco la misma interfaz para poder hacer variables, condicionales, y algunas de esas cosas de navegación que normalmente hacemos con los fideos donde los arrastramos y los conectamos Entonces déjame mostrarte que todos estamos claros, ¿de acuerdo? Oh, una cosa así como olvidé mencionar el inicio de este video, necesitas estar en modo prototipo para que esto funcione. Probablemente lo arreglarás, pero olvidé mencionar que al ser prototipo para estar sumando toda esta indirección, obtienes el trabajo en Lo siguiente que quería mostrarles es un poco de agrupamiento en acciones normales que hacemos en esta pequeña cosa desplegable Entonces solo para mostrarte que están pensando que son lo mismo cuando los comandos de función como cualquiera de ellos son diferentes son los mismos. Y déjame mostrarte lo que quiero decir es que tenemos, si hago click off, tenemos estos dos pequeños íconos. Ese es un icono condicional, esa es la variable que se ha aplicado a este botón. Es sólo una acción. Hemos hecho muchas otras cosas. Dije las variables locales, las asignamos a los botones, pero en realidad no tenemos que hacer eso para usar este trozo aquí Entonces lo que quiero, como ordenado el principio ahí es cuando golpeo Plus, me gustaría que hiciera cosas no conjunto de variable, no un condicional. mí me gustaría hacer algo que ya hemos hecho antes en el pasado. Entonces, en lugar de arrastrar un fideo hasta aquí, bien, y conectarlo, en realidad podemos hacerlo Así que regular viejo Open Overlay, voy a decir lo que me gustaría hacer. Abre el mensaje de éxito. Quiero disolverlo. No quieres que entre y salga fácilmente y luego se quede sin bienes raíces. Desplazarse hacia abajo últimos 100 días terminó probablemente Manual. La cosa se interpone un poco en el camino, pero puedes arrastrarla porque quiero que aparezca ahí y los cierre dando clic afuera Perfecto, vamos a darle una prueba Shift Spacebar. Y cuando hacemos clic en esto, oye, mira ese pequeño éxito agregado para cortar a Diego. Entonces es como que son las cosas que hemos estado haciendo pero ahora en un lugar ligeramente diferente, solo para que sepas, definitivamente podrías saltarte eso e ir a dibujar esa. Bien, y agrega una superposición como lo hemos hecho en el pasado. No hay nada mejor o peor. Yo sólo sé cuando primero. Entonces estoy como, ¿Estoy haciendo variables para Overlay abierto? Sepa, solo resulta todas estas cosas se pueden asignar a este botón. Variables, condiciones y superposiciones abiertas antiguas regulares. Entras diciendo que hay otras cosas que podemos hacer en las otras acciones a las que puede navegar. Él va a página diferente. Podemos regresar, desplazarnos a en la página, abrir un hipervínculo. Bien, hay muchas otras cosas que podemos hacer ahí también. Bien, ahora, ese es el final del video. Te veré el próximo. 155. Modos de luz y oscuridad con colecciones y variables de color en Figma: Hola a todos. En este video vamos a mirar el modo luz y el modo oscuro. ¿Bien? Significa que podemos seleccionar un fotograma y decir Tú, amigo mío, ahora eres el color del modo de luz, tu modo oscuro. Y va y lo cambia todo dentro del marco. Para hacerlo, necesitamos aprender qué es una colección y qué es un Mode que son particularmente difíciles. Así que vamos a saltar y hacer que esta genialidad suceda. A mí me encanta. Modo documento, ánimo oscuro, modo de luz. Para empezar esto, solo tengo un par de fragmentos de textos. No pasa nada en una imagen, ¿de acuerdo? Lo primero que quiero hacer es no tener nada seleccionado. Es bueno para nuestras variables locales. Y nos vamos a dar cuenta que ya tenemos nuestra primera colección. Estamos hablando de colecciones de Modes. Colección solo piensa en un grupo de diferentes roles en este momento, tenemos este llamado colección uno. Voy a renombrarlo y simplemente llamar al general mi cajón de basura de cosas que quiero. Pero hay una colección más específica que quiero hacer con los colores. Haremos otra para tallas y un poco. Esas son todas colecciones diferentes. Entonces voy a decir vamos a crear nueva colección. Se llama éste, colores americano, Nueva Zelanda D. Bien, así que ponemos usando todo y vamos a crear una variable. Y vamos a comenzar con esta variable de color. Bien, así que solo para reiterar, tenemos Colecciones, ahora tenemos a una general que estaba haciendo un total y cambio de Alcott Y ahora tenemos color y terminarás con algunas colecciones diferentes. Voy a ir a ésta. Vamos a nombrar este primer color. Y cuando estás nombrando estos, si vas a Usar variables para cambiar los colores Y es un poco como estilos. Hacen mucho de lo mismo y puedes usar la misma convención de nomenclatura Entonces este va a ser mi color primario, primario, pero vamos a hacer ticks primarios. Bien, entonces estos son mis textos primarios llaman qué colores van a ser. Voy a usar un color oscuro. He guardado este verde para que podamos verlo cambiar. Entonces déjame usar un gris oscuro. Bien, entonces ese va a ser mi valor para el texto primario. Ahora, ya hemos hecho Colecciones. Sabemos qué son las variables, pero ¿qué es este botón? Porque sigo pinchándolo por accidente y obtenemos esta categoría extra. Estos son los modos, modo, un modo a este de aquí va a ser mi modo de luz. Y aún no puedes tabular a través, pero este de aquí va a ser modo oscuro. Ponerse emocionante. Bien, entonces aquí voy a decir que podríamos enviar mensajes de texto, solo estoy usando este, definición, Texto y voy a aplicar a este texto todavía, pero hay dos modos diferentes entre los que puedo cambiar. Bien, voy a tener modo luz y modo oscuro. El modo de luz solo va a ser ligero Texto E. Y esa es la primera parte. Entonces Colecciones, diferentes modos, modos pueden ser muchas opciones diferentes. Podrían ser cosas pequeñas y medianas, bien, en términos de tal vez espaciado y relleno. Así que vamos a cerrar eso. Y lo que quiero hacer es primero aplicarlo. Entonces voy a decir que tienes el color de relleno de, voy a agregar mi panel de Estilos y es un poco tropezado con todos los estilos de tiempo Todavía no se han separado muy bien. Y esto podría verse diferente en el tuyo, pero ahí vamos. Textos primarios, boom, tú también tomas primaria. Agregándolo a las cosas que quieres poder cambiar entre modos, entonces ¿cómo lo cambias? Entonces se aplica, pero está en modo luz, ¿ verdad? Entonces ese color más oscuro. Cómo conseguimos que vaya a ese color blanco, modo oscuro, solo selecciónelo, vaya al panel Capas. Las capas tendrán aquí este pequeño icono. Bien, podemos cambiar el Modo Variable que solo aparece una vez que tienes modos. Ahí está este color y CAD 3D. Modo oscuro, emocionante a, hazlo más emocionante. Entonces voy a volver a salir de eso. Lo que podemos hacer es que voy a hacerlo debería haber hecho esto antes de empezar. Permítanme convertir rápidamente esto en un cambio de diseño automático. Y voy a hacer otro autolayout que combine estos Aquí vamos. Porque quiero que se juegue con el espaciado y esas cosas. Muy bien, así que tenemos esto, podríamos hacerlo a todo este marco padre y cambiarlo y mirará a través todo lo que tenga un estado de ánimo aplicado e intentará cambiarlo del modo perro leitmotif Ir los padres seleccionados, que en mi caso se llama marco para que sea frío Tarjeta y mismo lugar. Ve a tu panel Capas. Ahí está ahí. Bien. El color y todo lo que hay dentro de aquí debería ir de modo oscuro así. Hagámoslo aún mejor. Queremos que los antecedentes cambien también para que podamos leer ese texto. Entonces lo que vamos a hacer son dos cosas. Escapemos, escapemos, escapemos, para que podamos ver variables locales. Aquí sólo tenemos un poco de color. Agreguemos un modo no otro. Eso es lo que quiero hacer clic cada vez. Es éste de aquí abajo. Agreguemos otra variable de color. Así que estamos llegando, bien, hemos aprendido número de color booleano Bien, vamos a darle un nombre a este. Entonces vamos a hacer Interface de cara. A veces se llama superficie, bien, estoy llamando a la mía Interfaz primaria. Bien. Puedo usarlo una vez, pero tengo dos opciones diferentes para ello. Voy a elegir morado oscuro para mi modo de luz. Tenga en cuenta que es para el modo oscuro. Voy a usar solo el blanco y este va a ser más oscuro. Ahí vamos a diferentes opciones que está muy bien contrastada con eso, y el texto está muy bien contrasta con el fondo la interfaz. Entonces vamos a aplicarlo. ¿A qué lo aplicamos? ¿ Hacerlo a este marco de autolayout Digamos que tienes un relleno de fondo de usar los pequeños símbolos y Picker Bien, yo uso Interface, genial, pero vamos a darle unos 16 por 16 padding. Bien, ¿y estás listo? Bien. Podemos decir que Tú, amigo mío, vas a ser panel de Capa. Todo esto dentro de él va a ser modo oscuro. Prepárense. Estoy emocionada. ¿Estás emocionado? ¿A mí? Son cosas nuevas. A mí me gusta, súper impresionante. Se pone aún mejor. Vamos a deshacer eso. Lo que pasa es que aquí se pone por defecto. ¿Puedes ver que simplemente por defecto es lo que sea el primer modo Entonces está por defecto al modo luz, cualquiera que sea el primero Bien, entonces en realidad es ir a Modo aplicar a ti. Bien, entonces 52, estos son tres de estos. Y qué pasaría si pudiera agarrar todo el fotograma y solo decir capa es ahora Modos Oscuros. Manera, buena manera. Bien, para que las cosas para recordar sean variables locales. Ahora tengo Colecciones. Tenemos más de uno. Teníamos colección que nos renombraron general y vamos a esta nueva llamada color Editamos una variante y le agregamos un Modo extra. Entonces Colecciones es básicamente grupos, Modos, cosas que podemos cambiar entre despertar dan al objeto, como en este caso, un color, uno, nombre, un token para decir que eres Texto primario, pero tiene otras funciones que podemos alternar entre A partir de ahí vas y aplicas esos colores a las cosas a las que quieras aplicarlo. Y luego el marco padre, ya sea el cuadro de texto, el autodiseño que está justo encima de él, o el que O ahora funda todo el teléfono. Luego puedes ir a Capa y luego cambiar entre los diferentes modos. Bien, buen equipo de trabajo. Hagamos otra versión de eso en el siguiente video. 156. Cómo cambiar el espaciado con variables numéricas en Figma: Hola a todos. En este video vamos a usar lo mismo que hicimos en el último video cuando estamos usando Modos y Colecciones. Pero vamos a hacer esto para espaciar. Lo que vamos a poder hacer es que por aquí se usa no solo modo oscuro, modo claro, que es genial, sino que podemos ir a compacto versus Espaciado cómodo. ¿Y puedes ver que el espacio entre todo cambia? Muy similar a lo que acabamos de hacer con los colores. Pero vamos a usar Variables numéricas y cambiar el relleno alrededor del exterior, ¿verdad? Vamos a saltar y te voy a mostrar cómo hacerlo. Eso es demasiado apretado. Sé que está bien empezar, necesitamos nuestras colecciones. No tienen nada seleccionado. Variables locales. Vamos a crear una nueva colección. Llamemos a esto espaciado uno. ¿Bien? Y vamos a crear una variable. Vamos a usar una variable numérica porque estamos tratando de controlar los números, no los colores. Estamos tratando de cambiar el espacio entre las cosas, ¿de acuerdo? Y eso se hace en píxeles, que se hacen los números. Entonces mi primero va a ser mi médium. A menudo con espaciado, se hace en estas como más tallas de playera. Entonces medianos, pequeños, extra pequeños, extra grandes. Deberías ir y crearlos todos. Sólo voy a crear el que necesito ahora mismo. Sólo voy a hacer medio. Se puede escribir Medio. Eso también está bien. El valor para la talla va a ser 16, ¿bien? Y voy a tener dos modos. Podría ser el Modo móvil. El diferente espaciado entre el móvil y el escritorio. Podrías decidir que es común decir algo como el Diseño Compacto, bien, versus Cómodo. Esa es una forma bastante común de espaciamiento. Entonces mi Compacto va a ser, digamos 16. Y cuando se pone cómodo, se esparce un poco y es un poco más grande Entonces vamos a aplicar eso. Entonces digamos que ya tenemos esto. Es un diseño automático en este momento, solo tiene un tamaño aleatorio para alrededor de los lados. Lo que voy a hacer es en vez de decir que este espaciado aquí es donde está 16, ves esta pequeña opción aparece aquí. Puedo decir que eres variable. Ahora te voy a enseñar a médium. Ese es mi espaciado medio. Yo hice el espaciado equivocado. Está bien. Voy a hacer esto es sobre tu médium. Este espacio entre cosas está establecido en diez en este momento. Aplicar variable. Cuando este es estos puedes dar click en el pequeño icono. Este de aquí, necesitas obtener Dropdown y hacerlo. Estoy bien con eso. Entonces vamos a aplicar el medio. Así que pega eso. Tengo otro ahí dentro. Este de aquí tiene que ser ojalá porque me gusta usar esto en la página uno. Ojalá eso se apliquen las variables allí pronto. En el momento en que no puedes y vas a agregar variable de espaciado medio, medio en todas partes. Ahora vamos a cambiarlo. Hay cambiarlo a podrías hacerlo al marco padre y es debido a todo el teléfono y decir realmente acceder a la capa de miembros, vamos a ir al modo claro montaña oscura. Pero mira, también hay espaciado, modo oscuro, modo claro, pero el espaciado está ahí. Bien. Está por defecto a lo que sea que fuera el primero, que es convecto, voy a por Voy a cambiarlo para ir a Cómodo listo, 24 pixeles en todas partes. Es descomunal. Vamos. Bien, Entonces solo significa que probablemente puedas ir por Probablemente obtenga escritorio móvil luego Compacto y Cómodo. Y dependiendo de tu caso de uso, pero como hay un Modo, puedes empezar a ver, Mira, estoy en este marco padre aquí. Puedo ir Cómodo. Puedo cambiar esto, pero puedo decir en realidad quiero Compacto, no quiero que sea modo ligero, que no está funcionando. ¿Por qué no funciona? Ah, o yo hice esto frente a ti estuviste fuera de cámara, pero este marco de aquí. Bien. Dije que puedes hacer cualquier marco. Bien. El marco padre, podemos hacerlo a este específico. Tengo que cambiar esto y está sobrepasando lo que este está tratando de hacer Este autolayout aquí probablemente sea un modo demasiado oscuro, así que no importa lo que le haga al padre Entonces lo voy a poner a auto para que siga a los padres. Ahora debería poder escuchar mucho más Modo Oscuro en el dimensionamiento Cómodo como CO. Ahora lo siguiente es, es que agreguemos otro de estos porque como ¿por qué tenemos más de uno? Es solo que te da algunas unidades de espaciado porque en el momento que tenemos medio, agreguemos otra variable de color, lo siento, variable numérica. Y vamos a tener ese pequeño, ¿de acuerdo? Y éste, va a estar como 8.16. Podemos usar ambos en nuestro diseño. No tenemos que elegir uno u otro. Puede cambiar el orden de las capas arrastrándolo hacia arriba. Bien, no sé por qué tiene que ser el top. Bien, entonces lo que voy a hacer es que veas que espaciado aquí es demasiado grande. Entonces voy a seleccionar esto y decir Tú, amigo mío, eres una variable diferente. Tú eres la variable pequeña, que en el caso de nosotros, porque estamos en la versión cómoda, se dice a 16 Entonces para este de aquí, quiero usarlo a la versión pequeña. Entonces en este diseño ahora este exterior se establece en medio. Este interior se sienta demasiado pequeño. Podrías tener una extra pequeña, probablemente tendrás una K extra pequeña, que podría ser píxeles completos y solo puedes aplicarla donde la necesites. Pero tienes dos opciones o dos modos. Para que más adelante, cuando alguien vaya y lo cambie, puedan ir Cómodo a Compacto. Y ahora que baja a ocho, eso baja a 16 fueron apropiados. Bien, eso es. Te veré en el siguiente video. 157. Qué son los tokens de diseño en Figma: Hola a todos. En este video vamos a discutir Design Tokens. Se habla mucho en este video tratando de explicar cuáles son cuando los usamos. Las principales razones por las que los usamos, la diferencia entre Variables, estilos y Tokens de Diseño. Hay mucho brazo ondeando que no puedes ver y yo explicando, pero ojalá sea útil para prepararnos para el siguiente video donde realmente empezamos a hacer algunos de los tokens de diseño Pero comencemos. Vamos a hacer que los brazos ondeen. Vamos. Comencemos haciendo un token de diseño simple. En el momento en que tengo este diseño solo básico aquí, estoy codificando duro el color Este color tiene un trazo que la parte inferior de la pantalla. Esta caja en la parte superior de aquí tiene el mismo color. Eso no es bueno porque después tengo que ir y actualizar todos esos colores cada vez que quiero hacer un cambio. Entonces necesitamos algo para representar ese color. Y ahí es donde los tokens de diseño pueden ser útiles. Y ahí es donde el token de diseño es útil. Ten en cuenta, ya hemos hecho esto un poco sin nada seleccionado Vamos a las variables locales. Vamos a crear una variable, una variable de color, voy a llamar a la mía Karla primaria Voy a darle este color. Voy a ir a aplicarlo. Va a agarrar esta caja en la parte superior de aquí. Y voy a decir, no quiero que estés codificado duro. Me gustaría que usaras uno de los estilos. No es un poco un estilo. Estilos de aquí abajo en los círculos. Y las variables mentes de saltar por ahí, dejaron de saltar. Ahí está en esta plaza, bien, básicamente lo mismo. Aquí vamos. He aplicado mi variable de color, también conocida como un token de diseño a esta caja para que luego sea muy fácil ir y actualizar el color, especialmente cuando tengo múltiples instancias de la misma cosa. Puedo decir estilos locales, diseñas token o esto en realidad porque hemos usado el token en lugar del número real, es muy fácil ir y actualizar. Como, Oye, es que es más a eso, pero básicamente es lo que es. Esto de aquí es una ficha que representa esto. Usamos esto en lugar de ese número como un token de diseño de marcador de posición, marcador de posición variable, todos hacen lo mismo Representan otra cosa que guarda información dentro de ellos. Y un alcano está sosteniendo color, creamos otro token de diseño, bien, este podría ser un número, y este va a ser border-radius, y vamos a usar ocho Ese es otro tokens de diseño, uno realmente simple. Nos volveremos más complejos. Pero ahora le estás pidiendo a un diseño tokens solo variables. Son totalmente. Si se trata de una variable que controla el diseño de algo así como Espaciado en relleno y token de diseño de fuente y color, también conocido como una variable, Lo que no es un token de diseño pero sigue siendo una Variable. Piensa cosas así. Tantas más variables en el mundo a la hora de especialmente codificar. Esto lo hicimos antes en el curso, es mirar nuestras variables locales donde fuimos a General. Bien, el total es igual al valor cero. Eso no es un token de diseño. ¿El carrito está lleno? ¿Falso? No, eso es un poco de lógica que usamos para crear nuestro prototipo avanzado. Es una variable, pero no es un token de diseño. Design Tokens es una forma de que nosotros como diseñadores nos guste agrupar las cosas que pasamos todo el tiempo haciendo, ¿de acuerdo? espaciado de fuentes, el color enfoca lo que hacemos con las variables, pero tu desarrollador, solo llamaremos a todo lo que haces no importa si es color o fuente, probablemente solo una variable y podría sacudir la cabeza hacia ti volviéndote elegante Design Tokens. Es solo la Variable y supongo que es que define nuestro mundo. Así que hemos hecho algunos Design Tokens antes, menos buen espaciado. Sigue siendo el token de diseño, esto representa ocho píxeles. Entonces sam es nuestro token. Usamos eso en lugar de esto para que sea fácil de actualizar, tanto en nuestro diseño Figma en donde nuestros diseños se están desplegando en un sitio web y una aplicación que tu desarrollador también está usando este nombre de variable para que las cosas sean consistentes Entonces, ¿por qué los usamos? Un poco tres razones. Yo creo. Una es que deja las cosas mucho más claras si estoy usando border-radius en mi, tanto en mi diseño como cuando estoy codificando el sitio web Así que construir CSS border-radius es mucho más fácil de entender y lógico, tiene sentido La segunda razón es para grandes diseños complejos, necesitamos este tipo de estructura para que no solo estemos usando los valores de color y los valores de píxel en todo y nos pongamos difíciles de manejar Ideal para diseños grandes. Y probablemente lo más importante es cuando se está trabajando en estrecha colaboración con el equipo de desarrollo. Esta es probablemente la razón más importante para usar Design Tokens, porque lo que podemos hacer es que ambos podamos estar de acuerdo, ambos lados, Diseño y Desarrollo, acordar una convención de nomenclatura para que no estén tratando traducir lo que has llamado color uno a lo que ellos llaman color primario Si también usas color primario, todos sabemos de lo que estamos hablando. Eso va a ser mucho menos problemas de implementación. Y más adelante cuando estés tratando de actualizar el diseño, puedes decir, Oye, Kayla, perdóname, tiene que ser este otro color y te desarrollas porque mi problema como una actualización que porque está escrito aquí mismo, color primario Entonces, ¿por qué no solo usamos estilos como los que tendríamos en el resto del curso Los estilos están bien, bien, aunque están muy centrados en Figma No hay nada realmente malo con ellos. La gran ventaja de usar digamos, variables como Design Tokens. Puedes usar estilos como tokens de diseño siempre las convenciones de nomenclatura estén bien, bien, porque ya has visto que antes hemos hecho color primario y hemos obtenido un valor de color que un desarrollador sabrá exactamente a qué te refieres Pero cuando se trata del término Design Tokens, muchas veces nos estamos refiriendo a variables. Y nos gustan más las Variables que los estilos, principalmente porque podemos hacer dos grandes cosas que realmente van a hacer en el siguiente video, mucho platicar en este video, sé que me dejen simplemente golpear el suelo, pero necesito poner el escenario un poco. Echemos un vistazo a nuestro que estamos haciendo en el último video, lo que no podemos hacer con los estilos ya que no podemos hacer estos modos. Compacto, Cómodo. Por eso Design Tokens, también conocido como un mejor ajuste con las variables. Porque tenemos estos modos diferentes, lo mismo con los colores que hicimos. Bien, tenemos modo luz y modo oscuro, mientras que en Estilos tendríamos que ir ticks luz primaria y luego tener otro listado que diga ticks primario oscuro o es esto solo podemos tener uno y estos dos modos variables diferentes. Sí, la razón por la que usamos variables en lugar de estilos es que puedes obtener variables para hacer referencia a otras variables. Eso lo haremos en un ejemplo que viene. Pero los estilos son un poco escribieron lo suyo fue que las variables pueden vincularse todas y conseguir esto un poco como la acción en cadena Diseñan sistemas. ¿Se puede obtener una manera bastante complicada y bastante compleja en Variables referenciadas a otras Variables, quienes hicieron referencia a otras variables? Sin embargo, también es el poder secreto. Hombre, has hablado un poco, Dan, lo he aclarado para nada? Probablemente no. Vamos a hacer algo en el siguiente video y vamos a hacerlo un poco más de sentido Ojalá, no deberías ver lo mucho que estoy saludando que estoy haciendo ¿Sientes que estoy saludando para ayudar a explicarlo? Bien. De todas formas, entremos al siguiente video y de hecho hagamos algunas cosas, ponlo en práctica. 158. Cómo crear tokens de diseño en Figma: Hola a todos. En este video vamos a hacer realmente algunos tokens de diseño. Nosotros, bien, vamos a comenzar con un Design Tokens de primer nivel, agradable y sencillo Ya lo hemos hecho, y luego le agregaremos un poco más de complejidad y le mostraremos el bono de valor de esa complejidad. Veremos algo así como algunos tokens de diseño raíz y alias esos tokens de diseño. No huyan. Si todo suena demasiado duro, no lo es. Lo trabajaremos paso a paso. Empecemos a hacer algunos Tokens de Diseño. Vamos a hacerlo. Bien, entonces el primer nivel, no tengamos nada seleccionado variables locales. Ya lo hemos hecho antes. Vamos a decir, vamos a crear una variable. Déjalo colorear, vamos a darle un poco de nombre de color, bien, voy a llamar al mío color primario. Y no hay que llamarlo color primario. Dependerá de lo que hayas trabajado con el desarrollador y de lo que estés llamando cosas. A veces no voy a usar guiones y voy a usar algo como esto llamado CamelCase, donde es una minúscula Eso con y luego mayúsculas para todos los mayúsculas para Algunas personas usarán guiones bajos, pero nunca ninguno, solo espacios completos lenguaje de codificación no le gustan los espacios, así que aquí habrá algo. Iremos con guión de color primario. Bien, le vamos a dar el número que un color que quiero, que es mi verde. Genial, yo un poco de primer nivel, token diseño realmente simple. Lo va a aplicar. Tú y yo tenemos este seleccionado en realidad lo que podemos simplemente seleccionar todo aquí en mi pequeño autolayout y decir en esta selección es este color Se ha utilizado dos veces, tanto en esta caja superior como en la línea de abajo. Entonces voy a decir que voy a cambiar todo lo que use este color en mi selección. Para los círculos que son estilos cuando las heces saltan por ahí sin una buena razón. Volver a la cima. Oh hombre. Voy a ir al que es un cuadrado, bien, eso es usar una variable aka design token. Genial, también los voy a usar en mi botón. Bien, este botón de aquí va a estar usando ese estilo. Y eso es genial hasta que decidas que en realidad este botón necesita ser un color más oscuro o más claro, quieres cambiarlo. Así que ahora estamos atrapados con una opción muy limitada. Podemos pasar y cambiar el color primario. Y podemos decir en realidad quiero que sea más oscuro, pero no quiero esto arriba y abajo solo el botón. Necesito que se cambie algo realmente específico. Entonces lo que voy a hacer es que voy a borrar esta sólo para aclarar las cosas. Y voy a nombrar mi colección. Voy a renombrarle este. Esto se va a llamar mis colores de raíz. Así que en realidad no voy a usar por colores de raíz. ¿Por qué los creamos? Es para que pueda crear otra colección llamada alias colores que van a hacer referencia a esos y veremos por qué en un segundo. Así que ve a colores de alias. Vamos a decir crear una variable de color, y esta va a ser botón primario. Podríamos colorearlo aquí, que en realidad es mucho mejor ir en realidad haga clic derecho, me voy a sentar esto, crear un alias. Voy a ir a mis bibliotecas, bien, y voy a buscar mis colores de raíz. Voy a decir que eso está conectado con ahí. Bien, Entonces botón se refiere a éste. Éste se refiere a ese número hexadecimal. El segundo nivel ahora, ahora la razón por la que esto es útil es porque eso es más específico. Bien, esto es lo que ellos llaman semántica. Cuando lo están escribiendo, donde estás describiendo lo que el botón no quiere. El botón parece que no quieres llamar a este botón verde. Así es como botón primario, y es hacer referencia a este color. ¿Por qué es útil esto? Es para que puedas tener algunos colores de raíz que tenemos color primario, déjame agregar algunos aquí. Voy a acelerar esto. Así que tengo estos colores raíz que potencialmente van a usar en todo el sitio. Y nos hemos arreglado, no queremos aplicarlos a cada cosa porque ¿qué pasa cuando necesitamos cambiarlos? Bueno, podemos hacer es tener esta opción de alias. Podemos volvernos locos con este alias. Podemos tener tantos casos de uso diferentes, poco versiones semánticas de esto Podemos decir botón primario, este botón secundario que se usa solo en el checkout, solo si hay un error. Se puede obtener bastante específico. Pero puede hacer referencia a este color que puede actualizarse fácilmente y un poco derramarse a través del sitio web Así que vamos a crear uno que sea realmente específico. Entonces este va a estar bien. No los pondrías tanto tiempo, pero puedes ser bastante específico. Y puedo decir, quiero establecer este alias en, quiero usar mis bibliotecas, quiero usar las cuadradas y voy a estar usando mis diferentes pesos, bien, así que solo tengo unos pocos colores raíz, pero puedo tener tantos de estos alias es que necesito para sitios realmente complejos Voy a decir que necesito a este tipo y voy a decir Tú, mi amigo lo estás usando. No los colores de raíz. No uses eso. Quiero usar mis alias Entonces puedo decir botón en Tarjeta para micrositio. Es muy específico. Es muy fácil saber qué hacer con él. Y más adelante, si vuelvo a este enorme sitio web en expansión, se ha usado un montón de diferentes alias y digo, chicos, sólo vamos a actualizar ese Pueden ir a los colores de raíz y decir en realidad eso es fácilmente cambiable Bien, pueden pasar y cambiar esto Y sólo han tenido que actualizar este pequeño lugar. Pero para todos los alias que lo hacen referencia, también se actualizarán De igual manera, si deshago todo eso, si vuelven y dicen en realidad, queremos actualizar solo este botón aquí, no tengo que ir y actualizar el color raíz se volvió porque todo lo que necesito hacer es encontrar el alias que lo controla, que está escrito. Bien, puedo ver aquí tanto en mi diseño en Figma, ese botón en curva para micrositio Bien, puedo ir y encontrar eso si soy desarrollador, ya sea iOS, Android, web, y dependiendo de dónde se implemente, o tal vez se esté implementando en todos ellos. Pueden ir y encontrar solo este botón. Averigua dónde está. En su biblioteca. almacenando sus Variables en alguna parte. Vas a protagonizar el tuyo y hay opción de variables locales en Figma. Y puedes ir a buscar ese alias porque sabes el nombre del mismo. Lo puedes encontrar y realmente decir, Bien, quiero cambiar esto para terminar en la Variable. Quiero que vaya a donde? Pasemos a esta versión más ligera o a la versión Docker. Me da un poco de control sobre lo que estamos haciendo aquí para estos pequeños casos de uso de instancias Pero hay una buena visión general grande de los colores de raíz para que si la marca cambia, tal vez sea una prueba de usabilidad y encuentres que este naranja es un color permanente, justicia a la luz. Y has hecho algunas pruebas en la relación de contraste. Solo un poco, te metes en los AA, eres genial y todo se derrama en todo el sitio al que se hace referencia Esto lo aliased, ellos llaman a esto al mapeo, donde tienes un grupo de variables mapeadas a otro grupo Podrías tener entonces un tercero que está mapeado al alias que está mapeado a otra raíz. Nunca he construido nada tan complejo, pero habrá gente que tenga y haga todo el tiempo. Ahora otras cosas que puedes hacer aquí en Figma para hacer las cosas un poco más fáciles y verás que otras personas lo hacen es antes que nada, nombrar con primaria de color de corte Recuerda que tenemos CamelCase, minúscula, superior, superior sin espacios Entonces esa es una forma de definirlo en otra es que hemos usado 500 para el tipo de color primario. Se le puede llamar color primario. Éste de aquí. Color de la luz primaria. Este de aquí, color primario, más oscuro. No importa siempre y cuando sea consistente, como dependiendo de lo usen los desarrolladores para codificar cosas, el framework que usen K tendrá una especie de normas similares que normalmente usan para nombrar cosas, olvidaron cuáles son esas y profundiza para tus diseños o viceversa. Haz que usen lo que te gusta usar en términos de coloración. Encuentro que es más fácil elegir lo que sea que usen los desarrolladores. La otra cosa que puedes hacer es que voy a deshacer eso, es que en realidad puedes agrupar las cosas aquí en Figma. Entonces en lugar de usar con estos guiones, puedes decir tú, tú sosteniendo Shift. Estoy tratando de mantener a Shift. Y al igual que dibuja estos, puedo hacer clic con el botón derecho en ellos. Vamos a hacer algunas cosas raras. Así que agrupa con Selección, realmente no puedo decir qué es. Ojalá haga clic con el botón derecho funcionando mejor para usted. Sí, Grupo nueva selección, genial. Entonces en esta ruta colección Variables, puedo crear un grupo y esto va a ser frío. Primaria Karla. Aquí, todo lo que realmente necesito es 300 tab, tab, tab, tab, tab, tab, tab, tab no funciona. Metazoa. No está funcionando por el momento. K y tú en 700, esto podría estar a solo una distancia ordenada. Y te voy a mostrar porque lo verás cuando otras personas estén haciendo tutoriales o estés trabajando con el trabajo de otras personas. Esa colección, una colección. Puedes tener un grupo. Y solo ayuda a ordenar a veces algunos colores de raíz un poco muy grandes, especialmente cuando te metes en los alias con es como un bazillion, cosas diferentes pasando diferentes ¿Bien? Los agrupa en bordes, en botones, en tarjetas. Bien, es una forma de recogerlos todos juntos en lo último y por qué se vuelve cada vez más potente, de lo hablamos en el último video es que los colores raíz pueden tener dos modos. Entonces puedo tener más variables, no en el equipo adecuado. Ya hemos hecho modos de color antes, ¿verdad? Podemos tener un modo de color claro y oscuro. Ambos están haciendo referencia al color secundario, pero podemos tener un modo claro y oscuro Necesito mover el mío a un plan de pago, pero entiendes la idea. Puedes construirlos como si acabáramos de comenzar y tenemos un Design Tokens razonablemente complejo en marcha. Cómo te sientes que hay una barrena demasiado más allá en este video, seamos felices Está hecho y un poco tengo una idea y hagamos otro ejemplo En el siguiente video, consigues una taza de té, relájate, toma un descanso, y te veré el siguiente video. Encontrándolo un poco difícil. Es una especie de HOD y atado a explicar RPM haciendo un buen trabajo En fin, entremos en el siguiente video y hagamos más. Otro ejemplo, ayuda a la respiración profunda 159. Creando tokens de diseño de espaciado y radio en Figma: Hola a todos, hagamos algunas fichas de diseño más. Vamos a ver el dimensionamiento y el radio fronterizo. Y este básicamente el mismo que el último video, pero el ejemplo diferente de cómo pujar esto en. cubriremos algunos temas más solo para ampliar lo que sabemos. Pero básicamente vamos a crear algunas raíces icings que tiene algunos valores Vamos a hacer referencia a ellos en otra colección usando alias para que sea más fácil ser realmente específico, bien, border-radius para una Carta usa el El medio pasa a ser de ocho píxeles, pero algo un poco completamente diferente Este relleno para esta tarjeta aquí usa el mismo tamaño. Los valores de dimensionamiento base son tamaño de raíz de grandes, dos cosas diferentes que hacen referencia a la misma colección de rutas Dejándonos ser bastante específicos, pero también dándonos un gran control cuando solo podemos actualizar la colección raíz para hacer grandes cambios radicales. Bien, ya he hablado, confundes a todos. Sólo empieza, ¿de acuerdo? Bien, para hacerlo, vamos a no tener nada seleccionado variables locales y vamos a crear nueva colección Tengo un tallaje y voy a crear mi variable facial. Este va a ser un número, ¿de acuerdo? Porque vamos a hacer extra pequeños. Sólo va a ser ir otro acelerará a través del resto de ellos. Bien, entonces lo que vamos a hacer es usar camiseta talla K4, estos valores aquí estoy usando una cuadrícula de ocho puntos y la tuya podría ser diferente, podrías ser y 1012, ¿de acuerdo? Puedes hacer tus valores como quieras, bien, y yo podría pasar por completo y decir que realidad el espaciado de este lado no va a ser 16. Voy a reemplazarlo con mi variable, bien, Así que voy a ir tú y vas a ser mi, entonces qué hace 16, que es mi gran perfecto, hacer lo mismo por la parte superior también. El problema de dejarlo aquí y no entrar en ese siguiente nivel con alias es que si hago lo mismo por decir, esquinas de radio, vamos al retroceso agarra todo el autolayout, y quiero agregar esquinas redondeadas El problema con todos ellos haciendo referencia simplemente grande. Si necesito cambiar el tamaño de grande para que sea otra cosa. Bien. Pero no quiero que sean los radios que te gusten No puedo cambiar porque si cambio el radio de 16, bien, hagámoslo a 30 por ejemplo. También he ido a cambiar el relleno para eso. Lo que vamos a hacer es simplemente mantener este tipo de carbón o dimensionamiento de raíces. Bien, y luego voy a crear otra colección que es la más temprana. Así Alias rebanar. Así que puedo decir en realidad tengo algo que tiene mucho más específico. De nuevo, este va a estar bien. Va a ser radio fronterizo, mi tarjeta. Bien. Y puedo decir, no quiero ponerle un valor real. Quiero crear un alias. Esto en realidad es para mi frontera, para mis tarjetas específicamente voy a usar LacZ Y para lo similar, el relleno o el espaciado para mi tarjeta va a ser todavía puedo ser grande. Bien, puedo decir Eres grande, lo va a aplicar. Entonces vamos a crecer el radio fronterizo para esto y digamos que ya no estás mirando a lo grande. Estás viendo este alias más específico. Este es el radio fronterizo para la Tarjeta. En este relleno abajo por la parte inferior aquí, izquierda y derecha va a ser tu relleno para la tarjeta. Acolchado para la tarjeta. ¿Por qué esto es más útil? Es que es muy fácil para mí como diseñador a ninguna manera el relleno de la tarjeta está diciendo con el desarrollador cuando el recubrimiento fuera del sitio. Pero también me da el control más adelante para hacer una gran actualización global para decir: Bien, todos, nos estamos moviendo de la cuadrícula de ocho puntos. Vayamos a mi raíz de dimensionamiento y voy a decir, todo ahora va hasta el 12. Ahora todo va a renunciar a un par de puntos. Digamos que todo va a ser ¿son 16? No sé si van a ser 20 ahora. Y te darás cuenta de que tanto el radio, vamos a subir hasta 200. Demasiado. Tanto el acolchado el radio vienen a lo largo para el paseo. Así que tengo este tipo de como un buen control sobre todo. Pero probablemente lo más importante, es que tengo específicos. Si alguien vuelve y dice, en realidad necesito cambiar el radio, no cambias grande porque eso es lo que hace referencia Vas al alias para el tallado y dices border-radius ya no va a ser grande. Dices, puede no ser grande, pero puede ser, solo usaremos medio para el radio para la tarjeta. Ahí vamos. Nosotros hemos hecho ese cambio. No tuvimos que ir a crear otra variable que dijera, ¿qué medio es? El medio es un punto, ¿de acuerdo? Sólo tienes que cambiarlos por ahí. Cuál es este, está haciendo referencia porque tú un simpático puede controlar lo que estamos haciendo aquí así como el relleno sería su propio grupo Y podríamos un grupo para todo el relleno y crear un grupo para border-radius Puedes terminar teniendo grupos para todo. Puedes decidir dividirlos. Tenemos alias de tamaño y Alias de color. Esos son buenos para tener separados que se pueden aplastar juntos, eso solo es un poco complicado trabajar con ellos, bien, pero fuentes, que no puedes hacer del todo ahora, pero apuesto a que podrías hacer en la próxima actualización pronto para Puedes hacer grosor de trazo, puedes hacer lotes. Cualquier tipo de elemento de diseño aquí en Variables. Y porque estamos afectando al Diseño, grabándolos Design Tokens, Design Tokens que estoy usando en esto como simples tokens de diseño de casos de uso dependiendo de dónde se encuentre y qué tan grande sea la compañía y cuán invertidos estén en un sistema de diseño Es posible que encuentres que Design Tokens también representan el, por qué lo usamos. El razonamiento detrás de nosotros usando este estilo particular en una tarjeta. Entonces hay más para diseñar tokens que solo lo que dicen las Variables. Tarjeta de relleno es igual a grande, pero es la parte central de la misma. Otra cosa que quiero señalar sobre Design Tokens es que las convenciones de nomenclatura son súper importantes Así que la tarjeta de relleno tiene sentido, Lodge tiene sentido. Y la razón por la que no usamos números reales es porque los números reales, dependerán o cambiarán dependiendo del equipo con el que estés trabajando. Entonces ya sé, vamos a dimensionar la raíz. En Figma. Usamos píxeles. Pero cuando eres desarrollador, dicen que construir un sitio web, usarás algo como esto. Vas uno, ¿qué cuenta? Recuerda REM, una llanta o tal vez una puntería que representará el mismo tamaño. 16 píxeles en Figma es una llanta. En diseño web, podría ser un DP y diseño móvil. Esos equipos diferentes, van a usar diferentes como la forma en que describieron el resultado final es ligeramente diferente. Pero si estás usando esto como algo consistente en los tres equipos de cuatro, si te incluyes como el equipo de diseño, todos saben lo que están haciendo. Grande equivale a su versión de 16. Y tenían diferentes espacios de desarrollos. Y si dices, Oye, necesito grande para ser de 16 pixeles, pueden pasar por ellos y escoger la versión a de la misma. Puedes hacerlos mapeados correctamente a los diferentes equipos de desarrollo dependiendo lo duro que sea tu sistema de diseño. Pero sepa que 16 píxeles no es universal. Es universal en Figma. ¿Bien? Pero los otros equipos de desarrollo van a estar usando diferentes medidas para llegar a lo que quieres que sea lodge. Por eso utilizamos Tokens, lo hace más fácil. Eso es lo mismo, pero los colores, usamos los colores como, ¿a dónde vamos? Vamos a usar los colores a raíz. Usamos números hexadecimales aquí en Figma principalmente. Pero verás que hay una versión RGBA del mismo y que se escribe de manera diferente codificar cuando se escribe en SPSS o SAS o menos, o iOS o Android Pero todos podemos decir que el color primario 300 es este color verde y pueden definirlo como lo necesitan en sus diferentes espacios de desarrollo. Estoy haciendo esto más fácil o más difícil. Bien, eso será todo por este video. Lo que haremos es hacer un video más después esto parece cuando deberías usarlos, cuando no deberías, ¿quién debería estar usándolos? ¿Quién no debería? ¿Alice hizo eso? Ahora, viendo el siguiente video 160. Cuándo usarías tokens de diseño en Figma: Hola a todos. Oye, este video vamos a terminar por Design Tokens. Vamos a hablar sobre cuándo debes usarlos, cuándo no debes usarlos, y ¿en qué etapa deberías empezar a usarlos? Así que vamos a saltar y hacer eso. Ahora. ¿Cuándo usarías tokens de diseño? Estarás usando Variables todo el tiempo porque tiene algunas cosas útiles como, recuerda el prototipado avanzado donde estamos haciendo, donde tenemos que hacer clic en un botón y editar al total Y también lo hicimos. También lo usarás aunque no estén siendo utilizados en su estilo tradicional de token de diseño, bien, así que las variables que sí representan un color, color primario, podrías usarlas en tus diseños. Estás usando Design Tokens, donde se vuelven más ahí. Full Design Tokens en sí mismo es cuando estás trabajando mucho con Jimmy, son negocios más grandes con un sistema de diseño más grande. Ese es Jim, de verdad, más útil es cuando estás trabajando con el equipo de desarrollo. Y generalmente ese equipo de desarrollo tiene trabajo interno para acompañar lo suficientemente grande como para tener su propio equipo de diseño de UX interno y equipo de desarrollo. Y la conexión entre ustedes dos es bastante estrecha. Podrías estar trabajando por la noche, esta misma oficina. Para que las cosas que haces fluyan a través del equipo de diseño muy bien. Especialmente si tienes dos lugares diferentes es ir a iOS, va a Android, va a azotar muchos lugares diferentes que podrían estar diseñando tokens para que la consistencia sea efecto Entonces, ¿cuándo no usarías tokens de diseño para trabajos más pequeños? Los estilos funcionan perfectamente. El gran inconveniente de los estilos es que no se puede hacer referencia a ellos usando alias, pero para muchos trabajos, simplemente no hay necesidad de sentarse ahí arriba Un poco de complejidad con grupos en diferentes colecciones porque podría no ser tan necesario Jiminy esos trabajos más pequeños también. Y hay una desconexión entre tú y el equipo de desarrollo que está implementando tu diseño. Y no quieres pasar un montón de tiempo obteniendo un Design Tokens, obteniendo una estructura de nomenclatura de convenciones que van solo para que el desarrollador los ignore, agarra tu diseño de figma. Esto sucede capas y van a lo grande. Te has ido a la cuadrícula de ocho puntos y yo he ido nueve, ¿parece bien? Y han ido y construido durante el dimensionamiento, verán, construirán los suyos propios. Necesitarán construir Variables y construirán tokens de diseño. Pero ahí los construirán en su propio lenguaje su manera, una metodología que depende la forma en que hayan hecho el último trabajo, la forma en que el framework ya está estructurado. Así que asegúrate de que si vas a poner el esfuerzo en construir tokens de diseño que el lado del desarrollo de las cosas sea consciente de lo que estás haciendo. Tienes una convención de nomenclatura consistente. De lo contrario, podrían simplemente ignorar lo que has hecho todo lo que has hecho y hacer lo suyo. Bien, Así que los trabajos más pequeños generalmente no necesitan Design Tokens. Los trabajos más grandes generalmente lo hacen. Es una buena regla general. El último es raro. ¿Se hace? ¿Cuándo empiezo a construir estos Tokens de Diseño? Depende de ti cuando eres nuevo. En la etapa conceptual. Probablemente no sea tan útil comenzar a construir Design Tokens todavía. Porque lo eres, se trata de prototipado rápido, no de un día de prototipado lento Se trata de simplemente sacarlo, conseguir una prueba. ¿Qué es lo del cliente? ¿Cuál es la retroalimentación de los stakeholders? Usa estilos para mantener la consistencia. Pero no estés construyendo Design Tokens todavía. Porque a menudo es cuando tienes el tipo final de firma de clientes o los proyectos se están moviendo hacia el desarrollo, entonces puedes pasar algún tiempo obteniendo todo bien, trabajando en un buen sistema porque tienes una idea de lo que no es el trabajo El alcance de la misma es hacer algo apropiado, trabajar con el equipo de desarrollo en esa etapa. ¿Cómo lo nombra? ¿Cómo quieres que le nombre? Con tu Liderando el nombre o siguiendo lo que están haciendo Generalmente, se hace después de al menos sí. Tienes una buena base de lo que estás haciendo. Si estás trabajando en una empresa existente y estás haciendo este curso, probablemente ya tendrás un sistema de diseño, o tienes que revisar las cosas viejas que tengo y construir uno tú mismo. Está hecho después de todo ese tipo de cosas como juguetear escogiendo fuentes y colores como ya se ha hecho Por último, hay mucho trabajo inicial con tokens de diseño, pero la utilidad a largo plazo de ellos es increíble cuando se trabaja en un negocio más grande Entonces sí, hay mucho trabajo por adelantado si estás pensando, tío, parece una obra vial Lo es hasta que hayas desplegado tu diseño y esté en todas partes. Y después hay que ir a hacer actualizaciones. Y es solo un gran dolor de cabeza porque esta persona que tiene el blog de WordPress y esta persona que está administrando la versión de la aplicación para iOS, son todos, estás tratando manejarlos y hacer malabarismos con todos de nuevo Mientras que si tienes un, un sonido como conjunto de convenciones de nomenclatura y sistema de diseño, puedes mezclarlo más fácilmente para todos. Eso tiene sentido. Te vas un poco waffly. Espero que eso te haya ayudado a entender un poco qué Design Tokens, dónde usarlos, no estamos para usarlos. Ve tú, eso es todo. Te veré en el siguiente video. Bien, voy a volver dentro de la máquina, salí un rato, de vuelta detrás de la pantalla Hablemos. Nos vemos el siguiente video. 161. Cómo animas a lo largo de una ruta en Figma: Hola a todos. En este video vamos a hacer esto. Vamos a conseguir que PacMan siga un camino y se anime en Algo así, ¿por qué dijo algo así? Porque antes de que empecemos, solo para que sepas, animación en Figma es bastante complicada Así que vamos a usar un plugin llamado motion. Es realmente genial, animación basada en fotogramas clave de línea Pero una vez que lo hemos logrado, Figma realmente no quiere aceptar lo que hemos hecho estas soluciones y tenemos que hacer esto en el curso a, porque me preguntan cómo hacer animaciones en un camino todo el tiempo para camino todo el Y porque vas a pasar agente en internet buscando cosas animadas, vencedores animados Y la gente te va a mostrar hasta cierto punto y luego ya no van a hablar más. Todos los tutoriales que alguna vez he encontrado, llegan al punto que estás como ahora, los implementan en Figma y no, simplemente llegan a este punto hace un poco, mira, trabajo Pero hay algunas cosas extravagantes sobre Figma. Y al momento de esta grabación, todas estas Animaciones se reducen a regalos que funcionan y nosotros haremos. Pero hay algunas cosas que no. Así que vamos a meternos en ello. Explora, entiende, sé súper conocedor. Y claro que conozco a Figma esperando que me libere este video para hacer que todo lo que acabo de decir y lo que digo en este video no sea correcto Ojalá pronto haya una actualización donde podamos importar, no sé, JSON o SVGs animados Así que comprueba eso. Podría ser realmente, podría estar fuera. Siento que tiene que estar en la hoja de ruta no estar justo hasta hoy Así que ahora entremos para empezar. Tengo marco telefónico. Pongo una imagen de fondo en ella está en tus archivos de ejercicio. Si quieres. Se llama fondo abstracto. No hace nada excepto que se ven geniales y yo soy un poco Pac-Man Si no estuviste ahí para el curso Essentials, si dibujo un círculo y voy a mi herramienta de selección, puedes hacer esto. Numerarlos, ellos, ellos, ellos pero bien, así es como conseguí mi Pac-Man Dibujas algo y luego saltas de nuevo en K. Así que para que esto funcione, necesitamos un camino para que siga. Voy a usar mi herramienta pin. Entonces el pico y yo voy a dibujar algo que va un poco, estoy dando click y arrastrando hacia afuera para obtener una curva Bien, es un poco ir así y luego tal vez algo expandiendo el camino allá abajo y luego algo así Bien. Escapa cuando termines un par de veces. Voy a mover esto principalmente porque va a exponer un tema con el que podríamos encontrarnos. Así que tenemos la forma, tenemos la línea, necesitamos encontrar el plugin. El plugin que queremos llamar motion, como hay muchos movimientos de plugins diferentes Probablemente el más robusto, Es realmente bueno. Pero nuevamente, Animación en Figma como solo auto, es sabe para qué está hecha Pero todos me siguen preguntando cómo hacer animación en un camino y podemos hacerlo un poco Entonces, lo que tenemos que hacer es poder alejar el zoom y un poco poder verlos a ambos Bien. Un poco de moverse por ahí. Ahora, quiero seleccionar en mi, Se llama Restar. Restar su Pac-Man En realidad este Rename por aquí, Pac-Men. Y por alguna razón no se actualiza en esto, pero si lo cierro, lo vuelvo a abrir. Ahí está, Pac-Man Ahora bien, si has hecho animación de línea de tiempo antes, estarías como, Oye, esto se ve increíble y es, bien, se parece mucho a Adobe Animate después de falsificar Premiere Pro, cualquier tipo de herramienta de animación de fotogramas clave de línea de tiempo Así que no vamos a profundizar demasiado aquí, sino para esa gente. Y hay muchos de nosotros que sabemos usar los conceptos básicos de esos. El movimiento es un gran paso. Quienes simplemente hacen algo básico juntos para conseguir algo hecho, pero también para ver dónde están todos los problemas, llegan a un proceso educativo. Ahora esto va a cambiar con el tiempo a medida que Figma evolucione por el momento, Vamos a toparnos con esos temas Entonces por qué no quiero hacer es que quiero decir Pac-Man, me gustaría Puedes ver esta opción aquí, X e Y, las tres están vinculadas. Puedo decir que comienzas una de ellas. Dice elegir un camino, ese camino, y haga clic en Aceptar. Va a funcionar. Mi tipo ahí, trabajaba un poco. Algo así como que se quedó atascado ahí. Sí. Está funcionando un poco Si el tuyo es lo mismo. La razón por la que esto no está funcionando es porque mis vectores están fuera del marco en el que estoy trabajando, ambos dentro o ambos fuera de él. No importa. Bien. Eso es lo que necesita. Entonces ahí se podrá conectar. Ahí vas. Buen poco de animación. ¿Qué pasa, Dan? No pasa nada excepto, vamos Pac-Man. Vamos a dar click sobre estos. En primer lugar, la flexibilización tiene que ser lineal Vamos a entrar y salir. Y hagamos algunos ajustes para el momento. Entonces voy a dar click en Pac-Man aquí. Voy a ir a la cima. Voy a escribir en tipo de cuenta en 1 s. Si lo haces, solo pon algunos 0.1. Entonces voy a decir que uno es por un segundo. Voy a conseguir que mi espacio lo arrastre hacia abajo para que encaje al borde que no solo juegue en ese pequeño bucle. La próxima vez. Bien, Lo extraño de Figma ahora es que no te permitirá quedarte con eso Están como, puedo verlo tocar. ¿Por qué solo puedo tener la animación? Al igual que tirarlo a una Instancia o componente. Puedo moverlo y se reproduciría por sí solo, como un video. No es como funciona si cierro esto ahora y lo previsualizo, Alguna vez se ve No hace nada. Esto puede cambiar en el futuro en este momento, no puede hacer que esto suceda. Puedo exportarlo y traerlo de vuelta . Entonces eso es lo que vamos a hacer. Pero no siempre doulas cosas que hace el plugin. Pero mi modo prototipo no puede tomar esta información y portarlo a nuestro prototipo. Esa es la mayor limitación en este momento. Entonces, ¿cómo nos redondean? Un par de cosas. Una es, vamos a exportarlo y volver a importarlo. Entonces tienes algunas opciones de exportación variables. El que quiero es probablemente SVG, porque ya puedes animar SVG, la víctima estará ahí Desafortunadamente, eso no funciona. Puedes importar eso a una figma o en este momento, grumos en una versión grande en animada Y éste tenía Div. Este de aquí es un archivo JSON. A mí me gustó JSON porque podemos convertirlo en un archivo Lottie, que quizás no conozcas ahora, pero desafortunadamente terminan en un dato ahí también porque en este momento Figma, cuenta y puerto o archivo Lottie o archivo Pero lo que podrías hacer ahora es poner en marcha la animación , no prototimarla. Y diciendo este archivo JSON a tu desarrollador, ahí podrás implementarlo, bien, esa podría ser la solución para ti No puedes verlo en Figma, o al menos no puedes ver este archivo JSON, pero puedes enviarlo a tu desarrollador para que se convierta en una animación Bien, pero digamos que queremos ver esto aquí porque queremos prototimarlo . Es parte de lo que estamos haciendo. Bien, entonces hay una opción aquí llamada GIF. Todos sabemos lo que es un GIF animado, ¿de acuerdo? Voy a dejarlo todo por defecto. Voy a exportarlo y lo conseguimos. Ahí va, chug y a través. Esto funcionará caso de dos grados. Estoy metiendo el mío en mi cajón de basura. Voy a dejarlo mal llamado. Exportemos una versión más, el video, porque estamos como, solo usaré el video. Desafortunadamente, exporta como mp4. MP4s son geniales. Simplemente no tienen transparencia. Así que me gusta usarlo encima de las cosas. Hace un bulto grande y sólido de un archivo que no puedo ver a través. Entonces vamos a buscar. Tengo esos dos archivos. Echemos un vistazo a ambos . Entonces obtuve mi GIF. Hay excelente. Y echemos un vistazo al MP4. Así que eso también funciona. Un regalo puede tener transparencia y Mp4 no puede. Entonces quiero el GIF porque se ven bien. Está un poco pixelada, pero podemos sortear Entonces lo que queremos hacer es que quiero hacer un par de cosas. No quiero ver la línea. Y podemos hacer eso encontrando al vencedor y simplemente afinando el trazo al 0%. Bien, eso va a funcionar. Y en realidad exportó el fondo de esto. Lo que podría hacer es agarrar esto y el vencedor, arrastrarlo. Bien, no lo puedo ver, pero ahí está. Ellos irán a la membresía en modo Outline. Hacer. Bien. Voy a seleccionar ambos. Voy a abrir el plug-in. Nuevamente, estoy usando el atajo Opción de Comando P para abrirla para el plugin que has usado por última vez o Control Alt P. Dijiste ese atajo. Bueno, voy a intentar exportarlo. Va a decir que necesito un marco, así puedo hacer eso. Bien, tengo estos dos seleccionados. Voy a ponerlos en un marco. Voy a ponerle nombre a ese marco, pero el postor lo llama Pac-Man. Y ahora voy a exportarlo. Y exportar el GIF de mejor calidad, fotogramas de alta calidad por segundo. Creo que se necesita la versión paga para subir a los cuadros más altos por segundo. Pero bueno, va a funcionar. Bien, Pac-Man GIF, ese es el lugar en el que hice uno antes Y veamos Beckman GIF. Aquí. Ustedes tienen transparencia. La igualdad para GIF no siempre es grande. Puedes cambiarlo de mejor a alta calidad. Pero ahora regala uno de los archivos que y oclusal esta abajo que Figma Entonces vamos a poner eso de alguna manera. Voy a asegurarme de que esté dentro de mi marco. Bien, un poco comienza ahí y un poco zumba alrededor. Y los consigo para entrar ahí. Vamos a previsualizar. Ahora. Ve tú, ahí está mi pequeña animación. Refrescar. Él corta el fondo. Bien, es porque eso, vamos Pac-Man. ¿Puedes ver que mi camino llega justo al borde aquí? Así que voy a tener que hacer mi marco. Ahora el vector, el marco Pac-Man, más grande. Sólo para dar cabida a Pac-Man mientras recorre su pequeño camino vencedor ¿Eso es suficiente? Probablemente suficiente. Vas, puedes conseguir que se animen en un camino. Por el momento. Es sólo un GIF si hay una nueva versión o simplemente no sé toda la forma de hacerlo. De verdad quiero a Victor, porque los regalos son, las animaciones no son geniales. O como mi chico, solo hay algunas cosas para recordar cuando lo estás creando en movimiento. asegura de que tanto el trazado como el objeto o dentro del marco, se puede bajar la opacidad sobre el trazo que está siguiendo Y si quieres que sea transparente, solo ponlo en un marco que tenga suficiente espacio alrededor de los bordes para nuestras pequeñas guías Pac-Man y me cortaré en traer ese GIF Una vez que lo hayas hecho y podrías venderlo al cliente o al equipo de TIA, entonces puedes usar motion. Olvidé lo que quiere el equipo. Quieren SVG animados que son buenos pero bastante limitados en lo que realmente pueden lograr Si se trata de cosas simples vectoriales, podría estar bien. Bien, pero también podría ser CSS animado, puedes hacer cosas básicas con ellos también en este momento, para mí y para mi conocimiento, un archivo JSON es probablemente la mejor, la implementación más robusta. Mantiene un vector. En realidad puedes terminar controlando esta Animación en código. No es como El Regalo donde está un poco hecho y no puedes cambiarlo nunca En realidad puedes controlar las cosas dentro. Podrías cambiar los colores del Pac-Man. Podrías cambiar las tallas. Todo eso se hace en código después, podría ser algunas cosas dinámicas y geniales que van en tu sitio web. Creo que la mayor comida para llevar es que una Animación en Figma por el momento no es para lo que está hecha Se trata de prototipado rápido, pero a medida que madura, estoy seguro de que introducirá muchas otras características Espero que JSON y tal vez algo llamado Lottie entre pronto en él Puede que sean SVG animados, eso sería increíble. Bien, eso es todo, animando a nuestro Pac-Man en un camino en Figma . Nos vemos en el siguiente video. Y en realidad antes de irnos, una pequeña señal de mi hijo que ha estado casa todo el día, ¿quién está enfermo? Enfermo por el partido de ida 2 s a ahora solo está siendo molesto o de día. Llévatelo, Finalizar rematar el video que recibió fueron los primeros 2 min. Entonces sé que eso es lo que estoy tratando de trabajar con la gente. Sí. Nos vemos el siguiente video. Bye 162. Cómo agregar archivos de animación de Lottie en Figma: Hola a todos. En este video vamos a poner en Animaciones de Lottie en Figma. Pero para ir al grano por el momento, no podemos poner archivos Lottie de forma nativa en Figma, ponemos regalos y luego enviamos a los desarrolladores los archivos de Lottie Así que era un poco de una alternativa en este momento. Esto los cambiará seguro, cuanto llegue a grabar en este video. Pero por el momento, los archivos de Lottie pueden entrar de forma nativa. Vamos a trabajar, Echemos un vistazo al plugin y descubramos la manera de solucionarlo en este momento. Bien, primer paso, si no has oído hablar de un archivo de Lottie, y ahí lo diré, mi acento . Lottie archivos Es muy común archivo de animación utilizado realmente en la producción en un sitio web o una aplicación, utiliza JSON es el código subyacente. Es muy rápido de cargar. Es muy pequeña, lo cual es bueno. Y contiene todas las cosas buenas que necesitamos, como vencedores y podemos hacer todo tipo de animación de línea de tiempo Entonces Lottie es increíble. Y como dije al principio ahí, podemos ser amables implementados en Figma. Es como el último video. Podemos implementar un GIF. Y luego ver al desarrollador el archivo que necesitan, el problema es da un asqueroso. Ellos trabajan. Haz dos archivos porque la razón por la que se ven un poco asquerosos es cuando están en un fondo que necesita transparencia Así que vamos a abrir el plugin Lottie. Entonces Lottie requerirá que te registres. Puedes configurar una cuenta gratuita. Puedes llegar bastante lejos en la cuenta gratuita. Encuentro a menudo solo usando el sitio web, en realidad es más fácil. Puedes entrar aquí y decir, quiero cargar animación. Oye, en lugar de pasar años tratando diseñarlo en Figma, bien, hay un montón de cosas aquí, y hay un montón de cosas gratis, lo cual es increíble Pero hagámoslo aquí en Figma. Hagámoslo cargando. Averigua cuál quieres. Digamos que queremos esta cosa genial. Entonces puedo insertar un SVG y eso podría ser lo que haces. Escalable. Es victoria, es buena. Y lo que haces es, supongamos que eso distrae Solo hay que anotarlo cuando se lo estás diciendo a los desarrolladores como este no es un archivo animado. Aquí hay un enlace al archivo JSON, todo el archivo Lottie. Bien, entonces lo vincularías desde aquí. Ahí está. Lo abrirías, lo descargarías y dirías, aquí está el archivo Lottie JSON Y eso podría ser. Esa podría ser la forma en que conectas ambos juntos. Simplemente pones un marcador de posición SVG viéndoles el enlace. Pero digamos que quieres demostrar el don. Entonces lo que puedes hacer es eliminarlo. Y por el momento no podemos. Ojalá pronto, podrías estar viendo esto y podrías hacer clic en Insertar Lottie, y podría estar funcionando perfecto Pasará pronto, bien, se puede hacer. En realidad estaba en Adobe XD, así que lo están haciendo. Nosotros en Figma es hoja de ruta. ¿Se va a insertar? No lo sé. Ojalá esté ahí pronto. Házmelo saber en los comentarios. Si se ha actualizado, tengo que regresar y volver a grabar este video Pero por el momento lo que hacemos es decir En realidad esto es, en lugar de GIF, voy a hacer de qué tamaño va a hacer uno grande. Bien, se necesita un poco para lograrlo. Voy a ponerlo aquí. Sólo voy a asegurarme porque es un poco más que lo arroja en cualquier parte de la página Así que asegúrate de que esté en el marco que quieres previsualizar. Bien, entonces voy a cerrarlo ahora y voy a tenerte una vista previa tú ahí está. Se ve bien. No lo sé. Sentí que se veía peor. El jefe, éste en realidad es bastante agradable. He hecho un archivo más grande y lo escalo para que los regalos se vean bien. Bien. Vaya, es un GIF animado. Diego. Pones en el GIF y luego desarrollador senior otra vez, ese archivo Lottie JSON en problemas es que no es Victor No puedo cambiar mucho en la mano, pero puedo hacer muchos ajustes de color en el archivo Lottie Sé que por la versión gratuita solo tomas lo que obtienes K, pero puedes con la versión de pago, pasar y decir, bien, está bien, mi uno Es bastante genial. Puedes pasar por y si tienes que pagar versión e ir a Personalizar, y puedes elegir diferentes colores. De nuevo, guarda esas Animaciones, haz tus propias paletas Pero por el momento, es decir, se necesita un plan individual, que es un pipeline. Pero hay un montón de cosas gratis geniales. Y estoy deseando volver a grabar este video cuando en realidad podamos poner a Lottie de forma nativa Y luego cuando hacemos nuestra exportación, el desarrollador no tiene que ser cassette, un archivo separado. Pueden obtenerlo de la documentación y del panel de inspección. Si quieres hacer tu propio archivo Lottie personalizado, puedes, necesitarás algo como Adobe After Effects como un plugin llamado body que se mueve fuera del alcance de este curso Pero si quieres revisar mi curso después fijo, estaré actualizando eso muy pronto y asegurándome de que haya creación de animación de Lottie como parte de que se convierta en el predeterminado Bien, perdidoso en Figma en este momento, solo estamos pegando un poco en un GIF enviarle al desarrollador el Está bien, podemos hacer que funcione. Van a GIF de bordes ligeramente costrados. Bien, eso es todo, voy a decir en el siguiente video. 163. Cómo hacer accesibles tus diseños: guía para el complemento de accesibilidad en Figma: Hola a todos. En este video vamos a ver la accesibilidad en Figma. Veremos un par de plug-ins que pueden ayudarnos y qué cosas deberías estar atento cuando estés haciendo tus diseños Bien, comencemos. Primero arriba un descargo de responsabilidad. No soy un experto en accesibilidad, pero quería mantenerlo en este curso porque es un buen plugin. Hay algunas cosas principales que revisar cuando estás haciendo el diseño, pero hay mucho más de lo que sé sobre accesibilidad. Pero vas a tomar todo lo que digo aquí con una pizca de sal y haz tu propia investigación. Entonces, las principales cosas en las que quieres enfocarte cuando estás haciendo tu trabajo de diseño. Por el lado de Figma, K es una especie de dos cosas principales Tiene que ver con las fuentes y cuán legibles son las capas y los puntos de contacto, cuán cliqueables son algunos de estos botones y qué tan separados están, fuentes y puntos de contacto Para comenzar, lo que hice es crear una nueva página con un nuevo marco y simplemente tiré un montón de mis elementos aquí. Son de mis estilos principales porque solo quería lanzarlos todos y hacer algunos cheques para asegurarme de que estamos pegando en la dirección correcta. Además es agradable y limpio en esta página simple con un marco simple. Ahora, cuando se trata de plugins, hay algunos de ellos. No tengo ningún amor en particular por ninguno en particular. Son todas las calificaciones. Hacen lo suficiente de lo que tengo que hacer. Stock de anuncios y contraste, busca los que aparecen en los plugins. Recuerda que estos podrían no estar por ahí para cuando llegues a escuchar estos cambios con el tiempo que algunos de ellos han pagado, algunos de ellos tienen libre albedrío. Comienza con el que es bastante fácil visualmente, no tiene mucho detalle al mismo, pero es bastante genial. Entonces tiene que contrastar. Tengo que correr. Y está corriendo en mi marco aquí. Y puedes empezar a ver algunas cosas. Algunas cosas son verdes, algunas cosas son rojas. Básicamente es una proporción, es algo a uno. Ves eso es 3.1, 321 y se ha vuelto rojo. No es bueno, no hay suficiente contraste. Este de aquí tiene el mismo contraste, 3.13, pero es un tamaño de fuente más grande Entonces, hay una compensación entre el color que estás usando y qué tan grande es y también el peso del mismo y lo que hay en la parte posterior del mismo Mira aquí abajo en la parte inferior de este, el editor hará zoom. Entonces ambos son del mismo tamaño, el mismo peso de fuente, pero el de abajo tiene una relación de contraste mucho mayor. Entonces como verde y el de arriba no tiene una relación de contraste tan buena contra ese morado. La diferenciación entre los dos no es lo suficientemente alta como para pasar la prueba. ¿Quién hace la prueba? La mayoría de las herramientas de accesibilidad se refieren a este documento aquí, este documento grande y feo del W3C Eso es lo que estás buscando. Si quieres adentrarte más en esto, verás esa palabra alrededor de la WCAG Wcag, nadie lo llama ahí, pero son los Lineamientos de Accesibilidad al Contenido Web Y encontrarás descripciones adecuadas con ejemplos por todo aquí. Es bastante complicado de usar. Termino cargándolo. Bien, he terminado en esta rápida referencia, esto va a cambiar. Estamos usando V2. Creo que están redactando V3 en este momento, pero solo hago una búsqueda de contraste, contraste no textual Busco mínimo de contraste. Sí, ahí vamos. Veamos la descripción completa. Básicamente dice que el texto grande tiene que tener una relación de contraste de 3.1 logotipos con texto en él no tiene que tener ningún requisito de contraste. Entonces esto es que vamos a mejorar tus conocimientos. Ahora sepa que aquí hay un AA y un AAA abajo, ve que esto necesita una relación de contraste de siete a uno, mucho mayor. Verás aquí en este plugin que puedes cambiar entre estos dos. Ya ves, incluso con textos grandes, es del color equivocado. Entonces no hay nada de contraste listo para obtener una calificación triple a. Y hay que verificar para ver qué relación de contraste está apuntando. Ahora, para ser justos, nunca he trabajado en ningún lugar que se requiera, ningún requisito de accesibilidad, ningún requisito legal Pero estoy seguro de que si también trabajas para una agencia gubernamental, yo he trabajado para agencias gubernamentales y aunque pueden tener requisitos en algún lugar escondido, no hay nadie que los revise realmente Entonces es un poco optimizar al diseñador para asegurarse de que los estoy implementando. Y si alguna vez hubo una auditoría, fallaría en esto, pero lleva aquí. Entonces, ¿cómo nos redondean? Este de aquí, solo puedes jugar con cosas como esta. Las cosas cortan a lo grande. Mi pequeña pantalla. Hagámoslo con este de aquí. Entonces digamos, ajustemos el blanco. Bien, estoy saltando el peso usando mi dulce atajo de anterior Opción de Control mayor que escuchar. Y voy a refrescarlo. Es más grande, todavía no funciona. Así que para echar un vistazo a mis colores. Así que voy a ir por aquí. Voy a ir a mi, digamos mis siete centésimas A ver si eso vamos a pasar la prueba. Entonces se cambió a la 700. Vamos a ejecutarlo. Ahora. Tiene una relación de color de contraste mucho mayor. Y funciona. Puedes ver lo importante que es entender un poco de esto al principio del diseño, solo para asegurarte de que tienes colores. No parecen peligro. Escojo el rojo que no me gusta. Es un poco doloroso. Pero a este tamaño aquí, funciona muy bien. Ahora solo para que lo sepas, algunas de las reglas básicas son estas cosas de aquí. Entonces, si es de 18 puntos y no en negrita o por encima, se considera texto grande. Te sales con una relación de contraste mucho menor. El texto grande también se considera 14 puntos, pero sólo si es negrita, todavía se considera texto grande. De nuevo, te sales con una relación de contraste mucho menor. Entonces, la relación de contraste para las fuentes es una mezcla del tamaño de fuente, qué peso tiene y qué color se compara con el fondo. Echemos un vistazo a otras herramientas útiles. Echa un vistazo a las acciones. Uno tiene un poco más en ello. También hay una versión paga de esto, pero echemos un vistazo al contraste que voy a sumergirme en mi botón aquí. Y me está diciendo estos dos de aquí, está pasando la prueba AAA. Se considera texto grande. Tiene una relación de contraste de tres puntos uno, pero era texto normal, no negrita, menor que 18, fallaría Tiene sugerencias que puedes ver que está haciendo referencia al WCAG, bien, así que al principio de tu diseño, una vez que tengas algunos estilos de texto, haz un poco de prueba con stock o uno de los Recuerda, el anuncio es bueno, stock tiene buen contraste es útil solo para ver, estás diseñando algo que eventualmente va a tener que cambiarse de todos modos, me puse muy raro es demasiado pequeño. Y cuando se trata de texto, el texto se considera material que tiene que ser rojo y utilizable. Si tienes texto eso es como echar un vistazo. Aquí. Esto toma en el fondo aquí, esto fallaría mucho la relación de contraste. Esto se considera texto incidental. Es como una decoración pura y no sirve para ningún propósito de usuario como es solo como un gráfico. Entonces tienes que preocuparte por esos. Pero entonces a veces corres a estas cosas es como, ¿es utilizable, no es así? Pueden ponerse un poco complicadas. La relación de contraste es una ciencia, pero puede ponerse un poco desordenada. Hablemos de puntos de contacto. Entonces veamos éste. Simplemente pasamos a estar en esta página. Es 32 por 32, y eso es lo que estoy usando completo mi Shift E para mi prototipo. Si hago clic en esto y voy a esta página que tiene un punto de contacto, y el punto de contacto se considera no el gráfico, sino el área activa Entonces si voy y previsualizo esto, es el bit en el que se puede hacer clic Se puede ver abajo ahí que es ese tipo de área activa. Esas son las áreas tocables. Entonces lo que puedes hacer es que a veces puedes mantener como que eso fallará en una prueba de punto de contacto Bien, entonces, ¿cuáles son las reglas para los puntos de contacto? Los diferentes para diferentes sistemas operativos. Entonces una manzana, bien, quieren que el área táctil o el objetivo táctil sea, tenemos 32 por 32. Apple quería ser 44 por 44. Ese es el tamaño mínimo. Android es un poco más grande, 48 por 48. Y debido a que Android es propiedad de Google y Google ejecuta Internet, también tiene el mismo tamaño para los sitios web, 48 por 48. Y Google tiene formas de hacer pruebas para probar cómo funcionan las cosas, especialmente en dispositivos móviles, para ver cómo te clasificas para los resultados de búsqueda. Entonces es algo importante. Entonces veamos una manera de conseguir que esa estancia sea del mismo tamaño. Pero sé el, digamos 48 por 48. Entonces voy a ir a mi componente principal, bien, aquí está. Y ya ves 32, 32, yo podría simplemente hacer esta cosa 48 por 48, pero es demasiado grande o el punto de contacto para ser más grande, pero no necesariamente el icono Entonces voy a deshacer todo eso. Lo que voy a hacer es asegurarme de que tengo al padre. Y en realidad voy a, así que está en componente principal es el vector dentro. Voy a agarrar el exterior. Y recuerda la fórmula del atajo. Puedes mantener presionada la tecla Comando en una Mac, la tecla de control en una PC, y de hecho puedes cambiar el tamaño del marco por separado del icono para poder moverlo de esa manera. Es más fácil, probablemente solo una mancha el padre lo hace un cambio de diseño automático a. y solo voy a agregar algo de relleno Voy a editar todo el camino alrededor. Recuerda el Shift Option o Alt Shift, o simplemente puedes hacerlo manualmente por aquí, escríbalo. Lo que estás buscando es un total de 48 por 48. Para mí, necesito sumar ocho por ocho. Creo que ya está. Vamos total de 48 a todo este relleno se incluirá en el touchpoint Entonces voy a actualizarlo. Opción tres, digamos publicó todas las páginas siendo utilizadas en unos pocos lugares. Así que tengo que tener cuidado. Volvamos a aquí. Volvamos a esta opción. Revisemos y actualicemos todos. Y se puede ver aquí atrás, esto está actualizado, es 48 por 48. Debería poder probarlo. Ahora bien, si hago clic lejos, es un poco sugiriendo manera de recolectar, pero puedes ver las áreas de contacto mucho más grandes Bien, entonces eso es 48 por 48. Si estás desarrollando para una app de iOS, ellos quieren que sea de 44 por 44. Ahora esto cambia. Ve a verificar dos veces No tomes todo lo que digo por evangelio. Entra en un poco de investigación para la plataforma que estás desarrollando. Para. La otra cosa que es consistente tanto entre Android como Apple, y el diseño de sitios web es una brecha de 16 puntos entre ellos. Entonces esto tiene una brecha enorme, así que van a funcionar bien. Pero cualquier botón e íconos necesita un mínimo de 16 puntos entre ellos. Bien, últimas cosas a considerar, las de las principales, ¿verdad? Obteniendo el tamaño de fuente y su contraste, bien, asegurándose de que los puntos de contacto sean lo suficientemente grandes en este espacio entre ellos. Pero hay muchas otras cosas de accesibilidad a considerar. Mirando tu persona, ¿con qué edad demográfica estás trabajando? ¿Cuáles son sus capacidades tecnológicas? ¿Haciendo? El mínimo podría no ser suficiente para tu audiencia son las cosas que puedes mirar. Cosas como daltonismo y sitio de extracción. Algunas de las aplicaciones también han ayudado con eso. Es echar un vistazo a, es echar un vistazo a este de aquí en ahora ejecutar el simulador de daltónicos Llegó, enloquecen cuenta gratis, pero puedo seleccionar mi mesa Busquemos uno que tenga algún contenido en él. Es click en éste. Bien, entonces voy a usar el tablero de la aplicación de comentarios. Y lo que puedes hacer es elegir un tipo de daltonismo Entonces puedes cambiar entre ellos y ver cómo se va a quedar alguien más. ¿Y sigue siendo utilizable? ¿La relación de contraste es lo suficientemente alta? De nuevo, hay mucho más en Accesibilidad. Solo cubrimos algunos de los conceptos básicos aquí, los principales que afectan nuestro lado de diseño. Hay mucho más que entra en el lado del desarrollo. Personas que necesitan cosas como texto alternativo cuando se trata de imágenes, lectores de pantalla, cómo el teclado puede navegar a través de un Hay mucho en lo que pensar cuando se trata de accesibilidad, pero ahí tienes, Esa es mi visión general. Pero el boleto es solo un comienzo para aprender más sobre accesibilidad. Bien, eso es. Te voy a ver en el siguiente video. 164. Cuáles son algunos consejos para trabajar con colegas en Figma: Hola a todos. Bienvenidos al trabajo con compañeros, una sección. Este video es un poco como todos los pequeños consejos y trucos que puedes usar para ayudar con ese proceso de compartir con otros diseñadores son las personas de tu organización Hay widgets útiles, carga un atajos, vamos de preferencias que puedes activar y desactivar cuando estés trabajando con un gran equipo. Ellos perplejo, bien, así que la forma más fácil de conectarse con clientes o colegas sobre un archivo es usando la herramienta Comentario Casey es el atajo y puedes dejar comentarios. Y cambias a esta herramienta aquí y verás todos los comandos anteriores. Puedes hacer click sobre ellos, moverte. Si tienes un equipo que es tranquilo y feliz y son solo comentarios por todas partes. Un atajo útil es Shift C, activar o desactivar que no desaparecen. Eso es como desaparecer visualmente. Muy cierto. Los comentarios están diseñados para ser poco intrusivos. Son útiles, pero a veces necesitas las grandes armas. Necesitas una nota Post-it gigante si vas a widgets, bien, entonces hay unos widgets realmente buenos Voy a poner en la palabra pegajosa. Y hay un par de pequeños aparecen y ambos son bastante buenos. Estoy usando las anotaciones una como esta principalmente porque tiene los pequeños extras de burbuja que esta parte inferior izquierda puedes ver que tiene esa cosita Por qué eso es importante. No estoy segura. También puedes tener tu nombre ahí dentro. Bien. Y tus notas y elige un color. Muy importante. Publicar las notas deben ser amarillas, así que lo dejaré así. Y justo cuando lo estés poniendo, solo ten cuidado. Usaremos algunos de nuestros atajos de Figma porque si estás arrastrando esto, así que agarró el título, arrástralo por ahí, irá dentro de marcos y probablemente sea mejor simplemente sentarse encima Bien, así que mira esto cuando lo esté arrastrando, sostén mi barra espaciadora Bien. Y eso significará que saltó dentro de un marco y puedo usarlo para burlar las cosas un poco más fácil. Bien, entonces ese es el primer widget. El otro que es un poco útil es una lista de tareas pendientes. Sabiendo que aún tienes trabajo por hacer. Me encanta trabajar desde una lista de tareas pendientes. Los tengo por todas partes. Lo mismo, widgets y solo tecleando para hacer. Hay un buen unquote, un poco que hacer. Y hace exactamente lo que imaginabas. Agrégalo para hacer. Bien, editando para que otras personas sepan en qué estás trabajando. También podrías usarlo para ti. Así como una pequeña lista de verificación en el archivo, especialmente útil cuando tienes que alejarte de él por unas vacaciones, trabajar en algún otro proyecto, puedes regresar y todo está un poco apretado Nuevamente, esto es solo un pequeño módulo. Puedes moverte a cualquier parte. Me parece que es un widget hindi. Cuando estés compartiendo documentos con tus otros compañeros, puedes presionar compartir bien, y copiar el enlace, enviarles un correo electrónico. Lo que me parece muy útil es que voy a saltar a mi documento de componentes principales. Digamos que estoy hablando de los botones. En lugar de enviarlos solo a este archivo que está en todas partes. Puedo decir, da click en esta sección. Puedo ir a Compartir y aquí hay una opción, dice enlace a la sección actual. Entonces, si agarro ese enlace publicado en un Google Doc, Bien. ¿Puedes ver que enlaza directamente a esa sección, no solo a todo el documento? Genial. Cuando estás enlazando, como, especialmente por correo electrónico y quieres señalar a alguien la dirección correcta. Querías tener que decir en la página cuatro de esta sección, puedes vincular la bebida a ella. No tiene que ser una sección. Puedes enlazar a lo que quieras este módulo, son lo mismo que pasa. No importa lo que hayas seleccionado. Nos vincularemos directamente a él. Bien, esto trae a colación un buen punto. Cuando hay varias personas usan un sistema de diseño central, pueden ser muchas flechas alrededor o podrías estar ejecutando una reunión y todos los que están en el archivo y es como flechas corriendo por todas partes. Me resulta útil ir Comando acciones bastante rápidas. Y si escribes varios cursores, está activado por defecto hay un atajo que nunca recordaré, pero puedo apagarlo. Y solo significa que a pesar de que puedan ser diez personas en la reunión que vas a hacer una demostración de esto un poco Puedes apagarlos todos. Otra cosa que puedes hacer si estás presentando es que puedes subir hasta aquí e ir al centro de atención. Yo. Y lo que acaban de significar es todos los que todavía están en este documento. Lo tengo abierto en un par de computadoras, mi computadora portátil por aquí, y la tengo abierta en el navegador. Lo que eso significa es que verán el nivel de zoom y el posicionamiento de dónde estás. Si hago zoom aquí, todos demás que vean esto estarán en el mismo nivel de zoom. Mirar lo mismo hace que sea muy fácil para presentar echar un vistazo a la vista de escritorio. puede ver que es movimiento ascensores en realidad lo hacen un poco de sabor. Moverse por aquí. Esta otra instancia de la misma no importa si eres tú en el momento esa es otra versión de mí. Pero podría ser todo tu equipo si dices a esta opción aquí, sígueme, todos lo siguen. Ellos pueden ignorarlo y puedes detenerlo después. Lo siguiente es hacer con las notificaciones. Son geniales a veces y luego a veces no. Tengo la aplicación de escritorio. Entonces una de las ventajas es que tienes este pequeño módulo que se ejecuta que aparece cuando gente agrega notas a tu archivo Figma, puedes tener conversaciones a través A veces aunque solo harías parte de un archivo, digamos los estilos principales. En realidad no necesitas ser parte de la conversación. Hay mucha gente hablando de ello y solo quieres quitarte manos arriba quién es el correo electrónico está lleno de notificaciones de Figma que no son relevantes para ellos. Lo que puedes hacer es entrar en la configuración de tu cuenta ya sea en el sitio web o aquí en la aplicación de escritorio. Las notificaciones giran un poco de tiempo decidiendo sobre lo que quieres que te pase Dependerá de tu papel en el documento. Muchas veces solo necesitas cosas como, solo quiero si me han mencionado directamente o se aplicaron a uno de mis comentarios, podemos hacerlos off y utilizar algo así como la versión de la app de escritorio de Figma. Esa es la única forma de obtener las notificaciones por aquí. La otra cosa a considerar cuando estás compartiendo es que tengo esto y quería compartirlo. ¿Bien? La forma en que configuras esto, cuando estás compartiendo el enlace, puedes compartir tanto el archivo de diseño como el prototipo. Se quiere decir los prototipos para que no vayan mejor al archivo de diseño para los clientes, sino también a otros miembros del equipo Lo que puedes hacer es lo que tienes sentado aquí será recordado. El enlace. ¿Por qué quieres decir con eso? Es si digo set to real size y luego pulsa Share, se abrirá en la computadora de la otra persona a tamaño real, no en el Fit to Screen, lo mismo con el Chrome. Así que vuelvo a aquí, me puse a prototipar y digo en realidad quiero que se prevea en el iPhone 14, pero quiero usar la versión roja. Ahora bien, si voy en vista previa, pero hago esos cambios y comparto el prototipo, aparecerá rojo y ahí está, así que solo ten cuidado, consíguelo de la manera que quieras antes de llegar al prototipo de compartir El último atajo que acabo de recordar es Comando o Control L. Puedes ver lo que sea que estés en él. Compartiremos un enlace a eso. No tienes que pasar por toda la molestia de ir esto y luego hacer clic en ese Comando o Control L, Mac o PC. Lo mismo tanto para prototipos como para Design View. Si tengo esto seleccionado, voy Comando L en mi Mac, control L en una PC, ¿ves que está vinculado a ese marco Ahora para pinta esto en un navegador, ves que está vinculado directamente a esta página aquí. Iré y agregaré ese ahora a la hoja de acceso directo antes de que me olvide. Bien, así que eso es todo el tipo de pequeños pedacitos, el tipo de consejos y trucos para compartir con los clientes Y hay muchos Consejos y Trucos más sustanciales trabajando con colegas y los cubriremos en los próximos videos. 165. Cómo duplicar y restaurar el historial de versiones de las vistas en Figma: Hola a todos. Oye, vamos a hacer una inmersión profunda en el historial de versiones. Eso es esto de aquí que tocamos antes. Pero hay muchas otras cosas interesantes que pueden hacer. Quieres envolverlo todo en un bonito video. Hablaremos de copias de seguridad automáticas, historial de versiones, cómo ir y venir y tiempo, cómo compartir enlaces de versiones anteriores. Todo tipo de cosas geniales. Vamos a saltar, bien, todo lo que necesitamos se esconde en algo llamado show version history. Lo miramos brevemente antes. Vamos a entrar en ello correctamente. Y así no tengo nada seleccionado. Entonces puedes ver el nombre del archivo aquí y debería estar ahí. puedes encontrar debajo aquí, debajo de la F, bajo archivo. Ahí está también. Bien, de cualquier manera, tenemos nuestro historial de versiones. Ahora, antes que nada, hablemos del auto guardado. Así que hay un gran trozo de auto guardado. Oye, tu que estás viendo probablemente solo tiene automático en guardar manualmente versiones de mi historial a medida que avanzo. Pero puedes ver aquí un trozo de auto guardado. Ahora Figma es, lo guarda cada como 30 min que el archivo esté inactivo No se ha cambiado nada al respecto. Entonces no graba todo y cada paso solo Graba un poco como si, pausas, graba justo antes irte para una pausa de color brillante Y va a enumerar a todos los que hayan trabajado en ese archivo. Es solo que estoy trabajando en este archivo en este momento. Así que fue menos como un deshacer y decir Photoshop y más como key pots, grandes hitos, que porque es genial, eso es automático y a veces quieres un poco más granular y luego tendrás que hacer un manual guardar lo único que hay que saber sobre cualquiera de este historial de versiones con un lo pones o se guarda automáticamente, Photoshop y más como key pots, grandes hitos, que porque es genial, eso es automático y a veces quieres un poco más granular y luego tendrás que hacer un manual guardar lo único que hay que saber sobre cualquiera de este historial de versiones con un lo pones o se guarda automáticamente, 0 es que si estás en el plan gratuito o si estás en borradores, solo lo guarda por 30 días Bien, así que ponlo en un equipo pagado. Entonces, si quieres conservarlo para siempre y lo guarda todo en el historial de versiones, necesitas estar en el plan de un equipo pago. Entonces quieres guardar una versión, puedes golpear esta opción Plus aquí. O en lugar de pasar por todo eso, puedes usar el atajo, que es Opción de Comando en un Mac, Control Alt S en una PC en esto actúa como un guardado regular. Lo bueno de esto es bueno agregar un poco de detalle, agregar un título, Editar, descripción y guardarlo. Sólo debes saber que si necesitas regresar, bien. Puedes entrar aquí y puedes hacer un par de cosas. Cuando vas a esta lista, funciona de manera extraña Digamos que quiero volver a hace cinco días. Si hago clic en esto, me llevará de vuelta a esa página. Se puede ver que algunos de los diseños desaparecieron. Y puedo verlo y lo puedo hacer zoom, pero en realidad no puedo hacer clic en nada. Es como una vista solo si quisieras entrar aquí y decir copiar y pegar otra cosa, o al menos restaurar a esto. Todas las opciones a lo largo de aquí, incluso las guardadas automáticas tienen estos pequeños puntos aquí, haga clic en ellos. Y puedo hacer un par de cosas podría restaurar a esta versión, que significa que todo se vuelve a enrollar hasta aquí, bien, en lo bueno de eso es digamos que la gente está comentando sobre nuestro trabajo Los comentarios siguen siendo caso. No los pierdes, pero el trabajo va a retroceder hasta aquí. Bueno, tal vez quieras hacer es tal vez quieras duplicarlo. Terminarás quién versiones. Y lo genial de esto es que mientras hace una copia del mismo, es un archivo completamente separado. Ahora podrías usar esto para poco ir en una dirección diferente Podría ser para compartir este archivo que puedas seguir trabajando en el original, tal vez otro miembro del equipo. Lo único a tener en cuenta es que este original aún tiene su historial de versiones. Esta nueva copia duplicada, archivo completamente nuevo no tiene el historial. Es una especie de cerebro iniciado tú. Otra cosa que puedes hacer y lo que a menudo hago si quiero volver atrás y agarrar algo es que voy a pasar por aquí y puedes restaurar a esta versión. Así que vamos a restaurar a esta versión antigua. Dale una especie de destellos enfermos y hace algo. Lo grande para mí es que lo intenté dice botón aquí arriba, el botón Listo. Bien. No estoy seguro de por qué necesito hacer clic en eso también, pero sí. Bien, ahora es totalmente editable y lo genial de ello ya que puedo ir y agarrar cosas, no sé lo que necesito No lo sé. Voy a agarrar esto. Voy a copiarlo. Y ahora puedo volver a esa primera visión aunque hagas un poco de trabajo aquí, bien, cosas de Rick. Bien. Se puede volver a ese historial de versiones y volver al que estaba trabajando. No hay versión actual. De vuelta a esa que guardé y puedo restaurarla aquí. Empezamos esta versión. No olvides golpear Hecho una vez que parpadea, espera. Ese flash dependerá de lo complejo que sean tus diseñadores, bien, cuántos activos estén usando. Golpe Hecho. Y ahora estoy de vuelta a donde estaba, pero puedo pegar esa cosa que borré accidentalmente o rompí o simplemente quiero usarla como referencia. La otra cosa al trabajar con esto ya que puede ponerse un poco desordenado Así que a veces así tiene tantas opciones aquí, como todas estas guardas automáticas aquí. Lo que puedes hacer es ir a Filtrar y en realidad solo mostrarme, como decir que estás trabajando con un gran equipo para mostrarme tus cambios. Pero para mí y para cualquiera que trabaje en este archivo, así que eso no es tan útil. Lo que me ayuda es que puedo apagar el auto guardado solo por las cosas que a propósito he ido y agregado un hito para He agregado al historial de versiones de dado el nombre, ser dueño de un programa, aquellos que podrían ser útiles para mis pedidos, los de vuelta La otra cosa genial es que en realidad puedes compartir versiones anteriores. Puedes volver a aquí y decir en realidad, quiero ver cuando hicimos esto, cuando va a los puntitos aquí. Y quiero copiar un enlace a éste, lo cual es muy útil. Puedes compartirlo. Será vista solo así. La gente puede mirarlo, bien, pero no pueden actualizarlo ni cambiarlo todo seleccionado. Pero si lo estás haciendo referencia, eso puede ser muy útil de compartir El enlace está aquí, lo pegaré en un navegador y está compartiendo a esta versión específica del mismo. Parecía diez años mirándolo también. Lo último que quiero mostrarte es Registros de Actividad. No tengo la cuenta adecuada para esto, pero si estás trabajando a nivel de plan empresarial organizacional, puedes ver algo llamado Registros de Actividad son bastante fáciles de entender. Para echar un vistazo a tu cuenta de administrador, tendrás acceso de hermano mayor. Podrás ver quién, cuándo y qué le hicieron al archivo y dónde acceden a él desde K Se llama Registros de Actividad y puedes verlo un poco aquí Es una configuración de administración, pero solo si tienes en este momento, es empresa y organización. Entonces, si necesitas averiguar qué pasó donde esta es una visión general realmente genial. Se llama Registro de Actividades. Bien, esa es la inmersión profunda en el historial de versiones. Te veré en el siguiente video. 166. Cómo archivar y restaurar versiones anteriores de archivos Figma: Hola a todos. En este video vamos a ver archivar ciertas partes de un archivo de diseño. Digamos que quieres eliminar componentes o eliminar páginas porque ya no se usan. Pero quieres poder volver por si acaso. Lo importante para recordar es que si estás en un plan gratuito o tus contribuyentes de combustible y bajan, no importa Solo hay 30 días de historia y ahorro. Incluso con estas versiones arco, necesitas un plan empresarial de pago u organizacional. Y estas versiones de archivo se quedarán para siempre. Básicamente, vamos a aprovechar el historial de versiones. Déjame mostrarte cómo funciona. Bien, Así que archivar trabajos antiguos, no hay como sección oficial de archivo. Básicamente vamos a utilizar lo que sabemos sobre el historial de versiones. Pero hay una buena práctica a seguir para asegurarse de que sea fácil regresar y sentirse seguro cuando usted, especialmente cuando está borrando cosas de archivos. Digamos que hemos trasladado la mayoría de nuestros componentes o todo lo que necesitamos a un archivo separado. Entonces tengo aquí esta página que no necesito. Bien, entonces voy a hacer clic derecho en él y voy a borrar la página y enloquecer porque estoy como, ¿Y si hay algo ahí Entonces lo que voy a hacer es guardar un historial de versiones. Recuerda nuestro atajo Command Option S o Control Alt S en una PC, y llamemos a este archivo. Bien, lograr II. De todos modos, archivo. Y vamos a poner la fecha, así que vamos a poner en mayo y ponerla en 3 de mayo, lo que cambió. Bien. Esto será útil para el futuro Dan. Entonces vamos a decir eliminado la velocidad real a través de esto. Bien, agregaremos alguna documentación. Lo bueno de eso es que ahora puedo decir ahora borrar, irse, ir por mi trabajo, seguir trabajando, seguir trabajando. Sepa que está ahí. Bien, puedo volver a mi historial de versiones. Bien, y di, mira, aunque he hecho cosas, puedo volver aquí. ¿Cómo vuelvo aquí? Puedo hacer click en él y puedo ir a los puntitos. Puedo hacer clic en él en realidad y simplemente trabajar mi camino alrededor. Verás que las páginas de componentes atrás para que pueda ir a través y simplemente revisarla mientras estamos en este modo. Recuerda, podemos acercar, mirar y verificar, pero no podemos copiar y pegar nada. No podemos manipular cosas. Si quieres hacer eso, puedes hacer restore a esta versión, agarrar las cosas que quieras, y luego saltar de nuevo a la versión actual O tal vez quieras separarlo y duplicarlo. Entonces tienes otro archivo separado o creas otro archivo Figma, una copia Y podemos renombrar esto ahora algo más apropiado. Lo dejaré perdiendo mi carpeta de borradores. Bien, y cuando hayas terminado, vamos a hacer clic en Listo. Así que siempre puedo volver ahí para que sea incluso útil. Volvamos a nuestro historial de versiones ahora si dev version history, si no tienes que tener nada seleccionado, entonces ve a la pequeña carrera de forma. Lo que puedes hacer un poco más profesional es que puedes hacer click en él, dar click en los puntitos y decir Copiar enlace. Bien, y luego podemos crear un registro de cambios hit Hecho. Voy a crear una nueva página. Así que simplemente rápidamente azoté esto en una portada y aquí están mis versiones de archivo Bien, Ahora, hay un pequeño bicho con este pollo funciona ahora porque lo que sería realmente útil es irse, bien, hoy es esto Voy a escabullirme por el texto. Voy a agregar un hipervínculo. Voy a pegar en eso, pero eso no parece funcionar. Al igual que puedes pincharlo seguro, pero lo hace. Eso, enlaza a la misma página, solo tiene problemas por el momento. Entonces por el momento la respuesta es que es solo una pegarlo como una URL, cual no es hermoso porque ese no es hermoso nombre de archivo, pero la gente puede copiarlo y pegarlo Voy a hacerlo bastante pequeño. Y cuando podría tener que agregar algunas notas ahí de como copiar y pegar esto para volver a este archivo. Particular, aunque no lo han arreglado. Incluso puedes ver por defecto que lo ha convertido en un enlace en el que se puede hacer clic, lo cual no sigue siendo bueno Voy a romper el enlace a ella. En realidad golpeé ese enlace ahí, rómpelo. Entonces eso son solo ticks en los que la gente puede hacer clic en él. Ojalá eso se actualice donde realmente puede hacer clic en él y de hecho vamos a ir a una versión archivada. Pero puedo copiarlo y pegarlo ya sea en modo vista o en modo diseño. Pégalo en un navegador, y verá que ha vuelto a esta versión de archivo. Y la gente puede ir y decidir si quiere restaurar esta versión o duplicarla. Vete tú. Así es como archivar al personal y tener cuidado de que no desaparezca para siempre. Sólo dale un nombre. Eso es realmente todo lo que necesitas hacer. Puedes ser un poco más fantasioso agarrando ese enlace, poniendo hacia la propia página que vas que está archivando tu trabajo sin tener un 167. Cómo crear y compartir flujos en Figma: Hola a todos. En este video vamos a mirar flujos y un poco más de profundidad. cubrimos en el curso Esenciales, un poco ya en este curso, pero hay mucho más que podemos hacer. Vamos a saltar y conocer los flujos un poco mejor, justo primero arriba, cambiemos al modo prototipo shift D K. Y si no lo has hecho, puedes ver que ya tengo montones de flujos. Si no lo has hecho, probablemente tengas cargas para el momento en este curso. Pero si no lo haces, haces clic en un marco y dices, me gustaría comenzar un flujo desde aquí. Y solo significa que podemos enlazar y enlazar un prototipo para comenzar desde aquí en lugar de la página uno, que es el valor predeterminado mientras estamos desarrollando esto, esto podría ser suficiente. Podemos simplemente presionar play y comenzar a ver desde allí donde podemos ir en un poco más de profundidad con los flujos es donde cuando estamos compartiendo con los clientes. Entonces no voy a tener nada seleccionado. Bien, y puedes empezar a ver por aquí, mira, ahí están todos mis flujos que tienen, resulta que conozco el flujo ocho. Creo que ahí está el en el que estoy trabajando y ver esto, puedo hacer clic en esto y me va a saltar a él, lo cual es útil. Voy a renombrar esto. Puedes cambiarle el nombre aquí haciendo doble clic en él, o cambiarle el nombre aquí La mía va a ser mi caja móvil. Y por qué lo nombrarías es que en modo prototipo, cuando envías un link a alguien, ¿ puedes ver todos los flujos por aquí en el costado? Y obviamente si el flujo 123 no es tan útil, este más útil, puedes agregar más información útil. Al volver a entrar aquí, voy a hacer clic en mi flujo de pago móvil. Y ahí está esta opción aquí para agregar más detalles para que la puedas poner en mucha documentación aquí. Mira, viñetas, negrita. Si sostienes el Comando I o puedes hacer cursiva, Es Control I en una PC, hay todo tipo de otras cosas. Si conoces el atajo Command Shift X para tachado, no estoy seguro de por qué conozco ese Es Control Shift X en una PC. Entonces, si conoces los atajos básicos para textos, puedes poner mucha información aquí, pero probablemente solo la use porque aunque es pegar un poco de descripción y puedes agregar un enlace ¿De dónde voy a conseguir ese enlace? Lo que voy a hacer es conseguir que la gente pueda hacer clic en ese enlace y saltar a esta página aquí. Voy a seleccionar toda mi sección. Podría ser un marco y puede ser cualquier cosa. Recuerda en el último video, si vamos a compartir y esto está encendido, se vinculará a las selecciones actuales. Si lo copio, vea una acción haga clic en esto. Vamos a esto y voy a destacar eso en hipervínculo, pégalo, guárdalo Bien, por qué eso es útil es cuando la gente está trabajando en mi prototipo, pueden hacer clic en el checkout móvil. Pueden ver que hay una descripción y pueden dar click sobre esto y saltará a la página correcta, solo buena documentación. La otra cosa que puedes hacer con los flujos es que en realidad puedes vincularte directamente a ellos en lugar de obtener esta gran pila de cosas que tener que trabajar que cuando ellos quieran, puedes tener nada seleccionado estar en modo prototipo. Y por aquí se puede decir, en realidad quiero enlazar solo a esta página en particular, copiarla y pegarla en una portada. Quizá estemos como éste de aquí. Phi acaba de golpear pegar. Ni siquiera tuve que golpear los atajos especiales para hipervínculo Simplemente asume que quieres pegarlo sobre el texto un poco subrayado Tú eres el encargado de convertirlo en el desagradable HTML del botón azul de los 80 y 90. Ahora, este enlace saltará directo a ese prototipo, al flujo correcto. Una última cosa es que puedes eliminar flujos. Voy a volver a mi página uno, cambiar uno para verlo todo. Cambiar al modo prototipo shift E. Puede seleccionarlos y eliminarlos. Si ya no los necesitas, puedes seleccionarlos e ir a menos por aquí para eliminarlos. Y por último, puedes moverlos, seleccionarlos e irte. Ahora está por aquí, haz un nuevo archivo, muévalo uno solo. Eso es flujos en Figma 168. Cómo usar la herramienta Slice de Figma: Hola a todos. ¿Qué hace esto para hacer? Es la Herramienta Rebanada. Tiene un atajo muy bueno. ¿Para qué sirve? Alerta de spoiler Es para exportar cosas y sólo nos va a ser útil para un par de nosotros. No quiero sobrevender demasiado la Herramienta Slice en la emocionante introducción, es utilitario Ahora siéntete mal por la Herramienta Slice, lo siento, Slice Tool. Vamos a saltar y conocerlo un poco mejor. A lo mejor la Herramienta Slice, aquí está, aquí arriba, es el atajo. ¿Qué hace? Básicamente su forma de exportar, hay un par de casos de uso. Digamos que tengo este doctor muy largo en el que estoy trabajando. Y cuando lo exporte, voy a exportar el minuto del fotograma con este gran PNG gigante. Entonces, para lo que puedo usarlo es en el teclado y simplemente arrastra una caja por donde quieras la exportación desde. Lo bueno de esto es que no va a exportar solo el marco. Va a exportar todo lo que hayas seleccionado. Entonces, incluso esta parte de fondo, es realmente útil cuando estás haciendo digamos, documentación, tal vez al desarrollador, o tal vez solo para tirar esto a un correo electrónico. Y la cosa es que si voy a mi panel Capas, lo verás aquí dentro. Se llama Slice uno. Vamos a darle un nombre. Bien, entonces mi nombre es Slice y escucho que tiene su propio independiente un poco como la opción Exportar Obviamente puedo entrar en el marco y exportar eso, bien, pero el mío va a ser demasiado largo. Así puedo seleccionar este marco, seleccionando el Slice como ellos han hecho un poco duro a propósito Para ser como, no sé, en el fondo, suele ser que tienes que seleccionarlos en tu panel Capas o arrastrar una cajita alrededor de ellos. Y tengo un poco su propio pequeño diseño como icono también Pero yo podría decir Exportaciones, Digamos PNG, el nombre viene de la capa y voy a darle a Export. Va a entrar en mi expediente. Entonces te vas, Aquí está mi nuevo caliente. Lo bueno de esto es que es repetible. Yo puedo hacer eso. Hacer mi cambio. Bien, agarra este, cópialo, pega y reemplaza. Bien, ahora puedo pasar y exportar exactamente esas mismas dimensiones como un antes y un después. Alguna vez lo has hecho cuando intentaste tomar dos capturas de pantalla usando say the max screenshot y nada se alineara para el suyo. Ahora, tengo dos versiones que son exactamente la misma documentación preferida. Ideal para correos electrónicos y también ideal para cortar páginas que también deben imprimirse Imprimir esto puede ser un gran problema dependiendo de su impresora y su dominio de diálogo de la impresora A veces es agradable solo agarrar una sección y esto es repetible La única otra cosa que es agradable de esto es que en lugar de solo tener un marco, realidad puedes atravesar múltiples marcos o grandes trozos del documento y agarrar muchas mascotas Por qué solo quiero usar mi captura de pantalla Comando Mayús cuatro. No, no estoy seguro de lo que es en una PC y arrastre cosas por ahí. Yo uso eso mayormente. Pero ahí tienes. Ahí está la herramienta Slice 169. Cómo exportar imágenes no recortadas y no escaladas de Figma: Hola a todos. En este video vamos a desatar imágenes listas para su exportación Dependiendo de lo mucho que sepas sobre el desarrollo. Tu desarrollador querrá la imagen completa y ellos harán la opción de ajuste de recorte de relleno codificar en sus lados, quieren la imagen completa. Pero si exporto esto de Figma ahora mismo lo va a recortar. Le va a dar esquinas redondeadas. Cómo libero esta imagen para poder enviársela a mi desarrollador en el tamaño completo o a un tamaño específico. Te voy a mostrar eso también. Bien, vamos a saltar, bien, la forma más fácil es con un complemento dulce Así que ve a plugins y escribe, exporta imágenes originales y ejecuta eso. Y básicamente hace lo que dice. Voy a hacer click en esto. Se trata de un relleno dentro de este marco. Y voy a decir, ¿quiero que sea PNG o JPEG? Jpeg va a ser bueno para mí. Y para la selección, solo vamos a tener las cosas que se seleccionan. Y haga clic en Exportar, disculpe el nombre de mi instancia. Eso es genial. Vamos a comprobarlo. Ah, sí, lo desempacó y lo trajo en su tamaño original que fue traído a Figma sin recortar saber Se lo puede hacer a todo grupo de cosas. Usted puede decidir. Puedes seleccionar todo en la página. O simplemente voy a hacer clic en este evento escuchando un montón de imágenes o recortado ahí Y puedes usar esta opción que dice seleccionar todo incluyendo a los niños. No te olvides de los niños. Bien. Ahora dolor de cabeza deporte. Obtendrás un archivo zip. Bien. Es echar un vistazo. Estoy en paquete y dentro de ese archivo zip. Oh, Dios mío. Mira eso. Están todos ahí dentro. Bueno, los alienígenas locos y todas las demás imágenes que compramos a través de plugins. Súper práctico. Bien, ahí está la forma hacky en que funciona igual El problema es, es que tu desarrollador podría querer ser autosuficiente y no quiere tener que revisar y tamizar todos los archivos para encontrar la imagen correcta, hacer coincidir los nombres Lo que puedes hacer es cuando compartes archivo, bien, copias el enlace que lo enviaste a tu desarrollador. Les has educado que necesitan ir a la pestaña Inspeccionar. Y lo han usado antes tal vez. Y pueden dar vueltas y pueden agarrar la barcaza de código CSS o iOS o Android No pueden llegar a la imagen. ¿Por qué puedo ver la imagen, CSS, cualquier cosa? Nada. Qué tipo de ver las imágenes entrar, seguir haciendo clic, seguir haciendo clic. Aún así. Nada. Ah, pero hay un hack. Siento que en un futuro cercano, solo se enumerará aquí. Pero en el momento si vas a alguno de estos cambia de la vista de código a TableView, por alguna razón puedes hacer click en eso Se abre en una nueva pestaña. Ahí vas. Puedes copiar y pegar eso, hacer clic derecho, copiar imagen o guardarla, vas, podrías usarla tú mismo en lugar del plugin, solo agarraste algunas imágenes que necesites Puedes copiarlo y pegarlo de nuevo en Figma si quieres. Básicamente de nuevo, es el tamaño completo que lo conseguí. Es una gran manera de poder extraer imágenes de plugins y averiguar dónde están, qué frío, pero también es útil para hacer dimensionamiento para que tenga que enviárselas a mi desarrollador. En realidad estoy usando la vista del navegador. Voy a volver a mi vista de escritorio. Y ojalá que el día del turno hubiera por allá. Daniel está trabajando en ello. Bien. Esta imagen aquí. Si voy a Diseño, necesito asegurarme de que esté marcando para exportación. Y lo que no todo el mundo sabe puedo hacer el tamaño completo o como medio tamaño con tamaño doble dependiendo de lo que necesite. Pero si bajas a este, este es quien podrías tener algunos requisitos máximos para tu sitio web. Digamos que podrías tener para una miniatura o algo así, es de 150 W, siempre y cuando pongas W ahí, exportará 150 píxeles de ancho Esa es una práctica. decidir que tienes un par de versiones. Hay una altura de 300 W o una H. Se puede pasar y seguir sumando exportaciones. Haga clic en Exportar imagen uno, nombre terrible. Pero ahora vas image1 punto PNG e image1 a las dos. Vete tú. Bien, eso es. Así es como desrastrear imágenes desde el interior de marcos y esquinas redondeadas y dejar caer sombras y sacarlo todo listo para 170. Cómo exportar imágenes webp de Figma y Photoshop: Hola a todos. En este video vamos a ver la web P. ¿Qué hace? Probablemente lo hayas visto por ahí. Algunos de ustedes no cubrirán rápidamente qué es y yo les mostraré cómo sacar ese formato de Figma. Básicamente, es un reemplazo para JPEGS y pngs . El súper impresionante. Si aún no lo has hecho, pronto se te pedirá que suministres imágenes en este formato. Así que vamos a saltar. En primer lugar, si no te han presentado ahora las imágenes Web P, ¿qué son? Sólo una nueva versión. Todos los JPEGS y pngs. ¿Es el reemplazo para ellos? Lo es. Estoy trabajando en sitios web que están sacando todos los JPEG y PNGs y reemplazándolos con ancho P porque son más pequeños, Y en un formato haremos como el formato con pérdidas, como los JPEG. Puedes bajar la calidad si necesitas ahorrar algunos kilobytes Pero también tiene transparencia como pngs, y también tiene un formato sin pérdidas No voy a pasar demasiado por lo que es perdedor y sin pérdidas. Y supongo que todo lo que necesitas saber es que te van a pedir cada vez más suministres imágenes webp a un desarrollador porque somos P es increíble Entonces por el momento no hay soporte nativo. Entonces tengo esta imagen aquí. Si voy a Exportar en este momento, tener un cheque, solo check in tu nueva versión con una Web P es una opción si no es como en mente, había un plugin para arreglarlo. Siempre hay un plugin. El mejor aquí que he estado usando es pequeño compresor de imagen. Bien, ejecuta eso y está revisando tu documento y buscando todo lo que le habías dicho a las exportaciones. Si no estás viendo nada por aquí, necesitas pasar por esa imagen y decir esa imagen. Y por aquí en tu panel Propiedades y las propiedades inspeccionadas irán a Exportar y no agrega nada ahí. Ahora que está etiquetado para Exportar, deberías poder refrescar esto y debería aparecer en esta lista. Lo que voy a hacer es que voy a usar esta. Si seleccionas algo, debería aparecer justo aquí. Y lo que voy a hacer es arriba aquí, esta pequeña opción de configuración. Esto cambiará tu plugin que podrías estar usando cambiando. Pero básicamente lo que estás buscando es, creo que por defecto en este plugin en particular, no hay conversión de imagen, y luego sale a JPEG. Y luego la segunda opción es JPEG y PNG a webp. Hay muchos más detalles en los que puedes entrar, pero eso es lo que quiero por el momento. Lo otro genial de esto es que puedes decidir si juegas con la calidad, ¿de acuerdo? Entonces di que quieres que sea de esta talla, pero cerca del 60%, ¿bien? En cuanto al formato con pérdida, puedes arrastrar la calidad hacia arriba y hacia abajo como una clavija J. Y los roles básicos es de aproximadamente 60% normalmente es bastante bueno. Si es una mala imagen, tal vez tengas que bajarla. Cuando digo mal, es simplemente de mala calidad. Pero si es fotografía comercial, probablemente puedas bajarla a 60 y nadie notará la diferencia. Haz algunas pruebas, mira lo que te funciona y las imágenes que tienes. Vamos a golpear la exportación. Bien, ahora tírala ahí y eso es lo que estamos buscando. Formato Web P. Es muy feliz consigo mismo. Bien, así que ahorró un montón. He, elijo la imagen más grande que encontré en tus archivos de ejercicios. La otra cosa interesante de este plugin en particular que me gusta mucho es que puedes configurarlo en tamaño objetivo. Se puede decir en realidad, no quiero que escojas una cualidad. Quiero que intentes conseguirlo a 200 kb. Digamos que es lo más grande que puede ser esta imagen. Bueno, sabes por tu desarrollador o tu experiencia que necesitas que las imágenes estén a 50 kb. Puedes hacer eso y mantendrá ese tamaño e intentará permanecer por debajo de los 200 kb, lo cual es súper genial. Sin embargo, lo que podríamos hacer es usar el tamaño real que lo puso en el documento. Es un aspecto masivo, es descomunal comparado con el resto Lo que podría hacer es igualar la altura mía de 844, que es mi dispositivo móvil Y luego refrescar la lista. Y luego lo va a exportar a 200 kb a ese tamaño. Definitivamente caben dentro del marco de mi teléfono, pero o tal vez 200 kb. Vamos. Partes de eso es exportar webp. En realidad también lo puedes hacer desde Photoshop en este momento. Bien, aún no es perfecto. Cheque. Lo que realmente quiere hacer es que quiero que esté bajo Photoshop y que esté bajo Exportar. Y quiero decir exportación ya que ahí es donde quiero que esté. Es la mejor manera de sacar imágenes de Photoshop para chequeo web aquí, bien, en el momento en que no haya un rosa raro, espero que sea pronto La razón por la que me gusta esto es que puedes tener múltiples tallas aquí, como puedes hacer en Figma. Bien, entonces va a exportar una talla única a X. Y puedes decidir su tamaño final porque en el momento en que esto es muy grande, lo que podemos hacer es que podamos decir por aquí a la salida, en lugar de redimensionar y Photoshop, podemos decir que en realidad tienes una altura de 500 y exportaremos todos los diferentes tamaños que necesitamos. Pero eso no está ahí en este momento. Podemos sacarlo usando el Guardar como. Así que solo espero, Archivo Guardar Como. Y hay una opción Web P ahí en este momento, simplemente lo devuelven y recientemente terminaron el cajón de basura, el cajón desordenado y desordenado de aquí Características similares a ese plugin se sienten más como una persona de Photoshop. Lossy va a bajar la calidad, pero muchas veces imperceptible, sin pérdidas significa que no puedes eliminar ninguna de la calidad, solo hazlo con P. Bien, así que eso es meter tus formatos de archivo en webp, solo una cosa útil para las personas que no han experimentado con P Ahora que se está volviendo cada vez solo una cosa útil para las personas que no han experimentado con P Ahora que experimentado con P Ahora pero muchas veces imperceptible, sin pérdidas significa que no puedes eliminar ninguna de la calidad, solo hazlo con P. Bien, así que eso es meter tus formatos de archivo en webp, solo una cosa útil para las personas que no han experimentado con P Ahora que se está volviendo cada vez más popular. Y sé que si estoy produciendo un sitio web ahora gráficos para sitio web, tienen que estar con P porque a Google le gusta, se descargan muy rápido y se ven geniales. Bien, eso es para web P, si ese plugin no funciona o sabes de un poco de plugin, avísame en los comentarios Y si estás viendo este video, revisa los comentarios si hay algo mejor, sobre todo si ya no hay imágenes diminutas alrededor. Bien, eso es. Te veré en el siguiente video. 171. Cómo reducir el tamaño de un archivo y reducir el tamaño de todas las imágenes en un archivo Figma: Hola a todos. ¿Tienes un archivo Figma grande que está usando imágenes que son demasiado grandes, entonces necesitas que Figma esté empezando a reportar errores porque está luchando con todas las imágenes gigantes Solo quiero cambiar el tamaño. Todo llena las imágenes por su cuenta. Ojalá hubiera una manera de simplemente reducir todo a un tamaño apropiado, no demasiado pequeño, pero no demasiado grande. Hay un plug-in para ese pequeño compresor de imagen. Reducir un tamaño, déjame mostrarte cómo funciona. Bien, la forma de cambiar el tamaño todas las imágenes en este momento es usando un complemento El que me gusta es pequeño compresor de imagen, reacio a mostrarte plugins porque cambian, se actualizan un poco a la interfaz de usuario va a ser un poco diferente para cuando llegues ahí Si encuentras uno que sea mejor. Háganos saber también en los comentarios. Bien, y van a pensar que estamos buscando es esta cosa llamada el downsize El único problema con el downsize es que forma parte de la cuenta pro Te dan 15 intentos, creo que por el momento, haces 15 va a hacer esto y eso podría ser suficiente vista por mucho tiempo. Y podrías considerar actualizar al mismo COAP. Así que todas estas imágenes han llegado a través de tamaños mucho más grandes para echar un vistazo a esta de agua de aquí. Así que voy a traerlo. Estoy usando este porque es el más grande en los archivos de ejercicios. Lo tengo de Unsplash. No tienes elección cuando traes algunas de estas imágenes y de qué tamaño vienen, qué calidad, especialmente si estás usando un plugin, solo las tiraste ahí. ¿Por qué no lo vamos a hacer es que esté cubierto en ese tamaño? Nunca necesité tan grande. Entonces lo que voy a hacer es usarlo en un tamaño más apropiado, el mismo tamaño que uno de mis archivos de imagen. Mismo tamaño es uno de mis teléfonos. Y lo que yo puedo hacer, no puedes tener nada seleccionado y puedes hacerlos todos. Sólo voy a hacer uno para acelerar esto. Y lo genial de esto es que puedes ver que tiene que reducirlo al doble del tamaño que lo necesito. Entonces esto es 844 En realidad lo va a hacer a los 16. 88 me da un poco de alcance y un poco de flexibilidad para exportarlo y ser lo suficientemente buena calidad. Un buen defecto tanto para móviles como para web es tener imágenes a lo que llaman a dos X el doble del tamaño que lo necesitas para pantallas de muy alta resolución. Perfecto. Hay pátina para todos ellos marcada en todo el documento Voy a ir a reducir el tamaño. Todo está hecho. Muy contento consigo mismo, 10 mb ahorrado. Y es que miren un poco. Entonces esta imagen ahora es mucho más pequeña. Cuánto más pequeño para echar un vistazo, recuerda nuestro truco familiar en que podemos ir a Inspeccionar e ir de código a tabla. Y deberías poder hacer click en cargas de imagen que hay por ahí. Voy a ir a guardar imágenes. Lo voy a meter en mi cajón de basura. le echa de menos el sorteo. Y echemos un vistazo. Entonces fue 6.2 y ha pasado por y se puso todo el aspecto como yo mencioné guardado no 10 mb. Nunca muestro cómo calculan cosas así. Pero bueno, es 0.3 mb en vez de seis. Va a hacer que Figma funcione muy bien. Y aún así te va a dar un tamaño de imagen apropiado para exportar cuando lo hagas, ve a enviarla al desarrollador, dados pesados, bien, eso es todo Es cómo agarrar un redimensionamiento de todas las imágenes, incluso las que se utilizan como relleno dentro de un marco en Figma. Gracias. Pequeña comparación de imágenes, pesar de que exageres un poco tus ahorros, 10 mb, estoy seguro que hay una razón No lo sé. Bien. Voy a ver en el siguiente video 172. Cómo documentar un componente en un sistema de diseño en Figma: Hola a todos. En este video vamos a ver cómo concretar un componente K documentar los diferentes elementos que lo componen, tamaños de fuente de color, también el diseño y espaciado y relleno, genial para compartir actualizaciones con el resto del equipo de diseño o hablar en un documento para desarrolladores o algo al respecto es que la mayor parte del trabajo lo realiza un plugin, verá el complemento súper impresionante en uno que es bastante detallado, uno que nos da mediciones de documentos un poco más simples. Figma tiene opciones de inspección para que la gente pueda pasar y verificarlo. Pero a menudo trabajando con equipos más grandes, también necesitamos hacer documentación. Bien, vamos a saltar, bien, para empezar, he creado una nueva página llamada Design spec y está vacía y es ir Option o Alt Y voy a escribir COD y voy a encontrar esto que hicimos hace tanto tiempo. ¿Recuerdas a este tipo? Bien. Necesitas tener algo seleccionado, puede ser cualquier cosa. Bien, y luego necesitas encontrar el plugin. Se llama ocho formas, la función de búsqueda en los complementos en este momento puedes tener ocho formas de espacio, simplemente no la encuentra. Así que pon unas formas en H juntas. Hay otras especificaciones, opciones, pero esta de aquí para mí en este momento es increíble, creo que son buenas en ella tiene algo seleccionado a primera hora, haga clic en Ejecutar y pateó atrás y relájese y sorpréndese, pero lo que hace, si nada más, es un gran lugar para comenzar Probablemente haya más detalles de los que necesitamos. Podría asustar a quien esté mirando esto pensar que el icono del corazón aquí abajo depende del icono slash Tal vez tengas que reformular eso para que quede más claro. Pero hombre, es un gran lugar para comenzar. La anatomía aquí y aquí abajo todo el diseño y espaciado. Nuevamente, aquí hay montones de detalles más de los que necesitamos, lo cual es bueno Bien, el relleno es útil, pero necesitamos dirección vertical, bien, es la forma en que las capas de orden lo apilaron, de ti también saca a relucir todo mi pobre caso de nomenclatura Un marco para obviamente no es muy buen caso. Tenemos que volver atrás y hacer un poco nombre antes de ejecutar esto Pero un lugar tan increíble en un plug-in tan bien diseñado, una cosa que podrías encontrar es que si hay anidado como este aquí era un anidado bastante complejo antes en No se ha definido madrugador, bien, número siete, Precio grande. No ha podido indagar en la instancia que es esa carta inferior y el madrugador. Aquí se puede ver que no está documentado en absoluto. Entonces a veces dependiendo de la estructura de la misma, hagamos otra versión de la misma y tal vez tengas que separarla un poco. Bien, entonces voy a usar mi Opción de Comando B, controlar upbeat, romperlo aparte Vamos a la opción uno y echemos un vistazo en nuestras capas. Entonces ahí está mi Tarjeta de Evento aquí, encendido, apagado. Puedes ver ahí, hay Instancias anidadas aquí. Entonces los íconos calientes, no un gran drama. Es esta de aquí la que tiene cosas dentro de ella. Entonces voy a romper eso aparte. Voy a entrar en el precio, romper eso aparte. Y debería ver todo esto ahora, ¿necesito romper eso? De todos modos? No lo destrozó un poco, pero al menos ahora con fines de documentación, ejecutando esta dulce aplicación Bien, vamos a echar un vistazo. Bien, así que un vistazo a, para meterte en ello. Es mucho más largo. Bien. Y sí, se han roto estas macetas. También es útil para mí porque a veces te gusta, ¿ verdad puedo decir que eso sea de cinco píxeles? Vamos a ver la parte superior ahí. Ningún juego de palabras pretendía el fondo. No es lo que quería. Bien. Y puede pasar y hacer ajustes antes enviar esto para su desarrollo y agregar esto a la documentación. Otro práctico es que este de aquí hace algunas cosas realmente geniales. Sin embargo, es bastante largo y detallado, lo cual es increíble. Aunque a veces. Vamos a agarrar esto, hacer otra versión de ello. Y hay otro perro. Ya miramos esto antes. Se llama Diseño doc. Ahí está. Design doc ejecuta algo similar, pero es más para la suerte. Mediciones, ¿bien? Se hace la altura y el ancho, y puedes hacer clic en las cosas, las cosas que son importantes para ti, ¿de acuerdo? Y luego vuelve a medir Mode, y ya ha pasado y edita el relleno. Es un poco, supongo, solo de una manera diferente si documentar de nuevo, lo mismo aquí. A mí me encanta. Una cosa que notarás es que en tu panel Capas, ¿ puedes ver lo masivo que es ahora? Estos plugins están creando mucho detalle, sobre todo ese primero. Bien, así que mantenlo en su propia página. Y con un doc de diseño, Hay un montón de cosas de candados porque hay cosas como, no necesito esta diapositiva del ancho otra vez, ya está ahí dentro. Entonces voy a seleccionar todo esto. Alguien recuerda cuál es el atajo para desbloquear Command Shift L, ¿adivina bien Control Shift L, The Container Store los internos totales también. Bien, ahora puedo decir en realidad este cambio a padre, cambio a padre, darle una regla que cualquiera de las EDT es, podrías usar esto ya sea como una adición a este otro plugin realmente depende de cuáles son los requisitos para ti y tu empresa uno a uno con los desarrolladores, algo como esto podría ser suficiente, chatea con ellos, mira lo que quieren Pero si estás construyendo nuestra documentación en línea, kay, un sistema de diseño para que mucha gente lo use y una gran organización, algo como esto es muy útil. Podemos agregar mucho más texto y explicación asegurándonos de que la gente use tus componentes, ¿verdad? Bien, eso es. Esa es una excelente manera de comenzar a documentar tus componentes usando un complemento dulce en Figma 173. Cómo usar el modo DEV en Figma: Hola a todos. Un video de actualización. Han cambiado nuestro modo de inspección a este modo dev. Son un poco desnudos en beta. Sin embargo, está en la versión completa. Y lo único a tener en cuenta al respecto es que solía ser inspeccionado aquí. Ahora es este interruptor de palanca de aquí. Se llega al mismo lugar, pero con aguinaldos. Entonces es lindo. La otra cosa a tener en cuenta es que de momento, es lo que se llama una beta abierta para que todos puedan usarla. Bien, pero habrá un tiempo en el futuro en el que están plan es convertirlo en un Pro solamente. Así que podrías terminar teniendo inspeccionar o una versión recortada de este modo dev. Pero por el momento todos pueden usar de todo. Entonces, entremos en los pros por ello. Bien, el mayor profesional es que está diseñado más para su uso en desarrollo Mientras que antes los desarrolladores podían perderse, incluso en un modo de inspección, se pierden. Un poco como mirar alrededor, sobre todo si tu documento se ve así, eso como ¿qué hago? Lo que puedes hacer ahora como diseñador, bien, así que todavía estamos en modo de diseño y vamos a usar Secciones, si acaso también está en uso para esto. Entonces secciones que hemos mirado, voy a agarrar esto y lo voy a poner alrededor de algo que quiero identificar para mi desarrollo. Digamos que es este marco aquí para que pueda dibujar una caja alrededor de él. La diferencia con las secciones ahora es que es posible que la hayas visto. Aquí está esta cosita. Bien, dice Mark para el desarrollo. Si voy a mi herramienta de flecha, puedo hacer clic en eso. Bien, tan listo para DIV. Entonces hago clic en eso y nada cambia realmente en este modo excepto cuando voy al modo desarrollador. Y esto está lleno, desarrollas la visión que dharma en ver tu diseño a través Lo que termina pasando es ver en el lado izquierdo aquí, habrá un poco de coaching para que tu desarrollador se acostumbre Hay una sección lista para el desarrollo, bien, Así que cuando abren el documento y se ve así, y luego van por aquí. Sólo hay esta sección que podrías nombrar mejor que la Sección uno. Esta es mi pantalla de fin de semana, así que la nombraría como tal. Da click en él, pueden ir a él. Así que eso es genial. ¿Cómo le das esto a tu desarrollador, bien, Así que tú como diseñador o en este Modo azul, Modo verde, modo azul. Bien, Entonces tu propio este modo aquí. Si voy a esquilar en este momento, sólo puedo compartir eslabones y barba, como las cosas normales. Pero si voy al modo dev y obtengo un share, puedo decir copiar el enlace dev. Eso solo significa que llegan a esta aplicación, pero llegarán a ella a través esta versión verde para que no tengan que entrar en modo de diseño y luego alternar el interruptor, solo ve directo a aquí. Y como si tienes algo seleccionado como este aquí, puedes enlazar a una selección para que puedan ir directo a ella y tal vez no confundir demasiado a la gente Bien, así que eso es lo primero que puedes tener claro sobre lo que está pasando. Más bien tener una página separada de la que tal vez se deshaga para dev, puedes simplemente poner una Sección alrededor de ella y decir Haz esto. Ahora vamos a saltar a este archivo es un poco más limpio. Y la siguiente característica más interesante y útil para un desarrollador, K con a, la estás usando para desarrollar o probablemente la siguiente persona en la fila, tu desarrollador que está tomando tu diseño y construyéndolo, es, digamos que cambio el color de este botón a esta otra variable y usándolos un diseño dices que esto está listo para DIV, ¿bien? En realidad no tienes que poner la sección alrededor que dice listo para Dave es solo una cosa útil. Se puede dejar como está y se ve en este archivo, bien, pero obtienen esta versión. Me gusta, ¿qué has hecho? Lo que puedes hacer es un desarrollador es que puedes hacer click en el marco y puedes ir a esta opción aquí puedes ver que fue editado por Awesome hace un minuto, son Diego o por mucho tiempo que haya sido. Esta cosa de aquí es muy genial. Compara los cambios. Para que veas ahí está mi botón a la izquierda, el botón a la derecha. Bien, Entonces, la comparación lado a lado versus Superposición depende como un cambio de color va a ser complicado de hacer Porque el overlay hace esto, no lo sé. Simplemente puedes arrastrarlo de un lado a otro. ¿Ves que eso lo pone fácil? Ver los colores uno al lado del otro podría ser igual de útil. La otra cosa genial está aquí abajo. ¿De verdad ves que tiene un historial de, digamos mi botón principal aquí Me muestra que el anterior, el color de relleno era este, y estaba usando esta variable. El actual es este otro color, pero usando esta variable, súper práctico. Y entonces puedes volver a través los cambios y solo ver como a lo mejor no lo han visto diez cambios en el like Man, esto no se parece en nada a que lo toqué. Pueden volver a través de la última vez que se disparan. Bien, entonces eso es súper útil. Otras cosas generales es que les facilita las cosas seleccionar, Bien, Así que en el pasado, Así que en el pasado, especialmente si tienes autolayouts en lugar de grupos dentro de frames en lugar de frames en lugar de frames en lugar de grupos dentro de frames en lugar de frames en lugar de frames en lugar de Puede ser bastante complicado entrar y obtener las cosas como íconos. Entonces esto solo puedo hacer un clic y he seleccionado el botón Plus. Eso, un poco inhabilitó algunos de esos niveles, una agrupación de niveles más profundos para ellos porque no quieren conocer todos los grupos Ellos solo quieren el icono. Pueden pinchar sobre él y simplemente ir directo a él. Ver las cosas generales que vimos cuando solíamos tener inspeccionar solo por sí mismo. Uno de los cambios es que puedes como diseñador o desarrollador, vinculado a los recursos que tu biblioteca GitHub podría ser que puedas vincular a Asana Si es un programa de trabajo quieres conectarte con justamente cosas que me gustan. Podría ser documentación alrededor, como la implementación del botón en su sistema de diseño, para que pueda vincularse a esos. La otra cosa es, eso es más típico dependiendo si has hecho diseño web antes Este border-box es una manera que eso estaría acostumbrado a ver cosas como si hago clic en esto aquí, habrá acostumbrado a ver el padding y border expresado de esta manera Lo mismo, solo que más amigable con los desarrolladores. Y la otra cosa está aquí abajo, parte del código que podrían usar podría ser genial para copiar y pegar algo de esto. Probablemente no. Probablemente lo van a reescribir o usar su propio sabor de lo que están haciendo MALO Les da un Sainz. Es muy fácil ver lo que has hecho. La otra cosa es, es que nosotros usando CSS, podrían estar usando uno de los frameworks de desarrollo de aplicaciones. Y pueden cambiar entre algo que les funcione mejor, como normal a estilos y colores. Pueden pasar y exportar esto. Así que vamos a echar un vistazo a esto. Pueden irse, tienen este botón más. Pueden venir aquí y decir en realidad tapas, dame esto, tengo este ícono. Es un SVG. Voy a descargarlo y el desarrollador lo tiene listo para funcionar si no se lo estás enviando directamente. Otro tipo de cosas más normales es que cuando se ciernen por encima de cosas que no tienen que mantener presionadas ninguna de las llaves Recuerda que antes en el curso tenemos que mantener presionada opción para obtener cosas como el espaciado y el relleno. Para el modo desarrollador, simplemente pasas el cursor por encima de las cosas. Tienes que hacer cualquier cosa y puedes empezar a ver todas las cosas incluyendo como como nosotros usando tarjeta de relleno, recuerda esa variable, bien, y luego tengo que hacer cualquier cosa simplemente sale bien. Otra característica interesante para los desarrolladores es que pasamos algún tiempo antes en el curso haciendo que estos componentes tengan Propiedades. Recuerden por aquí podemos decir en realidad queremos el descarte Bien, teníamos Lower, teníamos una versión grande, teníamos una versión pequeña, teníamos una con el precio de descuento. Entonces diferentes versiones de la misma. ¿Cómo le comunicas eso al desarrollador? Normalmente a través de documentación. Pero ahora bajo el modo dev, lo que pueden hacer es que pueden hacer click en él. Pueden ver todas las diferentes propiedades que tienes utilería. Y puedes ver aquí price lodge, en realidad, lo que haces es entrar al patio de recreo y ellos pueden meterse con él y no van a meterse con tu diseño. Porque entonces el modo de diseño, si lo cambias, se queda un poco en ese Modo Mientras que aquí, puedes meterte con eso, romperlo, cambiarlo, resolver lo que va a pasar. Y luego cuando lo cierras, no está afectando a la Opción de Diseño. K solo una, es un patio de recreo y puedes meterte con él y tener una idea de lo que tú, el diseñador, estás buscando para hacer estas diferentes opciones. Así que esa es una característica útil también. El último par de características es que bajo Configuración de código pueden cambiar a unidades. Bien, Así que desarrollas puede ser probablemente si están haciendo cosas web, probablemente tratando con mediciones relativas en lugar de píxeles que usamos aquí en Figma, pueden cambiar eso ¿Bien? El otro es plugin. Así que aquí hay dos conjuntos de plugins. Hay plugins que pueden usar. Digo ellos porque es la otra persona. No soy desarrollador. Puedo hacer un poco de cosas de front-end y copiar y pegar código. Pero no soy un ingeniero adecuado. Entonces hay cosas para el Div que les serán útiles, para que los plugins ayuden a sacar cosas de Figma para ellos. El otro conjunto de plugins es en realidad Figma tiene un plugin. Probablemente el más útil es VS Code porque VS Code es editor de texto muy común para los desarrolladores. Y hay un plugin Figma para eso, lo cual es realmente genial Bien, así que podrías aconsejarles sobre eso y trae algunas de las características de diseño en VS Code. Pueden tirar cosas como el modo dev, forzar al código VS en lugar de pasar de Figma y cambiar entre aplicaciones Entonces ese es un pequeño complemento genial también. Solo recuerda, por el momento, todos pueden usar el Modo, cómo lo van a implementar en el futuro por pago, las personas no remuneradas tendrán que ver qué es eso y tendré que actualizar el video si es un gran cambio Pero de lo contrario por el momento, todos pueden usarlo. Esa será una característica pro one, dev Mode. Bien, ese es el modo dev. Ve tú, te veré en el siguiente video. 174. Proyecto de clase 20: termina tu diseño: Hola a todos. Es el proyecto de última clase. Espero que no estés trabajando. Eres como Ningún hombre, ojalá hubiera más. De cualquier manera. Este es el proyecto. Termina tu diseño. Bien, así que hemos estado construyendo partes de este poco desordenado a lo largo del curso Quiero que los ordenes, prepares algo para tu portafolio y pongas en práctica algunas de esas habilidades. Entonces básicamente, construí un poco de estructura metálica. Está en los expedientes de ejercicio. Hay algo llamado proyecto de clase final Z. Solo para que esté al final de la lista ahí, hay un PDF y aquí esto es lo que lo consiguió. Un poco de estructura metálica para que trabajes. Deberías tener mucho de esto ya. Las páginas también están en el individualmente. Déjame mostrarte el archivo que hice . Bien, aquí está Entonces ya has hecho una pantalla de bienvenida, parte entrando en tu página arriba. Recuerda este caso, soy una especie de animación en la pantalla de bienvenida. Entonces, ¿qué sucede cuando la gente instala tu app por primera vez? Un poco como el onboarding no tiene que ser demasiado espectacular, pero solo arregla eso si no lo hiciste antes en la Ahora la página de inicio, no voy a hacer que sea demasiado complicado. Podría estar en desacuerdo. Pero lo que vamos a hacer es que vamos a tener tres opciones de categoría. Cuando aterrice, salga de la pantalla de bienvenida. Va a ser FirstPage cuando se cargue la aplicación, bien, y eso va a ir a eventos de tendencia, bien, Así que usas la tarjeta de eventos, ordenas eso de antes en adelante Lo que quería hacer es tener otras dos categorías. Bien, entonces tenemos tendencia. ¿Bien? Las otras páginas podrían ser como lo hicimos en el curso donde tuvimos este fin de semana. Podrían ser subcategorías dentro del género musical que tienes, bien, podría ser nuevo este fin de semana En lo que quieras dividirlo. Ese aspecto muy parecido para querer hacer es tener esa subred que teníamos antes Entonces si nos vemos bien, hay de él, bien, para que no tenga que parecer que esto no tiene que funcionar de la misma manera Sólo una especie de navegación extra para sortear esas tres categorías. Puedes tener cuatro categorías. Puede tener que verte ir a la página principal prestando todos estos. En realidad, voy a copiar y pegar estas tarjetas. ¿Cuáles son esos marcos? Bien, así que solo forma de algo así como cambiar entre estas tres categorías Me gustaría que también tuvieras una opción de búsqueda. Hicimos la barra de búsqueda, no desarrollamos una página de resultados de búsqueda. Me gustaría que investigaras un poco sobre cómo debería ser eso. Una de las pocas cosas que no hemos abordado a lo largo del curso, a través de los proyectos Entonces tengo la barra de búsqueda y tengo una página de resultados de búsqueda y ya sea haciendo clic en las tarjetas del evento o los resultados de búsqueda entrar en Detalles del evento. Entonces solo ubicación, precio, qué se trata, algunas imágenes Y cuando eso se complete, quiero que la gente pueda comprar un boleto y haremos un simple flujo de caja, bien, entonces este flujo de pago estará ahí a través del carrito de como lo que has recibido tus datos de pago con tarjeta nosotros el siguiente paso y luego una página de confirmación Eso es. Veamos el proyecto de clase. Asegúrate de que me he perdido cualquier cosa. Página de inicio de animación de bienvenida. Va a ir por defecto a la página de tendencias, va a ser un Nav bajo y una navegación de subcategoría Bien. Ese es el nav inferior ahí en la subcategoría Navegación es que cuando estas páginas de categoría, van a haber tres, incluyendo la página principal de trending Puedes ser mucho más creativo que yo y las diferentes categorías, no me importa lo que sean. Bien. Tener una barra de búsqueda con la página de resultados, Detalles del evento, flujo de pago. Lo último es que quiero que documente un componente. Probablemente va a ser la Tarjeta del Evento porque es un poco tener los detalles más interesantes No me importa cuál sea. Y si vas a usar el plugin, algún plugin, quiero que lo ordenes. Quiero que entres en esas capas, veas cómo están construidas y saquen las cosas que no son tan útiles. Estoy buscando algo así. No todos tienen la misma cantidad de tiempo. Entonces, si lo haces, me encantaría que marcaras esto. Así que no parece que todos demás estén arreglando las cosas que no sientes que transmitan buena información ni a tus colegas ni a los desarrolladores. Asegúrate de nombrar todo muy bien. No marco para el que vas, Eso es todo. Hay dos extras opcionales aquí, y estos son para las personas que realmente quieren hacer este portafolio completo allí, Construye eso también en una lista de deseos Y la página de perfil más extraño, si tienes tiempo y realmente si quieres practicar las habilidades que has aprendido en este curso, te recomiendo encarecidamente que hagas los extras opcionales, pero será hasta qué hora tienes disponible para los entregables Quiero que hagas un video como antes de que interactúes con tu prototipo, mostrando todas las páginas que hemos mencionado, incluyendo saltar a tu página de especificaciones o puedes subir una captura de pantalla de eso. Nuevamente, algunas personas no han estado haciendo el video por lo que la captura de pantalla del curso de todas tus páginas funcionará bien para subir el video a YouTube o Vimeo o Behance y luego compartir el enlace en la sección Y realmente recomiendo compartir esto en redes sociales. No puedo esperar a ver dónde termina el tuyo. Recuerda, todos estamos practicando aquí. Si anualidades UX diseño o diseño en general. Y sientes que nuestras mentes no son dignas de entrar en línea, levantarla, sacarla a la comunidad Bring Your Laptop. Todos estamos aquí para aprender y no puedo esperar a ver qué haces un corte de salto. Bien, recuerda comentar el trabajo de otras personas aquí. Aquí es donde puedes pasar un poco más de tiempo con tu crítica Sé amable, sé crítico yendo a The Critique Sandwich. Y opcional para esto también, es construir esto para su cartera real. Construya aún más de lo que hemos discutido arriba, bien, incluye el resumen, la persona, cualquier wireframes que hayas hecho, podrías haber saltado a la alta fidelidad Es posible que desee retroceder para los wireframes para este, solo para que sea una buena pieza completa de la cartera. No es ideal hacerlo de esa manera. ¿Por qué debería ser lo primero? Pero mientras tengas claro que este es un proyecto que hiciste, un estudio de caso, claro, por que pasaste. Eso va a estar bien. Es incluir tus diseños terminados y cuando se convierta en una buena pieza de portafolio, busca algunos buenos ejemplos, pero incluyendo cosas como suposiciones que tenías antes de empezar, bien, cuando estás haciendo cosas, cosas con las que te topaste con cosas tenías que cambiar Ese tipo de cosas muestra tu proceso de pensamiento en el proceso de diseño de UX. Bien, es uno grande. Ojalá haya muchos de esos grandes trozos ya tirados por ahí desde antes en el curso Y solo hay algunas cosas que debes hacer para ordenarlo. Ojalá algunos de ustedes , nos tomaremos un tiempo para pulirlo un poco y prepararlo para ese portafolio tan importante o en lo de mi amigo entonces su último los proyectos de clase, aunque más videos por venir Así que vamos a meternos en esos para terminarlo, entonces puedes comenzar con tu proyecto. Bien, te veré en el siguiente video. 175. Qué sigue - Figma Advanced: Es el fin. Es el siguiente video de lo que. Cubriremos algunos pequeños consejos de mellas después de esto. Pero antes que nada, felicidades, llegaste hasta el final. Lo logré hasta el final. Qué curso tan largo. El más grande que he hecho. Y sí, eso es querer reconocer el hecho de que no es fácil conseguir este cinco para ninguno de nosotros. Por eso estoy emocionada. Me decepciona que sea el final. Ya no podemos pasar el rato tanto, pero voy a discutir algunos otros cursos que tal vez puedas hacer, ven a pasar el rato. Pero antes que nada, celebración choca los cinco, sé que esto es una cámara y no estás realmente ahí, pero puedo llenarte del otro lado listo y arriba y arriba Vamos. Yo lo voy a hacer. Ahí vamos. Torpe. Vamos a discutir lo que sigue ahora. Bien, en cuanto a los próximos pasos del software, lo que podrías ir y aprender conmigo con alguien más es después de que Figma esté mirando algunas de esas cosas de diseño web Entonces, o tengo un Web Design Essentials, una especie de HTML, CSS, algún JavaScript básico que realmente ayuda cuando estás trabajando con desarrolladores, incluso si no quieres ser como el diseñador front-end para la empresa de diseño web. Sólo una comprensión de ese tipo de cosas es súper útil. Si el código da miedo. Mirando mi curso de flujo web, te llevará a través de cómo construir una versión sin código de un sitio web increíble en pleno funcionamiento , una herramienta bastante increíble. Tengo muchos otros cursos, Photoshop, Illustrator, InDesign, After Effects, Premier Pro, Light room. Hay de todo tipo, así que ve a ver esos si quieres unirte a mí en otro curso para mejorar tu habilidad, también sígueme una Figma. En realidad solo hace 10 min hice un perfil público en la comunidad Figma Tan sexual, mi nombre en la comunidad, Daniel Walter Scott o en figma.com slash Sígueme y yo te sigo. No estoy seguro exactamente de que lo vamos a hacer todavía, pero tienen que ir a seguirnos unos a otros. Ahora lo útil si no sabes Figma es que tienen una conferencia todos los años, normalmente alrededor de mayo, junio Quién sabe cuando lo están teniendo ahora se llama config, busca eso y mira si es y regístrate. Hay una versión en línea y una versión en persona. Eso es bueno echar un vistazo al basurero un montón de nuevas actualizaciones geniales durante ese periodo, también. Siempre y cuando les guste ir y actualizar como van también. Son bastante buenos de esa manera. Y un súper gran agradecimiento a nuestros editores y revisores. Jason Hummels Taylor Coleman, Steven tesoro Muchas gracias, tanto si se mete en cosas que ustedes no llegan a decir, bueno, sí llegan a ver, pero parece que todo soy yo, pero gracias equipo por su ayuda. Lo siguiente es pedirte una reseña. Si quieres el curso, dame una reseña. Y para aquellos de ustedes a los que realmente les encantó y tienen acceso y la posibilidad de tener un enlace de regreso a mi sitio. Vincular a mi sitio realmente me ayuda a crecer. Goo le encanta. Ayuda a la gente a encontrarme más. Entonces esa es mi pregunta, es si tienes la oportunidad ya sea vía social o vía interwebs, si puedes ver el enlace a mi Increíble curso de Figma por Dan Scott, generalmente ve a comprobarlo aquí en recién vinculado de nuevo a este curso Habría genial. Y por último, solo quería darte las gracias. Me has hecho compañía entonces todo este curso. Y sé que es un poco raro con la cámara y te estoy fingiendo ahí, pero no te siento que son completamente vibra y llegaste hasta el final. Ahora somos amigos Y solo quería felicitarte por superar lo que es mucho de tu esfuerzo y cargar tu tiempo. Y hay que felicitarte. Bienvenidos al final. Pero también es un poco triste Es el último de los videos. Podemos pasar el rato en otros videos si quieres venir a unirte a mí. Pero por ahora amigos, eso es todo dentro del rumbo. ¿Se desvanecen a negro?