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

1. Introducción al curso avanzado de Figma: Hola. Yo soy Dan Scott, y este mi amigo, es el curso Figma Avanzado Ahora bien, este curso está dirigido a personas que hayan hecho mi curso de Figma Essentials o tu autodidacta. Eres bastante buena. Pero sabes que hay tantas más, como, herramientas y consejos y trucos y flujos de trabajo y actualizaciones que simplemente no has tenido tiempo de explorar todavía. Si eso te suena, este curso es para ti. ¿Quién es este tipo? Yo soy Dan Scott. Soy diseñadora UX e instructora Figma. He ganado múltiples premios de enseñanza, y ahora he ayudado a más de 1 millón de personas como tú a convertirse en mejores diseñadores. Entonces no sólo vamos a mover cajas por aquí. En realidad vamos a construir algo. Obtendrás tu propio proyecto y persona únicos, y al final, tendrás una aplicación completa lista para caer directamente en tu cartera. Primero, usaremos IA en co Figma para movernos rápido. Estoy hablando de eficiencia real, del tipo que te ahorra horas, no minutos. Profundizaremos en los autolayouts y las restricciones, cosas que separan a los aficionados Dominarás componentes y variables tan ajustados que son imposibles de romper y sin esfuerzo actualizarlos Agregue punzón visual, efectos, tipografía y micro interacciones que hagan que su diseño destaque Te mostraré hacks de flujo de trabajo para administrar tus activos, cuadrículas y estilos como un jefe absoluto, y te mostraré algunos de los hardware que te hacen más rápido y te hacen parecer que sabes lo que estás haciendo cuando la gente pasa por tu escritorio Oh, mira eso. Utilizarás variables para construir modos claro y oscuro, diseños compactos y cómodos. Entraremos en animación avanzada, enmascaramiento y video. Tipo de cosas que la mayoría de los diseñadores de UX ni siquiera se dan cuenta de que Figma puede hacer Aprenderás a realizar mejores pruebas de usuario, prototipos más rápido y construir cosas que se sientan reales. Comprenderás la accesibilidad, la colaboración, desarrollarás un traspaso usando Dvmode, refactorización y Entonces, ¿estás listo para convertirte en un profesional de Figma? Si te registras y te preparas para pasar de Figma a un superhéroe de Figma. Ah. No te preocupes. Proyecto superhéroe durante todo el curso. Me he dado cuenta de que mientras estoy grabando, hice bien la camisa, y estaba como, me sigue desmenuzando, así que hago esto todo el camino a través del curso, Para tratar de desescrúpularlo y proyectar superhéroes. Tan natural. Sigue con el curso. 2. Comencemos: Fig Adv: Bien. Tú lo lograste. Bienvenida. Enhorabuena. Hiciste una buena elección. Lo primero que vas a hacer es descargar los archivos de ejercicios para este curso. Bien, habrá un enlace en esta página para descargarlos. En el interior habrá una hoja de acceso directo. repasaré en el curso, pero también habrá una hoja con ellos pero también habrá una hoja con ellos ahí donde podrás imprimir y dar un círculo a los que realmente te gusten y agregar los que me he perdido. Pega al lado de tu computadora. Luce todo increíble. Hablo rápido. Creo que hablo rápido. Para que me puedas ralentizar. Hay un diente abajo en la esquina aquí donde puedes hacer clic en él y establecer la velocidad a la que hablo O puedes ponerme en modo borracho súper lento o en modo hibunk o dejarme así, hasta ti Figma es novedoso y solo cambia todo el tiempo. A ellos les encanta mover las cosas. Entonces, si estás en el curso y estás como, H, esto no se le llama igual, sino que se ve igual. Probablemente sea lo mismo. O si se mueve, es posible que tengas que echar un vistazo a tu alrededor para ver dónde se ha ido un poco o renombrado Mira sus comentarios, podría haber dejado un comentario. Si es fácil, si es un gran cambio, iré y volveré a grabar el curso. Pero hay cambios todo el tiempo. A Figman le gusta hacernos eso. ¿Haces este curso con la versión gratuita? Puedes por un momento. Mucho del curso lo puedes hacer en la versión gratuita. Eso no es problema. Habrá algunas partes pagas que veremos. Entonces, si no tienes eso, solo puedes seguirlo, podrías terminar decidiendo, necesito la versión paga. Pero sí, no es una pérdida de tiempo hacer esto con la versión gratuita de Figma. Voy a hacer el mío en una Mac con el software descargado. Puedes hacerlo en PC en el navegador. Todo se ve y funciona igual. Algunos de ustedes vendrán del curso Figma Essentials, y algunos de ustedes saltarán directamente a este curso porque están listos para ello Las personas que vienen del curso más viejo, mientras que el curso más antiguo, el primer curso, el curso Essentials, encontrarás que hay un poquito de superposición. Es cuando llegamos a cosas algo más difíciles donde vamos a empujarlo más, las cosas están ordenadas. Simplemente cubriremos rápidamente lo que hace un all out y cómo funciona, lo cual ya has hecho, ¿de acuerdo? Al igual que un pequeño recapitulación antes de que nos vayamos y lo empujemos aún más Entonces, hay un par de veces que estuvimos como, Han, ¿hicimos esto? Lo hice un poco, pero vamos a ir más allá en este curso, y quiero que todos sean como empezar por el comienzo correcto. ¿ Entiendes a lo que me refiero? En este curso, hay un par de niveles unos y de nivel dos como Auto allowance Hay un nivel uno, nivel dos. La razón por la que lo hago para separarlos para que no nos volvamos locos y gastando todo el pedazo por supuesto mirando esta función, componentes o una variable o algo así ¿Bien? Así que como que he hecho un nivel uno donde hacemos todas las cosas probablemente va a usar mucho tipo de cosas. Nos tomaremos un descanso, haremos algunas otras cosas para que no nos volvamos locos, pero también bien, nos toparemos con algunas razones por las que, Oh, esto estaría bien si pudiéramos hacer más con esa cosa anterior que aprendimos. Sorpresa, Nivel dos. Donde lo atravesamos y simplemente como , como, expandirlo. Entonces verás algunos niveles uno y dos en este curso. Para eso están ahí. Dividirlos, así que no nos estamos aburriendo con lo mismo, sino también para que tengamos la oportunidad de trabajar con él y encontrar la razón por la que buscamos ir aún más lejos con estas características. Por último, puedes seguirme en Figma, ¿de acuerdo? Hay una comunidad. Ir a figma.com slash AP BYOL, ¿bien? Y no tienes que hacerlo, pero sígueme ahí. Ahí es donde publicaré los archivos finales de este curso, ¿de acuerdo? Si recién estás comenzando, ahí estarán los archivos terminados en el curso. Se puede echar un empujón alrededor de las cosas que hice. No está particularmente organizado, pero a veces es útil ver archivos en los que he estado trabajando, y también puedes echarles un vistazo. Bien. Eso es, amigos míos. No más platicar. Vamos a hacer. Te veremos en el siguiente video, ¿no? 3. Tu resumen para el curso avanzado de Figma: Hola. Antes de comenzar, te voy a dar cada resumen único para trabajar en el curso. Todos vamos a construir app de música. Te voy a dar tu propia versión de la misma para que no me estés copiando y de todos se vea diferente. Entonces es bueno para tu portafolio porque es único. Entonces, si vas a random project generator.com, eso es algo malo para traer tu equipo portátil hecho, y encuentras Figma Haz clic en él en el nombre de tu pueblo o pueblo. Mi nombre es Limerick, así que voy a decir generar Proyecto. Y tengo el ni siquiera sé qué es Bluegrass. Pero ese va a ser el mío. Intenta quedarte con el que obtienes. Te empuja a salir tal vez de tu zona de confort o demuestra que lo convierte más en un proyecto de tipo intelectual donde tienes que pensar en el usuario, ¿de acuerdo? Bluegrass es algo que no conozco y tengo que echar un vistazo rápido al género, ¿qué tipo de vibra tiene que se siente? No lo sé. En realidad, no lo sé. Entonces sí, Limerick brew glass, y lo que también tiene aquí abajo es que te está dando la marca para usar ¿Bien? Vamos a crear una pequeña micro marca. No es una clase de branding. Sólo vamos a usar un chacal como logo, ¿de acuerdo? Entonces vamos a encontrar fotos de chacales. Vamos a encontrar un pequeño icono para el logo, así que todos son únicos. De aquí es de donde lo obtienes. No golpees Responder. Bueno, ¿qué es eso? Re inténtalo. ¿Bien? Definitivamente no le pegues tres veces. Sólo agárrala. Toma una captura de pantalla aquí porque te da exactamente lo que estamos haciendo. Realmente no importa demasiado ahora, agárralo, toma un atajo o descárgalo como PNG. Entonces lo que voy a hacer, y vamos a trabajar a través de la clase. El tuyo va a ser diferente pero similar. Lo entiendes. Bien, siguiente video 4. Primer borrador con IA en Figma: Hola a todos. Vamos a comenzar el curso mirando una característica llamada primer borrador. ¿Bien? Es impulsado por la IA. Es una gran manera de obtener plantillas, comenzar un poco. Es más útil una vez que tienes algunas habilidades más de este curso para llevarlo más lejos, pero quiero mostrarlo ahora porque es increíble y una excelente manera de comenzar con proyectos. Así que puedes ver aquí abajo, tengo el prompt abierto, y voy a decir que es una app básica. Haga la página de pago para una aplicación de eventos musicales, y boom. Ahí vas. Se ha hecho una página de pago. Puedo jugar con los estilos y fuentes, pero es algo generado desde cero desde Figmas AI y veamos los pros y los contras de ello y cómo hacer que funcione para ti. También veremos la función de IA para las interacciones de anuncios. Vamos. Bien, así que estoy en un nuevo archivo de diseño en blanco. Estoy en diseño. Eso es lo tabulé en la parte inferior aquí y voy a ir a acciones Ahora bien, esta de aquí es una función de pago, así que solo mira si estás en la gratuita. ¿Dónde está? Se llama Primer Borrador. Podrías buscarlo. mío aquí bajo Herramientas de Diseño. Se. Lo genial de ello, le puedes dar algunas pautas como en, ¿quiero una app básica o un wireframe ¿Necesita imágenes o no, sitio básico o un wireframe de sitio Eso lo hemos visto antes, alta fidelidad, baja fidelidad. Voy a hacer una app y voy a decir que quiero que sea es una app de listado de eventos. Para música, y simplemente haz clic en Make it. Atrás, mira a los bots de IA hacer la pequeña cosa. Oh, eso fue rápido. Pensé que podríamos incluso tener que saltar cortado y rápido. Oh, Coldplay. Taylor Swift, estoy fuera. Es Sharon Billy Eilish. No es mi música. Pero lo que puedes ver aquí es que en realidad está construida esta aplicación única para ti. Se está generando estas imágenes. Estas imágenes son como si fuera un motor de IA haciéndolas. Por eso a veces pueden tomar un poco de tiempo, y son un poco brillantes. Pero oh Dios mío, está hecho una app. Mírelo. Vamos. Vamos a prototimarlo. Vamos. Sí. Bien. Y echemos un vistazo. A mí me gusta. ¿Qué funciona? Lo que no sólo se burla. No hace mucho. Hay mucha interactividad. Puedes, en el curso Essentials ir, tú En realidad, veamos otra cosa. Echemos un vistazo a los colores. ¿Qué es esto? Esa es la primera forma de color. Ya ves que puedes pasar y decir, Oh, me gustan estos. Es una gran manera de empezar. Y una vez que termines este curso, el Avanzado, podrás agregar toda la interactividad y todas las formas correctas de sacarlo para los diseños Es como trabajar con una plantilla, excepto la plantilla, necesitas ser muy personalizado. Bien, sobre todo con cosas como los colores. Cosas como hacer cambios también. Mira, puedes decir, en realidad, esquinas redondeadas. Quiero esquinas súper redondeadas. Sin esquinas redondeadas. Vamos por el look boxy ¿Bien? El espaciado, queremos abrir eso. Simplemente es muy genial. ¿Qué tipo de fuentes quieres usar? ¿Bien? Se puede trabajar a través de él. incitarlo, también, para decir, ¿ puedes una caja de héroe grande? No sé si esto va a funcionar, por cierto. ¿Bien? Pero puedes empezar a incitarlo a hacer cosas. Probablemente sería más fácil para mí hacer muchos pequeños cambios yo mismo. Bien, porque se ha hecho una versión de ello. No es lo que tenía en la cabeza, así que esa va a ser la parte complicada. Puedes alejarte, y a veces es fácil solo hacerlo. Así que echa un vistazo debajo de los activos. ¿Bien? No tiene activos para este documento en particular. No hay biblioteca, no hay estilos para ello. Tal vez eso cambie para cuando llegues a ello, pero ahora todavía queda mucho trabajo por hacer, pero una manera muy genial de empezar una vez que tengas algunas habilidades. No puedes simplemente ser diseñador de UX e irte, Bien. No he aprendido nada de Figma. Sólo voy a usar el aviso. Quizá eso sea posible en el futuro. No lo creo, pero quiero mostrarte eso ahí. La otra cosa que quería mostrarte del curso esencial fue, digamos que queremos hacer otra página. Vamos. Um y vamos a seleccionarlo todo y eliminarlo. Este de aquí, vamos a volver a nuestro aviso otra vez y vamos a decir de dónde sacamos el primer borrador, y voy a decir Listado de eventos en detalle. Verlo o deletrearlo hacia abajo. Aquí vamos. Bien, se ha ido y es. Oh, acabo de hacer una nueva página en lugar de tratar de usar la que hice para ella. Pero puedes ver aquí ¿ ha usado las mismas fuentes? Así que mira Public Sands, y este no es atuendo, así que va a mejorar. Sabes, estoy deseando que llegue el momento que solo necesito una página realmente básica, como una página de Ts y Cs o una página de pago que parezca una muy confiable, y puede tomar las estrellas que ya tienes y luego aplicarlas. Eso probablemente no esté muy lejos en el futuro. En el momento, es un poco más generación de ideas y lo arreglas y lo cambias después de ahora, todo es diferente. Pero lo que puede hacer es que podemos hacer esta parte aquí, entramos en las acciones, y podemos decir, me gustaría mirar agregar interacciones. ¿Bien? Entre tú y tú Agrega interacciones. Bien, y lo hizo, ¿de acuerdo? Entonces es agregar las pequeñas interacciones mágicas. Entonces vamos a darle un prototipo ahora. Empecemos con este tipo y vayamos al plato. Y echemos un vistazo. Ni siquiera puedo recordar qué botón era. Oh, sí, trabajé. ¿Bien? Y luego volver a la casa. Bien. Entonces esas dos pequeñas cosas pueden ser poderosas, ¿de acuerdo? Y será mejor más adelante. Pero solo quiero mostrarles antes en el curso, el tipo de cosas nuevas que están pasando con Figma, y puedo volver y actualizar este video en el futuro No es tomar nuestros trabajos, pero es un atajo algunas de las cosas que solíamos hacer en términos de, como, Bien, me pregunto cómo es una buena forma Puedes empezar a trabajar con M un primer borrador o como lo normal volver a la versión del navegador de inicio, recuerda, sube a la F y ve a Inicio, que está en la parte superior. ¿Bien? Y puedes ir a las plantillas. Hay un montón de plantillas por ahí. Es una especie de la forma en que lo estoy usando en este momento. Se pondrá mejor. Pero es nuevo, es elegante, y será más útil cuando tus habilidades sean aún más prácticas y puedas tomar lo que eso hace y hacer que, ya sabes, se conecte con estilos y autolayouts y Oh, va a ser divertido. Bien, eso es todo para el primer video. ¿Qué opinas? Tener una ronda de juego con él. Te veré en el siguiente video. 5. Efecto de vidrio líquido en Figma: Hola a todos. En este video, vamos a ver el vaso líquido de Apple. ¿Bien? Es un efecto muy genial, y puedes ver aquí que es parte de la interfaz de usuario, pero también podemos hacerlo dentro de los productos. Vamos a hacer esto. Se mueve y se puede ver a través de él. Todo es vidrioso y bueno. Bien, vamos a meternos en ello. Todo bien. Primero, abre un nuevo archivo de diseño, ya sea usando la Nueva Pestaña, archivo de diseño donde quieras. Y de tus archivos de ejercicios, quiero que traigas solo una imagen. Puede ser cualquier cosa. Realmente no importa. Estoy usando este efecto cristal líquido y me gusta arrastrarlos desde mi navegador así, solo para enderezar TofGma Pero podrías usar el Comando Mayús K, que es un atajo para traer imágenes, o puedes bajar aquí al rectángulo y decir, son imagen de video. La otra cosa solo para aclarar es que hay un par de modos diferentes abajo aquí abajo. A menos que te lo diga, es este medio. Vamos a estar trabajando. Obtener la imagen en. He perdido mi imagen. Entras, y dibujemos algo en la parte superior. Ahora, el efecto de vidrio líquido solo funciona en marcos, por lo que no puedes usar la herramienta rectángulo aquí para dibujarlo. Se necesita hacer con un marco. El F k, vamos a dibujar R, botón viejo grande por el medio aquí y sólo vamos a mantenerlo simple por el momento. Sólo vamos a agregar el efecto. Bajo Effex lo tengo seleccionado. Es un marco. Puedo golpear más, y puedo ir a la sombra, y podemos meternos en esta. Vidrios. Ya, es increíble. Y lo que podemos hacer es simplemente moverlo. Ah, es tan genial. Hagamos un par de cositas. Asegúrate de que tengo esquinas redondeadas. Para obtener el máximo de esquinas redondeadas, solo hay que colocarlo algo realmente alto, como 1,000, luego redondeará los bordes. Voy a acercar, echemos un vistazo a los diferentes efectos para que el vidrio se abra. Si lo tengo deseleccionado, hago clic en él y para abrir los efectos, hago clic en este pequeño icono aquí y voy a abrir esta copia La luz, ¿dónde la golpea la luz? Depende de ti. ¿Qué tan brillante es la luz? Puedes escribirlo o simplemente hacer clic y mantener presionado cualquiera de estos iconos aquí. Se. Voy a dejar el mío a los 80, y luego solo puedes jugar con estos. Vas a tener un sentido para ellos. No hay bien o mal. Los por defecto son geniales, pero se puede jugar con cosas como la profundidad, ¿qué tan grueso es el cristal Oh, gran vidrio burbujeo, pequeña lámina delgada de vidrio Si estás diseñando para el sistema operativo Apple, puedes consultar las especificaciones para ver qué necesita ser exactamente. Probablemente será mejor ir a la casa e ir a las plantillas. Y luego haciendo una búsqueda aquí y escribiendo en vidrio líquido. Apple lo llama vidrio líquido y Figma solo lo llama efecto cristal Probablemente sea mejor comenzar con uno de estos porque alguien más ha pasado por el sistema de diseño de Apple. Oh, ahí está ahí. Es el kit, empieza con el kit. Pero para nosotros, volvamos a esto. Podemos jugar alrededor de la refracción y la profundidad porque no estamos limitados por las especificaciones de Apple Uno de los que es un poco raro es la dispersión, ¿de acuerdo? Se puede ver un poco más cuando está arriba, digamos, algún texto. ¿Puedes ver los bordes aquí? Todo es gris. Si voy dispersión escribir, añadir algunos colores ahí dentro. Quizá mejor con algo de profundidad. Ahí vas. Se puede empezar a ver pasar el azul y un poco de amarillo por aquí. Obviamente, las heladas es lo azul que es. A mí me gusta. El último es la luz. ¿Puedes ver una pequeña bombilla? Puedes arrastrarlos por ahí. Dependiendo de donde quieras que golpee la luz. ¿Ya lo hacemos? Sí. Creo que lo hicimos. Lo único que podría atraparte es que esto tiene que estar encima de lo que sea que esté tratando de dispersar. Por eso acabamos de empezar con una imagen solo para facilitar las cosas por el momento. Hagamos algo duro en el siguiente video. Efecto cristal. Oh, es lindo. Ojalá mi voz haya mejorado. Es hora de la mañana y tengo mi primera voz de café a mitad de camino A través del curso vas a poder decir realmente lo que hizo por cuánto ha empezado a aparecer mi voz. Bien. Siguiente video, Dan. 6. Trabajar con diseños complejos en Figma: Hola a todos. Este video, vamos a hacer esta cosa de vidrio despreciadamente No es realmente lo que estamos haciendo aquí. Lo que estamos haciendo aquí es que este es el curso avanzado. Pero a veces es muy difícil trabajar con toda la bondad avanzada . Echemos un vistazo a esto. Si quiero mover este botón por aquí, puedes ver que hay salidas automáticas dentro de salidas automáticas dentro de salidas automáticas. Es muy bueno y estructurado, pero a veces solo quieres moverlo y luego ¿Por qué estás ahí dentro? Deja de ser tan complicado. Eso es lo que vamos a hacer en este video. Te voy a mostrar cómo apagar o trabajar con algunos de los complicados diseños. Estamos haciendo el curso avanzado, pero a veces aún no estamos del todo avanzados. Estamos llegando hacia el avance. Solo hay que apagar algunas de las cosas o al menos trabajar dentro de ellas. Así que vamos a saltar y mostrarte cómo trabajar con diseños complejos. Vamos. A, En primer lugar, es necesario abrir un archivo. Hay un par de formas de llegar a ello. He puesto una copia del mismo en los archivos de ejercicio, así puedes hacer doble clic en este archivo dot fig y abrirlo. Sigue los pasos de donde quieras ponerlo, probablemente ponlo en tus borradores, haz clic en Importar Y luego espera un segundo, y luego dirá, ¿ quieres moverlo a una carpeta publicada? No tienes que hacerlo o entrar en un proyecto, puedes simplemente hacer clic en Listo y estará listo para trabajar con él. La otra forma de hacerlo, ahí está ahí ahora. Puedo hacer doble clic en él y empezar a trabajar. La otra forma de hacerlo es si vas afgma.com slash en BYOL, también encontrarás los archivos Sea cual sea la forma que quieras hacerlo, y encontrarás Figma Advanced Habrá un montón de otros archivos a medida que este curso crezca. Puedes abrirlos y decir, abrir en Figma, por favor, y ellos se abrirán en el navegador Realmente no importa cómo llegues a este archivo, lo voy a abrir en mi escritorio porque soy de la vieja escuela. Debería estar en mis borradores, donde vamos. Y ahí está ahí. Bien. Te doy éste porque es muy complicado. Lo es y no lo es. ¿Bien? Esto fue creado anteriormente en el curso cuando estaba usando la primera función de borrador dentro de Figma. No todos tienen acceso a esto porque es parte del pagado. Pero aquí tengo el resultado final para que todos podamos trabajar. Lo bueno de ello es que es todo autolayouts y está muy bien estructurado Entonces agarro este y digo, quiero ir de compras a continuación, comida a domicilio. Puedo simplemente arrastrarlo por debajo y mirar, ellos cambian porque están en autolayouts Deshacer. Vamos a entrar en la capa de compras aquí y digamos, justo este superior, el inferior, el siguiente. Sólo puedo hacer clic en el superior , golpear la flecha hacia abajo. Y puedes ver que lo mueve por ahí dentro. Así que todo está muy bien estructurado. A veces, sin embargo, entras y estás como, oh, más asignaciones de Auto. Mou. Más outs. Más autolayouts Hay tantas salidas automáticas, y donde se vuelve complicado es incluso si estás avanzado, y estás como, Bien, solo quiero mover este botón. Como vi al principio aquí, voy a mover esto aquí arriba. Va a entrar ahí. Todo bien. Ahora es parte de ese auto out. No lo es. Yo sólo quiero algo así Ah, está en todas partes. ¿Bien? Eso puede ser complicado tanto trabajar con esa característica, primer borrador o simplemente los archivos de otras personas o decir que acabas de unirte a una gran empresa, tienen un gran sistema de diseño, y tú eres como, oh, hombre, esto es realmente difícil. Sólo necesito hacer algo sencillo. Deja de ser tan inteligente. Entonces lo que puedes hacer, una de las cosas buenas es que puedes seleccionar el marco padre y hacer clic derecho en él y decir, ¿dónde está? Auto outs. Oh, más opciones de salida automática. Siguen moviendo eso y renombrándolo. Echa un vistazo. Estará escondido por aquí en alguna parte. Podríamos decir quitar autolot, eso sólo lo hará por ese fotograma Queremos decir, deshazte de todos los autolayouts ahí dentro y encontrarás que todos son solo marcos viejos y lisos Ahora bien, las cosas son un poco más fáciles. Una de las otras características útiles de trabajar con salidas complejas, es que hay muchas capas sucediendo todavía todas las capas están ahí, lo cual es bueno. A veces este botón de aquí. Yo sólo quiero entrar. Hazlo clic. Entonces otra vez, hazlo clic. Hazlo click, Doble click. Finalmente encuentro esta cosa llamada Botón grande, tiene algo de texto en él. Genial. Quiero sacarlo. Lo vamos a hacer de vidrio porque voy a mostrarles más de un ejemplo de ese efecto que hicimos antes. Pero quiero que sea por encima de todo. Si empiezo a arrastrarlo, uno de los valores por defecto para Figma y una de las complicaciones de trabajar con archivos complejos es que irá dentro de este contenedor, que es parte del checkout de compras, o lo pones aquí y ahora es parte de Quiere anidar automáticamente en estos marcos o salidas automáticas automáticamente, lo cual es genial la mayor parte del tiempo. Pero digamos que a veces solo quieres que vaya a donde quieras. Haces cosas así. Voy a deshacer a donde estaba, así que tú eres igual que yo. Bien, encontré el botón. Ahí está todo el camino hasta aquí abajo . Voy a sacarlo a rastras. Voy a decir, sales y te pones tal vez entre la barra inferior y los contenidos principales lo suben y salgan. Entonces él está fuera, ¿de acuerdo? Entonces él está encima de todo. Pero en cuanto empiezo a arrastrarlo, vuelve a sumergirse en algo Entonces ahora está por encima de todo. Puedo cerrar todos estos solo para que todo sea un poco más limpio. Así que he cerrado todo. Mis barras inferiores ahí. Realmente no necesito eso por el momento. Y ahí está mi botón principal grande. Y otra vez, recuerden, si lo arrastre , va dentro de algo. Lo que puedo hacer es si le hago clic, ¿de acuerdo? Antes de comenzar a arrastrar he pulsado el mouse hacia abajo, mantén presionada la barra espaciadora Entonces puedes simplemente arrastrarlo por donde quieras. No va a faltar, realmente no puedo señalar las capas de ahí, pero no se va a mover de las capas, y puedo ponerlo donde quiera. Puedo decir que ya vas ahí. Verás, no saltó dentro de ninguna otra capa. Me parece que esas dos cosas son las más importantes a la hora de trabajar con los archivos complejos de otras personas o usar algunos de los archivos generados automáticamente, plantillas es solo para ir a Autolayouts, eliminarlos, y cuando empieces a arrastrar cosas, haz clic en Retener, mantener el espacio B moverlos haz clic en Retener, mantener el espacio B Entonces no va a saltar capas. Fresco. Eso es. Ahora lo que quiero hacer es hacer lo que te mostré al principio donde teníamos el botón de cristal y se estaba moviendo a lo largo. Entonces hagámoslo juntos. Un par de cosas que tengo que hacer es que mis botones se van a quedar aquí arriba. Lo que podría hacer es simplemente bloquear estas capas solo para no tener que sostener la barra espaciadora. Sólo puedo arrastrarlo por ahí. No hay ningún lugar al que pueda ir, un par de cosas que tengo que hacer es, solo vamos a previsualizarlo ahora. Entonces voy a hacer click en la app. Voy a decir, abramos la vista previa, así que eso es espacio de turnos, y debería permanecer abierto ahí, ¿de acuerdo? Verás si me desplazo hacia arriba y hacia abajo, está funcionando. Si el tuyo no está funcionando así, lo que puedes hacer es hacer clic en el exterior, ir al prototipo. En realidad, vamos a hacer clic en el fondo, y voy a decir, asegúrate de que no tengo nada seleccionado. T configuración del prototipo, voy a usar este de aquí, el iPhone 16, y eso está bien. Puedes usar lo que quieras. Eso ha terminado mi adelanto otra vez y sigue funcionando. Si eso no funciona, a veces tienes que entrar aquí y decir, en realidad el comportamiento de desplazamiento. Quiero desplazarme verticalmente para que realmente empiece a desplazarse Pero de nuevo arriba, todos estamos bien. Lo que quiero hacer es que quiero que esto se pegue al fondo. ¿Cómo hago eso? Porque lo tengo seleccionado y agarro este botón aquí y digo, en realidad, quiero que estés alineado con el fondo de esto. Por el momento, está constreñido a la cima. Constreñido a la cima, lo que va a funcionar probablemente. Voy a decir, estoy en prototipo. Lo que puedo decir es, quiero que te posicione para desplazarte padre. No, quiero que te quedes en su lugar. Puedo prototimarlo. Ahora cuando me desplace, ¿pueden ver las estancias en su lugar? Wo vamos a hacerlos todos vidriosos. Vamos a darle un click. Vayamos al diseño. Bajemos a fijar. Ahora recuerda que esto tiene que ser un marco para que esto funcione. No puedo ser un rectángulo. Voy a conseguir una sombra de caída, voy a conseguir un vaso. Oh, sí me gusta. Voy a subir la profundidad. La escarcha es casi perfecta. Todo se ve bien por defecto. Sin embargo, haz refracción deslizante hacia arriba y hacia abajo. Mira eso. Eso es genial. Todo bien. Ahora vamos a adelantarnos de nuevo y desplazarlos hacia arriba y hacia abajo y él hace lo genial vidrioso, pero se queda donde debería estar Ahora, ¿cómo consigo que se alinee hasta el fondo? Vamos a cerrar eso. Vamos. Necesito averiguar dónde está el fondo. Si hago click off, y voy al prototipo, puedo ver que el iPhone 16 es, ¿qué es? 393 por 852. Puedo dar click sobre ti y decir, realidad bajo diseño, el tamaño de este marco debería ser 393 por 852, 92 Fue hace apenas un segundo. No puedo recordar. Vamos a adivinar 852. Vamos, Brain. ¿Puedes ver eso? Es el contenido del clip. Puedes encender y apagar eso. A menos que sepa dónde está el fondo ahora, así puedo decir que vas a estar aquí abajo. Podría aguantar turno para que no salte a todos los diferentes marcos. Pero recuerda, bloqueo esas capas, así que no es un gran problema. Ahora está constreñido a la cima de manera que esa línea punteada. Puedo decir que te constreñiste al fondo porque tenemos un fondo ahora que él puede constreñir a no importa realmente Cambia, barra espaciadora y míranos haciendo cosas geniales con efecto vidrioso en diseños realmente complicados ¿Bien? El padre, haga clic derecho en él, vaya a más opciones de diseño y vaya a eliminar todos los autolayouts Cuando estés arrastrando por ahí, mantén turno para tu dragón. No se sumergirá en todos los diferentes marcos y autolayouts y agregará un dulce Se ve que el mío tiene un tinte rojo, que viene de esto, mi relleno, que ha sido rechazado, podrías volver esto a blanco para obtener ese efecto vítreo más tradicional A lo mejor un poco de azul. Todo bien. Espero que haya sido útil. Tocamos algunas cosas que aprendimos en el curso Essentials, como restricciones, jugamos con prototipos y asegurándonos de que podamos meter nuestro pequeño prototipo en un iPhone, que siempre se ve genial A Te veré en el siguiente video. 7. Textura y ruido y orden del efecto: Hola a todos. Veamos un par de efectos geniales. Uno es este ruido que hemos aplicado a la imagen de fondo le da un aspecto de la vieja escuela. El otro es esta, esta textura para que podamos obtener este efecto de vidrio realmente genial. Como si estuviéramos asomando por la ventana del inodoro de la caravana Mira lo genial que se ve. Oh, increíble. Vamos a saltar y aprender textura, ruido y algunos de los efectos que el orden de las capas tiene sobre estos efectos. Vamos a saltar. Para empezar, solo puedes tener cualquier imagen. También vamos a usar el efecto vidrio para este efecto de textura y ruido. Pero si quieres seguir exactamente, hay un efecto dotFig tus archivos de ejercicio Puedes abrirla en Figma, o puedes encontrarme miembro en figma.com slash en BYOL, y puedes abrir este archivo y abrir tu propia versión Bien. Así que tengo este botón, ¿de acuerdo? Se le ha aplicado el efecto cristal. ¿Bien? Es efecto, y he añadido vidrio. Los otros efectos nuevos, si golpeo plus, puedes tener más de un efecto aplicado a un objeto. ¿Bien? Y puedo decir, no quiero dejar sombra, lo cual es genial, ¿de acuerdo? mí me gusta la sombra, pero voy a ir a la que dice textura, ¿de acuerdo? Y como que puedes ver vamos a acercarnos un poco. ¿Qué le está pasando? Vamos a ponerlo en marcha. ¿Bien? La textura es como el vidrio esmerilado, ¿de acuerdo? Y eso es lo que hace. Bien, llega a ese tipo de, como, hoyuelos, como lo llames. Bien, puedes jugar ambas configuraciones. Un poco de ambos. Lo único que sí se ve un poco raro son los bordes de esto hay una mezcla de si vuelvo a abrir una textura, una mezcla de recorte a la forma para que no salga fuera de ella y volviendo al vidrio y jugando por donde viene la fuente de luz y volteando eso arriba y abajo Depende de cada instancia. No hay un número especial. Pero es muy chulo. Uno que puedes hacer es echarle un vistazo. Effex agreguemos un tercero. Veamos el texto lo siento, ruido. Ruido, se puede ver, añadir algo de ruido. En este caso, es interesante. Quiero mostrar aquí porque el ruido es interesante. Se puede jugar con sólo un monoolor dúo color. Hay dos de ellos, y multicolor va a funcionar con todo tipo de que se puede ver aquí, el ruido es un montón de colores diferentes. Por lo que da un efecto verde de la vieja escuela. La razón por la que quiero mostrarte esto es que voy a subir este tamaño de ruido, solo para que lo veas. Puedes jugar con algunos efectos, puedes jugar con la orden. Por el momento está haciendo ruido luego textura, se puede decir, en realidad, arrastrando esta extraña pequeña área por aquí con un poco de manos, se puede ver y arrastrarla hacia arriba y arriba como capas Se va a hacer la textura primero y después el ruido. Tal vez descubras que no puedes obtener el efecto que deseas. Estás tratando de copiar la de otra persona. Es porque este orden está en torno a diferentes formas. vidrio, en este caso no parece marcar ninguna diferencia de qué manera es. Pero algunos de ellos sí. qué es probablemente más agradable el ruido es para algo así como esta imagen retro de aquí Te puedo ver, mi amigo tiene un efecto y va a ser el ruido. Voy a hacer zoom un poco y ya puedes empezar a ver que le da una vibra retro a ll school. Apague, encienda, apague, encienda, lo obtiene. Una de las cosas de este entorno donde tenemos la textura encendida, voy a apagar el ruido. Voy a eliminarlo golpeando el menos. Me gusta la textura. No me gusta tanto el ruido que tiene, pero digamos que hago esto. Si quiero en este momento, es un marco, digamos que quiero poner texto dentro de él. Voy a agarrar mi T para la herramienta tipo, haga clic dentro y voy a decir, reserve ahora, reserve. Bien. Entonces, ¿qué pasa? Se lo estás haciendo al padre tiene el estuche de textura todo dentro de él, desafortunadamente, consigue que el efecto se le aplique también. Si quiero hacerlo así, no puedo hacer autos elegantes. El texto tiene que estar dentro de él, todo lo que necesito hacer es hacer el texto de aquí fuera de él. Reserve ahora de nuevo a la herramienta de movimiento y póngala encima, no dentro. Bien, una cosa que no noté es que la imagen era un marco y ahora los botones dentro de ella y porque apliqué la imagen para tener un efecto sobre ella, se está aplicando a todo lo que hay dentro de ella. ¿Ves que mi texto incluso tiene el efecto de ruido en él? Otra vez, si no quisiera eso, tendría que agarrar a estos dos tipos e irme, estás fuera de ahí, y estás en la cima. Y escogí una fuente diferente. Ahí vas. Ese es el efecto de textura y ruido. Solo necesitas saber, sobre todo todo dentro de una figma, es que muchas veces puedes cambiar el orden de capas de estas cosas Puedes tener dos rellenos y luego jugar con vamos a este. Puedo descifrar esto de inmediato. Si está en la parte superior, es muy diferente si está debajo. No es tan diferente, ¿verdad? Vamos a subir eso. Si los blancos en la parte superior o los blancos de abajo, es muy diferente. Todos estos lo tienen y no está tan claro que puedas moverlos. Ahí vas. Deshacer deshacer, deshacer, hicimos un botón genial. Pero ahora podría necesitar agruparme. Haga clic derecho en Grupo. Yuk. Ahora, se mueven juntos. Excelente. Bien, eso es. Nos vemos en el siguiente video. Estoy de vuelta porque quería mostrarte algo. Me estaba preparando para hacer la intro para este curso. Entonces para este video, lo hago al final para que veas lo que hacemos. Solo estaba haciendo que se viera mejor porque estaba como, algo un poco sobre esto. Y entonces yo estaba como, Oh, lo hice mejor. Oh, debería mostrárselos. Bien, entonces tengo esta cosa seleccionada. Bien, entonces tengo el botón seleccionado. Aquí están pasando un par de cosas. Entonces hay este pequeño relleno que queda en esto. Comenzó la vida al 100%. Automáticamente cuando aplicas el efecto cristal , lo baja al 10%. Podría deshacerme de eso, y como que le da este efecto más vítreo, me gusta La otra cosa es extraña pequeña frontera a su alrededor que parece un poco demasiado fuerte. Si voy y hago clic en esto, puedo ver el vidrio bajo textura, radio. Si giro eso a la derecha hacia abajo o hacia arriba, ¿ves lo que hace aquí? De alguna manera escogí este punto realmente extraño donde es el más horrible. Se puede arrancar y se va y cuando está muy bajo, se va. Para encontrar algo que funcione para ti, obviamente también puedes jugar con el tamaño. Pero si lo haces más pequeño y juegas con un radio grande o pequeño, no lo sé. Yo estaba como, eso es lo que estaba buscando, y mi texto necesita. Sombra. Eso no es tan borroso. No baja hasta ahora. Bien. Eso es. Ahora ya podemos terminar el video. ¿Te veo en la siguiente? Mira lo genial que es. Ho. 8. Efecto de desenfoque progresivo: Hola a todos. En este video, vamos a ver algo que se llama Desenfoque progresivo. Es aquí donde el color se vuelve progresivamente más borroso. También se puede hacer con imágenes. Es muy fácil y muy rápido y primero lo haremos. Si lo haces, sin embargo, quieres andar por ahí, haremos esto donde vamos un poco más allá en este tutorial, solo para recapitular algunas de las cosas buenas que aprendimos anteriormente en el curso de lo esencial para ponernos al día a todos los demás Hay algunas funciones pagas por las que pasamos, algunas IA. Vale la pena andar por ahí si eres un poco nuevo en Figma. Solo vinimos aquí por el desenfoque progresivo, hacemos eso al principio, y luego saltamos al siguiente. Derecha. Eso es. Vamos a entrar. Hagamos desenfoque progresivamente. Bien, te darás cuenta de que mi UI es oscura. Me imaginé que te lo mostraría justo antes de empezar . Cambié el mío por la noche. Tienes que tener un archivo abierto, ir al FK, bajar a las preferencias, y bajo tema, puedes ir entre claro y oscuro. Ahora es de noche, y el de luz es realmente muy ligero en mi oficina, así que simplemente lo apagué. Recuerda, archivo abierto, preferencias tema oscuro. Sin nada seleccionado, puedes cambiar el color de tu página. Podría ser por defecto, ser blanco, pero puede que estés queriendo trabajar en un color más oscuro aquí. Co. Vamos a agarrar el FK. Haga clic una vez. Vamos a agarrar HiPhone 16. A mí me gusta esto, el contraste blanco contra el negro. Vamos a traer una imagen. Comando Mayús K es uno que uso mucho, o lo arrastro. El problema de arrastrarlo si es una imagen de muy alta resolución, viene en masiva Command Shift K es un atajo realmente bueno. Voy a traer este 03, y vamos a ir a abrir. La razón por la que lo hago de esta manera es que puedo hacer clic y arrastrarlo para que sea un tamaño que quiera aproximadamente de ese tipo de tamaño. Ahora vamos a hacerlo desenfoque progresivo y luego vamos a hacer que se vea como lo hizo en la intro Todo lo que necesitas hacer es otro efecto aquí. Puedes pasar de sombra paralela a tecnología a desenfoque de capa. Ese es el que queremos escondernos aquí es progresivo. Y lo que puedes hacer es incluso así, es bastante genial. Comienza en la parte superior, muy crujiente, y se puede ver aquí abajo, está borrosa Puedes arrastrar estos pequeños puntos alrededor. Entonces, de izquierda a derecha, puedes mantener el turno y se encajará en líneas rectas. Para que puedas hacer cosas geniales. No tiene que ser una imagen. Puedo gra F k para la herramienta de marco, sosteniendo Shift, es un cuadrado, darle un color de relleno, cualquier color de relleno viejo por aquí, siempre y cuando sea verde, verdoso Vamos, verde, te aqua, esa. Podemos hacer lo mismo. Oh, hagamos un atajo. Tengamos los seleccionados. Tengo un efecto. Puedo dar click aquí y se pone azul. ¿Puedes ver esta zona que usamos antes para arrastrarla por ahí Puedes hacer click en él, copiarlo, dar click en esto y presionar Pegar. Puedes copiar y pegar estilos. Y nosotros lo haremos. Entraremos y efectuaremos este un poco más y hace algo realmente genial. Si agarras el extremo y lo arrastras hacia arriba, ¿ puedes ver que realmente se desdibuja Es un efecto muy chulo. No lo puedo usar muy seguido. Funciona en código. Ustedes los desarrolladores se van a enloquecer un poco por tener que aplicarlo, pero es alcanzable, razonablemente fácil con CSS. Eso es desenfoque progresivo. Lo que vamos a hacer ahora es estilizarlo como lo teníamos antes. Hay un pequeño resumen de algunas de las cosas que aprendimos en el curso Essentials, solo para aquellas personas que necesitan un resumen o si te saltas el curso Essentials porque ya eres muy bueno Quizás quieras ver el resto de este video en caso de haya algo que te hayas perdido. Yo quiero quedarme con eso. Se ve genial. Se ve aún más fresco contra el pato. Me encanta. Lo que quiero hacer es que quiero hacer este cuadrado, así que necesito hacer esto recortado Lo que voy a hacer es que voy a ir a llenar, que es mi imagen. Voy a seleccionados. Ahí está el relleno. Voy a dar click en la imagen, y voy a subir hasta aquí, dice llenar digamos, no estás lleno, estás recortado, y entonces puedo arrastrar en este borde aquí ¿Qué tan grande quiero que sea? El momento -16 16116 de altura, así que voy a hacer el mío 116 Blanco Se trata de un cuadrado. Ahora, eso es arrastrar el borde de la misma. El borde de la misma es el cultivo. Si arrastras a cualquier parte del medio, puedes moverlo dentro del cultivo. Entonces voy a arrastrar el mío para que esto quede justo en el medio aquí. Voy a hacer click out en el fondo, y ahora es un cuadrado con esta cosa. Creo que quiero jugar con la capa, capa progresiva azul, y hacerla grande como hicimos en esta. Puedes ver que puedes iniciarlo en cualquier lugar. Podría estar aquí. Debido a que esto está destinado a ser una lista genérica de género, no un artista real, podría tener que empezar bastante lejos para dar la vibra del hip hop, pero en realidad no mostrar al artista. Bien, quiero bajarlo. Siempre que escala imágenes, esto funcionará, pero cada vez que hago cosas a escala, utilizo la herramienta K. K en tu teclado para cambiar de la herramienta de movimiento a la herramienta de escala solo para escalar todos los efectos y todo. Es solo un muy buen hábito estar en. Probablemente así es como quiero el mío. Eso es alejar un poco. Quiero agregar FK para esto porque quiero una cajita para el género. Consígalo rápido a la parte superior. Elige un color cualquiera siempre y cuando sea verde, puedes golpear el ojo en tu teclado para el cuentagotas. Sólo agarra eso. Oh, es demasiado azul. Quiero que sea un poco más en el lado verde. Oh, eso es. Voy a escribir algunas cosas tipo. Entonces, escriba dos, haga clic una vez. De hecho voy a acelerar a través esto porque no tienes que verme escribir. Una cosa que sí quiero hacer una pausa y mostrarte, hicimos muy poco exceso de velocidad es que me gustan mucho las fuentes, bien, que son como roboto, me gusta porque tiene una versión condensada ¿Bien? Condensed es realmente útil cuando intentas encajar mucho tipo en. ¿Puedes ver? En realidad es solo, ya sabes, en esta otra fuente, ¿ves cuánto más blanca era Estaba en una fuente condensada, hay muchas fuentes condensadas. Aquí puedes entrar simplemente en realidad escribir no roboto, escribir condensado para ver todos los diferentes tipos de fuentes condensadas Y algunos de ellos están súper condensados. Al igual que, mira ese ahí, vas a poder encajar mucho más. Hay condensado y comprimido, comprimido coprensado es más pequeño que condensado No estoy seguro de que no pueda recordar el idioma, pero C. ¿Qué estamos haciendo? Condensado, ¿de acuerdo? Y es que, sí, puedes meter más texto en lo que es un espacio limitado, especialmente en un teléfono, porque es esa extraña relación de aspecto. Es más estrecho que alto, ¿verdad? Entonces vamos a deshacer. Así que tengo lo mío de hecho a exceso de velocidad otra vez. No volvimos a hacer exceso de velocidad. Me gusta usar la misma fuente con diferentes pesos. Así que todavía roboto condensado. Una es la luz. Uno es negrita, usando la jerarquía de tamaño. Menos importante, más importante. Jugando con el peso, bien, ligero y audaz. De nuevo, puedes saltarte adelante si ya eres muy bueno con este tipo de cosas, solo estoy un poco no lo sé, agregando algunos extras. En realidad, sigan adelante porque ahí están las cosas de la IA realmente. Alrededor de la altura de la línea y simplemente arrástrela hacia la izquierda. No la altura de la línea. Voy a jugar con la altura de línea, seleccionarlo todo y altura de línea, voy a escribir -50. Demasiado. Voy a escribir. Así que puedes simplemente escribir sobre la parte superior de la misma. Puedo escribir en menos en realidad sólo poner en 16. Voy a sostener Shift y usar mi flecha hacia arriba solo para encontrar algo. ¿Qué estamos haciendo 24? No sosteniendo la flecha Shift ahora solo estoy usando la flecha arriba y abajo solo para obtener la altura de la línea donde quiero que esté. Algo así. Todos los consejos que hicimos en el curso Essentials, pero bueno, los lanzaremos aquí al principio. Bien, escapa un par de veces para salir de la herramienta tipo. Voy a hacer click en esto. Va a estar aquí por ahí. Ahora, lo que quiero hacer es hacer algunos de estos, así que voy a alejarme. ¿Voy a agarrar eso lo suficientemente grande? cambio cero en tu teclado será el automático para llegar al 100%. ¿Bien? Así que sostenga Shift O es caber todo en pantalla. número dos es seleccionar algo y acercar todo eso. Así que ese turno dos y cambio cero en tu teclado va al 100%. A mí me gusta esa. Así que el tamaño de la fuente es probablemente lo suficientemente grande. Si solo quiero agarrarlos a ambos y hacerlos más grandes, sostenga el miembro de la herramienta K para la escala, vaya y ambos se hacen un poco más grandes en términos de las fuentes. Para moverlo. Bien, hagamos algunas versiones de esto Entonces voy a seleccionarlo todo, agarra mi tecla de opción en una Mac. Oh ko PC para duplicarlo, arrástrelo recto hacia abajo. Voy a tener uno, dos, tres, eso va a hacer el Ooh cuatro, cinco ¿Bien? Por el momento, lo que quiero hacer es, puedes simplemente dar click sobre las cajas mismas? Veamos si podemos seleccionar en todos estos. Bien, ahora, esta es una función de pago. Todas estas cosas a menudo son C bajo acciones. ¿Bien? Bajemos a. Nuestro primer chef, no. Vamos a. Reescribe esto. Da click en él, y voy a decir, ¿ Qué quiero que hagas? Quiero que acelere la escritura. Si yo es música, veamos si puedo hacerlo sin tener que seleccionar un ti. Oh, puedo. Lo está haciendo. Me quitó todas mis otras cosas. Maldita sea. ¿Bien? No hacía eso cuando lo practiqué. Entonces voy a tener que construir el mío de manera ligeramente diferente. Errores, gente. Bien. Entonces, en realidad, probablemente siempre va a ser más fácil si te agarro. Pon eso ahí, pega el texto. Están en dos cuadros de texto separados. Alejar. ¿Cómo es mi interlineado un poco más alto? Un poco más alto. Todo bien. Ahora hagámoslo. Vamos a agarrar y bajar por aquí. Estoy sosteniendo la tecla de opción en una PC, y luego voy a ir al Comando D. ¿Lo dije antes o Control D para duplicar lo que acabamos de hacer? Cuantos tengo ahora seis. Ahora necesito seleccionar todo solo el texto. Yo sólo quiero el hip hop, pero quiero que cambie la palabra género. Con el seleccionado, quiero seleccionar este turno de retención, y hago clic en él agarra todo el asunto, no, no, no, no, solo quiero agarrar el texto dentro de ahí Vamos a dar click en esta primera. Bien, este tipo de aquí por Doble clic en él. Entonces, si mantienes pulsada la tecla Mayús y tu tecla de comando o Mayús y Control, puedes hacer clic en ti y en ti y en ti, y en ti y en ti. Así que vayan todos ellos seleccionados. Ahora puedo ir a reescribir Puedo decir que reescribes esto. Quiero que digas Speed typing. Música de dramas. Estoy escaneando va a reemplazar a mi primera. Eso dice hip hop. Lo es, ¿no? Eso está bien. Oh, friki Haz cambios. A las palabras solamente. Demasiado tiempo. Es genial, ¿eh? Tan bueno para texto de marcador de posición A mí me gusta. Probablemente va a tener que elegir. También es muy bueno, porque tienes una idea de cuánto tiempo van a durar algunas de las cosas. Entonces estás como, Oh, eso fue genial para el hip hop, pero todos estos realmente necesitan ser de un tamaño de fuente más pequeño, probablemente 24 para poder encajar todo. Oh, hicimos mucho en este curso, ¿eh? Vinimos por el desenfoque progresivo. Ahora, estás usando IA. Estás aprendiendo todo tipo de atajos geniales. El curso avanzado. Es increíble. Está lleno de soul beats base vibraciones y a grupos. Bien, eso es todo. Te veré en el siguiente video. 9. Proyecto de clase 01: listados de géneros: Todo bien. Es el primer tiempo de los proyectos de clase. Por lo que los proyectos de clase se enumeran dentro de los archivos de ejercicio es un PDF llamado Proyectos de clase. Voy a ver algo así. Y esta es la primera. Quiero que crees un marco de teléfono móvil. Básicamente, quiero que rehagas lo que hicimos en el último tutorial Entonces esta cosa. Pero específicamente para su breve. El mío es el hip hop de Limerick. Quiero que se concentren en eso y luego averiguaran cuales sean los subgéneros para ello, así, por ejemplo. Techno, podrías tener dub techno acid como industrial. Estos son todos los tipos de techno. Rock, hay muchas subcategorías. Realmente no conoces el género musical con el que estás trabajando. Haz algunas búsquedas en Google Apuesto a que encontrarás que hay subcategorías los conforman. Eso no es realmente lo importante aquí, quiero que experimentes con el desenfoque progresivo. No me importa cómo lo hagas. Puedes hacerlo exactamente como yo lo he hecho. Sólo juega con él. No me importa cómo lo hagas. Si tienes la cuenta pro, voy a suponer que en este curso sí tienes la cuenta pro. Si no puedes continuar totalmente con ello. No te vas a pedir disculpas cada vez diciendo si no la tienes, trata de encontrar una solución, porque ¿bien? Si no puedes hacer las funciones de IA con reescribir esto, está bien. Ya has visto cómo funciona. Podrías usar HGBT en su lugar, que es gratis. Eso es lo principal que todos tienen, pero las características de IA, y algunas de ellas en este curso son solo pro. Pero si los tienes, ve a jugar con ellos. Tengan un juego con reescribir esto, que es cuando hicimos el texto Y lo hice con las imágenes también. Puedes seleccionar sobre estas y o bien ir a las acciones e ir a hacer una imagen, o bien puedes seleccionar en una imagen ya, ir al relleno y decir, hacer una imagen, puedes usar IA para crear la imagen. Algo como Unsplash o píxeles, encontrarás muchas imágenes gratuitas que podrás utilizar para rellenar tu prototipo Yo era los proyectos de clase, tienes que hacer eso. Definitivamente haz desenfoque progresivo, juega con funciones de IA, entregables Quiero que tomes una captura de pantalla o exportes tu imagen y la subas a los proyectos de clase. captura de pantalla en una Mac es Command Shift cuatro y puedes arrastrar una caja alrededor de ella. Se puede hacer algo similar en una Mac con pantalla de impresión. Creo que así es como lo haces. Sé que hay otro atajo para PCs. Probablemente sabes lo que es. Si no puedes simplemente exportar la imagen. Puedo seleccionar sobre esto. Oh, me vería muy bien. Oh, no pensé en esto. Si fuiste a presentar y estaba en un teléfono, aprendiste antes a encender eso. Esto se vería más genial, haz una captura de pantalla que esta. De lo contrario, si no estás seguro de cómo se realiza una captura de pantalla, puedes hacer clic en el marco, bajar a él exportar. Quiero exportar todo este fotograma, desplázate de nuevo hacia abajo. ¿Qué tipo de talla? Apenas en una talla, y voy a hacer un PNG, voy a dar clic en Exportar iPhone 16. Vete tú. Puedes usar ese archivo para subir a los proyectos de clase para el proyecto de clase. Sí. Porque todos son únicos y es un proyecto interesante, me encantaría que lo compartieras en redes sociales. Etiquetame tanto con el hashtag Figma Advanced me facilita agrupar y mirar cursos específicos Pero asegúrate en Instagram, el grupo de Facebook, Twitter, asegúrate de etiquetarme en estos mangos aquí, Cualquiera que sea tu sabor normal, tu Instagram o un LinkedIn o un TikToker, hasta ti, pero me encanta Que se diviertan. Se trata principalmente de jugar con desenfoque progresivo. Podrías ir un poco más allá y hacer esto mucho más genial en cuanto a una página de género. Lo estamos manteniendo ligero para aquellos de ustedes no tienen mucho tiempo, pero si están listos para jugar, pueden hacer que esta página sea un poco más agradable Si no estás seguro de cómo hacer esto, ¿qué acabo de copiarlos? ¿Qué debo hacer? Puedes echar un pequeño vistazo en línea para inspirarte. Un buen término es algo así como tarjeta UI. Sólo vamos a pasar por la parte de atrás en casa. Puedes ir a través de las plantillas, echar un poco de mirada así que podría ir a enumerar. Pero realmente no funcionó. Se puede ver que hay algunas formas diferentes de tarjetas probablemente sea mejor. Tarjetas es el término genérico para, como, cualquier cosa dentro de una caja, y puedes empezar a ver algún tipo interesante de tal vez incluso tarjetas de características. Hagamos eso. Tarjetas de características aún mejor, un poco más específico, ¿de acuerdo? Y puedes ver algunas cosas como, Oh, yo podría hacer eso con esto, algo en el fondo, ¿de acuerdo? Hasta usted. Puede ser simple, puede ser complejo. Con ganas de ver lo que haces. Bien, proyecto de clase terminado. Te veré en el siguiente video. 10. Guardar estilos de efecto y borrar estilos no utilizados: Hola a todos. Vamos a convertir los efectos que hicimos en el último video en un estilo para que podamos reutilizarlos y llegar a cambiarlos todos a la vez. Qué van a ir uniformes a la perspectiva. En realidad, la palabra es progresiva. Pero tenemos el control sobre todos ellos y luego te voy a mostrar cómo eliminar cualquier biblioteca de estilos que se hayan agregado a tu archivo, se ponen un poco confusos, estilos que no pediste. Entonces te voy a mostrar cómo eliminar todos los estilos que no pediste que todos simplemente aparecen en tus bibliotecas, y estás como, ¿De dónde vienen estos? Te voy a mostrar cómo aclararlos, así que solo tenemos las cosas que hemos creado como estilos. Vamos a saltar. Bien, así que en el último video, hicimos algunos estilos. Yo hice una pareja. También hice algunos de sombra paralela. Tomemos este desenfoque progresivo. Se puede ver aquí. Se ha aplicado a mis paneles de fijación. Estos cuatro puntitos es la forma en que podemos crear y usar estilos. Ahora lo estamos haciendo por afijo. Podemos hacerlo por trazo y rellenar cualquier cosa que tenga pequeños puntos en él. Voy a hacer click en afijo, y voy a decir, me gustaría agregar nuevo efecto de Inicio Es diferente a golpear el plus por aquí. Entramos en los puntos. Cabeza plus y decimos, vamos a llamar a éste, voy a llamar a este M. Voy a llamar a este 101 porque estoy obligado a crear otro y otro y necesito diferenciarlos. A veces voy a poner el nombre del cliente delante de él solo para saber que esa es la versión de sombra paralela estoy usando para traer un portátil o cualquier compañía que sea. También puedes describirlo aquí abajo. Hagamos clic en Crear estilo. Lo bueno de esto es que podemos pasar y decir, cosa nueva que dibujamos desenfoque progresivo miembro de FK solo funciona en el marco R. No, eso es otra cosa. Ese es el efecto cristal. Bien, entonces voy a ir a colocar aquí. En lugar de encabezar más y pasar y configurarlo todo ahora, solo puedo ir a los puntitos debajo del afijo y puedo decir Desenfoque progresivo Ahí vas. Hecho. Reutilizable. Lo otro interesante de establecer estilos es que digamos que vamos a aplicar estos estilos. Oh, ya están aplicados. Ese es un desenfoque progresivo. A esa se le llama desenfoque progresivo de capa. Desenfoque de capa, progresivo no, eso lo tiene. Oh, yo creé el estilo a partir de este. Estos no han aplicado. Entonces voy a aplicar todas estas. Voy a decir que me gustaría eliminar el efecto y quiero aplicar no el efecto de capa aleatorio. Quiero añadir lo que he hecho llamado Desenfoque progresivo. Bien, así que ahora están todos conectados. Lo que me gustaría hacer es cambiarlos todos a la vez. No tengo nada seleccionado. Absolutamente nada. Puedes ver por aquí, mientras yo esté en diseño, podrías estar atascado en el sorteo o en Dev. Bien, asegúrate de estar en este diseño. En Diseño, verás todos tus estilos listados que has usado. Lo bueno de esto es que puedo decir, mira esto. Tengo un poco de configuración aquí. Puedo decir edita este estilo. Puedo entrar en ello y decir, me gustaría que terminara en realidad lo que va a ser más obvio. Vamos a llegar al uniforme. Me cambié a uniforme y todos se han actualizado. Esa es una gran manera de controlar un documento realmente grande. Crea un estilo, y luego puedes editarlo al no tener nada seleccionado y pasar por tu estilo. Quería recapitular eso. No lo hicimos en el curso esencial para efectos, pero lo hicimos por muchas otras cosas. Entonces, si te estás saltando directo al curso avanzado, lo que encontrarás es, es decir, qué es esto, es un color que me gusta, ¿bien? En lugar de teclearlo cada vez, puedes ir a Estilos, hacer exactamente lo mismo hit plus, y este va a ser mi color primario primario, y puedo crear un estilo, y luego puedo empezar a reutilizarlo Cuando dibujo un nuevo marco, solo puedo entrar aquí, presionar el botón de estilos, y bam, tenemos color primario. Eso es todo lo que hacemos por eso. Lo siguiente que quiero mostrarte es que quiero mostrarte cómo eliminar algunas de las bibliotecas predeterminadas que te están dando sugerencias de estilo si quieres limpiarlas. Podría estar ahí por defecto. Podría estar ahí porque has abierto el documento de otra persona, tal vez un proyecto más grande, quieres limpiar. Lo que voy a hacer es dar click en esta. Y si golpeo el afijo inferior, voy a hacerlo en realidad, no importa por qué estilo vayamos. Voy a ir por el relleno. Lo que verás es como, ¿ves que hay muchos otros aquí abajo? Al igual que, ¿de dónde vienen estos? Bien, puede que no tengas nada, pero quizá ya tengas esta lista gigante. En realidad, solo quiero ordenarlo. Puedes ir a todas las bibliotecas, puedes ir a las que sean de crédito en este archivo. Sólo los vamos a ordenar. Solo estás mostrando las de este archivo, no todas las bibliotecas que podrías tener como parte de tu trabajo. Haremos bibliotecas específicamente más adelante, pero es agradable ordenar las cosas temprano. Mira éste. Rompamos el vínculo con el estilo. Vamos a entrar aquí. Bien, lo mismo aquí. Bien, mis estilos fex, aquí hay todo tipo de cosas. Así puedo entrar a mi biblioteca, y decir, en realidad, no quiero. Voy a quitar las bibliotecas, y de esto, esto esto, volver. Voy a quitar éste y éste. Estas son bibliotecas de equipo que se han compartido conmigo en este documento. Cubriremos las bibliotecas de equipo más adelante, pero a veces solo quieres ordenarlas, vete. Y ahora sólo tengo desenfoque progresivo. Bonito. Bien, entonces eso es agregar estilos de efecto y solo estilos en general. Los beneficios de ellos significan que una vez que se aplican, en primer lugar, llega a aplicarlos muy fácilmente, y una vez que se aplican, se llega a editar todos a la vez. Nos fijamos en borrar cualquier estilo que esté conectado a su documento que no pidió. Todo eso es. Te veré en el siguiente video. 11. Consejos y trucos para el flujo de trabajo: Todo el mundo. En este video, vamos a ver todos los consejos y trucos que se me ocurran. Voy a meterlos todos en un video. Si ya eres bueno con consejos y trucos, puedes saltarte. Es un video muy largo. Me siento mal. Pero hay muchos consejos y trucos y un bono para cualquiera que esté esperando hasta el final, te voy a mostrar esto Es un pequeño teclado que tengo para Figma y te voy a mostrar lo que es útil para Cool Pero es un bono por sentarse a través de todos los consejos y trucos. Este o va a ser tu video más valioso para el curso o quizás no te desmayes porque es tan largo. Bueno, vamos a saltar. Buen discurso de venta, Dan. Alerta de manos de María. Tiempo de video. Bien para empezar, abre cualquier archivo antiguo. Vamos a abrir algo bastante complicado para probar todos los grandes atajos. En sus archivos de ejercicio, aquí hay un enlace llamado Demostración de flujo de trabajo. Puedes abrir cualquier cosa. Simplemente me gusta mucho este archivo. Está en tus archivos de ejercicios. Se llama Workflow 01. De cualquier manera, estarás aquí dentro de Figma. Y por aquí en las páginas, bajemos al diseño. Cortaremos a éste. Este es el que me gusta. Muy chulo. El problema de comenzar con el archivo de otra persona o trabajar para una gran empresa es que a veces puede ser bastante complicado cambiar cualquier cosa vieja, sobre todo cuando no hay estilos. Sin embargo, lo que puedes hacer es una de las más fáciles es seleccionar una gran cantidad de cosas por aquí, en lugar de jugar con un relleno porque tienes cosas mezcladas seleccionadas obviamente tienes muchas cosas seleccionadas Lo que puedes ver aquí bajo colores de selección, si tienes mucho seleccionado, podría haber un pequeño desplegable como este. Pero puedes ver aquí, aquí están todos los colores dentro de ahí. Ahí está mi color primario o mi color de acento. No estoy seguro exactamente cómo lo han llamado. En realidad no tiene nombre. Obtuve el número hexadecimal. Entonces podemos dar click sobre esto y decir, en realidad, me gustaría que estuvieras. O azul. Es solo una forma muy rápida de trabajar con muchos archivos en lugar de hacer el temido turno, pista Haz clic en esa, mantén presionada la tecla Mayús, agarra esa. ¿Quién ha hecho eso? Eso lleva demasiado tiempo. Otra muy práctica es, vamos a hacer clic en este cuadro aquí. Estoy muy lejos. Me encanta el atajo Shift dos. Eso hará zoom a lo que hayas seleccionado. Si tienes una cosa diminuta seleccionada, así que si mantengo el comando y hago clic en este puntito que salta dentro del grupo. Vamos a controlar en una PC, comando en una Mac. Yo cambio dos, en realidad no es tan útil. Bien, entonces Shift uno es porque lo aleja para mostrarlo todo Desplaza dos a la derecha hacia lo que has seleccionado. El cambio cero es del 100%. Esa es una muy buena. Desplazar uno, dos y cero. Uno es todo en el documento, dos es lo que has seleccionado, y cero es 100%. Perfecto. Vamos a hacer clic en. Digamos que tenemos esto aquí. Vamos a hacer clic en algunos manteniendo Comando en mi Mac, controlar mi PC. Simplemente salta porque hay un grupo dentro de un grupo dentro de un grupo dentro de un grupo, y podrías morir por todo el doble clic, ¿de acuerdo? Entonces no tienes nada seleccionado. Simplemente mantenga pulsada la tecla Comando o Control. Haga clic en eso. Entonces puedes subir a Editar, ¿de acuerdo? Y hay un Select All with. Esto es súper práctico. Se puede decir, en realidad, quiero llenar quiero todo lo que tenga las mismas propiedades de texto. ¿Bien? Y ha pasado por toda la página en la que estamos. Me alejé un poco. ¿Qué más hay? Son sólo esos tipos. Pero solo significa que no tengo que ir a hacer clic en todos ellos. Puedo decir, en realidad vamos a usar, no sé, Acme para éste Oh, no me gusta Acme. Estoy destrozando el trabajo de este hombre Creo que está bajo introducción. Ahí está ahí. JH Patel, hiciste una plantilla genial Gracias por compartir. Bien, otros consejos geniales Baje y vamos a agarrar uno de estos botones. Voy a hacer doble clic de distancia. Esto es un montón de cosas. Es más que solo texto, tiene un relleno alrededor de él para que puedas ir a editar y seleccionar. Aquí hay un montón de otras opciones diferentes. No los cubriremos todos, pero imagina si tiene una sombra paralela, puedes atravesar y escoger todo lo que tenga el mismo efecto. Va a ir a hacer las mismas propiedades. Se escogió cada componente que se vea igual. La propiedad es un poco más genérica. Tiene el mismo color de relleno más el relleno, más el radio de esquina. Creo que eso es todo para todo el documento. Prueba uno más. Vamos a agarrar el círculo aquí. Vamos a editar, seleccionar con, y vamos a rellenar y encontrarás que lotes este documento tiene el mismo relleno, similar a lo que hicimos antes usando el color seleccionado. Verticales. Una de las cosas que me preguntan es, ya ves como JS lo ha dividido todo con estas páginas aquí. Volvamos a uno de nuestros viejos archivos. Voy a volver a esta que hicimos. Sólo tengo una página. Lo que podemos hacer es página dividida. Yo tengo esta. Este es mi Hi Fi. Vamos a acelerar a través de esto. Bien, entonces voy a tener una página de componentes. Va a ser la cima. Quiero separarlo de mi tipo de documentos de trabajo. Entonces voy a agregar una página, y todo lo que hacen es la página tres, para dividirlas. Puedes poner los guiones como JStedo Me gusta mantener presionada la tecla Mayús y presionar el botón de subrayado, y se parece más a un divisor de página Si quieres ponerte aún más elegante, puedes agregar emojis a cualquiera Digamos, componentes, quieres encontrar algo realmente hazlo al móvil aquí. Barra espaciadora de comandos de control automático, ¿de acuerdo? Y esto va a aparecer. Es un pequeño tipo emoji, y puedes hacer doble clic en cualquiera de estos. Entonces voy a escribir en el móvil, encontrar algo móvil farsante. ¿Eso es un teléfono móvil? Sí. Bien, haz doble clic en él y entrará a donde quiera que vayas tu cursor. Entonces haces doble clic. Oh, tengo dos de ellos. Bien, en una PC, es, tener tu cursor parpadeando dentro de aquí, y luego mantén pulsada la tecla de Windows y pulsa cualquiera, creo que es punto o punto y coma, uno de esos dos Eso no se parece en nada a un teléfono. Entiende la idea. Y para los componentes, hay que poner piezas de rompecabezas. Ahí vas. Todo bien. Ocultar la interfaz de usuario es útil. Es comando y barra diagonal inversa, o Control barra diagonal inversa Simplemente lo esconde mientras trabajas. No cambia nada. Aún puedes trabajar si conoces tus atajos. Cualquiera de estos atajos ha cambiado, mientras que entre grabar este video y dónde lo estás viendo. Echa un vistazo a este signo de interrogación en la parte inferior. Ve a atajos de teclado y echa un vistazo por ahí. Ellos explicarán todos los diferentes atajos. Son azules si los has usado. ¿Bien? Están oscuros si no has usado el atajo, ¿de acuerdo? Ahí vas. Voy a apagar mi interfaz porque una vez que tienes la interfaz de usuario apagada, se vuelve un poco complicado de usar, pero tienes más espacio, especialmente en una computadora portátil. Pero ahí es donde está el atajo súper más impresionante que jamás se haya vivido. Se llama las acciones rápidas. ¿Bien? Básicamente es un atajo para llegar a este botón de aquí. ¿Bien? Así que vamos a cerrarlo. Entonces las acciones rápidas. Vamos. El que más lo uso, es bastante aburrido. Voy a comandar o controlar haga clic en la palabra soy Jenny, la parte superior aquí, y voy a usar mis acciones rápidas, que es Comando K o Control K en una PC. Voy a escribir un caso, ¿de acuerdo? De lo contrario, ese menú tarda una eternidad en encontrar un caso. Pero puedes usarlo para cualquier cosa. Cualquier cosa en cualquiera de los menús, incluye aquí esta barra de menú superior, voy a decir Comando K, y voy a decir rotar 90 grados a la izquierda. No estoy seguro de por qué, pero todo está ahí dentro. El último, Comando K, y vamos a traducirlo también. No lo sé. Vayamos al portugués. Ahí vas. Y hacer y hecho. No todo el mundo podría tener que traducir. Aunque ahora podría ser una característica profesional, piénsalo. Pero como un caso, eso es gratis para todos. ¿Quién recuerda cómo volver a encender la interfaz de usuario? Eso es correcto. Barra diagonal revertida de Comando o Control. Ahí es donde se inclina hacia atrás. Barra inclinada hacia adelante. Todo bien. El siguiente es una actualización relativamente nueva. Bien, voy a ordenar haga clic en este botón en la parte superior aquí. Es un componente de un maestro. Yo no lo logré, así que no tengo idea de dónde está. O mencionó si había un gran atajo, ¿listo? Atajo, alternar hacia adelante y hacia atrás. ¿Cuál es el atajo? Está en una Mac. Mantienes pulsados todos los botones. Comando, Control de opciones. Los tres en la parte inferior izquierda y golpearon a K. En una PC, es ligeramente diferente. Es Control Alt Shift K. ¿Echas un vistazo a tu teclado? Es difícil de recordar, pero si estás haciendo mucho ajuste de componentes como yo, te va a gustar el atajo, y te acostumbrarás. Recuerda, habrá una hoja de acceso directo en tus archivos de ejercicios en la que pondré todos estos. Simplemente me encanta poder alternar lado a otro muy rápido. ¿Algo más? Tengo cualquier otro componente, este de aquí. No eres este es todos los botones más K, alternar de un lado a otro. Otra nueva es que puedes copiar y pegar estilos ahora. Aquí solo hemos hecho un par de estilos. Pero si has hecho un montón de documentos gratis, puedes seck en ellos, copiarlos, y puedes seleccionar varios. No tengo varios. Haz varios, Dan. Espera ahí. Sombra paralela, así puedo seleccionar a dos de estos tipos. Simplemente haz clic en el superior, mantén presionado turno, agarra este inferior, haz clic derecho en él y puedo decir copiar estilos, pasar a otro documento, no tener nada seleccionado, y luego simplemente dale a tu pegado normal. Comando VN MAC Control V en una PC. Copiar y pegar cualquier tipo de estilo. Bonito. Todo bien. Hagamos un trabajo de campo súper elegante. Voy a volver al documento en el que estaba trabajando. No tengo idea de dónde está todo. Oh, creé una nueva página. Ahí vamos. Echemos un vistazo a todos los campos. Entonces comencemos con un título. ¿Te las comías? Bien, entonces he añadido un poco de texto. Todos estos campos son ajustables con solo hacer clic en ellos, y simplemente usando tu flecha hacia arriba. Esto me gusta cuando estoy escogiendo fuentes porque en realidad no estoy seguro de qué tamaño estoy haciendo aquí. Sólo estoy sosteniendo la flecha hacia arriba o la flecha hacia abajo. Haga clic en cualquiera de ellos. ¿También podrías hacerlo con ese espaciado entre letras? Usa tu flecha hacia arriba o tu flecha hacia abajo. Se puede hacer para cualquier campo único. Esto de aquí, esta posición aquí, digamos X e Y, arriba y abajo, la mueve de izquierda a derecha. Si quieres ir en trozos más grandes, puedes mantener presionada la tecla Mayús Es el codazo grande o codazo grande, y subirá en Puedes ver aquí de ocho. Eso funciona para cualquier cosa. Rotación. Yo quería subir, no hace un ocho, pero el turno de espera hace uno. Simplemente manteniendo nada abajo usando la tecla de flecha, lo mueve en unos. Pero si mantienes turno, lo moverá en un trozo más grande. Muchos de nosotros estamos usando la cuadrícula de ocho puntos. Entonces, cuando estemos moviendo las cosas como posición, va a entrar, comencemos abajo 100 y hagamos clic aquí, mantén pulsada Shift, puedes ver que va subiendo en ocho, bajando ocho. Vamos a pasar esto para que sea un poco más fácil para el editor. Lo siento editor, y diciendo eso, voy a hacer zoom de nuevo hacia fuera, y vamos a ir a preferencias. Ve a LitleF, ve a preferencias y abajo abajo aquí hay algo que se llama la cantidad de codazo Por defecto, es uno. Eso es solo usar rastrillo u ocho. Eso es si mantienes turno. Puedes volver a cambiarlo a diez. Ese fue el valor predeterminado por un tiempo ahí y muchos otros programas. A mí me gustan ocho porque es muy común espaciar cuatro. Móvil y web. Es lo mismo cuando no tienes nada seleccionado, no usar ninguno de los campos, puedes hacer click aquí y simplemente usar tu tecla Ara para moverla, mantén pulsada la tecla shift para ir en trozos más grandes Ocho trozos de píxeles. puedes arrastrar en todos estos campos, especialmente aquellos en los que tienen el ícono. Puedes ver aquí, puedes simplemente arrastrar el icono hacia la izquierda y hacia la derecha en lugar de tener que usar tu teclado. Simplemente puedes arrastrarlo de un lado a otro. Si eres más una persona dragger. Algunos de ellos no tienen íconos. Ese sí. No tengo ninguna altura de capa, así que en realidad no funciona. Ciudad, solo arrastra eso de un lado a otro. Los que no pueden mantener presionada la opción KineMac en una PC y seguirán arrastrando, aunque no tengan un icono Si te encanta hacer ese tipo de cosas y no hay ningún ícono como este, simplemente puedes mantener presionada la opción KineMaoky en una simplemente puedes mantener presionada la opción KineMaoky Una de mis cosas favoritas es darle la vuelta al revés. No. Vamos y Ike por la herramienta de marco. Digamos que dibujas algo de lado a lado. Vamos a darle un relleno. Ok. Oh, puedes usarlos aquí también. Mira esto. Puedo usar mi estoy en HSB. Depende de ti en lo que quieras estar. Prefiero HSB. Entonces si quiero cambiar alrededor con el brillo de saturación de tonalidad, matiz quiero vamos al brillo. Es realmente brillante. Estoy en la parte superior derecha. Simplemente puedes usar tu flecha hacia abajo. Ves que baja, abajo, menos brillante, menos brillante, menos brillante. Gana trozos más grandes si mantienes turno. En vez de intentar ir, Bien digamos que se trata de ahí y quieres derribarlo, puedes simplemente agarrar este y ponerlos directamente hacia abajo en lugar de hacer el viejo drag, diff, ir recto, recto La razón por la que quiero hacer esto también, quiero mostrarles el otro truco de campo es, digamos que necesito dividirlo en tres partes, lo cual es complicado. Mi cerebro no funciona así. Voy a encontrar la dimensión así que es un ancho, perfecto. Se puede hacer dividir por, que es la barra hacia adelante tres Ahí vas. Ahora tengo tres cajas separadas, divididas por tres. Aquí tienes. Puedes hacer todas las matemáticas. Se puede decir, en realidad, quiero que esto sea justo, digamos que quiere poner. Quieres encogerlo un poco a cada lado. Quieres menos ocho de cada lado. Entonces voy a decir -16, ahora es un poco más pequeño. Ocho píxeles a cada lado. Dése un poco de margen. No puedo hacer cosas de rotación, confundirme por 90 grados y 45 todo el tiempo, como yo hago. Se puede decir, bien, quiero tres, 60/4. Muy bien son 90, no 45. Todo bien. Hablemos de algunos de los símbolos difíciles de encontrar. Los pegaré en la pantalla aquí. Se les llama símbolo inteligente ¿Bien? Esos son los que están ahí en este momento. Voy a añadir esto a la hoja de acceso directo. Pero digamos que escoge un camino aquí. Voy a rotar esto de vuelta por donde a 12 grados cero. Me parece tecleando aquí. Hay que teclearlos en orden, y tienen que verse exactamente como el bit superior. Entonces, si voy soporte, C, KC inferior y otro soporte, instantáneamente me dará símbolo de copyright Se puede ver como va a ir esto, R, va a pasar y me dará la marca registrada una. Esos son prácticos. Probablemente los que más uso son el tipo de flechas. A veces es difícil de encontrar en la fuente y puedes ver que es solo guión y mayor que, menos que, sea lo que sea que sea esa. La flecha abajo es rara es VB. Ahí vas. Es una flecha hacia abajo. La flecha hacia arriba es la clave que nunca podré encontrar en mi teclado. Por favor, sostenga. Ahí está en mi teclado. Fin de los seis. El editor habría reenviado rápidamente eso, pero eso llevó mucho tiempo. Entonces voy a tener que sostener a Shift, y voy a ir seis, seis, y luego espacio. Hay que ponerlo un poco después, lo contrario no lo hace. Y la última es la plaza. ¿Bien? Simplemente vamos. Corchetes, izquierda y derecha, espacio de cabeza. Oh, parece que tiene que haber un espacio entre ellos. Yo no uso este, obviamente. Ahí vas. Así corchete cuadrado, espacio, cerrando corchete cuadrado. Ahí vas. Solo algunos de los símbolos inteligentes, bien, para todas las fuentes. Siguiente, corto para un componente, seleccione todo esto. Voy a ir a la Opción de Comando K en una Mac. Controlemos K en una PC. Miramos esto antes es que si empiezo a arrastrar esto por ahí, realmente quiere saltar dentro de las cosas Estás como, eso es genial, pero no entres en ese marco. No entres dentro de ese componente. Recuerda, haces clic en él para comenzar a arrastrarlo, luego mantén presionada la barra espaciadora y muévala. Verás que no lo hará en el panel de capas ahí, no va a pasar y tratar de saltar y ser parte de otras capas. Agradable fácil es Comando uno te lleva de vuelta a tu pequeña opción de hogar a menos que estés en el navegador, entonces solo te llevaré de vuelta a la primera pestaña tu navegador que tengas abierta. Si estás dentro, funciona en un navegador excepto que simplemente salta a las diferentes pestañas. Comando uno, dos, tres, cualesquiera pestañas que estén abiertas en tu navegador Chrome, fiery o lo que sea que estés usando dentro de Figma la app, hace algo similar Mira estas pestañas aquí arriba, puedo ir Comando uno para el hogar, Comando dos para ese documento, Comando tres. Puedo ir dos y tres, dos y tres. Está sosteniendo Comando o Control en una PC y simplemente alternar entre las diferentes pestañas que están abiertas. Tienes una pestaña que es más decir que estás extrayendo componentes de una biblioteca o algún archivo del que necesites sacar todo el tiempo. No lo quieres aquí arriba donde quieres convertirlo en una pestaña, puedes hacer clic derecho y decir pin esa pestaña. Se puede ver allá arriba simplemente se convierte en este pequeño icono, lo hace más pequeño y es más difícil de cerrar. Sin embargo, puedes cerrarlo. Eso también funciona en el navegador. Puedes anclar pestañas. Eso es sólo una cosa normal de tipo cromo o safari. Se pueden desanclar. También puede reordenarlos haciendo clic, manteniendo presionados y arrastrándolos. A menudo, los abriré en órdenes graciosas. Solo quieres que el que estás sacando esté al frente aquí. Aunque no esté inmovilizado, solo puedes arrastrarlo por ahí. Entonces es al principio. Si estás trabajando con los mismos archivos una y otra vez y es un dolor averiguar dónde viven cada vez, estás como, en mis últimos, digamos que es este tecno limérico, puedes agregarlo a Son los favoritos. Da click ahí y verás ahí está ahí, tecno limérico Cada vez que abro un documento, tendrás algunos que están ahí dentro que usas todo el tiempo. No importa dónde estés en tu proyecto también. Si la pantalla de inicio o si estás en el navegador, ve a seguir olvidando en el navegador ahora, puedes ir al que dice volver a los archivos. Vuelves a la pantalla de inicio en lugar de hacer clic en Pantalla de inicio. Vamos a cerrarlo. No importa donde estés. Mira estos tres puntitos. Estos son útiles, solo tienes todos tus archivos recientemente cerrados. En lugar de tener que volver a los recientes. No estoy seguro si eso es un ahorrador, pero ahí está. Otra es que si estás trabajando con archivos realmente grandes o una computadora realmente vieja, puedes averiguar qué es lo que realmente está causando que se ejecute lentamente. Tienes que estar dentro del doc en cuestión. Eso puede estar funcionando un poco lento y puedes ir a la F, bajar a ver, y hay uno llamado uso de memoria que aparece por aquí. Se puede ver que está usando el 2% de mi memoria, que no es mucho, así que está bien. El tuyo podría estar al máximo. Y si ese es el caso, puedes hacer clic en Memoria administrada y podrás averiguar qué es lo que realmente te está causando el problema. El contenido de la página está haciendo la mayor parte del trabajo y los componentes importados de otros lugares están haciendo un poco de eso te da algunos consejos. También puedes encender esto. Yo digo que es el contenido de la página está haciendo muy mal. Es hasta un 80% y todo es un poco flojo. Puedes ver aquí, lo encenderá por cada capa. Puedes ver un cual tiene puntitos aquí, ninguna de mis capas está haciendo nada. Se puede ver este marco. Tiene un 0.2%, y puedes averiguar qué podría estar causando tus problemas. A menudo, pueden ser SVG, realmente complejos los que has importado Los acabas de obtener de un sitio gratuito, y resulta que están muy mal hechos. Ahí vas. Puedes ver la sugerencia aquí. Se pueden aplanar los SVG. O podría significar que tienes que sacar algunas de las páginas y hacer dos y hacer más de un documento. Mis máquinas funcionan bien, así que vamos a cerrar eso. Lo último que antes de mostrarte el teclado es que en realidad puedes arrastrar este panel a menudo, especialmente cuando tienes una especie de capas complejas aquí. Puedes arrastrar esto de inmediato para que los veas un poco más fácil. Bien. Pero también bajo tu panel de Activos, una vez que eso empiece a enojarse un poco, voy a mirar los activos para este archivo. No tienes mucho, pero puedes empezar a buscarlo. Puedes empezar a buscar. Aquí hay un ícono que sé cómo se llama porque lo nombré muy bien. Se llama Exportación y puedes buscar aquí. Y es éste de aquí, es este tipo de aquí. Funciona solo si has estado nombrando todos tus activos. Notarás en este de aquí componentes, hay mucho marco 64, no es bueno. Cuando se hacen grandes, puedes entrar aquí y puedes ajustar el filtrado digamos, déjame mostrarte las listas solo para que sea un poco más fácil averiguar dónde está todo. Esa búsqueda también funciona bajo archivo. Da clic en Buscar y digamos que quiero las estrellas que sé que están aquí. Ahí están todos. Están todos a través de mi documento. Pero puedo configurarlos todos ahora, o puedo hacer clic en ellos y decir, vaya a aquí. Pero puedo empezar a hacer clic en todas estas estrellas. Vaya, hay un montón de estrellas usadas. Puedo seleccionarlos todos, eliminarlos, eliminarlos. Están todos ahí abajo. Cuando tus capas se están volviendo muy largas, esto es fácil. O si necesitas encontrar, digamos, este de aquí, puedo ir a buscar y puedo encontrar el texto con el Wiz, entonces ni siquiera sé qué significa eso No lo son. También puedes buscar en tu panel de Laos. Tengo que recordar apagarlo golpeando la cruz. De lo contrario, ustedes serán esos. El panel de páginas, bien, se puede hacer más grande o más pequeño, bien. Por defecto, obtienes esta pequeña ranura realmente pequeña, que puede ser un poco complicada. A veces no quieres verlas todas también. Para que lo puedas hacer más pequeño. Bien, veamos el genial teclado Figma. Bien. Entonces es esto de aquí. ¿Bien? Este es el trabajo más fuerte, bien Figma creador micro Creo que así lo llaman. Y todo lo que es son atajos súper impresionantes. Entonces puedes ver aquí, puedes programarlo para que haga cualquier cosa, ¿de acuerdo? Así que tenemos desplazamiento. Hacer zoom, ¿de acuerdo? Y tienes atajos automáticos para componente de crédito, escalar a, me encanta. Bien, eso es componente. programarlos para que hagan de todo. No los uso todos, pero es simplemente práctico. Bien, especialmente cuando estás usando figma todo el tiempo para enchufar eso También un hermoso poco de arte de escritorio. Viene con un montón de botones diferentes. Bien, así puedes conseguir que haga lo que quieras. Ahora, en realidad, no todos ustedes han visto mi oficina, ¿ verdad? Así es como se ve. Eso es lo que normalmente te enfrentas a mí usando esta cámara. ¿Bien? Pero esta es mi oficina. Um, sí, unas tres impresoras D y esas cosas. Sí, esta es la oficina convertida arriba estaba solo una pequeña habitación encima mi cochera que convertimos a esto. Salió muy bien. Bien, a la computadora. Todo bien. Este es uno que quiero mostrarles que Figma uno ya no se está haciendo Fue como una carrera de tiempo limitado con Figma como una promoción Me perdí el lanzamiento inicial. Se agotaron bastante rápido. Tengo uno en Ebay porque soy un nerd y quería el oficial de Figma. Pero en realidad es un teclado que esta compañía Wlouder dot cc. Tener un cheque. El Micro creado por Figma podría estar disponible, agotado ahora. Bien, pero sí tienen solo el micro creativo regular, que actualmente está agotado. Pero volveremos. No fue el otro día. Entonces es exactamente lo mismo. Simplemente no está en los colores Figma. En fin, ¿la necesitas para trabajar en Figma? No, es la joyería de escritorio lo que realmente quería. Entonces pagué por encima de lo que cuesta solo tener el oficial Figma porque tengo el miedo de perderme. Todo bien. Esa fue una larga. Hemos cubierto cargas y montones de buenos atajos. Espero que hayan sido útiles. Vamos a entrar en un poco más de flujo de trabajo en el siguiente video. Gracias por quedarse. 12. ¿Cómo usar los trucos avanzados de Copiar, Pegar y Selección en Figma?: Volvamos a ese documento en el que estábamos trabajando antes con nuestro tipo de géneros diferentes. Y lo que quiero que hagas es simplemente crear un marco con algún texto en él. Pon el nombre de tu tipo de app. Bien, el mío es Limerick Techno. He hecho una versión ligera y una versión oscura. No hay nada de fantasía estos marcos con texto dentro de él. Bien, así que hagamos otro iPhone 16. Bien, así que voy a, vamos a duplicar éste. Voy a dar click en el marco. Se Comando D en una Mac, Control D en una PC. ¿Podemos obtener un duplicado? Lo que podríamos decir es, hagamos el primer bit de selección. Vamos a hacer clic en esto y voy a decir, hay una extraña aquí dentro. Sorprendentemente uso mucho. Ir a Editar. Esto no es muy complicado, así que nos movemos por no usarlo. Pero si vamos a editar y vamos a seleccionar Inversa, que es Comando Mayús A en un Mac, Control Shift A en una PC, y simplemente selecciona todo menos eso, y puedes eliminarlo. No me preguntes por qué, pero termino usando eso mucho. Y la otra y probablemente la más importante característica es, digamos que sí queremos que esta sea la versión oscura, queremos cambiarla. Podríamos agarrar esto y copiarlo y ponerlo aquí y pegarlo y alinearlo y quitarlo todo. Lo que es realmente bueno es que si copias esto, selecciona esto y hay una opción aquí que va Editar y hay una que dice, pegar para reemplazar. Hay una pasta sobre selección. Puedes pegarlo sobre la parte superior. El otro aún debajo. No sé por qué necesitarías esa. Pero yo uso este, Edit paste to replace, que es Command Shift R en una Mac, control shift, R en una PC. Eso es muy útil, y se pone a mano. Digamos que uso la estrella en todas partes de mi documento, estoy manteniendo presionada la tecla de opción mientras estoy arrastrando o la vieja clave en una PC para duplicarla Bien, digamos, sin embargo, quiero que esto lo reemplace, así puedo copiarlo y estoy usando mi atajo de copia normal, voy a agarrarte y voy a sostener Shift y agarrarte, y te voy a agarrar puedes hacer exactamente lo mismo, pegar para reemplazar. ¿Alguien conoce el atajo? Demasiados atajos, Dan. Es el comando shift R o Control Shift R en una PC. O sube a Editar, también está ahí arriba. Yo sólo sustituyo a todos esos. Eso puede ser útil. Pegar para reemplazar. Ahora bien, esto es un poco raspando el fondo del barril Digamos que aquí tengo esta estrella y la copio y digamos que voy por aquí, podría ser texto, podría ser cualquier cosa. Alejas la derecha y trabajas por aquí, en tierra de nadie. Déjame saber los comentarios. Quién termina trabajando camino por aquí por alguna razón. Si tuviera pasta, por defecto, lo pone de nuevo donde estaba, hay dos de ellos, justo encima uno del otro y estás como, A Lo quería por aquí y no hay forma real de conseguirlo por aquí que no sea pegarlo y moverlo Pero lo que puedes hacer es decir, todo el camino hasta aquí, una de esas personas, y puedes hacer clic derecho y decir, pégalo aquí, por favor. Ahí está mi pequeña estrella. Alrededor del 10% de ustedes estaría como, Oh, eso parece bueno. Para el resto de ustedes, sigamos adelante. En realidad, una última que quería mostrarte era que ya habíamos hecho esto antes. Solo quiero destacar es decir que sí tengo muchos marcos nuevos. Voy a golpear la herramienta de marco. Voy a decir, vamos a darme uno de esos. Vamos Comando DDD, tengo montones de ellos. Si quiero esto en todos ellos, así puedo decir, copia, haz clic en ti, mantén presionada la tecla Mayús y simplemente agarra todos los nombres de fotogramas y luego solo dale la pasta vieja normal. Lo pondrá de nuevo en la posición en el marco todo a la vez, como una pasta múltiple. No hay nada especial que tengas que hacer. Simplemente copie y pegue, pero tenga muchas cosas seleccionadas cuando esté pegando. Impresionante. ¿Cómo fue eso? Déjame saber los comentarios. ¿Yo hice copiar y pegar sexy? Probablemente te saltaste justo al principio, de todos modos. Para los que andaban por ahí, gracias. Humorándome. Pasemos al siguiente video. 13. Trucos y consejos para trabajar con marcos Figma de manera efectiva: Justo ahí. En este video, vamos a aprender todo el marco, consejos y trucos. Sí, todo un video trabajando con marcos. Son bastante útiles. Vamos a saltar. Muy bien el primero en realidad no tiene nada que ver con los marcos. Mira este pequeño icono aquí. Si tus marcos están todos abiertos, y todos están embaldosados y son realmente desordenados Bien, haz clic en eso. Todos ordenan. Y si queremos ir a decir mi fotograma número ocho, sólo tienes que hacer doble clic en el icono aquí y yo simplemente saltaré directo a él. ¿Bien? Puedes trabajar en torno a este documento siempre y cuando hayas nombrado tus marcos. Bien, es una agradable y fácil. Aún mejor, sin embargo, es ver esto. Digamos que estoy aquí en esta primera página. Debería nombrar mejor mis páginas. Haz click in in in in en tu teclado. En sólo pasaremos al siguiente fotograma. Voy a hacer zoom en él. Esa es solo la manera práctica de trabajar a través de documentos. entrar, vamos a ir hacia atrás. N para ir hacia adelante. Eso es para noviembre, mi acento, y luego cambiarme para noviembre para ir hacia atrás. Hay otro que utilizo probablemente más. El entintado se acerca. Entonces si me alejo y tenía el entintado va, bien. Estoy en el siguiente fotograma, pero estoy muy acercado. ¿Bien? El que más me gusta es la llave de casa y fin. No todos los teclados lo tienen o a veces necesitas mantener pulsada una tecla especial para obtenerla si estás en un portátil, pero yo estoy en mi teclado grande Probablemente puedas escucharlo tocando. El hogar está al revés y END va hacia adelante, hacia adelante y hacia atrás. Exactamente lo mismo excepto que el zoom in y home mantiene el mismo nivel de zoom y simplemente se mueve junto con diferentes fotogramas Esa es una buena. Se puede cambiar el tamaño de un marco. Digamos que creo un frame aquí arriba y va a tener todo mi Nav dentro de él. Los voy a agarrar a todos ustedes. Voy a ponerlo aquí arriba. No necesito esa. Había una estrella ahí dentro, ahí estás ahí . Ahí arriba. Te saludo este marco es demasiado grande. Lo que puedes hacer es que aquí hay una pequeña opción. Hay un atajo. Son todas las llaves más R, no la uses lo suficiente, pero es una excelente manera de simplemente envolver el marco exterior y suavizarlo muy cerca las cosas que están dentro del Todo bien. El siguiente que hemos hecho antes, pero en un contexto diferente. Vamos a traer una imagen en tus archivos de ejercicio una llamada Imagen de cuatro. Es un archivo vectorial y vamos a traerlo aquí. Se quiere cerrar al borde. Pero queremos en la parte de atrás y queremos simplemente tenerlo apagado y luego salta del marco. Estás como, no, solo quiero mientras tú saltas del marco. Lo que puedes hacer es mientras lo arrastras, lo hicimos antes, recuerda, inicia, haz clic y manténgalo presionado, mantén presionado la barra espaciadora, y significa que puedes arrastrarla hasta aquí Todavía está en este marco del iPhone 16. Puedes arrastrarlo y usarlo justo en el borde aquí y evita que salte a otros marcos en componentes. Lo hicimos antes cuando solo estamos arrastrando cosas como la estrella alrededor, pero es útil cuando intentas poner cosas al límite que quieres estar en este marco y no saltar así Ahí vas. Voy a empujar el mío aquí. Y lo voy a mandar a la parte de atrás. El atajo para enviarlo al dorso son los corchetes. Está al lado del PK. Enviaré el mío al fondo usando el primero de los corchetes. Todo bien. Otras cosas cool frame es ver todo en modo esquema. Es Comando Shift O o Control Shift O en una PC. Te mostrará todo desglosado en vectores. Eso puede ser muy útil sobre todo con esa estrella, recuerda, él solo estaba pasando el rato, mira si me alejo. Ya ves, ¿había un tipo ahí que está ahí? Sólo un poco más fácil de ver que eso. Estrella se fue, estrella ahí. Era pequeñito, minúsculo Si has venido, digamos, de Illustrator o de cualquier otro programa de dibujo vectorial, lo usas bastante. Especialmente cuando estás dibujando y creando cosas con una herramienta pluma. Me parece simplemente útil para los marcos, especialmente cuando los marcos son tal vez colores similares. Puedes ver los esquemas y simplemente puedes trabajar en este modo aquí. Puedes conseguir que las cosas se salgan un poco más fácil porque puedes verlas mejor. Si vienes de Illustrator, Adobe Illustrator, el comando Y sigue funcionando. No sé por qué. Si estás acostumbrado a esa. El producto oficial es Comando Shift O o Control Shift O. Si algunos de los atajos han cambiado, lo hacen Siempre están tratando de mejorarlos . Nunca se apegan a ellos. Puedes hacer clic en el signo de interrogación e ir a los atajos de teclado y puedes abrirte paso para ver si Dan dijo que era, ¿dónde está underview mostrar contornos Sí, sigue siendo Command Shift O en una Mac. Yo tal vez son simplemente diferentes a lo que estoy diciendo en PC, los verás listados aquí. Azul significa que los has usado. No he usado los atajos de reglas desde que reinicié este documento, por lo que es grad Eso, mis amigos son todos mis marcos, consejos y trucos. Si tienes algunos, me encantaría meterlos a todos. Entonces avísame en los comentarios si eres como, no mencionaste ese. Esa es una nueva y genial. Para ti, ve a ver los comentarios. Podría haber algunos nuevos geniales ahí dentro. Eso es. Te veré en el siguiente video. 14. Repaso del diseño automático con soluciones de problemas: Hola a todos. Vamos a revisar la auditoría por qué son buenos, cómo funcionan y los componentes por qué son buenos y cómo funcionan. Quizás ya lo sepas, así que puedes saltarte antes de este video. Lo que haremos es hacer una pequeña revisión agradable, agradable y rápida. Y luego pasaré años. Es por eso que este video tanto tiempo se encuentra con todos los problemas con los que se encuentra la gente, especialmente cuando eres un poco más nuevo en Figma. Si te quedas por ahí, haremos la demostración rápida, y luego te mostraré las innumerables formas mis alumnos se pierden y cómo sortearlos. Si sabes lo que es un patán y es un componente y nunca has tenido realmente ningún problema o al menos sabes cómo arreglarlos, salta a lo nuevo. Pero por ahora, entremos, llevemos a todos a la misma página y comencemos a hacer outs y componentes y rompiendo. En. Todo bien. Para empezar, trabajemos en este proyecto desde antes, donde teníamos nuestros géneros, hagamos un par de cosas para ordenar. Vamos a asegurarnos de hacer doble clic en el nombre arriba de la parte superior aquí y darle un nombre. ¿Bien? El mío se llama Limerick Techno V uno ¿Bien? Y aquí arriba, tenemos el iPhone 16. El único problema con eso que podrías haber notado es si lo duplicas, en la parte superior seleccionada, ve Shift D. Bien, no turbio, deshacer Entró en modo Inspector. Salgamos del modo de inspección yendo a esto. Podrías hacerlo. Voy a dejar eso en el curso, es que quiero tener este nombre seleccionado, y vamos Comando D por duplicado. Te darás cuenta aquí arriba dice, Oh, mira, iPhone 17, hemos ido al futuro. No, solo está tratando de ser inteligente. Se va el iPhone 16, 17. Si lo vuelvo a hacer, el Comando D, va 18. Vamos a deshacernos de eso. Es práctico, pero no para iPhone. Puede ser útil, pero no en este momento. Llamemos a éste géneros. Ahora vamos a duplicarlo Comando Miembro o Control D en una PC. Vamos a hacer doble clic en éste, y llamemos a éste. Página de inicio. Conozco el revés. Et, deshazte de todo eso. Construyamos salida automática. También voy a cambiar el color de fondo. Estuve jugando con nosotros antes a algunos blanquecinos. Todo bien. Hagamos la versión rápida de un autolou. Vamos a traer algunos íconos. Vamos a ir al Comando Turno K para traer muchas cosas. Voy a decir, todos ustedes, van a entrar, dar clic en Abrir, y yo voy a hacer clic en Pegar A. Voy a moverlos por aquí solo para darme un poco de espacio Voy a agarrar mi herramienta de escala, que es la herramienta K y quiero que todas tengan una altura de aproximadamente 32. Cuando digo exactamente 32. Para acercar un poco. Los voy a arrastrar para poder verlos a todos. Realmente no importa en qué orden estén en este momento, selecciónalos todos y di, Turno A, estás en orden. Aleje el zoom y ponlo en marcha. Pongámoslo aquí. Bajemos por el fondo. Voy a decir, en realidad, voy a arrastrarlo todo el camino hasta aquí. No quiero que escale. Estoy en la herramienta de escala, por eso. Voy a ir a la herramienta V para volver a la herramienta de selección, no escalarla. Te voy a arrastrar por ahí, todas partes, y voy a hacer algunas cosas donde me senté. Lo quiero en el medio y puedo jugar con la brecha entre ellos. Bien. Y así, amigos míos, es cómo hacer un Autolayout. Lo genial de esto es que vamos a convertirlo en un componente. Entonces es reutilizable. Puedes hacer clic en el botón aquí arriba, o puedes usar el atajo, que es la Opción de Comando K en una Mac y eso es Control Alt K en una PC. Es un componente. Voy a duplicar toda esta página, Comando o Control D. Esta página va a ser M. En vez de que este marco sea el iPhone 16, voy a hacer el iPhone P max, el grande. Lo genial de esto es porque es un Autolayout, puedo ver a Ju Doc y moverlo hacia abajo, podría jugar con el espaciado o la brecha Es muy fácil ser receptivo. La otra cosa genial es que te puedo decir mi amigo, digamos esta página de inicio aquí. La gente aún no ha iniciado sesión, por lo que no deberían poder ver su opción de venta de boletos Puedo dar click en él y puedo decir en mi archivo debajo de mis capas. Echemos un vistazo a este tipo y te puedo decir mi amigo. ¿Cuál quiero el boleto? Puedo apagar el globo ocular. Por aquí aunque, puedo decirte, quiero el globo ocular puesto Oh, mírennos. Responsivo. Puedo hacer click aquí. En realidad, esta es mi instancia. Estos son los componentes principales. Sobre este componente principal, puedo decir, en realidad quiero que la búsqueda esté por aquí. Se puede ver que juega alrededor de la orden. Sean los componentes, estas cosas están ligadas, la lupa terminó por aquí El boleto vuelve a encenderse. Este es el poder de Auto Loos Ojalá, eso sea un buen repaso en las salidas de Auto. Hicimos mucho en el curso esencial y podrías ser usuario intermedio de Figma ya y saltando directamente al curso avanzado Vamos a entrar en todos los problemas y cómo solucionarlos. Lo haré porque esa cosa que acabo de hacer, inconscientemente evité muchos errores Pero sé que cuando estoy enseñando a la gente, todos cometen los errores que podrías ser tú. Quédate alrededor. Vamos a entrar en todos los problemas y soluciones. Bien, así que me he deshecho hasta que regrese antes de ponerme los íconos Así que comencemos y choquemos con todos los problemas. Entonces, cuando traigo mis íconos, hay dos formas diferentes. Podría usar el comando shift K y traerlos a todos, y ese tipo de apilarlos a todos encima, sobre todo si golpeo colocar todos. Están todos ahí, eso es lo que hice en la primera parte de la sutural y todo funcionó Pero si eres como yo y haces mucho de tus archivos de ejercicio a partir de íconos, simplemente coge todos estos y vete, yo y agrega tus propios efectos de sonido y simplemente arrástralos. Vienen de una manera diferente. Estás como, Si, eso no es problema, excepto donde están todos seleccionados y vas al Kt por escala y puedes decir, en realidad, quiero que la altura sea 32. Estás como, esto es perfecto, hecho. En realidad, no lo ha hecho. Lo que has terminado haciendo es que todo este grupo se ha convertido en 32. ¿Ves? Toda esta altura es de 32. Este icono de corazón en particular es de sólo 15. Para sortear eso, es fácil. Solo tienes este seleccionado y dices, eres de altura de 32. Esto me lleva al otro problema. Es que veamos este corazón. Poseer aquí, está en un marco, lo cual es genial. Dentro de aquí hay un vector. Lo que las personas pueden hacer es que accidentalmente pueden hacer clic en el vector, no en el marco padre. ¿Ves que son diferentes? El marco que está alrededor, y la cosa que está dentro de él, si tengo la cosa dentro de ella seleccionada y voy, tienes una altura de 32. Lo hace cosas raras. ¿Puedes entender lo que está pasando? Hay un marco, pero el corazón dentro de él se escaló, pero no el marco, así que es como recortarlo Es deshacer, deshacer. Eso puede ser problemas con los que la gente se encuentra accidentalmente, puedes hacerlo en la pizarra aquí. Se puede ver que he recogido el vector, no el marco padre. Todo bien. Resolver algunos problemas. Puede que ya te hayas topado con esos El siguiente es que a veces la gente toma SVG así, y yo solo haré una pequeña selección alrededor de esto Notaremos que he seleccionado las partes internas de todo esto. Observe los vectores, no el marco padre. Si arrastro esto ahora, mira, arrastrando los vectores internos, no estos Acabas con estos marcos dejados por ellos mismos. Es que el mundo no va a explotar si tienes vectores por su cuenta y tratas de escalar esos. Eso está bien. Pero es muy común y tienes mucha más flexibilidad si los vectores están dentro de frames. Solo ten cuidado a la hora de seleccionar, o bien haz una selección realmente grande, va por fuera y puedes ver que tengo todo seleccionado, o puedes cambiar haga clic en los nombres si puedes ver los nombres. Puedo agarrarlos todos los seleccionados o en tus capas pan aquí, puedo hacer clic en el turno superior, agarrar el inferior. Realmente no importa. Si estás encontrando problemas y estás como, Esto es raro, probablemente sea que tengas el vector seleccionado y no el frame. Terminas con un vector por su cuenta y no tienes idea a dónde fue su marco o simplemente no vino con uno. El archivo que heredaste no lo tenía, solo puedes enmarcarlo. Puedes decir que haga clic derecho en él y digamos selección de fotogramas. Ahora tiene que enmarcar. Excelente. Todo bien. Volvamos a entrar. Todo bien. Y lo que quiero hacer es, creo que esos son los problemas por ahora. Hay más por venir. Lo que voy a hacer es hacer un truco furtivo. En lugar de hacerlas todas por separado, voy a decir que están alineadas una encima de la otra. Recuerda, no los arrastres uno encima del otro. Si lo arrastre, ¿a dónde va a ir? Va a entrar en el corazón. Puede sostener la barra espaciadora. Aprendimos que antes simplemente se sentará encima. Pero es fácil agarrarlos a todos, gran selección en la parte superior, y tú. Ahora voy a decir que me gustaría la altura de todos estos chicos fuera 32. Bonito. Asegúrate de que estoy usando las dimensiones de los marcos, no la escala. Quiero la báscula por aquí. Aros, 32. Voy a fingir que lo agregué a propósito, pero no, solo lo arruiné Ahora el siguiente problema es que cuando convertimos esto a Auto out, estás como, Bien, genial, selecciónalos todos, hiciste la gran selección como dijo Dan, y luego te fuiste, Shift A. En la versión anterior, todos se apilaron muy bien. ¿Bien? Es porque estaba haciendo las cosas sabiendo cómo evitar problemas como este. ¿Bien? El defecto dentro de Figma ahora es que trata de pensar por ti, y hace un trabajo terrible en este momento Esto podría funcionar. Si funciona, ya terminaste. Si no es así, y tienes este problema así, lo que ha pasado es que convertido esta cosa en Auto out, ¿de acuerdo? Así que mira, se llama fotograma diez. Llamemos a este Nav forward slash, cual es este Nav bottom Bien. Y dentro de ella, vamos a cerrar todos estos hacia abajo, sólo para que quede ordenado. Tienes un fotograma, eso es pequeño hash, otro frame, pequeño hash. Entonces tienes a este tipo hash dentro de un pequeño blanco. Estos tipos de aquí están ignorando el Auto out. Este tipo, escuchando, el corazón, Lupa, escuchando, y están fluyendo uno al lado del otro Este de aquí, adolescente Moody te está ignorando. Ese es este pequeño icono de aquí. Los verás a través de muchos documentos. Otras personas los harán. Todo lo que significa es que todavía está dentro del Autolayout, pero no fluye como un ¿Por qué? Motivos. Lo haremos más adelante. Veremos algo llamado posicionamiento absoluto. Pero por el momento, que digas que dejas de hacer eso, ¿de acuerdo? Quiero que crezcas, vas y dejes de estar malhumorado. Al ignorar la salida automática, apague eso. Mira, el boleto ahora fluye a lo largo. Sólo hay una persona más, el usuario icono. Ya no nos estás ignorando. Todo bien. Todos están fluyendo muy bien. La otra cosa que podría pasar es que si haces clic en el marco, encontrarás que Autolayout tiene diferentes que intenta adivinar ¿Quieres decir horizontal? La mayoría de las veces adivina ahí. A veces va, Dada, volvamos a la horizontal y alejemos el zoom. Creo que esos son los temas con los que nos vamos a encontrar. Una cosa que tenemos que hacer en realidad antes de seguir adelante es agarremos este marco y lo arrastremos hacia afuera. Convertiremos los íconos que están dentro de él en componentes. ¿Por qué hacemos eso? Porque el corazón no queremos muchos ejemplares del corazón. Queremos un corazón usado muchas veces que lleguemos a controlar. Así que vamos a seleccionar todos estos. Me gustaría que todos fueran componentes. No quiero hacerlos un componente. ¿Se puede ver un componente gigante? Me gustaría que todos los desplieguen aquí, creen múltiples componentes. Tengo un corazón, una lupa, un boleto y un usuario. Vamos a ponerlos en juego y explicar por qué los componentes son tan buenos. Probablemente ya lo sepas. Vamos a hacer que esto vaya por el fondo aquí. Vamos a arrastrar esto por aquí, esto aquí afuera. Consigamos que la alineación esté en el centro y vamos a arrastrar hacia arriba el hueco. Se puede poner la brecha como Auto, pero va directo al borde. Quiero derribar esto. Quiero bajar esto a 50. En realidad, hacer el centro de alineación. Si me acerco, puedes jugar con esto en la mesa de trabajo ¿Puedes ver si tienes brecha que no está establecida en Auto? Cualquier otro número, puedes arrastrarlos mientras estás aquí abajo. Podemos establecer este do a Auto y agregar algo de relleno a izquierda y derecha, solo para que sea ¿qué debemos hacer? Vamos a hacer 32. Vamos a agregarlo al documento más grande. Vamos a por. Hagámoslos duplicados Comando o Control D. Vas a ser el marco del Pmax. Así que es bonito y grande. Lo bueno esto ahora es que es un autolo que configuramos ese espaciado encantador, Shi doc. puede ver que lo hemos hecho más grande para un dispositivo diferente, y todo fluye muy bien. ¿Bien? La razón por la que hicimos esos íconos, nuestro componente es para que podamos entrar en esto y decir, bien. Este es mi componente principal. Puedo decir que tiene el pequeño ícono raro aquí, no esta versión de aquí abajo. Dónde está haciendo doble clic sobre él. Ves el diamante, esa es la instancia regular. Vamos por aquí. Si vamos y hacemos doble clic, doble clic, doble clic, y empezamos a jugar con él, vamos a darle unas patillas locas Esas no son patillas locas, de todas formas. Pero debido a que te has metido con el maestro, Zoom out, o el componente principal, puedes ver que esto también se ajusta Si no los convertimos en múltiples componentes, eso no se habría actualizado y tendríamos que actualizarlo nuevamente. Bien, amigos míos, ese fue un video largo, y ojalá nos lleve a todos mismo nivel de comprensión para los piojos de los pedidos, por qué los usamos, cómo hacer un componente, por qué los usamos, y la miríada de problemas que podrías encontrarte siendo, no lo sé, lo suficientemente buenos como para usar Figma, pero chocando Ojalá, eso resolviera algunos de ellos. Bien, pasemos a algunas cosas nuevas en el siguiente video. 15. Sugerir un diseño automático, reemplazar contenido, duplicar y renombrar capas (Ai): Uno. En este video, vamos a rociar todas las características de IA súper increíbles en cyto Figma, sugirió Salida automática, reemplazar contenido, duplicar, renombrar y generar imágenes de IA Tan bueno. Vamos a tomar esto, que es sólo una imagen y algunos textos. No tiene nada de fantasía. Vamos a ir a copiar y luego hacer clic derecho a más capas, sugerir autolou y bam, es Hace todas esas cosas geniales de autolout sin tener que construirlo tú Entonces haremos un par de ellos, los agregaremos a ambos en un auto out y luego miraremos, magia. Llegamos a duplicarlos. Magia más. Llegamos a hacer click en esto y decir, vamos a reemplazar el contenido ahí dentro. Solo usemos el valor predeterminado, llenarlo con algún contenido realista. Siéntate, relájate. Lo rehizo todo y sabe lo que está haciendo Además, también haremos todas las imágenes. Todo bien. En realidad he hecho todo el tutorial en la intro Hay un poco más de detalle que eso. Hay un poco. Así que saltemos y comencemos. Estoy de lucha libre con los robots de IA. Bien, así que he creado una tarjeta aquí. Es marco dentro de ese marco es solo una imagen, algunos textos. Todos son como flotar por ahí. Nadie está haciendo nada. Bien, entonces necesito recurrir a Auto Layout porque lo que quiero hacer es ponerme otro documento y cambiarle el tamaño y hacer todo tipo de cosas donde vaya, bien, el rock and roll tiene que ser muy, muy largo Simplemente tipa sobre todo. No hay nada sensible al respecto. Todo lo que necesito hacer toma el marco padre. Si utilizo mi turno normal para pasar a Auto Out. Eso no funciona. Vamos a deshacer. Un truco aquí es con el padre seleccionado, marco 38, clic derecho en él, y hay una opción y aquí dice más opciones establecidas. Este de aquí sugiere Auto ruidoso. Debería ser súper increíble Auto out. Muy sencillo. Vamos a hacer clic en el botón y nada cambia. ¿Qué tan genial es eso? Nada cambió. Échale un vistazo. Mi marco ahora, es un autolayout En su interior hay una imagen. Pero luego hay otro marco de autolayout. Enmarqué esto por mí. Entonces es en este tipo de marco grande, y puedo decidir ahora que en realidad, vamos a trabajarlo hasta que la imagen va por debajo de ella Refleja. Son todos los autolayouts anidados. Es muy emocionante. Podríamos decidir aquí, sin embargo, que ¿qué tenemos? Hay un marco, 40, quiero que esté debajo del texto o arrastre el texto arriba ahí. Todos ellos refluyen, deshacen, deshacen, hacen. Digamos rock 'n roll también. Digamos que escribo ese golpeo realmente largo y mira lo que hace ahora. Se encaja, se ha creado esta caja. Es tan bueno. Es deshacer. Vayamos aún más allá. En el momento en que es realmente difícil, recuerda que se llamaba frame 35. Simplemente limpia los nombres de los fotogramas, pero puedes recuperarlo. Se puede decir, todos ustedes, puedo hacer clic derecho en él y usar el dulce renombrar capas AI. Esto podría estar apagado si estás en la versión gratuita, pero mira esto. Puedes teclearlos. Mira esto. Renombrar capas. Va a pasar. Se va a pensar en ello. Míralo, escribiendo. Es el futuro. Imagen de portada. Oh, incluso había cambiado eso. Mira, imagen de portada, información de canción. No está del todo bien. Tiene el encabezado, el título, la fecha. Ah, descripción. Los infos de canciones no son realmente una información de canción. Es más de un género. Ah, tan bien. Oh, se pone mejor. Vamos a agarrarlo. Hagamos una copia de ella. ¿Bien? No lo he convertido en una instancia. Debería, pero ya tengo dos cuadros aquí. Voy a seleccionarlos a los dos, ponerlos Auto out. Sólo la normal. Día de turno. Eso funciona. No es muy complicado. Pero mira esto aparecer. ¡Oh! Bien, opción de duplicado tan elegante. Se pueden ver pequeños destellos al lado. Voy a primero en realidad simplemente arrastrarlo porque se está poniendo un poco apretado ahí dentro, y voy a hacerlo más grande. Alejemos, en realidad. Hay que arrastrarlo lo suficiente. Si arrastras no hace nada hasta llegar lo suficientemente lejos como para tener suficiente espacio para que todos aparezcan ahí dentro. ¿Bien? Mira lo que estamos haciendo. Ah, y se pone aún mejor. Vamos a utilizar la función de IA llamada, clic derecho. Esa no es la característica, pero aquí hay uno llamado carrito recordar. Vamos, cerebro. Reemplazar contenido. No está ahí en absoluto. Con él seleccionado, todo el cuadro grande que tienes, sube aquí y vamos a reemplazar el contenido. ¿Y ves esta pequeña cosa pre llenada? Dice, lleno de contenido realista si tabulas. Eso es un aviso. escribir eso. No importa. Pero sí, dale una grieta. Contenido realista. Se va a intentar. Oh, lo está haciendo. ¿Qué tan genial es eso? No es hacer las imágenes. Tienes que hacerlas individualmente. Los haremos en un segundo. Pero mira eso. Tiene las fechas. Tiene los diferentes géneros. mí me gusta. Ahora podemos entrar y decir, en realidad, ustedes aquí, yo he hecho eso. Podríamos ir a más IA y decir hacer una imagen, y esta es la banda Indie pop. Hagámoslo cortar a cuando esté hecho porque lleva un poco de tiempo. A mí me gusta. Oh, mira lo receptivo que es. A mí me gusta el pequeño cambio de IndioPO, hacer cambios. Eh. Está más cerca de mí. Yo lo llevaré. Todo con gafas. Mejor. Carita redondeada para mí, pero eso servirá No tiene patillas. Qué appen ahí Sin embargo, tiene el peinado. Bien, para que podamos abrirnos camino para hacer estas cosas. La única advertencia, el único problema que me estoy topando en términos de la opción duplicada es vamos a agarrar Oh, no me quedé con una versión de ello. Copia esa fuera del marco, pegarla por aquí. Bien, entonces él está fuera. Llegué a esto y deberíamos convertir esto en realidad, quiero convertir eso. Quiero que este marco sea más alto. En realidad, lo sé, quiero obtener la imagen. Usé una talla muy extraña ahí, ¿no? Ese es el acolchado. Vamos, Dan. Vamos a agarrar el borde. Ahí vamos. Bien. Lo que debemos hacer es convertir esto en un componente. Recuerda Comando Mayús K. No, recuerda, Comando opción K para convertirlo en un componente o simplemente hacer clic en el botón de ahí. Bien. Entonces tenemos un componente principal para que podamos cambiarlo más adelante y controlarlo todo. Hago una copia de la misma, que es mi instancia, instancia de mi marco principal. Voy a moverlos por ahí. Eso está en la cima, ahí está. Yo los selecciono a los dos y los hago cambiar a R. En realidad, lo duplicado, ¿recuerdas que estaba aquí abajo? Se ha ido. Para ir. ¿Bien? Así que va a funcionar con unos componentes principales como no se puede, pero voy a deshacer esto deberíamos poner en una página de componentes, pop y ponerlo aquí. Y luego de vuelta en mi otra página, mi móvil Hi Fi. En realidad, lo hice de la manera equivocada, y voy a cortar eso, ir a mis componentes. Entonces mis componentes principales aquí. Entonces voy a copiar esto, volver a mi móvil hi fi, pegarlo aquí. Entonces esta es una copia de ese componente principal. Se puede ver que es un pequeño diamante. Eso va a funcionar. ¿Bien? Entonces se lo haré a esos. Se cambia un autolayout, y luego eso aparece ahí. Eso podría desaparecer. No sé por qué hace eso, pero sí, muy genial. Un par de otras cosas que quizás tengas que hacer antes convertirlo en esa cosa duplicadora es en realidad, volvamos al componente principal Lo que quieres hacer cuando hayas usado sugiere Auto out. Solo asegúrate de que funcione. Esa imagen funcionó muy bien. Ya ves, eso es lo que quería hacer. El acolchado en ambos lados. ¿Cuál era mi relleno originalmente? Vamos a hacer click sobre esto. Verás, yo tenía 17 en un lado y 16 en el otro. Sólo porque lo dibujé al azar, probablemente sea mejor ordenar esto ahora antes de irme y convertirlo en un componente para hacer duplicados de él en todas partes Probablemente quiero 16, 16, en realidad 16 por todas partes. Vamos, Dan. Me gusta tabular alrededor de estos solo para conseguirlos. La otra cosa es que esto echemos un vistazo. Voy a poner algunas devoluciones . Se puede ver que no fluye. Eso es algo que probablemente quiera. Depende. Si quieres una tarjeta de altura fija, déjala. Pero lo que quiero hacer es hacer doble clic abajo en la parte inferior del cuadro de texto y lo girará de KC, ¿dónde está Este es un tamaño fijo, y si hago doble clic en la parte inferior, salta automáticamente a este, o puede hacer clic en el icono a Altura automática. Eso es otra cosa buena para verificar. Ahora puedo agregar más cosas. Entra ahí. Entrar para entrar. Ahí vas. Otra cosa que probablemente comprobaría aquí ahora es, ¿hay suficiente espacio para todas las fechas? Probablemente. Qué pasa cuando me baje a un dígito, eso sigue funcionando. Estas son las cosas que me gusta comprobar. Y si el cliente dice, esto tiene que ser todo mayúscula, aún encaja, o queremos la versión completa Eso también está bien. Por aquí, ¿qué pasa cuando esto se alarga mucho? Ya lo comprobamos. Todo bien. Oh, la otra cosa es que está escalando. Se está centrando dentro de la cabecera, lo cual es genial, que es este trozo de aquí Lo que se podría decir es que probablemente se dice que la fecha se centra en alguna parte. ¿Dónde está? En realidad, no es esto, es el encabezado padre. Podemos decir el encabezado, quiero que estén espaciados, lo cual es genial, pero quiero que esté espaciado y alineado a lo largo de la parte superior. Aquí hemos cubierto algunas cosas extrañas. Todo es muy fácil hasta que no lo es. He dado algo que funciona muy bien. Pero encontrarás que hay muchas veces que simplemente no funciona. Eso es lo que estamos haciendo el resto de esta sección Auto out. Te voy a dar un poco más de curso rápido y cómo hacer estas restricciones anidadas increíblemente alineadas y espaciadas Pero sí. Eso es genial, ¿eh? Todo bien. Eso es. Te veré en el siguiente video. En realidad, una última cosa. De hecho, solo vamos a ponerlo en la página. Te voy a alejar. ¿Cuál estaba trabajando el último? Creo que ésta. Sí, nosotros. Debido a que todas estas instancias están en este Auto Layout, puedo ir como, tú y ver esto. Puedo agarrar a los padres siempre y cuando el padre. Ah, esa es la parte más bonita. Yo puedo hacer el espaciado. ¿Bien? Mete con el espaciado, lo que quiero que sea. 32. Wo H para hacer. Hagámoslo por aquí, 32. Otro pequeño truco también, en realidad puedes simplemente hacer doble clic en esa brecha y teclearla. Quién, haga doble clic en la brecha para el espaciado. Vamos, Dan. Mi ratón está haciendo algunas cosas raras. Entonces vamos a ti, haz doble clic en la brecha, y puedes teclearla aquí arriba, así puedo escribir 32. Lo haremos por aquí. Depende de ti. Pero no importa de qué tamaño tenga esto, responderá a ello. Tan bueno. Bien, hemos hecho un desastre. Ahora te veré en el siguiente video. 16. Proyecto de clase 02: listados de bandas: Bien, es tiempo de proyecto de clase. Quiero que construyas una página. Y vamos a los proyectos de clase. Recuerda que están en tus archivos de ejercicios. Quiero que crees Lo que hay en la página. ¿Bien? ¿Qué está pasando? No me importa el idioma. Bien, tiene que haber un encabezado y una tarjeta de lista de bandas repetitivas. Bien, echemos un vistazo a la mía. Bien, entonces tengo una partida aquí. Tenemos esta tarjeta que se repite con todas las bandas diferentes que vienen en diferentes fechas. Experimentar con las características de IA. Si estás intentando hacer este curso en la versión gratuita, está bien. Simplemente diseñarlo. No tiene que construirse con IA. Solo tienes que hacer un poco más escribiendo y copiando y pegando y encontrando imágenes de sitios de imágenes de biblioteca de stock gratuitos No me importa. Yo en realidad si estás en la versión gratuita, hay una prueba gratuita. Podría ser genial hacer este curso a través la prueba gratuita y puedes apagarlo al final. Pero si tienes las características, quiero que pases y juegues con estas. Sugerir Autolayout es el principal. Eso lo hicimos en el último video, donde solo lo diseñas y dices: Oye, dame el Auto Layout, por favor. Y hace cosas bonitas. Te toparás con problemas. Al igual que, diseñé uno bastante simple para que funcionara. Funcionó la primera vez. Sé que he hecho otras cosas donde estoy como, Oh, esto va a funcionar, y no fue así. Así que mantenlo simple o haz algo complicado y mira cómo Sugerir Auto Layout se ocupa de ello. Más adelante en el curso, vamos a mejorar nuestras habilidades para que podamos arreglarlo, pero jugar con algo simple, al menos quiero que juegues con ese renombrar las características de lay. Si no recuerdas dónde está eso porque era una pequeña parte del curso es que puedes entrar aquí y decir, en realidad, quiero agarrar todo esto, haz clic derecho en él y hay renombrar, ¿dónde estás? Renombrar Capas. Ahí está ahí. También quiero que dupliques con nuevo contenido. Ese es el término técnico para esa cosita que aparece en la parte inferior, cuando la estás arrastrando. Es esta cosa abajo de aquí. No puedo ver esa cosa. Reemplazar contenido. Eso lo hicimos. En este caso, lo que me gusta hacer cuando sé lo que voy a hacer es construir algo. ¿Qué es eso? Fuera de mi camino. ¿Recordamos si te pierdes Comando uno? Oh, escribí marca de eclamación. Cambia uno, lo siento, y se alejará a todo lo que tienes. Lo que me gusta hacer cuando estoy poniendo el texto marcador de posición entonces voy a usar ese contenido de reemplazar con Yo solo escribo el nombre de la banda. Eso le da una pista. Escribí una fecha real y uso reescribir esto o reescribir esto para agregar una descripción sobre una banda llamada y le di un nombre falso y luego lo dupliqué para luego poder usar lo que se llama reescribir esto . Viene con los nombres de las bandas. Puedes en sugerir esto, darle una descripción realmente clara. Se podría decir, en realidad, estoy reescribiendo esto y estoy diciendo, estoy escribiendo esto para bandas Techno de los 90 y te voy a dar eso específicamente No tienes que simplemente dejarlo en blanco. Bien, juega con el hacer una imagen. Bien, entonces hice una imagen, y notarás que todos ellos tienen tíos de pelota de mediana edad. Traté de hacer las patillas. No le gusta agregar patillas. Ninguno de estos se parece a mí. Pero de todos modos, están todos escondidos ahí dentro. Poca facilidad stregs Creo que más me gusta este tipo. Tiene una mano peluda similar en marcha. ¿Qué más reescribe esto de lo que hablamos, que es la versión de Figman de Chat GPT, juega con eso ? Quiero que tu página sea desplazable. Bien. Así que asegúrate de que cuando estés haciendo la plantilla, ésta pueda hacer esto. Si nunca antes lo has hecho, solo asegúrate de que cuando tengas tu marco, y tengas esto en él, sea más largo. Bien, entonces cabe ahí. Bien, también, esta es la altura del teléfono. Mi estatura es de 852, y hemos recortado el contenido, así que no lo vemos Eso realmente no importa. Lo que realmente importa es que esté configurado en un marco de algo que sabe, como un iPhone 16. Si no funciona, puedes ir al prototipo. Todavía probablemente no va a funcionar, así que tienes que ir al prototipo y tienes que decir, me gustaría el desbordamiento, que es lo que está pasando el rato aquí. Por defecto no hay desplazamiento. Quiero desplazarme verticalmente, y eso debería conseguirte este tipo. Todo bien. Impresionante. Me he tomado algunas libertades y lo muevo para sacar la cámara. Tú haces lo mismo. Jugué con algunas fuentes y algunos colores. Nos meteremos más en eso más adelante, pero no pude salir yo mismo. Muy bien, salte. Juega con la IA, emociona parte del tiempo que te puede salvar y darte cuenta de algunas de sus debilidades donde no hace lo que hicimos en el último curso Cosas simples, cosas geniales, cosas realmente complicadas. Vamos a necesitar arreglarnos nosotros mismos. Preocúpate. Aprenderemos a hacerlo. Todo bien. Realización de proyectos de clase feliz. Te veré después de que lo hayas hecho. Oh, en realidad, cualquier última cosa aquí, entregables. Toma una captura de pantalla como esta y subirla a los proyectos de clase. También, comparte en redes sociales. Hazle saber a la gente que estás haciendo el curso avanzado con Dan y es increíble. Ustedes compruébalo y esto es lo que hice. Sí, ahí tienes. Te veré en el siguiente video. 17. Diseños automáticos anidados y adaptables: Uno. En este video, vamos a construir nuestros propios autolayouts anidados responsivos Como hicimos en el video anterior, usamos los robots. Usamos IA para hacerlo todo. Vamos a hacerlo todo nosotros mismos porque necesitamos entender cómo se crean estas cosas para poder solucionar problemas, crear diseños más complejos y necesitamos aprender a abrazar. Sí, va a haber abrazos en esta. Va a ser muy incómodo. Bien, vamos a saltar Hugin. Empecemos pulsando la tecla I, y vamos a elegir un marco de iPhone 16. Por alguna razón, lo plops en donde quiera, vaya a alinearlo perfecto, y este va a ser mi menú o dos Tiene nombre, muy sexy. Lo que vamos a hacer es empezar a construirlo. Voy a empezar con un marco y voy a dibujar uno aquí. Bien, voy a cambiar el color del mismo solo que podamos verlo contra el fondo, escoger cualquier color viejo en la pantalla, un bucle. Vamos a traer una imagen. Puedes traer cualquier cosa. Yo tengo uno. Recuerda, Comando Mayús K es el atajo para traer una imagen. Y hay uno que se llama Imagen cinco. Es muy chulo. Trae una laptop. Ahí vamos. Voy a simplemente arrastrarlo por ahí manualmente hasta como quiero que sea, y echemos un vistazo. Bien, las restricciones están bloqueadas. ¿Ves eso cuando lo estoy arrastrando, puedes ver esa línea punteada que recorre la mitad de ella Es sólo decir que la altura y la anchura están bloqueadas. Se puede romper pulsando ese botón ahí. Desbloquea la relación de aspecto. Quiero tenerlo solo la extraña relación de aspecto. Bien. Voy a alargarlo. Debería ser más reflexivo. Ya es lo suficientemente bueno. Ahora, lo que voy a hacer es construirlo a medida que avanzamos. En lugar de construirlo todo y luego convertirlo. Entonces lo que voy a decir es en realidad este marco vamos a darle un nombre. Et llama a esta una tarjeta. Esta imagen se va a llamar imagen. Lo que quiero hacer es el padre, que es la tarjeta. Quiero decir que eres Auto out. Puedo dar click en el botón. ¿Dónde está el botón? Ahí está ahí, o puedo usar mi atajo Shift A. Ahora lo genial de eso es, ¿ves que lo está envolviendo? Todo bien. Quiero asegurarme de que mi relleno es 16 y la altura es 16. Genial. Hagamos algún tipo. Voy a teclearlo por aquí. Voy a escribir, traer tu laptop, y va a entrar aquí, pero el problema es, si pongo en el Autou va a funcionar Va a ir exactamente a donde tenía que hacer. Excelente. El problema es que iré y agregaré mi fecha. Déjame saltar a hacer una cita. Tengo mi cita. Si trato de meterlo ahí dentro, hay salida automática, esta salida automática está ajustada a eso, que es vertical, o podría hacerlo horizontal. Ambos no van a funcionar. Tenemos que hacer esa bondad anidando en el medio aquí. Déjame moverlos así que trae una computadora portátil encima de la fecha. Todavía no funciona, pero si cojo a estos dos tipos y los pongo dentro de su propio auto out, eso es lo que se llama una salida automática anidada Tengo uno que voy a poner aquí dentro de este padre. Está anidado en su interior. Obtuve estos dos seleccionados, puedes hacer clic derecho en él y decir, quiero enmarcar esta selección. Podrías dibujar el marco primero y arrojar a estos tipos. Depende de ti. Están en este marco. Voy a convertirlo en un toot Shift A. Este va a llamarse rumbo Aún no funciona, Dan. Mira, aunque está anidado. Lo oculto está dentro de la tarjeta. Pero esta cosa de aquí, puedo hacer algunas cosas geniales. Recuerda, esta tarjeta estaba lista para que fluyera hacia abajo. Este Ayo se puede configurar yendo horizontal. Vertical, horizontal. Fresco. No está funcionando del todo, pero eso es un Au anidado Encontrarás muchos nidos dentro del nido dentro de los nidos. Así lo hacía la IA de forma automática, lo cual fue genial. Echemos un vistazo a hacerlo un poco mejor porque en el momento lo hace. No está del todo bien. Cuando escribo, escribo funciona, pero simplemente se apaga y para siempre. Hay algunas cosas que tenemos que ver. Echemos un vistazo a este padre de familia, el rubro. Este rumbo por el momento va a por ahí. Queríamos ir todo el camino hasta aquí. Haz eso. En el momento en que el ancho, ves dice abrazo ahí, abrazo contenido, está abrazando gran oso abrazo alrededor del contenido lo más fuerte posible, que es muy apretado, justo alrededor de los bordes Lo que quiero decir es no abrazar. Me gustaría que llenaras tu contenedor. El contenedor, en este caso, es el carrito. Ese es el padre o el contenedor. Quiero que llenes todo lo que puedas. Se ve una pequeña flecha que aparece aquí ver. Voy a ir por ese camino. Estás como, increíble. Eso funciona. Entonces este rumbo ahora se extiende por todo el camino. Lo que tengo que hacer ahora es que en este momento están todos aplastados a la izquierda Voy a decir, quiero que aplastes a la izquierda. Y tiene una brecha de ocho. Eso es una pequeña brecha entre ellas. Voy a decir la brecha en realidad, ¿ puedes simplemente hacerla Auto? Dice el padre, quiero ser lo más grande que pueda. Voy a llenar a este contenedor. Pero estábamos forzando la brecha también para que fuera un cierto número. Pero decimos B Auto, va, bien, B lo que quieras y se expandirá hasta el contenedor. Consíguelo. Vamos a cerrarlo nuestro padre, que es un Auto out. Tenemos esta imagen colgando dentro de ella, y luego tenemos esta cuadra que tiene su propio pequeño mundo de Auto Lou pasando con estos dos tipos adentro Bien, ahora voy a agregar mi texto descriptivo. Voy a saltar a que se haga. Bien, eso fue lo más raro que comprobé para ver si la IA me daría urnipsmo Ese es el Laurenopsm que tenemos. Entonces ahora tenemos Disney. Guau. No es Disney. Sentí Disney cuando lo leí. ¿Bien? Si los tiramos aquí, tong como los conseguimos en el lugar correcto, debería llenarse y conseguimos este precioso auto Out, la misma manera que esto era Revisemos dos veces algunas cosas solo para asegurarnos de que todo funcione. Un par de cosas es que no va al borde. ¿Cómo lo hacemos? Le peinamos y le decimos, ¿ queremos tu ancho? Queremos que te vayas. Vamos a llenar tu contenedor. Vamos a salir todo el camino. Lo hizo. Realmente no funciona porque ninguna de las palabras es lo suficientemente pequeña como para romperse. Hagámoslo otra vez. Entonces voy a cambiar el tamaño del texto. Vamos a Roboto regular. Oh, eso lo va a hacer. Yo hago exactamente lo mismo. ¿Por qué no agarrar el texto Podemos decir tu ancho, mi amigo es llenar contenedor. Oh, al menos una palabra surgió. lo que me refiero, sin embargo, lo llena genial. Sigamos escribiendo. La otra cosa que me gusta comprobar con Autolayouts. Lo hicimos desde el principio es, comprobar que esto funciona, seguir adelante. No está funcionando. Este cuadro de texto es lo que se llama una altura fija. W seleccionado, el texto. Puedo ver que la altura se establece a esta altura de 115. Eres como yo no quiero ser 115. Me gustaría que fuera abrazo contenidos. Eso funcionaría. Hay un par de unos que podríamos hacer. Podríamos hacer contenidos de abrazo. Este botón de aquí hace exactamente lo mismo. Altura automática. Es sólo una palabra más para abrazar contenidos. Incluso cambia. Mira, si vas a abrazar contenidos, ¿ves que cambia a eso? De otra manera, la tercera vía porque necesitas tres formas de hacer las cosas. Simplemente puede hacer doble clic en la parte inferior de un cuadro de texto. Lo cambiará a abrazo y altura automática de todos modos. Darle una prueba. Prueba de pruebas, vamos. Sí funciona. Impresionante. Todo bien. ¿ Algo más que queramos verificar? La otra cosa que nos gustaría comprobar es todo esto receptivo? Oh, algo así. Sí, lo es. Totalmente receptivo. Lo que estaba pensando no iba a funcionar e iba a mostrarte era, todo funciona. Fresco. A veces es sólo esta caja de aquí. Está configurado para llenar. Ya lo hicimos. A veces cuando lo arrastras, eso es lo que era. Tenía el mío muy claramente así, con un ancho específico. Cuando lo estoy diseñando, a menudo lo alinearé de todos modos ahí, aunque no he dicho relleno, y solo será un ancho fijo todavía. Voy a parecer que es. Parecería que va al borde. Pero cuando hago esto, va, No. Bien. Entonces este de aquí, me puse a. Llena ese contenedor, por favor. Bonito. Es totalmente complicado. ¿Bien? Entonces, si te encuentras como, Oh, eso fue un poco duro. Haremos algunas más a través de la clase. Pero en términos de louts de auto, Auto outs por su cuenta, uno de ellos es realmente simple Cuando empiezas a meter unos dentro de otros, estás como, eso es raro. Entonces metes esto, ¿va a estar abrazando o va a estar llenando el contenedor Recuerdo cuando me declararon, tuve que pinchar sobre la pelota e irme, ¿es gancho? ¿Es contenedor lleno? Ir de compras no es correcto. Y solo jugaste con los botones hasta que tienes una idea de me gusta, Bien. Entiendo. Lo entiendo completamente, pero no fue instantáneo cuando también lo estaba aprendiendo. Entonces, si te resulta un poco complicado, es complicado. Pero cuando lo consigas y estás haciendo todas estas cosas buenas, y puedes empezar a hacer las cosas hicimos en el último donde vayamos, bien, vas a ser un duplicado, agarrarlos a los dos, turno A o fuera, y luego arrastra racimos de ellos, y luego vas al Comando K porque somos increíbles y vamos a reemplazar el contenido, y solo decimos, llenamos con pestañas repláticas para que podamos rellenar con contenido realista, luego presionamos Command Enter, aunque siempre solo presiono Enter. ¿Alguien más hizo eso? Es que es tan bueno. Mira, los eventos de networking acaban de pasar y los cambiaron. Diferentes fechas, diferentes descripciones, diferentes Oh, tipo de sabe lo que somos. ¿Cómo sabe qué es Bring her laptop? Oh. Eso da un poco de miedo. Lo es. Esto es lo que hacemos al traer su computadora portátil. Diseñador de renombre. Oh, los robots. Me estás asustando, hombre. Bien, eso es todo. Voy a contemplar mi vida con los robots, y te veré en el siguiente video. Guau. 18. Disposición automática de cuadrículas en Figma: Hola a todos. En este video, vamos a aprender sobre las cuadrículas de salida automática Mira lo genial que es esta cosa. Tiene cuadrículas. Podemos mover cosas por ahí. Tú vas ahí. Se llaman cuadrículas de salida automática Son fáciles de usar. A mí me encantan. Está saltando. Bien, para empezar, he creado un nuevo marco, nada en él. He hecho un color de fondo como un azul medianoche. No importa. Vamos a agarrar un marco. Lo vamos a meter dentro, y vamos a encontrar el Auto. Es esta nueva de aquí. Hemos visto básicamente la forma libre solo significa que es un marco con las cosas moviéndose por todas partes De la misma manera estoy dibujando cosas dentro de este marco. Eso es forma libre. Aquí hay un rectángulo. Eso simplemente no tiene relleno, pero es simplemente pasar el rato. Vamos a borrarlo y vamos a cambiarlo. Nos fijamos en vertical y horizontal para Auto out. Lo que vamos a hacer es hacer clic en este de aquí. Lo que va a hacer es convertirlo en autolout. Nos ahorra tener que hacer clic en eso, pero también lo convierte en esta grilla. Así que mejor en estos momentos. Estoy seguro para cuando lo estés haciendo, va a ser agradable y no Battery, puede que no tenga tantos bugs, podría hacer algunas características nuevas. Todo lo que tenemos aquí es, vamos a traer algunas imágenes. Es la mejor manera de explicarlo. Vamos a ir a Comando Mayús K o Control Shift K. Vamos a traer oh seis a diez de las imágenes. Va a hacer clic en el Lugar A, y vamos a arrastrar uno hacia adentro y no va a funcionar. Vamos por allá. Estos están todos amontonados uno encima del otro Si agarro esto y lo tiro a mi grilla, lo cual realmente no puedo ver, ¿dónde estás? Ahí está. Si agarro eso y lo arrastro, no va a funcionar. Hagámoslo del tamaño adecuado solo para comenzar. Voy a ampliar y contratar. Vamos a conseguirlo en algún lugar así, y voy a decir que entras ahí. O puedes ir a copiar y entrar aquí, seleccionar el marco donde quieras e ir a pegar y yo entraré también. El único problema con esto es que está funcionando. Tiene esta pequeña grilla. Puedes ver aquí la imagen es cada vez más pequeña. Está tratando de llenar, pero simplemente no puede hacerlo. Lo que tenemos que hacer es antes o después, tenemos que seleccionar en la imagen y decir, no tener su relación Aspec bloqueada Desbloqueemos la relación Apec. Dale un clic. Se lo voy a hacer a todos estos todos de una vez. Ahora va a hacer cosas más geniales y receptivas. W's Mame Podrías construir esto tú mismo con marcos y relleno y autolayout, pero las rejillas solo hacen que Lo bueno de ello, también, es que vamos a agarrar esta copia y en realidad voy a, vamos a arrastrarlo cuando sea un poco más grande. Veamos qué hace. Si arrastro a este tipo justo por aquí, no lo es. Está usando la parte superior izquierda de esta cosa, y no se está acercando a ningún lado. Entonces es demasiado grande, no sabe a dónde ir. Este blanco y beta. Si hago esto, se aprieta. A veces, irá y cruzará a los ruidos. Esto va a cruzar dos de mis ¿qué son filas? Lo genial de esto es, mira, es todo redimensionar y responsable Responsivo es la palabra. Vamos a jalar. Ese era mi ket. Le pedí a AI que me hiciera keta. No sabía lo que era. Dije: Es un piano con una guitarra y lo aplastó en el costado ahí. Ahora lo que quería. Entonces voy a copiar eso, pegarlo. Acabo de hacer doble clic en él, lo pegué. Es tan bueno. Súper fácil de hacer estas pequeñas rejillas. De lo contrario, tardas años en marcarlos. Puedes conseguir que abarquen más de uno como este de aquí. Pueden superponerse. Bien. Y esta cosa seguirá expandiéndose y contrayéndose. Si necesitas jugar con las capas, es igual que lo normal aquí en tu panel de capas, si lo quiero por debajo de todos estos chicos, bam, ahí vamos. Yo no quiero eso. A mí me gusta la grilla que tienen en marcha, todas las brechas deshacen. Puedes ajustar todos estos. Se puede ver por aquí, se puede ver que la brecha es de diez y diez. Si quieres que sea, ¿qué queremos 16 y 16? Se puede agregar relleno. Vamos a las ocho y ocho. Son bastante versátiles. Arrastre ese todo el camino para ese camino, y ellos son muy responsables. ¿Por qué este tipo está sacando el fondo ahí? Bueno, vamos a echar un vistazo. Ahora no está constreñido, sino debajo de la imagen de relleno, está bajo llenado. Se. Bill, es porque lo arrastré más temprano A lo mejor estaba tratando de arrastrarlo. Ahí vas. Siendo tu pequeño hogar ahí , amigo, puedes moverlos fácilmente. Puedo hacer doble clic en este tipo y simplemente arrastrarlo hacia arriba e intentará subir ahí. Bonito. Puedes duplicarlos. Qué va a pasar por esta extraña estructura de filas. Vamos Vamos Di. Vamos a poner uno nuevo. Es tan inteligente. Puedes agregarlos en ti mismo pinchando en todo el marco y por aquí, puedes hacer click en esto y decir, yo solo me incumplió dos y dos Digamos que quiero que esto sea tres y dos. Simplemente coloco el mouse sobre, tengo una idea de lo que quiero y luego hago clic en él. En este caso, voy a tener que decirte, lo quiero, pero quiero esto por aquí y tal vez voy a hacer que este vaya por ahí. Mírennos. Siendo todo KitArt creativo vas ahí dentro Bien, ese fondo oscuro fue una idea tonta. Volvamos a un blanquecino. En realidad blanco completo. ser un poco raro cuando los mueves. Mira esto. Quiero trasladar a este tipo por aquí. Queremos ese lado. Lo aplasta y movió todo a su alrededor. En ocasiones es necesario copiarlos y pegarlos. A veces funciona muy bien, a veces no dependiendo de cuánto tengas abarcado y lo que hay dentro de la cuadrícula Ahora, puedes hacer estas filas, filas y columnas arriba y abajo. Puedes hacerlos tamaños individuales. Por el momento, todos están en el set de Auto. Estos pequeños puntitos cuando estoy rondando. Esos puntitos están en el exterior y ahí están las medidas. Lo que puedo hacer es que puedo decir, en realidad, quiero que este de aquí sea justo y puedes hacer clic en él y simplemente arrastrarlo o teclearlo. Si sabes que quieres que sea 150, escríbalo. Todos estos cambian para adaptarse al espacio proporcionado. Es muy chulo. De hecho puedes arrastrarlos fuera de sus casitas. Todo lo que necesita hacer es que el marco padre no debe estar configurado para el contenido del clip. Puedes hacer algunas cosas extravagantes con él, pero terminas rompiéndolo. No lo rompas. Deshaciendo, no lo rompas. Pero sé que puedes agregar texto. Hazme saber en los comentarios si puedes resolverlo. No puedo hacer el texto, expandirme y contraerse cuando es texto comestible. No es tan receptivo, pero hagámoslo de todos modos. Vamos a entrar aquí, vamos a arrastrar esto, y vamos a ti. Recibí un mensaje con el que estaba jugando. Aquí está. Voy a meter esto. En realidad, por eso tenía el fondo oscuro vuelta a alrededor del tiempo. ¿Esto está aquí? Quiero una fila extra en la parte superior. Lo que puedo hacer es decir, quiero, lo que quiero, otra fila. Ahora va a ser de tres en tres. W. voy a agarrar y voy a tener que arrastrar estos hacia abajo para darme algo de espacio para el texto. Es tan fácil, ¿no? Ahora, esto de aquí, voy a ir a cortar. Entonces cópielo, haga clic de nuevo aquí. Voy a dar click en este campo e ir a pegar, va a estar ahí. Es el tamaño equivocado. Pero el problema es, sí, ese es el gran problema es que no puedo averiguar cómo redimensionarlo, así que tienes que elegir un ancho apropiado para que pueda pasar el rato con los tíos, hacer las cosas Pero el texto eventualmente llegará al borde y se irá, adiós. Eso es lo único. Lo mismo con esta altura aquí. No quiero que sea auto. Voy a arrastrarlo hacia abajo así es como y así. Podría conseguir que se rompa. Mira esto. No puedo conseguir que el tamaño cambie. Eso es realmente lo que quiero. Voy a seleccionar el texto, voy a decir, no quiero que esté abrazando el ancho Quiero que llene el contenedor, y quiero que lo arrastre hasta aquí. Entonces se romperá ahora. Mira esto. hacer que funcione. Vamos a agarrar eso también. Te haces más pequeño. Oh, muy genial. Bien. ¿Qué? Es más fácil usar esta función de cuadrícula. Una cosa que quiero mostrarte, sin embargo, es justo antes de irme, es como un regalo especial si alguien ha esperado tanto tiempo. Olvidé usarlo. Este de aquí era mi ajuste. Yo estaba como, Hombre, eso estuvo genial. Lo conseguí en una IA, y estaba como, ¿Cómo demonios lo conseguí? Porque yo también lo conseguí para eso. Entonces lo que hice fue, cierto, es que dibujé un rectángulo. Y luego hice esto. No va a ser lo mismo porque la IA tiene no lo sé, la incapacidad de repetir las cosas, pero voy a hacer una imagen y voy a Esto es lo que pongo en guitarra de cerca. Se puede usar el color y yo uso el número hexadecimal del color. Podrías usar IGB, sea lo que sea, como color principal. Entonces lo hice y conseguí esto y estaba como, genio. Yo hice los auriculares. Genio. Entonces le hice fallar al Keta Oh, usé un color diferente. No era naranja, era rosa. En este caso, podría ir, Todos hacen cambios y dicen guitarra acústica. Depende de ti, pero así es como obtuve estos gráficos planos realmente bonitos que estoy usando aquí. Anímate. Si tienes una edad y estás como, Qué demonios es un keitar M es el acento ¿Estás listo? Ahí vas. bienvenido. Yo quería uno tanto. Manos arriba quien olvidó que existían. Ahí vas. Aprendimos cargas en este video Figma, cuadrículas Auto Lou, y Bien. Eso es. Nos vemos el siguiente video. 19. Proyecto de clase 03: Cuadrículas: Oh, diversión. Es tiempo de proyecto de clase. Es divertido. ¿De qué hablas? Gran aprendizaje y práctica. Lo que quiero que hagas es quiero que uses la función Auto lout, lo siento, la grilla Auto Lout característica que aprendimos en el último video ¿Bien? Es bastante fácil. Quiero que hagas lo que hicimos en el último video. Hay algunos requisitos. Me gustaría que usaras cuatro o más imágenes. No te importa dónde los consigas, biblioteca de stock generada por IA, tus propias imágenes. Me gustaría que estuvieran relacionados con tu particular género musical. Entonces podría ser rock 'n' roll, soul, hip hop, lo que sea que tengas. Oye, haz eso. Quiero que experimentes usando al menos una caja de colores. Puedes ver aquí en mi uno, cambié el mío después del video para agregar estas cajas de colores. El caso es que necesitan poder moverse con ellos. ¿Eso va a ser un poco más difícil? No lo sé, Curso avanzado. Estoy sentado algunas tareas donde de alguna manera, cuando lo pones probablemente, esto es solo un marco. Entonces es un marco que estaba sentado por aquí que ahora está ahí dentro. Pero por defecto, este tipo no quiere expandirse y contraerse. Quiero que veas si puedes averiguar cómo hacerlo. Hazlo. No te preocupes. Consulta el siguiente video. Bueno, consulta a continuación. Aún no mires, pero alguien en los comentarios te hará saber cómo lo consiguieron funcionar. Entonces solo una caja de color en lugar de una imagen. Te voy a dar una pista, algo que ver con el ancho y la altura. A ver si puedes averiguarlo. Lo hemos hecho antes es la clave. Y Text, pero eso es opcional. Quiero que hagas al menos un objeto abarcando una columna. Eso abarca uno, dos, tres, que abarca dos, es solo uno de ellos al menos. Reglas, tomar una captura de pantalla y subirlas a proyectos de clase. Y estos se ven geniales. A mí me gusta esta pequeña grilla. Subirlo a redes sociales y solo diga que está experimentando con el autolayout de la grilla Figma ¿Y qué opinas de ello? Asegúrate de etiquetarme. Diviértete jugando con él. Todo bien. Te veré después de que hayas terminado tu tarea, no tarea, proyecto de clase, cosas divertidas. ¿Recuerdas? A. Siguiente video. 20. Cosas importantes que debes saber sobre los componentes en Figma: Componentes. Ya los conoces. ¿Por qué estamos haciendo un video? Tengo algunas cosas importantes que atrapan a la gente, me atrapan. Quiero compartirlo con ustedes. Este video es divertido? Me pierdo un poco. No planeaba perderme, pero lo hicimos, pero lo arreglamos. Ojalá, esa sea una pequeña pepita agradable para ti . Lo juro, lo sé. No queremos hacerlo, pero sí. Todo bien. Eso es. Vamos a entrar. Hablar de componentes. Bien, así que vamos a usar creé este nervio y me olvidé. tuyo podría estar al frente porque estás como, él dejó su nervio ahí atrás. Lo hicimos antes en el curso, así que voy a dar click sobre esto, usar mi botón de mover hacia atrás, que es solo el primer corchete cuadrado. Y luego tengo esto. Yo sólo voy a hacerlo por aquí porque está un poco más claro. A, tengo este Nav que hice. Echemos un vistazo a cómo se hace. Entonces se llama Nerve bottom. Dentro de ella hay algunos. ¿Qué son estos? ¿Te acuerdas? Sí, estos son componentes principales. Estos son los patrones. Estos son los padres. Entonces cuando hago copias de estos, se convierten en instancias de ese jefe. Lo genial de esto es cuando ajusto el principal, hazlo. No estoy seguro de lo que le voy a hacer, pero voy a destrozarlo ¿Puedo hacerlo desde esta distancia? ¿ Lo ves ahí? Se lo está haciendo a ambos. Fresco. Sabemos lo que hacen los componentes. Sin embargo, una de las cosas es, digamos que quiero convertir este Nav también en un componente principal porque lo voy a usar en muchas páginas. Bien podría controlarlo todo. Veamos qué pasa. Voy a usar mi atajo Comando Mayús K. Eres componente. Eso es imagen de importación. Esa es la opción de comando K o el control K, ¿qué pasó? Sí se convirtió en componente principal, eso es increíble, pero los disparó . ¿De dónde vienen estos? Esto es lo que sucede cuando veo los archivos de otras personas, sobre todo cuando están en el nivel intermedio, no del todo avanzado. Estás como, ellos solo dejan esto aquí y ¿qué carajo sucedieron estos? La regla es que no puede tener componentes principales anidados dentro de otros componentes principales Debido a que giramos el marco exterior al componente principal, fue y tosió estos y se dejó dentro de aquí, ves, estos ya no son los componentes principales. Mira, son solo instancias, versión poco diamante. Lo que tenemos que hacer es ser pensativo de eso. Y lo que encontrarás es que vamos a hacer zoom un poco. Verás que este tipo de aquí, mira, están ahí debajo. Voy a hacerlo. ¿Qué voy a hacer? Sí, vamos a despedirlos. Y lo que voy a hacer es encontrarlos. Están todos aquí. Vamos a arrastrarlos, y vamos a poner en una página de componentes. Entonces voy a cortarlos y decir, ustedes ahora viven en mi página de componentes dulces , de la cual no tengo mucho. Puedes guardarlos en el mismo documento, No hay ley en contra de ello. Pero cuando estás trabajando en un archivo más grande, realmente necesitas una página de componentes. De lo contrario, solo puedes tenerlos al lado de tu diseño, simplemente pasando el rato por aquí. Bien, eso es importante, número uno. La otra cosa que quiero mostrarles es que este ahora es un componente principal. Tan claro, ¿qué he hecho? ¡Oh! Yo soy como, ¿Qué pasa? ¿Congelado? No, accidentalmente golpeé el atajo para capa de bloqueo. Ni siquiera puedo recordar de qué se trata. ¿Cuál es el atajo de capa de bloqueo? Por favor, sostenga. ¡Oh! Ahí está ahí. Desplazar comando hacia fuera. Yo no hice clic en eso. Yo hice clic en algo en mi teclado y lo bloqueó. De todas formas. Entonces lo he desbloqueado. Lo que tengo que hacer es que tampoco debería usar esto aquí. Podría dejarla aquí. Entonces eso es mucha gente simplemente deja esto en su primera página, y luego solo hace instancias de ello. Seamos inteligentes, ¿de acuerdo? Y vamos a cortar esto. Vamos a nuestro panel de componentes. Pongámoslo aquí. Esto es incluso un desastre mayor. ¿Qué hemos hecho aquí? Tú estás ahí. Lo que tengo muchos de estos tipos uno encima del otro. Todo bien. De verdad quiero simplemente cortar esto del curso, pero estas cosas también te van a pasar a ti. ¿Qué carajo pasó ahí? Voy a deshacer, vuelve. Debió haber habido tantos tipos todos colgando por ahí. Volvamos a mi hi fi. Te quiero de vuelta. Ahí estás. ¿Qué es esto? Sólo hay uno de ellos. Copia y ve a mis componentes. Haga clic en Pegar. ¿Qué hice? A lo mejor los pegué dentro de estos tipos ¿Los habían seleccionado y se fueron a pegar? Eso es lo que hizo. No sé qué pasó ahí. Sabes lo que estoy haciendo. En fin, eso sucede. Ahí vas. Tenía los seleccionados. Acabo de tener mi pasta regular, y de alguna manera, estoy diciendo que es un bicho. Es tres de ellos. Se pegó uno por cada icono que tenía. Hm. Oh, puse una instancia de ello dentro de cada imagen. Eso es raro. Todo bien. Ahí vas. Aprendí algo en esta clase. Bien, empecemos de nuevo. Compruébalo. Agítalo. ¿Estás listo? Olvídate de todo lo que te pierdes. Lo haré en Móvil Hi fi. Te voy a decir, amigo mío. Voy a cortarlo, no copiarlo. Probablemente ahí es donde me equivoqué. No es un buen componente, así que te voy a decir. Nada seleccionado. Pégale. Aquí es donde voy a mantener este componente principal. Dentro de este componente principal tiene un montón de estas instancias de estos chicos en la parte superior aquí. Bien, lo estamos haciendo bien. Volvamos al móvil. Vamos a nuestro panel de Activos, y deberíamos tener crédito en este archivo bajo componentes. Deberíamos tener donde está él. Ahí mi trasero ahora. Bien, entonces voy a meter esto. Ahora debería ser una instancia. Fresco. ¿Algo más? ¿Dónde tenemos que aprender? La hay, pero me he puesto nervioso. Eso es realmente. Lo que quiero hacer es que voy a poner uno por aquí también, porque es receptivo, llegamos a ajustarlo. Lo genial de las instancias del componente principal, recuerda nuestros componentes principales aquí arriba pasando el rato. Estos son solo hijos de ellos. Hacen lo que él diga, pero hay algunas pequeñas cosas que podemos hacer. Puedo decir, en realidad, los colores seleccionados aquí, quiero que sea blanco. Bien, siguen conectados si vuelvo a mi componente principal y digo, ¿dónde está este tipo de aquí? Digo, todos tienen algo de relleno. Estoy acolchado en la parte inferior. Lo que quiero hacer es dividir el relleno. Cuando se trata de nav, me gusta más en el fondo, bonito mentón pequeño, vamos 24, y este de aquí arriba, vamos 16. También va a querer un color de fondo. Voy a darle un relleno ligeramente blanquecino. Sólo porque creo que se ve genial y me gustaría tenerlo y me gusta decir, tienes un efecto de sombra. Me gustaría que no bajara, cero, nada va a la derecha. Esto es arriba y abajo, así que quiero ser menos cuatro , sube. ¿Lo ves ahí? A lo mejor el spread o el desenfoque es un poco más. A lo mejor sólo un poco menos de opacidad. Esto lo he hecho muchas veces sé lo que me gusta sin verlo en el documento. Volvamos a nuestro móvil y porque lo hicimos en nuestro componente, todos estos ajustados. Eso es muy genial. Pero se puede ver aquí estos permanecieron blancos, lo cual también es muy chulo. Probablemente pueda usar ese Nav ahora, pero voy a seleccionar en eso y decirte, quiero que seas es de color más oscuro del que estoy usando. Lo ideal es que aún no lo haya resuelto. El componente principal es genial. No coloque los componentes principales dentro de otros componentes principales porque se escupen. Probablemente deberías mantenerlos en una página separada, pero no tienes que hacerlo y puedes anular instancias con cosas pequeñas como el color. No puedo ajustar el icono aquí. Tengo que volver al componente principal, pero puedo cambiar el color y algo de la maquetación y puedo ir, A ticketing, quiero ir por aquí Quiero apagar el globo ocular en esto y refluye porque somos increíbles Todavía está ahí. No está apagada. Es imposible dar vuelta a cualquier cosa o eliminar nada. Si hago clic en esto y elimino en mi teclado, simplemente se va a dormir. Somnoliento. Lo último de los componentes es algo llamado restricciones. Ya sabes de ellos, pero veamos algo de rareza. Esto de aquí, voy a mover a estos tipos hacia arriba. Por el momento por defecto, arrastro esto hacia arriba, desaparecen. Quiero que se pegue al fondo del Nav. Voy a decir limitaciones. Quiero que sea de izquierda a derecha porque por el momento no lo es, echemos un vistazo. Creo que solo está haciendo a la izquierda, así que está atascado ahí. Necesito decir que tienes que ir a la izquierda y derecha para que quede blandito Además, quiero que se pegue al fondo. Te vas a quedar constreñido al fondo. Estás como, ya lo sé, Dan. Estás como, Bien. Pero, ¿dónde está ahora? ¿Dónde están las restricciones encantadoras? Se han ido. Lo sé. Las restricciones necesitan tener un marco padre. De lo contrario, no aparecen. Sin restricciones, observe exactamente esta misma cosa dentro de un marco padre, las restricciones están de vuelta. Ni siquiera tiene que ser componente. Si dibujo algo, marco, sin restricciones porque no tiene marco padre. Él entra aquí. Ooh, tiene limitaciones. Días felices. Bien, entonces eso es una cosa para recordar. La otra última cosita, digo la última cosa. Probablemente va a ser 20 más es volvamos a mi página de componentes. Estás como, Oh, bien podría hacer eso por él. Entonces este tipo, para que no tenga que hacerlo cada vez. Casey como, Bien, sin restricciones. Dan nos dijo que necesita un marco padre. Muy a menudo encontrarás todos los componentes dentro de este marco aunque no necesiten, para que puedas ver cosas como esta. Mira, está pegado a la parte superior y a la izquierda. ¿Bien? Esto no hace nada. Digamos que lo vuelvo a poner arriba, y lo cambio a así quiero pegarme a la derecha, debería hacerlo. Voy a ir a otra página. Vamos F Oh, no es a lo que me refería. Yo un marco, haz clic en esto Por qué voy a Creo que solo estamos jurando a todos. ¿Cuál es el corte habitual? Estaba en mi cerebro, me distraí con la FU. Oh, sólo estaba diciendo. Agarrando. Ahí vas. Tengo este nuevo marco con mal lenguaje. Entonces voy a agarrar mis activos. Voy a encontrar el fondo de una llamada, y voy a meterlos. Pégalos en cualquier lugar. Y mira. Oh, él está dentro. Él es top, que es el predeterminado, pero mira. No salió bien. Entonces realmente no importa lo que hagas. No sé por qué. Compruébalo ahora en tu versión. Podrían cambiar eso. Sería genial configurarlo como una especie de defecto para el componente principal porque no lo sé. Sea esa es la razón de los componentes principales, pero no funciona. Avísame si lo hace, y los comentarios, como que tienes que hacerlo después. Eso está bien. Bien, arriba, abajo. Porque una vez que lo has hecho una vez, no es tan malo, ¿de acuerdo? Porque a menudo los agarras, bien, y los pegas, y él traerá esas cosas. Simplemente no desde el componente principal. Bien, hubo uno divertido. Lo juramos un poco, nos perdimos, y realmente nos perdimos Espero que te haya resultado útil. Los componentes son fáciles, pero también pueden tener algunos bits quicky, y ese es el tipo de cosas rápidas que me encanta compartir Genial. Eso es. Te veré en el siguiente video. Voy a poner esquinas redondeadas en cosas. Eso es todo lo que voy a hacer, ¿de acuerdo? Ya puedes irte. Sí. Ocho es de buen tamaño para un teléfono. En realidad, necesitan verse más grandes para un teléfono. 24 es más representativo de un teléfono moderno, incluso un poco más grande. Me gusta verlo en el diseño. No tienes que hacerlo si lo deshago y vuelvo al cuadrado. Obviamente, cuando lo prototifique, va a entrar y ser recortado dentro de un teléfono de todos modos Así que en realidad no lo necesitas, pero usando mis flechas, ¿de acuerdo? puede ver ahí que tienen esquinas redondeadas, realmente grandes en el nuevo iPhone. Todo bien. Eso era todo lo que quería. Voy a volver a donde oh, voy a volver a mi vuelta de esquinas. Yo voy a hacer eso en el descanso, vas al siguiente video. Nos vemos ahí. 21. ¿Cuál es el buen espacio en Figma?: En este video, vamos a hablar sobre qué espaciado usar. Puedes usar lo que quieras, pero lo que sea que decidas, puedes hacer esta pequeña cuadrícula aquí. Te da una pequeña y agradable referencia visual para ir, Bien, yo espaciando aquí ¿Qué debería ser? Milla Usemos 32. Puedo asegurarme de que esto esté a 32 de distancia. Actualmente es 43. No es bueno. Puedes usarlo como solo una guía visual de, ¿qué debo usar? Siendo consistente con tu espaciado. Lo que voy a hacer es mostrarte también, cómo usar una app para agregar todas estas pequeñas medidas o dibujar las cajas. Y lo haremos una vez y puedes copiar y pegar este pequeño en cada nuevo trabajo para que no tome tiempo en el futuro. Bien, vamos a saltar. Bien, empecemos a arrastrarlos hacia afuera. Una vez que lo hayas hecho una vez, puedes copiar y pegar cada documento futuro para siempre. ¿Bien? Entonces quiero que este sea un bonito color brillante para poder verlo como una referencia visual. Y quiero mi primera, la talla más fundamental es de ocho por ocho, ¿de acuerdo? Y porque tengo las restricciones encendidas, bien, significa que solo tengo que escribirla una vez, y actualizará tanto la altura anchura. Ahorra un poco de tiempo. Bien, entonces ocho es el primero. Voy a acercarme un poco. Bien, y quiero ver una representación visual del siguiente tamaño, que son solo otros ocho, que son 16. Entonces solo quiero seguir subiendo en ochos, ¿de acuerdo? Me confunde un poco con las matemáticas en la cabeza, así que solo eso más ocho en el campo. ¿Bien? Estamos a las 24. Eso lo sé. Bien, 32. Estos son los tamaños realmente comunes. Puedes seguir subiendo. Depende de ti. También puedes hacer múltiplos de seis o cinco. Simplemente son más difíciles de dividir y tu desarrollador te odiará porque a menudo la desarrolladora, estará trabajando con un framework que ya existe. En lugar de que ella escriba en todas las nenas y ceros y 16 píxeles, irá a usar el espaciado prefabricado, y probablemente será ocho o una división Depende de lo mucho que te guste tu desarrollador. A mí también me gusta mantener el espaciado ahí dentro. Porque estos me gustan como de qué tamaño debería ser mi botón icono B, imagen B. Se le da una idea al mirar estos. El espaciado, me gusta irme. Si haces zoom lo suficiente, ya no puedo ver mis píxeles. Solía ser capaz de hacerlo. No estoy seguro de si apago el mío o está apagado por defecto. Lo sabrás porque el tuyo estará encendido, podrás ver los pequeños píxeles aquí dentro. Puedes ir hasta unos pocos y puedes ir a la cuadrícula de píxeles. Y puedes verlas. Porque quiero contar cuatro de ellos. Mira, ahí tengo cuatro. Ese es el tipo de brechas mínimas para las cosas. Obviamente la brecha mínima es cero. Minimis no es una palabra, Dan, el siguiente tamaño vuelve a subir. Entonces vamos a ir uno, dos, tres, cuatro, seis es bueno. Lo siento, ocho es otro. La gente sí usa seis. Sólo te estoy dando las reglas generales. La gente pone lo que quiera. Entonces seis verás comúnmente. Voy a apegarme a esta parrilla ocho. ¿Cómo lo sé? En lugar de contar píxeles, puedes hacer un par de cosas. Si tienes, digamos, esta seleccionada, mantén presionada la tecla de opción en una tecla Mac Oh en una PC y simplemente pasea por ahí Ya ves que te dice la diferencia entre todos estos tipos. Ocho, tú lo hiciste. O puedes hacer esto. Puedes decir, empiezas ahí, y luego quiero que esta exposición vaya más 16 Yo quería ir 16 porque está al otro lado para ver estas brechas. Este de aquí, ¿ queremos una brecha de 24? Probablemente necesitemos uno en el medio. Lo que voy a hacer es en vez de ir más 16, ¿a qué me fui más 16? Yo lo hice. Yo quería un tamaño diferente aquí. Lo que voy a hacer es deshacer eso. Regresen, por favor. Va a hacer más ocho más cuatro. Eso es hacer que la masa sea dura. Esto funciona en mi cerebro. Entonces no quiero ir a los 16 completos. Yo quiero ir sólo 12. Voy a ir más 12. Es un tamaño más razonable. Sigue siendo divisible, hay ochos, algo así, me entiendes ¿Bien? Y entonces este podría ser del tamaño de 16. Entonces vamos a conseguir más 16. Puedes seguir subiendo con las tallas, pero a mí me gustan esas. Esa es una buena referencia justa para tener en cada doc. Cópialo o pegarlo a través para que puedas empezar a hacer, ¿ ves esta brecha aquí? ¿Qué debería ser? Probablemente esa. No, a lo mejor éste. A lo mejor las brechas entre esto estaría bien como eso. ¿Ves que es solo una referencia visual? Esto sólo podría estar trabajando en mi cabeza. Una cosa que quiero hacer, sin embargo, es que no sé qué es eso. Tengo que darle click sobre él. Dice 32. No es difícil. Te voy a mostrar una llamada Plugin. Voy a bajar a mi panel de Acciones. Vamos a Plugins. Ahí está esta llamada Design Doc. Actualmente lo están renombrando Spectral. Creo que lo cambiaron de nombre Spectral, y entonces no todos lo encontraron, así que luego volvimos a Design Doc Podría llamarse algo diferente. Para cuando llegues aquí, hay muchas cosas que hacen esto. Este no es sólo uno de ellos. Es la que me gusta. ¿Esta es la mejor? No tengo idea. Yo sólo uso esto. En realidad, hay una llamada dimensión, hay anotaciones. Hay algunos otros. Podrías simplemente escribir las medidas y ver lo que obtienes. Si este ya no está disponible. Es como el beso de la muerte si los agrego a una clase. cuanto hago un plug in, quien lo hizo muere o deja de actualizarlo por lo menos. Vamos a ejecutar este. A mí me gusta esta medida. muchas otras cosas interesantes que hacemos. Pero echemos un vistazo a t's look a este. Voy a ir a esto. Voy a decir, me gustaría que pusieras la altura justo por encima de ella. Ahí vas. No es temporal. Está ahí para siempre. Lo puedes ver en mi panel de anuncios. Ahí está este contenedor que tiene mis medidas en él. Puedo encender y apagar. Simplemente es muy útil. Lo mismo con este, vamos a ir que necesitas. Uno de los mejores también. Tú también, por favor, arriba. Es solo una buena forma más limpia de poder ver qué tallas tienes. Probablemente va a necesitar un par de tallas más grandes. También puedes hacer las brechas entre las cosas. Puedo decir que tú y tú. Hagamos el espacio entre. Oh, cuando lo hice abajo, es tan listo. Bien, me gustan las pequeñas aplicaciones como esta. Eso es súper útil. Ahora, se me olvidó esa. Puedes tener esta copia y pegarla en el nuevo documento cada vez que inicies uno y luego tienes una pequeña y agradable señal visual de dónde va a estar todo. Lo que me gusta de esta app es que me gusta ponerla dentro de ella crea todo esto. Es bastante desordenado. ¿Es desordenado? No lo sé. Voy a ponerlo dentro de un marco, y voy a poner en éste va a ser llamado, no entró todo. El contenedor realmente no quería entrar. Creo que es porque está cerrado. Puedo arrastrarlo. Entra ahí, amigo. Yo soy debss Voy a acarrear este espaciado. Sólo para poder cerrarlo y es un poco más agradable, así puedo cerrarlo. Oh, esto es raro. Todo está ahí. No puedo seleccionarlo porque está bloqueado, y no puedo oh ahí está. Hola. Perdón por eso. Bien, hagamos que el fondo oscuro del espaciado sea uno porque se ve raro y blanco. Porque yo lo diseñé. Vamos a ir negro. Alto contraste real. Ahora, esa es esa aplicación. Lo veremos más adelante. Quiero mostrarte porque no lo sé , no puedo evitarlo. Me encanta esa app de medición. Oh no, lo haremos más adelante en el stand del curso. No lo hagas ahora. Todo bien. Esos son los espaciamientos básicos. Puedes usar lo que quieras. Sin embargo, hagas lo que hagas, crea una pequeña cuadrícula. Pon el esfuerzo de una vez y podrás usarlo una y otra vez. Todo bien. Siguiente video. 22. Qué espacio 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 en la última. ¿De dónde sacé esa magia? ¿Cómo se mejora en ello? Si ya eres, ya sabes, bastante competente en tu espaciamiento, puedes seguir adelante Pero si quieres un poco de no lo sé, ayuda a asegurarte de que las cosas sean consistentes y fáciles trabajar con tu desarrollador cuando entregues tu app, no causando problemas, o al menos siendo consciente del desarrollador y con qué van a estar trabajando Watch oh, hay muchos lugares en los que tu app o sitio web van a terminar, y qué va a terminar pasando es tu ingeniero, tu desarrollador, quienquiera que estés usando para hacerlo, podrías ser tú. Es muy probable que se construya sobre lo que se llama un marco. Tu desarrolladora, ella no va a estar pasando y poniendo todas las nada y ceros. ¿Bien? Van a estar construyendo encima de las cosas, habrían construido encima de las cosas, construirán encima de. Si eres desarrollador de IOS, bien, el desarrollador va a estar usando las pautas pre hechas o al menos de Apple. Si es Android, va a ser este material. Eso es lo que ellos llaman su sistema de diseño, y te dan muchas cosas útiles sobre cómo deben espaciarse las cosas. Si vas a la web, podría ser bootstrap, podría ser viento de cola Entonces, habla con tu desarrollador, averigua a dónde va, en qué lo están construyendo y luego lee un poco. Puede ser confuso. Necesitamos comenzar en este tipo de cosas para que en realidad puedas, no sé, 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. Bien, no puedes tener medio píxel. Se pueden dividir ocho por la mitad. Se pueden tener cuatro píxeles. Echemos un pequeño vistazo a por qué ocho es bueno, también. Entonces veamos material para Android, ¿de acuerdo? En el material punto IO. Están en su versión tres. Futuro, podrías estar en la versión cuatro o cinco. Compruébalo. Estoy bajo fundaciones. Estoy mirando el diseño, entendiendo en voz alta. Y es simplemente muy agradable pasar y decir que el espacio entre columnas es un valor predeterminado de 24 DP que es esencialmente píxeles. Abreviatura para píxeles independientes del dispositivo. Ellos usan esto porque muchos teléfonos diferentes tienen diferentes densidades de píxeles Solo considéralo píxeles si entiendes eso. Y cuando estás diseñando Figma, DP es igual a Px. Están usando espaciado de 24. Así que asegúrate de que cuando estés construyendo tu pequeño bloque espaciador y vayas primero a Android, haz tu brecha 24. Ese es el valor por defecto. Es felizmente divisible por ocho No por casualidad. Pero al menos es un espaciado muy común por el momento. Echemos un vistazo a IOS. Tener una lectura a través de lo que hacen. Creo que están usando 20 para sus márgenes en sus costados. Tienen algunos valores predeterminados diferentes a muchos otros. Y lo que pasa con IOS es que hay ambos teléfonos, hay TV, hay gadgets, ¿de acuerdo? Hay relojes. Así que mira un poco. Para lo que sea que estés diseñando, habrá documentación en línea. Vas a salir a la web, así que estás construyendo un sitio web o una aplicación web, descúbrelo , ¿es Wordpress? ¿Wordpress usa Bootstrap? Bootstrap es un framework que ayuda a los desarrolladores a trabajar rápido. ¿Bien? Y lo que acabarán haciendo es echarle un vistazo. Encontré esto, ¿de acuerdo? Las canaletas es como lo llaman. Bien, el espacio entre las cosas, y las canaletas por defecto son 1.5 RM, y ahí se puede ver que decían 24 pixeles, 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. Viento de cola, la gente está usando esto mucho, bien, para ayudar con su estilo Se puede ver aquí, me encontré bajo GAAP Bootstrap lo llama canalón, viento de cola lo llama brecha Todo es útil conocerlo como diseñador de UI. Puedes ver aquí, lo que un desarrollador va a escribir es que en realidad no va a escribir el número. Solo ojalá estén cerca de uno de estos. Entonces pondrán espaciado cuando estén codificando para decir que gap es cero, que es cero. GAP es uno, que es 0.25 de REM. Un REM por defecto es 16. Entonces 0.25 de 16 son cuatro píxeles. Entonces tal vez ese pequeño espaciado que teníamos antes, ese es el mínimo aquí, y es una buena regla no ir tres. Ya sabes, las divisiones se vuelven complicadas, y tu desarrollador va a tener que ir y anular muchos de los valores predeterminados del framework Puedes hacerlo, pero tu desarrollador probablemente simplemente lo ignorará y usará algunos de los valores predeterminados a menos que los fuerces ¿Bien? Echemos un vistazo. Entonces 16, seis, ocho, diez, Oh, hay un diez. Podrías decidir que en tu diseño necesitas un diez. ¿Dónde estaba? No tenemos diez. Tenemos cuatro, seis, ocho, 12. No hay reglas realmente duras y rápidas sobre lo que estas pueden ser. Pero si diseñas cuatro frameworks o los entiendes un poco, sobre todo si sabes a dónde va, si sabes que el desarrollador usa viento de cola, genial. Escriba todos estos. Entonces la gran comida para llevar es múltiplos de ocho son buenos, pero en serio, deberías ver cómo se está haciendo y copiar eso Hará que la transición de Figma al diseño y desarrollo real sea mucho más fluida No es necesario, pero tengo una web essentials, también, que cubre mucho del tipo de cosas que miramos aquí como ¿qué es un REM? ¿Qué es un DP? ¿Qué es bootstrap? ¿Qué es flexbox Hay todo tipo de cosas buenas que puedes aprender que informarán tu diseño cuando estés en Figma. Pero algo así 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. Todo bien. ¿Eso fue confuso? Un poco serpenteante. En fin, pasemos a algunas habilidades más duras Figma. 23. Proyecto de clase 4: navegación inferior responsiva: Es tiempo de proyecto de clase. Vamos a hacer la navegación Baja. Ya lo hemos hecho si has estado siguiendo. Yo sólo quiero que todo el mundo llegue hasta aquí. Entonces, lo que quiero que hagas, crea el Low Nav, ¿de acuerdo? Es este tipo de aquí, ¿de acuerdo? Y quiero que haga algunas cosas, ¿de acuerdo? Y sólo vamos a practicar las cosas que ya aprendimos. Así que quiero asegurarme de que estás usando componentes, tanto los íconos, o como el Nav. ¿Qué significa eso? ¿Bien? Esta cosa de aquí es una instancia de mi componente principal, que está por aquí. Para hacer eso. Estos son componentes principales de mis iconos. Asegúrate de que estás haciendo eso solo para practicar. Tienes que usar un autodiseño para tu navegación para que puedas hacer espaciado automático entre Eso solo significa que cuando agarro esto, esto se amortigua y los iconos tienen espaciado automático que entra y sale. salida automática corre el exterior y asegúrate que puedes configurar el Auto entre ellos. El último en que hay son las limitaciones. Las restricciones nos permiten hacer esto con una navegación. Quiero que la pegues al fondo y a la izquierda y a la derecha que cuando escojamos una nueva página, en realidad, vayamos a esta , no a una página nueva, pero digamos que necesitamos hacer un tamaño de fotograma diferente porque estamos haciendo no lo sé. iPhone 13. Mira, se encogió No es tanta diferencia. Eso fue emocionante, pero se puede ver que se adhiere al fondo y a los lados. Esa es la parte de las limitaciones. Haz todos esos. Entonces quiero que grabes un video tuyo haciendo esta cosa yendo así en una de tus páginas para que podamos ver que hiciste que funcionara. Si no puedes grabar videos porque es demasiado duro y no puedes hacer que suceda, aceptaré capturas de pantalla, confiaré en ti que funciona. A lo mejor tomar una captura de pantalla de esto. Además, podemos ver todas las cosas que pasan por aquí y estamos como, puedo ver las restricciones y parecen que me encanta ver videos aunque si no estás seguro de cómo tomar un video en tu computadora. La mayoría de las Mac y PC tienen software incorporado, Mac lo llama captura de imágenes Se puede hacer con eso. Yo uso Camtasia Puedes usar QuickTime, que es gratuito tanto en Mac como en PC. Hay plugins dentro de Figma, que son interesantes. Puedes ir a los plugins. El que he usado antes es registro vmeovMovmo te permitirá iniciar sesión y tienes que obtener una cuenta gratis con ellos, pero podrás grabar tu pantalla También habrá otros enchufes. Cuando lo estás subiendo, queremos el enlace al video, no el video real en sí No podemos tomar el gran gigante MP fours, subirlo a Vimeo, Bee Hunts, o YouTube con cuentas gratuitas, y simplemente enviar el Enlace Todo bien. El verdadero objetivo aquí no es tanto hacer videos, es poner en marcha este Lower Nav receptivo. Quiero que practiques con eso y te veré en el siguiente video. 24. Proyecto de clase 5: restricciones de las tarjetas de eventos: Otro proyecto de clase. ¿No acabamos de hacer un proyecto de clase? Nosotros lo hicimos. Este es como un camino de recogida. Hazlo tú mismo. Voy a conseguir que construyas una tarjeta de evento responsive. Eso hace esto por tu cuenta. Quiero que crees esta cosa, todo receptivo y bueno. Entonces las fechas se quedaron en la esquina, poco de texto e imagen. Oh. Sólo voy a dejarte con ello. Encuentra estos pequeños proyectos son algunos de los mejores para que la gente aprenda donde tienes todas las herramientas. Te he enseñado todo lo que necesitas saber, pero en realidad hacer algo propio, eso no es seguir adelante puede ser complicado y una especie de cama todas las habilidades en oh, bien. Porque hay un par de formas de abordar esto. Porque hay y puede ser complicado, dependiendo de tu nivel de habilidades de Figma, hay un video justo después de esto de mí construyéndolo Entonces, si te pierdes, puedes ir al persecución y verme construirlo. Hazlo tú mismo, sin embargo, y luego mira a dónde llegaste. Es un reto. Te reto. A ver si puedes hacerlo. Tu manera podría ser diferente a la mía. Podrías perderte. Eso es totalmente genial. Te apuesto, aunque, eres tonelada lunar. Cuando hayas terminado, comparte un video de tu capacidad de respuesta. ¿Bien? Este sitio de la mano derecha aquí porque quiero que el texto se expanda y se contraiga, bien, haciendo que la caja sea más grande. No tiene que ser exactamente así , elige tu propia imagen. De nuevo, estoy tratando de encontrar fotos mías. La Edad Media es probablemente demasiado mayor para mí, pero tampoco soy este tipo. No me importa el texto y todo. Es más de la estructura. Una imagen ahí dentro, un cuadro de fecha se pega en la parte superior derecha. A lo mejor eso son limitaciones. Detalles del evento. Asegúrate de que sea componente luego los entregables, un video que no puedes hacer los videos. Una captura de pantalla. Este es uno genial donde puedes compartir en redes sociales, asegúrate de usar el hashtag Figma Advanced y etiquetarme en él, para que pueda comprobarlo Eso es. Diviértete haciendo tu propia tarjeta de evento. Ver en el siguiente video. 25. Proyecto de clase 5: finalizado: Hola. Este video es mi versión de cómo hice que esta cosa funcionara. Puedes seguir a lo largo para ver qué tan cerca estaba el tuyo del mío. Realmente no importa cómo llegaste al resultado final. Pero si te quedaste atascado, aún estás atascado actualmente, puedes vigilarme. Sí nos perdemos un poco en este video. Hay algunos atajos pequeños. Entonces, aunque lo conseguiste y fue bastante fácil, hojea este, tal vez sube la velocidad y aquí hay pepitas Eso es lo que estoy diciendo. Bien, entonces no hay una regla real de por dónde empezar, y hay un par de formas diferentes de hacerlo. Voy a mostrar la forma en que lo hice. Cuando lo hago con alumnos en clase, gente encuentra otras formas de hacerlo. Así que no te preocupes si el tuyo es un poco diferente. Voy a comenzar con mi fotograma superior aquí, la imagen con la fecha en él, y voy a trabajar en el texto más adelante. Entonces voy a darle un relleno solo para que podamos ver lo que estamos haciendo. Elige cualquier color siempre y cuando sea verde o aguamarina. Entonces lo que quiero hacer es poner otro marco dentro de esto, escoger otro color. Algo claro y voy a decir que entras ahí y dentro de este marco, quiero decir solo necesitas estar constreñido a la parte superior y a la derecha. Ahora, ojalá, ya tenemos ese trozo en marcha. Esa es la primera parte, esta parte inferior, ¿cómo hacemos eso? Ahora bien, en realidad no quieres ponerlo aquí, quieres que esté en una caja separada porque necesita hacer algo diferente. Voy a hacer una nueva caja. Voy a decir que este es un color oscuro sin motivo alguno. Voy a poner algo de texto dentro de él, tirar los elementos adentro. Muy bien, solo estoy lanzando un mensaje de texto. Hay un par de cosas que tengo que hacer es que necesito esto tal vez del tamaño correcto. Ese es el primer buen paso. Quiero que este texto se rompa dentro de aquí. Quiero decir que no eres este tipo de auto ancho o tamaño fijo, quiero este medio uno auto alto, y luego lo voy a romper así que vas ahí. Perfecto. Pero cuando cambio el tamaño de esto, no pasa nada porque este tipo necesita ser autolout Bien, entonces voy a decir Shift A. Está envuelto por todo el exterior. Perfecto. Ahora tenemos un poco de texto receptivo en curso. No está funcionando. El texto que aquí ahora es la altura automática, pero necesitamos que el ancho cambie en función de su padre o del contenedor. Echemos un vistazo al ancho. un ancho fijo. No quiero enfocar el ancho. Quiero decir, me gustaría que llene el contenedor, por favor. Ahora bien, si el contenedor cambia, trata de llenarlo. Vamos. Entonces, ¿qué son estos dos bits, y podrías dejarlos separados, pero eso sería raro. Así que lo que queremos hacer ahora es poner ambos juntos dentro de su propio marco. Ambos seleccionados, voy a decir, enmarcar a esos tipos. Bien. Vamos a darle un nombre para que no nos estemos perdiendo demasiado. Bueno, en realidad, veamos qué tan bueno va el auto naming. Así que vamos. Vamos a renombrar. Ahí está ahí, renombrar capas. Sólo mira lo que hace. Se pone cada vez mejor. Te apuesto contenedor. Pie de página. Oh, se ha hecho bien. Contenedor. Llamemos a esto una imagen. Se piensa que esa era la imagen, pero no lo es. Esta es la fecha. Se acercó. Es un buen entrante de todos modos. Oh, sí me gusta. Tengo un contenedor dentro de él. Conseguí esas dos cajas que hice. Echemos un vistazo y sigamos probando cada vez. Agarra al padre, ¿funciona todo? No lo hace. ¿Por qué? Es Porque no es Auto out. Este contenedor, Audio out, por favor. Vamos a darle una opción. Veamos qué hizo. Lo estamos construyendo nosotros mismos. No estamos usando la función de IA make it all for us. Está funcionando. Excepto que el fondo no sube y baja. Lo que quiero hacer es probablemente querer dejar esta caja de imagen aquí sola. Yo sólo quiero el cuadro de texto abajo. Bajen. Lo que voy a hacer es que ¿necesitas hacer qué? Es necesario llenar el contenedor. Entonces, esta vez es la altura, el ancho que hicimos, pero no tomamos prestada sobre la altura Ahora, no queremos que te abrace, no hay abrazos aquí, amigo. Vamos a llenar contenedor y quiero que lo llenes, pero quiero que te quedes en la parte superior, por favor. Mira el padre. ¿Qué estamos haciendo aquí? Funcionó. Oh, vamos a poner algunos detalles más y sólo a ver si lo rompemos. ¿Bien? Pero eso es algo así como los fundamentos. Lo que la gente tiende a hacer, y yo lo hago. No hay una manera real, como, dura de hacerlo es que comienzas con el padre, luego empiezas a trabajar con esos bloques intermedios y luego pones otro bloque aquí para la fecha. Puedes hacerlo de esa manera. Es un poco más complicado cuando eres nuevo. Si lo abordas de esa manera y te pareció realmente frustrante, intenta hacer primero las piezas individuales , luego combínalas. Pero realmente no importa si intentas construir primero el marco del contenedor y primero el marco del contenedor luego comienzas a construir cosas en su interior. Es un poco más engorro. Bien, quiero que esto sea una imagen. Así que no puedo simplemente meter una imagen aquí porque eso es exagerado Entonces voy a ir Comando Mayús K para traer en mi imagen, Control Shift C PC. Ya sabes, yo sé que sabes. Voy a traer esto . Lo que quiero hacer es que quiero agarrar el En realidad podría haber seleccionado el marco y traerlo como relleno. Lo he hecho de una manera diferente. Entonces lo que voy a hacer es agarrar esto, robar el relleno de esto, copiar, agarrar el verde , pegar pegar. Ya no necesito este verde. Y ojalá, ¿recuerdas prueba prueba prueba, siempre probándola funcionando? Está funcionando. Fresco. Bonito. A continuación se encuentra este texto abajo aquí. Sólo voy a reemplazar esto con Command K. voy a decir reescribir esto y voy a escribir algo con un ritmo de canción más cantar Sé lo que es eso. Vamos cuatro. Todo bien. No estoy seguro de lo que va a hacer esto. Comando Enter para hacer que las cosas de IA lo hagan. A veces ahora necesitas ir a hacer más corto. Necesito hacer cambios. Creo que ya es suficiente. Vamos a hacer más cortos porque voy a usar una fuente más pequeña. Si no tienes la IA, y deseas tener la IA, puedes simplemente salir al Chachi BTK gratis o simplemente escribir lo que quieras Bien, tamaño de fuente, voy a ir a 16. Ya puedes irte. No lo sé. Si voy a encontrarme con problemas, tal vez lo haga. Una cosa que pasó ahí es te diste cuenta de que no había relleno. Entonces sí hice esto más grande y esto no se expandió. Todavía funciona. Mira, todo es escalable, pero sí, no lo empujó al fondo. ¿Quién sabe por qué? Un par de cosas. En primer lugar, quiero que este chico sea auto de altura. Y también su padre el marco padre está funcionando, el relleno es realmente pequeño. Voy a decir, por aquí en el acolchado, 24 es genial en los costados. Quiero que la parte superior e inferior sean diferentes. Te voy a dar un pequeño atajo para cualquiera que haya salido tanto tiempo. Entonces en la parte superior, digamos que quiero que sean 24. Pero entonces puedes poner un poco de Cameron, Cameron el teclado. Esa es la cima. Si pones un Cameron, podrás hacer el fondo a 32. Ese 100% tipo de trabajo. Tengo 24 en la parte superior, 32. Bien, pero mi texto aquí no está haciendo lo que debería, la altura de este tipo. La altura de este tipo. Usted es llenar. Llenar el par y el contenedor. Mi par y contenedores no lo suficientemente grandes para el texto. Vamos, Dan. Entonces ese truco sí funcionó. ¿Puedes ver? Tengo 32 en la parte inferior, 24 en la parte superior. Se puede hacer lo mismo para izquierda y derecha. Solo puedes agregar comas Simplemente te ahorra de no hacer mucho es abrirlo. Solo puedes usar comas. Eres un hacker informático. Eres bienvenido. Bien, otras cosas me van a causar problemas es que quiero que esta altura sea algo así como escribo dos, vaya así. ¿Lo está haciendo? No lo es. Y eso es sólo porque la sigo arrastrando para demostrar que funciona Quiero que este heredero se rompa hasta el fondo. Entonces, en cuanto a la altura, hay un par de cosas que hacer. Verás, dice, llenar contenedor, entonces debería estar haciéndolo. Pero este padre, donde voy haga click off, haga clic en c. Este padre es una altura fija. Tiene una estatura de 330. Él está obligando a que esto sea más grande. Entonces puedo decir, en realidad, solo quiero abrazar los contenidos. En realidad, tienes una altura ahora de quiero que abrazes el contenido, también. Puede ser un poco raro sentar estas cosas arriba. Entonces ahora lo que estoy buscando es esto. Cuando tecleo cosas, tipo cosas, y se alarga, se hace más grande. Impresionante. Si salgo y agarro al padre ahora y va a un documento más grande, solo puedo arrastrarlo. Mírenme. ¿Qué tan lejos de los bordes? Lo que podría hacer es encender mi guía. Vayamos con el padre de familia. Bajemos aquí, guías de maquetación. Lo hicimos en esencial s cours, vamos a tirarlo aquí de nuevo. Agregar guía de diseño. No quiero cuadrículas. Quiero columnas. Voy a dar click sobre esto y ¿cuántas columnas quiero? Yo sólo quiero uno, pero quiero que los márgenes en los bordes sean 16, 24. Puedes ver los bordes aquí. Podrías usarlo para esto solo para que todo empiece a alinearse. Usted Snap. Bonito. El atajo para las guías es Shift G, las enciende y apaga. ¿Bien? Y lo hicimos. Necesita esquinas redondeadas. Padre, vas a decir o eras esquinas redondeadas. Esquinas redondeadas. ¿Ocho? No, ¿16? Algo así. Oh, no funcionó. ¿Por qué no tienes un radio de 16 esquinas? Por favor, sostenga. Puedo resolver esto. ¿Cuál es tu radio? Oh, creo que sé lo que es. Volvamos a entrar, así puedo demostrarte que lo he hecho. Vayamos al contenido del clip. Oh, hubo una buena. No sé cómo no terminó con el contenido del clip. Ahí vas. Bien, así que vamos al 16. Es demasiado grande. Voy 12. A pesar de que dije usar múltiplos de ocho, puedes hacer lo que quieras. Este es el diseño diez. Bien, así que fue un poco interesante y agradable. El contenido del clip estaba apagado, así que todo está colgando afuera, mientras que ahora quiero decir todo dentro de ese componente principal. Oh, no es un componente principal. Vas a venir aquí. Te voy a convertir en componente principal, que no puedo recordar cuál es el atajo en estos momentos. Oh, ¿qué eres? Oh, eso es correcto. Opción de comando K. Eso es control, viejo K en una PC. A veces todos olvidamos. Entonces ese es mi componente principal, y voy a usar eso. Y este tipo necesita ir cortado, tienes que ir a la página de mi componente. Puedes pasar el rato por aquí. Bien, puedes ir ahí, puedes ir allí. Oop. Nosotros lo hicimos. Ah, es muy emocionante. Ya puedes irte. Bien, estoy muy contento conmigo mismo. Podrías haber hecho de una manera completamente diferente. Puede que hayas pasado medio día trabajando en el tuyo, pero ya lo entiendes un poco Supongo que me gustan estos pequeños ejercicios. Son como algo. Oh, no hiciste la cita. ¿Deberíamos hacer la fecha? En realidad, no hay nada hasta la fecha. Simplemente arroja el texto . Uno, dos, tres. Bien, así que solo escribe algún texto. Voy a tirarlo aquí, y tú no fuiste en el lugar correcto. Llegar ahí. Y voy a seleccionar Marzo e ir Comando B o Control B para que sea audaz. Nosotros. El texto sigue funcionando. Gancho ok. No funciona. No está en la correcta. Entonces estás colgando fuera de todo esto. Ah, ¿por qué no pude hacer eso? Es porque estoy tratando de agregar texto también, ¿qué es? ¿Pausa? ¿Piensas? Es una instancia del componente principal, no del mismo real. Ese es un buen consejo es que en realidad no se puede agregar cosas a las instancias. Tienes que ir por aquí y decir, pegarlo ahí. Ahora bien, debería aparecer en todos ellos. Correcto. El teléfono móvil y el texto están ahí. El único problema ahora es que hice eso es rosa, y este de aquí es verde. Lo que puedo hacer por eso, pude hacer esto en la instancia, cambiar las esquinas redondeadas y hacerla verde. Lo que puedes hacer es seleccionar toda la instancia, hacer clic derecho en ella y decir, en realidad todo lo que he cambiado, puedes ir al componente principal e introducir estos cambios en él, y vamos a ver en nuestro componente. Lo hizo. Mírennos. ¿Por qué no podemos simplemente agarrarlo todo e ir a esta opción que vimos antes? ¿Te acuerdas de la versión de IA donde dijimos ir, A vamos a ir a más opciones de A Vamos a sugerirlo, y no funcionó. Por eso. A veces puede funcionar, y cuando no necesita conocer las habilidades de andar penalmente y hacerlo Pero sí me gusta la solución del problema de hacer algo como esto Siento que he hecho algo en el mundo. Aunque lo sea, solo unos pocos píxeles ajustables. Bien, eso es todo. Así es como lo hice. Me interesaría saber los comentarios, cómo lo hiciste. ¿Algo fue completamente diferente? ¿Todo el mundo lo hizo diferente a mí? Eso es lo que me gustaría ver. También, dame un tiempo. ¿ Cuánto tiempo te tomó? ¿Te tomó 10 minutos? 5 minutos. 5 horas. Echemos un vistazo. ¿Está bien? Sólo me interesa. Lo veré cuando esté. Voy a estar durmiendo. 26. Cómo hacer una variante simple en Figma: Hola a todos. Vamos a hacer una variante realmente sencilla. ¿Bien? Podrías haber hecho uno antes. Iba a repasarlo solo para que todos tengan una buena línea de base. ¿Bien? Significa, antes que nada, si no te has topado con una variante o ha pasado mucho tiempo desde que hiciste las puntuaciones esenciales, este botón de aquí, bien, por aquí, puedes decir, en realidad, quiero ser sandía Lo que es realmente genial de esto es en, digamos, mi panel de Activos, bien , mira, solo tengo un botón. Pero en ese botón, bien, tiene dos variantes. ¿Bien? Mantenlo agradable y ordenado, y nos va a dar las habilidades para construir variantes multidimensionales en la siguiente. Muy grave. Bien, vamos a volcar. Hagamos una variante. Todo bien. Entonces voy a empezar con un botón que he hecho. Voy a hacer este botón al final del video si te interesa, pero cualquier botón antiguo. No hay nada más que un marco pero algo de texto en él. Es un auto out. Nada de eso es realmente importante para una variante. Todo lo que tenemos que hacer ahora es asegurarnos que sea un componente. Hagámoslo. Comando, Opción K Automac, Comando K en una PC, lo estás obteniendo. O puedes hacer clic en el botón aquí arriba. Bosh. Bien. Lo que vamos a hacer es que vamos a decir, en realidad, me gustaría otra variante de la misma. Mira esta pequeña opción aquí dice que quiero dos de ellos. Tengo una variante. Son dos similares, así que técnicamente es una variantes, pero cambiemos el color de esta inferior. Voy a hacer clic en el marco padre. Voy a decir, desplácese hacia abajo, llene el color. Voy a escoger ese color de sandía que estamos usando. Ahora variante. Tenemos que ir y nombrarlo, pero eso es todo. Vamos a echar un vistazo. Deberíamos estar haciendo esto, voy a cortarlo. Voy a ir a mi página de componentes. Deberías estar aquí, amigo. Hagamos todo bien. Esto se llama Conjunto de componentes. Ver la línea punteada alrededor del exterior. Figman llama a un conjunto de componentes. No te preocupes por ello, pero va a aparecer . Hay un componente. Poner ahí más de uno de ellos, que son sus variantes en algo llamado conjunto de componentes. Un montón de términos. Eso está bien. Vayamos a nuestro móvil Hi Fi. Vamos a nuestro panel de Activos. Atajo que comenzaremos a usar a partir de ahora, es si mantienes presionada la opción keMackOPC y uno de cada dos, uno en dos, uno de cada dos es fácil de obtener de archivo a activos. ¿Qué es? Opción uno y dos, uno y dos o Alt el panel Activos, echemos un vistazo a los archivos de esta biblioteca. Vamos a los que están en nuestro panel de componentes. Excelente. Aquí está nuestro botón. Arrástralo hacia afuera. Lo malo de él es que tiene una variante por aquí ¿Por defecto? No, no el otro. Oh. Fresco. Las variantes son increíbles. Sin embargo, lo que debemos hacer ahora es volver a nuestra opción o Alt uno, volver a nuestras capas. Expedientes. Voy a ir a mis componentes, y voy a decir. Hagamos algunos nombres. Seleccionemos el conjunto. ¿Cómo se llama? ¿Recuerdas qué significan las líneas punteadas? Juego de componentes. Ya lo tienes. Con los seleccionados aquí arriba, tengo un montón de propiedades a las que puedo renombrar. Es solo darles cosas por defecto. Haga clic en esta pequeña configuración como una propiedad Editar. Eso es lo que es. Da click en eso y vamos a nombrarlo, este se le va a llamar. Yo botón. un par de valores. Bien, vuelve ahí. Tengo un par de valores. En realidad, el nombre de esto no es botón, es color. ¿Bien? Entonces estamos nombrando nuestra variante, no el nombre del botón real. Ya lo hicimos. Quiero llamar a esta variante, diferentes variantes de color. Oh, sigue saltando de esa. Donde dice default, quiero que uno sea, digamos, verde, y el otro sea melón Ater. El nada realmente cambia excepto cuando estoy de vuelta en mi móvil Hi Fi, hago clic en esto. Tiene un poco de sentido. Mira, tengo color. Bien. Y tengo verde o sandía. Esto hace que sea más fácil para alguien más que lo use y para usted. Vamos, pongamos cosas. Señor Sin Título 57 o en este caso, marco 57. A Dan le gusta arrojar sombra a la gente, a pesar de que tiene cosas muy mal nombradas cuando trabaja por su cuenta. No me digas una. Bien, así es como construir unas variantes realmente simples de Figma. Vamos a crear el botón ahora si te interesa. Si sabes cómo hacer un botón, que probablemente hagas, pasa al siguiente video, pero lo voy a construir juntos. Vamos a pasar el rato. Bien, vamos a hacer eso de nuevo. Vamos a hacer el botón, pero lo acabo de grabar con el micrófono apagado. Hagámoslo otra vez. A mí me encanta hacerlo dos veces. Bien, vamos a la herramienta de marco, dibuje cualquier tamaño antiguo Vamos a darle un color del botón que queremos usar. Voy a usar eso. Deberíamos empezar a hacer algo de estilo de color pronto. Un par de verdes pasando, Dan. Voy a agarrar la herramienta F. No, voy a agarrar la herramienta Type, que es la Tiki. Haga clic en el interior en cualquier lugar y simplemente escriba el botón. Estoy usando mayúsculas, y estoy usando un roboto condensado Un tamaño de botón muy común es 16. Se ve fácilmente. Está bien, ahora debería alinearlo en el medio. Golpeé escape para salir de la herramienta tipo. Debería alinearlo en el medio, pero lo que puedo hacer es simplemente hacer clic en el marco padre. Entonces tengo este marco aquí, que voy a llamar botón de botones. Bien. Con él seleccionado, el padre con un texto dentro de él, si solo voy a Shift A, me convertiré en Auto lout y por defecto, puedes ver que se va a abrazar alrededor del texto, que es perfecto Abrazar es perfecto, porque significa que llegamos a escribir más y ves que el botón se expande, tan impresionante Sin embargo, la única cosa es que por defecto algún relleno aleatorio basado en el tamaño original En cuanto al relleno que quiero hacer comienza con el ancho, 24, voy a tabular a ancho y golpeo ocho para la parte superior e inferior. Él es mi botoncito aquí abajo para el radio de la esquina. Puedo usar mi flecha hacia arriba, mira sube, Si quieres ser perfectamente redondo, solo tienes que estar arriba. Siempre que los radios empiecen a desaparecer, déjame acercarlo aquí abajo. ¿Entiendes a lo que me refiero? Entiendes lo que quiero decir, yo hice esos 16, estarías como, es redondo. Pero si hice ese 100, es masivamente redondo y tiene que ser el círculo perfecto Entonces solo pon algún número gigante y se redondeará en los extremos. Lo hice por si acaso te interesaba. Todo bien. Te veré en el siguiente video. 27. Cómo hacer una variante multidimensional en Figma: Hola. Oye, vamos a aprender en este video Variante Multi Dimensional. ¿Bien? Son elegantes, sobre todo porque lo hacen con esa voz, pero nos permiten llevar variantes al siguiente nivel, o las voces. Significa que este botón no solo tiene una variante, como el color, tenemos variantes multidimensionales. Esa es una palabra elegante. Por eso lo llaman, pero solo significa que tengo dos cosas distintas. Puedo ir, quiero ser verde, pero también quiero que se delinee. Esta cosa de aquí, ¿de acuerdo? Es un pequeño activo encantador. Ahí lo ves, el botón Zoom. Lo sacas, pero tiene todo tipo de cosas. Tiene ambos colores diferentes y tiene valores diferentes. Tener más de una propiedad solo significa que es multidimensional, no tan elegante como suena. Solo ve y construye uno. Todo bien. Tiempo de ir. Todo bien. Entonces lo que vamos a hacer es que vamos a comenzar con la variante simple que hicimos en el último video y construir sobre ella para que sea multidimensional. Todo lo que tenemos que hacer es, ¿adivina qué? Ahora es multidimensional. Tenemos una tercera opción. Entonces esas son en realidad solo tres variantes. Lo que queremos hacer es cambiemos un poco este. Entonces lo que voy a hacer es que voy al modo rápido y solo voy a hacerlo bosquejar. Bien, voy a hacer otra. Para volver a hacer otro, puedes presionar este pequeño botón más. Aquí arriba hay una opción. No, hay uno de ellos. No, estoy seguro que también hay un botón ahí arriba. Entonces o pulsa ese botón o Control D. no creo que puedas copiarlos y pegarlos. No, por alguna razón, no puedes copiarlos y pegarlos. Aquí vamos. Vamos, D. También voy a cambiar este color . Tú esperas ahí. Bien, así que tengo estos. Podría simplemente dejarlos así, y cuando los estoy usando, puedo sacarlos e irme, A, tengo todas estas opciones diferentes. Pero lo que voy a hacer es hacerlo multidimensional. Lo que eso significa es que voy a agarrar mi conjunto de componentes y voy a decir, tengo una propiedad. Quiero añadir otra. Voy a añadir otra variante. A éste se le va a llamar llenar. Solo estaba tratando de pensar ahí cómo se podría llamar y el valor predeterminado va a ser sólido. A lo que estamos tratando de llegar aquí es cuando selecciono en esto, voy a decir que tu amigo mío, eres a la vez verde y sólido. Eres sandía y sólida. Vas a ser verde, pero también agrega uno nuevo, vas a ser contorno. Esa es a la vez esa primera propiedad que hicimos, y esta es la extra dimensional. Multi dimensional. Pero hay que decir ahí que es multidimensional. Tenemos color, estamos llenos, somos hardcore. Este de aquí, ¿qué eres? Eres color cuatro. No, eres sandía y vas a ser bosquejo. Lo que eso significa ahora es que cuando agarro este bonito botón simple, recuerde en el panel Activos, opcional Alt, dos, uno, dos, cambie el panel Activos. Este precioso botoncito de aquí. Para sacarlo, es multidimensional. Tiene color y tiene relleno. Te voy a decir sandía. Pero quiero el esquema uno. Vamos. Tenía miedo de hacer variantes multidimensionales durante mucho tiempo. Sonaba aterrador. Multi dimensional, cualquier cosa suena duro. ¿Bien? Pero es complicado. Estoy tratando de ser calme, dártelo. Es muy fácil. Pero cuando lo haces por primera vez, estás como, Esto no tiene sentido. ¿Bien? Lo que tiendo a hacer es algo así como atravesarlo hasta que tengas al menos cuatro de estos. Entonces olvídate de intentar hacer cosas elegantes y solo ven aquí y solo asegúrate de que primero haya dos propiedades, y luego trabaja a través de cada botón y ve, Bien, quiero que revises esta lista Y si no hay algo que quieras aquí, simplemente haz clic en ADN Bien, lo mismo aquí abajo, estás como, Bien, no necesito ser verde. Hay un tercer color, así que voy a añadir un tercer color. O es el color correcto, pero no hay nada aquí abajo, así que necesito agregar una propiedad. Si no hay, si tienes la propiedad correcta, y estás como, Todo lo necesito para que se agregue una nueva de estas. Esa es generalmente la forma más fácil. Quiero que termines ahí, te vayas de ahí, te sientas seguro. Ahora te voy a dar una forma más avanzada porque estamos en el curso avanzado. Hay otra manera de hacerlo. Podría ser más fácil para ti. Estás como, hombre, eso me voló el cerebro. O puede ser como, me encanta hacerlo de dos maneras. ¿Por qué aprender a hacerlo? Lo he hecho aquí es que acabo de hacer un círculo con un plus en él. Si haces alguno de los botones más y menos, muchas veces es mejor en lugar de tratar de encontrar un símbolo es encontrar una fuente que te gustaría el plusin A menudo uso este de aquí llamado días uno, pero puedes ver que puedo pasar y encontrar un plus que me guste. Puede que te guste eso más mejor que ese plus. Lo que puedes hacer entonces es clic derecho en él e ir al esquema. ¿O lo es? Trazo de contorno. Entonces es como un cuadrado. No puedes cambiar la fuente, así que probablemente necesites hacer esto primero e irte, ¿yo necesito yo? Y luego esbozarlo. ¿O quién recuerda a la familia dulce atajo? Si hacemos un guión y luego un mayor que, obtenemos una flecha. Estas flechas no muy buenas. Alguien más tiene una flecha mejor. Todos tenemos diferentes estilos. Vamos a por esa otra manera. ¿Ves? G trabajar a través y ver quién hace una mejor flecha. Solo usando fuentes. Por supuesto, puedes ir a algún tipo de biblioteca de iconos en alguna parte, eso va a funcionar. Los pegó en el medio. Bien, eso fue un poco tangente. Entonces, la razón por la que quiero mostrarles esto es que los voy a poner ahí abajo porque los usaré más tarde es que tengo estos dos, ¿de acuerdo? Entonces creamos una variante. Pero lo que podemos hacer es en lugar de hacer lo que hicimos, donde construimos una primera variante, luego hicimos duplicados y luego tipo de dividirlos todos Lo que podemos hacer es que podemos decir, Bien, quiero estos dos Y tú solo las construyes todas primero. Entonces quiero que estos dos sean cuentagotas. Entonces tengo todos estos primero. Todos estos necesitan ser sus propios componentes. Uno de los grandes problemas es que no los he agrupado, ¿de acuerdo? Entonces si hago múltiples componentes aquí, te voy a mostrar esto porque tú lo harás. Te vas, bien, voy a hacer ¿qué vamos a hacer? Vamos a hacer múltiples componentes. Bien. Ahora tenemos uno, dos, tres, cuatro, cinco, seis, siete, ocho componentes. Vamos a deshacer eso. Lo que voy a hacer es agrupar estos primero, grupo, grupo, grupo, grupo. En realidad, voy a mostrarte una manera. Conseguir demasiado distraído. Ahora puedo crear múltiples componentes. La otra forma es que solo los haces uno a la vez. Pero tenemos uno, dos, tres, cuatro. Yo tengo todos estos. Voy a seleccionarlos todos, y voy a decir combinadores variantes ¿Por qué no lo hacemos así, Dan? Oh. Eso en realidad es probablemente más fácil, ¿no? Sí, todavía se pone desordenado. Entonces estamos en este punto. No fue difícil diseñar esto. No es difícil llegar a este punto. La siguiente parte fue lo que queremos es que necesitamos un par de propiedades. Yo tengo uno. Vamos a hacer doble clic en la propiedad uno, y vamos a llamar a este color. Color. Voy a agregar otra propiedad. Va a ser una variante, y voy a llamar a ésta. ¿Cómo se llama más o negativo? A veces mi cerebro no funciona. Tú solo esperabas valor. Puedo crear su propiedad. Si no estás seguro de qué es, el valor es algo Es una buena captura genérica para todos. Ahora vamos a dar click sobre esto. Eres un color del grupo uno. No, vamos a llamarlo, renombrarlo. Llamémosle a éste. Verde, es verdoso, y es un valor de, vamos a llamar a éste por defecto vamos a llamar a éste más o positivo No sé si debemos usar el símbolo más o escribir la palabra positivo. No estoy seguro de lo que es más fácil. Este de aquí sin embargo es de qué color. Va a ser verde, verde. Va a tener un valor de no tenemos menos, vamos a agregar uno nuevo, y vamos a decir, eres menos, amigo mío. Solo trabaja tu camino a través. Este de aquí, color del grupo dos. Ese no es un nombre realmente bueno. Vamos a llamarlo Sandía. Y un valor de A, tenemos un positivo. Ahora bien, este de aquí debería ser fácil porque tenemos sandía y tenemos un valor de negativo. Todo bien. Lo mismo. Ten una cosita, practica con los dos, y solo ve cuál te gusta la opción. ¿Cuál crees que es mejor? Obtener el panel de Activos, lo genial de nuevo, probablemente necesite un nombre mejor. ¿Puedo hacerlo por aquí? No, no puedo hacerlo por aquí. Debes ser capaz de hacerlo. De todas formas, vayamos a Opción o Alt uno de vuelta a nuestros archivos. Vamos a los componentes. Tienes un nombre terrible llamado Componente uno. O puedes nombrarlo por aquí, bien, o puedes nombrarlo por aquí. ¿Qué es esto? Esto suena va a ser, pero no puedo pensar en cómo llamarlo. No se puede llamar a un valor. Por favor, sostenga. No se me ocurre una palabra. Lo estoy llamando Zoom. En Oti. De todas formas, así que hay un poco de nombre para ello. Volvamos a nuestro móvil de alta fidelidad. Vamos a Opción o Alt dos para ir a nuestro panel de Activos. Arrastra mi botón Zoom, ¿de acuerdo? Y vamos a decir multidimensional. Mírennos. Bien. Entonces la versión grande es, no importa cómo llegues ahí, pero solo necesitas un conjunto de componentes. Entonces trabajas tu camino por aquí, agregando diferentes valores, agregando diferentes variantes, diferentes propiedades, y luego dentro de ahí, dándoles mejores nombres a medida que avanzas. No importa si te gusta aquí, empieza con ellos ya hechos y trabajalos de esa manera, o empieza con uno y simplemente sigue duplicándolos y sumando los valores De cualquier manera, termino haciéndolo de esta manera, por alguna razón. No sé por qué, pero puede que te guste de esta manera. Bien, eso es componentes multidimensionales. Sentirse bien, sentirse avanzado. Esto es algo avanzado. Ahora lo genial de esto es que encontrarás bibliotecas de otras personas que las tendrán y sabrás lo que significan las líneas punteadas. No recordarás cómo se llaman, pero ya sabes lo que hacen. Serás como, Oh, puedo agarrar uno de estos e irme, Bien, tiene múltiples dimensiones Bonito. Tiene muchas variables diferentes. Fancy. Todo bien. Eso es. Pasemos al siguiente video. 28. Proyecto de clase 6: Variante multidimensional: Es el proyecto número seis veces. ¿Bien? Las variantes multidimensionales de esta. Entonces básicamente justo lo que hicimos en el último video, excepto que quiero que tus dos propiedades diferentes sean tamaño y color, toma una captura de pantalla tanto del conjunto de componentes. Esto es una cosa de línea punteada, y quiero ver esto por aquí también, sus propiedades para verlas todas nombradas muy bien. Voy a estar comprobando y subiré eso a las asignaciones. No hace falta que compartas esto en redes sociales porque es un poco aburrido. Muy útil, pero no muy estimulante visualmente. Una cosa que quiero mostrarte, sin embargo, es, bueno, quiero que te asegures de que hace esto. Puedo decir, Bien quiero escoger verde, pero necesito este pequeño Al igual que hicimos con el esquema, pero estamos haciendo tamaño. Una cosa que sí quería mencionar es antes de que te vayas es este componentes aquí, a veces podrías, digamos que los agarro a todos porque quiero otras variantes. Quiero tres de ellos. Realmente no quiero que hagas eso. Pero digamos que lo hiciste porque estás loco. Querrías las tallas, los colores, pero también si está relleno o delineado. Voy a ir a Comando, a buscar un montón de ellos y tú te vas, pero se siente mejor si están por aquí. Terminan saliendo de ella. Es realmente malo. Lo que puedes hacer esta línea, esto es lo que quiero mostrarte. Es esta línea punteada aquí en realidad no es automática. Sólo tienes que arrastrarlo por ahí. Se puede decir, bien, estos tipos se sienten mejor por aquí. Ustedes pueden ir ahí. No estás destinado a ser sí puedes hacer una tercera propiedad, lo cual no quiero que hagas con esquema. Quiero que hagas esta. Este pequeño de aquí con los dos colores y los dos tamaños. Yo solo quería que supieras que puedes ajustar las tallas. Ve a hacer clic en el marco y luego moverlo. Bien. Antes de que lo rompa, B, atrás, atrás, atrás , atrás, puedes seguir con el tuyo mientras estoy deshaciendo. Bien, disfruta haciendo tu Variante Multi Dimensional. Pueden ser complicadas. Son muy satisfactorios cuando los haces funcionar, sobre todo cuando eres capaz dárselos a tus compañeros Tú en el futuro, tienes este botón realmente fácil de usar, y evita que mis activos se vuelvan locos. ¿Bien? Acaba de tener un botón ahí dentro que hace todas estas cosas diferentes. Bien, haz tu tarea, no tarea, y te veré en el siguiente video 29. Variable: modos claro y oscuro: Uno, vamos a aprender lo que hace una variable. Puedes usarlos realmente simplemente Figma. Se pueden utilizar realmente núcleo duro. Vamos a empezar de manera agradable y sencilla. Vamos a hacer un modo luz y modo oscuro. Mira este texto aquí, arrástralo por aquí. Cambió de color. Lo sé. Estoy muy emocionada. Soy como el desarrollador promedio de Coda slash. Hago un poco de fronda en una copia y pega cosas pensando que soy un hacker informático, pero sí me encantan las soluciones poco simples como esta. Se pone aún mejor ver esto. Si agarro estos, y los arrastro hasta aquí, cambió. Pero si voy con el padre y digo, en realidad, en realidad, quiero que estés en modo oscuro. Todo cambia. El cambio de fondo. ¿Vías eso? Y el texto cambió variables. Si eres desarrollador, vas a ser como, Guau, poner los ojos en blanco. Esto no es tan asombroso. Pero si eres como yo, puedes emocionarte mucho por las variables. Vamos a emocionarnos todos. Y vamos a saltar. Algunas variables. Breves, así que hagámoslo. Lo que tengo es solo texto en una página. Eso es. No hay nada de fantasía en estos. Vamos a crear nuestra primera variable. Ahora, encontrarás que sigo diciendo variante. Variante lo que hicimos antes. Ese botón tiene dos variantes diferentes por aquí. Variables muy diferentes. ¿Dónde encuentras tus variables? Eso es. No tener nada seleccionado. Lo que encontrarás es que hay una pequeña opción. Variables. Puedes hacer click en él. No tenemos variables. Vamos a hacer clic en Crear. Qué tipo de opciones diferentes. Vamos a cubrir color por el momento. Haremos más adelante en el curso. Consíganos aquí y comencemos. Vamos a colorear. Ahora, cambia. Si tienes la versión gratuita, en realidad podrías llegar hasta aquí. Podría simplemente pedirte que lo muevas a un equipo. Hay algunas opciones gratuitas. Hay momentos en los que entra en juego la opción pagada. Ha cambiado con el tiempo, así que no puedo darte datos sólidos ahora porque podría ser diferente. Estás en el futuro. Yo estoy aquí. Puede que tengas que ver si solo tienes la versión gratuita, pero probablemente te llevarás algo muy bien con ella. Bien, entonces, ¿qué tienes? Nosotros tenemos esto. Es sólo una mesita. Estas son mis variables. Tengo uno aquí. Se llama color. Vamos a darle un mejor nombre. Voy a llamar a éste. Texto. Es mi variable de color llamada Texto, y quiero tener dos opciones, dos modos, ellos los llaman. Quiero un modo de luz, modo de luz. En modo luz, cuando todo es brillante, el texto necesita ser bastante oscuro porque simplemente lo hace. Voy a mover esto por aquí para que pueda ver que pone un poco de muestras aquí para que esto sea más fácil En modo luz, quiero un verde oscuro para el texto. Oh, has hecho una variable. No hace mucho, pero vamos a aplicarlo. Vamos a hacer clic en el encabezado, se aplica como un estilo, específicamente esa variable de color. Si voy aquí y tengo un color de campo de solo algún color aleatorio que escogí, puedo ir a mis estilos. Podrías usar los estilos. Aún no hemos creado ninguno. ¿Nosotros hacemos eso? Claro lo dejamos en algún momento. Hay algunos otros prefabricados ahí dentro. Pero ahí está esto. Debo decir variable por encima de ella. No envía mensajes de texto. puede ver que es el color. Vamos a aplicarlo. Es como un estilo. Eso es mucho trabajo solo por eso. Pero no te preocupes, se pone más emocionante. No tengamos nada seleccionado, y vamos a las variables. Tengamos otro modo haciendo clic más aquí, llamemos a este modo oscuro, modo oscuro. En modo oscuro, el texto en realidad necesita ser bastante brillante. Voy a elegir solo un color de interfaz. Me gusta usar EEE. Bien, solo tabular todos los seis huevos. Todo bien. Hemos hecho otro modo para nuestra variable. Vamos a hacer clic aquí. En realidad, vamos a agarrar a este tipo, vamos a copiarlo. Vamos a hacer clic por aquí, vamos a pegarlos y estás como, estamos en modo oscuro. Por aquí bajo relleno, no lo haces aquí. Ahí es donde sigo yendo. Estás como, voy a hacer click en eso. No hay color claro. ¿Dónde se ha ido? Todos van a aparecer bajo la apariencia. Este tipo tiene una variable aplicada de texto. Lo que puedo hacer bajo apariencia, mira esta pequeña cosa de swatchi aquí, puedo aplicar un modo variable Recuerda que hicimos dos modos. Tengo una colección llamada Modo Luz. Bueno, ya estaba en Modo Luz. Puedo ir aquí y decir, estás en modo oscuro. Oh, muy emocionante. ¿Lo es? Oh, se pone mejor. Mira esto. Eliminemos esa. Apliquemos lo mismo por aquí. Vamos, Phil, tienes un estilo de ese color de texto, que es ese verde. Si agarro ambos, los copio, los pego, los tengo seleccionados a ambos, puedo decir que eres modo oscuro, y todos cambian. Oh, se pone aún mejor. No sé por qué me gusta esto. Agreguemos otras variables. No tener nada seleccionado, ir a variables. Y hemos aplicado texto. Vamos a crear otro. No, no otra modalidad. Se puede arrastrar esto más grande. No quiero esa tercera modalidad que hice, cómo deshacerme de ella. Haga clic en él, elimírelo, elimine el modo, eso servirá. No quiero otra modalidad. Lo que quiero es otra variable aquí. Otro color uno, y este va a ser un color. Llamemos a esta interfaz o fondo, como quieras llamarlo. Voy a llamarlo interfaz solo porque es un poco más genérico. Un color de interfaz cuando estoy en modo de luz probablemente debería ser agradable y ligero porque es el fondo. El texto necesita destacarse de él. Aquí, voy a usar mi EEE. En modo oscuro, sin embargo, la interfaz necesita ser realmente oscura para que podamos ver el texto claro. Voy a decir, voy a usar ese color. Cópialos, muévalos aquí. Se puede ver en modo de luz, el texto es oscuro. La interfaz es ligera, y los opuestos están aquí. Si eres desarrollador, eres como, Esto es muy fácil. Si estás más en el lado del artista de diseño creativo, estás pirateando la matriz. Eso es lo que siento que estoy haciendo cuando estoy haciendo estas cosas. Bien. Entonces, ¿qué hemos hecho? Vamos a esto. Digamos, quiero que todo este marco padre se llene de vamos. Ahora tenemos dos opciones. Quiero ser color de interfaz. Oh, cambia. Cambia a lo que sea que sea el primero, el predeterminado. Lo bueno de esto es que puedo decir, Bien, necesito este texto aquí. Ven a través. Voy a hacer duplicados, mantener pulsada la tecla de opción, traerlos por aquí y no pasó nada realmente. Eso fue desalentador. Lo que vamos a hacer es mover esto por aquí y apagar todas las B dije que era muy específico. Dije, definitivamente vas a ser modo oscuro. Simplemente gírela a Auto. Ahora este tipo de aquí, está en Auto, que por si acaso la primera s que es modo luz Así que por aquí, es perfecto. Pero si digo, oye, todo este marco aunque no está bajo Phil, recuerda, sigo queriendo volver ahí. Vamos a la apariencia. Así que en realidad, ese marco y cualquier cosa dentro de él es ahora aquí es donde obtiene buen modo oscuro. Oh. Ahora, lo hemos hecho con el fondo y el texto. Puedes tener botones. variables, modo claro y oscuro. Todo lo que necesitas hacer es cambiar el marco padre, todo lo que hay dentro de él. No tienes que ir. Eres un nuevo estilo y lo cambias. Todo acaba de llegar para el paseo. ¿Estás emocionado? Vamos a crearlo desde el principio. Vamos. Oh, me gusta mostrarte esto. Voy a hacer una nueva versión, ¿de acuerdo? Este es siempre el emocionante . ¿Bien? Voy a decir que eres apariencia de miembro. ¿Bien? ¿Voy a ir al Modo Luz? Lo chulo de ello es porque no le he aplicado nada a éste, recuerden, éste tiene la apariencia de nada. Estaba en Auto. Pero si lo arrastro hasta aquí, mira. Ah. Sí, eso fue en intro Todo lo que teníamos que hacer era crear un par de variables realmente básicas. ¿Cómo te sientes? Eres como, hacker informático. Todo bien. Esa es una buena variable fácil. Se pueden complicar mucho. Nos pondremos un poco más complicados en la escalera del campo en adelante. Haremos uno más ahora antes de dejar tierra variable. Los cerebros se derriten demasiado demasiado temprano en el curso. Todo bien. Nos vemos en el siguiente video. En realidad, antes de irnos, solo quiero reiterar estos bits de texto, aunque no están establecidos en, digamos, modo oscuro, están dejando que el padre haga eso. Todavía tienes que aplicar la variable. Entonces, si ahora cojo un poco de texto y digo, y lo escribo aquí, ¿puedo seis? Escribí en marco. Escriba dos, escriba aquí, escribiendo. Lo que encontrarás es que esto no va a cambiar. Sigue siendo blanco. A pesar de que los padres sean de un color diferente. Necesitas al menos aplicar la variable, la podemos decir, tienes un color de relleno de color del texto. No subimos hasta aquí y dijimos que tienes una apariencia de modo luz o modo oscuro porque no importa a dónde vaya, va a ser de ese color. Lo que hacemos es simplemente dejarlo , no tocar la apariencia. Volvemos a Auto, que en realidad cuando hago clic de nuevo en él, se va, mientras que mis padres, ahí está ahí, desaparece. Lo acabo de dejar. Lo toqué aquí abajo, el texto. Tiene aplicada la variable de texto. Pero ahora todo dentro de él, porque mis padres dicen, hacen esto, o los niños vienen a dar el paseo. Eso es. Pasemos al siguiente video. 30. Proyecto de clase 7: variables de color: Mejor no pedirnos que hagamos nuestras propias variables. Yo lo voy a hacer. Básicamente exactamente lo que hicimos en el último video. Tan solo copia eso. A ver como te va. El único tipo de mezcla es quiero que agregues un logo, que es solo texto. Entonces es exactamente como copia corporal y encabezado. Solo necesitas aplicar la variante, dejarla en Auto, y debería cambiar. Entonces quiero que el texto cambie y quiero interfaz. Entonces va a tener dos modos, claro y oscuro. ¿Dónde están? Esos son estos dos modos y dos variantes. Texto e interfaz. Podrías llamarlo algo como esto, Texto solo porque lo hace un poco más fácil cuando estás viendo esto, pero es un poco más fácil de ver cuando estás aquí, puedes ver, bien, esto tiene que llenarse de texto variable. De lo contrario, estás como, ¿Qué demonios es esto? No es súper claro. Un par de cositas que no hice en el último video que quiero compartir contigo, puedes romperlo. Se puede decir, ya no lo hagas. Sólo tienes que volver al color. También se puede ver en su panel de capas. ¿Puedes ver por aquí? modo luz y modo oscuro. Esto puede ser muy útil, sobre todo si no está cambiando. Hemos averiguado que si agarro el rumbo y lo obligo a que sea una apariencia de modo oscuro. ¿Bien? Intento arrastrarlo por aquí, no cambia. A pesar de que este padre está diciendo estar en modo de luz, simplemente no hace lo que queremos. Sabemos que en realidad no se puede configurar en algo, configurarlo en Auto y seguirá el ejemplo de este padre. Va hacia atrás, va hacia adelante. Lo que es realmente útil es verlo aquí. ¿Ves si me dirijo y lo obligo a estar, digamos, en modo de luz ¿Puedes ver aquí? El padre tiene una variable aplicada. Esa es esta pequeña pastilla de aquí. Pero esta rúbrica está haciendo lo suyo. Él es como, Bueno, que se jodan chicos. Solo estoy siendo modo luz. No me importa lo que sean mamá y papá. Bien. Fresco. Así que construye Jerome, toma una captura de pantalla de la que te lo mostré ahí, solo un poco viendo a ambos dispuestos. Porque puedes mover esto. Si haces clic en nada, agarra variables, puedes arrastrar esto alrededor. ¿Bien? Hazlo más grande. Entonces solo consíguelo como sea que haya hecho el suyo, solo para que pueda verlo todo en una gran captura de pantalla, y subirlo a la sección de proyectos de clase. Bien. Que se diviertan. Buena suerte. Ojalá estés tan emocionado como yo cuando funciona y puedes arrastrarlo y hace cosas, pero es complicado. Si te estás arrancando el pelo y estás como, eso es lo que he hecho yo. Claramente, me falta mucho de aquí. Pero si lo estás encontrando realmente difícil, no te preocupes. Es muy duro. Ya sabes si no puedes hacer que funcione ahora, está bien. Vamos a volver a cubrirlo más adelante en el curso. Entraremos en algunas variables más. En realidad, vamos a hacer uno más ahora, creo, sólo para conseguir un hogar y luego lo haremos un poco más en la clase. Muy bien, feliz de hacer variables de color. 31. Cómo crear el total del carrito usando variables numéricas en Figma: Yo Hola a todos. Nosotros vamos a hacer esto. Mire, haga clic, haga clic, haga clic. Y abajo abajo abajo. Oh, sí me encanta. Se llama variable, como hemos hecho otro video. Esta es una variable numérica.- Haga clic en nuestros botones. Ellos suben, compramos boletos. Si eres como, Oh, yo puedo hacer eso, solo vincula un montón de páginas juntas. Mira, no tenemos racimos de páginas. Acabamos de conseguir a estos chiquitines. Vamos a saltar. Compremos algunos boletos techno usando variables numéricas Bien, para empezar y nada que ver con las variables numéricas, vamos a ser increíbles y vamos a Option o Alt a Cambiar activos. Vamos a agarrar nuestro botón que hicimos antes, y voy a tener uno que sea el set dos. Puedes ver lo genial que es esto ahora, y quiero usar el color sandía. Me gusta. Voy a tener este lado establecido dos plus. Es genial poder usar algunas de las cosas que hemos hecho. Voy a agarrar el F k, hacer una cajita como viste al principio. Vamos a llenarlo de blanco. Voy a poner algo de texto dentro de él. Va a ser un viejo grande, en realidad un pequeño viejo cero. Sólo lo enfermó en el medio ahí. Hagámoslo más grande. 24 para risitas, voy a decir, vamos a estar centrados. Verás dentro de un rato. Todo bien. Entonces, ¿qué vamos a hacer? Vamos a poner en marcha algunas variables. No vamos a tener nada seleccionado. Vamos a ir a variables. Vamos a pinchar aquí, y tenemos estos que hicimos antes. Lo que podemos hacer es ir y crear una variable y vamos a hacer número a continuación. Pero entonces empiezas a mezclarlos todos y estás como, nuevo es un poco confuso. Lo que me gusta es que puedas hacer clic en ese abrir si no está ya abierto y puedes decir, en realidad, quiero nombrar a esta colección. A esta de aquí se le va a llamar material de color. Bien, voy a hacer otra, crear una nueva colección, y esto va a ser cosas de números de colección. Siguen ahí. Tengo cosas porque o cosas de color, y tengo cosas de números. Voy a trabajar en cosas de números solo para mantenerlas separadas. Pueden ir juntos. Vamos a crear sobre un número uno, ¿qué vamos a hacer? En lugar de esto llamado número. Digámoslo total, así que queda un poco más claro. Y el valor, cambiemos este valor a algo más como cinco, solo para que podamos ver lo que hace. Bien, genial. Lo que vamos a hacer es simplemente mover esto aquí arriba, mover eso por ahí, para que puedan ver a los dos. Todo lo que tenemos que hacer es decir este cuadro de texto, no el exterior, sino que en realidad podría hacer el exterior Pero este de aquí, me gustaría ahora, no es un relleno y un estilo porque así es como hicimos los últimos. Los números son diferentes. Voy a entrar aquí números, y lo que hacemos es que el camino está arriba aquí arriba. Mira este pequeño icono aquí. Ese es el icono de la variable. Lo ves de vez en cuando, solía estar en todas partes. La última actualización de la interfaz de usuario, han quitado un poco, pero la verás a donde vamos. ¿Ves ahí? Eso es. Hexágono, Pentágono Pentágono, Pentágono . Creo que es el Pentágono Pero lo verás en algunos campos, algunos lo tienen, algunos no significa que pueda aplicar una variable a la altura de línea. No quiero. Yo sólo quiero darte la idea. Este de aquí sin embargo, este va a aplicarlo a este cuadro de texto. ¿Cuál? Yo podría. Sólo puedo aplicar total. La tocó y cambió a cinco. Esta variable ahora está conectada a ese cuadro de texto. Lo bueno de esto es que puedo decir, en realidad quiero que esto sea 15, o de vuelta a cero. Lo vamos a poner en cero, pero podemos ver que están conectados. Lo siguiente que tenemos que hacer es que podamos cerrar esto. Hay dos partes en esto. Este es el complicado. El color cuando dijimos, en realidad lo hicimos a todo el fotograma. Lo hicimos bajo llenado. Eso estuvo claro, queremos que el relleno sea un cierto color de interfaz. Eso estuvo genial. Lo viste al principio. Es un botón en el que haces clic. Es una interacción que ocurre en prototipo. Esto me pone cada vez que lo hago. Yo el bit. Oh, lo recuerdo. Porque lo que quiero hacer es cuando se hace clic en este botón, esto para cambiar Ya terminamos con el número . No lo necesitamos para nada. Está conectado. Lo que sí necesitamos, sin embargo, es el botón para decirle a este tipo qué hacer. Lo haces bajo prototipo. Bajo prototipo, quiero agregar interacción como lo hemos hecho antes. Quiero decir, cuando se toca esta cosa, ¿qué acción quiero hacer? Lo que hemos hecho es navegar dos. Muchas veces solo vamos a otra página. Este es el que queremos. Queremos establecer una variable. Aquí es donde se pone un poco raro. un par de cosas. Tienes esta interacción. ¿Ves que aparece esta cosita? Entonces, si estás tomando prestado el archivo Figma de otra persona, uno de los archivos de la comunidad, y está haciendo cosas, estás como, Cómo carajo está haciendo Entonces solo un prototipo y mira si puedes trabajar tu camino y darte la vuelta, mira, aquí está pasando algo. Y lo que me gusta hacer es con este botón seleccionado, en vez de trabajar aquí arriba, no me gusta. Es demasiado desapegado. No sé por qué exactamente ese mismo desplegable si lo haces por aquí se siente más apegado. No importa de qué manera lo hagas. Botón seleccionado, haga clic aquí arriba o vaya a esta opción. Realmente no puedo ver que tengo que moverlo hacia arriba. Establecer una variable hecho eso. ¿Qué variable? No las cosas de color. Cosas de color. Quiero las cosas del número, esa cosa total. Entonces lo que hemos hecho hasta ahora es cuando se hace clic, establecer una variable de ese color ¿Qué quiero hacer con él? ¿Bien? Esta es la expresión. Quiero que el total sea restado por uno, y acabo de escribir uno en Se puede escribir, restar, restar. En realidad, no quiero restarlo. Quiero hacer una pausa. Entonces no importa si lo escribas o quieres agregar, número uno. Excelente. Va a funcionar. Ojalá. Hagamos un prototipo de esto. Voy a hacer click en el frame, ve aquí y vamos a ponerlo en marcha bajo el modo de previsualización para que podamos ver todo. ¿Estás listo? Preparar matriz. Venimos por ti. B bio. A mí me encanta tanto. El problema es.dd dt. No bajes. Fresco. Me encanta. Hagamos exactamente lo mismo, pero vamos a conseguir que baje. Entonces aquí hay botón. ¿Qué vamos a hacer? Tenemos que asegurarnos en modo prototipo. ¿Qué tenemos que hacer? Modo prototipo. En dirección? ¿Qué vamos a hacer? Podría ser de barril o al hacer clic. No importa, pero voy a decir de barril, ¿qué quiero? Cuando dije al hacer clic en tocar, si sabe que es un teléfono móvil, va a tocar porque no haces clic en un teléfono. Tocas Bien si estás haciendo uno de escritorio, todo esto sigue funcionando. Pero va a decir al hacer clic. Exactamente lo mismo. Bajo las acciones aquí, puedo decir, me gustaría establecer una variable como lo hicimos antes. Aunque me gusta hacerlo aquí abajo. ¿Qué variable? Hagamos el número. Desplácese hacia abajo. Oh, hombre. No se puede ver la variable. A mí me gustaría haber hecho esa. Éste de aquí. ¿Qué objetivo? Me gustaría que apuntes al total, que es ese número ahí. Lo que quiero que hagas con ellos, me llevo el total y menos uno. Lo estás haciendo. Agarra la parte superior. Vamos a previsualizar, y subamos uno y bajemos uno. Uh, abajo abajo abajo abajo abajo. Míranos. Es súper simple, pero no lo sé. A mí me gusta. Una cosa que quiero mostrarte o recordarte es que a veces sí quieres quitar los objetivos como dices, Hue, romperla. Ya no va a estar conectado. Además, ¿cómo me aseguro de que no puedo ver las variables? ¿Dónde están? Recuerden, están bajo el modo prototipo. El atajo para eso es Alt en una opción de PC en una Mac, y es ocho y nueve. Nueve es prototipo, ocho es diseño. Alterna entre esos dos, acostúmbrate a eso. Y justo en el otro extremo del teclado, la misma tecla uno y dos conmuta entre activos y archivo Esa es una manera práctica en la que los recuerdo. Están a cada lado de la interfaz de usuario, como ocho y nueve está en mi teclado y uno y dos está por aquí. Oh, tiene que mantener pulsado el Alki opcional. Todo bien. Hicimos una variable. Y sube y baja. Es bastante sencillo. A mí me gusta. Haremos cosa más avanzada porque uno de nuestros problemas en estos momentos es que este tipo hace esto. Probablemente lo hiciste. Estás como, Ah. ¿Qué pasa si una caja pasa a siete negativo? ¿Les pagamos dinero? Al igual que en, Limerick Techno tiene que enviarte negativos 7 dólares, segundo negativo segundo negativo Es algo que se llama condiciones variables. Eso lo haremos más adelante en el curso bastante después. Así que puedes acercarte a eso si quieres seguir adelante ahora, pero creo que eso es todo. Eso es bueno para nosotros iniciarnos en este curso avanzado. Pasa demasiado tiempo en variables porque hay mucho que hacer. Hay toda una sección sobre eso más adelante en el curso, pero no sé. Quiero que estés orgulloso si lo tienes para funcionar. Hemos realizado dos variables diferentes. Hicimos el color uno, e hicimos el número uno. Hay tantas cosas que puedes hacer con él, y lo genial de ello es que puedes tomar prestados los documentos de otras personas que tienen variables en ellos, y ahora sabes dar la vuelta y cambiarlos. Solo haz unos pequeños ajustes. Mira eso. Seremos codificadores. Te veré en el siguiente video. Espero que no nos haga hacer un proyecto de clase. Sí. 32. Proyecto de clase 8: variables numéricas: Bien, cálmate. Cálmate. Es tiempo de proyecto de clase. A ti te encanta. Bien, quiero que crees un carrito. En realidad, llamémoslo un carrito de compras, incluso. ¿Bien? Y quiero que hagas que el mostrador funcione. Exactamente como lo hicimos en el último tutorial. Solo haz tu propia versión. Bien, he enumerado, haz una variable numérica, haz que funcionen los botones más y menos. Entonces básicamente esto. Quiero que vayas a vista previa que es lo que Shift Spacebar, ve a la página derecha Barra espaciadora de desplazamiento. Y quiero que esto funcione arriba y abajo. Bien. Lo que también me gusta que hagas es diseñar tu página de pago. Lo he llamado “checkout”. Esto es en realidad carrito de compras. Son muy diferentes. No somos muy diferentes, pero son diferentes partes del carrito de compras flow. A menudo, la página de pago es una vez que lo has confirmado, tienes que poner los datos de tu tarjeta de crédito y cosas como tu dirección de entrega que sucede después del auto. Quiero que lo diseñes. He hecho algo muy pequeño, puedes ir más allá. La forma en que me inspiro es algunas de las nuevas cosas es esta de aquí, Shift dos. Esto es lo que le pedí a Figman que hiciera usando las funciones de IA Fui al primer borrador y dije: Hazme una página de pago, que es la palabra equivocada. Debería haber dicho carrito para un sitio de eventos. Me di lo básico, y simplemente lo copié aproximadamente. Yo estaba como, imagen de ese lado, título. Yo uso el texto más pequeño para eso, y luego uso los botones que ya están hechos, consigue tu inspiración. Si no tienes la función de IA, hay muchos lugares para inspirarte gratis en línea, probablemente el mejor es algo llamado mob. Bien, mobin.com es lo que van a usar muchos diseñadores de UX. Se trata de un sitio de pago. Hay opciones gratuitas. Se puede utilizar de forma gratuita, pero sólo se obtiene una cierta cantidad de resultados. Puedes ver aquí, he escrito CRT y me ha dado algunas opciones de carrito Echemos un vistazo a IOS a la web. Es tan bueno el sitio, pero tienes que pagarlo. Si usas Mobin, puedes seguirme aquí Estoy en BYOL en Mobin. No estoy seguro de por qué lo harías, pero estás aquí. Otros lugares, obviamente el regate es un lugar realmente bueno. He escrito en el Carrito de Compras. Puedes ver aquí, estos están ultra sobrediseñados. Ese es solo un diseño realmente genial que alguien usa para su cartera. También puedes hacerlo totalmente. A veces cuando buscas cosas y estás como, ¿hacer que eso funcione? ¿Eso es viable? A veces no se puede, a veces se puede. Porque ¿quién está vendiendo esa cosa de cabeza de casco Nike? Tienes algo aburrido que tienes que vender. Pero algunos de ellos son geniales. Otros lugares son cosas como yo solo inspiración de interfaz de usuario de Google para el carrito de compras, no la página de pago porque son diferentes. Déjame mostrarte. Carrito de compras, vamos a la página de pago. Ves, esto es más como el toque final justo antes de que alcances el pago ahora. Has ingresado todos los detalles. Echemos un vistazo. Convert cart fue uno que aparecía y tenían mucha inspiración aquí Obviamente, cosas como Pintres Bhans Anywhere vas a buscar un carrito de compras y conseguir algo para Ahora, cuando lo tienes funcionando, esto va arriba, arriba, abajo abajo. Me encantaría ver un video de ello funcionando, subiendo arriba, abajo abajo y publicar ese video ya sea en tu cuenta de YouTube o Vumeo y enviarnos el enlace en los proyectos de clase De lo contrario, tomaré una captura de pantalla. Entonces, lo que quiero que hagas quiero que estés en modo prototipo para que veas a estos pequeños, y quiero que abras tu diseño realmente vaya, abra variables, luego vuelva al prototipo y tome una captura de pantalla de esto, que pueda ver los números, el valor, o incluso mejor. Mira esto. Mostrándote trabajando. Captura de pantalla de todo eso sería genial. Cargué archivos de clase y siéntete increíble y avanzado cuando usas variables en tus prototipos. Disfrútalo. Podría ser un poco frustrante. Es posible que tengas que volver a ver los últimos videos. Si tienes alguna duda o te pierdes, avísame en los comentarios. Si sabes lo que estás haciendo, echa un vistazo a los comentarios, ver si puedes ayudar a alguien más. mí me cuesta llegar a todas las preguntas, podrías ayudarme. Eso es. Eso es proyecto de clase terminado. Nos vemos en el siguiente video. 33. Proyecto de clase 09: Branding para eventos: Bien, es un tiempo de proyecto de clase súper increíble. Quiero que te hagas un pequeño logo que tenga un pequeño icono. Quiero que lo pongas en busca de una barra de estado. ¿Bien? Esa es esta cosita de arriba. Quiero que escojas algunos colores también. Bien, eso es lo básico. La única otra cosa es que el logo necesita tener un modo claro y oscuro. ¡Oh! Tengo un interruptor de palanca. También te mostraré cómo hacerlo en este video. Entonces quiero repasarlo con un poco más de detalle, mostrarte dónde conseguir colores, dónde conseguir íconos. Entonces hay un poco de solo hablar. Pero el proyecto de clase no es particularmente difícil. Bien, Logo, colores, barra de estado, gráficos de pantalla de arena. Tocón en. ¿De dónde sacas tu animal? Es del generador de Random Project. Si aún no has ido y lo has hecho, ve al proyecto aleatorio generator.com, y este es el que tengo Bien, entonces yo era Limerick Techno y mi marca era un pájaro. Puedes diseñar tu propio logotipo si estás listo para diseñar un logotipo. Ve a hacer eso. De lo contrario, solo puedes usar un ícono como lo hice yo. Póngalo junto a algún texto, agrega una barra de estado, hazlos componentes y listo. Ah, y elige colores. Déjame repasarlo un poco más específicamente. Entonces donde vamos agarramos el brief, hecho. El logo. Puedes usar iconos de stock gratis. A donde fui es que bajé hasta aquí. Miré mis plugins y escribí icono, y estos cambian El que sugerí en mis clases anteriores se ha ido. Icono ocho es bueno, algunos son libres, otros no lo son. ConAPI también es una buena. De ahí es de donde saqué este. Me gusta que vayas a traerlo, puedes decir, en realidad, porque traje uno de estos. Y quiero mostrarte algunos problemas que podrías conseguir. Vamos a traer este . ¿Bien? Me sale la altura, el color. Puedo importarlo como componente. Oh, ese tipo de ahorra algo de tiempo o como marco y haz un componente tú mismo después. ¿Bien? Independientemente, tráelo. Y lo que encontrarás es, aunque esté en la página, a veces termina por estar separado de ella. Vamos a borrar eso otra vez. Quiero mover mi página hacia arriba. Entonces estoy justo en mitad de mi página ahora mismo, si veo el kiwi, soy neozelandés Realmente quería usar los kiwis mi pájaro. Es una forma tan fea. Es una pelota de fútbol con la parte caída. Sí. Lo que realmente quería mostrarte era, ¿ ves que terminó? ¿Por qué puedo ver el nombre? ¿Sabes? ¿Quiz pop? Ya sabes. Es porque en realidad no está en este marco. Simplemente lo arroja encima, ¿de acuerdo? Así que es simplemente pasar el rato aquí justo en la parte superior de mis capas. Para meterlo en este marco, ¿de acuerdo? Tengo que salir y luego volver a entrar, no salir. Te dejaré ahí mismo, déjalo ir, traerlo de vuelta. Y ahora automáticamente saltará a este marco. Una cosa para notar. A veces también, cuando lo estás escalando, dependiendo de cómo se diseñó el icono, posible que necesites usar la herramienta de escala, no la herramienta de selección. A menudo la herramienta de selección funciona, pero a veces se necesita una herramienta de escala si hay trazos allí porque pueden hacer algunas cosas raras. Bien, puedes pasar el rato. A lo mejor podamos usar. Bien, así que crea un logo, básico real. Asegúrate de que tu logo sea un componente y quiero que hagas una variante. Quiero que te asegures de que hay un modo claro y otro oscuro. Ya hemos hecho algo muy similar antes. Hicimos variantes. ¿Dónde lo hicimos? Variante Multi Dimensional o cualquier variante. Lo hicimos por los botones, pero podrías hacerlo totalmente por esto porque quiero que hagas es que tengas esto y te vayas, Oh, modo claro, modo oscuro, modo claro, modo oscuro. Así que asegúrate de que sea un componente. He dejado el mío en mi página de componentes. Tengo un modo de luz y un modo oscuro. Quiero que veas si puedes conseguir que esa variante vuelva a funcionar. No es una variable, variante. Lo último que hay aquí es ¿dónde estamos? Lo segundo o último es escoger algunos colores. Quiero al menos un color primario y secundario. También he escogido algunos otros. Tengo un color de acento, a veces llamado color terciario y luego tengo una luz neutra y una oscuridad neutra. Estás como, ¿eso es blanco y negro? No lo es. Lo he hecho antes donde esto es bastante ver no es del todo blanco. Ahí se puede ver el contraste. A mí me gusta ese contraste entre los dos. Depende de ti si quieres usar blanco puro para todos tus colores o lo mismo con el negro aquí. No es del todo negro. ¿Cómo los escoges? He hecho una pequeña muestra de color que podrías usar Entonces, si vas a mi figma.com en BYOL, encontrarás todos los archivos de mi comunidad, y uno de ellos se llama Puedes ver aquí, todos son en blanco y negro, excepto que creo que este es el único blanco y negro. Se ve que he dicho colores más cálidos, se ponen un poco rojos. Hay un poco diferentes colores y luego se enfría por el fondo aquí, puedes elegir tus sets de esto si quieres. Terminé recogiendo estos dos para los míos. ¿Bien? Están calientes. Es una especie de lo que voy por el resto de mi paleta de colores. A veces los colores más fríos funcionan mejor. Puedes maquillarlos tú mismo. No tienes que agarrar el mío. En realidad, haz una pausa ahí. Lo haré descargable de los archivos de ejercicio, y lo llamaré colores neutros. Tú esperas ahí. En realidad, vamos. Se puede guardar una copia local. Mira, archiva, guarda copia local. Esto no sucede mucho porque es un poco de software muy online. Pero voy a poner esto aquí por ti. Voy a deshacerme de los colores neutros, y podrás abrirlos de tus archivos de ejercicios. Tengo un enlace en la parte superior de los archivos de ejercicio para los archivos de mi comunidad, vas a ir a buscarlo aquí y podrás abrirlo como. Tú. Ahí estás. Colores neutros. Soy yo. Todo bien. Dije que no hay mucho que hacer. Es mucho explicar qué hacer. La barra de estado es la siguiente. Quiero que revises y encuentres la barra de estado, que es donde uso Barra de estado, eres esa cosa en la parte superior de ahí. ¿Bien? Encuéntralo para tu diseño particular. ¿Bien? Entonces lo que fui fue a mi casa o si estás en el miembro del navegador, ve a aquí y ve a Archivos queremos que sean plantillas y herramientas. Y arriba aquí, quiero escribir en ellos lo llaman barra de estado. Barra de estado es el nombre de esa cosa a lo largo de la parte superior que tiene tu batería y otras cosas. Entonces lo que podrías hacer es barra de estado y luego escribir tu si estás usando el iPhone 18, cuándo estás haciendo este curso o lo que sea, o si quieres el de Android , simplemente escríbalo. Actualmente a los 16 años, y acabo de abrir uno. Cuando estoy decidiendo, estoy viendo uno. A menudo elijo el primero. Bueno tiene controles de cámara, con muchos me gusta y muchas descargas, y este de aquí estuvo muy bueno. Alguien hizo ahí está ahí. Y es realmente bueno. Copia esto, Dan, maniquí, hace que sea fácil. Yo solo fui copy y fui a mi diseño, y me fui a pegar lo cool de ello es quien hizo esto hizo lo dulce que acabamos de aprender y le pusieron variantes. Yo estaba como, tengo un Lo hace. ¿Bien? Tiene una palanca de luz y oscuridad. Oh, mira eso. Así que en realidad no hagas nada al respecto. Gracias persona que hizo esto. Entonces ella Herman definitivamente lo hizo mal. Pero gracias por eso. La otra cosa que haré mientras esté aquí es que tú estarás como, el interruptor de palanca, ¿cómo lo hacemos? Bien, eso es muy fácil. Vayamos también. Ahora nos vamos fuera de tema porque en realidad, vamos a terminar. Así hecho eso. Entregables, haga una captura de pantalla de sus opciones de color y la barra de estado en la parte superior y su logotipo. Eso es lo que quiero ver. Y háganos saber si diseñó su propio logotipo. Si es totalmente personalizado, has dibujado tu propio pájaro, háznoslo saber o si es un icono gratuito que has usado. A lo mejor de donde lo conseguiste. Bien, volvamos a lo del cambio. Vayamos por aquí. Vamos, entonces los componentes. Vamos por el otro lado. Tengo mi logo aquí. Puedo hacer click derecho en él e ir al componente principal, mismo mismo estoy aquí y se trata del naming. Si entro en esto y si lo abro, obtengo el modo, y tengo valores de luz y oscuridad. Si solo llamas a este encendido y apagado, e's dale una oportunidad Mira este, ya ves, cambia el modo de este. Todo lo que tienes que usar es la palabra sí o no para los nombres. O creo que hay un par de variaciones más que puedes usar. Creo que puedes usar, dar click en algo, Dan, sí, no, no. Eso podría tener más sentido en este caso porque diremos, ¿cuál es el predeterminado? Lo es. Decir modo oscuro. No, modo. Modo de luz. Entonces, ¿ahora el modo de luz? Sí, estás en Modo Luz, lo que significa que se ve bien en las pantallas de luz. Pero si apago el modo de luz, pop, está en modo oscuro. No importa, pero se ve genial. Todo bien. Eso fue más largo de lo que pensaba. Pero ahí hay algunos pequeños proyectos divertidos, logo, colores en la barra de estado. Una vez que hayas hecho eso, no necesitas subir este a las redes sociales, solo a los proyectos de clase, y sí, ver en el siguiente video. 34. Cómo crear variantes de color UX usando un widget Figma: Hola a todos. En este video, vamos a mirar los estilos de color y hacerlos automáticamente. Aquí, necesitamos estas muestras primarias y secundarias de las que podamos sacar En lugar de tratar de adivinarlos y hacerlos nosotros mismos, vamos a usar nuestro plug in donde conseguimos cambiar el color y pasa y hace todos los estilos de color para nosotros. Listo para entrar en nuestro panel Estilos. Súper fácil, súper rápido y súper increíble. Oh, para encontrar el widget, abramos nuestras acciones. Comando K o Control K. Simplemente haremos clic en el botón, y vamos a escribir en generador de etiquetas de color. Ahora se llama Generador Insertar Color. En fin, aunque esto no esté aquí, encontrarás cualquiera de los dos generadores de paleta de colores. Había otro que es bastante bueno. Se llama fundaciones Generador de color. Ese es un poco más duro hasta ti, pero a mí me gusta este. Decir que si no encuentras esto o deja de funcionar y ya no se soporta, hay otros para ir a buscar. Pero el proceso general es el mismo. Lo que vamos a hacer es que tenemos que agarrar voy a agarrar mi color primario. Es éste de aquí, yo cuatro, siete, cuatro, seis B, y voy a teclearlo aquí. Asegúrate de mantener el hachís ahí dentro. Me enloquece si no hay hachís. Entonces no pasa nada hasta que tabulas a lo largo, tabulas fuera de él o haces clic fuera de él, y ahora tengo mi color. Lo que se hace es romper ese color que tenía en un montón de diferentes tonos más oscuros y claros. Podemos nombrarlo. El caso va a ser mi color de guión principal. Si me salgo de eso, se ha ido para la ortografía británica, ¿de acuerdo? Se puede ver que los han nombrado muy bien. También podría tener que tener un acrónimo para el suyo porque si está trabajando en muchos clientes diferentes, puede que tenga demasiados colores primarios. ¿Bien? Hasta usted. Voy a dejar el mío, solo que no me confundas en este curso, haz eso Y luego todos se llaman amablemente. Mira eso. Lo que podemos hacer es decir, en realidad, quiero guardar estos estilos. Y aquí es donde pasa el cubit. Estás como, no pasó nada genial. ¡Oh! Pero no tienen nada seleccionado. Reloj. Si entro en eso pasa. ¿Por qué? Vamos a intentarlo de nuevo. Haga clic en esto. Guardar estilos. Ahí ahí. No estoy seguro de lo que pasó ahí. Ahí ahí. De todas formas, dale click dos veces. Tengo mi color primario. Voy a deshacerme de eso porque ese no es mi color primario. Yo tengo todos estos. ¿Por qué son buenos? Obviamente, solo están listos para irse. Puedo pasar y decir, en realidad, estoy haciendo una tarjeta aquí abajo y necesito elegir uno de mis colores. Puedo ir a estilos de color e ir, Bien, quiero que sea el 700 Impresionante. Lo que tiendo a hacer, aunque, a menudo es que no tengo toda la gama. Yo no uso 50. Esto depende de usted. Yo también me deshago de todos los números enteros. Me deshago de 200, 400 números enteros, números pares. Eso es lo que quiero saber. Yo sólo quiero estos. Sería muy típico tener estos. Si eres una empresa más grande, las tendrás todas. Solo tiendo a trabajar en proyectos más pequeños, y si necesito un 600, puedo hacerlo. No es difícil. Ba Na acaba de conseguir un grupo más arreglado. Y lo genial de ello es que este pequeño enchufe solo pasa el rato. Ya no lo necesitas. Puedes borrarlo, ¿de acuerdo? Y tus primi y tus colores no desaparecen. Es un enchufe que simplemente anda por ahí hasta que ya no lo necesitas, ¿de acuerdo? Yo voy a hacer el resto de estos. Haremos uno más juntos, ¿verdad? Los haré rápido, y me detendré si llego a algo útil. Péguelo en. Bien. Te veré en un segundo. Oh, sí, hizo una pausa. Sé que lo he hecho. Ni siquiera necesito chequear. Entonces fui a éste, cambié el color, ya sabes, le di un color primario, fui a éste, cambié el color, solo golpeé Guardar estilos, y no cambié el nombre te apuesto ahora, si tengo una mirada, ¿color primario? Oh, no lo anuló. A lo mejor tienes que darle click dos veces. Pero si le doy a esto ahora, voy a sustituir mis colores primarios por este nuevo. Entonces, si voy a secundaria, quiero que hagamos esto correctamente. Bien, quieres que eso sea eso. Entonces son los correctos, pero necesito cambiar esto antes de ir más lejos. Entonces esta va a ser mi secundaria. Golpea Enter. Voy a decir que los estilos de Guardar golpearon dos veces porque no parecía funcionar con ellos. Vamos, están dentro. Todo bien. Entonces nuestro último otra vez, el modo velocidad. Sí. Bien. Dijías que no lo anularé. El 100% anuló ese color secundario. Volver al modo velocidad. Bien, una cosa te voy a mostrar es que ves esto se ve muy negro en pantalla, pero luego una vez que llegas a estos colores más claros, puedes ver que hay mucha calidez en el negro que elegí Entonces voy a llamarlo neutral y agregarle eso. Sí tengo que hacer clic en él dos veces. No sé por qué. Y para este de aquí, realmente no quiero versiones de esto. Sólo voy a cambiar el nombre de esto a interfaz, y solo voy a tener un color para ello. Entonces no necesito usar esta cosa del estilo. Simplemente va a ser ese color, así que voy a decir, vamos a ir a esto, voy a hacer clic en agregar un estilo. No voy a ser una variable. Voy a volver al estilo. Bueno, eso es confuso. Vamos a saltar a las cosas variables que hicimos antes. Voy a ir de estilo. El nombre de éste va a ser interfaz. Gran estilo. Veamos qué tenemos. Ya no te necesito. Piensa amigo. Sólo voy a ordenarlos en modo rápido porque es simplemente borrar un montón de cosas. Mira esto. Si quieres los 50, puedes quedarte con los 50. Si quieres todos ellos, quédate con todos ellos. No hay reglas reales. Lo que me gusta hacer es asegurarme de que estos estén en orden. El único color que están por su cuenta tiene que estar en la parte superior. Estos grupos aquí, solo di si los hiciste en diferentes órdenes, puedes moverte principalmente para ser el top si no lo era antes, increíble. La otra cosa que me gusta hacer es cuando estoy, digamos, coloreando algo, digamos, un dibujar una caja o un marco, y voy a decir, vas a ser de este color muestra En lugar de tener que pasarlos por todos, lo cual es bastante largo, puedes simplemente aquí arriba, dice buscar Tipo 500. Bien, entonces te dará los 500 de todos estos porque sabes que quieres el color 500. Digamos que quieres la versión más oscura del color. Bien, puedes pasar y simplemente elegir esta. Cuando están oscuros, en realidad, todos se ven bastante similares. Entonces sí, esa es una práctica. 500 y te voy a usar. Todo bien. Eso es crear variantes de color dentro de Figma usando widget. No tiene que ser ese widget. Recuerden, mucha gente usa lo que esa llamó fundaciones. También es muy genial. Algo así lo hace un poco diferente. Prefiero este. Tal vez encuentres el tuyo que realmente te guste. Muy bien, amigos míos. Eso es. Te veré en el siguiente video. 35. Cuadrícula v restricciones v disposición automática: ¿cuál usar y cuándo?: Habla de cuadrículas, restricciones, y/o louts, cuándo las usarías, para qué usaban y cuándo las usarías, cómo las uso en mi flujo de diseño, que son más importantes, con lo que empiezo, que no hago bien hasta el final, y algunas de ellas que no uso mucho en absoluto, solo para que tengas una mejor idea de lo hacen todas estas cosas y cómo interactúan Es una waffly. Prepárate para el waffle Bien, vamos a saltar. Muy bien, tan rápido recapitular Autolayouts Estos son solo trozos de texto por ahí. Las salidas de auto son geniales. pulidos a todos y vas Shift A. Ahora son Auto patán La forma en que funcionan los Autoouts es que trabajan en los internos aquí Lo hacen receptivo. Pero a las cosas dentro de mi Auto out. Solo significa que puedo agarrar esto, moverlo por aquí, puedo tomar el inicio de sesión y tirarlo aquí. Puedo cambiar al texto, y refluye. Eso es un auto out. Una restricción es el exterior de la caja. Sigue siendo la capacidad de respuesta, pero aquí dentro, si lo traigo a este escritorio, el momento está tratando de ir desde arriba y se está pegando a la predeterminada, que queda Pero si voy por aquí y digo, amigo mío , están pegados a la derecha. Significa que cuando entre aquí y digo, necesito que cambies el tamaño, va a cambiar el tamaño y ser todo Entonces es el exterior de la caja. Ahora, la última son cuadrículas o guías de diseño, o columnas. La guía de diseño de llamadas aquí. Tengo tres columnas hechas en la mía. Voy a darle la vuelta para hacerlas correctamente más adelante. Pero tengo columnas. Estos son solo útiles para la consistencia en todas las páginas. Quiero que los márgenes sean los mismos en ambos lados vez de intentar adivinarlo o dibujar la caja mágica. Si alguna vez has dibujado eso lo mueves para alinear las cosas. Quieres consistencia en tus márgenes y en tus columnas. Enciendes tu guía de diseño y eso nos ayuda con la capacidad de respuesta ¿Cómo ayuda a la capacidad de respuesta? Es bueno solo para alinear las cosas. Se vuelve bueno para la capacidad de respuesta. Si en realidad, vamos a tirar esta de aquí la tarjeta. Este es un pedido que hice antes. Voy, bien, chasquea un lado. Estamos haciendo. Eso es lo suficientemente útil. Pero si hago otra, ahora estoy trabajando en mi tablet. Y necesito que sea más pequeña, voy a ver lo que va a pasar. Sigue nuestras columnas. No tenemos que arrastrarlo y luego encontrar nuestras columnas y volver a levantarlo. La razón que es una combinación. Es un Atoout lo primero de lo que hablamos. Son limitaciones. Lo segundo de lo que hablamos, mira esto si lo arrastro adentro verás mira que está ahí dentro. Es limitante, pero no al tamaño completo de la página. Si tienes las columnas habilitadas, dirá, sólo voy aquí. Si no tienes ninguna columna, intentará usar el lado de la página. Verás que también está a un lado. Tengo esta salida automática establecida tanto a izquierda como a derecha. Para que cuando baje a tablet, haga esto. Puedo hacer lo mismo cuando baje al móvil. Esas son las tres áreas Restricciones y guías de salida automática. Quiero mostrarte cuando los uso porque eso es importante. Te estoy enseñando todo en este curso. Quiero que sepas cuál se acostumbra más a menudo porque hay una tercera opción o cuarta opción. Ahí está la opción de no hacer nada. Gran parte de mi trabajo es una maqueta que no requiere salidas Automáticas, sin restricciones y sin cuadrículas. Entonces usaré una grilla. Déjame hablar de cuándo más los uso. Termino usando probablemente las guías más porque quiero consistencia cuando estoy diseñando y quiero márgenes y quiero que se ajuste a ella. Aunque planeo no hacer nada, mi primer nivel es no hacer nada, no tengo nada. Dibuja todo y muchas veces puedo llegar a mi desarrollador sin nada más. Solo marcos en la página, nada responde, y hemos trabajado juntos tanto tiempo, no necesita verlo, moverse. No estamos haciendo ninguna prueba con usuarios en diferentes teléfonos, realidad, solo un montón de cuadrados con imágenes todas alineadas. Pero por mi propio bien, a menudo voy a tener guías sobre sólo para que la consistencia a través de las páginas. No quiero que sea un poco así en esa página y luego un poco más allá en esta , quiero consistencia. Lo siguiente que usaría es el Auto out. Las salidas de auto son prácticas. Son muy fáciles de hacer y puedo cambiar las cosas y puedo reescribir cosas, especialmente cosas como botones ¿Tenemos un botón aquí que sea Auto Layout? Probablemente no. A lo mejor en esto. Cómo pruebo mis cursos pruebo el video antes de hacerlo contigo. ¿Tenemos un botón? Ahí vas. Este es el botón de salida automática, puedes ver lo útil que es eso. Probablemente voy a hacer los botones. Se vuelve realmente útil cuando estás haciendo esto aquí. Vayamos a éste. Audiots los uso bastante cuando voy, Muy bien, tengo esta cosa genial Bien, pero necesito un montón de ellos. Voy a subir, duplicar, duplicar, duplicar, ¿bien? voy a meter a todos en auto Out, luego voy a subir por ahí, por allá. Se puede ver lo rápido y fácil que es. Pero en la primera etapa cuando estoy diseñando esta cosa, nunca es un auto outut Yo solo lo diseño para que se vea, y luego una vez que tenga que hacer montones de ellos, entonces lo convertiré en autolou y empezaré a jugar Bien, ¿qué más? El último dice restricciones. Las restricciones son útiles cuando es necesario. Digamos que tienes algo relativamente complejo o al menos sabes que los desarrolladores podrían interpretar tu diseño de varias maneras diferentes. Estás como, no, no, no, definitivamente necesita hacer esto. Vamos a nuestra tarjeta, cambiemos uno, alejemos y todo. ¿Tenemos una tarjeta? Digamos este de aquí. Quiero que sepa que eso se pega en la esquina superior derecha y no solo se queda ahí. Bien, necesitaba saber que eso pasa. Ese es un ejemplo sencillo, pero ¿entiendes lo que quiero decir? Al igual que, no quiero que se rompa en una línea. Quiero que quede una plaza. Quiero que esté en la parte superior derecha, para poder construir un prototipo que sea arrastrable y squishable Es muy difícil de explicar a veces, ya sabes, como, Oye, el cuadro verde en la esquina superior derecha, cuando entra en modo tablet, quiero que se pegue a la parte superior, izquierda y derecha de la imagen, pero ignorándote terminas con esto, como, solo te voy a mostrar, terminas usando restricciones Se vuelve aún más importante cuando estás trabajando en un equipo más grande y entregando archivos que van a ser reutilizados No quieres dejárselos en manos de ellos para que vuelva y sea como, nosotros se lo dejamos al equipo, y si voy a mi componente principal y esta cosa de aquí, ya sabes, ellos como que, lo tienen aquí. Ya sabes, puedes simplemente agregar fácilmente una restricción para que se adhiera a donde está para que todo el resto del equipo pueda usarla de la manera en que está destinado. Derecha. Eso es como si no lo supiera. ¿Es útil? Es un resumen de dónde uso todas estas cosas de las que estamos hablando, lo importantes que son y cuándo aparecen en mi proceso de diseño. Pero gran parte es solo un marco con algo de texto en él, y todo parece que va a ser receptivo, pero no lo hago porque estoy trabajando con alguien con quien he trabajado antes. Saben cómo manejamos las cosas en nuestro sitio web así que no necesitan un auto out elegante. Todo bien. Eso es. Te veré en el siguiente video. Ojalá eso haya sido de ayuda. 36. Cómo añadir filas y cuadrículas de columnas a un diseño en Figma: Hola a todos. En este video, vamos a poner franjas en un documento. Parece que dónde está Wally. Podrías llamarlo Dónde está Waldo, el mismo tipo. Lo que realmente vamos a hacer es agregar más de una cuadrícula de diseño. Vamos a agregar nuestras columnas como hemos hecho, pero esta vez vamos a agregar rosa y vamos a explicar por qué nos molestamos con esta cuadrícula de ocho píxeles. A se revelará de una manera aburrida. A algunos de ustedes les va a encantar esto, algunos de ustedes se preguntan por qué a alguien le importa. mí me importa. Así que vamos a hacerlo. Todo bien. Agreguemos nuestro primero. El que empiezo con la mayor parte del tiempo es que voy a matar a mi marco de padres, y voy a ir a Lou Guide, y voy a agregar uno que sea una columna, sobre todo cuando estoy trabajando en el móvil, muchas veces solo voy a trabajar con uno porque realmente quiero esta cosa solo por el margen. Recuerda, trabaja en múltiplos de ocho si puedes, así que quiero probablemente 24. Lo chulo de eso, ¿está todo hecho? ¿Todo bien? Es que ahora puedo pasar y solo asegurarme de que estoy alineando todo, asegurándome de que todo esté chasqueando, todo sea consistente Quiero que esto esté por aquí. Y la otra cosa que podríamos hacer mientras estoy aquí es asegurarnos de que sea consistente. Se puede ver que está chasqueando a la derecha pero no, tiene a la izquierda y a la derecha encendidas Excelente. Si no es así, puedes ir por aquí y decir ser de izquierda y derecha para que se adhiera a la columna. Ya lo hemos hecho. Donde esto se pone extra cool es cuando agregamos filas también. Vamos a hacer clic en el marco padre. Bajemos a mi guía de diseño y podemos agregar más de una. Set plus. Ahora tenemos el primero y este nuevo llamado grilla ocho puntos. Quiero que yo quiera rosa aquí con un conteo, puedes cambiar eso a Auto y en realidad lo hará, echemos un vistazo. Vamos a cinco. Se puede ver por defecto, las filas funcionan como columnas. No es lo que quiero. Entonces voy a cortar eso. ¿Ves que hay uno, dos, tres, cuatro, cinco? Con filas, por defecto, está configurado para estirar. Se puede ver que hace eso. No es lo que quiero. Quiero espaciado regular consistente. Lo que voy a hacer es ir por aquí, cambiar mis filas a B. Ajustarlo a Auto. Entonces dice estiramiento, no quiero estirar, quiero empezar por arriba, y luego quiero bajar ocho es realmente bueno. Cuatro es mejor para este diseño, te da un poco más de control. Se ve que tengo poco ocho puntos y una cuneta entre ellos de 20 Yo sólo quiero ser cuatro y cuatro. Me sale este tipo de cosa de polo a rayas, barbería Sigo diciendo Whiz Wally. Podría llamarlo genio Waldo. Lo mismo, lo mismo. Bien, entonces tengo esto. Eso es todo lo que necesito. Y lo que podemos hacer es lo genial de eso ahora es podemos pasar y decir, en realidad, mío ya se alineó perfectamente, pero tu arrastre de mi nave superior aquí en realidad se romperá a estos múltiples Tengo esto en el lugar correcto, chasquear al borde. Echemos un vistazo. Voy a pegar en el otro vamos a hacer este fondo. ¿Dónde aterrizó? Todo se alinea, pero es posible que encuentres que el tuyo está a medio camino entre ellos Ahora el mío está alineando. Excelente. Voy a volver a pegar esas cosas. ¿A dónde fuiste? Aquí es donde se pone realmente interesante. El tipo es genial cuando se usa este alto de cuatro píxeles. Se puede ver aquí que se está rompiendo hasta el fondo. Genial, así puedo conseguir que el tipo se alinee con esta grilla. Lo que es realmente bueno de esto es y agarra esto y di, en realidad, te quiero. ¿Puedes ver en la parte inferior aquí? Se está ajustando a esa grilla, y entonces se puede ver en esta, no lo es Estás como, H quiero que esto sea consistente. Me encantan mis cuadrículas. ¿Por qué no están cuadrículas Esta de aquí no está alineada con la línea roja, tampoco esta. Lo que debes hacer es asegurarte sea cual sea la fuente que estés usando, debes asegurarte de que la altura de la línea sea divisible por ocho Lo que voy a hacer en realidad es hacer que mi tamaño de fuente sea divisible por ocho No tienes que hacerlo, pero no estoy seguro de por qué fue a los 17. Entonces aquí cuando se trata de altura, probablemente quiera que sea 24. Lo que va a pasar es porque nuestra grilla es divisible por ocho, esto aquí debería ser lo mismo En el primero arriba el todo debería ir en fila arriba. Estás como, yo no cura. Eso está bien. No tienes que curar. Pero lo bueno de esto es que puedo decir, quiero menos ocho de él, para la altura de la línea, y todo seguirá alineándose con tu grilla. Tienes que decidir qué tan importantes son las cuadrículas para ti. Puede que no lo uses para fuentes, pero definitivamente es bueno cuando estás usando cosas como imágenes. ¿Puedes ver este de aquí? Ni siquiera está ahí. Ahora está alineado. El espaciado consistente es una de esas cosas en las que puedes decirle a alguien que tal vez sea un diseñador junior y un diseñador senior cuando empiezas a preocuparse no solo por las cosas que se alinean, sino que las cosas se alinean en la consistencia en las páginas. Eso es demasiado apretado. Se puede hacer vamos más cuatro. Puedo alinearlo y ya ves, mira, ah, es consistente. Probablemente sea lo que quiero 20. Recuerda, Shift G para encenderlo, Shift G para apagarlo. Así es como se agrega más de una guía de diseño para documentar y por qué. Y vas a tropezar con gente haciendo esto, vas a estar como, ¿por qué es todo rayado ¿Por qué le importaría a alguien? Es porque nos importa la consistencia y el diseño, la composición. Sí, está muy lejos. Oh, pero mira porque tengo la grilla encendida, llego a romperla a cosas que se sienten bien. Mira, esas son cuatro líneas de distancia. Así son estos. Bonito. Bien, eso es todo. Veré en el siguiente video. 37. Cómo crear y actualizar estilos de guía de diseño para columnas y filas en Figma: Primero, vamos a ver hacer un estilo de cuadrícula y actualizar un estilo de cuadrícula en este video. Vamos a ponernos en marcha. Vamos a ponernos estilo. Empecemos con un atajo. G, enciende y apaga las guías. Digamos que he pasado algún tiempo consiguiendo este. Quiero ponerlo por aquí. Primero voy a ir a éste y decir, deshacerme de ti. Quiero agarrar esta. Lo que puedes hacer es hacer clic. Recuerda, esta pequeña área rara. Shift, agarra el otro debajo de él. En esta pequeña área vacía aquí, ve a copiar, da clic en el nombre de esta, y a lo mejor hacemos clic en el nombre de ésta, pulsamos Pegar. No funciona. ¿Por qué no funciona? Porque este ya tiene algo aplicado. Sí. No se pueden aplicar más de dos de lo mismo. Pero puedo colocarlo a dos de ellos. Sólo tengo que limpiarlos. Fresco. Obviamente, ese es el largo camino para hacerlo. Lo que quiero hacer es convertirlo en un estilo. Voy a tener esta seleccionada, voy a bajar a la que he hecho y voy a ir a este pequeño panel de Estrellas y voy a decir que quiero agregar un estilo. Voy a darle un nombre a esto. Voy a llamar a este móvil. Voy a llamar a esto una columna, una carbón y cinco pick o filas. Bien, dale un nombre que vas a usar o reconocer, y voy a crear un estilo. De nuevo, se puede añadir una descripción. Ahora puedo ir a estos. Y en realidad, en vez de intentar hacer el copiado y pegar rapido, voy a decir, voy a agregar el estilo que hice llamado móvil Ahí vas. Ahora actualizándolo. Digamos que tu estilo, digamos que quieres cambiar este. Podrías entrar aquí y romperlo e intentar hacer uno nuevo y luego pegarlo en todo lo demás. Lo que puedes hacer es que no puedes ir nada seleccionado y encontrarás tus estilos como todo lo demás en tu panel de diseño abajo aquí. Puedes ir a la edición. Puedes entrar aquí y decir, en realidad, quiero que esto también tenga una grilla. Se puede ver que se le agrega un tercero. Tenemos una cuadrícula y filas y columnas. O podrías decidir que solo quieres editar las filas. Has decidido que vas a usar ocho píxeles. Cero. Voy a regresar, pero así es como lo haces. Bricking. Así es como creas y editas un estilo, en particular, un estilo de guía de diseño. Muy bien, amigo mío, eso es todo. Todos ustedes están estilizados. ve bien. Te veré en el siguiente video. 38. Animación con facilidades personalizadas en Figma: Hola a todos. En este video, vamos a hacer flexibilización personalizada Vamos a hacer las nuestras propias donde lleguemos a hacer cosas bonitas. En lugar de los valores predeterminados, podría parecerse al resto de ellos, pero eso lo hicimos a medida. Te voy a mostrar. Es este tipo de flexibilización donde podemos jugar con la facilidad y hacer lo que queramos En su mayoría empeoran pero a veces lo hacen mejor. Vamos a saltar. Primero, tengo un marco vacío, no un marco vacío. Un marco que he dibujado que está destinado a ser un boleto, parece una bandera. Si quieres ver como hago estas cosas, puedes colgar ya hemos hecho la mayor parte antes. Para lo que vinimos aquí es una flexibilización personalizada. Necesito tener dos marcos. Sólo voy a golpear Comando D, Control D en una PC. Animación uno ahora tengo animación dos. Lo que tengo que hacer es que estos tengan que ser diferentes. Quiero empezar esto de lado aquí. Nosotros primero que nada, voy a agruparlo. Agrupar eso. Ahora bien, esto es algo interesante, mira. A esto se le llama grupo dos ahora porque lo acabo de agrupar. Slick todo fue Comando G o Control D en una PC o puedes hacer clic derecho en él. Este de aquí, si lo agrupo, lo mismo. Lo que terminó pasando. Se llama grupo tres. Las animaciones no funcionan. Cuando sus nombres son diferentes. Esto es diferente de eso. Puedo hacer una de dos cosas. Podría agruparlo antes de duplicar este marco, eso funcionaría. O simplemente puedo asegurarme de que ambos tengan el mismo nombre. Si tu animación no está funcionando, comprueba que los nombres sean los mismos en ambas animaciones. Co. Lo siguiente que quiero hacer es arrastrar, va a comenzar fuera de pantalla y luego entrar en pantalla. Ahora, ¿qué va a pasar aquí? Va a saltar fuera de mi animación. No quiero que esté fuera de ella. Tiene que estar todavía dentro de él, pero afuera, ¿quién recuerda cuál es el atajo Así es. Un poco confuso. Empiezas a arrastrar, luego mantén pulsada la barra espaciadora, y saldrá al exterior por aquí Se puede mantener la barra espaciadora y desplazar, y va a ir en una recta Muchos atajos y ahora debería funcionar. Sólo tenemos que añadir la transición entre las dos páginas. Vamos a dar click en éste. Cambiemos al prototipo. Puedes hacer clic en el botón o recordar el atajo. Recuerdas ahora es la opción nueve, ocho, nueve, ocho, nueve, o Alt, ocho, nueve, nueve obtiene tu prototipo, ocho te vuelve a diseñar. Conoces ya sabes. Todo bien. Vamos a hacer click y arrastrar esto. Vamos a decir de barril. Claro. Navega a esa página. Genial. La animación va a ser Smart Disolver y vamos a usar vamos a empezar con Me gusta entrar y salir. Se ve bien. Vamos a hacer clic fuera. Vamos a previsualizarlo. Otra cosa que vamos a hacer es si tu flujo no aparecía aquí, digamos que ya no fluye ahí. Deshazte de él. Puedes hacer click en esta primera porque de lo contrario, si comienzas a crear prototipos, se va a apagar y prototipar la primera página del documento, que no es donde estamos Especialmente cuando estás obteniendo un documento más grande como el que tenemos, eres como, el tú. Se puede decir que va a comenzar en punto de flujo. ¿Ahí? Ahora es realmente sencillo, basta con hacer clic en ese botón. Sin atajos, no nada. Fresco. Dije: ¿Qué tenemos que hacer? No pasa nada, Dan. ¿Por qué? Porque dijimos de barril, tocamos y ahí está ahí. Tenemos una animación básica, pero queremos hacer una animación personalizada. Vamos a dar click sobre esto. Esta cosa se puede mover. Siempre está en el lugar equivocado para mí, pero puedes arrastrar la parte superior de ella alrededor. Vamos a cambiarlo de la curva siendo algo pre hecho a bezier personalizado Esta es tu curva bezier, y se verá diferente a la mía dependiendo de cuál sea tu primera Esto entra y sale. Así es como se ve. Si voy a decir facilidad en, y luego de vuelta al bezier personalizado, es como se ve ESN Estamos personalizando algo que ya hemos elegido. Podría ser recto. Si es recto, significa que se ve así, entonces es lineal. Entonces vuelvo a la costumbre, es como, todo se ha ido. Déjame explicarte rápidamente lo que estamos pasando es que puedes hacer clic en estos puntos y arrastrarlos a cualquier parte. Si ya tienes algo arrastrado, puedes arrastrar este pequeño mango aquí y simplemente moverlo. Puedes tener dos de ellos. Bien, hagamos algo loco y hagamos esto. Puedes arrastrarles todo tipo de lugares extraños. Vamos así. qué va a hacer nuestra animación. Así que voy al pequeño botón de reproducción y hago clic una vez raro. Puedes hacer todo tipo de cosas geniales. Los principales que vas a usar Yk es esta curva S es lo que se ve bien. Esto es lo que entra y sale, pero entrar y salir es realmente sutil. Es así y aquello. Me gusta agarrarlo dentro y fuera y hacerlo aún más lejos yo mismo. Entonces es así. Se va súper lento al principio, súper rápido en el medio, súper lento al final. El predeterminado ahí es simplemente muy sutil. A mí me gusta sacarlo al máximo. ¿ Cuánto tiempo va a tomar esto? Haremos que tome medio segundo. ¿Cuántos cientos de milisegundos? Así es, 500. 1,000 es un segundo, 500 es la mitad de eso, entonces medio segundo. Vayamos aquí. Vamos a previsualizar, haga clic una vez. Es bonito, ¿no? Me puse bastante rápido en el medio ahí y agradable flexibilización. Estás como, me lo perdí, Dan. Miembro archy lo restableceremos, haz clic de nuevo. Bonito. Sí me gusta ir por encima de los prefabricados si eres como, no puedo decir la diferencia No te molestes en hacer costumbre más ocupado porque es una cosa tan pequeña Veamos un par de cosas. Sólo quiero explicártelo. Entonces vayamos a Esn y volvamos a la costumbre Lo que está pasando es tan difícil de entender. Pero si te dibujas un poco de gráfico, movimiento del tiempo. ¿Esa es la X? Vamos a ver la X a lo largo de la parte inferior es tiempo, y este es el movimiento. Entonces si hago esto, que es Es in está sucediendo es con el tiempo, digamos a la mitad del tiempo aquí que está permitido, que es medio segundo, vamos a hacerlo un segundo Simplemente haz masa fácil para que el tiempo aquí 0 segundos, eso sea cero, y eso sea 1 segundo. Entonces lo que verás es a la mitad del tiempo, se hace muy poco movimiento. ¿Lo ves? Este es el movimiento desde donde lo iniciamos hasta aquí. Entonces si trazamos una pequeña línea aquí, subimos aquí la mitad de mi segundo, se hace muy poco del movimiento real. Entonces tiene que hacerlo todo al final. Entonces esta última mitad del segundo, mueve un trozo enorme Por eso se llama facilidad de entrada. Va a ir lento lento lento así que f. vamos a darle un pequeño adelanto. Es útil Bien. A ver, súper lento al principio, súper rápido al final. Lo contrario a eso es la salida de E. Cambié a Ease para que luego pueda mostrarte bezier personalizado Es justo lo contrario. Si lo extiendo solo para acentuarlo un poco más, después de medio segundo, si vas aquí arriba, mira y trata de encontrarlo donde se encuentra, se ve que está casi terminado a medio El resto del segundo va súper lento porque es como, tengo medio segundo para hacer esta última parte del movimiento. Sentido. Dan agitando su ratón alrededor. Si no lo sabes, muévelos por ahí, previsualizarlos. Obtendrás un sentido del movimiento del tiempo. Se ve muy bien. En realidad puedes hacer doble clic en estas cosas y se van. Lo que se ve muy bien es esta curva S. Este de aquí, quizás lo conozcas de otros programas. Utilizamos mucho en Photoshop y todo tipo de edición fotográfica para las curvas. Eso se ve bien. Entonces es solo escoger el momento adecuado. Simplemente puedes arrastrar esto. ¿Por qué no arrastra? Solía poder. Apuesto a que vas a poder hacerlo. Alguna razón la mía hoy en día no lo está haciendo. Entonces voy a bajar el mío a 750. Vamos a darle una oportunidad, vista previa, haga clic en él. Mira nuestras costumbres. Todo bien. Sigamos adelante con nuestra animación. Entonces. Esa es la flexibilización personalizada Puedes seguir adelante si eso es todo, pero si quieres andar por ahí, haremos un poco más de animación, y te mostraré cómo dibujé esto. Voy a hacer click en esto y voy al Comando D. Si accidentalmente golpeas Shift D cada vez que estés como, ¿Qué está pasando? ¿Ya has estado aquí? Estás en modo desarrollador. ¿Bien? Este es el modo de gran miedo. Cubriremos un poco más adelante, pero volvemos por aquí para diseñar. ¿Bien? Entonces comando o Control D a du que quiero hacer es cuando llegue a aquí, quiero que espere un poquito y luego se vaya a la distancia. Voy a hacer click en mi ticket, empezar a arrastrar, mantener la barra espaciadora y turno, se apaga Lo que podría hacer también es hacer clic en esto y apagar el contenido del clip. Todavía se va, pero al menos lo puedo ver. Lo mismo con este de aquí. Es un poco duro. Estás como, ¿Dónde está? Sé que está por aquí en algún lugar donde pueda decir, apaguemos el contenido del clip. No cambia mi animación, solo hace que sea un poco más fácil trabajar con ella. Bien, entonces ahora necesito decir que vas a tener la opción nueve de prototipado Voy a ir, ir a aquí. Va a tratar de recordar cosas, pero no quiero que salga de barril. Quiero que se quede un rato. Después de un retraso de sí, ahora está funcionando. Mira. Ahora quiero escribir en él. Espera, déjame escribir. Todo bien. Está haciendo algunas cosas raras. Sí, ¿así que vamos a qué? Después de tanto tiempo. No importa. Ir a la página. Instantáneo. No, yo quería hacer Smart animate todavía, y voy a conseguir que lo deje como predeterminado Vamos a darle un adelanto primero. Así que vamos a subir. Haga clic a la vez. Después de un retraso, se va a despegar. Hagamos otra flexibilización personalizada. ¿Bien? Entonces, en vez de relajarme, voy a bajar a la costumbre. Eso arriba. Lo que quiero hacer es que empiece despacio. Eso significa que voy a hacer clic y arrastrar eso. Voy a empezar despacio. Con el tiempo, no va a estar haciendo mucho porque voy a arrastrarlo de esta manera. Lento para empezar y voy a conseguirlo también. En realidad, lo que quiero hacer es retroceder un poco. Se llama anticipación. Se inclina hacia atrás antes de que vaya hacia adelante. Todos lo hacemos cuando caminamos. Nadie empieza a caminar hacia adelante. Todos ponemos nuestro peso en la parte posterior de nuestros pies, como jorobado Es genial para tipo y boletos, y lo que podría hacer es simplemente ir así. Un poco de tiempo. No sé exactamente cuál debería ser esto. ¿Cuánto tiempo debería tomar? Así de largo. Vamos a darle una oportunidad. Sí, haga clic una vez. Va a esperar un poco, y luego va a ir hacia atrás. Bien, así que eso no funcionó. Volvamos a darle click, y hay mucho de esto. Nunca hago animaciones lo suficiente para ir, Oh, sé exactamente lo que tiene que ser. Bien. Vamos a dar click en este de aquí. Esa simplemente estaba demasiado nerviosa, así que voy a intentar estirarla. Entonces está tardando mucho en seguir adelante, entonces va a despegar, y probablemente necesite más tiempo en general. Pero de nuevo, ese tipo de cosas viene con experiencia. Serás terrible por mucho tiempo. Sin embargo, hazlo mejor. Haga clic una vez, espere, adelante, hacia atrás. Oh, fue casi esto. Es un poco bueno, ¿verdad? Es sólo un poco lento. Un poco más rápido. Bien, así que vamos a echar un vistazo. ¿Qué cambiaría aquí? El zoom de Pro. Tiene el dorso derecho. Creo que tal vez solo un tiempo un poco más rápido. No muy diferente porque quiero que empiece a hacer zoom A lo mejor eso en un poquito. Bien, así que vamos. La última vez. Esto es, sea lo que sea, te voy a dejar entonces suficiente. No tiene razón. Lo vamos a dejar porque puedes meterse con eso por años. Lo último que voy a hacer es ir a esto y apagar el contenido del clip bajo diseño, recuerda, Opción o Alt ocho. Volver al diseño. Voy a decir contenido de clip solo porque él está en el camino por allá y yo lo voy a mover y esas cosas. Así que ahora puedo meter a este tipo. Yo sólo lo hice fuera de la pantalla. Lo que quiero de este es que quiero decir Opción o Alt nueve. Voy a decir que vas a aquí, y yo solo voy a hacer nunca ver un trabajo bezier personalizado cuando haces una disolución porque yo solo quería disolverlo Puedes jugar con el Besier personalizado todo lo que quieras, o incluso jugar con estos Simplemente no se dan cuenta de ellos. Lo que sea que escojas dentro y fuera, simplemente no lo notas. lo he dicho 1 millón de veces. Es verdad. Tú de esa manera, ¿ le puse un temporizador? No forma de hacer clic. El valor por defecto fue al hacer clic. Voy a decir que no estás de barril. Recuerda, está de barril si estás usando un dispositivo móvil y lo sabe, es al hacer clic si está usando algo que no sea un móvil, claramente un teléfono móvil hace lo mismo. Voy a decir que después de retraso de, probablemente voy a bajar a cero. No se puede tener cero en realidad solo punto solo puede tener un milisegundo. Todo bien. Vamos. Vista previa míranos. Hicimos algunas cosas con flexibilización personalizada. Ahora, construyamos un boleto muy rápido. En realidad, la única cosa para recordarte, si algo no está funcionando, hablamos de ello al principio del fin, pero si hice este número tres, e hice exactamente la misma animación, mira como una vez. Simplemente ignoro toda mi animación porque no puede unirlos y no sabe qué hacer porque esto no es lo mismo que esto Va, bueno, no tienes adónde ir y simplemente apareces mágicamente el grupo tres Sólo voy a conseguir que te desvanezcas por defecto. Si tienes cosas que se desvanecen en lugar de moverse, es nombrar pollo Generalmente siempre es el problema. Sólo otro problema es que esto podría terminar, f arrastrarlo ahora, todavía está dentro de él. Pero si lo arrastro, sabemos que a pesar de que pensamos que podría estar tratando de subir ahí, está fuera de mi animación para encuadrar. Sólo está pasando el rato ahí solo. Solo necesitas asegurarte de que cuando los estés arrastrando, digamos esto, estés manteniendo pulsada esa tecla de la barra espaciadora mientras la arrastras para que no salga del marco, aunque se vea así Confundir a la gente, Dan. ¿Cómo construí esto? ¿Bien? Quiero mostrarte esto porque ahora todos están en el curso de lo esencial. Entonces voy a comenzar con un rectángulo. Bien, voy a sacar esto. Voy a volver a cambiar al modo de diseño, que es opción o Alt ocho, ¿bien? Voy a darle un color de relleno para mis estilos. Hagamos uno de diferente color. 500. Puedes seguir adelante. Ahora solo estoy diseñando esto. Quiero el Oki para el círculo, mantenga turno para obtener un círculo perfecto. No me importa de qué color sea. Yo voy a hacer. Hagamos dos por éste, porque somos emocionantes. 12 agarra otro por aquí. Bien, vamos a usar las herramientas de dibujar. ¿Alguien recuerda cómo usar esos círculos para cortarlo? Es complicado. Tenemos que pasar a la herramienta de dibujo. Estamos en la herramienta de dibujo, y aún así no existe la opción aquí. Siempre quiero ir hasta que esté como, ¿Cómo es el Cómo se llama? Constructor de Formas. Esa es la herramienta. Entonces con el seleccionado, como Where's the shape Builder pensé que estaba aquí. Tienes que aplanarlo primero, luego aparece el Creador de formas Es MK. M si, K. Oh, ya lo sé. Estás como, todavía no ahí abajo. He aplastado esto en un vector. Eso es lo que hice cuando la aplané. En el momento, hay un montón de capas diferentes. Dije aplanar en un solo vector. Smush Es un vector. Todavía no está ahí. Si haces doble clic en él para entrar, haz triple clic en él para entrar, estás dentro de ese vector y te dan la herramienta que queremos. El Constructor de Formas. A menudo lo que hago es aplanarlo, luego simplemente le pego al MK Quiero deshacerme de las cosas. Para deshacerme, si quiero agregar estos, arrastre a través. Si quiero eliminarlos, mantengo pulsada la opción KoaCoh KPC Sólo estoy arrastrando a través de ellos. También puedes hacer clic en ellos. Hay una fila ahí dentro de la que quiero deshacerme. Entonces ese es mi boleto. La estrella es fácil. La línea. En realidad, la estrella solo para que sepas, está debajo de la estrella. ¿Bien? Arrástralo hacia afuera. Sujeta Shift, sosteniendo turno, y voy a estilizar el mío Bien. Y quiero la línea punteada. Voy a usar la llave Al para la herramienta de línea. Voy a dibujar una línea hacia abajo, mantener turno, así que va estricto. Voy a asegurarme de que el peso esté arriba. Voy a arrastrarlo hasta algo que me guste. Ahora, ¿la línea punteada se esconde bajo perfil de ancho? No, estas líneas punteadas, sí. Entonces esta pequeña configuración, se puede decir estilo. Quiero que me desplome. ¿Qué tipo de apuesto queremos? A mí me gusta el redondeado, ¿de acuerdo? Sin tapa. ¿Bien? Normalmente se llama. A cuál se llama, no los llaman en este. Ilustrados los llaman pero gorras, que me encanta el nombre de. Estas son solo gorras redondeadas. Porque tengo 12 años, vamos a hacer la ronda de dash cap. El tuyo podría estar un poco raro. Tienes que jugar con los guiones y las brechas. Los guiones para mí necesitan ser más pequeños, no 23, tres, y la brecha, quiero ser diez Simplemente juegas con las tallas. Consíguela como quieras. Bien, esas líneas. Son bastante geniales, ¿eh? Lo mismo. Línea dos, dibuja una línea. Bien, voy a empacar con, y voy a ir a este perfil de ancho. Deja caer eso. Esa no. Vamos a volver a ir a la configuración, y vamos a ir a no Perfil de ancho, vamos a ir a pinceles. Yendo a ir a básico, vamos a ir a cepillar. Y voy a decir, me gusta ese cepillo. Los pinceles están aquí. Los que encontré, no puedo recordar cuál usé. Por favor, sostén esa ahí, creo. Ahora bien, lo que puedes hacer es que odio no lo sé, cuando los trazos son todos iguales. Paso mucho tiempo. Voy a duplicar eso unas cuantas veces. Paso un poco de tiempo yendo, Bien, quiero que tú puedas darle la vuelta a la dirección, para que esa sea diferente Puedo hacer este un poco más largo, agarrar el puntito ahí, arrastrar más tiempo. ¿Bien? Este de aquí va a ser volteado Va a ser un poco así y va a ser un pequeñito, a un grado de descuento. No lo sé. Paso mucho tiempo haciendo cosas que a nadie le importan. Bien. Voy a conseguir un corte de salto ahí porque paso años consiguiendo el ángulo correcto en eso. Entonces sí, tengo algo de aleatoriedad. Ahí vas. Ese es mi boleto. Al igual que el primero más. Pero en fin, ¿para qué vinimos aquí, Dan? Vinimos aquí para una flexibilización personalizada. Eso es fácil. Quería saltar aquí y recordarle a la gente algunas de las peculiares de romper tus animaciones porque todos tienen diferentes niveles de habilidades con sus animaciones actuales de creación de prototipos y mostrarte cómo construir una tarjeta Una muy fea. Te veré en el siguiente video. 39. Proyecto de clase 10: mira las animaciones: Todo bien. Es proyecto de clase. Quieres que hagas tu propia animación de checkout. te ha pedido que crees una animación de éxito después de que alguien compra un boleto Ponen los datos de la tarjeta de crédito, golpean enviar, eso de ahí es lo que quiero que hagas. Hicimos algo similar en el último video. Sólo me burlé de uno. ¿Esta está aquí? Alguien compró un boleto y aparece , y ahí tienes. Quiero que hagas el tuyo. Realmente lo que estamos haciendo aquí es que quiero que practiques con cust así que haz tres o más fotogramas para tu animación Puede ser simple, puede ser avanzado. Puedes tener marcas de verificación y animación yendo a todas partes hasta ti. Una vez que hayas terminado, quiero que compartas un video de tu animación y subas la duración de los proyectos de clase. Alternativamente, si eres los videos solo me están matando, solo puedes hacer una captura de pantalla en modo prototipo para que pueda ver todos tus cables. Pero me encantaría ver el video. Comparte en redes sociales si también haces el video. Etiquetame. Me encanta ver cómo son las primeras animaciones de éxito de todos . Pueden ser muy graves. No tienen que estarlo aunque. Disfruta del proyecto de clase. Asegúrate de jugar con la flexibilización personalizada. A menudo puedes hacer que se vea peor, pero está bien. Estamos jugando con ese escenario. Después de eso, te voy a ver en el siguiente video. 40. Cómo copiar y pegar interacciones en Figma: Hola ahí. En este video, vamos a ver cómo copiar y pegar interacciones. Pasas mucho tiempo haciéndolas. El atajo es simplemente coger la aguja copiarlo y pegarlo. Hay algunas pequeñas cosas que tenemos que arreglar , así que las resolveremos juntos. Pero viniste aquí solo por eso, es todo lo que haces. Seleccionarlos, copiarlos y pegarlos. Pero entremos en un poco más de detalle piadoso. Bien, entonces esto funcionará con cualquier animación o interacción. Lo que tengo es, déjame previsualizarlo. Es solo que esto pasa al siguiente. Lo que he hecho es que he pasado mucho tiempo trabajando con cosas como lucir mi propia facilidad personalizada ya personalizada facilidad y salida. He pasado de la animación. En lugar de instantánea o disolver o animar inteligente, lo estoy moviendo y movemos hacia adentro nos desplazamos hasta el fondo ahí Si pasas el cursor por encima de él, puedes verlo simplemente empuja un fotograma hacia abajo del siguiente Lo tienes viniendo de arriba así que he hecho mucho trabajo. Lo que quiero hacer es no tener que hacer eso por cada uno. Bien, lo que puedo hacer es que lo he hecho hay dos maneras. Puedo dar click en este cable aquí o fideo, y simplemente ir Comando o Control C, solo una copia antigua regular, y luego puedo decir, pegarlo funciona Yo lo deshago, se lo puedes hacer a todos estos. Y usted. Boom, lo tienes todo. Se ha hecho todo excepto una cosa mal. Lo que hicimos es si lo deshago todo y este de aquí tiene la interacción de decir que está haciendo todo esto, pero dice navegar a la animación cinco. No sé cómo conseguir que vaya a siguiente en lugar de cinco porque si lo pego en esto, este tipo vuelve a sí mismo porque tiene cinco años. Tengo que decir, en realidad, no a cinco. Ve a esa. Sin embargo, viene algo más, toda esa personalización, el movimiento, todo el tiempo que has hecho Lo mismo con este, pasta, sí hay que hacer un poco de A veces estos fideos obtienen fideos cruzados. Nunca quiero cruzar fideos Haga clic en el encabezado en la parte superior aquí, esté en modo prototipo. Recuerda, opción ocho, Altate. No, son las nueve. Fue una prueba. Puedo decir, en realidad, en vez de ir a cinco, vamos dos. ¿Cuál es la siguiente? Siete. Ahí vas. Ahora debería funcionar. Vamos. Oop. A, el ritmo. Esta noche es la noche. Es un poco lento. Algo es raro en eso de todos modos. Pero esa es la propina. Puedes hacerlo de otra manera. Yo solía hacerlo de esta manera. Yo sólo quiero mostrarte, digamos, quiero copiar todo de esto. A mí me gusta mostrarte estas dos formas solo porque algunas cosas son raras. No haces clic en esto porque lo abre. Todo lo que quieres hacer es hacer clic en esta pequeña área rara aquí, pop que está seleccionada. Yo sólo puedo ir a usar mi copia habitual, entonces puedo ir y decir, pegar, pero ir ahí. Realmente no importa. Esa es una buena y fácil. Copiar y pegar interacciones dentro de Figma. Eso es. Siguiente video. 41. Animación dentro de variantes en Figma: Uno. En este video, vamos a ver agregar animación. En lugar de usar el método frame by frame que hemos hecho anteriormente y que mucha gente lo hace, lo vamos a hacer así. De hecho, puedes animar entre variantes y obtener lo mismo Para que la animación sustituya a todo eso. Llegamos a usarlo igual que unas pequeñas unidades. Mira a este pequeño de aquí, vamos a adelantarlo. Todo está pasando dentro de ese tipo. Genial e. Oh, hasta un botón. Haremos un botón que incluso se mueva. Se puede ver lo mismo. solo un componente establece dos variantes ahí dentro. Uno superior que no puedes ver en el inferior uno que puedas y déjate impresionar por la animación muy promedio. Tanto el botón, botón botón. Muy bien, podría ser mejor. Pero es genial y es muy útil, arregla nuestras animaciones. No más mil fotogramas para animar cosas simples. Todo bien. Vamos a saltar. Bien, entonces estoy en modo prototipo, opción o Alt nueve. Puedes ver que he hecho esto antes donde hemos hecho este tipo de animación paso a paso fotograma a fotograma. Mucha gente hace esto, tú puedes hacerlo, pero obviamente, es desordenado, ¿verdad Así que vamos a darle una rápida vista previa para ver qué hemos hecho. Hace esto. Vamos a hacer algo ligeramente diferente. Vamos a conseguir que el texto solo aparezca. Pero en lugar de tener que saltar a través de cuadros, lo haremos todo en unas variantes. Empecemos por W si lo hacemos por aquí. Voy a volver al diseño. Opción o Alt ocho. Voy a ir por aquí. Y vamos a convertirlo en una opción componente K o Control Alt K. Es un componente. Quiero variantes. Entonces voy a hacer uno, dos, tres, cuatro. Eso no funcionó. Sólo se puede hacer clic una vez. Entonces me voy a ir. En qué hice clic en aplastar manera en todos los botones Todo bien. Volvamos, deshagamos, deshagamos y hagamos. Variantes de cabeza, no hagas clic en otra cosa. Voy a duplicar esto, le hice clic. Tengo cuatro palabras. Esta noche es la noche. Sólo voy a cambiar el texto y los colores. Ahí esperas, pasaremos al modo velocidad. Eso es todo lo que he hecho. Lo siguiente que quiero hacer es que en realidad puedo usar prototipo como lo hicimos aquí. Recuerda, hicimos clic en esto, dijimos modo prototipo, opcional lt nueve y arrastramos fideos entre De hecho, puedes hacerlo entre variantes dentro de este conjunto de componentes. Se puede decir, en realidad, asegúrate de que en modo prototipo, para hacer zoom un poco. De hecho puedes arrastrar un fideo de aquí a este tipo. Yo quiero hacer no es de barril, quiero decir después de un retraso de algunos segundos. Quería cambiar a esta otras variantes, que se llama Variante dos. Vamos a conseguir que se relaje. No estoy muy preocupado, ¿cuánto tiempo va a tomar? No lo sé. Por alguna razón, ya no puedo hacer click en el mío. Es un bicho. Si rease ese producto vuelve a la Pero de todos modos, solo para que sepas, a veces figma es un poco raro. Tengo muchas ganas de teclearlo. Pero de todos modos, ya tenemos eso. Entonces creo que eso va a funcionar. Después de un retraso de tiempo, cambia a este anime inteligente. De hecho, podríamos conseguir que esto se disuelva si quisiéramos. No es un problema. Muy bien, vamos a darle a éste para que se vaya Rastrear a este. No lo recordaba todo. Recordó algo de ello, pero ahora quiere hacerlo de barril. Voy a decir después de un retraso de algo aquí abajo y de verdad queremos teclearlo. Todo lo demás es perfecto. Esto me da una buena excusa para usar el copy and paste. Voy a dar click en el fideo, copiarlo, ir a éste, ir a pegar Va a intentar volver a sí mismo, pero va a ir ahí después retraso, todo eso debería ser bueno. En parte ahí. Es como animar entre fotogramas Simplemente lo estamos haciendo aquí dentro de este conjunto de componentes entre variantes. Muchas palabras? Lo que voy a hacer es crear un nuevo marco para esto. En realidad, voy a hacer que sea iPhone seis. Eteen. Puedes venir aquí lo desordenado que es nuestro uppud Escojamos un color de fondo. Opción ocho, Alt ocho, volver al diseño, y voy a elegir en realidad uno en estos y quiero uno de los colores oscuros. 900 de cualquiera de estos realmente. Vamos a agarrar una instancia de esto, arrastrela. Estoy aguantando la opción CaCL PC o puedes copiarla y pegarla. Ahora, lo genial de ello, esto tiene la animación incorporada. Esto puede ir en mi página de componentes. No necesito esa basura. Demostremos que funciona primero. Vamos a ti y digamos Shift barra espaciadora para la vista previa. Esta noche es la noche. Tiene que ser más rápido, pero entiendes la idea. Lo que es realmente genial de esto es que en realidad podemos hacer más que echarle un vistazo. A lo que nos hemos limitado, especialmente en este de aquí, el tiempo entre páginas es lo mismo. Si quiero que aparezca algo digamos, hagámoslo en éste para darte una instancia. Sólo voy a usar un marco en blanco con un color en tu color. Siempre y cuando sea alguna variación de, lo tienes. Yo tengo esto. Necesito que sea copia, quiero que esté en todos estos marcos. Pero quiero que el momento sea diferente. Digamos que quiero que empiece a venir de este lado, vaya al medio y luego diríjase hacia abajo y vuelva a subir. Tengo que hacer cualquier momento que haya hecho para el boleto. Voy a cambiar al modo prototipo. Lo que sea que haya decidido sobre esto afectará a cada cosa de esa página. Vamos a darle un adelanto. Haga clic una vez que se mueva. ¿Ves que son exactamente lo mismo? ¿Por qué el último no fue a ninguna parte? Este de aquí, se llama frame 22. ¿Cuál es esta única llamada? ¿Marco 22? Es porque la transición entre aquí es un desvanecido. Todo tiene sentido. Pero te das la idea, el momento es el mismo. Ahí es donde esto se vuelve útil. Vamos a deshacer eso. Déjame hacer más por ejemplo. Tengo esta configuración abajo. He hecho antecedentes de IA usando cosas de computadora de los 80. No te preocupes por el texto. Veamos el botón. Si iba a hacer esto, voy a previsualizarlo, Shift Spacebar ¿Puedes ver que aparece el botón y aparece? Así es como lo construyes, ¿verdad? dos fotogramas separados y animas entre ellos. Pero digamos que quieres que baje el texto , pero en un momento diferente, no puedes porque el texto tiene que hacer exactamente lo mismo que el botón. Entonces, la forma de sortear eso es construir exactamente como lo hicimos antes, construir todo en su propia pequeña animación. Quiero hacer otro solo para algo así, no sé, dejarlo claro. porque voy a borrar eso en realidad, y vamos a traer mis activos. Tengo crédito en este archivo bajo componentes. Mientras que M no le dio nombre, ¿no? ¿Cómo se llama? No puedo recordar. ¿Qué estamos haciendo? ¿Dónde está? Aquí está aquí. Vamos a copiar eso. Vuelva a cambiar al modo de diseño. Oh, no está en la página de componentes. Por eso no lo pude encontrar. Ahí está. Pasando el rato ahí fuera. Es de todos modos. Entonces tengo esto aquí, Shift Spacef para una vista previa Está haciendo su propia pequeña animación, y lo genial de ello es que puedo decir que puedes hacer lo tuyo. Construyamos lo suyo. Un par de cosas que quiero hacer en este caso es que no quiero que sea Auto out porque quiero que el texto se mueva en el texto está atascado en el medio como un autolout voy a miramos esto antes dijimos eliminar todos los autolouts. Impresionante. Tengo un botón con algunos textos sobre él. Nada son autow. que quiero hacer es seleccionar ambos. Vamos a convertirlo en un componente, comando shift, command shift, K, control shift K. No, eso abre la opción de comando K o Control Alt K. Ahora es componente. Excelente. Vamos a agregar una variable. En esta variable inferior, voy a agarrar los componentes y simplemente hacerlo un poco más grande. Tengo algo de espacio. Quiero que el texto dentro de aquí se mueva un poco hacia abajo. Recuerda que no fuera. Yo solo mantengo presionada la barra espaciadora para que se mueva hacia abajo porque lo que quiero , oh, quiero al revés. Entonces quiero empezar con eso apagado. Voy a decir que vienes aquí abajo. Solo puedes usar tus rakeys si quieres. Entonces primero, va a empezar abajo, luego va a aparecer. Vamos a darle una oportunidad a esto, cambiar al modo prototipo, opción nueve, Alt, nueve. Estás harto de eso. Vamos a arrastrar eso a través. Queremos decir de barril, no, justo después de algún retraso de no demora, cambie a éste. Vamos a animarlo de forma inteligente. Perfecto. Lo conseguimos para facilitar. Eso debería funcionar. Bien. Esto debería ir a nuestra página de componentes. Yo sólo la voy a poner ahí, vamos a agarrar una versión de ella. Bien. Ahora lo genial esto es que están haciendo cosas diferentes. Esto es hacer qué? Se desvanecen. Éste está haciendo algún movimiento en diferentes momentos. Aquí para ir, turno, barra espaciadora Todos empiezan al mismo tiempo Pero ya ves que esto sigue yendo. Este de aquí está terminado. Lo que yo también podría hacer, es este de aquí, podría después de un retraso mayor, podría decir retraso. Hagamos un retraso de cuánto tiempo lleva eso? Podríamos acercarlo a cuando esa cosa esté terminada. Ya puedes hacer todas estas animaciones personalizadas. Solo necesitas atar las animaciones en una variante. Hazlos por aquí, luego apílalos en una página. Se puede ver lo mucho más agradable que es. Sólo una página y tus animaciones están separadas. Vamos a darle un adelanto. Aún demasiado tiempo, pero te das la idea. Puedes empezar a construir estas cosas y vamos una. Vamos por demasiado tiempo ahora. Y luego espera Oh. Espero que haya resultado un punto porque no es muy emocionante. Pero ojalá se te ocurra la idea. Es complicado, me acabo de acostumbrar a hacerlo de esta manera. Pero se puede ver que para hacer todo esto tendría que tener este plus que a partir de después. En este caso, todo lo que tenemos todo, toda mi parte de animación es esta. Tú baja. Vaya, vaya, vaya. Entonces eso es todo lo que necesitan en lugar de un montón de marcos. Si eres como, demasiado raro, voy a hacer mil fotogramas, hacer mil fotogramas. Eso está bien. Otra vez, supongo que es el curso avanzado, queremos meternos en cosas avanzadas. Encontrarás cosas en la comunidad, ¿está hecho esto? Ahora, puedes tener animaciones dentro de aquí. Tienes que cambiar al modo prototipo. De lo contrario nunca los verás. Lo último, volver al modo de diseño. Opción ocho, ocho viejo. Hagamos que esto cambie de tamaño solo para que esté un poco más ordenado Eso es. Te veré el siguiente video. 42. Proyecto de clase 11: Animación variante: Uno, es momento de que lo pruebes. Es el proyecto de clase número 11. Es animación Variant, quiero que construyas un botón. Puedes ser exactamente como acabo de hacer. Acabamos de hacer juntos, o puedes construir el tuyo propio. Es aquí donde pasa algo con el botón. Ahí está. Mi invento cargado. Puedes conseguir que el tuyo haga lo que quieras. Pero quiero asegurarme de que solo estás practicando usando la animación dentro de una variante. Recuerde, el conjunto de componentes tiene variantes dentro de él. Quiero que hagas la animación entre estos dos. Solo recuerda cuando lo estés haciendo, cambia al modo prototipo. Me encantaría ver animación o un video tuyo. Si quieres hacer el tipo también, totalmente hazlo hasta ti. En serio, lo que quiero de la tutoria es que construyas tu propia animación variante Así que echa un vistazo a los requisitos. Entonces te han pedido que hagas un botón animado, solo tienes que usar las variantes dentro de tu componente enviado para hacer la animación. Comparte un video, súbelo a los proyectos de clase, y si no puedes hacer videos, no te preocupes, haz una captura de pantalla mostrando tus cables. Realmente no puedo comprobarlo, pero me encantaría verlo. Si haces la versión de video, compártela en redes sociales, asegúrate de etiquetarme. Me encantaría ver lo que estás haciendo. Y si alguien pregunta, estás haciendo esa clase súper increíble con Dan, trae tu propio portátil. Deberías echarle un vistazo. Algo así. Bien, disfruta del proyecto de clase. Te veré en el siguiente video. 43. Texto de Houdini: ¿cómo crear una animación de máscara de texto en Figma?: Hola a todos. En este video, vamos a hacer esto. Houdini Texto. Mira el viene de la nada. Vamos a hacer la animación. Básicamente va a depender de dos cosas principales. Vamos a estar haciendo animación dentro de una variante, que acabamos de hacer, y vamos a agregarle una máscara porque somos increíbles y está avanzada. Si encuentras este complicado, esto es algo así, Oh, Dios mío, este es un campamento realmente complicado. Entiendo totalmente. Estamos combinando algunas cosas. Algunos de ustedes lo conseguirán, algunos de ustedes lo tomarán. Llegarás ahí. Bien, vamos a saltar. Bien. Sólo empieza. Tenemos dos pedacitos de texto. Solo son texto viejo y plano. Están en cajas separadas porque quiero animarlas por separado. Pero pueden ser cualquier tipo de texto o fuente. Y lo siguiente que voy a hacer es que necesito enmascararlos. Así que tenemos que agarrar algo con lo que enmascararlos. Voy a usar una herramienta rectangular. Podrías usar un marco. Puedes usar todo tipo de formas. Voy a usar la herramienta rectángulo. Yo lo encubro. Necesitas asegurarte de que cubra el texto. Y vamos a necesitar dos de ellos. Entonces voy a duplicar ese y usarlo para cubrirlo. Y aquí es donde el comando o control Y es útil. A lo mejor esa es la vista de esquema. ¿Bien? Podemos tipo de cheque para ver es completamente. Lo cual es increíble. A continuación, el texto tiene que estar en la parte superior. Voy a agarrarme a esa y a esa. Estoy sosteniendo Shift para conectarlos a ambos y voy a usar mi corchete solo para empujarlo hacia atrás. O puede arrastrarlos en el panel de capas. Solo necesitas asegurarte de que tu texto esté encima de tu rectángulo. Bien, entonces necesito estos dos ahora. Voy a arrastrar una caja alrededor de ambos . Necesito que ambos sean seleccionados. Vamos a convertirlos en una máscara. Había una opción de comando de acceso directo. No, control de mando. Nunca lo uso. No sé cómo está eso en mi cerebro. Es más fácil solo estar en el diseño y para ir, hay una opción aquí arriba, usar máscara o puedes hacer clic derecho en ella. Está en una PC, esa es una buena pregunta. Tendrás que subir hasta arriba ahí y comprobarlo. Lo siento. O simplemente ve aquí y haz clic derecho en él y dice, usa una máscara y verás ahí en una PC, cuál es el atajo. No puedo recordar. Bien, entonces la máscara. Lo que ha pasado ahora no es nada realmente, excepto como grupo de máscaras. ¿Puedes ver? Hay un grupo de máscaras. Hay texto dentro de él, y ahí está el rectángulo que da la máscara. Así es como se configuran estos. Lo que puedes hacer es agarrarte a Viva la. Puedes escribir lo que quieras, obviamente, y puedes mover el texto hacia abajo. Se puede ver que es máscara. Bien. Lo que sucede a menudo en clase es que algunas personas agarran accidentalmente a todo el grupo, no el texto por sí solo y tratan de moverlo hacia abajo. No funciona. Solo ve para asegurarte de hacer clic en fiebre, sea cual sea el texto y muévalo hacia abajo. La otra cosa es que puede saltar. Puede saltar de la máscara si la arrastras demasiado lejos. ¿Quién recuerda lo que mantienes? Te acuerdas, haz seleccionado el texto, empieza a arrastrar y luego mantén pulsado, di lejos Entonces puedes moverlo hacia abajo y se quedará dentro de la máscara, pero se ocultará. Recuerda, control commodo, ¿por qué? No se puede ver en ese punto de vista. Buen trabajo. No importa. Vamos a deshacerlo de todas formas. Tenemos nuestras máscaras en marcha, máscara Grupo uno, máscara grupo dos. El texto está en él. Ahora lo que vamos a hacer es simplemente agarrarlos a los dos y empezar de nuevo por aquí. Es más fácil. Porque tengo tres etapas. Tiene que desaparecer por completo. Entonces Viva necesita aparecer, y luego Techno. Hay tres niveles. Podrías simplemente hacerlo con un texto Houdini. No sé por qué en este curso, decidí hacerlo con dos B es el curso avanzado. Lo estamos haciendo por adelantado. Entonces hagámoslo componente. Bien, Comando Mayús K, Control Shift K, eso abre la entrada de imagen. Combine la opción K. Lo hago todo el día. Sí, Combina la opción K en una Mac. Controla lk en una PC. Simplemente colick el botón ahí arriba. Es un componente. Vamos a darle un nombre amargo. Bien, llamemos a éste. Animación de título. Uno, y lo vamos a duplicar algunas veces. Necesitamos variantes. Vamos a decir una variante, y luego vamos a decir U, duplicado, que es Comando o Control D con tres variantes. Este de aquí necesita desaparecer por completo. Aquí es donde vamos a hacer doble clic para entrar o entrar dentro de tu grupo de máscaras y dar clic en Viva. Entonces quieres llegar a este nivel como lo hicimos antes y luego arrastrarlo hacia abajo, arrastrarlo hacia abajo. Puedes usar tus rastrillos. Mantenga el turno en los rastrillos. Eso también funciona. O haga doble clic para agarrar la palabra techno y arrástrala hacia abajo manteniendo presionada la tecla Spacebkey Yo también voy a cambiar, así que sigue recto. Bien, entonces esta, la primera variante no se puede ver, y luego la siguiente, solo quiero que aparezca Viva la. El techno necesita desaparecer. Entonces voy a hacer clic en, seguir haciendo doble clic hasta que encuentre mi texto, arrástralo hacia abajo. Encuentro los rastrillos mucho más fáciles. Bien, no se puede ver. Ahora puedo ver esta primera línea. Puedo verlos a los dos. Consigamos que se animen juntos. Vamos a ir a la opción nueve o simplemente ir a tu prototipo aquí arriba. Voy a arrastrar una caja de ti ve ahí. Lo que me gustaría que hicieras es de barril. No, quiero que digas después un poco de retraso de cuanto tiempo, un milisegundo, de inmediato, me gustaría que lo cambiaras a variante a. Fresco. Usemos Smart animate si no está configurado a eso ya, lo que voy a usar facilidad hacia atrás solo porque no se puede ver al principio Se va a relajar y hacer un poquito de lata. Acerca de entonces, no lo sé. Vamos a darle una prueba. Haz lo mismo por esto. Voy a decir que tienes la misma animación. Trae algo de eso a través. Después de la demora, ¿Zuk ha hecho alguna de las otras? Se acuerda de todas estas cosas. Eso es todo bueno. Vamos a darle un torbellino. Todo bien. Todavía no vamos a probar los componentes reales. Vamos a agarrar una instancia de nuestro componente. El problema con ello es que está en blanco. Al mostrarme mi primera instancia, lo cual es un poco doloroso. Pero de todos modos, tenemos la idea. Lo tengo en alguna parte de aquí. Vamos a darle una selección al marco. Vamos a la barra espaciadora Schiff para hacer un pequeño adelanto. Oh, mírennos. En una repetición. Estamos animando genios Impresionante. A mí me encanta. ¿Bien? Entonces, si quieres hacer textos como este, lo importante es, recuerda, es asegurarte de que estás arrastrando el texto, no el grupo de enmascaramiento, eso causa problemas a las personas La otra cosa es que si realmente miras esto, tratemos con este de aquí. Entonces si quiero esta animación, vamos a ir estas variantes, y va a después del retraso, va a cambiar. Está usando Ease hacia fuera y hacia atrás. Si voy a mi propio Bezier personalizado, ya ves, así es como se ve Ease out. Va a ir a calmarse de esta manera y luego repasar donde debería y luego volver. Si realmente quieres sacar el máximo de eso, funcionará. Vamos a darle un adelanto. Te voy a mostrar lo que pasa. Desplazamiento espaciadorbh barra espaciadora. ¿Ves que subió? Vamos a repetirlo. Veamos la palabra techno. Subió y se perdió. Es sólo porque nuestra máscara no es lo suficientemente grande. Si entro en esto y vamos a Comando, ¿por qué? Lo que pasa es que sube y ahí está mi máscara. Lo ves ahí, dónde está mi máscara, el rectángulo. Ahí va y sube y por encima de eso. Solo vas a asegurarte de que en realidad es mucho más grande de lo que necesita ser. Acabo de tener espacio para que el techno suba. Un poco confuso. Dale una vista previa. Si ya te quedas impresionado por este, está bien. Esta es una complicada. Máscaras más flexibilización personalizada. Estamos haciendo animaciones dentro variantes. Estás haciendo cosas de núcleo duro. Si tu mente está un poco trastornada, está bien. Pero, ¿ves que el techno tenía espacio para subir a esa máscara ahora El tipo de máscara se engancha aquí, y si quieres ir más allá, tienes que hacer que la máscara sea más alta y más alta y. Entiendes la idea. Bien, amiguitos. Nosotros lo hicimos. ¿A quién le mandaste un mensaje de texto? Bien, eso es todo. Te veré en el siguiente video. 44. Animación primaveral y superposiciones en Figma: Hola a todos. En este video, vamos a hacer esto. Listo, listo Bio. Bien, vamos a aprender un par de cosas. Vamos a hacer un recordatorio de lo que es una superposición del curso Essentials, que es un buen recordatorio. Pero también, ¿en serio? Chico. Bien, vamos a hacer que el pequeño bache de navegación sea todo flexible. Se llama flexibilización de primavera, y hagámoslo ahora dentro de Figma. Bueno, quiero volver a hacer el ruido. Una vez más. Boo. Bien, hagámoslo. Bien, para empezar. Puedes comenzar con una página nueva y no tienes que usar tu siesta. Cualquier cosa puede ser hinchable o saltada. Bien entonces sólo voy a volver al principio aquí y voy a ponérselo en esto. Voy a usar mi Nav que hice antes. Así que voy a ir a mi panel de Activos, y voy a encontrar los componentes, y ahí está mi Bien, así que voy a usar esto. Va a comenzar desde la pantalla porque vamos a estar haciendo una superposición. Lo que voy a decir es esta página aquí, estoy en prototipo. Voy a decir que vaya a esta página. Quiero asegurarme después de un retraso de ¿cuánto tiempo? No lo sé, pero quiero un poco de retraso. 0.3 de segundo, me gustaría ir a esto, pero no quiero que no navegue hasta. Quiero que sea superposición abierta. Va a abrir una superposición. ¿Qué va a abrir? Va a abrir este fondo de mi Nav. ¿Nos centramos? No, quiero estar en la parte inferior del centro. A mí me gustaría que no fuera instantánea. Quiero mudarme desde abajo. Bien, y aquí es donde están los manantiales. Entonces estos son los que hemos estado usando hasta ahora. La primavera son estas que están en la parte inferior de aquí. También puedes hacer uno personalizado. Vamos a echarle un vistazo. Ya ves, es solo un arco de aspecto muy diferente al que teníamos con algunos de estos beziers personalizados, ¿ La primavera pasa por donde tiene que estar y como que viene hacia atrás hasta que finalmente se detiene. Se puede echar un vistazo. Bouncy es el más obvio, ¿de acuerdo? Se puede ver aquí abajo. Es muy chulo. Se puede jugar con los demás, muy similares, más sutiles. Bien, haz que funcione, Dan. ¿De verdad funciona? Vamos a darle un click a este tipo, darle una vista previa, cambiar la barra espaciadora y Boon A mí me encanta. Arthur reinicia o reproduce Ah. Oye, tus propios efectos de sonido, me gusta. Veamos rápidamente solo el escenario. Voy a ver prototipo. Opción nueve, 09. Voy a hacer click sobre esto, arrástralo hacia arriba. Bouncy es el más obvio. Todos estos son solo menos de eso. No son diferentes. Son solo que esto es realmente extremo. Estos son sólo un poco sutiles. Lo que podemos hacer es primavera personalizada y como hicimos con la otra flexibilización personalizada, lo que encontrarás es que puedes arrastrar estas cosas por ahí Sin embargo, los tiempos es más fácil, solo jugar con la rigidez, la amortiguación y la masa La misa es lo pesada que se siente esta cosa. Si cambia el tiempo. Si digo que quiero que la masa esté arriba, voy a hacer clic en mantener y arrastrarla de esa manera. No me deja arrastrar y mantener mi tecla de opción o si lo hace. Verás, lo estoy arrastrando. Ahora son 6 segundos u 8 segundos, puedes ver cuánto más pesado se siente esta cosa. Porque es más pesado. Con un bajo, es demasiado ligero. Pongámoslo a uno. Bien. Y eso es un poco agradable. Así que solo juega con eso, sabe que podrías terminar rompiendo esto. Si lo subo a cuatro, ¿de acuerdo? Es un poco pesado. Echemos un vistazo a la amortiguación. La amortiguación es si no tengo amortiguación, vamos. Es solo ir a estar realmente rebotando. ¿Qué es esto? Salta, salta, junk hun. Puede que nunca deje de mirar Está jugando por, como, un minuto, 4 minutos. Nunca va a dejar de rebotar. ¿Bien? Así que eso va a funcionar. Vamos a esto, pero va a ser uno, interesante, no muy útil. Animación telefónica. Lo romperás. Y cuando lo hagas, tienes que entrar aquí y decir, en realidad, vas a volver a bajar a 1 segundo. 1 segundo. Amortiguación de nuevo a lo que era? Nadie. No puedo recordar cuál era el valor por defecto. En realidad, solo volvamos a hinchable y luego volvamos a la primavera personalizada y ya hemos restablecido. Rigidez. Hagamos una más. Miraré la rigidez y dejaré solo la amortiguación. Entonces, qué rígido es el resorte. Hagámoslo más rígido. Vamos a subir a 3 mil, ¿de acuerdo? Es pesado, pero tiene un resorte muy rígido. Bien, ya entiende la idea. Eso es una superposición y una superposición que tiene esta flexibilización de resorte aplicada a ella. Haz un juego con los demás gentil, rápido, hinchable, trabaja en tus efectos de sonido, Bo te veré en el siguiente video Adiós. 45. Proyecto de clase 12: animación de textos en Houdini: Todo bien. Quiero que hagas tu propia animación de texto Houdini No tiene que ser exactamente como el mío. Yo solo quiero escribir Houdini y usar máscaras, como hemos hecho en los tutoriales anteriores Quiero que uses la animación primaveral. Así que practica con esos y comparte un video si puedes. Si no, comparte una captura de pantalla y subirla a los proyectos de clase. Me encantaría verlo en las redes sociales, solo un recordatorio, no puedo llegar a todos los proyectos de todos. La única forma en que esto funciona es si subes el tuyo a los proyectos de clase, es echar un vistazo a otros dos y dejar un comentario. No hace falta que esté Bien. Pero solo algo a menudo lo que realmente funciona bien es un cumplido, algo que tal vez quieran probar a continuación, seguido de un cumplido Llámalo el sándwich de ****, pero probablemente haya un más llamarlo en realidad, no puedo pensar en otra palabra. Es un gran nombre para ello. ¿Bien? Así que empieza con algo que te guste de ello, algo que puedan probar. Y lo que encontrarás es que te conviertes en un diseñador amargado, pudiendo expresarte vía texto, y se reduce a la práctica. Entonces quiero que salgas y si subes uno, comentes el de otras dos personas. De esa manera conseguimos muchos comentarios marcha. Se llega a practicar. La gente llega a practicar criticando tu trabajo, sé respetuoso Hacer el sándwich. Todo bien. Diviértete haciendo el Texto Houdini. Es complicado. Avísame en los comentarios si te encuentras con problemas, si te encuentras con problemas, ojalá alguien lo haya resuelto en los comentarios. Todo bien. Te veré en el siguiente video una vez que hayas hecho el Texto Houdini. Todo bien. Adiós. 46. ¿Por qué la interacción al pulsar se muestra en gris o falta en Figma?: A Hola a todos. En este video, vamos a ver por qué a veces el on tap es grade out o on click is grade out, y también reiteraremos por qué a veces dice de barril y a veces dice al hacer clic. Sólo estoy diciendo en tap on click, lo mismo. Vamos a verlo con un poco más de detalle. Empecemos con el toque al hacer clic. Voy a agarrar uno de mis botones de mi biblioteca, y voy a cambiar al modo prototipo, Alt u Opción nueve, voy a decir, tú vas aquí. Voy a desplazarme hasta la parte superior dice de barril. O toque, vaya a esta página. Excelente. Agarro mi herramienta de marco y voy aquí y digo, quiero un bonito marco grande llamado MacBook ear Bien. Aún con el nombre iPhone 16. Ignorar eso. Es solo repetir lo que era aquí arriba, vamos a darle a scrab ese mismo botón, qué botón agarré y ahora de vuelta al modo prototipo Voy a decir, ve ahí cuando hagas clic. Echemos un vistazo. Se ha dicho de barril todavía. Estás como, eso no es un teléfono. Es un sitio web, debe estar en click. Lo que ha pasado es que si hago clic en el marco, y subo hasta aquí y digo la configuración del prototipo, se usa el documento uno, que es el iPhone 16. Puedo decir, en realidad esto es ahora SCQuscroll MacBook Air, que es un portátil, en el que hacemos clic Un clic en el botón, es exactamente lo mismo, pero se llama click. Este de aquí también está ahora en clic. Hemos cambiado el prototipo para este archivo sea ahora un portátil. Vamos a darle una vista previa y podemos ver, está previsualizada y rebotada en el uso de una computadora portátil, la MacBook aquí Hacen exactamente lo mismo. No importa. Si estás siguiendo al tutor de alguien y están como, ahora uso el grifo y tú estás como, no lo tengo. Tengo OnClick Lo mismo excepto bajo configuraciones de prototipo prototipado, en esta configuración de prototipo, se establece en o probablemente a veces se puede configurar en nada aquí o personalizado Voy a volver al iPhone algo u otro solo para que vuelva a ponerme en el grifo. El otro que quería mostrarte de barril, a veces no lo tienes. Es calificación fuera. Voy a hacer click sobre este fideo aquí. A veces llegas a la cima de esto y estás como, no te permitirá elegirlo en absoluto, es calificación fuera. Es cuando tienes más de uno aplicado. Hago esto todo el tiempo y luego me enloquezco, pero busco en mi cerebro para averiguar por qué digo que tengo esto Yo soy como, quiero que vayas aquí. Aquí tengo la cima. Yo soy como, quería estar de barril es genial fuera. Es genial porque ya tienes algo aplicado. Voy a aplicar en drag. Eso es genial. Tengo dos cosas aplicadas a ello. No se pueden tener dos en los grifos porque no sabe a dónde ir. Si necesito que este esté de barril, necesito agarrar este y simplemente presionar Eliminar. Ahora puedo volver a esta y en la parte de arriba aquí de barril volveré. Ahí vas. Eso es. hacer clic es para previsualizar en una computadora portátil o una computadora de escritorio, eso está bajo configuración de prototipo o no tienes nada seleccionado cuando estás en modo prototipo, o un toque es porque estás en algún dispositivo móvil o iPad. Ahí vas. Todos son iguales. Te veré en el siguiente video. 47. Cómo agregar interacciones automáticamente en Figma: Uno, en este video, vamos a dejar que los robots hagan todas las interacciones y prototipado Vamos a ir a hacer clic en un botón, y va a pasar de esto a bam, esto, hay más. Hay fideos por todas partes, y yo no hice nada de eso. Fue y dijo, A, el botón del corazón va a favoritos y este botón a estas alturas debería ir al carrito, todo automáticamente usando los robots. Bien, vamos a saltar. Bien, entonces lo que he hecho es que he creado una nueva página, ya que hemos estado trabajando en esto. Mantente desordenado. Hizo una nueva página, Bien hit plus, hizo una página llamada direcciones. Simplemente copié pedacitos y piezas e hice esta pequeña mezcolanza Bien, solo agarré la página de géneros y volví a poner mi Nav La página de Watsa es exactamente lo que está en, y es exactamente como estaba en el otro documento Creé este nuevo llamado Favoritos le dio un título y lo mismo con el carrito de compras, lo traje del otro muelle. Todos comparten la misma navegación que construimos antes. Lo que si estás siguiendo es verificar el modo prototipo para ver si hay alguna interacción actualmente en él. Bajo prototipo, puedes ver que acabo de quitar cualquiera que tuviera está todo limpio porque queremos que la IA haga el trabajo. Y vamos a darle una oportunidad. Lo primero que voy a hacer es ir a mis activos y agregar un par de botones. Los botones, es bastante inteligente. Se va a poner más inteligente. Este botón obviamente, el botón de palabra no es bueno. Voy a añadir la palabra. ¿Qué hay en? Voy a usar ese botón otra vez y tal vez voy a simplemente poner otro aquí. Dame un botón. Tengo que llegar al modo de diseño. Se puede hacer un poco de edición en prototipo. Yo voy ahí, salgo, corte, y tú puedes seguir aquí. Co. Este tipo va a ser no lo que pasa. Vamos a decir adiós ahora. Adiós, compra. De todas formas. Veremos que funciona para algunas cosas y no para otras. Todo bien. Todo lo que hacemos es seleccionar todo. En realidad, ni siquiera tienes que estar en modo prototipo. Solo tienes que entrar aquí y decir, escribe en este anuncio interacciones. Es IA, por lo que será una función de pago. Haga clic en él, siéntese y vea lo que hace. ¿Qué está haciendo cosas? Los fideos van a todas partes. Veamos qué hizo. ¿Lo aceptamos? Sigo echarle un vistazo. Entonces, eso es bueno. Mira. Qué hay en. Estoy en modo prototipo. Puedes ver el What's on fue a la página Qué hay en . Yo no hice nada. Creo que lo que está haciendo es que está mirando el texto aquí y mira ya sea el encabezado o el marco. No lo sé, es magia. Echemos un vistazo. ¿Entró el botón BionW aquí? Por fue a la carreta. Eso fue genial porque no escribí carrito de compras, pero sabía que el carrito de compras está conectado al botón Bynw Ahora uno que me gusta mucho es ver este corazón aquí, va a la página de favoritos, y está en todos ellos. Mira, el corazón, si hago clic, vamos a prototimarlo en realidad, verás hacerlo más pequeño que el corazón va a favoritos. venta de entradas va a la página A estas alturas, el corazón va ahí, está bien No sabe a dónde va esto por una buena razón. La búsqueda. Oh, eso funciona. ¿Bien? Eso parece una página de búsqueda. No lo sé. Géneros, supongo, estoy bastante asombrado, que como que puedas empezar de esa manera Sí, digamos, agrega algunas interacciones, IA y de alguna manera conecta la mayor parte de ella. ¿Cuánto tiempo te está ahorrando? No lo sé. Es. Depende de lo grande que sea tu proyecto. Estoy impresionado por ello, así que pensé en compartirlo. No funciona tan bien cuando tienes un viejo desordenado debajo de los archivos, cosa así porque puedes hacerlo Pero, guau, probablemente se va a volver loco solo porque hemos dejado esto bastante desordenado Principalmente porque es tutorial. Tenemos muchos iPhone 16 unos y variables uno, dos y tres. Pero de todos modos, estoy impresionado. Estarías impresionado. Eso es. Gracias, robots. Todos sean amables con los robots por si acaso. Todo bien. Siguiente video. 48. Crear y eliminar a granel múltiples cables de fideos a la vez en Figma: Hola. ¿Tienes problemas con los fideos? Tienes dos fideos de rodilla. Un tallarines va a todas partes, o necesitas actualizar una cosa y necesitas que todos se hagan a la vez. Necesitas agregar este botón a granel a nuestro asiento eyector Déjame mostrarte cómo agregar y eliminar a granel. Llamémoslos alambres fideos suena gracioso. Bien, vamos. Bien, así que acabo de agregar un botón a todas las páginas realmente simple Lo que puedes hacer, la forma más fácil es cambiar, hacer clic en todos ellos, y luego ir al modo de prototipado, que es la opción nueve, ya sabes eso, yo sé que lo sabes Agarra uno de ellos y mira lo que pasa. Todos vienen a dar el paseo. Esa es una buena manera de hacerlas a granel todas. Puedes hacer todos los cambios, y eso funcionará todo para uno. También puedes hacerlo cuando me vaya a deshacer de eso, quitar todos esos. Si esto es, lo hago un componente, y luego uso instancias de esto en todas las páginas. Ve ahí, ponlos en la parte superior. Voy a copiarlos, y pegarlos porque son todas instancias de esta principal, lo que puedes hacer es decir, vas a la página de Eyect y encontrarás que todos estos pequeños amiguitos van todos también Eso. Cualquier problema que ocurra con este método es si esto deshace eso. Deshazlo hasta que se vaya. Se fue. Si este marco aquí es acertadamente así en una página de componentes. Esta cosa de aquí, no se puede decir, bien, quiero que vayan a una interacción hacer clic quiero que vayan a Navegar dos. No se puede por el momento, al menos, ir a otra página. Sólo se puede ir a los marcos que están en esta página actual, así que no va a funcionar. Tengo que pasar y seleccionarlos a todos y moverlos hacia abajo. A veces son difíciles de conseguir que este termine dentro de este marco. Entonces, si quiero seleccionarlos a todos, a veces cambiar hacer clic en ellos puede ser complicado. Lo que puedes hacer es con uno seleccionado, bajar a tus acciones rápidas o Comando o Control e ir a seleccionar y simplemente averiguar cuál de estas podría ser la correcta. Seleccionar con las mismas propiedades funciona muy bien para esta. Estoy en prototipo. Voy a decir que cualquiera de estos tipos, vaya ahí abajo. Excelente. Va a faltar ahora, lo que vamos a hacer es eliminar todas las interacciones. Digamos que lo tienes de otra persona o que has creado tu propio desorden, es un archivo comunitario. No tienes nada seleccionado y luego asegúrate de estar en prototipo. Haga clic derecho y diga eliminar todas las interacciones. Puedes hacerlo por cuadro. Puedes hacer click en el marco, hacer clic derecho en él y decir eliminar todo. Si puede encontrarlo, mantenga el procesamiento. Ahí está justo abajo abajo, elimina todas las acciones solo para esa página. Pero lo voy a hacer para que toda la página lo ordene. Porque lo que quiero mostrarte también es seleccionar todas las propiedades funcionan para ésta. Fui a hacer lo mismo para esto y fui, Comando o Control K, vamos Seleccionar Todas las mismas propiedades, perfecto. Él lo tiene. Decidí que decidió que todo esto eran las mismas propiedades. Hay mucho. Así que puedes entrar y probar algo más. Comando, seleccione, y hay cónyuge seleccionar derecho. ¿A qué nos vamos a ir? Echa un vistazo aquí abajo. Hay las mismas capas coincidentes. Bien, eso funcionó. todas las capas coincidentes seleccionadas. Ahora podemos hacer eso. Es una buena manera de sumergirse en estas cosas que son bastante complicadas y actualizarlas todas a la vez. Mírennos. Estamos avanzados y lo hicimos un asiento eyector. Yo sí usé la IA y dije, escriba un diseñador gráfico. Ah. Definitivamente es contador con un letrero de diseño gráfico. Sin embargo, es bastante genial. Bien, eso es. Eso es la edición masiva y eliminación masiva de los fideos. Adiós. 49. Cómo hacer que la barra de búsqueda de posición de desplazamiento sea pegajosa en Figma: Hola a todos. En este video, vamos a ver cómo hacer las cosas pegajosas. Vamos a desplazarnos hacia arriba y ver la barra de búsqueda se va a quedar atascada ahí. Todo va a desplazarse detrás de él. También arreglaremos los elementos UA superior e inferior, pero realmente vinimos aquí por la pegajosidad, desplaza un poco hacia arriba y luego se atasca Bien, vamos a saltar. Todo bien. Lo primero que necesitas es que acabo de crear una verdadera página de búsqueda básica, solo diseñé un círculo con el icono en él. Así que nada de fantasía en eso. Creé una lista. En esta lista, lo importante es que necesita salir de la página, por lo que no se desplazará. No hay nada para desplazarse dos. Entonces, antes que nada, vamos a darle un adelanto. Vamos a hacer clic en esto, dar clic en el marco padre, cambiar la barra espaciadora y estoy meando mi dedo meñique en la vieja rueda de desplazamiento, sin desplazamiento en este momento. Tenemos que encenderlo. Conseguí el padre seleccionado en mi propio prototipo, puedes ver aquí. ¿Qué haces con el desbordamiento? Me gustaría que se desplazara verticalmente, por favor. Ahora puedo darle una vista previa y puedo desplazarme. No me pergaba exactamente lo que queremos que ese tipo sea pegajoso. Lo que podríamos hacer es antes de eso es porque quiero que esto también se quede en la cima. Ya lo hemos hecho antes. Quiero decir que no se desplace con padre. No quiero que te quedes fijo ahí, por favor. Voy a asegurarme de que esté en la parte superior de mi pila de capas, y voy a decir previsualización otra vez, esta, ahora desplázate hacia arriba puedes ver que esa cosa se queda en la parte superior. Pero quiero que la búsqueda se atasque aquí arriba en la parte superior, no desaparezca porque quiero que siempre esté ahí Oh, lo que vamos a hacer es que le vamos a dar click y vamos a decir, Oye, me gustaría que no desplazaras al padre, quiero que no te arregles como hacemos el top Nav, estamos haciendo pegajoso. Se detiene en el borde superior, y va a funcionar. Vamos a previsualizar, desplazarse, desplazarse, desplazarse. Lo que está pasando es que se está pegando, pero está escondido detrás de esto, sube, y se atasca en la parte superior Él está ahí justo debajo de esto. Entonces tenemos que hacer es un poco de relleno. Con esto, esto pasa a ser un auto out, así que voy a diseñar. Puede ir a mi acolchado y levantarlo. El problema es que hizo eso. Pasé algún tiempo consiguiendo que todo esto se viera bien. El tuyo podría funcionar, pero he hecho algunas cosas con mis capas de pedido para que todo sea agradable. Lo que tenemos que hacer es que este tipo de aquí lo va a meter en un marco, hacer que sea un diseño automático, poner un envoltorio padre encima de él y poner pintura sobre la que no nos metamos con toda esta bondad que hemos hecho. Hagamos clic derecho y vayamos a la selección de fotogramas. Voy a convertirlo en un Aoout. Y todo lo que hice fue básicamente agarrar mi barra de búsqueda, ponerla en un marco, darle el gran nombre de 22, y luego convertirla a Aolout Yo hago eso sólo porque quiero agregarle un poco de relleno. Voy a rellenar en la parte superior. ¿Bien? En tanto. No tengo idea y vuelvo a subir esto. Ojalá, como que veas lo que va a hacer. Ese borde superior. ¿Qué va a topar contra la parte superior? Tenemos que ser un poco más. Ok. Bien, vamos a darle un adelanto. Da click en éste. Bien, voy a desplazarme hacia arriba. Oop. Trabajando. Oh, ya sé por qué. Estamos como, Bueno, estaba destinado a pegarse a la cima. Dan dijo que se estaba pegando al top de cuatro. ¿Por qué no lo es ahora? Se lo hicimos a esto. Nos deshicimos en la barra de búsqueda. Fuimos al prototipo, y dijimos, Bien pegajoso en la parte superior Pero luego hicimos este otro marco a su alrededor, lo llamamos frame 22, y esto no lo tiene aplicado. Entonces, sea cual sea el fondo de esta pila, no podemos agregar pegajosidad a esto o aquello o aquello Tiene que ser lo que esté en este nivel base. ¿A qué me refiero? ¿En cuanto a la jerarquía? Quiero decir marco 22. ¿Desplazar padre? No, quiero que estés pegajoso en la parte superior. Ahora vamos a darle una prueba. Es barra espaciadora. Groll up. Sube, desplázate hacia arriba. Y no funciona realmente, ¿verdad? Hagamos esto, Dan, donde baje esto un poco. Y ahora pongámoslo a trabajar. Vamos a sug barra espaciadora, da clic en él. Mira esto. Se va a desplazar hacia arriba y luego quedar atascado. Co. Él va a la cima y luego se mantiene persistente. Cualquier problema con ello es el orden de las capas. Entonces voy a decir que estás en la parte superior usando mi último corchete o el segundo. Vamos a darle otra vista previa sobre ti, subir y va a ir scroll, scroll, scroll, boop, quedar atascado y va por detrás. Fresco. Bien, para que lo puedas conseguir, así se pega a donde sea que esté el acolchado. Entonces a veces solo necesitas envolverlo en un marco, hacerlo y engrasarlo, agregar algo de relleno a todo lo que hay dentro de él, se pone un poco de relleno en él. Una cosa que tenemos que hacer es que también necesites que probablemente solo te arreglen. Ves arreglado por aquí en tus capas. Se puede ver arreglado está siendo golpeado hacia la cima. Entonces hay cosas que se desplazan y hay cosas que están arregladas. Es una manera fácil de ver qué está haciendo qué, y las cosas fijas están en la parte superior. Vamos a darle otra opción. El último, scroll scroll scroll puedes hacerlo con múltiples encabezados. Hagamos esto. Es un buen tipo de recordatorio. Bien, digamos que aquí tenemos un bateo, queremos llegar a la cima y pero en contra. Lo que tenemos que hacer es asegurarnos de que esté en su propia caja. Tenemos que agregarle el relleno. Entonces voy a agregar un diseño automático a esta cosa. Voy a decir, tienes algo de relleno en la parte superior. ¿Cuánto hay de eso? En realidad, no, necesito que sea enorme, ¿no? Bien, vamos a agarrarlo porque va a parar en la parte superior de la página. Se trata de que veas lo que estoy haciendo aquí? Te estoy agarrando y yendo, Bien, vas a parar por ahí Entonces necesito ser relleno más pequeño, pero tal vez eso. Vamos a darle una prueba a eso. Sólo tenemos que decir prototipo, desplazarse por el padre. No, uno debe estar pegajoso en el borde superior. Lo estás haciendo más confuso, Dan. No. Vemos cómo vamos. Desplázate, y la barra de búsqueda se detiene, y luego, se detiene demasiado bajo. Menos acolchado. ¿Dan siquiera sabe lo que está haciendo? Solo dale eso para ir, vista previa, scroll scroll scroll. Eso es mejor. Vamos. Puedes obtener otro encabezado para pegarte debajo de este y simplemente hacerlo para la barra de búsqueda. Porque tal vez solo tratar apilarlos puede resultar un poco confuso. Cosas que debes recordar es que si quieres relleno, tiene que ser un auto out. Y muchas veces es más fácil simplemente poner el suyo, ponerle un marco a su alrededor y convertirlo en una salida automática. La otra cosa que debes hacer es asegurarte de que tienes cosas saliendo de la página. Veo a mis alumnos simplemente como que no hay nada que desplazarse, también, así que realmente no importa lo que enciendas. No se desplazará, así que necesitas que la basura salga del fondo. La otra cosa es, hacer clic en el marco padre debajo del prototipo. El comportamiento de desplazamiento tiene que ser vertical, y lo que quieres pegar en la parte superior tiene que estar colgando en la parte inferior de la jerarquía aquí, no una especie de tres o cuatro de profundidad en esta gran estructura de capas. Seleccionado, vas a pegajoso. Eso es. No estoy seguro de si hice que eso fuera más difícil aprender o más fácil de aprender, pero ahí tienes. Eso es lo que pasó. Todo bien. Te veré en el siguiente video. 50. Cómo hacer un deslizamiento de desplazamiento horizontal en Figma: Yo Hola, ahí. Este video, vamos a hacer esto. Vamos a hacer un poco de desplazamiento horizontal. Vamos a hacer algunas críticas y conseguir que se desplace de esta manera, como un pequeño carrusel Muy chulo. Llamado desplazamiento horizontal Te voy a enseñar cómo hacerlo dentro de Figma. Para comenzar, acabo de hacer una tarjeta, tarjeta de revisión genérica. Lo que quiero hacer está encendido, ponlo en marcha. Se puede hacer con cualquier cosa, sólo un marco viejo liso. Yo sólo quiero hacerlo realmente simple. Voy a hacer con esto porque se ve genial. Lo que vamos a hacer es antes que nada necesitamos que esto sea, necesitamos algunos de ellos para que salgan de la página. Ahora, puedes recordar empezar a arrastrar y mantener presionada la barra espaciadora, empezar a atravesarlos o con esta seleccionada aquí, ¿C Al otro lado. Ha salido. Vamos a fingir que va a salir porque lo harás por accidente. Voy a DDD. Tengo algunos de ellos. Lo que quiero decir es que antes de comenzar es que estos en realidad no están en este marco para desplazarse realmente. Necesito asegurarme de que tú y tú. Estos tipos no están en el marco. Este primer tipo es el marco 23. Buen trabajo, Dan. En realidad, no, se llama B review Entonces voy a arrastrarlo hacia abajo para estar con sus amigos. Tú vas ahí. Ahora están todos en la página. Depende de usted, haga clic en el marco padre y podrá ir al diseño y podrá decidir si desea clip de contenido o no. No importa. Se ve diferente. Vamos a darle una oportunidad. Siempre preveo a medida que avanzo. Desplaza la barra espaciadora y no podrás ver ningún desplazamiento. Todo lo que tenemos que hacer es decir, página de reseñas. Pasemos al prototipo. Opción en nueve, te vas a cansar de eso para que esté ahí dentro, ¿no? Vamos al desbordamiento. Horizontal. No es lo que quiero. Ahora sólo estoy pensando. No quiero que todo esto fluya. Yo solo quiero esto, y estos son todos estos tipos. Quiero que estas estén en su propio marco, todas estas reseñas de compra estén en su propio marco y obtendremos que se desplace, no el padre. Eso es lo grande aquí. No queremos que fluya toda la pantalla. Yo lo haré. Es bueno para ir. Horizontal rápido voy a decir vista previa' vista previa, y todo lo hará Todo lo hace. El problema será porque esos están arreglados si agrego un título aquí. Si agrego algún texto aquí abajo. Echemos un vistazo. Vamos a hacer clic en, vista previa sobre este betterw Ahí hay una V. terriblemente mal. U, V, vete. Haga clic en usted, vista previa. Si me desplazo, todo se desplaza. No quiero que esto se desplace y no quiero que las reseñas se desplace. No quiero que todo el fotograma se desplace. Eso es lo que estaba tratando de explicar. Vamos, Dan. Lo que quiero es esto. Todos estos tipos necesitan estar en su propio marco. Puede ser un auto lout, puede ser un marco, no importa. Voy a ir al Turno A por Autout. Simplemente obtenga el espaciado todo bien, asegúrese de que estén dentro del marco de las revisiones. Ahora lo hago a esto. En lugar del marco de llamada 24, llamemos a este pergamino de revisión. Eso seleccionado, quiero poder no saber scroll, quiero ir vertical u horizontal. Nunca puedo recordar. Creo que es horizontal, pero tengo que pensarlo. Vamos, Brain, vamos a darle una oportunidad. Vamos a previsualizarlo. Ahora, ya ves, ¿qué está pasando aquí? Está funcionando. Bien, vamos a averiguar qué salió mal. Eso solo debería funcionar. Debe estar desplazándose horizontalmente. Simplemente haciendo clic y arrastrando, no funcionando. Todo bien. Déjame mostrarte cómo rompo las cosas. En primer lugar, vi algo debajo. Sí, ¿qué haces ahí? Tú estás ahí. Sí, me deshago de ti. No te necesito. Volvamos a darle un adelanto . Desplazamiento a lo largo Bien. Para que haya desplazamiento horizontal Debería ser Oh. Sé lo que es. Es la clave para todo este curso. Una vez más, fingiendo que tenía la intención de hacerlo es que este marco de aquí necesita ser recortado Tenemos este marco padre que hemos aplicado el scroll está todo el camino aquí. Lo que tenemos que hacer es tener algún lugar para que se desplace. Tenemos que arrastrarlo hacia arriba. El marco, este marco padre con todos estos chicos adentro, este marco en realidad puede ser más pequeño. Puede ser más pequeño. Normalmente, solo los mantenemos del mismo tamaño. Pero podemos decir, en realidad, eres una pequeña ventana al mundo, y podemos bajo diseño, ir al contenido del clip para que no podamos verlo. Eso lo explica un poco mejor. El marco padre es un poco más pequeño, así que hay cosas para desplazarse aquí. Ahora vamos a darle una oportunidad. Por favor, trabaje. Está funcionando. Podemos hacer este pergamino. Obviamente, probar en tu teléfono con el dedo es mejor. Vete tú. Hay pergaminos horizontales Una cosa que voy a necesitar hacer es que el padre necesita ser un poco más ancho porque las sombras paralelas están recortadas, y yo solo voy a decir, vamos a la alineación, arriba a la izquierda, ve ahora debería ser aún mejor Ahí puedo ver mis sombras paralelas, puedes ver, Sí, es perfecto. Todo bien. Entonces, las claves para llevar, debes asegurarte de que todo lo que quieras desplazarte horizontalmente salga de la pantalla y que sea un marco aparente o automático siempre que sea, ese diseño automático o marco debe establecerse en desplazamiento horizontal y el marco padre debe ser del mismo tamaño mismo Y no importa, pero se puede decir, bajo diseño, contenido del clip para verlas todas. Eso debería funcionar. Lo siguiente que quiero hacer es que quiero agarrarte y hacer cosas de IA. Reescribe esto. Ya terminamos. Solo te estoy enseñando algunas cosas geniales que me gusta hacer con algunas de las cosas de IA, voy a decir reseñas y solo golpeo lo que era Comando Enter o Control Enter. Míralo. Simplemente pasa y cambia todo esto, no hace las imágenes en este momento, y puedes usar IA para hacerlas. El problema con eso es que tardan un tiempo en hacer. A menudo uso Command o Control K para mis atajos, usaré contenido R. otentral es un plug in o widget realmente genial Podrías ir allí y encontrarlo. Es muy útil para muchas cosas. Digamos que yo solo porque lo que quiero es que no necesito que se genere IA. Se va a ir a anunciar y hacer clic en Min. Lo mismo con ¿puedo hacer múltiplos? Estoy bastante seguro de que puedo. Puedo decir que ustedes son todos solo que eso no funcionó. Puedo hacer click sobre ti. Estoy manteniendo presionada la tecla de comando en tecla Control en una PC y mayúsculas al mismo tiempo, y puedes hacer clic en estas y simplemente pasa y pone imágenes genéricas de marcador de posición ahora No son generados por IA, son solo unos predefinidos. Ya ves que tienen mil 700 de ellos. Lo mismo si tuviéramos nombres completos. Si necesitabas una lista de nombres completos, puedes usar cosas de IA. Si no tienes acceso a él porque estás en la cuenta gratuita. Lo que puedes hacer es sostener Commander Shift o Control Shift PC. Coge todos estos y puedes decir, dame algunos nombres completos. Entonces puedes volver a hacer clic en él. Dame algunos nombres diferentes. Aquí hay un montón de cosas que son así. Puedes trabajar tu camino a través, y si es útil. Voy a deshacer porque quiero mi espalda, y eso va a hacer. ¿Sigue funcionando? Siempre está lo divertido después de que te hayas metido con él. Todavía funciona. Mira eso. Somos genios. Todo bien. Eso es. Voy a encender el contenido de mi pequeño clip, así que lo arregla y te voy a ver en el siguiente video En realidad, una última cosa es Comando Y, control y es que puedes ir a Vista de Esquema si necesitas ver cosas. Estás como, necesito ver todas esas cosas. Estás como, ¿Qué es todo eso? En realidad, ¿qué es todo eso? Es el pergamino de esta página. ¿Esta página incluso se desplaza? Apuesto a que no? Lo hace. Todavía tenemos que arreglar la parte superior de todos modos, distraerse. Hicimos desplazamiento horizontal, y somos increíbles. Veré tu increíble yo en el siguiente video. 51. Proyecto de clase 13: desplazamiento horizontal: Todo bien. Es el número 13 de la suerte. Quiero que hagas tu propio scroll horizontal, hagas una tarjeta de revisión, seas simple, puede ser complejo, depende de ti y solo quiero que hagas el scroll de revisión horizontalmente en tu dispositivo. Básicamente solo esto, Lo que hicimos en el último video. Haz tu propia versión, y me encantaría ver un video, de lo contrario, tomar una captura de pantalla de él, parcialmente desplazada a través. Sé que puedes fingir. No es para eso para lo que estamos aquí. Estamos aquí para mejorar y estos ejercicios de práctica. Te apuesto que si las estás haciendo, te sientes más amargado. Y eso es todo. Subirlo a la sección de asignación. Me he quitado la parte en redes sociales. Si es aburrido, no lo compartas. Si le has puesto un poco de trabajo, estás como, genial. Compártelo, por favor. Me encanta verlo. Este bit aquí es el paully llamado Toma una captura de pantalla de Tu vista previa parcialmente desplazada A eso me refiero, se movió un poco. Cierto, pero me encantaría ver un video. Subirlo a los proyectos de clase. Este es fácil pero también muy técnico. Tienes que hacer bien todas las cosas. Entonces tal vez tengas que volver a ver el video para ver dónde te equivocaste Probablemente es la mayor parte del tiempo que veo a la gente teniendo problemas es cuando se olvidan hacer bien todo lo demás, pero el marco en el que todo esto está necesita hacerse un poco más pequeño. Todo bien. Que se diviertan. A ver si puedes hacer que suceda. Nos vemos en el siguiente video. He tomado café. ¿Se lo puede decir? Muy bien, siguiente video. 52. Desplazamiento automático por la página hasta el punto de anclaje en Figma: Hola. En este video, vamos a hacer botones que se desplazan hacia abajo en la página en la que estamos trabajando incluso muy largos hacia abajo en la página. Se puede ver aquí. No se trata de marcos separados. Es solo desplazarse hacia abajo dentro de ese fotograma más, agregaremos cómo hacer un hipervínculo. Salir a un sitio web. Es fácil y a la vez, un poco peculiar. Déjame mostrarte todas las peculiares. Para empezar, todo lo que he hecho es crear una página de eventos con un poco más de detalle, el nombre del gig. Tengo unos botones aquí. Solo son diseños automáticos con algunos textos en ellos. De hecho puedes hacer esto con cualquier cosa y tengo algunas cosas que queremos desplazarnos así que, es bastante fácil. Cambiemos a lo que vamos a hacer cambiar a prototipo. Opción nueve, línea Alt en una PC. Esa es la última vez que voy a decir eso. Probablemente te guste parar en 50 videos de algo. Es suficiente. Lo que vamos a hacer es bajo prototipo, vamos a salir. ¿A dónde vas a ir? Vas a ir aquí abajo. Es más o menos así de simple. Automáticamente será lo suficientemente inteligente como para decir al tocar, desplazarse dos. Si no lo hace, puedes obligarlo a que se vaya. Se va a desplazar a esa fecha de ayerchord. Lo puedes ver ahí en mi panel Capas. Ahora, donde dice animación, Instant es el estándar que obtendrás. Vamos a darle un adelanto a esto. Shift Space Bar, esa es la última vez que voy a decir que una herramienta fecha y salta a la fecha. Vamos. Una fecha. Lo que vamos a hacer ahora es hacerlo un poco más agradable. Con el fideo seleccionado, bajemos a animar y voy a usar facilidad de entrada y salida se siente bien Entonces, ¿qué tan rápido va a ir? A mí me gusta acelerarlo. Va a tomar más tiempo, así que quiero el número más alto. Eso va a tomar un segundo, 1.1 segundos. De nuevo, de alguna manera no puedo hacer click en línea. Entonces vamos Shift, ya no lo vamos a decir más. Vamos a la fecha. Mira, se desplaza hacia abajo muy bien Vamos a hacer el resto de ellos, y te voy a mostrar donde el siguiente problema te encuentras. Venue va a bajar al lugar y siempre probar, seguir probando. Nunca pienses que vas a hacer mil cosas y luego ojalá todo vaya bien y no estés seguro dónde te equivocaste. Obras del lugar. La única diferencia es, bueno, hagámoslo con precio. El precio tiene que bajar todo el camino. A veces puede ser un poco difícil llegar ahí abajo. Entonces lo que puedes hacer es simplemente hacer clic en esto. Vamos en interacción. Quiero que esté de barril. ¿Qué acción? A mí me gustaría que se desplazara dos. ¿Dónde quieres desplazarte dos? Aquí hay un montón de cosas. Quiero bajar al precio. Lo mismo, pero quiero que esté animado. La diferencia aquí es que se usa el valor por defecto de 300 milisegundos 0.3 segundos. Aunque use este, ¿cuál fue este? Este fue alrededor de 1 segundo. Si hago este, toma 1 segundo. Tiene mucho más por recorrer. Si lo hago alrededor de 1 segundo, nada está funcionando. Tengo que mantener presionada mi tecla de opción ahora para que se desplace, Figma. Normalmente, no hay bichos y figma. Es una aplicación bastante sólida. Pero vamos a darle un adelanto. Si llego a la fecha, se desplaza hacia abajo pausado, pero si hago precio, tiene que cubrir mucho más, en realidad, el precio no es tan bajo Bien, vamos a fingir. Hagamos que este súper duper sea largo. Gancho. Fingiendo esto. Voy a cambiar de nuevo al modo de diseño y traerlo todo el camino hacia abajo. Estoy haciendo esto para que supongo un mejor ejemplo. Te voy a previsualizar y voy a decir fecha y tiene que llegar ahí abajo en 1 segundo, así se acelera. Podrías, si tienes que desplazarte bastante hacia abajo por una página, ajustar la cantidad que se necesita. Podría duplicar eso porque tiene que ir mucho más allá. Rara. Puedo escribirlo por aquí, pero no puedo escribirlo por aquí. En fin, aunque lo único es ahora que esto es realmente largo, volvamos a darle un adelanto. Si voy a la fecha, trae la fecha a la cima. El tuyo podría estar bien porque puede que no tengas una página larga. Pero si vas una página larga, tiene mucho que desplazarte. Entonces esta fecha quiere estar realmente en la cima, y para mí, está escondida detrás de todo. Sólo un poco raro. Quiero que aterrice por ahí para que las fechas en él y cuando los locales hicieron clic se acerquen por aquí para que puedas ver el lugar y obviamente el precio va hasta ahí abajo. Entonces hagámoslo. Vamos a agarrar fecha, y vamos a hacer clic en el fideo. Voy a hacer doble clic en el fideo, y para eso está este offset X es izquierda y derecha, Y es arriba y abajo. Me llegó a decir eso y cuánto Lo que quiero hacer es entrar, digamos, tono píxeles. Vamos a darle un adelanto. Hago clic en la fecha y no funciona, aún más de la manera equivocada. Pasan 200 píxeles donde está la fecha. Tienes que asegurarte cuando lo estés haciendo, usa números negativos si quieres relleno en la parte superior. Lo mismo exacto. Vamos a la negativa 200. Vamos a darle un adelanto, y digamos fecha. Aún no funciona. ¿Por qué eso no funciona? Pasemos por alto U, negativo. A lo mejor no es suficiente. X. Definitivamente es Y, creo que sí. Vamos, fecha. Ahí vas. No es suficiente. En algún lugar en medio de lo que sea que hice ahí. Yo hice 200, 400. Vamos a probar 300. Fecha. Oh, casi ahí, 250. Vamos, Dan. Hay mucho de esto. No lo hago lo suficiente para saber exactamente cuál debería ser y tener una idea de ello. Si estás haciendo un poco más de ello, podrías mejorar en ello. Oh, yo quería ser un poco más. 20? Entonces puedes pasar todo el día tratando de que la cosa se deslice hacia abajo donde la necesites también. Lo único que no voy a sintonizar en su propio video, puedes trabajar tu camino a través las diferentes compensaciones para que estas funcionen Una cosa que acabaré de lanzar al final aquí por bono es digamos que queremos un enlace de mapa. Voy a seleccionar eso. Una de las interacciones que no hemos cubierto en un video separado que solo se colará aquí es miramos a ir a Scroll hace un segundo. Hay uno que dice open Link, y luego puedes escribir URL. Déjame agarrar algo de Google Maps. Acabo de agarrar un enlace de Google Maps. Obviamente, puede ser cualquier URL en cualquier sitio web. Si alguna vez estás en Irlanda, y llegas a Limerick, antes que nada, envíame un mensaje y también asegúrate de visitar Daln's Es lo más genial. Bien, y vamos a ir a mi ritmo de tinta. Se va a abrir en otra pestaña. Vamos a darle un adelanto a esto. Bajemos a Venue. Vamos a dar click en el mapa. Y mira, se abre. Bonito. Lo único que tienes que hacer por tu cuenta es darle el color horrible. Entonces mapa aquí probablemente necesita ser el azul que se inventó hace muchas lunas subrayado, que es comando o control, estoy orgulloso necesito audaz ¿Por qué no? Bajo control B. Muy bien. Así es como deslizarse por la página, ¿de acuerdo? Se llama ancla, y falta un poco a la hora de cronometrar y sobre todo al offset. Pero llegarás ahí. Ah, y una última cosa es que porque hemos averiguado que 220 o 220 negativo funciona para esto, no lo cambias por todos estos. El tiempo, sí, pero el desplazamiento real sigue siendo el mismo, si quieres que aparezca en el mismo lugar. Así que vamos precio donde tenemos que bajar bastante lejos. Sigue siendo menos 220. Lo que sea que decidieras, voy a hacer que vaya más rápido, y vamos a hacerlo ir, los mecanografiados vuelven a funcionar. Bien, entonces un minuto y medio, tal vez minuto y medio, un segundo, 1.3 segundos. Vamos a darle un adelanto y ver esto. Todavía va a usar ese desplazamiento que va a funcionar. La razón por la que no llega hasta la cima es porque no hay suficiente espacio en la parte inferior. Así que vamos así. Vamos a agarrarte. Apártate en una tangente. Bien, vuelve al diseño. Vamos a hacer clic en el marco. ¿Dónde está ahí? Aquí están las críticas. Da click en el marco, rasparlo, y voy a hacer esto más largo para que este tipo llegue a algún lugar para desplazarse hacia arriba, ¿ entiendes a lo que me refiero? De lo contrario, no hay ningún lugar para seguir subiendo . ¿Qué quiere decir? ¿Esto? Ahora debería llegar a ese lugar donde lo queríamos porque aquí hay un poco de espacio para que vaya. No agregues cosas así, Dan, haz clic en los botones y desplázate hacia abajo un poco de desplazamiento y estás lejos. Eso es. Eso es desplazar anclas dentro de figma 53. Cómo hacer componentes interactivos en Figma: Bienvenida. Bienvenido, bienvenido. ¿Qué vamos a hacer? Es súper emocionante. ¿Estás listo? Mira, ya ves. Está rondando. Muy emocionante. No te preocupes. Se pone aún más emocionante. Mira, entré botón. Haga clic encendido y apagado. Ni siquiera una sombra paralela en esa. En fin, vamos a hacer estos se llaman componentes interactivos. Esto lo hacemos con bastante fluidez. Dan se pierde mucho haciendo esto. Pero voy a incluir en el curso porque podrías perderte de la misma manera. Realmente bastante simple, aunque parezca un video largo, es solo porque me pierdo un poco. Todo mi amigo, hagamos un vuelo flotar súper emocionante y una marca de verificación Bien, entonces estoy empezando con un simple botón viejo. Es un auto ruidoso. Tiene algo de texto en él. Eso es. Lo que quiero recordarte es que en realidad, hemos hecho esto. Te voy a mostrar esto. Esto es exactamente lo mismo. Lo usamos aquí para tener un conjunto de componentes que tenía una, dos, tres cosas diferentes en él, y animamos entre todas ellas. Terminamos con esto. Lo que hicimos fue que dijimos, tú animas entre estos dos, prototipo Dijimos, solo usamos un retraso de tiempo. Esa es la única diferencia, pero se siente como algo completamente extraño. Todos vamos a entrar adentro adentro adentro adentro adentro adentro adentro adentro adentro. Esto lo aprendimos antes. Olvidé usarlo a través del curso. Solo tienes que alternar entre todas las nuevas páginas que tenemos abiertas. Ahí está. Tengo esta página aquí. La razón por la que estoy en una MacBook Pro o una versión de escritorio es que obviamente el hover no funciona en un teléfono No puedes pasar el cursor sobre un teléfono con el dedo. Pero es un muy buen ejemplo de esta técnica en particular. Entonces necesitamos convertirte en un componente. Fam, eres un componente. Es agregar una variante de la misma. Bajo diseño, variante Ahora lo que quiero es algo diferente sobre la segunda variante. Todo lo que quiero hacer probablemente es ir el color de relleno va a ser uno de los míos oscuros. Vamos a darle una sombra paralela. Fresco. Al igual que el viva techno, todo lo que tenemos que hacer es bajo prototipo, ir, entrar dentro de mi conjunto de componentes Esta variante va a ésta. Pero en lugar de hacerlo después retraso de tiempo, vamos a decir de barril, que es genial o al hacer clic y vamos a decir cambiar a la variante dos instantáneamente y no lo vamos a hacer de barril. Vamos a hacer encendido mientras se cierne. Vamos a arrastrar una instancia de este tipo. Debería estar en mi página de componentes, pero no lo está, vamos a darle un adelanto. Todavía está previsualizando en mi teléfono. Se puede cambiar. He estado usando el atajo para ir a previsualizar lo abre así. Se puede ir a éste, presente. Todavía está en un teléfono. No tener nada seleccionado y decir, ni un iPhone 16. Se podría decir que no hay dispositivo. Simplemente elegiré el tamaño de página en el que estés trabajando o podrías haberla cambiado al Macbook Pro 16. Oye, vamos a previsualizarlo y ver esto. Bien, tenemos un botón de hover . Somos hardce Es un poco, lo llamamos instantáneo. Lo que vamos a hacer es decir, en realidad, tú, yo quiero hacer mientras se cierne, no instantáneo Vamos a t animar, disolver. No va a importar en estos dos, va a terminar luciendo igual. Vista previa, desplázate por encima de ella. Oh, es sólo un poco lento. El drop shot viene muy rápido, ¿eh? Vamos a probar el otro. Entonces digamos que cuando digo que no importa, probemos el Smart animate. A ver si eso funciona mejor. Definitivamente mejor. Bien. Ignora lo que dije antes. Smart anima de manera más agradable. Va un poco lento. ¿Bien? Así que solo puedes jugar con eso. Medio segundo, mira esto salir. Eso es mejor. Buen H. Hagamos otro ejemplo. Sólo voy a crear rápidamente una casilla de verificación. Tú ahí. Todo bien. Después de todo eso, me causé algunos problemas y estaba como, te voy a mostrar también. Utilicé plugin para encontrar una garrapata porque de alguna manera las garrapatas son muy difíciles de dibujar. Siempre se sienten equivocados. Extrañamente, si soy usuario de Android, entonces mis ticks que se siente como una garrapata, eso no lo hace Esa es la garrapata de IOS. Esta es la garrapata de Android. Usan algo llamado material, pero nombran su sistema de diseño. Siempre me gustan las garrapatas como si se siente demasiado standyypi la garrapata no es lo suficientemente larga, demasiado standyypi la garrapata no es lo suficientemente larga, de todos modos. Por eso estoy usando el plug in. A mí me gustan los contras ocho porque tiene muchas cosas de Apple. Tiene IOS aquí. Tiene el material de Google, está Windows, todo el tipo de cosas genéricas. Lo que hice, sin embargo, es que hice esto, encontré la garrapata, y fui, Bien, ese es el que quiero, y lo agarré y lo arrastré hacia afuera Lo cerré, luego empecé a trabajar. Lo que hice fue hacer clic en la garrapata y la bajé y comencé a trabajar y la moví y te mostré esto al inicio del curso Voy a fingir que lo mencioné de nuevo ahora para recordarte, pero en realidad lo acabo de hacer. Lo que encontrarás es ver cuando esto salió de ese plug in icono ocho, había un marco con un vector dentro. Acabo de recorrer el vector y hay esto viejo hecho de pasar el rato . Mira esto. Si agarro el vector dentro de aquí y trato de moverlo por aquí. Mira, sale de ahí. Ahora están separados, pero todavía tengo este cuadro grande. Eliminar eso y borrar eso porque eso es lo que hice. Mira esto. Si vuelo por aquí en alguna parte, ¿dónde está el mío? Ahí está ahí. Ahí está este cuadro grande que no pensé que estaba ahí y yo estaba como, ¿Qué carajo es eso Podemos verlo bajo Comando o Control Y para contornos. Ahí está esta cosa. Diablos estás haciendo aquí? Sabemos. Rebajé la marca de verificación dentro de ella. Entonces puse este pequeño marco alrededor de la marca de garrapata. Lo que tengo que hacer es agarrar todo esto. Yo lo he llamado marco 30. Vamos a llamarlo marca de verificación, y lo quiero fuera de hecho Entonces sales, terminas y te deshaces de hecho. Deshazte de hecho. Bien. Así que ese es el largo camino de decir: ¿Qué haces, Dan? En serio, lo que hice fue, ¿ necesito ese segundo fotograma? ¿En verdad no lo hago? Puedes salir y estar en la marca de verificación y eso puede desaparecer. Marque la casilla con un vector dentro de ella. Debería haber empezado de esa manera y simplemente reducir la escala de toda la caja. Pero de todos modos, podemos hacer exactamente lo mismo. ¿Qué carajo estábamos haciendo? No lo sé. Me perdí. Estamos haciendo esto. Esto es exactamente lo mismo. Entonces lo que puedo hacer es como antes, puedo decir componente UR, dice que no puede convertirlo en un componente, este es uno bueno. ¿Por qué no? Ahí puedo ver en mi panel las. Esta marca de verificación está de alguna manera fuera de mi marco MacBook Pro Se lo puedo decir. Ahí puedo ver el texto. Así que tengo que hacer es asegurarme de que estés ahí. Ahora puedo resbalar ambos, mapear componente, y luego ir variante Todo lo que voy a hacer es decir en esta variante aquí, voy a apagar el globo ocular Bien, y vayamos al modo prototipo y digamos cuando se haga clic en esta cosa Cuando esté al hacer clic, vamos a cambiar la variante dos, y usemos todas esas cosas animadas inteligentes Probablemente no necesitamos el smart animate. Vayamos al instante porque es una marca de verificación. Vamos a agarrar una instancia de ello. Tú vienes por aquí y vamos a previsualizarlo. Es pequeña. Vayamos por aquí y entremos. Puedo pinchar sobre él. Mira, no vuelve. Se encendió, sin embargo, así que es hit refresh. Ha vuelto a una página hace muchas lunas. Está bien. Abordemos el problema principal es cuando se enciende la garrapata, no va a volver atrás. Solo necesito entrar aquí y decir, cuando hiciste clic, vuelve por ahí Puedes hacer todas las mismas cosas. Vista previa de esto. Ahora porque no tenía nada seleccionado. Se va a volver a todo el camino en otro lugar. Creo que este de aquí, flujo uno. Lo que tengo que hacer es que si sigue sucediendo, ve aquí, ve a prototipado Comencemos un nuevo flujo. Voy a llamar a este escritorio y voy a previsualizar desde aquí. Ahora voy al campo de entrada que va encendido y apagado. ¿Cuánto dura este video? Mira, tenemos a Havas, Dill que mencioné que también hacemos Hvas, y una Bien. Pero ya lo entiendes. Lo hicimos desde el principio para una animación, pero la hemos usado ahora para tener componentes interactivos haciendo cosas interactivas geniales. Bien, eso es. Aprendimos algunas cosas. Nos perdimos. Por qué se perdió. Pero todos aprendimos algo. Estarás perdido de la misma manera en algún momento, pero recordarás cuando Dan se perdió. Bien, eso es. En el siguiente video. 54. Proyecto de clase 14: Componente interactivo: Todo bien. Clase Tiempo de proyecto. Vamos a hacer algunos componentes interactivos. Quiero que hagas esto. Es la página de inicio de sesión con una pequeña marca de verificación para el botón de recordarme e iniciar sesión tiene un estado Ha. Ahora, sé que no puedes hacer Ha en una espuma, pero solo tendrás que complacerme. Estos son solo rectángulos con sombras caídas, no pasa nada especial Echa un vistazo un poco en línea para iniciar sesión ejemplo de UI. Tener una idea de lo que debería ser ish? De verdad, sin embargo, para lo que estamos aquí es para esto. Quiero que funcionen los componentes interactivos para ambos. Cuando hayas terminado, toma una captura de pantalla de ambos. Haz que tu componente esté justo al lado de él para que cuando lo subas, podamos ver ambas cosas que hiciste más los conjuntos de componentes que tienen este componentnes interactivos pasando En las redes sociales, me gusta ver lo que haces. Si estás cavando este curso, tal vez ahora podría ser un momento en que puedas decirle a otras personas lo buenos los cursos y ellos podrían venir y hacerlo. Así es como sigo haciendo esta cosa. Si te gusta el curso y puedes pensar en una forma de promocionarlo, por favor hazlo. Eso me haría pasar el día. Pero sí, disfruta haciendo el proyecto de clase. Vamos a poner en marcha esos componentes interactivos. Marcas de verificación súper emocionantes. Whoo 55. Cómo usar las secciones en Figma para organizar tu contenido: Hola a todos. Este video trata sobre secciones. Manos arriba, que nunca lo ha usado ni siquiera sabía que existía. Ha estado ahí un tiempo. las secciones, para qué se utilizan. Son muy útiles organizacionalmente , que es código para Vamos a revisarlos porque te toparás con. Para comenzar, encontré este archivo comunitario. Fue de Hansa Ohile. Muchas gracias. Usándolo como ejemplo de que hay una versión de escritorio y teléfono para iPad de esta aplicación comercial. Aquí es donde las secciones pueden ser realmente útiles porque estas están relativamente bien organizadas. Pero lo que podemos hacer es que podemos presionar el botón, nunca has pulsado. Está bajo nuestro marco sujetarlo y es éste de aquí, turnos. Se llama sección. Lo hace es poner una caja alrededor de las cosas. Estás como, yo he hecho cajas. Es muy parecido a un marco. No tiene algunas de las cosas del marco, pero tiene algunas partes organizativas agradables. Al igual que en, tiene un nuevo icono. Es como una pequeña carpeta o una sección. Todo dentro de él está debajo, lo cual es genial. Vamos a darle un nombre, Comando o Control R, y digamos que este va a ser mi teléfono o simplemente llamar a un celular. Puedes hacer algunas de las cosas como que voy a cambiar el color de fondo de la misma y simplemente organiza tus materiales. Se puede hacer con un marco. La mayoría de la gente simplemente lo hace con un marco. Puede convertir marcos en secciones, sección de marco. El nombre cambia en la parte superior, en lugar de simplemente ser un marco viejo y llano, está en una pastilla o en una caja. Puedes hacer doble clic en los bordes y se zacula alrededor del borde de tus diseños. Bien, apriétalos. Se puede enlazar directamente a una sección. En lugar de tratar de decir, bien, quiero que vayas a este marco. Ya puedes ver vamos a esta sección en la que estoy trabajando. Podría ser una versión, podría ser móvil. Cuando vas a Compartir, puedes decir, me gustaría que puedas ver aquí dice que es compartir a la sección móvil. Si no tienes nada seleccionado, nada seleccionado, luego ve a Compartir es diferente. Sólo voy a compartir todo el archivo. Puedes conseguir la gente vaya exactamente a donde quieras que vaya. Puedes conseguir realmente noventa con tus secciones, turnos y puedes tener secciones dentro de secciones para romper aún más las cosas. Sin embargo, lo que no puedes hacer es que tengan que ser el jefe. Si tengo un marco y después trato de poner una sección dentro de él, ver qué pasa sobre Myers, marco cuatro, si le pongo una sección, notarán que mi Sección cinco, está por encima del marco Simplemente no va a entrar. Las secciones son el jefe y los marcos pueden entrar. Se puede vivir sin secciones, pero se topará con ello en los archivos de otras personas, va a ser como, ¿ qué imaginación son Ya sabes, tienes secciones. La otra cosa es que podrías toparte archivo de otra persona y estás como, Oh, eso es un marco. Estás como, ¿por qué no puedo hacerle cosas al marco? ¿Por qué no puedo hacerlo? Vamos a convertirnos en Auto lout Shifte Shift e. Así que ahí tienes Esas son secciones. Si eres un diseñador de UX súper organizado, te encantarán las secciones. Si eres como yo, y terminas arrastrándote a lo lejos. Hago secciones cuando entrego archivos para el desarrollador u otras personas solo para fingir que estoy realmente organizado, pero ahí tienes. Secciones, Traer para algunas personas. A algunas personas les encantan. Hazme saber en los comentarios, eres un amante o No veas el puntero. Bien, amigos míos, eso es todo. Te veré en el siguiente video. 56. Cómo hacer una barra de búsqueda en expansión en Figma: Hola, tú. ¿Estás listo para algo divertido? Bien, ¿listo? Juguete súper fidget, súper agresivo, barra de búsqueda blanda que Oh, sí me encanta este. Lo bueno de esto es que realmente se basa en todo lo que hemos hecho antes, y es una pequeña y agradable envoltura nuestro tipo de prototipos awesomenss Vamos a toparnos con muchas cosas diferentes juntos en este proyecto. Resultado genial, es un tipo de proyecto realmente genial de obtener todo lo que hemos aprendido en un proyecto complicado y satisfactorio. No puedo dejar de hacer clic en la pequeña barra de búsqueda. Así que comenzaremos desde el principio en este solo para asegurarnos de que estamos todos envueltos y somos increíbles en prototipos y dejamos de hacer clic hacia abajo Primero, he hecho una página. De hecho solo me robé la página familia y eliminé la barra de búsqueda que teníamos, pero suficiente espacio en la parte superior, así podemos poner una pequeña barra de búsqueda trabajando en la parte superior. Vamos a traer nuestro icono, Comando Mayús K, Control Shift K. En tus archivos de ejercicio, hay una carpeta de iconos. Vamos a traer el icono. Voy a hacer click una vez por aquí. Es muy grande. Voy a obtener la herramienta de escala y me voy a asegurar de que tengo seleccionada la capa padre. Rosie ahí. No el vector que hay dentro, ¿recuerdas? Voy a decir que tienes una altura de 24. Volver a mi herramienta de movimiento, herramienta de selección, seleccione los colores. En realidad voy a elegir uno de mis estilos, 500. ¿Lo ves ver todas las cosas geniales que estamos empezando a coser juntas? Lo que también quiero es Type tool, voy a escribir. Buscar. Voy a copiar eso, voy a ir a editar, y voy a ir a copiar propiedades, voy a ir a editar. Vamos a ir a propiedades de ritmo. Oop. Co. Tengo algo de texto y miembro de la barra de búsqueda. Tienes que intentar agarrar el framer por fuera, no el vector dentro Ahí vas ahí. Todo bien. Quiero que estas cosas estén en un auto out. ¿Tienen que serlo? Pensamiento cerebral, probablemente. Voy a seleccionar a ambos, Turno A. Son salida automática. Agreguemos un poco de relleno de blanco. Voy a añadir una sombra paralela. Va a ser me gusta tabular a través de estos números. Va a ser uno, uno, y 25 siempre es un poco demasiado alto. A lo mejor 20. Bien, agreguemos algunas esquinas redondeadas. Recuerda, solo algo muy alto para hacerlos redondos, y vamos a necesitar un poco de relleno. Vamos a tirar cualquier cosa aquí por el momento. Vamos ocho a toda la vuelta. Entonces es ocho tabulación ocho. Necesita más. Eso está bien. Vamos a hacer que funcione la mecánica, y luego podremos ordenarlo. Entonces lo que me gustaría hacer es llegar a donde quiero. Voy a darle a Shift G para encender mis guías. ¿Bien? Ahí vas. Y luego por este lado, quiero que esté todo el camino hasta aquí. Bonito. Turno G otra vez. Bien, eso debería funcionar ahora. Entonces necesita ser un componente, Opción de Comando K, Control Alt K. Es un nuevo día. Creo que en realidad tal vez sea una nueva semana. Creo que la semana pasada dije que dejaría usar los atajos, al menos algunos de ellos. Olvidé cuáles, así que tengan cuidado conmigo. Lo tenemos en un componente. Necesitamos que se desplace en la parte superior, dos variantes. Esta variante superior, quiero que sea agradable y pequeña sacudió así. Guau. Impresionante. Hagamos que funcione mecánicamente. Entonces podemos arreglar todos los errores. Lo que queremos hacer es modo prototipo, y queremos decir que éste va aquí. ¿Qué hace? Al hacer clic Cambiar a éste. No instante, vamos a llevarlo a Smart Animate. Y lo que quiero hacer es que me gustaría que la facilidad de entrada y salida se vea genial. Fresco. Y lo que necesitamos es, este es un componente principal, así que deberíamos ponerlo en nuestra página de componentes principales , pero por ahora, no lo estamos. ¿Bien? Quiero una instancia de esto fuera. Es una especie de dolor arrastrando una instancia. Mantengo presionada la tecla de opción. Puedes mantener presionada la tecla Alt en una Mac para arrastrar una hacia afuera. Un pequeño truco agradable aquí es, recuerda, opción dos nos lleva a los activos, en lugar de ir a través y hacer click, click click, click, click, click, todo el click. Puedes estar de vuelta aquí mismo. B en archivos, vamos Opción o Alt dos y solo teclee en búsqueda, que no va a funcionar porque se llama frame 32. Bien. Entonces voy a llamar a esta búsqueda. Todo eso funcionaría mucho más suave si se llamara búsqueda. Estoy por aquí, estoy como, genial tener el panel Activos, opcional rollo dos, y luego empezar a escribir búsqueda, y ahí está ahí en la parte superior. Voy a decir, tú vas por aquí, vamos a darle una oportunidad. Estamos ignorando el texto pasando el rato. Vamos a hacer clic en ti, vamos a previsualizarlo y los bits van a funcionar. Sh, se expandió. ¿Lo puedes ver? Salió de esa manera para refrescarse, funciona. Un par de cosas que tenemos que hacer. Queremos que pase de si lo tienes por aquí en realidad, va a funcionar. Entonces, si lo querías de este lado, ya terminaste mayormente. Quiero estar dolorido y quiero que el mío esté por aquí. Lo que estoy tentado de hacer es ir por aquí y decir: A No sé qué hacer, diseñar, voy a decir tu restricción a la derecha A lo mejor este necesita ser constreñido a la derecha. No lo sé, y le das una y no funciona porque eres como, eres como, es la instancia real aquí. Recuerde, la restricción no se hace en el componente real. Tiene que ser la instancia. Se puede ver aquí va desde la izquierda y está usando eso como referencia y va por ahí. Voy a decir, vas a la derecha. Démosle un G. Duke. Ah. Lo estamos haciendo. No vuelve atrás, pero sabemos cómo solucionarlo. Bien, volvamos. Entonces va, así que tengo un modo prototipo, y vamos a decir. Todo el botón va ahí. Sin embargo, cuando termines, no agarres el costado. Agarra los puntitos. A veces son difíciles de encontrar, eh Y retroceden por ese camino y todo se ve bien. Inteligente Sí. Recuerda todo lo que duré. Entonces ojalá ahora deberíamos poder alternar , sí y sí Me encanta ese movimiento de ida y vuelta. Quizá un poco rápido. En fin, ahora vamos a cambiar eso. Sí necesitamos deshacernos de la búsqueda. ¿Bien? Puedes hacerlo de dos maneras. Así que tengo suerte. Mi búsqueda cuelga de un lado aquí. Entonces lo que puedo hacer es por aquí y decir sobre esto, tienes bajo diseño, estás recortado M está recortando, por favor sostenga el contenido del clip Ahí está. ¿Bien? Y ojalá ahora vamos a darle para llevar. Se ha ido. Parece un poco raro. No, no lo hace. Se desliza hacia fuera. Perfecto. La otra cosa que mi solo funciona muy a menudo cuando hago esto, aunque, Las cosas no se alinean. Este tipo es empujado en un círculo extraño. No tiene toda la razón. Voy a asumir que el tuyo es lo mismo, roto. Lo que puedes hacer si estás lupa es ser un poco raro, o aún puedes ver la búsqueda, aunque esté recortada. Voy a decir en realidad el marco padre aquí por aquí en el componente. Se puede decir que quiero que tu acolchado sea un poco diferente. Así que voy a dividirlo en los cuatro, para poder verlos a los cuatro y tal vez solo necesites un poco más en la parte superior, o tal vez un poco más a la derecha aquí. Puedes hacer doble clic sobre esto. Vas a estar en modo diseño, pero puedes simplemente hacer doble clic en estos y decir, en realidad, me gustaría que esto fuera nueve. Bueno, puedes usar flecha arriba ph. Entrar? ¿Qué estaba haciendo? Yo estaba haciendo la brecha. Sí, ahí tienes. La brecha es el espacio entre usted y la barra de búsqueda. Si hago éste, empezarás a verlo. Ese es otro consejo. No era lo que intentaba hacer. Si voy arriba arriba, ¿ ves que puedo simplemente empujarlo para que esté fuera está fuera del círculo Con esto, eso va en nueve. Ahora puedo subir arriba solo consíguela donde quieras. Tal vez tengas que cambiar el tamaño de tu lupa. Puedes hacer que toda tu barra de búsqueda sea más grande. Hay muchas maneras de abordarlo. La mecánica ya está ahí. Vamos a previsualizarlo una vez más, y hay otra cosa que sé que quiero hacer. ¿Puedes ver por aquí? Simplemente lo puse al azar en la parte superior derecha. Pero cuando se cae, lo ves demasiado lejos de esta manera, no lejos de esa manera. Es difícil alinearlo porque ya ves, es muy pequeño. ¿Cómo lo haces? Se pueden hacer muchas pruebas. Lo que puedes hacer es un pequeño truco es lo que pasa con una variante es con ella seleccionada, el predeterminado es esta superior. Lo que puedes decir es como, no quiero que sea el predeterminado. Yo quiero ser el segundo y luego puedes alinearlo o Shift G, puedes alinearlo bien, Shift G otra vez para apagarlo y puedes decir, en realidad, solo te usé por un pequeño segundo, vuelve a eso. Ahora bien, impresionante. Bueno, también te darás cuenta, si entrecerras los ojos ahí dentro, hay un poco raro de pixelización que sucede, creo que es la sombra de trabajo No lo sé, ha estado ahí desde siempre y no parece que se vaya. Es un prototipo. Puede que solo lo hayas notado ahora que yo lo he notado , ¿verdad? Entonces estás como, Bien. Aunque sí me encanta. Mírelo. Es genial. Aguanta. Creo que podría tener una manera de deshacerme de él. Tú esperas ahí. No, no puedo entenderlo. Ignorar la pixelización. A menos que sepas, avísame en los comentarios si tienes una solución alternativa A lo mejor solo está arreglado, pero ha sido así unos cuatro años, tres años. Cuando lo haces, como en la app, bien o en un sitio web, puedes hacerlo totalmente y la pixelización no te saldrá a Quizá tengas que suspender un poco tu incredulidad No puedo dejar de darle clic. Será mejor que sigamos adelante porque desgastar esto. Me encanta la idea de una función de búsqueda que utiliza muy poca pantalla inmobiliaria. Está muy claro de qué se trata. Lo haces clic, se expande a una bonita caja grande. Oh, eso sí me gusta. Todo bien. Eso es. Te veré en el siguiente video. 57. Proyecto de clase 15: ampliación de la barra de búsqueda: Bien, tiempo de proyecto de clase, quiero que hagas tu propia barra de búsqueda en expansión con todos los problemas que tiene. Es complicado, se ata en muchas cosas diferentes. Dale una oportunidad. Lo que quiero que hagas es en esta. En el pasado, te he dicho que comentes sobre el trabajo de otras dos personas. Lo que quiero que hagas es bajar a los comentarios y solo ver si alguien necesita ayuda. ver si puedes ayudar a otras dos personas ahí abajo, entonces todos seremos súper serviciales. Si te estás equivocando, sé una de las personas que comente ahí abajo y dice, estoy perdido y explico por qué. Comparte un enlace a tu proyecto también, igual que cuando compartimos proyectos para que la gente los revise, puedes compartir proyectos que la gente pueda echar un vistazo, agarrar el enlace y puedes ponerlo en los comentarios también para que gente pueda descifrar y echar un vistazo a tu Si tienes el tuyo para trabajar, asegúrate de ayudar a algunas de esas personas a salir. No puedo llegar a todo el mundo. Literalmente me llegan cientos de miles de comentarios cada año, pero hago mi mejor esfuerzo. Me encantaría tu ayuda. Así que haz una barra de búsqueda en expansión. Me encantaría ver una animación del mismo. Video subido a los proyectos de clase. De lo contrario, puedes tomar una captura de pantalla de tu conjunto de componentes y solo diremos que lo hiciste funcionar. Si obtienes el video uno en marcha, me encantaría verlo en las redes sociales. No sé qué pasa con eso. Me encantan estas pequeñas barras de búsqueda hinchables y asegúrate de que todos sepan dónde lo estás haciendo Por supuesto de Dan. Todo bien. Disfruta haciendo la barra de búsqueda. Será un poco frustrante. Buena suerte. 58. Ten cuidado con lo que crees en Figma: Hola a todos. Este video es una advertencia. Ten cuidado con lo que creas. Editor, ¿puedes acercar y alejar así? Ten cuidado e. Entonces, ¿de qué está hablando? Estoy hablando de prototipos y animación. Así que animaciones cosas que sólo juegan a través de, ¿de acuerdo? Realmente no haces nada con ellos. Y luego prototipos, bien, lo que estamos haciendo los últimos videos con lo que estamos haciendo los últimos videos es como la interactividad Y 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 ser, sabes, y luego sea despedido y algo que amaba o siendo algo que costaba Ya sabes, a veces algunas de esas interacciones y, ya sabes, habilidades de especialidad pueden terminar duplicando el precio del trabajo o duplicando el tiempo, Así que solo sé consciente de ello. Un buen tipo de manera. Al igual que, hay momentos en los que necesitas todas esas cosas. Al igual que, si estás lanzando a un cliente, a veces necesitas todas las indirecciones para que se sienta y, ya sabes, realmente vender el concepto Podría ser para tu pieza de cartera, ir por la borda para eso Podría ser solo para impresionar al jefe, ¿de acuerdo? Hay momentos en los que necesitas subir de nivel. Pero hay muchas veces en que estamos en realidad voy a empezar a hacer algo y tipo de seguir agregando cosas, y es y he duplicado el tiempo que me llevó construir sin una ganancia neta real cuando se trata de las pruebas de usuario porque eso es lo que realmente queremos hacer. Queremos construir algo rápido, ponérselo a los grupos de interés, ponernos en manos de nuestros usuarios y obtener comentarios. Y, ya sabes, Figma es prototipado rápido. No estoy seguro de por qué hice eso. Es prototipado rápido. No hay nada rápido algunas de las cosas que hemos construido aquí. Solo ten cuidado. Echa un vistazo al término lean UX, ¿de acuerdo? Es algo así como, ya sabes, a veces puedes perderte un poco en los detalles. Y a veces, todo lo que realmente necesita es algo súper rápido, súper wireframing e incompleto para llegar a donde necesitas ir y poder iterar. Entonces, eso es todo. 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, vamos a hacer un poco más. Animación Figma, no es No está construido para eso, ¿de acuerdo? Puedes hacer alguna animación básica. Lo haremos porque es divertido, y nos ayuda a echar a perder las herramientas y a ponernos realmente buenos. Pero si voy a estar haciendo animación por algo, algo que vaya a jugar en la página principal o en la imagen de bienvenida o de héroe, quiero algo de animación, haré en otro programa. After Effects tiene un plugin llamado Body Moving, que tocaremos las animaciones de Lottie Y simplemente lo recoges y lo vuelves a Figma, ¿de acuerdo? En realidad no es una herramienta de animación. Hay plugins que te ayudarán con animación, animación de línea de tiempo , ¿de acuerdo? Sólo sé eso, sí, puedes hacerlo en otros lugares y simplemente tirarlo. Se trata de prototipado, es decir Figma es especialidad. Bien. Así que fue muy bueno en prototipos interactivos, bien, y haciendo ese tipo de rápido Hay límites para ello, también, sin embargo, y si quieres ir extra especial, como, lo sé, fotorrealista, no estoy seguro de cuándo usar estos Pero algo que se ve y se siente como una aplicación real, posible que tengas que luego pasar al siguiente paso con algo como ProtoPie es bastante común Lo tocaremos más adelante. Pero sí, ahí tienes. No diseñes algo que no se pueda construir. Esa es la advertencia de que quería salir de aquí. Bien, eso es. Te veré en el siguiente video. 59. Capas zen en Figma: Hola, mi Figma. Es capa Zent. Voy a traer alegría al trabajar con capas. Grandes documentos confusos que te dan dolor de cabeza. No te preocupes. Zenhem. Ahora, error. Este video te va a traer alegría o te va a aburrir a Tess. Me trae alegría, así que únete a mí en el viaje. Vamos a saltar. Bien. La primera es la tecla Enter o la clave de retorno si estás en una Mac. Lo uso todo el tiempo, especialmente para botones. Puede hacer clic en el botón. En lugar de hacer doble clic, hacer doble clic, hacer doble clic, agarrar el texto Se puede. Seleccione en el botón. Presiona Enter, y simplemente se sumerge dentro del botón y ahora tiene el texto seleccionado Puedes presionar Enter nuevamente, e incluso resalta el texto. Vamos. ¿Eso es útil? No lo sé todo el tiempo. Entra Entra, cámbiame. Escapar para salir. Un par de veces un desec todo. ¿Eso es útil? Simplemente puedes hacer el comando y clic y eso te sumergirá dentro de cosas más complejas. El Enter no funciona para esto porque hay muchas cosas. Vamos a mis capas. Se puede ver dentro de mi Nav hay un montón de cosas pasando, así que podría ser más fácil solo mantener el comando o la tecla Control y hacer clic en eso. Entonces puedes presionar Enter y cambiarlo. Oh, la tecla Enter. ¿Por qué es tan bueno? Oh, se pone mejor. A veces hay que estoy tratando de encontrar algunas cosas complejas, cosas encima de otras cosas. Vamos por este texto. Este pedacito de texto aquí está dentro del pergamino esbelto voluble horizontal, dentro de una tarjeta, que está dentro de un autolayout, que está Entonces están pasando muchas cosas. Lo que realmente me gusta es mantener pulsada la tecla de comando o control, MacOPC y simplemente hacer clic derecho Todos tienen clics correctos, pero miren esto. Se puede escoger la jerarquía. Mira, ¿te referías la revisión como en el marco o te referías al pergamino de revisión? A lo mejor estás viendo la reseña de compra. A lo mejor es la etiqueta en la que está o el texto que se recomienda. Eso me gusta porque solo necesitas esto a veces es difícil ir, cierto, no tú, no respaldas uno. Solo puedes sostener comando o control y escribir clics cosas y decir, quiero sus labios y quiero el marco en el que está. Quieres eso no del todo en el fondo. Estás pensando aburrido, se va a poner más aburrido, pero me encanta. Hay un poco de diseñador OCDME y por alguna razón, esto me lo da Mira lo mucho que está pasando aquí. Lo que realmente me gusta es la opción. Hazte eso tatuado en tu antebrazo o Alt Al no cambies Mac o BC. El tatuaje no va a funcionar. Simplemente me encanta. Mira, yo sólo lo arregla todo. Todo se ha derrumbado y se restaura el Zen. Entonces puedes entrar al campo que quieras y echar un vistazo. Voy a combinar esta. Puedes hacer click en estos Chevrones y ver, digamos este de aquí. ¿Qué hay ahí esto? ¿Qué hay ahí dentro? Lo que hay en eso puedes pasar años tratando de pasar y encontrar todo el TOC se acabó Necesito encontrar todo aquí. Necesito ampliar todos estos Chevrones. Lo que puedes hacer es simplemente mantener presionada la tecla de comando o Control y hacer clic en el Chevron y simplemente se expone Bien, tal vez no se exponga, sino que comparta todas sus entrañas Es una especie de murmullo. Todo bien. Eso es hacer eso. Mantenga presionado el comando, mantenga presionado Control y simplemente haga clic en el Chevron En realidad, tienes que seleccionarlo primero, luego hacerlo. Bueno, buen punto. Así que puedes ver aquí está deseleccionado en absoluto, así puedo verlo todo Nuevamente, no puedes tener nada seleccionado. Y recuerda ese tatuaje, Opción enrollada todo ordenado. Bonito. La otra cosa es que cuando estás por aquí, algunas personas ni siquiera usan páginas. Lo que puedes hacer es que puedes ver las páginas aquí se pueden enmarcar. Tú igual que yo nunca las uso. Quiero más espacio para mis capas. El otro es, digamos, vamos a expandir todo en realidad Seleccionar todo, mantener presionado el Kamankey y hacer clic en uno de estos, y abriremos cada A veces, sin embargo, se hacen bastante largos. Ninguno de los míos es muy. Oh, hay algunos. Puedes ver que cada vez es más largo y más y más y más largo, en realidad puedes simplemente arrastrar esto más grande, tienes un poco más de espacio. Puede que tengas una pantalla muy grande y estés feliz de tener una ventana grande y bonita aquí. Lo mismo con las páginas. Si estás usando muchas páginas, puedes simplemente ir así y decir, todo lo que necesito más páginas porque tengo esta gran pantalla gigante. Puedes hacer doble clic en él y volverá a saltar a la versión más pequeña. Todo eso es. Eso es capas adentro. Ahora quédate. Házmelo saber en los comentarios. Si hay uno ahí dentro, estás como, eso es todo. Es el indicado. Igualmente, avísame si rehago este curso como, Dan, este curso no necesita capas en video Podría cortarlo. Probablemente no lo haré. Me hace feliz. Eso es. Te voy a ver en el siguiente video. 60. Búsqueda avanzada en Figma: Estamos haciendo una búsqueda avanzada, no tan avanzada, pero súper útil, sobre todo si no eres consciente del poder de la misma. Vamos a saltar y hacer algunas búsquedas. Bien, entonces busca un reemplazo. Estarás archivado y no mucha gente sabe que ahí hay un pequeño icono de búsqueda. Puedo escribir algo. Digamos que necesito. Tengo algunos cambios de texto que necesito hacer y necesito muchos de ellos. La palabra, lo que obtuve colectivo. El colectivo Groove está todo el camino a través de este documento. Lo único también a tener en cuenta, Cs lo coloreó, lo hace todo el tiempo. Me asustó cuando lo vi por primera vez. Yo estaba como, ¿Qué ha pasado con esto? ¿Qué estilos le aplicaron? No es ver en la búsqueda apagada, vuelve a la normalidad. Vuelva a activar la búsqueda, obviamente un hallazgo y reemplazo es realmente útil. Voy a escribir en groove collective y hemos descubierto que en realidad está destinado a llamarse groove code dot. Me parece que esto es útil cuando estás a la mitad usando iniciar sesión o registrarte o iniciar sesión. Necesitas ser consistente, así que tienes que ir a buscar todas las instancias a través de un documento grande y decir: Sí, quiero que cambies todas estas y una gran oportunidad. Bonito. Ahora es groove co por todas partes. Reemplazar solo tiene algunas cosas que puedes hacer. Encuentra, sin embargo, vamos a escribir un botón de palabra. Puedes encontrar todo lo que tenga un botón, pero puedes ver que hay demasiado. Estás como, no, quiero todas las instancias. Eso es lo genial Find es que puedes entrar aquí y decir, quiero mostrarte solo las instancias de estos chicos. Aquí están todos mis botones. Muy útil para un documento grande. que ir a cambiar algo. Solo necesitas averiguar dónde está todo. Una cosa es asegurarse de apagar el filtrado y apagar esto con un poco de X si ha terminado de buscar cosas. Uno fácil. En el siguiente video. 61. Cómo cambiar de nombre manualmente de capas con trucos avanzados en Figma: Hola a todos. Voy a tratar de impresionarte con toda mi codificación. Pero en serio, acabo de hacer clic en estos botones. Es una excelente manera de renombrar muchos objetos a la vez. No necesitas saber codificar. Solo necesitas saber cómo hacer clic en los botones y la magia sucederá. Vamos a saltar. Bien, así que voy a pasar a mi página de Interacciones es un poco más pequeña. Aprenderemos esto antes, pero puedes cambiar el nombre usando IA, digamos la página del carrito de compras aquí. Voy a decir, haz clic derecho y quiero que uses esta función de renombrar capas y AI y simplemente haz clic en ella y mira la magia. Hermoso. Una de las grandes cosas que me gustó donde estaba usando el nombre. ¿Bien? Dice, era Groove Collective, por el título aquí arriba. Pero una vez que he hecho el cambio de nombre, lo llamó nombre de artista, y tú eres como, Oh, eres bueno Esto va a cambiar con el tiempo. Se puede ver aquí, marco 23. Eso no cambió. Entonces lo que puedes hacer es decir, en realidad, cambiar el nombre de este tipo, renombrarle el nombre a Laos y podría simplemente decir, Oye, no hay nada que necesite renombrar como, hazlo de todos modos Y a veces simplemente lo hace bien. Estás como, vas Aquí jickbton. Todo bien. Pero ahora queremos hacer algo un poco más manual porque es bueno y podría acercarte a donde necesitas llegar, pero hay veces que solo necesitamos hacerlo automáticamente. Tengo algunos íconos. Si estás preguntando por estos, son súper geniales. Son del icono ocho y lo son. Tres D más la sina. Nunca he podido usarlos más que en clases, pero se ven tan geniales. Voy a seleccionarlos a todos, pasar el cursor por encima. Hagamos el orden. Por alguna razón, ordenar no quiere hacerlas horizontalmente. Verticalmente real, ¿no? Puede mantener presionada la tecla de rollo V opcional. Esa es una práctica, opción V o H, horizontal, vertical. No los quiero alineados horizontalmente, deshacer. Es sólo un atajo para estos dos. Entonces, si pasas el cursor y pasas el mouse, yo uso esos bastante Bien, entonces tenemos nuestros íconos, y ves que vinieron directamente del ícono ocho llamado Trash Share y en Bookmark, lo cual es bueno. Hace que sea difícil encontrar el indicado. Yo los llamo a todos icono, y puedo dar click en ellos y solo teclearlo. Pero en un hit escape, no quiero eso. Voy a decir ustedes, si me resbalo en uno de ellos y goommand ese es un Se puede ver resaltado en el panel de LaaS para que pueda empezar a escribir Tienes más de uno seleccionado y presionas exactamente la misma tecla, comando o control, luego va a esta cosa. Esto es como el renombrado a granel. Lo bueno de esto es que se puede decir, en realidad, quiero renombrar dos, ¿qué? El icono de la palabra. Se puede ver lo que está haciendo. Lo está llamando icono. Quiero darle un número, ascendente, descendente, así quiero ir icono uno, dos, tres. ¿Ves lo que se hace ahí? Esta es una expresión de alguna razón, signo Dlo N es número, y N es otro número. Entonces hay dos de ellos. Podrías deshacerte de uno de ellos. Quizás quieras llamarlo icono uno, dos, tres. Mira, hacker informático. Realmente no sé cómo funcionan estas alas. Los uso un poco en el diseño. Tienen algo que se llama estilos grep. Es muy similar. Si tienes algo complicado, podrías acudir a un desarrollador y preguntar. Hay alguna documentación sobre Figma si usted mismo es una especie de desarrollador sobre cómo hacer que funcione. Lo mantendremos simple. Lo que quiero hacer es agregar el ícono de la palabra. Quiero añadir un número, sólo uno de ellos, no dos. No cuatro ni cinco, sólo uno. Entonces lo que me gustaría hacer es poner en un espacio, un guión y un espacio Esta es totalmente no necesariamente solo la forma que me gusta nombrar las cosas y quiero usar el nombre actual. Alguna razón signo de dólar y es el código para usar su nombre existente. Fresco. he renombrado de basura y agregué marcador a icono con un sistema de numeración y luego solo use su nombre actual. Renombrar, lo hace. Fresco. Entonces si tienes recuerda la búsqueda del último video que fue aburrida. Puedes pasar y encontrar cosas. Bien, encuentra todas tus instancias de botones, esa, esa, y solo hay dos en esta página en particular. Pero imagina que tenías mucho más, luego golpeaste tu mando o control. Bien se puede decir, en realidad, me gustaría usar el nombre actual. Yo no. Yo sólo quiero que estos tipos llamen primaria. Eso podría ser suficiente o quieres primaria y quieres usar la numeración. ¿Bien? Y les va a cambiar el nombre. Bien, hay un cambio de nombre masivo. Puedes usar las funciones de IA, pero a veces solo necesitas usar el tipo de manual y no tengas miedo del código. ¿Bien? Básicamente, estos son tres que usarás y solo mira la vista previa por aquí. ¿Qué quieres hacer? Cancelar. Todo bien. Espero que haya sido de ayuda. Somos maestros de capas. En realidad, lo haré una vez más sólo para ser lento. Se puede continuar. Si tienes el truco de esa. Voy a deshacer, deshacer, deshacer deshacer hasta que estos tipos vuelvan a ser cosas regulares. Vamos, ahí vamos. Sólo una más. Sé que en clase, a veces uno más uno a través es útil. Entonces los tengo chicos, más de uno seleccionado. Ir Comando o Control R, para cambiarles el nombre. Y voy a decir, me gustaría que los llamaras iconos con un número. Entonces lo voy a poner en un espacio en un guión sin ninguna buena razón porque me gusta el aspecto del mismo, y luego voy a decir que usen sus nombres actuales Haga clic en renombrar y ya están todos hechos. Ahí vas. Suave. Es posible que tengas un montón de cartas con características en ellas. Sea lo que sea que necesite cambiar el nombre a granel, seleccione más de uno, Comando o Control R. Todo bien. Eso es. Nos vemos en el siguiente video. 62. Encontrar componentes con IA: Tú, vamos a hacer algo súper duper increíble. Me encanta este video. Se llama encontrar componentes con IA, que suena cojo ish, pero hombre, es genial Un montón de buenos atajos el ven principal es como, necesito un boleto. Dame unos que se vean así de la comunidad y solo poder arrastrarlos y usarlos. Listo para rodar. Vamos a saltar. Todo bien. Hemos estado sacando nuestros activos del panel de activos. Este activo muestra un dolor en el trasero cambiando entre estos dos. Hay un atajo Shift I en Mac y BC que saltará a buscar en tu panel de Activos en esta pequeña ventana de aquí. Puedes escribir cosas. Digamos que necesito un boleto. Sé que tengo un ícono de boleto. Lo ha encontrado. Puedo mucho más fácil. Turno I. Lo que está haciendo es saltar a esta opción aquí y luego ir a activos. Es solo una forma diferente de llegar a lo mismo, pero turno automáticamente te llevaré ahí. Turno I. Lo otro chulo de ello es digamos que el boleto no es muy tickety La gente no está segura de que sea un boleto. Entonces, podemos escribir boleto. Lo que realmente me gusta de ello, es revisar el resto de mi documento. Solo encontré uno es que puedes ir a la comunidad, y lo que va a hacer es mirar archivos de la comunidad de todos y encontrar boletos dentro de ellos. Entonces este de aquí por Tamsburg lo puedo arrastrar. Yo sólo puedo empezar a usar esa. Lo único de lo que hay que tener cuidado es que esto se cumplió como un componente principal, listo para funcionar. A veces salían como instancias. Entonces solo verifica dos veces si es una instancia. Solo necesitas hacer clic derecho en él y decir desprender y luego puedes convertirlo en tu propio componente principal Turno I. Digamos que volvemos a hacer boleto y digamos que te gusta ese boleto. Estás como, bueno, así. Me pregunto si realidad hay algo bajo la comunidad. Di que te gusta este, o te preguntas cuál es el resto. puede con él seleccionado, se puede decir abierto y comunidad y va a ir al archivo del que se lo robó, y robar no es la palabra correcta. Este es el archivo. Puedo entrar en él, y abrir el archivo comunitario del que lo tomó prestado Eche un vistazo, usemos nuestra función de búsqueda dulce. Kit de garrapatas. Nada en esta página. Son todas las páginas. Desplaza dos para acercarlo porque estaba escondido ahí dentro, pero ahora puedes ver todos los demás que podrías usar. Pero no nos confundamos. Puedes ir y mirar de dónde lo sacó, pero realmente me gusta. Di que necesitas, bien, tengo que hacer un botón Compartir. Turno I, escriba Compartir. Buscaré para ver qué tienes actualmente en tus bibliotecas, cosas que has hecho, pero también fuera comunidad. Puedes echar un vistazo. Estarás como, ¿Qué se parece a ella? A mí me gusta esa. Arrástralo y empieza a usarlo. Recuerda, selecciónala. Sólo revisa dos veces. Que es este. Usted ve aquí, esta es una instancia, no el componente principal real. Podría hacer clic derecho en él e ir al componente principal y abriremos el archivo del que lo obtuve , pero solo quiero desconectarlo Voy a convertirlo en un componente principal para mí. Oh, se pone mejor. Esa es una búsqueda visual. A veces estás como, quiero que encuentres que esta es una dura. Digamos la persona. Eres como, A, esta persona de aquí. Quiero encontrar un reemplazo. Haz lo que dijo Dan, Turno D, escribe personas. No. Es una persona. Está mirando a través de mis cosas. Sólo tengo uno. Vamos a la comunidad, persona. Algo así como lo que quería. Hombre. Puedes pasar años como, no es lo que yo quería. Esto es realmente genial. Así que voy a cerrarlo. Con ella seleccionada, puedo decir ésta de aquí. Usa la IA para ir a hacer una búsqueda visual de lo que he seleccionado. Lo hizo. ¿Cómo se llama realmente? En realidad no dice, pero me ha apuntado muchas opciones diferentes. Se puede decir, en realidad, me gusta esa. No, este me gusta. arrastrarlo y simplemente empezar a usarlo. Listo para rodar. ¿Bien? Entonces ahí hay un par de cosas. Desplaza el grande, abre abre tu carpeta de activos. Puedes escribir cosas. Botón, Shifte, escribe cosas. No entre y eche un vistazo a las cosas que tiene en tal vez solo su biblioteca o vaya a la comunidad. Veamos qué otros botones se están haciendo . Tantos botones. Si no puedes pensar en ello o solo necesitas una guía visual para hacerlo, solo tienes que hacer clic en esto y decir, lo mismo, turbio. Haga una búsqueda visual, por favor. Echa un vistazo a mis documentos, pero también qué tienes en la comunidad. Muchos corazones diferentes. Todo bien. Eso es. Feliz encontrando componentes en el dulce nuevo atajo Shift I. 63. Intercambio de instancias dentro de un componente: Hola. En este video, vamos a hacer un intercambio de instancias. Significa que puedo tener un botón y simplemente elegir entre diferentes instancias que se sientan dentro de él. Puedo ir rápido, necesito el plus. Hecho. Esto es diferente a crear un botón que tenga todos los diferentes iconos listados. Solo podemos tener un componente principal y podemos decirle, Oye, esta pequeña área de aquí, puedes usar estos diferentes iconos si quieres sin tener que ser tan específicos. Esto se vuelve más amargo Cuatro no es tan malo para la varianza. Pero cuando obtienes algo como esto, entonces necesitas campo de entrada, y necesita tener tantas variaciones diferentes, algunas de ellas tienen etiqueta, algunas de ellas no, algunas de ellas tienen desplegable de textos. Algunos de ellos tienen la cosa del globo ocular. Hay tantas variaciones diferentes que terminas con un archivo como este solo por una forma simple. Entonces vamos a aprender a hacer un intercambio de instancias. Entonces podemos tener solo un campo o en este caso, botón. Empezaremos con un botón porque es más sencillo y solo ve, Bien, puedo escoger entre cualquier número de estos componentes preferidos ahí dentro. Un botón para gobernarlos a todos. ¿Todo bien? Vamos a saltar. Bien, para comenzar, he creado un botón, solo un marco realmente simple con algo de texto en él, y lo hice un Auto out para que se expanda. Está trayendo algunos iconos, Command Shift K en una Mac, Control Shift K en una PC, y hay una carpeta con algunos íconos especiales en ellos o especiales. Los que queremos usar llamados iconos dos, agarrar los cuatro, abrirlos, y voy a hacer clic una, dos veces, tres veces, cuatro veces. Tengo todos mis íconos. Necesito asegurarme de que este botón sea un componente. M, y lo mismo con estos. Selecciónalos todos, y voy a decir, me gustaría que estuvieras o múltiples componentes. Bien, entonces estos son mis componentes principales. Lo que quiero hacer es agarrar una instancia, digamos de la garrapata. Entonces voy a simplemente arrastrar una copia y voy a poner dentro de mi botón. Debido a que es un diseño automático, refluye. Ahora voy a arrastrar una instancia de mi botón, que he llamado fotograma dos, tal vez llamemos otra cosa. Llamémosle a éste. Pero un nombre terrible naranja para ello. Porque lo primero que vamos a hacer es con la instancia, vamos y simplemente cambiemos el color solo para que quede más claro lo que estamos haciendo. Entonces los componentes principales aquí arriba, instancia aquí abajo. Lo que puedo hacer con la instancia y saltarme todas las molestias que vamos a aprender, no la molestia, pero todas las cosas elegantes es que podría entrar en ella, hacer clic en la garrapata y decir, realidad, no quiero que se haga. Quiero cambiar la instancia con ¿dónde la quiero? No este, el lápiz, el lápiz de ahí. Eso funciona bien. Cuando estoy trabajando por mi cuenta, el problema con eso es que es difícil saber a cuáles se les permite estar aquí. El lápiz, estás como, Oh, ¿ es éste, es este otro? Hay tantos en mi página de componentes. Qué podemos hacer para ser geniales y hacerlo más fácil para nosotros mismos, para sistemas de diseño más grandes, y para diseñadores junior, puedes decir en este componente principal aquí, puedes decir, mira este tick aquí, haz clic en el Tick dentro de él. Entonces esta instancia, puedes hacer algo llamado Instant swap. Con un ti seleccionado, es la instancia dentro de mi botón. Puedo decir, mira esta opción aquí. Dice, crear propiedad de intercambio de instancia. Se puede decir, Hop vamos a llamarlo icono para que quede claro lo que estamos intercambiando El valor por defecto se va a hacer, está bien. Lo que puedo hacer, esta es la parte de aquí. Dice valores preferidos. Puedo más y decir, me gustaría qué quiero cerca para ser uno de ellos, me gustaría que se hiciera para ser uno de ellos, y no ese, ¿cuáles otros tenemos? Lápiz y plus. Lo genial de eso, si la cierro y creo la propiedad, solo significa que cuando alguien va, Ar necesito un botón. Voy a alargar una instancia de ello y pueden decir, A ¿nos vemos por aquí? Icono, ¿Qué icono quieres? Estos son los únicos para elegir, no la gran lista gigante de componentes en todo su documento o su sistema de diseño. Es sólo que es mucho más claro. Co. Te voy a mostrar esto para que puedas ser increíble, pero también para que cuando encuentres un botón y estés como, ¿ está pasando esto? ¿Qué es este vudú? Es porque han hecho un intercambio instantáneo. ¿Podrías encontrarte con problemas? No realmente problemas, pero estos íconos los elegí específicamente porque ves esto, es la misma altura y ancho, 16 por 16, este, 16 por 16, este, 16 por 16, este, 16 16. Entonces, cuando hacen el intercambio, es una buena superposición. Si terminas poniendo muchos tamaños diferentes en él, se vuelve más complicado Es por eso que cuando encuentras conjuntos de iconos, encontrarás que suelen ser. Ves, esto es más estrecho que el lápiz, pero lo ponen dentro del marco padre, y es una altura y un ancho específicos, para que todos sean matchy matchy Porque lo combinas con una variante, al 100%, ¿bien? Si no te gusta de esta manera, la razón por la que es bueno es que el componente principal es justamente esto. Mientras que si tuviéramos una variación, tendríamos que hacer esto, tendríamos que tener esta , y luego cambiaríamos esta de cuatro. Vamos a borrarlo. Vamos a agarrar una versión de esto. Eso está bien. Entonces tendría que tener otro y otro, y otro, y eso está bien si hay cuatro. Pero cuando empiezas a llegar a versiones de botones que tienen innumerables variaciones, se vuelve súper complicado Sí, esa es una linda introducción a ello. Simplemente usando botones. Se llama intercambio de instancias y puedes tener un botón, y puede hacer mucho trabajo diferente. Impresionante. Te veré en el siguiente video. 64. Cómo usar la propiedad de componente booleano en Figma: Muy bien, todos. En este video, vamos a ver las propiedades de los componentes. A éste se le llama lingotes, ¿ y qué hace? Es muy genial. simplemente encenderlo y apagarlo ese icono que creamos. Significa que podemos decir, tengo este componente maestro que puede hacer algunas cosas. Puedo decir, A, quiero que sea el hecho o el cierre. Pero en realidad, ¿sabes qué? Ninguno. Eso somos nosotros haciendo una propiedad de componente de lingotes Suena nombre raro, pero puede ser súper. Vamos a saltar. Derecha. Para hacer nuestro pequeño interruptor de encendido y apagado, encuentra el componente maestro y encuentra lo que quieres apagar. Lo conseguí seleccionado y voy a ir a aquí y apariencia y ahí está esta opción aquí. Esto es aplicar una variable o una propiedad. Vamos a aplicar una propiedad, y vamos a ir a plus y la propiedad va a ser, se puede ver que está incumplida con este lingote Ni siquiera se refieren a ello como mil millones más. Es una palabra rara, me ha dado algún buen nombre. ¿ Quiero mostrar lo hecho? En realidad quiero llamarlo icono porque va a sembrar muchos iconos diferentes. El valor por defecto va a ser. Propiedad. Ahora agarro mi instancia y puedo decir, ¿ A qué? Icono que quiero mostrar? A lo mejor el hecho. En realidad, no quiero ninguno. Ahí vas. Vamos. Porque es un cobarde automático, refluye No me preguntes qué es lo morado. Lo estaba buscando y estoy como, ¿Qué carajo es eso? No lo sé. Parece que no tiene vista previa, y si me pueden decir de qué se trata, házmelo saber en los comentarios. He cazado a través de las opciones de vista. Parece que simplemente se va. ¿Puedes ver? Ahí se ha ido. Creo que podría ser solo un ahí vas. Así es como encender y apagar las cosas. Puedes ver cuando lo combinas con, yo lo quiero puesto, pero quiero que sea lápiz, este pequeño componente maestro es bonito y pequeño, no un montón de variaciones, teniendo todos los íconos, y luego con él apagado otra vez. Muy chulo. Todo bien. Siguiente video. 65. Cómo hacer un campo simple con propiedades de los componentes: Bien, todos. En este video, vamos a combinar lo que hemos estado haciendo el último par de videos en algo diferente. Lo estaremos haciendo por el botón. Vamos a hacer exactamente lo mismo. Vamos a encender y apagar las cosas e intercambiar íconos. Pero lo vamos a hacer para un campo de texto porque es lo mismo, pero se siente diferente cuando se usa de manera diferente. Es un buen resumen de lo que aprendimos. Este tipo de aquí puede tener una etiqueta encendida y apagada, puede tener el icono encendido y apagado y el icono se puede apagar. Estamos haciendo. Salta. Para empezar, dibujé algo que parecía un campo. Es solo un marco con un trazo alrededor del exterior y esquinas redondeadas. Pongo algunos textos por dentro. Ni siquiera está haciendo nada. Simplemente no es auto louts solo pasando el rato e hice un gris claro También se le acredita un poco de texto, dice etiqueta. Empecemos con éste. Vamos aquí arriba por una etiqueta para nuestro campo, y vamos a agarrar todo esto, convertirlo en un componente. Entonces vamos a ir dentro de esto y agarrar un poco de texto. Por aquí donde dice apariencia, queremos decir, quiero agregar uno. ¿Queremos mostrar la etiqueta? Sí, por favor. Ahora cuando lo arrastramos y tenemos nuestra instancia, podemos decir, mostrar la etiqueta. No quiero mostrar la etiqueta, puedes cambiar el texto aquí. Esta va a ser, digamos, fecha de nacimiento, Dp. Vamos y agreguemos también el intercambio de instancias. Voy a ir a importar un par de íconos. Comando Shift K, Control Shift K en una PC. Hay otra carpeta llamada íconos tres. Tengo estos dos íconos. Voy a hacer clic una vez, hacer clic dos veces, agarrarlos a los dos. Son las tallas adecuadas. Tienes 18 por 18 y eres 16 por 16. Vaya, vas a tener que cambiarlos. Porque realmente quiero que sean del mismo tamaño. Voy a seleccionar ambos y hacer múltiples componentes. Voy a agarrar una instancia del mismo, no el miembro principal del componente. Un componente principal no puede vivir dentro de otro componente principal, así que vamos a agarrar tu instancia, ir adentro, todos los UPS por ahí. Ahora lo que vamos a hacer es que vamos a decir que esta cosa se mueve, ¿verdad? Usamos el de ahí abajo y luego este se ve ligeramente diferente. Ves que los íconos son ligeramente diferentes. Aplicar propiedad variable, y esta aquí es un intercambio de instancias. Muy similar. Haga clic en eso y ¿cuáles quiero permitir que las personas usen? La marca de verificación. Eso abajo. Obtuve mis valores preferidos, propiedad arrastrada. Ahora, ojalá, esta cosa de aquí, puedo decir, ¿ quieres la etiqueta? No. ¿Quiero el peligro? Esta es la marca de verificación, pero a veces queremos apagarla. De vuelta a nuestro componente principal, averíguese componente. Entonces nuestra instancia dentro de aquí, digamos, aquí abajo, apariencia. ¿Quiero que aparezcas la propiedad muestra peligro? Voy a llamarlo show icon. Crear propiedad. Ojalá ahora este tipo, puedo decir en realidad mostrar la etiqueta dentro y fuera del icono de encendido y apagado. Y elige un ícono diferente. Mira lo que hicimos. Ignorar el morado. A lo mejor hay un poco rápido, puedes volver a verlo de nuevo. Es exactamente lo mismo que hicimos en el último video, pero hicimos un botón, lo cual es útil, pero estos campos pueden llegar a ser muy útiles también. Una cosa que podría hacer es por mi componente principal es que esto parece estar al revés. Quiero etiquetar, luego activar y desactivar el icono, luego elegir qué instancia del mismo. En mi caso, quiero cambiarlo de se llama instancia. Llamemos a esto un icono. Sólo para que quede un poco claro aquí. Síp icono, marca de verificación. Haciendo cosas. La única otra cosa es que apenas me salté a la mitad es que ese poco de texto está centrado, tengo que volver a mi componente principal y decir, que quedar alineado y volver por ahí Este mantuvo el perfumado, lo cual es interesante. Si arrastró un nuevo componente, permanecería alineada a la izquierda Pero no me di cuenta que podías Oh, no lo es. ¿Por qué no? Estás alineada a la izquierda. Todos deberían venir a dar el paseo ahora. Vamos a arrastrar otra instancia. Dan se está perdiendo, convirtió un tutorial fácil en Dan se pierde tutorial. Sí. Yo estoy trabajando, y estamos combinando cosas y estamos siendo elegantes. Podría haber muchos casos en los que necesites encender y apagar las cosas e intercambiar instancias solo para que tu componente principal sea agradable y pequeño, fácil de compartir, pero pueda convertirse en muchas versiones diferentes. Espero que eso haya aclarado ish. Bien, te veré en el siguiente video. 66. Proyecto de clase 16: Es tu cumpleaños: Hola. Es tiempo de proyecto de clase. Quiero que pongas en práctica lo que hemos aprendido. Bien, vamos a crear este campo aquí y tiene un montón de cosas que queremos usar. Vas a necesitar crear una etiqueta que necesite ser activada y desactivada. Lo mismo con el icono, y el icono cuando está encendido, puedo elegir diferentes íconos y texto auxiliar en la parte inferior también y el texto de muestra que va en el medio. No olvides en tu componente principal que tal vez quieras reorganizar estas cosas Acabo de notar que las cosas llamadas instancia, probablemente quieran llamar a ésta. Así que nombra bien y haz el pedido correcto porque probablemente quiero el texto de muestra justo en la parte superior. Parece una de las más importantes. A, en tu archivo de proyecto de clase, así que crea un campo de entrada usando las propiedades de los componentes. Lo importante es que cuando estás haciendo propiedades de componentes, a veces está en la parte superior y a veces está aquí abajo en apariencia. Si no está en la parte superior, está abajo en apariencia. Esa es la única cosa que no sé. Si hace tiempo que no los he hecho, me olvido de cuál estoy haciendo clic. Co. Entonces necesitas un campo, que es solo la caja blanca. texto de muestra debe estar activado apagado etiqueta encendida, texto auxiliar desactivado y el icono activado, pero tiene ese intercambio instantáneo. Puedes usar mis iconos, puedes encontrar los tuyos propios. Los entregables, quiero que tomes una captura de pantalla de tu componente principal, incluyendo las propiedades Te voy a mostrar aquí. ¿Dónde está mi componente principal? Tenlo configurado cuando haga clic en esto, puedo tomar una captura de pantalla de todo eso de una vez. Puedo ver mi componente principal, pero en realidad podemos ver todas las diferentes propiedades y ver si las nombra bien o no. En realidad, realmente no me importa cómo les pongas nombre para ver si puedes conseguir que funcione. Es complicado de hacer, pero puede ser súper útil y aún más útil cuando te entregan las cosas de otra persona y dices, aquí tienes y estás como, Guau, está haciendo todo tipo de cosas increíbles. Ya sabes cómo se hace. El tuyo. Todo bien. Disfruta del proyecto de clase. Te veré en el siguiente video. 67. Cómo curvar texto con tipografía en un trazado en Figma: Yo Hola a todos. En este video, te voy a mostrar cómo poner texto en un camino dentro de Figma. Vamos a saltar. Bien, entonces tienes que empezar con la forma. Voy a usar el círculo. Entonces, usando el atajo O en mi teclado, manteniendo presionado Shift para obtener un círculo perfecto, luego cambie a la herramienta de tipo y simplemente haga clic en el borde. Verás el cambio de icono de los cruces a esto y simplemente haz clic donde quieras que comience Aunque no lo consigas en el lugar correcto, selecciónalo todo. Voy a mantener presionada mi tecla de opción PC y simplemente arrastrarla más grande. Lo que puedes hacer es volver a la herramienta de selección y notarás que la tengo seleccionada. ¿Ves este puntito? Ahí es donde empieza. La mía está alineada a la izquierda. Voy a poner el mío en el centro ahí y cambiar mi alineación regular de texto antiguo al centro. Ahora está en la cima. Se nota que la forma cuando es invisible. Si aún necesitas un círculo, tienes que dibujar una segunda elipse para usarla como parte media Porque estamos usando ese círculo original como texto en el camino. Ahora, podrías ir a dibujar y agarrar cualquiera de estas herramientas aquí dentro. Voy a usar la herramienta lápiz y voy a dibujar una forma y es lo mismo aquí dentro. Agarra la herramienta tipo y simplemente puede hacer clic en ella y nosotros podemos escribir. Las otras cosas que puedes hacer es, vamos a deshacernos de eso. Con los seleccionados, puedes jugar con lo básico. A menudo necesitas jugar con el espaciado entre letras para tal vez acertarlo porque está avivado, depende de lo agudo que sea tu círculo La otra cosa es que aquí abajo tienes algunas opciones nuevas, C por aquí. Puedes enviar mensajes de texto sobre ruta, puedes decir texto por el medio debajo, dependiendo de lo que necesites. Lo que me preguntan mucho es ¿cómo lo haces por ambos lados? En realidad no lo haces. Sólo tienes dos círculos separados. Voy a hacer limerick. Dos cuadros de texto separados, y lo que voy a hacer es, oh, hay una opción de voltear. Olvidé mencionarlo. Voy a rotar esto alrededor y lo quiero por debajo de la línea, y ya ves puedo hacer que esta cosa se sienta como si estuviera alrededor de una elipse voy a poner mi carga Entonces voy a pasar años consiguiendo que todo quede bien, jugando con el interlineado. Pero eso es lo básico. Puedes hacerlo alrededor de un círculo, un garabato, un cuadrado, una estrella, lo que quieras Eso es texto en un camino dentro de Figma. 68. Proyecto de clase 17: texto curvo: Es tiempo de proyecto de clase. Quiero que uses la función de texto de curva y rehagas tu logotipo Puede ser realmente simple. pasar un poco más de tiempo. No es realmente el punto. Es solo jugar con el texto de la curva. Un nuevo logotipo, asegúrate de usar uno o más elementos de texto de curva y sube una captura de pantalla. También me encanta verlo en las redes sociales. Si buscas inspiración, algo así como regatear Acabo de ingresar el logotipo de la placa, a veces se llaman logotipos de emblema Pero se puede ver aquí solo curva. Este es el círculo redondo completo hasta ti. Asegúrate de etiquetarme en las redes sociales. Me gustaría ver lo que haces. No estoy seguro de por qué el texto curvo es increíble, pero es Que te diviertas y te veré en el siguiente video. 69. Cómo hacer que los cuadros de texto se alineen con el borde usando Recorte vertical: Hola a todos. Vamos a ver el recorte vertical. Si eres como yo, y estás como, puse mi relleno en ocho píxeles, y estás como, No está ni cerca de ocho píxeles. ¿Cuál es esta gran brecha aquí? Te voy a enseñar cómo apagarlo. En realidad, es muy fácil ir a aquí y hacer clic en ese botón. Pero hay un poquito más que eso, así que vamos a saltar. Pero mira qué buenas son las líneas ahora. Bien, voy a comenzar con el tipo de herramienta tipo, y voy a usar tecleando el botón word. Voy a escapar para salir de la herramienta tipo y verás que solo estoy usando Inter, que es el valor por defecto para figma, y voy a convertirlo en un Autolayout y voy a darle ¿Y qué vamos a hacer? Bueno, si hago clic en el marco padre aquí, notarás que tiene relleno horizontal y vertical de ocho por defecto. Lo que notarás es, ya ves si me pongo encima del relleno vertical, ¿ puedes ver el ocho de aquí arriba es dejarme moverlo para que podamos acercar ¿Puedes ver? No está ni cerca del texto real. Los lados están más cerca, pero la parte superior y la inferior no están cerca de ocho píxeles. Puedo contarlos. Están tan cerca. Eso es ocho, nueve, diez, 11 píxeles. Lo que está pasando es que el tipógrafo decidió que el apto, que es la letra mayúscula, se encuentra tan abajo y tan lejos de la Cada fuente es diferente. Si lo cambio para ir por este ultra uno. No es lo mismo que el Inter. En realidad, está bastante cerca. Déjame pensar en otra. Creo que Leto es diferente. Bien, puede ver que Lato tiene unos 3.5 píxeles antes de que se acerque a la parte superior ahí Lo que podemos hacer, voy a volver al Inter es con el texto seleccionado, puedes ir a la tipografía, ir a la configuración aquí, y puedes activar esta cosa Se llama recorte vertical o sea que llamen a este tope de altura a línea de base. Simplemente ajusta la caja alrededor de cuál es el tipo real. Nunca va a ser perfecto. Ya ves, mira, ¿qué es eso ahí? ¿Por qué hay un espacio ahí? Será porque algunas de las otras letras mayúsculas serán mayores o menores que esa. Todos son iguales. Supongo que lo que quería decir es que nunca lo conseguirás perfecto perfecto. Pero usar el recorte vertical te acercará mucho. Ahora se parece más a que si hago clic en el texto dentro, tengo el cuadro de texto mantenga su tecla de opción, llave vieja en una PC y simplemente pase el cursor Puedes ver que está más cerca de los ochos. Eso se llama recorte vertical. Si pasas años tratando de alinear las cosas y estás como, ¿por qué no está alineando? Perfecto. Experimentar con molduras verticales. Pero debes saber que algunas fuentes son diferentes y vas a tener algo de extravagancia con algunas de las fuentes al menos Bien, ribetes verticales. Te veré en el siguiente video. 70. Truncar texto en Figma…: Hola a todos. En este video, vamos a ver los truncamientos, el punto punto punto que aparece cuando tienes el páramo S. Es muy bueno cuando estás haciendo cartas. No iba a incluir esto en curso avanzado, pero termino haciéndolo mucho cuando estoy copiando y pegando muchos textos para llenar los campos Has diseñado para las pequeñas cuatro o cinco líneas, y luego tienes que revisar todos los demás listados y falsificar el punto punto punto. Podemos encenderlo en el componente principal y conseguir que se haga automáticamente. En realidad, es solo esta topografía, Truncamiento encendido con un par de líneas. Esa es la versión fácil. Déjame explicarte un poco más y esperar hasta el final, hubo un problema con el que me encontré que tú también podrías hacer si has estado siguiendo junto con el curso. Vamos a truncar cosas. Para que esto funcione, no hay nada de autolayout ni nada al respecto, voy a convertirlo en un componente Quiero otra versión de la misma, y el siguiente grupo es el prodigio, y vamos a estar llenando todos estos listados diferentes, y lo tengo ya sea de una base de datos o de copia y pegado o de Yo soy como, Oh, oh, podríamos ir al cuadro de texto. Lo que he hecho en el pasado es con el cuadro de texto seleccionado. Yo solo paso y borro todo esto y borro un poco más y luego agrego borro todo esto y borro un poco más y mi propio punto punto Truncation y lo falsifico. Pero hay una manera fácil. Con todo eso todavía ahí, lo que podemos hacer es volver al componente principal. Agarra la caja y debajo de las propiedades del texto. Tienes esta opción que dice truncar Texto. Se puede ver ahí, la parte inferior del cuadro de texto, se truncará y todo y todas las instancias también lo harán El texto sigue ahí y sigue siendo editable, pero te darás cuenta de que cuando salga, sin embargo, todo va y agrega el Truncamiento Agradable y fácil. En el momento en que mi cuadro de texto se establece en un tamaño fijo. Si opta por la altura automática, lo que significa que se expandirá y contraerá, puede volver a esa misma configuración de topografía y puede obtener líneas Mx. Eso es sólo con así que voy a ponerla en tres. Todos van a tres. Sin embargo, lo único que debe verificar es asegurarse que está configurado Altura automática y solo entonces aparecerán las líneas máximas. Una de las cosas que encontré en los últimos videos cuando estábamos jugando con el tipo en un camino, lo hice mientras el valor por defecto estaba establecido para esta línea media Voy a apagar el Truncation. Entonces ya hemos hecho Truncation, apágalo ahora porque quiero mostrarte el problema que tuve Cuando agregué mucho texto, comenzó a expandirse desde el medio hacia afuera en ambos sentidos. ¿Tuviste ese problema también? Es porque estábamos metiendo con el tipo en un camino Lo conseguimos para correr en el centro. Solo necesitaba asegurarme de ir a mi caja original aquí y la puse en la parte superior, que es la predeterminada y volver a ponerla en posición y luego comencé a funcionar. Volveré a encender mi Truncation. Oop. Configúrelo en una línea. Sube dos, tres o cuatro. Impresionante. Eso es Truncamiento. Simplemente lo escribiremos en punto punto punto, y haremos muchas eliminaciones. Bien, eso es. Te veré en el siguiente video. 71. Enmascaramiento de imágenes con IA para eliminar fondo: Hola a todos. Vamos a usar la herramienta de enmascaramiento de IA dentro de Figma. Te voy a mostrar las cosas que son buenas de ello, algunas de las cosas extravagantes que están mal al respecto Pero en general, hace un trabajo bastante increíble. Y si esperas hasta el final, voy todos los años 80 en él, y te mostraré una genial herramienta de color Figma Bien, vamos a saltar . Todo bien. Primero sta, tengo algo que compartir. Esta es la tercera vez que grabo este tutorial. He estado grabando la pantalla equivocada dos veces seguidas. Entonces te voy a enseñar sobre la máscara, y voy a hacerlo de una manera loca y gruñona Por mucho que se hizo gruñón Oh, bien. Lo que tenemos que hacer es traer algunas imágenes. Entonces quiero que traigas de tus archivos de ejercicios oh 912 y 13. Tráelo en Acabo de crear una nueva página llamada Images, solo para tener algo separado. Vamos a empezar con este de aquí. Esta es una imagen generada por IA, pero tiene un fondo. Podríamos trabajar con IA para ver si nos podían dar uno sin antecedentes cuando originalmente lo hicimos, pero eso fue hace mucho tiempo. Entonces lo que vamos a hacer es seleccionarlo. Vamos a ir aquí abajo a nuestras acciones, y vamos a escribir quitar fondo. Es una función de IA. Es parte de las opciones de pago en Figma. Voy a hacer click en él, y luego realidad sólo se sorprenda de lo bueno que está listo Oh, es bueno. Estas cosas han sido hokey desde hace mucho tiempo, pero se está poniendo muy bien Hay algunos pedacitos. Como si lo arrastre por aquí, es perfecto. ¿Bien? Míralo por todas partes. Es genial. Es algo así como aquí. Ha hecho un gran trabajo, pero hay algunas cosas raras porque me encanta una sombra paralela. Entonces si agrego una sombra paralela, ¿ puedes ver que simplemente se asusta Esta chica tuya, vas a estar en el futuro. Podrían haber arreglado esto, pero aquí no es saber qué hacer alrededor de estos bordes. Tiene una máscara de recorte muy dura que está usando para la sombra paralela, pero en la actualidad hay una máscara encantadora No estoy seguro de dónde está el problema, pero solo sé que hay algunos temas. A Exporta Lovely como PNG. No estoy seguro de qué pasa con la sombra caída. Y así funciona muy bien cuando hay un alto contraste entre el fondo y el primer plano Hagámoslo de nuevo, quitemos fondo. La gente real y las cosas complicadas llevan bastante tiempo. Este fue muy rápido. Voy a saltar cortado a cuando este termine. Todo bien. Entonces eso toma quizás cuatro o cinco veces más que esto, pero sigue siendo un resultado bastante sorprendente. Míralo. Incluso por aquí, me gusta. Voy a pegarla por encima de esto, pero genial. Tiene los mismos problemas cuando comienzas a agregar una sombra paralela. Pero cuando hay menos contraste entre el fondo y el primer plano, KC, hay muchos colores similares en el aquí en el Es muy difícil de hacer esto. Vamos a darle una oportunidad y eliminar el fondo. Trato de escoger algo duro. Saltaré cortado a cuando esté hecho. En realidad, mientras va. Oh, esa fue una buena transición. ¿Puedes ver? No sabía qué hacer. Ha hecho un trabajo bastante increíble. Si alguna vez has hecho el enmascaramiento de Photoshop hace uno o dos años, esto sigue siendo bastante bueno, y podríamos arreglarlo, pero ha hecho un trabajo bastante bueno al averiguar dónde termina ella y comienza el fondo Probablemente no transitable sobre un fondo blanco. Pero mira aquí abajo. Es agarrar el dedo se ha averiguado donde está el agujero entre su brazo. Si lo has hecho antes, si eres un maestro de la vieja escuela, sabrás que fácilmente podría faltar la mitad del bol y definitivamente el dedo se iría y la mitad del fondo estaría incluido. Oh, hombre, lo está haciendo muy bien. Esto funcionaría si tuviera un fondo negro así que el Iki o un color oscuro Yo quería recortar aquí en esto y era un color oscuro. Muévelo hacia atrás. Comando de moldeo en mi primer corchete o control, KC, he enmascarado el fondo. Acabo de trabajar en torno al tema de esa parte de la máscara. Funciona muy bien. Pero si la necesitas sobre un fondo blanco, tendrías que salir algo como Photoshop. Photoshop tiene todas las herramientas manuales, mientras que Figma no Es un solo disparo en este momento. La otra cosa a tener en cuenta es que si la selecciono, en realidad, me voy a deshacer de eso. Esto es porque he hecho este video un par de veces. Para ir, Dan. Entonces lo que pasa es que cuando haces una máscara, terminas con estas dos capas. Entonces el de fondo, ¿ves que sigue ahí? Entonces, si necesitas volver a ello, lo que se hace es que se genera una imagen completamente nueva, rellena encima de ella. Así que los tienes todavía a los dos. ¿Bien? Y eso va a ser útil cuando hagamos una especie de máscara de derrame en la siguiente Pero no, sólo hay dos rellenos. No necesitas esta, ¿de acuerdo? No es obligatorio, pero ahí tienes. Es bastante increíble. En realidad, agreguemos unos 80 espectacularidad. Ya puedes irte ya estás despedido. Pero si te quedas por ahí, hay una pequeña herramienta genial que quiero mostrar. Para selección de color. Entonces voy a usar el triángulo que sostiene el shift para hacerlo proporcionalmente ancho y alto Y yendo por eso, voy a elegir un color. Entonces voy a agarrar el cuentagotas y partes de mí solo quieren hacerlo más oscuro. Ok y tal vez pegarlo detrás de él. Voy a mantener presionada mi tecla de comando, o tecla de control en una PC y usar mi corchete. Eso es genial. Quiero deshacer. Quiero encontrar el color de contraste a esto. Voy a seleccionar el color aquí en mi relleno de color. Acerca de un sitio web genial llamado figma.com slash Color Lo que puedes hacer es simplemente pegar en ese color, head enter. Y por defecto es complementario. Puedes ver que tienes un gran color que lo complementa. Estos son los que son análogos de Bt, están destinados a ser. No lo sé. Nunca utilizo estos. Son científicamente útiles como en el triángulo, pero no sé, complementario es el único que uso, copia pequeña feliz con solo hacer clic en él. Eso me encanta. Voy a pegar esto y tengo un bonito contraste de color. Probablemente quiero que sea solo un poco más oscuro y que lo mueva hacia atrás. Aquí vamos. 1980. Bien, haremos otro con esto. Entonces la tecla O para la herramienta Ellipse y voy a mantener dos teclas, la opción y un shift en un mac y eso es Alton shift en una PC y puedes obtener tanto un círculo redondo y puedes comenzar desde el centro Eso es genial. Todo bien. Voy a escoger un color. Voy a moverlo hacia atrás para mi paleta, y solo voy a adivinar el color complementario. Voy a usar en realidad mi herramienta cuentagotas para agarrar uno de esos morados, y luego solo voy a ir aquí y tratar de conseguir el otro lado. Eso es bastante genial. A lo mejor, tal vez abajo un poco más oscuro. Todo bien. Lo estamos haciendo. Todo bien. Eso es. Eso es quitar fondo, y creo que esta vez hemos grabado la pantalla correcta, días felices. Te veré en el siguiente video. 72. Cómo hacer una máscara de derrame fuera del cuadro en Figma: Hola. Te voy a enseñar cómo hacer la máscara de derrame Es bastante fácil. Es un poco engañoso, pero me gusta el efecto donde se derrama el producto Se puede ver así. Lo mismo con esta imagen abajo por aquí, la atravesamos y la recortamos usando nuestro enmascaramiento, pero conseguimos que se derrame sobre el producto, y te voy a mostrar cómo oscurecer en el fondo. Efecto. Vamos a saltar. Te voy a enseñar cómo hacerlo. Para empezar, trae la imagen 14 y 15. Hagamos esto primero. Vamos a usar lo que usábamos antes, eliminar fondo. Gates hizo un trabajo bastante bueno. Recuerden, todavía tenemos los antecedentes ahí, así que este es el truco. Vamos a tener dos versiones de esto. A ésta se le llama imagen 14. Vamos a llamar a esto uno de arriba. Vamos a copiar y pegar, no el relleno, sino la capa real aquí. En ocasiones, si tienes la capa seleccionada, solo copiará el relleno. Yo solo quiero copiar la capa aquí, copiar y pegar. Tengo dos de ellos, tienen top y el de abajo va a llamarse fondo. Aquí es donde se vuelve un poco confuso. Vamos a apagar el globo ocular en el de arriba. Boop. Nada cambió realmente, así que estamos mirando al de abajo. Este inferior, quiero apagar la máscara y encender la versión completa. Confundido. Es un poco confuso. Es como el inicio. Agarremos la herramienta Oh, la elipse. Voy a cambiar y opción o turno y lt, y lo voy a conseguir para que me quede un poco del fondo y la tapa salga por la parte superior. Ahora quiero enmascarar con fondo. ¿Quién sabe qué pasa al enmascarar a estos dos juntos? Así es. Esto tiene que estar en la parte de atrás. Voy a llevar esto realmente al frente usando mis corchetes. Ahora necesito manchar esto más la elipse, y voy a hacer una máscara, pulsa este botón Y ya terminamos. Sh. Sólo tenemos que encendernos. Ese es nuestro top. Vamos a moverlo para que se vea ahí. En realidad, no esta es la parte inferior y vamos a darle la vuelta a nuestra parte superior para llenar esa parte. Ah, la Incepción. Lo sé. Básicamente, se necesitan dos capas, una que esté enmascarada por completo, que es esa, y luego una que se enmascara solo en un círculo, esa Pero cuando los pones uno encima del otro, es una máscara de derrame Vas a hacer lo mismo por éste. Veamos qué tan bien esta máscara, en realidad, no la comprobé. Solo esperaba mover fondo, por favor no te quedes con el árbol. Por favor, no te quedes con el árbol. Hizo un trabajo horrible. Bien, voy a dejar eso aquí. Fue una buena idea. Los pulgares hacia abajo. No hiciste un buen trabajo en esa. Yo sólo quiero este monedero. Oh. Todavía vamos a trabajar alrededor. qué haría Dan. Vamos a deshacer eso. Oh, sí, ya sé lo que hacemos. ¿Funcionará? No lo sé. Entonces voy a tener la imagen 15. Voy a copiar y pegar la capa. Tengo dos de ellos. Vamos a apagar el de abajo. Vamos a agarrar el de arriba. Llamémosles darles algunos nombres, arriba. Este de aquí va a estar abajo. Yo sólo lo estoy haciendo porque estás viendo, tratando de que esto sea más claro. Gran nombre. Bien, entonces lo que voy a hacer, voy a hacer doble clic en él. Quiero recortar esta cosa, y quiero ver si puedo conseguirlo también. Cosecha esto primero. Todo bien. Vamos a darle una prueba a esto. Sí, sí, sí Ciérrala ahora ¿moverás fondo? Todo bien. Soy un genio. Ahora podemos encender el inferior y apagar el superior, y lo que quiero hacer es simplemente enmascarar esto. Puedes hacerlo de esa manera que acabo de mostrarte entrando aquí y cambiándolo a crop. Hay un atajo. Puedes mantener pulsada la tecla de comando, y será o controlará KeyoPC y simplemente saltaremos directamente al recorte Eso es lo que quiero. Te quiero, te quiero a ti, tal vez incluso un poco más bajo. Algo así. Vamos a hacerlo. Ahí vamos. Eso es lo que estaba buscando. ¿Qué es? Es una caja de héroe. Permítame agregarle algún texto. Ahora solo me falta por ahí para que puedas irte si quieres. Voy a agarrar mi herramienta rectangular y debería usar un marco. Voy a alargar esto. Trato de conseguir que se rompa a los bordes de esto. Lo hará. Bueno. Mostrarte lo que quiero hacer para que el texto salga de esto como al inicio de este video. Regresaré y luego grabaré la introducción. ¿Funcionará esto? No lo sé. Lo que voy a hacer es que voy a llenarlo con un degradado. Este lado va a ser negro. Este lado va a ser negro, pero tener una mejor transparencia, en realidad transparencia total, entonces sólo voy a mover esto por aquí, algo así y tirar la transparencia hacia abajo este. ¿Eso es lo suficientemente largo? Parece que es lo suficientemente largo. Ahora puedo agregarle texto. Escribe para elegir un nuevo teléfono, voy a usar mi ultra, voy a dividirlo en dos cosas, y eso es todo. Voy a escoger algunos colores, jugar con el interlineado. Bien, tiene colores. Sentí que iba a ser mejor. En fin, eso es lo que tenemos. Parecía más fresco en mi cabeza. Pero fue útil elaborar un pequeño truco para sortear nuestro problema de enmascaramiento donde no estaba enmascarando todo. Entonces una victoria después de todo, y eso siempre se ve genial. Imágenes asomando fuera de los círculos. Eso es. Te veré en el siguiente video. 73. Cómo enmascarar imágenes con texto en Figma: Hola a todos, les voy a mostrar cómo enmascarar una imagen dentro del texto. Es súper fácil. El texto sigue siendo editable. Hay un par de formas de hacerlo. Déjame mostrarte cómo. Vamos a por Rowdy ¿Así es como se escribe Rowdy? Eso va a hacer. Vamos a comenzar con el dulce atajo porque si vas a enmascarar texto, el texto tiene que ser lo suficientemente grueso para ver la imagen. Podrías hacerlo en texto, pero no es tan bueno. Lo hemos hecho temprano en el curso, puedes golpear Comando o Control B, lo que solo lo hace audaz. Pero sabías que puedes mantener pulsada la opción Comando que es Control Alt en una PC y solo usa tu mayor que y menor que. Oh, ya lo sé. Juega con un peso. Puedes ver por aquí, voy a usar el atajo, mira. Pasa de ligero a regular a semicurado medio. Voy a ir hasta el negro. Necesitas tener una fuente. Estoy usando Inter que tiene todas estas opciones diferentes, pero ese es un atajo genial. Todo bien. Entonces lo que tenemos que hacer es la mejor manera, en mi opinión, es que ni siquiera la necesitamos ahí. Necesitamos tenerlo seleccionado y podemos ir a editar e ir a copiar propiedades. Con este, podemos ir a pegar propiedades, que está en el mismo bit o mantienes pulsada la Opción de Comando V en una Mac, Control Ol V en una PC. Ahora, está ahí, así que está enmascarado. Le hice clic a una imagen terrible porque está un poco centrada en el medio de ella. Lo que podemos hacer es que te voy a dar otro. En realidad, sólo te doy el largo camino, entonces te voy a dar el atajo. Entonces la imagen está ahí dentro. Es un relleno como parte de este texto. Lo que puedo hacer es hacer clic en la imagen, y en lugar de intentar llenar el texto, podemos saltar, no mosaico, recortar el texto. ¿Bien? Para que podamos tomar esta imagen de fondo y encontrar algo que se parezca un poco más a lo que queremos en cuanto al recorte También puedes rotarlo aquí. Necesito hacerlo más grande ahora. Se te da la idea. Entonces es solo un lo que fue el dulce atajo para saltar para convertirlo en un relleno. Volvamos a donde estaba roto. Vamos ahí. No es una imagen de recorte, pero si mantengo pulsada mi opción KeneMaco en una PC y si hago doble clic en ella, de alguna manera mágicamente, ese es un atajo para cambiarlo a un crop en lugar de a un ¿Eso es útil? Probablemente no. Sin embargo, es el curso avanzado. Hay cosas raras en mi cerebro que quiero compartir. Ahí vamos. Bien, esa es una forma de hacer una máscara en lugar de texto. El beneficio es que podemos ponernos alborotados y se puede ver que refluye El texto es totalmente editable. La otra cosa genial es, ¿puedes ver en el panel Capas? Es solo este texto el que pasa a tener relleno. La otra forma de hacerlo es con una máscara. Voy a agarrar eso.Ge deshacerse del relleno en gris de vuelta a donde estábamos cuando empezamos Agarra mi herramienta para escalarla hacia abajo, sacarla donde la arroje en el medio. Puedes usar solo una máscara. No hay nada realmente malo en ello, excepto que el texto tiene que estar atrás. Ahí vamos. Ahora puedo seleccionar ambos y usar mi herramienta de máscara. Creo que es Opción de Comando. No, eso lo minimiza. Oh. Bien, estamos de vuelta. No puedo recordar. Entonces con estos dos seleccionados, hay una opción aquí arriba que dice usa máscara. Ahí está. Es Command Control M. De lo contrario, minimiza en una Mac Imagina que sigue siendo Control Alt en una PC. Dale una oportunidad. No estoy seguro si PC tiene el minimizador. La diferencia aquí es, ¿puedes ver a este viejo y feo grupo de enmascaramiento? Está un poco más claro, ¿de acuerdo? Entonces, ya sabes, puedo ver mi texto. Puedo ver mi imagen. Está en esta cosa llamada grupo de máscaras. No hay nada realmente malo en eso. ¿Bien? El texto sigue siendo editable. ¿Sigue editable? Sí, lo es. Es raro, sin embargo, no lo muestra como un poco de tipo, y si hago doble clic en él, entro en la máscara. Pero si agarro mi herramienta tipo y entro aquí y voy y la selecciono, sí funciona. Realmente entiendo la idea. Depende de ti cómo quieres hacerlo. Ambos funcionan, y te muestro dos porque vas a conseguir el archivo de alguien y alguien lo hará así y alguien lo hará así y tú estarás como, ¿Qué carajo? Pero ahora ya lo sabes. Además, aprendemos algunos otros atajos dulces. Opción o doble clic va directamente a convertirlo en un recorte. Y por alguna razón, me gusta mucho el atajo para los pesos, opción de comando o Control Alt y usar las teclas mayor que y menor que para tipo de trabajo a través de los diferentes pesos de la fuente. Oh, nos estamos adelantando. Todo bien. Eso es. Te veré en el siguiente video. 74. Cómo usar los modos de mezcla de capa de color en Figma: Yo Hola a todos. Vamos a ver los modos de fusión de colores. Significa que podemos hacer algunas cosas interesantes con este JPEG que no tiene ninguna transparencia. Podemos decir, está bien, Bam, estás viendo a través de ahora y podemos hacer algunas cosas creativas con colores e imágenes. Podemos hacerlo con tipo también donde afecta el fondo, se llama modos de fusión de capas. Vamos a saltar y echarle un vistazo. Para comenzar, traiga de sus archivos de ejercicio, logotipo, uno, dos y tres. Este de aquí es solo un JPEG. Pero necesito que sea transparente y ahí es donde los modos de fusión pueden ser útiles. Donde se selecciona, usa esta pequeña lágrima por aquí y podrás trabajar tu camino a través de lo normal es lo que es por defecto. Pero se puede ver oh, mira, multiplica y oscurece Vamos a multiplicar. Genial con un logo en blanco y negro. Se puede ver que ahora es ver a través. Muy chulo. Ahora, dependerá de la imagen. Entonces esta versión blanca sobre negra. Vuelva a echar un vistazo a lo mismo, multiplicar, no funciona tan bien. Funciona. Reloj. Hay un agujero en él. Tal vez quieras eso. Yo no puedes abrirte camino a través de algunos de los otros, y echemos un vistazo que podría funcionar en este. Abajo uno funciona. Perfecto. Pantalla relámpago. Lo que encontrarás es ver las líneas ahí. Este grupo hace algo similar, no exactamente, sino similar. Lo mismo con estos. Todos estos hacen algo similar, pero no exactamente. Estos similares, pero no exactamente. Así es como los agrupan. Volver a Alighten. Ahora, cuando hay color mezclado, puede ser un poco más complicado Para que pueda entrar en esto y oscurecerme. Es una especie de trabajo, pero se puede ver la diferencia entre normal y multiplicar. Se oscureció un poco el color, lo que yo como diseñadora es un dolor en el trasero, y cuando cubre cosas, puedes ver hace algunas cosas especiales Bueno, eso no funcionaría para un logotipo coloreado, podría ser suficiente para que te las arregles, pero para lo que es útil es hacer algunas mezclas de colores. Genial, cuando solo tienes un logo que no tiene transparencia en la parte posterior. Podrías usar tu fondo eliminado o simplemente jugar con los modos de fusión. Tienes que crear otro marco y traer una imagen en la que te encuentras. Yo traje una imagen llamada mezcla de capas. También puedes traer esa. Lo que voy a hacer es que lo quiero poner segundo plano. Podemos dejarlo ahí sentado. En realidad no importa si es un relleno en el marco de fondo o simplemente una imagen sentada justo en la parte inferior de mi panel de capas. Et lo dejamos así. Lo que podemos hacer es ir a la imagen y podemos entrar aquí y jugar con los modos de fusión dentro de aquí. Pero en realidad, primero, lo que haremos es jugar con la exposición. En realidad, juguemos con la saturación, lo saquemos, y luego juguemos con el contraste y la exposición para conseguir lo que queremos Lo que queremos es, no lo sé. Sólo estoy jugando con eso. Monocromática para que podamos dibujar cosas por encima. Voy a agarrar un gran círculo viejo el ok, todo el turno, gran círculo viejo. Voy a escoger un color, quizá uno de mis colores aquí. Lo genial de esto es no sé dónde lo estoy poniendo es que también puedes jugar con los modos de mezcla de esto. El color aquí bajo apariencia aquí como lo hicimos antes con esas imágenes de logo, obtener la misma pequeña lágrima, y podemos ir a jugar Mira qué genial es eso. Más oscuro. Oh, me gusta. Pasa años recorriendo estos y encontrando el indicado. A mí me gusta esa. Superposición. Puedes tener más de uno y puedes ver que se doblan. En realidad voy a elegir otro de mis colores, 500. Vamos a probar este. Aquí hay una superposición interesante. Hay algunas cosas interesantes que puedes hacer con los modos de fusión. También lo puedes hacer con tipo. He hecho otro marco y acabo de traer algo de texto y podemos hacer exactamente lo mismo, y usar mi herramienta Ka realmente para hacerla bonita y grande, girarla alrededor. Va a ser un poco grande de texto abstracto. Bien, y volvamos a mi herramienta de movimiento y apariencia. Lo mismo. Simplemente abre tu camino, encuentra algo que te guste, o Olagds mi favorito Eso es bastante genial. Ooh, diferencia ¿Bien? Así que los modos de fusión se pueden aplicar a todo, y solo obtienes un efecto diferente. A veces es útil para logotipos, a veces es como un efecto creativo. Esto se puede recrear en CSS, o simplemente puede exportar esto como una imagen para ser utilizada en su aplicación o sitio web Bien, eso es modos de fusión . Te veré en el siguiente video. 75. Proyecto de clase 18: anuncio en redes sociales: Hola. Es hora de hacer un proyecto de clase. Vamos a empatar muchas de las cosas que hemos hecho antes. ¿Bien? Entonces aquí está, Class Project 18, se te pide que hagas un anuncio en redes sociales que promocione tu app. Yo sólo quiero que incluyas estas técnicas. Entonces, máscara de texto, máscara de derrame y modo de fusión de capas La máscara de derrame es algo que me maquillé. Es justo donde las cosas pasan el rato como esta de aquí, el teléfono cuelga. Fuera de una máscara. Lo hicimos antes, pero solo para que sepas, no creo que nadie más lo llame máscara de derrame Pero ahí está mi máscara de texto dentro de ella, y he estado jugando con el fondo aquí con modos de fusión. No tiene que ser un genio creativo como el mío. No lo sé. Es rápido. Se trata más de meter esas tres cosas ahí y practicar con ellas. Lo que hice fue crear una nueva página llamada social media add y utilicé el tamaño cuadrado de Instagram, que es 1080 por 1080. No me importa realmente qué tipo de anuncio o tamaño en redes sociales. Se trata principalmente de las técnicas de enmascaramiento. Que se diviertan. Hacer algo. Pues si te gusto, forzar técnicas a un anuncio termina con resultados promedio. Practicando. Pero si lo haces, me encantaría verlo, compartirlo en redes sociales, así como subir tu tarea Puedes tomar una captura de pantalla o puedes hacer clic en esto y recordar usar el Exportar hasta ti, subirlo a los proyectos de clase y compartirlo en línea. Etiquetame si puedes. Ese no es el ejemplo correcto. Ahí vas. Fijo. Todo bien. Que se diviertan. Te veré en el siguiente video. 76. Cómo añadir video en Figma: Muy bien, es momento de aprender a usar el video dentro de los prototipos Figma Vamos a escabullirse a este pequeño y feliz Pug dentro del texto También puedes usarlo solo en un cuadro de video antiguo normal. Puedes hacer clic en él para que se detenga y comience. Sí, veamos videos y felices Little Pugs. Muy bien, una cosa rápida antes de empezar es que si estás en la versión gratuita de FIGMA, no creo que te dejen hacer video Entonces es una especie de reloj y aprende sobre cómo usar los videos. Pero si tienes la prueba gratuita o estás en la cuenta paga, podemos hacer cosas de video. Saltando. Voy a comenzar con solo un marco vacío con algo de Nav básico ahí. Ahora los videos se importan solo usando la imagen de importación normal. Comando Shift K, Control Shift K en una PC. En los archivos de ejercicio, hay una carpeta de videos, y debería traer esto porque es más, no sé, techne cojo, pero encontré a este tipo Voy a traer al carlino. Voy a hacer clic en abrir. Al igual que antes con las imágenes, puedes hacer clic una vez y vendrá a tamaño completo. De lo contrario, puede hacer clic y arrastrar. Puede tomar un poco de tiempo estar listo para importar. Por alguna razón, sacudir el ratón parece acelerarlo. Cuando estés listo, simplemente haz clic y arrástralo hacia afuera. Perfecto. Tienes un video. Eso es. Haremos un poco más, pero vamos a previsualizar a este tipo. Llevando un poco de tiempo cargar, pero ahí está. Hay un pug de aspecto feliz. Ahora, echemos un vistazo a un poco más de detalle. Con él seleccionado, lo que encontrarás es que puedes tener algunos ajustes más para ello bajo el prototipo. Puedes ver aquí con la imagen seleccionada, bajo prototipo, tengo cosas como reproducción automática Por defecto, va a reproducción automática. Puedes conseguir que se ponga en bucle si quieres. Es por defecto un looping, puedes apagar el sonido si tiene alguno No lo quieres. El mío no tiene ninguno. Ahora, lo genial de los videos es que son como un relleno. Relleno de este rectángulo es video como lo hacemos con imágenes. ¿Tengo una imagen uno o es una imagen uno? Por favor, sostenga. Este de aquí es solo un marco con un relleno de imagen. Volvamos con este tipo. Aquí nos estamos poniendo desordenados. Aquí estamos. Lo bueno de eso es que puedo agarrarlo, copiarlo y hacer cosas así. Espera ahí. Todo bien. ROP a pug. Pug life, vamos a ir y darle un relleno. En realidad, sólo podemos pegarlo. Lo copiamos de esto, lo pegamos en eso y debería funcionar. Vamos a darle una prueba. Funcionó. No estoy seguro de por qué no se está cargando la fuente. Está funcionando. Ignorar la fuente. Vamos a intentarlo de nuevo. Oh, me pregunto por qué. ¿Tú en el voy a cerrar figura y abrirla de nuevo? Bien, lo hice. Simplemente apágalo y vuelva a encenderlo. Pug en el texto Me encanta. El perro parece que está permanentemente empujado contra el cristal. Hay algunas limitaciones. Reproduciré la mayoría de los archivos de video, MOVs, MB cuatros, ese tipo de cosas No se pueden poner archivos gigantescos ahí. Creo que antes eran 100 megas. No estoy seguro de lo que es ahora. No intentes poner dos archivos de video gigabyte ahí. Vamos a agregarle un poco de interacciones. Por el momento, se reproduce de forma automática. Vamos a apagarlo. Lo que podemos hacer es agregar una interacción que diga, quiero reproducir y pausar el video. Tiene esta pequeña interacción que no va a ninguna parte. Pero ojalá, si hacemos esto, abajo a la reproducción automática, esta, aunque, solo jugamos cuando hacemos clic en él Lo estamos haciendo. Todo eso es todo por agregar video. Bastante simple. Agreguemos un poco más de interacción en el siguiente video. 77. Cómo hacer un botón de pausa de reproducción para un video en Figma: Hola. En este video, vamos a crear un botón de reproducción y un botón de pausa para video dentro de Figma. Vamos a saltar. Todo bien. Para empezar, he traído dos iconos de mi carpeta libre de íconos. Se llama Video icon play and pause. También he traído a través de un video del archivo de videos. Este pasa a ser el Video 02. Lo que vamos a hacer es que estos han llegado a través de muy, muy grandes. Voy a asegurarme de hacer clic en el marco padre, golpear K, y solo asegurarme de que lo son. Voy a hacerles una altura de 32, probablemente. Voy a usar estos dos. Voy a hacerles componentes. Voy a decir que son múltiples componentes. Debería moverlos a mi página de componentes y luego voy a arrastrar instancias de estos solo para hacer todo bien. Voy a mezclarlos por ahí. Pasas por ese lado y nosotros solo hacemos una pausa, vas a ir por ese lado. Un poco grande. Está bien. Lo que vamos a hacer es que vamos a decir botón en modo prototipo. Vamos a decir que tienes una interacción, y cuando te hacen clic, quiero que juegues algo ¿Qué? ¿Qué video? Quiero que toques el único en este marco. ¿Y quiero que se mueva? No, sólo quería jugar. Vamos a darle una oportunidad. Vamos a previsualizar este marco. El video tarda un poco en cargarse, y luego sí funciona. El botón está funcionando, pero está en reproducción automática. ¿Quién recuerda dónde puedo desactivar la reproducción automática? Está justo ahí, Dan. Tienes razón. Bajo prototipo con el video seleccionado, desactiva la reproducción automática Ahora vamos a conseguir que este juegue. Vamos a alguna página aleatoria. Vamos a hacer clic en esto y previsualizar, y ahora así no es reproducción automática, pero presiono el botón de reproducción y se reproduce y necesito presionar pausa Voy a hacer exactamente lo mismo que hice antes. Tú al click, quiero que reproduzca pausa de video, ¿ y qué quiero? Quiero ir a ese video, ¿ y qué quiero hacer? Pausa solamente. Bien, vamos a darle una oportunidad. Juega. Pausa, somos genios Mírennos. Ahora, no vamos a cubrirlos a todos. Las otras cosas que puedes hacer con video solo porque no sé. video en maquetas, tal vez yendo un poco lejos, puede ser útil para algunas de ellas, especialmente si estás haciendo una aplicación específica alrededor del video, entonces tal vez tengas que poner un poco más de esfuerzo para que el video funcione en maquetas Quiero mostrarte aquí, lo puedes hacer al hacer clic en Reproducir pausa. Hay cosas como mudo. Se puede saltar a un tiempo determinado, se puede saltar por delante unos segundos. Hay algunas otras cosas que puedes hacer aquí. Son bastante autoexplicativos. Funcionan exactamente de la misma manera que reproducir y pausar. Te dejaré jugar con esos si es necesario. Todo bien. Eso es reproducir pausa de video dentro de Figma. 78. Cómo conseguir la reproducción de un video cuando pasas el cursor por Figma: Yo Hola, ahí. Vamos a conseguir un video para reproducir cuando pases el cursor sobre él. Mira eso. Ignora que estamos en un teléfono móvil, que no puede pasar el mouse sobre Simplemente por casualidad estaba trabajando en el móvil en este momento, pero esto sería para un sitio de escritorio donde el mouse cierne sobre y comienza a previsualizar el video Muy chulo. Vamos a saltar. Todo bien. Acabo de traer video. Vamos a previsualizarlo. Es solo que el auto juega como normal. Y lo que podrías suponer lo que asumí cuando lo hice por primera vez fue que si cambio al modo prototipo, opción nueve, Alt nueve, solo un pequeño recordatorio para ir al prototipo es que probablemente vayas, bien, solo agrega una interacción y en Ha puedo conseguir que el video se reproduzca. Se conmuta. Dice: No, tienes que ser click. Estás como, eso no funciona. Voy a deshacerme de esa interacción. Asegúrate de deshacerte de él. También reconozco que estoy usando un teléfono móvil, sobre el que no puedes pasar el mouse Así es. Finge que estamos en un dispositivo como una computadora portátil, tenemos un mouse y puedes pasar el mouse Lo que tenemos que hacer es que tenemos que decírtelo por aquí, vamos a hacer una variante. Ya hemos hecho esto antes, pero simplemente no con un video. Volver a la vista de diseño, vamos a decir que eres un componente. Vamos a tener dos variaciones de ti. Uno de ellos va a estar bajo prototipo, video seleccionado. Oh, ese es un buen punto. Si tengo esto y estás como, ¿Dónde hizo Autoplay? Lo que ha pasado es, puedes ver por aquí, estas variantes están concluyendo el video. Si tengo el video seleccionado, puedo reproducir con la reproducción automática También es nombre el mejor. Este es el de abajo. Este es el nombre de propiedad variante de Actually, nombra aquí. Con el padre seleccionado, vaya al diseño. Nombrémoslo todo amablemente. Este se llama video hover, y tenemos este primero, que se llama default. Voy a renombrarle este. Esta es la pausa. ¿Por qué no? A éste se le llama play. Recuerda, para obtener la reproducción automática, tenemos que estar bajo prototipo Este primero, vamos a hacer doble clic o ir dentro de la variante y agarrarla y decir, la primera reproducción automática Este de aquí, entra, toma el video, haces reproducción automática Ahora necesitamos agregar una interacción, agarrar la primera, no el video, sino la variante padre. Todo lo que sé es raro. Lo que vamos a decir es decir, vas ahí cuando se hace clic No, cuando está rondando y lo que voy a hacer va a cambiar esta cosa de aquí a video hover, eso va a funcionar ¿Necesitamos que vuelva a cambiarlo? No lo sé. Vamos a agarrar una instancia de esto, arrastrela. Esa es una variante como la que hemos hecho antes. Sólo un poco raro que estemos jugando con un video. Vamos a darle a éste una obra de teatro, no trabajar, no trabajar. cursor. Oye, vete, y se detiene. Whoo. Oh, estamos en un teléfono móvil, en el que no puedes pasar el mouse Pero lo hicimos. Todo bien. Así es como conseguir que se reproduzca un video cuando pasas el cursor por encima de él. Todo bien. Te veré en el siguiente video. 79. Proyecto de clase 19: tarjeta de video: Cierto, es tiempo de proyecto de clase. No te preocupes si tienes la cuenta gratuita. Tengo una búsqueda secundaria para que hagas. Pero si tienes el Figma pagado de opción o usando el rastro, quiero que construyas algo como esto, una tarjeta que tenga la pausa Echemos un vistazo a los detalles. Una tarjeta de video que tiene el botón de pausa de reproducción y un título de video. Investiga un poco sobre la interfaz de usuario para reproductores de video. Te he dado algunos ejemplos de lugares para ir aquí. Simplemente puedes tener una búsqueda en Google de la interfaz de usuario del reproductor de video. Tengo uno realmente básico. Quizás encuentres algo un poco más interesante para copiar. Después comparte un video tuyo usando tu video, sube el enlace a los proyectos de la clase o te dejaré hacer una captura de pantalla de tu tarjeta de video. Realmente no se puede probar si funciona. Y lo mismo para la gente libre. No tienes la cuenta de pago. Quiero que te pongas creativo con la imagen que subas. Estaba viendo algunos de los otros. Ustedes son increíbles. Crea tu propia versión de algo rápido y fácil que es que no tengo la cuenta pagada de Figma. A mí me encantan todos estos. Todo bien. Ya sea que te paguen o uses la cuenta gratuita, sé creativo, construye un video o no estoy seguro de por qué hay un gato involucrado, pero sube algo a los proyectos de clase. Ojalá tengas la versión de pago y la puedas conseguir que funcione. De lo contrario, gatos llorando. Voy a ver en un rato. 80. Trucos avanzados de color en figma: Hola, amigos míos. Nos vamos a poner Nerdy con color Te voy a mostrar algunos de los trucos de color y algunas de las rarezas que ocurren dentro de Figma. Vamos a saltar. La primera es que aquí tengo un marco liso. herramienta cuentagotas es la clave ocular para el globo ocular, pero realmente es el ¿Sabes a lo que me refiero? Puedo agarrar colores de la imagen. Mira aquí, voy a agarrarlo y me da el número ix para ello. El problema es si uso herramienta Cuentagotas y la robo de, digamos, esta de aquí, que tiene mi estilo de color aplicado, ya ves que trae el número x, no el Si hago clic en esto, ese es un estilo de color primario. Esto ha robado solo el número hexadecimal, no están conectados. Si actualizo mi estilo, esto no va a venir para el viaje, lo cual puede ser complicado. Volver al Itol que puedes hacer es puedes ver ahí si mantengo presionado Mayús y lo hago clic, ya ves que dirá no el número hexadecimal, sino el color primario Ahora estos están conectados. Lo mismo por aquí. Quiero este color, pero quiero el estilo real, mantén el turno, y va a agarrar el estilo del color, no el hex. Eso te puede poner al día. El siguiente es que si haces clic en, digamos, una imagen y quieres bajar la opacidad de la misma, puedes usar los números a lo largo de la parte superior de tu teclado Probablemente ya lo sepas. Golpea cuatro, lo cambiará a. Puedes ver la opacidad al 40%, Tipo ocho, para 80, si eres rápido, puedes hacer 66 Va a ser agradable y rápido. Si quieres volver al 100%, llegas al cero y si quieres ir completamente a ver a través, cero, cero. Sólo tienes que teclearlos rápido juntos. Diez, 20, 30, cero para completo y doble clic cero para ir a completamente transparente. Voy a ir a cero una vez para traerlo de vuelta. Funciona para cualquier cosa que hayas seleccionado. Colorea las imágenes, incluso funciona en el video. Una, si juegas con tu película y eliges cualquier color antiguo, si tienes una rueda de desplazamiento, mira tu mouse, podrías tener una rueda de desplazamiento, quizás no. Yo sí. Yo uso mi rueda de desplazamiento sobre esta área de color aquí. ¿Puedes ver que simplemente se pierde con un matiz? Puedo deslizarme con mi rueda de desplazamiento. Si mantienes pulsada la tecla de opción o la tecla antigua en una PC, jugará con la transparencia hacia arriba y hacia abajo, ¿ ves? ¿Útil? A lo mejor no. Yo uso el matiz uno, no tanto el de opacidad. El siguiente es aquí abajo. Por defecto, está en Hicks, que es fácil de copiar y pegar entre programas GB, podrías tener un manual corporativo, quieres escribirlo ahí. CSS es interesante. Si estás usando CSS, o necesitas darle un color a tu desarrollador, este RGBA, que es rojo, verde y azul, y esta es la transparencia Alpha Pongo 0.5, va a ser 50% transparente. No uso HSL, matiz saturación luminosidad. Yo uso mucho HSB, Saturación de matiz y brillo Similares. La razón por la que me gusta esto es que odio tener arrastrar esto hacia abajo y lo meneo hacia abajo porque estás como, quiero un color oscuro Lo que puedes hacer saturación de tonalidad y brillo, puedes ir, Bien brillo Puedo sostener mi tecla Mayús y simplemente subir. Se ve que simplemente salta arriba y abajo. Me parece muy bueno para elegir un color muy oscuro de ese color específico sin ir espero que vaya recto. Simplemente hago clic ahí y uso mi turno e iré arriba y abajo, solté el turno, luego lo hará en incrementos más pequeños Yo no uso estos, usted puede. La saturación va a la izquierda y a la derecha. Y el tono es solo el deslizador de matiz. No uso mucho eso, pero sí me encanta agarrar este y bajarme un poco. Quiero un color un poco más oscuro de ese. Me cambio a HSB. Todos son del mismo color cuando terminas, solo diferentes formas de representar. Eso es todo por el nerdiness del color. Hay una última cosa. Es algo así como que no lo sé. Es parte de la ley de Internet, donde en realidad solo puedes escribir en rojo. ¿Bien? Puedo entrar aquí y decir, quiero rosa. ¿Por qué es esto genial? No es realmente genial. Es interesante, sobre todo cuando empiezas a llegar a cosas como, Bien, quiero gris ¿Y si lo deletreé al revés? Hay dos deletreaciones de gris por alguna razón . Son exactamente lo mismo. Alguien dio vueltas y nombró a cada color. Bueno, no todos los colores, pero hay muchos colores con nombre. Se ponen muy raros. Así. Si voy gris oscuro, no puedes tener espacios entre ellos, gris oscuro, de alguna manera más claro que el gris. Entonces los grandes nombres, ¿de acuerdo? Melocotón El durazno es un buen nombre. Pero mira esto. PH puff es un gran nombre. Entonces, si tienes un color y está cerca de un nombre, no lo sé. Es genial poder escribirlo, pero también hace que una marca muy buena sea parte de la operación donde no estás usando FDA B nine. Estás usando Peach Puff, way cooler. Ya sabes, puedes echar un poco de mirada en línea. Aquí están aquí. ¿Bien? Este es el w3.org. Se puede ver, echar un vistazo a través todos los colores nombrados. Hay algunos raros. Encuentra uno raro para tu marca. Chifron limón Oh. No me gusta el color, pero me gusta el nombre. Bien, eso es todo para cosas de color avanzadas. 81. Cómo cambiar el reemplazo de colores en Figma: Yo Hola, ahí. En este video, te voy a mostrar cómo actualizar todos tus colores a la vez. Algunas de mis cosas están usando el estilo de color, el correcto y este de aquí está usando el número ix. Te mostraré cómo seleccionarlos todos y actualizarlos, para que todos estén usando el estilo, no usando bits de ambos. Vamos a saltar. Todo bien. Cuando empecé a diseñar, empecé a usar este color antes de convertirlo en un estilo. Es muy común. Es posible que hayas usado accidentalmente la herramienta cuentagotas instalada el número Hix en lugar del estilo de color oficial que quise usar El camino a seguir y cambiarlos todos para asegurarte de que eres consistente, estás usando el estilo en todas partes ese color, no el Ix es solo hacer un seleccionado. Simplemente no tienes nada seleccionado y haz un select A, que es comando o control todo se selecciona y baja por el fondo aquí donde dice colores de selección, hay demasiados para mostrar, dice, ¿ Quieres que te los muestre? Sí, por favor. Lo que podemos hacer es que veas, te está dando los principales aquí arriba o tus estilos. Pero puedes ver aquí abajo dice, muéstrame todos los demás colores. El que estoy buscando es, ¿qué es? F cuatro, 746b. Voy a secta, vuelve aquí abajo. Lo que voy a hacer es que voy a decir, muéstrame todas y voy a encontrar esa, no a ti. Ahí está ahí. Voy a decir, no seas un número de hick Quiero que seas ese estilo. Va a pasar por cada caso de uso de eso. ¿Notaste que desapareció de aquí? Es porque ahora todos esos colores están todos conectados al mismo estilo de color. Ahí está. Apuesto a que también lo tienes para el green, en alguna parte. Ahí vas aquí. No está conectado con el estilo, Wendy C two, selectol, ven aquí, solo arregla todo para que todos estén usando el color correcto ¿Eso es ahí? Pocas creo que he usado algunas versiones de ese verde. Sólo voy a ir a cambiar este a este y solo asegurarme de que todo sea consistente. Porque muchas veces al principio, solo estás metiendo con los colores, y luego arreglas las cosas. Ese tipo me desgasta. Todo bien. Así es como actualizar todos tus colores a la vez. Obviamente, si los tienes ya parte de un estilo, puedes abrirte camino y decir, en realidad, voy a ajustar todos estos y ajustar el estilo a este nuevo color. No sé qué es este nuevo color, pero puedes abrirte camino y ajustar tu estilo secundario y simplemente abrirte camino a través de los diferentes colores. Es una manera fácil de actualizarlo. Vuelvo antes de romperlo. Bien, eso es todo. Seleccionando y actualizando muchos colores a la vez, consiguiéndolos consistentes. Bien, siguiente video. 82. Cómo crear temas de color para luz y oscuridad en Figma: Oye, ahí en este video. Quiero mostrarte aquí esta herramienta que utilizo. Sólo uno rápido. Me parece súper útil. Has escogido tus colores primarios, secundarios y de acento y son geniales para cosas grandes en bloque Se ven geniales. Pero luego se llega a cosas como esta. ¿Qué vamos a hacer en términos de diferentes cuadros de texto? Cómo se ve con un esquema de luz, que muchas veces diseñamos para primero y luego te gusta necesitas un esquema oscuro del mismo. Déjame mostrarte cómo introducir todos tus datos para hacerte una idea de lo que va a funcionar y cuáles son los buenos contrastes. Bien, he agregado un enlace para esto en tus archivos de ejercicios o tus archivos de proyectos de clase Todo el constructor de temas de material. Se mueve por ahí, así que quizás tengas que buscarlo en Google si se ha movido y el enlace está roto. Sin embargo, para lo que es realmente genial es que es genial solo para elegir color al comienzo de un proyecto. Puedes pasar y solo decir, Oh, dame algunas ideas de cómo podría funcionar la interfaz de usuario. Hay un contraste estándar, medio y un contraste alto. Lo que es genial de esto es que he escogido mis fuentes, así que he escogido ultra y Roboto, como las que he usado Pero lo que puedes hacer es ver por aquí, puedes agregar tu color primario secundario y terciario. Voy a entrar en Figma y decir: Bien, color primario, ¿dónde estás? ¿Ahí? Voy a agarrar esto. Voy a agarrar este de aquí abajo. Voy a agarrar el número de hick, y voy a hacer click aquí, pegarlo y hacer clic en Aplicar y podrás verlo diciendo, Bien, ese es tu color primario En realidad, vamos a agregarlos todos primero. Vamos a acelerar el modo. Bien, así que he agregado esos colores, y es realmente interesante ver qué hace esta herramienta con mis colores. ¿Puedes ver si me desplazo hacia abajo por la parte inferior? Ese es mi color primario, y aquí es donde dice que debería estar en términos de un buen contraste entre el texto claro y este fondo coloreado. Se oscureció enseguida. No tienes que hacerlo, pero es un muy buen sentido porque a veces terminas así. Sobre usar los colores de tu marca realmente fuertes para hacer cosas muy utilitarias Digamos que necesitamos la página de cuentas, necesitas cambiar tus preferencias de correo electrónico, probablemente usando tus colores primarios y secundarios en negrita grande completo para hacer eso. Es probable que lo devalore en términos de atención. Lo que puedes hacer es entrar en algo como esto y decir, estoy usando esto podría ser una mejor manera de mostrar datos o aquí abajo, igual que pequeños paneles. Las preferencias de correo electrónico podrían funcionar mejor en este caso aquí. Simplemente es sutil, no es grande y audaz. Podrías decidir, en realidad, quiero que sea una versión de contraste ligero de todos estos. No es tan oscuro. Cuando estamos tratando con algunas de las partes utilitarias de una aplicación, podrías decidir qué medio pesado, especialmente si te dan colores de marca Estás trabajando para una empresa que ya tiene un logotipo de marca. No quieres simplemente tirarlo a todas partes como lo hemos hecho nosotros. Puedes entrar aquí en él y esta herramienta aquí, no te preocupes si es IOS o estás haciendo cosas web o para Android. Es solo una buena manera de ver tus colores de otra manera que es realmente buenos contrastes consistentes son fácilmente legibles, por alguna razón, esquinas demasiado redondeadas En fin, esto me gusta. Me encanta echarle mis colores, especialmente si ya tenemos colores de marca para tener una idea de lo que podríamos hacer, y me gusta bombearlo hasta el contraste de altura. Dinnerwy. Entonces puedes pasar y decir: Bien, quiero copiar ese color aquí y puedes pegarlo en Figma. También puedes elegir tus fuentes. Estoy usando ultra y Roboto solo para tener una idea de cómo podría ser Pero nuevamente, más sugerencias, me parece útil. Pensé que lo compartiría contigo. Todo bien. Eso es. Ese es el creador de temas materiales. A mí me gusta. Tú también podrías. 83. Cómo se utilizan las bibliotecas de equipo en Figma: Hola a todos en este video, vamos a ver bibliotecas. Bibliotecas es una manera cuando hemos creado un montón de componentes ahora y un montón de colores y estilos de fuente y estilos de efectos. Queremos usarlos en otros proyectos y no tenemos que seguir copiándolos y pegándolos, o si queremos compartirlos con alguien más de nuestro equipo, para que puedan usar exactamente lo mismo Todos somos consistentes. Podemos crear una biblioteca, publicarla, ir a nuevos documentos que no tengan nada aplicado a ella. Un documento fresco y crear un marco y puedo decir, en realidad, me gustaría cargar la biblioteca de Limerick, agregarla al archivo, obtengo acceso a todos los componentes En este nuevo documento, además tengo acceso a todos los colores de esa biblioteca. Tengo que copiar y pegar o empezar de nuevo. Lo mejor es que puedo compartirlo con otros miembros del equipo así como con mí mismo. Muy bien, vamos a saltar. Primero, muchas de estas características son para la cuenta paga. Siguen cambiándolo en mí, mira hasta dónde puedes llegar en las versiones gratuitas. Bueno, en el pasado, se te ha permitido usar los colores y estilos de fuente, pero no los componentes. Sé que esto habla de hacer esto completamente pagado solo, pero mira hasta dónde vas. El documento en el que he estado trabajando que he creado un montón de componentes para un montón de estilos de color y textiles, fix, varianza, variables. Hay montones que puedes guardar en una biblioteca. Crea la biblioteca, siendo el documento desde el que quieres crearla, que es este. Subes a tu panel de Activos y ahí está este pequeño icono de libro. Sobre eso. Vamos a decir, me gustaría publicar esto como una biblioteca para que otras personas la usen. Voy a hacer clic en publicar. Va a decir, oye, no puedes hacerlo porque está en tus borradores. ¿Te gustaría moverlo? Voy a decir o okie. ¿Tienes un proyecto en el que quieres que entre? Yo no lo voy a hacer es dejar de eso. Voy a regresar a mi casa y voy a ir a mis proyectos. Voy a hacer uno nuevo. Crear un proyecto. Sé que en la cuenta gratuita solo puedes tener tres, ¿no? Yo creo que sí. Voy a crear uno llamado Tecno Limérico ¿Voy a compartirlo con la gente? Ahora no, voy a crear. Tengo un proyecto para que esto entre en. Ahora podemos moverlo hacia ahí. Vuelve aquí, crea una biblioteca, publica esto. Dice que necesita ir a algún lugar dentro de un proyecto. Tengo uno para que entre. Vamos. Esa es la primera parte. Ahora puedes pasar y decidir qué quieres incluir en él. Está hecho todos mis colores. ¿ Quieres todos tus componentes? Sólo esa. Yo quiero ir y decir solo hazlos todos. Enciende eso, apaga eso e incluye todo. Es posible que primero tengas que ordenar tu archivo. Especialmente si estás compartiendo con otros compañeros de equipo o con tu yo futuro Nombrar cosas como el componente cuatro probablemente no sea tan útil. Ordena todo eso primero. Vamos a golpear Publicar. Se va a reventar dependiendo de cuántos componentes tengas Ver abajo por aquí, abrazos lejos. Perro, voy a acelerar a través de eso. Lo bueno de esto ahora es que si creo un nuevo documento, en lugar de intentar copiar y pegar cosas de este documento, crear todos mis componentes principales, lo que puedo hacer es simplemente crear un archivo completamente nuevo, nuevo archivo de diseño, voy a empezar a construir App. Voy a ir al iPhone 16 y ahora quiero arrastrar cosas de mi biblioteca de activos. No hay nada aquí en este momento, lo que puedes decir es que puedes ir al librito de la biblioteca. Puedes buscarlo. Se puede decir, en realidad quiero el Limérico Ahí está ahí Limerick techno, voy a agregar a este archivo, ciérrelo Ahora, mira, en el panel de mi biblioteca, puedo ir a mis componentes y puedo empezar a construir esta cosa aquí, agarrando instancias toneladas, íconos, ¿cualquier cosa que se haya creado aquí Oh. Raro. Sí, fue un componente principal. La otra cosa genial es que si quiero colorear este marco aquí, puedo entrar en mi relleno e ir a mis estilos y se puede decir, todas las bibliotecas, no, quiero mirar la biblioteca de Limerick Puedes ver aquí todos los colores de ese documento original para que podamos mantener las cosas consistentes. Lo que es realmente genial de esto es que este archivo original, las bibliotecas sienten que debería haber algo separado. ¿Dónde encuentro mis bibliotecas? Las bibliotecas no son una cosa por sí mismas. Es solo la conexión entre este documento original. Si estás creando una biblioteca de equipo, posible que tu archivo tenga que estar arreglado y no tener toda esta basura en todas partes y solo mantener los componentes, los estilos, hacer que este sea un poco más limpio porque no hay archivo de biblioteca Si entro en esto y digo, vuelve al componente principal. No va a ir a un documento de biblioteca separado, solo va a abrir ese archivo original, aunque lo tenga cerrado. Yo digo, Hey, donde esta este componente principal porque necesito cambiarlo ahora. Va a abrir ese archivo original donde quiera que estuviera y mostrarle ese componente principal. Esto es de mi Limerick Techno V un documento. Digamos que necesito cambiar esto porque quiero pasar. En realidad, hagámoslo un poco diferente. Así que aquí, me he ido a cambiar el botón para decir adiós ahora. Hemos hecho algunas cosas. Hemos cambiado el texto y hemos decidido que éste en realidad tiene un color diferente. Vamos a aplicar el estilo de 500. Si ahora vuelvo a mi componente principal y digo, Oye, componente principal, ahora vas a tener diferentes esquinas redondeadas o es 100, voy a bajar a ocho. Lo que va a pasar es porque este es el componente principal y que controla mi biblioteca. Aquí está este pequeño icono, dice: Oye, hay cambios inéditos Nada ha cambiado aquí todavía. Pero aquí, puedo decir, en realidad, me gustaría publicar estos cambios. Hay un cambio en ello. Voy a golpear publicar. ¿Quieres publicar todos ellos o solo uno de ellos? Sólo tengo uno de ellos. Hay un montón de inalterados, así que eso es genial. Hit publicar. Lo que es realmente bueno de esto es que esto podría estar conectado a otros 20 archivos, y no se actualizan automáticamente, lo cual es realmente bueno. Puedo entrar aquí y decir, en realidad, haga clic en mi botón. Puedes ver arriba arriba aquí, tiene una opción que dice: Oye, hay una actualización disponible. Estás como, ¿quién hizo eso? Das click en él y puedes decir, ¿solo quiero actualizarlo o puedo ir a revisar la actualización? Es bastante inteligente. Mira, te muestra lado a lado lo que va a pasar. Notarás que mantiene mi texto y el color que cambié, pero cambia las esquinas redondeadas. Puedes mirar uno al lado del otro o superponer. A veces es difícil saber qué cambio se ha hecho. Estás como, lo que ha pasado. Te superponen eres como, se han metido con las esquinas redondeadas Hagamos clic en Actualizar instancia. Vamos a cerrarlo y se actualiza. Es una gran manera de controlar muchos documentos. Tienes un componente principal y documento de estilo que está vinculado a muchos otros archivos. Lo bueno de esto es que esas bibliotecas se pueden compartir con otras personas de tu equipo. ¿Cómo consiguen acceder a él? Si vas a tu proyecto, ahí están mis todos los proyectos. Vamos a Limerick Techno. Lo que podemos hacer es compartir cualquiera de los miembros de tu equipo. Esa es mi laptop Binger O simplemente escriba a las personas Victoria Borode UX diseñadora, puedo hacer click en ella y simplemente enviarle invitación para que tenga acceso a esta biblioteca Puedes decidir si ella es capaz de verlo y no cambiarlo o si también puede editarlo. Ella hace toda la UX aquí ahora trayendo su laptop, para que pueda editarla. A menudo ella va a compartir archivos conmigo y yo pido solo vista, así que no te metas con las cosas. Fresco. Lo grande es que no hay biblioteca a la que ir a buscar. Es sólo un archivo que se puede publicar. Tiene que estar en un proyecto, y cuando creas un nuevo documento, puedes cargar esa biblioteca para asegurarte de que estás usando todos los botones consistentes, colores y estilos consistentes. Busca justo en la parte superior, ahí está ahí, y voy a agregarlo al archivo. Está ahí. No aparecen por aquí en los estilos. Pero cuando los arrastras y vas a estilos, están en el que has conectado. Están todos ahí. Notarás que tenemos estilos de relleno, los colores, pero también tenemos algunos de los efectos que estaban en el último documento también. Hicimos el efecto de sombra. Hicimos un estilo a partir de ella. Fresco. Las bibliotecas son geniales. Tienen que estar en un proyecto de equipo. Tendrás que verificar dos veces la cuenta gratuita, en realidad lo que está incluido ahora. Sé que en el pasado, hasta hace poco, solo te permitían colores y estilos de fuente y no componentes, pero sé que están hablando de cambiar eso. Ese es el increíble beneficio de usar bibliotecas de equipo dentro de Figma. Veré en el siguiente video. 84. Cómo ocultar los estilos de fuente de color y los componentes de la biblioteca de equipo en Figma: Hola a todos. En este video, te voy a mostrar cómo crear esta carpeta oculta para componentes vamos a ocultar los colores también de la biblioteca principal. Pueden ser componentes en los que estás trabajando o simplemente componentes que sabes que el equipo no necesita. Puedes apagarlos, ocultarlos de la biblioteca compartida. puedes hacerlo con colores, y te voy a mostrar este nombre y convención de subrayado al principio. Bien, vamos a saltar Derecho a empezar. Seamos dos personas separadas. Dan y Doug. Doug está trabajando como colega mío. Crea un archivo de diseño y él va, necesito conectar la biblioteca que estamos usando, y él va Limerick y la encuentra Limerick tech no V one, lo agrega, y luego puede comenzar a trabajar en un nuevo proyecto, pero usando todos los componentes que se utilizaron Arrastra algunos de mis botones y empieza a trabajar lejos, tiene acceso a los colores Hay algunas cosas aunque no quiero que Doug tenga tampoco necesitan ser parte de mi archivo, pero no quiero que se publiquen todavía porque son archivos próximos A lo mejor los estoy usando, pero nadie más debería estarlo. Lo que tenemos que hacer es volver a ser Dan. Tenemos que volver a la biblioteca original creando archivo, y necesitamos que sea bastante fácil. Debajo del panel Activos, encuentra lo que hay debajo los componentes que no quieres que formen parte de la biblioteca, y solo puedes decir ocultar al publicar. Si vuelves a ser Doug, podría tomar un segundo, pero al final, vamos, desaparecerá. No está desapareciendo Sé por qué. Entonces, si lo apago, lo he ocultado, necesito luego volver a publicar mi biblioteca Se puede ver ese puntito ahí significa que hay cambios inéditos Ahora necesito publicarlo. Solo hay un cambio y hemos eliminado el botón objeto. Publica ahora, vuelve a ser Doug Doug debería perder el acceso a él Sí. Bien. Lo que hay que señalar, sin embargo, que cualquier uso o instancia de ese proyecto principal que ya esté fuera en proyectos no va a ser como aspirado de nuevo a la biblioteca. Bien, así que eso es bueno. Eso no queremos. ¿Bien? Pero ahora no se pueden usar para nuevos proyectos, los archivos antiguos, los componentes antiguos. Digamos que quiero volver a encenderlo. Bien, volví a ser Daniel. Yo soy el jefe. Necesito volver a encenderlo para acceder. Lo que encontrarás es que se ha ido un poco de mi panel de Activos. Si vuelves uno, ¿de acuerdo? ¿Hay unas pequeñas flechas retroceden una de los componentes, hay otra carpeta llamada oculta? Y aquí está mi botón. Bien, y puedo hacer clic en él y decir, Mostrar publicación. Solo tengo que asegurarme ahora voy hasta aquí y decir, publicar mi biblioteca, y Doug volverá a tener acceso Lo que quiero mostrarte es que algunas personas no usan el clic derecho ocultar al publicar. Simplemente le renombran. Voy a volver a mis archivos. Voy a encontrar este activo aquí y voy a hacer doble clic en él y la gente va a poner un guion bajo frente él y eso va a hacer lo mismo Si hace lo mismo, ya ves, solo dice, hay un cambio. Lo que cambia se ha eliminado. El nombre y convención del subrayado justo antes del nombre del componente es otra forma de hacerlo y lo verás y estarás como, ¿Qué carajo es eso ¿Qué carajo es eso Es sólo otra forma de hacer lo mismo. A la gente le gusta que tú por los colores aquí. Estoy en mi biblioteca creando archivo y puedes ver que tengo todos estos colores. Digamos 900, no quiero acceso. No queremos que la gente lo use. Lo necesito en mi doc de trabajo aquí, pero puedo decir, lo mismo. Yo sólo puedo poner un guion bajo. No hay forma de hacer clic derecho y decir ocultar estilo de color. Entonces lo que hacen es que simplemente te dejan poner un guion bajo frente a él también. Lo mismo. Si lo publico ahora, es publicar y eliminar ese archivo de color. Y por archivo de color, me refiero al estilo de color. Si encuentras documentos de otras personas, tienen guiones bajos en todas partes, es porque los están quitando de una biblioteca compartida Voy a volver a encender el mío y te veré en el siguiente video. 85. Cómo mover componentes de refactorización a otro archivo de diseño en Figma: Vamos a ver algo llamado refactorización o más fácil pensar en ello como Tenemos nuestro archivo del que creamos nuestros componentes, pero es desordenado Tenemos todo esto aquí, tenemos anuncios en redes sociales, imágenes, cosas que no queremos en nuestros componentes principales o nuestros estilos. Queremos que nuestros estilos solo sean agradables y solo todos en sus propios documentos. Eso es lo que vamos a hacer. Vamos a mover nuestros componentes y vamos a mover todos nuestros estilos de color al documento separado, y lo genial de ello es que Figma los volverá a vincular si se usan en cualquier otro archivo El resultado final es que voy a tener este bonito archivo de diseño limpio que solo tiene mis componentes en él, solo tiene mis estilos en él, sin trabajo, sin diseños móviles, no nada más, y eso es mucho más fácil de compartir con el equipo. Se llama refactorización. Piense en ello volviendo a vincular a otro documento. Vamos a saltar. Para comenzar, estoy en mi archivo que creé mi biblioteca. Este es mi gran archivo desordenado. Voy a aquí, tiene todos mis diseños móviles. Tiene mis componentes, lo cual es útil, pero ahora necesito sacarlos y ponerlos en su propio archivo para que la gente no esté accediendo a este desordenado archivo viejo y tienes que mantenerlo para siempre. Entonces hagamos uno ordenado. Para comenzar, he creado solo un documento completamente nuevo. He conectado la biblioteca de Limerick y he usado un componente y un color en el fondo, así que están sacando de esta Quiero cambiar eso. Para cambiarlo, lo que haces es crear un nuevo archivo, y yo voy a crear un nuevo archivo de diseño. Voy a llamar a éste. Limerick techno, sólo voy a llamarlo principal. Y todo lo que hacemos es cortar y pegar cosas de él. Yo digo que eso es lo único. Hay un par de cosas más, pero esa es la parte principal de ella. Si voy a aquí y digo, este artículo aquí, quiero encontrarlo en mis componentes. Voy a ir a cortar, que es Comando o Control X, solo tu corte viejo normal. Lo cortas y lo pegas por aquí, ¿de acuerdo? Te doy una advertencia diciendo: Oye, has movido cosas de una biblioteca. Necesitas publicarlo. Yo puedo hacer eso, pero eso es lo principal. Cortas y pegas cosas a este nuevo documento. Para que todo funcione y para que no se rompan las cosas porque este archivo que hice aquí tiene este botón aquí dentro. ¿Qué hace esto? ¿Está enlazando al archivo antiguo o al nuevo? Para que todo funcione, lo que hay que hacer es publicar esto. Voy a ir a mis activos, voy a decir publicar esta cosa, voy a tener que publicar. Va a decir un par de cosas. Sabemos que no puedes tenerlo en borradores, así puedo moverlo a mi proyecto Lo voy a mover a mi carpeta tecno Limerick. Muévelo ahí solo como un archivo de diseño separado. Y voy a asegurarme de que todas estas cosas cambien. Te va a dar una advertencia. Va a decir, Oye, las cosas se han cortado de aquí a este documento, pero otros documentos como mi nuevo diseño y otros mil proyectos, usan esto. Van a recibir una advertencia. Eso está bien. Es grande y rojo y da miedo, pero no da tanto miedo. Está publicado. Lo que notarás es que mi nuevo archivo aquí va a decir, tengo algunas actualizaciones. ¿Cuáles son esas actualizaciones? Vamos a hacer clic en su echar un vistazo. Todo lo que va a decir es, acabo de hacer clic en actualizar. Todo lo que hizo fue actualizar el enlace de donde iba. Ahora no va de Limeric Techno V uno que tenía toda mi basura en él, viene de este archivo Sólo comprobemos dos veces. Bien, vamos a hacer clic en esto. Esto de aquí, vuelve aquí. Ya puedes ver que tengo dos bibliotecas conectadas a ella. Yo tengo este de aquí, ese tiene un componente, que es este, y todas estas otras cosas. Ahora debería pasar, eliminar todos los componentes que quiero estar en mi conjunto de componentes principales maestro, solo seguir moviéndolos sobre ellos. Lo genial de ello es refactorizarlos para ti. Simplemente los cortas y pegas en tu nuevo documento, asegúrate de que esté publicado, y cualquier archivo que estuviera usando el botón de expulsión, solo tenemos una actualización y nada cambia realmente excepto a dónde está vinculado Un archivo mucho más ordenado. Podemos trabajar duro en este, manteniéndolo agradable y limpio en lugar de nuestro original. ¿Eso tiene sentido? Ahora, el principal problema se encuentra la gente es la publicación. La gente se olvida de publicar y van a estar como, no está funcionando, no está saliendo a través. Así que solo asegúrate de que todo esté publicado y actualizado. Lo que quiero decir con eso es entrar aquí y solo asegúrate de que esto no tenga editores sobresalientes. No tiene cambios. Eso está bien. Mi principal no tiene cambios, necesita ser publicado. ¿Bien? Y asegúrate de que todos los demás archivos que abras, ve a la biblioteca y solo comprueba si hay alguna actualización. Hacemos lo mismo con los colores, todavía es una vez más para dejarlo claro. Los colores son un poco diferentes Colores, no olvidé nada seleccionado residir aquí en mi panel Propiedades. Digamos que quiero agarrar todos mis colores primarios. Voy a ir a cortar, igual que antes. Se va de este documento. Voy a éste, lo pego. Dice, tienes que publicarlo, yo puedo publicarlo. No importa de donde vayas. Hago clic en publicar aquí abajo o si lo haces desde el pequeño libro de aquí, presionas publicar, y si vuelvo al archivo en el que estos podrían haber sido utilizados, tal vez tengas que ir aquí y luego ir a actualizaciones y puedes ver que uno está actualizado. Vamos a hacer clic en Actualizar y ya está. Hecho. Se está refactorizando ahora y yo sólo voy a hacer el lento proceso de pasar por Entonces, ahora lo que voy a hacer es agarrar todos mis colores. Estoy haciendo clic en el primero, mantén turno, cortarlo, a mi nuevo. Hagámoslo de nuevo, peguemos, publiquemos, publiquemos todas esas cosas. Si escuchas algún crujido de fondo, tengo dos kits nuevos y están atacando cosas en la oficina Es difícil conseguir que dejen de hacer ruido. ¿Lo dejarías? Bien así que está actualizado, echemos un vistazo a todo. Solo tienes que asegurarte de que la biblioteca de Estilos esté actualizada. Aquí no hay nada que necesite actualizarse solo porque solo uso uno de los colores de mi biblioteca de estilos. Un componente de mi biblioteca de componentes. Realmente no hay nada que actualizar aquí. Simplemente se abre camino y dice, esta cosa de aquí tiene que moverse. Lo haremos uno más. Tú vienes por aquí y voy a golpear publicar o hacerlo aquí arriba. Voy a publicarlo. Publique, por favor. Mi nuevo archivo de diseño aquí. Si entro a mi biblioteca y voy a actualizaciones, no va a haber actualizaciones porque no he usado ese botón principal en este documento. Supongo que voy a acceder a él. Ahí está el botón primario. Es un poco lento y tedioso, pero es mucho mejor que trabajar desde esta monstruosidad que hemos Tantos archivos, tantas páginas diferentes. Puedes estar muy ordenado cuando lo refactorizas. Solo recuerda que refactorizar es solo volver a vincular. Lo único que te atrapará y atrapará a los estudiantes todo el tiempo es que las cosas no se publiquen. Simplemente revisa y publica todo, y busca actualizaciones sobre todo, y probablemente encontrarás que ese es tu problema. A veces he encontrado que necesito cerrar fig y abrir una copia de seguridad. Eso sucede cada vez menos a medida que madura como producto, pero a veces eso también es útil Todo lo que voy a volver a no sé, tratando de hacer algo con los gatitos Necesitan algo más que hacer en lugar de atacar cosas cerca de mi micrófono. Bien, eso es refactorizar. Te veré en el siguiente video. 86. Cuáles son algunos consejos y trucos avanzados de dibujo en figma: Todo el mundo. En este video, vamos a hacer un lío de un documento. Pero en el camino, vamos a aprender todos mis consejos y trucos avanzados de dibujo. Bien, vamos. Bien, comencemos con la herramienta Lasso Necesitas estar en la función de dibujar o modo de Figma, y yo tengo la estrella que he dibujado Tenemos que ir dentro de ella para comenzar a editar la forma, hacer doble clic en ella. Y podría usar la herramienta de selección y podría arrastrarla y obtener los puntos que necesitan, pero la herramienta Lazo es increíble para archivos vectoriales realmente intrincados Simplemente puedes arrastrarte y decir, te quiero pero no a ninguno de los otros, y puedes seleccionar todos esos. Ahora puedo hacer clic en arrastrar y moverlos si quiero eliminarlos. Si hubiera borrado mi teclado, solo borre todo el asunto. Entonces voy a volver a mi selección. Voy a agarrar estos. Si quiero eliminar solo estos primeros aquí, mantenga presionada la tecla Mayús y presione su tecla de eliminación o su tecla de retroceso Ambos funcionan. Pero si solo lo haces sin la tecla Mayús, elimina el conjunto Llame a tip si uso mi herramienta de movimiento y hago clic en solo una de estas, puedo usar mi pestaña en mi teclado. Mira eso, pasa por y agarra el siguiente punto de anclaje Eso podría ser muy útil. Especialmente cuando están muy juntos, puedes hacer clic en uno y luego tabular a la siguiente. Cambia el salto, deshazte de él. Pobre vieja estrella. A continuación, quiero mostrarte la herramienta conjunta, y en realidad acabo de pausar el video porque lo estropeé. Quiero mostrarte cómo lo estropeo porque lo hago todo el tiempo, tú haces lo mismo. Si agarro la herramienta pluma ahora y hago clic y arrastre y hago todo esto, lo que sucederá es que en realidad he dibujado esto con una herramienta de pluma, pero la he dibujado dentro de la forma de estrella. Es parte de la estrella, que es un dolor en el trasero porque no son dos formas separadas. Ver fi volver a mi MoveTool haga clic en el fondo. Esa es una unidad. Y un poco de trabajo, pero no es lo que quería. Siempre que estés trabajando, di la estrella, estoy deshaciendo, asegúrate de hacer doble clic en el fondo para volver a salir así dibujas una forma separada que me atrapa todo el tiempo Pentl dibuja una forma y se acerca a terminarla, créelo brecha Es posible que obtenga el icono o gráfico de otra persona de otra biblioteca o biblioteca de iconos. La brecha podría haber venido de tu dibujo. Lo que puedes hacer es simplemente ir al Comando J, y va a unir los dos puntos de anclaje donde hay un hueco, súper práctico porque de lo contrario, no puedo agregar un relleno. Comando o Control J, únete a él. Ahora llego a agregar un relleno. Una cosa que no puedes hacer, y no sé , también es genial. Agarro mi herramienta de movimiento, y las selecciono todas y tú vas Comando J, mira esto. Cómo. Creo que hemos creado un culto, pero vamos a deshacer eso y puedes tener estos dos seleccionados e ir a Comando o Control J o no tener nada seleccionado. Estar dentro de tu forma. Si hago doble clic para salir, no va a funcionar, pero si entro de él y voy al Comando J, va, Oh, probablemente te refieres a estos dos. Y agrega un relleno. Lo siguiente es el punto de anclaje para la rotación. Si hago clic en salir de mi cuadrado aleatorio en la estrella rota me rotador, girará alrededor del centro, y eso podría ser lo que quieras Pero muchas veces hay momentos en los que no quieres que eso suceda y simplemente pasas el cursor por aquí como si fueras a rotarlo Waita espera, espera, espera. ¿Ves el punto de anclaje en el medio acaba de aparecer? Hola. Este pequeño blanco aquí significa que puedes arrastrarlo y decir, quiero que esté ahí. Ahora cuando lo rotas, el centro de rotación ha cambiado. Sólo tienes que esperar un rato. Lo siguiente es empacar horizontal o verticalmente. Ya nos hemos topado con este problema antes. Vamos a traer algunos íconos de antes. Bien, solo estoy en un proyecto completamente nuevo. He ido a importar. Voy a ir a los expedientes de ejercicios. Voy a ir íconos dos. Se lo corrimos a estos. Voy a traer más. Yo coloco, y simplemente los arroja por todas partes encima del otro y te pasas años yendo Se puede ver cómo agarró el marco separado del vector en su interior, pintando la culata Lo que puedes hacer es seleccionarlos todos y usar nuestras acciones, K Comando K o dar click en el botón abajo de aquí. Lo que estamos buscando es empacar. Podemos empacar horizontal o verticalmente y simplemente los apila todos. Por último. Y si nos acercamos lo suficiente, empezarás a ver las cosas regulares que hemos visto antes. Es una selección inteligente. Podemos ir y arrastrarlos por ahí. No está fuera de petróleo, y podemos jugar con el relleno solo para recuperarnos. Antes, sin embargo. Otro par de simples es que si agarro el marco de lápiz aquí arriba, aquí arriba, hay una opción para voltear vertical u horizontalmente, solo para que lo sepas. Veamos un atajo para alinear cosa. Digamos que tengo un marco, tengo mis íconos dentro de él. Estos tipos de aquí, quiero alinearme quizá a la derecha. No es realmente lo que quiero. Quiero alinearlo al borde del marco padre. Podría agruparlos y alinearlos, ver esto. Si mantengo presionada la tecla Mayús y coloco el cursor por encima de estas, ¿ puedes ver con el turno al tocarla en mi teclado? Si la mantengo presionada, ¿ ves que cambian un poco? Lo que va a hacer es que se va a alinear a la derecha del marco. Usa esta la mayor cantidad. Simplemente consígalos vertical y horizontalmente centrados al marco. Mantenga el turno. De lo contrario, van en el medio, pero todos se apilan. Podrías agruparlos, convertirlos en auto out sosteniendo turno es solo un pequeño truco agradable. Otra es si dibujas algo, solo viene con una caja gris sin trazo. Tiene relleno, sin trazo. Los puedes cambiar de verdad fácil. Mantuvo pulsada la tecla Mayús y X. Yo solo alterna. El color del trazo se mueve al relleno. relleno se mueve al trazo. alternan entre ellos. Eso puede ser útil. Tienes algo que tiene un trazo y un relleno. Voy a hacer esto bonito y grueso, así que hace que sea más fácil de ver. Tengo un trazo y un relleno. Puedes alternarlos. Recuerda Mayús X, los alterna. Eso es genial. Entonces quieres quitar el trazo. Todo tiene que ver con el botón de barra diagonal de tu Ford. Lo abajo de tu teclado, encuentra la barra hacia adelante. Si mantienes Shift y golpeas la barra hacia adelante, se deshace del golpe. Voy a deshacer. Si agrega opción y usa barra diagonal hacia adelante, se deshace del relleno Ahí vas. Atajos de Nudy Probablemente ya conoces este. Comando o control Y. Alternaremos entre la vista de esquema. Simplemente es más fácil ver algunos de los vectores cuando estás en esta vista, y no los cambia para siempre, pero sí te ayuda a ver algunas partes y alinear las cosas un poco más fácilmente. Es comando o control Y para contorno. Esos son mis trucos de dibujo avanzados. Te veré en el siguiente video. 87. Cómo usar la herramienta Anchura variable y simplemente trazo en Figma: Muy bien, todos. En este video, vamos a ver la herramienta simplificada y la herramienta de ancho. La herramienta simplificada va a convertir dibujos credy cosas agradables y suaves a las que luego podemos ir y agregar estos anchos variables Grandes, agradables florituras o líneas simples que les tienen un poco más de dinamismo No es una palabra, entonces saltamos y te mostramos cómo hacerlos. Voy a asegurarme de que no estoy dentro sobre ninguna otra forma que estemos dibujando. Voy a ir a modo dibujar. Voy a ir a la herramienta de lápiz y voy a escoger un bonito color. Voy a dibujar una forma. Por defecto, no es particularmente suave. Lo que puedo hacer cambiar la herramienta de movimiento, que es el Viki. Da click en él una vez y verás esta opción aquí, dice, simplifica vector. Funciona para cualquier forma vectorial, pero es genial para esta curva. Simplemente se puede ver que hay demasiados puntos de anclaje, tratando de combatirlo. Lo que puedes hacer es simplemente arrastrarlo de esta manera, puedes ver que empieza a eliminarlos y hacerlo más suave y suave hasta llegar a suficiente resolución o suficientes puntos de anclaje. Voy a hacer mi muy pequeño y suave y haga clic ahora para usar la herramienta Ancho, lo que tengo que hacer es ligeramente diferente, necesito ir dentro de la forma que he dibujado. Con él seleccionado, voy a hacer doble clic en él para entrar y notas esta opción aquí, se llama la herramienta de ancho variable. Puedes agarrarlo en cualquier lugar, hacer clic en mantener y arrastrar y obtienes esta dulce forma. Vamos. Aquí hay algunos perfiles predeterminados. Tal vez quieras jugar con estos. Tienen que ser más grandes. Voy a deshacer y volver a la que estaba haciendo. Bien, entonces he hecho mi ancho. Puedes arrastrar el centro a lo largo para decidir a dónde va eso. Y puedes volver a arrastrar los bordes para ajustarlo. Puedes agregar más de uno, asegúrate de que todavía estás en tu herramienta de ancho. Puedes tener muchos anchos diferentes. Yo uso mucho en Illustrator esta herramienta. Para cosas como esta donde hay estas bonitas burbujas y florecimientos, puedes hacer lo mismo dentro de Figma. Básicamente son la misma herramienta. Hagamos esta, así que voy a ir a mi herramienta Ancho. Lo que necesitas para que esto funcione, en realidad, vamos a eliminarlo y comencemos con algo más agradable Voy a dar mi herramienta de pluma. Voy a sostener y arrastrar, hacer clic en mantener y arrastrar. Todavía me aplicaron mi ancho. Haga clic en mantener y arrastrar, y tal vez otro aquí para obtener una buena curva en marcha. Voy a deshacerme del perfil ancho y volver a la normalidad. Voy a ir a mi herramienta de ancho. Para hacer esa cosita bobbly que acabo de mostrarte, necesitas tener dos Necesitas este. Bien uno puede ser más pequeño y luego uno al final aquí justo al final para hacerlo más grande. Ahora bien, lo que podrías encontrar es dependiendo de cuándo lo usaste por última vez, podrías terminar con un extremo plano o este redondeado. Cambia eso, puedo agarrar mi herramienta de selección y simplemente dar clic en la línea y verás por aquí hay diferentes encaps Por defecto, se establece dos, sin tapa, y luego está esta de aquí que es una gorra redonda y te da ese pequeño y lindo bobble Puedo ir a mi herramienta de ancho y solo encontrar algo que sea un poco más apropiado. Se puede jugar con el trazo de todo el asunto. A pesar de que diga dos, solo va a aumentarlo proporcionalmente a los anchos que hayas hecho No tiene por qué ser tan exótico. Podría ser algo simple como un subrayado donde estás haciendo algo simplemente agradable y simple Voy a bajar mi peso de línea a no cero, sino a uno, así que es bonito y delgado. Agarra mi herramienta de ancho. A lo mejor tienes que hacer doble clic en él para entrar y agarrar la herramienta de ancho. Yo hice exactamente lo mismo que antes te mostré que no hicieras. Lo dejaré en el curso porque lo sigo haciendo cada vez que dibuje nuevas formas. Si estoy dentro de aquí y empiezo a dibujar, los combina Te voy a agarrar. Te voy a cortar pareces en el fondo. No tener nada seleccionado, pegarlo, está todo solo, luego entra dentro de él. Entonces puedo ir a mi herramienta Ancho y simplemente hacer algo más agradable como esto Algo bonito y sencillo y a lo mejor voy a ir a esta tapa final que es una bonita puntiaguda Verás aquí que todavía tengo un punto al final. Puedes cambiar el peso de tu línea a algo así como 0.1, será muy delgado en los extremos. Voy a tener que ajustar mi herramienta de ancho aquí para volver a ser puntiagudos en los extremos y tener mi pequeño ras en el medio ahí Eso es un ancho variable. Puedo darle la vuelta, esa es la herramienta de ancho variable. Puedes eliminarlos. Puede ir, eliminarlos, y está de vuelta a una línea recta normal. Eso es, amigos míos. Es la herramienta de ancho variable. 88. Cómo superponer y apilar objetos en un diseño automático de Figma: Bien, todos, vamos a conseguir que las cosas se superpongan. Podrías simplemente arrastrarlos uno encima del otro. Pero te vamos a mostrar cómo hacer con Auto out para que puedas perder el tiempo con el espaciado, hazlo perfecto. Puedes perder el tiempo con tus objetos y arrastrarlos. Y como es un Autoout, tenemos algunas características especiales donde podemos decir primero en la parte superior, último en la parte superior, primero en la parte superior, último Yo, vamos a saltar. A para empezar. Tengo un marco de revisión. Estoy de vuelta en mi documento original. Estoy en mi móvil Hi Fi y he creado una página de reseñas y acabo poner un rectángulo ahí para mi revisión. Voy a usar el Oki para dibujar mis pequeños círculos, y voy a sostener Shift para que sea perfectamente redondo. Voy a duplicarlo algunas veces, Comando D D D D. Lo que podría hacer ahora es simplemente seleccionarlos a todos. Estoy sosteniendo a Shift para agarrarlos a todos y tú puedes sostener el espaciado. No se puede ver el espaciado y un Zoom in. Bueno, no me está mostrando el espaciado. ¿Me falta uno? Hm. ¿Cuándo lo hago? Puedo cambiarlos alrededor, pero no puedo cambiar el espaciado. O ahí está ahí. Ahí está mi espacio. Simplemente apareció mágicamente. No puedes conseguir que se superpongan así, ¿verdad? Pero lo que vamos a hacer es convertirlos en un patán Audi porque nos da algunas características extra Nos encantan los Audiouts. En realidad, antes de hacer eso, agreguemos algunos avatares. Me gusta usar plugin llamado Content Reel. Puedes usar cualquiera de ellos. Hay muchos de ellos. Me gusta el carrete de contenido porque tiene un montón de cosas diferentes que podría usar. Bajo Imagen, voy a escoger, digamos, avatares, masculinos. Usted hace clic en aplicar. Atrás. A mí me gusta bastante este de aquí porque es gente más realista. Es una especie de usuario desconectado, va a moverlo aquí abajo. Bien vamos a convertirlo en Atoout las ventajas aquí es lo mismo que antes de llegar a jugar con la superposición Puedes hacerlo aquí o por aquí en la brecha. Simplemente lo pones en una cantidad negativa. Lo bueno de usar Atoout tenemos estos controles aquí ¿Puedes ver esta pequeña configuración de diseño automático? Hay una opción para decir último en la parte superior o primero en la parte superior y puedes ver que cambia el orden de las capas. Por último, primero. Todo bien. Básicamente, solo necesitas una cantidad de Gap negativa y puedes conseguir que se superpongan. Fácil, fácil. Eso es. Te veré en el siguiente video. 89. Cómo ignorar el diseño automático al espacio absoluto en Figma: Bien. Primero para ignorar el autolout, necesitas tener un Auto Por el momento, esto es sólo un marco con algunas cabezas en él. Tengo algunos textos que he creado para mi revisión. Voy a agarrar el marco padre y convertirte en un autolout y conseguirlo como quiero jugar con el padding, 24 y 24, arrastrarlo hacia Es hacer cosas de salida automática, lo cual es bueno. Quiero esa cabeza en la esquina superior. Voy a simplemente agarrar este relleno de esto y simplemente pegarlo, y esto no es parte del pedido. Sólo estoy mostrando cómo lo estoy construyendo. Mira esto. Si agrego esto al pedido, es como, quiero ser parte del flujo y voy a derribar a mis amigos. Esa es la configuración predeterminada de Atoout. Podría simplemente tenerla aquí afuera y sostener la barra espaciadora para que no salte a esto y eso funcione, pero no es parte de esto. No puedo convertir eso en un componente porque estas son dos cosas separadas. Lo que puedo hacer es decir, tú mi amigo estás ahí dentro, pero estás listo para este de aquí. ¿Se puede soportar una posición dice Ignorar auto Out. Tiene que estar dentro de un all out, entonces este tipo puede ignorar. Grosero. Yo puedo ir hasta allí y él puede ignorar la salida. El problema es que está recortado, así que puedo agarrar el marco padre y decir, no lo recortemos mientras que recorte, el contenido del clip Ahí vamos. Ahora, encontrarás que cuando lo estés arrastrando, eventualmente saltará de ese marco padre y no será parte de él en absoluto Ya ves que ahora hay elipse, es simplemente pasar el rato solo. Usaremos esa técnica que hemos usado antes. Está dentro de aquí, lo cual es bueno. Empieza a arrastrar, mantén la barra espaciadora y podrás obtenerla para que no salga del auto lout Ahora que va a ignorar, pero todo es parte de la misma salida automática unificada. Voy a jugar con el espaciado. Selecciono a este tipo y voy a sostener la barra espaciadora para que no se vaya. ' va a hacer algo así. Agarra este marco padre. Voy a agarrar el diseño de este lado. Probablemente hacer que este tipo sea un poco más pequeño. Simplemente me muevo un poco sosteniendo barra espaciadora y ese va a ser mi Autout Puede convertirse en componente ahora, pasa el rato, pero está ignorando el auto Eso es fácil. Te veré en el siguiente video. 90. Cómo ignorar el diseño automático pero sigue siendo responsivo en Figma: Hola a todos. Este video, vamos a conseguir algo, esta gragea arriba en la parte superior aquí Va a conseguir que sea receptivo además de ignorar al patán automático Significa que puedo arrastrar la salida automática y viene por la derecha. De lo contrario, simplemente se sienta ahí. Es ignorarlo, pero no viene y no responde Aquí para hacer eso. Todo bien. Para empezar, hice una pequeña gragea. Es salida automática. Quiero que esté en mi Auto out. Y vamos a hacer lo mismo que hicimos antes es que vamos a moverlo por aquí, vamos a cambiarlo a posicionamiento absoluto. Ahora se llama Ignorar Auto Lut. El término se denomina posicionamiento absoluto. Así solía llamarse. Si eres un desarrollador diseñador web, sabrás lo que eso significa. Mismo mismo. Ignorar salida automática. Entonces lo estamos ignorando. Si lo ponemos por aquí, recuerden, no queremos arrastrarlo fuera del marco, queremos mantenerlo en el marco, vamos a sostener la barra espaciadora mientras estamos arrastrando, puede ser aquí arriba Voy a tener el mío colgando un poco, y funciona. Ahí se sienta, por lo menos. No se ajusta , no responde. Responde. Todo lo que necesito hacer es seleccionarlo. ¿Puedes ver aquí las líneas punteadas? Se trata de mantenerse a la cima y a la izquierda. Todo lo que tengo que hacer es decir, Bien, tú seas la cima y la derecha. Ahora cuando ajuste mi pequeño Auto ruidoso aquí, mira, viene a lo largo de la derecha. Fácil peasy Mírenos combinando diferentes características. Ahí vas. Es así como asegurarse de que esté absolutamente posicionado o ignorando o permitido, pero también receptivo. Eso es. 91. Cómo crear un botón de altura mínima en Figma: Hola a todos. Te voy a mostrar cómo hacer un botón de tamaño mínimo y máximo. Este podría llamarse carrito, pero puedes ver que el botón no se hace más pequeño, pero puede hacerse más grande hasta cierto punto y no va a ser más ancho de lo que lo he configurado. Ese es el tamaño mínimo y máximo. Responder a Auto-outs. Déjame mostrarte cómo hacerlo. Acabo de empezar con un poco de texto. El Min Max solo funcionará cuando estés en Auto out. Entonces voy a ir a Turno A o autolou. Oye, voy a colorearlo, tú comes ahí. Bien, entonces es un botón de color, y puedo escribir para siempre, ¿verdad? Entonces lo que tengo que hacer es volver a poner mi texto. Necesito fijarlo en un mínimo y máximo. Ahora, hay que hacerlo al marco exterior, no al texto en el interior. El marco padre tiene que ser una salida automática. No funcionará con un rectángulo no funcionará solo con un marco viejo liso. Entonces con ese seleccionado, voy a ir al ancho, y solo puedo decir, me gustaría stat con a un máximo quiero poner en, no sé, 140. Se puede ver ahí que es lo más lejos que va a llegar. Vamos a intentarlo. Bien, para que veas, solo se rompe. No puedo llegar a ser más grande que eso. Pero lo mínimo, por el momento, sólo va a seguir bajando y envolviendo el exterior. Necesito que sea una talla mínima. De nuevo, haga clic en el padre y voy a decir decir de nuevo con el ancho, pero quiero en un ancho mínimo. Y quiero que el ancho mínimo sea, digamos 40. Se puede ver el ancho mínimo ahí dentro. Ahora cuando hago el más pequeño, hago el más pequeño, se puede ver que sólo llega a un cierto tamaño. Lo que podrías hacer es, digamos que quiero llamar a éste B. Quieres que probablemente esté centrado en esa caja para que cuando se haga más pequeño, más pequeño, más pequeño, se pegue en el medio. Hasta usted. ¿Voy a deshacer? Digamos que ya tienes botones existentes. Solo quieres que este botón sea el tamaño más pequeño. Puedes hacer clic en el padre. Puedes entrar aquí y cuando te sientes el ancho mínimo, ancho mínimo, aquí abajo donde dice ancho mínimo, puedes cambiarlo para establecerlo al ancho actual, y será ese tamaño. No puedo conseguir nada más pequeño que el que tienes justo delante de ti. Solo recuerda que tiene que ser un autolayout, no puede ser solo un marco viejo simple porque no lo encontrarás aquí Si te estás preguntando cómo hice esa sombra caída, está justo debajo del afijo y vas a través Probablemente lo viste en el modo velocidad, pero yo solo subí la opacidad a 100 y luego eliminé el desenfoque a cero, y terminas con esta caja Fui dos tabuladores, dos, y luego solo lo coloreé. Ahí vas. Es mínimo y máximo. Genial para botones, pero puedes usarlo para cualquier autolayout. 92. Cómo envolver objetos de diseño automático en Figma: Hola a todos. Vamos a ver algo que se llama envolver dentro de una salida automática. Es muy fácil de hacer y muy práctico. Si tienes muchos elementos que solo necesitan llenar el espacio proporcionado. Puedes hacer que el auto padre salga arriba y hacia abajo y todo lo que esté dentro de él se envolverá. Usando botones aquí, pero podrían ser imágenes, podría ser lo que quieras. Pongámonos a hacer algunos envolvimientos. Para empezar, lo que he hecho es que he creado solo un diseño automático que tiene algo de texto en él, al igual que los botones que hemos hecho muchas veces y he hecho un montón. Y así voy a seleccionarlos a todos y ponerlos en o turno, y va a tratar de adivinar lo que quieres. Muchas veces adivinará ya sea horizontal o vertical. Este de aquí fue por tratar de ponerlos en una grilla. Miramos las rejillas antes. Podemos agarrar estos marcos e ir, tú vas ahí, lo hicimos con imágenes. Pero lo que queremos hacer es no estar en una grilla. Así que quiero hacer clic en el marco padre, y quiero cambiar a horizontal. En este caso, incumplió con el envoltorio. A veces no lo hace y solo hace eso. Cuando hice una demostración de este segundo atrás, es así que esta es la opción de envoltura, da clic en eso Tiene que ser una salida automática, tiene que ser horizontal vertical, y luego puedes hacer clic en envolver. Lo que sí significa es ahora que si hay espacio para que esto encaje, lo hará, y si necesita hacerse más grande, también lo hará. Voy a cambiar el mío a una altura de auto. Simplemente puedes hacer doble clic en la parte inferior. En realidad, no puedo conseguir que el mío haga doble clic para hacer el fondo. Yo solo voy a decir abrazar el contenido, y solo significa que si esto necesita ser redimensionado, todos van a refluir y estar listos. Eso es envolver. Puede que tengas imágenes aquí. Podrías tener estas pequeñas pastillas como estas. Los llamé pastilla antes. Es una palabra terrible para ellos. Llamémosles pastillas. Sí, eso es envolverse dentro del autolout dentro de 93. Cómo organizar componentes en grupos en Figma: Hola a todos. En este video, te voy a mostrar cómo organizar tus componentes en tu panel de Activos. Bien. En el momento en que todos están como manchados aquí, y es justo donde solo tienes unos pocos, pero cuando tienes muchos, es genial ponerlos en estas pequeñas subcarpetas de aquí, así puedo decir, Bien, todos mis botones se esconden en Derecha. Déjame mostrarte dos formas de hacerlo. Ambos tienen la misma razón, encontrarás que ambos están siendo utilizados en la comunidad, así que lo mejor es conocer ambos”. s saltando. Bien, entonces tengo dos archivos abiertos el archivo original que hicimos con todos nuestros diseños móviles y el documento que estamos usando para nuestra biblioteca principal, para que todos nuestros componentes sean utilizados en otros proyectos. Este es en el que voy a trabajar. Ahora por el momento, no está pasando mucho en este documento. Aquí sólo hay un par de botones. Empecemos por la forma más fácil. Vayamos a las secciones de aquí abajo. Entonces miramos las secciones antes, pero vamos a mostrar otro poder oculto de ellas. Bien, entonces voy a la herramienta de sección. Voy a dibujar una sección alrededor que no funcionó. Voy a dibujar una sección alrededor de estos botones. Voy a llamar a esta sección. No utilice la herramienta de sección para hacer doble clic en ella. Vuelve a la herramienta de movimiento, el Viki. Llama a uno de los botones. Lo bueno de esto es que todo dentro de aquí ahora está en este subgrupo llamado botones. Echa un vistazo por aquí. No tanto en el archivo en mis capas, sino ir a activos y se puede ver crédito en este archivo aquí, hay estos dos botones. Aún no están en un grupo. Tienes que encenderlo después. Por defecto, está apagada. ir a la configuración de la biblioteca aquí y decir, ¿ puedes mostrar también las subcarpetas Es útil cuando tienes un documento muy pequeño para apagar las subcarpetas porque no hay ningún punto real. Estamos arriba dos botones. Pero cuando empiezas a construir más complejo, y es bastante rápido se construye en un diseño coplex, puedes mostrar las carpetas y puedes ver, ahí están mis botones Puedo hacer click dentro. Mira, tengo estos dos. Shift S es mi herramienta de sección. Puedo alargarlo. Quiero volver a mi herramienta de movimiento, quiero llamar a esta mis íconos, y voy a ir a esto, ir a mi página de componentes y sacar algunos iconos de esta. Vamos a agarrar a estos tipos. Te van a cortar y vas a ir aquí, me voy a asegurar de actualizar la biblioteca, biblioteca, publicar, publicar, puedes ver aquí ahora, tengo una opción de botones mis activos, pero también tengo una opción de iconos. Obviamente puedo volver a apagarlo para no mostrar las subcarpetas y solo verlas en una bonita lista larga y grande Lo mismo con los archivos que lo están usando. Aquí está el archivo tecno de Limerick. Si tengo un nuevo marco aquí, vamos a enmarcar, pajearlo. Necesito agregar algunos de mis activos. Por defecto, está listando simplemente todo. Pero de nuevo, una vez que empieces a conseguir diseños más complicados, puedes mostrar las subcarpetas que sea más fácil ir, necesito un icono, puedo ir a la carpeta Contras y arrastrarla hacia afuera Lo bueno de esta manera es que aquí atrás, si tengo un ícono que no quiero aquí y quiero los botones, mira esto solo arrastrarlo. Ahora si voy a volver a encender eso, está encendido Bien, ese corazón ahí está ahora en la carpeta de botones. Entonces es una manera fácil de mover las cosas. Déjame mostrarte la otra manera solo porque mucha gente todavía lo hace. Voy a agarrar esto. Este es mi componente principal para mis campos. Voy a cortar eso. Voy a poner eso en mi biblioteca principal. En lugar de ponerlo dentro de una sección, solo puedes nombrarlo. Entonces, vamos a darle a este un nombre mejor para empezar. Este va a ser mi DOB Field. Lo que tienes que hacer es al principio del nombre, puedes escribir en campo y simplemente poner una baraja Ford Puede tener espacios, no necesita espacios. Me gustan los espacios. Haga clic en eso. Bueno, he añadido un par de cosas ahí dentro. Te vas. Lo que encontrarás es que si voy a mi panel de Activos, ¿ puedes ver? Tengo esta carpeta de campo aquí. Acabas en el mismo lugar. La única diferencia realmente es que así es como teníamos que hacerlo. Ahora puedes hacerlo con secciones. No importa en qué dirección, pero te toparás con ambos. Por eso quería mostrarte en esto es que no hay forma correcta de que me resulten más fáciles las secciones porque obviamente solo necesitaba arrastrarlas. Pero si tengo muchos de ellos, tengo que cambiarles el nombre. Puedo renombrar masivamente así que vamos a hacer un ejemplo aquí. Con FK, vamos a crear un montón de Sí. Dale Color. Cualquier color. Vamos a convertirlos en múltiples componentes principales. Eso es una cosa clave. No se puede hacer esto con instancias. Tienes que ir a buscar el componente principal, y ya puedo hacer mi cambio de nombre masivo Podría ir y agregarlos individualmente, pero puedo usar mi comando o control R. puedo decir, me gustaría renombrar dos. Voy a tener una carpeta llamada cuadrados y voy a poner en un Ford slash y después voy a usar el nombre actual Estoy renombrando todos estos marcos, cuadrados que igual que hicimos para la fecha de nacimiento Pero ojalá, en mi panel de Activos ahora, tengo una carpeta squeze Como mostrarte dos formas de hacer algo, pero te toparás con ambas, y es útil saber qué carajo está pasando ¿Necesitas ponerlos en grupos? No, pero llegas a un punto en el que en realidad, tienes muchos de estos componentes diferentes, y necesitas agruparlos porque se está volviendo complicado averiguar dónde está todo. Bien, así es como organizar sus componentes en grupos en su panel de activos Las dos cosas que te podrían atrapar es que si agarro esto y me voy, eres el componente principal. No, puedes ver aquí que es sólo una instancia. ¿Bien? Entonces, si cojo esa y voy por aquí, y me meto en un grupo yendo, cambiemos el nombre del Comando. Vamos a llamarlo Ty porque me estoy quedando sin nombres, Thingi porque es una instancia, se puede ver ahí comparado con el componente principal Ir a mi carpeta de activos. No tengo una Carpeta Esta. La otra cosa que te engaña es que tienes que encenderla aquí dentro. De lo contrario, no los verás. Voy a estar todo repartido. Otra cosa que quería saltar y mostrarte si pones secciones dentro de secciones, tienes esta sección aquí arriba llamada componentes. Componentes. Lo que encontrarás es que tienes uno de los componentes, pero entonces no tendrás este subgrupo extra de íconos Simplemente no funcionan así cuando los estás nombrando, así que esa podría ser otra cosa con la que te encuentres Sea cual sea el padre va a ser el nombre del grupo, así que no puedes tener secciones y secciones laterales para este grupo nombrando aquí. Bien, eso es todo. Voy a deshacer eso y te veré en el siguiente video. 94. Proyecto de clase 20: tarjeta de revisión: Sé que lo has estado pidiendo . Es tiempo de proyecto de clase. Ya ha pasado un tiempo. Quiero que creen una tarjeta de revisión, similar a lo que hemos estado construyendo. Quiero que incluyas estas características aquí, la herramienta Ancho superponiendo estrellas, ignorar el objeto de autosalida, el botón xmax y los componentes organizados Déjame mostrarte a lo que me refiero, algo así. Por lo tanto, incluye la herramienta Ancho en alguna parte. Lo acabo de conseguir como parte del autotolout como una línea divisoria que podrías tener como gráfico de fondo No me importa cómo lo hagas. Sea creativo. Podría ser algo genial alrededor de esto o depende de ti. Quiero que tengas una calificación de estrellas y quiero que se superpongan solo porque conviertas la mía en un componente y luego agregues un montón de instancias a un autodiseño solo para que yo también pueda entrar aquí y apagarlas si es necesario para diferentes clasificaciones y diferentes lecturas Pero yo solo quería ver superpuestos a ellos. Quiero ver al menos uno ignorar Auto out. Tengo uno arriba aquí y uno por aquí. No me importa cuál haces. Podrías experimentar el que responde, pero no me importa. Siempre y cuando haya uno que ignore el autolayout, pero siga siendo parte de ese marco, asegúrese de tener un Tengo este de aquí, tiene, uno tiene un Min animax y solo tengo que asegurarme de que el mío vaya de ese lado Y entonces mi texto es escribir una línea para que cuando empiece a escribir en ella, se mueva de ese lado. Fresco. También asegúrate de que tus activos estén en carpetas. No me importa si está en la carpeta actual o en tu carpeta principal, dependiendo de cuánto estés listo para ordenar tu proyecto. Quiero que esto pase. Podría ser solo botones e íconos. Yo también estoy bien con eso. Cuando hayas terminado, normalmente, comparte una captura de pantalla de tu tarjeta de revisión. Intenta obtener una oportunidad donde tengas tanto a los grupos como a la tarjeta de revisión ahí dentro. Haz algo más agradable que el mío. Subirlo a proyectos de clase y compartirlo en línea. ver si podemos poner en acción algunas de las cosas que hemos aprendido. Te veré después de que hayas terminado tu proyecto de clase. 95. Cómo añadir condiciones a las variables en Figma: Hola a todos. Es tiempo variable condicional. Hicimos variables antes, recuerden que hicimos el botón, cuando golpeamos más, subió y cuando golpeamos menos, bajó. Lo volveremos a hacer para recapitular, pero también nos aseguraremos de que no vaya por debajo de cero Suba arriba arriba, pero luego no puede bajar abajo abajo abajo abajo abajo abajo. Esa es la condición. Si es menor que cero, no sigas adelante. También agregaremos otra condición donde dice, Si consigues hasta diez, no vayas más alto. Mira eso. Son llamadas variables condicionales. Vamos a saltar y hacer. Derecha. Para ser declarado, acabo de crear un nuevo archivo de diseño. Se llama Sin título, y he arrastrado mis botones, y hay un poco de texto aquí en el medio para los números Sólo hay un documento fresco. Vamos a recapitular cómo hicimos las variables antes porque necesito recapitular porque fue hace tanto tiempo, probablemente tú Vamos a crear primero las variables. No tengamos nada seleccionado. Ve por aquí. Variables. Vamos a hacer clic en esta pequeña opción. Vamos a crear uno, y vamos a crear una variable numérica. Vamos a llamar a esto un total, y estableceremos el valor en cinco solo para que sepamos que lo hemos aplicado bien. Entonces vamos a aplicar esa variable al número y aquí. Da clic en el cuadro numérico y en el diseño arriba arriba aquí, verás este botón de aplicar variable. Vamos a hacer clic en eso. ¿Qué variable queremos aplicar? Vamos al total. Ahora están conectados. Entonces cinco no es lo que quiero. Voy a volverlo a cero, pero sabemos que funciona. Vamos a cerrar eso ahora. Ahora necesitamos estos botones para cambiar esta variable. Hagamos el plus. Vamos a hacer clic en este, y vamos a subir aquí, ¿dónde está? Es un prototipo. La opción ocho y nueve cambia entre el diseño y el prototipo Ese es el único salto que es un poco raro. Así que asegúrate de estar en prototipo. Voy a agregar interacción a este botón. De barril, lo que quería hacer. No quiero ir a una página. Me gustaría establecer de variable. ¿Cuál variable? Total. Sólo tengo uno. Es escribir una expresión. Cuando se hace clic en ese botón, me gustaría tomar total y me gustaría agregarle uno Yo solo escribo uno en mi teclado y eso debería funcionar. Solo estoy haciendo clic en el fondo, Shift barra espaciadora, y eso debería funcionar. Hagamos lo mismo para menos. Digamos bajo prototipo. Vamos a agregar interacción. De barril, me gustaría que esta cosa estableciera una variable. ¿Qué variable? ¿ Ya tengo uno? A mí me gustaría que se exprese. Esto es lo único que tienes que hacer doble. Buscando restar. Tienes que decir, en realidad, quiero restar el total, y quiero que sea sometido por uno En el fondo, veamos si funciona. Barra espaciadora de desplazamiento, arriba , arriba, arriba, abajo, abajo, abajo. Pero va abajo abajo abajo abajo, da. Aquí es donde las condiciones son útiles. Lo que voy a decir es éste de aquí. Puedes hacerlo aquí arriba o aquí abajo. Voy a decir, no quiero establecer una variable. Voy a cambiarlo a una condición. Ahora bien, una condición es como un diagrama de flujo. Ahí se puede ver un pequeño icono. Un diagrama de flujo, sí, no, y vas en distintas direcciones. Aquí es lo mismo para esta condición. Lo que va a decir es, si esto es cierto, hazlo. Si no es cierto, hazlo. Si lo que es cierto, vamos a dar click si voy a escribir nuestra condición. Voy a decir si el total es menor que cero, oh, si es mayor que cero. Si es mayor que cero, me gustaría que fuera menos uno de descuento porque reemplazamos esa variable original, completamente desaparecida. Entonces vamos a decir si es mayor que cero, me gustaría que estableciera variable. Me gustaría tomar el total, que es nuestro objetivo, y me gustaría tomar el total y me gustaría menos uno. Entonces lo mismo que hicimos antes, pero ahora es en esta declaración donde dice, Si es mayor que cero, haz esto. Si no lo es, no hagas nada. Si no es mayor que cero, no lo sigas minando. Vamos a darle una oportunidad. ¿ Funciona? Espacio de desplazamiento. Bien, arriba arriba arriba, abajo abajo abajo abajo abajo, da, da, da. Deja de funcionar. Mírennos. Somos programadores de hackers informáticos. Si eres un desarrollador viendo esto, muchos desarrolladores sí obtienen sus habilidades de figma y saben cómo trabajan los diseñadores, te estarás riendo mi terminología y mi entusiasmo por hacer que algo tan simple funcione Porque no soy muy buena desarrolladora o programadora, estoy muy emocionada. Podrías ser como yo. Hagamos uno más, y solo lo platicamos porque quiero decir, no va por debajo de cero, pero no puede ir por encima de diez. Digamos que la gente no puede comprar más de diez boletos. Entonces vamos a decir es que vamos a entrar aquí. ¿Bien? Tenemos esta cosa puesta. Nos vamos a deshacer de él. Vamos a decir, en realidad, no quiero establecer una variable, voy a establecer una condición. Me gustaría que la condición se fijara dos en total. Si el total es qué? Si el total es inferior a diez, quiero que funcione. Lo que quiero trabajar. Entonces, si el total es inferior a diez, quiero que hagas esto. Quiero que pongas la variable en el total, que es el objetivo, y quiero que el total tenga uno agregado a él. Quiero ir adición de uno. Esto es todo lo que hicimos cuando empezamos el video por primera vez. Pero ahora está en esta condición. Sólo lo va a hacer si el número es menor a diez. Si es mayor que diez, quiero que no haga nada, por favor. No quiero que trabajes. Vamos a darle una oportunidad a eso. Vamos, y funciona y se pega a las diez. Si no eres un codificador hardcore, hay un poco de jugar y tratar de averiguar menos que, menos que igual a, mayor que Pero espero que te haya dado una buena idea de las condiciones, una forma de extender las variables, especialmente las menos. Es una gran manera de extender las variables y hay 1 millón de otras cosas que puedes hacer con variables, básicamente todas codificando. Pero ojalá te den una buena idea de lo que la gente está haciendo, otras personas podrían haber hecho por ti o creando tus propias variables con condiciones. Ahora, soy bastante visual. No puedo ver estas cosas e irme, sé que eso está pasando. Tengo que irme, tengo una variable. Si total, y luego lo señalo, hay una variable que aré hasta el cero aquí Si el total es menor que y tengo que hacer mis manos con el caimán, menos de diez, haz esto . ¿Qué es esta cosa? Quiero encontrar el total, luego tomar ese total y agregarle más uno. En fin, espero que haya sido de ayuda. Debería haberme detenido ahí, ¿verdad? A algunas personas les va a encontrar esto fácil. Entonces la gente va a encontrar esto difícil. Estoy en el medio. Me siento como un genio cuando lo hago funcionar, pero no siempre lo hago funcionar la primera vez. Estarás en algún lugar a lo largo de ese espectro. Bien, eso son variables condicionales dentro de Figma. 96. Cómo convertir nuestra variable booleana a falso en Figma: Todo el mundo. En este video, vamos a ver otra variable. Vamos a ver algo se llama una variable de lingotes Es un nombre elegante para encendido o apagado, verdadero o falso. Lo que vamos a hacer es que vamos a clic en Plus sobre esto y ver el icono de la tarjeta que actualmente está configurado en falso como un vacío. Si hago clic en Más. Mira, demuestra que tienes algo en tu carrito. Pantalones elegantes. Vamos a saltar y mostrarte cómo hacer una variable de lingotes dentro de Bullion es una palabra difícil de decir, y una palabra muy rara . Vamos a saltar. Todo bien. Para empezar, encontré un icono de un carrito de compras y lo puse en círculo. Eso es. Yo uso el iconify y simplemente agarré cualquier cosa vieja del carrito de compras y acabo hacer de este el vector con la elipse Me deshice del marco en el que estaba . Ahora hacemos eso ahora. Necesitamos tener un componente. Entonces voy a seleccionar ambos, convertirlos en componentes, opción de comando K, control OK. Vamos a darle un nombre. Llamemos a esto mi carrito y necesitamos dos variantes. Entonces un booleano alternará entre sólo dos. Tiene que estar encendido o apagado. Verdadero o falso. Este de aquí, te voy a colorear ocho. Todo bien. Bueno, me tomó más tiempo de lo que esperaba, pero tenemos dos variantes, no variables. Esto lo hicimos antes. Tenemos un componente, solo hay dos variantes del mismo. Tengo uno que parece que está vacío, y otro que parece que está lleno. Vamos a nombrarlos. Vamos a dar click en este primero aquí. Tenemos que nombrarlos correctamente. No se puede llamar vacío a este. Tienes que llamar a esto falso. Como en el ¿Puedo deletrear falso? Ahí vas. El carro es falso. No está vacío. Este de aquí lo vamos a llamar verdadero. Oh, la ortografía es importante. Booleano es verdadero o falso. Vamos a arrastrar una instancia de ello, y eso es lo que vamos a alternar. Ahora lo que tenemos que hacer es crear una variable. Recuerde, nada seleccionado en vista de diseño, vaya a variables. Ya tenemos uno. Voy a crear otra. Va a ser un número uno. En realidad, no va a ser un número uno. Voy a crear otro llamado Booleano. Puedes seguir llamándolo Lingotes. Deberías hacer algo como indicador indicador de carrito. Verás mucho lo que es el caso de camello. El primero es minúscula y los que están entre los superiores. Cosa del indicador del carrito. Ese es el caso del camello. Yo nunca uso caso camel porque yo solo podías hacer carrito. Hago cosas como Es el carrito lleno. Si vas a estar mejor, la gente usa guiones bajos. No voy a hacer nada de eso. Porque no eres mi jefe y no necesitas a Figma. Si estás codificando esto correctamente, tendrías que usar guiones bajos, guiones o De todos modos, así que hemos creado esta variable. No se aplica a nada, así que vamos a aplicarlo a algo. Entonces vas a ser esta variable. ¿Dónde lo haces? ¿Por aquí? Está un poco oculto porque está ahí. La instancia del carrito. Ahí está mi pequeño toggle, que es genial. Ya las hemos hecho antes. Miembro, verdadero o falso, te da este pequeño toggle, y aquí puedes aplicar esa variable. Quiero decir que el carrito está lleno según se aplica a esto. Para controlarlo. ¿Qué usamos para alternarlo? Vamos a usar este botón. Vamos a decir que vamos a abrir nuestras variables, que recordamos es en modo prototipo. Ya tengo uno. Hago clic en esto y subo un poco. Voy a añadir una segunda. Es otra condición. Porque lo que voy a decir es que si el total es mayor que cero, quiero que haga algo. ¿Qué quiero hacer? Yo quiero hacer esta acción. Esta acción aquí va a estar configurando esta variable, qué variable, la variable carrito completo, que es esta cosa aquí, quiero que la establezca en true. Muchas gracias. Sólo dale una prueba. ver si funciona. Turno plus. Si esto es mayor que cero, debería desencadenar que esto sea cierto. Y es verdad. Oh, estoy tan feliz conmigo mismo, ¿de acuerdo? Y lo que voy a hacer, sin embargo, es dejarlo ahí cuando baje a cero, no está funcionando. Voy a conseguir que hagas eso. Lo que voy a hacer es que te pondré como un pequeño mini proyecto. No va a ser un proyecto de clase completa como lo hemos hecho nosotros. Yo solo quiero que vayas, a ver si puedes conseguir se vuelva falso cuando se pone por debajo de cero, en realidad, a cero o por debajo. Ve tú mismo, a ver si puedes hacerlo. Hazme saber en los comentarios, si lo hiciste. Aunque no lo hicieras, avísame si es demasiado duro, solo me interesa. Te mostraré en el siguiente video cómo lo hice para que puedas comparar notas. Si lo hiciste, salta por ahí. Eres un hacker informático. Si ya eres desarrollador, puedes poner los ojos en blanco ante lo fácil que es esto. Pero si eres como yo, y te emocionas mucho codificando cosas, salta por ahí. Déjame saber en los comentarios, cómo estás encontrando variables. Dale una oportunidad y te veré el siguiente video. 97. Variable booleana - Completa: Bien. En el último video, llegamos a mostrar el carro volviéndose lleno, pero no pudimos hacer que se apagara. Pero en este video, te voy a mostrar cómo conseguí que se apagara. Por si acaso no podrías si acaso quieres comparar notas. Si lo hiciste funcionar. Bien, vamos. Bien, espero que haya salido bien en el último video. Lo vamos a hacer juntos en caso de que no lo consigas, o simplemente quieras comparar notas. Bien, así que vamos a hacerlo a este menos. Queremos apagarlo. Queremos volver a vaciar. Entonces vamos a decir es, agreguemos otra condición haciéndola aquí. Bien, vamos a decir, quiero una condición que diga, nuestra condición va a ser? Si el total es igual a cero, quiero que hagas algo. Cero, quiero que hagas esta acción. ¿Qué acción? Voy a decir la variable? ¿Qué tipo de variable quiero ver? ¿El carrito está lleno? No está lleno. Es falso. Vamos a probarlo. ¿Eso funcionó? Enganche, arriba, arriba, abajo abajo abajo. Sí, lo hicimos. Tengo confianza en que tú también lo hiciste. Te sientes bien? Me siento bien. En fin, eso era factible y tienes que mirar las cosas que estás haciendo ahora Mira esto y vete, bueno, mira lo hice. Yo hice eso. No es mucho, pero estos pequeños pedacitos de interacciones, realmente pueden hacer que tu prototipo funcione cuando intentas vender ideas a los clientes y mostrarle al desarrollador cómo imaginas que este tipo de prototipo funciona este tipo de prototipo antes de que vayan a construirlo. Bien, a me siento bien. Espero que estés orgulloso de ti mismo por hacer algunas variables con condiciones y bulones. Mírennos. Te veré en el siguiente video. 98. Cómo crear una ventana emergente superpuesta en el panel de acción Variable en Figma: Hola ahí. Vamos a mirar abrir un modelo cuando lleguemos al plus, dice, Mira, hemos agregado al carrito y después de algún tiempo, desaparece. No es del todo una variable, aunque estemos en la sección de variables, pero quería mostrarte cómo me confundí y sé, tiene sentido en esta parte del video. Vamos a saltar y hacer una no variable en la clase de variables. Lo primero, vamos a estar en modo prototipo para que todo esto funcione. Tenemos algunas variables aplicadas a estos botones. Un montón de cosas pasando. Lo que puedes hacer es cuando estaba viendo esto por primera vez, cuando introdujeron, yo estaba como, A podemos agregar una variable que haga superposiciones En realidad no. No estamos haciendo nada variable. Lo estamos haciendo es que estamos trabajando con el on tap. Estas variables, lo que estamos agregando no lo es. Hemos hecho pop ups en el curso de esenciales. Lo que vamos a hacer es que vamos a decir, me gustaría que cuando se toque esto , olvida todas estas cosas. Yo solo quería hacer algo por separado. Quiero hacer una acción. No quiero establecer una variable. Yo sólo quiero abrir una superposición. Por aquí, no estamos haciendo variables, aunque parece que lo estamos haciendo porque estamos en esa misma ventana para mover esto hacia arriba. Voy a decir cuando se toca esto, me gustaría abrir una superposición, que superposición, solo tengo una Lo he convertido en el botón de éxito . Esto es por aquí, hice. Le di un nombre, y ¿qué quiero hacerle? Quiero que aparezca posición. Voy a conseguir que no lo manden. Quiero ponerlo manualmente en alguna parte. Voy a decir que siempre está en el camino por allá. Quiero que aparezca abajo aquí abajo, compra mi pie de página. Va a aparecer cerca al hacer clic afuera. Qué animación, voy a conseguir que se disuelva después de lo que sea el defold Aquí, ha aparecido entre mis dos variables separadas. No te preocupes por eso. Puedes arrastrarlos. No los puedes arrastrar. Solías poder arrastrarlos, y solías poder cerrarlos también, así solo podías verlos un poco más fácil, está bien. Dos variables se aplican a este botón, pero por separado, acabamos de obtener estas superposiciones abiertas le dan una Cuando se hace clic en este botón, vamos a darle una oportunidad. Yo debería hacer tanto el número, debería cambiar el carrito y debería tener esta pequeña métrica de éxito aquí abajo, agregada al carrito. Cuando hago clic en el fondo, se disuelve. Un poco más elegante y hagamos que ese botón se disuelva Por lo que no tenemos que hacer clic en el fondo, se disuelve después de un tiempo Lo que podemos hacer aquí es que podemos hacer clic en nuestro botón y podemos agregar una interacción. Entonces prototipo. Agreguemos una interacción y digamos, después de un retraso de ¿cuánto tiempo? No lo sé, 1.5 segundos. Me gustaría que cerrara el overlay. Vamos a darle una oportunidad a eso. Una barra espaciadora , agrega, y luego solo espera, espera, espera, espera minuto y medio Se va por sí solo. Obviamente, tenga una práctica por su cuenta de hacer la opción de quitar del carrito. Entonces necesitas otro botón y ver si puedes conseguir que esa lógica funcione por aquí. No lo haré yo mismo en el siguiente video. Siento que tienes esto. Dale una oportunidad. Házmelo saber en los comentarios. ¿Tienes esto? Si tienes problemas, déjalos en los comentarios y yo o uno de los expertos entraremos y te ayudaremos. Supongo que quiero agregar esto a esta sección de variables, aunque no estemos haciendo una variable es porque cuando vi por primera vez esta característica, yo estaba como, ¿Estamos haciendo una variable? No lo estamos. Solo estamos agregando otra acción a nuestro grifo. Esa no es una variable, sino que está todo mezclado en conjunto. Eso lo resolví, todo tenía un poco más de sentido. Bien, espero que haya tenido sentido para ti. Te veré en el siguiente video. 99. Cómo cambiar el espaciado con las variables numéricas en Figma: Yo Bien, todos, vamos a ver otra variable Básicamente, vamos a usar variables para el espaciado. Mira esto. Voy a decir, no estás cómodo, vas a ser compacto y aprieta todo el espaciado por aquí, cómodo Puedes ver que también podemos usar variables para el espaciado. Esto lo hicimos antes cuando hicimos Modo oscuro. Puedes hacer estos diseños realmente convincentes y diferentes que tienen muchos cambios diferentes que se realizan solo con solo presionar un interruptor En este video, me voy a perder un poco. Voy a incluirlo en el curso porque también te perderás. lo que quiero enfocarme en este video es solo jugar con un espaciado. Eso no es tan difícil. De alguna manera me lo pongo duro en este video al romperme, perderlo arreglarlo juntos y todos seremos los más sabios Vamos a saltar. Bien, para empezar. Yo solo quería mostrarte lo que hicimos antes en el curso cuando hicimos modo luz y modo oscuro Recuerda, hicimos esto y podíamos pasar de donde es cosas de color del modo claro al modo oscuro. Es muy similar a eso. No es necesario tener aplicado el modo luz y el modo oscuro, pero voy a volver a ese archivo en particular que hice de nuevo a nuestro documento principal y hacer mi espaciado en este. Para empezar, solo tengo un montón de cuadros de texto y un poco de imagen dando vueltas. Lo que quiero hacer es convertirlo en un autolayout. Quiero convertir estos en un Autolayout, Shift A, y luego combino estos dos, el Auto out y esta imagen en un día de turno de Auto out. hay un nido de Auto Aquí hay un nido de Auto porque quiero jugar con el espacio entre estos dos y el espacio entre estos dos de aquí. Son los espaciamientos a los que quiero aplicar variables. No tengamos nada seleccionado. Vamos a entrar en variables. Ya tenemos uno. Puede que no, pero tengo esta llamada cosas de color. Hagamos uno nuevo. Voy a decir hagamos una cobranza de crédito. Voy a llamar a éste, no a cobranza. Voy a llamar a esto espaciado uno. Bien. Y aquí dentro, voy a crear mi primera variable. Va a ser una variable numérica, y tenemos un par de cosas. Por aquí, cuando hacemos con espaciado, muchas veces no usamos números, usamos palabras como palabras Tissuet Usamos pequeñas, medianas, ese tipo de cosas. Voy a empezar con medio. escribir la palabra completa medio. Eso no importa. Simplemente es muy común en la web usar MD para mi talla mediana, quiero tener alrededor de 16. No es demasiado grande, no es demasiado pequeño. Es medio. Lo que quiero hacer es que quiero dos modos. Este primer modo aquí se va a llamar compacto. Pequeña nota al margen aquí. Si escuchas muchos susurros y cosas golpeando, tengo dos gatitos nuevos y están atacando todo en la oficina y tienen que estar aquí porque me Ignorar el crujido. Resulta que soy un tipo gato. Tenemos compacto y sería común tener otro modo llamado cómodo. Simplemente lo llamaremos cómodo. Ba es más corto. Podrías llamar a este móvil y de escritorio. Escritorio, tienes más espacio, por lo que puedes hacer que el medio sea un poco más grande cuando estás en el escritorio. Se puede cambiar el nombre de eso. Es muy común tener compacto y cómodo así como para espaciado. Es posible que te hayas topado con eso en tus viajes. Medio en un dispositivo pequeño, o un dispositivo compacto va a ser 16, pero tenemos más espacio, medio en realidad va a ser un poco más grande. Vamos a darle una vuelta y aplicarlo. Vamos a acreditar nuestras variables. Vamos a aplicarlo. Lo vamos a hacer al espaciado aquí. Este espaciamiento aquí entre este encabezamiento aquí y el texto, quiero ser medio. No puedes usar esto por el momento para aplicar la variable. Tienes que hacer exactamente el mismo icono por aquí. La brecha es lo mismo que la brecha por ahí. Pero en este para obtener el desplegable, podemos decir, me gustaría aplicar una variable, cual, me gustaría aplicar mi espaciado de medio a eso. Quiero que a lo mejor el espaciamiento entre esto también sea medio. Quiero que no tengas 18 18, quiero que seas una variable de medio. Ambos están separados por 16 píxeles. Lo bueno de eso es que no he escrito 16 ahora. He escrito en medio. Lo que eso significa es que le puedo decir a este padre aquí, por defecto es lo que sea la primera de tus variables Está por defecto a 16 porque es el primero en la lista. Lo que puedo decir, sin embargo, es esta cosa de aquí, teníamos modo claro y oscuro, puede que no tengas eso. Podemos agregar otro para decir, quiero que el espaciado sea compacto, lo cual no va a cambiar nada porque es el predeterminado porque es el primero, está en Auto. Se lo voy a decir a comodo. Mira eso. Todo cambia. Todo cambia. Además, podemos pasar al modo ligero al modo compacto. Vamos. Oh, sí me encanta combinar estas cosas. Así que vamos a pasar por un poco más. Voy a volver al modo oscuro. Voy a volver a compactar. Eso es bueno. Llenemos algunas de las otras variables. Esto es más de lo mismo. Yo sólo quiero mostrártelo. Deberías pasar y crear todas tus diferentes variables de color, lo siento, todas tus variables numéricas. Deberías hacer un pequeño Bien, deberías pasar por y hacerlo extra pequeño. Obviamente hay grande, extra grande. Esas son las tallas normales que usas. Obviamente puedes crear lo que quieras. Entonces en un pequeño dispositivo, me gustaría que esto fuera seis. Lo siento, no es un pequeño dispositivo. En un dispositivo compacto, me gustaría que el pequeño espacio ocho y el cómodo para ser 16, expande un poco el pequeño hacia fuera Extra pequeño, se reduce a cuatro. Y cada vez que uso espaciado extra pequeño, ¿de acuerdo? Cuando es cómodo, sale a ocho. Debes rellenar los otros. Yo no voy a hacerlo. Lo bueno de eso es que solo he aplicado medio en todas partes, y esa brecha ahí es demasiado grande. ¿Bien? Entonces lo que quiero decir es cuando estoy lidiando con esto, sí, el mediano es un buen tamaño para esto. El dimensionamiento entre estos dos, ¿puedo dar click en él? No puedo. Voy a hacer clic en el cuadro principal. Haga doble clic en él. Ahí vamos. Quiero que no sean 16. Ya ves lo que pasa, está en el tipo de caja rara. Eso significa una especie de variables que le dicen qué hacer. No es 16, en realidad es medio, que es 16. Oh, hombre, estoy confundiendo a todos. Ve y cambia eso. Digamos, quiero aplicar la variable a no mediana, quiero que sea extra pequeña. En un modo compacto, decidimos que extra pequeño es cuatro, pero en un modo cómodo, son ocho Empezando por cuatro, como me gusta. Pero si digo, en realidad, ahora están todos cómodos, ese pequeño es solo un poco más grande ¿Entuviste la idea? Significa que si borro estos y voy a éste y aplico mi variable de Todo bien, estoy de vuelta. Me viste perdiéndome ahí. Porque yo estaba como, Bien. Porque yo solo te iba a mostrar como si borráramos el texto, vamos a ir, bien, vamos a subir aquí, y vamos a aplicar Espaciado. No está aquí. Estaba como, borré cosas, cambié las cosas. Incluso reinicié Fgment y estaba como, Tal vez, eso es todo. Resulta que eso no se aplicará si no hay nada ahí con el espaciado aplicado a él. Así que tengo aplicado extra pequeño mediano. Entonces aquí, porque eso no está en este documento, no puedo entrar en aplicar mis conjuntos de variables. Porque está en cosas de buen color. Pero si te agarro, duplicarlos al otro lado. Digo, este padre ahora tiene espaciado en él porque antes no tenía espaciado en él. Eso no me gusta. Pero ahora ya sabes, los dos sabemos. Voy a agregar espaciado, y voy a decir que esto está configurado para que sea cómodo Por supuesto, podemos decir que quiero en realidad apagué mi modo de luz y modo oscuro también, pensando que ese era el problema. Puedo cambiarlo del modo oscuro y quiero que sea compacto. Míranos, usando variables para el espaciado. ¿Fue un buen video? ¿Necesito volver a grabar este? No lo sé. Me gusta que nos perdiéramos y lo descubrimos juntos. Creo que eso es importante. Quiero mostrarte una última cosa es que aquí tenemos este autolayout Cambiemos el color de fondo porque quiero mostrarte cómo se aplicaron los rellenos en términos de una variable Es un poco diferente. Vamos a darle un color de relleno solo para que podamos ver qué está pasando. Ese color no. Cualquier color verde. Eso va a ser bueno. Entonces esta es mi Auto out. agregar un poco de relleno alrededor de él. Voy a decir, puedes ver aquí, puedo escribir 16. Uy. No hay un desplegable como este de aquí para decir aplicar variable. Lo haces un poco diferente, y eso es lo que quería mostrarte. ¿Puedes ver ahí? Es solo ese mismo pequeño icono variable que hemos visto por el lugar. A, y podemos hacer lo mismo. Aplicar medio, que es 16. A, este de aquí, medio, que es 16, y va a funcionar. Digamos que esto tiene el espaciado de compacto. Ese es el valor por defecto. Vayamos a comfy, y el acolchado se hace más grande Hay un par de cosas mal esto. Nada que ver con las variables. Ya arreglaremos eso. Pero supongo que solo quería recapitular que podemos usar espaciado Creamos variables para el espaciado. Los nombramos y teníamos dos modos diferentes entre los que podemos cambiar. Lo que hicimos antes es que lo hicimos con color con dos modos diferentes, modo luz y modo oscuro. Fuimos y después lo aplicamos. Para el color, fue con el color de relleno. Deshazte de eso. Podemos decir llenar el color con Oh, no, y aquí quiero llenarlo con esa variable de interfaz que hicimos. Mientras que cuando estamos haciendo espaciado, encontramos el espaciado con el que queremos meterse. Encontraremos al menos la caja, el padre con el que queremos meterse, o lo haces en el desplegable para algunos de ellos y algunos de ellos tienen este pequeño ícono de variable en él. Bien, eso es todo. Quiero dejarte ahí porque espaciado, puedes decidir qué espaciado es y qué diferentes tamaños son cómodos y compactos También notaste que esto no funcionó. Vamos a arreglarlo ahora. Algo completamente separado. Hagamos una pausa, respiremos profundamente. Algo malo con esto. Sé lo que es. Mi auto lout está puesto a la cima y a nada más. Eso creo o la izquierda. Lo que vamos a hacer es que vamos a decir que las restricciones van vamos a ponerlo de nuevo en realidad al modo compacto. Vamos a sentarlo. Pongamos esto en el medio para que cuando se vuelva cómodo, empuje sobre sí mismo y no se limite a saltar hacia la derecha Arriba e izquierda no es lo que queremos. Queremos ir aquí y decir izquierda y derecha y arriba e abajo. Ya hemos hecho esto antes. Las limitaciones. Vamos a darle una prueba. Probablemente todavía no va a funcionar. Pasemos al modo cómodo. La caja no se hizo más grande, el espaciado cambió, pero esto irá un poco atascado en los lados ¿Qué hay de malo con esos? Vuelva a compacto. Es este cuadro de texto aquí. Bueno, en realidad, el Auto out que está en este lado derecho aquí se establece en un ancho de un ancho fijo. Entonces es ancho fijo de 230. Entonces cuando añadimos más relleno, no sabe a dónde ir. Nosotros decimos, llene el contenedor en el que se encuentre. Impresionante. Eso va a funcionar. Vayamos aquí. C se puede ver que trabajó el ancho. Llena el contenedor en el que está solo empuja un poco hacia abajo. Deshacer, rehacer, pero no hizo el fondo. Básicamente, es lo mismo, va hasta aquí. Encontremos que la altura de esto se establece para abrazar. Eso es bueno. Es este cuadro de texto dentro de él. A veces es el padre completo. A veces es el lout de orden que está dentro del oro afuera, y a veces es este cuadro de texto Este cuadro de texto tiene un ancho de relleno, está bien. Una altura de abrazo. Bien, entonces no es él. Vamos a agarrar el Aout en el que está, y tiene una altura de contenido de abrazo Vamos a conseguir que llene el contenedor, y vamos a darle una oportunidad. Te configuraste para que sea cómodo. Eso todavía no funcionó. ¿Qué estoy haciendo mal? Lo pausas y ves lo que estoy haciendo mal. Oh, es algo. Oh, es el padre de todo. Es este tipo, mira, sus alturas a altura fija. Ah, las alegrías de figma, pero sabemos arreglarlo. No podemos abrirnos camino. ¿Es eso? ¿Es esto? ¿Bien? Bueno, espero que sea esto. Vamos a abrazar contenidos. Y ahora vamos a darle una vuelta. Sip. Lo estamos haciendo. Cómodo y compacto Y todo redimensiona muy bien. Mírennos. Nosotros lo hicimos. Voy a fingir que no estaba perdido, pero estaba totalmente perdido. Cuando comenzamos a combinar muchas cosas diferentes juntas, variables y diseños de pedidos, y luego espaciamientos variables, puede ser un poco abrumador, no te preocupes Esos son los gatos. Están bastante distrayendo. Trabaje su camino a través. ¿Es esto? ¿Es eso? A lo mejor no es eso. Haz muchas pruebas y lo averiguarás y mejorarás en figma. Igual que yo y no perderme. Todo eso es. Hicimos espaciado para variables. Te veré en el siguiente video. 100. Hacer que tus diseños sean accesibles: un complemento de accesibilidad en Figma: Hola a todos. Este video va a ser todo sobre accesibilidad. Básicamente, asegurándonos de que nuestros diseños puedan ser utilizados para personas que tienen mala visión, tal vez daltónicos. Aquí, nos vamos a centrar en un par de áreas clave. Vamos a ver la fuente, el tamaño de la misma, el peso de la misma y el color de la misma. ¿Cuánto contraste hay entre la fuente y el fondo? También veremos los puntos de contacto. ¿Qué tan fácil son los botones para hacer clic? ¿Qué tan lejos están? Todo se reduce a algo llamado accesibilidad. Muy a menudo, son cosas fáciles de implementar, y una vez que hayas hecho algunas de ellas, puedes hacerlas de forma natural medida que estás atravesando y construyendo diseños. vamos a ver ahora, tanto los Figma construidos en unos como algunos enchufes Vamos a uno un poco serpenteante porque no me siento altamente calificado para estar enseñando esta parte, pero lo hago, tenemos que hacerlo Te voy a dar mis conocimientos que hasta ahora tengo y abrirte la idea para que te vayas y busques más. Vamos a saltar. Todo bien. Hay algunas partes que están integradas en Figma y algunas partes para las que usaremos un enchufe Veamos los bits integrados en Figman, miremos los contrastes de color para empezar Escojamos uno fácil y escojamos uno de nuestros títulos. Escojamos este de aquí. Entonces aquí, ¿se puede leer contra el fondo? Sí, voy a decir, podemos verificar, sin embargo, con su seleccionado por aquí, podemos ir a nuestro color, nuestro color completo para el texto, y vamos a cambiar a custom. No vamos a romper la biblioteca, sólo vamos a revisar. ¿ Pasan las relaciones de contraste, esas son estas opciones de aquí Puede activar y desactivar haciendo clic en este botón. Básicamente, estamos buscando una proporción. Básicamente, va a mirar la diferencia entre el primer plano y el En este caso, es el color de la fuente con el fondo, tengo un gris apagado pasando. Éste de aquí pasa. ¿Cómo pasa? Déjame volver a la costumbre, asegúrate de que esté encendido. Lo puedo ver ahí. Tiene una garrapata al lado de la AA. AA es el nivel base predeterminado. Esto se puede incrementar hasta, digamos, el AA, los polluelos más altos. Mirando un contraste realmente alto. Eso pasa también, lo cual es genial. Yo diseñé para este de aquí. Se busca un nivel base de tres a uno. Entonces puedes ver aquí es de seis a uno, muy alto. Si escogí una fuente diferente como esta, es uno a uno o 1.3 a uno. O podrías llegar a algún lado es como si estuviera cerca, todavía lo estás fallando. Lo bueno de ello, sin embargo, es decir que tienes una fuente aquí y es del color equivocado. Puedes hacer click sobre esto. Ya ves que saltará hasta aquí y verá a esta banda. Cualquier cosa abajo aquí es buena. Puedes elegir cualquiera de tus colores que quieras siempre y cuando esté por debajo de esa curva ahí. Realmente depende de sus antecedentes. Vamos a agarrar ese mismo título, muévelo por aquí. Está en la tierra baldía No puede ser oscuro porque los fondos oscuros. Nuevamente, la relación de contraste aquí es de 1.5 a uno, necesita ser de tres a uno o superior. De nuevo, puedo dar click sobre esto. Lo saca a colación. Puedo estar en cualquier parte de esta zona para pasar la prueba. Me encanta cómo los productos han implementado esto. Es súper fácil. Lo devuelves a poner. Echemos un vistazo a algunas otras opciones en torno a las cosas que me preocupan. Me preocupa que esto no vaya a funcionar. He hecho clic en mi botón. Voy a bajar aquí. Voy a ver el trazo. Así que echa un vistazo al trazo y puedes ver aquí, está justo apagado. Entonces no va a funcionar. Voy a hacer clic en esto, bajarlo y encontrar que en realidad está bien. Lo que también podría hacer es en realidad en lugar de ajustar la fuente o el color, podría entrar aquí y realmente elegir, tengo algunos colores de biblioteca. Miembro, hicimos 500. Bien 500 trabajo. Vamos a tener un cheque. Personalizado. Si no aparece, a veces es necesario hacer clic en lo correcto. Voy a dar click sobre mi trazo aquí, luego ir a custom. Pasé allí a los colores seleccionados. Esta vez fui al trazo real y pasa. Impresionante. Solo voy a usar el 500 en lugar de cualquier color aleatorio que estaba usando allí. Lo mismo con esto, no va a pasar. En lugar de solo usar esta pequeña opción aquí, voy a decir, en voy a decir, realidad voy a ir a mis bibliotecas y voy a usar las 500 y deberíamos estar bajo Phil debería estar, asegúrate de que esté encendido. No estamos pasando A. ¿Por qué no pasa, a pesar de que lo fue el derrame cerebral? Así es como nos vemos. Vayamos a la costumbre. Lo que va a hacer es que voy a darle a estas pequeñas opciones aquí. Me está demostrando que esto es sólo un texto normal. A este tamaño y a este peso, no está pasando. El texto normal es diferente de los textos grandes. Hicimos esto antes, elegimos el mismo color, pero como es texto grande, está bien. Cuando llega al texto normal, o al texto pequeño, que es 16, lo sabe. Va, la relación de contraste en realidad tiene que ser mayor. Se mira. Dice que tiene que ser, ¿qué tiene que ser? Solo, necesita ser de 4.5 a uno. A veces puedes sortearlo usando una fuente ponderada más pesada. No podemos hacer eso porque ya estamos en el atrevido. Para darle a mi marca AA, voy a cambiarlo a los 700 de mi green. Ahí vamos. Ojalá ahora como texto normal, ahí tienes. Es perfecto. Echemos un vistazo a algunas otras opciones. Echa un vistazo a algunos malos. Tengo esto como un proyecto que hice antes, y lo que encontrarás es, digamos que este texto de aquí, ¿qué es esto? Esto es 18, y esto es 14. Hay algunas reglas básicas cuando se trata de texto y ¿De dónde vienen las reglas? Es este sitio feo. Es del sitio w3.org, y se llama WCAG Por el momento 2.2 es el actual. Están redactando el tercero. Echa un vistazo cuando llegues a él. Lo que hago cuando necesito encontrar esta página porque es muy difícil de encontrar es solo escribir WIAG y poner en referencia rápida y llegará a lo que sea que sea la última Entonces puedes entrar en un poco más de detalle. Lo que termino haciendo cuando vengo a estos sitios es que estoy como, tan abrumador. Si voy a contrastar y solo busco abajo de la página, puedes ver aquí puedes ir a mostrar descripción completa. Se puede decir que un texto grande debe ser 3.1, y tipos de logotipo. Mira esto. No necesita ningún requisito de colocandra Logos obtienen una exención, texto incidental. Esto serían cosas así que te voy a mostrar algún texto incidental ¿Tenemos algún texto incidental? Ese texto ahí, texto incidental. Es sólo un gráfico. No se usa para leer. Es sólo un tipo visual de, es un gráfico. Es incidental. ¿ Algún otro texto incidental? La vida de Pug sería un texto incidental. Los otros que GD serían incidentales. Echemos un vistazo a esto. Esto podría ser interesante. Entonces es contra un trasfondo bastante mixto. Entonces, ¿se enloquece o funciona? Es realmente grande. Creo que funciona. Echemos un vistazo, llene personalizado. Debido a que tiene un fondo de imagen, no va a funcionar. Entonces, lo que podrías hacer es probar uno de los colores principales, y entonces lo que hago eres tú, dejar caer en los ojos una herramienta, agarrarte y probarla de esta manera. Entonces deberíamos poder obtener una mejor lectura sobre si se trata de pases, totalmente bien. Tengo que usar mi no sé, cerebro para eso y creo que va a pasar. Perfecto. Así que echa un vistazo a este botón de aquí abajo. Rick, y no va a pasar. Echemos un vistazo. Esto en el contexto no va a funcionar. Lo odia, 2.8. El problema aquí es que puedes ver aquí, lo quiere aquí abajo. Yo quería estar oscuro. Yo soy como, no, quería ser ligero. Si quieres que eso suceda, entonces tienes que ir a jugar con un fondo por separado y decir, en realidad, voy a usar mi color de 700 para eso. Ahora voy a revisar el texto y ver si funciona. Creo que ya pasamos. Oh, mira ese pequeño hueco ahí. Esa es la pequeña área diminuta con la que puedes jugar, y funciona. Entonces, cuando se trata de contraste, es diferente cuando se trata un gráfico versus un texto. La relación de contraste debe ser mayor. Echemos un vistazo a un plug in porque las cosas integradas en Figma son buenas Pero echemos un vistazo a éste. Entonces hay un par de complementos geniales. Si vas a tus acciones, vas a plugins, y tecleas accesibilidad, hay tantos. Los que más uso son estos dos cruzados y contrastantes. Usemos este porque es bastante atractivo visualmente. Sencillo es lo que quise decir. En esta página, voy a decir escanearlo y va a escanear esa selección. Va a decir que muchos de ellos han fallado. ¿Puedes ver esta fila aquí es AA y esta es AA? Depende de si estás diseñando para AA o AA. Esto se bajará a AAs muy raramente trabajo para una empresa que acuda a mí y me diga, van a decir en términos ondulados de mano que queremos que sea accesible, pero no van a tener ninguna regla Más agencias con base en el gobierno en las que he trabajado, dirán que necesitas golpear el estándar AA, totalmente genial y nadie lo verifica nunca. Es una zona divertida de accesibilidad. Deberías estar haciéndolo como parte de tu diseño de experiencia de usuario. Deberías estar al tanto de ello. A veces tendrás que pegarle. Donde se vuelve un poco más complicado o tienes que hacerlo es cuando estás haciendo sitios web, especialmente sitios web móviles. rankings de búsqueda de Google clasificarán los sitios no solo en, como, ¿es este un sitio relevante, sino que es accesible, bien? Y puede pasar y verificar. Bien, estaré comprobando una calificación AA, y obviamente, una AA será mejor que una calificación AA, pero AA es bastante restrictiva en términos de qué colores puedes usar. Tienes que mirar a tu público, para quién es. Aquí para mi guía de Gig, A va a funcionar. Mira este texto aquí. Entonces este texto de aquí, ¿falló, texto de muestra? ¿Dónde está? En realidad, solo puedes seleccionar algo y decir, escanear selección. No se encontraron zapatos. Genial. Vamos AA. Selección de escaneo. No se encontraron zapatos. Está bien. Lo que encontrarás es una de las reglas que uso y que aparece en el sitio W tres es que el texto normal se considera estos dos. Si es negrita, el texto normal que pasa toda la accesibilidad es 14 pero negrita. Normal, sin embargo, si vas a usar texto no en negrita, como regular o ligero tiene que ser 18. Estos dos son iguales en cuanto a sus tamaños. Estos dos son iguales en cuanto a su accesibilidad. Este de aquí es más pequeño, pero es audaz. Este de aquí es más grande y no audaz y tiene un contraste muy alto. Es negro sobre este gris. Este es un video un poco serpenteante. Lo que quiero que hagas es no tomar ninguna de las cosas que te he dado como evangelio. Quiero que te vayas y lo explores tú mismo. Te toparás con las cosas y serás Dan dijo, no soy un experto en accesibilidad, pero cuando se trata de diseño de experiencia de usuario, necesitas tener algunas habilidades básicas. Lo básico son el contraste de color y los tamaños de fuente. Échale un vistazo a este de aquí. Vamos a escanear esa selección. Esto falló. ¿Por qué está fallando? Estamos en AA. Veamos A, escanearla. Aún así ha fallado. Lo curioso es que si paso y digo, en realidad, tienes 16 puntos, eres del color equivocado. Repasemos y escojamos la versión 700 de esto. Escanearla, va a pasar. Hay algunas cosas simples que puedes hacer para pasar y hacer pequeños retoques y conseguir que las cosas pasen Echemos un vistazo a otra app que me gusta. Está atascado. Puedes iniciar sesión sin registrarte en este aquí. Echemos un vistazo al contraste. Veamos éste. Este le falló al AA, pero pasa el AA, que es perfecto. Puedes ver aquí este aunque es texto grande. No vamos a basar está fallando la A, pero esto es texto grande, cualquier cosa por encima de 18, y puedes ver aquí que está pasando la prueba A. Realmente se reduce a lo grande que es el texto, cuál es el peso del texto y cómo funciona el contraste de color con un fondo. Lo que debes tener en cuenta cuando estás lidiando con la accesibilidad son los puntos de contacto Ese es este botón de aquí. Vamos a previsualizarlo. Y esto aquí para ser click a bull necesita estar en Android, necesita ser de 48 pixeles y en Apple, como un iPhone necesita ser 44. Si hago click off aquí, tengo este botón. Se puede ver que el área táctil es bastante pequeña. No quiero aumentar el tamaño del corazón. Lo que puedes hacer es que puedes ver aquí es lo que 32 pixeles. Eso es lo que te dije que los hicieras antes. Lo que vamos a hacer es ir a buscar ese original. Voy a volver a mi componente principal. Puedes ver aquí es de 32 por 31. Lo que también notarás es que tengo este vector, que es el corazón, que está dentro de este padre. Lo que puedo hacer es simplemente hacer que el marco padre sea un poco más grande, dejando el corazón dentro de él, el tamaño más pequeño, el tamaño que quiero que sea. Con este padre seleccionado, puedo decir, en realidad, me gustaría que ustedes, las dimensiones sean 48 por 48. Es más grande. Voy a decir A out para que pueda pegarlo justo en medio del padre. Lo convertí en un Lou, solo está envuelto alrededor de él otra vez. Voy a decir, asegúrate de que tengo seleccionado el marco exterior, voy a conseguir un 48 por 48. Se puede ver aquí. Ahora tengo este punto de contacto que es mucho más grande, pero el corazón sigue siendo del tamaño adecuado. Cuando estés haciendo tus íconos antes, asegúrate de que si es VOS, es de al menos 44 por 44 píxeles y en Android, es de 48 por 48. La otra cosa a tener en cuenta que los puntos de contacto necesitan estar al menos a 16 puntos de distancia tanto en Mac como en Apple y Android. Si bien la gente no se dará cuenta, especialmente cuando se trata de, digamos, un sitio web móvil, Google, que posee Android, clasifican sitios en función no sólo de lo que es el contenido, sino de lo accesibles que son también. Si tienes iconos realmente pequeños que están muy juntos y difíciles de hacer clic, es menos probable que muestren un resultado de búsqueda con tu sitio web en él porque son menos accesibles. Para tenerlo en cuenta también. Fuentes, contraste, puntos de contacto. Ese es solo uno de los principales cuando se trata del lado Figma del diseño Hay muchas otras consideraciones para accesibilidad fuera del alcance de aquí, cosas como l ticks para imágenes, daltonismo, hay navegación con un teclado para personas con discapacidad visual, lectores de pantalla, ese tipo de cosas Hay más de lo que hemos cubierto aquí, pero esas son las partes principales de la misma. Asegúrate de que tus colores tengan un buen contraste, asegúrate de que tus tamaños de fuente sean lo suficientemente grandes y del color correcto y asegúrate de que tus puntos de contacto sean lo suficientemente grandes y lo suficientemente lejanos. Muy bien, esa es mi pequeña renta sobre accesibilidad. Hay más que eso. No me sujete a nada. Una de las nuevas características geniales de Figma es que tiene parte de la accesibilidad incorporada. Si lo enciendes, solo recuerda presionar personalizado, incluso si estás usando un elemento de la biblioteca, solo para verificarlo. Todo bien. Eso es. Te veré en el siguiente video. 101. Cómo usar el modo DEV en Figma: Hola a todos. Vamos a ver algo llamado Modo DEV dentro de Figma. Es una forma en que tu desarrollador puede interactuar con tus archivos, empezar a sacar dimensiones, archivos, empezar a sacar colores e iconos su cuenta para que no tengas que enviarles cada elemento individual. Pueden explorar el documento, obtener lo que necesitan y comenzar a construir su después de que lo haya diseñado. Bien, vamos a saltar. Todo bien. Para empezar a trabajar en DevMo tú como diseñador puedes trabajar en Modo DEV el desarrollador puede obtener sus propias cuentas de pago es solo una versión pro, pero el desarrollador puede obtener una versión más económica para trabajar con tus archivos Así que aquí está mi asiento completo, pero un DV es un poco más barato y no pueden hacer todas las cosas de diseño completo, pero pueden hacer bastante. Si eres un poco de ambos, un poco diseñador y un poco desarrollador, es posible que solo puedas vivir en el asiento DV. Esto cambia en lo que tienes acceso, pero a menudo los desarrolladores pueden hacer mucho trabajo de diseño. O digamos que trae tu desarrollador de portátiles, Malcolm, solo tiene un DV ¿ significa? Entonces significa un diseñador. Digamos que estoy trabajando en el archivo de registro, página, y estoy listo para el desarrollador. Puede que ya lo hayas visto. Ahí está esta opción. Tú, Dan, el diseñador. Puedo decir, Esto está listo para el desarrollador. Va a decir un par de cosas. Dice: Oye, no has cambiado el nombre de un montón de archivos Podría ir y hacer eso. No voy a hacerlo por el momento. Digamos que voy a compartirlo. Voy a hacer clic en esto de nuevo y decir, vamos a copiar este enlace y enviárselo por correo electrónico , hollarlo a ellos. Quienquiera que sea, envíe el enlace. Lo que termina pasando es que entran en ella bajo esta modalidad. Se veía mayormente igual, lo que puede resultar un poco confuso. Entran en Modo DEV. Lo bueno de ello, sin embargo, es que el Modo DEV les da la información que necesitan. Además, si están alejados, pueden ver las cosas en las que deberían estar trabajando Por aquí en el panel Capas, solo les está dando que están listos para el desarrollo. Pueden sellarlo y hacer clic en él y trabajar en él y verlo. Pero ellos pueden ver fácilmente, mira, esto es en lo que pretendía estar trabajando. Podrías copiarlo y pegarlo en otro documento, eso también está totalmente bien porque esto podría ser un poco abrumador para alguien. Yo podría hacer eso. Pero tú las cosas chulas que consiguen es, digamos que han trabajado en ello por un tiempo. Ellos han visto el archivo original, has hecho algunos cambios, y ellos se meten en esto. Algunas de las ventajas para Dvmode es que pueden entrar en esto y decir, no era esto diferente antes o me lo han dicho Ahora soy el desarrollador. Dan me envió este correo diciendo, he hecho todos los cambios y estás como, ni siquiera recuerdo este documento. Se pueden ir comparando a varias versiones. Tengo que hacer el cambio primero. Entonces digamos Dan el diseñador va, Bien, he cambiado algunas cosas, hecho mi accesibilidad, y ahora tiene que ser esto voy a elegir este color oscuro, y esta va a ser una fuente diferente. Cambiemos la fuente. He hecho mis cambios. Ahora Malcolm, como nuestro desarrollador entra aquí y va, Bien . Hace tiempo que no veo esto. ¿Qué carajo ha cambiado? decir comparar con versiones anteriores. ¿Puedes ver? Esa es la versión antigua. Esta es la nueva versión. empezar a ver cuáles son los cambios. Podrían decidir uno al lado del otro, superposición puede ser útil. puede ver que también estaba jugando con un diseño, para que puedan ver el cambio fácilmente”. s cerrarlo hacia abajo. Esa es una de las recompensas. La otra ventaja es que cuando están en modo desarrollador es cuando hacen clic en las cosas, obtienen las cosas que quieren Sabemos en vista de diseño que algunas de las cosas que he hecho son audi louts dentro de marcos dentro de componentes principales, no les importa Digamos que el desarrollador quiere pasar por ahora y solo calcular los tamaños y el espaciado que has usado, simplemente pueden hacer clic en él y decir, ahí está la fuente. Ahí está la fuente. Es Roboto condensado y podría simplemente agarrar el CSS de esto, o podrían estar usando IOS y pueden usar SiFuI, tal vez sea Pueden obtener el código que quieran. También pueden decidir que si están usando CSS, mejor no están usando píxeles, están usando llantas. Sólo una medida diferente Bien, totalmente bien. 1:00 A.M. En lugar de 16 píxeles. Lo mismo, pero les da un poco de control sobre cómo sacan cosas de aquí. Se puede ver ahí están los colores. Pueden entrar en algunos de estos, así puedo entrar en cualquier cosa, lo he marcado para Dev, pero pueden ir a donde quieran. Pueden entrar aquí y simplemente sacar el texto de eso. A menudo, eso es algo que solía hacer. Solía tener que revisar y enviar por correo electrónico el texto por separado porque estaba en un documento de diseño el que el desarrollador se negó a entrar. Ahora pueden entrar en él, agarrar las cosas que quieran. Lo que realmente me gusta es decir esto de aquí. Yo hice esto. Era un miembro de Auto Layout. Lo hicimos juntos. Es un Auto Layout. Tiene todo tipo de cosas que lo hacen receptivo. Bien lo que les pasa sin embargo, fue todo ese trabajo que hicimos, ellos pueden ver. Como desarrollador, soy un desarrollador realmente malo. Puedo copiar y pegar cosas. Sé lo que estoy haciendo con algún código de front-end. Los llamamos Autolayout dentro de Figma porque Pero para un desarrollador, se llama Flexbox y me está dando las cosas que necesito para que esta cosa sea receptiva, así no tengo que intentar recrear Puedes ver por aquí todo el relleno, todos los bordes, todos los diferentes estilos. La otra cosa genial son todos los colores, mira, algunos de los activos que hay aquí, ¿ves que tengo tres estrellas? Pueden pasar y decir, en realidad, quiero que descargues todos estos íconos, y los voy a meter ahí. Porque ahora los veo aquí, están en mi computadora. El desarrollador cuenta con estos SVG, estos gráficos vectoriales escalables, listos para ir a trabajar dentro de sus diseños Hace las cosas realmente fáciles. Las variables que hicimos antes, ¿ves? No tengo nada seleccionado. Pueden abrir la tabla de variables y ver qué hemos hecho para que nuestro modo luz y modo oscuro funcionen. Las otras cosas bonitas es, digamos que aquí tenemos este documento. Pueden subir aquí y decir código abierto y VS. Eso sería más que probable el terminal, lo cody que usan para escribir el código, algo así como código VS Lo que pueden hacer es que podrías haber pasado mucho tiempo teniendo diferentes variantes, no variables. A lo mejor lo hicimos por nuestro logo. Teníamos modo luz y un modo oscuro. Bien, lo sé en vista de diseño, tengo este pequeño interruptor de palanca que hice. Lo que pueden hacer como desarrolladores, pueden entrar en cualquier cosa y pueden ver que vamos a dar click en el logo aquí. Se puede ver el acceso squa a las capas. Puedo dar click en el logo. Puedo explorar el comportamiento que he hecho. En este caso, solo un simple encendido apagado, para modo luz y modo oscuro. Una mirada a otro proyecto en el que trabajé este de aquí. Tengo en vista Diseño creado este madrugador de vez en cuando y lo hice horizontal, fue muy complicado. Me tomó años, pero quiero que el desarrollador pueda experimentar con esto en lugar solo ver un sitio web estático, en lugar de solo ver una interfaz de usuario estática. Pueden en modo Div, si lo comparto con ellos, pueden pasar y explorar el comportamiento e ir, veo lo que han hecho aquí. Ellos pueden ir y recrearlo en lugar de que intentes documentar tres versiones diferentes para todo, pueden pasar y experimentar con ellas. Bueno. El desarrollador también tiene acceso a muchos enchufes diferentes, separados de los de diseño, en esta pestaña aquí. Así que podrías pasar un poco de tiempo poniendo al día a tu desarrollador. Muchos desarrolladores harán este curso en particular solo para que estén mejor trabajando con diseñadores, aunque no estén seguros hacer el diseño ellos mismos. Bienvenidos al curso. Pero podrías enviarles solo un pozo rápido, recorrerlos cómo pueden trabajar contigo en el lado del desarrollador en lugar de simplemente enviarles JPEG y esperar que puedan recrear cosas, requiere un poco de trabajo de su lado para ponerse al día, pero les resultará lo suficientemente útil como para molestarse en hacerlo porque nos puede ahorrar mucho tiempo en lugar de tratar de enviar imágenes, lo pueden agarrar una carga. Aunque sea solo por eso, se acostumbrarán y comenzarán a explorar. Descubrirán que están usando stretch para llenar la caja. Cosas así se volverán útiles para ellos y explorarán Figma un poco más y harán que tanto sus trabajos como esta entrega sean realmente fáciles. En lugar de crear un documento de traspaso de desarrollador separado , puede simplemente entregar los archivos. Eso es DevMDE Se paga solamente. Es súper útil. Es esta pequeña opción aquí. Se puede comercializar para Dev. No tienes que hacerlo. Pueden explorar los archivos. Todavía es muy común crear tal vez una nueva página que diga listo para Dev y solo poner ahí los bits que quieras. Obviamente, eso puede ser un poco abrumador. Eso es DevMDE en Figma. Te veré en el siguiente video. 102. Cómo documentar un componente en un sistema de diseño en Figma: Hola a todos. En este video, vamos a ver una especificación de diseño, que es diferente a un sistema de diseño. Te explicaré qué son los dos. Crearemos nuestras propias especificaciones de diseño, donde comenzaremos a agregar medidas y comenzaremos a desglosar la anatomía de algunos de los elementos que hicimos. Aquí, vamos a usar algunos complementos dulces para ayudarnos a llegar rápidamente a esta posición. Es más una forma visual de expresar lo que has hecho y cómo se debe usar en lugar de simplemente cambiar a Dvmode y dejar que otras personas, colegas, desarrolladores lo descubran por sí mismos Vamos a saltar. Bien, para empezar, he creado una nueva página y solo la llamo especificaciones de diseño. Hay dos niveles para entregar tus documentos. Tienes especificaciones de diseño y tienes un sistema de diseño. Una especificación de diseño es lo que viste al principio. Un sistema de diseño está fuera del alcance de este curso y para empresas muy grandes donde hay cientos de diseñadores y desarrolladores y todos necesitan trabajar desde una fuente central y gente nueva necesita ponerse al día y enseñarse a sí mismos. Ahí es cuando te apagas y creas un sistema. Digamos, Shopify tener esto. Ellos han llamado a esto. Se llama Polaris. Trabajan en esto. Tiene su propio sitio web y puedes llegar a un acuerdo con cómo están pensando sobre todos los diferentes íconos, cómo los usan, qué hacer y qué no hacer. Lo que encontrarás es que algunos de los nombres son bastante consistentes. ¿Ves? Componente. Sé lo que son los componentes. ¿Qué tipo de componente necesito? Quiero mirar a un grupo, y puedes averiguar cómo les va con él. No hay reglas establecidas sobre cómo debería ser. A menudo están orientados a desarrolladores. Hay mucho código, dependiendo de cómo se construya su sitio web, pero habrá lo que se debe y no se debe hacer, las mejores prácticas Echemos un vistazo a un par de unos. Microsoft usa fluidez, para sus sistemas de diseño, puede pasar por. Muchas veces terminas teniendo que usar la opción de búsqueda. Digamos que quiero ver cómo manejan las cartas, y ahí está su tarjeta. Sí, te da mucha documentación al respecto. Asiático. Tienen su propio sistema de diseño con nombre propio, llámalo Lasian Veamos uno de Adobe. Ellos llaman al espectro. Entonces, si necesitaba una tarjeta de ellos, echemos un vistazo. ¿Qué tenemos? Tarjeta. Todos funcionan ligeramente diferentes. Ahí vas. Puede descargar el archivo Adobe XD, que es un bit redundante de software en este momento En ocasiones también tendrán archivos Figma que puedes descargar Base es lo que usa Uber. Bien, así puedo entrar en sus componentes y averiguar cómo están usando el. Qué estamos haciendo Mensajería. Te voy a dar un ejemplo de ello, las especificaciones en términos, no todas te dan los dígitos reales. Haremos esto en este video, pero algunos de ellos solo te darán el código para ello y puedes cavar a través de eso para averiguar qué es. Algunos de ellos están etiquetados con más claridad. Bien, y Google usa material y Apple para IOS. Si estás haciendo apps, usan esta interfaz humana, es el nombre de la suya. Puedes pasar y averiguar, bien, ¿cómo están haciendo el diseño y cómo se acercan a él? Mucha documentación. Hay un ir súper pesado. No va pesado, pero hay que no puedes estropearlo si lo lees todo. Entonces vamos a hacer el tipo de versión ligera, que se llama especificación de diseño. Digamos que necesito entregarle esta tarjeta a mi desarrollador o simplemente la necesito documentada para que todos sepan lo que he hecho, lo que estamos haciendo. He creado una nueva página llamada Especificaciones de diseño. Acabo de copiar y pegar este elemento, ok esta tarjeta de nuestro diseño principal. Lo primero que probablemente tengas que hacer es asegurarte de etiquetarlo. Entonces voy a ir a esto y solo darle una oportunidad a la IA para nombrarlo porque hay muchos marcos solo No. Ninguno de estos necesita ser nombrado. Voy a tener que pasar por ahora y decir que esta es mi tarjeta de decir para los trabajos, y trabajar mi camino a través de nombrar las cosas. Una vez que hayas hecho eso, hay un par de complementos geniales. Empecemos con mi favorito. Cambiaron el nombre de esto. Cada vez que rehago una actualización para este curso, van a ir a Diseño y widgets Esto solía llamarse ocho formas. Ahora se llama especificaciones. Diseño Doc. Le cambiaron el nombre espectral, y luego lo cambiaron de nuevo a design doc Echa un vistazo. Ni siquiera importa si estás usando este en particular. Echa un vistazo, digamos, especificaciones de diseño y solo pasa por y las califico en función de lo que he usado antes, obviamente, pero también cuántos de ellos se han descargado, ¿cuántos usuarios? Solo hay unos pocos usuarios y algunos me gusta, tal vez no se usa muy a menudo. Quieres encontrar uno que esté siendo utilizado por mucha gente. Miren, 38 mil personas. Usemos Design Doc, mi favorito. Utilizamos la medida desde el principio. Y esto es simplemente práctico. Si lo tienes seleccionado, puedes hacer clic en medir y simplemente pasa y te da todas las medidas. Hay un par de cosas como 15 no deberían estar ahí. Cuando estoy haciendo estas cosas, a menudo, tendré que pasar por ellas y ajustarlas para asegurarme de que todas sean perfectas también. Voy a tener que deshacer eso, pasar por esto, averiguar qué espacio es ese, y cambiarlo de 15 porque debería ser 16. No estoy seguro de cómo llegó a 15. Lo bueno del diseño Doc es que también hay una opción llamada spec. Este de aquí, vamos a echar un vistazo. Ya ves que tengo la cuenta gratuita para ello en este momento. Voy a ir a especificaciones de diseño. Lo que va a hacer, va a hacer un gran desastre. Tienes que asegurarte de que hay suficiente espacio para que esta cosa crezca y puedas empezar a ver, es lo mismo, pero con mucho más detalle. Esta puede ser una muy buena manera de lucir un profesional, pero también ser muy claro. Se puede ver que se rompe en todas las diferentes opciones. Así que la imagen de portada es su propia barra pequeña aquí, se puede ver que está mostrando no sólo el espaciado, sino que está llena de y una altura fija? Eso puede ser muy útil para el desarrollador sepa si estás documentando. A menudo, sin embargo, puedes simplemente darles el archivo Figma y para que usen el modo de desarrollo como lo hicimos antes Este tipo de documentación es realmente genial cuando estás trabajando digamos como freelancer y te han pedido encargo de hacer algo y quieres algo realmente te devuelva lugar de simplemente como aquí hay en lugar de simplemente como aquí hay un archivo, muchos detalles aquí. Puedes cambiar el nombre de todo esto. Lo que vas a encontrar es, ya ves que se crea esta enorme básicamente se crea el documento Figma. Para ti con todos estos, puedes pasar empezar a renombrarlos, cambiar de color Aquí también, creo que hay opciones para averiguar y cambiar cosas como qué es el relleno, cuáles son los colores ¿Qué quieres que se incluya? ¿Necesitamos los colores? ¿Necesitamos que se apliquen los efectos? ¿O queremos que sea más sencillo? Realmente práctico. En este caso, tenemos espaciado y anatomía, lo que me está dando cosas como fuentes en lugar de solo el espacio. Todo anotado maravillosamente. A mí me encanta. El otro llamado spec funciona de manera muy similar, así que te voy a agarrar, duplicarlo, ir a esos mismos plugins y widgets exactos . Voy a encontrar especificaciones. Esto funciona de manera muy similar. Dale un segundo. Voy a crear una rama de marcos con toda la documentación aquí. Echa un vistazo para ver cuál te acerca a donde necesitas estar. Estos cambian con el tiempo, y encontrarás que algunos de ellos tienen algunos ajustes gratuitos, otros no, y lo que terminarás haciendo es pasar un poco de tiempo arreglando todo A veces no tienen los nombres correctos y has usado el tamaño y las cosas equivocadas. Hay dos niveles. Hay una especificación de diseño, que básicamente es solo una página dentro de Figma. Aquí tienes. Aquí está lo que he hecho y está documentado. Entonces puedes pasar a un sistema de diseño. Nunca he trabajado en una empresa en la que de hecho haya tenido que producir un sistema de diseño, para ser honesto. Trabajo con pymes así que todo son pequeñas empresas y nada ha necesitado un sistema de diseño Entiendo como funcionan y yo he trabajado de ellos, tú sacando detalle de ellos. Lo que termino haciendo es usar el sistema de diseño tener una idea de cómo debería estar documentando. ¿Bien? ¿Qué de aquí sería útil para mi equipo? Probablemente un archivo Figma de descarga. ¿Necesito estar copiando el CSS, y JavaScript? ¿Cómo funciona y reacciona esto? Tendrás que decidir qué es lo que necesitas entregar. Pero el solo uso de algunos de esos complementos puede llevarte mucho del camino, al menos darte una idea de lo que deberías estar entregando si no lo has hecho antes Recuerda que esto no es compartir algo para que luzca elegante, está destinado a ser útil. Si tienes cosas aquí que ya sabes, simplemente deshazte de la gente. Dirección vertical, ¿ eso necesita estar ahí? Puedo pasar y puedo empezar editar esta lista y decir, en realidad, no necesito eso. Vamos a guardarlo a las cosas que quiero que sean importantes. De lo contrario, la basura aquí por el bien de los basureros no va a ayudar a nadie Luce elegante, sin embargo. Todo bien volver a tapar, a veces solo entregas un documento, dices, ¿verdad, dónde está? Éste de aquí? Vamos a mis archivos. Solo dices: Acercar , marcar para Dev, y eso podría ser todo lo que necesitas, y comparte ahí el enlace que está vinculado a ese archivo. Se puede decir, quiero copiar el enlace del Modo DEV, y eso es lo que voy a enviar a mi desarrollador. Podría ser que hagas especificaciones de diseño, que es más como esto. Bien, solo que aparece en la lista. Las cosas, el relleno, los márgenes. Podrías agregar algunas anotaciones aquí sobre no usar estas imágenes Esto es para esto solo para tener muy claro lo que esperas que entre ahí y lo que no haces entonces el siguiente nivel arriba de eso es un sistema de diseño. ¿Bien? Y entonces podrías encontrar una plantilla dentro de la comunidad para empezar. Tuve que mirar algunas que forman parte de Figma, y aquí había un montón de plantillas para sistemas de diseño. Todos son diferentes. Tienes que decidir qué sabor funciona para ti. No hay reglas específicas codificadas sobre cómo deberían funcionar estos sistemas de diseño. Deberían ser útiles. Eso es lo que deberían ser. Derecha. Eso es una especificación de diseño y un sistema de diseño dentro de un Figma y algunos complementos dulces Bien. Eso es. Te veré en el siguiente video. 103. Proyecto de clase 21: especificación de diseño: Hola a todos. Es tiempo de proyecto de clase. Quiero que hagas tu propia especificación de diseño para uno de los elementos de tu diseño, encuentres cualquier cosa, algo con un poco de interés. ¿Bien? Póngalo en su propia página. Quiero asegurarme de que todas las capas se nombran muy bien. Quiero que vayas y agregues la anatomía y las medidas. ¿Bien? Para que puedas usar el plugin. Pero quiero que revises y solo revises de nuevo todo. Quiero que experimentes el espaciamiento no es correcto. Eso no tiene sentido. A lo mejor debería cambiar eso. No solo golpees Exporta el enchufe y solo envíalo, lo revises, asegúrate de que todo esté bien llamado, asegúrate de que todo esté ahí que sea importante, y averigua cómo funcionan. Una cosa que quizás tengas que hacer es que tengas que pasar dependiendo del enchufe, algunos de ellos pueden estar bloqueados, lo que puede ser un poco complicado. No lo mencioné en el último video, pero se puede ver aquí este contenedor aquí para todas mis medidas llegó a través en capas bloqueadas. Tendría que seleccionar todos estos y figurar sólo hazlo a los padres un turno de mando? Es para desbloquearlo. Necesito que todos ustedes estén desbloqueados si necesito hacer algunos cambios. Ve a través de desbloquear las capas, hacer las paces como las necesites, asegúrate de que todo esté bien etiquetado, y pasa por el espaciado y la anatomía, asegurándote de que necesito la descripción para tener textos escritos ahí Probablemente no. Así que solo átalo antes de tomar una captura de pantalla y luego subirlo a la sección de tareas. También compártelo en redes sociales también. Siempre se ve elegante cuando has hecho una especificación de diseño. Para ti, tal vez, hace por mi, yo soy como, soy un diseñador UX mírame con mis especificaciones de diseño. Entonces hazlo y te voy a ver el siguiente video. 104. Cómo ver el duplicado del historial de versiones y restaurarlo en Figma: Uno. En este video, vamos a ver el historial de versiones. Básicamente Figma está guardando todo lo que has hecho automáticamente También puedes hacerlo de forma manual. Vamos a sumergirnos y ver el historial de versiones dentro de Figma. Para encontrar tu historial de versiones, está sucediendo automáticamente, lo cual es agradable. Si vas al nombre por aquí, hay un menú desplegable. Se puede mostrar el historial de versiones. También puedes ir a la F e ir a Archivo e ir a mostrar Historial de Versiones. Y hay muchas maneras de llegar a ello. Lo que termina pasando es que esto se abre del lado derecho aquí. Te muestra todas las versiones del documento. Si estás en un plan gratuito, ellos desaparecen después de 30 días. Si estás en un plan pago, asegúrate de que no esté en borradores, sino en un proyecto real, lo grabará para siempre Lo haré automáticamente, lo cual es genial. Puedes regresar y decir, r agarra a uno de los mayores. Ver, los que tienen fechas son guardados automáticos. Lo hace cada media hora. Básicamente, lo hace cada vez que haces pausa sabe que has hecho un lote de trabajo y no has trabajado en él por un tiempo. Se lo guarda para ti. Se lo puede volver a enrollar a éste. Ves un clic derecho en él y dices restaurar a esta versión. Lo genial es que puedes copiar el enlace a esto. Digamos que hemos hecho algunas modificaciones, los clientes regresan. Nosotros hemos hecho los cambios y nadie está seguro de qué cambios se hicieron o son como, ¿ Fue así como era antes? De hecho puedes ir a esto y decir, copiar este enlace y ellos obtendrán un enlace a esa versión, como una versión anterior de este documento. Lo salva para siempre. Es increíble. Para lo que lo uso mucho es, digamos que estoy haciendo cambios o que hago mucho por este curso. Cuando estoy a punto de iniciar un video, lo que hago es guardar una versión del mismo, poder ir al Historial de versiones. Yo puedo salvarla. Yo haré el video de inicio. Uh, uno oh uno, para que si estropeo mi grabación mientras estoy grabando, no tenga que presionar deshacer, deshacer, deshacer. Sólo puedo restaurar esta versión. No estoy seguro de lo que estoy escribiendo ahí. Escribirlo ahí. Puedo guardarlo, y ahora está en mi historial de versiones. Si paso por ahora lo estropeo todo esto todo . Oh, la gran cosa. Voy a fingir que lo hice a propósito con el historial de versiones es que estoy como, voy a borrar esto. No puedo borrar nada ni hacer nada. ¿Puedes ver las barras de herramientas re limitadas? Es porque no he cerrado mi historial de versiones. De veras quiero que cierres esto por ting esta pequeña cruz, entonces todo vuelve a la vida, y yo bien, me deshice de ti por accidente y tú y eso se movieron, y ahora puedo ir a mi historial de versiones Puedo decir que muestran el historial de versiones, y lo puedo hacer retroceder hasta aquí. Puedo decir restaurar esta versión. Solo tienes que acordarte cerrar esto una vez que esté hecho. Todo bien. Si lo restauras , lo cierra automáticamente. Pero me quedo atascado en el historial de versiones no pudiendo hacer nada todo el tiempo. Lo uso bastante cuando un cliente regresa con un mens. Haré un historial de versiones guardadas antes hacer los cambios por si acaso necesito un retroceso. Como hacer un guardado como cuando estás usando otros archivos y documentos y software. Otra cosa útil es que si estás en un plan especial, yo estoy en el plan profesional. Es posible que estés usando la cuenta gratuita. Tienes que estar ya sea en organización o plan empresarial. Estás pagando más por ello y obtienes funciones adicionales como esta, obtienes el registro de cambios, para que como administrador, puedas pasar y ver quién trabajó en el archivo, qué cambiaron, cuándo y hacer un seguimiento de todo. Es un poco grande hermandad, pero puedes estar atento a los archivos para decir, ¿quién destrozó esto o quién hizo esto? ¿Cuándo se hizo esto? Puedes pasar por ese registro para tus diferentes archivos, ver quién ha hecho las cosas, pero tienes que estar en esos planes especiales de organización o empresa. Eso es. Eso es guardar tu historia y recargar de tu historia Sólo recuerda golpear la pequeña cruz cuando termines. De lo contrario se atasca en el limbo. Eso es. Te veré en el siguiente video. 105. Cómo usar la herramienta de corte en Figma: Muy bien, todos, y vamos a ver la herramienta de corte. Puede dibujar cosas alrededor y exportar límites específicos en lugar de marcos específicos. Es una herramienta de corte. Muéstralo aquí porque ocupa un atajo realmente importante. No estoy seguro de por qué, pero sí. Averiguemos qué hace y para quién va a ser útil. Todo bien. Empecemos. Tiene un atajo súper fácil, la tecla S. Creo que eso se desperdicia en la herramienta de corte. Dibujas cajas alrededor de cosas que quieres exportar. Es bueno para, digamos, esta larga página de aquí. Si quiero exportar todo el marco, puedo bajar aquí y decir que quiero exportar todo esto. Pero voy a conseguir toda la parte. Lo que quiero hacer es agarrar la rebanada k, y simplemente arrastrarla. Lo bueno de esto es que puedes decidir qué tan grande es, y luego puedes ir por aquí y decir, quiero exportar un PNG para este, y yo exportaré solo ese. Pongámoslo ahí. Vamos a echarle un vistazo rápido. puede ver ahí es la rebanada y exporta el fondo también en relación a otras cosas. Por eso es bastante útil. Tal vez quieras agarrar esto. Estoy en mi herramienta rebanada otra vez. Voy a agarrar el filo de la misma. Tienes que estar en la herramienta en movimiento. Son Viki, agarra el borde de la misma. Son difíciles de agarrar. Si arrastras una caja alrededor de ellos, son un poco difíciles de agarrar. Verás, no puedo darle click, pero si arrastro una caja alrededor de ella, puedo agarrarla y puedo exportar todo este trozo Ambas partes superiores de estas, incluyendo el fondo. Lo que hay que tener en cuenta es que tienen un ícono especial aquí en el panel Capas, y si los nombra, esta va a ser mi entrada de señal Ahora puedo seleccionarlo en mi panel de Laos y puedo exportar solo este trozo aquí y va a usar el nombre correcto, ponerlo en el lugar correcto Es solo una alternativa para usar tu captura de pantalla en una Mac. Es Command Chef cuatro. Creo que es pantalla de impresión en una PC. Sí, eso es suficiente para la herramienta de corte. Es útil. Lo verás por ahí, usa un atajo muy bueno, desperdiciado, en mi opinión, probablemente haya un par de ustedes por ahí, tal vez dos de ustedes en YouTube, tres de ustedes que encontrarán esto súper útil. Es la herramienta de corte. Voy a borrarlo. Esa es la herramienta rebanada. Hecho. Al siguiente video. 106. Proyecto de clase 22: termina tu diseño: Bien, es el proyecto de última clase. Vamos a conseguir que termines tu diseño. Dependiendo de cuánto hayas hecho a lo largo del curso, esto será razonablemente fácil o podría llevarte un tiempo. Echemos un vistazo. Te voy a mostrar lo que vamos a hacer primero. Si vas a tus archivos de ejercicio, justo abajo abajo aquí hay algo llamado Z proyecto de clase final, Z solo así que está en la parte inferior y verás un PNG aquí, y este es el marco Y que quiero que hagas en alta fidelidad oh, necesitas una pantalla de bienvenida, página de inicio, necesitas resultados de búsqueda, detalles del evento, carrito más una confirmación. Los hemos construido a lo largo del curso. Déjame mostrarte. Básicamente va a ordenar todo. Echa un vistazo a la animación de bienvenida, hicimos varias diferentes. Hicimos el Texto Houdini y diferentes animaciones donde aparece todo el texto Entonces, dependiendo de tu diseño, es posible que quieras volver atrás e iniciar una nueva página y simplemente copiar los bits que necesites en lugar de algunos de los líos que hemos creado a lo largo de este curso. Animación primero, el siguiente bit es la página principal. Hicimos eso donde aquí. Se va a cargar después la animación a tu página de inicio y se va a cargar a este What's on page o trending gigs que están por venir. Básicamente solo esta tarjeta. Sin embargo, la página de inicio tiene dos opciones. Comenzaré en la página de entrenamiento, pero también quiero que la gente pueda llegar a los géneros o a una forma de búsqueda de categoría diferente en tu sitio. Déjame mostrarte en el iframe. Va a empezar. Tu página de inicio va a estar en tendencia y tener tu tarjeta de eventos. Pero quiero que haya una sub navegación arriba aquí para que la gente pueda ir por aquí e ir a esta categoría, le he dado un nombre genérico. Los tuyos podrían ser géneros. Al hacer clic en esto, obtienes todos estos géneros diferentes basados en tus diferentes tipos de techno si el tuyo es techno El tuyo podría ser por ubicación. Esta categoría aquí podría ser un botón de ubicación desplegable a las diferentes ubicaciones y las personas pueden hacer clic en las diferentes áreas, tal vez en tu vecindario o en tu ciudad. Te he dado un par de opciones, así que podría ser nuevo. Este fin de semana podría ser otra opción. Podría ser una subcategoría de los géneros reales. Podría ser la ubicación, dos formas de ir a esa página de inicio. Para mí, ya hice esta versión aquí, así que probablemente solo usaría géneros. Pero voy a tener que hacer un poco de navegación para meterme entre esto y aquello a lo largo de ser botones, puede ser lo que quieras. Lo siguiente son los resultados de búsqueda. Aquí tienes una barra de búsqueda abajo. Quiero que se pueda hacer clic y que vaya a su página de resultados de búsqueda lo hemos hecho en alguna parte. Hicimos esta versión. Quiero que haya una página de detalles de ventilación. Es éste de aquí que simplemente explota. Si haces clic en una de las páginas de inicio, das clic en esta de aquí, Groove C, entrará en más detalle y te mostrará las fechas y lugares y cómo hacerlo. Entonces hay una página de detalles. Una vez hecho esto, hacen clic en Agregar al carrito, quiero que crees tu página CRT Puedes usar la página que hicimos anteriormente con variables. Ahí está ahí. El mío es muy sencillo. Esto se reduce a la cantidad de tiempo que tienes. Llénalo, sobre todo si lo vas a utilizar para tu cartera. Ten un poco más de detalles aquí. Echa un vistazo a otros carros existentes y lo que podría pasar ahí, lo que podría ser útil También quiero una página de confirmación. Al hacer clic en el botón Por ahora, tienes una confirmación de que compraste los boletos. Podrías, dependiendo del tiempo que tengas, poner uno entre aquí que esté ingresando datos de tu tarjeta de crédito, podrías construir un formulario. Pero estos son los requisitos, cualquier otra cosa en el proyecto de clase. Podría ser fácil. Deberías tener todas estas cosas. Vamos a ordenarlo. La página de inicio necesita tener va a valores predeterminados de los eventos de tendencia, y hay una navegación más baja y una sub navegación en la parte superior de la que hemos hablado, cuál es dónde está Estos dos en la parte superior de aquí, esta pequeña sub navegación. Tengo una página de resultados de búsqueda, hay una página de eventos, hay un flujo de tickets. Nosotros solo hacemos carrito y confirmación. Podrías poner la tarjeta de crédito ahí también. Opcionales, si estás haciendo esto para tu portafolio, definitivamente ve y llena algunas otras páginas para que esto sea un poco más completo. Cosas como el perfil de artista de listas de deseos, te lo dejo a ti. Estos son opcionales. Pero se puede ver aquí la navegación inferior. Tenemos uno que tiene una navegación más baja. Ahí está aquí, podríamos saltar a nuestro carrito. Podemos ir a nuestros resultados de búsqueda de perfil. Ahí es donde conectas esa, y es posible que también tengas una página de lista de deseos Ya lo has hecho, me gustaría hacer un video tuyo interactuando con él. Recuerda subirlo ya sea a Vimeo o YouTube y compartir ese enlace en los proyectos de clase Si no puedes hacer las cosas del video, solo has estado luchando para hacerlo. Este podría ser el momento de hacerlo porque entonces puedes tener uno interactivo que todos podamos ver. De lo contrario, solo una captura de pantalla de todas tus páginas finales y sube eso a los proyectos de la clase. Por favor, comparta esto también en las redes sociales. No tienes que hacerlo, pero este podría ser el momento en el que estés Bien, hice algo. Comparte en las redes sociales, etiquétame en ellos, y cuando lo estés subiendo a los proyectos de clase, echa un vistazo a otros dos proyectos y ofrece algunos comentarios Si lo haces por dos personas, cubriremos a todos. No puedo llegar a todos ellos, ir a mirar proyectos de todos los demás y dejar uno o dos comentarios, lo que te gustó, lo que crees que podría cambiarse, en qué podrías trabajar. Se trata de los puntos opcionales super duper Karma. Prepárelo para su cartera. Los siguientes pasos a partir de aquí serían incluir el brief, la persona para la que estás trabajando, los marcos Y que has hecho, tus diseños terminados, y solo para asegurarte de que si estás usando tu portafolio lo describas como un estudio de caso. Es muy común llamarlo así. No pretendemos que es un producto real que hemos hecho para un cliente Esa es la única cosa. A veces la gente reacia a gustar, esto es falso Así es como los diseñadores de UX obtienen proyectos y comienzan usando estudios de casos. Tenemos que tener claro con los futuros empleadores que se trataba de un estudio de caso. Describirlo como. Bien, eso es. Los proyectos de clase han terminado. Reúne tus diseños finales, ordenarlos, ponerlos en una nueva página, conseguir que todas las interacciones funcionen. Me encantaría ver cómo se juntan. Sí me gusta revisar los proyectos de las personas, sobre todo al final de este curso avanzado porque ya estamos empezando a adquirir algunas habilidades , y disfruto verlas. Bien, así que hazlo, compártelo, y te veré en el siguiente video. Esta es una larga. Tómate tu tiempo, hazlo. Entonces te veré en el siguiente video. 107. Qué sigue después del avance en Figma: Bien, es el final del curso. Pero necesito despedirme pero eso. Tienes que moverte. Muévete. Muévete. ¿Por qué no te mueves? Bien, eso es mejor. Um, enhorabuena. Lo hiciste hasta el final del curso. Estamos al final de Figma Advanced. Qué, un curso grande. Un montón de videos, y solo quiero felicitarte a ti y a mí, llegamos hasta el final. Yo lo grabé todo, y tú lo viste todo. Otras personas están viendo Netflix. Te estás mejorando a ti mismo. Sí. También es triste. Tenemos que terminar aquí. Pero si quieres continuar con otros cursos, podrías los siguientes pasos a partir de ahora es que podrías hacer como Webflow sería un buen próximo curso para esto, bien, donde Webflow está tomando tus diseños de Figma y Figma sites es una especie de nuevo software amargo que Figma está haciendo Avísame que habrá un enlace aquí, ¿de acuerdo? Si puedes preinscribirte para ello. Y si consigo suficiente interés, también haré un video de Figma sites Otros cursos, tenemos Photoshop y after effects y En Diseño e Illustrator, y qué más tenemos Cava y DaVinci y Procreate Hay muchos otros cursos en Bring Our Laptop. Entonces donde sea que hayas encontrado este curso, ve tal vez echa un vistazo a algunos de esos otros cursos, y puedes conocerme a mí o a uno de los traer tu equipo portátil. También me puedes seguir en Figma, ¿de acuerdo? Ve a este enlace aquí, figma.com slash APBYOL Y puedes seguirme ahí. Además, lo que podría ser realmente interesante para ti ahora es FGMA Se llama CFI sucede una vez Es el tipo grande de, como, espectáculo que hacen. ¿Bien? Es en persona, y lo hacen en línea. Así que intenta llegar en persona. Es super cool. Pero también puedes hacerlo en línea. Y es solo que hay una transmisión en vivo, y lanzan todos los nuevos productos. Entonces es una gran manera una vez al año, ponte en tu calendario, solo para mantenerte al día. Voy a seguir actualizando el curso, ¿de acuerdo? Y podemos. Es una distracción, ¿verdad? Y no lleva sus gafas. No puedo conseguirlos ahora porque ahí está el gato. Pero sí, config es genial para hacer. También me gustaría dar las gracias a los editores. Esto es, como, hay mucho trabajo para mí, pero igual cantidad de trabajo gigante para Taylor y Jason, los editores de este curso. Así que muchas gracias. También para Sepan Inapropiado. Por favor, sostenga. Los gatos son a la vez lindos, pero también un poco asquerosos. Eres asqueroso. La otra cosa que me encantaría preguntar es, si tú volvemos a ello. La otra cosa que me encantaría preguntar es, ahora somos amigos, es si conoces a alguien o descubres una manera de compartir, como, Oye, hice este curso. Deberías comprobarlo en Trae tu propio portátil. Eso también sería genial. El tipo de referencias son la mejor manera de que la gente encuentre mi contenido y nos permita seguir haciendo cosas aquí al traer su Entonces, si puedes encontrar una manera, un enlace, una publicación social, eso también sería genial. Ahora, porque eres parte de Trae tu propio portátil, obtienes algunas cosas extra especiales. Entonces obviamente hay certificados. Entonces, si no los has hecho, deberías hacerlos. Hay un pase, un mérito y una distinción. Los hemos cubierto en el curso, pero esas son cosas que puedes obtener a tu CV, y es principalmente lo que es bueno para practicar porque tienes que hacer el proyecto de clase. Así que asegúrate de revisarlos. Estás trabajando en una organización grande o en una escuela, hacemos reservas grupales al traer tu laptop. Obtienes un descuento si lo haces, sí, reserva más de cinco. Bien, así que échale un vistazo para reservas grupales en Bing nuestra computadora portátil también, si quieres que tu equipo esté al día o a tus alumnos. Sí, echa un vistazo a las reservas de grupo en Bing nuestro portátil. La otra cosa a revisar son nuestros desafíos de diseño, ¿de acuerdo? Así que trae nuestro portátil, echa un vistazo a que hay, ya sabes, un reto regular que va a lo largo. A veces el diseño gráfico, a veces la UX, video para comprobarlos y hacerlos participar. Estás como, como, buscando una manera de practicar . Asegúrate de meterte en eso. Nuevamente, enhorabuena por llegar al final. Alto cinco. Aquí tienes. Sí. Es mucho trabajo. Espero que hayas aprendido mucho, y disfruté pasar el rato. Es divertido, ¿eh? A mí me gusta hacer estas cosas. Um, ese es el final. ¿Cómo lo terminamos? No puede ser más incómodo que el gato mirándose a sí mismo, supongo. Lo terminaremos ahí. Gatos lindos, di adiós. No hay nada que ver aquí. Bien, ojalá te vea otro curso, aunque. Adiós. Grasa a Negra. El destino Negro.