Dominarás el diseño web y móvil: Figma, Fundamentos de UI/UX y +Más

1. Introducción: domina el diseño web y móvil: Figma, UI/UX Essentials, +Más: Bienvenido al curso definitivo que te permitirá dominar el diseño web y móvil con facilidad y confianza. Mi nombre es Chetan, y soy diseñador, diseñador ajuste y programa más A eso, pensé estudiante en persona y en línea. Y estoy muy emocionada de ser instructor en este curso, tanto si eres principiante buscando hacer tu primer extranjero al mundo del diseño, un filoso ansioso como tus habilidades o un diseñador experimentado que busca aprender la poderosa herramienta de Figma. Entonces este curso es tu compañero perfecto. Abróchense los cinturones de seguridad mientras nos embarcamos en un emocionante viaje. Eso nos llevará desde el fundamental diseño tan gráfico hasta la elaboración de un producto impresionante Como estudiante en este curso, vas a tener acceso a más 10 horas de contenido de video real, que contiene pruebas de paso de bus paso dos, proyectos interactivos, ejercicios y más. Te guiaré a través de todo este proceso, paso de bus paso, mientras sigues conmigo a través de este curso. Juntos, exploraremos el ámbito del diseño X y NI. No revelaremos el secreto de las interacciones fluidas y desbloquearemos un proceso de diseño compresivo, a medida para futuros proyectos y líneas Ahora, vamos a sumergirnos en el emocionante mundo del diseño vex usando las increíbles capacidades de C para inasegurar la creatividad mientras viajamos a través del proceso de creación de una interfaz cautivadora y prototipos atractivos Este curso está diseñado para principiantes. No fríes si eres nuevo diseño vex o no estás seguro de sus complejidades Comenzamos desde el principio y lo guiamos a través de un paso desde la comprensión del brief y la creación de marcos de tomsting tan personales y marcas de alta fidelidad Desmitificaremos elementos como conjuntos de componentes, restricciones y extremos vari, lo que le facilita navegar por el mundo del diseño de interfaz Con la ayuda de I cds gratuitos y de los enchufadores, potenciaremos nuestro flujo de trabajo y crearemos prototipos interactivos, listos para las pruebas de usuario y la colaboración con tareas prácticas se rociarán a lo largo del curso para ayudarlo a perfeccionar sus habilidades y construir una impresionante pieza de portafolio. Ahora el diseño es una habilidad atemporal que sigue siendo relevante incluso cuando cambia la tensión. Lo básico que aprendas aquí se quedará contigo por años venideros, y podrás aplicar las habilidades para trabajar con cualquier persona en cualquier parte del mundo. Y la mejor parte es que no necesitas ser un genio artístico o un prodigio del dibujo para sobresalir en Todos empezamos desde cero, y al final de este curso, estarás diseñando p. Entonces, cómo miro el esquema del curso en el siguiente video para ver si este curso es adecuado para ti. Este curso incluye todo lo necesario para reunir Figma, así que inscríbase ahora y comencemos a diseñar Te veremos dentro. 2. De Zero a Figma Hero New Skillshare: Aquí los alumnos subirán a bordo. Has llegado a la línea de salida, y estoy encantada de tenerte aquí para este emocionante viaje Todo bien. Lo primero es lo primero. Vamos a descargar esos archivos verticales y archivos de recursos. Encontrará archivos en la sección de recursos aquí en esta página. Estos archivos son tu boleto para el aprendizaje práctico a lo largo del curso. Pero hay un más junto con el material del curso, encontrarás una práctica hoja de acceso directo. No nos estamos sumergiendo demasiado en el atajo solo, sino créeme, estos son cambios de juego. No te lo querrás perder. Imprímalo favorito circular y vamos a sumergirnos en. Ahora, hablando de herramientas, necesitarás Figma. En los recursos, hay un enlace de descarga de Figma para obtener la versión textop Descarga Figma e inscríbete. También puedes usar la versión del navegador. Pero ten en cuenta que si tu conexión a internet se rompe, no podrás trabajar en tu proyecto. Entonces voy a recomendar usar la versión dextop. Ya sea navegador de arte Dextrop o como yo, todo es la misma bondad Personalmente, me quedo con la versión dektop, pero oye, elige lo que mejor te funcione Y aquí están las cabezas rápidas. Me han dicho que hablo a la velocidad de la luz, sobre todo con todo ese CT que he tenido. Hm. Me encanta City W ¿acabas de decir? Chi significa D bro , estás diciendo DD. ¿Te pediría un café café con una habitación para crema crema amor Pero no temas. Si mi pieza de verso y acento te despide, solo presiona ese botón rojo de reproducir ahí abajo para ajustar la velocidad. Podría sonar un poco gracioso. Pero bueno, lo que sea que te ayude a absorber mejor el contenido, bien. El inglés no es mi primer idioma, así que a veces pronuncio la palabra de otra manera, pero no temas. Hay subtítulo de generador automático disponible. Ahora, hablemos de sabores Figma. Libre versus pala. Estamos meciendo la versión gratuita durante la mayor parte de nuestra aventura, porque honestamente, es alucinante lo que puedes hacer sin pasar un tiempo Pero bueno, hacia el final de nuestro viaje, voy a dar un adelanto de las ventajas de la versión pad Paul alerta, es bastante directo. Aquí está el trato que Figma permite mantener las cosas frescas. Eso significa actualizaciones constantes, nuevas funciones y twixs para hacer su vida de diseño más fácil Ahora bien, si bien eso es fantástico para tu viaje de diseño, es mejor dolor de cabeza para mí como tu instructor. Pero no temas. Si algo cambia de importancia, actualizaré esos videos en Y, oye, mantén un ojo en esos comentarios de la sección de abajo. Para cualquier q consejos o conocimientos de compañeros de estudios. Así que BagGalf montaña rusa paseo de actualizaciones y mejoras, todo es parte de la aventura Muy bien, Ip chit chat. Vamos a sumergirnos en el siguiente video y poner en marcha este espectáculo. 3. Figma para codificar interfaces impresionantes sin escribir una línea: Bienvenidos estudiantes. Analicemos de qué se trata FimMA y qué no FGma es tu superhéroe para hacer borradores rápidos de sitios web Es muy útil para los diseñadores de UX y UI. Esas personas que crean aspecto y llenan de cosas de diseño, desde d bocetos hasta un sitio web elegante, casi real FIMAGT tu cubres. Ahora, aquí está la parte divertida. FiMA no se trata solo de hacer un diseño genial. Es genial para probar esos diseños con personas reales. Puedes mostrar tu trabajo al cliente o usuario, conocer sus pensamientos y hacer cambios en este lugar. Es como un bucle de retroalimentación súper rápido. Pero aquí está la captura. FiPMA no convertirá mágicamente tu diseño en sitios web o aplicaciones reales No, es donde entra el desarrollador. FIPA les da algunos bits y bobs para trabajar. Pero la parte de codificación, sin embargo, no lo de la FICA. Entonces, una vez que diseñes, consigue el pulgar hacia arriba, es hora entregárselo a los desarrolladores Trabajarán con la magia y traerán tu diseño al vivo en la web. Pero espera, hay algo más. FMA no es solo para sitios web y aplicaciones. No, también es útil para hacer cosas interesantes como publicaciones en redes sociales y anuncios. Puede que no sea perfecto para imprimir cosas, pero está mejorando cada día y consigue esto. La gente está usando Figma para todo tipo de cosas. Ni siquiera estaba destinado para ello. Es como la herramienta definitiva para hacer todo para diseñadores. Entonces ahí lo tienes. Figma es tu código para amigo para un diseño y pruebas rápidas. Entonces, ¿estás listo para darle un pozo? Vamos a sumergirnos y ser creativos. 4. Interfaz de usuario frente a UX en Figma Design Magic Explained: Bien, amigos, vamos a sumergirnos en el maravilloso mundo de Y versus X. Ahora bien, si ya eres un profesional en este reino, siéntete mejor para seguir adelante Pero si no lo estás, quédate por ahí para un curso forzoso. Es una diferencia entre los dos. La interfaz de usuario o interfaz de usuario es como un producto de empaque elegante. Se trata de cómo se ven y llenan las cosas en tu pantalla. Mientras tanto, x o experiencia de usuario es el viaje que realizas a medida que interactúas con el producto. Piensa en Y como un elegante auto extra deportivo y Vx tiene una conducción suave que te lleva a andar de oreja a oreja Ahora solo descompárela un poco más. Como diseñador de interfaz de usuario, tu concierto principal es hacer que las cosas se vean increíbles Eres el cerebro detrás de los botones, el menú y el atractivo visual general del producto digital. Pero aquí está el pateador Antes de que llegara UX, los diseñadores de interfaz de usuario como yo solían retomar mucha innovación y adivinar el trabajo. Los viejos para ser 60 días. Claro, nuestro diseño se ve genial, pero donde realmente lo usan amigable. Ahí es donde entra en juego x. Los ex diseñadores los toman como diseño de interfaz de usuario y los ponen a prueba, son como detectives del mundo del diseño, invirtiendo cómo el usuario real interactúa con el producto. ¿Alguna vez haces clic en el botón y terminaste en algún lugar inesperadamente? Sí, ese es el tipo de cosas que buscan los diseñadores de UX. Ahora en este curso, nos vamos a centrar tanto en U Y como en X, nos estamos sumergiendo profundamente en la figma. La herramienta definitiva para crear, una interfaz impresionante y una experiencia de usuario Hablando de facilidad de uso, permítanme compartir una pequeña anécdota sobre mi experiencia reciente con una nueva aplicación de recetas. Imagínese esto. Descargo la app, para probar algunos platillos nuevos y el terface moderno y pulido No obstante, cuando trato de encontrar receta, es como navegar hasta el mit. Estoy atrapado en varios íconos buscando la barra de búsqueda, y solo para darme cuenta se rastrea en la esquina. Y no me empieces con la ausencia de categoría clara o el uso abrumador de colores brillantes e inquietantes. Entonces al final, terminé usando Cardp. Pero, oye, cada vx sup es una lección aprendida, ¿verdad? Como diseñadores, es nuestro trabajo mantener nuestros ojos bien abiertos para esos puntos débiles y esforzarnos por hacer que nuestro diseño sea tan suave como un botón. Entonces ahí lo tienes x y todo lo demás. Entonces, ¿estás listo para rockear A diseña como un propenso? Entremos en el siguiente video y mantengamos fuerte este viaje creativo. 5. Construye aplicaciones y sitios web que te encantarán (en este curso de Figma) Nuevo: Bienvenido a nuestro curso Figma. Ya sea que esté comenzando o buscando dominar técnicas avanzadas de UX, está en el lugar correcto. En este curso, llevaremos tus fundamentos de Figma al diseño avanzado de Ax, cubriendo todo lo demás Aprenderemos a aprovechar el poder de las características de Figma desde las herramientas básicas hasta las más avanzadas, pero no nos vamos a parar ahí Nos sumergimos en el principio UIVX, asegurando que entiendas no solo cómo usar Figma, sino por qué se toman ciertas elecciones de diseño Nuestros proyectos no son solo ejercicio. Son escenarios del mundo real. Cada producto trae consigo un completo bravos que tratan con los objetivos del proyecto y el público objetivo Luego trazaremos el piso de tareas, identificaremos los componentes clave como la página de detalles del proyecto, verificaremos su proceso y las páginas de inicio. A partir de ahí, pasaremos a la creación de marcos de alambre de bajo contenido graso, sentando las bases para su diseño. Aquí es donde comenzarás a comprender los fundamentos de UIEX mientras exploras la característica Pigma Ws su wireframing maestro, pasaremos al diseño de interfaz de usuario de alta fidelidad Aprenderás a darle vida a tu diseño, creando un visual impresionante que no solo luzca genial sino que también mejore la experiencia del usuario. prototipos es la siguiente en la agenda donde aprenderá a agregar animación, micro interacción y otras funciones avanzadas a su diseño Comprender la psicología detrás de x es crucial. Exploraremos cómo el color, el texto y la animación pueden influir en el comportamiento del usuario. Y por último, tendrás la oportunidad de poner en práctica todo lo que aprendas con proyectos del mundo real. Pero recuerda, somos dueños de la alimentación con cuchara B. Abordarás este proyecto por tu cuenta, aplicando este concepto, y las técnicas que has aprendido a lo largo del curso. En cuanto a recursos, te cubrimos. Recibirás un archivo Zip lleno de iconos, complementos y enlaces a sitios web de inspiración y útiles. Estos recursos te ayudarán a mejorar tus habilidades en Figma y UVA, asegurando que estés bien equipado para el éxito Así que están listos para convertirse en el maestro Figma, st gano y diseño algo increíble juntos 6. Aprende briefs de UX y flujos de tareas en Figma: El diseño futuro, hoy, nos sumergimos en el aspecto crucial colaboración de diseño, el ex brief y el flujo de tareas. Ahora, sé que algunos de ustedes podrían estar rascándose la cabeza y preguntándose qué hay en la Tierra es Vx Bueno, no temas. Al final de este de serás x breve exportación. Bien, vamos a desglosarlo. El agarre de diseño es como el mapa de tu proyecto. Le dice a todos en todo eso a dónde ir y cómo llegar. Piense en ello como un aper secreto del equipo de diseño de UA para el éxito. Describe los objetivos del proyecto, el afrontamiento, el presupuesto y los detalles clave, asegurando que todos estén en la misma página. Piense en ello como la herramienta de colaboración definitiva. Pero aguanta lo que entra exactamente en X Prip. Es tu trampa sentada para el proyecto. En él se explica de qué se trata el proyecto. Qué retos esperar y qué es lo que pretendes lograr. Además, también le brinda información sobre su producto y quién lo utilizará. Ahora vamos a verlo en acción. Imagina mandar un breve y obtener respuesta que te deje rascándote la cabeza Eso es lo que pasa con un mal breve. Pero no temas con una buena, serás conseguir propuesta que te quite el calcetín. Entonces, ¿cuál es la fuente secreta para el gran k brief? Es más que solo un trozo de papel es el corazón y el alma de tu proyecto. Aclara lo que buscas para Gate Severn en la misma página y guía tu proceso de diseño hacia el éxito Bien, hablemos de resultados. Un ex breve sólido, mantener a todos cantando de lo mismo. Hace que el proceso de diseño sea suave como un botón, se enfoca en lo que realmente importa y ahorra tiempo y dinero. Ahora, eso es lo que yo llamo ganar ganar. Sé que podrías estar sintiendo, no te preocupes. Tenemos una plantilla para hacer las cosas fáciles pizzy. Desde definir el problema hasta enviar tu presupuesto y cronograma, te tiene cubierto. Ah, y hay un pequeño secreto saber tu audiencia es clave al entender quién va a usar tu producto. Considera que se ajusta como un guante. Pero bueno, aprendamos de un error a, ser demasiado vagabundo omitiendo la investigación de usuarios y soñando demasiado grande puede hacerte tropezar Pero con una práctica posterior, estarás evitando que esos b caigan como un profesional. Entonces eso es todo sobre x bra cómo aprendamos sobre el flujo Ta. Alguna vez has oído hablar del flujo de tareas, es como una hoja de ruta hacia el éxito en el mundo del diseño Pero oye, no te preocupes, si te suena como un idioma extranjero, estamos a punto de desglosarlo para ti. Entonces, ¿cuál es exactamente el flujo de tareas? Piense en ello como una U paso a paso i para lograr unas metas. Por qué el flujo de usuario se enfoca en el flujo de tareas de decisión e interacción, visualiza cada paso a paso. Necesario para hacer las cosas. Es decir, nuevo es intentar sumergirse en la lección sobre plataforma de aprendizaje. Bueno, un flujo de tareas mapearía cada movimiento que necesitas hacer desde iniciar sesión hasta comparar lecciones. Pero aquí está la parte genial. Talod no siempre empieza desde el principio. Pueden hacer zoom en una parte específica del proceso siempre y cuando sean objetivos claros en un sitio. Ahora, hablemos de los beneficios. Talod son como el superhéroe de Ex design. Son súper simples de crear, haciéndolos perfectos para esas sesiones tempranas de lluvia de ideas cuando intentas descubrir cómo abordar un gran proyecto Además, ¿no necesitas una herramienta o diseño elegante? Sepa cómo preparar uno. Un alfiler y un poco de papel y una pizca de creatividad son todo lo que necesitas para llevar tus ideas a una vida? Habla de espía ahí lo tienes Tus flujo dañado. Ya sea que seas diseñador experimentado o simplemente goteando los dedos de los pies en el mundo de x Tus flow y x b es un arma secreta para convertir la idea en realidad. Tus flow y x b es un arma secreta para convertir la idea en realidad ¿Estás listo para probarlo? Entonces, ¿vamos a acaparar el asalto? 7. Ensayo de diseño de Wireframes Lo Fi vs Hi Fi: Hola compañeros de trabajo de diseño. Hoy, nos embarcamos en el viaje hacia el maravilloso mundo de Figma y los fundamentos del diseño Lo Fi iframs versus alta fidelidad. Si recién estás empezando , estás en la l, y si ya eres un mago de diseño, bien apretada a la mano porque siempre hay algo nuevo que aprender. Bien, comencemos con wireframes LF. Pitch esto. Lofi significa baja fidelidad, que básicamente lo traspasa para mantener las cosas deliciosamente simples y rudas en la etapa inicial de su proceso de diseño Es como esbozar el plano antes de empezar a construir esa casa de ensueño wiframs de Lape tienen que ver formas básicas, cajas y líneas Estamos hablando de los huesos desnudos aquí, amigos. Estos wi frams son de diseño de columna vertebral opio. Te ayudan a planificar el diseño, averiguar dónde colocar esos botones y a bosquejar la estructura general. Es rápido, es dejar meacy y chico. Es increíblemente útil. iframes de pan son tu mejor pase para la lluvia de ideas Piense en ello como una idea de conseguir abajo en un papel. Ahora en el lado alto ferty de las cosas. Aquí es donde ocurre la magia. fertyfms altos son como convertir esos bocetos ásperos Es como pasar de garabato en la servilleta a una representación arquitectónica elegante de su casa de diseño Tenías botones, las imágenes, el texto, lo haces brillar como un diamante. Entonces aquí es donde tu diseño realmente cobra vida. Las selecciones son perfectas. Cada detalle es un meticulosamente elaborado y lo más cerca que se puede llegar a un negocio real sin tocar una sola línea de código wireframes altos son perfectos para la presentación, pruebas fáciles y obtener ese sello final de aprobación Es el listo para deslumbrar al mundo. Ahora, hablemos de nuestra patada lateral fiduciaria, Figma. Es el mejor wingman tanto para L Pi como para alta fidelidad Figma hace que sea muy sencillo comenzar con Lo fi. Puedes esbozar tus ideas, mover las cosas y ver cómo encaja todo en un solo patio de recreo digital. Y cuando llega el momento de subir de nivel tus instalaciones altas, Figma te respaldó. Podrás refinar tu diseño, agregar todas las campanas y silbatos visuales, y crearás protipos interactivos para ver cómo nos sentimos tu maestro ante el usuario En este curso, vamos a sumergirnos profundamente en las instalaciones tanto e como altas en FigMA. Aprenderemos cada uno, cómo transformar sin problemas uno a otro. Cubriremos las herramientas, los trucos y la fuente secreta para que tu diseño sea realmente pop. Recuerda, no se trata de recoger lados. Se trata de saber cuándo dar rienda suelta al poder de ambos. Es como tener dos súper lazos en tu kit de herramientas de diseño. Entonces, ¿estás listo para conquistar el mundo Así que prepárate para embarcarte en esta emocionante aventura de marcos de barra lop versus alta fidelidad en Figma. Estamos a punto de crear algo de magia de diseño juntos, y no podría estar más emocionado. Así que nos vemos en la siguiente lección y hagamos realidad algún sueño de diseño. 8. Marcos y archivo de diseño en Figma Design (interfaz): Diseñador. Bienvenido a nuestro FIIGTERIAL Hoy, nos sumergimos en el apasionante mundo de crear tu primer archivo de diseño. Pero antes de sumergirnos en ese video, quiero ofrecer una disculpa rápida Mientras estaba grabando, pensé que tenía todo bajo control llevándonos a través de la estructura metálica cortada por clic No obstante, mientras trabajaba en el proyecto, noté que el archivo no tenía título Mientras revisaba las cerraduras de mis ventanas, me di cuenta de que cometí un error. Entonces este fue mi error. Entonces ahora vamos a FiMA y déjame enseñarte a crear marcos Ahora, sé que puede ser un poco confuso, sobre todo si recién estás empezando, no te preocupes, te cubro la espalda. Entonces tu pantalla podría verse un poco diferente a la mía porque Figma para pescar cosas. Si no encuentras el camino, no hay callejeros, dirígete a la parte superior y a la izquierda, puedes ver que hay un nombre como mi nombre es programador imaginario Y hay ML u otras cosas. Si tenemos múltiples cuentas en eso. Entonces actualmente, solo tengo una cuenta, así que esta es mi cuenta predeterminada. Pero digamos que si tienes una cuenta, te mostrará el logo coloreado y así como MLID para que puedas cambiar eso Digamos que podrías estar en alguna app diferente porque estás probando Figma. Así que podrías perder el rumbo. Entonces lo que quieres hacer es que simplemente puedas hacer click en este ícono de inicio, y estarás en esta sección. Sé que esto podría ser abrumador para ti porque trabajo en muchos proyectos y creé muchos proyectos. Entonces esta es mi interfaz. Déjame mostrarte otra cosa. Aquí están los Equipos. Bien. Déjate enojar. Es un poco confuso. Lo sé. Entonces esta es mi interfaz. Entonces vamos a crear un nuevo archivo de diseño. Entonces puedes ver que hay una opción llamada archivo de diseño, y es de color azul. Así que simplemente haz clic en él y obtendremos nuestro archivo de diseño. Entonces cometí este error. Entonces déjame arreglarlo primero. Entonces el nombre de nuestro proyecto va a ser clic en Carrito. Y va a ser la versión uno, entonces es V uno. Bien, entonces este es el nombre de mi app. Ahora, pasemos a los frames, déjame decirte por qué nombro a este V uno porque trabajo mucho proyecto, y cuando estaba empezando a aprender FMA, quiero hacer actualización de esta versión Lo que solía hacer es que solía decir final después de eso, otra final. Después de eso, otra final después de esa final V four, algo así. Entonces, si eres como visor de Photoshop o diseño gráfico, quizás conozcas mi pin. Entonces ese tipo de cosas que solía hacer. Pero ahora solo digo la versión uno. Entonces cada vez que quiero operar algo, digo, esta es la versión uno. Necesito la versión dos. Renito a la versión dos. O puedes crear un nuevo archivo y puedes renombrar versión tune. Bien, así que esa era la cosa con los nombres. Ahora, aprendamos a hacer marcos. Entonces este botón cuadrado es para un marco. Panel así que usa el atajo F para marcos. Entonces en la sección correcta en panel de diseño, obtenemos muchas opciones como tenemos teléfonos, así como tabletas, así como tomas parada, presentación, relojes. Sí, también podemos diseñar relojes, así como papel, redes sociales, fit y archivos. Vi a mucha gente, usan Figma para, como, propósito de redes sociales porque con FDMA, podemos hacer muchas cosas Entonces depende totalmente de ti. Digamos que quieres cambiar tu interfaz de usuario x actual a diseñador o diseñador gráfico. También puedes usar Figma. No tienes que usar otros sollozos. Si te sientes cómodo con Figma, puedes hacerlo. Bien, ahora vamos con los teléfonos. Primero, tenemos el iPhone 14 y el iPhone 15. No sé cuándo estás viendo este 212. Podría agregar iPhone 17 16 iPhone 99. Entonces para este proyecto, estamos usando IP 14 y 15 P max. Esta primera opción. También puedes verificar la resolución. Se trata de los cuatro 30 en 9302. Así que solo haz clic en él y obtuvimos nuestro primer frame. Podemos moverlo así en la pantalla. Si quieres cambiar el ancho y la altura como marco, también puedes hacerlo desde aquí. Entonces hay muchas opciones, así que no te confundas. Entonces en vidas futuras, vamos a ver todas las opciones, como cómo usarlas, como la exportación del efecto trazo y todo eso. Bien, actualmente, en este do, solo estamos aprendiendo sobre frames y un poco sobre interfaz. Entonces este es el primer fotograma. Puedes cambiarle el nombre desde aquí. Puedes hacer doble clic en él este iPhone 14 P max one y simplemente hacer doble clic en él, y puedes cambiar a como digamos página de introducción Bien, así que si quieres acercar esta interfaz o alejar el zoom, mantén presionado el control y usa el desplazador del mouse También podemos hacer lo mismo con el control de retención y usar el botón más o el botón menos. Entonces esto funciona igual. Ahora, digamos, quieres agregar otro frame, para que puedas ir a frames nuevamente, y puedes agregar 14 15 P max, este. Puedes elegir esta. O lo que puedes hacer es que solo puedes sostener Alt en tu teclado, y puedes ver que hay una cortina de mouse detrás de nuestra cortina de mouse, y tenemos este elemento o marco duplicado. Entonces así es como puedes hacer duplicado o puedes copiar. También puedes usar control C control que es lo básico. Y digamos, quieres actualmente, esto es un poco caótico Y quiero un poco de espacio. Quiero pasar a este diseño. Puedes usar este control deslizante, puedes usar este deslizador, o también puedes usar la barra espaciadora. Si sostengo la barra espaciadora, se puede ver nuestro cambio superficial del ratón en la mano Simplemente puedo hacer clic en mi clic derecho y moverlo así. Así es como puedes usar esta herramienta de arrastre o más. Y también puedes renombrar páginas desde aquí. Digamos que quiero nombrar esta página de inicio. Entonces esta va a ser mi página de inicio, y esta va a ser mi burger man. Bien, entonces estos son nuestros marcos. Entonces para este proyecto, no me van a gustar hasta seis fotogramas, así que alejaré un poco, y sostendré Alt o podemos usar control C y control V. Da click derecho sobre tu fotograma y selecciona copy, ightlick en este espacio vacío y y da click en pest Entonces va a plagar por aquí. Y déjame rastrearlo hacia esto. Entonces tenemos cuatro. Entonces otra vez, control V control V. Así que conseguimos nuestros seis cuadros. Voy a nombrar esta categoría. Esta será cuenta, y nuestra página final va a ser mis pedidos. Podemos rastrear nuestros pedidos desde aquí. Entonces todo esto se trata de marcos, y se puede ver en un panel de lista, tenemos cada página. Y si agrego algún elemento, digamos si agrego una línea en esta página. Entonces como puedes ver, se anidó y debajo de esta página de introducción, tenemos nuestros elementos Así que no te preocupes por éste. Voy a borrar éste por ahora. Bien, así que mantengamos el impulso. Entonces, para la práctica, crea más marcos, copia y pega como un profesional y nombra de acuerdo con el flujo de tareas de UA, y hay un consejo profesional. Digamos que estás trabajando en el proyecto UX como freelancer. En ese caso, puedes pedir el teléfono de tu cliente. Así como modelo del teléfono. Digamos que está usando un Samson Galaxy S 23 ultra. Entonces en ese caso, se puede crear dimensión de acuerdo a ese teléfono. Entonces les va a encantar por ello. Por último, no olvides nombrar tu expediente porque sé que cometí un gran error. Da click en este espacio vacío y solo tienes que ir a esta sección y archivo de nombre. Actualmente, estoy usando click Cut, pero puedes ponerle el nombre que quieras. Y siéntete libre de explorar más. ¿Estás listo para el siguiente video, así que mantengamos este tren creativo en marcha? 9. Herramienta de texto y fuentes Figma: Bienvenidos de nuevo, todos. En este video, vamos a aprender sobre todo sobre el texto, cuáles son los consejos, la fuente, el tamaño de fuente, p, cómo alinearlo, y todo eso. Entonces vamos a escribir. Primero, aprendamos cómo agregar texto. Es muy sencillo. Solo tienes que ir al menú de la barra superior. Y como pueden ver, obtenemos este botón t. Así que haz clic en él y simplemente haz clic en el troprig nuevamente. Obtendrás tu texto así. Ahora, es posible que estés viendo muchas cosas raras como que haya mucho espacio entre ellas, y todo eso. Entonces lo arreglaremos en un momento. Hay un método de dos para agregar texto. El primero que vimos es bicicleta haciendo clic en el menú de la barra superior. Y también, podemos usar un atajo llamado t, presionar t en tu teclado, y tu carsel del mouse cambiará a este ícono más, y solo puedes arrastrar un cuadro como este y puedes poner mucho texto en él Entonces así es como podemos agregar el texto en la página o, esta es la página, para que podamos agregar esto en la página. Hay una cosa que olvidé mencionar. igual que, cuando elegimos solo texto y simplemente hacemos clic en él, obtenemos una caja, una caja pequeña, y no podemos ajustarla. Podemos abordarlo después de eso, así. Pero en algunos casos, queremos una caja que debe ser grande en la longitud y divid, así podemos arrastrarla así y podemos agregar un montón de texto Entonces así es como podemos agregar cajas y probar también podemos ajustarla así. Entonces déjame salir con este por ahora. Este también. Bien, me quedaré con esta. Ahora pasemos a la forma en que podemos hacer muchas cosas con tipos. Antes de hacer eso, aprendamos sobre las caras tipo. Entonces, ¿qué tipo de caras? Un tipo caras es un conjunto de caracteres del mismo diseño. Incluyen letras, números, signos de puntuación y CLFy Hay miles de caras de ti disponibles. Es importante no hacer varias caras de ti. Esto puede hacer que tu diseño se sienta fragmentado y torpe. Entonces hay que cuidar, curar y elimitar las s de dos, tres caras tipo Así que la mayor parte del tiempo, cuando diseñamos marco de alambre, vamos por las fuentes básicas como roboto Sé que robot es aburrido, pero mucha gente tiene que hacerlo solo tienen que hacerse la idea, cuál es el diseño. Entonces estamos usando esta fuente aburrida. Eso es roboto. Lo sé, lo sé. Lo siento roboto. Yo sí. Entonces ahora pasemos al peso de la fuente. Un tipo de letra puede tener muchos tipos diferentes de azulejos o pesos Por ejemplo, roboto tiene mucho estilo y pesos como puedes ver Es incómodo para mí. Puedes pasar el mojado puedes contarlos todos, como perno delgado extra ligero, perno extra, ese tipo de peso de fuente. El peso de la fuente puede crear la topografía Hetch va. Use un peso grande para resaltar la información más importante y más pequeña para obtener información menos importante. Ahora, pasemos al tamaño de fuente. Esto desmina la escala y el tamaño del texto. Figma representa el tamaño de fuente en píxeles independientes de densidad. El tamaño de fuente también puede crear topografía hechi uva. Es importante elegir el tamaño correcto de fuente en la información correcta. Asegúrate de que tu texto sea legible y nunca esté por debajo de diez PT, eso es diez píxeles. Como puedes ver si elijo diez, puedes ver que el tamaño de la fuente es demasiado pequeño, y es algo legible, pero si vamos por debajo de eso, puede que no sea legible, así que se acabó eso. Entonces eso lo haría ilegible para muchos lectores. Ahora pasemos a la altura de la línea. Bien, entonces esta es la altura de la línea conectar es 100%. Podemos ajustarlo para digamos que la altura de línea controla la brecha entre líneas o texto en párrafo. La altura de línea debe estar entre un 20 por ciento 1405 por ciento del tamaño encontrado, haciendo que el párrafo sea más legible Entonces si me aumento hasta 400, como vemos es raro. Pero si lo guardo hasta uno 20, puedo hacerlo manualmente. Así que puede ver es más legible. Cuando tu línea es demasiado larga, al lector le costará mucho enfocarse. Así que tenlo en mente. Bien, al inicio del video, dije, estropeamos el espaciado Entonces ahora vamos a saber cómo arreglar el espaciado y cómo agregar el espaciado. Deje que el espaciado desamine el espacio entre dos caracteres. Esto puede ser útil para el texto del subtítulo del sitio. Además, no confundas esto con astucia, que es el proceso para ajustar el espacio entre dos personajes específicos Actualmente, es 20%. Y si voy a digamos seis o siete así, puedo ver ahora esto es más legible y no se ve de esa manera. Bien, entonces espaciado entre párrafos. El siguiente es el espaciado entre párrafos. Bien, para eso, tengo que agregar otro texto aleatorio para lo que te está pasando. Bien, ahora está funcionando. Permítanme agregar algún texto aleatorio como este. Considera esto como un párrafo. Sé que no es un párrafo, sino considerándolo como un párrafo. Párrafo frente establece la distancia entre cada párrafo. Esto puede aumentar o reducir el espacio entre cada párrafo. Ayuda al usuario a enfocarse agregando intervalos regulares, haciendo que el texto sea más legible y reable Entonces, si aumento el espaciado de párrafos así a medida que tú, aumenta así. Entonces así es como puedes agregar espaciado de programas. Ahora, tenemos la opción de redimensionar. Actualmente, la caja del texto es de tamaño fijo. Podemos elegir peso auto y auto hide. He usado mucho un FMA, pero nunca uso mucho esta opción Pero si quieres, puedes usar esto, y ajustará tu texto así. Por lo que depende totalmente de tu diseño. Bien, el siguiente es la alineación. Esto determina cómo se distribuye el texto dentro del espacio confinado. Como alineaciones horizontales alinea tu texto en el eje x y vertical ment alinea tu texto en el eje y Entonces este es para lado y este es para el correcto. No lo sé. Nunca vi a alguien hacer esto, como en el lado derecho. La mayoría de las veces el texto está en el lado izquierdo o en el pedal. Y también puedes usar este para alinear el texto. Entonces estos son los métodos básicos. Y si quieres conseguir algunas opciones más anticipadas como si quieres agregar menos viñetas o así como Me gusta, lo olvidé. Déjame ir a revisar. Bien. Entonces, si quieres agregar make a text mayúsculas, puedes hacerlo, puedes agregar subrayado y ese tipo de cosas, y puedes hacer otras cosas también Como vimos la opción del elemento. También está disponible por aquí, pero en este caso, obtenemos una ventaja. Es decir, podemos ver vista previa. Si elijo redimensionar y si voy a Auto W, nos mostrará la vista previa de eso Cómo va a quedar agregamos ese efecto, voy a decir. Y también el subrayado, también el avance. Y clase alta minúscula y todo eso. También puede agregar viñetas. Entonces estos son todos los ajustes básicos de texto o fuente o pipa que puedes hacer en la figma. Así que recuerda, una cosa, el texto contenía ripers más del 80% del diseño eo Es importante aprender estas propiedades del texto y lo que significan. Esto da una buena comprensión de la topografía, centrarse en su utilidad, y siempre poner la legibilidad en primer lugar Entonces eso es todo sobre el texto. Así astro video. Y sé que hay más cosas como cómo podemos crear estilos de texto, así como texto corporal y todo eso. Entonces aprenderemos que estas son cosas más avanzadas. Entonces aprenderemos esas cosas en futuros videos. Entonces como lo hace Potro, y los voy a ver en la siguiente 10. Conceptos básicos de Figma Cómo CREAR y MODIFICAR FORMAS: Todos en esta apuesta aprendemos todo sobre las formas, como cómo crear rectángulos, labios, polycos y cómo crear esquinas redondeadas, así como cómo darlas. Entonces comencemos. Bien, entonces para las formas, podemos ir al menú de topo y dar click en este cuadrado. Y el primero es que tenemos rectángulo esa línea, flechas, es estrella polígono, y así como podemos poner imágenes y video Bien, vamos y comencemos con rectángulo. Y estaba pensando que usaré este espacio para tomas de productos. Como cuando vamos a Amazon. Hay una pancarta enorme. Y sobre eso se desliza, y muestra un producto como qué tipo de oferta está pasando. Entonces quiero hacer esa cosa. O haré esta obra para, como, una categoría. Bien, entonces voy a mover este producto disparado por aquí, y lo voy a mantener así. Y bien, esto es para las diapositivas, y ahora voy a elegir elipse y el atajo es, Oh, también puedes usar y para desplazamientos precisos, como círculo perfecto, sostendré shift y lo arrastraré así Y voy a hacer cuatro de esto. Si quieres hacer duplicado así, puedes sostener Alt. Si mantienes Alt en cualquier elemento, puedes ver que hay un cursor de ratón dual, y significa que puedes duplicar tu elemento, simplemente haz clic con el mouse y arrástralo así. Obtendrás un duplicado. Bien, hay muchos métodos que puedes usar control C control V. Pero si uso el control C y el control V, el objeto está uno encima del otro. Se ve que estaba en la cima. Entonces eso es un poco confuso. Entonces uso altption. Entonces voy a alinearlos así, y nuevamente, seleccionarlos todos y mantener alt. Y arrástralo así porque quiero que esta sección sea categoría, y me quedaré así así. Entonces así es como podemos hacer barcos. Ahora, ahora, digamos que quiero hacer un ícono de barra de sobretensión por aquí. Entonces lo que puedo hacer es que pueda presionar R, y voy a crear un pequeño rectángulo como este y colocarlo en este centro. Y también quiero una hamburguesa minu. Entonces tal vez veas como en muchos casos, hay un menú de tres líneas que se llama Menú Hamburguesa Así podemos crear usando líneas. Así que vamos a mí así y rastrearlo como todo este turno. Voy a dibujar primero, y agregaré algo de trazo también. Sé que voy demasiado rápido, pero es fácil. Actualmente, el ictus es uno. Voy a subir a tres, así que va a ser más pesado y mantener la pista así, y otra. Bien, entonces tenemos nuestro menú de hamburguesas y por aquí, podemos labios o icono de búsqueda O tal vez me quede como está por ahora porque no quiero moverme demasiado rápido. Entonces, ya sabes, la búsqueda Barbano siempre es con esquinas redondeadas Entonces queremos esquinas redondeadas, y actualmente tenemos esquinas muy afiladas. Si le pongo el dedo encima, me cortarán papel. Sé que fue muy mal trabajo. Entonces, vamos a crear algunas esquinas redondeadas. Haga clic en su elemento. Y se puede ver que hay cuatro puntos a cada lado. Simplemente puedes hacer clic en él y rastrearlo dentro, y se redondea así. Entonces como vamos a ver conseguimos d esquinas. Puedes hacer esto manualmente, como si lo hago cero, y si haces clic en el elemento, y si vas al panel de diseño, y hay una opción de radio de esquina. Simplemente puedes hacer click sobre él y puedes agregar unos valores como 15 para que tus esquinas sean más redondeadas. Y también puedes sentar esquinas redondeadas para cada lado, en la esquina superior, esquina superior izquierda. Último 15 si yo si agrego valor cero. Como puedes ver, parece tipo de mensaje de texto. Entonces también puedes hacer eso así. También puedes sostener Alt y arrastrarlo así para esquinas individuales, y puedes hacer esquinas redondeadas así. Por ahora, me quedaré bien, entonces este es nuestro marco de alambre casero para nuestra página de inicio. Sé que hay muchas cosas que puedo hacer aquí. Al igual que, puedo agregar una pequeña barra de navegación. Entonces déjame ir a esta sartén solo puedo usar el atajo R y lo seguiré así. Y puedo agregar cuatro o cinco elementos como perfil de la tarjeta de pedido de categoría de hogar como esas cosas. Y lo que podemos hacer Bien, podemos agregar un pequeño rectángulo. Oh, aquí. Esto representará que este es para tarjeta. Sé que no se ve tan bien, pero este es el marco de alambre, así que no tiene que verse tan bien. Bien. Entonces por ahora, es lo que es. Bien, entonces ya vimos cómo funciona el texto en FMA. Sólo tenemos que presionar T o incluso este botón. Entonces agreguemos algo de texto como este es para banner. Sin pancarta de Bruce. Bien. Entonces este es para pancartas y este es para categoría, así como puedo dibujar cuatro cuadrados, y eso representará nuestros menús de navegación. Bien, entonces iré por cinco. Bien, así. Bien, entonces olvidé mostrarte una cosa, se trata de capas. Aprenderemos sobre capas en futuras capas, pero esto es lo básico, así que tengo que mostrar esto. Entonces digamos, imaginemos que estás dibujando una forma. Y déjame mover esto por aquí. Y si elijo rectángulo, y si dibujo un rectángulo así, y como pueden ver, nuestro texto desapareció. Sé que debes estar en pánico ahora mismo a donde fue y todo eso. Pero es realmente fácil traerlo vuelta porque en los laicos se puede ver, este es el rectángulo 15 y dónde está nuestro texto. Esta es la pancarta. Entonces puedes hacerlo desde aquí, pero es algo así como digamos con fines avanzados. Entonces en este caso, lo que vas a hacer es que solo tienes que seleccionar el primer ítem y dar click en la parte posterior central. Y como pueden ver, tenemos nuestro paquete de texto. Puedes usar atajo cuadrado paquete que está al lado del botón P y si presiono, y obtuvimos nuestro paquete de texto. Entonces así es como puedes ajustar las capas. Bien, hay otra opción. Se puede hacer lo mismo, ir al objeto y se puede ver traer al frente, ser para adelante, poner hacia atrás, o enviar de vuelta. Entonces hay muchas opciones. Eso se puede hacer. También puedes ajustarlo desde aquí si usas un lote Figma. Entonces en ese caso, puedes ajustarlo desde aquí. Pero esto es algo confuso. Entonces voy a decir atajo o bien lo puedes y lo puedes ajustar como un conjunto para enviar a atrás o estar al frente. Entonces esto será fácil para ti. Y olvidé en video anterior agregar el nombre de la marca. Estaba pensando en una marca llamada click cart. Bien, entonces voy a agregar esto en cd y detrib hacia abajo. Y voy a usar elipse porque quiero agregar un logo de marca aquí Estoy sosteniendo turno para círculo perfecto. Y en este círculo, agregaremos un logotipo de marca. Bien, entonces tal vez te estés preguntando, ¿qué es este pequeño te estarás preguntando, qué es este pequeño punto? Bien, déjame mostrarte una magia. Si arrastro esto hacia arriba, tenemos a nuestro hombre de manada y puede golpear todos los puntos de nuestro juego. Sé que es cama. Bien. Entonces también podemos hacer esto Podemos crear círculos huecos como este. También podemos crear pastel chat y todo eso. Es para diseño complejo. La mayor parte del tiempo, no lo usamos, así que no te preocupes por ello. Entonces así es como funciona este punto. Entonces al final, tenemos círculo hueco, así puedes agregarlo así. Bien, entonces por ahora, viviré Azits. Así es como puedes usar formas para crear este marco de alambre, como este banner, esta sección de categoría, así como este ícono de búsqueda, y la línea para el menú Hamburguesa, y el cuadrado para nuestra sección de menú de navegación Y también aprendemos a crear un círculo hueco o Pac Man. Entonces eso es todo para dos este video. Y te veo Kays en la siguiente palabra. 11. Cómo elegir y usar colores en figma: Bienvenidos de nuevo a los alumnos. Hoy, nos sumergimos en el vibrante mundo de los colores en Figma. Prepárate porque al final de este video, dominarás el arte de agregar el toque de color perfecto a tus diseños. Comencemos las cosas entendiendo que menos a menudo puede ser más. Cuando se trata de wireframe, mientras que el gris es una opción sólida, estamos aquí para explorar el arco iris de posibilidades están listas Para trabajar con color, seleccionaremos el rectángulo gigante. En el panel de diseño, obtuvimos esta opción llamada relleno. Entonces en la película, podemos cambiar nuestros colores. Esto es para la luz. Esto es para el Tarke, esto es para el bajo contraste, y esto es para el contraste Y también podemos cambiar el color de un lado, esta sidra de color Así como también podemos aumentar o disminuir la transparencia del color. Bien, entonces primero, voy a elegir color amarillo industrial porque me gusta mucho ese color y el código hexadecimal es para eso, supongo, algo EC ten es el código hexadecimal para ese color. Después de eso, tenemos el modo de transparencia desde aquí, puedes hacer que tu color o elemento sea transparente. Entonces digamos que si muevo esto a fondo, ¿dónde está el fondo? Bien, entonces este es el trasfondo. Entonces como puedes ver, nuestro color es algo así como es transparente transparente. No es una especie de que es transparente. Entonces si hago esto 200%. Bien. Así que actualmente ify, Si lo hago al 100%, como pueden ver, es invisible Bien. Entonces así es como puedes hacer que el color sea transparente. Entonces déjame primero mandar esto a la parte de atrás. Bien, entonces este es un frente indi ahora. Ahora, la siguiente opción es que puedes elegir un color usando la herramienta cuentagotas Entonces esta es la herramienta cuentagotas. Y como puedes ver en la parte superior, obtenemos esta versión de aumento Si muevo esto en las páginas, va a cambiar. Como si estuviera haciendo zoom. Es como lupa, y podemos elegir cualquier color Como digamos, quiero colorearlos a todos. Primero, permítame seleccionar la herramienta de selección. Y los atajos para la herramienta de selección es V, y voy a seleccionar todo esto, y vamos a elegir la herramienta iroper Y para los atajos. Bien, entonces voy a elegir este auto amarillo como pueden ver, tenemos amarillo por todas partes. Bien. Así es como puedes usar la herramienta iroper. Después de eso, tenemos el código X. Se trata de un tipo diferente de códigos, cuatro colores, como tenemos RGB RGB stand para rojo, verde, azul. Si conoces los valores de rojo, verde azul y puedes hacer cualquier color. Y después de eso, tenemos CSS. CSS es útil como un desarrollador front-end. Como cuando estaba en la universidad, solía codificar en CSS así que esa vez solía necesitar este tipo de colores, como este tipo de códigos. Después de eso, tenemos HSL. Estos son el tipo de RGB. Esto también son valores que puedes poner, y puede crear color. Después de eso, tenemos HSB. Pero la mayoría de las veces usamos XCode o RGB, o si eres desarrollador, usarás CSS Entonces, por ahora, vamos con el código X. Bien, entonces a partir de aquí, también se puede aumentar o disminuir la transparencia. Puedes hacer lo mismo por aquí. Después de eso, tenemos el color del documento. Bien, el color del documento significa, como el color que usamos en nuestros diseños. Al igual que tenemos interés amarillo, blanco, gris, negro, y tipo de gris. Entonces este es el color del documento. Si da clic en este color de documento, obtendrá algunas opciones. Así es para colores labr. Al igual que creé algunos proyectos múltiples, así puedo exportar esos colores en este proyecto, y también puedo usarlos. Hasta el momento, ahora, vamos con éste. Porque sé que estos temas son un poco complicados, no complicados, pero no fáciles de entender. Entonces haré video separado o dedicado sobre eso. Y también hay opción llamada estilos de color. Podemos hacer nuestra paleta de colores, y podemos utilizarlos en nuestro diseño varias veces. Entonces será fácil. Tan directo para eso. Se acerca un video. Entonces todo esto se trata de colores. También puedes hacer tu color degradado si elegimos esta opción. Se puede elegir el color degradado. Por ahora, vamos con colores soolares, y aprenderemos a hacer gradiente en futuros videos Tan directo para eso. Pero recuerda, una cosa cuando estés diseñando wireframe, usa colores simples como el gris o el blanco o el azulado Se puede ver en algunos wireframes. El color es como, realmente, muy aburrido. Entonces hay que hacer que el wireframe sea realmente aburrido. Y ahí lo tienen amigos lo básico de agregar colores en figma. Hasta entonces, coloración feliz. 12. Trazos y actualización de propiedades predeterminadas en figma: Además, los estudiantes dan la bienvenida de nuevo a nuestra aventura de diseño. Y hoy, nos sumergimos profundamente en el fascinante reino de los trazos. Deshazte de un golpe de genio en tus diseños. Entonces, qué trazo es la línea elegante alrededor de los bordes, definiendo los límites y agregando esos dos visuales adicionales Vamos a fotografiar nuestras señales. Imagina un espejo de hamburguesa, sé que te estás imaginando otra cosa, pero ese no es un menú de hamburguesas Entonces este es el menú de hamburguesas. Bien, tenemos por aquí. Entonces esas tres líneas que todos conocemos y nos encantan. No sólo estamos dibujando líneas. Les estamos dando estilo extremos redondeados porque seamos honestos. Los bordes afilados se ven tan aburridos. Pero, hay algo más, estableceremos algunos valores predeterminados para hacerte una vida de diseño más fácil Cada rectángulo que dibujes vendrá con dicono, un trazo, bajo coolor nos encanta No más tomas manuales cada vez. Así que vamos a atar. Bien, así como pueden ver, tenemos este rectángulo aburrido, así que seleccionemos este. Entonces actualmente, tiene bordes muy afilados, y permítanme agregar algunos bordes redondeados. Entonces vamos con cinco. Ahora se ve genial. Entonces como puedes ver debajo del campo, tenemos opción llamada trazos. Así que vamos a hacer clic en el más. Llamamos trazo uno, pero podemos sumar hasta que muchos quieran. En su mayoría voy por como dos porque dos se ve sutil y se ve hermosa. Bien, podemos cambiar el color del trazo. Al igual que actualmente es de color negro. La mayor parte del tiempo, viene con el negro. Se puede cambiar el color. Ya sabes en y anterior, vimos como cambiar de color y todo eso. Entonces, si no quieres este color, también puedes cambiar este color. Después de eso, tenemos esta opción llamada podemos poner nuestro trazo dentro afuera así como en el centro. Entonces, si elijo centro, como pueden ver, implica límite fuera del límite así como dentro del límite, y crea el trazo en el medio. Después de eso, tenemos dentro. Entonces crea trazo dentro de los límites. Y al final, todos sabemos que crea trazos afuera. Entonces es por eso que está afuera. Entonces voy a ir con adentro. Y esto es para que el ictus aumente. Después de eso, tenemos trazo por lado. Como vimos en las esquinas redondeadas, podemos dar valor redondo específico a aristas específicas. Así que déjame hacer click en este menú de tres puntos en el que obtenemos mucha opción, como quieres que tu trazo sea punteado o sólido. Así que voy a ir con así porque sólido suelto genial y la mayor parte de pne sólido Y también podemos usar custom como dottil así como un poco sólido También puedes personalizarlos. Pero la mayor parte del tiempo, no usamos tanto esta opción. Así que ten en cuenta eso. Bien, una cosa se me olvidó mostrarles que esta opción se llama trazo por lado. Al igual que, si elijo top, el trazo es solo va a estar en la parte superior. Entonces como puedes ver el trazo solo está disponible en la parte superior. Entonces así es como funciona. Si eliges todas las opciones, también puedes personalizarlas. Pero por ahora, quiero que el trazo esté en todos los lados. Entonces así es como funciona el trazo. Ahora podemos elegir múltiples opciones como múltiples elementos, y al mismo tiempo, podemos aplicar trazos. Vamos a hacer clic en el botón trazo más, y voy a dar el valor hasta. Dos. Y también puedes usar las teclas de flecha para aumentar o disminuir el valor. Si utilizo la tecla de flecha hacia arriba, entonces el trazo sería más grande. Y si utilizo teclas abajo, el trazo será menor en valor. Entonces por ahora, voy a ir con dos. Bien, entonces así es como puedes usar trazos, pero hay algunas opciones más. Digamos, digamos que quieres crear esta cosa como un rectángulo pequeño, como algún anuncio o algún botón, así que tienes que hacer todo una y otra vez. Entonces, si no quiero hacer esas cosas una y otra vez. Entonces lo que puedo hacer es que pueda seleccionar el elemento que quiero que sea como un conjunto por defecto. Entonces estoy seleccionando esta por ahora, y vamos a la fecha. Y en esto, tenemos opción llamada set default properties, y se puede ver que la propiedad default está actualizada. Ahora solo puedo elegir un rectángulo y puedo simplemente dibujar lo mismo como diferentes tamaños como este. Así que no tengo que crear todo esto una y otra vez. Entonces así es como puedes establecer algunas propiedades para un valor predeterminado. Bien, entonces hay una cosa que tengo que mostrarte, como, digamos, en la mayor parte del fotograma i, debes haber visto que hay algunas líneas y que funciona así. Y bien, déjame elegir una línea otra vez. Bien. Esto indica el marcador de posición para la imagen Entonces, si alguien está pasando por tu estructura metálica, esa persona lo sabrá En este lugar, tenemos que agregar una imagen, para que puedas agregar así. Bien, a algunas personas les gustan estas líneas o algunas personas mantienen una imagen como marcador En ese caso, lo que puedes hacer es ese evento eliminar esta línea. Entonces agreguemos una imagen. Podemos ir a esta herramienta de maraña, y hay opción llamada place image, y también podemos ir a esta Figma con, y en archivo, tenemos opción llamada place Usemos este y el atajo es, ya sabes, control en forma de K. Creo que agregué la lista de accesos directos en los recursos. También se puede acceder a eso. Entonces, por ahora, vamos a mostrar este. Y solo puedo agregar MH por aquí. Puede mantener el turno para una forma precisa. Y puedo agregar esto en el centro, como pruebas. Y puedo usar esto como marcador de posición. Pero por ahora, no voy a hacer esto. Voy a borrar esta , y voy a mantener mis líneas porque me gustan mucho. Entonces voy a mantener estas líneas. Bien, entonces hay una cosa que olvidé mostrarte. Al igual que en forma de video, creé este menú de hamburguesas. Pero hay más opciones porque esto tiene bordes afilados, y no quiero bordes afilados. Entonces en trazos, obtenemos otras opciones. Actualmente, no tenemos ninguno así como obtenemos flecha sline, el triangularo, el río triangularo, menos flecha, y flecha Y también podemos hacer el borde de las líneas en redondo o en el cuadrado Entonces como pueden ver, esto es genial, pero quiero que los bordes estén redondeados. Entonces voy a seleccionarlos a todos, y voy a elegir el redondeado. Y voy contado uno porque se ve genial y estético. Oh, hay una cosa más que olvidé mostrarte. Como digamos que quieres duplicar algo tenemos Alt, y simplemente duplicamos así. Pero digamos que quieres duplicar varios artículos una y otra vez. Puede utilizar el control de llamadas de acceso directo. Sé que hay muchos atajos, pero los atajos nos convierten en expertos en FigMA Entonces para eso, podemos usar Control D. Así que duplicará esas cosas una y otra vez y otra y otra y otra vez. Entonces así es como puedes usar control short para duplicar el artículo Pero para el menú de hamburguesas, vamos a mantener tres líneas. Entonces sé que algunas personas usan cuatro líneas, pero cuatro líneas no se ven tan bien, así que voy a ir con tres líneas. Y si quieres, también puedes agregar estas líneas al círculo. Pero depende totalmente de ti, pero me voy a quedar como está. Pero digamos que hay una cosa como digamos que quieres copiar las propiedades de circle, y quieres pegar esas mismas propiedades en esta barra de búsqueda. Así que vamos a seleccionar este icono de búsqueda, y vamos primero, déjame copiar las propiedades de esta cosa. Entonces para eso, podemos ir a editar y vamos a copiar las propiedades y el atajo son control C. Bien, vamos a copiar y vamos a pegarlo aquí. Control. Entonces como puedes ver, copiamos todas las propiedades. Y no aplicamos ninguno, como, trazos. Lo siento. No aplicamos ninguna esquina redondeada porque está alternada. Entonces por eso tenemos bordes afilados, pero podemos arreglarlo por aquí. O podemos elegir este y podemos copiar las propiedades de este rectángulo, y podemos pegarlo por aquí. Entonces, por ahora, elegiré la barra de búsqueda predeterminada porque se ve genial. Entonces eso es todo acerca de los trazos. Entonces de esta manera, aprenderemos sobre cómo agregar trazos a elementos como rectángulo, círculo y todo eso. También aprendemos a copiar las propiedades de los elementos y pegar en los demás elementos, y también aprendemos sobre cómo crear este hermoso menú de mburger de aspecto así como cómo agregarle las esquinas redondeadas ¿Y qué aprendemos más? Uh, también aprendimos sobre cómo agregar imagen como marcador de posición y ese tipo de cosas básicas que aprendemos hoy Entonces eso es lo correcto para un trazo uno oh uno. Ahora estás armado con la habilidad para agregar ese juego extra a tus diseños. Estén atentos para más magia de diseño en el siguiente video hasta entonces seguir creando y arrastrándose involucrando 13. ¡Qué es el modo de edición de objetos y cómo usarlo! en figma: Gc design entusias Hoy, te estoy guiando a través del reino amante del modo de edición de objetos en Figma Conoces ese lugar con esas líneas rayadas. Podrías sentirte un poco como un leveti de diseño. Pero si alguna vez te encontraste una trampa acelerada ahí, no temas Estoy aquí para ser tu mago de Escape. Entonces, ¿por qué estamos profundizando en esto temprano en el curso? Bueno, si eres un doble clicker como yo, podrías haber tropezado con el territorio sin saberlo Vamos a disminuirla y aprendamos a romper con ella. Al igual que actualmente estoy en modo objeto tor. Por accidentalmente. Imaginemos que es accidentalmente. Si quieres salir de ella, puedes simplemente dar click en la línea Noman Y estás fuera de modo objectativo. Al igual que, otra opción es si entro en modo objectativo, esta barra aparecerá o la barra de navegación cambiará a este modo objetivo, y puedes acuñarlo hecho Pero si entro en modo objectativo, y se puede ver que tenemos algunas opciones, como podemos editar nuestro Entonces actualmente cuadrado, puedo convertir este cuadrado en otra cosa, como puedo hacer esto en don o puedo cambiar la forma, así como si también puedo hacer similares, digamos, quiero hacer este lado alrededor de él, poder arrastrarlo así. Puedo arrastrarlo afuera o arrastrarlo dentro para crear esta extraña forma. Bien, digamos que quieres eliminar este campo. Entonces lo que puedes hacer es que puedas elegir esta herramienta pin bucket, el atajo es para esta B. Así como puedes ver el icono o cursor se cambia a esta gota. Y en esa caída, tenemos botón menos. Al igual que tiene un símbolo menos. Si hago clic en él, se puede ver que el campo está eliminado. Pero si quiero agregarlo de nuevo, simplemente puedo darle click sobre él, y por defecto, elige gris. También puedes cambiar el color de él. Ya sabes cómo cambiar el color. Entonces voy a elegir éste ahora. Bien, estoy realmente obsesionado con esa loca industrial. Entonces así es como puedes salir del modo de edición de objetos. Pero digamos que quieres entrar intencionalmente en modo de edición de objetos. Lo que puedes hacer es que puedas elegir el elemento o forma y dar click en este botón, como el botón de puntos cuadrados. Entonces ahora te gusta el mod de edición de objetos. Puedes editar u objetar así. Puedes hacer cualquier cosa con él, hagamos algo raro. Oh, hice P. Oh, no esa P. que hice en alfabeto. Bien. Entonces así es como podemos salir del modo objectativo y cosas que puedes hacer con la edición objetiva Entonces voy a borrar esta obra maestra. Le sirve propósito. Ahora, estás armado con el conocimiento de qué es el modo objectativo, cómo salir de él con gracia Entonces ese es el porto Video, y los veré chicos en el siguiente. 14. Cómo usar la herramienta Escala y selección en Figma: Todos los diseñadores correctos, revelemos el misterio de la herramienta de escalado versus selección en Figma. Confía en mí, es un poco peculiar, y te pagué la espalda al navegar a través de las ocho Primero, tenemos una herramienta de selección. Oh, esta es la p. reenvío eliminar una P. Bien, ya se borra. Tomemos este rectángulo y dublíquemos este. Si trato de reducir como mantener el turno, como pueden ver, la pancarta se vuelve rara. Intenta encordar, pero no cuerda, y actualmente para tallas fort ocho, por lo que sigue siendo 48. Entonces, cómo podemos encoger nuestros objetos o elemento en Figma, como precisamente Entonces para eso, permítanme deshacer esto primero. Entonces vayamos a la herramienta de selección, y debajo de este movimiento, tenemos escala. Entonces si elijo escala, y si mantengo turno, y si la encojo. Como puedes ver, tenemos nuestro sctgle encordado, así como puedes hacer lo contrario, como puedes hacerlo grande o hacerlo pequeño Entonces con la herramienta de selección, sucede la magia, la escala proporcional de todo, trazo, y el tipo por igual. Pero algunas personas podrían estar pensando como, digamos que eres diseñador, trabajas con, como, photoshop o anova. Y vamos a pasar un montón de mensajes de texto. Y podrías estar pensando como, vamos a agruparlos. Si los agrupa, funcionará. Lo sé. También lo sé. Pero si los agrupo, como, digamos, control de grupo de fotos. Y si trato de agruparlos y, como, hacer que se rompa o encoja, como pueden ver, se hunde o se vuelve grande, como de una manera rara, no como queremos. Entonces no funciona cuando agrupamos cosa. Y sí, también hay un atajo para ello. Sé que podrías estar pensando en la escala. Pero no, es una herramienta K para selección. Lo sé. B es la lógica, pero es una forma famosa para la herramienta de selección y K para escalar. Entonces para la selección. Entonces actualmente estoy eligiendo todo esto. Por lo que se selecciona y K para la selección. Te prometo que al final de este curso estarás golpeando y K a esclavos. Ahora, estás armado con este conocimiento de habilidad y selección Vamos a marchar hacia el siguiente video. Nos pegan mis compañeros de diseño. 15. Grupos y marcos de Figma para mejores diseños de interfaz de usuario: Bienvenida a los estudiantes. La B de hoy nos va a adentrarnos profundamente en el reino de Figma. Explora el matiz entre el grupo y los marcos. Baggala porque estamos entrando en el territorio un poco más complejo Pero no temas. Estoy aquí para guiarte a través de él. Hasta que has estado chocando a través de lo básico, y aquí clava los tipos, fuentes, rectángulo y herramientas, pero ahora vamos a elevarlo a algo más Bienvenido al mundo de los marcos. Sé que estoy presentando este tema al principio del curso porque MusteringFrames fue uno de los desafíos MTRICSFMA, y quiero asegurarme de que estás por delante de la En primer lugar, revelemos el dominio de los grupos. Así que vamos a agarrar alguna elipse rectangular, así como la estrella Entonces como puedes ver en el Menú Burger, estas son las formas que agregamos, pero estas cosas no están organizadas, y también puedes ver todas las cosas también en la página de inicio, las líneas, rectángulos, la línea número diez rectángulo diez Así que un poco confuso y gana organizado. Entonces en ese caso, lo que podemos hacer es que podamos seleccionarlos todos así, y podemos intentar hacer clic en él y simplemente dar clic en la selección del grupo. Ahora, son de grupo. Y digamos, quiere mover esto hacia el interpag Simplemente puedes moverlo así. En un solo clic. No tienes que arrastrarlo y soltarlo así una y otra vez, para que puedas hacerlo de una vez. Entonces esta es la gran ventaja del grupo. Hace que nuestro diseño sea organizado, así como se puede ver en el panel de capas. Ahora tenemos una sección llamada grupo, y el icono para ello punteó un cuadrado. Y en eso tenemos nuestras formas. Podemos renombrarlo de acuerdo a su diseño. Pero por ahora, me quedaré como está. Digamos que quieres organizar esto, como en el diseño. Entonces lo que puedes hacer es que simplemente doble clic sobre él y simplemente rastrearlo así. Sé que podemos hacer esto en alineación. Pero ese tema es un poco más avanzado, voy a decir. Bien, así es como podemos amarrar nuestros elementos y objetos. Bien, este es el único beneficio de la agrupación. También puedes usar la palabra de acceso directo Control G, déjame ngroup esto, haz clic derecho y desagrupa Y si selecciono bien, ahora es Desagrupar. Si los selecciono todos, y solo puedo presionar Control G. Ahora, todos ellos están agrupados. Ahora, vamos a sumergirnos en los marcos. Bien, ahora tenemos este pequeño panel de navegación o sección de navegación donde tenemos muchos botones. Entonces actualmente no mencioné qué tipo de botones son, pero imaginemos que este es el botón de inicio. Este es el botón de categoría. Este es un botón de pedido. Este es el botón de mi cuenta, y este es quizás el botón de la tarjeta. Bien, entonces vamos a enmarcarlos. Es el mismo proceso. Seleccione todos los elementos objeto y justo sobre él y selección de marco. Y también puedes usar el atajo Control G. Bien, entonces este es el marco ahora. Si entro en un panel de capas, se puede ver que este es el marco, y el icono también se cambia. Bien, entonces tenemos estos elementos anidados dentro, y estas son las otras formas y objetos Podemos hacer todas las mismas cosas que hicimos con los grupos. Podemos arreglarlos así o podemos movernos afuera. Actualmente, esto está fuera de marco. Podemos arreglarlo atado y todo eso. Podemos hacer todas las mismas cosas. Pero con los marcos, obtenemos más características como contenido de clip así como restricción. Ahora, déjame mostrarte qué tipo de característica obtenemos con los marcos. Entonces tengo este clon de Instagram. Es realmente un clon básico. Entonces actualmente tenemos esta sección horizontal como historia, y no quiero que esta sección sea visible así fuera del marco. Entonces lo que puedo hacer es que pueda dar click en el contenido del clip. Y sólo puedo rastrearlo así. Y si entro en un prototipo, ya ves, soy capaz de hacer esto. También puedo hacer esta. Entonces este es el beneficio del contenido del clip, y al final, es el marco. Entonces como se puede ver en menos panel, es el marco. Bien, entonces ese es el superpoder del contenido del clip, pero hay más como frames, introducir el concepto de restricción Bien, ahora, hablemos de las limitaciones. Bien, entonces tenemos a este grupo. Permítanme desagrupar éste primero. Bien, entonces esto es ahora ngroup y déjame seleccionarlos a todos Déjame encogerlo un poco. Vamos a moverlo por aquí. Y también agregué nuestra marca que es click card. Ahora bien, estos elementos son como no grupo, así como no marco. Así que déjame seleccionarlos a todos. Y clic derecho y selección de marco. Ahora bien, si digamos, quiero que este elemento deba ser o este texto debería estar en el lado izquierdo también en la parte superior. Entonces iré a un culto y a la izquierda y arriba. Este es el escenario básico. Ahora voy a elegir derecho y arriba y este debería estar justo arriba, este debería estar justo arriba. Como si lo hago esta cosa grande o pequeña, tiene que quedarse en el mismo lugar del lado derecho. Este elemento debe permanecer en el lado derecho, y este elemento debe permanecer en el lado izquierdo. Déjame duplicar esta. Y si importo, perdón, si agrego un tono dextop así, y si lo agrego por aquí, si trato de extender esto, así como pueden ver, puedo reutilizar mi elemento una y otra vez Ese es el beneficio de la restricción. Y recuerda, una cosa. Si desea desagrupar el marco, hay una opción llamada desagrupar Esto ahora es desagrupar ahora. Y también funcionó con grupo, como digamos que tienes algún elemento. Digamos que este es el elemento grupal. Bien. Y si quieres agrupar también esto, usa el mismo método. Desagrupar el trabajo para ambos, como para la selección de fotogramas, así como para la selección de grupo Bien, déjame encender este porque no estamos usando este. Bien, así lo hizo. Entonces esa es la restricción. Sé que fue un poco confuso, como restricción y el contenido del clip. Pero cuando lo uses una y otra vez, te acostumbrarás, y se convertirá en una de tus herramientas favoritas. Sé que introduje este tema temprano porque a medida que avanzas en FimMA, encontrarás marcos por todas partes Se convierten en la opción preferida debido a sus características adicionales como restricción, variante y más, que exploraremos en profundidad en temas futuros en videos futuros. La próxima vez te preguntas por qué esa placa U item gratis está llena de marcos. Lo sabrás porque los profesionales del marco estaban por ellos. Solo has rayado la superficie de los marcos y surcos A medida que avancemos, las cosas se volverán más impresionantes, no complicadas. Abraza la confusión ahora, y pronto estarás soldando marcos como un asistente de diseño. ¿Estás listo para más aventuras en Figma porque yo lo estoy? Entonces, profundicemos en el siguiente video y profundicemos más secretos de diseño. Así que mantente curioso. 16. Skillshare 101: presentación de proyectos y exhibición de tu trabajo: Las mentes creativas dan la bienvenida de nuevo a Figma Master Class. En esta clase magistral de higos, mi enfoque es aprender haciendo. Hoy, estamos buceando a la parte emocionante del viaje. Eso es enviar nuestros proyectos en Skillshare. Así que has estado balanceando esas habilidades de diseño y conquistando los proyectos del mundo real Ahora es el momento de compartir tu obra maestra con el mundo. Entonces aquí cómo puedes hacerlo. Una vez que tu proyecto se complete, es el momento de compartirlo con el mundo. Envía tu obra maestra en Skills Inspire a otros con tu creación única. Entonces déjame decirte cómo puedes enviar tus proyectos. Bien, entonces a lo largo de la clase, espolvoreé algunos desafíos de diseño como este. Y en este reto de diseño, mencioné todo como lo que tienes que hacer en este desafío de diseño, así como todas las instrucciones se proporcionan por aquí. Así como hay una p up en la sección de recursos. Entonces si vamos a proyecto y recurso, hay uno Zile descargarlo y para lo abriremos Y en eso tenemos Figma UX y UI design exercise file. Ir a este archivo. Y como puede ver, están los pequeños desafíos de diseño pequeños. Este reto de diseño te ayudará a aprender Figma y x design Hay total, supongo, 18 pequeños proyectos pequeños, más pequeños retos de diseño. Y después de eso, he adjuntado proyectos traseros de Word. El primer proyecto de retrowa es click cart. Es decir, vamos a diseñar esta app. En esta sección, solo tienes que enviar ese proyecto a la sección de proyecto. Voy a dejar saber cómo presentar eso Primero. Déjame contarte sobre los otros proyectos. Entonces tenemos Proyecto número dos. Quédate. Este es el albergue donde puedes reservar un pequeño hostal cuando estás de vacaciones en otro país. Entonces tenemos app de entrega de comida a domicilio. Tienes que diseñar app bots somato después de eso, tenemos MCA, puedes diseñar Aflac Spotify Después de ese proyecto número f, tienes que diseñar app o sitio web En este proyecto, no voy a ayudarte en nada. Pero pero para cada proyecto, di todas las instrucciones como lo que tienes que hacer desde donde puedes obtener inspiración, donde puedes enviarla, y qué tipo de técnica, qué tipo de matrices de higo tienes que aplicar para completar este proyecto Entonces estos son el proyecto de palabra fuego. Tienes que hacerlo. Déjenme decirles ahora cómo presentarlo. Digamos que has diseñado este wireframe. Ahora quieres enviar esto en una cuota de esquí. Quieres mostrarle esto al mundo. Entonces solo podemos ir a esquiar hay una sección llamada Summit Project. Lame esto. Y puedes agregar una imagen de thumilkin. Puedes tomar una captura de pantalla de esto. Déjame mostrarte cómo puedes hacer esto. Toma una captura de pantalla de tu diseño así y luego envíalo por aquí, sube la imagen por aquí, y puedes darle un título de proyecto, como este título de proyecto es marco de alambre. que puedas agregar el título del proyecto como marco para click cart y después de eso agregar la descripción del proyecto, como lo que has hecho en este proyecto. Y después de eso, se puede agregar un enlace de eso, pero voy a decir agregar enlace para proyectos de tablero trasero porque esos proyectos serán portativos. Sé que hay muchos estudiantes que son como creativos de manera creativa que yo. Puedes grabar pantalla como cómo haces tu app, cómo ve, cómo interactúa con el usuario y agregarla por aquí, y también haremos que este proyecto privado agregue el texto como diseño web, X, Figma, así Y después de eso presentar proyecto. Te diré una cosa. Si estás diseñando pequeños desafíos de diseño pequeños. Entonces puedes hacerlos privados. Así que sólo puedo verlos, supongo. Y, así sólo puedo verlos, como lo estamos haciendo en esta clase. Y si quiero mostrarle al mundo tus proyectos reales de vías ferroviarias, entonces puedes enviarlos entonces no tienes que hacerlo privado. La comunidad escultórica está aquí para apoyarte en cada paso del camino. Involucrar con compañeros de intercambio bastante atrás. Celebro el logro del otro. Recuerda, esto no es solo un reto de proyecto. Es una oportunidad para que crezcas, aprendas y muestres tu habilidad ante la audiencia global. Entonces, ¿estás listo para asumir el reto? Deja que tu creatividad se eleve en el proyecto Cm hoy. Ahora el proyecto de escultura desafía ahora y forma parte de la comunidad de creadores de Wron Es tu potencial y haz una mascota duradera con tu proyecto. No puedo esperar a ver qué crean todos ustedes. Recuerda, tu viaje es convertirte en un experto en figma. Hagamos algo de magia de diseño juntos. 17. Proyecto de clase 01 Wireframe: Crear recuerda que es tiempo de proyecto, y nos estamos sumergiendo juntos en algo increíble. Así que has estado siguiendo a lo largo. Y tal vez te encuentres en etapa similar o quizás un poco atrasado. No se preocupe porque estamos en esto juntos. Ya sea que estés en la misma página o necesites ponerte al día poco, entremos a esos amigos. Ahora, quiero que lo mantengas un poco cerca de mi diseño. Aunque estés pensando, tal vez no ahí. Vamos a lamerle. ¿Por qué? Bueno, te ayuda a seguir sin problemas a lo largo de este curso. Estos ejercicios son solo clave para explorar todas las características geniales que FMA tiene para ofrecer Ahora, revisa tu archivo cis, hay un nombre de sección FMA exercise projects Ábrela y Vo. Los requisitos para diferentes proyectos de clase están cuidadosamente establecidos. Ahora, utilice las habilidades que ha adquirido hasta ahora, y su creación debe parecerse a algo así como ejemplo dado. Para una mirada más cercana, haga zoom en el PNG. También se proporciona en archivo de ejercicio de recursos. Entonces hay una versión Pj grande que se llama, supongo, clickt Ahora, hablemos de requisitos. Estamos apuntando a como seis páginas. Esos son como página de introducción. Eso es realmente sencillo de diseñar después de la página de inicio, la categoría burgermenu, mi cuenta y mis pedidos Y si quieres ser más creativo, puedes agregar una página como página de tachuelas, así como como como digamos detalles del producto También puedes crear esas páginas. Y recuerda que estamos diseñando WiFre utiliza formas simples, así como ponts simples No uses fuentes realmente funky. Y después de completar tu proyecto, toma una captura de pantalla. Para la gente de PC, es como pantalla de impresión, y para Mac People, supongo que es coma nave cuatro. Y si perdiste en alguna parte, entonces Google es tu amigo. Puedes buscar en el Google o es un atajo para una captura de pantalla. Y si no quieres tomar una captura de pantalla, entonces puedes simplemente capturar una foto con tu smartphone y subirla a la sección del proyecto. Sé que suena como un poco más de tarea, pero créeme. Vale la pena. Estamos perfeccionando nuestras habilidades, aprendiendo las cuerdas y mejorando juntos Entonces guerreros wireframe, los atraparé en el siguiente video Tan listo dicho diseño. 18. Los mejores paquetes de conjuntos de iconos gratuitos para diseñadores de UIUX: Compañeros diseñadores. Hoy, vamos a sumergirnos en los tesoros de los íconos gratuitos, y discutamos dónde enganchar No solo te voy a lanzar el nombre del sitio web. En cambio, te guiaré sobre qué buscar al descargar íconos para tus proyectos de Figma. Mi destino es la comunidad Figma. En eso, tenemos unos recursos fantásticos con mezcla de contenido gratuito y premium. No obstante, Internet se está asociando con los iconos gratuitos. Así que explora y encuentra lo que más te convenga. Ahora, vayamos a la comunidad Figma y exploremos algunos íconos gratuitos Bien, así como pueden ver, actualmente, estamos en proyectos. Entonces, si voy a casa, hay una opción llamada Explorar Comunidad, o también puedes acceder desde aquí también. Y para la comunidad, el símbolo es una especie de globo, una especie de globo de Internet. Y desde aquí, se puede acceder a todo tipo de activos diferentes como iconos, diferentes proyectos, así como marcos de alambre. Lo que sea, lo conseguirás todo por aquí. Así que déjame encontrar algunos íconos por aquí. Entonces, como pueden ver, tenemos algunos íconos por aquí. Estos son los paquetes de iconos. Este contiene 1,000 de iconos gratuitos. Se puede ver que este teléfono contiene 6,000 iconos, y esto es adecuado para este tipo de suaves como, este es el boceto Pigma o XD y otros algunos neumáticos sollozos también También puedes ordenarlos por, me gusta, pad gratis o premium. Actualmente, voy a elegir gratis. También puedes usar plugins en el siguiente video o probablemente después de dos videos. Te voy a decir cómo usar plugins porque los plugins son muy sencillos de usar, y solo tienes que arrastrar y soltar. Entonces, en lugar de usar esto, puedes usar complementos. Bien, así que también puedes ordenar esto por tren popular y reciente. Principalmente uso popular. Porque en la sección popular, obtenemos muchos íconos que a la gente le encantan. Principalmente uso este como Bazel así como este unicornio Hasta ahora, vamos con biseles creo que lo estoy prometiendo bien. Bien. Entonces supongo que ya uso esto, así que por eso está mostrando fuma abierta Pero algunas personas podrían obtener esa opción duplicada. Entonces si estás viendo duplicado, puedes duplicar, pero actualmente menos abierto en Figma y abrirá un nuevo proyecto Y en eso vamos a conseguir muchos íconos. Así puedo ver que tenemos un montón de íconos. Este es el esquema. Se trata de los íconos sólidos. Digamos que si quieres usar este ícono como este ícono de inicio, simplemente puedes copiar esto como copiar contras y simplemente pegarlo en tu diseño. Bien, entonces tenemos este ícono de home. Podemos simplemente rastrearlo por aquí porque esta va a ser nuestra sección de inicio, como el botón de inicio. Como puedes ver, tenemos el icono en forma de diamante morado en nuestro icono. Al igual que en panel, puedes asociar eso por aquí. Este es el componente. Componente es como agregar un tema. Vamos a cubrir esos temas en futuros videos. Estadio para eso. Así que recuerda, este es el componente maestro y podemos simplemente usarlo directamente cuando queramos y donde queramos. Ahora, vamos, y descartemos algunos íconos más gratuitos. Bien, entonces hay algunos sitios web como icon scout. Desde este sitio web, podemos obtener todo tipo de cosas que son relativas a EIUX Esto también es como la comunidad FMA, pero estas son las plantillas ordenadas y populares que también están disponibles aquí El siguiente es pick gratis. Bien. Entonces déjame descargar un elemento de aquí. Asumamos, me voy con éste. Entonces hay una opción llamada PNG, y podemos descargar esta. Por ahora, vamos con PNG. Bien. Y déjame descargar también el SVG. Creo que no hay opción. Pero déjame descargar un archivo SVG. Bien, entonces actualmente, estoy en el sitio web del buscador de iconos. Así que obtenemos ambas opciones como archivo PNG así como archivo S G. Y en otros, también tenemos otras opciones. Pero por ahora, quiero descargar el archivo SVG. Así que vamos a descargar el archivo SVG. Y déjame importar esos archivos en nuestro proyecto. Este es el archivo SG y este es el archivo PNG. Déjame pasarlo por aquí. Estoy aguantando, no aguanté un turno, pero por ahora, voy a mantener turno. Bien, entonces tenemos el PNG, y también tenemos SG. Pero con SVG, podemos hacer muchas cosas. PNG es solo una imagen. No se pueden hacer muchas cosas con PNG. Pero con SEG, se pueden hacer muchas cosas. Actualmente cuenta con este amplio trasfondo. Bien, déjame sacarlo del marco. Bien, entonces tenemos este ícono G. Entonces con este archivo SVG, podemos aumentar el trazo, digamos que quiero que el trazo sea cinco. También puedo cambiar el color del trazo. Entonces digamos que quiero que esto sea blanco, puedo cambiarlo de blanco así como puedo hacer que se escoja y no va a perder calidad, como si aumento esto mucho, se quedará igual. Pero si aumento el archivo PNG, como pueden ver, el píxel se está volviendo un poco borroso, pero con archivo, no es el caso Bien, entonces esa es la diferencia entre archivo PNG y SVG. Así que ten en cuenta cuando estemos usando íconos. No use PNG. Diré usar archivos SVG. Bien, entonces aquí es donde puedes encontrar todo tipo de iconos para tus proyectos. Te voy a dar todos los enlaces en los recursos. Así que échale un vistazo. Entonces esta es la biblioteca UX, esta es la cuna de iconos. Este es el La Pannja. Y el pick gratis después del icono nos encuentra. Entonces estos son algunos recursos gratuitos que puedes usar para tus proyectos. Y estos son totalmente libres de copia. Puedes utilizarlos directamente. Pero antes de usar cualquiera de los íconos me gusta, ten en cuenta que el icono es gratuito o no. Digamos que estás importando algunos íconos de como icon scout. Será sto Es de uso gratuito o es un uso comercial o es un uso personal. Entonces beb eso y usa accordum a. Eso. Así es como puedes descargar importación y los recursos para iconos. Ahora, vamos a aparearnos en el siguiente video para sp up nuestro wireframe con algunos de algunos íconos. Así que mantente creativo. 19. Conceptos básicos de iconos en Figma: Alumnos de Goma en w anterior aprendemos sobre como descargar iconos gratis donde conseguirlos. También vimos la diferencia entre PNG y SVG. También descartamos comunidad, comunidad Pigma, y también vimos algunos otros recursos Entonces, en este edificio, vamos a usar CoS en nuestro marco de alambre. Así que estamos sumergiéndonos en nuestro archivo de acceso PMMA para traer algunos CO y asegurarnos de que se armonizen algunos CO y asegurarnos de que se con nuestro diseño existente Así que hagamos que se vean lisos y uniformes en todo nuestro marco de alambre Entonces, ¿estás listo? Así que vamos a saltar. Entonces vayamos a nuestra herramienta de rectángulo y coloquemos la imagen. Entonces, en este archivo de acceso, habrá íconos clickard de un pliegue, así que ábralos todos y colóquelos uno por uno aquí Bien, entonces estos son cinco íconos. Bien. Entonces como pueden ver, agregamos algún lugar d aquí, y este es el marco. Entonces déjame borrar esta caja rectangular. Bien. Déjame seleccionar esto y bien. Entonces ahora, el primero va a ser nuestro hogar. Cuadrado, voy a colocar mi icono de inicio. Después de eso, voy a colocar categoría. Después de eso, mi pedido, y esto es para notificación, y este es para nuestro perfil. Bien, entonces actualmente, el tamaño de los iconos, diré que el ancho es de 22 punto z uno. La altura es de 20 9117. Si quiero aumentar o disminuir eso, puedes cambiarlo por aquí. Bien, digamos, quiero subir a como 30, así que sólo puedo ir a 30, y va a aumentar tanto el ancho como la altura. Depende totalmente de tu diseño. Pero por ahora, voy a seguir como es porque se ve genial. Bien, entonces usémoslos primero. Esta es la sección align donde puedes alinear cualquier cosa en Figma. Si haces clic en este menú de tres barras como barra vertical, hay una opción más como atado. Por lo que se amarrará de acuerdo a nuestro diseño, y lo puedes llevar al centro así, y puedes ver que el fondo no está tan bien ajustado, así que vamos a dar click en el ajuste inferior. Y esto es ajustar ahora. También podemos alinear esto en el centro también, así. Nuestro icono de inicio no es tan grande, así que déjame hacerlo grande porque otros íconos tienen unos 35 y este es unos 27. Déjenme seleccionar éste. son las propiedades de restricción si selecciono esto, y si cambio el valor de ancho, entonces automáticamente hj la altura, tamaño por aquí Actualmente, nuestros todos los íconos están en el mismo tamaño. Digamos que este icono de perfil se ve pequeño, puedes aumentarlo por aquí también. Hasta el momento ahora me voy a quedar *** Déjame seleccionar esto de nuevo, y déjame ajustar la parte inferior. Entonces, si no somos capaces de entender esto en la sección, no se preocupe. Voy a hacer un delicado video sobre eso. Actualmente, solo entiende la sección in es para alinear nuestros íconos. En este video, apenas estamos aprendiendo a importar íconos y a cómo hacerlo en ellos. Bien, entonces esta es nuestra sección. Así que vamos a seleccionar todos ellos como esta barra de navegación, así como los iconos también. Pues cambia y selecciona todos ellos, así como este rectángulo y pierna derecha y hazlos como marco. Déjame mostrarte una magia por aquí. Digamos que quiero esta misma barra de navegación por aquí también en el menú de hamburguesas. En ese caso, lo que puedo hacer es que haya un paso tradicional es como, voy a hacer todas las cosas otra vez. Pero puedes hacer otra cosa como seleccionar este marco. Entonces como se puede ver en como panel, se selecciona. Ahora, solo controla C, selecciona el menú de hamburguesas. Tienes que seleccionar el menú de hamburguesas y simplemente pegar por aquí. Como puedes ver en la misma posición, pegamos este botón de navegación En cuanto a que podemos hacerlo por aquí, pero Tate lo hizo primero. Categoría I. Y así como en el mi cuenta. Dile borré el tigre directo, así que permítanme eliminarlos a todos Creo que esto no es marco. Bien. Así que déjame borrar éste también, y el control de Pasta, y así como mis órdenes. Bien, así es como podemos agregar nuestros íconos en nuestro marco de alambre. Pero déjame cambiar el color de la misma. No voy a objetar más. Bien, entonces el color va a ser éste porque un oficio no se ve tan estético, así como este debería ser un blanco. Y porque estamos en la sección Bergme. Entonces creo que en la sección Burgom, no necesitamos esta barra de navegación de navegación, así que voy a eliminar esta Bien. Bien, el cuadro cuatro está vacío. Y, por lo que actualmente, estamos en categoría. Entonces la categoría debería ser L. Y esta es L. Déjame hacer este blanco blanco blanco blanco. Y esta es mi cuenta. Entonces este perfil debería ser L. Y este debería ser un blanco. Lo mismo con este. Bien, entonces esta es nuestra barra de navegación. Entonces el usuario sabrá en esta sección, él es como, digamos si en la página de inicio. Por lo que esto indicará que estamos en la página de inicio, si en la categoría, por lo que este icono lo indicará, estamos en sección de categoría después de eso, en mi perfil, así como en mis órdenes. Estudiantes, así es como puedes agregar íconos a tu iframe o en tus diseños de UI. Entonces esa es la voluntad del vado y los voy a ver chicos en la siguiente. 20. Cómo instalar y usar plugins en Figma: Hola, diseño a ias. En este do, nos estamos sumergiendo en la fuente secreta que hace que Figma sea increíble Eso es enchufar. Esta ingeniosa herramienta es creada por dragales fuera de Amplíe las capacidades de la plataforma permitiéndole hacer más y trabajar de manera más eficiente. Nos centraremos en algunos plug ins por ahora. Pero recuerda, hay todo un mundo de plugins por ahí, y todos son accesibles a través de la comunidad Figma. Entonces hay tres opciones que podemos usar plug ins. Como el primero, podemos entrar en este ícono de Figma. Hay una opción llamada plugins. Estos son algunos plugins instalados en mi Figma. Ahora mismo, puedes ir a este botón. Este son recursos. Y en esto, podemos ir a plugins y podemos buscar diferentes tipos de plug-ins, y también podemos marcarlos como favoritos y podemos hacer clic directamente sobre ellos y podemos usarlo. Como digamos, quiero agregar una foto de perfil O solo puedo seleccionar esa, y digamos que quiero perfilar debería ser esta. Entonces solo puedo hacer click sobre él, y como pueden ver, se agrega la imagen O Digamos que quieres conectar el icono, así solo puedes buscar icono. Iconos, y te dará algunos plugins de iconos muy populares. Vamos con digamos icono ocho. Y sólo tenemos que hacer clic porque no está instalado en mi sistema. Bien, entonces ya está instalado. Bien, entonces esta es la interfaz del icono ocho plug in. Podemos buscar como quiero icono de home. Solo puedo buscar home, y también podemos elegir diferentes opciones como la opción PNG p. También podemos cambiar el color de la misma. También podemos cambiar el formato de los iconos. Digamos que quiero este botón de inicio, así puedo simplemente arrastrarlo lejos, puedo pegarlo y usarlo cuando quiera. Este es el beneficio de usar plug in. También podemos acceder al plugin a través de la comunidad. Solo puedes ir a la comunidad. Digamos, solo quiero enchufes de lets picture. Claro. Y puedo ir a gustar en plugins. Hay 47 plugins, y sólo puedo hacer clic en el Abierto. Puedo resolverlo. Vamonos a populares. Entonces estos son algunos plugins populares, así que solo puedo abrirlo en mi figma. Y como puedes ver, te preguntas dónde quieres abrir tus plugins, así que entremos sin título y ejecutemos Este es un tipo de método difícil. Ya te mostré cómo abrir plug ins desde los recursos. Usa esa también. Digamos que quiero agregar mi foto de perfil por aquí. Bien, esto se ve genial. Voy a ir con éste. Así es como puedes usar plug ins. Recuerda, los plugins que usamos a lo largo del curso pueden tener diferentes interfaces, pero el concepto subyacente sigue siendo el mismo. Aliviando las capacidades de Pigma. plug ins son un aspecto emocionante de Figma, y exploraremos más de ellos en futuros videos Estado adentro para profundizar en píxeles o Pizza Bay y otros plugins poderosos en next to trail. Nos vemos ahí 21. Proyecto de clase 2: domina la caja de herramientas: iconos y complementos para diseños de Figma: Hola a todos, bienvenidos de nuevo a nuestro viaje de diseño. Hoy, nos sumergimos en el maravilloso mundo de Figma. Creativamente no conocemos límites. Espero que todos ustedes emocionados como yo porque estamos a punto de llevar su habilidad al siguiente nivel. Como saben, hemos estado explorando las increíbles capacidades de Figma, y la sesión de hoy se trata traducir ese conocimiento en acción Has aprendido sobre íconos, plugins, y la magia que sucede cuando se juntan. Ahora, veamos en la acción mientras te embarcas en tu propio proyecto. Lo primero, primero, quiero que todos revisen el expediente sobrante. Encontrarás las herramientas del tesoro de los iconos para darle vida a tu diseño. Y ya no sabes cómo agregar plugins en figma, ábrelo. Piense en ello como su patio de recreo de diseño. Ahora recuerda, la flexibilidad es clave. Siéntete libre de jugar con estos iconos y plug-ins. Pero ten en cuenta que algunos plugins podrían ajustar el tamaño de tus íconos Así que no te preocupes, adáptalos para que se ajusten a tu diseño. Indignamente. Se trata de hacerlo exclusivamente tuyo. Para darte un poco de inspiración, aquí tienes una instantánea de mi propio proyecto. Observe cómo se ven y sienten los íconos y los enchufes y el aspecto general. Es como agregar un toque de personalidad a tu diseño. Ahora, veamos con qué puedes venir. Y este es el archivo de instrucciones en nuestro ejercicio del proyecto FDMA Puedes repasarlo, y todas las instrucciones están escritas por aquí, y al final, cuando termines tu proyecto, envíame ese archivo. Puedes tomar una captura de pantalla o capturar una foto del diseño y enviarme eso. Estoy aquí para ayudarte en cada paso del camino. Si tienes alguna duda, no dudes en preguntar. Convirtamos esto en un viaje colaborativo. Y recuerda, esos son nuestros giros no equivocados en el diseño, nuevos y emocionantes descubrimientos. Así que mis increíbles diseñadores, vamos a traer un juego y convertir esos marcos en una obra de arte. Sumérgete en Figma, explora los íconos, despliega el poder de los plugins y deja que tu creatividad corra como un salvaje No puedo esperar a ver lo que se te ocurre. Hagamos de este proyecto uno para los libros. 22. Cómo crear y usar páginas en tu archivo Figma: bienvenida a los estudiantes en esta oferta, vamos a sumergirnos en el pliegue de páginas en Figma. Si bien puede ser un poco aburrido, pero confía en mí, es una herramienta de organización crucial que te mantendrá el trabajo de diseño tenso y elástico. Así que comencemos. En primer lugar, probablemente hayas notado que ya tenemos una página por defecto. Esa es la página número uno. Ahora que es una página que actualmente contiene todos los marcos que hemos creado hasta ahora, probablemente la página de IntervageHME, la categoría del menú de hamburguesas, mi cuenta Para que esto sea claro y más organizado, crearemos nuevas páginas. Por ejemplo, hagamos clic en el botón de esta página y agreguemos una nueva página o podemos cambiar el nombre de esta página. Así que vamos a cambiar el nombre de esta página. Actualmente, es la página uno, así que voy a cambiarle el nombre como click art Mobile App. Para renombrarlo, simplemente puede hacer clic en su página número uno Y ahora podemos cambiar de nombre. Bien, entonces este va a ser el nombre de nuestra página. Ahora, agreguemos otro nombre de página. Digamos que queremos crear una aplicación dextp o una aplicación para tablet. Entonces en ese caso, vamos a crear una nueva página. Y en eso vamos a crear un diseño específico para tablet. O déjame cambiar el nombre de esto nuevamente porque esta es para móvil. Si alguien accede a este archivo, esa persona se confundirá. ¿Qué está pasando? Al igual que éste es tablet. Lo entiendo, pero ¿cuál es el anterior? Así que déjame cambiarle el nombre a móvil. Bien, entonces tenemos dos páginas. El segundo está totalmente vacío, así que no tenemos ningún artículo en él, pero agreguemos algunos marcos. Entonces tableta, vamos a elegir tableta. Oh, eso. Bien, entonces somos surface pro y iPad mini eight y iPad 11 y iPad pro 0.12 0.9 Entonces tomemos este como 12.9 pulgadas. Y podemos crear algunos múltiples, yo diría páginas, como sostener Alt y tublicar Y digamos y tenemos seis páginas, supongo, seis frame en nuestra app, así que vamos a hacer lo mismo. Bien, entonces esta va a ser nuestra sección de mesas. Entonces no voy a diseñar esto. Solo estoy mostrando esto con un propósito de demostración, como cómo usar las páginas. Como quieres crear toda la app para tablet así. Puede crear una nueva página, crear estos nuevos marcos y crear una nueva aplicación para tableta, o puede crear un sitio web similar a dektop para la misma aplicación que es la tarjeta de clic Entonces, si te interesa eso, por favor hazlo, y obtendrás algunos puntos extra, y también puedes compartirlo conmigo y sabes dónde enviar ese proyecto. Puedes tomar una captura de pantalla de la misma y enviarla a la sección del proyecto. Bien, ahora pasemos a la nueva página, y vamos a crear una página única, y en eso vamos a agregar tarjeta, Tastro y duelo Bien, entonces esta va a ser nuestra primera página. Déjame moverlo por aquí. Sólo sosténgalo. Simplemente haz clic en él y manténgalo presionado y arrástralo así. Por lo que va a seguir adelante. Entonces yo recursos, archivo de ejercicio Figma Agregué este flujo de tareas, este flujo de tareas y breve. Entonces solo tienes que copiarlo y pegarlo por aquí. Entonces no sabes cómo agregar eso, ve a la sección de inicio y haz clic en Importar. Elija una computadora de fromo. Bien, ejercito archivo, está por aquí, Figma, lo siento, haga clic en carta breve y taklo haga clic en esto, y si la extensión es fi Si puedes usar PNG pero te diré agrega el archivo fi Archivo Figma Y menos importante. Bien, ya está hecho, así que está por aquí. Simplemente copia todas esas cosas. Marco uno y este marco dos. Controla C, y vamos a copiar esto en nuestro Aquí es donde quiero pegar. Control V. Este va a ser nuestro breve. Esta va a ser nuestra aplicación móvil, y esta va a ser nuestra tableg O si quieres crear otro sitio web, también puedes crear una nueva página, cambiarle el nombre y crear un sitio web. Te rebaja totalmente. Bien, ahora, déjame mostrarte algunos ejemplos realmente buenos de páginas. Entonces, cuando estamos tratando de obtener algunos íconos de la comunidad, así duplicamos este archivo como Basilea y puedes ver que no obtenemos ninguno, como iconos de aquí porque estamos en la página número uno, y el nombre de la página es miniatura Y después de eso, obtenemos un pro completo. Y en pleno pro, obtenemos todos los íconos. Así que podemos usar directamente en nuestros diseños. Lo mismo con el diseño de unicornio, puedes ir a páginas. La primera son las portadas, y la segunda son los iconos, y obtenemos muchos íconos, y podemos simplemente copiarlo y usarlo. Y hay otro ejemplo. Sé que estoy tomando demasiado ejemplo. Sólo tengan miedo de mí porque esta es la buena. Bien, digamos que alguien es realmente nuevo principiante. No sabe nada de U x, y se enteró esta nueva característica de iPhones que es isla dinámica Y quiere copiar estos elementos y utilizarlos en su diseño. Entonces si nos bajamos, ya ves, no me dejamos ir aquí Bien. Entonces en primera página, verá esto. Pero no está en la sección de página. Así que podrías confundirte. Entonces en ese caso, solo puede ir a esta sección de portada o sección de página, y puede acceder a todos los elementos como este estado Hom Ba Mus, fondo de pantalla, st es mesa y rejillas. Esta son las rejillas. Entonces la sección de cuadrícula es realmente importante. Te voy a enseñar en infattum para eso. Gracias a las cuadrículas, somos capaces de diseñar nuestras aplicaciones. En infat sottum para eso. Entonces así es como funcionan las páginas. Nos ayuda a organizar nuestras cosas en nuestros diseños. Bien, entonces a medida que avancemos en este curso, crearemos un sistema de diseño simple. A menudo se conoce como una guía de estilo, que será otro caso de uso para las páginas. Por ahora, asegúrate de haber creado páginas para flujo de tareas móviles, así como para el toque de mesa. Si te interesa este tipo de tabla, crea eso y haz un diseño y sabes dónde presentarlo. Y copysto persona y la tarea fluyen hacia páginas respectivas Muy bien, mis alumnos, todos estamos arreglados con páginas. Así que mantente organizado y te veré en el siguiente video. Feliz diseño. 23. Prototipos de Figma para principiantes: Bienvenida experiencia en esta puja, vamos a ver rototipado multiverso Abróchese el cinturón ya que estaremos creando una interacción que nos permita navegar a través de nuestros marcos sin problemas. Entonces déjame mostrarte algunos multi verso aquí. Entonces, como puedes ver, esta es la versión final de nuestra app. Yo me acerco. Entonces tenemos algunos botones, imágenes, y todo eso. Entonces esta es la versión final. Entonces déjame mostrarte un multiverso. Entonces si actualmente estamos en sección de diseño, si entro en protipo como pueden ver, esto es un poco caótico y el multiverso está No se le llama como multiverso. Yo lo llamo multiverso porque suena gracioso. Bien, entonces estas son líneas que acabamos agregar para interactuar con nuestra app. Así que déjame ir a nuestra aplicación principal que va a ser nuestra aplicación click cart wireframe Entonces, actualmente, estamos en sección de diseño, si entramos en un prototipo, y actualmente no se selecciona nada, entonces estamos en el espacio vacío. Entonces cuando estamos en el espacio vacío, somos capaces de elegir algunos dispositivos actualmente, elegimos iPhone 15 Pmax, podemos cambiarlo Podemos elegir cualquier dispositivo que queramos. Podemos elegir entre, como, digamos iPad, así como appog así como Mac Book Pero para me voy a quedar con el iPhone 15 PMx porque queremos tate este como ancho y alto, así como en los mismos pixeles Entonces también podemos cambiar esto a horizontal o vertical así y el color del nuestro iPhone es el titanio natural. Es por defecto. También puedes elegir otro color , y esto será p, la pre sección de fondo y el flujo de corrientes. Así que no te concentres en esto ahora mismo. Te mostraré cómo funciona el flujo en el siguiente video. Entonces si hago clic en alguna página, como actualmente estoy en interage, si selecciono esto, puedes ver, aparece un punto Aparece por aquí, por aquí, por aquí, así como por aquí. Con este punto, somos capaces de conectar nuestras páginas. Entonces puedo conectar esta página así. Se puede ver un poco de flecha, y también hay alguna interacción. Como, digamos, si tecleo esto, como si lo tecleo en el espacio, irá a esta página, y será instantáneo. Entonces esto es algunos ajustes. Actualmente, vamos a saltarnos esa parte porque en la siguiente, vamos a ver esas cosas. Así que ahora vamos a hacer clic en la página de inicio, lo mismo. Menú, se va a unir a la categoría y categoría dos, mi cuenta y la última son mis órdenes, nos unimos a nuestras seis páginas, y para obtener pre, solo podemos hacer click en este botón de reproducción de aquí. Entonces obtenemos dos opciones como presente y vista previa. Si haces clic en la vista previa, puedes ver que aparece este menú o aparece este pequeño popo Y si hago clic al azar en cualquier parte de la pantalla, cambia porque en dirección no hay nada en este momento. Así que solo agregamos algo de flop. Entonces si vuelvo a hacer clic en el espacio vacío, así será así. Simplemente se está moviendo por nuestra aplicación. Bien, para que podamos decidirlo desde aquí también. Entonces esta es la sección anterior. Y déjame mostrarte una magia. Entonces si elijo homepage y si cambio el color de este banner y me dejo ir al diseño, tenemos que ir a diseñar para los cambios. Y déjame cambiarlo a, digamos, si lo hago rojo. Entonces como puedes ver, al mismo tiempo, en el apartado anterior, cambia el color. Déjeme hacer esto. Entonces ese es el beneficio de También obtenemos lo mismo al presentar. Entonces déjame entrar en la presente sección. Tomará tiempo. Depende totalmente de tu diseño. Entonces actualmente, estamos en primera página, no en la portada, sino en la página principal. Déjame restablecerlo. Entonces para reset, es R. Aparece aquí. Si hago clic en el espacio vacío, entramos en la página principal después de esa categoría después de eso. Esto en esta categoría, la cuenta M y los pedidos. Entonces así es como funciona el prototipo. Si haces clic en este espacio vacío, tenemos la opción de restablecer esta app, y también podemos navegar desde aquí, como página segunda, tercera, 4506, así También podemos cambiarlo de un lado a otro desde este botón también. También podemos agregar comentarios. Y de esta sección, si tenemos múltiples flujos, también podemos elegir eso. Actualmente, tenemos un flujo, por lo que está mostrando un flujo. Digamos que estás presentando esta app con tu cliente, y quieres compartir esa cosa en vivo con tus clientes. En ese caso, puedes elegir esto y me puedes hacer slotlight, dar click en la línea puntual Seguirá sus instrucciones. Después de eso, tenemos prototipo compartido. Puedes compartir o crear prototipos con tu cliente así como con tus amigos. Puedes hacer algunos cambios, puedes agregar algunos correos electrónicos ds por aquí, y ellos conocerán cómo funciona tu app y cómo interactúa Opción, obtenemos algunas tallas como actualmente es 100%. Bien, actualmente se ajusta a la pantalla. Podemos elegir la pantalla 100% fit. También podemos desactivar algunos ajustes por aquí, y esto es para recites. Bien, entonces esta es la interfaz de la sección pro presente. Y así es como funciona el prototipo en Figma. De esta manera, aprendemos sobre cómo configurar el dispositivo en la olla así como en el cuerpo horizontal. También podemos cambiar el color de la presente sección. No aprendimos sobre el flujo, siguiente manera, vamos a aprender sobre el flujo. Así que declaren para eso. Y aprenderemos ¿qué más aprendimos? Bien, nos enteraremos de esta presente sección. Entonces este es el básico del prototipo, pero en comparación con esto parece realmente fácil. La creación de prototipos es realmente fácil. Sé que parece un poco caótico, pero la creación de prototipos es una de las cosas más fáciles que podemos hacer en UI UX Porque como ejercicio rápido, esto no es un proyecto, solo un ejercicio rápido. Te sugiero romper la conexión prototipo y configurar una interacción específica para el botón. Digamos que diseñas esta página, y digamos que quieres que este botón haga algo así como este botón indica categoría. Para que puedas unirte a esto como categoría y simplemente jugar con ella. Entonces es solo un ejercicio, no un proyecto. Puedes hacerlo por un ph. Y digamos que dominas algo y te unes a algún otro lugar así y no sabes cómo eliminar esto, solo puedes ir a este prototipo, y puedes ver la pestaña de interacción es mi cuenta. Simplemente haga clic en este menos, pero eliminará en su ph. O también puedes presionar el botón de borrar. También se borrará. Entonces esa es la conclusión de lo básico de la creación de prototipos en Figma. Entonces, en el siguiente video, daremos algunos pasos más allá y agregaremos animación usando transición. Así que únete a mí en el siguiente video para más prototipos para. 24. Prototipos y transiciones de Figma (facilidad): Volvemos a y x designer. En esta i vamos a aprender como prototipar nuestro marco de alambre. En anterior, aprendimos a hacer prototipos de nuestras cosas, pero no se trataba de ningún detalle. Simplemente nos unimos a nuestras páginas así. Si no borras este prototipo como, puedes eliminarlo. Bien, entonces en esto, vamos a hacer esas cosas desde cero. Si no sabes cómo eliminar esto, solo selecciona este cable de protipo y presiona eliminar en tu teclado Así es como borras el cable prototipo. Yo lo llamo cable. Bien, entonces actualmente, estamos en prototipo. Si estás en panel de diseño, solo ve a Ptype y quiero prototipar este primero Entonces bien, entonces esto tiene que ser como en tipo. Bien, déjame borrar esto primero porque para algún estudiante puede ser confuso. Bien. Entonces déjame arrastrar esto hacia. Aquí. Bien. Entonces ahora tenemos algo de espacio. Entonces déjame hacer clic en inter página, y déjame unirme a esto. Entonces, en esta sección de inter página, no tenemos ningún botón ni en elementos clicables Entonces para eso lo que podemos hacer es que solo podamos aprovechar cualquier espacio vacío. Navegará a la página principal. Entonces, como puedes ver, está navegando a la página principal, y la animación se mueve. Pero puedes configurar cualquier animación. Puede establecer la instancia disolver la animación de Mt, mover hacia fuera, deslizar y deslizar hacia fuera. Por ahora, elegiré dissol porque dissol es como animación básica Y para el marco de alambre, debemos elegir animación normal, no tan elegante. Mientras trabajamos en una aplicación real en esta aplicación real, elegiremos diferentes tipos de animación. Téngalo en mente. Entonces elegimos disolver. Después de eso tenemos adentro y afuera adentro atrás. Tenemos muchos tipos de animación, por lo que podemos elegir cualquiera de ellos, y también obtenemos alguna vista previa, cómo quedará después de hacer clic en este espacio vacío. Y después de eso, también podemos establecer el tiempo de animación actualmente varado por Diult std Podemos decir mil es 1 segundo. Por lo que depende totalmente de tu diseño. Bien, entonces no quiero nada fascinante aquí. Ahora, vamos a la página principal. Y este es el menú de hamburguesas. Así que unamos este menú de hamburguesas a esta página de menú de hamburguesas. Entonces quiero navegar por estos dos menús de hamburguesas. Y recuerda una cosa. Al igual que en lo anterior de protipado, añadimos algo de animación como disolver Entonces será lo mismo para esto porque Mar no restablece la animación. Mantiene la animación antigua y los ajustes antiguos para ello. Entonces tenemos que cambiarlo. Como si quieres cambiarlo, tienes que cambiarlo. Entonces quiero que esto sea para el menú de hamburguesas, y debería ser. Digamos que entra y la animación debe ser de la izquierda así, y podemos establecer la facilidad y la salida. A gusto viene rápido y va lento así. Si elijo facilitar hacia fuera, viene primero y ajustarlo como un lento como este. Sé que es confuso. Simplemente puedes establecer el tiempo en milisegundos y puedes ver esas cosas como una cámara lenta, así conseguirás el punto Bien, entonces para esta mudanza y esta será la animación. Bien, así que vamos a cerrar esto. Después de eso, Bien, clavé esto para que fuera. Si hago clic en esto, debería ir en la página de inicio porque desde la página principal, fuimos allí. Bien, hasta el momento esta mi animación se va a mover y va a ir hacia la derecha así. Bien, me quedaré con el tiempo 300 porque 300 pierden nota. Si elijo 1,000 o 2000, va a ser muy lento. Bien, entonces tenemos que prototipo mucho como tenemos que prototipo de esta categoría dos después de eso ordena después de eso mi cuenta, y después de ese perfil. Bien, vamos a sumarnos a esta categoría dos. Después de eso, tenemos mis órdenes. Bien. Yo no puse nada. Bien, déjenme poner éste primero. Voy a mantener el ajuste para que sea lo mantendré disuelto. No quiero ninguna animación elegante para el wireframe. Veremos toda la animación y la interacción del micrófono en futuros videos porque wireframe no requiere cosas elegantes Bien, así que me uniré a todas las cosas, y aceleraré el video. Bien, así que me olvidé supongo que una página. Debería haber una sección de página de notificación, pero creo que me olvidé de que vacía tal como está. Me quedaré con esta cosa tal como está. No voy a sumarme a esto a nada. Entonces hay un truco de magia. No quieres hacer todo esto una y otra vez. Al igual que para la sección de categoría, tenemos que unirnos a todo una y otra vez. Entonces en ese caso, lo que podemos hacer es que podamos igual que tenemos que eliminar esta primera. Sé que lo escuchaste bien. Tienes que eliminar esta. Este también, y este como 12, y solo podemos copiar este marco y dar click en la categoría. Tienes que dar click sobre este nombre superior y simplemente pegarlo. Y será por aquí en la misma ubicación y el protipo será mismo con cuenta y lo mismo con mis órdenes Entonces solo tenemos que cambiar el color de estos íconos. Para quien debería ser blanco porque estamos en categoría, así que escojamos este para que sea color industrial después de ese mismo con este Bien, pasé al modo de clasificación de objetos. Se. Y esta es mi cuenta. Entonces mi cuenta será industrial. Puedes elegir el color que quieras. Este es mi color favorito, así que estoy eligiendo este. Bien. Otra vez fui a objetar White. Mis órdenes, va a ser ésta. Bien, entonces así es como va a quedar. Entonces, si voy a prototipo, se verá así. Si hago clic en esto, se puede ver todas las cosas están unidas. No tenemos que hacer esas cosas una y otra vez. Tenemos que unirnos a todas las cosas como home shop por categoría, mis pedidos una y otra vez. Voy a adelantar con esto. De nuevo, Bergamo, agregué algunas cosas como billetera de lista de pasillos, oferta, tienda, cupón, y haga clic en regalo de auto Así que no diseñé ninguna página para ellos. Entonces, si quieres, puedes diseñarlos, pero pensé que si yo diseñaba esto, el proyecto se volverá muy, como, grande, y será como abrumador. Así que vamos a mantenerlo disparado y agreguemos esos artículos para que nuestro diseño se vea mejor. Bien, para que podamos volver a unirnos al menú de Berg. Bien, ya casi terminamos. Déjame revisar y dejarme puntuar la vista previa de nuestra app. Permítanme presentarlo de nuevo. Bien, entonces actual dis click cut y la primera página, establecemos solo la animación de tabulador. Al igual que si toco algún espacio vacío, navegará a la página principal. Bien. Así que déjame aprovechar este espacio vacío. Bien, funciona. La animación se disuelve. Ahora bien, si hago clic en el espacio vacío así, me mostrará en qué cosas se puede hacer clic En este caso, categorías clicables o clicables así como mi cuenta y la sección de hamburguesas Entonces vamos a la categoría. Entonces la animación se disuelve. Ya configuré la animación para que se disuelva. Y si elijo a Bergman, Bergman, no puse el Así que déjame volver a casa. Bien, El hogar no es estado. Entonces así es como funcionan los prototipos. Y mientras nos desplazamos por nuestra app, sabemos qué cosas están conectadas o qué cosas no están conectadas Entonces mi mayor y después de eso, otra vez, mi cuenta. Y la animación en casa no es estatus. Entonces déjame poner el hogar otra vez a todos. Bien. En cada f para poner a casa. Bien, entonces déjame intentarlo de nuevo. Entonces si presiono a casa, Bien, ya está funcionando. Y has pulsado el menú de hamburguesas. Así que en burgermenu, obtenemos algunos artículos en los que se puede hacer clic como home show por categoría en mis pedidos Entonces así es como se ve el protipado multiverso. Bien, así es como puedes unir tus íconos a las páginas UR como icono de inicio al inicio. Lo siento, no en casa. El ícono de categoría a la página de categoría, toccon para ir a la página, Mic a mi cuenta y otras micro interacciones. Esto es sólo un básico. Sé que parece realmente abrumador y realmente futurista, pero es solo un básico solo tenemos que unir los íconos con o páginas, pequeña micro interacción Eso es lo que pasa con la creación de prototipos. Sé que hay muchas cosas que tenemos que cubrir como micro interacción, animación y personalización clave y todo eso. Entonces veremos esas cosas en futuras pujas. Entonces veo a Porto bi y los voy a ver chicos en la siguiente. 25. Prototipo de pruebas de Figma con Figma Mirror: Estudiantes, en esta obra, vamos a estar mirando algo llamado Figma espejo Se trata de una app Figma. Puedes, como, probar tu app en tu teléfono. Vayamos a Playstore o App store si estás usando Apple. Entonces estoy usando Presto, así que iré a Presto, y hay una app llamada Puedes buscar un Figma y después de instalarlo, simplemente ábrelo. Y después de abrir inicia sesión en él con la misma cuenta, que se registra en tu PC Entonces después de iniciar sesión, las interfaces se ven así. Y actualmente tenemos muchos proyectos en mi app. Para que veas que hay opciones. Al igual que el primero es que hay un botón de reproducción en la parte superior izquierda. Entonces eso quiere decir que es el prototipo. Así que sólo podemos hacer click sobre él. Entonces actualmente, estamos usando clickard versión uno. Entonces este es el prototipo. Así que vamos a hacer clic en eso. Vamos al mismo prototipo en el mScreen se puede ver a la vez que tenemos fliardp click card app está abierta en nuestro PC así como en Bien, pero el problema con mi smartphone es que mi teléfono tiene pantalla de 6.2 pulgadas, y el iPhone 15 P max tiene pantalla de 6.69 pulgadas Entonces si voy a la página principal. Bien, para que puedas ver en mi pantalla en la pantalla del móvil, los iconos de la barra de navegación están ocultos. Entonces tengo que desplazarme un poco para obtener ese icono. Pero en Bergamno funciona. Como si toco ahí, puedes ver la animación por aquí, así como puedo acceder a la página principal, categoría. Pero si quiero acceder a la barra de navegación, entonces tengo que rastrear bit de datos, anotarlo bit de datos, y después de eso puedo ir a órdenes de categoría así como a mis cuentas. Entonces así es como funciona el espejo Figma. Es realmente fácil. Digamos que quieres compartir esta app con tu amigo o con tu cliente, y tu cliente no sabe de ninguna app fo. En ese caso, lo que puedes hacer es que puedas ir a prototipo en tu app, y podrás ver la opción llamada share prototype. En esta opción, obtenemos algunas opciones. Puedes agregar un correo de ellos, correo electrónico sumarlos en esta sección, o simplemente puedes copiar este enlace y podrás compartirlo donde quieras. Al igual que en qué app en telegrama, así como en Instagram, puedes DM ellos, y solo pueden abrirla por teléfono. Pero cuando estoy probando esto, como en mi smartphone, no lo sé, por alguna razón simplemente siguió cargando. Como si no fuera capaz de usar esto hace unos días, abrí la misma línea, pero estaba funcionando, pero no sé qué está pasando ahora mismo. No está funcionando en estos momentos. Se puede ver en la pantalla, sólo se está cargando para siempre. Entonces en este caso, no sé, podría haber hamburguesa y el sistema está en mantenimiento. Hay otra cosa. Digamos que si entro en el diseño. Ya te mostré esto, pero déjame mostrártelo de nuevo. Bien, digamos que estamos en la página principal. En el móvil también en la página de inicio. Y si cambio el color de esta pancarta. Como digamos que hago esto en tarifa azul. Se puede ver que cambia en mi aplicación móvil así como en la aplicación fimeter también Es en tiempo real, y es muy bueno ver la interfaz así. Bien. Porque nuestro cliente obtendrá información. Digamos que estás en la llamada y tus clientes dicen: Bien, no me gusta este color, por favor puedes cambiarlo a otra cosa como hacerlo rojo. Entonces en ese caso, solo puedes arrastrar un deslizador y tu cliente lo estará, esto se ve genial. Bien, entonces debemos mantener esto rojo. Bien, así que ese es el beneficio de la aplicación espejo de Puma. Otro beneficio es como digamos cuando eres móvil, puedes ver el tamaño real del ícono, como digamos que el tamaño actual del ícono es bastante bueno, diré, o puedo hacer ese rectángulo pequeño. Entonces depende totalmente del teléfono. Actualmente, estoy usando un teléfono muy viejo. Entonces se está poniendo bastante blandito. Pero si quieres puedes probarlo en tu Digamos que si tienes iPhone, puedes probarlo en iPhone. Y se pueden observar los íconos. Digamos que en tu teléfono, los íconos se ven demasiado grandes. En ese caso, puedes hacerlos pequeños o grandes, así. Pero actualmente, me está gustando esta app. La fabricación de hamburguesas es genial y todas las opciones de la categoría, así como el menú de hamburguesas Entonces todas las cosas se ven geniales. El único icono de la barra de navegación es el detalle un poco grande. Para que podamos cambiar eso. Entonces ese es el beneficio de usar mirror, así obtenemos la perspectiva real de la app, que estamos diseñando. Entonces, compañeros de estudios, así que ese es el video de fotos, y te voy a ver kits en el siguiente. 26. Proyecto de clase 3: magia en el diseño móvil: muestra tu aplicación en Figma: Dé la bienvenida a mis alumnos noticias emocionantes. Hoy es el día del proyecto, y nuestro número de proyecto es tres, supongo. Bien. Entonces vamos al proyecto Tap. Espero que abras este archivo en tu PC. Bien. Entonces primero, tienes que descargar la app Figma desde Playstore así como desde la App store, si tienes iPhone, digamos en cualquier caso, la app no está disponible en tu país Puedes ir a este sitio web llamado figma, y puedes iniciar sesión, y funcionará igual Después de eso prueba tu diseño, ve que el diseño es preciso con tu teléfono. Digamos que si el icono es demasiado grande, así que haz los cambios, también cambia el color, así como el tamaño del teléfono y haz esos cambios y vuelve a revisar tu app en tu teléfono. Después de eso, captura ese marco de alambre así. Después de capturar el marco de alambre así, envíelo a la sección del proyecto. Y digamos que eres un poco conocedor de la tecnología como yo, puedes grabar ese video en tu teléfono, y puedes convertir ese video en archivos de regalo Después de convertir eso, puede enviar a a la sección de proyecto. Este es el enlace para ese sitio web. Puede ir a Auto Express y enviar su archivo por aquí, y tomará algún tiempo. Y después de crear ese archivo de dar, no sé cómo se llama. Se llama gif si así se llama regalo. Para que puedas enviar ese expediente. Y digamos que no sabes cómo grabar pantalla. En ese caso, puedes simplemente capturar una captura de pantalla como esta y enviarme ese archivo. Entonces ese es el proyecto número tres. De la siguiente manera, veremos algo realmente genial llamado animación. Veremos los fundamentos de la animación. Y espero que estés entusiasmado con eso porque es una parte realmente interesante. Así que quédate por eso y haz el proyecto, y te deseo suerte. Así que adiós por ahora. 27. Animación inteligente de Figma para principiantes: Bienvenidos de nuevo a los estudiantes. En este video, nos estamos sumergiendo en el fascinante mundo de la animación en Figma. Hasta ahora, acabábamos de enterarnos de alguna transición de página, pero ciudad para algo nuevo. Eso es transición de elementos. Así que hice un poco de animación para ti. Entonces, si hago clic en el Auto cicon, la magia va a pasar. Entonces, por favor, mantén los ojos abiertos. Así que esa es la pequeña animación que hicimos. Entonces aprendamos a hacer esa animación. Bien, entonces tenemos mi página de pedidos y quiero animar algo en esta página Entonces déjame primero agregar ese ícono de carrito en esta página. Para eso, voy a entrar en plugins e icono h. puedes elegir cualquier icono que quieras. Entonces busquemos carrito. Bien, entonces voy a elegir esta. Tiene un símbolo realmente igual en su interior, y recuerda que tiene un PNG. Entonces por eso puede parecer borroso. Como puedes ver los bordes son borrosos. Bien, entonces déjame crear algunas páginas duplicadas de estas páginas. Bien, entonces nos nate supongo que tres páginas, página una página dos y la página tres. Bien, entonces déjame cambiar el nombre de la página primero porque se va a confundir. Déjame cambiarle el nombre a esto digamos que mi pedido es uno, o podemos nombrarlo como A one. Lo sabré o cualquier otra persona lo sabrá. Esta es la animación. A uno. Déjame copiar y pegar por aquí. Esta será la página dos. Puedes ponerle el nombre que quieras. Animación tres, y esta será Animación cuatro. Bien, ahora vamos a saltar al protipo. Pero antes de hacer eso, déjame salir con esto por primera vez. O podemos hacer una cosa como, digamos, déjame entrar z, y estoy probando algo nuevo. Entonces déjame dejar esto atrás. Pero déjame aumentar el tamaño. Estoy sosteniendo turno y la talla es 1205, 1205. Déjame hacer esto 1205 también. No sé por qué se cambia el color. Esto también será 1205. Debería ser 1205, así como lo mismo con éste Bien, así que ahora puedo trabajar en mi animación. Entonces déjame mandar esto al revés y vamos al protipo. Bien. Por lo que actualmente, estamos en animación millas animación uno. Así que déjame unirme a esta página. En la pestaña, va a hacer algo, pero no queremos que esto deba estar en la pestaña. Debería querer después del retraso, y debería ser animación. Tenemos que elegir la animación inteligente. Lo sé en Figma, es un poco confuso porque uso muchos softares todo film básico SoftareFM en que obtenemos Así que con el encuadre clave, podemos hacer animación. Pero en Figma, tenemos animación inteligente. Y sólo tenemos que elegir la animación como animación inteligente. No tenemos que añadir fotogramas clave. Decide por sí solo. Entonces es bueno, pero si alguien es más grande, esa persona no sabe nada de animación. Animación inteligente, será un poco confuso para ellos. Por lo que actualmente navega a la animación dos, animación inteligente y la facilidad de salida es de 300 milisegundos Pero bien, déjame quedarme 100 milisegundos, pero quiero que esta página o esta cosa debería estar aquí Y este icono del carrito debería estar por aquí. Esto va a ser lo mío. Déjame ir y comprobarlo animación. Está funcionando. Déjame hacerlo otra vez. Bien, entonces es así, pero déjame arreglar el ícono. Supongo que es poco. Tengo que poner en el centro. Ahora va a funcionar. Está funcionando. Podemos algo de animación por aquí. Ahora, déjenme llevar esto a la baja. Ahora, déjame moverme, para que podamos simplemente mover esto hacia esto. Pero en menos panel, puedes ver nuestras imágenes fuera de marco. Entonces tenemos que traer esto dentro del marco. Y si voy al diseño, a veces puede ser contenido de clip, así que puedes por defecto que sea contenido de clip, para que puedas deshacer clic en esto Bien. Déjame ir de nuevo a prototipar y déjame unirme a esto. Bien. Así que navega a esta página animación tres y animate inteligente Y déjame volver a entrar en esta sección. Mis órdenes. Se supone que va por este lado del lado derecho, así que cometí errores Déjame comprobar lo que cometí un error por aquí. Bien, entonces está en la pestaña. No quiero en la pestaña. Debe ser después de retraso. Por lo que va a funcionar ahora. Déjame volver a esta sección. Mis órdenes, debería estar abajo. Bien, lo tengo. Pongo el milisegundo, este milisegundo. Entonces déjame ponerlo 300. Déjame comprobarlo otra vez. Espero que así vuelva a funcionar. Bien, funciona perfectamente bien. Pero ahora queremos que esto sea en este lugar. Entonces lo vamos a mantener tal como está, y lo vamos a sacar éste. Y permítanme unirme a esto otra vez. Y debería ser después de la demora. Y animación 300 milisegundos. Así que déjame intentarlo de nuevo. Bien, nuestra animación está hecha. Bien, entonces bajará, vaya al lado derecho. Bien, esa es nuestra animación. Entonces así es como puedes hacer animación en Figma. Sé que es un poco confuso y un poco difícil de entender, pero vamos a hacer mucha animación en futuros videos. Entonces estadio para eso. Si quieres, puedes volver a ver este video una y otra y otra vez. Entonces entonces obtendrás, cuál es la animación inteligente y cómo funciona en Figma. Y recuerda lo que pasa con el contenido del clip. Si sacas algún elemento fuera del marco, estará fuera del marco. Bien, entonces animación tres elemento está fuera del marco, pero hemos arrastrado dentro Entonces es la parte de animación tres. Entonces solo quiero decir una cosa. En resumen, la animación en Figma gira en torno a algunos principios clave, asegurando que los elementos tengan los mismos nombres, entendiendo el roll up smart animate y gestionando los retrasos para crear un capacidad de animación Figma puede parecer un poco voluminosa, pero es un pequeño precio a pagar por la verticidad Así estadio para una aventura más emocionante de FEMA en el siguiente video 28. Proyecto de clase 4: respira tu diseño: crea animaciones inteligentes en Figma: bienvenida a los alumnos, prepárese para un reto apasionante con el proyecto de clase número tres, o cuatro, supongo que es cuatro. Entonces será nuestra primera animación. Para este proyecto, tienes que crear esta animación de aspecto realmente genial, que he creado aquí. Bien, entonces estas son las instrucciones. Ir a mis pedidos y crear pocas páginas y animarlas. Después de eso, puedes usar un método diferente como yo uso tarjeta, pero puedes usar otro icono como forma o un rectángulo cuadrado o flecha. Depende total de, puedes usar PNG así como icono así como formas. Después de eso, captura de pantalla eso y envíeme. Si eres texto, me gustaré o quieres desafiarme para que puedas grabar ese archivo, grabar tu animación y convertirlo en archivo give. Ya sabes que podemos convertir nuestro Bfour en archivo give en Ado express Entonces usa eso aquí está el enlace, puedes hacer clic en este, y se redirigirá al Auto Express, y después de eso, someterlo a la sección de proyecto. Entonces este será nuestro proyecto número cuatro. Así que sigue todas las instrucciones y envíame esta animación. Entonces ese es un video de olla, y los voy a ver chicos en la siguiente sección. 29. Compartir y comentarios en tiempo real con Figma: Bienvenido de nuevo diseñador. Hoy, estamos tomando nuestra habilidad Figma en arco. Así que has dominado el arte de compartir archivos con tus clientes, y ha sido una navegación fluida Pero ahora, hablemos del trabajo en equipo. Colaborando con su diseño UX llamado AW. Imagina que no estás solo en un proyecto. Hay múltiples mits creativos en una obra de teatro. Para que esto sea perfecto, nos estamos sumergiendo en el reino de los equipos y proyectos de equipo. Ahora, tuviste una buena racha con los borradores. A los borradores limitados el sueño de un diseñador. Pero aquí está la prueba de la trama. Si estás formando equipo con colegas, es hora de un cambio Así que imaginemos un escenario como si estuvieras trabajando en un proyecto crítico, pero tu equipo está disperso en diferentes plataformas, creciendo en retroalimentación y tratando desesperadamente de permanecer en la misma página Entonces es suficiente para que incluso el diseñador más experimentado quiera arrancarse el pelo. Pero, ¿y si hubiera una manera de colaborar sin problemas, compartir archivos sin esfuerzo y mantener a todos informados Entonces estamos presentando a los equipos Figma. Eres una ventanilla única para el diseño colaborativo en Nirvana Entonces actualmente, estoy en casa y en borradores, así que tenemos esta opción llamada adornos Puede ser como esta interfaz alguna vez, pero puede tener un proyecto. Así que vamos a crear un nuevo equipo. Echemos un vistazo a algunos beneficios de la Figma P. Con gratis, actualmente, estamos usando gratis, obtenemos un proyecto, tres archivo de diseño y tres archivos fijum y tres páginas Con la versión propional, obtenemos las nuevas características y otras características también Actualmente, queremos utilizar la versión gratuita. Vamos a crear un equipo y déjame darte yo misionaria Bien. Vamos a crear un equipo. Bien, ahora, agreguemos mL ID. Al igual que, digamos que quieres agregar algunas personas. Entonces quiero agregar una gente. Ese voy a ser yo con mi diferente identificación. Bien, puedes agregar múltiples pueblos ahí dentro. No hay límite puede agregar pueblos ilimitados. De nuevo está mostrando la versión premier, pero quiero quedarme con mi startup, así que voy a elegir Starter Pack y tenemos una versión gratuita del equipo. Bien, entonces no tiene nada en estos momentos. Entonces digamos que estamos trabajando con borradores, y queremos agregar algunos miembros del equipo en nuestro diseño Entonces digamos que estamos trabajando en este proyecto, y queremos agregar algunos miembros del equipo en nuestro diseño, solo pueda rastrear este archivo y pueda agregar esto a nuestro equipo, eso es equipo imaginario. Ahora está en los equipos. Ahora, vamos a abrirla. Bien, entonces, actualmente, esa persona no está disponible aquí porque esa persona no aceptó nuestra solicitud. Entonces déjame ir a dejarme iniciar sesión con esa cuenta y dejarme aceptar la solicitud. Bien, así que me encerré con esa cuenta y obtuve este diseño. Ahora, puedo simplemente arrastrar cualquier elemento o puedo agregar cualquier elemento, y puedo hacer lo que quiera. Puedo agregar una ponchería como digamos, elementos como este, puedo agregar colores. Bien. Yo voy primero. Bien, entonces si vuelvo a mi cuenta principal, así como pueden ver, también está disponible aquí, déjenme hacer así. Bien, así que también puedo ver a esa persona, como lo que está haciendo en nuestro diseño y qué tipo de cambios está haciendo. Y también podemos asignar, en tiempo real, como, Bien, no quiero este color, cambiarlo a otra cosa, así que puede cambiar eso así. Entonces ese es el beneficio de equipos colaborativos y el uso de equipos. Entonces por ahora, voy a dejar esto porque espero que encontéis el punto, como cómo funciona el equipo, pero déjame decirte otras características de los equipos. Bien, entonces las víctimas compartimos lugar de trabajo así. Y en esto, podemos agregar múltiples archivos. Pero estamos usando la versión gratuita, por lo que somos capaces de crear sólo tres archivos. Como puedes ver, actualmente usamos uno. Nos quedan dos, y también tres archivos JM fijos En el lugar de trabajo compartido, somos capaces de compartir archivos, prototipos y arreglar jam al mismo tiempo. También podemos hacer comentarios de hilo en algunos de nuestros diseños, esa persona puede simplemente ir a este rectángulo y agregar comentario y podemos obtener respuesta en un instante en tiempo real. También obtenemos control de versiones. Después de eso, esa persona puede obtener acceso basado en roles, como queremos mantener nuestra información segura. Entonces en ese caso, podemos asignar el rol. Con equipos, somos capaces de gestionar proyectos. En esto, podemos organizar nuestra plantilla de proyecto, lista de tareas y fechas de vencimiento, y también podemos centralizar nuestro sistema de diseño Y después del final del proyecto, podemos analizar nuestro proyecto, como podemos obtener información valiosa de las actividades de nuestro equipo e identificar áreas a mejorar. Pero te voy a sugerir una cosa, digamos que estamos trabajando solos. Entonces en ese caso, no uses equipos, ve con los borradores porque los borradores son más fáciles, y con los borradores, podemos agregar Pero en equipos si puedes ver, solo podemos agregar tres páginas. Pero en los borradores, podemos agregar varias páginas, y no hay como ninguna limitación Por lo que el equilibrio entre plaus libre y pad depende de la necesidad específica y la escala de su trabajo de diseño Entonces así es como crear un equipo, agregar múltiples colaboradores en nuestro equipo y las características del equipo. Espero que entiendas todo esto. Voy a decir otra vez, una cosa. Si trabajas tan bajo, no requieres equipos. Pero si estás trabajando con como dos o tres miembros, puede esa vez, puedes ir a equipos y actualizar a virgen profesional. Así que esos son los chicos fo, y los voy a ver en la siguiente. 30. Figma Colaborarás en tiempo real con el multijugador: bienvenida a mis alumnos. En este proyecto de ley, vamos a explorar el proceso de compartir nuestros diseños con nuestros clientes. Supongamos que este es mi cliente imaginario, y compartí mi proyecto con él. Así que cada vez que se mueve en su diseño, puedo ver qué tipo de cosas está haciendo en nuestro diseño. Como, digamos que está pasando por este circo o pancarta o digamos este Pergamo podemos ver todas esas cosas Entonces veamos cómo podemos compartir nuestro diseño con nuestro cliente. Bien, entonces este es nuestro diseño. Este es nuestro marco de alambre, y también agregamos algo de animación por aquí. Así que vamos y compartamos con nuestro cliente. Entonces digamos que mi nombre de cliente es Chetan. Ese también es mi nombre porque inicié sesión desde otra cuenta, así que es mi nombre por aquí, y esta es mi cuenta real, que solía usar Figma. Bien, así que quiero compartir esto con Chen. Puedo agregar a esa persona o simplemente puedo copiar este enlace y compartirlo a través de, digamos, qué es la aplicación, Gmail, cualquier otra red social, que te guste. Por ahora, vamos con navegador simple y déjame copiar ese enlace. Así que cualquiera con el enlace podrá ver nuestro diseño. Y esa persona obtiene una cuenta anónima como esta, y esta es nuestra cuenta real. Pero con el vínculo, esa persona sólo es capaz de ver el diseño. No es capaz de hacer mucho. Como que no puede editar o no puede comentar nuestro diseño. Pero no puede presentar nuestro diseño. Como, digamos si queremos tener una visión de diseño similar, como qué cosas hicimos en protipado, que pueda ver esas cosas Entonces como esta, como creamos esta sencilla animación, cuenta de categoría y todo eso. Ahora, actualicemos nuestro cliente imaginario que me dejó iniciar sesión con mi mit secundario. Entonces, si esa persona inició sesión, así podrá ver todo, como el brief, así como los diferentes tipos de páginas que creamos, como para tablet, para móvil, así como el flujo de tareas. Esa persona sólo puede ver el diseño. No puede editar. Digamos que esa persona trata de arrastrar esto. No va a suceder porque sólo dimos el permiso para ver, no a ello. Pero lo que puede hacer es eso, puede agregar un comentario. Digamos que tiene curiosidad por esta cosa como este circo. Así que simplemente puedes hacer click en él y agregar comentarios como este. Qué presenta el circo, y puedes mandar esto al diseñador principal. Ese soy yo. Entonces si entro en mi diseño real, como este soy yo, esta es mi cuenta principal, así puedo ver en mis comentarios, tengo comentario, y también está apareciendo por aquí Solo puedo ir a comentarios y ver qué comentario me llegó de Ceden simplemente puedo hacer click sobre este comentario Bien, entonces solo puedo responder, esta es de cuatro categorías. Categoría y solo puedo enviarla. Bien, entonces esa persona obtuvo nuestra respuesta, y yo sólo puedo hacer clic en este botón de resolución. Y si entro en comentarios, pueden ver que nuestros comentarios están resueltos ahora. Déjame mostrarte una cosa. Hazlo así. Bien, para que veas lo que está haciendo en nuestro diseño. Digamos que está rondando su ratón así, como en este diseño, que creamos Entonces, ¿podemos ver por dónde va por qué cosas está pasando? Como ¿le gusta el marco o no? Digamos que ambos estamos de guardia, y digamos que quiere, como, a mí no me gusta este color. Y, déjame ir. Bien. Déjame llevarme esta. Bien, entonces si dice, no me gusta este color, ¿ puedes cambiar esto? Así que sólo puedo ir a mi Figma. Y sólo puedo cambiar de color así. Puedo elegir rojo, verde, azul, así. Ese es el beneficio de colaborar usando un Figma. La verdadera magia ocurre con las capacidades de diseño colaborativo Figma Demostré que soy yo. Demostré a mi cliente como lo que podemos hacer con la función colaborativa con un elemento manipulador de usuario que el otro usuario puede ver en tiempo real Es una característica poderosa para el diseñador que trabaja con colaboración. Esto mantiene organizado el proceso de diseño y ayuda a los diseñadores a administrar los comentarios de los clientes de manera efectiva. En resumen compartir diseño en Figma es una frase. Ya sea a través de un enlace simple para comentarios iniciales o al permitir comentarios para una interacción más detallada, la función de colaboración de la plataforma se mejoró comunicarse entre los diseñadores y el cliente, haciendo que el proceso de revisión de diseño más suave e interactivo Eso es todo acerca de compartir tu diseño con tu cliente y lo del comando. Quédese en para el siguiente a continuación en Explorar yendo a ver, supongo que los equipos cómo funcionan los equipos. Eso es un puerto y te veo Kai en el siguiente. 31. Qué son los Moodboards y el SECRETO para encontrar inspiración para el diseño de aplicaciones y web FAST: Bienvenido de nuevo diseñador. En la creencia de hoy vamos a aprender sobre qué es mood board y cómo obtener inspiración para tus proyectos. Imagínese mirando un lienzo en blanco, su mente desplazándose con ideas pero Pero al carecer de una visión cohesiva para su próximo proyecto estadounidense, podría ser abrumador, ¿verdad? Entra en el mood board. Tú creando brújula y hoja de ruta visual hacia el éxito moodboards son más que un simple collage. Son herramientas poderosas. Desbloquean todo el potencial de Un viaje de diseño. Vamos a sumergirnos en las tablas de estado de ánimo mágicas y descubramos por qué son un arma indispensable en el diseño UX. Primero en esta claridad y enfoque. Imagina vender sin un mapa. Eso es esencialmente lo que se siente diseñar sin un moodboards Moodboards proporcionan la claridad y el enfoque necesarios al capturar la esencia del proyecto O. Usted define el pin estético en la paleta de colores, explora la fuente y la textura, y establece un lenguaje visual constituyente. Esta hoja de ruta le guía nuestra decisión de diseño, asegurando una experiencia de usuario coherente y sin trabas En segundo lugar, la inspiración y la creatividad. Los moodboards son como una fiesta visual para tu alma. La vibrante mezcla de imágenes, color y textura enciende tu chispa creativa y alimenta tu imaginación Es una fuente constante de inspiración, abriendo puertas para nuevas posibilidades de diseño y enfoques innovadores A medida que experimentas con diferentes elementos, tus tablas de estado de ánimo evolucionan, reflejando el panorama siempre cambiante de tu visión creativa El tercero es la colaboración y la comunicación. La comunicación es clave. Y el moodboard incumple los límites entre diseñadores, clientes Actúan como una poderosa herramienta de comunicación, traduciendo tu idea abstracta en una representación visual concreta Al presentar tu moodboard, efectivamente compartes tu visión, asegurando que todos estén en la misma página, alineados con la dirección del proyecto e invertidos en su El primero es la consistencia y la covisión. Imagina un diseño donde cada elemento se sienta como fuera de lugar como una discordia discordante en Moodboards evitan esta falta de armonía al promover la consistencia y la cohesión Al reflejar su mapa visual de roles, lo largo del proceso de diseño, asegura cada detalle desde la paleta de colores hasta la tipografía, alineado con su visión inicial, creando una experiencia de usuario unificada y armoniosa Y el último es la toma de decisiones y la eficiencia. Moodboards actúa como un catalizador para la decisiones eficiente con una visión clara expuesta ante usted. Tomar decisiones con respecto a los elementos de diseño se vuelve fácil. Elementos el trabajo de gas, evita revisiones costosas y navega por el proceso de diseño con la conferencia y el enfoque. La claridad y dirección proporcionada por más Tableros. En última instancia, optimice su flujo de trabajo, ahorrando tiempo y recursos valiosos. Entonces eso es todo acerca de las más tablas. Ahora veamos la manera de inspirarnos para nuestros proyectos. Así que el primer sitio web es una página de amor. Este es el sitio web donde puedes obtener mucha inspiración para tus proyectos. Y lo mejor de este sitio web es que puedes ordenar muchas cosas por aquí. Como digamos, quiero diseñar app. Puedo ir a plantillas y app. También puedes ir a recursos info hire, y también a la build one page. Entonces actualmente, estoy en las plantillas y app. Entonces se puede decir que tengo un montón de plantillas. Sólo puedo ir a cualquier plantilla. Digamos, ve con ésta, esta cabeza a una. Entonces en eso, puedo ver la fuente, así como la imagen, así como el color del fondo y el tipo del diseño. Así es como puedes inspirarte para tu proyecto. que puedas ir a este sitio web, consultar todas las plantillas y los diseños e inspirarte para tu proyecto. Ahora, el segundo es voto, Ivo voto limita. Este también es un sitio web realmente genial para inspirarse. Solo tienes que ir a buscar y escribir lo que quieras, como en este caso, quiero sitio web de comercio, aplicación de comercio de manzanas de comercio electrónico. Y te mostraremos todas las apps. Bien, así es como se ve la app. Así que puedes tomar una app de captura y podemos agregarla en un mood board. Entonces el siguiente es Dribble es uno de los mejores sitios web para EV Dris y este sitio web de guerras es uno de los Entonces estos son los tres mejores sitios web Un diseño utilizado para inspirarse. Además, hay parada de Adobe. Puedes ir a este sitio web y buscar lo que quieras e inspirarte en él. Puedes descargar esta imagen o tomar una captura de pantalla de esas. Y después de tomar esas imágenes y captura de pantalla, solo ingresa a la Figma. Entonces estos son el sitio web donde puedes inspirarte. Déjame mostrarte este premio uno. Esto es realmente genial. Tiene muy, realmente genial voy a decir plantillas y sitios web, que son realmente premiados. Digamos si voy a alguna página web. Entonces, como pueden ver, este es un sitio web realmente minimalista. Tiene algo de texto y todo eso. Y el texto es realmente sencillo pero atractivo. Las imágenes utilizadas también son realmente geniales. Entonces, todo esto se trata de los mood boards y cómo inspirarte para tu proyecto. Ahora, déjame mostrarte un mood board que creé para mi proyecto, y vamos a crear ese proyecto en el segundo proyecto. Entonces déjame mostrarte eso. Entonces este es nuestro segundo proyecto, y este es el mood board y el diseño de texto y todo eso. También está presente. que actualmente está muy mal. Lo organizaré en el futuro. Pero así es como se ve el moodboard. Uh, tomé un montón de capturas de pantalla, y las arreglé, y también creé esto, como paleta de colores O para este diseño específico, y el diseño final se ve así. No sé cómo mostrarte tanto, pero ese es el mood board y la paleta de colores. Entonces eso es todo acerca de los mood boards y sitios web inspiradores Solo pasa por ello. Agregué todos los enlaces en los recursos y lo reviso, inspiré, tomo algunas imágenes como captura de pantalla, normalmente lo capturo. Entonces, estado para el próximo video, estaremos revelando cómo organizo los s en mood boards. Entonces te atraparé en la siguiente. 32. Cómo crear un Moodboard en Figma: Nosotros por mentes creativas. Hoy, nos sumergimos en el arte de los mood boards. Te mostraré cómo transformar tu captura de pantalla inspiradora en algo pulido, tanto para tu viaje creativo personal para esos clientes plinky Entonces comencemos con nuestros mood boards. Para ello, podemos ir a la comunidad Figma y solo buscar mood boards. Entonces déjame mostrarte. Bien, para que puedas ir a esta comunidad Figma. Y busca mood boards, obtendrás un montón de mood boards y podrás seleccionar cualquiera de ellos. Entonces seleccioné este tres, como éste, éste, y éste. Entonces este es el ejemplo, como cómo va a quedar el mood board. Entonces esto es como tablas de estado de ánimo más organizadas. Entonces, en vista anterior, te mostré mi mood board. Estaba realmente desordenado. Entonces, si quieres organizar si quieres crear un mood board organizado, puedes elegir esta tableta, copiar esta, déjame copiar otra. Bien, déjame copiar esto. Y vamos a Power Project, y vamos a pegarlo aquí. Y ahora puedo agregar una imagen. Entonces déjame rastrear una imagen primero más imagen. En el archivo de ejercicio Figma, agregué mood boards, para que también puedas tomar una captura de pantalla si quieres, o si tienes tu propia captura de pantalla, podemos elegir eso también Abre uno, dos, tres. Esta es la forma más organizada, pero voy a leer ésta. Bien, te voy a mostrar mi camino, así que el camino sucio. Si trabajas tan bajo, voy a decir que te vas sucio. Arrastra un marco como este y déjame seleccionar algunas imágenes de nuevo. Simplemente iré a mi olla de moldes, y los seleccionaré a todos, y simplemente la tiraré por aquí. Después de eso, lo organizaré así. Esta es mi manera. Simplemente puedes crear un marco y volcarlo así, y puedes nombrarlo mood boards. Si quieres, puedes ir a la comunidad y puedes elegir esta también. Para una manera más organizada. Si estás trabajando así que te diré, ensuciate y crea mood boards como este. Recuerda, estos mood boards son una herramienta de comunicación vital, por lo que ayudan a transmitir tu dirección de diseño a los clientes. Entonces ahí lo tienes, el tablero de humor rápido y sucio para tu exploración creada, y la versión policial para nuestras líneas. Así que preocúpate por más aventura de diseño en el siguiente video. 33. Proyecto de clase 5: estación de inspiración: construcción de un Moodboard en Figma: Hola a todos. Bienvenido al proyecto número cinco. Eso es Mood Board. En este proyecto, exploraremos el apasionante mundo de los mood boards. Para tu proyecto, así que vamos a sumergirnos. Lo primero, primero, necesitarás crear un moodboard, para tu UI Esta es una representación visual del estilo estético general y la emoción. Quieres que tu marca transmita. Una vez que hayas creado tus mood boards, es hora de exhibir. Si puedes crear una página dedicada y puedes nombrarla moodboards, y puedes copiarla y pegarla aquí para más organización Esto podría ser un simple volcado de captura de pantalla o algo un poco más elaborado como ejemplo de la comunidad Figma Después de crear más tablero como este, toma una captura de pantalla de esto y envíame en la sección de proyectos. Entonces ese va a ser nuestro proyecto número cinco, crear un tablero más, y someterme a mí. Son las fotos B y voy a ver chicos en la siguiente. 34. Crearás un sistema de cuadrícula receptivo para el diseño web y de interfaz de usuario: Hola a todos, y bienvenidos de nuevo a la interfaz de usuario EX diseñadores figma costo Hemos cubierto una gran cantidad de terrenos hasta el momento. Desde lo básico hasta la elaboración de estructuras alámbricas y prototipos de baja palmadita estructuras alámbricas y prototipos de baja palmadita Ahora es el momento de poner a prueba nuestras habilidades y comenzar a diseñar una interfaz real. Entonces, a partir de hoy, nos estamos sumergiendo en nuestros wireframes de foso alto que son marcos de fuego alto Y hoy, también aprenderemos sobre cómo agregar columnas, calificaciones en nuestra aplicación móvil. Entonces primero lo primero. Entonces, como puede ver, actualmente, estamos en wireframe de baja fidelidad. Eso es una tarifa baja. Pero en las páginas, llamé aplicación móvil Clickart, pero esta no es la aplicación, así que déjame cambiarle el nombre a esta Haga doble clic. Y voy a renombrar esto. Aplicación móvil Click Card, tarifa baja. Eso es estructura alámbrica de baja faity. Bien. Puedes ponerle el nombre que quieras. Estoy nombrando esto Puedes nombrar como Amazon, así como Walmart. Entonces depende totalmente de que también te puedas poner un nombre en lugar de pli card Y creamos esta página para tablet, pero no estamos diseñando ninguna app para tablet. En realidad estamos diseñando aplicaciones. Entonces déjame cambiar el nombre de esto. Yo solo lo nombraré app y si. Eso es un marco de alambre de alta fidelidad. Así que siempre que queramos entrar en wireframe, podemos simplemente ir así y podemos ir a nuestra alta fidelidad Bien. Entonces ahora vamos a los marcos y agreguemos un marco porque quiero mostrarte y enseñarte sobre los scritos de columna Hay algunas cosas que el usuario no ve, pero nosotros como diseñador las usamos para hacer que colocar los componentes en la pantalla sea más fácil y consistente. Cuando diseñas una pantalla, tienes diferentes componentes que difieren en un tamaño y distantes entre sí. Así que aquí hay una breve descripción general de cómo estructurar una pantalla para tomar una decisión rápida mientras se diseña. Lo primero serán los márgenes. Los márgenes son el espacio que se encuentra entre el contenido y los bordes de la pantalla. Se definen con H fija, generalmente de 16 píxeles, pero algunas aplicaciones utilizan 20 o 24 márgenes. Todo el tamaño de los elementos de la interfaz de usuario y el espacio entre ellos se establecen como un múltiplo del número de ocho. Podrías estar pensando en ocho porque es fácil dividir la mayor parte de la pantalla móvil en la cuadrícula de ocho. Ahora, lo siguiente son las cosas entre márgenes que son columnas. El contenido se coloca dentro de las columnas. Esto nos ayuda a tomar decisiones sobre dónde colocar un elemento y hacer una interfaz bien estructurada. Las columnas ayudan al desarrollador a crear un diseño consistente en múltiples tamaños de pantalla. El número más común es cuatro, pero puedes probar seis u ocho. El ancho se define usando porcentaje en lugar de valores fijos. Y lo siguiente son las canaletas. Los canalones separan el contenedor en las columnas. El valor recomendado para canalón también es de 16 píxeles. Menos de 16 píxeles por lo general no es suficiente para mantener el elemento visualmente separado. Pero bueno, tal vez ocho píxeles podrían funcionar en algún momento. Solo pruébalo por eo self. Ahora, hablemos de las filas. También se le llama como un grano de UI horizontal. Un grano de interfaz de usuario horizontal se utiliza para alinear horizontalmente los elementos de la interfaz de usuario, como botones, tarjetas e interruptores Las calificaciones horizontales se establecen en un ritmo de ocho píxeles. Esto asegurará que el espaciado vertical y horizontal estén sincronizados. Vamos a fragma alemana y agreguemos algunas calificaciones y columnas Entonces, si haces clic en tu marco en el panel de diseño, obtenemos la pantalla de diseño Simplemente haz clic en él. Y primero, es un poco hábil es de diez píxeles la cuadrícula es de diez píxeles, pero quiero configurar la primera voy a decir columnas, así que vamos a elegir una columna Y la mayoría de las veces uso un cuatro. Yo frente puedes usar seis u ocho. Depende totalmente de ti y de tu diseño. El margen debe ser 16 y los canalones deben ser 16 dos. Entonces estos son los valores estándar de la industria. ¿Bien? Ahora, vamos con una fila. Ya terminamos con columnas. Así que simplemente haz clic en el botón plotum plus y ahora varillas. Entonces para filas, y voy a decir que el conteo debe ser automático porque automáticamente va a adear el conteo. Y yo una vez debería estar en el centro, y la altura debería ser ocho y la cuneta también debería ser ocho Entonces eso es todo, escribe el valor y mira tu hermoso diseño. Y aquí hay un protape. Juega con números, un poco, tal vez tri seis columnas u ocho para ver qué va a pasar y cómo puedes usarlo. Para activar y desactivar la cuadrícula de diseño, simplemente haga clic en el icono como aquí. Podemos apagarlo y encenderlo así. O puedes usar el atajo para controlar G para Mac y controlar el turno para Windows. Y aquí está la cinta pro más importante. Al igual que, no te preocupes, si un componente funciona y se ve mejor cuando no está perfectamente alineado con una cuadrícula. Grid está aquí para ayudarte, pero no tienes que seguirlos ciegamente. Si mantienes la mayoría de las cosas alineadas, y un pequeño ajuste no romperá nada. El contenido definirá la grilla no al revés. Entonces eso es todo sobre los márgenes cortadores de rejilla, columnas, pisos. Sí, así es como colocamos nuestras rejillas en nuestros marcos. Entonces ese es un video de photros, y los voy a ver chicos en el siguiente 35. Cómo elegir colores (inspiración de colores): Bienvenido diseñador Max. En este mundo, nos estamos sumergiendo en el colorido mundo del diseño y explorando las diversas fuentes de inspiración del color. Entonces comencemos en cómo encontrar extracto y usar estos colores en Figma. Primero, hay numerosos sitios web dedicados a la inspiración del color, pero déjame decirte uno Ju Juhad es algo así como que hacemos algo raro y hacemos algo útil Es el mundo indio. Bien, entonces déjame mostrarte una cosa. Entonces, la mayor parte del tiempo, lo que hago es que creo placas madre así y dibujo algunos rectángulos Supongamos, este es el rectángulo. Esto es un rectángulo. Y solo voy al campo y elijo herramienta cuentagotas, y colores extra como este Y si quiero una paleta de colores, así puedo ir a colores y cuentagotas, y vamos a elegir este color ¿Bien? Bien, éste. Como pueden ver, así es como extraigo mis colores. Esta es la forma realmente básica. Esta no es de esa manera profesional, pero puedes usarla y luego funciona. Hagamos disparar otra bola. Bien, vamos con éste. Entonces tenemos tres tipos diferentes de color naranja. Bien, así es como podemos extraer colores. Ahora, déjame mostrarte algunos enchufes de donde puedes inspirarte para tus paletas de colores Bien. El primero son las paletas de colores, estas cuatro Y también tenemos éste. Pero Figma ejecuta un enchufe a la vez. Bien, entonces también tenemos esta paleta de colores slash muestra de color Bien, entonces también podemos usar esta. Como digamos, si selecciono este y quiero copiar este, solo puedo copiar e ir a este relleno y control de plagas. Y se puede ver que el color se cambia ahora. Entonces a partir de aquí, podemos obtener un montón de paletas de colores, y hay otro plugin llamado paletas de colores Y bien también es exactamente el mismo sitio web. Simplemente seleccione el rectángulo y elija el color que desee y simplemente haga clic en él. Se agregará ese color en ese rectángulo. Ahora tienes una paleta de colores. Ahora, vayamos de manera proponal, y veamos algunos sitios web que brindan paleta de colores y algo de inspiración para tus proyectos Bien. El primero es uno de los mejores voy a decir, y la mayoría del diseño gráfico utiliza estos sitios web. El primero es va colors, w.com slash Colors. Podemos ir a este sitio web, y ahí tenemos cuatro opciones como generador de paleta de colores, idea de paleta de colores, rueda de colores y significado de color. Así que vamos con generador de color parte. Digamos que tienes una imagen y actualmente, vamos a MO imagen. Bien, entonces si tienes una imagen, puedes subirla, y extraerá todos los colores, y te dará el código X para ella, y solo puedes copiarla y pegarla en Figma Y puedes usar eso como paleta de colores. Entonces esta es la primera opción. Después de eso, saltemos a las ideas de paleta de colores. Aquí también tenemos opciones de bunjop. Y podemos escribir como qué tipo de colores queremos. Como digamos que quiero un coma azul Negro Amarillo. Bien, veamos. Así que conseguimos algunos barats de color bonitos tenemos azul, amarillo, así como lo que escribí Entonces este tipo de así es como funciona este color barrats. El siguiente es rueda de colores. Oh, este es uno de los más grandes que voy a decir. Si vamos a rueda de colores, y si elegimos cualquier color, como, et, vamos con rojo. También te dirá el color complementario. Y también se puede cambiar a monocromática, así como a análoga Después de eso, si quieres análogos, puedes obtener tres colores en eso. En striic también obtenemos tres colores con diferentes colores, y en sottic obtenemos cuatro Podemos simplemente copiar esto y exportar esta paleta y usted puede ingresar a Puma y usarla para nuestro diseño. Si quieres obtener mucha información sobre algún color seriesico, solo tienes que ir al significado del color, y puedes escribir supongo nombre del color, y te dirá toda la historia Digamos que si voy con éste, Amber, entonces me va a contar toda la historia sobre ese color. Si te interesa más, puedes ir a esta página web. Si quieres aprender sobre los colores. Ahora, el siguiente es Adobclor. También es algo igual, pero también tiene características similares como va. Giramos este dial y conseguimos estos colores, y podemos cambiar el modo de color RGB SG lab, así como también podemos buscar actor necesidad, como lo hice en un, como azul, amarillo y verde, algo así. Puedes adjuntar por aquí, y obtendrás paleta de colores como esta. Ahora, el siguiente es extraerlos. Entonces vimos en Canva, como podemos subir cualquier archivo, vamos a subir este, y extraerá todos los colores de él Si ves a simple vista, diremos solo dos colores como azul lo siento, amarillo y blanco. Pero con esta herramienta, podemos ver los diferentes tonos de amarillo, así como el negro negro. Y también puedes extraer el color degradado, como puedes ver el color degradado. Y esta es importante, la herramienta de accesibilidad. Te dirá que este color es adecuado para tu diseño o no. Como, veamos si uso algo más. Entonces déjame usar esta. Para que veas que se siente y el color no va con el color principal color de fondo. El color del texto no va con el color bground. Por lo que te dirá qué color es genial para nuestro diseño de fondo para un texto. Entonces esto es realmente útil. Puedes ir a Explorar para obtener más paletas de colores como esta, y podemos buscar de acuerdo a nuestra necesidad Y también hay una sección de tendencias, por lo que te dirá todas las paletas de colores de tendencia Si quieres descargar este sec, solo descárgalo e impórtalo a figma vamos a descargar este Y déjeme agregar eso a Figma. Bien. Bien, entonces esta fue la imagen que descargó. Entonces esta es la parte de color. También viene con código X. También puedes elegir tropo dos para extraer ese color. Ahora, saltemos al siguiente sitio web. Eso es la caza del color. uno de los sitios web muy populares en diseño gráfico en el campo vx así como en el campo motivador Entonces solo puedes ir al subsitio. Ya ha hecho paleta de colores. Simplemente puedes descargarlo e importarlo a Figma. También puedes buscarlo de acuerdo a los colores. Así como muestra un cromón popular y todas las secciones aleatorias de tiempo Si te gusta algún color, como si te gusta este, y si vas a colección, te mostrará. Tienes esta cosa en colección. Bien, entonces esto es sobre la caza del color. Si quieres paletas de colores degradados, ve a Criban. También es uno del tipo de sitio web popular, puedes ir a este sitio web y copiar estos colores y usarlo en tu diseño. Recuerda, el mundo está lleno de colores, y tu diseño debe reflejar el tono, el ánimo y el propósito de tu proyecto. Ya sea que se esté inspirando sitios web, degradados o diseños existentes, Fiber proporciona la herramienta para hacer que la creación de su paleta de colores sea sencilla. Así que experimenta, explora y deja fluir tu creatividad. En el siguiente video, continuaremos nuestro viaje de diseño, así que el estado afinado. 36. Cómo hago paletas de colores de la interfaz de usuario en figma: Bienvenida. En este wow, nos estamos sumergiendo en el colorido reino del diseño al crear una paleta de colores que servirá base para nuestras hierbas simuladas de alta fidelidad. Entonces este es el ejemplo de mi paleta de colores. Entonces esta es la técnica poco avanzada y esta es la técnica normal, que vamos a aprender ahora. Y estos son mis colores principales. Como este es el color primario. Este es el segundo color, y este es el color o neutro coolor o se le puede llamar acento Así que vamos a crear un sistema de color. Entonces, antes de hacer eso, déjame decirte una cosa. Digamos que hay alguna app favorita en la que quieras replicar los colores Digamos Instagram. Entonces hay un sitio web llamado Brand ***. Tiene toda la información de que marcas como fuentes, así como los colores, así como yo diría las imágenes y todo eso. Vamos a saltar a Instagram. Digamos que instagram es un tipo héroe, y podemos saltar a Sagm y nos dirá todas las cosas como el logo, así como la fuente y así como el color Entonces vamos a los colores. Se puede ver que obtenemos ocho colores. Y si quieres inspirarte en esta marca, solo puedes copiar los colores y utilizarla en tu marca. Esta es una de las mejores opciones voy a decir. También hay opción de Tesla. Se puede ver en Tesla y vamos a los colores. Se puede ver que T L es colores realmente básicos. No tiene ningún perfil al mismo. Estos son colores son realmente básicos. Al igual que la gente que conoce los códigos de color que conocerán, este es uno de los colores básicos. Esto es totalmente blanco, este es el totalmente negro, y este es el color totalmente rojo. Si quieres ir por estos colores, solo ve por ello. Ahora, vamos a saltar a Figma y vamos a crear nuestra paleta de colores Bien, vamos a dibujar un marco, y voy a llamarlo sistema de color. Ahora, vamos a traer nuestros colores primarios. En mi caso, estos van a ser mis colores primarios para nuestra aplicación de tarjeta de clic, y déjame pegarlo y dejarme duplicar este. Duplico así. Bien, entonces estos serán los colores principales. Esto será como una especie de tonos de los colores, y este será tinte supongo. Bien, entonces voy a diseñar primero chint vamos a Phil, y voy a elegir Por defecto, va a ser x, así que elige SSH SL, y solo tienes que usar shifty y down erk para cambiar los valores Pero antes hay que elegir cualquiera de los parámetros. Como en este caso, voy a elegir esta ligereza, y voy a disminuir esto en diez. Y lo mismo con este diez. También podemos cambiar la saturación también. Actualmente, es d uno. Déjame bajar un poco a 71, igual con esta, luces menos diez, y esta también es la saturación. Creo que aquí no cambié la saturación. Bien, entonces esta va a ser mi sección de tinte, y esta va a ser mi sección compartida. Entonces déjame compartirlo. Actualmente es el turno 81 y AppareF este también Entiende este . En este caso, la saturación 100, por lo que vamos a mantener 100 ats. Si va a cien en ese caso, puedes modificarlo un poco. Sólo queremos un indicio de ese color. Voy a subir al 95. Es visible. Apenas visible. Ahora, queremos crear algunas acciones como acciones en blanco y negro del color primario. Déjame copiar este y déjame hacer los cinco de ellos. Esto va a ser a no totalmente negro, similar a los colores. Al igual que tiene que ser lo más oscuro de este color. Voy a ir a éste. Depende totalmente de ti y de tu diseño. Ahora, en este caso, voy a hacerlo un poco más brillante, así y copiamos éste. Déjame núcleo más izquierda Lo mismo con este. El último tiene que ser en blanco blanquecino, no totalmente blanquecino. Si hacemos blanco, es utilizable. Déjame que sea blanquecino. Bien, así. Bien, entonces esta va a ser nuestra paleta de colores para este diseño de interfaz de usuario para tarjeta. Así es como creamos paleta de colores en Figma para nuestro diseño Y. Y siguiente paga, vamos a ver cómo crear el estilo. Por lo que es realmente útil. Déjame dibujar rectángulo. Así que sólo puedo arrastrarlo cualquier rectángulo. Yo sólo puedo ir a llenar, y puedo elegir mi paleta de colores como digamos mi actualmente, esta es las diferentes paletas Entonces el color es diferente. Entonces digamos, uh, este es mi cólogo primario al que puedo seleccionar Entonces no tengo que entrar como relleno, y luego tengo que elegir el color y soltar tengo que dejar caer. La tarea de reput se detiene por aquí. Entonces solo tenemos que ir a esta sección en estilos, en biblioteca, y tenemos que elegir colores para nuestro diseño. Esto es sencillo. Este es nuestro sistema de diseño. Oh, lo siento. Este es nuestro sistema de color para esta app, clickat app. Y aquí hay un tipo pro. Es esencial no que el color pueda ser útil para explorar colores complementarios, como puedes ir a colores canva o colores auto B, y puedes elegir los colores complementarios Esto puede ayudar a encontrar color secundario y neutro para que armonicen con la paleta elegida Recuerda, si bien hay algo de ciencia a la teoría del color, también hay un elemento de creatividad. El proceso implica una mezcla de intuición, preferencia personal y experimentación Así que siéntete libre de explorar y adj hasta que encuentres una paleta de colores que resuene con la visión del diseño 37. Cómo crear gradientes en Figma: Go maxi designer, hoy estamos buceando al vibrante mundo de los abgradientes Y créeme, va a ser una explosión. Así que abróchate el cinturón mientras nos embarcamos en el viaje para crear gradientes que no son solo eradientes, son un retroceso al Sí, estamos haciendo gradientes con un giro. Bien, así que vamos a saltar a Figma y vamos a crear gradiente. Entonces por ahora, voy a elegir un rectángulo y dejarme mantener el turno para rectángulo. Para crear gradiente, tenemos una opción especial en Phil. Entonces vamos con Phil y podemos ver que tenemos un montón de opciones como primero decolorar Después de eso, tenemos gradiente. Después de eso, tenemos milosis. Después de eso, tenemos imágenes y después de ese video. Actualmente elegimos gradiente. E ingrediente, obtenemos cuatro opciones como lineal, radial, angular y diamante. Entonces, la mayor parte del tiempo, no usamos este angular y diamante. Pero uso un lineal muchas veces. Así que vamos con lineal. Entonces obtenemos estas opciones, déjame entrar. Entonces verás que conseguimos estas dos cajas. Primero, es el color primario. Entonces voy a elegir la tarifa. Y segundo va a ser un color secundario. Puedes elegir el color que quieras. Entonces voy a ir con digamos hola así. Bien, actualmente es transparente, por lo que podemos aumentar la tasa de transparencia para que obtengamos un color más brillante como este. Y obtenemos algo así como la vibra del atardecer en nuestro gradado. Simplemente podemos ajustar estas líneas para el color principal y el color secundario así. Si elijo, digamos, radial, para que veas que obtenemos este tipo de efecto bajo en el medio, así. Podemos ajustarla desde este punto, así como desde esta línea. Ahora, veamos angular. El ángulo es así. Es un círculo redondo, y podemos ajustarlo como el dial uno, supongo, así. La mayoría de la gente no lo usa. Nunca he visto a alguien usar angular en ningún diseño. Vamos con diamante otra vez. Un diamante es así. Crea pequeño diamante en esto y podemos ajustarlo como d angular. El diseño requiere cualquiera de estos tipos de creación, por lo que puedes usarlo. Depende totalmente del diseño. Voy a elegir uno lineal porque me gusta lineal así, y voy a seguir así. Bien, entonces este va a ser nuestro gradiente. Entonces déjame mostrarte un grado que creé para esta hora de diseño, que vamos a ver en el futuro. Entonces este grad que creé, utilizo el color primario rojo así como este color popo, así va con este trofeo. Entonces se ve genial. Así es como se crea gradiente en Fa. Si quieres inspirarte, puedes ir al gradiente, y hay un montón de opciones que puedes elegir. Sé que hay tres páginas en el sitio web, pero estas no son tres páginas. Al igual que, si voy a este estilo, puedo cambiarlo así. Puedo agregar múltiples colores. Entonces este no es el sitio web de tres páginas. Tiene múltiples, como, millones de colores en él, así que solo puedes marcarlo e inspirarte en este color y hacer tu propio degradado. Entonces, amigos míos, te conviertes en gradiente pro en Figma. Entonces no solo estás diseñando, estás creando sinfonía visual de colores. Así que adelante, experimenta, ten fn y te cogeré en el siguiente video para más delicias de diseño Así que mantén fluyendo esos jugos creativos. 38. Creación de un sistema de color en Figma: Estudiantes de bug. Hoy, vamos a crear estilos de color en una figma, así en la pantalla Sé que hay colores bunjob porque estaba tratando de experimentar algo con plugins Entonces por eso creó algunos estilos de banjop en mi panel de diseño Entonces los leería, y crearemos todo desde cero. Entonces, antes de que hagamos eso, déjame decirte, imagina un mundo en el que puedas guardar y reutilizar sin esfuerzo tus colores favoritos Mentina la consistencia en todos los proyectos y comparte tu paleta de diseño sin problemas con tu equipo Tan bien, corneta porque eso es precisamente en lo que nos estamos sumergiendo Los estilos de color son boleto para un viaje de diseño más organizado y eficiente Así que no más gotas interminables para los ojos a quiz, así que estamos subiendo de nivel. Déjenme dejar éste porque esto es demasiado. Puedo 2604 colores en ella, así que déjame eliminar 2604 Bien, ahora se ve genial. Bien, hasta ahora para crear un estilo de color, solo tenemos que seleccionar nuestro color. Ese es nuestro color primario, éste. No sé cómo se llama como tinte azul o un azul verde azulado, algo así Si conoce el nombre del color, por favor házmelo saber. Cuatro estilos, es simple, selecciona cualquier color, y en este caso, este es el color primario, este es un segundo color, y este es el color neutro y acentuado. Estas son las tonalidades de nuestro gris. Así que vamos a elegir nuestro color primario, y simplemente podemos hacer clic en este botón más para crear un estilo. Podemos hacer esto en todo como si quiero ir por, digamos, de un trazo. Así que solo puedo hacer clic en el menú de cuatro ted y solo puedo agregar un botón más y voy a conseguir un estilo. Efecto Sit, puerto Smith, no simmet exportarlo efectos trazo, relleno y con un texto Entonces por ahora, nos interesa el color. Así que vamos con un relleno. Haga clic en el botón más. Y le voy a nombrar primaria. Pero antes tenemos que agregar el nombre de nuestra marca porque en FMA, trabajamos con muchos equipos y con muchos proyectos, por lo que va a estropearse como mientras se trabaja en nuevos proyectos Entonces déjame nombrarlo. Serán las primeras iniciales de nuestra marca. Que solo haga clic en la tarjeta. Entonces voy a usar CC. Tash. Primaria. Y va a ser uno. También puede agregar descripción. Digamos que estás trabajando con gente de tienda de manojo, así puedes agregar descripción, como, ¿cuál es el significado de este color? ¿Por qué lo estamos usando? ¿Dónde vamos a usar ese color? Digamos que vamos a usar este color solo con un texto o con un fondo, para que puedas agregarlo en descripción, para que otras personas sepan de este color. Bien, así que vamos a crear un estilo. Así que acabamos de crear nuestro estilo. Déjame mostrarte una cosa. Menos estoy diseñando algo como esto, y no quiero entrar en gotero como voy a elegir, y luego voy a escoger así Es un poco doloroso así como pérdida de tiempo. En ese caso, lo que podemos hacer es que podamos usar estilo. Elemento selectivo, solo ve al estilo y elige nuestro color primario. Ese va a ser éste. fácil en comparación con la herramienta iroper. Bien. Déjeme hacer esto. Siempre elige éste y éste y déjame cambiarle el nombre. Déjame mostrarte una vez más. Sé que algunas personas podrían resultar. Déjenme mostrarles. Bien, así que elige tu color. Vaya a este menú de cuatro dardos, menú de estilo, haga clic en más. Nombrarlo en este caso va a ser primaria dos y crear un estilo. Ahora voy a adelantar rápidamente este video. Bien, el rojo va a ser un color secundario, así que voy a llamarlo secundario, y todo el proceso es el mismo. Y este va a ser nuestro color neutro. Entonces voy a llamarlo neutral hacer c neutral uno. También se le puede nombrar acento. Esto también se llama como acento. Y estos van a ser tonos de gris para nuestro diseño. Sé que no parece gris, pero estos van a ser nuestros tonos de gris para nuestro sistema de color. Bien, así que terminamos con nuestro estilo, pero una cosa queda, es decir, el gradiente. No estoy seguro de que deba agregar eso o no, pero vamos. Vamos a agregar eso. Estilo y D, reenvío a mayúscula. Gradiente. Bien. Solo tenemos un degradado, así que voy a mantener solo un gradiente de mayor estilo. Si hago clic en este espacio vacío, como pueden ver, nuestro sistema de color, eso está por aquí. Y podemos simplemente elegirlo y usarlo cuando queramos y donde queramos. Como cuando estaba aprendiendo Figma, esa vez, el botón de degradado no estaba ahí Somos capaces de agregar degradado como estilo, pero no es visible por aquí. Entonces para eso, tenemos que entrar en esta sección, y luego tenemos que elegir nuestro gradiente, así. Y hay una cosa. Entonces digamos que usas mucho este color, así puedes mover este color en una parte superior como esta, y es fácil elegir y ir y venir mientras cambias de color. Y digamos que quieres cambiar el nombre por alguna razón, quieres nombrarlo de otra manera. En ese caso, simplemente puede hacer clic en seleccionar cualquier color. En este caso, elijo C primaria. Entonces quiero nombrarlo como cero primario. En ese caso, puedo ir a este estilo dis, y puedo renombrarlo y puedo cambiar la descripción así como la transparencia. Así es como editas tus estilos de color. Entonces ahí lo tienen, amigos, estilo de color en A D gloria. No solo estamos organizando colores. Estamos curando una obra maestra, así que estadio para más aventura de diseño hasta entonces feliz estilo 39. La forma más fácil de generar una paleta de colores en Figma (usando complementos): Hola, diseñadores, ¿ alguna vez deseaste poder crear impresionantes paletas de colores para tu diseño en un instante Bueno, hoy, te estoy revelando dos armas secretas que te convertirán en una paleta de colores en tienda. Así que estoy presentando material stream builder y generador de color de base. Estos complementos son tu ventanilla única para crear una paleta hermosa en un segundo, liberándote para enfocar lo que realmente importa Así que no más mirar la confusión de las ruedas de color, no más pasar horas elaborando la Estos plugins hacen el trabajo pesado por ti. Para que puedas crear un diseño llamativo en una fracción del tiempo. Entonces, ¿estás listo para mostrar el maestro de color interno? Así que vamos a sumergirnos en estos increíbles plug-ins. Bien, así que vamos a entrar en plugins en Figma. Puedes ir a la comunidad, y desde aquí, puedes buscar esos plug-ins. Y también conocemos el atajo que está por aquí. Creo que se llama recursos. Puedes usar shift eye para eso. T va a plugins y busca estos dos plug-ins y da click en la carrera, así se abrirá así. Primero, vamos con el generador de color de base. Este plug in nos ayuda mucho. Anteriormente, vimos que estábamos creando este sistema de colores de paleta de colores para nuestro diseño. Y cuando estábamos creando estos mosaicos, tomó algún tiempo para ello, y pudimos crear este sistema de color en menos de 10 minutos, supongo. Pero en este plug ins, somos capaces de crear paletas de colores por tan solo un segundo Para perfil, voy a elegir material. Entonces para nuestro diseño, el color primario es éste. El acero azul, supongo. Vamos a hacer clic en esto y déjame probarlo por aquí. Haga clic en este y vamos elegir este color principal, este color primario. Como puedes ver, obtuvimos nuestra paleta de colores para ese color primario. Así que solo podemos hacer clic en este botón de paleta y tenemos nuestra paleta de colores para este color azul. Simplemente puedo arrastrarlo a cualquier parte de mi pantalla, y puedo usarlo directamente. Sé que podrías estar pensando, ¿podemos crear un estilo? Sí, puedes crear un estilo. Simplemente puede hacer clic en este botón de estilo de automóvil, y creará estilo para usted, y está por aquí. El fundamento azul. Y como puedes ver, obtuvimos paleta de colores para nuestro color primario. Y puedes cambiarle el nombre como digamos, quiero que me cambien el nombre a principalmente azul Así que solo puedo nombrarlo, y luego tengo que volver a crear estilo de diseño. Entonces déjenme leer éste primero. Así corte y estilo c. Entonces como pueden ver, tenemos azul primario. Y también agregó el código o supongo, g valor valor código en él. Entonces como puedes ver en los estilos de color, obtuvimos el estilo de color azul. Entonces podemos usarlo directamente en nuestro diseño. Entonces es así de sencillo crear paletas de colores y estilos de color usando solo un clic Entonces ahora pasemos hacia el siguiente plug in. Eso es material theme builder. Este plug in es exactamente el mismo, pero tiene características como podemos agregarle imagen y extraerá colores de él. La diferencia entre foundation plug in y material theme builder plug in es que obtenemos esta opción, podemos importar una imagen, y extraerá, yo diría, alguna paleta de colores de ella, y creará una paleta de colores. Y automáticamente agregará todas esas paletas de colores en nuestro sistema de colores, por lo que no tenemos que agregar manualmente así, como puedes ver, así. Pero voy a decir, no uses tanto este enchufe porque te hace flojo y a veces le falta mucho. Entonces voy a decir usa el enchufe de cimentación. Entonces actualmente estamos en dinámica. Entonces en dinámica, tenemos la opción de agregar imagen. Si entramos en la costumbre, tomará algún tiempo porque crea estilos y todo lo que agrega en estilos de color. Entonces lleva tiempo. En la aduana, realidad podemos elegir nuestro color primario, color secundario, color neutro, color acento de acuerdo a nuestra necesidad, y crea estilos de acuerdo a eso. Bien, entonces ya estamos en la aduana. Simplemente podemos hacer clic en el primario y dejarme elegir mi color primario. No tenemos opción para, yo diría para agregar este color. Entonces lo que tenemos que hacer es que tenemos que ir a este color y agreguemos el código x. Digamos, supongamos que este es nuestro color primario. No lo es. Si aplico, entonces elige nuestro color primario y empieza a crear un estilo. Si voy al estilo de color y como puedes ver en el material, está empezando a crear estilos de color. Como se puede ver la primaria primaria y todo eso. Entonces así es como funcionan estos plugins. Muy bien, diseñadores, hemos explorado el increíble poder del material mismo constructor y generador de color de base. Y ahora estás equipado con la impresionante paleta de colores que elevará tu diseño. Recuerda, picar lo fundamental es una clave antes de sumergirte en los plugins, entender lo básico de la teoría del color. Al igual que los colores complementarios, la armonía del color, este conocimiento te dará una base sólida para crear paletas aún más infectadas Y no olvides que estos plugins son arma secreta. Úselos para impulsar su eficiencia y experimentar con la combinación de colores diferentes. Deja que sean tus colaboradores creativos, ayudándote a menos que estés en un gurú del color. Así que sigue practicando, sigue explorando y sigue creando. Recuerda, el único límite es tu imaginación. Y, oye, si te quedas atascado, no dudes en volver a visitar el video para un rápido repaso. 40. ¡Colores, estilos y cuadrículas en acción en Project 06!: ¿Estás listo para deshacer tu creatividad y unirte a la aventura del diseño Bienvenido al proyecto número seis, donde los colores, estilos y cuadrículas se unen para dar vida a un diseño de aplicación móvil Así que pisar es elegir tu paleta de colores. Pero por dónde empezar, dirígete a estos increíbles recursos para inspirarte en el pecho Ya sea que te atraigan los zapatos atrevidos o la maja calmante, recuerda elegir tres o cuatro colores que hormonen maravillosamente. Paso a paso es un estilo de color más artesano. Ahora deja que tu imagen funcione como un salvaje, experimenta con diferentes tonos y combinación para darle vida a tu diseño? Desde tonos primarios hasta estofados de acento, cada elección de color cuenta una historia. Deja que tu creatividad brille. Ahora, paso número tres, crea maquetación móvil. Tiempo de llevar orden a la lona. Adopte el poder de las redes para crear equilibrio y estructura Y paso número cuatro, alguna creación de tapete, una vez que su maestro esté terminado, captarlo y compartirlo en proyección. Recuerde, no existe tal cosa como el diseño equivocado, et creatividad, florecer y lo más importante tener uno en el camino Entonces, ¿estás a favor del desafío Vamos a sumergirnos y crear algo extraordinario juntos. Así que buena suerte y feliz diseñando. 41. Mejores prácticas para la elección de fuentes y el emparejamiento de fuentes en la interfaz de usuario y el diseño web: Trabajo Ma estudiantes, hoy nos estamos sumergiendo en el mundo de las fuentes. La elección de fuentes puede ser un patio de recreo creativo, pero también vienen con consideración. Así que vamos a explorar qué fuente permites usar la opción popular y un poco de magia de emparejamiento de fuentes. Entonces como puedes ver, en Figma, obtenemos manojo de opción una fuente También incluye InstrutDFont también. Entonces, qué fuentes se pueden usar en Figma. Entonces el universo del diseño está a tu alcance y no estás limitado a dos fuentes específicas. Querremos asegurarnos de que la fuente elegida tenga disponible una versión wave. Convención y elección popular para esto es la fuente de Google. Entonces este es el sitio web de fuentes de Google. Bien, el font.google.com. Es un tesoro verdadero de las fuentes gratuitas web amigables que puedes usar comercialmente Bs, ¿verdad? Pero podrías estar pensando, ¿por qué no usar todos los fones de tu máquina Bueno, es crucial confirmar que tus fuentes selectivas son compatibles con la web. Es posible que tengas una fuente elegante que compraste recientemente. Pero ten en cuenta que podría ser necesaria una licencia diferente para una web y un uso extra. Así que no dudes en invertir en fuente si es necesario. Son los swaps secretos al diseño estelar. Ahora, tomemos un rápido desvío de las fuentes de Google. Este es uno de los sitios web populares en el campo del diseño gráfico. Puedes obtener cualquier fuente que quieras en las fuentes de Google. Simplemente seleccione una fuente como vamos y seleccione esta prohibición, y solo podemos descargarla. Podemos descargar toda la familia de la fuente. Podemos descargar una sola fuente específica como si solo te gusta esta. También puedes descargar este también. Obtendremos la información de la fuente así. Y si quieres aprender un poco sobre topografía y psicología de la fuente, puedes pasar por artículo. Hay otro sitio web llamado Canva. En Canva, también obtenemos un montón de artículo. Entonces, si te tomas en serio el diseño gráfico o As diseñando o en el trabajo gráfico, consulta este artículo porque eventualmente te ayudará en tu proceso de diseño. Para instalar la fuente, basta con descargar el archivo y doble conidad. Se instalará automáticamente en un sistema. Bien, entonces esto es sobre la fuente de Google. Es uno de los mejores sitios web, voy a decir, pero digamos, quieres si hay una infont no te estás poniendo en la fuente de Google, en ese caso, puedes usar este sitio web llamado de font.com Como hace unos días, estaba editando un video, y quería HS tipo f. así que busco en la fuente de Google, pero no lo conseguí. En este sitio web, como busco HS, y obtuve esta fuente. Y lo usé en mi video, y es totalmente gratis. También nos dice que está disponible comercialmente para usar o no. Este es también uno de los mejores sitios web que puedes usar para tus fuentes. Entonces tenemos este sitio web llamado fuentes. Como si quieres, realmente, realmente entrenado Dfonts, puedes ir por este sitio web Como en este caso, quiero elegir esta fuente MurmuraFont Puedo ir a esta fuente y puedo descargarla y puedo usarla en mi diseño. Y puedes ver que la licencia es gratuita para uso personal. Si quieres usar para uso comercial, es posible que tengas que comprar la fuente. Y también tenemos este espacio de fuentes del sitio web, así como tenemos ardillas Entonces estos son algunos sitios web de fuentes gratis, solo puedes descargarlo y usarlo en tu diseño. Ahora, vamos a saltar al emparejamiento de fuentes. Una vez que hayas elegido una fuente, explorar el emparejamiento es un movimiento inteligente. Por ejemplo, si tienes una fuente S para encabezados y consideras un formulario sans re para tu texto principal o viceversa. En este caso, hay algunos sitios web que podrían ayudarte. Así que la mayor parte del tiempo, uso este sitio web, par de fuentes. Tomo mucha inspiración de este sitio web. Utilizo mucho este sitio web porque a veces mi creatividad baja, y quiero necesitar algo de motivación creativa. Entonces voy a este sitio web. Entonces, como otro día, estaba diseñando algunos como un póster para un cliente. Y me sentía un poco atascado con la fuente porque el cliente no especificó la fuente que debería usar para su diseño. Así que fui a este sitio web y pasé por algunos de los emparejamientos de fuentes. Y al final, elegí, creo que era fuente básica. Bien, elegí este, el robot y el roboto. Y al final, le gustó. Entonces es como, realmente grandes recursos. Entonces hay tan pocos sitios web que uso, pero no tanto como el monotipo Este también es uno de los mejores sitios web para el emparejamiento de fuentes, puedes ir a, vamos este emparejamiento de fuentes. Y este es el par de fuentes. También podemos intercambiar las fuentes así, así como conseguimos más pares, y solo podemos seleccionar esta, puedo cambiarla, y también podemos generar nuestro propio par. Entonces este es un gran sitio web. Después de eso, tenemos fga. Este también es un gran sitio web. Para un principiante, puede ser un sitio web confuso. Entonces voy a decir evitarlo. Entonces digamos, quieres ver el trabajo real de font. Entonces en este caso, puede utilizar este sitio web llamado fuente en uso. Digamos, quieres ver el trabajo real de la fuente como vamos con esta. Para que puedas ver la fuente utilizada en este libro de texto, supongo. Y te mostrará cómo funciona después agregarlo a páginas similares, y podrás obtener una perspectiva real de esta fuente antes de usarla. Entonces esto te ahorrará tiempo y tendrás la idea de qué fuente usar o qué fuente evitar. Sé que podrías estar sintiéndote overwheling al ver toda la fuente y todo Ya te lo dije solo pasa por este artículo y aprende todo sobre la fuente si eres serio abo diseño gráfico. Recuerda, el emparejamiento de fuentes es más arte que ciencia. Así que confía en los instintos de diseño. Por cierto, también agregué todos los enlaces en los recursos. Simplemente pásalo como ir a Google Fonts o esta fuente Da para inspirarte, ve a, diré este sitio web de Fontin, y solo toma algo de inspiración y usa el diseño inv Entonces eso es todo acerca de las fuentes y la conferencia básica de topografía. Entonces los voy a ver en la siguiente. 42. Crearás la escala de tipografía perfecta para proyectos de interfaz de usuario y web: Hola, gente increíble. Es que aquí. Son jueves 10:30 A.M. Y está lloviendo afuera. Pensé que este sería el momento perfecto para conseguir que Cozy hiciera un diseño para perforar. Por cierto, antes de empezar, sé que si ustedes están buscando buena música para escuchar mientras están diseñando, tiene esta baja tarifa por 24 horas stream que dejo funcionando 2047 mientras estoy diseñando, y simplemente realmente me ayuda a sumergirme en lo que estoy haciendo Entonces, si buscas buena música, échale un vistazo. Ahora, intentemos entrometernos en nuestro diseño para viajar. Aquí tenemos el layout de configuración de tipografía que tenemos para nuestro proyecto Utilizamos el mismo sistema de diseño en todos nuestros proyectos porque nos ayuda a mantener las cosas consistentes, y luego no tenemos que necesitar reinventar la rueda cada vez Si echa un vistazo a cómo configuramos nuestra escala de tipos, tenemos tres secciones, pantalla, encabezado y copia del cuerpo. Los tipos de p son realmente para páginas de préstamo y sitios web de marketing Donde encuentres en una página de inicio específica, es posible que te des cuenta de que los encabezados de la sección de héroes son mucho más grandes que uno H que tendrás en toda tu aplicación web Entonces, en el diseño específico de UI, tratamos de tener un estilo específico para este sitio web de marketing y los encabezados en ellos. Por lo que podemos hacerlos extremadamente grandes, extremadamente audaces, y no afecta a ninguno de los otros encabezados que tengamos en áreas más prominentes como las páginas de UI, la pantalla de la interfaz de usuario y la página dentro de la propia aplicación Entonces separamos esto, y luego verán que tenemos nuestros encabezamientos para uno a seis, y se darán cuenta de que hay pocas variaciones ahí Hemos estructurado esto donde uno es textop dedicado y luego tenemos una tableta y un móvil virgen dedicados más pequeños también Esto nos permite reducir todo el tamaño para todo nuestro tipo de manera ceful. Y también se ve extremadamente hermosa. En cuanto a la copia corporal, tenemos algunas variaciones, la forma del cuerpo, el tamaño del pie de foto, el tamaño de la foto. Generalmente, quieres trabajar con 14 píxeles o 16 píxeles, que son los tamaños más utilizados, y no hay razón por la que deberías ir a reinventar la rueda Así que mantenlo dos 14 o 16. Entonces tienes el pie de foto, que generalmente son solo pedacitos de subtítulo que usas en todo el sitio web. Podría ser un texto detallado de punta de herramienta. Podrían ser algunos consejos útiles que pongas debajo de un campo de entrada, cosas a las que realmente no necesitas llamar demasiada atención. Entonces también tienes los tipos de fotos que son realmente minúsculos tipos que podrías usar aquí y allá Tal vez en la foto para los términos y servicio o política de privacidad. Cosas a las que realmente no quieres llamar demasiado la atención, y en realidad no requieren mucho potencial. Ahora que entienden cómo hemos creado nuestra propia escala de tipos responsive, voy a mostrar a ustedes cómo usar esto en proyectos reales. He creado una página de inicio conceptualizada para nuestro sitio web Puedes aterrizar en esta página de inicio cuando quieras llevar este contenido o a la vista de tablet. Entonces esto es lo que vas a hacer, como déjame perforar éste primero. Entonces, digamos, si traigo esto así como éste. Entonces si copio esto y si traigo a la versión tablet, encaja perfectamente. Tengo que ajustarme un poco, pero encaja perfectamente. Bien, así puedo ajustar esta. Así. Obviamente, lo copiarás y pegarás, y yo podría simplemente copiar y pegar este solo para ilustrar a lo que me refiero. Y podrías pensar para ti mismo, Bien, bueno, en los proyectos o en este espacio, específicamente, el tamaño del tipo en realidad se ve bien. Realmente no parece excesivo. Si hay mucho espacio para respirar, cabe y no se ve desordenado Como puedes ver le queda perfecto. Y luego, una vez que estés satisfecho con una tableta, podrías mover todo a la vista móvil. Y entonces ahí es cuando empiezas a darte cuenta oh, esa fuente es un poco grande demasiado grande para la pantalla. Y podrías pensar en reducir ese tamaño de tipo. Entonces déjame mostrarte una cosa. Diferentes fuentes tienen diferente peso. Entonces, entonces esta es la fuente Bon, y esta es la talla de Berlín un poco demi algo Pero el tamaño de la fuente es totalmente el mismo. Como pueden ver, este es 24 y esto es para. Pero éste se ve más grande. Entonces diferente fuente tiene diferentes pesos. Y es muy difícil tener un sistema que va a funcionar para todos ellos. Entonces esa es la consideración clave que ustedes necesitan hacer. Para reiterar una vez que hayas configurado tu báscula tipo. Entonces debes asegurarte de haber creado la versión más pequeña de todos tus encabezados. Entonces quieres asegurarte de tener versión más pequeña para toda la variación de copia del cuerpo. Tu cuerpo, tus párrafos, tu pie de foto y tus fotos. Pero una cosa que debes considerar ahora es que va a haber un momento en el que podrías estar trabajando en el mismo sitio web. Pero una de las páginas tiene un título muy largo, y esta es una ocurrencia muy común. Entonces, si tomas la consideración de reducir el tamaño de fuente en la página, entonces debes asegurarte de que esto también sea consistente con las páginas. Entonces estas son algunas consideraciones que debes hacer y necesitas trabajar con tu equipo para averiguar que se ajuste a todo esto. Ahora, arreglemos esto como diseño móvil. Como pueden ver, esto está un poco desordenado y no se ve tan bien Entonces en este caso, lo que podemos hacer es que el tamaño de fuente supongo es 61, y bien es 60. Creo que accidentalmente lo extendí a uno. Bien, entonces déjame reducirlo a una partida más pequeña. Entonces en este caso, iré como 34. Porque esta es para tablet y ésta es para móvil. Déjame ir y cambiarlo a 34. Y este cuatro es 24, déjame elegir una copia móvil que será, supongo, 14 o tal vez 16 estará bien. Así que vamos con 16 y déjame elegir 16. Bien. Y déjame extender la caja. Entonces encajaré muy bien. Y déjenme extender éste también. Y después de cambiar el tamaño, este es el H uno, este podría ser S dos o S tres o este puede ser como H cuatro. Entonces después de cambiar todos los encabezados y tamaños de texto, tamaños teléfonos, se ve bien Ahora, ojalá, eso tenga sentido para ustedes chicos. Entonces eso es todo acerca de la tipografía y el sistema de tipografía. Y en probablemente la siguiente, veremos cómo podemos hacer esto en un estilo, como creamos en formato de color, así que vamos a crear lo mismo para un texto. Para que no tengamos que gustar, agregar una fuente, hacer un corte grande y pequeño. Por lo que será fácil si creamos estilo. Entonces ahora, ojalá, eso tenga sentido para ustedes chicos. Bien, chicos, los veo en la siguiente. 43. La forma más rápida de crear estilos de texto en Figma: Bienvenidos de nuevo diseñadores. En esta apuesta, nos estamos sumergiendo en el mundo faci del textil en Figma. Anteriormente, conoceremos este sistema de tipografía que vamos a utilizar para todos nuestros proyectos Cambiará proyecto agonal como la fuente cambiará proyecto agonal, pero todos los tamaños de fuente serán los mismos. Los textiles son los cambios de juego. Aportan consistencia y permiten actualización rápida para un diseño de políticas. Así que vamos a sumergirnos. Entonces déjame mostrarte un ejemplo. Entonces este es el único texto, y quiero actualizarlo en otra cosa como en un solo clic. Entonces en ese caso, los textiles nos ayudan mucho. Entonces sólo tenemos que ir a este menú de cuatro. Estilo, y actualmente, tenemos un montón de él. Déjame elegir esta, mediana. Para que puedas ver un estilo cambiarlo dentro de un solo clic. Déjeme hacer esto una vez más con éste. Déjame elegir head up uno. Bien, ahora cambio. Así es como funcionan los textiles. Ahora, vamos a saltar a FMA y vamos a crear textiles. Bien, en realidad estamos en Fa. Bien. Déjame ir a ese tono de tipografía No sé por qué siempre digo topografía, pero es tipografía Bien, comencemos con esta. Pero en este proyecto, no estamos usando el display one porque mayormente usamos este, este, este, tal vez probablemente este y todo este. Entonces tal vez éste también, pero no este grande. Pero podemos compartir nuestros textiles en diferentes proyectos. Entonces eso podría ser útil. Entonces déjame comenzar esta. Pero antes de hacer eso, permítanme eliminar el textil viejo, que no vamos a usar. Bien, déjame mostrarte cómo eliminar textiles si no queremos ningún textil en tu proyecto. Simplemente puede hacer clic en el textil derecho sobre él y eliminar entre capas. Y lo dirá. Ahora, vamos a crear algunos textiles nuevos. Bien. Este es para encabezados, tal vez voy a decir sitios web, sitios web que son encabezados grandes y audaces como noticias. Entonces déjame elegir esta. Y voy a elegir, primero, déjame cambiar porque es 61, y quiero 60, 60. Vamos a cuatro Menú, botón d más, crear un estilo, y quiero nombrar este encabezado o podemos nombrar esto como encabezado de visualización. Entonces en el futuro, sabremos que este es el encabezado de exhibición. Mostrar encabezado, y voy a darle a esta pantalla encabezado cero. Y también puedes agregar descripción y crear un estilo. Bien, entonces creamos nuestro primer estilo. Ahora, saltemos a éste si alguien se pierde en su mundo imaginario. Entonces déjenme mostrarles de nuevo, cómo lo hacemos. Así que solo selecciona cualquier fuente que quieras crear un estilo. En este caso, quiero crear éste. Esta es la fuente tablet tate pixel extra polt. Y en este caso, voy a encabezar uno. Y podemos especificar que este es uno para tablet. Selecciona textos, ve a Fortnu, crea un estilo, botón d plus y Table Tablet encabezando uno, crea un estilo. Bien, ahora ya sabes cómo crear un estilo. Entonces avanzaré rápido para todos ellos. Bien, así que creé este diseño cele. Me salté esta porque en este proyecto, no voy a necesitar esta copia de cuerpo uno Entonces, si hago clic en el espacio en blanco, como pueden ver, obtuvimos nuestros encabezados. Lo siento, tenemos nuestros textiles. Entonces como se puede ver está desorganizado, o tal vez está organizado Bien, algunos de los organizados, algunos de ellos no están organizados, así que veamos cómo podemos organizarlos. Bien, para que puedas ver la tableta dirigiéndose a su abajo esta. Entonces déjame rastrear esto así. Y así es como puedes organizarte. Actualmente, este es el rubro móvil. Este es que va a estar por aquí uno, dos, tres, cuatro, cinco, seis, y todo está organizado. Cuando estés trabajando, será como qué encabezado y qué tamaño de fuente es. Y también te dice qué tamaño de fuente es. Actualmente, este 60, esto es un 48 24 y todo eso. Y digamos que quieres actualizar algo. Déjame agregar algo de texto como eb words. Déjame ir a los textiles. Digamos que quiero actualizar las lecturas móviles, así podemos simplemente hacer clic en él, y habrá algunos de estos botones, este botón de estilo. Entonces podemos dar click sobre ellos, y actualmente es un letrero abierto, así puedo cambiar a vamos co con esto o betrons muy sip Y también podemos lo que decimos. También podemos cambiar el tamaño de los cuatro. Por lo que actualmente es de 20. Y podemos hacerlo 64 así. Y ahora nuestro estilo está actualizado. Y si entro por aquí, así como pueden ver, ambos estilos se actualizan por aquí también. Entonces porque elegimos esta forma y cambiamos y actualizamos. Por lo que también actualizó el principal. Entonces déjame hacer esto porque no quiero este texto cifrado por ahora Bien, ahora tengo lo que quiero. Entonces así es como se crean los textiles. Entonces mientras trabajas en este proceso, recuerda que organizar tu textil es crucial. Es posible que tengas diferentes estilos para encabezados de marketing, encabezado de información u otras categorías Esto ayuda a mantener la claridad y consistencia en su diseño. Y hay una cosa que voy a decirte, como en este caso, diseñé esto como, perdón, lo puse como encabezado móvil, encabezado tableta o encabezado de escritorio. Tiene que ser así. Simplemente puedes nombrarlo Encabezado uno, Encabezado dos, Rúbrica tres. No tienes que especificar así, como tablet o móvil. Entonces esta es mi elección de cabeza. Voy a decir. Así es como trabajo. por eso elegí este , estos nombres. Entonces, si solo quieres mantenerlo como encabezado uno, encabezado dos, encabezado tres, así o párrafo, puedes nombrarlo así. Entonces espero que disfrutes creando y actualizando textiles en Figma, así que mantente atento para aventuras de diseño más emocionantes en el siguiente video 44. Cómo agregar texto en lorem ipsum en Figma: Bienvenidos a los estudiantes de esta manera, nos estamos sumergiendo en el mundo del texto playdo Componente crucial en ese proceso de diseño. En lugar de usar términos de género como playdo text o tritratoex, exploraremos Lorm Ipsen, una opción clásica para generar texto que reensamble una opción clásica playdo text o tritratoex, exploraremos Lorm Ipsen, una opción clásica para generar texto que reensamble el inglés. Para que nuestras vidas sean más fáciles. Te voy a presentar un fantástico plug in llamado content rail. Es un verdadero cambio de juego, y lo estaremos usando para diversas tareas a lo largo del curso Entonces primero, hablemos del sitio web de Lorem PSA. Hay un sitio web oficial de Lorem Ipsum. Se llama psm.com. Tiene muchos anuncios, pero actualmente estoy usando el navegador Breo, así que bioproser todos los anuncios, incluso en YouTube para que puedas usar el No es necesario agregar ningún bloqueador de anuncios ni ningún enchufe para eso. Funciona. Simplemente funciona. Bien, entonces el sitio web es lipsum.com. Y puedes simplemente dar click en este botón de generar. Actualmente, estoy creando cinco párrafos. Y si hago clic en el generar Amon con cinco párrafos, va a generar cinco. Pero en este caso, solo quiero uno, así que voy a ir con uno generar Ipsum Y como pueden ver, tengo un párrafo. Pero es herramienta en el. No quiero esa cantidad de palabras, así que sólo voy a copiar hasta ésta. Bien. Entonces digamos, quiero agregar texto porque no tengo idea. ¿Qué debo añadir aquí? Entonces, para un temporal, quiero agregar algún texto. Entonces en ese caso, voy a usar telares. Pero como puedes ver, la palabra no está envuelta, y se extiende alrededor de nuestro proyecto. Bien, déjame entrar y déjame encogerme así. Entonces como puedes ver, el tamaño de la fuente no es genial. Entonces en ese caso, lo que podemos hacer es que podamos usar estilos de color, que aprendimos en video anterior. Entonces solo selecciona el texto en este caso, este, mm y estilo de texto. Y creo que voy a ir con 16 Sits cat. Permítanme agregar este conjunto en el centro. Así es como funciona L Epson. Pero en Figma, enchufamos, lo cual es muy popular y así voy a decir como todos ellos. Todos ellos usan este plug en contenido real este, el contenido real. Simplemente haga clic en él. Si no tienes ese plug in introd, solo puedes instalar Ya sabes cómo funciona Ya sabes casa, es una y puedes ir a prueba. Se agregará la parte superior acabo de hacer clic en él. Al final conseguimos son plag shder Y sé que es un poco corto, pero creo que tenemos que firmarlo para que sea más grande, si quieres, tamaño grande o per, como éste Creo que hay que firmarlo. Bien, entonces este enchufe contental realmente ayuda con todo como si quieres un número completo, ID de ml, Uh, número de teléfono de Estados Unidos, nombre comany, así como país Lo que sea. Tienes todo el tipo de marcador de posición. Entonces lo hace automáticamente lo genera o tal vez tiene todos esos datos arriba en su base de datos. Entonces lo van a buscar de aquí y agregarlo en nuestro diseño. También podemos agregar imágenes icono y en agregar, déjame ver. Bien, también podemos agregar lo nuestro propio. Bien, eso es genial. Entonces así es como funciona el carrete de contenido, y así es como puedes usar um Epson de esa anguila de contenido Es un combo que cambia el juego que hace que tu proceso de diseño sea más suave y eficiente. Recuerda explicarles a los clientes que la explosión de texto antiguo es intencional, sobre todo si no están familiarizados con el concepto, así que quédate por más consejos y trucos de diseño en el siguiente video. 45. Consejos y trucos de texto útiles en Figma: bienvenida a mis alumnos. En este video, vamos a crear esta increíble página de introducción a la tarjeta de clic de aspecto Quizás te estés preguntando cómo carajo tenía este nodo iPhone dg en esta página de introducción Entonces vamos a ver todas esas cosas también. Hay algunas características de texto. No te mostré en el do anterior, así que vamos a aprender esos también. Entonces, antes de hacer esta, vayamos y aprendamos sobre algunas características de texto. Bien, entonces cuando estás diseñando cosas como Figma como parado, entonces podrías tener un pequeño problema como si quisieras agregar algo de espaciado o quieres aumentar algo de espaciado o disminuir algo de espaciado Entonces, en este caso, cómo se puede hacer eso. Entonces es simple, da clic en el texto así y solo ve a este menú avanzado. En esta configuración de tipo, obtenemos esta opción, el espaciado entre párrafos. Entonces sé cuando estaba aprendiendo Figma, solía hacer esto, cuando quiero agregar presionar, Parag espaciado, solía hacer esto, pero esto no es una buena práctica Así que tenemos característica específica de la característica para ese llamado espaciado de párrafos. Entonces solo tenemos que arrastrarlo hacia la derecha para agregar espaciado y arrastrarlo hacia la izquierda para presionar impuestos. Entonces en este caso, déjame sumar a, como, Bien, así es como te enfrentas un proto Bien, supongamos que tienes este escenario como si quisieras cambiar la propiedad text al mismo tiempo. Entonces en este caso, lo que vas a hacer es que puedas ir a la búsqueda universal como Cutter más barra diagonal hacia adelante y buscar propiedades de texto Bien, o seleccione todas las propiedades de texto y seleccionará todo el texto que R use en este diseño. Y al mismo tiempo, se quiere cambiar las propiedades del texto en su interior. Simplemente puedes romper esto y convertirlo en algo más como esto. Y puedes ver, al mismo tiempo en un solo clic, somos capaces de cambiar nuestras propiedades de texto. Se puede aumentar el tamaño frontal, se puede cambiar el frente, así como se puede cambiar el tipo, como negrita extra semi voltios. Y así como el espaciado y todo eso. Entonces déjame hacer esta porque no quiero esta. Bien. Y supongo que podrías ver los números de viñeta, pero no estamos acostumbrados a la tecnología déjame seleccionar este. Vamos a agregar en sección y solo podemos usar nuestra lista de viñetas así. Sin lista, lista de viñetas y lista de números como esta. Bien, entonces hay una característica que me gusta, pero no uso tanto. Digamos que tienes una página en blanco y solo tienes una opción en eso. Haga clic en mí. Y quieres agregar un enlace dentro de él. Así que solo selecciona esto. Y como puedes ver Top armo tenemos esta opción insertar enlace Y podemos usar Control K para eso y simplemente dar clic en él y agregar cualquier enlace. En este caso, en anterior, vimos MSM, por lo que agregaré WW Y si voy a prototipo, y puedo cambiar el color. Entonces el usuario sabrá dónde debo hacer clic. Bien, entonces voy a hacer que sea un rojo, que sea rosa. Y déjame ir al prototipo. Bien. Y si hago clic en esto, me redirigirá hacia ella se está mostrando como quiero redirigir a la Laura mipson Entonces como puedes ver, así es como agregamos enlaces redireccionan a nuestros usuarios hacia nuestros sitios web. Bien. Hay algunas funciones básicas como la podrías usar si conoces un poco sobre Google Docs o cualquier software básico de documentos. Entonces digamos, quieres hacer este cerrojo. Actualmente es audaz, pero supongamos que esto no es audaz esto es regular. En este caso, lo que puedes hacer es que puedas usar el Control B para hacerlo atornillar. Si quieres deshacer esto, presiona nuevamente el control B, estará en forma normal. Si quieres hacer cursiva, puedes presionar control para itálico. Y si quieres deshacer esto, vuelve a controlar así. Otra cosa es que si quieres agregar subrayado, usa el control. Se agregará subrayado Como pueden ver se agregó bajo este texto. Déjame bajo este control. Sé que puedes hacer esto en esta función, como en esta sección soy. Oh, aquí. También puedes agregar subrayado este alijo. Pero si conoces el atajo será fácil. No tienes que ir aquí y hacer eso. Y hay otro atajo como, digamos, quieres hacer esta fuente más grande. En ese caso, puedes usar este menú pero atajos. Puedes usar control shift y usar el botón mayor y menos que botón en tu teclado. Está al lado de la marca de quash junto a Quash Mark, y puedes mantener el turno de control Genial un pteror y menos que botón por menos que así Entonces estas son algunas características básicas que estamos utilizando para que nuestra tarea sea eficiente y fácil. Así que déjame borrar este y hagamos nuestra interfaz de usuario. Entonces déjame borrar esto. Actualmente tenemos críticos, y quiero diseñar nuestra página de introducción Bien, entonces actualmente, voy a elegir primero. Este va a ser nuestro color primario. Entonces voy a elegir un color primario. Entonces en este caso, va a ser éste, y este va a ser nuestro logo o click cut. Lo agregaré al centro, y haré una vuelta, no redonda en el círculo. L y deja que Q Me gusta esto o déjame agregarlo en grilla para que sepa perfecto o no. Bien, así. Encaja en la grilla y puede volver a centrar, déjame enviarlo de vuelta. M y nuestra tarjeta, y déjame cambiarla porque este es nuestro color secundario. Bien color secundario. Bien, entonces nuestra página está diseñada para frase está totalmente diseñada. Entonces solo tenemos que agregar texto, así que vayamos al texto. ¿Y cuál es su nombre? Haga clic en el carrito déjame hacerlo grande. Entonces estaba pensando que para ocho será perfecto. Así. Bien, entonces este es nuestro diseño, pero sé que esto es bastante a la baja, así que lo que podemos hacer es que podamos seleccionarlo. Déjame desplazarlo hacia arriba. Ahora, se ve genial. Vamos a agrupar éste o podemos enmarcar esto, déjame hacerlo enmarcar. Entonces donde está, y puedo nombrarlo bajo. Bien, entonces esta es nuestra portada, y estoy usando una fuente. Mono recto. Bien. No soy capaz de sujetarlo, pero esta es la fuente y actualmente el bot extra y la talla 40. Entonces este va a ser nuestro tropag si quieres usar diferente forma, estoy totalmente equiparado con él porque va a ser equiparar, así que usa diferente forma o diferente logo o diferente color Bien, entonces ahora permítanme concluir este video. Así que recuerda, esta es la característica que uso con frecuencia, pero no dudo en explorar todas las opciones disponibles. Diseñar fuma para encontrar el equilibrio adecuado entre funcionalidad y creatividad Siéntase libre de experimentar y descubrir qué funciona mejor para usted. Así estadio para más diseñando por dentro en el siguiente video. 46. Cómo agregar fuentes en Figma y cómo agregar fuentes faltantes en Figma: Bienvenido a palabras en video anterior, olvidé algo. Como, yo, te lo dije, vamos a ver cómo podemos agregar esta muesca en nuestro este diseño. Pero olvidé mostrártelo. Pero cuando estaba regrabando este video, como, me enteré de un problema, que es que no tengo las fuentes en mi sistema. En este video, vamos a ver como encontrar una fuente faltante o como arreglarla. Entonces antes que nada, tengo esta fuente como pantalla SP, tengo fuente esta en mi sistema. Entonces no tengo ningún error con este. Pero como pueden ver, tengo SP display pro, pero actualmente es este diseño requerido gular cursiva, pero solo tengo medio o perno Entonces, si elijo Bolt, funcionará. Y pero para esto, tengo que descargar una fuente. Entonces entré en Internet y me enteré de este sitio web llamado Pixel Berg, y tenía esta familia de formularios específicos llamada SEP. Pertenece a Apple. Apple usa mucho esta forma. Si tienes iPhone, es posible que hayas visto este. Entonces descargué este, y déjame mostrarte a ti y a mi administrador de archivos. Bien, entonces esta es la familia de formularios, y tengo que descargar esto Oh, lo siento, tengo que instalar este uno por uno. Sólo hay que hacer doble clic sobre él, y se instalará en su uno. Entonces si los instalo todos, Así que instalé pocos de ellos, pero para que esto funcione, tengo que reiniciar este soft. Entonces déjame reiniciar nuestra Figma. Porque cuando instalas algo como Fs, tienes que reiniciar el software porque ese programa bien conocido, tienes ese soft. Lo siento, tienes esa falsa. Entonces como puedes ver en anteriores, esto fue un error, pero ahora nuestro ft está instalado. Entonces no nos está dando un error, pero actualmente es que no va a regular uno, y tenemos todo este regular así que tenemos que instalar uno regular. Pero digamos que no quieres descargar ninguna fuente. Solo quieres tener una fuente en ese lugar. Entonces en ese caso, lo que puedes hacer es que puedas ir a, como, digamos, Oh, aquí. Y puedes elegir cualquier otra fuente como la que esté presente en tu foto. Entonces en este caso, escojamos Prata. Y esto es Prata y reemplaza la fuente. Por lo que ahora se sustituye. No sé si se reemplazó pero se reemplazó. Entonces déjame hacerlo de nuevo. Bien. Déjame entrar. Bien. Actualmente, se puede ver que esto nos está dando error, pero vamos a cambiarlo por otra cosa. No me está dando error. Recuerda una cosa cuando copies esta, actualmente, esta profunda. Bien esta parte. Cambió por aquí. Déjame cambiar, elegir otra cosa. Bien, así que elige esta. Entonces iba a decir esto. Y si copio esto y lo uso en mi proyecto, déjame hacerlo primero, copiar y Para que veas, tenemos errores. Entonces no queremos eso. Entonces para eso, tenemos que instalar la fuente o tenemos que reemplazarla por otra cosa. Bien, ahora vamos a nuestro diseño y agreguemos este no a nuestro diseño. Pero sé que me va a curar el error. Pero voy a reemplazarlo por otra cosa. Bien, entonces agregamos por aquí. Bien, encaja ahora. Pero como puedes ver, obtuvimos el error en nuestro diseño. Entonces voy a reemplazarlo con fuente S como display pro, que tengo instalado en mi sistema. Así que reemplace la fuente. Porque como puedes ver, no hace ningún cambio. Exactamente se ve igual. Déjame hacer lo mismo también con 32. Bien. Hagamos también lo mismo con este S pro display replace font. Bien, entonces no tenemos ningún error en estos momentos. Como puedes ver este corte en modo cursiva. No sé cómo, pero en modo cursiva. Creo que podemos cambiarlo, pero que sea por ahora. Entonces así es como reemplazas tus fuentes. Recuerda, clave de flexibilidad y podrás decidir si quieres quedarte con la fuente original o puedes descargarla o puedes reemplazarla por otra cosa. Ese diseño de llagas. Y eso es todo, amigos míos. Ahora estás equipado con el manejo de fuente faltante como R. Si lesionas este video, por favor avísame y nos vemos en el siguiente 47. Proyecto de clase 07 Texto y estilo de texto: Es, hoy, tenemos un emocionante proyecto alineado para ti en Figma. Así que sigue este sencillo paso para mostrar tu creatividad y habilidades de diseño. El primer paso es el textil. Primero, primero, establezcamos la base del diseño par con el textil. Elige dos fuerzas que resuenen con el tema de tu proyecto. Ahora crea estilo tanto para el encabezado como para el texto del cuerpo en Figma. La consistencia es clave aquí. Así que asegúrate de que tu elección esté alineada con toda la estética a la que estás apuntando. Ahora, el segundo es la página de introducción. Entonces déjame mostrarte en Figma. Bien, entonces tienes que crear un sistema de diseño como este y después de eso, nuestra página de introducción como esta Entonces esta es mi página de introducción. Ahora es el momento de sumergirse en el diseño de procesos creativos o página de introducción usando el textil que acabas de aprender y configurar. Siéntase libre a menos que su creatividad aquí y ellos estén experimentando con diferentes colores, fuentes y diseño. Hasta que encuentres el diseño que te hable. No olvides agregar fuente y logotipo que complemente tu visión general. Y una vez que estés satisfecho con tu página de introducción, vamos a capturar ese momento Toma una captura de pantalla de tu obra maestra, asegurándote de que muestre tu textil seleccionado. Esta instantánea será una representación visual de tu diseño, así que haz que cuente. Entonces tienes que tomar una captura de pantalla de tu sistema textil textil así y tu página de introducción Y sé que estás listo para compartir tu creación con el mundo. Así que dirígete a la proyección y sube tu captura de pantalla allá. Entonces esta es tu oportunidad de brillar. Así que tómate un momento, aprecia tu arduo trabajo y creatividad. Y también puedes compartirlo en tus redes sociales como historias de Instagram o Twitter, así como en Linkin, y también puedes etiquetarme allá porque quiero ver esas creaciones épicas Ahí lo tienes un rápido y divertido proyecto Figma. Recuerda, la clave para un gran diseño es la consistencia y la limpieza. Organización texto vida meticulosamente y pieza clave diseño elemento CZ, Madera suerte y feliz diseño 48. Fundamentos de las herramientas de pluma Figma y redes vectoriales: Estudiantes de Amazon, bienvenidos de nuevo a otro episodio. Hoy nos sumergimos en el universo FBMA para develar misterios de la poderosa herramienta de pluma Quédate y te mostraré cómo fijar la herramienta y la herramienta de lápiz como un mago. Entonces, ¿estás listo? Entonces, vamos a rodar. Primero, entendamos qué es la herramienta de lápiz y la herramienta de alfiler. El primero es el control preciso. Está inactivo para crear formas precisas con línea recta y con curva suave, incluyendo formas conflictivas como logotipos, iconos e ilustraciones. También ofrece flexibilidad. La herramienta de pasador es muy flexible. Ofrece controles Amos como puntos de borde, mangos de adición y trayectoria de manipretación para obtener detalles Edición, y no es destructiva. Los cambios realizados en un punto del trazado no afectan a toda la forma, lo que le permite un ajuste fácil. Ahora, vamos a saltar a la herramienta lápiz. Es rápido y con manos libres. Perf para bosquejar el contorno áspero D tan rápido, especialmente para la forma organista o Es fácil de usar para principiantes debido a su intuitivo dibujo a mano libre similar al lápiz tradicional. Sé que el resultado es una forma menos precisa en comparación con la herramienta pluma, pero puede ser bueno para capturar la idea inicial. Así que ahora vamos a saltar a la herramienta pluma y vamos a crear algunas de estas extrañas estructuras. Entonces déjame borrar esto primero y quitar esta mi pantalla porque no financio Bien. Entonces para esto, podemos ir a esta herramienta pin, y Short es solo P. P para crear una herramienta para obtener una herramienta pin. Queremos crear algo con Pinto. Da click en la pantalla así, y creamos algo fuera de ahora usando pintol Y como pueden ver, obtenemos estos puntos, y los podemos eerit. Pero hay un problema. Como si estuviera moviendo mi cursor en la pantalla, y hay una cadena adherida a ella. Si sirvo en otro lugar , crearía nodo. Entonces no quiero eso Si quiero deshacerme de esta cadena de nodos, solo puedo presionar escape en mi teclado y desaparecerá Ahora, déjame mostrarte una cosa, como si actualmente estoy en PNR, y si muevo mi cursor así, como puedes ver, hay un botón más debajo de la herramienta pluma Y si hago clic en alguna parte de esto, agrega punto en nuestro este nodo. Puedo usar este punto para agregar curva en esto o hacer alguna edición. Ojalá lo tengas hecho, pero antes de que hagamos eso, vamos a crear algunos turnos. Bien, entonces digamos, quiero crear un rectángulo. Entonces en ese caso, puedo usar así. Y lo siento, no es un rectángulo. Tiene que ser cuatro. Bien, tres y cuatro. Ahora somos rectángulo. Pero vamos a querer crear un rectángulo preciso. Entonces en ese caso, puedes mantener el turno y crear el punto seis. Y creará un rectángulo perfecto y preciso para ti así. Y hay una cosa. También se le puede agregar relleno, como digamos si le agrego fil, como pueden ver, puedo cambiar el color. Puedo hacerlo degradado o algo así. También puedo agregar imagen y todo eso. Entonces es fácil. Sé que no hay parte de usar el pintol para crear forma Pero vamos a querer crear dolor de iconos complejos, si sus diseños algún elemento complejo. Entonces yo ese caso, tienes un pintol. Pero rara vez lo vi alguien que usaba pentel en el diseño. Ahora, pasemos a lo siguiente. Es decir, digamos que tienes estas dos líneas así. Y sí, podemos agregarle curvas. Entonces déjame mostrarte cómo agregar curvas. Sólo puedo agregarlo así. Déjame agregarlo por aquí también. Bien. Ahora, hay una cosa que quiero mostrarte. Digamos que quieres unirte a este punto en este punto o a este punto en este punto. Entonces en este caso, lo que puedes hacer es que puedas usar la herramienta lápiz, pero hay un atajo único. Simplemente puedes seleccionar este punto y usar el control J. Y se unirá. Ambos. Y es fácil, así. Como puedes ver, también llenó el color que contiene. Y hay otra cosa que puedes hacer. Sé que hay muchos peces con alfiler, pero esto es realmente una herramienta en tu palabra. Permítanme sumarme a esto a estos puntos. Esto ahora ambos están separados, y si utilizo esta herramienta, pen bucket, si hago clic en esto, sé que el color se ha desvanecido, pero podemos agregar un montón de colores Así que solo selecciónala. Y si elijo algo como el rosa. Entonces como puedes ver, podemos agregar colores en nuestro campo, y podemos diferenciarlos dentro de una sola forma. Bien, ahora saltemos a la curva. Al igual que hace unos minutos, agregamos algunos puntos sobre este nodo. Entonces ahora seleccioné esta curva doblada y ahora solo puedo hacerla esto. Y ventila, hace curvas suaves como esta. Entonces como puedes ver, creamos algunas ondas por aquí, y en la sección de diseño, tenemos algunas opciones, ángulo espejo, mering y espejo sin mering miragle y espejo ángulo con En su mayoría, está en ángulo y longitud de espejo. Y déjame mostrarte cómo funciona. Entonces tengo este, y actualmente estamos en bentol. Si lo muevo así, como pueden ver, tenemos dos asas por aquí. Entonces si muevo algo por aquí, así del otro lado, va a pasar lo mismo, como también va a pasar. Luna. Es solo replicar el segundo mango del espejo Bien, entonces actualmente es ángulo de espejo y longitud, y si elijo ángulo de espejo, y si hago clic en este punto. Como pueden ver, tengo este único mango. Ahora sólo puedo ajustar un ángulo. No hay un segundo asa, y no se está replicando. Si quiero ajustar un ángulo, así puedo hacerlo así. Bien, ahora, pasemos a lo siguiente. Digamos que quieres eliminar algo como quieres eliminar este nodo. Bien, elijo el ángulo del espejo. Así que déjame elegir no duplicar. Si elijo este, no sé qué es. Bien. Actualmente estoy en como, así que por eso estoy seleccionando y haciéndola cala. Déjame seleccionar herramienta, y si selecciono los puntos normales así, y si elimino esto, como puedes ver, se borra el campo go, así como los dos lados también se eliminan. Pero digamos, quiero borrar sólo este punto, pero el relleno tiene que estar intacto. Entonces en ese caso, puedo usar shift, así puedo seleccionar mi punto así, que tengo que borrar, y voy a mantener turno y borrar. Entonces, como puedes ver, el objeto está intacto, y el relleno también está intacto. Entonces este tipo de cosas raras podemos hacer con una herramienta de pluma. Y también hay una herramienta de lápiz. Yo no lo creo. ¿Quién es este? Pero cuando estaba en el jardín de infantes, solíamos dibujar diseños como este. Solíamos dibujar montañas así, tres montañas, y solíamos poner algo de sol aquí así. Bien, sé que mi dibujo es muy raro. Por qué razón solíamos dibujar sí así. Bien. Está llorando. Y tiene que haber una casa así. Me duele, supongo choza. Bien, es muy pequeño. Y no lo sé, por una razón hay un río. Vamos a cruzar. Entonces tenemos que crear diseños como este. Entonces así es como puedes usar lápiz. Bien, así es como puedes usar la herramienta de lápiz y la herramienta de pluma. Pero podrías estar pensando cuándo deberíamos usar la herramienta de lápiz o la herramienta de lápiz. Lo primero, primero, vamos al pintol. Digamos que quieres necesitar algunas formas nítidas y precisas con línea recta y curvas suaves, usa la herramienta pin. Y tú también Vamos a crear formas complejas como iconos de logotipos o ilustración, herramienta pin. Y también, desea un control preciso o puntos individuales y curvas utilizan la herramienta pin. Ahora hablemos de herramienta lápiz. Si quieres bosquejar idea o creador de contorno, usa la herramienta lápiz, quieres dibujar algo orgánico o saborear contorno, usa la herramienta lápiz. Si eres un comienzo y solo quieres tener algún teléfono como este, quieres crear esta imagen, usa la herramienta lápiz. Entonces, amigo mío, ese es el envoltorio para este video. Si encontraste este auto lleno, por favor avíseme. Hasta la hora del almuerzo Happe diseñando. Y recuerda, eres picks para un pixel así que caso tú. 49. Por qué son diferentes los iconos de Apple (suavizado de esquinas): Jefes y escuadrones, estamos sintiendo que las cosas son demasiado nítidas, como los íconos de tu teléfono. Está apuñalando en tus globos oculares. Y a ti te miro, se topa con una pared. Bueno, agarra una manta pixelada y toma un café porque estamos a punto de sumergirnos café porque estamos a punto en el alisado de esquina de arriba del mundo Arma secreta de Fipma para hacer esquinas. Recuerdo ser un usuario de Android desde décadas, íconos eran como planos, cuadrados, a veces con los bordes redondeados, pero sobre todo solo una caja luego boom, mi amigo más su flamante iPhone 15 P max. Conozco a Lucky Duck, y estoy hurgando por ahí hipnotizando por las aplicaciones De pronto, algo me golpea como mentor pixelado. Los iconos son redondeados y cuadrados al mismo tiempo. ¿Y mi cerebro diseñador UX llama a drive? ¿Qué hechicería es esta? Después de nuestro tan receso más tarde, rompí el carbón. A este tx mágico se le llama suavizado de esquina Figma. Te lleva a tomar esos hachís esquina y convertirlos en suavemente almohada bondad Piense en ello como mantener su interfaz de usuario arriba de adentro hacia afuera. Bien, ahora, aprendamos sobre cómo crear bordes redondeados. Entonces antes de hacer eso, hay algo que olvidé decirte en el último Video. ¿Recuerdas que creamos esta obra maestra como Picasso? Entonces, si quieres dominar la herramienta pluma, si te tomas en serio YuxFiel o sobre el diseño gráfico, Entonces hay un sitio web único, juego de Bizer, algo así Bien, no puedo pronunciarlo, pero si sabes, avísame. Por lo que en este sitio web, puedes practicar tu herramienta de pluma así. Puedes practicar tu herramienta de pluma así y podrás dominar. Entonces así es como puedes practicar tu herramienta pluma. Entonces esto es solo un resumen rápido o un consejo sobre ese video. Ahora, saltemos a nuestro alisado de esquina. Bien, entonces déjame relatar esta obra maestra. Sé que esto se ve muy bien, pero tenemos que relacionar éste, sobre todo éste. Bien, dibujemos algunos rectángulos para nuestros íconos, y déjeme dibujar unos a otros Bien. Déjame copiar esto. Entonces sabremos la diferencia. Digamos que este es nuestro icono, y déjame darte unos bordes redondeados hasta como diez. Y como se puede ver es redondeado. La mayoría del usuario sabe que así es como se ve el icono en Android. Pero ahora, si le doy esta redondez, diez, y si voy a estas esquinas independientes, y hay más opción esquina suave adentro Y si hago un seguimiento de este 200%, como pueden ver, es un poco diferente Sé que actualmente no lo estamos diferenciando, pero si me acerco un poco, ya que hay una diferencia, esta esquina es demasiado aguda y esta tiene una especie de efecto burbuja o efecto redondo Entonces déjame hacerlo de nuevo, si voy a una esquina lisa, y si hago esto, solo fíjate en las esquinas. Como pueden ver, se está volviendo redondo. Espero que lo veas. Déjame resumirlo otra vez. Actualmente 100 cero cien cero cien. Bien, así es como funciona Cormoing, y esta es la esquina normal Sé que se ve muy bonito, pero si aumento los 15, se verá más genial. Si hago esto 15. En comparación con esto, esto se ve mejor. El alisado de esquina se desea súper arco. Te hace un Me siento más accesible, amable y moderno Imagina un botón que te invite a hacer clic. En lugar de uno que grita, no me toques a mí ni a un sitio web con transición pequeña que se sienta como un corsé suave, no un huracán Así que ve y experimenta sin problemas, rompe las reglas, y mira qué tipo de magia suavizante de esquinas puedes crear. Recuerda, el diseño se trata de hacer que las cosas se sientan bien, y con el suavizado de esquinas, estaré más cálido y fuzziest colocado en Internet Si quieres conocer más sobre el suavizado de esquinas, Figma es este artículo de blog, puedes ir a este sitio web, probablemente te vincularé esto para que puedas revisarlo y leer todos los artículos, por qué es así Y hay una fórmula. Hay una fórmula matemática. Como cuando estaba en la universidad, las matemáticas eran una de mis materias favoritas. Y como yo conozco estos derivados y todo eso. Tengo que resolverlos de inmediato, pero ahora los miro, se sienten muy extraños. Si quieres conocer realmente a fondo sobre este efecto de esquina, Efecto de suavizado de esquinas, ve a este artículo, léelo. Entonces eso es todo acerca del suavizado de esquinas en Figma. Entonces eso es un puerto es ser y te veo en el siguiente. 50. Operaciones booleanas de Figma (Unión, Resta, Intersect, Excluye): Hcretmns en este tutel estamos sumergiendo en las operaciones de Boleon en Figma Si bien el término puede sonar un poco perfecto de venta, estas operaciones son formas esenciales de combinar o manilificar formas Piense en ellos como una caja de herramientas de diseño, lo que le permite crear iconos de interacción o componentes de interfaz de usuario para ilustrar estos iconos de reconversión como este usando operaciones de Boleon Hay múltiples operaciones booleanas. Si selecciono estos dos de ellos, como puedes ver en el menú de la barra superior, obtenemos esta opción. Pero si selecciono uno, no tenemos esa opción. A la operación booleana para trabajar, tenemos que tener dos formas por lo menos Por lo que actualmente seleccioné estas dos formas, y como pueden ver, conseguimos esta operación. El puesto es unión. Después de eso, restamos después de eso, nos cruzamos y excluimos Entonces vayamos con la unión. Entonces digamos que tengo dos formas como un rectángulo. Permítanme borrar éste primero. Bien, entonces déjame tomar algunas formas. Digamos que tenemos un rectángulo, así como uno redondo, labios como este, y quiero fusionarlos juntos. Entonces en este caso, la unión va a funcionar. Entonces déjame decirte qué es la unión. En la unión spaldum es la operación combinada forma en una sola unidad Si quieres saber más sobre las unidades, así que aquí está. Union combina la forma seleccionada en un grupo boolin. Si los objetos se superponen, la ruta exterior de las nuevas formas consiste en la ruta comparans ops sublis menos cualquier segmento que se Entonces si yo union esto, Como pueden ver, esta forma es union cortada. Cualquier segmento que se superponga, el trazo se aplicaría a ese camino exterior, ignorando cualquier segmento de trayectoria que se superponga entre sí Entonces en este caso, así es como funciona el sindicato. Si sacias tus formas y solo haces clic en este botón, automáticamente entrará en unión más, y esta será nuestra unión. En lenguaje sencillo en unión, la imagen final se crea combinando dos imágenes individuales como esta o dos formas. Ahora veamos restar. Entonces déjame tomar dos formas que van a ser elipse. Bien. Déjame romperlo este. Ahora, hablemos de restar. Esta operación resta la forma en la parte superior de la que está debajo Actualmente, este está en la parte superior supongo. Bien, este está en la parte superior, y si selecciono ambos, y si selecciono restar Como puedes ver, el ítem superior restó. Restar es la unión superior opuesta, restar elimina el área de forma o configura formas de la forma base Solo la capa de forma inferior es sólida y la caída restante se resta de ella Así es como funciona la resta. Ahora pasemos a intersectar. Entonces para esto tomemos otra forma, tomemos elipse, así como déjame tomar polígono Bien, así. Lo que hace la intersección es que conserva el área de superposición entre las formas Entonces déjame tomar esto y déjame cruzarlos a los dos, y escojamos intersectar Eso es genial, moderno parece una especie de forma de diamante. Entonces los cruces crean un grupo bleen. Esas formas consisten únicamente en la parte superpuesta de sus cazadores Bien, así es como funciona Intersect. Ahora, vamos a saltar para excluir. Entonces déjame tomar labios tomemos una estrella. Bien, entonces tenemos esto tanto y agreguemos extracto. Entonces coloco esto en el centro. Vamos a serrar a los dos. Entonces, lo que hace Exclude es eso. Esta operación vive agujeros donde las formas se superponen. Excluir es lo contrario de intersectar. Excluir muestra solo las áreas de su subcapa que no se superponen. Entonces si serro a los dos y si pro formo excluyo, como pueden ver, se creó un agujero dentro del círculo Y tenemos este ícono de aspecto realmente genial. Bien, esto parece el logo del Capitán América. Al combinar esta operación, construimos un icono complejo con componentes individuales. Cada uno restante editable. Siempre puedes sumergirte en los detalles y modificar partes específicas de cada diseño. Entonces en este caso, si quiero mover esto, simplemente puedo hacer así. Puedo hacer hop moon así o puedo moverlo y puedo editar en cualquier momento. Bien, entonces aquí está la única tarea para ti. Al igual que, quiero que creen esto y este Have star, así como éste, este símbolo. Pausa el video y haz eso. Y te voy a mostrar como hacer eso. Pero primero, pausa el video y haz eso. Bien, espero que lo hayas hecho, así que déjame crear ese efecto usando estos círculos. Vamos a necesitar seis círculos en este caso. Bien, entonces coloqué el círculo así y me dejo tomar otro círculo y que va a ser rematar sobre esto en el centro. Bien, entonces déjame seleccionarlos a todos. Y voy a elegir Excluir. Como pueden ver, creé esta forma de aspecto increíble, g no sé cómo se llama, pero esto se ve realmente loco. Aquí hay otra cosa, como digamos que quieres ver el contorno de la estructura, en este caso, tenemos manojo de formas, que creamos una operación simple. Y digamos que quieres ver el esquema. En ese caso, puedes usar shift para ver el contorno. Te mostrará qué componente tiene, cuántas formas se usan en él mientras diseñas estos íconos así. Al crear esto, tenemos seis siete círculos. En este caso, tenemos estrella así como este rectángulo, y en este tenemos tres círculos. Fuertes elipse, eso no es círculo perfecto. Después de eso tenemos dos círculos dentro de él. Lo mismo con este, lo mismo con este. Es así como somos capaces de ver el esquema. Salgamos de esto. Se puede presionar en forma para salir de esto. Espero que te hayan creado esta media forma. Es muy sencillo. Sólo tienes que ir a las formas. Tenemos estrella aquí. Dibuja estrella y toma un rectángulo. A colocarlo y venderlos ambos y usar se cruzan. Así es como creas medias estrellas en Pigma. Este es muy sencillo. Sé que mucha gente debió haber hecho eso, pero déjame mostrarte. Primero, nos dieron los labios. Déjame dibujar algún circo. circo que va por aquí, y uno va a ser pequeño así. Déjame colocarlo en el centro y solo excluir. Como puedes ver, creamos este símbolo de aspecto de ojo. Espero que seas capaz de hacer esta sencilla tarea. Entonces, solo recuerda, las operaciones de balling son una característica poderosa, un buscador de pus con ganas de ilustrar o constructor de formas Ofrecen flexibilidad creando un diseño integrado, a la vez que mantienen la irritabilidad Así que mantente creativo y te atraparé en el siguiente video. 51. El dúo de energía de Figma cuando usar Union y cuando aplanar: Zeners de raíz, estamos explorando cuál es la diferencia entre unión y aplanamiento Entonces si selecciono esto y si entro en este menú de operación de Bulin. Entonces como puedes ver, obtuvimos esta opción, la selección aplanada. Entonces, ¿qué es eso? Y lo que es la selección de unión y selección aplanada se diferenciarán en este video Entonces sabemos lo que es la unión. La unión es una operación no destructiva que combina formas mientras cumple con su irritabilidad individual Por ejemplo, como puedes ver, esta forma la creamos, si hago doble clic sobre ella, como puedes ver, podemos editar esta forma. Entonces usamos union para fusionar la forma variable en So design. Esto es excelente para mantener nuestro diseño flexible y editable Pero déjame contarte sobre el aplanar. operación de aplanar distruct conduce varios barcos en una sola Así que creamos déjame crear una cosa por aquí. Entonces notarás la diferencia. Déjame hacer así. Si selecciono ambos, y si elijo intersectar sección, como pueden ver, obtuvimos esta forma Y si entro en modo esquema, como pueden ver, hay dos formas. Eso es visible en modo esquema. Pero si selrect los dos y si elijo la selección plana Como se puede decir, no hay nada. Simplemente tenemos esta forma. Entonces esa es la diferencia entre unión y flatter. Por lo tanto, es útil para simplificar diseño de conflictos o cuando se quiere exportar un diseño como una sola unidad Entonces yo unión, pudimos exportar nuestro diseño, pero fue un poco caótico También podemos ver la forma de otros, pero con un aplanar solo podemos ver una sola unidad Digamos que si un diseño cuestiona detalles interactivos y quieres agilizarlo para la explosión final, aplanar es alguna vez ir a Se trata de una unión y aplanar. Así es como usamos aplanar. Entonces déjenme decir sobre cuándo deberíamos usar union y donde debemos usar flatten Use union cuando desee combinar formas mientras conserva la capacidad de editarlas individualmente. Esto es especialmente útil en la elaboración de diseños complejos donde cada elemento necesita ser afinado final y usar aplanar así, cuando me quieres dar forma en una sola unidad, lo que facilita la explotación o simplificación Te útil especialmente cuando no necesitas editar componentes individuales por separado. Entonces eso es todo sobre N L aplanar. Por lo tanto, comprender la diferencia entre N N aplanado le da un mayor control sobre su flujo de trabajo de diseño, ya sea que prefiera la flexibilidad no destructiva o la simplicidad del diseño aplanado, cumple con requisitos específicos de su proyecto Entonces como siempre de creativo, y te atraparé en el siguiente video. 52. Página de inicio y menú de burócratas del proyecto de clase 8: Por estudiantes es tiempo de proyecto. Recuerden, estábamos pixelados base. Cómo en el mundo habíamos diseñado alguna vez una página de inicio decente. Bueno adivina lo que tenemos amor. Ahora es el momento de poner nuestra habilidad figma al gusto y construir algo realmente increíble en tu propia página de inicio y este menú de hamburguesas Bien, entonces tienes que diseñar esta página de inicio. Has aprendido sobre el estilo de color, textil, también diseñaste d sistema de color, así como sistema de texto. Usa ese conocimiento y crea esta página de inicio. Y creó opciones como si quieres usar diferentes colores, usa eso. Si quieres usar una olla diferente, usa eso. También proporcioné todos los íconos en archivo de proyecto, así que solo puedes revisarlo y usarlo en tu diseño. Si quieres usar otros iconos o plug ins, usa eso también, y lo mismo con un menú de hamburguesas. Esto tiene una instrucción, hay que seguir para crear un proyecto. Así que sigue esta instrucción y crea esta página de inicio y menú de hamburguesas. Anteriormente, aprendemos sobre las operaciones de bulones y así como los iconos aplanados. Así que hay que crear estas formas geométricas, iconos realmente apicales y tomar una captura de pantalla un poco y someterse a proyección Supongo que ya sabes cómo hacerlo. Entonces, estudiantes, tienes esto, toma tu habilidad figma, mézclalas con tu coraje creativo y deja que tu obra maestra de diseño cobre vida Así que no te olvides de capturar esos homepage, burgermenu, y bull en creación para Recuerda, no hay errores en el diseño, solo feliz accidente. Así que ve, explora el experimento y muestra al mundo tu magia Figma Y si quieres compartir este proyecto en tus redes sociales, también puedes hacerlo, y puedes etiquetarme ahí. Así que siéntete libre de adaptarlo aún más y agregar tu propio toque personal. Así que buena suerte con tu proyecto Figma ocho. 53. Cómo usar la selección inteligente y ordenar en Figma: Loco extras, en esta opinión, nos estamos sumergiendo en la poderosa característica de selección de Mar atada en Figma, así que prepárate para agilizar tu proceso de diseño y mejorar tu eficiencia con estas increíbles herramientas Entonces y también vamos a diseñar nuestra primera página de inicio. Entonces podrías estar pensando, ¿qué está atado? Ted up es tu herramienta para ir a cuando quieres organizar y organizar cuidadosamente los elementos seleccionados. Bien, entonces tenemos nuestra página de inicio página de inicio vacía. Ahora queremos diseñar algunas categorías. Entonces déjame dibujar algunos círculos. Y estaba pensando A seis porque mientras estaba probando, encajaba perfectamente en esto lo que digo, columnas. Bien, entonces ya sabes cómo duplicar tu artículo. Sosténgalo y arrástralo. Hay un método único. También puedes presionar el control D para duplicarlo, pero sale de la parte superior así. Pero hay otro método. Entonces si arrastro esto sosteniendo a Ed, y lo arreglo así, y si presiono el control D. Copiará faste en la siguiente columna Por lo que es realmente útil. Estos ya son círculos alineados. Entonces no conseguimos esa opción, pero digamos si los círculos son así, y si yo es todos ellos, como pueden ver, obtenemos este botón atado. Entonces si hago clic en esto, nuestro artículo se ató, pero esto no es lo que queríamos, así que solo podemos alinearnos con la parte inferior y así como horizontalmente así usando esta herramienta. Bien. Como pueden ver, alineamos nuestros círculos. Entonces hay múltiples opciones en esto. Entonces como puedes ver, hay puntos rosados en el centro. Entonces estos son realmente útiles. Digamos que quieres cambiar este artículo con este o este artículo con este. Así que simplemente haz clic en él y mantén presionado el botón derecho y arrástralo así. Y el artículo se intercambió. Déjame copiar todo así. Y si los selecciono todos, para que puedan ver, también llegamos a sumar los círculos verticalmente así. Entonces esta es la selección inteligente. Bien, así que diseñemos nuestro lanzamiento en casa. Bien, entonces esta va a ser una sección de categoría. Ahora, agreguemos eso no si esta copia y Pst lo. Sé que hay una forma de tejido. Así que déjame arreglarlo. Bien, entonces esta va a ser una barra de búsqueda. Envíalo de vuelta. Y déjame dibujar otro rectángulo, así dedicará un sub banner. Por lo que se intercambiará, habrá cinco seis pancartas y se intercambiará. O podemos crear un banner sencillo como este. Mostrará algún producto como producto específico, como iPhone 15 max o laptop o monitor, algo elemento electrónico. Y habrá algunos otros artículos como vamos a crear subelementos como digamos que la oferta de teléfonos inteligentes está sucediendo. Bien, así que creamos por aquí. Entonces digamos esta sección para ropa de hijo de abarrotes y vamos a crear otra sección. En esta sección habrá un top seller de artículos que vendemos en esta app. Por ahora, solo estamos diseñando algunos conceptos básicos, pero espero que hayas visto la página de Amazon, las páginas de teléfono, la página de inicio es de nivel de desplazamiento totalmente infinito. Entonces podemos hacer eso, pero va a llevar mucho tiempo. Tomará décadas diseñarme. Por lo que actualmente apenas estamos aprendiendo. Así que diseñaré algunos elementos básicos básicos, como banner, algunos productos, así como algunos productos más vendidos, así como algunas categorías por aquí. Entonces ahora, menos tc o podemos dibujar una barra de búsqueda o podemos agregar nuestros artículos. Así que vamos con nuestra barra de búsqueda. Entonces te proporcionaré todos los íconos en el archivo de ejercicio. Así que simplemente rastrea esos elementos, rastrea esos íconos por aquí, y los agregaremos en nuestra página de inicio. Entonces déjame dibujar un rectángulo para nuestra barra de búsqueda. Entonces va a estar por aquí. O podemos hacer esto más grande. Entonces nuestra barra de búsqueda será más como para verse mejor. Bien, déjame cambiar el color por ahora. Déjame hacerlo bien. Vamos al centro. Bien. Esto se ve genial. Vamos a dar bordes redondos hasta, quiero redondear totalmente. Entonces creo que por favor conjetura eficiente. Bien, entonces 50. Podemos hacerlo hasta como 100 gs. Bien. Va por encima de 100. Así que ve con 100. Bien, así. Ahora, agreguemos íconos. Actualmente, estaba pensando aquí va a ser búsqueda y aquí va a ser mic. Entonces tenemos búsqueda y ratones, así que está por aquí. Trag aquí. Bien, así que terminé con la barra de búsqueda. Entonces hay una cosa que podemos agregar por aquí, digamos que estamos vendiendo algunos productos y queremos decir que podemos buscar moda. Si hago deletreo mistak, por favor, perdóname. Soy un montón de errores ortográficos. Bien. Déjame mantenerlo un setter. Y vamos a darle un color realmente neutro, como este. Tiene que ser visible apenas visible. Tiene que tener ese acento de color de marca de poder como el gris como éste. Bien. Ahora agreguemos Bergm y así como botón de tarjeta Tarjeta Bien, entonces diseñamos algunas cosas básicas. Ahora, diseñemos una barra de navegación. La barra de navegación va a estar por aquí. Dibujemos un rectángulo para eso. Pero estaba pensando como recientemente, estaba pasando por algunas aplicaciones, y vi una barra realmente genial. Bueno para hacerlo por ahora. Y fue así. Tenía una cornisa redonda hacerla redonda y tenía todos los elementos Entonces voy a agregar todos los íconos. Así. Si apago la visibilidad de columna, como pueden ver, esto se ve genial, pero sin color, es demasiado preocupante así que vamos a agregar algunos colores. Estamos para crear un estilo de color. Entonces va a ser una primaria, esto no se ve muy bien. Vamos a agregar algunos colores este. Y para esta barra de riego, agreguemos la más oscura. Y esto va a ser, supongo negro. Bien, déjeme quedarme con eso o podemos hacerlo negro también. Bien, entonces esta es una página de inicio. Sé que podemos agregar un montón de imágenes y todo eso. Pero parte de este video fue para enseñarte sobre selección inteligente y el ment así como sobre atado. icono de búsqueda y el botón del micrófono son totalmente invisibles, así que déjame cambiar el color. Bien. Déjeme ir. Bien, ahora se ve genial. Hay un montón de cosas que puedes hacer con este diseño, puedes agregar trazo a esto, como si agrego trazo, déjame un che, y cambiemos el color a más oscuro. Bien. O podemos darle un color primario como este. No se ve tan genial, pero podemos agregar ese trazo. Entonces déjame agregar otro trazo. Déjenme darle el blanco. Creo que el blanco quedará genial. Bien, esto se ve genial. También podemos agregar negro. También podemos agregar trazo a este círculo también. También podemos agregar bordes redondeados de esta manera así, por lo que se verá más moderno. Y también podemos agregar imágenes. Creo que no cubrí la parte de la imagen. Entonces en la siguiente sección, voy a cubrir la parte de la imagen. Entonces en eso agregaremos imágenes así como nuestra página de inicio. Sé que algunas personas saben cómo agregar imágenes que puedas ir directamente y agregar imágenes. Entonces eso es todo sobre el título y la selección inteligente. Y también diseñamos nuestra página de inicio. Se ve genial. Así que a medida que continuamos este viaje de diseño, mantente inspirado y siga creando así S en el siguiente video. 54. Colocación de imágenes en Figma: Diseñadores de cómics, en este campo, estamos buceando al mundo de las imágenes en Figma. Exploremos varias formas de importar edades y jugar con imágenes, incluyendo algunos ajustes básicos como la habitación de luz. Hay múltiples formas de agregar imagen en Figma. También hay turno de control de acceso directo si desea importar imágenes tA de archivos locales. Y la opción está disponible en los rectángulos. Al igual que, digamos, quiero una importación de esta imagen, así que sólo puedo hacer click sobre ella y abrirla. Pero como pueden ver, al importarlo, mi cursor está cambiando a esta pequeña imagen. Puedo sostener shift y arrastrarlo imagen así. Entonces esta es la primera forma. Y si elijo otra manera, si elijo esta y la abro, Si acabo de hacer clic en este espacio vacío, como pueden ver la imagen es demasiado grande. Al importar imagen, ten en cuenta, todo el turno y arrástrala así, así obtendrás una mejor perspectiva de la imagen. Entonces hay muchas cosas que podemos hacer con la imagen. La primera es, puedes agregar bordes redondos así. Puedes rotar tu imagen así y si hago clic en este botón de imagen. Entonces como puedes ver, obtenemos opción de manojo como tono claro. Sé que mucha gente usa la luz más photoshop. Obtenemos este pequeño ajuste. Estos no son ese avance en comparación con photoshop y lightroom Estos son básicos. Se puede ajustar así. Puede agregar saturación de contraste, temperatura, reflejos de tinte y sombra Te conozco un diseño y necesidad. También podemos recortarlo encajarlo. En siguiente carga vamos a ver cómo crear una máscara usando esta tecnología MS, Bien. Entonces esta es nuestra primera técnica. También podemos ajustar la rotación desde aquí. También puedes ajustar o agregar nuestro lo que digo los bordes redondos así. Así que junto a ti puedes importar tus imágenes desde archivos locales. Entonces digamos que quieres importar esta imagen, solo puedes arrastrarla así y copiarla por aquí. Pero el problema con esta técnica es que dirás en segundo lugar. Este es el problema. El tamaño de la imagen es demasiado grande activo, así que tenemos que redimensionarlo. Y déjenme a esto porque ya no queremos ese. Y hay otra técnica. La tercera técnica, viene como máscara, pero no cuenta como máscara. Te enseñaré las técnicas de máscara en la siguiente ventana. Entonces hay una cosa como digamos, si voy a llenar, actualmente está vacía, puedo cambiar el color, pero si quiero cambiar la imagen, simplemente puedo hacer clic en este botón, y actualmente está cambiando a casilla de verificación casilla de verificación o caja de persecución, y solo puedo elegir la imagen en imagen aleatoria. Sólo puedo hacer click sobre esto y abrir. Así como pueden ver las imágenes agregadas por aquí. Esta es también otra técnica. Digamos que quieres agregar una imagen como cualquier cuadro específico como este o los círculos. En este caso, lo que puedes hacer es que puedas ir a colocar imagen y seleccionar cualquier imagen abierta y tus autos mouse cambiarán a esta pequeña imagen. Y puedes elegir cualquier caja. En este caso, quiero colocar la imagen O, así sólo puedo hacer click sobre ella y la imagen se coloca ahora. Si me acerco, como puedes ver, imágenes aquí, Así que hay muchos sitios web puedes descargar tus imágenes de uno de mis favoritos, los píxeles. Como pueden ver, utilizo esta imagen en este video. Y estas imágenes son de uso totalmente gratuito. Y si quieres saber sobre licencias. Entonces como puedes ver, la licencia es realmente sencilla. Entonces no hay necesidad de agregar el nombre del fotógrafo o algo así. Se puede usar cerrada, y yo también puedo modificar. Después de eso, tenemos Pixabay. También es uno de los mejores sitios web. Y actualmente también está proporcionando el video de stock así como música, regalos de efectos de sonido, y todo eso. Si eres un diseño videatorgráfico, puedes usar esta p después de eso tenemos También es uno de los sitios web populares. Y en Figma, también tenemos plug ins. Y en Figma, también tenemos plug ins para ese sitio web específico como píxeles así como para splash Entonces vamos a hacer esas cosas en el siguiente video. Entonces actualmente, apenas estamos aprendiendo a agregar imagen y diferentes tipos de imagen. Y lo último que quiero mostrarles, digamos que queremos colocar una imagen en este marco. Entonces es muy sencillo, el mismo proceso para llenar a imagen, y se cambia a caja de persecución y elige una imagen. Quieres vamos a elegir este, y se agregará en este marco. Si tu diseño requiere esto, entonces hazlo. No es esa buena práctica. Bien, déjame hacer esto. Estos son algunos métodos para agregar una imagen al diseño A. Así que experimenta con la importación de imágenes usando varios métodos. Fue photoshop como ajuste con la imagen para imagen básica como esta. Se puede ajustar este contador de exposición Suro entrar presente en resaltado y sombra Puedes aplicar la imagen directamente a formas o marcos para así, así ahorrará tiempo. No tienes que arrastrar y soltar así. Entonces, chicos, todo esto se trata de imágenes. Estadio para más consejos de diseño y siéntete libre de compartir tus pensamientos sobre este video y su diseño. 55. Máscaras de Figma (imagen de la máscara y texto en Figma): Bienvenidos de nuevo, todos. En esto, vamos a aprender sobre qué es máscara y cómo hacer máscara en Figma. Entonces lo primero es cómo funciona la máscara en Figma. Antes de sumergirnos en lo nifty grifty de usar la máscara en Figma, entendamos los fundamentos como lo que es la máscara porque muchos estudiantes no saben qué es la máscara o algunas personas saben porque algunas personas usan photoshop o saben porque algunas personas usan photoshop citas para que les guste remap para que puedan saber Pero si no sabes nada de máscara, entonces déjame decirte de qué se trata. En Figma, se utilizan máscaras para controlar la visibilidad de una y más páginas usando otras formas o imagen como plantilla Esta técnica es particularmente útil para revelar solo el contenido dentro de los límites de la máscara. Ahora, cómo funciona la máscara. Las capas de máscara actúan como una ventana a través de la cual se puede ver el contenido de las capas debajo. Cualquier contenido fuera de los límites de la máscara está oculto. Puede crear un efecto complejo y reconstruir una parte específica de su diseño mediante el uso de máscaras. Ahora vamos a saltar a figma y menos crear alguna máscara. Entonces déjame elegir una forma. En este caso, voy a elegir un rectángulo, y estoy manteniendo la tecla shift para un rectángulo preciso. Ahora, permítanme importar algunas imágenes. Bien. Bien, voy a elegir este por ahora. Este es el iPhone 14 o 15. Bien, esto es 15. Bien. Déjame redimensionarlo. Entonces yo Figma, el método de enmascaramiento es algo opuesto porque uso Canva Photoshop así como un prem P. Así que en eso usamos para poner formas en Entonces crea marcas. Pero en Figma, es opuesto. Tenemos que poner formas u objeto debajo de nuestras imágenes. Entonces déjenme la opción. Y como se puede ver en la parte superior ormo tienen máscara. Así que lamerlo y conseguimos nuestra máscara. Entonces este es el primer método en el panel de capas, puedes ver, tenemos nuestra máscara. Eso es grupo de máscaras. También puedes cambiarle el nombre por aquí. Lo voy a mantener tal como está por ahora. Entonces como pueden ver, esta es la imagen, y esta es la chica bronceada. Si lo deseas, también puedes recortarlo simplemente haz doble clic sobre él, y este ormino superior dará opción arriba recortar imagen Desde aquí, puedes recortar tu imagen o ajustarla así. Bien, estoy eligiendo máscara, supongo. Bien, así es como puedes recortar tus imágenes. Hay otro método, pero no cuenta como máscara, sino que funciona como máscara. Déjame tomar un turno. Estoy eligiendo elipse y turno completo para elipse precisa. Entonces vamos a llenar. Actualmente, está en colores. Ahora bien, esta es para graduada y esta película es para imagen, y también Figma ahora soporta videos Entonces me interesan las imágenes. Así que vamos a las imágenes. Ahora, tenemos la opción de elegir imagen. Y ahora, voy a elegir esta Diva Phagocc conseguimos nuestra máscara. Pero en el panel de capas, se puede ver, esto no es una máscara. Esta es la imagen, y esta es la máscara. Bien, entonces así es como puedes crear máscara. Pero algunos estudiantes podrían estar preguntándose cómo podemos desactivar la máscara. Entonces es realmente fácil. Pero estoy enfrentando un problema en mi diseño. Bien, entonces el atajo para mask es como Control M en windows, y para Mac, es ship command M. Así que uso este método. Déjame probar con otro. Déjame dibujar una forma otra vez. Labios y déjame tomar una imagen otra vez. Bien, entonces elegiré esta por ahora. Bien. Seleccionaré ambos, y presionaré control Alt M para el atajo. Pero no funciona en mi PC. No sé cuál es el problema si esto está pasando contigo también. me lo puedas decir o también puedes contactar a Figma por aquí y decirles, es el atajo no está funcionando Si está funcionando o si hay otro atajo, por favor házmelo saber. Entonces ahora aprendamos sobre cómo deshabilitar la máscara. Entonces déjame elegir esta. Y solo tenemos que ir a menos panel y dar click en esta forma. Entonces en este caso, tenemos rectángulo y solo haz clic en el botón de máscara y tienes tu máscara desactivada. Bien, entonces hay un método entre sí que también puedes usar para crear texto realmente increíble. Entonces estoy eligiendo este botón de texto. Voy a cronometrar siete palabras aleatorias. Déjame aumentar el tamaño de la misma, 40 96. Y escojamos un cerrojo. Bien, quiero un poco de diversión realmente audaz. Bien, así que vayamos con éste. Entonces quiero usar el método de máscara en el texto. Tal vez veas ese efecto en muchos diseños gráficos, así que estamos recreando ese efecto de máscara Entonces es realmente fácil lamer el texto. Y yo segundo método, vimos cómo crear ese efecto de máscara usando relleno estamos usando ese mismo método. Vamos a llenar imagen, y vamos a elegir una imagen, alguna imagen aleatoria. Entonces voy a elegir éste. Bien, así como pueden ver, tenemos máscara de texto. Y en este caso, se puede ver, este es el texto, no una máscara. Podemos llamarlo máscara, pero Figma no cuenta como máscara, supongo, porque las máscaras son así en Figma, y este es el texto Y también puedes cambiarle el nombre. Bien, puedes cambiarle el nombre, lo que quieras. Se ajustará si le agregas texto más texto en él así. Y también podemos cosechar. Voy a llenar. Antes de ir a llenar, tenemos que seleccionar, ir a llenar, y podemos elegir cultivo. Y también podemos agregar esta imagen, puedes redimensionarla así Entonces así es como podemos hacer el truco de máscara ique text también. Entonces así es como puedes crear una máscara realmente impresionante en Figma. Esa es la papa, y los voy a ver en la siguiente. 56. Imágenes de Figma Plugins para diseñadores de UIUX: Bienvenidos de nuevo a todos. Para creer vamos a aprender sobre plugins para imágenes. Estos plugins hacen que tu trabajo sea realmente suave. Así que actualmente tenemos este plugin de píxeles. Entonces déjame mostrarte cómo funciona. Si selecciono este ifcli en esta imagen de mareas. Como puedes ver, es de manera más suave, mucho más suave que agregar imagen. Entonces veamos cómo podemos hacer esto. Imagina un mundo en el que puedas acceder directamente a imágenes increíbles con un plug in. Entonces, amigos míos, el mundo está aquí. Así que déjame mostrarte plugins. Así que podemos ir a casa por plugins o puedes ir a la comunidad, y podemos añadir plugins pero Figma tiene una opción realmente genial Eso es recursos y atajo es un turno excava. Entonces hay un montón de plugins. Puedes buscarlo. Por lo que actualmente estamos usando píxeles. Para este fajo, puedes usar splash, photo o Pixabay. Estas también son excelentes opciones. Y vamos a los píxeles. Y digamos, quiero buscar imagen sobre viajes, así puedo simplemente buscarla tra vamos a buscarla y solo puedo agregarla en mi esta sección. Entonces, digamos, quiero agregar imagen de este mundo. Así que sólo puedo hacer clic en él y boom imágenes agregadas en nuestro botón. Digamos que tienes un montón de cajas vacías como esta, y no estás seguro de qué debemos agregar en estas cajas. Entonces en este caso, lo que puedes hacer es que puedas sellect estas cajas y puedes dar click en insertar imagen aleatoria, e insertará una imagen aleatoria como esta Por lo que es realmente útil. También es supongo en Saba. Déjame elegir un Saba. Bien. También está presente en Pizaby Supongo que también estará en chapoteo. Bien, entonces déjame cubrir todo esto. Entonces déjame buscar moda. En este caso, la imagen no encaja perfectamente, así que podemos recortar esto para que podamos ir al recorte de imagen y podamos ajustarla. Déjenme así así. La imagen no es tan grande, así que no somos capaces de ajustarla. Podemos simplemente eliminar esta y agreguemos alguna imagen realmente buena. Vamos con digamos esto para la fricción indi. En este caso, podemos agregar en ropa. Déjame leer esto primero, pero tenemos que ajustarlo porque el ajuste no es tan perfecto. Como puedes ver en este caso, la imagen está limpia, así podemos ajustarla así Así es como podemos recortar imagen. Creo que te voy a mostrar como recortar. Bien. Ahora bien, ¿cuál es la siguiente? Es electrónica. Vamos a agregar electrónica. Bien, yo Pizawa no vi esa imagen específica, pero en pixeles, me gusta mucho esta imagen Y como pueden ver, está disponible en Pizawa, pero no era visible en Pizawy eso es ironía Entonces déjame agregar esto en electrónica. Bien, el siguiente es la búsqueda de comida por comida, siguiente son los libros, los libros. Este se ve bien así que voy a agregar este, y el último es artesanal. Bien, oficio, podemos agregar, este es bueno, pero déjeme mostrar algunos detalles. Bien, este se ve bien. Entonces así es como enchufamos. Como puedes ver, ahorra mucho tiempo. Sé que agregar tu propia imagen también es bueno. Pero digamos que en algunos casos, solo quieres agregar imagen para marcador de posición, o no sabes qué imagen agregar En este caso, puedes usar enchufes como Piseles o Pizawa o splash Deja que tu diseño lo requiera , entonces también puedes agregar eso. Pero la mayor parte del cliente proporcionará o su empresa proporcionará las imágenes, agregue eso. Bien, una cosa que olvidé agregar en este diseño es que hay un botón de ubicación. Quiero agregar, como que mostrará la ubicación actual de nosotros. Y voy a elegir el color Bien, este vamos a coexistir con este. Y también tengo el símbolo de ubicación Oh icono. Va a estar aquí y permítame agregar algún texto. Entonces actualmente, vivo en Marsha, así que está en un myname es este pony si el usuario escribe en este icono, entonces habrá un menú que aparecerá y mostrará mi dirección y algunos contratos serán así Si el usuario da click en este, por lo que mostrará esta dirección. Entonces, cuando queramos cambiar nuestra dirección o queramos verificar tu dirección, en este caso, nos será útil. Bien, entonces probablemente, como, bluster mi dirección. Creo que guardé mis agregados precisos, así que probablemente desdibujaré eso. Entonces eso es un rapero para este video, pre image plugins, diseñadores dream combo. Así que adelante, explora y descubre el vs mundo de las posibilidades de diseño. Utlext tiempo sigue creando y te atraparé en la siguiente 57. Proyecto de clase 9: alquimia de imágenes: domina las imágenes y los complementos en Figma: Mis alumnos. Esto es proyecto. Lo primero, primero, D este espacio vacío en blanco y reemplazarlo con estas imágenes geniales como esta. Creo que también proporcioné todas las imágenes en archivo de recursos. Así que ve a través de él y comprueba eso y agrega imágenes sobre eso. Si quieres agregar tus propias imágenes, que sepas cómo agregar eso, así que ve y agrega esas imágenes. Pero donde hay más, sumérgete en los plugins, país de las maravillas y seguro alquimista de imagen interior Cambiar el tamaño de recorte y filtro, jugar con efecto hasta que canta visualmente. Sólo recuerda lo que hay en componer. Apunta hacia el público objetivo y sus deseos e como. Entonces después de agregar imágenes, toma una captura de pantalla y comparte esto en la sección del proyecto. Estas son algunas instrucciones. Primero, este espacio en blanco, agrega imágenes. Después de eso, si quieres usar plugins, agrega plugins, toma una captura de pantalla, súbalo a la sección del proyecto, y también puedes compartirlo en redes sociales. Así que completen este proyecto y cumbre para mí, y los voy a ver chicos. Siguiente. 58. Diseño y restricciones de autos en Figma: Oigan, compañeros constructores. Bienvenido de nuevo a nuestro diseño click art Commerce. Hoy tengo que hacer una confesión. Un clásico caso de oops. Se me olvidó. Entonces aquí está la primicia. En medio de la creación de la obra maestra, adivina qué, se deslizó por la grieta Sí, ya lo tienes. La pequeña página del producto todo importante. Sé que lo sé. Es como hornear un pastel y olvidar un ayuno. Sé que es un amateu. Pero bueno, no estamos ahí para juzgar. Estamos aquí para aprender y reírnos bien en el camino. Así que quédate porque estamos sumergiendo la cabeza primero en diseñar juntos la página del producto Eclsure Toda esa gente, la máquina de buckler de hoy está creando la página del producto que nos olvidamos por completo y adivina qué Lo estamos haciendo en un estilo con figma y generosa dosis de humores Pero eso no es todo, ya ves. En nuestra búsqueda por arreglar este pequeño error, también vamos a desentrañar misterios del diseño automático y las restricciones Es como un pegamento mágico que mantiene todo unido. El glaseado en el pastel de diseño, si se quiere. Bien, entonces esta va a ser nuestra página de producto. Sé que ya lo diseñé, así que te mostraré cómo diseñarlo, y vamos a crear este botón, botón increíble. Como puedes ver, este texto elástico y blando también permanece en Y si extiendo esto así, se extiende. En Ts negrita, vamos a crear este increíble botón usando el diseño automático y la restricción. Pero primero, hablemos de diseño automático. Imagina que tu diseño de figma es una casta que rebota. Cada elemento en su interior es un muerto rebotando alrededor. Auto at es como una red invisible que evita que los muertos salgan volando de las paredes. Puedes decirle a cada niño cuánto espacio necesita y dónde deben rebotar. El segundo es, si matan crece más alto, los bordes de la red para que no choquen con otros. Y si agregas un nuevo kit, la red automáticamente hace espacio para que todos puedan rebotar felizmente. Esa era la definición básica del diseño automático. Así que diseñemos los detalles del producto. Entonces va a ser muy sencillo, así que sólo tenemos que copiar esto. Entonces voy a copiar este Control C, seleccionar los detalles del producto. Control. Como puedes ver, diseña este botón Navbar, para que no tengamos que diseñarlo una y otra vez, así que déjame enviarlo para atrás. Bien. Ahora, diseñemos estas páginas. Donde vamos a agregar algunas imágenes de nuestros productos. Vamos a darle la parte superior de los bordes redondos a 15 y déjame habilitar las columnas para que pueda encajarlas perfectamente. Estoy sosteniendo alt. Como puede ver, nos estamos dirigiendo desde el lado del tablero. Bien. Ahora, permítanme copiar esto y pegarlo aquí así y para éste también. Pero como puedes ver, el rectángulo está fuera de marco. Así que permítanme reunirlos en los detalles del producto. Y actualmente están dentro. Si hago clic en esto, el contrate clip ya está habilitado. Bien, así que estas van a ser nuestras imágenes. Ahora, vamos a crear ese botón mágico. Eso automáticamente se estira. Bien, agreguemos un texto al carrito déjame hacer los sitios de texto. Yo elegiré 25 supongo. Ahora, seleccione ambos, y como puede ver el diseño automático aparece en el panel de diseño. Si selecciono uno de ellos, como puedes ver el diseño automático no está por aquí, y tenemos que seleccionar ambos si quieres agregar outolayout da clic en el Ahora bien, si lo estiro, como pueden ver se queda en el medio. Hay algunos acolchados horizontales y acolchados verticales también en este botón. Déjame cambiar primero el color del botón. Actualmente, es genial. Déjame elegir este y déjame agregar algunos bordes redondeados hacia arriba para que vayamos totalmente por ahí, así que voy a elegir así, agregar al botón de la tarjeta. Podemos cambiar el color de este texto. Déjame cambiarlo por al uno. Bien, ahora se ve genial. Déjame quitar, para que podamos hacer una cosa más. Podemos mantener el botón así y dejarme disminuir el tamaño de la fuente. Ahora, déjame desarmar las columnas. Bien. Déjame hacer un duplicado de éste. Bien, digamos que quieres actualizar el texto. Digamos que quiero decir. Ahora puedo agregar mucho texto en su interior. Como puedes ver, el botón cuerva junto con el texto. Bien, esta cosa pasando porque actualmente estamos en um panel de diseño, estamos en Hum Pero digamos si elijo peso fijo. Y si trato de ajustar el texto dentro de él. Entonces como se puede ver botón no va en aumento. Ten en cuenta, debería estar en abrazo no en peso fijo. Bien, hay una cosa que quiero mostrarte. Digamos que tienes botón así y voy a añadir algún texto como este texto aleatorio. Y permítanme seleccionar tanto el diseño automático. Y digamos que tú La restricción automática está por aquí, por defecto, tal vez esté en la parte superior izquierda. Y si trato de extender este botón. Entonces como puedes ver el texto se queda ahí, no se mueve. Entonces tiene que estar aquí para trabajar. Esto así. Bien, hay otra cosa. Digamos que tienes un texto como este, y actualmente es un peso automático por defecto. Pero si eliges la altura del agua, ésta se ajustará según la altura. Entonces si agrego algún texto, se ajustará de acuerdo a la altura. Pero si elijo tamaño fijo, en ese caso, el texto no cabrá en la caja. Hará algo al azar como esto. Ten en cuenta, tiene que ser un peso auto, si quieres hacerlo horizontalmente, y si quieres hacerlo verticalmente, mantente en altura automática. Hay un método realmente de atajo que puedes usar para crear un diseño automático, como botones como este. Entonces solo agrega texto, agrega texto como agregar para agregar dos cortes. Y ahora, selecciona el texto. No tienes que convertirlo en un marco o no tienes que añadir un rectángulo. Simplemente selecciónelo y elija el diseño automático, y el atajo es shift A. Y como puede ver, tenemos nuestro botón. Pero actualmente, el relleno es blanco, por lo que no es visible. Entonces déjame agregar un relleno y vamos a elegir el mismo color. Este, como pueden ver, tenemos nuestro botón, y podemos agregar algunas esquinas con conexión a tierra. Déjame sumar 20 así o hacer diez. Bien. Y puedo hacer que escoja así. Puedo aumentar el tamaño. Ahora le puedo agregar rellenos verticalmente, horizontalmente. También puedo cambiar la restricción, y así es como hacemos los botones. Es uno de los métodos más simples. Entonces no tienes que agregar un texto rectangular, entonces tienes que convertirlo en diseño automático. Entonces como puedes ver, solo tenemos que agregar texto, ligar el diseño automático Es uno de los métodos más simples. Y si quieres usar este botón en otro marco, así que solo haz un seguimiento de esta manera, copia, pégalo y úsalo en tu diseño. Entonces es así de simple. Bien, así es como creamos botones en Figma usando capas automáticas Y ahora voy a terminar este pitch porque está inconcluso Así que permítanme agregar algunas imágenes en él. Entonces probablemente voy a adelantar rápidamente. Bien, entonces esta va a ser nuestra página de producto. Sé que se ve genial, pero hay muchas cosas que puedo agregar como una vista similar o categoría o hay muchas opciones, puedo agregar mineral pero actualmente solo estamos aprendiendo. Entonces esto es para esta página de detalles del producto. Sé que era un video totalmente imprevisto, así que me tomó mucho tiempo crearlo. El propósito principal de este video fue crear este botón usando el diseño de pedidos y las restricciones, y todos sabemos que podemos usar esto así y podemos ajustarlo al centro. Supongo que esto se ve mejor, así que voy a seguir así. Entonces amigos hasta la próxima vez, felices diseñando y recuerden, incluso el mejor diseñador olvidó la ocasional página de detalles del producto. Pero eso es lo que nos hace humanos, ¿verdad? Así que mantente cuidado con mis amigos. 59. Espacio de disposición automática de Figma entre objetos: Bienvenidos a los alumnos. Hoy, estamos tomando auto t en el siguiente nivel. En el último día de hoy, estiramos un bracel de botones porque estamos sumergiéndose en la agrupación de muchos artículos juntos y estirando todo ese gran Es como combinar la función de selección inteligente que aprendimos anteriormente con algo de magia de diseño automático elegante. Entonces, sin más, exploremos el diseño automático y el espaciado. Entonces primero, primero, voy a escribir algunas palabras aleatorias por aquí. Déjame elegir algunas palabras aleatorias. Como en casa. Déjame copiar esta . AI, Control D , cerraduras de medicamentos y lista B. Bien, déjame arreglarlo. Bien. Ahora, vamos a seleccionar todos ellos y abajo. Bien, entonces tenemos este tipo de botón de navegación. Y digamos que diseñaste tu botón de navegación en tu sitio web así, como horizontalmente, pero tus clientes quieren, debería ser como horizontal como este. Tenemos bot de navegación en el lado izquierdo, y es vertigal. Entonces digamos que tu cliente quiere eso. Entonces en este caso, lo que puedes hacer es que puedas arreglarlo manualmente uno por uno. Pero hay otra característica del diseño automático, si los vendemos todos y los creamos en el diseño automático. Y si voy al diseño automático, se puede ver que hay una opción llamada disposición vertical. Si yo en esto, como pueden ver, somos capaces de hacer esa cosa en un segundo dentro de un solo clic. Y obtenemos todas las características que puedo alinearlo aquí así. Y le puedo agregar relleno. Puedo agregar relleno vertical acolchado horizontal, así como puedo limitarlo así Puedo agregar al centro, así como puedo usar la selección inteligente como esta. Puedo cambiar el texto así. Puedo intercambiar los blases de ellos. Esta es la característica que obtenemos con el diseño automático, y ya vimos que podemos agregar filtro. Agreguemos un relleno como déjame agregar un nuevo frac Let's COVID este Ahora, digamos, tengo un texto como esta prueba aleatoria. Digamos que tengo un montón de ellos. Vamos así. Voy a escribir algunas palabras británicas. Entonces déjame alinearlo. Line Aig vamos a crear en el diseño automático. Y digamos que quiero copiar toda la característica, todas las propiedades de este diseño automático en esta, y puedo simplemente copiar esta sección barra de navegación, que ya es diseño automático, y copiar y pegar, ir a copiar propiedades y seleccionar este diseño automático, mismo pega tus propiedades. Como puede ver, agregamos todas las características de esto a esto. Y si queremos agregar algunos acolchados, como el relleno izquierdo, puedes agregar el relleno superior de relleno izquierdo. Este es el relleno correcto así como este es el relleno Atom así como este. Y se esconde por aquí. Se puede agregar un hueco vertical como este entre ellos. Estos son algunos bits agrega características de diseño automático. Hay una cosa más. Digamos, digamos, nuestros bloques salen de nuestro diseño automático. Y solo puedes traerlo así. Y podemos guardarla. Hay una línea. Creo que tengo que cambiar el color. Entonces, si cambio el color y si lo arrastro afuera, y si lo arrastras dentro, puedes ver, hay una línea de peras azules y podemos pegarla por aquí así Digamos que lo estropeaste y lo pusiste en algún lugar por aquí, como fuera de marco Actualmente, está fuera de marco, y esta está fuera del marco 23. Podemos simplemente traerlo así. Y es trineo nuestro diseño uto. Y como puedes ver, para la maquetación automática, el icono es diferente. Al igual que, para los marcos, es como la caja cuadrada, y para el diseño automático, tenemos 3 barras que tienen bordes rodeados Y hay otra cosa que olvidé mencionar. Creo que hoy en día me estoy olvidando mucho. Bien, entonces hay una cosa. Como digamos que quieres copiar este elemento y pegarlo en este para que puedas hacer lo sencillo como incluso presionar control. Para eso, el truco es sencillo, pero la gente siempre se confunde. Como digamos que tenemos que seleccionar, y ahí está la gente se confunde. Como decir, tenemos que entrar en primer orden. Después de eso, tenemos que entrar en texto. Duplicé doble clic. Después de eso, tengo que presionar control. Entonces puedo hacer una copia, montón de copia de ese texto así. Si tengo que hacerlo primero seleccione el orden después de ese texto haga doble clic y nuevamente haga doble clic para editar texto así. Entonces, como puedes ver, los diseños de auto son realmente increíbles. Así que estas son algunas características avanzadas de los diseños de auto. Entonces ese es el video de Portola, y los voy a ver chicos en el siguiente 60. Restricciones de Figma y cambio de tamaño hecho SIMPLE: Hizo fascin mundo de preguntas. Las preguntas son como pegamento mágico que suela diseño en el lugar. Las letras hacen cosas geniales como pegar la navegación a esquinas específicas, creando un visual atractivo diseños responsivos. Entonces déjame mostrarte que tengo esta página llamada mi cuenta. Y si yo st esto. Como puedes ver, todo permanece unido. No se pone en mal estado. Entonces hicimos esto usando restricciones. Entonces déjame deshacer esto. Ahora imagina las posibilidades que incluso lanzaremos una pizca de palanca automática hacia el final del curso, creando una sinfonía de diseño que podría hacer explotar tu diseño Emocionante, bien. Entonces, vamos a embarcarnos en estas limitaciones, Extra Vanza Bien cooptó esta barra de navegación así como esta barra de navegación de nuestros diseños anteriores, y no tiene restricción adicional . Tengo restricción por defecto, pero no tiene addsor restricción Será útil cuando digamos que queremos diseñar lo mismo para un sitio web, para iPad. Entonces esa vez va a ayudar. Entonces déjame rastrear un frame en que voy a elegir un iPad 12. Como este, y quiero copiar esta cosa con un iPad, y tiene que estar en forma exactamente así. Entonces en este caso, podemos usar restricción. Entonces déjame mostrarte una cosa. Entonces si dibujo un rectángulo como este, como se puede ver en panel de diseño, las restricciones son izquierda y superior. Entonces las restricciones siempre ahí y por defecto. Los elementos están restringidos a la parte superior e izquierda, pero queremos más control. Empecemos con esta barra de navegación. Bien, entonces déjame hacer lo primero con este, así que solo copiaremos y pegaremos sobre él para que funcione bien. Entonces ahora si lo estiro, como pueden ver, esto está totalmente deshecho, y también está deshecho por aquí también Entonces ahora vamos a hacer alguna pregunta. Bien, entonces déjame elegir primero este rectángulo, así que vamos a arreglar este primero. Bien, entonces esto es retgle y actualmente es centro. Entonces voy a agregar esto de izquierda a derecha, y tienes que estar arriba en la parte superior. Y para este menú de hamburguesas, tienes que estar a la izquierda y arriba, esto es perfecto. Y para el icono de búsqueda, izquierda y arriba, también es bueno. Tienes que estar en el centro. Bien, Centro y esto tiene que ser en el centro y para Mike derecha y arriba. Bien. La parte superior derecha es perfecta para esta izquierda derecha y superior. Déjame llevarme esta. Este ha dejado en la parte superior, pero quiero de izquierda a derecha en la parte superior. Ahora bien, si estiro esto, funcionará. Como puedes ver, está funcionando perfectamente bien. Nosotros también vamos a hacer lo mismo con esto. Déjame hacer esta. Esto va a ser a la izquierda y al fondo, se supone que es a la izquierda y al fondo se supone que está en el centro y en el centro, y hay que estar a la derecha y al fondo. Abajo derecho, y este rectángulo tiene que ser de izquierda a derecha. Pero si selecciono centro, entonces si lo estiro, como pueden ver. Es total No se estira. No sé por qué se estira, pero no se estira. Entonces déjame agregar la izquierda y la derecha, y tiene que estar abajo. Ahora, déjame elegir esto. Y como pueden ver si extraigo, la barra también está extrayendo, pero no sé qué está pasando en esta. ¿Qué está pasando contigo? Bien, me quedé con la derecha izquierda. Tiene que ser centro. Bien, ahora va a funcionar. Bien. Ahora bien, si elijo esto, si estiro esto. Bien, entonces está funcionando totalmente bien. Ahora sólo puedo copiar éste y presionarlo por aquí. Entonces como pueden ver no es estiramiento, pero solo puedo hacer esto y estirarlo perfectamente. Lo mismo con este. Puedo aguantar, arrastrarlo así. Bien, entonces no es marco. Entonces déjame hacer un marco. Selección Prime. Y si copio esto y puedo estirarlo así, y puedo usarlo. Pero como pueden ver, hay un problema. Los íconos que van hacia totalmente derecha e izquierda, no se quedan en el medio. Pero si hago algo por aquí, no está funcionando. Lo sé porque lo hice en marco. Pero si hago esto y si desagrupo este mundo, y ahora si estiro esto como pueden ver, está funcionando No sé qué está pasando por aquí. Supongo que con marcos, no funciona de la manera que tú lo deseas. Y voy a arreglar eso no te preocupes. Voy a arreglar eso y actualizar el siguiente video. Bien, entonces hay una cosa que quiero mostrarte. Al igual que, con restricciones, obtenemos estas líneas punteadas. Como pueden ver está presente por aquí así como por aquí. Entonces es para izquierda y derecha, como se puede ver izquierda y derecha, y esta es la parte inferior. Así que recuerda, estas líneas no son más que líneas de restricción. Bien, entonces todo esto se trata de restricciones. Hicimos esta barra de navegación elástica para nuestro móvil como para mal Sé que es un poco confuso, pero te acostumbrarás. Simplemente juega con él, juega con la restricción e izquierda derecha todo para que lo consigas. En el siguiente video, estamos combinando auto layout con restricciones, así que creo que esto va a estar en otro nivel. De alguna manera, es posible que se sienta tentado a crear un diseño complejo como ejemplo de iPad Pero aguanta ese pensamiento, es un poco mucho por ahora. Exploraremos más ejemplos juntos en el siguiente video. Entonces, ¿dónde mezclaremos las restricciones de diseño automático en el escenario del mundo real? Es un reto, pero es cosa de oro. Entonces nos vemos en la siguiente capa. Y sigamos explorando esta magia de diseño. 61. Marcos de nidos, diseño automático y restricciones en Figma: Bienvenida. En esto, estamos compinando características que ya hemos aprendido Exploraremos marcos de anidamiento dentro de nuestros marcos. Vamos a entrar en el diseño automático. También, vamos a dominar la restricción. El objetivo final es crear tarjetas reutilizables elegantes y escalables que se puedan personalizar fácilmente Entonces, como pueden ver en mi pantalla, tengo un montón de tarjetas, que solo puedo usarla, reutilizarla, o escalarla, o puedo hacer copiarla y puedo usarla en otro proyecto. Entonces en este da vamos a ver cómo crear esta tarjeta. Y para esto usamos, como te voy a mostrar algo. Por lo que usamos marcos, marcos anidados, así como diseño automático Entonces como puedes ver, estamos combinando todas las características con otra esta pancarta. Sé que este video va a ser un poco largo y algunas personas podrían pensar que es confuso. Así que antes de pus apaga tu teléfono. Vamos a saltar a este video. Entonces déjenme que lo rastrearé aquí. Empecemos con éste. Entonces para esto, voy a rastrear un frame. Podemos dibujar rectángulo, pero con rectángulo, hay características limitadas. Entonces, con los marcos, obtenemos muchas características. Entonces voy a dibujar un marco así. Entonces déjenme habilitar mis columnas. Por lo que encajará perfectamente en eso. Así. Bien. Ahora voy a agregarle un relleno. Vamos a hacerte un color normal. Entonces es solo para referencia porque el color del marco y el color de la espalda, así es invisible para mí. Actualmente, estoy usando el color natural, neuralor no un color natural Vamos a anotar este marco alrededor de bordes hasta diez. Ahora, agreguemos una imagen. Pero antes de que hagamos eso, hay una característica que quiero mostrarles. Entonces tenemos que crear esta imagen. Entonces para eso, tenemos que quitar el fondo de esta imagen. Entonces déjame mostrarte cómo podemos hacer eso. Esta es la imagen. Descargué del sitio web de Apple. Pero como puedes ver, tiene una amplia tasa de fondo. Entonces puedo ir a un montón de sitios web en Internet, pero el proceso está demasiado adentro. Puedes usar mo BG o Bago un montón sitio web, pero lleva tiempo y el proceso en En Figma, tenemos plugin llamado benzina, por lo que podemos usar este plug in para eliminar este fondo Pero para usar este enchufe. Hay un proceso que tienes que seguir como tienes que configurar una clave pk. El proceso es sencillo, basta con hacer clic en el pk de configuración. Después de eso, vaya a la página web e inscríbase. Después de registrarte, tienes que ir a cuentas. Y habrá una opción llamada paces. Ve ahí, crea nuevo pk, como puedes ver es opción por aquí. Entonces creará una clave, algo así, y copiará esta y la pegará en Benzin Sé que hay un plugin remove BG. Pero el problema con el plugin hat es que tienes que comprar después de algunas pruebas. Entonces para esto, estamos usando éste. Así que solo hago clic en el remove BG se va a quitar eso. Entonces, como pueden ver, nuestros antecedentes están totalmente eliminados. Entonces déjame redimensionarlo, redimensionarlo así, y voy a colocarlo aquí arriba así, pero tenemos que recortar este mitch vamos a Bill y Bien, las imágenes recortan ahora. Actualmente, esta imagen fuera de nuestro marco, así que permítanme llevar eso dentro. Como pueden ver, no se desta así que tengo que hacerlo. Nuevamente, ahora es t. Ahora, agreguemos un texto. Eso se va a cambiar a iPhone. Bien, entonces agregué este texto en el marco, y está en marco, marco 36. Podemos renombrarlo, así que déjame rendirme en banner. Banner para que lo podamos una y otra vez. Bien. Ahora, como pueden ver, tenemos este color naranja, así que voy a agregar eso. Entonces para eso, actualmente, agregamos un nuevo color, así que sé que no se ve tan bien en comparación con este. Déjame ir a este marco y déjame romper esto y Elige imagen, y tengo M uno. Como pueden ver tiene alguna imagen derecha, así que utilicé la función de recorte para recortar esa parte. Oh, perdón, elegí los diferentes, así que déjame mover esto. Bien, ahora se ve perfecto. Pero tengo que arreglar esto primero. El texto que quiero supone que sea 34 34 a Vamos un 24, 24, Que está usando óvalos y no quiero abrir Bien, elegiré este y lo romperé y lo haré 24. Bien, ahora tenemos texto así como imagen, así como panom así que déjame cambiar el color del mismo Voy a uno natural, uno neutral. Bien, entonces déjame agregar la restricción. Entonces, si trato de recizar este fotograma, como pueden ver, no es tan redimensionable porque no agregamos la restricción Entonces para esta imagen, la restricción va a ser centro y el poom, para este centro y la cima, es perfecto Ahora bien, si trato de escalarlo o reescalarlo como puede ver, es escalable Entonces esto es aproximadamente por ciento. Creo que el texto es demasiado grande, así que déjame maquillarlo 20. Y también tenemos que agregar el botón de tiro ahora, así que tengo que poner aquí. Bien, ahora hemos terminado con eso. Ahora, permítame agregar un texto. Y eso se va a filmar ahora y es demasiado grande. Entonces déjame hacerlo bien. Bien. Vamos elemento. Y ya vimos en un solo video. Cuando estábamos creando botones, no tenemos que agregar rectángulo o marco, así que solo tenemos que elegir este texto a la derecha y agregar para hacer layout. Ahora se puede ver que tiene relleno y relleno, pero no tiene un fiel Tiene fielty invisible. Déjame agregar un relleno y se va chip. Vamos con éste. Bien, esto es demasiado platicar. Voy a ir con éste. Y déjame agregar los bordes redondos. Tiene que ser totalmente redondo. 20. Déjame escalarlo. Entonces voy a presionar como pueden ver, él es cambio en dos escalas. Entonces ahora puedo escalarlo así presionarlo. Entonces, permítanme agregar restricciones. Va a ser centro y top center y top. Bien. Perfecto. Ahora bien, si tratamos de escalarlo o bajarlo, como pueden ver se queda en el medio. Bien, entonces agregamos el diseño automático. Entonces digamos que quieres cambiar este texto en algo más como yo copia este, así que bien. Entonces digamos que quiero agregar algo más scupons sé que lo toqué, pero perdóname por eso así, algo así Entonces como puedes ver, con auto lat, obtenemos esta característica de redimensionamiento automático con este botón. Así que no tenemos que redimensionarlo manualmente. Entonces así es como nos va a ayudar el retraso del auto. Entonces, como puede ver, tenemos disposición automática de marco. Y si quieres agregar esta imagen al marco, puedes hacerlo totalmente, así que se convertirá en enmarcar. Como puede ver, mainframe, y tenemos dentro de un marco Y también tenemos disposición automática. Esto parece un poco caótico. La tienda número diez está atascada en esta dos no se ve tan bien. Entonces primero, voy a hacer esto desagrupar esto, y voy a arrastrar esto hacia abajo Déjame ajustarlo un poco hacia abajo así. Ahora, se ve genial. Bien, podemos ajustarlo así. Ahora, se ve genial. Bien, entonces ya puedo eliminar éste, éste, y dejarme agregar lo mismo aquí. Tenemos que agregar solo muchas. así que voy a seleccionar todas esas cosas y tienes que ser tonwards Vamos a encender la columna create, y va a estar aquí Como pueden ver, se ve muy bien. Déjame apagar eso. arrastrarlo con hacia así. Ahora es totalmente perfecto. Simplemente puedo hacer click en esto, si hay alguna tarjeta de cupón, así también pueden hacer click en eso y los redirigirá a este tono de fuente. Bien. Así es como usamos marcos, marcos de naturaleza, así como auto con suficiente una cosa. Hay una cosa. Como pueden ver, hay una tarjeta que creé. En eso, hay algo que no te enseñé. Pero como puedes ver, hay una sombra de caída debajo de este iPhone. Como puedes ver, le da la personalidad a esta imagen. No se ve tan plano. Entonces podemos agregar esto a éste. Pero primero, hay una cosa que quiero decirte. Entonces, como puedes ver, estas imágenes se ven más atractivas. Si está de acuerdo conmigo, por favor hágamelo saber. Porque si voy a Amazon, como pueden ver, esto se ve asqueroso, no hay personalidad en estas imágenes. Es como si se guardaran por ahí sin motivo alguno. Y si voy a nuestro diseño. Entonces, como pueden ver, se ve genial. Tiene personalidad. Cuenta con una imagen de fondo así como estacas. Entonces estaba pensando por qué Amazon no hace eso. Deberían seguir esta técnica para crear tarjetas de producto realmente increíbles como esta. Bien, este también es re escalable así. Hay otra cosa que olvidé mencionarte como, utilizo la imagen que no tienen fondo porque esta imagen se ve genial cuando se transponen así Pero si te muestro una cosa por aquí. Entonces digamos que tenemos esta imagen, voy a rastrearla en nuestra interfaz y dejarme redimensionarla Y si trato de agregarlo por aquí. Entonces como pueden ver, no se ve tan bien. No va con nuestro barril, y se ve muy sucio. Entonces por eso usamos el método remoto. Entonces como puedes ver el producto se ve mucho mejor y al menos tiene personalidad en comparación con este. Entonces por eso utilizo las imágenes de transporte. Depende totalmente de ti. Es tu elección creativa. Si quieres usar como digamos imagen así, entonces puedes usar eso. Déjame mostrarte otra cosa. me gusta esto, déjame quitar esto, y si trato de agregarlo por aquí. Como pueden ver el color no coincide, pero vamos a ver si quito el fondo, se verá mucho mejor en comparación con este. Esa es la técnica que puedes usar para hacer que tu producto salga. Y ahí lo tienes otro principio de aplicación de esta frames, contins y auto layout Espero que esto profundice la comprensión de este concepto. Entonces ese es el envoltorio para este video. Te atraparé en la siguiente, donde continuaremos nuestro viaje hacia apasionante mundo del diseño figma. Así que ven amigos. 62. Técnicas avanzadas de diseño de automóviles Figma: Hola a todos. De esta manera, nos estamos sumergiendo en las técnicas avanzadas de figma, explorando algo así como el diseño automático avanzado Junto a eso, vamos a triplicar la altura automática del cachorro mágico, para los cuadros de texto, las técnicas te llevarán al juego de diseño al siguiente nivel, permitiendo un ajuste dinámico y tachuelas eficientes Entonces de esta manera, vamos a duplicar el diseño automático. Entonces como pueden ver en mi pantalla, tengo tres cajas. Y si yo, digamos, quiero agregar algo dentro de ella. Entonces déjenme por este contenido, y si lo presiono por aquí. Entonces como puedes ver las cajas se están ajustando por sí solas. No tenemos que apuntar o ajustarlo manualmente o no tenemos que alinearlo nuevamente ahí otra vez. Así que cuando tenemos el múltiplo a capa configurado, entonces si ponemos contener dentro, empujó el elemento en consecuencia. Ahora veamos cómo implementar esto. Tengo esta página que creé antes. Acabo de duplicar esta página. Ahora vamos a enmarcar y dibujemos un marco como este y déjame ravele mi columna Para que pueda caber dentro. Yo no, el marco tiene que encajar dentro. Déjame hacerlo invisible. Déjame añadir algunos colores. Voy a añadir algunos refrigeradores de tipo Neutro como este. Ahora bien, esta página va a ser como información general. Bien, así que primero, primero, quiero agregar una breve nota en esta página como este producto está hecho de materiales reutilizables. Entonces déjame agregarlo por aquí, y vamos a agregar algunos iconos iconos reutilizables. Entonces para eso, voy a usar íconos cuna plug in, y hay iconos bunchp bunch los cuales podemos usar totalmente gratis. Tan libre. Y para esto, voy a elegir éste. Bien, ahora déjeme reutilizar. Bien. Bien, entonces agregamos los íconos. Permítanme cerrar este punto. Y quiero que cada icono sea de hasta 20 porque esto es demasiado grande. Y para eso, voy a usar la propiedad de pregunta. Si hago clic en esto, como pueden ver esto se vuelve como icono de cadena de cadena, y si me un lugar 20. Entonces como se puede ver el ancho y altura justo al mismo tiempo, no tenemos que hacerlo manualmente una y otra vez, como en este caso. Entonces si hago clic en el icono, si selecciono esto, y si agrego el valor 20, como pueden ver, entonces es agregar solo ancho y alto al mismo tiempo. Bien, entonces tenemos estos tres iones aquí. Creo que debería hacer esto hasta 25. Bien, ahora se ve genial. Bueno, déjame seleccionar esto. Déjame alonarla apretada y solo la parte inferior. Bien, están en este momento. Entonces voy a dibujar una caja, y en eso voy a agregar este producto está hecho con al menos 20% de reciclaje contenido en peso. Bien, entonces esta va a ser nuestra simple nota para esto. Bien, entonces creamos nuestra primera tarjeta. Déjame agregar los bordes redondos hasta el ripten. Y ahora, digamos, quiero agregar algo de contenido dentro. Digamos que quiero añadir esto. Entonces como pueden ver el cuadro de texto no se extiende tan bien como el mainframe, que es este, el azul Entonces en este caso, el diseño automático nos va a ayudar. Pero antes de usar el diseño automático, hay una cosa que tengo que mostrarte la función de altura automática. Entonces Actualmente, no es de tamaño fijo. Y si elijo la altura automática, se ajustará por sí sola. Entonces si agrego algún texto aleatorio dentro de él, así, como pueden ver, el tamaño de la caja se está ajustando por sí solo. Bien, entonces terminamos con esta. Ahora queremos ajustar el marco, el marco real. Entonces para esto, ya aprendimos que tenemos que usar el layout automático. Seleccionemos todos ellos, y hagamos clic en la capa automática. Como puedes ver, el auto funciona, pero arregló las otras cosas con ellos, como la nota con los íconos. Entonces no quiero eso en esta tarjeta. Entonces, para solucionar este problema, podemos hacer lo sencillo. Podemos seleccionarlos todos. Los íconos, quiero que esta cosa se coloque por aquí. No se mueve por aquí ni por aquí. Entonces estaba desagrupado. Entonces ahora, permítanme agregar este interframe. Ahora bien, si selecciono todos ellos, y si elegí el diseño automático. Como pueden ver, se quedó ahí. Pero la caja consiguió escatimar. Es por el diseño automático de diseño automático, siempre hace esta cosa rara. Ahora, permítame agregar otra columna. Ahora bien, si trato de agregar algo dentro de esta caja, Como pueden ver, la caja se extiende, pero esta caja no se mueve. Se queda en el mismo lugar. Entonces lo que queremos en este escenario es que se mueva de acuerdo a nuestro contenido, como, como pueden ver, si agrego algo por aquí, así como pueden ver cuadro se está moviendo. Entonces queremos esta misma cosa por aquí. Entonces para eso, estamos usando el diseño automático. Entonces es como duplicar nuestra función de carga automática. Sé que el auto viejo ya es un tema un poco confuso, y estamos aplicando ese mismo botín automático en dos cosas Entonces, si no conseguimos esta parte, entonces vuelve a verla porque es un poco confusa Entonces déjame decirte cómo funciona. Entonces para eso, tenemos que usar el despido automático. Pero antes de hacer eso, permítanme seleccionar dos de ellos. Ahora ambos elementos se seleccionan como se puede ver en el panel de diseño. El marco 41 y el marco 42 son estos dos marcos, y estos son capas automáticas. El símbolo está por aquí. Ahora, tenemos que volver a aplicar el diseño automático. Se llama double auto Lot y da clic en el botón Auto Lod más botón Y déjame mostrarte en panel de diseño. No en panel de capas. Tenemos autot dentro de Autode el diseño automático anidado. Ahora bien, si agrego algo texto dentro de él. Al igual que, digamos, quieres agregar algunos detalles nuevos dentro de esta nota, como esta usa aguas reutilizables o algo así como pajitas Entonces solo puedes agregarlo y puedes ver cuadro se está ajustando automáticamente por sí solo. No tenemos que ajustarlo una y otra vez manualmente. Y esto es totalmente reutilizable. Entonces para copy, voy a seleccionar esta sola, y voy a usar Control D, atajo, y agregamos otra caja. Y esa característica va a funcionar con esta caja también. Digamos que si agrego algún texto. Como pueden ver, esto está funcionando totalmente. Bien. Bien, así que esto no se ve tan bien. Sé que este no es el método real para diseñar los detalles del producto. Digamos que hay varias cosas que queremos agregar en nuestro diseño usando estos autos, y no tenemos que diseñarlo una y otra vez o reorganizarlo o realinearlo Entonces, en ese caso, vamos a utilizar la función de diseño automático múltiple. Ahora, solo podemos agregar alguna información como detalles del producto así como esta promoción, así como esta. Y permítanme borrar éste primero. Bien, entonces hay un espacio vacío, supongo. Y déjenme agregar solo el margen de Relés Se llama relleno. Así que solo elimínelos. Oh, pero cometí un error. Puedo ir al texto, y sólo puedo hacer clic en este espacio vacío. Y siempre y cuando tenga algún lugar para trabajar. Ahora puedo agregar uso Y en las reseñas, voy a agregar, con el primero en revisar el Jordan triplex one R P. Bien, ese es un nombre bastante grande para temas Bien, entonces ahí tienes toneladas una inmersión profunda en la función avanzada de Figma Espero que este video anuncie tu comprensión y condimente la creatividad en tus diseños. Entonces ese es un rapero para esta sesión. Pero hay una cosa que quiero decirte. Conozco el auto o un poco confuso. Así que mira este video una y otra vez y practica en múltiples fotogramas. Entonces ese es un rapero para esta sesión. Entonces nos vemos en el siguiente video. Seguiremos explorando aspecto emocionante de Figma, tan feliz diseñando 63. Proyecto de clase 10: diseño que se adapta: creación de diseños receptivos en Figma: Ustedes los diseñadores, la presentación creativa obtuvieron este increíble proyecto para que flexionen sus músculos de la interfaz de usuario. Vas a construir unos botones y menús súper geniales que no van a ser innovadores, sino también llamativos. Piense en las sorpresas expansivas, estire la bondad y la respuesta a la magia. Entonces primero, primero, hay que diseñar este botón, el botón de guardia A. Después de eso, tienes que diseñar la página del producto. Sé que lo olvido, y ya me disculpo por ello. Así que no entres en el comentario y digas, olvidaste los detalles del producto. Así que haga la página det del producto y diseñe la página de detalles del producto. Después vamos a diseñar esta elástica barra de navegación móvil Así que diseña esta barra de navegación como, tiene que adaptarse a las pantallas como esta. Y después de eso, tienes que diseñar estos autos pequeños para nuestros productos. Y en esto, hay que usar restricción, diseño automático y Mr. Frames. Y al final, tienes que diseñar las increíbles tarjetas de ajuste automático. Bien. Entonces, después de completar los proyectos, ya conoces el simulacro. Toma una captura de pantalla y envía la sección de procs. También puedes enviar en las redes sociales puedes etiquetarme ahí. Entonces déjame mostrarte por aquí. Una vez más, primero, tienes que diseñar esta página de perforación del producto después ese botón de Atoll, después de estos mosaicos Los azulejos para nuestros productos, y tiene que ser restricciones reutilizables. Y luego tú para diseñar estos autos de ajuste automático. Tan listo para hacerte marcar en esta palabra de UI, así que hagámoslo. 64. Cómo hacer diseños de interfaz de usuario de sombras hermosas con Figma: Oigan, chicos, bienvenidos de nuevo. Día nos sumergimos en lo profundo al mundo de las sombras en Figma y también los efectos No cualquier sombra, sino la de más cool del pueblo, la sombra paralela y en la sombra Bug porque estamos a punto de encerrar todo su potencial Entonces, primero entendamos cuál es la sombra paralela y la sombra interior. Entonces como pueden ver, tengo dos ejemplos en mi pantalla. La primera es esta sombra paralela, y ésta es el ejemplo de sombra interior así como de ésta. Esta es la sombra paralela, y esta es la sombra interior de rop Al igual que imagina sosteniendo una carta en tu mano, la luz que la golpea crea un área oscura debajo de la derecha? Entonces esa es una sombra de cuerda. Ahora las sombras internas son como túneles, creando una profundidad dentro un objeto como un botón o una página de tarjeta. Como se puede ver aquí y por aquí también, y por aquí también. Bien, ahora, veamos cómo crear botones usando sombra paralela y sombra interior. Como pueden ver, tengo este diseño, y si hago clic en esto, como pueden ver, esta magia sucede. Cambió al modo de luz a modo oscuro. Y también tiene un pegamento para ello. Así que creamos usando sombra paralela y sombra, así que déjame cerrar esta. Y déjame decirte primero cómo funciona la sombra paralela en los botones. Bien, así que creamos esto en el botón c así que déjame rastrearlo por aquí y crear este. No suelo usar el drop más corto porque me gustan estos íconos de vuelo. Como puedes ver, realmente va con nuestro diseño. Pero si tu diseño requiere el ropshodo o en una sombra o si quieres que tu botón destaque para que puedas usar la sombra paralela Y te voy a dar algún ejemplo. Te voy a mostrar algún ejemplo donde puedes usar una sombra paralela y en una sombra. Por lo que actualmente, no tiene ningún efecto. Así que simplemente haz clic en él y ve al panel de diseño, y al final, tenemos efectos. Entonces da clic en este botón más, y por defecto, llamamos sombra paralela, y como puedes ver, le agregó algo de sombra paralela. Si me vuelvo el ojo, como pueden ver, hay una gota más corta. Y ahora hay una sombra caída. Estos son los valores por defecto, pero ahora podemos fijar los valores de acuerdo a nuestra necesidad. Al igual que, digamos, actualmente drop shadow y es cuatro, así que si la aumento, como pueden ver la posición Y está cambiando, así. Y también puedes cambiar x, así. Y también puedes esparcirlo por aquí, y puedes agregarle desenfoque. Así es como se ajusta la sombra paralela, pero me gusta así. Por defecto, se ve genial como esta. Y ahora hay una sola cosa. Se puede cambiar el color de la sombra. Actualmente, es de color negro. Puedes cambiarlo en derecho o en otra cosa, que te guste. Bien, veamos amarillo y aún azul. Entonces como vemos, tenemos sombra paralela Udebajo de este túnel. Se ve genial, azul y amarillo, realmente van bien juntos. Bien, así es como agregamos sombra. Pero ahora, digamos, quiero agregar en una sombra. Entonces en este caso, lo que puedo hacer es que primero pueda eliminar este. Porque no lo quiero. Ahora, vamos a hacer efecto. Tenemos cuatro opciones por aquí en la bolsa de capa de sombra y desenfoque embolsadora Entonces en este caso, quiero en una sombra. Entonces como pueden ver, nos metimos en una sombra. Será útil cuando digamos que tenemos dos páginas como esta, y la prototipamos Y si hago clic en esto, se convertirá en esto. Entonces déjame mostrarte el ejemplo de cómo funciona . Yo creé éste. Esta tiene una sombra paralela y esta tiene una sombra interior. Ahora si voy a prototipo y flujo, y si hago clic en esto. Entonces como pueden ver, crea ese efecto en realidad estamos presionando el botón, y hay un efecto que creé como si arrastre sobre esto, crea esa animación. Esto se ve realmente genial. Así funciona la sombra interior. También podemos hacer lo mismo, como también podemos agregarle los colores. Actualmente en prototipo, vayamos a diseñar a la sombra. Déjame cambiarlo a amarillo industrial. Y déjenme agregarle esto. Bien, déjame sumar el golpe golpe y cambiar la X e Y, así. Sé que se ve muy asqueroso, pero puedes agregarlo así. Creo que lo agrego demasiado. Bien, así. Bien, esta es una poción normal, y esto es mientras se presiona el botón Espero que entiendas la sombra paralela y en la sombra. Entonces déjame decirte cuándo puedes usar sombra paralela. Como si quieres hacer que tu botón salga, entonces puedes usar sombra paralela. Le da a tu botón la vida en la que se puede hacer clic con una sutil sombra paralela Te dice, Oye, estoy aquí para presionar. Entonces apriégame, y ya te muestro en este ejemplo, como aquí, a dónde fue. Bien. Oh, aquí. Como se puede ver. Esto tiene un drop shot, supongo, M. Como puedes ver este tiene drop shader y este no tiene sombra paralela Pero como puedes ver, imagen que tiene una sombra paralela, se ve más genial en comparación con esta porque sale en esta tarjeta. Puedes elevar tus autos desde elemento flotante rectangular plano con una sombra bien colocada. Entonces punto de bonificación por jugar con un desenfoque y propagación. Entonces en este caso, espero haber jugado con como pueden ver. Añado cuatro. Pero puedo agregar asmch quiero de acuerdo a mi necesidad. También puedo usar sombra paralela agregando contenidos como usar sombra paralela a la que separará objeto del dbro Como puedes ver, en este caso, se está separando por la sombra paralela, y hace que nuestro diseño sea más atractivo de ver No parece que esté coagulado. Bien, entonces hay algunos ejemplos de drop shot en una sombra. Entonces tengo una tarea para ti. Así que pausa este video e intenta recrear este efecto. Yo uso drop shot para esto, y uso en un corto de para esto, lo mismo con este. Pausa el video y haz estas cosas. Y te voy a mostrar cómo crear esto. Así que pruébalo por tu cuenta. Sabrás caer sombra, y en una sombra funciona. Después de eso, te mostraré cómo crear esto estoy usando efecto de luz, pausar el video y mejor. Bien, espero que lo hayas hecho y espero que aprendas a dejar caer sombra y en una sombra funciona. Ahora, déjame mostrarte cómo crear estos botones. Como pueden ver, usé en una sombra dentro de ella en una sombra. Déjame crear éste. Déjame crear por aquí. Voy a usar rectángulo. Rectángulo pequeño, y va a ser totalmente redondeado así. Y déjame tomar elipse. Déjame verificar el color. No quiero esta . Yo quiero este, y tú tienes que ser azul. Azul azul creo que se llama turco turco. Realmente me metí la pata mientras nombraba el color. Entonces actualmente no tiene ninguna sombra, así que permítame agregar la sombra interior. Le dará la profundidad. En efecto en una sombra. Bf se ve genial, así que no voy a agregar esto nada. Quiero agregar una sombra paralizante a esta. Y agregaré algo de desenfoque como este, así como éste. Sutil. Desenfoque sutil. Y ahora vamos a crear lo mismo por aquí. Déjame copiar esto, arrastrarlo por aquí y simplemente colocarlo entonces por aquí así, y voy a cambiar el color. Entonces voy a usar este, y este es y este va a ser nuestro color Neutro. O podemos hacerlo blanco. También tiene una sombra interior y esta tiene una sombra paralela. Antes de hacer eso, déjame mostrarte cómo funciona. Vayamos al prototipo, y si hago clic en este botón, tiene que esta acción, y le pongo animación inteligente, así tendrá ese efecto deslizante sobre él. Entonces déjame un flujo. Como vas a decir, está funcionando, pero actualmente, no está funcionando de otras maneras. Así que permítanme agregar un efecto clicable en este marco también. Ahora bien, si me clip en esto, como pueden ver, ambos están funcionando, pero no tiene ese efecto bajo. Oh, sí. Así que vamos a agregar ese efecto bajo. Entonces es muy sencillo. Solo tienes que ir al panel de diseño y seleccionar esta ronda. Rectángulo. Ahora, vayamos al efecto más sombra paralela, y cambiemos algo de difusión. Vamos a agregar aumentar el desenfoque, aumentar la propagación. Actualmente es negro, por lo que no es visible, y déjame cambiarlo a blanco así. Y hagamos un spread. A arriba así, y abordemos el desenfoque. Entonces como pueden ver, tenemos el desenfoque. Y si ahora voy a prototipo y es flujo de flujo, y si hago clic en esto, como pueden ver, conseguimos ese efecto de brillo en over. Entonces así es como creamos este humor oscuro y luz más usando estos patrones. Como puedes ver se ve realmente genial y es realmente aditivo. Sé que hay una app en Plast En esa app, no hay nada. Sólo hay un botón. Sólo tienes que hacer click sobre ellos, y funciona. Creo que lo vi, probablemente lo usé. No sé por qué pero lo usé. Es solo una app, y solo tienes que pulsar un botón. Recuerda, este efecto son toques sutiles que muchas veces pasan desapercibidos Pero cuando se hace bien, contrarrestan el teléfono de señal a sobre todo estético Evite ir por la borda. Si alguien nota tu drop shot, probablemente hayas ido demasiado lejos. Entonces hay algunos ejemplos que quiero mostrarte como este. Entonces como puedes ver, en este caso, usan drop shot, y son realmente sutiles. Como puedes ver, aquí usamos el mismo efecto. Este es un conjunto normal y cuando presionamos el botón, crea la sombra, y ellos usan para barra de sobretensión, así como para la barra de carga, y para este texto, así como esta barra de análisis, así como el toggle. Hicimos esto pequeño. Así que gracias por acompañarme en esta exploración de sombras. Así que recuerda, las sombras son herramientas eléctricas. Los usamos sabiamente. Al diseño evaluativo y hacerlos verdaderamente pop. Así que nos vemos la próxima vez para otra aventura Figma. 65. Cómo crear desenfoque de fondo y capas de desenfoque en Figma: Por maestros se reunieron alrededor. Hoy en día, estamos pisando bordes afilados para el ensueño al tacto con un desenfoque de fondo y desenfoque Así que prepárate para agregar profundidad, enfoque y mucha vipe artística a tu diseño Imagina que estás entrecerrando los ojos ante la pantalla de tu teléfono bajo el sol Así que eso es lo que hace el desenfoque. Es suavemente suavizar el elemento, creando un efecto hezy thal Entonces entendamos qué es el desenfoque de fondo. Entonces este va a ser nuestro proyecto dos, Acc Creé este pequeño panel como Sarge bar Creamos esta bolsa Zinger Acc In efectos, usamos pagod blur para Entonces en este constructor, lo vamos a replicar. Sé que no se supone que vayamos en el proyecto dos directamente, pero tengo que cubrir el panel de efectos, así que estamos haciendo esto en este video. Entonces entendamos qué es desenfoque de bolsa y cómo funciona en nuestra interfaz de usuario. Piensa en que es como un filtro de ventana mágico. Tu contenido principal indica nítido y claro mientras la ensacadora se funde en el desenfoque de ensueño Destaca la clave y los elementos. Hace que nuestra imagen de héroe o texto pop al difuminar el fondo y dibujar todos los ojos hacia la estrella del espectáculo En este caso, estrella del espectáculo es libro libro ahora y esta búsqueda icles. Cuando desee crear un panel en un póster de película, agregue desenfoque de ensacadora Agrega el toque de drama y misterio. También construye una experiencia inmersiva. Al igual que hace que nuestro usuario sienta que está explorando un mundo virtual con suavidad durante el borde de sus pantallas. Entonces sabemos todo sobre el desenfoque de prohibición. Entonces ahora vamos a Figma y creamos algo de desenfoque de granero. Entonces tengo esto para el marco 45. Entonces vamos a enchufar pixeles, y voy a buscar montañas. Y hay un montón de fotos, pero esta es una de mis favoritas. Tiene ese efecto amanecer sobre él. Entonces voy a colocar esta H por aquí. Cierra el sunless agrega un tratgle o también puedes dibujar un marco Actualmente, el campo es del 100%. Se puede agregar tipo de efecto de fondo en este byte disminuyendo el campo, 50%. Como puedes ver agrega el farol de libertad condicional no se ve tan bien Entonces, actualmente, voy a seguir llenando al 100%, y podemos ir a efecto. Y ahora vamos a ir a la bolsa sobre desenfoque. Sé que no hace nada, pero ahora tenemos que agregar el campo. Tiene que ser del 50%. En comparación con el fiel, se ve genial. Y déjenme añadir algunos redondeados. Bien, ahora tenemos una bolsa en borrón. Fue tan fácil. Ahora podemos agregar este desenfoque. Como se puede ver, no fue con la sensación. No podemos ajustar este tipo de desenfoque con una sensación. Se ve increíble. Hay una cosa más. agregar efector de gradiente. Se ve realmente genial. Déjame agregar color verde. Vamos a llenar. Actualmente, está en color normal, elige degradado, y conseguimos este efecto. Como se puede ver cómo la parte es transparente, invisible. Puedo crear así. Déjame elegir este color para ser vamos a elegir el rosa, y vamos a elegir este. Traumático. Yo, esto se ve genial. O hay una cosa que puedes hacerla transparente también. Actualmente, mi obsesión de esta sección, el verde 100%. Déjame que sea 50. Para que veas que ahora se ve más estético. Así es como creamos brad blur. Y hay una cosa a la que también puedes agregar un drop shot, así que saldrá. Rectángulo de golpe Agregar y quiero agregar drop shot, así que ya agrega un drop shot, y podemos abordarlo si quieres vamos a hacer que un borrón aumente el desenfoque Y vamos a quedarnos. Bien. Así. Como se puede ver se ve más fresco. Depende totalmente de tu diseño. Si quieres agregarlo, agrégalo, o puedes saltarlo totalmente. Hay una cosa más importante. Como digamos que tienes varios fotogramas. Sin marco. Imaginemos que esta es la pantalla del iPad, y quieres que lo mismo esté por aquí. Como pero esta cosa está en otro diseño. Para que puedas crear un estilo. Incluso seleccione este marco. Ir a efectos, da click sobre esto, un estilo, golpe PG. Puedes ponerle el nombre que quieras. Estoy nombrando a este golpe BG, crea un estilo, y quiero que estés Bien, entonces tengo esta Saga Voy a elegir gil. A medida que van a decir agregó foque. Entonces como puedes ver agregó el desenfoque, pero ten en cuenta, hay que disminuir el campo. Entonces actualmente, es al 100%, así que me voy a quedar con 50, pero déjame cambiar el color de este marco. Bien, así que conseguimos nuestro estilo. Bien. Todo esto se trata de golpe de fondo. Ahora, aprendamos sobre el desenfoque de capa. Entonces, este es uno de los todos sobre agregar el hellow suave alrededor del objeto específico, como poner una luz suave y suave en tu elemento de diseño Digamos que tenemos un botón como este, y queremos que este rodeado de esquinas o los bordes sean suaves. Entonces en este caso, podemos usarlo. También ayuda cuando queremos distinguir elementos superpuestos en nuestro diseño, tenemos muchas capas, y si usamos desenfoque de capa, puede crear una separación certle manteniendo estas cosas limpias y fáciles de leer También tenía la profundidad sutil, por lo que nuestros elementos o formas se ven más texturados y vivos. Entonces, como pueden ver, tengo este marco 46, y tengo este diseño de aspecto realmente genial, y lo he creado usando el desenfoque de capa. Entonces déjame decirte cómo funciona el desenfoque de capa. Voy a elegir rectángulo. Y déjame dibujarla aquí así. Lo voy a cambiar rosa Pink Que alrededor de las 30. Bien, ahora vamos a hacer efecto. Y desenfoque de capa. Si me acerco, como pueden ver, los bordes están borrosos Puedo aumentar los plurinos Como pueden ver, se funde con nuestro pagron crea ese efecto avellana Hay algunos consejos que quiero dar. No vayas a toda explosión. Comienza con un desenfoque bajo y aumentalo gradualmente hasta que encuentres el punto dulce, como en este caso. Los colores importan experimenta con los diferentes colores borrosos para que coincidan con tu tema de diseño. Bien, entonces ahora aprendes todo sobre el desenfoque de bolsa, así como el desenfoque de capa. Entonces hay una tarea. Es una tarea realmente pequeña y fácil. Así que ve a Figma y trata de recrear esto. Le apliqué golpe de capa, y el golpe de capa es demasiado 400 y tiene tres círculos. Estos dos círculos son unión, y este tiene un círculo normal, pero le apliqué un degradado, así se ve así. Sí, así que eso es todo sobre este diseño. Entonces, ¿qué es esto va a hacer y tratar de recrear esto? También te mostraré cómo hacer esto. Así que ve y haz esto. Te voy a salvar en unos minutos. Bien, estudiantes, espero que lo hayan hecho, bueno, déjenme volver a decorarlo. Bien, este va a ser mi marco para siete y déjame agregar los bordes 30. Y puedes saltarte totalmente los bordes, pero con bordes redondos, se ve realmente genial. Entonces voy a elegir el color para que sea éste, y voy a añadir un círculo, labios voy a dibujar los círculos. Pero primero, quiero que este color sea éste. Esto no es naranja, sino naranja. Ahora voy a duplicar dos circulos y este. Déjame entrar en esto. Ya sabes cómo hacerlo en esto. Simplemente seleccione ambos, y simplemente haga clic en este botón, o vaya a O U e incluso selección. Esto está aquí ahora, así que permítanme rotar 90 así. Ahora vamos a los efectos y escojamos desenfoque de capa. Vamos con 400. Ahora puedo quedarme con esto aquí. Ahora puedo elegir un color degradado. Yo sólo puedo agregarlo por aquí así. Sí, así es como creamos este arte de aspecto realmente impresionante. Fa no es solo herramienta Y. Si quieres usar esto como gs gráfico y herramienta, puedes usarlo totalmente. Sé que hay algunos errores. Se ve muy bien y esto no se ve tan bien. Pero necesitaba algo de tiempo, pero necesito terminar este video muy rápido, así que creé este. Bien, también puedes crear esto con estilo, y si quieres usarlo en tu diseño, podemos reutilizarlo una y otra vez. Bien, entonces estos efectos pueden parecer simples, pero cuando se usan pensativamente, pueden ence significativamente tu atractivo visual de tus diseños Así que recuerda, ciertamente es la clave, y cada efecto sirve un propósito específico para llevar tu diseño a la vida. Así estadio para más consejos y trucos de diseño en el siguiente video. 66. Project 11 Funky Effects Fiesta: Él Pigma fam, bienvenido al proyecto número 11. Estamos adentrándonos en un dado profundo en el maravilloso mundo de las sombras, los difuminados y esos satisfactorios botones blanditos Entonces hay algunos pasos que tienes que seguir. El primer paso es d el libro de texto y abrazar el patio de recreo. Para reglas de diseño stopi. Piense en el proyecto Pigma como su patio de recreo. No es una prueba menos exorante tener pelaje y hacer algo realmente llamativo Ahora el paso número dos es seleccionar un botón o imagen o incluso un texto. Ahora imagina dejar caer una fuente de luz por encima de ella. Pulsa ese botón de sombra en Figma y alojarlo pop de la pantalla Sé que podrías estar sintiéndote elegante, así que puedes intentarlo en una sombra a continuación. Da ese efecto fresco de tres. Haz que tu botón se vea como si estuviera curvo justo fuera de esta pantalla. Paso número tres, b explosión. Quiere resaltar algo especial, seleccionar un elemento y agregar un desenfoque de Tucholaer Crea un ciclo de ensueño sollozo alrededor del borde, poniendo ese foco en tu héroe del diseño Y también puedes usar el efecto de desenfoque de fondo. Es como una magia. Tu contenido principal encía a la vanguardia, dejando el fondo en la belleza. Es una especie de estado de sueño nebuloso, y el paso número cuatro es mostrar y contar la hora Ahora, compartamos tu obra maestra con el mundo. Toma una captura de pantalla para capturar tu magia de diseño, luego subirla a proyección y demostrar tus habilidades. Y ¿quieres difundir un poco más el amor Figma Puedes subir esto en las redes sociales. Y tú también me llevas. Recuerda, este proyecto fuma tiene que ver diversión y la experimentación No tengas miedo de conseguir credi, tweaky cosas y aprender unos de otros, compartir tus consejos, y engañar en los comentarios, y veamos qué diseño increíble se te ocurre Entonces te voy a ver en la siguiente. 67. Cómo guardar tus archivos de Figma en el escritorio y cómo acceder al historial de Figma File: Bienvenida por parte de los estudiantes. ¿Alguna vez has tenido la sensación de hundimiento que podrías perder tu maestro de diseño preciso fue Entonces no hoy, nos estamos sumergiendo en el mundo de Figma archivo Guardar Muy bien aprende a guardar tu archivo localmente. Lleve un registro del historial de versiones de cada semana. Así que no más desamor de diseño, así que solo pura tranquilidad Entonces comencemos con cómo guardar tu archivo localmente. Imagina que tu computadora tiene una bóveda elegante para tus archivos Figma Ese tipo de ahorro local lo hace. Crea una copia de tu diseño por tu cuenta. Dispositivo separado de la nube. Solo piénsalo puede darnos acceso fuera de línea. Cuando necesitamos trabajar en nuestro diseño sin conexión a internet, wom copia local para rescatar Entonces también copia de seguridad dicha. De alguna manera el archivo se corrompe. No se corromperá porque es un servicio en la nube. Funciona en la nube. Digamos, Figma tiene una falla o algo así. Entonces en ese caso, menor es copia local es septada. Así que vamos y aprendamos a guardar nuestro diseño localmente. Y como pueden ver, el panel de diseño un poco diferente porque actualmente estamos en el historial de versiones, así que déjame deshacerme de eso. Bien, entonces es sencillo. Sólo tienes que ir a archivos. Va a estar aquí, el fiigmgo En eso tenemos venta copia local, da click en él, y se descargará promediando como tenemos siete frame cyc siete páginas Y como puedes ver nuestro proyecto am es click cut virgin one, y es una pila de higos. La extensión es la fig. Si hago clic en la venta, y si voy a presentar edad, Entonces como pueden ver, es por aquí. Y se llama Clicker Virgin one, y es una extensión del FIC que puedes compartir directamente con cualquiera como a través de gmail, whatsapp telegram, y después de eso, solo pueden abrir en Figma porque este es el archivo Figma Bien, así fue como puedes ahorrar localmente. Ahora, aprendamos sobre el mundo Historia de versiones. L T del historial de versiones como máquina del tiempo para su diseño. Ver mas realizado o capa borrada accidentalmente. Así que simplemente retrocede en el tiempo y toma la versión perfecta. Para el historial de versiones, podemos ir hay un método de dos. Como primero es, puedes ir a aquí, y te mostrará primera opción es mostrar el historial de versiones. Y aquí panel de diseño, tenemos historial de versiones. Y puedes filtrarlo, puedes agregar una nueva versión hisistry Con versión gratuita de figma, obtenemos 30 días de historial de Y ahorra toda la industria al borde, pero hay que pagar. Si desea acceder al archivo antiguo. Como pueden ver está por aquí, pero tenemos que pagar por eso. Y digamos, quiero acceder al expediente a partir del 10 de diciembre, 11 punto 13:00 A.M. Si hago clic en esto. Como pueden ver ese día, acabo de crear estas páginas en la aplicación Click Card tienen cinco no te preocupes. No perdimos nuestro diseño. Si solo hago clic en el turn, me traerá de vuelta nuestra versión actual, como pueden ver por aquí. Entonces vayamos a org inustry. Y hay una cosa más. Puedes nombrar tu historia virgen. Sé que es una parte realmente genial, y es una muy buena práctica para tener. Pero el problema conmigo es que trabajo solo, así que no lo nombro. Así que me acuerdo de todo. Y no necesito entrar en la historia virgen. Digamos que estás trabajando con tu equipo y si New Joini comete algunos errores, así puedes ir a cualquier historia virgen y respaldar tu antiguo diseño Entonces eso se trata de Y hay una cosa más. Bien digamos que quiero hacer duplicado este archivo del 19 de diciembre. Puedo hacer click en el duplicado y se abrirá el archivo aquí. Déjame mostrarte cómo funciona. Digamos que quiero abrir esto el 19 de diciembre, diseñamos esto si hago clic en él y si hago clic en duplicar, duplicará archivo y se abrirá por separado, así como O aquí en el hogar. Y si 1719, hicimos estas cosas como una página de produ de diseño, y aprenderemos sobre cómo crear un botón usando Auto Sí, lo hicimos ese día. Bien. Si voy a casa, como pueden ver, esta es la copia. Muestra que esta es la copia de este y co diseño principal. A menos que quieras restaurar tu diseño. Por lo que actualmente estamos en 1919. Y si quieres restaurar este diseño, si haces clic en este, todo lo que hayas creado eliminará todo lo que hayas creado a partir de estos dos hacia arriba . Entonces nosotros que mientras presionas ese botón, ya puedes copiar enlace y puedes configurarlo a cualquiera. Entonces eso es básico. Bien, déjame cerrar esta porque necesitamos esto, y voy a terminar, y quiero mi versión actual. Entonces esta va a ser mi versión actual. Déjame mostrarte cómo lo estropeo por aquí. Como puedes ver mi desorden mientras diseñaba app. Siempre hago eso. Al crear un nuevo proyecto, siempre pienso que esta vez, no voy a equivocarme, pero cada vez que me equivoco así. Bien, entonces hay algunos puntos que hay que recordar. ahorro local no es un reemplazo para ahorrar en una nube, pero es una gran renta segura adicional. Virgin history solo mantiene un número limitado de versiones anteriores, así que guarda sabiamente, y compartir archivos locales requiere enviarlos manualmente a diferencia de Cloud ese diseño Bien, ahora, aprendamos en qué caso necesitaremos Historial de versiones. Digamos que borraste accidentalmente un componente crucial o un diseño de largueros de sección completa, vamos a eliminar ergomnupage Entonces en esa versión, todavía te permite viajar atrás en el tiempo y restaurarlo salvándote de nuestro trabajo así. Sé que a veces tomamos decisión de diseño, te arrepientes como elegir el color incorrecto o la forma incorrecta. Así que no te preocupes solo revierte a versiones anteriores, así que donde estaba, sigue siendo perfecto Debido a la virginidad podemos experimentar con confianza como podemos probar nuevas ideas audaces o experimentar con un diseño diferente sin temor a perder tu obra original Si las cosas van volver a una versión estable y empezar de nuevo. Juega con diferentes estilos visuales o prueba diferentes elementos de diseño. Sin preocuparte por el desorden de tu proceso, historia virgen te da la libertad explorar e iterar Debido a la historia virgen, podemos colaborar de manera muy fluida. Puede rastrear los cambios realizados por varios miembros del equipo y volver fácilmente a la versión anterior si alguien escribe accidentalmente un trabajo importante Compare diferentes iteraciones de diseño y discuta cuál funciona mejor, incluso si fueron creadas con días o semanas de diferencia También resuelve conflictos o malentendidos revisando quién realizó qué cambios y al asegurar una comprensión clara de la olación del diseño Entonces eso es todo sobre archivos locales y además de historia virgen. Espero que aprendas eso y no practiques como yo. Por favor, guárdalo como una historia virgen, y nombre, por favor nombra. Sé que este es mi estilo, pero no copies mi estilo, y no estoy ocioso en la historia virgen. Entonces cámbralo como digamos que aprendes hoy lo que aprendimos hoy. Se me olvidó. Bien, aprendemos sobre sombras y sombras de caída en las sombras. También hicimos estos botones. Se puede hacer historia de versión llamada efectos. Aprenderemos efectos. Entonces ahí tenemos amigos, archivo Pigma subíndice Ahora iremos adelante y diseñaremos con confianza. 68. Componentes de Figma Los conceptos básicos: Bienvenidos de nuevo a los estudiantes en este do, nos estamos sumergiendo en el poderoso mundo de los componentes en Figma. Por lo que los componentes son un elemento reutilizable que viene con una serie de beneficios, convirtiéndolos en una parte esencial diseño y flujo de trabajo de Figma Entonces, como pueden ver, mi interfaz se hizo un poco más limpia porque tiré todo por aquí. Ya sabes, siempre tenemos ese tipo de habitación. Siempre tenemos cosas innecesarias en eso, así que hice este lugar como habitación innecesaria y volví todo por aquí. Bien. Ahora, comencemos con el diseño, y vamos a crear algunos componentes. Entonces como puedes ver, tenemos este botón llamado Agregar al carrito. Actualmente, vamos a agregar componente sobre eso. Para hacer el componente f, solo se trata de seleccionar elemento. Actualmente, estoy eligiendo botón. Y sólo tienes que hacer clic en este botón. Eso es crear componente, y se puede utilizar el atajo Control Alt K para crear componente. Entonces, como pueden ver, ahora es componente. Entonces, como puedes decirle componente o no, como puedes ver en panel de diseño, cortamos este logo. Al lado del fran impreso, es decir cuatro diamantes. Entonces como pueden ver, el color del marco también cambia si hago clic en esto, como pueden ver, este es un azul, pero el color del componente siempre es este morado. Una ventaja significativa de los componentes es la reutilización Cuando voy al panel ácido como éste, como pueden ver el inpurito tengo este botón de actuar como componente Puedo arrastrar esto fácilmente a cualquier parte de mi diseño así. Y cualquier cambio que haga al componente maestro, se reflejará a la instancia de todo. En nuestro caso, este es el componente maestro, y estos son los niños. También se me llama como un instante. Entonces, si hago algún cambio, digamos, si lo redimensiono, también cambia el tamaño en cada página Si cambio el punto, también se trabaja con eso. Como pueden ver, hice 14, y en todas partes, ahora son 14. Bien. Ahora, digamos, quiero hacer algunos cambios por aquí. El texto debería ser como digamos a estas alturas, y esto debería ser pago. Entonces, como pueden ver, si hice algún cambio en los componentes hijos, los componentes principales se quedan como están. No cambia. Digamos si hago cambios en el componente principal en pad así. Sólo el componente que no edité que consiguió cambio, y otro componente que sobrescribí antes, permanecen igual. Entonces déjame hacer esto. Cómo orgías diferenciar tu componente principal y el instante es que cuando voy al panel de capas y si seleccionas la instancia, como puedes ver viene con un diamante holler, y esto viene con un diamante Como se puede ver, tiene un diamante. Digamos que el diseño es demasiado grande y no sabes cuál es tu componente maestro. Entonces quieres ir a tu componente maestro para hacer algunos cambios como si quieres redimensionarlo Entonces en ese caso, digamos, actualmente estás en esta página y página de pago, y solo quieres ir al componente Maestro. Puedes simplemente lamerlo y seleccionar ir al componente principal e ir al componente principal. Como puedes ver, viaja al componente principal que está por aquí en la página del protector. Y también puedes nombrar tu componente. Sé que no nombro nada, pero es muy buena práctica nombrar a tu componente, sobre todo cuando estás tratando con múltiples instancias. Le ayuda a identificar rápidamente diferentes versiones o variaciones de sus componentes. Y los componentes no se limitan a elementos simples como botones. Puede convertir el diseño complejo en componentes. Por ejemplo, puedes convertir tu logotipo en componente, así puedes convertir este logotipo en componente así como las tarjetas en componente. Puede crear cualquier cosa en componente como esta barra de navegación en componente. Y hay una cosa. Digamos que hicimos algunos cambios como el cambio de color, déjame convertirlo en degradado. Si hago esto en gradiente, y por alguna razón, no me gusta, y solo quiero restablecerlo todo. En este caso, puedes hacer uso que solo puedes seleccionar elemento y derecho y simplemente hacer clic en el reinicio de todo. Se restablecerá todo, cosas como el texto del teléfono, así como el botón de color opio En términos simples, las instancias se crean duplicando el componente maestro, haciéndolas copias de convento con la creación de componentes maestros adicionales Comprender y aprovechar los componentes es fundamental para maximizar las capacidades de diseño maestro Entonces, a medida que te vuelvas acostumbrando a este flujo de trabajo, te encontrarás creando mano de obra o elementos reutilizables que enuncian Entonces estudiantes, eso es todo acerca de los componentes. De la siguiente manera, vamos a aprender más cosas sobre los componentes. Así que hay muchas cosas que puedes crear varían componentes como puedes crear variantes. Puedes hacerlos como en modo oscuro o modo de luz. Puedes crear un burton específico en panel de diseño para cambiar su color de acuerdo a tu necesidad. Entonces estudiantes, eso es todo acerca de componentes. Y los voy a ver en la siguiente. 69. Actualizar, cambiar, editar y restablecer componentes en Figma: Todos, de esta manera, estamos profundizando en la complejidad de actualizar, cambiar, restablecer y empujar escrituras para componentes y puntales para componentes y Y además, tengo un atajo nifty para alternar entre la luz más y la oscuridad Más, así que vamos a atar Entonces yo anteriormente, aprendimos sobre cómo crear componentes. Elemento selectivo, vayamos a este Mnuva y simplemente haga clic en el componente create Y en el panel act, obtuvimos nuestro componente, y podemos simplemente arrastrarlo y usarlo como instancias como esta. Ahora, exploremos cómo actualizar instancias. Si quieres hacer cambios en instancias específicas, puedes encontrar el componente maestro seleccionando así y puedes ir al componente principal, y este es el componente principal, y puedes hacer un ajuste y se reflejará en estas instancias. Pero, ¿y si has hecho un cambio directamente las instancias y quieres empujar esos cambios de vuelta al maestro Entonces ahora, puedes seleccionar las instancias como esta. Pero lo que quiero hacer es que en este caso, digamos que nuestro cliente quiere que mi página de cuenta sea un modo oscuro. Entonces voy a cambiar esto al modo de conversación así. Como puedes ver, la barra de navegación no es tan visible. Es visible, pero el color es oscuro y quiero que este sea blanco. Entonces voy a elegir pelear así, pero los íconos no son visibles. Entonces quiero cambiarlo a negro. Estoy sosteniendo Mayús, selecciono todos los iconos y selección de color y etiqueta Ahora, quiero actualizar todas las cosas que tiene esta barra de navegación, como el panel blanco así como el botón es etiqueta. Entonces quiero toda la actualización en este componente principal. Entonces en este caso, lo que puedo hacer es que pueda simplemente li derecho en él e ir al componente principal y empujar cambios al componente principal. Y como puedes ver en componente principal, este es el componente principal, cambiarlo todo, el color del panel, así como el color del icono. Por ahora, no quiero que mi componente principal sea este, así que voy a deshacer esto por ahora. Digamos que recibió una llamada de un cliente y el cliente dijo, no quiero este color. Quiero que el color sea oscuro. Entonces en este caso, lo que puedes hacer es que solo puedes seleccionar el componente justo sobre él y restablecer todos los cambios. Como puedes ver, cambia todas las cosas en componente principal así. Bien, entonces quiero mostrarte una cosa por aquí, así que déjame hacer otra copia de mi cuenta. Y así esta es la instancia y ésta también es instantánea. Pero voy a borrar esta. Y quiero que esta parte sea un modo claro porque este es el color oscuro y oscuro no va con esta, así que quiero hacer esto en modo luz así, y voy a cambiar todo a negro así. Actualmente, quiero adjuntar esta, media de adjuntar, de instancia adjunta. Ahora es un marco novedoso. No es un componente o instancia. Quiero crear esto en componente. Al mismo tiempo, quiero crear esta forma como componente dos. Al mismo tiempo, podemos crear múltiples cosas en componentes. Vamos a seleccionarlos los dos, y si voy a los componentes, y obtuvimos la opción llamada crear múltiples componentes. Y ahora si voy a actuar panel. Entonces, como puedes ver, tenemos múltiples componentes. El primero es un modo de luz, y el pronto el modo oscuro. Esto es un ahorro en tiempo real, especialmente cuando se trata de elementos de diseño similares. Y te ayudará cuando quieras cambiar un mismo elemento en diferentes elementos. Actualmente, estos son los componentes maestros, por lo que no va a funcionar en eso. Digamos que tengo otro marco como este, y quiero cambiar esto para estar en esto. Entonces en este caso, lo que puedo hacer es que pueda sostener t y arrastrar esto a este oscuro nodo Naba Si lo vuelvo así, siempre y cuando lo vea cambiado, puedo hacer lo mismo con este. Lo estoy sujetando y arrastrando a este componente y vertiéndolo en el componente Pero si trato de hacer esto en nuestro componente principal, no va a funcionar. Será sobre esa nioba. No va a cambiar el lugar, como lo hizo con las instancias. Entonces déjame mostrarte de manera sencilla. Entonces digamos que tenemos esta instancia por aquí, y nuestro cliente quiere que esto sea más oscuro. En este caso, podemos sostener Alt y podemos elegir nuestro oscuro más, arrastrarlo sosteniendo derecho le y simplemente volcarlo. Como pueden ver, se intercambia en esta oscuridad. Y recuerda, no funciona en los componentes principales. Estos son los componentes principales, por lo que no va a funcionar. Y estas son las instancias, por lo que trabajará en ellas. Y también puedes cambiarlo desde el panel de diseño. Entonces, si haces clic en tus instancias así y quieres cambiarlo al modo de luz. Se puede ver que el menú aparece como el marco 49, y podemos cambiarlo a modo de luz así. Por lo que te mostrará todos los activos. Por lo que actualmente estamos en mi cuenta, y también tenemos opción de detalle del producto. También podemos cambiar en eso también. Y lo mismo con este, digamos que esta es la instancia, y quiero cambiar esto con esto para que pueda simplemente sostenerlo y arrastrarlo y volcarlo. Entonces como puedes ver, también funciona con un botón para cortar. Entonces estudiante, espero que entiendas cómo restablecer componente, cómo actualizarlos, cómo anularlos, así como qué aprendemos a intercambiarlos. Así que eso es un wrapper para nuestro explon de actualización y gestión de componentes en Figma. Así que te estadística por motivos y trucos en el siguiente video. 70. Es imposible eliminar los componentes principales en figma (Consejos y trucos de componentes): Bienvenidos de nuevo, todos. En esta puja, vamos a aprender sobre trucos y consejos de componentes. Entonces trucos como cómo podemos restaurar nuestros componentes eliminados, cómo podemos importar o exportar componentes maestros de otros archivos de diseño a nuestro archivo de diseño principal, así como algunas otras cosas. Entonces comencemos. Lo primero, primero, te mostraré lo que sucede cuando intentas eliminar tu componente maestro. Entonces, como puedes ver, este es el componente maestro en nuestro diseño. También está en capas, como se puede ver los cuatro diamantes, ese es un componente maestro, y esta es la instancia. Entonces digamos de alguna manera eliminé mi componente maestro. Entonces digamos que estaba diseñando algo, y no estoy al tanto, este es el componente maestro o esta es la instancia. Como puede ver, si estamos en un marco, no hay diferencia en instancia y componente maestro. Pero si hago un seguimiento de esto afuera, como pueden ver, está escrito por aquí, también podemos ver el símbolo. Por lo que no es visible en el marco. Entonces digamos, supongo que esta es la instancia. Y si borro éste, como pueden ver, también se borró del panel de capas. Pero ahora quiero traer eso de vuelta. En este caso, tenemos que tener la instancia. Entonces con la ayuda de la instancia, podemos restaurar eso. Así que solo tenemos que hacer click derecho sobre él y podrás ir al componente principal y restaurar el componente principal. Da click en esto como puedes ver, nuestro componente está de vuelta. El componente maestro está de vuelta, y también está por aquí en menos panel. Ahora consideremos fuente de instancia de otro archivo de diseño, tal vez de la comunidad Figma Ahora, digamos que trajeron una instancia en lugar de un componente. Entonces si pego ese componente por aquí, perdón, instantáneo. Y si no sé de dónde importé esa instancia. Entonces y quiero volver a ese expediente. Entonces en este caso, lo que puedo hacer es que pueda dar click en esto y dar click en él e ir al componente principal. Y en realidad abrirá ese archivo, y te mostrará de dónde sacaste ese componente. Entonces como puedes ver, está resaltando de esto tienes esta instancia. Ahora pasemos a la tercera. Ahora, digamos que tenemos este archivo de iconos, y si voy a editar objetos más como en este, y si hago cambios, como pueden ver, sucede con la instancia también. Pero déjame salir del objeto para más. Déjame copiar la instancia de esta copia, y si la pego por aquí en mi click cut app design file, y si la cambio en el componente principal, si cambio algo como esto, así como puedes ver está sucediendo con este archivo. Pero si abro mi aplicación de tarjeta cli, no está por aquí, así que no está actualizada Por lo que los cambios solo están disponibles para el archivo principal. Entonces si estamos usando biblioteca, en ese caso, va a hacer cambios, pero actualmente estamos importando de otros archivos de este archivo a este archivo. Entonces no se está actualizando por aquí. Ahora, toquemos el concepto que no se pueden eliminar componentes o partes de ellos. Cuando borras algo dentro una instancia como ocultar una capa, no desaparece por completo Simplemente se oculta. Entonces déjame mostrarte cómo funciona. Entonces creamos este botón de navegación, y como puedes ver, esta es la instancia, y este es el componente principal, y si elimino algo de la instancia, como puedes ver en el panel de capas, no se borra. Está oculto. Simplemente puede hacer clic en esto y vuelve a ser visible. Puedo hacer esto así por aquí. Pero si quieres eliminarlo de forma permanente, tendrás que ir al comonente principal y eliminarlos ahí. Entonces si borré por aquí. Así lo puedes ver totalmente eliminado ahora, y tampoco está oculto por aquí. Entonces déjame deshacer esto. Entonces esos fueron todos los trucos y consejos sobre los componentes. Espero que esto arroje algo de luz sobre por qué los componentes principales y sus partes no se pueden dilatar fácilmente en Y comprender estos matices te ayudará a navegar por el mundo de los componentes de manera más efectiva. Así que indica para el próximo video, donde profundizaremos en el activo más emocionante de los componentes Figma. Feliz diseño. 71. Mover los componentes principales y cómo organizar tus componentes: Bienvenido diseñador Max, hoy, vamos a discutir las mejores prácticas para los componentes principales organizados en Figma. Entonces actualmente, podríamos estar lanzándolos por todas partes, pero hay una forma más organizada de manejarlos, y te mostraré mis mejores prácticas, que son ampliamente hechas por muchos diseñadores. Entonces, en tu panel ácido, podrías tener un componente local como este, mi cuenta desde este botón así como esta barra de navegación inferior, y así como algún componente como este tirado en el espacio vacío, y algún componente podría estar en el marco como este. Entonces la clave aquí es dejar el componente principal en la propia página. Crearemos componentes separados de la página cuatro y usaremos instancia como esta, usaremos instancia en nuestro archivo de diseño. Entonces primero, voy a crear algunos componentes. Actualmente, tenemos algunas tarjetas, así como tenemos la barra de navegación superior, así como tenemos la barra de navegación inferior. Entonces actualmente, no les di ese nombre, por lo que son sólo un marco. Entonces déjame nombrarlos. Entonces como pueden ver, este es el frame 31, así que les voy a nombrar Bien, así que nombré algún componente como este. Yo le puse el nombre a este logo, pero este es el marco ahora. También nombré a esta, las tarjetas pequeñas, así como a esta, las cartas grandes, así como a este botón de Atovd Y nombro este botón tov, y esta es la parte inferior sin barra, y esta es la barra de navegación superior. Porque queremos usar nuestro componente principal fuera de marco, y queremos usar instantáneo en un marco. Déjame mostrarte así. Esta es la instancia, y este es el coon principal, así que lo probaremos. Mantendremos esto por aquí siempre que necesitemos este componente, para que podamos usarlos como una instancia instantánea como esta. Déjame convertirlos en componente componente. También eres componente. También eres componente. También eres componente. Bien, entonces hice algún componente en Hmpitch tengo este cuatro componente en intro pitch, tengo este logo, así como fueron tener el Ahora, vamos al panel de capas. Y vamos a hacer clic en este icono más. Les voy a nombrar componentes. Y podemos simplemente moverlos de aquí. Como este es el componente. Ahora movamos nuestro componente principal a esta sección de componentes. Entonces actualmente está vacío, y este es nuestro botón de navegación. Botón de navegación superior, pasemos a los componentes. Si voy a componentes, como pueden ver, donde está, creo que bien está por aquí, marco 48. Y vamos a moverlas todas. Pero primero, tengo que desatacar mi componente principal de los marcos así Bien, déjame sacar esto también, y déjame traerte la instancia. Lo mismo con este. Entonces, por ejemplo, saqué tres componentes. Entonces, seleccionémoslos todos. Para que puedas presionar shift, mantener presionado shift, seleccionarlos todos, hacer clic derecho sobre él y simplemente hacer clic en el tono discutido y los componentes Ahora, aquí tenemos todos los componentes. También puedes organizar de buena manera, como la única sección para botones o solo sección para barras Nap, única sección para autos. Déjame mostrarte cómo en esta página, como puedes ver, se organizan muy bonitos. El primero, tienen Barra de Estado, iPhone P max. Después de eso, tienen iPhone pro solo después de tener iPhone Pit plus. Entonces se organizan de bastante buena manera. Y como pueden ver nuestra organización. Entonces no tenemos tanto de componentes. Solo te estoy mostrando cómo es una buena práctica mover componentes a la página de componentes y luego usarlos como instancia. Entonces, digamos, quiero agregar al botón de tarjeta por aquí. Entonces en este caso, solo puedo ir al panel de activos y solo puedo buscar el botón de agregar a la tarjeta, y solo puedo arrastrarlo así. Puedo abordarlo por aquí en mi diseño. Bien, entonces esta es muy buena práctica. Entonces, como puedes ver, nuestro panel de diseño se ve más limpio y organizado. Y si voy a componentes, como pueden ver, nuestros componentes maestros también se organizan muy bien. Entonces esto es mucho mejor que tener la difusión en varias páginas. Entonces, si tienes varias páginas archivadas, es una buena idea mantener una página central para todos los componentes principales como este. De esta manera, son de fácil acceso y no desordenarán tu diseño Y ten en cuenta que puedes usar la funcionalidad de búsqueda a favor para encontrar componentes rápidamente, como lo hicimos anteriormente que agregamos al botón de corte, o si quieres buscar logo, solo podemos escribir logo, y nos mostrará el logo, y podemos simplemente arrastrarlo y podemos agregarlo en nuestros diseños. Esto es especialmente útil si prefieres un estilo organizado más relajado. Y hay otro consejo es usar una barra espaciadora en una barra de búsqueda para enumerar todos los componentes. Entonces déjame mostrarte cómo funciona. Entonces como puedes ver en la barra de búsqueda, no tenemos nada. Entonces, si escribo espacio, como pueden ver, todos los componentes se sobrepasan así, y podemos simplemente arrastrarlo Sé que esta es una forma extraoficial hacerlo, pero es muy fácil Como puedes ver, tenemos todos nuestros componentes y los podemos ver y simplemente podemos rastrearlo así y podemos usarlo en nuestros diseños. Simplemente nos puede ayudar a ver todos nuestros componentes a la vez con la necesidad de marcos, sin la necesidad de los marcos. Así que recuerda, a medida que tu proyecto crece, y especialmente si estás colaborando con otros, mantener una estructura organizativa para tus componentes principales se vuelve crucial. Entonces, ya sea que prefiera una página bien organizada o realmente en una funcionalidad de búsqueda, encuentre el método que mejor funcione para usted. Espero que este video sobre componentes principales organizados haya sido de ayuda. Entonces estadio para más trucos y consejos como este. Entonces esos son todos los trucos y consejos y organizar nuestro archivo de proyecto así como nuestros componentes en archivo separado. Entonces eso es todo acerca de los componentes. Como nosotros los organizamos. Hicimos una prueba separada para ello. También aprendimos el truco y los consejos para ello. Entonces esos son todos acerca de componentes. Así que vamos a apoyar, y los veré chicos en la próxima. 72. Figma mejores prácticas pone nombres a las capas y se mantiene organizado: V diseñador. En esto, estamos buceando en el mundo de la convención de nomenclatura. Específicamente, el uso de barra de Hardware en Figma. Probablemente hayas notado se está usando la convención, y hoy, exploraremos por qué es esencial y cómo puede ayudarte a organizar tus componentes de manera efectiva. Algunas personas podrían haberlo visto y algunas personas no así déjame mostrarte cómo funciona la convención de nomenclatura en el panel ácido o para el componente Como pueden ver, tenemos esta línea dinámica de barra de estado abierta , y si extiendo esto así. Como pueden ver, tiene barra de estado barra diagonal iPhone 13 barra P. Y si voy al panel de activos y como pueden ver, si voy a estado y Inicio, el nicon Usan flash para ello, tienen barra de estado casa después de ese estado B y H Ba slash ba slash phon 13 Entonces nos están diciendo que este es para phon 13, y en que tienen componente principal, tenemos mini, luego P y P max. Entonces vamos a hacer lo mismo para organizar nuestros componentes. Entonces si voy a componentes, como pueden ver, creé este botón tap Mo. Déjame borrar esto para primero porque vamos a aprender a crear ese juego de palabras Vamos a actuar panel. Y como pueden ver está desorganizado. Está desordenado en todas partes, y no tenemos múltiples botones Entonces como puedes ver, tenemos esta barra inferior, y digamos que también estamos diseñando una barra de navegación en modo luz. Entonces actualmente esta es la instancia, así que la voy a adjuntar. D adjuntar instancia, y voy a nombrar a esta barra de navegación barra diagonal, tienes que ser un modo oscuro, y este tiene que ser una luz más Esta es la luz, esta es la oscuridad. Entonces vamos a ver nada cambiado en el panel de actos porque no hicimos de éste un componente. Entonces déjenme seleccionar éste y hagamos un componente. Y ahora, si voy a componentes. Entonces como pueden ver, llegamos a Nava primero es el modo luz Lo siento, el primero es más oscuro, y el segundo es el modo claro. Sé si estás confundido porque el color es diferente, así que déjame elegir uno neutro. Bien, entonces ahora está actualizado. Como pueden ver, este es lo usaremos para el modo oscuro y este lo usaremos para el modo de luz. Entonces podemos hacer lo mismo con estas cosas. Entonces déjame elegir el segundo color para ello. Voy a ir con el rojo . Bien, se ve genial. Bien, primero, tengo que hacerlo de apegado. Entonces déjame nombrarlo. Slash para el modo oscuro, y este tiene que estar en modo de luz Bien, ahora este es el solo un marco. Déjame convertirlo en componente. Ahora si puedo ir a componentes, y hay un botón para cortar, y si hago clic en esto, como pueden ver , tenemos dos botones. El primero es el modo oscuro y el segundo es el modo de luz. Bien déjame mostrarte un ejemplo. Agregamos estos íconos de Basilea. Si voy al panel de activos, como pueden ver, también nombran a sus íconos así. En primer lugar, tienen contorno. Después de eso, vuelven a tener contorno y después de eso marcas. Si voy a esto, como pueden ver, todos los íconos de marca presentes por aquí, Así que si alguien importa este archivo a su diseño, sabrán como este es para marcas, y esta sección es para general como iconos generales y esta es para navegaciones como esta Esta convención de nomenclatura se vuelve aún más crucial cuando se trata de variables Que explorará en los próximos videos. En resumen, la convención de nomenclatura de cuatro barras en FIMMA es una poderosa herramienta para Ayuda a crear una estructura ich, haciendo que sea más fácil para usted y su colaboración navegar y encontrar los componentes que necesita. Así que indicamos en para el siguiente video donde vamos a atar en las variables hasta entonces feliz diseño. 73. Proyecto de clase 12: bloques de construcción: dominación de componentes en Figma: Mis alumnos, es tiempo de proyecto. Bien, entonces hasta, aprenderemos mucho sobre componentes como cómo crear componentes, cómo agregarlos en páginas separadas, cómo organizarlos en modo claro y humor oscuro. Entonces, primero, vamos a crear un espacio de estilo para la creación de nuestros botones. Así entrega Figma, marcas limpiaparabrisas nueva página llamada componentes Es nuestro botón HQ. Sin botón HQ, pero vamos a poner todos los componentes por aquí y organizarlos. Ahora, segundo, es el momento de deshacerlos diseñar superpotencia y artesanía y agregar al botón de corte también, y luego puedes convertirlos en modo oscuro así como en un modo de luz como Bien, entonces estos botones son dúo dinámico. Así que mantengámoslos juntos usando slash hacia adelante. Nombrar conson en este panel de activos. De esta manera, siempre estarán listos para festejar así. Y ahora después de completar tu tarea, captura la captura de pantalla y envíala a nuestro panel de proyectos. Y también puedes hacer dos botones así como este, versión más pequeña de ellos. Entonces ya agregamos el diseño automático. Entonces déjame copiar esto Bien, entonces tengo que de adjuntarlo primero. Bien, D adjuntar. Déjame cambiar el nombre de este pequeño carrito botón de luz para barra diagonal y pequeña Pequeño y otra vez, nuestro slash. Fimo, sabemos que este es el más pequeño y déjame crear otro así, y voy a hacerlo Esto es luz, éste va a ser oscuro. Ahora, cambiemos el color. Actualmente, tiene azul. Entonces déjame hacerlo rojo. Ahora, hagamos un componente. Bien, entonces tengo que nombrarlo así. Actualmente, es botón a botón de frío. Después de eso, agregué más luz, pero no tengo que agregar más luz, así que solo puedo agregar pequeña y tiene que ser ligera. Bien. Si hago clic en el espacio vacío, como pueden ver, se agrega en el botón de agregar a cortar. Entonces ahora sabemos que este es el modo oscuro, este es el molde ligero y esta es la luz más, y podemos hacer lo mismo por aquí. Entonces voy a hacer así. Pequeño y oscuro más. Así que vamos a hacer clic en el espacio vacío. Bien, entonces no lo agregó porque es un marco, así que déjame crearlo componente. Bien, ahora se agrega, el modo pequeño oscuro. Bien, entonces estas son las instrucciones que tienes que seguir para crear. Entonces primero, crea un componente y luego mueve tu componente a este tono de componente así y ahora crea un oscuro más y claro más como este. Y ahora también vimos cómo crear una versión más pequeña de ellos y tomar una toma de pecado y subirla a nuestra precisión. Así que esa es la Figma fantástica. Acabas de dominar el arte de crear elementos clicables para impulsar la acción Si puedes experimentar con ellos, puedes agregar diferentes colores, puedes agregar diferente fuente. Así que elección totalmente creativa. Entonces eso es para este proyecto. Así que sigue esta instrucción y envíeme. Entonces por. 74. Componentes y variantes de Figma para principiantes: Los diseñadores, en esta opinión, vamos a explorar el concepto de variables en Figma. Variables o variantes como ahora las llama Figma. Nuestra forma de combinar múltiples componentes en una sola unidad, lo que facilita la administración un cambio entre diferentes estados o estilos. Entonces como pueden ver tenía esta ventana en mi pantalla, y si pongo el mouse sobre ella, como pueden ver cambia a este tarplclor y si hago clic en él, se Entonces yo esto vamos a hacer esto usando variantes o variables. Bien, entonces déjame cerrar esto. Déjame ir al diseño. Entonces estas son las variantes. Ahora, aprendamos a crear componentes. Entonces déjame borrarlos primero. Bien. Entonces como pueden ver, tengo este botón de corte de anuncio. Actualmente, es instancia. Entonces como puedes ver es instantáneo tiene ese botón de diamante. Pero es hueco y éste es un componente porque tiene un diamante de cuatro en su interior. Bien, entonces quiero que esto sea componente, no una instancia. Si quieres crear variante, tiene que ser un componente. Entonces déjenme de adjuntarlo primero, D adjuntar instancia. Bien. Ahora es un marco. El marco se agrega corte. El nombre del botón está en el corte. Si selecciono esto y podemos usar el atajo Control K, y también podemos usar este botón. Ahora, es una variante. Lo siento, es un componente. Bien, entonces si voy al panel, este panel. Entonces, como pueden ver, este es el componente ahora. Entonces quiero crear variante. Entonces voy a rastrear esto como una instancia, y voy a volver a adjuntarlo y decir el color en así azul, azul oscuro. Creo que también se le llama como cola azul. Realmente me confundo con los colores. Entonces si conoces el color, por favor avíseme. Bien, entonces tenemos dos botones, pero este es el componente y este es el marco. Entonces déjame convertir esto en componente. Eres componente. Bien. Ahora bien, si yo steelt ambos, como se puede ver en los paneles de diseño, tenemos la opción de combinar como variante Entonces si hago clic en esto, ahora se convirtió en una variante. También se indica por las líneas punteadas, el cuadro de línea punteada. Ahora bien, si voy a activos, como pueden ver, tenemos este botón de agregar a la tarjeta, y hay un número dos, incluido dos variantes. Y si arrastro esto por aquí en esta sección de categoría, admito que se puso por aquí así. Y si voy al panel de diseño, como se puede ver un botón add to cut, esta es la variante. Este símbolo significa variante. Y el inmueble nace actualmente. Podemos cambiarle el nombre y actualmente es por defecto porque renombramos esto, supongo. Entonces déjame cambiarle el nombre, así que déjame ir a asset porque ambos son predeterminados. Entonces por eso no está funcionando. Pero como pueden ver, si duplico en él, la propiedad quedará por defecto. Entonces quiero que esto sea como digamos. Ella. Puedo llamarlo cómo y esto para que sea normal. Puedes ponerle el nombre que quieras. Estoy nombrando esto por ahora. Ahora bien, si voy a esta instancia, que la arrastramos de nuestra variante, y como pueden ver, la conseguimos igual de normal Bien, creo que lo hice de manera opuesta. Puedo cambiarlo fácilmente, así que solo puedo seleccionar esto y puedo cambiarlo desde aquí. Tiene que ser ella. Y hay que ser normal. Bien, entonces tenemos dos variantes. Bien, eres normal. Si copio este holding alt, y ahora puedo cambiar a, y tenemos tercero. Vamos a crear una tercera variante, pero vamos a protipar esto Estoy creando flujo simple. De esta sección, tienes que ir aquí. Si hago clic en esto, y actualmente estoy colocando animación inteligente en cinta llegamos a la animación inteligente, pero quiero que esto sea mientras se cierne Si toco esto mientras estoy flotando, cambia el color. Sé que la posición no es tan buena, así que déjenme rayar a los dos Signo T en la parte inferior, a. Estoy teniendo mi ratón encima, así se vuelve. Bien, ahora vamos a crear una tercera variante. Es muy fácil, creando una variante. Puedes hacer una cosa como digamos que creé esta otra cosa porque no sé cómo crear una variante. Simplemente lo arrastré como instancia, y ya te dije que tiene que ser compuesto Entonces D adjuntar por ahora donde está DH. Y déjame ir ahora al componente de cuna. Y puedo simplemente arrastrarlo dentro de él. Ahora es una variante. Sé que es muy mala práctica. No lo uses. Lo estoy usando porque solo quiero mostrarte algunos trucos aleatorios. Ahora bien, esta es la variante. Déjame cambiarle el nombre de algo. Actualmente, es propiedad uno y por defecto. Sólo dilo estaba pensando De. Déjame escribir hecho. Y actualmente son propiedades. Déjame ir a auxilio así sabré cuáles son los demás. Giro normal. Bien, entonces es genial. Ahora, pero tengo que cambiar el color del turno. Bien, voy a ir. Eso es un buen ácido. Actualmente, tenemos tres variantes, así que déjame arrastrarlo y pro tienes que ser un. voy a colocarlo por aquí. Ahora bien, si voy a Ptype On tap, tienes que cambiarte a rojo Juguemos esto. Si bien el descenso es oscuro y si hago clic en esto, se vuelve rojo. Ese es el beneficio de hacer varianza. Bien, entonces aprendemos a crear varianza usando muy hardware. Ahora, aprendamos a crear varianza usando formas muy simples. Sé que hay muchas formas en las que puedes crear varianza en figma, como si hago clic en esto, aparece un botón más y solo puedo hacer clic en él, y creó una variante Sólo puedo ir a esta sección de color y puedo cambiarla a neuro colores como este Puedo usarlas directamente. Y como pueden ver, también se actualiza. Eran tres, ahora son cuatro. Puedo golpearlo así. Y quiero que me llenen porque no lo nombramos. Bien, entonces déjame cambiarle el nombre. Bien, estaba pensando. Sólo blanco. Estoy dando nombres totalmente malos, lo sé, pero sólo estamos aprendiendo. No estamos trabajando en proyectos reales. Entonces mientras trabajas en octal, por favor, da el nombre propio y real Eso significa algo. En este caso , no significa nada. Pero una cosa, actualmente, es propiedad, pero podemos indicarlo como. Este es el botón. Cambió para todo bien. Bien. Siempre que alguien haga ejercicio dije así, esa persona lo hará, este es el botón y tenemos cuatro variantes en él, como qué blanco. Bonito. Oh, hay una cosa. Con variante, podemos crear algo realmente increíble. Déjame mostrarte una cosa. Déjame crear dos botones. Voy a elegir el rectángulo, rectángulo pequeño y dejarme alrededor de 20. Y vamos a cambiarlo en primero va a ser. En segundo lugar se va chippy. Hagámoslo componente. Y estos dos son componentes ahora. Combine como variante. Bien, ahora son padres. Bien, entonces puedo renombrar esto actualmente es propiedad. Puedo cambiarle el nombre a esto como encendido y bro van a estar apagados. Déjame mostrarte por qué estoy haciendo esto. Si voy a acid ple, tenemos componente y tenemos dos, y si arrastro esto, obtenemos este toggle porque nos ponemos y apagamos. Entonces, como puedes ver, eso es genial. También podemos cambiarle el nombre como digamos. Actualmente en. Podemos agregarlo como un verdadero y falso. Entonces voy a ver con algunas palabras, puedes crear así. Funciona sólo con O de verdadero falso y no, esas cosas. Puedes usarlo para crear casillas de verificación o puedes usar para crear déjame mostrarte una cosa como estos botones, puedes configurar esto como un on y esto como a. hay otro método, puedes crear una variante como voy a elegir elipse y chi el color o es aburrido. Déjame elegir una rosa. Bien, entonces no es algo de fuego rosáceo. Bien. Entonces actualmente es un frame, así que déjame crear un componente. Y si selecciono en él, obtenemos la opción llamada propiedades en sección de diseño. Y si hago clic en el botón más, obtenemos cuatro opciones como variante boon, un intercambio y texto Entonces por ahora, quiero crear una variante. Así que la frecuencia resi variante ahora, y sólo puedo hacer clic en ella y puedo cambiar el color Así que actualmente pescan algo. Ahora lo cambio a primaria tres, o puedo cambiarlo en es así. Ese es el otro método para crear padre. Este método alternativo de creación de variables es útil, especialmente cuando quieres comenzar con un combate e inmediatamente sumergirte en la varianza actual sin un paso separado. Recuerda, hay múltiples formas lograr el mismo resultado en firma, encuentra el desbordamiento que más te convenga. Así que eso confunde nuestra intrusión a variables o variantes Son increíblemente útiles para manejar diferentes estados o estilos dentro de una sola compota De la siguiente manera, estamos profundizando en las variables, pero estamos creando variables multi vers up. También se le llama como variables multidimensionales. Así estadio para eso y feliz diseñando a mis amigos, 75. Propiedades de los componentes de Figma: Crea dinero para las mentes para la aventura Figma. Conquistaremos una característica súper genial llamada varianza multidimensional. No te preocupes. No da tanto miedo como suena. En realidad es como un truco de magia que te hará diseñar la vida más fácil y fresca. Así que imagina un escenario, has diseñado un botón impresionante, pero necesitas una versión diferente para diferente situación, clic aullando o diferentes tamaños. Es un acto de malabares. Lo sé. Pero con varianza multidimensional, es como tener 1 millón de pequeños clones de tu botón cada uno repartido para una ocasión Entonces como pueden ver, he creado estos botones, usando múltiples variantes, y nombré a los botones, todo esto llamó un botón. Entonces como pueden ver en mi panel de activos, tengo estos botones. Si hago un seguimiento de esto así, anteriormente solo podemos cambiar el color. Pero ahora somos capaces de cambiar el tipo. Al igual que, actualmente, puedo cambiar a botón de ir a tarjeta, así como a comprar ahora, así como si selecciono una tarjeta y quiero que esta esté en rojo. También puedo hacer eso, así como lo mismo con el botón de comprar ahora con un botón de ir a tarjeta. Entonces, como se puede ver con variantes multidimensionales, las posibilidades son ilimitadas Ahora vamos a desglosarlo. Piensa en tu botón de moda. Entonces en este caso, agregar a la tarjeta es mi botón favorito. Ahora imagínalo usando diferentes sombreros, un sombrero de copa para cuando alguien se cierne sobre él, un sombrero vaquero para cuando se encienda y tal vez un sombrero de conejito funky para una talla más pequeña Entonces ese es el poder de las variantes. Ahora, vamos a saltar a figma y vamos a crear algunos botones. Bien, entonces déjame borrar esta y empecemos desde este cero. Ya diseñé algún botón, así que sólo voy a copiar. Ellos así, éste y éste. Actualmente, todos son instancia, así que voy a seleccionar todos ellos y dar clic derecho y D instancia adjunta. Bien, entonces ahora son todos un marco. Bien, entonces déjame hacer una matriz ahí primero. Así que a cortar botón por aquí. El primero va a ser ple. segunda va a ser rodada ahora, pero supongo que tengo que cambiar el color ofic que sea azul Y después de eso, vaya al botón de tarjeta y vaya a tarjeta si voy a menos panel, y si hago clic en esta incidencia, estos son diseños, pero está en el marco. Entonces quiero que esto sea un componente, así que voy a hacer que todos ellos componentes. Y hay una cosa más. También se le puede nombrar botones, slash, azul, así y lo mismo con este Derecha. Si voy al panel de activos, puedo ver el valor así. Aprendimos en videos anteriores, y podemos hacer lo mismo con este. Pero este es un proceso muy largo. Entonces ahora tenemos todos los componentes, así que vamos a hacerlos como variante combinar como variante. Bien, entonces estas son todas variantes ahora, y hay un problema. Entonces como puedes ver, el nombre para todos ellos es el mismo, por lo que es g como error. Bien, ahora cambiemos la propiedad de ellos. Entonces primero es agregar a tarjeta y por defoliar esta propiedad uno, así que voy a cambiarlo en una Y mientras lo nombraba, agregué azul, así que por eso está mostrando azul Pero no quiero esta. Bien, quiero este. Pero bien, cometí un error. Este tiene que ser tipo, y este va a ser sumado a pero. Bien, entonces este va a ser un tipo add to card también. Ahora, agreguemos otro tipo. Bien, entonces esta es una tienda ahora, así que voy a llamarla tienda ahora. O mismo éste. El tipo es tienda ahora, y este va a ser ir a la carta este. Bien, entonces terminamos con los tipos. Ahora, agreguemos colores. Así que vamos a seleccionar botones, y voy a añadir una nueva variante, y voy a nombrar a esto un color. Bien. Entonces por ahora, voy a mantener el valor para estar por defecto. Aquí los vamos a cambiar. Si hago clic en este color de Acanc es predeterminado, pero podemos nombrarlo en pista Esto va a ser azul, esto va a ser. Si ahora hago clic en la tienda ahora y si elijo el strop Accoti azul Esto es lo correcto, así que voy a elegir, igual con este, azul, para que no tengamos que teclearlo una azul, para que no tengamos que teclearlo y otra vez. Lo mismo con este. Bien. Azul, y éste es el rojo. Así creamos una variante multidimensional. Entonces si voy a botones, y si selecciono esto y me dejo eliminarlos, así entenderemos cómo funciona. Bien, ahora vamos a agregar en las páginas, las páginas de categoría. Bien, ahora, categoría uno. Voy a colocarlo por aquí. Lo mismo con este, lo mismo con este. Sólo estoy costando los ins. En solo la parte inferior, y voy a agregar solo el centro también. Bien, entonces todo está ajustado ahora. Entonces lista, en esta página, quiero que esto se lea mientras estoy pasando el mouse sobre ella Y después de hacer clic, tiene que convertirse en este botón de co guardia. Y después de volver a rondarlo, tiene que volverse rojo Bien, Card, hay que leerlo mientras se ciñe sobre ella. Bien, así es como funciona la variante multidimensional. Sé que crear esta variante multidimensional suena confuso. Entonces déjame mostrarte una vez más cómo crearlos. Entonces solo voy a usar un rectángulo y vamos a agregar, y 1205 está bien. Entonces agreguemos alrededor de los 20 años, y voy a hacer cuatro de ellos y menos cambiar de color de ellos. Entonces voy a cambiarlo a un degradado y tú vas a estar vamos a elegir un rosa. Y mira éste Pero quiero que esto sea un 50 sitios, así como tú uno, también, 50 y colorc cien así, y vas a ser gradiente Bien. Bien, entonces estos no son un frame, así que tenemos que convertirlos en frame. Control G. Y este control G. Control G. Control G. Bien. Entonces estos son marcos. Ahora, ahora vamos a crearlos en componentes. No tienes que convertir en frame. Puede convertirlos directamente en componentes. Entonces déjame mostrarte. Entonces como pueden ver, esto no está en un marco, así que simplemente puedo hacer clic en el componente. Pero para una mejor comprensión, los creo en un componente. Bien, entonces componente componente y componente, y déjame cambiarlo a una varianza. Combinar como varianza. Bien, entonces ahora son variantes. Ahora, agreguemos propiedades. Entonces vas a ser una talla. Bien. Y para ser lo que digo, grande. R para volver a ser un grande. Pero podemos cambiarlo a rosa grande. Pero podemos volver a crear una variante. Entonces déjeme hacer eso, pero nos va a dar el error. Entonces hay muchas cosas que tenemos que hacer. Bien, así que agreguemos otra propiedad. Déjame ir a este llegar la cámara padre, clic en ella y dar clic en este botón más, clic en variante, y ahora vamos a agregar un color, y voy a dejar valor por defecto. Bien, entonces ahora tenemos un color. Entonces voy a cambiar este tema. Sé que hice una mestaw de hechizos así que por favor, ya sabes, eso. Entonces vas a ser rosa, y vas a ser un degradado y pequeño pequeño es de tamaño par. Esta va a ser pequeña también. Entonces voy a elegirlo de aquí, una pequeña y rosa. Bien, entonces si voy al panel de activos, va a decir, somos comparables a, pero voy a renombrarlo. Y si hago un seguimiento de esto actualmente grande, digamos pequeño y quiero que esto sea rosa. Entonces así es como funciona la varianza multidimensional. Bien, entonces aprenderemos dos cosas como creamos desde cero, así como creamos usando elementos pre hechos como botón ddoate, y también creamos desde Bien, entonces déjame decirte los beneficios de usar variantes multidimensionales. Primero, nos da la eficiencia de diseño. Así que no más botones de ping como locos. Las variantes mantienen todo organizado y consistencia. Después de eso, tenemos superhéroe de escalabilidad. Sé que necesitamos 100 ofbsizes en botones, no hay problema. Con variantes, podemos manejarlas con facilidad. Podemos crear varias versiones de esto, como una grande y pequeña como esta, y solo podemos elegirla. Entonces quiero que esto sea grande. Y la tienes botón grande. Mientras se trabaja con el equipo, compartir el diseño se vuelve muy sencillo, todos saben exactamente ve cada botón en cada situación, así como el desarrollador obtiene una hoja de ruta clara de toda la opción de botón, haciendo que la implementación sea fluida como la mantequilla Recuerda, si encuentras un enfoque multidimensional, un poco abrumador al principio, puedes apegarte a una variante simple con unas pocas dimensionales, que creamos en video anterior. Entonces es un avance de topping, así que tómate tu tiempo para elaborar el concepto para que puedas volver a ver este video nuevo hasta que te conviertas en un maestro en si varianza Si cometes un error en el orden de nomenclatura, no te preocupes. Se puede cambiar más tarde haciendo clic en el componente y establecer y reorganizar la dimensión, como en las propiedades y podemos cambiarla en grande y todo eso La varianza multidimensional puede parecer un poco intimidante al principio Pero con la práctica, los encontrarás una poderosa herramienta para organizar y agilizar tu sistema de diseño Así que no dudes en experimentar y ponerte cómodo con esta función avanzada. Entonces estudiantes un gran trabajo en conseguir este poder, y los veré en el siguiente video. Tan feliz diseñando. 76. Proyecto 13 Variantes: Aquí sus detectives de diseño, ¿recuerdas el increíble poder de los extremos multidimensionales que descubrimos la última vez Así que prepárate para poner a prueba esas superpotencias en este alucinante desafío fuma Entonces este es el proyecto 13. Hoy en día, estamos construyendo una pequeña parada de botones como ajuste de conmutación para un rey o reina de diseño. Entonces nuestra tarea es crear este botón atto, botón ir a cortar, así como el botón de comprar ahora, y así como las torres mágicas Bien. Entonces en mis paneles de botones, también creé una versión más pequeña de botones de tienda. Entonces si voy a am botones, y si uso shop y quiero que esto sea pequeño, puedo usarlo así. Así que creé esto usando la función multidimensional. Entonces también puedes hacer eso. Y también creamos este interruptor tbl, y solo usamos el encendido y hacia arriba y creamos este impresionante interruptor total s. Así que también tienes que hacer esto Sé que podrías estar sintiendo AmterG salvaje con variación extra Botón de diferentes tamaños, iconos o incluso tomas personalizadas. Así que haz tu cambio de herramienta grove cambiar de forma o a menos que la característica secreta oculta. Entonces toda la instrucción también se da en pedófilo. Abre ese pedófilo y crea un botón par, buen botón par, botón de tienda, así como un interruptor tougle, usa un tipo de color de diferente tamaño Y recuerda, usa tus superpoderes. Camionetas Ultiimon o un arma secreta. Sé creativo, deja volar tu imaginación y no tengas miedo de experimentar, probar diferentes colores, estilo o animación tal vez. Y tener esta es tu oportunidad de diseñar una dinastía o botón e interruptores que des royal ovación de pie Entonces, una vez que se haya completado la dinastía de diseño, tome un tiro de hijo y envíelo a procesión Y recuerda, si estás perdido o necesitas impulso de diseño, vamos a preguntar. Incluso puedes volver a ver el video tantos como necesites. Siempre estamos aquí para compartirte. Así que van valientes diseñadores. Mi tu botón sea audaz, tu toggle sea suave y tu habilidad FIV Ma, renuncia Y recuerda, la práctica hace la perfección. Y con un poco de creatividad, estarás construyendo la dinastía del diseño en poco tiempo. Entonces ese soy yo, firmando. Gracias viendo, y los veré en la siguiente. 77. Cómo diseñar un campo de entrada interactivo en Figma: Recordaremos todos esos increíbles trucos de componentes que aprendimos como transformarlos, restablecerlos y hacerlos bailar como títeres en las cuerdas Bien, tal vez no esa parte de baile. Nos aferraremos al casco espacial estadounidense porque este video trata sobre lanzarte la próxima galaxia de la maestría de figma, así que estamos construyendo nuestra propia obra maestra de cuenta Así que no más formas de registro aburridas o sección de perfil vacía. Así que vamos a crear una página de cuenta que sea tan única como tú. Entonces seremos como digitales por pintar con nuestros pixeles y cordones. Excepto que nuestra obra maestra viene con los formularios de registro y los botones de validación de conmutadores. Bien, así que vamos a saltar a Figma y vamos a crear nuestra cuenta mi página de cuenta Entonces actualmente, esto está vacío, así que voy a usar este componente. Bien, en panel de activos. Añadí esto como componente. Entonces esto está por aquí. Entonces voy a rastrearlo así y agregarlo por aquí, y esta va a ser nuestra barra de estado de iPhone copiar y pegar. Entonces en la página de cuenta, vamos a agregar como nombre, M LID, número de teléfono, datos de la tarjeta, así como fecha de nacimiento. Así que vamos a crear eso. Entonces habilité cuadrículas en la página de mi cuenta. Y quiero líneas por ahora y cambio y arrastre una línea. Y no es visible. Entonces déjame cambiar el color. Así acento Nell. O tomemos una gris, así que quiero una gris como esta. Ahora quiero un texto que va a ser nuestro nombre. Temporal, elegiré simplemente solo nombre. Bien. Y va a haber una etiqueta como esta. Déjame cambiarlo a etiqueta. Esta es una etiqueta, y déjame cambiarla. No sé por qué está tomando Pro display. Creo que hay algo que me falta por aquí. Voy a cambiarlo a 14, y esto es S, así que vas a ser un 20. Permítanme crear esta cosa en componente, seleccionarlos todos y crear un componente. Déjame arrastrar este componente maestro arriba de este marco porque quiero colocar este componente en nuestra página de componentes. Está por aquí. Voy a llamarlo formulario de entrada. Bien, entonces podrías estar pensando por qué creé esto en página de mi cuenta y por qué estoy arrastrando esto Cumbo Porque con esta página, puedo obtener las cuadrículas, y puedo diseñar esta cosa de acuerdo a Como puede ver, señor De. Déjame ir a la entrada de forma y línea. Permítanme rastrear eso hacia esta columna. Ahora encaja perfectamente. Déjame sacarlo fuera del marco. Creé esto en componente. Cortemos esto y agreguemos esto a nuestros componentes. Componentes, y esto es un control de ritmo en blanco V. Lo agrego por aquí. Pero antes de hacer eso, quiero cambiar la restricción. Se va a dejar y arriba. Vas a estar en el lado izquierdo y abajo. Vamos a elegir abajo. Y vas a ser escala. Bien, que sea escala. Ahora, quiero que esto sea en variante. Puedes usar dos opciones como puedes usar esta, así como propiedad y variantes. Entonces voy a ir con éste. Aren ahora tenemos botón plus. Entonces el primero va a ser el nombre, segundo, va a ser el ID de correo electrónico. En tercer lugar va a ser el número de teléfono, luego la información de la tarjeta y la fecha de nacimiento. Bien. Entonces primero va a ser lo mismo que es, luego segundo va a ser el ID de correo electrónico. Este va a ser nuestro formulario de entrada. Sé que tengo que hacer algunos cambios. Vivo en la India, así que mi código es más 91, y después de eso, diez dígitos. Voy a escribir algunos dígitos aleatorios. No lo sé. No sé, sin motivo, se quedó atascado en esta altura automática fija. Quiero cambiarlo a auto así y lo mismo con información de bacalao. Podemos escribir números aleatorios como cero cero, cero, 012, cuatro, cinco, así Creo que creé este extra, así que voy a salir con este. Bien. Entonces ahora vamos a nuestra página de cuenta, esta, y vayamos a los comparans de activos y activos. Tenemos formulario de entrada. Vamos a arrastrarlo por aquí. Bien. Déjame duplicar esta. Este va a ser nuestro número de teléfono. Esto va a ser tal vez. Esto va a ser lo que yo diga ambos. Vamos a este panel de diseño, y como puedes ver, este es nuestro formulario de entrada. Actualmente, la propiedad es una y esta es la predeterminada. Sé que no nombré. Es una práctica muy brillante. Déjame volver a formar y déjame cambiarle el nombre a esto. Primero, va a ser un nombre. Bien, entonces déjame escribir primero la propiedad. Entonces este va a ser un tipo como ¿qué tipo de campo de texto es este? Este va a ser el nombre. Nombre Esto va a ser correo electrónico. No, agregue ID. Este va a ser el número PH Esto es Cardin y esto va a ser Creo que agregué un botón más. Bien. Entonces esto va a ser DOB. Esa es la fecha de nacimiento. Bien, yo agregué todas esas cosas. Ahora, vamos a PIPMA y vamos a sandm Tipo de formulario de entrada actualmente su nombre Quiero que esto sea un correo electrónico. Después de eso, quiero que este sea un número de teléfono, y esto tiene que estar en la información, el último tiene que ser DOB. Esa es la fecha de nacimiento. Entonces voy a decir que fue muy fácil crear la página de información de la cuenta. Bien, esto era lo básico. Ya sabemos cómo crear componente y varianza, todo eso. Entonces esto fue lo básico. Ahora, agreguemos una varianza multidimensional así como un botón de alternar. Digamos que no puedes cambiar tu número de teléfono en esta aplicación. Entonces en este caso, lo que podemos hacer es que podamos cambiar el color como podemos hacerlos deciles. Entonces vamos a los componentes y vamos a crear una variante. Entonces voy a ampliar esto y copiémoslo aquí. Y déjame hacer un discípulo. Entonces voy a mantener esto igual que éste. Bien. Entonces voy a entender, esto es un discapacitado. Significa que nadie puede cambiar este número cuando lo agregas por primera vez. Podemos añadir una nueva variante. Déjame ir a entrada y variante plus y va a ser stratus y el valor debería estar encendido porque quiero ese botón alto Si no te pones así, y si estableces este centro por defecto y si eliges crear propiedad, y si intentas agregar encendido y apagado en propiedades nuevamente, no funcionará. Así que hay que tener en cuenta, que agregar dentro y fuera valor aquí antes de crear esta propiedad. Vamos a crear una propiedad, y esto va a estar encendido, y esto va a ser de agregar nuevo apagado, y este va a ser nuestro número de teléfono. Si voy a mi app, ahora quiero mostrar que esto es lo deshabilitado, así que solo puedo deshacer clic en esto Como puede ver, esto está deshabilitado. La parte numérica no está resaltada. En este do al crear cuenta, estamos usando todas las cosas que aprendimos en componentes de varianza anteriores, así como componentes multimion, así como el botón stalk . Hay una cosa. Digamos que agregas tu ID de correo electrónico así y olvidaste agregar punto, y has agregado algo más D. Comp esto es un error, así que no funcionará. Quiero demostrar que este es el error. Entonces voy a cambiar el color de la misma. Esto va a ser un rojo. Así. La línea también debe ser roja. Voy a cambiar esto a este color y lo mismo con este. Bien, así, pero tenemos que añadir otra cosa como error. Déjame ir al formulario de entrada, clic en el botón más, terminar, y esto va a ser coloreado. Y podemos crear esto en botón togle, así que vamos a crear eso o simplemente podemos escribir dos o falso o S o no Entonces para esto, voy a usar. Y crear propiedad. Esto significa que alerta es sí, pero esto no lo es, así que voy a agregar no, eres error, entonces tienes que tener Sí. Si voy a mi alta fidelidad y digamos ¿ cuál fue esa? Bien, M LID, y vamos a crear esto. Digamos que el usuario escribe otra cosa, agregó D y se le olvidó ese punto. En este caso, podemos habilitarlo y se mostrará al usuario, le pondrás algo. Hay que cambiarlo. Bien, esta es nuestra página de cuenta. Sé que podemos hacer muchas cosas, pero solo quiero mostrarte el poder de los componentes variados componentes multidimensionales y así como la potencia de ese simple botón togle como este hora de diseñar, es crucial considerar la usabilidad y la confiabilidad de la forma Ajustaré el espaciado, lo revisaré en mi teléfono y me ajustaré para un aspecto más limpio Pero no tengo iPhone en este momento, tengo 100, así que probablemente lo revisaré en el teléfono de mi amigo, y voy a teak esto quiero cambiar otra cosa, así que voy a hacer eso como digamos que colores no visibles tanto Lo haré más transparente o agregaré algo más filtrado, 50%, así. Se ve más fresco. La potencia de los componentes con varianza brilla cuando necesitamos actualizar nuestro diseño Como podemos ver en los componentes, tenemos varios tipos de actos como tenemos un elemento que es error, uno está deshabilitado, así como éste está activo. Sé que estos son algo un poco complejo entender para principiantes. Pero cuando practiques una y otra vez, entenderás y podrás crearlos en un segundo, y podemos simplemente arrastrar y soltar así y podemos cambiar el tipo de color, todo esto. Bien, así. Entonces este ejemplo más avanzado, demuestra el potencial de las variables multidimensionales. Entonces, en conclusión, hemos abordado la creación de forma utilizando componentes y variables En FGma mediante la implementación de esta técnica, puede diseñar de manera eficiente formas dinámicas y adaptables para una experiencia de usuario fluida Pero antes de dejar este video, quiero mostrarte algo. que no tengas que volver a crear un formulario, y otra vez, puedes usar a alguien más trabajar así. Puedes ir a la comunidad Figma y solo buscar entrada de los campos, y obtendrás este, ingresarlo en Figma, y solo puedes copiar esto y solo puedes copiar Déjame copiar esta copia. Y donde esta mi app. Bien, entonces Pet. simplemente usar por aquí en lugar de este nombre, y puedo cambiar el color, y viene con todas las características. Te muestro campo así como icono, así como icono derecho así como icono de error. Así, ya viene con todas las características, así que no tenemos que crearlo desde cero, sino que estamos aprendiendo desde cero. Te estoy enseñando cómo crear todas estas cosas desde cero porque cuando estemos usando esto, ¿ sabremos qué significa esto? Es por ello que se archiva esto, por qué está activo, por qué está deshabilitado, y por qué tiene error más icono y todo eso. Hay otro ejemplo. Esto es como el botón de inicio de sesión de Google para registrarse. También puedes usar este diseño ine. Puedes copiar esto y puedes iniciar sesión en la UAP usando Google Estas son algunas buenas prácticas para implementar en el diseño de UA, si quieres ahorrar tiempo y si quieres usar otro activo directamente, y puedes personalizarlas. Después de eso, ya sabes cómo personalizarlo y todo eso. El propósito principal de este video fue implementar todas las cosas que aprendimos en videos anteriores dentro de una sola cosa, como en cuenta. Amigos, sigan practicando y experimentando, y los atraparé en el siguiente video. Feliz diseño. 78. Proyecto de clase 14: dominio de cuentas y categorías: diseño para el flujo de usuarios en Figma: Si mi fantástico para doble dosis de delicia de diseño. De esta manera, nos estamos embarcando en la misión elaborar dos páginas de tarjetas épicamente, la página de cuenta y la página Así que prepárate para liberar el poder de las camionetas de componentes y tu creatividad sin límites para construir una experiencia de compra que sea fácil de usar y visualmente impresionante Pero primero, recapitulemos lo esencial. El primero son los componentes. Estos son sus bloques de construcción utilizables. Entonces déjame mostrarte Carns. Estos son tus bloques de construcción, como el botón de uniforme de registro y las tarjetas de producto, piensa en ellos como ladrillos lego para tu diseño, agrégalo para ensamblarlo en una estructura increíble, luego variante. Creamos estas variantes como error o deshabilitar. Las variantes son arma sc, te permiten agregar variedad y personalidad a tus diseños con solo unos pocos clics, y también tienes que usar multi dimensional. Estas variantes superpotenciadas le permiten combinar múltiples propiedades a la vez, creando diseños dinámicos y dispositivos que agregan diferentes a los diferentes tamaños Entonces en la página de cuenta, hay que comps briqu diseñados para relle componentes como creados así Estilo experto, color y topografía. Crear elementos dinámicos que se agreguen a los datos del usuario, multidimensionales. Y agrega un ícono para sentir el color para obtener magia extra de tuop. Y en categoría, te proporciono todos los íconos en los recursos. Entonces échale un vistazo y agrega esas cuentas. Después de completar la página de cuenta y la página de categoría, captura un diseño con tranvías con captura de pantalla y envíalos a la sección del proyecto Conozco a algunas personas mis acciones o algunas personas no lo harán, así que no entres en pánico, refiérase al video o llévame para obtener orientación. Estoy aquí para ayudar y no adelantarme a abrazar la rarosidad. Experimenta y diviértete. Esta es tu oportunidad de crear algo verdaderamente único. Así que disfruta el diseño del viaje se trata de explorar y aprender. Celebra tu proceso y diviértete con la explosión. También proporciono todos los pasos en el archivo de ejercicio. Acude a él y lee todos los pasos. Toma en show up así y pega en la sección de proyectos, y también puedes compartirlo y puedes llevarlo allí. Así que toma algunas hojas de fregona, llénala de creatividad y entremos en el mundo del diseño plicar No puedo esperar a ver las increíbles páginas que vas a crear. 79. Cómo diseñar un diseño de IU de notificaciones en Figma: Estudiantes, ¿estás listo para conquistar otra frontera del diseño Hoy, estamos configurando nuestras sesiones en el reino crucial de la aplicación que es la página de notificación de la tarjeta de clic. Recuerda, todas esas lecciones épicas, nos hemos metido en nuestros cerebros Figma, como la variante Cerence, como el grupo de marcos, además de actualizar Lo que sea, escalamos todo en nuestro cerebro. Entonces todos están a punto de unirse en sinfonía de sesgo de diseño. Pero esto no es sólo un ejercicio técnico. Estamos elaborando los héroes unsng de la experiencia estadounidense, la función de guardián abierto, el canon de la confindad de las buenas noticias, y tal vez algunas no Pero oye, transparencia. Tu usuario abre la app clicker y Bam, ellos creados por una página de notificaciones Eso no es sólo un funcional sino un festín para tus ojos. Piensa en un mensaje claro y consciente, reproduce animación completa para actualizaciones importantes, y tal vez incluso aspersión o tarifa personalizada Estamos hablando de señales visuales que llaman la atención sin gritar como comprar ahora o hacer clic en el botón de reclamo Equipaje tan suave que guía al usuario hacia la siguiente compra. Y un touchtp inesperado para mantener las cosas interesantes. Así que vamos a ponernos en la figma y diseñemos nuestro panel de notificaciones Entonces como pueden ver, diseñé este panel de notificaciones, así que vamos a diseñar algo nuevo. Y como pueden ver, también actualicé éste, así que vamos a ver cómo podemos hacer esto. Como pueden ver, tengo lienzo en blanco marco vacío, y en eso tengo algunas Cosas como notificación, Mficon agrego Acabo de copiar pegado este, y cambié el texto, Mification así como agregué este perfil Si alguna persona quiere ir a su perfil, solo puede escribir aquí y pueden ir a esta sección, mi cuenta. Y por cierto, agregué todos los contras porque antes de eso se veía demasiado aburrido. Entonces pensé que agreguemos algunos íconos, así le dará algo de personalidad. Ahora, como puede ver, se ve moderno y tipo de utilizable. Bien. Diseñemos mi página de inducción. Quiero un marco, marco y déjame dibujar un marco. Pero permítanme habilitar la arenilla las columnas. Sé que no usamos tanto rosa porque creo que cubriría esa cosa en una o tal vez en una sección de avance. Tan directo para eso. Quiero que esto sea 15 bordes redondeados y así como menos alex algo de color. Actualmente, no tiene relleno de color y quiero que este color sea un grado todavía. Se supone que Pro estaría por aquí. Así. Y ya creamos un gradiente, pero creo que voy a hacerlo, así que probemos ese gradiente porque ya creé ese donde está nuestro campo. Bien, lo es. Y creamos este gradiente. Entonces usemos este. Bien, entonces déjame incapacitar las columnas. Bien, entonces me comí este ícono de trofeo por velocidad, que puedas descargar desde ahí. Bien, ahora agreguemos algo de texto en este panel de notificaciones, como festival. Esto es digamos mientras está pasando, tal vez Navidad o tal vez Año Nuevo. Por lo que el festival ofrecerá solo para ti. A lo mejor te vamos a dar algunos cupones, y ellos pueden atenuarlo y pueden conseguir algo 100% apagado como calcetines. Lo sé, cada vez que voy a este sitio web de com, dicen 100% de descuento, pero no hay nada que esté 100% de descuento. Es 100% de en algunos casos, como, hay que comprar algo realmente caro. Entonces en ese caso, obtendrás algo gratis, pero esos artículos no valen tanto. Se trata de una leva. Bien, entonces voy a agregar la oferta del festival Valley. O aquí. Digamos que este es un cupón scratch, como los usuarios escriben en él y lo rascan. Por lo que revela algo código código de cupón, y pueden canjear mientras compran algún producto Entonces déjame agregar que aquí sosteniendo Alt Control V, rasca con una victoria. Bien, así que elegí esta forma hace escritura fina algo así como que no soy capaz de pronunciarlo Aga bien. Bien. Hace bien, supongo. Sé que me equivoco, así que puedes decirme en comentarios tal vez en redes sociales. Bien, entonces digamos que estamos espeleando algo por 100% de descuento. Así que consigue hasta un 100% de descuento. Y agreguemos un botón, como tienda. Así que diseñamos shop robon supongo. Entonces tenemos este O en botones y tipo es comprar ahora y ple y quiero pequeño. Bien, entonces esto es muy práctico. Digamos que esto funciona en ambos sentidos. Al igual que el usuario puede rascarlo o bien puede hacer clic en Shopbt y algún producto específico estará al 100% de descuento Bien, entonces, como pueden ver, creamos esta tarjeta de aspecto realmente impresionante. El color no va muy bien este. Entonces déjame cambiar este color. Bien, entonces me voy con azul. Entonces esto ama genial en comparación con el anterior. Y ahora podemos agregar un logo, nuestro logo de click card por aquí. Entonces estoy presionando para que la reduzcamos. Y voy a colocarlo por aquí. Bien, entonces conseguimos un trofeo de Cliarap. Bien, así es como creamos nuestra página de notificaciones, y podemos crear una ventana emergente como digamos. Bien, déjame mostrarte una página de inicio. Como digamos usuario viene. Primero, van a ver éste. Después de eso, y habrá un pop up y en ese pop up, agregaremos este. Entonces usa una redirección de esquina directa a esa página, como alguna página disco o algo así, y pueden usar esta oferta. Bien, entonces creamos este panel de navegación de humor ligero, supongo. Entonces déjame agregar eso por aquí. Entonces estamos en panel de activos, y está por aquí. ¿Qué es? Está oscuro. Es para la oscuridad. Entonces agreguemos eso así, así que permítanme habilitar mis cajas de nuevo. Bien, entonces ahora es pescado. Bien. Pero como puedes ver los íconos no son tan visibles. Son de color blanco. Entonces lo estoy cambiando a este color primario. Bien, yo elegí las filges. Tengo que elegir selección. Bien, entonces ahora esto se ve genial y visible. Entonces como puedes ver, no es actualización, así que podemos actualizar eso. Ya sabemos que puedes pausar la v y puedes hacer eso, o puedes decir comandos principales. Pero digamos que no lo sabes, así que solo míralo. Derecha lamer ir al componente principal y solo decir empujar cambios al componente principal, y va a cambiar todo. Cambiar empuje a Minot Sé que no es visible en este momento, pero si golpeo esto, es visible Y si vamos al componente principal, en donde está por aquí y se hacen cambios. Si hago esto. Si ahora voy a página principal, Azac es blanco, y solo puedo ir a st puedo hacer cambios donde está, tengo que sentarlo para scs ahora si voy a C empujar cambios a Minot si voy a Moon, otra vez, azac Volvamos a la distancia de nuevo. Bien. Entonces, como puedes ver, nuestra página de notificaciones está hecha, y se ve realmente genial. Ahora, ahora, hay una tarea para ti. Tienes que diseñar mi página de acuerdos. Entonces nosotros y nosotros diseñamos. Déjame ver qué diseñamos. Diseñamos Intro home page, burgermenu, así como productal page, accord page, category page Pero no diseñamos mi página de pedido. Entonces hay una tarea para ti. Tienes que diseñar mi página de pedido. Así que pausa el video y haz eso y te mostraré mi versión de mi página de pedido. Entonces, pausa el video. Bien, espero que hayas hecho eso, diseñaste la M o spage Entonces déjame mostrarte mi versión. Esta es mi versión, y diseñé dos elementos en ella, como diseñé esta y esta. Entonces ambos le preguntan, Y se ven simplemente diferentes. Entonces primero es como rastrear tu pedido. Entonces cuando vayas a mi página de pedidos, verás que compras algo. Y desde aquí, te mostrará tu fecha, así como el artículo, así como un artículo de computadora, y podrás ir directamente a esta página. Al igual que si haces clic en esto, te redirigirá a esta página de producción y te mostraremos qué artículo compraste Lo mismo con este, misma funcionalidad, pero se ve diferente. Pero me gustan los dos. Pero si tengo que usar en hap, voy a usar este. Se ve mucho más fresco. Pero hoy en día, todo se vuelve grande. Entonces creo que tal vez la mayoría de los usuarios usan o diseñan esta tarjeta de tarjeta. Esos son todos increíbles mirando hacia fuera la página de Modificación y mi página de pedidos. Entonces solo quiero darte una cinta. Recuerden, no hay tal cosa como un error en Figma, solo feliz accidente esperando que suceda Así que solo experimentas mientras diseñas en una página como Modi o mi página de pedido . Y tener un teléfono. Y cuando alguna vez lo hayas hecho, comparte tu creación con el mundo. Puedes subirlo en meta social y teclearme por ahí y compartirlo con tus amigos. Inspirémonos unos a otros y mostremos el poder de la magia Figma Entonces eso es todo para el video de hoy, y los voy a ver chicos en el siguiente. 80. Cómo crear un componente de TOOLTIP (pasar el ratón para mostrar texto) en Figma: Fuego fantástico ensamblar. Recuerda que el 100% de cupón lo creamos en video pres pres anterior Entonces sí, Baccala porque está a punto de ponerse más raro que Lama usando lápiz labial Bien, así que todos sabemos que las ofertas increíbles vienen con detalles bien detallados. Entonces los misterios revelan de este 100% de magia, estamos agregando otra capa al pastel o debería decir cebolla y superposición con una superposición Hay un inicio. Lo sé, cierto. Entonces como pueden ver en este, cupón, agregué una pequeña cosa llamada términos y condiciones. Si alguna persona quiere conocer los términos y condiciones. Sé que no hacen eso. Pero digamos que alguna persona inteligente como tú, y quiere verificar los términos y condiciones. Si dan click en él, les mostrará este minu. Déjenme mostrar la demostración real. Paso P tipo flujo tres. Bien, entonces va a aparecer este cupón, y después de eso, tenemos términos y condiciones. Entonces como puedes ver, el cursor de mi mouse cambia a este ícono de mano porque es clicable Entonces, si hago clic en él, esto aparece. 100% de descuento. Sí, lo leíste bien, pero atrapa un artículo radicul caro, y CP recid que desbloquea el descuento épico en Th búsqueda del tesoro, compras, estoy mal preparado. Entonces obtienes el vacío. Por lo que el usuario obtendrá este pequeño pop up. Entonces ese es el inicio. Vamos a crear en este video. Podrías estar pensando por qué sitio web com juega a estos juegos mediados. Porque el 100% del trato, este incente merece un poco de aventura ¿No es así además de descifrar el código que esto ofrece a WildF como ganar la lotería de diseño Hablando de más fino, recuerda ese elemento clave expresivo que tenías que comprar, incluso acceder a la locura Sí, ¿adivina qué? Podría simplemente entrar en el mango más tarde o convertirse una clave para otra nivelación oculta de este diseño labiano Quién sabe que las posibilidades son infinitas como te imaginas. Y un poco tan confuso como una forma impositiva reduciendo la pierna. Bien, entonces te voy a dar también algunos consejos de psicología mientras diseñas esto. Entonces déjame cerrar esta. Y déjame borrar éste también porque vamos a crear todo desde cero. Así que voy a cotejar a éste. Bien. Entonces, tienes que ir y vamos a diseñar más. Remar algunos rectángulos. Sé que sé que la gente es inteligente. Pueden hacer de todo desde cero. Pero es mi trabajo. Tengo que hacer esto. Tomemos un trigle de un trigle Vamos a agregarlo por aquí y voy a que O dos, sumé dos Quiero los Tres bordes redondeados, y vamos a agregarlo por aquí. O tal vez por aquí. Agreguemos un marco. Antes de hacer eso, permítame agregar un texto. Control V. Vamos a agregarlo por aquí en el centro, y vamos a agregarlos al marco. Control. Tenemos el marco y el proceso que tienes que crear, déjame cambiar la parte del mismo. Así. P es lo mismo, así que déjame agregar nombre. Esto es como términos y condiciones. Bien, vamos a protype estamos agregando overlay a overlay Anteriormente agregamos overlay a este ítem, pero ahora estamos agregando overlay a este ítem, y lo vamos a hacer usando término y condición, y actualicé mi componente principal. Entonces es por aquí. Acabo de agregar términos y condiciones y se actualizó. Todos sabemos cómo funciona. Así que haga doble clic en términos y condiciones y unamos términos y condiciones, y lo mismo en la pestaña. Bien, ya sé cuál es el problema. He añadido tres cosas por aquí. Así que déjame salir con todos ellos. Ahora, déjenme elegir de nuevo. A, ahora está bien. Ahora me permite usar en tipo. En tipo, navega a términos de condición, disuelve, pero tienes que ser una superposición abierta, y vamos a elegir un manual, y agreguémoslo por aquí, y todo está bien. Quiero que esto sea del 25%. Ahora bien, si hago clic en estos tres, espero que funcione. Es cambio a esto e icono. Bien, como puedes ver, funciona 100% de descuento. Bien, entonces este es el término condición. Así es como usamos overlay inside overlay. También puedes usar esta misma cosa para crear esta. Como, déjame mostrarte una cosa. Agregué un icono de botón , te dará alguna información. Entonces, si alguien hace clic en él, solo mostrará números de teléfono indios. No puedes usar otros números de teléfono. Bien. Si hago clic en este acc, indi números de teléfono solamente. Llama como botón de información o consejos de herramientas, algo así. Por lo que es realmente útil. Bien, entonces quiero contarte algunos consejos de psicología. Entonces como puedes ver, la condición de signo de término es muy pequeña. Y es intencionalmente pequeño porque no quieren mostrar a sus clientes términos y condiciones reales. Y términos y condiciones siempre escritos en lenguaje muy duro. Algunas personas pueden conseguirlo o algunas personas. Escriben términos y condiciones como muy duros. Las palabras son realmente difíciles de entender, y lo hacen intencionalmente porque solo quieren que el usuario haga clic en este icono. Así que esa es la técnica de psicología estudiantes, eso es todo acerca de superposición. Creamos esta superposición usando superposición nuevamente. Sé que ese es el inicio, y podemos usar algo para crear esta información sobre herramientas Hay una cosa que quiero decirte. Yo uso Google Bar para crear estos términos y condiciones. Entonces solo puedes ir a Google Par y darle este prot este Te di esta . Al principio, me diste la línea grande. No quiero eso, así que nuevamente le dije a Go Bard, quiero versión más pequeña. Entonces me dio este, copywted y lo usé. Así es como deberías usar. no voy a tomar tu trabajo, no te preocupes. Aún no es tan inteligente. Sé que algún día será, pero aún no es inteligente. Deberías aprovechar la IA. También enseño sobre ingeniería rápida de IA, cómo IA para redes sociales y todo eso. Si quieres, puedes comprobarlo. El costo está en esta plataforma, y agregaré ese enlace en los recursos. Así que ve ahí y compruébalo y usa IA para guardar tu trabajo. Ahora bien, si me disculpan, tengo un Lama que aguanta e ir a asistir Hasta la próxima, libertad de lo fantástico, quédate raro, mantente curioso. Saatum para más psicóloga de diseño. 81. Cómo crear múltiples prototipos y crear flujos separados en una página de Figma: Él fabuloso diseñador. Hoy nos sumergimos en el mundo de los flujos en Pigma. Entonces, ¿qué son exactamente los flujos? ¿Y bien? Son simplemente un camino inteligente, representado por el flujo uno, flujo dos, el flujo tres, y así sucesivamente Así que alguna vez te preguntaste cómo usarlos, cómo cambiarles el nombre, o simplemente entender de qué se tratan. Entonces estás en la prueba correcta. Así que comencemos. Lo primero, primero, comprueba si ya tienes algunos flujos. Entonces vayamos al prototipo, y voy a dar click en esta sección aleatoria, espacio vacío. Como pueden ver, tengo flujos, como tengo cinco flujos. Entonces un Ploto fluye tres, fluye cuatro y haz clic en harina Entonces, ¿por qué estamos viendo flujos de ti? Bueno, es útil cuando estás trabajando en diferentes secciones o funcionalidades, incluso puedes conectarlas a páginas específicas. Podrías haber visto que uso el flujo mucho como mientras presentaba. Entonces es fácil. Si solo hago clic en esto, está representando el flujo como se puede ver. Está representando solo una pantalla este momento porque no está conectada. Pero si conecto esto así enviado hago clic en él como pueden ver, ahora es accesible, y también obtuvimos nuestro overlay. Entonces así es como funciona el flujo. Y digamos que quiero acceder al flujo cuatro. Yo sólo puedo doblarlo y mostrará cuál es el flujo cuatro. Y después de ese flujo dos, flujo tres. Y recuerdas cuando creamos esto también que es en ese caso, yo uso flow. Entonces si pre esto y si voy a proto y si presento esto, uh, esto va a aparecer. Y en esta sección de diapositivas, tengo todos los flujos. Bien, entonces tenemos flujo uno. Entonces en esto puedo simplemente a ello, tomarlo así. Uh, tengo flujo tres, puedo acceder a clickar la portada, Bien, volvamos a nuestro diseño. Bien. Creo que Wild W c. eso. Accidentalmente borré ese nombre. Así que déjame cambiarle el nombre. Si te encuentras dibujando en el flujo y quieres de letra, da click en el fondo y ve al prototipo y borra los que no necesites en un set limpio. Digamos que no quiero click cart flow, así que simplemente puedo hacer click en el click car flow aquí y como pueden ver esto aparece en el panel prototipo. Y solo puedo hacer clic en este botón, y ahora se borra o también puedo usar el botón de borrar. Entonces, como puedes ver, estamos trabajando en nuestra app de coma click cart Entonces digamos que quiero comenzar mi flujo desde esta página. Entonces en este caso, solo puedo ir a configuración de Ptype y agregar un nuevo flujo, y puedo doblarlo y cambiarle el nombre Digamos que esta es una tarjeta de clic. Puedo nombrar, es una tarjeta click. Aplicación Clickard. Sólo puedo cambiarle el nombre. Podrías estar pensando por qué tenemos diferentes flujos. Bueno, ayuda a organizar el prototipo E, especialmente cuando se trata de proyectos complejos. Cada flujo es separ story line para el comercio. Creamos este flujo primero. Después de eso, tenemos este remolque y nos unimos a estas superposiciones. Esto es viaje, y nos ayuda a organizar nuestras cosas. Y hay una cosa más como, digamos que quieres agregar una descripción a este flujo. Así que basta con hacer clic en este flujo e ir aquí y hacer clic en la aplicación lápiz, descripción. Y puedo decir que esta es la página principal. Bien. Si cierro esto, si voy a presentar y cuál fue este. Así puede ver, esta es la primera página clic carpa. Nuestros grupos de interés o cliente sabrán cuál es el significado de éste? Hay otra cosa realmente genial como digamos que quieres compartir tus flujos. En este caso, quiero compartir mi flujo número dos. Sólo puedo copiar este enlace. Se puede decir que hay un botón de enlace, y vamos a copiar esto y nos da la URL. Si lo pego por aquí, para que puedan ver, tenemos nuestro flujo dos y actualmente hay dos cuentas anónimas. Esos están usando nuestro flujo, y somos capaces de acceder a nuestros flujos Pero no sé por qué falta algo. Como, creo que hay una falla o algo así porque no estamos encerrados en Figma ahora mismo Pero por qué están mostrando todos los flujos. Se supone que nos debe dar un solo flujo, no todos ellos. Si está pasando contigo, por favor házmelo saber. Entonces beneficio del enlace es que puedes compartirlo directamente con los miembros de tu equipo, así como con tus clientes, así como con tus amigos. Tú solo quieres Oh, hazles saber. Este es el que estoy trabajando, y así es como se ve, y así es como funciona esto así. Así que los flujos de cáscara de nuez son su historia de diseño, lo que le ayuda a navegar a través de tipos complejos con facilidad Renombrarlos y agregar descripción es la clave para mantener todo ordenado y ordenado. Entonces, bien, esa es la baja baja de los flujos. Listo para más p. magia. Únete a mí en el siguiente video, y sigamos creando diseños increíbles. 82. Transiciones de superposición de prototipos en Figma: Los creadores de cliar se empantanan porque es un momento de prototipado Estamos a punto de sumergirnos en el increíble mundo de traerte click card alto life en una figma. Botones brillantes del sur que realmente hacen las cosas, más transición que jurará a tu usuario una pantalla interactiva que se siente como magia Ahora sé que algunos de ustedes podrían ser profesionales de Pigma ya navegando por prototipos como Pero bueno, para todos los demás, que está sintiendo ese prototipado. ¿Y ahora qué? Ping, no te preocupes. Este video es o guía amigable de lo básico. Vamos a dar pequeños pasos, conectar pantallas, agregar interacción y obtener su aplicación de tarjeta de clic, sintiéndonos como una obra maestra suave y amigable. Entonces va a ser fácil. Estamos manteniendo las cosas simples, aunque nunca antes hayas tocado figma Piense en las huellas dactilares pero con píxeles y una increíble herramienta de diseño Sentirse aventurero, si conoces pasos, pausa el video y te muestra habilidades Así que construyamos una comunidad de cliard Protypinggur. Bien, no hay lucha vergonzada. Sé que algunos de ustedes podrían sentirse perdidos. Esta es una red de seguridad. Lo desglosaremos, responderemos a tus preguntas y nos aseguraremos de que todos lleguen a la meta. Del que un prototipo puede estar orgulloso. Y transformemos la visión de Clickart en realidad interactiva clickable Así que vamos. Bien, entonces ya tengo algunas fallas en ella y que son innecesarias, totalmente. Bien, primero vayamos al prototipo. Déjame intercalificar este porque quiero mostrarlo todo desde el principio Bien, entonces inter cuando entres a rasección, habrá algunos puntos como este, y solo tenemos que conectarlo Estos son es, y después de conectarlo, relacionamos algunas opciones. Al igual que de barril, tiene que navegar a la página principal, y la animación es instantánea, quiero que esto sea después de retraso. No quiero que esto esté en una cuenta. Entonces después de 800 milisegundos, tienes que ir a esta página Entonces le estamos diciendo esto a Figma y queremos que esta sea una animación disol Si quieres puedes configurar la animación inteligente, pero el problema con la animación inteligente es como si hicieras cosas raras a veces. Así que la mayoría de las veces uso disolver. Bien, entonces funciona. La animación inteligente funciona en ejemplos complejos. Entonces vamos a ver esas cosas en el futuro d. Entonces así para eso. Entonces en esta puja, vamos a hacer prototipado simple. Bien, entonces terminamos con el primero. En principalmente, ya aprendimos sobre este flujo. Entonces le renombro. Así que lo nombré probablemente carpa. Entonces a partir de aquí, nuestro flujo va a comenzar. Bien, entonces ya terminamos con este, y voy a quedarme con este como es porque necesitamos los pop ups en nuestra pantalla, así como este término y condición. Ahora queremos conectar este menú de hamburguesas. Entonces este es el ícono para el menú de hamburguesas. Entonces voy a conectar este con este menú. Y bien, actualmente está en camino y en tab no es animal porque supongo que ya agregué eso. Entonces necesito quitar esta , esta también. Así que hagámoslo desde cero. Cuando alguien hace clic en él en la pestaña, ahora vamos a la página de hamburguesas, pero no quiero todo esto. Entonces hay una cosa que Figma te recuerda animación previa Entonces en lo anterior, añadimos. Disolver. Mantiene esa cosa del dissol. Así que tenlo en mente. Si quieres cambiarlo, cambiarlo o si quieres conservarlo, puedes quedártelo. En este caso, quiero mudarme. Quiero que esta animación sea del lado izquierdo así después de 300 milisegundos. Vamos a establecer este menú de hamburguesas también. Cuando hacemos clic en esta flecha hacia atrás, tiene que ir a la página de inicio. Pero actualmente en la pestaña, estamos en mudanza. Entonces si uso este menú de hamburguesas, como pueden ver, se está deslizando hacia adentro, pero cuando hago clic en esta flecha flecha hacia atrás, como pueden ver, no funciona como lo quiero. Entonces en este caso, queremos que esto sea una mudanza, y tiene que ser del lado izquierdo así. Y también agregamos algo de animación. Entonces nos quedaremos con éste. Y si vuelvo a colocar mi menú de hamburguesas, como pueden ver se desliza hacia adentro, y se desliza hacia atrás, muévete. Bien, así es como se supone que debe funcionar. Bien. Ahora ya terminamos con éste. Entonces digamos, vamos con la moda. Y unamos esta moda con este zapato. Sé que esta es una forma apropiada porque en la moda, obtenemos muchas categorías, y solo voy a la página de tal del producto en los zapatos. En la pestaña, ve a los detalles del producto, y quiero que esto sea D todo o instantáneo. Ir con instancia. Juguémoslo de nuevo avance después del 800, me puse adecuado, no quiero esa moda. Así. Es un instante. Si configuro esto para que se disuelva, veamos cómo funciona. La moda se disuelve. Des trabaja mejor. Voy a mantener intro diesel y aliviar 300 milisegundos. Bien ahora, vamos a trabajar en la página de cuenta. Siempre que el usuario haga clic en este humor, no humano humano como icono como este, y tiene que ir a mi cuenta. Yo agregué cosa simple. La página gcc y el disol están fuera y 300 milisegundos. Si hago clic en esto como pueden ver, se resuelve, y ahora estamos en esta página con. Bien, ahora quiero volver. A partir de aquí, no puedo regresar. Sólo puedo presionar este botón i. Bien, entonces quiero volver a mi página de inicio. Entonces cuando presione hacia atrás, hay que ir a la página principal, y voy a agregar alguna entrada básica. Navega a casa pitch, disol está fuera. Lo mismo. Si hago clic en esta página de inicio. Eso es genial. Bien. ¿Qué es lo siguiente? Bien, sin motivo, agregué éste, así que voy a tratar a éste porque no queremos ese Bien, ahora vamos a la categoría de diseño. Entonces como puedes ver, somos página de categoría, pero el icono de inicio está resaltado. Entonces quiero que esto se destaque. Así que vamos al diseño y selección de color. Bien, ahora se ve genial. Entonces sabemos que estamos en la sección de categoría. Bien, ahora tengo que unirme a todos ellos. Actualmente, estoy diseñando paneles, así que vamos a protype vas a estar en categoría como esta aquí, y voy a mantener las cosas simples Categoría negativa es todo está fuera. Lo mismo. Bien ahora, unámonos a mi pedido. Sé que está un poco lejos de las ediciones de Homepage. Mis órdenes, está al final. Puedes usar este método como arrastrar y encontrar tus pedidos, y también puedes encontrarlo desde aquí Pero sé que creé muchas cosas en este marco. Y tenemos montón de manojo de marcos, así como páginas, vamos. Si eres una persona organizada, entonces no se estropeará así Bien. Entonces mi orden, lo mismo. Animación, todo eso. Y notificación de notificación. Unámonos a la notificación. La notificación es donde está, está aquí. Vamos a la notificación, y Mi notificación. Es mi notificación, supongo. Pero tengo dos mi notificación. No sé por qué. Bien, unámonos a éste. A ver. Este es el derecho o no. Bien, esta es la correcta. Ahora funciona. Lo último es lo restante que tengo para unirme a mi cuenta. Mi cuenta, donde esta mi cuenta. Éste. Bien, así que nos sumamos casi el 80% o tal vez el 70% de nuestro diseño. Juguemos cómo se ve. Después de 800 segundos después 800 milisegundos, obtenemos este pop up. No quiero esta. Vamos a la categoría. Y nuevamente, estos no se unen, así que tenemos que sumarnos a esto. Si voy a dar click en la parte posterior hacia atrás, puedo ir al lanzamiento directo de Home. También tengo que mover esta cosa un poco hacia arriba. Así que déjame ir a home pitch y déjame rastrearlo esto hacia arriba. Bien, esto va a ser suficiente, supongo. Bien, entonces agregué todo el vicio a esta cosa barra de navegación, pero obtuvimos un beneficio. Entonces esta es para Dark Mo, y esta también es para Dark Mo. Entonces en este caso, sólo puedo copiar éste y pegarlo por aquí, y va a funcionar igual. Entonces si lo arrastro, y si copio control C y sigo el fotograma y el control, nosotros, como pueden ver, todo funciona bien. Pero sólo tenemos que cambiar el color. Entonces esta es la mis órdenes. Entonces voy a ir al panel de diseño y cambiar el color, éste, y la notificación minot va a ser primaria tres Eso es bueno para el tipo. Bien. Se supone que debe, está funcionando. Está funcionando, bro está trabajando. No creamos una página de carrito, sino que solo podemos redirigir a la página de Molde. Supongamos que si agregas al carrito, ordena automáticamente. Tiene IA en su interior. Bien, ahora vamos a jugar con esta app. Creo que me uní a todo. Así que tenemos que aparecer. No quiero esta moda. Bien, agregue al carrito uno se abre. Como puedes ver, hay un punto caliente. Si hago clic en el espacio en blanco, resalta algunas partes, y estas se llaman punto caliente. Digamos que quiero ir a categoría. Sólo puedo hacer clic en él, pero creo que me categoría. Es cuadrado. Voy a cambiar eso y vamos a ir a la cuenta de casa. Fangos. Todo funciona. Este es el prototipado básico para esta app, y déjame ir a categoría Está funcionando bien. Tiene el mismo color, pero no sé por qué está mostrando el rectángulo rojo. Vimos ir todo en el premort y veamos en una pantalla grande en prototipo real Y mi flujo es éste. Haga clic en la aplicación del carrito. Bien. Pop, vamos a aparecer. Bien. Después de esa moda, categoría C y Acme ordena cuenta De vuelta a casa Pogo funciona. Funciona. También podemos unirnos a estas dos páginas, categoría home, mis pedidos Mification sit list No creé estas páginas porque pensé que nuestro proyecto se volvería demasiado pesado. Bien. Entonces ahí lo tienen, amigos míos, prototipado básico para nuestra app de carritos Entonces gracias por acompañarme en esta clase, y te atraparé en la siguiente. 83. Proyecto de clase 15: emergente y fluye como un profesional: interacciones de creación de prototipos en Figma: Figma pos, esto es tiempo de proyecto. En este proyecto, tenemos que crear pop ups, crear pops llamativos con herramientas Figma. Puedes usar formas de cosa, color, texto, tal vez incluso animación. Conecta esos pops con páginas, usando suavemente sobre chicos. Y después de eso, crear inicios. Sin inicio. O sea, si haces clic en los términos y condiciones, tiene que abrirse, y ese es el inicio. Hay que crear el inicio. Y también puedes crear éste. Al hacer clic en el botón ie, tiene que abrirse. Este pequeño menú. También se llama punta de herramienta, supongo. Después de eso, hay que unir todas las cosas usando prototipos, y ya vimos Así, también puedes usar flujos Y si también puedes usar un solo flujo. Depende totalmente de ti. Y después de diseñar y unirte a todo tu diseño, toma una captura de pantalla y envíame en la sección de proyectos. Entonces esto es todo acerca de nuestro proyecto 15, supongo. A lo mejor no sé qué número era. Otras cosas también están disponibles en pedófilos y para todas esas cosas y someterme a Entonces esa es una foto, y te voy a ver que está en el próximo mundo. 84. Pergamino adhesivo en Figma: Co diseñadores, en este estado de ánimo, nos estamos sumergiendo en el mundo de fijar elementos tanto a la parte superior como a la inferior Esta técnica agrega un toque de fitness a nuestro diseño al permitir que el contenido deslice suavemente detrás de los elementos fijos. Y así el genial mundo del desplazamiento deslizante horizontal en figma, ¿ Estás listo para subir de nivel tu juego de diseño? Entonces, comencemos. Entonces, antes de comenzar nuestro video, déjame mostrarte algo. Entonces si voy a presentar, como pueden ver, si me desplazo esto, como pueden ver, esta barra de navegación también está desplazándose con nuestro diseño. Y eso no quiero. Debería quedarse por aquí, como, en el mismo lugar, y así como con este, nuestra barra de navegación superior. Entonces si lo desplazo. Como se puede decir, va hacia arriba, pero quiero que esto sea quedarse por aquí. Entonces de esta manera, vamos a aprender esto, así como el desplazamiento verdica o el desplazamiento horizontal Entonces es muy sencillo. Seleccionemos la página de inicio, y vayamos al prototipo. Y lo sé, hay una locura multiverso multiverso. Pero nos interesan estas dos cosas como barra superior, perdón, navación de barra superior y botón de navegación inferior Entonces comencemos con barra superior. Entonces solo selecciona esto. Espero que hayas agregado todas las cosas en marco. Y déjame revisar. Bien, agregué en Cmd El cuadro del coche es lo mismo, no lo mismo, pero agrega todo en el marco Como pueden ver, ahora estoy en prototipo, y la barra de desplazamiento es scroll con parent. Quiero que el bar top n se quede en el mismo lugar. Entonces vamos a elegir fijo y desbordamiento. Por lo que actualmente, no tiene ningún elemento de desbordamiento como cualquier imagen o cualquier rectángulo desborde fuera de este marco Así que vamos a mantener como está, desbordamiento, sin desplazamiento. Y ahora, si me desplazo esto. Entonces como pueden ver se queda ahí. No se mueve con todo el marco. Y ahora cambiemos éste y éste también. Entonces como pueden ver también se mueve. Y también quiero que este se quede en el mismo lugar. Así que vamos y escojamos este pix en el mismo lugar, así como este. Lo mismo aquí, fijo como más simple y sin desplazamiento. Ahora si reviso mi app, como pueden ver, todo se queda en el mismo lugar. Entonces solo estamos pin nuestros elementos. Entonces fue realmente simple. Bien, eso fue todo acerca de cómo fijar elementos alguna vez en una fuma Pero como ves nuestro marco es de taburete adentro y no me gustaría así. Quiero que nuestro marco marco sea así. Y se puede ver que los elementos están fuera de marco. Entonces necesito hacer clic en el contenido del clip. Ahora son clip. Entonces no se borran, en realidad. Entonces si voy a app y si la desplazo hacia abajo, como pueden ver, todo está por ahí. Bien, así es como funciona el contenido del clip. Ahora, déjame mostrarte cómo funciona el desplazamiento vertical u horizontal Entonces actualmente, tenemos desplazamiento vertical en él, pero quiero agregar un desplazamiento horizontal Entonces creo que agregué fuera de diseño en él. Entonces, si elijo este , el th layout, como puedes ver, el contenido está fuera de marco, y podemos usar contenido de clip. Y déjame rastrear esto para enmarcar y lo mismo con este. Déjame recortar el marco. No recortar el. Sólo lo estoy ajustando. Bien. Ahora bien, si voy a productos de moda los desplace, como pueden ver. Bien, creo que tengo que ir al descarrilamiento del protipo P. Bien, no hay desplazamiento. Y agreguemos un desplazamiento. ¿Eso debería ser o ordenar? No. Es vertical. Y ahora, si lo reviso, como pueden ver, puedo desplazarlo. Pero en las cartas, no puedo desplazarme. Entonces en este caso, quiero agregar desplazamiento horizontal. Y desplazarse también por el padre . Esto va a ser lo mismo. Ahora bien, si lo redimensiono, vayamos a la página de detalles de un producto, y como pueden ver puedo desplazarlo verticalmente, y puedo desplazarlo horizontalmente Así es como funcionan el desplazamiento vertical y el desplazamiento horizontal en Pero estos elementos no están inmovilizados. Déjame solo fijar el Elemento. Se van a quedar por aquí, igual fijo así como éste. Si lo reviso ahora como pueden ver, esto se ve más genial. Hay una cosa que hice aquí. Como pueden ver, agregué las opciones de esta categoría en caja, pero podemos convertir eso en desplazamiento vertical Realicé la demo de registro de página de inicio, y agregué el desplazamiento horizontal misma scroll con parent y actualmente no es de desplazamiento Déjame elegir la horizontal y déjame acortar el continente así, Ahora, déjame presentarte éste. Entonces como pueden ver, estoy presente ahora mismo, y puedo hacer esto. Si quieres, también puedes elegir éste, así como éste. Pero desde mi punto de vista, esto se ve más genial. Pero si puedes hacer así, parece etiqueta Entonces, eso se trata de desplazamiento vertical, barrido horizontal así como cómo anclar tus elementos en la parte inferior, y así como en la Entonces hijos, eso es todo sobre el desplazamiento vertical, desplazamiento horizontal, así como la forma de anclar elementos en la parte inferior, así como en la Sé que este video puede ser un poco más largo y confuso. Pero está repleto de información valiosa y para navegar por los desafíos potenciales. Así que quédense con él y los voy a ustedes en la siguiente. 85. Cómo crear animación de desplazamiento automático en Figma: misión de Maxie y Tags es dominar el arte del desplazamiento automático Entonces corneta, se llama aquí alabanza. Entonces como pueden ver, tengo ventana anterior abierta mi Figma y en mi escritorio Y si hago clic en la electrónica, como pueden ver, es pergaminos automáticamente No lo desplazé manualmente así. Entonces son pergaminos automáticamente. De esta manera, vamos a aprender esto, cómo podemos hacerlo. Figma. Entonces, antes de hacer eso, déjame contarte sobre el contenido del clip. Supongo, en presa te lo dije, pero no fue en detalle, así que pensé, déjame decirte qué es el contenido del clip. Bien, así que imagina tu forma con un delicioso plato de comida, pero está rebosante en el mantel No para sustituir, ¿verdad? contenido del clip Inf es como poner una bandeja para servir debajo de su obra maestra de diseño Es mantener todo limpio y ordenado ocultando cualquier parte que se derrama fuera del diseño fuera del área de diseño Entonces aquí cómo funciona. Bien, entonces déjame mostrarte cómo funciona el contenido del clip. Entonces voy a seleccionar homepage. Y como puedes ver, la pantalla de nuestro teléfono está hasta aquí, pero nuestro contenido está rebosante Entonces en este caso, actualmente se ha elegido el contenido del clip. Pero si lo selecciono y si trato de hacer mi frame igual que éste, igual que la pantalla real del móvil, como pueden ver, está rebosante Entonces en este caso, podemos simplemente activar el contenido del clip, y como puedes ver, es invisible. Está ahí, pero es invisible. Si voy a las capas de la página principal, como pueden ver, están por ahí. Simplemente son invisibles por ahora. Si quiero verlas, simplemente puedo hacer clic en el contenido del clip así, y ya están visibles. Entonces déjame ph, déjame en él porque quiero mostrarte el desplazamiento automático Los beneficios del contenido de clip es que reúne nuestros ingredientes, como si tocara todo el elemento que quieres diseñar con imágenes de texto, formas dentro de un marco Piense en un marco como una placa en U. Cuando haces clic en el contenido del clip, es como decirle al suave, Oye, mantén todo dentro del marco. Sin asomarse, igual que un escudo mágico plegable. Todo lo que se desborda detrás del marco desaparece, creando un diseño limpio y pulido. Recuerda, el contenido en realidad no desaparece, solo se esconde detrás del escudo invisible. Y podrías estar pensando dónde podemos usarlo. Puedes usarlos mientras creas maquetas. Puede cortar nuestro contenido al tamaño de fotograma para imitar los límites de la pantalla También podemos usarlos mientras hacemos prototipos como como puedes ver. Actualmente, vamos a hacer protipo. Entonces en este caso, mantiene todos los elementos dentro de un marco para que no se superpongan ni desordenen la piel También nos ayuda a la hora de construir componentes rezle. Ese clip de contenido en el marco para definir límites claros para el elemento cuando planeamos reutilizar a lo largo del diseño. Entonces, solo recuerda, el contenido del clip es tu marco. Te ayuda a presentar tu diseño profesionalmente y evitar desbordamientos desordenados Bien, así que eso fue todo sobre el contenido del clip. Ahora pasemos a las palabras cómo hacer el desplazamiento automático. Entonces quiero característica de punto. Cuando hago clic en este botón de electrónica, tiene que anotar automáticamente a este televisor. Entonces para este efecto, voy a entrar en prototipo, y creo que está seleccionado y lo hice. Bien, entonces déjame hacer eso. Esto lo vamos a hacer desde cero. Bien, entonces déjame elegir la electrónica, y voy a unirme a esto con un televisor. Y obtenemos esta opción. En una pestaña, debería desplazarse al marco 28, y este es el frame 28, y actualmente no agregamos y trastornado y xbset Entonces estamos sumar eso. Pero primero, déjame decirte cómo funciona. Por lo que actualmente es un animado. Establecer animación, así vamos a tener la idea. Bien, entonces estamos en la página principal. Si hago clic en la electrónica, se desplaza a esta tarjeta Eso es electrónica, TV hasta 70% de descuento. Bien. Entonces ahora cambiemos a animación. Y si ahora hago clic en él, como pueden ver, son muy pergaminos, y tiene ese efecto suave sobre él Bien, ¿entonces podrías estar pensando en qué son estos? Simplemente están molestos de x e y Así que digamos que pongo valor hasta, como, -500. Así que digamos que pongo valor hasta, como, -500 Y ahora, si voy a nuestra vista previa, y si hago clic en la electrónica, como pueden ver, viene por aquí, pero quiero que esta tarjeta esté por aquí cuando voy a presionar ese botón de electrónica. Entonces en este caso, Así que voy a escribir algo de valor como 250. Entonces no es tan exacto. Solo tienes que jugar con él porque el valor puede ser diferente para diferentes marcos y diferentes diseños. Entonces déjame hacerlo de nuevo. Y como pueden ver, viene por aquí. Entonces ya jugué con este, así que en realidad sé que los dos 50 funcionan mejor para ello. Y también puedes hacer lo mismo con nosotros. Entonces vayamos a reutilizar. Estos son nuestros nosotros en producto. Página. Entonces estas son reseñas y voy a unirme a esto con estas reseñas. Así que cada vez que voy a hacer clic en este botón de revisión, tiene que desplazarse automáticamente desplazarse a esta revisión. Así que vamos a revisar esa moda y dar clic en la reseña. Como podrán ver, se desplaza. Bien, ahora, digamos, tenemos una página bastante grande como esta, y no el clip contenía esta página. Entonces cuando voy a dar click en este botón trasero Aca, se desplaza demasiado alrededor. Quiero que vengan aquí, no así. Entonces en este caso, voy a seleccionar nuestro proto wire, y voy a jugar con el número Entonces déjame sumar esto hasta 300. Bien, tengo que poner mi estándar. Y ahora, si hago clic en esto, déjame comprobar que funciona o no. Bien, entonces funciona. Pero se trata de metaollas. Quiero que esto esté en el medio. Entonces déjame cambiar el valor hasta como 500. Bien, -500. Ahora, déjame comprobarlo otra vez, des ahora funciona. Así es como lo hago. Entonces solo hay que jugar con las compensaciones, las molestias x e y Pero imagínese, digamos que mi página es así, y los valores son actualmente así. Ahora bien, si hago clic en la reseña, como pueden ver viene así. Y sobre derramado Entonces, como pueden ver, nos fijamos hasta 300 milisegundos. Y podemos configurarlo como 1 segundo. Vamos a establecer eso. Y sé que va a ser muy lento. Entonces como digo, con 1 segundo, es muy lento. Pero creo que 300 es como default oficial derramado. Solo tienes que experimentar el juego y encontrar tu ritmo. Entonces ahí tenemos amigos desplazándose sin esfuerzo por una página como un metro figma. Cualquier cosa clicable puede ser tu hijo. Así que adelante en ese pergamino, espolvorea algo de animación y haz que tu diseño dans Así que te atrapan en la siguiente. 86. La diferencia entre equipos, proyectos y páginas: Hola a todos, vamos a sumergirnos en el universo Figma y und revelemos los misterios de los equipos, proyecto y archivo de diseño Entonces corneta, va a ser esclarecedor. En primer lugar, los archivos son mágicos, hemos estado considerando hasta el momento. Este es el proyecto en el que estamos trabajando. Pueden enfriarse en balsa o stel dentro de un proyecto. Retrocedamos a los equipos. Piensa en el equipo como un ala grande. Entonces, como pueden ver, tengo equipos bunchp por aquí. Entonces por si acaso, tal vez esté cerrado, así que simplemente haga clic en él, se abrirá. Y en mi caso, tengo equipos agrupados. Así que en curso anterior o mientras enseñas muro. Entonces creé estos proyectos, y ellos tienen un proyecto. Y todos ellos son gratis, y este se paga porque tengo una muy buena relación con Webma así que un día, enviaron por correo y me dijeron, Puedes tener un equipo gratis por un tres años Entonces yo estaba como, Claro, ¿por qué no? Voy a tener un equipo como libre o tres años. Y lo conseguí y no uso tanto, pero sí, lo conseguí gratis. Los equipos pueden ser un nombre de empresa o división como ventas, marketing o alguna región específica. Dentro de este equipo, hay diferentes proyectos. Por ejemplo, como pueden ver, tengo este let referirme al proyecto de la aplicación en el que hice una aplicación de entrega de alimentos y tengo esa aplicación de entrega de alimentos así como wireframe Y en este equipo imaginario, tengo esta cosa del desplazamiento, así como la copia de la app click card en el proyecto MCU, tengo una plataforma ait Yo creé eso. De veras fue dejarme mostrarte. Bien, éste. Creé esta plataforma OTT para MCO. Fue en curso anterior y mientras yo estaba dando clases. Esa vez creé este proyecto. Y dentro de un solo equipo, puedes tener sitio web, versión móvil de ese sitio web, versión de aplicación así como incluso algunos archivos que están relacionados con algún gran lanzamiento. Ahora, para la versión gratuita, puedes tener muchos equipos que te gusten, pero hay un pateador, solo un proyecto dentro de él Entonces, como puedes ver, estas son versiones gratuitas. Y si trato de hacer clic en el botón más, y si trato de agregar, me pregunta, deberías pagar. Cuss free, no se te permite agregar otro proyecto, sino con la versión premium Entonces en este caso, obtuve un equipo gratis, así puedo agregar tantos proyectos que quiera por aquí. Para compartir el amor Figma con otros diseñadores o colaboradores, agregas al equipo, para que puedan acceder a todos los Es como un pase entre bastidores al mundo del diseño R. Entonces digamos que este es mi, vamos a CVD este. Y en esto, quiero agregar a mi miembro del equipo, que pueda agregarlos compartiendo en este enlace o simplemente puedo agregar su LID para que puedan acceder a todo, que está presente dentro de mi equipo, puedan acceder a este archivo este archivo, este archivo o cualquier cosa dentro de este proyecto. Y también, pueden editar. Si le das el permiso, ellos también pueden editar. Entonces podrías estar pensando, ¿por qué tenemos borradores y archivamos dentro de los proyectos Piensa en el draft como un escondite secreto. Es donde pones a prueba tu trabajo antes de que esté listo para que el mundo lo vea. No junio, sin ojos rezos. Solo tú y tu proceso creativo. Los proyectos, por otro lado, son los hermanos organizados o borradores. Permiten que tu equipo o cualquier persona con la que compartas el equipo encuentre fácilmente un archivo de acceso público o privado que decidas. Déjame mostrarte una cosa. Ahora, digamos que completaste un proyecto como este. En este caso, creé esta app. Bien, este teléfono era la aplicación. Y quiero agregarle esto al equipo, así puedo simplemente arrastrarlo y poder peste por aquí Y puede abrir esto. Entonces como pueden ver, está presente por aquí, pero yo uso tres de tres archivos. Entonces, si trato de agregar otro, dirá, paguame porque esta es una versión gratuita. Pero si haces esto en, como, versión paga, agregará tantos archivos que quieras. Y es ilimitado. Ahora sé que podrías estar pensando, ¿no puedo simplemente guardar todo en un borrador y compartirlo cuando esté listo Claro, puedes Si estás trabajando solo, entonces, ve a por ello. Pero si estás trabajando con equipos o múltiples socios, entonces ve con los proyectos, ve con los equipos como este. Cuando empecé a aprender Figma, como en 2000189. Esa vez, digamos, quiero agregar a alguien en mi este archivo mientras estoy usando borrador. Entonces esa persona sólo solía ver lo que estoy haciendo. Esa persona no es capaz de editar. Pero ahora Figma actualizó su versión gratuita. Ahora, si agregas a alguien en tu tum puedes decir que esa persona puede editar el diseño o no, o simplemente puedes configurarlo como una vista. O también puedes convertirlos en propios. Yo depende totalmente de ti. Y aquí está la primicia de la limitación. La versión gratuita permite solo un proyecto por equipo y cada uno con un máximo de tres archivos. Entonces si abro equipos. Como puedes ver, agregamos tres, y es por aquí, como se usan tres archivos pthree, y arreglar archivos de salto no estamos usando archivo fijum Así que usamos las tres páginas. Y con pm puedo agregar archivos ilimitados. Pero aguanta, hay un hop figma s, y si un estudiante o educador como yo, hay una boda de opción de tarifa para ti Sólo tienes que ir a fakmot com y compruébalo. No sé cuál es el plan actual para estudiante y educador, pero ve a figmotcm y Entonces esas son todas las diferencias entre las caídas y los equipos. Entonces, amigos, ese es vuestro para los profesionales y voy a ver mientras esté en el próximo. 87. Figma Crearás una biblioteca de equipo compartible: Bienvenido de nuevo a tu diseñador. Hoy, quiero mostrarte algo genial. Entonces, como pueden ver, ahora estamos en borrador, y yo creo un archivo de diseño. Y este es un archivo vacío. Vamos a los marcos teléfono Iphone 15 P max. Y voy a entrar en activo. Y como pueden ver, hay un libro. Se llama biblioteca. Así que vamos a hacer clic en la biblioteca. Y en biblioteca, me sale una opción llamada cortar una copia y los 20 componentes y 29 estilos. Entonces si lo agrego, como puedes ver, nuestros paneles de activos tienen nuestros componentes de esta app, que creamos. Al diseñar esta aplicación, creamos estos componentes, textiles, estilos de color. Podemos usar todas esas cosas en este archivo de diseño. Para que pueda rastrearlo. Puedo agregar amino superior así, puedo agregar botón de navegación así, y también puedo agregar todo el estilo. Entonces déjame agregar algo de texto. Y si voy a esta cosa, como pueden ver, todos los textiles están presentes por aquí, y solo puedo escribir algo al azar bs y lo mismo con el color. Dibujemos algo como éste y el color puede ver que todos los colores están presentes aquí. El color primario, segundo color gris color natural estridiente Todo esto es posible gracias a este botón de biblioteca. Hoy estamos buceando al mundo Mose de bibliotecas por equipos en Figma Brace dirá para un viaje esclarecedor Entonces estás pensando qué son exactamente las bibliotecas de equipo imaginamos un reino mágico. Donde todos sus componentes y estilos residen en su documento, conectándose con la creación futura, e incluso con otros miembros de su equipo. Esa es la esencia de las bibliotecas. Al cargar su activo de diseño aquí, está abriendo la puerta de entrada para que otros documentos aprovechen la riqueza de sus estilos y componentes, fomentando la consistencia y fomentando la consistencia y Así que vamos y vamos a crear bibliotecas. Antes de hacer eso, permítanme despublicar la biblioteca anterior, ésta, Inédito Bien. Bien, entonces hay una descargo de responsabilidad. Si estás usando la versión gratuita y no quieres usar esta función. Puedes saltarte esto por completo porque esta es la función premium. FIPMA no permite esta función para el usuario gratuito, así que tenga en cuenta Pero para el conocimiento, ps el video. Pero déjame decirte si intentas hacer esto en versión gratuita, ¿qué pasará? Entonces digamos, actualmente, tenemos este archivo. Creamos en borrador y es gratis. Bien, este es un archivo gratuito. Digamos que si voy a asset en bibliotecas, y si trato de publicar esto, como se puede decir, hay un pop. FICMA dice mover este archivo a tap profesional con el fin de publicar todos los componentes Y hay que contar con equipo profesional. Yo uso uno libre, no voy a poder hacer eso. Entonces tengo un equipo profesional que obtuve de Figma. Creo que vieron mis cursos y mi trabajo. Entonces dijeron, puedes tener un equipo gratis. Bien. A esto le agregué nuestro proyecto. Yo hice una copia, y la agrego por aquí. Entonces esta es la versión de copia. Y vamos a hacer clic en uno. Entonces, vamos a meterte en esto. Actualmente, me gusta el panel de componentes como la página de componentes. Ahora quiero publicar éste. Entonces vayamos a asset, haga clic en el botón de libro Biblioteca. Ahora puedo publicar éste. Entonces, si hago clic en la publicación. Entonces como puedes ver, todos los componentes textil color style están listos para ser publicados. Si hago clic en la publicación, tomará algún tiempo y se publicará y podremos utilizar en cualquier parte de nuestro diseño en cualquier parte de nuestros proyectos, así como tams Bien, entonces se publica con éxito. Y si voy a borradores y si creo un nuevo archivo de diseño, está vacío Como puede ver, agreguemos una biblioteca de activos de 15 P, y como puede ver, está por aquí. Por lo que aún no se agrega. Entonces estos se agregan, y esto no se agrega. Así que voy a hacer click en Agregar un archivo. Y ahora mi panel de activos está lleno de compañeros. Bien, puedo seguirlo así. Usa este, usa este . Puedo diseñar mi archivo. Sé que esta no es una forma profesional de hacer las cosas, pero tienes la idea, cómo funciona. Recuerda, esto es solo para la versión pro, no para la versión gratuita. Déjame hacer esta otra vez. Hay una cosa más que puedes hacer ya que puedes ver estos archivos como Unicorn o Status Bar. Puedes crear equipo especial y volcar todos los componentes así como recursos, publicar esos activos y usarlos en tus equipos. Creo que con los unicornios, hicieron las costuras arrojaron todos los íconos recursos textiles color en el único archivo, y solo podemos publicar esta cosa y podemos usar directamente en nuestro proyecto No tenemos que entrar en éste y copiarlo y pegarlo en éste. Entonces ese es un proceso largo. Podemos simplemente publicar este y usarlo donde queramos. Ahora, déjame mostrarte algo genial. Actualmente, estamos en el panel Coons, y estos son todos los componentes que estamos usando en bibliotecas Y digamos, por alguna razón, se quiere cambiar el color de éste, así como de éste. Hagámoslo cray Y como puedes ver, en el panel de activos, hay una app de un punto así como en este libro, las apps de punto azul. Y en biblioteca, como se puede ver, dice cuatro cambios. Entonces, si haces clic en publicar, estos son los cuatro cambios. Si quieres publicarlo, puedes publicarlo. Entonces nos está diciendo que estos cuatro cambios se modifican en estos momentos. Si hago clic en la publicación, Bien. Ahora si voy a este archivo, que aún no está actualizado. A veces da ese pop up como dice que algo ha cambiado. ¿Quieres revisarla? Pero actualmente, no puedo ver esto. Creo que hay una falla o algo así, pero puedes hacer lo mismo por aquí Envié en el libro. Nuevamente tenemos esa notificación. Dice una actualización. Este botón se actualizó, ¿quieres actualizar esto o no? Vamos a hacer clic en la actualización. Si quieres actualizar un solo elemento, si quieres actualizarlos todos, solo tienes que hacer clic en la actualización de todos, y ya está actualizado. Déjame mostrarte cómo se ve ese pop up. Bien, así es como se ve ese pop up. Digamos que si actualizas algo y quieres actualizar esa actualización. Sé que suena raro. Si quieres actualizar ese artículo anulado, puedes revisarlo primero como qué cosa está orited y ahora quieres actualizarlo Este es el que se actualizó y si quieres actualizarlo, solo tienes actualizó y si quieres que hacer clic en la actualización. Así funciona el pop. Pero puedes hacer lo mismo por aquí si no viene pop up. Estos son todos los poderes de la biblioteca. Pero recuerden con grandes poderes viene una gran responsabilidad. Si actualiza el componente en la biblioteca, no se meterá automáticamente con sus derechos sobre en otros documentos. Tus retoques están sanos y salvos. En pocas palabras, las bibliotecas de equipo en Figma son una guía de diseño, consistencia, colaboración y eficiencia Adelante, crea, comparte y diseña como un mago con las mágicas bibliotecas Figma Así estadio para más aventura Figma en el siguiente video. 88. Animación contra microinteracciones en Figma: A mentes creativas. Hoy en día, nos sumergimos en el mundo de la brujería del diseño Donde las garrapatas diminutas pueden dar rienda suelta a la experiencia mágica del usuario. Entonces hablemos de dos poderosos hechizos que son la micro interacción y la animación Imagina tu UI y UX como escenario. Cada pestaña de desplazamiento de clic es un intérprete. Pero a veces necesitamos algo extra para mantener hipnotizado a la audiencia Ahí es donde entran dos estrellas. Mit micro interacciones, son colarse en ja del mundo del diseño. Pequeño movimiento sutil que susurra. Me importa. A los usuarios de R. Al igual que cómo instrumenta el corazón como la animación, Sury pausa, y el corazón crece sin problemas cuando lo tocas, proporcionando gratificación instrum y Ahora piensa en Twitters tira hacia abajo la flecha de actualización que limita como pin Representando visualmente el esfuerzo que estás poniendo en tu nuevo contenido. Incluso el pop de notificaciones de chat de Facebook agarra tu audición sin ser abrumador Como una pequeña burbuja expandiéndose y parpadeando cuando recibes un mensaje. Y quién puede enfocar la animación de racha lúdica de Snapcha, donde los íconos de fuego crecen entre amigos en día consecutivo, agregando sentido de diversión y compinación de mantener Ahora, aprendamos sobre la animación. Las animaciones, por otro lado, son el gran illoginista Toman protagonismo haciendo que el elemento aparezca, se transforme o desaparezca mágicamente Piense en Tiktox Seamless down transition que combina videos juntos, creando una experiencia de tejido dinámica y atractiva que fomenta la creatividad y la participación Nuestra barra de proceso de historia de Instagram de imagen, el colorido anillo que se mueve alrededor de tu foto de perfil da una clara indicación de cuánto es la historia y cuánto has visto. Y también Linked skill endorsement Cfd es otro gran ejemplo La animación de celebración que refuerza tu logro y motiva un mayor crecimiento cuando recibes un aval Y no olvides el discurso de animación expresiva mogy que cobra vida, agregando capas de personalidad y humor a la comunicación online Ya sabes, cuando descubrí la animación y la micro interacción en 2018 19, Esa vez, yo estaba como, ambos iguales. ¿Cuál es la diferencia? Entonces las diferencias, la escala, el propósito y la sutidad micro intacciones son microscópicas sucediendo en milisegundos Mientras que la animación puede ser grandes espectros que duran segundos o incluso más micro intacción es funcional, proporciona retroalimentación, confirma la acción y guía al usuario, mientras que animación puede ser puramente decorativa, agregando un toque de deleite y personalidad Recuerde que la micro interacción es como susurro sutil, pero impatle mientras que la animación puede ser audaz y fuerte, anhelando la atención y guiando Piénsalo así. Las micro retciones son marcas pumpsi en su lenguaje de diseño, guiando a los usuarios sin problemas a través de la experiencia anmiti son signos de exclamación, agregan empatía y oración a los movimientos clave, pero la verdadera magia sucede cuando bailan juntos Una micro retción puede desencadenar una animación o una animación conduce a una micro retción, creando un flujo dital sin fisuras para un Recuerda, la micro retección y la animación son herramienta poderosa en tu caja de herramientas de diseño Úselos sabiamente. Manténgalos enfocados en el usuario y crearás una interfaz que canta, baila y dejará a tu usuario hechizado Entonces, aquí hay algunos ejemplos que quiero mostrarles. Hay un sitio web llamado Air Bag Studio. Si tengo mi mouse en este airbag Studio, como pueden ver, la animación. Se bavi es como Jello, y lo mismo con la caja Lo mismo con este efecto de fondo. Si tengo el ratón encima como pueden ver, se está moviendo. Si me detengo, se detiene. Bien. Si me desplazo hacia abajo acacy la caja se vuelve grande, toma cambios También viene otra caja. Vuelve a cambiar. Ahí en alguna transición. Y hay un puñetazo las cosas van al mismo tiempo. Esta es una de las mejores implementaciones de la animación y la micro interacción. Digamos que si presiono sobre este botón, como pueden ver, esta animación de letras sucede y lo mismo con estas animaciones de datos de aquí. Esto es realmente si tengo mi musgo en el logo como pueden ver, escrituras neutras y cambio a caja y luego otra vez en logo. Bien. Entonces estarías pensando dónde podemos conseguir animaciones o micro retracción Entonces hay algunos sitios web como este ItatVideo. Puedes obtener animaciones o croon como esta notificación de texto, así como esta nación de datos de las redes sociales, este interruptor de herramienta Bien. Este es el logotipo verificado. Esto es la animación de carga. La barra de proceso. Entonces hay un montón de eso. Solo tienes que ir a este sitio web. Voy a agregar esto a los recursos. O simplemente puedes ir a este sitio web, Jitter dot video. Y hay otro llamado archivos. Este es uno de los mejores sitios web. Y es gratis. Supongo que es de uso gratuito. Déjame mostrarte algo de animación en esto. Bien, entonces estas son algunas animaciones. Animación pequeña, pequeña y micro inacción, que puedes descargar y usar en tu pigma Creo que también tienen plug in. También puedo descargar plug in y usarlo en tu pigma. Bien, entonces déjame mostrarte una como una animación realmente genial. Acabo de ver en este sitio web. Entonces si tengo mi ratón sobre esto empieza, como pueden ver se convierte en cohete. Y hay un poco de animación detrás de ella fuma igual con esta, como puedes ver, las manos de gato entran y dice, no me toca Hay un montón de ejemplos. También ve a este sitio web y consulta la animación. Bien. Esto también se ve realmente genial. Entonces sí, estos son algunos ejemplos. Ahora opta por las fuentes de diseño y anula el poder de la micro retción y la animación A lo creativo es despertar que realmente grafica. Recuerda, siempre pon a tu usuario primero. Y la magia fluirá. 89. Animaciones increíbles de Button en Figma: ¿Cuál es la diferencia entre buena interfaz y una excelente? Son unos pequeños detalles, el movimiento de la magia lo que nos hace decir. Vaya, eso es genial. Una de las formas más fáciles de rociar la magia son los botones de ancho y meted Así que olvidó aburrido cuadrado estático, estamos hablando de botones que pulsan, botón que bailan, abotona esa boca y transforman ante tus ojos. Botón que se convierte en una pequeña puerta de entrada a emocionantes posibilidades. Podrías estar pensando pero ¿cómo? No te preocupes. No necesitas ser un asistente de codificación. En este video de la tarde, estamos desbloqueando el secreto de la animación, convirtiendo tu humilde botón Agregar carrito en la interfaz de Tara Entonces déjame mostrarte una magia. Si hago clic en el botón Addo cart, cambia a esta animación realmente genial Y si hago clic en este botón Mas, y vuelve a cambiar a botón Al carrito. Entonces en este ido estamos ba diseñar esto. Bien, entonces tengo mi página de detalles del producto, y voy a hacer copiarlo y este va a ser un botón de ir. Entonces cambiemos este texto en. Voy a encogerlo a cuadrado así y dejarme agregarlo al centro. Bien, ahora está en el centro, así que déjame copiar esta página otra vez, y esta va a ser nuestro ir a tarjeta a tarjeta En último fotograma, va a ser un lado derecho como este, y voy a agregar algunos Ahora voy a agregar botón más y botón menos. Bien, entonces diseñé este botón, y déjame cambiar un poco el color. Actualmente, es anhelo dos, y voy a elegir a Cray uno, y pongámoslos en marco. Cuadro P de control. Bien, así que estas van a ser nuestras cuatro páginas, y vamos a agregar esa animación realmente genial como esta. Bien, ahora vayamos al prototipo y agreguemos algo de animación. Entonces, si hago clic en esto, tiene que cambiar a esto. Primero, escriba navegar a la página de detalles del producto, y el animate inteligente está adentro está fuera y 300 milisegundos, va a ser lo mismo para esta, esta Bien, entonces ahora voy a agregar una animación, pero tiene que ser después del retraso. Entonces para esto, voy a elegir Portal pitch segundo. Entonces, por favor, olvidé la convención de nomenclatura porque soy muy mala para nombrar, así puedes llamarlo Pot less one, Polos dos, pro tres, así Bien. Ahora, agreguemos después del retraso. Entonces si hago clic en esto, después del retraso, tiene que cambiar a esto, luego después del retraso, cambiar a esto. Y nuevamente, después de la demora, cambie a esto. Entonces esta va a ser nuestra animación, pero la animación. Entonces actualmente son 800, pero vamos a configurar hasta 300. Y todo va a ser igual. Lo mismo con este. Entonces Figma recuerda los ajustes antiguos de este vtype así que tendremos los mismos ajustes, pero tiene que estar encendido después del retraso, 800, pero Bien, entonces terminamos con la animación. Aún queda una cosa, pero comencemos con ésta, ¿funciona o no? Bien, sin motivo, las imágenes. Ahora es visible. Entonces si hago clic en esto, tiene que ir, ir a Carrito, y éste. Hay una cosa que queda es que no podemos volver a nuestra primera página. Esta página. Entonces vamos a animar a éste Vamos a hacer clic en este botón menos. Si hago clic en esto, tiene que ir a Agregar al carrito. Bien, entonces de barril, ve a Acard y está entrando y saliendo atrás e imine es 300 Si quieres, puedes elegir uno de estos, pero a mí me gusta este, así que voy a elegir este. Y si vuelvo a hacer clic en el botón menos, cambia a agregar a tarjeta. Y es realmente satisfactorio. En el carrito, vaya tarjeta, y este botón más. Si lo desea, puede agregar en otra página y aquí, y si da clic en el botón más, cambiará a dos. Entonces hagámoslo. Vamos a copiar esta página. Y el número tiene que ser. Bien, déjame subir el protrape eres un poco dos. Si hago clic en el botón más. Entonces déjame agregar ahora tipo pro. Bien. Si hago clic en el botón más, tienes que ir aquí. Si hago clic en el menos, tienes que ir a la página principal. No diseñamos nuestro botón de ir a la tarjeta, significa botón de tarjeta. Lo sentimos Página de la tarjeta, puedes diseñar eso. Será tu proyecto. No te preocupes. Bien. Ahora tiene que funcionar, así que vayamos a menos menos. Bien, pero tenemos que volver a ir con esta página. Esta página. Si puedo dar click sobre esto, entonces irá a la página principal. Va a ser éste. Bien. Empecemos desde el principio. Bien, en el carrito, ve, ve al carrito. Entonces conseguimos este botón plus y administrar, que podemos usar para cambiar la cantidad de nuestro producto. Digamos que quiero comprarle otra a mi hermano. Sólo puedo hacer click sobre esto. Pero digamos que tu hermano ya ordenó este, así puedes hacer click en el menos así. No tiene que funcionar así, déjame reiniciar de nuevo en la tarjeta del carrito luego más y luego menos. Bien, hay algo que me falta aquí. Bien, puse esto en el más uno. Tengo que fijar para el menos uno. Y déjame hacerlo éste. Entonces ahora tiene que funcionar. Bien, entonces déjame comprobarlo. Botón Plus. Bien, está funcionando. Si hago clic en el menos, va a uno, y si vuelvo a hacer clic en el menos, agrégalo al carrito. Bien, entonces esta es nuestra animación de botón pequeño. Hay versiones que he creado. Son versiones realmente locas. Como pueden ver, está por aquí. Se puede ver el multiverso del protipo también agregué este toggle Si hago clic en esto, cambia al modo oscuro. Entonces déjame mostrarte cómo funciona. Actualmente, está en la oscuridad. Si hago clic en este toggle, cambia a mod blanco, el modo de luz. Y déjame mostrarte magia unos a otros. Si pongo el mouse sobre una tarjeta, como pueden ver, se cambió a este botón realmente genial Botón verde Y si hago clic en esto, Como pueden ver, hay una animación realmente genial. Sé que es un poco largo y abrumador. A algunas personas les va a gustar. Algunas personas no lo harán. Pero es tu creador oice si estás trabajando tan bajo, entonces hazlo Pero si estás trabajando en proyectos, proyectos reales, no hagas eso. Puedes ir con este, que creamos, A más menos, así. Como puedes ver es realmente satisfactorio. Es muy fácil crear esta animación, pero hay que hacer muchos prototipos Entonces solo aprendemos sobre este botón de animación. Ahora es tu turno. Tienes que crear esa misma animación. Es tu tiempo de proyecto. Es hora de poner a prueba tu nueva habilidad de fuente. Tu emisión será diseño y animación. Pero eso no es sólo un tapón funcional, sino un show stopper. Piensa fuera del experimento bob y deja que tu creatividad brille. Y sé que algunos de ustedes podrían sentirse seguros. Entonces, aquí está su desafío para dominar verdaderamente el arte de interactuar con el diseño. Este interruptor anole que cuando hizo clic trasfm todo su evento en el modo oscuro de azulejos elegantes Recuerda, si te quedas atascado, no te preocupes. Abordaremos componentes interactivos en nuestra próxima aventura figma Entonces estadio para eso y todas las instrucciones se proporcionan en nuestro archivo de ejercicios del proyecto Figma Ve ahí, sigue eso. Yo primero tienes que diseñar esta imitación de botón de animación. Después de eso, si te sientes un poco desafiante, crea esta palanca para cambiar la interfaz a modo de ambiente claro a modo oscuro. Entonces, el poder de la animación a tu alcance, recuerda, crear diseño se trata de detalles, y los botones de cola animada son los detalles que llevan tu interfaz al siguiente nivel Así que adelante, anima y haz que tu diseño cobre vida. 90. Proyecto 16 Añadir al carrito Animación de Button: Diseño para dar la bienvenida de nuevo a otro proyecto Figma. El día de hoy es el Proyecto número 16. Hoy, nos sumergimos en el mundo de la micro interacción. Esas diminutas animaciones que hacen que tu app se sienta suave, pulida y tan encantadora. Prepárate para llevar tu juego de diseño al siguiente nivel. Ahora, pise, Compra hasta bacalao. Vamos a crear una experiencia de compra satisfactoria. Imagine que el cliente hace clic en ese botón tentador para cortar, repente, si se trata de una animación rápida, se transforma en un botón co más pequeño lleno de acción Pero la diversión no se detiene ahí. Como por arte de magia, aparece un carrito de compras con una animación genial para ir al carrito. Ahora, eso es lo que yo llamo un fácil de usar. Ahora, saltemos al paso dos de control de calidad en la punta de los dedos. Espera, aparece un botón de aumento y disminución del producto más repentinamente resbaladizo al lado del botón ir Imagina el flan teclee el botón más oh Otro artículo aparece mágicamente en la Pero, ¿qué pasa con la eliminación de un artículo? No hay problema. Las sopas menos buttom en reducir la cantidad y adivinar la fecha, transformando el botón de nuevo en una tarjeta ¿No es eso limpio? Ahora, paso tres, Compra tu obra maestra. Ahora que tus compras han sido suaves como la mantequilla. Vamos a capturarlo para que el mundo lo vea. Toma una foto limpia de tu obra maestra y súbela en la sección de proyectos. Celebremos esos perfectamente menos píxeles. Hay un pequeño reto. En proyecto, es solo un reto. Vamos a diseñar el interruptor de palanca de modo oscuro elegante. Imagina que el usuario hace clic en ese interruptor, y con una animación suave te transformarás en una atmósfera fresca de alquitrán. Pero hay un más. Queremos asegurarnos de que el texto sea nítido y capaz en un molde oscuro. Probemos esas sombras y asegurémonos de que el texto brille brillante contra el fondo targ Aquí es donde entra en juego tu habilidad de diseño. Bien, así que recuerda, la microción se trata de esos detalles sutiles que marcan una gran diferencia Así que el experimento telefónico, refina esas animaciones, y no olvides compartir recreación en sección de proyectos hasta la próxima vez seguir diseñando con deleite. 91. Modo oscuro y modo claro de Project 17: Fimo, ¿estás listo para agregar un toque de tu magia a tu app Hoy sumergiéndose en el mundo de los componentes interactivos. Famosa arma secreta para crear esos suaves es una característica amigable que hace que tu aplicación se destaque. Tan listo para fabricar y captar el interruptor de torre que tu aplicación a la perfección en luz más para tomar mole. Entonces recuerdas en Proyecto 16, te di un reto en que tienes que crear el mismo efecto sin usar componente interactivo. Ahora ya sabes cómo usar componente interactivo, para que puedas completar este proyecto. Así que los Sapones se convierten en un maestro toggle. Imagínese, use un interruptor de grifos y po su aplicación transforme de brillante y brillante a una atmósfera de tak fresca. Ahí está el poder de Tarc More toggle. Usemos los componentes interactivos de figma para construir esta magia Crearemos dos estados para el interruptor, uno para luz más y otro para oscuro Más. Piense en ellos como dos caras de una misma moneda. Ahora, paso dos tiempo de animación. Ahora, agreguemos algo de quinto. Imagínese cambiar suavemente, deslizándose entre el grifo de dos estados. Esta animación hará que la experiencia del usuario se sienta pulida y deliciosa. Paso número tres, abraza la oscuridad. modo Tark es increíble, pero la legibilidad es una clave Necesitamos asegurarnos de que el texto de tu aplicación se mantenga nítido y claro incluso contra el fondo oscuro. Aquí es donde entran en juego tus habilidades de diseño. Sombras explorias y color de texto para encontrar el equilibrio perfecto tanto para el modo claro como para el modo oscuro Las paradas muestran tu obra maestra. Una vez que tu Mtogle oscuro brille más brillante que una bola de discoteca, captura toda su gloria Toma una foto de la ciudad y sube a la sección del proyecto. Celebremos esos píxeles perfectamente elaborados. Y también puedes compartirlo en tus redes sociales, y puedes etiquetarme ahí. Recuerde, los componentes interactivos son su puerta de entrada para crear una experiencia de usuario deliciosa Así que diviértete experimentando, refina esas animaciones, y recuerda compartir tu obra maestra más oscura con el mundo. Un tiempo de azulejos, sigue diseñando con magia Figma. 92. Proyecto de diseño de páginas de productos y carritos para iPhone con Class Project 18: Todos se preparan para mostrar la habilidad de UX en el proyecto TS. Estamos profundizando en el diseño tanto de la página del producto tarjeta Experience para el iPhone más reciente en la aplicación de tarjetas de clic. Recuerda, la increíble página de Nike que creamos. Esta vez, estamos tomando a b con corte de Ste. Entonces, como antes, creamos esta página de productt para Nike Entonces en este proyecto, hay que diseñar una misma página para iPhone 15 Pax. Déjame mostrarte. Bien. Esta es la página de autos que la diseñé, y en este proyecto, también hay que diseñar la misma página también. Y tienes que diseñar exactamente la misma página para iPhone. Solo hay que reemplazar imágenes, texto y algunos iPhones nuevos de color y alguna especificación para ellos. Entonces podrías estar pensando por qué este proyecto. Dominar el diseño de la aplicación Commerce es todo acerca de la perfección. Este proyecto te desafiará a crear una página de producto de captura. Puedes exhibir el iPhone con imágenes impresionantes que resaltan las características clave y proporcionar detalles muy claros Optimice el carrito para una experiencia de pago sin problemas. El diseñador utiliza una experiencia de tarjeta amigable con control integrador y confirmación de pedido Aplica tus habilidades de UX. No solo diseñes una página hermosa, hazlas intovativas y eficientes para todos los usuarios Adopte el aprendizaje independiente. Tendrás recursos a tu disposición, pero la elección de diseño somos Nosotros, experimenta, explora y aprende de tu creatividad. Entonces primero, hay que diseñar este producatLPG para iPhone en que agreguen imágenes, características del iPhone, almacenamiento de Hama así Proporcione especificaciones comparativas, colaboración y opción de accesorios con el nuevo icono de puntos Boler. O un lenguaje consciente como aquí, lo demostramos para esto, hay un solo color con este producto, así que solo agregué para quemar. Pero nuevo iPhone, tenemos titanio azul, titanio natural, negro, blanco, algo así. Se puede agregar eso. Para que pueda eliminar esta sección de tamaño y también mostrar la prioridad de precio de la selección de color de almacenamiento imprudente y diseñar un botón effectul add to card como Y también hay que exhibir verificar el uso de calificación de estrellas y comparación con otros smartphones. Si es posible, puedes agregar otros smartphones como lo hace Amazon, si seleccionas algún smartphone en Amazon o cualquier producto electrónico, te da un poco de comparación entre ellos, como digamos iPhone para elegir entre iPhone y 24 ultra. Entonces lo haré yo te diré la comparación. Si quieres hacer eso, por favor hazlo. Estaré muy orgullosa de ti si hacemos eso. Ahora tienes que diseñar esta página de carrito. Como pueden ver en mi pantalla, diseñé esta página. Estaba pensando que no voy a diseñar esta página, pero sin mi página de tarjeta, no hay app de comercio, así que tengo que diseñar esta, y esta es la mi versión. Entonces en esta página, tienes que mostrar la imagen del producto, cantidad y precio de cada artículo así, cual lo hice por aquí, y permitir ajustar la cantidad o eliminar artículo, primer lugar, así, usando el botón más Ms. También puedes usar la integración de código promocional como facilidad, aplicar cupones o disconde lo cual lo hice por aquí Y también puedes agregar un método de pago. Al igual que en la India, tenemos transferencia banc directa UPA así como algunos otros métodos Digamos que en tu país, tienes mastercard, así puedes agregar un botón, como, seleccionar una tarjeta, algo así. Así que recuerda, esta es una oportunidad para brillar. No tengas miedo de experimentar y mostrar tus versiones de diseño únicas. Entonces habrá algún estudiante. Sé que van a comentar mi curso, como él acaba de dar el proyecto. En realidad no está haciendo el trabajo. Pero el problema con los cursos es que la gente como que solo te están alimentando con cuchara y yo no quiero que te den una cuchara Quiero enseñar cosas reales, como si te enseñara algo como cómo crear cupón y es un reutilizable. Entonces hablo de esto, y puedes crear lo mismo como este con el mismo concepto, así no quiero cuchara f ti. Tienes que experimentar, y tienes que aplicar lo que has aprendido. Entonces ese fue el lema principal de este curso. Así que prioriza la experiencia del usuario y haz que ambas páginas sean integrativas y eficientes Utilizar los recursos proporcionados, pero recuerde que el aprendizaje independiente es la clave. Más modalmente telefonear y disfrutar del proceso de creación de una página de producto brillante para iPhone y tarjeta Para el último iPhone en tarjeta que tengo. También proporcioné todas las instrucciones sobre ti, como para la página del producto, así como para la tarjeta, y hazlo. Envíame después de completar la captura de pantalla del tomador o puedes grabarla y convertirla en archivo de regalo Y entonces ya te lo dije, puedes ir al sitio web de B, Auto y de ahí, puedes convertir esto en archivo de regalo y enviarme en la sección de proyectos, y también puedes compartirlo en redes sociales. Entonces eso es todo sobre este proyecto. Diseña mi tarjeta. Diseñar mi página de producto, si y envíeme. Eso es un video de fotos, y los veré chicos en el siguiente. 93. Micro animaciones con componentes interactivos en Figma: Alumnos B. En video anterior, te di un reto. No formaba parte del proyecto. Solo fue un reto desafiarte. Bien, así que te dije que crearas este interruptor de palanca que puede cambiar tu interfaz móvil en modo de conversación a modo de luz o modo de luz a modo de conversación así. Creo que lo has creado, y si lo has creado , estoy muy orgulloso de ti. Sé que has creado usando el método tradicional, pero hay una cosa en Figma llamada componentes interactivos Entonces en este video, estamos aprendiendo esa técnica, y vamos a crear el mismo interruptor de palanca usando componente interactivo. Así que diseñemos un simple toggle. Todos sabemos cómo hacer eso, elipse simple, luego rectángulo, y agreguemos rectángulo, algunos bordes redondos, 50 Y voy a añadir esto dentro dentro del rectángulo. Este es el interruptor, y déjame cambiar el color. Entonces será nuestro modo de luz, y este va a ser un para dejarme cambiarlo a negro. Pero el toggle la elipse pequeña es supongo que en la parte de atrás. Así que déjame mandar esto a la espalda. Bien, entonces esto está ahora en el frente. Ahora, vamos a convertirlo en algas de control de marco. Ahora, vamos a crear esto en componente maestro. Crear un componente. Y ahora tenemos que crear una variante. Esto se puede hacer desde aquí así como desde aquí. Vamos con éste. Y ahora tenemos un componente. Entonces voy a cambiar de lugar. Este va a ser nuestro botón de apagado, Negro y la otra parte va a ser blanca así. Esto va a ser negro. Desajuste el color. Bien. Bien, entonces todos conocemos lo básico. Esto fue lo básico, pero lo repetí para ti. Bien. Así que ahora vamos a crear componentes interactivos. Entonces vamos a Ptype. Quiero que cuando haga clic en esto, tiene que cambiar a este botón. Actualmente, estamos en el modo de luz, y si hacemos clic en este, tiene que cambiar al modo de conversación. Bien, entonces déjame escribir esto. Y de barril, tendrás que ir a dos, y la esquina B está dentro y está fuera paquete y 300 milisegundos. Ahora bien, si uso esto en cualquier marco. Bien, entonces voy a agregar este botón por aquí. Entonces vayamos a asset, y este va a ser nuestro botón. Así que vamos a trag. Bien. Entonces ahora si hago clic en el piso, y puedo usar este botón. Pero no vuelve a convertirse en modo de luz, así que tenemos que volver a cablearlo. Ptipearlo. Bien. Entonces si hago clic en esto, tienes que ir a la normalidad. Cambiar a la propiedad uno, por defecto. Bien. Ahora tiene que funcionar, luz ligera Mota ver el color de la página y el color del botón es el mismo Por eso está en el mismo modo, pero podemos cambiarlo. Tomemos la página de datos del producto real para que tenga la idea de cómo funciona. Voy a copiar esto. Vamos a este prote porque no lo quiero ahora mismo Bien. Déjame para el anterior pero quiero que este botón esté por aquí, aquí, lo voy a poner por aquí. Creo que hice esto demasiado grande así que permítanme reducir un poco así. Ahora se ve bien. Y la colocación también es buena. Habrá otro lanzamiento. Eso va a ser un tono negro. Pitch pop para firmar. Déjame cerrar la báscula. Vender. Va a ser negro. Ahora, hagamos un prototipo de esto. Si hago clic en ti. Actualmente, estás en modo de luz. Si hago clic en ti, tienes que cambiar al modo de conversación. En el toque Progal pitch, y smart animate está en un paquete de salida 300 Estos son los escenarios. Y también puedes llegar ahí. También puedes elegir otra opción, pero voy a usar esta. Bien. Agreguemos un flujo. Antes de agregarle flujo, hay un solo problema. Tómate unos segundos y trata de abordar el problema. Cinco, cuatro, tres, dos, uno. Bien. Espero que hayas encontrado eso. Y el problema es éste. Ponemos el mismo botón en la misma página, tiene que cambiar. Bien, entonces déjame cambiar esto a la segunda parte, así. Bien, entonces este es el modo de luz encendido, y este es el modo de luz. Bien. Entonces si le agrego un flujo, flujo inicial, flujo número diez, Bien, esto está funcionando. Bien, no usé la carga para protipo como este. Bien, ahora va a funcionar. O O, O, O. Ahora está funcionando, y como pueden ver, se ve muy bien. ¿Qué tienes para abordar algunas fuentes y algunos elementos también? Porque algunos son totalmente invisibles. Al igual que el de aquí, algún texto por aquí, así como este. Entonces lo cambias un poco. Entonces esta fue una pequeña micro animación, microinteracción, que creamos usando componentes interactivos Entonces para demostración, lo uso para estas dos páginas, pero si quieres, puedes cambiarlo para todo tu proyecto así. Si juego un pro número seis, y puedo elegir cualquier modo. Puedo elegir el modo oscuro o el modo de luz. Pero digamos que si voy a otra página, y si quiero cambiar otra página a modo de luz, puedo elegirla, y va a cambiar. No va a ir a primera página, como pueden ver, porque agregué mucho protipado Sé que parece un poco confuso, pero no lo es, es realmente fácil. Entonces ese es el beneficio del componente interactivo. También se puede hacer eso usando componentes simples, pero diré que use componentes interactivos. Arboles mas serviciales. Mantiene nuestro elemento organizado. Bien, entonces ahora quiero darte un proyecto. Creo que es el proyecto número 17, 18 nueve. Bien. Van a ser 80 s. así que tienes que convertir tu interfaz en modo negro. Oh, lo siento, en modo TAC. Usando este interruptor más alto. Bien, déjame cerrar esto Crea este interruptor estola, y cada vez que hagas clic en esto, tiene que cambiar a este modo. Si quieres, puedes usar este método, o puedes crear una otra página, como digamos, si haces clic en el menú de hamburguesas, burgermenu aparecerá y en ese agregar botón especial como Dark Moore y Y después de eso, agregue todo esto. No es necesario agregar un botón de modo oscuro en sola página si lo agrega en el menú Burger. Este es un método sencillo, pero si haces eso, estaré muy orgulloso de ti. Entonces, o puedes hacer esto o hacer eso. La mayoría de las veces, todas las aplicaciones tienen el modo de toque dedicado o el modo de luz en la opción de configuración. Para este proyecto, lo guardé aquí. Entonces, si quieres agregar eso a la página de configuración o a la página burgermenu, por favor hazlo. Entonces, eso es todo. Eso es todo acerca de los componentes interactivos, y creamos este modo de conversación y modo de luz realmente increíbles. Y también puedes agregar pegamento resplandor a este compuesto, como puedes agregar sombra y resplandor. Ya sabes cómo hacerlo. Así que sé creativo, elige colores. Si quieres cambiarte a otra cosa. También puedes hacer eso, ser creativo y eso es foto este video y completar el proyecto. Todas las instrucciones son todas las proporcionadas. Ve a ese video, sigue todas las instrucciones, crea este increíble. Crea el interruptor de estola y envíame en prosección. Si quieres compartir esto así, por favor compártelo. Entonces eso es todo para este video, voy a ver chicos en el siguiente. 94. Figma Prototipos de relajación y animaciones de primavera: Imagina que eras un prototipo, hermosa pantalla que muestra tu brillante diseño, pero falta algo Se siente lugar de vida estático. Ahí es donde entra en juego la relajación y la animación primaveral. ¿Estás listo para inyectar personalidades y pulir en tu trabajo Piense en la flexibilización como una fuente secreta de un movimiento. Controla cómo la traducción de objetos entre fotogramas clave el antes y el después de una animación. No hay movimiento robótico aburrido aquí, canta como matiz, creando animación que se siente natural y viva. Bien, entonces Figma tiene algunos presets incorporados, como lineal out in es out back, in back, algo así Entonces veamos uno por uno, qué son y qué hacen. Bien, entonces creé este efecto rebote de basquetbol. Entonces déjame crear una nueva otra vez. Y estoy usando nuestro viejo diseño de método, y vamos a enchufar scout busquemos baloncesto de canasta. Quiero gratis Let's CV versión gratuita. Las versiones gratuitas son geniales. Versión de desfile también, pero si vas a conseguir algo gratis, no lo dejes pasar. Esta p era la básquetbol que quiero. Actualmente es pelea bien quiero c y vamos a colocarlo en el centro, y voy a dibujar una sombra debajo de esta. Entonces siempre que mi canasta se mueva, así lo haremos hará algo de sombra como cosa. Déjame convertirlo en centro y canasta. Supongo que tengo que añadir eso en el marco. Al principio, estará por aquí y la sombra será así. Ahora vamos a copiar este tono. Yo sostengo la pelota de canasta no está dentro de esta. Sólo tenemos esta elipse, donde está Frafyspring Ahora tengo que eliminar este porque no tiene una pelota de canasta. El marco debería estar por aquí. Ahora la pelota de canasta está dentro, supongo. Déjame copiar esto, está dentro. Ahora, cuando baje así, sombra se volverá así. Bien. Este es un signo básico. Todos ustedes saben cómo funciona. Vayamos al prototipo. También puedes hacer esto usando componentes interactivos, pero tiempo usando marcos porque quiero mostrarte cómo funciona. Por ahora, vamos a unirnos a este frame después del retraso, después de un milisegundo, 500 es bueno Actualmente estamos en Smart mate y vamos a unirnos a éste también. Lo mismo. Bien. Después de retraso. Un milisegundo y actualmente es facilidad de salida. Vamos con un primero lineal. Entenderemos lo que hace lineal. Actualmente, ambos están en lineal no es lineal cerca Vamos a entender primero, lo que es lineal. Linar es la línea de desfostate. Piense en un viaje en elevador predecible útil para alguna situación, pero no para lo más emocionante. Entonces si juego esto, como pueden ver, hay un movimiento, pero es algo robótico, pero la elipse se ve bien Déjame agregarle algo de blandeza para que le tenga algún efecto hinchable. Así. Bien, yo toco esto otra vez, espero que tenga ese efecto especial de p. Pero en lineal, se ve raro, d. ahora, aprendamos sobre como en s estrella pico lento de velocidad como s estrella pico lento de velocidad un globo suave flotando hacia arriba, hace que el elemento que desaparece sea suave y se asiente Déjame ir a nuestro protipo Bien. Cambiemos por éste. Actualmente, somos lineales, así que vamos a elegir, pecar. Y si te muestro la gráfica real para ello, para el pecado, es así. Va a ir gentilmente así y así rápido. El eje X indica una velocidad lenta e índice del eje y. Si haces futbol así, una curva es así. Entonces primero, irá lento lento lento lento y a partir de este movimiento rápido. Déjame primero mostrarte la s luego vamos a ver a la costumbre. Bien. Entonces, como puedes ver, la animación se cambia. Al principio es lento, luego rápido, primero, lento, bajos rápidos pasando. Comienza lento y luego eventualmente toma una velocidad. Entonces esto está adentro. Ahora, aprendamos sobre la facilidad. Escojamos facilidad para ambos. Fuera es opuesto al pecado. Comienza primero y luego se ralentiza como una pelota que rebota hacia ti Es perfecto para enfatizar elemento importante o llamar la atención como éste. Como pueden ver, lo es. un efecto natural de bola que rebota Eso estuvo a punto de salir. Ahora, aprendamos sobre el pecado y salgamos. Es y fuera, esta entra y sale. Bien, estrella baja velocidad, luego vuelve a ralentizar, como una carrera a pleno apogeo en un patio de recreo. Qué elección para una animación más como esta. Como puedes ver en la animación, star slow speed up, slow down again. Entonces eso fue sobre el pecado fuera. Pero hay un más, W rebota corazón o juega brindis de notificación completa pres sin espalda y rebote te tienen cubierto Entonces, si elijo vamos a elegir hacia atrás. Y se uno está fuera Como pueden ver, se incrementa el rebote Voy a agregar algunos recursos así voy a agregar algunas curvas, gráficas, y todo eso. Entonces te darás una idea de cómo funciona real. Pero ahora, veamos cómo funciona la animación personalizada en Figma. Bien, entonces hay una cosa llamada curva Fa zer. No en Figma. Es un término matemático. Tiene curvas. Por lo que se llama curva zer. Y vamos a aprender eso en cliente aquí. Como pueden ver, estaba jugando con él. Entonces mi curva es así. Este grupo podría parecer intimidatorio, pero es más sencillo de lo que piensas Aquí hay un desglose rápido. El parámetro cuadrado representa los cuatro puntos que definen una curva de pieza Qubic como esta, y estos son los cuatro puntos Estos son los parámetros cuadrados, y estos son los cuatro puntos. Déjame mostrarte uno, dos, tres, cuatro, cuatro uno. eje X representa el tiempo y el eje representa la transición y propiedades como posición u opacidad, y estos son los fotogramas clave fijados en cero cero y uno uno, marcando el inicio y el final de la animación Actualmente echo de menos así que déjame doble clip. Como puede ver, pasó a su posición normal. Haga doble clic. Cero cero, uno. Estos son los mangos justificados. Arrastre esto para remodelar la curva y afinar el campo de animación Bien, juguemos con eso. Entonces esto es para los lentos. Y esto es para el primero. Así que acabamos de crear efecto. Si si lo sigo demasiado. Es raro. Tiene ese efecto gly sobre él. Hay algunos prote Digamos curvas como esta, fueron curvas así, y solo quieres ir al opoiti Yo hago clic en él. Haga clic en él una vez. Como puedes ver, fue también puedes agregar solo valor genumérico, actualmente vamos a agregar algo aleatorio Un dos seis, algo ahora mismo. Así es como funciona. Yo agrego el valor así. Bien, entonces quiero mostrarte una cosa. Sé que algunos de ustedes pueden sentirse intimidatarios, tal vez no puedan entender este tema, pero hay un enchufe único Quiero mostrarte un enchufe. Te va a ayudar mucho. Se llama. Y en este plug in, solo tienes valores o fotogramas clave como este. Si copié esta es copia y si la pasé por aquí. Esto, como pueden ver, captamos nuestra animación. Digamos que no eres bueno con el curso, y tampoco soy bueno con el curso. que puedas ir a este plug in, copiar cualquier fotograma clave de animación que quieras está por supuesto. Vamos con éste, y publícalo por aquí, y veamos cómo funciona o no. Si quieres conocer más sobre la maldición más ocupado, te mostraré un sitio web Bien, este es el sitio web sing dotnet. Obtendrás toda la maldición y podrás aprender sobre ellas. Me gusta Puedes dar click en la curva más transitada y conocerla. Si realmente quieres conocer la curva real, ve a este sitio web. Está en dotinato. Voy a añadir esto en los recursos también. Vaya a la página web y conozca esta curva. Y también tiene la animación dentro de él. Como digamos si elijo este, el pequeño toggle o pequeño punto nos muestra cómo funciona. Lento rápido. Rodajas de ayuno. Rápido bajo así. Bien. Ahora, aprendamos sobre la animación primaveral. La animación primaveral aporta una deliciosa elasticidad a los prototipos de siempre Imagina un botón que se mueve cuando se presiona o menú que aparece con una jugada de libras completas. Con preset como suave y Quit, es fácil agregar el estiramiento de la magia. Así que agreguemos algunos efectos de animación de primavera. Así que tenemos juegos de palabras suaves rápidos lentos y pantalla personalizada. Bien, entonces déjame decirte lo que hace gentil. Sutil saltar perfecto para sutiles reflejos cambios en el contenido Esto es lo que hace gentil. Si hago clic en esto. Permítame decirle esto también a gentil. A, lento. Tiene efecto rebote, pero si quieres resaltar alguna parte básica de ti entonces usa suave. También rápido Quick es rápido y también obtienes el pre así. Es como ZP spring ralentí para agregar Pep a las notificaciones Ahora vamos a dar clic en el abalance. Tiene ese efecto rebote, como se puede ver. Tan lento es lento, un suave resorte deliberante, ideal para escalar el contenido de pantalla completa con el gradual Bien, entonces estos son algunos preestablecidos que Figma nos proporciona. Ahora, aprendamos sobre la primavera personalizada. Si elijo resorte personalizado, como pueden ver, obtenemos la gráfica pequeña y pista de fuego esta así y la emisión será así. Animación primaveral. Y hay un punto. Este es un marco clave. Si me gusta esto, va a ser tan elástico, como se puede ver en la pantalla También podemos ajustar la rigidez para mayor rebote. Podemos tomar el dumping para suavizar las cosas, y podemos simplemente jugar con la máscara. Por lo que incluirá la pesadez a nuestro objeto. Por lo que actualmente son dos saltarinas. Déjame crear un resorte. Si le agrego una máscara a cinco, verán que tiene una misa. Siento que es pesado. Solo hay que jugar con la rigidez, dumping y la masa para explotar así los resortes. Pero me gustaría mantenerlo así, normal y sutil. Esta fue la diferencia entre animación primaveral y la animación psi. Esta animación transforma nuestro prototipo de estrato cautivador Agrega personalidad, llama la atención y guía al usuario con interacción intvtiva de relleno natural. Al juntar flexibilización y animación de primavera, transformará sus prototipos de figma de pantalla strtic a una experiencia interactiva que cautiva y se involucre, así que anímate con la confianza y dale vida a la visión del diseño Entonces eso es todo acerca de la animación. Aprenderemos sobre BC así como la animación primaveral. También aprendemos sobre todos los presets que Figma nos da canta, y este también suaves poms de pendiente rápida Así es como funciona la animación La mayor parte del tiempo, solo uso estas animaciones. Yo no voy por esta. Si tus proyectos lo necesitan, o si quieres hacer un proyecto realmente increíble que tenga mucha animación. También puedes ir por esta. Espero que entiendas todo sobre esta animación. Entonces gracias por mirar y los voy a ver chicos en la siguiente. 95. Animación de pulsos en Figma: Oye, los entusiastas del diseño. Alguna vez has sentido que tu aplicación necesita un poco de mp extra después del pago. Al igual que debería celebrar el momento con el bache visual de la fiesta. Estamos a punto de sumergirnos en el mundo de animación pulsante en Figma y confía Va a ser increíblemente increíble. Entonces como pueden ver en mi pantalla, tengo dos animaciones. El primero está en bucle uno y el segundo estable. Entonces si reinicio este marco, Como pueden ver. Primero sigue animando y el segundo se detuvo. Entonces de esta manera, vamos a crear éste así como éste. El segundo tiene una confidad. Bien. Como puedes ver, le da una especie de vibra a la celebración. Así que he estado vibrando totalmente cómo Pope y Google Pay utilizan esta animación para crear esta gratificación instantánea después Entonces pensé, ¿por qué no traer ese mismo nivel de satisfacción a nuestra app Y ahí es cuando los componentes interactivos sirven para salvar el día. Algunos de ustedes podrían estar pensando, podemos usar la forma tradicional como esta. Y lo usé. Funciona, pero no funciona como yo lo quiero. Entonces déjame mostrarte. Más orden. Después de eso, da la confinity y anima, y está Funciona. Tengo que trabajarlo un poco, pero como pueden ver toma un montón de espacio. Los componentes interactivos, por otro lado, son como los operadores suaves de los mundos del diseño. Son eficientes, son flexibles y están a punto de hacer nuestras vidas mucho más fáciles. Así que vamos a saltar a Figma y vamos a crear esta impresionante animación, no esta Bien, ésta, vamos a crear esta impresionante animación, que está en bucle y la segunda es estable Déjame tomar un espacio vacío por ahora. Entonces voy a elegir un marco, que va a ser 200 por 200. Bien. Entonces es mi elección personal. Si quieres tomar 500, puedes llevarte eso. O puedes diseñarlo según smartphone o tablet. Si estás diseñando para tablet, puedes aumentar la dimensión. Entonces primero, va a ser, voy a agregar tres círculos, y tres círculos porque tenemos que animar tres círculos dentro de él Bien. Así que sosteniendo turno. Y primero, van a ser sólo 50. Y lo voy a mantener en el centro así. Cambiemos el color. Voy a ir con nuestro decoloramiento Puedes usar uno verde, que te mostré antes. Entonces es totalmente depender de ti. Porque el color y debe ser conside en toda nuestra app. Entonces por eso estoy eligiendo esta. Ahora, déjenme copiar este control C, Control C, Control B. Como pueden ver, de 84, Ep 702-70-2702 Déjame cambiarle el nombre. Entonces voy a llamarlo P y C. No quiero confundirme. Ahora tenemos tres círculos. Ahora, déjame hacer un componente. Entonces podemos agregar variante y serán componentes interactivos. Entonces ahora agreguemos variantes. Bien. Tenemos segunda variante. Déjame elegir un segundo que va a ser B, y voy a cambiar esta dimensión hasta un 100 y voy a elegir pasar por 25. Puedes usar blimation si quieres, pero actualmente estoy usando esta Entra al centro así, y voy a agregar otra variante y en esta hasta 1205 O vamos a hacer hasta uno 50. Bien. Vamos al centro. Y pasar por éste. Vamos diez. Bien, es muy visible. Vamos 25. Bien, ahora es visible. Y agreguemos otra variante porque queremos darle un bucle. Bien, entonces en esta B va a ser invisible y esta va a ser hasta 200. Vamos a convertirlo en el centro. Veamos que funciona o no. Creo que cometí un error en alguna parte, pero probémoslo. El primero. Bien. Entonces después de retraso tras retraso, y quiero después de un milisegundo. El marco tiene que cambiar. Después de un milisegundo, debería ir aquí aquí después de eso por aquí, y me quedaré con dos 50 Lo siento, cuatro 50 porque uso múltiples valores, pero cuatro 15 se ve increíble en smart animate y facilitar . Seremos lo mismo. Lo mismo con este después de retraso y un milisegundo. Lo mismo con este. Espero que funcione. Un milisegundo y todas las cosas restantes son iguales. En ese momento, no vamos a utilizar la animación inteligente. Vamos a disolvernos. Te diré por qué estamos usando disolver y por qué no usamos la animación inteligente. Escojamos el marco del iPhone 15, y vayamos al compuesto. Espero que sea por aquí. Bien, está por aquí. Ahora, déjame tocarlo. Está funcionando. Está funcionando. Así es como lo quiero. Pero podemos hacer algunos cambios, podemos hacer este círculo primario, un poco más grande aquí así como O aquí, y dentro de él, podemos agregar una marca de verificación. Entonces sabemos que tu compra está hecha o el pago está hecho. Podrías estar pensando por qué estamos usando marcos. Podemos simplemente dibujar círculo en el espacio vacío y podemos Uh, solo vincularlos juntos. Sí, podemos hacer eso. Pero cuando estaba intentando esto, obtuve un error. Yo diseñé éste, y si trato de arrastrar esto aquí y si toco esto, como pueden ver, no está mostrando ningún lugar. Se está moviendo. Entonces por eso tenemos que mantenerlo dentro del marco. Entonces se queda en el medio y no se mueve a otro lado. Recuerda, una cosa es como uno de los elementos profundos más importantes tiene que ser igual. El componente tiene que ser el mismo, si quieres animar algo Si dibujas un círculo, copia éste. No tienes que volver a dibujar un círculo, porque si haces eso y si intentas animarlos, no va a funcionar Puedes agregar animación, animación inteligente en él, pero solo agregará el efecto disol, no el efecto de animación inteligente Entonces componente o elemento o cualquiera que sea tu forma, usa el mismo. Bien, ahora agreguemos algunas garrapatas. Voy a elegir icon scout. Déjame verificar, marca de verificación. Es una marca de verificación. Y voy a usar esta. Bien, se supone que tienes 25 por 25. Bien. Déjame cerrar esta. Está por aquí. Y permítanme disminuir la transparencia. También animará. Copia lo siento, duplicado y por aquí, serán 50 y aquí serán 100 cien, hazlo 100 y por aquí también 100. Bien. Entonces, si vuelvo a tocar esto, se verá más genial. ¿Eso puedes ver? Hay una cosa que podemos hacer. Podemos incrementar el círculo. Actualmente, es como 50. Hagámoslo hasta 75 y mantengámoslo en el centro. Lo mismo con este. Vamos 100. Déjame probar esta. Yo sólo quiero experimentar algo. Espero que funcione. Bien, funciona, pero al final, le agregamos animación inteligente a que se encoge. Entonces podemos mantener el tamaño del círculo medio, que es supongo 100. Déjame hacer ese centenar. Bien. Bien. Éste. Oh, deberías estar en el medio. Bien. Espero que esté funcionando ahora. Está funcionando, pero podemos agregar este efecto. O mantengámoslo como está. También se ve genial. Así es como creamos la animación. Hay una cosa que quiero mostrar, digamos que si eliges algún alambre de marco de alambre. En esto tenemos Este efecto ya proporcionado, pero en realidad puedes personalizar tu animación. Tenemos esta gráfica, que podemos usar los botones stoger y podemos aumentar nuestra velocidad de animación Si quieres hacer realmente awesoation en este caso, puedes usar este Te voy a mostrar cómo usarlo. Yo siguiente, así estrato para eso. También podemos usar esta o hay otra opción llamada resorte personalizado. También está aquí. También obtienes la vista previa de cómo funciona. Entonces, a continuación vamos a aprender esa. Eso es por nuestra opción de pago. Como pueden ver, creé este, toma mucho espacio, y se ve realmente feo. Déjame copiar esta. Bien. Permítanme agregar eso como una superposición. Entonces quedará genial. Pasemos al componente de 84, y esta va a ser nuestra superposición. Si presiono place order smart animate y está fuera. Y tiene que ser de barril y bolígrafo de animación inteligente. Comprobemos que está trabajando. Déjame crear un nuevo flujo para que pueda simplemente saltar sobre él. Bien, está funcionando. Eso es lindo. Podemos hacer nuestro campo transparente, por lo que se verá más fresco, luego f cero. Bien, ahora se ve genial. Se puede aumentar el tamaño del marco, y podemos agregar otra opción como déjame ir al marco, así puedo agregar esta, esta, y el fondo debería ser 50 así. Y si vuelvo a jugar esto, p orden. Como puedes ver, Background se vuelve un poco negro y nuestra animación aparece. En comparación con esta , como puedes ver lo pequeño que ocupa el espacio y lo fácil que es crear. Bien, quiero darte un proyecto con la misma técnica, tienes que crear esta animación, la animación de carga como esta. Así que pausa el video y hazlo y envíame en la sección de proyectos. Y podemos usar esta animación antes de esta. Al igual que si hago clic en el pedido de lugar, primero, se cargará por un momento y después de eso, cambiará a la casilla de verificación. Hagámoslo. Hagámoslo. Déjame ir al activo que está aquí el componente seis. Déjame rastrearlo por aquí. Actualmente los colores no son tan grandes, pero los cambiaremos más tarde. Déjame unirme a esto aquí. Y después de esto, deberías ir por aquí. Después del retraso, supongo, después del retraso, éste. Después del retraso, vaya a ese pago exitoso. Vamos a mantenerlo 800 mill segundos. Veamos cómo funciona. Hombre inteligente 450. Veamos cómo se ve lugar orden carga carga. Estoy tratando de agregar overlay después de unos milisegundos, tiene que cambiar Tiene que cambiarse por éste. Pero cada vez que hago esto, esta animación se detiene y esto funciona o a veces esto no funciona. No sé qué está pasando con FM o tal vez estoy cometiendo algunos errores. Déjame mostrarte si quiero intercambiar la animación, así que voy a vincular esta para esta y navegar para intercambiar superposición. Y todo va a ser igual. Pero como pueden ver, esto ahora no está ahí. Voy a elegir después del retraso. Déjame cerrar quitar lo anterior lo que digo, las cosas animadas anteriores. Después de retraso después de 800 milisegundos, tiene que cambiar. Pero si reinicio esto y si lo coloco, como pueden ver, la animación de carga, se ha ido y esta aparece y no hay nada en el frame. Pero si trato de hacer así, Si borro este, y si vuelvo a hacer el pedido. Como se puede ver, ahora es que no es visible. No sé qué está pasando en Sigma. Antes estaba funcionando y ahora no está funcionando. Y si me quito esto y si me uno a este en tap open overlay, todo va a ser el mismo orden de lugar. Como funciona y no está funcionando. Déjame cambiarlo otra vez. Seis más orden. Como pueden ver, es invisible. Entonces tengo que borrar esta y trato de agregar esta otra vez. Y si vuelvo a unirme a esto, llegamos a abrir overlay 95 plus order. Ahora funciona. Como pueden ver, creo que hay un burg tal vez estoy haciendo algo mal. Entonces si sabes cómo resolver esto, por favor avíseme porque actualmente así es como funciona. Lo quiero cuando haga clic en esto, rotará y después de unos segundos, esto tiene que abrirse. Creo que tengo que usar ahora el método tradicional. Entonces voy a borrar esta y voy a crear algunas páginas. Bien, ahora disminuyo lo contrario en ahora puedo agregar este componente en este centro. Deja unirlo Ptype después de hacer pedido, tienes que ir por aquí y en tipo, tienes que estar en cinta, y me quedaré con todo este Podemos usar smart ation. Vamos a usar smart mon. A veces da realmente ank animación. Entonces eso no me gusta. Ahora está funcionando. Ahora, también se ve genial. Se está procesando y después de retraso, por lo que irá a éste. Después de 800 milisegundos, irá a éste y agregaremos la segunda animación, que es esta Ir al Centro. Déjame a cero a cero, PL cero. Ahora déjame probar cómo funciona. Además de ordenar y después de 800 milisegundos. Se transforma en éste. Así es como quería crear usando overlay, pero no sé si me estaba dando errores realmente raros. Podemos aumentar el tamaño del tiempo de retardo. Puedes sumar hasta 202,000 segundos, 2000 milisegundos, déjame platear de nuevo, fluir 19 más orden después de 2 segundos, cambiará a este Esto es genial. Y también podemos agregar preen exitoso, y podemos aumentar todo de ti Déjame borrar este y puedo copiar éste, en realidad. Ahora puedo reemplazar mi dist este. No se elimina. B se supone que debes estar en el centro y sentir tiene que ser cero. Y creo que se supone que tienes 25. Bien. Este también debería ser 25. Bien. Ahora está funcionando. Como está funcionando. Restablecer. Déjame restablecerlo. Bien. Flujo 19 hacer orden. Se cargará durante 2 segundos. Después de eso, no me uní a la página. Bien, déjame unirme a esto después de un retraso, 2000 milisegundos. Smart animate y cuatro 50 serán estos fuera. Ahora, juguemos. Haz pedido, retrot por 2 segundos. Ahora, el pago está hecho. Y también podemos escribir pago exitoso. Bien, entonces agregué el texto de pago exitoso. Déjame rehacer esto. Cargando cargando cargando y acertado. Como puedes ver, se ve realmente genial. Se puede aumentar el tamaño de la fuente, pero yo estoy como en esta , así que me quedo con esto. Así es como creamos esta animación, la animación de carga así como esta animación de clic, que emite una ubicación ligera Tu trabajo es crear esta animación de carga. Espero que lo hayas hecho, y así es como se ve. De hecho hay que diseñar el primer círculo así. Déjame mostrarte en panel. El primero es ps, y después hay que recortar el ps. Tienes que usar estos botones togle. Déjame mostrarte como los togletons y ellos como este, y colocarlos encima de esta elipse y simplemente cambiar la posición en cada fotograma y usar componentes interactivos, unirlos prototipo y ajustar el valor, y funcionará así Si sabes cómo resolver esa superposición, por favor házmelo saber y sé que cometí un error. A lo mejor no soy capaz de resolverlo ahora mismo. Pero si lo hice, actualizaré este video. De esta manera, aprendimos sobre cómo usar componentes indirectivos así como cómo crear éste éste Eso es, supongo. Eso es. Entonces eso está a punto de hacer, y los voy a ver en la siguiente. 96. Proyecto de clase 19: el clic final: terminará el diseño de tu aplicación de Clickkart en Figma: Bueno diseño anotó, ya estamos en el juego final. Así que amor, diseñamos aplicación kick card desde el tramo hasta el fondo. Aprendimos sobre wireframe. Además, diseñamos UI, también aprendemos sobre micro interacción, así como animación, así como prototipado Entonces este es tiempo de proyecto. Este será el proyecto 15 17, no sé, quizá 19. Bien, entonces este será el proyecto 19. Entonces, si crees que falta algo en esta app como página de pedido o Carrito, tal vez sé que me perdí el carrito. Puedes agregar eso así como si quieres agregar algo nueva página, diseñar desde cero. Diseña wireframe, luego diseña tu interfaz de usuario, luego toma inspiración, agrega colores y todo eso, y agrega un diseño. También agregue protipado Si quieres puedes agregar animación. Y una vez que tu obra maestra esté lista, es hora del espectáculo. Toma una pantalla de todas las pantallas y cárgalas en la sección del proyecto. Y no seas tímido, comparte tu magia de diseño en redes sociales. Etiqueta a tu amigo. Tal vez crear uno gracioso hastag Deja que el mundo vea tus increíbles habilidades. Imagina que tu diseño podría volverse viral. Entonces hemos estado construyendo golpe de estado en Figma como esos matan WiFi y prototipo, pero adivina lo que nos estamos graduando ahora A partir de la próxima, las cosas se están poniendo reales. Estamos ting proyectos individuales. Piensa en que es como conseguir tu propia nave espacial y volarte para diseñar tus propios planetas Escogerás una misión, construirás un mundo y lo harás increíble. No te preocupes, no estás totalmente perdido en el espacio. Soy un robot de confianza patada lateral zumbando con consejos y trucos Dios acciones, no hay problema. Autobús de regreso a esos viejos tutores. Son como tu curso de hoja secreta. Y adivina qué. El próximo proyecto va a ser épico. Te lo contaré pronto, así que ponte bombo. Hasta que siga jugando con Figma, siga aprendiendo y prepárese para sobrepasar superpoderes de diseño en el mundo Entonces eso es un campeón. Has conquistado la aplicación de tarjetas. Sube de nivel tu habilidad, y ahora estás listo para conquistar el mundo con los superpoderes del diseño Así que ve y crea. 97. Cómo pongo una miniatura o portada de proyecto en Figma: Hola a todos de esta manera, vamos a abordar un tema. Eso podría estar volviéndole un poco loco. Una miniatura predeterminada en Pigma. Entonces como pueden ver, esta es una versión clickt uno, y no hay miniatura, y no sé qué hay dentro Apenas puedo ver los componentes. Pero si voy a archivos comunitivos importados, como pueden ver, son muy precisos y puedo ver lo que hay dentro Lo mismo con este 111 este. Y así como con éste. Pero nuestro archivo no tiene miniatura. Sé que es triste. A veces están bien, pero otras veces terminan mostrando algo que no representa al archivo real, y eso puede ser frustrante Entonces déjame mostrarte cómo personalizar una miniatura, hacerla más inactiva del contenido de tus documentos Oh, así que vayamos a nuestro expediente. Esta va a ser nuestra versión clickout uno. Quiero una página separada que sea nombre miniatura. También puedes ponerle el nombre que quieras, pero en este caso, voy a ponerle nombre miniatura Bien, agreguemos la miniatura de la tarjeta de clic. Entonces me voy a confundir en el futuro. Bien. Entonces no hay nada en esta página, así que vamos a los marcos. Y en la comunidad FIGMA, tenemos tapa de archivo de barra diagonal enchufable. Así que vamos a elegir eso. Es 90 20 en uno 20 píxeles, y actualmente está vacío. Entonces quiero estas páginas en la pantalla como las tres primeras páginas. Por lo que actualmente, los voy a exportar. Sé que voy demasiado lejos. No te dije cómo exportar archivo, pero sigue, simplemente no te centres en él porque vamos a aprender a exportar ahí dentro. Entonces voy a elegir este turno de archivos y exportar, quiero que esto sea en PNG. También puedes elegir diferentes formatos como JPA SPG P. Voy a elegir PNG porque PNG funciona mejor las imágenes y exporta tres capas Bien, entonces quiero que esto sea en dólares. Bien, entonces estas tres páginas se exportan ahora. Están en PG y supongo que la calidad también es genial. Vamos a saltar a nuestra página. Eso se llama miniatura mentiroso, y déjame importarlos dentro Bupa, vamos. Vayamos por aquí. Como puedes ver, son imágenes, no los marcos reales. Ahora quiero que esto se arregle así. Vas a estar por aquí, vas a estar por aquí así como éste, así que voy a fusionarlos juntos. Y empacemos un marco, supongo. Vamos a convertirlos en marco para que se peguen juntos. Selección de marco. Entonces son marco ahora, y voy a extenderlos. Déjame hacerlos grandes así que estamos en un pk por escala. Hagámoslo grande así. Entonces como pueden ver, esto va a ser thobil pero podemos agregar algunas especias. No especias reales. Podemos girar rotar un poco y agregarlo así. Bien aquí también. Ahora se ve genial y quiero que esto sea un uminil. En este caso, sólo puedo hacer clic en este marco marco real. Haga clic derecho sobre él configurado como una miniatura. Pero hay un problema. Entonces, si voy a casa, como pueden ver, aún no está actualizado. Me está volviendo a mostrar componentes. Entonces para este trabajo de dos, tienes que resetear tu soft. No sé cómo funciona en web, pero en soft, tienes que establecer tu soft. Suave. Si estás en Windows, siempre es abrir la opción de acceso directo, así que cierra eso también. No sé por qué. Entonces déjame abrir fi Margen. Entonces como puedes ver, ahora se actualiza y se ve más genial, y podemos ver que este es el carrito. Bien, doble en ello, y actualmente estamos en thumbl vamos a contratar déjame volver otra vez. Como se puede ver. Tenemos thumil Si quieres puedes tomar una captura de pantalla de esto, déjame mostrarte Al igual que, si estamos en windows, puedes ir a la herramienta de recorte y hacer clic en ti Puedes tomar una captura de pantalla de esto así y guardarla y usarla como miniatura Entonces te voy a mostrar cómo usar eso. Pero creo que la captura de pantalla no es tan clara, así que trato de importar cada fotograma, y luego los ajusto. Entonces funciona. Si en cualquier caso, captura de pantalla está funcionando, ve a por ello, y si quieres exportar un fotograma en PG también puedes hacerlo también. Hay una cosa que debes tener en cuenta que está en alguna versión, es posible que la miniatura no se actualice de inmediato Entonces, si eso sucedió, ciérrelo, vuelva a abrirlo, y el archivo debería estar ahí Las millas deben actualizarse. Además de personalizarlo, agrega tu toque de diseño y establece como una miniatura Entonces ahí lo tienes x designer una manera rápida y fácil de actualizar tu miniatura del archivo Pigma para representar mejor su contenido No más frustración con miniaturas aleatorias o desactualizadas. Si encontraste este estado útil para más trucos y consejos. Entonces nos vemos en el siguiente video. 98. Cómo exportar tu diseño de Figma como imagen (PNG, JPG, SVG, PDF): Entra en este video, vamos a sumergirnos en el procesamiento de exportar imagen desde Figma. Ya vimos cómo exportar en Figma mientras creamos este tumil pero en este video, realmente vamos a aprender a exportar, cuáles son las cosas que podemos hacer al Qué son las x, qué es sufijo, qué son los diferentes tipos de formato de imagen, y qué cosas tenemos en cuenta al exportar imágenes o tu proyecto Por lo que esta será guía de propósito general. Y en los próximos videos, exploraremos casos de uso más específicos para entregas y colegas. Entonces ahora comencemos con lo básico. Exportando FIMMas poco diferente de otros programas, como yo uso softs Entonces en eso cuando exportamos, solo tenemos que decir nombre así como la regulación del video, y solo tenemos que dar click en la exportación, pero en FimMA es diferente En FMA, tenemos que aplicar la configuración de exponer directamente a las u objeto, que queremos exportar Por ejemplo, digamos que quiero exportar este, y como pueden ver en n tenemos el botón de exportar. Da click en él, y cogimos este botón de exportación. Y ahora voy a aplicar algún ajuste de expo. Entonces Figma me permitirá elegir diferentes formatos de imagen. Así que piensa, ¿cuál es la diferencia entre PNG y JPEG? Algunos de ustedes podrían estar pensando, pensé que PNG y JPEG son lo mismo. No sabía que hay una diferencia. Entonces entendamos qué es JPEG. JPEG es genial para fotos y cosas detalladas, pero toma get y no puedes ver a través como las mágicas. Es bueno para el tamaño de archivo pequeño, bueno para la web, pero no para el texto o la transparencia. Pero PNG es opuesto a eso. PNG es una imagen cristalina. El texto es nítido. Se puede ver a través de las cosas, y todo se ve increíble. Pero al igual que Big photo album, el tamaño del archivo puede ser fuerte Utilízalo para el icono del logotipo y las cosas donde la calidad es más importante. Ahora, entendamos qué es VG. Imagínate un dibujo súper estirable que nunca se ensangrentará. No importa lo grande que hagas. Entonces en este caso, déjame llevar un logo. Entonces a cambia así si trato de escalar, hacerlo grande, como puedes ver, el píxel no se está pixelando Todo se ve perfectamente bien, y todo está filoso. Es perfecto para formas de iconos y cosas que necesitan cambiar de tamaño sin problemas, pero no a todas las aplicaciones les gusta, piénsalo como un tipo especial de imagen, y ahora pasemos al PIP Sé que todo el mundo sabe del PDP. Imagina una elegante carpeta de presentación con todo perfectamente dentro, claro, toma, imágenes. Tan genial para compartir el diseño terminado o presumirlo ante un cliente. Pero no se puede editar fácilmente. PID up es más probable encontrar una obra maestra que funcione en proceso. Intentemos exportar este cupón. Pero si trato de exportar esto como pueden ver, obtenemos esta opción como una x 1.5 x, dos X tres, hasta cuatro X así como esta 050 pelea el ancho y pelea wewel Entonces vamos a entender eso primero. Entonces en Figma, esos números 1x2x3 x. Se ve al exportar un factor de escala. Básicamente le dicen a Figma, qué tan grande hacer tu diseño antes de guardarlo como archivo Una X es el tamaño original de tu diseño, como el libro de recetas base No menos importante entender es dos x. Esto duplica el tamaño de tu diseño, haciéndolo dos veces grande que original imagina duplicar los ingredientes en tu receta para pastel más grande y lo mismo con tres x mismo con cuatro x. con tres x mismo con cuatro x. Multiplica cuál x Y el punto cero s f y el punto cero es opuesto a tres x y cuatro x por lo que hunde nuestra calidad de imágenes. Este factor de escala es útil para pantallas con un aislamiento diferente. pantalla de alta resolución necesita imágenes más grandes para evitar la pixelación Mientras que la pantalla de baja resolución puede manejar palabras más pequeñas. Usando el factor de escala, exportemos su diseño en un tamaño diferente para diferentes dispositivos. Asegurándose de que se vea crujiente en todas partes. Quizás quieras una versión más pequeña para tu diseño para pus. Mientras que uno más grande es perfecto para imprimir, factor de escala brinda flexibilidad. Ahora, vamos a entender lo que es 500 bien ancho y 500 alto. Entonces estas son dimensiones absolutas, es decir, especifican el ancho exacto y la imagen exportadora de top alto en una pixelación Es como darle a Figma un tamaño específico de molde de pastel. Me puse de pie solo diciendo el doble de la credencia. Ahora, intentemos exportar algo. Sé que eso fue mucha teoría. Aprendemos ahora mismo. Entonces actualmente vamos a exportar lo mismo dentro de una x, así como en dos x. Quiero esto en una, así como en tres x. Bien, agreguemos esto en cinco un ancho, así como cinco uno a ancho, pero voy a cambiar algunos valores. Voy a añadir uno de 50 de ancho. Quizás se esté preguntando cuáles son estos dos X a tres x a tres X. Estos son el sufijo que actualmente estamos exportando mismo elemento Entonces al final de la imagen antes de la extensión, como antes de PNG, primero dirá el nombre del componente que es cupón en nuestro caso, y después de eso, agregarán sufijo y después de esa extensión Entonces déjame exportar este por ahora. Sabremos cuáles son ellos. Voy a agregar esto en pueblos. Entonces se explotan todas las imágenes, y como puedes ver, estas son el sufijo como en dos x a tres x, y a tres x una Entonces estos son el sufijo. Entonces déjame ver la extensión. Bien, así que exploté en diferentes formatos como en JP así como en P así como en P y así como en SVG. Así que vamos a abrir primero el archivo JPEG. Y digamos la diferencia. Entonces como puedes ver con JPEG no conseguimos transparencia. Pero si abro el P G uno, como pueden ver, obtenemos transparencia. Y también puedes ver los diferentes tamaños como los tamaños de memoria reales. Para JPEG es 204 para PNG, éste y éste es para uno 50 de ancho. Es muy bajo, 70 K y para SG es 77 K. Pero beneficio con PG es como si intentamos importar esto en nuestro diseño, y si trato de escalarlo, zk, como pueden ver, no se está pixelando Entonces si quieres usar tus elementos o componentes en diferentes archivos de diseño, port en su fg Hay una cosa extra que quiero mostrarte como si voy a archivos y en exportación, como puedes ver, tengo 12 elementos dentro de él, porque hasta ahora, exporté 12 elementos de este proyecto. Esto te ayudará cuando quieras ver tu historia, como lo que piensa exportaste hasta ahora. Te mostrará las propiedades del mismo, cuál es el píxel, el cuero cabelludo, el formato p, y podrás exportarlos directamente de nuevo si quieres. Entonces esto es todo lo básico de exportar en Figma. Entonces de esta manera, cubrimos las imágenes básicas exportadoras de Figma. Así que declara para un caso de uso más detallado en los próximos videos. Si encontraste esta piscina, por favor no olvides avisarme, y los veo en la siguiente. 99. Cómo entregar tus diseños de UX como un PRO: Nosotros v en esto nosotros, te guiaré a través del proceso de exportación de documento Figma, cual puede ser útil para compartir con sus clientes, grupos de interés, equipo de desarrollo, equipo de diseño, participantes de investigación de usuarios Gerente de producto. Por lo tanto, exploraremos diferentes métodos , incluida la exportación de marcos usando herramienta de diapositivas y el intercambio de enlaces. Hasta que usamos todas las herramientas que están disponibles en Figma, pero hay una herramienta Esa es una especie de herramienta oculta, y no la usamos. Creo que te lo mostré, pero no usamos esto. Entonces en este video, también vamos a usar esa herramienta. Bien, podrías saber cómo compartir un proyecto. Tú solo cómo ir a compartir y copiar un enlace, y déjame presionarlo por aquí. Podemos copiar este enlace y compartirlo por correo electrónico, cuál es lo que sea tu elección, y también puedes compartir protipo Simplemente comparte protipo copia el enlace o también puedes invitarlos y configurarlos como solo verlos y compartirlos con ellos. Esto es lo mismo. Entonces déjame copiar esto. Copiar enlace T para texto. Bien. Entonces este es uno de los métodos clásicos que más utilizas. Pero digamos que quieres compartir tu proyecto en el formato de Papanicolaou Entonces en este caso, puedes usar Papanicolaou. Entonces solo ve a archivos, exporta frame al Papanicolaou, pero hay un problema, pero vamos con el Papanicolaou ahora, así sabrás cuál es el X se explotó, así que déjenme abrirla. Entonces como puedes ver explotó todo, como cada cuadro, cada cuadro automático, cada buttern Tenga en cuenta que FIPMA considera un diseño automático como un marco. Por lo tanto, es posible que deba apretar su documento antes de explotar. Después de explotar, puede eliminar páginas innecesarias usando la herramienta ppting como el PD de la OIT Otro método interesante es usar la herramienta de corte. Entonces echemos un vistazo a esta herramienta de rebanada. Pero como pueden ver, estos PDA suman hacia arriba. Yo solo quería desde esta página hasta esta página, pero agregó todas las páginas en las pp. Así que vamos a aprender a recortarlos o cómo cortarlos, y estamos usando la herramienta de corte. Bien, está por aquí debajo del marco para cortar. Entonces ahora tenemos este patrón plus, así que solo tenemos que rastrearlo porque solo quiero estos marcos. Ahora, como pueden ver en el panel de capas, nos cortaron uno, así podemos nombrarlo como Bien, lo llamé clic V uno marcos. Un panel de diseño, solo obtuvo el botón de exportación. Vamos a darle un click sobre él. Pero el problema con la rebanada dos es como que no admite el archivo PD. Es compatible con todo el formato, pero no soporta PD Si trato de elegir PDF y si hago clic en él, como puedes ver, exportar slice a PDF actualmente no es compatible Vamos con un PNG y vamos a establecer nuestro factor de escala como para escoger la imagen será clara y nítida. Vamos a dar click en el puerto. Bien, así es y el tamaño del archivo es, no B. Si lo abro, como pueden ver, es mucho más nítido, la calidad es realmente genial Bien, ahora se está pixelando, pero como puedes ver desde una perspectiva normal, es genial. Es compartible Y también podemos convertir esto en PDP usando otras herramientas como PD Este es el sitio web real. Puedes ir en ese sitio web y esto P. Pero si solo quieres exportar este marco en PIP, borra todos ellos o moverlos a componentes de página separados y luego solo elige estos marcos y exportarlos como P. Así que eso fue todo acerca de cómo puedes compartir proyecto con tus clientes clientes, así como cómo usar la herramienta slice y cómo exportar tus archivos en P. Pero ahí es una cosa que olvidé mostrarte como, digamos, quiero exportar solo esta cosa. Vamos a dar click en la exportación, y puedo exportar esto a PNG porque PNG me da transparencia en el fondo, Y hay una cosa que puedes hacer. Como digamos que no quieres transparencia, quieres todo. Entonces, en este caso, quieres superponer capas. En este caso, puedes elegir puedes ir al menú de tres puntos, y hay una opción. Ignorar las capas superpuestas. Si seleccionas esto, como puedes ver, pasa nada porque este no es el ejemplo adecuado, pero si elijo este, exporta si selecciono este, como puedes ver, tenemos capas superpuestas. Así que ten en cuenta si quieres mantener tus capas superpuestas, así que selecciona esta, y si no quieres esto, da click sobre esto. Por defecto se hace clic al ignorar las capas superpuestas. Entonces vamos a cerrar esto así que eso fue lo que olvidé mostrarte en video anterior. Entonces todo esto se trata de explotar. Eso es un video de olla, y te veo en el siguiente. 100. Introducción a los recursos e inspiraciones de sistemas de diseño: Bienvenido a un viaje hacia el corazón de la innovación en el diseño. Hoy en día, estamos atravesando la complejidad del sistema de diseño. La fuerza impulsora detrás de la creación productos digitales cohesivos y eficientes Empecemos por decaer mitos. Un sistema de diseño no es solo una biblioteca o una guía. Es una fuente única de verdad que utiliza todos los elementos para el diseño y desarrollo de productos sin problemas, un sistema de diseño entregable estático evoluciona con el El sistema de diseño evoluciona con productos, herramientas y tecnologías A Gina y apo sit, abarcan herramientas de enredo, patrones y componentes, pero también abstraen el elemento como valores de marca y formas de trabajo compartidas Entonces, profundicemos en lo específico. Una guía de estilo se centra en el estilo gráfico. Mientras que la biblioteca de patrones integra componentes funcionales. Ejemplo notable incluye tropifiepoliz, combinando a la perfección los dos. Las demos para el diseño son tiene crecimiento, sobre todo a medida que lo digital se convierte en el foco principal. sistema de diseño cierra la brecha entre la impresión y lo digital , impulsando un lenguaje cizallado que se adapta y madura con Entonces, exploremos los componentes cruciales. El primer propósito y el valor de cizallamiento establecen los cimientos. Guías de principio de diseño, decisión significativa e identidad de marca a partir del alfabeto único. Los componentes y patrones como los bloques de lego son instrucción de construcción, vaya estructura. Elegir el sistema de diseño adecuado requiere hacer la pregunta correcta, ¿ estricto o pierdo modular o integrado, centralizado o distribuido? La decisión influye en la efectividad y escalabilidad de este sistema Ahora, vamos a inspirarnos algún sistema de diseño de ejemplo. Como el primero es la defensa del sistema de diseño de IBM. Este es el sistema de diseño de IBM. Al igual que el mundo de Estados Unidos es tan de código abierto, nos proporcionan todo como valores de este color. ¿Cuál es el significado de éste? ¿Cuál es el significado de esta fuente o algo así? Como puede ver, todo el sistema de diseño se proporciona en este sitio web. Voy a agregar este enlace en los recursos, así que revísalo y échale un vistazo. Y también incluiré este artículo de sistemas de diseño mediano para diseño en 10204. Así que ve a través de él. Tiene todo lo que necesitas saber, todos los recursos y todo eso. Ahora, pasemos al Shopify polar. Este es el sistema de diseño del sistema para Shopify. Después de eso, tenemos material.ai, material dot O. Este es también uno de los grandes sitios web para inspiración del diseño. Y sistema de diseño. Y si quieres saber todo sobre sistema de diseño desde cero, ve a este sitio web llamado sistema de diseño, y a partir de esto sabrás todo sobre sistema de diseño. Un sistema de diseño es un producto en sí mismo. Como cualquier buen producto, fue impulsado iteralmente por los comentarios de los usuarios, integración con diseñadores y desarrolladores, efectividad de anuncio de flujo de trabajo, creando una experiencia de usuario más fluida El futuro promete desarrollo emocionante en un sistema de diseño. avance tecnológico simplificará nuestras vidas y nos permitirá enfocarnos más en anunciar la experiencia del usuario. En conclusión, un sistema de diseño es el plan dinámico que permite a los equipos construir su integración con el flujo y la constante olación aseguran un enfoque céntrico que nos lleva la emocionante era de la innovación en el Así que eso es todo acerca del sistema de diseño y el propósito detrás del sistema de diseño. Este es también uno de los sitios web al que puedes ir y aprender sobre el sistema de diseño, como si voy a este sitio web, diseño punto maravilloso punto flow. Este es el sitio web, y este, este sitio web tiene todos los sistemas de diseño. Si lo reviso como pueden ver, apagan todo como el color, así como los iconos, así como el propósito del icono. Todo. Y sólo tienes que ir a la página web y aprender todo sobre el sistema de diseño. También hay un sitio web llamado Atlantis Design. También es uno de los mejores sitios web si quieres aprender sobre el sistema científico. Así que ve a través de él y aprende todo sobre el sistema de diseño. Voy a sumar todos los recursos en los recursos. Así que échale un vistazo. Entonces esto es todo acerca del sistema de diseño. Exploración del sistema de diseño. Así que stat para obtener más información e innovación en cada mundo olv del diseño Aprendices sociales diseño feliz. 101. Introducción - Proyectos del mundo real Con figma: Heather design tos, bienvenido a la serie de proyectos UX del mundo real. Tu puerta de entrada a la orilla de la creatividad y perfeccionando tu habilidad de diseño. Ahora, escuchen. Todavía estoy por anunciar que estás a punto de embarcarte en un emocionante viaje donde abordarás un proyecto de diseño del mundo real. Pero aquí está la captura. No te voy a entregar la guía paso a paso. No, estás en el asiento del conductor. Imagínese esto. Tienes la tarea de diseñar un elegante y usar una aplicación amigable para entregar comida Puedes inspirarte tu app favorita como bots o Zomato, o carajo, creas tu propia versión con un giro. Bien. Sé que necesitarás un poco de instalación de boostp. Sumérgete en los enlaces de recursos que he proporcionado. Explora diferentes sitios web y aplicaciones, vuelve a ver este tal en el chat con Chad Jept o Google Gemini para algunos parques de ondas cerebrales En esta serie, tu misión es aplicar todas las habilidades que has aprendido en este curso, desde el diseño automático y los componentes hasta la animación y efectos inteligentes. Y no te olvides de la experiencia de usuario. Tu diseño debe ser integrativo y sin fisuras, facilitando la vida de tu usuario A lo largo de esta serie, tendrás la libertad de experimentar con fuentes, colores, iconos e imágenes. Deja que tu creatividad corra como un salvaje. Pero recuerden, la simplicidad es clave. Mantenga su diseño limpio y ClitterFree para obtener el máximo impacto Cuando le has dado el toque final a tu obra maestra, es el momento de compartir tu trabajo con el mundo. Suma el diseño y disfruta de la gloria de tu arduo trabajo y nueva destreza en el diseño de fuentes Entonces, ¿estás listo para sumergirte en el mundo del diseño V del mundo real? No puedo esperar a ver lo que se te ocurre. Entonces hagamos que suceda algo de magia. 102. Proyecto UIUX en el mundo real 2 StayWaveProyecto UIUX en el mundo real 2 StayWave: Bienvenido a la serie de proyectos Real World X. Te dicen que lleves tus habilidades de diseño a la vida, así como abordar juntos el desafío del mundo real. Desde crear una interfaz elegante hasta mejorar la experiencia del usuario, esta serie es tu oportunidad de brillar. Así que vamos a sumergirnos y hacer que suceda algo de magia de diseño. Bien, chica, hoy tengo un proyecto emocionante para todos ustedes. Vamos a estar diseñando la interfaz de usuario para un sitio web llamado Stay Wave. Sitio web de estancias para reservar albergues para turistas con un presupuesto ajustado. Nuestro objetivo es crear una interfaz fácil de usar que permita a los viajeros buscar fácilmente comparar y reservar alojamiento. Antes de sumergirnos en el proceso de diseño, asegúrate de revisar los archivos de recursos que he proporcionado. Encontrarás todos los activos e información necesarios para comenzar. Ahora, hablemos del concepto de diseño que estaremos aplicando en este proyecto. Tienes la libertad de socavar la creatividad, pero asegúrate de incorporarte con lo siguiente Primero está el diseño automático, asegúrese de que el diseño sea receptivo y adapte sin problemas a diferentes tamaños de pantalla. En segundo lugar es variante, use variant para crear diferentes estilos para botones, tarjetas y otros elementos de la interfaz de usuario. Los componentes terceros menos crean componentes reutilizables para mantener la consistencia durante todo el diseño. Fuerza en una animación inteligente, agrega animación sutil para anunciar la experiencia del usuario sin abrumar la interfaz y durar este efecto, experimenta con los efectos como sombra, degradado y superposición para que el diseño generalmente aparezca. Entonces tu primer paso es hacer el flujo de tareas y entender el resumen del proyecto. Piense en el viaje del usuario desde la búsqueda del albergue hasta completar el proceso de reserva. Al diseñar el wireframe, recuerde mantenerlo simple, concéntrese en el diseño y la funcionalidad antes de agregar elementos visuales Una vez que hayas finalizado el wireframe, es hora de llevar tu diseño a la vida Preste atención a la tipografía, el color y las imágenes para crear visualmente atractivas U Y. Cuando haya terminado con el diseño de la interfaz de usuario, puede capturar capturas de pantalla o, si es posible, enlace del prototipo de Semar, mostrarse para revisar las instrucciones del proyecto en PDF para obtener Recuerda, este proyecto es una oportunidad para que apliques todo lo que has aprendido en nuestro curso de Figma, y no dudes en comunicarte si tienes alguna duda o necesitas orientación en el camino Me emociona ver lo que se te ocurre. Bien. 103. Aplicación de entrega de alimentos UIUX Project 3 en el mundo real: Bienvenido a la tercera serie de proyectos UiVx del mundo real. Hoy, tengo algo que no sólo desafiará tu habilidad, sino que también encenderá tu creatividad. Imagina que tienes hambre, anhelas tu plato favorito, y todo lo que se necesita para satisfacer ese deseo pocos tipos en tu aplicación bellamente diseñada Entonces ese es el poder de una excelente aplicación de entrega de alimentos. Y hoy, vamos a diseñar uno. Pero antes de sumergirnos, hagamos esto aún más interesante. Aquí está el trato. En este video. No voy a darte un breve resumen del proyecto ni de ningún tasklow y cualquier wireframe Tu misión es diseñar el flujo de tareas y el resumen del proyecto, luego wireframe para esta aplicación que no solo suele girar, sino que también es fácil Entonces nuestra tarea es clara, crear una experiencia perfecta para el usuario que ordena comida en línea. Todo comienza con un proceso de estación de usuario, seguido de diseñar un menú AZ para navegar. Piense en cómo el usuario seleccionará sus platillos, personalizará el pedido y procesará a la caja. Queremos que todo el proceso sea suave como cinta de seda. Para que tus jugos creativos fluyan, déjame mostrarte algunos ejemplos de aplicación de entrega de alimentos que han puesto el listón alto. Piensa en lo que los hace geniales y listarlos para superarlos. Para esta app, tienes que diseñar elemento esencial de la app. La primera es la pantalla principal después de esa opción principal. Tercero es la personalización del pedido y el último es el proceso de pago. Pero aquí está la parte emocionante. Quiero que dejes que tu espíritu creativo se eleve, experimentes con fuentes, colores, diseñes y uses la interacción Recuerda todos los principios de diseño que hemos cubierto en la clase. Si necesitas algún refresco, visita esos videos de clase Y no olvides revisar la factura adjunta con lineamientos y recursos adicionales. Es tu brújula en este viaje creativo. Déjame dejarte con este pensamiento. El diseño es pensar hecho visualmente. Entonces tu diseño representará tu pensamiento, tu creatividad y tu innovación. Antes de concluir este video, aquí está el reto. No sólo cumplir con los requisitos, sino que los supera en sus formas creativas únicas. No tenemos plazos, pero recuerda, Design journey, no solo un destino. No puedo esperar a ver el fantástico diseño que se te ocurrió. Bien. Así que hagamos que este reto sea memorable, inspirador y sobre todo divertido. Entonces, ¿estás listo para emprender este delicioso viaje de diseñar una app de entrega de comida a domicilio que impacte ? Entonces hagámoslo. Ahora sal, forma equipo y empieza a diseñar, comparte tus avances, preguntas e ideas con la clase. El mundo de las aplicaciones es conquistar, y juntos, somos imparables Así que gracias por ser parte del viaje. Estoy deseando verte creador como el mejor. Buena suerte y comencemos. 104. Aplicación musical RealWorld UIUX Project 4: Bienvenido a la serie de proyectos UX del mundo real. Este es el proyecto cuatro. Supongo. Hoy, tengo un proyecto emocionante para ti. Vas a diseñar una aplicación de música fácil de usar y visualmente bling que rivaliza con plataformas populares como Spotify y YouTube music. Entonces comencemos por entender nuestro resumen del proyecto. No es breve solo instrucción. Queremos que cree una aplicación que brinde una experiencia auditiva fluida y agradable para los amantes de la música de todos los géneros. Nuestro público objetivo incluye entusiastas de la música de todas las edades y orígenes. Esto significa que necesitamos diseñar una aplicación que sea integradora y fácil de navegar tanto para usuarios experimentados como para usuarios experimentados Nuestras aplicaciones de música deben incluir características clave como descubrimiento de música, reproducción perfecta y uso compartido en redes sociales. Puedes inspirarte en tu app favorita como música o Spotify. O puedes crear tu propia versión. Como parte del proyecto, además de mopps Figma de alta fidelidad, crearás marcos de alambre para Y también amigos de cable de baja fidelidad que representan el diseño de la aplicación de música R, lo que le ayuda a planificar el diseño y la funcionalidad. Tus divs finales incluirán tanto maquetas altas de FerrityFGMA como wireframes, mostrando la interfaz de usuario y la experiencia de usuario de la aplicación tanto maquetas altas de FerrityFGMA como wireframes, mostrando la interfaz de usuario y la experiencia de usuario de la aplicación de música. También mapeará el flujo de usuarios para las tareas clave, como desalentar la nueva música, como desalentar la nueva música, crear una lista de reproducción y administrar la reproducción Y recuerde, debemos priorizar el diseño centrado en el usuario, garantizar un diseño visualmente atractivo y hacer que la aplicación también sea accesible para el usuario con discapacidad Ahora que tenemos la clara comprensión del proyecto, es momento de poner a prueba tu habilidad, inspirarte en apps publi como Spotify YouTube music, pero también dejar que tu creatividad Experimenta con colores y fuentes para que la aplicación sea generalmente atractiva. Juega con diferentes estilos y encuentra la combinación que se adapte al público objetivo. Una vez que complete el diseño y la estructura alámbrica, asegúrese de enviar el proyecto de acuerdo con las instrucciones proporcionadas en el PDF Contiene todos los detalles que conoces. Y me emociona ver lo que se les ocurre a todos. Recuerda, si alguna vez te sientes atascado o necesitas refrescarte sobre algún concepto, puedes volver a visitar los videos de nuestra lección anterior y buena suerte con tu proyecto de app de música No puedo esperar a ver su diseño creativo y sus marcos de alambre. Si tienes alguna duda, no dudes en preguntar. Hagamos algo increíble juntos. 105. Proyecto UIUX en RealWorld 5 DIY: Bienvenido a la serie I X Project del mundo real. Este es el Proyecto Número cinco. Has aprendido entresijos de la Figma. Has dominado el principio de UX y ahora es el momento de brillar. Para tu último proyecto definitivo, tengo un regalo especial para ti. Puedes elegir diseñar una aplicación móvil, un sitio web o incluso una aplicación textop El cielo es el límite. Y aquí está el pateador Estás empezando desde cero, sin wireframes o plantillas prefabricadas. Es todo U. La elección es enteramente verso. ¿Qué quieres para crear una aplicación móvil que cambie el juego ?, un sitio web impresionante o un escritorio regional o dejar que tu creatividad funcione como un salvaje. Y si, me escuchaste bien. Sin recursos masculinos. Pero no se preocupen. Tienes todas las habilidades que necesitas. Si alguna vez te sientes atascado, recuerda, hay estos increíbles videos culturales. Míralos de nuevo, son como hechizo mágico UIX. Ahora, quiero que veas brillar tu Picasso interior. No solo diseñes, crea una obra maestra, agrega tu toque único, sé creativo y hazlo tuyo. Después de poner tu corazón y alma en tus proyectos, sigue las instrucciones súper detalladas en este pip Te dice como enviarme tu creación. Es como enviar un mensaje en una botella. Bien, así que no puedo esperar a ver lo que vienes. Viaje de UoxVis al diseño, virtudes han sido increíbles. Tienes la habilidad. Ahora se trata de ponerlos en acción. Así que disfruta cada momento de este proyecto. Y si tienes alguna duda o necesitas un poco de consejo, estoy aquí para ti. Entonces, sin más preámbulos, hagamos fluir esos jugos creativos y dejemos que comience el diseño Tienes esto. Bien. 106. 10 principios psicológicos para el diseño de UX poderoso: Compañeros diseñadores y mentes curiosas. Bienvenido a otro emocionante episodio donde revelamos el secreto para convertirnos en el mejor diseñador de UX. Hoy en día, estamos buceando al fascinante mundo de la psicología principio que puede evaluar tu experiencia de usuario juego Así que toma tu bebida favorita, siéntate y empecemos juntos en este viaje de diseño. Como ex diseñador, no somos solo los creadores. Somos psicólogos disfrazados. Entender nuestro US Ba y la percepción es la clave para crear una experiencia encantadora Hoy, exploraremos diez principios psicológicos que te trasladarán a un metro UX. Así que vamos a saltar de inmediato. El primero es la ley de Hicks. ¿Alguna vez nos sentimos abrumados por demasiadas opciones? Como pararse frente a la colección de zapatillas We. Esa es la ley Higs en acción. Cuanta más opción, mayor es el tiempo de decisión. Al diseñar menús o interfaces, simplifique, priorice y haga que la decisión del usuario sea muy sencilla La siguiente es la ley de Jacob. Al usuario le encanta la familiaridad. En lugar de volver a estudiar el diseño exitoso en su industria. Es como encontrar la receta perfecta. Por qué cambiarlo. Alinee con los lectores de la industria para crear una experiencia de usuario cómoda y fluida La tercera es la ley de Miller. La ley de Miller nos enseña que nuestra memoria de trabajo tiene límites. Sólo podemos manejar alrededor de siete veces a la vez. Entonces, al presentar información, embárcate a verificar, dividirla en tamaños de pedazos para una experiencia cognitiva más suave. El quinto es el principio de gzel. Revela cómo nuestro medio organiza la información de forma natural. Utiliza proximidad, simaridad, continuidad, cierre y conexión con el diseño visualmente estructurado El quinto son los colores, el color habla más fuerte que las palabras. Tenga en cuenta las elecciones de color, influyen en la emoción y la percepción verde podría ser el perfecto para productos ecológicos, pero no tanto para la comida. Pruebe y elija los colores ampliamente para transmitir el mensaje correcto. El principio del sexo son los modelos metálicos, los modelos metálicos son como los sistemas de creencias del usuario. Un Lign con ellos crea productos fáciles de usar. La suya en la aplicación imita la acción de la vida real. Diseño de materiales inspirado en el mundo físico, Aalign con la forma en que interactuamos naturalmente Se trata de hacer que el usuario se sienta como en casa. El principio siete es el efecto de un resto. ¿Queremos que el usuario recuerde algo, que se destaque. El único efecto nos dice que la distinción realza la memoria. Al igual que diseñar una plataforma de libro de vuelo, haga una información crucial visualmente distintiva para un mejor recuerdo Es principio la ley más apta. Se ajusta a la ley simplifica la interacción. Los grandes elementos más cercanos al usuario son más fáciles de detectar e interactuar con ellos. Considera esta pantalla de inicio de sesión. Los elementos grandes no solo son notables sino también se pueden ubicar convenientemente para que el usuario interactúe Noveno es pico rural. Lo que sentimos acerca de la experiencia depende de su movimiento de pico y final. Disn los momentos culminantes de la interacción del usuario, como el descubrimiento de productos o el pago. Para ser excepcional. Recuerda, múltiples picos, crean un viaje memorable. Por último, pero no menos importante, el efecto estético de usabilidad. Usuario fragua menor problema de usabilidad si les encanta el diseño visual. Sin embargo, la belleza nunca debe sombrear la funcionalidad. Pruebe temprano con marcos operativos para garantizar una combinación perfecta de estética y usabilidad. Y ahí lo tienes los diez principios psicológicos que transformarán el diseño de U UX zar. Observe, aprenda e implemente este principio en su diseño, manténgase curioso y siga experimentando y lo más importante, disfrute del viaje de crear una experiencia de usuario deliciosa, y adjuntaré todos los recursos de todos los Entonces, si quieres aprender esos en profundidad, revísalo hasta la hora del almuerzo, feliz 107. Aprovechamiento de la psicología para experiencias de usuario personalizadas: un caso de estudio: Co diseñadores en esto, vamos a aprender un caso de estudio. Eso es para la personalización, como cómo funciona la personalización en el diseño de UI X. Así que imagina pasar unas 87 horas al año buscando contenido en la plataforma de streaming. Suena agotador. Derecha. Bueno, esa es la realidad del usuario promedio. De hecho, más del 76% de los usuarios sufren fatiga de contenido. Pero no temas, hemos descubierto una solución arraigada en la psicología Para entender verdaderamente a nuestros usuarios, seguimos un proceso de diseño de robots. Empatizar, definir idear y diseñar a través de la entrevista y la investigación ize Con la lucha es un rostro que nos lleva a una Bien, este problema, siempre ha pasado con a diario como digamos que quiero ver algo en ODD así como en Netflix. Entonces en este caso, es como demasiado abrumador y están demasiado contentos. Yo a veces me confundía, como, qué debo ver. Y ahora, Netflix, así como YouTube tiene un botón llamado play something random. También está en tubo. Hace poco llegó, supongo, como hace unos días, vi, hay un botón llamado. Botón cuadrado. Era botón cuadrado, toca algo al azar. Fue así. Y en netflix, hay una sección dedicada. Si haces click en eso, juega algo al azar. Sorpréndeme. Entonces, cuando estaba investigando sobre esto, llegué a conocer sobre el flujo de usuarios Donde como digamos, donde después de 1/52 de desplazamiento, los usuarios son promovidos para elegir su estado de ánimo actual, como si estuvieran felices, emocionados, bajos o Causa de contenido empaquetado de primera acción. Si bien la felicidad permite géneros versátiles, sentirse bajo, prescribimos películas relajantes ligeras y para sentirse bien. Y cuando nos tensamos, añadimos para algo que viene. El primer lugar, marcó el tono emocional. Ahora viene la magia. partir de su estado de ánimo, los usuarios son presentados con géneros estilizados a su estado emocional Ya sea romance o comedia, las opciones son personie para resonar con sus sentimientos Y el usuario grand finale elige entre contenido internacional u orgional Y aparece una recomendación personalizada de películas, creando una experiencia de usuario fluida y emocionalmente resonante Con un diseño meticuloso, hemos creado una interfaz que lee el modo del usuario como géneros y ofrece una opción entre contenido internacional y regional, el resultado Un recomendador de películas personz con una opción de relleno para mayor diversión Pero donde hay un más. Entonces cuando estaba leyendo ahí con un artículo, voy a leer esto, como en el futuro, nos envasion usando ratonera repaed movimiento Llevando a personon a todo el nuevo nivel. Entonces, si arrastras tu ratón como en emoción, te mostrará emoción cont, como acción y todo eso Si intentas lento , te mostrará como ven películas. Entonces, debido a esto, los usuarios cada movimiento guía rastrea un viaje cinematográfico Ahora bien, esta fue la primera parte sobre la personación. Ahora, hablemos de cómo es MS como Google y Facebook a ella. La personación. Así que grandes jugadores como Google y Facebook han dominado el arte de recopilar datos de usuarios, briting acción y esencia, crear un universo digital personal Pero, ¿cómo impacta emocionalmente esto al usuario? Maestro del diseño como Don Norman enfatizó la importancia del diseño emocional, desde Visual athstic a castor usabilidad, y prestigio reflexivo buen diseño debe traer alegría y placer al usuario, pero ¿cómo se traduce eso al ámbito digital Aquí es donde entra la personalización en digital, donde los datos del usuario llenan la comunicación inteligente como AIML. Lewis debes haber visto en bandeja de entrada de Google categorizado el correo electrónico. La estación de Facebook a nuevos contenidos. Se trata de presentar datos personalizados, agregar sin problemas emociones negativas. Al igual que, hay una cosa como me pasó, como cuando estaba viendo película en YouTube o algún video aleatorio, y estaba pensando que voy a ver algo después de esto. Así que exactamente el mismo video se volvió a comprometer en mi campo. Entonces fue impactante para mí. Son fuertes y de hecho te conocen. Ellos conocen cada movimiento, lo que haces, y todo eso. Y en base a eso, te recomiendan cosas, así como anuncios. El futuro de la personalización también se extiende al Internet de las cosas, como dispositivos inteligentes como Google Ns, Amazonas, Alexa, preferencias del usuario, no solo visualmente, sino a través de la voz y el diseño físico El diseño y la emoción ahora trasciende la pantalla. El principio de diseño emocional de Donomos nos guía. El placer y el disfrute deben acompañar el uso de la tecnología medida que creamos nuevos productos y servicios digitales. El impacto emocional se convierte en un elemento primordial para el éxito. Y también tenemos que explorar algunos desencadenantes como tenemos que encontrar algunos desencadenantes positivos y negativos también. Al igual que un rato reservando como un asiento de cine o un vuelo, use esta urgencia y escasez para la acción, sportifi deleita al usuario con una Es un delicado equilibrio entre la creación experiencia positiva y la acción negativa de los usuarios. La verdadera magia ocurre cuando personalización y la cobertura del diseño emocional No se trata sólo de comunicación visual. Se trata de impactar emocionalmente a los usuarios. Lograr esta magia requiere una comprensión profunda de la motivación y el deseo del usuario. A medida que avanzamos hacia el futuro, personalización y la emoción en el diseño se hacen más evidentes Los diseñadores evolucionarán hasta diseñadores de compromiso emocional, creando experiencias que resuenen con el grupo de usuarios específico Entonces, en esta era de evolución digital, recuerden, buen diseño es memorable, pero el gran diseño es memorable y significativo a la vez. Entonces eso es todo sobre el estudio de caso, así como de cómo funciona la psicología de la personalización en YuxFeld así como en el campo del diseño gráfico Entonces voy a sumar todos los recursos así como en el pedófilo, así como en el Es un grifo Pasa por ello, si quieres aprender estas cosas profundamente. Y gracias por embarcarse en este viaje con nosotros. Si encontraste esto perspicaz valioso, por favor házmelo saber y hasta el momento del nido sigue diseñando con el corazón y abraza la oposición mágica en la experiencia 108. Psicología del color en el diseño de UI/UX: Bienvenidos de nuevo a los alumnos. Hoy, estamos atando el mundo de la psicología en el diseño VX Por lo que toda esta sección está dedicada a la psicología para UI y X. Así que EVA significa experiencia de usuario. Todos sabemos que juega un papel fundamental en nuestra interacción con la tecnología Ahora bien, ¿por qué importa la psicología en el diseño de la experiencia de usuario? Bueno, los Schumann son un ser maravillosamente complejo, cada uno con una preferencia única y cuidado Entonces, ¿cómo hacen que las empresas tecnológicas hagan su aplicación sea tan atractiva para tal audiencia de ti versal? Es escribiendo en lo único que todos compartimos nuestros sentidos. Tenemos cinco sentidos increíbles, el tacto, el oído, la vista, el olfato y el gusto. Sin embargo, cuando se trata de abdloment, nos enfocamos principalmente en el tacto, el arenque y Desafortunadamente, no podemos experimentar el olfato y el sabor. Enfoque. Hace dos años, vi un video, como si filtras una pantalla, y si hay un pie en exhibición, probarás la comida. Eso o algo así. que vendrá en el futuro, y también tendremos esa característica en nuestro teléfono. Sé que es espeluznante. Ahora, exploremos el impacto de la representación visual en la toma de decisiones Bien. Considera esto, qué plato de comida parece más caro, el de la derecha o la izquierda. Resulta que no se trata de la cantidad de comida. Se trata de cómo se presentó. Esto enfatizó la importancia de la hermosa interfaz, pero ¿cómo diseñamos una? Se reduce a los dos factores clave. La cantidad de información y cómo se presentó. Tomemos un menú, por ejemplo, demasiada información puede llevar a una sobrecarga cognitiva, poniendo rastro en nuestro cerebro. Al igual que hay un porro Bani en mi zona. Entonces sus munis realmente simples, solo hay cuatro opciones, y es realmente simple de ordenar, y hay otro porro Nos dan tarjeta domini, y en eso hay cientos de opciones Entonces hoy en día, voy a este nuevo porro, que solo tiene cuatro y cinco opciones, y es realmente fácil de ordenar. Ahora, hablemos de colores. Los colores también juegan un papel importante ya que un color brillante y no coincidente puede ser gravoso para la mente Esto nos lleva al procesamiento y a una fluidez de percepción. Esto es con lo que procesamos la información. Ahora echemos un vistazo a información que se presenta en el sitio web. Tanto este gigante tecnológico ofrecen una funcionalidad similar. Pero escogen diferentes enfoques. No se trata de bien o mal. Se trata de la experiencia del usuario. Ahora, hagamos sobre el experimento. Cierra los ojos por un momento y piensa en las emociones asociadas a este color. Rojo, verde, azul, morado. El color influye en nuestro sentimiento y acción. Es por eso que la notificación de la aplicación a menudo usa el color rojo para captar nuestra atención. Avanzando en el sonido, es una poderosa herramienta para que las aplicaciones capten nuestra atención y promuevan el comportamiento individual. Hagamos un segundo experimento. Cierra los ojos. Voy a tocar algunos sonidos y hay que identificar la app de sonido o sitio web. Espero que hayas identificado los sonidos. Han diseñado con una alta frecuencia para hacernos alertar al escuchar un tono específico, no podemos identificar la app. Ahora, hablemos de capacidad de respuesta y refuerzo positivo en el diseño de aplicaciones La retroalimentación positiva, como la vibración al usar una publicación, fomenta la interacción. Por otro lado, el refuerzo positivo del intermet, como refrescar un campo de redes sociales, nos mantiene comprometidos. Similar a la emoción de una máquina tragaperras. La personalización es crucial para el diseño de aplicaciones. App construye un modelo de tu preferencia basado en la interacción, creando un tráiler más y una experiencia agradable. Pero recuerden, hay una adaptación hedónica atrapada. Nos acostumbramos a estímulos positivos y negativos empresas líderes en brindar actualizaciones frecuentes para mantenernos comprometidos. El diseño pursivo es un motivador clave para que el usuario se comporte de una manera que el desarrollador desee Instagram, por ejemplo, promover la notificación para cada interacción. Fomentar un mayor compromiso. En última instancia, todos estos elementos de diseño tienen como objetivo apuntar al sistema de dopoína en nuestro cerebro Haciéndonos felices y a su vez usando la aplicación más en un mundo donde los teléfonos han evolucionado desde dispositivos de comunicación básicos hasta complejos gadgets multifuncionales que las empresas anhelan nuestra atención Entonces esto nos lleva al pensamiento código roto. Hay dos industrias que llaman a su cliente usuario, primeras toneladas de drogas ilegales y el software secundario. Es algo que vale la pena preguntarse. Espero que te moleste con todas las formas en que nuestros sentidos y emociones se están jugando a través del sitio web de appsit que usamos todos los días, pero esta es la punta del iceberg Hay todo un océano de psicología fascinante trabajando en el mundo digital, y solo estamos sumergiendo nuestros dedos de los pies en Así que prepárate para profundizar en esto porque estaremos haciendo toneladas de videos discutiendo estos increíbles temas. En la siguiente ronda, pondremos nuestros códigos de laboratorio y nos pondremos súper nerd sobre la teoría del color, la ciencia del sonido, la adtación hedótica, el diseño responsivo, diseño responsivo Por lo que cubriremos todos los temas en video dedicado, y eso es solo el comienzo. Tendremos temas aún más alucinantes en una tienda como el diseño persisivo, adaptación social y el futuro de la interacción humana Hasta la próxima vez, recuerda, las aplicaciones pueden estar diseñadas, pero tú eres el usuario en control. Usa tu habilidad de forma, conocimiento para navegar por el mundo digital con conciencia y elige la experiencia que realmente anuncie tu vida. Mantente curioso, mantente uniformado y, lo más importante, mantente humano 109. La paradoja de la felicidad: cómo entender la adaptación hedónica en el diseño de UI/UX: Más diseñadores. Hoy, quiero subyacer el secreto creando una experiencia de usuario excepcional Hoy en día, nos sumergimos en el fascinante mundo de la psicología y cómo puede convertirte en Ex maestro de diseño. Así que recientemente me topé con un podcast alucinante, el laboratorio de felicidad con un doctor Señuelos Santos. Voy a agregar los recursos de vinculación. Si quieres echarle un vistazo, échale un vistazo. Es genial. ¿Y supongo que qué? Me pillé reflexionando sobre algunas ideas propuestas que se aplicaban directamente al diseño de UX Entonces, Bakala, ¿alguna vez has oído hablar de la adaptación hedónica? No sé si lo estoy prediciendo bien o no, pero es como una adaptación hedónica . Creo que es correcto. Entonces es el increíble impulso humano donde rápidamente volvemos a un nivel estable de felicidad. No importa, la vida cambia. Imagina ganar 50 k dólares y pensar que ganaste 100 k Te haremos una estática. Alerta de spoiler No lo hará. El principio afecta directamente la forma en que abordamos la experiencia positiva. Ahora, hablemos de juegos incrementales, también conocidos como los juegos clicker Yo no jugué a este juego, pero si lo jugaste, por favor avíseme. Esto estaba en el caso de estudio, así que sólo te lo estoy diciendo. Cuando lo estaba investigando, llegué a saber que tienes que hacer una tarea sencilla Como hacer clic en la pantalla y obtienes algunas recompensas, es como bucle de felicidad. Sigues actualizando, ganando más. Y adivina qué? Se refleja tendencia humana, se discute la adaptación hámnica Entonces estos juegos aprovechan la psicología positiva. Ese deseo de más recursos alineados con nuestra atención para buscar incrementar la felicidad. Es un golpe maestro de diseño de juegos que mantiene jugador involucrado en una mirada de retroalimentación positiva. Esto es un genio, ¿verdad? Pero donde hay más. Este juego también arroja recompensas fuera de línea. Como cuando regresas, has creado con felicidad boo. Es como invertir en tu alegría futura. Aquí se plantea la psicología y mantiene el aro del juego. Ahora, cambiemos la marcha. Recuerda ese nuevo iPhone brillante. No tengo iPhone. Bien. Entonces digamos si compro iPhone como después de un mes. Al principio, voy a estar muy contento, y estaré muy contento de ver esa cubierta brillante y pantalla brillante la pantalla colorida. Pero con el tiempo, lo voy a adaptar, y sus impactos serán lecciones. Entonces, ¿cómo abordamos esto en el diseño? Entonces quiero compartir algunas estrategias que son estrategias como UO x diseño, diseño gráfico de la mano paga esto Estamos combinando la adaptación hedónica. Primero de apoyar la relación interpersonal. Producto que fomenta la experiencia compartida como Muto IJ de Albert Estoy bastante seguro de que lo deletreé mal. Bien, entonces te voy a mostrar en la pantalla. Es duro. El inglés es duro. Esto no es inglés. No sé qué idioma es este, pero esto es difícil de pronunciar. Por lo que esto crea un impacto positivo duradero. A continuación, la segunda es la experiencia S, optimizar la experiencia actual desde el mínimo placer. Al apoyar los objetivos personales como vemos en la aplicación más correr, mantenemos al usuario involucrado en un flujo de eventos positivos. Quiere lanzar adaptación, brindar una experiencia novedosa y sorprendente, ya sea Uber recogiendo en el auto deportivo o empresas de telecomunicaciones, enviando regalos inesperados. Las sorpresas mantienen la experiencia fresca. Y por último, apoyar la gratitud, productos y servicios como Facebook, celebrando la amistad digital, como en 2018, había un video que solía llegar a cada símbolo, como si chateas con alguna persona en ese video, hay fotos tuyas o ambas, y hacen un video realmente increíble. Así es como te personalizan y te mantienen enganchado a su plataforma. Ayuda a los usuarios a apreciar lo que han experimentado y scredod mostrar un impacto emocional duradero. Entonces como pueden ver, todavía recuerdo que sí. Entonces es genial. Y ahí lo tienes diseñando para la felicidad, usando principios de psicología. ¿No es increíble? ¿Cómo entender el comportamiento humano puede dar forma a una experiencia inolvidable? Si disfrutas de este viaje, por favor avíseme. Me alojé aquí por más vx, revelaciones de diseño. 110. El efecto dopamina en el diseño de UI/UX: En un mundo dominado por la tecnología, nuestra sociedad anhela Quick Topaminhds video número 32, una publicación mundial de 60 y los artículos de 1 minuto se han convertido en la nueva norma Pero, ¿alguna vez has pensado las cocquencias de este cambio de consumo de contenido La gente busca un contenido más corto, más consciente y más simple para un placer rápido y una solución fácil. Pero, ¿esta postulación de contenido de felicidad y simplicidad nos lleva por un camino del que podríamos arrepentirnos Está evolucionando, solo al revés. Todos nosotros solución fácil, con golpes de felicidad, pero ¿qué pasa con la libertad Sin saberlo, nos estamos convirtiendo en enemigos de nuestro propio bienestar al estar atrapados en el ciclo, alimentados por corporaciones y constantes dopamina, el placer, incluido neurotransmisor que siempre ha sido parte de nuestro sistema de recompensa cerebral Ya sea que se trate de ocio de fold o incluso de compras, experimentamos fiebre de dopamina Pero, ¿cuál es la conexión digital? Cuando te desplazas por algo dispositivo de contenido como real o TikTok o así como post de instrumento, ¿experimentas una pequeña fiebre de Tpamin Un flip your finger te recompensa con una nueva pieza de contenido dentro de un segundo Es un ciclo constante de recompensa sin que nos demos cuenta. Comparemos esto con un placer más tradicional como comprar una galleta recién horneada. La anticipación, la compra el sabor cada paso gatillo Dopinpike pero ahí está No se dio cuenta de lo rápido que recibes tu dopinpike de productos digitales, Comare a comer una galleta. Es una carrera. Es posible que tu cerebro ni siquiera se dé cuenta de quién tiene el control. Una vez que tu cerebro está tenso por el consumo rápido contenido, anhelas la reputación Se vuelve adictivo. Ya no quieres caminar a la panadería, prefieres abrir, y tengo que pedir galletas pero a qué costo. Los picos de dopomía a corto plazo, especialmente entre los adolescentes van en aumento Una parte importante de los usuarios en plataforma como TikTok, stogam y YouTube, son adultos jóvenes que experimentan placer constante, pero evitando desafíos que parecen Los adolescentes se están aislando, experimentando trastornos del sueño y formando hábitos que obstaculizan su crecimiento Lo fácil se ha convertido en el estándar y está afectando sus vidas. Entonces, ¿cómo podemos estar como diseñadores en primera línea para cambiar esta narrativa? Cómo podemos asegurar que nuestro diseño fomente la relación a largo plazo en lugar de la adicción. Nuestra responsabilidad es clara. Ayudar a las empresas a construir una relación a largo plazo con el usuario. Debemos evitar ser la fuente de adicción y encontrar el equilibrio adecuado de pico de dopamina Es hora de ser diseñadores éticos y considerar el impacto de nuestra creación. Entonces, hay algunas formas prácticas para los diseñadores hagan relación en lugar de adicción. Creando un punto de parada para que el usuario rompa entre dopampikes cuando solía tocar pop gin en 2016, en 2018 Después de tres partidos, hubo un temporizador. No se puede jugar en media hora. Al igual que yo Tub también, hay un botón. Recuérdame que tome un descanso así como que hay múltiples aplicaciones. Ahora están incluyendo la función. En segundo lugar, enfocarse en la retención a largo plazo, no solo en los compromisos de campo El tercero es evitar que el miedo induzca a las elecciones de diseño. Los usuarios no son o esclavos. Definir toda la experiencia de usuario para comprender el impacto de Dopampie quinto es priorizar el bien para todos a largo plazo, logias para objetivos de negocios a corto plazo Entonces, los diseñadores, tenemos el poder de dar forma a la perspectiva de nuestra humanidad, especialmente en la era digital, creemos una experiencia que promueva el crecimiento, el aprendizaje y el bienestar. Y hay un hecho impactante como ex Cs y las excusas tecnológicas limitan su fría exposición digital, entendiendo el potencial de peligros Es hora de ser diseñador que asegure nuestro futuro, haciendo mejoras que aguante el sabor de la época Tú eres el diseñador que puede marcar la diferencia. Entiendes cómo funciona. Usted puede ser quien se asegure nuestro viaje hacia el futuro digital sea positivo. Entonces, a medida que navegamos por el panorama digital, recordemos el impacto de nuestro diseño en las vidas, especialmente las de la generación joven. Priorizemos la creación de una experiencia positiva y duradera que contribuya a un futuro más brillante Gracias por acompañarme en este viaje hacia el mundo del diseño Cpmin y el futuro Util la próxima vez, mantente atento, mantente ético y sigue diseñando para el mejor mañana 111. El poder del sonido: cómo el audio moldea la experiencia del usuario (UX) la psicología: Ya sea hoy, nos estamos sumergiendo profundamente en el viejo mundo del sonido en el diseño. Sí, escuchaste bien suena. No se trata sólo de lo que ves, sino también de lo que escuchas. Así que sintonicemos la sinfonía del diseño UX y exploremos el increíble impacto del sonido en nuestra experiencia digital Picture of world without sound pretty do right Well sound has been a companion for 1,000 years, sumando la comunicación como narración de historias. Hoy, estamos desbloqueando el potencial del sonido en el diseño. Presionarse para un viaje a la dimensión auditiva hasta vx O diseño gráfico. ¿Alguna vez has notado la sutil retroalimentación heptica al interactuar con tu iPhone o simplemente con un teléfono ro O adting sonido que te introduce en el netflix. El sonido no es sólo un compinche. Es un superhéroe en el mundo vx. No solo anuncia tu experiencia, sino que también define la identidad de marca. Ahora vamos a explorar cómo el sonido se convierte en el héroe insonoro en la aventura digital Por un momento, cierra los ojos y probablemente puedas reconocer tu marca favorita por su sonido único. Desde el reconfortante ding de microsoft windows hasta reving de Mercedes carta Este sonido cuenta una historia y crea una conexión. Es hora de explorar cómo los sonidos se convierten en los jabones secretos de la identidad de marca El sonido es más que un simple telón de fondo. Es un participante activo en el recorrido del usuario, ya sea guiando al usuario a través de la interfaz o proporcionando retroalimentación sobre la acción completa. El sonido es solo un asistente silencioso que hace que X o diseño sean memorables. Vamos a desvelar cómo el sonido interactuó al usuario en un mundo virtual El diseño es para todos y el sonido coloca crucial a Roni, haciendo que la experiencia digital sea accesible Desde la descripción de audio o netflix para el daño visual hasta el sutil clic de una exitosa pulsación de botón El sonido está puenteado a simplas y exclusivo Vx. Exploremos el exclusivo mundo del diseño de sonido. Listo para llevar tu diseño Vx al siguiente nivel. Entrar en el diseño de sonido UX. Un cambio de juego. No se trata solo de funcionalidad, se trata de crear una conexión emocional con el usuario. Descubra la aventura del diseño de sonido reflexivo desde el aumento del compromiso hasta el reconocimiento mejorado de la marca. Pero, ¿dónde encuentras el sonido perfecto para tu sinfonía de diseño No temas. Tenemos lista de recursos para vty sound game Desde el efecto de sonido Jap slat free hasta las melodías libres de regalías sobre sonidos epidémicos Tenemos cobertura. ¿Estás listo para amplificar tu sonido Ex, o diseño gráfico ¿Vamos a sumergirnos en el mundo de los recursos sonoros? Voy a agregar todos los recursos sonoros en los recursos, así como en archivo de recursos. Ve y échale un vistazo. A medida que terminamos nuestro viaje sónico a través del diseño eVx, recuerda, un gran diseño no se trata solo de lo que ves Se trata de lo que oyes. Así que seamos tu guía en la elaboración, memorable, atractiva y exclusiva experiencia de usuario Hasta la próxima, sigue escuchando y sigue diseñando y deja que el paisaje sonoro de UX lidere el camino 112. Figma Final outro skillshare: Vaya, enhorabuena. Él es la línea de meta. Este viaje ha sido una aventura más tranquila, ¿no? Ha sido un curso largo. Pero aquí estamos. Y déjenme decirles que la creación este curso tampoco encajaba poco. Pero lo logramos juntos. Quiero tomarme un momento para expresar mi gratitud. Un enorme agradecimiento a todos mis alumnos anteriores y uno a todos los clientes de coaching. Eras valioso campo atrás y la perspicacia jugó un papel crucial en la configuración de este impresionante curso. No podría haberlo hecho sin ti. Ahora, vamos a crear el amor. Si te ha resultado útil este curso, y seamos honestos. ¿Por qué no lo compartirías con tus compañeros, amigos y cualquier otra persona de tu círculo que pueda beneficiarse de ello Tu apoyo me ayudó a crecer y a seguir haciendo lo que me encanta, creando contenido valioso para gente increíble como tú. Ah, y no olvides conectarte conmigo en las redes sociales. Probablemente ya tengas todos los enlaces en tus archivos de clase. Pero en caso de que te lo hayas perdido, están justo aquí. Mantengámonos conectados y mantengamos el viaje de aprendizaje arrullando Y, oye, ¿has revisado mi canal dip? Es un tesoro verdadero de contenido adicional desde consejos rápidos hasta los senderos profundos. Suscríbete ahora y nunca te pierdas la última actualización y conocimientos Ahora, hablemos del siempre gritando panorama de la industria El mundo del diseño cambia constantemente, y eso es lo que lo hace tan emocionante. Abraza el viaje, aunque a veces se sienta un poco dudoso Recuerda, el síndrome del impostor es un relleno común, pero estás más que calificado para llamarte diseñador de UX No se requiere calificación oficial. ¿Y adivina qué? Tu viaje de aprendizaje no tiene que terminar aquí. Si estás ansioso por vincularte más profundamente al diseño gráfico, redes sociales, IA o vdating, te tengo cubierto Consulta mis otros cursos sobre Canva, Catbi o Audible Los enlaces están en la sección de recursos, así que asegúrate de explorarlos. Y si alguna vez tienes alguna duda, o simplemente quieres chatear, pégame en las redes sociales. Ya tienes mis todas las asas, así que no seas tímido. Estoy aquí para apoyarte en cada paso del camino. Bueno, amigos, eso es un rap. Espero que disfrutes este curso tanto como yo lo he disfrutado creándolo. Ha sido un placer compartir estos conocimientos contigo, y no puedo esperar a verte pronto en otro curso. Hasta entonces, sigue diseñando, sigue creando y lo más importante, sigue siendo increíble. Así que adiós por ahora.