Fundamentos de diseño UI UX de Figma

1. Curso de introducción a los fundamentos de Figma: Hola ahí. Mi nombre es Dan Scott, y este es el curso Figma Essentials Juntos, tú y yo vamos a aprender todo lo que necesitas saber para comenzar como diseñador de UX dentro de FGma. Durante el curso aprenderás a dominar todas las herramientas en Figma. También compartiré todos los fundamentos de diseño de UX para crear hermosas interfaces de usuario y prototipos atractivos fácilmente en ¿Quién es él? Yo soy Dan Scott. Ahora soy diseñadora desde hace más de 25 años. He ganado múltiples premios de enseñanza, y mis cursos en línea han sido atendidos por más de 1 millón personas ahora, igual que tú. Primero, te daremos tu propio resumen único y te mostraremos cómo trabajar con una persona de UX. Aprenderás a crear wireframes simples. A partir de ahí, aprenderás a implementar colores e imágenes correctamente en tus diseños. Aprenderás lo que se debe y no se debe hacer para elegir fuentes para aplicaciones web y móviles Aprenderás a crear tus propios iconos, botones y todo tipo de componentes de interfaz de usuario usando las características de dibujo de Figm Aprenderás los términos aterradores como componentes, restricciones y varianzas Todos son muy fáciles de donde sabes cómo. También nos hará la vida más fácil mediante el uso kits de interfaz de usuario gratuitos y complementos para FigMA para acelerar nuestro flujo También aprenderá a usar algunas de las prácticas nuevas funciones de IA de FigMA Construiremos una guía de estilo simple lista para la transferencia del cliente Aprenderás a hacer microinteracciones y animaciones Todo el camino hasta la colaboración con otros miembros del equipo, una descripción general de los sitios de FuGMA para que pueda construir el sitio usted mismo y exportar todos los archivos adecuados listos para entregados a un desarrollador o Tienes tareas a lo largo del curso que establecí para que puedas practicar lo que estás aprendiendo y tener algo único para tu portafolio al final. Ahora, este curso está dirigido a personas nuevas en el diseño, nuevas en el diseño de UIX, diseño de experiencia de usuario Aunque no estés realmente seguro de qué es el diseño UX , no te preocupes, vamos a empezar desde el principio y abrirnos paso a paso. Muy bien, amigo mío, es el momento. Regístrate y únete a mí y pasa de Figma cero a Figma hero. ¿Diseña su propia camisa? Lo hizo. Estoy muy orgullosa de ésta. Es genial. Como que lo giré de lado y lo hice gotear. Excepto que el oro no planchará. Cada dos pedacitos planchados muy bien. Esta parte me vuelve loco. ¿Por qué no planchas oro? ¿Por qué? Uh. 2. Comenzar con el entrenamiento de Figma: Hola. Estás dentro. Tú lo lograste. Buen trabajo. Oye, lo primero lo primero es que necesitas descargar los archivos de ejercicio. Habrá un enlace en la página aquí en alguna parte. Descarga esos, los archivos que necesitas para este curso. Además, en esos archivos de ejercicio habrá una hoja de acceso directo, ¿de acuerdo? No vamos a adentrarnos demasiado en los atajos para éste. Lo haremos pero hay algunos que son simplemente realmente naturales y útiles de usar. Entonces he hecho una hoja que puedes imprimir, pegarla junto a tu computadora y algo así como, rodear las que usas mucho. La otra cosa es que hay una versión gratuita y otra de pago de Figma. Comenzaré el curso usando muchas de las funciones gratuitas, y nos encontraremos con algunas funciones pagas a medida que avanzamos. Entonces, si solo planeas usar la versión gratuita, eso está totalmente bien. Se puede llegar muy lejos en figma. Sabes, puedes ser un diseñador UX bastante competente en Figma usando la versión gratuita, y lo haré pero no me esconderé de la versión paga también, porque hay algunas cosas realmente geniales ahí que hacer, también Entonces, aunque no hagas la versión paga, puedes es bueno ver cuáles son las funciones pagas y cómo usarlas. La otra cosa es que hay una versión de escritorio y una versión basada en navegador. Voy a usar la versión de escritorio. Son exactamente lo mismo. Uno que puedes descargar y tener en tu computadora, uno que solo puedes usar en tu navegador como Chrome. No hay diferencia entre los dos. Utilice cualquiera de los dos. Voy a usar la versión del navegador porque soy viejo, y me gusta que las cosas estén en mi escritorio sin ninguna buena razón. Entonces ahí tienes. La otra cosa es, es que puedo hablar muy rápido, sobre todo si estoy al inicio de un curso y acabo de tomar un café. Yo puede ser sí, hablar demasiado rápido para algunas personas, sobre todo si tal vez el inglés como su segundo idioma. La otra cosa es, algunas personas piensan que hablo demasiado despacio. Me puedes acelerar. Hay un diente. ¿Dónde está? Creo que está por aquí. Haga clic en él. Encontrarás una velocidad. Puedes acelerarme o ralentizarme como te convenga. La otra cosa es que el producto es realmente bueno para actualizar cosas. Ellos son como, hazlo mejor. Vamos a cambiarlo. Vamos a hacerlo más claro. El problema para mí, sin embargo, es como creador de cursos, van y cambian las cosas y las hacen mejores, y puede ser complicado. Si es un gran cambio, solo volveré a grabar el video y no lo sabrás. Si es un cambio minúsculo, solo revisa los comentarios. Podría haber una nota ahí abajo, como, solía llamarse así y ahora se llama así, ¿ay? Pero está en el mismo lugar y se ve igual y hace lo mismo. Así que solo mantén un ojo en eso a lo largo del curso. La otra cosa es eso, ¿quién está emocionado por empezar? Yo soy. Me encanta hacer este curso. Estoy emocionado de empezar. Hazme saber en los comentarios si tú también lo eres. Me encanta revisarlos después de hacer un curso. Yo soy como, ¿Quién ha reventado para empezar? Bien. Sigue con el curso, Dan. Bien, vamos. 3. ¿Para qué sirve Figma?: Bien, en este video, vamos a hablar sobre qué es figma y qué no es figma. Entonces figma en realidad se ha convertido en muchas cosas. Para lo que se utiliza principalmente es el trabajo UIUX. Entonces, básicamente, cuando lo bajas, estás haciendo o estás diseñando un sitio web o una aplicación. Entonces un cliente viene a mí y me dice, Dan, necesito que nos diseñes un nuevo sitio web. Abrirías Figma y lo diseñarías ahí, y luego luego lo convertirías en un sitio web real Entonces Figma es la apariencia de un sitio web y es una forma rápida de diseñarlo para que los clientes firmen. ¿Por qué nos molestamos, como, diseñarlo en Figma y luego ir a construirlo después Se trata principalmente de velocidad. Se trata de prototipado Eso es lo que es como el término clave para Figma y tipo de alternativas a Figma Prototipado rápido. Entonces si el cliente viene a mí y me dice, quiero todas estas características, quiero hacer estas cosas. Puedes diseñarlo rápidamente, dárselo al cliente. Puedes prototimarlo para que parezca un sitio web y funcione como uno. Los botones hacen clic. Vas a todas partes. Eso lo haremos en el curso. Se llama prototipado Para que pueda conseguir que sea realmente competente buscando sitio web. Entonces el **** puede volver y decir, uh, no es lo que quiero, o eso no funciona, o lo más importante, puedes probarlo con los clientes de ese cliente, y ellos pueden usar este tipo de prototipo. ¿Bien? No es un sitio web en toda regla, pero se ve y se siente como uno, y pueden perderse. Y puedes arreglarlo. ¿Bien? La iteración es lo que nos convierte en un diseñador de UX, y también lo que hace que Figma sea tan poderoso. Puedo decir, Bien, aquí, cliente, aquí está tu proyecto, y ellos dicen, no, puedo regresar y hacer cambios rápidos, no volver al desarrollador y reconstruir esta enorme base de código Big que hicimos, ¿bien? Simplemente arrastra algo en Figma, prototipo súper rápido y fácil, rápido Y luego volver con el cliente o su cliente y decir: ¿Qué opinas ahora, bien? Y ver cómo lo usan y se dan cuenta de que todavía se pierden. Cambia las cosas, cambia el idioma, mueve el dimensionamiento , ya sabes, ajusta las cosas muy rápido que puedas llegar a un punto en el que todos lo firmaron el cliente es como, Sí, me encanta esta cosa Entonces puedes trabajar con un desarrollador, bien, para construir esta cosa. O trabajar con una de las otras características de Figma llamadas sitios Figma o WordPress o ¿qué más tenemos? Hay otros en mi cabeza Webflow, hay más, ¿de acuerdo? Elementor. Hay muchas maneras de ir y construirlo después, ¿de acuerdo? Entonces nos vamos a centrar en el lado del diseño aquí, el tipo de proceso de diseño UX, ¿de acuerdo? Y construir sitios que se vean y sientan que funcionan. Solo necesitas saber que no es solo como en el hecho al final, ¿de acuerdo? Ese es el tipo de proceso. ¿Y por qué lo hacemos? Porque es rápido, y es mucho más barato que conseguir que lo diseñes o dediques el tiempo a hacer este sitio web en pleno funcionamiento por solo para tener muchos cambios. Entonces ahí es donde cabe figma . Eso es lo que hace muy bien. Prototipado rápido. Ahora, lo que más hace Figma realmente bien es que se está arrastrando en el espacio general del diseño Entonces Figma nació para hacer sitios web y aplicaciones, bien, prototipado rápido Pero ahora la gente ha sobresalido las herramientas, ¿de acuerdo? Y la gente ha comenzado a usarlo solo para cosas de diseño general. Entonces, las herramientas que vas a aprender en esta clase, vamos a basar en el diseño web y el diseño de aplicaciones, pero vamos a aprender la herramienta para que puedas usarla también como una herramienta de diseño general. Y la gente lo está usando para eso. Entonces lo llaman Figma draw, pero es como que acaba de cocer en este curso Son las herramientas de dibujo junto con él. Entonces te encontrarás como, Oh, ¿por qué no puedo simplemente diseñar este volante aquí? O este anuncio en redes sociales, puedes usar totalmente las habilidades de este curso. Tenemos que enfocarnos en UIUX, pero puedes usarlo para todo Algunas de las otras cosas que hace FIGMA que no se cubren en este curso Entonces tienen algún otro tipo de, como, otras herramientas. Hay uno llamado FIG JAM, bien, que es, ya sabes, una especie de producto separado. Es como una herramienta de abordaje blanco como Merro, bien, algo así como ideas y lluvia de ideas Tienen Figma Buzz, que es una herramienta específica de diseño de redes sociales que es una especie de alternativa para Canva o Adobe create Tienen sitios Figma, bien, donde puedes tomar tu archivo Figma, bien, que estamos haciendo en esto, el diseño del mismo y de hecho convertirlo en un ¿Bien? Entonces Figma sitios está fuera del alcance de este curso Lo cubriremos un poco al final, Bien porque es bastante genial y el tipo de siguiente paso en tu proceso. Pero esa sería una alternativa para algo como flujo web o Wordpress, ¿bien? A menudo, sin embargo, estoy construyendo cosas en Figma, bien, y luego dárselo a un desarrollador construya en un tipo diferente de base de código, ¿de acuerdo? Pero si lo estás construyendo tú mismo, podrías usar sitios Figma Tienen diapositivas Figma, que es básicamente una alternativa de PowerPoint ¿Qué más tienen? Figma buzz, ¿redes sociales? Déjame revisar mis notas. Espera ahí. Ahí vamos. Figma M es el tipo de versión beta de la codificación AI Puedes hablar con él para codificar tu sitio. Eso es bastante genial fuera del alcance de este curso. Nos vamos a centrar en lo que ellos llaman Figma. Y ese es el tipo de uso general para ello, y lo llaman diseño Figma. Entonces vamos a hacerlo. Enfócate en el diseño de UI UX, pero ten en cuenta que las herramientas que vas a aprender, ya sabes, también puedes usar con fines generales de diseño. Una especie de alternativa también. Vamos Photoshop Más Adobe Illustrator, si conoces ese software. Bien, así que eso es lo que hace. Yo Burber a lo largo un poco. Espero que eso sea útil porque hay muchas facetas diferentes en Figma. Nos vamos a centrar en la interfaz de usuario, el diseño de UX, y se llama Figma Design. Siguiente video. 4. ¿Cuál es la diferencia entre UX (Experiencia de Usuario) y UI (Interfaz de Usuario) en Figma: Bien, hablemos de la diferencia entre UI y UX Entonces las diferencias son UY, interfaz de usuario, UX, experiencia de usuario La interfaz de usuario son los píxeles de la página, como las fuentes que eliges, las imágenes, los colores, el espaciado. Estás haciendo que se vea bien. Bien, eras un diseñador de UI, y así es como empecé en este campo. El cliente vendría a mí y me decía, quiero un sitio web. Yo diseño se veía genial. A él le gustó. Nosotros lo mandamos. Bien, yo era diseñador de interfaz de usuario. Donde me convertí en diseñador UX es el cliente viene a mí con un problema. Digamos que es un necesitamos actualizar el checkout en nuestra página. Queremos hacerlo mejor, ¿de acuerdo? Entonces, en vez de simplemente diseñar algo que pensé que sería mejor, bien, diseñaría algo. Tendría una buena idea y una hipótesis sobre lo que se podría hacer, ¿de acuerdo? Y luego iría a probarlo, ¿de acuerdo? Entonces lo probaría con un par de personas y vería, ¿les resulta más fácil? Lo encuentran más confiable, ¿de acuerdo? Realizamos pocas pruebas en persona, o puedes hacerlo en línea, o, digamos, traer tu computadora portátil. Realizamos muchas pruebas AB donde decimos, Bien, lo estamos haciendo siempre estamos mirando las actualizaciones del flujo de pago Hacemos pruebas AB donde la mitad de las personas que llegan al sitio web van a la antigua 1.5 de la misma van a esta nueva. Y yo estoy como, Bien, ¿ es mejor? ¿Tenemos mejores conversiones? ¿Menos conversiones? ¿Por qué? ¿Podemos cambiar esta cosa? ¿Lo hizo mejor? Estamos empezando a entrar en el campo UX, bien donde estamos probando nuestras ideas, ya sabes, iterando rápidamente eso nos convierte en un diseñador de UX Si alguna vez has usado un sitio web cuando te topaste con algo frustrante, eso son problemas de diseño de UX, ¿ Y eso es algo de lo que ahora vas a tomar nota mucho más y deberías, ¿de acuerdo? Entonces, digamos, como yo uso mi sitio web bancario a través de mi computadora aquí. No estoy seguro de por qué estoy fingiendo escribir, pero, ya sabes, una de las pequeñas frustraciones es cada vez que voy a esta cosa, la han actualizado Y ahora, cuando escribo mi contraseña y presiono Enter, no hace nada. Vas a agarrar tu mouse y vas y haces clic en el tipo de botón de enviar. Estás como, es muy fácil entrar y ajustar eso y si hubieran hecho algunas pruebas en eso, bien, verían que verían gente se frustraba y se detuvo allí, y habría sido una solución fácil, y habría hecho que toda la experiencia del usuario mucho más experimentable por el usuario. No es una palabra. Pero entiendes la idea. La interfaz de usuario nos enfrenta en la página, como se ve. UX es cómo las personas interactúan con tu proyecto. Y eso es lo que vamos a hacer en este curso. Vamos a ver tanto la interfaz de usuario, y te voy a dar algunos consejos sobre cómo se hace la UX y la creación de prototipos a lo largo del curso Vamos a centrarnos en las herramientas de Figma, pero voy a tratar de introducir algunas mejores prácticas de UX para que también puedas comenzar 5. Lo que estaremos haciendo en este curso de Figma: Bien. ¿Qué estamos haciendo en este curso? Vamos a hacer esto. Es un sitio web para una marca de comercio electrónico en particular. Todo el mundo va a conseguir el suyo propio. El que uso a través de este curso es para billeteras, ¿de acuerdo? Y vamos a darle una demostración rápida. Bien, aparece un pequeño boletín de suscripción. ¿Bien? Podemos ir a Aprendamos más sobre ello. Lo hacemos una especie de página de inicio, una página de características. Vamos a página de compra. La gente puede marcar cosas, agregar cosas y luego obtienes una página de confirmación. Y un interruptor de palanca que actualmente no hace nada. Haremos tanto una versión de escritorio una versión móvil de nuestro sitio. El nav móvil. También haremos wireframes. ¿Bien? Entonces terminaremos en este tipo de versión más alta fidelidad, este tipo de versión completa, pero también construiremos nuestros wireframes para comenzar, conectarlo todo, para que vaya a lugares y podamos hacer pruebas Nos aseguraremos de que todo sea receptivo para que pueda ajustarse a diferentes tamaños de pantalla. Construiremos una guía básica de estilo con estilos y nuestros diversos componentes para navegación y botones. Es todo tipo de diversión. Entonces, ¿por qué estamos construyendo esto? Vamos a trabajar con esto. Entonces vamos a comenzar con un breve que tenga lo que estamos haciendo y una persona y vamos a construir esta cosa llamada Ta oh, básicamente, hablemos de esto. En el siguiente video, todos van a obtener su propio brief único. Todos estamos construyendo algo ligeramente diferente. Te darán nuestro producto y te darán una breve persona. Una persona es solo una descripción de quién es el cliente porque si hacemos algo para todos, simplemente se pone un poco claro y no es realmente bueno para ninguna persona en particular. Vamos a identificar para quién estamos construyendo esto. En este caso, lo estoy construyendo para Sam. Conozco su edad, conozco información básica sobre ellos para que cuando estemos tomando decisiones a lo largo de nuestro proceso de diseño sea que estemos usando el usuario, su personalidad para tomar decisiones, en lugar de construir algo que Dan quiera porque no es para mí, no debería ser yo quien decida, esto es genial. Creo que debería funcionar de esta manera. Necesito separarme y pensar, ¿qué querría Sam? Todos obtendrán uno ligeramente diferente. Sam está interesado en la moda y las últimas tendencias, así que voy a usar eso en mi cabeza. Mientras que podrías conseguir a alguien que sea muy amigable con el medio ambiente o consciente del medio ambiente. Eso va a cambiar realmente el diseño. El público objetivo. Tenemos que construirlo para ellos, no para usted, no para el cliente o su cliente, para Sam. Ahora, cubriremos solo un poco del proceso de diseño de UX. Principalmente estamos dirigiendo el software, pero lo presentaré a lo largo del curso solo para que obtengas una comprensión básica del proceso de diseño de UX. Pero después de este video o después de este curso, echa un vistazo a las personas, un poco más. Lee sobre ellos. Este es un verdadero hueso desnudo, ahora que sabemos cuál es nuestra personalidad, vamos a trabajar en este flujo de tareas. Todos vamos a estar construyendo el mismo. Vamos a crear una página de inicio, una página de características, una página de pago y una página de confirmación de pago. Esto se llama flujo de tareas. Es una tarea muy específica para hacer en un sitio web. A menudo te dan un trabajo para un sitio existente que no es un rediseño completo Es como, quiero que actualices el flujo de registro o el flujo de cancelaciones o puede ser como subir un documento. Estarás trabajando en un flujo de tareas específico. Probablemente sea importante ahora hablar la diferencia entre un flujo de tareas y digamos un flujo de usuario. Encontré un buen ejemplo aquí. Esto es más un flujo de usuarios. Como flujo muy lineal, este flujo de usuarios, hay muchas formas diferentes, muchas decisiones de llegar a esta última parte aquí y tienes que dar cuenta de todas ellas. Un trabajo mucho más grande que lo que estamos haciendo en este curso. Digamos un buen flujo de usuarios para el sitio web de traer nuestro portátil. Podría ser que alguien llegue a la página de inicio, se inscriba y para hacer un curso, podría llegar a él a través la opción de búsqueda. Podría haber gente buscando. Podrían estar en las cejas gente. Podrían haber llegado a través de un anuncio que va directamente a la página de resumen. Hay todas estas diferentes formas de llegar a hacer un curso de video. Como diseñador de UX haciendo un flujo de usuario, esas son todas las consideraciones que necesito hacer. Trabajo más grande. Estamos haciendo algo agradable y sencillo, solo una tarea bien. Entonces el siguiente video, te voy a dar tu breve único. Usaremos este flujo de tareas. Construiremos una versión wireframe de la misma, la probaremos. Luego construiremos una versión hiidelity de la misma. También construiremos una versión de escritorio. Nosotros lo diseñaremos. Lo haremos inactiva Todo el tiempo aprendiendo todos los elementos esenciales para Figma, pero también hornearemos en algunos de esos procesos de diseño UX Todo bien. ¿Estás listo? Estoy listo. Todo bien. Vamos a ponernos en marcha. 6. Proyecto de clase 01: crea tu propio resumen: Bien, es hora de hacer los deberes. ¿Dijo tarea? Me refería a practicar por aprender. Entonces vamos a establecer tareas a lo largo del curso, solo para que no solo sigas ciegamente que llegues a hacer algo Y lo genial de ello es que llegas a hacer algo único para ti. Vamos a usar esta cosa llamada random project generator.com para generar un brief único, pero todos vamos a seguir el mismo flujo de tareas Entonces todos vamos a estar haciendo esto. Todos vamos a hacer una página de inicio para un producto, las características del producto. Va a haber un checkout y una página de confirmación. Entonces estamos haciendo el mismo flujo de tareas. Pero si usamos el generador de proyectos aleatorios, todos conseguimos hacer algo ligeramente diferente que podamos usar que sea único para nuestra cartera. Así que abre los proyectos de clase Doc. Debería estar en tus archivos de ejercicios. Ahí está ahí, ¿de acuerdo? Y el tuyo estará mucho más lleno que el mío. Entonces estamos a la altura de este de aquí, Proyecto 01. Así que visita random project generator.com, y haz clic en el botón UyX. Entonces hagámoslo. ¿Bien? Esta es una herramienta que yo y el equipo aquí hicimos, y puedes hacer click en UyXo puedes ingresar un nombre No importa lo que sea. ¿Bien? Tu apellido, nombre de amigo, nombre de mascota, nombre de niño, nombre de la abuela, lo que quieras, y luego una ubicación. ¿Bien? Entonces vivo en Limerick, y voy a golpear Generar mi proyecto. Bien, y se te generará tu propia persona. Serán muy similares y la diferencia será el producto, lo genera aleatoriamente y el nombre que uses, pero todo lo demás será estructuralmente igual Así que todos estamos diseñando lo mismo, pero con un poco de singularidad. Si no te gusta lo que tienes, no golpees retry. Es rojo por una razón. Te lo advierto. ¿Bien? Entonces estoy haciendo Scott Wallets. Mi cliente es, Sam. Y me cuenta un poco sobre ellos. Lo que podemos hacer es descargar como PNG. Entonces lo tienes para que puedas volver a él, solo descárgalo para tu máquina. Guárdalo en algún lugar seguro. Vamos a usarlo a lo largo del curso, y lo usaremos hacia el final también cuando lo combinemos para hacer más una pieza de portafolio. Bien, así es como funcionan los proyectos de clase. Te digo qué hacer, y a veces te voy a pedir que lo subas al sitio cuando tengamos algo un poco más interesante para compartir, pero por el momento, solo guarda tu brief en alguna parte, tenlo en tu mente cuando estemos diseñando a lo largo de este curso. Todo bien. Eso es. Siguiente tiempo de video. 7. ¿Qué son los Wireframes de baja fidelidad vs. Wireframes de baja fidelidad en Figma?: Bien. Hablemos de marco de alambre versus alta fidelidad. ¡Oh! Es bastante fácil. wireframes son wireframes, y alta fidelidad son estos sitios web de aspecto completo Entonces, lo que vamos a hacer en este curso es que vamos a crear el wireframe, primero, probarlo, y luego construir algo más de la característica de diseño para esta alta fidelidad Entonces normalmente se llama marco Y, algunas personas lo llaman low fi y hi fi o wireframe y alta fidelidad Mi consejo es que no se salte esto. El consejo es no saltarse el paso de wireframing. Alguien viene a ti con un proyecto o un breve, puedes poner en marcha un marco de alambre y probarlo, como los botones funcionando y la navegación haciendo algunas cosas básicas en minutos. Vuelves con tu cliente jefe de partes interesadas y dices, ¿esto es lo que estamos tratando de hacer? Y ellos pueden decir, Sí, puedes seguir adelante, en lugar de pasar años, enlatando y rastreando y recogiendo imágenes y haciéndolas bien para que vayan Eso no es a lo que me refería. Es rápido, está sucio, es fácil. Y vas a tener que hacerlo para este curso porque vamos a hacer construir esto primero. Y nos va a dar muchas de las características fundamentales de Figma antes de seguir adelante y hacer bonitas Por qué los marcos no tienen que verse así. No hay una regla real sobre lo que pueden hacer. Normalmente, la gente le pone una línea a través de ella para una imagen, pero ella. Vamos a buscar algunos ejemplos en Figma. Estoy en Figma. Voy a ir a este botón de inicio arriba de aquí arriba. Voy a ir a éste dice plantillas y herramientas. Siguen moviendo este botón, pero echen un vistazo, solía llamarse comunidad. Voy a escribir en la parte superior justo aquí. Voy a escribir estructura alámbrica. Echemos un vistazo a un par de ejemplos. Así que solo puedes pedir prestado el kit de otra persona. Así que échale un vistazo a éste. Haga clic en él una vez. En va a ver. Este de aquí se ha vuelto aún más atrás ya que en ellos han despojado el texto de éste. Eso también lo puedes hacer. Lo que notarás, sin embargo, que son monocromáticas Algunas personas usan un color, pero no más de uno. Elige un color inofensivo o simplemente usa blanco y negro y versiones de gris y elige una fuente muy ofensiva Estamos buscando cosas aburridas aquí, porque lo que no queremos hacer vamos a echar un vistazo a esta buena también. ¿Bien? Es mucho más, digamos, completo. Es un poco más elegante Nuevamente, no hay reglas reales. Puedes elegir uno que tenga un poco más de sabor de diseño en él. Lo que quieres evitar es tener conversaciones con tu cliente cliente interesado sobre como, Oh, eso no es Alfon Oh, esa es la imagen equivocada. Oh, no decimos eso. Muchos moore en nuestro titular. Lo que estás haciendo aquí es solo probar la función. Cuando hago clic en este botón, va a aquí, y luego esto va a aquí, ¿estoy construyendo todas las páginas correctas? Sí. Impresionante. Entonces podemos ir a la alta fidelidad. Mantenlo aburrido, mantenlo funcional. Cubriremos el uso de plantillas de otras personas más adelante. Pero si te has topado con aquí, recuerda casa, plantillas y herramientas He hecho una búsqueda aquí arriba y puedes abrirlos. Vamos a abrir este de aquí. Y solo dice abierto y Fig. Lo bueno de esto es que ahora tengo este archivo. Está abierto en otra pestaña, puedo volver a casa aquí. Pero si voy a recientes, ahora es solo mi expediente. Figma es esta gran comunidad donde la gente comparte sus archivos y puedes tomarlos prestados, apropiarlos, robarlos Por supuesto, no solo queremos duplicarlo y pasarlo como propio, sino que si te gusta el estilo de algunos de Ok, desde las plantillas, puedes pasar por ellos y empezar a atraparlos. Todos son seleccionables. Puedes empezar a trabajar con ellos. Pero eso es saltar un poco adelante en la clase. Voy a cerrar esta pestaña. Vuelvo a las plantillas y he eliminado el marco de alambre de aquí solo para mostrarle alta fidelidad. No es tan elegante. Se trata de sitios web realmente hechos. Este de aquí podría abrirme y empezar a trabajar con él. Este parece para un bufete de abogados. Han hecho mucho trabajo duro. Podría estar haciendo un trabajo para un contador o un abogado también A mí me gusta esto. Puedo comenzar con esto. Y empezar a cambiarlo desde mis propias fuentes, mis propias imágenes, pero me gusta la estructura. Esto es de alta fidelidad, saltándose la etapa de wireframing Malo. Todo bien. Eso es, saltemos al curso y empecemos a hacer cosas. Todo eso es. Eso es el encuadre de alambre versus infigma de alta fidelidad Pasemos al siguiente curso. Empieza a hacer cosas, Dan. 8. Creación de nuestro archivo de diseño e introducción de marcos en Figma: Ahí. En este video, vamos a hacer nuestro primer archivo de diseño, y luego vamos a comenzar a agregar páginas, que se llaman marcos. Haremos un poco de navegación básica, y haremos de manera súper excitante cuatro cajas blancas ¿Puedes ver esos en la pantalla? De todos modos, este va a ser nuestro diseño de teléfono móvil para nuestro proyecto. Vamos a saltar. Bien, así que he abierto Figma. Tengo una copia nueva aquí. Entonces lo que queremos hacer es que esta pantalla cambia bastante. Cada vez que hago un curso, esta pantalla es diferente. Básicamente lo mismo. Lo que estás buscando es este pequeño ícono del hogar. Eso también lo mueven un poco, pero debería estar en la esquina superior izquierda. Entonces estamos buscando crear lo que se llama un archivo de diseño. Recuerda, este curso es sobre el diseño Figma. Este primero de aquí, mi ratón está en cámara lenta. Bien, espera ahí. Bien, mi ratón está de vuelta. Entonces hay un botón de diseño. Puedes hacer click en eso. Pero en Figma, hay cerca de diez formas de llegar a todas partes Voy a tratar de darte la mejor manera consistente o la mejor manera para nuestro nivel. Si sí descubres otra manera. Buen trabajo. Si así te gusta más, hazlo de esa manera. Solo por ejemplo, puede hacer clic en el archivo Diseño, puede hacer clic en este botón Plus, luego hacer clic en el archivo Diseño. Puedes ir a Reese saber fue borradores y golpear Plus y obtener un archivo de diseño Hay muchas maneras de obtener un archivo de diseño. Bien, así que vamos a crear uno. Bam. Básicamente, se abre en una nueva pestaña aquí, ver, Inicio el archivo sin título que tenemos abierto, archivo de inicio sin título Puedes trabajar desde plantillas para empezar. No vamos a hacerlo. Puedes pasar el cursor por encima de ellos, y simplemente te los muestra. Eso es apenas empezar. Vamos a utilizar plantillas más adelante cuando nos pongamos mejores, pero tenemos que empezar de cero. Cerremos todo esto y conseguimos esta cosa aburrida. Bien, vamos a crear una página. Lo haces usando este botón abajo de aquí. Se llama marcos. Los marcos son como páginas o hacia arriba desde Adobe Land, haga clic en este pequeño icono abajo aquí, haga clic y dibuje algo. Ahora tienes una página. Es pequeño cursor por defecto la herramienta de selección después de que la hayas dibujado, así que si quieres otra página, vas a volver a la herramienta de marco, dibujar otra Vuelve a la herramienta de selección, eso en realidad es bastante útil. Ahora, queremos un tamaño específico porque queremos nuestro tamaño de teléfono para el que vamos a hacer nuestra maqueta Lo que podemos hacer es eliminarlos simplemente haciendo clic en el nombre en la parte superior. Ya ves si hago clic en el nombre en la parte superior, resalta todo el asunto y puedo presionar Eliminar en mi teclado. Yo también quiero deshacerme de ese tipo. Lo que voy a hacer es ir a mi herramienta de marco. Lo que notarás es en este lado derecho de aquí, tienes que estar en el diseño es lo que debería ser. Este marco puede tener un montón de tamaños preestablecidos. Ya sea teléfono, tableta, escritorio, hagamos teléfono y usemos cualquiera que sea el tamaño más común para la hora actual. El iPhone 16 es no lo sé. Todos son aproximadamente iguales y no se espera que diseñes para todos los diferentes tamaños de teléfono. Podría esperarse que hagas teléfono, tableta y computadora de escritorio, si estás haciendo, digamos, un sitio web. Si es una app, obviamente solo vas a hacer una talla, el teléfono. Vamos a empezar con el iPhone 16. Si estás viendo esto en el futuro y hay iPhone 500, solo busca en Google cuál es el tamaño común del teléfono que más se usa. Google te dirá lo que tiene la mayor parte del mundo o puedes averiguar qué tiene el stakeholder de tu cliente jefe como teléfono porque lo estarán probando y quieres impresionarlos más, así que quieres usar su sitio. Voy a usar el iPhone 16. Si lo estamos haciendo para redes sociales o algo así, necesitas que tenga un tamaño específico. ¿Puedes ver si tengo el nombre seleccionado en la parte superior, así que off seleccionado por aquí en el lado derecho, puedes escribir cualquier tamaño Si necesita ser 500 por 800, puedes hacerlo. Yo no quiero eso. Entonces voy a usar el Deshacer en una Mac, es Comando Z, Control Z en una PC para que vuelva al tamaño normal del iPhone. Está bajo Editar también en Deshacer, o si estás en la versión del navegador, tendrás una pequeña barra en la parte superior aquí donde puedes ir a Editar Deshacer como. Se arriba. Dije que no vamos a hacer demasiados atajos, pero hay algunos simplemente inevitables El otro camino es súper largo. El camino corto, el atajo es que quiero acercar y alejar, mantener presionada la tecla de comando y presionar más en mi teclado, y menos vuelve a salir. Mantenga presionado Comando en una Mac, Control en una PC y acercar y alejar. Puedes usar esto por aquí. Hay un pequeño menú desplegable manual, pero te volverás loco tratando usar esta cosa de aquí. Alejar. Vuelva a subir. Alejar. Comando o Control más y menos. Todo bien. Entonces tenemos este documento, y se llama iPhone 6-1. Eso no es divertido. Podemos renombrarlo simplemente haciendo doble clic en él por aquí y llamando a esta página de inicio y presionando Enter on. La gente prefiere ir por aquí en el lado izquierdo aquí. Asegúrate de estar bajo archivo, no activos. Eso lo haremos más adelante. Ve a Archivo y verás aquí abajo debajo de tus capas, puedes simplemente hacer doble clic en él por aquí también . Hasta usted. Quiero dos de estos. volver a mi herramienta de marco y decir, quiero otro iPhone 16 y lo volcaré junto a él. Llamémosle a éste. ¿Cuál es este? O características. Otra forma de hacerlo es que puedes seleccionar las características de la palabra y simplemente ir a copiar y pegar. Comando C, Comando V, en una Mac, Control C, Control V, en una PC, el estándar copiar y pegar. No, gracias. Otro atajo que quiero mostrarte, mantén presionada la barra espaciadora, solo somos un video y estamos haciendo cosas y ya haciendo el atajo, Stan, los verdaderos claves. Mantienes presionada la tecla de la barra espaciadora y verás que tu cursor se convierte en una mano, haces clic en mantener presionada y arrastrarla alrededor Mantenga pulsada la barra espaciadora, haga clic en Sostener arrastrar. Ahora tenemos a estos tres. Todo bien. Ahora, dependiendo del trabajo, podría esperarse que hagas tanto un teléfono como una tableta y una versión de escritorio. Lo que puedes hacer es alejarnos un poco. Comando menos o Control menos en una PC. Vamos a hacer clic en las características, copiarlo y pegarlo. Lo que voy a hacer es que voy a hacer clic en espera y puedo arrastrar a estos tipos por ahí. Estos marcos, los puedo arrastrar y decir, quiero que este se haga aquí. ¿Se puede arrastrar el nombre? Si arrastras los bordes, puedes cambiar manualmente el tamaño de tu marco. Voy a deshacer eso. Y por aquí, puedo decir este marco aquí, quiero que no seas solo un frame, sino que quiero que no seas Android 16, quiero que seas ¿qué vamos a hacer? Rezo P 11. ¿Bien? ¿Puedes ver que el marco se hizo mucho más grande Barra espaciadora, manténgala pulsada, haz clic y arrastra. Con él seleccionado, puedes ver esta rotación aquí. Puedes decidir si es horizontal o retrato. Simplemente haga doble clic en él. Llámala página principal. Bien. Otra vez lo mismo, copiar y pegar juego. Podemos poner en características. Me olvidé de este, este se llama checkout. Tengo que copiarlo y pegarlo. Clic de inmersión. A ésta se le va a llamar confirmación. Se puede hacer eso para móvil, para tablet, lo mismo para escritorio. Vamos a agarrar ambos. Simplemente hice clic y arrastré una caja alrededor de ambos y fui a copiar y pegar Creo que terminaron uno encima del otro. Ellos lo hicieron. Entonces aquí vamos aquí abajo. Este de aquí va a ser frame quiero que sea del tamaño del escritorio. Escritorio es que se puede ver, hay un montón de cosas. Puedes hacer el Apple Watch. Puedes hacer algunos tamaños a base de papel. Publicaciones en Twitter, están todas aquí. Estoy buscando scroll scroll scroll. Ya lo he pasado. Es de escritorio. Ese es un tamaño de escritorio súper común y lo que la mayoría de la gente usa para diseñar un sitio web, pesar de que hay muchos tamaños diferentes en línea. Puedo arrastrar eso por ahí. Se te da la idea. Lo que tiendo a hacer es diseñar para algo primero. vamos a diseñar para dispositivos móviles Primero vamos a diseñar para dispositivos móviles para este wireframe, luego diseñaremos primero para escritorio cuando estemos trabajando para nuestro sitio web Esa es una conversación para tener con tu cliente. Tal vez quieran ver ambos. Pero digamos que trae tu propio laptop.com. Mi sitio. Somos una empresa de escritorio primero porque la mayoría de la gente viene viendo los videos e interactuando con el software. Están en su computadora. Diseñamos para eso primero y luego resolvemos cómo encaja en el móvil. Muchos sitios ahora serán móviles primero. Primero estamos diseñando para dispositivos móviles y luego se nos ocurre una versión de escritorio después. Puedes diseñarlos de forma concurrente. A menudo, lo que hago es diseñar uno de ellos, el más importante , luego elaborar los otros tamaños intermedios. Lo que voy a hacer es alejarme lo suficiente para poder verlo todo. Recuerda, comando menos o Control menos en una PC. Sólo voy a arrastrar una caja alrededor de todos estos tipos porque solo voy a trabajar primero en el móvil. Sólo voy a hacer clic en Eliminar, así que se han ido. Si te pierdes, a veces puedes acercar el zoom por accidente o has golpeado tu rueda de desplazamiento y haces zoom, zoom y zoom y estás como, ¿Dónde carajo estoy Bien, podrías usar estas pequeñas barras de fregado de aquí. Hola. G estos pequeños de aquí y tratar de averiguar su salida. Muchas veces es más fácil solo subir aquí y decir, ¿ puedes hacer zoom para que quepa? Simplemente encajaré todo lo que tienes en el medio de la pantalla. Entonces ahí está el nombre de nuestro documento. Al igual que, algunos bits de software te pedirán que nombre, ya sabes, el archivo en cuanto lo crees. Cifras así. Entonces terminas con 1 millón de archivos sin título. No, eso es común. Pero vamos a ser súper increíbles, y vamos a renombrar nuestro archivo. Así que he hecho doble clic aquí, voy a darle un nombre Vamos a llamar a Scott, tú llamas al tuyo tu nombre, ¿de acuerdo? Entonces no vas a hacer Scott eCom. estás haciendo, no sé, Sandy o Jim, sea cual sea tu nombre para tu compañía. Y este es nuestro sitio eCom, y vamos a ir V uno porque no somos cavernícolas . No seas esa persona. Final. Final. Uno, nuevo. Te ríes porque lo haces. ¿Bien? Vamos. Realmente no importa si es V uno o A, B, C, algo así. Entonces, cuando tenemos que actualizar archivos antiguos, sí, es más fácil de encontrar. Hay una forma elegante de versionar dentro de Figma, pero eso va a funcionar para nosotros ahora. También puedes hacer doble clic aquí. Bien. Y puedes cerrarlo yendo a archivar cerrar o simplemente golpeando esta pequeña cruz en la esquina y ya no está. Estás de vuelta a tu casa. Y lo que encontrarás es que por defecto a los recientes, la mayor parte del tiempo Si no lo es, vete a recencia y verás ahí está él. Mira, e com. Entonces haremos clic en él, lo abriremos en una nueva pestaña. Volvamos a casa. Y lo que encontrarás es cuando tienes montones de archivos que se llaman sin título, puedes hacer clic derecho en ellos aquí en una Mac si no tienes un clic derecho sobre tu mouse, puedes presionar Control en tu teclado y presionar clic PCP, tendrás un clic derecho. Yo también lo hago en mi Mac. Pero puedes hacer click derecho y puedes cambiarles el nombre aquí. Realmente no importa donde lo hagas. Y estas cosas de aquí, estas son dolor en el trasero. Yo sólo voy a seleccionarlos. Ir simplemente arrastró una caja alrededor de ellos y había borrado Bien, estos son como acostumbrarse a los archivos figma. Simplemente los encuentro que hacen que mi vida se vea desordenada. Yo soy como, ¿Los hice? ¿De dónde vienen esos? Puedes dejarlos aquí, o puedes hacer clic derecho en ellos e ir a mover a la basura. Sí. Agarra estos dos también, y elimínalo solo para ordenar las cosas. Bien, volvamos a entrar en él, ya sea haciendo doble clic en esto o las pestañas ya abiertas. Y eso es todo. Hemos dibujado cuatro cajas blancas. Buen trabajo. Todos pensamos que Figma sería más emocionante Pero hemos aprendido lo que los marcos son como las páginas, y resolvimos qué es un archivo de diseño figma Es el tipo de cosas que lo alberga todo. Bien, vamos a hacer algunas cosas más en el siguiente video. Te veré ahí. 9. Los conceptos básicos de tipografía y fuentes en Figma: Hola ahí. En este video, vamos a cubrir algunos de los conceptos básicos del tipo. No vamos a pasar por cada configuración del menú tipo, sino solo por lo básico para ponernos en marcha. Sabes cómo cambiar fuentes y tamaños de fuente, ¿verdad? Solo te mostraré las peculiares de Figma. Bien, vamos a agregar algún tipo a nuestra página. Bien, así que comencemos la barra espaciadora para pasar por encima del comando o Control plus para acercar Barra espaciadora otra vez. Voy a agarrar la herramienta tipo. Está aquí abajo en la parte inferior, haz clic en eso. Notarás que las herramientas realmente comunes si pasas el cursor por encima de ellas, puedes ver que tiene en C al lado significa que puedo saltar a la herramienta de comentarios encabezando C, T para la herramienta de tipo, F para la herramienta de marco Entonces los realmente comunes simplemente se ciernen por encima de ellos, y verás que te dirá el atajo Entonces queremos T para la herramienta tipo. Hay dos tipos de booxes tipo. Hay uno en el que haces clic una vez y comienzas a escribir. Y éste va a durar para siempre y para siempre. ¿Bien? Entonces haces clic una vez, obtienes un cuadro tipo, bueno para encabezados, o botones, solo pequeñas partes de textos, y el cuadro tipo simplemente sigue adelante Es éste de aquí, se llama auto Con caja. Yo sabía ese nombre. El otro tipo de cuadro tipo es voy a hacer clic en el fondo, y luego ir a mi tecla T. Obviamente, si tienes tu cursor parpadeando aquí y presionas el atajo T, solo obtienes Ts. Bien, entonces voy a hacer clic en el fondo, luego presionaré mi tecla T, y voy a hacer clic en mantener y arrastrar una caja. Esto se llama caja de tamaño fijo. Quiero que sea exactamente de este ancho. Diferencia esta es cuando empiezo a escribir, se puede ver que se rompe al final de la línea. Mejor para copia corporal, cualquier cosa que necesite un salto de línea. Puedes convertirlos después. Puedo hacer click en este de aquí y decir, en realidad, ahora tienes un tamaño fijo, y puedo agarrar el punto. Voy a hacer click off en el fondo. Vamos por todo el camino y volvamos a hacer clic. Si le hago clic una vez, puedo agarrar el borde aquí, y ahora es un ancho fijo. Lo mismo con este de aquí. No tengo el texto seleccionado. ¿Qué funciona eso de todos modos? Lo hace. Realmente no importa cómo lo hayas seleccionado. Quiero que esto sea un ancho automático, más como un encabezado o un botón o algún tipo de pequeña parte del texto. Puedes convertirlos después. Cubriremos la altura Auto más adelante en la clase. Esos son nuestros dos cuadros de texto. Voy a deshacer para deshacerme de estos. Entonces en un Max, Command Z en una PC, es Control Z o en mi versión de escritorio, es Editar deshacer. Si estás en la versión del navegador, tendrás otra edición. Estará justo debajo de aquí. Puedes ir a Editar, deshacer. Lo mismo. Entonces voy a ir a deshacer algunas veces dt, dt, tantas deshacer. Vamos a golpear el Tiki y poner en nuestro logo para la marca. Ahora bien, si tienes un logotipo para la empresa que estás trabajando y existe, puedes usar el logotipo. Pero como que estamos al mismo tiempo, desarrollando una marca para esta app al mismo tiempo, vamos a usar solo textos simples. Todavía no vamos a entrar en el diseño de logotipos. Entonces se va a llamar al mío. Voy a usar Gorras. Voy a ir Scott o vamos Caps. Bien, vamos a mantenerlo plano para moverlo. Voy a hacer click off en el fondo. Usa mi herramienta de selección, la iba a mover aquí arriba. A continuación, queremos nuestro mensaje de marketing aquí. Voy a agarrar una herramienta de tipo, hacer clic y arrastrar hacia fuera, y recuerde que hacer clic y arrastrar nos da un cuadro de ancho fijo Sólo vamos a escribir mensaje de marketing. El mensaje de marketing va aquí. No te aburriré con pasar por todas las cosas de la fuente. Ya sabes cómo cambiar las fuentes. Pero el truco, vamos a cambiar el tamaño de la fuente, algo bonito y grande. Quiero conseguirlo para que se rompa en dos líneas para que podamos ver la altura automática. Por defecto, está tratando de hacerlo automáticamente. Puedes escribir algo. Son 24, es muy común agregarle otros ocho u otros cuatro. Vamos 28. Genio, Dan. Vamos. Qué es el 832. Lo que puedes hacer es ver estos pequeños iconos aquí. Termino haciéndolo bastante en este curso. Te voy a mostrar ahora a ver si pasas cursor sobre este ícono, este ícono Puede hacer clic en mantener y arrastrarlo. Si eres más una lengua afuera mirándola, yendo, ¿ese es el tamaño correcto? Tal vez algún espaciado entre letras. En lugar de tratar de escribirlo y hacer cosas matemáticas. Puedes arrastrar sobre uno de estos iconos. Ahí vas. Volver a 32. Entonces, en términos de fuentes, cuando estás haciendo una estructura alámbrica, cuando estás haciendo la alta fidelidad, por supuesto, pasa mucho tiempo escogiendo fuentes Cuando estás haciendo un marco de alambre, lo mejor es dejarlo como una fuente súper aburrida Algo que no va a ofender a nadie porque lo que quieres hacer es cuando estás haciendo una prueba con alguien, especialmente con los stakeholders cuando pueden tener una opinión sobre la fuente y eso no es lo que estás haciendo para una primera prueba Estás construyendo una maqueta para probar la mecánica de esta cosa. ¿Pueden hacer clic en los botones? ¿Llegan a donde necesitan ir? Bueno, no quieres volver y decir, oye, no me gusta esa fuente. ¿Bien? Así que apégate a las fuentes que son cosas sencillas que tienen no sé, personajes que no tienen carácter, como Roboto Lo siento, Roboto. O el predeterminado que viene. Ya sabes, el Inter es el predeterminado Figma. Entonces la gente usa eso mucho. Roboto es bueno. Sauce manda, la fuente que quieras, siempre y cuando sea no lo sé. Fuentes aburridas. Además, como Roboto, me gusta porque es aburrido Lo siento Roboto. Pero aquí tiene todos estos otros pesos. Tengo una negrita y una cursiva y todo tipo de otras cosas buenas para acompañarlo. Así que mantén tus fuentes simples. La otra cosa es cuando estás escogiendo fuentes, lo mejor es hacerlo en el dispositivo real. Te mostraré más adelante cómo previsualizar en tu teléfono. Cuando estoy trabajando en mi computadora, termino pasando años jugando con espaciado entre letras y el rastreo y interlineado. Es simplemente demasiado grande. Entonces, lo que puedes hacer igual que un hack es alejar el zoom hasta que tu teléfono se sienta del tamaño correcto. Literalmente, lo que estoy haciendo ahora es que cojo mi teléfono y me voy, Es un poco pequeño, 100 es demasiado grande, así que tal vez aquí arriba, puedo escribir. A lo mejor 75 es bueno. Aguantando el teléfono, todavía demasiado grande. Podrás resolver lo que hay en tu teléfono para darte que ves cómo es esto pequeño ahora? Estás como, bien, eso es demasiado pequeño. Pero si sostengo mi teléfono, es el tamaño adecuado para el teléfono. Bien, así que voy a ir un poco más grande en esto. El otro truco con cualquiera de estos campos aquí es, tengo 12. Estos números son bastante buenos para saltar entre cosas, pero lo que puedes hacer es simplemente hacer clic en 12 y solo usar tu flecha hacia arriba. C sólo sube en incrementos de uno. Si mantienes turno y presionas hacia arriba, va incrementos de diez Entonces estamos a los 38 , sube a 48. Pero si solo uso mi llave ra, solo tengo que hacer clic ahí dentro Eso funciona. Arriba y abajo. Entonces me parece que esto es por ahí, se ve bien. Este de aquí ahora necesita ser más grande, da clic aquí, pop, pop up pol shift, sube. Se puede ver porque tengo una altura de línea fija, 32, y mi tamaño de fuente es 53, se está poniendo un poco raro. Si necesitas volver a una altura de línea de automático, simplemente borra lo que hay ahí dentro y volverá a Auto. puede ver aquí se está exprimiendo de la parte inferior de mi cuadro de texto Realmente no hace la diferencia aquí, pero puedo arrastrarlo un poco más grande allá. La otra razón es que voy a ir a la alineación. No voy a pasar por todos estos. Ya sabes usar el tipo. Lo que sí quiero mencionar es que a menudo cuando estás tratando, digamos, ves cómo va el mensaje de marketing conseguido aquí en lugar del mensaje de marketing real. Especialmente cuando estás en una etapa realmente nueva de la aplicación, me gusta agregar cosas realmente genéricas como estas fuentes genéricas aburridas con títulos no ofensivos. Ellos saben a dónde va a entrar ahí el mensaje de marketing , pero si empiezo a usar no lo sé, mi propia creatividad para agregar mensajes de marketing aquí en esta etapa temprana de pruebas, alguien va a volver y decir, oye, no nos sentamos así. Esto llegó a ir a la redacción publicitaria. No, no, no, solo haz clic en el botón. Quiero ver si funciona. A menudo, voy a despojar cualquier cosa que cause algún delito o cause la retroalimentación incorrecta. El mensaje de marketing va aquí está bien. Necesitamos un par de cositas antes de que podamos seguir adelante y otras cosas que señalar. Si estoy arrastrando esto usando mi puntero. Si hago clic en mantener y arrastrar por ahí, ¿lo ves simplemente saltando? Es bastante práctico. Se puede ver ahí bordeando a la mitad de mi página. Puedo arrastrarlo hacia abajo. Esa es la mitad de la página. Oh, bonito. Voy a pegar eso ahí. Voy a copiar y pegar. Esto es otra cosa interesante sobre Figma y acercar Copiar y pegar, y estás como, ¿Qué pasó? En realidad, se pegó en la parte superior de la misma. Por defecto, pegará lo que hayas copiado, justo encima de la misma. Entonces parece que no lo has copiado. Pero ahora lo sabes, está bien. Bien, lo he copiado y pegado. Aquí es donde van a ir mis tomas de producto. Disparo de producto. Voy a hacer el más pequeño porque es más de un no sé por qué. Va a ser más pequeño. La otra cosa que hay que hacer es si quieres copiar y pegar, muchas veces lo que hago es mantener presionada la tecla de opción en mi Okon una PC. Lo tengo seleccionado. Estoy en mi herramienta de movimiento, sigue llamándola la herramienta puntero. La herramienta de movimiento, mantenga presionada esa tecla de opción en un Okon a PC. Ver las pequeñas flechas dobles que están apareciendo. Las flechas dobles significan cuando la arrastre. Tengo mi ratón abajo todo el tiempo. Tengo esa opción o Olkey abajo. Voy a hacer un duplicado. Lo mismo aquí. Quiero otro. Ahí vamos. Hay dos de ellos. Puedo pulir ambos, y todo lo que voy a hacer probablemente es simplemente hacerlos audaces. Y hacerlos un poco más grandes. Ahora, la tipografía aquí tiene lo básico. Si estás como, Oh, ¿dónde está el resto? Ahí está el resto. Aquí hay un poco de opciones, escribe ajustes, obtienes todas las cosas extra. Cubriremos diferentes partes del mismo en este curso. Pero aquí están las otras cosas que podrías haber estado buscando. Voy a asegurarme de que esté perfumado. Voy a asegurarme de que es todo mayúscula con mayúsculas. Ahí está ahí. Voy a hacer doble clic en este y decir, esta es mi B ahora, a estas alturas, y esta va a ser mi aprende más. Conoce más. Bien, creo que ya está. Mira lo que hicimos. Ponemos texto en la página. Bien, eso va a ser. Texto antiguo aburrido. Hagamos aburridas Cajas viejas en el siguiente video. 10. Rectángulos, círculos, botones y esquinas redondeadas en Figma: Atrás, hemos agregado rectángulos al video. Te voy a mostrar cómo hacer rectángulos y círculos. Haremos esquinas redondeadas. Es muy emocionante. Te lo prometo. Vamos a saltar. Bien, comencemos agarrando la herramienta rectángulo. Aquí abajo, es esta cosa. Es un rectángulo. Hay un montón de otras cosas. Yo hay una pequeña flecha al lado. Bien, hay un montón de otro tipo de herramientas de dibujo útiles juntas, pero vamos a comenzar con la herramienta rectángulo. Y lo que voy a hacer es que quiero una especie de imagen de marcador Es un rectángulo grande como viste al principio. Así que voy a hacer clic en mantener y arrastrar hacia fuera y es gris. Whoo. Pero también cubrió mi texto. Todavía está ahí. Mira, hola, estás ahí debajo. Entonces veamos algo llamado capas capas. Ya sabes lo que son las capas. ¿Cómo funcionan en Figma Hay un par de maneras de llegar a ello. Entonces te voy a mostrar un par de formas, solo para mostrarte todas las diferentes formas en Figma, no para engañarte, pero es un poco bueno conocer el tipo de formas principales de Y encontrarás el que mejor funcione para ti a tu nivel. Es fácil uno es hacer clic derecho en él y decir, no seleccionar la capa. Quiero mandar a atrás. Voy a decir enviar a la parte de atrás de las capas, y ya está ahí atrás. Voy a deshacer eso. El otro camino es por aquí en este panel izquierdo. Deberías ver el archivo. Podrías estar en la página uno, y deberíamos ver capas. La única otra cosa en la que podrías estar son los activos. Salta para archivar tus capas, esa es una página llamada confirmación, O llamada Checkout, una se llama features, y estamos en esta página de inicio. Dentro de aquí están todos los bits y puedes ver que es un orden de capas como el software de diseño más tradicional. El rectángulo está por encima de donde como una toma de producto. Necesito hacer clic en mantener y arrastrar el rectángulo, ver que hay líneas ahí. Dale una grieta a eso. Deshazlo si sale terriblemente mal. Puede arrastrar la toma del producto, hacer clic en Mantener, mantener, mantener y arrastrarla por encima del rectángulo. Eso también funciona. La forma en que quiero mostrarte es que estoy en la versión de escritorio, así que tengo el objeto File Edit view en la parte superior aquí. Si estás en la versión del navegador, estarías como, yo no tengo eso. El tuyo se esconde aquí. Archivo, editar objetos de vista. S? Son exactamente el mismo objeto ahí, objeto ahí. No importa. A menudo en esta clase, voy a subir por la cima aquí para encontrar cosas y estarás como, no la tengo. Es justo debajo de esta F aquí para Figma. Verás que puedo ir a Editar puedo ir a Objeto y puedo bajar para traer al frente, llevar a adelante. En realidad no puedo porque es calificación, es porque no lo tengo seleccionado, lo voy a deshacer, así que está en la parte superior. Entonces voy a dar click en el rectángulo. Entonces puedo ir a Editar. Estaba bajo Objeto. Puedes enviar backwood, que es solo bajar un nivel por lo que estará detrás del mensaje de marketing Quiero ir a enviar a atrás completamente en la parte de atrás. De nuevo, está exactamente en el mismo lugar, objeto U y hay enviar a atrás. ¿Bien? También dijiste que hay un atajo. Tantas maneras. Objeto, uso este bastante. Depende. Si estás listo para los atajos, este de aquí, el corchete está justo en tu teclado. Lo verás normalmente junto a tu Peki y traerás al frente Puedo ir corchete hacia adelante, corchete cuadrado hacia atrás, adelante, atrás, adelante atrás. No importa cuál uses. Pero en este video, quiero mostrarte todas las diferentes formas porque quiero darte la sensación que hay múltiples formas de hacerlo y no importa de qué manera termines eligiendo. Pero eso es todo. Voy a ir de una manera fácil a partir de ahora. Bien vamos a acercarnos aquí abajo, spa espacial, haga clic y arrastre, Command plus para acercar. Control plus en una PC. Agarremos nuestro arco para la herramienta rectángulo, arrastremos una caja, y voy a usar mi corchete porque somos elegantes con nuestros atajos, pero úsalos y voy a usar mi corchete porque somos elegantes con nuestros atajos, como quieras. Tengo un botón B ahora. Ahora, otro truco en figma es que si quieres seleccionar dos cosas, puedo hacer clic y arrastrar sobre estas dos o puedo hacer clic en una, mantener presionada la tecla Mayús en mi teclado, y hacer clic en la otra, y ambas han seleccionado Ahora quiero otro rectángulo. En lugar de dibujarlo, voy a hacer clic en éste una vez y usar mi copiar y pegar. cual termina poniéndolo justo encima, pero no te preocupes, ya sabemos, y eso va a ser todo . He estado hablando de mantener diseño fuera de este wireframe Los marcos Wi están destinados a ser súper solo genéricos. Pero no puedo calentarme por algunas cosas como esquinas redondeadas. Oh, me gustan mucho las esquinas redondeadas. Si haces click en este rectángulo aquí y acercas lo suficiente, verás los puntitos en la esquina. Puede hacer clic en mantener y arrastrarlos. Si no los puedes ver, que es si me alejo y lo tengo seleccionado y tienes tu cursor parpadeando encima de él. ¿Ves que no está ahí? te muestra en ciertos niveles de visión. Hay que estar bastante cerca para ver estos. Si quieres hacerlas manualmente, lo tienes seleccionado. Por aquí, bajo apariencia, tienes este llamado radio de esquina, y puedo escribir ocho. Éste, ya sea puedo arrastrarlo y ya ves que te dice que son ocho, depende de ti. Sostenga la barra espaciadora, mueva hacia arriba. Da click en éste también, y voy a hacer esto consistente escribiendo ocho también. Podrías decidir que en realidad radio de esquina, no quieres que sean ocho en todas las esquinas, quieres que una de ellas sea diferente. Mira esta pequeña opción aquí, expande los rincones individuales. Por el momento están todos a las ocho, puedes decidir esto abajo a la derecha. Ves que es la parte superior izquierda, arriba a la derecha. Lo tienes abajo a la derecha, puedo hacer esto 130. Simplemente significa que si me alejo, uno de ellos es diferente. También puedes hacerlo manualmente. Puedes mantener presionada la tecla de opción en una tecla Mac en una PC y también puedes hacerlas individualmente. ¿Puedes ver eso? Sólo uno de ellos se mueve por ahí. Bien, voy a volver a consistente, esquinas mezcladas. Voy a deshacerme de mixto y solo eliminarlo y escribir ocho sobre la parte superior y presionar Enter. Ahora, son todos iguales. Bien, estamos dibujando rectángulos con esquinas redondeadas. Dibujemos círculo. Aquí abajo está nuestro círculo. Era elipse, que es un atajo para O. Lisa parece un círculo Voy a presionar la tecla O de mi teclado y voy a arrastrar un círculo. Otra cosa cuando estás dibujando ya sea círculos o cuadrados o cualquier cosa, si quieres que no sea un óvalo, bien, bien. Aquí mantienes pulsada. ¿Qué clave es? Ya sabes qué clave es. Turno. Mantenga el turno mientras arrastra y obtendrá bloquear la altura y el ancho Entonces en algo sobre ese tipo de tamaño. Puedes ver los tamaños de la misma por aquí. El mío está a 32 por 32, aproximadamente por ahí. Realmente no importa. Voy a acercarlo, barra espaciadora y voy a agarrar la herramienta tipo porque quiero ese botón más. Entonces voy a agarrar el Tiki, voy a hacer click una vez, y solo voy a escribir un plus en mi teclado Font, voy a usar interim bold, está bien. Volver a mi herramienta de selección. Ahora bien, si quieres mover esto, vas a ser como, A, quiero poner esto arriba de este botón. Sí. A veces solo necesitas hacer click off en el fondo y luego arrastrarlo. En cuanto al tamaño de fuente, vamos a usar nuestro dulce shorku haga clic aquí y flecha hacia arriba F consígalo del tamaño correcto. Salta alrededor. Se trata de bloquear en píxeles. Eso está bien. Entonces sobre el tamaño correcto. Otra vez, recuerden, estamos en 400%. 60 tipo de trabajo para mí. Entonces ahora estoy como, Bien, eso se ve bien. El otro truco que quiero mostrarte es cuando intentas alinear algo, puede ser bastante complicado. Te voy a mostrar más exactamente más adelante. Pero arrastrándolo alrededor, trata de chasquear. Ya ves que es como, Oh, quiero estar aquí. ¿Quieres decir aquí? Estás como, no, no, no, justo en el medio. Entonces quiero darle un codazo. Entonces lo que haces es que lo tienes seleccionado, voy a hacer click off en el fondo, click a la vez y puedo usar mi tecla de flecha, las teclas, en mi teclado, solo para moverlo para algo así como llegar a donde quiero. Eso es bueno. Oh, ¿qué hace ese botón ? No preguntaste. Si estás lo suficientemente cerca de tu círculo, ves este dt y estarás como, ¿qué hace esto? ¿Estás listo? No, no, no, no, no, no. Eso no es totalmente tan útil, pero me hace feliz. De todas formas, me imagino gráficos de barras y gráficos circulares y. Bien. Alejemos el zoom. Voy a usar el atajo para ir. Zoom para encajar es uno que voy a tratar golpearte en la cabeza a medida que avanzamos por este curso. Es Comando cero o Control cero en una PC. No, es cambio a cero. No, no es ninguna de esas. ¿Comando cero? Oh, ¡Diablos! Mi cerebro se ha ido. Zoom para ajustar. Eso es lo que quiero. ¿Bien? Entonces el que acabo de mostrarte, Comando cero es ir al 100%. Eso está bien. Este de aquí me gusta mucho. Zoom para ajustar. Bien, y cambia uno. Eso lo sé. Bien, mantén presionada la tecla Mayús tanto en Mac como en PC y presiona una tecla, y simplemente encajará todo en tu ventana. Ahí vamos. Hacemos algunos rectángulos. Míranos. Muy bien, voy a seleccionar ambos y sólo una especie de mover eso por aquí Lo usaremos un poco más tarde. Va a ir en el medio aquí abajo. Y luego entraremos en el siguiente video. Vamos a hacer eso. 11. Cómo usar el color en Figma: Oye, ahí. En este video, vamos a pasar de esto a esto. Gris a este color. Verde azulado, verde, azul. En fin, vamos a ver los fundamentos del color dentro de Figma. No te saltes adelante. hay algunas cosas jugosas útiles Aquí hay algunas cosas jugosas útiles además de un pequeño atajo de buena calidad al final. Todo bien. Vamos a saltar. Bien, el color es fácil. Vamos a hacer clic en nuestro rectángulo gris. Es el color predeterminado para Figma y por aquí debajo de Phil, puedes hacer clic en este pequeño cuadrado de color aquí, y obtienes este seleccionador de color. Es posible que hayas usado el seleccionador de color antes. Si no tienes puntito aquí está el color que has seleccionado. Puedes hacer clic y arrastrarlo para elegir cualquier color siempre y cuando sea rojo. Voy a moverlo arriba a la parte superior derecha aquí y lo que puedes hacer es agarrar el deslizador de tonalidad y simplemente arrastrarlo. ¿Ves lo que le está haciendo al color? Di que quieres que sea un azul, puedes decidir yo quiero que sea más azul y quiero que sea un azul más oscuro, o quiero que sea un azul menos saturado. La saturación es de izquierda a derecha, arriba y abajo como brillo. Puedes escoger algo aquí que funcione para ti. Blanco y negro, es raro. Puedes usar estos abajo de abajo aquí. Estos son algunos colores predeterminados. O lo que la gente suele hacer es hacer clic en mantener y arrastrar arrastrar arrastrar arrastrar más allá de la esquina. Todavía tengo mi ratón presionado. Si lo arrastras más allá de la esquina, lo atasca en blanco completo y lo mismo con el negro, si lo arrastras hacia abajo de esta manera, lo arrastra completamente negro Hasta usted. Es un deslizador enorme. Esta es la diapositiva de transparencia. Voy a empacar este color aquí. Voy a arrastrar la transparencia hacia abajo, así que es un poco más transparente. Realmente no se puede decir ahora porque está viendo a través del blanco en el fondo. Vamos a moverlo por encima de todo esto y vamos a moverlo al frente en el panel de capas, de cualquier manera que quieras. Voy a usar el corchete hacia abajo por el piki. ¿Puedes ver que está glaseando y mirando a través de eso? A veces no es necesario tener esto abierto. Puedo tener esta seleccionada. Si quiero el respaldo de transparencia, ¿ puede ver que está en 47% Ahí es donde la arrastré en esa última ventana. Puedo escribir 100 e ingresar aquí. Voy a volver a ponerlo en la parte de atrás usando ese primer corchete, lo voy a volver a poner a donde debería estar. Voy a escoger un color. Es muy común usar azul o azul claro en la parte superior aquí. Voy a usar un verde azulado sin una buena razón. El truco aquí es simplemente usar un color. Trate de no llegar demasiado lejos en escoger colores para todo, especialmente en este iframe Recuerda, se trata de probar la mecánica de la misma, no realmente peinarla. Pero quieres Bien, así que elige un color que te guste. Ahora bien, el valor por defecto aquí abajo es este número hexadecimal, por lo que es un código de seis dígitos que representa el color en la web. Puedes cambiarlo aquí abajo a RGB. Si tienes un documento de especificaciones del manual corporativo, tienes que usar el color oficial de la compañía, puedes ingresarlo aquí. Es RGBA, que es rojo, verde, azul, y Alpha es la transparencia Puedes arrastrar ese deslizador o hacerlo aquí abajo. No importa. Otros que son útiles es CSS. Si eres más desarrollador y conoces los colores CSS, puedes teclearlos, o no lo uso mucho, luminante de saturación de Hue Yo uso saturación de tono y brillo. Donde encuentro esto bastante útil es, si quiero oscurecer esto, tengo que arrastrarlo aquí abajo, pero terminas yendo como, Wows zagueándolo hacia abajo, estás como, No, recto Se puede hacer clic en brillo. El brillo es hacia arriba y hacia abajo. Entonces lo que puedes hacer es entrar aquí e irte, ¿ves mi flecha? Sólo estoy usando. No puedes ver mis dedos. Simplemente puedes hacer click aquí, como hemos hecho muchos de los otros y simplemente arrastrarlo hacia arriba. Mantenga turno, y bromeará en grandes trozos. Cuán saturado está el color es de izquierda a derecha. Entonces, en lugar de menearlo de esta manera, puedes simplemente dar click en este de aquí e ir hacia arriba hacia abajo. Ves que va de izquierda a derecha. Lo mismo con el matiz. Quería ser un poco más azul. Va a subir arriba arriba, arriba, p, p, p, p, p, p. ahí tienes. Muy común, sin embargo, dejarlo en hex. Déjalo en diez. La otra cosa es que terminarás con un montón de colores abajo aquí abajo. Es como colores que ya has usado. Ahí está ese gris. Si quieres volver a ello, ahí está. Ahí está ese azul que acabamos de mezclar, así que podemos decirte o querer que sea ese color del blues desaparecido ahora porque no se usa en ninguna parte de esta página. Buena mecha Dan. Deshazlo, así vuelve. Puedo usarlo ahora y decir que eres de ese color. No me gusta. Tú esperas ahí. Este color voy a nosotros. La otra cosa que puedes hacer es usar Eyedrop atol puedes hacer click aquí y decir, quiero que el cuentagotas Lo bueno de la herramienta cuentagotas, puedes meterte en algo realmente metido arenoso. ¿Puedes ver? Al lado del icono ahí, hay esta pequeña se ve una versión un poco ampliada de la misma. Di si solo quieres este extraño color gris en el borde de ese tipo ahí. Solo puedes verlo cuando realmente acercas el zoom. No, ni siquiera puedes verlo cuando acercas el zoom. Ahí está. Gran selección de colores de imágenes. Te voy a mostrar el atajo aunque es que voy a hacer click en esto. Esto lo hago muy a menudo. Voy a sostener Shift para hacer clic en ambos. Los conseguí a ambos seleccionados y hago eso deshacer el movimiento. Mantenga pulsada Mayús haga clic en ambas, use mi atajo eyedropol, que soy yo en su teclado, la letra I, no su Puedo hacer click aquí y ambos se convertirán en ese color. Realmente no importa dónde lo hagas. A veces es difícil hacer clic en las cosas. Si encuentras que es muy difícil hacer clic en las cosas, la forma más fácil es simplemente acercar un poco y decir, A ahora es más fácil hacer clic. Puedo entrar aquí, usar mi herramienta cuentagotas. Ahí está. Todo bien. Voy a conseguir un turno uno para mostrarme todos mis marcos todo en un solo documento. Puedes cambiar el color del marco del teléfono que tenemos aquí, aquí abajo, puedes decir que está lleno de blanco, que es si si, si, puedes cambiarlo a otra cosa. A algunas personas les gusta que sea de color gris claro. Vamos a dejarlo blanco por el momento. Los marcos se pueden colorear igual que rectángulos. Son muy similares. Lo que tal vez quieras cambiar o no puedo recordar el valor por defecto es. Es el color del tema. Básicamente, hay un diseño muy blanco de mi interfaz, todo está pizca. Los fondos son de color gris claro. Puedes entrar en esta pequeña F aquí y puedes ir a preferencias. Se puede decir, en realidad, quiero que el tema sea claro u oscuro. tema de tu sistema en este momento, el mío lo está obteniendo de mi Mac. Mi mac diciéndolo, es de día, vas a usar uno ligero y es de noche cambia a negro, lo cual es raro Podrías obligarlo a ser negro. No cambia el documento, solo cambia la interfaz. También significa que cuando creo un nuevo documento, creo un nuevo archivo de diseño, ves que el fondo es negro. Si agarro mi herramienta de marco y dibujo otra cosa, estamos en la misma posición, pero la interfaz se ve bastante diferente. Es sólo una versión negra oscura. Depende de ti. Si lo haces cambiarlo a oscuro y estás como, pero el fondo sigue siendo de color claro. puedes tener nada seleccionado, click en el fondo y subir hasta aquí y decir, en realidad, quiero que esté oscuro. No puedo recordar cuál es el valor por defecto. El tuyo será diferente dependiendo de tus preferencias del sistema. Entonces voy a obligarlo a que sea ligero y que permanezca en modo de luz para el resto de esta clase, pero puedes cambiarlo. Tema, ligero, agradable. Otra cosa que es útil es dependiendo de tu visión y de tu pantalla, puedes ir a ver y bajar a escala de interfaz. Se puede decir, en realidad, me gustaría hacerlo más grande o intentar decodificar esos jeroglíficos. No es útil Figma Pero si hago eso, ¿puedes ver todo en los paneles se hace más grande, y puedes ir cada vez más grande y más grande y más grande Tienes una gran pantalla envolvente masiva, podría ser mejor solo tener la interfaz más Vaya, ¿debería dejarla esta talla? Lo dejaré de este tamaño para el video veas lo que estoy haciendo un poco más fácil. Una última cosa es que esto me está volviendo loco. ¿Te está volviendo loco? ¿No te importaba? Esto no encaja en todas partes. Para que pueda arrastrar esto un poco más grande. No lo sé. Tiene que ser más grande. Te voy a mostrar un pequeño atajo. Un poco de aguinaldo por esperar hasta el final. Si arrastro este lado y quiero que esté igualmente fuera de ese lado, qué puedes hacer en vez de solo arrastrar un lado, y luego el otro, puedes sostener un dulce atajo Prometí que no había atajos, pero ya terminamos mucho. Mantenga pulsada la opción contador mac. Ok contador PC, y ves que lo hace desde ambos lados. Ooh. Fancy. Verás, valió la pena andar por ahí haciendo cuadrados de colores. Bien, eso es todo. La gran comida para llevar aquí realmente es, no uses mucho color. Intenta mantener tus marcos y realmente simplistas, usa gris, usa azul No intentes volver a empezar a codificar por color las cosas. No queremos distraer de nuestro objetivo de esta prueba y frame Tan solo prueba la mecánica. ¿La gente hace clic donde creemos que van a hacer clic? ¿Es este el tipo de cosas que el cliente quiere sin fuentes, sin colores, sin estilismo? Bien, eso es todo. Te veré en el siguiente video. 12. Trazos y actualización de colores por defecto en Figma: Hola ahí. En este video, vamos a ver el trazo, que es la línea dentro de Figma, todas las cosas que puedes y no puedes hacer con él Además, te voy a mostrar cómo cambiar el valor por defecto. Cada vez que dibujas un rectángulo, coincide con un estilo anterior que hemos hecho. Todo bien. Vamos a saltar. Todo bien. Vamos a agregar un trazo. Trazo es solo otra palabra para una línea. Voy a hacer clic en este rectángulo grande en la parte superior aquí y por aquí, por defecto, cuando dibujamos algo con una herramienta rectángulo, obtenemos un relleno, pero no trazo. Podemos agregar un trazo pulsando el pequeño botón más. Que te den un pequeño trazo alrededor del exterior. Por defecto, es un trazo de un punto o lo llaman el peso. Así de gruesa es la línea. Puedo hacer click aquí y usar mi flecha hacia arriba o teclearla. Voy a poner algo bonito y grueso para que lo veas tres. Puedes deshacerte del trazo haciendo clic en este pequeño menos, agregarlo de nuevo, lo obtienes. Obviamente cambiar el color de la misma. Si quieres pastar, solo quieres un gris más claro, solo mantenlo arrastrado hasta este borde aquí y encuentra algo aquí o simplemente hazlo negro, ciérralo Digamos que pasas algún tiempo, estás como, en realidad, ¿quiero que esto sea qué? Tres. Pasa algún tiempo, estás como, me encanta este color verde. Bueno, no te encanta, pero tienes que usarlo una y otra vez. Si voy por aquí y digo, herramienta rectángulo, que es archy, y arrastro otra caja, estás como, no tiene las esquinas redondeadas, no tiene el color, no tiene el trazo. Podría usar mi colirio en la herramienta, hacer clic en ella, ojo por el colirio en herramienta Bam, agarré parte de ella, pero no las esquinas redondeadas. Simplemente agarró los colores. Lo que puedes hacer, es cambiar los valores por defecto. Digamos que quiero que este sea el valor predeterminado para cada vez que dibuje un rectángulo. Lo que puedes hacer es simplemente tenerlo seleccionado, subir a la F aquí arriba, bajar a Editar y ahí está esta de aquí dice, establecer las propiedades predeterminadas. Tienes que tenerlo seleccionado primero o lo que quieras robarte todas las propiedades. Das click en eso. No pasa nada excepto que aparece abajo por la parte inferior. Ahora voy a hacer click off en el fondo, golpeé mi arco para el rectángulo y dibujo otra cosa. Mírennos. Restablecemos nuestros valores predeterminados. También hacer es, digamos que hacemos algo diferente para los botones. Ese es el valor predeterminado para cada vez que usas una herramienta de rectángulo, pero obviamente hay diferentes casos de uso, hemos dibujado nuestra imagen de marcador Primero es un botón. Digamos que el botón es diferente y tenemos un color diferente y tenemos un trazo diferente alrededor del exterior. Es espantoso, pero tenemos que moverlo por aquí. Lo que puedes hacer es que puedas decir y probablemente lo viste ahí dentro en el mismo lugar debajo de la F, ve a editar. Puede copiar las propiedades y pegarlas. Si estás haciendo esto mucho, ahí hay un atajo, así puedo copiar las propiedades y tú, amigo mío, vas a estar si editas pegar propiedades, y voy a agarrar todo desde ahí y pegarlo ahí. Impresionante. Yo no quiero hacer eso, pero ahora ya sabes cómo. Bien, deshacer, deshacer y hacer. Esos son los impagos. Veamos dibujar algunas líneas. Hemos puesto líneas alrededor del exterior. Dibujemos una línea por su cuenta, se esconde debajo de la herramienta rectángulo. Ahí está la herramienta de línea. Va a hacer click en eso. Voy a poner en marcha aquí, haga clic en mantener y arrastrar arrastrar, arrastrar, y bajarlo hasta la esquina inferior aquí. Quiero que tenga el mismo peso, así que voy a hacer click aquí y subir dos, así que son tres. Peso, y no lo alineé muy bien. Eso lo haremos en un segundo. Volver a la herramienta de línea, que es la clave l. Haga clic en mantener y arrastre de abajo a allí. Es muy común que Ug siga cambiando eso. Voy a decir, dos, tres, podríamos copiar y pegar propiedades. Hagámoslo solo para practicar. Doy click en esto. Voy Comando Opción C en una Mac. Eso es Control Alt, C, y da click en este otro e ir Comando Opción V, pegará la propiedad. Usa esa carga. De nuevo, esto es demasiado tiro eres como, Hombre, dijo que no hay atajos, espera demasiados atajos. Te mostré el largo camino. Puedes cerrar tus oídos cuando empiece a hacer atajos. Bien, así que eso es bueno. Excepto que lo estropeé, así que voy a acercarme. Comando plus plus plus. Barra espaciadora, arrástrala hacia afuera. Puedes hacer click sobre él una vez en esta línea aquí. Si hago clic y lo arrastro, arrastrará todo el asunto. Lo que quiero hacer es hacer doble clic en la línea y obtengo los dos puntos al final. ¿Puedes ver? Si hago clic en él, se vuelve a círculos y consigo los pequeños puntos finales de la misma. barra espaciadora se mueve hacia abajo si no hago clic en el fondo Yo hago click en él, estoy como, voy a mover la plaza. Termina haciendo cosas raras. Entonces yo hago doble clic en él, puedo decir y barra espaciadora, esa se ve bien Este necesita trabajo. Haga doble clic. Aquí vamos. Bien, entonces tenemos un par de líneas en las esquinas. Para salir de eso, necesitas hacer click algunas veces en segundo plano solo para salir de este modo aquí. No es como tienes que hacer triple clic. Eso es lo que hay que hacer. Todo bien. Tenemos nuestras líneas por ahí. Hagamos nuestro menú de hamburguesas. El menú Burger es lo común en la navegación para un teléfono móvil. Vamos a agarrar alky para la herramienta de línea o recorrer el largo camino. Puedes recorrer totalmente el largo camino. Donde sea que estés listo, aquí está el alky, voy a hacer click y arrastrar hacia fuera. Ahora bien, es bastante bueno para chasquear, pero si haces lo que quiero decir chasquido es mirarlo. Realmente quiere ir recto. Te quitas un poco, es fácil recuperarlo. Lo que puedes hacer es como lo hicimos con el círculo recuerda cuando arrastramos hacia fuera en el círculo, mantuvimos turno, lo bloqueó en el ancho elevado, hiciste lo mismo con una línea, que alky, click y Si mantengo pulsado el Shift, el momento va a cualquier parte, si mantengo presionada la tecla Shift, verás que la bloquea en ángulos de 90 grados, ángulos 45 grados incluso. Eso es práctico. Consígalo a la talla que quieras. Nuevamente, cuando pronto probamos en un teléfono real, eso es difícil saber qué tan grande debería ser la media de la hamburguesa. Básicamente sólo tres pequeñas líneas. A mí me gusta llamarlo sándwich Nav. Nadie más lo llama sándwich nav, pero la mayoría de la gente se refiere a él como una hamburguesa. Voy a hacer zoom en un poco. Veamos algunas cosas más de líneas. Queremos tres de ellos. Puedes copiar y pegar usando Comando C, Comando V o Control C, Control V. Conocemos nuestro atajo de suite. Ahora recuerda, mantén pulsada la tecla de opción en una Mac, podemos una PC y podemos duplicarla. Volvemos a hacer lo mismo. hacer un atajo más. Cierra las orejas si estás como, no más. Todo bien. Uno más. Para aquellos de ustedes que todavía están por aquí, mantenga presionada la tecla de opción y arrástrela hacia afuera. Lo que puedes hacer ahora es que estás como, quiero volver a hacer lo mismo. Simplemente duplicarlo, la misma cantidad, misma distancia. Mantienes Comando en una Mac, Control en una PC y una D. Eso duplicará o volverá a hacer Comando D o Control D. Es realmente útil. Puedes seguir adelante, genial para listas y esas cosas. Cada vez que estás arrastrando algo, digamos, es una lista para esto un poco Voy a primero que nada, tengo que duplicarlo. Estás como, yo voy a hacer eso. Entonces recuerda comando o Control D, para hacerlo de nuevo. Es genial para construir pequeñas listas como esa o cuadrados o círculos o puntos. Tenemos a estos tipos. Tenemos que mirar algunas cosas avanzadas de trazos. En realidad no. Vamos a conseguir lo voy a subir de tamaño sabio a dos, solo para que lo veas un poco más fácil. Con este top, a esto se le llama tope trasero. Es un nombre desafortunado, pero es la línea que viene y apenas termina aquí. Tienes otra opción. Haga clic en esto. El trazo aquí. Este pequeño panel de trazos. Tienes este punto de inicio y fin y aquí empatan un montón de cosas. A mí me gustan las flechas. Ahí vas. Si quieres deshacerte de la flecha, presiona deshacer. Quiero que el otro extremo sea una flecha. Ahí vas. Tienes algunas cosas básicas aquí. El que quería mostrarte es que no sé por qué baña. Este tope trasero al final de aquí, se puede decir, en realidad, yo quiero que sea ya sea, tengo que desplazarme un poco hacia abajo. No puedo verlo del todo en mi monitor todos modos, hay redondo y cuadrado. Voy a decir redondo. ¿Se ve que redondea el final? A mí me gusta más. Esta de aquí, la última opción es que puedes hacerlo cualquiera de las dos. Hace ambos extremos. También hay uno cuadrado. Lo que quiero mostrarte es básicamente la línea, ¿ves que está esa cosita azul lanzando por el medio? Ese es el trazo real. Entonces le pones un peso y puedes ver que la pequeña línea azul se quedará pero las líneas azules en el medio y simplemente se expande a cada lado. Si hago gorra cuadrada, echemos un vistazo. Se puede ver empuja la línea en un poquito y va cuadrado en el extremo. No uso eso muy a menudo. La gente pregunta. Está ahí, pero uso bastante la tapa redondeada para suavizar los bordes de los trazos, es posible que quieras buttcap Voy a seleccionarlos a todos. Este es un buen punto. Puedes ver aquí dice mixto. Verás mezclado por todo el lugar cuando hayas seleccionado varias cosas. Solo estoy en mi herramienta puntero, arrastre la caja alrededor de los tres de estos. Es decir que el punto de inicio es, es una mezcla de gorras a tope, tapas redondeadas , y tapas cuadradas, no sabe qué decir, solo escribe mixto. Dice mixto, no está seguro de qué mostrar. Voy a decir todos ellos abajo por aquí, redondos. Y sólo se lo hice a uno de ellos. Eso es raro. Redonda. Va mal. Este es un bicho raro. Normalmente no hace esto cuando lo enseño. ¿Qué está mal? Me estoy rindiendo. Lo que pasa con creo que es la tapa cuadrada, han cambiado la forma en que lo hacen. Cuando hacen la tapa cuadrada , solía sobresalir. Ahora la han metido, así que la tapa cuadrada, la línea termina siendo del mismo tamaño Pero cambió el ancho de mi trazo real. No tienes sentido, Dan. No te preocupes. No vas a hacer eso con demasiada frecuencia, pero es un bicho, y lo dejaré en el curso porque podrías toparte con él también. Rara, confusa e incluso abajo el instructor está un poco raro por ello. Yo sólo los rehago. De todos modos, el objetivo principal aquí es mirar la diferencia entre la gorra de extremo plano, gorra a tope y la gorra redondeada. Todo voy a ir a cambiar uno para ver todo el asunto, y voy a seleccionar todos estos, y muchas veces solo uso mi rakey para moverlos porque es difícil arrastrarlos del tamaño Es como chasquidos alrededor. Estás como, no, no, hacer D. me gusta conseguirlo donde quiero esté y luego solo usar mi rastrillo para taperoni Todo bien. Vete tú. Tenemos un menú de hamburguesas o un sándwich de navegación móvil o nav. Empecemos eso como una cosa. Todo bien. Sólo voy a mover esto aquí arriba. Usando mi rakey otra vez. Oh, bonito atajo para ti es que ya lo hemos hecho antes. Cuando estoy usando mis rastrillos, solo lo doy un empujón. Si mantienes turno mientras lo haces, lo hace en diez veces por diez. Entonces, en lugar de mover un píxel hacia arriba y hacia abajo, si mantienes shift y usas tus rastrillos, lo hace por diez píxeles Cosas que uso que olvido que hago. Ahí vas. Tú también lo sabes. Todo bien. Eso es. Trazos y mirando los colores predeterminados dentro de Figma. En el siguiente video. 13. Edición de objetos y cómo escapar en Figma: Oye, ahí en este video, te voy a mostrar esta cosa. Se llama modo de edición de objetos. Puede que ya te hayas quedado atascado aquí. Te voy a mostrar para qué sirve y cómo escapar de él. Ver líneas estropadas Quiero mostrarte desde el principio de la clase esto. Vamos a entrar en más avanzado más adelante. Pero la gente se queda atascada desde el principio. Si eres un doble clicker, probablemente ya estés aquí. Puede que ya hayas descubierto tu salida. Pero si tengo un objeto, y si eres un doble clicker y haces doble clic en cosas que estás como, ¿qué está pasando ¿Cómo salgo? Cómo salir es solo hacer doble clic en el fondo. Hagámoslo con un nuevo rectángulos. El arcado para la herramienta rectángulo, dibujarla. Por defecto, vuelve a la herramienta de movimiento. Haz doble clic en él y estás dentro de él, estás como, ¿qué es esto? Significa básicamente cuando no estás en modo de edición de objetos, agarras las esquinas del rectángulo y hace cosas rectangamente. Se ve obligado a ser un rectángulo. Al hacer doble clic en él, entro de ese objeto y puedo destrozarlo. Ya puedo agarrar la esquina . Se nota que los bordes cambian de un cuadrado a un círculo. Mira esto. Mira, lo hemos destruido. Fuera ahora, y ahora ya no está haciendo bits de rectángulo. Tienes dentro de este objeto y lo has editado. Se llama Modo de Edición de Objetos. Puedes hacer algunas otras cosas geniales. Ver Doble clic Ir adentro. Puedo dar click en esta línea aquí. Voy a hacer clic en línea, Eliminar en mi clave. Me he deshecho de esa línea, que se ha deshecho del relleno. Puedo decir, deshazte de esa línea y puedes empezar a destruir esta cosa y empezar a separarla . Ya no es un rectángulo. Esto puede ser útil más adelante comenzamos a dibujar nuestros propios íconos. Voy a deshacerlo para volver. Pero ese es el modo de edición de objetos. Ahí también terminamos con esta línea. Y hicimos doble clic en la línea y estamos como si tuviéramos los puntos Estamos en modo de edición de objetos. La manera de saber también es que la línea no tiene las rayas en ella. Esta cosa de aquí abajo aparece. Mira esto. Duplicé doble clic en esto por aquí. Ves que esto no estaba ahí antes, haz clic en off, haz clic en. Dice: Oye, ¿quieres perder el tiempo con la mudanza? ¿Quieres un material de herramienta de lazos? Vamos a hacer el Shape Builder. Haremos todas estas herramientas más adelante. Puedes salir de ella haciendo clic en la cruz oficial o si estás en ella, simplemente haz doble clic en el fondo. Ir al modo de edición de objetos y donde la gente se pierde desde el principio. Bien, eso es. Te veré en el siguiente video. 14. Herramienta de escala vs. selección en Figma: Hola. En este video, vamos a ver la diferencia entre la herramienta de movimiento y la herramienta de escala. La herramienta de movimiento es lo que hemos estado usando hasta ahora. Voy a cambiar el tamaño de esto, y simplemente se vuelve más grande, pero no es lo que queremos. Queremos escalarlo. Entonces vamos a usar la herramienta de báscula, ¿de acuerdo? Selecciónalo todo, y va a hacer esto. Ambos tienen su lugar. Déjame mostrarte cómo funcionan ambos. Y nos perdemos un poco, pero lo arreglamos. Está bien. Vamos a saltar. Para empezar, quiero agregar el trazo alrededor estos botones, así que voy a agarrar esto. Ve a aquí, ve a editar, y voy a decir copiar propiedades, o puedes usar un atajo y voy a seleccionar ambas. No del tipo, solo quiero dos pequeños rectángulos y voy a usar el Comando Shift V o Control Shift V en una PC Todo bien. Figma por defecto funciona la manera que administras. Selecciono en esto. he agarrado a los dos. Tanto el texto como este botón aquí y estás como, quiero sacar esto un poco. Y tal vez redimensionarlo un poco. Pero digamos que quiero que se haga más grande. Digamos que este de aquí, yo soy como, A, eso es demasiado grande. Necesito hacerlo más pequeño. Reloj. La fuente no se hace más pequeña. Redimensiona rectángulo, pero nada dentro de él. Lo mismo con el trazo de aquí abajo. Si quiero que todo este botón sea más grande, mira. Si lo arrastro más grande, estás como, el trazo es del mismo ancho. El texto es del mismo tamaño, como, ¿cómo lo hago entonces? Quiero que todo sea más grande. Ah turno. Como que lo escala proporcionalmente para el rectángulo, pero la fuente sigue siendo del mismo tamaño Entonces vamos a usar la herramienta de escala. Alternarás bastante entre la herramienta de movimiento y la herramienta de escala en este curso. Voy a agarrar escala y eso va a hacer lo que queríamos hacer. Escala tanto el trazo la fuente y el rectángulo juntos. Lo hace proporcionalmente. Voy a deshacer eso porque quiero hacerlo a esto. Voy a seleccionar a ambos. Voy a ir a mi herramienta de báscula. Ya se le incumplió. Ahora puedo ver que te haces un poco más pequeño. Se ve que se está reduciendo la cruz, que es una fuente o el plus, y voy a mover eso aquí En realidad, quiero un trazo por fuera. Hagámoslo al final. Se trata más de la escala versus trazo. Necesitarás alternará un poco entre los dos. Fuentes. Lo hemos hecho si hago clic aquí, puedo jugar con mi tamaño de fuente. Doble clic dentro de la caja tipo. Digamos que quiero hacerlo más grande eres como, oh, si. Pero no te preocupes, hay un atajo fácil súper increíble para escala, que es claramente S para escala. No, S es para la herramienta de corte, que nunca, nunca uso. Es K sin una buena razón. V es la herramienta de movimiento, mira abajo abajo aquí, V y K. Hablas entre esas bastante. ¿Lo ves cambiando abajo por aquí? K, VK. Yo estaría en K por escala puedo decir, bien, una más grande. Esta cosa de aquí, quiero seleccionar todo esto. Estoy en mi herramienta de báscula. Puedo decir, A cambiando mi sketol. Voy a seleccionar todo esto y simplemente bajarlo para que sea más pequeño. De alguna manera no entendí eso. Agarra todo. Entonces, ¿bajarlo? ¿Qué te pasa? ¿Qué le hice a este tipo? Echemos un vistazo. Está trabajando. Mm. Por favor, sostenga. Bien, estoy de vuelta. Sé lo que hice ahora para romperlo. El tuyo probablemente esté operando fi. Te voy a mostrar por qué el mío está roto. Es porque te estaba enseñando algo antes y podrías toparte con esto de todos modos. Mantengamos esto en el curso. Esta línea de aquí, ¿puedes notar la diferencia entre estos dos? Este de aquí tiene esta caja alrededor. El motivo es porque cuando te estaba enseñando cómo entrar en él, hacer doble clic en él, y moverte por ese lado de ella, te mostré la manera equivocada de hacerlo es este reloj. Si agarro este, entonces tú. Agarré el rectángulo e intenté escalarlo. Terminé poniendo una caja alrededor ella, en lugar de ser una línea. Ahora es una línea dentro de un rectángulo. Entonces, ¿qué pasó cuando agarré la cabeza cuadrada para demostrar la manera equivocada de hacer las cosas? Normalmente no lo hago, así que por eso me asustó un poco ya que estaba perdido No vamos a entrar demasiado en cómo solucionarlo. Es realmente complicado para temprano en el curso y no realmente útil. Sólo podemos copiar y pegar. Tengo otro de estos, voy a alargarlo y voy a demostrar que obtienes un bono porque nos perdimos. Lo que voy a hacer es ir por aquí y decir darle la vuelta a este y voy a hacer estallar eso en la esquina. Cuando lo esté arrastrando , vamos a hacer click off en la parte de atrás. Haga clic y arrastre la línea. Terminamos poniendo una caja alrededor de ella como lo hicimos nosotros. Mira esto. Si hago clic en mantener presionado y arrastre esto, causa esos problemas cuando estamos redimensionando. Intenta no intentar arrastrar los bordes de estas cajas porque podría causarnos un poco de problemas. Si necesita editar la línea, asegúrese de entrar en modo de edición de objetos haciendo doble clic en él y luego moviéndola alrededor en lugar de arrastrar los cuadrados por el exterior porque causa ese problema Bien, ese es el problema. Así es como arreglarlo. ¿Dónde estábamos? A, selección versus escala Ojalá ahora pueda seleccionar todos estos. Ve a mi atajo súper dulce, que es K. Lo tienes, y ahora debería poder escalar esto arriba y abajo. Y el trazo viene junto con la fuente viene a lo largo. Todo escala. Volver a la herramienta de movimiento, que es probablemente la herramienta más común, recuerda, es que no tengo nada seleccionado. Vamos a golpear V en el teclado. Ahí vamos. Atajos o utilizar el largo camino. Realmente no importa. Esa es la diferencia entre usar la herramienta de movimiento y usar la herramienta de escala. Cambiarás entre los dos todo el tiempo. Genial para fuentes. Bien, bájalo. Ahí vamos. Fuente más pequeña. Todo bien. Eso es. Te veré en el siguiente video. Tratemos de no perdernos demasiado en el siguiente, Dan. Todo bien. 15. Marcos vs. grupos en Figma: Y en este video, vamos a mirar frames versus grupos. Los hemos usado a ambos. Bueno, al menos ya sabes lo que es un grupo . Este es un grupo de aquí arriba. Simplemente mantiene las cosas juntas y puedo aplaudirlas y moverlas. Hace cosas de groupie. Sin embargo, marcos, súper especiales. Ellos agrupan, pero pueden hacer cosas divertidas como esta. Mira, se está pegando a las esquinas. Puedo hacerlo más pequeño y puedo acortar cosas. Los marcos tienen poderes especiales. Como grupos, y quiero presentarlos bastante temprano en el curso si eres como, hombre. Después de este video, todavía estás un poco confundido acerca de los fotogramas. No te preocupes. Presentarlo antes para que no sea solo un gran fenómeno más adelante en el curso porque te encontrarás muchas plantillas y trabajos de otras personas que están usando marcos en lugar de grupos, estarás como, ¿por qué? ¿Por qué? Vamos a cubrir algo de la Y. Ahora, vamos a saltar. Empecemos dibujando algunas formas de este lado. Vamos a agarrar la herramienta rectángulo. Dibujaré un rectángulo y mantendré el turno, así que es un cuadrado perfecto. Hagamos el polígono, que es triángulo, hagamos también una elipse Aproximadamente del mismo tamaño. No tengo que serlo. Voy a acercarme. Voy a decir, todos ustedes no tienen un derrame cerebral. Seleccionaré en ambos y diré que no tienes ningún radio de esquina sin ninguna buena razón. Solo quiero formas simples. Tenemos tres formas y puedo alinearlas sin una buena razón. Baje, siga adelante. Seleccionemos los tres de estos y puedo hacer clic derecho en él y decir grupo. Comando G, Control G en una PC. Agrupación realmente común. La agrupación funciona, como te imaginas. Puedo hacer click off en segundo plano ahora y ahora puedo hacer clic y arrastrar todos estos porque están en un grupo. La otra cosa a tener en cuenta es que puedes ver por aquí en mi panel Capas, recuerda que vas a estar en archivo, página uno, y estamos en esta página de características, ahí está esta llamada va a llamar a este iconos. Puedes cambiarle el nombre por aquí. Dentro de aquí, a veces colapsaron, a veces están abiertos. Aquí hay un pequeño Chevron. Puedes abrirlos. Dentro de mi grupo, hay una elipse, un polígono y un triángulo Excelente. Grupos. desagruparlos haciendo clic derecho y diciendo desagrupar el grupo se va y es solo la forma sentada aquí ahora todos por su cuenta Deshacer eso porque quiero ese grupo. Son íconos. Abajo. Todo bien. Te voy a mostrar la diferencia entre un grupo y un frame. Entonces lo que voy a hacer es que voy a duplicar esto. Tengo dos de ellos. Estoy usando mi arrastre Alt opcional. Voy a desagrupar estos. Es mi grupo arriba, llamado íconos, y estas son mis tres elipses. Voy a mover estos por encima de esto en el panel de capas solo para que sea más fácil de ver. Ahí están mis íconos, y luego tengo a estos tipos simplemente pasando el rato. Lo voy a hacer es mantener turno, agarrarte a ti, a ti y a ti. Todos están seleccionados. En lugar de decir grupo, vamos a decir selección de fotogramas. Tenemos un atajo similar. Te vas a ir oh, se ven muy similares. Como en esto es todo simplemente chupar juntos, puedes moverlos por ahí. Este de aquí que ahora está en un marco, no en un grupo. Puedo moverlos por ahí. ¿Cuál es la diferencia, Dan? Bueno, en cuanto a agrupar cosas, nada realmente. Se puede usar un marco o un grupo. En figma, usan marcos para todo en lugar de grupos ¿Por qué? Porque son como grupos, pero obtienes algunas características extra de bonificación. Voy a cubrir un poco en este video, tal vez solo un teaser de cómo funcionan los frames, principalmente porque si estás abriendo la plantilla de otra persona, usa alguien más eres tú o abriendo el proyecto de otra persona, pueden usar marcos para todo Eso es lo que me confundió cuando empecé por primera vez. Yo estaba como, ¿Por qué hay marcos en todas partes? Ellos sí digo cosas raras, pero realmente hacen algunas cosas poderosas. medida que vayamos por el curso, aprenderemos más sobre ellos, pero quiero presentarlo temprano que no seas como el carajo de los marcos Fresco. Hablemos de marcos. Por aquí, se puede ver la diferencia en el icono. Como puedes ver los grupos están representados por este pequeño cuadrado punteado y marcos de esta pequeña cosa hash de símbolo de libra. Tiene una obra de la misma manera. Mira, hay cosas dentro de ella. Algunas de las diferencias fundamentales, mira esto. Si entro en mi grupo. Entonces este es mi íconos uno. Vamos a llamar a éste grupos para que sea más fácil. Dentro de aquí, si hago doble clic para entrar, este es el modo de edición de objetos, vas dentro de él. Yo le hice doble clic. Entonces dentro de mi grupo, o simplemente puedes pincharlo por aquí. Voy a borrar la elipse, borrar el polígono, borrar el rectángulo, y el grupo se va No sirve de nada un grupo sin nada dentro de él. Deshacer eso. ¿Qué pasa con el marco? Si voy dentro de mi marco, borre esto, borre esto, borre esto. El marco sigue ahí. Esto es raro. Es por esto que terminarás con muchos marcos vacíos. Estás como, ¿para qué carajo es un marco vacío? Yo puedo existir por sí sola. Esto nos lleva de nuevo a cómo empezamos en este curso. Mira esto. Recuerda cuando sacamos nuestras páginas telefónicas. Estaban usando la herramienta de marco aquí abajo que usamos. Aquí abajo, usamos la herramienta de marco, la FK. Un marco puede existir por sí solo con cosas dentro de él o no. Los grupos no pueden. Esa es una de las ventajas de tener un marco. Los hace raros cuando borras cosas de ellos, siguen existiendo. Estás como, eso es raro. Así es. Nos estamos acostumbrando a la rareza. Veamos un poco más de las diferencias. Cuando estoy usando un grupo y acabo de obtener el grupo seleccionado y lo redimensiono , todo aplaste. Mientras que si agarro este, el marco QC puede ocupar su propio poco espacio. No aplaste el contenido. Esto es muy útil porque los marcos, digamos, lo hago así y lo arrastro hacia arriba, estás como, no haciendo nada, Dan. Guau, lo que puedes hacer es que puedas decir, quiero cortar el contenido para que puedas usarlo como una máscara. Eso es un beneficio de marco, y yo lo deshago. Déjame mostrarte un par más solo para que podamos acostumbrarnos ¿Por qué estoy haciendo que todos tengan miedo a los marcos? Si espero hasta el final y te muestro fotogramas, es demasiado pronto. Vamos a hacer un poquito aquí y vamos a pasar por el curso. Al final, maestro de marcos, serás. Echemos un vistazo al grupo. El grupo aquí tiene algunos ajustes diferentes en este lado derecho. Mira esto. Si hago clic en el marco, hay algunas partes adicionales como el diseño. Podemos hacer click en el flujo. Por el momento hay forma libre mixta. Mira esto. Los puedo apilar de esta manera. Los puedo apilar verticales. ¿Ves? Volver al flujo libre. En realidad, hay que deshacer. Puede hacer algunas otras cosas geniales. Déjame hacer una demostración más, mover al grupo ahí arriba, agarrar este frame y lo que haremos es que vamos a saber algo raro de los frames es que no desencuadres Usted agrupa y desagrupa, pero enmarca y luego desagrupa Ambos usan el desgrupo para volver a separarlos. Hemos perdido nuestro marco. Lo que voy a hacer es agarrarte copiar y pegar esto, moverlo por encima. Está saltando un poco adelante, pero quiero darte una idea de por qué los marcos son poderosos y por qué los ves en los otros documentos de tanta gente. Entonces voy a seleccionar los tres, cuatro de ellos ahora. Voy a hacer click derecho, voy a decir selección de fotogramas. Lo que puedo hacer es entrar al marco haciendo doble clic en él. Modo de edición de objetos miembro, entra. Puedo decir, vas a tener la restricción de arriba e izquierda por defecto. Estos tres, sin embargo, los he seleccionado con mi tecla Mayús. Así que estoy dentro del marco haciendo doble clic he tenido turno para agarrar los tres de estos. Voy a decir que no arriba a la izquierda. Voy a estar arriba a la derecha, nada cambia excepto si salgo, ahora agarro los bordes, mira esto. ¿Puedes ver que los iconos aquí quieren pegarse en la parte superior derecha porque los configuro en la restricción superior derecha. Esto se vuelve súper útil más adelante cuando estás como, no tengo nada seleccionado, F mi herramienta de marco. Quiero que ahora estamos trabajando en la versión tablet. Vamos a hacer un iPad Pro de 11 pulgadas. Voy a arrastrar el nombre aquí abajo y voy a agarrar esto y copiarlo y pegarlo y moverlo aquí abajo. Mételo ahí y vigila lo que pasa. Mira, arrástralo, se pega a la parte superior derecha. Se puede hacer con muchos elementos dentro de marcos donde puede arrastrarlos hacia fuera y cambiar de tamaño muy bien Si te sientes un poco abrumado, está bien. Vamos a cubrir esto una y otra vez, pero solo quiero meterme en un poco de acción de marco desde el principio para que no sea un gran shock más adelante. Pero también, solo verás que todos usan marcos. Estás viendo el tutorial de otra persona en línea, estás usando marcos. Por eso. Son realmente poderosos. Ya no necesito esto. Voy a hacer clic en el nombre y presionar Eliminar en mi teclado. Yo tampoco necesito nada de esto. Entonces me voy a deshacer de todo. Oh, una última cosa los marcos que es interesante, es ver esto. Cuando hay un marco en el fondo, tiene un nombre. Este marco no tiene nombre. Echemos un vistazo. Tengo este panel de características. Recuerden que lo nombramos. Ese es el tamaño de mi iPhone, y ese es un marco exactamente como el marco que acabamos de hacer. Puedes dibujar marcos usando la tecla F o puedes seleccionar cosas y envolver un marco alrededor. Selección de marco. Realmente no importa cómo consigas tu marco, son los mismos una vez que están hechos. Lo raro de esto es, mira como este tiene un nombre aquí arriba, y este de aquí no aunque, se llama frame uno. Puedo ver la palabra características aquí, pero no para el fotograma uno. Sólo sucede cuando esto está fuera. ¿Ves? A quien tengo un nombre ahora. Pero no tengo nombre. Entonces todos encuentran cosas, estás como, eso tiene un nombre que no tiene nombre. Es solo porque no están anidadas, lo que solo significa que hay un marco dentro de un marco. El nombre desaparece. Oh, Dan. Esto está destinado a ayudarte a estar menos confundido acerca de los marcos. Pero vamos a seguir adelante. Todo bien. Sigue adelante. Eso son marcos versus grupos dentro de una figma. Una cosa es que ¿nunca debo usar grupos? ¿Son malos? No están mal. Simplemente carecen de algunas de las características. Entonces, si te gusta usar grupos, puedes usarlos. Si los necesitas para hacer otras cosas como recortar o esas restricciones donde se pega a los bordes, entonces necesitas usar marcos Pero no hay nada malo con un grupo.Pople solo usa marcos Todo bien. Eso es. Te voy a ver en el siguiente video. 16. Proyecto de clase 02: Esquema de página: Hola. Es el proyecto de clase número dos. Estamos construyendo nuestro wireframe para una versión más completa Entonces básicamente solo esto. Como que hemos construido esta parte juntos. Quiero que construyas estas otras páginas. No son particularmente duros porque son sólo rectángulos con algún tipo He puesto algo de texto de marcador de posición aquí solo usando Xs. No tiene que ser exactamente como yo tengo, sino algo parecido a esto. Queremos ser relativamente similares a medida que trabajamos porque vamos a construir cosas juntos. Entonces aunque no estés de acuerdo, como, no, no deberían estar ahí. Hazlo similar a Okay. La única otra cosa es la flecha. Cubrimos flechas, así que tal vez tengas que volver a esa. Pero sí, solo construye esto para las tres páginas. Estamos siguiendo nuestro flujo de tareas. Si no estás seguro de todo esto, recuerda que hay proyectos de clase en el documento en los archivos de ejercicio Hay un PDF de proyectos de clase. Puedes comprobarlo. Como estamos usando este flujo de tareas que vimos antes. Estamos construyendo las características del producto de la página principal, la página de chequeo y la confirmación Eso es lo que estamos construyendo. Solo recuerda, elige un color simple y solo una fuente simple. También es probablemente un buen momento para mencionar que hay una fuente ilegal que puedes elegir. No se puede escoger papiro, comic sans, Times New Roman, guión aéreo o pincel Esos te van a encerrar. Entonces cualquier otra fuente que no sea esa. Entonces cuando termines, quiero que tomes una captura de pantalla de todo. Entonces hay una manera de exportar marcos. Por el momento, en una Mac, sé que puedo mantener pulsada Comando, Mayús cuatro, y hacer clic y arrastrar una caja alrededor de todos ellos, y obtengo este tipo de captura de pantalla útil que aparece en mi escritorio. PC, no estoy exactamente seguro de lo que es. Simplemente revisa qué es lo que hay en una PC. Las diferentes versiones son ligeramente diferentes. O toma una foto con tu teléfono y luego subirla a la sección de asignaciones de este sitio web. Bien, encontrarás un lugar donde los puedas poner. Y para esas personas que andan por ahí hasta el final, obtienes un bono. Notarás que MO no tiene estos en la parte superior, porque yo estaba como, Oh, solo copia esto y haz clic en esta cuenta una y pégala. Estás como, eh de eso. Pero, ¿por qué está ahí? Es por alguna rareza que quiero mostrarte en realidad Entonces simplemente no suele pasar, pero sucedió en este caso, y yo estaba como, lo guardaré en el video. Entonces la billetera de Scott está dentro de esta página de inicio. ¿Puedes ver la página principal? En el panel de Laos dentro de ahí, algo así como sangría es Scott Wallets Sin embargo, como en esto, de alguna manera estás pasando el rato en ninguna página. No está en confirmación. No está en la pantalla de pago o características o página de inicio. Es simplemente pasar el rato solo. Este es mi menú de hamburguesas. Es por eso que cuando lo estás seleccionando, está copiando esto para que sepa dónde está en la página. Esta cosa no sabe realmente a dónde tiene que ir. Entonces cuando lo copio y lo pego, simplemente lo arroja a la página de características y es como, M que pasa de vez en cuando. No muy a menudo, a menudo. De todas formas, lo que voy a hacer es simplemente asegurarme de que este menú de hamburguesas esté dentro de mi página principal, que es donde hasta los que suben, esto solo tiene que estar seguro de que esté dentro de aquí. ¿Puedes pasar el cursor por encima e ir, Woh dentro de ahí? Ahora cuando selecciono ambos y voy a copiar, hago clic en la palabra características y pego, va en el lugar correcto. Eso es una peculiaridad de figma, sucede de vez en cuando si las cosas no están dentro del marco que necesitabas estar Es simplemente pasar el rato solo. No sé cómo lo hice. Ahí vas. Poca propina de bonificación para ti ahí al final. Ve a hacer tu proyecto y te veré en el siguiente video. 17. Dónde conseguir iconos gratis para Figma: Hola. Oye, vamos a hablar de íconos gratuitos. Hay montones en línea. Te voy a mostrar buenos lugares para obtenerlos tanto de sitios web como de la comunidad Figma. Te mostraré qué tipos de archivos necesitamos y cómo limpiarlos para que sean utilizables. Vamos a saltar. Todo bien. Hay muchos lugares para encontrar iconos gratuitos. Estoy usando iconfnder.com. A mí me gusta. He usado un gratis. Vamos a buscar un ícono y hablar sobre lo que se debe y no se debe hacer Voy a escribir. un carrito de compras. Así que escribe en carrito de compras. Un par de cosas de las que quieres desconfiar dependen de cómo estés usando esto Digamos que lo estamos usando solo para la práctica de estudio, puedes usar cualquiera de estos. Los que te gustan son gratis y premium, así que voy a ir a gratis para esta clase. Podrías pagar por ellos, está bien. Estamos buscando. La otra cosa es, si quiero utilizarlos comercialmente, así que para el trabajo, tengo que asegurarme de usar uso comercial. Ahora bien, algunos de estos usos comerciales requieren que tengas lo que se llama un backlink Si pasas el cursor por encima de lo que dice, necesitas agregar un enlace al sitio web de los diseñadores Te dejarán usarlo, pero necesitas en tu sitio web o aplicación en alguna parte, necesitas vincular de nuevo para decir, Aquí es donde obtuve esta diversión. Podrías optar por buscar un carrito de compras que se use comercialmente, pero no hay ningún vínculo de retroceso Como solo puedo usarlo libremente sin tener que reconocer al creador. Ahora, ¿qué estoy buscando? Básicamente encuentra algo que te guste. A mí me gusta este. Voy a hacer click en él. Hay un par de formas en las que puedes descargarlo. Hay PNG y SVG. Probablemente conozcas PNG. Um, ya sabes, es sólo un archivo de imagen. Tiene transparencia, que es perfecta, y luego está EFGi que es mejor para este caso Entonces echemos un vistazo a ambos. Voy a descargar un PNG. Va a ser de 28 pixeles. Voy a descargarla. Todo bien. Voy a hacer clic en Guardar. Simplemente puedes copiar el PNG al portapapeles, y luego ir a Figma y solo ir a pegar porque solo lo copié y pegué Bien, eso obviamente es una vía rápida o puedes descargarla si necesitas compartirla con otras personas En fin, echemos un vistazo al otro. Vayamos a EFG. Vamos a descargarla porque quiero mostrarte algunas cosas. estoy descargando SVG, y voy a copiar el portapapeles, y lo voy a pegar Estás como, se ven igual, Dan, algo así. Si los agarro a ambos y los escalo, recuerde que nuestra herramienta de escala es la herramienta K. Bien, y voy a escalarlos. ¿Puedes ver la diferencia entre SVG aquí, PNG aquí? PNG está hecho de píxeles. Es transparente, lo cual es genial, pero no es escalable. Eso es lo que SVG significa gráfico vectorial escalable. Voy a agarrar esto y es escalable y es transparente. Obviamente se puede obtener un PNG más grande. Puedo entrar aquí y decir, quiero un PNG, Dan, si lo hago grande, va a funcionar. Copiar al portapapeles. Perfecto. Es agradable y claro en este gran tamaño. Sin embargo, todavía está hecho de píxeles. Eventualmente, si lo escalo, empezaré a verlas. Se ve la poca fuzziness alrededor del exterior. La otra cosa es que si lo descargo, quiero mostrarte que lo descargues de nuevo. Echemos un vistazo a las tallas. Bien, entonces SVG es bastante pequeño. Es de 500 bytes. Ahí está ese primer PNG, el pequeño, que era demasiado pequeño, ¿verdad? Y está bastante cerca en el tamaño del archivo. Pero en cuanto hago un PNG más grande, el tamaño del archivo es mucho mayor. Entonces 5 kilobytes. Estos son bytes, estos son kilobytes. Eso son 5 mil bytes. Entonces es diez veces más grande. Y cuando se trata de diseño web y de aplicaciones, quieres cuando estás produciendo un sitio web, necesitas que estos íconos sean súper pequeños y se carguen súper rápido y sean escalables. Ganan los SVG El otro beneficio para los SVG es que se deshagan de éste. También es que son cambiables de color. Mira esto. Puedo hacer doble clic en él para entrar. Yo estoy en ese modo de edición de objetos y puedo decir, ahora estás rojo. Mientras que PNG, no puedo tan fácilmente. Tengo que saltar a algo y volver a colorearlo más difícil de hacer SVG es para el viento. A veces, sin embargo, tirarás hacia abajo un ícono que tendrá un fondo blanco. Simplemente va a estar así. A veces están encendidos, a veces no lo están. ¿Puedes ver aquí ahora que no es transparente? Porque tenía un marco alrededor del exterior que tiene blanco en el fondo. Puedes arreglarlo por. Echemos un vistazo. Vamos a deshacernos de esto. Los SVG, cuando los obtienes de otras personas, de sitios web, muy a menudo vienen como un desastre. El desorden es que hay un marco y dentro de ese marco hay un rectángulo y mi pequeño dibujo vectorial que quiero del carrito de compras. No necesito esta otra basura. Lo que puedo hacer es simplemente seleccionarlo en mi marco. Aquí está mi vector. Quiero sacarlos de ese marco y este marco aquí ahora no es muy útil. Puedo limpiarlos después. Terminas haciendo eso bastante cuando estás trabajando con SVG de otras personas de la manera en que figma los trata Son complicados, lo sé, más complicados que un PNG seguro, pero esto es justo el camino que tenemos que ir. Lo otro lindo de los SVG, si hago doble clic sobre ellos, puedes empezar a ver estos puntos Vimos estos puntos cuando estamos trabajando con esa línea. Mira esto. Zouk. Puedes comenzar a personalizarlos en el carro Mad Max. Súper rápido. Otro buen lugar para obtener iconos gratis es de la propia Figma. Cuenta con una comunidad. Voy a volver a este pequeño icono de la casa aquí. Voy a ir a Plantilla y Herramientas. Siguen renombrando esto A veces se llama Comunidad y a veces había un botón aquí abajo y luego había un botón aquí arriba, solo mantén un ojo hacia dónde podría haber ido. Cada vez que cambio esto, y lo cambio. Entonces desde la comunidad, voy a buscar en esta comunidad, voy a escribir iconos, y lo que encontrarás es que aquí hay un montón de cosas brillantes en grupos. Digamos que quiero íconos de héroe es uno muy común de usar. Se trata de un grupo de iconos que van a utilizar muchos diseñadores y desarrolladores. Voy a abrir eso. Realmente no importa cuáles uses. Estás buscando el estilo que más te guste. Esto va a traer a colación un buen punto. Estoy abriendo básicamente el archivo de otra persona. Esta es la vista previa. He entrado en comunidad, he encontrado algo que me gustó. Aquí hay muchas otras cosas como wireframes, maquetas o aplicaciones completas y sitios web de otras personas maquetas o aplicaciones completas y Volveremos a entrar en esto más adelante. Por el momento, sin embargo, va a decir, quiero abrir esto en Figma, lo cual es algo raro No lo revisas. En realidad lo abres y ahora este ejemplar es tuyo. Lo que quiero decir con eso es en los íconos de héroes, si vuelvo a mi casa, cierro esto y voy a mis borradores. Es como donde empezamos. Ahí está el flujo de tareas, está el wireframe en el que estamos trabajando Y ahora hero icons es un archivo que tengo. Está en la Nube, pero piensa en ello en tu escritorio ahora. Es como tu archivo. No está conectado con el original. Esto puede ponerse un poco desordenado. Tengo cuando abres muchos íconos diferentes, se apilarán aquí. Entonces lo que puedes hacer es una vez que hayas encontrado las cosas y tal vez sacarlas de aquí, puedes volver a esta pestaña Inicio, hacer clic derecho y moverla a la basura, que puedas mantener esto ordenado. Entonces, si estás pasando por un montón de plantillas diferentes, cosas de la comunidad de otras personas, arruinarán tus documentos. Muy bien, echemos un vistazo aquí, y puedes ver solo un montón de cosas geniales, diferentes tamaños. Lo bueno de ello es, digamos algo como esto donde este icono de la casa. Esto está construyendo aquí. una versión sólida versus una versión de esquema. Pero cuando se hace más pequeño, ¿ puedes ver que realmente lo cambian Cuando tiene que operar un tamaño realmente pequeño, pierden muchos detalles. Ver que las ventanas se hacen más pequeñas. Un diseñador lo ha pensado bien y piensa, cuando es de este tamaño grande, se ve así, pero cuando es más pequeño, lo ajustaremos como. Puedes ver este de aquí es un poco más elaborado. Cuando se hace más pequeño, se reduce un poco más para ser más visible en un tamaño más pequeño. Un montón de cosas geniales aquí. Una de las otras cosas que si has descargado algo que no sea los íconos de héroe, podrías encontrar que debajo de las páginas aquí, puede haber una portada y luego podría estar los íconos. Eso es lo que han hecho aquí. Podrías abrir algo, estarías como, no lo encuentro. Porque hay páginas. Haremos páginas juntos más adelante, pero échale un vistazo, puede que haya algo más. La otra cosa es tratar de encontrar los íconos aquí dentro. Se puede buscar búsqueda búsqueda, pero hay una opción. Iconos. Puedo echar un vistazo por aquí. Ahí están todos mis íconos, montones de cosas. Están muy bien organizados, pero puedes hacer una búsqueda. ¿Puedes hacer lo que estamos buscando? ¿De compras? ¿Hay uno de compras? Me imagino que la hay. Oh, mira eso. ¿Bien? Entonces se le ha saltado directo a ella. Ahora bien, ¿cómo lo meto en mi documento? Lo que voy a hacer es que voy a decir, Bien, me gusta este tipo de aquí, doble clic en él para entrar Ahora bien, aquí es donde se pone un poco desordenado. Voy a cerrar la búsqueda. Ahí está ahí. Estoy haciendo doble clic en él otra vez. ¿Bien? Entonces fue dentro de un grupo. Ahora vuelve a estar dentro. Puedo volver a entrar, y puedo bajar al vector ahí. ¿Bien? Ya sabes, terminas con este modo de edición de objetos. Ahí es cuando sabes que has profundizado lo suficiente porque podrían ser grupos dentro de grupos dentro de grupos. Entonces estás tratando de encontrarlos. Voy a copiarlo y después voy a cambiar a mi otra pestaña. Oh, tiempo de atajo. Comando uno, dos, tres en una Mac, Control uno, dos, tres. Cambiaremos entre estas pestañas en la parte superior aquí. Si tienes cuatro cosas abiertas, puedes ir una, dos, tres, cuatro. Si no tienes nada abierto, solo puedes ir a Comando o Control uno. Eso es sólo la base de operaciones. Puedo volver al comando dos, pegar, y ahí vamos. Voy a usar mi herramienta de báscula, Juk Okay, y tenemos el ícono de otra persona Una última cosa que podría pasar es que podrías agarrar, digamos que es esto y yo solo agarro eso creo que lo tengo, y voy a ir Comando dos, Control dos en una PC lo pego. Lo que quiero mostrarte es que lo tengo. Pero tiene este ícono raro por aquí. Básicamente, este pequeño icono de aquí y este pequeño grupo de aquí, se ve raro. Tiene un color morado. Es porque es una instancia. Vamos a ver las instancias más adelante. Está muy lejos de donde estamos ahora, pero luego puedes ir, Muy bien, ¿qué es todo esto? Recuerda, puedo entrar dentro de ella, digamos, te quiero, ya sea puedo cortarlo y pegarlo, sale de eso y ese pequeño contenedor, que se llama instancia se puede eliminar y volvemos a tener nuestro vector. Entonces supongo que quiero mostrarte eso porque vas a estar buscando cosas y estás como, Qué es toda esta basura. Esencialmente, solo queremos sacar el vector de él más adelante cuando sepamos lo que es una instancia, van a ser útiles. Pero aún no sabemos cuáles son esos. Agarra el vector. Bien, no necesitamos nada de eso ahora mismo. Todos, hemos averiguado de dónde podemos obtenerlos. Te voy a mostrar otro lugar para conseguirlos antes de que vayamos y que sea un proyecto de clase. Pero lo haremos en otro video porque es otro lado de función de Figma llamado plugins. Eso es. Trabajando con íconos en Figma, intenta encontrar SVG, e intenta desenterrar la parte vectorial de ese icono, deshaciendo el marco en cualquier instancia que lo Aprendí un dulce atajo Comando o Control, uno, dos, tres, saltaremos entre nuestras pestañas. Impresiona a tus compañeros con tu tabulación . Te veré en el siguiente video. 18. Cómo usar complementos en Figma para iconos: Hola. Oye, vamos a ver los enchufes dentro de Figma. Básicamente, un plugin es un pequeño mini programa que se ejecuta dentro de Figma para extenderlo. Bien, podría ser encontrar fuentes e imágenes. Puede hacer todo tipo de cosas. Él, hay muchos enchufes diferentes. Te voy a mostrar cómo encontrarlos dentro del documento de diseño Figma, también en la comunidad Hay una manera súper poderosa de extender Figma y súper útil para nosotros. Así que sumérgete y te mostraré cómo encontrarlos y usarlos. Derecha, enchufa. Se encuentran debajo de aquí bajo acciones. Ellos sí mueven esto por ahí. Cada vez que grabo este video, es en algún lugar nuevo. Tienen un pequeño vistazo a su alrededor. Estamos buscando acciones, y vamos a ir a esta llamada plugins y Widgets. Así que ahora vamos a ver los plug ins. Veremos los Widgets más adelante. Veamos algo que ya sabemos , así que veremos íconos. Voy a escribir íconos de héroe. Porque ese es para el que encontramos ese documento comunitario. Realmente no importa, pero resulta que también hay un complemento para ello, lugar de abrir el doc de la comunidad, buscar en los archivos y luego traerlo. Lo que esto significa es enchufar solo un pequeño mini programa que se ejecuta en tu pantalla, simplemente es más fácil que ir y cavar a través de archivos. Puedo entrar aquí y decir, quiero la página de la cuenta. Tienen contabilidad, vamos a por ello. No hay cuenta. Busco una persona persona. Hombre. ¿Tienen siquiera uno? Persona de cuenta, hombre, mujer, nadie. Vamos, Brain. Vamos a rendirnos. Vamos a reservar. Bien, entonces hay un libro. Usemos este marcador uno. Entonces lo que puedes hacer es hacer clic y simplemente arrastrarlo hacia afuera y tienes un ícono, listo para funcionar. Mira eso. Súper genial, súper rápido, súper fácil. Recuerda, ha llegado a través en un marco con un vector en su interior. No hay nada malo en tener un marco. Creo que en el último par de videos estoy como, Deshazte del frame. No, es como un grupo. Tiene el vector adentro. Lo mantiene en una bonita plaza. No tiene nada de malo. A veces, sin embargo, vienen con un fondo blanco. Se puede ver el giro del globo ocular en esto para ocultarlo. A veces llegan con eso y puedes apagarlo. A veces se usa un marco porque vamos a arrastrar otro es que pueden alinearse. ¿Puedes ver? Son vectores de diferentes tamaños, pero vamos a seleccionarlos a ambos. Están en la misma plaza, ¿ entiendes a lo que me refiero? Eso es útil para los iconos porque esa es la misma altura por anchura, el 24 por 24 por el aspecto de la misma. No tienes que deshacerte de él. Yo solo te estoy haciendo consciente del encuadre porque lo que termina está pasando es que vayamos cuatro algo más, encontremos algo con pedacitos. Ahí vamos. Este de aquí, a veces termino haciendo esto y tu estas como, Bien, quiero deshacerme de esta parte y luego esta parte, y terminas con sobras de basura porque hay este marco que no he borrado Por aquí, lo puedo ver. No tiene nada en él. Puedo borrarlo. Conseguir que te acostumbras a ello. Puedes encontrar enchufes de otras formas. Voy a deshacerme de estos tipos. Oh, ya ves que lo hice ahí. No me deshice de los marcos. Me deshice del interior. Pensé que sí. Simplemente no arrastré una selección lo suficientemente grande alrededor de ellos antes de haber borrado. Entonces vayamos a la comunidad, y vayamos a Plantillas y Herramientas, que solían llamarse comunidad, a que todavía llaman comunidad. Y vamos a enchufar. En realidad, hay un conjunto que dice específicamente encuéntrame plug-ins para la organización de archivos. Aquí hay muchos. Mi consejo para ti es después de este video, solo pasa 5 minutos echando un vistazo a través de los enchufes. Te sorprenderá cuántas cosas se han hecho para nosotros aquí en Figma. Es realmente útil. Si hay algo que estás haciendo repetitivamente o algo raro para tu trabajo que uses esta otra compañía, Splash o algún sitio de la biblioteca de valores o alguna base de datos, probablemente encontrarás que alguien haya creado un plug in Aquí hay tanto. Dedique algo de tiempo, eche un vistazo a la edición en efectos. En los plugins, ahí vamos. La razón por la que de esta manera es bastante útil es que muchas veces se puede decir que quiero las gratuitas. La otra cosa que es útil aquí es digamos iconfy. Hagamos una búsqueda. Vamos icono, Pío? Está destinado a ser una empresa, pero hay mucha gente diferente. He escrito en knifi todos los productos quiero mostrar plugins. Se puede ver esta iconofía, hay otra iconofía. Puedes echar un vistazo y decir, A, este ha sido usado por 23 mil personas, lo que parece mucho hasta que ves esta y esta ha sido utilizada por 3.5 millones Cuando eres nuevo, esa es una buena señal para ir. Todo bien. Mucha gente está usando este. Este es probablemente el que quiero. Son los mismos plugins. Simplemente podemos llegar a él de una manera diferente, ya sea a través de la comunidad o vía dentro de nuestro doc. de diseño. Voy a abrirlo en qué archivo estamos trabajando estamos trabajando en ese ahí, y ahí está mi plug in. Aquí está. Notarás que todos los plugins están hechos manera diferente ya que en no hay consistencia. Yo mostrarte cómo usar este fue muy diferente del icono de héroe uno. Entonces algunos de ellos son realmente grandes como este, está bastante en el camino. El otro herro con era bastante pequeño. Este de aquí tiene algunas características geniales como lo que esto si voy, me gusta este de aquí. Puedo decidir de qué color es antes de entrar en Figma, y puedo decidir qué tamaño necesita ser Va a ser un SVG y puedo importarlo como frame o como componente. Cuando nos avancemos más adelante en el curso, podrías saltar a esto. Así que eso nos ahorrará un paso más adelante. Pero por el momento, sabemos lo que es un marco. Vamos a traer eso. ¿A dónde fue? Apenas en mi página, puedes simplemente arrastrarlos como. Bien. Solo recuerda, no están hechos por FIGMA si no están funcionando, podría ser que ya no sean compatibles o sean un nuevo enchufe y hay una pobre chica tratando de una pobre chica tratando mantener vivo el enchufe en sus pausas para el almuerzo Entonces a veces sientes que, Oh, esto debería funcionar, y no lo hace. ¿Por qué no funciona? plug ins son realizados por la comunidad, a veces por empresas, pero no FIGMA. Lo único que quiero mencionar aquí abajo es, busquemos otra. Vamos a Unsplash Una muy buena para imágenes de stock gratis. Si busco eso, voy a plugins y widgets y digamos eso, da click en este. Me da un pequeño adelanto. Tienes Corre y ahorra. ¿Bien? Corre es lo que quieres. Simplemente se ejecuta dentro de este documento. Bien, solo empiezo a trabajar. Ese es el que quieres. Save lo guardará para tu organización, que solo significa que si estás usando FIGMA como parte de un equipo más grande, como una organización y una gran empresa con múltiples usuarios de Figma, puedes guardarlo, y significa que todos tendrán acceso a La mayor parte del tiempo, sin embargo, solo quieres ejecutarlo. Ahí vamos. Slash. Bien, hay montones de plugins, y esa es tu introducción a los plug-ins. Lo último es que si vuelves a bajar y aquí en tu panel de acciones, verás que tiene las recientes, así que no tienes que ir a buscarlas cada vez. Todos, eso es. Eso es plug ins dentro de Figma. Veremos algunas letras más en el curso, pero esa es una buena introducción Pasemos al siguiente video. 19. Proyecto de clase 03: Iconos: Hola, no es tarea, sino tiempo de proyecto de clase súper divertido. Quiero que encuentres tres iconos para tu sitio. A, quiero que encuentres un carrito en imagen y un ícono de éxito. Echemos un vistazo a la mía. Entonces el ícono del carrito va en cada página, en la parte superior aquí, ¿de acuerdo? Y el icono de la imagen, vamos a cambiar por las cruces, ¿de acuerdo? Por lo que es muy común usar este tipo de ícono de marcador de posición de imagen Iman de aspecto genérico Bien, entonces quiero que cambies eso donde lo has usado. Y también en la página de confirmación, encuentra algún tipo de, como, buen trabajo. Ya lo has hecho icono. No tiene que ser un ti. Puede ser un ti. Tu imagen puede verse diferente a la mía. Tu carrito podría ser una bolsa de compras. Depende de tu producto. Encuentras un buen lugar para otro, puedes tener más de tres. Eso está bien. Aunque un par de cosas que quiero mostrarte antes de continuar es un pequeño truco. Para aquellos de ustedes que están haciendo la tarea y no se la han saltado, llegan a ganar. Voy a copiar esta. Tengo que asegurarme de haber agarrado el marco que tiene mi vector en él o simplemente el vector si lo has limpiado. Voy a hacer click en características. Haga clic en el nombre de la página y le pegué Pegar. Voy a entrar en esa página en la misma posición. Lo mismo con este, mantén presionado Shift y agarra ambos y ve a pegar. Termina en ambas páginas. Mírennos. Es genial para navegaciones o cualquier cosa que sea consistente en toda la página Consistente en muchas páginas. Imagina que tienes, no sé, 20 o 30 de estos marcos para tu celular diferentes páginas. Puedes pegarlos a través de muchos de ellos fácilmente. La otra cosa que quiero mostrarte es que utilicé el iConfiPlug in Puedes obtenerlos desde el buscador de iconos. Puedes obtenerlos desde donde quieras la comunidad. No me importa donde los consigas. Ahora voy a retroceder en el tiempo y mostrarte algunos de los problemas que tengo no lo sé, solo para seguir mostrándote algunas de las peculiaridades con Figma al importar íconos de otras personas Bien, déjame mostrarte ahora. Entonces terminé usando el icono Phi y simplemente arrastré algunas versiones del mismo. Terminé en esta página aquí, y aquí es donde es raro. Alejemos el zoom. Digamos que voy a arrastrar este aquí arriba, eso funcionó bien. Los vectores dentro del marco, lo voy a dejar así, y está ahí arriba. Este de aquí, voy a arrastrar el vector salió de este fotograma, el marco sigue aquí abajo. Es sólo una de las cosas raras de FIGMA. Eso está bien. Nos estamos acostumbrando. Lo que lo está haciendo raro es que si hago clic en este vector, es un vector dentro de esta cosa llamada Ix éxito. De alguna manera hice clic en el vector y no en el marco. Si hago clic en el marco y luego lo arrastro hacia afuera, me sale todo el asunto. A veces puedes cultivar el vector y no lo tienes, Dan. La otra cosa a tener en cuenta es que esta primera, voy a deshacer. Este icono aquí está dentro mi página de características porque parece que lo es. Mira, ahí está ahí. Este otro, si hago clic en este de aquí, el de éxito, realidad está colgando mi panel de capas, no dentro de las características. Está justo en la parte superior. Imagínate si conoces capas, lo sabrás. Pero si no lo haces, solo significa que parece que está encima, pero en realidad no está dentro de ese marco padre, que se llama características. Lo que voy a hacer es que es algo a tener en cuenta y voy a seguir recordándote a la clase porque ahí es donde nos atrapan Lo que voy a hacer es voy a decir que seleccionas todo el marco padre y luego lo voy a arrastrar. Bien, ahora está completamente fuera. Eso está bien. Lo mismo con este. Ha salido de características, así que ya no está ahí, y luego este de aquí, agarré de nuevo el vector por accidente, voy a agarrar el marco padre y arrastrarlo hacia afuera Ahora estos tipos están pasando el rato, no en nada, y voy a ser un poco más específico. A veces es más fácil solo acercar el zoom porque es más fácil agarrar los pequeños nombres. En este caso es un punto punto punto porque es bastante pequeño. Voy a agregarlo a una última cosa que quiero mostrarles es que agarré tres diferentes Pasaban de la misma familia. Estos coinciden en cuanto al tamaño. Pero éste no. Lo que voy a necesitar hacer es arrastrarlo hacia arriba y ser un poco más grande. El motivo por el que esto llegó es de 24 por 24. Ese es 24 por 24. Este llegó a las 16 por 16. Ahora puedo usar mi esqueleto solo arrástralo hacia arriba. Debería romperse y ponerse. Ahí tienes, 24 por 24. Ahora es el tamaño correcto. Puedes seleccionar en el marco padre y decir, en realidad, vas a tener 24. Ver dice dimensiones por y debido a que la altura y el ancho están bloqueados, les llama la relación de aspecto. Haré las dos cosas al mismo tiempo. ¿Eso fue útil? Tengo que añadir estas cosas porque sí, hay algunas peculiaridades en Figma. Los realmente fáciles de acostumbrarse a ellos. Quiero tirar estos aquí por si acaso te pierdes tú mismo. Y lo que podría hacer para que esto sea un poco más agradable es que voy a decir Voy a llamar a este icono, corte de guión. Éste de aquí. A lo mejor puedes hacer doble clic aquí o en el panel de Las. A esta se le va a llamar imagen de icono, y esta de aquí va a ser no haga clic en ese botón. Ese es el vamos a quitar esto. Es decir, pequeño icono, si haces clic en él, eso solo le dice al desarrollador cuando termines este curso, ya terminé con esto que está listo para ir al desarrollo. Cuando está apagado, significa que no lo es. Accidentalmente lo pincharás como yo. Cubriremos el modo Dev un poco más adelante, y vamos a llamar a esto éxito o tecnología. Realmente no importa en esta etapa. Voy a ponerlos en mi documento ahora muévalos por ahí como viste al principio. Te quiero ahí. En realidad, este no necesitaba ser ese tamaño porque voy a usarlo mucho más grande para abrirte paso y terminar el proyecto. Te veré después del proyecto de clase. 20. Cómo usar las páginas en Figma: Bien, todo el mundo. Este video, vamos a ver el apasionante mundo de las páginas. Quiero tener su propio video porque hay algunas cosas en él. Quiero agregar algo de valor extra, y lo vamos a necesitar porque en este momento estamos empezando con una sola página, nuestro wireframe móvil, pero vamos a agregar un montón de otras páginas para mantener nuestra persona y flujo de tareas Tendremos este en el que estamos trabajando actualmente en una versión de escritorio, y también quiero mostrarte porque con una página puedes llegar bastante lejos, pero eventualmente terminas con cosas como esta. Esto es más un proyecto del mundo real de mi parte. Se pone desordenado, terminas teniendo muchas páginas diferentes. En lugar de solo la página uno con toda la basura, necesitas separar las cosas para que tengas tipo de grupos diferentes de contenido para facilitar un poco las cosas. Eso lo vamos a hacer en el curso. Vamos a saltar y aprender páginas en figma. Vamos. Muy bien, páginas. Obtienes la página uno por defecto. Si no puedes verlo, podrías estar en activos. Asegúrate de estar archivado y consulta la página uno. Se puede llegar bastante lejos con un documento. No necesitas páginas es lo que voy a decir. Sin embargo, necesitas entenderlos, porque sí, son útiles teniendo páginas extra. Además cuando estás trabajando con documentos de otras personas. Vamos a pasar por ahora y asegurarnos de que estás en el archivo. Vamos a llamarnos uno. En lugar de la página uno, esta es móvil y va a ser wireframe, no Wi Fi Agreguemos una nueva página. Estamos en el botón pequeño más. Llamemos a este escritorio. Probablemente vamos a saltarnos los fotogramas Y. Voy a llamar a este escritorio y tienes dos páginas. Estas se sienten como páginas, pero son solo marcos. Vayamos al escritorio y vamos a crear algunas páginas. F es el atajo para la herramienta de marco o agárrela por la parte inferior allí. Voy a ir por aquí y vamos a cambiar de tablet phone, desktop, vamos a pug, desktop, esto 1440 por 1024 No sé por qué hay que decir 1024, pero así es como todos se refieren a ese tamaño. No 1024 por alguna razón. Bien, cuántos de estos quieren cuatro. Voy a usar mi opción abajo en una Mac en una PC. Simplemente arrastra a éste. Tengo dos o podrías usar tu copiar y pegar. Simplemente haga clic en el nombre primero en la parte superior y luego vaya a Comando. ¿Quién recuerda qué duplicador? Así es. Buen trabajo. Es Comando D en Mac Control D en PC. Tengo cuatro de ellos. Entonces vamos a ir al atajo Shift. Mantenga pulsada la tecla Mayús y golpee una. Eso es encajar todo en la página. A mí me gusta esto. Voy a acelerar esto porque voy a copiar y pegar. En realidad, sé lo que es esa, página de inicio. Déjame copiarlos y pegarlos para que coincidan. Tú esperas ahí. Sólo voy a mear entre éste y éste El atajo para ir entre las dos páginas es solo tu página arriba, página abajo en tu teclado. Es posible que le hayas dicho a la tecla de función si estás en una computadora portátil. Copia que se había escapado para salir de ella, página abajo. Esto es doloroso. Yo me lo saltaré. Vamos a saltar hasta el final. Vamos a crear una tercera página. Este va a ir a golpear plus, y este va a ser A persona y flujo de tareas. Ahora, en esta página, quiero que sea la parte superior, así puedo hacer clic en Hold y arrastrarla, así va en la parte superior y no tiene que tener marco. Sólo voy a volcar de los archivos de ejercicios. Voy a volcar en mi persona ejemplo. Deberías tener la tuya capturada o descargada desde antes Alegaré un poco y luego agregaré mi flujo de tareas. Aquí hay dos flujos de tareas. Es la versión de P&G, que es como una captura de pantalla. Podemos usar esos. Desplazar uno para apretarlos a todos. Entonces hay un gran lugar para guardar el breve y lo que estamos haciendo todo en el documento. Como pueden ver, estos tipos no necesitan marcos para ir. Simplemente pueden ser volteados en lo que quiero mostrarte es que si el flujo de tareas en este momento es un PNG porque es fácil de agregar, pero mira, nosotros sí queremos agregar el archivo Figma de otra persona Lo has descargado, lo has encontrado, está en el disco duro, alguien lo compartió contigo. Es más fácil solo compartir un enlace al archivo, pero la gente sí comparte archivos Figma, el archivo real, puedes guardar una versión local Eso lo he hecho en los expedientes de ejercicio. Te voy a mostrar en Hope y uno. Lo que vamos a hacer es volver a casa y vamos a pasar a este pequeño icono de aquí, Importar, y vamos a importar desde mi computadora. Vamos a averiguar los expedientes de ejercicios. Vamos a decir punto FIG. Lo ves ahí, no el wireframe. Voy a agarrar el flujo de tareas punto FIG. Quiero este porque es un archivo de trabajo. Lo he ingresado o ¿está ahí? Esto en lugar de una imagen es en realidad todos los rectángulos y cosas En lugar de esa imagen, puedo copiar esto, volver a mi que hacemos cambiar dos Comando dos incluso para volver a esto y deshacernos de este PNG y simplemente pegar en los archivos reales porque entonces podemos ir a cambiarlo y modificarlo y arreglar gradas terrible ortografía y escoger nuevos colores. Depende de ti, pero también quería mostrarte cómo importar los archivos Figma de otras personas cuando son archivos físicos Haremos compartir correctamente más adelante. ¿Por qué nos molestamos en ir por las páginas? Mencioné al principio, pero quiero mostrarte otro buen ejemplo. Voy a ir a casa, voy a ir a plantillas. Busquemos digamos que estás construyendo una aplicación IOS, IOS, vamos a golpear Enter. Vamos a encontrar uno que tenga, para IOS 17, vamos a abrir eso. Y lo que encontrarás es abierto y Figma, que sabemos que vamos a estar de acuerdo nos dará una copia local de nuestra propia versión En realidad no estamos trabajando en esto, ahora es la persona que hizo esto. Estamos trabajando en la versión ahora que si voy a casa y voy a mis recientes, ahí está ahí En realidad está en mi computadora ahora. Pero cuando estoy en ella, estás como, Oh, es lindo. Es muy cómodo. No está pasando mucho. Pero luego vas a asegurarte archivos debajo de las páginas. Mira, cubrete. Cambio de registro. Empezar. Pero mira esto. Puedo desplazarme hacia abajo y hay muchas páginas para este documento en particular. Obviamente el sistema operativo para dispositivos móviles es enorme. Para que podamos bajar y decir, en realidad, puedes ver lo que han hecho es que los han agrupado? En lugar de móvil versus escritorio, se han ido, quiero multar. Encontremos algo interesante. Echemos un vistazo a las notificaciones. Súper interesante. Pero aquí hay una página dedicada a enlaces aquí arriba a las pautas para ellos y cosas que puedes comenzar a usar. Ahora son un poco complicados porque están en algo llamado componentes, pero los aprenderemos. Te quedarás colgado de esos más tarde. Pero solo te da control de página. Mira eso. Todos los puntos que necesitas cuando estás deslizando popovers. Así que mira. Oh. Esto es solo para iPad, pero puedes empezar a ver a la gente agrupar cosas en páginas, y cuando seas nuevo, es posible que no lo encuentres o te confundas un poco o te pierdas. Aquí hay muchas cosas escondidas en las páginas. Bien, vamos a cerrar eso. Voy a volver a aquí y mantener todo limpio. No lo harás. Tendrás montones de basura tirados por aquí. Eso está bien. Voy a entrar aquí y decir, para estar ordenado para este curso, quitar la basura. Excelente. Eso es. Hicimos un video completo sobre Cómo agregar una página. Buen trabajo, Dan. Espero que haya algo útil ahí para ti y te veré en el siguiente video. 21. Cómo hacer un prototipo en Figma: Hola a todos. En este video, vamos a hacer prototipos. Una de las características poderosas de Figma es poder burlarse nuestros diseños y probarlos en al menos un teléfono virtual y luego en un teléfono físico, donde podemos hacer clic en nuestras diferentes páginas y ver cómo funciona Podemos conseguirla a un tamaño más apropiado. Podemos verificar los tamaños, y podemos mantener esto abierto y seguir funcionando y estar probando todo el camino. Se llama prototipado Entremos y aprendamos los conceptos básicos. Bien, primero, cambiar uno solo para que en la pantalla, vamos a cambiar a esta opción aquí llamada prototipo. Cambiarás bastante entre diseño y prototipo y probablemente te perderás un poco para empezar porque prototipo, si hago clic en esto ahora, pierde todas las cosas de diseño, así que el color y la fuente y los tamaños. Así que solo sé consciente. Te lo recordaré a través del curso. Vamos a hacer clic en Prototipo. Vamos a hacer clic en este primer fotograma. Da clic en el primer encabezado del marco, nosotros iremos a la página de inicio seleccionada. Lo que vamos a hacer es ver esta voz rondando este punto que aparece aquí en las esquinas Lo que puedo hacer es que puedo decir, haga clic en Sostener arrastrar. Ve ahí. Por defecto, sólo va a decir, todo esto va a estar bien. Dice, El disparador va a ser cuando me toquen, voy a navegar a la página de características al instante Hagamos la página de características. Éste, solo arrástralo aquí. Puedes arrastrarlo hacia atrás de esta manera. Puedes arrastrarlo todo mira estas cosas aquí, se llaman fideos o alambres, y vamos a arrastrarlo de características a esta página. Entonces cuando vayamos al checkout, vamos a desplazarnos sobre la barra espaciadora y arrastrarla a ésta Vamos a usar todas las interacciones predeterminadas. Todo bien. Prepárense. ¿Estás listo para hacer un prototipo? Lo haces golpeando este pequeño botón arriba de aquí. El pequeño botón de reproducción. Se llama presente. Listo, cargando. Ahí está. Está en un teléfono. No es bueno. Aquí está todo mi logo y cosas pegadas en él. Lo abordaremos más adelante. Bien, mira esta pelea. Haga clic una vez. Me paso a la página siguiente. Página siguiente. Página siguiente. Oh, muy emocionante. Y entonces no va a ninguna parte porque no tenemos ningún lugar para que eso vaya cuando esté terminado. Todo bien. Lo que hay que tener en cuenta cuando se trata esta vista de prototipo es que en realidad se abre en otra pestaña. Entonces ahí está la ficha en la que estamos trabajando. Todo lo que hizo fue cuando teníamos el botón de reproducción, abrió nuestro diseño en la pestaña. Un par de cosas que vamos a ver es ver esto. No hay nada aquí en este momento, pero si le das un verdadero gran jiggle del mouse, jig jiggle o click en el fondo lejos Diré, mira, todas estas otras opciones aquí. Los principales que vas a ver es reiniciar. Ves abajo abajo aquí, Reiniciar o el arche. Lo vamos a volver al principio para que podamos volver a atravesarlo. Encantadora. Aquí arriba hay más opciones. Puedes ir a pantalla completa para deshacerte del cromo si quieres que se lo esté presentando a un cliente. Haz clic en eso de nuevo. Aquí hay más opciones. No voy a pasar por todo. La única otra cosa que podrías hacer es que también tienes una forma manual de pasar por esto. Así que solo de ida y vuelta a través del Bien, puedes dejar esto abierto. No tienes que cerrar esto una vez que hayas terminado. Simplemente puedes dejarlo ahí y está en vivo. Lo que pasa es ver esto si hago clic en esto, notarás que no puedo ver el color. ¿Por qué no puedo cambiar el color, Dan? Sí. Así es. Estoy en prototipo, voy a ir a diseñar. Aquí abajo, voy a elegir un nuevo color. Sólo voy a arrastrar cualquier cosa vieja ahí dentro. Y si vuelvo a la vista previa, en realidad no tengo que lanzarlo. Puedo reiniciarlo y ya ves que estoy de vuelta aquí, puedo permanecer abierto. Lo que tiendo a hacer es hacer clic y arrastrar esta pestaña. Puedo moverlo y puedo decir, derecho quiero que esté en este lado derecho de aquí. Puedo estar trabajando en este lado, que ahora es un poco aplastante Pero es una actualización en vivo. Yo puedo decir esto. En realidad, quiero volver a ese color original. Qué fue deshacer, deshacer, deshacer. Puedes ver que se está actualizando por aquí. Y lo que hago aún más es menos lado a lado. Y lo que hago en realidad es arrastrar esto y tenerlo abierto. Lo que voy a hacer es cerrar eso. Lo que normalmente hago es que lo previsualizaré y realmente agarraré esta pestaña, en realidad puedes arrastrarla fuera del navegador a mi otro escritorio que no puedes ver. Estoy haciendo exactamente lo mismo. Audiencia sobre mi otro documento. Hasta usted. Voy a cerrarlo. Otra buena forma de previsualizar es aquí, hay otra Entonces, en lugar de presionar el botón de reproducción, hay un botón de vista previa. ¿Bien? Entonces haces clic en este pequeño Chevron aquí, esta pequeña flecha hacia abajo, da clic en la vista previa, y se abrirá en una pequeña ventana que se puede mover Es sólo pasar el rato ahí fuera. Es demasiado grande. Puedo escalarlo a más mi vista de teléfono. Lo que esto es realmente útil está aquí, puedo decir, así que estoy trabajando en el tamaño de clic en Características. ¿Se puede ver que se actualiza? Hago clic aquí, y el texto del producto es demasiado pequeño. Voy por aquí y digo bup bup, bup, puede ver que al instante se actualiza. Lo voy a acercar tú agarras la parte superior ahí, puedes empezar en mi vista dist upp, puedo estar bastante acercado, estar trabajando en cosas y ve, bien, ¿cómo se ve en términos de tamaño de fuente en un dispositivo móvil No estoy diseñando el tamaño equivocado. Porque ves ese 99 demasiado pequeño. Así que voy a entrar aquí, hacer un grande, grande, grande, grande, grande, grande, más grande, más grande, más grande. Entiendes la idea. Shift click, bonito y grande. Nuevamente, puedes reiniciar este y cerrarlo cuando hayas terminado. Voy a volver a mi modo prototipo. Puedes eliminar estos cables con solo hacer clic en ellos y presionar Eliminar en tu teclado, simplemente borrándolos físicamente. Da click en el propio marco y da click aquí y pulsa Eliminar si quieres deshacerte de ellos. Voy a deshacer deshacer porque, los vamos a eliminar. Eso es lo que quiero hacer. Elimina a ese tipo, ahí comes. En realidad, voy a ponerlos de nuevo porque quiero mostrarte un par de cosas más que son interesantes que tal vez te atrapen. Si estoy en la caja y voy a jugar, en realidad, se ha ido sí, está bien. Si hago clic en, lo cambiaste de vista previa a presente. Cualquiera, el fotograma que hayas seleccionado es el primero que va a aparecer Puedes ver que he terminado un checkout estás como, esa no es la primera página. Simplemente significa que cualquiera que estés trabajando se presentará primero. Si quieres que sea la página principal del primero, yo reinicié, estará en esa página. Una cosa que no puede hacer es que no se puede eliminar esto en dirección. No puedes conectarte a otra página. Todavía estoy en modo prototipo. Puedo dar click en Página principal. Puedo ver esto un puntito. Se puede hacer de cualquier lado. No importa si quieres que salga en la parte superior, simplemente va automáticamente a lugares, pero no puedes conseguir que vaya a otra página. Eso no le gusta. Entonces hay que ir a otro cuadro, está bien. Ves que dejan ir demasiado pronto así que vas a conseguir que se arrastre a través y lo que la gente pregunta es que a veces no tienes el marco móvil, así que voy a ir a la página principal y estás como, ¿Cómo obtuve el celular o tal vez no quiero un iPhone, quiero un Android o algo más. En modo prototipo, da clic en el fondo, para que no tengas nada seleccionado y aquí podrás ver la configuración de tu prototipo. Quizás quieras un teléfono más viejo, vas a estar en el futuro. Sólo se puede estar en el futuro. Probablemente te dieron un 17, 18, 19, podrías ir, bien, quiero un Google Pixel dos de la Edad Media. Entonces cuando tenga presente, va a usar eso como marco. Lo mismo para escritorio, vamos a escritorio, sin nada seleccionado, puedes pasar por. Creo que cambié el mío. El tuyo probablemente no esté en nada. Puse el mío en el Macbook Pro porque se ve genial. Y cuando tengo una vista previa de esta página, no hay nada en ella. No muy emocionante, pero es en este MacBook Pro. Voy a volver a mi móvil uno. Se puede cambiar a horizontal y vertical. No funcionan muy bien ya que es muy raro diseñar para móviles horizontales verticales a menos que estés diseñando específicamente una aplicación para hacerlo. A menudo toma la forma de un tamaño de tableta, no tiene una vista previa muy bien porque se aplaste ahí dentro Lo Ahí vas. Muy bien, eso es todo. Eso es prototipado básico. Haremos algo un poco más emocionante que el siguiente. Eliminemos las interacciones. Entonces estoy dando click en estos y simplemente borrándolos. Y despídete de los fideos. No mucha gente los llama fideos de navegación. Podría ser solo yo, así que ten cuidado cuando entres a la reunión y hables de fideos. En fin, pasemos al siguiente video. Vamos a conectar los botones. 22. Animación de prototipos y facilidades en Figma: Hola. En este video, vamos a ver agregar interacciones a los botones, y cuando hacemos clic en ellos. Todo eso no lo hizo. Vamos a dar click en éste. Puedes ver que vamos a agregar algo de animación a la transición entre los diferentes fotogramas. Obtendremos la navegación para trabajar arriba aquí, aprende más. Oh, despreciable. Bien, así que agreguemos interacciones a los botones y agreguemos un poco de animaciones entre ellos. Joroba en Bien para empezar, asegúrate de que estás en modo prototipo y asegúrate de que te has deshecho de los fideos viejos. Entonces me voy a deshacer de ti, de ti y de ti. Bien, y cambiar uno para que podamos verlos a todos. Bien, así que hemos hecho transiciones de página o página e instrucciones. Lo que vamos a hacer ahora es hacerlo a los botones. Vamos a ir a hacer clic en el botón Por ahora, asegúrate de que estás en prototipo, y podrás ver que obtienes los puntitos aquí como hicimos para todo el fotograma, donde aparecen podemos arrastrar por ahí. Podemos hacerlo por cualquier cosa. Mira, el texto aquí, hay icono. Aquí tenemos este botón. Quiero que cuando se haga clic en el botón B ahora para hacer clic en mantener y arrastrar y arrastrar a la página de pago Nos hemos saltado la página de características. Vamos a darle una prueba a esto. Desplaza la barra espaciadora para abrir esa pequeña vista previa W eso, te voy a mover ahí. Cuando hago clic en Por ahora, salta a la página de pago, salta la página de características Impresionante. Voy a hacer eso más pequeño para que podamos ver las cosas. El otro Bueno, en realidad, antes de ir demasiado lejos, voy a golpear para reiniciar. No puedo ver los botones. Este es un buen punto para señalar. Estamos diseñando para el me estoy desplazando hacia arriba para el iPhone 16? Y los botones están bien. Véalos, pero tal vez tengas que soportar modelos de teléfono más antiguos. Tal vez tengas que simplemente revisar cuáles son los teléfonos más comunes actualmente, cuáles son los tamaños y probar en algunos de ellos para asegurarte de eso Porque si vuelvo a esto ¿dónde está? Pixel dos si estos botones están debajo de la pantalla, la pantalla inicial, se llama debajo del pliegue. Así lo llaman. Antiguo término de impresión donde no puedo verlos y no es tan probable que los encuentre porque tienen que desplazarse aquí. Lo que voy a hacer es que puedan desplazarse por el teléfono. Pero por aquí, lo que puedo hacer es ver esto. Puedo agarrar ambos. Eso es algo interesante dentro de Figma es que si estoy en prototipo, no en diseño, todavía puedo mover las cosas No puedo cambiar el color de la misma. Es difícil agarrarlos. Ahí agarré un montón de cosas. No sé lo que agarré. Yo estoy agarrando puedes moverlos. Vamos, Dan. Va a acercar. Claramente no es tan útil en el modo prototipo, pero puedes mover las cosas. ¿Puedes ver mi pequeño adelanto? Yo estoy como, los quiero ahí. Eso significa que se pueden ver en el iPhone 16 y este viejo teléfono. ¿Y qué más podemos hacer? Hagamos este botón. Ahora, ten cuidado desde dónde estás seleccionando el prototipo. Puede hacer clic en el texto y hacer que el prototipo llegue a nuestra página de características, y eso funcionará. El área de clic, lo que tienen que hacer clic es el texto, que es mucho más pequeño que el botón real. Así que voy a deshacer eso y solo asegurarme de que estoy haciendo clic en el botón. Quiero que todo eso sea un botón. Solo estoy haciendo clic, sosteniendo y arrastrando. Lo siguiente que quiero mostrarles es la animación. Entonces, por defecto, está en Instant. Lo que me gustaría hacer es cuando se clic en ese botón Más información, me gustaría que hiciera algo un poco más interesante como Disolver. Disolver es. Si pasas el cursor por encima de este pequeño pulgar ahora aquí, te dará un pequeño adelanto Disolver es claramente bastante fácil de entender. Omitir animar. Aquí hay un montón de animaciones diferentes. Le faltan los mejores del mundo Page Peel. Pero es que tus habituales se mudan, se mudan. Permítanme demostrarlo. Quiero pasar por ahí, puedes explorarlos. Hagamos la diferencia entre, digamos, muévete. ¿Ves? Es muy emocionante. Estoy rondando sobre él, se desliza ahí dentro. Cuídate ahí hay algo un poco más especial para empujar o deslizar adentro me gusta bastante. Ves deslizarse adentro, yo empuja al otro y lo disuelve al mismo tiempo El blanco de ahí es empujado hacia afuera. Solo vamos a previsualizarlo en realidad. Por aquí, puedo dar click sobre esto. Se puede ver al otro movido hacia la izquierda y disuelto mientras que éste, el segundo fotograma se movió hacia adentro. Esa es una muy buena. Algunas de las otras cosas a tener en cuenta es que veamos la dirección. Podemos conseguir que vaya desde el otro lado. Voy a golpear. Estoy dando click aquí, golpeando Alpha reset. Voy un poco más. Se ve que empuja desde la izquierda. Voy a volver a la derecha. Se puede subir o bajar. Hablemos de la curva. facilidad de salida es el valor predeterminado, y lo que eso significa es que entra muy rápido y se ralentiza al final. Se facilita. Si quieres que llegue muy lento, quieres que se acerque y luego sea rápido al final, puedes usar la facilidad en. Puedes hacer ambas cosas. La facilidad de entrada y salida suele ser solo un buen defecto. A mí me gusta. Lento al principio, rápido en el medio, lento al final. Algunos de los otros agradables es la facilidad de entrada y salida atrás. Esto vuelve a tener un pequeño rebote agradable. Mira esto aprende más. Tiene esto lo llamas anticipación de la animación Entra y pasa un poco por donde tiene que estar, rebota un poco. A mí me gusta. Se puede jugar con estos. No se te permite usar hinchable. Es legal. Así que date una oportunidad con hinchable Haciendo haciendo haciendo se te permite hacer eso. Voy a usar estos en la parte de atrás. Veamos la duración. La duración es el tiempo que tarda en participar toda esta animación. Milisegundos, MS, hay 1,000 milisegundos en 1 segundo, así que ahí es 1 segundo Entonces quieres que sea más largo, quieres que sea 1 segundo, el 0.3, puedes hacer eso y ver esto. Lo es. No más. Lleva mucho más tiempo. Tú trabajas tu tiempo. Sin embargo, los valores por defecto son bastante buenos. Voy a volver a 400. Tú estableces. Yo lo llevo. Probablemente un poco rápido, en realidad. Voy a ir al 700. Ahí vas. Ahora, hagamos algunas de las otras que tenemos A estas alturas Trabajando, aprende más. Simplemente puedes hacer un Select All, así que no tienes que tener nada seleccionado. Voy a alejar el zoom, turno uno. Ver todo. Lo cierro. Y no puedes tener nada seleccionado haciendo click en el fondo y luego ir a Seleccionar todo, es editar no conozco el atajo. Ahí está Seleccionar todo, o Comando A en una Mac Control A en una PC, y puedes ver todos los diferentes fideos. Los puedes ver ahí hay dos. Entonces, ¿ cuáles otros necesito? A la compra en el botón. Vamos a arrastrar esto, lo compré. Enhorabuena. Y lo que hará es que recordará lo último que hiciste. Se va a deslizar usando toda la curva y la duración. Perfecto. Otro consejo es, nos quedamos atascados. Recuerda, cambia la barra espaciadora para abrir la pequeña vista previa o puedes presionar un pequeño botón de reproducción aquí arriba, hasta ti. Voy a ir a Por ahora compra. Llego a este pedacito y luego me quedo atascado. No hay manera real de que pueda hacer otra cosa. ¿Qué hacemos? Muévalo ahí abajo. Agarra la broca blanca para arrastrarla. Es muy típico que se haga clic en el logotipo para volver a la página principal. Hagamos esto. Estoy muy cerca y necesito esto para ir a la página principal. Obviamente, podría alejarme y podría arrastrar el alambre sobre o el fideo Pero tus diseños se vuelven muy, muy complejos. A veces solo sabes a dónde tiene que ir, pero no quieres tener que alejar el zoom e intentar arrastrarlo a través de todas estas cosas, que es arrastrar, arrastrar, eres como hacer Puede ser un poco doloroso. Lo que puedes hacer es simplemente hacerlo manualmente. Con esta seleccionada, te aseguras en prototipo. Puedes ver indirecciones aquí. Puedes agregar un plus junto a él. Tengo una nueva interrección El disparador está al hacer clic. Cuando se haga clic en esta cosa, la acción va a ser, las cubriremos más adelante Pero vamos a decir, me gustaría que navegue hasta . ¿Qué destino? Bueno, mira, aquí está en mis páginas. Quiero que navegue a mi página principal. Qué tipo de animación voy a conseguir que haga una disolución. Voy a dejar todo por defecto. Se puede cerrar y se puede ver que el cable va por aquí abajo. A veces simplemente es más fácil hacerlo manualmente. Entonces es bueno ir ahora. Se remonta a ahí. Más. No. No puedo volver atrás. No lo he hecho a esta página. Lo hice solo con este logo de aquí, pero no a estos dos. Este es un buen punto. Lo que puedes hacer es simplemente trabajar tu camino a través de hacer lo mismo para todos estos. O lo que puedes hacer es eliminar esa. Elimine esa. Lo que notarás es que puedes hacer algunas cosas básicas de diseño dentro de un prototipo. Creo que lo discutimos. Nosotros lo hicimos. Voy a seleccionar eso y copiarlo. Seleccioné en la página de confirmación lo he copiado usando mi atajo, y voy a hacer clic en Checkout, así sé que sabe a dónde ir y luego solo una pasta. Verás, se metió en el lugar exacto correcto. Ya hemos hablado de eso antes, pero también compramos a través de la interacción. No funciona cuando estás en diseño. Mira esto si hago clic en esto y voy a copiar voy por aquí y pego y luego vuelvo al prototipo. Trabajé. Nunca solía hacerlo. Lo hace ahora. ¡Hurra! Eso lo sabía. De todos modos, para que puedas copiar y pegar elementos y que traigan las interacciones con ellos. Ahora deberíamos poder ir aquí e ir y volver. Ir a la página Por ahora, es compra, vuelve a la página principal. Oh, lo estamos haciendo. Estamos prototipando Sí hay que actualizar uno viejo, como este de aquí, no creo que haga lo mismo, se puede hacer clic en él o en realidad, tal vez sea éste. Puedes hacer click en el cable y puedes verlo debajo o puedes cambiarlo aquí arriba. No importa. Si quieres ver un poco más por aquí, puedes hacer click en él y se abrirá con todas las cosas que aparecen al hacer clic en el cable aquí. Todo bien. Así que haz un pequeño experimento con las diferentes animaciones. ¿Bien? Ya sabes, todos estos. Desafortunadamente, no hay pelado de página como a todos nos encanta. Creo que se ha hecho ilegal en la mayoría de los países. Entonces sí, eso es todo. Experimenta, no te metas con smart animate. Hazte una buena idea. Editor, ¿ nos puedes salir de este video usando el super encantador peeling de página? Vamos. Dije: Hazlo. Ahí vas. 23. Cómo añadir la barra de estado de iOS en Figma: Hola a todos. Este video, vamos a mirar la barra de estado, que es la hora y la batería y la señal Wi Fi. Vamos a agregarlo a nuestra plantilla porque por el momento, se está agrupando aquí en el iPhone 16 Lo agregaremos para que tengamos un poco de espacio para que podamos evitar el buzón, la ventana. No puedo recordar cómo se llama. Pero de todos modos, queremos evitar la cámara que asoma a través la pantalla en la mayoría de los teléfonos nuevos. Bien, vamos a saltar. Se llama Barra de Estado. Bien, así que hagámoslo juntos. He hecho esto por un tiempo, así que vamos a resolverlo. Voy a ir a casa. Voy a ir a herramientas y plantillas, y estoy asumiendo que puedo escribir en IOS. Se llama barra de estado. ¿Bien? Estoy usando IOS porque estoy usando el iPhone. Podrías usar la barra de estado de Android. ¿Bien? Y entonces la forma en que decido cuál usar es, no sé. Sólo empieza a mirarlos, mira cuál, eso se ve un poco bien. Tiene muchos me gusta, tiene muchas descargas. Probablemente haya más. No me importa lo suficiente. Voy a agarrar uno, abrirlo, ver si puedo agarrar IOS seven, echar un vistazo, barra de estado. Ahí está ahí, así que voy a decir, en realidad, estas parecen partes de la barra de estado, échale un vistazo. Oh, bien. Tienen muchas opciones. Vamos a ir por sólo el básico. ¿Estamos haciendo en la oscuridad o en la luz? Necesitamos el oscuro. Voy a copiar esto, ir por aquí y voy a decir, hagámoslo a la página principal. Vamos a la página de inicio, volvamos al diseño, y voy a ir a. En primer lugar, sé que voy a tener que mover todo esto hacia abajo. No es necesario agregar la barra de estado. Eso es lo primero aquí es que tu desarrollador no lo va a querer, pero cuando lo estás previsualizando, puede ser un poco raro no tenerlo Aquí vamos. Lo estoy basando ahí arriba Perfecto. Probablemente voy a hacerlo. Vayamos a nuestra vista previa y asegurémonos de que tenemos echemos un vistazo, está ahí arriba. Vamos a cambiar los teléfonos. Volvamos. Pasemos al prototipo. Entremos aquí y volvamos al iPhone 16, que está todo el camino en la parte superior ahí. Ahora vamos a previsualizarlo mejor. Porque se pone en el ¿cómo llaman a esto? La píldora, no, el buzón, la puerta. No puedo recordar. Pero ahora tenemos nuestro Nav aquí. Lo que suele suceder especialmente para la web móvil es que no lo necesitas porque el navegador termina empujándolo hacia abajo de todos modos, y hay un poco de cromo del navegador arriba. Pero para nuestra plantilla, creo que es buena. Lo elaboramos juntos. Lo único que podríamos hacer es, ¿lo quiero? De veras no lo quiero. Lo que podríamos hacer es seleccionarlo e ir al diseño y tal vez solo darle color de relleno, para que cuando estemos diseñando, podamos solucionarlo. ¿Puedo arrastrarlo hacia arriba? Oh, puedo. Muy bien diseñado. Sin embargo, lo único es que cuando empiezas agregar componentes complejos a agregar componentes complejos de otra persona es que va a traer algunas cosas. Esta cosa de aquí es una instancia de un componente, que todavía no sabes qué es. Entonces solo tienes que ir a tener cuidado, estás como, ¿ De verdad lo necesito? Podría ser. Hay una opción de modo oscuro. Mira, modo luz, modo oscuro. Esto es lo que vamos a poder construir también. Lo realmente interesante es que en realidad estos íconos están sacando de este documento de aquí. Hay una manera de hacerlo en figma. Lo incluiré aquí en el curso solo porque terminarás haciéndolo. Estarás como, quiero que lo cojas de alguien más y empezará a sacar de otros documentos que pueden ser un poco confusos. Lo que puedes hacer es seleccionarlo. Puedes hacer clic derecho en él y puedes decir, me gustaría desvincular esta instancia, y puedes hacer lo mismo por todas estas Todos estos pequeños diamantes están enlazando de nuevo a ese documento original. Yo también puedo ir a ti e ir a desatar Instancia. Ahora solo es parte de este documento, lo mismo con este. Esta es una forma un poco cruda de hacerlo ya que sería genial si sabes qué son las instancias y los componentes, lo que harás más adelante. Pero ahora no quiero profundizar demasiado en esas cosas. Sólo quiero tirar las cosas aquí y poner un poco de esto aquí para que si estás saltando adelante, como, voy a agarrar eso voy a agarrar eso. Terminas con un poquito de problemas, sabes que no eres tú, es solo que tu conocimiento actual aún no está ahí del todo. Pero no te preocupes, ya llegaremos a eso. Eso ya lo tenemos. ¿Lo quiero? Me lo voy a quitar. Curso. Puedes hacerlo. Estás totalmente permitido. Bien, pero me lo voy a quitar para el resto de esto. Sólo que lo estamos manteniendo fácil, hombre. Ahí vas. Y sigamos adelante. ¿A dónde fue la línea alrededor de mi botón? Hm. ¿Siempre se ha ido? Tiene. Te ha estado molestando, ¿no? No tengo idea cuando eso se fue. Bien, lo es. Así es como agarrar la barra de estado y perder con eso para que puedas obtener una vista previa solo un poco mejor. Bien, vamos a saltar al siguiente video. Olvídate de que ocurrió este video. Supongo que esa es la moraleja de la historia de hoy. Bien, siguiente video 24. Pruebas en tu teléfono con Figma Mirror: Hola. Este es el otro lado de mi oficina. Normalmente miras de esa manera a través de este camino. Así es como se ve como mi basura y mis tableros de sonido para tratar de que suene bien. Y es de noche. No es un poco malhumorado. Solo que en realidad está oscuro. Son alrededor de las 11:00 de la noche, y estamos haciendo cursos para nosotros. Y en este video, vamos a estar viendo algo que se llama Figma mirror. ¿Qué es? Es una forma de probar nuestro Ya sabes, estamos en la computadora tratando de diseñar un sitio web telefónico, un sitio web móvil primero, bien, o una aplicación, ¿bien? No tiene sentido pasar todo tu tiempo ahí. Tienes que estar probando en el dispositivo, esa cosa, ¿de acuerdo? Por lo que hay una aplicación que puedes descargar ya sea desde la tienda de aplicaciones de Android o Mac. Se nota que no lo uso. Pero se llama Figma mirror. Podrían estar cambiando ese nombre check en los comentarios si lo han actualizado, pero se llama Figma Mirror Bien, pausa ahí por un segundo. Oye, han actualizado un poquito la aplicación espejo. ¿Bien? Entonces, una vez que lo hayas instalado en tu teléfono, bien, lo que puedes hacer es usarlo para simplemente comenzar automáticamente. Ahora lo que hay que hacer es hacer clic en el botón de reflejo, que se encuentra en la parte inferior derecha Simplemente haga clic en Espejo, y luego aquí dentro de Figma en su escritorio, simplemente haga clic en la página que desea un espejo Bien, voy a hacer clic en una página de inicio, y aparecerá en tu teléfono. Es magia. En realidad, tal vez tengas que hacer clic en el botón comenzar a Mirroring, pero luego será mágico. Volver al video. Inicia sesión con tu nombre de usuario y contraseña de Figma, entonces de alguna manera mágicamente solo está sucediendo. No tienes que estar en la misma red. Magia. Y básicamente, lo que pasa es, ¿puedo mostrarte aquí? Te voy a mostrar. ¿Puedes acercar eso? Como que puedes. Básicamente, si hago clic en diferentes cosas aquí en mi escritorio, no se puede ver lo que estoy haciendo por aquí. Pero si hago clic en mi página de datos, ¿dónde está? ¿Página de detalles? Ahí está. Haga clic en mi caja. Entonces es una especie de actualización en vivo. E incluso Verda, en realidad es directo en la dirección. Entonces, ¿funcionará esto? Tal vez. Entonces, da clic en mi botón Inicio. ¿Qué puedes ver? Botón de inicio. Home Button es demasiado pequeño, porque apenas puedo hacer clic en él, y no puedes ver lo que estoy haciendo. Por ahora botón. Mira eso. Bien, compras. ¿En qué se centra? ¿Se está enfocando en lo correcto? Tal vez. Se desvanece. Oh, mira qué bueno es esto. Así que en realidad puedo trabajar en ello. Y lo grande que te voy a mostrar son los botones a estas alturas demasiado pequeños, el texto. Se ve bien en el escritorio, pero es pequeñito ahí dentro, ¿de acuerdo? El botón de compra se ve todo bien cuando voy a Por ahora. ¿Y cómo es esto filmar la cámara? Esto probablemente sea terrible, pero bueno, ese botón de compra me sienta bien. mí me resulta muy difícil hacer clic en los botones a lo largo del nav, también. Solo necesitan ser no necesitan ser más grandes. Necesitan ser más pequeños con un área más grande alrededor de ellos, así que un marco para hacerlos más grandes. Logos demasiado pequeños. El texto en la página de compra es bueno. La página de pago. Y y sí me quedo atascado en la página Más información. No tengo ningún tipo de prototipado fuera de la página de más detalles del producto Olvidé agregarlo. Probablemente lo viste en el último video, pero cuando llegas a este tipo de escenario y estás como, probándolo por tu cuenta, estás como, olvidaste esa parte. Bueno, eso es demasiado pequeño, o ese es un color espantoso. Verde. Bien, entonces, en realidad, eso probablemente sea bastante bueno. Oh, uno hagamos una actualización en vivo, porque eso es bastante genial. Voy a ajustar el Zoom para que podamos hacerlo un poco mejor. Espera ahí. Voy a cambiar la cámara. Bien. Entonces probablemente debería haber hecho esto al principio. Mira esto. Se trata de actualizaciones en vivo. Estoy moviendo cosas en mi escritorio, así que estás mirando mi laptop. Ahí, mi teléfono por allá. Y, sí, se puede simplemente tipo de trabajo. Entonces, cuando estoy trabajando, especialmente hay una etapa inicial conseguir tamaños de fuente y cosas listas, simplemente como que no tengo un apuntalado Sólo tengo mi teléfono tirado en el suelo. Pero para que lo veas. Esto es realmente útil ahora. Puedo pasar y decir, en realidad, tamaño de fuente aquí, ¿ qué quiero hacer? Es un grupo, así que voy a entrar en mi grupo, y voy a usar arriba y abajo. Hasta que encuentre algo, lo que estoy viendo es que estoy vigilando mi teléfono aquí. ¿Bien? Eso es lo que estoy viendo. Estoy como, ¿es esa una talla accesible? Lo que encontrarás es prácticamente siempre, 16 es bueno. ¿Bien? No lo puedes ver porque está en este lado de mi escritorio, pero he ido a 16 puntos. Ese gimnasio realmente es un no cerebro uno bueno. Bien, no puedo destrozarlo. 15, si estás tratando de ser genial y elegante y tratando de mantenerlo pequeño. Pero si bajas alrededor de los 12 y 13 puntos, se vuelve algo bastante complicado. Está bien para algunas cosas, pero para un botón grande y viejo clic ahora comprar, se siente un poco pequeño. Así que quiero pasar, y hagamos esto un poco más grande. Póngalos a través. Vamos a enviarlos juntos. Ahí. Tengo que hacer lo mismo para el botón de aprender más. Es difícil hacerlo con una sola mano. Necesito mis manos aquí, pero no quiero mis nudillos peludos en el video. Pero entiendes la idea. Puedes hacer cambios muy rápido, estar viendo cómo se ve en un teléfono, ¿de acuerdo? Es prácticamente instantáneo. No lo sé. Estoy bastante asombrado de cómo funciona eso Entonces, sí, si estás diseñando para tablet, ten una tablet. Si estás diseñando para escritorio, es un poco más fácil que puedes hacerlo en tu escritorio. Pero el teléfono móvil o una aplicación, bien, o un primer sitio web móvil, como lo estamos haciendo, ¿de acuerdo? El escritorio es parte de nuestro plan, pero es secundario. La mayor parte de nuestra audiencia va a venir de anuncios pagados, porque hablé con el cliente al respecto. Ese es el tipo de conversaciones de las que también hablas, como Lead Generation, ¿de dónde viene todo? Viene de los anuncios de Facebook. Todo va a venir de los teléfonos móviles. Si viene de YouTube Cómo hacer videos, como hacen muchos de mis cursos, entonces es de escritorio primero. Entonces, ¿tipo de preguntas en las que te vas a meter como diseñador de UX? ¿Para qué diseñamos primero? Bien, ya es tarde, y sorprendentemente caluroso con todas estas cámaras y luces encendidas, voy a hacer otro video antes de ir a la cama Bien, eso es Figma mirror y probando tu prototipo en tu teléfono. Visto un poco. 25. Proyecto de clase 04: Pruebas en tu teléfono: Es tiempo de proyecto de clase. Vamos a crear prototipos tu sitio web móvil y probarlo en tu teléfono. Usa las técnicas que ya has usado que hemos aprendido en los últimos videos para reportar tus botones por cable para que al hacer clic en los botones, salten a las páginas correctas. Después descarga la app Figma. Creo que ahora solo aparece como Figma. Deberías encontrarla. Tiene la opción de espejo. Lo encontrarás en Google Play y en la tienda de aplicaciones. Así se llama y pruébalo. Haga clic en los botones, vea si funciona. Si por alguna razón no puedes hacer que la app funcione, la app descargable De hecho, solo puedes ir a figma.com slash Mirror, y puedes usar eso también Eso lo haces en tu teléfono. Te voy a pedir que inicies sesión. Es una alternativa. Entonces, cuando estés en la aplicación, inicia sesión en ella, prueba tu diseño. Lo que estás buscando es solo hacer algunos ajustes de luz ¿se puede hacer clic en los botones? ¿Son lo suficientemente grandes? ¿Es legible el texto? Una de las grandes cosas que podrías encontrar un poco de bono por este video es que aquí está ahí el carrito de compras. No me he amañado. Debería serlo. Vayamos al prototipo. Vamos y se hace clic en eso. Vas a la página de pago. Lo único que podría pasar es que estos botones bastante pequeños. Es difícil de tocar o tal vez cerca del menú. Entonces, lo que podrías aprender a través tu creación de prototipos es un zoom in Voy a decir, en realidad, esto tiene que estar un poco más lejos de esto, así que en realidad puedo hacer clic en él con mi dedo grande. La otra cosa que puedes hacer es que dependiendo de cómo tengas tu ícono, podrías haber elegido uno diferente. Podría estar funcionando de manera diferente. Vamos a pasar. Es bueno para diseñar. Digamos que quiero que el área en la que se puede hacer clic sea más grande, pero no el ícono real dentro Quiero que el icono se quede ese es el tamaño adecuado adecuado, pero quiero que el área que está activa en la que puedo hacer clic sea más grande. Tengo la herramienta de movimiento, en este caso, lo que está pasando es que está escalando todo dentro. nos estamos adelantando un poco Aquí nos estamos adelantando un poco, pero es algo que quizás quieras hacer. Cúbralo correctamente más adelante. Hagamos doble clic para entrar dentro de ese marco. Si no tienes marco, te mostraré cómo hacerlo en un segundo. Este material dentro de mi corte de icono está configurado a escala. Puedo ponerla en el centro donde dice restricciones. Que si hago click off y hago clic de nuevo en el marco padre, puedes ver aquí, no el vector, el marco que está alrededor del exterior. Ahora mira lo que pasa. Puedo hacerlo más grande ya sabes, el área a su alrededor más grande, pero el icono permanece igual. Hay más lugares para que tu dedo realmente toque y haga clic. Si no tienes uno, digamos que tengo un ícono y lo hace, y voy a copiar y pegar eso. Digamos que me has seguido antes y no tenías marco, solo tienes el ícono ahí sentado. Lo que puedes hacer es hacer clic derecho en él y decir selección de fotogramas. Ahora estás en donde yo empecé. Vamos a entrar y por defecto, vamos demasiado lejos por dentro. Vamos el vector aquí. Oh. Bien, ese es un buen punto. Cuando hago clic lo suficiente, obtengo pequeños íconos. Lo que realmente quiero hacer es tener el fotograma seleccionado, corregir el vector y luego obtendrás si está configurado a escala o al centro. Entonces ahí tienes. Pocos bonos para las personas que hacen los proyectos de clase. Puedes hacer que el marco sea más grande, pero no las cosas que hay dentro. Bien, pruébalo cuando termines, lo que quiero que hagas es que te hagas una foto del marco de tu perdón. Toma una foto del teléfono, ¿de acuerdo? Solo para demostrar que lo has hecho y subir la foto de tu teléfono con el proyecto en él, el marco Y, y subirlo a la sección de proyecto. Me imagino a mucha gente como, no tengo un segundo teléfono o un amigo o un compañero o un niño o alguien que tome una foto de tu teléfono. Bien, puedes simplemente subir una captura de pantalla si quieres. Y una vez que lo hayas hecho, lo que quiero que hagas es que te excites. No lo sé. Apuesto a que probablemente tengas lo mismo. Cuando lo pones en marcha en tu teléfono, hay algún tipo de magia. Incluso yo, he hecho 1 millón de estos. Yo soy como, Cuando lo veo en mi teléfono y empiezo a trabajar en él, tocando los botones, estoy como, Oh. Es real. Es en vivo. Es emocionante. Espero que también lo sientas. Así que ponte a practicar, prototifícalo, haz algunos ajustes. Tal vez las fuentes no tengan el tamaño correcto, tal vez no se pueda hacer clic en los botones, y luego subirlo a la sección de asignación Sección del proyecto, incluso. Todo bien. Disfrutar. Te veré en el siguiente video. 26. ¿Qué son la animación inteligente y los retrasos en Figma?: Hola. Oye, es hora de aprender a hacer animación básica dentro de Figma. Bien, vamos a conseguir esta flecha para animar nuestras felicitaciones Tu compra está en su página de camino. La animación es bastante interesante dentro de Figma. Es un poco rápido. Vamos a aprender algo llamado Smart Animate. Vamos a saltar en. Bien, primero arriba. Cambio uno. Simplemente dale todo en la página. Barra espaciadora, haga clic y arrastre. Vamos a hacer dos versiones de esta página de confirmación. Vamos a animar entre ellos. Para que puedas copiarlo y pegarlo. Voy a mantener presionada mi tecla KaniMaco de opción en una PC y arrastrarla hacia afuera. Entonces tengo dos copias de la misma. Y lo que quiero hacer es que vamos a animar esta flecha Lo que sucede en Figma. Es un poco extraño, es que básicamente sólo vamos a animar entre estas dos páginas y algo tiene que ser diferente Esta flecha va a ser diferente. Vamos a moverlo por aquí. Sólo muévelo un poco a la izquierda. Todo lo que hacemos es decir página de confirmación si voy a prototipo, y cuando este sea prototipado, cuando lo jugamos y lleguemos a la página de confirmación, quiero que luego vayan por aquí Simplemente dejaremos todos los impagos y le daremos una prueba Entonces vayamos a nuestro pequeño prototipo. ¿En qué va a estar? Vamos a usar presente. No, no usar presente. Presente está bien. Vamos. Voy a usar una pequeña versión para que todos podamos verla , así que vamos a obtener una vista previa. Teléfono Gigante. Voy a ir al VywPage y compro y luego va aquí Si hago clic una vez que se mueve. Obras. Lo que tenemos que hacer es agregar la magia. La magia en este caso es si hago clic en la página de confirmación y hago clic en esta transición entre los dos. En lugar de usar Instant, vamos a usar el que ignoramos antes de animar Smart Vamos a dejar todo por defecto y darle la misma previsualización. Vamos a cerrar esto. Voy a usar Shift Enter para abrir esa pequeña vista previa. No es turno para Dan. Es el espacio Shift. Cambia el espacio, y ahora, ve a las fotos y haz clic una vez que lo animé. Qué poco emocionante. Pero lo conseguimos. Nosotros lo hicimos. Buen trabajo. Primero la animación. Vamos a hacerlo mejor. En realidad, lo vamos a romper porque apuesto a que vas a romper el tuyo. Ahora bien, una de las cosas que quiero hacer es que no se movió muy rápido. Quiero que salga de la pantalla. Así que voy a moverlo por aquí. Puedes sostener Shift, así que aparece mientras lo arrastras en línea recta Genial. Entonces está por aquí. Voy a previsualizar desde esta página de confirmación. Si hace clic primero en esa, luego presiona Mayús barra espaciadora. Voy a empezar aquí en lugar de la página de inicio. Si no tienes nada seleccionado, empieza desde el primer fotograma. Pero si tienes seleccionado el nombre del marco, éste comenzará desde donde hayas seleccionado. Vamos a darle clic una vez y no funcionó. ¿Tipo de trabajo? Voy a usar mi flecha hacia atrás para volver una. Solo mis teclas de flecha o puedes presionar Restablecer. Solo uso mis flechas izquierda y derecha para ir adelante y atrás. B, haga clic una vez no funciona. ¿Por qué no funciona? Esto pasa mucho. Si las cosas se están desvaneciendo, está roto Lo primero que vamos a hacer es que voy a dar click en el título aquí arriba, acercarlo un poco más. Voy a sostener Shift y agarrar ambas páginas de confirmación y moverlas para que tengamos algo de espacio. Es muy común solo mantener las animaciones un poco separadas, así que tienes algo de espacio. Este tipo de aquí, ¿qué está haciendo? Si le pongo ahí, bien, mantenga turno. Todavía no va a trabajar. Porque es porque echarle un vistazo a las capas. Tengo mi página de confirmación uno, dos, y estoy en mi página de capas y puedo ver mi panel de capas por aquí. Archivo, móvil, wireframe, puedes ver esta página de confirmación y esta, si los giro y los cierro, este tipo, línea 13, solo está pasando el rato solo No está en ninguno de estos marcos. Está jugando esta página. E ignorando a este tipo. Lo que hace, va, bueno, él no está aquí, sino que aparece aquí ya que simplemente nos desvanecemos Lo que tenemos que hacer es asegurarnos de que esto esté en esta página. Puedes hacerlo arrastrándolo. Ya ves, está dentro de la página de confirmación. Mira, él está ahí dentro, pero si lo arrastro, hago clic enseguida, mantén el turno, sale. Lo que puedo hacer es simplemente forzarlo. ¿Qué página es? Vamos a nombrar estos. Haga doble clic en él, confirmación uno. Confirmación dos, solo para que pueda saber la diferencia entre. Quiero que esté en la página uno de confirmación. La línea U 13 debería estar ahí. Desaparece. Está ahí dentro. Simplemente está oculto porque está recortado en esta página Dale una oportunidad y míralo. Conoce dónde está ahí. Vamos a darle un adelanto. Da click en este, Shift space. Vamos a darle clic. Nosotros lo hicimos. Se animó en. Somos genios. Vamos a cerrarlo. Una de las cosas que puedes hacer es que si estás haciendo animación que sale de la página es que puedes hacer clic en esta página de confirmación y uno de los beneficios de un marco sobre un grupo, que es esta página aquí está por aquí Si voy al diseño, aquí hay una opción que dice contenido de clip. ¿Ves este de aquí? Siento que aprendimos esto antes, ¿no? No puedo recordar. Bien. Ha sido el fin de semana. Ah, así que apaguemos eso y significa que en realidad lo puedes ver. Se puede ir. En realidad, quiero que esté un poco más cerca o un poco más lejos o cambio el tamaño o ancho del trazo. Cuando lo previsualizo, cambias la barra de caras, vuelves a hacer clic, sigue funcionando igual. Simplemente no está recortada. Ahora bien, en realidad no importa cómo publiques esto, ya sea recortado o no A veces quieres que el recorte solo esté apagado mientras estás trabajando y luego volver a encenderlo cuando termines el proyecto Otro par de cosas que podrían destrozar tu Si la tuya todavía se está desvaneciendo, todavía te estás desvaneciendo Comprueba que esté dentro del marco derecho, así que tal vez nombra. La otra cosa que es importante saber es que básicamente lo que está haciendo es decir, conseguí estos dos fotogramas y Dan decidió animar inteligentemente entre los dos Qué es lo que está viendo todas las cosas de aquí dentro. Si algo se mueve, lo animará, lo cual es increíble. Pero necesita saber de qué está hablando. Digamos que tengo la línea 13 y tengo la línea 13. Si de alguna manera, por la razón que sea, los has copiado y pegado y la línea 14 de esta, no sabrá qué hacer Tiene que ser el mismo nombre. 13 y 14 no va a funcionar. Vamos a darle una oportunidad, va a hacer clic, y va a desvanecerse. Estás como, se está desvaneciendo. Descolorarse significa roto porque es como, A, esta cosa simplemente aparece en esta página, sólo voy a hacer que aparezca Solo tienes que asegurarte de que tus nombres sean los mismos. No importa cómo se les llame siempre y cuando sean iguales. Si aún no está funcionando, lo que puedes hacer entre tus dos fotogramas es digamos que este no está funcionando. Estoy como, no puedo hacer que funcione, Dan, deshacerme de él. Lo que puedo hacer es agarrar esta versión aquí, copiarla, clic en el título del marco y pegarla, y verás que está pegada Línea 13, Línea 13, y luego animarla Asegúrate de que no salga de la página. Es un poco difícil de ver. ¿Ves si hago girar estos hacia arriba? línea 13 en realidad ha salido de esa página, así que necesito arrastrarla de nuevo. Eso lo hemos aprendido. A veces eso solo puede resolver tu problema. Vamos a darle ag, haga clic una vez. Lo siguiente que quiero hacer es esto clicando una vez negocio. Obviamente, la gente no va a hacer clic después de llegar a esta página. Vamos a aprender otra técnica de animación. Vamos a hacer clic en la confirmación uno. Vamos a asegurarnos de que estamos en prototipo. Lo que vamos a decir es el momento en que está en esta interacción llamada tap, ir a confirmación. En este caso, va a la confirmación dos. O puedes dar click sobre esta Y aquí. Materia. Bien, entonces no queremos que esté de barril. Queremos este otro. Queremos otro que diga después de un retraso de cuánto tiempo, simplemente lo dejaremos como predeterminado, luego iremos a la confirmación dos. No va a pedir permiso. Sólo va a esperar. Sabes cuántos segundos es eso? Es correcto 0.8. Bien, vamos. Tiro plus. Y ahora, C simplemente se fue por su cuenta. Voy a usar mis llaves Ara para ir. Volver a la página principal. Puedes usar izquierda y derecha. Quiero encontrar la página principal. ¿Dónde estamos? Ahí estamos. Vamos a Por ahora. Vamos a comprarlo y esperar. Espera, espera, espera, espera. Mira eso. Lo hizo por su cuenta. Eso se llama después de retraso. Se puede jugar con el tiempo. ¿Bien? Lo tenemos a 0.8. Podemos llegar a ser 100 milisegundos. Entonces es básicamente que no se puede poner en cero. ¿No se puede poner en cero? Sí, hay que poner en un milisegundo. Podemos instantáneamente después de un milisegundo, ir. La otra cosa que podríamos mirar es que puedes hacer clic y arrastrar estos, por cierto, si están en el camino. Muchas veces pueden terminar así. Solo necesitas hacer clic y arrastrar esta parte superior de la misma para moverla hacia arriba. Veamos nuestra flexibilización. Nos fijamos en la flexibilización. Hagamos el que más me gusta, que es la facilidad de entrar y salir atrás el pequeño rebote a él. ¿Qué tan rápido debería ser? Hagámoslo 1 segundo y darle un rollo. Tarda demasiado. Hay mucho de eso cambiando la duración, Shift plus, solo comprobando demasiado rápido. Restablecimiento alfa. Eso se siente bien. Ahora, sólo hemos hecho el movimiento. Puedes animar cualquier cosa. Siempre y cuando no cambies el nombre, puedes animar cualquier cosa. Vamos a encontrar. Hagamos clic en la confirmación uno, volvamos al diseño. Terminarás alternando mucho entre estos dos. No quiero ponerme demasiado pesado en el atajo, así que si lo bloqueas si ya lo llenas. Pero si estás buscando los atajos, shift E alterna entre el diseño y el diseño del prototipo y el prototipo Mantén pulsada la tecla Mayús tanto en Mac como en PC y solo toca E y alternaremos entre ellas. Entonces quiero estar en el diseño. Vamos a recortar el contenido para que podamos ver esta cosa y voy a decir, cambiemos la transparencia del trazo para que podamos hacerlo cero. Se desvanece a medida que aparece. Tú cambias el espacio. Ves que se desvaneció. Realmente no puedo ver, pero sí. ¿Dónde estás ahora? Bien. Se ha ido. Línea 13. Ahí está ahí. Volvamos la apariencia de nuevo a 100. Podemos decidir sobre el triángulo. A lo mejor el triángulo no tiene para empezar y crece un triángulo. Vamos a darle una oportunidad a eso. Voy a moverlo solo en un poquito para que podamos ver realmente las animaciones con las que nos falta. Restablecer. Bien, no creo que puedas crecer esa. Sí, como que creció. Ahí vas. Simplemente no lo pude ver realmente. ¿Puedes verlo como que aparece? Eso no es tan divertido, Dan. Cambiemos el peso del trazo. Intenta no hacer click sobre estos. estas se les llama variables. Los veremos más adelante. Mira estos son pequeños diamantes. Están en muchas cosas. Haremos variables más adelante. Son bastante hardcore. Trate de evitarlos. Vamos a darle una oportunidad a esto. Bien. Para refrescarse, entra una flecha gigante. Bien. Entonces eso es todo. Eso es la animación, los fundamentos de la animación y la figma. Tienes dos marcos, algo es diferente en ambos. Siempre y cuando las dos cosas aparezcan en ambos fotogramas, no se puede hacer que no aparezca aquí. No puedes eliminarlo de este marco y solo esperar que aparezca por aquí, lo hará, pero simplemente se desvanecerá. Necesitas dos cosas, el mismo nombre en ambas, y debes asegurarte de que realmente estén en los fotogramas entre los que estás animando Echa un vistazo a estas capas aquí, ciérralas todas. Me parece que esa es la forma más fácil de ver. ¿Hay algo pasando el rato aquí que no debería ser? Entonces solo haz un cambio entre ellos. Ya sea movimiento o tamaño o color o lo que quieras. El gran truco aquí es cambiar a prototipo, shifty o hacer clic en el botón aquí arriba y solo asegúrate de esta página, haces clic en mantener y arrastrar y asegurarte de que esté animado entre los dos y smart animate y los animará inteligentemente entre ellos Si accidentalmente tienes dos interacciones como acabo de hacer, lo que haces es hacer clic en el fotograma, dices, cuál quiero tocar o retrasar. Quiero deshacerme de este grifo. Quiero mi retraso y me muevo a la derecha. Eso es lo básico de la animación dentro de Figma. Es un poco torpe. Si eres de cualquier otra herramienta de animación que tenga una línea de tiempo, así es como es en figma, pero ahora sabemos, es un poco torpe No hacemos mucha animación en esta etapa de wireframe. Pero es divertido y quiero presentarlo antes para que podamos hacer cosas más complicadas más adelante. Bien. Eso es. Animación dentro de Figma. Eso estaba destinado a ser el final y grabo las intros al final Y luego estaba grabando la intro y la mía se rompió. Yo estoy como, ¿qué hacen? He vuelto para mostrártelo. Voy a previsualizar desde el checkout aquí, así que Shift plus. Entonces tuve esta que gran flecha apareció a lo largo. Estás como, ¿De dónde vino eso? ¿Alguien más tiene ese problema cuando está probando? La flecha se mueve de esa manera. ¿Qué está pasando? ¿Y cómo lo arreglamos? Tenemos una animación entre el checkout y la página de confirmación. Es este pequeño fideo de aquí. El botón va hasta aquí y dice, barril, quiero que se deslice dentro. Estoy usando esto dentro y fuera. Lo que está haciendo es que se desliza de esta manera. Estaba un poco de animación. Así que ya ves que toda la página se desliza a través. Esa cosa ahí se puede ver porque dejé el bajo diseño chiflado. Bajo diseño, dejé el contenido del clip apagado. Si lo apago ahora, debería funcionar. Porque lo he dejado fuera, incluso cuando lo previsualizo, esto se puede ver porque la animación entre aquí y aquí es una diapositiva, toda esta unidad se desliza a través, va Zook, y podemos verla en esta transición Hay dos formas de deshacerse de él. Esta donde digo esta página, voy a recortarla para que quede oculta. A ver si eso funciona. Bastante seguro que funciona. Bien, trabajé. La otra cosa que podemos hacer es esto aquí cuando se trata de prototipado entre los dos En lugar de hacer todo ese deslizamiento, solo podemos ir instantáneamente. No hay visual entre estos dos. Simplemente va a pensar y ya estoy aquí, eso va a funcionar también. Espero. De cualquier manera, probablemente sea más fácil recortar el contenido después de haber terminado de trabajar en él. Podrías haber tenido ese problema. Yo tenía ese problema. Ahora vamos a hacer el final final final final. Ver en el siguiente video. 27. Proyecto de clase 05: Mi primera animación: Hola, es tiempo de proyecto de clase. Llegamos a hacer una animación. Quiero que hagas lo que hicimos en el último video, animes algo en la página de confirmación No tiene que ser la flecha. Si eres un poco nuevo en Figma, te está encontrando esto bastante complicado, sobre todo en animación es simplemente hacer lo que hicimos en el último video. Eso está totalmente bien. Si te sientes valiente y tienes un poco más de experiencia, estás como, Sí, puedo hacer esto. Prueba otra cosa. Prueba bola, cuadrado, tick, icono, algo más para animar. No me importa lo que sea. Y cuando termines tus entregables, quiero que solo tomes una captura de pantalla de tus dos páginas A, las dos páginas de confirmación. Eso es totalmente. Subirlo a los proyectos. Si eres una persona que sabe cómo hacer grabación de pantalla, haz una vista previa, graba tu pantalla y subirla. Puedes subir enlaces de Vmeo o YouTube. Pero si eso está un poco fuera de tu alcance en este momento, no te preocupes por eso. Captura de pantalla está bien. Sin embargo, cuando estés iniciando, echa un vistazo a los proyectos, mira lo que otras personas han hecho. Sí, consigue algunas ideas, apropiado, copia, agrega tu propio sabor a ello. Y hay un poquito de ustedes podría conseguirlo primero pop. La mayoría de la gente tendrá un pequeño problema para resolver la torpe animationne Eso es totalmente esperado, no te golpees si estás como, un poco de juicio y era pasando. Tal vez tengas que volver a ver el último video. Usted conseguirá el cuelgue de ello. Todo bien. Eso es. Te veré en el siguiente video. Feliz Animate. 28. Compartir y comentar un archivo Figma con las partes interesadas: Uno. En este video, vamos a ver cómo compartir tus archivos con las partes interesadas. Podría ser tu cliente, cliente, jefe, amigo. Quieres compartir el wireframe con ellos agradable y temprano para que puedan ver lo que estás haciendo y darle una prueba y decir, estás en el camino correcto Te voy a mostrar las mejores formas de compartirlo y también cómo salir y trabajar con comentarios. Estamos trabajando con este tipo llamado Doug. Doug es mi alter ego no tan inteligente. Te voy a mostrar cómo facilitarle poder trabajar conmigo como UX. Salta en. Para compartir tu documento con tu cliente, cliente, stakeholder, quien necesite verlo. Me gusta compartir el mío desde el principio. Simplemente haz clic en el botón gigante Compartir. Voy a dar click en éste que dice Copiar Enlace. Dice Linked copiado. Entonces solo puedo pegar esto en un correo electrónico. Entonces cualquiera con este enlace puede verlo déjame abrirlo en un navegador. Todo bien. Esto es lo que ve su cliente cliente stakeholder. Yo soy el cliente. Mi nombre es Doug y Dan está haciendo algún trabajo para mí y me acaba de enviar este enlace en un correo electrónico Lo he hecho clic, lo abrí, y esto es lo que veo. No necesito un login, no necesito una contraseña. Puedo ver esta cosa, puedo dar click y arrastrar por ahí. No hay mucho que pueda hacer. Pero puedo echarle un vistazo, aprobarlo, digamos, estás en el camino correcto. A lo mejor podrías cambiar esto, ¿por qué estamos haciendo esto? Puedes iniciar ese diálogo temprano. Simplemente usando el botón de compartir. Ahora bien, si estás practicando esto en casa y estás copiando y pegando el enlace en otro navegador, necesitas pegarlo en una ventana de incógnito, algo que no esté registrado en tus cuentas porque de lo contrario, usarás el enlace y sabe que estás logueado en Figma, así que estaremos en Infigma así que estaremos Necesitas usar un navegador, o bien necesitas cerrar la sesión de un Figma en tu navegador para probarlo o abrir una ventana de incógnito No tienes que hacer esto. Es más de Bien, así que soy Doug, el cliente cliente A mí me gusta. Si necesito hacer algo más, necesitan iniciar sesión. Es gratis. Pueden registrarse con Google o simplemente registrarse con su dirección de correo electrónico. Déjeme hacer eso. Ahora que estoy conectado con Doug, no tienes que hacer esto Esto es solo mostrarte lo que ven los otros clientes. Creo que es útil ver lo que pueden hacer. Es un poco complicado. Tenemos todas estas cosas pasando. Pero lo genial de esto ahora es que pueden hacer comentarios. Ese es el grande. Pueden entrar en comentarios y Doug puede decir, Ar Dan, ¿Qué onda con ¿Por qué no hay derrame cerebral aquí? Doug publica eso y lo genial de ello es, volvamos a cambiar a estar abajo. Cierra eso abajo. Lo que verás es, mira, antes que nada, ahí está Doug, lo cual es realmente raro. Puedes ver este comentario. Mira, ¿por qué está Astra? Yo escribí eso. No tengo que leerlo. Y lo que puedo hacer es que solo podamos comunicarnos a través de estos sencillos comentarios. Puedo hacer actualizaciones. Puedo hacer cosas así y decir: Bien, Doug, perfecto, carita sonriente No se lo digas a nadie. Se puede decir, L, yo lo he hecho. Tick, así que eso está resuelto y se ha ido. Otra cosa interesante Figma es que es una verdadera herramienta colaborativa, sobre todo cuando estás trabajando con otros diseñadores, ¿ves a Dogs ahí? Déjame mostrarte. Déjame organizar las pantallas. Este es Daniel. Este es Doug, mi cliente, y actualmente está viendo el documento Lo raro de esto es, mira, puedes ver a Doug moverse. ¿Puedes ver en la mano derecha aquí? Ese es Doug moviéndose. Puedo verlo moviéndose en mi pantalla, está en vivo. Lo mismo de mi lado. Me puede ver moviéndome, lo que podría asustar a Doug De todos modos, la otra cosa genial de que esta sea una herramienta de colaboración en vivo es que puedo leer la mente de Doug Puedo verlo hurgando en este letrero de aquí, y sé que le preocupa el color verde Puedo decir que eres de color verde. Bueno, ¿qué fue un derrame cerebral? No, fue esto. Puedo decir, vamos al diseño, vamos a actualizar el trazo se puede ver en el lado derecho ahí, está actualizando. Estoy usando este lado izquierdo aquí cuando estoy diseñando, pero Doug puede verme mover cosas y ajustarlas en vivo Mira esto. Lo voy a mover por ahí. Eso es más fácil. Mira, es una herramienta de colaboración en vivo. Lo bueno de ello es que Doug no necesitaba una cuenta paga infigma Él puede revisar mi trabajo. Él puede mantenerse al día con ello. Puedes volver a iniciar sesión y ver lo lejos que tengo. No tienes que reenviar un nuevo enlace y un nuevo correo electrónico. La otra cosa es, volvamos a ser Dug. Yo soy Doug. Puedo dar click sobre esto y puedo previsualizarlo. No creo que puedas previsualizarlo sin haber iniciado sesión. Pero también puede pasar y probar las animaciones. Lo último que quiero mostrarte es que todavía soy Doug, y Doug podría encontrar esto bastante Hay muchas cosas con las que no pueden meterse. Pueden manchar cosas, pero no pueden moverlas. Hay cosas como los anchos y alturas de píxeles, todo tipo de cosas por aquí, podrías estar como, Oh, eso va a asustar a Doug Doug no es experto en informática. Necesito mostrárselo, pero tiene que ser mucho más sencillo. Lo que puedes hacer es dentro de una Figma. Estoy compartiendo esto. Puedo decir compartir. Puedes usar esta opción aquí. Es Copiar Prototipo link. Entonces te saltas todo esto y vas directo al prototipo. Vamos a sacarlo a colación, ventana de incógnito, así que no está conectado como yo Bien, necesito que me caven. Doug inicia sesión y va directo al prototipo, y pueden trabajar con él. Pero simplemente no obtienen todos los extras. Además, pueden hacer cosas. Es un poco duro. Ver aquí arriba. Ahí está el comentario. Puedo decir, ¿por qué es este 99? Vuelve a mí en mi sitio así como a Dan. Esta podría ser una buena versión más fácil para ellos. Echa un vistazo rápido al comentario, Bec afigma, ojalá veas Bec afigma, ojalá veas. Ahí está ahí, Doug. Y por último, puedes responderle a Doug aquí. Se puede decir, ¿por qué es este 99? Esto es solo un marcador de posición. Ve, y vuelve a Doug de este lado. Mira, en respuesta, ahí está ahí, solo un marcador de posición. Fresco. Todo bien. Eso es compartir con las partes interesadas para que puedan verlo y comentar todo desde Figma. Todo bien. Eso es. Te veré en el siguiente video. 29. Qué son los borradores de proyectos de equipos en Figma: Uno. En este video, vamos a compartir nuestros documentos para que puedan ser editados. Vamos a toparnos con algo llamado equipos y proyectos y archivos y páginas. Es la forma en que Figma estructura, es cosas de organización de archivos Me pareció bastante confuso cuando empecé, así que quiero hacer un video sobre él aquí para que sepas dónde está todo y ¿qué significan estos toms? Vamos a saltar. Todo bien. Si necesitamos compartir esto con alguien más que necesite editar este trabajo, además de muchas otras cosas. Muchas características están ligadas a esto. Vamos a compartir. No puedo decir, Doug, puedes editarlo. Eres colega, necesitas trabajar en ello. Eres desarrollador, necesitas trabajar en ello. Quiero moverme para editar. Va a decir, oye, necesitas trasladar esta cosa a uno de tus proyectos de equipo. Vamos a explicar eso. Porque si voy a compartir de nuevo también, ves que aquí dice, para invitar a la gente a editar, mueve este borrador a tus proyectos. ¿Qué son todas esas cosas? Esto me confundió cuando empecé, así que te lo explicaré. Vamos a la casa. Estamos en recens lo cual es normal. Tienes esta cosa aquí, un equipo. Dentro de este equipo cuenta con borradores y proyectos. Oye, entonces te dan un equipo gratis. Think team es tu empresa para la que estás trabajando. Esto podría ser traer su computadora portátil y es posible que no necesite más equipos. Puede que solo tengas que traer a tu equipo portátil. Pero si eres freelancer, podrías tener cuatro clientes, 20 clientes, y todos son solo equipos separados, diferentes empresas en las que estás trabajando. Del lado de ese equipo, tenemos borradores y proyectos. Borradores cada vez que haces algo nuevo, termina en el borrador Entonces cuando necesites que sea editable a alguien más, compártelo para que puedan trabajar en él, necesitas moverlo a uno de estos proyectos Eso es lo que esto preguntaba antes. Dije, oye, tienes que asegurarte de pasar esto de los borradores a uno de tus proyectos para uno de tus equipos. Sólo tenemos un equipo. Puedes tener un solo proyecto gratis dentro de tu equipo. Ese proyecto podría ser, en este caso, es nuestro sitio eCom, pero puede que necesites otro Ject que tal vez tenga ver con otra cosa dentro de la empresa. A lo mejor es el flujo de inscripciones, lo mejor es la rebaja de verano. Puedes crear todos estos proyectos. Puedes darles uno por defecto gratis, y si necesitas más, aquí es donde cruzamos al plan de inicio a profesional. Esto va a cambiar, los precios serán diferentes. Se meten con nosotros todo el tiempo. Pero aquí es donde podrías decidir que en realidad, necesito un asiento. Un asiento completo es de 16 mi caso euros al mes. Será diferente en todo tipo de países diferentes. Mira aquí, el limitado es que obtienes un proyecto. Eso es esto aquí en los casos nuestro sitio web econ, pero es posible que necesites un segundo, que podría ser tus campañas en redes sociales Puedes tener tres archivos ahí dentro, y la otra limitación es que solo puedes tener tres páginas por archivo. Vamos a desglosarlo. Si ya lo tienes, estás como, Sí, no lo vuelvas a cubrir. Salta al siguiente video. No hay nada. Solo voy a cubrirlo de nuevo solo para asegurarme de que sé que necesitaba este video cuando estaba empezando por primera vez . Tenemos un equipo. Tenemos la cuenta gratuita, así que solo tenemos un proyecto. Dentro de ese proyecto, puedo tener tres de estos, los archivos de diseño que hicimos. Yo he hecho éste. Puedo hacer otra para el diseño y va a ser un marco va a ser digamos que estamos diseñando alguna publicación de Twitter en las redes sociales. Es decir, dos expedientes. En mi proyecto, puedo tener tres. Sin embargo, el truco es que puedes tener tantos borradores como quieras Simplemente puedes dejarlos en borradores. Como freelancer, eso es quizá todo lo que necesitas. Solo necesitas moverlos a los proyectos del equipo justo al final para exportarlos, para enviarlos al desarrollador. Puedes llegar bastante lejos con la cuenta gratuita. Lo último fue cuántas páginas se te permiten. Mira esta de aquí, tenemos las páginas 1, dos y tres hasta el momento. Esa es la cantidad de páginas que puedes tener en un archivo de diseño. Eso es en un proyecto de equipo. Ahí vas. Un proyecto, tres archivos, y sólo pueden tener tres páginas. Eso tiene sentido. ¿Qué hacemos? Tenemos que movernos queremos que el reparto vaya para este de aquí. Recuerda, decía: Oye, necesitas mover esto de tus borradores a tus proyectos Podemos hacerlo desde aquí. Sólo tienes que hacer clic en el botón de mover, eso lo hará. Sabe a dónde tiene que ir. Simplemente lo haremos de forma manual porque quiero mostrarte. Estoy en borradores. Aquí están todos mis archivos. No necesito eso para estar en mi proyecto, porque eso fue solo una cosa rara de la barra de estado que copié y pegué. No necesito esa. Este, aunque, lo hago. Lo que puedo hacer es hacer clic y arrastrarlo. Puedo decir, entrar en mis proyectos. No puedo hacerlo porque no puedo verlo. Solía ser Abdu Ahora lo que haces es hacer clic derecho en él y decir mover archivo. Quiero trasladarlo a ese equipo, por favor. Se ha ido de tus borradores. Si voy a proyectos, ahí está aquí, mi equipo Proyecto. Ahí está mi pequeño archivo . esta sin título que no necesito Me voy a mudar a la basura sólo tengo tres. No quiero desperdiciar ninguna. Es solo un nuevo hogar para ello. Pero si vuelvo a ese mismo archivo que aún tengo abierto, ya puedo ir a Shear y ese pequeño estandarte se ha ido de arriba y puedo decir que Doug ya puede editarlo Él puede mover cosas, cambiar fuentes, básicamente hacer todo lo que yo pueda hacer. Entonces esa es una de las cosas con las que podrías toparte. Quiero mostrarte desde el principio, solo para presentar proyectos y equipos y dónde podrías empezar a topar con algunas de las características pagas Ya puedes ver que mi archivo está dentro de mi proyecto, dice: Oye, sólo se te permiten tres páginas. Quieres más, tienes que actualizar. Bueno, actualízate más adelante en el curso para mostrarte algunas de las características premium pro. Pero por el momento, sólo vamos a ignorar eso. La advertencia de malezas aquí es en este momento. Bueno, mientras Figma haya existido, puedes tener más de un equipo Entonces, cambiemos el nombre de este equipo porque ese es un nombre gracioso para un equipo. Bien, voy a entrar aquí. Entonces he hecho clic en el equipo. Sube aquí y voy a renombrarlo y mi uno va a llamarse Scott wallets. Ese es el cliente para el que estoy trabajando. Pero lo que puedo hacer es crear un nuevo equipo. Esta podría ser la compañía de portátiles Binger y estoy trabajando para ellos. No necesitas ningún colaborador. Voy a elegir el plan de inicio, y puedes ver aquí arriba, tengo dos equipos. Lo bueno de ello es que el segundo equipo que hice obtiene su propio proyecto y sus propios tres archivos con sus propias tres páginas. Llega bastante lejos con una cuenta gratuita. Bien, así que voy a volver con Scott Wallets para ver todos estos proyectos. Ahí está ahí mi eco, cierra eso abajo, ató todo, y eso es todo. ¿Eso fue útil? Lo sé. Siento que podría haberlo hecho más confuso de lo que es. Quizá no. Ojalá fuera útil. Eso es. Pasemos al siguiente video. 30. Cómo me inspiro para los proyectos de UX: Uno. En este video, vamos a estar pasando de nuestro wireframe, bien, donde solo son cuadrados y texto plano a nuestro modelo de alta fidelidad Y antes de hacerlo, vamos a buscar ideas sobre cómo podríamos pasar de una especie de wireframes en blanco a cómo poner fuentes y colores y estilos y cómo se ven las cosas Y es una especie de parte divertida del proceso donde buscamos inspirarnos en los demás. Entonces déjame mostrarte los lugares a los que voy para inspirarme antes de empezar a hacer el tipo de maquetas de alta resolución y Figma. Bien, entonces hay un montón de lugares en los que podrías tener los tuyos. Estos son los lugares a los que normalmente golpeo primero y algo así como driblar o Behance o cualquiera de estos sitios de bibliotecas de stock, lo que necesitas hacer es que estés buscando el término es el término es kit de interfaz de usuario generalmente lo reduce a más cosas móviles para sitios web en lugar de solo cosas de diseño genérico. UIKits y solo puedes pasar y estás como, oh, eso me gusta, y haces una captura de pantalla de ello, y vamos a empezar a ponerlos juntos en un moodboard Pero solo pasa por buscar cosas que te gusten. Utilice el término kit de interfaz de usuario. puedes escribir UX, solo para cortarlo y comenzar a realizar capturas de pantalla Behance es otra buena. Es enfocarse en la web, lo cual es bueno para nosotros, empieza a tomar capturas de pantalla, cosas que te gusten. Podrías pagar por un kit de uno de estos sitios. Aquí no estamos robando, solo estamos obteniendo ideas de cosas que creemos que funcionarán usando elementos invados o digamos, Adobe stock, también tienen buenas y luego pasan a otras. A mí me gustan estos. Estos son unos premios. Bien, esto es css design awards.com, y este de aquí se llama Premios con ThreeWST es realmente útil porque estos son solo grandes diseños que se han enviado para premios, así que es un muy buen lugar para comenzar a buscar cosas Usemos cualquiera de estos dos. Me gustan los premios porque si tecleo billetera, lo recortará a cosas que tengan billeteras dentro, lo cual es realmente genial. lo que sea que estés trabajando, escribe eso y lo recortará. Ojalá encuentres algo que quizás no te guste el mío. No hay muchas carteras reales. Hay una billetera real. Todas estas parecen ser billeteras criptográficas digitales. Bien. Pero independientemente, es muy útil pasar y echar un vistazo. Lo que es realmente bueno de este sitio de premios también es que puedes explorar. mí me gusta mirar a los nominados, no sólo a los ganadores, y me gusta entrar aquí y decir etiquetas Aquí hay un montón de buenas etiquetas. Digamos que tienes que hacer una caja, porque nunca antes las habías hecho y quieres ver cómo se ven las de otras personas. Así que he escrito en la caja. No hay checkout. Bien, no está funcionando porque no hay check out. No estoy haciendo una búsqueda. Estoy buscando etiquetas. Puedes desplazarte por las etiquetas. Sé que ahí hay pie de página, así que premios de diseño de pie de página. ¿Quién ha sido nominado? Bien, para que puedas pasar y decir, Bien, veamos este sitio Y va al sitio en sí mismo. Vamos a cerrar en los pop ups. Echemos un vistazo a su pie de página. Incluso llegar a su pie de página. De todas formas, entiendes la idea. Se puede ir a través y escoger cosas específicas. Podrían haber cambiado su sitio desde entonces. No, eso es promovido. He hecho clic en un anuncio Buen trabajo, Dan. Veamos el Premio Pie de Página de estas personas. Estoy viendo los diseños. Vayamos al sitio web real. ¿Cómo se llega al sitio web real, Dan? Eso es. Usted hace clic en Visitar sitio web. Cambiaron este sitio con bastante frecuencia, así que para cuando llegues aquí, podría verse diferente. Voy a ir a éste y luego echar un vistazo a su pie de página. Echemos un vistazo. Oh, sí, es bastante bueno el pie de página, supongo. ¿Entiendes a lo que me refiero? Porque a veces estás rediseñando cierto elemento en tu proceso de diseño de UX, tal vez no un sitio web completo, así que eso es útil Vamos a cerrar esa. Otros que me gustan una página love.com Entonces estos últimos aquí son solo billeteras. Acabo de empezar a buscar billeteras de diseñador en línea a través de Google y solo se me ocurrió la billetera Ridge. Solo quiero ver, su página web y cómo han hecho las billeteras. Tienen esta cartera mecánica que es bonita y echemos un vistazo a algunas otras. Es solo una buena manera, no hay que solo mirar el diseño. Puedes mirar los sitios reales en sí. Intenta encontrar algunas marcas que te gusten, especialmente para billeteras, sé lo que es una billetera. Antes compré billeteras. Pero si tuviera que hacer algo como champú, que no estoy en el mercado desde hace mucho tiempo, podría tener que salir a sitios para ver cómo son los sitios de champú en este momento, qué buenos, qué marcas están haciendo bien, y simplemente pasar y empezar a tomar capturas de pantalla de las cosas que les gustan. Estás como, oh, me gusta la forma en que están haciendo esto por aquí, empiezas a reunir pedacitos para tu tabla de estado de ánimo. Inspírate. W Tuve que hacer una captura de pantalla en tu máquina en mi Mac's Command Chef cuatro y puedes arrastrar una caja alrededor de cosas. Se puede decir, me gusta este poquito aquí, poco voy a pedir prestado o al menos hacerme una idea en un PC, estoy bastante seguro de que es pantalla de impresión, pero vas a tener que simplemente verificar qué es en una PC Toma un montón de capturas de pantalla. Hazme saber en los comentarios también si eres como, no mencionamos este sitio por inspiración. Hazme saber en los comentarios si tienes los que te gusten. Me encanta esta parte del proceso. Inspírate, encuentra cosas, tíralas todas a un muelle, lo que haremos en el siguiente video. Te veré ahí. 31. Cómo crear un panel de inspiración en Figma: Bien, todos. En este video, vamos a ver poner nuestra inspiración en un mood board. Haremos una elegante y luego haremos la que esté por todas partes del lugar que normalmente uso. Pero necesitamos ambos. Uno va a un cliente, uno para nuestra propia referencia. Hagamos un moodboard ahora en Figma. Hagamos la primera forma desordenada que uses solo por tu cuenta. Básicamente es que podrías convertirla en tu propia página y quedarte sin páginas. Puedo volver esto a borradores y tener más de una página Pero estoy atascado con tres páginas, así que podría hacer una que sea una página de moodboard que esté totalmente bien Si estás en la cuenta profesional, podría ser bueno. Aunque estoy haciendo mis cosas de diseño, a menudo me gusta mi estado de ánimo o capturas de pantalla justo por encima de lo que estoy trabajando. No tengo que cambiar entre pestañas. Todo lo que hago es el largo camino es traer una imagen por si he tomado muchas capturas de pantalla, puedo ir por aquí. Hay una opción aquí abajo debajo del rectángulo aquí, dice, traer imagen. ¿Bien? Y puedo hacer clic en eso. Puedo ir a buscar en mis archivos de ejercicios. Hay uno llamado Mo Board. He puesto todo el mío aquí. No uses a los míos. Yo sólo los puse aquí como acaba de ir. Aquí están todas mis imágenes. Puedo pasar y decir, en realidad, quiero todos estos. Hago clic en el primero, mantengo presionado Mayús tomo el último, hago clic en Abrir, y tengo 21 imágenes y hago clic una vez para una, y puedo comenzar a dejarlas caer. Bien, entonces esta es mi inspiración todo hecho. Ese es mi mood board. A menudo, eso es suficiente para mí mientras estoy trabajando. Sigue haciendo clic. ¿Bien? Solo necesito esto arriba aquí mientras estoy diseñando y escogiendo fuentes, y estoy como, Oh, ese es un color genial, y podría cambiar esto para ver si puedo igualarlo. Eso es bastante. Obviamente puedes moverlos después. Se puede arrastrar el borde, con una imagen y simplemente reescalar. Podrías usar la herramienta oficial de báscula, pero la imagen por sí misma, solo puedes agarrar la esquina y puedes ir, eso es genial, pero la que realmente me gusta es esta cosa de aquí por alguna razón, estoy haciendo bonito y grande. Haremos cultivos y cosas más adelante, pero eso a menudo es suficiente para que empiece a trabajar Sin embargo, lo que podría hacer para ordenar el tablero es que puedes ver aquí abajo antes de que tuviéramos características del hogar, caja, muy sereno en sus propios pequeños marcos Tengo este de aquí. ¿ Qué hacen todas estas cosas? Puedes ver todos estos juegos de yonky pasando el rato, todas estas capturas de pantalla simplemente pasando el rato en mi hacia arriba, arruinando mi menú amoroso al costado aquí Lo que voy a hacer es que después puedes agregar un marco. Mira esto. Consigamos que ese sea un poco más pequeño. Mm, por favor, aguanta. Lo que puedes hacer es dibujar un marco alrededor de todo, para que puedas agarrar tu herramienta de marco. Si dibujas el marco por todo el exterior de todas estas cosas, simplemente se colocarán dentro de él ¿Ves que ya lo he cerrado? Se puede ver el marco uno que podría simplemente llamar a este moodboard. Sólo para que sea por lo propio. Puedo moverlo cuando termine con él. Entiendas lo que quiero decir, ¿ verdad? Hagamos un mood board más oficial de fantasía porque digamos que tenemos que volver con nuestro stakeholder. ¿Bien? Yo uso esa palabra, odio, pero es común. Stakeholders cualquiera que tenga que ver con este proyecto, podría ser hasta donde , no sé, algunos de los inversionistas o podría ser cualquiera que toque un proyecto como stakeholder, sería común, sobre todo si estás trabajando en una nueva marca para volver a ellos con un moodboard antes de empezar Trabajar en el iframe. Después el tablero de movimiento, una vez que están firmados y la dirección en cuanto al tema y el estilo, entonces vas y comienzas a hacer algunas maquetas de alta fidelidad Una buena manera de hacer esto es que podrías pasar y alinear todos estos y hacer que se vean bien y agregar algunas etiquetas y imaginarlo un poco. Encuentro que es más fácil empezar con la plantilla de otra persona. Entonces vamos a ir a la pantalla de inicio. Vamos a ir a plantillas y Herramientas, que estoy seguro que ya han renombrado Encuentra comunidad, y voy a escribir moodboard y ver lo que otras personas han hecho Vamos a encontrar uno, elegir uno. Puede que tengas que pasar por algunos para encontrar lo que quieres. Lo que estamos buscando, sin embargo, es ver este pequeño icono de lápiz y ese es diferente. Fig Jam es un poco diferente de software que fabrica Figma. Es como Merro o PowerPoint. Es una herramienta de pizarra. Es bastante genial. Pero queremos archivos Figma Voy a dar click en éste. Ahora recuerda, si digo abrir infig, esta plantilla o este archivo de comunidad en realidad ahora es parte de mis borradores para Scott Eso es mío ahora. Podría agarrar lo que necesito de él y eliminarlo o simplemente mantenerlo cerca. Lo que quiero hacer es encontrar un montón de cosas en esta. Echa un vistazo, recuerda cuando estés usando el trabajo de otras personas, mira las diferentes páginas. Las rejillas. Eso es lo que quiero. Sí, veamos las rejillas aquí. ¿Cuál quiero? Pesldk éste. Sin embargo, la única cosa es como antes que mencioné, si copio esto y lo traigo de vuelta a mi documento en el que están trabajando, no puedo poner otra página porque estoy limitado por la cuenta gratuita en este momento. Yo sólo voy a poner el mío por aquí y es una instancia de un componente, que no sabes lo que es. Si tiene un pequeño diamante por el momento hasta que aprendamos a trabajar con ellos, simplemente haga clic derecho en él y diga, L se adjunta instancia. Ahora solo es parte de este documento. Verás, es un marco regular con marcos dentro de él, y lo que quiero hacer es traer algunas imágenes. Poco atajo para traer imágenes es a menudo lo que me gusta hacer es abrir en mi buscador, así que ya no soy Figma. Esto es Mac o PC. Tener la ventana de tu buscador abierta, encuentra el archivo que quieras, y simplemente arrástralo y solo lo agregaré al documento. Me parece que a menudo es fácil ish. Yo hago eso de todos modos, solo arrastrarlos dentro. Entonces puedes ir quieres ir dentro de este marco aquí. Si no va dentro del marco, lo arrastras por ahí. Ver que se puso azul. Ahora sabe que tiene que estar adentro. Ahora ha saltado otra vez. Si no va dentro de la grilla derecha, entonces esta de aquí, marco cero. Quiero que la captura de pantalla entre dentro de ella. Ahora voy a moverlo delante de él dentro de él. No estoy tratando de mostrarlo todo. Sólo estoy dando una referencia visual. Esta es la vibra la vibra de la cosa. Otra forma de hacerlo es con sus seleccionados. En realidad no lo necesitas seleccionado, pero puedes bajar aquí, ir a Imagen y Video. Puedes encontrar el que quieras. Ray consiguió esa. Haga este, haga clic en abrir, y luego simplemente puedo hacer clic en donde quiero que vaya. Esas podrían ser las diferentes formas de traer imágenes. El objetivo aquí es que solo estoy tratando alinearlos para que sean un poco más agradables, para que pueda enviarle esto a un cliente Eso no es tan amigable con el cliente. Fue esto puede ser. Puedes hacer que estas imágenes más grandes estén representadas de cosas por las que estás más influenciado. Es así, pero un poco de esto. ¿Entras a lo que me refiero? Esto lo hago desde el principio. Comparte el wireframe, consigue que lo firmen, dales moodboard, esta es la dirección a la que me Puede que no tengan una idea muy clara, tal vez una o dos, así que tal vez tengas que hacer un par de tablas de humor diferentes para ir. ¿Qué opinas? Esta dirección, esa dirección antes de pasar mucho tiempo diseñando algo. Versión bonita. Versión desordenada que uso cuando solo estoy trabajando por mi cuenta. Nuevamente, no es para copiar, es para que puedas ver esto. Estás como, Oh, nunca pensé en hacer el fondo, este color blanquecino. Es un color bastante gris. Y esta combinación verde azulado es realmente genial. Eso me gusta. Voy a empezar a usar eso para algunos de mis botones y esas cosas. Simplemente provoca creatividad y una parte importante muy divertida del proceso de diseño, creo. Eso es. Es como hacer una tabla de movimiento. Versión dudosa, versión elegante. Todo bien. Vamos a entrar en el siguiente video. 32. Proyecto de clase 06: Panel de inspiración: Bien, es hora de hacer tu propio moodboard. Este proyecto de clase es hacer un mood board para la empresa que obtuviste del generador de proyectos aleatorios. Las mías son las carteras de Scott. Y quiero que busques en Internet y te inspires y tomes muchas capturas de pantalla. Bien, entonces todos los del último video, miren esos sitios, pero también miren los suyos. Podrías echar un vistazo a Pinters e Instagram. Yo no los mostré. Hay otro que me apareció en la cabeza es Mobinn. Bien, mobin.com. Este es realmente bueno para el diseño de aplicaciones específicamente, ¿de acuerdo? Aquí hay un montón de cosas geniales. Y nuevamente, hay una opción gratuita y una opción de pago. Tienes que iniciar sesión para usarlo. Por el momento, esto podría cambiar, pero puedes ver tu tipo de búsqueda por elementos de la interfaz de usuario, lo cual es un poco agradable. Bien, entonces ese es otro entonces simplemente volcarlos todos en tu archivo de diseño Figma Puedes hacer una de dos cosas. Puedes hacer ambas cosas si quieres. Puedes hacer la versión grande y fea donde está solo en un marco, solo tirada y alineada a medias O puedes hacer lo bonito donde encuentres una plantilla. Practique usando las plantillas de otras personas, extiéndalas bastante bien. Puedes hacer uno o ambos y simplemente tomar una captura de pantalla de él y subirlo. Dónde está nuestro archivo de proyecto de clase. Se puede hacer eso o aquello o ambos. Y una cosa que podrías hacer es que, primer lugar, coloreé mi tabla de movimiento, el marco, en realidad puedes colorear los marcos. Entonces puedes agregar en lugar de un blanco, oscurecer el mío para separarlo. La otra cosa que puedes hacer es si quieres otra página, ya sabes como estamos atascados con solo tener tres páginas ahora que está en un equipo. Si quieres volver a los buenos viejos tiempos cuando tenías los borradores y tenías tantas páginas como quisieras, porque no necesitas la capacidad de edición en este momento Lo que puedes hacer es irte a casa, y creo que ya hice el mío. Yo lo hice. El mío eran borradores. Ese es en el que estoy trabajando. Puedo mover archivo a mis proyectos de equipo, Scott Wallets. Y ahí tenemos las restricciones de sólo tres páginas. Si quieres que eso vuelva a los borradores, lo que puedes hacer es ir a todos tus proyectos y puedes hacer doble clic, no en el archivo real, sino solo en esta zona blanca fuera para entrar en ella y puedes hacer click derecho a este tipo y decir, Oye, quiero moverte de regreso a algún lugar donde los borradores Muchas gracias. Los archivos siguen abiertos. Realmente no se abre y cierra. Simplemente se ha cambiado, y lo que encontrarás es que está en mis borradores, las áreas ahí, y me pongo en mis páginas atrás para que puedas crear una versión de moodboard Nueva página, moodboard, y créala aquí para mantenerlo separado. Hasta usted y su TOC. Voy a borrar esa página. Sólo voy a mantener el mío en la misma página solo porque me gusta verlo cuando estoy diseñando. Hasta usted. Eso es. Es algo bastante sencillo de ir a hacer. Poner capturas de pantalla en una página y de alguna manera convirtió en un video de un par de minutos. Buen trabajo, Dan. Bien, vete y encuentra algo de inspiración. Y asegúrate de subirlo. Subirlo a los proyectos de clase, la sección de asignación. Me interesará ver qué haces. Especialmente cuando vemos tus posteriores, es genial desplazarte hacia atrás y ver dónde pudo haber comenzado la inspiración. Todo bien. Ahora ese es el final. Adiós. 33. Cómo trabajar con las columnas y las cuadrículas en Figma: Hola. Bienvenido al video épico que trata sobre estas 12 pequeñas columnas aquí. De alguna manera, es un video largo porque en realidad aplicar las columnas es fácil. Por qué aplicamos las columnas, espero que te resulte útil, sobre todo si no has trabajado mucho en el diseño web o app. También hay algunos trucos realmente útiles que cubrimos en todo momento, así que no lo sé, no te lo saltes. Hay algunos pequeños consejos y trucos útiles fuera de solo hacer columnas aquí. Es una buena. Vamos a excavar. Empecemos. Hasta la introducción es larga Bien, salte. Derecha. Lo primero es, necesitamos unas cuantas páginas extra. Si estás atascado en lo similar, Oh, sólo puedo tener tres. Tenemos que trasladar esto de nuevo a borradores. Bien, entonces para hacer eso, vuelve a la casa, y encuentra en tus borradores, encuentra al tipo en el que estás trabajando No, es en proyectos. ¿Bien? Y esta persona de aquí, voy a entrar en mis proyectos de equipo. Entonces, haciendo doble clic en la parte exterior, no en el archivo real. Bien, puedo hacer clic derecho en esto y puedo decir moveTo move file Bien, dos, borradores y haga clic en Mover. O puede hacer clic en Mantener y arrastrarlo a borradores. ¿Bien? Entonces el archivo que todavía está abierto tipo de se abre y puedes tener más páginas. Pasemos y hagamos un poco de cambio de nombre. Voy a hacer zoom Acabo de renombrar el ofi móvil para mi móvil y escritorio Voy a añadir dos nuevas páginas y a llamarlas. Móvil y escritorio Hi Fi. Estas son mis versiones de marco Y. Se les puede llamar marco Y, está bien. A mí me gusta llamarlos Lo fi. Vamos a ir al escritorio y voy a mirar columnas. Vamos a presionar la tecla F en mi teclado. Vamos a hacer clic en nota. Pasemos por aquí y digamos, quiero un escritorio. Quiero el tamaño de escritorio muy común, que es 14 40 por 1024. Hay que decirlo así. Si vas a una reunión y dices que tienes un sitio web que es 1,440 píxeles por 1024 píxeles, ellos sabrán que eres nuevo Por alguna razón, tienes que decir 14 40 por 1024. No estoy seguro de por qué. Pero ve a nuestro escritorio. Vamos a agregar columna. Voy a hacerlas un poquito. Están por aquí llamados guía de diseño. Vamos a golpear plus en la guía de diseño y te dan una cuadrícula. Queremos cambiarlo a columnas y el recuento de columnas por defecto es cinco por alguna razón, aunque la cantidad realmente común de columnas es 12. Echemos un pequeño vistazo. Bueno, antes que nada, ¿qué son? Ellos sólo están aquí. Si agarro el Fk para el marco, me permite hacer algo como esto donde agarro mi nav voy a darle un color. DAllup entonces colorea. Bien. Y lo estoy duplicando. Esta es mi caja de héroe, que es el tipo de a menudo donde va el mensaje de marketing, Oye, ven y únete a nosotros. La imagen inspiradora va aquí. A continuación, queremos que estas tarjetas bajen por la parte inferior. Voy a duplicarlo otra vez. Ahora bien, estas tarjetas suelen ser las características, como, Oye, únete a nosotros y obtén mejores beneficios, gana más dinero. Ahorra peso ahora, las características del producto obviamente suelen estar en estas tres o cuatro cajitas. Estas se llaman tarjetas, a veces tarjetas de características o tarjetas de interfaz de usuario, y esa es una estructura realmente básica para un sitio web, por eso esa cuadrícula es realmente útil. Te permite chasquear a él para que solo puedas ir, Do y además nos da un poco de flexibilidad si querías tres, pero en realidad lo que realmente querías, voy a eliminar estos es que querías cuatro. 12 es fácilmente divisible. Por uno, dos, tres, cuatro, seis. No puedes hacer cinco. Simplemente no hagas cinco. Deja de hacer preguntas. Por lo que depende de cuántas características tengas. La otra razón por la que lo hacemos es porque simplemente es muy común. Y por qué eso es importante es porque no hay una regla real. Podrías tener 13 columnas, pero tu desarrollador te encontrará y te lastimará. Porque la persona que construye el sitio web o si lo estás codificando o usando Wordpress o sitios webflow o figma, sea lo que sea, es base de código subyacente para ayudarte a menudo tiene un rango de columnas predeterminado de 12 Se puede anular, pero es simplemente doloroso sin una buena razón Bueno. La razón por la que es bueno, si eres diseñador web, tendrás una muy buena comprensión puntos de interrupción y la capacidad de respuesta Para las personas que no, quiero darles una pequeña demostración rápida solo para explicar por qué es importante enfocarse en esto. Así que tengo este sitio web aquí, HubSpot por ninguna buena razón aparte de que es realmente bueno y receptivo Entonces, cuando estamos diseñando, tenemos el sitio aquí. Echemos un vistazo a su caja de características. Tienen tres. Pasa cuando se baja a, soy una computadora de escritorio, soy una computadora de escritorio, soy una tableta. Ahí soy una tableta. Lo que hacen es un par de cosas. Cambian el menú a un menú de hamburguesas en el elegante que hay. Entonces han decidido hacer eso. Pero también decidieron romper estos en su lugar solo sigue comprimiéndolos porque están empezando a ponerse bastante pequeños, van, Bien libro, van, agrega tu propio efecto de sonido es bajar a la parrilla aquí Entonces lo que han decidido es, Bien, tengo el tamaño de la tableta Voy a duplicar esto, y voy a diseñar para tablet, así que voy a ir a enmarcar aquí y puedo cambiarlo a iPad Pro. Eliminemos algunas cosas y ordenemos esto. Entonces, antes que nada, en el iPad Pro, usamos la misma caja de navegación y héroe que sigue ahí. Pero estos van a ir de tres ancho y dos, eso es lo que están haciendo. Ese es el diseño que le habría dado al desarrollador y diciendo: Oye, aquí está mi vista de escritorio. Aquí está mi vista de tableta para que sepan qué hacer. ¿Simplemente lo siguen apretando hacia abajo? Si no se lo dices, van a seguir apretándolo hacia abajo. ¿Bien? Bien, los buenos desarrolladores sabrán que algo necesita cambiar, y puedes dejárselo a ellos, o puedes decirles y decirles: Mira, cuando llegue a esto, voy a hacer esto. A veces la gente va así. Lo he hecho antes donde estoy como, cierto, este último en realidad no es tan importante y realmente me molesta que haya esta gran brecha aquí. Claramente no molesta Hubspot, pero aquí está esta gran brecha Yo soy como, probablemente necesites esto. ¿Qué hacemos? Entonces podrías apagarlo como acabo de hacer, y ¿qué acabo de hacer? Acabo de apagar el yo solo apago el globo ocular en el color, todavía ahí, difícil de seleccionar Bien, así podrías apagarlo o podrías agregar uno nuevo. Aparece un cuarto. ¿Bien? A lo mejor no es tan importante, así que no está en el escritorio, sino que aparece aquí. Nosotros sí tenemos cuatro, así que funcionaría bien. Verás, me gustan las cuatro. Cuatro es bueno. ¿Bien? Pero significa que se derrumba muy bien aquí abajo para tablet, pero a veces tres es simplemente más común, y tienes que averiguar algo que hacer Y lo que hacen con el móvil, mira esto. Listo para el Así que ahora es un sitio web móvil y se fueron, bien, se ponen tan grandes en el móvil. Mira que van de este tamaño a un gran tamaño gigante en el móvil. Están como, derecho, diseño móvil, arrastren esto. Voy a borrar y y a ti. Voy a hacer esto. Sólo lo estoy escribiendo. Se puede ver mecanografiando. Vas a ser nuestro iPhone 16. Y lo que hemos decidido es esto y esto sólo va a aplaudir. Entonces estos, solo voy a tener ancho completo, y voy a tener uno voy a asegurarme de que estén en el marco móvil. No los puedo ver, así que voy a hacer clic en el móvil, decir contenido del clip, r. mostrarte cómo desplazarte más adelante, pero básicamente, estos van a tener que desplazarse para móviles para que encajen. Ahí vas. Esa es la capacidad de respuesta móvil y por eso nos estamos molestando en hacer esta grilla aquí Simplemente nos da algunas cosas para chasquear porque lo que hará el desarrollador es que dirán, esta caja aquí, esta caja aquí. Cuando está en tantos píxeles de ancho, 14 40, tiene un poco de código para adjuntar a esta pequeña tarjeta de aquí para decir, B tres columnas de ancho. Pero si el ancho del sitio es de 800 píxeles, B, qué es este 16 de ancho. Entonces es realmente fácil. Simplemente puedes darle algún razonamiento para decir, si es de este tamaño, sean tantas columnas, y cuando esté encendido, ya sabes, 600 píxeles de ancho, como un dispositivo móvil, necesita tener 12 columnas de ancho. No lo sé, Malusa usa usa. Echemos un vistazo al móvil. El móvil es un poco diferente. Entonces voy a ir a aquí, a un teléfono, a Dean, puedes desarrollarlos todos en su propia página. Yo sólo los estoy separando para este curso. A menudo, eso es lo que hago. Yo diseño lo que sea lo más importante para el sitio web. Al traer una computadora portátil, somos un primer sitio web de escritorio, primero diseñamos cosas y luego descubrimos cómo funciona en dispositivos móviles. Sin embargo, muchos sitios web serán móviles primero, lo que significa que primero hacen su diseño de interfaz de usuario para dispositivos móviles y luego elaboran una versión de escritorio porque es un sitio web principalmente móvil Tengo un iPhone 16. Voy a ir a la grilla y Dan dijo que deberíamos usar columnas de 12. Eso no es tan útil. Entonces, cuando estás trabajando con un teléfono móvil, la tecnología subyacente será 12, pero es más fácil diseñar con seis. Seis es divisible por 12, entonces, ya sabes, está bien Simplemente es mucho más fácil hacerlo con seis en lugar de 12. Entonces voy a agarrar mi marco desde aquí. ¿Bien? En realidad, no necesitamos hacerlo. Se te da la idea. Simplemente diseñe con seis para móviles y 12 para escritorio. Y probablemente 12 todavía para tablet. Si diseñas para tablet, depende de ti. Depende del trabajo. Es un gran trabajo donde también tienes mucho tiempo y recursos para desarrollar una versión tablet? A lo mejor es un alto uso para tu sitio web. Entonces definitivamente pasa tiempo desarrollando cómo le llamas la versión tablet. A veces, sin embargo, los diseñadores se saltan la tableta y simplemente hacen computadoras de escritorio y móviles y simplemente dejan que el desarrollador haga ejercicio tableta. No está bien, pero muchas veces encontrarás solo sobre todo plantillas y esas cosas, solo tienen móvil y escritorio. ¿Por qué puedo ver estos nombres aquí? Es como un quiz pop. ¿Por qué puedo ver el fotograma tres, y todo esto está mezclado Es porque estos no están realmente en o en mi marco móvil. Los nombres desaparecen una vez que están dentro. Otras cosas que quiero mostrarte es que voy a ir a F, voy a ir a U. Si estás diseñando un sitio web móvil, usas columnas. Si estás diseñando una app para IOS para Apple o para Android. Es muy común no usar columnas porque no es tan flexible. No hay todo esto saltando por ahí. Una app solo aparece en un teléfono y es muy común usar esa grilla que apareció primero. El tamaño de la cuadrícula es muy común de usar 12. Bien, entonces este es un tamaño o forma de trabajar muy común cuando estás diseñando una app porque puedes ser un poco más preciso, en una app. Ya sabes la altura y la anchura. ¿Te has dado cuenta en una app, haces menos desplazamiento? Es como que todo está dispuesto en una especie de uso forzado del teléfono. Todo está un poco diseñado y poco deliberado en un teléfono Por lo tanto, sería común usar una cuadrícula de ocho puntos para el diseño de una aplicación. Es lo que van a usar los desarrolladores de IOS. Estarán usando una cuadrícula de ocho puntos. Entonces nuevamente, si terminas no usándolo como para espaciar las cosas, va a causarles un problema. Así que apégate a una cuadrícula de ocho puntos. Tengo un par de cosas más. Vamos a Disk top. Vamos a hacer clic en Disktop aquí abajo. Vamos a hacer clic en este pequeño icono para abrir la configuración. ¿Bien? Entonces tenemos 12. Echemos un vistazo a estos otros. Echemos un vistazo a Magin. Entonces Magin es los bordes. ¿Bien? Podría poner un margen de ocho y simplemente poner un pequeño hueco en los bordes aquí. Hagamos algo grande. Hagamos 80. ¿Bien? Aquí solo son los bordes. Cuando estás desarrollando los bordes de un sitio web, o diseñándolos, no es muy importante cuál es ese número exacto porque es muy flexible. Mira esto. Si vamos a este sitio de Hubspot, notarás esa vista de Disktop Ves que el sitio real solo aparece en este bit medio. Todo este tipo de estiramientos hasta el borde. Muchas veces la gente no lo hace. Algunos sitios web sí. De hecho, se desarrollan para pantallas realmente grandes, como las grandes pantallas envolventes gigantes o las grandes IMAX y tendrán A menudo, sin embargo, solo van a ir, Bien, estamos desarrollando para este pedazo medio, y este bit de aquí solo va a ser blanquito blandito simplemente extendiéndolo y agregando esta sombra desplegable que se extiende hasta esta sombra desplegable Lo mismo con este color aquí. Verás, no hay nada por aquí, pero parece que está tomando el control de todo el sitio. Eso también es algo muy común de hacer. Para tener un margen, voy a usar 100. Simplemente significa mi sitio porque tiene 14 40 de ancho. Los he movido por 100 por cada lado. De verdad, estoy diseñando un sitio en el medio aquí que es 12 40. Vamos abajo, 12 40 ahí dentro. Voy a estar diseñando esto para mi caja herro. Probablemente voy a conseguir que el NAV vaya hasta el borde. Pero mi caja herro, mis líos de marketing van a estar aquí Voy a borrar estos y voy a decir, usted está ahí. ¿Y cuántos estamos haciendo? No puedo recordar en nuestro marco Y. ¿Qué estamos haciendo? Tenemos tres cajas de características. Entonces voy a ir por aquí y decir, Comando D, o Control D para duplicarlo de nuevo. Eso va a ser lo básico. La otra cosa que tengo que hacer antes de empezar a diseñar las cajas, dar clic en el marco padre. Veamos lo último que hay ahí dentro, que es cuneta. Canalón es el espacio entre columnas, y es muy común de usar Ocho es un número muy importante en el diseño tanto de sitios web como de aplicaciones. Mucho espaciado y tamaño de fuente se hace con ocho. Entonces ocho por sí mismo es probablemente demasiado pequeño. Ubre. Bien, pero vamos a hacer 16. Se está acertando. Probablemente verás estos números cuando estés trabajando en diseño web y de interfaz de usuario, verás 16. Verás cuál es el siguiente, 24 y 32, o solo múltiplos de ocho. Voy a usar 32 como canalón. Es otro tamaño muy común para canalones. Es lo suficientemente grande como para que nos dé un poco de espacio entre estas cajas sin ser demasiado grandes. Y otra vez, aquí, si estoy usando lo que era, 32, si arrastro esto hacia abajo, ¿ puedes ver el espaciamiento entre estos tipos? Se ve como que salta para mover esto hacia arriba para golpear hacia arriba contra la parte superior aquí, y quiero moverlo un poco hacia abajo ¿Qué tenemos? Posición. El y, que es el arriba y abajo. Voy a decir más 32. Sé que es exactamente lo mismo que esto es abajo de ahí. Notarás que hice matemáticas en los campos. Eso lo hago mucho. Encuentro los números difíciles. Lo que termino haciendo es, digamos, ¿cuál es otra buena? Ah, cuando estaba haciendo la columna, así que veamos esto. Hago esto bastante. Sé que son múltiplos de ocho, pero a veces me confundo, ¿es 32, 34? Se 36. Entonces hago cosas así ocho veces cuatro de ellas. Entonces cuatro octavos. Solo usas el astérix cuatro veces y puedes golpear Enter, y es 32. O si estás como, cuál es el siguiente abajo, puedes hacer menos ocho y golpear Enter, y te da 24. Me gusta hacer eso por muchos de todos estos campos de aquí. Simplemente haz todo este grupo también. Bien podríamos poner todo alineado, yo tengo esto, voy a moverlo. X e Y se mezclan. Sólo voy a decir más ocho. ¿Recuerdas lo que significa mixto? ¿ Te acuerdas? Así es. Sólo significa que realmente no lo sabe. Lo hice más ocho. Deshacer. Es porque tenemos muchas cosas seleccionadas. Es como, Oh, realmente no sé la y Conozco la Y de esto y de esto, pero juntos, es un poco raro. Entonces voy a decir más 32 sólo para moverlo hacia abajo. Bien, entonces tenemos algunas cuadrículas van un poco de consistencia Ahora bien, lo último es que estos no imprimen ni ven. Mira esto. Si voy a previsualizar, se dará cuenta de eso. En realidad no aparecen. Las cajas sí, pero no la grilla real. Puedes encenderlos y apagarlos bajando aquí y encendiendo y apagando el I. Ahora es Shift G para encender y apagar como atajo. Debería ser Control G en una PC. Oh, no estoy segura. Ambos trabajan en Shift G en una Mac y Control G en una Mac funcionan. Uno de esos funciona para PC. Escribirlos, házmelo saber los comentarios cuál es ese. Estoy bastante seguro de que es uno de esos. Son muy buenos para el diseño, pero luego son feos. Tan a menudo los enciendo y apagando. Pero solo puedes usar el globo ocular, encender y apagar. Ooh. Todo lo que sé este se está haciendo muy largo. Quiero presentarles algo ahora también. Entonces solo un factoide un poco interesante, es raro. Lo usaremos en el curso. Quiero presentarlo ahora. Vamos al escritorio. Vamos a esta. Lo que puedes hacer es, tengo esta grilla por aquí. ¿Tengo que teclearlo de nuevo? No si la has duplicado , obviamente, sino si tienes una nueva página y estás como, por qué no aparece esta en esta. Lo que puedes hacer es decir. En realidad, ese es el tamaño equivocado en él Dist. Bien, es que puedo copiarlo y pegarlo. Mira esto. Es algo raro en figma, pero es súper útil Si hago clic en el escritorio de este de aquí, puedo bajar a este. Yo tengo esto. Puedo convertirlo en un estilo más adelante. Pero lo que puedes hacer es ver esto. Puedo hacer clic en Fila. Es la Tierra de Nadie por aquí. Mira puedo hacerlo por no todo. ¿Qué puedo hacer para el relleno? Sí. Es esta zona de tierra de nadie la que puedo copiar algunas cosas. Mira esto. Tengo esta seleccionada, te quiero. Acabo de ir Comando C en una Mac, Control C en una PC. Haga clic en esto consiguió el marco y solo pégalo y lo traerá consigo. Eso es interesante para muchas cosas. Te lo voy a presentar ahora. Lo haremos algunas otras veces en el curso. Porque probablemente por el momento, es más fácil simplemente duplicarlo. Entonces ya vienen las columnas. Santo humo Dan, de alguna manera te convertiste en dibujar 12 líneas en toda una saga épica. Espero que aprendas algo. Si ya eres desarrollador, mucho de esto resonará contigo, si nunca antes has trabajado en web o UI Ojalá esto sea útil. Es confuso. Estás como, hay mucho que tomar. Eso está totalmente bien. Quería darte un poco detrás de escena de por qué nos molestamos en escoger 12. Pero si no le quitas nada más, solo elige 12 y sigue adelante. Eso es. Te veré en el siguiente video. 34. Consejos, trucos y preferencias en Figma: Hola a todos. Voy a hacer un video sobre el tipo de atajos, dónde encontrarlos, algunos de los consejos y trucos de Figma. Tenemos algo de experiencia detrás de nosotros ahora. Es hora de agregar algunas partes de flujo de trabajo para acelerarnos. Entonces una de las primeras cosas que quiero mostrarles es este pequeño signo de interrogación. Todos hemos aprendido que la ayuda dentro del software nunca es realmente buena. Figma es muy bueno. Haga clic en el pequeño signo de interrogación. El que es bastante interesante es bajo atajos de teclado. Y esto son todos los atajos de teclado que no son obvios. Obviamente, puedes flotar por encima de algunas cosas. Ya sabes, sé que la herramienta pluma es P porque ahí lo dice. Pero aquí te mostraremos todas las demás. Así que haz un pequeño apretón a través. Algunos de ellos azules. Los azules que ya hemos usado en este curso. Probablemente los he usado todos. Este es un nuevo login para mí para este curso, algunos de ellos todavía no son azules. No lo sé, se siente como un reto. Úsalos todos. Pero echa un vistazo por aquí y encuentra los que eres como, Oh, ojalá fuera un atajo para atravesar. Shift Command X. Te mostraré la versión para PC también si estás en PC. Echemos un vistazo a uno de mis favoritos. Está ahí dentro. Creo que es selección. Selección profunda. Así que cuando esté trabajando, vayamos a esta caja de características aquí. Entonces estoy en mi móvil Lo Fi. Oh, otro atajo es si seleccionas algo, ¿ves que tengo el seleccionado aquí abajo? En lugar de acercar el zoom justo en el centro de la pantalla, puedes presionar Mayús dos en MacNPC Lo que voy a hacer, se acercará a lo que has seleccionado. Hemos hecho Shift uno, que es mostrarme todo en mi documento. ¿Qué están haciendo por aquí? Ya no los necesito chicos . Es un turno uno. Pero si selecciono algo, digamos que hago clic en este texto aquí abajo y presiono Mayús dos, se acerca a esa cosa que he seleccionado Esa es una práctica. Alejar un poco. ¿Qué tenemos? El otro atajo es Deep Select. Esto de aquí lo he agrupado. Dentro de este grupo hay otro grupo. Dentro de este grupo hay otro grupo. Hay muchos grupos. Entonces terminas haciendo doble clic. Diga, quiero dar click sobre este icono aquí. Lo selecciono una vez. Tengo el grupo. Haga doble clic en él. Entra dentro de ese grupo, haz doble clic en él otra vez, entra dentro de ese grupo, haz doble clic de nuevo para entrar y agarrar el ícono. Mucho clic. selección profunda es mantener presionada la tecla de comando en una Mac, tecla de control en una PC y simplemente hacer clic a la vez, y simplemente se sumerge en todos estos grupos o marcos o componentes Todo simplemente agarra lo que tienes tu mouse sobre la parte superior. Entonces eso es una selección profunda. Y yo solo quiero darte por ejemplo de pasar por aquí, pasar por los atajos de teclado y solo echarte un pequeño vistazo y ve, Oh, esa es una buena. Voy a anotar eso. Recuerda, tienes una hoja de acceso directo en tus archivos de ejercicio con los principales, pero hay solo unos que te resultarán útiles personalmente para tu flujo de trabajo. Ahora el otro atajo es el atajo para gobernar todos los atajos. ¿Se llama la acción rápida? ¿Cómo se llama? Se llama el botón Acciones. Se puede ver ahí. Comando K en una Mac, Control K en una PC. Este es otro buen punto donde a veces hay teclados que no son los teclados ingleses de la quity que utilizo Si eres como, no funciona en mi otro lenguaje de estilo, cursor aquí, verás todos los atajos a lo largo del costado también No sólo eso atajos abajo en el signo de interrogación, sino junto a ellos aquí. Échale un vistazo. Si estoy a través de este curso y estoy como, Usa el Comando K y no es adecuado para. Echa un vistazo aquí lo que se enumera aquí. Bien, la que quiero es la clave de las acciones. Comando K. Este es el atajo más importante. Básicamente puedes pedirle a Figma que haga lo que quiera. A mí me encanta. Mira esto. Digamos que quiero que esto sea mayúscula. Sé que puedo entrar aquí, puedo desplazarme, puedo ir a la configuración y puedo encontrar que es esta de aquí. Pero hay muchas cosas que estamos como, o es demasiado largo o no puedes recordar dónde está. Puedo dar click en esto, presionar Comando K y solo teclear arriba. Todo bien. Entonces razón hay una advertencia. Detener mi Comando K. De todas formas, así que tengo el seleccionado, vamos Comando K, y luego apareció. El tuyo podría hacer eso y yo puedo escribir superior. Ya ves, pasa por cada menú y va, ¿te refieres a esto? Estás como, Sí, quiero decir eso. Co. Digamos, aquí tengo este color y quiero seleccionar todos los demás colores. Sé lo que tengo que hacer y sé que es posible. Entonces voy a ir al Comando K. En vez de intentar encontrarlo, voy a ir a seleccionar y voy a decir, ahí está ahí. Seleccione con el mismo relleno. Se trata de hacer clic en todo lo que tiene el mismo color de relleno que estos chicos. Puedo decir, bien, quiero que ahora cambies. Si recuerdas cómo se llama vagamente, puedes simplemente ir, Comando K, teclearlo y llegar directo a Todo está aquí. La otra cosa útil es que si no eres un clicker correcto, bien, aquí hay tantas cosas útiles ¿Bien? Si haces clic derecho en las cosas, es contextualmente Entonces te va a dar la lista de cosas que puedes hacer con esto. Cuando haces clic derecho en el texto, te da cosas diferentes, y también te da los atajos. Pero a menudo esto puede ser realmente útil. Entonces si hago clic en esto y hago clic derecho en él, quiero ir a seleccionar la capa. ¿Ves que va y escoge todas las cosas diferentes que estaban debajo de mi mouse? ¿Quiero el grupo? ¿Quieres que el grupo esté dentro del grupo? ¿Quieres la imagen que está dentro del grupo que está dentro la pestaña de características te dé el desglose de dónde has seleccionado tu cosa Así que no te olvides de hacer clic derecho. Hay cosas útiles ahí dentro. Preferencias. No hay muchos. Si voy a la pequeña F por Figma y bajo a preferencias Ahí están estos. ¿Has leído bien, encuentra cualquier cosa que creas que es útil Un par de eso me gusta cambiar es mantener la herramienta seleccionada después. Yo agarro la herramienta rectángulo y la dibujo, por defecto, normalmente vuelve a la herramienta de selección, y estás como, No, ahora va a quedar en la herramienta que has seleccionado. Otra útil que me gusta es la rueda de desplazamiento a Zoom. En el momento en que mi rueda de desplazamiento en mi mouse, puede que no tengas una sube y baja en la página. Eso es totalmente genial. Pero podrías venir de un programa diferente donde estás como, hombre, que normalmente se acerca Voy a cambiar eso a rueda de desplazamiento a Zoom. Una última que me gusta bien es esta preferencia personal. El que dice teclado se acerca a la selección. Ese es el indicado. ¿Bien? Es que antes cuando acerqué el zoom, simplemente va a la mitad de la pantalla Ahora bien, si tengo esto seleccionado y presiono Zoom, así que solo estoy usando mi Command plus en una Mac, Control plus en una PC, como que hace zoom en lo que has seleccionado Bien, así que echa un vistazo a las preferencias, cambia lo que quieras. Oh, una última es codazo. Echemos un vistazo a esa. Vamos a entrar aquí. Vamos a las preferencias, y vamos a ir a codazar cantidad. El infierno es esto. El empujón es cuando fui, uh de izquierda y derecha con mis rastrillos Recuerdo como turno, lo coge en trozos más grandes Cuando estás trabajando en una cuadrícula de ocho puntos, especialmente para una aplicación, quieres que se mueva en incrementos de ocho puntos Aunque no estés trabajando en una app, prefiero que el codazo sea de ocho puntos Vamos a las preferencias, vamos a la cantidad de empujón. El codazo para uno es de un píxel. Eso está bien. Pero quiero que el gran codazo cuando mantienes turno sea ocho Ahora cuando se mueve a través, sé que está moviendo ocho píxeles. Bien, así que esos son algunos de mis consejos. Y el grande es Command K o Control C o PC y simplemente escribe lo que quieras. Simplemente escriba el diseño. Así que muéstrale chicos a Lou. Los guías patos están escondidos. ¿Podríamos siquiera verlas antes? Estamos en el equivocado. Vamos a este de aquí. Vayamos al Comando K. Incluso si no recuerdas el atajo, puedes recordar el Comando K, y luego solo teclearlo. Ya ves que puedo encenderlas y apagarlas. Cada atajo bajo Comando K, Control C de PC. Bien, eso es. Te voy a ver en el siguiente video. 35. Inspiración del color y el cuentagotas en Figma: Hola. Vamos a hablar de inspiración de color. Estamos estudiando nuestro simulacro de alta fidelidad , así que necesitamos escoger colores. Es posible que te den colores corporativos y es posible que te quedes atascado con los colores, pero nuestro proyecto de clase, podemos elegir el nuestro propio. ¿Por dónde empezamos? La inspiración del color puede provenir de muchos lugares. Hay muchos lugares en línea. Hay una pareja que me gusta mucho que quiero sugerir refrigeradores es una muy bonita, y la caza del color es otra que uso mucho Lo bueno de ellos es que simplemente te muestran colores que funcionan juntos. Podrías estar como, Oh, esto es todo. ¿Qué es lo que quiero? No se desplace demasiado. A mí me gustan estos cuatro juntos. Son una combinación de colores realmente genial. Es muy fácil meterlos en Figma. Sólo puedo hacer click sobre ellos. Bien, y haz clic en eso. Dice que está copiado o puedes copiarlo y pegarlo desde aquí abajo. Después en Figma, voy a ir al Hi Fi, hacer zoom un poco Voy a crear un par de rectángulos. Voy a estos fotogramas solo porque estoy sosteniendo Shift para que vaya perfecto cuadrado y con él seleccionado, voy a deshacerme de FFF y simplemente pegar ese código, head enter, y ese es ese color terminado Voy a acercarme. a hacer un duplicado de él y luego volver a los refrigeradores y de hecho una búsqueda de color, copiar ese también, y luego simplemente trabajar su camino a través de traer los colores Otra buena es color.adobe.com, y esto tiene algunas cosas interesantes bajo tendencias y bajo Explorar Puedes ver aquí las imágenes están impulsando los esquemas de color, lo cual es realmente genial. Explorar es solo que puedes ir por aquí y decir, quiero ver todos los temas de color que son los temas de color más utilizados que son populares este mes. Que la gente ha estado usando. Tienen una gran biblioteca de gente que usa colores, es bastante interesante ver qué se está usando. Vamos, carga. No está funcionando en este momento, pero sí funciona otras veces. Otros lugares geniales para obtener ideas de color. Especialmente si eres nuevo en el diseño en general. Significados de color. Esto es figma.com slash Colors y tiene, digamos, quiere usar este color, pero necesitas hablar con tu cliente al respecto A mí me gusta el rojo. No es lo suficientemente bueno. Tienes que decir, qué es Chili te da algún idioma para poder dirigir al cliente explicando por qué lo has elegido, y solo te da sí, algún lenguaje para usar. Eso me parece muy útil. Además, me está dando algunos colores que funcionan con él. Otra buena de Figma es figma.com slash ¿Bien? Y luego puedes elegir tu color, y va a elegir un color complementario a él. Uno que trabajará en conjunto. A mí me gusta esa. A mí me gusta esa una más. Otro útil es un grabient. Es realmente bueno para gradientes, y puedes pasar por los gradientes en un segundo, te permitirá encontrar una buena inspiración de gradiente El que uso mucho es de mi mood board. Digamos que estás haciendo tu tabla de estado de ánimo y estás buscando cosas y estás haciendo billeteras, pero te gusta este color. Entonces voy a hacer una captura de pantalla, me voy a ir. Me gustan estas combinaciones de colores. A pesar de que no hay una billetera en ella, todavía puede ser parte de mi moodboard Voy a entrar en Figma. Voy a ir a mi mood board. ¿Dónde está mi mood board? Está por encima de mi doc. lo fi. Es simplemente pasar el rato por aquí. Voy a tomar mi captura de pantalla y traerla. Simplemente arrástrelo a la página desde mi buscador. Lo bueno de esto es que puedo decir Acercar es que puedo agarrar mi herramienta rectangular o la herramienta de marco, puedo sacar esto, agarrar mi gota para los ojos una herramienta, que es la tecla del ojo en el teclado y esa , eso es genial. Este de aquí, gotas para los ojos una herramienta, puedes comenzar a trabajar a través de tu camino y comenzar a apropiarte de los colores Bien, me parece esto realmente más fácil que copiar y pegar todos los números higodecimales Yo también lo hago por estos. Di si estoy en decir enfriadores y vamos por el generador Este es uno al azar. Puedes golpear la barra espaciadora en esta, solo para recorrer las aleatorias. No lo sé, es genial. Digamos que me gusta este grupo, solo puedo hacer una captura de pantalla de ese gran trozo, tirarlo a Figma. Ahí vamos. Yo uso el es demasiado grande. Masivo. Escala hacia abajo, acercar, y vuelvo a usar la herramienta cuentagotas Te voy a agarrar y hacer una copia de estos tipos de aquí. ¿Qué es lo que quiero? Quiero uno, dos, tres, cuatro, cinco, solo puedo usar mi herramienta cuentagotas para sacar estos en lugar de copiar y pegar ese Se lo perdí. Mi último. Ahora tengo mis colores. La otra cosa que puedes hacer es que estás como, a mí me gustan estos, pero esta de aquí, necesito otra versión de la misma. Me voy a ir. Aquí, puedes empezar a jugar con los deslizadores como lo hicimos Quiero uno que esté un poco más saturado tal vez entrando aquí, entrar en hex. Voy a cambiarlo a brillo de saturación de tono y quiero que sea brillo de saturación de tono. ¿Saturación es esta de aquí? Sólo voy a usar mi flecha hacia arriba para encontrar una que esté más saturada. ¿Ves aquí? Puedes comenzar a dividirlos en alternativas para este color primario. A lo mejor uno más desaturado. Ahí vas. Eso es demasiado desaturado Todo bien. Esa es una especie de forma de comenzar a usar el color, encontrar inspiración y simplemente pasar y usar la herramienta Cuentagotas para extraer los colores que podrías usar en tu diseño 36. Cómo crear una paleta de colores en Figma: Hola a todos. En este video, vamos a hacer una paleta de colores desde la que podamos trabajar para nuestro diseño. Tendremos un color primario, secundario y acento. Construiremos algunos colores de interfaz, y luego tendremos algunas variaciones de nuestros colores primarios, secundarios y de acento. Bien. No es la única forma oficial de hacerlo. Es la forma en que lo hago. Pensé en compartir me resulta muy útil cuando estoy empezando a construir un concepto para tener algún tipo de muestras de color listas para rodar Bien, comencemos. Así que construyamos una paleta col más utilizable. Empezaste a hacerlo la mitad. Hagamos un poco más. Vamos después del tono del rectángulo, dibuje un rectángulo. Voy a empezar con un color que quiera. Aquí me gustó este morado, en realidad me gusta principalmente porque cuando estoy mirando el marrón de la piel para mis billeteras, esto simplemente se siente como un buen color. morado parece ir. Eso, me gusta con él. Puedes obtenerlo de tus sitios de inspiración de color. Puedes sacarlo de tu gráfico. Es posible que te den un color de la compañía. Bien, estoy abajo con algo así. Ahora necesito un color para ir con esto. O lo has escogido o es un color de empresa con el que necesitas trabajar, lo que puedes hacer es agarrar ese color e ir a algo. Estás buscando una rueda de colores. Hay muchos en línea. Usaremos el Figma one, figma.com slash color wheel, slash color hyphen wheel y puedes Ese es el morado que quiero abajo por el fondo aquí se puede ver. Se escogió un color complementario. ¿Me gusta? No estoy seguro de que lo haga. cortesía, como verás aquí, es completamente opuesto en la rueda de colores, a menudo es un gran lugar para comenzar. Como lo que busco tal vez un morado que sea un poco más, menos en el morado slash green, pero más en el ¿ Eso sigue siendo morado Morado, azul mostaza pus. ¿Estoy cavando eso? Puedo copiar eso y figurar que podría ser un buen color secundario a mi color primario. Este es el color principal de la marca, y este va a ser un color primario. Pero no siempre es que no tengas que usarlo. Los signos de color no es tanto una ciencia. A menudo, solo puedes ir a recogerlo. me gusta split porque split, va a ir directamente a través, pero se puede ver cualquiera de los lados de directamente a través. Dividir. A mí me gusta esa. Eso es más mi mermelada. Eso definitivamente es verde abajo. A mí me gusta este morado y marrón. ¿Utilizaré esto también? Realmente no me gusta. Yo no lo soy. Pero trabaja tu camino a través de esto y tal vez encuentres, bien, hay diferentes modelos para esto. Oh, de veras odio eso. La plaza es bastante bonita. Se pueden ver estos. A menudo, cuando estás trabajando, necesitas al menos dos colores, primario y otro secundario. A menudo, aunque, cuando estoy trabajando, me gusta tener un color de acento como un color terciario, tres de ellos. ¿Eso es? ¿O es eso? Tipo de trabajo de ida y vuelta. En mi Mc, puedo presionar Command Tab. Creo que se puede hacer Pestaña Control en una PC para voltear entre aplicaciones. Voy entre Chrome y Figma. ¿Y qué quiero? No tengas miedo. Sólo ve, creo que sé lo que quiero. Yo solo voy a darle a la rueda de colores aquí y solo regresar, Oh D ¿me gusta eso? ¿Eso es bueno? No estoy segura Sólo voy a hacer zig zag atrás esto por un tiempo y no lo sé, supongo que quiero mostrarte que no es una ciencia completa. Probablemente quiero algo más brillante para mi color de acento. Quiero esto listo. Iba a adelantar un poco. Aquí estamos. Quizá no. A lo mejor de este lado del rojo, quizá naranja. Todo bien. Volveré en un segundo una vez que haya escogido un color. Pasé años cambié todos los colores. Aún no estoy seguro, pero es un lugar lo suficientemente bueno para comenzar. Lo que me gusta hacer entonces, tenemos nuestro color primario, secundario, y ya sea terciario o acento. Usa mucho, usa un poco, usa con moderación, cosas muy emocionantes. Y lo que me gusta hacer es que no puedes simplemente usar estos colores. Necesitas un poco de extra. Lo que terminas haciendo es agarrar esta caja, jalarla hacia arriba de esta manera y decir, bien, me gusta esta, pero necesito una versión más oscura Entonces voy a hacer click aquí. Voy a ir a mi HSB. Voy a ir a. Podrías simplemente arrastrarlo hacia abajo. Solo voy a agarrar mi brillo, mantener presionado Mayús y golpear hacia abajo algunas veces. Tengo una versión más oscura. Voy a hacer una versión más ligera. Bien. Y voy a subir un poco. ¿Bien? Entonces quiero una versión más ligera. Ahora, no tienes que ir arriba y abajo en la oscuridad. A algunos colores les va muy bien solo haciéndolos un poco más oscuros y un poco más claros. Algunos de ellos se ponen asquerosos. No sé de ésta. Siento que esto se va a poner asqueroso. Entonces voy a llegar a brillo, bajar un poco. No, eso salió bien. Lo que también podrías hacer es oscurecerlo, pero también menos saturado. No hay reglas de color duras y rápidas, ojalá algunos de estos consejos te ayuden si eres nuevo para tener una mejor idea. Para que uno cada vez más brillante se convierta en este color completamente nuevo. Entonces quiero obtener la saturación y bajar en eso también. También podría bajar un poco el brillo. Sí, ahí vamos. Lo mismo con este. Vamos por esto. Voy a saltarme junto con éste. Todo bien. Entonces ahí tienes. Esos son mis colores. Voy a usar estos mayormente, pero habrá momentos en los que necesite un poco de contraste donde pueda usar esto o tal vez esto, solo para tener un contraste más claro entre los dos mientras me solo para tener un contraste más claro entre los dos quedo en el mismo tipo de zona de color. El siguiente es blanco y negro. Entonces blanco y negro, puedes usar blanco y negro completo. Sin embargo, es muy común no solo usar blanco sino usar algo. ¿Puedes ver la parte posterior de Figma, han usado este blanquecino para este color de interfaz ¿Vamos a crear nuestro propio color de interfaz? Y ¿podemos igualar los antecedentes? Básicamente oh, oh, me acerqué bastante. Bien, entonces es muy común solo tener un poco de blanco, solo un poco de gris en él. Por qué tenemos un color de interfaz que no es del todo blanco es para que podamos hacer cosas como voy a dejar eso ahí. Lo que podría hacer es agarrar todos estos y moverlos a este otro fondo. Voy a encogerlo manteniendo presionado shift para que se escale bien o use tu herramienta de escala, solo para que se vea fácilmente, lo contrario, se mezcla en el fondo. La razón por la que tenemos esto es digamos que tengo un marco y es un fondo blanco. Quiero tener una caja emergente que aparezca encima de ella y solo tengo un poco de contraste ahí para poder separarla del fondo, podría agregar un pequeño trazo. Eso es sólo un píxel, eso es realmente color claro. Solo para tener agreguemos una sombra paralela ex drop shadow. Aún no los hemos cubierto, pero puedes terminar teniendo estos modelos que aparecen en tu app que probablemente pueda deshacerme del trazo ahora. El dropshadow está haciendo el trabajo por ello y basta ver que hay un poco de contraste agradable entre los dos Podrías hacerlo al revés y tener blanquecino en el fondo y tener todas tus pop ups siendo blancas, depende de ti. Bien. Y nuevamente, en cuanto a colores, puedes escoger cualquier gris que te guste, pero es común tener solo blanco y negro, tener cinco de ellos. Estás blanquecino todo el camino hasta tu negro más oscuro. A menudo con el negro también, no es un corte tan claro. Arrástralo aquí abajo y solo usa todo negro. Podrías hacer eso. No hay nada malo en eso. Lo que me gusta hacer es encontrar sí, puedes elegir un negro fresco o cálido. Podrías decidir que necesito verlas todas con Zoom un poco. negro cálido está abajo por el fondo aquí, pero en tu deslizador de tonalidad, ve a un color amarillento, un color dorado y luego elige un negro pero ahí dentro. No es mucho. Comparémoslo con el negro normal. El negro regular está aquí solo, no es mucho, pero si lo comparas con este tipo, puedes ver que solo hay un calor en este de aquí y podríamos ir aún más cálidos pero más oscuros, terminas con este tipo obtienes un negro cálido en lugar de un negro frío. Bueno, eso es un negro liso, negro cálido. Veamos la comparación. Lo haré en el tobogán aquí de un negro frío. Puedes entrar aquí y decir, Bien, quiero que sea un negro fresco así que voy a entrar en los verdes azules y elegir un negro que sea realmente oscuro Pero aquí dentro, ¿puedes ver la diferencia entre los dos? Por su cuenta, se ven bastante negros. Pero con sus amigos, puedes ver fresco, cálido, y depende de ti en qué dirección quieres ir Decide, quieres que este tipo de cálido o este tipo de negro fresco vaya con tus colores. Voy a ir por el negro. Y puedes tener una especie de azul genial. También puedes tener una especie de verde fresco. Depende de ti. Podría entrar en una especie de purpuramente un poco bordeando ahí Bien. Sí, eso me funciona. Entonces tú ahí. Ahora voy a agarrar esto, agarrar la iba dropal e ir así y vamos, necesitamos una, dos, tres, cuatro, cinco etapas Necesito uno en el medio. Este de aquí, voy a robar el mismo color. Voy a decir, no tan oscuro, así que necesitamos ser mucho más brillantes. Simplemente puedes ir a recordar el brillo de saturación de tonalidad. Ese es este y sube, mantén turno, y puedes ver aquí, no es gris. Quiero estar aquí. Quiero que sea gris pero tenga un cálido usando un poco de este azul. ¿Lo puedes ver aquí? Es un gris frío. Este de aquí va a estar en algún punto intermedio. Así que voy a ir me caigo en absoluto y me voy, que sigue en la zona azul, pero más aquí arriba. Oh, no, tiene que estar oscuro, en algún lugar ahí dentro. A mí me gusta. Bien, haremos nuestra última. Va a estar a medio camino entre estos dos tipos, y nunca es solo arrastre 20% o 50% La hay, voy a hacerlo más brillante, pero se ve demasiado azul, así que voy a venir aquí y tener solo la pizca de azul. Todo bien. Tengo mis colores de los que puedo empezar a construir. Tengo un color primario, secundario, de acento, y luego estos son mis colores de interfaz. Texto, cuadros, interruptores, ese tipo de cosas. Ahora, estamos en la etapa conceptual. Esto se puede ajustar sobre la marcha porque descubrirás que lo usarás y estarás como, Oh, esto no funciona o esto se ve horrible, hay una combinación y puedes ir a actualizarlos. Pero es bueno tener un comienzo, sobre todo cuando estás sacando de los mood boards, y estás como, Oh, ¿a mí me gustan estos? Oh como con el morado. ¿Vamos a permutar? No, Dan. Enfoque. Realmente quiero este color ahora en vez de este color mostaza. Todo bien. Bajen. Todo bien. Así es como elijo los colores. No es la única forma oficial. Hay muchas maneras de hacerlo. Puedes pedir prestado de sitios web en color, obtener algunas ideas de ellos. Pero ten un playound con la rueda de colores si no la has usado antes para tener una idea de lo que la ciencia dice que debes usar, y luego ve a hacer lo tuyo de todos modos Todo eso es. Te veré en el siguiente video. 37. Cómo hacer gradientes en Figma: Tú. Vamos a mirar gradientes dentro de Figma. Hola gradientes. Vamos a hacer esta sutil. Haremos uno con tres colores. Te voy a mostrar cómo hacer un degradado que tenga una transparencia, para que parezca un fade. Todo eso y más, en realidad solo eso dentro de Figma. Vamos a saltar. Bien, tiempo de gradiente. y tengo todo tipo de desordenado Esta es mi inspiración. Voy a agarrar estos, copiarlos, y moverlos a mi escritorio Hola fi. Esa es una que vamos a empezar a construir. Ya no te necesito. No los necesito chicos. Eliminarlo. ¿Quién recuerda cómo apagar las columnas? Oh, no puedes recordar, pero recuerda el súper atajo Comando o Control K y escribe en diseño. Disponlo, y podemos mostrar guías. Todo bien. Voy a poner estos en la parte superior aquí. El único problema es por aquí mi panel Capas, tengo mi escritorio, pero tengo todos estos simplemente al azar en mi panel de capas. Seleccionemos todos estos. Vamos a Right Click y podemos enmarcar la selección. Están en su propio marco de barra de grupo pequeño. Voy a llamar a esto paleta de un color. ¿Se trata de paleta de colores? De todas formas. Aguanta. Sólo tengo que comprobarlo. Espera ahí. Todo bien. Estoy de vuelta, maldita sea, como dos más. Deletrear bien, ratón bien. Dibujar imágenes es bueno, sin embargo. Y echemos un vistazo. Tengo esto en esto. Uno de los problemas es con este fondo blanco aquí. Nosotros miramos esto antes, es si no tengo nada seleccionado, puedo cambiar documento, como el color del documento de trabajo a algo más oscuro. Eso a veces suele ser útil. Puedo ver estos en un poco más de contraste. Así que simplemente no tienes nada seleccionado y puedes cambiar la página. La página no imprime ni va al sitio web móvil. Es solo la interfaz de usuario para Figma. Bien, así que hagamos un gradiente. Voy a copiar a uno de estos tipos. Y los gradientes se esconden debajo de la película y debajo tenemos el sólido. Tenemos gradiente. Tenemos algunos otros, patrones, imágenes, videos. Entonces vamos a los gradientes, y nos da uno por defecto, y lo que puedes hacer es cambiar aquí Esa es probablemente la forma más fácil. Digamos que quiero sacar gradientes de. Bueno, vamos a hacer una manual. Vamos a hacer doble clic en esto. Puedes agarrar el control deslizante, elegir cualquier color antiguo. Entonces al final aquí, da clic en éste, arrástralo, elige cualquier color viejo. Oh, eso es horrible. Entonces digamos que quiero escoger degradados de mis colores reales. Agarro la herramienta cuentagotas y estamos trabajando en esta última de aquí, así que no sé Voy a resolver esto y ver lo mal que se pone. Este primero, quiero agarrar el eyedroptol de mi morado. Lo estoy cavando. A menudo, lo que me gusta hacer es en lugar de este gradiente realmente muy completo, raro. ¿Ves la flexión en la mía? Probablemente vienen a través en el video. No estoy seguro de dónde es eso que no va a pasar. Simplemente es raro. Bueno, es una especie de diferencia en el nivel Zoom. Puede que tengas eso en el tuyo. Rara. Verás, regresé. Ignorar la línea. Así que volver al gradiente es lo que puedes hacer. Lo que me parece un poco mejor de los gradientes es que se puede ver el puntito blanco Puedes arrastrarlo como pasado donde necesita estar. Tan a menudo me gustan los gradientes que son un poco más sutiles así. Alejar. Me parece que a menudo un gradiente más agradable. Aún más, puedes ir aún más lejos y simplemente ir como, Bien, quiero que esto esté por aquí Y este es un gradiente lineal por defecto. Se puede ir a la radio. Estos son muy buenos también. Voy a darle la vuelta, lo que quiero hacer es agarrar este extremo y estar ahí. En realidad sé qué quiero. Voy a darle la vuelta. Me gusta hacer esto donde hay esto más de un reloj esto. Puedo hacerlo más grande. Ahí está este gradiente más abstracto. Algo está pasando. Me gusta por botones donde no es un claro del todo, mírame. Soy un gradiente. Es un gradiente sutil. A mí me gustó más cómo lo teníamos la de radio, así que voy a ir a deshacer. Otras cosas que puedes hacer aquí. Hay radio, hay otras que nunca usarás angular. Se ve genial, supongo. ¿Te gusta? Y el último, que es el diamante. Otra vez, no uno que yo use. Voy a usar lineal. También puedes hacerlos transparentes . Entonces, vamos a traer una imagen. Tengo algo en el expediente del ejercicio, así que bajemos aquí. No, abajo a esta de aquí y ve a Video de imagen. Es Comando Mayús K, Control Shift K en una PC, ve a archivos de ejercicio. Aquí hay algunas imágenes. Escoge cualquier cosa. Escojamos este de aquí. Bien entonces Scott. Trae ese, voy a dar click y arrastrarlo hacia afuera. Lo que me parece realmente útil para los gradientes es, digamos que necesitamos poner algún tipo en la parte superior aquí Agarremos la herramienta de tipo, haga clic una vez. Encabezamiento. El problema con este texto aquí es que es difícil de leer en el fondo. ¿Bien? Entonces, asegúrese de usar la K para la herramienta de escala para escalar el texto. ¿Bien? Simplemente es muy difícil de leer en este contexto. Entonces lo que vamos a hacer es agregar un gradiente. Entonces hagamos uno nuevo. Vamos a agarrar la herramienta rectangular o un marco. ¿Bien? Y lo que voy a hacer es que voy a seguir con esto, ir al gradiente. Voy a escoger lineal. El de arriba va a ser completamente negro o el negro que estoy usando donde mi negro. Esa de ahí, así que voy a ir a poner gotas oculares una herramienta y agarrar esa Bien. Y este de abajo aquí, el segundo, en vez de ser a todo color, que es este de aquí, puedes agarrar esto y hacerlo cero. Esa es la transparencia como esta otra. Puedes hacer cosas como esta donde puedes arrastrarlo hacia abajo. Necesito jugar con las capas. ¿Recuerdas quién recuerda el atajo de capas? Simplemente puedes arrastrarlo aquí debajo encabezado o son los corchetes, que lo envía hasta la parte posterior. Eso son los corchetes al lado del piki y entonces podría tener que hacer lo mismo para el fondo De cualquier manera, me gusta hacer esto donde tienes esta agradable transición entre el fondo y el primer plano y con él seleccionado, puedes decidir sobre lineal aquí una vez que lo hayas hecho clic, decidir qué tan corto es también ¿Ves que puedo hacer que este pequeño se desvanezca ? Ahora lo estoy haciendo horrible. La otra cosa a tener en cuenta de hacer gradientes cuando estás haciendo transparencia, aunque esto es completamente transparente, decía a cero, importa de qué color sea ¿Puedes ver que se pone luz por ahí o hacerla más exagerada? Usemos el verde. A pesar de que el verde es completamente transparente, aparece en esta transición entre ambos. Entonces a veces solo quieres negro y negro y tienes la transición a cero para que sea solo un degradado claro y simple real. No se mezclaron otros colores. Lo último que quiero mostrarles es agregar tres colores. Miramos grabient antes era grabient. Bien, tienen muchos colores interesantes. Algunos horribles también. Entonces vamos a agarrar uno que nos guste. Desplazarse, ir scroll. Di este de aquí. Esto tiene tres colores aplicados a la misma. Bien, y los sitios no funcionan. Ojalá, cuando vayas a él, habrá tres colores diferentes aquí habrá tres colores diferentes. Han ajustado este sitio. Solía verme diferente. Ahora está roto. De hecho, hagamos una captura de pantalla y haremos una solución alternativa Traeremos eso a la producción y sacaremos los colores de él. Porque puedes ver que hay un color aquí arriba, hagámoslo un poco más pequeño y tal vez un color diferente en el medio a un tercer color a más de un azul. Entonces hagámoslo. Voy a dejar ahí esa. Bastante como uno de mis colores, y voy a agarrar. Y agrega un tercer color. Es lineal en este momento, tiene uno y dos. Simplemente puede hacer clic en cualquier parte de aquí para agregar un tercero. puedes hacerlo en esta línea aquí en la mesa de trabajo. Realmente no importa. Entonces este de aquí, podemos decir que este tercero puede ser este look, tengo ese color medio. Este top va a ser este color morado, más azul aquí, y luego este va a ser de este color aquí. Y podría moverlo en un poquito. Puedes agregar tantos colores como quieras a tu degradado. Tenemos tres. Ahí vas. Así es como hacer tres colores, y así es como hacer gradientes en general dentro de Figma. O voy a hacer gradientes de color o algo así donde se desvanece a transparente. Eso es. Eso son gradientes en figma. 38. Cómo crear y usar los estilos de color en Figma: Hola. Vamos a convertir nuestras paletas de colores en estilos de color. Los estilos son reutilizables. Llegamos a nombrarlos para que podamos colores consistentes. Podemos compartirlos con la gente. Podemos compartirlos con otros documentos. Todos son iguales. La parte poderosa de ellos es que, digamos que quiero ajustar este color que he hecho y usar lotes a lo largo de mi documento, puedo pasar y todos están conectados. Mira, como que puedo hacer cambios, y todo en este documento actualizará el poder de los estilos de color. Además, cubriremos algunas de las convenciones de nomenclatura que acompañan cuando estamos nombrando colores. Vamos a saltar. Bien, para crear algunos estilos. Empecemos con este de aquí. Y para eso están estos puntitos. Puedes tener estilos en cualquiera de estas características. ¿Puedes ver estilos para efectos, estilos para trazos? Solo son reutilizables, ¿verdad? Entonces hagamos esto primero. Vamos a los estilos. Es bastante confuso todas las bibliotecas. Lo que podrías hacer es crearlo en este archivo solo para que me guste, eso está claro. Y lo que vamos a hacer es agregar uno nuevo. Entonces este pequeño plus. Tengo el mío seleccionado, golpeé Plus, o golpeé los puntos, luego golpeé más. Podemos darle un nombre. Ahora, nombrando convenciones para colores. Hay algunos, sí. Te voy a dar los más comunes. Hay muchas maneras de hacerlo. El más común es en lugar de llamarlo púrpura, llámalo primario. En caso de que cambies tu color primario a otra cosa, no querrás tener un montón de colores llamados púrpura. Entonces es primaria. Si eres freelancer, trabajas para muchas empresas, podrías escribir el nombre de la marca. A menudo solo pongo las iniciales. Entonces esta es la primaria de Scott Wallets. Porque si estás trabajando para otra compañía, terminarás con montones y montones de primarias Entonces esto está claro qué es esto porque tenemos una, dos, tres versiones de esto. Podrías terminar con cinco, diez, una buena convención de nomenclatura. Podrías simplemente llamar a este número uno, o tal vez a ese número uno, número dos, número tres. Bien, a veces la gente va a tener esto a 100 y luego éste es decir, es más transparente. Lo van a poner como 50. Es como el 50% de ese color principal. Eso lo ves bastante. Probablemente el más común es usar cientos. Es a partir de días de fuentes, pesos de fuentes. Si conoces pesos de fuentes, sabrás que el peso 500 es lo normal. 700 es negrita, 900 es extra negrita. Hacemos algo similar con el color. Tu color medio. Este es el uso medio de la misma. Tienes una escala de uno a 900. 100 va a ser la versión más ligera de tu color y 900 va a ser la versión más oscura Esto está justo en el medio, así que vamos a llamar a esto 1500. Sé que es raro. Está tratando de ser genial y ventoso al respecto, pero es raro. Voy a copiar eso, voy a crear un estilo. Tenemos un estilo ahora. Vamos a aplicar el estilo y volveremos a nombrar. Voy a ir al modo Zoom y agregar algunos elementos diferentes a mi página. Todo bien. Buen trabajo. Todos los bits que ya he hecho, he vuelto a agregar. Ahora, digamos que queremos agregar nuestro color primario. Lo que podemos hacer es seleccionarlo todo. En lugar de intentar copiarlo y pegarlo, usa el atol de gotas oculares que está Ya puedes hacer click en estilos y puedes decir, Mira, ahí está mi estilo. Lo que es realmente genial de esto es si tienes un documento muy grande y los clientes como, Oh, ¿qué tiene de malo el morado? Por qué no es un poco más no lo sé, purpuramente. Lo que puedes hacer es no tener nada seleccionado, encontrar tu estilo, ir a editar y decir, aquí abajo, este es mi cambio. ¿Ves que todo viene para el paseo? Ya puedes ver el beneficio para eso, ¿verdad? Es una gran manera de simplemente ajustarlo. La otra cosa genial es que puedes compartir estilos. Veremos eso más adelante, pero puedes compartirlo entre empresas, entre documentos, así que todos estamos usando el mismo morado. Bien, construyamos unos cuantos más. Vamos a esta de aquí, que es la versión más oscura. Vamos a agregarlo a mis estilos. Vamos a golpear plus, y vamos a llamar a éste, ¿cómo lo vamos a llamar? Sigue siendo un color primario, pero en lugar del 500, el más oscuro que probablemente deberías tener es 900 Quiero dejarme espacio para una versión más oscura, así que voy a llamar a esto 1700. Déjame hacer una más y deshacer. Yo agregué un extra. Hagamos esta última. Yo haré esto en modo velocidad, tú esperas ahí. Todo bien. Por qué esto es bastante bueno es que tengo 300, 700 y vamos puedes arrastrar estos por ahí si no tengo nada seleccionado porque los creé en diferentes tiempos, es solo apilar , pero quiero, digamos, 700 en la parte inferior, 300 en la parte superior. Luz media oscura. La razón por la que esto es bastante útil es más adelante si estás como, Oh, hombre, necesito colorear entre estos. Lo que puedes hacer es decir, bien, quiero colorear en el medio, y tiene que ser un poco más claro pero no tan oscuro como eso. Tienes espacio para nombrar uno, mira, tenemos un 300, un 500 y un 700. Está entre estos. Uh, eh. Sí, podríamos llamar a esto 1600. Entonces tenemos algunos alcances para trabajar. Si encuentras los colores de otras personas, ellos tendrán uno para todo. Ellos tendrán 100, 200, 300, tienen todos estos. Es un poco exagerado por lo que estamos haciendo. Sin embargo, vamos a deshacer esto, pero así es como funciona el nombre Es raro, lo sé. Ve mucho y por eso está ahí. Si nunca antes te has topado con esto, así es como hacen las fuentes también. Audaz, regular, eso es ligero. No, sea cual sea la luz que sea. El delgado, hay espacio para uno más delgado y uno más oscuro. Todo bien. Esos son esos colores. Sin nada seleccionado, puedes ver tus estilos por aquí, puedes hacer clic derecho en ellos y eliminarlos o duplicarlos, copiarlos. Puedes editarlos. También puedes reorganizarlos haciendo clic y arrastrándolos. Vamos a agregar nuestro gradiente también. Ese es el que quiero agregar. Lo mismo, agrega este. La convención de nomenclatura para esta va a ser ligeramente diferente porque ¿voy a tener diferentes versiones de esta? Probablemente no. Voy a decir gradiente. Sólo voy a llamar a este gradiente uno. Ahora lo genial de esto, esto es a lo largo de todo el documento. Para que podamos volver a nuestro móvil Lo fi y encontrar nuestro documento. Estamos usando este color aquí y hacemos doble clic en él para entrar. Oh, no, voy a usar mi atajo. ¿Recuerdas clic de comando o clic de Control en una PC? Este es este color de imagen aquí. No estoy seguro de por qué se llama imagen, de todos modos. Oh, sí tenía una imagen en ella, ¿verdad? Oh, lo hicimos y lo borramos, ¿no? No puedo recordar. Lo bueno de, sin embargo, es que tengo esta seleccionada. Puedo ir a mi seleccionar todos los colores. Podemos recorrer el largo camino. ¿Dónde está? En Editar, podemos seleccionar todos. Oh, esta es una rara. Bien. Normalmente tiene seleccionar todos con el mismo relleno, pero como hice algo raro y ahora se llama imagen, no está funcionando. Hagámoslo a éste de aquí. ¿Qué haría ahora? Probablemente acabaría de borrar esa caja. Piensa que es una imagen, no lo es. Pero este de aquí tiene un relleno viejo regular. Hagámoslo a éste. Puedo decir Figma, editar, y se puede ver seleccionar todo Bien, me perdí. Ahí está, Dan. Estás como, haz clic en esa, Dan. Oh, ahí está ahí. Bien. Entonces nada que ver con esa imagen. Seleccione todos con el mismo relleno. Ahora bien, estos están usando un relleno similar. Este de aquí por alguna razón, creo que cambié cuando estaba hablando con ustedes. Voy a intentar lo mismo. Voy a usar mi atajo, aunque, Comando K o Control C o PC, y voy a seleccionar todos con el mismo relleno, y va a agarrar ninguno de ellos. Rara. He roto eso y quiero eliminarlos y seguir adelante. Pero hagámoslo con éste de aquí. Comando K o Control C o PC, recuerda las últimas cosas que has hecho, así que simplemente puedo hacer clic en esa He seleccionado esto, imagina que está seleccionando todo el documento. Puedo ir a llenar ahora y puedo decir, voy a usar mi color primario y los va a cambiar a todos. Lo mismo con el trazo. entrar aquí y mis colores están en esto. Yo podría decidir que voy a usar esta. Se pueden ver los perks. A veces aunque no quieras que cambie, di que quieres que todos cambien, pero este necesita quedarse morado independientemente. Lo que puedes hacer es seleccionar sobre esto, vamos a dar click a la vez. Ahí está ahí. También se puede ver la diferencia en la forma en que se ve el relleno. Algo así como por aquí, es un rectángulo, mientras que este de aquí es un punto. Un punto representa estilos dentro de una figma. Lo que puedes hacer es simplemente romperlo. Se vuelve a ese color aquí, ese pequeño cuadrado con el color, y ya no va a estar conectado a ese estilo. Yo actualizo mi estilo, estos van a cambiar. Lo último que vamos a hacer es que puedes irte y pasar al siguiente video ahora porque lo que voy a hacer es simplemente construir mis otros. En realidad las convenciones de nomenclatura. Va a ser acento primario, secundario. Yo sólo voy a pasar y hacer eso. Voy a decir. Es bastante tedioso Agregar estilos, botón más. Esta de aquí va a ser Scott Wallets. Esta va a ser mi secundaria. Este es mi 500. En realidad no tengo que dejar esto. Yo voy a hacer el resto de ellos. También vas a ser un estilo. Además Todo bien. Y una cosa que no mencioné fue, ¿cómo llamamos a estas? Si eso es acento primario, secundario, voy a llamar a estos neutrales. ¿Bien? Entonces voy a decir, voy a llenar. Además, este va a ser mi Nu neutral No tengo un neutro espinal, por favor aguanta. Bien, ahora lo es. Así que te voy a ver y sólo tipo de trabajo a mi manera a través de 100. Eso va a ser 300, 500, 709 cien. Entonces aceleraremos eso juntos. Todo bien. Tengo mis colores en. Lo siguiente que quiero hacer es alcanzarlos. 3057 ingredientes probablemente sólo van a ir por el fondo Voy a usar eso lo menos. 57, 300 va a ir por encima de 700 realmente no importa cómo ordenes estos. Solo asegúrate de que no tienes nada seleccionado en el fondo para obtener los estilos de color, hay uno, todos estos chicos. Impresionante. Una cosa que podrías haber hecho es solo tener cuidado. Vas de cabeza aquí y luego golpeas más. A veces solo quieres golpear plus aquí, y terminas con dos rellenos. Para deshacerte de dos rellenos, puedes cerrarlo o presionar el pequeño botón menos. Todo bien. Tenemos una paleta de colores. Míranos con diseñadores de UX elegantes, y tenemos una paleta de colores para trabajar, y los hemos convertido en estilos. Míranos. Todo bien. Empecemos a poner estas cosas en acción. Voy a ver en el siguiente video. 39. Proyecto de clase 07: Colores y columnas: Hola. Hace poco que no hemos hecho un proyecto de clase. Es el momento. He agrupado en colores y columnas porque el proyecto de clase columnas es aburrido y los colores uno es emocionante. Es la parte aburrida. Quiero que vayas a través y agregues tus columnas. En primer lugar, crea un móvil y un escritorio Hi Fi. Creamos la versión wireframe anteriormente, deberías estar en un total de cinco, asegúrate de que tu documento esté en tu borrador para que puedas agregar más de una página o más de tres páginas Bien, eso te lo mostré en los videos anteriores. Y luego quiero que en esas páginas agregues cuatro marcos, nuestras cuatro páginas. ¿Bien? Así que nuestra página de inicio, detalles del producto, página de pago y confirmación tanto para el escritorio como para el móvil. Déjame mostrarte rápidamente. Entonces tengo estas dos páginas, móvil y escritorio, turno uno para verlas todas. Así que acuna estas páginas. Deberían ser cuatro en cada uno, y quiero que agregues las columnas a ambas. Bien, en el móvil y en el escritorio. Número seis en el móvil, 12 en el escritorio. Y puedes decidir sobre la cuneta y el margen. Depende totalmente de ti. Bien, entonces son emocionantes colores de bits. Quiero que vayas a través y redactes una paleta de colores igual que esta de aquí, voy a seleccionar esta, golpear Mayús dos, traer esa cosa que tengo seleccionada al frente. Quiero que crees esto. Tienes un color primario, secundario y terciario o acento. Realmente no importa cómo lo pongas. Recuerda, queremos una versión media, oscura y ligera del mismo, y quiero que los conviertas en estilos. Así que aquí. Puedes usar numeración diferente, podría ser uno, dos, tres, estoy usando la escala tipo cientos. Asegúrate de que cuando hayas terminado de arrastrarlos por ahí para que tengan sentido para ti, algún orden. Haz los grises también. Los estamos llamando neutrales y por lo menos un gradiente. Cuando termines, lo que quiero que hagas es tomar una captura de pantalla de todo esto porque quiero ver tus colores, pero también tus estilos ahí dentro. Entonces sube eso. No lo agarré todo. Quiero agarrar todo esto. Echemos un vistazo a los proyectos de clase. Ahí está ahí. Hay un ejemplo entregable, algo así. Colores. No te preocupes, aunque, si eres como, los colores se desprenden. No sé lo que voy a estar haciendo. Podemos ajustarlas a lo largo del curso. A medida que avanzamos, puedes ajustarlos con bastante facilidad, miembro, porque tenemos estilos. Eso está bien. Puedes obtener los colores de tu tabla de movimiento o puedes obtenerlos desde el sitio de inspiración de color. No me importa de dónde sacas tus colores. No te preocupes por enviarme una captura de pantalla de tus columnas. Confiaré en que lo has hecho. Pero sí quiero ver esto para tu proyecto de clase. Bien, ve a hacer algunos colores. Si aún no lo has hecho y consígalos todos bonitos y ordenados y asegúrate de que también haya un gradiente ahí dentro. No tengo el mío ahí. En realidad, necesito actualizar este. Esta es una versión antigua de mis colores. Ahí vas. Esa es la correcta. Todo bien. Disfruta haciendo colores y aburridas columnas viejas. Voy a ver en el siguiente video. 40. Fuentes que faltan en el navegador de Figma: Este breve video es para cualquiera que esté usando Figma en el navegador y no la aplicación de escritorio La aplicación de escritorio no necesita este video. Si estás usando la versión del navegador, y probablemente lo harás eventualmente, a veces pueden faltar fuentes. Y todo lo que necesitas hacer, es bastante sencillo, vas a figma.com barra diagonal Descargas e instala esto. Reinicie el navegador. Déjame cubrir solo un poco más de detalle para quienes estén interesados. Salta en. Es fácil. Ir a figma.com slash Encuentra el instalador de fuentes que coincida con tu sistema operativo, instálalo y luego cierra tu navegador, vuelve a abrirlo y aparecerá Un poco más de detalle son dos versiones de Figma que puedes usar Ahí está este escritorio que puedes descargar. Oye, ese es éste. Es algo que se ejecuta en mi escritorio. Es muy similar a la versión aquí en el navegador, que estoy ejecutando en Chrome. ¿Bien? Y se ven igual. Una pequeña diferencia es recordar que olvidé que esta versión del navegador no tiene el pequeño botón de inicio, que mencioné algunas veces en el curso swoops Entonces ahí está ahí, el botón de inicio. Esto no lo tiene. Te acuerdas de ir a Archivos y volver a archivos llegar al mismo lugar. Pero también la versión de escritorio, esta de aquí, tiene. Extraño y tiene todas las fuentes de las que he instalado en mi computadora. Este navegador no lo hace. Solo tiene cantidad selecta de fuentes, nada instalado en su máquina. Todo lo que necesitas hacer es ir a instalar esto y luego cerrar tu navegador, volver a abrirlo y cualquier fuente que hayas descargado o comprado aparecerá dentro de Figma. Fácil, B fácil. Eso es. Seguir adelante. 41. ¿Qué fuentes puedo usar? Más combinación de fuentes en Figma: En este video, vamos a ver qué fuentes puedo usar en mi sitio web y aplicación. Veremos Google Fonts y también veremos emparejamiento de fuentes, una forma de combinar dos fuentes diferentes que se ven bien juntas. Señor Bin. Todo bien. Cuando estás en las cosas es lo que quiero. Cuando estás escribiendo dentro de Figma, obtienes un montón de fuentes precargadas y estás como, ¿De dónde vinieron estas? Básicamente, todos son de Google Fonts. Google ha suministrado al mundo e Internet un montón de fuentes de uso comercial gratuitas, y probablemente encontrarás algo ahí dentro que funcione para ti. Si quieres instalar tu propia fuente, solo tienes que tener cuidado. Digamos que encuentras una fuente en otro lugar, y la instalas en tu máquina. Solo necesitas asegurarte de tener una licencia comercial para usarlo. No tengas miedo de comprar fuentes como hay una que compré el otro día, Clem, me encanta esta fundición Si el sitio web también. Es muy genial. Digamos que americano Grotesco es el que quiero. Simplemente es perfecto para la marca, algo que quiero usar a hora de comprarlo. Este es uno que sí compré. Compré Geograph y lo compré originalmente solo para escritorio Cinco usuarios pueden usarlo y yo puedo usarlo en mi computadora y hacerlo para todo tipo de material impreso. Lo estaba usando para una camiseta. Qué fuentes que quiero, elijo las fuentes que me pongo, quiero una delgada y regular. Ves que en realidad estás pagando por fuente. Puedes comprarlos más baratos como paquete, pero nosotros estamos comprando estos. No tengas miedo de comprar pero hay muchas cosas buenas gratis en línea. Ahora bien, lo que hay que comprobar, es que no pude pasarlo por mi página web. Necesito usar la licencia web, y tengo que pagar por esto. Necesito asegurarme de que estoy teniendo cuidado con qué tipo de letra le vendo a mi cliente. Si son como, Oh, sí, es genial. Entonces vas y intentas usarlo. O va a meterse en problemas o va a costar, a lo mejor está en el presupuesto. Tienes que asegurarte de tener los derechos para usarlo en tu web, volvamos a las cosas gratuitas que están integradas en Google. Básicamente, fonts.google.com es de donde vienen todos. Todos están precargados dentro de Figma, y eso es todo lo que realmente necesitas saber sobre Pero entonces llegas a la ¿qué fuentes escojo? Puede que ya tengas un aficionado corporativo y estás buscando una fuente que vaya con ella. El término que estás buscando es emparejamiento de fuentes. Si eres nuevo en las fuentes, este puede ser un término súper útil y puedes buscar en Internet los pings de Google Estoy en el figma.com slash Google Hyphen Fonts y Figma han hecho algunos emparejamientos de fuentes y solo te va a mostrar Echemos un vistazo a una fuente que uso bastante. Ferroviario. Vamos a echarle un vistazo , obtener el emparejamiento. Lo que van a hacer es como, verdad, te gusta Ferrocarril? ¿Qué fuentes van a ir con ella? ¿Quieres una fuente Serif, que es la que tiene pies pequeños o Sand serif? No tiene el. Realmente me gusta esta página porque no me da muy buenos ejemplos. Eventualmente podrás llegar ahí. Mira esto. Si abro Railway plus, probemos Merryweather. Se abre en el interior de en mi navegador. Básicamente, ahora estoy usando Figma. Está copiado en mis borradores y te han dado ejemplos de A, esto es un Merywther solo tiene algunos conceptos Lo que me gusta ver es solo buscar en Internet interesantes maridajes de fuentes Acabo de hacer clic en un montón de resultados de Google. Una de ellas es del propio Google y solo te muestra, mira, estas dos fuentes que van juntas podrían ser para ti. ¿Qué fuentes son esas? No es un sitio muy bueno. Sitios que me gustan fontpa.co Esto es bastante bueno. Se puede empezar a ver, a la derecha. Todo bien. ¿Cuáles me gustan juntos? Podrías estar en esa etapa conceptual o etapa de diseño de logotipos, y ser como, oh, me gustan estos dos juntos. A mí me gusta aún más cuando hay ejemplos. Acabo de encontrar esta. Solo una página de blog aleatoria. Entonces esto puede o no estar aquí cuando vuelvas. Pero me da algunos ejemplos más. Estás como, oh, me gusta Playfair. ¿Cuál quiero ir con Playfair con una fuente Sands here ¿Qué es esto? Este es el pase de Playfair ¿Cuál es este? Fuente Sands Pro. Copia corporal para fuente Sands proro y tal vez yo haga mis títulos Miedo. Puedes dar la vuelta y irte, eso me gusta. Eso me gusta. De nuevo, solo trabajas tu camino tratando de encontrar buenos emparejamientos Ni siquiera necesitas instalarlos. Digamos que aquí hacemos Oswald. Si entro en FIGMA, encontrarás que si entro aquí y solo escribo Oz, ahí está ahí Oswald. Puedo empezar a usarlo. Tendrás todos los pesos. Aquí sólo hay algunas pesas, pero entiendes la idea. Todo estoy de vuelta del futuro. Solo quiero agregar esto al video. La gente pregunta sobre fonts.adobe.com. Es posible que ya tengas una licencia de Adobe y estés usando fuentes de Adobe. ¿Se pueden usar Figma Necesitas descargarlos e instalarlos usando la forma en que normalmente lo haces con las fuentes de Adobe. Si tienes la aplicación Creative Cloud, solo tienes que hacer doble clic en ellas y se agregará a tu computadora. Si estás usando la versión del navegador, como en el último video, necesitas tener instalado el instalador de fuentes para aparezcan en la versión del navegador de la FIG. Eso es. El único problema con FigMA lo siento, fuentes de Adobe es que las usas porque tienes una licencia paga de Adobe Por lo que es necesario mantener la licencia para seguir usando sus fuentes. Esa es la única advertencia con ellos. Y además, si lo compartes con otro diseñador, también necesitan tener su propia licencia para la fuente. No puedes simplemente darles la fuente. Pero es muy común usar fuentes de Adobe. No les tengas miedo, pero solo necesitas asegurarte de que realidad eres suscriptor de Adobe. Todo bien. De vuelta con el video. Eso es solo una pequeña nota sobre cómo te aseguras de tener las fuentes adecuadas para usar. Si tienes una fuente paga, asegúrate de obtener la licencia para ello y si vas a usar una fuente de Google, ¿cómo emparejarlas para que se vean geniales? Llevo más de 20 años haciendo diseño y todavía me voy cuando busco cosas. Especialmente si me dan una fuente de una empresa, me voy a ir a tratar de encontrar una fuente que se empareja con ella para que pueda conservar su fuente, pero también tengo alguna fuente o fuentes extra que pueda usar durante todo el diseño, darle sabor un poco. Voy a mirar el emparejamiento de fuentes. A mí me gusta Oswald Realmente no me gusta Oswald, normalmente, porque normalmente está en negrita Estoy como, pero la luz extra es realmente sabrosa. Mira eso. Todo eso es. TastinesSO. Te veré en el siguiente video. 42. ¿Qué tamaños de fuente debo elegir en el diseño web?: Hola. Bienvenida. Oye, vamos a hablar de tamaños de fuente. Hay algunos tamaños muy comunes para usar. Puedes usar cualquier talla que te guste. Pero hay algunos comunes que hacer en el diseño web y de aplicaciones, y los voy a compartir contigo. Entonces pasaremos un poco de tiempo simplemente aplicando algún texto a las primeras partes de nuestro diseño. Haremos nuestro tipo de caja de héroe, y estas cartas abajo aquí con algún texto en ella. Bien, vamos a saltar y ponernos en marcha. Bien, así que vamos a estadísticas algunas fuentes. Voy a hacer clic en el Tiki, dar click aquí y voy a escribir pegando uno y voy a poner un guión y después una muestra Realmente no importa lo que escribas aquí. Voy a golpear escape para volver a la herramienta de movimiento para poder moverla. Con ella seleccionada, voy a decir, Bien, ¿qué tipo de letra estoy usando Me he decidido por algo llamado Source Sans. A mí me gusta. Source Sans Pro, y para mis encabezados, estoy usando una fuente de tamaño negrita Ahora bien, ¿qué tamaño debería ser tu rumbo? Entonces quieres una gama con la que puedas trabajar. A menudo, el más grande es 72. Eso es bastante grande. Hasta usted. A menudo eso es rumbo cero porque no lo uso muy a menudo. El siguiente mejor tamaño y el tamaño grande para muchas páginas va a ser 48, ese va a ser mi encabezado uno. ¿Por qué los estoy nombrando Solo para que podamos tener algunas reglas, y crearemos algunos estilos en el siguiente video donde tengamos voy a ser consistente con mi tamaño de fuente. Es muy común tener 72, 48, 32 es el siguiente tamaño para la partida dos. Entonces tengo una rúbrica tres. ¿De qué tamaño debería ser? Estos pueden ser de cualquier tamaño que te guste. Simplemente es muy común usar estos tamaños. Una vez que te pones a la partida cuatro, que es 18, muchas veces no vas más bajo que eso. Podrías tener un bateo cinco. Depende de ti y vamos a ir pegando a cuatro. Entonces el siguiente es una copia corporal. A éste de aquí a menudo se le llama párrafo. Se le puede llamar copia corporal, párrafo. Vamos, Dan. Este de aquí normalmente es siempre para un sitio web, 16. Ese es un tamaño inicial muy bueno. Algunas fuentes parecen más grandes que otras, así que podrías ajustar esto. Puede que tengas que usar 17 o 14, sea lo que sea, y mi copia corporal va a ser regular. Eso es lo que voy a estar usando. A menudo bueno solo para tener una muestra como esta para que cuando estés diseñando, tengas algo de consistencia. Solo estoy alineando el mío ahora porque Pero teniendo estos a un lado aquí solo para que puedas sacar y simplemente ir necesito un rumbo tres, y luego empezar a cambiarlo. Voy a hacer eso con mi texto de marketing ahora. Pero ya puedes saltarte. Estos son los tamaños comunes. Puedes hacer lo que quieras. Una última cosa es que a menudo los llamarán, no voy a usar este de aquí. A grande. Voy a hacer voy a decir una H. Esa es la taquigrafía de una rúbrica. Si no haces web en algún momento, sabrás cuáles son estos. Si no solo tienes una taquigrafía para claramente encabezar tres. Y el párrafo se llama P. Esas son mis tallas. Es posible que tengas otro para términos y condiciones que sea pequeño, baje a 14 o 12. La otra cosa que hay que hacer es que te asegures de estar al 100% cuando estés buscando fuentes para un navegador porque va a ser representativo de la pantalla cuando realmente publique Si me alejan demasiado y me voy, Oh, sí, definitivamente necesito dirigirme a cero porque no parece tan grande, estás bastante alejada en 50% Sólo estar al 100%, que es shift cero en mi teclado, va al 100%. Y si estás en un dispositivo móvil, recuerda que necesitas alejar zoom hasta aproximadamente el mismo tamaño o hacer algunas pruebas en tu teléfono móvil antes llegar tarde. Vienen en tallas. Eso es. Voy a hacer un poco de producción ahora, así que puedes seguir adelante si acabas de venir por el tamaño de la fuente y vamos a construir un poco de páginas porque ha habido mucha teoría. De hecho, necesitamos hacer algunas cosas. Lo voy a hacer es en mi página de inicio, voy a agarrar mi herramienta de marco. Voy a poner un NAV básico y voy a escoger uno de mis colores. Mi relleno aquí, voy a ir a mis colores de relleno. Voy a ir a mis pequeñas muestras aquí. ¿Nosotros hacemos eso? De todas formas, da click en los cuatro puntos. Voy a escoger cualquiera de estos. Se puede llegar de cualquier manera, o ir a eso y golpear más y luego entrar en los colores de esta página. Puede que tengas que cambiar esto o puedes con él seleccionado, ir a la pequeña opción aquí y decir, en realidad, voy a usar este color primario. Ponlo en un Nav. Voy a encender mis columnas. ¿Quién recuerda cuál era el atajo? No recuerdas a Shift G. Así es. Voy a traer esto aquí para mi caja de héroe. Esta es la parte principal del mensaje de marketing. Va a tener una imagen encima y un poco de texto. Voy a apagar mis columnas ahora, Shift G. Voy a agregar mi encabezado uno aquí, voy a poner en mi marketing. Voy a tener para el mío, voy a decir mínimo. Voy a ir a todas las gorras. En realidad, mi bloqueo de mayúsculas en mi teclado está roto, pero sabemos cómo solucionarlo. Entonces vamos a ir diseño mínimo, propósito máximo. Vas a tener que llegar a tu propio mensaje de marketing cuando le hagamos un proyecto de clase, pero eso es lo que voy a usar. Recuerda, quiero hacer todas estas gorras. Voy a seleccionarlo todo. En realidad, en mi atajo para gobernarlos a todos. Shift K no va a funcionar cuando estoy en mi herramienta tipo. Entonces lo voy a hacer es golpear escapar para salir de ella. Todavía está seleccionado, pero no se resalta el texto. Ahora puedo hacer Shift K. No es Shift K. Mi cerebro se ha ido. Es el comando K. Control K en una PC. Y voy a decir mayúsculas y ponerlas todas en mayúsculas Lo que voy a hacer, no tienes que hacerlo es que no voy a ir por una fuente secundaria. Lo que voy a hacer es simplemente hacer un negrita para títulos y no negrita para texto de párrafo. Podrías tener una segunda fuente, eso está totalmente bien. Podrías tener una gran especie de exagerada para el golpeo y algo un poco más simple para el body copy o viceversa. Lo que voy a hacer es simplemente ir por una versión ligera. Así es como voy a conseguir ronda de tipo de tener dos fuentes. Yo sólo voy a nosotros la misma fuente a diferentes pesos. Entonces recibí mi mensaje de marketing ahí, y lo que voy a hacer es hacer mis pequeñas cajas de características aquí abajo. Lo que voy a hacer es volver a encender una grilla. Voy a agarrar probablemente solo copiar y pegar eso, y voy a hacer el cuadro de características. Los llaman tarjetas o cajas de características. Y aquí dentro, voy a cambiar esto para que sea un rubro diferente. Voy a decir que lo eres, ¿qué es este? Esto es 24. Eso parece acertado. 24, es mixto. Yo sólo voy a ir a la negrita, y voy a vamos a escribir algunos títulos de caja característica. Podríamos usar texto de marcador de posición aquí, pero estamos en la versión de alta fidelidad Acabo de tener el mío en otra página aquí. Los he escrito. Voy a conseguir que lo hagas un poco, pero este va a ser mi rumbo para éste. Rúbrica. Se va a bajar por el fondo voy a poner una imagen en la parte superior aquí. Ahora voy a duplicar esto. Voy a ir uno, Comando D, controlar el NRPC y sólo voy a escribir estos. Iré en modo rápido. Voy a seleccionar a todos los míos. Sólo estoy sosteniendo turno y haciendo doble clic en ellos y voy a decir que estás centrado en cuanto a la alineación del texto. Cuando agrego más texto, en vez de salir por la izquierda, va a salir por el centro. Ya sabes lo centrado que funcionó y voy a decir que tú y tú vas a ser este de aquí, este alineamiento. Estaban juntos. Eso no funcionó. Lo puso por debajo de aquí en alguna parte. Es por defecto. Esto es algo bueno e interesante. Con estos dos seleccionados, en realidad, no, con solo el texto seleccionado dentro del marco, debería poder centrarlo. Ahí vas. Eso es algo bueno saber. Si están uno encima del otro, puedes centrarlos. Pero lo que voy a hacer es que voy a decir, solo estoy dando click en el texto, voy a centrarlo y lo centrará dentro del marco. Todo bien. ¿Hay algo más que quiera hacer antes de seguir adelante? Eso va a ser. Así es como elegir tamaños de fuente. Hemos construido un poco de nuestro proyecto de diseño ahora. Voy a ir al turno G para apagar las columnas. Necesito jugar con el espaciado, pero eso es suficiente para este video. Te veremos en la siguiente. 43. Cómo hacer estilos de personajes en Figma: Yo Hola. Oye, en este video, vamos a hacer estos, los estilos tipo. Hemos hecho nuestros encabezamientos en el último video. Ahora vamos a convertirlos en estilos reutilizables como los colores que hicimos antes, para que cuando ajustemos uno, hagámoslo y cambiemos la fuente. Verás que todos los casos de uso aquí cambian. Guión de pincel, ooh. Deshacer deshacer. Vamos a saltar y aprender a hacer estilos de texto dentro de una Figma. Bien, conviértalos en estilos. Tomemos nuestro primero aquí, KOH uno, y pasamos a la tipografía y al igual que color S estos pequeños puntos en la esquina, estos son los estilos Voy a darle click, y voy a decir, agreguemos uno. ¿Cuáles son estos otros de aquí abajo? Son de echar un vistazo. El material tres podría ser material cuatro o cinco dependiendo de qué tan lejos en el futuro esté esto, y es por eso que Google hace sus fuentes. Utilizan este sistema de diseño llamado material. En lugar de llamarlo Android, lo llaman material. Si te desplazas hacia abajo, encontrarás todos los IOS. Si estás haciendo diseño de aplicaciones, simplemente puedes saltarte y comenzar a usar estas. IOS, y probablemente sea. ¿ Alguien más tiene cosas ahí? Vamos a hacer caso omiso de estos. Vamos a crear el nuestro propio. Empecemos de nuevo. Esta seleccionada, vamos a ir a los estilos. Vamos a decir plus, como hicimos con el color y vamos a decir este aquí va a ser mi encabezado uno y puedes agregar una descripción si es necesario. Está claro lo que tenemos y dónde usarlo porque es solo el encabezado, pero voy a crear el estilo. Todo bien. ¿Por qué es eso bueno? Significa que puedes venir y marcharte, justo este tiene que ser el estilo de encabezado uno. No tengo que ir a averiguar cuáles son las tallas y cuál es el peso. Yo sólo puedo entrar en mis estilos y decir, estás encabezando uno. Ahí está ahí. Boom, demasiado grande. Bien, pero entiendes la idea. Se pueden crear estilos. Si no tienes nada seleccionado, verás que todos los estilos aparecen con tus estilos de color. Oigan, chicos, voy a hacer la partida dos también, y les mostraré una de las ventajas Vamos a crearlo más, llamemos a este encabezado dos. Bien, voy a ir a aplicarlo aquí abajo, voy a mantener mi tecla de comando y mayúsculas. Recuerda, ya miramos esto antes. Si mantienes presionada la tecla de comando o la tecla Control en una PC, se sumergirá en este marco que tiene este texto dentro de él en lugar de hacer doble clic en él. Pero si mantengo turno también, significa que seleccionará más de una cosa a la vez. Yo solo voy click click, click, click. Eso es comando shift en un mac, control shift en una PC. Lo que voy a hacer es voy a decir que ahora eres el estilo de encabezar dos. Oh. El estilo no es mayúscula, ahí vamos Voy a fingir que era parte de la clase. Lo que vamos a hacer es que vamos a decir encabezamiento dos, de hecho, todos mis encabezamientos están en minúsculas Digamos que esa va a ser mi regla, así que no tengo que cambiarla más tarde. Para editar un estilo, el cliente vuelve y dice, necesita ser mayúscula y una fuente diferente Ese era mi plan original. Lo que puedes hacer es seguir adelante con tus estilos. No tengo nada seleccionado. Nada seleccionado, puedo ver mis estilos. Estoy en diseño, no en prototipo, y puedo ir a este de aquí encabezando dos, y puedo presionar el pequeño botón de estilo de edición. No hay mucho ahí. Puedo hacer click en los puntitos y decir, derecho, quiero estos a todas mayúsculas. ¿Puedes ver ese cambio ese cambio, ese cambio? El cliente podría volver y decir, no me gusta la salsa Sands Pro o tal vez simplemente no es lo suficientemente pesada. Queremos que sea la versión negra y veas que todos vienen por la derecha, o el cliente vuelve y dice: Bien, es hora de Comic Sans. Y renuncias porque no puedes vivir con arenas cómicas sobre fondo morado. ¿Se te ocurrió la idea? Deshacer rápidamente. Voy a ir ahí . No voy a pasar por todas ellas. Ahora, una cosa que quiero hacer antes de pasar y crearlos todos es que podrías tener dos fuentes. No sería común, pero podrías terminar con dos estilos de encabezado, uno que tal vez sea más informativo y otro que sea más marketing Es posible que hayas encontrado una fuente, otro gran consejo es, si tiene un encabezado aplicado a ella, un estilo aplicado a ella. Lo siento. Puedes ir por aquí y decir, este encabezamiento uno, puedo cambiarlo. Pero también puedo romperlo. Sigue siendo el tamaño correcto en la misma fuente. Simplemente no está conectado a ese estilo ahora. Si voy a cambiar este estilo, vamos a cambiarlo. Se ve igual, pero si voy a cambiarlo, pegando estilo y voy a cambiarlo a luz, notarás que eso cambió, pero no este porque rompí ese vínculo. Voy a deshacer eso, ir al estilo. He roto el vínculo, y voy a no recordar lo que estoy haciendo. Por favor, oh, sí, eso es correcto. Estábamos creando un tamaño de fuente diferente. Voy a escribir aquí todas las fuentes. Aquí arriba, voy a decir fuentes populares, fuentes de Google. En realidad me gustaría que hubiera mejores filtros aquí. No lo es. Solo voy a escribir a mano y ojalá encuentre una fuente dibujada a mano. Si puedo escribir mano. Vamos, Dan. Bien, así que voy a ir por esta de aquí, Figma, mano rápida Digamos que usando rápido y no me gusta. Por favor, sostenga. Eso me gusta, otra mano. Eso es genial. Digamos que quieres necesitas un encabezado de fuente de información regular, y necesitas un encabezado de estilo de marketing publicitario más descriptivo. Lo que puedes hacer es que puedes tener uno H, y puedes tener H uno puedes nombrarlo como quieras, pero vamos a llamar al nuestro uno H uno Alt como alternativa. Cuando haces ese estilo, puedes hacer lo mismo. Voy a hacer un estilo hit plus, y voy a llamar a este encabezado uno, Alt. Sólo así tengo dos de ellos, así puedo subir aquí y decir, en realidad, este propósito múltiple o propósito máximo puede ser el estilo de este encabezamiento uno Alt. Este de aquí va a estar encabezando uno regular, lo cual necesito para inventar un caso. Así que pasaré por aquí y rediseñaré todos estos, también podría Empezando a gustarle esta cosa de la mano. Voy a ir a hacer eso y trabajar nuestro camino a través de solo hacer todos los estilos. Deberías tener cinco de ellos en total. Voy a terminar teniendo seis de ellos porque quiero este estilo de rumbo alternativo. En realidad, antes de hacer eso, una cosa que no viene junto con el estilo de rumbo es ver esto. Hago un par de cosas. Vamos a pasar, asegurémonos de que está encabezando uno. Voy a ir a editar este encabezamiento. En realidad, no puedo aquí. Esa es otra interesante, todo tipo de cosas interesantes que aparecen. Aquí, si tengo este , que no es un estilo, tengo muchas opciones de tipo. Si hago clic en algo que ya sea una muestra, ¿puede ver? Solo tengo cosas como alineación y algunos ajustes de línea. Eso es porque está todo empatado con el estilo. Lo limita hacia abajo. Puedes romperlo y seguir moviéndote. Lo que voy a hacer es antes que nada, actualizar este, nada seleccionado, voy a ir a encabezar uno, voy a decir, hay que estar todo arriba aap Bonito. Entonces tengo este. Digamos que voy a agarrar esto y ponerlo en una página diferente, pero necesito ser de un color diferente. Obviamente, el blanco no es bueno aquí. Voy a hacerlo rojo. Y sin nada seleccionado, si voy y ajusto mi rumbo uno ahora, mira. Necesito cambiar el tamaño de fuente de la misma. Hagámoslo realmente pequeño. Yo hago eso, te darás cuenta de que eso se puso muy pequeño, pero mantuvo el color. Entonces el color no viene para el paseo. Simplemente ajusta la mecánica real del tamaño de fuente, enlatado, líder, ese tipo de cosas Voy a pasar por ahora en modo rápido y crear todo mi voy a deshacer todo eso. Voy a crear todos mis estilos y te veré en un segundo. Espera ahí. Bien, así que he creado un montón de ellos. Una de las cosas que voy a que quiero compartir es que esta fuente al 100% se pone realmente en el tamaño. Ni siquiera voy a crear un estilo para ello por si acaso va la siguiente persona, oh, se me permite usar la rúbrica cuatro. No se te permite. Ya lo he decidido. ¿Ves como esta fuente y aquí? Son del mismo tamaño. Ambos son 48. Este de aquí es más difícil de leer a ese tamaño. Es la misma altura. Es mucho más estrecho. Tomé la decisión de no hacerlo realmente pequeño y realmente no quiero que se use como párrafo. M abolladuras. Si miramos por aquí, tengo el rumbo para uno, dos y tres, pero no otra cosa. Otra cosa es que estos estilos están hechos en el orden en que los creas o se listan aquí. Tenemos que arrastrarlos por ahí. Quiero encabezar uno , dos, quiero tres allá arriba, cuatro allá arriba. Entonces probablemente párrafo en la parte superior porque es el que más uso. Uno, dos, tres, cuatro, y luego tengo uno, dos, tres para estas alternas no tienes que tener un tipo alternativo de fuente para tus encabezados. Podrías tener uno para tu párrafo o podría ser una versión en cursivos del mismo Pero ahora tenemos un estilo y lo genial de ellos ya que los usamos a través del documento, si necesitamos hacer ajustes, vamos a ajustar un archivo realmente grande y en realidad, te darás cuenta más adelante es que podemos hacerlo a través de documentos y compartirlo con otros compañeros Todos podemos compartir estos estilos, lo cual es realmente genial. Lo que necesitas tal vez asegurarte es de que realmente los has aplicado. A veces haces tu estilo después y es del mismo tamaño, pero no está conectado. Necesito asegurarme de que este bit aquí esté conectado a mi encabezado uno, es decir, este de aquí está conectado a mi viejo rumbo. Este de aquí es el correcto. Estas son todas la partida dos, así que estoy bien para irme. Este de aquí probablemente también lo sea, pero no te necesito. Eso es. Hicimos algunos estilos de tipo o estilos personajes dentro de Figma. Somos tan profesionales. Todo bien. Te veré en el siguiente video. 44. Texto de relleno ipsum y marcador de posición en Figma: En este video, vamos a ver agregar texto de marcador Solo se usa para sostener el lugar. Si no tenemos la copia, solo son palabras latinas mezcladas. Te voy a mostrar buenos lugares para conseguirlo . Te voy a mostrar un plugin. Es realmente genial se llama Content Real. Hace este texto de marcador de posición, pero también te permite pasar y agregar un montón de nombres falsos o fechas o ¿qué más tenemos? ¿Direcciones de correo electrónico? ¿Dónde está eso? Yo estaba aquí. En fin, las monedas, es un generador aleatorio de contenido realmente bueno. Vamos a saltar y ver cómo funciona. Bien, así que pongamos algún texto de marcador de posición. Voy a agarrar la tecla T y hacer clic y arrastrar porque quiero que mi mensaje de marketing entonces tenga un poco de body copy. Y dependiendo de la última fuente que uses, podría estar configurado como probablemente encabezando uno. Una cosa que no te mostré es que en realidad puedes simplemente hacer clic aquí y luego hacer clic en esto para cambiarlo. Voy a poner el mío a párrafo. Si no está en esto y está roto, recuerden, pueden entrar aquí y decir, quiero que este sea texto de párrafo. Mycosa parpadeando ahí dentro. ¿De dónde consigo Laura Nipsm? Es el rito del pasadizo que es este lado aquí, lipsum.com, lleno de anuncios Es feo. Pero es donde mucha gente acaba de recibir texto ficticio Puedes entrar aquí y decir, Bien, ¿qué quiero? Quiero cinco párrafos. En realidad, solo quiero un párrafo, generar, solo te da un montón de textos que puedes copiar directamente del navegador, ignorar los anuncios. Y pégalo aquí. Son solo palabras latinas todas mezcladas que no significan nada. El problema de usar esto a veces es que cuando lo envías al cliente porque todavía no tienes los textos de los derechos de autor, ellos van, ¿Qué es esto? Está roto. Entonces tal vez tengas que explicarlo. Pero es realmente útil porque necesitas trabajar en cosas como la altura de línea y el diseño y darle al redactor algunas palabras para golpear Si has permitido espacio para 200 caracteres, entonces ellos pueden funcionar para eso. Usamos texto marcador de posición solo para llenar el agujero en lugar de no lo sé, ¿qué hicimos antes? Creo que X una de las cosas geniales aunque, es que hay un enchufe. Siempre hay un plugin, hay uno muy bueno. Hay montones de ellos por ahí para un texto de orden de lugar. Digamos que quiero lo mismo aquí abajo, quiero un poco de texto. Voy a golpear mi herramienta tipo. Va a ir aquí abajo. No necesito mucho. Voy a asegurarme de que no me voy a comer dos en párrafo, y voy a traer un plugin. Los plugins se esconden aquí abajo en tu panel de acciones, voy a ir a plug-ins y voy a escribir este llamado Content Real, Content Real. Si escribes uropsm o garrapatas de Place Auto, escribe Lam, obtendrás muchos de ellos aquí. Nuevamente, buscas por cuántos usuarios lo han usado y les ha gustado. Esa es una manera fácil de saber cuál es la más popular. Pero el contenido real es súper común y realmente increíble porque hace un montón de cosas diferentes. Digamos aquí, puedo ir al texto, y puedo decir, con mi cursor parpadeando aquí, voy a hacerlo alineado a la izquierda. Voy a decir, dame algo de Lornopsmo. Está ahí dentro. No necesito todo eso. Sólo necesito ese pedazo, ponle un tope completo al final Y ahí tienes. Hay un enchufe. Este enchufe es bastante genial porque también hace otras cosas. Voy a hacer doble clic en él, hacer una copia manteniendo pulsada mi tecla opcional. Voy a escribir solo la palabra muestra. Voy a hacer el tamaño de la caja. Lo miramos de esta manera antes. Vamos a recapitular En el momento en que es una caja de altura fija porque va todo el camino ahí abajo, quiero cambiarla a este auto donde solo es la altura de lo que tengo escrito ahí, deshacerme de eso Haz algunas copias de ella, Escape to Get Out, arrastra una afuera, manteniendo pulsada la tecla, Comando D DDDD o Control DD DDD. Voy a seleccionarlos a todos. ¿Qué está haciendo? ¿ Qué nos está mostrando? Debajo del texto aquí, hay este nombre completo. Si necesitas un montón de nombres aleatorios en tus maquetas, puedes simplemente meterlos aquí O tal vez necesites direcciones de Estados Unidos o direcciones de correo electrónico, o fechas. Es muy útil para muchas cosas que no sean solo Lauren Ibson Voy a deshacer todo eso. No necesito ninguno de estos, pero ahí tienes. Texto marcador de posición Bien mientras trabajas, llena un vacío, te permite seguir diseñando, aunque no tengas el texto. Realmente genial para tus wireframes. Solo úsalos para las maquetas porque no quieres empezar a agregar texto porque no se trata de eso en la etapa de wireframe y aprendemos otro plug in Voy a cerrar esa. Todo bien. En el siguiente video. 45. Uso de IA para crear texto en Figma: Aquí. Oye, te voy a mostrar cómo usar Figmas AI para crear textos para nosotros. Le dimos un aviso y se nos ocurrieron algunos textos interesantes para nuestras carteras de piel. Es fácil de usar. Súper útil. Déjame mostrarte cómo funciona. Primero arriba. Estas características por el momento, son parte del programa de pago Figma, así que me estoy cambiando a mi cuenta de pago aquí Probablemente nos vamos a quedar en la cuenta de pago por el resto del curso. Intentaré señalar cualquier cosa que sea de pago y no gratis, pero no quiero evitar las funciones pagas durante todo el curso. Si tienes la cuenta gratuita y te vas a apegar a ella, algunos de los videos que puedes simplemente ver para tener una idea de, como, esto es bueno. Esto podría valer la pena o es bueno saberlo, pero no estoy bien, así que cambié mi cuenta de pago. La diferencia realmente es, si estás en la cuenta gratuita, ves que este ícono aquí cambia, estás como, ¿qué hace eso? Este es tu botón Acciones. Hemos entrado ahí por plugins y atajos. Este de aquí es lo mismo, pero es mágico. Esa es una captura de pantalla que tomé de la cuenta gratuita. Sólo por ejemplo, así que vamos a usar esto ahora con la magia. Oh, tiene algo de IA incorporada. Lo que vamos a hacer es texto y redacción publicitaria. Voy a seleccionar todo esto, eliminarlo. Mi maldición sigue parpadeando ahí, para darle a este botón mágico y voy a usar la reescritura de esta opción Es una Beta. Esto va a cambiar. Le van a cambiar el nombre *****. Pero échale un vistazo a la opción de escritura. Voy a hacer click en reescribir esto y voy a escribir en algo En realidad lo escribí pre. Ahí se come. Aquí vamos. Escribe una frase para la caja del héroe describiendo el diseño minimalista de billetera de cuero. Eso es en lo que estoy trabajando. Necesito que se haga un poco de copywritten. Voy a hacer clic en reescribir, y va a hacer algo Oh. Bonito. ¿Bien? Puedes usarlo para copywriting, como HGBT o Gemini o Claude o cualquier herramienta de IA que conozcas Este es tu primer toque de IA. Bastante increíble. Puedes hacer cosas como, Bien, quiero hacer cambios. En este caso, quiero que sea más casual, por favor. Haga clic en Reescribir Sí, es más casual. Se pueden hacer cosas como hacer cambios y más cortos, más largos. Así que haz estas dos frases. ¿Lo deletreo mal? Apenas dos frases. Ahí vas. Voy a deshacer me gusta el que tenía antes. Deshacer obras. Fresco. La IA está integrada en figma en diferentes partes Vamos a cubrir algunos de ellos. Pero estas cosas de reescritura son geniales para textos de pedidos de lugar o incluso solo redacción publicitaria, algo en lo que no soy genial, y necesito poner cosas aquí También me gusta por solo poner en orden. Conozco mi intención, ningún detalle dejado sin considerar. No lo sé. Yo solo lo hice y estaba como, me pregunto qué dirá la IA solo para ordenarlo. Haga clic en esto y luego simplemente puede escribir en reescritura, y luego escribir en ordenado no escrito Y luego haz clic en Reescribir. Me va a ayudar con mi gramática y mi ortografía. Probablemente voy a tirar algunos Mdashs ahí dentro. Parece ser lo que más le gusta hacer. Pero sí, eso me parece bueno solo por cerrar mi trabajo mientras trabajo . Me encanta. Esta caja de aquí tiene que ser de altura automática. Lo que en realidad lo llaman. Sí, altura auto. Los de tamaño fijo. Fresco. Todo bien. Eso es IA dentro de Figma. Se puede utilizar en lugar de texto de marcador de posición. Si estás buscando realmente poner contenido en, te será útil. Pero será diferente para cuando llegues aquí. Es nuevo y elegante y házmelo saber en los comentarios si es completamente diferente y volveré a escribir este Ojalá, no debería ser muy difícil de encontrar y ponerse en marcha. Pero cada vez que me conecto a Figma, han cambiado la forma en la interfaz y la forma en que funciona. Ahí vas. Todo bien. Te veré en el siguiente video. 46. Cosas útiles que puedes saber sobre el texto en Figma: Hola. Se trata de consejos y trucos de tipo levemente avanzados Cosas que vas a necesitar para el curso. Vamos a repasar y mostrarte cómo jugar con el espaciado entre letras, interlineado, espaciado entre párrafos. Vamos a hacer un pequeño simulacro de logo, listas, enlaces. Te voy a mostrar cómo funcionan haciendo clic en ellos. Yo trabajo entonces. Sí, solo un montón de pequeñas cosas que vamos a necesitar para el curso y justo ahora que tenemos algunas habilidades en las que podemos meternos. Así que vamos a saltar. Todo bien. Para empezar, estoy en mi página de HyidelityHMe. Voy a seleccionar este trozo de texto aquí. Acabo de copiarlo y pegarlo algunas veces. Así que tenemos algunas líneas extra con las que trabajar. También voy a cambiarlo a este cuadro de tamaño automático, altura automática para que se más y más pequeño a medida que mi texto. Veamos un par de características levemente avanzadas. Una altura de línea aquí es el espacio entre mis líneas. Entonces en Auto, si hago clic en Auto, es una altura de línea de 20. Eso se basa en que este tamaño de fuente es de 16. El valor por defecto es bastante bueno. Puedes ir y cambiarlo. Entonces reglas básicas es aproximadamente la mitad de lo que los tamaños de fuente generalmente se ven bien. Si tienes 16, ocho obras. Lo siento, la mitad más la fuente. 16 más ocho. Bien te da 24. No es una ciencia completa. Auto es realmente muy bueno. Es un poco más ajustado, depende de ti, pero esas son algunas reglas básicas La otra cosa está aquí, puedes usar porcentajes, así que podría usar el 150% 150. Si solo escribo 150, es asumiendo que estoy usando píxeles. Tengo que escribir en porcentaje, y eso me va a dar la misma medida. Realmente no importa. Sin embargo, lo genial de esto es que si aumento esto hasta 20, aumentará la altura de la línea. Deshacer eso. Si quieres deshacerte de él y volver a Auto, simplemente elimínalo de aquí, borra todo y presiona Enter, volverá a Auto. Veamos la diferencia entre la altura de línea y el espaciado entre párrafos. Voy a poner una devolución. Puse una devolución después de esto, podrías estar tentado a poner una segunda devolución en mal. Eso es travieso. No se le permite hacer dos devoluciones. La mejor manera de hacerlo es arrancar una vuelta, y selecciono todo mi texto. Puedo entrar en estas características avanzadas, y aquí hay una opción que dice espaciado entre párrafos. Entonces estos son los espacios, no entre líneas, sino entre sus párrafos. Un párrafo de ustedes ha tenido una devolución. Entonces otra vez, voy a poner lo que quieras. La regla para el espaciado de párrafos es aproximadamente la mitad de lo que son los tamaños de fuente. Por eso me confundí 16/2 es ocho. Buen trabajo, Dan. Eso termina pareciendo un lindo salto de párrafo. Depende de ti si sientes que eso es bueno. Si lo mantienes en múltiplos de ocho, puede ser más pequeño, por lo que puede ser cuatro. Cualquier cosa que sea divisible por ocho o veces por ocho es útil Eso es más tarde cuando estamos alineando las cosas. Cuando lleguemos súper avanzados, tal vez en curso de productos avanzados, pasaremos por la cuadrícula de ocho puntos alineando cosas. Es un poco nerd, pero solo como regla, intenta mantener el espaciado entre párrafos ochos o 8.5, entonces 12 Algo que funcione, de nuevo, puedes eliminarlo y presionar Enter y. Puedes ponerla a cero para volver atrás. Aquí no se pueden usar porcentajes. Podrías estar haciendo algo tan plegable, mira este fi, ve a este de aquí, y voy a arreglar la altura y necesito hacerlo más pequeño Se puede ver que simplemente sale del exterior. Yo sólo fluye hacia fuera. ¿Cuál es incluso el punto? Es para que puedas entrar aquí en topografía y trunca. Si ves ahí el punto punto punto, quieres agregar probablemente un botón hacia fuera, dice Leer más para que se abra. Se pueden truncar los párrafos. Otras cosas que son útiles, hay viñetas. Voy a volver al tamaño auto, y voy a poner una devolución, voy a ir a agarrar. Lista. Las listas también están ocultas aquí. No estaban en el producto. Ahora lo son. Tienes balas y números. Puede hacer interlineado en lugar de interlineado. Es específicamente cuatro listas. De nuevo, puedo poner ocho o tal vez cuatro en este caso. Ahora quiero que esto tenga espaciado entre párrafos y quiero que diga que es, ¿qué decidimos ocho? Bonito. Quiero mostrarte el espaciado entre letras, así que voy a agarrar mi fuente, y voy a escribir una especie de logotipo de marcador Podrías ir a diseñar tu logo en Figma o en otro lugar, tal vez más tarde cuando obtengas tus habilidades un poco mejor Pero si tienes habilidades de Illustrator o alguna otra afinidad de software, Canva, puedes ir y hacer un logo No es típico hacer logos en Figma, pero sí lo puede hacer. ¿Bien? Entonces lo que voy a hacer es que te voy a mostrar esto. Voy a escoger mi fuente. Aquí me gusta lo Zen para mi logo, y voy a hacer otro poco de tipo. ¿Bien? Tipo dos, y voy a poner vatios. Walts va a ser esa arena de salsa que usamos antes. Salsa. Aquí está Source Aspro Bien, escapa, vuelve a la herramienta de mudanza y voy a amabilidad solo alinearlos aquí. Voy a ir y dimensionarlo. Recuerda, ¿cómo dimensiono las fuentes? Yo solo quiero arrastrarlo porque no quiero que sea de un tamaño específico. Es un logo. Estoy tratando de simplemente arrastrarlo. Así es. El ketol acaba de presionar la tecla K en tu teclado y puedes escalarlo. Voy a hacer el mío así de grande y mi billetera va a ser un poco más pequeña. Simplemente no en el ketol Dan. Todo bien. Ahí vamos. Bien, entonces este es mi pequeño logo simulado Lo que quiero hacer es jugar con. ¿Ves esta molesta brecha entre aquí? Sucede mucho con mi nombre, Scott. Los dos Ts terminan separándose. Lo que puedo hacer es seleccionar este primero, y afectará el espacio justo después de él. Por aquí, tengo espaciado entre letras. Mira esto. Simplemente puedo hacer clic en mantener y arrastrarlo, arriba y abajo para el espaciado entre letras. ¿Ves lo que estoy haciendo aquí? Ah, magia. Podrías decidir que la C podría estar un poco más cerca porque se envuelve ahí dentro. Entonces las fuentes son mejores. Oh, ¿me gusta que no? Eso tiene, solo estoy jugando con el espaciado entre letras, a menudo referido como enlatado o rastreo, espaciado entre letras Otra cosa que puedes hacer cuando estás personalizando fuentes es que me voy a quedar con una versión de esto, así que la acabo de copiar Este de aquí aunque, voy a decir, haga clic derecho, hay una manera de delinear. Dónde está su trazo de contorno. A lo que me refiero. Lo que ha pasado aquí es que esto ahora no es una fuente. Se trata de formas que parecen una fuente. Sin embargo, lo bueno de esto es que no puedo cambiar el texto, pero puedo entrar dentro de él. Haga doble clic un par de veces y de hecho puedo empezar a ver estos pequeños puntos aquí. Me acerco aún más. Y mira esto, puedo agarrar a Shift, ambos esos pequeños puntos. Hay que estar bastante cerca para meterse con los puntos. Mira, puedo empezar a jugar con eso. Puedo decir, quiero que esto se una ahí. Yo sólo voy con la corriente aquí. ¿Qué estoy haciendo? No estoy segura. Mayús haciendo clic en ambos, moviéndolos a través. Voy a usar mis teclas de flecha solo para darle un toque. Puedes ver que puedes empezar a desarmar fuentes. Haga clic en el comando de miembro. Entraremos directamente en lo que estás trabajando. A veces es más fácil. Eso. Así que un poco más. Todo bien. Eso es genial. Todo bien. Delinear fuentes simplemente lo convierte en una forma Yo lo uso bastante a menudo también aquí abajo. Digamos que quiero un poco más, echemos un vistazo. A veces usas fuentes, esa estaba destinada a ser una fuente, Scott, solo quería meterme con ella. Agarremos la herramienta de círculo, hagamos clic manteniendo presionada, agarremos el elipSTOL, mantengamos presionada la tecla Mayús para arrastrarla hacia afuera. No quiero relleno y quiero un trazo. Vamos a dejar caer la sombra. Trazo va a ser blanco, y voy a hacer que sea un peso de dentro de esto, voy a agregar la herramienta tipo. Voy a hacer click una vez justo aquí arriba , voy a usar el plus. Quiero que este plus sea audaz. Pero ya no quiero que sea una fuente porque es muy difícil alinear. Puedes ver aquí, voy a agarrar mi Ktol, escalarlo y funciona El problema con ello, sin embargo, es que si voy y cambio mis fuentes, solo algunos' como, voy a usar comic sans, voy a ir a cambiar este porque es un aquí puede ser un poco un aquí puede ser un poco difícil de alinear porque está en un cuadro tipo grande porque no lo estoy usando como fuente, solo voy a darle click derecho y decir, crear trazo de contorno Ahora es más solo una forma. Yo puedo decidirme, voy a entrar en ello y decidir que no estoy seguro de por qué, sino ajustarlo, pero más que solo me gusta como forma. Porque entonces es fácil agarrar esto y esto y alinearlo en el centro en lugar de una fuente. Intentemos hacerlo con una fuente. ¿Funcionará? Mejor que no. Bien, agarro esto y esto y voy por ahí, y de esa manera, puedes ver que está un poco descentrado. Así que voy a volver a mi preciosa fuente. ¿Estaba descentrado, Dan? Vamos a fingir que lo fue. ¿Bien? Entonces a veces solo quieres que la fuente esté en forma. Y perfumado, centrado. Y vamos a agruparlo. Voy a enmarcarlo, ir dentro de un marco. Bien, lo usaremos más adelante también. Entonces, cuando la gente haga clic en esto, va a ir a, me gusta, la página siguiente. Bien, otras cosas interesantes sobre las fuentes, mientras escuchamos a nerd. Mira este cinco tengo este texto aquí, y necesito un enlace. Voy a poner en un enlace con los corchetes sin ninguna buena razón. Voy a seleccionar esto, y aquí hay una opción. ¿Ves al lado del texto hay una cosita especial que dice: Oye, quieres crear un enlace? ¿Bien? ¿A dónde va a ir? Vamos a ir a traer nuestro propio portátil, Head Enter. También voy a hacerlo azul solo porque creo que fuentes necesitan ser enlaces tienen que ser azules. Mi estuche tiene que ser un poco más brillante que el azul normal porque no estoy seguro de que lo vea contra el morado. En realidad, en realidad no está funcionando, pero también voy a seleccionarlo e irme. Oh, agregué un relleno. ¿Tenía un relleno? No, no lo hice yo seleccioné todo esto y también puedo ir en negrita, así que este es otro atajo. En lugar de ir y encontrar la versión audaz de la misma, eso está totalmente bien. Pero la mayoría de las fuentes, si tienen un negrita, puedes seleccionarlo y simplemente ir Comando o Control B. Lo mismo con cursiva. Si hay cursiva en la fuente, si no lo es, no será B, yo uso subrayado, y creo que vamos turno X. Eso es todo. Comando Shift X o controle turno seis en una PC, haremos el strike through. Esas son cosas nerd que funcionan en cualquier cosa de tu computadora Word, Google Docs, correos electrónicos, Comando B, I, UX. Los puedes encontrar aquí. Recuerda, recuerda que tienes atajos de teclado. Puedes ir al texto y encontrarás las cosas de donde sacamos Subrayado Ahí está el enlace de creación que acabamos de hacer. Ahí está el atajo para ello. Pero el subrayado en negrita y cursiva se abre paso. Lo genial de ellos, sin embargo, si los aprendes, son lo mismo en todas las autopublicaciones. Todo lo que voy a ir lejos de Subrayar lejos de cursiva Vamos a darle una vista previa en realidad solo para ver cómo funciona. Voy a ir, Oh, sí, porque la gente no sabrá cómo funciona Link, Dan. Se está volviendo loco un poco, como, Oye, te vas de Figma. Eso está bien. Ahí vas. Trabajo de enlaces. No estoy seguro de dónde tenía que demostrarlo. Una última que creo que es realmente útil como atajo, especialmente cuando no estás seguro de las fuentes. Te he dado algún tipo de límites para las fuentes, ¿qué debería ser? Hay muchas veces en las que simplemente no estás seguro. Puedes tener el texto seleccionado y puedes usar comando shift en una Mac, control shift en una PC. Y puedes ver abajo de tu teclado, tienes un mayor que y menor que. En mi teclado, se mezclan con el punto y la coma Mantienes pulsadas esas dos teclas , mandas el turno o el turno de control en una PC. Simplemente hace el tamaño de la fuente. Eso me encanta. Porque estoy al 100%. Yo soy como, necesita ser más grande. ¿Cuánto más grande? Solo propina, propina, propina, propina, haz. Y esa de nuevo es una de esas herramientas que funciona en prácticamente todo el software de autoedición. Simplemente puedes agarrar eso y hacerlo más grande. Ese tipo necesita ser más grande. Ahora bien, este tipo, estoy tratando de usar más grande, eso solo funciona con fuentes, ¿verdad? Esto ya no es una fuente, así que tengo que usar mi ketol y escalarlo. Usted Buen Chef haga clic. ¿Eso debería ser perfumado? No estoy segura. Voy a usar algunos rastrillos para darle un codazo. Eso me gusta ahí. Guau. Fresco. Bien, amigos míos. Eso es. Eso son fuentes avanzadas y trucos y consejos. Cosas que vamos a necesitar para el curso. Pasemos al siguiente video. Antes nos muestra de nuevo cómo usar Links. Mira, hace clic. Voy a nuestra página web. Uh. Bien siguiente video 47. Proyecto de clase 08: Texto: Bien, es hora de poner en acción algo de lo que hemos aprendido en los últimos videos Clase Proyecto Número ocho, el texto. Bien, entonces quiero que crees un pequeño logo. No tiene que ser elegante a menos que quieras que sea. No tienes que diseñarlo en Figma. En realidad diseñar Figma. Quiero que practiques con todos los diferentes tipos de herramientas que hemos aprendido. A lo mejor esbozarlo, no tienes que hacerlo. Y queremos algo arriba en la esquina superior izquierda. No tiene que ser elegante. He hecho otro par de lockups fáciles donde solo puedes hacer con fuentes solo como ejemplos Podrías ser un gran diseñador y puedes diseñar algo bonito. Si solo buscas algo sencillo, solo el texto con una diferencia de peso y una diferencia de color, algo sencillo. Depende de ti, pero lo quiero en tu página de inicio. En tu página de inicio de tu alta fidelidad, quiero que hagas esto básico. Necesitas tu mensaje de marketing y algún texto de marcador de posición, y algunas tarjetas que haremos en un sexo. Básicamente, algo como esto. Navong la parte superior de tu caja de héroe, tu mensaje principal de marketing Que se te ocurran algo. Puede ser cojo, puede ser muy reflexivo Se puede utilizar la IA. No me importa. Bien, y luego algo de texto de marcador de posición. Puede ser UrinopSumo otra vez, puedes escribir algo, pensar en algo, usar IA No me importa, pero quiero que uses tus estilos. Y lo que quiero que hagas con tus estilos y tus estilos de color es que quiero que hagas una página de guía de estilo. Figmaples puede ponerse súper desordenado, vamos a crear una página llamada Sólo voy a copiar una paleta de colores sobre ella y nuestras fuentes. Quiero que los maquilles, y quiero que se aseguren de que son estilos. No hace falta que tengas dos de ellos. Tal vez solo tengas uno. Eso está totalmente bien. Quiero que tomes una captura de pantalla de todo esto y de tu página de inicio. En tu página de inicio, quiero que también hagas una tarjeta. Voy a regresar Ah, Do, Hi Fi. Esta tarjeta aquí. He hecho esta bastante genérica. Quiero que investigues un poco sobre lo que podrías hacer. En realidad, te quiero ahí arriba. Cópielo, entra en este, pegarlo debería volver en el lugar correcto. ¿Bien? Entonces, tarjetas de interfaz de usuario es un término si eres nuevo diseño de interfaz de usuario, tengo algunos ejemplos en tus archivos de ejercicio llamados ejemplos de tarjetas de interfaz de usuario. Sólo algunos ejemplos que pensé que eran algo geniales. Quiero que te vayas a echar un vistazo tú mismo. ¿Bien? Entonces ahí está ese sitio web mob y que te mostré en el último. Es bastante bueno para buscar tarjetas de interfaz de usuario. Ve a regatear, ve a Pentrs, ve a Instagram, ve a donde vayas normalmente para tu búsqueda cosas y escribe ejemplos de UICard o simplemente UICard Basta con ver lo que han hecho otras personas. Parte muy común del diseño web y el diseño de aplicaciones y averiguar algo. Puedes copiar lo que he hecho. Eso está bien. O algo que esté en los ejemplos aquí, pero sólo algo básico. Todavía no necesita imágenes, y quiero que las coloques y quiero tres de ellas. No estoy seguro de que me gusten. Eso no se ve bien ahí, ¿verdad? De vuelta a donde estabas. Ahí vas. Y tener tres de ellos. Tal vez tengas que encender tus guías. No maten a H en una Mac. Se ha ido. Ahí vas, vuelves, y entonces es el Comando G. No Shift G. Quiero tres cartas en la parte inferior aquí. Podrías jugar con el espaciado para que todo se vea bien. Necesito el mismo en la parte superior. En la parte inferior aquí también, vamos a llegar a tres características que su producto podría tener. Nuevamente, no pases demasiado tiempo pensando en las características perfectas. He usado Lauren Ipsum abajo, y aquí solo tenemos una imagen Mordaza el ícono de la imagen antes hacer imágenes en un poco. A ¿es eso? Vamos a comprobarlo. Mueve tus estilos a un estilo GoodePagerSearch, tarjetas de interfaz de usuario, mira un poco Puedes decidir si quieres tres o cuatro tarjetas de características a tu altura. Ejemplos en los archivos de ejercicio, entregables. Toma una captura de pantalla tanto de tu página de inicio tu página de guía de estilo o al menos del fragmento que hay en ella Entonces quiero que compartas en las asignaciones, normales, proyectos y asignaciones, pero también quiero que compartas ahora en redes sociales. Estamos en un punto ahora en el que estás como, no son solo todas las mismas cosas. Esto son proyectos aburridos, aburridos. No son exclusivos para usted y su producto. Ahora estamos en ese punto. Quiero que compartas también en redes sociales. Me encanta ver lo que has hecho, y es un buen público como, Oye, esto es lo que estoy haciendo. Estoy haciendo este curso de Figma Essentials por este tipo kiwi realmente guapo de Nueva Zelanda Y esto es en lo que estamos trabajando. Además, pide comentarios y da retroalimentación. Es el intercambio. Tengo gente que me ayuda, trae a nuestros expertos en portátiles para que hagan respuestas, pero es difícil llegar a ello. Tenemos hemos cruzado a más de 1 millón de estudiantes, así que te imaginas que hay bastantes de nosotros. Entonces lo que hacemos ahora es que te lo preguntamos. Nos aseguramos de que si pides una opinión, tengas que dar dos, te sea más útil. Ser capaz de articularte con otros diseñadores, comenzar es una habilidad súper importante, especialmente cuando tienes que empezar a defender o explicar tus elecciones de diseño cuando estás del otro lado Pon el tuyo, pide consejo y asegúrate de encontrar uno de otro par de personas y darles consejos. Podría ser muy malo al principio. Te pondrás mejor. Los colores son buenos. Pero échale un vistazo a lo que otras personas están haciendo. Como, me gusta el contraste. No me gusta el contraste. La legibilidad de eso no es grande. Solo asegúrate de hacerlo con un poco de humildad. Todo el mundo acaba de empezar. Lo que me gusta hacer es, se llama el sándwich de ****. No estoy seguro de que podamos usar eso. Empiezas con un positivo. Me gusta lo que has hecho por este pedacito en particular. Entonces en el medio, la parte S del sándwich es, qué haría yo a continuación, qué podrías hacer más, o creo que va a haber un tema de legibilidad, pero creo que es un gran primer paso ¿Ves el bocadillo? Positivo por fuera y crítica en el medio Ya sabes lo que estás haciendo. En fin, ese es el proyecto. Vamos a construir nuestra página de inicio, poner nuestra página de Star go. Incluso si estás odiando tus fuentes y odiando tus colores, no te preocupes. Podemos cambiarlos más adelante. Realmente estamos aprendiendo las herramientas aquí, así que salta, prueba, y te veré en el siguiente video. 48. Texto sobre trazado curvo en Figma: Hola a todos. En este video, te voy a mostrar cómo hacer tipo en un camino. Mira, estamos escribiendo en un camino en Figma. Déjame mostrarte cómo hacerlo. para empezar, dibujémoslo en el borde aquí en lugar de dentro de los marcos. Simplemente lo hace un poco más fácil mientras estamos trabajando. Y es una especie de video de transición donde pasamos del tipo a un poco del dibujo, que es la siguiente sección. Necesitamos un poco de ambos porque necesitamos una curva. La mejor manera de hacer una curva. Bueno, la forma más fácil es que vamos a cambiar a este modo de dibujo abajo aquí abajo. Hemos estado en el diseño. ¿Bien? Aún no hemos estado en Dev. Oh, ¿qué hay ahí? No hagas clic en eso. Ir al modo dibujar, que es este de aquí. ¿Podemos conseguir algunas cosas de aspecto seco? Ahora vamos a empezar con el lápiz. Agarra el lápiz, elige un color. Tengo que escoger un color blanco porque ahí no lo veo en el fondo. Hasta tu talla sabia. Este es el ancho. Woo haga clic en él de nuevo. Así de gruesa es la línea. Realmente no importa por lo que estamos haciendo. Lo que vamos a hacer es hacer clic en mantener y arrastrar una línea ondulada. Figma no es bueno para dibujar líneas suaves todavía. Quiero que haya una opción suave. Oh. Simplemente dibuja algo. Dibuja rápido. ¿Listos? Dibuja rápido. No. Dibuja rápido. Yo tenía uno que era bueno. Eso va a hacer. Bien, ahora vamos a agarrar la herramienta tipo, todo lo que tenemos que hacer es pasar el cursor por encima de ella Bien, ¿puedes ver el pequeño icono cambia a la cosa de la pequeña curva?, haz clic una vez. Y ahora podemos escribir en una curva. Debería terminar en el lugar correcto. Si no es así, aquí hay una opción para voltear la orientación para que quede del otro lado. No es lo que quiero. Otras cosas útiles es, si vuelvo a mi herramienta de mudanza, ya ves ahí puntito. Este pequeño punto blanco de aquí es como donde empieza. Puedes jugar con si está centrado, ¿de acuerdo? Entonces los puntitos en el medio. ¿Bien? Entonces cuando empieces a escribir, más texto, irá desde el centro. Lo que voy a hacer ahora es que puedes hacer cualquier curva, así podríamos usar una línea. En realidad, una línea no es muy útil. Nos vendría bien la estrella. Haga clic y dibuje una estrella, tome la herramienta de tipo. No necesitas la herramienta lápiz, no necesitas estar realmente en modo de dibujo. Vamos a agarrar de nuevo al diseño y vamos a agarrar la herramienta tipo. Siempre y cuando solo pases el cursor sobre él, lo haré yo lo convertiré en un camino Golpea escapar para salir de ella. Notarás que la estrella desapareció. Podrías antes de hacerlo es copiarlo para que cuando lo conviertas en un camino, escapa para salir, pueda pegarlo de nuevo. Error al pegar desde el portapapeles. Deshacer, deshacer, deshacer, copiar. Yo lo iba a pegar primero. Oh, falló. Bien no le gusta copiar estrellas hoy. Esto, copiar y pegar. Sí, tengo dos de estos. Rara. No le gusta la estrella. Eso es un bicho para mí, probablemente solo hoy. Lo dejaré ahí porque pasan cosas así. Pero normalmente solo cópielo y pegarlo, así que tienes dos versiones de la misma. Hagamos algo un poco más agradable. Entonces voy a hacerlo, voy a hacer con este texto aquí. Yo hago este segundo, lo copio, y voy a hacer doble clic en esto y pegarlo en. Se puede ver que ya tiene dos bits de texto ahí dentro. En realidad, solo lo copié y pegué así que tuve dos líneas distintas Realmente no reemplacé a uno de ellos. Eran solo dos apilados uno encima del otro. Lo que voy a hacer es que voy a hacer esto y voy a hacer el máximo propósito donde quiera que esté. Algo así. Bien, no es lo que quiero. Pero eso es tipo en un camino. Voy a hacer pasar años dibujando esto. Oh, esa fue una buena. Copia esto, agarra mi herramienta de tipo y verás que tiene un trazo blanco, ese trazo blanco desaparecerá cuando se convierta en tipo en un trazado. Voy a seleccionarlo en línea, hacerlo un poco más grande. El atajo para eso es desplazamiento de comando y corchete cuadrado. Nosotros hicimos eso, ¿no? Sí, hicimos turno de Control, no corchete, el mayor que y menor que los pecados. Voy a hacer eso y había escapado salir de ella, y me voy a deshacer de ti. Y voy a mover esto de nuevo. Estaba mejor en mi cabeza. Voy a rotarlo alrededor. Girando cualquier cosa con ella seleccionada. Puedes flotar no en los bordes aquí, solo en el exterior. ¿Puedes ver estas pequeñas flechas dobles? ¿Bien? A nos gusta esto? Oh, voy a hacer. Oh, es terrible. Bien, vamos a escribir en un camino. Podremos hacer una línea más suave, una vez que entremos en la siguiente sección de dibujo cuando comencemos a usar la herramienta pin. Pero por el momento, se ve lo suficientemente suave. Y eso es todo. Te veré en el siguiente video. 49. Texto alrededor de una insignia de círculo en Figma: Hola a todos. Vamos a hacer esta placa con texto va por la parte superior y la inferior. El truco furtivo es que en realidad son solo dos círculos. Tienes dos bits de texto en el mismo camino. Entonces solo haces dos de ellos, los volteas y los alineas para que se vean como lo hacen. Son algunas otras cosas que quiero compartir aquí, como el modo esquema y algunas otras cosas. Así que vamos a saltar. Bien, para este, es la misma técnica que escribir en un camino del último video, pero vamos a hacer algunos pequeños extras para lograrlo. Vamos a empezar con no tenemos que estar en modo empate. Solo necesitamos una elipse, que es la Oki, que parece una elipse Ahí vas. Oh, Oki y yo vamos a mantener turno para que mi círculo sea una redondez perfecta y no oval, y voy a agarrar la herramienta Tipo y voy a dar click en algún lugar alrededor de la parte superior y se convierta en un camino No es de sorprender, Dan. Voy a hacer 30 día 30 día. Es más fácil cuando estás haciendo insignias hacer todas las gorras. Si empiezas a hacer superior e inferior, simplemente se ven raras. Y hasta usted. ¿La devolución del dinero es una palabra? Es hoy. Voy a seleccionar un tamaño de fuente más apropiado. Voy a desconectarlo de mi rumbo y voy a usar mi otro, que es sourcens Puedes ver que puedo jugar con cosas como el espaciado entre letras, lo cual es importante cuando estás trabajando en esto. También voy a usar un tamaño de fuente más apropiado, algo así a mi espaciado entre letras. Si quieres deshacerte de lo que hayas escrito, simplemente elimínalo y presiona Enter, Oh, No, solo escribe y cero Un par de cosas que quiero hacer es que voy a golpear o escapar o volver a la herramienta de movimiento. Te dan el punto. Lo que quiero hacer es que esté centrado y quiero que sea por ahí. Otra vez, tamaño de fuente, voy a ir un poco más pequeño. Ahora, ¿cómo lo consigo en el fondo, bien? Lo que hay que saber es que no se puede tener más de un poco de tipo en un círculo. Entonces necesito dos círculos. Entonces voy a copiar esto y pegarlo, así que tengo dos de ellos. Voy a separarlos, y voy a darle la vuelta a esto y luego voy a girarlo alrededor. Entonces tengo la pieza de fondo. ¿Bien? Puedes mantener la tecla Shift mientras estás rotando. ¿Bien? Puedes rotarlo por aquí. Se puede ver aquí dice rotación 180, y voy a decir, necesito garantía ger y mi bloqueo de mayúsculas dejó de funcionar, así que conseguí un turno entero todo el tiempo. El único problema con esto es que no se puede en este momento con figma, jugar con donde se sienta en la línea Al menos no he averiguado cómo hacerlo. Es una nueva característica para esto. Se ve raro, así que voy a tener que aumentar la elipse un poco más grande y tú solo las superpones. Me chasquea. Es un poco difícil ver dónde están ahora porque están completamente transparentes. Hay un atajo, ¿de acuerdo? O Comando Y o Control Y en una PC. Guau. ¿Qué pasó? Se llama modo esquema, y es como una invisibilidad. No, rayos X que quiero. Puedes empezar a ver las cosas y son contornos fundamentales. No se puede ver el texto, desafortunadamente, se puede para algunos de ellos, pero no para estos círculos de aquí. Lo que voy a hacer ahora es, si quisiera estar perfectamente por encima, puedes ver aquí que es un poco más fácil en este modo, y solo tienes que alternar Comando o Control Y para alinear las cosas. Entonces voy a jugar con él. Eso es todo por tipo en un camino. Voy a ir a hacer mi lindo. Puedes seguirlo si quieres, hasta ti. Voy a ir por negrita el espaciado entre letras aquí necesita ser aumentado. Sólo para encajar un poco mejor por aquí. Ese de ahí se ve bien. Voy a agarrar algunos círculos más, llegó el Oki. Puedo hacer una de dos cosas. Voy a mantener turno. O puedo hacer algo central aquí, manteniendo turno otra vez, pegarlo en el medio. Debería chasquear. Es bastante bueno para chasquear Entonces puedo agregar un trazo al exterior. Estoy recogiendo cualquier cosa en este momento y luego solo aumentar el peso para tener esa línea por ahí. Va a la posición interior fuera del trazo, y voy a seguir yendo cada vez más grande y más grande y más grande. Hasta que llegue ahí, y luego voy a usar mi atajo, que es el enviarlo de vuelta, puedes hacer clic derecho, recordar, remitente de vuelta o los corchetes aquí. Podrías hacer esto para ponerte marcha tu cosita o solo dos círculos hasta ti. Bajemos por el fondo aquí. Es sólo un poco raro. Otro pequeño bonus si te has quedado es cuando estoy arrastrando esto más grande, sostengo turno para que quede círculo, de lo contrario, se vuelve torpe. Pero si mantengo pulsado mi turno más la opción contador mac en una PC, se arrastrará desde el centro, lo cual puede ser útil, sobre todo alineando esto . Ahí vas. Voy a escoger algunos colores de mi estilo. En lugar de simplemente escoger el color de trazo aleatorio, voy a ir a mis estilos. Voy a decir que el centro va a ser un gradiente. Oh. Eso lo agregué al trazo. No es lo que quería. Da click ahí. Quiero que sea ¿cuál quiero de afuera? Espera ahí pensando en el color oscuro. En el centro de esto, el relleno, voy a ir y voy a escoger el gradiente. Fancy. Todo bien. Así es como hacer que sea una insignia donde estén los textos en la parte superior e inferior. Es sólo un truco. Simplemente se superponen. Parece que están en el mismo camino, pero no son solo dos círculos superpuestos Ahora tenemos una placa. Las insignias son increíbles. Todo bien. Eso es. Veré en el siguiente video. 50. Cómo usar las herramientas Lápiz y Pincel en Figma: Hola a todos. Vamos a dibujar muchas líneas, y vamos a hacerlas todas cepilladas y ruedantes. Aquí está mi línea de meneo Es la herramienta lápiz y la herramienta de pincel y algunos de sus ajustes dentro de una figma. Vamos a saltar. La herramienta de lápiz y pincel. Cubrimos un poco la herramienta lápiz. Vamos a cambiar a nuestras herramientas de dibujo, y aquí la cambia abajo. La herramienta lápiz dibuja con el trazo. Voy a elegir un mejor color. Vamos por el blanco. Bien, y haciendo clic y arrastrando, obtenemos una herramienta de lápiz. La herramienta pincel por contraste, dibuja con estos trazos de tipo más estilísticos Voy a dejarlo en el atraco y hacer clic y arrastrar. Oh, tengo que elegir un color. Hagamos eso. Puedes cambiarlos después. Pero haciendo clic y arrastrando, de nuevo, estoy esperando la parte de suavizado que podría estar aquí Ojalá, haya una actualización que vaya, bien, podemos dibujar más suave, o tal vez el defold es simplemente más suave. Pero es genial, ¿eh? Me gustan los pinceles. Los pinceles ocultan algunos de los problemas con la suavidad. Pero como este efecto realmente genial, y puedes cruzarlos. Mira esto. Tenemos este dibujo que hicimos con la herramienta lápiz. Estarás mejor si tienes una Wacom o alguna otra tableta de dibujo Estos serán más suaves. Pero lo que puedes hacer es con ellos seleccionados. Puedes ir aquí al trazo, y aquí hay una opción. Mira esta pequeña opción de configuración y puedes decir, en realidad, quiero que sea dinámica. No, quiero que sea pincel. Cambia éste a cepillar. Puedes pasar y elegir los de la herramienta de pincel. Ese de ahí. Realmente no se puede ver . ¿Ves? Necesito subir el grosor. También puedes jugar con una dirección. La otra cosa que puedes hacer con la herramienta lápiz, lo siento, es que puedes dibujar algo. Voy a hacerlo un poco más grande. En realidad, voy a tener que ir a mi herramienta de selección, agarrarla y hacerla un poco más grande porque quiero mostrarte algunas de las otras características aquí. Está bajo dinámica. Se puede hacer que sea agitado. Puedes bajar la frecuencia y hacerla realmente ondulada Un poco agitado. También hay que jugar con el trazo. Entonces la Sra. tal vez un poco gruesa. La frecuencia es lo apretados que son los meneo es la medida de lo altos que son. Entonces, qué tan lejos están, qué tan altos son. Si acercamos un poco, deberías ver donde dice suave, o suave adentro, puedes hacerlos nítidos o súper suaves. Puedes agregar puntos finales como nuestras flechas, y no estoy seguro de por qué los necesitamos aquí, pero está ahí Bien. Lo que voy a hacer es que voy a hacerlo realmente odio esto. Voy a agarrar esto y ahora solo estamos haciendo cosas de producción. Eso es todo para el pincel y la herramienta de lápiz. Sigue a lo largo si quieres comprobar esto. Voy a deshacerme de eso poner eso de nuevo. Sólo lo estoy copiando y pegando. Lo que quiero hacer es poner un espacio entre estos y no estoy seguro de lo que quiero, si es el pincel, así que voy a agarrar la herramienta de pincel. Haz algo como esto, como una pequeña línea divisoria. Eso es bastante bueno. Eso me gusta. O podría tener una opción donde te voy a trasladar allá. Podría hacer una línea recta. En vez de usar la herramienta lápiz o la herramienta pluma o cualquier otra cosa, voy a ir a las ovejas, voy a agarrar una línea, y voy a ir, mantener turno. Es blanco. Voy a hacer un poco más grueso y voy a hacer esa configuración completa va a hacer una dinámica ondulada. No puedo ver el mío aquí abajo. Puedes agarrarlo si termina saliendo de la pantalla. Creo que el mío está haciendo eso porque tengo un segundo monitor aquí abajo que no puedes ver. Eso se ve genial, agitado. Oh, me está gustando. Como que coincide con la fuente dibujada a mano, ¿de acuerdo? Creo que sí, de todos modos. Bien, voy a volver a mi herramienta de movimiento y voy a usar esto como divisor. ¿Cuál nos gusta? El acariciado, el rojizo o el ondulante Oh, creo que me gusta la ondulada, pero por alguna razón, siento que necesita un punto al final Bueno, una cosa que tiene es que tiene un extremo muy afilado. ¿Podemos cambiar eso? Oh. Echemos un vistazo. Tapa de extremo redondeada. Carrito para estos. Estas opciones no funcionan, ¿verdad? ¿Básico? No. Bien, entonces ¿ puedes hacer un final aquí? ¿Extremo redondeado? Oh, puedes. Bien, corcck el código. Lo que también quería era el Oki y quería dibujar un pequeño círculo al final aquí que es el color blanco. ¿Por qué? No lo sé. ¿Está bien con el punto? Creo que sí. Bien. Herramienta de pincel, herramienta de lápiz dentro de Figma. 51. Cómo usar la herramienta Pluma en Figma: Uno, en este video, vamos a aprender a usar el Pentl. Es complicado. Realmente está fuera del alcance de este curso, pero quiero darle una vez más para que pueda comenzar. Si llegas al final, estás frustrado y estás como, odio el pentil Bien, mucha gente odia la herramienta de bolígrafo. Lo siento, herramienta para bolígrafo. Pero te voy a dar las formas en que funciona en la producción, algunos consejos y trucos, y vamos a dibujar una montaña Es una montaña. Esas están destinadas a ser nubes. Y que no estoy segura. Está destinado a ser una llama, pero ahora parece una hoja. De todos modos, vamos a saltar y aprender la herramienta pin en figma. Bien, para la herramienta pluma, dibujemos algo. Vamos a dibujar en la parte superior de una imagen que tengo. Entonces cuando ejercitas archivos, hay un Pentool 01 Simplemente puedes arrastrarlo o recordarlo, tú también puedes ir. ¿Puedes estar en modo sorteo? Probablemente. Sí, puedes. Trae una imagen y ve a buscarla. Está en tus archivos de Ejercicio se llama Pentool 01. Tráelo. Voy a hacer click una vez, y voy a hacer zoom en él. También vamos a hacer es que vamos a cerrarlo. Puedes hacer clic derecho sobre cosas y puedes decir bloqueo. Simplemente significa que no puedo moverlo. Para desbloquearlo, puedes hacer clic derecho en él y decir desbloquear o en tu panel Capas. ¿Ves que aquí hay un pequeño icono de bloqueo? Puedo desbloquearlo, bloquearlo. De cualquier manera, lo necesito bloqueado porque vamos a dibujar por encima. Vayamos a nuestras herramientas de dibujo. Vamos a agarrar a este tipo de aquí, la herramienta de la pluma. ¿Qué color voy a usar? Voy a usar algo muy brillante para que lo veas deshacer muy brillante, para que lo veas venir, Dan. Tuvo fuga para cerrar eso. Pentil. Asegúrate de estar en pentil Es el piki y empezaremos por los fáciles. Empezaremos con cuadrado. Pentol es clic una vez, haz clic de nuevo y puedes hacer formas personalizadas Voy a aumentar mi peso de línea para que lo veas. Sólo estoy haciendo clic una vez, haciendo clic una vez, dando clic una vez. Lo que estás buscando es cuando vuelves, se está rompiendo o no está chasqueando a mi dibujo, es chasquear a ¿Puedes ver ahí? Se va, oye, mira, estamos alineados. Eso es genial para mí. Entonces tenemos que volver al principio. Uno que estás buscando, mira el pentil, tiene ese pequeño círculo que aparece Eso significa que soy una forma completa. Lo bueno de eso es que entonces puedo ir por aquí y decir, puedes tener un relleno. De hecho voy a usar uno de mis que voy a usar. Uno de mis ¿cómo se llaman? Se les llama estilos. Eso es. W brrain. Voy a usar eso. Las líneas son fáciles. Para ajustarlos después. Digamos que has hecho clic fuera, vas a Doble clic para entrar, debería estar por defecto a esta herramienta Si no lo es, vaya a la herramienta de movimiento. Es como una herramienta de segundo movimiento. Es como la herramienta de movimiento, pero para estos vectores, estas líneas de herramienta de pluma, lo que puedes hacer es hacer clic en ellos y puedes moverlos, y alinearlos si los tienes mal Eso es bueno. Veamos cómo hacer curvas. Vamos a ellos. Vamos a hacer una nube. Es una nube, por cierto. en mi pentil estamos en empate Pentl trazo sabio, va a ser bueno Entonces vamos a hacer curvas y algunas esquinas. Así que vamos a hacer es hacer clic una vez para una esquina. Si quieres curvar, busca el vértice de la curva y haz clic en mantener y arrastrar. Déjalo ir. Y si quieres volver a hacer esquina, haz clic una vez. Haga clic en Retener y arrastre. Estás buscando el ápice de cualquier curva que estés haciendo. Por ahí, haga clic en mantener y lo arrastró hacia afuera. Debajo de eso, haga clic en mantener y arrastre. Si lo pierdes, estás como, ¿cómo vuelvo a la nariz, tú eres como, cómo vuelvo a ello? Haz doble clic en él para entrar. Puedes volver a tu pentil y puedes hacer click sobre esto y lo reiniciará. En este caso, lo ha convertido en una esquina. Voy a hacer clic en mantener y arrastrar eso. Está roto, eso es todo. Te voy a mostrar como arreglar en un segundo. Si lo pierdes, solo tienes que hacer clic para saber dónde está el final de la línea y lo que vamos a hacer es continuar. Te voy a mostrar como arreglar eso en un segundo. Haga clic una vez para una esquina, haga clic y mantenga presionado y arrastre para una curva. Haga clic una vez para una esquina, y luego vuelva a bajar aquí, es otro clic una vez. Es una bonita esquina afilada. Busco ese circulo y tenemos toda una forma. Míranos. H. Si tienes cosas que están un poco rotas pero quieres que sea una curva, puedes volver a esta herramienta aquí, o ir a esta herramienta de aquí, doblar. Haga clic en esto y luego haga clic y arrastre sobre esto. Estoy pinchando, sosteniendo y arrastrando sobre eso. Se llama punto de anclaje, y puedo arrastrarlo. Así es como convertir esquinas en curvas. Si quieres que vaya por el otro lado, quieres que esta curva no sea porque de momento es un balancín He vuelto a mi herramienta de movimiento y puedo ajustar se llaman mangos. Eso se llama punto de anclaje. Este mango lo puedo arrastrar. Pero digamos que quiero que sea puntiagudo. ¿Cómo rompo eso? Estoy en esta herramienta aquí. Sostengo mi opción dosel contra mac, C, y tire de uno de los balancines, y lo rompe Ahí vas. Ahora tengo una extraña y llameante mushmallow Voy a regresar, convertirlo en una curva y me voy, tú Impresionante. Una de las otras cosas que notarás aquí es que tengo un trazo bastante grueso y es muy pronunciado. ¿Ves que éste tiene un punto? ¿Por qué eso tiene un punto? Es porque hay algo que se llama el mitring. ¿Está mitring? Yo creo que sí. Lo que sucede es que este es un punto más sutil que éste, le permite hacer esto. Cuando están muy agudos, como éste, puedes ver que está metido ahí dentro No sabe qué hacer, así que simplemente lo corta. Lo que podemos hacer es ver esto y volver a mi herramienta de movimiento, dar click en esta. Verás que las pequeñas asas aparecen aquí. Mira esto. Si lo abro, ya ves, a veces están ahí, a veces no lo están. Porque de lo contrario, ¿puedes ver qué tan grande se pondría? Terminé corriendo fuera de la página, simplemente lo matan. Lo que podrías hacer, sin embargo, es que estás como, no me gusta esta inconsistencia Lo que voy a hacer es que voy a ir a mi apoplejía donde esta mi ictus. Aquí está aquí, voy a ir a la configuración aquí, y ¿qué tipo de combinaciones quiero? Mited es lo que está en este momento. Puedes jugar con el ángulo miteado como en vamos a jugar Bueno, subirlo 290. Va a ingletlar los bordes. ¿Ves que corta los bordes ahí? Podría ir a este de aquí y simplemente decir biselarlos. Se puede ver biselar los bordes o podría decir alrededor de ellos. Probablemente más acertado para este dibujo en particular, lo está haciendo por estos. Lo único que hay que notar es que también lo ha hecho para éste, porque lo está haciendo a todo el vector que he dibujado. Si quiero que esto esté separado, lo que puedo hacer es hacer doble clic en él para entrar, arrastrar una caja alrededor de todo esto, ir a cortar, me deshice de ella. Voy a salir de este vector como en doble clic en el fondo. Ahora está solo, y puedo pegar éste, y hay dos vectores separados. Ahora te puedo decir, mi amigo ya no es redondeado, estás mitado, así que tienes bordes puntiagudos. Sé que esto es un poco complicado para no lo sé. Esto es Figma. Estamos haciendo diseño de interfaz de usuario, pero los pentils son muy prácticos Es un curso por sí solo, pero quiero darte una buena visión general del mismo. Hagamos una más. Vamos a probar, PentilPiki haga clic una vez para una esquina, haga clic y arrastre para Haga clic una vez para una esquina, haga clic y arrastre para una curva, haga clic una vez para una esquina, haga clic y arrastre para una curva, una vez para una esquina y luego vuelva al principio nuevamente. Si te lo pierdes, puedes simplemente seguir pinchando ahí hasta que lo encuentres, o yo lo desharía y lo volvería a hacer. Aquí hay una opción si te acercas. Se puede ir Comando J, creo. No se puede. Se puede. Puedes usar la herramienta de selección, seleccionar a todos estos tipos y presionar Comando J o Control J en una PC. Aunque eso es feo. Lo que quiero hacer probablemente es simplemente eliminar ese punto para eliminar un punto. Ese es un buen punto. Yo hago clic en él, así se pone azul, pulsa Eliminar, agarra mi herramienta pluma. Mm, solo puedo pasar el mouse por aquí para comenzar de nuevo, haga clic una vez Otra vez, y estamos de vuelta haciéndolo. Voy a robar los colores de esto. Lo que quiero hacer es hacer doble clic en él para salir del modo de dibujo. Quiero seleccionar esto. Voy a ir a. No puedo recordar dónde está. Se encuentra bajo Edit Copy properties. Voy a hacer clic en esto y voy a editar propiedades de Pace. Hay un atajo. No puedo recordar lo que era. Qué era allí las propiedades de Pace. Opción de Comando V en un Mac Control O viejo V en una PC. Fresco. Pero vamos a hacer caso omiso de eso. Bien, hagamos algo más complicado por aquí. ¿Es más complicado? Amable. mostrarles un ejemplo más antes de seguir adelante. Voy a agarrar el pentil. En realidad me voy a asegurar de que me hagan clic en el fondo así que no voy a agregar a estos Estoy haciendo mi propio nuevo. ¿Pentil? ¿Eso es una curva o una esquina? Eso es un rincón. Agudo uno, así que voy a dar click en. Por aquí, ¿a dónde va la curva? Porque era más fácil por aquí porque estaba justo en el medio. Lo que estamos buscando es lo más el ápice es donde más gira, que es más por aquí. No está en el medio. Verás, esa es la parte más flexionada. Así que voy a hacer click hold hold hold hold y drag out. Bien, voy hasta aquí y voy a ir, Oh, no es coincidente. Tienes la tendencia de hacer clic, sostener y arrastrar y hacer esto funciona El problema es que tenemos esto. Whoo. De cualquier manera, tenemos que arreglarlo. Lo molestamos y luego lo arreglamos después. Sigamos así, y te mostraré cómo arreglarlo, y luego lo redibujaremos y te mostraré una manera diferente Ahora tengo dos curvas por aquí. ¿Qué hago? En primer lugar, no puedo lidiar con esto. Lo miramos antes en mi pentel. Si mantienes pulsada la tecla de opción en una Mac, tecla vieja en una PC, cuando pasas el cursor por encima de este mango aquí, puedes ver que cambia de la herramienta pluma a esta pequeña flecha que dice, voy a agarrar a este tipo y porque estoy manteniendo pulsada la tecla lk en una tecla de opción de PC en una Mac, puedo romperla ¿A dónde va? Esta es la parte difícil cuando estás recibiendo nuevo para la herramienta pluma. Algunos de ustedes podrían ser buenos con eso. Algunas personas podrían tener miedo de ello. Es duro. Eso está fuera del alcance de este curso, pero quiero darles los que pasen. Voy a arrastrarlo por aquí sólo porque sé que cuando lo suelte, puedes ver que es es la gravedad lo tira de esa manera. Puedes agarrarlo de nuevo y decir realmente por aquí. Es solo para meterlo y luego arreglarlo después. ¿A dónde va mi siguiente curva? Quiero uno ahí y otro ahí. Esta curva va en dos sentidos. Entra y sale. Lo que voy a hacer es hacer clic en mantener y arrastrar ahí. Estás como, no está funcionando, Dan, voy a hacer clic en mantener y arrastrar ahí. Y luego aquí abajo, da clic una vez para una esquina. Este se menea en ambos sentidos. Ahí hay un ápice y un pequeño ápice ahí. Voy a exagerar el mío, haga clic en mantener y arrastrar, haga clic en mantener y arrastrar. Después haga clic una vez para una esquina. Este solo tiene una curva, haga clic en mantener y arrastre allí. De vuelta al principio, es una esquina. Voy a hacer click una vez. ¿Cómo arreglamos este desastre? Podría situarse por encima de algunos puntos existentes. Si mantienes pulsada la opción Kona MacKenna PC, puedes eliminarlos y ya no está. Si tienes demasiados de estos mangos, lo que quiero hacer es pasar a esta herramienta y voy a hacer algunas cosas. Voy a decir que tenías esta cosa arruinando mi pequeña línea aquí Voy a arrastrarlo de nuevo a su casa. Y puedes deshacerte de él arrastrando o completamente a su casa porque este tipo está haciendo todo el trabajo Había demasiadas manijas pequeñas tratando de deformar la línea En realidad, ahora se ve bien. Puedes mover los puntos de anclaje si están en el lugar equivocado. Si eres como, yo quiero estar ahí, arrastra esto. ¿Cómo soluciono esto? Es un poco de ambos. Ese tipo de ahí, a lo mejor este. Se nota que cuando se acerca, es más un giro agudo y cuanto más afuera está, más fluido es el giro. Entonces hay un poco como tú y vas de un lado a otro. Con este, ¿qué quiero hacer? Eso se ve bien. Este de aquí se ve raro. ¿Por qué se ve raro? No tengas miedo de acercar el zoom. Voy a decir que solo necesitas ser probablemente un poco más así. Más allá, recuerda, no tengas miedo de mover los puntos de anclaje. Estoy exagerando el mío porque me gusta más. Este de aquí necesita torcerse de esta manera. Te darás cuenta de estos tipos al final aquí. Si te son útiles , úsalos. Se agregan para ti automáticamente. Úsalos si no lo son y estás como, espera, hay demasiados. Sólo recuerda arrastrarlos de regreso a su casa. ¿Quiero éste? A mí me gusta esa. Yo no usé el de arriba, uso el de abajo, y ese es el mío que no es muy suave, ¿verdad? Si no es muy suave, necesitan ser más largos. ¿Cómo me gusta este? Todavía tengo mis propiedades de copiar y pegar, así que puedo usar mi atajo ahora puedo hacer clic en segundo plano para que no sea un modo de edición. Acabo de seleccionarlo y debería tener propiedades de pegado, que es Command Option V en un control de Mac Alt V en una PC. Simplemente puedes seguir copiándolos y pegándolos. ¿Eso me gusta? ¿Es una hoja? ¿Es una llama? Realmente quiero el punto ahí en la parte inferior, así que voy a entrar , hacer doble clic, agarrar que resolvimos antes que necesita ser un ángulo menos agudo para que funcione. Ahí está ahí. Agrega tus propios efectos de sonido. Todo bien. Se veía mejor en mi cabeza. Haga doble clic. Es esta cosa de aquí. Algo no está bien aquí. Oh, sí, eso es más fluido. Todo bien. Esa es la vez más para la herramienta pluma. Es complicado. Debería ser una sección completa en un curso, pero FIG es realmente más sobre la creación de aplicaciones. Pero quiero incluir el Pentl y la herramienta de lápiz porque Figma se está acostumbrando más como una herramienta de diseño general Y cuando necesitas hacer íconos, aunque estés haciendo diseño de logotipos, no hay problema en hacerlo aquí. Tiene algunas herramientas de dibujo realmente poderosas, pero los pentils una complicada Espero que haya sido de ayuda. Todo bien. Eso es. Te voy a ver en el siguiente video. Lo puedo sentir por la gente nueva en Pen hasta que digas, nunca volveré a este video nunca. Sólo voy a importar íconos, Dan. Sí, eso también está bien. Todo bien. Siguiente video. 52. Proyecto de clase 9: herramienta Pluma: No nos va a hacer un proyecto de clase usando el Pentl, ¿no? Él es. Aquí estoy. Quiero que practiques usando el ejercicio pentle que mostré en el último video Se llama pentlo uno. Está en tu expediente de ejercicios, dibuja esos como lo hicimos nosotros. Practica con esos. Entonces por tu cuenta, quiero que intentes dibujar esto un corazón no tiene por qué parecerse al mío. Usa tus propios colores. Lo que quiero que hagas es experimentar con las opciones de unión desde el trazo. A lo mejor eso es inglete biselado y redondo. Echemos un vistazo. Tener una jugada con estos aquí. Ya sea que tengas bordes redondeados o biselados, solo tienes que jugar Además, quiero que experimentes con lo que hicimos con la herramienta lápiz y la herramienta de pincel, donde entramos aquí en estos ajustes y en realidad podemos sin usar la herramienta lápiz, la herramienta de pincel, solo aplicar cosas como dinámico o pincel, tener un patio de juegos con esos como el que tenía. Ahí está ahí. Ahora esto va a ser duro. Hasta he escrito aquí. Esto es difícil, sobre todo si eres nuevo en la herramienta pluma, dale una oportunidad. Si es horrendo, está bien. Aún puedes ser diseñador de UX sin conocer la herramienta de lápiz. Es una herramienta difícil de aprender. Por qué está aquí como ejercicio. Vamos a jugar con él. Cuando termines, toma una captura de pantalla de todo junto y súbela a los proyectos y asignaciones. No hace falta que subas este a las redes sociales principalmente porque todos van a tener el mismo aspecto. Empezaremos a poner un poco más de las cosas únicas maquillamos en las redes sociales. Pero por ahora, solo en los proyectos de clase, o en la sección de tareas, buena suerte con la herramienta Pluma. Ahora, puedes hacer más de lo que yo he hecho aquí. Cuanto más emocionante sea la herramienta Pluma, veremos en los proyectos de clase, mejor. Si recién estás empezando, sólo algo sencillo. Muy bien, diviértete con la herramienta Pin. Te veré en el siguiente video. 53. Cómo usar el creador de formas en Figma: Hola a todos. Vamos a usar la herramienta Creador de formas. Dentro de Figma para hacer estos, comenzaremos con algo fácil de albergar Esto, no sé qué es esto, pero se ve genial, y este es un escudo con una garrapata dentro. Escudo de éxito, lo llamaremos. Vamos a aprender la herramienta Shape Builder. Además, vamos a combinar algunas de las otras técnicas que hemos aprendido anteriormente en el curso para que podamos hacer muchas cosas. Es un poco complicado, pero no quiero saltarme cosas como esta dentro de Figma porque Figma se está acostumbrando cada vez más como una herramienta de diseño gráfico de propósito general Aprendamos la herramienta Shape Builder, que es increíble. Bien, comencemos. Encontremos un poco limpio de nuestra mesa de trabajo. Dibujemos una casa. Voy a agarrar la herramienta rectángulo. Voy a dibujar rectángulo. Voy a agarrar la herramienta polígono. Voy a dibujar un polígono o un triángulo. No hemos cubierto esta herramienta. Puedes ver aquí, puedo cambiar esto para tener tantos tamaños como necesite. Yo sólo necesito tres, pero ahí tienes. Necesitas un Pentágono o un hexágono, voy a alinearlo. Es bastante bueno alineando las cosas. Ahí vas. Podrías seleccionar ambos y decir ustedes dos, perfectamente alineados. Bien, señora asomando un poco. Dibujemos la puerta, volvamos a la herramienta rectángulo y dibujemos ahí una puerta. Voy a arrastrarlo después sólo para conseguir que se alinee en el centro. ¿Eso parece una casa? Parece una casa suficiente. Lo que vamos a tener que hacer es el truco de magia aquí es asegurarnos de que todos estos estén suavizados Puedes ver, todas son capas separadas justo una encima de la otra. Lo que tenemos que hacer es decir, tú, mi amigo, estás todo aplastado. Significa que están todos aplastados en el mismo vector. Es como un grupo, pero no un grupo. Significa que están todos juntos como vector. Bajar. Acabo de seleccionarlo y quiero entrar en esta opción aquí después de que esté plano. Se llama Editar objeto. Ya lo hemos hecho antes o simplemente haces doble clic en él. Y obtienes todas las líneas rayadas. Ahora vamos a cambiar a la herramienta Shape Builder, que es la clave. Haz clic en eso y podrás unirte a las cosas. En este caso, queremos eliminar cosas. Mantenga presionado el contador de opciones Mac. Co PC, puedes ver, hay un poco menos al lado de mi cursor y las cosas están rojas. Lo que puedo hacer es hacer clic, mantener y arrastrar a través de estos dos para deshacerme de él. Ahora, podría dejarlos como un desastre. Todos estos son de color diferente, así que puedo hacer clic y arrastrar, sin mantener presionada nada, y los agregaremos juntos. Ahora tengo una casa. Nosotros lo hicimos. Haga doble clic en el fondo para salir y tenemos un icono encantador en lugar de vtorHuse Puedes ir y ajustarlo después. Si has dibujado el tuyo y es un poco demasiado puntiagudo o demasiado alto, puedes hacer doble clic para entrar Puedo seleccionar todos estos puntos de anclaje en la parte inferior, solo usando la herramienta predeterminada y voy a mantener la tecla Mayús y usar mi tecla de flecha para moverla hacia arriba para tratar de obtener algo que se sienta más proporcional podría ser solo este punto. El tuyo es demasiado alto o no lo suficientemente alto. Eso es lo básico del constructor de formas. Hagamos algo genial como viste al principio ahí, y vamos a agarrar la herramienta oh para el círculo y voy a sacar un turno de espera así que sea agradable y perfectamente redondo. Voy a cambiar el mío para que no tenga relleno y tenga un trazo de blanco para que podamos verlo. Y ese va a ser mi círculo exterior, copiar y pegar, tengo otro, y voy a encogerlo. Miembro, si copia y pega, terminan uno encima del otro. Haz un círculo que sea más pequeño, no demasiado pequeño, algo así. Entonces es cuestión de simplemente alinearlos, quiero que uno vaya ahí, copie y pegue, quiero que otro vaya por aquí, copie y pegue, quiero que otro vaya ahí y copie y pegue, otro que vaya al fondo. Bien, eso me va a dar ojalá mi pequeño Espirógrafo Alguien recuerda que las manos arriba. Al igual que la casa, los selecciono a todos. Tengo un montón de elipses que no están conectadas Necesito aplanarlos, para que estén todos juntos en el mismo vector, luego puedo hacer doble clic en ellos o hacer clic en el vector Editar Entonces podemos agarrar esta de aquí, M, la herramienta Shape Builder y decir, bueno, en realidad antes de eso, podrías entrar a usar la herramienta de relleno y entrar aquí y decir, ¿ verdad quiero que te llenen de qué color? Ir rojo. Bien, y solo trabaja tu camino y llena esto. No son conjuntos, pero son todos del mismo color, y tal vez eso es lo que hay que hacer. Esa es una buena manera de usar esto va a aplanar y luego editar objeto Voy a deshacer eso porque lo que quiero hacer es unirme a todos ellos arriba. Así que para el Constructor de Forma, y voy a darle color y tú vas a averiguar, tratar de averiguar cuáles sangrientos necesito cubrir. No estoy haciendo nada. Solo estoy arrastrando a través ellos usando la herramienta predeterminada. ¿O es éste? Creo que es ésta. Y entonces este de aquí es lo que estoy buscando. No puedo recordar. ¿ Eso es correcto? No, demasiadas. Deshacer deshacer. A lo mejor es éste de aquí. Tú, eso es todo. Entonces para deshacerme de ellos, ¿qué llave mantengo pulsado? Así es, la tecla de opción, y voy a arrastrar a través de todos estos o tecla Ok en una PC. Terminé con esa raya. Aquí vamos. Voy a volver a mi herramienta de cubo de pintura y voy a elegir un color de relleno. Voy a deshacerme de los trazos y agregar un relleno, y voy a escoger de creado en este archivo. Me va a dar mis colores por aquí. Esto funciona. El comportamiento de este cubo de llenado es un poco raro en estos momentos. Es una nueva característica para figma. Me imagino que va a ser más fácil en este momento, lo que estoy haciendo es que estoy haciendo clic en uno y luego cambiándolo. Está cambiando todo Bien, así que tipo de clic en él, haga clic de nuevo o simplemente haga clic en él dos veces. Entonces si voy y elijo un color de aquí abajo, aplica. Así que entra en Editar. No le hagas clic demasiado rápido. Bien, está un poco mojada. Y otra vez. Y ojalá, esté funcionando un poco más a la perfección para ti un poco peculiar. Pero ahí llegamos. Fresco. Y eso es. Quiero agregar gradientes, en realidad ¿Lo hacemos? O bien, lo haremos muy rápido. Después pasamos a la siguiente. Aquí, quiero agregar un degradado. Es una segunda en o cuando ya me gusta. Mira eso. Muy bien voy a hacer las cuatro. Tú esperas ahí. Voy a ir al modo súper rápido. Todo bien. ¿A mí me gusta más? Creo que sí. Es algo genial. Bien, hagamos el escudo. ¿Bien? Entonces el escudo va a traer. vamos a llegar ultra avanzados Aquí vamos a llegar ultra avanzados. Estamos ultra avanzados. Va a ser, no lo sé. Vamos a echar un montón a éste. Nuevamente, recuerden, no es una herramienta de dibujo. Se trata de una herramienta de diseño gráfico Figma. Lo estamos usando para UX aquí, así que no estamos profundizando demasiado en las herramientas de diseño o las herramientas de dibujo, pero son súper útiles. Entonces comencemos con rectángulo. Voy a dibujar un rectángulo de tamaño ish de escudo. Está lanzando algunas cosas nuevas. Entonces quiero entrar en Edit Object, porque lo que quiero hacer es que quiero agarrar mi pentil y quiero un nuevo punto abajo aquí Bien, antes no había uno. Ahora la hay. Ahora puedo volver a mi herramienta de movimiento y arrastrar esto hacia abajo para esa parte puntiaguda Voy a mantener turno mientras lo estoy arrastrando hacia abajo, así que va hacia abajo recto Ahora quiero que esté curvado alrededor de estos bordes aquí. Necesito convertir un par de estos puntos. Lo que también voy a hacer es que solo voy a concentrarme realmente en un lado y luego darle la vuelta al final. Voy a agarrar esto para que sea una curva, haga clic a la vez, y estás como, lo que voy a hacer ahora es volver a esta primera herramienta de aquí, la herramienta de mover. Y lo que voy a hacer es que voy a romper este lado aquí. ¿Quién recuerda cómo romperlo? Mantenga pulsada la tecla de opción en un mickey en una PC y se puede decir, que la ha roto. ¿Yo quiero hacer con éste? Realmente no lo quiero así que solo lo voy a arrastrar de regreso a su casa y se va. Aunque lo bueno de ello es que si le hago clic todavía, todavía tengo este lado y eso es lo que voy a hacer. Porque quiero este lado curvo en este pero puntiagudo en esto Voy a agarrar a este tipo, a lo mejor bajarlo un poco más. Sólo estoy usando mi rastrillo. No me preocupa demasiado este lado porque voy a darle la vuelta en un segundo. Aunque podrías. Lo siguiente que voy a hacer es conseguir la pequeña parte superior de mi escudo. Voy a agarrar el otol para que la herramienta de círculo se arrastre golpee de nuevo el otol . No funciona. Voy a ir al Elipstol aquí. Ha salido de ese modo de edición de objetos. Bien. Así que voy a tener que aplanar esto en un segundo Dibuja algún tipo de círculo. De hecho voy a cambiar el color solo para poder verlo. Y estoy tratando de conseguir algún tipo de punto. Necesito cruzar un poco la línea media . Eso se ve bien. Puedes ajustar esto para llegar a cómo sabes lo que estás buscando, recuerda, es justo lo que queda atrás porque vamos a usar esa herramienta She builder. ¿Cómo sé si se pasa a mitad de camino? Sólo estoy dibujando una selección. Sí. Y lo que voy a hacer es, ¿cómo consigo el Shape Builder? No está aquí abajo. Tienes estas otras cosas como unión y menos frente. Vamos a hacer caso omiso de esos. Vamos a usar el Creador de Formas, que es simplemente más fácil que todos estos. Vamos a tener que usar el aplanar. Entonces podemos entrar en el modo Object Eding, presionar nuestra tecla M para nuestro Creador de formas, que es solo este tercer icono. Puedo mantener presionada la tecla Alt en una opción de PC en una Mac y simplemente hacer clic en ellas. Tengo medio escudo. Ahora lo que quiero hacer es lo mismo otra vez, voy a usar un rectángulo, que es la archia, ir a través de esto. Todo lo que busco hacer es conseguir que vaya ahí a ese punto. Sólo voy a usar esto como un cortador de galletas. Nuevamente, seleccione ambos. Vamos a aplanarlos. Oh, hice algunos aplanamientos automáticos Aplanarlos hacia abajo. Oh, no me di cuenta que hacía eso. Funciona. ¿Lo hace? Es automáticamente usando uno de estos, que creo que está usando excluir. Hay algo de rarosidad en Figma. Voy a dejar esto en el curso porque nunca se había hecho eso antes, pero ahora sí. No se lo pidió. Entonces, si podemos hacerlo independientemente. Se corta un agujero en esta L puedo ver a través de ella. Lo que voy a hacer ahora es entrar en ello, agarrar mi herramienta Shape Builder, y ojalá solo pueda mantener pulsada mi tecla de opción o tecla en un mac. Ser capaz de rebanar la mitad de ella. funciona. Ahora tengo la mitad. Lo que voy a hacer es que voy a duplicarlo. Voy a ir hasta aquí. Hay un flip horizontal y voy a tratar de alinearlos y se matan juntos. Deberían hacerlo automáticamente. A veces he tenido problemas donde va a dejar un pequeño hueco entre ellos, así que me alejo. A veces hay una brecha de píxel ahí dentro. Simplemente puedes hacer clic en él y usar tu tecla de flecha para moverlo a través de una. Ahora podría dejarlo así, pero voy a seleccionarlos a ambos. Voy a aplanar porque recuerden, hay dos formas separadas en mi panel de lay Voy a aplastarlos juntos y verás que ahí está ahí Este va a ser mi ícono de tick. Eso va a hacer. Para ver. Voy a entrar en modo de edición de objetos. Voy a ir a por mi Shape Builder e irme, y unirlos. Simplemente hago clic y arrastre a través de ambos. Vamos a agregar la garrapata. Voy a raspar mi herramienta de pluma, que nos dieron el truco Voy a hacer click una vez para una esquina una vez más una tercera vez. Voy a agarrar mi trazo ok para obtener un trazo de tamaño apropiado, tiene tus propios efectos de sonido, y voy a hacer este llamado Stroke de contorno. Usamos esto antes para separar el tipo. Podemos hacer lo mismo por. Voy a seleccionar sobre esto. Voy a escribir click en él. En realidad, no puede ser un modo de edición de objetos para que esto funcione. Voy a cerrar el modo de edición de objetos. Ahora puedo escribir click. Esa misma opción aquí donde dice trazo de contorno. Esto es más para lo que está destinado a ser utilizado. Lo usamos antes para delinear el tipo. Este de aquí, trazo de contorno, lo que significa en este momento este es un trazo. Si voy al Comando Y, Control Y en una PC. Puedes ver que es una línea con un efecto sobre la parte superior de la misma para hacerla gruesa. Lo que queremos hacer es que sea un rectángulo grande y grueso que podamos cortar un agujero en el fondo. Control o Comando Y, voy a decir ahora un esquema. Vigila lo que sucede. Puedes ver si vuelvo a entrar en modo esquema ahora, en lugar de una línea con grosor en él, en realidad es una forma, esta forma grande y gruesa. Voy a darle click, moverlo un poco hacia arriba , un poquito. Toca para tocar, Comando o Control, ¿por qué? Y lo que quiero hacer es hacerle un agujero . Porque en el momento es negro. Hagámoslo un color, hazlo más obvio. En realidad quiero ser un agujero en ello. Podrías dejarlo como un color. Está totalmente bien. Quiero hacer un agujero en el mío. Así que voy a lijar ambos , smoosh ellos juntos, K para el Shape Builder, y voy a cortar el agujero en el medio de ahí Esto me pasó a mí antes también. Estás como, hay algo de peculiaridad la herramienta Creador de formas en todas las herramientas de dibujo en Figma en este momento Por alguna razón, lo está dejando ahí, k. Simplemente debería hacerle un agujero. Realmente quiere. Pero un poco de solución por el momento. Yo ***** eso va a funcionar en el futuro. Solo son algunos problemas de dentición con la herramienta. Yo si agarras tu cubo de pintura, si pasas el cursor por encima de algo que ya tiene pintura, ¿ves que esto es un menos Es solo menos en mismo mismo no deshacer, podrías seleccionar. ¿Se puede seleccionar esta parte? No, solo usa el cubo de llenado si el tuyo no está funcionando con la herramienta Creador de formas porque ahora hay un agujero en ella. ¿Cómo puedo aprobarlo? Sólo para llegar por encima de algo. Hola, puedo ver a través de ti. Esa es la herramienta Shape Builder. Tiramos algunos extras aquí, como el espejado. También miramos el uso de nuestra herramienta de bolígrafo que vimos antes. Hay algunas pequeñas peculiares para mi versión de Figma. El tuyo podría ser diferente. He entrado en modo de objeción. Yo siento que eso tiene que ser más bajo. Oh, bonito. Todo bien. Esa es la herramienta Shape Builder en figma. Es súper impresionante. Dibuja cosas, superponlas y une o resta bits Dino agrega algunos gradientes dulces. Todo bien. Eso es. Te veré en el siguiente video. 54. Botones squircle con cursos redondeados de iOS en Figma: Ahí. Oye, vamos a aprender lo que es un squirkl dentro del diseño UX y Figma. Squirkl no es del todo un cuadrado, no es todo un círculo. A ver lo que hicieron ahí. ¿Bien? Se llama suavizado de esquina, también, pero arroja un nombre mucho mejor Déjame mostrarte cómo hacerlo dentro de Figma. Bien, hagamos esto en nuestro escritorio de inicio Hola cinco. Entonces cambia uno S todo en el nombre aquí y ve Shift dos. Vamos a acercar el zoom. Entonces necesitamos dos botones aquí. Voy a o en aún más. Estoy usando mi rueda de calavera. O puedes usar tu Shift plus. Vamos a crear dos rectángulos o marcos, usemos marcos Vamos a decir, quiero un botón. Va a ser de este tipo de tamaño. Vamos a tener que ir a probar esto al 100% porque es grande? Sí, eso parece acertado. Bien, entonces vamos a hacer zoom un poco más. Vamos a darle a esto un color de relleno de uno de nuestros, este es uno interesante. Siéntate aquí abajo. En esta página, Gate me muestran los que se están utilizando y obtuvo crédito en este archivo. Aquí están todos mis estilos. Se nota que por alguna razón, los gradientes no quieren ver degradado o simplemente ver los nombres, se puede ir a este dice Bibliotecas Aquí está mi biblioteca de colores. Esta podría ser una forma más fácil de elegir colores. Voy a escoger mi color secundario. No estoy seguro de que me guste el color secundario. En fin, hagamos dos de ellos. Vamos a tener un botón A estas alturas y un botón de aprender más, y vamos a tener ambos seleccionados. Shift, haga clic en ambos. Vamos a agregarles algunos. Sólo voy a escribir el mío en lugar de arrastrarlo, voy a escribir diez pixeles Bien, veamos la diferencia entre nuestras esquinas redondeadas regulares y squirkles. Conseguí este seleccionado. Tenemos que ir a esta opción aquí, esquinas individuales, y luego bajar a la configuración. En realidad no queremos esquinas individuales. Queremos esta cosa llamada suavizado de esquina. Ese es el nombre técnico. Squirkle es mucho mejor, ¿verdad? Círculo cuadrado. Entonces echemos un vistazo. Entonces ese es el gran cambio. Estás como, Se ve igual. Voy a hacer que el editor lo haga zoom antes, después antes, después, antes, después. ¿Incluso lo puedes ver? Bien, hagámoslo más grande para el editor de puertos ¿Bien? Antes, después, antes o después, es sólo un tipo diferente de esquina redondeada. Así es como siempre lo hago. Es solo que tengo no lo sé, una sensación interesante que realmente me encanta, y por eso tiene su propio video. ¿Bien? Entonces, sí. Hasta ti, no necesitas ardillas. Puedes usar esquinas redondeadas regulares. Voy a hacer los dos squirkles. Comando haga clic dentro de él, o haga clic en Control solo para saltar dentro de este botón. De lo contrario, tienes seleccionado todo el fotograma, voy a tener dos de estos. Voy a hacer que este no tenga relleno sino un trazo un bonito trazo grande y grueso de mi color secundario, ¿de qué tamaño? Algo así. Voy a agregarle mi texto también. Eso es. Eso es squirkles Una última cosa. Podrías abandonar los squirkles por completo y simplemente ir por un completo Mira esto. Si lo agarra y simplemente sigo pasando por donde tiene que estar, porque puedes ver que está tratando de tener 146 esquinas redondeadas, no puede hacerlo. Yo sólo se convierte en forma de píldora. Eso es algo que también te puede gustar. Ya miramos esto antes. Si bajo a, bajo a cero y solo recapitulo. Si me acerco lo suficiente, puedo ver los puntitos en las esquinas. C necesita para empezar. Lo que puedes hacer es decir, no van a aparecer. Me pregunto por qué. Normalmente hay un pequeño punto que puedes arrastrar en las esquinas, no acercar lo suficiente Hmm. No aparecer. De todos modos, puedes tener diferentes esquinas redondeadas, podrías poner uno a cero. Ahí vas. Ardillas dentro de una figma. Te veré el siguiente video. 55. Proyecto de clase 10: Iconos: Ah, es más tiempo de tarea. No, no te preocupes. Es un tiempo de proyecto de clase súper divertido. Muy diferente. Anda por este . Aunque no estés haciendo los proyectos de clase, deberías estarlo. Pero si no lo estás, hay algunas cosas geniales e interesantes que suceden aquí. Entonces quiero que dibujes un par de cosas, botones e íconos. Entonces los botones son fáciles. Bien, puedes decidir si quieres chorrear o no. Esos son estos tipos de aquí. A estas alturas, aprende más, consígalo en tu página de inicio. Y luego quiero que dibujes algunos íconos. Entonces usando las herramientas que hemos aprendido hasta ahora, herramienta pluma, herramienta Shape Builder, cualquier herramienta que te guste, quiero que dibujes algunos íconos. ¿Cuántos puedes dibujar? Necesitas dibujar tres. Bien, puedes elegir cualquiera de estos tres. Los he puesto en un orden de menos difícil de dibujar a lo más duro. Para que puedas comenzar con los tres primeros. Podrías hacerlas todas para seguir practicando. Un pequeño consejo cuando estás diseñando cualquier cosa es ponerlos dentro de marcos que son 28 por 28. Bien, perdón, 28. No puedo leer 48 por 48, sólo para empezar. ¿Bien? Entonces, si agarro mi herramienta de marco, dibuje esto, y voy a decir que son dimensiones de 48 píxeles por 48 píxeles. La razón por la que hacemos esto es que cuando terminas combinándolos, bien, necesitas tenerlos un poco proporcionados. A menudo puedes estar diseñando algo o tal vez juntando íconos de otras personas. No es lo que quiero de este video. Quiero que dibujes el tuyo, pero habrá muchas veces en las que solo estés adoquinando los íconos de otras personas y necesites manipularlos. Por eso necesitas las habilidades de dibujo. ¿Bien? Podría ser que este de aquí haya venido a través de la biblioteca de iconos de otra persona, y es simplemente demasiado grande, en comparación con sus amigos La forma de saber si es demasiado grande es pegarlos dentro de estos fotogramas de 48 por 48 píxeles y luego apilarlos uno al lado del otro. También te da una manera de espaciarlos, ¿de acuerdo? Y averigua cuánto de este pequeño espacio aquí ocupan. Aquí no tienen que tener esta gran brecha. Podrían ser más grandes dentro de ella. Estoy aguantando mi turno y opcion Comac o turno y una PC para arrastrarlo hacia arriba. Si ese es de ese tamaño, eres como, lo mejor este necesita ser más grande. Voy a ir por el otro lado y hacerlos más pequeños. Empezar con un cuadrado de 48 por 48 píxeles es simplemente muy común. Estoy deshaciendo hasta que se hizo más pequeño. Vamos. Todos parecen un buen grupo. La otra razón por la que nos gustan 48 píxeles es, vamos a hacer esto. Acabas diciendo: Bien, tú. Tengo un fondo blanco justo mientras los estoy diseñando, pero a menudo apagas el relleno , solo los usas así, dirás, Bien, este aquí va a ir por aquí y puedes ver el tipo de alineación y hay un espaciado consistente Entonces lo que he hecho es, ¿ puedes ver por aquí? Ahí está este marco llamado icon account, y tiene el vector dentro de él. Algunos de los dibujos que hemos estado haciendo es simplemente ser, digamos, este corazón de aquí abajo, ¿dónde está? Ahí está solo hay un vector sentado en mi panel. Si necesitaba poner esto dentro del 48 por 48, o dibujar la caja y arrastrarla a ella o puedo decir, quiero enmarcar esta selección y quiero que el marco alrededor de ellos sea Ts son mucho más grandes de lo que necesito, 48 por 48. ¿Dónde está mi pequeño marco? Ahora voy a decir que necesitas conseguir mucho más pequeño dentro de este marco. Uno de esos consejos útiles es comando miembro o control Y para entrar en modo esquema, especialmente si tu fotograma no tiene un color en él, así que no hay relleno. Ahora puedo decir que para un icono sería apropiado, probablemente sobre eso podría tener que rediseñar un poco mi icono para conseguir que ocupe el espacio amablemente Voy a llamar a este ahora icono Hart. La razón por la que los llamo íconos corazón es que más adelante cuando estoy buscando íconos, el trazo en esto es un poco demasiado grueso ahora. Está por aquí en mi panel Capas. ¿Ves que hay una búsqueda en la parte superior aquí? Puedo escribir la palabra icono, guión me va a dar todo en mi documento que sea un icono Si lo haces al revés call heart icon o account icon, no lo sé. Por alguna razón, esto se ve más bonito y más fácil de encontrar. Bien, ven turno uno. Alejar. Voy a hacer una última cosa que quiero mostrarles antes de irnos es que tengo estos íconos, perfectos. Quiero estos en realidad en mi página de inicio. Quiero cambiar los colores de ellos. Lo que podrías haber notado es antes que nada, probablemente sean demasiado grandes y en realidad no están encendidos. Si puedes ver los nombres, recuerda, en realidad no está en la página correcta. Voy a cerrar mi búsqueda. Asegúrate de cerrar la búsqueda después. De lo contrario, no se puede ver nada. Quiero que todos estos estén en mi página de inicio. Podría simplemente arrastrarlos hacia abajo. Ellos simplemente están ahí dentro. En lugar de intentar arrastrarlos alrededor del panel Capas. Así que vamos al 100%. Me alejé un poco. Tienen el tamaño adecuado. Podría bajar a una talla un poco más pequeña para estos chicos 32. Oh. Eso trae a colación otro buen punto. Algunos de ellos escalan, algunos de ellos no Oh, hay todo tipo de bondad en este video. Entonces antes de hacer eso, lo que te iba a mostrar es que si cambio el relleno de todos estos, mira qué pasa. Cambia el relleno del marco. Entonces voy a deshacer eso. Lo que puedes hacer es que veas aquí abajo? Tengo mi relleno, pero dice colores de selección. Si selecciono todo esto, debería obtener blanco y negro, y uno de mis colores para el fondo aquí, mi color primario. Entonces voy a agarrar todos mis íconos, tú y tú. En realidad no importa. Puedo agarrar todos estos y puedes decir, bien, todo lo que tengo seleccionado, colores de selección. Cualquier cosa que sea negra, quiero que sea, digamos, blanca, o puedes ir a tus bibliotecas y decir, quiero que sea mi color secundario. Ahí es donde los colores de selección pueden ser útiles. Tienes lotes seleccionados, voy a decir, Oye, aquí están todos los colores que te han seleccionado. Cámbialos si quieres. De lo contrario, puedes simplemente bucear dentro de cada icono, seleccionarlos y cambiarlos aquí también. Bien, en cuanto al tamaño. Ya miramos esto antes. Creo que lo hicimos. Vamos a agarrar todos mis íconos. Tú estoy sosteniendo a Shift, agarrándote a ti, a ti. Cuál es mi último ahí. Bien, tengo mis tres íconos, y te darás cuenta de que cuando los cambié de 32, solo algunos de ellos se ajustaron de la manera que quería. T uno y éste necesitan un poco de trabajo. Voy a agarrar la casa que dibujé y veamos la diferencia. Echa un vistazo aquí entre tú y tú. Nada es diferente. Si vas dentro de él, hago clic en él. Este tipo de aquí está a escala, y este tipo dentro de aquí está listo para ser central y superior. Quiero que él escala, tú escala y tú. Lo mismo con este, y tú, quiero ser escala. Parte superior e inferior de escala. Comprobemos dos veces a este tipo, se puso a escala. Dentro de su marco, su marco de padre pequeño, todos van a escalar ahora en lugar de estar pegados a la izquierda y la parte superior derecha a la parte superior e izquierda. En lugar de estar pegados a lo alto y a la izquierda o lo que sea que estuvieran pegados. Vamos a darle una oportunidad. Vamos a agarrar a todos ustedes. Agarra este, turno, turno, turno. Puede ser complicado entrar en algunos de estos marcos porque estás dentro de este marco padre. Haz doble clic a la vez para agarrar a este tipo. Turno antiguo. O puedes agarrarlo en el panel Capas si eso es más fácil. Ojalá ahora, platique un buen juego, Dan. Ellos lo hicieron. Bonito. Bien, entonces 32, recuerda usar múltiplos de ocho, lo cual es práctico, 48, 32, asciende al 100%. Parecen botones de tamaño apropiado. Sé que eso es más para un teléfono móvil, este de aquí, pero está bien por el momento, lo que voy a hacer es cambiar hacer clic en todas, y voy a usar mis columnas, tal vez Shift G, y de hecho voy a conseguir las mías ahí. Ran llaves, ahí vamos. Todo bien. Ese es un video de proyecto de clase larga, pero nos topamos con algunas partes interesantes con las que probablemente te encuentres o que ya tengas El objetivo principal aquí es dibujar tres iconos y hacer algunos botones y asegurarse subirlos a la parte de los proyectos de clase del sitio web, y etiquetarnos también en las redes sociales. Me encantaría ver cuál marca. Bien, eso es. Te veré en el siguiente video. Bien, estoy de vuelta. Tenía otra cosa que me metí en la cabeza una vez que terminé de grabar fue que podrías en lugar de pasar por la molestia de así. Entonces no están escalando. Bueno, éste no escala. Yo digo, tendrías 48 años, ellos no están haciendo exactamente lo que yo quiero. Se puede. En lugar de pasar y decir, A, necesito que seas esta cosa interna aquí para ser escala y escala, solo puedes usar la herramienta de escala. Debería haber empezado con esa. Eso es más fácil, Dan. Simplemente puedes usar la escala, la herramienta de escala, que es K, y puedes hacerlo de esta manera. Quizá tengas que salir. Está escondido debajo aquí cuando estás en el modo de dibujar. Ir a escala. Eso solo lo hará de la manera rápida y fácil en lugar de la forma en que te mostré. Pero supongo que voy a dejar al revés porque solo hay montones de momentos en los que necesitas que se ajuste a escala para que no te esté causando problemas para siempre cuando intentas cambiar el tamaño de las cosas Todo bien. Utilice la herramienta de escala. Los montones más fáciles Pero de todos modos, ese es ahora el fin oficial, el final apropiado. Adiós. 56. Selección inteligente y ordenada en Figma: Hola. ¿Quieres ver algo realmente genial? Se llama Selección inteligente y ordenar dentro de una Figma. ¿Listos? Mira, puedo simplemente arrastrar estos por ahí, jugar con el espaciado de todos ellos al mismo tiempo. Se llama Selección inteligente. También vamos a usar algo llamado ordenar dentro de Figma. Vamos a ponernos en marcha. Juega, dibuja rectángulo, y voy a hacer uno, dos, tres, cuatro de ellos, y colorearlos todos de manera diferente. Todo bien Magia. Ahora, voy a moverlos para que todos sean espacios diferentes. Y vamos a ver el primero llamado tidy up. Sólo voy a seleccionarlos a todos. Y lo que notarás es, es posible que te hayas dado cuenta de esto antes. Si tengo varias cosas seleccionadas, ya ves por aquí, tengo esta pequeña línea estropada Ese es el botón de ordenar, simplemente lo arregla. Puedes recorrer el largo camino y por aquí, hay una opción para decir ordenar. Es aún más genial cuando tienes algunos diferentes. Vayamos aquí. Sólo estoy duplicando algunas diferentes. Aquí vamos seleccionarlos todos, flotar arriba. Mira, los arregló. No verás el orden si ya están muy bien espaciados. Pongamos esos aquí abajo. Ya muy bien espaciado así que no aparece si ya está arreglado. Ahora que están arreglados, se separan uniformemente, verás, ¿qué son estas otras cosas? Hay una línea rosa y un círculo rosa. Para lo que se utilizan es el espaciado intermedio. Estas pequeñas líneas en el medio, haga clic en mantener y arrastre una de ellas. Mira esto. A mí me encanta. Esto se llama selección inteligente. Puedo hacer cosas inteligentes con selecciones. La otra cosa realmente genial de ello son los puntos. Puedo hacer clic en mantener y arrastrar uno de los puntos. Vigila lo que sucede. Pueden comerciar lugares. Puedes ser muy justo como, Sí, es muy bueno para cambiarte. Hagamos íconos en un segundo. Ahora bien, estos no van a aparecer. Si solo tienes una cosa seleccionada, necesitas tener al menos dos. Entonces puedes cambiar hasta dos de ellos alrededor. También puedes hacer algo realmente genial donde vayas, Bien, quiero este. ¿Se puede decir que es lo más destacado? Hizo clic en él. Puedes presionar Comando D o Control D en una PC como hicimos nosotros. Mira, hice otro de ellos. Hagámoslo con este ejemplo aquí abajo. Lo genial de estos tipos, uno, dos, tres, cuatro, es porque están en ese 48 por 48 píxeles, realidad hicimos los nuestros 32, así que no estaban espaciados uniformemente. Puedo decir, algunos aguantando turno para agarrarlos a todos. Ahí está mi orden. Bien, y el mágico es esto. Puedes arrastrar los puntos y decir, en realidad necesito que este sea así, este sea en realidad, este va a ir por aquí. Necesito otro. Necesito a dos de ustedes. En realidad, no lo necesito para eso. Se te da la idea, súper práctico. También es muy bueno para el texto. Aquí hay algunos cuadros de texto que escribí súper rápido, y necesitan estar en cuadros de tipo separados No solo pueden ser devoluciones entre ellos. Lo que puedes hacer es si están espaciados de manera diferente, puedo decir, ordenarlos para mí si quiero ajustar el espaciado entre ellos, mira esto. Mira eso. Práctico. Lo mismo. Puedes moverlos. Podría ser necesario acercar un poco más. Estaba muy lejos, ese es un buen punto. Si estoy demasiado lejos y realmente no puedo hacer lo de los puntos por alguna razón, que acercarles el zoom y los puntos se harán más grandes y puedo decir, en realidad, quiero que estés ahí, y necesito un duplicado de ese y Mmber ese es comando o Control D. Pagemos con el espaciado, súper práctico para listas Puede ser que quieras alinearlos de esta manera. Selecciónalos todos, vamos a ordenarlos. Es en el espaciado. Yo también quiero la altura, así que voy a decir, alineemos a estos tipos con el centro. Puedo ver los puntos y puedo decir, te necesito allá y necesito el espaciamiento entre ellos, lo cual no puedo ver. ¿Por qué no puedo ver el espaciamiento entre ellos? Acercar. Alejar. Si no puedes ver las líneas entre ellos, solo estoy tratando de pensar en voz alta. Ahora necesitamos distribuirlos horizontalmente. No, las líneas no aparecen. Ahí vas. Tienes que acercarte, Dan. Oh, están ahí, están ahí, están ahí. Un cierto nivel, esas pequeñas líneas en el medio también se van. Ese es un buen punto. No me di cuenta de que eso pasó. Todo bien. Ahí vas. La otra cosa que podrías usar esto es para decir nuestras tarjetas. Asegúrate de que todo esté en la tarjeta. Miembro, tengo mi tarjeta tarjeta dos y esta de aquí debería llamarse tarjeta tres. Yo con todos ellos seleccionados, notarás que obtienes los mismos puntos. Esto es súper útil porque obviamente reorganizar todo esto es muy fácil cuando están en la selección Smart De nuevo, puedes moverte por los centros. Solo necesitas asegurarte de que estén ordenados o dispuestos horizontalmente, verticalmente dependiendo de la forma en que los estés apilando. Oh, sí me encanta. Bien, eso es una selección inteligente y ordenar dentro de una Figma. A mí me encanta. Déjame saber los comentarios. ¿Es esta tu característica favorita? ¿Cuál es tu característica favorita hasta ahora? Me gusta revisar los comentarios para ver qué es, estás como, Oh, eso es único de Figma e increíble Para mí, sí me gusta selección inteligente, pero avísame lo que piensas. Bien. Eso va a ser. Oh, una última cosa es, si estás dibujando íconos y no los has puesto en un marco como este, digamos que dibujo este icono. Herramienta Círculo, que es el ok y para la herramienta rectángulo. Entonces diseñas esto. No estoy seguro de qué se trata. Es un hombre muy fornido para la página de la cuenta Yo hago eso y tengo esta otra cosa por aquí y tú estás como, tengo estas dos cosas. Lo que va a terminar pasando es que va a ordenar eso, genial, y estás como, Bien, quiero cambiar estos alrededor. Estás como, ¿qué está pasando? Es porque estos tipos no están agrupados. Necesito asegurarme de que esta cosa aquí sea en un marco o en un grupo. Nosotros no lo que yo quería. Selección de marco. Ahora es una unidad. Ahora puedo ajustarlos como me imaginaba. Eso es. Eso es una selección inteligente y ordenar dentro de una figma. Adiós. 57. Consejos y trucos para usar imágenes en Figma: En este video, vamos a hablar imágenes dentro de Figma. Ya lo hemos hecho un poco, pero hay muchos matices en las imágenes, diferentes formas de traerlas, en las imágenes, diferentes formas de traerlas, y veremos algunos conceptos básicos de la edición de imágenes, jugaremos con la saturación y el contraste y la temperatura Vamos a saltar y aprender todo lo que tiene que ver con las imágenes. Así que hay muchas maneras de traer imágenes. Podemos ir a esto, ir a Archivo, e ir a uh, colocar imágenes. Yo uso este bastante a menudo. Atajo que podrías aprender dependiendo de tu flujo de trabajo. En este caso, Shift Command K, que será Shift Control K en una PC. Puedes usar esta forma para traer una imagen, o puedes bajar aquí y en lugar de traer un rectángulo, puedes insertar una imagen. O simplemente puedes arrastrarlo desde tu escritorio, arrastrarlo hacia adentro y entra. El único problema de traer desde tu escritorio, si son archivos realmente grandes, vienen demasiado grandes. Voy a usar mi Shift de Comando K en tus archivos de ejercicio. Hay algunas imágenes. Todos son basados en billetera. Lo genial al respecto así como puedes arrastrar en más de uno. Quiero este primer grupo aquí y lo voy a abrir y notarás que tu cursor se actualiza con ya ves, tengo seis imágenes, y puedo decir que lo quiero a ese tamaño, ese tamaño, y las obtienes en un tamaño más apropiado. Eso puede ser útil. Ahí vas. Al cambiar el tamaño de una imagen, si agarras la esquina y la arrastras hacia afuera, notarás que bloquea la altura y el ancho, pero si agarras los lados, no, esa es una característica nueva. Se le redimensionó. Acabo de notar aquí arriba, esto está encendido por defecto ahora. Relación de aspecto de bloqueo. Si lo apago, agarro el costado ahora, mira lo que pasa. ¿Qué está haciendo? Se trata de cambiar el marco en el que está y está haciendo que la imagen la llene como algo. Así que también puedes ir por este camino, y va a redimensionarlo para intentar llenar de la mejor manera cualquier forma que hayas decidido porque eso es lo que quiero Quiero esta otra imagen aquí. Estoy usando el atajo Mcmand shift K. Puede usar Control Shift K en una PC o simplemente usar las formas más largas. Voy a traer esto , y lo que quiero hacer es arrastrarlo a algún tamaño aleatorio, y lo voy a poner aquí. Lo que quiero hacer es que voy a entrar dentro de este marco. Lo que quiero hacer es seleccionar todas estas cosas y moverlas a la derecha sin la caja morada. Podrías ir y hacer clic en esto y decir, quiero agarrar todo dentro de aquí, que lo seleccionaremos. Simplemente hice clic en el primero, sostuve a Shift y lo agarré Pero lo que tiendo a hacer, si ya no estás lleno de atajos, recuerda que puedes mantener presionada la tecla de comando en una tecla Control o PC para seleccionar algo dentro de ella. También lo haces para una selección. Voy a mantener presionada esa misma tecla, Comando o Control, Mac o PC y simplemente arrastra una caja alrededor de todo esto y agarra todo dentro Te voy a decir a ti o por aquí. Se arrastrará bastante bien a la derecha como una línea recta. A mí me gusta simplemente mantener pulsada la tecla Shift y obligarla a hacerlo. Entonces voy a decir que estás ahí y lo que quiero es que esto vaya en esta esquina superior de aquí. ¿Quiero que se bloquee en las esquinas? Ahí vas. A Solo me estoy asegurando de que esté dentro de este marco. Voy a renombrar esta llamada caja de héroe. Sé que todo este trozo es mi caja de héroe, y esta es mi imagen de héroe El héroe es la palabra que generalmente se le da a esta caja. Esta es mi imagen de héroe, mi gran imagen de producto. Lo que quiero hacer es romper el enlace para la relación de aspecto que pueda arrastrarlo y conseguir que llene el espacio que quiero. Quiero que sea 50, 50 y notarás que redimensiona para que mejor se ajuste al marco que arrastré Recuerda, puedo arrastrarlo más pequeño, más grande, hace todo lo posible para llenarlo. Está a mitad de mi página. Te das cuenta que encontré el medio al no hacer nada realmente, solo lo arrastré cerca de donde la mitad de la página es esa mitad de la página No lo es. ¿Por qué no está chasqueando a la mitad Lo que podría hacer es hacer clic en este marco exterior y decir, ¿qué eres? Tienes un ancho de 12 40, así que voy a asegurarme de que esto sea 1240/2, y estamos difinitamente la mitad. Normalmente se chasquea Ahora, otra forma de traer una imagen es comenzar con una forma. Podríamos empezar con, comencemos con cualquier forma antigua, pero vamos a escoger una elipse, porque los rectángulos son demasiado fáciles. Lo que puedes hacer está bien, básicamente lo que está pasando con este de aquí abajo es un hit escape para volver a mi herramienta de movimiento, mantén pulsada la tecla de comando para hacer click en esto. Esta imagen, o está en mi panel de lay. Está ahí. Esta imagen es realmente un rectángulo con un relleno dentro de una imagen. Este círculo es un relleno pero con un color en su interior. Lo que puedes decir es que no tenemos que eliminarlo. Podemos simplemente cambiarlo. Como cambiarlo de sólido a degradado. Pero podemos cambiarlo a una imagen, extrañamente. Te voy a mostrar todas las diferentes formas de ajustar estas imágenes. ¿Por qué? Principalmente porque te vas a poner en contacto con las plantillas y ser como, ¿Cómo rayos hicieron Bueno, ahora ya lo sabes. Bueno, después de este video, ya lo sabrás. Voy a hacer click en esto y decir, en vez de un sólido o no un degradado. Ah. Una imagen. Das click en una imagen y dices que voy a subir desde mi computadora y voy a escoger esta y voy a meterla. Genial hacer lo mismo en lugar de simplemente arrastrarlo, lo estás llenando. También puedes hacer otra cosa. Vamos a agarrar otra forma aleatoria, el mismo proceso, solo una forma diferente de hacerlo. Tengo una estrella. Estoy aguantando turno así que no es una estrella blandita ¿Cuántos lados voy a poner en ocho? Lo que voy a hacer es que voy a agarrar a este tipo y arrastrarlo dentro. ¿Puedo hacer eso? No sé si podría. Sé que puedo importarlo y traerlo . Hagámoslo diferente wy. Lo que voy a hacer es agarrar mi oh, no, hay dos maneras. Vamos a traer una imagen con el atajo Command Shift K, Control Shift K, una PC. Voy a encontrar una imagen. Este de aquí es bueno. Hago clic en abrir. En vez de simplemente hacer clic y arrastrar como lo hicimos, voy a deshacer y tengo que hacer todo de nuevo, es que sólo puedo hacer clic dentro de un marco Puedes ver lo que realmente agarró mi estrella y le agregó un relleno de esa imagen Esa es otra forma de traer imágenes. Por qué tener una manera cuando puedes tener 72. Pero ahora ya sabes, puedes archivarlo y portarlo. Puedes usar la opción aquí abajo para traer una imagen, puedes usar un atajo. Puedes arrastrarlo desde tu escritorio. Cuando lo arrastras, puedes rellenarlo directamente en una forma existente o tomar una forma existente y cambiar el relleno de sólido a imagen. ÚTIL. No, quiero cubrir algunos conceptos básicos de fotos. Rotándolo. Si haces clic en él, puedes rotar sujetando solo el exterior. Ahí está este agarrar el borde, no lo que yo quiero. Si pasas el cursor justo afuera de allí, obtienes el tipo de rotación tradicional Si sostienes Shift, ¿lo bloqueará en qué es? ¿Multiplos de 15 grados? Sí, eso es lo que está haciendo. O podrías decidir, en realidad, yo sólo voy a escribir. Tiene que ser de 180 grados, al revés. Hasta ti, puedes voltearlo. Gírela. Boop. Agrega tus propios efectos de sonido. Sólo haz una última cosa y quiero mostrarte alguna edición básica de imágenes. No es un editor de fotos completo, pero hace lo básico bastante bien. Digamos que quiero una imagen en nuestro fondo. En realidad, solo hazlo primero en uno básico. Veamos éste. Estoy usando este de aquí. Es una de las imágenes de los archivos y lo que quiero hacer es que puedas pasar por aquí, pincha en imagen. Por aquí, tienes lo básico. Tienes exposición, contraste, temperatura de saturación, reflejos de tinte y sombra si acaso no podías leer, y solo puedes arrastrarlos. Exposición, quieres bajarla, arrastrarla hacia la izquierda. Levántelo. Ahí vas. Esto es no lo sé, realmente básico tipo photoshop cosas, así que no hay mucho que hacer. Blanco y negro, arrastra la saguración hacia abajo. Si quieres que sea más cálido, arrástralo hacia la derecha. Si quieres hacerlo más fresco, arrástralo hacia la izquierda. Cambiar la temperatura de toda la imagen. Cuando estás trabajando con imágenes de la biblioteca de stock, están perfectamente bien y no necesitas hacerles mucho. Cuando estás tratando con imágenes que tal vez hayas filmado o de un fotógrafo que aún no ha sido retocado, es posible que necesites jugar un poco más con estas . Arrastre eso hacia atrás. Te dejaré experimentar con los tintes y la temperatura y los reflejos Una cosa que sí quiero mostrarte es a menudo para, digamos, gráficos, voy a elegir un gráfico que quiera usar. Digamos que es este de aquí. A mí me gusta. Quiero que sea una imagen de fondo. El problema con él, sin embargo, es que si agarro este texto y lo pego en la parte superior, lo muevo al frente usando mis corchetes. ¿Ves que se pierde un poco en ese fondo ahí? ¿Ves que se pone un poco difícil de leer? Este es bastante oscuro. En realidad, es mejor aquí abajo. El contacto se vuelve complicado de leer. Lo que puedes hacer es que voy a tener eso ahí. Puedes dar click en el fondo, dar click en llenar y dar click en Imagen. Hay dos cosas. La exposición simplemente lo oscurecerá. Me parece que si quiero lavar algo al fondo, mantenerlo rico pero solo oscuro para poder leer cosas. Voy a soltar eso un poco para exponerlo y luego jugar con cosas como los reflejos. Arrastrando los resaltados hacia abajo, puedes ver saca los bits realmente afilados que a menudo se pierden con el texto Puedes chocar sombras. Encuentro sólo esos dos. La exposición hacia abajo un poco resalta tanto como la imagen podría tomar. Este puede ir hasta el fondo y no creo que le resta valor a la imagen, podrías subir las sombras, conseguir un poco más de contraste ahí dentro Podría hacerlos un poco más cálidos y ricos porque sus billeteras y cálidas cosas coriáceas La saturación también podría llegar un poco. Se puede jugar con estos. Encuentro exposición y destellos solo para empujarlos a un segundo plano. No me gusta lo que he hecho. Va a volver ahí, saturación va a volver. Ahora el texto es mucho más legible. Ahora, una última cosa es, digamos que tengo esta imagen aquí, y tal vez quiero agregarla al fondo aquí. Podría simplemente arrastrarlo e irme, voy a ir, arrastrarlo. Está al otro lado de ahí. ¿Está dentro de mi página de inicio, lo es? Lo voy a enviar al fondo usando mis corchetes junto a mi PK en mi teclado, y puedes hacerlo. Perfecto. No hay nada malo en esto, pero quiero mostrarte otra manera, solo porque obtendrás otros documentos donde te quedarás desconcertado para encontrar la imagen. Ya lo hemos hecho. En el momento en que esto es bastante claro, tengo mi página principal y dentro de mi página de inicio, hay una imagen justo en la parte posterior. Eso tiene sentido. Pero si borro eso, en realidad puedo agregar la imagen al marco de la página principal. Nosotros también lo hicimos. ¿A cuál se lo hicimos? Éste de aquí. Teníamos un círculo, recuerden, y cambiamos el relleno a una imagen. Estamos haciendo lo mismo, pero se siente raro hacerlo a la página de inicio, pesar de que es solo un frame, pero podemos hacerlo. Vamos a dar click en la página principal. Acercar Mayús dos mi selección. Voy a decir, no quiero llenar de sólido, quiero llenar de imagen. Voy a ir a subir desde mi computadora y voy a ir a buscar esa que estuvo bastante genial para un fondo. En una Mac, si eres como, ¿cómo está previsualizando las imágenes En una Mac, puedes presionar Barra espaciadora. No creo que puedas hacerlo en una PC, tal vez puedas, pero puedes tener mantequillas espaciales para previsualizarlas o podrías tener miniaturas más grandes Estoy usando este de aquí, este Julius Trost abierto y te darás cuenta de que está en el fondo Ahora puedo meterme un poco con la exposición. ¿Ves como tal vez es un poco más raro, no está tan mal? Pero quiero que sea más sutil. Voy a bajar un poco la exposición y arrastrar esto un poco hacia arriba, encontrar mis reflejos y arrastrarlos hacia abajo. Simplemente quita la nitidez de esos y podrías decidir que la saturación necesita bajar Tal vez la exposición un poco más. Quieres que sea algo bastante sutil en el fondo. Todo lo que dije había una última cosa. Una última, última, última cosa es que podrías decidir que en realidad, me gusta esta imagen. A lo mejor tienes duplicados y estás como, A, tengo dos de esto Quiero el mismo círculo, pero necesito una imagen diferente. Simplemente puedes entrar aquí, dar click en la imagen, y puedes decir subir desde computadora y simplemente elegir otro, cual 1:00 A.M. yo por conseguir este de aquí y reemplazarlo. Todo bien. Eso es mucho sobre las imágenes todo en un solo video. Espero que haya sido de ayuda. Principalmente hago esto porque hay tantas formas diferentes de abordar las imágenes en figma, y recuerdo cuando estaba aprendiendo, estoy como, las imágenes son raras, a veces, a veces están bien Es porque a veces simplemente son arrastrados como una imagen, lo cual tiene sentido Entonces a veces son imágenes dentro de un relleno en un marco. Todo bien. Voy a dejar de hablar de imágenes. Bueno, en el siguiente video. Haremos más imágenes. Pero eso lo haremos en el siguiente video, te veré ahí. 58. Enmascarar y recortar imágenes en Figma: A Todo bien. Esto debería llamarse Cómo hacer un lío realmente grande de tu archivo de diseño Figma Pero en serio, se trata de enmascarar. Vamos a usar formas para enmascarar imágenes y hay tres formas diferentes. Quiero mostrarte todos ellos por si acaso te topas con ellos con los archivos de otras personas. Hay pros y contras para los tres. Además, también haremos mensajes de texto. Vamos a recibir un mensaje de texto. Puedes escoger una mejor imagen para ir en tu texto. Eso se ve horrible. Pero ahí es donde terminamos. Así que vamos a saltar. Empieza a hacerlo. Veamos las tres técnicas diferentes de enmascaramiento. Empezaremos con la máscara de vainilla. A estos los he nombrado. Nadie más los ha nombrado solo a mí. Sólo para darles una diferenciación para nosotros aprendiendo. Vamos a empezar con la vainilla y lo que vamos a hacer es que vamos a importar una imagen. Digamos que hemos importado éste. El cultivo de vainilla es básicamente solo traer la imagen y luego cambiarla aquí de imagen. Simplemente por defecto para llenar, puedes cambiarlo a crop y estás como, no pasa nada Lo que puedes hacer entonces es agarrar el marco y arrastrarlo alrededor. Tenemos, doble clic en el fondo, lo recortamos. Aquí tienes. Yo uso la palabra recortar y enmascarar indistintamente, Figma lo llama enmascarar. Lo mismo. Para volver a entrar en él, haces clic en él y puedes hacer clic en la imagen de aquí y vuelve a la vida. Rellenar por defecto. Vamos a hacer clic en llenar. Lo hará, si lo redimensiono siempre y cuando las proporciones de aspec se desvíen. Puedo redimensionarlo y siempre intentará llenar cualquier forma que haya dibujado o con la que me haya quedado Voy a cambiarlo a crop que es el cultivo de vainilla. Puedes decidir sobre lo raro de ello es ver el borde aquí. El marco es realmente fácil de agarrar porque tiene asas muy claras. Se puede arrastrar por ahí. Se puede rotar el marco. Aunque la imagen, no parece tener las líneas azules alrededor del exterior. Tiene el equivalente. Simplemente no los puedes ver. Así que mira esto, puedo arrastrar el borde aquí, mantener turno, eso escala proporcionalmente Puedo hacer lo mismo con la rotación. Recuerda estar un poco más allá por aquí. Ahí está esta área mágica de rotación, y también puedes girarla alrededor . Haga clic y arrástralo para moverlo. Voy a tener que hacer el mío más grande para que quepa, que puedas ajustar la imagen, pasarla desde el marco. Preguntando. Esa es la máscara de vainilla. Trae la imagen, cámbiala para recortar, jugar con ella. Ahí está el método de dos formas. En realidad, antes que nada, en el de vainilla, echa un vistazo en el panel Capas aquí. ¿Puedes ver esto? Es muy sencillo. Es sólo una imagen con el nombre de la imagen. No hay nada en el panel de capas. Bastante claro. Sólo hay que recordar entrar aquí para ajustarlo. Eso es genial. Entonces el método de dos objetos es cuando tienes una imagen o lo siento, una forma y una imagen. Voy a poner el mío en el frente. Si quiero enmascarar estos dos, todo lo que necesito hacer es tenerlos uno encima del otro, seleccionar ambos. Necesitas tenerlos ambos seleccionados y por aquí, aparece un pequeño icono dice, usa como máscara. Estás como, eso no funcionó. Lo raro de esta máscara es que la forma tiene que estar en el fondo. Sólo tengo la forma seleccionada. Yo uso mis corchetes junto a mi pKey para empujarlo hacia atrás o puedes hacer clic derecho y decir enviar a atrás Todavía necesito seleccionarlos a ambos, así que necesito intentar agarrarlos a ambos ahora, lo cual es bastante fácil y ahora necesito ir a enmascarar. Es el objeto posterior el que enmascarará la imagen en la parte superior. Esa es la forma en que funciona, sin embargo. Puedes ver para editarlo, puedes seleccionarlo y puedes hacer doble clic en él para entrar dentro de él, o probablemente más fácil, especialmente cuando estás aprendiendo es hacer clic en él una vez. Por aquí, se ve la diferencia. Este otro objeto, que era éste, cuál trabajará en ese de ahí. Lo voy a mover hacia arriba en mi panel de lay solo para que sea más fácil de comparar. Ese fue el método vainilla, donde acabamos de traer una imagen y recortarla. Este de aquí funciona de manera diferente. Terminamos con la misma parte, todavía tenemos una máscara, pero en este caso, es un grupo de máscaras con dos cosas dentro de él, mi vector, que está en la parte inferior y mi imagen en la parte superior. Esto lo hace un poco más fácil cuando estás como, quiero ajustar un poco el swing de la imagen. ¿Bien? Puedo seleccionar en la imagen, y luego obtuve estas pequeñas asas bonitas que aparecen y puedo mantener el turno y reorganizarlo, arrastrarlo alrededor Si quiero trabajar en el marco, puedo hacer clic en el marco y decir, quiero hacerte un poco más grande y tal vez rotarte alrededor. Se puede trabajar en ellos un poco más pragmáticamente. No lo sé. Es más fácil trabajar, pero es un poco más confuso aquí en el panel de capas. aspecto fácil, duro, pero probablemente más fácil trabajar con él. Dijo que había tres opciones de enmascaramiento. Los hay. La tercera forma es la primera máscara de forma. Es decir, solo dibujas una forma, cualquier forma. Voy a dibujar una elipse. Podría ser esto, podrías haber dibujado una llama, realmente no importa. Pero en lugar de tener la imagen encima y hacer una máscara, tienes seleccionada y dices, en realidad, quiero cambiar esto a una imagen. ¿Qué tipo de imagen tienes? Voy a decir que voy a elegir uno aquí, y lo hago. Es solo una forma ligeramente diferente de esa primera, la vainilla, donde comienzas con la imagen y luego recortas los bordes. Esta, comienzas con la forma y la rellenas con una imagen. Si lo cambio de relleno a cultivo, obtengo que hacer básicamente lo mismo. Llego a jugar con el fondo. No obtienes las manijas, pero llegas a hacer lo mismo. Como el de vainilla, diferentes formas de abordarlo. Encontrarás otros tutoriales donde estés como, pensé que tenías que traer la imagen y luego recortarla o traes en una forma y agregarla, luego recortarla? ¿O tienes dos formas, las pegas una encima de la otra y luego las enmascara? Todos son iguales. Porque mira esto. ¿Tengo otra copia de eso? Yo sí. Voy a agarrar esto y puedo hacer exactamente lo mismo que la elipse te puedo decir Ya no tienes relleno . En realidad, vas a tener un relleno, pero va a ser un sólido. No, voy a cambiar a imagen. Voy a escoger una imagen. Voy a elegir esa imagen de Scott. Voy a deshacerme del derrame cerebral, y terminamos exactamente en el mismo lugar. Todavía puedo ajustarlo, pero tengo aquí en las capas, puedes ver que se ve diferente. Eso es lo que quiero mostrarles es que estaría trabajando en esto. Yo estaría como, ¿Qué rayos es eso? O vas a estar viendo esto yendo, ¿cómo dónde está la imagen? ¿Cómo llego a ella? Sólo una forma diferente de trabajar. Doy click en esto, voy a Crop y ahora puedo trabajar en ello. El mismo tipo de manera. Mismo resultado final, solo un par de formas diferentes de hacerlo. Vainilla, empieza con la imagen. El método de dos formas donde simplemente superponemos dos cosas y hacemos una máscara. Después el último donde comienzas con una forma y agregas un relleno que es una imagen y así se recorta. ¿Fue útil? Vamos más allá. Hagamos tipo. Si voy a escribir herramienta, voy a escribir mi nombre. Voy a pegarle a escapar. Voy a usar mi Ktol para hacer el tallado solo para que la fuente se ponga bonita y grande Voy a agarrar mi herramienta tipo, tenerla seleccionada, encontrar una buena fuente negra, bonita y gruesa, y puedo hacer lo mismo. Mira esto. Tiene un relleno de blanco. Mira, imagina lo que podría hacer. Hmm, hago click en esto y solo voy, imagen. Ya estás ahí. Estás como, eso no es difícil. No lo es. Aquí vamos. Tenemos una imagen en el fondo. Antes, si queremos ajustarla porque en el momento en que decía rellenar, lo que significa que si cambio voy a la herramienta de tipo, cambia el texto. El texto sigue siendo editable, lo cual es genial. Voy a escribir todo mi nombre. Me puedes llamar Dan y ¿lo ves ampliado en base a las letras que están disponibles? Entonces se está llenando. Puedes cambiarlo a recortar, y luego ir, Bien no puede estar en mi herramienta tipo Tengo que estar en mi herramienta de movimiento. Oh, eso no funcionó. Vamos aquí. Oh, el tipo. ¿Cómo me esperas ahí? No estoy segura. Oh, todavía está en Phil. Consiguió una cosecha. Ahí vamos. No estoy seguro de lo que hice ahí. Te juro que antes tenía cosecha, pero claramente, no lo hice. Bien, para que pueda arrastrar mi imagen, manteniendo el turno, bien, colocarla donde quiera, ¿de acuerdo? Y si quiero cambiar el tipo después, bien, tengo que usar la herramienta tipo. Y porque somos amigos, puedes llamarme Dan. Hay una imagen terrible para lo que estamos haciendo porque realmente no puedes ver mi texto. Eso está bien. Quiero volver a meterme en ello. Da click en el relleno como antes, y puedo ajustar éste para tratar de encontrar algunos más. Podría tener que hacer lo contrario de lo que hice antes, sosteniendo turno y tratando de poner todas las partes coriáceas en el fondo Podría tener que jugar con el contraste y ponérselo un poco. Sin exposición, búmela un poco. ¿Bien? Es lo más destacado, bajarlos, tal vez tenga que sacarlos a colación. O en este caso, las sombras. Quiero que sean más ligeros. ¿Bien? Todavía no funciona tan feo. Se te da la idea. Entonces esas son cuatro formas de recortar si incluimos el texto ahí al final Sí, de veras quiero esto aquí porque recuerdo que fue muy confuso. Si no haces nada más, probablemente la forma más fácil es simplemente usar el método de dos formas donde pones la imagen y la forma juntas, asegúrate de que la imagen esté arriba, selecciónalas ambas y presionas el botón de máscara. Pero te toparás con estos y estarías como, ¿no? ¿Cómo lo cambio? Solo tienes que acordarte de hacer clic en la imagen para cambiar el recorte y si pasas el cursor por aquí como hicimos en el último video, podemos subir una nueva imagen para reemplazarla Eso es. Enmascaramiento Slash Recorte Hecho. Nos vemos en el siguiente video. 59. Imágenes y complementos gratuitos para Figma: Ahí, en este video, vamos a ver cómo obtener imágenes gratis que puedes usar comercialmente dentro de tus proyectos de Figma, y te mostraré a qué sitios web ir y te mostraré cómo usar algunos de los plugins Son muy fáciles. Vamos a saltar y hacerlo. Esperando que este se cargue. Ahí vas. Está cargado. Déjame mostrarte de dónde los obtengo. Todo bien. Entonces, cuando se trata de buscar imágenes para usar en tus documentos, probablemente estés buscando aquellas que puedas usar comercialmente. Entonces si el cliente va, sí, me encanta, y luego tienes que irte y encontrar uno diferente, eso no es divertido. Estás buscando unos que sean comercialmente licenciables, hay dos lugares realmente buenos para los gratuitos Unsplash.com. Y otro son los píxeles. Puede que tengas el tuyo propio. Hazme saber los comentarios. Si tienes otro que podrías usar que te guste que otros también puedan disfrutar. Lo genial de ellos es que digamos Unsplash, el que más uso, tienen un montón de gratis. Los que tienen poco plus en este momento son sus premium. Los llaman Unsplash plus. Los estoy evitando, y digamos que quiero hagamos una búsqueda. Vamos a por qué estamos haciendo, ¿qué? ¿Bien? Y vas a encontrar un montón de cosas, y digamos que quiero esta, solo descárgalas y puedes usarlas. Puedes echar un vistazo al interior y ver cuáles son los derechos comerciales para ellos, pero encontrarás que todo en este sitio es de uso gratuito bajo la licencia Unsplash. Está bastante claro. Se puede descargar de forma gratuita. Puedes usar el comercialmente, y no necesitas permiso. Aunque se aprecia la atribución. Podrías dejar un enlace o quien sea el fotógrafo , darles un grito No puedes ir y luego venderlos. Comprueba dos veces si los estás usando para algo un poco extraño, pero para un uso normal, los píxeles Unsplash son geniales Descargar desde el sitio es una cosa que realmente puedes cortar al grano e instalar un enchufe. Bien, entonces aquí abajo, el tuyo se verá diferente si estás en la cuenta gratuita, pero este pequeño panel de Acciones. Puedes ir a Plugins, y voy a escribir imágenes gratis. De nuevo, estás buscando las que han tenido muchas descargas, muchas de ellas. Voy a ir y solo teclear Unsplash porque sé que hay un plugin Y puedes simplemente pinchar por aquí, yo voy a correr. Dale un segundo para cargar, y ahí vamos. Yo sólo puedo dar click sobre estos y simplemente aparecen. Voy a deshacer eso. Ya puedes hacer clic en una forma y hacer clic en ellas y simplemente la pegará dentro. Ahora que sabemos usar el recorte, sabemos cómo entrar aquí y decir cambiar a recortar y podemos ver los bordes, podemos empezar a ajustarlo. Sí, eso es. Eso son imágenes gratuitas dentro de Canva. Puedes usar los sitios web o puedes usar el plugin. Súper fácil. Todo bien. Te veré en el siguiente video. 60. Cómo crear imágenes de IA en Figma: Ahí, vamos a utilizar inteligencias artificiales hacer que las imágenes desde cero Estos no existían. Simplemente los escribimos y las máquinas los fabricaron. Gracias, máquinas. Déjame mostrarte los consejos y trucos para hacerlos, obtener la iluminación correcta y la composición correcta. Todo bien. Vamos a saltar. Todo bien. Voy a seleccionar la página de inicio, turno dos para acercar. Voy a sustituir esta imagen aquí. Si no te vas a quedar con este, en realidad, los voy a poner ahí, y voy a dibujar un rectángulo y voy a dibujar un marco en realidad. No tienes que empezar con un marco. Yo sí quiero. Porque quiero que sea de un tamaño específico. Sea cual sea el tamaño que dibujes, será con lo que la IA la llene. Bien, ahora aquí abajo, esta es una de esas características donde sí necesitas la cuenta paga. Estoy bastante seguro que demonios si estás en la cuenta gratuita, bastante seguro que la necesitas , y vas a usar esta que dice hacer una imagen No nos está venciendo. El tuyo va a verse diferente y probablemente funcione diferente. Cada vez que cargo Figma, esto es un poco diferente. Esa es una de las cosas frustrantes de una herramienta de diseño UX es que siempre ajustando la UX De todas formas. Lo voy a hacer es mecanografiar cartera de piel sobre caro escritorio de madera. Vas a tener que averiguar qué tipo de incitación quieres usar Eso es lo que tengo en mi cabeza. Voy a hacer clic en Hacer. Vamos a esperar a que todo suceda. Sucede en la nube y solo lo descarga, así que puede llevar un poco de tiempo. Me estoy estocando. Realmente no me gusta esta animación. Todo bien. Voy a saltar a que se esté haciendo. Se está trabajando. Bien, entonces probablemente tardaron otro minuto en terminar. Oh, me gusta. Entonces es como, bien , ¿qué cambios quieres hacer? Hagamos cambios aquí. Digamos que quiero una vista de pájaro o una vista de arriba hacia abajo. Se le pueden hacer ajustes a esta cosa, como, Todo lo que quiero que no sea un escritorio de madera, sino tal vez un escritorio de abedul o no lo sé. No conozco muchos tipos de madera. Pero puedes hacer ajustes a medida que avanzas. Aquí estoy jugando con los ángulos de la cámara, saltemos a que se haga. Bien, ¿cuál describió mejor? Ese es el que quiero. Ese fue el original. Esta es la nueva. hacer clic entre ellos y mantener cuál quieres que decidas, brillante. ¿En qué hice clic? a regresar. Ese es un buen punto. Voy a usar mi herramienta de movimiento, haga clic en esta imagen, haga clic de nuevo en un lado de la misma. Lo tengo seleccionado aquí. Voy a volver a mi hacer una imagen. Bien. Bien, entonces acabo averiguar que una vez que vas a dejar ese flujo, no creo que puedas volver a meterlo en él. Entonces voy a tener que empezar de nuevo. Yo creo. Si lo averiguas, puedes hacerlo. Házmelo saber. Podría ser algo que actualicen. Es una beta de IA. Entonces, ¿tengo que volver a hacer todo esto? Lo que voy a hacer es hacer esto Birds Eye view, y voy a decir Iluminación brillante. Podrías estar haciendo diferente. Podrías decir, ya sabes, malhumorado o podrías ser mejor en cine y televisión que yo o en fotografía y llegar a diferentes ángulos de iluminación, tal vez afuera, luz natural, iluminación superior izquierda Puedes decirle lo que quieras. Todo bien. Eso es mejor, tal vez. ¿Bien? Entonces sí, IA, es bastante poderosa que no existía en el mundo. ¿Bien? Son carteras un poco duras Scott en realidad vamos a tener productos físicos. Pero para marcadores de posición o imágenes de soporte, oh, brillante. Ahora bien, podría pasar por y hacer una serie de estos y decir, hazlo con cerca en las costuras y tipo de diferentes ángulos, diferente iluminación, pero entiendes la idea. Esto cambiará esta interfaz. Pero no lo sé, Los Ángeles se está poniendo muy bien. Entonces el mundo es tu ostra. Una de las cosas, sin embargo, que es interesante de ello es, mira esto. Si voy y hago un marco que es como este tipo de buzón con forma, y hago exactamente lo mismo, pero voy a agregar un poco de extra. Oh. Agregado con una lámpara de escritorio. Voy a dibujar otro, y saltaremos a que esté terminado. Todo bien. Tengo mi lámpara de escritorio. Oh, me gusta. Es que estarías como, está recortado aquí. Lo que realmente se hace es si vamos por aquí y digamos que queremos recortarlo, sabemos que en realidad no necesitamos este relleno blanco. Sólo está ahí por diversión. Esta de aquí, esta imagen. Si entro en él y digo, quiero que se recorte, ¿lo ve? En realidad ha hecho una imagen más grande, en realidad no la ha recortado. Simplemente hizo esta relación de aspecto estándar y simplemente la recortó a lo que sea que hayas hecho Podría haber más que no puedas ver. Eso es sólo algo de lo que hay que tener en cuenta en este momento. Ve y cambia esta interfaz de IA. Yo *****. Pero ahí tienes. Eso es construir imágenes que son comercialmente utilizables usando AI endereza figma, los resultados se ponen buenos Bien, el tuyo será en el futuro. Los resultados serán aún mejores. Yo ***** la interfaz y más controles estarán ahí. Si cambia mucho, vendré y lo reharé. Pero ojalá, no sea muy diferente, y buena suerte con la IA. Te veré en el siguiente video. 61. Proyecto de clase 11: imágenes: Muy bien, tiempo de proyecto de clase. Quiero que trabajes tus imágenes en tu diseño. Bien, así que vuelve a tu brief y asegúrate de que no estás haciendo billeteras. Descubre tus imágenes. Puedes obtenerlos ya sea de Unsplash o puedes usar la herramienta de IA si tienes acceso a eso, si estás en la versión Pro, y luego comenzar a llenar tu página de inicio en tu escritorio Hi Fi Ahora, tus cartas se verán diferentes a mí. Bien, entonces, ¿dónde está el tuyo? Podrías haber hecho diferentes ejemplos. Podrías haber usado círculos en lugar de rectángulos como yo, o como este de aquí donde hay más de un recorte interesante para las imágenes Depende de ti, pero quiero que vayas a través, consigue las imágenes. Quiero que experimentes con el uso del plug in también para pixeles o unsplash o cualquier otra cosa. No me importa. Quiero que experimentes con ello. Nuevamente, la IA, si tienes acceso a ella, no olvides tu persona y breve, asegurándote de elegir imágenes que relacionen quién es tu persona, y toma una captura de pantalla. Subirlo al proyecto slash Assignments y llévanos también a las redes sociales, porque ahora es interesante ver proyectos de todos empezando a llenarse, con imágenes reales y fuentes y esas cosas Es el momento emocionante. Bien, así que ve a agregar algunas imágenes, y te veré en el siguiente video. 62. ¿Qué son el diseño automático y los botones de expansión en Figma?: Hola a todos. En este video, vamos a aprender qué es un auto out. Y nos vamos a abrazar. Oh, sí, lo estamos. Mira, va a hacer todo tipo de abrazos. ¿Por qué es bueno abrazar con salidas automáticas? Es porque es increíble. No puedo escribir. Vamos, tecleando. Eso va a hacer. Bien, te darás cuenta de que el botón redimensionó el texto, y puedo hacer cosas geniales de squogy Mira, squdgy squidgy y el texto se queda en el medio. Todo es bueno y receptivo. Eso es Autouts y por qué nos encanta abrazarnos. Bien, vamos a saltar . Todo bien. Antes de que empecemos, simplemente no es una advertencia. Advertencias malas. Pm prom. Es Aouts son las cosas más difíciles que vas a hacer hasta ahora Y son tramposas. Pero no te preocupes. He rehecho este video muchas veces para intentar hacerlo cada vez más fácil de entender Entonces esto va a ser fácil, lo prometo. Lo que vamos a hacer es asegurarnos si aún no lo estás. Estoy en el sorteo de antes. Voy a ir a diseñar. Todo bien. Primero, vamos a acercar la página en blanco, o puedes hacerlo en la mesa Describir las herramientas de marco, el FK. Dibuja una cosa del tamaño de un botón, y vamos a darle un relleno. Voy a usar uno de mi estilo para que lo veas. ¿Bien? Entonces tenemos un marco. Realmente no pasa nada. Voy a llamarlo BTN, y este va a ser mi pequeño botón. Bien, ¿qué hacemos ahora? ¿Qué hemos hecho en el pasado? Esto no funciona para la herramienta rectángulo. Ya sabes, antes dije, oye, marcos tienen poderes especiales. Esta es una de ellas. Es el diseño automático. Así que no estés haciendo esto con una herramienta rectangular. Asegúrate de hacerlo con una herramienta de marco. Agarra mi herramienta tipo, da clic aquí y voy a escribir a estas alturas. Ahora bien, esto es lo que pasa por defecto, ¿verdad? Voy a agarrar mi herramienta de movimiento, hacer clic en el exterior y simplemente se sienta ahí, ¿verdad? Como, eso es divertido. Lo que quería hacer es cambiar el tamaño Entonces todo lo que necesito hacer es tener el marco seleccionado, no el texto en el interior, sino el padre. El padre es la cosa a en el exterior. Este es el niño. Agarra al padre, y por aquí, hay un botón que dice Autout. Es muy común usar el turno a. y bam, yo tipo de trabajo. Cambiemos el texto de B ahora a Oh, mira, se está expandiendo. Mi botón de capsoc está roto, así que tengo que mantener presionado Shift y con fuerza Gana más. Oh, se está expandiendo. Veamos un poco más porque no es del todo el tamaño que quiero. Lo que voy a hacer es hacer clic en el padre y echemos un vistazo. ¿Ves este ícono aquí? Si me quito la O afuera, ya ves, eso es lo que normalmente vemos. Ese es el icono del marco. Deshacer, rehacer, deshacer, rehacer Se puede ver el icono, hash, y luego este nuevo icono, que indica una salida automática. Hace las cosas automáticas mágicas. También tenemos algunos abrazos en marcha. Si no puedes ver las palabras abrazo, tal vez tengas que acercarte un poco. Pero lo que está pasando es que el padre está abrazando todo por dentro Eso es lo que hace lo suyo. Lo que queremos hacer es si pasas el cursor por encima de él, ¿ves aparecer estos pequeños hashes Ese es el acolchado, eso es alrededor está en el medio y ha sido abrazado por el padre que se mantiene alejado de los bordes por el acolchado. El valor por defecto será justo lo que dibujaste el tamaño como. Entonces lo que vamos a hacer es por aquí, dice relleno. También notará el panel de diseño. El panel de diseño automático era nuevo en el lado de su propiedad aquí, no estaba allí antes. Te da algunas opciones. Lo que vamos a hacer es que vamos a decir el relleno para la izquierda y la derecha. Esa es la primera. Voy a hacer ese 24 y este 18, la parte superior e inferior. Es un tamaño muy común. Tal vez usar múltiplos de ocho es bueno. Ahí vas. Podemos ir y cambiarlo. Volvamos a comprar ahora. A estas alturas, y el botón cambiará de tamaño. Lo mejor es que solo flota en el medio. Ese es un botón que cambiará el tamaño al texto en el interior Si necesitas cambiar el tamaño del botón, si hago clic en mantener presionado y arrastrarlo, lo que pasa es que rompe el abrazo Tiene un abrazo por la izquierda y la derecha y la parte superior y la parte inferior Si lo arrastro de esta manera, notarás que tiene un tamaño fijo y abraza todavía arriba e abajo, pero la izquierda y la derecha ahora son de tamaño fijo He decidido que todos mis botones van a ser del mismo tamaño porque necesitan una pila. Podría decidir que van a ser de 200 píxeles. Esa es la forma en que podrías hacerlo. Lo bueno de ello es que el botón, puede ver el texto estirado en su interior. Si lo necesitas para volver, lo que puedes hacer aquí es ver que dice redimensionar. Notarás que éste tiene abrazo ahí. Mira, puedo bajar esto y decir realmente volver atrás, no arreglar con lo que cambió automáticamente a. Vamos a abrazar contenidos otra vez. Intentará exprimirse todo el camino lo más firmemente posible al texto. Si me quito el relleno, quedará un poco más claro. Voy a tratar de exprimirse completamente a su alrededor. Pero si agregamos un poco de relleno, como 24 y ocho, intentará abrazar, pero respetará el acolchado. Otras cosas que podrían deshacerte es este texto y el interior de aquí. Debido a que hice clic una vez, automáticamente obtuve un cambio de tamaño del ancho automático Si digo, digamos, tamaño fijo cuando lo estoy dibujando y hago esto, va a funcionar, vas a estar viendo esto yendo, ¿Por qué el texto es tan alto? Yo he dicho que es este padre de aquí. Mira, está listo para abrazar, abrazar, pero no es abrazar el borde Solo tengo 24 píxeles de relleno, pero es más grande que eso. Es porque el cuadro de texto. Si hago doble clic se establece este ancho fijo, o altura automática. Pasemos a este primero de aquí, que es autowidth. El cuadro de texto en sí es automáticamente del tamaño correcto y el padre se abraza porque le gustan sus Eso es auto out. Hace muchas otras cosas. Pero por el momento, creo que esa es una buena introducción a las salidas de Audi. Y si necesitas cambiarlo para que sea un tamaño específico, simplemente arrástralo. Bien, y si necesitabas regresar, vuelve cambiarlo a abrazar. Bien. Ojalá, eso no estuvo tan mal. Los auto lauts son súper potentes dentro de Figma. Ahora voy a ir y hacer que mío tenga un radio de esquina de ocho, y quiero escuchar por alto, ir al suavizado de esquina, solo para hacerlo no sé, más IOS Eso es. Ese es un botón de diseño automático dentro de Figma. En realidad, una cosa más, si usas la herramienta rectángulo, ni siquiera obtendrás la opción convertirla en un diseño automático. No quiere hacerlo, así que debes comenzar con un marco. Bien, eso es otra vez. La final final. Te veré en el siguiente video. 63. Proyecto de clase 12: Botones: Bien, es tiempo de proyecto de clase. Quiero que ates los botones que creaste antes, que podrías haber hecho con el marco o rectángulo y empezar de nuevo y hacer botón de diseño automático Quiero que hagas tres de ellos. Va a haber dos en la página principal. Quiero que esos sean los botones de abrazar. Los que cuando escribes se estirarán. Y luego en la página de pago, quiero que crees un botón de compra. Y quiero que este sea un botón de ancho fijo. ¿Bien? Eso quiere decir que no se abraza ni se expande. Es específicamente de 250 por 50 píxeles. Te voy a mostrar. Entonces estos dos botones de aquí, bien, ese tipo y expanden y este de aquí en nuestra página de confirmación es un alto y ancho específicos. Usaremos esto más adelante en el curso. Ahora Figma ha cambiado para ser mucho más fácil por defecto. Cosas con las que podrías encontrarte en términos de problemas es ante todo, recuerda, no puedes usar un rectángulo, no puedes encontrar la manera de convertirlo en un diseño automático. Bien. Si hago un marco, es más fácil puedo hacer un autout. Tiene un color, pero está bien. Puedo ver este marco de salida automática. Las cosas que te pueden causar problemas están por aquí. Es posible que hayas ajustado tiene que ser contenido abrazo, tanto la parte superior como la inferior para ese botón de abrazar que se expande, y el otro es la alineación Podría terminar con una alineación en la parte superior izquierda de mi herramienta de tipo ahora. En realidad, vamos a colorearlo. Vamos a llenar de color. Agarremos mi herramienta tipo para el Tiki. Voy a escribir en él, escribir en él. La otra cosa es que no encontrarás las opciones de Autout si estás trabajando con el tipo No el niño, necesitas estar trabajando con un marco padre. Si no está ahí también, eche un vistazo por aquí. ¿Se convierte a este icono de Autu o sigue siendo un marco? Si todavía es un marco, haga clic en él para autoout, y luego debería obtener estas opciones. Abrazo, abrazo, en términos de alineación, especialmente para tu ancho fijo uno, podrías terminar con algo que tal vez esté arriba a la izquierda. Puedes ver esta alineación aquí. Por defecto al centro ahora, nunca solía hacerlo. Eso es una cosa que te podría arrojar. El otro es el relleno a la izquierda y a la derecha. Realmente no importa para un botón estirado como este que quiero hacer aquí, el de ancho fijo, pero sí importa cuando quieres que se abrace. Si lo abrazo y lo abrazo, y el relleno se pone a cero y cero, obviamente hace eso. Cuando lo hago para este botón, ese es un ancho fijo. Recuerda que solo está configurado en fijo. Lo puse a 250. Si hago que el relleno de la izquierda y derecha baje a ocho, ¿notas que realmente no cambia nada? El relleno sí cambia, pero como tengo un ancho fijo, realmente no importa. Si lo hago 120, Oh, que sea 250. No hace nada. Pang no importa. En una caja fija. Ahí vas. Así que haz tus botones, y quiero que me envíes una captura de pantalla de solo este grupo de aquí. Entonces está en tus archivos de ejercicios. Envíame el grupo de la misma aquí. No voy a poder verificar con tus botones funcionando o no. Háganos saber en los comentarios si se está metiendo en problemas y si lo arregla, y vea si puede responder a las preguntas de otras personas, bien háganos saber cualquier problema con el que se haya topado. Cambian la forma en que funcionan los diseños de auto para hacerlos más fáciles. Este solía ser un video realmente complicado aprendiendo esto. Seguro que aún quedan algunas peculiaridades y estaré revisando los comentarios Todo bien. Haz algunos botones. Te veré en el siguiente video. Oh, una última cosa. No hace falta que vea este en las redes sociales porque todos van a tener los mismos botones. Yo sólo iba a decir a estas alturas y más en diferentes colores. No muy emocionante. Subirlos a la sección de proyectos seguro, y veremos tus botones un poco más adelante en un diseño más completo, más completo e impresionante Eso es. Te veré en el siguiente video. 64. Disposición automática para la navegación de espaciado en Figma: Uno. En este video, vamos a usar Auts. mismo tipo de características que el último video, pero vamos a usar múltiples cosas dentro de un louts porque hace bastante genial así Puedo mover las cosas. Este tiene acolchado alrededor del exterior que puedo ajustar como nuestro botón. Se puede ver la parte superior y la parte inferior ahora son 50. Es masivo. Todo se ajusta. Puedo jugar con un relleno. Puedo jugar con un hueco en el medio. Puedo hacerla dos pixeles, muy apretada. Puedo decir, Bien, no necesito esta pila. Quiero que tenga razón, y voy a volver a aumentar la brecha. También lo vamos a hacer con este botón donde decimos: Bien, es un botón que se expande, pero también tiene un icono ahí dentro. El icono puede estar a ambos lados y se expande y hace cosas geniales de Arooudy Me encantan las salidas de autos. complicados si eres nuevo en todo. No te preocupes, lo vamos a hacer algunas veces a lo largo de este curso, pero son demasiado útiles. Bien, vamos a saltar y hacer salidas automáticas para espaciar en nuestra navegación. Infigm. Oh. Todo bien. Para comenzar, he dibujado algunos cuadros de texto con textos en él. Esto es solo una línea usando la herramienta de línea, y yo tengo estos. Realmente no importa dónde se encuentren. Voy a moverlos solo por diversión. Tienen que ser cajas separadas para que toda la bondad autolou funcione Lo que hemos hecho en el pasado es poner primero un marco, luego poner texto adentro, luego convertirlo en un Autout. Puedes ir al persecución, y puedes seleccionar todo esto. Y si digo que sea un autolout tal vez tengas que desplazarte hacia arriba y hacia abajo, esto se está volviendo bastante grande en este momento Esté atento al panel de diseño. Así que conseguí que todos los seleccionaran. Si hago clic en este botón de aquí, lo envolverá en un marco para nosotros automáticamente y convertirá ese marco en Auto. Cuidado en el panel de capas aquí. Voy a hacer clic en el botón no sé por qué hago esos ruidos Lo puso en un marco. Se llama frame 19. Voy a llamarlo Nav y convertí ese fotograma en un auto ruidoso. Aún puedes hacerlo de otra manera. dibujar un marco y agregar este texto dentro de él, luego convertirlo en una salida automática. No importa. Lo que intenta hacer es que podría tener a todos ustedes centrados dentro de él. El mío está a la izquierda, solo intenta hacerlo automáticamente. No te preocupes por eso por el momento. Veamos algunas de las ventajas para el auto out. Una de las cosas porque es un marco, puedo seleccionar el padre y decir, quiero que el padre, scroll, scroll scroll tenga un color de relleno de uno de mis colores secundarios. Es igual que el botón. El botón aquí, hemos hecho lo mismo excepto que tenemos un montón de cosas en él. Una de las ventajas de ese botón es que conseguimos agregar relleno. Vamos a encontrar el relleno scroll, scroll, scroll. Ahí está ahí, voy a poner 16 y ocho. Ahora, podrías haberme visto en otro video. Olvidé mencionarlo. Yo sólo tabulé. ¿Puedes ver si tabulo solo pestañas a lo largo del menú? Muy a menudo hago esto 24 tab 16 para ahorrar tiempo. Estás como, ¿qué le pasó? Estaba funcionando. Ahora no lo es. Hay un par de cosas que tenemos que hacer. Vamos a revisar las cosas que podrían estar causándonos problemas. En primer lugar, el padre, el Nav, ¿está listo para abrazar? ¿Está abrazando todo por dentro? No está establecido en un ancho fijo. Ya ves que éste se está abrazando, éste no lo es. Voy a decir, abraza todo dentro, por favor, y eso podría arreglarlo todo. Normalmente lo hace. Podría tener otro problema de cómo creaste los cuadros de texto Si creo un cuadro de texto y lo arrastro y escribo en home, tal vez solo tengas la costumbre de hacerlo desde otros programas y lo dupliques Es de ancho fijo o podría ser una altura automática. Para que esto sea todo receptivo y bueno, que configurarlo a este primero, que es ancho automático, ahí tienes. Eso solo significa que no es un ancho fijo. Yo me expandiré y contrataré también. Eso es algo por lo que quizás tengas que pasar y revisar este. Aquí se establece en altura fija. Vamos a esta. Este tipo aquí quiero ser auto ancho también. Este tipo de aquí, y este tipo de aquí. No es texto, así que no tenemos que preocuparnos por ese. Es sólo una línea. Hemos hecho una caja, con relleno. Excelente. Algunas de las otras ventajas para un diseño automático es reordenar Como selecciones inteligentes y ordenar. Lo que podemos hacer es que podemos decir, quiero que estés en la cima ahí. No tuve que seleccionar en absoluto para hacer un grupo como selección inteligente. Sólo puedo moverlo por ahí. Puedo usar mi rastrillo para bajar, bajar. Puedo duplicarlo como lo hice antes. Comando o Control D. ¿Bien? Va a agregar uno extra, y el auto out se expande y se contrae. Tan genial para menús y listas. Puedes cambiar el espaciado pasando el cursor por encima de él. Simplemente puedes arrastrarlo o por aquí, puedes ser un poco más específico. Esta es la brecha aquí. El hueco apareció cuando estábamos haciendo el botón, pero nada no había huecos. Entonces voy a hacer mis múltiplos de ocho y voy a ir 24. Bonito. Vamos a darle la vuelta para hacerlo. Otro beneficio para el Auto out. Digamos que tenemos este para nuestro diseño móvil, pero queremos éste, voy a hacer un duplicado de él para nuestra página de inicio. Aquí arriba, ¿puedes ver el flujo? Se incumplió una vertical porque era nueva. Yo quería ir horizontal. Ah. En eso. Y lo que podría hacer aquí es eliminar esta, y agreguemos en una barra que sea como arriba y abajo. Así que vamos a agarrar la herramienta de línea. Voy a dibujar este. Voy a asegurarme de que sea de un pixel. Probablemente sea un poco alto. Entonces voy a hacer el mío 24. Se escapa de nuevo a la herramienta de movimiento. Y lo que puedo hacer es simplemente tirarlo ahí dentro. Mira, increíble eh. Eso me encanta de verdad. Simplemente tirándolo a la salida automática y se ajustará de alguna manera. He hecho menos ancho específico. Voy a decidir, en realidad, no quiero que sea un ancho fijo. Lo siento, quiero que sea abrazo. Entonces ahora se abraza, y me da esta flexibilidad ahora para cambiar el texto y todo se vuelve Empiezas a ver las ventajas de las salidas automáticas, podrías simplemente alinear esto en la parte superior No tienes que usar un Auto out. Podría ser un rectángulo con tipo en la parte superior y haces que los enlaces funcionen, seguirá funcionando perfectamente para una cartera, pero vas a obtener muchas plantillas de otras personas y se van a configurar para ordenar y vas a enloquecer después de un tiempo, comenzarás a usar salidas automáticas también porque estás como, es más fácil convertirte rápidamente en un ordenar hacia fuera. Lo genial de esto es exactamente el mismo principio que se aplica cuando digo, voy a copiar esto, así que voy a ir aquí, copié y lo pegué y terminé de nuevo en esto Voy a sacarlo. Lo que quiero hacer es agarrar eso. Voy a traer un icono. Vamos a ir a aquí. Vamos a los íconos, conífiquemos, vamos a agarrar un botón de inicio Alguien en casa. Yo gané. ¿Cuál? Escoge uno hacia abajo, elige uno ese, uno redondeado. No me importan todas esas tallas. ¿Acaba de aparecer? No lo voy a arrastrar. Aquí está ahí. ¿Qué tamaño es de 24 por 24? Suena bien. Voy a alinear estos. En realidad, no tengo que hacerlo. Vamos a cerrarlo. Vamos a agarrar a estos dos. Voy a convertirlo en un auto out, que lo arroja a un marco y también hace un auto. Estás como, oh, está haciendo lo de Huggy. De nuevo, ahora puedo bajar a mi lugar para que veas lo que estoy haciendo. Vayamos a mis muestras reales. Vamos. Esto es práctico. ¿Ves que he cambiado el relleno al padre Llamemos a esto un botón de inicio. Bien, llamémoslo BTN a casa. Aquí nos vamos con un poco de tangente. No planeé esto, pero creo que este es otro buen ejemplo. ¿Bien? Tengo este seleccionado, el padre. Está fuera. Tiene un par de cosas dentro. Las cosas que he seleccionado tienen un color primario y ahí hay algo de negro. Voy a decir que todo lo que es negro dentro de mi selección va a ser blanco ahora. Fresco. Empiezas a ver que estás como, oh, estamos haciendo un botón. Vamos a añadir un poco de relleno a nuestro botón, así que un poco de relleno, 16 y ocho. Agreguemos esquinas redondeadas porque estoy enamorada de ellas. Estás como, Oh, eso me gusta. La brecha en el medio. Hagamos ese ocho también. ¿ Ves que se encoge? Eso. Es un botón de inicio con un icono. Mira esto. Si hago clic en el icono de inicio aquí, puedo decir, ok. Se mueve alrededor. Voy a deshacer eso. Y si cambio esto a otra cosa. El botón se expande, el icono juega a lo largo. Básicamente estamos hechos exactamente lo mismo aquí. Este es un auto out que estamos usando para un menú. El botón es lo mismo que hicimos en el último. Pero como tenemos múltiples cosas ahí dentro, obtenemos esta amabilidad donde podemos mover las cosas Es un poco más flexible. Se expande y se contrae. Podemos jugar muy bien con el espaciado. No tenemos que alinearlo y arrastrarlo a través de unos pocos píxeles y luego medirlo. Todo se hace a través del Auto layu. Rompe una auditoría, simplemente haga clic en el botón otra vez y ahora vuelve a ser un marco que pasa a tener un icono con texto, y puedo hacer cosas, pero acaba de perder toda su bondad de diseño automático. Puedo configurarlo ahora, hacer un auto out. Quiero volver a cambiar mi acolchado a ocho, y volvemos a estar en el negocio. Espero que estés empezando a ver las ventajas de los autolouts. Una cosa que sí le dio problemas a algunas personas la última vez que hice este video es que lo copiaron y lo pegaron y terminó afuera de aquí Ya sabes, no va a entrar. Es bastante fácil arrastrarlo. Pero a veces por aquí, QC, ahí están mis características, y ahí está el Nav en el que estoy trabajando. Simplemente puedes arrastrarlo dentro de él. También puedes hacer esto para reordenar. Si quieres que las características estén por debajo del precio, cámbiala aquí y se actualiza en el menú aquí. De cualquier manera. Todo bien. Espero que haya sido de ayuda. Qué salidas para hacer cosas de espaciado y navegación. Todo bien. Te veré en el siguiente video. 65. Cómo usar las restricciones en Figma: Hola a todos. En este video, vamos a ver algo llamado restricciones. Básicamente, vamos a hacer esto al final. Ves que la navegación se queda en la parte superior derecha, el logo se queda ahí, te puede mover. Todo es lo que llamamos responsive. Se llaman restricciones dentro de Figma. Voy a hacer algunos niveles diferentes. Va a ser modo fácil. Eso es todo lo que realmente quiero que hagas. Esto es lo esencial. Medio duro y súper mega duro hacia el final ahí solo para las personas que son capaces y para que podamos hacerlo temprano y lo haremos unas cuantas veces más adelante en el curso si no consigues algunas de las partes más complicadas. Pero hagámoslo todo ahora. Vamos a saltar. Todo bien. Vamos a configurarlo en modo fácil para empezar. Acabo de mover todo hasta el fondo. He dibujado una elipse y he traído el logo de la otra página Restricciones ya aplicadas. Ni siquiera tenías que preguntar. Esto representa nuestra navegación en la parte superior derecha. ¿Es un puntito, solo dejándote ver los puntitos aquí? Estos puntos son las restricciones. Está constreñida a la cima y a esta tierra mágica de aquí a la izquierda. No todo el camino a través, solo tamaño aleatorio. En realidad, es el top size justo por aquí. ¿Puedes ver izquierda y arriba? Cuando lo redimensiono, solo trata de usar el lado izquierdo. Lo que quiero decir es, oye, amigo, quiero que te quedes al lado derecho. Puedes usar el menú desplegable o este menú aquí. Puedes ver que cambia ambos. Quiero que uses la parte superior y la derecha como tu punto de referencia. De esa manera, puedo decir caja de características, que lo que le pasa al punto. Mira, él se queda. Él es pegajoso, y va a estar a esa misma distancia. Es realmente útil. Deshacer eso. Ideal para navs superiores. Echemos un vistazo a este tipo de aquí también. Puede que no hayas hecho lo mismo el tuyo, pero este es solo un buen ejemplo que quiero mostrarte. Si cambio el tamaño de este marco padre, esta tarjeta, mira lo que pasa Zuk pero si te digo, botón pequeño plus. Tu restricción no se deja porque eso no me está funcionando , a la derecha. Después vuelvo a agarrar el marco de los padres. Se llama tarjeta uno, y la rehago. Juju. Ajá. Tú eres como, ¿quién? En realidad, eso es bastante genial. Bien, ese es el nivel uno. Estamos listos para ir al nivel dos. No es mucho más difícil. Es como medio. Puede que el tuyo no lo esté haciendo, pero échale un vistazo. Te quiero dar un roto, por ejemplo porque va a pasar. ¿Puedes ver mis logotipos haciendo cosas raras? Esta cartera aquí tiene su propio top y se deja y va hasta aquí. La palabra Scott va un poco más allá dentro de aquí. Ves que este tipo tiene su propia izquierda. Lo mismo con este tipo va un poco más allá. Por eso todos están haciendo cosas diferentes. La manera más fácil de evitar esto es decir, Oigan , chicos, quiero hacerte una unidad y conseguir que todos hagan lo mismo. En el momento en que son piezas separadas. Te puedo decir, amigo mío. Voy a hacer click derecho. Voy a decir que podrías agruparlo o enmarcarlo realmente no importa, pero los marcos tienen más magia. Vamos con la magia es por defecto a la parte superior y la izquierda. Por el momento, va a llegar hasta aquí. Si lo acercas al borde, irá, ¿te refieres al lado izquierdo? Eso es lo que queremos para nuestro logo. Voy a decir que le echemos un vistazo. Ahí, estás ahí listo, Juuchu si voy de este lado, mira, jarra uji No estoy seguro de por qué viene ese ruido. Jarra. En fin, esas son limitaciones. Puedes conseguirlo restricción al fondo hagámoslo para este botón aquí. Voy a copiar esto. Voy a ir por aquí y voy a ir a una herramienta de marco, voy a recoger un teléfono iPhone 16, ponerlo alineado, pegar a este tipo en, y voy a decir, ver el valor por defecto para él es arriba y abajo. Pero digamos que quieres que esto siempre esté en el lugar aquí. No va a funcionar. Teléfono de diferente tamaño, se fue. Lo que puedo decir es a ti, amigo mío, de abajo y a la izquierda. Ahora, ¿mira esto? Chuk Chuk. Está pegado al fondo. ¿Andy? Mira esto. Izquierda y derecha. Todavía no está en el medio. Se pega a la izquierda. Imagínese si aquí hubiera uno que no fuera solo a la izquierda o a la derecha, sino a la izquierda y a la derecha. Mira esto. Ahora estás fijo en la parte inferior ahí. Mírennos. Lo estamos haciendo. Esas son limitaciones, y esa es la versión media. ¿Listo para el duro? Vamos a agregar un auto out a todo este lío. Apaga si ya estás lleno. Lo que voy a hacer es que voy a agarrar, tengo algunos botones más aquí abajo, colocarte aquí arriba. Tengo múltiples objetos aquí arriba para mi navegación. Y por defecto, echemos un vistazo, jarra jarra. Los morados trabajando. Los otros chicos están haciendo todo tipo de locura. Al igual que el logo, te puedo decir . Voy a ordenarlos primero. Tal vez alinearlos. Voy a agregarlos a un marco. Voy a decir enmarcar esa selección. Por defecto, va de arriba a la izquierda, pero yo digo, quiero que seas el correcto, amigo. Ahora tenemos esta navegación que tiene muchas cosas en ella que se mueve y se conectará a la cima. Estamos haciendo navegación ahora, pero encontrarás muchas instancias como este botón más, donde hay momentos en los que necesitas grupos para que se adhieran a un área. Todo bien. Nivel máximo duro. ¿Estás listo? Voy a agarrar mi herramienta de marco y vamos a hacer una navegación en la parte superior. Esto se está poniendo duro. Probablemente no debería incluirlo. Lo voy a incluir para los pocos de ustedes que me guste. Esto está haciendo el bien. Si la mente está derretida, eso es bueno. Las restricciones te causarán problemas si no sabes que están ahí, especialmente cuando eres nuevo usando el trabajo de otras personas, tal vez solo tengas que pasar y pasar, bien, ¿qué está pasando Restricciones, aunque no sepas por dónde van, solo empieza a romper estas e intentaré a la izquierda Voy a intentar bien. Voy a probar una báscula. Podrían darte el resultado necesitas porque tal vez el diseñador antes que tú y la plantilla se han ido un lío con ellos para que sean de ayuda, pero no te está ayudando. He dibujado una navegación por defecto, porque la dibujé sobre mi logo. Voy a nombrar cosas, mi logo, y mis, círculos. Aquí hay marco, están todos adentro. Quizá tengas que arrastrar el tuyo si no trabajas, voy a darle un relleno. Me voy a ir. En realidad, voy a ir a mis colores. Voy a usar esa. No, eso es feo. Voy a ir a esa. Mi logo no se puede ver, así que voy a dar click sobre el logo. Esta no es la parte difícil. Esto está fastidiando. El morado no puede ser rojo. Entonces con su seleccionado. Todo en ese marco, ahí están todos los colores seleccionados que tengo. Quiero cambiar el morado, por favor, a blanco. Voy a moverlo para que quede mejor. Quiero que ustedes se acaben un poco. Echemos un vistazo. Por defecto, esta navegación es realmente genial. Si lo agarro y hago lo que tenemos tenemos un teléfono, hagamos una versión tablet. Digamos UR iPad Mini. Si pego esto y necesito hacerlo más pequeño ahora para este otro trabajo, ¿ves? míranos. Hicimos cosas. Hicimos una navegación que puede ir en diferentes páginas y escala. Todo se pone en la posición correcta, súper práctico. Ese es el nivel máximo duro. No, no lo es. Hay un nivel extra duro. Yo aprendemos auto outs. ¿Funcionarán? Oh, no, hay dos niveles extra duros. Una es que bien podría ser una salida automática. No va a cambiarlo mucho excepto que puedo hacer cosas geniales donde pueda entrar dentro de ella, y moverlas. Bien, así que los diseños de pedidos son útiles de esa manera. Puedo jugar con el relleno mucho más fácil, click off, doble click back on para conseguir justo este grupo de estos chicos y puedo decir, ustedes son un hueco de ocho. Ellos ordenan en. El nivel súper máximo es este. ¿Qué pasa cuando agarro el exterior de esto? ¿Puedes ver a Juke? Estás como, ¿no acabamos de hacer eso receptivo? Hicimos esto y todo lo que hay dentro de él receptivo, ya que en le pusimos las restricciones adecuadas , así que esta cosa funciona. Pero el exterior con el que no nos metimos. Lo que vamos a hacer es atarlo. ¿Estás listo? Tiempo de fusión cerebral. Hemos aprendido lo que hemos aprendido, bien, bien, hemos aprendido de arriba. Hemos aprendido por aquí, hemos aprendido de izquierda a derecha. ¿Bien? Donde esto se tensa a ambos lados. Ahí está el último, que es este tipo. En lugar de estar arriba a la izquierda, que es por defecto y no funciona, arriba está bien. Quiero que izquierda y derecha sean escala. Eso significa que esta navegación va a escalar al padre, que es mi página de características. Vamos a darle un gook chuck. Esto es como un inicio donde mis círculos, se están pegando a la parte superior y derecha del marco padre, que es el NAV. El nav a su paraframé está escalando. Aquí hemos hecho un par de cosas diferentes. Sé que es confuso, hombre. Estoy tratando de Uh, va a ser un poco de práctica. Lo volveremos a hacer en el curso. Quiero poner todas las restricciones en un solo video. Si lo único que te quitas es que existen restricciones y que puedas mear con ellas. A veces eso es todo lo que necesitas. Yo hago eso a veces. He abierto el documento de alguien, estoy como, Oh, ¿qué tiene de malo esta cosa? Simplemente hago clic en las cosas, averiguarlo, empiezo a cambiar las restricciones, y trato de tener un sentido para, como, bien, eso tiene sentido Bien. Estaba mal, y ahora lo he arreglado. ¿Esto fue útil? Eso espero. Te veré en el siguiente video. Hagamos las cosas más fáciles. En realidad, tal vez otro ejemplo sería útil. Sí. Hagamos otro ejemplo. 66. Combinación de marcos anidados y restricciones de diseño automático en Figma: Hola. Oye, vamos a hacer otro ejemplo de restricciones solo para meterlo ahí y te voy a mostrar un caso de uso diferente. Además, lanzaremos un diseño automático para que podamos practicar eso también. Nosotros con estos. Lo genial de estos es mirar, barajan y se mueven Puedo agarrar a uno de estos tipos, ir a mi dispositivo móvil, pegarlo y decidir, Bien, aquí tiene que tener un tamaño diferente, y el texto se puede cambiar Aquí tienes. Como hicimos en el último ejemplo. Pero ahora solo otro ejemplo. Vamos a practicar. Vamos a saltar. Todo bien. Reconstruyamos una versión fácil de estos. Estos son un poco más complicados conseguir receptivos. Entonces hagamos algo sencillo, solo como un buen ejemplo. Voy a ir a Shift G para encender mis cuadrículas. Puedes desplazarte hacia abajo y deberías encontrar si hago clic en características, deberías encontrar tus cuadrículas ahí abajo Puedes encender y apagar el globo ocular. Voy a agarrar mi herramienta de marco en lugar de un rectángulo porque originalmente estos tipos eran ¿qué eran? Oh. Eran marcos. Siempre es mejor cuando estás creando algo a propósito con diseños de auto y restricciones de anidamiento, es que solo los construyes desde cero. Tratar de reutilizar algo siempre termina mordiéndome en el trasero. Voy a crear un marco. Va a ser de cuatro columnas de ancho. Voy a darle un color de relleno de mis muestras. Escojamos éste. No, escojamos algo más ligero. Voy a apagar mis cuadrículas Shift G. Bien, entonces lo que quiero hacer es agregar mi texto abajo a la derecha como viste al principio Voy a agarrar mi herramienta de marco. Voy a poner un marco dentro de un marco. Lo llaman anidación. No hace falta que lo recuerdes, pero este marco está dentro de éste. Voy a darle un relleno de color negro. Voy a hacerlo. Quiero alinearme por la parte inferior. Ahí. Sabemos que si cambiamos tamaño de este para nuestro dispositivo móvil, realmente no funciona porque si selecciono en este marco, es decir arriba e izquierda No quiero que sea de arriba a la izquierda. Quiero que esté a la derecha y va a funcionar. Agarra el marco padre, y funciona, pero no hace el fondo. Oh, yo hago clic en ese tipo. Puedo decir abajo y derecha. Ahí vas. Ahora puedo cambiar el tamaño de esta cosa Tengo mi cajita de texto aquí o un pequeño bar en el que voy a poner mi texto dentro. Hagámoslo. Pongamos el texto dentro de él. Agarra el Tipo dos, y vamos a hacer clic dentro de este tipo y vamos a ir a. No recuerdo las palabras fueron, qué palabras utilizo. Esto va a copiarlo RFID y lo voy a poner en mi cuadro de texto que probablemente ha desaparecido Si no usas tu cuadro de texto, se va, lo cual es práctico Escriba dos, haga clic en Pegar, voy a hacer mi fuente más pequeña. Mía 16, y voy a agarrar mi herramienta de movimiento, moverla por ahí. No, haz click off, agarra toda la caja, y la voy a meter en una viñeta. Hay un atajo poniendo viñetas. Si lo pones en un guión en un espacio, simplemente automáticamente hace una bala, o podrías seleccionarlo e ir a tu tipografía opciones extra y decir, quiero que sea una Eso ya lo tengo. Quiero que sea sobre esto lejos de este sitio, voy a usar mi flecha. Aquí es donde estás como, Bien, ¿ deberíamos estar haciendo alineándolo así? ¿Puedo conseguir que salte al centro? Ahí es donde un auto out es súper útil. Ese miembro del ejercicio de botón hizo la caja a su alrededor. El botón se expande y contrae y podemos jugar con relleno. Hagámoslo. El padre de este cuadro de texto, vamos a darle un nombre. Llamemos a esto un bloque de texto. Bien. Ahí está mi texto dentro de él. Esta cosa de aquí es negra, y solo quiero cambiarla a un cuadro automático. Se envuelve alrededor de mi texto. Tiene relleno. Solo asegúrate de que siga funcionando. Tan solo sigue revisando a medida que avanzas. ¿Sigue funcionando? Si no tiene sólo doble comprobación. Tengo el marco, no el texto seleccionado. Quiero el fotograma seleccionado. Quiero asegurarme en este caso, quiero que sea correcto y abajo. Eso es perfecto. Lo genial esto es porque es un cuadro automático, es devolting para Bien, si cambio esto a mi otro, alejemos el zoom. Vamos a agarrar otro, Shift G de mis marcos, agarrarte. Tengo una segunda. Yo tampoco quiero cambiar esta. ¿Cuál es nuestro otro texto? No puedo recordar. Voy a arreglar eso en un rato. Mi caflock aún está roto. Vas, se redimensiona porque es un cuadro automático y se dice que se abraza Si no lo hace. Si solo está cambiando y podría decirse que arregle, para que cuando lo cambie, no cambie. Eso podría ser lo que quieres. Estarás arreglado. Sabes que tienes cierto tamaño de personaje y quieres que todos tengan el mismo aspecto. Eso es lo que quieres. Esto trae a colación un buen punto. Esto ahora está en el centro de esto. El centro. Quiero escribir un alineamientos encuentra lo que quería por aquí. Lo que quiero decir es este padre de aquí, todo dentro de él, recuerda la alineación, está por defecto al centro. Puedo ir a la derecha. A veces lo hace por defecto a la derecha como en la correcta porque se inclina hacia un lado Intento hacer cosas automáticas. Voy a decir este padre de familia, todo dentro de ellos está alineado a este sitio aquí. No va a importar si lo has dicho para abrazar. Si voy a abrazar, está a la derecha, pero en realidad no importa porque es abrazar Sin espacios alrededor de él Entonces voy a decir centro, y quiero que sea un ancho fijo. ¿Qué ingenio es éste? Este es el 215. Entonces voy a decir, Oh, no, eso no lo fue. A veces me confundo con el posicionamiento y el ancho. ¿Eso le pasa a todos? Ahí está el ancho, 177. Entonces voy a decir son 177. ¿Es 177? Voy a alinearlo. Y deberíamos estar bien para irnos salvo que quiero que esté alineado. Una cosa que te puede resultar complicada es que si tienes una fuente, trata de ponerla en el medio real. Si tienes una fuente extraña o una viñeta extraña, a veces las viñetas pueden ser un poco extrañas. Algunas fuentes terminan teniendo una brecha realmente grande por debajo de esta altura X y por encima de estos ascendentes, estas letras mayúsculas, tal vez tengas que jugar con el relleno del padre. Quizás tengas que decir, en realidad, de momento, está haciendo arriba y abajo 11. Puede que tengas que entrar aquí y decir, bien, esto lo divide y decir, derecho, arriba es solo diez y el inferior es 15 porque tienes que hacer un acolchado elegante para que la fuente parezca que está en el Lo noté en algunos de los proyectos de clase. la gente le preocupaba eso. Todo bien. Lo último que voy a hacer es voy a verte, voy a hacer otra. Voy a agarrar súper rápido todas estas cosas. Oh, voy a detenerlo ahí porque este es un atajo avanzado, solo un atajo genial. Estoy copiando esto por aquí y si copio todo esto, ¿qué pasa? Pegar viene a través como el estilo de ese original. Tienes que ir a cambiar el tamaño es un poco de pintura. En lugar de simplemente hacer tu pasta regular, funciona en todos los programas, no solo figma, Word Docs, Google Docs Si presionas Comando Shift paste o Control Shift paste, lo pegará como solo esta materia prima y coincidirá con ese tipo de estilo que tengas. También he averiguado que tener un ancho fijo me está causando problemas aquí. Sólo voy a decir rastreable. Ahí vamos. Fijo. Lo último que voy a hacer es agregar algunas imágenes a estos marcos. Voy a hacer click en el color aquí y voy a ir a la costumbre. Si tiene un estilo como lo llamas aquí, no quiere que hagas cosas. Entonces hago click en esto, estás como, ¿dónde está mi cambio a imagen? Yo sólo puedo ir a la costumbre y después ir a la imagen. Entonces voy a hacer eso. Voy a subir para computadora. Voy a elegir a uno de estos tipos. Ese es el que quiero. Voy a agregarlos. Ahí vas. Adición de imágenes. Hagamos el modo de velocidad para estos dos. Entonces metí mis imágenes y donde esto se pone súper increíble es si las agarro, voy a mi dispositivo móvil y digo, las voy a pegar aquí, meterlas en el marco, y voy a decir, Bien, aquí vamos Yo los tengo adentro. Puedo redimensionarlos para este dispositivo diferente, todo redimensiona Las imágenes están establecidas para llenarse por defecto. Estos tipos tienen sus limitaciones en la parte inferior derecha, e hice algunas cosas elegantes donde fui y dije: Bien, todo este marco aquí está configurado para el diseño automático Sé que esto puede ser un poco confuso. Lo bueno del diseño automático es que puedo ajustar el tamaño de la fuente. Vamos a bajar el tamaño de la fuente o más grande para el móvil, y el marco padre alrededor voy a tratar abrazarlo porque a la maquetación automática le gusta abrazar. Es un abrazador. Espero que eso haya sido útil para ver algunos otros casos de uso de restricciones y combinamos ahí un diseño automático, solo para que podamos hacer el texto. Incluso si eso es cosas de salida automática es tal vez combinar esto es demasiado, solo usa las restricciones. Solo tienes una caja de ancho fijo. No nos estiraremos y nos haremos más grandes. Solo usa los diseños de auto para tal vez los botones donde tal vez tenga un poco más de sentido y separe. Pero de todos modos, espero que haya sido de ayuda. Pasemos al siguiente video. 67. Proyecto de clase 13: diseño responsivo: Proyecto de clase número 131010. Dum dum, dum. Esta es una complicada. Los laustrits de autos son bastante difíciles Entonces hay un proyecto de clase para que puedas practicar. Básicamente, lo que ya hemos cubierto en la clase ya es navegación de escritorio y algunas tarjetas de características que quiero que construyas. Para la navegación de escritorio, quiero que construyas un nuevo Nav que tenga estas características en él. Echemos un vistazo. Quiero que vayamos a escritorio Hi Fi. Lo que he hecho es que he duplicado la página de inicio original y acabo de llamarla vieja. Después fui y construí un nuevo Navel en la parte superior y algunas nuevas tarjetas de características Simplemente no lo sé, le pusimos algo de trabajo en eso. Voy a dejar eso ahí. Quiero tu navegación superior. Lo principal es asegurarse de que haga esto, que se aplaste y se ajuste También sé genial. No he definido esto y realmente no puedo comprobarlo de todos modos es que esto es un tout, así que puedes hacer estas cosas bonitas También verás que uno de los iconos o uno de los textos es en realidad un icono. Esa es la tarjeta. He escrito esto en los proyectos de clase, creo lista de texto para nuestro Nav, tarjeta de características de inicio y cuenta y solo asegúrate de que la tarjeta sea un ícono. Se puede dibujar. Se puede obtener de un sitio de iconos gratuito. Se puede obtener de un plugin, no me importa. Quiero que también crees Nav para el móvil. Esto va a ser un poco diferente y bastante fácil porque vamos a ir al móvil hi fi, y vamos a recrear un nav que es bastante diferente Sólo tienes que tirar las líneas estropadas, el menú de hamburguesas, el sándwich Nav porque no podemos caber todos los textos Por eso tenemos a estos chiquitines. Simplemente pon el logo y el nav estropado ahí a lo largo de la parte superior en una caja También tiene que ser receptivo. El mío no lo es. Pero el tuyo tiene que serlo. Esa pequeña línea estroboscópica necesita pegarse la parte superior y la derecha. Después las tarjetas de características. Son solo una copia y pega el uno del otro para que puedas redimensionarlos. Quiero que los móviles hagan esto. Donde puedes cambiar el tamaño de ellos, moverlos, y ellos ajustan lo mismo en el escritorio aquí. Hacer nuevos. No tienen que verse exactamente como los míos. Quiero algo en el fondo justo aquí para que haga estas cosas bonitas y blandos. Una cosa con la que podrías tener problemas es si copio esto porque primero diseño en móvil o escritorio, no me importa, lo copio y si voy a Wi Fi Hi Fi y de hecho voy al móvil Hi Fi y solo lo pego en esta página aquí. Estás como, A, voy a conseguir que esto se mueva. No se mueve. ¿Por qué no? Veo el nombre que es un sorteo. En realidad no está dentro de la caja. Puedo intentar arrastrarlo. ¿Eso funcionó? Entró. A veces no lo hace. Lo que puedes hacer es cortarlo, dar click en checkout y luego pegarlo y le da a figma una pizca de, él lo quiere aquí Entonces puedes empezar a jugar con él. A veces eso puede atraparte tratando de entrar en el lugar correcto. Cortarlo, pegarlo es probablemente la manera más fácil de hacerlo. Puedes arrastrarlo en las capas, pero estas capas se están volviendo bastante masivas ahora, así que es un poco más difícil. Entonces eso es, y luego una vez que hayas terminado, toma una captura de pantalla, sube tanto de tu página de inicio en tu escritorio como de tu móvil y subirla a la sección de proyectos y también compártela en redes sociales. Estamos en la etapa en la que todos empiezan a verse un poco diferentes. Me interesará ver qué has hecho. Puedes obtener comentarios de otros. Puedo dar retroalimentación. Ahí vas. Hacer navegación y una tarjeta de características. Hazlo todo receptivo y bueno. Todo bien. Es complicado . Eso está bien. Puede que tengas que volver atrás y volver a ver los videos, ver los comentarios Si hay otros estudiantes, posible que puedan ayudarte o que se encuentren con el mismo problema y tengan respuestas. Entonces sí, disfruta de la práctica. Eso es el Proyecto Clase 13. Te veré en el siguiente video. Después de que hayas hecho tu tarea, no la tarea, 68. Bonitos efectos de sombra paralela y sombra paralela interior en Figma: Hola. Es tiempo de sombra caída. Vamos a agregar sombras paralelas a los botones, y voy a mostrarte cómo agregar sombras dobles. Te voy a mostrar cómo convertirte en estilos, y te voy a mostrar lo súper impresionante, mi forma favorita de hacer sombras. Es una especie de preferencia personal. Puedes hacerlo para escribir A, obviamente, para empujarlo cuando estás por encima de las imágenes. También haremos sombras internas para este tipo de opciones de tipo de interfaz para darles un poco de profundidad. Todo bien. Hablemos de sombras paralelas. Todo bien. Entonces mi móvil Hi fi. Si aún no lo has hecho, he movido el botón de compra del escritorio justo por aquí. Si no lo has copiado, lo hicimos antes. Voy a ir al turno dos para acercar esa cosa seleccionada y retroceder un poco. Y voy a bajar a los efectos son fáciles, scroll, scroll, scroll, tener las cosas seleccionadas, y encontrar el panel de efectos. Let's plus y drop shadow es un valor predeterminado. Hay un montón de otros. Vamos a empezar con drop shadow y una sombra de aspecto muy agradable. Esto es preferencia personal, pero he hecho muchas sombras paralelas. A mí me gusta X a cero. X es lo lejos a la izquierda que va e Y es lo lejos que va hacia abajo. Voy a ir X cero y dos terminan luciendo bien y luego jugando con un desenfoque, a menudo dos también es agradable. También tienes que mirar una vista alejada. Si la gente nota tu sombra paralela, tienes demasiada sombra paralela. Quieres que sea sutil, los encuentro bastante bonitos. Sin embargo, lo genial de las sombras paralelas, o cualquier efecto es con el seleccionado, voy a hacer zoom un poco. Se puede agregar más de uno. Los efectos aquí, puedo volver a golpear plus, muchas veces lo que me gusta es uno que está bastante apretado como el primero que hicimos, y luego este otro más alejado y más borroso Sube la borrosidad. Puedes ver que es como una combinación uno con él seleccionado aquí. Apaguemos a uno de ellos. ¿Puedes ver ese desenfoque de relleno? Realmente depende también del tamaño del objeto, esta no es una regla dura y rápida, sino que empieza con 02 y luego agrega una borrosa. Ese es mi dropsh favorito Otros ajustes en Sombras sueltas por si acaso te interesa. El desenfoque es obviamente lo borroso que es. El spread es interesante . Vamos a arrastrarlo hacia arriba. Puedes agarrar el icono, arrastrarlo hacia arriba. Sigue siendo un borrón de dos, pero empieza más allá. Esto puede ponerse genial cuando tienes esto y tienes bastante distancia en él, parece que está más lejos de la página, y vamos a tener que hacerlo mucho borroso y probablemente agarrar los colores al 25% puedes arrastrar el porcentaje solo para que se sienta como si estuviera flotando. Realmente me gusta. No uso mucho spread. Ahí vas. Otra cosa genial de los efectos es que puedes copiarlos. Aquí está esta zona rara. ¿Puedes ver si Hova justo en esta zona rara, ve, hay unas pequeñas líneas Puedo hacer clic en eso una vez, mantener el turno , y agarrarlo, copiarlo y listo, Todo lo voy a usar para este otro botón sobre mi escritorio Hi Fi, y lo voy a usar para este tipo de aquí también. Voy a seleccionar en este botón, hacer doble clic, entrar, y solo voy a presionar pegar en mi teclado. Verás, puedo traerlo. También puedes configurarlo a un estilo, que es lamer, este tipo. Aquí están mis efectos. Puedo decir estilo. Puedo decir más, y va a sacar a través de ese efecto que he hecho, y voy a nombrar mi estilo. Ahora, es un estilo. Si no tengo nada seleccionado, haga clic en el fondo. Puedes ver que tengo mis fuentes, tengo mis colores y mira hacia abajo aquí, estilo súper impresionante. Se puede ajustar. Lo genial de ello es todo a lo que se aplica, puedes ir y cambiarlo aquí. Vamos a aplicarlo a. No va a funcionar con éste, no tiene relleno. Pero vamos a aplicarlo de todos modos. Voy a ir a mis estilos aquí. Voy a decir estilo súper impresionante. Uh, va a funcionar bien. Ahí van. Obviamente, las sombras paralelas de Aussie son geniales cuando tienes texto Voy a copiar esto encima de una imagen. ¿Bien? Esto realmente funciona bien, pero yo ***** se vería mejor con un efecto Voy a ir a. No, voy a ir a mis estilos e ir al estilo súper impresionante. Nuevamente, mínimo, pero realmente lo hace destacar del fondo. Echemos un vistazo a las sombras internas. Las sombras internas pueden ser realmente increíbles, especialmente con los elementos de la interfaz de usuario, ¿de acuerdo? Hagamos un pequeño cambio. Entonces voy a agarrar mi herramienta de marco. Voy a hacer una pastillita. Voy a hacer el mío un poco grande para que todos puedan verlo. Voy a darle un relleno de mis muestras. Voy a dar los llamo muestras, pero nuestros estilos. Voy a usar mi acento 300, voy a agarrar marca de esquinas, y de esquinas. Este de aquí, si lo agarras y lo arrastras y lo arrastras más allá, lo necesitas. ¿ Hacemos esto temprano? Creo que lo hicimos. Sólo sigue adelante hasta que esté al máximo. Se puede ir a 1,000 y eventualmente hará completamente redondeado alrededor de las esquinas. Esa es una. Quiero dar un círculo. Va a usar la herramienta O para la elipse. Dibuja una pequeña opción aquí, como un pequeño interruptor de palanca. Elige un mejor color. Excelente. Y aquí esta pastilla que tengo seleccionada, puedo decir que tienes un efecto de donde esta sombra interior. Las sombras internas son geniales para agregar un poco de profundidad a estas cosas, y como antes, el valor predeterminado aquí está bien. El desenfoque es probablemente un poco alto. Puedes usar tus flechas, recuerda, en estos campos abajo, arriba. Este de aquí, probablemente no tan lejos, y se puede duplicar, agregar otro, y vamos a hacer lo mismo en una sombra. Pero vamos a ir es interesante saber que puedes ir negativo. Más cuatro, podemos ir negativo para que llegue al fondo. Podría tener uno un poco más pequeño la parte inferior de ahí. ¿Se ve genial? No lo sé, Dan. Este de aquí, voy a aplicar mi estilo súper impresionante también. Puedes ver que puedes agregar algo de profundidad a estas cosas. Botón gigante. Entiendes la idea en las sombras. No duro, pero ahora puedes ir negativo y puedes agregar más de uno y puedes convertirlos en estilos. O puedes copiarlos y pegarlos. Recuerda, es un poco raro copiarlos y pegarlos. Hay este tipo de tierra de nadie ahí que puedes seleccionar y simplemente puedes golpear Comando C, Comando B. Bien, así que ese es el súper mega impresionante tutorial de sombra paralela de Dan . Pasemos al siguiente video. 69. Capa de desenfoque, desenfoque de fondo y desenfoque de imagen en Figma: Hola a todos. En este video, vamos a difuminar las cosas. Vamos a hacer este efecto de cristal donde las cosas detrás de este modelo pop up están todas borrosas. ¿Se ve borrosa También lo haremos para capas, donde esta imagen aquí comienza bastante nítida y potencialmente distrayente Voy a desenfocarlo, moverlo al fondo, oscurecerlo para que pueda poner cosas por encima y no me distraiga. Cosas azules. Para empezar, veamos el fondo azul. Esta es la más divertida, la mejor. Estoy en mi página de confirmación en mi celular Hi Fi. Tengo el fotograma seleccionado, voy a agregarle una imagen, así que voy a deshacerme del relleno, y voy a agregar y voy a volver a agregar el relleno y cambiarlo a imagen. Voy a subir una imagen desde mi computadora, y tengo una llamada mapa. Entonces va a la página de confirmación solo voy a mostrar Hola, esta es tu dirección, y aquí es donde estamos entregando o aquí es donde nos basamos. Esta es mi área local, y la voy a meter. Perfecto. Vamos a difuminar pedacitos de ella y lo hacemos con el objeto en la parte superior. Voy a agarrar mi herramienta de marco. Este va a ser nuestro modelo pop up que aparece arriba, va a tener escritura en él, así que queremos soplar el fondo para que podamos leerlo. Voy a darle un relleno. Y vamos a sumar el efecto. Se llama desenfoque de fondo, y va a difuminar todo lo que hay detrás de él. El problema es, es que todavía no se puede ver lo que hay detrás de esto. Entonces vas a bajar la opacidad de esto. Esta es la parte difícil de recordar es que hay dos formas de bajar la opacidad Se puede bajar la opacidad en esta apariencia para todo el asunto, funciona. Mira esto. Si lo arrastro hacia abajo, puedo ver a través de él. Pero lo raro de eso es que bajará la opacidad del relleno y el trazo y todo lo que hay en él, incluido el efecto Eso no es lo que quiero. Lo que quiero hacer es simplemente bajar la opacidad del color de relleno He escogido blanco, pero si baje esto abajo, ¿ puedes que esté borrosa a través de él Tienes que decidir qué tan opaco o transparente quieres que sea esto. ¿Bien? Básicamente, queremos que sea solo el tipo de efecto cool de un efecto de vidrio donde se puede ver a través de él. Podemos agregar texto en la parte superior. saltar cortando agregando mi texto. Ahí vas. Para que se vea más como un modelo pop up, probablemente necesite esquinas redondeadas, no tienes que esquinas redondeadas, voy a poner ocho, y puede ser agradable con un poco de sombra, para que podamos combinar nuestro efecto. Entonces tenemos fondo de efecto. Agreguemos también un poco de sombra. Recuerda la regla súper especial de dos dos y tal vez agregando otra para la versión más wafty. Vamos a las ocho. ¿Nos gusta? Probablemente sea un poco fuerte en este momento, pero te das la idea, puedes difuminar cosas detrás de ella, es genial efecto de vidrio. Apaguemos ese programa. Bien, mi primera. Eso funciona. El siguiente que quiero mostrar es capa azul. Puedes difuminar cualquier cosa. Puedes agarrar esta imagen y decir efecto y solo decir, quiero que la capa que tengo seleccionada esté borrosa No lo encuentro particularmente útil, y lo que sí encuentro útil para usarlo es que quiero difuminar una imagen de fondo que pueda ser un poco fuerte. Lo hicimos antes derribando a los negros o apagando las luces, perdón. Ahora, va a ser por este trasfondo. Podría poner esta imagen y podría decir, Al es mi película. Quiero cambiarlo a una imagen. Te voy a enseñar primero cómo hacerlo mal. Es la forma natural de hacerlo. Estás como, Bien, tengo imagen. Quiero que sea borrosa. Sabes, quiero que esto sea más abstracto. Es bastante geométrico y quiero quitar algo de la nitidez de la Entonces voy a ir a efecto. Voy a ir al laboratorio y tú estás como, Oh, genial. Voy a agarrar eso, ¿de acuerdo? Y el único problema con esto es si digo, Bien, voy a conseguir mi menú ahora, va a ir dentro este marco que tiene una imagen que tiene un efecto aplicado a él Goma. ¿Bien? Lo hace todo en el marco. Entonces lo que vamos a hacer es hacerlo tal vez de una manera diferente, no de una manera equivocada, no de una manera correcta, solo de una manera diferente. Voy a traer imagen. Entonces Comando Mayús K, te uso un pequeño desplegable aquí abajo en ese panel de formas, y voy a decir que entras. Voy a hacer clic y arrastrarlo, así que no quiero hacer click en el fondo porque lo va a aplicar a este marco. Todo lo que voy a hacer es hacerlo realmente grande. Va a saltar de la página, probablemente no va a saltar de la página por ti. Lo que debes hacer es asegurarte de que esté en la página correcta. Tengo mi página de características ahí. Quiero que estés ahí, lo cual puede ser complicado, no va a mentir. Estamos en el relleno. Voy a ir a cosechar porque quiero que esté en cierto lugar. Yo quiero esto así, quiero esto. Ahí vamos. Ahora que es una imagen dentro del marco, puedo seleccionar en la imagen y puedo decir, quiero que el efecto solo aplique a eso. Vas a ser una etiqueta y puedo encenderla tanto como quiera. Ahora cuando agarro mi menú, copio, pego lo estoy copiando desde aquí y recuerdo que estoy dando clic en el nombre del marco para entrar para que sepa dónde ponerlo. Mírennos. Otras cosas que me gusta hacer con este desenfoque de capa está bien, cosas que no hago que debo mostrarte. Con la imagen seleccionada, está la imagen. A veces me resulta más fácil solo seleccionar cosas en las capas. Sí, doble clic. Quizá encuentres lo mismo. Puede ser un poco raro o mantener presionada esa tecla de comando o control para hacer clic en la imagen. Eso también funciona. Bien, en mi desenfoque de capa, hay una progresiva. Sólo significa que el progresivo ¿dónde está? Porque mi imagen es tan grande, la progresión está por aquí por alguna razón. Puedo arrastrarlo hasta aquí para que sea un poco más útil visualmente. Lo que notarás es que puedes ver la parte inferior aquí vamos a subir es borrosa y la parte superior está puesta dos, cero, para que puedas decidir cuánto quieres que esté borrosa Este es un efecto genial. No he encontrado muy buen uso para ello. Seguro que hay muchos de ellos y puedes darle la vuelta. ¿Ves lo que estoy haciendo? ¿A mí me gusta? A lo mejor. Volver al uniforme. Voy a bajarlo un poco. Es un poco fuerte. Lo que también me gusta hacer, lo hicimos en un video anterior, solo un poco de recapitulación extra ¿Esta imagen está aquí? oscurecerlo un poco El mío es bastante oscuro, el texto aparecerá encima de él. No va a distraer demasiado. Pero recuerda, puedes seleccionar en esta imagen. Voy a entrar en ello y podrías bajar la exposición. De esta imagen, sólo para oscurecerla otra vez. Y recuerda jugar con los momentos más destacados, arrastrarlos hacia afuera, mío no tiene muchos ni ningún resaltado en absoluto, así que no me preocupa eso Otra forma de hacerlo, sin embargo, ya la verás. Yo lo uso mucho. Voy a poner eso de nuevo a cero y eso de nuevo a cero y salir de esto. Lo que puedes hacer es tener más de un relleno en una capa. Hicimos más de un efecto. Se puede hacer más de un relleno. Tengo mi imagen y voy a decir tener dos rellenos por defecto, en realidad hace lo que quiero. Agrega un relleno negro, pero también baja la transparencia o la opacidad del mismo hasta el 20% Puedo levantarlo Obviamente, si es al 100%, es completamente negro, pero solo puedes hacer esto. Es casi exactamente como usar la exposición. La razón por la que me gustaría hacerlo de esta manera a veces es que si estoy haciendo múltiples imágenes, puedo ser consistente, mientras que jugar con la exposición es mirarla, sacar la lengua, cabeza, **** de lado Eso es lo que hago de todos modos. Yo estoy como, si, ¿qué había en él? Sí. Bien, donde esta esto, solo puedo copiar esto y hacerlo 30%, así que todos son consistentes. Pero en realidad no importa. Eso me gusta por los antecedentes. Volarlos un poco. Ahora cuando empezamos a agregar nuestros objetos, es una especie de fondo genial, pero no está quitando del frente o de mi contenido. Bien, esos son un par de difuminos. Nosotros tenemos ¿qué eran? Eran capa azul, ésta, y luego tuvimos el fondo azul probablemente más fresco, el tipo de efecto cristal. Derecha. Eso es. Oh, eso es casi todo. Aquí hay una nueva característica. Yo no iba a cubrirlo, pero estoy como, Oh, eso sería genial para esto. Aquí hay otros efectos. Te he dado lo básico, puedes explorar. ¿ Algún otro que aparezca? El que acaba de aparecer es este de aquí, ruido. Por defecto, es un poco duro, pero ¿puedes ver cómo si me baja eso, densidad, la densidad hacia arriba, y tal vez no tan negro, más ligero Voy por el efecto cristal, ese tipo de efecto de ventana de inodoro esmerilado Así que hay un poco de jugar por ahí. Aún no tengo un número mágico para ello. Es solo arrastrar, sacar la lengua, cabeza coocada y decidir algo así ¿esto le suma ¿No es así? ¿Se parece más al cristal? No lo hace. Pero ahora ya sabes cómo usar el ruido. Obviamente también puedes hacer eso para las imágenes. Pero por el momento, eso es todo. Desenfoque hecho. Te veré en el siguiente video. 70. Proyecto de clase 14: Efectos: Equipo, Clase Tiempo de proyecto. Uno fácil y divertido. Solo quiero que practiques los efectos que hemos aprendido en los últimos videos. Sombra en una capa de sombra desenfoque y desenfoque de fondo. No me importa cómo los implemente. Lo que he hecho son los que hicimos en el tutorial, eso es el desenfoque de fondo. Yo hice el mío a mi página de inicio en mi Hi Fi. Pasé e hice especie de desenfoque de capa de fondo borroso para esta cosa abstracta Todavía lo quería bastante ligero. Eso es lo que hice, e hice mis sombras paralelas. Y aquí acabo de lanzar mi interfaz en una cosa de sombra aquí. Hasta usted a donde vaya. Yo también lo hice en el texto, y quiero que tomes una captura de pantalla de eso lo incluye todo. He terminado con dos capturas de pantalla para las mías. Podrías combinar todos los tuyos en uno. Entonces ahí está el mío y ahí está el mío. También me encantaría verlo en las redes sociales. Subirlo a los proyectos, obviamente, pero también compártelo y etiquételo a Mass en redes sociales o en nuestro grupo de Facebook, grupo LinkedIn. Me encanta ver lo que haces. Todo bien. Disfruta haciendo efectos infigma. Te veré en el siguiente video. 71. Qué son los componentes y las instancias en Figma: Uno. Hablemos de componentes e instancias. Básicamente, permiten crear un componente maestro que controla muchos otros. Mira esto. Puedo decir que quiero más relleno en la parte superior e inferior o menos, y todos van y cambian. Lo bueno de ellos es que puedes ver que puedes mantener tus instancias de ese componente principal únicas. Este es su propio color, tiene su propio texto, pero puedo controlar cosas como vamos al peso de la fuente y hagamos estos cambios. Estos actualizan, pero mantienen su singularidad. Realmente genial. Vamos a saltar. Hablemos de componentes e instancias. Todo bien. Primero hagamos un componente principal. Vamos a empezar con nuestro botón. Puedes usar cualquier cosa. Sólo voy a copiarlo y pegarlo por aquí. Sólo manténgalo separado. Bien, entonces lo que queremos hacer es este botón que pasamos años tipo de conseguirlo como queremos, queremos reutilizarlo. Pero queremos el control, como viste en la introducción de poder ajustar este componente principal y ajustar todo lo demás Entonces, antes que nada, tenemos que convertirlo en un componente. Lo haces por arriba de la parte superior de tu panel de propiedades aquí. ¿Puedes ver este pequeño cuatro diamantes aquí o el atajo, que es la Opción de Comando K en una Mac Controla Holt K en una PC. Eso fue difícil de salir. Pero haces click en esto, no pasa nada. Estás como, pasó. Una cosa que pasó es en tu panel de Laos, voy a ver aquí deshacer eso fue cuando era un layout automático o un marco, sea lo que sea. Una vez que lo hayas cambiado, obtiene esta pequeña característica de diamante. Estás como, Bien, ¿qué haces ahora? Bueno, podemos hacer un duplicado de ello. Puedo decir, quiero otro. Lo que pasa es que ¿puedes ver el ícono en este? Es una copia de ella, pero obtiene un solo diamante. Ese es el componente principal, es decir, la instancia de ese componente principal, padre hijo. Ahora bien, ¿por qué es útil esto? Voy a tener una, dos, tres versiones. En realidad vamos a tener tres versiones. Min y tres instancias de la misma. Lo genial de esto es, mira esto. Cuando cambio el principal , todos cambian. Eso es súper útil. Yo podría decidir que el relleno tiene que ser 32 y 16. Notarás que los 32 no hicieron mucho porque ¿ quién se acuerda? Así es. No es abrazar. Voy a cambiar esto para abrazar lo genial de ello porque cambié esa que podría haber olvidado como lo hice ahí, todos los niños o las instancias de este componente principal cambian también. Lo que es realmente genial es que estas instancias pueden tener singularidad para ellas. Digamos que este quiere ser de un color diferente. Entonces voy a decir que ya no lo estás. Oh, hay un relleno detrás de eso. No, eso son colores seleccionados. Ahí está el relleno. Al mostrarme el texto blanco. Aquí está mi relleno. Puedo decir, en realidad, quiero que este tipo sea mi color primario, este de aquí sea mi color de acento, y voy a dejar ese normal. Voy a dejar que mi color secundario. Lo genial de ellos, son únicos, pero mira, todos todavía tienen ese control principal. Pueden ser bastante únicos. Lo mismo con el texto. Ya tenemos que comprar. Obtendremos nuestro botón de compra. Estúpido candado de gatos sigue roto. Estos son únicos, pero aún tienen este control principal. Puedes entrar aquí y decir, bien, este tipo de aquí por alguna razón porque está en una página diferente y va a verse diferente. No puede tener radio de esquina. Nuevamente, todavía podemos controlarlo con el padre. Podrías decidir que este de aquí, en realidad, hagamos un cambio más tipo de cambio global. Entonces quiero cambiar esto de encabezamiento uno. Voy a romperlo porque quiero usar una versión ligera, y todos se vuelven ligeros. Ese es el poder de usar un componente principal y tener instancias. Otra ventaja es que esto es bastante desordenado, ¿verdad? Todo está aquí. ¿Bien? Puedo entrar en mi panel de Activos, que aún no hemos mirado, y debería tener mi botón en la biblioteca. No está aquí. ¿Dónde está? Los componentes se agregan a la biblioteca. A veces hay un error. Ojalá esto desaparezca. Tengo que cerrar el producto y volver a abrirlo. Tú esperas ahí. No lo es. Simplemente se les cambió la interfaz de usuario. Lo que dice está en esta biblioteca aquí, ahí está ahí. Ahí está mi botón. No me gusta esta nueva forma de trabajar. Simplemente me gustan los más listados aquí. Es para cuando consigas proyectos realmente grandes, hay que decir en mi biblioteca para este archivo, Bien, esa es la primera página de este documento, ¿dónde está aquí? Esa es mi primera página, así que por eso está demostrando eso. En esa página o en ese documento de diseño, aquí están todos mis activos. Se puede arrastrar. Voy a volver a esta página aquí en la que estamos trabajando y volver a mis bienes. Puedo arrastrar una instancia de esta manera. No importa si lo copias y lo pegas o lo arrastras desde aquí, estás creando una instancia de ese componente principal. Esto se vuelve útil cuando comienzas a crear bibliotecas y compartirlas con la gente. Se pueden ir, Bien quiero todos los bienes de este muelle y van a estar listados aquí ¿Qué debería ser un componente? Básicamente, en tu etapa de diseño cuando todo es un poco conceptual, no necesitas componentes en instancias. En cuanto encerraste algo, sí. Deben ser componentes. Al igual que este logo de aquí, estamos contentos con él. Voy a decir que tú, amigo mío, vas a ser un componente y aquí termina como un logo. Tiene un fondo blanco así que realmente no se puede ver. Pero solo significa que si voy a otra página ahora y voy, bien, estoy en mi móvil Hi Fi, lugar de tener que volver al documento, copiarlo y pegarlo y no tener conexión ahora, puedo ir a mi página de confirmación, ir a mis activos, y simplemente agarrar el logo y arrastrarlo hacia afuera. Es consistente. Voy a añadir un efecto. Voy a añadir en realidad mi estilo que hice antes. Super impresionante. Todavía no funciona del todo. Puedo cambiar el color de este de aquí por el color de mi biblioteca. Hemos hecho algunas modificaciones a mi componente principal. Pero si vuelvo a ese componente principal, es un buen truco. ¿Cómo vuelvo a la principal? Sé en mi panel Capas que estoy trabajando en esta instancia. Es el diamante pequeño. ¿Cómo voy y lo encuentro? Puede hacer clic derecho en él y decir, componente principal, ir al componente principal. Vuelvo a mi página que la tiene, y puedo decir, en realidad, me falta con el tamaño de estos. Tengo que usar la herramienta K. Voy a hacerlo más grande. Probablemente no vas a ser capaz de decir eso, Hagamos otra cosa. Vamos a destruirlo. No, le dije a turno. Hagámoslo más grande, mucho más grande. Qué hacemos si volvemos al móvil Hi Fi, ya ves, me puse muy grande. Impresionante. Otro truco para estos es que digamos que has hecho algunos ajustes y quieres volver al original, quiero volver a usar esto, pero no quiero tener todas las cosas que he hecho el morado y el drop puede ir a reset instancia, vuelve a lo que sea que sea el componente principal. También podrías decidir que en realidad en esta página aquí, pasaste años haciéndola bien y te gusta así. Es el tamaño correcto. Puedes ir por el otro lado. Se puede decir, en realidad, quiero que este sea el componente principal ahora, no componente principal, pero quiero enviar todos los cambios a ese componente principal. Se puede ver aquí dice empujar los cambios al componente principal. Si vuelvo al escritorio Hi Fi, tiene esos nuevos ajustes. Tengo nuevo color, tiene el nuevo tamaño, todavía demasiado grande, sigue siendo color incorrecto, pero entiendes la idea. Voy a deshacer eso antes de rectar mi logo. Déjalo ahí. Vamos a pollarlo. Todavía tiene sus anulaciones. Entonces voy a decir, en realidad, volver a donde se restablece instancia? Todos los componentes correctos. Comenzarás con uno o dos y luego empezarás a encontrar que tienes muchos de ellos. Y encontrarás plantillas de otras personas con las que estás trabajando. Los estarás agarrando, copiando y pegando para su documento o trabajando desde su plantilla, y estarán usando muchas instancias a lo largo del Y si quieres cambiarlos todos, todo lo que tienes que hacer porque no tienes idea de dónde está el componente principal? Estás como, esto es definitivamente una instancia, o esta de aquí, definitivamente una instancia. ¿Dónde está el componente principal? Podría decir click derecho e ir y llevarme a ello. Ve a ello, por favor. Ahora está justo ahí. Ah, y lo último es que hicimos esto antes cuando estamos copiando y pegando del documento de otra persona, en realidad puedes ir y romperlo Terminarás con instancias que has copiado y pegado, y estás como, no quiero que conectado al componente principal porque lo es Puede enlazar a través de documentos. Digamos que no quieres eso, solo puedo decir, en realidad, quiero desatar esta instancia Esto lo hicimos antes sin saber por qué, ahora sabemos por qué porque no queremos este componente principal que esté conectado a él. Podríamos romperlo y hacer el nuestro propio. Podemos hacer clic derecho en él o subir hasta aquí y decir make component o create component. Ahora tenemos este componente principal que ahora es Ls que podemos usar, y no está conectado al documento de otra persona de hace mucho tiempo. Bien, eso es todo. Es decir, componentes e instancias, componente principal e instancias de ese componente principal. ¿Te explico eso bien? Es complicado. Ojalá tenga sentido ahora o al menos un poco más de sentido. Practicaremos más de ello. Todo bien. Eso es. Te veré en el siguiente video. 72. ¿Dónde debes guardar tus componentes principales en Figma?: Hola, ahí. Vamos a organizar nuestros componentes principales porque estamos muy organizados. Muchos diseñadores tienen este problema de TOC donde todo estaría bien y se organizaría en otra página. Eso es lo que vamos a hacer. Es buena etiqueta UX y para esa gente desordenada por ahí, tú Te mostraré algunos trucos sobre cómo dejarlo desordenado y tus componentes principales en todas partes y encontrarlos realmente. Bien, vamos a saltar. Vamos a organizarnos. Empecemos a ordenarlo. Aquí tenemos nuestro componente principal. Recuerda, si no encuentras tu componente principal, puedes hacer clic derecho y decir, ¿dónde está? Componente principal, vaya al componente principal, para que sepa dónde está. Voy a cortarlo, y voy a ir a donde voy a ir. Voy a hacer una nueva página. A éste se le va a llamar C po Let's. Voy a arrastrarlo así que está en la parte superior aquí y voy a estar en esa página, lo cual veo. Sólo voy a pegarlo. Muy grande. Lo mejor es mantener sus componentes principales en una página de componentes para que sean fáciles de encontrar. Solo llevamos un poco haciendo este curso, HiFi. Míralo. Es methias Mientras que ahora es muy buen hábito mantenerlos en una página de componentes o mantenerlos separados para que sepas dónde están, especialmente cuando estás trabajando con otra persona, no quieres que tengan que pasar por ellos e intentar averiguar dónde está ese componente principal misterioso. Voy a hacer otro componente. Te voy a mostrar otra manera de conseguirlo ahí. Tengo todo esto. Va a ser mi principal Nav. Voy a los momentos solo un marco. Voy a convertirlo en un componente. Haga clic en el botón, o use su atajo Opción de Comando K o puede hacer clic derecho. Todo bien. No va a convertirlo en un componente principal. Hagamos esto, haga clic derecho y vaya a crear componente. Y realmente no quiero esto en esto porque si termino metiendo con esto, voy a afectar a todas las otras páginas Así que lo mejor es ir ahora, bien, tú mi amigo te vas a mover a la página, o puedes copiarla y pegarla y yo la voy a mover a mi página de componentes. Lo que voy a hacer es ir a mis bienes, y voy a regresar y voy a volver otra vez. Este archivo aquí debajo de mi panel de componentes, voy a tener todo aquí solo y luego está todo en un solo lugar en lugar de repartido, lo que hace aquí es en esta página y si tengo otro componente, quiero mostrarte dónde está desordenado Si lo hago esta y creo , esta va a ser mi tarjeta, así que voy a ir atajo Opción de Comando K o Control Alt K en una PC. Tengo mi componente, voy a dar un mejor nombre. Tarjeta A, estoy seguro de que voy a crear otra. Se puede ver que definitivamente es un componente porque tiene los cuatro diamantes. Ahora si vuelvo al panel de Activos, puedes empezar a ver que termino con componentes en cada página. Pero si los quito a todos , mira a Mobile está aquí. Si voy a este de aquí y digo, A, ahora te van a mover a mi página de componentes. ¿Ves que lo arregla? Lo mismo con mi Hi fi. Tengo el logo por aquí en alguna parte. Puedo hacer clic derecho en él y decir, ir al componente principal. Ahí está ahí y voy a decir, y ahora pasar a. Vamos, muévase a los componentes de la página. Sólo verás que en este documento, solo tengo estos componentes. Los arregla. De lo contrario, te muestra todas las páginas en las que están. Entienden, Dan, sí. Voy a añadir eso en perfecto. Ahora solo podrías dejarlo todo desordenado y tirado por ahí. Lo haces al principio y luego rápido, terminas como, solo vas a moverlos a otra página. Si decides ser la persona desordenada y simplemente dejarla tirada alrededor tu documento, está totalmente bien En el panel Activos, si es realmente difícil resolverlo, solo puedes buscar. Si necesito esa tarjeta que acabo de hacer, puedo escribir tarjeta y solo me va a dar la tarjeta. Esto es muy útil cuando trabajas con, digamos, un documento más grande, cuando solo hay cargas y cargas y montones de cosas diferentes. Un montón de botones diferentes se mezclan con todo lo demás y solo quieres buscar botones. Buen punto, volvamos a mi página de componentes y hagamos algunos naming. Botón pequeño, ya hice ese. Ahora, soy bueno. Ya les he dado nombre a estas cosas, tarjeta uno. Soy un genio y logo. Ahí vas. No necesito renombrar nada. Estás aquí, sin embargo, te voy a mostrar una manera genial de pasar por todos estos y renombrarlos. Digamos que no se llamaba Logo, puedo presionar tabulador para bajar a nombrar este porque muchas veces terminas con solo frame 47, frame 52. Manos arriba si ya eres tú. Sí, sabía que serías tú. Puedes simplemente tabularlos hacia abajo, cambiarles el nombre, tabularlos hacia abajo. ¿Eso es útil? A mí me parece útil. Buscando, asegúrate de que estén en nuestra propia página y otro truco también para encontrar el componente principal. Puedes hacer clic derecho en él. Ya tengo esta instancia aquí. Ves por aquí, puedo decir, ir al componente principal, hace eso. También verás cuando no estén en un marco, puedes ver el nombre, pero también puedes ver el ícono. Ya ves cuando está en un marco, no verás el nombre ni ese pequeño icono. Ahora solo es cuestión de alinear estos. Podría tener una sección de botones aquí abajo para la gente del TOC en el curso, puedes empezar a alinear las cosas, etiquetarlas, agruparlas y tenerlas en lugares especiales Tienes un segundo botón, los agrupas, los haces fáciles de encontrar, poner en marcha tu feng. Eso es. Es cómo ordenar tus componentes. No tienes que hacerlo. Pero a medida que tus proyectos se hacen más grandes y cuando estás entregando a otras personas, probablemente lo harás Al menos por la ilusión de estar organizado. Eso es. Te veré en el siguiente video. 73. Proyecto de clase 15: Componentes: Es tiempo de proyecto de clase, y si te estás saltando proyectos de clase, no lo hagas ahí Hay un poquito más en este. Quiero agregar un poco de cosas interesantes antes de hacer el proyecto de clase. Bien, hablemos de lo que tenemos que hacer, y luego te mostraré las cosas. Quiero que hagas página de componentes, y quiero que crees dos versiones de logo, un botón, un Nav. Déjame mostrarte. Tengo mi Nav los dos logotipos. Tengo uno que va sobre un fondo oscuro y otro que va sobre una luz. Así que realmente no se puede ver ahí. Es una versión más oscura del logotipo. Entonces, cuando lo estás nombrando, es difícil saberlo. Ese es el logotipo claro real, y ese es el logotipo oscuro, pero este se llama modo Luz, modo oscuro. Es muy común en UX darle el nombre de a dónde va en el fondo que va. Modo luz, modo oscuro, probablemente te hayas topado antes Esto se está utilizando en modo luz ya que en hay un fondo blanco, esto sería más apropiado. Sobre un fondo oscuro, eso es más apropiado. Usa el modo de luz y el modo oscuro. Entonces los dos componentes principales separados, en lugar de una instancia que has cambiado. Si estás teniendo problemas para ver algunos de tus elementos, podrías poner un marco alrededor de esto. No hay problema en tener un marco que hace que esto sea un poco más desordenado, a menos que puedas ver tu modo oscuro, o simplemente podrías cambiar el fondo Así que no tienes nada seleccionado por aquí, posible que encuentres un fondo que es como un término medio feliz en esta página en particular para que todos puedan ver todos los diferentes elementos. La otra cosa que quiero compartir contigo si no estás haciendo los proyectos de clase, deberías, es esta de aquí anidada instancia de un logo Así que tenemos nuestro Nav aquí arriba. Dentro de ella, tenemos nuestra navegación, que es esta cosa de aquí a la derecha. Bien. Y probablemente nunca le nombre realmente a esa. Llamemos a este botones de guión de Nav. También tengo este logo aquí. No es una instancia de esto. Esto es solo el logo que hicimos antes. Ya ves, sigue siendo un marco. ¿Qué debo hacer? Porque el problema ahora es que si hago un cambio a esto, ya ves, si hago esto más grande, esto no viene para el paseo. Esto se llama instancia anidada, significa que tengo mi componente principal y quiero una instancia dentro de él Explicarlo no ayudó, ¿verdad? Entonces componente principal. Yo hice una instancia de ello que voy a utilizar en esta navegación. Voy a deshacerme de este tipo y voy a meter a este tipo. No es el componente principal. Es solo la instancia de ello para que pueda trabajar en esto por separado, eso tiene que estar abajo. Pero lo genial es que cuando me meto con esto, porque esta es una principal y esa la instancia de la misma, eso viene a lo largo para el paseo. Tengo este mayor control. Tengo todo este bit de Nav dentro de él es una instancia. No hay razón para que no pudieras tener el principal aquí también, así que tal vez sería más fácil, pero no lo es. Es simplemente agradable tener el logotipo lugar de horneado en esto porque usarás un logotipo en muchos lugares diferentes, no solo en el NAV. Vamos a tener una instancia ahí dentro. Todo bien. Si no estás haciendo los proyectos de clase, que deberías ser, ya puedes irte. Para el resto de nosotros, hacer una página, hacer dos logotipos, uno oscuro, uno claro, un componente de botón, y el NAV, que tiene el logotipo anidado Entregables, toma una captura de pantalla como la de todo lo que hay en tu página y subirla a los proyectos No necesitamos compartir este en las redes sociales no es particularmente interesante. Compartiremos más adelante, pero asegúrate de que lo subas a los proyectos, recortas Asignaciones, y eso es todo. Te veré en el siguiente video. 74. Cómo hacer variantes de componentes en Figma: Hola. Bienvenida. Vamos a ver qué es una variante de componente. Hemos hecho componentes en el último video, solo algo reutilizable que está en nuestra biblioteca de assets, pero vamos a ir un paso más allá y combinar dos componentes para que más adelante, podamos decir, A, tú, en realidad puedas tener dos variantes diferentes de la misma cosa. Es bonito. Mantiene las cosas bonitas y simples. Tengo un botón que puede ser muchas cosas en lugar de tratar de arrastrar muchas y muchas diferentes. Lo mismo con esta de aquí, hicimos esta variante. Smoosh ellos en esta cosa. Puedo decir en realidad quiero el estado Hova o el estado discapacitado Llamé varianza y vamos a hacer eso ahora. Vamos a saltar. Derecha. Varianza de botón. Voy a crear el mío en mi página de componentes. Pueden ir en cualquier página que te guste, y yo he dibujado esto. Es sólo un marco sencillo con algo de texto en él. Nada más. Lo convertí en un lout de Auto para que pueda obtener el espaciado fresco, pero eso es todo. Lo que voy a hacer es que voy a duplicarlo. Voy a tener dos versiones de la misma, y esta de aquí, voy a llamar secundaria. Quiero un botón que pueda reutilizar que apenas esté listo para ir con mi color secundario. Ese es el color secundario. Todo bien. Esta va a ser la primaria. Tengo mis botones primario y secundario. Voy a convertirlos en componentes. Entonces te voy a decir, mi amigo botón primario va a ser un componente, desplazarte hacia arriba, pulsa ese botón, tú también, ambos componentes como lo hicimos nosotros. Esto es básicamente todo lo que estamos haciendo desde el último video. Ver mi panel de activos, hay dos de ellos, dos de ellos está bien. Pero cuando tienes tres de ellos con tu tercer color y luego tienes otro con contornos y diferentes tamaños de fuente y botones más grandes, botones más pequeños, puedes imaginar este panel de activos se vuelve realmente grande. Lo que podemos hacer es que tengo mis dos componentes. Puedo seleccionarlos a ambos. ¿Qué sucede cuando seleccionas dos componentes a la vez, mira la parte superior aquí, dice: Oye, te gustaría combinar estos como varianza? Estás como, Si, eso sería increíble. ¿Qué ha pasado? No mucho. Tiene una línea punteada alrededor del exterior. Lo que le pasó a mi panel de Activos, puede ver va de dos, rehacer a uno Ese ahora contiene muchas cosas. Guau, un montón de cosas. Más de una cosa. Con él seleccionado, puedo ir por aquí y decir, mira, puedo decir que eres el botón secundario. Ah. Oh, puedes fundir diferentes versiones o variantes en un solo componente Eso es lo que son las variantes. Hagamos otra. Este de aquí otra vez es echemos un vistazo al marco. Es solo Auto lot con algo de texto en él. Ni un componente, ni nada. Este, sin embargo, quiero hacer un botón más típico en sitios web donde puedo decir, tengo uno, dos, tres. Este no va a ser mi esquema, este va a ser mi botón principal. Este de aquí va a ser mi hover, cuando pases el cursor sobre él, y luego vamos a tener una opción para este botón que está Vamos a cambiarlos cuando pases el cursor sobre él con el mouse, voy a cambiar el color del trazo para que sea más oscuro, lo mismo con el texto El texto va a ser el color más oscuro cuando se cursor sobre él y la opción desactivada, solo voy a derribar la opacidad de todo lo que hay dentro de él para que se vea a ¿Ves lo que estoy haciendo aquí? Al igual que has visto botones deshabilitados antes. Ahora necesitamos convertirlos a todos en componentes. Hay un truco para hacerlo un poco más rápido. Puedes seleccionarlos todos. En lugar de simplemente hacer uno a la vez, se puede decir, vea este pequeño menú desplegable aquí. Cuando tienes varios fotogramas seleccionados, dice: Oye, ¿quieres hacer un componente? No, quiero crear múltiples componentes. Ya ves que los acabo de hacer todos de una sola vez. Días felices. Ahora, sin embargo, si los selecciono los puedo combinar en una variante. Nuevamente, obtuve una variante y si voy a mi panel de Activos, me he ido voy a deshacer deshacer de una, dos, tres cosas arruinando mi panel de Activos a una Ahí está ahí. Arrástralo y puedo decir, AT one tiene que ser la opción hover No, esta va a ser la opción de discapacitados. Esa es una variante de componente, igual que un componente, pero con algunas varianzas Vamos a ordenar estos un poco. En lugar de llamar al componente dos, es un mal nombre, esto se le va a llamar mi esquema BTN, solo para que sepa lo que es eso en mi panel de Activos Puedes nombrarlo por aquí o arriba. La otra cosa que podríamos hacer es con el componente principal seleccionado, no con la instancia que arrastramos. Este tipo de aquí. Podemos repasar a esto y decir, ir a los ajustes aquí y decir, en realidad, ¿qué propiedad estoy seleccionando? Porque eso es lo que hacemos. Vamos por aquí y decimos, ¿qué propiedad quieres? ¿Ja primaria? Quiero ir por aquí y decir, ser un poco más descriptivo y decir, no la propiedad. Quiero poner el estado del botón. Entonces puedes elegir entre deshabilitados hover y primario. Puedes arrastrarlos alrededor, dependiendo qué manera quieras que aparezca el orden del menú desplegable. Entonces ahora por aquí, este de aquí, ¿qué estado de botón quieres? Se puede decir, quiero primaria, la de arriba. Ahí vas. Hiciste una variante de componente ultra complicada para hacerla más complicada, solo darte el lenguaje mientras vamos adelante. Eso es ahora se llamó un componente principal, y sigue siendo, lo llaman un conjunto de componentes ahora. Eso es lo que significan las pequeñas líneas punteadas alrededor del borde. Es solo la forma de decir que este tipo aquí tiene habilidades especiales, todas suavizadas juntas en una variante Así que arrastra una instancia de ella, o puedes arrastrarla directamente desde el componente principal como antes. Puedes arrastrar una copia de esto. No importa. Este tipo de aquí, quiero cambiar el estado del botón. Nombre. No se puede tener que hacerlo al componente principal. Entonces puedo entrar aquí y decir estado de botón que se puede cambiar. Lo mismo por aquí, se puede decir, bien, quiero cambiar la palabra hover aquí No puedes hacerlo en la instancia, pero puedes volver al componente principal o al conjunto de componentes e ir a la configuración y entrar aquí y decir que esto no es primario, esto es otra cosa. Así que haz tu edición en el conjunto de componentes o el componente principal. Usan ambas palabras para estas cosas, y las instancias, solo pasas y haces los cambios que quieres ver. Quiero escoger esta variante. ¿Eso fue de ayuda? Ojalá lo fuera. Nuevamente, esto está en el curso esencial, es razonablemente avanzado, principalmente porque encontrarás el botón de alguien, serás como, Impresionante. He copiado este botón. Ah, ojalá hubiera otras versiones del mismo, y tal vez solo tengas que ir por aquí y comprobarlo e irte, alguien ha hecho todo el trabajo por mí, y vas a llegar a un punto en el que estás como, Hombre, solo necesito combinar algunos de estos tipos, y puedes hacer tus propias variantes. Bien, mírennos. Usuarios de Hardcore Figma Bien, eso va a ser. Te voy a ver en el siguiente video. 75. Otra forma de hacer variantes en Figma: Hola, vamos a practicar de nuevo haciendo variantes. Te voy a mostrar otra forma de hacerlos. Básicamente, puedes simplemente hacerlos dentro del conjunto de componentes en lugar de hacerlos todos primero, y te mostraré un truco genial donde puedes convertirlos en pequeños interruptores de palanca. Oh, me encanta un interruptor de palanca. Bien, buena práctica. Hagamos otra variante. Te voy a mostrar algunos otros trucos geniales. Y por supuesto, el botón de alternar. ¿Cómo lo hace? Bien, vamos a saltar. Bien. Para empezar, he hecho, en realidad acabo de robar esto de un tutorial anterior donde aprendimos sombras caídas. Entonces esto no es más que marco de esquina redondeada, con un pequeño círculo en él. No pasa nada. Voy a convertirlo en un componente, igual que lo hicimos antes. Es un atajo Comando, Opción K, Control Alt K en una PC. Bien, tengo uno de estos. Y si te desplazas a la parte superior aquí arriba, bien, yo mismo lo he llamado Toggle Switch. ¿Bien? Y ¿puedes ver esta pequeña opción? ¿Bien? En lugar de solo firmar dos de ellos, solo tienes que hacer clic en esto. Y mira, voy a añadir una variante. Y simplemente como hace todo eso funcionar para nosotros en lugar de, como, hacer dos componentes diferentes y seleccionarlos ambos y luego convertirlo en una variante. Hacer un componente y decir, quiero una variante de este componente. Funciona para ti. El segundo aquí ahora, voy a cobrar doble para entrar. Quiero que ese interruptor esté por aquí, a mejor el color de fondo para cambiar a uno de mis neutros, entonces los apagan. Como antes en nuestro panel de activos, podemos simplemente arrastrarlo. Terminamos en el mismo lugar. No importa si se ve así o si se ve así, hemos terminado con una instancia que tiene diferentes variantes. Nuestro naming está todo muy mal, pero es lo mismo. Se puede añadir otra vez. Ves esto lo tengo seleccionado. Puedes ver este pequeño plus aparece en la parte inferior, puedes agregar otro. No estoy seguro de qué botón va a hacer esto. Atascado en el botón del medio. Puedo agarrarlo también, y puedo golpear mi tal vez Comando D o Control D en una PC para duplicar cosas. No importa cómo hagas tu varianza. Puedes copiarlos y pegarlos, duplicarlos, presionar el botón pequeño más. No importa. Lo que funcione para usted. Lo que voy a hacer es mostrarte un par de cosas más. Yo estoy borrando estos botones, ¿te das cuenta de que la pequeña línea punteada no rejig para envolver alrededor Puedes agarrar el exterior y puedes hacer esto de cualquier tamaño. Esto es solo una señal visual para que sepas que, oye, esto es lo importante. Juego de componentes, el componente principal, y puede ajustarlo según lo necesite. Lo interesante es, esto es sólo un truco más divertido, es nuestro nombre, ¿verdad? Si hago clic en el componente principal. Por aquí, notarás que hay dos configuraciones. Este pequeño icono de propiedades universales está en todas partes. Este de los top de aquí es uno genérico. Lo que quiero hacer es aquí abajo, hay esta otra opción aquí para que pueda saltar y hacer mi nomenclatura. Esta va a ser, no puedo pensar. Voy a llamarlo. El editor lo habría cortado, pero yo estaba ahí sentada entrecerrando los ojos, tratando de pensar cómo se va a llamar Yo lo llamo la posición para este botón porque no nombramos nada. Se llama default en la variante dos. Terminarás con muchos de estos. ¿Bien? Podríamos darles otros nombres, pero si le damos el nombre secreto, ¿re si un nombre secreto? En. Y si este otro se cancela, mira lo que pasa. ¿Bien? Si le pego a Enter ahora, deshazte de eso. Si hago clic en mi instancia, esa se arrastró ya sea de la biblioteca o se copió de aquí Estoy sosteniendo mi tecla de opción en una Mac. Oh, contador PC, no importa, son todos iguales. Todas las instancias de este componente principal. Mira lo que pasa. Hay un interruptor de palanca. Para, haga clic, agregue sus propios efectos de sonido. No sé por qué eso es increíble, pero si usas la palabra cuando estás nombrando tu varianza de forma intermitente, hará que eso suceda Puedes llamarlos verdaderos y falsos, sí y no. No sé por qué esto me hace feliz. ¿Bien? Me encanta un interruptor de palanca. Bien, entonces es bastante complicado. Hagamos otra, una súper simple. Si por la herramienta de marco, voy a dibujar un rectángulo simple, y voy a decir que tú, mi amigo va a ser un componente, y voy a hacer una variante tuya. Esta otra variante va a ser de un color diferente. Va a ser de un tamaño diferente. Y ahora por aquí en mi panel de propiedades, ahí está. Y tiene dos variantes. ¿Por qué no haces eso al principio, Dan? Probablemente debería haberlo hecho. Pero te metes en la caída de ello. Primero hicimos el complicado, y luego este súper simple más adelante. Puedes usarlo muy rápido, realmente simple y simplemente mantiene tu biblioteca agradable y apretada. Asegúrate de nombrar tus cosas. De lo contrario tienes que enmarcar uno que es difícil de entender para qué sirve. Lo que es realmente bueno de esto es más tarde, cuando estás copiando y pegando el trabajo de otras personas, otros diseñadores en tu oficina o tal vez estés usando una biblioteca de otra persona En Internet, puedes hacer clic en las cosas y tal vez encuentres que puede haber algunas otras opciones todas escondidas ahí dentro. Bien, estoy de vuelta. No sabías que me fui. Terminé y estaba como, Oh, deberíamos hacer uno más porque otro muy buen caso de uso y solo ayudarnos a practicar es el logo claro y oscuro. Ya los tenemos. Ya los hicimos. Ya lo hemos atajo, ¿ verdad? Tenemos estas dos versiones. No tienen que estar uno encima del otro. No sé por qué los estoy apilando, pero ahora puedo seleccionar ambos. Oh, vaya directo a ser una variante. Y ahora está ordenando nuestra biblioteca. En lugar de estas dos cosas, sólo tenemos una cosa. Podemos arrastrarlo hacia fuera y podemos decir, Bien quiero logo modo luz o modo oscuro Vamos. Podría cambiar el nombre ahora Yo podría decir, en vez de llamar componente dos, podría simplemente llamar a este logotipo, y dentro de él, voy a entrar en estas propiedades, y voy a decir que la propiedad es mode, y en vez de llamar logo modo oscuro, oh, ¿a dónde vamos? Me perdí. De vuelta a ti. En lugar de logo modo oscuro, solo voy a poner no puedo escribir. Modo oscuro, modo de luz con pestaña hacia abajo. Ahí vas. Otro muy buen caso de uso, mucho mejor que el interruptor de palanca o este tipo. Tan glorioso como él es. Bien, ese es el final final. Te veré en el siguiente video. 76. Proyecto de clase 16: Variantes: Hola, es hora de practicar lo que hemos estado practicando. Quiero que hagas algunas de tus propias variantes. Bien, entonces vamos a hacer cuatro de ellos. Tres de ellos ya los hicimos en la clase. Simplemente puedes hacer esos si aún no lo has hecho. Y luego el último quiere que agregues una casilla de verificación abajo en la parte inferior aquí Aunque no estés haciendo el proyecto de clase, deberías. Te voy a dar un pequeño consejo sobre dónde podrías equivocarte. Entonces echa un vistazo a lo que vas a hacer. Quiero hacer un botón que tenga dos variantes. Uno es el secundario y el otro es el primario. Quiero que hagas un interruptor de palanca con una pequeña opción de palanca. Lo mismo con el logo, va a haber un modo claro y otro oscuro de estos tipos entre los que puedes cambiar, entonces quiero que hagas esta casilla de verificación, lo que podrías toparte, y es algo con lo que rara vez me topo, pero sucedió mientras hacía esto Yo estaba como, Oh, aquí. Lo que termina pasando es Ver esto, tengo mi casilla de verificación. Se ve bien. Tengo uno sin la tecnología, uno con el técnico por aquí. Yo soy como, A, sólo voy a cambiarlo a no puedo cambiarlo a nada. Lo encendí, pero luego no se apagará. Es raro. Es porque aquí, este conjunto de componentes tiene dos variantes en él. El lado a lado en lugar de uno encima del otro, no importa. Lo que sí importa es el naming. A este tipo de aquí se le llama default y a este tipo de aquí se le llama default. Puedo ver por aquí en mi panel de capas, por defecto y por defecto. Este tipo no sabe qué mostrar porque a ambos se les llama default. Podemos renombrarlo, podemos agarrar la casilla de verificación. Podemos entrar en las propiedades aquí. En realidad, no podemos sólo uno de ellos ahí. Tengo que hacerlo por aquí. Yo tengo uno. Este es el vacío. Hay un nombre mejor para ello. No puedo pensar en ello. Inactivo, probablemente eso es todo. Esta va a ser revisada. Porque son diferentes, ahora esta cosa sabe qué hacer. Se puede decir, bien, tengo dos opciones, no solo por defecto, puedes encenderlas y apagarlas. Cualquiera de estos, si llamé, hagámoslo a éste también para romperlo. Voy a entrar aquí y voy a llamarlos a ambos modo oscuro, modo oscuro. Se deshace de uno, pero a ambos se les llama modo oscuro. Entonces esta cosa de aquí, no sé qué hacer. Modo oscuro, modo oscuro. Así que asegúrate de que ambas variantes tengan su propio nombre único. Eso suele suceder por defecto. Componente uno, componente dos, componente tres, componente cuatro. No sé cómo conseguí que los míos se llamaran por defecto, pero lo hice y tú también podrías. Ahí vas. Quiero que crees estos cuatro y quiero que tomes una captura de pantalla de ellos alineados así donde pueda ver el set y el ejemplo del mismo y subirlo a la sección de proyecto. Disfruta haciendo varianza. Te veré en el siguiente video. 77. Cómo añadir un modo de superposición emergente en Figma: Hola ahí. ¿Estás listo? Vamos a hacer esto. Tres, dos, uno, uno, Go. A mí me encanta esto. Es un prototipo donde este modal de aquí aparece por encima de todo. Puedo cerrarlo, aparece automáticamente sobre la parte superior de un marco existente. Déjame mostrarte cómo hacer eso en figma. Para que esto funcione, necesitas tener lo que quieres que aparezca en su propio marco en el fondo. No puede estar en ningún otro marco de esta página aquí, lo tienes justo a un lado. He dibujado solo un pequeño marco con algunos íconos y un botón ahí dentro. Yo sólo puedo ser un marco normal. No importa. He estilizado mío para que parezca un boletín emergente. Lo que hacemos es cambiar al modo prototipo, que es turbio, o puedes hacer clic en Prototipo aquí arriba Lo que decimos es homepage aquí, quiero que vayas a allá. No queremos que tenga un Navigate dos. Queremos que la acción diga para abrir una superposición. Eso es básicamente todo. Echemos un vistazo para ver qué hace eso. Prototipos de la página de inicio. Vamos a Prototipo. Espera una carga. Y está configurado a on click, así que hago clic a la vez. Aparece el boletín. No lo sé. Algo increíble sobre esto. No cierra, pero no lo sé, Sms así que lo que tenemos que hacer es hacer clic en la Y aquí o en el fideo, digamos, no en click, queremos que diga después de un retraso Voy a decir después de aproximadamente decir 4 segundos, 4,000 milisegundos. Vamos a darle una prueba a eso. De nuevo, voy a previsualizar a este tipo, digamos play. Bien. Y después de 4 segundos, 4 segundos. Ahí está. Oye. Apareció. No desaparece. Dejaremos abierta la vista previa. Veamos algunas otras cosas. Con ella seleccionada aquí, después de retraso de 4 segundos, quiero que esté centrada Quiero que se cierre al hacer clic en el exterior. Eso es bastante común y quiero que el fondo tenga solo un fade over the top. A mí me gusta el 50%. Se ve bastante bien. Y la animación, vamos a conseguir que se disuelva en. Y vamos a darle ahora un adelanto a eso. H aquí. Vamos a darle Restablecer. Recuerda, es clave, 4 segundos. Vamos. Vamos. Oh, casi funcionó. desvaneció, lo cual es bueno. Ahora si hago clic en el exterior, se va. ¿Por qué no apareció el fondo negro ? Echemos un vistazo. Antecedentes. Entonces lo apago. ¿Vías eso? En fin, yo cojo figma. Probablemente sea yo. Después de un reinicio, tres, dos, uno. Vamos. Se desvanece del fondo Puedo suscribirme para ir a mi página de suscripción. no tengo ese botón configurado, pero si hago clic en el fondo, se va. Bien, así que hemos hecho newsletter por correo electrónico. Se puede tener eso para una alerta, digamos, en lugar de un botón. Entonces voy a decir, cuando esto A estas alturas los botones pulsaban, estoy en prototipo encendido A estas alturas, va a ir a este otro marco ¿Tengo otro marco por aquí? Marco. Esas son todas imágenes. Eso es un marco. No quiero que vaya ahí. Vamos a dibujar un rectángulo y va a ser rojo. Digamos que es un mensaje de error. Tendríamos que diseñar eso. Pero por ahora, voy a dar click en el botón y voy a ir a prototipar shifty y voy a decir ir a ahí, pero quiero estar en click Yo también quiero no navegar, recuerden, quería abrir el overlay y quiero que vaya al fotograma 29. He llamado a este modelo pop up. Eso es justo lo que le puse el nombre. Modal es el término genérico para una unidad que no es otra página, me aparece, como un pequeño grupo. Es un modelo. Centrado, cerrar al hacer clic, fondo hagámoslo todo. Eso es todo bueno. Bien, vamos a darle una prueba. Página de inicio. Y vamos a previsualizar. En realidad, solo volvemos a aquí, pulsamos reset. Si hago clic en el botón B ahora, aparece mi pequeño cuadro de diálogo de advertencia, o podría ser como, ¿estás seguro? ¿Seguro que estás seguro? O puede ser que no hayas llenado este campo o cualquiera que sea el modelo emergente. Otra cosa que podrías investigar es solo parte de la terminología. He usado modelo. Si es posible que hayas escuchado eso antes, mis acentos tal vez un poco duros. No modelo, modelo con A. También hay cosas como ventanas pop ups, cuadros de diálogo. Ellos también los llamarán. Advertencias que les llamarán snack bar es interesante. Snack-bar de Google. Eso es interesante. Es lo que sucede en los teléfonos móviles. Está justo abajo en la parte inferior. Es un poco pop up. Los llaman snack bar. Ahí vas. Es una pequeña técnica de prototipado genial para pop ups y eso es todo. Veré en el siguiente video. 78. Cómo hacer y prototipar una herramienta en Figma: Hola, vamos a hacer otra superposición, básicamente exactamente las mismas características con otro cambio, y es este consejo de herramienta donde el overlay no aterriza justo en el medio de la página como hicimos para el boletín de correo electrónico. Mira esto. Cuando haga clic en esto. Aparece justo por encima de la cosa en la que estamos trabajando. Ahora bien este es un video bastante largo solo porque solo lo hago, lo hacemos juntos. Si viniste aquí solo por esta punta de herramienta y como consigues que aparezca donde quieras, voy a ir al grano. Básicamente, todo lo que necesitas hacer es como lo hicimos antes, lo vamos a hacer al click. Vamos a ir a la superposición abierta. Lo único que cambiamos es el posicionamiento. Por defecto al centro, que está justo en el medio de la pantalla, que no es lo que nosotros Bien, queremos decir manual Después manual, puedes moverlo a donde quieras. Aún necesita comenzar la vida fuera de la pantalla y puedes cambiarlo a manual y luego simplemente moverlo donde necesites que aparezca. La misma técnica en click Olay, va a este marco llamado Olay CC aquí arriba, y lo cambio a manual, entonces puedo arrastrarlo Pero para el resto de nosotros que queremos construirlo todo juntos, es pasar el rato y hacer. Vamos a construir este yo y este pop up tot aquí arriba. No voy a hacer esto. He hecho mi página de pago más completa, puse una imagen en el fondo, y luego dibujé algunos rectángulos en texto Sabes cómo hacer eso, puedes hacerlo por tu cuenta. Tengo solo un rectángulo blanco con algo de texto, con algunos rectángulos con esquinas redondeadas que tipo parecen campos en los que podrías escribir tu tarjeta de crédito Así que saltaremos ese pedacito y nos pondremos en la construcción de estas partes más singulares. Vamos a saltar. Bien, así que la larga y aburrida manera de hacerlo es ponernos a punto juntos. Voy a ir, Oh por mi circatol, dibujar un círculo. Voy a ir al diseño. Voy a darle un color de relleno de mi color de acento. Podríamos tener más de un color informativo a menudo la información es verde El éxito es verde En realidad, la información es azul. Necesitas calcular lo que vas a ser para los colores de información para tu sitio web. Er siempre es rojo. La conformación es normalmente siempre verde. La información es azul o gris. Pongamos nuestro yo en medio de esto. Vamos a la herramienta I. En realidad, quiero ponerle una letra I, voy a usar la herramienta tipo, que es T, escriba una I. Y por alguna razón, necesito estarlo. Voy a romper el vínculo con el estilo. Tiene que ser un seraponte. No sé por qué, sí. Se siente como si. Voy a mover mi no. Yo uso analmente mis rastrillos. Bien, mantén un turno para darle un toque. Eso me queda bien. Si las cosas no se alinean, a veces es difícil alinear estas cosas. Si lo omitió antes en las preferencias, aquí arriba en las preferencias F, hay una cuadrícula de píxeles ajustada Puedes apagarlo para que sea un poco más fácil de alinear en el centro de esto. Lo que también puedes hacer es hacer clic en esta I, mantener presionada la tecla Mayús, agarrar el círculo, y podrías usar esta horizontal. El atajo es la opción H o Alt H en una PC. Vertical es la misma opción o Alt, pero V. Yo uso esa bastante. Voy a hacer eso blanco, y este va a ser mi pequeño grupo aquí. Son ambos en los que se puede hacer clic. Voy a cambiar haga clic en ambos . Los puedes ver aquí. Están ahí. Voy a convertirlos en un marco. Voy a decir click derecho, voy a decir enmarcar esa selección ahí una pequeña unidad que pueda moverme. Es como agrupar. Esa es esa parte. Ahora necesitamos el bit que vamos a llegar a superponer. Lo importante para recordar es que puedes diseñarlo aquí abajo, pero necesita terminar fuera del marco, de lo contrario no funcionará. Podría conseguir lo básico aquí. Voy a agrupar la herramienta de marco y me voy, quiero que sea sobre así de grande. Impresionante. Ahora voy a agarrarlo y arrastrarlo hasta aquí y por alguna razón, no tenía relleno. No estoy seguro de por qué. Voy a agarrar este marco. Y darse cuenta que no puedo usar un marco para lo que estoy haciendo. Los marcos tienen que ser rectangulares. Notarás que hasta el círculo que ponemos un marco alrededor terminó con una caja. Este es uno de esos ins donde todavía necesitan la herramienta rectangular. La mitad de la herramienta rectangular son aproximadamente de ese tamaño. Lo genial de la herramienta rectángulo es que puedes entrar en ella y separarla con la herramienta pluma, que es lo que quiero hacer. Quiero ir primero a algunas esquinas redondeadas. Vamos a las ocho. No, es demasiado, cuatro, voy a hacerlo blanco. Voy a agarrar mi herramienta para bolígrafo. En realidad, primero vamos a ir al modo sorteo. Hagámoslo. Vamos a dibujar Modo. Vamos dentro del modo de dibujo, que es Editar objeto. Fui a aquí, modo sorteo. Tengo el seleccionado, voy dentro de él. Puedes hacer doble clic en él o hacer clic en ese botón ahí, que se llamó. Vamos, Dan, puedes hacerlo. Ese de aquí, Editar Objeto. Yo gano. Ahora puedo agarrar mi herramienta pluma y decir, quiero un extra ahí. Quiero uno ahí, quiero uno en el medio, y luego voy a agarrar mi herramienta de movimiento. Y solo arrastra eso hacia abajo así que tengo algunos puntos extra. Oh, es redondeado, incluso. A mí me gusta. Bonito. Podrías usar un triángulo y subirlos juntos usando la herramienta de construcción de formas, pero eso va a funcionar para mí. Yo quiero mover el mío probablemente. Voy a sostener gravas de turno, arrastrarlas a este lado, va a ser mi modor pequeño Voy a agarrar mi dedo tipo, ponerlo aquí. Voy a conseguir HeipTo No estoy seguro de lo que están usando como columna vertebral para su reescritura Voy a enviar un correo electrónico como un correo electrónico a mi jefe. Quiero CVP x. me equivoco? Ahí vas. Oh. Hacer cambios. ¿Que no sea más que cuántas palabras? Uno, dos, tres, cuatro, cinco, alrededor de ocho. Oh, hagamos siete. Increíble lo que le puedes decir que haga. C. Es texto blanco, que no es bueno. No creo que puedas hacerlo para hacer eso. No se puede usar la IA en este momento para cambiar de color, pero ahí vamos. Tampoco es muy bueno. Probablemente lo necesite para decir cosas como, está en el dorso de la tarjeta. Pero de todos modos, eso va a hacer. Entonces voy a pegarlos juntos. Voy a asegurarme de que estén en un marco. Esa es una de las reglas. La superposición no puede cargar un rectángulo sobre él, pero puede cargar un marco. Así que solo puedo seleccionar todo esto y decirte, mi amigo selección de marco. Voy a darle un nombre mejor que el marco 30. Esto va a ser superpuesto, CVB. Me gusta poner primero el tipo de palabra genérica que si tienes muchas de ellas en tu panel de Activos, lo que no tenemos en este momento, todas las superposiciones están agrupadas De todas formas. Creo que ya casi estamos listos para irnos. Vamos a darle un giro Shift E, vaya al modo prototipo. Shift E. ShifTe no funciona cuando estás en modo sorteo en este momento. Debería. Pero no lo es. Estaba en modo sorteo, Shift E no funciona. Tengo que volver al diseño. Y luego ve a Shift D. Gates, voy a decir, tú, amigo mío, vas a ir a allí. No quiero navegar por ahí. Quiero ir a OnClick. Me gustaría que abriera overlay como lo hicimos antes, y por defecto, se va a cargar en el centro. Vamos a darle a eso un mundo rápido para mostrarte. mí me gusta previsualizar en todos los pasos porque si lo rompes, no sabes en dónde a lo largo de los últimos 20 pasos lo hiciste solo sigue previsualizando medida que avanzas y eso funciona Está justo en el medio. No es lo que yo. Bien, antes que nada, quiero agregar bajo el diseño, chiflado. Quiero agregar sombra paralela porque eso se veía un poco raro. Tengo mi estilo de antes, estilo súper impresionante. Puedes ver cómo los estilos empiezan a ser útiles una vez que te estás metiendo en la carne y las papas del diseño necesitas consistencia Quiero que eso sea lo mismo que esa sombra paralela que ahí se aplicó. Bien, entonces vamos ahora a esto. Vuelve a Shifty. Modo prototipo. Voy a hacer clic en el fideo o el alambre, y voy a decir al hacer clic en posición de superposición abierta, no centrada o arriba a la izquierda Hay algunos valores por defecto. Puede hacer clic en el manual. Un manual es genial. Vamos a movernos de esa otra manera. Simplemente puedes moverlo a donde quieras. Tiene que comenzar la vida y vivir ahí arriba. Pero una vez que hayas hecho clic en el manual, puedes arrastrar esto para decir, quiero que aparezca ahí cuando ocurra la interacción de superposición Instantáneo, hagamos una disolución. Cerremos al hacer clic en el exterior. Eso tiene sentido. Vista previa de nuevo, pulsa Reset, que es el Archie al que hago clic en esto Oh. Míranos. Overlay emergente. Ahora, el clic es útil, especialmente cuando estás haciendo móvil. Cuando estás en una versión de escritorio, puede ser más agradable solo ir a Haga clic en el fideo y puedo decir En lugar de onclick, podría decir en hover La razón por la que no funcionará en los teléfonos móviles es que sabes por qué porque no puedes flotar, pero puedes flotar sobre un escritorio Esto es bastante agradable para un escritorio. Solo asegúrate de que cuando estés haciendo esto para móvil, está configurado para tal vez al hacer clic. Nosotros. Es otra superposición emergente. Lo hemos hecho más como una sugerencia de herramienta aquí, pero el término es la superposición y las reglas son solo asegúrate de que el marco que vas a obtener haga la superposición o el pop up o en este caso, una punta de herramienta esté fuera del marco padre. Una de las cosas que atrapa a la gente cuando está trabajando es que pueden hacer una y pueden ser como, se equivocaron eso, y lo que hacen es que van, en realidad, quiero ir a esta otra cosa. Tienen dos aplicados. Lo que termina pasando es que puedes ver por aquí está enloqueciendo. Es como, no puedes tener dos. Obtuve un on hover y un on click y lo que podrías encontrar es intentemos cambiarlo a on click. ¿Ves que es una calificación fuera? Es como, uh, ¿yo lo hago? He pasado años tratando averiguar por qué no puedo hacer clic. Y simplemente no me di cuenta de que en realidad hay dos aplicados a esto. Porque a veces estás trabajando por aquí. Al hacer clic en él, estás como, Bien. Se va a cambiar esto a on click. No me puede gustar, Oh, ¿por qué no? Porque en realidad no estás mirando por aquí. Solo ten cuidado. Si es calificación fuera, probablemente significa que tienes dos de ellos. ¿Bien? Quiero deshacerme de él. Voy a mantener mi on click. Tú solo las menos. Ahora, todo está bien en el mundo superpuesto. Derecha. Esa es una pequeña superposición modal emergente de punta de herramienta. Lanzando toda la terminología. Probablemente ya has oído hablar de todos ellos. Pero de todos modos, eso es todo. Te voy a ver en el siguiente video. 79. ¿Qué son los flujos en Figma?: Todo bien. En este video, vamos a hablar de flujos. Esas son estas cosas. has visto por ahí. ¿Qué hacen? Déjame mostrarte. Todo bien. Entonces, ¿qué hacen los flujos? Básicamente, son solo el lugar donde comienzan los prototipos No los puedes ver, recuerda B en prototipo, Shift E. Conocemos a Dan, lo sabemos, y tal vez los veas. Puede que no. Si no ves uno, es porque no tienes ninguna de tus configuraciones de prototipado. Este no tiene flujo. Reloj. Nada por aquí, pero si lo conecto a algo, mira lo que pasa. Si lo conecto a esto, aparece el flujo tres. Por eso terminas con múltiples porque esto no tiene forma de llegar a esto. Este es un nuevo flujo. Éste sólo va hasta allí. Este de aquí, va a allá arriba. Echemos un vistazo a nuestro anterior. Vayamos al móvil ifo Lo Fi incluso. Tenemos un flujo porque eso va para allá, va para allá, va para allá. Eso es flujo continuo. Si tengo otra página aquí abajo, un frame y un frame, estoy en modo prototipo, así que voy a hacer me sale otro frame? Yo no lo hice. Usted va a aquí. Me sale flujo a porque estos no se conectan. La razón por la que tendrías dos es que realmente puedes compartir con la gente y decir, Oye, en la misma página, quiero que revises la página de inicio, pero también este otro flujo que he creado. Hagamos un ejemplo más interesante. Tengo esto de la biblioteca de plantillas. Se llama Onboarding Logging and Signup ¿Dónde lo encontré? ¿Esta está aquí? No lo sé. Solo busco flujos de registro. Encontré este. Es un buen ejemplo. Hay un registro, tienes verificación por correo electrónico, olvidaste la contraseña. Hay todos estos diferentes flujos de tareas que no se conectan entre sí. No hay forma de pasar de la página de registro a la página de contraseña olvidada. Tenemos el primero. Los he conectado. Solo un flujo básico real para el registro. Voy aquí abajo y digo, olvidé la contraseña va a ir de aquí. En cuanto lo hago, flujo dos arranques porque va, bien, este es un flujo completamente diferente. Y lo bueno de ello es que puedo previsualizar directamente desde aquí, así puedo ir, bien flujo uno, pulsar play, y puedo previsualizar este flujo de registro Entonces puedo ir a este de aquí y previsualizar éste. Flujo dos, olvidé la contraseña. Que no se está cargando. Vamos. No está funcionando. ¿Por qué estás trabajando? Hm. No sé por qué no está funcionando. Déjame pensarlo. Echemos un vistazo a otra forma de llegar a la corriente. Si acabas de pulsar presente o vas a esta otra pestaña, ya verás. Es una manera práctica de compartir con la gente. Se puede decir, Mira, puedes ir a fluir uno o Flow dos. Éste o aquel trabaja aquí. No sé por qué. Así que no hay manera de obtener de esta primera. Al segundo. Para que puedas usar la navegación por aquí. Si no está arriba, puedes dar click sobre esto. El pequeño icono de la barra lateral aquí, y para eso están los flujos. Vamos a nombrar nuestros flujos. Es posible que haya tenido flujos por accidente. Podrías ser como, en realidad, no quiero que eso sea un flujo. Lo que puedes hacer es que puedes hacer click en él o en realidad, puedes hacer click en el fondo sin nada seleccionado, ¿ puedes ver, ahí están mis flujos? No te necesito. Voy a decir que estás muerto. No quiero que nadie tenga acceso a este otro marco. No es un punto de partida, es sólo algo en lo que estoy trabajando. Lo que también puedes hacer es sin nada seleccionado. Por aquí, dice flujo uno. Puedes hacer doble clic en él y decir que este es mi flujo de compra, flujo de compra. Si voy y lo previsualizo por aquí, en realidad solo tengo un flujo, ¿no? Si solo tienes un flujo, no mostrará esto por defecto, puedes activarlo. Flujo de compra. Echemos un vistazo a éste. En realidad, entiendes la idea. Puedes nombrarlos. La descripción también puede ser útil. Flujo de compra aquí. No tengo nada seleccionado. Flujo de compra, puedo entrar aquí y y estuve mirando la pantalla por un tiempo yendo, ¿Dónde carajo está la descripción Ya lo descubrí. Le das click aquí, la etiqueta real que cuelga de ese primer fotograma. Luego está este pequeño icono de aspecto de papel y puedes agregar una descripción. Esto podría ser estos incluyen los cambios de D. ¿Bien? Para que cuando lo previera, ahí tienes. Incluye los cambios para Doug. Se puede cambiar donde comienza el flujo arrastrándolo. Digamos que lo necesitas para empezar aquí y estas son quizá páginas traseras. Puedes arrastrarlos por ahí. Deshacer eso. Otra cosa útil es que sin nada seleccionado por aquí, notarás que junto a este flujo, vamos a crear otro flujo. Nosotros no hicimos eso, ¿verdad? Si no hay flujo para comenzar, puede agregar un flujo, punto de inicio de flujo. Bop va a llamar a esto mi flujo de pruebas. Bien. Ahora sin nada seleccionado, solo hago clic en el fondo y vamos a obtener nuestros dos flujos, ahí están estas opciones aquí. Este de aquí es realmente útil. Digamos que tenemos muchos flujos en nuestro documento, y queremos vincularnos directamente a éste. Se copia al portapapeles. Puedo entrar en mi correo electrónico y a pasos y decir, este enlace aquí, Doug, esto te llevará a mi flujo de compras Entonces podrías simplemente separarlos porque a veces enviar la vista previa a alguien que tengas que explicar, tienes que hacer clic en este pequeño ícono y pasar por estos puede ser un poco complicado. Si solo quieres tenerlos en la documentación o enviarlos por correo electrónico a alguien, veces más agradable solo para ir y pegarlos en enlaces separados Y nos abrimos en un navegador. Se está cargando en Chrome, y va directo a ese flujo ahí. Si quieres ir al flujo de pruebas, solo tienes que copiar el otro enlace. Ya sabes copiar enlaces. Hagámoslo de todos modos. Entonces no tengo nada seleccionado, voy a ir a mis flujos. Oh, no está funcionando. Estoy en mi herramienta tipo. Vuelve a tu herramienta de movimiento, y luego no tienes nada seleccionado, y luego puedo decir que quiero vincular a esta. Y cuando abran el enlace, por defecto comenzará aquí. Hazlo, Dan. ¿Bien? Bien, da clic en el enlace, y ahí va. Salta directamente a mi extraño flujo de tareas de página en blanco. Para eso están los flujos. Justo donde empieza todo, comenzarás a verlas aparecer. Ya te habrías preguntado qué hacen. Ahora ya lo sabes. Todo bien. En el siguiente video. 80. Superposición del menú de navegación móvil deslizante en Figma: Yo Hola a todos. Vamos a hacer esto. Es un menú de navegación móvil que va a deslizarse. ¿Bien? Vamos a darle un adelanto. Voy a dar click en mi menú de hamburguesa pequeña. El menú se desliza hacia adentro, luego puedo cerrarlo y se desliza hacia afuera. Algo muy divertido y táctil en éste. Es usar habilidades que ya aprendimos, lo cual es genial, armando de una manera diferente. Bien, vamos a saltar y hacer un nav móvil en Figma. Bien, voy a empezar con este nav móvil ya hecho Si quieres ver cómo lo hice, lo haré al final de este video, pero por ahora, solo rectángulo con texto en él. Vamos a que funcione. Entonces lo que quiero hacer es asegurarme de que este marco aún no esté encima de esto. Vamos a usar esa función de superposición. Bien, entonces Shift E para pasar a alfarero quiero la página de inicio. En realidad, no, quiero que este menú de hamburguesas de aquí vaya a este móvil nav aquí. Obviamente, estamos en la página móvil Hi Fi. ¿Bien? Entonces cuando se toca eso, no quiero que navegue hacia Quiero que abra una superposición, y quiero que esté posicionada, no centrada, sino arriba a la izquierda. Vamos a darle una oportunidad a eso. Vamos a previsualizarlo. Vamos a previsualizar a este tipo. Bueno, a veces es difícil hacer clic en el flujo porque ese cable estaba en el camino. Ahí vamos. Vamos a hacer clic en el Nav. Apareció. Tipo de. Y entonces no va a desaparecer. Entonces echemos un vistazo. Voy a dar click en el cable. Voy a decir de barril, eso es bueno. Superpuesto abierto, arriba a la izquierda. No quiero que se disuelva. Quiero mudarme. Desde qué dirección conseguiremos que se mueva desde la derecha. Y hagamos que la flexibilización sea agradable. Me gusta la facilidad de entrada y vuelta. ¿Bien? Bueno, en realidad, no, me gusta y salir, pero veamos cómo se ve eso. Pongámonos a jugar, echar un vistazo. Zuko. Es un poco rápido. Se está metiendo en el buzón arriba aquí por si acaso lo que vamos a hacer es hacer un par de cosas. Voy a tener que ajustar mi navegación porque quiero que tú y tú vayan por debajo de eso. Eso significa que tú y tú vas a bajar. Y quiero dar click en este cable aquí e ir flexibilizando. Yo sólo quiero facilidad de entrada y salida. Y hagámoslo un poco más largo. 0.4 segundos. ¿Algo más que quieras cambiar? Sí, eso es. Así que vamos a volver a previsualizar. Sí, sí, más agradable. Todavía necesito mover eso hacia abajo. Podríamos ir y agregar todas las otras partes a la navegación con la batería y el Wi Fi y cosas así. No quiero hacer eso ahora. Ahora funciona, necesito cerrarlo porque no va a cerrar. Hay un par de cosas fáciles que podemos hacer. Volvamos a hacer clic en este cable. Podemos decir ganar haciendo clic afuera, cerrarlo y agregar un desenfoque de fondo. Pero el mío hasta 50 y eso va a hacer una parte de ello. La otra parte que quiero hacer es que quiero que esto funcione. Quiero decir, amigo mío, lo que quiero para ti. Esta es una extraña. No lo arrastre a ningún lado. Lo que puedo hacer es agregar una interacción a este botón que no dirija a alguna parte. Con ella seleccionada, puedo decir, en realidad, solo agrega una interacción. Esto es lo mismo que arrastrar. Si voy y arrastre aquí, he agregado interacción y simplemente prellenó estas cosas Pero si digo, me voy a deshacer de esa. Con ella seleccionada, puedo decir que quiero una interacción, pero en vez de on tap, sí, quiero que esté de barril. La acción va a ser superposición cercana. Ya ves que no va a ninguna parte, tiene ese poco ahora vamos a darle un adelanto a esto, vamos Zouk y luego vamos a Jug Míranos tiene ese poco ahora vamos a darle un adelanto a esto, vamos Zouk y luego vamos a Jug Míranos. No estoy seguro de por qué me gusta. Algo muy táctil sobre un menú que entra y lo cierra. Bonito. Las otras cosas que tengo que hacer es conectar mis botones. Al hacer clic en Inicio, va a ir a esta página aquí. Cuando va a características, va a ir a esta página aquí, y Cart va a ir a esta página aquí. El caso es que se acuerda de la última interacción que hice, probablemente va a hacer algunas cosas raras. Vamos y vamos a las características y se deslizó desde la derecha Apenas lo recordé. Lo que probablemente voy a hacer es pasar por todos estos y en vez de moverme, solo voy a ir a Instantáneo o disolverme. Movimiento instantáneo, y de barril es bueno. Se mueve hacia abajo. Vamos. Instantáneo. Todo bien. Dale una vista previa a eso, y hay una última cosa que creo que vamos a necesitar hacer, y puedo llegar a las características, y luego hago clic en el menú, clic en el menú. Entonces eso no está funcionando. Entonces lo que puedo hacer es simplemente armar esta. ¿Bien? Puedo decir, cuando hiciste clic, ve a esto, haz que se superponga, haz que se deslice, haz todas esas cosas. Pero probablemente sea, bueno, sé que es más fácil. Voy a deshacer eso es agarrar este menú aquí, el que ya hice, copiarlo, borrar este de aquí, borrar este de aquí, y vaya a pegar y vaya a éste y vaya a pegar e ir a éste e ir a éste y pasar. Logo debajo de este del que me voy a deshacer. ¿Bien? Y voy a agarrar este, ir ahí. Y eso es todo. Ojalá eso vaya a funcionar. Sólo revisa. Voy a revisar a uno de estos tipos. Sí. Así que todas las interacciones llegaron. Vamos a darle otro adelanto. Sí, vamos a la página de características. Vuelve al menú, consigue un carrito y vuelve aquí. Nada en mi carrito. Mírennos. Tengo un nav móvil que funciona. Básicamente, usamos overlay para esto. Lo usamos para nuestro menú pop up. Lo usamos para nuestra punta de herramienta, pequeña característica práctica, y ya puedes ir. Estás despedido. Si quieres andar por ahí te voy a mostrar cómo hice una caja con texto en ella, puede ser útil porque las he hecho un poco diferentes con algún espaciado alrededor de ellas, o usando herramientas que ya conoces. Así que anda por ahí si quieres verlo. De lo contrario, te veré en el siguiente video. Seguir adelante. Ver cómo entonces se hizo. Bien, vamos a construir. Bien, entonces la parte de trabajo de esto es vamos a construirlo. Voy a sacar algo que parezca una navegación. Lo voy a poner en mi página solo rápidamente solo para obtener el tamaño correcto. Quiero un poco de área en el lado derecho aquí porque tengo espacio y quiero que la gente sepa que no hemos ido a una nueva página y para que puedan hacer clic en el fondo para cerrarla. Una vez que termine, solo voy a moverlo, lo construiremos por aquí. Vamos a darle un buen nombre. Llamemos a este móvil. Bien. Y agreguemos el logo desde nuestro panel de Activos. Entonces logo, ahí está ahí, J ****** y vamos a ir al modo luz o mirarnos usando varianza. ¿Bien? Y quiero agarrar la herramienta tipo. Voy a tener un botón de inicio. Lo que quiero hacer es hacer que el botón de inicio sea un poco fácil de hacer clic en este momento es bastante pequeño Entonces lo que voy a hacer es hacer una especie de relleno alrededor del exterior. La forma en que lo hago es que necesito agregarlo a un autoframe porque es fácil agregar relleno, ¿verdad Pero no puedes agregar un diseño automático solo al texto. Esto tiene que estar dentro de un marco. Selección de fotogramas, y voy a decir, ahora eres Auto out solo porque quiero esto. No tienes que hacerlo de esta manera. Simplemente puedes arrastrar el marco hacia afuera y mover el texto dentro de él como un botón, pero solo lo estoy haciendo de una manera diferente. Mostrándote diferentes formas. Voy a ir ocho por ocho para que sea una cosa grande y agradable fácil de hacer clic con el dedo. Bien, porque quiero que estos sean botones separados, los voy a tener en cuadros de texto separados Entonces, ¿cuántos quiero? No puedo recordar. Vamos. Oh, deberíamos hacer esto. Hagámoslo bien, Dan. Hagamos de esto ahora un componente. ¿Bien? Entonces nos vamos a ir opción Vamos. Bien, ahora es un componente. Quiero tener, ¿ me quedo con este componente principal aquí? Muchas veces no. Me gusta simplemente tenerlo en mi otra página real. En realidad, esto es solo en el No, eso está todo bien. Se debe cortar y pegar en mi página para componentes. ¿Bien? Y vamos por el botón de Nav móvil. Bien, volvamos a esa misma página. Dónde estamos Mobile Hi Fi, y vamos a arrastrar un activo de eso. Vete tú. Bien. Ahora voy a arrastrar una instancia, una, dos, tres, cuatro. Bien, así que tenemos a casa. Recuerda que podemos cambiar estas instancias para que sean únicas. Tenemos características para el hogar. Voy a llamar a este carrito ahora carrito. En realidad, entonces necesito tres de estos, tu sitio web terminaría con más, ¿verdad? Te has ido. Tú con estos todos seleccionados, si me acerco lo suficiente, puedo ver estas pequeñas líneas aquí. Puedes hacerlo manualmente por aquí bajo espaciado. Solo estamos usando las guías inteligentes aquí. Todo bien. Ahora necesitamos una pequeña cruz en la esquina. A menudo hago trampa y solo uso la misma fuente que estoy usando, golpeo un plus. Por alguna razón a las Xs no les va bien. Nunca se ven como una cruz, y voy a hacerla más grande. No, voy a usar mi CatofEscale, hacerlo más grande, y voy a perfilarlo, así que no es una fuente Se va a delinear trazo. Ahora sissa forma, y voy a girarla alrededor. Y ahora tenemos nuestra cruz. ¿Es lo suficientemente grande como para hacer clic? De nuevo, tal vez tenga que meterlo en un marco. Sólo para darle más área clickable , probablemente sea suficiente Pero de nuevo, podría ir y convertirlo en un cuadro automático en el relleno, o simplemente pasar y arrastrar el marco un poco más grande. Encuadras la cosa dentro de ella, la mueves a lo largo. Ahí vamos. La mayoría en el medio. Lo suficientemente bueno. Ahí vas. Y ahí es donde como que empezamos el video. Quiero que esto se alinee un poco, ahí. Y solo porque me gusta agregar sombra paralela, voy a agregar mi tipo de donde vamos effet. Voy a agregar mi estilo súper impresionante. Voy a romperlo, ¿de acuerdo? Porque probablemente lo necesite para empujar causa en este momento, está empujando hacia abajo. ¿Bien? Todo está emparejando desde el fondo ahí. Voy a ir cuatro y cero, que lo empuja cuatro píxeles al eje X, que es correcto, y lo mismo con este de aquí. Oh, no me di cuenta de que eso te mostraba. ¿Puedes ver ahí? ¿Te está mostrando a qué dirección está apuntando realmente? Oh, es elegante. Dos y cero. Bonito. Bien. Y ahí es donde comenzamos nuestro tutorial. Eso probablemente no fue tan útil. Agregamos algo de texto, pero a veces es bueno verlo. Bueno usar una variante, que es genial. Bien, adelante y hacia arriba. Te veré en el siguiente video. 81. Proyecto de clase 17: Prototipado: Bien, es hora de hacer tu propio prototipo. Bien, quiero que hagas tres cosas. Entonces el modelo pop up, hicimos el boletín por correo electrónico en los tutoriales, el consejo de herramientas para el CVV y la navegación móvil, lo que acabamos Entonces los hemos hecho todos antes. Quiero que te asegures de que has hecho el tuyo. Toma una captura de pantalla y muéstramelo. Cuando estés tomando capturas de pantalla de ellos, estar en modo prototipo para que puedas ver todas las líneas, bien que las conecten todas arriba. ¿Bien? Así que toma una captura de pantalla de todo esto. El tuyo no tiene que ser un boletín. ¿Bien? Te he dado algunas otras opciones, pero puedes elegir lo que quieras, algún tipo de retraso en el tiempo, ¿de acuerdo? Firma de correo electrónico en la confirmación del carrito. Te he dado algunos otros ahí. La punta de la herramienta no tiene que ser para el CVV, podría ser otra cosa. Y cuando estés haciendo eso, vas a tener que armar algún tipo de, ya sabes, datos de entrada de tarjetas e ir a ver otras plantillas, ver qué han hecho otras personas, qué hace que parezca una forma buena y confiable que podrías poner. Pero no me importa cuál es la punta de la herramienta . Puede ser por otra cosa. Lo mismo con el Nav móvil. Que se deslice en el móvil Hi Fi, pero no tiene que parecerse al mío. Se puede deslizar en diferentes direcciones. Se trata más de la mecánica para que funcione. Bien, así que disfruta haciendo prototipos usando muchas superposiciones Te voy a ver en el siguiente video. 82. Cómo fijar la navegación en la parte superior en Figma: Hola. En este video, vamos a hacer una navegación que se pegue a la parte superior donde las cosas se deslizan por debajo. Voy a hacer una versión rápida porque la técnica real es bastante simple. Y luego haré una versión más larga donde miremos un poco de transparencia y haremos una pequeña barra de sándwich en la parte de atrás. Bien, vamos a saltar. Bien, la forma más rápida es que agarres la cosa que no quieres desplazarte. Quieres arreglarlo a la cima. Y tienes que cambiar a prototipo. Eso es lo que sigo olvidando. Sé que mis alumnos olvidan, así que podrías olvidar es que tienes que ir al prototipo, y dices, esta cosa aquí seleccionada. Quiero la posición. ¿ Quieres desplazarte con el padre? Eso es solo desplazarse y se mueve a lo largo. Quiero decir que no, quiero que se arregle. La otra cosa que debes hacer es que necesitas algo a lo que desplazarte. Por el momento, mi contenido termina antes del final de mi página, la cosa no se desplazará porque no hay nada a lo que desplazarse. Voy a duplicar esto, ¿de acuerdo? Y está exagerado aquí, y solo necesito verificar que todavía está en la página principal. Lo puedo decir porque está recortado. Puedes ver por aquí mis capas de página de inicio, tarjeta, la nueva tarjeta que he hecho, tarjeta cuatro que solo voy a arrastrar hacia abajo porque no sé, TOC Ve ahí. Bien, uno, dos, tres, cuatro está colgando del borde, pero sigue siendo parte de la página principal. Tira eso hacia arriba. Sé que está ahí dentro. Hay una última cosa es que necesitas tener seleccionado el marco padre y decir, ¿Qué quieres que haga con este desbordamiento bajo comportamiento de desplazamiento? Quiero desplazarme verticalmente, por favor. Ahora vamos a dar este adelanto, echar un vistazo. Ojalá ahora oo, tenemos cosas para desplazarnos. Lo importante para recordar aquí es que hay tres pasos. Necesitas tener la cosa arreglada. Tienes que estar en el prototipo, ¿de acuerdo? Hazlo arreglado. Y luego el desbordamiento tiene que ser vertical. ¿Bien? Pero no lo haces sobre este objeto en particular. Eso es todo lo que me cuida. A veces. Yo soy como, Oh, sí, haz el desplazamiento vertical. Perfecto. ¿Bien? Es el marco padre real, no eso. Quieres que este desbordamiento esté configurado en vertical. Y también necesitas algo para desplazarte. Tres cosas, eres dorado. Bien, hagamos el largo camino ahora. Un poco de transparencia, y quiero mostrarte solo mi funcionamiento y hay algunas pequeñas cosas interesantes con las que te vas a topar Quiero volver a Design View, así que Shift E para deshacerme de los cables principalmente. Es difícil tener mucho desplazamiento, lo que haces es hacer clic en esta página de inicio y dices, no quiero recortar contenidos No tienes que tenerlo puesto. Eso es más como una cosa visual. Puedes tener algo muy largo, voy a duplicar estos. En realidad, voy a volver a mi panel de Activos. ¿Creé una tarjeta? No, no debimos haber creado una tarjeta. ¿Lo hicimos en la página principal? No tenemos razón, debería, debo agarrar este primero ahora, convertirlo en componente para que pueda controlarlo globalmente. Pero solo por este video, voy a ignorar mis propios consejos y simplemente continuar con algunos de estos. ¿Este de aquí ha terminado este fuera de casa? Echa un vistazo. Entonces no, sigue ahí dentro. Fresco. Entonces no hace falta que vuelva a subir esto. Esto puede ser todo el tiempo que quiera. Bien, voy a ir a aquí. Y cuando lo previsualice, bien, la vista previa, voy a usar el espacio de turno para previsualizarlo. ¿Bien? Y me voy a desplazar ahora, y se puede ver que se desplaza hacia abajo. Todavía está contenida dentro del teléfono. Entérate de lo que quiero decir? A pesar que has hecho que el marco sea más largo. Obviamente, necesitas esto mientras trabajas. Cuando se publica, queda atrapada dentro del teléfono. Ya sea que tengas clipping encendido o apagado, no importa. Lo siguiente que quiero hacer es agregar un poco de transparencia a mi NAV. Lo que voy a hacer es que no tengo navegación para mi móvil como en un componente. Tengo todos estos como marcos separados. Lo que voy a hacer es convertir esto en un componente, Comando opción K en un MAC, Control Alt K en una PC. Ahora es un componente principal. Voy a copiarlo o cortarlo, moverlo a mi panel de componentes porque estamos siendo súper increíbles. Tengo el Nav aquí. Vamos a darle un nombre amargo a este. Llama a este NAV. Móvil. Fresco. Volvamos a nuestra página. Estamos haciendo móvil Hi Fi. Voy a decir, es penal ¿dónde estás? ¿Que te levantaste?” s sacarlo. Mételo ahí, asegúrate de que esté en la página correcta. Esto es solo una doble comprobación. A veces, sí, está en la página principal, lo cual es bueno. Voy a borrarlo, borrarlo. Eliminar. Lo que no quiero hacer es arrastrar el Nav del panel de Activos cada vez, así que voy a copiarlo. Y si copias una instancia, solo obtienes otra instancia. Pegar. Nuevamente, si haces clic en el nombre, como que sabe dónde ponerlo. Y vamos a hacer esta parte morada un poco transparente. Vamos a hacer clic derecho en él. Accidentalmente voy a Maine ahí de alguna manera. O simplemente puedes ir al panel de componentes, y voy a agarrar mi morado aquí y voy a tener que romper el enlace porque no es transparente. Si le hago la apariencia a esto, va a hacer todo el asunto. Quiero romper el vínculo a esto, y voy a decir que esto va a ser del 80%. Hay que hacer algunos de ida y vuelta desde esta otra página. Vamos al móvil Hi Fi lava un poco. Se ve bien en ese contexto. Vamos a darle un adelanto. De todas formas, desplaza la barra espaciadora y ya puedes ver, ya no está clavada. Volvamos a encender todo eso. Tú, amigo mío, recuerda bajo prorototipo Desplazar padre? No, fijado a la parte superior. Ya configuré toda la página para que sea de desplazamiento vertical por lo que debería funcionar Shift barra espaciadora me gusta cuando sube por debajo de ahí Como el color ahí. Lo que podría hacer es elegir el color más oscuro. Voy a hacerlo de la manera adecuada esta vez, voy a significar componente, y voy a ir al diseño, chiflado. Mírennos con atajos. Voy a escoger nuestra biblioteca. Voy a escoger el color más oscuro para empezar y luego romperlo y bajar esto al 80%. Todo bien. Y todo mi móvil Hi Fi debería haber actualizado. Recuerda, por eso los componentes son realmente útiles porque los actualizan todos a la vez. Vayamos a nuestra vista previa. Voy a darle un reset. Ya terminé. Sí, me gusta más ese color. No me gusta Scott machacado en la esquina. Tengo que trabajar en eso. Pero ahí tienes. Desplazamiento de cosas. También puedes hacerlo hasta el fondo. Es sólo otro paso. Si tienes lo que se llaman snack bars que aparecen por la parte inferior. A veces la gente tendrá una navegación en la parte inferior bastante común. Sólo hagámoslo con un rectángulo. Lo que tengo que hacer es decir, hagámoslo a éste de aquí. Sólo consigue la posición correcta y luego la voy a mover porque esta es bastante larga, voy a decir que te gusta un poco de navegación móvil aquí abajo y voy a tener un color de relleno de. Vamos por esta . Voy a romperlo y hacerlo un poquito transparente. Sólo un poco 90%. Realmente no lo quiero ahí. Quiero que termine en esta, pega. Está en la posición correcta, si sabes a lo que me refiero, sabe dónde está la parte inferior del teléfono porque empecé en este. Lo que tenemos que hacer es con él seleccionado. Recuerda en modo prototipo, tenemos que decir que tienes ¿qué es? Desplazamiento padre fijo. Quédate donde estás. Nuevamente, la página de inicio o todo el marco debe colocarse sobre vertical. Ya hecho eso. Vamos a darle una oportunidad. Barra espaciadora, desplácese hacia arriba y hacia abajo. Ahí vas. H. Una cosa que tal vez tengas que hacer. No tengo que hacerlo en esta instancia es a veces que bajo diseño, las restricciones, arriba izquierda funciona para mí porque si cambio el tamaño de mi página, vamos a agarrar mi marco padre Está adherida a la parte superior, por lo que no se mueve. A veces va a ser por defecto a.Este tipo aquí podría por defecto a la parte inferior Entonces cuando cambio el tamaño de mi página, está pegada a esa parte Entonces estuvo bien para el mío. Eso es algo con lo que podrías encontrarte dependiendo de tu diseño. Ahí vas. Hicimos. Sticky nav. Pluma a la parte superior. Te lo recuerdo una vez más. estar en prototipo para que esto funcione. Es necesario hacer clic en la cosa. Quieres que te arreglen. Después posición. El padre de desplazamiento se cambia para arreglarlo. El marco padre que quieres que arregle dentro de las necesidades para permitir el desplazamiento vertical y también necesitas tener algo para desplazarte. Eso debería funcionar. Muy bien, se acabó la navegación pegajosa. Te veré en el siguiente video. 83. ¿Qué son los equipos vs. los proyectos vs. los archivos en Figma?: Hola a todos. Video rápido. Sólo quiero recapitular. Puedo ponerme un poco confuso aquí en tu página de inicio. Tienes equipos. Dentro de esos equipos, tienes proyectos. Dentro de esos proyectos, tienes archivos de diseño. También tienes borradores. Vamos a cubrirlos ahora, ordenarlo en nuestras cabezas. Vamos a saltar. Todo bien. Primero, volvamos a la casa, usemos el icono de inicio en la parte superior, o si estás en un navegador, puedes ir a la F en la parte superior aquí y volver a los archivos. No importa cuál. Entonces tienes tres tipos de archivos, o tres tipos de cosas. Tienes archivos, archivos de diseño los que hemos estado trabajando. Tienes proyectos en los que viven, y todos están bajo este equipo paraguas. Tiene proyectos. Dentro de esos proyectos tiene archivos de diseño. Estos archivos de diseño. Echemos un vistazo. Tengo a mi equipo aquí, a mi equipo de traer portátiles. Tengo muchos proyectos en los que trabajo y dentro de todos esos diferentes proyectos están los archivos de diseño. Ahora, estos proyectos aquí, puedo hacer un nuevo proyecto. Digamos que estamos trabajando en una campaña de correo electrónico. ¿Con quién quiero compartirlo? Simplemente no voy a compartir con nadie, y luego puedo poner mis archivos aquí. Puedo ir a mis borradores que podría estar trabajando en algo y son borradores es nadie más que tu equipo pueda Está oculto para ti a menos que lo compartas. Si entonces vas, Bien estoy listo para compartirlo con el equipo Puedo mover este archivo a este proyecto de correo electrónico aquí. Bien, es sólo una forma de organizarlo todo. Echemos un vistazo a mis proyectos ahora, ha salido de borradores. Está dentro de mi proyecto llamado Email y todos los que tienen acceso a mi equipo, todos con los que estoy trabajando pueden verlo ahora. ¿Tiene sentido? Las ventajas de sacarlo de los borradores y convertirlo en proyectos es que obviamente todo el mundo puede verlo, pero también tu equipo puede colaborar con De hecho, pueden empezar a trabajar en este archivo. Si está en borradores, no pueden verlo, comentar como lo hizo Doug, pero no pueden trabajar en Una de las limitaciones para la cuenta gratuita es que solo puedes tener un proyecto, y dentro de ese proyecto, solo puedes tener tres archivos de diseño. El resquicio web es que puedes tener tantos equipos como quieras Entonces voy a decir, bien, estoy en la cuenta gratuita. He usado mi proyecto y tres archivos. Voy a crear un nuevo equipo. Entonces me sale otro proyecto y tres archivos. Cuando empiezas a pensar en la cuenta Pro es si estás usando mucho Figma y digamos que estoy trabajando con un cliente y luego tengo que compartirlos con dos equipos separados y averiguar dónde están los archivos y esos dos equipos separados que se han unido, simplemente me pone desordenado Doable. Si solo estás trabajando en un par de proyectos para un montón de clientes diferentes , eso funciona perfectamente. Es cuando estás trabajando para un cliente principal y tienes montones de proyectos, montones de archivos, entonces tal vez tengas que buscar la actualización. Se puede cambiar entre equipos. Ya ves que tengo a este otro equipo aquí. Fue creado por alguien con una cuenta gratuita. Se ve que dice que es gratis. Yo no fui creado por mí, fui creado por alguien más. Yo sólo quería mostrarte cómo se ve. Tengo una cuenta paga, pero la persona que creó el equipo no es el jefe, la están controlando, y solo se les permite un proyecto y solo tres archivos aquí. Más útil? Ojalá que sí. Puede resultar un poco confuso en el lado aquí, Muy bien, ¿qué estoy haciendo aquí? Los equipos son como el cliente. Dentro del equipo tiene proyectos, diferentes cosas en las que estás trabajando. Puedes ver aquí algunas de las cosas de traer nuestra laptop, algunas de las campañas en las que estamos trabajando, landing pages. Todos están en proyectos separados y podemos volcar tantos archivos como queramos ahí dentro. Se puede ver que no somos un negocio enorme, pero se puede empezar a ver que hay muchos proyectos en marcha. Entonces necesitamos la cuenta Pro. Ahí vas. Tienes un equipo. El equipo tiene proyectos, y dentro de esos proyectos están tus archivos de diseño. También tienes esos archivos de diseño que pueden vivir dentro de proyectos, pero también pueden vivir en borradores, pero los borradores son un poco limitados en cuanto a lo que puedes hacer Principalmente alrededor de compartir. Todo bien. Ojalá eso haya sido de ayuda. Te veré en el siguiente video. 84. Variante de componente interactivo para casilla de verificación sobre el cursor en Figma: Agárrense a sus sombreros, todos. Tenemos que hacer una casilla de verificación. Mira, que alguien en nuestro prototipo pueda interactuar y vamos a hacer un hover Mira, puedes pasar el cursor sobre él y cambia de color. Bien, se llaman variantes de componentes interactivos. Ese es un muy mal nombre. No son tan duros. Hemos hecho componentes, hemos hecho varianza. Sólo vamos a añadir un poco de interactividad entre nuestras variantes. Es la hora de Ja. Vamos a entrar ahí. Bien, así que voy a empezar con un simple botón viejo. No es un componente. No es nada especial. Este de aquí resulta ser un diseño automático porque quiero el relleno, pero eso es todo. Puedes comenzar con solo un rectángulo fresco si no quieres estropear nada en lo que hayas trabajado y darle un color. Haz que parezca un botón. No necesita texto en esto. Entonces voy a hacer con esto. En primer lugar, voy a crear esto en un componente, Command Shift, K o más allá del diseño. ¿Eso funcionó? Yo sí trabajo. El atajo funciona aunque estés en prototipo. Eso es genial. De lo contrario, diseñe y golpee esta opción arriba aquí que dice, hacer un componente. Ahora, como hicimos antes, vamos a hacer una variante de este botón. En este caso, sólo voy a hacerlo más oscuro. Voy a seleccionar en esto y voy a bajar a mi color y voy a cambiar este por la versión más oscura. Así que ya hemos hecho esto antes, ¿verdad? Voy a arrastrar una instancia de esto o podría agarrarla de mi panel de Activos, y simplemente arrastrarla desde ahí. ¿Dónde se llama? Se llama. No está en la página de componentes. Está en esta nueva página de escritorio Hi Fi. Ahí está ahí. También puedes alargar eso. No importa. Ahora bien, lo que hicimos antes es que solo podíamos ir con este tipo e ir, Bien, hay dos variantes de esto, y puedo cambiar entre ellas. Lo tengo seleccionado y puedo desplazarme hasta la parte superior y tengo estas dos variantes diferentes mal nombradas. Pero ahora podemos sumar la interacción entre ambos. Lo hacemos aquí arriba en el componente principal. Aquí hay varianza. Solo quiero dar click sobre esto. Voy a ir a mi sección de prototipos y voy a decir, quiero que vayas a allí. Hasta ahora, acabamos de arrastrarlo a otras páginas para navegar Mientras que ahora lo que podemos hacer es arrastrarlo entre estas dos variantes, y podríamos decir en un hover, hover hover Mientras se cierne. También queremos cambiar a esta variante, que es mi mal nombrada segunda versión. Y al instante no lo estamos. Hagamos que se disuelva. Ahora, vamos a darle un adelanto. Barra espaciadora de desplazamiento Es un poco pequeño, y mira esto. Estamos haciendo cosas que rondan. Mi ratón es realmente raro hoy. Ahí vas. Lo consigues. Eso. Es agregar un poco de interactividad a los componentes Eso es lo que tiene el nombre loco interactivo porque es interactivo. Es un componente porque lo convertimos en un componente e hicimos variables de ese componente. No variables, variantes. Eso lo digo con bastante frecuencia. Echo de menos esos dos términos arriba. Pero si haces un poco de animación entre ellos, puedes hacer cosas geniales como esta. El truco no es esto, esto tiene que ser en otro lugar. Necesitamos a este tipo. En realidad, quiero agarrar todo el exterior. Voy a cortarlo y voy a ponerlo en la página correcta. Voy a ir a archivos, componentes, y voy a construir este de aquí. Y estás como, hicimos éste antes. ¿Podemos montar éste? Podemos totalmente. Mientras estemos en modo prototipo, puedo decir que esto va hasta aquí. En realidad, quería ir solo a esta de aquí, la versión más oscura. Al hacer clic. Ahora voy a seguir Hover otra vez mientras se cierne, lo siento, y voy a decir cambio a éste, disolver, facilitar dentro y Bien, vamos a agarrar esto y ponerlo en una de nuestras páginas. Pasemos a No podemos poner el cursor estacionario en uno móvil porque hemos resuelto que no puedes flotar en un Vamos a poner en marcha a estos dos. Vamos a darle una vista previa, Shift Spacebar. Se puede ver. Realmente no se puede ver porque es demasiado pequeño, pero sí se ciernen. Ahí vamos. Versión más oscura en Hover. Bien, entonces la H es emocionante. Hagamos algo un poco más mundano. Vamos a hacer pollito Mark. Alguien va a construir uno muy rápido. Puedes verme hacerlo en modo rápido. Ahí vas. Es solo el pentil y la elipse Voy a seleccionar ambos porque lo que quiero hacer es quiero donde terminaron en la página de características. A veces es más fácil simplemente construirlo a partir de esta página, pero voy a vivir con ella. Estos dos aquí. Lo que me gustaría hacer es convertirlos en un marco, luego en un componente. No tengo que hacer un frame primero. Si lo hago un componente, automáticamente lo pegaría en un marco, así que es un pequeño atajo. Aquí abajo, puedo convertirlo en un componente. Es porque estoy en la modalidad de sorteo. Cuando estás en modo de diseño, no tiene esa opción y tienes usar tu atajo o arriba aquí, hay una opción que dice, desaparecido. Yo uso las cargas de atajo, que es el comando de opción K o Control Alt K. Muy bien, ya lo tienes. Vamos a darle un nombre. Llamemos a esto. Marca de verificación. Hagamos una variante de este componente. Dos de ellos. Esta de aquí abajo, voy a llamar. Vamos a darle algunos buenos nombres. En primer lugar, ese tiene que ser el top. Esto no va a ser por defecto, pero en este de aquí abajo se va a llamar. Apagado. No importa si nombres en las capas o aquí arriba. Este de aquí va a estar apagado. Lo que voy a hacer es agarrar esta garrapata. Solo hago doble clic para meterme dentro de él. Voy a ir por aquí y sólo a apagar el globo ocular . Podrías borrarlo. Como antes, necesitamos agregar esa interactividad dentro de nuestro componente que tiene varianza Me encantan estos términos. Vamos a cambiar al modo prototipo, chiflado. Voy a decir, voy a ir a este usando el on click, que en realidad es realmente bueno ahora. Queremos hacer clic en él y queremos realmente quererlo al revés, ¿no? Si lo volviera a hacer, apagaría la garrapata en la primera. Bien, cambiémoslo a esa. Al instante, vamos a darle una oportunidad. Entonces, vamos a arrastrar una instancia de ello. Tengo que hacer clic en el objeto real y arrastrar una instancia o arrastrarla desde tu biblioteca. Vamos a darle un adelanto a esto. Mayús barra espaciadora ahora haga clic en clic, haga clic, haga clic, oh. Sólo fue en una dirección. Entonces funcionó. Y lo que tenemos que hacer ahora es volver aquí dentro de mi componente que tiene varianza, tenemos que agregarle interacción volver de esa manera, y solo debería recordar lo último que hiciste. ¿Todo bien? Ahora vamos a darle otra oportunidad y listo. Haga clic, haga clic, haga clic, haga clic. Es mucho trabajo, Dan, para una marca de verificación. Eso es lo que estamos haciendo. Y es muy útil ver la potencia de ambos componentes, ¿de acuerdo? Porque puedo reutilizar estas cargas y cargas a través de mi documento. Puedo tomar prestadas las de otras personas, ¿de acuerdo? Pero ahora solo tengo esta pequeña unidad que puede cambiar entre, pero puede hacerlo automáticamente, ¿de acuerdo? Ahora hay una interacción con él. En lugar de antes, lo arrastramos, y yo diría, bajo diseño, cambiaría la propiedad aquí. Y recogerlo manualmente. Ahora, las personas que prueban mi sitio web o mi aplicación pueden interactuar con él. Eso es un montón de términos. Es un componente que tiene una variante y ahora le hemos agregado algo de interactividad. Por eso se les llama variantes de componentes interactivos. Todo eso es. Hicimos una casilla de verificación. Te voy a ver en el siguiente video. 85. Microinterruptor de palanca de interacción en Figma: Hola, vamos a hacer una micro interacción. Fuera de este interruptor de palanca. Estás como, ya hiciste un interruptor de palanca, pero mira esto. Cuando hago clic en él. Mira que se pone verde. Y mira esa encantadora interacción. A mí me encanta aprender esta cosa. Vamos a aprender la micro interacción. Entonces, básicamente, una micro interacción es similar a lo que hicimos en el último video cuando teníamos una casilla de verificación, pero una micro interacción agrega un poco de animación para ayudar a comunicar lo que está pasando A agrega un poco de alegría a la operación. Se llama una micro interacción. Hagamos que suceda. Vamos a usar todas las herramientas que ya aprendimos. Es muy fácil de hacer. Deja de darle clic hacia abajo. Todo bien. Ponte en marcha. Todo bien. Voy a comenzar con este interruptor de palanca que hicimos antes en el ejercicio de sombra paralela. Voy a hacer el mío un poco más pequeño. Es solo una elipse con otra elipse encima con una sombra paralela ¿Bien? Vuelve al ejercicio de sombra. Si no lo has hecho, no necesita una sombra paralela. Voy a cambiar el mío para que no tenga esto. Voy a tener un relleno de simplemente como un gris porque está apagado. Ese círculo tiene que ser un poco así. Y igual que antes, voy a tener esto necesita ser un componente. Vamos. Opción K, opción de control K en una PC. Entonces es un componente. Este componente necesita dos variantes. En esta variante inferior, voy a tener el círculo de este lado. Bien, eso entonces tenemos que ir a prototipo como antes. Estoy usando Shifty voy a decir que este se reduce a esto ¿Qué va a hacer? ¿Cuándo lo toco? Genial, le va a cambiar. Pero la diferencia aquí es configurarlo instancia o disolver, vamos a usar smart animate. Mientras estamos aquí, bien podríamos conseguir este vuelva a subir hasta aquí cuando se haga clic Debería hacer todos los valores por defecto. Vamos a darle una oportunidad. Recuerde, no puede obtener una vista previa del conjunto de componentes. Se necesita arrastrar una instancia de ello, no todo el asunto, una de estas partes. Haga doble clic para entrar y acabo de mantener presionada opción y arrastré otra versión o mantenga presionada la tecla Alt o puedes arrastrarla desde Ahora tengo este interruptor de palanca bastante grande Vamos a darle una vista previa, Shift barra espaciadora, y va a comenzar en la página correcta. Ojalá lo haga. Lo hace. Y listo. Haga clic. Bonito. jugar con la flexibilización porque es un poco raro Cambiemos el color también, estamos aquí. Podemos mantener esto abierto. Te quedas ahí, y voy a decir que este de abajo de aquí va a estar de vuelta en vista de diseño. Se va a cambiar a un botón de encendido. Color que es verde porque estoy encendido ahora. Excelente. Y debido a que Smart se anima, debería funcionar Vamos a darle una oportunidad. Alternar, alternar. Puedes ver lo útil que es tener esto abierto todo el tiempo o como yo, lo tendría abierto en esta otra ventana de escritorio tengo abierta, pero no puedes ver esa. Tiene los chistes de mi papá en la lista. Bien, ese es un interruptor de palanca genial. Vamos a meternos con la flexibilización muy rápido porque eso es un poco raro. ¿Bien? Así que vamos a volver al modo prototipo, y voy a hacer clic en éste, y voy a decir facilidad. Voy a entrar y salir tranquilamente. Déjame hacerlo un poco más rápido y lo mismo para los demás. Tienes que hacer clic en ambos cables. ¿Bien? Este va a ser fácil de entrar y salir, y va a ser 0.2 de segundo. Bien, vamos a darle una oportunidad ahora mismo. Ok. Mejor. ¿Qué pasa con la facilidad de entrada y salida? Atrás. Hagámoslo por los dos. Ahora hazlo. Hay un botón excitado. Todo bien. Eso es usar exactamente los mismos ejercicios que el último proyecto. Solo quiero mostrarte algunas instancias diferentes, y hemos lanzado una animación inteligente y un cambio de color Yo lo escribí cambio de color. Pero la animación inteligente se ve genial. No puedo dejar de darle clic. Es un pequeño juguete fidget Todo bien. Eso es. Hemos hecho otra variante de componente interactivo, y esta animación aquí se consideraría recordar una micro interacción, solo un poco de algo que es un poco más emocionante y un poco de alegría, ayuda a comunicar lo que estamos haciendo. El color es bueno. El saldo es muy claro. Micro interacción. Todo bien. Eso es. Te veré en el siguiente video. 86. Proyecto de clase 18: Interacción micro: Tiempo de proyecto de clase. Vamos a hacer algunas micro interacciones o algunas variantes de componentes interactivos. Las micro interacciones son más agradables. Hacer los tres que hemos hecho en la clase, así que una marca de verificación Quiero que lo conviertas en una cosa tipo de permiso de boletín de correo electrónico, no tiene que ser exactamente eso, pero puedes ver aquí lo he convertido en unirse a nuestra lista de correo, pequeña marca de verificación Quiero que también hagas el botón Hover y el interruptor de palanca Asegúrate de que cuando hayas hecho tus conjuntos de componentes, terminen no solo tumbados en todas tus páginas que en realidad están en tu página de componentes y manténgalos todos separados bien. instancia real del componente debe estar en sus respectivas páginas. El Google Switch encuentra algo creativo que ver con eso. Pero en serio, lo que quiero hacer es ver esto tomar una captura de pantalla de este grupo, y subirlo a la sección de proyectos. Ahora bien, si sabes cómo grabar tu pantalla, me encantaría ver un video de la misma, usando Vmeo o enlace de YouTube. ¿Sabes cómo hacer eso? Eso no es esencial y compártelo en redes sociales, lo que has hecho. Me encanta verlo funcionar, especialmente. Bien, feliz Edificio de Micro Interacción. 87. Cómo cambiar la miniatura para los archivos Figma: Cada uno. Una simple. Vamos a actualizar la miniatura de nuestros archivos de diseño porque por defecto, solo escoge cualquiera que sea las primeras páginas, y a veces probablemente ya estés buscando en tus borradores yendo, ¿qué hace éste? ¿Cuál es este? ¿Qué está pasando aquí? Vamos a actualizar esto, especialmente en nuestro proyecto para que se vea como algo en los proyectos representativos del proyecto, y esté en ángulo, lo que lo hace genial. Soy tan poco guay. Vamos a entrar ahí y mostrarte cómo actualizar estas miniaturas solo para que la vida sea un poco más fácil encontrar archivos Bien, entonces estoy en mi proyecto de equipo. Voy a ir a Scott Wallet y se puede ver la miniatura, no muy representativa Puedes entrar en ese archivo y decir, básicamente es solo mostrarte cualquiera que sea la parte superior de las páginas, lo que sea que esté aquí. Simplemente puedes cambiar lo que hay en esa primera página. O puedes ir a una de tus páginas que dicen escritorio i Fi y para decir homepage, puedes hacer clic derecho en el nombre y para decir set as thumb ahora. Es más representativo, ¿verdad? Vuelvo a la casa aquí. No se actualiza. Tienes que cerrar Figma, abrirlo de nuevo, y ahora ese es tu pulgar ahora Esa es una buena manera de hacerlo. Otra forma es ir a lo que mucha gente. ¿Van a entrar en el documento? Crearán una nueva página, llamarán portada, la pegarán en la parte superior. No hay nada en esto por el momento. Pero lo que podemos hacer es decir, quiero enmarcar. Quiero un marco de si bajan a esta lista, hay uno llamado comunidad Figma, y este archivo de portada enchufable Archivo de portada es lo que queremos. Este es su estándar de 1920 por 1080 píxeles de ancho, y podemos pegar una imagen en él. Voy a ir a buscar algo. Usemos el móvil, el móvil Hi fi, y voy a hacer una captura de pantalla de todos estos. Mira. Bien, y vuelve a mi portada, encuentra mi captura de pantalla. Ahí está ahí, volcarlo en esta imagen, y usar una imagen. En lugar de copiar y pegar marcos y cosas de otras páginas, podrías hacerlo, pero terminas con duplicados de También te pierdes lo muy real. Todo tiene que estar de su lado. No sé por qué. Pero no conozco la industria del diseño UX cuando estás exhibiendo algo, necesita ser girada de lado, como una pistola en las películas, amarrada un poco Bien, voy a usar este color de relleno. Voy a usar lo mismo que esto. Bien. Oh, va a ser genial. Voy a simplemente verificar que esto esté configurado como la miniatura Ahí es donde abres muchas plantillas. Y esta primera página que revisas no hace nada. Intenta hacer clic en cosas, muchas veces es solo una captura de pantalla de las cosas. Hay un elemento de marketing a la hora de encontrar plantillas. Pero para ti, solo quieres que te sirva, no tienes que tenerlo en el ángulo, pero no lo sé, se siente como reglas de diseño UX. Tengo que dejar Figma y volver enseguida. Oye, Presto, míranos. Todo malhumorado en el ángulo. O bien establecer un marco como la miniatura solo para hacerlo más fácil o hacer una portada, la página tiene que estar en la parte superior, y tiene que estar en ángulo. Ahí vas. ¿Bien? Sólo para sortear el dolor de, te voy a mostrar algunos de mis borradores, estás como, ¿Qué es esto? ¿Qué es esto? Este de aquí ni siquiera tiene página porque podrías haber estado trabajando en la segunda página. Éste de aquí, no tan útil. Este de aquí, ¿qué es eso? ¿Éste de aquí? Nuevamente, es difícil saber qué están creando estas cosas, ¿ puedes ver lo que han hecho? De hecho, abramos éste, a ver qué han hecho. No tengo idea, por cierto. Entonces han creado un moodboard de primera página, es decir, lo han creado en un texto De hecho, diseñaron su específicamente para esto. En lugar de solo una captura de pantalla. Se nota que pondrán un poco de esfuerzo en diseñarlo. Si miras un ejemplo más, mira este, por favor sé JB Yo solo les dije a todos que hicieran un JP. Oh, hay una imagen de portada. Oh, perfecto. Entonces esta portada, incluso han usado la palabra correcta, y puedes ver que esto es en realidad solo si le echo un vistazo, lo es. Si haces clic en él, es solo una imagen. Así que han diseñado esto ya sea en figma o en otra cosa y simplemente lo han dejado caer como una imagen En la parte superior. Ahí vas. Solo una pequeña manera agradable al final ahí para ordenar tus archivos. Todo bien. Eso es. Cómo hacer un pulgar ahora. Oh, gran video, Dan. Todo bien. Vamos a saltar al siguiente video. 88. Descripción rápida de los sitios Figma: Todo el mundo. Bienvenido a la descripción súper rápida de algo llamado sitios Figma Hemos diseñado nuestro sitio. Ahora queremos construirlo realmente. Hay un par de opciones que tienes. Puedes salir con un desarrollador, podrías reconstruirlo en algo como WordPress o podrías usar ellos lo llaman gota de dragón o Wizzzywig Lo que ves es lo que obtienes editor, donde usas un enfoque más visual en lugar de un enfoque de codificación para el diseño web. Los sitios Figma son nuevos. Es un competidor directo de algo así como Webflow. Lo diseñé infigma, ahora necesitamos construirlo. Sitios Infigma es una manera de ir a hacer eso. Es todo un curso por sí solo, pero quería darte un recorrido rápido por ahora para darte una idea de lo que es y por qué podría ser adecuado para ti. Tírale algo, Dan. Bien, entonces este es el archivo de diseño que hicimos. Empecé a reconstruirlo en sitios infigma, lo que haremos en Y puedes ver aquí escritorio, tableta, móvil. Voy a previsualizarlo y se puede ver eso en el escritorio, se ve así, pero se puede ver cuando se descompone a tablet Bien, cambio mis tarjetas. Cuando me pongo al móvil, vuelve a cambiar. Todo es muy encantador y receptivo. Es muy chulo. Se llama sitios Figma. Déjame darte un rápido recorrido por ahora. Recuerda, solo un resumen rápido, no te enloqueces. No es difícil, pero es diferente. Más que un módulo en este curso. Pero quiero mostrarte de todos modos, vamos a saltar. Muy bien, sitios Figma Voy a ir ya sea puedes presionar el nuevo botón e ir al sitio Figma o a casa puedes ir a crear y puedes escoger un sitio De cualquier manera, tenemos un nuevo sitio. Lo bueno de esto es que está usando muchas de las mismas herramientas que Figma. Ahí está el diseño Figma, lo que estamos aprendiendo a diseñar sitios web Después está la parte del edificio, que son los sitios Figma. Vamos a comenzar con un sitio en blanco. Podrías comenzar con una plantilla, y te está dando una versión de escritorio y móvil. Un par de cosas que tenemos que hacer si queremos mover las cosas. Podemos copiarlo y pegarlo. Trabajo totalmente. Vamos a empezar yendo, bien, hemos construido nuestro sitio alrededor de este sitio 14 40. El valor predeterminado aquí es 12 80. Vamos a ajustar eso. Hay mucho copiar y pegar porque no es tan fácil como hacer sitio web Afortunadamente, nuestro móvil es ¿cuál es nuestro móvil? Nuestro tamaño de móvil es móvil Hi fi va a ser. Elegimos uno de los tamaños de iPhone. Es este 393. Solo asegurémonos de que el móvil sea 393. Podrías hacer es que nosotros también hagamos una vista de escritorio. Lo siento, una vista de tableta. Lo que vamos a hacer es ir más y decir, también quiero diseñar mi tablet. Necesitamos construir un sitio web que se vea bien tanto en escritorio, tableta y móvil. También podrías hacerlo en figma mientras vas. Simplemente mantenemos este curso un poco más apretado quitando la tableta, pero hay que considerarlo. Bien, otras cosas que vamos a necesitar. Vamos a hacer algo sencillo. Vamos a dibujar algo. Vamos a agarrar. Vamos a dibujar una caja de héroe FK para la herramienta de marco. Todos esos atajos que has aprendido, y te golpearon durante el curso, aún los tienes. Voy a arrastrar esto y voy a pegarlo a los lados aquí así. Voy a darle un color de relleno de cualquier cosa. Lo bueno de ello es que cada vez que diseñas en algo en el escritorio, te muestra cómo se ve en tablet y móvil, desafortunadamente, en realidad esto está funcionando. Se puede ver que este de aquí tiene esta pequeña brecha aquí. Es porque aquí hay un pequeño hueco. No se ha pegado a un lado. He dejado un pequeño hueco, así que voy a asegurarme de que sea arrastrado ahí Ojalá de este lado, voy a decir que estás drag quiero chasquear a los bordes, y luego este lado. Digamos que quiero que sea esta distancia de los bordes. Que en este caso es 27 sólo por casualidad. Lo que puedo hacer ahora es que puedo ir y previsualizarlo. Puedes presionar el botón de vista previa, o termino golpeando mucho a este. Va a previsualizar la vista de escritorio, la vista de tableta y la vista móvil. Vamos. Esto se llama Responsive Design, y aquí es donde pasamos la mayor parte del tiempo cuando estamos construyendo un sitio web. Necesitamos diseñarlo en figma, conseguir que los clientes firmen, y están como, Sí, me encanta Tienes que ir a construirlo para hacer toda esta estirabilidad. Porque si miro esto, puedo arrastrar esto, así puedo decir, Bueno, tu laptop es de este tamaño, mi laptop es de ese tamaño. Lo necesitas para responder por todos los diferentes tamaños. Hagamos un poco de capacidad de respuesta. Sigue volviendo a esa pestaña. Pulsas un pequeño botón atrás ahí. Dentro de este marco, vamos por un poco de tipo. He tenido todo tipo de atajos ahí. ¿Qué dibujé? No estoy seguro. He escuchado un montón de cosas. Lo que vamos a hacer es agarrar la herramienta tipo, click adentro aquí y voy a escribir. Sólo voy a subir la fuente. Lo bueno de esto es que escojamos una fuente realmente gigante es que aparece aquí. De vuelta a mi herramienta de movimiento, aparece aquí y aparece aquí. Realmente no se puede ver en este. El panel Capas aquí, tengo escritorio, tablet y móvil. Si agrego algo al escritorio, se aplica a todos ellos. Está aquí en mi móvil. Si hago clic en él, por aquí, ¿dónde está simplemente colgando de aquí? Lo que tengo que hacer para el móvil es que podría decidir, en realidad, necesito que esto esté en dos líneas. Las tres líneas, y quiero que la fuente sea más pequeña, algo apropiado para mi dispositivo móvil. Aquí vamos allá. Lo que está haciendo Figma o los sitios Figma está haciendo es decir que, Bien en esta página aquí, voy a moverla arriba sin una buena razón Vamos a previsualizarlo. En el escritorio, es grande y en el medio en la tableta está arriba por la parte superior aquí abajo y aquí abajo en el móvil, es una fuente más pequeña, y se divide en dos líneas. Esa es la diversión para diseñar para web. Tienes que pensar en todos estos tamaños diferentes y luego ignorar los bits intermedios, estás como, qué estás haciendo por aquí, tú, ¿de acuerdo? Es solo una visión general rápida. Construyamos algo, algo. Vamos a deshacernos de este mensaje de Hera. Si lo borro mi página de inicio o de mi escritorio, se ha ido de todos ellos. Lo que quiero hacer ahora es echemos un vistazo a hacer esas tarjetas de esta. En primer lugar, nuestras tarjetas, usaremos la de escritorio. Lo hemos construido alrededor de nuestras columnas. Lo genial de ello es en este momento, no puedo copiarlo y pegarlo. Las columnas recuerdan al Comando G. Pero conozco lo básico. Vamos por aquí y digamos pelos de escritorio, S guía de diseño todavía aquí? Impresionante. Aprender dos herramientas para una, lo cual es realmente genial. Quiero que sean columnas. A mí me gustaría que fueran un contador de 12 miembros. Quiero ir a tener un margen en los bordes de 100 y creo que la brecha fue de 32. Entonces ahora eso coincide. En estos, no aplican. No funcionan muy bien. Este de aquí, lo que podría hacer en una tableta, podría bajar a seis porque es simplemente más fácil de tratar. Márgenes de 50, y voy a bajar la brecha a 24 en el móvil, voy a bajar a seis y voy a tener márgenes cero en los bordes, y la brecha va a ser 16. Puedes personalizar todas las cosas para los diferentes. Los llaman puntos de interrupción. Eso solo significa que cuando este tamaño se baje a esto, cualquier cosa por debajo de 1,400, romper y hacer esta cosa nueva, que nuestro caso es solo las columnas Vamos a agarrar algunas cosas. Aquí es donde es divertido. Puedo copiar esto y puedo venir aquí y pegarlo. O si solo lo pegas willy nilly, podría terminar si no tengo nada seleccionado, y lo pego, elegí ponerlo a través como una nueva página y no puedes simplemente arrastrarlo fácilmente Voy a deshacer eso. Voy a entrar en mi escritorio, pulsa pegar. Notarás que aparece en todas mis diferentes páginas. Vamos a agarrar a los otros dos, y tú. Copia a este diseño, asegúrate en mi escritorio, presiona pegar, y deberían aparecer en todos ellos. Lo que haremos es irnos, R, todos están bien alineados. Perfecto. Bien, así que lo he diseñado para escritorio. Eso se ve genial. Y lo que terminas haciendo es hacerlo funcionar primero en el escritorio y luego hacer estos otros un poco más tarde. Porque lo que quiero hacer es, sólo vamos a previsualizarlo. Vamos a cómo se ve en casa. Es una especie de trabajo. Es hacer algunas cosas raras con los huecos, ¿ves? Entonces lo que puedo decir es volver a aquí, puedo decir, fuimos Este solo está usando left. Entonces va a estar a 100 pixeles de la izquierda independientemente de lo que haga. Lo que podría decir es ir a la izquierda y a la derecha. Ahora si tenemos una vista previa Bien. ¿Lo puedes ver ahí? ¿Es mucho más grande? Puedes ver que se estira porque está usando la izquierda y la derecha por sus dimensiones en lugar de solo la izquierda. Estas son las cosas que son útiles cuando las aprendes en el producto que te gusta, si, entiendo Pero a la hora de hacer el sitio web, es mucho más importante. Yo voy a hacer lo mismo aquí. Voy a decir que tú y vas a ser de izquierda y derecha, y ojalá hagas una prueba. Hay muchas pruebas. Haces algo, lo prueban, hacen algo, lo prueban, nunca se lo saltan. Pero en esta vista de escritorio, es bastante buena. Está a 100 píxeles del borde y responde. Todo es blandito Cuando se baja a la tableta, va, Boop sigue funcionando Así que ahora podemos volver a la tableta y arreglar esta. Seis, haz que el escritorio funcione, luego ve a la tableta y vete, Bien, quiero que estés ahí Quiero que cubras. ¿Ves? Necesito que estos sean más pequeños. Sea que los hicimos receptivos, recuerda antes , estás como, hicimos esto abajo por la parte inferior izquierda y estás como, lo hicimos receptivo. Como, ¿por qué nos molestamos en hacer eso? Es porque ahora lo hemos aprendido. Este pequeño objeto abajo de aquí está pegado por el fondo. Recuerda, aprendimos fondo y conseguimos que se quedara a la derecha. Es para que podamos hacer esto más adelante, podamos ir, perfecto. Fácil de cambiar el tamaño. Tenía sentido cuando estamos haciendo Figma, mucho más sentido cuando realmente estás diseñando el sitio web o construyéndolo Lo gracioso aquí es que hay uno, dos, ¿con el tercero ir? Al igual que el móvil, es posible que tenga que pasar a la vista de su tableta. Tengo algunas tarjetas mal nombradas. Vamos a cerrar todos estos. Tengo 18, que puedo ver, 19, que puedo ver y 20. De alguna manera está por ahí. Esta es una versión beta de la misma, así que van a haber cosas que van a mejorar con el tiempo, eso podría no pasarte a ti. Ahora, ¿qué voy a hacer aquí? Este es el enigma, como, Oh, aquí, Lo que puedes hacer es decir en tablet, voy a ir a la apariencia y voy a decir, te vas. Estás ahí, todavía ahí, solo que no te vean. En el móvil, este de aquí, podría decidir que en vez de este sea el primero, voy a reorganizarlo Voy a decir que eres el primero, vas a ir a los bordes. Ahora, en figmacytes si lo arrastras al borde y se ajusta, lo cambiará a izquierda Verás este puesto a la derecha. Pero si digo que estás aquí y estás ahí, ves que lo hizo. Puedes cambiarlo manualmente obviamente, pero lo hará automáticamente. En mi dispositivo móvil, quiero alargar esta cosa. Bien, más largo más tiempo. Verás que éste se va pegando al fondo porque piensa que eso es lo que quieres. No, quiero que sea la parte superior, que no cambie de tamaño y se mueva hacia abajo Usas la parte superior como te gusta punto de anclaje y lo que podría hacer es madurar un poco más. En realidad, las columnas aquí no son tan útiles, en el móvil, voy a ir al globo ocular y apagarlas, y voy a encontrar la tarjeta que falta ¿A dónde fue? Estaba encuadre 20. De alguna manera está por ahí. Así que incluso hemos jugado con la orden, ¿de acuerdo? Y lo bonito es que está usando las mismas herramientas. Al igual que Webflow hace esto, Framer hace esto. Hay muchas otras herramientas que son esto como sitios Figma Es como una copia directa de esos, pero usa el mismo lenguaje y la misma terminología. Puedes copiar y pegar desde Figma. Y cuando estás diseñando, una vez que hayas construido algunos sitios web, cuando estés construyendo esta cosa, también podrías esforzarte ahora para que esta cosa sea, ya sabes, arreglada al fondo y a la derecha porque sabes que te va a ahorrar tiempo más adelante cuando estés construyendo el sitio. Bien, vamos a previsualizarlo. Vista previa todo el tiempo. Y si no haces una vista previa por un tiempo y la rompes, no sabes con certeza qué rompió eso se rompió. Bien, entonces estás bien. Oh, estás trabajando bien, y también trabajas bien. ¿Bien? Lo genial de esto es que ¿puedes ver tableta? Me deshice de esa, la apagé, pero vuelve a encenderse en el móvil, y cambié el orden de la misma. Impresionante. Hay algo raro en los sitios donde tienen esta barra, la barra deslizante que no me gusta, tipo de cubiertas en. El sitio web real lo publicaremos con este pequeño trozo aquí, pero estas pequeñas barras deslizantes en el camino Ojalá, algo que se vaya como. Échale un pequeño vistazo en el medio porque, aquí se ve bien. Qué pasa cuando yo, está haciendo esa cosa otra vez, que lo hizo en el escritorio. El escritorio funciona, pero en la tableta no lo hace. Necesito ir a Tablet. Archivo incorrecto. Retroceda de esto. Quiero ir a Tablet ¿dónde estás? Básicamente lo que hicimos por la página principal, dijimos, vamos a conseguir que no te quedes, sino a izquierda y derecha, izquierda y derecha. Vista previa de nuevo. Ojalá ahora, a veces tengas que ir 21, otro punto de quiebre ¿Bien? Oh, mucho mejor. Tiene este tipo de me gusta, ¿puedes ver ahora cómo hemos diseñado para un teléfono que es así de grande, pero también así de grande, pero también así de grande Y una tableta que pasa a ser así de grande, pero un poco más grande, ya sé que esa es tableta. Eso es teléfono gigante y éste de aquí, tableta. Pero cuando se hace más grande más grande grande grande más grande. Entonces eventualmente cuando llegue al tamaño del escritorio, dice, derecho, escritorio puedes tener tantos puntos de quiebre como quieras. Puedes ir por el hábito sigo volviendo ahí atrás. Podrías tener un escritorio súper grande que sea más grande que 14 40. ¿Qué haces con eso? A lo mejor conseguiste una cuarta. Ahora, he escogido algo que tenía sentido para ti ahora a tu ritmo. Este tiene que ser todo su propio curso Figma sitios porque el diseño web es más grande de lo que solo puedo hacer un pequeño módulo aquí Si te gusta, te dejaré un enlace en los archivos de ejercicios para un curso de Figma sites Aún no he hecho uno, pero si te interesa, puedes preinscribirte para ello y si consigo suficiente interés, lo haré. Por ahora, sin embargo, algo como Webflow funcionará. Ese es un curso que tengo. Puedes ir a comprobarlo de donde sacaste esto no quería hacer es dejarte alto y seco en este curso de, como, ¿qué hago a continuación? A menudo, va a un desarrollador para que construya tu sitio para ti y no usará sitios Figma. Estarán codificando el sitio, usando algún otro marco, tal vez oración de palabras, otra cosa y solo usarán tus diseños como no inspiración, pero van a sacar las imágenes de él, el texto, los tamaños, todas esas cosas pueden salir. Pero ahora con algo como sitios Figma o flujo web, puedes construirlo ahora por tu cuenta Puedes publicarlo, vamos a publicarlo. Está publicado nuestro sitio, ¿de acuerdo? Todavía no lo está publicando en un dominio adecuado. Se puede poner eso. Bien, voy a ir a vamos a este de aquí, ver el publicado. Echemos un vistazo. Me estoy abriendo en mi navegador. Eso en realidad está en Internet. Podría mandarle eso a alguien ahora, ¿de acuerdo? Y no está haciendo mucho. Vigila, excepto que tiene puntos de interrupción de barrido que acabamos de elaborar. Hagamos un par de últimas cositas solo para darte otro poco más de sentido de cómo funciona esto. Hemos diseñado solo la página de inicio. Lo que podemos hacer es como antes, podemos duplicar esta cosa. Esta se va a llamar Mi página de características. En esta página de características, me voy a deshacer de estos cuadros en mi página de características, voy a hacer esto realmente grande, voy a poner algún tipo en él. Sólo voy a ajustarlo para los diferentes puntos de interrupción Estoy haciendo algunas cosas muy malas. Hagamos esto. Todas las características que aprendimos sobre las interacciones donde puedo decir, cambiemos al Comando E, lo cual es increíble. El mismo atajo que el diseño Figal. Puedo decir que cuando alguien haga clic en esto, va a bajar a la página de características. Ahora cuando presento esto, haciendo mi sitio web, voy a mis botones, lo he convertido en un botón y hago clic en él y voy a mi página de características, que he diseñado en base a mi archivo de diseño FIGMA También puedes hacer todas las demás cosas, cosas regulares del sitio web. Si voy a ajustes. Puedo decir, aquí está el título de mi sitio, puedo agregar todas mis cosas de SEO. Puedo agregar Google analytics. Hay muchas cosas que puedes hacer. Puedes conectar un dominio real. Entonces podría ser traer tu laptop.com, diseñar el sitio para el cliente, probarlo porque es rápido Hablamos al principio, por qué nos molestamos en usar Figma, no solo construir un sitio web porque es súper rápido construir un concepto, construir un wireframe, probarlo, construir un diseño, conseguir que todos los interesados lo firmen, y luego ir y Porque entonces cuando vas a construir, tienes que pasar años o no edades. Tienes que pasar mucho tiempo. Salgamos de aquí. Decidir esto sobre esto tiene que ser de izquierda y derecha. ¿Entra en una caja? ¿Cómo fluye? Mientras que en tu archivo de diseño Figma, puedes simplemente arrastrar un botón para decir que estás ahí Bien. Pero cuando estás diseñando un sitio, qué pasa en todos los tamaños, tienes que pensarlo, A. Eso está unido a la parte superior está unido a la izquierda? ¿Qué tamaño tiene en el móvil? ¿Cómo se ajusta en los que están entre tallas? Tarda mucho más, pero cuando tienes el cierre de sesión del archivo Figma, el archivo de diseño, entonces simplemente puedes entrar en modo Build Me gusta mucho el modo de compilación. Todo está bien. Empiezas a hacerlo. Es como resolver un rompecabezas. Todo bien. Ese es el rápido recorrido por los sitios. No vas a ser bueno en sitios después de ver ese tutorial, pero quería darte una idea de qué son los sitios y también por qué nos molestamos en hacer todas las cosas en Figma que tal vez sobre todo esta de aquí, a lo mejor hicimos esto Es genial. Prestamos la función, pero ahora sabemos por qué hacemos estas características es que tenemos que hacer estas cosas respondan en algún momento, incluso en nuestros diseños, es útil solo para poder copiarlo y pegarlo, pegarlo en el móvil, cambiarlo de tamaño, pero se vuelve extra especial increíble cuando hayas hecho ese trabajo, eso podría publicarse en nuestro sitio web Bien, amigos míos, ese es el que pasa por los sitios Figma, ¿recuerdas Utilice el enlace en los archivos de clase. Ahora lo pondré arriba. Si hay un curso, ese enlace irá directamente al curso real de sitios Figma, solo voy a medir los intereses de ustedes chicos Todo bien. Sitios Figma, hecho Hay un montón de waffling. Lo siento. Entremos en algunos videos más sucintos. Te veré en la siguiente. 89. Cómo exportar imágenes fuera de Figma: Uno, vamos a ver la configuración de exportación de imágenes fuera de Figma. Necesitas sacar una imagen de Figma, enviársela a alguien Vamos a pasar por los diferentes formatos. ¿Bien? Hablaremos de los diferentes tamaños y cuándo usar cada uno Bien, entremos y exportemos imágenes de Figma. Bien, hablemos de algo así como una exportación de imágenes de propósito general Entonces hablemos de algunos formatos de archivo y hagamos eso. Entonces quiero exportar una imagen. Empecemos con solo esta imagen de aquí. ¿Bien? Quiero exportarlo. No usas exportación de archivos como lo haces en muchos programas. En realidad hay esta unidad aquí quiero seleccionar, agregar una exportación. ¿Bien? ¿Qué tipo de exportación? Ah, agregó Effex. Reden Exportación Entonces te dará algunas opciones sobre qué tipo de configuración de exportación quieres usar. Estos son los principales grupos de alimentos, PNG, JPEG, Fici PDF Cuando se trata de imágenes, generalmente es más útil usar JPG, más JPIG Genial para imágenes, obtiene el tamaño del archivo muy pequeño. El inconveniente es que no tiene transparencia, pero mantiene los tamaños de archivo muy pequeños. Verás muchos JPigs alrededor en línea y parte del diseño web Golpeó exportar y lo va a poner en alguna parte. Voy a meter el mío en mi escritorio en una carpeta de imágenes que acabo de hacer. Bien vamos con los otros formatos. ¿Cuándo sería bueno PNG? Es cuando tienes algo que necesita transparencia, mira que algo está enmascarado Digamos este de aquí. Entonces si exporto esto como JPEG, pero también puedes agregar otro para decir, quiero un PNG también en el uno X. Hablaremos de Xs en un segundo, pero solo son del tamaño que lo hice. En este caso, este es de 314 píxeles cuadrados. Si exporto, notarás que elige el nombre de cualquiera que sea el grupo o el marco que hayas seleccionado. ¿Ves que esta es solo una imagen? Voy a llamar a este monedero IMG Star. Entonces, si lo nombra en su panel de capas a medida que avanza, lo hará más fácil a la hora de exportar. Yo sólo voy a elegir ahí, ir a echar un vistazo. Bien, ya verás que tengo dos imágenes. Uno es un JPEG. El problema con este es que un JPEG no tiene transparencia. No se puede ver a través de él, mientras que el PNG muy bien tiene transparencia. Se puede ver a través del fondo. Entonces, si necesito esto para ir a un sitio web y necesitas ver el color de fondo, necesitas un PNG, aunque sea una imagen, pero porque necesitas transparencia, estamos haciendo PNG. El otro ahí es SVG. SVG son buenos para cualquier cosa que sea vectores. Es sinónimo de gráfico vectorial escalable. Lo que quieren decir con eso es que encontremos algo escalable. Vayamos a nuestra página de componentes. ¿Quieres encontrar un logo ahí está ahí. Sabemos que si uso mi herramienta K y escalo esta cosa escalará para siempre. Está hecho de gráficos vectoriales, pequeños puntos de anclaje y cosas así que es súper útil ser un SVG porque se puede escalar en muchos navegadores diferentes Recuerda los sitios figma, podemos escalar las cosas hacia arriba y hacia abajo. Por eso esto es bueno y el tamaño del archivo es pequeño, y tiene transparencia. En este caso, diríamos, voy a volver a mi herramienta de mudanza. Voy a decir que no afecta. Voy a encontrar exportación y voy a decir U son los mejores como SVG. Se exporta, y por eso se va la X. No lo necesitas en ningún otro tamaño porque se puede escalar hasta el infinito Voy a guardarlo, exportarlo, y tengo este SVG. Un montón de logos. El mío es blanco sobre fondo blanco. Buen trabajo hacer. Vamos a cambiarlo al modo de luz. Se exporta de nuevo. Vamos a reemplazar esa. Ahora, SVG a veces previsualizan palabra como aquí, pero que ahora hay escalable. Super pequeño, 15 kilobytes Mientras que digo que quería un PNG realmente grande porque necesito ser grande porque necesita escalar hacia arriba y hacia abajo, mientras que mi SVG lo hace sin preguntar Yo digo, quiero un PNG. Voy a exportar este y comparemos los tamaños. Aquí. Tengo dos PNG, que son 12 píxeles, más pequeños que mi SVG, pero está fijo en ese tamaño. No puedo hacerlo más grande que eso. De lo contrario la calidad se pondrá mala. Vamos a llevarlos a Figma. Aquí están mis dos archivos. Ya puedes ver el PNG. Tiene pequeños píxeles. Es un formato basado en píxeles, mientras que el SVG aquí que acabo traer puede escalar para el infinito. Por eso lo uso para muchos íconos y logotipos, ese tipo de cosas. Voy a deshacer antes de escribir todos mis diseños, también puedes usar un PDF Eso está bien. Un PDF podría ser útil si estás haciendo esto. Vayamos a mis páginas, y quiero exportar todo esto. Voy a exportar todo este marco. Voy a decir, bájate de mi herramienta de báscula, vuelve a mi herramienta MO y voy a decir, vamos a exportar esta no como una imagen grande, sino como un PDF. Son fáciles, son compartibles. Los PDF son geniales porque incluyen ambas imágenes de píxeles, pero también el vector que es escalable Es una mezcla de JPEG y SVG. Es increíble. Exporta a ese tipo. Va a tomar el nombre del marco, echemos un vistazo, y tenemos un PDF que podemos compartir con la gente. Impresionante. Oh. ¿Por qué quiero tener un menú? Echemos un vistazo por qué no tengo menú. Esto de aquí, oh, no está en mis necesidades de estar en. ¿Puedo meterlo? No está atascado ahí. Entré, me moví, terminé en mi página de inicio Ahora exportaremos. Hablemos de las Xs. Entonces digamos que aquí tengo esta imagen. Quiero exportarlo. Quiero hacerlo como JPEG a una X. Solo quiero decir que cualquier mayor que 620 de ancho, va a empezar a ser pixelado Lo que podrías hacer es que decidas que voy a exportar el doble del tamaño que necesito, así que va a salir a Vamos matemáticas 12 40. Yo lo hice. A, en realidad podrías exportar dos versiones de la misma, una a un JPEG de una X y otra a las dos X. Necesitas hablar con tu desarrollador sobre lo que quiere. ¿Quieren dos versiones? ¿Quieren uno pequeño y uno grande? Y lo que van a hacer es codificar. Cuando esta imagen se muestra en una pantalla de baja calidad , cargará el tamaño pequeño. Cargo agradable y rápido porque no tiene sentido tener esta versión big mama jammer, que es el doble del tamaño en una pantalla realmente pequeña Mientras que en una gran pantalla trasera alta, cambiará para que sea eso. Echemos un pequeño vistazo a cómo lo exporta. Reemplázalo. El mío se llama echemos un vistazo. Tengo a estos dos aquí. Una es la billetera y esta de aquí es la más pequeña. Esa es la talla que tenía en Figma. Esta es la exportación de la segunda. Debes asegurarte de que tu imagen original sea alta calidad para asegurarte que pueda exportarse al doble de tamaño. Hable con el desarrollador, vea qué tamaño quieren. Podría ser que solo exportes el doble de tamaños. Porque recuerden cuando echamos un vistazo a los sitios y también cuando estamos haciendo ya sea sitios Figma o éste. En realidad, ¿ cuál es? Éste de aquí. Debido a esto, ya ves, aparecerá este tamaño en una pantalla, pero en esta talla en otra o esta talla en otra. Puedes ver que es mucho, por eso a menudo exportamos el doble de tamaño cuando exportamos imágenes para nuestro sitio web. A veces, sin embargo, necesitas algo para exportar en un tamaño específico. Digamos que tienes esto y necesita salir en un tamaño específico, puedes deshacerte de esto y solo decir, mira este menú desplegable aquí, hay ancho abajo por la parte inferior aquí. Esto es sólo por ejemplo. Si hago clic en esto, 512 W solo significa el ancho. Puedo decir, quiero que este tenga 100 pixeles ancho porque lo necesito para algo para mi sitio web. Le voy a dar otro nombre. Llamémosle a éste. 100 pixeles. Yo solo asumo pixeles. Cuando dices W, vamos a golpear. Echemos un pequeño vistazo. Tenemos nuestra cartera que es súper pequeña. Ahí vas. Todo bien. Digamos que haces algunos cambios, necesitas exportar todo de nuevo. Estás como, ¿tengo que ir y hacer clic en cada uno? No puedes simplemente subir a la F aquí, ir a Archivo, e ir a Exportar, lo que hará es que recordará todas las cosas que has agregado poca opción de exportación dos. Puedes ver aquí están mis cuatro cosas, podrías decidir que no te necesito a ti y a ti. Sólo necesito que estos dos se actualicen. Volveré a exportar todas esas imágenes, el mismo lugar. Voy a anularlos. Cualquier cosa que necesites exportar, simplemente agárrala y di abajo aquí, haz clic en Exportar, elige lo que quieras que sea. En este caso, quiero que sea JPEG. En realidad no tengo que exportar ahora, solo puedo ir a mi configuración general de exportación y la incluirá en esa lista. Vamos. Ahí está su página de inicio. Boom. Y ya terminamos. Bien, esa es una rápida descripción general de cómo sacar imágenes de Figma. Sólo una especie de formato de archivo de imagen de propósito general. Profundizaremos un poco más en los próximos videos. Bien, vamos a saltar . Bien, estoy de vuelta. Dije que salte. Me refiero a que te veré el siguiente video. Ha sido un curso largo. Los dos lo sabemos. Oh. Bien, te veré en el siguiente video. 90. Cómo compartir tu documento con los clientes y las partes interesadas: Hola ahí. En este video, vamos a exportar nuestros archivos Figma listos para nuestros clientes Entonces nuestros clientes, tal vez stakeholders, no otros diseñadores, desarrolladores, muy específicamente, personas que realidad no son usuarios de Figma o diseñadores de UX Entonces déjame mostrarte las diferentes opciones para ellos. Bien, así que miramos antes al ir a compartir y podemos copiar el enlace o enviarles un correo electrónico El único problema con ello es que terminan en este tipo de, como, mundo de, como, tierra MGF, que algunos clientes, ya sabes que eso solo les va a causar problemas ¿Bien? Además, se llama tu basura y tienes que ordenar y nosotros miramos antes también. Puedes repasarlo y seleccionar a estos chicos y decir, Bien, quiero que exportes como PDF. Esa es otra forma de hacerlo. Aquí arriba hay una opción que dice, Bien, bajo este FK aquí, se puede decir, me gustaría que archivaran marcos de exportación a PDF. Esto no funciona muy bien porque terminas con esto, donde explotó cada fotograma de mi documento, independientemente de lo que haya elegido. Exporté todo esto. Eso es un frame, este es un frame, así que los exporta a todos. Puedes ir y ordenarlos después usando, no sé, Acrobat Reader o lo que sea que uses para PDF, pero no muy práctico Una que es útil obviamente es la captura de pantalla, pero hay otra herramienta aquí abajo. Entonces miramos debajo de la herramienta rebanada. Puedo arrastrar una caja alrededor de este grupo aquí, digamos que quiero que este bit sea exportado. Me voy a mudar Bien, cualquier otra cosa que esté metida ahí. Consígalo agradable y ordenado. La opción de rebanada aquí. Esta pequeña línea punteada termina por aquí en tu panel de capas. Si me desplazo hacia arriba, hay una cosa llamada rebanada uno. Voy a llamarlo. Flujo de tareas, ¿y qué es? Ecom. Lo bueno es que esta pequeña línea alrededor del exterior de aquí sólo exportará todo dentro de esa caja. No es un objeto real. Es como una ventana de exportación. Si voy a Exportar ahora, si lo tengo seleccionado, puedo darle click aquí en mi panel LAS. Puedo decir, quiero que exportes como Ch Pi. Voy a exportar eso. Ahí está mi flujo de tareas, y se exporta todo ahí dentro. Se deshizo de los nombres en la parte superior. Es sólo que un poco más ordenado. Si eres como, Oye, ¿por qué no te mostraste antes, sobre todo si eres una persona de Windows y la captura de pantalla es un poco más difícil Lo siento. Principalmente porque solo causa que haya esta caja aquí, se interpone en el camino. Ahora eres un muy buen usuario de Figma, puedes empezar a usar estos Puedes ajustarlos después. Puedes eliminarlos. Da click en esto, elimóralos. Puedes dibujar cajas alrededor de muchas cosas diferentes y simplemente exportar todo dentro de ellas. Es la herramienta de corte aquí abajo. Voy a volver a ahora otra forma genial de compartir tus archivos con un cliente que es más una presentación es, voy a agarrar esta página de inicio aquí y copiarla. Voy a ir a plus o puedes volver a casa. Estás buscando las diapositivas. Al igual que los sitios y estos otros. Todos estos son diferentes de la herramienta que hemos estado aprendiendo, que es el diseño Figma, utilizada por los diseñadores de UX También puedes usar Figma para diapositivas, como una presentación de PowerPoint Voy a empezar con solo una diapositiva, y voy a empezar con una plantilla. Va a elegir uno al azar. Veamos éste. ¿Con qué queremos empezar? Vamos a agregar todas las diapositivas. Lo bueno de esto es que es un poco de software diferente, pero ahora que tienes buenas habilidades en el diseño de Figma, podrás usar las diapositivas de Figma súper fácilmente Vamos a agarrar. Acabo de copiarlo miembro. Puedo pegar mi diseño, puedo usar mi herramienta de báscula y puedo agregar esto a una presentación a mi cliente. Podría decidir eso y comenzar a usar esta plantilla. Lo genial de estas plantillas es que si hago click off en el fondo, puedo empezar a jugar con el estilo de plantilla. Tienen toda esta jerarquía en marcha. Podría hacer click off. Ahí está este botón de mezclarlo. Plantilla S remix, solo haz clic en ella y encuentra una que te guste bastante Ninguno de estos me gusta. Sigue haciendo clic para siempre. Oh, me gusta esa. ¿ Puedes regresar, Deshacer? Se puede. Se puede pasar por y decir, en realidad, quiero a todos mis ¿Cuál es este que destaca esto Es mi H dos, así que voy a hacer click off en el fondo. Voy a decir H dos ahora aunque no son platillos. Van a ser arroz picante. Voy a revisar todo su documento y todo se actualiza. Han creado estilos. Se puede llegar bastante lejos, bastante rápido. No va a pasar por todo un tutorial sobre las diapositivas de Figma, pero es una gran manera de ser profesional muy rápidamente Sin salir de Figma, puedes copiar y pegar cosas desde tu archivo de diseño y no tienes que usar PowerPoint. Odio PowerPoint. No odio PowerPoint. PowerPoint me odia. Esto de aquí podría ser una mejor manera de salir y comenzar a compartir. Puedes compartir esta presentación en lugar del archivo Figma por su cuenta. Podrías simplemente compartir el enlace a tu archivo de diseño Figma, lo que puede resultar confuso para algunos Puede usar solo el antiguo PDF de exportación simple, o puede usar esa porción para dibujar una caja alrededor de ellos, o puede investigar las diapositivas de Figma e ir por más de una presentación Todo eso es compartir para clientes, clientes, no otros diseñadores, no desarrolladores. Lo haremos a continuación. Te veré el siguiente video. 91. Hablando con tu desarrollador al principio del proceso de diseño de Figma: Hola a todos. Pensé que saltaría fuera de la pantalla. Esto lo haremos en vivo. Trabajar con tu desarrollador. No hay, forma oficial de trabajar con un desarrollador, algún tipo de proceso de traspaso oficial, Básicamente, lo que termina sucediendo es que dependerá del desarrollador y de tu relación con ellos. Al igual que, el objetivo y donde todo es asombroso es donde tienes al desarrollador antes en el proceso, ¿de acuerdo? Sorprender a cualquiera con un diseño terminado no es divertido. El desarrollador va a sentir resentimiento es probablemente una palabra demasiado fuerte, pero, como, no han tenido ninguna entrada Entonces, bien, este diseñador me ha dado esta cosa para construir, y voy a ir a construirla porque dijeron que tenía que hacerlo. Al igual que, lo que quieres es sean parte de los wireframes para darte consejos, parte del tipo de primeros fotogramas que haces para darte consejos para que no solo haya buy in, sino que sientan que son parte del proceso y así que especialmente cuando eres nuevo, recibir feedback antes solo significa que no vas a diseñarte en un desastre Tantas veces tengo, como, al igual que el lenguaje puede ser muy sencillo. No tienen que ser reuniones oficiales. Puede ser como, Oye, Sandy, ¿ te importaría, ya sabes, puedo mostrarte rápidamente los marcos de mi esposa? Aquí es donde estoy pensando en ir con el proyecto? Solo quiero tus comentarios. Sabes, ¿te importaría darme 5 minutos, bien? O bien, oye, estos son los primeros fotogramas. ¿Qué opinas? Porque hay tantos trabajos donde he asumido que algo era demasiado difícil de hacer así que no lo hice, sólo para averiguarlo en esa primera conversación, ellos son como, Oh, yo iba a hacer eso, pero creo que vamos a empujar eso a la fase dos, porque parece un trabajo duro. ¿Qué opinas? Y son como, No, tenemos esa otra cosa que es muy similar. Ya hemos construido ese, ya sabes, ese tipo de marco que ya está construido para esta otra cosa. Nosotros solo ponemos eso ahí, y yo lo cambiaré. Y tú eres como, yo no soy ingeniero ni desarrollador, así que solo hay muchas cosas donde creo que son muy duras, pero resulta que no lo son y todo lo contrario. ¿Bien? Hay cosas que estoy diseñando y es como una pieza central de lo que quiero. Al igual que, podría ser como un valorado. Yo soy como, Oh, seamos increíbles. Y luego hablas con el desarrollador desde el principio, y ellos están como, eso va a tomar el doble de tiempo del proyecto o agregar toda esta complejidad extra. ¿De verdad lo necesitas? Y cuando sea temprano, estás como, No, estás como, lo haremos en la fase dos, la fase dos es una buena manera de decirlo, haremos esto más tarde, pero probablemente nunca, ya sabes, para barajarlo para que podamos hacer este proyecto Y todo eso sucede en ese primer tipo de diálogo. Entonces sí, hay un proceso de entrega cuando todo está firmado, pero esa no debería ser la primera vez tu desarrollador debería estar viendo tu proyecto. Así que trabaja a la intemperie, pídales que comenten, involucren y averíguense por qué y cómo les gusta trabajar. Ya sabes, qué tipo de cosas quieren ver en la entrega para que no te vaya a gustar, espero que les guste y enviando un correo con todos tus enlaces e imágenes, y todos van a querer Van a querer ver maquetas, prototipos, y un montón de imágenes, probablemente Usarán tus maquetas para trabajar espaciado y el relleno y ese tipo de cosas, si es un nuevo trabajo, ¿de acuerdo? Pero no van a estar usando tus rectángulos, ¿de acuerdo? Ellos solo estarán mirando el espaciado, y, um, sí, reconstruyendo todo, principalmente en código, bien, excepto por cosas como imágenes Entonces sí, hay algunas consistencias entre el traspaso Haremos un poco más en un segundo, pero habla con tu desarrollador y averigua quiénes son. Sea proactivo. No esperes solo hasta, como, departamento de ingeniería mágica, ve a hacerlo. Pregunte. Puede que tengas un Ya sabes, podrías tener un líder de producto o un gerente de producto o podrías estar trabajando tu cuenta y vas a subcontratarlo, o tal vez el cliente va a hacer eso por ti Averigua quién es. Habla con ellos. Haz del desarrollador tu amigo. Si eres el desarrollador, te facilita las cosas. Pero, claro, así es como trabajar con tu desarrollador. Vamos a saltar y te voy a mostrar algunas cosas más táctiles que podemos hacer en Figma. 92. Modo desarrollo y entrega a un desarrollador: Una en este video, vamos a ver algo llamado modo Dev dentro de Figma. Está dirigido a desarrolladores. Podemos como diseñadores, podemos marcar las cosas listas para que el desarrollador las vea, y lo que pueden ver son cosas como, bien, esta es mi fuente. Este es un código CSS que lo hace funcionar para que puedan hacerlo exactamente como lo has diseñado. Digamos aquí arriba para este logo aquí. Les permite pasar y decir, derecho, logo aquí. Pueden descargar su propio SVG y darles el poder de poder descargar sus propios archivos en lugar de que tú exportes todo listo. Bien, saltemos al modo Dev. Todo bien. En primer lugar, Dev Mode es una función de pago en Figma para acceder a él. Tienes una opción aquí abajo. Simplemente puedes cambiarte a él. Hemos hecho diseño, en el que pasamos la mayor parte de este curso. Hicimos un poco de dibujo que cambia las herramientas, y lo mismo con el modo Dev. Cambia las herramientas y obtienes un nuevo conjunto de herramientas aquí abajo. Lo que puedes hacer en el modo de diseño es que puedes decidir, Bien vamos al móvil Hi Fi Digamos que la página de inicio está hecha, está todo firmado, listo para nuestro desarrollador. Se puede. Esta pequeña opción aquí arriba que hemos estado ignorando para el curso, puede decir que Mark está listo para Dev Da clic en este y dale a este o simplemente puedes decir que este marco está listo para el desarrollo. Se ha firmado , listo para funcionar, aunque no hay nada en esta página, y luego podemos ir a compartir y podemos entrar aquí y compartir este enlace del modo Dev. He copiado eso y digamos que envío esto a mi desarrollador. Esto es lo que ven. Para el desarrollador, necesitan su propia licencia, por lo que necesitan firmar y pueden verla así y pueden ver que esta de aquí está marcada como desarrollador, esta está lista para DV, pero no pueden hacer mucho a menos que tengan una cuenta paga. Más barato que la cuenta regular de FIGMA. ¿Bien? Entonces dependerá de dónde estés trabajando. Y si estás usando mucho este flujo, es realmente útil para ellos obtener una cuenta de Dev para que puedan hacer algo llamado inspeccionar los elementos. Echemos un vistazo. Esto es lo que verá tu desarrollador cuando esté mirando tu archivo. Si tienen una cuenta de pago, pueden ver todas mis columnas que estoy usando, lo que les será muy útil para saber qué tamaños de columna has usado. Lo que es realmente genial de esto es que pueden pasar y decir: Muy bien, mira este Nab que Dan ha Les dice que son las partes importantes de la misma. Puedes ver que he usado 12 y 12 en la parte superior, en términos de relleno de píxeles y 16 en los laterales. Por aquí en este lado, comienza dándoles tamaños útiles para desarrolladores. No tanto los tamaños de diseño, además, les dará el CSS o cualquier otro framework que puedan estar usando Android OOS, dependiendo de si es un sitio web o junto con otras propiedades CSS que podrían ayudarlos a construirlo más rápido, colores, desplazarse hacia abajo Hasta los íconos que he usado aquí. Ahí está el logo. Pueden pinchar sobre él y decir, por sí mismos, puedes enviarles los SVG, decirles los tamaños. Pueden resolverlo a partir de las imágenes. Pero esto les da anchos y alturas específicos y tamaños de relleno y les permite pasar y decir, bien, pueden descargar sus propios SVG, les da control para descargar lo quieran en lugar de uh, tienes que exportar todo Digamos que esta pequeña unidad que construimos aquí miembro, es un poco redimensionable, se pega a la parte inferior derecha Les da la opción como flex end. No hace falta saber realmente qué es eso. Es útil si conoces un poco de tipo de codificación. No es esencial. consultar mi curso web essentials. Si quieres hacer eso, para tener una ventaja sobre cómo codificarlo tú mismo. Incluso si no quieres codificarlo tú mismo, puede ser útil solo para obtener una comprensión básica de, no sé, lenguaje, especialmente esta opción flex. Se llama Flexbox. No lo haces, esto va a tener sentido para tu desarrollador y les dará un poco más de ventaja en cuanto a, quieren usar esta fuente, ¿qué fuente es? Es Source Sans Pro. ¿Qué peso tiene? Normal, que es nuestro 700. Recuerde, aprendimos que antes, los pesos de fuente en el código suelen ser referidos por cientos. Pueden copiar y pegar el texto fuera de él. Pueden agregar comentarios, eso va a volver directamente a tu archivo de diseño donde pueden preguntar Oye, ¿qué estás haciendo aquí? ¿Por qué es esto así? ¿ Te importa si es así? Habla con tu desarrollador, ve si ya han usado Figma antes y si esto es útil A veces los desarrolladores solo quieren una maqueta JPEG y todos los iconos y logotipos e imágenes exportados y construirán por su cuenta porque tal vez así es como funcionan Lo que probablemente necesites hacer es que voy a volver a mi vista de diseño, no el desarrollador es probablemente necesites darles una página. Es muy común decir, ¿listo? Para DIV. Lo que hago es que tengo mis archivos de trabajo, pero también tengo este archivo en la parte superior aquí. A lo mejor está justo en la parte superior para que puedan encontrarlo fácilmente. Yo solo voy y copio porque mi escritorio uno, solo a Hi fi es realmente desordenado Podría agarrar estos que sé que están listos y simplemente copiarlos, copiarlos, ponerlos en su propia página, listos para DIV. Pégalos, márcalos como listos solo porque pero hazles saber que esta es la página, deberían estar tirando de la final final final. Porque para ti, es útil tener todos los archivos de trabajo aquí abajo. Puedes ver este de aquí tiene este pequeño indicador diciendo que algo en esta página está listo para Dev. Se puede ver aquí en el móvil Hola fi que hicimos antes. Si usted como diseñador, podría estar marcando estos listos para Dev y eso es todo. Tú mismo puedes. Si eres el desarrollador, puedes cambiar este modo Dev aquí y comenzar a sacar información útil, sacar el texto, los pesos de fuente, los colores, los estilos, las sombras de trabajo que pasaste años encuéntralo ahí, verás que ahí está mi sombra de tick. Ese es el código CSS para que eso suceda . Exactamente como lo tienes. Y hasta tiene el nombre. Minas de Oro estilo súper impresionante. Eso es DevMDE dentro de Figma. Una vez que termines aquí, puedes volver al modo de diseño. Si tienen una cuenta solo dev, solo tendrán Dvmode no podrán entrar en modo de diseño Pero para mí, que hace un poco de codificación, puedo alternar entre los dos. Nota, una vez que tengas tu página lista, puedes decidir, bien, página principal aquí, en realidad, voy a volver a la vista de diseño es que esta página de inicio aquí fue seleccionada, voy a compartirla, y voy a compartirla para copiar Dev Modink Se puede ver el enlace en realidad va a comenzar aquí en esta página de inicio. Les da en el lugar adecuado para empezar. Bien, así que eso es un recorrido rápido por Dvmode. Dependerá de cómo estés trabajando con un desarrollador, si solo quieren maquetas visuales y un montón de imágenes que puedas exportar. Eso lo hicimos. Podemos seleccionar sobre esto y decir, quiero exportar esta imagen como probablemente un JPEG en este caso, darles un archivo con todo en él, y dejarlos sueltos con solo una maqueta de tal vez un PD o JPEG de tu diseño Todo bien. Ese es el modo Dev. Te veré en el siguiente video. 93. Proyecto de clase 19: termina tu diseño: Bien, es tiempo de proyecto de última clase. Espero que los hayas encontrado útiles. Y lo que vamos a hacer aquí es terminar nuestros diseños, ¿de acuerdo? Hemos dejado algunos agujeros principalmente alrededor de esta página de características. Tipo de usarlo como campo de pruebas. Quiero que amplíes tus características que tenemos de esta página de inicio a su propio tipo de tarjetas como aquí, estos bloques. No me importa cómo se vean. Si estás buscando inspiración, como si acabara de golpear algo como regatear, bien y en realidad solo escribí características de la interfaz de usuario y simplemente pasé y eché un vistazo y estaba como, Oh, esto se ve un poco genial por aquí Y ahí es algo para donde utilizo la inspiración. Puedes ver mi enciramiento aquí. Tu escritorio Hi Fi flow, quiero que tengas cuatro páginas completas. Entonces, cualquier cosa que te hayas perdido o dejado atrás, quiero que termines. Puedes ver aquí Tengo mi página de inicio hecha, mis características, mi pago y mi página de confirmación en mi versión de escritorio. Cualquier otra cosa que también te estás perdiendo. Asegúrate de usar tus estilos de tipo y color. Quiero que practiques con enmascaramiento , uno o más efectos, y puedes usar texto marcador de posición para el texto especialmente en tu página de características o tener una práctica con las opciones de IA dentro de Figma. Si no tienes la cuenta de pago, puedes salir a algo como GBT, que es gratis y hará lo mismo Pidió que me diera un párrafo o una página de marketing alrededor de la protección RFID para una cartera, y esto es lo que me dio. Pedí viñetas, y esto es lo que me dio, y lo hice por los tres. Hasta me morí un pequeño pie ahí abajo. Entonces quiero que lo termines y luego tomes una captura de pantalla o puedes usar tu herramienta de rebanada o exportar archivos JPEG Depende de usted, pero quiero ver esos cuatro fotogramas. Subirlo a la sección de proyectos, y me encantaría el amor, el amor, el amor. Si aún no lo has hecho, compártelo en redes sociales. Si quieres, puedes decir dónde estás. Uh, estás haciendo este curso con Dan. Y aquí está el enlace. Eso también sería útil. Compártelo en cualquiera de estos o todos ellos. Obtienes puntos de Comer de bonificación opcional si también haces el móvil Hi Fi. Bajar esto a una versión móvil va a ser divertido e interesante. Dale una oportunidad si tienes tiempo. Pero para todos los demás, solo quiero que termines esas cuatro páginas. No tienen que ser perfectos o hermosos. Yo sólo quiero que llene las cuatro páginas. Me encantaría verlas. Bien, eso es. Diviértete con el proyecto de última clase. Uf, ya terminamos. Ve a hacer eso y te veré en el siguiente video. 94. ¿Qué sigue?: Oh, no, es el final. No te vayas. Uh, llevamos tanto tiempo saliendo, pero este es el final. Uh, ¿adivina qué? Llegamos a pasar el rato más, si quieres. Puedes hacer otro curso. Tengo muchas más que podrían ser de interés por donde estás en Figma. Hay una Figma Avanzada. Ese es probablemente el siguiente paso. Tengo cursos de Photoshop, Illustrator en diseño, after effects Premiere Pro. Blender es otra buena. Yo co enseñé eso con Robin así que échale un vistazo. Ese es otro buen paso siguiente. Pero solo quería decirte, felicidades a ti y a mí, dos lo logramos, ¿de acuerdo? Estos cursos no son fáciles de hacer, y no son fáciles de hacer. ¿Bien? Lo que otras personas están haciendo scrobbling, estás por aquí haciéndote más bueno en Así que a ti mismo en la parte de atrás. Buen trabajo. Me gustaría agradecer rápidamente a los editores, Taylor, Jason y Edgar, bien, por su trabajo en este curso. Yo no lo hago todo. Entonces también hazme saber lo que pensabas de toda la experiencia, bien, mi parte, lo que podría hacer mejor. Déjame saber los comentarios. Yo sí los leo. Sí me gusta checar y ver cómo va el curso, ver la proporción de gente feliz a no feliz, qué podría ser mejor en el siguiente curso, lo que disfrutaste de este curso. Y solo en general, sí. ¿Piensas en ello? Házmelo saber en los comentarios. Bien. Este es el final final. Y lo que me gustaría hacer y terminar con es solo darte permiso para llamarte diseñador de UX. Ahora lo estás. Algunas personas me preguntan, como, ¿cómo sé cuándo estoy? Ya sabes, ¿cómo lo acredito? No hay acreditación, ¿de acuerdo? Es un estado mental, y puede ser difícil salir en el mundo si eres panadero o diseñador gráfico o mecánico y luego te vas, ¿ cuándo me convierto en diseñador UX? Al igual que, ahora eres diseñador de UX. Enhorabuena. No eres muy buena. Apenas estás empezando. Pero así es como funciona. ¿Bien? No tímidos. La siguiente parte a la que vas cuando alguien te pregunta qué haces, diles que eres diseñador de UX, ¿de acuerdo? Apenas para empezar. Eres nuevo, ¿de acuerdo? Pero tú lo eres. Podrías ser un diseñador experimentado de UX que acaba de aprender Figma, así que puedes decirlo con orgullo Pero me gustaría darte permiso para decir, eres diseñador de UX. Es difícil saber cuándo es apropiado eso. Ahora es el momento. Hiciste un curso largo y grande. Aprendiste mucho. Adelante, sé diseñador de UX. Bien, fin fin, fin. Esto es. Te veré de nuevo otro curso, ojalá. Triste. Adiós. Negro gordo. Voy a girar.