Diseño de aplicaciones UX: domina las maquetas y prototipos de alta fidelidad

1. Bienvenido a la clase de diseño de aplicaciones UX: Hola a todos. Si planeas comenzar diseño de UY UX Journey Impro UY UX habilidades de diseño, esta clase es tu Mi nombre es Akaanka y soy un diseñador UY UX al que le gusta construir aplicaciones y sitios web centrados en el usuario No solo estamos hablando de la teoría del diseño UY UX, aquí estamos hablando de convertir tu visión en realidad, pixel by Fixel El enfoque principal de esta clase es aprender a crear diseños de aplicaciones móviles centradas en el usuario que sean fáciles de usar y se vean increíbles. Imagina los colores de selección sin tener ningún problema de accesibilidad de la aplicación. Elegir teléfonos que mejoren la legibilidad y transmitan el tono adecuado para su aplicación Explora el mundo del icono y su papel en creación de interfaces de usuario intuitivas y visualmente atractivas. Manteniendo todo organizado, como herramientas etiquetada carnoso, aplique los principios de UX y la pérdida a los diseños de UI. Y haciendo aplicaciones que Gus usa y solución a sus puntos débiles. No solo diseñaremos hermosas IU, que también nos centraremos en diseñar aplicaciones centradas en el usuario aplicando U X al diseño de la interfaz de usuario. Haremos todo eso y más. Utilizaremos Freqma para diseñar nuestras marcas de aplicaciones y luego convertirlas en prototipos en funcionamiento Estoy aquí para guiarte paso a paso. Por lo tanto, trabajaremos juntos para construir una aplicación de orden de pies y cubrir los principios de diseño de UX y las mejores prácticas que lo ayuden a diseñar cualquier tipo de aplicación lista para mejorar su caso de diseño de aplicaciones UX. Vamos. Te veo dentro de la clase. 2. Cómo seleccionar colores con la psicología del color: Hay muchas maneras de aprender sobre psicología del color y encontrar el mejor color para tu app o tu marca. Lo iniciaré con forma más genérica y te mostraré el, mi método personal que elijo para seleccionar colores. En primer lugar, iré al Google y buscaré psicología del color. Ahora voy a ver muchos artículos. Al seguir esas pautas del artículo, puedo tener más idea sobre la psicología del color y cómo aplicar la psicología del color para encontrar el color de marca correcto. El azul es representación de confianza, lealtad, seguridad, y está relacionado con la industria bancaria. Si prefieres las marcas más populares relacionadas con la banca, verás que el azul es uno de los colores populares que utilizan la mayoría de las marcas. El primer método es leer este tipo de artículos. El segundo método es utilizar unos detalles generados. Puedes usar Google Brat y GPT para hacer preguntas sobre psicología del color y encontrar el mejor Mi método favorito es consultar la guía Color Emotion. Aquí hay un artículo sobre psicología del color en el diseño de logotipos. Me gusta seguir esta guía de emociones de color y seleccionar el color. Por la razón por la que uso esta guía de emociones de color es que puedo comprobar la banda popular y cuáles son los colores que usaron para crear sus logotipos. En nuestro caso, vamos a crear una app de entrega de comida a domicilio, y es para una panadería. La emoción y el significado de la panadería es la salud, la emoción y la entrega rápida. Entonces, si revisamos los logotipos según o bajo esta sección de optimismo, claridad vermit, veremos los logotipos que se relacionan con marcas de entrega y cadenas de pasaportes como Mcdonalds y como Mcdonalds Además, si revisamos esta sección de crecimiento pacífico y salud, también podemos ver algunos logotipos relacionados con alimentos. En esta app, me gustaría usar este color verde. Si tú, si tu app está en diferente nicho o marca diferente, puedes seguir esta emoción de color, guiar el check esos logotipos y encontrar el logo más relacionado que busques. La primera parte está terminada ahora tenemos nuestro color como verde, pero no tengo color verde específico, así que tengo que encontrar el color verde específico. Y luego tengo que encontrar el color secundario y acento. En la siguiente lección, usaremos rueda de colores y optimizaremos nuestro color primario. Y luego aprenderemos sobre la regla 603010 y averiguaremos el segundo y el color de acento para nuestro 3. Cómo seleccionar un color primario: Bien, ahora seleccionamos el color de nuestra marca como verde. Y seleccionarás el color de tu marca de acuerdo a tu app. Así que ahora podemos ver las opciones que podemos usar en nuestra app. Así que intentemos encontrar el color que coincida con nuestra app y nuestra marca. Para ello, iré a Coolers.com y doy click en Explorar Paleta de Tendencias Bien, ahora en la barra de búsqueda, buscaré verde, o simplemente puedo hacer clic en esta etiqueta de color. Y ahora obtenemos diferentes tipos de paleta de colores. Y usando esas paletas de colores, podemos encontrar el mejor color para nuestra aplicación Averiguemos el mejor color verde o el mejor color para tu app, color primario. Me gusta mucho este color verde, así que simplemente hago clic en él. Y cuando haga clic en él, copiará el código de color. Después iré a la página de inicio de enfriadores y haré clic en Iniciar el Generador Ahora aquí, voy a dar click en este código de color para seleccionar el color. Entonces voy a pegar el color que seleccioné. Y ahora voy a dar click en este localicon. Ahora tenemos el color primario. En la siguiente lección, te presentaré la regla 603010 4. La regla 60-30-10: La regla 603010 es una guía de diseño de interiores que los diseñadores utilizan para crear una paleta de colores La regla 603010 es el mejor método para equilibrar el color en todo el diseño La regla 603010 tiene tres colores, y cada color ocupa un porcentaje específico del diseño general El 60% es color dominante, lo que significa que utilizará 60% del diseño general y 30% es el color secundario. Y este color se utilizará 30% del diseño y 10% es el color Cent. Y este 10% se utilizará para resaltar las partes más importantes del objeto en el diseño. Siguiendo esta regla 603010, podemos crear paletas de colores que sean armónicas y A pesar de que las reglas aplican para el diseño de interiores, podemos aplicarlo para lo que diseñé. Cuando hablamos de UX o experiencia de usuario, hay un principio llamado claves. Bien, yo doble, lo que significa que sea sencillo, estúpido. Siguiendo esta regla de 163010, podemos mantener la simplicidad y resaltar parte más importante del diseño usando colores Por eso es importante usar esta regla de 60, 30 también como principiante, este es el mejor método para elegir el color correcto. Porque si vas a usar color color que tiene muchos colores, arruinará tu diseño. Si no eres bueno eligiendo los colores correctos como yo, esta regla 603010 te ayudará a lograrlo Averiguemos algunos de los ejemplos que regla 603010 utilizó en el diseño de interiores Y después de eso, te mostraré dos sitios web que utilizan la regla 603010 para elegir sus colores Entonces aquí está el primer diseño. Entonces en este diseño, color dominante tiene 60% del interior y tenemos este color marrón en el piso y el color de acento en la decoración verde. Y veamos otro ejemplo. ¿Bien? En este ejemplo tenemos la luz como color, como color dominante. Y es 60% Y tenemos color secundario como este barniz, color madera. Y tenemos 10% de color de acento. Pero cuando miras este diseño, verás claramente que el color del acento es más del 10% Así que hay algunas razones para ello. Como dije antes, 603010 es una regla No es una ley de principios. Para que podamos romper esas reglas. ¿Bien? Lo volveré a decir. Podemos romper la regla 603010, lo que significa que si hay algo que tenemos que cambiar o algo que tenemos que ver con los colores, y está totalmente bien romper estas reglas 603010 lo que significa que si hay algo que tenemos que cambiar o algo que tenemos que ver con los colores, y está totalmente bien romper estas reglas 603010. Esto es solo una regla y usamos esta regla para mantener nuestro diseño simple y encontrar fácilmente los mejores colores. Pasemos al siguiente diseño. En este diseño, los colores de la pared son blancos y el color de flujo es marrón. Y tenemos esta oscuridad como color para las luces y el caos. Entonces pasemos al siguiente. Y en este diseño, se puede ver la regla 603010 aplicada Y a veces no es fácil entender las reglas 603010 cuando registramos interiores Incluso utilizan la regla 603010 para el diseño de interiores. Pueden usar diferentes tipos de colores, y como dije antes, esta es una regla y podemos romper reglas. Bien, ahora vamos al ejemplo de la vida real. Y ahora estoy en Netflix.com En Netflix, se puede ver claramente 60% de color oscuro en el fondo Y detrás del fondo podemos ver la última película y serie de televisión, pero aún así está oscuro. Y podemos ver claramente 30% de color usado en el texto y este texto P. Ahora es la barra divertida. Se puede ver claramente cuáles son los llamados a la acción. Cta. Call to Action es el elemento accionable que los usuarios pueden usar para hacer clic, puede ir al siguiente paso En este caso, CTA es este rojo grande. Obtener el botón de inicio. Y propósito de Netflix es dar membresías a peebles y agregarlos a su base de datos y cobrar Entonces, cuando el usuario acuda a esta página, esa persona verá claramente el mensaje que quiere ver y el llamado a acción que quiere tomar la acción. Entonces este es un gran ejemplo. Además, si me desplazo hacia abajo aquí, todavía tengo color más oscuro como el 60% y 30% del color blanco y hay pocos colores diferentes. Si comprobamos el diseño general, podemos ver claramente cuáles son los colores y cuáles son los colores 603010 Pasemos al siguiente ejemplo y E Slack.com En holgura, puede ver claramente fondo morado y es el 60% Entonces veremos 30% de la y. y podemos ver este color naranja como el 10% Puedes pensar, cual es el color azul en este registrarse con Google Como dije antes, 603010 es una regla que usamos para ver fácilmente una paleta de colores y mantener el diseño simple Además, si bajo ahora, tenemos 60% de este color crema claro y 30% de color negro, y tenemos esos enlaces en color azul. Además, si bajo, otra vez, tenemos color blanco como negro marrón y es el 60% Entonces tenemos 30% de color negro y 10% de color morado. Entonces sección a sección, cambian la combinación de colores que elijan, y además agregan más colores. Entonces esta es la realidad. Aunque seleccionamos tres paletas de colores, tal vez los clientes quieran diferentes colores para agregar al diseño En esos tiempos tenemos que cambiar nuestros requisitos según el cliente. Entonces ahora ya conoces la regla 603010. Y en la siguiente lección, crearemos nuestra paleta de colores. Como lo hicimos, ya tenemos el color dominante o primario y ahora tenemos que seleccionar el color secundario y acento. Nos vemos en la siguiente lección. 5. Cómo crear la paleta de colores: Hola a todos. Ahora estoy en enfría punto go, y ya estamos listos, seleccionamos este verde manzana como nuestro color dominante de color primario Y ahora tenemos cuatro colores más, pero sólo necesitamos tres. Entonces voy a quitar esos colores innecesarios. Bien, ahora tengo esos tres colores y bloqueo este color primario, porque solo necesitamos elegir el color secundario y acento. Entonces hay algunas formas de seleccionar el color secundario. El único método, tomar paletas de colores. Voy a los refrigeradores y exploro paletas de tendencias y tecleo el verde Y se puede ver este tipo de paleta de colores. Y usamos esto para selate el color. Y puedes usarlo para seleccionar los colores coincidentes. Pero hay más formas de hacerlo, más mejores formas de hacerlo. Ya tenemos nuestro color primario, y este color es color oscuro. Ahora necesitamos el color claro. Para comprobar el color que coincida con este color verde. Simplemente hago clic aquí y presiono el botón Espacio en el teclado, y verás diferente color para obtener cuando presiones el botón Espacio. De esta manera, puedes elegir el color correcto o puedes pensar el color que te gusta usar. En este caso, me gustaría usar el blanco como color secundario. Y luego hago clic en este candado y bloqueo el color. Ahora tenemos que encontrar el color de acento. Este color de acento será el color que solíamos escribir. Me gusta este tipo de color oscuro. Y si quiero, sólo puedo comprobar más, pero me gusta mucho este color oscuro. Entonces ahora tengo los tres colores. Por lo que quiero recordarles, acuerdo con la regla 603010, esos colores serán cambiados de acuerdo a las secciones Lo que significa que si el color de fondo de sección es blanco, podemos usar este color blanco como 60% Y usaremos este color oscuro como 30% Y usaremos este color verde como 10% te lo mostraré en el diseño. Yo sólo quiero que que usemos esos colores de acuerdo a las secciones. Al igual que si una sección tiene color de fondo como el manzano, usaremos el color del texto como Y. espero que lo entiendas ahora tenemos esos tres colores. Pero aún así, no hemos terminado, porque tenemos que considerar sobre la accesibilidad, lo que significa que tenemos que comprobar el contraste de esos colores. Si no conoces la accesibilidad en U X, la explicación simple es cuando creamos un diseño para usuarios, debemos crearlo para que cualquiera pueda usarlo sin ningún problema. Si eres un producto utilizado por personas con discapacidad como el color se une menos o las personas que tienen baja visión, debemos asegurarnos de que todos puedan usar esta app. Y no solo estamos creando una hermosa interfaz de usuario, también consideramos sobre UA. Y tenemos que poner al usuario al frente y al centro y crear el diseño para los usuarios. En la siguiente lección, te mostraré cómo verificar el contraste. 6. Comprobación de la accesibilidad del color: Ahora es el momento de hacer la accesibilidad, así que tenemos que comprobar el contraste. Para ello, voy acolortadobby.com Cuando vayas al sitio web de Adobcolor, verás este tipo de pestaña y verás herramientas de accesibilidad acolortadobby.com Cuando vayas al sitio web de Adobcolor, verás este tipo de pestaña y verás herramientas de accesibilidad. Simplemente hago clic en él. Y ahora tengo herramienta de comprobador de Contraste. Además, también tengo herramienta daltónica. En este caso, hago clic en Contrast Checker, luego lo admito aquí y verifico la relación de contraste. Selecciono este color y voy aquí, Luego pego el color aquí. Después de eso, también seleccionaré este color secundario. Cuando comprobamos el contraste, la relación de contraste es realmente baja y la prueba fue fallada. Esto significa que tengo que en el color de atrás hacia abajo, porque si creo un botón con este componente grapic de botón de color y uso el color de retroceso, un blanco, será un problema para los abusadores Cambiar el color del texto a blanco y el color de fondo ya que este color verde aún obtuvimos el resultado como justo. Ahora vayamos a la paleta de colores y veamos cómo funciona con el color de acento. Voy a poner el acento color texto y ahora pasa el texto. Cambiemos el color del texto y el color de fondo. Si el color de fondo es negro, esto funciona bien. Pero en nuestro caso, necesitamos agregar color de texto como negro y color de fondo como este color verde. Entonces ahora lo que podemos hacer es cambiar esta espalda de color marrón. Puedo usar este filtro para cambiarlo, o puedo aplicar esta sugerencia de contraste así. Bien, parece que este color está funcionando bien. Y cambiemos el color del sabor verde y el color de fondo como el negro. Y funciona bien. Y el contraste Precio es realmente bueno y ahora tenemos que comprobarlo con este color blanco, así que vamos a calmarlo y agreguemos color de fondo como este color blanco. Y en ese caso, seguimos fallando. Entonces lo que debemos hacer aquí es mi sugerencia, uso el color de fondo como negro. Hago el color principal o color primario, nuestro color de marca como verde más oscuro. Entonces voy a aplicar este filtro. Y entonces el blanco será el color de fondo. Para que puedas ajustar este blanco si quieres. Entonces cambiemos el color de fondo a color de texto. Y está funcionando bien en mi app Call to actions como botones estarán en verde y el texto de ese botón estará en blanco. Y este es el color verde que tengo que seleccionar. Y vamos a la paleta de colores y desbloqueemos esto. Entonces voy a cambiar este color. Ahora vamos a copiar este color más oscuro. Y voy a usar este color como color de texto. Pero cuando use este color de texto, mis fondos serán blancos así. Entonces, si usamos este método, no tendremos ningún problema de contraste de color. Y pasaremos nuestra prueba de accesibilidad. Así que juega con estos niveles y consigue la mejor relación de contraste. Bien, ahora encontramos nuestra paleta de colores. En la siguiente lección, hablaremos sobre cómo encontrar la tipografía adecuada y mejor para el 7. Conferencia adicional: formas fáciles de seleccionar los colores: Bien, veamos la manera fácil y rápida encontrar los colores adecuados para ti. Podemos encontrar colores u inspirarnos en nuestros competidores para que podamos crear un moodboard y recopilar el diseño de nuestros Y reúne algo de inspiración de diseño de sitios web como Dribble Bas y Pintores Entonces hagámoslo. En primer lugar, crearé un marco en Figma y aumentaré el tamaño del marco Este será mi mood board, así que lo renombraré como mood board. Pero si no tienes experiencia en Fikma, no te preocupes. Te mostraré cómo usar Sikma en las próximas lecciones. Por ahora, solo mira lo que hago. Entonces ahora voy a buscar a mis competidores. Entonces mis competidores son otra aplicación de comida a domicilio y panadería. Entonces una cosa que puedo hacer es ir a Place Stow y buscar app de entrega de comida a domicilio. Bien, ahora estoy en mi lugar para dar cuenta. Entonces buscaré aplicación de entrega de comida a domicilio y voy a ver este tipo de resultado. Sin embargo, tienes que encontrar las aplicaciones relacionadas con tu nicho o relacionadas con tu aplicación, lo que significa que tus competidores luego verifican la cuenta de revisión y encuentran la inspiración de diseño. A modo de ejemplo, si voy a la Aplicar esto y aquí puedo comprobar la pantalla de la app. También ca instalarlo en mi móvil y revisar la pantalla de esa manera. Lo siguiente que podemos hacer es comprobar las inspiraciones de diseño en sitios web como Dribble Ahora estoy en Dribble.com y puedes crear fácilmente pre cuenta en Bleble es un sitio web que los diseñadores comparten el trabajo que hacen Entonces si voy aquí y busco la app de comida a domicilio y selecciono el móvil en el campo y voy a ver este tipo de apps. Abramos algunas de ellas. Bien, después de que abra esas aplicaciones, obtendré captura de pantalla. Jefe de Prensa Comando y Poll Mac. Y en Windows se puede utilizar la herramienta Ni Pin. Entonces voy a obtener la captura de pantalla arriba de esta. Vamos a tener la pantalla shotopp en realidad aquí. Tenemos el color que elige el creador de aplicaciones para diseñar la aplicación. Entonces vamos a obtener esos detalles. Cuando encontramos inspiraciones de diseño como Dribble, mayoría de las veces obtenemos diseños poco realistas, lo que significa que si creamos diseños con esas plantillas tal como son, puede ser una buena interfaz de usuario, usar una interfaz Pero a veces la mayoría de esos diseños son complicados y no tienen una buena experiencia de usuario. Sin embargo, en este caso, utilizamos esos diseños para obtener inspiración de color. Pero también podemos usar esos diseños para inspirarnos en el diseño. Pero cuando tratamos de inspirarnos en el diseño, tenemos que verificar la usabilidad y usar la experiencia de esos diseños. Es por eso que debemos realizar análisis de la competencia y encontrar la fuerza y debilidad de nuestros competidores y obtener ideas e inspiración de nuestros competidores Bien, ahora voy a la cuenta de Figma y agregaré todos esos screenshot en Mood board. Simplemente seleccione Early Screenshot y en ellos así. Y ahora los voy a poner en el marco. Antes de hacer eso, hago clic en el marco y cambio el color del campo a like as, así será más oscuro. Encontraremos fácilmente la inspiración que reunamos. Bien, vamos a ellos así. Cuando creamos el mood board, siempre tratamos de al menos 20 inspiraciones de diseño Por lo que será fácil encontrar los colores adecuados u obtener inspiración de diseño cuando los revisemos. Además, vemos claramente que hay colores como naranja, rojo claro y verde para los colores. Esos son los colores de la marca. Y el negro es el color del texto, y el color de fondo es el blanco. Entonces esta es la forma más fácil de obtener inspiración de color. Si no tienes idea de los colores, puedes usar este método para seleccionar colores. Pero recomiendo encarecidamente preferir psicología del color e ir por ese camino. Sin embargo, después de seleccionar el color, cuando termine con la selección de color, cree un marco como este. Y presione, cuando lo presione se abrirá el selector de color y me gustaría agregar el color verde Así que haz clic en el color verde. Y luego me gustaría agregar el color marrón posterior. Es blanco. Entonces duplicaré esto presionando Alt y arrástrelo a la derecha y lo seleccionaré. Después presiona y selecciona el color marrón posterior como blanco. Bien, y además duplicarlo y presionar entonces tenemos que encontrar el color del texto. El color del texto será este. Bien, ahora tenemos tres colores. 8. Fundamentos de la tipografía: Elegir la tipografía adecuada para la aplicación es la parte más importante del diseño de UY US Comprender los fundamentos clasificación de tipos, tipografía y fuente es esencial para crear un diseño que comunique de manera efectiva e involucre a los usuarios sin ningún problema Entonces hablemos de clasificación de tipos. La clasificación de tipos tiene varias categorías con ella, características únicas. Hay dos clasificaciones de tipo más importantes, las que son Serif y San Serif En la clasificación de tipo serif, tiene pequeñas líneas decorativas al final de los caracteres. Esos ponts se transmiten un campo más tradicional y formal Por otro lado, tenemos clasificación de tipo sunserif Y la clasificación de tipo Sun Serif no tiene líneas al final de los caracteres. Esos teléfonos limpios y modernos, haciéndolos populares para las interfaces digitales. Entonces tenemos que elegir el tipo de letra y la fuente. Averiguemos la diferencia entre tipografía y fuente. Un tipo de letra es un diseño de los personajes, mientras que una fuente es los estilos y tamaño específicos de ese diseño Por ejemplo, Aerial es el tipo de letra. 42 fix bold es la fuente. Veamos otro ejemplo. En este caso, la cara tipo es Roboto y el frontal es 50 weekel regular 9. Mensaje y emoción en tipografía: Averiguemos cómo seleccionar la tipografía correcta para tu app En esta lección, te daré la información básica. Y en la siguiente lección, pondremos los conocimientos que reunamos en esta lección para seleccionar la tipografía que sea adecuada para nuestra app Y usaremos sitio web como Google Phone para encontrar el mejor teléfono para cualquier tipo de aplicación o sitio web. Cada aplicación o sitio web tiene un mensaje y emociones específicas que permiten a los usuarios sentir sobre el propósito del producto. Esas emociones y mensajes son cruciales para seleccionar una tipografía efectiva Al considerar los mensajes, podemos reconocerlos en tres partes. Esos son serios era lúdico, moderno, el lujo más tradicional era casual. Hablemos de cada uno de esos mensajes. En mensajes serios, podemos seleccionar clasificaciones. Como si como este ejemplo para play pool, podemos seleccionar la clasificación de tipo sans serif Ferrocarril es el mejor ejemplo como dije antes. En el siguiente video, descubriremos cómo comprobar la fase de la tipografía en sitios web como Google phone Entonces tenemos categoría tradicional moderna. La categoría moderna tiene clasificación minimalista de tipo sanserifphont En tradicional tenemos clasificación tipo serif y luego tenemos lujo y casual En mensajes de lujo, podemos obtener elegantes fuentes de clasificación de tipo serif para Cashewal, podemos obtener ponts como manuscritas Además, podemos seleccionar la tipografía correcta de acuerdo a las emociones que dan en la app Principalmente, hay tres tipos de emociones. Ese daño era enérgico, la fuente era grave y lo formal era informal. Te compartiré la documentación que puedas referir y conocer más sobre qué tipo de clasificación podemos seleccionar según las emociones. Entonces después de entender la clasificación de tipos de nuestra app o sitio web, debemos priorizar la legibilidad No importa la legibilidad de tu marca, dispara, Sé siempre una prioridad máxima Elija un tipo de letra y un tamaño de fuente que sean fáciles de ver, especialmente para texto más largo La mayoría de las veces, Sons Phone suelen ser favorecidos por contenido digital debido a su claridad y facilidad de lectura en las pantallas En la siguiente lección, aprovecharemos nuestra comprensión de la selección de tipografía para elegir el pont perfecto para nuestro diseño de aplicaciones 10. Cómo usar el sitio web de Google Fonts: Averiguemos cómo seleccionar una fuente para nuestro proyecto. Entonces, sólo hay dos formas. El primer método es considerar sobre la emoción y el mensaje de la marca. Y seleccione una fuente según el mensaje. Y la segunda forma es hacer un análisis de la competencia y encontrar los mejores competidores directos e indirectos Después revisa la tifografía que utilizan en el diseño. Hagamos los dos métodos. Y al principio, descubramos cómo seleccionar una tifografía según Entonces vamos a conseguir nuestro ejemplo como de abogados mensaje de bufete de abogados es serio, lo que significa que debería ser un punto serif También en la emoción, el mensaje o la emoción deben ser serios. Lo que significa que podemos usar la tipografía negrita de San Serif. Entonces tenemos dos opciones. Primero, descubramos tipografía de clasificación de tipo serif Así que voy a Font.google.com y Font.doogle.com o Google Font tiene colección de fuentes En la fuente de Google, tenemos una barra de búsqueda. Si conoces fuente específica, puedes buscar en Kitten aquí así. Entonces veamos. Queremos encontrar el tipo de letra, Core Roboto. Entonces cuando lo busco, recibí el teléfono Roboto Bien, lo arrojo, y luego aquí podemos escribir algo que aparezca en la vista previa del texto Ahora aquí dentro, podemos cambiar el tamaño del teléfono. Después de eso, tenemos filtros. En nuestro ejemplo, tenemos que encontrar la clasificación de tipos Serif Entonces selecciono Serif. Cuando selecciono, obtuve este tipo de ponts que se relacionaban con la clasificación de Serf Cuando revisamos el teléfono, eso debería ser serio. Desplázate por los phons de Google y encuentra el pont. En este caso, me gustaría seleccionar este tipo de pont. Vamos a hacer clic en el teléfono y se abre así. Aquí tenemos el nombre del teléfono. Aquí tenemos la característica del teléfono. Ahora puedo ir a la prueba de tipo. En prueba de tipo, puedo ver la vista previa del texto en líneas de cabeza y en texto de párrafo. Para el encabezado, esto va a ser realmente bueno, pero para el texto del cuerpo o el texto del párrafo, no es va a ser un buen ajuste porque la legibilidad no es tan buena Pero podemos ajustar el tamaño de fuente y el espaciado entre letras luego probarlo, trabajar o no. Si disminuyo el tamaño de fuente a 14 píxeles y aumentemos la altura de la línea al doble, puede que se vea mejor, pero me gustaría seleccionar este cabezal de fuente y tenemos que encontrar diferente fuente para el texto del cuerpo. Además, al seleccionar la fuente, siempre vaya y lea el texto acerca y descubra los detalles de esta tipografía Porque la mayoría de las veces esa fuente tiene características y el desarrollador de esas fuentes o el diseñador de esas fuentes las mencionan en la sección about. Entonces busquemos fuente para el cuerpo. Entonces para hacer eso, voy a la página principal. Bien, ahora vuelvo a ir a la fuente de Google para página. Y esta vez vamos a encontrar texto para el cuerpo. Cuando encontramos texto para el cuerpo o para los párrafos, debemos priorizar la legibilidad La clasificación de tipo Sansi será la mejor para el texto del cuerpo. Doy click en este filtro sansori y obtengo este tipo de fuente Ahora voy a disminuir el tamaño para digamos 21. Y ahora vamos a averiguar la fuente que adecuada para Body of the law firm design. Aquí tenemos una tipografía de aspecto profesional. Voy a dar click sobre él, y después podré ver el aspecto de la tipografía Entonces vamos a la prueba de tipo. Y aquí tenemos la vista previa del texto del párrafo y lo voy a destacar. Entonces pongamos la altura de línea en 1.25 y luego podemos cambiar el ancho de la fuente. Hagamos los 300 Was, bien. Esta es una fuente más clara, así que ahora tenemos dos fuentes. Para seleccionar. La fuente, solo podemos encontrar el teléfono que estamos buscando y esta es la tipografía Y este es el teléfono que está con 300. Después hago clic en este botón Seleccionar, y aquí tenemos todos los detalles del teléfono. También, si voy a la fuente que seleccionamos antes para el encabezado, y vamos a ir a prueba de tipo. Y seleccionamos el tamaño como 40. En realidad 40 A es realmente grande para la app, así que hagámosla como 40 y serán 400. Entonces aquí tenemos los detalles apenas rápido sobre él. Y ahora tenemos la fuente que se selecciona. Y en Figma podemos escribir este texto en la sección de fuentes y seleccionar la tipografía En futuras lecciones, te mostraré cómo usar esas fuentes en el diseño Figma, Y en la siguiente lección, seleccionaremos fuente para nuestra aplicación de entrega de comida a domicilio 11. Cómo seleccionar fuentes para una nueva aplicación de entrega de alimentos: Bien, seleccionemos la tipografía para nuestra aplicación de entrega de alimentos. Por lo que el mensaje de la aplicación de entrega de alimentos está relacionado con lo moderno, lo que significa que tenemos que seleccionar clasificación minimalista de tipo san serif Entonces, si comprobamos las emociones de esta app de entrega de comida a domicilio, debería ser enérgica. Por lo que la clasificación de tipo energético es San Serif. Así que vayamos al teléfono de Google y hagamos clic en Filtrar. Después seleccione Sanserif. Y aquí tenemos la fuente. Entonces, seleccionemos la fuente para nuestra aplicación. Mi plan es seleccionar un teléfono o seleccionar una tipografía para toda Al seleccionar un pont, recuerde siempre, seleccione uno o dos ponts. que recordar las claves, principio de diseño UX, lo que significa mantenerlo simple. Estúpido diseño UF bajo. A mí me gusta este teléfono lish. Vamos a abrirlo en una ventana nueva y vamos a desplazarnos hacia abajo para encontrar algunas otras opciones. Quiero algún teléfono que tenga y aspecto moderno. A mí me gusta esta M más una fuente, así que vamos a darle click sobre ella dos. Y vamos al probador de tipos. Y en prueba de tipo, voy a cambiar el tamaño de tipografía de cabeza a 32, y el tamaño del párrafo será de 16 píxeles y regular 400 Creo que esto está igualado. Así que vamos a seleccionarlo. Y luego tenemos que hacerlo, estamos listos para seleccionarlo dos. Y ahora vamos a ir a esta prueba de tipografía y tipo Molis en probador de tipos, cambiemos el tamaño de fuente a 32, 16, el peso habrá terminado Bien, vamos a seleccionar eso también. Bien, ahora aquí tenemos fuentes que seleccionamos. Entonces para averiguar esas fuentes, basta con hacer clic en este Car Ton. Y aquí puedes encontrar la fuente. También ve a la sección Acerca de, y aquí puedes ver los detalles Acerca de. Esta fuente es un tipo de letra de sensor minimalista diseñado tanto para visualización como para tipografía de texto Y aquí hay un detalle. Entonces me gusta mucho este teléfono y usaremos este teléfono, probaremos el encabezado y el texto del párrafo en nuestra app. Entonces esta es la forma en que selecciono el teléfono. Hay teléfonos premium y en los teléfonos de Google puedes encontrar teléfonos gratuitos y profesionales. Tengo que decir que no hay una manera correcta o incorrecta de seleccionar un pont. Lo único que debes considerar la legibilidad. Siempre priorizar la legibilidad y accesibilidad. Incluso encuentras una gran fuente y la agregas a tu diseño. Entonces el contraste no coincide y los usuarios no pueden reconocer fácilmente el mensaje que dices, no pueden leerlo. Lo que significa que siempre intenta ajustar la fuente según la aplicación. Puede aumentar el tamaño de fuente, el ancho de fuente y el interlineado que ayudan a los usuarios a leer fácilmente la fuente y leer el párrafo y comprender el mensaje. 12. Iconografía: Imagina un mundo sin barreras lingüísticas. Un mundo donde todos hablen el mismo idioma. Un lenguaje de símbolos. Este es el poder de la iconografía. Los iconos son más que solo imágenes. una poderosa herramienta que puede guiar a los usuarios, transmitir información y hacer que su diseño sea más atractivo. Al usar icono de manera efectiva, puede mejorar la comprensión del usuario. Clara y consistencia. Icon puede ayudar a los usuarios a navegar su interritmo y entenderlo. Funcionalidad, aunque no hablen el idioma en el diseño. Aumentar el compromiso. Icono bien diseñado puede agregar interés visual al diseño y alentar a los usuarios a explorar diferentes características, ahorrar espacio. Icon puede transmitir mucha información en una pequeña cantidad de espacio, haciéndolos ideales para sitios web y aplicaciones móviles a través del espacio de pantalla es limitado. Averiguemos cómo seleccionar los iconos correctos. El uso de los iconos adecuados es esencial para maximizar su efectividad. Aquí hay algunas cosas a tener en cuenta al seleccionar el ícono para tu proyecto. Claridad, el factor más importante es que el icono sea fácilmente entendido por tu público objetivo. Debe ser simple, familiar e interpretable con alimentación. Consistencia. Usa iconos del mismo conjunto o biblioteca para mantener un estilo visual consistente Cruza tu diseño. Esto ayudará a los usuarios a sentirse compatibles y familiarizados con su contexto de interfaz. Considera el contexto en el que se utilizará el icono. El significado del icono puede cambiar dependiendo de sus elementos circundantes. Accesibilidad, asegúrate de que tus iconos sean accesibles para usuarios con discapacidad. Esto puede significar usar colores rápidos, proporcionar descripciones de texto LT o alternativas, y garantizar que los íconos sean lo suficientemente grandes como para ver con claridad. Ahora puedes pensar que estamos para encontrar íconos. Hay muchos lugares donde puedes encontrar iconos de alta calidad para tu proyecto de diseño. Aquí hay algunas preociones populares, Esos son el pontosmo, los iconos de Google Material, Esos son el pontosmo, los iconos de Google Material, el sustantivo proyecto. algunas versiones pagas. Puedo encontrar un sitio web de fotografía de stock como Do Stock y Hutto Una vez que hayas elegido tus iconos, es importante usarlos de manera efectiva en tu diseño. Aquí hay algunos consejos. No sobrecargues tu diseño con iconos. Demasiados iconos pueden ser abrumadores y confundidos en el usuario. Empareja el icono con el texto. Cuando se usa un icono desconocido, es útil emparejarlo con etiqueta de texto para explicarlo. Es decir, usar estado de libración. Cuando el usuario pasa el cursor sobre un icono, puede aparecer una información sobre herramientas para explicar su función Iconos de prueba. Es importante probar tus íconos con los usuarios para asegurarte de que sean claros y comprensibles. Siguiendo esos consejos, puedes usar el ícono o gráfico para crear un diseño más amigable y atractivo para el usuario. 13. Sistema de diseño: Piense en un sistema de diseño como una caja de herramientas para su diseño de UF. Se trata de una colección de composiones re, utilizables, como botones, iconos, maquetación, junto con las pautas de diseño Todo lo que necesitas para crear una experiencia visualmente consistente y fácil de usar. Entonces, ¿por qué deberías invertir tiempo en aprender sobre el sistema de diseño? Aquí hay algunas razones clave. Primero, aumenta la consistencia Imagine un sitio web donde el botón se vea diferente en cada página. Es confuso y frustrante para los usuarios. Sistema de diseño, asegúrese de que identidad de su marca permanezca consistente en todas las formas de hechos. Y construir confianza y reconocimiento al final tiene efectividad. No más preinventar el sistema de diseño real le ahorrará tiempo y esfuerzo valiosos al proporcionar un componente listo para que pueda adaptar e integrar fácilmente en su proyecto Potencie la colaboración, olvídese de las averías de comunicación. El sistema de diseño sirve como una única fuente de verdad. Fomentar una comprensión clara y colaboración entre diseñadores, desarrolladores y otras partes interesadas. Cree interfaces familiares estelares de Estados Unidos con componentes Individu y diseño consistente que sea más fácil para los usuarios navegar e interactuar con su producto Esto finalmente conduce a una experiencia de usuario importante, agradable y atractiva. Ahora podrías estar pensando en crear tu propio sistema de diseño desde cero. Si bien esa es una opción, requiere tiempo y recursos significativos. En cambio, considere explorar los muchos sistemas de diseño existentes disponibles, cada uno con su propia fuerza y característica. Aquí hay algunos ejemplos populares, Google Material, Este sistema de diseño creado por sistema Google Material Design ofrece un conjunto completo de componentes y pautas para construir en interfaces modernas y hermosas. Apple Human Interface Guideline, Apples HIG, proporciona especificaciones detalladas para diseñar aplicaciones que cobran en casa dentro del sistema de diseño Carbon del ecosistema Apple sistema de diseño de carbono de Ibm se centra en la accesibilidad y la inclusión, asegurando que sus productos sean utilizables por todos Aprender sobre esos sistemas de diseño existentes y cómo funcionan no solo cumplirá su habilidad X, sino que también ofrecerá información valiosa sobre las mejores prácticas y los estándares de la industria 14. Principios y leyes de UX: Crear una aplicación móvil no es solo pensar en el aspecto y la funcionalidad de la aplicación, se trata de entender al usuario. Y poner el centro de frotent del usuario, lo que significa que tenemos que priorizar las necesidades del usuario Y diseñamos nuestra app para dar soluciones a los usuarios pain points. Entonces para hacer esto, tenemos principios Ux. En esta lección, aprendamos sobre el principio X. El primer principio es el diseño centrado en el usuario. Imagine un mundo en el que los sitios web y las aplicaciones estén diseñados teniendo en cuenta sus necesidades y preferencias específicas. Esa es la esencia del diseño centrado en el usuario. Esta filosofía nos coloca en el centro de cada decisión. Así es como funciona. Primero, tenemos que empatizar con el usuario, lo que significa que tenemos que trabajar en zapatos de los usuarios, comprender sus necesidades, metas, frustraciones modelos mentales a través de la investigación y Entonces tenemos que hacer una investigación temprana y frecuente de usuarios. Así que no esperes hasta el final del proyecto. Obtenga comentarios durante todo el proceso de diseño para refinar y mejorar continuamente su producto. Entonces tenemos que crear prototipos y probarlos con usuarios reales Este bucle de retroalimentación nos ayuda a identificar y abordar los problemas de usabilidad desde el principio. Entonces tenemos que enfocarnos en todo el viaje. Cada punto de contacto importa diseñado no solo para características individuales, sino para toda la experiencia que los usuarios tienen con su producto. El segundo principio es la consistencia. Nos ayuda a construir confianza y familiaridad de todo. Imagínese entrar en un restaurante donde un diseño cambia cada vez que lo visita. Sería frustrante, ¿verdad? La consistencia en UX es como un diseño familiar de tu restaurante favorito. Fomenta un sentido de confianza y familiaridad. Facilita a los usuarios la navegación e interacción con tu producto. Aquí, un aspecto clave de la consistencia, el primero es el diseño visual. Mantenga la consistencia en las fuentes, los colores, diseño y los iconos en todas las interfaces. Entonces debemos considerar la navegación. Así que mantén la estructura de navegación consistente en diferentes páginas y secciones. Después terminología. Utilice terminología y jerga consistentes para garantizar la claridad y la comprensión. Ahora tenemos principios de accesibilidad. La accesibilidad ayuda a crear un diseño inclusivo para todos. Imagina un mundo en el que puedas acceder y disfrutar del mundo digital sin importar la limitación. La accesibilidad en UX garantiza que producto sea utilizable e inclusivo para todos, incluidas las personas con discapacidades. Aquí están aspectos esenciales de la accesibilidad. Cumplimiento de Wcag Siga el contenido web. Los lineamientos de accesibilidad son a corto plazo. Usando las pautas de WCAG, puede asegurarse de que su sitio web o aplicación sea accesible para usuarios con diversas habilidades, lenguaje claro y consistente Evite la jerga y los términos técnicos. Usa un lenguaje sencillo y directo que todos puedan entender. Texto alternativo para imágenes, proporcionar texto descriptivo para imágenes. Entonces tenemos Principio de Gist Imagina un sitio web donde la información está destrozada y desorganizada Sería difícil procesar y entender por qué aplicar esos principios puede crear, visualmente atractivo y usar una interfaz amigable. En el diseño estadounidense, hay tres principios clave en los principios de Gita Esas son similitud, proximidad y región común. La similitud significa elementos relacionados con grupos que comparten características como el tamaño del color, formas que mejoran la claridad y la organización La proximidad es colocar elementos relacionados juntos para conectarlos visualmente y guiar la atención de los usuarios. La región común se encierra elementos relacionados dentro un límite compartido para crear un grupo distinto y mejorar el enfoque. Al combinar el diseño centrado en el usuario, la consistencia, la accesibilidad y los principios de Gstar, puede crear una UX que no solo sea funcional y eficiente, sino que también sea deliciosa, atractiva e inclusiva para todos Recuerda, el objetivo final de UX es hacer que la vida de los usuarios sea más fácil y placentera. En futuras lecciones, aplicaremos esos principios para nuestro diseño y obtendremos la experiencia de cómo esos principios nos ayudarán en los proyectos del mundo real. 15. Arquitectura de la información: Siempre luchando por encontrar información en un sitio web o una buena arquitectura de información facilita a los usuarios encontrar lo que necesitan, entenderlo y usarlo. Es una fuerza visible detrás de una gran experiencia de usuario. Piense en la arquitectura de la información AO como un mapa. Necesitas navegar por un nuevo lugar. Debe ser claro consciente, y fácil de seguir. De lo contrario te perderás y frustrarás. He aquí por qué la buena IA importa. Encontrabilidad, los usuarios pueden localizar fácilmente lo que necesitan, ya sea un poste de bloque oculto del producto o atención al cliente La información de comprensibilidad es clara consciente y lógicamente organizada Usar en el lenguaje Todos grafica usabilidad la navegación es intitiva. Permitir a los usuarios moverse realmente y encontrar información relevante sin frustración. Entonces aquí están los principios clave del bien, es claro y simplificar. Solo usa un lenguaje sencillo y evita la jerga. Es una estructura hiderártica que significa información grupal lógicamente, tablero de inicio y ramificación de usabilidad específica y encontrabilidad de Priorizar la búsqueda y el filtro en herramientas. Consistencia y anticipación, lo que significa mantener un estilo y diseño uniformes en todo el diseño Y aquí está la manera de construir un carro de arquitectura de información eficaz acortando el contenido del grupo basado en cómo el usuario lo preserva. Pre pruebas, evaluar cómo los usuarios navegan por la estructura de la información. Los mapas del sitio proporcionan una visión general de la estructura del sitio de olas. resonas de usuario definen tu público objetivo y sus necesidades de información. Auditar contenido, analizar el contenido existente para su relevancia, precisión y organización. 16. Pros y contras de Figma y crea una cuenta de Figma: Bien, vamos a crear una cuenta en Figma. Así que da click en el enlace de Descripción, y llegarás a la Figma.com En Figma, da click en este botón de Empezar Y en este pop up, puedes usar tu correo electrónico y pasar o continuar con Google. Haré clic en Continuar con Google. Aquí seleccionaré mi cuenta de Gmail. Bien. Estoy aquí, puedo añadir el nombre. Entonces voy a agregar mi nombre, luego dar clic en Continuar. Aquí tengo que seleccionar qué tipo de trabajo hago. Entonces hago clic en Diseño, luego hago clic en Continuar. Simplemente seleccione las opciones necesarias y continúe. Aquí, puedo invitar a otros miembros o a los miembros de mi equipo. En este caso, hago clic en el botón Omitir. Ahora tenemos una pregunta. ¿Qué te trae hoy a Fima? Entonces hago clic en Otro y hago clic en Continuar. Haz clic así y haz clic en Continuar. Y aquí, da clic en Starter y haz clic en Continuar. Me saltaré esta parte. Aquí creamos nuestra cuenta Fima. Ahora voy a crear un diseño. Para ello, haga clic en este archivo de diseño y haga clic en Borrador. Bien, aquí podemos crear el diseño que queramos. En primer lugar, nombraré este diseño. Para ello, haga clic en este nombre de archivo. Actualmente es Sin Título. Voy a renombrarlo. Primero mira, presiona Enter, y ahora aquí tenemos opciones para crear el diseño. Entonces llamamos a esta parte es el lienzo, o podemos llamarlo mesa Y aquí, tenemos opciones para seleccionar y crear elementos como marcos, formas y líneas con pences de pluma Y aquí tenemos textos. Y también tenemos botón de recursos. Y tenemos herramientas de mano. Y aquí tenemos botón de comando. Así que vamos a crear un marco. Simplemente hago clic aquí, y cuando hago clic en él obtengo los tamaños de marco preconstruidos. Entonces en este caso, seleccionaré el tamaño como iphone 13.14 Y este es el marco Entonces, cuando construimos nuestra aplicación, construimos en este marco. Entonces voy a cambiar el nombre de este marco a casa. Y ahora voy a crear un rectángulo. Para ello, hago clic aquí, gan esto. Cuando creo un rectángulo aquí, tengo las propiedades del rectángulo. Entonces podemos cambiar el ancho aquí y aquí adentro así. Y podemos cambiar el color de relleno, boom aquí. Entonces podemos agregar trazo, y podemos agregar sombras. Y hay muchas opciones. Entonces ahora creo un texto. Para ello, da clic en este icono y da click aquí. Entonces agreguemos texto como el infierno. Bien, y ahora voy a centrar así. Entonces aquí puedo cambiar la fuente. Lo voy a cambiar como poppins y el tamaño falso será de 45. Entonces hazlo semibold. Y hacer centro de texto, alinearlo al medio. Y aquí podemos cambiar el color. Así que aquí podemos seleccionar otro tipo de formas como esta. Y en esta mano, podemos revisar la lona. Si este lienzo tiene muchos marcos, solo podemos subir y bajar y verificarlo como queramos. Entonces ahora tenemos esta opción de comentario. Fima es una herramienta colaborativa. Si tienes un equipo y quieres mencionar algo, simplemente puedes hacer click sobre este comentario y comentar. Quiero añadir comentario aquí. Entonces hago clic aquí y agrego el comentario como caja de comercio para prueba y primero entro. Y cuando pasas el cursor sobre él, puedes ver el comentario que agregaste Y también puede ver al miembro del equipo de tu equipo. Además, puedes mencionar a los miembros del equipo como este y hacer clic en este en Firmar y agregar los usuarios al nombre del miembro de tu equipo. En este caso, no tenemos miembros del equipo, me voy a mencionar así. Entonces podemos agregar imágenes y también podemos subir imágenes, simplemente jugar con ella. Y en tu lado izquierdo puedes ver el marco y los elementos que se crean. Entonces tenemos estos paneles de afirmación, y en lecciones futuras pasaremos por muchas de esas secciones y detalles Ahora yo n este botón más, y aquí tienes un botón de regalo. Si haces clic en él, el diseño se abrirá así en Figma, también podemos convertir estos markups o los diseños en prototipos, y veremos cómo funcionan en las Además, tenemos opción de compartir si hago clic en este botón Compartir y puedo obtener un enlace compartible de este diseño Entonces esas son las cosas básicas que debes saber sobre Figma. Y en esencia futura, serás maestro de la Figma y podrás crear fácilmente el diseño de Figma. 17. Disposición de cuadrícula: Bien, ahora vamos a estar familiarizados con las rejillas. Entonces eliminaré este marco de formulario y crearé tres marcos. Entonces voy a eliminar esos comentarios, eliminarlos. Y ahora voy a crear marcos. Entonces primero hago clic en el marco y creo marco de tamaño de formulario. Y luego creo otro marco, y este será el tamaño de la tableta. En tablet, es crear este marco de tamaño y también crear un marco de tamaño de escritorio. Bien, ahora tenemos tres marcos. Cuando diseñamos nuestro elemento UI, debemos pensar en una forma de alinear esos objetos para que podamos usar la cuadrícula de diseño para hacer la alineación. En primer lugar, hago clic en el marco y doy clic en esta Rejilla de Diseño Plus. Y ahora tenemos este tipo de disposición de cuadrícula. Aumentemos el tamaño. Aquí hago clic en esta configuración de diseño de cuadrícula. En aquí hago clic en esto de arriba hacia abajo y doy clic en Columna. Se trata de una base inter telefónica. Seleccionaré el conteo de columnas como cinco, y agregaré el margen como 20, lo que significa que tendremos un espacio de 20 píxeles. Bien. Y canalón es el tamaño entre dos elementos Entonces voy a decir cuneta a 50, así. Y hagámoslo con ipad Mini. Y seleccione el ipad Mini Tablet Frame. Y haga clic en Cuadrícula de diseño y haga clic aquí. A continuación, seleccione Columnas. Aquí, estableceré el conteo de columnas seis y el margen será de 30, y la cuneta será de 15 Bien. Puedes cambiar esos espacios de acuerdo a tu diseño. Esta es la forma en la que utilicé para crear el layout. Vayamos a Desktop Frame. Haga clic en Rejilla de diseño. Haga clic aquí, Establecer columna. Después en Layout of the Desktop, serán 12 columnas, y el margen será de 140. Gut será 20. Entonces este es el aspecto del diseño. Entonces si voy a la versión de escritorio, y ahora si creo un rectángulo, puedo alinearlo de acuerdo a esas cuadrículas como esta Entonces es por eso que debemos considerar crear un cuadrícula para entender la alineación de nuestro diseño. En la siguiente lección, descubriremos cómo usar el diseño automático y crear fácilmente nuestro diseño. 18. Conceptos básicos de diseño automático: Cuando empiezo a usar el diseño automático por primera vez, me confundió. Pero hay muchos beneficios de usar el diseño automático. Lo más beneficioso es que puedes ahorrar tiempo aplicando el diseño automático a tu diseño. Porque si no usamos el diseño automático, tenemos que ajustar manualmente las posiciones. Además, después de crear un diseño, si queremos agregar algún contenido o más elementos a la sección del marco, tenemos que solo todo el frame para hacerlo. Pero cuando usamos el diseño automático, solo podemos agregar elementos como queramos y el layout se adaptará según los elementos. Además, podemos crear un diseño receptivo con el diseño automático, que abarcan. Cuando cambiamos el tamaño de la pantalla, los elementos se encogerán o crecerán según el marco. Bien, comencemos a hacer un diseño con maquetación automática. Entonces voy a quitar esos marcos, y vamos a crear un marco para el teléfono. Entonces seleccionaré este marco iphone 15 pro. Bien, agreguemos cuadrícula de diseño a este marco porque nos será fácil verificar la alineación. Hacer una columna el conteo de columnas será de cinco, margen será de 15 y el canalón será de 15 Bien, como primer paso para entender el poder del diseño automático, voy a crear dos botones. Para el primer botón, no voy a utilizar la opción de diseño automático. Y el segundo botón voy a usar el diseño automático. Así que vamos a crear el primer botón. Para ello, hago clic en el rectángulo y creo una botella como esta. ¿Bien? Y cambiemos el color de relleno a rojo. Y agreguemos esquinas como 15. Este es el fondo del botón. Y ahora da clic en el texto. Y agreguemos el texto. Haga clic en OK. Ahora podemos agregar texto como Roboto. En Roboto Naked Medial, y la talla será de 30 Bien, ahora pongo este texto en el rectángulo y vamos a cambiar el color de relleno. Por qué destacar ambos textos. Y presiona el comando G para agruparlo. Después hago clic en este texto y una línea media. Y haga clic en el texto, una línea como clic en el centro de la línea horizontal. Y ahora hago clic en el botón. Y hagámoslo así. Y pensemos que necesitamos agregar el acolchado superior 15 y el acolchado inferior 15. Para ello, ajustaré este texto a 15, 15. Y luego pensemos que necesitamos agregar relleno derecho e izquierdo 50. Para verificar el relleno, puede hacer clic en el elemento que desea verificar. Y presiona todo así aquí dentro. Tenemos que hacer esto 50. Para ello, tenemos que ajustarlo manualmente así. Nueve. Bien, aquí hay 15 y entonces tenemos que hacer lo mismo. Bien, ahora aquí tenemos una botella. Así que vamos a crear la misma botella con diseño automático. Para ello, hago clic en la prueba y creo una prueba llamada click Me, y ahora hago clic en Shift A. Shift A es un atajo para crear un layout automático. ¿Bien? El texto acaba de convertirse en diseño automático. Si verificamos en el lado derecho, veremos esta sección de diseño automático. Y en este diseño automático, podemos cambiar la posición del texto como queramos. Bien, en el diseño automático, podemos agregar relleno como queramos. Simplemente haga clic en este relleno individual y tenemos que agregar el relleno izquierdo y derecho como 15. Y el acolchado superior, veamos, acolchado superior 15. El acolchado superior será de 15. Antes de hacer eso, tengo que hacerlo así. Y ahora rojos relleno superior, 15, 15. Bien, ahora agreguemos el color de relleno. El color de relleno será correcto y el color del texto será negro. Bien, ahora en las esquinas, así que las esquinas serán 15. Aquí están los dos botones, ¿de acuerdo? Después hago clic en el texto y doy clic aquí y lo hago contenido. Y también hacer este contenido, lo que significa que el tamaño se cambiará de acuerdo al texto. Entonces cambiemos este texto a gustar por uno. Consigue uno por uno gratis. Consigue uno gratis. Bien. Ahora pongámoslo así. Y si vamos a hacer lo mismo aquí, vamos a hacerlo como por uno, conseguir una C gratis, tenemos que ajustar manualmente el contenido así. Entonces por eso digo que el diseño automático es realmente potente y no así. Si queremos cambiar el relleno y el margen. Entonces hagamos este relleno izquierdo como 30. Solo necesitamos dar click aquí y solo podemos ajustarlo así. O cuando hagamos clic en él, obtendremos este tipo de pop up. Y aquí podemos agregar los tamaños. Podemos ir aquí y agregarlo desde aquí. ¿Bien? Bien. En este caso, si queremos hacerlo, tenemos que ajustarlo manualmente así. Esto es sólo un ejemplo sencillo. Pero en el futuro, verá el verdadero poder del diseño automático. Además, agreguemos el diseño automático a este marco. Para ello, selecciona el marco y puedes elegir directamente este botón más del diseño automático. O puedes presionar Mayús. En este caso, solo hago clic en este botón más. veamos, queremos hacer esos dos botones a Horizontal. Para ello, basta con hacer clic en el botón Diseño Horizontal, y esos dos se convierten en el Horizontal. Y si queremos Vertical, sólo podemos dar click en Vertical. Y cambiemos el tamaño entre esos dos objetos así. Hagamos que 20 pensemos que queremos ajustar esos dos diseños según el marco. Para ello, haga clic en el elemento y haga clic el contenedor de pelado de redimensionamiento horizontal. Ahora ves que nuestro botón va más allá de la cuadrícula de márgenes. Para arreglarlo, solo podemos cambiar el relleno a izquierda y derecha. Da click aquí, podemos agregarlo como 15, y automáticamente se convierte en 15. Entonces ahora si tenemos que cambiar la posición, podemos dar click en el layout y cambiar la posición así. Este es un método realmente poderoso para crear, diseñar un bot y ese es el beneficio del diseño automático. En el futuro, aprenderemos más sobre diseño automático y crearemos la aplicación de entrega de alimentos con esta función de diseño automático. Y voy a pasar por todas esas opciones. Mientras tanto, investigue o simplemente juegue con esas opciones y aprenda cómo funcionan. Como dije antes, esto fue muy complicado para mí cuando empecé. Pero cuando trato de ajustar las opciones de diseño automático, simplemente se vuelve fácil crear el diseño que trabajo para practicar. Vamos a crear otra opción. Así que solo haz clic aquí y cámbialo a 60. Y en este tiempo, vamos a crear frame y cambiar el color del campo del marco a azul. Hagamos 15 como las esquinas. Ahora voy a duplicar este marco así. Entonces presione control C control, perdón. Simplemente seleccione el marco y controle y controle. Bien, ahora cambia los colores a verde y este será amarillo. Bien, ahora pensemos que queremos poner esas tres cajas de manera horizontal. Para ello, selecciona todos esos objetos y presiona Chief, y acaba de agregarlo al diseño automático. Y ahora puedo hacer clic en el diseño horizontal y hacerlo horizontal. Cambiemos el relleno entre esos botones como 15, hagámoslo como 30. Pensemos que necesitamos cambiar el tamaño de esas cajas. Para ello, da clic en estas casillas para maquetar y cámbialas para rellenarlas. Y ahora selecciona todos esos marcos y hazlos como contenedor de llenado. Ver, ahora podemos ajustarlo de acuerdo al diseño. Ahora bien, si queremos agregar otro rectángulo como este, podemos simplemente crear un rectángulo cuadrado Desn y ponerlo como podemos simplemente copiar uno de este rectángulo y pegarlo así Entonces cambiemos el color para pelear. Y este es el poder del diseño automático. Espero que entiendas los conceptos básicos del diseño automático. Y en el futuro, descubrirás mucho más sobre el auto lay y te veremos en la siguiente lección. En la siguiente lección, aprenderemos a crear una hoja de pegatinas. Y entienda qué es la hoja de pegatinas y cómo usamos la hoja de pegatinas para hacer que nuestro diseño sea fuego. Nos vemos en la siguiente lección. 19. Diseño de un logotipo de marca: Ahora tenemos colores y tipografía de nuestro deseo. Entonces no tenemos un logo de marca, solo tenemos este texto llamado Sweet Food. Así que vamos a convertir este texto en logotipo de marca. Para ello, solo haré una copia e iré a la hoja de pegatinas. En hoja de pegatinas, solo lo paso, luego duplico este color y pongamos este espacio como 90. Y aquí me cambio esto a logo, y ahora puedo cambiar texto a cabeza. Entonces agreguemos este color de primera parte al color verde y el color de la segunda parte a este color oscuro. Si queremos, podemos agregar algunos pequeños iconos delante de este texto. Para ello, tenemos que encontrar icono. Entonces iré a un sitio web como puedo encontrar para encontrar icono gratis. Ahora estoy en Iconfinder. Aquí dentro, buscaré panadería. Entonces tenemos este tipo de icono. Así que vamos a seleccionar algo minimalista y quedar bien en ese diseño En este filtro solo hago clic en Llamar gratis y averiguaremos el icono gratis. Agreguemos cupcake así. Entonces voy a descargar este cupcake. Todo bien. Ahora voy al diseño, y aquí voy a dar ritmo al icono de la magdalena Entonces disminuiré el tamaño del pastel. Y seleccionemos ambos textos. Y presione Mayús en el diseño automático, luego hágalo en el centro a la izquierda. Bien, entonces dejemos caer este icono. Simplemente haga doble clic en el icono. Y verás este tipo de panel aquí, hazlo recortar. Y ahora podemos copiar así. Bien, es más grande, hagámoslo un poco más pequeño así. Y ahora vamos a agregar alguna línea de relleno aquí. Esto es sólo un icono minimalista. Bien, este es el diseño. Creo que voy a cambiar este color Pka a color verde Y así voy a cambiar este color Cpk a este color oscuro o al color verde Creo que este color oscuro va a ser genial. Por lo que sólo voy a hacer clic en el icono. Y ahora hago clic en esta botella de oporto. Y aquí me aumento el tamaño en dos huevos. Entonces esta es la opción de puerto. Y seleccione los iconos y el puerto G clk. Y ahora abriré Potoshop y solo cambiaré el color. Bien, solo cambia el color. Ahora hago doble clic en la imagen y hago clic en este pequeño icono de flecha. Después haga clic en Colocar Imagen Video. Y abrirá mi editor de archivos. Y aquí voy a ver el icono, el editor de empate. Bien, Entonces hago clic aquí para pegarlo. Bien, pega y este es el globo que acabamos de crear. Ahora tenemos los colores, logo y la tipografía También aquí tenemos placa de marco de alambre. Y en siguiente nivel iremos a crear el marcado de alta fidelidad. 20. Hoja de autoadhesivos: La hoja de pegatinas es una colección de elementos de interfaz de usuario prediseñados como botones, menús, iconos y otros componentes Entonces, la hoja de pegatinas es como una hoja de trampa para los diseñadores. Ayuda a los diseñadores a construir interfaces consistentes y fáciles manera rápida y sencilla. Entonces descubramos cómo crear una hoja de pegatinas y cuáles son los beneficios de tener una hoja de pegatinas. Este es nuestro archivo Figma. Voy a ir a la página de marcar. Y aquí voy a crear un nuevo marco. Haga clic aquí, luego aumente el tamaño del marco así. Ahora voy a cambiar este nombre de marco a Tika She. Bien. Como dije antes, Tika Sheet es una colección de diseños preconstruidos. Actualmente, tenemos colores para nuestros diseños y fuentes para nuestro diseño. Así podemos definir los colores y la fuente en la hoja Tika. Cuando comenzamos a diseñar la aplicación, podemos agregar esos componentes de acuerdo con el diseño. Y cuando creamos nuevos componentes y elementos, podemos agregar la copia de esos elementos a la hoja de pegatinas. Entonces comencemos agregando colores y tipografía. Aquí, presiono para crear un texto. Agregué como colores, luego aumenté el tamaño a 50. Cambiar forma a poppins. Me gusta mucho el Fpin quiero, así que por eso siempre uso Fpin Podemos crear un diseño de cuadrícula simple de esa manera se alineará fácilmente y el margen es 60, canalón 20 Todo bien. Ahora alinéelo así. Bien, ahora vamos a revisar la paleta de colores. Saqué una pantalla de la paleta de colores. Así que solo voy a arrastrar y soltar esa paleta de colores aquí. Entonces esta es la paleta de colores. Y ahora voy a crear tres rectángulos porque tenemos tres colores. Entonces da clic aquí y rectángulo, el tamaño será de 150 por 150. Y ahora hago clic en el rectángulo y cambio el color de relleno a este color verde. Y entonces obligo a esos rectángulos. Así que presiona los diez Dragón, déjalo caer así. Bien, ajustemos la posición. Y ahora esto será blanco y este será el color oscuro. ¿Bien? Ahora el color blanco no se mostró en el diseño, así que cambiemos este color de relleno a claro un poco más oscuro así. Bien, ahora podemos crear variables para los colores. Y podemos usar esas variables para nuestro diseño y nos ayudará a crear la consistencia. Entonces hago clic en este rectángulo, y aquí tenemos el color. Por lo que hago clic en este icono de estilo. Y ahora hago clic en este icono más, y va a crear una variable. Aquí puedo agregar el nombre, así que agregaré verde. Y aquí podemos añadir Descripción. Lo dejo vacío. Después hago clic en Crear estilo. Y ahora hago clic en el segundo rectángulo y hago el mismo nombre será él. Y lo hago para la tercera 12. Bien. También seleccionamos el punto para nuestra app, así que duplicaré este texto y lo pondré aquí. Hagamos el espacio entre esos, 260. Entonces cambiaré este texto a tipografía. Después haré clic en Contexto y crearé nuevo texto. Llamemos a este texto encabezado. Y resalto el texto pulsando control o comando por comando. Y luego voy al texto, y el teléfono que seleccionamos es más uno. Entonces aquí está el teléfono que seleccioné la fuente. Entonces cambiaré esta fuente a semibol. El tamaño de la fuente será 350, ¿de acuerdo? Este será el encabezado, Teléfono cinco, vamos a convertirlo en un centro de línea. Y ahora voy a añadir los detalles de este teléfono. Los detalles serán primero el nombre typea, es M más uno e ingresarán una barra Entonces el ancho será seminegrita y el Si será de 35 píxeles Bien, ahora podemos crear texto, cuatro párrafos, solo lo obligo. Y hagamos texto de párrafo Si 16. Y hagamos que el texto se alinee. fue así. Y hagamos del texto una línea de este texto de encabezado como izquierda. Para después cambiar el semi mundo a regular y este será el texto del párrafo. Ahora cambiemos los detalles, regular 16. Bien, principalmente necesitamos dos fuentes para nuestra app. Ahora la hoja de pegatinas tiene un contenido reutilizable, pero actualmente solo definimos los detalles que usamos en nuestra app para reutilizar esos colores y texto. Podemos crear variables para todas y cada una de las propiedades que usamos en los colores y gustos. Al principio, vamos a crear un estilo para este color principal. Podemos llamarlo estilo o variable. Para crearlo, selecciono el triángulo rec, luego voy al relleno de Fill In, hago clic en esto para punto y luego hago clic en este ciclo más. Aquí puedo añadir el nombre. El nombre será verde. Y luego hago clic en Crear Variable. Entonces voy a este color, es blanco. Y haz lo mismo. Haga clic aquí, haga clic en el ciclo más y hágalo. ¿Por qué? Después haga clic en la variable. En realidad ya creé la variable, esa es la razón por la que no puedo crearla. Pero en tu caso, puedes crearlo. Después ve a este color oscuro y da clic aquí, haz clic más, ciclo. Después agrega el nombre y da clic en Crear Variable. Bien, ahora tienes variables para todos esos colores. Ahora vamos a crear una variable para la tipografía. Para ello, simplemente sel tag que quieras crear, Abs, y aquí verás el texto. Da click en este estilo y da click en este Estilo Creativo más Ck. Y aquí, agrega el nombre. Entonces voy a agregar nombres encabezado. Y si quiero, puedo agregar Descripción. Después hago clic en Crear estilo. Después hago clic en el texto del párrafo y hago lo mismo. Haga clic aquí, haga clic en este plan y agregue párrafo. Después haga clic en Estilo Creativo. Bien, ahora tenemos colores reutilizables y tybogapy. Déjame mostrarte cómo re, usar esas cosas. Para ello, voy al wireframe y prototipo. Y aquí sólo voy a crear un rectriángulo como este. Y ahora si quiero cambiar este color rectangular a color verde que usamos en la app, solo puedo hacer clic aquí y hacer clic en el color así. Y si quiero usar el color blanco, simplemente puedo hacer click así o esto. Entonces vamos a crear el texto. Entonces agreguemos texto como hola. Bien, y conviértalo en el centro. Ahora cambiemos el texto a encabezado. Aquí está el texto de encabezado que creamos. Entonces, si queremos cambiarlo a párrafo, simplemente podemos hacer clic aquí y dar clic en el párrafo. En cualquier caso, si necesitas cambiar algunos detalles, puedes hacer clic en este icono de estilo separado. Y ahora aquí puedes cambiar las propiedades que quieras cambiar, así. Esta es la forma de crear una hoja de pegatinas y usar los detalles en la hoja de pegatinas. Cuando creamos componentes como botones, barras de búsqueda, tarjetas y otros elementos, agregaremos los componentes que creamos en el diseño y los convertiremos en componentes libres y utilizables. En futuras lecciones, te mostraré cómo hacerlo. 21. Qué vamos a diseñar y dónde encontrar recursos: Vamos a diseñar app de comida a domicilio. En la clase de prototipos y wireframes diseñados por QY Ux, creamos este conjunto de marcos de alambre y el Si no viste esa parte, puedes verla en el Skillshare Pondré ese enlace en la descripción. Te veo en la sección de diseño visual. 22. Diseño del encabezado: Ahora tenemos una mesa de trabajo limpia y tenemos el conjunto de wireframe, así que es hora de crear Maga de alta fidelidad Empecemos con la página de inicio. Doy clic en la página de inicio y copio el wireframe. Después lo pego en la página de Maga. Vamos a aumentarlo pulsando comando y eligiendo la rueda del ratón. En Mac ahora voy a crear un carrito haga clic en el marco, luego seleccionaré el iphone Prey Mass 13.14 Bien, Ahora cambio el nombre de este nombre de marco a casa Y ahora voy a añadir grilla. Entonces, cuando agreguemos la cuadrícula de diseño, será fácil en cuanto a mantener la alineación en el margen. Lo agregaré como 15 y la canaleta será de 50. Bien, ahora comencemos con esta cabeza. Entonces primero tenemos este menú de hamburguesas. Para crear una hamburguesa, simplemente hago clic en el rectriángulo y uso rectriángulo, o podemos usar iconos, pero en este caso simplemente podemos crear menú de hamburguesa simplemente hago clic en el rectriángulo y uso rectriángulo, o podemos usar iconos, pero en este caso simplemente podemos crear menú de hamburguesa con el triángulo. Voy a hacerlo así, entonces aquí voy a añadir el ancho como 50 y alto impuesto A. Ahora está en las esquinas 15. A ver, este es el diseño y las esquinas serán 15. Y cambiemos el color del campo a este color verde. Bien, ahora voy a doblarlo. Simplemente presione Old Dragon un elemento como este. Ahora voy a destacar ambos de esos retrángulos. Presione Mayús A, haga clic en este icono más para agregar el diseño automático. Resáltelo. Presione esto más C. Bien, ahora lo hago una línea superior centro, y se seleccionará el diseño vertical. Hagamos tres espacios. Bien, ahora da click en la reactivacion y dubligate pulsando control y control Bien, se crea el menú de hamburguesas. Y luego tenemos que crear este título. Ya creamos el título, creamos el logo. Yo solo uso este logo. Antes de usarlo, realmente podemos convertir este logotipo en un componente. En las próximas lecciones, comprenderás claramente sobre el componente. Por ahora, sólo voy a hacer clic en este icono para crear un componente. En las próximas lecciones, voy a mostrar los beneficios del componente y por qué necesitamos usar un componente. Voy a cambiar el nombre de este componente a logo. Bien, ahora vengo aquí y selecciono el marco. Entonces voy a este menú ***. Y en el menú evaluado, en más copa tenemos este componente. Simplemente lo arrastraré y soltaré así. Es más grande, así que vamos a reducir el tamaño. Para reducir el tamaño, sólo voy a presionar control dicho para cortarlo, y escuchar el control para pegarlo aquí. De esta manera, podemos hacer fácilmente los cambios. Como primer paso, solo voy a disminuir el tamaño de este logo, puedo hacerlo 25, 25, bien. Entonces necesitamos cambiar el tamaño del texto. Para cambiarlo, podemos cambiar la variable de texto. Para cambiar la variable de texto, agregamos la variable de texto de encabezado aquí. Simplemente haga clic en él y haga clic aquí. Cuando creamos las pegatinas, te muestro cómo crear este tipo de variables, y espero que la recuerdes. Ajustemos el tamaño del texto. Hagámoslo como 30, pero alrededor del 25 al 22. Creo que esta talla es mejor que antes. Para probarlo correctamente, haga clic en el marco y haga clic en este icono de presente, y se abrirá una nueva ventana. Se ve así. Creo que podemos ajustar esto, solo este texto a 25. 25 será, se ve bien en el diseño. Bien, Ahora tenemos un logo y aquí adentro acabo de cortar este logo y pegarlo de nuevo en la hoja de pegatinas. Si no lo entendiste, no te preocupes. Te mostraré la manera de crear componentes y darte una comprensión completa del componente. Bien, ahora podemos agregar esos dos logotipos, así que el carro ton y el ícono de Vata Para agregar logotipos, podemos usar Biblioteca Pontosum. Fontosum es una biblioteca de iconos. Así podemos usar Google Material Design System y los iconos del Sistema de Diseño de Materiales de Google. Creo que recordarás la lección de que hablamos del sistema de diseño. No obstante, en este caso, usemos Fontosm. En Figma Hay una comunidad en esta comunidad, otros diseñadores tenían sus recursos para la comunidad, y diseñadores como nosotros podemos usar esos recursos. Para usar esos recursos, solo podemos hacer clic en este ícono de recursos y buscar el ítem de recursos aquí. En este caso, se trata de plugins. En plugins, lo buscaré. Fuentes. Aquí está el icono del fontoso Da click en él, y se instalará en la cuenta de Figma. Y se abrirá así. Ya instalé el icono del fontosum en la Figma, así que te mostraré cómo instalar Simplemente haz clic aquí y vamos a instalar algunos. Puedo enchufar tal como iconos, si no instalaste el pontosum Cuando pasas el cursor sobre el pontosum, lo verás así y verás este y verás este Simplemente haz clic en este botón Ejecutar y se cargará en tu cuenta break ma como un plug in. Para encontrar esos complementos, puede hacer clic aquí, y aquí tenemos la sección de complementos. En la bandera en sección, tenemos todos los enchufes que instalamos. También, podemos dar click aquí, y aquí podemos hacer clic en los plugins. Y en los plugins tenemos el plug in que instalamos. Da click en el teléfono o en algunos iconos. Y aquí tenemos que encontrar la tarjeta, Ticon, solo voy a buscar tarjeta Y aquí tenemos icono de tarjetas. Entonces voy a dar click en esta carta ton y se agregó a este diseño, así que la necesito en la página de inicio, así que solo la arrastre y robo a la página de inicio. Y también necesitamos un ícono de avatar. Entonces, consigamos el ícono del avatar. Usuario. Bien, aquí tenemos icono de usuario. Bien, ahora voy a aumentar este tamaño a 30 por 30. Simplemente haga clic en esta propiedad contenida y hágala como 30. Y se ajustará automáticamente según el peso cuando agreguemos este icono de constreñir proporciones Entonces en este caso, hagámoslo 30. Bien, Ahora tenemos dos íconos. Entonces voy a cambiar este color de icono a verde. Creo que te acordarás de la regla 603010. En este caso usaremos 60 como fondo blanco y 30 como el color verde y diez como este icono de pie. Bien, ahora tenemos diseño que debemos agregar a la cabecera. Ahora recordarás el diseño automático, así que agreguemos el diseño automático. Para agregar el diseño automático, resaltaré todas esas secciones y presionaré Jefe, presionaré este ícono más en el diseño automático así. Y ahora necesitamos que esto sea horizontal, así. Para hacerlo horizontal, podemos hacer clic en este diseño horizontal y se vuelve horizontal. Iré a las capas. Bien, ahora ves que hay un problema. En el icono del auto, tenemos frame, pero en el icono del usuario, no tenemos ese frame. La razón es que simplemente se despega con el marco. Así que vamos a crear un marco haciendo clic derecho en él y haciendo clic en Selección de fotogramas. Bien, ahora este diseño automático no encajaba perfectamente con el diseño. Hagámoslo encajar con el diseño. Entonces, para hacer eso primero, tenemos que agregar el diseño automático al marco. Para ello, haga clic en el marco y haga clic en Diseño automático. Bien, en el marco necesitamos disposición vertical, lo que significa que necesitamos una sección de pie verticalmente así. Ahora vamos a ajustar los detalles por ahora. Agreguemos hueco vertical como diez. Y el patrón izquierdo y derecho serán 15. Porque agregamos el margen como 15, lo que significa que los elementos tendrán un relleno de 15 entre dos esquinas. En la parte superior voy a hacer el relleno como diez. Bien, ahora en esta sección de encabezado, voy a cambiarle nombre a encabezado. Y luego agreguemos el contenido fue llenar. Y la vertical está adentro, será, ahora voy a hacerles una línea centro a la izquierda así. Y ahora agreguemos un diseño de peaje a estos dos botones porque este tiene las tres columnas. La primera columna es el menú de hamburguesas, la segunda columna es logo, y la tercera columna es el cartón. Icono de Avata Selecciona esos dos iconos, luego presiona Mayús, Y aquí voy a cambiar el hueco horizontal a 15. Así. Luego configúrelo para llenar contener. Bien, ahora hago clic en el menú de la hamburguesa y lo cambio horizontal, Redimensiona en contenedor de llenado y también voy al logo y hago lo mismo Y ve a los iconos de avatar y configúrelo en el contenedor de campo. Y ahora lo verás así. Entonces ahora es realmente fácil de hacer. Primero hago clic en el menú de la hamburguesa y debería estar en una línea izquierda y una línea centro izquierda Entonces este ícono de avatares debería ser un centro de línea, ¿verdad? Y este logo debería ser un centro de línea. Entonces ahora tenemos el diseño que se centró correctamente. Si lo revisas en el marco, se verá así. Está lejos, débilmente alineado. Y aquí dentro, el ícono del avatar, un poco más grande. Así que cambiemos el tamaño y hagamos que sea similar al ícono del auto. Bien, ahora se ve así. Y agreguemos margen superior como 15. Por lo que actualmente son diez. Simplemente haz clic aquí y hazlo 15. Bien, ahora en la siguiente lección aprenderemos sobre los componentes y convertiremos este encabezado un componente y continuaremos con el diseño. 23. Mejora del encabezado: Cuando revisamos este diseño, el título no es precisamente el centro, así que vamos a hacerlo centro. Para ello, tenemos que ajustar los parámetros del auto. Primero, daremos click en la Autoa principal. Luego establece esta brecha horizontal entre el ítem a cero. Y a continuación daremos click en el logo. Y el logo estará contenido. Y también da clic en este Car Ticon, y el ícono de Avata lo hacen contenido. Y en el menú de hamburguesas conviértalo en un contener Muy bien, ahora el logo está perfectamente centrado solamente. Tenemos que ajustar el espacio entre esas dos secciones. Para ello, selecciona el encabezado y ajusta el tamaño así. Incrementa el diseño también aquí. Muy bien, ahora si lo comprobamos, el logo está centrado con precisión, por lo que hay formas loto de hacer cambios en el diseño usando el layout automático. Por lo que siempre se recomienda que juegues con los ajustes del diseño automático. 24. Todo sobre los componentes: Bien, ahora vamos a crear un componente. Antes de crear un componente, vamos a estar familiarizados con el nombre para que el componente sea un elemento re, utilizable que podemos re, utilizar a lo largo del diseño. Así que vamos a convertir este encabezado en un componente. Para ello solo selecciono el encabezado. Y luego verás un ícono aquí. Y es un crear un componente, así que simplemente hago clic en él. Bien, Ahora este encabezado se convierte en un componente. Cuando se convierte en un componente, el nombre del elemento cambiará y el color del elemento cambiará al color púrpura claro. Bien, ahora veamos los beneficios de este componente. Antes de hacer nada, simplemente cortaré este comando bipasin, una x y lo pegaré en la hoja de pegatinas La hoja de pegatina y pegarla así. Entonces lo voy a poner aquí mismo. Nombremos esta sección como elementos. Bien, ahora aquí está el componente. Este es el primer componente que creamos. Llamamos componente, o que llamamos a este primer componente como componente maestro porque podemos crear mucha instancia usando este componente maestro. Vamos a crear un instante o vamos a crear una copia. Para crear una copia, aísla la página de inicio de nuestra app. Después voy a *** en el panel de aseveraciones, podemos ver todo nuestro componente ¿Recuerdas que ya creamos componente para nuestro logo? Aquí está el nuevo componente y su nombre está encabezado. Doy click en él, y cuando haga clic en él, dirá, por ejemplo, podemos hacer clic en este botón Insertar Instancia, o simplemente podemos arrastrarlo y soltarlo en la página de Inicio. Ahora bien esta es una instancia del componente, lo que significa que si cambiamos este componente principal, cambiará el diseño de esta instancia. Ese es uno de los beneficios que tenemos cuando creamos componente. En ejemplo, basta con hacer clic en este menú de hamburguesas y cambiar el color Ahora hice clic en el componente maestro, así que cambiemos el color a negro Y cuando lo cambie, la instancia de este componente también cambiará. Cuando seleccionamos el componente, las propiedades de ese componente se enumerarán aquí. En aquí tenemos los detalles del componente Cuando pulsamos sobre este icono, tendremos opción de desconectar instancia cuando despegamos Y si ahora cambiamos el diseño del componente maestro, no afectará al componente que detallamos. Además, podemos crear variantes de este componente. A modo de ejemplo, vamos a crear una página diferente. Simplemente duplicaré esta página y eliminaré esta instancia del componente. Ahora bien, si vamos a la página de wireframes y fototipos en Search Foods, no tenemos el logo en Search Food, tenemos el título llamado Search Así que vamos a copiar la página Buscar comida y aquí. Y ahora cambiemos este título a Search Food. Y ahora aquí está la página de inicio y aquí está la Búsqueda de Alimentos. La diferencia está en aquí tenemos título llamado Search Food, lo que significa que tenemos que reemplazar este logotipo y agregar Search foot title. Buscar en la página de pie. Si solo vamos a aseveraciones y agregamos este encabezado a aquí, este no será el encabezado que queremos agregar Para la página de pie de búsqueda, necesitamos el texto llamado buscar comida. Vamos a hacerlo. Es muy fácil porque podemos crear variantes del componente maestro. Crear variante, seleccionar el componente maestro. En aquí verás un botón llamado variante. Simplemente haz click en él y podrás ver este tipo de variante aumentar el tamaño de esta variante de marco. Y solo lo pondré aquí para tejerlo correctamente. Vamos al panel de capas. Y voy a quitar este logo, porque aquí necesitamos el título. Para crear el título, hago clic en Contexto y clic aquí. Ahora aquí dentro, voy a nombrar esto como título de página. Bien, en el título de la página, usaremos el texto como encabezado. Entonces ahora tenemos que agregar un diseño de peaje a este título. Yo solo haré el primer turno A, luego cambiaré esto para sentirme así. Y ahora tenemos la variante de este componente. En lugar de usar este componente maestro, ahora podemos usar esta variante con las características similares del componente maestro. En este caso, sólo voy a reducir los textiles del título. Para ello doy click en el título y desapago los estilos de la cabecera Y hagamos que el texto del título me guste al 21, así, lo hagamos en el centro, y en el texto como centro. Bien, ahora vamos a nuestra página de pie de búsqueda. Aquí dentro. Si vamos a los aseveros, veremos el encabezado Así que haz clic en el encabezado. Y aquí tenemos opción de seleccionar el componente maestro o variante como queremos agregarlo al diseño. En este caso, queremos añadir la variante. Así que solo haz clic aquí y selecciona la variante y haz clic en Insertar. Y ahora veremos este tipo de diseño. Y esta es la variante. Solo quita esto. Si solo lo ponemos así, podremos ver las propiedades de la instancia de este encabezado. Y aquí podemos seleccionar la variante y se verá así. Esta es la forma de crear variante y agregarla a las páginas separadas. Ahora solo puedo presionar té y cambiar este texto para buscar alimentos como este. Este es el beneficio del componente de uso. Si no usamos componentes, tendremos que crear repetidamente los diseños para todas y cada una de las secciones. Por eso necesitamos usar componentes. En la cara del prototipo, podemos usar este componente para crear fácilmente nuestro prototipo. Lo mostraré en la sección de prototipos. Aquí, teníamos el mismo problema que este texto no se alineaba correctamente. Para arreglar este tejido de alineación, podemos enviar este texto al lado izquierdo y agregar el espacio entre el menú de la hamburguesa y el texto Para ello, iré al componente maestro. en esta variante seleccionaré los textos que tengan maquetación automática y la convertiré en una línea a la izquierda. Y seleccionaré el texto y también convertiré el texto en una línea que quede aquí. El componente principal, voy a cambiar el diseño automático, hueco horizontal a 15, así. Y ahora si revisamos su diseño, se verá así y podremos solucionar el problema del centro de texto. 25. Diseño del cuadro de búsqueda: Bien, vamos a crear esta barra de búsqueda. Antes de crearlo, voy a ocultar este marco de pie de búsqueda porque tenemos trabajo que hacer en la página principal. Entonces selecciona la página de pie de búsqueda, y aquí la voy a bloquear, lo que significa que no puedo editar el diseño. Y luego hago clic en este icono y desaparecerá. Y voy a hacer lo mismo con el marco de alambre también. Bien, vamos a crear el libro de búsqueda. Para crear un libro de búsqueda, hago clic en conret Tangle ahí Haga clic en el marco. Y ahora estableceré la altura del triángulo rec como 45. Y luego voy a convertir esto a auto layout, presione en Shift y A. Luego configuraré el tamaño como contenedor de campo. Cambiaré el tamaño de Trang a contenedor Field. Bien, ahora voy a cambiar este color de campo a blanco. Y agreguemos el efecto de sombra. Para agregar los efectos de sombra, basta con hacer clic en el rectángulo en el efecto. Haga clic aquí, haga clic en el hijo más. Después da click en este icono de sol. Y ahora voy a hacer y como cero. Aumentemos esto. Y ahora voy a cambiar desenfoque a luz 15. 15 es demasiado, hagámoslo a y aumentemos la opacidad a la luz 50 ¿Bien? Ahora voy a agregar esquinas. Agreguemos esquinas a la luz 25. ¿Bien? Y las sombras son demasiado negras, así que cambiemos la opacidad a 25 ¿Bien? Ahora bien, si lo comprobamos en el diseño, se verá así. Y si queremos, podemos agregar trazo alrededor del cuadro de búsqueda, pero por ahora esto va a ser bueno. Y si hay algún problema de contraste o problemas de accesibilidad, cambiaremos el diseño. Bien, ahora tenemos que agregar este cuadro de búsqueda. Para ello, iré a fontosum e infontosal Aquí, acabo de agregar el cuadro de búsqueda y tenemos que agregarlo dentro de este contenedor. Para ello, selecciono el cuadro de búsqueda y presiono el comando X para cortarlo, y aquí, presiono comando nosotros para pegarlo. Bien, ahora seleccionamos este rectángulo como campo horizontal, así que no hay espacio para agregar este cuadro de búsqueda. Entonces es por eso que este cuadro de búsqueda puso debajo del cuadro de texto. Entonces, si hago la maquetación como disposición horizontal, se verá así. Pero necesitamos agregar este cuadro de búsqueda dentro de la barra de búsqueda. Para hacerlo, seleccionaré el cuadro de búsqueda, y luego aquí dentro, puedo hacer de este contenido una posición absoluta. Lo que significa que podemos poner este icono de búsqueda en cualquier parte del diseño así. Porque ya no depende de este diseño automático. Podemos ajustar libremente la posición de este cuadro de búsqueda. Pongámoslo aquí. Y así entonces lo voy a cambiar de color a color de equipo. Entonces, cuando hago clic en esto, solo da clic en el diseño automático. Si solo quiero hacer clic en este cuadro de búsqueda, tengo que hacer doble clic aquí, pero hay un corto, el atajo es presionar la tecla de comando y simplemente dar clic en el icono que desea seleccionar. A modo de ejemplo, si quiero seleccionar este logotipo, si lo selecciono así, seleccionó todo el layout. Pero si presiono Comando y lo selecciono, para selate el elemento inferior en el comando Mac en Windows, creo que debería ser control Sólo juega con las llaves. Bien, ahora hago clic en este icono de vector y selecciono el color oscuro así. ¿Bien? Ahora en U x el espaciado negativo es realmente importante porque si tenemos un buen espaciado negativo, ayudará a los usuarios a leerlo correctamente y comprender la pliativa del diseño Para agregar el espaciado negativo, podemos agregarlo directamente al diseño automático del hogar. Entonces hago clic en el marco de inicio. Y aquí voy a agregar espaciado negativo, o agrego el hueco vertical 60. Ahora bien, si reviso el marcado, se verá así. Bien. 26. Diseño de la sección de categorías - Parte 01: Ahora tenemos que crear esta sección de categoría para hacer ese énfasis y crear un texto llamado Categorías de Categoría, luego seleccionado como encabezado. Y el color será el color oscuro. Y ahora tenemos imagen y la descripción de la imagen. La primera imagen será Daily Special, la primera categoría será Daily Special, segunda una Paste y la tercera una bebidas. Vamos a crear esas categorías. Para crearlos primero, necesitamos crear la imagen. Por ahora, voy a usar rectriángulos un rectángulo como este, y luego necesitamos otro texto Entonces, vamos a crear un texto. El texto serán especiales del día. Bien, ahora cambiemos el texto a párrafo. En realidad, es mejor tener un teléfono más grande. Así que vamos a crear diferente variante del teléfono para Vamos a duplicar esta y separar el estilo Entonces hagamos que este medio haga clic aquí, concrettyle rápido. Nombremos esto como Subtítulo Estilo concreto. Bien, ahora vamos a nuestro diseño. Haga clic aquí y cambie el texto de este estilo a subtítulo Bien, ahora seleccionaré estos dos elementos y presionaré Mayús A. Luego lo convertiré en el centro, y el espacio será de 15. Y ahora también da clic a esas dos secciones. Presiona Mayús A para categorizarlo Aquí, agregaremos el espacio negativo como 20 Aquí tenemos cuatro secciones. Para crear cuatro secciones, tenemos que seleccionar los elementos de la categoría y presionar Mayús A. Luego configuraré el layout como layout horizontal. Y ahora si selecciono la categoría única, presione doblarlos. Tan solo arrastra y soga así. Ahora si lo revisas, tenemos que reducir el tamaño porque necesitamos cuatro artículos para reducir el tamaño antes de reducir el tamaño. Si creamos un uso de componente en el elemento de categoría única, será fácil cambiar el diseño porque cuando cambiemos el componente maestro, también afectará la instancia del componente maestro. Voy a quitar el componente que no vamos a usar, y aquí voy a convertir un componente, y vamos a nombrar este componente como elemento de categoría. Ahora podemos ajustar el tamaño, vamos a ajustar este tamaño a 72 por 72. Y así tenemos que reducir el tamaño de este texto. Para ello, simplemente voy a hacer clic en el texto y en un estilo con desenlazar Y vamos a reducir el tamaño de fuente a, al espaciado se establecerá en s. Bien, ahora vamos a Aserts y comprobemos el componente que creamos Y vamos a agregarlo aquí. Y agreguemos cuatro de ellos. Este es el componente maestro. Crear, por ejemplo. Y pondré componente Maestro en la parte superior. Y seleccione todos esos componentes. Y presiona Mayús aquí para agregar el diseño. Y hagámoslo disposición horizontal. Y aquí tenemos que reducir el tamaño un poco más. Hagámoslo como 65. Ahora vamos a reducir el espacio entre esas dos opciones. Hagámoslo como 15. Bien, aquí vamos a hacer el espacio a 12. Y ahora podemos aumentar este tamaño de rectángulo. Presiona comando y selecciona la maraña. Y aumentemos su tamaño a 80 y hagamos que sea 80. Bien, ahora tenemos cuatro categorías. Y ahora voy a cortar el componente maestro. Diez, agrégalo en la hoja de pegatinas así. Entonces podemos ir a evaluar y agregar componente a aquí. Voy a cambiar este espacio a 15, bien. Si revisamos el Moca, se verá así Y ahora tenemos que encontrar imágenes y agregar esas imágenes. Entonces tenemos que cambiar el texto de cada ítem de categoría. 27. Diseño de la sección de categorías - Parte 02: Bien, ahora tenemos que cambiar esos títulos. Entonces vamos a cambiarlos. El segundo título será pegar esto. Entonces hago clic aquí, luego presiono comando y selecciono este texto para copiarlo. Entonces voy aquí y lo pego así. En realidad, tengo que pegarlo sin estilo. Entonces primero voy a pegar el texto aquí. Después presionaré control para cortarlo y pegarlo en nuestra categoría. Y a continuación, vaya a Bebidas y presione comando y seleccione los elementos. Después copiarlo y pegarlo en la barra de URL, ya que cuando coloquemos estricto en la barra de URL, podremos eliminar todo el estilo como ejemplo figuras ops pace esto aquí el texto cambia al texto diferente, Nuestro texto original es más uno. Por eso colocamos estricto en la barra de URL y colocamos el texto aquí. Bien, Ahora es el momento de agregar imágenes. Para ello, presiono Comando y selecciono este rectángulo. Y vamos a sustituir este rectángulo con imágenes. Para ello, voy a la Forma a, y da click aquí. Después haga clic en Colocar Imágenes Video. Ahora tenemos las imágenes. Entonces agregaré esas imágenes a la descripción de la sección de recursos. Y cuando seleccionamos la imagen, podemos ponerla así, y está en la imagen pastosa, la imagen las bebidas, y finalmente, la imagen ligera Bien, ahora si comprobamos el diseño, esas imágenes no tienen esquinas redondeadas, así que vamos a reducir las esquinas de esas Para ello, podemos usar nuestro componente maestro. Entonces haga clic en el rectángulo de la imagen en Componente maestro. Y agreguemos imágenes radiadas como 15 esquinas redondeadas en 15 Y escucha las esquinas radiadas y se ve mejor. Ahora tenemos que crear la sección de pie fofular y la sección de pie recomendada 28. Diseñar comidas populares - Parte 01: Bien, vamos a crear la popular sección de pies. Primero, tenemos que agregar el título. Por lo que presiono y creo este título como Alimentos populares. Ahora seleccionaré el estilo de texto como Cabeza. Ahora aquí tenemos cuatro alimentos en fila. Pero si agregamos cuatro alimentos elemento en la aplicación, no se verá mejor. Y vamos a tener un tema de accesibilidad. Entonces agreguemos dos alimentos por una fila, y agreguémoslos de dos en dos. Para esta popular sección de comida, mi plan es crear unos elementos que tengan una imagen más grande del alimento y luego nombre. Entonces tendremos el precio por encima del nombre. Y precio tendremos la calificación en número. Entonces intentemos hacerlo Primero, voy a crear un rectángulo. Este recranger será imagen de la comida. Por ahora, hagámoslo así. Y entonces tendremos el nombre de la comida y el precio. Vamos a crear nuevo texto y agregémoslo como nombre como etiqueta. Entonces duplicaré este texto y haré que este dólar sea dos. Bien, Ahora voy a agregar auto a esos dos elementos y hacer un diseño horizontal. Y estableceré la brecha horizontal entre los ítems 20. Y después seleccionaré este rectángulo y crearé auto. Aquí voy a cambiar esto, 62 15. Así, bien. Ahora tenemos que poner este nombre de pie el lado derecho y la cantidad en dólares del lado del laboratorio. Para ello, voy a cambiar este contenido redimensionando horizontal para llenar contenedor. Después agregaré brecha horizontal entre el ítem 22. Bien, ahora ha cambiado así. Y ahora podemos agregar el nombre de los alimentos como queramos. Entonces hay más ajuste. Lo haremos después de completar la sección completa. Entonces, por ahora, vamos a crear la estructura. Y por encima de este pie, título y precio, podemos agregar calificación por estrellas. Para ello, sólo voy a copiar una estrella de aquí. Consigamos estrella de nuestro plug in. Entonces vamos a las fuentes y tal. Estrella, aquí tenemos una estrella. Así que vamos a cortarlo y pegarlo dentro de este diseño automático. Va a ir arriba así. Entonces vamos a redimensionarlo a ocho por ocho. Después agregaré el diseño automático. Y ahora voy a añadir texto dentro de este diseño automático. Este texto será cinco, ¿de acuerdo? Ahora voy a cambiar el color del relleno a oscuro. Cambiemos el color de relleno a oscuro ahora. Entonces cambiaré la salida automática a la disposición horizontal. Aquí tendremos que cambiar el tamaño del pont. Hagámoslo una. y primero podemos agregar nuestro teléfono a este texto. Y vamos a separar el estilo y convertirlo en un, hagámoslo como medio Bien, ahora tenemos esos dos artículos en el medio. Tenemos tamaño de brecha diez, pero lo voy a reducir a dos. Entonces lo haré centro así. Pero aún así no conseguimos que se alinee correctamente. Entonces haré clic en esta Configuración avanzada de diseño automático y haré clic en esta línea base de Alinear texto. Tómalo así, ahora lo alineamos correctamente. Bien, ahora voy a reducir este espacio en como seis. Y ahora vamos a revisar el diseño en la vista previa. Y se verá así. Creo que deberíamos aumentar el tamaño de la estrella y este texto, hagámoslo como 16. Y cambiemos este texto por el texto del subtítulo. ¿Qué pasa con esto? Es más grande. Entonces creo que la herramienta será perfecta. Bien, en el año hay una herramienta. Creo que 13 será perfecto. Y ahora voy a añadir entre Gap como seis y ahora se verá así. Bien, ahora tenemos que ajustar los ajustes de este nombre de pie. Para ello, simplemente hago clic en el nombre del pie y agrego estilo de texto como párrafo. Después agregaré este tamaño, tamaño texto como espadín. Bien, ahora si comprobamos el diseño igual se ve así. Entonces ahora voy a hacer una copia de este diseño. Y agreguemos los dos auto layout, hazlo horizontal así. Entonces si agregamos estos dos. Auto. Y ahora voy a agregar el tamaño de la imagen como 180 por 180. Y solo quita esto, luego dupliquemos esto. Bien, ahora tenemos un problema. Si duplico los alimentos, y hagámoslos como diseño automático y agreguemos el diseño automático horizontal, así que no somos capaces de entender el tamaño correcto que debemos agregar al diseño. Para arreglarlo, simplemente crearé un rectángulo como este y aumentaré los sitios así. O simplemente puedo hacer clic en Llenar Contenedor. Y así con este 360. Ahora bien este es el ancho de los elementos de tamaño completo, pero tenemos que comprobar el tamaño medio de este rectrangle Para ello, voy a dar click en el rectrangle. En el ancho, dividiré el ancho por dos. Entonces obtuve la mitad del tamaño del elemento. Pero aún tenemos un problema. Déjame mostrártelo. Antes de hacer eso, solo aumento el tamaño del marco. Simplemente haga clic en el marco y presione Comando en Mac y todo ton Windows. Entonces arrástrelo así. Bien, ahora duplicaré esto y agregaré diseño automático. Y agrégalo así. Después retire este hueco horizontal a cero. Ahora no tenemos el espaciado intermedio. Si solo usamos este tamaño de elemento como la mitad del ítem para arreglarlo, tenemos que agregar un 15% de brecha entre esos dos elementos. Podemos hacerlo fácilmente sumando esta brecha más allá de las 15. Y haz clic en Dirrangle, haz que llene contenedor. Y haz clic en este rectángulo y haz que llene contenedor. De esa manera obtenemos el tamaño correcto. Hagamos lo mismo por esto. Para ello, antes que nada, tenemos que seleccionar el marco. En el marco, agregaré el contenedor ts field y también agregaré este contenedor de llenado. Después de eso hago clic aquí y hagamos este espacio entre 215. Y ahora sólo tenemos que aumentar el tamaño de la maraña de la secta. Para ello, sólo podemos seleccionar el rectriángulo y hacerlo caer contenedor y podemos hacer lo mismo con esto Bien. De esa manera solo conseguimos un tallaje perfecto. Ahora voy a quitar esta parte, entonces tenemos más cambios por hacer. En primer lugar, aumentaré la altura de esta imagen de comida a 200, y ahora puedo convertir esto en un componente y hacer otros cambios. Para ello, hago clic en el diseño y doy clic en Componente de Concreto. Aquí, renombro esto como alimento. Bien. 29. Diseñar comidas populares - Parte 02: Ahora hagamos los cambios. Primero, voy a cambiar esta estrella al color de nuestra marca. El color de la marca es verde. Lo siento, destaco la estrella y el texto, luego agrego color como este color verde así. Y ahora imaginemos si tenemos nombre más grande, intentemos agregar un nombre más grande. Y cuando añadimos un nombre más grande, no se alineará perfectamente. Para arreglarlo, simplemente podemos hacer fácilmente este contenedor de llenado y ahora se ajustará acuerdo con el recuento de texto. Así. Si aumentamos el tamaño del precio, también va a bordes ya que podemos agregar relleno a la izquierda a este texto. De esa manera tendremos un espacio entre esas dos secciones. Para ello, presiono Comando y selecciono el texto. Y presione Mayús para convertirlo en diseño automático. Después de eso, agregaré relleno dejado como enfermo, lo haré abrazo y un enfermo. Entonces si añadimos el nombre así, estará directamente vivo. Ahora voy a establecer esto como arreglado con. Entonces presionaré el comando X para cortarlo y pegarlo en hoja de pegatinas así. Bien, también voy a quitar esta. Ahora iré a evaluar y arrastrar y robar este artículo de pie. Entonces presionaré comando para duplicarlo. Después resaltaré ambos objetos y presionaré Shift to en el diseño automático. Después hazlo diseño horizontal. Entonces cambia esta brecha a 15. ¿Qué pasará si ella en to? Bien, ahora se vería así. Ahora tenemos el diseño básico también Tenemos que cambiar las esquinas. Para cambiar las esquinas, iré al componente maestro y agregaré esquinas. Diapositiva 50. No funcionó. Bien, no está funcionando para arreglarlo, vayamos a Componente maestro y agreguemos el color del campo. Ahora podemos ver las esquinas. Además, tenemos que agregar algunos rellenos antes de agregar los rellenos Si reducimos las esquinas de este rectángulo, podremos solucionar el problema. Solo necesitamos reducir las esquinas superior izquierda y superior derecha. Entonces vamos a hacerlos 15 así. Muy bien, y luego tendremos que agregar un poco de relleno para agregar acolchados aquí Voy a hacer acolchado inferior como 15. Y no necesitamos acolchados superiores, pero sí necesitamos acolchado izquierdo y derecho. Así que simplemente haz clic aquí y agrégalo como 15 más o menos. Y esto como 15. En realidad, solo necesitamos agregar relleno para estas dos secciones. Para agregarlo, podemos envolver esta sección, otro diseño automático y ahora podemos agregar pad a este diseño automático así. Creo que 15 es demasiado. Vamos a agregarlo como seis. Y aquí vamos. Si lo comprobamos en el diseño, se verá así. Y ahora podemos agregar efecto de sombra. Para que sea mejor agregar efecto de sombra, ve a Efecto. Y ahora haz clic en el icono del sol. Y vamos a hacer es dos y la borrosidad será dos. Bien, entonces podemos guardar esta sombra haciendo clic aquí. Y haz clic en esta primera con. Y vamos a agregarlo Nombre como Efecto de Artículo Alimenticio. Bien, Ahora bien, si lo comprobamos en el diseño, se verá así. Ahora solo tenemos que agregar algunas imágenes y rellenar detalles originales. Además, tenemos que arreglar el espacio entre esas dos secciones entre la comida popular y este alimento. Para ello, seleccionaré ambos elementos y presionaré Jefe A. Entonces podremos ajustar el tamaño. A ver, el tamaño que usamos aquí, es 15. Y cambiemos esto a 50. Bien, ahora se verá así. Así que sólo podemos seleccionar este fotograma y presionar comando para duplicarlo. En la siguiente lección, agregaremos detalles reales al artículo alimenticio. 30. Diseñar comidas populares - Parte 03: Bien, ahora tenemos que agregar detalles para todos y cada uno de los alimentos. Entonces agarro nombres de alimentos con papas fritas. Entonces tengo set de imágenes, así que ahora tengo todo lo que necesito para crear alimentos reales. Empecemos con éste. Primero, voy a cambiar el nombre del pie. Vayamos a este documento de Google. Puedes encontrar los nombres de los pies e imágenes en la sección de descripción o recursos. Copiaré el nombre y presionaré comando y seleccionaré el texto presione para resaltar el texto y pegar el nombre del pie aquí. Cuando lo pego, puedes ver claramente que tendremos un problema de alineación, lo que significa que necesitamos aumentar este artículo del segundo pie cuando el primer alimento se haga más grande. Entonces, como arreglarlo Primero, intentaremos ajustar esta instancia. Creo que recuerdas que este es el componente maestro del artículo alimenticio y esas son las instancias de, de ese componente. Ajustemos este. Y cuando solucionemos este problema, podemos aplicar los cambios al componente maestro. Presiono comando y selecciono el alimento. Entonces tenemos un problema con la altura actualmente altura, redimensionamiento vertical. Establecer tarea. Intentemos configurarlo como sentir datos de contenedor, simplemente está arreglado. Y tratemos de aumentar el nombre del alimento. Presiona comando y selecciona el texto en rojo alto. Luego presione el comando C y Pegar. Pocas veces así. Bien, ahora el alimento ajusta de acuerdo con el otro alimento. Empecemos por los detalles. Voy a copiar los detalles de aquí y pasado comando y seleccionar el texto. Presione luego el comando Pegar control. Luego copiamos el precio. Da click así y pegarlo así. Pasemos al siguiente así. Pegar, copiar el precio. Pega el precio. Así que ve a la siguiente línea y haz lo mismo. Bien, ahora tenemos que aumentar el tamaño del cuadro. Para ello, simplemente hago clic en esta herramienta de movimiento y selecciono el marco. Después presiona Comando en Mac y control en Windows. Entonces podemos ajustar la altura del marco sin cambiar el co diseño. Agreguemos otros detalles. Bien, presiono en Moto, ahora tenemos los detalles. Y aquí también tenemos que ajustar el freezesize vertical en contenedor de campo Bien, ahora se ve bien. Entonces es momento de agregar las imágenes. Agregar imágenes es realmente fácil de hacer Ese comando de cara y flak fang image fanger En aquí podemos dar click en este pequeño icono desplegable y dar click en imágenes planas slash video Y vamos a la carpeta de imágenes. Bien, aquí, selecciona la imagen y da click en el rectrangle Se convierte en una imagen, luego haz lo mismo primero del diseño. Bien, terminamos con éxito esa parte. Así que vamos a previsualizar el diseño. Vamos al presente. Aquí vamos. Este es el diseño actual. Y ahora podemos cambiar la clasificación por estrellas como nos guste. Al siguiente paso, tenemos que agregar la segunda sección, la sección de alimentos recomendada. En el siguiente video, descubriremos cómo hacerlo. 31. Sección de diseño de alimentos recomendados: Ahora tenemos que crear la sección de pie recomendada. Es muy fácil. Simplemente resalte la sección de comida ofular y presione el comando C o controles, y simplemente presione comando o control, y obtendrá el duplicado de alimento ofular Hago clic en el marco y aumento el tamaño del carrito presionando Comando en Mac o control en ventanas como esta Hagámoslo así. Bien. Y ahora puedo cambiar el Título. Simplemente vaya aquí y haga doble clic aquí, presione el comando C para copiarlo y presione haga clic aquí y presione comando way para pegarlo así. Es muy sencillo. Entonces ahora tenemos las dos secciones. Si quieres, puedes cambiar los alimentos. Pero en este caso, nos enfocamos principalmente en el diseño, y así no voy a cambiar los alimentos. Bien. En la siguiente lección, vamos a diseñar la sección de búsqueda de alimentos. 32. Diseñar una página de búsqueda - Parte 01: Bien, ahora tenemos que diseñar esta búsqueda de página. En uno de nuestros videos anteriores, ya diseñamos la parte de encabezado de la página de búsqueda. Pero comencemos de cero. En primer lugar, desbloquearé esos dos marcos, y ahora seleccionaré la página de búsqueda y la eliminaré porque necesito hacerla desde cero. Entonces puedo conseguir este marco de alambre de aquí. Ahora voy crear un nuevo marco para hacer eso, haga clic en el marco, y el tamaño de fotograma que seleccionamos fue iPhone 13 y 14, bien. Y aquí dentro, voy a cambiar el nombre del marco para buscar fuertes Bien, luego agrego con maquetación Será la columna cinco cinco. El margen será de 15 y la cuneta será de 50. En realidad, tenemos la grilla que ya usamos, y esta es la grilla derecha. Ahora, como primer paso, voy a agregar auto layer a este prame Simplemente, puedo presionar si A o presionar este ciclo más del diseño automático. Y ahora tengo que cambiar la configuración. Por lo que el relleno horizontal será 15 y el relleno vertical también será de 15. Entonces no recuerdo las propiedades de diseño que usé en casa. Entonces hago clic en home frame, y aquí dentro, tenemos los detalles. Por lo que la brecha vertical entre los artículos será de 60, así que vamos a acertar 60. Ahora tenemos que añadir este menú. Si recuerdas el video que creamos variante de nuestro componente principal, creamos una variante para esta sección de encabezado. Si voy a la hoja de pegatinas, aquí está el componente maestro de encabezado, y aquí está la variante. Bien. Ahora puedo directamente en ese componente creando una instancia. Para ello, doy click en el marco y voy a esta sección de asertar Aquí, puedo ver la sección de encabezado. Simplemente hago clic en él y aquí, cambio la propiedad a variante a ella, y ahora hago clic en este inserto inter y la voy a poner aquí. También en esta sección de componentes, puedo cambiar el componente. O puedo cambiar la variante. Bien. Ahora presionaré T y copiaré este texto, luego ven aquí y pegaré el texto así. Ahora hago clic en la herramienta M. Ahora nuestra parte de encabezado está terminada, y ahora tenemos que agregar la barra de búsqueda. Entonces en la barra de búsqueda, tenemos texto de búsqueda llamado hamburguesa. Entonces, si convertimos esta barra de búsqueda un componente y creamos una variante que creamos para el encabezado, podemos usar ese componente directamente. Entonces hagámoslo. Primero, iré al panel de capas y seleccionaré el componente de barra diagonal, y presionaré comando x a ti Entonces lo pondré en la hoja de pegatinas. Pongámoslo. Aquí, ahora lo convierto en un componente. Simplemente seleccione el elemento y haga clic en crear componente. Aquí, voy a cambiar su nombre a la barra de búsqueda de búsqueda. Bien. Ahora puedo crear una variante de este componente, y agregar las tomas de búsqueda para hacerlo, seleccionaré el componente maestro y haré clic en este botón de variante, y ahora si quiero, puedo renombrar la variante. En este caso, voy a añadir con término como este. Y ahora puedo agregar dicho texto a aquí. Vamos a copiar un texto y agregarlo a aquí. Vamos a cuadrar un texto, y el nombre del texto será hamburguesa. Bien. Ahora podemos agregar mosaicos. Entonces tenemos texto anterior, y en este caso, agregaré texto Parag, y luego lo pondré aquí Entonces ahora tengo que aplicar posición absoluta a este texto. Por lo que hago clic aquí. Y ahora lo puedo poner donde quiera que quiera. En este caso, lo voy a poner así. Ahora voy a ir a la página de búsqueda de alimentos y dar clic en llamar Acto y aquí nuestra barra de búsqueda simplemente suelta la barra de búsqueda así. Bien. Ahora tengo un problema porque cuando trato de tomar la variante, la variante, no aparece aquí. La razón de eso es que renombro la variante. Cuando le renombro, solo elimino nuestras propiedades. Para arreglarlo, puedo dar clic aquí y dar clic en agregar nuevo, y luego puedo renombrar la variante. En este caso, vamos a cambiarle el nombre con el término. Bien. Ahora, veamos qué va a pasar. Da click en el instante, y aquí tenemos la variante. Bien, creamos la barra de búsqueda. En la siguiente lección, tenemos que crear la lista de ítems. También al inicio de este video, solo quito la barra de búsqueda y la hago como componente. Así que vamos a crear una instancia de esa barra de búsqueda y agregarla a la página de inicio. Voy a la página de Asarch y aquí adentro, me robo dragón la barra de búsqueda así 33. Diseñar una página de búsqueda - Parte 02: Bien, continuemos con el diseño. Aquí deberíamos tener un texto llamado Resultado de búsqueda para hamburguesa. Por lo que este texto de hamburguesa se cambiará acuerdo con el sistema que busquemos aquí. Así que vamos a crear un cuadro de texto, y vamos a escribir algo así como resultados de búsqueda para Y añadiremos doble código. Y aquí, en este caso usaremos el texto como palabra. Bien, ahora resaltaré el texto e iré al estilo de texto. Aquí voy a decir subtítulo de prueba así. Y ahora voy a destacar el sistema. Y cambiémoslo a verde así. Bien, ahora tenemos que crear este sistema de tarjetas o el sistema de resultados. En el wireframe de búsqueda de alimentos, tenemos tres alimentos Pero como dije en anteriores, si creamos tres alimentos para el resultado de búsqueda, no ayudará a la accesibilidad. Así que vamos a crear este tipo de diseño. Ahora ya tenemos el componente de alimento, lo que significa que podemos ir a la evaluación y simplemente seleccionar el alimento e incluirlo así. Y ahora seleccionaré el texto y el alimento. Después presionaré Shift para hacer un layout automático. Bien, hay un problema cuando agrego el alimento encendido , no se agrega al marco del pie de búsqueda. Así que vamos a eliminarlo. Y también agregaré este texto al marco de pie de búsqueda así. Y vamos a quitar este marco. Bien, ahora empecemos de nuevo. Primero voy a las aseveras y solo arrastro, soltarlo así Después resaltaré el alimento y el texto. Después presiono Jefe. Bien, y aquí tengo que reducir el tamaño intermedio como 15. Creo que son 15. Sí, son 15. Bien, ahora voy a agregar otro alimento como este. Después seleccionaré esos dos alimentos y presionaré Mayús A y lo haré diseño horizontal. Bien, parece que tenemos un problema. Entonces dije el relleno de este marco como 15, pero en la rejilla principal es una diferente. Entonces intentemos verificar los parámetros de la grilla principal. Oh, tenemos que cambiarlo a 15. Déjame verlo aquí. Sí, aquí son 15, así que vamos a cambiarlo a 15. Oh, tengo el problema. Usamos este diseño de rejilla principal para el cable Pm, y en la Y de alta fidelidad tenemos una cuadrícula de diseño diferente. Así que vamos a guardar este sistema de grilla y luego podemos agregarlo a la búsqueda Ford. Para ello voy a dar clic aquí y dar clic en Ciclo Plus. Entonces aquí voy a añadir High five Hi Fi significa a corto plazo de diseño de alta fidelidad. Después hago clic en Crear este estilo. Ahora si hago clic en el Buscar Ford, y vamos a eliminar este y dar clic aquí. Entonces tenemos el sistema de red hi fi así. Entonces, si no recuerdas el sistema grid, puedes consultar el video anterior sobre el sistema grid. Ahora tengo que duplicar este marco así. En este caso, puedo usar los mismos alimentos para el resultado de la búsqueda de alimentos. que significa que no necesito rehacer el trabajo porque ya lo hice Copiaré este marco y agregaré datos aquí. Primero voy a copiar esta. Después presiono Comando control C para copiar. Y yo solo hago clic en este marco y le gusta esto. ¿Bien? Después selecciono el marco de pie de búsqueda y presiono Comando y aumento el tamaño del marco así. ¿Bien? Ahora sólo puedo quitar este alimento vacío. Ahora bien, si revisamos el espacio entre la barra de búsqueda y los resultados de búsqueda, es más grande y la ley de la región común, elementos similares se agruparán. Lo que significa que podemos esas dos secciones como una sola sección. Para ello, haré clic en este marco principal del resultado de búsqueda y daré clic en la barra de búsqueda y presionaré Jefe para que sea auto layout. Entonces voy a reducir este espacio a 15. Deberían ser 15 así. Y ahora tenemos una página de pie de búsqueda. Disminuyamos el tamaño del fotograma. Bien, ahora podemos comprobar la vista previa. Se verá así. Y ahora tenemos un problema. Arreglemos ese problema. Veamos si ese tema es así en la página de inicio, ese tejido no está en la página principal, lo que significa que solo en la página de búsqueda. Ocurre cuando creo un layout automático con toda la sección para arreglarlo. Hagamos algunos ajustes. Primero, seleccionaré este marco y hagamos el Nos sentimos bien. Simplemente se arregló. Volvamos a ver. Bien, ahora que el tejido se ha ido bien Al, en la siguiente lección iremos a la siguiente UI de alta fidelidad, lo que significa página de comida única. 34. Pro Tip: Aquí hay un protyp para mejorar tus habilidades de diseño de interfaz de usuario y obtener inspiración de diseño Entonces, si no tienes ninguna inspiración de diseño o no sabes qué crear para la lista así y cómo debería soltarse el encabezado o no conoces las mejores prácticas y estándares, siempre puedes consultar los sistemas de diseño como Google Material o Apple Human como ejemplo Vamos a Diseño de Materiales. Entonces este es el sistema oficial de diseño de Google. Aquí, podemos verificar componentes en componentes. Vamos a los botones, y vamos a revisar los botones comunes. Y aquí, te proporcionarán todos los detalles y lineamientos que debes seguir para crear un botón. Entonces esas son reglas estándar de UY o diseños UY. Por eso debes seguir este tipo de sistema de diseño si no tienes ninguna idea de diseño, si eres principiante. A modo de ejemplo, si vamos a las pautas y aquí tendremos los detalles con la pantalla fuera de un botón. Que una manera se suma a nuestro diseño. En aquí no seccionamos y cuando seguimos este tipo de sistema de diseño incluso no tienes ninguna habilidad de diseño UX, naturalmente puedes obtener la interfaz fácil de usar. Entonces en este caso, tenemos claves U x principio, mantenlo simple. Estúpido principio Ux. Por eso debes seguir pautas de diseño como esta. En otro ejemplo, si vamos a las tarjetas y ya creamos la lista de tarjetas, así que si vamos aquí, podemos revisar lineamientos, y aquí tenemos las cosas que debemos seguir. En esta serie, puede que no complete todos los elementos de la interfaz de usuario, pero siempre se puede comprobar este tipo de sistemas de diseño y entender cómo crear un diseño perfecto. En ese caso, si construyes la aplicación diferente, puedes seguir las pautas del sistema de diseño y crear componentes de acuerdo a tu requerimiento. 35. Diseño de una página de comida individual - Parte 1: Diseñamos con éxito la página de inicio y la página de pie de búsqueda. Ahora tenemos que diseñar la página de pie único. En primer lugar, voy a copiar este marco de alambre y pegarlo en la página de moke up Bien, ahora voy a crear un nuevo marco. Entonces el tamaño del marco será iphone 13.14 Ahora cambiemos el nombre del marco Bien, Ahora yo y Layout Grid. Simplemente haga clic aquí y aquí está la cuadrícula de diseño guardada, este estilo. Bien. Ahora tenemos que en esta sección de encabezado para hacer eso, solo podemos ir a Actuar, y aquí tenemos la sección de encabezado. Sólo eso lo puede encordar aquí. Y cambiemos la propiedad a la variante dos. Olvidé agregar diseño automático a este marco. Entonces agreguemos el, simplemente haga clic en el marco y haga clic en el seno más en Auto Layout. Y vamos a comprobar los valores. Bien, los valores serán los empalajes superior inferior izquierda derecha son 15 50 y la brecha vertical entre los artículos será de 50 Bien, ahora el título del espacio debería cambiarse como título del artículo alimenticio. En este caso, seleccionaré mi comida como ésta. Presiona comando y selecciona el texto directamente. Presione Selecciónelo y comanda a café en el título de la página. Voy a pasar el nombre del pie. Cuando lo pegue así, el estilo de la fuente cambiará. Primero lo pegaré en la barra de URL y luego lo pegaré así. Bien, ahora selecciono Lema. Ahora tenemos que diseñar este carozel. Este es el Rocrozel. Vamos a diseñarlo. Primero, voy a crear un rectriángulo, y vamos a aumentar el tamaño del rectrangle Esto, hagámoslo 300, bien, 200, bien. Entonces doblaré este rectrangle y seleccionaré ambos retrángulos y presionaré Chit Luego hace un diseño automático, luego lo hace diseño horizontal. ¿Bien? Ahora bien, este segundo rectángulo no es visible. Para que sea visible, puedo dar click en este marco de pie único. Y cuando haga clic en él, podemos ver esta casilla de verificación del contenido del clip. Y se comprobó, si lo desmarco, los elementos fuera del marco serán visibles ¿Bien? Ahora bien, esto es un carrusel, lo que significa que esto tiene la capacidad desplazarse horizontalmente, ¿de acuerdo? Ahora voy a diuce esta brecha a 15, lo que significa que este es el primer elemento del carrusel de cartas y este es el segundo elemento del carrusel y este es el segundo elemento del carrusel ¿Bien? Ahora voy a reducir esto entre brecha a 15 así. Entonces puedo agregar tanto como artículos de carrusel, no lo haré. Agreguemos cuatro de ellos. A lo mejor tres serán trabajo aquí. Vamos a hacer clic en este primer rectángulo y reemplazarlo con la imagen. Para ello iré a Place Image, y aquí tengo tres imágenes. Vamos a agregarlos a esos triángulos, esos así. Bien, ahora podemos comenzar el diseño. Primero voy a reducir las esquinas como 15. Y ahora tenemos que añadir el título. Añadir el título. Simplemente presionaré sobre esto y presionaré aquí. Después grad, agrega texto así. En realidad, podemos copiar el texto de aquí. Cópialo pasado aquí. Y ahora podemos ganar el estilo del texto. Ahora seleccionaré este título de alimento y este carrusel cero y agregaré el diseño automático Presione Mayús diez. Bien, ahora voy a cambiar esto entre ritmo a 15. Después de eso haré clic en este y agregaré el radio de esquina como 15. Nosotros también lo haremos por éste. Bien, Ahora lo que hago es simplemente presionar sobre este diseño automático y presionar Comando. En Windows, debería ser viejo control. Entonces voy a disminuir el tamaño hasta aquí. Ahora lo que hago es presionar en Single Food y dar click en Clip Content. Después haz clic aquí y haz clic en Contenido del clip. Bien, ahora cambio este arreglo con a Llenar Contenedor. Ahora comencemos a sumar esta cantidad en dólares y la calificación por estrellas. 36. Diseño de una página de comida individual - Parte 2: Empecemos a sumar esta cantidad en dólares y la calificación por estrellas. Entonces agregaré cantidad en dólares aquí y calificación por estrellas por debajo del título. Entonces hagámoslo. En primer lugar, voy a cambiar este tamaño de título a tamaño de encabezado, y aquí, agreguemos el precio. Para hacer eso simplemente voy a seguir adelante y crear precio dólar dos. Bien, entonces vamos a hacerlos maquetación automática. Debe ser de disposición horizontal y el ancho será contenedor de llenado. Y agreguemos hueco horizontal a la foto así. Entonces cambiemos este color a verde. Vamos a agregarlo así. Ahora aquí tenemos que agregar calificación por estrellas. Para ello puedo copiar esta forma estrellas comida única o puedo ir a los plugins en Plug in. Ir a Fuentes en fuentes. Aquí tenemos estrella y vamos a seleccionar la estrella y doblarla por un par Y resalta las estrellas desde aquí. Y presione Mayús A. Luego cambie la brecha horizontal a 15. Redujamos el tamaño de esas estrellas. Vamos a hacer clic en Conc Strain Proporciones y hacerlas 14 bien. Y selecciónalos, el hueco horizontal estará bien. Y la mitad de estrella, esto cambia de tamaño a 14. Póngalo dentro del diseño automático. Y esto, bien, ahora tenemos estrella. Vamos a agregarlo en la sección de un solo pie así. Sólo córtalo y pégalo así. Entonces tenemos que sumar la calificación. Para ello, presionaré y crearé un cuadro de texto. Entonces hagámoslo cuatro. Cambia este tamaño de texto a 16 y desvincula este. Vamos a cambiarlo a, entonces puedo agregar este texto dentro del diseño automático. Diez, pégalo así. Luego resalta el diseño automático para que se alinee a la izquierda, al centro y ve a Configuración avanzada de diseño automático. Y da click en este stick a la línea Align Taste Base. Bien, ahora voy a cambiar este color a Color del Tema. Bien, ahora podemos poner esto dentro de este diseño automático. Simplemente presione el control X o el comando X para cortarlo. Diez comandos para pegarlo. Bien, así podemos reducir el tamaño intermedio en las estrellas. Hagámoslo tres. Bien, ahora si lo comprueban en la revisión, se verá así. En realidad, podemos disminuir esto entre el dimensionamiento de este texto y el inicio. Simplemente haga clic en Inicio de diseño automático diez. Haga clic en Text Auto Layout, envuélvala con otra maquetación automática diez. Vamos a reducir estos dos. Bien, es mejor. Ahora es el momento de diseñar este botón y libro de texto para seleccionar el recuento de artículos Creo que esto se ve mejor sin agregar una línea, una línea base de texto. Eliminemos una línea, probemos la línea base. Bien. 37. Diseño de una página de comida individual - Parte 3: Bien, creemos el controlador de conteo y agreguemos el botón de dos tarjetas. En primer lugar, aquí voy a crear un marco como este. En el marco, vamos a ajustar su tamaño como 50 por 14135 será trabajo Bueno entonces voy a reducir las esquinas como 15. Déjame añadir un poco de color de relleno por ahora. Bien, las esquinas 15. Ahora lo que voy a hacer es agregar el Est, click en Tron, cambiar el color del trazo a este color primario. Y ahora voy a quitar el color de relleno. Bien, ahora tengo que agregar el signo más y el signo menos. Entonces vamos a los recursos plug ins, teléfono tosum, viejo teléfono tosum Podemos conseguir esos íconos, Ole search plus. Bien, aquí tenemos el signo más y también vamos a conseguir el signo menos. Bien. Ahora voy a añadir esos más diez, signo menos dentro del marco. Y luego está yo venderé, luego agregaré impuestos. Este texto será uno. Y hay Agregar texto Tamaños. Selección de cabeza, agrega Cabeza. Todo bien. Ahora voy a hacer clic en el Marco y clic en Mayús para que sea un diseño automático. Después de eso, voy a alinear centro. Entonces voy a agregar esta brecha horizontal entre dos auto. Ahora agreguemos el relleno horizontal como 15 y relleno vertical a las cuatro. Bien, ahora voy a quitar esos marcos. Se cambió la altura, así que vamos a la altura fija y agreguemos la altura como 40. Esto. Bien, ahora lo que puedo hacer es cambiar este color de campo a verde. Y ahora tenemos el controlador de conteo. Entonces ahora es el momento de crear un botón. Para crear un botón, voy a crear otro marco y hay un tamaño de marco justo. La altura del marco será de 50 y el marco será de 135. Vamos a las esquinas de radio como 50. En realidad, tenemos que hacer coincidir la radiusación de esquina como la barra de búsqueda porque tenemos que mantener la consistencia Entonces serán 25, así que hagamos que sea un 25. Entonces agregaré color de campo como este, Verde. Entonces voy a radiuzar este control de libra esquinas a 25. Bien, ahora lo que podemos hacer es agregar el cuadro de texto a este marco de botón y el texto será al. Ahora hagamos este marco como diseño automático. Ahora agreguemos el relleno horizontal como 20 y el relleno vertical como 50. 15 es demasiado. Vamos a comprobar el tamaño de esta barra de búsqueda. Hagamos el relleno vertical automático a. Vamos a establecer esto como ancho fijo. Y hagamos la altura fija en altura. Y el tamaño será fot. Ahora cambiemos este tamaño de etiqueta a subpading así. Entonces vamos a convertirlo en un centro de línea. Ahora tenemos este botón. Vamos a crear un componente. Y renombrar el componente como botón. Bien, entonces compra y ve a nuestra hoja de pegatinas. En hoja de pegatina simplemente lo pegaré así. Bien, ahora vamos a obtener la instancia de este botón así. Entonces cambiemos la etiqueta a un auto de dos. Bien, ahora lo que podemos hacer es reducir el tamaño de esos detalles en el controlador de conteo porque cuando lo comparamos con el botón, son dos grandes. Entonces primero cambiemos el tamaño de este subtítulo número dos. Y el botón más y menos será bueno para este tipo de diseño. Así que vamos a seleccionar esos dos marcos y agregarlos en el diseño automático y hacer que el diseño sea horizontal. Después de eso, cambiemos esto entre tamaño a 15. Y ahora tenemos un perfecto botón de tarjeta de tenido que. Además, podemos agregar este botón At a la tarjeta a este marco principal. Seleccione la sección At to card y presione el comando X para cortarlo, y presione el comando V para pegarlo. Bien, entonces voy a cambiar la altura de este botón a 50. Bien, entonces selecciona este marco y haz que se alinee al centro izquierdo así. Vamos a comprobarlo en el diseño, se verá así. En la siguiente lección, tenemos que crear la sección de descripción y revisión. 38. Diseño de una página de comida individual - Parte 4: Ahora es el momento de agregar descripción. Entonces voy a recibir el cuadro de texto, luego voy a escribir algo como esto. Entonces voy a ir a um, Ifs sitio para conseguir algo de texto ficticio Yo sólo voy a copiar línea de texto este ritmo, esa línea de texto aquí. Después haré el texto al párrafo después de eso. que reducirlo así Hay que reducirlo así y sólo me quedaré con cuatro líneas. Después de eso agregaré otro texto y esto será solo link call, lee más y cambia los detalles para dejar de encabezado y cambiar el color de relleno a este color verde. Entonces pongamos ambas secciones y presionemos Mayús A. Luego reduzcamos esto entre el tamaño a 15. Bien, aquí si queremos, podemos agregar texto llamado descripción, pero lo voy a mantener así. Después de este texto, agregaré la línea horizontal para separar esas dos secciones, Entonces será un divisor. Para crear un divisor, voy a hacer clic en Herramienta Forma y clic en Línea. Y vamos a arrastrar una línea como esta y presionar Mayús para que sea una línea correctamente. Ahora aquí, voy a cambiar este color a oscuro. Y hagamos este tamaño cero punto A en el diseño. Se verá así. Si queremos, podemos cambiar este color más oscuro a color gris oscuro así. 39. Diseño de una página de comida individual - Parte 5: Ahora lo que tenemos que hacer es crear un revisible para crearlos, voy a aumentar el tamaño de este solo marco de pie Y aquí dentro, voy a crear un nuevo marco. Y ajustemos el tamaño del marco a esto. Y hagamos alta tarea 135. Ahora podemos agregar efecto. En realidad no podemos agregar directamente efectos al marco. Lo que tenemos que hacer es crear un rectángulo alrededor de este marco y hacerlo así. Entonces vamos a cambiarlo de color. Ahora lo que puedo hacer es hacer a capa, después agreguemos los detalles. Primero tenemos que agregar las reseñas. Para ello, seleccionaré esta sección de revisión y la convertiré en componente, y vamos a cambiarle el nombre como Revisar las estrellas. Entonces lo cortaré de aquí y lo pegaré en la sección de elementos así. Entonces aquí puedo cambiar el tamaño del diseño. Pero antes de cambiarlo, voy a crear una variante. Y ahora podemos cambiar el tamaño de esta variante. Entonces para hacer eso voy a destacar todas las estrellas. Y vamos a cambiar nosotros a los 25, 25 es demasiado. Hagámoslo ya que 2020 será perfecto. Y también este tamaño de texto será de 16. Aumentemos el prime de la variante. Bien, ahora lo que podemos hacer es ir a nuestro diseño y dar click aquí. Después vaya a Activos. En Activos, tenemos estrellas de revisión. Sólo póntelo aquí. En realidad, debería estar dentro de esto, así, ¿de acuerdo? Ahora lo que podemos hacer es ir aquí e ir a ***** y a aseguramientos así Bien. Ahora vamos a seleccionar la segunda variante de esta estrella de revisión. Y ahora arreglemos este problema. Para arreglarlo, voy a hacer clic en el rectriángulo y dar clic aquí para que sea posición absoluta Lo que significa que este rectángulo no se verá afectado al otro lado de esta sección de revisión. Entonces pongamos ese rectángulo en la parte superior de la pantalla. Después selecciono el marco y aumento el tamaño del cuadro. En realidad, tenemos que aumentar este ancho como 300, lo que significa que tenemos que aumentar el rectrangle dos Después de eso, voy a cambiar el efecto porque va ser genial si el efecto va a tener alrededor del elemento, como en este cuadro de búsqueda. Para ello, voy a ir aquí y vamos clic en el rectángulo y dejar de cambiar estos efectos Y da clic aquí. Después hacer y como cero y hacer b ocho. Y ahora se ve bien. Ahora lo que tengo que hacer es agregar algo de relleno horizontal y vertical. Vamos a sumar la masa 15 por 15. Bien, ahora tenemos la vista previa. Entonces agreguemos el cuadro de texto aquí. Por ahora, agreguemos marga es texto como este, Disminuir el tamaño del texto Hagamos el contenedor de llenado de tareas. Bien, ahora cambia el tamaño a paraga. Tenemos que aumentar la altura de este diseño. Vamos a aumentarlo a 200. También aumenta esto. Bien, hagamos que esta brecha tenga un tamaño de 50. Ahora lo que tenemos que hacer es agregar el Avata y el nombre. Para ello, voy a crear un labio, reducir el tamaño del elif a gustar 40 por 40 Ahora lo que tenemos que hacer es agregar otro libro de texto y los libros de texto serán entonces hagámoslo como subtítulo y lo pongamos Luego resalta esas dos secciones y conviértalas a un diseño automático o envuélvala con el diseño automático, solo turno frecuente A. Luego haz un diseño horizontal. Aquí tenemos que cambiar la posición. El texto estará abajo y el icono de Avata estará arriba. Entonces vamos a hacer entre la talla dos. Y vamos a hacer una línea a la izquierda al centro. Ahora lo que podemos hacer es aumentar el ancho. Este comando de prensa de cuadro y aumentarlo así. Además, vamos a aumentar éste a los rectángulos pecado para que en realidad podamos cambiar el contenido de alturas Aquí tenemos 15 acolchados inferior y superior. Se ajustará de acuerdo a esta revisión. Ahora tenemos el recuadro de revisión, y aquí podemos agregar el texto llamado Revisión. Entonces para hacer eso voy a dar click y vamos a hacer revisaremos el encabezado de tamaño y lo pondré por encima de este marco y por debajo de este Cortémoslo primero así, luego seleccionemos esos dos elementos, y primero cambiemos A, luego hagamos el tamaño como 50. Bien, ahora voy a convertir este cuadro de revisión en un componente, seleccionarlo, y dar clic en Crear componente. Entonces le renombraré a Caja de Revisión. Y ahora lo voy a cortar, Luego pegarlo en la hoja de pegatinas así. Bien, ahora lo que puedo hacer es hacer clic en el Marco e ir a Afirma. En aseveraciones tenemos la casilla de revisión. Vamos a crear instantánea y ponérmela aquí. Si voy a Layout y lo corto, entonces podemos pegarlo así. Después de eso, vamos a crear el segundo recuadro de revisión. Para hacer eso, solo puedo doblarlo a éste. Y vamos a crear una tercera. Entonces resaltaré esos tres recuadro de revisión y los haré dentro del diseño automático. Después de eso, hagámoslo diseño horizontal. Después haz clic aquí y haz clic en Contenido del clip. Y se verá así. Entonces lo que podemos hacer es hacer clic en Clip Content. Y aquí esta reseña no debe mostrarse en el relleno. Entonces, si vamos aquí, se verá así. Entonces para hacer eso voy a dar click en el marco y presionar comando y ajustar el. Esto nos gusta, luego simplemente da clic en el contenido del clip. Bien, ahora tenemos el recuadro de revisión. Entonces, cuando reviso este contenido, tenemos un espaciado enorme entre esas dos secciones. Así que vamos a comprobarlo en tiempo real. Cuando lo veas, parece que este espaciado es demasiado porque ya estamos en el divisor, así que si disminuimos este espaciado, no afectará el diseño. Además, tenemos un problema con la sombra paralela del cuadro de revisión para solucionarlo. Ve aquí, aquí. Se verá bien. Pero sí, tenemos un problema. Creo que deberíamos, sí, tenemos que aumentar el tamaño de esta capa automática. En realidad, podemos hacer la altura como contenedor. Entonces agreguemos relleno 15. Bien, arregla. También tenemos que agregar relleno horizontal, como 15. Creo que 15 es demasiado en el acolchado horizontal, que sea cuatro. Bien. Creo que ahora ese tejido se había ido. Todo bien. Ahora resaltaré esas tres secciones y presionaré el turno A para hacer un fotograma diferente. Y ahora podemos disminuir el tamaño a como 15 y vamos a comprobarlo. Bien. Ahora es mirada. Bien. También aquí tenemos otro tema. Porque ya agrego relleno como 15, así que esto debe ser cero. Bien. Ahora se ve bien. Ahora lo que podemos hacer es agregar nombre y avas. Entonces para hacer eso puedo dar click en este marco y eliminar el contenido del click. También haga clic en Madera Única. Después haga clic en, haga clic en, y aquí ahora presiono Comando y ciliar este rectángulo, Ciliar esta Después haga clic en Colocar Imagen. Aquí tenemos avatares. Así que simplemente haz clic en esos avatares y agrégalos. Haremos lo mismo con el resto del diseño. Bien, ahora se verá así. Entonces este carrusel ya sea acciones o el desplazamiento horizontal Seremos creados en la sección de prototipos. Por ahora, solo creamos el UY click on single foot frame y clicamos en Clip content Después haga clic aquí y haga clic en Haga clic en Contenido y agregue la casilla de verificación. Y así es como se ve el diseño del sofá. Ahora voy a reducir este tamaño de marco de pie único así. Ahora completamos tres fotogramas y tenemos que crear este carrito y esos pop up box, hagámoslos en los siguientes videos. 40. Diseño de la página del carrito - Parte 01: Ahora tenemos que diseñar la página del corazón. Así que empecemos en. Juego de marco de alambre. Voy a copiar el marco del corazón. Y vamos a ir a la página de Moka aquí. Lo pegaré así. Y ahora voy a crear un nuevo marco. Lo siento, tengo que seleccionar el tamaño del marco. Es iphone 13.14 Vamos a gritar el marco. Bien, ahora podemos agregar el layout rojo. Bien, ahora lo que tenemos que hacer es sumar cabeza. Entonces vamos aquí, agreguemos el encabezado. Y el encabezado será la variante dos. Aquí, tenemos que convertir estos dos, o tenemos que agregar diseño automático a este marco. Para ello, seleccione el marco y haga clic en Diseño Automático. Y ahora vamos a establecer los tamaños. La brecha vertical entre el artículo será 60 y el relleno horizontal será de 15. Además, el acolchado vertical será de 15. Bien, ahora podemos cambiar este texto a mi tarjeta, copiar el texto de mi tarjeta y pegarlo aquí. Ahora es el momento de crear esto. Para crearlo de primera generación crea un rectángulo y este rectángulo será la imagen del alimento. Entonces hagámoslo 80 por 80. Creo que 100 por 80 va a ser bueno. Bien, ahora esos rincones deberían ser 15, ¿verdad? Sí, esos deberían ser 15. Así. Y ahora tenemos que sumar el título y la cantidad, entonces este tipo de controlador de conteo. Entonces hagámoslo Primero, voy a crear un texto, agreguemos algunos textos como este. A continuación, seleccione algún estilo de texto de encabezado. Y ahora vamos a copiar el nombre. Vamos a copiar este nombre. Pégalo así. En realidad solo tenemos que pegar el texto, y ahora tenemos que agregar este controlador de conteo. Para ello, seleccionaré el controlador de conteo. Vamos a la maquetación. Bien, solo selecciono el controlador de conteo, luego podemos convertir esto en un componente, hacer clic en componente y cambiarle el nombre como controlador de conteo. Bien, ahora lo que voy a hacer es cortarlo de aquí y pegarlo en nuestra hoja de pegatinas. Vamos a pegarlo aquí. Bien, ahora voy a recon este marco y vamos a ir a Assist y conseguir el controlador Hound y ponerlo aquí así Entonces esta es una instancia de controlador de conteo. Ahora necesitamos ese controlador de conteo aquí. Entonces vayamos a asistir. Y ahora arrastra y suelta este controlador de conteo así. Pero en este caso tenemos que hacer esto más pequeño. Entonces para hacer eso podemos crear una variante. Antes de hacer eso, agreguemos la última sección. artículo de cuatro carritos será el precio. Vamos a sumar el precio así. Bien, ahora seleccionaré todos esos elementos y presionaré Mayús para envolverlo con diseño automático. Entonces hagámoslo disposición horizontal. Haga clic aquí y desmarquemos esto. Haga clic en Contenido. Ahora podemos ver el diseño. Redujamos esto entre el espacio de artículos a 15. Hagámoslo una línea a la izquierda al centro. Ahora podemos ajustar el diseño. Primero, comencemos desde aquí. En realidad, solo podemos reducirlo a algo así como en 75. Y ahora da click sobre este texto. Y hagamos este texto al tamaño del texto del párrafo. Bien, ahora vamos a crear una variante de este controlador de conteo y hacer que el kick bit sea más pequeño. Entonces aquí está nuestro componente maestro del controlador de conteo. Vamos a hacer clic en el componente maestro y hacer clic en este en la parte inferior de la variante. Y aquí tenemos una variante. Ahora es el momento de reducir el tamaño. Primero, sólo voy a reducir el tamaño así. Hagámoslo como 100 por 30. cambiemos el tamaño de este signo más. Hagamos clic en esta propuesta de restricción y hagamos clic en el tamaño Y hagámoslo como 60. Vamos a reducirlo a 14. 14 se ven bien aquí. Nosotros podemos hacer lo mismo. Bien, ahora vamos a disminuir el acolchado lateral izquierdo y derecho. Pongámoslo como dos aquí. También ponlo como dos. No necesitamos cambiar el tamaño del texto en, pero si queremos, podemos hacer clic en el texto y cambiarlo a párrafo, pero no es necesario. Bien, ahora tenemos el diferente tamaño del controlador de conteo, así que da clic aquí. Y aquí podemos comprobar la variante y reducir el tamaño, pero aún así parece más grande. Entonces lo que podemos hacer es producir más del contenido. Primero, vamos a reducir esto entre el tamaño del artículo para dar me gusta, bien. Ahora solo podemos reducir este texto a tamaño como nosotros como 125 ahora. Entonces aquí podemos reducir esto más. Si voy al diseño y vamos a comprobar el diseño en realidad, si lo reducimos más, no será amigable con la accesibilidad. hay una cosa que podemos hacer para mantener esto como una sola línea que es reducir el tamaño de este cuadro de texto. Entonces intentemos reducirlo. Hagámoslo como el 110. Bien. Ahora selecciona esto. Entonces intentemos sumar entre gap dos auto y ok. Ahora intentemos incrementar este texto. Bien, eso es bueno. Tratemos de incrementar este texto. En realidad, cuando lo aumentamos, la alineación se apaga. Tenemos que solucionar este problema de pre dimensionamiento. Lo que significa que si sumamos números a esta cantidad, se aumentará el tamaño y el diseño se apagará. Vamos a arreglarlo. Para arreglarlo, solo voy aumentar su tamaño a 60 como el ancho. Entonces si trato de sumar más números, no va a tener problema. Entonces esta es la manera de arreglarlo. Y ahora podemos crear el componente del artículo del carrito. Vamos a hacer clic en el componente. Y cambiemos el nombre a esto como For Name. Y el precio será así. Luego haga clic aquí y haga clic en Crear componente aquí. Cambiemos esto a Para ítem, bien, entonces tenemos que agregar divisor en el medio. Entonces ahora voy a cortar este, y vamos a ir aquí, pegarlo. Sí, así. Bien, Ahora vendré al marco de mi carrito carrito e iré a ***. En ***, tenemos el componente de artículo alimenticio. En realidad ahora tenemos dos tipos de alimentos. Podemos cambiarle el nombre como carrito de artículos alimenticios. Entonces hagámoslo como primer día. Vayamos aquí y damos clic aquí. Y cambiemos el nombre de este artículo alimenticio de dos carritos. Bien, cuando tenemos pocos alimentos, tenemos que agregar divisor. Usando divisor, podemos separar esos alimentos así. Entonces hagámoslo. Iré a Herramientas de Forma y haré clic en Línea, Presiona Mayús y crearé una línea como esta. Entonces cambiemos el color a un color más oscuro y fijemos las esquinas una vuelta redonda, disminuyamos a 0.7 Bien, ahora puedo seleccionar estos dos objetos y presionar Mayús para que sea rápido con el diseño automático. Y luego aquí voy a añadir paddinessi. Bien, ahora intentemos agregar más carrito de alimentos como este. Seguramente tenemos que añadir el interior de este marco. ¿Bien? Después da click en este divisor y pegarlo así. Bien, ahora se ve bien. Y sólo tenemos que duplicarlo con esto, esto. Ahora en la parte inferior, tenemos que sumar el subtotal y el total de los recuentos de artículos alimenticios también el monto final del pedido Entonces hagámoslo en la siguiente lección. 41. Diseño de la página del carrito - Parte 02: Tenemos que cambiar este diseño de Mi tarjeta, especialmente aquellos diseños de artículos alimenticios. Porque para la página de tarjeta estándar debería haber una manera de eliminar elementos de la tarjeta. Entonces en este caso no tenemos un botón para eliminar esos artículos. Y también podemos agregar calificación que esos artículos o esos alimentos tienen en la sección Mi Tarjeta bajo el nombre de la comida. hagámoslo primero. Iré al componente maestro y lo cortaré de la hoja de pegatinas y lo pegaré en la página de la tarjeta. Bien, ahora esto es muy fácil. Primero, voy a aumentar este alto en el ítem de la tarjeta, así que cuando lo incremente también afecta para esos instantes Entonces voy a quitar esos instantáneos y ahora va a ser perfecto. Ahora lo que estoy haciendo es dar clic aquí y dar clic en una línea a Bien. Después agregaré Top Gap Pass 15, el relleno como 15. Y luego hago clic en el texto y presiono shift 102 en el layout automático. Y en ese diseño automático, hágalo disposición vertical. Después de eso solo puedo cortar este controlador de conteo y ponerlo debajo de este diseño automático así. Por ahora, cambiemos este espacio entre el conteo 15. Y ahora lo que tengo que hacer es agregar recuento de reseñas para este artículo de pie. Para ello puedo usar este tipo de recuento de opiniones, así que sólo puedo copiarlo desde aquí. Vamos a crearlo para la práctica. Bien, ve aquí y primero vamos al ícono de plug ins y abre las fuentes aquí. Voy a buscar estrella. Vamos a agregar esta estrella aquí. Selecciónala de esta disposición y córtala. Luego pon dentro de este marco. Seguramente debería estar aquí. Y ahora pongamos su talla en 14. Bien, Ahora presionaré Shift y lo convertiré, o lo pondré dentro de otro layout automático. Y presiono N aquí, voy a cinco. En realidad debería ser 0.6 y ahora cambiemos su tamaño a A. Encontremos su tamaño a partir de aquí. Bien, ¿cuál es el tamaño? Deberían ser 13 y bien. Ahora ve aquí, y esto debería ser de 13 y tallas medianas. A continuación, haga clic en esos dos objetos. En realidad, luego presione Mayús A y hágalo diseño horizontal. Aquí, la talla será de seis. Y haga clic en este diseño automático avanzado establecido en una línea base de texto. Bien, ahora tenemos que cambiarlo de color. Bien, ahora lo que podemos hacer es eliminar esta brecha entre dos. Como en realidad podemos comprobarlo desde aquí y podemos aplicar esta misma configuración. Es creo que agregamos, sí. Bien. Ahora lo que podemos hacer es aumentar este nombre de pie talla dos aquí. Y en realidad podemos aumentar todo el auto lay. Esto, bien. Ahora puedo aplicar auto lay. En realidad, podemos incrementar un punto más. Ahora es perfecto. Y ahora tenemos que agregar la caja de basura o cerrar el icono para eliminar este artículo de la tarjeta. Así que vamos a Plug Ins y los iconos de llamada fontosm aquí Voy a buscar basura. Voy a seleccionar esta caja de basura, y vamos a seleccionarla. Haga clic aquí, en realidad, podemos convertir esto en diseño automático. Da click en este texto y presiona Mayús A. Y ahora colocaré directamente esta papelera dentro del diseño automático. Ahora haga clic en el diseño automático y conéctelo como disposición vertical. Ahora voy a establecer la alineación a y horizontal en el medio. El tamaño será a. Entonces pondré un contenedor de pastillas para que esos dos se alineen correctamente. Y cambiemos el color de este contenedor a color verde. Bien, ahora tenemos un componente de artículo alimenticio perfecto para carrito. Cambiemos este relleno superior Y relleno inferior como 7.5 porque vamos a agregar el divisor. Y en ese divisor podemos fijar la gordura horizontal. En realidad, gordura vertical 7.5 Bien, vamos a agregarlo a, simplemente voy a hacer clic en esta línea y presionar Mayús y pegarlo, Entonces vamos a cambiarlo de color a gris claro, hacerlo redondeado. Agreguemos 7.0 0.7 y hagamos clic en él. También haga clic en este elemento de la tarjeta. Luego presione Mayús dos en el diseño automático, y esta brecha entre el tamaño será 7.5 Así que este es nuestro componente principal. Pero también podemos sumar esta línea a este componente principal. Entonces para hacer eso, tengo que envolver este componente principal con otro diseño automático. Así que déjeme mostrarlo. Haga clic en el componente y haga clic en esta línea o en el divisor. Entonces vamos a cambiar a. después de eso podemos establecer el tamaño como 7.5 Bien, Ahora este es un marco normal con diseño automático y este es el componente. Pero en realidad si podemos agregar esta línea dentro del componente, pero si la agregamos así, no estará perfectamente viva. La única manera de solucionar esto es eliminar este componente y crear un nuevo componente usando los mismos detalles. Para ello, primero copiaré el nombre del componente, y me dejaré ir a aseveraciones. En afirma voy a crear un componente de artículo alimenticio. En realidad, tenemos que ponerlo fuera del marco. Entonces ahora voy a hacer valer. En afirma, voy a la tarjeta, y en la tarjeta sólo voy a dejar caer una instancia como esta Después hago clic en la instancia y doy click aquí. frecuente instancia de desprendimiento Ahora bien, este marco no forma parte de este componente principal porque lo separamos Así que ahora sólo puedo quitar el componente principal. Cuando lo quite, ya no lo veremos en el panel de asertar porque simplemente lo eliminamos Ahora lo que hago es ir a Layouts, y puedo poner directamente este dentro del marco así. Entonces puedo seleccionar el componente principal y presionar este botón Crear Componente. cambiemos el nombre del carrito de marcos como este artículo de comida. Entonces ahora si vamos a las aseveraciones, puedo ver el alimento o tarjeta de alimento, componente principal aquí ¿Bien? Ahora cortaré esto de aquí e iré a la hoja de pegatinas. Y pegarlo dentro de la hoja de pegatinas. En realidad da click aquí y pegarlo así. Bien, aquí pasado la olla. Ahora vamos a la tarjeta. Y en aseverar, podemos dar click en esta tarjeta de alimento y agregarlo a nuestro diseño así Bien, algo anda mal. Vamos a hacer valer. Bien, ahora lo haremos. Bien, así que ahora lo que podemos hacer es dar click en la tarjeta Componentes para Artículos Alimenticios, por ejemplo. Entonces vamos a cambiar A aquí. Voy a cambiar esto a 15. Bien, ahora solo podemos agregar artículos como este. Ahora tenemos que sumar el total. Y agrega el botón Realizar pedido. Entonces hagámoslo en el siguiente video. 42. Diseño de la página del carrito - Parte 03: Bien, ahora aquí presiono y creo un cuadro de texto. Entonces este cuadro de texto serán alimentos aquí tenemos dos, o podemos agregar alimentos cuentan, en este caso, cada cuatro. Y cambiemos este texto a subtítulo. Ahora en este lado podemos agregar cantidad. Entonces, dupliquemos este texto y seleccionemos esos dos textos. Luego presione Mayús A y hágalo diseño horizontal y establezca el contenedor de campo Ta. Y ahora voy a agregar esta brecha horizontal entre dos a. Bien. Ahora sólo voy a duplicar éste así y aquí dentro podemos cambiar los dos impuestos. Aquí podemos agregar texto por ahora, agreguemos cero. Aquí podemos hacer lo mismo. Ahora lo que hago es seleccionar esas dos secciones y presionar Mayús para marcar la diferencia en el diseño. Y agreguemos el Ta. Agrégalo entre tallas 15. Entonces voy a añadir aquí el divisor. Vamos a hacer clic en la línea. Agreguemos el divisor así. Y ahora vamos a cambiarlo de color al color superior. Bien, Ahora cambiemos el tamaño a dos y hagamos clic en esta configuración de trazo avanzado. Y aquí voy a añadir esto. Bien, Ahora voy a cortar este divisor y pegarlo dentro. Enciende esto. Entonces sólo voy a copiar uno de los textos y ponerlo debajo del divisor aquí. Voy a agregar esto como monto total aquí. Por ahora agregaremos un cero. Y ahora lo que podemos hacer es hacer clic en el texto y cambiarlo texto a encabezado. También cambie este texto a encabezado. Aquí voy a cambiarlo de color a nuestro color fino. Bien, ahora por debajo de eso voy a estar en el botón que llame a realizar pedido. Entonces para hacer eso, aumenta el tamaño del marco y luego ve a ***** in como click on button y thick con en esa instancia, y pongámoslo a a. luego cambia esta etiqueta para poner orden En este caso, podemos hacer este botón como la botella de ancho completo. Para ello, podemos ir fácilmente aquí y vamos a crear una variante. Esta variante aquí, dan click en el botón o en la segunda variante. Ahora ve aquí y da clic en este. Después cámbielo a segunda variante. Después de eso puedo cambiarle propiedades primero, vamos a cambiarlo llenar contenedor y simplemente convertirse en un botón de ancho completo. Bien, ahora estableceré esas dos primeras oportunidades y presionaré turno A. Entonces cambiaré este tamaño a como 30. Hagámoslo como 40. Estas, Bien, ahora nuestras páginas se ven bien. Vamos a comprobarlo en el diseño. Ahora lo que tenemos que hacer es agregar un contenido, Así que en el siguiente video lo haremos. 43. Diseño de la página del carrito - Parte 04: Bien, agreguemos contenido real a la sección de mi tarjeta. Entonces comencemos con el primer ítem. Entonces hagamos el primer artículo como este alimento. Entonces café el texto y pega el texto aquí. En realidad, tengo que el destino del texto antes de engordarlo aquí. Puedo aumentar el tamaño. Entonces para aumentar el tamaño, iré al padre de familia. Y hagamos que sea de tamaño así. O simplemente podemos dar click aquí y Pec cayó contenedor. Bien, ahora va a afectar a todo el contenido. Bien. Primero agreguemos esos alimentos más apretados así Bien. Ahora podemos sumar los precios. Para agregar precios, puedes ir aquí y consultar esos precios. Y aquí tenemos el tema. Este texto debe estar alineado al lado derecho. Así que vamos a arreglarlo Fk. Haré clic en el texto y arreglaré esta alineación derecha de clave. Debe ser arreglado como se arregló. Bien, agreguemos otros detalles. Bien, ahora cambiemos esas cantidades a. Ahora lo que tenemos que hacer es agregar las imágenes. Para agregar imágenes, presiono Comando y selecciono el fanger. Y da click aquí para colocar las imágenes. Ir a los alimentos. Y en los alimentos aquí tenemos la comida. Bien, ahora tenemos que sumar el conteo de alimentos. Son cinco. Y agreguemos la cantidad total. El monto total es de $10 Y aquí tenemos que cambiar esta cantidad porque ordenamos dos T, por lo que debería cambiarse como $5 Bien. Ahora agreguemos gravados como tres. Y aquí vamos a votar el total como 13 dólares Bien. Ahora vamos a comprobar el diseño y se verá así. Entonces ahora completamos cuatro reclamos y ahora tenemos que crear el cuadro de mensaje emergente y convertir estos marcos en prototipo. 44. Añadir al carrito: Es hora de diseñar este pop up. Así que vamos a diseñarlo. Yo sólo lo voy a copiar. Y vamos a ir a la página de marcado y ponerla como aquí. Vamos a ponerlo aquí. Bien, ahora como primer paso, vamos a crear el marco. El tamaño del marco será iphone 13.14 Ahora lo que voy a hacer es reducir el tamaño de este marco porque se trata de un pop up. Por lo que es mejor reducir el tamaño horizontal izquierdo y derecho en como 30 píxeles. Entonces hagámoslo. Razón principal para hacerlo, si alguien hace clic en el botón de agregar dos tarjetas, el pop up aparecerá así. Para reducir el tamaño, voy a hacer clic en el marco. Y a Ancho En ancho, agregaré -30 Y ahora el tamaño original del marco era 319 Entonces reducimos 30 píxeles, y ahora tenemos 360. Entonces intentemos agregar este diseño de cuadrícula, ¿de acuerdo? Y ahora presionaré comando y reduciré la altura. Solo haz un 360. Bien, ahora voy a cambiar el nombre del marco para agregar al carrito pop. Bien, ahora lo que tenemos que hacer es convertir esto en un diseño automático. En realidad agregue el diseño automático. Digamos las propiedades, Hagamos entre tallas 15 en esta. ¿Bien? Ahora haz que se alinee al centro. Ahora vamos a crear la comida agregada al texto del carrito. ¿Bien? ¿Qué acaba de pasar en realidad? Bien, cuando agrego el texto, simplemente se vuelve más pequeño porque establecemos el redimensionamiento horizontal y vertical. Entonces, presionemos control de comando para controlar para rehacerlo. Y hagamos con la solución de tareas altas. Ahora agregaré texto y agreguemos este texto aquí. Después ve al estilo de texto y selecciona el estilo de texto de encabezado. Ahora tenemos que agregar este botón de tarjeta. Para ello, iré a Afirma. En aseveras, tenemos este botón. Sólo ponlo, y vamos a amapola este texto. Pégalo aquí, más allá de las tomas del botón. Bien, ahora tenemos botón principal. Pero será mejor si este botón tiene más relleno izquierdo diez derecho. Entonces intentemos usar la variante. Y en la variante tenemos que cambiar esto como contenedor de llenado. Entonces creo que este look es mejor que el anterior. Bien, ahora lo que tenemos que hacer es crear este botón de continuar comprando. Entonces solo duplicaré este botón y es Agregar los impuestos. Bien. Ahora esos dos botones son similares, pero cuando agregamos dos botones, solo deberíamos tener un botón de fuego y el segundo botón debería ser secundario En este caso el botón principal de llamada a la acción es ver tarjeta. El botón Ver tarjeta se verá así. Y hagamos de este botón un secundario. Es muy fácil hacerlo. Iré a la hoja de pegatinas y conseguiré algo de espaciado. Creo que vamos a ponerlo a continuación ahora. Voy a elegir este botón de ad varian y vamos a crear un botón secundario. Crear botón secundario es fácil. Cambiemos el nombre de esto como secundario. Bien, ahora vamos a cambiar esto a secundario. Y ahora podemos cambiar el diseño. Cambiar el diseño primero voy a añadir trazo. Este tamaño de trazo será de dos y el color será verde. También, lo pondré en el centro. Después voy a quitar el color del campo. El color del campo será Y. Entonces el color de la etiqueta será este color verde. Bien, acabamos de crear la segunda refutación así. Ahora tenemos el primer pop up. Como siguiente paso, tenemos que reducir las esquinas. Entonces para hacer eso, solo voy a agregar 25 a las esquinas de este marco y ahora luciré así. Entonces simplemente haré clic en esos dos botones y presionaré Mayús para que sea un diseño automático o agregaré el diseño automático. Después seleccionaré el diseño automático principal y cambiaré este hueco vertical a 30. Intentemos agregarlo como 60. 60 es demasiado. Vamos a agregarlo como 30. Bien, ahora tenemos una ventana emergente. Y este pop up estará dentro de la app cuando convertimos los markups a un prototipo Entonces, en la siguiente lección, crearemos este segundo pop up. 45. Diseño de un pedido exitoso: Bien, vamos a crear este pop up. Para ello, voy a copiar esta sección de éxito de pedido e ir al Smoke Up y 40 aquí mismo. Bien, entonces lo que voy a hacer es crear un nuevo marco. Este tamaño de marco será iphone 13.14 y vamos a reducir el tamaño como 30 fijador Y agreguemos el diseño de la cuadrícula Ahora primero voy a agregar el texto. Este texto será este mensaje de éxito de orden. Bien, Entonces un estilo de texto. Bien. Ahora lo que voy a hacer es agregar maquetación automática. Así que el diseño automático será fijo. Y también se debe fijar la altura. Altura, y aquí debería ser 365. Bien, Ahora vamos a cambiarlo una línea, superior centro. El acolchado será de 15 y el acolchado inferior también será de 15. Y el acolchado lateral, o acolchado horizontal, será 152. Vamos a sumar gap 60. Y ahora voy a añadir otro cuadro de texto. Este cuadro de texto será su pedido se ha realizado correctamente o usted ha realizado un pedido con éxito. Así que vamos a establecerlo como subtítulo y convertirlo en un centro de línea. Ahora tenemos ID de pedido. Duplicemos éste y agreguemos este texto así. Y cambiemos el color de relleno a verde. Ahora tenemos este botón Track Order. Vamos a agregarlo. Ir a ***, ir a Botones Insertar Botón. En realidad debería estar aquí. Entonces cambiemos el texto a Trade Trade. Bien, ahora vamos a la segunda variante, y deberíamos ser contenedor de campo así. Bien, ahora lo que tenemos que hacer es disminuir el tamaño del marco. Simplemente presiona comando o control y saca, digamos As 400. Bien, ahora seleccionaré esos tres elementos y presionaré Mayús para hacer un diseño automático. Después agregue brecha entre las tallas 15 y aquí adentro, agreguemos el auto Ta y veamos qué pasará. No, el auto no va a funcionar bien, así que tenemos que mantenerlo Tas 60. Y tal vez podamos disminuir este tamaño a 360. Bien, ahora tenemos que agregar el botón de cerrar. Para ello, podemos ir a los plugins y Fontosum. En Fontosum, busquemos tiempo de cierre. Sí, busquemos el tiempo. Y aquí tenemos el botón. Así que sólo tienes que ir a Layout y eliminar este. Después haga clic en el botón y haga clic en esos dos elementos. Cambio rápido a y en el diseño automático. Después, conéctelo como disposición horizontal. Ahora deberíamos hacer que este pedido sea un éxito en la parte superior y este icono vectorial en botella. Después establece el marco y conviértelo en un centro de línea. Y vamos a establecer esto como contenedor de campo y establecemos esto como auto. Bien, Ahora voy a cambiar este color de campo a verde. Bien, Ahora cambiemos el color de este marco para ordenar el éxito, pop y reducir el borde como 25. Bien, ahora es mucho mejor. Y tal vez podamos agregar este texto al centro. Es muy fácil hacer este centro. Simplemente haz clic en el texto y haz que se sienta contenedor. Después agrega texto en el centro de una línea así como así. Es centro centro. Y ahora tenemos todos los marcos. Y en las próximas lecciones, convertiremos esta aplicación a un tipo de foto intuitivo. 46. Cómo solucionar problemas de UI/UX: Ahora tenemos todo el diseño. Entonces vi algunos problemas en el diseño y en esta lección, arreglemos todos esos problemas. Como primer número, este menú de hamburguesas es más grande Y si reducimos el tamaño de este menú de hamburguesas, lo será, quedar genial Entonces iré al componente maestro de nuestra sección de encabezado. Y aquí sólo voy a seleccionar el marco. Y vamos a reducir la altura de esos rectángulos. Vamos a hacerlos gruesos. ¿Bien? Y ahora veamos el diseño. Entonces ahora lo que podemos hacer es hacer clic en el marco y aumentar el tamaño entre medias. Vamos a aumentar entre tamaño como cuatro. Y ahora es mucho mejor que los anteriores. Entonces podemos disminuir el ancho de estos spcangles. Hagámoslos como 40. Y pon el marco en una línea, en realidad aquí. Vamos a establecer esto en cuanto a, Bien. Ahora bien, si comprobamos el diseño, es mucho mejor. Y ahora tenemos otro tema. Así que hagamos clic en el marco y vayamos a Prototipo, Pero no te preocupes. En las próximas lecciones, te mostraré cómo convertir este diseño a Fototipo Por ahora, vayamos al Show Property establecido en, y aquí seleccionaré nuestros dispositivos, iphone 40, porque nuestro tamaño de marco es 390. Después voy a dar click en Persona. Vayamos al diseño. Bien, aquí está la página de inicio. En esta página de inicio, el logo fue cubierto por esta cámara. Entonces lo que podemos hacer para arreglar esto es un acolchado superior. Así que agregar acolchado superior es realmente fácil. Entonces iré a diseñar y dar click en el marco. Aquí, voy a cambiar este acolchado superior 60, y vamos a ver cómo se ve. Entonces ahora se ve mucho mejor, pero podemos establecer en 30. Bien, 30 serán trabajo aquí en una vuelta real. Esto no será un gran problema porque la aplicación se ajustará de acuerdo con el dispositivo. Bien, ahora tengo que hacerlo para todos esos tampoco. Pero si agrego relleno al componente de cabeza, solo necesito hacerlo de una vez. Entonces hagámoslo muy fácil. Seleccione el componente maestro, y luego agregue al relleno como 15, porque ya agregamos el relleno de marco como 15. Bien, ahora veamos a Clerk. Ahora el segundo número es que tenemos este menú de hamburguesas en todas y cada una de las páginas Pero debería ser sólo en la página principal. La otra página debe tener el botón Atrás. Así que vamos a arreglarlo. Arreglarlo. Iré a los tigres Y aquí tenemos la variante. Por lo que sólo voy a hacer clic aquí. Y vamos a Plugins y seleccionemos Ontos. Entonces aquí dentro puedo volver a buscar. En realidad tenemos el icono aquí, así que vamos a darle clic. Y aquí tenemos el ícono. Yo lo copié. Y ve a la variante dos en cuadro cinco en este menú de hamburguesas Yo sólo lo pego. Entonces voy a quitar esos elementos de palo. Y ahora puedo aumentar el tamaño de este icono. En realidad, lo que puedo hacer es quitarlo de este marco. Así como así. Y retire el marco. Y ahora lo que puedo hacer es hacer que esto se sienta, entonces solo puedo aumentar el tamaño así hecho controlar y re con, las proposiciones de restricción aquí Hagámoslo tipo 24 es de dos semanas, hagámoslo 18, 16, 14. Bien, 14 es mucho mejor. Ahora voy a cambiar el color del campo a este color verde. Ahora bien, si comprobamos el diseño, se verá así. En realidad, deberían ser 30 porque esos, porque la altura de estos elementos son 30. Así que vamos a copiar 10 este marco y pegarlo. Y ahora quita esta ava y pon esta dentro del marco. En realidad, voy a aumentar el tamaño de este vector a 20 porque debería ser similar a esos dos. Bien, solo los puse como 17, y luego voy a ver la variante y en la parte superior el acolchado como 15. Bien, creo que ahora se ve bien. Entonces ahora aquí tenemos otro tema. En esta sección, tenemos 60 como el en gap entre espaciado, pero aquí lo tenemos como 15. Entonces debemos aumentarlo. Para aumentarlo, simplemente pon la barra de búsqueda fuera del marco y cambiará así. Veamos el look, bien, ahora tenemos un aspecto similar en la sección. Bien, aquí también podemos hacer esta ciudad así ahora. Es mucho mejor. Bien, esos son los temas que vi en el diseño final. Ahora voy a quitar esos marcos de alambre que obtuve de la página wireframe y prototipo porque ya tenemos todo el diseño Entonces les haré una línea como esta. En realidad, tenemos que cambiar esto después de que diseñemos el prototipo. Pero por ahora, pongámoslos así. Bien, ahora en el siguiente video vamos a crear un pie de página. 47. Diseño de un menú de pie de página: Bien, ahora vamos a crear el menú de pie de página. Entonces para hacer eso, voy a ir aquí y dar clic en Marco de esquina. Y cambiemos el tamaño de este marco así. Y hagamos marco con marco más alto 60. Y ahora mi plan es crear tres iconos. El primer icono es home y el segundo son mis órdenes, y el tercero es mi reseña. Entonces en este caso, tenemos tres ítems principales, Así que vamos a crear tres de ellos. En primer lugar, obtendré íconos para esas tres opciones. Así que a casa, ten a casa. Sí, lo cocinaré dentro de este marco, y agreguemos otolea a este Bien, ahora lo que tenemos es orden. Busquemos el icono para el pedido. Voy a usar esto. Taza de té, Pka, taza de café Pika Entonces lo que necesitamos es rebeca. Vamos a comprobar y re tal vez comandar Ticon. Bueno, entonces agreguemos este comando Tica. Bien, ahora cambiemos esto para llenar contenedor y agreguemos este como foto. El relleno horizontal será cero y el relleno vertical 15. Bien, ahora deberíamos tener texto para todos y cada uno de los enlaces. Los usuarios deben entender el significado del icono. Entonces, vamos a crear un texto. Y el primer texto será en casa. Cambiémosle estilo a Paca. Podemos hacerlo como medio y reducir el tamaño de la fuente a dos. Bien, luego resalte esas dos secciones y descanse el turno para hacer un diseño automático. Y la brecha será 1015 es demasiado. Podría ponerlo en el centro así. Entonces estaremos, y hagamos lo mismo para el ícono del café. Entonces solo voy a duplicar este. Después corta el ícono del café y póngalo dentro de éste. Y entonces aquí voy a cambiar esto a órdenes de orden. Entonces duplicaré esta, reemplazaré la imagen, y aquí agregaremos esto como reseñas. Bien, ahora voy a reducir este top sumando a cero, y así reducir el relleno inferior ya que así ahora voy a cambiar el color de relleno a este color verde. Entonces lo haremos para este pedido. 1.12 Bien, ahora tenemos menú de pie de página. Entonces este menú de pie de página debería ser pegajoso cuando desplazemos el diseño en la cara del prototipo, te voy a mostrar cómo hacerlo. Por ahora. Voy a hacer este pie de página como posición absoluta. Lo que significa que podemos meter este pie de página en cualquier lugar. No lo haremos, en realidad tenemos que añadir color de relleno. El color de relleno será blanco. Y ahora podemos agregarlo en cualquier lugar que queramos. Entonces tenemos que agregar algo de sartén superior, relleno inferior. Vamos a ello 6.6. Bien. Y seleccionaré la sección de pie de página y daré clic en Crear componente, y cambiaré su nombre a Pie de página. Lo voy a cortar ahora. Lo pegaré en la hoja de pegatinas así. Bien, ahora tenemos todo el diseño que podemos usar para convertir esto en un prototipo. En la siguiente lección, vamos a conocer sobre el ftotipado y seguir las mejores prácticas para crear prototipo a 48. Prototipos - Parte 1: Fema ha incorporado herramientas para convertir nuestras tazas más en un prototipo Si vas a tu diseño de Fema, verás una tacha llamada prototipo en tu panel lateral derecho Simplemente haga clic en él. Al hacer clic en él, verá este tipo de ventana. Si no lo ve, simplemente haga clic en el lienzo y no seleccione ningún marco. Y aquí puedes seleccionar el dispositivo. En este caso, seleccionaré el dispositivo como iphone 14 porque mi marco con este 390 pixel. Entonces, si vamos a Prototipo, hagamos clic en Canvas. Y aquí el iphone 14 con este 390. Bien, Entonces aquí podemos cambiar el modelo del iphone 14. Entonces lo pondré como medianoche. Y si quieres, puedes cambiarlo como quieras. También podemos rotar el dispositivo, pero en este caso lo usaré por defecto. Entonces también podemos cambiar el color de fondo así. Así que vamos a comprobar esto en acción. Entonces voy a hacer clic en este botón de presente. Y aquí vamos a nuestra página de inicio. En aquí tenemos iphone 14 frame. Y podemos cambiar este color a, vamos a cambiarlo como azul. Y el color prime size solo cambia a azul. También, podemos cambiar el fondo. Vamos a cambiarlo a color ceniza. Ahora como esta es la forma de seleccionar dispositivo para tu diseño. Entonces seleccionaré en el marco home porque ese es el marco que iniciamos el flujo. Cuando hagamos clic en el inicio, tendremos un texto llamado Flow Starting Point. Aquí, voy a hacer clic en este signo más a en el punto de partida. Punto de partida significa el lugar en el que iniciamos el flujo o comenzamos a usar la aplicación. En este caso, primero iremos a la página de inicio, luego haremos clic en este ítem de pie, y luego iremos a la página de un solo pie. Después de eso, agregaremos al carrito. Entonces este es el primer punto de partida. También podemos tener otro piso. Entonces, al siguiente piso es que damos clic en el botón de búsqueda y va a ir a la página de pie de búsqueda. Después de eso, hacemos clic en este ítem de pie y irá al pie único. Entonces esto es lo que necesitamos punto de partida. Incluso si no selecciona un punto de partida, el Fema agregará un punto de inicio predeterminado En este caso, cambiaré el nombre de este flujo uno como Placeorder Place Order Flow En este flujo, cuando hacemos clic en este ítem de pie, debería redirigirnos a la página de pie único. Hay un par de formas de diseñar este flujo. El método principiante o poco profesional, o duro, basta con hacer clic en el elemento que quieras redirigir En este caso, es el artículo del pie. cuando coloques el cursor sobre ese elemento, verás este tipo de punto Y cuando hagamos clic en ese punto y lo arrastremos así, veremos una flecha. Y si queremos ir al pie único, podemos simplemente arrastrarlo y soltarlo en el marco de un solo pie. Llamamos a esta línea una conexión. Este es el punto final de inicio de la conexión. Y lo llamamos conexión. Tenga en cuenta que esta página es el punto final de conexión. El comportamiento de esta conexión. Cuando el usuario haga clic en este alimento, el usuario redirigirá a esta página de un solo pie. Así podremos ajustar las opciones de la conexión. Vamos a hacer clic en la conexión, y aquí tenemos el pop up. En este pop up, podemos definir la acción, en este caso on tap, lo que significa que cuando el usuario toca este elemento de pie, la acción debería suceder. Aquí, lo definimos. Navega a un solo puesto. Aquí está el marco de un solo puesto, y aquí podemos agregar animsre Ahora agreguemos esto como instantáneo, y probemos esta acción. Para probarlo, voy a dar click en el modo presente. Y aquí dentro, si hacemos clic en este alimento, debemos redirigirnos a la página de pie único. Así que vamos a probarlo. Entonces ahora estamos en la página de pie único. Bien, esta es la forma de crear un prototipo, y aquí podemos agregar animación. En este caso, agreguemos esta animación push. Pero normalmente no utilizo esas animaciones para proyectos en las pruebas de usabilidad, pero podemos probarlas. Así que volvamos aquí. ¿Eso es animación? Ahora bien, aquí está la verdadera pregunta. Actualmente contamos con un solo marco de pie. Entonces, cuando hacemos clic en uno de esos alimentos en la página de inicio, debemos redirigir esta página de un solo pie en la conexión. Los comportamientos de conexión predeterminados están en toque y navega hasta el marco de puntos. Intentemos así también. Hagámoslo por este 12, ¿de acuerdo? Ahora bien, si hacemos clic en esos elementos, solo podemos ir a la página de un solo pie. Ahora piensa que tienes 100 artículos como los alimentos, lo que significa que tenemos que crear 100 conexiones como esta. No obstante, si tienes que cambiar el marco, en este caso cuando hacemos clic en este solo alimento, si queremos que vaya a un marco diferente como este marco de tarjeta, tenemos que cambiar esas conexiones una por una. Y no es una manera profesional y llevará mucho tiempo. En el siguiente video, te mostraré la manera de arreglarlo usando componente. 49. Prototipos - Parte 3: Veamos cómo usar componentes para crear prototipos sin crear muchas conexiones como esta. Entonces primero voy a eliminar esas conexiones, porque si usamos componentes para crear esta conexión, solo necesitamos crearla de una vez. Entonces ahora tengo que encontrar el componente maestro. Si recuerdas, este es el componente maestro que creamos para este artículo de pie. Entonces este componente maestro tiene mucha instancia, por lo que todos esos elementos de pie son instancias de este componente maestro. Lo que significa que los comportamientos de los componentes maestros se aplicarán todas las instancias que creamos usando ese componente maestro. Lo que significa que si creamos una conexión como esta, ésta debería aplicarse para todas las instancias. De nuevo, déjeme mostrar lo que hice aquí. Puedo ir a la pestaña prototipo. Y cuando vaya a la pestaña prototipo, pasaré el cursor sobre el pie maestro Este es el componente maestro. Entonces solo y creo una conexión y la apunto a este solo marco de pie. Y las propiedades de esta conexión están de barril. Navega a un solo alimento, lo que significa que cuando alguien haga clic en este componente maestro o instancia de este componente maestro, navegará a solo pie y tendremos una animación push. A ver que funciona. Voy al modo de presentación. Y en modo presentación voy a ir a Opción y click en Mostrar Sidebar. Aquí tenemos el uso de la palabra. Así que haga clic en el piso, solo podemos hacer clic aquí y hacer clic en el icono Presentar. Y aquí dentro, si hago clic en alguno de este artículo de pie, debería redirigirme a la página de pie único. Entonces probémoslo. Bien, funciona. Y vamos a hacer clic en éste. Redirigir a la página del elemento pie porque usamos el componente maestro. Entonces este es el poder del componente maestro. Entonces ahora si hago clic en este marco, se mostrará toda la conexión que tienen esos componentes de hot item de instancia. Esta es la manera fácil y proporcional crear el prototipo como dije antes. Ahora bien, si queremos cambiar la conexión, en este caso, si queremos cambiar esta conexión a tarjeta, sólo tenemos que cambiar la conexión del componente maestro. Y se aplicará para instancias E como esta. Si agregamos esta conexión individualmente, tenemos que reconfigurarla manualmente al marco de la tarjeta cuando la cambiemos Ahora pongámoslo al sencillo. Bien, Ahora lo que tenemos que hacer es después de que vayamos a la página de pie único, el deslizador no está funcionando. Tenemos que hacer que este deslizador funcione. Además, tenemos que agregar acción a este botón de agregar al carrito. Además, debemos agregar acción a este botón de retroceso, y tenemos que agregar el pie de página. Entonces hagámoslo uno por uno en las próximas lecciones. 50. Cómo hacer un carrusel: Bien, en la página de un solo pie, tenemos que agregar la función de desplazamiento horizontal a este carrusel de imágenes Para ello, iré a la página de pie único, y aquí seleccionaré el marco. Entonces este es el marco y actualmente no se está mostrando porque agregamos contenido de clip Checkboox Simplemente haz clic en el marco y desmarca el contenido de este clip. Después seleccionaré este marco, y aquí tenemos contenido de clip checkboox Ahora voy a poner aquí este marco de tarjeta. Ahora todavía tengo la vista previa completa. No tengo la función de desplazamiento horizontal para arreglarlo. Primero, tengo que reducir este tamaño de marco. Actualmente, este tamaño de cuadro es caliente y pero tenemos que cambiarlo a solo la parte que debería ser visible en el carrusel En este caso, presionaré comando y radiuce este tamaño de fotograma hasta aquí, porque solo necesitamos ver esta sección Si voy al diseño, solo vemos una diapositiva. Ahora ajusto este marco dos tamaños, entonces lo que hago es ir a la pestaña Prototipo. En la pestaña prototipo tenemos comportamiento de desplazamiento para la posición. Voy a poner tat scroll con pad. Lo que significa que cuando lo desplazemos así, las imágenes o el carrusel también se desplazarán con el resto del elemento En desbordamiento, tenemos que ponerla Tas horizontal. Ahora si lo comprobamos, el scroll horizontal está funcionando perfectamente. Ahora bien, si reviso el diseño, nuestro relleno no está correctamente alineado. Vamos a arreglarlo. Para arreglarlo, solo voy al diseño y selecciono el marco. Después hago clic en Contener. Ahora bien, si voy al diseño, se verá perfectamente. Entonces esta es la manera de crear scroll horizontal y crear un carrusel en Figma. En la siguiente lección, agregaremos sección de pie de página al diseño. 51. Diseño de menú de pie de página: Ahora es el momento de agregar este pie de página. Pie de página. Nunca a nuestra página de inicio. Para ello, tenemos el diseño de pie aquí y lo creamos en diseño, sección de alto trabajo filitivo Así que vamos a cortarlo y ponerlo en la página de inicio. Después de eso estableceré esto como posición absoluta. Entonces lo que voy a hacer es simplemente configurarlo así. Luego presiona Comando y encajarlo a las esquinas. Después de eso aquí voy a agregar relleno izquierdo y derecho como 15 por 15. Después para el relleno inferior, agregaré la línea 30. Cambiemos el color de relleno de este diseño. Para ello, lo haré tan oscuro y ahora voy a cambiar los colores de los artículos como Y. Además, esta será Y dos, solo la sección seleccionada será verde. Entonces después de eso, lo que voy a hacer es dar clic en este botón inferior de Aline y colocarlo debajo del diseño. Después voy al prototipo. En prototipo llamado comportamiento, estableceré esta posición como fija, permaneceré en su lugar. Después voy a la maqueta y reviso el diseño. Se verá así. Y en realidad podemos reducir esto a como 15. Parece demasiado así, quizá. Vamos a ponerla prueba 20 también en la parte superior. ¿Y qué pasa con dos? Prueba 15. Bien, ahora se ve bien y aquí tenemos un problema. Así que vamos a comprobarlo. Bien, tenemos que quitar esta. Y no sé cómo fuimos allí. No obstante, ahora tenemos un gran pie de página y se ve muy bien. Ahora lo que tenemos que hacer es agregar este pie de página a cada una, cada página. Es muy simple, solo selecciona la impresión y ve a peligros. Entonces podemos simplemente crear instancia de ese diseño. Vamos a averiguarlo. Debería estar en la página de inicio bien, con patas así. Pero lo único que tenemos que configurarlo correctamente, solo aumentar el tamaño del fotograma así. Y poner este pie de página al marco. Y ahora da clic en un fondo de línea. Produjamos este tamaño de marco así. Vamos a verlo en acción. Vamos al pie de búsqueda. En realidad, tenemos que poner así el final del diseño. Entonces para hacer eso, haz clic aquí y aumenta el tamaño del diseño. Y solo haz clic en el pie y haz clic en este, un botón de línea. Vamos a ajustarlo manualmente así y como 30 Okie. Vamos a verlo en acción. Tenemos que ir a Inmueble y fijar fijar estancia en su lugar. Y ahora va a funcionar así. Entonces continuemos con esto y hagámoslo por los marcos. Bien, Ahora se fijó perfectamente. Y ahora en la siguiente lección continuaremos con este flujo de pedidos de lugar. Entonces nos vemos en la siguiente lección. 52. Cómo agregar conexión a la ventana emergente: Bien, en prototipo, solo creamos la cinta pastosa. Entonces, cuando alguien haga clic en un elemento de pie, irá al pie único. Ahora lo que tenemos que hacer es que si alguien haga clic en esto en el botón de dos tarjetas, abrirá esto en dos tarjeta, pop a. entonces para hacer eso hago clic en el botón At two card y hago clic en esta carga de conexión y agrego a aquí. Entonces aquí tengo la manera de cambiar la propiedad. Entonces la acción será de barril la transacción o el cambio será la superposición abierta. Porque necesitamos agregar este pop up cuando alguien haga clic en esto en To Car. Bien, ahora tenemos propiedades para configurar. La acción se va a pasar al instante. Y aquí tenemos superpuestos. En el diseño, el pop up debe estar centrado y debería verse así. Y no necesito cerrar esto al hacer clic fuera la caja emergente, sí necesito agregar el fondo. Por lo que hago clic en un fondo. Y aquí cancelamos el color oscuro. Y voy a reducir la opacidad a 25. Bien, ahora vamos a comprobar esto en acción. Entonces vayamos a la primera página. Y hago clic en este alimento aquí. Doy clic en At To Card. Cuando hago clic en At To Card, consigo este alimento agregado a card pop A. Así que es mejor si el fondo es más oscuro por lo que ayuda a que sea claramente visible el pop A. Así que hagámoslo más oscuro. Así que solo haz clic en la conexión en esta propiedad, en el fondo, lo haré como 50 aquí. Ahora es mucho mejor. ¿Y si lo cambiamos a siete? Bien, ahora es mucho mejor. Ahora lo que tenemos que hacer es agregar acción a esos dos botones. Cuando alguien haga clic en este botón de ver tarjeta, esa persona debe redirigir a la tarjeta. Simplemente haga clic en el botón y haga clic en este nodo de conexión y póngalo así. Se redirigirá a la tarjeta cuando alguien toque Ver. Además, si alguien da clic en Continuar comprando, esa persona redirigirá a esta búsqueda. Pago de alimentos. Bien, y ahora vamos a comprobar el diseño. Ahora hago clic en Ver tarjeta. Simplemente me dirijo a la nueva tarjeta. Vamos a comprobarlo desde el principio. Doy click en la comida, ahora estoy en la página de comida. Ahora hago clic en en la botella de la tarjeta. Y aquí dentro tenemos pop up. Aquí puedo hacer clic en Ver tarjeta, hacer clic en Continuar comprando. Si hago clic en Continuar comprando, acabo de enviar a la búsqueda pagar. Bien. Ahora en mi auto, tenemos botón de Realizar Pedido. Cuando alguien haga clic en este botón Realizar pedido, se abrirá esta ventana emergente de éxito de pedido al toque, la acción se abrirá sobre lay in aquí podemos configurar manualmente la ventana emergente como queramos. Simplemente hago clic en manual y ahora puedo configurarlo como me gusta, vamos a configurarlo así y dar clic en Agregar Fondo. Agreguemos Color de fondo 70, y vamos a comprobarlo en Acción. Haga clic aquí, haga clic en la tarjeta, haga clic en Ver tarjeta en Ver tarjeta. Haga clic en Colocar, Ordenar y la ventana emergente será, luzca así. Pero voy a configurar pop up como centro porque automáticamente se coloca en el centro del diseño. Bien, ahora tenemos el flujo. Ahora veamos qué tenemos que hacer. Entonces aquí dentro, si hacemos clic en esta botella de cerrar, este pop up debería estar cerca. Para ello, hago clic en este botón de cerrar. Y cuando lo arrastre, puedo ver este tipo de icono en el segundo icono. Si alguien hace clic en este icono de cerrar, la página redireccionará a la página posterior en esta superposición de cierre, si alguien presiona sobre este ícono de cerrar, la ventana emergente se cerrará. Así que vamos a probarlo. Se cierra, está bien. Ahora no tenemos acción a este botón de retroceso, así que agreguemos acción a ese botón. Ya tenemos una variante de nuestro componente, así que vamos a apuntarlo a este botón de retroceso. Y cuando alguien haga clic en este botón de retroceso, esa persona debería. Regresa a la página de la que proviene. Así que vamos a arrastrar la conexión así y ponerla a la parte de atrás. Y ahora vamos a comprobarlo en acción. Ahora bien, si hago clic en el botón Atrás, sólo va a ir a la parte de atrás. Vamos a hacer clic en este. Si hago clic en la parte posterior, irá a la parte de atrás. Entonces tenemos otros artículos. En este caso, si alguien hace clic en esta tonelada de tarjeta, esa persona debe redirigir a la página del carrito que acaba de señalar a la página del carrito. Si no creamos un componente para este encabezado o sección de menú, tenemos que agregar manualmente este tipo de conexión por tres veces para obtener la funcionalidad. Pero con la variante y el componente, solo necesitamos hacerlo a la vez. Y se aplicará para todas las instancias que creamos con el componente maestro. Bien, ahora vamos a comprobarlo en acción así. Sólo puedo ir a las páginas. Actualmente, no tenemos pedido y página de revisión y será tu tarea. Entonces, por ahora, no agregaremos ninguna funcionalidad a esos artículos. Pero si alguien hace clic en esta página de inicio, esa persona debe ser redirigida al hogar. Para hacer esa funcionalidad, tenemos que poner este componente maestro dentro de la hoja de pegatinas. Entonces hagámoslo. Para hacer eso presiono el comando X para cortarlo. Y vayamos aquí y peguémoslo así. Bien, ahora lo que voy a hacer es ir a casa ácidos. En ácido tenemos el pie de página, así que pongámoslo así. Y ahora tenemos que hacerla posición absoluta de facción correctamente, luego ir al prototipo y configurarlo como fijo Bien, ahora tenemos un problema. Tenemos que hacer lo mismo para todas y cada una de las instancias porque cambiamos la poción de ese diseño Sólo tienes que resaltarlos todos y pasar a la posición absoluta. Y tratemos de volver a ponerlo así. Entonces tenemos que manualmente solo la posición así. Entonces ahora debería ser trabajo bien. Bien, ahora creo que todo va a funcionar bien. Entonces ahora agreguemos acción a esto. Oh Michael, es muy sencillo. Simplemente haga clic en él, vaya a prototipos y simplemente cree la conexión así Y ahora va a ver muy bien. Bien, ahora nos estamos acercando al final de esta sección. Entonces veamos qué más parada tenemos que hacer. En la siguiente lección, nos desplazaremos horizontalmente, esta sección de revisión, Ya la creamos. Entonces lo volveremos a hacer. No sólo eso, te voy a mostrar cómo cambiar los elementos o cómo cambiar el componente cuando hacemos clic en un botón como este. A modo de ejemplo, si hacemos clic en este botón de búsqueda, el texto aparecerá aquí. En la siguiente lección, te mostraré cómo hacerlo. 53. Cómo agregar desplazamiento horizontal a la sección de revisión: Bien, agreguemos el desplazamiento horizontal para esta sección de revisión Entonces voy a mi diseño, y aquí vamos a la sección de pie único y damos clic en el marco. Voy a la pestaña de diseño, y aquí selecciono este marco. Para ello, tengo que ir a capas sobre capas. Aquí está el diseño automático y aquí está la sección que tenemos que agregar, scroll horizontal. Aquí, no agregamos contenido de clip, así que pasemos a la siguiente sección. En esa sección, tampoco agregamos contenido de clic. ¿ Y el siguiente? No es la sección y esta es la sección que agregamos. Haga clic en el contenido I antiguo, y aquí está la reseña. Entonces voy al cuadro y presiono comando y ajusto el marco así. Después voy a Prototipo. En prototipo voy a conectar en más de cuatro horizontales. Y vamos al Diseño. Ahora funciona así, es realmente sencillo. Y aquí solo hago clic en este marco y voy a Diseño. Haga clic en Contenido. Bien. 54. Cómo hacer que el cuadro de búsqueda sea interactivo: Ahora lo que quiero hacer es cuando haga clic en esta barra de búsqueda, o si toco esta barra de búsqueda, debería aparecer aquí un texto llamado Burger. Y luego si hago clic en este cuadro de búsqueda, debería ser redireccionado a la página de búsqueda. En la página de búsqueda, el texto debe ser hamburguesa y debe aparecer el resultado de búsqueda de hamburguesa. Entonces intentemos hacerlo. Para hacer eso, iré aquí porque este es el componente maestro de nuestra barra de búsqueda, y lo voy a poner aquí mismo. Entonces voy a aumentar este envoltorio y dar clic en el componente. Entonces haz click en una variante, ¿bien? En aquí voy a cambiar el nombre de la variante para agregar texto. ¿Bien? Y voy a poner aquí este campo de texto de la página de comida de búsqueda. Entonces trae este justo aquí. Y ahora solo presionaré té y crearé un texto llamado Burger. Entonces lo pondré dentro esta variante y apenas haga clic en ella. Hagámoslo como posición absoluta. Y colóquelo aquí. ¿Bien? Ahora lo que quiero hacer es cuando hago clic en esta barra de búsqueda, en este caso cuando hago clic en esta barra de búsqueda o toco en la barra de búsqueda, esto debería aparecer para hacer eso hago clic en el componente predeterminado y voy a Propiedad. Entonces aquí solo creo una conexión con ésta. En la conexión la acción está de barril y la reacción o el cambio debe cambiarse para cambiar será un texto. Y debería instancia, lo que significa que cuando dices toque en la barra de búsqueda, debería aparecer el texto de la hamburguesa. Entonces básicamente cambió a esta barra de búsqueda. Entonces veamos que funciona. O no ir a casa en casa, solo toco en la barra de búsqueda y se muestra hamburguesa. Y ahora lo que quiero hacer es cuando toque este ícono de búsqueda, debería ser pre directo a la búsqueda de alimentos. Entonces, si acabo de crear una conexión como esta, la acción no funcionará correctamente. Entonces vamos a la página principal. En la página de inicio, vamos a mostrar la barra lateral. Y aquí adentro, si hago clic aquí, solo p a la búsqueda. Pero si hago clic aquí y clic en este icono de búsqueda, no pasará nada. Porque conectamos esta barra de búsqueda predeterminada a la página de pie de búsqueda. Para solucionarlo, también podemos conectar éste al pie de búsqueda. Bien. Esta es una parte realmente simple que creamos. Entonces ahora también creamos esa parte, y parece que todo funciona bien. Entonces ahora agreguemos acción a este botón de basura. 55. Uso de variables para eliminar los artículos del carrito: En esta lección, agreguemos acción o interacción a este botón de basura. Lo que significa que cuando el usuario haga clic en este botón de basura, el alimento se eliminará de la tarjeta. Para ello, podemos usar variables locales, así que basta con hacer clic en el lienzo, y al hacer clic en él, verá texto llamado variables locales aquí, haga clic en este icono. Y en Figma tenemos esta nueva característica variable, y actualmente está en un modo Entonces usemos esta función de variable y agreguemos acción a esta papelera. En primer lugar, haré clic aquí y daré clic en Crear Colección. Aquí estableceré el nombre de la colección como artículos del carrito. Y luego aquí voy a dar click en Crear Variable. Y tenemos cuatro tipos de variables. En esos cuatro tipos, selt el tipo booleano aquí Cambiaré el nombre de este texto a C. Agreguemos el nombre completo para que sea más fácil de entender. Vamos a agregarlo así. Disminuimos el tamaño de esta variable, pop up y luego creamos la siguiente. Voy a crear dos más así. ¿Bien? A continuación en esos nombres, y estableceré el valor como verdadero. Bien, Ahora creamos variables. Si hacemos clic en el lienzo y verificamos las variables condócales, podemos ver una Ahora lo que vamos a hacer es establecer esas variables a los elementos de la tarjeta. Aquí tenemos el primero, solo da clic sobre él. Y en esta sección de capas, si hacemos clic en esta y la hacemos cerrar, la sección se cerrará. Esta función debería suceder cuando hacemos clic en este icono de papelera. Para ello, voy a hacer clic derecho sobre este icono. Cuando haga clic derecho, voy a ver las cuatro variables que he creado. Simplemente asigne esas cuatro variables. Esto es para el primero. A continuación hago clic en el segundo ítem y hago clic derecho, luego es Blueberry Fpin Y hagámoslo resto del artículo así. Bien, ahora lo que voy a hacer es ir a Prototype. Después presiono comando y selecciono este icono de basura. Entonces puedo ver esto, no así que solo seleccioné esta papelera. Ahora hago clic en este ícono más en interacción. Aquí, seleccionaré la acción como en tap, y cambiaré esta ninguna para establecer la variable. Para usar esta función, debemos seleccionar una Res. de Equipo, clic en Elegir Equipo Actualmente, configuraré Tick en el Proyecto de Equipo y dar clic en Más. no podemos hacer esto en el modo gráfico, así que por eso tenemos que enviarlo al equipo. Así que vamos a moverlo, bien. Ahora hago clic en este Ninguno y doy clic en Establecer Variable. Aquí voy a establecer la variable como la primera y el valor será falso. Y hagámoslo por el resto del botón. Haga clic en la papelera y haga clic en Interacciones. Y la acción está de barril. Cambia esta variable no para establecer y es morfina azul. Haga clic en él, establezca el valor booleano como falso. pasemos al siguiente. Pasemos al siguiente y hagamos clic en la línea de ruta. Este es el último. Bien, ahora debería funcionar. Entonces veamos que funcionó o no. Ahora estoy en mi tarjeta. Vamos a la casa. Vamos a la tarjeta. Y en esta tarjeta, solo hago clic en este botón de bloqueo y simplemente desapareció. Entonces vamos a hacer clic en este . Desapareció. ¿Qué pasa con este? Así, podemos agregar funcionalidad al botón de quitar de la tarjeta. Entonces volvamos a la página de inicio. Así que vamos a Opciones y mostremos el lado wa, y volvamos a intentarlo. Haga clic así y simplemente se eliminará. Entonces esta es una característica avanzada también. Podemos eliminar este contenido cuando podamos cambiar este contenido cuando hagamos clic en el botón de papelera. En futuras lecciones, te mostraré cómo hacerlo. Mientras tanto, intenta jugar con el Fikma y aprende nuevas características como esta Así que Fema es una herramienta realmente poderosa y en el futuro te ayudará a convertirte en un exitoso diseñador de UF 56. Proyecto de clase: Hola a todos. Este es el final, y gracias por quedarte conmigo. Entonces tienes una tarea. Déjeme explicarlo hasta el momento. Creamos marcas de alta fidelidad y convertimos esas marcas de alta fidelidad en un prototipo de alta fidelidad Entonces tu tarea es crear tres páginas. Esas páginas son mi página de pedido y la página de seguimiento de pedidos. Entonces, por último, tienes que crear un menú para esta app. Después de crear esos tres diseños de interfaz de usuario, tienes que convertirlos en un prototipo. este proyecto, cuando diseñas la página Rastrear pedido, al hacer clic en este botón Rastrear pedido, debe aparecer tu página Rastrear pedido. Al hacer clic en este menú de hamburguesas en su menú debe aparecer Espero que disfrutes de esta clase y obtengas valiosos detalles que te ayuden para tu transportista estadounidense. De nuevo, gracias por revisar esta clase y te veo en otra clase.