Domina Figma en 2026: diseño de aplicaciones web y móviles desde cero.

1. Promoción del curso: No , sí. Hola, diseñadores. Bienvenidos a la clase magistral Figma. Tu guía paso a paso para dominar Figma y nivelar tus habilidades de diseño Cuando empecé a usar Figma hace muchos años, no sabía cómo maximizar cada herramienta que tiene para ofrecer, y a veces me llevaría horas diseñar una página sencilla Después de muchas, muchas horas de ver tutoriales, asistir a config, experimentar y refinar mis habilidades, lo empaqueté todo en un solo curso con las últimas actualizaciones y características de Figma. Nima Tahami. Soy tu instructor para este curso. A lo largo de los últimos 12 años, desarrollé y diseñé docenas de productos exitosos. En el camino, también he tenido la suerte de enseñar a más de 15 mil diseñadores, ayudándoles a trabajar de manera más inteligente en FigMA y no más duro Ahora en este curso, diseñaremos una aplicación de reserva de viajes de principio a fin. Aprenderás a diseñar, crear componentes, aprovechar el diseño automático, incluso dominar variables y funciones de creación de prototipos para armar una aplicación completa y, por cierto, aprovecharemos Figma AI para ayudarnos a generar primeros borradores, imágenes, textos, imágenes, textos, haciendo que el diseño sea un poco más Al final de este curso, conocerás los entro/fuera de FGMagting las habilidades para diseñar más rápido y entregar diseños más confianza a los miembros de tu equipo, clientes, etc. Este curso es para diseñadores que buscan crecer, aquellos que se adentran en el diseño de productos o aquellos que buscan refinar su oficio y diseñar de manera más rápida e inteligente. Entonces, si esto te suena, entonces salta justo adentro y te veré en el curso. 2. INTRODUCCIÓN: Hola ahí. Bienvenidos al curso. Hoy has dado un gran paso para llegar al siguiente nivel en tu carrera de diseño mejorando tus habilidades en Figma, y no puedo expresar lo emocionado que estoy de tenerte en el curso A lo largo de este curso, aprenderás las características más nuevas y más recientes de FigMA, incluyendo la UI tres, FGM AI y todas las demás herramientas que ya ofrece como componentes, diseño automático, variables, prototipado avanzado, lo que Para aprender esas herramientas y conceptos, lo haremos en la práctica mientras armamos una aplicación web y móvil real. Esta aplicación es una aplicación de reserva de viajes llamada Wander wise. Es un cliente ficticio, pero es súper emocionante y definitivamente uno que puedes poner en tus carteras después Pasando por los pasos de este curso, número uno, comenzaremos con lo básico. Ahora, les recomiendo a todos que pasen por esto, incluso si tienes conocimientos de Figma, solo para repasar cualquier pequeño detalle que quizás no conozcas sobre las nuevas características de la interfaz Luego saltaremos a wireframing. Entonces usaremos un iPad, bolígrafo y papel o incluso la propia Figma para armar wireframes para las pantallas de nuestro proyecto Pasando a configurar un sistema de diseño, cómo usar variables, estilo tanto para el color como para las fuentes, luego saltaremos a crear nuestras primeras maquetas en Figma, diseñamos nuestro flujo de reserva completo de extremo a extremo desde el registro hasta completar una reserva en la aplicación de viajes Haremos una versión móvil y aprenderemos a crear diseños responsivos antes de lanzarnos a construir tu prototipo. Entonces tomaremos nuestro prototipo, lo haremos más avanzado con variables, animaciones inteligentes, etc., que puedas compartirlo con tus amigos y compañeros y mostrarles lo genial que es una app que hiciste. Nuestra última sección cubre cómo trabajar manera más inteligente en Figma y colaborar mejor con los miembros del equipo Dicho esto, comencemos nuestros conceptos básicos de Figma y vayamos a partir de ahí 3. Before Jumping In: Antes de continuar con las conferencias, quiero hacer una pausa realmente rápida aquí solo para mostrarles el breve detrás de escena de cómo se hacen realmente estas conferencias, se dedica mucho tiempo a planificar las conferencias y en realidad filmarlas y editarlas. Construí una herramienta llamada clip en la que ahora hago toda mi grabación, incluyendo las conferencias que estabas a punto de ver. Estoy muy entusiasmado con ello, así que por eso te lo estoy enseñando. Esencialmente dejo caer el metraje que tengo para las conferencias, y en lugar de tener que pasar, ya sabes, decenas de horas al lado del editor editando todo el curso, ahora tengo la IA dentro de esta herramienta, hago la edición para. Si estás pensando remotamente en hacer algún tutoriales o YouTube o tipo de contenido del curso, para el caso, o tipo de contenido educativo de cabeza parlante, esto podría ser muy útil. Entonces ahora mismo lo está pasando y limpiando todos los errores que cometí para que cuando estés viendo las conferencias, ya sabes, sea profesional, sea suave, esté limpio, y no estés sentado ahí perdiendo el tiempo viendo conferencias que no tienen sentido o simplemente pausas aleatorias a lo largo del video Así que compruébalo. Aquí hay un enlace si, de nuevo, te interesa filmar contenido o simplemente para hurgar y ver si es algo que puedes usar para tu propio tipo de uso diario. Disfruta el resto del curso. 4. Puesta en marcha: Empecé de cabeza a figma.com para crear una cuenta si aún no tienes Continúe e inicie sesión o si ya ha iniciado sesión, entonces debería ser llevado a su página de inicio que podría verse algo así. Ahora podrías estar en la carpeta de resentimientos o en la carpeta de borradores. Eso está totalmente bien. Desde aquí podrás explorar tus archivos. Ahora, una cosa que sí recomiendo es que si te gusta usar aplicaciones de escritorio en tu computadora, puedes seguir adelante y hacer clic en Obtener aplicación de escritorio desde el menú de aquí arriba. Para lo que resta del curso, voy a estar usando la aplicación de escritorio de Figma. Es prácticamente idéntico. No hay gran diferencia entre ellos. Aunque cuando tienes la aplicación de escritorio, algunas de las opciones son accesibles a través del menú en la parte superior. Si prefieres continuar con Desktop, adelante y haz una pausa aquí, descarga esa aplicación. De lo contrario, no dude en continuar en el navegador. Comenzando desde arriba, ves tu perfil donde puedes seguir adelante e iniciar sesión en varias cuentas. Aquí ves una campana de notificación que te muestra todas las actividades que están sucediendo en tus archivos. Normalmente comenzamos en la carpeta de borradores cuando estamos comenzando nuevos proyectos, y puedes crear un nuevo proyecto pulsando Crear nuevo aquí arriba Ahora, si haces clic en la flecha hacia abajo, puedes crear un tipo diferente de proyectos. Si estás trabajando en un FIC Jamboard o una plataforma de diapositivas, también puedes hacerlo desde aquí Si estás importando desde un archivo FIC punto que tengas o incluso un boceto, también puedes importar haciendo clic aquí. Te pedirá que dejes caer cualquier archivo de boceto, imágenes, PDF, etc. para agregarlo a tus borradores Puede organizar sus archivos de manera diferente mostrándolos como una lista o como cuadrículas. Personalmente me gusta un poco mejor la opción de grilla. Y en el lado izquierdo aquí puedes ver diferentes equipos de los que formas parte. Ahora siempre puedes crear nuevos equipos aquí, pero no es necesario hacerlo voy a continuar en la escuela Clover aquí y en mi draft. Puedo crear un nuevo archivo desde aquí haciendo clic en Plus o nuevamente, desde aquí arriba, puedo crear un nuevo archivo. Desde aquí, también puedes explorar la comunidad que te dará acceso a los archivos que comparten otros usuarios de Figma. Esto incluye cosas como diapositivas, recursos de diseño, complementos, etc., que exploraremos más a fondo en el curso. Por ahora, voy a seguir adelante y presionar Crear Nuevo Archivo, Diseñar Archivo, y esto nos lleva a un nuevo archivo. Y nuevamente, voy a seguir adelante y continuar en la aplicación de escritorio, abrir ese mismo archivo, y volvamos a la siguiente sectura para conocer los diferentes paneles 5. Diseño de archivos: Estamos en un nuevo expediente. Exploremos a qué tenemos acceso. Partiendo desde el panel izquierdo por aquí. primero es lo primero, si notas que mi Figma está en modo oscuro Esta es mi preferencia por usar Figma usando el modo oscuro, comenzando desde la parte superior izquierda aquí Obtienes acceso al panel izquierdo desde donde puedes seguir adelante y acceder a las opciones del menú FIGMA Puede seguir adelante y acceder a las opciones de su archivo así como hacer cosas como duplicar el archivo, cambiar el nombre de mover o eliminar Puedes darle a tu archivo un título como este, y puedes ver dónde vive tu archivo. Ahora mismo, está en mi carpeta de borradores. Justo debajo de eso, verás dos pestañas. Puede cambiar entre el archivo o la pestaña de activos. Ahora, entraremos en la pestaña de activos y cómo puedes acceder a los recursos desde allí. Pero en pocas palabras, obtienes acceso a recursos a los que tienes acceso. A partir de aquí, puedes seguir adelante y navegar los componentes del sistema de diseño que tengas, así como otros que hayas agregado a tus proyectos como los que Figma ya te da Desde el archivo, puedes ver las páginas que tienes en tu diseño. Tus diseños pueden tener tantas páginas como quieras haciendo clic en este ícono más aquí y agregando nuevas páginas. Ahora debajo de tu panel de capas, medida que comiences a agregar cosas en el lienzo, aparecerán en el panel de capas. Sólo como ejemplo, voy a crear un rectángulo golpeando R en mi teclado y dibujando un rectángulo aquí, como pueden ver, aparece en mi panel de capas. Ahora bien, si marco ese rectángulo golpeando F y dibujando tu marco alrededor de él, puedes ver que se coloca una jerarquía aquí en mi panel de capas donde tenemos un marco con un rectángulo dentro de él. Cada vez que vea capas sangradas, significa lado instantáneo de otra capa como este marco Al seleccionar un marco, siempre puedes agregar cosas dentro de él como este texto. Siempre puedes mover las cosas fuera de los marcos o volver a los marcos en sí. Ahora, estaba usando atajos de teclado, pero si quieres acceder a todas las herramientas a las que tienes acceso en Figma, puedes hacerlo desde la barra de herramientas de aquí abajo La barra de herramientas te da acceso a múltiples herramientas de movimiento como el MvTOL que está seleccionado por defecto, donde puedes seguir adelante y mover las cosas Herramienta de mano si solo quieres navegar, pero no quieres mover cosas accidentalmente. Y una herramienta de escala si quieres escalar objetos, lo cual haremos a lo largo del curso. Ir a pasar a la herramienta de movimiento. Y desde aquí, tienes acceso al marco para crear marcos, que son contenedores para tus diseños, así como secciones y diapositivas. Justo al lado, obtienes múltiples herramientas de forma, desde rectángulos hasta elipses y Hay una herramienta de lápiz si quieres crear formas personalizadas, herramienta de texto para agregar texto a tus proyectos. Si quieres abrir la pestaña o panel de comentarios. Puedes hacerlo desde aquí, y por aquí, obtenemos el panel de acciones, que también puedes abrir pulsando Comando K en tu teclado o Control K en Windows. Ahora, desde aquí, obtienes acceso a algunas funciones de IA, tus activos nuevamente, y también a complementos y widgets. Ahora, siempre que estés trabajando con desarrolladores, probablemente quieran usar el Modo Dev, para que puedan hacerlo alternando al modo Dev aquí Exploraremos DevMDE más adelante. Por ahora, solo estamos obteniendo una visión general. Ahora, el lado derecho contiene todas las propiedades de tus objetos. Sea lo que sea que seleccione en su lienzo, podrá ver las propiedades en el lado derecho. Y ahora mismo, no tenemos ningún estilo. De lo contrario, también aparecerían aquí. A partir de aquí, podemos controlar el color del lienzo en sí, hacerlo más claro o más oscuro. Y siempre puedo ir a la configuración del prototipo también desde aquí. Ahora, una vez que seleccionas un elemento en tu marco, obtienes acceso a muchas más opciones aquí, comenzando por la posición. Entonces donde este objeto vive dentro del marco, también obtienes acceso a las opciones de constreñir, opciones de diseño, así el tamaño de este elemento, por ejemplo, la apariencia, el relleno, que es el color, trazo, efectos y herramientas de exportación para exportar este rectángulo fuera de aquí Ahora bien, si selecciono el texto, obtengo opciones ligeramente diferentes aquí obtengo opciones ligeramente diferentes, como las opciones de tipografía Ahora exploraremos todo esto y lo usaremos mucho a lo largo de nuestro curso. Así que estad atentos sobre cómo usar todas las opciones a las que tienes acceso. Ahora con eso, volvamos en la próxima conferencia para comenzar a sumergirnos en nuestro proyecto. 6. Comienza nuestro proyecto: Lo básico está fuera del camino. Ahora ten en cuenta a medida que empecemos a trabajar en nuestro proyecto, vamos a aprender mucho más sobre todas las herramientas y plugins y componentes y así sucesivamente y así sucesivamente mientras estamos haciendo el proyecto. Por eso ahora estamos saltando directamente a nuestro proyecto para que podamos aprender más. Entonces por aquí, tengo un documento de requisitos de producto abierto, que suele ser lo que una empresa o un cliente o su gerente de producto en una empresa en la que está trabajando compartirían con usted cuando hay un nuevo proyecto en el que trabajar. Ahora para este caso, tenemos un proyecto llamado Wander Bye. Wander Boise es una aplicación web diseñada para permitir a los usuarios descubrir y reservar viajes de destino alrededor del mundo Con un enfoque en una experiencia de usuario perfecta y una interfaz intuitiva, Manda Boye ayuda a los usuarios a encontrar, planificar y reservar las escapadas de sus sueños. Bastante sencillo. Tenemos una app, una app de viajes que es una app web. El objetivo de esta plataforma es permitir a los usuarios explorar destinos emocionantes, personalizar sus viajes y administrar sus reservas. Esencialmente, estamos haciendo una plataforma de viajes de reserva. Ahora, en este documento de requisitos del producto , normalmente hay una visión general, un objetivo y luego hay características principales y páginas que necesitamos diseñar. Por supuesto, puedes descargarte esto en los recursos para recorrerlo con más profundidad. Apenas en un nivel alto, vamos a necesitar algunas páginas de autenticación de usuario página de incorporación, una página de gestión de perfiles, descubrimiento de destino que creo es la pantalla principal que los usuarios van a estar viendo porque aquí es donde encontrarán viajes para tomar con la opción de filtrar por precio, ubicación, actividad, tipo, etcétera También necesitamos la página de detalles de destino que puedan ver destinos específicos en profundidad, gestión de reservas, una página de reservas para poder seleccionar paquetes, fechas, alojamientos, etcétera, muy sencillo, afirmar y filtrar funcionalidad, pago y pago, página de favoritos y lista de deseos, reseñas y calificación, por supuesto, como parte de la aplicación Entonces tenemos aquí, los objetivos de diseño es una interfaz de usuario intuitiva, creativa visualmente atractiva y fácil de navegar interfaz, consistencia, mantener la consistencia en los elementos de diseño, incluyendo colores, fuentes, iconos, etcétera Por supuesto, asegúrese de que sea accesible para todos los usuarios que se adapten a diversas necesidades. Sus usuarios objetivo son viajeros que buscan inspiración y reservas de viajes, varias edades y que buscan paquetes de viaje en cajas Por lo que sus usuarios objetivo son esencialmente personas que quieren reservar viajes rápidamente sin tener que hacer mucha investigación o mucho trabajo separado para reservar partes separadas del viaje. Quieren una opción en la que vayan a reservar un viaje sin problemas, y son buenos para ir sin tener que trabajar mucho más en la planificación de su viaje. Ahora, sí dice que es una aplicación responsive basada en la web, por lo que podemos hacerla para que empecemos primero con la versión de escritorio, trabajemos en los diseños de escritorio antes de pasar a luego hacerlo amigable también en el móvil, e integración con API de terceros para el pago. Entonces con eso, creo que tenemos suficiente información para comenzar a poner en marcha nuestro proyecto. Entonces lo primero es lo primero, vamos a tomar estos requisitos que tenemos y convertirlos en wireframes lo largo de este paso, lo que estamos tratando de lograr es hacernos una idea de lo que queremos incluir en cada página, cómo queremos definir esos flujos de usuario a un nivel alto sin ir demasiado específicos, ya que llegaremos a eso mientras estamos haciendo las maquetas Pero por ahora, queremos saltar al wireframing de inmediato y comenzar con cada página Voy a simplemente saltar directamente con mi iPad y continuar en mi iPad. Siéntase libre de usar lápiz y papel. Siéntase libre de usar Figma en sí o Fikjam. Sea cual sea el método que encuentres mejor a la hora bosquejar ideas rápidamente sin tomar demasiado tiempo. Ve con esa opción. No dediques demasiado tiempo a este paso porque no es el paso en el que vale la pena pasar demasiado tiempo. Es solo para nosotros obtener una visión general de alto nivel de lo que necesitamos incluir en cada página, dónde queremos colocarla, y comenzar a hacer una lluvia de ideas e idear a quién quiere que esta aplicación se vea y se sienta parejo Sin más preámbulos, saltemos de inmediato. 7. Encuentra inspiración: Ahora, una de las cosas más importantes a la hora de comenzar un diseño es inspirarse. Como diseñadores, no tienes que reinventar la rueda todo el tiempo cuando estás diseñando Ofunse es importante ser creativo, pero una columna vertebral de idear diseños es ver lo que ya está ahí afuera. Y una de las herramientas más útiles que he usado para este propósito es mobile.com Con Mobil, puedes acceder a la captura de pantalla de muchas aplicaciones que probablemente hayas escuchado o usado antes o que encajen en lo que estás diseñando Lo bueno aquí es que puedes filtrar por el dispositivo. Entonces, si solo buscas diseños IOS, puedes filtrar por eso o si buscas diseños web, tienen toneladas de categorías para los diferentes tipos de empresas. Entonces tienes uno de viaje y transporte aquí que podamos echar un vistazo para nuestro proyecto en este curso. Y puedes ver que tienen AirBnB, que es bueno para mirar, y podemos dar click para echarle un vistazo. Y tienen todas las capturas de pantalla aquí dispuestas para AirBnB, incluyendo también los flujos de pago que pueden ser súper útiles y podemos usar inspiración de estas páginas que los diseñadores de AirBB ya pasaron toneladas de horas diseñando esta página y tomar inspiración y aplicarla en nuestros propios wireframes y luego Ahora, aquí estoy usando la cuenta Pro, lo que me da acceso para buscar y ver todas las capturas de pantalla fácilmente. Definitivamente vale la pena una actualización, y te dejaré un enlace que puedes usar para unirte a Mobin y comenzar a obtener inspiraciones para tus proyectos de diseño Ahora, de estas pantallas, voy a guardar algunas de ellas en mi colección. Así que voy a crear una nueva colección aquí llamada aplicación Travel, y puedes elegir que sea privada si no quieres que nadie más se una y luego presionar Crear. Si estoy buscando, digamos, pantallas de reserva, puedo hacer clic para ver las pantallas de reservas desde todas las diferentes aplicaciones, lo cual es increíble. hay una aplicación de alquiler de autos Aquí hay una aplicación de alquiler de autos que podría ser genial de ver y toneladas de otras aplicaciones con características y funcionalidades similares. Si ves una pantalla que te gusta, incluso puedes copiarla directamente en FIGMA. Así que acabo de copiar este flujo. Y aquí mismo en Figma, si ejecutas su plugin, mob in por aquí y plug ins y widgets golpean Ejecutar Y luego si golpeas Comando V, realidad puedes pegar ese flujo directamente en tu proyecto aquí Entonces ahora tengo todo el flujo de reservas de Expedia que puedo revisar en mi proyecto, e incluso puedo tener esto como parte de una página de investigación en mi archivo Figma. Entonces es súper útil. Te recomiendo que tomes una pausa, inspires usando Mobiin y seguiremos haciendo nuestro 8. Uso de ChatGPT para wireframing: Yo he usado HGPT, tú has usado HGPT probablemente y todos hemos Es una de las herramientas de las que podemos dejar de obtener suficiente y seguro, hay una manera de que nos pueda ayudar con encuadre de alambre. Ahora bien, ¿ cómo lo hacemos? Todo lo que tenemos que hacer es definir la app que estamos diseñando y hacer que HGPT presente ideas sobre lo que debemos incluir en cada página Solo como ejemplo, digamos que estamos trabajando en una página de descubrimiento de destino antes de eso, lo que voy a hacer es seguir adelante y copiar el resumen aquí de nuestro documento de requisitos de producto y decir, estamos diseñando una aplicación con la siguiente descripción general del PRD, darnos ideas sobre qué incluir en una página de descubrimiento de destino donde los usuarios una página de descubrimiento de destino antes de eso, lo que voy a hacer es seguir adelante y copiar el resumen aquí de nuestro documento de requisitos de producto y decir, estamos diseñando una aplicación con la siguiente descripción general del PRD, darnos ideas sobre qué incluir en una página de descubrimiento de destino donde los usuarios pueden encontrar viajes para reservar para el wireframe Un simple prompt como este, nos dará un desglose de qué incluir en esta página. Entonces ya tenemos una sección de héroes con destinos de características. Así que básicamente tienen un carrusel giratorio de destinos populares de temporada, una barra de búsqueda que se muestra de manera destacada , muy Botones de llamada a la acción con botones claros de explorar destino o descubrir ofertas, opciones de filtro de búsqueda con todos los detalles de lo que debemos incluir, incluso hasta preferencias meteorológicas, tipos de experiencias, duración del viaje, etc. Tarjeta de destino Carrusel de barra de cuadrícula, recomendación personalizada, recomendación personalizada visualización de mapa interactivo Entonces esa es una genial. A lo mejor queremos permitir que los usuarios también tengan un mapa de cada destino para que puedan hacer clic y ver a dónde los llevaría cada destino. Sección de inspiración y experiencia. Opiniones de usuarios e indicadores testimoniales, reservas y disponibilidad Entonces incluso te da idea cómo crear escasez con los usuarios, lo cual es una gran táctica de UX Sólo quedan tres manchas. Hemos visto esto en otras plataformas de aerolíneas y plataformas de reservas como esa, comparaciones y herramientas de marcadores Y así esto te da un montón de cosas para incluir en tu página. Y si esto es demasiado detallado, probablemente puedas pedirle que te dé un resumen. Dame un breve formato de viñeta resumido de las cosas. Para incluir en esta página. Entonces si quieres tener una versión más resumida, ahí vamos. Te da en formato bullet todas las pequeñas cosas para incluir. Entonces, a medida que estamos pasando por nuestro wireframe, definitivamente podemos usar HGBT para ayudarnos a idear qué incluir, para asegurarnos de que no nos falta nada de Y si bien esto es genial, podemos llevar este un paso más allá usando IA de FicMA para ayudarnos a elaborar los primeros borradores también Y vamos a hacer eso a lo largo del curso. Por ahora, saltemos a los wireframes basados en toda la inspiración y los recursos que tenemos hasta ahora, así como nuestro documento de requisitos de producto y empecemos desde allí y luego pasemos por todas las páginas que necesitamos diseñar. Así que te veré a continuación 9. Wireframe de página de registro: Mencionado, estoy haciendo mi encuadre de alambre en Fig Jam en mi iPad Esto se puede hacer. Si tienes un iPad. Si no lo haces, puedes hacer lápiz y papel, puedes hacer solo FIG Jam en su computadora. Realmente depende de ti, sin embargo haces el encuadre de alambre. Sólo otra vez, no dediques mucho tiempo a este paso. Este es un wireframe de baja fidelidad que estamos armando solo para saber qué incluimos en cada página, dónde la reemplazamos, y para anotar todos los pequeños detalles que tal vez olvidaremos para cuando lleguen los prototipos o las maquetas Ahora lo primero es lo primero, voy a agarrar la herramienta Pluma y con una regla encendida aquí, voy a dibujar simplemente un rectángulo para representar mis marcos de alambre, arreglarlo aquí arriba. No tiene que ser perfecto. Como pueden ver, no soy el mejor dibujando estos rectángulos, incluso con una regla encendida aquí, pero nuevamente, aquí solo estamos haciendo un borrador bruto Ahora, lo que voy a hacer es que voy a seguir adelante y usar esta herramienta aquí para seleccionar todo aquí y dar clic en supongo que una copia y una pasta como esta podrían funcionar. Así que de esta manera tenemos múltiples uno que podemos usar para diferentes pantallas. La primera pantalla en la que nos vamos a centrar son nuestras páginas de autenticación. Esta será nuestra inscripción. Pantalla por lo que aquí es donde los usuarios vendrán a registrarse en la aplicación. Normalmente en una página como esta, podemos tener una pequeña imagen en el lateral o simplemente podemos tener una caja con las entradas para sus usuarios el correo electrónico del usuario, la contraseña. Ahora, es muy importante mirar el PRD o los documentos de requisitos del producto para asegurarse de incluir todo Entonces, lo que me gustaría hacer antes incluso de empezar a dibujar algo dentro la ventana es escribir una especie de forma de viñeta ¿Qué necesito en esta página? Entonces lo primero es lo primero, necesitamos el correo electrónico. Necesitamos contraseña. Necesitamos el logo, que por ahora será el nombre de la empresa Wonder Wise. Entonces estoy leyendo el PRD, específicamente, también queremos cuentas sociales No especifica cuál, así que esto es algo que quieres consultar con tu, ya sabes, uh, PM o tu cliente si realmente estás trabajando en una aplicación real. Esto es solo una compañía ficticia, así que vamos a optar por firmarla también con Google por ahora, y también hay una opción para usar el número de teléfono Hagamos el campo número de teléfono dos. Como una forma de iniciar sesión. Y así eso debería cubrir la mayoría de las cosas que necesitamos aquí. Opcionalmente, podemos volver a tener una imagen, o simplemente podemos tener una caja para iniciar sesión. Ahora para esta app, creo que sería genial tener parte de ella mostrando una imagen de personas viajando o algo así, y luego la mitad de la pantalla serían las opciones de inicio de sesión. Entonces tal vez pueda dividir la página, ya sabes, dos tercios a un tercio, algo así. Donde de este lado de la pantalla, será una imagen. Y entonces del otro lado estará todo el contenido que discutimos. Entonces tal vez comenzando con el logo aquí. A lo mejor nos gustaría una breve descripción de lo que hace Wander Weiss Si sólo puedo reemplazar esto por Wander Weiss poco eslogan línea por aquí Entonces queremos el buzón de correo electrónico. Nuevamente, esto no tiene que ser perfecto siempre puedas leer tu escritura, que para mí, a veces es difícil contraseña, y luego necesitamos una opción tal vez o iniciar sesión con tu número de teléfono, número teléfono o Google. Sólo voy a poner un poco de G aquí. Ahora, sí quiero mover estos hacia abajo para incluir un botón aquí y solo voy a hacer el botón de aquí para inscribirme. Ahora, en algún lugar también deberíamos incluir eso si tienes una cuenta, enlace a Login. Entonces, si el usuario ya tiene una cuenta, debemos vincularnos a una página de inicio de sesión. No voy a telegrafiar la página de inicio de sesión porque vamos a hacer más o menos lo mismo Así que solo titularé este signulash Iniciar sesión así. Pero claro, seguiremos adelante y haremos los cambios y las maquetas una vez que empecemos a armar las cosas Um, así que sí, queremos un enlace para iniciar sesión en caso de que tu usuario ya tenga una cuenta. Pueden ir a la pantalla de inicio de sesión en lugar del registro. Y luego una vez que van al siguiente paso, dependiendo del paso por el que pasen, digamos que van por el número de teléfono, luego desde el número de teléfono, también necesitamos una verificación o una forma de iniciar sesión usando el número de teléfono. Y normalmente, este es un código de verificación que se envía. Entonces probablemente nuestra segunda pantalla estará verificando el inicio de sesión, y volveremos en la próxima conferencia para armar ese diseño también. 10. Wireframe de código de verificación: Todo ahora mismo para nuestro inicio de sesión de verificación , es bastante simple. Vamos a seguir un diseño similar. Tendremos la imagen en un lado, y luego el código de verificación justo por aquí. Entonces haremos aquí código de verificación. Entonces necesitas ingresar algunos dígitos aquí, y luego lo llamaremos botón Continuar. Es un botón para seguir yendo al siguiente paso y luego verificar el inicio de sesión o algo así. Entonces queremos un campo ahí dentro. Queremos un botón ahí dentro, y eso es prácticamente todo. A lo mejor también un botón aquí para reenviar código. Entonces, en algún lugar por aquí, reenviar código. Si no lo recibieron la primera vez, pueden volver a recibirla. Así que eso completaría nuestras páginas de autenticación. Las siguientes páginas que tenemos después de eso son gestión de perfiles, descubrimiento de destinos. Voy a ir en orden del flujo que queramos. Por lo general, queremos que los usuarios pasen por las páginas de inicio de sesión aquí, y luego queremos que salten a la página principal de nuestra aplicación. Esta página principal es el descubrimiento de destinos porque aquí es donde los usuarios seguirán adelante y descubrirán destinos, ingresarán su destino preferido y aplicarán filtros y así sucesivamente antes de reservar realmente un viaje. Entonces entonces vamos a seguir adelante y dibujar otro rectángulo aquí. Y esta será para R. Página de destino. Así que justo en la cima, destino. Descubrimiento, lo llamaremos. Nuevamente, como hicimos en la otra página, anotaremos lo que necesitamos en esta página. Me referiré al recurso que pasamos con HatGBT donde miramos algunas de las cosas que necesitamos, así como el PRD que fue compartido por Entonces veremos tanto esos como tipo de referencias cruzadas, así como nuestras propias ideas y nuestra propia inspiración que encontramos en otros sitios web como los que compartí anteriormente. Siéntase libre de hacer una pausa aquí. Echa un vistazo a algunos sitios web similares. Recomiendo incluso ir a expedia booking.com o cualquier otra plataforma que utilices para reservar viajes y tal vez ver cuáles son las cosas que ofrecen en estas páginas de descubrimiento de destinos que tienen ¿Cómo es su tipo de flujo de reservas? Este sería un buen momento para hacer ese tipo de offline por tu cuenta. Y luego continúa dibujando y agregando elementos de esos sitios web a tu propia aplicación también. Nuevamente, para ser un gran diseñador, no necesitas reinventar la rueda todo el tiempo De hecho, es todo lo contrario. Cuanto más puedas aprovechar y usar otros diseños que ya han sido establecidos y diseñados por otros diseñadores, mejor serás, más rápido estarás armando wireframes y simulaciones y prototipos bastante 11. Wireframe de descubrimiento de destinos: Hay dos componentes en esta página. Ahí está la parte que va a ser el destino relacionado con cosas específicas. Así que probablemente tendremos una barra de navegación en la parte superior para incluir cosas como, ya sabes, cualquier navegación a diferentes lugares de la aplicación, así como volver a la página principal Entonces probablemente tendremos el logo aquí para llevarnos de vuelta a la página principal, donde quiera que estemos, y luego un montón de enlaces en el lado derecho que por ahora, no voy a agregar. Quieres diferentes tarjetas aquí. Entonces definitivamente sabemos que queremos algunas tarjetas de destino. Probablemente estas tarjetas deberían ser un poco más bajas para que en la parte superior, tengamos algo de espacio para la entrada. Quieres separar tu lista de cosas que necesitas en dos categorías diferentes. El primero está en la página misma, el segundo está en la propia tarjeta. Entonces en la tarjeta que queremos incluir detalles sobre destinos específicos, queremos hacer dos listas separadas para cada uno. Entonces, por ahora, hagamos la propia página de descubrimiento. Queremos una barra de búsqueda aquí para buscar destinos. Entonces queremos que escriban cuál es su destino. Ahora bien, como no estamos reservando vuelos para ellos, no necesariamente necesitamos saber de dónde vienen. Solo necesitamos conocer los destinos. Y como parte de esa barra de búsqueda, probablemente queramos algunos filtros de fecha. Entonces queremos que los selectores de fecha les pregunten cuándo necesitan o cuándo quieren viajar Ahora, a lo largo de esta página, también queremos opciones de clasificación. Queremos que se clasifiquen por popularidad, precio, calificaciones. Y nuevamente, la mayoría de estos provienen de Chat GPT. También queremos opciones de filtro. Para los filtros, queremos hacer presupuesto podemos hacer tenemos rango de fechas ya así podemos hacer solo duración del viaje. Entonces, ¿cuánto tiempo quieres que los viajes sean tipo experiencia? Nuevamente, siempre podemos cambiar estos más tarde. Simplemente es bueno tener una idea de con qué queremos empezar inicialmente al menos también si preferencia. Esas son algunas buenas opciones de filtro. Entonces los necesitamos como parte de la página. Tal vez queramos incluir una vista de mapa, así que esta es una buena para pensar. Me inclino más hacia no poner una vista de mapa aquí solo por el hecho de que los destinos no van a ser lugares específicos Serán solo ciudades específicas. Así que probablemente no queremos un mapa a menos que estén eligiendo, ya sabes, un lugar para su alojamiento. Entonces quizás en la página de detalles, podemos incluir un mapa con diferentes opciones de alojamiento y así sucesivamente. Pero para la página en sí, no creo que necesitemos un mapa. Pero nuevamente, estas son parte de las características que siempre podremos agregar más adelante. O si estamos trabajando con nuestro cliente, definitivamente podemos platicar a través de este con ellos. Entonces, en un escenario de la vida real, esto será un poco diferente. Ahora tal vez también queremos algún tipo de diferentes categorías de opciones. Entonces tal vez una categoría o podemos llamarla colecciones temáticas. Y estos podrían ser grupos de categorías de destinos que puedan ver pinchando ahí y viendo destinos que, digamos, son escapadas románticas o viajes de resort o diferentes categorías en las que podemos clasificar los viajes Entonces, en caso de que quieran ver algo así de lo que es popular bajo esas categorías, también pueden hacerlo. Creo que estos son buenos para empezar por lo menos por ahora. Para nuestro descubrimiento de destino. Ahora para la tarjeta en sí, podemos volver en la siguiente conferencia para armar una lista de cosas que queremos antes de armar el resto de esta página. Esta es probablemente una de las páginas más importantes y visitadas de nuestra aplicación, por lo que es bueno tomarnos nuestro tiempo con ella y no apresurarnos a saltarnos esta planeación detallada Así que volvamos en la próxima conferencia para comenzar a planificar nuestras tarjetas de destino. 12. Wireframe de tarjeta de descubrimiento de destino: Tarjetas de destino. ¿Qué queremos en cada tarjeta de destino? Necesitamos el nombre de la ciudad y el país. Probablemente quiera la calificación. Necesitamos algún tipo de costo para ese viaje, y probablemente será algo así como precio por día o por noche a menos que escriban una fecha específica. En cuyo caso, podemos mostrarles el total de su viaje. Entonces voy a hacer una barra total. Queremos un botón para que vean más información o continúen o reserven ese destino. Por ahora, sólo lo llamaremos botón. Definitivamente queremos una imagen. Sin embargo, es importante no abarrotar esta tarjeta. Podríamos tener una insignia de popularidad si queremos. Entonces, si este destino es una elección caliente, podemos mostrarlo con un pequeño icono. Y también, si quieres agregar esto o marcar este destino, podemos marcarlo como favorito. Para que podamos guardarlo en nuestro perfil o página de marcadores y así sucesivamente. Entonces creo que esas son cosas buenas para empezar para incluirlas en nuestras tarjetas de destino. Ahora, hagamos una estructura alámbrica de la página misma. Queremos que nuestra barra de búsqueda u opciones de clasificación y opciones de filtro estén en la parte superior, en algún lugar por aquí. Así que probablemente querríamos la barra de búsqueda aquí con un destino. Ahora bien, ¿por qué en la parte superior izquierda? Este suele ser el primer lugar que un usuario miraría. Así que queremos que se pongan rápidamente en un destino si ya saben a dónde van, o simplemente pueden navegar por lo que hay disponible. También podemos entonces tener nuestros seleccionadores de fecha por aquí, y podemos tener botones aquí para filtrar y ordenar Y podemos tener las tarjetas de destino justo debajo de eso. Ahora, tendremos un montón de filas de estas tarjetas de destino y probablemente justo debajo en algún lugar solo vamos a seguir adelante y extender un poco esta página. Justo debajo, es posible que queramos incluir colecciones temáticas. Podemos simplemente llamarlo colecciones y tener diferentes colecciones de destino aquí. Entonces estas podrían ser imágenes con solo el nombre de una colección. Con la posibilidad de ir y navegar por todos los viajes bajo esas colecciones. Creo que este es probablemente un buen comienzo. No te preocupes por la barra de navegación en la parte superior. Por ahora, volveremos y lo enmarcaremos con alambre juntos. También podríamos trazar cómo podría ser esta tarjeta de destino Quizás podríamos hacer una imagen aquí del destino con el nombre de ciudad slash Country Podría hacer la calificación aquí. Quizás un costo. Por ahora, solo estoy escribiendo mil dólares a la semana, pero de nuevo, en las maquetas reales, lo arreglaremos Puedes incluir iconos aquí. Este es un ícono de FR, por si es popular. A lo mejor un botón aquí para bookmarkt luego un botón aquí para continuar Creo que esto funcionaría por ahora. Siéntete libre de tomarte un momento si necesitas más inspiración y mira algunas aplicaciones similares que tienen tarjetas y cómo diseñan sus tarjetas. Esto es algo que he visto en muchas apps y cómo presentan las cosas. Entonces por eso los estoy armando rápidamente, pero puedes tomarte tu tiempo y hacer una pausa aquí para echar un vistazo a algo de inspiración. Ahora, como un pequeño ejercicio, te dejaré la página de detalles de destino para que la hagas como tarea por tu cuenta. Y esta página de detalles de destino es esencialmente una página más detallada con nuestra información de destino. Entonces toda esta información que tienes en la tarjeta, además de otras cosas como reseñas en profundidad y cosas como descripción del viaje, opciones de reserva. Ahora, voy a estar armando eso en las maquetas. Yo mismo, pero siéntase libre de hacer esto como una pequeña tarea para mejorar sus habilidades de wireframing, luego volveremos y continuaremos con el siguiente paso en el flujo de reservas, que es la gestión de reservas o la página de reserva, y luego la confirmación de la reserva y Así que volvamos y armemos esa página. 13. Wireframe de detalles del destino: Bien, entonces para la página de detalles del destino, dejé esto como una tarea para que lo hicieras si quisieras. He seguido adelante e hice mi propia página de detalles de destino. De nuevo, el tuyo podría verse completamente diferente al mío. La parte principal es asegurarnos de que incluye los componentes principales que necesitamos. Entonces algunos de los detalles de la propia tarjeta de destino, así como cualquier otra cosa que pueda ser secundaria u otros detalles importantes que necesitaremos para conectar también la pantalla eventualmente al flujo de reserva en la pantalla de reserva. Um, así que para el mío, en la parte superior, pongo la imagen aquí a la izquierda con la posibilidad de ver múltiples imágenes. Justo debajo de él, pongo algunas cosas incluidas que vienen con su destino. Entonces esto podría ser como una lista de amenidades, y podemos hacerlo en formato de icono. En la parte superior aquí, nombre del destino, la ciudad, um, el país, um, las calificaciones, el icono de fuego, y el botón um, marcador aquí, como se ve en la propia tarjeta también. Entonces eso detalla ahí con una breve descripción de lo trata este destino, justo debajo de él, y luego un botón o puede llamar a la acción para seleccionar la habitación porque normalmente esto es lo que las páginas de reserva te permiten hacer. Una vez que llegue a una página de detalles de destino o una página de ubicación o una página de hotel, el siguiente paso es elegir un alojamiento. Ahora, podrían estar en diferentes lugares o podrían estar en el mismo lugar. Um, entonces esto podría ser un tipo de habitación o incluso un tipo de hotel. Por ahora, sólo hay que poner tipo habitación. Entonces justo debajo de él, también es alojamiento con todos los diferentes filtros. Entonces, si no seleccionaron una de la página antes, la página de descubrimiento de destino, si no la pusieron en una fecha y tal, pueden hacerlo desde aquí. Pueden sumar su número de viajeros y así sucesivamente. Y luego ver los diferentes alojamientos para ese viaje. Justo debajo de él, pongo un poco de calificaciones. Para que puedas ver cuáles son las calificaciones de esta propiedad o en realidad es el destino con la posibilidad de verla en formato carrusel Entonces justo debajo de él, se ven algunos destinos similares. Si esto no es tan agradable para usted, puede encontrar otras que están disponibles a través de las tarjetas que están aquí, todas estas son tarjetas de destino similares a esta. Por supuesto que puedes incluir mucho más en esta página, tal vez un mapa hasta cosas como políticas para el registro de entrada, salida, etc. Hay mucho más que puede entrar en ello. Por ahora, lo estoy manteniendo simple. Estoy poniendo los mismos requisitos, creo, para esta página. Seguiremos adelante y pasaremos a nuestra página siguiente en el wireframe, que es la página de reserva Ahora bien, esta página de reservas es esencialmente la página de reservas que viene justo después de seleccionar el alojamiento. Entonces, si selecciono uno de los alojamientos aquí, esta es la página que se abrirá. 14. Wireframe de pantalla de reserva: He seguido adelante y enumeré los artículos que necesitamos para nuestra pantalla de reservas. Ahora, lo he hecho a través de la ayuda de mirar a través de otras plataformas similares, además de referirme a Chat GBT en el lateral Y esto es lo que se me ocurrió. Tenemos los detalles del alojamiento. Así que solo queremos ver la habitación o el hotel que están reservando o en el que se van a alojar. Existe la posibilidad de que se alojen en varios lugares si este destino, ya sabes, este lugar al que van a tener múltiples ubicaciones diferentes, ya sabes, en los paquetes, así que podríamos querer incluirlo en el diseño, fechas seleccionadas, el botón B y un botón de libro, algunos complementos. Entonces en el PRD o el documento de requerimiento del producto, menciona la necesidad de reservar servicios adicionales como renta de autos, guías locales o actividades y así sucesivamente También he añadido esto aquí. Información de pago y luego información personal. Así que nombre, correo electrónico, número de teléfono y detalles de entrada y salida. Ahora en una pantalla como esta, podría ser agradable incluir algunos de los detalles del alojamiento en un lado, y luego el resto de la información o la entrada que el usuario tiene que poner en otro lado. Y normalmente, me gusta mantener las cosas consistentes. Por lo que al mantener los detalles para mostrar en el lado derecho, pueden ver el alojamiento que están reservando. Y luego del lado izquierdo, podemos tener todos los campos aquí. Entonces podemos tener así que comenzando por el lado izquierdo, solo voy a poner un botón de retroceso aquí y luego justo debajo de él, solo un título para confirmar la reserva. Entonces probablemente queremos recopilar nuestra información personal aquí. Puede que no lo llamemos información personal, pero para aquí, voy a seguir adelante y solo agregarlo aquí con los diferentes campos, correo electrónico, número de teléfono, nombre, apellido, correo electrónico, teléfono. Eso podría ser parte de una sección. Entonces la sección justo debajo que podría ser información de pago. Para esa, probablemente necesitemos un número de tarjeta de crédito. Así como fecha de caducidad, CVV y probablemente el nombre de la persona en la tarjeta Entonces solo voy a agregar eso aquí, pero en las maquetas reales, probablemente lo colocaremos de manera ligeramente diferente Entonces queremos agregar nuestros complementos, así que los complementos podrían ir por aquí. Y podemos tener pequeñas tarjetas como esta que representen los diferentes pequeños complementos que pueden agregar a su viaje con algún título y alguna breve descripción de lo que eso hace. También podemos incluir una imagen si quieres aquí, tal vez justo en la parte superior. Y entonces lo que queda aquí. Tenemos nuestros detalles de alojamiento seleccionados en la fecha, así que esos podrían ir juntos así como un botón de libro. Así que voy a seguir adelante y hacer esto un poco más corto para que podamos Ahí vamos. Imagen. El nombre. Y entonces, ¿qué están reservando? Una habitación, por ejemplo, y algunos de los detalles de la otra página, como las fechas y el número de personas. Y, por supuesto, es muy importante incluir el precio. No he añadido aquí, pero definitivamente queremos mostrar el precio, el precio total y lo que el usuario puede esperar pagar Y podemos tener entonces un botón de libro aquí abajo para completar la reserva. Entonces tenemos el botón ahí abajo. Ahora hemos hecho más de las páginas complejas juntos. Como tarea, dejaré la pantalla de perfil y pantalla de marcadores o la página donde puedan ver todos los elementos de marcadores Estas dos páginas, te dejaré las tareas para que las hagas. Volveremos en la próxima conferencia y comenzaremos a crear nuestra guía de estilo para la aplicación y pasar a diseñar nuestra aplicación juntos. 15. Obtener feedback: Entonces, una de las cosas más importantes de ser diseñador o simplemente hacer cualquier cosa en el campo creativo es realmente recibir comentarios clave de las personas que han estado allí, que lo han hecho, que están trabajando en empresas como Amazon, Shopify y las empresas más grandes que han pasado por el viaje que estás atravesando Pero en realidad creé esta herramienta llamada sitio Loom, que es donde realmente puedes obtener comentarios directamente de expertos y también de mí mismo. Si lo dirijas a stloom.com, puedes buscar profesionales del diseño que están disponibles para darte tu opinión Digamos que estoy tratando de solicitar un trabajo en Square. Puedo pedirle a Elizabeth aquí que realmente me dé retroalimentación sobre mis diseños que voy a mostrar en mi cartera, personas que trabajan en Square y directamente puedo pedir comentarios. Si tengo un proyecto en mente, realidad puedo pedir comentarios de Figma sobre mi proyecto o si solo quiero comentarios en video, puedo pedir comentarios en video Digamos que en realidad quiero pedirle comentarios de Figma, solo golpeo solicitar comentarios Entonces lo que haces es que tomes tu enlace de archivo Figma. Este es mi archivo Figma. Voy a presionar Compartir, copiar el enlace. Y ve por aquí y solo pégalo. Puedo preguntarle a Elizabeth sobre qué quiero comentarios. Por supuesto, el UIUX, tal vez el diseño visual y tal vez si esto está listo para el traspaso Si hay algo más también le puedo preguntar específicamente, ¿me puede dar su opinión sobre si este es un buen proyecto para exhibir en mi cartera? Y ¿tiene sentido el flujo de usuarios? Voy a hacer sus preguntas específicas y luego presionar pagar y enviar solicitud. Entonces, una vez que hagas eso, la persona que te está dando retroalimentación revisará tu archivo, dejará comentarios falsos de Ma donde si pides un video, te enviarán un video o comentarios escritos para te enviarán un video o comentarios escritos que así puedas seguir mejorando tus diseños en lugar de simplemente confiar en conjeturas Definitivamente échale un vistazo a esto. Si estás considerando ejecutar tu proyecto por algunas personas antes de presionar publicar. 16. Elegir un esquema de color: Con nuestros marcos de alambre fuera del camino, hora de pasar al siguiente paso de nuestro proyecto, y eso viene con algunos estilos para el proyecto. Ahora, los estilos son la base de nuestro proyecto, y los estilos incluyen cosas como la combinación de colores, la tipografía que vamos a usar, y en algunos casos, el sistema de diseño que queremos usar, si quieres usar uno o crear uno desde cero Entonces, en esta sección del curso, vamos a seguir adelante y enfocarnos en establecer básico para que podamos saltar a armar las maquetas, y ya no tendremos que preocuparnos por los colores y el tipo cuando lleguemos a esa parte del proyecto Entonces hay un par de recursos que utilizo a la hora de generar esquemas de color. Antes de saltar a los otros, quiero mostrarles que CHA JBT también presenta esquemas de color decentes Si le dices en qué estás trabajando y le pides algunos colores, sí te vienen con algunos bonitos tonos que puedes usar para tus proyectos Y aquí hay algunos otros recursos que generalmente uso, y te recomiendo que revises estos. Los enlaces también están en los recursos para todas estas herramientas por las que vamos a pasar. Uno son los refrigeradores. Puedes presionar iniciar el generador aquí y simplemente saltar directamente a la primera paleta que te da. El tuyo probablemente será diferente al mío. Simplemente golpeas la barra espaciadora de tu teclado y sigue generando diferentes colores. Ahora si te gusta un color, digamos , me gusta este azul marino. Puedo darle a Lock on it, y luego seguir golpeando espacio para que me emparejen con otros colores que sean similares o complementarios, y puedo seguir bloqueando diferentes colores que quiero usar para mi proyecto. Entonces, si veo uno bonito, siempre puedo darle a Lock ahí y luego seguir generando el resto de mi paleta. Generalmente, no necesitamos más de tres colores en un proyecto. Uno para cosas como fondos o cajas de alerta y cosas por el estilo. Otro para acciones primarias como botones, otro para acciones secundarias o incluso un color de acento para usar en ciertas partes del proyecto, como el texto o potencialmente algunos fondos aquí y allá y así sucesivamente. No necesitas cinco juegos completos de colores. De hecho, eso podría llegar a ser un poco demasiado. Siéntase libre de experimentar con esta herramienta. Hay otro, ai coolors.co. Este es un esquema de color generado por IA. Te da algunas iniciales que puedes experimentar y ver cómo se vería en una pantalla de tablero como esta de aquí. O también puedes darle pronta. Puedes intentar buscar colores específicos. Entonces, si digo algo así como los colores del atardecer, digamos, y generaré voy a seguir adelante y llegar a algunos colores que están relacionados con la puesta del sol. Y claro, si no te gustan algunos de los colores que se te ocurrieron, podrías seguir adelante y cambiar los de alrededor. No tienes que ir necesariamente con el esquema de color exacto que te da, o puedes hacer cosas como Ocean, ya que estamos haciendo una app de viajes, o incluso probemos la playa, mira lo que se te ocurre. Sí, esto es un poco más agradable. Así que siéntete libre de darle una oportunidad a este. Ahí está este otro llamado colores do MSI. Nuevamente, describe el propósito de tu combinación de colores, viaja con diferentes tonalidades de playa y agua Sólo se me ocurre una frase aleatoria aquí para ver qué nos daría. Sí, sí nos da algunos azules claros y algunas tonalidades interesantes. Y siempre puedes seguir adelante y volver a generarlo si no te gusta esa. Definitivamente son algunas tonalidades de azul. Aquí tenemos algunos colores arenosos. Eso es lindo. Por último pero no deja de blank.com también te ayuda a llegar no solo a los colores, sino también a las fuentes A lo mejor vamos a darle una oportunidad para las fuentes cuando se trata de ello. Por ahora, probemos los colores. Escriba un mensaje que describa su proyecto, destino de viaje, aplicación de reservas con destinos soleados. De nuevo, aviso totalmente aleatorio ahí, pero tenemos algunos colores interesantes aquí. Incluso se me ocurre una maqueta en la que puedes ver cómo se vería o esa paleta de colores se vería a través de diferentes proyectos. Esa es una interesante. Y puedes seguir adelante y cambiar colores específicos. Si no te gusta esta naranja, puedes hacerla más ligera. Y te mostraría a través de diferentes proyectos, cómo sería. Ahora, personalmente me estoy inclinando hacia el uso refrigeradores solo porque he usado más esta plataforma, pero, por supuesto, siéntete libre de usar uno para idear un esquema de color propio, o siéntete libre de copiar los colores que voy a usar Compartiré los códigos hexagonales de la combinación de colores en la próxima conferencia. Adelante, haz una pausa aquí, elige una combinación de colores de tu plataforma favorita, y te veré en la próxima conferencia. 17. Elegir un conjunto de tipos: Así que elegí esta combinación de colores para seguir adelante con mi proyecto. Ahora, por supuesto, el tuyo podría verse diferente. Así que siéntete libre de seguir junto con el tuyo. Voy a usar el azul como naranja primario, secundario aquí y usar este negro para cosas como fuentes y texto. Y luego este blanco aquí para cosas como fondos o fondos de tarjetas, y así sucesivamente. Entonces ahora para las fuentes, ¿dónde vamos a elegir una tipografía, y cuáles son algunos recursos a los que tenemos acceso Ahora bien, para esta, de lejos, la más fácil y confiable, Google Fonts. Google Fonts ahora también está en Figma, también, así que ya no necesitas descargar ni importar ninguno de ellos a Sigma, así que eso es genial Así que solo asegúrate si tienes alguna fuente personalizada, solo reinicia Figma si no la ves de inmediato. Ahora, siéntase libre de navegar por las fuentes de Google. Cuando se trata de tus fuentes, lo que queremos hacer es escoger dos fuentes. Uno para el texto del encabezado. Entonces esto es cosas como títulos, el nombre de la aplicación o cualquier título de encabezado y cosas por el estilo. Utilizamos una fuente de encabezado. Así que esto podría verse ligeramente diferente de tu otra fuente, que es la fuente body. Así que lo ideal sería que quisiéramos elegir dos fuentes diferentes. Ahora, para una aplicación realmente simplista, podrías ir totalmente con una, y algunas sí tienen diferentes versiones de la fuente que puedes usar Entonces podrías usar, por ejemplo, condensado robótico para tu rumbo y luego usar roboto mono para tu cuerpo solo como ejemplo No estoy diciendo necesariamente que debas hacer eso. Pero hay toneladas de buenas fuentes que puedes usar aquí. Los otros dos aquí que te estaba mostrando deblank también te da fuentes con las que puedes trabajar Entonces si lo abro y voy a fuentes, ingresa tu prompt, solo voy a buscar app Travel aquí, y ahí vas tú. Obtienes diferentes emparejamientos de fuentes con los que puedes trabajar. Se puede ver en diferentes tonalidades. Y si haces clic en Obtener fuente, te llevará directamente al propio Google Fonts. Y también puedes escribir algo aquí. Por supuesto, querrás considerar cómo quieres que se vea tu marca. Entonces, si estás trabajando con un cliente, querrás bajar esta parte antes de llegar al siguiente paso, probablemente quieras consultar con ellos sobre las cosas de branding, especialmente si ya tienen listo material de branding, como fuentes que ya están disponibles para que las uses. Ahora, aquí, sólo voy a seguir adelante y elegir dos fuentes, seguir adelante con esas. Y esas dos fuentes serán Libre Baskerville para mis fuentes de encabezado Y para las fuentes body, voy a escoger noto envía aquí mismo Entonces esas van a ser las dos fuentes que estoy usando. Pero de nuevo, siéntete libre de usar tu propio par de fuentes. Volveremos en las futuras conferencias para agregarlas como estilos de fuente a nuestra aplicación. 18. Crea estilos de color: Bien, así que he seguido adelante y escogí esto como mi esquema de color, y espero que también hayas encerrado tu propia combinación de colores. Si no, siéntete libre de seguirlo y usar este. Básicamente, usaré el azul como nuestro primario y este naranja es un color secundario. Este negro como color de texto primario. La razón por la que no vamos con un color completamente negro como cero, cero, cero en términos del código hexadecimal, queremos algo que sea sutil y un poco menos oscuro solo porque es más fácil para los ojos. Y este es un buen color de fondo que podemos usar. Y por supuesto, podemos crear múltiples tonos para todos estos colores y usar los tonos que sean apropiados. Ahora, lo que queremos hacer es pasar esto a nuestro archivo Figma, y antes de hacerlo en figma, vamos a seguir adelante y crear un nuevo proyecto y siéntete libre crearlo en tu carpeta de borradores o en Crear nuevo archivo de diseño. Y este archivo de diseño será nuestro proyecto donde vivirán nuestros estilos, nuestras maquetas reales y todo lo demás. Entonces vamos a seguir adelante y renombrarlo Manderwis. Y para esta primera página, vamos a cambiarle el nombre de nuestra guía de estilo, y colocaremos todos nuestros estilos aquí. Ahora, para crear un estilo, todo lo que necesitas hacer es ir a los estilos locales aquí y agregar un nuevo estilo. Ahora, ahora mismo, estamos armando el estilo de color, así que empezaremos con eso. Si haces clic aquí, nosotros nos preguntaremos, ¿qué quieres nombrar a tu color? En cuyo caso, en realidad podemos darle un nombre como primario. Puedes añadir una descripción si quieres. Entonces, si estás trabajando en equipo y quieres describir exactamente dónde estás usando este color, esto podría ser útil. Ahora voy a copiar el código hexadecimal de aquí. Siéntete libre de tomar nota de este color si quieres usar el mismo. Voy a tomar aquí el código hexadecimal para el azul. Siéntase libre de hacer una pausa aquí para escribirlo también en su proyecto, cambiar de nuevo por aquí y pegarlo para las propiedades. Y ahora tenemos el estilo con este color como color primario y un golpe libre crea estilo, el estilo ha sido creado. Y en cualquier lugar donde tengamos un objeto, digamos que tenemos este rectángulo y queremos aplicar ese relleno, simplemente vamos a en lugar de escoger el color o manualmente cada vez que meter ese código hexadecimal, todo lo que necesitamos hacer es ir a nuestros estilos y variables de aplicación y elegir el estilo primario. Se ha aplicado. Ahora bien, el beneficio de usar estilos, lugar de no usar estilos es que cada vez que tengas un cambio en tu esquema de color, digamos, en lugar de este color primario, quiero ir con un tono diferente de azul, entonces también se cambiará donde sea que estés usando ese color también. Como pueden ver, ahora mismo, sólo estoy cambiando el estilo de color y no el relleno de este rectángulo específico. Entonces donde quiera que esté usando ese color, está cambiando automáticamente. Entonces ese es el beneficio de usar estilos. Entonces en estos momentos lo que queremos hacer es crear estilos para todos los colores, todos estos colores de aquí. Entonces ya tenemos primaria todo lo que necesitarías hacer es repetir ese proceso para un color secundario, para un color de texto, y para un color de fondo. Ahora, voy a dejar eso como algo que puedes hacer. Entonces así es como creas estilos de color. Ahora vamos a hacer una pausa aquí y vamos a volver en la siguiente conferencia donde realmente usaremos un plugin para ayudarnos a hacer esto más rápido y también introducir tonos en nuestros estilos de color. 19. Uso de plugins para crear estilos de color: Entonces en la introducción, expliqué cómo podemos agregar plug-ins desde nuestra acción tap aquí abajo o al pulsar el comando K o la tecla Control en Windows y yendo a nuestra pestaña plug ins. Ahora, lo que queremos hacer es crear diferentes tonalidades de nuestros colores primarios para que podamos aplicar diferentes tonalidades. Si quieres un azul más claro, podemos aplicar uno más ligero. Si quieres un gris más claro, podemos aplicar un gris diferente. Y así de esta manera, no tienes que repetir este proceso varias veces para crear diferentes estilos con diferentes tonalidades. Solo podemos usar un plugin que nos ayude a hacer eso. Ahora para poder usar ese plug in, solo voy a seguir adelante y borrar rectángulo y también borrar el estilo que creamos aquí, el estilo local para ese color primario. Ahora este plugin va a configurar todo para nosotros. Todo lo que tenemos que hacer es ir a nuestro menú de acciones, ir a plug-ins y widgets y buscar el plugin llamado Fundación y seleccionar este enchufe generador de color de base. Justo cuando lo abres, puedes ver que tienes diferentes tonos y utilizan diferentes sistemas desde órbita hasta el sistema Atlassian hasta el diseño y diseño de materiales, que son diferentes formas en las que puedes llamar a que son diferentes formas en las que los tonos con diferentes convenciones de nomenclatura y así sucesivamente El que uso a menudo como material de diseño uno donde tu color 500 es el principal que seleccionas, y luego crea un montón de tonos más oscuros y un montón de tonos más claros. Ahora bien, este no es el color que queremos. Este es el color que he copiado de mi estilo de color. Entonces este es el azul que realmente queremos. Podemos llamarlo azul o en realidad podemos cambiarlo a primario, y luego podemos darle a Crear estilos. Ahora, este plugin seguirá adelante y creará esos estilos bajo la carpeta foundation aquí o categoría, y bajo primaria. Ahora tenemos todos estos colores. Ahora, ese Hexcoe que copiamos es cuatro 500 primarios, y viene de este estilo de color que he creado Así que siéntete libre de tomarte un segundo aquí, configurar eso. Y lo que también puedes hacer aquí es que en realidad puedes obtener la paleta, golpeando paleta aquí y conseguir lo mismo pegado en tu archivo de diseño Esto facilita que los desarrolladores vean tu combinación de colores después de que la hayas reunido, y te recomiendo en tu guía de estilo incluir todas tus paletas que uses Voy a repetir ese proceso algunas veces más una vez para el color secundario, este naranja. Ahí vamos. Renombrarlo secundario y usar diseño de materiales, crear estilos, obtener la paleta, Uy Voy a pegar en el código y asegurarme de que aquí lo llamo secundario, luego presiona Crear estilos, obtener la paleta. Y simplemente está pegada encima del otro. Queremos seguir adelante y queremos simplemente Ahora, está pegado encima del otro, así que voy a sacarlo del camino aquí Ahí lo tenemos. Ese es nuestro color secundario. He ingresado el color negro que tenemos, y podemos nombrar este texto y usarlo para nuestros textiles. Ahora estos son todos iguales. Realmente no los necesitamos. Así que en realidad podemos seguir adelante y simplemente eliminar todo 600-900 Crea estilos, consigue la paleta aquí, saca esto del camino. Eliminemos todo 600-900 porque todos son del mismo tono, más o Y desde mi texto secundario o en realidad, 600 a 900, vamos a seleccionar shift y seleccionar todos ellos y eliminar estos estilos. Eso es todo lo que necesitamos. Para el color de fondo, voy a simplemente seguir adelante y copiar el color de concha marina y agregar en un estilo llamado fondo y pegar en ese código hexadecimal aquí Ahora no me gusta mucho cómo hay esta carpeta o categoría de fundación . Realmente no lo necesitamos. Entonces vamos a seleccionar aquí todos los estilos de texto secundarios primarios estilos de texto secundarios primarios y moverlos fuera de esa carpeta o categoría, y seguiremos adelante y lo eliminaremos. Y para éste, voy a seguir adelante y reescribirlo en mayúscula así Entonces ahora tenemos todos estos estilos que este plugin nos ha configurado. Tenemos un montón de diferentes tonos grises para nuestro texto que podemos usar, para nuestro color secundario y color primario, y un color de fondo que podemos usar. Para estos, sigamos adelante y agreguemos una sección. Podemos seccionarlos juntos y crear una combinación de colores como esta. Entonces está perfectamente organizado. Y así es como usamos plug ins para ayudarnos a agregar nuestros estilos a nuestros proyectos. Ahora estamos listos para usar colores en nuestro proyecto. Volvamos en la próxima conferencia para aplicar también nuestros textiles. 20. Agregar estilos de texto: Tener nuestros estilos de color. Ahora queremos sumar nuestros textiles. He elegido estas dos fuentes para usar para mi encabezado y luego esta para mi fuente de cuerpo. Siéntase libre de usar la fuente que le guste de antes. Voy a ir con estos dos. Nuevamente, siéntete libre de seguirlo, aplicar los mismos colores. Estas son fuentes de Google que deberían agregarse automáticamente a tu archivo Figma para que no necesites descargar ninguna fuente ¿Qué hacemos para aplicarlos a nuestro proyecto? En primer lugar, voy a presionar la tecla T en mi teclado, o puedes seleccionar T desde aquí y escribir un texto y escribir encabezado por aquí. Voy a aplicar mis fuentes de encabezado a esto y cambiar el tamaño de fuente a 16. 16 es una buena fuente base que normalmente se usa para proyectos web y móviles. Y entonces lo que hacemos es que escalemos nuestra fuente arriba o hacia abajo desde 16 puntos. Ese es un buen sistema para usar, y generalmente funciona en la mayoría de los dispositivos. Ahora, voy a duplicar este golpeando el Comando D, así que tenemos un duplicado del mismo. Muévelo por aquí y cámbielo a cuerpo. Entonces, con solo hacer doble clic y cambiar el texto. Y todo lo que voy a hacer es cambiar la familia de fuentes aquí a Noto Sans, que es lo que estoy usando para el cuerpo De nuevo, sigue adelante y aplica tu familia de fuentes si es una diferente. Para mí, voy a usar estos dos. Ahora para convertirlos en textos, todo lo que tenemos que hacer es seleccionarlos, ir a la tipografía aquí, aplicar estilos, y Y seguiremos adelante y crearemos un estilo a partir de este texto. Y podemos llamarlo, digamos, De nuevo, si quieres, puedes darle una descripción, no necesitas aunque y yo creo estilo. Ahora bien, este texto corporal se ha convertido en un estilo que podemos desvincular de aquí si quieres hacer cambios en él o desvincular el O si hacemos clic en cualquier parte de nuestro Lienzo, podemos ver este textil agregado aquí también. Otra forma de crear un textil es hacer clic en Plus aquí y luego darle un nombre, elegir las propiedades, así la familia de fuentes real. De esta manera, tendría que buscar en Noto Sans. Y digamos, quiero hacer uno audaz. Entonces voy a elegir negrita aquí y luego llamarlo body bold y elegir el tamaño de fuente, que es 16. Y así ahora tengo dos textiles. uno se le llama cuerpo con un sentido de nota de píxeles de 16 puntos, y luego tenemos uno en negrita. Entonces digamos que quiero cambiar este texto que tengo aquí por el negrita. Simplemente hacemos clic en nuestro textil aplicado y lo cambiamos por el atrevido. Ahora en cualquier momento, digamos que queremos hacer cambios a este audaz, queremos hacerlo aún más audaz De hecho podemos aplicar eso aquí. Y como se puede ver, se ha ido adelante y aplicado a ahí también. Entonces ahí lo tenemos. Ahora, así es como se crean textiles en Figma. Y por supuesto, hay plugins para ayudarte a configurar un sistema para tu texto porque ahora mismo, estamos sentados en la base de nuestro proyecto, y queremos múltiples fuentes que podamos usar en múltiples lugares. Entonces querrías una fuente más grande, tal vez para los títulos en tu página, luego queremos una fuente más pequeña o una fuente de tamaño mediano para, digamos, la descripción, y luego quieres una fuente de cuerpo más pequeña para uso genérico. Siempre es bueno tener una escala de fuente o una escala de tipo aplicada en tus proyectos, y volveremos a la siguiente sectura para ver las escalas de tipo y cómo podemos usar el plug in para configurarlo más rápido 21. Usar una escala de tipos: Entonces ahora hemos creado estos dos textiles. Voy a seguir adelante y mantener presionado Shift y seleccionar ambos , eliminarlos. Y de esta manera, podemos seguir adelante y configurar uno usando Tipescales Ahora, hay un plugin para hacer esto fácilmente. Todo lo que necesitas hacer es ir a la pestaña Acciones o al menú Acciones, buscar Tipescale y me gusta esta con el fondo amarillo en el logo Entonces voy a seguir adelante y abrir esa. Y hay diferentes sistemas que puedes usar en tu tipografía Ahora bien, si vas a typescale.com, puedes ver esto en acción para ver cómo se ve eso Incluso puedo cambiarlo a la fuente noto Sans que estoy usando. Sólo para ver cómo se vería eso. Entonces esta es mi fuente. El tamaño del cuerpo es de 16 píxeles, y puedo usar diferentes escalas. Entonces, comenzando con un segundo menor, que es una brecha menor entre los diferentes tamaños, hay un segundo mayor con una diferencia mayor. Y a medida que subes al tercio mayor y al cuarto perfecto, ves una diferencia mayor. Ahora, normalmente vemos que los proyectos usan el tercio mayor, cuarto perfecto, o incluso tal vez el tercio menor. Creo que el tercio mayor es una buena opción para ir con. Ahora bien, para nuestra fuente body, en realidad no necesitamos tantas fuentes. Es realmente para el encabezado que necesitamos diferentes fuentes. O diferentes escalas. Para el cuerpo uno, en realidad podríamos ir con un poco más grande y uno un poco más pequeño. Entonces tal vez tres en total. Ahora para nuestro rumbo, así que ese sería éste de aquí, rollo ibrevascular Estas son las fuentes que configuraremos. También se pueden ver en píxeles. Y siempre podemos redondearlo hacia abajo, así que usa 61 píxeles para H uno, usa 49 píxeles o 48 píxeles para H dos, 39 píxeles para H tres, y así sucesivamente y así sucesivamente. Así que queremos configurar esto usando este tipo de enchufe de escala. Figma. Y todo lo que tenemos que hacer podemos seleccionar ese texto que tenemos, que en este caso, es este texto de encabezado con la fuente de encabezado 16 píxeles seleccionados, y vamos a ir con el tercio mayor como opción. Y elige redondear al píxel entero más cercano, para que no obtengamos ningún decimales y luego creamos Tipescale. Y ahí lo tenemos. El enchufe se configura automáticamente en nuestro proyecto. Simplemente podemos seleccionarlos todos, moverlo aquí abajo. Y con todos ellos seleccionados, puedes espaciarlos un poco más así usando este divisor morado, usando este divisor aquí. Y se va a deshacer de esta muy pequeña de aquí. Realmente no necesitamos eso. Y también, porque estamos usando un texto de encabezado aquí, probablemente tampoco va a necesitar el de 13 píxeles. Vamos a usar estos aquí, empezando por H uno. Entonces vamos a llamar a este uno H uno o H dos, H tres, cuatro, cinco, seis, y luego llamar a este uno R siete, dos. Para hacer eso porque en este momento ese plugin no crea estilos para nosotros. Entonces lo que tenemos que hacer es seleccionar la fuente aquí. Y otra vez, ve por aquí plus y llama a este H siete. Crea estilo y trabaja hasta llegar hasta H one. Entonces crea otro, llámalo a los seis años, crea estilo. Para este, vamos a hacer más H cinco más H cuatro. Así que tómate un segundo para hacer esto conmigo. Tres más para ir. Este tiene tres años. Y estos son los nombres para ello para que cuando los estamos aplicando, sepamos lo que significan. Dos años, y este va a ser H uno. Vaya, H uno, ahí vamos. Entonces ahora si haces clic en nuestro Lienzo, vemos que tenemos todos estos textiles, también. En realidad no están organizados. También podemos agruparlos. Y así si quieres hacer eso, en realidad podemos seleccionar la primera, mantener pulsada Mayús, como la última, clic derecho y hacer Añadir nueva carpeta y llamar a ésta o encabezar fuentes como esta. Entonces ahora están todos bajo esta carpeta de rubro. Hermoso. Ahora queremos hacer lo mismo con nuestra fuente body. Vamos a ejecutar la misma escala de tipo de plugin. Y nuevamente, para esta, solo queremos ir una fuente arriba y una fuente abajo. No queremos ir demasiados y también redondear al pixel más cercano y también hacer Tercera Mayor. Crear escala de tipo. Ahora tenemos tres diferentes, un poco más grande, uno un poco más pequeño. Voy a espaciarlos de nuevo un poquito. Y vamos a hacer lo mismo. Vamos a seleccionar el primero, llamar a este nuestro cuerpo LG para que destaque por grande, crear estilo, este. Vamos a hacer plus, y solo llamaremos a éste nuestro cuerpo, crearemos estilo, y vamos a hacer aquí plus otra vez y hacer body SM para pequeños. O también puedes llamar a éste textos de pie de página. Realmente ambos funcionan. Ir a llamarlo pie de página. Ahora, una cosa que te recomiendo que hagas es primero organizarlos pulcramente así y también duplicarlos para tus fuentes body, y vamos a separarlos todos aquí. Vamos a seleccionarlos todos y establecer negrita como peso, y luego también crear los estilos de perno. Entonces vamos a hacer plus en este primero, llamarlo cuerpo g negrita. Crear estilo. Y este vamos a crear estilo, body dash bull, crear estilo, y este vamos a hacer footer dash bull, crear estilo. Ahora bien, en realidad no se ven bien como los tenemos aquí. No es realmente útil. Entonces en lugar de este texto marcador de posición de Quickfox cambia esto a H uno, cambia esto a H dos Cambios a H tres. Nuevamente, esto no es sólo para ti. Esto también es para los desarrolladores que van a mirar tus sistemas de diseño y aplicar los colores y los estilos para el texto que tengas. Para que tengas la convención de nomenclatura aquí correctamente establecida, vamos a hacer lo mismo, darles a estos los nombres que tienen, así que éste es el cuerpo LG Éste es solo cuerpo. Este es pie de página. Y aquí lo adivinaste. Vamos a renombrar esto a body g bold. Este va a ser body dashbl y este va a ser footer dashbl Organízalos ordenadamente. También vamos a colocar estos todos bajo texto del cuerpo en el panel de propiedades de la derecha aquí, agregar una nueva carpeta y llamar a esta carpeta body. Entonces tenemos nuestras fuentes de encabezado. Tenemos nuestras fuentes de cuerpo como textiles establecidas aquí, listas para ser utilizadas, y organizarlas todas usando una sección, dibujar una sección alrededor esos textos y llamarlo nuestros estilos de texto. Simplemente póngalos pulcramente aquí para referencia. Entonces nuestra guía de estilo está prácticamente establecida. Estamos listos para comenzar a configurar nuestro proyecto y aplicar nuestros colores y tipos según lo necesitemos. Para ello, voy a configurar una nueva página aquí, llamar a ésta nuestras maquetas, y aquí es donde haremos nuestras maquetas Así que volvamos a la siguiente etapa para empezar con eso. 22. Estilos vs. variables: Antes de continuar, quiero tocar también las variables locales. Ahora, tenemos estilos y también tenemos variables. En nuestras variables, también podemos configurar cosas como variables de color y variables de cadena, que podemos usar para cosas como familia de fuentes, y así sucesivamente. Ahora, hay dos beneficios en usar variables sobre estilos para nuestros colores, al menos. Y esos dos son el número uno, puedes tener un sistema de diseño que sea más complicado y tener variables interconectadas entre sí. Entonces, digamos que estás creando un color de superficie para usar para tus botones. Al crear un sistema de diseño a su alrededor dentro de su tabla variable, puede obtener más específico sobre cómo se pretende usar estos colores. Y como parte de eso, también puedes tener diferentes modos. Entonces, si quieres un modo oscuro, puedes configurarlo más fácilmente usando variables en comparación con los estilos. Y el segundo beneficio es que en realidad puedes usar lo que se llama scoping Entonces, si quieres, digamos, crear un color que solo debe aplicarse a tus bordes. Entonces ese es el trazo alrededor, digamos tus botones, puedes hacerlo para que con variables, especifiques dónde se debe usar ese color para que no sea muy complicado a la hora de seleccionar colores. Entonces con esos beneficios, personalmente recomiendo configurar colores como variables. Pero en serio, esto depende de tu preferencia personal, y tal vez estés trabajando con un equipo que ya está usando estilos y son buenos con eso. Entonces siéntete libre de saltarte este paso y continuar con los estilos. Y en caso de que quieras seguir configurando variables, entonces todo lo que necesitas hacer es para los estilos que hemos creado, necesitas simplemente buscar los estilos a las variables, enchufar. Arriba, y seguiremos adelante y detectaremos todos los estilos que has creado hasta ahora. Puedes darles un nombre de colección, para que estén todos juntos bajo la colección de colores, y luego seguir adelante y convertir estilos en variables. Entonces ahora si cierro este plugin, puedes ver debajo de las colecciones aquí, tenemos una colección de colores, y todas esas fuentes con incluso su agrupación ha sido transferida a la tabla de variables. Ahora, todavía tenemos estilos aquí. Entonces lo que va a pasar es si nosotros, digamos, creamos un rectángulo, cuando seleccionamos el color, vemos que tenemos estas variables, y sabrás que es una variable porque aquí tiene forma cuadrada, y estas con círculo son en realidad estilos. Ahora, porque sigo con variables, ya no necesito estilos, así que voy a seguir adelante y eliminar todos estos estilos. Y continuar con solo seleccionar de las variables. Ahora, digamos que para estos textos aquí, no vamos a aplicar los colores del texto a un relleno rectangular. Aquí es donde puedes usar scoping entrando en tus variables y bajando a, digamos, las de texto. Sujeta turno y seleccionándolos todos y haciendo clic en esta opción para definir el alcance solo para el relleno de textos, no trazo o efectos. Entonces ahora lo que va a pasar es para nuestro rectángulo, ya no veremos esa opción de texto. Pero si creamos un texto, digamos aquí y elegimos el relleno, veremos estas opciones de texto, y ahí lo tenemos. Entonces ese es uno de los beneficios de las variables y por qué voy a seguir usando variables a lo largo del proyecto. Pero de nuevo, es realmente para arriba 23. Crea cuadrículas de diseño de marcos: Es hora de comenzar a armar nuestras maquetas para nuestro diseño, y aquí he abierto mis wireframes Entonces, si tienes tus wireframes a mano, solo póngalos frente ti para que los puedas usar para tus maquetas Voy a comenzar con la página de registro por aquí y luego trabajar mi camino hacia la derecha para todas las demás páginas. Y probablemente haya un par de páginas que voy a dejar como tarea para que hagas en tu propio tiempo. Juntos, vamos a trabajar en las páginas que tenemos aquí. Entonces, comenzando con la página de registro, luego me dirijo a la página de maquetas que he creado Si no tienes una página de maquetas en tu proyecto, puedes crear una nueva página pulsando más aquí y agregar una nueva página y luego cambiarle el nombre a maquetas para que puedas organizar tus maquetas y guardarlas todas pulcramente Ahora, para iniciar nuestro proyecto y crear nuestra pantalla de registro, necesitamos marcos. Los marcos esencialmente nos ayudan a armar nuestros diseños para cada pantalla. Por lo general, usamos un marco para cada pantalla. Ahora puede acceder a los fotogramas haciendo clic en el marco aquí en la caja de herramientas o presionando F en su teclado. Y luego en el lado derecho, obtendrás algunas opciones predeterminadas que suelen mostrar. Tienes algunos tamaños predeterminados de iPhone Android, algunos tamaños de tableta. Y lo que nos interesa son los tamaños de escritorio. Y normalmente voy con el tamaño del escritorio por aquí. Ahí vamos. Al hacer clic en él, he creado un marco con un tamaño de escritorio. Eso es 14 40 por 1024 píxeles. Ahora, por supuesto, también puedes dibujar marcos. Entonces, si pulsas F en el teclado, puedes dibujar un marco personalizado para cualquier tamaño que te guste, y en cualquier punto, si mantienes presionada la tecla Mayús mientras estás dibujando tu marco o rectángulos o cualquier otra cosa, para esa materia, el ancho y la altura se bloquearán para que sea el mismo ancho y alto, puedas dibujar un marco cuadrado si quieres Ese también es un consejo útil a tener en cuenta. Usando shift one, puedes hacer zoom para que quepa para ver todo lo que tienes. Así que rápidamente volví a este marco de escritorio que tengo. Voy a alejar un poco aquí y voy a hacer doble clic para cambiarle el nombre a Regístrate. Entonces ahora el nombre de este marco es registrarse y de esta manera yo y cualquiera que esté mirando este diseño sabremos que esta es la página de registro. Y si necesitan encontrarlo, también lo pueden ver en el panel Capas. Desde donde también se puede hacer doble clic para cambiar el nombre. Impresionante. ¿Qué tenemos en esta página? Tenemos dos secciones en la página. Tenemos una sección de imagen por aquí a la derecha, y luego a la izquierda, tenemos un correo electrónico. Tenemos el título de la compañía junto a algún texto descriptivo de lo que es Wander Weiss, o por qué deberían crear una cuenta seguido algunos campos de entrada y los botones de registro, así como algunos inicios de sesión sociales O tenemos un signo y un botón de Google, y luego también un signo y campo de número de teléfono. Así que comencemos con este diseño. Lo primero que queremos hacer es dividir nuestra pantalla en esas dos secciones y dividir claramente esos fotogramas. Lo que podemos hacer es usar lo que se llama una cuadrícula de diseño. Ahora para configurar una cuadrícula de diseño, todo lo que necesita hacer es hacer clic en su marco y luego ir aquí a donde dice cuadrícula de diseño en el panel de propiedades y luego agregar una como esta. Normalmente, se obtiene una cuadrícula como esta, pero lo que nos interesa, que es la que más se usa es una cuadrícula de columnas. Entonces vamos a cambiar el tipo a una cuadrícula de columnas. Y luego vamos a hacer clic en la configuración de la cuadrícula para aplicar algunos ajustes personalizados. Normalmente, en un proyecto web como este, vemos un conteo de 12 para nuestras columnas. Entonces tenemos 12 columnas a lo largo de la página. Y esto es más un dimensionamiento estándar o una cuadrícula estándar de la que están hechos los sitios web, que es de 12 columnas. Y verás páginas dividiendo esas 12 columnas para mostrar contenido diferente en el lado derecho, en el lado izquierdo, y en el medio. Ahora para los márgenes son el espaciado desde la izquierda y la derecha, normalmente me gusta usar un sistema de cuadrícula de ocho puntos, que es básicamente se quiere mantener todos los múltiplos de espaciado del número ocho. Entonces consistente con eso, un margen de 48 píxeles pasa a ser un margen bastante bueno para usar. Ahora canalón es espaciado entre cada columna. Y actualmente es a los 20. Pero nuevamente, usando ese sistema de cuadrícula de ocho puntos, iré con ocho veces tres o 24. Hermoso. También puedes soltar la opacidad aquí o incluso cambiar el color de tu cuadrícula si quieres Voy a hacer el 5% así que es un poco más ligero. No necesitamos que sea tan fuerte. Ahora siempre puedes activar y desactivar tu cuadrícula por aquí para que puedas desactivarla o encenderla cuando quieras acceder rápidamente a ella. Así que hemos configurado nuestro marco. Hemos establecido una grilla dentro de ella. Volvamos a la siguiente sectura para comenzar a armar esas secciones 24. Columnas de la página de registro: Es hora de armar nuestra página de registro. Así que aquí vamos a configurar dos fotogramas, uno para la imagen que vamos a tener en el lado derecho. Entonces vamos a encontrar una buena imagen para usar, y luego vamos a tener el lado izquierdo, que tendrá el contenido por aquí. Así que volviendo a nuestro proyecto. Voy a darle a F en el teclado y dibujar un marco así. Y ahora mismo, mientras realmente no se puede ver porque todavía no hay relleno. Tengo un marco por aquí, y lo estoy redimensionando, y vamos a usar cuatro columnas por aquí. De hecho, creo que cinco obras. Y lo que notarás es que con tu cuadrícula activa, las cosas encajarán en su lugar inmediato cuando estés cerca de los bordes. Y para la altura, quieres asegurarte de que sea de altura completa. Y también puedes verificar eso desde aquí. Se puede ver que es X cero e Y cero, que es la esquina superior izquierda. Y también es 1024 para las alturas. Eso es increíble. Entonces ahora vamos a seguir adelante y golpear F, crear otro frame, y este va a estar del otro lado de esto. Entonces por aquí ocupando siete cuadrículas. Y así ahora tenemos dos marcos que dividen la página. Y lo que vamos a hacer es que vamos a seguir adelante y por ahora, alternar para ocultar la cuadrícula y enfocarnos en nuestro diseño. Ahora que tenemos la división de a dónde irá la imagen, así como a dónde irá el contenido de registro. Para el relleno, voy a seguir adelante y agregar un relleno aquí para que podamos agregar un color al fondo de nuestro marco. Y voy a elegir la variable de fondo que he creado. Entonces eso se utilizará para el trasfondo de esto. Página de registro, y luego queremos comenzar a agregar algunos elementos aquí. Entonces queremos agregar un texto por aquí usando el Tiki, a la derecha vagar Y luego de nuestros estilos, vamos a elegir probemos H dos. Ese es un buen tamaño de fuente para ir con. H uno podría ser un poco demasiado grande, así que probablemente sea mejor ir con H dos para este. Se ve bien. Ahora, no me voy a preocupar demasiado por la alineación y todo. Ahora mismo, sólo voy a alinear todo a la mitad. Y voy a duplicar este texto manteniendo alt y arrastrando lejos del texto para que lo duplique y cree otro Y ésta va a servir como descripción. Entonces probablemente vamos a ir con una H six así que probemos body Large para esta. Y escribamos libro Destinos increíbles y paquetes todo de una sola vez. Entonces este será el eslogan que usaremos. Y estoy usando Alt aquí para cambiar el tamaño de este cuadro de texto tanto de izquierda como de Y vamos a hacer texto medio alineado para que todo lo que hay dentro quede alineado en el medio en términos del texto. Para el VanderbisFont, voy a probar uno de los colores secundarios que tenemos aquí Me gusta el poco de uno más oscuro, pero no tan oscuro. Creo que el 800 secundario se ve muy bien para el logo aquí o el texto. Y, por supuesto, si tenemos un logo, podemos agregarlo por aquí. Pero para este proyecto, usaremos el texto como el propio logotipo. Y para el texto descriptivo, usaremos el texto 400. Entonces es sutil, gris, no es del todo oscuro. Es un poco más claro y más fácil para los ojos, también. Bien, esto se ve bien. Ahora queremos dos entradas aquí o de hecho tres, una para el número de teléfono dos, y luego dos botones aquí. Un registro, un registro con Google. Ahora, estos insumos pasarán a formar parte de un sistema de diseño que vamos a utilizar a lo largo de nuestro proyecto. Entonces es importante que diseñemos una entrada agradable que podamos usar en todas partes y no tener que rehacer una entrada en todas partes, en todas partes donde necesitemos una E idealmente, queremos usar Autoayout para armar no solo esa entrada, sino también configurar el contenido aquí usando un diseño automático Y vamos a volver en la próxima conferencia para explorar los beneficios de hacerlo y también configurar nuestros campos de entrada. 25. Comprobación de contraste de color: Y estás poniendo colores uno encima del otro. Al igual que tenemos este texto encima de este otro fondo que es ligeramente de un color diferente. Siempre es bueno asegurarse de que hacemos una verificación de contraste solo para asegurarnos de que sea accesible, y estas combinaciones de colores son realmente buenas para usar, especialmente cuando se trata de cosas como botones y así sucesivamente, para asegurarse de que la gente realmente pueda verlos, y sean fácilmente legibles. Y así para hacer eso, Figma tiene esta característica ordenada donde puedes seguir adelante y seleccionar cualquier cosa Así que vamos a seleccionar este título sabio proveedor aquí. Si vas a la sección de llenado. Ahora, ahora mismo, claro, si lo seleccionas, nos pedirá que escojamos entre las bibliotecas. Pero si cambias a la costumbre, verás este pequeño contraste de color de cheque, que nos muestra esta línea, y nos permitirá saber cuál es la relación entre nuestro color de primer plano y nuestro color de fondo, y quieres, por supuesto, asegurarte de que cumpla con el estándar de contraste, que en este caso, sí Ahora bien, no tienes que hacer esto, pero si tuvieras que seleccionar, digamos, color por aquí, donde no cumple con la verificación de contraste de color, puedes ver que la relación está mucho más cerca entre sí, y eso no es bueno. Y verás aquí este pequeño icono que dice que no se cumplió el estándar de contraste. Y si sigues adelante y haces clic en él, se asegurará de que tu color llegue al tono más cercano aquí que sí cumpla con el estándar, que es aproximadamente alrededor de tres a uno aquí. Por supuesto, siempre puedes seguir adelante y ajustar eso dentro de esas áreas. Si quieres un más oscuro o digamos que seleccionas el color aquí, seguirá adelante y encontrarás la coincidencia más cercana y lo mismo aquí. Si selecciona blanco, en realidad seguirá adelante y encontrará el gris más cercano para que cumpla con la verificación de contraste de color. Eso siempre es bueno tener en cuenta cuando vas en tu proyecto y aplicas colores contra diferentes fondos de color. Ahora solo voy a ordenar a Z que deshaga todo eso y vuelva al color seleccionado y volvamos y continuemos en nuestra página de registro. 26. Uso del diseño automático: estado armando diseños generalmente sin diseño automático, entonces espero que esta conferencia realmente te cambie de opinión y también te muestre los beneficios de por qué necesitas usar Autoayout casi en todas partes en tus Sólo como ejemplo, digamos que tengo un montón de insumos aquí que queremos colocar en nuestro diseño. Entonces no estoy creando los impos ahora mismo. Sólo te estoy mostrando un ejemplo aquí. Si tengo un montón de entradas, incluso un botón, vamos y digamos otra entrada aquí, estas no están organizadas en ningún formato estructurado. Podrían pasar un par de cosas donde accidentalmente pueda artículos o desalinearlos Además, si quiero mover este aquí para digamos a otro lado, así que quiero moverlo un poco más aquí abajo, tengo que mover este también. Lo mismo aquí. Si quiero, por ejemplo, mover este un poco más alto, tendría que hacer ajustes por todas partes en mi diseño. Y ahora si esto va demasiado alto, esto se acerca a estos textos aquí y tengo que moverlos. Y así hay mucho trabajo manual en ajustar los marcos manualmente dentro de tus diseños. Ahora, incluso en desarrollo, está más sistematizado donde las cosas se colocan dentro de un formato estructurado Y así es donde ayuda el diseño automático. Si hago clic en este marco y presiono Mayús A en mi teclado, convertirá el marco en un diseño automático. Como puedes ver, todo acaba de quedar perfectamente organizado. Sí mismo, y no se parece todo a lo que queríamos, aunque. Entonces voy a darle al Comando Z para deshacer eso. Te voy a mostrar otra forma de hacer esto que sea un poco más inteligente. Y si haces clic derecho en tu marco y en su lugar vas a más opciones de diseño y sugieres autolayout, FIGMA seguirá adelante y realmente mirará dentro de tu marco aquí y notará que tienes un montón de cosas diferentes que en realidad pueden necesitar un diseño automático adicional Entonces ahora FIGmas creó tres diseños Auto, de hecho, técnicamente cuatro, considerando que este es el marco principal que también se convirtió en un marco de diseño automático Entonces tengo uno aquí para estos dos botones o entradas o lo que tienes. Y estos también se pusieron en su lugar en un diseño automático, y todos tienen su espaciado único entre ellos, que para este es de 21 píxeles o la brecha de hecho. Y este de aquí tiene una brecha de 124, por lo que todos tienen diferentes brechas entre sí. Recuerdo que lo que mencioné hace algunas conferencias es que normalmente recomiendo usar el sistema de cuadrícula de ocho puntos incluso para su espaciado entre elementos. Así que ahora por aquí con mi diseño automático para el Wander ois y el subtítulo o descripción, recomendaría ya sea ir con un espaciado de 16 píxeles entre estos dos o un píxel de 24 16 se ve bien, así que me lo voy a quedar a los 16. Ahora para el contenido de aquí, podemos dejarlo a los 60. Realmente no necesito nada de esto todavía porque realmente vamos a crear nuestras propias entradas. Ahora bien, una cosa que notarás es que con el diseño automático, si eliminas contenido, el marco de diseño automático cambiará de tamaño según eso, para que puedas ver todas las propiedades de un diseño automático a la derecha de aquí, comenzando con el ancho y alto, las opciones de alineación, que puedas alinear objetos en tu diseño automático al centro Ahora, ahora mismo, no tenemos ni siquiera espaciado. Entonces, la brecha entre todos nuestros elementos dentro de este diseño automático es de 60 píxeles. Entonces eso significa que si agrego un elemento aquí, como un rectángulo, va a tener 60 píxeles de otros elementos. Eso tiene sentido. Y luego por aquí tenemos nuestros márgenes entre cada lado, el lado izquierdo, el lado superior y el inferior. Ahora, esto está encendido en este momento porque nos está permitiendo agregar acolchados individuales entre diferentes lados Realmente no necesitamos eso en este momento, así que realmente podemos seguir adelante y agregar un relleno a nuestra derecha e izquierda al mismo tiempo usando este número de aquí, y usaremos ese relleno de 48 píxeles del que hablamos. Cuando estábamos configurando nuestras cuadrículas, y vamos a aplicar la misma para ello por aquí Pero para nuestro relleno vertical, vamos a hacer un poco más alto, así que podríamos hacer 86 o podemos hacer 96. Por lo que tienen más espaciado en la parte superior e inferior. Por lo general, los marcos de autodiseño tienen tamaños flexibles. Entonces eso significa que si las cosas dentro de un marco de autolayout se encogen, como nos deshacemos de este año de texto, como puedes ver, el diseño automático se está reduciendo para que coincida con el Voy a darle al Comando Z para deshacer eso. Eso es porque actualmente tenemos a Hug encendido por aquí. Pero si realmente quieres cambiar a un tamaño fijo, todo lo que tenemos que hacer es realmente cambiar el tamaño de nuestro marco de autolayout aquí, traerlo todo el camino hacia abajo nuevamente, y ahora tiene un tamaño fijo, que es lo que queremos Pero ese no siempre es el caso, como aprenderemos cuando armemos nuestras aportaciones en la próxima conferencia. Entonces ahora tenemos un marco de diseño automático aquí con 1024 píxeles como la altura y un ancho fijo de 594 está formateado. Es el diseño es vertical, lo que significa que a medida que agrego elementos dentro de él, se alineará verticalmente. De lo contrario, si elijo horizontal, las cosas irán en diferentes direcciones. Vamos a crear muchos diseños para que aprendas diferentes direcciones sobre cómo usarlos. Podemos ver aquí la brecha entre diferentes objetos, nuestro margen de la horizontal a la izquierda y derecha, y el margen vertical o relleno por aquí. Entonces eso es todo. Por ahora, volvamos en noch sexture para empezar a armar nuestros insumos 27. Crea campos de entrada: Espero que la conferencia anterior te haya dado alguna idea de cómo usar Autolayout Si no, no te preocupes, vamos a usarlo una tonelada. Así que definitivamente tendrás la oportunidad de entenderlo mucho mejor. Entonces ahora queremos poner algunos campos de entrada aquí, uno para correo electrónico, para contraseña. ¿Cómo lo hacemos? Bueno, en realidad podemos crear campos usando Autoayout Todo lo que tenemos que hacer es presionar T en nuestro teclado y hacer clic aquí en nuestro marco, y por ahora, lo llamaremos entrada. O mejor aún, lo llamaremos marcador de posición. Ahora vamos a presionar Mayús A o hacer clic derecho y agregaremos Autoayout Y ahora tenemos un diseño automático alrededor de esto sin relleno a la izquierda o derecha en la horizontal o vertical. Así que realmente queremos cambiar eso y tener un relleno en para horizontal vamos a hacer 16 píxeles. Y para nuestra vertical, probemos ocho píxeles y veamos si eso es bueno. Ahora, lo que vamos a hacer es que realmente vamos a mantener Shift, seleccionar este título y subtítulo aquí también, y presionar Shift nuevamente para crear otro diseño automático Y así de esta manera, tenemos este elemento dentro de este de aquí. Entonces ahora lo que podemos hacer es ir al ancho, y en lugar de tener este ancho fijo, vamos a elegir llenar contenedor que esta entrada ocupe toda la horizontal que está tomando este marco de diseño automático padre. Porque de nuevo, aquí queremos que todo sea consistente. Ahora vamos a agregar un relleno para que nuestra entrada sea blanca, y vamos a agregar un radio de esquina de ocho píxeles a su alrededor. Vamos a mantener el comando para que podamos seleccionar rápidamente elementos dentro de nuestro marco de diseño automático como este texto aquí. Y en vez de cuerpo grande, voy a cambiarlo a solo cuerpo. Para nuestra entrada, no necesitamos ese tamaño grande, y también queremos alinear a la izquierda nuestro texto. Empezando a unirnos. Por último, voy a hacer texto, tal vez 200 para este color marcador Y luego una vez que tengamos texto realmente escrito dentro de él, podemos hacerlo más grande. Bien ahora, es un poco pequeño para la entrada de texto. Entonces, en lugar de ocho píxeles, así que en lugar de ocho píxeles para la parte inferior y la izquierda para la parte inferior y superior, voy a probar un espaciado de 12 píxeles, y creo que eso es más de un tamaño de entrada típico. Entonces nuestro aporte se está uniendo. Es posible que queramos agregar un título para que los usuarios sepan exactamente qué información escribir aquí. Para hacer eso, presiona T nuevamente y escribe un título como este y mantén presionado shift para seleccionar estos dos nuevamente, estos dos aquí, golpean Mayús A, y ahora estos dos también están dentro de un diseño de Ato. No queremos que esta brecha sea tan grande aquí. Queremos una brecha que sea más pequeña, así que podemos simplemente arrastrar ese espaciado aquí a tal vez ocho píxeles. También puedes ajustar esa brecha desde aquí. Y luego en lugar de una alineación central superior, queremos hacer una alineación superior izquierda que dentro de este marco de diseño, todo esté alineado a la izquierda de él. Así que ahora tenemos este bonito campo de texto marcador de posición o campo de entrada con un título aquí Parece que le falta algo, y creo que es un bonito borde alrededor de la entrada real. Así que continúe y seleccione el diseño automático dentro de este padre para que solo seleccione la entrada en sí de esta manera y luego agregue un trazo para agregar un borde a su alrededor. Ahora tenemos un trazo negro a su alrededor. Aquí está un poco demasiado oscuro. Entonces lo que queremos hacer es hacer algo alrededor del color secundario que tenemos, tal vez un secundario 700 o tal vez incluso más ligero. Creo que esta primaria 200 en realidad se ve un poco mejor. Entonces voy a ir con eso. Ahora tenemos un insumo aquí. Esto se ve genial. Ahora, debido a que vamos a reutilizar esta entrada en múltiples lugares, lo mejor es convertirla en un componente. Y para ello, volvamos en la siguiente conferencia. 28. Creación de componentes: última conferencia, armamos esta entrada y usamos el diseño automático para armarla. Ahora lo que queremos hacer es convertir en realidad esta entrada en un componente, lo que nos permitirá reutilizar ese componente en múltiples lugares. Y en caso de que necesitemos hacer cambios a la entrada aquí, porque es un componente, los cambios pueden ocurrir mucho más rápido porque solo necesitas hacerlos en un solo lugar, y ese es el componente principal y se aplica a todas las instancias. Esto va a tener más sentido a medida que empiece a armarlo. Entonces lo que queremos hacer es en realidad vamos a entrar aquí, seleccionar esta capa que tiene el marco de diseño automático sosteniendo el título y el cuadro de texto por aquí, y queremos presionar el comando Alt K en una Mac o Alt Control K en Windows. Ahora, alternativamente, también puedes subir aquí y presionar Crear componente desde este botón de aquí. Y así ahora esto se ha convertido en un componente. Se puede ver que el color no es morado para el borde, así como en el panel de capas, también es morado aquí, lo que indica que es un componente. Ahora bien, este símbolo aquí está demostrando que este es en realidad el componente principal. Y así no quieres realmente tener tu componente principal dentro de un marco. Quieres tenerlos por separado en otro lugar, como en una página separada con todos los demás sistemas de diseño o simplemente colocados por separado con todos tus demás componentes. Entonces, por esa razón, voy a arrastrar eso afuera de aquí, fuera del marco del cartel, colocarlo por aquí. Y de hecho, incluso podemos cambiarle el nombre haciendo doble clic y llamándolo input feel. Ahí vamos. Ahora mismo, es difícil ver el título. Entonces, una cosa que podríamos hacer es crear una sección para nuestros componentes. Así que voy a seguir adelante y crear una sección aquí para que podamos simplemente colocar nuestros componentes dentro de una sección con un color de fondo. Entonces, ¿por qué no cambiar el color de fondo a blanco o mejor aún ?, incluso puedes elegir el color de fondo a blanco, y vamos a renombrar esta sección componentes. Entonces cualquier componente que tengamos, el principal, lo vamos a poner dentro de esta sección de componentes. Y ahora tenemos el componente principal aquí para tener realmente una copia o como se le llama, una instancia de la misma dentro de aquí. Simplemente podemos copiarlo y pegarlo usando Comando C. Haga doble clic aquí, clic en aquí y péguelo con Comando V. Impresionante. Y como puedes ver, se ha redimensionado porque en este marco de diseño automático, este es el tamaño que tenemos para el contenido Y por defecto, el cuadro de texto está llenando todo el contenedor, que es lo que queremos. Ahora bien, de hecho, esto podría ser un poco demasiado amplio en términos del campo de texto. Así que podemos entrar en nuestro todo el diseño aquí y agregar un poco más de margen. Quizás en vez de 48, podamos hacer 80, y este es un tamaño mejor para esto en cuanto al espaciado desde la izquierda y la derecha. Entonces ahora, se puede decir que esta es una instancia y no el componente principal usando este símbolo aquí. No es el mismo símbolo que aquí arriba indicando que se trata de una instancia. ¿Qué significa eso? Eso quiere decir que si hago algún cambio, digamos, al texto aquí y empiezo a escribir cualquier cosa aquí, mi componente principal se queda intacto, y así es como se ve. No obstante, a partir de mi componente principal, digamos que quiero hacer un cambio de hueco en lugar de tener un hueco de ocho píxeles entre el título y la caja, quiero tener un hueco de 20 píxeles. Ese cambio también se ha reflejado automáticamente en mi instancia. Voy a hola Comando Z para deshacer eso. Y una vez más para deshacer el cambio de texto aquí. Entonces esto significa que en nuestras instancias, podemos hacer los cambios que queramos, y no se aplicará a nuestro componente principal, que es lo que queremos. Entonces de esta manera, podemos hacer doble clic en el título, cambiarlo a correo electrónico. Podemos hacer doble clic en el marcador de posición y cambiarlo al correo electrónico at@gmail.com, por ejemplo Y ahora tenemos una entrada para el correo electrónico, y simplemente podemos duplicarlo pulsando Comando D y teniendo otra copia y renombrando esta nuestra contraseña Y dentro de aquí, vamos a poner alguna contraseña de marcador de posición usando Alt y el número ocho en mi teclado para crear alguna contraseña de marcador Entonces ahí lo tenemos. Ahora bien, la brecha entre estos dos es un poco demasiado. Entonces lo que podemos hacer es seleccionarlos golpear Mayús A, y cambiar la brecha a tal vez 24 píxeles. Eso es mejor. Así es como creamos componentes a partir de elementos. futuro, vamos a estar creando un montón de otros componentes para otras cosas como botones, algunas tarjetas. Y nuevamente, cualquier elemento que pensemos que vamos a estar reutilizando mucho a lo largo de nuestros diseños. Una cosa más que voy a hacer es que voy a cambiar este texto del título por aquí. En lugar de que sea negro, voy a cambiarlo a nuestro texto 500, que es un poco más ligero. Y otra vez, eso es mejor para los ojos. Así que volvamos a la siguiente sectura para completar la elaboración de nuestra página de registro 29. Agregar botones: Todo bien. Así que continuando con nuestra página de registro, tenemos algunos elementos más para agregar a esta página. Mirando hacia atrás en los wireframes, ya hemos agregado los campos aquí, lo cual es genial Entonces ahora necesitamos algunos botones para registrarte o iniciar sesión con número de teléfono o cuenta de Google. Entonces necesitamos unos botones aquí, y también queremos una imagen. Entonces, ¿por qué no empezamos primero con los componentes del botón, los creamos, los agregamos a nuestra página y luego volvemos más tarde para la parte de la imagen Ahora para los botones, la forma más fácil es crear un botón usando Autoayout también, y lo haremos fuera de aquí para que podamos crear un componente que sea reutilizable a lo largo de nuestro proyecto Con cosas como botones y entradas, definitivamente quieres hacerlos como componentes. Entonces, si necesitas hacer algún cambio, es rápido y fácil y todo está en un solo lugar. Entonces ahora para crear el botón, justo afuera de mi lienzo, voy a crear una capa de texto usando el Tiki en mi teclado y escribir solo un simple texto marcador como botón funciona así Y para convertir esto en un autolayout puedo hacer clic derecho y presionar en o maquetar o como atajo Shift A hace Entonces ahí lo tenemos, tenemos un botón ahora. Ya tiene algún relleno en los laterales, que podemos ver es de diez píxeles de arriba y abajo y diez píxeles de la derecha e izquierda. Así que definitivamente podemos usar esto o podemos toparlo un poco más. Entonces lo primero es lo primero, voy a renombrar la capa a botón y convertirla en un componente usando Altommand K o tecla Alt Control en Windows De nuevo, también puedes hacerlo pulsando este pequeño botón de aquí. Ahora, tenemos este componente de botón aquí, y podemos en un fondo y un color de texto para ello. Entonces para el fondo, voy a agregar un relleno, y voy a usar los estilos y variables aplicados, y vamos a usar nuestro color 500 primario como color del botón primario también. Normalmente, quieres usar tu color primario y algún color secundario para crear diferentes tipos de botones y diferentes estilos y looks. Voy a aplicar el mismo radio de esquina que el campo de entrada que hemos hecho, ocho píxeles para nuestros botones también. Así que simplemente haciendo clic en él y pasando por aquí a la apariencia y cambiando el radio de la esquina. O también puedes arrastrarlo a ocho píxeles así. Eso también funciona. Entonces ahora tenemos este botón y la belleza de usar el diseño automático es que si este texto crece o se encoge, así que digamos que tenemos un nombre de botón más largo, el fondo o el contenedor también crecerán y se encogerán Entonces es por eso que quieres configurar un diseño automático para tus botones. Ahora bien, el espaciado desde la parte superior e inferior es, yo diría bastante bonito, aunque podemos subir un poco hasta 12 pixeles y también lo mismo para los lados. Creo que podemos chocar esto hasta 16 o incluso 24 píxeles quedarían geniales. Ahora esta sección que tenemos componentes. Voy a arrastrar nuestro botón aquí también. Entonces ahora tenemos este hermoso componente de botón. Volveremos para crear más variaciones diferentes de la misma más tarde. Pero por ahora, apliquemos este de aquí copiándolo. Entonces le pegué al Comando C, entrando en nuestro marco por aquí donde tenemos nuestro correo electrónico y contraseña y pegándolo pulsando Comando V. Otra vez, en Windows, será Control Ahora para el botón, quería ocupar todo el espacio del contenedor en cuanto al ancho. Entonces hay dos formas de hacerlo. O bien puedes ir por aquí donde dice Hug actualmente, y dice el ancho en píxeles. Entonces son 101 píxeles en este momento, y está en abrazo. Ahora abrazo significa cualquier contenido que haya dentro del diseño automático, que actualmente es este botón, el autoayout se redimensionará en función Entonces nuevamente, si el contenido es más largo, entonces tenemos un texto de botón más largo. El diseño automático cambiará el tamaño. Ahora, otra cosa que puedes hacer es en lugar de tener contenido de cabaña, puedes hacer llenar contenedor. Entonces en este caso, cuando sí llenamos contenedor, ocupa todo el ancho del contenedor en el que se encuentra. Y debido a que el contenedor actual en el que está es este de aquí, este marco de autolayout aquí donde tenemos nuestras entradas, está tomando el mismo ancho que esos campos de entrada y llenando todo A partir de ahora, no importa cuánto tiempo esté aquí el texto, el ancho siempre va a llenar completamente el contenedor. Ahora te dije que hay otra manera de hacerlo. Entonces voy a golpear al Comando Z para volver. Un atajo para hacer un contenedor de llenado es mantener presionada la tecla Alt y hacer doble clic en el borde de su componente aquí. Entonces, si hago doble clic, hará lo mismo. Voy a cambiarlo para llenar. Entonces es un pequeño atajo que aprendí no hace mucho tiempo, y en realidad ha sido súper útil. Entonces ahora queremos renombrar el botón aquí haciendo doble clic y cambiándolo para registrarse. Y si miramos hacia atrás aquí, tenemos un botón de registro, y luego tenemos un divisor. Entonces volveremos por el divisor en tan solo un segundo. Por ahora, agreguemos dos botones más. Uno para continuar con número de teléfono y el otro para iniciar sesión con Google. Entonces voy a hacer doble clic, golpear Comando D dos veces para duplicar. Para este, voy a cambiarlo para que me apunte con el número de teléfono, y este, regístrate con Google. Ahora bien, una cosa que está mal con este diseño es que todos nuestros botones tienen el mismo aspecto. Lo que queremos hacer es crear diferentes variaciones de botones para que usemos un tipo secundario de botón en algunos lugares donde una acción se considera secundaria. Entonces, por ejemplo, el inicio de sesión con número de teléfono y el registro con Google no son los botones más utilizados, o incluso si lo son, queremos separarlos de este botón de registro. Entonces por eso hacemos dos cosas. Una es que queremos cambiar el color de estos botones del azul primario que estamos usando al secundario o tal vez a un botón blanco. Y la otra cosa que queremos hacer es agregar ese divisor. Entonces volvamos en exección para hacer esas dos cosas. 30. Variantes de botones: Dos cosas que queremos hacer es cambiar estos botones a un tipo secundario y también agregar un divisor. Empezaré agregando primero un divisor, y para ello, también vamos a usar Autoayout y usando líneas y un texto Entonces, para agregar una línea, puedes presionar L en tu teclado, o si bajas a tus formas aquí, tu herramienta de forma, también puedes hacer clic en Línea desde aquí. Ahora, cuando estás dibujando una línea, si la dibujas en cualquier parte, digamos por aquí, puedes dibujar una línea al azar así. Voy a deshacer o si mantienes turno, puedes dibujar líneas rectas. Y estas líneas rectas estarán en ángulo de cero grados, a 45 grados, 90 grados, y se obtiene el punto. Entonces queremos una línea recta. Así que voy a dejar ir por aquí. El ancho realmente no importa, y voy a arrastrar esto a nuestro marco de diseño automático aquí. Entonces ahora tenemos aquí esta línea negra. Se puede ver. Es muy claro. Ahora queremos dos de esos para que podamos emparedar un texto entre ellos. Entonces por eso voy a golpear al Comando D seleccionándolo. Cuando hay un objeto dentro de un marco o nuestro marco de diseño o cualquier grupo o contenedor para el caso, para seleccionarlo rápidamente, puede mantener presionado Comando y seleccionar directamente ese elemento. De lo contrario, hay que hacer doble clic en este marco hasta llegar a él, y ambos métodos funcionan. Pero usar comando y clic es simplemente más rápido. Entonces ahora voy a golpear al Comando D para duplicar estos dos. También voy a agregar un texto para la O, así que voy a presionar T en mi teclado y escribir O. Increíble. Ahora bien, lo que queremos hacer, queremos realmente tener todos estos en la misma línea. Debido a que nuestro diseño automático en este momento está configurado en un diseño vertical, todo va en dirección vertical. Lo que podemos hacer es que podemos crear diseños de auto uno dentro del otro como lo tenemos aquí. Tenemos un diseño automático aquí para el marco padre. Entonces tenemos dos dentro de él, uno por aquí y uno por aquí. Entonces, de hecho, podemos agregar otro dentro de éste para sostener nuestras líneas divisorias y el texto aquí. Y para ello, la forma más sencilla puedes hacer doble clic para seleccionar tu línea. O si no quieres hacer eso, también puedes seleccionarlo en tu panel de capas. Mantenga presionada la tecla Mayús, seleccione el Otexto y la línea dos sin soltar el turno Ahora presiona Mayús A para crear otro diseño automático dentro de aquí, y podemos ver por aquí que lo hemos hecho. Ahora en lugar de un diseño vertical, adivina que vamos a hacer layout horizontal. Y esto se ve bien. Hay algunas cosas que podemos hacer al respecto. Una es que actualmente va fuera de nuestro diseño automático padre. Y otra razón para ello es que los elementos en su interior tienen un ancho fijo, excepción de esta textura. Entonces nuestras líneas tienen un ancho fijo de 188. Ahora no quieres cambiar eso manualmente. Lo que quieres hacer es cambiarlos para que estén llenando el contenedor en el que están. Entonces, no importa cuál sea este contenedor, queremos que esos llenen por igual el diseño automático dentro. Pero para hacer eso, primero, debemos seleccionar aquí el marco de distribución automática divisoria. En lugar de abrazar, queremos elegir llenar contenedor. Entonces ahora, como pueden ver, solo está llenando el contenedor en el que está, lo cual es genial. Y ahora lo que queremos hacer es que vamos a seleccionar la línea y esta línea, y estoy usando comando para seleccionar diferentes elementos en mi panel ris. Y en lugar de un ancho fijo, vamos a cambiarlo para llenar contenedor. Y ahora tienen iguales anchuras, y están ocupando tanto espacio como puedan en el contenedor con respecto al espaciado o al hueco que tienen aquí Entonces, si quieres reducir el espaciado, entonces de 24 píxeles, baje a ocho píxeles. Como puedes ver, hay menos espaciado entre el texto y las líneas, lo cual es un poco demasiado poco. Entonces creo que 16 pixeles es una buena brecha entre ellos. Ahora, otra cosa que queremos hacer es que realmente queremos hacerlo manera que estén verticalmente todos en el medio. Entonces las líneas en este momento están en la parte superior porque por defecto o la alineación en el marco de diseño automático se alinean arriba a la izquierda. Lo que queremos hacer es alinear el centro para que todo quede alineado al centro tanto vertical como horizontalmente. Ahora, ahora mismo, es un poco demasiado fuerte. Entonces lo que queremos hacer es cambiar el color negro a otra cosa. Actualmente, estamos cambiando el color de todo, así el texto y las líneas porque cuando seleccionamos el marco de diseño automático, nos está mostrando los colores que se están usando dentro de él, y podemos establecer rápidamente el nuevo color para que podamos hacer algo como secundario 200. Creo que este texto 100 queda bien para las líneas divisorias. Para el texto en sí, sin embargo, podemos hacerlo un poco más oscuro, así que tal vez el texto 400 o en realidad un poco más claro el texto 300 funcione. Bonito. Entonces ahora tenemos esta línea divisoria. Queremos hacer una cosa más, y es crear otra variación de nuestros botones, y podemos hacerlo aquí arriba. Al hacer clic en nuestro componente para el botón, queremos crear otra variación, pero sin tener que crear otro componente. A veces tenemos componentes que tienen diferentes variaciones siendo lo principal un color de fondo ligeramente diferente o cualquier ligera diferencia donde quisiéramos otra variación del mismo, pero no necesariamente queremos crear otro componente. Entonces es por eso que podemos seleccionar los componentes, y por aquí, realmente podemos agregar una propiedad. Ahora hay diferentes propiedades, y las repasaremos en un poco. Pero por ahora, nos interesa otra variante de este botón. Si golpeas plus en la variante, ahora tenemos esta propiedad aquí. Por defecto, solo se llama propiedad uno, y el valor es predeterminado. Pero podemos usar eso para lo que queramos. Entonces en este caso, lo que quiero hacer es crear una propiedad, establecer esto en nuestro botón principal como un valor de esa propiedad, y luego crear otra con un fondo blanco y establecer esa como botón secundario o algo en esa línea. Queremos hacer clic en Plus en la variante aquí. Entonces ahora tenemos otra variante de este botón. Y vamos a hacer clic en el contenedor padre y cambiar esta propiedad uno haciendo doble clic y cambiándolo a tipo así que solo lo estamos llamando tipo. Este es nuestro tipo predeterminado, pero queremos cambiar eso a primario así, por lo que el valor de este es primario. Y a ésta la vamos a llamar secundaria. Y vamos a cambiar el relleno. A lo mejor este 50 primario funciona en lugar de relleno blanco. Y podemos cambiar el color del texto para que podamos hacer doble clic en el texto. Cambia el color del texto a tal vez texto 500. Entonces ahora si bajamos aquí por estos dos botones, en realidad podemos hacer clic en ellos. Y ahora en nuestra instancia, obtenemos esta opción llamada type, y podemos elegir primaria o podemos elegir secundaria. Y pensándolo bien, creo que tal vez sólo ir con un simple botón blanco se ve mejor. Tal vez quieras agregarle un trazo y hacer que el trazo sea primario 100. Vamos a hacer click y también cambiar este a secundario también. Entonces ahora tenemos estos dos botones aquí y está empezando a quedar bien. Entonces con eso, volvamos en la siguiente conferencia para encontrar una imagen para usar aquí en el lado derecho. 31. Encuentra imágenes para usar: derecha aquí, nos gustaría poner una imagen que esté relacionada con vagar Wise y lo que hacen Ahora con Wonder Wise, reserve destinos y paquetes increíbles y todo va. Entonces queremos viajar foto, y podemos encontrar uno en, por supuesto, Google u otros lugares donde podamos usar la licencia real de la imagen en el proyecto. O otra opción es usar plugins. Y uno de los plugins que me gusta mucho si golpeas sobre la pestaña plugins y Widget y buscas Unsplash, obtienes este plug aquí que te da acceso a un montón de fotos que puedes usar Y al hacer clic en él, se abrirá, y te mostraremos algunas fotos aleatorias al principio, pero en realidad puedes seguir adelante y acotarlo y buscar imágenes específicas. Y así puedes ir aquí y buscar, digamos, viajar, presionar Enter, hacer clic en Buscar, y obtienes todas estas imágenes geniales. Y realmente puedes navegar por ellos y ver cuál se ve mejor para tu proyecto. Y pienso por mí, voy a ir con una de las fotos aquí. Esto parece un destino bastante increíble, así que voy a agregar esta imagen aquí. No tienes que hacer exactamente eso. Puedes hacer lo que quieras. Uno simplemente se ve hermoso. Definitivamente quiero estar ahí ahora mismo. Entonces queremos arrastrar esto por aquí dentro de un contenedor, pero como pueden ver, esta imagen en realidad ni siquiera está dentro de nuestro marco de registro. Entonces, para arreglarlo, en nuestro marco de registro, como recuerdas, creamos este marco dos. Entonces, lo que hay que hacer es arrastrar esto dentro de ese marco y asegurarse de que esté siendo arrastrado dentro del marco dos Así que la forma más sencilla de hacerlo, podemos simplemente arrastrar nuestra imagen hacia abajo a este fotograma dos. Ahí vamos. Ahora está dentro de ese marco, y podemos moverlo como queramos. Entonces tiene la hermosa cosecha que queremos. Esto se ve increíble. Ya está empezando a verse muy bien. Lo único que recomiendo agregar es una pequeña línea divisoria entre el contenedor aquí o el marco y la imagen. Ahora mismo, es como mezcolarlo un poco, y tal vez podamos mejorarlo agregando una línea divisoria. Así que hagamos clic en este marco aquí donde contiene todos los elementos de registro y hagamos un trazo. Pero ahora te darás cuenta con un trazo, estás agregando un trazo en el interior y puedes elegir el grosor del mismo. Eso es genial. Pero una cosa que notas es que no queremos acariciar todo el contenedor. Sólo queremos acariciar del lado derecho. Y así es donde entra en juego este pequeño Stroke por sitio. Puedes hacer click en él y elegir solo tener un trazo en el lado derecho. Si quieres uno encendido, digamos, la izquierda y la derecha o algo así, también puedes hacer una costumbre. Pero solo queremos en el derecho , así que vamos a dar clic a la derecha. Otro Broder sólo está del lado derecho. Ocho píxeles es un poco demasiado. Pienso algo en la línea de dos a cuatro. Creo que cuatro pixeles es bueno. Y este es un color fuerte, así que vamos a cambiarlo a algo un poco más acorde con nuestros colores primarios. Aquí es donde puedes jugar con tus variables y ver cuál se ve mejor. Se puede hacer un color secundario o incluso un color primario. Me gusta mucho este color secundario que es un poco más oscuro que el fondo. Creo que se ve bastante bien. Entonces ahora tenemos esta imagen, tenemos la página de registro prácticamente terminada por ahora al menos. Definitivamente hay cosas que podemos hacer para mejorarlo, pero las vamos a dejar para futuras conferencias. Vamos a terminarlo y luego volver y hacer algunos toques de pulido tal vez más cerca del final. Volvamos a la siguiente etapa para continuar con nuestras próximas páginas, que es la página de inicio de sesión verificadora. Entonces esto es después de que el usuario haya iniciado sesión, y necesitan revisar su correo electrónico para agregar un código de verificación antes de continuar. Volvamos a la siguiente sectura para hacerlo juntos. 32. Crea imágenes con IA en Figma: Manera de crear una imagen en el lado de aquí o de hecho para cualquier cosa a través de tu proyecto, también es usando Figma AI Entonces Figma tiene esta función de imágenes que le permite generar imágenes usando su función make image Todo lo que necesitas hacer es dirigirte al menú de acciones, y desde aquí, si no haces una imagen, si te desplazas hacia abajo, deberías verla en las herramientas de edición de imágenes. Al abrirla, puedes escribir un prompt y hacer que Figma haga una imagen Algo en la línea de foto de personas que viajan a una hermosa isla tropical de aguas cristalinas es algo que me vino a la mente. Y claro, puede ser más específico y escribir más detalles y darle más información sobre qué tipo de imagen desea y así sucesivamente. Por ahora, voy a hacer éste y ver qué hace. Y como puedes ver, Figma AI está trabajando en generar una imagen, y te dará algunas opciones que luego podremos elegir cuál nos guste Entonces aquí lo daremos en un minuto. Guau, esta es una imagen hermosa, y obtenemos un par de versiones diferentes que podemos usar para nuestro proyecto. Por supuesto, algunos de estos no son perfectos, y podemos pedirle que haga cambios. Entonces si estamos como, ¿sabes qué? Queremos fondo de puesta de sol en su lugar, podemos pedir eso o cambiar el prompt y regenerar las imágenes aquí Entonces ahora veamos si podemos conseguir un bonito fondo de puesta en su lugar. Vaya, y ahí lo tenemos. Hermosa isla tropical, un par de opciones diferentes. Incluso podemos ir con este de aquí. Como nuestra imagen. Así que voy a presionar Comando X, haga doble clic en aquí o haga clic en nuestro marco, Comando V para pegarlo ahí. Y así de esta manera, porque tengo esta imagen encima de la otra , si en algún momento, ¿ sabes qué? Estoy como, a lo mejor no me gusta esta imagen, me gusta volver a la otra que tenía. Siempre puedo ocultar este usando este icono I aquí y volver a la misma imagen aquí. Por ahora, lo dejaré en esta hermosa imagen generada por IA de Figma. Vayamos en la siguiente etapa para trabajar en nuestra página de verificación. 33. Página de verificación: La siguiente página de nuestra aplicación, el inicio de sesión verificante. Ahora bien, si recuerdas, mientras armamos el flujo y los wireframes, esta es la página donde se les pedirá a los usuarios que ingresen un código que se envía a sus correos electrónicos o a sus números de teléfono en caso de que opten por iniciar sesión con el número de teléfono, y necesitan ingresar este código y continuar Así que algunos elementos que he puesto aquí mantendrán la misma imagen de la página de registro. Tendremos un texto de inicio de sesión verificado seguido de una entrada para que pongan en su código. Y luego vamos a querer también un botón para reenviar el código por si acaso no lo recibieron, y luego un botón para continuar una vez que hayan escrito el código de verificación con el fin de verificar su De nuevo, te recomiendo totalmente que eches un vistazo a algo de inspiración antes de comenzar cualquier página nueva en tus diseños, incluso cuando estés pasando de wireframing a Siempre es agradable tener inspiración y también asegurarse de que te pierdas ninguno de los pasos. Por ejemplo, estoy usando mobile.com, y busco las pantallas de verificación, y hay toneladas de diferentes aquí desde PayPal, que es, nuevamente, usando un estilo similar a lo que estamos pensando con diferentes códigos de libro, y me gusta mucho el hecho de que tienen diferentes campos para cada número Tal vez tomemos ese enfoque similar en nuestros diseños, y hay diferentes que puedes ver con diferentes tipos de verificación. Entonces, si necesitan confirmar un correo electrónico, incluso pueden hacer clic en un enlace de su correo electrónico. Entonces está ese tipo de verificación, y luego hay tipos de verificación donde realmente necesitas ingresar un código de una sola vez como aquí o en el caso de PayPal. Entonces con eso, volvamos a cambiar a FIGMA y vayamos a nuestro proyecto Y la forma más sencilla que vamos a hacer esto es duplicando nuestra pantalla de registro porque ya configuramos la mayor parte del trabajo aquí de todos modos, y la mayor parte de este diseño es similar a la pantalla de registro con algunos cambios como aquí y el contenido de verificación y el contenido que tenemos en el lado izquierdo Entonces, para duplicar un marco, simplemente haga clic en él. Puedes mantener presionada la tecla Alt y arrastrar una copia o presionar Comando D para duplicar una copia. Voy a seguir adelante y mantener presionada Alt arrastra una copia aquí, coloca una derecha de la pantalla. Y vamos a cambiarle el nombre. Lo adivinaste página de verificación. Ahí vamos. Y lo que vamos a hacer es que vamos a empezar desde arriba y hacer algunos cambios. En primer lugar, ya no queremos este gran logo aquí. Entonces lo que queremos hacer es quizá cambiar eso hasta un H tres. Y cambiar la copia aquí para verificar. En realidad, vamos a cambiarlo para ingresar tu código de verificación. Y me doy cuenta de que esto es un poco demasiado grande, así que tal vez un H four haga el trabajo, y vamos a hacer de izquierda a fila. Entonces es un alineado a la izquierda del cuadro de texto aquí. Y para este texto aquí, vamos a cambiarlo para por favor ingrese el código de verificación enviado a max.do@gmail.com. Y obviamente, este es un texto de marcador de posición, y este será el correo electrónico Y solo lo resalté para que pueda cambiarlo a negrita. Ahí vamos. Y yo voy a hacer lo mismo aquí. Vamos a alinear a la izquierda el texto aquí. Ahora bien, una cosa aquí, no me gusta el hecho de que nuestro texto aquí esté alineado en medio del diseño automático. En realidad preferiríamos tener todo alineado a la izquierda, especialmente ahora que el texto también está alineado a la izquierda. Entonces todo lo que tenemos que hacer seleccionar el contenedor padre aquí, y en lugar de alinear la parte superior central, vamos a hacer alinear arriba a la izquierda, que empujará todo hacia el lado izquierdo y el lado superior aquí del marco de diseño automático. No necesitamos estos campos ni los otros botones ni los divisores, mientras mantengo pulsado Shift, voy a seleccionar lo que no necesito para poder presionar borrar en mi teclado y deshacerme de ellos. Ahora voy a cambiar este campo aquí al código de verificación. Y voy a usar Alt y ocho en mi teclado para simplemente ingresar algún texto marcador de posición como este y cambiar el texto de registro haciendo doble tintineo en él para continuar así Para los botones de aquí, mientras estamos en ello, me di cuenta de que a estos les vendría bien un aspecto o peso un poco más atrevidos Entonces voy a cambiarlo a body bold aquí para nuestros botones. Solo piensa que se ve mejor para un botón. Sí, eso es mucho mejor. Y nuevamente, a medida que avanzas haciendo cambios en tus diseños, notarás que estos pequeños detalles te van a aparecer. Como diseñador, no estamos tratando de hacer todo bien desde el principio. Siempre habrá pequeños detalles que tal vez quieras retocar a medida que diseñas y a medida que descubres cosas como cómo se debe diseñar tu página y así sucesivamente y así sucesivamente Ahora bien, si recuerdas, dije, sería bueno que configuráramos nuestro código de verificación con entradas separadas que están todas al lado de la otra. El problema es que, si empezamos a hacer eso ahora mismo con este campo, tenemos el como ejemplo, lo voy a hacer, y voy a maquetar auto estos dos. El problema es este título que tenemos. Realmente no necesitamos un título para cada uno de ellos. Y aunque podría entrar y eliminar el título para éste, lo que queremos hacer en y eliminar el título para éste, realidad es configurar propiedades que estén relacionadas con ese título para que podamos encenderlo y apagarlo de una manera más inteligente o de una manera más eficiente más bien. Y para ello, vamos a explorar cómo podemos usar propiedades booleanas en nuestros componentes en la próxima conferencia 34. Uso de propiedades de componentes: Inicialmente, configuramos el campo de entrada aquí como un componente con un título ahí dentro. Pero y si no queremos un título en ciertos casos como esta página de códigos de verificación donde queremos lograr un aspecto similar que tiene PayPal aquí. Entonces, ¿qué podemos hacer al respecto? De nuevo, puedes seguir adelante y hacer clic en el título del código de verificación aquí o en el título de tu entrada cualquier lugar y hacer clic en Eliminar. Esa es una forma de hacerlo, pero no la forma más eficiente u organizada de hacerlo, especialmente si estás trabajando con otras personas del equipo. Hay una manera mucho mejor de hacerlo a través del panel de propiedades por aquí en el lado derecho que tenemos. Entonces en este momento, no tenemos ninguna propiedad, pero lo que podemos hacer es ir a nuestros componentes aquí para nuestro campo de entrada, seleccionar nuestro campo de entrada, y vamos a agregar una propiedad. Entonces, como puedes ver, estas son las instancias de aquí del campo de entrada. A nivel de instancia, podemos elegir si queremos mostrar un título o no caso por caso. Ahora, por defecto, mostraremos un título, y luego nos permitiremos como diseñador alternar el título si no lo queremos. Hay dos formas de hacerlo. Puede configurar otra variante de este campo de entrada. Similar a lo que hemos hecho aquí. Desafío con eso es que si necesitas hacer cambios en tu entrada, ahora tendrás que hacerlo a dos variantes diferentes de la misma. Entonces, para un caso en el que solo quieres simplemente ocultar el título, en realidad no necesitas otra variante para tu componente. Todo lo que necesitas es una propiedad nueva y, hecho, una propiedad booleana Entonces, para configurar una propiedad en su componente, vaya a agregar propiedad aquí en el panel derecho, presione más y establezca una propiedad booleana Ahora bien, Booleano es simplemente un estado de encendido o apagado. Por lo que esta propiedad booleana nos permitirá alternar propiedad entre on y off Y ahora mismo el nombre es simplemente booleano, pero en realidad queremos darle un nombre significativo Entonces vamos a hacer mostrar el título del espacio así. Entonces, por defecto, dejaremos show title como true, y luego golpearemos Create property. Entonces lo que haremos es vincular la visibilidad de esta capa a esa propiedad que acabamos de crear. Ahora, antes que nada, para alternar la visibilidad, todo lo que necesitas hacer es marcar este ícono aquí, esconderte. Y si lo revisas, simplemente, ese título desaparecerá, o al menos se ocultará porque todavía está aquí en el panel Capas, y puedo mostrarlo desde aquí también o esconderlo desde aquí Lo que queremos hacer es que queremos adjuntar la visibilidad de esta capa o este título a esa propiedad que acabamos de crear. En otras palabras, a nivel de instancia, si alternamos esa propiedad, entonces este título debería ser visible, pero si lo desactivamos, este título debería estar oculto. Hay una manera muy sencilla de hacerlo, adjuntar esas propiedades, y todo lo que necesitas hacer es ir por aquí justo al lado del icono I. Haga clic para asignar una propiedad para la apariencia de este texto del título para mostrar el título. Boom. Y ahora nuestra propiedad del título del espectáculo está aquí. Siempre puedes retirarlo de aquí o desconectarlo. A ver eso en acción. a nuestra entrada de código de verificación aquí, haga doble clic en él para seleccionar la instancia. Y ahora vemos esta propiedad del título del espectáculo. Si lo apagamos, ahí vamos. Nuestro título ha desaparecido, y por aquí, en lugar de llenar, en realidad queremos abrazar contenidos. Por defecto, creo que tenemos contenidos de abrazo. En fin, está aquí, así que eso es lo que queremos. Entonces ahora tenemos un campo de entrada. Podemos activar o desactivar el título. Hermoso. Todo bien. Entonces ahora que hemos atado la visibilidad a este título, en realidad queremos simplemente seguir adelante y copiar otra variante aquí. Y deshazte de este de aquí para que ahora lo que podamos hacer esconda el título, Duplate esto cinco veces más usando el Comando D. Así que tenemos seis códigos de verificación O códigos de seis dígitos, presione Mayús A mientras los seleccionaba todos, y estaba manteniendo presionado Mayús para seleccionarlos todos y hacer un diseño horizontal. Ahí vamos. Ahora el espaciado entre ellos podría ser un poco menor, tal vez 16 píxeles. Y en lugar de texto marcador de posición, podríamos simplemente ingresar cero, cero, cero, cero, cero Ahora, claro, en este caso, queremos que nuestro texto esté realmente en el centro, y lo que podamos hacer porque este es el único caso en el que realmente queremos aplicar esto, vamos a seguir adelante y sobrescribir las propiedades y hacerlo dentro de nuestra Instancia aquí Así que he seleccionado todas las capas de texto dentro, nada más, no los rectángulos ni cualquier otra cosa, solo las capas de texto Y yo estaba manteniendo el mando y turno para hacer eso. Entonces, mientras mantienes el comando, puedes seleccionar rápidamente cualquier cosa dentro de este marco de diseño, y manteniendo presionado Shift, puedes seleccionar varios de ellos. Entonces, manteniendo presionado Shift, estoy seleccionando todos los títulos para que pueda golpear la línea central, y todos los códigos de verificación están ahora en el centro. Ahí lo tenemos. Una cosa más que voy a hacer es que voy a hacer lo mismo, pero ahora voy a hacer doble clic seleccionar el AutoAyoutFrame dentro, como el de aquí y mantener presionado Mayús y dar clic en todos ellos porque quiero que la altura sea un poco más En vez de 12, hagamos 16. Eso es mucho mejor para este caso. Entonces tenemos esto ahora. Queremos un texto más aquí, no recibimos el código de verificación, reenviarlo. Y voy a resaltar esta parte rescindida, negrita usando el Comando B, y hagamos un 500 primario para que se vea como un color de enlace Increíble. Ahora tenemos nuestra página de verificación, y se ve muy bien. Continuemos con nuestra página siguiente, que de acuerdo con los wireframes, sería nuestra página de Descubrimiento de destino Entonces esta es la carne del proyecto. Esta es una de nuestras páginas más interesantes donde vamos a trabajar con muchos elementos. Por lo que estoy deseando que llegue este. Y vamos a tomarnos nuestro tiempo con ello y aprender muchísimo en las próximas conferencias. Entonces, si estás listo, saltemos a la derecha. Si necesitas un descanso, tómate tu descanso y te veré en un rato. 35. Comienza con nuestros maquetas de descubrimiento de destinos: A veces en nuestros diseños, estamos trabajando en páginas más simples como esa página de verificación en la que trabajamos, y a veces trabajamos en desafíos o páginas de diseño complicados y más complejos. En nuestro caso, ahora mismo, nos dirigimos a nuestras maquetas de descubrimiento de destinos, y me imaginé que siempre es mejor desglosar estas páginas más grandes en componentes y partes más pequeñas en las que podamos trabajar y luego unirlas Para que A, nuestros componentes sean reutilizables. Podemos reutilizar cosas como este panel de navegación, etcétera, y diferentes páginas Al igual que cómo yo, cuando pasamos de nuestra página de registro a nuestra página de inicio de sesión de verificación, fue mucho más fácil y mucho más rápido. Eso es exactamente lo que estamos tratando de hacer aquí con nuestra página de descubrimiento de destinos porque muchos de estos componentes también se pueden usar en otros lugares. Y algunos de ellos ya los armamos como este campo de entrada aquí para búsqueda y cualquier botón que necesitemos. Me imaginé que vamos a desglosar esta página en múltiples componentes diferentes con los que comenzaremos. Empecemos desde arriba y trabajemos nuestro camino hacia abajo, comenzando desde nuestra barra de navegación en la parte superior aquí. Por lo que esta barra de navegación es como los usuarios podrán navegar a través de nuestra aplicación web. Haga clic haciendo clic en el logotipo. Siempre pueden ir a la página principal, que es esta página aquí, hecho, y luego queremos algunos enlaces en el lado derecho aquí. Aún no sabemos cuáles serán esos enlaces, o por ahora, podemos simplemente colocar un pequeño icono de perfil, similar a lo que incluso ves aquí en Figma, donde podrás administrar tu cuenta o ver un menú desplegable de las diferentes opciones que obtengas, y las clasificaremos exactamente a medida que avancemos Por ahora, comencemos con ese NAVR básico, para la web, y luego volveremos, comencemos a armar algunos de nuestros elementos aquí, como la entrada aquí para la búsqueda y los campos aquí para los selectores de fecha y un botón para buscar y así sucesivamente Y entonces realmente nos centraremos en algunos de los diseños de tarjetas. Entonces estas son todas tarjetas, y diseñamos estas tarjetas de destino, hecho, si recuerdas, en nuestro wireframing, así que usaremos esta estructura metálica para llegar a una tarjeta de componente real que podamos Y mientras estamos haciendo eso, diviértase un poco con la generación de contenido de IA también. Y luego terminaremos agregando algo de colección aquí y el botón de filtrar y ordenar y así sucesivamente y así sucesivamente. Si eso suena bien, volvamos a la siguiente sectura para comenzar con nuestro diseño de barra de navegación 36. Uso de bibliotecas de kits de UI: Quizás te estés preguntando, ya sabes, estamos reuniendo todos estos componentes y haciéndolos desde cero aquí y creando nuestra propia biblioteca de componentes, lo cual es genial. Pero otra vez, podrías estar preguntándote, Oye, Nima, ¿necesitamos diseñar cada componente desde cero para diseños que puedan ser tediosos, especialmente si estás tratando de reunir un diseño muy rápido y tu empresa ya tiene activos o tal vez el cliente con el que estás trabajando ya tiene un Si no, definitivamente hay formas aprovechar lo que FGma le da acceso, también Hay múltiples recursos que puedes usar, especialmente con las nuevas actualizaciones de FicMA, puedes acceder a algunas bibliotecas que puedes usar para incorporar algunos componentes de diseñadores anteriores u otros diseños a tus proyectos Entonces queremos diseñar este Navbar, pero ¿y si ya hay otros Navbars por ahí que simplemente podemos copiar y Ahí es donde entra en juego este panel de Activos. Así que normalmente estás en el panel de archivos. Cambie a los activos uno aquí, como puede ver, donde se está armando nuestros propios activos locales, donde todos nuestros componentes están ahí y tal, lo cual es agradable. En realidad vamos a seguir adelante y agregar más bibliotecas aquí. Y aquí, podemos publicar nuestros propios activos que podemos usar en otros archivos, y lo tocaremos un poco más tarde. Por ahora, lo que queremos hacer es cambiar de este archivo actual a kits de interfaz de usuario. Y al hacerlo, encontrarás tres kits de interfaz de usuario que actualmente están disponibles en Figma que simplemente puedes agregar a tu proyecto Ahí está el IOS 18 y el iPad OS 18. Entonces, si estás trabajando especialmente en una aplicación nativa de IOS o iPad, te recomiendo encarecidamente que agregues esta a tu archivo porque no quieres estar rediseñando cada componente que ya tiene Apple Hay un diseño de material tres, genial para proyectos Android o simplemente en general, tienen una gran cantidad de componentes que se usa en muchas aplicaciones. Y el FICMA obtuvo uno llamado Simple Design System, que podemos agregar a nuestro archivo si quieres echarle un vistazo Ahora incluso podemos dar click sobre él para ver todo lo que también tiene este proyecto. Entonces tiene muchas tipografías, variables de tamaño, variables de color, algunos estilos aquí, algunos componentes de estilo acordeón, muchos botones. Tarjetas, formas, muchos íconos que puedes usar, lo cual es increíble. Tienen entradas, menús. Y si, claro, tienen un componente de navegación. Ahora, por supuesto, puede agregar esto a su archivo y tener acceso a todo esto dentro de su archivo, o en realidad puede arrastrar cualquiera de estos a su diseño también. Entonces, si ves este de navegación, puedes arrastrarlo y utilizarlo aquí como tu navegación en la parte superior aquí. Entonces sí tienes acceso a estos otros sistemas de diseño que puedes utilizar en tus proyectos, y puedes echar un vistazo a cada uno de ellos para ver qué contienen y qué tienen? O, de nuevo, diseña el tuyo desde cero, que es lo que estamos haciendo aquí en este proyecto. Lo estamos haciendo para que podamos maximizar los aprendizajes de este curso Pero claro, en un proyecto real, a veces o tal vez muchas veces, en realidad podrías reutilizar componentes que están diseñados por otros diseñadores o en otros casos, hacer uno desde cero. Entonces espero que esto te dé una idea de algunos lugares en los que puedes buscar inspiración. Algunos lugares puedes aprovechar algunos recursos. Otro gran lugar para buscar estos kits de interfaz de usuario es dirigirse a la pestaña de la comunidad aquí. Ahora, si vas a las pestañas de recursos de diseño, verás los kits de interfaz a los que puedes acceder directamente. Ya exploramos estos, pero hay toneladas de otros que son algunos gratuitos, algunos de pago que también puedes usar en tus proyectos , bien. Entonces te lo dejo a ti para que explores los kits de UI si quieres. Nuevamente, vamos a seguir juntando nuestros propios componentes en el resto del proyecto. 37. Diseñar una barra de navegación: Así que pasar a nuestro Navbar y diseñarlo juntos. Lo primero es lo primero, sigamos adelante y dupliquemos este marco para usarlo como nuestra pantalla de tablero. Vamos a llamarlo nuestra página de Descubrimiento de destino. Entonces le cambiaremos el nombre a éste, destino Discovery. Y de nuevo, copia esta yendo a la página de verificación, manteniendo presionada la tecla Alt, y arrastrando una copia por aquí Ahora, no necesitamos nada de este contenido aquí, así que mantendremos Shift seleccionando ambos y eliminarlos. Entonces ahora tenemos una pantalla en blanco o un marco en blanco en este caso, y queremos armar una Navbar y luego arrastrarla como componente Para nuestro Navbar, queremos un logo en el lado izquierdo aquí. Así que solo podemos usar el texto de Vander Weis que hemos estado Y luego en el lado derecho, solo pondremos un marcador de posición para tal vez un par de botones, así como cosas que probablemente necesitarán un menú desplegable de perfil, así como un icono de campana de navegación Por lo que este icono de la campana de navegación estará aquí, así como una pantalla de perfil, así como el pequeño desplegable de perfil Eso suele ser lo que vemos en Navbars. Y nuevamente, aprovechar algunos recursos o inspiración definitivamente te ayudará a obtener más rápido en armar estos componentes. Va a comenzar copiando y pegando este logotipo de Vander Weiss Tengo el comando para seleccionar a Vanderweis, traerlo aquí, pegarlo Y es un poco demasiado grande. Queremos cambiar a un tamaño más pequeño. A lo mejor este H four es bueno. Y ahora voy a presionar Mayús A para convertir esto en un marco de diseño automático. Este marco de diseño automático lo podemos usar para nuestro Navbar. Pero lo que quiero hacer es seleccionar el marco aquí para descubrimiento de destino y cambiar el relleno a nuestro fondo que ya creamos. Entonces este es el mismo color de fondo aquí que estamos usando. Y lo que vamos a hacer es seleccionar este marco este marco de diseño automático que acabamos de crear, y vamos a seguir adelante y moverlo a la esquina aquí, que normalmente es donde vemos nuestras barras de navegación. Ahora vamos a seguir adelante y estirarlo todo el camino para ocupar todo el ancho. Ahora no queremos que el contenido esté en el centro. Queremos que el contenido esté alineado a la izquierda y al centro verticalmente. Verticalmente, queremos que esté en el centro, y horizontalmente, queremos que esté alineado a la izquierda. Entonces por eso estamos eligiendo este de aquí. El espaciado es un poco demasiado poco. Tal vez cambiando el espaciado 10-16. Y luego esta, queremos realmente usar nuestra grilla. Entonces, si recuerdas, configuramos una cuadrícula y podemos encenderla y apagarla en nuestros marcos. Queremos usar el mismo margen aquí que configuramos para nuestra cuadrícula que, como pueden ver aquí es de 48 píxeles. Así que queremos que nuestra barra de navegación también tenga un espaciado de 48 píxeles de izquierda a derecha Entonces tiene esta hermosa alineación con nuestra cuadrícula de diseño. Vamos a seguir adelante y esconder la grilla por ahora y pondremos un relleno de blancos para este Navbar, también. Entonces está empezando a verse bastante bien. Empezando a sentir que 16 píxeles podrían ser un poco demasiado pequeños. La altura se ve un poco demasiado comprimida aquí. Entonces podemos hacer 18 o incluso 20. Creo que me gusta cómo se ve 20 aquí. Y ahora queremos algunos enlaces del lado derecho. Antes de eso, queremos tener cierta separación entre este Navbar y la página aquí Entonces, ¿por qué no le ponemos un trazo a su alrededor como frontera? Y nuevamente, solo queremos un trazo inferior, así que vamos a elegir bottom y cambiarlo a secundario 800 o secundario 700. Se ve bien. Creo que el 800 secundario se ve bien. Ahora, para crear ese pequeño icono de perfil aquí, podemos configurarlo dentro de un círculo, que podemos crear pulsando O en nuestro teclado para dibujar un círculo y mantener presionada la tecla Mayús y arrastrar una O. Por supuesto, no está aquí. Va a estar de este lado. Entonces, debido a que está dentro de nuestro diseño automático y nuestro diseño automático en este momento, todo está alineado a la izquierda, dibujé el círculo aquí. Entonces voy a hacer doble clic para seleccionarlo, y en vez de 65 por 65, hagamos que sea 48 por 48. Creo que esa es una buena talla. Ahora, no queremos que nuestro perfil esté aquí. En realidad queremos que nuestro círculo de fotos de perfil esté en el lado derecho. Entonces, ¿cómo lo hacemos en autolayout? Entonces en autolayout, normalmente tenemos una brecha fija que especificamos aquí Por supuesto, puedes seguir adelante y hacer que esta brecha sea lo suficientemente grande hasta que esto salga del lado derecho, pero definitivamente esto no es escalable y no es la forma correcta de hacerlo. Lo que quieres hacer es pasar de tener un hueco a usar un Gap automático, debemos seguir adelante y espaciar todo de manera uniforme. Debido a que en este momento solo tenemos estos dos elementos, todo estará espaciado de manera uniforme y empujado a los extremos del diseño de salida. ¿Qué pasa si hay un tercer elemento? Digamos aquí un texto para mostrar el nombre del usuario, Mac Stowe Esto también se separa uniformemente, también. Entonces queremos este nombre, y de hecho, lo queremos del lado derecho, así que lo estoy seleccionando y moviendo hacia la derecha. Ojalá lo movamos por aquí, pero no queremos esta brecha aquí entre estos dos. Queremos que estos dos tengan un espacio más pequeño y estén cerca el uno del otro, y luego el resto del diseño automático tenga un espacio más grande o se separe uniformemente. Entonces en un caso como este, todo lo que necesitas hacer es seleccionar tu texto. Bueno, antes que nada, H four es un poco demasiado audaz. Para este, solo podemos ir con un cuerpo grande, audaz. Y cambiemos el texto a texto 400. Eso se ve bien. Y mantengamos presionado Mayús mientras tenemos el texto seleccionado para seleccionar también la elipse aquí, y vamos a presionar Mayús A para crear un diseño automático para ellos también. Ahora bien, estos son un diseño automático con un espaciado automático también. Pero entre estos, no necesitamos un espaciado automático. Solo necesitamos, digamos, un espaciado de 16 píxeles, que queda bien. Y en lugar de un ancho fijo de 638, queremos que abrace contenidos para que sea empujado hacia ese lado y solo tenga un ancho de lo que necesita, que es este ancho aquí. 16 píxeles es un poco demasiado para la brecha. Entonces vamos a hacer ocho pixeles. Y ahora lo que queremos hacer es solo tener un par de enlaces más aquí. Ahora, sé que dije que aquí podemos agregar algunos enlaces, pero tal vez podamos hacerlo más adelante ya que agregamos más páginas o tenemos otras necesidades para hacerlo. Por ahora, lo dejaremos así. Una cosa más que podemos agregar aquí es un icono de campana de notificación. Ahora bien, los plugins y widgets, si buscas fósforo, es una muy buena biblioteca de iconos que puedes usar para tu proyecto Entonces voy a ejecutar este de aquí. Y voy a buscar un icono de notificación, y echarle un vistazo. Tenemos algunos bonitos que podemos usar. Voy a hacer click. Y una vez que haces clic en él lo deja caer justo por aquí, así que simplemente podemos arrastrarlo aquí. Y tenemos el mismo tema. Por supuesto, vamos a hacer lo mismo. Vamos a seleccionar el marco vectorial de campana de notificación, seleccionar aquí también este marco que creamos para nuestro perfil desplegable, pulsamos Mayús A, y entre estos, vamos a hacer 16 píxeles. Y nuevamente, queremos hacer contenidos de abrazo. 16 píxeles es un poco demasiado pequeño. ¿Por qué no probamos 24 o incluso 32? Creo que 32 se ve bien. El icono es un poco pequeño, así que podemos hacer doble clic y en lugar de 24 por 24, podemos hacerlo quizás más grande. Podemos hacerlo 32 por 32. Creo que eso es bastante agradable. Y tal vez en vez del color negro, podemos cambiarlo a 500 primarios. Y en lugar de este color negro, podemos cambiarlo a tal vez un 800 secundario. Pensándolo bien, creo que puedo hacerlo un poco más grande, como 40 por 40 y eso se verá mejor, más Impresionante. Entonces tenemos un icono de campana de notificación aquí. Tenemos nuestro desplegable de perfil. Ahora mismo, no tiene una imagen, así que podemos venir en la próxima salida para armar eso Pero lo primero que quiero hacer es mover esto fuera de aquí para que podamos crear realmente un componente, y podemos hacerlo pulsando Altommand K o Control en Windows y cambiarle el nombre a nuestra barra de navegación Y, por supuesto, voy a mover esto a nuestra sección de componentes aquí para que podamos organizar ordenadamente todos nuestros componentes a medida que crecen. Así que sólo voy a ampliar esa sección y mover esta de aquí. Voy a darle a nuestra sección de componentes también el color de fondo para que podamos ver mejor nuestros componentes. Voy a hacer click en ese componente NavR y ahora soltarlo o pegarlo aquí Entonces ahora tenemos una instancia de ello, y vamos a mover esto a cero, cero para la X e Y, así está en la esquina aquí y ocupando todo el espacio. Luce genial. Volvamos a la L ecture para continuar con las otras partes de nuestra página de descubrimiento de destinos, que son las entradas aquí, algunas tarjetas, y así sucesivamente. 38. Genera un primer borrador con IA en Figma: Estamos trabajando en esta página, olvido que es un buen momento para echar un vistazo a un largometraje de Figma llamado First Draft Ahora bien, este primer borrador es en realidad una función de IA que básicamente te viene con el primer borrador para tu maqueta para que puedas usarlo como inspiración para diseñar tus pantallas Realmente no está destinado a reemplazar hacer trabajo de maqueta, y realmente la idea principal, como su nombre indica, es darte una idea de cómo debería ser esa página y asegurarte de que juntas todas las piezas correctamente Piénsalo como una inspiración para tus diseños, mezclado con los detalles de tu proyecto. Para acceder a esa función, puedes ir al panel de acciones o presionar Comando K, y luego verás esta primera función de borrador aquí. Entonces ábrelo, y necesitarás escribir rápido y lo más detallado posible para que se le ocurra ese primer borrador. Entonces escribiremos tantos detalles como podamos, diciendo usando un texto similar al marcador de posición aquí, haremos una página de descubrimiento de destino para una aplicación de viajes que permita a los usuarios reservar paquetes de vacaciones En un solo lugar. En la pantalla, muestra tarjetas que tienen diferentes destinos, incluido el nombre de las ciudades, los precios del paquete. Y solo estoy echando un vistazo a nuestro wireframe para asegurarme de incluir todo Un botón de reserva. Y una insignia popular. El resto de esta página debe tener entradas para ubicación, tiempo de viaje en un formato de desde y hacia. Y vamos a empezar con sólo decir una aplicación web, página de descubrimiento de destino. Entonces sabe para qué estamos diseñando. Ahora, claro, puedo ponerme un poco más en profundidad y más detalle, pero veamos qué va a llegar a esto. Entonces presionaremos Make it. Está funcionando en la pantalla. Ahí vamos. Desafortunadamente, no armó una página de aplicación web para una pantalla de escritorio, pero vemos la versión móvil y esto es y esto se ve bastante bien. Aquí tenemos nuestras imágenes, los paquetes, con las opciones de precios, e incluso las fotos de diferentes ciudades. Entonces este es definitivamente un bonito diseño con el que podemos ir. Me gusta mucho cómo incluían algunos íconos. Entonces definitivamente podemos usar esa idea. Y si quieres, en realidad puedes simplemente pegar sobre estas entradas en tu diseño si quieres. Eso definitivamente es una opción aquí. Así que definitivamente podemos echarle un vistazo a eso y dejaremos esto aquí como más inspiración. Ahora, a partir de aquí, también puedes cambiar el estilo. Entonces, si no te gusta el estilo que se te ocurrió, puedes hacer diferentes como aquí. Tenemos uno morado, uno azul. Y como puedes ver, las fuentes están cambiando, también. Entonces tenemos una fuente sera con esta, lo cual es interesante. Este verde, y luego tenemos un modo oscuro uno, super cool. Y siempre podemos hacer cambios en cuanto al diseño. Podemos ver el modo oscuro, por cierto, también. Pero aquí podemos cambiar parte de la coloración. Entonces, si quieres, digamos, azul para nuestro botón principal, podemos hacerlo, o incluso para los iconos de aquí abajo y todo el tema general de la aplicación, o podemos ingresar un código hexadecimal específico. Por ejemplo, podemos sacar el código hexadecimal de nuestras variables locales para primaria 500, que es esta de aquí, e incluso volver aquí, ir a First Draft. Entonces eso es súper genial. Así que siéntete libre de usar el Figma AI First Draft para idear las ideas de lo que quieres incluir No de inmediato. Ya hay algunas cosas que faltan de aquí que queremos incluir una insignia de popularidad, un marcador, que ya está ahí, así que eso es lindo. Podemos usar un marcador de estilo similar. Y queremos calificaciones también, y también para los precios, tal vez inicialmente, queremos mostrar por semana, y luego solo si el usuario realmente ingresa fechas, entonces queremos mostrar el precio exacto para esos tiempos que ha seleccionado. Entonces así es como podemos usar Fake MI para generar algún primer borrador para nosotros. Ahora vamos Mike y Ax extra para seguir armando nuestra página de descubrimiento de destinos por nuestra cuenta. 39. Agregar entradas de búsqueda y tiempo: Para pasar a diseñar el resto de nuestra página de descubrimiento de destinos. Ya tenemos aquí la barra de navegación, lo cual es agradable. Ahora queremos bajar a nuestros insumos, que serán el destino. Entonces aquí es donde también viajará el usuario. Ahora, en nuestro caso de imagen generada por IA, tenemos un from, pero en realidad no necesitamos un de. Solo necesitamos un destino por el hecho de que a través de esta plataforma, no están reservando vuelos. Solo están reservando paquetes que básicamente vienen con alojamiento y cualquier actividad que hagan allí. Así que no vamos a necesitar incluir eso. Quiere incluir un destino, campo de entrada. Y a lo mejor para el icono, podemos hacer un ícono similar a este de aquí. Me gusta mucho. Y luego queremos una entrada para los selectores de fecha, por lo que queremos permitirles seleccionar fechas desde las que quieren viajar y hasta entonces queremos tener un botón de búsqueda que básicamente les permita hacer clic para que puedan buscar y refinar estos resultados Ahora, por defecto, estas tarjetas solo mostrarán destinos generales. Y a medida que buscan un destino específico y tiempos específicos, la idea es que estos resultados se limiten a lo que sea que esté buscando el usuario. Esto se ve comúnmente en muchas plataformas de reservas. Queremos agregar una entrada que tenemos, para que podamos continuar con nuestros activos, activos locales y arrastrar el campo de entrada aquí. Vamos a moverlo para que esté por aquí, 48 píxeles, y estoy sosteniendo el espaciado altitudeck, y desde arriba, hagamos también 48 Para nuestro título aquí, llamémoslo destino. Y en lugar del texto de marcador de posición, vamos a agregar algo de ciudad aquí, digamos, Nueva York Punto, punto, punto así para darles las pistas de que pueden agregar ciudades y así sucesivamente. Entonces queremos un ícono aquí como este ícono de ubicación en el lado izquierdo de él, ahora mismo, no tenemos eso en nuestra entrada, así que realmente no podemos arrastrar un ícono dentro de esto porque esta es una instancia. Entonces necesitamos ir al componente, que siempre puedes hacer, por cierto, haciendo clic en este botón del componente principal de GoTo Y ahora que estamos aquí, queremos agregar un icono en el lado izquierdo. Pero nuevamente, queremos configurar una propiedad para que solo cuando decidamos, luego mostraremos el icono. Sigamos adelante y creamos una propiedad aquí, una propiedad booleana, llamaremos show left icon así, por defecto, vamos a apagarla porque generalmente, en nuestros campos, no necesitamos íconos. Crear propiedad. Vamos a los iconos de Fósforos. Y si no lo tienes aquí en tus razones, siempre puedes buscarlo y plugins y widgets. Y busquemos la ubicación. Este es lindo. Podemos usar esta. Voy a darle al Comando X para cortarlo y pegarlo aquí en lugar de nuestra entrada. Y cambiemos el tamaño a 20 por 20 en su lugar. Y muévelo hacia el lado izquierdo usando las flechas de nuestro teclado. Entonces ahora tenemos un bonito icono aquí. Y con el icono, en realidad podríamos reducir un poco el espaciado aquí en el lado izquierdo. Entonces, si vas por aquí, podemos elegir empalmes individuales para nuestro contenedor de diseño automático aquí Entonces podemos tener un píxel 16 de la derecha, pero desde la izquierda, podemos hacer tal vez ocho, así que eso se ve un poco mejor. Y ahora queremos darle a este icono un color diferente. Hagamos primaria 500. Y también, vamos a atar la visibilidad aquí a nuestro icono de la izquierda del espectáculo, propiedad que acabamos de crear. Y claro, se ocultará porque por defecto, hemos optado por que eso sea falso. Siempre se puede cambiar eso a partir de aquí, por cierto. Así que ahora vamos a la que queríamos estar encendida y encendemos esta. Hermoso. Entonces ahora tenemos nuestro insumo de destino. Queremos dos campos más para nuestras fechas. Ahora lo que pasa es que necesitamos cambiar el icono para las fechas. Ahora, aquí atrás, voy a hacer eso una vez más. Creo que el espaciado desde la izquierda es un poco demasiado poco. A lo mejor 12 píxeles es mejor. Y el espaciado entre el marcador de posición y este podría ser de ocho píxeles Entonces la brecha, eso es un poco mejor. Voy a desactivar la propiedad predeterminada para mostrar ese icono de la izquierda. Ahora volvamos. Sí, se ve mejor. Entonces dos campos más aquí, el de y dos. Usemos Alt, copia algunos campos aquí. De hecho, voy a diseñar automáticamente estos dos juntos, para que podamos hacerlo una vez más fácilmente. Cambiar esto a dos, cambiar esto a de, de nuestro marcador de posición, podemos elegir una fecha Ahora solo podemos escribir una fecha aleatoria aquí. Como marcador de posición. No necesitamos que sean tan grandes, así que en realidad podemos hacerlos tal vez 400 pixeles de ancho, así. Cambiemos esos íconos para que sea un calendario en lugar de un pin o pin de ubicación. Y para hacer eso, volvamos en la siguiente conferencia para que podamos configurar algunos iconos dinámicos aquí en caso de que tengamos una entrada con múltiples iconos diferentes. 40. Instancias anidadas: Desafíos, queremos tener un ícono aquí en esta entrada que podamos usar, y no queremos que sea solo ese ícono de ubicación. Queremos múltiples iconos. Lo que podemos hacer aquí es que realmente podemos crear un componente para nuestros iconos, así podemos soltar cualquier icono que estemos usando en el proyecto en ese componente en su lugar, y luego podemos crear una instancia anidada de ese componente Eso podría no tener ningún sentido en este momento para ti, pero te mostraré en un segundo cómo funciona eso. primero es lo primero, voy a arrastrar este icono completamente fuera de aquí y voy a usar el Comando K para convertir esto en un componente. Cambiemos el nombre de este icono Mapa, pluma así. Y es importante que pongas este guión de iconos para crear un grupo llamado icon. Y ahora podemos ir por aquí, abrir íconos de fósforo y buscar un icono de fecha Este se ve bien. Y cambiemos también el tamaño de esto a 20 por 20 Entonces vamos a cambiar a 20 aquí. Entonces es del mismo tamaño y también hacemos Alt Command K para convertir esto en un componente, y usar el mismo formato de icono de nomenclatura y haremos fecha o calendario El nombre del icono real depende realmente de ti. También le voy a dar esa primaria 500. Mira, y vamos a mover estos dentro de nuestros componentes aquí, así que todos están pulcramente ahí. Y ahora lo que haremos es copiar aquí una instancia de este icono. Muévelo a la izquierda otra vez. Y lo que vamos a hacer es que vamos a seguir adelante con las propiedades aquí y agregar un intercambio de instancias. Y nuestro intercambio de instancias será icono, y elegiremos Map Pin, lo llamaremos icon. Lo que esto nos permite hacer es a nivel de instancia, rápidamente podremos cambiar este icono del pin del mapa a cualquier otro icono. Y una vez que golpee Crear propiedad, verás cómo funciona eso en tan solo un segundo. Entonces ahora si hago doble clic en este de aquí, no pasó nada. Así que ahora aquí, vamos a hacer doble clic para seleccionar el icono en sí, y luego vamos a hacer los tres puntos aquí y aplicar la propiedad de intercambio de instancia, y vamos a utilizar icono. Y entonces ahora lo que va a pasar es si vamos a donde estamos usando nuestro campo aquí, si haces doble clic, en realidad podemos cambiar ese icono del mapa uno al calendario uno por éste , y lo mismo aquí. Así que cada vez que añadimos un icono a esto como un componente con el icono lo que sea, podemos intercambiar el icono con ese en su lugar. Impresionante. Entonces ahora tenemos este campo. Ahora se ve un poco soso aquí. Creo que podemos usar un bonito título aquí para esta página. Entonces, ¿por qué no bajamos esto un poco más de texto agregado, y nosotros, encontremos la próxima aventura Y vamos a hacer esta una edad de cuatro años. Colócala por aquí. Aquí vamos a tener este a 48 pixeles. Mueve este hacia arriba hasta que esté a 24 píxeles de este y haz un diseño automático de ellos también. Este diseño automático debe ser del tamaño de toda el área de contenido, y luego cambiaremos el color de esta vamos a hacer secundaria 800. Y cambiemos el color aquí a un texto 300. Luce mejor. Y agreguemos un botón de búsqueda aquí. Podemos simplemente copiar un botón de aquí a aquí. Y queremos que este diseño automático esté realmente alineado con la parte inferior izquierda así y este botón para realmente g contenidos para que no sea tan grande, y solo diremos búsqueda. Ahí lo tenemos. Ahora, realmente está empezando a unirse lentamente, y ahora volvamos a la siguiente sectura para comenzar a armar el diseño nuestras tarjetas de destino reales 41. Diseño de tarjetas de destino: Las partes más grandes de nuestra aplicación o porciones las tarjetas de destino que vamos a diseñar. Entonces aquí tenemos estas tarjetas de destino que inicialmente mostrarán un conjunto predeterminado de destinos, tal vez por lo que es popular o podemos decidir eso. Posteriormente, lo que queremos hacer es diseñar entonces si el usuario busca o filtra sus opciones, entonces se puede mostrar un conjunto diferente de tarjetas de destino. Lo que queremos hacer es idear un diseño para nuestra tarjeta de destino. Entonces aquí tenemos una bonita imagen en nuestro wireframe que podemos usar para ese destino Entonces, de manera similar a lo que ha surgido la IA, podemos tener una imagen de esa ciudad. Aquí habría un botón para marcar esta ciudad o destino Y entonces aquí abajo estaría el nombre de nuestro destino o nombre de ciudad, seguido del número de calificaciones. Ahora aquí tenemos un precio por semana. Aunque esto no tiene mucho sentido, lo que queremos hacer es mostrar un precio, así como quizás agregar aquí las fechas de esta aventura para este paquete, así podemos demostrar que este viaje es entre esta fecha y esa fecha, o podemos mostrar el número total de días que también pueden ser útiles en lugar de este precio por semana. Para que podamos mostrar el precio. Podemos agregar una serie de días que estarán en este destino, y luego un pequeño icono aquí para mostrar si este destino es popular o no. Entonces, si tiene este ícono de fuego, es popular, lo contrario, no lo es, tal vez podamos mover esto aquí arriba. Entonces veremos a medida que comenzamos a diseñar cómo se arregla, y luego queremos botón para que realmente dejen que continúen con este destino o para aprender más sobre él Vamos a diseñar. Volvamos a nuestros diseños aquí y por aquí. Así que definitivamente queremos configurar nuestras tarjetas como un componente porque vamos a estar usando muchas de ellas, y solo queremos hacer el cambio una vez si hay algún cambio que sea necesario. Entonces comencemos con la imagen, que estará dentro de un marco. Entonces voy a golpear F en el teclado y dibujar un marco aquí, pared sosteniendo turno, y tal vez el tamaño podría ser 180 por 180. Y si no puedes hacerlo bien, está bien. Simplemente déjalo ir mientras arrastras, y luego solo puedes cambiar el ancho y la altura aquí a 180 Ahí vamos. Voy a mover esto aquí solo para alinearlo. Y vamos a agregar un relleno de blanco para el marcador de posición aquí Pensándolo bien, tal vez podamos hacer que esta imagen sea un poco más grande, ya sea 200 o 220. Creo que 220 es bonito. Y la mayoría de las imágenes en realidad podrían no estar al cuadrado. Pueden ser de formato más rectangular. Así que realmente querríamos extender esta tarjeta a tal vez 366 por 220. Esta es una buena proporción que la mayoría de las imágenes pueden formar, que ronda los 4423 De hecho, tal vez podamos mantener el mando y tomar la altura 240. aquí, solo eliminaremos esto para que las proporciones no se vean restringidas entre sí, para que podamos cambiar esto fácilmente a 240. Ahí vamos. Entonces primero, dibujemos un marco para nuestra imagen. ¿Y por qué no usamos nuestra grilla para ayudarnos con eso? Entonces, encendamos nuestra grilla aquí. Haremos un par de cosas. En primer lugar, este insumo estaría bien para que coincida con la grilla, también. Entonces podemos llevarlo a esto. Por aquí. Y para el espaciamiento en el medio, hagamos 24. Y para este campo, reorganicemos el tamaño para que estén ocupando las cuadrículas aquí, las columnas Así que coincide con nuestra cuadrícula de diseño un poco más agradable. Y ahora para nuestras tarjetas de destino, hagamos una tarjeta de destino. En realidad, este campo es un poco demasiado largo. Hagámoslo un poco más corto. Apenas tres columnas es más que suficiente para escribir en una ciudad y ahora también dibujaremos un marco, y haremos una forma cuadrada aquí. 318 por 318, pero en realidad arrastraremos la altura a tal vez 210. Ahí vamos. Añadiremos un relleno blanco, y eso será para nuestras imágenes de tarjetas de destino. Va a la altura de la rejilla. Ahora para el radio de esquina, pongamos un radio de esquina de 16. Eso es lindo. Y queremos agregar un texto justo debajo de él y escribir ciudad país. Esto es solo información de marcador de posición. Vamos a colocarlo por aquí. Y ahora, no voy a usar Autoayout porque voy a mostrarte algo genial en caso de que termines no usando Entonces esto va a ser útil. Entonces, por ahora, lo que voy a hacer es que voy a crear la tarjeta sin el diseño automático en su lugar. Entonces colocaremos todo aquí primero. Entonces tenemos el nombre de la ciudad. Aquí voy a tener del otro lado, vamos a tener una calificación de 4.7. De hecho queremos que esto esté aquí. Podemos agregar el icono de estrella yendo a Iconos de fósforo. Busca estrella, agrega esto. Ahora arreglaremos los colores y la alineación en tan solo un segundo. Esta estrella no está dentro de nuestro marco aquí, creo. Queremos seleccionar el marco y asegurarnos de que esté dentro. Eso es todo y justo debajo de él, queremos tener un precio. Sólo pongamos $1,000 aquí. Y entonces tal vez en realidad podamos arrastrar una copia de este icono aquí usando Alt y arrastrar uno por aquí. Y justo al lado, agrega un texto, y escribamos siete días. Esta es la duración del viaje. ¿Y qué más tenemos? Tenemos un ícono de popularidad. Entonces en realidad, tal vez podamos mover esto al sitio para el ícono de popularidad, tal vez podamos crear una etiqueta más tarde para ello. Así que lo dejaremos fuera por sólo un segundo, y el marcador irá encima de la imagen. Entonces para esa, vamos a hacer una elipse. Entonces presioné O, y voy a dibujar un 32 por 32 por aquí, y voy a usar Alt para asegurarme de que el espaciado sea de diez píxeles de arriba y derecha. Usa iconos de fósforo para agregar un marcador. Icono aquí, colóquelo dentro de aquí, que actualmente no está dentro, así que voy a hacer doble clic para seleccionar este marco, pegarlo y luego usar Shift para hacer esto 16 por 16, solo centrarlo aquí. Nuevamente, aplicaremos los colores y todo después. Ahora por ahora, si quieres crear un diseño automático a partir de esto, si seleccionas todo este contenido y presionas Mayús A, tendrás un desastre, y eso no es lo que queremos. Lo que realmente podemos hacer es si terminas en una situación como esta en la que no has usado Autoyout, realidad puedes hacer clic derecho y hacer más opciones de diseño y sugerir el diseño automático Y como puede ver, Figma ha ideado marcos de diseño automático anidados uno dentro del otro, y le está mostrando que todos estos son marcos de diseño automático nuevos El único lugar donde no le fue tan bien fue este ícono de estrellas de clasificación. Entonces en realidad cambió las proporciones, pero no queremos que sea así. Así que haremos doble clic para asegurarnos de que nuestro ícono de estrella sea realmente cuadrado. Así que asegúrate de que sea de 20 por 20. De hecho, simplemente lo desagruparemos de su marco y nos aseguraremos de que esté alineado a la izquierda y al centro. Lo mismo para este. Entonces hay algún trabajo de retoque que debes hacer. Pero básicamente, Figmas siguió adelante y agregó un arte inteligente Adeod Muy chulo. Para este 4.7, podemos hacer contenidos de Hug. Lo mismo para esto. Aquí, y este parece estar bien, así que solo podemos dejar esa. Así que nuestro diseño automático está empezando a verse bien para nuestra tarjeta de componentes aquí. Realmente no hemos formateado esto correctamente, así que volvamos a la siguiente sectura para comenzar a darle algunos toques agradables a esto 42. Puliendo la UI de nuestra tarjeta: Voy a hacer algunas cosas para que esta tarjeta se vea bien antes comenzar a duplicarla realmente y llenar esta página con ella. Entonces, comenzando desde la parte superior, nuestro botón de marcador en realidad aquí debería ser un relleno blanco porque, nuevamente, una imagen irá aquí, así que queremos un fondo blanco para el botón de marcador. Y luego cambiaremos el color aquí para éste a 500 primarios. Ahora bien, esta elipse aquí, sé que en este momento se está fundiendo, así que podemos agregar un trazo que sea solo tal vez primaria 50 o primaria 100. Eso funciona. Aquí abajo para nuestra ciudad y país, podemos hacer cuerpo grande para crear un poco de jerarquía visual porque este es probablemente el detalle más importante junto con el precio. Ahora mismo, el espaciado entre estos dos es un poco demasiado, por lo que podemos reducirlo a ocho píxeles. Y el espaciamiento entre la información y la tarjeta no es realmente consistente. Entonces hagamos 16 píxeles. Ahora por aquí, tenemos algunos temas de alineación. Entonces este de aquí, parece que está en la parte inferior de este marco, mientras que en realidad debería estar en la parte superior. Entonces solo queremos cambiar esto para que esté alineado a la parte superior en su lugar. El espaciado entre esto es de seis píxeles. Se puede ir con ocho para ser consistente. Lo mismo con este de aquí. Solo queremos asegurarnos de que esto también esté en el contenido del abrazo. Voy a seleccionar estas dos piezas de texto y hacer texto 300. Para el icono de estrella, hagamos un color secundario 500. Ahora el precio podría ser texto 400, este icono de calendario también podría ser secundario 500. En realidad, no me gusta el texto aquí, así que tal vez podamos hacerlo un poco más oscuro, y este podría ser el texto 500. Sera te ves un poco mejor. De hecho creo que es mejor si solo tenemos uno de estos iconos como color secundario. Aquí es un poco demasiado naranja. Entonces en realidad, si quieres cambiar rápidamente el color aquí, solo podemos hacerlo en Link. Usa el cuentagotas, y luego si repasas cualquier color, digamos que queremos este color de texto aquí Al hacer clic, ya tomamos ese color de ahí. Podría ser un poco demasiado. ¿Por qué no reducimos el matiz a algún lugar por aquí? Eso se ve un poco más agradable. Y una bonita sombra podría ser agradable para esta imagen de aquí. Así que vamos a crear un efecto de una sombra paralela. Ahora esto es demasiado fuerte. Entonces lo que vamos a hacer es que vamos a aumentar un poco este radio de desenfoque hasta que tal vez sea intentar 20, no queremos que sea tan fuerte, así que haremos 8%. Creo que eso es bastante bueno. Y puede ser un poco más bajo. Así que en realidad podemos hacer una sombra paralela que son ocho para la Y. Así que esto ya se ve bastante bien. Todo lo que tenemos que hacer es rellenar esto con algunos datos de muestra, y será mucho más agradable Ahora para este de aquí, también queremos un espacio igual que este de aquí. Entonces vamos a hacer ocho píxeles o un hueco más bien. Pero el problema es que este marco aquí no tiene la misma altura que este, está creando algo de falta de brecha aquí o desalineación aquí Entonces tenemos dos opciones. Una es que en realidad podemos diseñar todo de forma automática y hacerlo horizontalmente en su lugar, o simplemente puede hacer una altura fija de 27 para esto, también. Entonces, si cambias esto a 27, también funciona. Ahí vamos. Volvamos a la siguiente ecture para reemplazar este texto de muestra con algún texto real. 43. Uso de IA en Figma para generar datos de muestra: Antes que nada, sigamos adelante y seleccionemos esta carta y golpeemos Altman K, conviértela en un componente y renombrémosla a través nuestro panel Capas aquí a la tarjeta Destino Y como probablemente lo adivinaste, vamos a moverlo afuera aquí, moverlo a nuestra sección de componentes cada vez mayor aquí Y luego copia uno aquí abajo. Voy a hacer diseñar estos dos juntos, y luego para el padre de aquí, vamos a hacer un espaciado de 40 píxeles. Ahí vamos. Por lo que tiene más espaciado desde la parte superior. Ahora bien, para esta, sigamos adelante y usemos algunos datos de muestra. Entonces, ¿por qué no abrimos chapoteo para darnos una imagen de la ciudad Empecemos por Nueva York. Sólo deja caer uno de ellos aquí. Entonces con el marco aquí seleccionado, hice clic en la imagen y la coloqué directamente en el marco Hermoso. Y luego haremos la ciudad de Nueva York. USA así. Haremos la calificación por ahora y dejaremos los siete días, y tal vez cambiemos el precio a algo así como $5,000 Entonces esto se ve bien. Y ahora, si quieres agregar otro, FIGMA seguirá colocándolos aquí abajo, así que ahí es donde necesitamos otro layout automático anidado Así que al seleccionar estas dos tarjetas de destino, pulsa Mayús A, y luego en lugar de disposición horizontal, que podrías hacer, vamos a hacer rap. Lo que hará el rap es que en realidad empujará cualquier tarjeta adicional a la siguiente fila. Ahora, solo para mostrarte, aquí vamos a hacer llenar contenedor para el ancho. Ahora bien, si hacemos horizontal, ¿qué pasará si seguimos duplicando nuestras tarjetas Seguirá yendo de esta manera. Y eso no es lo que queremos. Queremos que en realidad se derrame en la siguiente línea o la siguiente fila en nuestro diseño. Y entonces ahí es donde tenemos esta función de diseño automático de envoltura. Entonces ahora si seguimos duplicando, va a la siguiente fila, que es lo que queremos Ahora voy a deshacer eso y sólo tengo dos por ahora. Ahora para este neoyorquino, voy a cambiarlo a otra ciudad. Hagamos Estambul y reemplacemos este de aquí, o simplemente vayamos por otro aquí, este, haremos Item Turkey y cambiaremos el precio a t's say 3,000. Y en vez de siete días, hagamos cinco días. Y en vez de 4.7, hagamos 4.5. Dejaremos el espaciado como 24 píxeles entre ellos por ahora. Y en realidad podemos usar Figma AI para generar más contenido para nosotros. Queremos generar un montón más, pero en realidad no queremos escribirlos todos nosotros mismos. Podemos simplemente arrastrar este duplicado con nuevo contenido, y podría estropear el diseño automático solo un segundo. Y vamos a arrastrarlo hasta que tengamos algunos. Y como se puede ver, genera un montón de diferentes ciudades y países, un montón de diferentes precios, fechas, calificaciones, y así sucesivamente por sí mismo. Solo quiero seguir adelante y asegurarme de que esto llene contenedor y se derrama al siguiente Ahora lo único que no puede generar en este momento son las imágenes. Entonces todo lo que tenemos que hacer es encontrar estas ciudades en chapoteo y reemplazar las imágenes. Podemos hacer Londres. Haga doble clic en esta imagen , seleccione una, Tokio, seleccione una imagen, seleccione esta. Al ir a París, selecciona uno. Sidney y hasta el último de aquí. Hermoso. Y ahora tenemos algún contenido que generamos usando Fig MyI en tan solo minutos. Esto es maravilloso. Ahora mirando esto, el espaciado es un poco abrumador, así que tal vez en lugar de 24 píxeles, podamos hacer 32. Impresionante. Esto está empezando a verse muy bien. Ahora bien, este espaciado vertical también podría ser un poco más. Así que vamos a hacer 32 píxeles aquí. Impresionante. Esto está empezando a verse muy bien. Ahora, tenemos algunas cosas más que agregar aquí. Todavía no hemos agregado el ícono popular y el botón aquí, así que volvamos a la siguiente sectura para agregar esas dos partes también 44. Proporción de aspecto bloqueada: Entonces un problema que tenemos ahora mismo con las tarjetas y la forma en que lo tenemos configurado, ahora mismo, estas tienen un ancho fijo de 318 píxeles. En este caso. Digamos que por alguna razón, queremos ir con más de una forma cuadrada y queremos cambiar estos 250 píxeles. Lo que termina pasando es que la imagen pierde su relación de aspecto y se ve un poco diferente. Entonces sólo para demostrarlo, voy a ir por aquí. Tenemos la misma tarjeta por aquí. Como pueden ver, a medida que cambio el tamaño, la imagen también se redimensiona la imagen también se redimensiona Y eso normalmente no es lo que queremos en una maquetación como esta, en una tarjeta como esta. Y así el FicMA tiene una característica llamada relación de aspecto bloqueada, que nos permite bloquear la relación de aspecto de esta energía para que eso no suceda Ahora la forma de hacerlo, simplemente puede ir a su tarjeta de componentes, seleccionar el marco que contiene la imagen y luego elegir este icono de aquí, bloquear la relación de aspecto. Ahora bien, si volvemos a la instancia, hacemos lo mismo, ves que la imagen no está perdiendo su relación de aspecto, por lo que la imagen no está cambiando como lo era antes. Y así definitivamente lo recomiendo especialmente para los componentes que van a estar redimensionando tu proyecto para bloquear la relación de aspecto de la imagen, asegurándose de que el ancho y la altura siempre permanezcan intactos. 45. Diseño de etiquetas: Estaba viendo esto, me di cuenta de que en realidad no necesitamos un botón, como lo hicimos originalmente en nuestros wireframes porque las propias tarjetas pueden actuar como botones Entonces tenemos estas imágenes, y no necesariamente necesitamos que el usuario tenga un botón aquí, similar a lo que Figma hizo aquí con su versión Y es por eso que es genial usar estas funciones de AIA. Lo único de lo que no soy un gran admirador es el espaciado que aún está aquí. Se ve un poco demasiado abarrotada. Entonces, ¿por qué no tratamos de darle a nuestros diseños un poco más de espacio para respirar y probamos un espaciado de 48 píxeles entre las tarjetas? Sí, aquí no tenemos esa cuarta carta, pero creo que es muy importante nuestros diseños tengan este espacio. Por consistencia, sería bueno si también espaciamos nuestras entradas aquí para que coincidan con esto también. Impresionante. También queremos agregar una etiqueta para mostrar los artículos populares o los destinos populares. Y podemos hacerlo a través de una bonita etiqueta aquí con un icono. Entonces abramos íconos de fósforo y busquemos un ícono de fuego. Haga clic en uno. Este es lindo. Podemos agregarlo en nuestro marco aquí, y tal vez podamos agregar un título aquí, popular. Maquetación automática de estos dos juntos. Este todavía no está aquí dentro, así que queremos asegurarnos de que esté dentro. Y luego vamos a autolayo estos dos. El texto es demasiado grande, así que vamos con el tamaño negrita del pie de página, o en realidad, no necesitamos que sea negrita, incluso solo un pie de página es bueno. Y para mejorar los visuales, podemos traerlo en el lateral en el lado superior derecho o en el lado superior izquierdo aquí Ahora, ya ves que no se ve tan bien con los colores y encima de estas imágenes. Entonces sería bueno si este diseño automático también tuviera un relleno blanco y vamos a hacer que el radio súper alto para que sea completamente circular. Un poco de espaciado, tal vez dos píxeles o cuatro píxeles de los lados y la parte superior estaría bien. Y en realidad, ese espaciado es un poco demasiado pequeño, sobre todo horizontalmente. Entonces tal vez queremos hacer ocho horizontalmente. Y este icono aquí, vamos a redimensionarlo a 16 por 16 Cambiemos el icono a un bonito naranja. Y de hecho, en realidad podemos hacer un bonito degradado naranja. ¿Por qué no hacemos un gradiente aquí? Y para el primer color, vamos a hacer un bonito naranja aquí. Y el segundo color aquí, vamos a hacer un bonito tipo de naranja más oscuro. Esto se ve bien. Ahora aquí abajo, esto se ve mucho mejor. Y claro, no todos deberían tener el ícono popular. Solo lo necesitamos en s. Lo primero para el texto aquí, sigamos adelante y hagamos que sea texto 500 o texto 400 en realidad es mejor. Vamos a crear una propiedad booleana y llamarla Es popular. Por defecto, lo dejaremos a false, create property. Y luego seleccionaremos esta etiqueta aquí y ataremos la visibilidad a su popular. Ahora vamos a ir aquí y tal vez lo hagamos por uno de ellos. A lo mejor este londinense es popular. El de Tokio es popular. Y así ahora es más aleatorio. Esto está empezando a verse muy bien, y solo tenemos algunos elementos más para agregar. Nuestra tarjeta está bastante completa para nuestra página de descubrimiento de destinos. Nos falta un filtro en el botón de clasificación, y luego las colecciones por aquí. Te dejaré las colecciones para que las hagas como ejercicio ahora que ya hemos hecho el diseño de tu tarjeta. Entonces nuestras colecciones son básicamente sus grupos de diferentes destinos, por lo que pueden ser cosas como escapadas románticas o viajes divertidos o viajes de un mes de duración, cualquier categoría que se te ocurra Y si necesitas ayuda, definitivamente aprovecha Chat GPT ahí para obtener ideas para diferentes colecciones Entonces ese será un ejercicio para que lo hagas por tu cuenta. Voy a hacer una versión del mismo en mi propio archivo, y por supuesto, tendrás el enlace en caso que quieras echar un vistazo a cómo lo he hecho. Ahora ha vuelto a la siguiente salida para trabajar en los botones de filtro y ordenación 46. Uso de diseños de cuadrícula: Antes de pasar a nuestros botones de ordenación y filtros, quiero mostrarles algo recientemente nuevo que Figma anunció en 2025 config, y que son los diseños de cuadrícula Entonces, aunque aquí estamos usando AP en este momento para nuestro diseño automático en esta cuadrícula de resultados, realidad hay una nueva opción ahora llamada grid, y actualmente está en Btu, pero es un poco más flexible que el rap auto layout, que ahora está aquí cuando seleccionas la horizontal Entonces te voy a mostrar en sólo un segundo cómo se aplica esto. Ahora mismo, tenemos este contenedor wrap, y a medida que redimensionamos aquí, los elementos dentro redimensionan Pero si seguimos adelante y en realidad seleccionamos esta nueva opción de cuadrícula, ahora mismo, vemos que tenemos una cuadrícula de tres por dos, entonces tres columnas por dos filas. Puedes cambiar esto a tres por tres si quieres, y entonces así puedes tener más cartas. Desde aquí, se puede cambiar el margen de izquierda y derecha para la cuadrícula desde la parte superior e inferior, y aquí es donde se puede elegir el hueco entre las columnas de la cuadrícula y de manera similar con las filas de la cuadrícula. Va a dejar eso como los 48 pixeles para ambos. Y ahora, cuando acerques el zoom, verás que tienes estas opciones aquí. De hecho, puedes mover tarjetas a diferentes ubicaciones, por lo que no necesariamente tienes que seguir la convención de la envoltura Y así de esta manera, si tienes esta tarjeta por aquí que he diseñado, si la traigo por aquí y la pego, automáticamente, toma el lugar de una grilla, y puedo moverla para decidir dónde quiero que esté. Ahora bien, si quiero expandir eso, puedo mover esta tarjeta aquí a esta caja y luego expandirla a través. Y ahora se expande a través dos columnas, como se ve aquí. Y por defecto, mis columnas tienen todas un ancho automático, lo que significa que llenará o ocupará tanto espacio como pueda. Pero también puedes hacer uno personalizado. Entonces puedes establecer esto en 200 píxeles. Y ahora esta columna solo será de 200 píxeles, pero necesitarás ir individualmente y asegurarte de que cada carta esté en un contenedor de llenado para que se aplique correctamente. Pero claro, en un caso como este, no nos gustaría eso. Entonces, si regresas aquí y eliminas este número, automáticamente volverá a Auto. Y así de esta manera, podrás jugar con tu diseño y tener diferentes ubicaciones, y eso te da más flexibilidad para elegir dónde quieres que estén tus elementos Así que siéntete libre de usar un experimento con cuadrículas medida que avanzas en el curso Tendré una copia de mi pantalla de destino en las maquetas por si quieres echarle un vistazo más de cerca 47. Botones de clasificación de filtro: Ahora queremos agregar un botón de filtro y ordenar y luego un texto adicional para mostrar cuántos resultados está viendo el usuario. Entonces vamos a seguir adelante y agregar un texto aquí entre las entradas y los resultados, y vamos a escribir el número de resultados. Solo como ejemplo, escribamos 42 resultados. Cambia esto a cuerpo y cambia el color del texto a texto 300. Y ahora en la misma línea, vamos a agregar algunos botones de filtro y ordenar. Ahora voy a seguir adelante y arrastrar una copia de este botón aquí abajo y auto layout estos dos usando Shift A, hacer layout horizontal. Ahora bien, este contenedor padre está un poco apagado. Así que vamos a seguir adelante y en realidad solo usar este contenido, así que cabe tres tarjetas con el espaciado que tenemos. Así que de esta manera, lo que podemos hacer es que en realidad podemos seguir adelante y usar relleno aquí y usar un espaciado automático. Y para este botón, vamos a llenar contenedores. Entonces está ocupando todo el espacio aquí. Esta búsqueda, queremos realmente cambiarlo a tal vez un tipo secundario de botón y cambiarlo para ordenarlo por relevancia. Por supuesto, pueden hacer click para cambiarlo. Y haremos otro y haremos un diseño automático entre estos dos con un espaciado de 16 píxeles y abrazar contenido. Para el espaciado, vamos a golpearlo hasta 24, y este serán filtros. Sería bueno tener algunos íconos junto a estos botones. Entonces vamos a hacer algo similar con nuestro botón donde también le agregamos íconos. Pero primero, vamos a encontrar dos iconos, 14 Ordenar, 14 filtrar usando iconos de fósforo Buscaremos SRT. Este es lindo. Nosotros haremos filtro. Este es lindo. Ambos están aquí, pulsa Comando K en ambos, relámbalos filtro de icono Y este va a ser icono slash Lo siento, este en realidad es filtro, y este va a ser whoops Esta va a ser espadas. Parece que en realidad no están dentro de nuestra sección aquí. Queremos traerlos y realmente hacer 20 píxeles por 20 píxeles para el tamaño, cambiarlo a 500 primario para el color. Y ahora sigamos adelante y traemos a uno de ellos aquí. Ahora para este, queremos cambiarlo a color blanco en su lugar, ya que está en un botón azul y pegarlo aquí, y para este, vamos a hacer reset todos los cambios, así que vuelve al mismo color que aquí. Y vamos a agregar una propiedad booleana, mostrar el icono de la izquierda, y convertirlo Ahora, seleccionando a ambos así, vamos a seguir adelante y atar la visibilidad para mostrar el icono de la izquierda. Y una cosa más, en realidad, antes de hacer eso, también vamos a hacer una nueva propiedad llamada instance swap, vamos a llamarla icon. Y para la instancia, vamos a escoger icono y ordenar uno, crear propiedad, y atar estas propiedades appliance e intercambiar a icono y atar la visibilidad al icono de Showleft Así que ahora podemos bajar aquí. Seleccione ambos, muestre el icono de la izquierda en ellos. Ahora uno de ellos será especie. El otro será filtro. Ahí vamos. Impresionante. Entonces ya tenemos estos botones. Permiten al usuario filtrar los resultados. Y en realidad, un cuerpo grande podría verse un poco mejor aquí para los resultados, y está empezando a verse mucho mejor. Vamos a diseñar automáticamente estos dos y en realidad aumentemos un poco más el espaciado entre ellos, tal vez 40 píxeles. Creo que eso es más agradable. Entonces, ¿qué pasaría si hacen clic ordenados o filtros Podemos abrir los menús aquí para mostrarles las diferentes opciones, el hecho de que pueden ordenar por popularidad, precio o las opciones de filtro, cómo pueden elegir presupuesto, duración, etcétera, así sucesivamente O podemos abrir un contenedor de motor que es una caja de motor en la parte superior. Y porque para nuestro filtro y tipo, es más básico, creo que un desplegable va a estar bien Entonces, cuando no volvemos en la siguiente conferencia para diseñar esos menús desplegable para ver cómo se vería si alguien hace clic en estos filtros o los ordena por botón. 48. Diseño desplegable: Diseña nuestros menús para algunos lugares, en realidad. Podemos usar este desplegable no solo para los ordenados por los filtros. Incluso podemos usarlo para el menú desplegable aquí si hacen clic en su foto de perfil y hablando de foto de perfil, por lo que diseñaremos un desplegable genérico que podamos ajustar y hacer cambios o crear múltiples variantes de para En términos de las opciones aquí, anotamos para que las opciones de clasificación sean popularidad por precio y por calificaciones. Entonces podemos tener esos como las opciones y el menú desplegable, y luego tenemos presupuesto para filtro, duración, tipo de experiencia y clima volver a nuestros diseños. Lo que queremos hacer es crear un desplegable y podemos crear uno en el lienzo aquí y luego empezar a moverlo ahí abajo, solo para ver cómo se vería. Lo primero que quiero hacer es presionar T para iniciar un texto y escribir, y haremos el tipo de bif Entonces vamos a hacer relevancia. Y luego presionaré el turno A para hacer una maquetación. Cambia el relleno a blanco y cambia este color de texto o texto 500. Ahora, en un diseño automático, siempre puedes crear un ancho fijo si quieres. Entonces, lo que eso significa es que en realidad puedes arrastrar el ancho aquí o el alto y hacer un ancho especificado. Entonces para algo como desplegable donde conocemos un ancho específico que queremos que sea nuestro desplegable, solo traigo esto aquí solo para mostrarte en relación. Eso sigue siendo un poco pequeño. Podría ser un poco más grande. O incluso podemos hacerlo del tamaño de este botón aquí, que es 245. Y entonces lo que queremos hacer es que queremos aplicar un cuerpo textil aquí. Entonces cuando tienes un ancho fijo aquí para el diseño automático, si el contenido se alarga, no cambia el ancho, como ves. El ancho siempre permanece igual. Pero podrías cambiar el contenido de tu abrazo para que el texto llene el contenedor. Y así de esta manera, si hay algún texto extra, se derramará horizontalmente hacia afuera así Voy a ir a la siguiente línea en lugar de salir de la caja o del contenedor. Más bien. Entonces pondremos relevancia aquí, y luego queremos una pequeña marca de verificación para indicar que actualmente la relevancia está seleccionada para el ordenado por. Voy a abrir íconos de fósforo, agarrar un cheque y aquí y se pega ahí, hermoso Es un poco demasiado grande. Entonces usaremos una herramienta de escala, que acabo de presionar K en el teclado. A veces es mejor usar la herramienta de escala para volver a escalar en caso de que un trazo u otras cosas puedan ser demasiado delgadas si usas una herramienta de movimiento simple. Entonces escribamos 16 por 16. Creo que eso es bastante bueno. Y podemos aplicar incluso el color 500 primario. Y sólo para demostrar que éste es el seleccionado, podemos cambiar éste a body bold, de hecho. Este es ahora el tipo. Podemos aplicar un estilo similar desde este botón hasta aquí. Y si realmente quieres copiar un estilo de este botón y pegarlo por aquí, todo lo que necesitas hacer selecciona tu botón, Alt Command C o Alt Control C, y por aquí, Alt Control o Alt Command V. Pero lo único que sucederá es que todas las propiedades se pegarán Así que ahora volvemos a los contenidos de HC contraposición a una altura o anchura fija. Así que sólo podemos escribir 245 aquí. Vaya, 45, y eso se aplica antes. Ahora bien, el relleno aquí o los márgenes izquierdo y derecho son 24. Creo que podemos bajar eso a 16. Y haremos de estos dos su propio diseño automático usando Shift A. Así que ahora tenemos el diseño automático. Y vamos a golpear al Comando D para duplicarlo. Pero en lugar de una disposición horizontal, queremos una vertical, por lo que tenemos diferentes opciones que el usuario puede seleccionar. Y obviamente, en realidad queremos deshacernos de la marca de verificación O puedes deshacerte de él o simplemente puedes ocultarlo. Para ocultar, comando Mayús H o de nuevo, puede hacer clic en el icono de aquí. Entonces de esta manera, puedes volver a encenderlo si quieres mostrar que se selecciona la relevancia, o se selecciona otra opción, y esta ya no está en negrita, y cambiaremos esta a distancia. O en realidad, queremos popularidad. Y luego vamos a duplicar este diseño automático por precio. Y especificaremos de bajo a alto, y luego duplicaremos ese uno más y especificaremos de alto a bajo para que el usuario obtenga una opción de mostrar de mayor a menor o menor a mayor para el precio, y luego tal vez también por calificaciones. Entonces esto se ve bien. Una cosa más que podemos hacer por nuestro menú desplegable de aquí para que se vea un poco mejor visualmente es que podemos aumentar la brecha entre las diferentes opciones, lo cual es genial, pero también podemos agregar una línea divisoria entre ellas. Ahora, ya creamos una línea divisoria aquí, en realidad. Así que voy a mantener Comando para seleccionarlo y simplemente copiarlo de nuestra página de inicio de sesión directamente en nuestro menú desplegable. Lo bueno es que si lo pegas, todo lo que necesitas hacer es cambiar el ancho para llenar el contenedor, y puedes moverlo hacia arriba y hacia abajo. Y todo lo que necesitas hacer para duplicar esto rápidamente entre cada elemento, solo presiona Comando D para duplicarlo y flecha hacia abajo. D, Comando D, flecha abajo, comando D, flecha abajo. Entonces ahora tenemos esta línea entre diferentes ítems para crear un mejor tipo visual de separación entre ellos. Ahora, estoy manteniendo comando y turno para seleccionarlos todos juntos. Creo que este color es un poco demasiado fuerte. Entonces quizás podamos desvincularlo de nuestros textiles y crear una versión más ligera de eso Creo que esto es lindo. Alternativamente, también puedes hacer Primaria 50. Ambas son buenas opciones. Lo dejaré en primaria 50, en realidad. El caso es que si lo traes aquí, va a entrar en el diseño automático y estropearlo todo. Si quieres ver cómo se vería encima del tipo, realidad solo puedes hacer dos cosas. O bien puedes usar shift y flecha derecha o flecha izquierda aquí para llevarlo al marco manualmente sin arrastrarlo accidentamente dentro de un marco de diseño automático u otra Si está dentro de aquí, cualquier marco de diseño automático, en realidad puede hacer clic en este botón que dice Ignorar Autoayout y este elemento específico en realidad ignorará el diseño automático Puedes moverlo donde quieras y no interactuará con las reglas de diseño automático. Queremos espaciar esto un poco, y solo estamos mostrando cómo se vería esto cuando esté abierto. Y si bien es agradable, lo único que esto podría usar es una separación entre el fondo y el primer plano Deberíamos mostrar que este desplegable está abierto o en estado abierto. Entonces lo que podríamos hacer aquí es que podemos crear una sombra más fuerte para mostrar eso, así podemos agregar un efecto por defecto, el efecto es sombra caída, que es lo que queremos, y queremos aplicar una sombra que tenga Y ligeramente más alta, así es más verticalmente hacia abajo como puedes ver aquí, y podemos aumentar el desenfoque para probar 16 o incluso 24. Prueba 30 aquí. Eso es mejor. Y por la opacidad, siempre me gusta ponerla un poco más baja No queremos que sea tan visible. Entonces esa es una buena. Se puede ver claramente que está separado del fondo. Así que eso es lindo. Está abierto. Y entonces si siguen adelante y click en una opción aquí o en cualquier otro lugar de la pantalla, este desplegable se cerrará. Entonces, para elementos como este, donde quieres mostrar a, digamos, un desarrollador que va a trabajar en esto, lo que me gusta hacer es realmente colocar este desplegable fuera de mis diseños, darle un nombre, para que podamos hacer sort dropdown y siempre puedes usar la función de comentario Entonces, si pulsas C en tu teclado, puedes dejar comentarios para otras personas. Puede etiquetar a su desarrollador y escribir que esta es la opción desplegable para ordenar. Esa es una manera de hacerlo. Otra forma es usar DevMo para dejar anotaciones Vamos a tocar eso en futuras conferencias, así que no voy a meterme en ello ahora mismo. Entonces con eso, también está la opción de filtro o el menú desplegable de filtros. Voy a dejar esa como una tarea para que la hagas. Y nuevamente, siempre tendrás acceso a mi expediente por si quieres ver cómo lo he hecho. Y una vez que hayas terminado con eso, volvamos en la siguiente conferencia para comenzar en nuestra página siguiente, que será la página de descripción o la página de reserva, como quieras llamarla. Esta es la página que en realidad está justo después de esta página. Entonces, una vez que un usuario, digamos, haga clic en Londres Reino Unido, se le llevará a la descripción de este artículo o nuevamente, el nombre no es realmente importante. Lo que importa es que se trata de una pantalla de reservas. Es un lugar donde pueden ver más información sobre esta página. Esta es la página en la que también hicimos el wireframe de aquí Tengo un wireframe aquí donde he resaltado los diferentes elementos de esta página Así que vamos a echar un vistazo más de cerca a eso y luego otra vez, estilo similar, comenzar nuestro camino desde arriba, ir a la parte inferior, y conseguir el diseño. 49. Página de detalles del viaje: En nuestra página de detalles del viaje. Olvidé que así es como lo llamaré por ahora. Y mi diseño está por aquí. Voy a deshacerme de este primer borrador generado por IA. Y echemos un vistazo a nuestros wireframes para ver qué tenemos en este diseño Entonces desde arriba, tenemos una barra de navegación que ya diseñamos. Queremos tener un botón de retroceso para que los usuarios puedan volver fácilmente a la página de búsqueda o a la página de descubrimiento de destino. Queremos el nombre del destino. Tan similar a lo que tenemos en la tarjeta, la ciudad y el país, solo lo estamos llamando ciudad y país, pero podrían tener nombres más interesantes. Y tal vez vamos a explorar eso en un poco usando Figma AI también Pero antes de sumergirnos profundamente en eso, tenemos nuestra calificación de inicio aquí. Tenemos el ícono de popularidad o la etiqueta, así como el marcador o el botón Guardar. Así que puedes marcar este viaje si quieres verlo más tarde. Algunas imágenes en este sitio, por lo que podemos incluir la imagen del viaje. Entonces ahora mismo, solo tenemos una imagen de la ciudad. Pero puedes imaginar en algunas situaciones este viaje de quien sea que haya sido creado podría tener múltiples imágenes de tal vez personas divirtiéndose en este viaje y así sucesivamente y así sucesivamente. Tal vez sean imágenes generadas por el usuario. Te lo dejaré a ti si quieres experimentar con algo fuera de lo que he diseñado o he bosquejado aquí arriba El objetivo de esto no es conseguirlo exactamente como lo estoy haciendo, sino también incluir tu propia creatividad. Así que siéntete libre de tomar esto en cualquier dirección que creas que es útil. Entonces justo debajo de él, queremos un llamado a la acción para que ellos seleccionen una habitación. Entonces, el siguiente paso para que elijan este viaje es seleccionar una habitación en la que van a estar durmiendo. Y aquí mismo, tenemos algunos iconos de las amenidades que se incluyen en ese destino o en ese nuevamente, paquete de viaje. Entonces, qué está incluido, y podemos tener estos en formato de icono y tal. Entonces tenemos nuestro alojamiento. Entonces estas son tarjetas para ver los diferentes tipos de habitaciones y el precio por noche. Con la opción de filtrar o ver las fechas que ya han aplicado desde esta página. Entonces, si ya aplicaron algunas fechas de y dos, podría aparecer aquí. De lo contrario, podrían ingresarlo, así como el número de viajeros, lo que podría afectar el precio que pagan. Y si entran algunas fechas, te imaginas que en realidad podemos cambiar este precio por noche al precio total que les costará este viaje. Entonces esa sería una interesante de explorar. Justo debajo de ellos hay opciones para reservar, por lo que incluso podemos colocar este precio total en la opción de libro aquí. Y luego tenemos algunas calificaciones. Por lo que tenemos diferentes tarjetas de calificación o testimonio o tarjetas de calificación que podemos diseñar, así como algunos destinos similares Entonces esto podría ser similar a las tarjetas de destino que ya diseñamos. Podrían ser otras opciones que podrían estar considerando. Esto tiene una buena cantidad de contenido dentro de esta página de detalles. Me pareció agradable incluir lo que sea que el usuario necesite en ese momento. Si te pones en el zapato del usuario y estás pasando por una página de reservas, cuáles son las cosas que te estás preguntando y sería bueno incluirlas y asegurarte de que incluyas aquí. Entonces estos son los que pensé que tendrían sentido aquí. Y el objetivo es que una vez que hagan clic en Reservar, vayan a la página de reservas desde donde puedan rellenar el resto de sus datos personales, datos pago, así que agregue una tarjeta para el pago. Podemos tener algunas opciones adicionales aquí para el viaje, como seguros, cosas diferentes. Tal vez como un alquiler de autos, etcétera, etcétera, y luego un botón para completar la reserva Y al lado tenemos un resumen de lo que están reservando. Entonces vamos a pasar por esta página, claro, más adelante. Por ahora, centrémonos en la página que estamos diseñando. Similar a la página de descubrimiento de destinos, vamos a desglosar esto paso a paso. Primero, vamos a centrarnos en esta parte superior o en el tipo de sección de héroe de esta página de detalles específica. Entonces vamos a incluir la información básica, alguna descripción aquí y un botón para seleccionar habitación, junto con estos iconos aquí y las imágenes. Entonces comencemos con eso y todo lo demás por debajo de él. Volveremos a trabajar en ello en las siguientes conferencias. Entonces, si estás listo, entremos y empecemos a diseñar. Esta es una página emocionante. 50. Diseño de encabezados de viaje: Bien, así que vamos a armar esta parte superior de nuestra página de detalles de destino Lo primero es lo primero, vamos a duplicar este marco aquí usando Alt. Podemos dejar aquí el Navbar, pero podemos deshacernos de este contenido por aquí Sigamos adelante y comencemos con un texto. Y esto será para nuestro botón Atrás. Volveremos a escribir. También puedes escribir nuevo a todos los destinos que realmente depende de ti. Es agradable decirle al usuario a dónde irá exactamente si hace clic aquí. Queremos que este esté a 32 píxeles de arriba, creo, y hagamos 48 píxeles de la izquierda. Entonces es agradable e incluso con nuestra grilla. Yo sí quiero incluir un pequeño icono o Chevron aquí. Entonces, vamos a aparecer en fósforo y busquemos Chevron, aquí hay uno bonito que puedes usar Voy a seleccionar los dos juntos y presionar Mayús A, pero hacer uno horizontal. Hermoso. Ahora el problema es que, en lugar de ancho fijo, queremos un abrazo contenido. Eso es mucho mejor. Creo que el espaciado está bien aquí porque el icono en sí ya tiene algo de relleno, así que realmente no necesitamos espaciarlos. Pero si usas un ícono que necesita estar espaciado, siempre puedes ajustar la brecha aquí entre tu Chevron Lo haces como cuatro pixeles aquí, incluso. Y luego queremos seleccionar dejó una línea, pero en el medio. Entonces verticalmente, no está en la parte superior, no está en la parte inferior. Está justo en el medio. Y para el color de selección, que de nuevo, en un caso como este donde tenemos tanto un Chevron como un texto, significa que estamos cambiando el texto o el color de ambos Podemos configurarlo en texto 400 o incluso texto 300. Entonces es un botón sutil que no necesita ser muy a la cara u obvio, siempre y cuando haga el trabajo aquí, lo cual creo que sí. Ahí está nuestro botón de retroceso. Queremos nombre del destino, ciudad país, calificación, popularidad y guardar, y también la imagen aquí. Entonces comencemos con la imagen porque simplemente podemos copiar una de estas imágenes. Trabajemos en el de Londres Reino Unido. Entonces estoy haciendo doble clic hasta que tenga este marco con una imagen en él, golpeando el Comando C en mi teclado, volviendo aquí, seleccionando nuestro marco y golpeando el Comando V para pegarlo. Solo asegurándonos de que nuestra alineación aquí esté en el punto. Ahora una cosa aquí es que he pegado en el marco, que también tiene esta etiqueta popular en el icono de marcador, pero no queremos estos exactamente aquí Voy a golpear al Comando G para crear un grupo para estos dos. Así que agrupar las cosas te permitirá moverlas fácilmente y también sacar esta etiqueta del camino, también. Tendremos estos a un lado, lo que necesitaremos en solo un segundo. Este se ve bien, excepto que podemos tenerlo un poco más grande. Aquí es donde nuestra grilla sería de gran ayuda. Entonces, al etiquetar nuestra cuadrícula, podemos ver exactamente dónde sería un buen lugar para expandir nuestra imagen también. Y creo que aquí mismo, hacerse cargo de cuatro columnas es perfecto. En realidad tenemos cinco columnas. Creo que es una buena división entre cinco columnas y siete para el resto de la información aquí. Alternativamente podrías hacer cuatro aquí también, pero creo que las imágenes son importantes y deberían ser lo suficientemente grandes como para verlas aquí. Para estos pequeños de aquí abajo, podemos por ahora simplemente duplicar este de aquí y hacer uno más pequeño. Y estoy sosteniendo turno para mantener la restricción a las proporciones. De lo contrario, tu marco irá por todo el lugar. Así que asegúrate de mantener el turno si quieres la misma proporción entre tu ancho y alto. Y una cosa es que, como estoy encogiendo esto, ves que el radio del borde o el radio de la esquina no está cambiando, así que parece un poco extraño porque es demasiado redondo aquí Así que vamos a ajustar eso en sólo un segundo. Si habilitamos nuestra grilla una vez más, creo que aquí se pueden hacer algunos ajustes para que antes que nada, esto se vea bien y cada una de estas pequeñas imágenes podría ser propia cuadrícula. Entonces ahora podemos duplicar uno, colocarlos aquí. Te voy a autolayou juntos, y luego duplicarlo un par de veces más hasta que tengamos cinco aquí Ahora, con un diseño automático seleccionado, si quieres hacer cambios rápidos todos los elementos al mismo tiempo, una vez que tengas seleccionado el diseño automático, si presionas Enter, seguirás adelante y seleccionarás cada pequeña cosa debajo de ella o dentro de ella. Por lo que ahora podemos hacer rápidamente un cambio y hacer esto de ocho píxeles para el radio de la esquina. Veamos cómo se ve eso. Bien, se ve decente. Por supuesto, necesitamos algunas imágenes diferentes ahí dentro, y tal vez algún borde a algún trazo sería bueno tener para ellos. Voy a seleccionar este , crear un trazo, y usar secundario 200 se ve bien, y voy a aplicar un trazo para estos también, de secundario 200 Luce bien. Ahora necesitamos agregar nuestras etiquetas aquí. Entonces comencemos con las etiquetas por ahora. Nombre del destino. Y haremos una H dos o tal vez un poco demasiado grande, así que una H tres podría ser buena. Aquí, el secundario 900 como el color de la fuente, habilitando de nuevo a nuestra cuadrícula para simplemente ver dónde podemos colocar esta. Ahora bien, para el espaciado aquí entre estos dos, hagamos 40 píxeles o incluso podemos hacer 48. Entonces tenemos nuestro nombre de destino. Queremos ciudad y país. Entonces voy a seguir adelante y simplemente copiar la ciudad y país de aquí y para aquí, no hace falta que hagas todo dos veces. Nosotros haremos la lectura. De hecho, voy a copiarlo con el icono aquí dentro. Tenemos la etiqueta de popularidad aquí y este ícono de marcador. Entonces están todos juntos en este momento, pero claro, deberíamos autodiseñarlos juntos para mantenerlos igualados. Este debería ser contenido. Y por alguna razón, esta está ignorando el autolayout. Así que queremos que todos ellos no ignoren el diseño automático. Pero claro, el espaciamiento entre ellos es muy poco. Vamos a cambiar eso a tal vez 32 píxeles o incluso 48 píxeles. 32 píxeles o incluso 40 píxeles. Espaciarlos a 16 píxeles de aquí. Maquetación automática. Agreguemos otra capa de texto aquí. Este es un texto descriptivo. Doblaremos esto más tarde. Ahora, si quieres un cuadro de texto que sea fijo, siempre puedes cambiar tu cuadro de texto de un ancho automático a un tamaño fijo. Entonces, si hago esto arreglado, lo que va a pasar es que el texto se derramará automáticamente en la siguiente línea hasta aquí. Y debido a que tiene una altura fija, toma auto wrap desde el ancho aquí. Entonces así es como se vería, o puedes elegir un ancho más ancho o mayor. Y luego queremos botón desde nuestros activos locales, vamos a probarlo botón aquí para así que ahora mismo dice seleccionar una habitación. Podemos cambiarlo para ver la disponibilidad en su lugar. Creo que suena mejor. Ahora bien, este no está incluido en nuestro diseño de salida, así que queremos incluirlo en este también. Entonces este en realidad queremos hacer contenidos calientes, así que se encoge y crece con el contenedor, y queremos este en lugar de un fijo con a también contenido caliente Entonces en este momento, esta capa de texto es lo que mantiene el límite del diseño automático padre. Pero el espaciado entre todo es un poco demasiado apretado, así que podemos cambiar eso si lo cambiamos a 40, entonces es demasiado entre estos, así que podemos diseñar automáticamente estos por separado y hacer 24, y el resto se ve bien. Voy a cambiar este a realmente 16 píxeles para la brecha. Y vamos a fijar la altura para ésta. Y lo que vamos a hacer es que lo vamos a traer para que esté en línea con esta imagen de aquí. Creo que eso se vería mejor. Y para el texto en sí, vamos a hacer llenar contenedor que se envuelva por aquí. Si el texto es demasiado largo, no queremos empujar demasiado todo hacia abajo. Entonces lo que haremos es ir a hacer clic en la configuración de tipo aquí y truncar el texto Entonces, si el texto es demasiado largo, se truncará así Esto se ve mejor. Y si nos lleva demasiado tiempo, siempre podemos tener un botón ver más o leer más justo debajo de él. No voy a agregar eso aquí, pero siempre puedes agregarlo. Impresionante. No tenemos los artículos o iconos incluidos aquí. Volveremos a la siguiente sectura para juntarlos, así como algunos contenidos de muestra para nuestra página 51. Uso de herramientas de escritura con IA en Figma: Así que FigMA AI en realidad nos da muchas herramientas de escritura, y en realidad podemos hacer que el contenido sea mucho mejor usando solo IA, y ya no necesitas salir de FigMA. Simplemente puedes hacerlo justo aquí dentro. Entonces, ¿por qué no echamos un vistazo a lo que puede hacer por nosotros dirigiéndose a nuestro menú de acción Y entonces si vas a iffing y a escribir, ves algunas opciones Puedes pedirle a Figma que reescriba algo, acorte algo o traduzca a Ahora, ahora mismo, quiero realmente reescribir este nombre de destino para un nombre mejor Entonces, ¿por qué no le pedimos que se le ocurra un nombre de viaje que sea emocionante y corto para viajar en digamos Londres Reino Unido Veamos qué se le ocurre. Acabas de darle a Enter, y luego bien, ese es otro. Y si no te gusta, puedes pedirle que haga cambios. Puedes pedirlo para que sea más corto o más casual. Pidamos más casual. Bien, eso es un poco demasiado largo. Hacer los cambios más cortos. Esto no me gusta del todo. Quiero ver reescribirlo con una actividad específica que es popular para hacer en Londres y que sea breve. A ver. Bien, eso es interesante. Puede hacer uno más corto. Voy a decir que lo hagan adelante. Y mira lo que hace. Bien, podemos ir con esto. Puedes seguir pidiéndote que hagas cambios, y puedes, por supuesto, dar un paso y hacer tus propios cambios también. Creo que este es agradable y podemos pedirlo y podemos reescribir el texto de descripción reemplazarlo con una descripción de cómo un viaje de una semana en Londres Reino Unido podría ser un viaje de una semana en Londres Reino Unido para un viajero que busca reservar este viaje Veamos qué se le ocurre aquí. Impresionante. Creo que esto es bastante bueno por ahora, mucho mejor que el texto original. Y en lugar de un tamaño de pie de página, hagamos que sea un tamaño de cuerpo. Y voy a traer la altura aquí a por aquí. Entonces, en realidad, nuestro botón de ver disponibilidad coincide con el fondo de esto aquí y voy a sumar ordenadamente estos dos juntos y estos también juntos Mucho mejor. Volvamos en la siguiente conferencia para armar los íconos lo que se incluye en términos de las comodidades, y luego continuemos a nuestra sección de alojamiento. 52. Lista de características: Entonces, para esta siguiente parte de la página de detalles del destino, queremos agregar algunos iconos aquí que muestran las amenidades que se incluyen como parte del destino o este viaje que van a realizar. Y solo echando un vistazo atrás aquí, podemos agregarlo justo debajo de nuestras imágenes aquí. Por cierto, también he seguido adelante y agregué algunas imágenes del enchufe en Unsplash Si no lo has hecho por las diferentes imágenes de aquí abajo, también puedes tomarte un segundo para hacerlo. Ahora bien, para el título de esta sección, podemos simplemente llamarlo Qué se incluye y luego tener algunos íconos y tal vez con algún texto para explicar qué significan esos. Entonces voy a seguir adelante y agregar una nueva capa de texto aquí, lo que está incluido. Y para el tipo, quiero hacer estamos en un seis es lindo. Voy a traer esto justo por aquí, espaciarlo 48 pixeles de arriba aquí. Y ahora antes poner esto en un marco de diseño exterior con el resto del contenido aquí, voy a primero que nada, negrita en este de aquí, negrita en este de aquí, así que le pegué al Comando B aquí. Y luego para los iconos, voy a usar los iconos de fósforo enchufar aquí para arrastrar algunos íconos Entonces algunas cosas sobre las que podemos escribir es y voy a agregar solo un montón de íconos. Siéntete libre de seguirlo si quieres. Voy a agregar icono de natación, y ahora mismo está pasando en mi marco. lo puedo ver del todo, pero voy a llegar a él en sólo un segundo. Haremos una toalla aquí. Lo sé. Así que los íconos justo por aquí. Voy a simplemente arrastrarlo justo abajo aquí para que podamos verlo. Vamos a hacer uno de café para que podamos ver si hay café incluido en este viaje o máquina de café. mejor vamos a hacer uno para el desayuno, o en realidad, en realidad no tenemos uno, así que tal vez tenedor. Bien, este funciona. Si podemos decir que el desayuno está incluido o no. Haremos una campana. Sólo para mostrar si hay conciage, tal vez 247 conciage o algo así Si buscamos ayuda, tenemos esta aquí así que solo podemos decir que tenemos 247 apoyos o algo así incluido. A ver. ¿Qué más podemos poner aquí? Probablemente quiera mencionar el WiFi. Esa es una importante. Creo que estos son buenos para empezar por ahora. Entonces para estos iconos, se pega como un SVG, lo que significa que podemos redimensionarlos y reformatearlos fácilmente y no van a perder su calidad, así que eso es bueno Simplemente voy a seleccionarlos todos juntos así y darle a Autoaout o Shift A. Es mucho más ordenado. Y entonces voy a hacer exactamente lo mismo con este título Qué incluye. Los iconos pueden ser un poco más grandes. Entonces lo que podemos hacer es que podemos clic en este Autoeuframe que acabamos de crear, presionar Enter para seleccionar todos los componentes hijos del mismo Y voy a golpear K para acceder a nuestra herramienta de habilidad, y tenemos aquí el ancho y alto que podemos establecer para estos iconos. Entonces voy a probar 32 por 32. Eso es un poco mejor. Pero queremos asegurarnos de que esto esté en el contenido del abrazo en su lugar. Lo mismo con este. Los iconos están un poco demasiado oscuros en estos momentos. Voy a golpear a Escape para salir de esa herramienta de escala. Agrega un poco más de espaciado aquí, tal vez 16 píxeles. Para esto, lo que está incluido, tal vez podamos hacer un 900 secundario. Para los iconos, voy a hacer un color gris personalizado algo en algún lugar por aquí donde no sea demasiado audaz o demasiado fuerte. A mí me gusta ese de aquí. Creo que va a estar bien si agregas algunos títulos justo al lado estos íconos para que sepan lo que significa. Así que voy a escribir uno y hacer pull y luego hacer tal vez un tamaño de pie de página o incluso este tamaño de cuerpo funciona. Ahora, voy a incluirlo en este diseño automático, y luego voy a maquetar automáticamente estos dos juntos, acercarlos, tal vez con ocho píxeles de distancia. Voy a repetir eso para todos los íconos. Así que siéntete libre de hacer eso, también. Cafetera, desayuno. Auto disponer estos dos, ocho píxeles, pluma seage Whoops No puedo deletrear. Ahí vamos. Ocho píxeles. 247 de soporte. Ocho pixeles, y después escribiremos Wi Fi o haremos alta velocidad. Wi Fi, trae eso aquí. Voy a exponer estos dos y ocho píxeles. Ahora, es un poco demasiado largo. No quiero que sea tan largo. Creo que podemos hacerlo más pequeño y tal vez para alinearnos o alinearlo con este ancho aquí. Entonces, ¿por qué no seguimos adelante y realmente dibujamos el ancho aquí y luego hacemos una envoltura ahora para este niño, haremos una envoltura, y vamos a llenar contenedor. Pero este de aquí, en realidad no queremos hacer rap. Queremos que este sea vertical. Ahí vamos. Eso es lo que estamos buscando. Ahora bien, el espaciado entre estos puede ser un poco menor, tal vez 24 píxeles, 24 píxeles. Eso podría ser lo suficientemente bueno. Incluso podrías salirte con la suya haciéndolo 16 píxeles aquí. Ahora para el texto, podemos hacer un color gris ligeramente más oscuro que los iconos. Déjame por aquí. Ahí vamos. Entonces ahora tenemos una sección alguna vez incluida. Esta es una forma de presentarlo. También puedes presentarlo en dos auto layout. Entonces esta es una manera de hacerlo. El otro sería agregar un diseño automático para cada tres y luego hacer uno horizontal aquí. Y uno vertical para cada niño uno y tenerlo así. Esa es otra forma de hacerlo. De esta manera, si tienes más iconos, se agregará en el lado aquí, y solo podemos hacer contenidos calientes aquí. Esto podría ser un poco más organizado para presentarlo así. Y aquí podemos agregar un poco más de espaciado. Entonces creo que esto se ve bien. Podemos regresar a la siguiente sectura para comenzar a trabajar en nuestra sección de alojamiento, que es la parte más emocionante de esta página 53. Campos de alojamiento: La sección es nuestro alojamiento, donde mostraremos las diferentes habitaciones que el usuario puede reservar. Junto con la imagen, el tipo de habitación, el precio por noche, y aquí tomará tres campos. Los campos serán las fechas, así desde y dos, y luego el número de viajeros. Para que podamos volver aquí. Yo sólo tomaré prestado el título aquí que tenemos y usaré ls para duplicarlo. Y otra cosa que voy a hacer es usar un diseño automático entre estos dos. Ahí vamos. Y voy a cambiar este a alojamiento, traerlo aquí. Y en realidad, voy a cortarlo usando el Comando X y pegarlo. Ahí vamos. Ahora queremos tener esos campos para que podamos ir a nuestros activos, activos locales. Y en realidad, podemos arrastrar el campo de entrada que tenemos aquí. Para el icono, hagamos el calendario uno ya que es un campo de fecha, y podemos duplicarlo y voy a mantener presionado Mayús, seleccionar todos estos tres, y autolayo y hacer horizontal Voy a cambiar esta a de y solo poner algunas fechas aquí, para cambiar esta, y tal vez podamos hacerlas un poco más pequeñas aquí. Voy a autolayo estos dos juntos también, acercarlos, 16 pixeles Y entonces queremos un campo más, y ese es el número de viajeros. Ahora, en este momento, no tenemos un campo desplegable, pero el campo desplegable se usa normalmente para permitir que los usuarios elijan entre múltiples opciones Es similar a un campo de entrada, pero tiene una pequeña flecha en el costado aquí donde los usuarios pueden entender que se trata de un campo desplegable. De hecho, podríamos usar el mismo campo de entrada que un campo desplegable, también. No es necesario necesariamente hacer un componente diferente. Y yo me gusta hacer eso, solo podemos agregar una nueva propiedad booleana, llamarlo es Entonces, por defecto, lo convertiremos en falso. Y ahora simplemente necesitamos ir al ícono de fósforo, buscar Vamos a probar flecha y ver qué surge. Este es el que estamos buscando. Ahora, está por aquí. Es una zanahoria. Se llama el icono de la Zanahoria. Podemos simplemente pegarlo aquí. Y cambiar el color a tal vez primaria 300. Voy a golpear K y cambiar el tamaño de esto a tal vez 16 píxeles. Creo que eso es mejor. Y entonces adivina que vamos a atar la visibilidad de esto. Por aquí, dos que es desplegable. Entonces ahora si vamos por aquí, en realidad podemos crear otro campo, llamarlo viajeros con dos s. y vamos a cambiar el campo dos es desplegable Y podemos ocultar así el icono de la izquierda. Y como marcador de posición, solo pondremos un adulto Ahora mirándolo, la flecha es un poco no visible. Entonces tal vez podamos volver aquí y usando el panel Capas, solo selecciona ese, selecciona el vector, y tal vez convertirlo en primario 500. Un poco mejor. Y voy a darle a K. En realidad lo volví a poner a 24 píxeles, y en realidad cambiarlo a 20 píxeles. A ver si eso se ve mejor, seguro que es un poco mejor . Impresionante. Ahora bien, lo que quiero hacer es que quiero que esta caja de aquí llene el contenedor, y queremos elegir auto para el espaciado entre los artículos porque quiero agregar algo de espaciado aquí entre el alojamiento y estos campos. Entonces dejaremos aquí estos campos. Y aquí, en lugar de una alineación superior, podemos hacer una alineación central o una alineación inferior aquí, lo que creo que se ve un poco mejor. Entonces aquí mismo, solo tendremos los tipos de habitación. Para los tipos de habitación, volveremos a la siguiente sectura para armar un bonito componente de tarjeta para ello 54. Tarjetas de tipo de habitación: Nuestras tarjetas tipo habitación en realidad no están tan lejos de nuestras tarjetas que tenemos aquí. De hecho, podemos reutilizar algunas partes de ella, y todo lo que necesitamos hacer es cambiar el nombre aquí al tipo de habitación y el precio por noche aquí en lugar del precio total que tenemos aquí. Entonces tenemos dos opciones. Ahora podemos ir a la instancia aquí y podemos crear otra variante de esta o realmente podemos crear un componente diferente. Quiero crear un componente diferente solo para que sea un poco más fácil en caso de que necesitemos hacer cambios más tarde. Lo he copiado, y ahora mismo es una instancia, así que queremos desconectarlo para que podamos crear un nuevo componente usando Command Alt K, y vamos a llamar a esta tarjeta Room Impresionante. Entonces algunas diferencias. Ya no tenemos favoritos ni marcadoras para este. Solo queremos la foto de la habitación aquí, y esta va a decir tipo de habitación. Y este precio va a ser de 100 pavos por noche, digamos, solo por una muestra. Y en realidad no necesitamos estos. Podemos dejar calificación para que puedas ver las calificaciones por habitación. Pero creo que podemos dejar esa y simplemente hacer esto. Voy a copiar uno, pegarlo por aquí, y luego voy a mantener presionada Mayús, seleccionar estos dos, y autodiseñarlos junto con 24 píxeles con tal vez 32 píxeles del espaciado. Vamos a duplicar este hacer otro diseño automático, y este va a ser un contenedor envoltorio con relleno para que si tienes varias habitaciones diferentes, se envuelve a la siguiente línea. Empezando a quedar bien. Ahora bien, no soy un gran admirador de la forma en que esto realmente se ve aquí, así que tal vez podamos hacer un diseño vertical aquí. Creo que eso es un poco mejor. Y entonces el espaciado entre estos puede ser de 16 píxeles. Creo que eso se ve un poco mejor. Ahora para estos tipos de habitaciones, voy a seleccionar uno de estos por aquí y usar make image. Una habitación de hotel con una cama. Veamos qué hace. Bien, estas son bastante bonitas. Te voy a pedir que hagas cambios y hagas una cama pequeña. Para que podamos tener una cama más pequeña en esta. Bien, esta es mejor. Hagamos Habitación Twin. Cambia el precio a tal vez 80 dólares la noche para este. Y entonces esta podría ser Habitación King, en realidad, esta, hagamos habitación queen, y esta será habitación king. Este lo dejará a 100 dólares la noche, y este tal vez a 120. Voy a usar la IA para hacer una imagen para ésta. Habitación de hotel con vamos hacer dos camas queen para esta. Eso es lindo. Y vamos a hacer éste y hacer una imagen. Ahora, si no puedes usar las funciones de IA o no quieres usar funciones de IA, puedes buscar totalmente estas imágenes en Unsplash o en otro lugar Yo solo lo estoy haciendo para que podamos aprovechar esta característica y también tener una bonita imagen aquí. Y haremos habitación de hotel de lujo con cama torcedura, solo para que tengamos una más bonita por 120 dólares la noche Se ve un poco diferente. Me gusta que la orientación de la apuesta sea así. A mí me gusta este. Fresco. Ahora, una cosa que podemos agregar a estas tarjetas es quizás, antes que nada, cambiemos aquí las calificaciones para cada una. Y podemos sumar el número de calificaciones que tiene cada habitación. Entonces este tiene 123, y tal vez este sea realmente bueno. Entonces son 4.9 y 125 personas se quedaron aquí y lo calificaron. Ahí vamos. La otra cosa que podemos agregar a esto es la cantidad de personas que encaja esta habitación. Entonces, si vas a la instancia local, podemos agregar otro texto aquí y simplemente agregarlo por aquí. Y escribir duerme uno, digamos, y queremos hacer contenido. Veamos cómo se ve eso aquí. Bien, eso se ve mucho mejor. Duerme uno. A lo mejor éste duerme dos, y éste duerme tres o algo así. Casi se olvida. Para estas tarjetas, en realidad también queremos un botón de libro. Ahora bien, para estos botones, quiero un nuevo botón diferente al que hemos diseñado aquí. Porque lo quiero para que quede alineado a la izquierda, y luego en el lado derecho, podamos tener algún texto para mostrar el precio total de este alojamiento y cuánto va a ser. Así que voy a ir a la instancia de la tarjeta local, y de hecho voy a hacer un nuevo botón aquí. Ahora, por supuesto, también podemos crear otra variante de nuestros botones otra variante de nuestros botones . Esa es otra forma de hacerlo. Entonces, ¿por qué no hacemos eso simplemente extendiendo esto aquí, arrastrando dos componentes de botón hacia fuera, y simplemente estirándolos un poco aquí Y vamos a crear una nueva propiedad para el botón, y vamos a llamar a esta variante y llamar la propiedad wide por defecto, la pondremos en no. Entonces estos serán nuestros botones anchos, así que los seleccionaremos y cambiaremos esto a sí, y estos ya son no. Ahora bien, si agregas un texto aquí, digamos $0. Ahora mismo, todo está siendo empujado a la mitad del botón, que no es lo que queremos. Queremos que todo quede empujado hacia los extremos del botón. Y así tenemos que cambiar la brecha aquí de diez a auto. Y la brecha en los lados también es un poco demasiado, así que tal vez podamos hacer 16 pixeles. Hagamos exactamente lo mismo aquí. De hecho, todo lo que necesitas hacer aquí, vamos a copiar el texto aquí, cambiarlo cámbialo a texto 500. Ahí vamos. Cambie el espacio a automático y el espaciado a 60. Bien, eso se ve bien. Entonces ahora tenemos un botón ancho, pero los tipos están mal aquí Por lo que queremos asegurarnos de que el tipo para este también sigue siendo primario, y este también sigue siendo secundario. Ahí vamos. Entonces ahora tenemos un botón primario que no es ancho, un botón secundario que no es ancho, uno primario que es ancho, y uno secundario que es blanco. Entonces queremos usar uno de los blancos de nuestra tarjeta aquí. Entonces sigamos adelante y arrastremos o copiemos este de aquí, el principal de aquí. Voy a simplemente arrastrar esta sección de componentes un poco más hacia arriba. Se puede ver el botón. Y entonces voy a sostener todo su doble clic aquí en el costado o el borde de ese botón para cambiarlo a llenar. Es lo mismo que ir aquí y hacer clic en llenar. Eso es sólo un atajo para hacer eso. Entonces vamos a mostrar el botón aquí, y el texto de este botón será sala de libros o tal vez este libro esta habitación. Y luego el precio total a la derecha. Digamos que ya tenemos fechas seleccionadas en lugar de $0, esto podría mostrar el precio total. Entonces, si tienen dos noches, digamos, serán 160, algo en esa línea. Y solo vamos a hacer diferentes precios para estos uno es 200 y este será 240. Entonces ahora tenemos los botones para que cada habitación se reserve. Alternativamente, puedes cambiar tu tipo de botón a un secundario. Creo que ambos realmente funcionan bien aquí. Entonces ahí lo tenemos ahora tenemos un botón para cada habitación se reserve. Eso se ve bien. Impresionante. Entonces con eso, tenemos lista nuestra sección de alojamientos, y luego tenemos dos secciones más, algunos destinos similares, lo cual es bastante rápido. Entonces tenemos algunas tarjetas de calificaciones que vamos a diseñar en la próxima conferencia. 55. Tarjetas de calificación: Quedarse sin espacio aquí verticalmente en nuestra página de descubrimiento de destinos. Entonces voy a expandirlo un poco verticalmente. Así que tenemos suficiente espacio para nuestra sección de calificación y nuestra sección de destino similar. Entonces nuestra sección de calificación, tenemos en nuestras calificaciones de wireframes aquí, el número total de ratings y estrellas, y luego tenemos algunas tarjetas de calificación por las que el usuario puede desplazarse, y podemos tener un scroll horizontal aquí o también flechas para ir a la izquierda y a la derecha Y así para hacer eso, vamos a volver por aquí, copiar el texto por aquí, usar Alt para duplicarlo. Y solo voy a traerlo aquí al contenedor padre, pero traerlo aquí abajo usando la flecha hacia abajo, y parece que tenía un errata ahí, así que solo lo arreglé Y éste va a ser ratings. Y queremos tener las estrellas y el número de ratings. Entonces tal vez solo podamos tomarlo prestado y traerlo aquí. Y queremos auto diseñar estos dos juntos. Prueba 16 píxeles. Y porque este es para todo el destino, tal vez podamos hacerlo un poco más grande el icono dos, 24 o incluso escribir 24 por 24. Y solo sube un poco el número. Digamos, 534. Y luego justo abajo, vamos a tener algunas tarjetas de calificación, y en estas tarjetas de calificación, queremos tener una foto de la persona, algún texto para mostrar su reseña y tal vez su nombre o algo así. Entonces solo diseñaré una tarjeta aquí, agregue un texto aquí. Esta es mi reseña. Obviamente, vamos a cambiar esto, y por ahora, voy a auto maquetar esto pulsando Mayús A. Y simplemente podemos aplicar un relleno blanco aquí, cambiar el radio de la esquina a 16, y luego también dibujar un óvalo golpeando O en mi teclado y dibujar una foto de perfil tal vez 48 pixeles por 48 y solo cortarlo aquí. Ahí vamos. A lo mejor estos podrían tener un ancho fijo aquí 440. Ahora, voy a activar mi cuadrícula de diseño aquí para la página y usarla para llegar a un buen ancho fijo aquí. Ahí vamos. Entonces podemos tener tres cruces así, y se verá bien. Aún no hemos terminado, así que vamos a seguir trabajando sólo en uno, esconder nuestra grilla aquí. Y queremos hacer una línea a la izquierda y a lo mejor a 16 pixeles de la parte superior inferior. Entonces esta será la revisión del usuario, y luego justo debajo de eso, golpearemos el Comando D para hacer otro texto. A para diseñar estas dos capas de texto y simplemente hacer justo debajo de la otra. A lo mejor con ocho píxeles y este será el nombre del usuario, digamos, María. Pero para este, hagamos un tamaño de pie de página. Y podemos agregar un buen trazo aquí también, yendo con primaria 100. Y por supuesto, podemos convertir esto en un componente, golpear lommand K, y simplemente volver a titularla tarjeta de calificación, y llevémoslo a nuestra biblioteca de componentes aquí o sección Copia uno de esos, pégalos aquí, agruparlos o maquetarlos de forma automática. Y creo que para el espaciado, podemos cambiar el hueco aquí a 32 adentro, duplicar estos, auto colocar las tres tarjetas y hacer un contenedor de envolver y llenar. Y cambiemos el espaciado entre ellos a 24 píxeles. Eso se ve bien. Voy a simplemente seleccionar Esta es mi opinión y usar nuestra herramienta de escritura de IA para decir escribir una reseña de para los usuarios que hicieron un viaje a Londres y la disfrutaron. Et a ver lo que surge. Bien, ahí vamos. Ahora tenemos un problema aquí con el texto donde se está derramando al exterior del contenedor Es que vayamos por aquí a ver qué está pasando. Entonces esta caja de aquí está abrazando el contenido, pero el contenido puede llegar a ser infinitamente largo y seguirá abrazándolo en la Entonces, en lugar de hacer eso, lo queremos es el contenedor de llenado, que queremos es el contenedor de llenado, y podemos hacerlo cambiando esto para llenar contenedor. Entonces, pase lo que pase, pero el texto aquí todavía está configurado para abrazar el contenido. Entonces queremos que también el texto se llene contenedor. Por lo que ahora el texto tendrá un ancho fijo del ancho del contenedor, por lo que continuará derramándose al siguiente Y porque es un componente, lo arreglamos en un solo lugar. No necesitamos arreglarlo aquí. Ya está arreglado de todos modos. Y otra cosa es, queremos que la foto de perfil esté quizá en la parte superior y tal vez el nombre del usuario podría estar ahí también. Creo que eso tendría más sentido. Entonces, ¿por qué no cambiamos estos dos y luego usamos una alineación superior izquierda como esta Simplemente voy a cambiar esto a eso. A ver si eso se ve quizá un poco mejor. Pero lo que voy a hacer es que voy a sacar este texto de aquí y voy a colocarlo auto con imagen aquí para que podamos alinearlo al centro. Y luego para todo el contenedor, vamos a hacer esto. Ahí vamos. Eso se ve mucho mejor. De esta manera, incluso podemos agregar un texto en el otro lado. Haciendo el diseño automático con estos dos y haciendo horizontal y llenando el contenedor y cambiando el hueco a auto. Y haz la línea central y cambia esto a un texto para la marca de tiempo, así podría ser hace cuatro semanas Entonces incluso podemos tener una marca de tiempo y podemos dejar caer el relleno para éste a un texto 300 y este podría ser un texto 500 y igual que este de aquí, texto Mucho mejor. Ahora podemos acortarlos un poquito dos aquí para que todos tengan la misma altura Ahí vamos. Eso está empezando a quedar bien. Podemos simplemente cambiar el nombre aquí Max, Adam, y luego simplemente darles algunas fotos usando un plugin que me gusta mucho llamado Avatar. Y puedes elegir cualquiera de ellos. Hay muchos. Nosotros solo elegiremos este de aquí. Perfil de usuario Avatar. Uy. Puedes usar a cualquiera que hagamos este generador de Avatar aquí. Simplemente puedes presionar Colocar Foto continuamente, y allí colocará la foto de una persona al azar. Es bueno para. Ahora bien, algunos de estos vienen con un límite. Entonces acabo de llegar al límite en esa. Siéntase libre de cambiar entre diferentes plugins para ver cuál funciona mejor. Ahí vamos. Esto se ve mucho mejor ya. Y pensándolo bien, no creo que sea una gran idea hacer un pergamino horizontal aquí porque eso no es realmente típico. Entonces lo que podemos hacer es hacer dos cosas para mejorar esto aquí. En primer lugar, para estos dos, hagamos un layout horizontal como este. Y entonces, ¿por qué no agregamos un botón secundario aquí? Presiona un botón aquí. ¡Vaya! Nosotros lo queremos meter. Ahí vamos justo aquí, y entonces tal vez debería ponerlos y hacer menos espaciado aquí y cambiarlo a secundario porque no es un botón importante, realmente, es un botón secundario y luego mostrar ver todas las calificaciones o algo así. El usuario puede hacer clic en ver todas las calificaciones e ir a otra página para leer todas las demás calificaciones. Entonces eso es todo para las tarjetas de calificaciones. Volvamos en la siguiente conferencia para armar la última parte de esta página, la página de destino similar. 56. Página de detalles del destino final: La última sección de nuestra página de detalles de destino es una sección de destino similar. Así que vamos a duplicar este texto una vez más en el contenedor padre aquí. Destinos similares. También puedes llamarlo otros destinos populares que también funcionan. No hace falta necesariamente nombrarlo de la misma manera que yo lo estoy nombrando. Y luego simplemente, tomemos aquí algunas de estas tarjetas. A lo mejor estos tres de aquí, usa el Comando C y luego pegarlos aquí. Ahora, ahora mismo, están dispuestos verticalmente porque están en este contenedor padre. Así que queremos hacer un diseño automático entre ellos usando Mayús A y luego hacer el diseño horizontal. Ahí vamos. Entonces estos son algunos otros destinos populares, pero por el espaciamiento entre ellos, también se quiere hacer 32. Eso se ve muy bien. Y creo que esta página está prácticamente terminada. Vamos a hacer una revisión de arriba a abajo y solo asegurémonos de que todo se vea bien y no haya nada que queramos cambiar. Ahora, aquí hay algunas cosas que voy a hacer como formas de pulir esta página. El primero aquí es, creo que aquí podemos negarle el título. Se ve mejor. Para este botón de aquí, se ve raro sin ningún texto similar a este popular. Entonces, ¿por qué no agregamos un texto para éste aquí? Haremos guardar o marcar como favorito. Destino y obviamente no tan grande. Vamos a hacer trabajo de pie de página corporal o incluso corporal. Y sólo vamos a cortar eso y traerlo aquí. Y yo pongo estos dos y tal vez ocho pixeles es un buen espaciamiento entre ellos. Y podemos mover este destino, solo marcar destino. Cambia esto a tal vez un 900 primario o un 800 primario. Bien, eso se ve un poco mejor, así que queda más claro de qué se trata. Y el espaciado entre todo y aquí es generalmente un poco demasiado, tal vez 32 píxeles harían un buen trabajo. Entonces esto se ve bien. Disponibilidad. Los llevaremos directamente aquí. , aquí hay un poco vacío Sin embargo, aquí hay un poco vacío y puedes hacer dos opciones. Una es que puedes simplemente cambiar esto en la disposición de lo que hemos hecho aquí para que sea horizontal. Entonces eso realmente funciona igual de bien. Entonces tal vez voy a hacer eso en su lugar, así que no hay una brecha incómoda aquí. El alojamiento se ve bien. Tenemos nuestro de dos viajeros, así que eligen esos lo único que nos puede faltar es solo un botón para que refresquen los resultados. Si cambian estos, ahora mismo, no hay forma de refrescar los resultados. Entonces queremos hacer eso, traer aquí la alineación. Entonces está en la parte inferior, y luego sí encuentra habitaciones. Ahí vamos. Es un poco mejor. Eso se ve bien, las calificaciones se ven bien. Las calificaciones por cualquier razón, este texto es un poco demasiado grande, así que vamos a hacer cuerpo en su lugar. Creo que el cuerpo grande es simplemente demasiado. Eso se ve mejor. Y con eso, en realidad podemos mejorar el espaciado en lugar de 16 píxeles. Vamos a hacer 24 píxeles de arriba y de abajo. Bien, en realidad, eso se ve bien, y otros destinos populares se ven muy bien. La única otra cosa que podría hacer es simplemente aumentar el espaciado entre todo en lugar de 48 píxeles. A lo mejor podamos hacer algo como el 64. Y creo que hay más respiro entre todo y todo se ve mucho más pulido de esta manera. Fresco. Voy a hacer que esta página sea un poco más pequeña. Ahí está nuestra página Descubrimiento de destino, o en realidad, esto debería llamarse Destination Detail. Ahí vamos. Esa es nuestra página de detalles. Volvamos a la extura para trabajar en nuestra página de reservas Entonces esa es la página que seguirá cuando realmente hagan clic en Reservar esta habitación. Va a esta página donde ingresarán sus datos y confirmarán su reserva. 57. Pantalla de reserva: hora de trabajar en nuestra pantalla de reservas aquí, y esta página es bastante sencilla. Entonces básicamente el usuario hace clic en el libro en una de estas habitaciones. Va a la página de confirmación de reserva donde seguirán adelante y completarán alguna información, que generalmente ves en una plataforma de reservas, como su nombre, apellido. Y tal vez gran parte de esta información incluso se pueda rellenar previamente si ya están iniciados y ya agregaron su formulario de información antes Pero como no tenemos esas páginas para recopilar esa información, asumiremos que el usuario tiene que rellenarlas de todos modos, en caso de que quiera usar un correo electrónico o número de teléfono diferente y tal para su información personal para esta reserva Y luego tenemos algunos datos de pago y campos aquí para agregar. Así que gran parte de ella se basa en el campo. Y luego queremos agregar algunas tarjetas aquí para algunos complementos, y estos podrían ser, cosas como agregar un alquiler de autos a tu viaje o agregar seguros o agregar cosas diferentes, etcétera, etcétera Y luego un botón para completar la reserva. Y en el lado derecho del panel aquí, queremos una tarjeta para mostrar la imagen de la habitación que están reservando, tal vez junto con la ciudad o el viaje o algo así. Entonces tal vez el nombre del viaje, junto con la habitación que están reservando. Están reservando una habitación con las fechas aquí, y el número de personas que se hospedan, luego el precio total. Ahora bien, este podría ser un buen lugar para poner también nuestro botón de reserva. Así que no necesariamente tiene que ir hasta el fondo aquí, y en realidad podríamos tener ambos lugares tenerlo, y tal vez podamos arreglar esto. Así que cuando realmente estamos construyendo el prototipo, podemos arreglar este elemento en la pantalla. Bien, así que vamos a ir por aquí. Queremos comenzar de arriba a abajo. Empecemos por agregar nuestro botón de retroceso NavBR y título aquí Entonces, para facilitar las cosas, voy a duplicar la página de detalles del destino usando el Comando D. Solo muévase un poco por aquí y renombrar nuestra pantalla a página de reservas. Y voy a deshacerme del contenido completamente por ahora. Y en lugar de volver a todos los destinos, podemos hacer back to trip. Y justo debajo de él, podemos tener un texto similar aquí. Voy a usar Alt para arrastrar esto aquí o más bien una copia de él aquí. Asegúrate de que el espacio sea el mismo que todo lo demás y cambia esto para confirmar tu reserva o tu viaje y solo asegúrate de que todo esté espaciado en consecuencia. Ahí vamos. Mueve esto aquí a 24 pixeles de esto. Y luego justo abajo, queremos tener algunos campos y también queremos un título aquí para esa sección. Entonces para el título, estoy pensando que podemos usar antes que nada, vamos a bollar en este de aquí, y luego podemos usar una fuente más pequeña aquí, tal vez los cuatro años, los cinco años. Creo que los cinco años son buenos y cambiaremos esto a datos personales. Como ahora, podemos simplemente dejarlo como audaz aquí. Y luego estos, quiero autolayout usando Mayús A con 48 pixeles con Y luego de nuestros activos, vamos a arrastrar algunos aportes aquí. Vamos a moverlo ahí abajo. Y estos quiero auto layout junto con tal vez 24 pixeles. Para este campo, realmente no necesitamos un icono. Sólo vamos a escribir nombre, solo un nombre de ejemplo aquí, y luego vamos a hacer apellido. Comúnmente estos campos suelen estar uno al lado del otro, por lo que incluso podemos hacer un diseño automático que es un diseño horizontal aquí, tal vez con un espaciado de 16 píxeles. Se ve bien. Cambiemos este a contenido caliente para el ancho. Esto se ve bien, y necesitamos un campo de correo electrónico y número de teléfono. Estos, queremos ponerlo aquí en el marco padre. Cambia este por número de teléfono más uno, uno, dos, tres, uno, dos, tres, cuatro, o uno, dos, tres, cuatro, así. Sólo un texto de muestra. Y entonces podemos tener dirección de correo electrónico o simplemente correos electrónicos bien en Domain, algo así. Quizás podamos incluso tener a estos dos uno al lado del otro, también. Eso es bueno. Entonces queremos alguna información de pago. Entonces para esa, así que voy a duplicar esta sección y cambiarla a detalles de pago, algo así. Cambia este por número de tarjeta de crédito, suponiendo que aquí solo tenemos tarjeta de crédito como opción, y luego vamos a hacer tarjeta de crédito, y necesitamos la fecha de caducidad. Entonces no hagamos esto como fecha de caducidad, escriban algo como esto. Podemos hacer este contenido de uno t o tal vez un poco más grande, ir 20 píxeles, duplicarlo y colocarlo automáticamente justo al lado. Y éste será CVV, que es un código que está en la parte posterior o algo así Y creo que normalmente también tenemos un nombre en la tarjeta. Entonces a lo mejor queremos hacer tarjeta de crédito. Mayores a para el número, solo podemos poner algún número aquí así. Desea que el texto de su marcador de posición se vea similar a lo que deberían ingresar para que tengan alguna idea de qué esperar Y a veces ves código postal o código postal dependiendo de dónde estés, así que podemos hacer cremalleras Código Postal y simplemente dejarlo aquí también. Eso podría ser necesario para algunas tarjetas de crédito, y simplemente las ampliaremos, pero no se están expandiendo, así que queremos seleccionarlas y llenar contenedor. Entonces tenemos información de pago. Y luego para estos, creo que estos son demasiado grandes por alguna razón. Probablemente una persona no tiene un nombre tan largo, así que solo podemos hacerlo un poco más pequeño, como 480 en total y también hacer que estos 480 llenen contenedor para estos. Y voy a hacer exactamente lo mismo por estos. Lo mismo aquí. Y solo estoy usando un Alt y doble clic para hacer esos todos llenar contenedor. Entonces una buena parte de esta página ya está lista para funcionar, volvamos a trabajar en nuestros complementos y luego trabajaremos en la tarjeta lateral por aquí. 58. Diseño de tarjetas complementarias: Para esta siguiente sección, tenemos una sección add on con algunas tarjetas de cosas que la gente puede agregar a su viaje. Entonces voy a copiar un título aquí para ello y llamarlo add on perfecto para tu viaje, algo así. Y luego veamos si podemos reutilizar alguna de las tarjetas que tenemos. La tarjeta de colección es realmente similar a lo que queremos agregar. Pero de nuevo, no es exactamente lo que queremos. Entonces tal vez podamos hacer otra carta específica para agregar ons, pero usar un diseño similar a la tarjeta de colecciones. Voy a duplicar eso usando Alt, desconectaré el instante, y luego crearé un nuevo componente usando Comando Alt K y renombrarle este para agregar en la tarjeta Entonces este va a ser el nombre del add on. Ya tenemos una foto. Eso es genial. Queremos un botón para agregar este add on, así que tal vez copiemos este botón aquí. Esto se suma a tu viaje, y luego tal vez el precio del artículo. Entonces lo dejaremos $0 por ahora. Creo que esto es bueno. Vamos a traerlo aquí. Entonces ahora, lo único es realmente no me gusta cómo este botón es demasiado primario aquí. No queremos que esto sea una acción primaria ni provoque la confusión de qué botones presionar, así que solo estoy cambiando eso a secundario aquí. Entonces tendremos tres de ellos. Sitio por sitio. Y estos, no queremos que estos sean así de grandes, así que solo haremos estos anchos fijos. Estas tarjetas son un poco demasiado grandes. Entonces, ¿por qué en realidad no hacemos esta imagen un poco más pequeña? Llevando turno y juntos, y tal vez haciendo la imagen como 270 o algo así. Y luego para el add on name, solo vamos a hacer un cuerpo ambos, hacer abrazar contenidos aquí. Y lo mismo aquí. Nosotros solo haremos contenidos de abrazo. No queremos que sea demasiado prominente o demasiado grande aquí. Y luego reemplacemos estos con complementos reales. Simplemente escribiremos el alquiler de autos y para este, escribiremos actividades divertidas. Y siéntete libre de escribir lo que quieras. Seguro completo o haremos un seguro de viaje. Y luego para las imágenes, voy a usar realmente voy a usar Unsplash y no IA para esta Y vamos a hacer el alquiler de autos. No sé qué va a surgir. A ver. Bien, solo usaremos algunos solo usaremos uno de estos. Claro, vamos con éste. Actividades divertidas. hagámoslo. ¿Qué es una actividad divertida que haces en Londres? El ojo londinense, no estoy seguro. Nunca lo he estado, así que vamos a seguir adelante e insertar el ojo londinense aquí a partir de una de estas fotos. Y entonces, en realidad, esa se ve un poco deprimente. Nosotros haremos esta. Y luego seguros, tal vez solo escribamos seguros, a ver qué surge. Yo sólo voy a elegir una bonita imagen aquí. No tienes que usar necesariamente éste. Es sólo una bonita que encontré por ahora. Entonces tenemos estos complementos ahora que se ve bien. Puedes agregarlos a tu viaje. Muy chulo. Y luego con esa fuera del camino, podemos volver en la siguiente conferencia para poner esta tarjeta a un lado aquí. Antes de eso, pondré aquí una reserva completa real. Simplemente agrégalo botón aquí y hazlo Max 480 y solo confirme la reserva, y este será el tost total del viaje o algo así Sólo hay que poner un número aleatorio aquí, 2240 así. Sería bueno si también tenemos la moneda en caso que estés pagando en una moneda diferente. Entonces ahora queremos esa tarjeta en el costado. Volvamos a la siguiente sección y hagamos eso juntos. 59. Página de confirmación: Pero no menos importante en esta página, queremos tener una pequeña tarjeta de información en el lateral que muestre tal vez la habitación, tal vez la ciudad en la que estás reservando, todos los pequeños detalles que te gustaría saber antes de confirmar tu reserva. Cuando estás en cualquier otra página como Airbnb o Expedia o donde sea que reserves tus viajes, tienes algo similar donde ves toda la información antes presionar ese botón Ok porque estás haciendo una compra grande, quieres asegurarte de que el usuario esa tranquilidad de que ha seleccionado las fechas correctas y ha seleccionado el número de viajeros que es correcto, y el precio es visible y no oculto y así sucesivamente. Por lo que esto es realmente importante construir una gran experiencia de usuario. Así que solo voy a construir esta tarjeta de arriba a abajo. Queremos usar una tarjeta que solo sea realmente visible, así que en realidad no necesito necesariamente convertirla en un componente. De hecho, solo voy a pedir prestada una de estas tal vez la tarjeta de la habitación y simplemente me voy a quitar de eso, pero despegar la instancia y hacer una completamente de aquí. A veces quieres uno de descuento. No necesariamente necesitas hacer un componente, como en este caso. Entonces ese es el caso aquí, solo nos aseguraremos de que sea el mismo espaciado desde el lado. Entonces aquí, digamos que el usuario ha elegido la habitación queen. Entonces estoy usando el comando Alt C para copiar las propiedades de ese rectángulo aquí, que es ahora mismo esta imagen. Y luego voy a sostener este usando Comando para seleccionarlo y luego hacer Comando Alt V. Y eso solo pega las propiedades, que en este caso, es solo la imagen aquí. Entonces rápidamente tenemos esa imagen por allá. Y entonces lo que estaría bien sería una foto también de la ciudad que están reservando. Entonces tal vez también podamos tomar prestada esta foto aquí. Estoy usando también el Comando de Salida C. Voy a usar el Comando C para copiar ese fotograma aquí. Pero lo que estoy pensando es un lindo, genial, como, círculo o algo así encima de eso para simplemente demostrar que están reservando en Londres o algo así. Entonces lo que quiero hacer es para este marco, quiero poner el primero de todo, hacerlo mucho más pequeño y también que sea un rectángulo o lo siento, cuadrado. Eso tal vez hagamos 64 por 64. Puedes usar comando y las flechas para también cambiar el tamaño de tus cosas solo por un píxel a la vez Para que puedas hacer tallas exactas como esta. Y entonces tal vez podamos hacer que circule completamente con solo establecer el radio de esquina aquí a muy alto. Y para este trazo, queremos ponerlo en el exterior en su lugar y tal vez hacerlo de tres píxeles y un poco más oscuro, algo así como secundario 800 o algo así. Y ahora quiero colocar esto encima de esta imagen, pero no quiero que sea parte del diseño automático. Solo quiero que este círculo tenga un lugar específico aquí sin seguir este diseño automático. Hay dos formas en las que puedo hacer eso. Puedo agrupar estos dos juntos para que pueda sostener estos dos y solo la selección de grupos o incluso la selección de fotogramas. Y dentro de este marco, porque no es un diseño automático, puedo colocarlo como quiera. Otra forma, que también puedes hacer totalmente sin tener que hacer eso, es que puedes elegir esta para ignorar el diseño automático. Así que podemos ignorar el diseño automático aquí y luego colocar esto aquí. Pero lo único que sucederá es que, como puedes ver, es como puedes ver, tengas que cambiar el tamaño o reencuadrar algunas cosas para que el espaciado funcione o incluso cambiar el espaciado aquí y Entonces voy a ir con el primer método solo para hacer las cosas un poco más fáciles. Alguien para enmarcar estas selecciones juntas o incluso agruparlas realmente hasta ti. Lugares aquí, tal vez hacerlo un poco más grande. Seguro, 78 por 78 se ve bien. Entonces hay una foto del viaje aquí o la ciudad en la que están Reservando y luego escribamos un título que incluya la ciudad de aquí. Entonces me voy a pedir prestada esa ciudad, algo así. A lo mejor mover esto hacia abajo. Vaya, baje un poco esto, tenga la ciudad aquí. Yo también voy a cortar eso, traer esto a este marco aquí. Sólo voy a usar el turno en las flechas aquí para mover esto alrededor. Mueve esto a la sentada un poco aquí. Bien, este es un diseño interesante. A lo mejor mover esto un poco a lado aquí y lo mismo aquí. Entonces tenemos la ciudad. A lo mejor la ciudad se ve mejor de este lado, en realidad. Y voy a hacer un texto más claro, como el texto 300. Tenemos el tipo de habitación, así que vamos a escribir habitación King. O no es una habitación king. Es una habitación doble queen. Escribe duerme $200 la noche, y luego haremos como veces cinco noches o algo así. Y entonces realmente no necesitamos las calificaciones aquí porque ya deberían saberlo de antes. ¿Qué más tenemos que pueda ser útil? ¿Las fechas? Sí, para las fechas, podemos simplemente tomar prestado el texto dentro de estos campos y el icono Y aquí, usa un diseño automático que sea horizontal y abrace contenidos para ambos. Este de aquí, el texto es un poco demasiado largo. Entonces hagamos contenidos HG. Hacer otro texto. Haga el diseño automático y haga horizontal y tal vez solo auto aquí y llene el contenedor. Entonces tienen un espaciado como este, y luego nosotros de duplicar esto y hacer exactamente lo mismo horizontal, llenar contenedor, auto, y luego escribimos este como dos. Este debería ser contenido. Y el espaciado entre estos dos es un poco demasiado, así que solo los coloco automáticamente y tal vez lo hago ocho píxeles. Ahora quiero que estos dos realmente estén por aquí. Entonces lo que puedo hacer es hacer que el ancho sea igual que el ancho aquí, que es 122, y entonces de esa manera, lograré el mismo resultado. Ahí vamos. Y esto duerme dos es un poco aleatorio aquí, así que simplemente lo pondremos aquí abajo y lo haremos ya está en contenidos calientes. Simplemente podemos eliminar este marco de diseño automático simplemente haciéndolo en grupo. Así que conseguimos una habitación deluxe queen $100 la noche por cinco noches, duerme dos desde esta fecha hasta esta fecha. Y el espaciado entre estos son un poco demasiado, así que hagamos ocho píxeles. Y vamos a hacer llenar contenedor para ambos, y en realidad lo mismo aquí, llenar contenedor. Eso también funciona. Bien. Y entonces estos textos son demasiado oscuros porque se supone que son solo marcadores de posición, así que haremos texto 500 Esto de y dos en realidad no necesita ser así de oscuro, así que hagamos un mensaje de texto 300. Y en realidad vamos a darle a todo este asunto un relleno de blanco con cierto espaciado, tal vez 16 píxeles de todos los lados. Y luego haremos radio de esquina aquí. Quizá 30. Vamos a probar 32 looks Esto podría ser demasiado, así que tal vez 24. Esto se ve bien. Y ahora solo me estoy asegurando de que esté bien alineado. Entonces obtenemos esta tarjeta personalizada que se ve bien. Creo que tiene prácticamente todo este precio total. Podemos simplemente tenerlo en este botón de aquí. Tomemos prestado este botón de aquí para que podamos colocarlo dentro de aquí Lo que queremos hacer contenedor lleno y eliminar esto. Y el botón está un poco demasiado cerca de todo lo demás. Entonces, ¿por qué no golpeamos a Enter? Así que seleccionamos todo dentro este diseño automático y mantenemos tecla Mayús para anular la selección del botón de ellos, y luego hacemos Mayús A. Así que hay un diseño para todo el contenido allí Así que de esta manera, podemos agregar un poco más espaciado entre el botón y el resto del contenido. Creo que aquí lo tenemos todo. Eso está empezando a quedar muy bien. Y realmente le da al usuario una buena idea de lo que está pasando aquí. Una cosa más que te recomiendo que hagas es simplemente poner los duerme a tal vez en la misma línea que estos $100 la noche. Así que vamos a hacer abrazar contenidos ahí y simplemente pegar esto y hacer un diseño horizontal. Y entonces tal vez al inicio de este texto, haremos un Alt ocho. Entonces crea como un círculo y agrega algo de espaciado como este, así como este. No necesitamos ese espaciado extra, ya es suficiente. Y obviamente, el precio aquí no tiene sentido porque, como, 100 dólares la noche por cinco noches deberían ser como 500 USD. Así que vamos a actualizar eso, así que también tiene sentido en los diseños. Entonces esto es como, 500 USD. Esto también es 500 USD. Ahora, si tienes otras tarifas de servicio y cosas así, siempre puedes enumerarlo a continuación. Así que siempre podemos desglosar el precio aquí y mostrar, como, este es el precio de esto, y luego hay una tarifa de servicio, y luego hay un impuesto y todo eso, y luego se trata de esa cantidad. Pero para este proyecto, simplemente lo mantendremos simple y solo lo mantendremos así. Este botón de aquí con este radio de esquina se ve un poco apagado. Así que podemos redondear totalmente este botón un poco más o incluso simplemente ir con, como, un botón completamente redondeado para este. Y acabo de hacer un cambio personalizado a esa. Eso se puede hacer. No lo va a aplicar a ningún otro botón. Esto es solo para este botón específico. Entonces esto se ve bien ahora. Ahora, ya hemos hecho esta página. Terminamos con la página de reservas. Esto se ve increíble. La única otra cosa es, digamos que el usuario sí confirma la reserva. Normalmente, quieres mostrar algún tipo de página de confirmación después esto o como una confirmación del viaje que se está confirmando. Entonces voy a dejar eso como un proyecto para que lo hagas por tu cuenta, como una especie de tarea para practicar. Así que siéntete libre de tomarte un tiempo para hacer eso. Yo también lo haré. Y luego obviamente, al final del curso, tendrás acceso al enlace para MfLE para que siempre puedas comparar y contrastar e ir desde ahí Entonces con eso prácticamente cierra todas las páginas que estamos haciendo juntos aquí para nuestro proyecto. Aquí tenemos un flujo de usuarios completo desde registrarte, verificar tu registro, navegar por destinos, elegir un destino y ver todos los pequeños detalles y algunas habitaciones debajo de las para poder reservar, algunas tarjetas de calificación, etc. Y luego también tenemos una página de confirmación para confirmar ese viaje. Y obviamente, hay mucho más en una aplicación como esta que puedes agregar y diseñar, como el desplegable de perfiles, así sucesivamente, y exploraremos algunas de ellas juntas a medida que pasaremos por la creación de prototipos Pero el siguiente paso para nosotros es ver cómo podemos convertir este diseño en una versión amigable para dispositivos móviles también que puedas usar en un dispositivo móvil. Y para ello, aprenderemos a usar cosas como puntos de interrupción para tener un diseño diferente para móviles, pero también usaremos los mismos diseños que hemos hecho hasta ahora y solo modificarlo para un diseño móvil Así que volvamos a la siguiente sección del curso para hablar de convertir nuestros diseños en móviles. 60. Diseño responsivo con variables: Ya terminamos con nuestras páginas web aquí y queremos convertirlas en móviles. Hay múltiples formas de hacerlo. Por supuesto, podemos ir individualmente por cada página y luego echar un vistazo a qué contenido tenemos e intentar formatearlo de una manera que sea amigable en el móvil. Entonces, por ejemplo, para la pantalla, golpearíamos F en nuestro teclado e iniciaríamos un marco de teléfono aquí, digamos, el iPhone 16, y realmente puedes hacer cualquier tamaño aquí para el tamaño del teléfono. Y entonces tendrías que copiar cada elemento dentro de tu marco y luego uno por uno, reorganizarlos. Entonces esa es una forma de hacerlo, y también lo exploraremos. Pero quiero comenzar con cómo realmente puedes usar variables para que sea más fácil hacer un diseño responsivo. Entonces, incluso con variables, hay algunos elementos que necesitarías cambiar a móvil. Entonces tenemos a este Navbar en la parte superior aquí, y muy probablemente en el móvil, esto se verá un poco diferente A lo mejor en lugar de este usuario, ya sabes, el nombre completo aquí, solo tendríamos el icono del usuario o la foto de perfil del usuario, y luego seguido de este icono de campana. Por lo que podría verse un poco diferente. Por lo que tendremos que llegar a diferentes componentes basados en el móvil o web en esta conferencia, voy a mostrarte cómo puedes usar variables y modos variables para crear diferentes tamaños para tus páginas. Entonces aquí mismo, tenemos un ancho de página aquí para el proyecto web. Aquí son 14 40 pixeles para mí. Podría ser ligeramente diferente para ti si empezaste en otro tamaño de cuadro, pero es aproximadamente alrededor de ese tamaño. Y luego tenemos uno móvil. Entonces si le pego a F en mi teclado y digamos que hago iPhone 16 Pmax, aquí tenemos este tamaño de móvil que en su lugar es de 440 píxeles Y claro, hay diferentes tamaños de píxel que puedes configurar, pero voy a ir con estos dos por ahora. Voy a ir con 144440 para el tamaño del móvil. Entonces, si abres el panel de variables aquí, en realidad podemos crear una nueva colección. Así que vamos a crear una nueva colección o incluso esta colección que tengo no se está utilizando en este momento, así que solo puedo renombrarla y llamarla dispositivos. ¡Vaya! Si tienes un error tipográfico ahí como yo, puedes simplemente hacer renombrar, arreglarlo, y luego vamos a crear una variable con número como valor o como tipo, y vamos a cambiarlo al tamaño del dispositivo, y aquí vamos a tener una versión web que es de 14 40 píxeles, y luego voy a crear otra Y vamos a llamar a esto nuestro margen de página, o incluso puedes llamarlo margen. Y este será el espaciamiento en los lados. Entonces ahora mismo lo tengo en 48 pixeles, realidad, así que voy a tener eso a los 48. Y entonces ahora mismo, si ves por aquí, tenemos un número para el ancho aquí que ya es un número establecido. Pero si realmente aplicas una variable aquí, entonces si aplicas la variable para el tamaño del dispositivo, ahora está vinculada a esa variable tamaño de dispositivo, y siempre puedo cambiarla desde aquí. Y luego por aquí para nuestro contenido, queremos seguir adelante y asegurarnos de que todo esté en un diseño automático. Así que voy a agrupar estos dos juntos en un marco de diseño automático y también estos dos juntos. Así que voy a maquetar automáticamente estos dos juntos, y luego también este de aquí. Entonces tenemos un área de contenido aquí, y luego en vez de tener los márgenes en cero aquí o el relleno en cero horizontalmente, voy a aplicar el margen de página. Y así ahora tenemos un acolchado adicional aquí. Pero por eso, en realidad podemos seguir adelante y ampliar esto para hacerse cargo de todo el contenido. Entonces podemos hacer esto o simplemente establecer el ancho a también una variable pri y hacer el tamaño del dispositivo. Entonces ahora, esas están atadas a variables. Pero ya ves, realmente no pasa nada si minimizo esto y realmente no tenemos ningún propósito para establecer esas variables en este momento. Pero si sigues adelante y configuras un modo diferente haciendo clic en nuevo modo variable y luego llamando a este móvil, realmente podemos cambiar los números aquí. Entonces para móviles, vamos a tener un tamaño de dispositivo 440 y el margen de página, vamos a establecerlo en 24 en su lugar. Entonces ahora, si haces clic aquí, y luego bajo apariencia, si haces clic en el botón solit, aplicas modo variable, podemos cambiar el dispositivo Entonces, si hacemos móvil, ahora el dispositivo se configuró en móvil. Esta área de aquí se fijó en el tamaño del móvil 440, el relleno cambió. Pero claro, todavía tenemos un problema donde las cosas no se arreglaron como queríamos o esperábamos que lo hiciera. Idealmente, lo que queremos es que las cosas se espacien adecuadamente. La SEC no es perfecta. Algunas de las cosas no encajan, y necesitamos hacer algunos cambios para que funcionen. Entonces como ejemplo, aquí tenemos los complementos para tu viaje, y en vez de tener un ancho que sea fijo, ahora mismo, es contenido caliente. Entonces lo que queremos hacer, queremos envolver ese y establecer un ancho máximo. Entonces, pase lo que pase, el ancho máximo será el ancho del tamaño del dispositivo, que aquí es 440. Y de hecho, en lugar de 440, puedes configurar otra variable aquí para llamarla tamaño de contenido y ya eliminar esos márgenes. Y así ese será el tamaño del contenido para estas cajas aquí. Entonces volvamos a la siguiente sectura para armar eso para esta página 61. Propiedad de anchura máxima: Configura las variables y aplicamos el modo para que podamos cambiar el tamaño de nuestro dispositivo a web y móvil. Y algunas de estas cosas ya se ven mejor. Pero lo que tenemos que hacer es configurar un ancho máximo para nuestra área de contenido para que no consigamos que el contenido se derrame afuera Y así echemos un vistazo a lo que está sucediendo ahora mismo con nuestra página. Si volvemos a la web ahora mismo tenemos un diseño automático aquí que no importa el tamaño que sea, el contenido interior realmente no cambia ni se adapta, y eso no es lo que queremos. Entonces, en cambio, si lo configuras en un wrap, cuando el contenido se está encogiendo, al menos esto de aquí va por aquí en lugar de quedarse a la derecha, así que en el móvil, podemos presentarlo Ahora bien, tal vez no quieras hacerlo de esa manera. Es posible que desee mostrar esto además de confirmar su viaje. Y claro, si en cambio quieres mostrar esto en la parte superior, lo cual no tiene tanto sentido, pero puedes hacerlo yendo aquí y teniendo el primero encima. Entonces ahora eso soluciona ese problema. Nuestros campos aquí son un problema porque están arreglados en este momento a 480. Así que voy a diseñar estos dos juntos, y luego vamos a establecer un ancho máximo. Pero antes de hacer eso, vamos a establecer una nueva propiedad aquí para nuestras variables, y esta va a ser un número también, y vamos a llamar a este contenido. Ancho, que en la web, va a ser 14 40 -48 veces dos Entonces esa es la máxima área de contenido que podemos tener. Por lo que serán 13 44. Y en el móvil, va a ser 392. Y así lo vamos a tener para que esto de aquí, tenga un ancho máximo. Y vamos a aplicar una variable al ancho máximo del ancho del contenido. Entonces ahora mismo, lo que está pasando es que por defecto, está en 480 píxeles, pero el ancho máximo que esto tendrá está en el caso web 13 44. Pero si cambiamos esto a móvil, ves, ahora solo son 392. Pero el único otro problema es que dentro de estos diseños de auto, también tenemos que hacerlo para que el contenido interior tenga el ancho correcto establecido. Así que entremos y veamos qué está pasando. Este también está establecido en 480, pero ahora queremos llenar contenedor para este y también para este porque ahora el marco de diseño automático padre está manejando los anchos aquí Entonces ahora veamos qué pasará si lo cambiamos a móvil. Bien, algunos de los campos se ven mucho mejor. Y este de aquí, porque hay dos juntos, queremos hacer llenar contenedor y luego entrar y aplicar un contenedor de llenado a ambos para que se vea así en el móvil. Entonces ahora si encendemos la web, así es como se ve. Entonces ahora si configuramos esto a móvil, los campos se ven bien. Si lo configuramos en web, también se ve bien. Excepto que tenemos un pequeño problema, y ese es el hecho de que cuando cambiamos entre los dos, el campo aquí, el ancho que ya tenemos se cambia a móvil. Normalmente, lo que queremos hacer es duplicar esta página y luego tener una versión móvil de la misma. Así que simplemente cambiaremos este a móvil. Y muy rápido, tenemos una versión móvil y solo podemos ampliar esto. Ahí vamos. Y solo tiene algunos otros temas aquí. Entonces esto de aquí también debería tener un ancho de mezcla de aplicar ancho de contenido variable. Y luego aquí para este botón, debería estar en contenedor de llenado. Y este de aquí también debería tener un ancho máximo de lo adivinaste contenido y ancho Y así esto está empezando a quedar muy bien. Y como puedes ver, pudimos cambiar entre móvil y web muy rápidamente y así es como puedes usar variables para tener un diseño responsive a lo largo de tu proyecto. Te lo dejo como ejercicio para elegir si quieres seguir usando variables para tus diseños móviles responsivos. Y en la siguiente sectura haremos otra manera juntos de cómo hacerlo manualmente, que funciona también sin usar variables, que es algo que hago a menudo también. Pero antes de hacer eso, necesitamos arreglar esta barra de navegación en la parte superior para que tengamos una versión móvil. Entonces volvamos a la siguiente sectura para aprender a crear una variante para diferentes dispositivos 62. Variantes de componentes para dispositivos: A menudo desea crear componentes que pueda usar tanto en la web como en A veces necesitas cambiar tus componentes para que haya uno para móvil y otro para web. Entonces, por ejemplo, el snap board aquí debería tener una versión móvil y una versión web. Eso es un poco diferente. Entonces vamos a ir al componente aquí donde lo tenemos en esta sección aquí y vamos a crear otra variante para ello que va a ser específica para el móvil. Y vamos a llamar a este dispositivo variante, y solo voy a expandirme que tengamos espacio a la derecha aquí, agregue otra variante, y vamos a llamar a este móvil. ¡Vaya! Ahí vamos. Y vamos a establecer el ancho para aplicar el tamaño variable del dispositivo. Y vamos a establecer el ancho 440, que es el tamaño del móvil y simplemente traerlo a un lado por aquí. Y obviamente, esto no se ve muy bien. Entonces vayamos a seleccionar el logo y cambiemos ese para que sea tal vez un seis para móvil. Y luego el relleno horizontal, vamos a hacer margen de página, y luego vamos a aplicar el modo variable de móvil para que este siempre esté siguiendo el móvil. Y de hecho, puedes hacer lo mismo con tu ancho. Simplemente puedes aplicar el tamaño variable del dispositivo, y debido a que configuramos el modo a móvil, siempre seguirá al móvil. Y de esta manera, si alguna vez hacemos un cambio en el tamaño de nuestro móvil, así que aquí de repente decidimos nuestro móvil debería ser 500, todo se aplica automáticamente. Entonces ese es el beneficio de usarlo de esa manera. O digamos que quieres cambiar el margen en el móvil a 16 píxeles, estos cambios ocurren automáticamente. Entonces en el móvil, no queremos el nombre. Solo queremos eliminar el nombre, y tal vez el espaciado entre estos dos podría ser de 24 píxeles. Este podría ser un poco más grande, tal vez solo a los cinco años. Eso se ve bien. Entonces esta se llama web. Este no tiene nombre. Simplemente se llama default, así que queremos cambiarlo a web. Voy a cambiar el tamaño de esto aquí. Y entonces lo que queremos hacer es querer ir también a variables y crear un nombre de dispositivo aquí. Así que vamos a hacer una variable de cadena llamada device, o puedes hacer el nombre del dispositivo. Esta va a ser web, deletreada exactamente de la misma manera ahí, y esta va a ser móvil Deletreada exactamente de la misma manera que aquí. De esta manera, puedes decirle a tu página qué componentes usar. Entonces, si vas por aquí, podemos ir a la que tenemos en el móvil, y luego en lugar de cambiar esto manualmente a móvil cada vez, realmente podemos aplicar la variable llamada device name. Entonces, ¿qué está pasando aquí? Como pueden ver, si cambio esto a web, entonces tengo un pequeño bicho aquí, y solo quiero asegurarme de que si te pasa, ya sabes exactamente lo que está pasando. Si alguna vez tienes un problema como este donde uno de tus componentes está atascado en cierto modo, es probable que hayas aplicado una apariencia aquí a ese componente específico o modo variable, pero no lo hayas eliminado, porque ahora mismo, si estamos cambiando el modo variable para toda la página, todo debería cambiar. Algo no está cambiando, entonces eso significa que estás aplicando un modo variable a un componente específico. Entonces no quieres hacer eso. Desea eliminar esto para que esto herede automáticamente cualquier modo que esto herede automáticamente de apariencia o cualquier modo variable que tenga en todo el marco o página aquí Entonces ahora si cambiamos esto a móvil, está usando esa barra de navegación desde el móvil. Si lo hacemos a la web, es usando la barra de navegación desde la web. Entonces así es como podemos pasar una variable a una variante y usar diferentes variantes para crear diferentes componentes para usar allí. Así que puedes imaginar que esto podría ser útil y útil cuando estás trabajando en diferentes marcas, si quieres que tu app funcione en varias marcas, puedes cambiar el nombre de la empresa muy rápido o diferentes propiedades. Entonces ahí tienes mucha flexibilidad, lo cual es bueno. Ahora, mientras seguimos hablando de variables y utilizándolas para nuestro diseño responsive, una cosa más que podríamos cambiar aquí son los tamaños de fuente en el móvil. Al igual que como lo hicimos para el nombre de la compañía aquí, algunos de los tamaños de fuente en el móvil son un poco demasiado grandes. Para la mayor parte de la página, funciona y se ve bien, pero específicamente, este pequeño encabezado que tenemos aquí es demasiado grande en el móvil. En la web, se ve bien. Así que volvamos a la extura para hacer una mini lección variable sobre fuentes 63. Variables de fuente: En el móvil, queremos usar diferentes tamaños de fuente. Y de hecho, hay forma de más propiedades que puedes aplicar a tus fuentes usando variables. Así que vamos a explorar rápidamente esos. Entonces tenemos nuestros estilos locales aquí para nuestro diferente texto de encabezado y texto corporal. Y dentro de cada una, si vas y editas las propiedades, claro, podemos cambiar la familia de fuentes. Podemos cambiar el peso y el tamaño de fuente, pero también podemos aplicarles variables. Así podemos escribir esto como una variable y aplicarlo aquí haciendo clic en Aplicar variable. Así que de nuevo, puedes cambiar rápidamente tu, digamos, familia de fuentes para todo tu proyecto en lugar de tener que pasar por todas estas y cambiarlas ahí. La otra cosa que puedes hacer es que puedes establecer tu tamaño de fuente usando una variable aquí abajo. Y también puedes hacer eso por tu peso de fuente. Ahora el que me interesa para nuestro caso específico es el tamaño del móvil. Lo queremos para que para esta concreta que tengamos, digamos, la edad de tres años, tengamos una talla para web que es de 39 píxeles, y entonces tal vez queramos establecer una más pequeña cuando la edad de tres años se esté utilizando en un móvil. ¿Cómo lo hacemos? Si volvemos a nuestras variables, podemos crear una nueva colección, y a esta la voy a llamar fuentes. Vamos a crear una variable, ponerla en número. Y escribiremos H tres tamaño. Tendremos un modo como web y el otro como móvil. Lo único que olvidé mencionar es que los modos solo se pueden usar si tienes un Pcount con Figma. Entonces, si no lo haces, sigue con solo aplicar un modo para tu web. Y si estás considerando, claro, actualizar, te lo recomiendo para que puedas aplicar diferentes modos. Entonces aquí para nuestra web, vamos a aplicar el mismo tamaño de 39 píxeles, y luego tal vez en el móvil, podemos hacer 30 pixeles. Intentaremos eso y veremos si es demasiado grande. Entonces ahora si vamos a nuestro H tres, en lugar de tener un tamaño fijo de 39 píxeles, bajemos aquí y apliquemos una variable H tres tamaño. Ahora, debido a que configuramos esto como parte de una colección de variables diferente, no es parte de los dispositivos. Tendremos que configurar nuestra página aquí donde necesitaremos cambiar o aplicar nuestro modo variable para que las fuentes también usen el tamaño del móvil. Si no quieres lidiar con ese inconveniente, puedes subir aquí y pasar por debajo de tus dispositivos y también configurar tus tamaños de fuente debajo de aquí como una colección diferente Entonces solo voy a hacer esto como ejemplo. No tienes que hacerlo. Puedo crear un número aquí, digamos, para mi H dos talla, y luego otro para mi H talla única. ¡Vaya! Y entonces sólo puedo agruparlos juntos. Y llamar a este grupo tamaños de fuente. Todavía está bajo la colección de dispositivos, por lo que no necesitaría aplicar el modo variable para las fuentes también. Pero actualmente, la forma en que lo tengo configurado es que está en una colección diferente. Por lo que también voy a necesitar aplicar el modo variable para fuentes de móvil. Y, boom, nuestro texto aquí ahora está aplicando el tamaño H tres para móviles, lo cual es increíble. Creo que hasta podemos chocar esto hasta 32 pixeles. Vamos a probar eso. Y eso se ve bien. Así es como podemos usar variables para alterar nuestras fuentes y los tamaños dependiendo de la pantalla en la que estés. Así que aprendimos a usar variables hasta el momento en la creación de un diseño responsive. Volvamos a la ex sectre para probar de otra manera usando restricciones 64. Uso de restricciones: Cómo usar variables para crear diferentes tamaños de dispositivo, cambiar rápidamente nuestra página web a una página móvil, y así sucesivamente. Y creo que ahora es un buen momento para aprender a crear también un diseño responsive usando restricciones. Por lo que las restricciones en Figma se pueden encontrar en el lado derecho del panel por aquí A veces puede que no sea visible, por lo que es posible que deba hacer clic en este pequeño botón que dice restricciones, y verá las restricciones aplicadas a sus elementos en el marco. Lo que las restricciones hacen es permitir que los elementos dentro de su marco reaccionen y respondan al tamaño del marco o al contenido o al marco padre en su lugar. Como ejemplo, ahora mismo, por defecto, cada elemento de tu diseño va a tener una restricción superior e izquierda. Lo que esto significa es que si expandes tu marco, si cambias el tamaño, por defecto, todo intentará mantener la izquierda y la parte superior constreñida, lo que siempre se adjunta a la izquierda y a la parte superior de tu proyecto. Va a duplicar esta página de descubrimiento de destino solo para crear una versión móvil usando solo restricciones. Entonces ahora para la barra NAV aquí arriba, si mantengo el turno, también estableceré una restricción horizontal izquierda y derecha. Entonces ahora está constreñido a la derecha también. Lo que va a pasar es que si ampliamos nuestro marco, la Navbar ahora lo está expandiendo con el tamaño del marco, y si lo reduzco, también se hará más pequeño Ahora, por supuesto, todavía tenemos ese problema donde ciertos componentes se verán mal, por lo que técnicamente todavía necesitaremos cambiar esto a una versión de dispositivo móvil. Eso sigue siendo necesario. Ahora, por supuesto, ahora mismo, la forma en que esto se configura usando la versión móvil es que está configurado en un ancho fijo. Pero si solo eliminamos temporalmente este ancho fijo, en realidad podemos cambiar el tamaño de este a cualquier ancho que queramos para nuestro dispositivo Entonces ahora porque está ocupando toda la página aquí, seguirá haciendo lo mismo. Aún se encogerá y se expandirá. En respectivo a su contenedor padre, que está redimensionando, también. Ahora para éste, podemos hacer exactamente lo mismo por el contenido. Si me sumerjo aquí mismo, el tamaño aquí podría funcionar para un tamaño de tableta. Y entonces lo que podemos hacer es también aplicar una restricción superior izquierda y derecha. Pero antes de hacer eso, voy a mostrarte rápidamente de qué se tratan las otras limitaciones. Entonces podemos tener una restricción correcta. Entonces ahora lo que va a pasar es que si una página se expande aquí, este contenido siempre se quedará a la derecha. Si hago centro, entonces como lo adivinaste, el contenido se quedará en el centro, lo que podría funcionar también, por cierto Y esto se usa con más frecuencia en web. También puedes usar la habilidad. Y cuando lo pones a habilidad, si expandes tu página, lo que sucederá es que este contenido también se extenderá horizontalmente para que coincida dependiendo de cuánto lo estés escalando. Es un poco diferente porque como puedes ver, el espaciado entre la izquierda y la derecha son diferentes. Entonces se está encogiendo y expandiendo. No es lo mismo que colocarlo a izquierda y derecha. Y la mayoría de las veces, no queremos usar escala. En una página como esta, la izquierda y la derecha tienen más sentido. Y ahora mismo las cosas se estropearon un poco, de hecho, voy a ir al Comando Z todo el camino regreso hasta que tengamos este y luego cambiarlo a izquierda y derecha Entonces ahora, esta es una mejor solución donde las cosas se expanden aquí, y luego también se encogen para que coincidan con diferentes tamaños como una pantalla móvil. Esto no es perfecto, y necesitarás seguir trabajando con tu diseño automático para arreglar esto para dispositivos móviles. Así que puedes hacer un montón de cosas para arreglar esto. Entonces para este elemento de aquí, por ejemplo, necesites envolverlo también para que si la página se está reduciendo, y para este marco, queremos establecer contenedor de campo Entonces ahora, si la página se está reduciendo, los campos también se están moviendo a nuevas líneas. Lo mismo aquí. Para este, queremos hacer una envoltura y ya está en contenedor de llenado, así que esto debería funcionar. Ahí vas. Así que muy rápido, tenemos una página que podría funcionar en el móvil. No es un mal comienzo. De hecho, eso fue bastante rápido de configurar, pero es posible que aún quieras un diseño diferente en tu móvil para que no esté ocupando tanto espacio en la parte superior con todos los campos y la forma en que todo está configurado. Entonces, idealmente, todavía quieres hacer algunas personalizaciones a esto Pero usando restricciones, cambiamos rápidamente el tamaño del contenido aquí para que dependa del tamaño de la página o del tamaño del marco. Ahora, aún no hemos tocado las restricciones verticales, pero si jugamos con las restricciones verticales, también tienes opciones similares donde las cosas se pueden constreñir a la parte inferior a la parte superior e inferior, al centro y a la escala. Si haces bottom, entonces si la parte inferior de la página se expande, el contenido se moverá aquí para mantener el mismo espacio entre, ya sabes, donde termina esto aquí y la parte inferior, que es 684 pixeles aquí. Por lo que intentará mantener ese 684 píxeles. Nuevamente, por defecto, está ajustado a la cima. Así que mantendrá cualquier espaciado que tenga desde la parte superior de este marco, que es 136, que es lo que tenemos por defecto. Y claro, tenemos las otras opciones como centro. Entonces, si la página se expande, intentará mantenerla centrada de acuerdo a donde estaba antes. Y también tienes la misma opción de báscula. Entonces así es como usas las restricciones. Aunque cuando comienzas a usar ancho máximo y todo el layout y variables, hace que sea menos necesario usar restricciones. Entonces no es algo que probablemente uses a diario, pero sí tienes esa opción. Muy rápido, si también quieres cambiarlos rápidamente, pero usa las imágenes aquí, siempre puedes configurar esto al principio desde aquí Puedes poner esto al fondo desde aquí. O si mantienes turno, puedes configurarlo tanto en la parte superior como en la inferior. Y de manera similar, si mantienes turno, puedes simplemente apagar uno u otro. Se puede fijar al centro desde aquí. Y recuerde, está controlando las restricciones horizontales desde aquí, y luego estas líneas verticales son para que usted controle sus restricciones verticales. Pero por defecto, queremos poner éste a arriba y éste a izquierda y derecha para que podamos rápidamente, si cambiamos esto a 440, podemos configurar rápidamente un diseño móvil. Sí, ahora tenemos una página móvil, es posible que quieras hacer cambios aquí y los elementos en su interior no están tan espaciados. Y entonces tal vez quieras establecer los campos como ancho completo aquí. Y tal vez estos podrían ser auto layout. Y luego a partir de aquí, podemos establecer éste en 16 píxeles también. Y quiero traer el relleno para que sean 24 pixeles de los lados y 24 pixeles de la parte superior. Y luego simplemente se expandió así que también está encendido. Puede que tengas que hacer algunos ajustes aquí y allá para mejorar esto en el móvil, pero debería ser relativamente simple Entonces, con algunos cambios simples, puede tener un diseño móvil para su página de descubrimiento de destino. 65. Organizar nuestro archivo: Me tomé un tiempo para completar mis versiones móviles. Si no lo has hecho, tómate tu tiempo para hacer eso para las otras páginas que no has hecho. Y ahora en esta conferencia, quiero organizarlo todo rápidamente y solo asegurarme de que el proyecto se vea pulido. Lo único que me llamó la atención cuando lo estaba pasando es que para nuestro registro con número de teléfono e inscríbase con Google, para nuestro registro con Google, podemos hacer que se vea un poco mejor solo tener ahí el icono o el icono de Google. Así que ahora mismo tenemos este icono de show left que podemos usar. Y luego para nuestro ícono, solo tenemos los íconos limitados que configuramos. Obviamente podemos volver aquí y cambiar o agregar otro icono. Si solo abres tu navegador y buscas un SVG. Entonces veamos si puedo solo estoy abriendo íconos de Foster para ver a lo mejor ya tienen un logo de Google aquí. Y lo hacen. Puedes usar este aquí que tienen o simplemente buscar el logotipo de Google, SVG, en tu navegador, y luego verás uno que se vea así y solo agregarlo aquí en tu proyecto. Puede que no se hayan agregado, así que sólo vamos a traerlo aquí. Sólo voy a pegarlo, y esto es demasiado grande. Lo queremos hacer, veamos qué tan grandes son estos, 20 por 20. Así que queremos simplemente presionar K en nuestro teclado para escalar rápidamente esto a 20 por 20. Y entonces solo voy a traerlo aquí arriba y también convertirlo en un componente y llamarlo íconos Google Logo para que podamos rápidamente en nuestro botón de aquí abajo, cambiar esto al logotipo de Google. Eso se ve mucho mejor y muy parecido a lo que tenemos en otras apps. Ahora fírmalo con el número de teléfono. Simplemente podemos hacerlo para que el usuario llene su número de teléfono y luego diga, continúe. Ahora mismo, se ve un poco raro como si le faltara el campo del número de teléfono. Entonces, ¿por qué en realidad no copiamos un campo aquí y lo pegamos aquí y luego llamamos a éste? Número de teléfono, y solo pondremos un número de teléfono de muestra más uno, dos , uno, dos, uno, dos, tres, uno, dos, tres, cuatro, guión aquí. Y luego solo vamos a diseñar estos dos y acercarlos un poco más, tal vez con ocho píxeles de distancia. Entonces parece que están emparentados. Eso se ve un poco mejor. Y siempre podemos registrarnos primero con la opción de Google y luego tener la opción de número de teléfono. Entonces eso es un poco de mejora ahí. Esta página se ve bien. Esta página también se ve bien. Tenemos los bajantes aquí, y luego mi móvil se ve un poco disperso. Lo que podemos hacer es como seccionar los diseños móviles y luego el diseño web por separado, solo para organizar rápidamente el archivo. Así que sólo podemos ir aquí y hacer una sección. Voy a dibujar una sección alrededor las pantallas de mi móvil y llamar a esto la sección móvil. Y luego voy a presionar Enter para seleccionar todos los marcos dentro y simplemente organizarlos por este pequeño icono. Y luego, cuando organices todos tus fotogramas, puedes acercarlos rápidamente, tal vez con 100 píxeles, espaciando entre ellos. Y luego si haces doble clic en los bordes de tu sección, redimensionará de manera automática para que coincida con el contenido que hay dentro Entonces ahora tenemos todas las páginas móviles ahí, y podemos hacer exactamente lo mismo sección fuera de las páginas web aquí. No tienes que hacer esto, pero me imagino que es más agradable. Y luego solo tienes una versión web del mismo, y luego pulsa Enter para seleccionar todos los marcos y simplemente organizarlos aquí. El filtro y todo se estropeó un poco ahí arriba, pero lo arreglaremos y solo haremos la línea superior Y traeremos este filtro desplegable en este otro justo aquí abajo donde debería estar. Y voy a mantener los dos espacios fuera este un poco más. Ahí vamos. Esas son nuestras pantallas móviles, y luego tenemos nuestros componentes, que ya es una sección también. Entonces se ve bien. Tenemos una sección de componentes, tenemos una sección web y móvil. Ahora, ahora mismo, tenemos aquí estas maquetas. Siempre puedes crear nuevas páginas y mover tu web o móvil a esas páginas. Me gustaría tener para una app sencilla como esta, todo en una sola página. Bien, así que esto se ve muy ordenado y organizado, y ahora es el momento de volver y de hecho convertir esto en un prototipo. Y así hagámoslo juntos en la siguiente sección. 66. Prueba nuestra aplicación con DesignPro: Organizamos nuestro archivo, y está empezando a verse genial. Ahora, para llevar nuestros diseños al siguiente nivel, hay algunas cosas que podemos hacer para verificar y asegurarnos de que nuestros diseños sean accesibles y amigables y que no haya problemas de interfaz de que los usuarios experimenten cuando pasen por el uso de nuestra aplicación. Un enchufe que encontré es súper útil ayudándonos con esto se llama Design Pro. Si buscas en Plug ins y Widget para Design Pro, encontrarás este plugin de revisor de diseño de IA y podrás abrirlo. Este complemento nos ayuda a mejorar la copia en nuestra página, verificar la accesibilidad y auditar nuestra interfaz de usuario. Tómate un segundo aquí para firmarlo por una cuenta. Nosotros también lo vamos a hacer. Una vez que hayas iniciado sesión, verás la página que has seleccionado. Entonces, si lo cambio a otra página, veo la página que estoy viendo ahora mismo, y puedo elegir hacer una reseña en esa página. Página que me interesa ahora mismo es nuestra página principal, que es la página de descubrimiento de destinos, porque esta es probablemente una de las páginas más visitadas. Pero claro, puedes ejecutar este plugin en cualquier página y preferentemente en todas las páginas a lo largo de tus diseños. Desde aquí, puedo elegir una revisión, diseñar pro Mejorar nuestra copia, auditar la IA, así que captura cualquier problema de interfaz de usuario y ayudarnos a seguir las mejores prácticas. Asegúrese de que nuestro diseño cumpla con las pautas de accesibilidad, lo cual puede ser muy importante en el diseño para asegurarse de que sus diseños sean accesibles y que funcionen con todos. Y para las páginas de destino y los lugares donde tienes llamada a la acción, pueden ayudarte con la conversión y aumentar tu conversión en esos sitios web. Siempre puedes obtener una opinión experta uno a uno si quieres una opinión más profesional sobre esto. adelante y ejecutemos la interfaz de usuario de auditoría aquí para ver qué tipo de problemas de interfaz de usuario podría tener esta página. Entonces vamos a golpear Vamos a repasar. Va a tardar un segundo buscar el diseño, pasarlo por él y hacer que su IA revise todo en este diseño Bien, así que ahora la interfaz de usuario de auditoría está lista para funcionar. Podemos echar un vistazo a lo que fueron los comentarios aquí. Entonces primero, te dará algunas cosas positivas que encontró en nuestro diseño. Solo se usaron dos fuentes, excelentes maridajes de fuentes. Esto es increíble. Y todas estas son cosas geniales como diseñador para ver. Y luego justo abajo, verás todo lo que necesites arreglar. Entonces aquí mismo, podemos hacer clic en Inspeccionar para ir exactamente de donde viene este tip. Y es mencionar que el logo aquí y la sección de perfil de usuario deben estar en la misma línea de base vertical. Por lo que coincide con el logo. Como aquí hay un poco de diferencia, este es de 48 píxeles, mientras que la fuente aquí es de 38 píxeles. Entonces visualmente, no está del todo en la misma línea que ves en el centro. Esta es una gran solución. De hecho, podemos ir directamente a nuestra Navbar y hacer este cambio para que este texto tenga 48 píxeles y esté en el centro a la mitad Y así ahora si volvemos, aunque no sea muy obvio, pero estos son cambios sutiles que son importantes en tus diseños. Sí, esto fue útil y solo deshazlo. Entonces sabemos que terminamos con ello. Después ve a la siguiente. Digo que el color naranja aquí podría ser el mismo que este de aquí en cuanto a la marca. Entonces eso es secundario 800. Así que simplemente podemos ir a nuestra tarjeta por aquí y aplicar la secundaria 800. De hecho, quiero hacer eso por el otro también. Así que no volver aquí, definitivamente se ve más alineado ahora. Voy a desestimar esto Y entonces hay un montón más de lo que nos dio aquí, y podemos repasar cada uno en profundidad e incluso darte la fuente de donde viene. Te recomiendo que revises esas fuentes para entender realmente, especialmente como diseñador que recién está comenzando, ¿en qué se basa realmente esta retroalimentación? Creo que en general, hemos hecho un buen trabajo armando este diseño porque tenemos muchos aspectos positivos Probemos nuestra página de detalles de destino y elegimos una auditoría de accesibilidad y ejecutemos eso y veamos qué tipo de resultados obtendremos aquí. Y en tan solo unos segundos, la retroalimentación está lista. Entonces nos está dando una calificación basada en el color del texto y este fondo. Nos da algunas sugerencias sobre cómo podemos arreglarlo aquí también, y podemos aplicarlos directamente aquí. Entonces este es un plug in súper útil, y te animo a que lo uses en tus proyectos. 67. Exportar nuestros diseños: Entonces, antes de saltar y trabajar en nuestros prototipos, quiero mostrarte rápidamente cómo puedes exportar tus diseños fuera de FigMA. Digamos que tienes un amigo o un colega o compañero de trabajo pidiendo algunas versiones PNG de tus diseños. Obviamente, puedes compartir el archivo Figma con ellos, y lo cubriremos en la sección futura Pero si quieres exportar rápidamente tus diseños de aquí a tu escritorio o donde sea, puedes seleccionar marcos, y aquí abajo, puedes ver una sección de exportación y puedes hacer clic en Configuración de exportación, y por defecto, es una X, que es el tamaño original. Pero claro, puedes cambiarlo a dos x si quieres una imagen de mayor resolución o mayor resolución, y luego puedes elegir el tipo si quieres JPEG, PNG, SVG o PDF. Y luego simplemente presiona Exportar y te preguntará dónde quieres exportarlo, y luego obtendrás un PNG. Y luego te preguntará dónde quieres tu PNG, y luego elegirás, consigue este bonito PNG aquí que podrás compartir con otras personas. Fresco. Ahora, digamos que quieres exportar aquí toda la sección para simplemente mostrar en qué has estado trabajando. De hecho, puedes exportar toda esta sección web y puedes previsualizar cómo sería eso. En realidad exportaría todo junto como una sola imagen. Entonces porque es gigantesco, solo te estoy mostrando un adelanto de ello. Así es como se vería. Pero lo más probable es que quieras exportar marcos individuales dentro y todos los elementos y esas cosas. Si tienes una sección así, simplemente puedes presionar Enter para seleccionar todos los fotogramas dentro y luego exportar varias cosas a la vez. Para que puedas exportar siete capas. Y Figma seguirá adelante y exportará individualmente todos sus fotogramas como imagen Y esto puede ser útil para que los desarrolladores entren aquí y digamos que quieren usar el mismo ícono de estrella aquí, solo pueden entrar y seleccionar este vector y exportar esto como un SVG, que les permitirá usarlo en su proyecto de manera muy fácil. Entonces así es como lo exportamos. También quiero mostrarte si quieres exhibir tu proyecto en tu portafolio o hacer que se vea bien, cómo podemos utilizar algunos de los archivos de la comunidad para poner nuestro proyecto en una computadora real y hacer que se vea genial. 68. Diseños listos para portafolios: Entonces esto es lindo. Podemos exportar estos como marcos individuales, lo que se ve genial. Pero estoy seguro de que quieres poner estos diseños en tu bonito portafolio, y quieres que se vea genial. Y entonces aquí es donde podemos usar algo de magia y figma, así como los archivos de la comunidad Entonces, si te diriges a los archivos de tu comunidad y buscas y si solo vas a la página de inicio aquí de los archivos de la comunidad, puedes buscar, digamos, laptop, mockup o algo por el estilo, o si quieres la versión móvil, puedes buscar una maqueta móvil Y se pueden ver múltiples como este aparecer. Así que siéntete libre de elegir el que quieras. Y hay muchos gratuitos, y puedes ver cuáles y puedes ver cuáles coinciden con la vibra de tu cartera. Sólo por un ejemplo, voy a elegir uno de ellos solo para exhibir esto, voy a elegir uno de los gratuitos de aquí. Ábrela me pareció esta bonita que voy a usar, solo para mostrarte cómo funciona esto. Harás clic en Abrir para abrir Infigma, y luego te pedirá que pegues tu diseño Así que en realidad puedes ir a esta página que tienen en esta específica y leer cómo funciona. Y usa un plugin llamado Mockups Plugin. Entonces ahora, podría ser diferente del archivo que encontraste, pero este es el que encontré, y voy a copiar mi página de descubrimiento de destino y traerla aquí y solo leer la información. Pero rápidamente te mostraré cómo funciona. Entonces vayamos a esta escena. En esto donde dice marcador de posición, vamos a pegar nuestro diseño en Y obviamente, así es como aparecen, así que solo puedes hacerle cambios si no se ve bien. Entonces, desde el principio, este color rojo es realmente molesto. Así que voy a cambiar esto y voy a traer esto un poco aquí. El resto se ve bien por ahora. Y entonces lo que quieres hacer es abrir tus plug ins. Quieres buscar esta maqueta plug in y abrirla. Y lo que hace este plugin de maqueta, te permite poner tu frame dentro de una maqueta Y actualmente se paga plug in, por lo que puedes optar por usarlo gratis registrándote para una prueba gratuita. Así que siéntete libre de hacer eso. Estoy seguro de que hay versiones gratuitas de la misma, pero si estás listo para armar tu portafolio, definitivamente vale la pena registrarte para la prueba gratuita. Entonces ahora quieres buscar este complemento Mk up en tu pestaña de complementos, y luego una vez que lo abras, posible que veas una página que te pida que te vayas a Pro, pero no necesitas simplemente hacer clic en Distorsionar Eso es lo que quieres. Entonces quieres seleccionar la capa que quieres pegar en la otra capa. Así que justo por aquí, dice, selecciona forma de vector. Entonces primero, te pide seleccionar la capa en la que quieres pegar tu marco, y es esta de aquí, la pantalla, y la capa que queremos pegar es un marcador Y luego quieres hacer aplicar, y boom, toma tu diseño de ahí, lo distorsiona de una manera donde es agradable en la computadora portátil, y se ve genial Y puedes simplemente exportar esto a cualquier lugar que quieras. Así es como haces formatos geniales y presentables de tus diseños para compartir con otras personas o tu portafolio, y así sucesivamente Y ahora creo que estamos listos para volver y convertir esto en un prototipo en vivo que podamos probar en nuestra web y dispositivos móviles. 69. Definir un flujo de usuarios: Es hora de divertirse con la elaboración de prototipos realistas Entonces, en las próximas conferencias, vamos a descubrir cómo podemos usar la herramienta de creación de prototipos para presentar realmente nuestra aplicación a usuarios potenciales u otras partes interesadas y miembros del equipo en nuestro equipo, inversores, etc. Antes de comenzar con un prototipo, queremos definir nuestro flujo de usuarios. Y, por supuesto, puedes hacer esto ya sea simplemente usando lápiz y papel o simplemente definiendo y escribiendo exactamente a dónde quieres que vayan los usuarios en la aplicación. Entonces típicamente en un prototipo, comenzamos con una página inicial donde elegimos la página inicial donde comienza el flujo de usuario, y podemos tener diferentes flujos de usuario. Podemos tener un flujo de usuario para un usuario que haya iniciado sesión que comience en la página Descubrimiento de destino. Podemos tener un flujo de usuarios para un usuario que aún no se ha registrado, y así los iniciaremos en la página de registro, que es lo que vamos a hacer. Vamos a armar un prototipo que inicie al usuario en la página de registro. Entonces vamos a seguir adelante y duplicar la pantalla, hacerla para que podamos realmente parecer que estamos rellenando la información, digamos el correo electrónico y la contraseña, y luego a partir de ahí, el usuario se registra y va a la página de verificación, que de nuevo duplican esta página, parece que tenemos algún código de verificación escrito, continuar y luego llegar a nuestra página de descubrimiento de destino Ahora, desde nuestra página de descubrimiento de destinos, tenemos la opción de llevar al usuario a esta página de Londres Reino Unido que ya hemos diseñado. Y también nos sumergiremos un poco en cómo podemos usar realmente variables en nuestro prototipado Entonces no importa en qué opción haga clic el usuario, al menos para los cuatro primeros aquí, porque el plan de Infigma'sPaid actualmente solo puede tener cuatro modos, y vamos a usar los Entonces lo haremos para que en la misma página o en realidad dupliquemos esta página. Y en esa página, sin tener que hacer cada ciudad diferente, haremos para que las variables realmente puedan hacer el trabajo por nosotros. Solo para explorar eso si quieres tener esa opción, ¿cómo lo harías para configurarlo en tu prototipo? Y luego seguiremos adelante y en realidad reservaremos la habitación. Entonces, una vez que el usuario va a la página donde puede ver la página de detalles de destino, puede navegar. Y luego a partir de aquí, seguirán adelante y reservarán una habitación desde donde irán a la página de confirmación de la reserva. Y luego aquí, volveremos a tener otra copia de esta página con la información rellenada y luego confirmaremos la reserva. Ahora, hay una página que viene después de esto, que es para confirmar o para ver confirmado tu viaje. Y para esa página, nos divertiremos un poco con animaciones y veremos cómo podemos realmente animar una bonita tarjeta de reserva confirmada con un poco de confeti en el fondo usando animaciones y regalos en prototipo Entonces ese es el flujo de usuarios con el que vamos a ir. Se puede hacer exactamente lo mismo para el móvil. Voy a dejar eso como un ejercicio para que lo hagas. Es exactamente el mismo proceso que vamos a seguir. Y antes de hacer eso, lo vamos a hacer es volver a la siguiente sectura y descubrir cómo podemos usar Figma AI para hacer prototipos para 70. Crea prototipos con IA: IA IgMA en realidad también puede ayudarnos a armar prototipos, y pasará por tus marcos e intentará dar sentido a cómo hacer conexiones entre ellos, y de a cómo hacer conexiones entre ellos, ninguna manera es perfecto todavía ni nada parecido a él, pero sí ayuda para proyectos más simples Entonces, si tienes un proyecto más complicado, que ni siquiera funcione, pero siempre puedes darle una oportunidad, y luego si no funciona, siempre puedes revertirlo o arreglar las conexiones también Entonces para acceder a él, todo lo que necesitas hacer es ir a tu panel de acción por aquí o a la pestaña de acción aquí abajo, y luego ves este prototipo de make. Y si haces clic en él, te pedirá que selecciones algunos marcos de nivel superior. Por lo que queremos seleccionar algunos de los marcos manteniendo pulsada la tecla Shift. Así que vamos a elegir todos nuestros fotogramas por aquí, y luego podremos presionar Command Enter o simplemente hacer prototipo. Tomará un segundo, y comenzará a fiar todas las conexiones aquí Y como pueden ver, ha hecho un trabajo bastante bueno. Ya ha creado muchas de las conexiones entre diferentes páginas. Por lo que sabe que si haces clic en Regístrate, irá a esta página para la verificación. Lo mismo que registrarse con el número de teléfono. Y luego desde aquí, haz clic en Continuar, debería ir a Destination Discovery, y luego haciendo clic en estas dos tarjetas específicamente te llevaremos aquí a la página de detalles del destino. Y vemos incluso para el Bbton, en realidad sabe cómo enviar vuelta al usuario o cuál es el botón B. Y si haces clic en alguno de los botones aquí, ahora esto nos lleva a la página de reservas, aunque eso no es correcto. Lo que queremos hacer es si hacen clic en Ver disponibilidad, no queremos que eso lleve aquí al usuario. Queremos que el usuario en realidad solo se desplacen hacia abajo a esta, sección de alojamiento o probablemente en el prototipo, no queremos que pase nada ahí Tampoco queremos encontrar habitaciones para llevarlas allí. Eso es solo para ayudarles a encontrar habitaciones aquí. Así que simplemente haciendo clic en uno de estos debería llevarlos a esta página. Vemos que tenemos nuestro botón de retroceso aquí. Y así podemos realmente previsualizar esto incluso ejecutándolo y viendo cómo se ve eso. Entonces si solo hago clic en Registrarse, voy a verificación, continúo. Puedo elegir este de aquí, va aquí. Impresionante. Pero nuevamente, tenemos estas conexiones que están equivocadas, así que no queremos que esas vayan ahí. Queremos que la sala de libros nos lleve allí. Y mientras estás en modo de vista previa, en segundo plano, mi fotograma está cambiando solo para mostrarme exactamente en qué fotograma estoy. Y también puedo probar los botones de retroceso, y funciona. No hay animación ni nada por el estilo, así que es como un prototipo básico que armó, pero sí funciona. Y a partir de aquí, no sabe a dónde ir porque no hay otra página después de esto. Aquí, en realidad puedes mantener estas conexiones, o puedes hacer clic en las individuales y eliminar esas conexiones simplemente haciendo clic en menos aquí. Entonces, si no quieres estos y estos están equivocados, podemos cambiarlos o simplemente quitarlos aquí y luego decir quedárnoslo. Y si lo mantienes, entonces todas estas conexiones que realizó FIM AI se mantendrán y podrás utilizarlas para tus prototipos Ahora, obviamente, no voy a hacer eso porque vamos a pasar por cómo conectar manualmente esos marcos también. Pero ten en cuenta que puedes usar la IA FGM para armar tus conexiones entre las diferentes páginas, bastante rápido y con bastante facilidad Pero claro, estamos aquí para aprender todo sobre cómo hacerlo nosotros mismos, también. Y por eso vamos a volver en la próxima conferencia para empezar a duplicar algunos de los marcos y construir juntos un bonito prototipo 71. Páginas con estado relleno: Entonces, para estas páginas, al igual que nuestra verificación de registro, queremos duplicarlas y mostrar un estado lleno. Y esto siempre es una buena práctica solo para mostrar cómo sería el prototipo una vez que el usuario realmente llena su información, y se ve más real. Entonces voy a seguir adelante y duplicar algunos de los fotogramas aquí que tienen textos en ellos, y solo uso ahí y arrastre la copia. Y solo puedes darle a tu marco un nombre diferente como tal vez un guión lleno o algo así, solo para diferenciar entre los dos. Y por aquí para nuestras entradas, me acabo de dar cuenta de que solo tenemos un tipo de marcador No tenemos un tipo donde el texto esté realmente rellenado. Entonces queremos arreglar eso al tener otra variante de la misma que nos permita tener el texto sea el estado relleno. Entonces hagámoslo rápidamente. Así que solo voy a expandir este marco de componentes manteniendo el comando ahí, trae esto un poco, nuestro campo de entrada. Y solo crea otra variante abajo. Y vamos a llamar a esta propiedad. Vamos a hacer click en éste aquí. Sólo muévalo un poco hacia abajo. Está demasiado cerca de ahí. Y vamos a llamar a esta propiedad uno, llenar y luego podemos tener esta a falsa y esta a verdad. Y la única diferencia es para este texto aquí, queremos hacer texto 500. Entonces parece que es un texto relleno. Y entonces simplemente podemos bajar aquí. Escribamos un correo electrónico de muestra como max.do@gmail.com o algo así, y luego puedes hacer clic en el campo y hacer estado lleno. Y lo mismo con la contraseña, cámbiala a llenada. Entonces parece que ingresamos alguna información. Y luego para crear una conexión entre estos dos, simplemente puedes hacer doble clic. Hacer prototipo para que cuando un usuario haga clic en cualquiera de estos campos, vaya a esta página y parezca que rellenaron la información. Y puedes hacerlo ya sea simplemente arrastrando conexiones entre cada uno individual o puedes mantener presionada la tecla Mayús, para que puedas seleccionar ambas. Entonces, si el usuario hace clic en cualquiera o, puedes dibujar una conexión usando este pequeño círculo. Entonces, si ves subir el círculo, así es como puedes agregar conexiones. Y entonces solo quieres arrastrarlo a este marco aquí. Entonces básicamente, por defecto, el disparador está al hacer clic. Así que cada vez que el usuario haga clic en estos campos, ya sea o navegará a la página del campo de registro. Y cambiar manualmente esas acciones, también. Puedes cambiarlo a algunas opciones diferentes que tenemos, que exploraremos, y luego puedes establecer la página de destino también. Pero como arrastramos la conexión manualmente a esta página y dibujamos esos fideos ahí para que sean llamados a la pantalla, ya no tenemos que hacer eso. Y la animación es instantánea, pero tienes algunas opciones diferentes. Para este tipo de página, puedes hacer disolver o simplemente instantáneamente ambos trabajos. Para algo como esto, normalmente lo dejaré en Instant. Básicamente ahora, si solo ejecutas el prototipo desde la página de registro o la vista previa del mismo, haciendo clic en cualquier página, podemos elegir dónde comienza nuestro prototipo. Entonces estoy haciendo clic en el marco de registro, y luego si pulsas este botón de reproducción aquí, lo presentará, o puedes previsualizarlo también, que acabamos de hacer en la conferencia anterior, pero presentarlo se abre en una nueva pestaña como esta. Y ahí lo tenemos. Y ahora si hago clic en estos campos, parece que los archivamos en. Increíble. Y ahora porque duplicamos esta página, cualquier conexión que ya tuviera la página, como el botón de registro seguirá funcionando y nos llevará a la página siguiente, que, por supuesto, esas conexiones son del prototipo make que tuvimos en la última conferencia. Entonces seguiremos adelante y solo dejaremos esos ahí, tal vez deshacernos de este de aquí, y podrás deshacerte de las conexiones solo hacer clic en ellas y luego hacer clic en Eliminar. Entonces dejaremos todo lo que ya se le ocurrió por ahora, y luego seguiremos adelante y exploraremos eso juntos sobre cómo hacerlo usted mismo. Por ahora, si quieres, puedes duplicar tu página de verificación, puedes duplicar tu página de reserva, y tengo un estado lleno, que es lo que haré también. Entonces, a medida que avanzas por el prototipo, parece que también estamos llenando información. Así que tómate un segundo para hacerlo, y luego en la próxima conferencia, vendremos y continuaremos con el resto de nuestras conexiones. 72. Disolver animaciones: Entonces aquí, ahora queremos crear la conexión entre los botones y la página de verificación. Entonces, si aún no lo has hecho, asegúrate de crear una conexión entre el botón de registro y dibujar una conexión a la página de verificación. Lo cual ya tengo aquí, y va a estar al click Navega a página de verificación y hazlo instantáneamente sin una animación. Y luego de aquí, también tengo otra página. Entonces, al hacer clic en cualquier lugar de este campo aquí o cualquiera de estos campos en todo el marco, realidad podemos dibujar una conexión con este estado de campo. Entonces parece que rellenaron el código de verificación, y luego haciendo clic en Continuar, los llevaremos a esta página. Ahora en tu prototipo, también puedes eliminar las conexiones de este botón Continuar, por lo que tienen que hacer clic en estos campos para primero llenarlos y luego continuar. Pero eso realmente depende de ti. Puedes hacer eso totalmente o puedes saltarte eso. Una cosa buena de las interacciones es que si quieres hacer cambios rápidamente en cualquier interacción que vaya a la misma página, en realidad puedes hacer clic en este botón aquí, que seleccionará cualquier interacción coincidente, que en este momento son estos dos botones. Entonces, de repente, digamos, para esta conexión, quiero realmente hacer una disolución, solo para ver cómo se ve. Eso lo puedo hacer desde aquí, y la animación ahora se disolverá. Entonces parece que esta página se desvanece en esta página, lo cual es agradable Y puedes elegir diferentes curvas de animación, así puedes elegir facilidad de entrada, y puedes previsualizarla aquí para ver cómo se ve eso o facilitar la salida, entrar y salir fácilmente. Ahora, es un poco difícil ver cómo se ve eso, así que voy a aumentar la duración solo para mostrarte. Entonces ves que todos ellos tienen una curva de animación ligeramente diferente. Y siempre puedes hacer uno personalizado si quieres ser más detallado con él sobre cómo aparece. También tienen algunos presets como este, que en su mayoría son buenos para, como, mover en animaciones, y los exploraremos en un segundo Pero antes de eso, solo seleccionemos una opción simple de facilidad de salida y 300 milisegundos, que es el tiempo que tardará en ejecutarse la animación Sólo para previsualizar eso, voy a cambiar a mis maquetas Entonces ahora si hago clic en esto y luego si continúas, hay un bonito poco fade, que es diferente a, por ejemplo, ir de esta página a esta página. Bien, asegúrate de tener esa conexión para tu botón Continuar para ir también a nuestra página Descubrimiento de destinos Y en esta página, en realidad podemos hacer algunas cosas diferentes. Podemos elegir ya sea en nuestro prototipo, queremos mostrar al usuario poniendo un destino o desde y hacia, o simplemente podemos hacer que haga clic en Londres Reino Unido. Y luego a partir de aquí, podemos escoger algunas fechas para las que el usuario va a reservar el viaje. Así que vamos a duplicar esta pantalla en tan solo un segundo cuando lleguemos a esa conexión. Entonces parece que el usuario escogió algunas fechas, y luego a partir de ahí, veremos la actualización del precio. Y luego una vez que se actualice, podemos enviarlos a una página de reservas que tenga sentido, que coincida con estas cinco noches, duerma dos, y así sucesivamente. Pero antes de hacer eso, volvamos a nuestra página de descubrimiento de destinos. Aquí también tenemos unos filtros y ordenados por botón que realmente queremos dar vida en nuestro prototipo, que ya tenemos los marcos para ello, si no tienes los marcos, tómate un segundo, diseña esos. Quieres que sean marcos individuales y no solo grupos. Y ahora mismo tengo marco de diseño automático para ambos, lo cual también está bien. Puede tener un diseño automático o un marco real. Volvamos a la siguiente sectura para explorar cómo configurarlos como superposiciones Así que no tenemos que diseñar realmente otra pantalla que muestre esos filtros que se están agregando al marco. 73. Conexiones de superposición: Conferencia, vamos a aprender una nueva conexión que realmente podemos hacer, y se llama una conexión superpuesta. Una conexión de superposición esencialmente te permite abrir otro marco dentro de tu marco en el que ya estás. Entonces, en el modo prototipo, puedes abrir cosas como menús desplegable, modelos y esos tipos de marcos dentro de tu fotograma actual. Y así esto lo hace más fácil que no tengas que duplicar marcos y tener uno que tenga el modelo abierto o cerrado, y es realmente sencillo crear esta conexión. Digamos, queremos hacerlo para el botón de filtro aquí. Simplemente hacemos clic hasta que tengamos el botón del filtro. Entonces, cuando el usuario hace clic en el botón del filtro, queremos arrastrar una conexión a nuestro menú desplegable de filtros aquí y soltarlo Y entonces nuestro disparador estará al hacer clic. Entonces, cuando el usuario hace clic en él, y hay un montón de disparadores diferentes a los que puedes cambiar esto, pero no lo necesitaremos por ahora. Los queremos para que cuando hagan clic en el filtro. Ahora queremos la acción en lugar de Navegar a, que es lo que hemos estado haciendo hasta ahora, que lleva al usuario de una página a otra. Queremos realmente cambiar esto y seleccionar open overlay. Y lo que hará la superposición abierta es abrir este marco encima de ese. Entonces ves que el overlay es actualmente el filtro desplegable, que es lo que seleccionamos La posición está por defecto centrada, lo que significa que estará en el centro de la página, que no es lo que queremos. Y tenemos un montón de opciones diferentes aquí, así que arriba a la izquierda, arriba central, etcétera, o podemos elegir manualmente dónde el cuadro desplegable filtrado en nuestro marco abrirá el cuadro desplegable filtrado en nuestro marco original Si haces clic en eso, entonces verás aquí dónde se abrirá el Overlay, y de hecho podrás moverlo. Así puedes moverlo justo debajo del botón de tu filtro con tal vez un poco de relleno entre ellos diez píxeles. Y ahora se abrirá exactamente aquí encima de todo lo demás. Ahora, tenemos algunas opciones diferentes. Podemos optar por agregar un fondo. Y si eliges un fondo, entonces en el prototipo, todo lo demás ese no es este filtro. Entonces todo lo demás aquí tenemos un fondo, que es 25% transparente, que es 25% pacto con un relleno negro, pero no queremos eso. Nosotros solo lo queremos para que no haya antecedentes. Y luego podemos elegir si el usuario hace clic en cualquier otro lugar fuera del marco de ese filtro, cerrará la superposición. Y sí, queremos eso porque eso tiene sentido, y la mayoría de las aplicaciones tienen una interacción similar. Y luego podemos elegir cómo se abre. Para que podamos tener una disolución. Podemos tener una mudanza. Y si eliges una mudanza, entonces el filtro vendrá de diferentes lados. Así podemos hacer que el marco del filtro salga de la parte inferior de la pantalla o de la derecha de la pantalla. No es muy común ver eso, y solo lo exploraremos en un segundo para ver cómo será eso. Entonces, por ahora, lo mantendré como mudanza, pero verán que ese no es realmente el tipo de movimiento predeterminado para este caso. Mudarse es genial para cosas como alertas o cajas modales y así sucesivamente. Y luego voy a seguir adelante y sólo mostrar cómo es esto. Entonces si vuelves, ahora, si haces clic en estos filtros, se abrirá. De hecho, se moverá de arriba a abajo, o de abajo hacia arriba. Y si ves cómo se ve, desaparecerá. Pero nuevamente, esta no es una interacción común o no una animación común que verás. Se puede hacer instantáneo o simplemente disolverse. Simplemente lo haremos instantáneo para ver cómo se ve eso, y se ve mucho más natural. Ahora mismo, dentro del filtro, realmente no puedes interactuar con nada, ni siquiera con los filtros aplicados ni borrar todos los botones, pero podrías cambiarlo totalmente para que puedas tenerlo. Entonces, si haces clic en cierta duración del viaje de Tip o tal vez algo aquí, las cosas cambiarán. Entonces no lo vamos a complicar demasiado porque para, ya sabes , desplázate así, realmente no quieres que sea tan complicado en el prototipo. Pero vamos a hacer una cosa. Lo haremos para que si hacen clic en los filtros aplicados, también cerremos la superposición. Entonces ahora si haces clic en esto, el botón para aplicar filtros, si intentas arrastrar una conexión, verás que tienes dos tipos de conexión diferentes que aparecen aquí y rápidamente podemos elegir cualquiera de ellos. Podemos elegir B aquí, que es bueno para las conexiones de navegación o podemos elegir superposición cerrada, que es lo que queremos. Entonces ahora lo que dijimos es que cuando hacen clic en Filtros aplicados, cierran esta superposición. Si elimino este, también puedo crearlo simplemente yendo por el lado derecho por aquí y haciendo plus on click action y cambiarlo para cerrar overlay. Ahí vas. Entonces ahora si hago clic en nAppliedFlters, también cerrará la superposición, y si hago clic en cualquier lugar afuera, también cerrará La brecha es un poco demasiado aquí. Entonces, si quieres hacer esos cambios rápidamente, simplemente haz clic en la interacción que ya creaste, y luego solo puedes moverla un poco hacia arriba, y también puedes usar tus teclas de flecha para mover las cosas ligeramente hacia abajo o hacia arriba. Y creo que este espaciamiento tiene más sentido aquí. Por lo que también puedes hacerlo para que las superposiciones también se intercambien Entonces solo para mostrarte, para el tipo uno, voy a crear otro sosteniendo a Alton duplicándolo Y entonces voy a tener este negrita, así que es uno seleccionado, y luego voy a tener la marca de verificación aquí también y luego quitarlo de aquí. Y para éste, voy a desatarlo. Entonces parece que tenemos la popularidad elegida ahora. Entonces en nuestro prototipo, queremos crear una interacción a esta página y hacer clic en lugar de Navegar dos, vamos a intercambiar superposición. Entonces la superposición va a ser intercambiada con esta de aquí en su lugar, y será instantánea Así que ahora vamos a crear otra conexión de superposición entre los ordenados por, que por defecto se establece en relevancia, arrastremos a esto aquí, y luego haremos onClick en lugar de Navigate dos, open overlay Y en lugar de centrarlo de nuevo, queremos elegir manualmente dónde se muestra. Así que solo escribe debajo el ordenarlo por con dos píxeles abajo, lo dejaremos encendido instantáneo, y luego haremos cerrar al hacer clic afuera. Y ahora veamos cómo se verá eso. Ellos darán click en él. Voy a abrir por relevancia. Y luego, si hago clic por popularidad, en realidad cambiará la superposición a popularidad. Pero realmente ya no puedo volver a la relevancia a menos que vayamos aquí y también creamos una conexión entre estos dos y digamos swap overlay nuevamente. Entonces, cuando haga clic en Relevancia, cambiará la superposición a la relevancia, luego a la popularidad. Verás, en realidad puedes elegir qué clasificación muestra aquí. Y ahora estás pensando, Bien, esto es genial, pero este texto aquí donde dice ordenado por relevancia, no está cambiando. Entonces, ¿podemos realmente hacerlo para que Figma entienda cuando hacemos interacciones como esa y cambiamos la clasificación a popularidad ¿Podemos mostrar popularidad aquí? Porque eso sería genial. Entonces ahí es donde entran las variables cuando estamos trabajando con nuestro prototipo. Entonces, ¿por qué no volvemos a la siguiente conferencia para aprender a usar variables y establecer variables que podamos hacer que nuestro prototipo sea aún más dinámico 74. Variables en prototipos: Conferencia, vamos a crear una variable que representará el texto dentro de este botón aquí, que sea relevancia al principio. Y luego si hacen clic en este menú desplegable y lo cambian a, digamos, popularidad, queremos que el texto o la variable cambien a popularidad. Entonces para hacer eso, vamos a crear una nueva variable aquí. Entonces vamos a entrar en nuestro modo de diseño, haga clic en variables locales. Y si no ves variables locales, asegúrate de que no tienes nada seleccionado. Simplemente haga clic en cualquier lugar afuera hasta que vea la configuración general de la página y luego abra las variables, y vamos a crear una nueva colección que solo llamaré a esta general. Entonces para algo como esto, podemos simplemente mantener estas variables bajo una colección general. Realmente no importa cómo lo llames. Vamos a crear una variable y usar la cadena uno. Y para este, no necesitas modos diferentes. Así que incluso en la versión gratuita de Figma, puedes configurar esto también en tu prototipo Vamos a llamar a esto una especie por. Puedes nombrarlo como quieras. Y por el valor, queremos cambiarlo a relevancia, que es el original ordenar por ambientación. Ahora bien, los únicos retos aquí porque solo tenemos un texto en nuestros botones, no podemos hacer que parte de un texto esté atado a una variable. Ahora aquí, idealmente lo queremos para que el ordenado por sea un texto separado de la relevancia. Entonces necesitamos que esta relevancia sea su propia línea de texto y no junto con la ordenada por. Entonces solo para mostrarte cómo funciona esto, voy a hacer algo que generalmente no recomiendo hacer en tu proyecto, pero solo para este caso, voy a seguir adelante y dar click derecho y desacoplar la instancia de este botón Entonces ahora este botón ya no está siguiendo la instancia del botón. Se puede ver que ahora tiene un borde azul a diferencia de este botón de filtros. Y aquí en el panel Capas, es solo AutolayouFrame ahora sin conexión con el componente buttons que Entonces, si haces algún cambio en el componente de botón, no se reflejará en este botón, pero eso también nos permite ajustar este botón a nuestro gusto Para un caso como este, lo que quiero hacer es que voy a cortar el texto de ahí por relevancia, y lo voy a duplicar pulsando el Comando D. Ahora bien, el espaciado para estos dos es un poco demasiado, así que voy a mantener Turno A mientras tengo ambos seleccionados. Y en vez de diez píxeles, tal vez podamos simplemente hacer cuatro píxeles entre ellos. Y para el segundo texto, ahora lo que quiero hacer es aplicar una variable a este texto para que este texto tome el valor de texto o cadena de la tabla de variables que tenemos. Y puedes hacerlo yendo por aquí para aplicar variable junto al texto y luego seleccionar ordenar por. Y ahora mismo, por alguna razón, mentalidades cadena variable o valor, y eso es porque cuando escribí relevancia aquí, no se salvó Pero solo para mostrarte cómo funciona esto, si lo reemplazas relevancia y pulsas Enter, ahí vamos. Ahora ha cambiado a relevancia. Entonces ahora tenemos este texto atado a esa variable, que sea lo que sea que lo cambiemos, cambiará aquí automáticamente. Ahora lo que queremos hacer es que cuando el usuario haga clic en popularidad, también queremos establecer la variable sort a popularidad. Y luego aquí, viceversa, queremos establecer el sort by variable a relevancia. Entonces probemos eso. Vamos a hacer clic en popularidad. Y vemos que ya tenemos una interacción que al hacer clic intercambia la superposición con este desplegable que tiene la popularidad seleccionada, pero también puedes tener una interacción extra si haces clic aquí y en una nueva acción. Entonces sobre esta interacción en este on click, podemos tenerla, así también hacemos otras cosas. Entonces en este caso, lo que queremos hacer, queremos también establecer una variable. Y en nuestra variable set, queremos elegir ese texto por el que acabamos de crear ordenar, y queremos cambiarlo a popularidad, que es solo una variable de cadena. Así que vamos a hacer clic en String literal y tener este cambio a popularidad. Entonces ahora la acción es que estableceremos la variable ordenar por popularidad cuando hagan clic en popularidad, y podemos ver esto aquí. Y podemos agregar más interacción. Entonces al hacer clic suceden más cosas. No necesitamos hacer nada desde aquí. Eso es todo lo que tenemos que hacer. Y luego vamos a hacer exactamente lo mismo, pero cuando hagan clic en Relevancia. Entonces vamos a hacer clic en la interacción aquí, elegir más aquí, establecer la variable, ir a buscar la variable ordenar por, o puedes buscarla rápidamente, ordenar por y presionar Enter, y luego escribir relevante. Entonces dale a Enter, y eso es todo. Entonces ahora vamos a previsualizar esto. Si vamos aquí a nuestras maquetas, podemos hacer clic en ordenarlo por, cambiarlo a popularidad Entonces ha cambiado aquí ahora a popularidad. Puedes hacer clic afuera, navegar a otra página, volver, y aún así está ordenado por popularidad. Entonces podemos ir por aquí y luego cambiarlo a relevancia. Sin embargo, una cuestión es que cuando cerramos esto y lo volvemos a abrir, automáticamente estamos abriendo el que tiene relevancia seleccionada. Entonces no es tan dinámico como queremos que sea así que hay una manera de hacer que esto funcione si realmente conviertes tu tipo desplegable en un componente. Entonces lo explicaré rápidamente en la próxima conferencia. 75. Variables en componentes: Entregamos un pequeño problema con nuestro prototipo donde abrimos el ordenado por elegir popularidad, y luego lo cerramos, dice popularidad aquí, pero lo abrimos de nuevo, y está en relevancia. Entonces, ¿por qué sucede esto? Eso es porque en este momento, estamos abriendo la superposición con relevancia seleccionada. Entonces, ¿cómo hacemos esta dinámica para que incluso esta parte funcione? Bueno, podemos usar componentes para eso. Entonces para hacer eso, lo que voy a hacer es convertir este desplegable en un componente usando Old Command K, y ahora es un componente. Vamos a deshacernos del popularidad seleccionada por ahora, y luego vamos a crear diferentes variantes de la misma con todos los diferentes elementos seleccionados. Volvamos al modo de diseño. Variante de propiedad, y la llamaremos seleccionada. Ahora bien, esta parte es realmente importante. Quieres deletrear exactamente como escribes la variable. Entonces en nuestra variable, también tenemos relevancia, igual que como se escribe aquí con R. La ortografía es realmente importante Ahora vamos a agregar otra variante. Vamos a arrastrar esto aquí abajo. Y ahora vamos a llamar a éste. Lo adivinaste popularidad. De nuevo, solo tómate tu tiempo, asegúrate de que tu ortografía sea correcta. Este, vamos a seleccionar popularidad y traer la marca de verificación sobre y desenboldar esta Vamos a hacer otra. Este va a ser el precio bajo demasiado alto. Y voy a copiar literalmente el texto de aquí y configurarlo como seleccionado. Vamos a negarla, trae aquí la marca de verificación, borra esta Y vamos a hacer dos más, uno, dos. Este con precio de alto a bajo como negrita, calificaciones, y voy a desvalidar en este, sin negrita este, corta la marca de verificación, tráelo Corta la marca de verificación, tráelo aquí. Entonces ahora tenemos una variante por cada una seleccionada. Solo tenemos que cambiar el nombre de los demás, así que asegúrate de renombrar este de alto a bajo. Presiona Enter y esta como calificaciones exactamente como se escribe aquí Presiona Enter, y ahí lo tenemos. Ahora, nuestra conexión se pierde porque no se puede crear una conexión superpuesta directamente a los componentes. Necesitas una instancia de ello. Entonces copiaremos una instancia aquí para nuestro tipo por desplegable. Y lo que quieres hacer ahora es crear una conexión con éste en su lugar. Pero antes de hacer eso, dentro de sus componentes, en realidad también puede crear conectividad. Los prototipos también se pueden configurar dentro de sus componentes. Entonces por ejemplo, aquí, tenemos popularidad haciendo clic en popularidad, vemos que hemos establecido variables ordenar por popularidad, pero también queremos cambiar también, y queremos seleccionar popularidad. Y lo que esto hará es que cambiará entre variantes. Entonces le estamos pidiendo a Figma que también cambie la superposición a popularidad Y ahora vamos a tener que hacer eso para todos los diferentes. Entonces voy a dejar eso como una tarea para que la hagas. Y por ahora, solo voy a hacer la popularidad y relevancia. Entonces ahora vamos a hacer esto por relevancia, y también vamos a establecer variable Ordenar por a relevancia. Y aquí para éste, así que ahora tenemos la popularidad funcionando, y tenemos la relevancia trabajando. Entonces ahora lo que queremos hacer es cuando el usuario haga clic en Ordenado por, queremos abrir la superposición aquí. Así que para el ordenado por ahora en click, queremos tenerlo abierto esta superposición, que es la instancia de ese componente desplegable. Queremos que sea manual y luego elija justo debajo de él, y dejaremos todo lo demás como está. Ahora bien, si solo cierras el prototipo, vuelve a abrir esta página para que podamos restablecerlo todo. Porque cada vez que ejecutas tu prototipo, estás reiniciando tus variables Ahora podemos establecer popularidad. Ha cambiado, pero todavía tenemos el problema. Como pueden ver, si cambio esto a popularidad , cambiará a popularidad. Se queda como popularidad, y luego si lo cambio a relevancia, se cambia a relevancia, y se mantiene en relevancia. Y puedes hacer eso por tus otros también. ¿Y adivina qué? Si lo cambias a popularidad, que no es la predeterminada, ve aquí, vuelve. Sigue en popularidad. Veamos qué pasa aquí detrás de escena. Lo que está pasando es que estás abriendo esta instancia, y Figma recuerda la última vez que se cerró el componente Así que recuerda que la última vez que abriste este componente, estabas en popularidad. Por eso se abre con esa variante seleccionada. Ahora bien, si vas al modo prototipo, si vas a la interacción, aquí está esta gestión estatal. De hecho, puede restablecer el estado del componente. Así que cada vez que haces clic para abrir esa superposición, se restablece el estado del componente. Entonces, si haces eso, ahora, si lo abres, vuelve a ser relevante. Entonces, técnicamente, esto de aquí no está realmente ligado a las variables, pero podemos hacer otra cosa para hacerlo realmente mucho más inteligente y atarlo a las variables yendo al modo de diseño y eligiendo cuál se selecciona aquí. Elige una específica o podemos aplicar la variable con ordenar por. Y así ahora cualquiera que sea la variable que hayamos seleccionado, ésta cambiará en base a eso. Entonces solo para mostrarte muy rápido aquí, si cambio el valor de esto a popularidad, de repente aquí tenemos popularidad seleccionada. Si selecciono precio, de bajo a alto, con la misma ortografía exacta, se seleccionará este. Entonces, por defecto, es relevancia. Ahora bien, si tienes un error tipográfico ahí o escribes algo aleatorio, por defecto, solo seleccionará el primero ahí, pero queremos dejarlo a relevancia, pero aún así quieres asegurarte de que no estás restableciendo el estado porque pase lo que pase, eso siempre volverá a restablecerse al primero Entonces ahora este desplegable es completamente inteligente y está ligado a nuestras variables 76. Interacción con el cursor: Lejos en nuestro prototipo, hemos estado usando la interacción on click para que el disparador esté siempre al hacer clic, lo que significa que el usuario hace clic un botón o hace clic en una determinada cosa y algo sucede. Hay otros desencadenantes que realmente podemos usar. Una de ellas que quiero configurar ahora mismo contigo es la interacción hover Entonces, mientras estás flotando sobre un botón, normalmente en un sitio web, obtienes algunos comentarios para que puedas ver que estás flotando sobre Incluso cuando estoy figma aquí, pasando el cursor sobre una determinada pestaña, se puede ver que la pestaña está resaltada en diferente color Así podrás ver que estás flotando sobre él y estás a punto de hacer clic y está en un botón Así que puedes hacer lo mismo por tu botón aquí. Lo que quiero hacer es que quiero ir al panel de diseño, configurar una nueva variante y llamar a esta propiedad Hover Por defecto, lo voy a establecer en false. Y luego voy a seguir adelante y arrastrar esto un poco para que tengamos espacio. Vamos a duplicar todos los diferentes botones que tenemos, así que creamos una interacción hover para todos ellos. Y vamos a cambiar hover aquí a true. Entonces ahora tenemos una nueva propiedad hover con false y true. Estos van a ser falsos, así que no están siendo flotados, y estos van a ser florecidos Y normalmente, lo que queremos hacer es establecer un color que sea ligeramente diferente, más oscuro o más claro. Entonces para este, vamos a hacer uno un poco más oscuro, tal vez primaria 800 o en realidad, eso es un poco demasiado oscuro, tal vez primaria 600. Y luego para nuestros botones blancos aquí, queremos hacer tal vez un color gris. Entonces solo un poco más oscuro. Y para el trazo también, queremos hacer un trazo gris, así que solo voy a cambiar el trazo para que sea más gris. Y así esas serán las interacciones hover. Y ahora solo tenemos que crear la interacción yendo al panel prototipo y creando conexión entre este botón a este de aquí. Cambia a Hover y queremos elegir una animación agradable de disolver Y en lugar de enclck, queremos hacer flotando la pared. Mientras el usuario está pasando el cursor sobre el botón, cambiará a este de aquí, y cuando ya no esté flotando, volverá automáticamente a este de Pensándolo bien, esto podría ser una diferencia un poco demasiado ligera , así que solo voy a hacer que sea quizás primaria 700. Ahí vamos. Y ahora vamos a hacer exactamente lo mismo, pero entre los diferentes botones. Y Figma recordará los últimos ajustes que configuraste en tu interacción Entonces, con la excepción de cambiar este a ballena flotando, lo mismo entre estos, mientras se cierne, y por último, estos mientras se cierne. Y ahora en todo el proyecto, nuestros botones tienen interacción hover, y se aplica en todas partes para todos los botones Ahora bien, si recuerdas esta de aquí, despegamos la instancia para ésta Entonces por eso no tienes una interacción para esa. Pero si vas a cualquier parte tu proyecto donde estés usando tus botones, ahora hay una interacción Hubbard Es hora de completar lentamente nuestras conexiones. Así que hemos estado trabajando un poco en la página Establecer Descubrimiento de Destino, y luego en nuestra página de Detalles del destino, volvamos en la siguiente etapa para comenzar a crear más interacciones en nuestra página de detalles de destino y completar lentamente nuestro prototipo. 77. Desplázate a Interacción: Página de detalles del destino, ya tenemos una conexión creada para los destinos B a A. Si no tienes uno creado por FIC MI, siempre puedes agregar una nueva interacción, y al hacer clic tu W para elegir Acción Atrás. Lo que hace Action Back es que enviará al usuario en el prototipo regreso exactamente a donde sea que venga. Entonces, si vinieron de esta página y dan click a y en la página de detalles de destino, volverá a esta página, vino de otra página en el prototipo, volverá exactamente a esa página. Entonces ya tenemos eso creado. Para este botón aquí, ver disponibilidad, queremos hacerlo realmente para que al hacer clic se desplace al usuario hacia abajo a la sección de alojamiento porque ahí es donde el usuario realmente toma la acción final de elegir tu habitación y luego reservar Así podemos crear una interacción aquí. Vamos a elegir al hacer clic en Desplazar dos, y esta secciones ya creadas. Podemos cambiar el desplazamiento aquí en el pergamino, que echaremos un vistazo en tan solo un segundo, y luego podemos elegir si es instantáneo o animado. Creo que la animación se ve mejor. Entonces ahora aquí, si hago clic en Ver disponibilidad, desplaza al usuario al alojamiento, lo que se ve genial Ahora, en la parte superior aquí, nos vendría bien un poco más de espaciado así que aquí es como verano. Y para ello, podemos usar este offset. Si establecemos un desplazamiento negativo, el usuario se desplazará ligeramente hacia arriba. Entonces ahora si volvemos a hacer eso, tenemos el ligero relleno de 20 píxeles aquí arriba, que ahora es mucho más agradable Así es como puedes crear scroll dos interacciones. 78. Crear variables de productos: Quería que creáramos diferentes productos usando modos para que nuestra página de detalles de destino fuera dinámica. Pero me imaginé que una mejor podría ser crear una pantalla de reserva dinámica o una página de reserva que cambiará en función de la habitación real que seleccionaste. Y para ello, usaremos dos propiedades para nuestras variables. Tendremos uno para la habitación seleccionada. Entonces escribiremos qué habitación hemos seleccionado o qué tipo de habitación, más bien, y luego tendremos una propiedad por el precio total. Y aquí mismo, podrías notar que ya pre llené parte de esta información, así que cambié estos campos a filled equals true. Y luego escribí algunas fechas de muestra aquí, así que coincide con la siguiente pantalla donde tenemos tiempos cinco noches y duerme dos, y todo ese tipo de es coincidente entre los dos. Así que siéntete libre de tomarte un segundo para hacerlo. Y luego vamos a hacerlo para que cuando hagan clic en Book Room, dependiendo de la que hayan hecho clic, cuando vayan a esta página, el precio aquí sea dinámico, dinámico, por lo que cambiará en función de qué habitación seleccione y luego cambie eso a partir de Entonces ahora mismo queremos configurar dos variables diferentes bajo nuestra colección general, pero no importa dónde las almacene. Vamos a hacer una variable de cadena llamada Room seleccionada. Y así esta cambiará a qué habitación has seleccionado. Y por defecto, simplemente lo dejaremos en habitación doble. Entonces esta es la predeterminada. Y entonces queremos tener otra variable, una variable de número esta vez en realidad llamada precio total. Y por defecto, lo configuraremos 80 veces 5400. Entonces ese es el precio total por 80 dólares la noche por cinco noches Y entonces ahora en esta página, tenemos aquí esta tarjeta de reserva, que no es un componente, pero queremos hacer de esto un componente golpeando el comando Alt K. Voy a traer eso fuera de aquí. Así que he arrastrado el componente principal fuera de ahí y lo reemplacé con una instancia de la tarjeta de la habitación Y luego vamos a crear una variante para las diferentes habitaciones. Entonces agregaremos una variante con propiedad llamada habitación seleccionada, y tendremos dos diferentes o tres diferentes. Y los llamaremos en consecuencia. Entonces tendremos una habitación doble. M entonces tenemos una habitación queen, luego tendremos una habitación king. Y luego estas dos imágenes, voy a sostener Comando Alt C y seleccionar esta imagen usando comando y luego Comando Alt V para pegar eso ahí dentro. Lo mismo aquí. Y ahora solo necesitamos cambiar el precio de cada habitación 80, 101 20, así que esta debería ser de 80 dólares la noche Este debe ser 100, que es, y este debe ser 120. Entonces ahora tenemos una diferente para cada habitación, y queremos cambiarla a habitación twin, que es exactamente lo que tenemos aquí. Queremos cambiar la propiedad por ésta a habitación queen. Y luego esta a habitación King. Ahí vamos. Ahora podemos elegir qué habitación se selecciona de aquí y vamos a aplicar realmente la variable que si esta variable cambia, así que digamos que cambia a habitación queen, esto de aquí también cambia. Pero voy a simplemente comandar Z para volver a Habitación Doble. Lo único que tenemos que hacer es cambiar esto a la variable de precio total que creamos, y para esa, lo haremos en la siguiente conferencia. 79. Precio total dinámico: Queremos que este precio total esté ligado a esa variable local que acabamos de crear el precio total. Estamos usando ese botón aquí. Pero en realidad queremos separar la instancia para que podamos crear un botón personalizado para nosotros mismos Entonces voy a ordenar a D que duplique este texto. Sólo tiene el signo del dólar ahí, y luego voy a comandar D una vez más, y esta vez, voy a tener justo el USD ahí. Y de éste, voy a quitar el signo del dólar, quitar el USD y el espacio. Entonces tenemos estas tres capas de texto individuales, y vamos a golpear Mayús A. Ahora el espaciado entre este 500 y USD podría ser más. Entonces voy a colocar automáticamente el signo de dólar y el número, presionar Shift Enter para seleccionar el padre y cambiar este a tal vez cuatro píxeles. Ahí vamos. Ahora bien, este número 500, sigamos adelante y cambiemos el texto para que aplique la variable del precio total. Y luego voy a copiar este botón y borrar el antiguo que tenemos. Ahí vamos. Entonces ahora ese botón de reserva confirmada es realmente dinámico y cambia en función este precio total variable. Pero lo que tenemos que hacer es que necesitamos hacer dos cosas. Uno por aquí, actualicemos estos a los precios reales. Entonces 80 por cinco es 400, 100 por cinco, 500, 120 por cinco es 600. Entonces estos realmente tienen sentido. Y luego cuando el usuario haga clic en cada botón, vamos a actualizar esa variable de precio total y elegir la habitación seleccionada. Entonces vamos a ir al prototipo. Vamos a cambiar esto. Entonces, haga clic en Navegar a la página de Reservas. Eso es bueno. Pero también vamos a agregar la variable set, y vamos a establecer dos variables. Uno de ellos va a ser el precio total. Establezca esto en 400. Si ya no se establece en 400, establecer variable, habitación seleccionada vamos a escribir habitación doble, y luego vamos a crear la misma interacción aquí al click y luego vamos a establecer esas dos variables, habitación seleccionada a habitación Queen y también establecer variable, total 500. Por último, para la habitación king, vamos a crear esa conexión. Establecer variable, habitación seleccionada a habitación King. Establecer precio total a 600, ahí lo tenemos. Y entonces ahora esto debería cambiar en función de qué habitación hemos seleccionado automáticamente, y los precios también deberían cambiar. Y eso lo podemos ver en acción. Si volvemos aquí, haga clic en Reproducir aquí o presente. Esta de aquí, tenemos la habitación doble, 400 USD, esta de aquí. Hay un problema que encontramos donde la habitación en realidad no estaba cambiando, y eso es por el hecho de que cuando agregamos estos cambios variables, ya habíamos navegado a la página de reserva Así que en realidad no estábamos haciendo nada cambiando la habitación seleccionada. Entonces FIGMA completa las interacciones en este orden de arriba a abajo Por lo que necesitamos llevar el Navigate dos hasta el fondo y solo hacerlo una vez que termine de cambiar habitación seleccionada y precio total a los valores adecuados. Lo mismo para este botón de aquí. Queremos ir aquí, cambiar la navegación para que esté todo el camino en la parte inferior, y para este de aquí, cambiar la navegación a todo el camino hasta el fondo. Entonces ahora si volvemos, la habitación twin, tenemos aquí la habitación twin, 400 USD. Para la habitación queen, tenemos aquí la habitación queen, 500 USD, desde la habitación king, tenemos la habitación King aquí y 600 USD. Y lo hemos hecho todo sin tener que crear múltiples pantallas de reserva. Es solo el que cambia dinámicamente en función de cuál haces clic. Y ahora tenemos un precio total que también es dinámico. Incluso podemos seguir adelante y copiar este botón para que este botón también coincida con el otro. Y si quieres para este de aquí, solo podemos cambiar el relleno para que sea el mismo que los demás. Entonces ahora, cuando vamos a cualquier habitación, ambos botones están mostrando el mismo precio. Entonces esto es genial. Y algo que estaría realmente genial está en esta página, ¿y si también podemos agregar los complementos al viaje y ver el precio total reflejado con esos complementos agregados Volvamos a la siguiente conferencia para hacerlo juntos. 80. Lógica condicional y operaciones: Ahora estos complementos, perfectos para tu viaje, no tienen ningún precio sobre ellos, así que solo vamos a agregarles algunos precios aleatorios. Entonces para este alquiler de autos uno, haremos 300, y luego para las actividades divertidas, haremos 150, y luego seguro de viaje completo, tal vez 100. Ahí vas. Yo solo voy a copiar esta sección aquí abajo también y simplemente reemplazar esta otra sección que tengo con los precios añadidos en. Éste es para el estado lleno. Entonces ahora lo que queremos hacer es que cuando hagan clic en Agregar a tu viaje aquí, queremos hacerlo para que también agregue este precio aquí al viaje. También queremos poner ahí una lógica condicional para que no suceda varias veces. Simplemente sucede una vez, y una vez que se agrega, no queremos que el usuario lo agregue varias veces y solo una vez, y eso es todo. Ahora, otra cosa adicional que te dejaré hacer como tarea después de esto es que una vez que el usuario haga clic en agregar a tu viaje, puedes crear otra variante aquí donde este a tu viaje se elimine de tu viaje si ya lo han agregado. Y entonces puedes hacer exactamente la misma lógica que nosotros vamos a hacer, pero al revés, por lo que elimina esa cantidad del precio total. Así que en nuestra variable set, también podemos establecer lógica. Entonces voy a hacer doble clic para hacer clic en este botón de viaje ADT, y luego debajo de los prototipos, voy a agregar en interacción de clic Y para la acción, vamos a establecer la variable, y vamos a encontrar el precio total. Y vamos a volver a encontrar el precio total. Entonces ahora mismo estamos fijando el precio total, así que a sí mismo. Y luego tenemos algunas operaciones aquí para que podamos hacer una adición. Más 300, y voy a escribir 300 aquí. Entonces esto dirá, sea cual sea el precio total de esta página, sumarle 300. Y debido a que este número y este número está ligado a esa variable, automáticamente cambiarán a nuestro precio total. Si volvemos aquí, ahora hago clic, tenemos un total de 500 USD. Si hago clic en su viaje, esto se convirtió en 800 USC en ambos lugares Pero como pueden ver, puedo seguir haciendo eso y el precio sigue subiendo y subiendo, pero no debería ser así. Sólo debería suceder una vez. Y así para hacer eso, voy a cerrar esto para restablecer mis variables. Y lo que vamos a hacer es que vamos a repasar aquí lo que se llama como condicional. Ahora bien, esta lógica condicional nos permitirá escribir declaraciones if, que son simplemente formas de decir, si cierta cosa es verdad, solo ejecutarla, entonces de lo contrario, hacer otra cosa. Y así esos tendrán sentido en tan sólo un segundo. Ahora tenemos este condicional escrito aquí, y nuestro precio total establecido está fuera de él. Entonces lo que queremos hacer es querer escribir para que la condición sea si. Pero ahora mismo, realmente no tenemos nada que vincular con el hecho de que el usuario ya ha agregado alquiler de autos a su viaje o no. Entonces para hacer eso, lo que queremos hacer es que queremos configurar tres nuevas variables bajo nuestras variables locales. Ventana aquí, vamos a tener que sean booleanos, para que puedan ser verdaderos o falsos Y por defecto, los vamos a dejar falsos. El otro va a ser actividades divertidas, agregó. Solo llamaré seguro de viaje agregado y lo dejaré en falso. Y ahora lo quiero para que cuando el usuario haga clic en este anuncio a su viaje, la variable apropiada se convierta en true. Y entonces si ya es cierto, no deja que el usuario agregue otros 300 dólares al viaje porque ya lo agregaron. Entonces entonces podemos ir a este botón aquí otra vez, ir a prototipo, y luego hacerlo para que si voy a escribir la condición, alquiler de autos agregó. Entonces estamos viendo ese acoso que acabamos crear para el alquiler de autos sumado es igual a verdadero así que si el alquiler de autos agregado es verdadero, que por defecto es falso, entonces por debajo acción, simplemente no vamos a hacer nada. Sólo vamos a dejarlo en blanco para que no pase nada. Pero en otro caso, entonces en otras palabras, si es falso, vamos a arrastrar este precio total establecido al precio total más 300 que acabamos de crear a la declaración s. Entonces, lo que esto significa es que si el alquiler de autos agregado es cierto, no hagas nada porque ya está agregado, pero si no es cierto, entonces no tienen un alquiler de autos agregado, entonces en ese caso, adelante y agrégalo al precio. Más cosa por aquí es que necesitamos cambiar realmente esta variable agregada de alquiler de autos. Ahora mismo, no lo estamos poniendo en verdad. Pero por aquí, cuando estamos fijando el precio total en el precio total más 300, también deberíamos agregar otra variable establecida, y esta va a estar configurando el alquiler de autos agregado a true. Entonces vamos a establecer el precio total, y luego vamos a decir que el alquiler de autos agregado ahora es cierto. Ahora si ejecutamos esto una vez más desde la página de detalles de destino. Para que podamos seleccionar la habitación, digamos, habitación queen. Tenemos nuestra habitación queen, 500 USD en total. Vamos a agregar un alquiler de autos, y eso es todo. Si clip pinchando, ves que no pasa nada. No vamos a sumar más a este precio. Ya se agregó. Ahí vas. Y ahora, así que voy a dejar eso como tarea si quieres crear otra variante de esta para que eliminen de tu viaje para que puedas cambiar entre esas dos variantes. Y en ese caso, si terminas haciendo eso, puedes hacer es que por aquí, cuando tengas tu alquiler de auto agregado es igual a true, ya que tu botón va a decir ahora quitado de tu viaje, en realidad puedes seguir adelante y hacer la operación exactamente opuesta aquí. Vas a hacer precio total a precio total -300 y luego establecer alquiler de autos agregado de nuevo a caídas Para que puedas seguir cambiando entre menos y más. Entonces voy a dejar eso como una tarea si eliges hacerlo, pero no necesitas hacerlo. Y, por supuesto, puedes aplicar exactamente lo mismo a los otros dos botones. Y voy a dejar eso también para ti si quieres hacer eso. Lo haré en mi proyecto, y luego si quieres, siempre puedes encontrar el enlace a mi proyecto para revisar cómo lo he hecho. Así que ahora tenemos una página de reservas realmente totalmente dinámica. Se ve genial. Vamos a volver en la próxima conferencia para diseñar una página de reservas confirmada con algunas animaciones geniales. Entonces hagámoslo juntos en la próxima conferencia. 81. Elementos fijos: Falla. Todo en nuestro prototipo es desplazable, que significa que todo se desplaza como lo hace el usuario Pero hay ciertos elementos que queremos fijar en la pantalla. Por ejemplo, esta barra de navegación aquí, y también cuando vas a esta sección aquí, queremos que esta cosa se fije al lado no donde se desplaza el usuario Hazlo, es muy sencillo. Todo lo que necesitas hacer es seleccionar los elementos en tu prototipo que quieras arreglar. Y de hecho, ahora mismo, si solo tengo un Navbar seleccionado, puedo hacer este cambio a solo una Navbar, pero Figma lo hizo muy fácil usar las capas selectas Así que selecciona todas las capas coincidentes en esta sección, que son todas estas barras de navegación en las otras páginas también. Así podemos aplicar esto a todas las páginas, dirigirnos al panel prototipo y cambiar de posición. En lugar del desplazamiento predeterminado con padre, cámbielo a fijo. Entonces ahora lo que va a pasar es sin importar dónde se desplace el usuario, este top Navbar siempre los seguirá también y se mantendrá en su lugar Y queremos hacer exactamente lo mismo con esta tarjeta también. Entonces podemos cambiar este a fig por el hecho de que es parte de este contenedor padre. Entonces todo lo que tendremos que hacer es cortar eso de ahí y pegarlo en todo el marco. Y así de esta manera, podemos colocarlo manualmente donde queramos. Para que podamos elegir donde lo queramos, como, aquí mismo. 48 pixeles de la derecha, y luego ahora podemos elegir fijo. Así que siempre está arreglado. Y podría verse mejor si es un poco más alto. Ahí vamos. Eso se ve mucho mejor. Entonces no importa a dónde vaya el usuario, esta parte siempre está replantando, para que puedan confirmar la reserva desde cualquier lugar Entonces así es como puedes arreglar tus elementos en prototipo. Ahora, estamos en la parte divertida donde vamos a volver y aprender cómo podemos aplicar realmente el botón de reserva confirmada y luego mostrar una pequeña animación agradable. 82. Animación inteligente: Tenemos tres tipos diferentes de animaciones que hemos visto. Hay un instante que hemos estado usando, exploramos Disolver. Se nos ha explorado cómo usar move in. Ahora, está este otro llamado Smart Animate, y lo que hace es bastante asombroso Mira dos fotogramas e intenta hacer una animación automáticamente entre ellos, y por eso se llama Smart Animate Y para darte un ejemplo de ello, lo que vamos a hacer es diseñar una página de confirmación que muestre que el viaje está siendo reservado, y luego finalmente un estado que demuestre que el viaje está realmente reservado. Entonces para hacer eso, primero voy a ampliar un poco esta sección . Y luego voy a duplicar esta página llena de reserva. Entonces ahora he duplicado esta página, y lo que vamos a hacer es vamos a hacer para que este lado de la pantalla se aleje o se vaya, y el otro lado se mueva hacia el centro. Entonces vamos a hacer diseño y luego cambiar la apariencia a 0%. Y lo mismo para la vuelta al viaje porque no necesitamos ese 0%. Y luego queremos mover esto a la mitad de la pantalla. Y luego vamos a ir a esta página llena, y desde el botón de reserva confirmada, nos ocuparemos de la otra más tarde. Vamos a hacer una animación inteligente, y vamos a probar el suave y 800 milisegundos Entonces es un poco lento. En realidad, incluso 1 segundo, que es de mil milisegundos Voy a hacer clic en esta versión llena, reproducirla, bajar aquí, presionar Confirmar reserva, y ahí tienes. La otra parte se desvaneció y esta se trasladó al centro. Y todo eso sucedió por Smart animate, dándose cuenta de lo que es diferente entre estos dos fotogramas y uniéndolos usando animación inteligente Ahora, todo lo que tenemos que hacer es cambiar la tarjeta por aquí, para que muestre los diferentes contenidos, como la habitación que en realidad se está reservando ahora mismo. Y luego una vez que esté reservado, tal vez después del retraso de dos segundos o algo así, podemos navegar a otra página que realmente muestra que están siendo confirmados. Entonces esta voy a nombrarla. Carga de página de reserva. Entonces se está cargando, y luego volveremos al siguiente pecture para diseñar una tarjeta que muestre el viaje que se está reservando. Por lo que podemos usar eso como estado de carga antes de finalmente mostrar un estado confirmado. Y solo por mantenerlo limpio, voy a mover esto de nuevo aquí como una página separada. 83. Estado de carga: Tenemos esta página de carga, pero nuestra tarjeta en el interior no coincide con el estado de carga. Entonces, ¿por qué no vamos a nuestra tarjeta o a nuestra tarjeta de habitación y hacemos tres variantes diferentes para cada una que muestre la habitación reservada? Y entonces podremos tener otro para cuando finalmente esté reservado. Entonces necesitaremos seis más. Pero antes de eso, comencemos con la versión de carga. Entonces, ¿por qué no creamos una nueva propiedad de variante, la llamamos status, y dejaremos el valor predeterminado a default, y luego duplicaremos estos, y llamaremos al status de estos para que se carguen Entonces los tres están puestos a cargar. Y luego en la carga, queremos demostrar que estamos reservando esta habitación. Entonces tal vez solo reescribiremos este texto para reservar tu habitación doble y simplemente cambiemos este texto a tal vez texto 200 Dejaremos las fechas, y luego ya no necesitaremos un botón porque la acción ya se está llevando a cabo, pero será bueno tener algún tipo de animación como cargar aquí. Así que en realidad podemos usar una herramienta genial llamada Lodi files para hacer eso Entonces, si vas a archivos Lodi, solo puedes buscar archivos Lodi, y está bajo plugins y widget Estos archivos Lodi van a aparecer, y es posible que necesites iniciar sesión para usar esto, pero nos da un montón de animaciones que podemos usar en nuestro espacio Si vas a Discover, podemos buscar carga, y podemos ver múltiples tipos diferentes animaciones de carga. Si quieres uno específico, tal vez uno sencillo, eso sería genial de mostrar, un avión o algo así. Y hay toneladas de gratuitas que puedes usar, y también hay muchas premium. Siéntase libre de navegar y ver exactamente cuál le gusta. Este es genial. Solo usaré esta animación simple e la insertaré como un Jif Y solo el tamaño mediano está bien. Entonces se está insertando, y está justo aquí. Pero esto es un poco demasiado grande, así que voy a hacerlo más pequeño y luego colocarlo dentro de este diseño automático, pero ahora es un poco demasiado grande, así que hazlo un poco más pequeño. Y entonces no necesitamos las fechas en realidad porque lo mostraremos cuando ocurra la confirmación real. Y luego aquí escribiremos reservando tu Habitación Doble en Londres K. Y para la N, vamos a cambiar eso para que también envíe un mensaje de texto 200. Y no necesitamos este Londres Reino Unido ya que ya lo tenemos aquí abajo ahora. Y este texto puede estar centrado, y también podemos hacer alineación central superior para que este plano llegue en el medio. Para estos dos, pongámoslo a un lado. Para que podamos duplicar esta para las otras habitaciones. Ahí vamos. Sólo voy a tomar prestada la imagen y pegarla y también cambiar el título por aquí, habitación queen, habitación king, y así sucesivamente, y deshacerme de estas dos y cambiar el estado de estas a carga, esta a habitación queen Y esta a habitación King. Y todo lo que tenemos que hacer ahora es ir a éste aquí en la carga y cambiar nuestro estado a cargando. Entonces ahora veamos qué va a pasar. Regresa, pulsa Confirmar reserva y boom. Tenemos nuestra animación de carga se ve genial. Y luego después de tal vez 5 segundos o algo así, podemos tener esta tarjeta cambiada a una versión confirmada. Entonces hagámoslo juntos en la próxima conferencia. 84. Terminar nuestro prototipo: Por último, queremos cerrar el bucle haciendo que esta página cambie a un estado confirmado, y luego veremos que el viaje está terminado, y eso marcará el final de nuestro prototipo. Así que vamos a expandir esto un poco más y luego duplicar esta página para que podamos cambiar esta página de trabajo 12 terminada. Y entonces todo lo que queremos que suceda es que queremos después de cierto periodo de tiempo, para que esta página navegue automáticamente a esta página. Y en Figma, podemos hacer eso creando interacción desde el propio marco. A este marco. Y en lugar de onclick, vamos a elegir después del retraso Lo que después de Delay nos permite hacer es esperar un periodo de tiempo sirio. En lugar de que el usuario realmente interactúe con él, solo estamos esperando que pase algún tiempo antes de que la carga cambie para confirmar. Y podemos hacer 3 segundos por 3,000 milisegundos, navegar a esta página, y también podemos mantener el smart animate, así que el smart animate cambia entre Alternativamente, lo que podrías hacer es en lugar de tener una página diferente, también puedes tenerla en tus componentes, así que créala para que después de cierto tiempo, este componente cambie con otro. Entonces ambos son métodos correctos. No hay bien o mal. Usted puede hacer cualquiera de las dos. Ahora, quiero que sea para que el estado confirmado sea similar a éste, pero solo demuestra que ya reservaste el viaje. Así que he duplicado ese de aquí, y en vez de confirmar, vamos a simplemente quitar el botón. Ya no necesitamos un botón aquí. Y luego vamos a agregar otra capa de texto aquí arriba y escribir reserva confirmada y tal vez cambiar este texto a la edad de seis años. Voy a usar la secundaria 800. Ahí lo tenemos. En lugar de esto veces cinco noches, solo podemos escribir el cargo total. Entonces vamos a duplicar ese texto, deshacernos de esto aquí, solo mantén el signo del dólar. Deshazte del signo de dólar aquí, y luego vamos a cambiar este texto para aplicar precio total variable. Y vamos a diseñar automáticamente estos dos sin espacio entre ellos. Alternativamente, también puedes entrar aquí y escribir algo como pagado. Entonces dice $400 pagados y luego cambiar el espaciado aquí a cuatro. Entonces se ve mejor. Otra alternativa en cambio se cobra en el punto tres, uno, dos, cuatro. Digamos, esa es la tarjeta para el usuario. Y en realidad no necesitamos los duermes también. En cambio, podemos simplemente escribir Habitación doble para dos o para dos adultos. Con lo cargado en esto de este estado a este estado. Ahora vamos a cambiar este estado para completar. Y todo lo que vamos a hacer es duplicarlo dos veces más para las otras habitaciones. Aplica la imagen correcta entre ellas, y después escribe ésta como habitación queen, habitación king. Y por último, solo asegúrate de que esta también sea habitación queen. Y es el nombre de la variante y la habitación King en el nombre de la variante. Aquí abajo, todo lo que estamos cambiando es el estado para completarlo. Y luego vamos a agregarlo botón aquí abajo, ir a nuestros activos, botón e insertarlo aquí. Y queremos que en realidad solo esté en el marco. Así que vamos a pegarlo en el marco, así que no depende del diseño automático. Y lo traeré aquí abajo en algún lugar cercano a la tarjeta, justo en medio de la página y luego iré a mi tablero o algo así. Solo asegúrate de que esté centrado, y luego agrega una interacción. Entonces este nos lleva de regreso a la página de Descubrimiento de destino donde podemos descubrir más viajes. Ahora déjame explicarte una vez más lo que está pasando. Después de 3 segundos, vamos a pasar automáticamente de esta página a esta de aquí, y todo lo que está cambiando es que esta tarjeta se está completando, y luego hay un botón aquí que nos lleva de vuelta a la página de descubrimiento de destino. Entonces si vemos eso una vez más en acción con auto layout y realmente agradable, veamos cómo se ve. Confirma reserva, viene por aquí, pasan 3 segundos, y boom, reserva, confirma habitación doble para dos adultos. 500 cobran en esta tarjeta, de esta fecha a este estado. Y puedes ver que este precio está realmente actualizado en base a lo que teníamos antes. Ir a mi tablero. Hermoso. Ejecutemos este prototipo desde arriba en el Lex 85. Probando nuestro prototipo web: Construimos juntos un prototipo increíble, y creo que ahora es el momento de revisarlo una vez más y ver cómo podemos mejorarlo y asegurarnos de que todo esté bien. Lo primero es, queremos crear flujos, así que automáticamente saltamos entre diferentes flujos usando el panel prototipo. Si hace clic en cualquier pantalla mientras está en modo prototipo, puede agregar un nuevo punto de inicio de flujo. Agreguemos uno para nuestra página de registro y llamemos a este flujo de registro. Un nuevo usuario pasará por este flujo, y luego una página de descubrimiento de destino, por lo que llamaremos a un nuevo flujo y llamaremos a este que inició sesión. Flujo de usuarios. Entonces ahora, si en algún momento, ejecutamos el prototipo, podemos ir entre esos diferentes flujos. Ahora bien, estos flujos se crearon algo así como por accidente. Entonces, si ya tienes flujos creados accidentalmente, puedes simplemente hacer clic en ellos y eliminarlos. Así que ahora puedes cambiar entre un flujo de registro, ir directamente a esa página o ir directamente a un usuario conectado. Por defecto, cuando estás en el panel prototipo y haces clic en el Canvas, puedes elegir el dispositivo en el que ejecutas tu prototipo. Entonces puedes hacer algo así como un error de MacBook, y seguirá adelante y presentará tu proyecto como aparecería en un error de MacBook. Ahora, claro, no se ve tan bien porque no lo diseñamos específicamente para un error de MacBook. Lo diseñamos para esta pantalla, que es de 14 40 de ancho. Entonces, si seleccionas alguna pantalla que no le quede del todo, puede que no se vea increíble. Y en general, solo ejecuto el prototipo en un tamaño personalizado, y este tamaño personalizado puede ser exactamente en lo que ya tienes configurado tu marco. Entonces en mi caso, son 14 40 por 1080. Y como puedes ver, es agradable, está arreglado entre todas las páginas, no importa cuál sea el tamaño de página entre tus diferentes marcos, se ve bien. Así que vamos a ejecutar el prototipo, y se puede restablecer un prototipo. Entonces, si, digamos, comienzas con un flujo de registro y accidentalmente terminas en alguna parte, siempre puedes presionar R para restablecer tu flujo y volver a la primera pantalla de tu flujo. Entonces ahora estoy de vuelta en la pantalla de registro. Ejecutemos el prototipo una vez desde aquí. Soy un nuevo usuario. Acabo de entrar. Quiero poner mi correo electrónico y contraseña para inscribirme en Wanderis hit Regístrate aquí, y necesito ingresar mi código de verificación que me acaban de enviar a mi correo electrónico Hermoso. Entraré en eso, presionaré Continuar, y estoy en la aplicación. Increíble. Nav lejos, en realidad teníamos la foto de una persona real aquí. Entonces, ¿no ejecutamos el enchufe Avatares una vez y solo conseguimos un usuario aquí Hermoso. No estoy seguro si eso es Max o Tom Cruise, pero funciona. Vamos a pegar eso. Y así ahora estamos encerrados en Max Stove. Tenemos una linda foto aquí arriba. Podemos bajar aquí. Podemos abrir la pestaña Filtros. Muy cool. Aplicar filtro. Podemos ordenar por y cambiar eso a popularidad o volver a relevancia. Y podemos ir a seleccionar Londres Reino Unido para leer más sobre este viaje. Se ve increíble. Vamos a ver la disponibilidad, obtener salto aquí abajo. Lee las reseñas. Increíble. Hay otros destinos que puedo consultar. Y digamos que en realidad quiero reservar un lindo canguro para mí Estas fechas no se ven bien, entonces, ¿por qué no arreglamos eso rápidamente Queremos asegurarnos de que dice las mismas fechas en la otra página, que era 060-12-0605 Ahora, tenemos que repetir eso para aquí también, y allá y aquí. Entonces, ¿adivina qué? De hecho, puedes ir a Diseño y hacer clic en varianza de edición múltiple, y se detecta el texto en múltiples lugares, y podemos hacer un cambio realmente rápido en todos ellos. Ahí vamos. Ahora vuelve a nuestro prototipo. Se ve mucho mejor. Otra cosa que estaría bien, aunque no es necesario, es simplemente hacer coincidir el número de personas que esta habitación duerme con esta página. Así que asegúrate de que duerma uno, dos y tres respectivamente. Entonces este debería ser duerme uno. Este debería ser duerme. Ahora, todavía estamos en la herramienta de edición múltiple, así que salgamos de ahí. Así que solo editamos uno por uno. Este duerme dos, y éste duerme tres. Entonces eso coincide ahora. Siempre puedo regresar y seleccionar otra habitación como una habitación queen, digamos, se cambia el precio. Puedo seguir adelante y llenar mis datos. Si quiero agregar algún alquiler de autos a mi viaje. Bonito. Lo he agregado y algunas actividades divertidas, y el precio refleja eso. Y ahora puedo presionar Confirmar reserva. Desafortunadamente, este botón aún no funciona, así que nos falta esa conexión. Seleccionemos estos botones aquí manteniendo pulsada la tecla shift para que podamos seleccionarlos todos, ir al prototipo y arrastrar una conexión desde uno de ellos, lo que arrastra la conexión de todos ellos ahora a nuestra página de reservas cargando Se ve bien. Así que ahora podemos hacer clic en Confirmar reserva desde cualquier lugar. Hagámoslo desde aquí. Y aquí nos falta algo. Así que volvamos. Entonces ahora tenemos la conexión aquí. En lugar de disolver, queremos hacer smart animate y hacer suave y 1,000 milisegundos, que es 1 Así que ya estamos de vuelta aquí . ¿Sabes qué? Tal vez no necesitemos las actividades divertidas, así que eliminaremos eso, presionaremos Confirmar reserva desde aquí, y boom, está cargando tu habitación Queen en Londres, Reino Unido y reserva confirmada. Habitación Queen para dos adultos, $800 chars. Hermoso. Volvamos a mi tablero. Entonces ese es nuestro prototipo en la web como ejercicio, siéntete libre de hacer el para móvil usando las conexiones similares que hemos construido en la web. Y en la próxima conferencia, volveremos para aprender cómo podemos probar realmente sus prototipos móviles en sus propios teléfonos 86. Uso de la aplicación Figma en el móvil: Entonces, para mostrarte cómo puedes ejecutar tu diseño Figma en tu móvil para ver cómo ven tus diseños o cómo se ve tu prototipo, sigue adelante y descarga la app Figma desde tu Google Play Store o Apple App Ahora bien, si aún no has iniciado sesión, sigue adelante e inicia sesión exactamente en la misma cuenta que estás usando en Figma, y puedes ver tus proyectos aquí mismo Puedo ver mi proyecto de Vanderweis. Yo lo puedo abrir y navegar por él, y tú vas a las diferentes páginas, las maquetas aquí Ahora bien, lo bueno es que si vas a esta función de espejo aquí abajo, puedes hacer clic en Comenzar reflejo y mostrarte exactamente la página que estás viendo en tu app en tu computadora, y puedo cambiar rápidamente la que quiero ver e ir a las diferentes y ver qué cambios quiero hacer en el móvil o cómo funciona esto en el móvil Por supuesto, esto aún no es un prototipo. Entonces, cuando conviertes esto en un prototipo, puedes ver cómo vería tu app en una pantalla móvil. En cualquier punto, puedes sostener dos dedos y luego seguir adelante y salir de ese modo. Y con eso, eso envuelve nuestra sección de prototipos. Volvamos a la siguiente sección para aprender a trabajar juntos en Figma y si usas consejos y trucos completos 87. Colaborar en Figma: De los beneficios y parte más divertida de trabajar en figma es colaborar con otros en FigMA medida que tu equipo crece y tienes más diseñadores con los que estás trabajando, las personas pueden unirse y hacer ediciones mientras haces tus propias ediciones o pueden dejar comentarios, comentarios y puedes trabajar juntos muy fácilmente Para colaborar con otros en figma, todo lo que necesitas hacer es compartir el proyecto con ellos. Al hacer clic en Compartir, puedes elegir a quién invites a tu proyecto. Puedes escribir su correo electrónico aquí e invitarlos a tu proyecto, o puedes copiar el enlace y compartirlo con cualquier persona en un chat o donde sea que te comuniques. Ahora, por defecto, podrías tener este que tiene acceso, no a nadie. Así que asegúrate de hacer clic en él y cambiarlo a cualquiera. Por defecto, a veces se establece en solo personas invitadas. Y así, de esta manera, el público puede acceder a él, y solo las personas que invites con sus correos electrónicos podrán acceder a él. Ahora, tenerlo en cualquiera, puedes elegir lo que cualquiera puede hacer. Entonces, por defecto, está configurado para ver. Y normalmente, eso es lo que quieres mantenerlo a menos que quieras que la gente del público edite su archivo. Entonces, si estás colaborando públicamente con el mundo, claro, puedes seguir adelante y cambiarle esto. Pero en general, está a la vista. Y luego, para mayor seguridad, siempre puedes proporcionar una contraseña para que las personas pongan cuando intentan acceder a tu archivo. Bajo la configuración avanzada, también puede elegir si los espectadores pueden copiar, compartir y exportar este archivo, o es solo para su visualización y sin exportar y sin duplicar y compartir También hay fácil acceso para copiar rápidamente el enlace para el prototipo. Entonces, si quieres compartir rápidamente un enlace para el prototipo, si quieres copiar un enlace al modo Dev. Entonces, si estás compartiendo esto con tus desarrolladores, este sería bueno para compartirlo con ellos. Y por supuesto, si estás construyendo un archivo comunitario, siempre puedes compartir tu archivo con la comunidad también. Y de esta manera, puedes agregar personas a tu proyecto. Cualquiera que haya sido agregado a tu proyecto, puedes verlo desde aquí. Entonces este es otro usuario que tengo, y puedo elegir si esta persona puede ver, puede editar o convertirse en el propietario del archivo, o simplemente puedo eliminarlos del archivo por completo. Así es como puedes gestionar quién está viendo tus proyectos. Ahora mismo, estoy en otra cuenta de usuario, y puedo ver que cuando otro usuario está en mi archivo, puedo ver exactamente lo que está mirando, dónde está el cursor del mouse, lo cual es genial. Siempre puedo hacer click aquí para seguirlos y ver exactamente qué están haciendo y qué están mirando? Entonces ahora mismo, no estoy controlando la pantalla. Este otro usuario es quien está echando un vistazo a las diferentes páginas. Si alguien está presentando o si estás presentando, esta sería una buena opción para compartir con la gente. Entonces siempre puedes hacer clic en Detener cuando hayas terminado de seguirlos. Ahora el otro usuario puede pasar por tus diseños, dejar comentarios. Y una vez que dejan un comentario, puedes ver su comentario desde aquí. Por defecto, este azul significa que el comentario es rojo. Entonces, si haces clic en él, se volverá gris así. Pero siempre puedes cambiarlo de nuevo a Marks red si quieres volver a él más tarde. Por supuesto, puedes reaccionar, pulgares arriba y escribir un texto de vuelta. E incluso puedes compartir imágenes o mencionar a personas y animogis Y así es como puedes colaborar y obtener fácilmente comentarios de los miembros de tu equipo. Una vez que resuelva este problema, simplemente puedo resolver el comentario, y se va, aunque siempre puedo volver a acceder a él bajo el panel de comentarios yendo a mostrar aquí comentarios resueltos, y luego puedo volver a ocultarlo. Este panel de comentarios mostrará todos los comentarios que quedan en el proyecto porque ahora mismo he resuelto ese comentario. No se muestra, pero si el otro usuario o incluso yo, digamos, quiero hacer algunas notas sobre hacer esto más grande, así puedes dejar notas para ti así alrededor del archivo. Y a medida que empieces a agregar comentarios, los verás amontonados aquí y podrás resolverlos rápidamente desde aquí o puedes eliminarlos también. Otra característica genial que en realidad puedes alternar el chat de voz aquí en figma. Una vez que hagas clic en él, se abrirá un pequeño pop up, y en realidad podrás chatear con otros en figma. Ahora, volvamos a la siguiente conferencia para aprender un poco más sobre bibliotecas y equipos. 88. Bibliotecas de equipo: Hasta ahora, hemos estado juntando componentes aquí mismo en nuestra sección de componentes, y solo ha estado en este archivo local. Realmente no lo hemos publicado ni editado en ningún lado. Pero a medida que comenzamos a trabajar en un componente y a través de múltiples proyectos y archivos diferentes, Figma le permite publicarlos fácilmente y usarlos en múltiples archivos y solo realizar cambios en un solo lugar Entonces, en lugar de tener diferentes proyectos con múltiples archivos diferentes, teniendo todos los componentes diferentes que son los mismos componentes, solo puedes tenerlos en un solo lugar. Y normalmente, esto sería en un proyecto separado o archivo de signo separado, y luego puedes ir aquí a tu biblioteca, y puedes ver que tienes dentro de este archivo biblioteca Wanderwis, y en realidad puedes seguir adelante y publicarlo, para que puedas usarlo en diferentes archivos Te pedirá que muevas esto a un proyecto si actualmente está en tu borrador. Ahora, cuando estés listo para publicar tu biblioteca, te mostrará todas las diferentes cosas que va a agregar a esta biblioteca, así tienes todas las variables. Así que incluso las variables se agregan cuando vemos todos los colores, las variables del dispositivo se compartirán entre diferentes archivos. Todos los estilos que agregamos para nuestras diferentes fuentes, todos los componentes de aquí, incluso puedes agregar una descripción de lo que cambió. Y luego una vez que golpees Publicar, tardará un segundo. Y como puedes ver, comienza a cargarse, y lleva algún tiempo hasta que esta biblioteca se publique por completo. Y ahora por aquí en un archivo completamente nuevo, puedo navegar por bibliotecas de equipo y hecho navegar por las bibliotecas que he publicado, y puedo usarlas en este archivo, o si ya estoy usando otra biblioteca diferente, puedo intercambiar las bibliotecas aquí. Si agrego esto a este archivo, ahora se agrega, puedo ir y usar los mismos componentes en este archivo completamente nuevo no tiene nada que ver con Vanderweis Ahora bien, si escribo un texto aquí, en realidad puedo seguir adelante y elegir las mismas fuentes que traje de mi biblioteca. Así que todos estos vienen de mi biblioteca con exactamente la misma fuente, y luego puedo verlos, pero ya no se pueden ver bajo estilos locales o variables locales. Porque ahora han publicado en esa biblioteca. Ahora, no necesitas hacer esto en tu proyecto. Sólo voy a mostrarte lo que pasaría si haces un cambio rápido. Digamos que de repente tenemos otro ícono de Google, y lo llamamos algo así como Google Logo dos o algo así. Entonces ahora tenemos un nuevo componente en nuestra biblioteca o si tenemos un nuevo botón o un nuevo campo de entrada y así sucesivamente. Entonces, en los activos bajo la biblioteca, hay un cambio que aún necesita ser publicado, y este cambio es exactamente ese logotipo de Google que cambiamos. Para que puedas seguir adelante y después publicarlo, y puedes ver, Bien, este es el componente que se agregó, el nuevo logo de Google. Puedes escribir una descripción de por qué ocurrió ese cambio. Puedes publicarlo. Y aquí en tu otro archivo, ya tienes ese logotipo de Google dos. Puedes usarlo en tu proyecto. Ahora bien, si ya estaba usando un botón y algo le pasó al botón, en realidad puedes verlo debajo de las actualizaciones. Te diré que este botón ha cambiado, y este es un diseño nuevo. Así es como puedes usar bibliotecas para administrar los mismos componentes en múltiples proyectos diferentes con tu equipo. 89. Modo de desarrollo: ¿Qué es este modo Dev de aquí? ¿Cómo lo usamos y qué hace? Como atajo, puedes presionar Mayús D para alternar el modo de desarrollo, y esto actualmente está disponible bajo un plan pago. DevMDE esencialmente le permite dar a un desarrollador acceso a su archivo de una manera más amigable para desarrolladores Entonces el panel de propiedades cambia por completo para que sea más amable con alguien que podría estar convirtiendo este diseño en código. Como desarrollador, puedo cambiar mis unidades para usar píxeles o RAM. Puedo cambiar mi idioma. Entonces si ya estoy usando otro idioma, puedo seguir adelante y elegir esos de aquí. Y hay un montón de complementos que puedes habilitar para mostrarte incluso diferentes tipos de códigos. Entonces, si estás trabajando con react, podemos ver el código react en lugar de CSS. Y así ahora como desarrollador, puedo seleccionar cualquier cosa aquí, digamos, esta tarjeta de habitación, y me muestra toda la información específica que me importa el acolchado, el peso, los radios de esquina Me sale el código directamente aquí como JSX. Puedo ver los textiles, todos los colores utilizados, y con el código hexadecimal fácilmente disponible. Así que no tengo que hacer ninguna conjetura o hacer clic en cada elemento individual solo para averiguar cómo diseñarlo o cómo codificar el front-end para Ahora bien, si se han hecho cambios a lo largo de algún tiempo, puedo comparar los cambios por aquí para ver cómo ha cambiado esta página con el tiempo. ¿Cuáles son algunas de las nuevas cosas que sucedieron? Puedo ver el último cambio que hicimos es que solía estar el botón de registro con Google, y luego lo movimos, le agregamos un logo, y luego también le agregamos este marco con un número de teléfono como este. Entonces, como desarrollador, es muy fácil entrar y ver qué ha cambiado en tu archivo FigMA. Y así de esta manera, podrás compartir con tus desarrolladores cómo usar esta función para entender rápidamente qué ha cambiado desde la última vez que estuvieron aquí. Siempre pueden acceder a los activos aquí, por lo que rápidamente pueden echar un vistazo a los activos como este botón de aquí, y siempre puedes abrirlo en playground para ver cómo las diferentes variantes y propiedades cambiarán el botón. ¿Cómo se ve el hover? ¿ Qué aspecto tiene este icono izquierdo? ¿Y si no es ancho y tiene un icono? Puedes obtener todas las propiedades fácilmente desde allí. Incluso puedes cambiar el ícono aquí, y todo esto, como dice, siéntete libre de experimentar porque ninguno de estos cambios se está haciendo. Todo lo que está pasando es que solo estoy jugando con el botón para ver cuáles son las diferentes variaciones de botones. Puedo hacer lo mismo con cualquier otro componente que tenga propiedades. Ahora, cuando estás en modo Dev como diseñador, puedes agregar algunas anotaciones para que los desarrolladores sepan exactamente lo que estás pensando Se pueden marcar ciertas cosas. Digamos que quiero enfatizar que el espaciado entre estos debe ser exactamente de 32 píxeles. Puedo dibujar por aquí y arrastrar y mostrar exactamente cómo se ven el margen y el relleno entre diferentes elementos. Puedo agregar anotaciones. Y las anotaciones son útiles. Puedo dejarlos en un elemento específico, así puedo dejarlos como ejemplo. Puedo agregarlo aquí y decir, Este es el tiempo total de su viaje, no el número de noches. Y agrega esa etiqueta aquí o anotación. Y esa anotación sólo es visible en modo def. Entonces, si cierro el Modo Dev, verás que desaparecerá, pero este pequeño círculo aquí me está mostrando aquí hay anotaciones en modo muerte, que también puedes ver con solo hacer doble clic en él Ahora, como desarrollador, también puedo agregar algunos recursos. Entonces, si estoy usando Jira u otra plataforma, puedo pegar el Link y tener acceso a esos fácilmente Puedo usar muchos plugins que ahora están disponibles para ayudarme a convertir este diseño en código, incluyendo FigMA a código, y funcionan bastante bien en algún nivel Ahora bien, muchos de estos funcionan bastante bien, pero te lo dejo para que experimentes si eres desarrollador. Recuerda, puedes compartir el acceso al modo Dev haciendo clic en compartir aquí, y mientras estés en tu modo Dev, compartirá un enlace solo al modo Dev. Y otro consejo útil, en general, si estás compartiendo tu archivo Figma seleccionando un marco específico y luego haciendo clic en Compartir, estás permitiendo que esa persona que abre el enlace venga específicamente a este marco Entonces, cuando aterricen en tu archivo, estarán exactamente en este marco. Y esto aplica tanto en modo Dev como en modo diseño. Lo mismo se aplica a los prototipos, por cierto. Si estás en modo prototipo, quieres compartir este prototipo con el desarrollador, pero como usuario de inicio de sesión, simplemente ve al flujo que quieras y luego comparte prototipo, copia enlace. Y ahora la persona que abra este prototipo irá directamente a exactamente ese punto de partida o ese flujo. Ahora, por supuesto, siempre pueden cambiar diferentes flujos aquí, pero ese es el flujo inicial que verán. 90. Variaciones de anotación: Mucho después de filmar el último video de DevMo, Figma anunció una nueva función que te permite hacer aún más con anotaciones a la hora de dejar anotaciones a lo largo de tu proyecto para tus desarrolladores Entonces ahora, verás en tu barra de herramientas, tienes esta pequeña flecha aquí y puedes ampliar la herramienta Commons y en realidad puedes cambiarla entre anotaciones y medición Medición, por supuesto, eso lo hemos usado en la última conferencia. Pero si queremos hacer anotaciones, podemos hacer clic en esto o como atajo Shift T, y podemos dejar anotaciones rápidamente a lo largo de nuestro diseño Entonces, si quieres dejar una anotación sobre esto, etiqueta popular, digamos, podemos dejar una aquí, y la nueva actualización aquí es que incluso puedes establecer una categoría para esto Entonces podemos decir contenido o si esto está relacionado con el desarrollo o la interacción, la accesibilidad, etc. Y para este, solo haremos una etiqueta de desarrollo y diremos que la etiqueta debería mostrarse para viajes que son populares solo entre los usuarios. Por lo tanto, puede agregar anotaciones fácilmente incluso mientras estábamos en modo de diseño sin cambiar al modo dev Por supuesto, siempre puedes presionar Escape y volver al modo de comentario usando C y dejar comentarios a lo largo de tu proyecto también. 91. Historial de versiones: Así que hemos visto cómo bajo el modo Dev, puedes comparar los cambios entre tus versiones anteriores del archivo. Pero, ¿y como diseñador? ¿Hay alguna manera de volver rápidamente a una versión en la que ya estaba Digamos, hice algunos cambios. No me gustan. El equipo lo odia. volver a la versión anterior. Todo lo que necesitas es Historial de versiones, que se puede acceder desde tu nombre de archivo aquí con esta pequeña flecha y va a mostrar Historial de versiones. historial de versiones te muestra todos los cambios que has realizado a lo largo del tiempo. Y como pueden ver, hay seis versiones de guardado automático, y puedo seguir adelante y hacer clic para ver en esa fecha específica cómo se ve mi archivo. Entonces, si hago clic, digamos, el 16 de noviembre, de pronto veré que mi archivo se ve completamente diferente. Y así puedo envejecer aún más y ver todos los cambios que he hecho en mi archivo a lo largo del tiempo. Entonces si quiero volver a esa época, siempre puedo hacerlo haciendo clic en esto y diciendo restaurar esta versión O si encontraste una versión específica que quieras nombrar, puedes seguir adelante y darle un nombre específico para que recuerdes esta versión exacta. Entonces voy a ir por aquí. Veo componentes que se han publicado aquí, y esta es la versión actual, y simplemente puedo cerrarla cuando termine de mirar el historial de versiones. 92. Cambia el nombre de capas con IA: Un par de herramientas de IA más que no hemos usado realmente en este proyecto. Ya hemos usado mucho, pero definitivamente podemos ver cuatro más que son bastante útiles. El primero es nombrar nuestras capas. Ahora, a lo largo de este proyecto, realmente no hemos estado nombrando nuestras capas Todo es solo marco 31, marco 44, marco 40, ya tienes la idea. Nada está realmente organizado. Si alguien está mirando estos nombres de capas, puede que no tenga idea de lo que está pasando. Entonces Figma en realidad tiene una función de IA que nos permite renombrar capas Todo lo que tenemos que hacer es hacer Comando K o abrir el panel de acción y golpear renombrar capas. Tomará un segundo, pero como puedes ver, para lo que sea que hayas seleccionado, Figma seguirá adelante y les dará nombre Puede que no sea perfecto, nombró esta cuadrícula aquí cuadrícula de resultados, pero tal vez quieras llamar a esa cuadrícula de destino o algo por el estilo. Pero nuevamente, esta es una mejora mucho mejor que la que teníamos antes. Contamos con un contenedor de colecciones, título de colecciones, cuadrícula de cobranzas. Entonces la convención de nomenclatura que usa es bastante agradable. Sigue adelante y pruébalo en diferentes marcos, o si quieres cambiar el nombre de las capas para todos tus fotogramas, pídele que selecciones algunas capas, y en realidad puedes seleccionar varios fotogramas diferentes si lo deseas, o simplemente presiona Enter mientras tienes una sección seleccionada, y notarás que son demasiadas capas, por lo que es posible que tengas que tomarla algunas páginas a la vez. Así que pruébalo. Es una manera bastante agradable organizar tu archivo más. 93. Elimina fondos con IA: Sucede bastante a menudo donde arrastras una imagen a FIGMA. Encontré este icono de escudo que puedo usar para el seguro de viaje por aquí o algo así, y quiero quitar el fondo. Ahora, puedes hacer esto en Photoshop si lo tienes y otras herramientas. Pero si no lo tienes, Figma hace que sea más fácil ahora que nunca eliminar realmente el fondo Y todo lo que necesitas hacer usa una herramienta de IA llamada Remove Background. Si no lo encuentras, solo búscalo en la búsqueda aquí. Le pegas, y seguirá adelante y analizará la imagen y quitará el fondo. Tan simple como eso. 94. Traducir nuestra aplicación con IA: Imagina que hicimos este weiss Vander para nuestro cliente. Lo lanzaron al mercado. Lo está haciendo muy bien, y de hecho, tuvieron una gran audiencia en Francia. ¿Cómo traducimos esta página o todo el proyecto al francés? Figma AI lo hace súper simple. Todo lo que necesitas hacer, simplemente puedes copiar una página. Digamos esta página de detalles de destino para tener una versión francesa de la misma. Y todo lo que necesitas hacer es ejecutar la opción traducir a aquí y elegir el idioma, y hay un montón. Va a buscar francés. Y como puedes ver de arriba a abajo, seguirá adelante y escribirá toda la página en francés, incluyendo los botones, las etiquetas, las fechas, incluso las reseñas. Y ahí lo tenemos. Así es como puedes traducir usando IA a otro idioma y tener tu app lista para múltiples mercados. 95. Atajos de teclado: Llegó hasta aquí, antes que nada, enhorras. En segundo lugar, es posible que hayas notado cuánto uso atajos de teclado desde el diseño automático, Shift A hasta el modo de desarrollador de apertura, Shift D. Mucho del comando Alt C, Comando Alt B para copiar rápidamente estilos de pegar, y así sucesivamente y así sucesivamente. Hay un montón y no puedes memorizarlos tanto como quieras yo solo los practico y me acostumbro a ellos. Figmas lo hizo más fácil al mostrarte tus atajos de teclado aquí abajo donde dice ayuda y recursos Y tienes esta opción de atajos de teclado aquí. Se puede abrir. Y te mostrará todos los diferentes atajos que tienes. Puedes mostrar y ocultar la interfaz de usuario así, y te muestra la vida a medida que las usas. Puedes ir y navegar por diferentes herramientas. Y para cualquier cosa que haya usado, lo mostrará en azul, así que estas son las que he usado, pero no he usado, por ejemplo, la herramienta Pluma, así que me está diciendo que si usas una herramienta pluma, se volverá azul, lo que significa que has desbloqueado o la has usado. Entonces lo gamifica para que puedas aprender un nuevo atajo viendo cuáles aún no has probado, para que puedas probar esos 96. Conclusión: Felicidades por completar este curso. Hemos recorrido un largo camino y no mucha gente llega hasta aquí. Así que enhorabuena por armar este proyecto, aprendiendo todas las herramientas que el FICMA tiene para ofrecer Y, por supuesto, el aprendizaje no se detiene aquí. Para convertirte en un gran diseñador de productos, necesitas práctica. Necesitas seguir trabajando en más proyectos, agregarlos a tus portafolios, que puedas destacar y aterrizar el cliente de tus sueños o el trabajo de tus sueños Entonces con eso, les agradezco nuevamente por unirse a este curso y ser parte de este viaje con nosotros. Si tiene alguna pregunta, no dude en comunicarse y por favor deje una reseña si este curso le ha sido útil. La mejor de las suertes y feliz diseño.