Aprende diseño de aplicaciones móviles en Figma: proyecto completo

1. ¡Te damos la bienvenida al curso!: Hola, soy Chris. Y en este curso te voy a enseñar todo lo que necesitas saber sobre el diseño de brechas en Figma. Figma es un programa de diseño gratuito y te voy a enseñar todo lo que necesitas saber desde cero sin ninguna experiencia previa o conocimientos previos. Entonces lo que voy a hacer es mostrarte cómo diseñar hermosas aplicaciones para Android e iOS. Número dos, te voy a mostrar cómo los prototipos, lo que significa que vamos a hacerlos interactivos. Van a parecer que ya han sido codificados. Y tres, los principios que hacen que cualquier diseño de app se vea genial. Ahora bien, estas tres partes son absolutamente enormes, pero las voy a descomponer en conceptos fáciles de entender. Puedes usar de inmediato, lo que necesitas es Figma y cualquier computadora de escritorio o laptop. Eso es. Nada más. Déjame decirte algunas cosas sobre mí. Soy un instructor certificado por Adobe. Entonces eso significa que soy un gran maestro, pero un diplomado no es nada sin experiencia práctica, sin habilidades prácticas. Para ello, fui el fundador de una exitosa empresa de diseño AB 2013-2018. Tenía un equipo de unas 25 personas. Diseño de este Coders Desk hace gerentes de producto, todos igualmente impresionantes. Y logramos obtener más de 200 millones de descargas en nuestra cartera. Entonces esto significa que tengo experiencia práctica y todo lo que estás a punto de escuchar con los pies en la tierra. Son técnicas y principios los que puedes usar de inmediato. No nos enfocamos en la teoría del embarque solo en cosas que puedes aplicar en tus propios proyectos y ganar dinero. Y créeme, los proyectos de diseño AB pagan muy bien. Desde mi experiencia, un diseñador de aplicaciones gana al menos tres veces más que un diseñador web. Y eso se debe a que las empresas que necesitan aplicaciones suelen tener un presupuesto muy grande. El mínimo absoluto $20,000 por proyecto. Ahora que hay mucho más que decir. Pero en definitiva, este es un campo muy lucrativo. Y no necesitas saber codificar. Eso es lo grandioso de ello. Puedes reservarlo y luego pasar al siguiente proyecto. Ahora, chicos, lo que quiero de ustedes, quiero que se comprometan, ¿verdad? Quiero que trabajes conmigo, que me pienses, hagas preguntas, hagas los ejercicios y te involucres con la comunidad de estudiantes que son como tú. Por favor, no dudes de ti mismo. Sé indulgente cuando te metes porque vas a estropearlo. A veces va a ser duro, pero sigue adelante. Haz tu mejor esfuerzo y no renuncies a esas pocas veces en las que te van a derribar. Si sigues adelante, eventualmente llegarás ahí. Tengo un dicho, trabajar duro, trabajar, inteligente, trabajar lo suficiente, y los resultados van a seguir. Esa es la única que te prometí. Y con eso, comencemos. Espero que puedas quedarte conmigo hasta el final y podamos construir algo increíble. Por ahora, abre Google, busca Figma, haz una cuenta gratis, totalmente gratis y descárgala. No voy a cubrir estos pasos porque es como registrarse en Gmail es muy sencillo. Acabamos de poner tu correo electrónico, tu contraseña, y eso es todo. Entonces descarga Figma, lo instaló y ya está. Te voy a ver en la siguiente lección. Muchas gracias. 2. Diseña tu primera pantalla de la aplicación: Bienvenido de nuevo. Empecemos. Abre Figma. Deberías tenerlo instalado. Pero si no lo haces por favor, pausa el video, ve a la búsqueda de Google o Figma, y luego instálalo en tu computadora. Cuando estés listo, inicia la aplicación de escritorio. Así como así, no vamos a trabajar en nuestro navegador, aunque funcione en otro navegador, vamos a seguir con el programa. Bien, así es como se ve. Y vamos a buscar el archivo de importación. Esto es lo que estamos buscando. Tienes este proyecto adjunto al curso. Ahora, aquí está la cosa. Nuestro trabajo es diseñar este green para una de mis apps. Y podemos inspirarnos en esta captura de pantalla. Este es en realidad un proyecto real. Entonces, aunque pueda parecer sencillo, te va a enseñar mucho. Por favor vea este video dos veces. Una vez solo para entender lo que está pasando. Y luego la segunda vez, puedes trabajar conmigo haciendo pausa tantas veces como necesites. Repetir. Por favor, no intente trabajar a lo largo de su primera visualización. Esto aplica para todo el curso. Bien, vamos a correr la voz. A esto se le llama el marco y todo lo que hay dentro del marco conforma una pantalla, una sola pantalla. Ahora mismo, solo tenemos una cosa, el logo de apps, atlas de teclado. Lo primero que vamos a hacer es que vamos a mandar el rojo, por favor da click sobre él para seleccionarlo. O lo segundo que puedes hacer es hacer clic y arrastrar una caja y todo dentro de esa caja va a ser seleccionado. Ahora otra vez, ahora podemos usar este comando para alinearlo en el centro de la pantalla, así como así. Cosas increíbles. A continuación, necesito algo que vaya a actuar como un trasfondo. Entonces vamos a agarrar esta herramienta, la herramienta elipse, la tecla de acceso rápido es 0. 0 para los labios no tiene mucho sentido, pero está bien. Es el icono de círculo de la parte superior izquierda de la pantalla. Normalmente vas a ver la herramienta rectángulo, pero puedes golpear 0 y la vas a conseguir directamente. O lo puedes hacer es que puedes usar esta flecha aquí para mostrar todas las herramientas. Tenemos que alejarnos un poco. Entonces hagámoslo. Mantenga pulsada la tecla de control, esa es la tecla Comando en la Mac, y luego use el desplazamiento del mouse. Así es como acercas o alejas el zoom. Por favor, tómate un momento para familiarizarte con ese concepto. Así que de nuevo, mantén presionado Control y luego desplázate. Por cierto, cuando acercas, Figma te va a enfocar en tu mouse. Entonces, si lo mueves hacia el lado derecho, ahí es donde vas a acercar el zoom. Básicamente va a seguir tu ratón, moverlo hacia la izquierda. Lo mismo. Ahora con la Herramienta Elipse seleccionada, dibujemos una forma que se vea algo así. Ahora otra vez, ahora fíjate que el logo se fue y eso es porque nos estamos escondiendo, conseguimos el fijo, ve al panel Capas del lado izquierdo, y vas a encontrar la capa que se llama elipse. Uno. Haga clic y arrástralo debajo del logotipo. Si eres los labios es demasiado grande, mamá podría colocarlo detrás de tu pantalla. El fijo que simplemente lo mueven adelante y hacia atrás sobre el marco. Si no puedes lograrlo, solo haz una elipse más pequeña. Bien, volvamos al atlas. Cambia el color de gris a casi cualquier otra cosa para eso, vamos a tener que dar click en esta casilla junto a Phil, conseguirás este pop up y podrás elegir casi cualquier color. Busco algo brillante, saturado, un color muy moderno, tal vez un morado de algún tipo, algo tal vez como esto. Ahora otra vez, estoy contento con ello. Ahora otra vez, vamos a tener que centrarlo. Entonces usemos aquí exactamente el mismo comando. Si mantienes el mouse sobre él, vas a ver que dice Alinear Centro Horizontal. Impresionante. Bien, ahora sostengamos Control y acerquemos un poco más para que podamos ver mejor en qué estamos trabajando. El logo negro realmente no funciona tan bien. Entonces cambiemos a la herramienta de movimiento. La tecla de acceso directo es V, pero puedes hacer clic aquí, mover V. De nuevo, realmente no tiene mucho sentido, pero asegúrate de seleccionar eso. Bien, Ahora, agarra el logo haciendo click sobre él, y luego vamos a hacerlo blanco. Lo creas o no, esto es un buen progreso. Para algunos. Puede ser difícil para algunos puede parecer súper simple, pero sigamos adelante. Siguiente. Quería agregar algún tipo de gráfico, pero levantemos el logo, solo la cama. Mientras esté en la herramienta de movimiento, haga clic en ella para seleccionarla y luego arrástrala hacia arriba siempre y cuando no suelte el clic del mouse, vas a ver que mamá falsa te va a ayudar a mantenerlo centrado. Eso es lo que te muestra esta línea roja. Figma realmente nos está ayudando. Bien, ahora quiero agregar la captura de pantalla, pero primero, agreguemos un rectángulo que nos ayude bastante. Hace la herramienta rectángulo, y se puede golpear R. ¿Dónde están? Finalmente significa rectángulo. Haga clic y arrastre uno hacia afuera. Sin cierto tamaño en mente, solo algo que es bastante ancho y bastante corto. Bien, siempre podemos ajustar eso si es necesario. Como siempre, por favor céntrese exactamente en el mismo comando. Ese es un paso importante en casi cualquier proyecto de diseño. Luego dentro de tu carpeta de recursos, vas a tener algunos diseños para elegir. Todos estos son hechos por mi equipo. Por cierto, vamos a colocar uno de ellos dentro de este rectángulo. Entonces así es como va a ir esto. Da clic aquí junto a la herramienta rectángulo para que podamos ver todas las herramientas. Estamos buscando una imagen de lugar y como incluso el atajo. Control Shift K. Esto abrirá una ventana del navegador y podrás encontrar esa carpeta que tiene todas estas capturas de pantalla. Bien, increíble. Voy a elegir uno al azar. Una vez cargada la imagen, vas a ver una versión mini junto al cursor. Esto significa que está listo para ser colocado dentro del proyecto. Entonces lo que vamos a hacer es que vamos a repasar el rectángulo y simplemente hacer clic en él. Y ese es trabajo, bien hecho. una cosa que no me gustan Todavía se selecciona una cosa que no me gustan estos bordes cuadrados con el rectángulo. Vas a ver este campo aquí. Entonces aquí es donde vamos a cambiarlo 0-30 pixeles. Eso nos va a dar mucha mejor suerte. Y estoy muy contenta con eso. Ahora, para que la imagen destaque un poco más, hagamos clic en este plus junto a fx. Esto nos va a dar una bonita sombra paralela. Para ajustar las sombras, mira, vamos a repasar este icono donde vas a ver dice ajustes de efectos. Entonces voy a usar valores altos para que realmente puedas verlo a través de la grabación. Son 15 para el campo y y 15 para el desenfoque. Eso son 15. Vamos a hablar de todo detalle un poco más adelante. Por ahora, por favor solo sigue mis pasos y la parte superior está hecha. Ahora agreguemos nuestro primer botón. Obtener la herramienta de tipo tecla de acceso rápido t. El primer mensaje va a ser elegir teclado menos. Elija el teclado. Ahora cuando termines de escribirlo, solo presiona la tecla Escape para terminar las cosas. Entonces cambiemos la fuente desde el lado derecho. Entonces esta fuente no se ve tan genial. Entonces vamos a cambiar a la semilla esta área aquí que se llama texto. Cambiemos la fuente a algo muy básico. Digamos Arial Bold 24. Tómate tu tiempo con él. No tienes que apresurarte. Como dije, pausa el video tantas veces como necesites cuando estés listo, céntrelo en el Canvas, así como así. El paso importante como éste, mueve el mouse sobre él y haz clic derecho en obtener de esta lista. Elija agregar, diseño automático. Está en algún lugar cerca del centro. Si no puedes manejar, solo usa esta tecla de acceso directo, cambia a. Entonces esto hace lo mismo. No parece que haya pasado nada, pero ahora tenemos esta zona aquí del lado derecho que se llama cayó. Pulsa el ícono del signo más. Y nuevamente, nada parece haber cambiado. Pero fíjese que sí tenemos blanco aquí mismo. Nos encanta el blanco y la mayoría de los proyectos de diseño AB, pero ahora tenemos que cambiarlo por otra cosa. Así que hagamos clic aquí para obtener el selector de color. Ahora podemos seleccionar casi cualquier color, pero usemos el anterior. Y luego nos vamos, Ahora es verbal también. Escapa para cerrarlo. Ahora, el negro y el morado realmente no funcionan. Pero fíjese en esta área llamada colores de selección. Entonces esto nos ayuda a cambiar ese negro a blanco puro. Simplemente golpea el cuadrado negro y ya sabes qué hacer, hazlo blanco. Recuerda usar la tecla Escape para cerrar la ventana. Y esto es cogiendo forma. El botón es un poco demasiado pequeño, así que hagamos algunos cambios. Desde este lado superior derecho. Cambiemos el radio de coordenadas dos por el, ese es este campo de aquí. Entonces uno abajo y encuentra estos dos campos dentro de 80.20, y eso es todo lo que hay para ello. Ahora, 80 significa que vamos a tener 80 píxeles a cada lado de este texto. Y esos son los bordes de los botones básicamente horizontalmente. Y esta parte es para el otro lado. Ahora, centavo del botón una vez más, y ya casi tenemos sobre ellos. Hacer una copia de la misma. Usa el control el ahora, nuevo, parece que no ha pasado nada. Pero cuando vayas con él, con el ratón, haz clic y arrastra, vas a ver que hicimos una copia. Entonces Control D o Comando D, D como en duplicado. Cosas increíbles. Cambiemos los textos y luego podremos seguir adelante. Doubleclick quiere entrar en el botón. Ahora vuelve a hacer doble clic para editar este mensaje. Cámbielo para activar el teclado. Entonces activa el teclado. Una vez que hayas terminado, pasa al siguiente video donde voy a explicar por qué trabajamos de la manera que lo hicimos. Por ahora. Esta es tu primera pantalla de diseño de app, y te voy a ver en un segundo. Gracias. 3. Lo más importante del diseño de aplicaciones: Bienvenido de nuevo. Veamos si podemos mejorar un poco el diseño. Tal vez cambie el tamaño de los botones, tal vez agregue algunos detalles más como agregar el sitio web en la parte inferior. Ahora la vida silvestre trabaja en segundo plano. Es lo mismo que hicimos en el video anterior, las mismas técnicas. Déjame decirte algunas cosas sobre el diseño de aplicaciones. Ahora, en mis cinco años más en este campo, encontré que la simplicidad es clave. Lo que ve aquí no es difícil de hacer desde un punto de vista técnico. No es una locura avanzada. Como viste, estamos usando algunas formas. Centramos las pocas cosas, elegimos algunos efectos muy básicos, como una sombra. Este es el diseño real de laboratorio. Este es un proyecto real y mayoría son exactamente como lo que ves aquí. Veces 100 ¿verdad? Ahora, simple no es una mala palabra aquí. Simple es esencial en cualquier diseño AB por su propia naturaleza, las aplicaciones móviles, las mejores al menos tienen solo una o dos funcionalidades básicas. ejemplo, el clásico Uber te llama auto, y eso es todo. La interfaz no tiene muchas decoraciones ni los botones. No vas a ver ninguna creatividad. No verás muchas cosas que lo hagan destacar increíblemente. Entonces ese no es el punto. La app necesita sentirse intuitiva, ¿verdad? La idea es hacer que la aplicación se vea de tal manera donde un niño de cuatro años con una tableta pueda administrar al usuario. Entonces nuevamente, esta es una pantalla real desde una app real. No es complicado, no es elegante, no es impresionante. No te va a conseguir un montón de me gusta en las redes sociales, pero esto es lo que necesitan las empresas. limpios, modernos Diseños limpios, modernos y precisos que ayudan al usuario a lograr sus objetivos. Foto, pero eso te está dando un auto para este verde, Se trata de asegurarse de que el usuario active el teclado. El caso es que si miras galerías de diseño como driblar o las manos o lo que sea, vas a encontrar diseños hermosos e increíbles. Pero la mayoría de ellos son falsos. Esos están hechos para diseñadores y el mate para likes y comentarios. La verdad es que en realidad esto es lo que necesitan las empresas. Ahora bien, no pienses que esto es fácil de hacer. Hay una diferencia entre lo fácil y lo simple. Fácil como cuando recoges una botella de agua, por ejemplo, simple es cuando sabes que si quieres tener brazos grandes en el gimnasio, vas a tener que usar pesas cada vez más pesadas. O si quieres un paquete de seis que tengas que hacer dieta. El proceso es sencillo de entender. Agrega más peso a medida que pasa el tiempo, come menos, ¿verdad? Pero el levantamiento real de esas pesas pesadas, eso está lejos de ser fácil. Entonces esa es la diferencia entre fácil y platillo. Otra forma de verlo es como si estuvieras viendo a un chef experimentado cuando cocinan, lo hacen con gracia. Parece tan simple, tan fácil. Pero detrás de todo eso, hay mucha complejidad involucrada. Hay un montón de experiencia. Entonces es lo mismo aquí en el diseño AB. Llegando a este punto donde puedes hacer que algunos elementos se vean encantadores. Es bastante duro, pero eso es lo que vas a aprender en este curso. Te voy a llevar a través de todos los principios de diseño que te van a ayudar a crear aplicaciones modernas y hermosas. Te voy a enseñar sobre contraste, simetría, espaciado, jerarquía, y mucho, mucho más. No los ves, pero esos son los principios de cualquier app exitosa. Una última cosa, ¿por qué la mayoría de las empresas no tienen aplicaciones preciosas como las que ves en Behance y duraderas, porque son increíblemente caras? EPS básicos, los muy simples requieren un presupuesto de al menos, al menos 10 mil dólares. Y eso sonó muy, muy de gama baja. La mayoría de las aplicaciones necesitan un presupuesto de al menos 50,000 dólares. Pero pongámoslo de otra manera. Digamos que 1 h de construir una app en total cuesta 200 dólares, $200. ¿Dedicarías más tiempo a asegurarte de que la app funcione correctamente? O la elección de colores, efectos, animaciones de fantasía y la ley. Entonces, como puedes imaginar, mayoría de las empresas quieren que la app funcione correctamente. La funcionalidad primero, ¿verdad? El diseño es siempre una prioridad baja. Entonces por eso no verás ninguna de estas increíbles animaciones, increíbles transiciones y afecta a todos los Bois desde el costo un brazo y la pierna. El costo demasiado y luego no vale la pena el dinero. Entonces, ¿cuál es la conclusión? Bueno, necesitas aprender a diseñar así. Simple, moderno efectivo, lo que ves en Galerías de Diseño es muy similar a lo que ves en Instagram. En su mayoría es falso. La gente realmente no se ve así. Y la recaída tampoco se ve así. La simplicidad requiere mucho conocimiento, práctica y, en definitiva, mucha experiencia. Te voy a ayudar con todo eso. Quédate con el curso y vas a aprender todo lo que necesitas saber sobre este campo. Ahora específicamente sobre este diseño, elegí hacer que el primer botón se destaque agregando una sombra de caída. Yo hice gris el segundo botón para mostrar que no está listo para ser cliqueado. Tampoco es tan amplia. Ahora bien, este es el principio de jerarquía. Sientes en tus entrañas que tienes que hacer clic en este botón, el morado, y no en este otro. Por último, agregué la capa de texto en la parte inferior para equilibrar el diseño. Ahora, después de pasar por este curso, incluso podrás hacer mucho más de estas cosas con mucha confianza. Pero ahora sigamos adelante. 4. Dos habilidades fundamentales que debe tener en Figma: Vamos a crear un nuevo archivo para controlar la tierra, sea cual sea el método que prefieras. Y pongámonos a trabajar. Al principio, sé que todo parece tan vacío. Cualquier proyecto comienza con un marco. Eso es lo primero que debes recordar. Un marco es como un tablero de arte o un lienzo, pero solo hay un poco diferente a Figma es un lugar donde agregas todos tus textos, imágenes, básicamente tu contenido Eso es todo dentro del marco. No te preocupes por la definición. A medida que trabajamos, pronto lo conseguirás. Para agregar el marco. Por favor, presione F para activar la herramienta de marco o simplemente haga clic aquí. Por cierto, hace otra herramienta aquí llamada la herramienta Rebanada, pero no queremos eso. Bien. Tenemos la Herramienta Marco seleccionada y el panel derecho acaba de cambiar. Tienes un montón de opciones que están muy bien organizadas. Teléfono, tableta o computadora de escritorio y así sucesivamente. Puede hacer clic en los nombres para abrirlos o cerrarlos. Y si haces clic en alguno de ellos, digamos iPad Mini, el marco se agrega automáticamente. También se puede ver en el panel de capas. Mira este símbolo aquí ese tipo de parece un hashtag. Eso es un marco para eliminarlo. Simplemente toca la tecla Eliminar y ya está. Bien, pasemos a la sección de escritorio y escojamos el primer elemento de esta lista, que también se llama escritorio. Podemos ver el tamaño aquí mismo. Son 14, 40 por 1024. Ahí lo tienes. Ahora bien, el problema es que mayoría de los proyectos de diseño web deberían comenzar con un marco que sea 1920 por 1080. Eso es lo que recomiendo encarecidamente. La mejor manera de redimensionarlo es usar esta parte aquí. W representa el ancho, y H representa la altura en lugar de 14, 40. Haga clic aquí. Y ahora puedes escribir en 1920. Lo mismo para la altura que buscamos entonces AD. Ahora el marco se expandió y lo podemos ver muy bien. Esto es lo que debes hacer para acercar o alejar el zoom. Por favor, mantenga pulsada la tecla Control y utilice la rueda del ratón. Si te desplazas hacia atrás, alejarás el zoom. Si te desplazas hacia adelante, acercarás el zoom después de hacerlo algunas veces, va a sentirse natural. Por favor, usa tu mano izquierda. Lo ideal es que tengas meñique para sostener la tecla de control izquierda en tu teclado. Ahora usa tu pergamino. Por favor, haga lo siguiente. Mueve el ratón en la coordenada del marco y haz zoom. Como puedes ver, esto realmente te ayuda a enfocarte en esa área. Ahora, aléjate y muévete a otra esquina. Sé que esto parece algo muy básico, pero créeme, es esencial que practiques. No puedes seguir adelante hasta que domines estas cosas. Hay una cosa más que hay que saber usar, y esa es la tecla de la barra espaciadora. Digamos que estamos acercados a una esquina y con muy contentos con el nivel de zoom. Pero ahora queremos movernos a la otra esquina. Esto se llama panning. Paneo alrededor. Mantenga pulsada la tecla de la barra espaciadora y el cursor del ratón va a cambiar a una mano. Si sueltas la tecla de la barra espaciadora, volverá a los datos estándar, la herramienta de movimiento. Nuevamente, mantenga pulsada la barra espaciadora, haga clic en mantener y mueva de coordenada a coordenada de lado a lado, arriba y abajo. Al lograr dominar estas dos técnicas simples, estás creando una base muy sólida. Este es tu alfabeto. Esta es tu matemática básica, básica. Por favor aprenderlo. No hay forma de evitarlo. Para recapitular, mantenga pulsada la tecla Control y use desplazamiento del mouse para acercar o alejar y mantenga pulsada la tecla de la barra espaciadora, haga clic y mantenga pulsada para moverse de lado a lado para desplazarse panorámicamente, desplazándose alrededor. 5. Figma vs Adobe XD vs boceto vs Photoshop: Bienvenido de nuevo. En esta conferencia, quiero hacer una comparación rápida entre estos programas de diseño AB. Primero, la conclusión, Figma, parece ser el estándar de la industria y el mejor programa de diseño para el futuro. Con eso en mente, puedes saltarte a la siguiente conferencia si no te interesan todos los detalles, bien, asumiendo que aún estás aquí, miro el mercado o el mercado del diseño y veo cuatro columnas grandes es Photoshop, Adobe XD, sketch y Figma. Primero, hablemos de Sketch. Es un programa decente de diseño de aplicaciones que es bastante conocido. Cuesta 9 dólares mensuales, pero no me interesa por una simple razón. No está disponible en Windows, así que no puedo usarlo. lo que entiendo, el equipo detrás de esto no planea hacerlo funcionar en Windows. Entonces por esa razón, está fuera de discusión para mí. Más que eso, no tiene una comunidad grande. Entonces con eso en mente, sketch está perdiendo terreno bastante rápido. Hace muchos años que existe, pero está perdiendo terreno. Ahora, hablemos de Photoshop versus Adobe XD. Ahora, eso es como comparar manzanas con árboles. Son programas totalmente diferentes que tienen diferentes propósitos. Adobe XD se construyó desde cero para proyectos de diseño web, también en proyectos de diseño. Entonces esa es una de las mayores ventajas para Adobe XD. Funciona con vectores. Es muy ligero, es súper rápido y tiene características increíbles que pueden acelerar seriamente tu proceso de diseño. Solo echa un vistazo a este ejemplo donde puedo poblar una lista en solo unos clics que realmente te hace trabajar más rápido e inteligente. No es sólo un gimmick. Lo uso todo el tiempo en todos mis proyectos. Velocidad es la palabra clave aquí. Ahora, la desventaja es que Adobe XD todavía está bajo un fuerte desarrollo. Adobe trabaja constantemente en ello y cada vez es mejor. Pero algunas personas dicen que las actualizaciones están llegando lo suficientemente rápido. Cosas básicas como una interfaz oscura o poder cambiar tu diseño, por ejemplo, esas no están disponibles. Bueno, no en el momento de esta grabación de todos modos. Otro inconveniente. Anteriormente, Adobe XD era un programa gratuito. Ahora son diez pavos mensuales. Entonces, en general, hay una sensación de frustración con Adobe XD, especialmente cuando lo comparas con Figma. Ahora más sobre eso en un segundo. Por ahora, hablemos de Photoshop. Photoshop es genial. Tiene toneladas de características. Es predecible, es cómodo y puedes diseñar hermosas aplicaciones con él. Es uno de los programas de diseño más conocidos del mundo. Ahora podría seguir y seguir al respecto, en sus lados positivos. Pero aquí está el elefante en la habitación. El mayor problema con Photoshop para el trabajo de diseño AB es el rendimiento. Cuando se trabaja en un proyecto mediano a grande, photoshop se ralentiza drásticamente. En la mayoría de los proyectos de diseño AB, incluso con la mejor computadora absoluta, todavía tengo problemas para moverme. Es entrecortado, no responde y es bastante molesto. Y esta es una máquina de 7,000 dólares, no es la mejor del mundo, pero aún así es de $7,000. Ahora cuando intenté agregar la nueva capa de texto photoshop, ¿ese es el anillo? Es lento como ****, se detiene y piensa por unos segundos, con agregar una capa de texto simple, esto es frustrante y es de lejos el mayor inconveniente que otros, otros también. Pero esto es lo que realmente me afecta todos los días. Y es simple. Photoshop no fue construido para este tipo de cosas. Si el proyecto solo tiene unas pocas pantallas en total, eso está totalmente bien. Puedes usar Photoshop bien. Pero después de diez o 20 pantallas, simplemente se vuelve demasiado lento. Entonces, para resumir esto entre Adobe XD y Photoshop que no tiene contexto para ningún proyecto decente de diseño de aplicaciones. Uno es increíblemente rápido, mientras que el otro es el gigante del mundo del diseño. Pero también es dolorosamente lento. Jet ski, Adobe XD versus crucero. Ahora volviendo a Figma, se inició en 2012 y en 2018 también, realmente comenzó a coger velocidad. Los próximos años. Se propaga increíblemente rápido en la comunidad de diseño. Tanto es así que Adobe, la enorme compañía detrás de programas como Photoshop, Illustrator, estrena Pro, y por supuesto, Adobe XD, este lado por Figma por 20 mil millones de dólares. Sí mil millones. Entonces eso pasó a finales de 2022 Y tomó a todos por sorpresa. La suma es increíble, pero he aquí por qué debería importarle. Entonces Adobe XD era un competidor directo de Figma, un principiante, incluso podrían verse similares. Adobe XD fue creado para los proyectos de diseño web y de aplicaciones exactamente como Figma. Pero una clara ventaja que grande mi cabeza era su precio. Fue totalmente gratis. Adobe XD comenzó gratis, pero luego lo hicieron diez dólares mensuales. Y eso puede que no parezca mucho, pero la mayoría de las empresas odian enviar un nuevo sistema de facturación. Si son diseñadores podrían simplemente registrarse rápido sin ningún problema, ese sería el caso ideal. Entonces Figma, una gran opción para mayoría de las empresas y diseñadores de todo tipo, como trabajar en Figma y no porque fuera gratis, sino también porque funcionaba en tu navegador. Sí, un completo programa de diseño que funciona en tu navegador. Entonces, en definitiva, Figma se convirtió en programa de diseño que todo el mundo estaba pidiendo. Adobe, intentó mejorar Adobe XD, pero en general, Figma parecía imparable. Entonces creo que por eso decidieron comprarlo por una cantidad tan grande. Tenían que hacer algo. Figma se hacía cada vez más fuerte y comprarlos era la solución más fácil. Ahora bien, la pregunta principal después que el Figma fuera comprado por Adobe era, ¿va a seguir siendo gratis? Y la respuesta es sí. Pero la pregunta más importante es ésta. Lo que va a hacer Adobe tanto XD Figma hacen exactamente lo mismo. No tiene ningún sentido. La clave ambos programas de diseño, es simplemente demasiado caro. Entonces la mayoría de la gente piensa que Adobe va a matar directamente a Figma ya que alguna vez fue competidor. Pero mi conjetura es que es mucho más probable que Adobe XD va a ser terminado. El tiempo nos va a decir. Pero por ahora, lo mejor es que aprendas Figma y veas por qué muchos diseñadores comenzaron a usarlo. Y nunca volvieron a cambiar a Adobe XD ni a ningún otro programa de diseño. Antes de terminar, me gustaría mencionar algo. Es muy probable que Adobe actualice Figma varias veces. Esto significa que es posible que vea pequeños cambios en la interfaz aquí y allá. Pero lo bueno de este curso es que los principios, los principios de diseño que cubrimos un universal. Entonces, aunque veas un ligero cambio de fase, no te preocupes, puedes seguir adelante sin ningún problema. Y si te quedas atascado, por favor solo pide ayuda y voy a estar ahí para saltar por ahora. Sigamos y te voy a ver en un segundo. Gracias. 6. Mejoremos nuestra velocidad: Bienvenido de nuevo. Sé que hay mucho que discutir sobre Figma es la interfaz y los fundamentos mismos del programa, que es lo que propongo, vamos a mejorar nuestra velocidad. velocidad es uno de los mayores factores que determina tu éxito a lo largo de los años, he encontrado que el volumen es increíblemente importante. En pocas palabras, una cosa es si diseñas, luego botones, es otra cosa. Si diseñas 1,000, la pura repetición te hace mejor. No se trata solo de ser más rápido, se trata de tener confianza en ejecutar lo básico. Entonces es por eso que estamos comenzando con otro ejercicio más. Aunque no estés familiarizado con el programa, no estás seguro de su interfaz y demás. No se preocupe. Llévate conmigo, inicia la Sigma y vamos a crear un nuevo proyecto dando click aquí. Inicialmente vas a obtener una pantalla totalmente en blanco y esto es normal. Agarra la herramienta de marco, tecla de acceso rápido F. Puedes usar uno de estos ajustes preestablecidos, pero es más fácil hacer clic y arrastrar una caja. Eso es un marco, también conocido como una pantalla. Por supuesto, el tamaño es totalmente incorrecto. Así que arreglemos eso trabajando con este panel de propiedades aquí mismo en el lado derecho. En definitiva, W significa la web y h significa altura. Queremos 720 por 12, 80, un gran punto de partida para la mayoría de las aplicaciones. Pon esos valores y pulsa Enter. Después de eso, es posible que desee mantener presionado Control y alejar la cama usando una rueda de desplazamiento del mouse. Ahora, aquí está todo objetivo. Quiero que rápidamente cree una cuadrícula de seis fotos con seis dipolos. Esto significa dos columnas para ser esas. El objetivo es hacerlo lo más rápido posible. Y para ello, voy a pedirte que lo hagas tres veces. Cada vez que lo hagas, por favor, anota la hora. Usa un cronómetro en tu teléfono. Quería ver cómo mejoras cada vez que pasas por estos pasos. Así es como va esto. Agarra la herramienta rectángulo, las teclas de acceso rápido son y dibuja una forma como esta. No hay un tamaño específico en mente, pero debería estar por debajo de los ciento 30 píxeles. Entonces eso se elimina fácil aunque. Entonces tienes espacio para dos de ellos uno al lado del otro. Colócala en el lado superior izquierdo, y esto es bueno para ir. A continuación, agarra la herramienta de tipo, tecla de acceso rápido d, d Para tipo de texto. Y escribamos algo. Esto puede ser cualquier cosa en este punto. Sólo voy a usar foto nombre1, solo algo al azar. Golpea Escape cuando hayas terminado con él. Ahora, comienza la diversión. Selecciona tanto el rectángulo la capa de texto dibujando un cuadro así. Ahora lo adivinaste, vamos a tener que centrarlos. Ahora. Todo esto está bien y bien, pero la capa de texto es bastante básica. Bueno, vamos a darle click y vamos al lado derecho de la pantalla, y cambiemos su orientación. En primer lugar, vamos a pasar de alinear a la izquierda a alinear al centro. ¿Y por qué? Porque vamos a aumentar el tamaño. Vamos a hacer muchas cosas, pero se va a quedar. Pero así e.g Aquí, como pueden ver, permanece centrada aunque cambié el tamaño. Además, también podemos cambiar el tipo de letra usando este campo aquí mismo. Tengo montones de ellos instalados. Así que voy a ir por uno de ellos, por ejemplo Poppins, negrita 24, ¿verdad? Y debido a que cambiamos la orientación de izquierda a centro, el texto permanece centrado con un rectángulo. Te voy a enseñar a instalar fuentes más adelante, pero ahora continuemos. Por ahora puedes usar cualquier otra fuente que se vea interesante. Sólo tienes que ir a través de esta lista aquí mismo. Bien, Siguiente, selecciona ambas capas y haz un ancho de copia controla el escritorio Comando D en un Mac, D como en duplicado. Y como siempre, no parece haber pasado nada. Pero el panel de capas nos muestra la copia de vuelta a la pantalla, haga clic y arrástrela hacia un lado. Es importante que lo alinees arriba, ¿verdad? Entonces esto es lo que significa. Imagina una línea horizontal que va justo aquí. En realidad no tienes que imaginarlo porque Figma te ayuda. ¿Bien? Entonces una línea que correctamente y deja un poco de espacio a cada lado. Si es necesario, selecciona todo y muévalo. Bien, esto es algo bueno. Ahora hagamos esto. Seleccionemos ambas entradas arrastrando hacia fuera y caja aún más grande que abarca todo ¿verdad? Ahora, vuelve a duplicar con Control D y arrastra las copias hacia abajo. Por favor, deje suficiente espacio entre las filas. Entonces algo como esto. Lo que quiero evitar es algo que se vea abarrotado como este de aquí mismo. Esto no es una gran suerte. Así que de nuevo, asegúrate de dejar suficiente espacio para respirar, 0. Recuerda acercar y alejar cuando sea necesario, eso está controlado y tu mouse se desplaza. Bien, Ahora, hazlo de nuevo si es necesario, hasta que consigas seis fotos. Y aunque van a ser increíbles Hablando de fotos, vamos a unsplash.com. Y aquí vas a encontrar una enorme biblioteca de imágenes gratuitas. Ahora mi consejo es que me muestres algo que es interesante de tu país. Puedes presumir diferentes ciudades, diferentes partes de tu naturaleza. Solo asegúrate de que las fotos vayan bien juntas y que los nombres estén claramente marcados. Entonces, después de descargar seis imágenes de Unsplash, es el momento de traerlas dentro del proyecto. Para ello, usemos Control Shift K para colocar las imágenes. O si no le gusta la tecla de acceso rápido, vaya a la herramienta rectángulo y haga clic aquí en esta flecha hacia abajo, busque, coloque imágenes y seleccione esos seis archivos. Estos ten en cuenta que unsplash.com te da imágenes enormes. Entonces cuando los cargues, Figma va a agradecerle por un tiempo, solo unos segundos, así que hay que tener paciencia con ello. Bien, genial. Ahora rápidamente da clic en todos los rectángulos para insertar esas imágenes dentro de ellos. Cuando termines, quiero que cambies el nombre de todas estas capas de textos a algo más apropiado. Nuevamente, pueden ser nombres de ciudades y tu país o algo más. No necesitas una descripción larga, solo hazla breve y dulce. Por supuesto, podrías reducir este texto a un tamaño diferente. Tienes el control total del look. Hazlo más grande, cambia la fuente, lo que quieras hacer cuando hayas terminado, selecciona todo el fotograma. Después vaya a Exportar y haga clic en este icono más. Y vas a ver algunas opciones y las predeterminadas están totalmente bien. Png al tamaño que lo configuraste. Da clic en este botón y vas a obtener una ventana de navegación, guardarla en tu escritorio y luego subirla a la plataforma. Todavía quiero ver, este es tu diseño. Ahora lo que quiero que hagas es VP. Hacen ejercicio unas cuantas veces más, tres veces en total. Entonces esto significa crear un rectángulo en el centavo del título del título de dos maneras. Una vez con un rectángulo y luego la segunda vez cambiar la orientación del lado izquierdo al centro. Luego busque los títulos, copias de mayo, agregue fotos y explore. Mira cómo puedes mejorar tu tiempo. Pero una cosa sin embargo, no consideres el tiempo que pasas en Unsplash buscando las fotos. Entonces eso está excluido, ¿verdad? Pausa el cronómetro. Lo que buscas, la velocidad en Figma, deberías poder agregar rectángulos y capas de textos con los ojos cerrados. Inserta las fotos, asegúrate de que todo esté centrado. Muévalos, acercar y alejar. Eso es lo que quiero de ti. Buena suerte y házmelo saber tus tiempos. Déjame saber cómo mejoras cada vez. 7. Corregir este diseño de aplicación móvil: Bienvenido de nuevo. Por favor inicie Figma e importante para el siguiente archivo. Arreglar esta app dot FIG cosa. Esto se adjunta al curso. Ahora el objetivo es sencillo. Tenemos que mejorar este diseño. Y esto nos va a ayudar mucho a aprender sobre cómo necesitamos diseñar una app. Ahora, aquí está el primer error. Has visto que hemos centrado bastante nuestros artículos. Observe este lado izquierdo. Ahora, deberías imaginar de inmediato la línea vertical pasando por todos estos elementos. Si seleccionas todas ellas, vas a notar que estas están por todas partes. No están alineados. Entonces esto hace que la aplicación se vea desordenada. Es un presentimiento que te dice que algo no está bien. Así que con todos estos elementos seleccionados, vamos a usar esta línea de comandos de alineación a la izquierda. Y esto es mucho más parecido. Para ser justos, la brecha a la derecha es mayor, uno a uno contra el 82 de la izquierda. Eso no es correcto. Bueno, antes que nada, si intentaste usar este ícono de la línea central, figma no nos va a dar lo que estamos buscando ahora para que sea justo, esto no se ve tan mal, pero mantengámonos en el camino. Ahora queremos igualar la brecha del lado izquierdo con la del lado derecho, ¿verdad? Queremos la misma brecha. Podemos hacer click, arrastrar y mover todo alrededor hasta que veamos esta línea. Esta es la forma manual de hacerlo y no es la forma más rápida de hacer el trabajo. Entonces déjame deshacer el control Z, ese es el Comando Z en una Mac. Ahora, con todos los elementos seleccione que puede usar Control G, G como en grupo. Ese es el Comando G en una Mac. Ahora enfócate en el panel de capas. Tenemos algo aquí llamado el grupo o la carpeta. Ahora en definitiva, Figma ahora trata a todos estos elementos como uno solo. Y por eso, podemos usar el comando central así así, y obtenemos la misma brecha a cada lado. Entonces, ¿conseguiste todo eso? Agrupamos todas las capas juntas. Entonces Figma los vería a todos como un solo objeto. Entonces ya podemos usar el comando central para desagrupar, simplemente haga clic con el botón derecho aquí o en el panel de capas. Y estamos buscando al Ungroup. O incluso rápido que puedas usar las teclas de acceso rápido Control Shift G, Pero me gusta hacer click derecho. Entonces nuevamente, ese es el primer error, no alinear las cosas correctamente. Eso fue en dos casos, dejó alineando las cosas y luego moviéndolas en el centro. Ahora bien, el segundo error está aquí mismo con esta disrupción, este gris es demasiado claro, está demasiado lavado, así que es demasiado difícil de leer. Imagina que estás en tu teléfono y tu brillo es del 20 por ciento. Para ahorrar la duración de la batería, no podrás leer eso. Así que haz click en él para seleccionar eso y luego cambiar el relleno a algo un poco más oscuro. La legibilidad es clave. Elegibilidad es lo que necesitas para leer fácilmente las capas de texto. Entonces un color muy lavado es un no-go. El siguiente error es la acción principal en esta pantalla de inicio de sesión. Es un elemento tan pequeño y es fácil perderse. Por qué no tener un botón grande con una generosa superficie y obligar al usuario a ser muy preciso con los pasos. No tiene ningún sentido. Entonces selecciona el texto y luego usa Shift a. Esta es la forma estándar de crear un botón en Figma. Más que eso, pero el último punto, ahora, agreguemos un relleno haciendo clic en este icono más. Cuando se trata de colores de acción, usa algo que sea brillante y saturado. Entonces por ejemplo digamos que queremos usar un verde. Nunca debes ir por algo como esto, por ejemplo tan aburrido, aburrido y lavado. Esto tiene que destacar. otro lado, no quieres usar colores neón, ¿verdad? Entonces, ir todo el camino en la parte superior derecha suele ser un error. En cambio, quieres quedarte en esta zona aquí mismo. Este es un color moderno el que la mayoría de los clientes estarán contentos. Por supuesto, el negro no funciona. Ahora, ¿podrías leerlo potencialmente? Sí, claro, pero ¿se ve genial? No. Así que recuerda, podemos controlar el texto desde aquí, selección de colores. Ahora, mi consejo, siempre, siempre va por el blanco puro. Nada más, no amarillo, no verde azulado, no gris, NAB, dorado. Nada supera al blanco puro. Bien, Para los nervios centrales, los cuadrados se ven un poco anticuados. No es un error, pero no es agradable. Es un poco 2010. Entonces este pico. Entonces usemos un valor alto, algo así como 60. Puedes poner en cualquier valor súper alto aquí, Figma solo va a usar el valor máximo posible para el ancho y alto del botón, usemos 160.20. Ahora mi consejo es que o hagas el botón como por qué los campos, o lo haces considerablemente más pequeño. Como siempre centrarlo horizontalmente. Cuáles evitar son los valores que parecen ser aproximadamente los mismos, pero los diferentes. 200 es un excelente ejemplo. Es casi tan ancho como los campos, pero no del todo. Esto es menos estéticamente agradable. Entonces mi consejo se lo roban. O serías lo preciso o no lo has hecho en absoluto. Ahora, volviendo al espíritu del ejercicio, podemos hacer mucho más, ¿verdad? Vamos a mover olvidé la contraseña en un lugar diferente, levanté el botón de inicio de sesión, y así sucesivamente. Ahora bien, estos son detalles de afinación y puedes tomarlo o dejarle pasos opcionales, ¿verdad? Se trata más de preferencias personales que de arreglar recoge qué errores, ¿qué es claro el tema es este, el final de este ejercicio? La contraseña de Dios no está correctamente diseñada. Ver, iniciar sesión es claramente una acción, ¿verdad? Regístrate en la parte inferior. Nuevamente, es claramente una acción. Se puede ver que está en un color diferente e incluso está en negrita. Por lo que se destaca un poco más porque la contraseña dios no parece especial de ninguna manera y eso obviamente es un error. Así que selecciónala y cámbiala, hazla negrita y cambia su color a uno existente, por ejemplo, este azul. Ahora, ¿por qué azul? Porque es una reacción secundaria similar a registrarse. Ahora, la acción principal o la reacción primaria es iniciar sesión, que es verde. El secundario es azul. Ahora bien, estos son los tipos de cosas que vas a aprender en este curso. Por ahora, vamos a resumir esto. Así que hemos dejado la línea todo, porque la precisión es esencial en cualquier proyecto de diseño de app, cambiamos el color de la descripción para mejorar la legibilidad, la capacidad de leerla fácilmente. Agregamos el rectángulo para la acción de inicio de sesión para que sea más fácil de usar. Y finalmente, hicimos para el dios contraseña, negrita y azul. Por lo que se destaca como una acción, como algo que se puede tocar. Y con eso, con bueno para ir, arreglamos esta app. Gracias. 8. Introducción al proyecto: Bienvenido de nuevo. En la próxima sección, vamos a diseñar una app de comida a domicilio va a ser todo un proyecto. El objetivo es familiarizarse con todos los componentes de una aplicación móvil y crear algo que se vea genial. Por favor, vea cada video dos veces. Una vez para entender lo que está pasando. No trabajes, solo mira y mira lo que está pasando. Y luego una segunda vez. Haga una pausa con la frecuencia que necesite para trabajar. Bien, ahora, mientras vamos por cada pantalla, voy a darte mi idea. Te voy a dar mi proceso de pensamiento sobre cómo tomo decisiones de diseño rápidamente. Dicho esto, hay que tener en cuenta que ciertos principios que aquí se aplican, requieren de un análisis en profundidad. Vamos a hablar de todas esas cosas un poco más adelante. Ahora mismo, quiero que trabajes lo más posible y dejes la mayor parte de la teoría para después. Ahora, tal vez le preguntes Chris otras cosas que necesitamos aprender. ¿Por qué estamos entrando en un proyecto de diseño de aplicaciones completo, un proyecto del mundo real? Y eso es porque nada supera a la experiencia. Entonces por eso con saltar callejero y luego seguir adelante, también quiero que diseñes diseños estándar porque esto es lo que vas a encontrar en tus proyectos cotidianos. Claro. Hay toneladas de diseños listos para usar súper creativos en las manos con driblar. Pero el hecho es que la mayoría de tus clientes no tienen suerte de gastar en desarrollo de aplicaciones, en codones. Así, vamos a crear algo que en realidad es un proyecto del mundo real. Algo que se basa en mi experiencia de más de cinco años trabajando con codelabs, con desarrolladores las 24 horas del día. Eso significa aplicar las mejores prácticas y usar diseños bastante estándar, debe ser consciente de que cada decisión de diseño que tome puede aumentar o disminuir los costos de desarrollo, costos de codificación. Entonces, si bien algo puede parecer impresionante, hay muy buenas posibilidades de que el desarrollador tenga el trabajo extra duro para que eso suceda y el cliente tenga que pagar mucho más. He estado por ese camino muchas veces. Pero aquí está la cosa. También he estado en el asiento del cliente donde tuve que aprobar pagos adicionales porque la versión final requiere más trabajo del que inicialmente anticipamos. Ahora, de nuevo, voy a traer todo este conocimiento este curso y voy a enseñarte a elegir tus batallas con cuidado, diseñando algo increíble que no rompa el banco. Por ahora. Quiero que mantengas curiosidad y hagas todo lo posible para ver las cotizaciones completas hasta el final. Antes de irnos, tengo que pedirles su comprensión respecto a ciertas partes que serán aceleradas. Cualquier proyecto decente de diseño de aplicaciones va a llevar días, si no semanas. Estoy tratando de condensarlo hasta su esencia, recortarlo para que puedas obtener una gran experiencia de aprendizaje en el metal de las horas. Entonces eso significa que tengo que editar ciertas cosas. Acciones repetitivas que me has visto hacer 100 veces o cosas como como buscar algo en Google, ya sabes, encontrar un conjunto de iconos, encontrar una fuente, cosas de esa naturaleza, cosas que son tiempo- consumiendo, pero no hay nada especial en ellos. Si tiene alguna duda, por favor pregunte. Estoy aquí para ayudar. Si hay algo que no entiendas, por favor solo publique un mensaje y lo responderé lo más rápido que pueda. Bien, vamos a divertirnos un poco con nuestro primer proyecto serio. Por favor, ten paciencia contigo mismo en caso de que luches a veces y quédate conmigo hasta el final. Vamos a por ello en. 9. Exploración del breve: Bienvenido de nuevo. Este es nuestro primer proyecto de aplicación serio. Esta va a ser una app de entrega de comida a domicilio. Y vamos a aprovechar esta oportunidad para pasar por muchas pantallas y escenarios diferentes. Este proyecto tiene un resumen que se trata de un ocho de cada diez. No es increíble, pero ciertamente no son pocos bocetos en una servilleta. Es doble como debería ser. Por una parte, tenemos el wireframe, que nos muestra las pantallas más importantes y qué contenido hay que incluir. otro lado, tenemos un documento que describe lo que sucede dentro de la aplicación por si acaso no queda claro a partir del wireframe. Idealmente, siempre debes tener ambos al iniciar un nuevo proyecto. No es tu trabajo llegar a ellos. Pero si el cliente sí quiere eso, deberías incrementar tu cotización de una manera muy significativa, básicamente cobrando más, yo diría al menos al mínimo, otros $1,000. Bien. Adjunto al curso, puedes encontrar el enlace para el wireframe, el logo y la documentación. Ahora bien, este negocio se llama Live short for delivery, y básicamente es una app que entrega comida. Y algunas ciudades, necesitamos enumerar todos los restaurantes que ofrecen comida para llevar, pero solo aquellos que tienen su propio personal de reparto. Bien, bueno saberlo. Ahora, la empresa de la izquierda no maneja la entrega real. Ahora bien, esta área del brief es muy común. Es la esencia del proyecto y es un buen lugar para comenzar a medida que tienes una idea general sobre lo que estás a punto de diseñar. La siguiente fase es crítica, el público objetivo. Y esto va a determinar el aspecto y la sensación de la app. Y es agradable tener al menos algo de inflamación. Ahora bien, esta app es para personas activas con ingresos disponibles. Ambos géneros, probablemente solteros, no casados, trabajo de oficina, poco probable, alta dirección. Tenemos que pagar puntos, la calidad de la comida y el tiempo de entrega. Ahora bien, estos son puntos útiles porque estos pueden ayudarnos a determinar el aspecto de la app. Cómo debemos darle estilo a LEP. El contexto lo es todo. Ahora me gustaría tener algunos detalles más, pero como dije, se trata de un ocho fuera de banda. Otra cosa que debes encontrar en estos escritos es el valor de la app. Ahora tenemos los principales puntos de dolor, así que sabemos lo que hay que arreglar, pero ¿cómo hace eso la app? ¿Cómo hace feliz la aplicación a la gente? Aquí, la aplicación tiene algunas fortalezas. Son las vistas, el excelente tiempo de entrega y las fotos reales de los productos. Bien, bastante bien, razonable. En los próximos párrafos con obtener detalles clave que darán forma a todo el flujo de la app. Ahora, voy a saltarme esta parte, pero por favor lee todo tú mismo después de esta conferencia por lo que veo, creo que el usuario puede saltarse el proceso de registro y lo mismo para la dirección, sólo puede saltarlo. Ahora, normalmente, el registro es el primer paso. Pero aquí el cliente, también conocido como el dueño del negocio, ha hecho la elección inteligente. No quiere que el usuario se quede atascado con llenado de formularios sin ver el valor de la aplicación. Entonces es por eso que estamos dando al usuario la posibilidad de interactuar con la app, de realmente usar el bien. Y que está convencido de que puede registrarse durante el proceso de pago. Esta es una gran señal. Esto te demuestra que el dueño o el gerente del proyecto o el dueño del negocio, quien esté dirigiendo el espectáculo, ha pensado cosas que hacer. Tenemos que analizar estas cosas porque esto nos dice nuestra posición en el proyecto. ¿Deberíamos compartir nuestras propias ideas? ¿Nos permitimos ser vocales y desafiar ciertas decisiones? Bueno, depende de lo bien pensado que esté el proyecto y por supuesto, tu papel, tu trabajo en este caso, esta es una gran señal. Las cosas están bajo control y no necesitamos adivinar el breve. A veces los clientes no tienen idea. Este no es uno de esos casos. Avanzando en caso de que el usuario haya iniciado sesión y la ubicación no se complete con solo va a mostrar la ciudad con la mayor cantidad de restaurantes. Pero puede usar un desplegable para cambiar eso rápidamente. Nuevamente, suena bien, bastante razonable. Ahora, en caso de que el usuario esté registrado, el desplegable obviamente mostrará su ciudad. Ahora bien, el sistema de calificación se basa en porcentajes, 1-100% en lugar de la calificación de cinco estrellas, lo que para nosotros es un buen lugar para agregar algo de personalidad. Vemos que nuestras cuatro categorías de calificaciones. Así que tendremos que diseñar algo que sea un poco creativo e interesante. Ahora, hagamos una pausa de nuevo. Esta es otra gran señal de que las cosas han sido analizadas con gran detalle por los cerebros de la operación. Los sistemas de calificación utilizan el enfoque estándar de cinco estrellas, pero algunas de las compañías más grandes del planeta han cambiado a un sistema de aversión similar. Esto incluye YouTube, Netflix, y en algunas partes del mundo, Facebook. Ahora, el listado es la pantalla fundamental dentro de la aplicación. Por lo que necesitamos una comprensión clara de lo que hay que incluir y qué se puede exhibir en otro lugar. Ahora, aquí vemos necesitamos la foto, un título, calificación, tipo de cocina, tipo de comida tiempo de entrega. Sin esta inflamación, podemos seguir adelante. El caso es que podríamos incluir por ejemplo a. orden mínima, ¿verdad? O el cargo de entrega. Podríamos incluir la distancia en millas o kilómetros desde el restaurante hasta el usuario. Todo esto cambiaría completamente la estructura del diseño. Así que de nuevo, estoy bastante contento de que tengamos toda esta información y sabemos lo que hay que incluir y lo que es opcional. Tenemos algunos otros pedazos aquí y allá, pero pasemos a los wireframes. Tenemos que ser conscientes de que el número de pantallas que se muestran aquí no es realmente exacto. El wireframe normalmente muestra las pantallas más importantes y tenemos que rellenar los espacios en usando la documentación, por ejemplo, pop-ups, pantallas intermedias y demás. Obviamente, esos no están incluidos en la mayoría de las situaciones. No los vas a encontrar si los tienes. Grandes noticias, pero en este caso, no creo que las tengamos. Ahora volvamos a ello. Las cosas están bastante bien trazadas. Entonces creo que vamos a pasar un buen rato con ello. Simplificado de nombres. Estos están numerados, lo cual es impresionante. Entonces podríamos hablar sobre la pantalla de ubicación, por ejemplo, pero podría ser más rápido llamarla pantalla uno. Si quieres comentar algo, por favor incluye el número. Ese es el mejor enfoque. Ahora volvamos a ello. Veo que necesitamos incluir tanto el menú izquierdo como el menú derecho, que no es algo que Google recomiende. Pero creo que esto es necesario debido a esos filtros que van a ayudar al usuario a encontrar un restaurante específico. Por último, hay que tener cuidado con los diferentes flujos de la app. Tenemos múltiples avenidas. A, cuando el usuario está registrado, eso es importante. Ser cuando no tiene cuenta y se salta la ubicación, así que no tenemos una dirección y vemos cuando no está registrado, pero él nos proporciona una dirección. Esto no nos afectará demasiado en las etapas iniciales de diseño, pero en la fase de prototipado, vamos a tener que ordenar todos estos escenarios. Vamos a tener que hacer la app y la directiva. Entonces va a ser bastante complicado, pero ya veremos en ese momento en la fase de prototipado, Con todo, podemos iniciar el proceso de diseño revisando la competencia en este nicho, tenemos para buscar inspiración. Tenemos que ver lo que están haciendo otras personas. Entonces continuemos en el siguiente clip. 10. Analizar los competidores de la aplicación: parte 1: Bienvenido de nuevo. En este punto, el breve no debería ser un misterio. Si no has ido al ancho, por favor pausa el video y analízalo que solo el siguiente paso es echar un vistazo a la competencia de la app para ver qué está pasando en este sector en particular. Aquí tenemos un nicho bastante bien establecido, entrega de comida que son apps más que suficientes que podemos analizar. Otro, hacer que uno entienda mejor los requisitos del proyecto y obtener algo de inspiración con respecto al estilo general. Tenga en cuenta que estas aplicaciones se basan en la ubicación. Lo que estoy a punto de mostrarte puede que no esté disponible en tu país, pero sí tienes varias capturas de pantalla de cada aplicación adjunta al curso. Sin embargo, el line-up incluye al hígado, Food Panda , the Live, que es una app que tiene exactamente el mismo nombre, pero es puramente casual. Comida para llevar y luego pulsa Menú. Ahora, todos los laboratorios se actualizan constantemente, por lo que las versiones en vivo pueden ser diferentes. En realidad, estoy bastante seguro de que diferente. Aún así, las capturas de pantalla serán el punto de referencia. Bien, comencemos con el vivo para que podamos sacarlo del camino. Ahora, la pantalla inicial es un gran desastre. Tenemos banco amarillo, azul marino, y curiosamente el botón principal también es amarillo. El fondo parece ser una imagen de la ciudad, pero está bloqueada por este rectángulo sólido, lo que no tiene sentido. Cuando buscas, aunque no entiendas mi idioma, el rumano, podrías ver que este texto es de calidad bastante baja, muy pixelado, y algo distorsionado. Y eso es porque estos no tienen en realidad capas de textos, oficialmente llamadas cadenas por codones. En cambio, esta es una imagen que se está estirando. Esa es una mala práctica y no es buena Mirar en absoluto. Bien, ahora cambiemos a la página de listado. Aquí vemos de inmediato la poca atención al detalle. No hay espacio vacío a ninguno de los lados. Entonces, si arrastramos algunas líneas, se puede ver que la alineación está fuera de control. La topografía es modesta, las fuentes son aburridas. No hay diversidad en esta región. No hay en particular la jerarquía que se pueda detectar fácilmente. En general de cuatro de cada diez. Y estoy siendo generosa. Cuando entramos al restaurante, podemos ver que las pestañas tienen estos divisores verticales, que no he visto muchas veces en las apps de Android. Encima de eso, no hay elevación en ningún lado. Puedes detectar cualquier sombra paralela que sea. Ahora bien, eso no es exactamente algo malo, pero esto se ha quedado corto en el departamento de diseño. Peor que eso, el gesto de deslizar que a menudo se usa para cambiar rápidamente los golpes. Bueno, en realidad no funciona. Eso es todo un shock. En su lugar, hay que tocar manualmente estos elementos, o podríamos usar estas flechas, que son de tiempos de Windows XP. Ahora, honestamente no tengo idea de lo que estaban pensando estos tipos. Este es un excelente ejemplo de una app que fue hecha por desarrolladores y empresarios conocen diseñadores con involucrados, te prometo que en la parte superior derecha, cuidado de adivinar qué hace ese ícono. Es información adicional sobre el restaurante, tal vez una función de compartir, Agregar a Favoritos? Y la respuesta es, no lo sé. Cuando lo toco, no pasa nada. No tiene un downstate, así que no estoy seguro de si realmente funciona. Pero al seguir adelante, la caja también es risible. Todo se lanza al azar junto. Creo que querían centrar estas capas de textos, pero todo está apagado. Por más que intentes, no encontrarás muchas líneas imaginarias. Nada está alineado. Ah, y esto entrega el ícono, se lleva el pastel. Cambié de opinión. Es un dos de diez, otro cuatro. Bien. Pasemos a llevaray.com, que es una empresa que está comprando aplicaciones de entrega de izquierda a derecha, no hace nada bloqueándonos. Como si fuera en el caso de vidas donde no podías ver nada a menos que pongas una dirección con una S para la ubicación, para el permiso GPS. Entonces la aplicación básicamente quiere nuestra ubicación e inmediatamente va a aparecer una lista de restaurantes. Ahora, personalmente pedí muchos alimentos, así que en realidad soy un usuario bastante pesado de estas aplicaciones. La comida para llevar no es una de ellas. No me gusta y déjame decirte por qué. Todo es confuso. Nada es donde yo esperaría que estuviera eso. Claro. El listado de restaurantes es encantador. Logotipos bonitos y limpios a la izquierda. Despeja los títulos en negrita a la derecha. Iconos interesantes debajo. Pero ahí es donde se detiene el tren feliz. ¿Me puede decir cuál de estos dos restaurantes tiene una calificación más alta? Porque si alguna vez has usado booking.com, creo que ya sabes, hay una gran diferencia en la calidad. Entre un hotel 8.0 y un hotel 8.9. ¿O qué tal IMDB? Si te gustan las películas, película 6.1 versus una 6.91, noche y día. Lo que estoy tratando de decir es 4.5 estrellas para dos restaurantes no me dice nada. Necesito más información para poder tomar una decisión. Ten en cuenta, tengo más de 50 restaurantes en mi zona. Por lo que este sistema estelar, sin ninguna otra información, no es lo suficientemente bueno. Pero volvamos al diseño por el momento. A mí me encantó la naranja. Realmente brilla a través y tiene un bonito zinc para agregar. Es fresco. Es captar los íconos de nuevo, agradable y encantador. Y tenemos un interruptor interesante que cambia la forma en que funciona la app, ya sea en el modo Liberty o pickup. Eso está bien ejecutado. Las fuentes utilizadas no están fuera de este mundo. Y lo mismo puede decirse de sus íconos, decentes, pero no geniales. Dentro del restaurante, todo está bien espaciado. Pero curiosamente, fueron por esta sombra de trato extraño para el color de llamada a la acción. Esto es bastante extraño. Ahora, hay un sistema de pestañas que te permite deslizar entre categorías según lo esperado por cualquier usuario móvil. Algunos platillos tienen descripciones, pero otros no. Respecto a las fotos del platillo. Misma historia. Ahora, la caja es realmente mediocre. Muchos divisores, mucho gris, poca atención al detalle respecto a la tipografía. Pero luego hagamos una pausa en el lado del diseño. Esto sería un 6/7 de diez en mi libro, el problema, como dije al principio, es la funcionalidad. Solo echa un vistazo al sistema de tarjetas. Está en algún lugar en la parte superior derecha, pero no en la barra de acción. No, en realidad es un FAB de botón de acción flotante, así que simplemente se cierne sobre. Eso es bastante inusual. El sistema Deb tiene fuentes que son demasiado grandes, y esto me dificulta saber qué hay disponible en el restaurante. El menú de la izquierda está en realidad en el lado derecho. También es completamente personalizado. Ahora, no estoy diciendo que eso sea algo malo, pero es otra cosa a la que tengo que acostumbrarme. Estos cuatro iconos encima de la lista de restaurantes. Otra vez, bastante extraño. Esta es una app que ni siquiera ha considerado los lineamientos oficiales del diseño de materiales. No les importaba en absoluto. Y se siente como en general, la app en mis manos, se siente torpe. Es difícil de poner en palabras, pero simplemente no se siente bien. En general, este es un diseño AB mucho mejor que el vivo el anterior. Pero no creo que lo califique más de un cinco de cada diez, tal vez seis si soy súper generoso. Ahora, pasemos al menú de ayuda, que tiene un enfoque totalmente diferente. Primero, me encantó el proceso de incorporación, es decir, las primeras pantallas iniciales que te informan sobre la aplicación. Diseño agradable y limpio. Y una vez que ingresas a la app, me muestra una lista de restaurantes basada en la dirección que puse. Ahora bien, el listado es muy fácil a la vista. Pero hay un problema con respecto a la funcionalidad. No tienes forma de ordenar estos restaurantes. Hay que entrar a cada uno y ver qué es qué. Y esta es la vibra en toda la app. Hay que tocar mucho para llegar a la meta. Muchos clics en resumen, donde algunas aplicaciones quieren que llegues a la fase de pago y cuatro pestañas o menos. Aquí ese número se duplica fácilmente. Hay que poner mucho trabajo. Cuando tocas una entrada, esto es lo que obtienes. De nuevo, diseño encantador. Este es un ocho y mi libro desde el punto de vista del diseño. Aquí está el menú del restaurante. Tenemos un enfoque de dos columnas, pero no estoy seguro de si esta es la mejor opción. ¿Deberíamos llegar a ver más artículos? Pero la suerte no es tan grande por esta altura. Se siente demasiado pequeño. Parece antinatural. Se siente como si algo estuviera mal. Y las fuentes, ahí no están listas. Todo parece tirado junto. Ahora cuando los platillos tienen fotos, es un poco de experiencia, pero en general, esto es una bolsa mixta. El botón de acción flotante también es confuso. No estoy muy seguro de qué pasa con este botón. Después de algunas investigaciones, sí creo que esto me permite hacer un grupo por lo que sea que sea que sea. Básicamente, es algo acerca de ordenar con tus amigos. Pero, ¿por qué colocarlo tan al frente y al centro? En fin, el fondo es un poco demasiado fuerte, el gris un poco demasiado oscuro para mi gusto. Destaca demasiado. El sistema dapp se ve bastante bien y los iconos de la ActionBar también son interesantes. Es difícil puntuado en algunas partes es un siete, tal vez incluso una ayuda. Mientras que en otros lazos, ¿es el otro cuatro pies? Ahora, vamos a darle un 6.5 y pasar al hígado. Pero vamos a hacer eso en el siguiente clip. Gracias. 11. Analizar los competidores de la aplicación: parte 2: Bienvenido de nuevo. Ahora estamos en el hígado. Hazlo, vamos a analizarlo y a ver si esto es una fuente de inspiración. La primera impresión es genial. La topografía es puntual, tiene carácter, agrega valor al diseño. Es fácil de leer. Lo siguiente que noto es el sistema de tarjetas horizontales que se utiliza para exhibir la característica de los restaurantes. La sombra es bastante fuerte, considerando que el fondo parece ser blanco puro, pero sí me gusta. Arriba. Tenemos algún tipo de anuncio, pero fíjate lo bien que se encuentra encima de esa línea diagonal. También agradezco cómo han usado ese pequeño icono en el área de la barra de acción. Claro, es espacio desperdiciado, pero demuestra que les importa. Se trata de branding y de asegurarte de que sabes que estás en su app. Pero tú eres el hígado. En cuanto al listado en sí, me encanta cómo se talla el tiempo de entrega en la foto. Agradezco la jerarquía en el listado. Creo que eso está muy bien ejecutado. Tenemos el título en negrita, varias etiquetas en un color lavado más pequeño. El tiempo de entrega se reserva y se le ha dado bastantes bienes raíces por su importancia. Y por último, tenemos el sistema de calificación y porcentajes. Pero lo que realmente me encanta es este chapoteo de color para hacer el emoji. Ahora bien, otra forma de traducir el principio jerárquico dentro del listado es esta. Ya sabes, donde la suerte, puedes escanear fácilmente diversas áreas y saber lo que es importante y lo que no. Ese es el principio jerárquico. El contenido se distingue fácilmente y esto lo convierte en una gran experiencia. Se siente sin esfuerzo. Ahora bien, si volvemos a vivir, podemos ver que todo está básicamente agrupado. Esto se siente abarrotado y básicamente soso, aburrido sin ningún gusto, pesar de que presenta casi la misma cantidad de elementos. Ahora, volviendo al hígado, sin embargo, esta aplicación no parece seguir las pautas de diseño de materiales. En la parte superior, no hay sistema de tabulación, ni esto es irregular la barra de acción. En cambio llegamos a los desplegables, que son muy poco comunes. En la actualización más reciente. Se deshicieron de ellos y estoy feliz de que hayan hecho ese cambio. El tamaño de las tarjetas es bastante generoso. Bueno eso mejora el impacto de la app. Solo puedes caber a punto de restaurantes dentro de una pantalla. Y el segundo está un poco cortado. Ahora bien, para la pequeña ciudad, esto tiene sentido, ¿verdad? Pero para los más grandes con montones de restaurantes, va a ser bastante difícil. Básicamente después de los seis o siete anuncios, simplemente te vas a aburrir. Ahora, las fotos causan una gran impresión y definitivamente es la brecha más parecida del grupo. Pero me encantaría ver un poco de uso de este espacio. Veremos lo que es posible cuando empecemos a diseñar. También vemos una barra inferior, que incluye la función de búsqueda. Ahora bien, bastante bien. Lo interesante es la combinación de colores, blanco y Thiel, nada más. El contenido se deja el brillo, probablemente porque las imágenes son bastante pesadas en detalle. Eso es bastante inteligente. Y probablemente vamos a hacer lo mismo en nuestro propio diseño. Más aún considerando el hecho de que mayoría de los restaurantes no tienen buenas fotos de la comida. En la mayoría de los casos, las fotos son oscuras, las placas están ocupadas y los colores no suelen ser halagadores. De nuevo, se puede ver el vivo para eso. La diferencia es noche y día. De vuelta a la pantalla inicial, tenemos un botón de acción flotante extendido que te ayuda a llenar allí. Esto está bien ejecutado, pero una vez que lo tocas, vas a ver otro letrero que lleva esta aplicación a un nueve de cada diez, si no más, magníficos íconos que están en sintonía con la vibra abs. Obtenemos hermosos íconos que están en sintonía con las aplicaciones de vibe. Bonitas imágenes debajo con gran contraste para el texto. Borrar el botón de llamada a la acción. Hay poco que decir en el lado negativo. entrar en el listado, vemos la foto de los restaurantes en la parte superior y todos los elementos del menú están en la lista desplazable. No hay sistema de tabuladores del que hablar. Las fuentes utilizadas son fáciles a la vista, entonces puedes decir fácilmente qué es qué. No me gusta. El hecho de que no haya miniaturas para los platillos, sobre todo porque hay suficiente espacio en el lado izquierdo. Por otro lado, sí lo hace bastante aireado. Se siente como que tiene suficiente sala de lectura. Bien, ahora agreguemos algo a nuestro carrito y veamos cómo va eso. Bien, tenemos una barra pegajosa en la parte inferior que nos muestra la canasta actual, y está separada por una sombra en la parte superior. Es curioso que el botón también tenga sombra. No estoy seguro de estar de acuerdo con eso. En fin, la caja es otro punto fuerte. Todo es fácil de seguir y han usado estas cartas de manera inteligente, un poco pesadas con ese trazo, pero aun así un buen trabajo. En general, la aplicación se ve encantadora y eso se debe a que sus elementos son los bien espaciados. Sus fuentes son agradables e interesantes y el contenido se deja brillar. Un fuerte nueve de cada diez. Pasemos a Food Panda para ver otro bulto sobre el mismo tema. Aquí, inmediatamente reconozco el mismo estilo de un color, y esto se usa para llamar la atención del usuario. Si puedes tocarlo, entonces es rosa barra roja. Sí me gusta este estilo porque esto guía al usuario sin hacerle pensar. La primera impresión es que esta es la app mejor diseñada del lote, 9.5 de cada diez. La principal diferencia entre ésta y el nivel es la atmósfera. Eso es un poco más amigable, aunque esto es un poco más profesional, sin embargo, centrémonos en el listado. Están pasando más debajo de la foto. Entonces esto sí se ve un poco más ocupado que el hígado a las fuentes utilizadas son, bien, pero carecían ese nodo especial que los distingue. Volvamos rápidamente al hígado hacer y revisar el tiempo de entrega. Observe cómo se destacan estos números, sobre todo los números. Idealmente, ese es el tipo de personalidad que busco en mis tipos de letra. Food Panda también tiene un botón de acción flotante, probablemente para ayudarte a checar. Ya está bastante claro. La barra de acción es un elemento básico de cómo se debe hacer. Está bien definido, tiene una jerarquía adecuada, bien espaciada. Si hay algo que agregaría es el hecho de que no me hubiera gustado que el icono de búsqueda se dejara alineado con el menú de hamburguesas. Eso lo habría hecho perfecto. Aún así, en general, esta es una de las mejores que he visto hasta ahora. Pasemos a la página de listado de restaurantes. Aquí obtenemos pestañas que han colocado debajo de la foto principal de los restaurantes. Esto se ve bien. Es funcional, pero no estoy enamorada del sistema estelar como se muestra aquí. Creo que se pierde. En cuanto a los elementos reales, esa relación de especificaciones es un poco impar. Las fotos son demasiado altas y eso va a ser un problema para la mayoría de los restaurantes. Cuando esas otras antenas miniaturas. Es otra cosa aunque se podría argumentar que esto es para avionar dos básicos. Vamos a tener que encontrar una buena solución en nuestro diseño cuando se trata de ello, ninguna de estas opciones funciona para mí. Entregar que fue simplemente abandonar la idea de mostrar una foto del platillo. Pero en otros Wireframe, sí lo vemos como un requisito. En general. Sin embargo, esto está atado o tal vez un poco detrás del hígado. Vamos a llamarlo el nueve, tal vez un 8.5. Ahora bien, la cosa es que podría continuar fácilmente, pero quiero que explores algunas de estas aplicaciones tú mismo o encuentres otras similares. El objetivo es entender cómo intentaron resolver diversos problemas. Quiero que me digas lo que te gusta y lo que no te gusta de ellos. Para resumir esto, las conclusiones de esta conferencia son las siguientes. Deberíamos usar un solo color hermoso en nuestra aplicación y dejar que el contenido brille. Tenemos que tener cuidado con la relación de aspecto de las fotos en el listado del restaurante. Necesitamos una fuente de gran apariencia que agregue algo al diseño, algo con personalidad. Por último, debemos hacer nuestro mejor esfuerzo para incluir al menos dos restaurantes completos en la pantalla de listado inicial. Como consejo, cuantas más aplicaciones veas, más inflamación vas a tener. Este proceso debería llevarte al menos 2 h. Pero por consideraciones de tiempo, tuve que acortarlo. Por favor. No tengas miedo de ser despiadado en tus comentarios. Tu objetivo es separar cada componente y ver si es algo que debes evitar. O por el contrario, quizá utilícelo como inspiración. Toma muchas capturas de pantalla y póngalas al lado de la otra para que puedas ir y venir fácilmente. Bien, continuemos. 12. Cree el diseño para la primera pantalla: Bienvenida de nuevo. ¿Exploraste la competencia por ti mismo? Ojalá hayas pasado por varios laboratorios en tu propio teléfono, o al menos has mirado las capturas de pantalla que adjunté a la conferencia anterior. Ahora, es el momento de iniciar Figma y crear un nuevo proyecto haciendo clic aquí, vamos a tomar esta baja, pero si aún te resulta difícil, sí tengo un curso más amigable para principiantes sobre Figma. Si no puedes seguir el ritmo de tu segunda visualización, podría ser mejor ver ese curso. Bien, vamos a dar clic aquí donde dice Sin título y renombrémosle el nombre para agregar entrega. Ahora, consigue la Herramienta Marco, tecla de acceso rápido f, para que podamos configurar la primera pantalla. Ahora, los ajustes se basan en el diseño de materiales a la entrada, para mantener las cosas súper simples, ir con 720 por 12, 80, ya sean estos valores de, bueno, básicamente estoy duplicando los valores de los antiguos Samsung Galaxy S Entonces. Ahora, ¿por qué doblete? Por lo que quedará mejor cuando lo revises, cuando lo envíes a tu cliente, tu cliente, al otro código ahí. Para que puedas ver todo bonito y crujiente sin conseguir gafas doradas. Entonces esa es la única razón por la que estamos duplicando get. Realmente no importa para el codificador o para el cliente. Es sólo una cosa visual, ¿verdad? El proceso de codificación no se ve afectado de ninguna manera. Más sobre eso más adelante, pero créeme, no afecta nada. Es solo una preferencia visual para 2020, 320-20-4720 por 12 80 está totalmente bien. A continuación, busca un marco más amplio que esté adjunto al curso y arrástralo, importa ese control Shift K o lo que quieras hacer. Colóquelo a un lado de la primera pantalla. Idealmente, siempre deberías tener esto mostrado en la segunda pantalla, pero voy a guardarlo aquí durante nuestro proceso paso a paso. Bien, Entonces, ¿cuál es el objetivo? Bueno, queremos configurar nuestro layout, la base de nuestro proyecto sin detalles. Repito sin detalles. Queremos rectángulos y capas de textos en su forma más simple después de las primeras pantallas, luego comenzaremos a experimentar con varios colores, fuentes y varios detalles. Así que comencemos con el primero que vamos a necesitar el logo de las aplicaciones. Y claro, está apegado a los Gore. El icono no está estilizado de ninguna manera, ni tiene ningún texto. Entonces esto nos va a ayudar a mantenerlo en línea con el resto del diseño. Entonces eso es algo bueno. Voy a centrarlo y colocarlo en ninguna posición particular en la parte superior de la pantalla. A continuación, vamos a agregar el campo de ubicación para hacer un rectángulo. Tecla de acceso rápido, haga clic y arrastre. Cuando busquemos los tamaños específicos, use el panel de propiedades en el lado derecho. Para éste, digamos 600 por el ancho, algo así. Esa es la W aquí. Y para la altura, vamos con 80 pixeles, algo así, estimaciones aproximadas. Entonces este no es el tamaño final porque eso viene en la etapa de estilismo más adelante. Bien, siempre voy a centrar todo en el marco al comando alinear centros horizontales. Esto es justo aquí. Por favor, acostúmbrate. Y estos otros de aquí, estos chicos son tus nuevos mejores amigos. vamos a usar mucho casi cada vez que hagamos algo dentro del marco. Así que recuerda utilizarlos. Haz del rectángulo un gris muy claro usando el área de relleno en el panel de propiedades. Queremos un gran contraste para la capa de texto. Si estás usando una computadora portátil o una de baja resolución, recuerda que este panel es desplazable. Bien, obtenga la tecla de acceso rápido de la herramienta tipo D, y escriba ingrese su ubicación. Entonces eso es ingresar tu ubicación. Ahora, ¿podríamos usar funciones más avanzadas que figma tiene para ofrecer? Claro, totalmente. Pero nuevamente, este no es el escenario adecuado para esas cosas elegantes. Vamos a mantenerlo fuente básica, el tamaño. Pongámoslo a 20 y centrémoslo dentro de este campo. Básicamente la idea es que realmente estamos haciendo el wireframe, pero en realidad podemos editar todos esos campos. En el lado derecho. Agreguemos otro texto que diga GPS. Utilice el Control D para crear un duplicado. Colóquelo en el lado derecho. Ahora bien, ¿por qué no un icono? Porque no queremos romper este flujo. Un icono es un pequeño detalle de diseño. Y eso no es en lo que estamos trabajando ahora mismo. Bien, necesitamos un botón de enviar, así que escribamos solo ese envío. Usemos Shift a para agregar un diseño automático esta vez alrededor de al menos una característica elegante, ¿verdad? Voy a habilitar cualquier relleno gris. Ahora, podría preguntar, ¿ podríamos haber usado el marco para el campo de ubicación en el diseño automático? Sí, claro. Pero ahí hay un poco más que desempacar. Prefiero mantenerlo como un rectángulo estándar para que podamos enfocarnos en lo general para el tamaño del botón. Cambiemos este campo a 90. Esto lo hará mucho más amplio. Y para la altura 20, cuando termines con eso, centraste dentro de la pantalla. Puedo ver que saltar este paso es el siguiente, pero podemos tener una capa de texto simple para eso. Recuerda presionar Escape para terminar de editar tu capa de texto, este elemento no obtendrá un botón, no obtendrá un rectángulo porque tenemos una computadora portátil además necesitamos otra para la cuenta de Creighton. Vaya por encima del botón de enviar, mantenga presionada la tecla Alt y arrastre la copia. Sin embargo, una cosa, por favor busque este símbolo en su cursor, no este. Esto no va a ayudar. Entonces esto es lo que estás buscando. Ahora, arrástralo hacia abajo y cambia el texto para crear un inicio de sesión de barra diagonal de cuenta. Entonces eso es crear un inicio de sesión de barra de cuenta. Y como de costumbre, vas a tener que seleccionar el marco y centrarlo, no los textos. Por cierto, el texto es parte del marco y ya está centrado. No. En cambio, quieres que este marco se centre dentro del marco grande, que normalmente llamaré pantalla. Ahora bien, si no lo consigues al 100 por ciento, no te preocupes, está bien. El asunto es bastante sencillo. Si controla el clic en la capa, no podrá utilizar estas herramientas de alineación. Entonces esa es una clara señal de que no seleccionaste el marco. Pero ahora cuando hago esto, están iluminados. Podemos utilizarlos. Impresionante. Entonces, en general, esta es nuestra primera pantalla manejada. Continuemos después de un rápido descanso. 13. Establece la base para la pantalla de inicio: Bienvenida de nuevo. Puedes llamar a la segunda pantalla, la pantalla de inicio, porque es lo que normalmente obtienes cuando abres la app, suponiendo que tu registro luego alejes manteniendo presionado Control y usando el scroll del mouse, luego haz espacio y duplica toda esta pantalla. Si tiene espacio, Figma lo colocará automáticamente en el lado derecho cuando uses control the awesome. Ahora borra todo lo que hay dentro de eso excepto el campo de ubicación. Esta es una buena oportunidad para recordar nuestras proporciones. Por lo que la barra de estado, según Google Material Design tiene que ser 720 por 48. Así que consigue la herramienta rectángulo y agréguala. Nuevamente, 720 es el ancho estándar duplicado, y 48 proviene de la guía oficial. Son 24 dB, pero de nuevo, lo hemos duplicado, así que ahí es donde tenemos ¿qué? Vamos a dejarla, en blanco, rectángulos de cualquier color al azar, y colocarla correctamente en la parte superior. Para el campo de ubicación, podemos usar este para crear la barra de acciones, arrastrarla hacia arriba junto con esas capas de texto, y vamos a redimensionarla a 720, supuesto, por 112. Entonces eso son 112 pixeles. Por favor, asegúrate de cambiar el color si es necesario. Queremos verlas como dos cosas separadas. A pesar de que al final podríamos tenerlos del mismo color, sí los queremos como dos separados en este punto. Bien, ahora manejemos las capas de texto. Entonces vamos a necesitar que la ciudad filtre y busque. Así que la ciudad filtra y busca. El primero es para el lado izquierdo, mientras que los otros dos para el lado derecho. Esta es una situación en la que estás, la velocidad es bastante importante. Mira, aquí no está pasando nada demasiado difícil, pero sí lleva tiempo. Entonces por eso hay que practicar y tomar estos pasos en serio. No puedes hacer cosas avanzadas si no dominas lo básico como estos de aquí. Para el menú desplegable, usemos la herramienta polígono. Uno de los pocos casos realmente puedes ponerlo a trabajar, mantener el turno y comenzar a arrastrar. Ahora, eso te va a dar un rectángulo perfecto manteniendo presionada Mayús. Después mueve tu cursor hacia un lado para girarlo. Básicamente queremos el punto a la baja. No tengo ningún tamaño en particular en mente, simplemente bastante pequeño. Ahora k, Luce bien. Ahora se pone interesante. Recuerda que queremos exhibir tantos restaurantes como sea posible sin apretar y abarrotar todos los elementos. Entonces comencemos con un rectángulo que sea de 600 por 400 píxeles. Ya que esto cubrirá la mayor parte del ancho de la pantalla. Y también vamos a tener una relación de aspecto decente para empezar. Ahora, el tamaño real se va a configurar más tarde. Bien, colóquelo justo debajo de la barra de acción. Por el contenido. Vamos a usar uno falso, pero no Lorem Ipsum. Entonces ese es el texto latino. Lorem ipsum es solo relleno de textos latinos. Entonces me voy a plantear algo mi cuenta para el título, vamos con cualquier postre que tenga al lado. Juguemos algo como esto. Tiempo de entrega, lo que sea, 30 min. ¿Correcto? En cuanto a la categoría, el escrito dice que es doble. Entonces es uno para el tipo de comida y luego otro para el tipo de cocina. No estoy seguro de si eso tiene sentido para mí, pero es lo que es. Entonces el primero debería ser Desert y el segundo internacional, supongo. De nuevo, realmente no importa. Sólo queremos exponer alguna información. Entonces tenemos algo con lo que trabajar para la calificación. Vamos con lo que sea, 92 por ciento de 24 votos. Entonces esto va a cubrir todos los elementos según el wireframe y brief. Así que por favor seleccione todo así y vea si podemos caber al menos dos de ellos en una sola pantalla. Recuerda, ese es un requisito importante. Y de hecho en este caso podemos caber dos restaurantes enteros, aunque esto es solo un borrador aproximado. nada al respecto, hay precisa. Entonces tenemos que tomarlo con un grano de sal. Ahora, vamos a resumirlo. Hasta ahora hemos recreado las dos primeras pantallas a partir del wireframe con el propósito de tener algo con lo que trabajar. En las próximas conferencias, hemos hablado de ser conscientes del impacto de nuestras decisiones. Específicamente sobre cómo se verá toda la aplicación cuando vamos a tener contenedores de pantallas con un fuerte fuera de la puerta. Te voy a ver en un segundo. 14. Sketch out la pantalla de detalles del restaurante: Bienvenido de nuevo. Tenemos que pasar a la pantalla de detalles de restaurantes etiquetada con el número tres, donde se enumeran todos los platillos. Entonces, sin más preámbulos, pongámonos a trabajar. Así que copia los proyectó, pero hazlo. Y comencemos con un enfoque de arriba a abajo reemplazando el título por cualquier nombre de restaurante aleatorio. Vamos a llamarlo principalmente a la entrega de pizza. Eso suena bastante italiano, ¿verdad? La mayoría de la entrega de pizza, el desplegable y el Filtro tienen que ser eliminados, pero nos quedaremos con la última y le cambiaremos el nombre. Esto debería decir inflamación. Esto va a ser un ícono también, pero eso es más en una etapa posterior. Cuando hagas clic en él, obtendrás la pantalla de dirección de restaurantes 15 y las vistas de esa pantalla 16. Entonces eso es lo que va a pasar cuando hagas clic en la inflamación. Como dije, no necesitamos un icono en estos momentos porque todavía estamos en las primeras etapas. Bien, si echamos un vistazo al wireframe, podemos ver que tenemos algunas pestañas, pero no está claro si estas son las fijas o de desplazables. Vamos a empezar con una versión fija y voy a usar algo como el desayuno, almuerzo y la cena como mis artículos principales. Ahora bien, esto significa que el diseño de la pestaña, por lo que va a ser necesario 240 rectángulo ancho para el elemento activo porque de nuevo, eso es dos por t veces 3720. Bien, copiemos la barra de acción y bajemos su tamaño a 96 píxeles. Por supuesto, por favor cambie su color para que podamos ver lo que está pasando ahora de vuelta a la talla por el momento. Entonces 96 es lo suficientemente grande desde el punto de vista de la usabilidad, pero lo suficientemente pequeño para que no consuma demasiado espacio. Este es también el valor recomendado y la guía oficial, 48 dB. Eliminemos los listados debajo porque no los necesitamos. Crearemos la primera capa de texto después de haber establecido nuestro rectángulo que nos muestra el elemento de menú activo. Así que toma la herramienta rectángulo, haz clic en una entrada a 40 por cuatro píxeles. Utilice el panel de propiedades para eso. Entonces esto se puede dejar en blanco por ahora, totalmente negro, pero asegúrate de colocarlo correctamente en el borde inferior del fondo de las pestañas en el lado izquierdo, claro. Ahora, debido a que esta es una pestaña fija, vamos a tener que tener en los textos visuales capas. Entonces ni uno solo con tres, sino los individuales, y el primero va a ser el desayuno. Debe escribirse en la fuente por defecto. Realmente no importa cómo se vea. Pero si es necesario, puedes cambiar el color para que veas lo que está pasando. Ahora podemos alinearlo rápidamente seleccionándolo junto a esta capa debajo de esa. Así que eso maneja la alineación horizontal. Así como así. El vertical deselecciona y luego toma la capa de texto con el fondo principal y luego usa el comando de alineación vertical, así como así. Entonces esto nos va a dar un resultado perfecto de pixel, aunque realmente no puedas verlo. Ahora la cosa es que nunca desfasé la capa de texto debido a esta cuarta capa de píxeles de aquí mismo, eso estropearía bastante las cosas, así que por favor nunca lo hagas. Bien, Ahora, los otros artículos van a ser un pedazo de pastel, duplicar con Alt y Shift, y luego volver a etiquetar como centro de almuerzo dentro de la pantalla con alinear los centros horizontales. Impresionante. Por último, para la cena, tenemos que repetir el proceso, pero esto es lo que vamos a hacer. Ahora vamos a mover temporalmente la pestaña activa hacia la derecha. Vamos a alinearlo así. Entonces aquí es donde el marco realmente viene muy bien. Podemos mover rápidamente a este tipo sin ningún problema, sin tener que seleccionar nada más. Bien, ahora obviamente podemos moverlo y luego alinear esa suavidad sedosa. Hasta el momento. Obviamente recuerde trabajar en su segunda visualización para obtener la mejor experiencia de aprendizaje. Hay mucho que hacer. Y si no mantenemos una base decente, esto va a ser medidores. Bien, ponlo de nuevo en el lado izquierdo y luego ya podemos continuar. Volvamos a echar un vistazo al wireframe. Tenga en cuenta que este no es el fin de todo, sea todo de nuestro diseño. Podemos experimentar con varios registros si tenemos alguna idea. Pero por ahora vamos a mantenerlo sencillo en el primer intento. En esta pantalla específica, eso significa un diseño de una tarjeta. Si no estamos contentos con ello, podemos probar un enfoque diferente. Aunque. Realmente no me gustó el diseño de dos columnas que vimos en el video anterior. Ahora tenemos que crear una carpeta de imágenes. Empecemos con eso. Un soporte de imagen o una miniatura para cada elemento. Creo que esto tiene que ser una forma algo cuadrada, probablemente un poco en el lado ancho. Entonces comencemos con un rectángulo regular con el tamaño de, digamos 225 por 1AD. Como dije, no es cuadrado, pero no es demasiado alto porque vimos, no se ve tan bien. Colócala a 30 pixeles de los dabs. Lo principal con esta imagen es la relación de aspecto. No uses algo al extremo que obligue a los restaurantes a darte fotos súper anchas o súper altas. Eso va a ser un problema. Recuerda, aunque el hígado, y el panda de alimentos no tenían un buen sistema en su lugar. Espera el título y la descripción. Tengo algo preparado en un bloc de notas. El título puede ser una bolsa de aire. Bueno, por ahora, de nuevo, realmente no importa, pero usar algo auténtico tiene un poco más de sentido. La descripción debe ser una capa de texto de párrafo. Así que haz clic y arrastra. Porque es posible que queramos cambiar el contenido rápidamente. Las líneas deberían ser suficientes aunque podríamos reutilizarlas para solo hacer. Veremos si quieres usar texto ficticio. Te recomiendo lipson.com. Este es el mejor lugar para ello. Se trata de textos latinos falsos que apenas llenan esta área. Bien. Volviendo al listado, necesitamos tener un precio, digamos 14 dólares. Esta va a ser la tercera línea de este listado. Entonces tenemos descripción del título y luego precio. Al lado del precio, pongamos el peso del producto, que se menciona en el brief. Así que vamos a escribir los 150 g, bien, y justo al lado, vamos a necesitar un texto Agregar al carrito. Aunque probablemente esto va a ser un botón, tal vez un icono. Bien, dame un segundo para arreglar todo. A mí me gusta alinear todo con precisión, aunque no es absolutamente necesario eso en este momento. Idealmente queremos el camino imaginario claro. Lo que va a hacer el usuario es mirar la miniatura que el precio, luego el título, que el peso del producto, después va a hacer clic en Agregar al carrito. Probablemente algo en esa línea. Entonces vamos a tratar de que eso suceda con el tamaño y el color. A pesar de que las cosas están más o menos agrupadas las juntas. Envolvamos las cosas con un divisor. Podemos usar la tecla de acceso rápido de la herramienta de línea L. El ancho debe ser 656. Vas a escuchar bastante este valor. Y voy a explicar por qué ese es el caso un poco más adelante. La altura a píxeles. Esto se tiene que colocar a 30 pixeles de la foto, de la miniatura. Ok, esto está hecho. Entonces vamos a agruparlo y vamos a hacer muchas copias. La idea es poblar toda la pantalla con clones para ver dónde estamos. Tenemos una mejor idea de las cosas con solo mirar para ver cuántos podemos caber. Lo ideal es que lo queremos subproductos, pero con conseguir unos cuatro y un poco, ahora, puedo vivir con eso. Además, podríamos ganar más espacio cuando empecemos a refinar el diseño. Mientras tanto, tomemos un descanso rápido. Gracias. 15. Conceptos de diseño para la pantalla de ubicación (1): Bienvenido de nuevo. Es hora de que se agriete sin el diseño de app de entrega de comida a domicilio, tenemos un par de pantallas sólidas que están esperando algo de atención. Entonces comencemos con la pantalla de ubicación etiquetada como número uno en el wireframe. Y la primera idea que quiero probar como una imagen de fondo completa, que es una opción popular en este nicho. Para encontrar fotos geniales, totalmente gratis, usa unsplash.com. Si el proyecto tiene un presupuesto decente, también puedes usar Adobe Stock, lo cual es absolutamente fantástico. Sin embargo, sigamos con el libre. Aquí. Estamos buscando la comida y vamos a descargar todo lo que chispea o interese. Idealmente, una imagen de vista superior probablemente va a quedar mejor, pero voy a mantener una mente abierta al respecto. Una vez que vea algo que es interesante, voy a presionar el botón Descargar. Entonces el proceso es sencillo. Elige varias fotos y guárdalas en tu computadora. Ya tengo algunos seleccionados, así que no voy a perder tu tiempo, pero te prometo que los elegí exactamente como te dije. Los etiqueté 1-6, para que podamos trabajar juntos fácilmente de nuevo en su segunda visualización aunque. Ahora podrías arrastrarlos a Figma, pero va a haber enormes, esa no es una buena forma de trabajar. Entonces esto es lo que propongo. Agarra la herramienta rectángulo y agrega una al marco, tamaño aleatorio, nada en particular. Entonces desde el panel de propiedades, hazlo tan grande como el marco, 720 por 12 80, izquierda y arriba lo alinean para que cubra todo. Ahora, eso es porque se asienta encima de todas las demás capas. Los efectos que van al panel Capas y encuentran que está resaltado de manera que ayuda a hacer clic en arrastrar y moverlo hacia abajo en la última posición. Vamos a usar este rectángulo para colocar nuestras imágenes dentro de eso. Para ello, vamos a usar Control Shift K. Pero si no te gusta esa tecla de acceso rápido, solo haz clic aquí. Esto es justo aquí, el control de Place Image cambiará la puerta. Esto va a abrir una ventana del navegador y podrás buscar las fotos descargadas. Siempre los guardo en mi escritorio para poder encontrarlos rápidamente. Bien, probemos imagen numerada uno. Aquí es donde la magia comienza a suceder con la búsqueda de una imagen interesante que proporcione un buen contraste para el logotipo y todas las demás acciones que están disponibles en la pantalla. Así que recuerda que la palabra muestra varios platos de espaguetis y unas copas de vino. Entonces está en línea con la aplicación, con la vibra. Ahora bien, la primera pregunta es, ¿sería el logotipo blanco o un color sólido? Si vamos por el blanco, vamos a necesitar oscurecer esta imagen. Si vamos a hacer que sea un color sólido que el fondo, tiene que ser lo más simple posible. Entonces veamos qué es qué. Primero vamos a hacer una superposición de color, por así decirlo, por la opacidad, supongo que 50% más o menos, eso debería darnos un contraste decente. Recuerda que la idea es poner a prueba las cosas, no tener una suerte perfecta. Ahora hagamos que el logo sea blanco. Este es otro PNG, más bien es un SVG. En definitiva, esto significa que podemos redimensionarlo sin perder calidad alguna. Además podemos cambiar el relleno directamente desde el panel Propiedades. Si esto fuera un PNG, no podríamos hacer eso. Así que eso es lindo. Bien, esto es bastante bueno. Ahora lo que la mayoría de los principiantes no entienden es que logotipos no necesitan golpearte en la cara como una bolsa de ladrillos. Solo piensa en lo que el hígado que hicimos, aunque en la pantalla de listado inicial, usan la versión mini de su logotipo. Bien, así que volvamos a nuestro diseño. Un fondo oscuro tiene sentido, sobre todo porque el campo de texto probablemente va a ser blanco. Eso tiene sentido. Entonces hagamos que eso suceda. Vamos a aumentar el radio de coordenadas de rectángulos a cinco píxeles para que se vea un poco mejor, un poco más cuadrado moderno las coordenadas son muy 2005. Ahora para los botones, vamos a hacer los mismos cinco píxeles, pero vamos a hacerlos tal vez de un verde brillante, algo así. Sólo para ver cómo se vería el llamado a la acción irregular. Tómate tu tiempo con él e intenta cortar algunas coordenadas muestreando colores aquí y allá, todo usando el panel de propiedades en varias capas. La idea es ser lo más rápido posible, bien, con los nuevos colores, tenemos que cambiar las capas de texto a blanco. Y por favor no te olvides de saltarte este paso. Está ahí, pero quizá no lo veas muy bien. Entonces cambia de color también, tal vez su posición o ambas. Y que la parte inferior de la pantalla, podría verse un poco mejor. Entonces probemos eso. Entonces la idea es no podemos juzgar esta suerte porque tenemos que compararla con otra cosa. Sin mencionar que estos son solo trazos amplios sin hacer detalles finos todavía, solo movimientos rápidos. Entonces estamos buscando la dirección general. Y una vez que tenemos algo en mente, después de la, vemos que esto se ve bastante bien, podemos volver y refinarlo a la perfección. Así que el logotipo podría necesitar ser levantado un poco, pero no demasiado para que toque el borde superior. Coge la Herramienta Tipo y escribamos el directo justo debajo de la Fed para que podamos tener una mejor idea de las cosas para el formateo. Mantén la fuente estándar, pero hazla en negrita. A ver, 60. Así que bastante bolsa. Bien, esto puede funcionar, pero vamos a centrarlo y probemos algunas otras imágenes en esta versión. Recuerda que la tecla de acceso rápido es Control Shift gay. Pero primero es posible que desee seleccionar el rectángulo inferior, mantener el control y hacer clic en él. Así como así. Ahora podemos usar tecla Control Mayús para seleccionar la segunda imagen. Bien, vamos a poner la segunda foto y vas a notar que la superposición negra va a desaparecer. No se preocupe. Todavía podemos tener una idea de lo que está pasando. Podemos volver a ponerlo en el momento posterior. Así que la foto número dos, está un poco demasiado vacía para funcionar. Necesitamos algo rico, extravagante e interesante para mirar. Esta brecha en la parte inferior izquierda no va a volar, no sirve de nada. Entonces pasemos a la foto número tres. Bien, vamos a echar un vistazo. Esto es lo que algunos amigos comen juntos. Entonces ese es un concepto bastante bueno. Pero la relación de aspecto no es tan buena. Entonces perdemos bastante de la foto. No está tan claro lo que está pasando. Podría funcionar, pero no estoy seguro. Probemos la imagen número cuatro. Entonces veamos qué es qué. Esto definitivamente funciona. Y creo que marca todas las casillas correctas. Creo que es una buena opción y de inmediato destaca. Tiene una vista superior. Cuenta con interesante comida multicolor. La mesa de madera tiene una agradable sensación acogedora. Bastante bien, bastante bien. Pero no paremos todavía. Sigamos adelante. Entonces foto número cinco. Bien. Esto funciona bien. De nuevo, es bastante bueno, pero creo que el anterior es un poco mejor. El principal problema aquí es la comida mostrada. Es una ensalada de huevo, donde mucha buena audiencia espera comida de buena calidad. No estamos hablando de arriba con gerencia no hablaría buena comida. Entonces esta ensalada de huevo no es el look adecuado para eso. Hamburguesas más allá de las cosas así creo que encajan un poco mejor. A continuación, imagen número seis. Esto tiene una mirada rica, abundante, pero no estoy enamorada de la comida en sí. Está demasiado enfocado en los postres. Sí vemos algunos huevos en la parte superior, pero parece que se inclina más hacia los desiertos, más hacia los dulces. Podemos mantenerlo como respaldo pero opción para que se vea mejor hasta el momento. Así que vamos a traerlo de vuelta. Bien, cuando estés listo, por favor agrega la superposición negra golpeando el símbolo más. Nuevamente, 50 por ciento. Creo que es bastante bueno. Tenemos un contraste bastante agradable aquí. Ahora bien, esto plantea la pregunta, ¿qué más podríamos hacer aquí? Bueno, la única idea que me viene a la mente es un fondo blanco puro o tal vez un patrón sutil. Ese es quizás un color blanquecino, tal vez un gris claro. Ahora, no voy a hacer eso porque las aplicaciones que son abundantes y blancas, suelo de gama alta. Piensa en el restaurante estrella Michelin con un gran nombre de moda, los gustos del producto. Esas son las marcas que pueden lucir un diseño minimalista con un montón de blanco y solo un toque de color. En conclusión, ahora mismo vamos a seguir con esta foto conceptual número cuatro luego la superposición del 50 por ciento, en base a lo que va a pasar en las próximas pantallas, podemos volver y refinar esto diseño. Te voy a ver en un segundo. 16. Conceptos de diseño para la lista de restaurantes (2): Bienvenida de nuevo. Sigamos con la pantalla de listado de restaurantes, que es lo segundo que la usan, Va a ver que esta es una de las pantallas más importantes de la app. Entonces sí necesitamos experimentar con diferentes looks. Desde el primer momento. Sí quiero ver una versión sin fondo, así de blanco puro y otra con un gris claro que brinde buen contraste a nuestro listado. me ocurrieron esas ideas investigando la competencia. Y estos son dos estilos muy comunes. Entonces básicamente blanco y gris claro. Empecemos con contenido real. He preparado esta imagen de huevos de banco para la imagen de portada de restaurantes. Voy a colocarlo dentro este rectángulo usando Control Shift K, pero necesitamos hablar números aquí. Los lineamientos oficiales de diseño de materiales dicen que necesitamos 16 dB a cada lado, lo que significa 32 Pexels en nuestro caso. Hagamos los cálculos. 720, el ancho del marco -64, los dos a cada lado, eso significa 656 píxeles. Entonces estos son nuestros rectángulos con mismo que nuestros divisores después de la UE, los tamaños del panel de propiedades por favor centren una vez más, ese siempre es un paso muy necesario. Probablemente se verá mejor con coordenadas ligeramente redondeadas. Entonces vamos con cinco píxeles para el radio de coordenadas. Vamos a darle a Shift R, para que podamos agregar algunas guías. Estos no son absolutamente necesarios, pero creo que podrían ayudar. Ahora podemos arrastrar guías desde el lado izquierdo de la pantalla. Así como así. Mientras estamos en ello, eliminemos la segunda entrada. No necesitamos eso. Bien, entonces hablemos de jerarquía. Tenemos bastantes artículos aquí. Y la pregunta es, ¿cuál es la más importante? Ahora, voy a tener que decir el título, pero muy cerca de él viene la calificación ya que ese es el principal valor de la app. A continuación viene el tiempo de entrega, que seguramente es un factor decisivo. Y finalmente, en el cuarto lugar, probablemente vamos a tener las etiquetas relacionadas con el tipo de comida. Por lo que estos se pueden utilizar rápidamente para filtrar tipos de alimentos y cocinas similares. El usuario puede tocarlos en cualquiera de ellos, y la lista probablemente se recargaría con ese filtro en particular aplicado al hablar de la importancia porque así es como se deben diseñar estos elementos y colocado, eso realmente lo impacta. Entonces esa es la jerarquía. Entonces para la primera versión, y quería recalcar primera versión, voy a colocar el título y la calificación en la misma línea por lo que acabamos de discutir, por su importancia. Las etiquetas pueden ocupar la segunda fila. Y me gustaría intentar colocar el tiempo de entrega en algún lugar sobre la foto similar a lo que vimos en la app de comida de Bandar. Vamos a mover todo este elemento 32 píxeles de la barra de acción también. Eso es si aún no lo has hecho. Ahora, siempre que sea posible apuntar a la simetría, solo hace que el diseño se vea mucho más pulido. Clientes, nunca te voy a decir, Oye, ya sabes, la distancia a ambos lados es que los dos pero desde arriba es 44. Pero créeme, el cliente lo sabrá. Bien, ahora para el título, Hagámoslo cuatro d píxeles y en negrita, el tipo de letra predeterminado está totalmente bien con solo buscar la idea aproximada. Esta no va a ser la tipografía principal. Te puedo asegurar, solo estoy probando cosas para ver si esa importancia tiene sentido. Así que alinea el título con la guía izquierda y deja unos 20 píxeles entre éste y la imagen de portada. Para el tiempo de entrega, creo que voy a colocar un rectángulo negro en la parte superior izquierda de la imagen de portada. Su tamaño? Bueno, algo así como 140 por 50 porque no planeo mantener esta capa de texto tal como está. Es demasiado ancho, demasiado largo. Entonces este es un lugar donde podemos cambiar las cosas para mejorar un poco nuestras vidas. Voy a acortarlo a 30 Min de minutos. E incluso podría agregar el icono del reloj junto a él en una etapa posterior. Ahora podemos asegurarnos de que esto esté muy bien posicionado y ordenado. Necesitamos cambiar las cosas en el panel de capas para que podamos tener el orden adecuado. Pero eso es bastante fácil de hacer. Una vez que te acostumbras a Figma un poco más, puedes comenzar a jugar con las teclas de acceso rápido. Y eso te va a ayudar bastante. Por ahora. Hacerlo manualmente está totalmente bien. A continuación, bajemos la opacidad de los rectángulos para decir 30%. Esto realmente nos va a ayudar. Pero la pregunta es, si esto debe mantenerse blanco con un texto negro encima de él o viceversa. Ahora, creo que un rectángulo negro donde está un poco mejor, vamos a probarlo. Entonces vamos a cambiarlo de blanco a negro, obviamente sin borde. Y luego cambiemos a la capa de texto. Esto tiene que ser blanco, pero cambiar su manera a tal vez semi audaz, por lo que destaca un poco más. Cuando hayas terminado, selecciona ambos, aliéntalos si no lo has hecho ya horizontal y verticalmente, este artículo debe colocarse en la parte superior izquierda, derecha, Pero por qué ahí y no ¿En algún otro lugar? Bueno, he visto innumerables aplicaciones usar esta ubicación, así que sólo voy a seguir esa línea. Fácil, eso no tiene nada de fantasía. Si la mayoría de los pasos de hacerlo de esta manera, hagámoslo igual. Ahora, las etiquetas pueden permanecer como están, pero vamos a alinearlas a la izquierda con el título. Esto es bastante fácil porque tenemos esa guía para la distancia, nuevamente, 20 píxeles entre ellos. Creo que eso está totalmente bien. En realidad, vamos a hacerlos de un gris medio , algo así como 777. Ahora un código hexadecimal tiene seis caracteres, pero si rellenas los tres primeros, el programa pondrá los tres automáticamente. En cuanto a la calificación, quiero algo similar para entregar drew. Una cara sonriente está en orden. Ahora en el mejor lugar para los iconos se encuentra Lab icon.com. Pero ten en cuenta que la mayoría de los íconos necesitan una suscripción. No te voy a mostrar cómo busco la cara sonriente porque no hay nada especial, pero sí la tienes adjunta puerta. Aquí está el resultado final. Quizás quieras saber cómo elegir íconos de aspecto impresionante, pero lo veremos más adelante. Para la talla, 40 por 40 es una buena manera de ir. Normalmente iría por el tamaño más pequeño, pero es un Eigen bastante feliz. Me gusta bastante. Entonces, ¿por qué no presumirlo? Dijeron a diez pixeles del texto. Por cierto, creo que lo mejor es que hagamos el porcentaje audaz y verde porque esa es la parte más importante y el listado, vienen en ella que la línea todo amablemente. Mantén estos dos en la misma línea que el título, pero haz que el elemento toque el lado derecho. Bien, estamos haciendo un gran progreso. Pero no es nada por lo que gritar todavía. Recuerda, esta es solo la primera versión. Sin embargo, manejemos la parte superior, porque en realidad me está despidiendo. Quiero juzgar el diseño de la tarjeta sin distracciones. Y estos rectángulos grises no son de gran vista. Entonces manejemos eso en el siguiente video. 17. Establece la barra de estado y la barra de acción: Bienvenido de nuevo. Me gustó el juez del diseño en contexto. Ahora bien, ¿podríamos aislarlo todo y centrarnos en esta tarjeta, el préstamo en este listado? Claro. Eso podríamos, pero ¿por qué lo haríamos por eso quiero manejar la barra de acción y la barra de estado para poder ver todo en contexto para poder juzgar el diseño en su totalidad. La primera opción es un aspecto muy limpio. Ambos rectángulos deben ser blancos, pero tendremos que agregar la sombra paralela a la barra de acción para que no se pierda. Esto es mucho mejor que usar el trazo, así que ni siquiera lo consideres. Ahora para habilitar una sombra paralela, vaya al área de efectos y haga clic en este símbolo más. Entonces usa este ícono para cambiar el aspecto. Ahora para los ajustes 2.4, pero creo que la opacidad por defecto de 25 es un poco mucho. Vamos a bajarlo para decir 15% y ya está. Bueno para ir. Nada especial. Ahora, avanzando, nos faltan elementos importantes de la barra de estado. Entonces aquí hay un archivo que nos puede ayudar. Este recurso está adjunto y espero que lo utilicen en todos sus proyectos. La idea es esta, no hay nada especial en la barra de estado. Es básico y súper simple. No debemos desperdiciar en ningún momento donde solo están copiar-pegarlo y terminar con él. Bien, reemplacemos la capa de textos de la ciudad con San Francisco, escrita en negrita, 40 píxeles, negro puro. Este es el mito del nombre del restaurante. Debería tener el mismo aspecto. Centrarlo con barra de acción. Izquierda. Alinea eso con nuestra guía y podemos continuar. A medida que te familiarices cada vez más con Figma, te sugiero que aprendas los comandos para alinear horizontal y verticalmente. Ellos realmente ayudan. Oh, mueve el ícono desplegable a si aún no lo has hecho. Por último, por el bien del tiempo, voy a saltar adelante y voy a mostrarte los íconos que he seleccionado para este lado derecho. Estos también deberían ser de 40 píxeles. Los centraron dentro del rectángulo. Como espero que vean usar estas herramientas de alineación es como el agua potable. Tienes que hacerlo con bastante frecuencia si quieres sentirte bien. Entonces ambos íconos para los píxeles y centrados, pero ¿y entre ellos? Bueno, vamos con 40 una vez más, así que los dedos gordos no serán un problema. Los clics accidentales son bastante molestos. Ah, por cierto, nos olvidamos del menú de hamburguesas del lado izquierdo. Dame un segundo mientras me ocupo de eso. ¿Por qué se llama el menú de hamburguesas? Son tres líneas una encima de la otra. Entonces supongo que parece una hamburguesa. Ni idea. Ahora, para hacer la magia de la edición, agrega un icono encantador para ello. Todo está tomado de flap icon.com y los tienes unidos, pero por favor no los uses para tus proyectos reales. Los adjunto con fines educativos para que puedas seguirlos . Necesitarás una suscripción para usar el ícono de laboratorio para tus clientes. Ahora, voy a usar mi guía para posicionarlo correctamente y voy a dejar 30 pixeles entre ella y San Francisco. Nuevamente, asegúrese de usar alinear centros verticales en él. Podrías preguntar, ¿por qué no usé cuáles son los píxeles entre estos dos elementos para reflejar el espacio de la derecha? Y eso es porque el brief me dice que esto va a mostrar la dirección del usuario cuando haya iniciado sesión. Entonces voy a necesitar tanto espacio como sea posible. Tenemos una última cosa que necesita clasificación. La flecha desplegable debe ser redimensionada a algo así como 20 por diez. Y creo que deberíamos colocarla lo más cerca posible de la ciudad. Ahora, 30 píxeles se verían mejor, pero me voy a pegar a diez píxeles. Sí, estoy muy contento con eso. Ahora, después de que todo esté dicho y hecho, por favor seleccione todos estos elementos y céntrelos dentro de la barra de acción. Si todo está en orden, nada debe moverse. Bueno, tal vez uno o dos pixeles. ¿Verdad? Ahora bien, este es nuestro primer diseño. Seleccionemos el auto, luego haremos algunas copias. Como dije, quería juzgarlo en contexto. Entonces me gustaría ver toda la altura ocupada por los restaurantes. En general. Es un borrador rudo, pero tiene todos los elementos requeridos y podemos comenzar a jugar con ellos y llegar a por lo menos dos de las variaciones. Te voy a ver en la próxima conferencia donde vamos a hacer precisamente eso. 18. Listado de restaurantes alternativas (2): Bienvenido de nuevo. En este video, vamos a explorar varias opciones para esta tarjeta. Vamos a duplicar toda la pantalla, así que vamos a mantener las cosas bonitas y limpias. Esto también nos ayudará a comparar todas las versiones. Ahora antes de empezar, hay muchas cosas avanzadas que podemos hacer en Figma. Cosas como componentes, varianza, diseño automático que pueden darnos una flexibilidad y potencia increíbles. El tema con ellos que confuso para los principiantes. Si bien podríamos pasar unas horas hablando de ellos y haciendo varios ejercicios pequeños que retrasarían seriamente el proyecto de la aplicación. Entonces mi consejo es este. Centrémonos en los principios esenciales del diseño. Más adelante en el curso, vamos a hablar de esas características más avanzadas. Suena bien. Vamos a por ello. Bien, Lo primero que debemos probar es un fondo gris muy claro. Y en realidad he probado el color de Dribble que tiene un tinte de azul en él. Y el código de color es f, z aunque, F1, F ocho. Y es muy sutil. Tenga en cuenta que no hay ningún rectángulo establecido como fondo. Este es el color para todo el marco. El texto no se ve muy bien sobre este fondo gris. Así que vamos a crear el rectángulo base para esta tarjeta. Aquí está el proceso, seleccione la imagen haciendo clic en ella. Siguiente Mayor copia mediante el uso de Control D, D como duplicado. Muévase al panel Capas y seleccione el de abajo. Bien, Ahora aumentemos la altura a 500. Por el momento, no tiene mucho sentido . Pero aquí está la cosa. Elimine la imagen de fondo como la fallida usando el símbolo menos. Cuando eso esté hecho, podemos agregar el regular, el color de relleno, hacerlo blanco puro, claro. Y básicamente eso es todo. Ahora tenemos una tarjeta y el contraste es mucho mejor. Ahora seguro que el texto no encaja e hizo otras pocas cosas para arreglar, pero este es el proceso. Entonces nuevamente, duplica, selecciona la capa inferior, aumenta la altura, y luego juega con el color de relleno. Bien, de vuelta al trabajo. Seleccionemos la imagen y cambiemos el radio de coordenadas en la parte inferior. Anteriormente hemos utilizado este campo aquí, pero para controlar esquinas individuales, tenemos que hacer clic aquí. Mi consejo es que hagas clic en el primero y compruebes el ícono. Esto te contará la historia de lo que tu logística. En definitiva, queremos 5500. Ahora podemos reposicionar las capas de texto, seleccionar ambos elementos y moverlos 30 píxeles hacia adentro. cuanto a la distancia sobre el eje vertical, eso no importa tanto en este momento. Pero trata de colocarlos en algún lugar cerca de la mitad de esta guardia. El lado derecho, lo mismo, 30 pixeles, pero mantén esto en línea con el título nunca enviado de él. Ante esta situación, se trata de saber usar Control y Turno. Déjame aclarar las cosas. Así que mantén el control y haz clic en el título. Ahora obviamente eso está seleccionado, asumiendo que también quisiéramos agarrar desierto, tenemos que sostener Control y Mayús, verificar el panel de capas para eso. Así que recuerda control-clic te ayuda a seleccionar una sola capa. Si luego desea recoger varias capas, use control shift click. Así como así. Ten en cuenta que vamos a rehacer todos estos ajustes finales cuando lleguemos a la conferencia de tipografía, cuando realmente vamos a elegir fuentes. Bien, Después del poco de retoques, esta es nuestra primera cicatrizada, esta es la primera alternativa. Ahora, mirándolos uno al lado del otro, creo que es una mejora, pero en general, no estoy contento con ese tamaño. Así que vamos a duplicar la pantalla una vez más e intentar otra cosa. Asegúrate de tener suficiente espacio. El cielo es el límite en Figma. Ahora digamos que reducimos el auto por digamos, para los Pexels. Entonces eso significa que el rectángulo base tiene que ser para 60 y el interior necesita ser solo 360. Dame un momento para usar el panel de propiedades. Soy rápido, pero no soy tan rápido. Bien, estamos bien para irnos. Siguiente. Necesitamos manejar estas capas de textos. Y aquí es donde realmente entra en juego la destreza. Así que rápido, selecciónalos y muévalos hacia arriba 40 píxeles. Entonces eso son cuatro tipos de aquí, la tecla de flecha hacia arriba, si mantienes el turno también. Ahora mientras estamos aquí, agreguemos un toque de color a estas etiquetas. Se ven aburridos como son, además no lo sabrías, realidad puedes hacer clic en ellos. Entonces veamos qué podemos hacer. Cualquier color estaría bien, pero prefiero no usar el mismo verde de la calificación. Me gustaría evitar cualquier confusión y hacer que destaquen un poco más. Rojo o naranja es todo lo contrario del verde. Entonces vamos con algo así. Ahora bien, el código de color exacto realmente no importa porque vamos a configurar el esquema de color de la cama más adelante. Todavía tenemos en la primera opción respecto al encabezado. ¿Bien? Derecha. Estoy contento con la nueva tarjeta. Y tengo que decir que estoy bastante contento con la nueva relación de aspecto de la foto. No es tan alto como antes, pero sigue siendo generoso y se ve bastante bien. Recuerda el nivel que tuvimos la mejor vibra. Y creo que mucho de eso fue que es un sentimiento espantoso. Todo parecía tener espacio más que suficiente. Nada estaba desordenado, nada estaba ocupado. Entonces creo que lo vamos a dejar así. Ahora, pensemos ¿qué más podemos hacer? Hagamos una copia y menos cosa. Ahora, podríamos dar a las etiquetas son color de fondo sólido para mostrar que en realidad puedes tocarlas. Puedes hacer clic en ellos. Significado hace una acción disponible para el usuario. Pero como quieren que la calificación tenga su parte justa de atención, creo que voy a mover eso arriba de la foto. Entonces vamos a llegar a ello. Mueve la clasificación y la coordenada inferior derecha de la foto. Algo así. Obviamente no podemos verlo, pero podemos agregar un relleno mediante el uso de desplazamiento automático de diseño. Escriben el texto y el emoji y seleccionan el derecho. Utilice shift a para crear un diseño automático. Entonces como antes, habilite un relleno. Blanco puro claro, cuadrado, no se ve muy bien, pero podemos cambiar eso poniendo aquí un gran valor. Entonces agreguemos el relleno de digamos, que tanto horizontal como verticalmente. Esto debería hacer el trabajo. Agradable y fácil Todo para hacer diseño automático. Y en caso de que alguna vez cambies el texto, hazlo más corto o más largo, el campo cambia también. Esta es una técnica y Figma que realmente vale la pena aquí. Y por cierto, al tener un fondo blanco, esta es una de las formas más fáciles de obtener gran legibilidad sin hacer ningún compromiso. Deja 30 píxeles desde los bordes inferior y derecho. Como pueden ver, una vez que puse un valor en mi mente, 30, en este caso, lo estoy guardando. Bien. Llámala calificación en el panel de capas en caso de que quieras mantenerte organizado. Eso es un poco difícil de hacer mientras se filma. Entonces sí me disculpo por eso. Realmente me estaba enfocando en enseñarte cosas y mi panel de capas no es tan bueno. Tomemos un breve descanso y continuaremos en un momento. Gracias. 19. Más variaciones para la tarjeta: Bienvenido de nuevo. Manejemos las etiquetas. Vamos a usar el diseño automático. Una vez más, el ancho va a variar dependiendo de la longitud de la palabra. Pero queremos al menos 20 pixeles en cada lado. Entonces seamos generosos. Esa es una tecla de acceso rápido que me encanta. Así que asegúrate de recordarlo. Bien, esto debería ser rojo azotonado anaranjado. Pero no te preocupes demasiado por la sombra. Solo asegúrate de que el texto en blanco puro realmente va a estallar. Realmente va a destacar. Ahora, voy a moverme bastante rápido porque esto es algo estándar. Deberías ser capaz de seguir adelante. Pero claro hay que pausar el video a menudo. Las coordenadas tienen que ser redondeadas al máximo para que coincidan con la calificación. Estoy empezando a coger velocidad, pero ojalá puedas seguir adelante sin ningún problema. Ahora, aquí está la cosa. La altura de la tarjeta no es lo suficientemente buena. Simplemente no podemos hacer que esto funcione. Aunque levantemos un poco el título, sugiero que cambiemos esto hacia arriba. Ahora, hablando de dimensionar las cosas, creo que voy a dejar 20 pixeles entre las etiquetas. Y después de todo está dicho y hecho, creo que así es como se supone que debe verse. El caso es que no todas tus ideas van a ser geniales y eso está totalmente bien. Lo esencial es que los crees lo más rápido que puedas y luego los juzgues mirándolos uno al lado del otro. Quitemos el tiempo de entrega de la esquina superior izquierda. Esto debe colocarse en la misma línea que el título del restaurante para esta variación. Escribamos el hígado, al final 30 min. La fuente predeterminada está bien por ahora, lo que estamos buscando es balance. Esto, esta tarjeta se ve genial. Ahora, puedo decir que el diamante ama con él. Puedo decir que esta calificación del lado derecho es perfecta. Al final del día, alejemos el zoom y veamos todas las opciones. Ahora, para darle la quinta oportunidad, asegúrate de que todo esté bien abotonado. Si dedicas mucho más tiempo a nuestro diseño, obviamente estarás más inclinado a que te guste más. Pero empezamos aquí sin antecedentes y tarjetas muy grandes. Ese es claramente el peor. La segunda versión se ve bien, pero la tercera es definitivamente mejor debido al menor tamaño de la tarjeta. También me gustó esta pizca de naranja. Pero cuando comparo estos dos, pienso etiquetas sólidas donde un error, esto es demasiado ocupado y desequilibrado. Aún así valió la pena hacerlo, pero ahora no voy a perseguirlo. Estoy bastante seguro de que no está bien. A mí me gusta el rating flotante, pero tendremos que trabajarlo un poco más. Así que tomemos un descanso y continuaremos con nuestras variaciones y apenas unos momentos. 20. Últimas variaciones de la lista de restaurantes (2): Bienvenida de nuevo. Espero que te estés divirtiendo y que estés trabajando conmigo. Pero claro, en tu segunda visualización, en este punto, hemos jugado con varias opciones y sabemos con certeza que queremos quedarnos con esta versión pero sin las etiquetas. Entonces hagámoslo. Crea otra copia de la última tabla de arte y quita los rectángulos naranjas. La forma más fácil es hacer clic con el botón derecho y elegir eliminar diseño automático. O simplemente podrías rehacerlo lo que quieras. Pero esta es una buena oportunidad para que sepas que siempre puedes eliminar todo o layout. Aunque me gusta ese color, así que vamos a aplicarlo a estas capas de textos. Eliminamos el diseño automático, pero aún tenemos un marco extra en el panel de capas para eliminarlo, haga clic derecho y elija Desagrupar. Esto va para ambos. Ahora vamos a dividirlos con un guión y limpiar las cosas. Este divisor puede ser negro o algo así. En cuanto a la distancia entre ellos, bueno, digo en cualquier lugar 15-20 pixeles. La pregunta es, ¿ debemos mantener esta posición? Creo que podemos jugar un poco más con él. Así que aquí está mi idea. Movamos el tiempo de entrega debajo del título porque el brief dice que este es un factor muy importante para las aplicaciones de los usuarios. Ahora bien, esto significa que los huevos se sentarán del lado derecho como antes, 30 píxeles del borde. Muy pronto empezará a escoger fuentes y esto va a verse mucho mejor. Ahora, durante el descanso, me tomé el tiempo para encontrar el icono del reloj que coincidía con todos los demás. Aquí están los suyos y puedes ir con 30 por 30 o 40 por 40, lo que creas que funciona mejor. El tamaño más pequeño está bien porque no es una acción, en realidad no se puede tocarlo. 40 píxeles es lo que usamos en la barra de acción. Pero eso es más apropiado porque en realidad puedes hacer clic en ellos. Puedes tocarlas. En general, voy a ir con el menor valor por eso. Así que tómate un momento y arregla todo entre el reloj y el tiempo diez pixeles, por favor. Todo necesita estar centrado verticalmente. El icono del reloj, el diamante de entrega , por último, las categorías. Y como paso opcional, podemos acortar los textos a entrega 30 min si aún no lo has hecho. Creo que está claro que este día es una gran opción. Es mucho más corto, es mucho mejor. E incluso podríamos quitar entrega porque tenemos ese icono de reloj. Creo que eso sigue teniendo sentido. Icono de reloj único y 30 min, creo que consigue el punto a través, pero lo vamos a dejar en esta versión. Por último, el diseño de calificación es bastante agradable, pero está cubriendo una parte significativa de la foto. Entonces esto es lo que propongo. Me inspiré en el hígado debido. Entonces quiero que la calificación se siente en este borde. Esto también debería equilibrar las cosas. El caso es que vamos a necesitar la sombra paralela porque es blanca sobre blanca. Por cierto, a esto se le llama el botón de la píldora, por cierto, PEL, como en medicina, porque es bastante redondo. Ellos buen momento para colocarlo a 30 pixeles del borde derecho. Pero aquí está la cosa. A pesar que esta no es la fuente final, creo que tenemos que jugar con el relleno. No tengo nada específico en mente. Es un método para probar las cosas probablemente un poco más amplio, probablemente un poco más corto. Mira lo que te gusta, juega con él y mira qué se ve mejor. Creo que hay demasiado espacio vacío cada lado del mismo. Así que vamos a redimensionarlo, que sea la oferta, tampoco fueron buenos momentos con ella. En la versión ideal, esta forma es tan ancha como estas dos etiquetas. Pero claro, las etiquetas que van a cambiar en base a las palabras reales que se muestran aquí. Internacional es bastante largo, pero otras categorías pueden ser cortas ahí. Pero sí, esa sería la situación ideal teniendo el mismo ancho. Ahora bien, en general, creo que esta es una mejora maravillosa con respecto al diseño anterior. Es mucho mejor. Aunque la sombra, puede ser un poco demasiado fuerte, pero una vez que no la bajemos, esto va a quedar bastante bonito. Creo que la opacidad del seis por ciento está bien. Tenga en cuenta que la opacidad se controla desde este lugar. También podrías usar esta área, pero yo prefiero este campo. Es más fácil. Bien, ahora mirando las cosas, alejando el zoom, creo que esta es la mejor versión de lejos. ¿Qué opinas? Házmelo saber en la sección de comentarios. Y claro, siempre puedes hacer tu propia versión. Ahora piensa que una vez que esto esté pulido, este va a ser un 8.5 fuerte de cada diez, y eso es más que suficiente. Tomemos un descanso. 21. Creación de opciones para la barra de acción: Bienvenido de nuevo. Volvamos a la zona superior. Por el momento, creamos algo muy limpio. Pero, ¿es este el camino correcto a seguir? Fuimos al ancho bastante rápido porque queríamos analizar las cartas debajo sin que nos tiraran. Pero creo que podemos explorar algunas opciones. Hagamos una copia, hagamos espacio y comencemos. Entonces lo primero que me viene a la mente, y esto es muy creativo, es usar una foto para todo esto, su idea para la barra de acción. Y puede ser una imagen de San Francisco ya que esta es la ciudad actual. Entonces, quitemos la barra de estado cayó y ampliemos la barra de acción y esa región. Ahora bien, ¿por qué tenemos que quitarlo? Porque es mucho más fácil agregar una foto dentro del único rectángulo. Y si nos gusta, podemos hablar con un codificador y ver cuánto esfuerzo se necesitaría para que suceda. Sé que es posible que lo haya hecho antes, pero no estoy seguro de lo difícil que va a ser. Ahora, vamos a tener esa discusión si nos encanta por ahora, vamos a verlo en acción. Entonces detengo la grabación y fui a Unsplash para obtener varias fotos del puente. Aquí están, y vamos a repetir el proceso desde la primera pantalla. Recuerda el control de teclas de acceso rápido Tecla Mayús para insertar la foto dentro del rectángulo. Entonces aquí está el primero. Tenemos bastantes elementos que no funcionan sobre un fondo coloreado. Entonces en este caso vamos a tener que hacerlos todos blancos, por favor. Nada más. Justo wight cerca del amarillo, naranja, verde lima, nada de eso. Esas son las peores camas del diablo. Ahora, sólo estoy jugando, pero me tomo en serio este consejo. Solo use blanco. Ahora bien, esto no se ve tan mal. Obviamente podemos agregar otro relleno con una baja opacidad para mejorar la legibilidad de este texto para obtener un gran contraste. Pero por ahora, sigamos repasando las fotos. Por cierto, en caso de que quieras hacer algunas ediciones rápidas, en realidad puedes hacerlo desde este lugar. Simplemente haz clic en la miniatura y vas a tener un montón de opciones o haz doble clic en la foto. Ese no es el punto de esta conferencia, así que no voy a detenerme en ella, pero no, es una opción. Entonces nuevamente, para editar la foto, puedes deseleccionar todo, luego seleccionar la foto y verificar el relleno. Haga clic en la imagen. Y entonces vas a obtener todos estos ajustes. Básicamente en definitiva, tienes mucha libertad. Esto no es Photoshop. Aún tenemos bastantes opciones. Bien, vamos a acortarlo. En esencia, voy a usar la imagen número seis, pero puedes echar un vistazo a las otras por sí mismo. Pero hay que pensar en la estrategia. ¿De verdad queremos llamar mucha atención a la ActionBar? La cosa es, aunque nos encanta la simplicidad del hígado, ¿verdad? Esto nos aleja de eso. No creo que valga la pena. Algunas de estas fotos se ven bien. Pero eso es todo. No son increíbles, no son fantásticos. Entonces creo que no debemos complicar las cosas. Echemos a la basura esta idea. Vamos a eliminarlo porque queremos que el foco se mantenga debajo, ¿verdad? No en la parte superior, sino debajo. Pero aún así, probemos. Otra opción puede ser con un Heather sólido, escribir algo diferente, no Blanco. Entonces en una nueva copia, voy a empezar a experimentar con algunos colores brillantes audaces, algo vívido. Justo en la parte superior de mi lista tengo verde, naranja, morado y azul. Ahora, los voy a apilar uno al lado del otro para que podamos darle un tiro justo a cada uno de ellos. Ahora, dame un momento mientras hacía zoom a través de todas estas versiones. Voy a acelerar bastante. Pero en esencia, aquí no está pasando nada especial. Además no tengo ningún código de color en particular en mente. Lo que sí tengo es un lugar en el seleccionador de color, y eso es un poco más abajo en la esquina superior derecha. Entonces no del todo en el coordinador porque eso es territorio de neón. Así que no hay colores neón, sino solo un poco más abajo. Aquí están. Ahora la pregunta es, ¿tienes un favorito? ¿Crees que cualquier adopción de color es mejor que la del blanco puro? Porque desde donde estoy parado, creo que lo mejor es que la mantengamos blanca. Las fotos son ricas en color. Y básicamente con pedir problemas aquí, no es que no me gusten, pero creo que ¿por qué hace una opción mucho mejor? Creo que es un poco más refinado y más que sintonizado con el espíritu de la app. Ahora bien, si piensa lo contrario, continúe con usted tiene opción y muéstrame su resultado final. Este es un método de gusto, pero también de cómo interpretamos el breve. Con esto concluye la conferencia. Toma un respiro y te veré en un minuto. 22. Conceptos de diseño para los detalles del restaurante (3) pantalla: Bienvenida de nuevo. Estamos listos para pasar al diseño de detalles del restaurante. Veamos qué variación podemos llegar a tener para este verde. Pero primero, actualicemos eso. Estos rectángulos tienen que ser blancos. Y la que sostiene nuestras pestañas, rodillas que dejan sombra. , recuerde que tenemos Sin embargo, recuerde que tenemos configuraciones específicas para el recurso compartido, y eso es 2.4. En cuanto a la opacidad, cosa que era del 15 por ciento, pero quizá quieras jugar con ella. Esto es bastante importante cuando se trata de sombras porque puede aparecer en la parte superior del rectángulo si no estás teniendo cuidado. Así que asegúrate de verificar la configuración. Bien, pasemos a la barra de estado. En el pasado he usado PNGs, así que fotos reales para la barra de estado, pero lo mejor es que uses un elemento que sea ajustable. El formato que estás esperando como SVG. O simplemente puedes copiar, pegar este artículo desde cualquier freebie de la web. Bien, Ahora, pasando, vamos a necesitar agregar algunos íconos. Me tomó un poco de tiempo encontrar la flecha hacia atrás coincidente y una información ALL, y estos deben colocarse exactamente como en la pantalla número dos, todos en la misma línea con una cantidad apropiada de margen. Creo que podríamos haber omitido agregar la guía a este tablero de arte. Así que arreglemos eso. Agrega cualquier rectángulo que tenga 656 píxeles de ancho. Como es habitual, el panel de propiedades es la mejor manera hacerlo cuando buscas el tamaño específico. Después arrastra tus guías. Si no ve esta parte, por favor habilite su uso de Lula esta tecla de acceso rápido. Bien, ahora quita esa capa extra. Es tan fácil como eso. Este es uno de esos hacks que me encantan. Es bastante simple, pero funciona. Esta técnica salió por necesidad y sólo un freelancer que realmente valora su tiempo tiene este tipo de enfoque. Si ves a alguien moviendo una guía píxel a píxel con este ratón, izquierda, derecha, izquierda, derecha. Entonces ya sabes, está demasiado relajado. Donde los negocios. Coloca este ícono de información junto a la guía. Bien, cuando hayas terminado, por favor repite para el otro lado, pero tómate tu tiempo con él y asegúrate de hacerlo bien. Por supuesto, la forma más fácil de arreglarlos es secando la caja grande que los engloba a todos. Entonces presiona el comando Alineación y has dado un paso bastante grande. Deja 30 píxeles entre la flecha y el título. Entonces es agradable y aireado. La fuente predeterminada no ganará ningún premio. Vamos a hacer los retoques finales en la próxima conferencia. Esto es un poco arriesgado, hacerlo tan grande, pero pronto lo arreglaremos todo. Ahora bien, la idea principal aquí es mantenerse consistente. No me gusta usar diferentes valores en diferentes pantallas. Por último, para las pestañas, hagamos esto. Selecciónalos todos a la vez porque esta es la forma más inteligente de trabajar. Después cambia la orientación al centro. Esto hace que se queden quietos porque mi plan es aumentar ese tamaño a 24 pixeles. Además vamos a cambiar el peso de regular a negrita. Por el color, por el momento, negro es totalmente fino. Hemos pasado bastante tiempo organizándolos con la ayuda de esa línea que muestra la pestaña activa. No quiero que ese esfuerzo sea para nada. Entonces por eso cambiamos la orientación. Bien, sigamos hacia abajo. Selecciona la primera guardia y haz algunas copias. Entonces esto se ve un poco más realista. Toma la línea como ejemplo. Si no es el tamaño correcto, decir 656 de ancho, podemos editarlo rápidamente con precisión. Seleccione eso y use el tipo de panel de propiedades en 656 y muévelo a su lugar. Por cierto, esta es una gran oportunidad para usar también el campo x. Entonces x es el acceso horizontal. Entonces, si tecleamos 32 píxeles aquí, eso significa que la capa se colocará 32 píxeles del borde izquierdo de la pantalla. Entonces x comienza desde el lado izquierdo, y comienza desde arriba. Ahora de nuevo, aquí es donde tenemos que hacer alguna edición manual. estos momentos, Figma no tiene una gran característica que tenga adobe XD. Y eso es Repetir Grid. Bueno, no en el momento de esta grabación. Entonces, para cambiar rápidamente todo este contenido, vamos a tener que hacerlo manualmente. Dame un segundo mientras me ocupo de eso. Esta es una gran oportunidad para practicar tu velocidad. Por favor, nunca, nunca te muestres un diseño con el mismo contenido una y otra vez. Ni a mí, ni a tu cliente, ni a nadie. Esto demuestra que eres perezoso y confía en mí, no quieres esa etiqueta. Esto no es difícil de hacer. Es cuestión de pasar por los movimientos. Así que tómate el tiempo y reemplaza casi todo. Y con eso fuera del camino, podemos continuar. Por ejemplo, podemos enfocarnos en Agregar al carrito, que es la acción principal en este verde. He mirado largo y duro y he decidido usar este símbolo más. Esto también es de icono plano. Como entiendo que cuando tocas toda esta región, así toda esta área, el producto se agrega automáticamente al carrito. Si bien todavía no estamos en la fase de estilo, por favor cambie el color del divisor para que no distraiga tanto a un gris muy claro, los gustos de ddd deberían funcionar muy bien como una solución temporal . Y sí, por cierto, se pueden agregar cueros en esta zona, un HEXACO, el código de color puede contener no sólo números, sino letras también. Entonces DDD es un código de color real. Ahora, la jerarquía desde el cribado pero sí tiene que mostrarse aquí también. Entonces voy a hacer negrita el título, el precio y el peso. Podemos establecerlos a 30 píxeles. Aunque eso puede ser un poco apretón. Una vez que estemos rodando, podemos tener una mejor idea de todo el espaciado. Mueva el título hacia abajo por cierto, si es necesario, sin embargo, ese es un paso opcional. Idealmente, el título debe estar alineado en la parte superior con la foto, con la miniatura a la izquierda. El precio espera, un icono debe estar alineado al fondo con la miniatura, pero como una unidad entera, así que todo está sentado en la misma línea. Mientras tanto, quería recordarte que quiero ver dos diseños tuyas. Una, una réplica perfecta con exactamente los mismos iconos, tamaños de fuente y colores que ves en el curso. Y otro que es u solo. Eso significa nuevas fotos, nuevas fuentes, nuevos iconos, nuevo diseño, las obras. También quiero ver diferentes contenidos. No publiques tu trabajo exactamente como lo que ves aquí. Elige diferentes nombres de restaurantes, sus huevos, precios, recetas, etcétera. Ahora, antes de continuar, por favor haga estos dos elementos del menú. grado 777 es lo que usamos hasta el momento. Eso es porque queríamos demostrar que no están activos, no son clicables. Bien, ahora veamos qué podemos hacer aquí. Tengo dos grandes direcciones. Entonces una es usar una foto en lugar de la barra de acción, que podría funcionar mejor que en la pantalla número dos con el Puente de San Francisco. Y lo segundo es proporcionar al cliente una versión de etiqueta desplazable en lugar del diseño fijo de tres pestañas. Entonces hagámoslo en el siguiente video. Después de un rápido descanso. 23. Variación para los detalles del restaurante: Bienvenida de nuevo. Vamos a crear una copia y ponernos a trabajar en la primera variación para esta pantalla. Eliminemos el rectángulo de la barra de estado y levantemos la barra de acción. Y eso es porque queremos agregar una imagen en esa región. Pero aquí está la cosa. Podemos hacer que esta zona sea aún más grande, aunque no es tan común. Nosotros sí tenemos esa opción. De mis pruebas. Una altura de 270 píxeles va a funcionar bastante bien. Entonces eso es 270. Las pestañas , por supuesto, tendrán que ser movidas por debajo junto con todos nuestros platillos. Recuerda, trabaja de manera inteligente para ver mejor en qué estamos trabajando. Cambia el color de fondo a algo como tal vez gris. De esta manera sabremos por dónde deben comenzar las pestañas. La idea es crear algo similar a Food Panda. Podrían cronometrar porque hay bastantes capas. Siempre te recomiendo acercar y alejar para que tengas una mejor idea de lo que estás haciendo. Con este cambio ya no se podrán caber cinco platillos completos, pero creo que cuatro es lo suficientemente bueno. Ahora podemos empezar a construir encima de esta capa en la barra de acción, vamos a agregar los restaurantes cubren la foto. En este caso se trata de una imagen de una Beta. Ya tengo algo preparado. La tecla de acceso rápido controla Mayús K, o usa el comando Colocar imagen debajo de la herramienta rectángulo. Todo en esta área necesita ser blanco, incluidos los iconos de la barra de estado. Esto me llevará un minuto, pero tengo la magia de editar de mi lado. Bien, ahora, obviamente no podemos leer el texto, pero agreguemos otro relleno. negro puro, claro juega con la opacidad, quizá el 40 por ciento, más o menos, el 50 por ciento. Mira lo que te gusta. Y ahí tienes. Impresionante. Esto se ve bastante bien. Recuerda, ahora mismo dentro del modo de iteración con solo golpear hacia fuera versiones, creando versión tras versión. Aunque la barra de acción no está presente per se, todavía necesitamos dos capas, y esa es la flecha hacia atrás y el dipolo. Ahora dejemos caer el ícono de info porque se pierde en la mezcla. Y movamos los elementos de calificación algún lugar a mitad de esta parte. Eso no es 100% requerido. Pero creo que es un buen toque, ¿verdad? Porque esta es la foto de alacena del restaurante. Entonces creo que tener la calificación aquí eso tiene sentido. Recoge la calificación de cualquiera de las pantallas anteriores que creamos. Puede que sea necesario intensificar la sombra paralela, pero no va a hacer mucha diferencia. Incluso si lo haces 50 por ciento, la opacidad de la sombra, apenas va a ser visible. Y recuerda, estamos usando nuestra computadora, podemos acercar un teléfono. No lo notarás. Confía en mí, cuando todo esté dicho y hecho. Así es como va a quedar la variación. Ahora, personalmente, me gusta más que la versión limpia, pero todo es cuestión de gustos. Me gusta dejar que el cliente decida que es realmente un flip de monedas. Así que voy a guardar ambas versiones en mi bolsillo y podemos pasar a la opción dab desplazable. Usemos el concepto inicial para ello. Entonces la pestaña desplazable es algo de Google Material Design. Básicamente es una de dos opciones, fijas, que ya tenemos. Entonces ahora vamos a hacer la segunda. Cuando haces copias, todas estas deben estar una al lado de la otra. Aquí la principal diferencia es que los elementos del menú se colocan en una sola capa de texto y luego se empujan hacia la derecha. Eliminar estos dos y llegar a cinco o seis categorías de alimentos. Tengo algo preparado en el nodo malo, pero se te puede llegar a algo por tu cuenta. Yo sólo voy a pegar. Entonces aquí están, hay, ahora hay dos opciones con respecto a dabs desplazables. Potencialmente podrías aproximarte a eso, ala y simplemente alinear todo como mejor te parezca. O podrías hacerlo usando las medidas oficiales, que es lo que voy a hacer. Primero, voy a reducir el ancho del rectángulo a un AD, que es el mínimo según la guía. Entonces fueron 240. Ahora va a ser el 1AD. A continuación, esto se tiene que colocar en 140 píxeles de distancia del borde izquierdo, 10. Para recordar cómo hacerlo, puede usar el campo x desde el panel de propiedades. De nuevo, ¿por qué E104? Eso es a partir de las pautas de diseño de materiales. Excelente. Ahora, respecto a más allá de eso, mi primera pestaña, esta necesita estar alineada horizontalmente con el rectángulo. Pero claro, eso es un problema porque la capa contiene un montón de elementos del menú. Entonces en este caso, sólo vamos a tener que aproximarnos a eso. Ahora podríamos ser precisos agregando un rectángulo a cada lado y hacer algo manual de ida y vuelta. Pero está bien mirarlo. Tengo mucha experiencia, así que me va a ir bien. Ahora cuando hayas terminado, por favor cambia el color, el Volga, las pestañas a un gris lavado. Tenemos que mostrar que inactivo. El código de color que decidimos es 777. Ahora hay una cosa que me gustaría abordar. Puede que tengas curiosidad por el fondo y por qué lo dejé blanco. Podríamos probar un color blanquecino. Ya tenemos un color, el código, pero al final, decidí no incluir eso. Lo probé fuera de cámara cuando no estaba grabando y no se veía bien. Sólo para que no haya secretos. Así es como se vería eso. Es fangoso, sucio, ocupado, lejos del aspecto AV que queremos crear. Ahora podríamos agregar potencialmente un fondo, el fondo blanco, una tarjeta para cada platillo. Pero eso es otra cosa que decidí no hacer. El razonamiento es sencillo. Entonces número uno, o bien presionaría el espacio. Pero dos más importante, esta es una lista, así que las tarjetas no pertenecen aquí. De acuerdo con la Guía oficial de Diseño de Materiales, todos estos artículos pertenecen juntos. Entonces por eso no vamos a dividirlos en tarjetas separadas. Al final del día, estas son las opciones respecto a la pantalla número tres. Tenemos que elegir una fuente o una combinación de colores y aplicar algunos toques finales. No tengo otras ideas, variaciones para este verde. Creo que es hora de seguir adelante. Te veré en un momento. 24. Selección de la mejor tipografía: Bienvenida de nuevo. Es hora de hablar de topografía y vamos a utilizar el mismo proceso iterativo en estas pocas pantallas. Así que selecciona las mejores versiones y ponlas una al lado de la otra para que podamos ir y venir rápidamente entre ellas. Si al final estás indeciso, está bien, pero elige tres pantallas diferentes para que podamos explorar cada vínculo en una serie de situaciones. Ya tengo el mío separado aquí y vamos a trabajar en copias. Vamos a mantenerlo sencillo con una sola tipografía que tenga al menos dos pesos. Entonces eso es regular y audaz. Si tiene más, eso es genial. Pero otro factor es el tamaño. Entonces lo que queremos es que la fuente sea lo más pequeña posible. Y aquí estoy hablando de kilobytes. Entonces, si estamos indecisos sobre dos tipos de letra similares, vamos a ir con el más pequeño. Entonces 600 kb versus 200, claramente 200. Lo que estamos buscando es una fuente sans serif porque queremos la suerte limpia y aguda. Por último, el punto de búsqueda más importante es la personalidad. Entonces queremos algo parecido a lo entregado, quien haya redondeado, interesante y un poco de personalidad que agregue valor al diseño. Ahora, podrías estar rascándote la cabeza por eso. ¿Qué significa personalidad? Bueno, vamos a ponerlo de esta manera. Si usamos Arial, no ganaremos ningún premio. En mi libro, desarrolló un amor por los tipos de letra que vuelan por debajo del radar. Son muy simples, no llaman la atención de ninguna manera. Ahí, lo soso, aburrido. Y eso es por lo que significa que son versátiles. Se pueden utilizar en cualquier circunstancia. En el contexto de un diseño AB. Queremos que nuestro texto destaque un poco. Entonces las elecciones que tomemos en términos de topografía podrían hacer o deshacer el diseño. Entonces ya mencioné a Ariel, Leto, ciertos pesos de Open Sans robo aunque Source Sans Pro y mucho más caen en esta categoría aburrida. Así que abramos las fuentes de Google. Voy a desactivar el jarabe y manuscrito. Y podemos ir a bajar. Ahora, estamos buscando al menos cuatro o cinco opciones. El primero que me llama la atención es Montserrat, que es una de mis favoritas. Entonces esa es una. El segundo es Uunto. Tiene mucha capa. Así que son dos. Nuevo Nieto se ve precioso y voy a agregarlo también, aunque, dice que es una mala luz, pero tiene bastante peso. Entonces esto es bastante agradable. Me lo voy a quedar. Ahora. Quicksand es otra que es bastante interesante y me encanta. Ahora por el bien de mantener las cosas cortas, voy a parar aquí. Pero cuando estés haciendo esto tú mismo, por favor ve a más tipos de letra. Yo no pasaría entonces, sino al menos cinco. A medida que practiques, vas a comenzar a desarrollar una base de datos mental de fuentes de gran apariencia. Y vas a tener listas de palabras mucho más estrechas para tu próximo proyecto. Por eso no perdí el tiempo desplazándome por ahí. Ya sabía lo que buscaba. Bien. Descargar archivo extraído. Te voy a mostrar cómo los ordeno rápidamente por tamaño, sobre todo si seleccionaste muchos de ellos. Entonces dentro de esta carpeta, busca ese TDF y vas a conseguir un montón de ellos. Y luego puedes cambiar el modo de visualización a detalles. Y vas a obtener el tamaño en una columna separada. Entonces puedes ver de inmediato que Ubuntu es mucho más pesado que las arenas movedizas, por ejemplo, así que todavía no lo tacharé de mi lista. Quiero quitarlo, pero tiene que verse absolutamente fantástico para mantenerlo como opción. Todos los que desarrollan aplicaciones quieren un tamaño de aplicación muy bajo. El tamaño del archivo tiene que ser lo más bajo posible. Eso te da más que puestos y es genial. En mi compañía, esto era muy importante. Recortaríamos absolutamente todo, aunque fuera de 20 kb. Ahora volvamos a Figma y veamos qué es qué. Entonces tengo estos copiados. Las fuentes están instaladas. Entonces echemos un vistazo a las arenas movedizas. Ahora, aquí no hay magia, solo la magia de la edición. Hay que seleccionar todas las capas de textos y cambiarlas. Ahora podríamos usar una característica más avanzada, pero esto es a propósito. Lo estoy haciendo de forma manual porque quiero que tú también lo hagas de forma manual. Entonces en la segunda parte del curso, voy a mostrar cómo puedes hacer esto automáticamente. Bueno, lo más cerca posible de automático. Este es un proceso que requiere mucho tiempo, pero vas a tener que ser paciente al cambiar tantas capas. Ahora, ¿cuál es tu primera impresión? Echa un vistazo de cerca y piensa en eso. Ahora, una cosa, cuando cambies cualquier tipo de letra, vas a arruinar tu alineación anterior. Entonces podrías tener alguna acción de desbordamiento. Algunas vainas van a salir de los límites no es un problema. Vamos a tener que alinear todo una vez más. Pero, uh, sí, esto se ve bastante sólido considerando pasar por ello bastante rápido. Ahora bien, podríamos trabajar con un mayor grado de precisión, pero de nuevo, ese no es el punto en este paso. Ahora, continuemos con el siguiente tipo de letra creando más copias. Ahora Nieto, vamos a verlo, ¿no? Por favor, tenga en cuenta que también hay otra versión llamada Nieto sands. Ahora bien, así es como se ve. Y mi primera impresión es que es bastante similar a las arenas movedizas, pero es un poco más redonda. Esto se puede ver, sobre todo en el tiempo de entrega, pero hay una carrera cerrada. Realmente depende de tu gusto. Bien, ahora voy a hacer zoom para ver todo bien. Recuerda, tienes que hacer esto por tu cuenta y ese otro nivel por caras disponibles en las fuentes de Google, no hay alternativa al trabajo duro. Trate de ser lo más eficiente posible. Podrías seleccionar Capas de texto en negrita y cambiar el tipo de letra directamente a ese peso. Eso significa que vas a tener que ser muy rápido con tu técnica de clic de control. Ahora, no importa cómo lo hagas, es importante que lo hagas. Además tienes que tener un buen número de capas de textos. Si hubiéramos hecho este paso tal vez en la pantalla de ubicación, cuando acabamos de empezar, no sería relevante. Es como preguntarle a la gente de la calle por quién está votando. Dicen candidato X, ¿verdad? Y luego dices, oye, ya sabes, un estudio muestra que el 100 por ciento de la gente quería votar por el candidato X es sólo dos personas. No te engañes a ti mismo. Utilice varios tipos de textos, capas, titulares con cuerpo x sub titulares, números, fondo blanco, bolsa mixta, redondo y así sucesivamente. Pero claro, si incluyes diez pantallas, entonces la dificultad va muy arriba. Entonces por eso no creamos todas las pantallas y dejamos este paso al final. Si bien eso es factible, es mucho mejor decidir el estilo de una aplicación en las primeras etapas. Y tres pantallas es ideal en mi libro. Bien, aquí están. Todos los tipos de letra que selecciono que tengas este archivo adjunto y te sugiero que lo abras. Pero Figma podría darte algunas advertencias. Si no tienes esas fuentes, puede darte algunas advertencias. No se preocupe. Bien, cada tipo de letra tiene sus propias fortalezas. Pero lo que puedo decir claramente desde el principio es que Ubunto no vale eso. Claro, se ve bien, pero no 34 veces más bonito que los demás. Recuerden, era mucho más voluminoso en términos de tamaño. Monster AB también es encantador, pero en general, creo que el más guapo es el nuevo Nieto. Tiene muchos pesos. Es bastante pequeña, así que no va a hacer estallar el tamaño de la app. Y tiene este especial zing que lo hace destacar, sobre todo cuando lo usas en la variante negra. Entonces negro simplemente significa tiempos audaces para algo de esa naturaleza. Ahora, considerando al público objetivo, creo que esta es una gran primera opción. En caso de que algo surja en un momento posterior en el diseño AB, podemos cambiar fácilmente el tipo de letra a cualquiera de estas alternativas, así como explorar algunas otras. Pero sí, eso concluye esta conferencia. Hemos avanzado mucho y quiero felicitarte por quedarte conmigo hasta este punto. Te voy a ver en un momento. 25. Definir y refinar el aspecto de nuestra aplicación con estilos: Bienvenido de nuevo. Es hora de dejar unos minutos a un lado para que podamos definir el estilo AP. Estamos buscando los colores, tamaños de fuente, altura de línea, etc. Y vamos a aplicar todos estos al resto de pantallas. Sé que puede dar miedo, pero tenemos una técnica salvavidas usando estilos. Entonces comencemos con el más fácil de ellos, el esquema de color, ¿verdad? El proceso va así. Elegimos un título, digamos San Francisco, ¿verdad? Abrimos el recogedor de color y jugamos con diversos matices. Estuvo genial ya que podemos ver el cambio en tiempo real, ¿verdad? Así que jugamos con él. Y al final, decidí usar 212f. Qué nueve, que es un tono oscuro de azul. Así lo hacen 12 f49. Te estoy dando los códigos de color exactos para que puedas seguirlo, pero honestamente solo juega con el seleccionador de color hasta que estés feliz. Ahora bien, esto es casi negro, pero es ideal para muchas capas de textos. Ahora, ¿cómo lo aplicamos a muchas capas de textos? Primero, tenemos que configurarlo como un estilo coloreado. Da click aquí en estos cuatro puntos, justo al lado para rellenar a la izquierda de más. Dice estilos de colores, pero no tenemos ninguno, lo cual está totalmente bien. Da click en este plus y vamos a recibir un pop-up que nos está pidiendo el nombre. Llámalo como quieras, como título, color, color principal, color primario, lo que sea. La cabeza crea estilo. Para mostrarte la paleta de colores estilos. Aquí hay un ejemplo rápido. Así que selecciona el título cielo desierto, que actualmente es negro. Ahora haz clic en estos cuatro puntos junto a Phil y encontrarás ese azul que acabamos de agregar. Aquí está, un clic y ya está. Ahora, se puede decir, Bien Chris, Entonces, ¿qué va a, Aquí está la cosa. Vamos a deseleccionar todo bien? Observe algo en la parte superior derecha, tenemos colores, estilos ahí mismo con una sola entrada. Podemos hacer clic derecho en él, y por supuesto podemos eliminarlo, pero también podemos editarlo. Entonces desde este nuevo panel, queremos cambiar el color de las Propiedades. Da click aquí para abrir el picker de color y podemos ir a la ciudad. Voy a hacerlo rojo o verde o algo loco. Y fíjate como cambian ambos títulos. Este es el poder de los estilos. Así es como cambias rápidamente un diseño completo y solo unos pocos clics. Los clientes siempre quieren ver más opciones o tal vez cambiaron de opinión con esta característica. No tienes de qué preocuparte. Voy a golpear Control Z porque sí me gusta ese tono azul. Ahora cuando quieras romper un color y un estilo, simplemente selecciona la capa de texto y usa este ícono de cadena rota que mantiene el mismo color azul, pero ya no está atado al estilo de color. De nuevo, voy a deshacer ese Control Z porque quiero que dos capas no sea gran cosa. Pero imagínese si tenemos 100 pantallas y casi mil capas de textos, ahí es donde el estilo de color es una necesidad absoluta. Ahora para continuar, seleccione pantallas V y muévalas por separado. Tenemos que limpiar las cosas sólo un poco. Mis opciones son la pantalla de ubicación, la pantalla de listado principal donde la clasificación está flotando en el borde, en la parte superior derecha. Y por último, la Virgen donde tenemos pestañas desplazables, tres pantallas en total, y podemos construir nuestros estilos. Centrémonos en el segundo. Entonces el título es azul, se muestra en nuevo Nieto negro para la talla con la que podríamos ir para D. Pero creo que 34 es una mejor opción. Entonces eso son tres para esta marcación se debe aplicar también al dipolo del restaurante. Pero aquí está la cosa. También tenemos estilos de texto do. Entonces, en lugar de ir a fallar, vas a ver que tenemos los mismos cuatro puntos al lado del texto. Haga clic y verá estilos de texto en este, exactamente el mismo proceso. Haz clic en el símbolo más para agregarlo, nombra, lo que quieras. Solo asegúrate de que tenga sentido como marea grande. Entonces podemos aplicarlo. Control haga clic en cielo desierto, y haga clic en esa entrada para probarlo. Hagamos un cambio dramático. Así que vamos a deseleccionar y luego vamos a presionar Editar. Y entonces vamos a hacer que sea 50 pixeles de alto o algo así como una locura. Y sí, sí funciona como se esperaba. Se escapa y luego Control Z. Ahora vamos a tomarlo desde arriba. El título está hecho. ¿Y todos estos íconos? mí me gusta esa naranja, así que vamos a probarla. Coge el menú de hamburguesas, y vamos a configurarlo en el siguiente color dorado. Pero aquí está la cosa. Este icono está dentro del marco. Los detalles realmente no importan. Pero aquí está el sentido. Si cambias el relleno de arriba que actualmente es blanco, no va a quedar bien. En su lugar vamos a tener que cambiar los colores de selección. Este es actualmente negro. Eso es lo que necesitamos cambiar. Fdd ver ceros tampoco, que es una naranja intensa encantadora, luego agrégala como estilo. Mi plan es aplicarlo a todos estos otros íconos. El desplegable, filtro y búsqueda. Use Control para seleccionar el primero y, a continuación, agregue shift a multi-select. Y ahí está, la naranja, cosas preciosas. Por favor aplique el mismo cambio de color a las etiquetas desde la parte inferior derecha. Como puedes ver, con el mínimo esfuerzo con cambiar el diseño en muy poco tiempo. ¿Qué pasa con el reloj? Creo que el mismo azul está bien. Mira, aquí me metí la pata. Seleccioné el marco y cambio el relleno por error. Hay mucho de qué hablar, pero vamos a discutir los detalles en la segunda parte del curso. Por ahora, enfocarse en la esencia, cambiaron los colores de selección. Si tienes un icono dentro del marco, esa es la mejor manera de hacerlo por ahora. Así como una pequeña nota al margen, podríamos haber hecho esto anteriormente cuando probamos diferentes tipos de letra. Lo sé, pero quería que trabajaras manualmente. Ganar velocidad es lo más importante como diseñador en esta etapa del juego. Bien, Volviendo a ello, ¿y el tiempo de entrega? Bueno, esto necesita mostrarse en nuevos pixeles regulares 24 de Nieto en un gris bastante oscuro. Vamos con 777. Podemos agregar el color así como el estilo del personaje. Creo que es muy probable que lo vayamos a usar como texto del cuerpo principal, es decir, la descripción de cada plato. Entonces llamémoslo cuerpo. Quiero recalcar que no estoy 100% seguro. Puedo cambiar de opinión. Vamos a ver a medida que avanzamos. Pero debido a que tenemos estilos, podemos hacerlo rápidamente. Podemos cambiar rápidamente de opinión. Para la lectura. Vamos con nueva necesidad AL 20, Tan bastante pequeño. Podemos hacerlo gris, Eso es código de color 777. Y luego selecciona la parte del 92 por ciento y hazla negra. Negro en términos de peso. En cuanto al color, podemos probar el emoji porque cambiamos la fuente, la alineación puede no ser perfecta, pero eso es un dato rápido. Ahora, puede que tengas una pregunta, Chris, ¿Cómo decidiste el rezago número 34 para los títulos? ¿Por qué no 30? ¿Por qué no 36? ¿Por qué no digno? La respuesta es sencilla. Yo los probé. Subí el diseño a mi teléfono. Miré mi diseño para mi teléfono y los comparo primero entre ellos y luego versus muchas aplicaciones que analicé previamente. Eso antes parecía la mejor opción. Lo mismo va para todos los demás. No es algo que Google Material Design haya configurado, es algo que decidí. Bien, uno de avance rápido, entonces este es nuestro resultado. Así debería verse tu proyecto en esta etapa del juego. Tomemos un descanso rápido. 26. Practica tu velocidad: Bienvenida de nuevo. Nosotros a lo largo de la pantalla, pero hacer y quiero reemplazar este contenido ficticio. Aquí están todos los recursos que he preparado para esta pantalla. Primero, las fotos, bastante simples, cambio de consola gay. Sé que en algunos otros programas puedes simplemente arrastrar y soltar imágenes dentro de rectángulos, pero no en Figma. Ellos buen momento con ello. Y luego cuando estés usando fotos enormes, sé un poco más paciente. Figma podría tardar unos segundos en procesarlos. Bien, a continuación vamos a hacer los títulos uno por uno, agradables y fáciles. Los votos están arriba a continuación. Ahora, podrías preguntar, Chris, ¿por qué haces todas estas cosas? ¿Por qué lo estás mostrando? Es simple por un lado, es una gran práctica. Tienes que hacer ejercicio. TERMINAN Y ESTAN PREPARADOS. Perezoso no es algo que pueda describirme alguna vez. En segundo lugar, es importante que le enseñemos al cliente y al desarrollador algo de lo que estamos orgullosos, algo que se siente real. El esfuerzo requerido para hacer real un aeródromo es mínimo, pero mejora drásticamente el impacto de la aplicación. Se siente mucho, mucho mejor. Ahora, imagínese esto. Invitas a algunos invitados, a algunos amigos, ¿verdad? Y luego tienes calcetines sucios en medio de la habitación. Todo lo demás es agradable y limpio, todo listo. Pero esos calcetines sucios, hombre, la ruina, todo. A pesar de que hay una parte tan pequeña de la habitación general, ellos enfocan toda tu atención en ellos. Entonces no es una gran cosa, es lo mismo aquí en diseño. Tener contenido repetitivo falso, mucho Lorem Ipsum, simplemente rompe la magia. Entonces por eso tenemos que hacerlo. Y sólo para llevar esta casa, vamos a disminuir el tamaño de la foto en 40 pixeles. Entonces Control haz clic en él y vamos a echarle un vistazo. 360, Vamos a ir adelante a la 20. Y para la tarjeta de 470, vamos a moverla a 430. Por supuesto ya nada está alineado, pero sabemos que el cambio nos ayuda a mover las cosas en incrementos de diez píxeles. Entonces, dentro de la necesidad de profundidades, seleccione a todos estos tipos así que recuerde el control y haga clic en el primero, luego mantenga presionada la tecla shift para seleccionar múltiples. Y ahora podemos usar la flecha hacia arriba cuatro veces mientras mantenemos pulsada la tecla Mayús. Ahora bien, ¿este cambio de tamaño es absolutamente necesario? No. Pero como dije, quiero ponerme el trabajo duro y ver si puedo mejorar el diseño. Y creo que está funcionando. Anteriormente. Estaba un poco indeciso, pero ahora creo que se ve bien. Ahora cuando estés listo para ir, pasemos a la pantalla número tres. Comienza con el título, selecciónalo y aplica el estilo de personaje que se llama exactamente ese título. Para la flecha hacia atrás y el ícono de Información, estos deben ser naranjas. Al avanzar hacia abajo, las pestañas activas deben ser de color naranja. Entonces ya sabes lo que tienes que hacer con este rectángulo. Ahora para los dabs? Bueno, para ser honesto, no estoy seguro. Empecemos con el estilo del título. Obviamente es demasiado grande, pero podemos cambiarlo a 26 píxeles, por ejemplo, como antes, las pestañas inactivas necesitan un tratamiento diferente. Entonces arreglemos esto. Ahora. Seleccione todos los demás elementos y configúrelos en una capa de texto separada. Creo que eso es lo mejor. Así que solo usa cortar y pegar Control X. Bien. Entonces este necesita ser configurado en neonatal 26 como antes, pero en la forma regular, nunca se debe cambiar el tamaño de la fuente aunque esté inactiva no es una buena práctica. En cuanto al activo, éste debe hacerse naranja. Ahora otra vez, ahora aquí hay una propina. Quizás no sepas cuánto espacio debes dejar entre la pizza del pasado. Después de todo, queremos emitir el espacio entre la pizza y el resultado. ¿Todo bien? Pero debido a que se trata de una sola capa, no se puede averiguar la distancia real. Bueno, aquí está la punta en el rectángulo entre estos dos y echa un vistazo al ancho. Una vez que tenemos ese valor en mente, realidad es bastante fácil con esta capa seleccionada mantener Alt, y verificar la medición existente. Entonces afinarlo con las teclas de flecha y ya está listo para comenzar. Bien, sigamos bajando los nombres de los platillos. Bueno, creo que estas deberían ser las mismas que las pestañas. Entonces Nieto negro, 26 píxeles, pero esta vez en azul, necesitamos aplicar esto a todas las entradas. Entonces haz lo que tengas que hacer para que eso suceda. Ahora obviamente, el estilo químico es la mejor manera de hacerlo. Así que por favor asegúrate de darle un buen uso. Estoy tratando de ir lo más rápido posible, pero sí quiero que entiendas lo que está pasando. Para la descripción. Vamos a tener que usar el estilo corporal. Nieto es una fuente más grande, pero sí quiero mantener las líneas de texto, así que redimensiónelo si es necesario. Pero imagínese después de eso aplicamos estilos a absolutamente todo en caso de que queramos cambiar algo sin importar lo que sea, tamaño, fuente, altura de línea, cualquier color. Vamos a tener un tiempo fácil donde ese precio y peso aplicaron el estilo de 26 títulos y verificamos la posición. Quieres que la parte inferior esté alineada con la miniatura, aunque tal vez tengas que mirarla. Esta fuente tiene bastante espacio extra en la parte superior e inferior. Y no hay nada que puedas hacer al respecto. Cuando haces clic en él, puedes ver el resaltado. Es bastante grande. Ahora bien, creo que el precio debería mostrarse en naranja aunque. Sí, en efecto, esto es millas mejor. Por último, el Agregar al carrito también debe ser naranja. Ahora, lo creas o no, creo que ya terminamos con este verde. Si hay algo que quieras un botón arriba, ahora es el momento para ello. No estoy seguro si esto tiene que ser tan grueso. No es tan importante. Entonces, bajémoslo a negrita en lugar de negro. La cosa son estilos de absolutamente fabulosos y podrías hacer una entrada para casi cada pequeña cosa. Como habrás notado, no agregué todos los estilos aunque no agregué todos los estilos, y eso es intencional. No quiero agregar demasiados y luego confundirme con eso. Es hora del descanso. 27. Termina la primera pantalla: Bienvenida de nuevo. Bien, vamos a la pantalla de ubicación. Tomémoslo desde arriba y asegurémonos de que estamos en la misma página. El icono necesita ser 18180 y blanco puro. Esto tiene que ser colocado AT píxeles desde el borde superior. Esta es una buena oportunidad para usar el campo y. Recuerda, y es el eje vertical y comienza desde arriba. X es la horizontal y empieza por la izquierda. Ahora el nombre de la app, el directo ahí mismo. Entonces si no lo tienes y vamos a peinarlo. Estoy pensando que necesitas todo negro. 70, blanco puro. Oh, no creo que agregué el blanco como estilo. El caso es que si constantemente movemos nuestro ratón sobre esta región, lo mejor es tener blanco aquí también. Ahora lo centré en el lienzo y colóquelo a unos diez píxeles del eigon, dale o tome. Bien, ahora eso está hecho. Siguiente. Creo que es seguro decir que naranja va a ser el color de acción principal. Entonces vamos a aplicarlo a ambos botones. Ten en cuenta a la hora de tratar con botones, lo mejor es que utilices en el diseño automático y no en un rectángulo y en la capa de texto, Eso es solo la mejor práctica en Figma. ¿Qué pasa con el texto? Bueno, cambiemos esto para mostrar restaurantes. Empecemos con 26 título y veamos qué vale. Ahora bien, el tamaño en sí está bien, pero es un poco demasiado grueso, así que vamos a dejarlo en negrita. Esto hace una gran diferencia. Si no lo ves a través del video, confía en mí en él. Compruébalo en tu teléfono, y creo que estarás de acuerdo conmigo. El problema que estoy teniendo aquí es la jerarquía. No está claro. Entonces pensémoslo. Tenemos tres acciones disponibles. Hemos ingresado a una ubicación con un botón de enviar, omitir este paso y pasar a la siguiente pantalla o crear una cuenta con log n. En general, crear una cuenta o iniciar sesión podrían considerarse dos cosas separadas . Pero voy a combinarlos para que las cosas sean fáciles. Entonces, ¿cómo deberíamos hacerlo? Si bien está bien tener dos botones con el mismo nivel de importancia, creo que lo mejor es que apliquemos a diferentes estilos para crear una cuenta. Por lo que entiendo del brief, el proceso de registro no es tan importante. Eso significa que mostrar restaurantes es el botón más importante en esta pantalla. Como tal, vamos a ampliarlo a 656 píxeles. También deberíamos cambiar la altura a 90 píxeles, solo para que destaque un poco más. Ahora, eso es mucha ropa de cama, pero no es gran cosa. Solo concéntrate en lo que es importante y no te pongas día con demasiadas técnicas subiendo por el momento, los campos necesitan coincidir con los botones donde está tan 656 píxeles, entonces las cosas están cambiando rápidamente, pero recuerda hacer una pausa tantas veces como necesites para poner el texto. A esto se le llama oficialmente la mano. Por favor, aplique el estilo corporal. Cuando el usuario toca el campo, la mano desaparecerá. Ahora, aquí está la técnica para hacer un campo para hacer maquetación automática. En primer lugar, selecciona el texto y usa Shift a, agradable y fácil. Después agrega el relleno blanco. Agradable y sencillo. Cambia el radio de coordenadas a cinco píxeles, para que se vea un poco mejor. Podría cambiar esto a diez píxeles más adelante, pero por ahora, está bien. Ah, por cierto, sí necesitamos el ícono del GPS y tienes algo adjunto al curso. Simplemente voy a arrastrarlo dentro de este marco. Cuando hagas eso, vas a notar que el diseño predeterminado no es correcto porque el texto no está centrado. Sin embargo, ese no es el problema. Deseleccione el icono y haga clic en el marco. Mueve tu mirada hacia el lado derecho. Este es el tema. Tenemos que cambiar la alineación y con bueno para ir. Bien, queremos que esto tenga 656 pixeles de ancho, así que coincida con todo. Pero fíjese que el ancho y la altura están atenuados. Y eso es por estas configuraciones, molestas para abrazar contenido. Y eso significa que la forma crecerá en base a lo que hay dentro de eso. Porque sabemos que necesitamos un cierto tamaño. Cambiemos esto de abrazo a ancho fijo. Ahora podemos escribir 656 y eso es genial. La altura aún no está disponible, pero ahora ya sabes cómo cambiarla nuevo a donde necesitamos mover el ícono de búsqueda a la derecha. Arrastrarlo no va a funcionar. Y eso es porque tenemos que cambiar un escenario. Haz clic en estos tres puntos y obtendrás un nuevo panel. Aquí. Queremos cambiar el modo de espaciado de pacto, lo que significa muy juntos. Queremos construir un espacio de opción entre. Y así, se desmoronan. En caso de que no te guste el acolchado de ninguno de los lados, puedes cambiarlo desde este lugar. 20. Creo que es una gran elección. Por cierto, si no entiendes lo que acabo de hacer con contenidos de abrazo, eso está bien. No es necesario usar el diseño automático. No hace falta complicar las cosas. Pero en esta etapa, pensé que sería bueno echar un vistazo a cómo funciona esto. Ah, por cierto, por favor haz naranja el ícono del GPS porque puedes tocarlo, puedes darle click para que puedas obtener tu dirección IP automáticamente. Bien, ahora pensemos que esta es la parte más importante en esta pantalla. ¿Cuál es el siguiente? Y esa cosa, crear una cuenta viene en segundo lugar. Ahora también podríamos darle un botón naranja, pero competiría con los restaurantes de espectáculos. Creo que lo mejor es que lo movemos en la parte inferior de la pantalla. Pero primero, vamos a saltarnos este paso fuera del camino para el estilo. Hagamos esto. Aumenta la altura a 100 píxeles para que no se pueda pasar por alto. Eso no es exactamente enorme, pero es un poco más grande que el llamado a la acción principal. Hazlo negro puro, pero baja su opacidad hasta el 60 por ciento. No hay frontera para eso, la idea es darle una generosa cantidad de espacio, pero sin hacer que destaque demasiado. Entonces por eso elegí el negro. Haz que abarque todo el ancho de la pantalla. Entonces eso significa 720 píxeles. Alinear correctamente. Y ahora deberías ver lo que estoy tratando de hacer. Cuando termines, cambia el texto para crear una cuenta o inicia sesión con una C. mayúscula Las cosas pequeñas realmente importan al final del día. En general, este es un buen diseño para la acción del segundo año. ¿Podríamos usar el diseño automático aquí también? Claro, claro que puedes hacerlo por tu cuenta. Ahora, echemos un buen vistazo a nuestro diseño durante un rápido Greg. Gracias. 28. Un nuevo estilo de botón para tener un gran flujo: Bienvenido de nuevo. Nos queda un artículo principal. Omita este paso. Voy a usar algo nuevo, algo llamado el botón fantasma. Así que comienzan con un desplazamiento automático de diseño ellos, pero en lugar de agregar un relleno como siempre lo hemos hecho, vamos a agregar el borde en su lugar para que no llene solo el tablero, el blanco bastante grueso. Estoy pensando en tres pixeles. Siempre debes mantenerte alejado de trazos de un píxel. Se ven súper borrosas y de baja calidad. Entonces este es un botón fantasma y se llama así porque no tiene cuerpo, ni relleno, ni cuerpo. Por eso es un fantasma ¿verdad? Ahora. Por cierto, asegúrate de que la ortografía está en el punto y pones en mayúscula la primera letra. Obviamente asegúrate de que todo esté centrado. Pero aquí está la cosa. Es posible que no tengas suficiente contraste frente a la imagen de fondo dependiendo de lo que hayas seleccionado. Deberíamos tener una superposición de color, pero eso puede no ser suficiente. Además cuando no tienes relleno, seleccionar estos botones es bastante difícil de hacer. Entonces esto es lo que propongo, habilitar el relleno aunque y hacerlo negro puro, pero luego bajar la opacidad a aproximadamente 30% más o menos. Creo que eso nos va a ayudar bastante, tanto con el contraste como con el ancho seleccionando este botón. Ahora, analicemos las cosas. El logo está en la parte superior. Lo echas un vistazo y te mueves hacia abajo justo en el medio, tienes esta zona principal donde tienes que poner tu dirección, tu ubicación. Impresionante. Es grande, es brillante, destaca. Ahora la pregunta es, ¿podríamos agregar algún dato extra? Y estoy pensando que podríamos agregar un icono dentro del botón naranja. Pero esto es lo que propongo en cambio un efecto de sangrado. Así que selecciona el rectángulo naranja y habilita una sombra paralela en caso de que tengas un borde deshabilitado. Para el color. No queremos negros. En cambio vamos a ir por la naranja. Para los ajustes. He usado este efecto muchas veces. Y esto es lo que mejor funciona. Cinco para el campo y, cinco para B. Y finalmente, una opacidad que fijó en 30%. Te vendría bien más. Solo recuerda acercar y alejar. En. Una vez que deseleccione el botón, va a ver a lo que me refiero con efecto sangrar. Destaca bastante. Es como si estuviera brillando y es un detalle extra que a algunos clientes les puede encantar. Ahora, veamos qué más. Oh, el radio de coordenadas, por supuesto cinco píxeles como antes, es posible que desee probar un valor mayor como diez o 15 hasta usted. El caso es que no me gusta la posición de saltar este paso. Simplemente está flotando. Podríamos acercarlo, pero prefiero no obtener ningún clic accidental en él. Entonces hagamos esto. Consigue la herramienta tipo y correcta, o en negrita nueva Nieto 26 píxeles, blanco puro, por supuesto. Ahora centrado horizontalmente y muévelo tal vez a 50 pixeles del botón naranja. Ahora bien, aquí está lo que sí queremos que simetría es algo a lo que siempre debes apuntar. Entonces, si tenemos 50 pixeles arriba, necesitamos 50 pixeles entre ellos. Omita este paso y este ítem aquí. Sostén Alt y mide las cosas. Entonces si es necesario, usa tus teclas de flecha en tu teclado. Bien, Impresionante, pero ese no es el final. Obtener la línea a todas las teclas de acceso rápido L, y vamos a hacer algunas matemáticas. Sabemos que estos tipos son los 656 píxeles de ancho. Y ahí queremos dividir, pero sin ir a través de la palabra, eso no tiene ningún sentido. Entonces creo que 50 pixeles es suficiente para eso. Entonces hagamos esto. 656 -50, eso es 606/2, eso es 303. Bien. Arrastremos una línea y redimensionémosla. Use el panel de propiedades para la profundidad y cuando agregue la línea mantenga presionada Mayús, por lo que es perfectamente recto al blanco puro. Líneas. No tengas ningún relleno, así que no lo busques. En su lugar, cambie el grosor de aquí a escaras. Bien, ahora vamos a duplicarlo y colocarlo del otro lado. Debería ser bastante fácil de alinear. Tienes ese botón naranja arriba, así que por favor úsalo. Cuando estés listo, centro rojo con la palabra y tal vez agruparla aunque eso es opcional Control G. Y realmente creo que esto se ve increíble. Es interesante y en realidad ayuda al usuario a desplazarse por sus opciones. Tomemos un descanso y después de eso haremos un completo desglose. Muchas gracias. 29. Resumen del proyecto hasta este punto: Bienvenido de nuevo y enhorabuena, acabas de terminar la primera parte sobre la aplicación de entrega de comida a domicilio. Sé que ha sido todo un viaje, pero ojalá hayas llegado a este punto con un mínimo de morderse las clavos, jurar y rascar la cabeza, el proceso es algo difícil al principio, muy similar al rompecabezas de 1,000 piezas. Pero a medida que luchabas por progresar pieza por pieza, toda la imagen se convierte padre y puedes coger velocidad. No puedo enfatizar lo suficiente el valor de los pacientes y la dedicación. Esta aplicación de entrega es un proyecto del mundo real, algo que podrías encontrar en tu trabajo. Ya sea en una agencia de diseño o en cualquier plataforma de trabajo independiente. Este no soy yo alardear, pero la mayoría de los tutoriales diseñados no te muestran recaída. Solo son fotos bonitas y eso es todo. No se piensa en la funcionalidad detrás de ellos. Y eso es como aprender a andar en bicicleta cuando el mundo está lleno de camiones monstruo. Entonces mientras estás aprendiendo puede ser difícil, soy un firme creyente de que cuanto más duro sea el entrenamiento, más fácil será la pelea. decir, cuando consigues el trabajo, realmente puedes brillar. Y por eso este curso es como es. Ahora todavía nos queda un largo camino por recorrer. Pero, ¿por dónde empezamos con una estructura metálica simple que en el diseño? Después algunos experimentos de diseño, elegimos un tipo de letra que un esquema de color. Y resolvemos los problemas reales tratando de encajar tantos restaurantes y tantos platillos como sea posible en una sola pantalla sin que se vea ocupado sin desplazarse demasiado. Hablamos de relación de aspecto, tener la relación de aspecto correcta para estas fotos, la cadena de mando, también conocida como la pantalla Kino de alto nivel. Utilizamos tarjetas, iconos, diversas técnicas de topografía y aprendimos a usar el panel de activos. Entonces nuevamente, desde el fondo de mi corazón, felicitaciones por llegar hasta aquí. Quédate conmigo y te irá aún mejor. Sin embargo, el primer Green fue probablemente el más complicado. Y eso es porque puedes escribir tu ubicación en el campo, pero también puedes usar GPS de tu teléfono y tu dirección se va a rellenar automáticamente. También puedes saltarte este paso. Y entonces la app te va a mostrar unos restaurantes de la ciudad más grande. Ahora toda esta información está en el breve, y espero que la lea. Por último, puedes registrarte o iniciar sesión. Entonces todo el asunto es esto, saber estructurar estas cuatro acciones diferentes no es broma. Los clasificamos por su importancia y tomamos decisiones de diseño en consecuencia. Entonces por eso e.g usamos el botón fantasma. Por eso bajamos la opacidad de este rectángulo. Bien, En general, trabajo fantástico. Y nuevamente, enhorabuena por llegar hasta aquí. Si quieres terminar todo, vas a tener que seguir viendo. Muchas gracias. Se trata de Chris firmando por el momento. Gracias. 30. Cree las pantallas de inicio de sesión y registro: Bienvenido de nuevo. Comencemos con una copia de la pantalla inicial, mantengamos presionada la tecla Alt y arrastremos una copia debajo de ella. Esto es lo que vamos a utilizar para mostrar los campos de inicio de sesión y registro. Básicamente, vamos a mostrar lo que va a suceder cuando hagas clic en este botón en la parte inferior de la pantalla. Ahora eliminemos algunas cosas o saltemos este paso, para luego crear una cuenta, deseleccionar y echar un vistazo en el lado derecho para ver todos los estilos hasta ahora. Entonces esto es lo que deberías tener de tu parte también. Aunque los textiles no están engastados en piedra. Podrías tener más, podrías tener menos. Bien, ahora, arrastre el campo y el botón un poco más abajo para hacer un poco de inicio de sesión en la habitación y registrarse se puede mostrar usando pestañas. Así que toma la tecla de acceso directo L de la herramienta de línea y arrastra una hacia afuera. Con buscar el sexto, cinco-seis en términos de web, usa el lado superior derecho para eso. Entonces eso es 656, blanco puro con un grosor de dos. Recuerda mantener el turno al arrastrar por la línea si quieres que quede perfectamente recto. Ahora, por encima de esta línea, escribamos registro. Tenemos varios estilos, pero hagamos esta parte manualmente. Esto debería mostrarse en negrita Nieto nuevo y su dy. Esto es algo que se ha encontrado en nuestro proyecto con bastante frecuencia. Bien, da clic en estos tres puntos para obtener muchas más opciones. Ahora, quiero que todas mis letras estén mayúsculas, y esa es esta opción aquí. La razón detrás de esta elección es bastante simple a la vista, y eso es por la jerarquía. Ahora bien, esto ayuda a los usuarios a navegar a la pantalla más sobre eso un poco más adelante. Esto tiene que ser colocado a 20 pixeles de la línea, dar o tomar. Por supuesto que vamos a necesitar otra pestaña que se va a llamar login. Entonces por favor escribe eso en como antes, haz una copia y reemplaza las cosas. Para mantener las cosas intuitivas, vamos a bajar el peso de atrevido a regular. Ahora podríamos usar potencialmente un gris muy claro, como ddd para demostrar que esta no es la pestaña activa, pero en realidad tengo una mejor solución. Así que toma la línea existente de esta pantalla y luego duplicarla, Control D. Entonces vamos a hacer que sea deck de cuatro pixeles, que es el estándar según Google Material Design. Ahora para el color, voy a usar lo siguiente. Eso es f, d, d, z, esos siete, que es una tonalidad de amarillo, en realidad oro, que sí me gusta. Ahora bien, esto destaca, pero en la cantidad correcta no es neón, sino que está perfectamente bien. Bien, por último, podemos redimensionarlo usando algunas matemáticas en el campo W. Simplemente agregue barra debido al final de la misma y luego presione Enter. Y eso nos va a dar 328 pixeles, Eso es 328. Y con este elemento, ahora podemos alinear los dipolos. ¿Recuerdas cómo se hace eso? Seleccione registrarse con la barra amarilla y la línea horizontalmente, esta de aquí. Después muévete login a algún lugar en medio de la barra blanca restante , algo así. Es posible que desee acercar el zoom para este siguiente bit. Bien, agarra la barra activa con la blanca, así que dos cosas seleccionadas y luego las alinean a la derecha otra vez. Ahora podemos seleccionar login junto con la barra amarilla. Así que básicamente estamos constantemente agarrando dos artículos a la vez y los estamos alineando. Enjuague y repita enviado a estos chicos también. Y por último, selecciona ambas barras y muévala de nuevo a su lugar. Mueve el dorado a la izquierda en su lugar original. Y básicamente ese es el sistema DAB que necesitamos bastante de lo que necesitamos bastante espacio debajo para los otros campos. Así que coloca esto a unos 60 a 70 pixeles del logo. Vamos a tener correo electrónico, contraseña, número de teléfono, ciudad, etc. Así que vamos a necesitar tanto espacio como podamos conseguir. Y aquí es donde vamos a necesitar componentes. Cualquier contenido repetitivo, como un campo, debe convertirse en un componente por una simple razón. Ahora, imagina que vamos a tener 50 o los 100 campos dentro de este proyecto. Y luego decidimos, Oye, sabes qué, podríamos necesitar otra mirada, tal vez un radio de coordenadas diferente, un estilo diferente. Lo que entonces 100 campos. Imagínese eso. Ahora, como dije, potencialmente podríamos actualizarlos manualmente pantalla por pantalla, pero estoy usando un componente es mucho, mucho más inteligente. Ahora, en general, encontrarás componentes en la parte superior izquierda al hacer clic en los activos. Ahora no tenemos ninguno en este momento, pero llegaremos a ello en un minuto. Todavía aquí podemos ver nuestro número de página, Ese es el número uno. Ahora, en general, los componentes se mantienen en una página diferente. ¿Y por qué es eso? Porque lo mejor es ver todos tus activos por separado. Pero como quiero que sigas esto lo más fácil posible, lo que vamos a hacer es que vamos a hacer esto, agarrar la herramienta de cuadro, hockey F, y arrastrar uno aquí mismo en el lado izquierdo. No hay un tamaño específico en mente, solo uno aleatorio. Después cambia, rellena de blanco puro a tal vez un gris muy claro. Eso es porque es muy probable que los campos sean blancos. Y vamos a tener blanco sobre blanco, así que sí necesitamos un contraste decente. De ahí, el fondo gris claro. Ahora, puedes renombrar este frame y para descansar o recursos, los recursos enmarcan lo que quieras, solo para que destaque un poco y nosotros podamos identificarlo. Por último, podemos agregar el primer ítem aquí, el logo. Selecciona ambas capas y muévalas dentro de este nuevo marco, el marco Recursos. Entonces mira la cima del estigma en medio de este bar. Este es el icono con la búsqueda de Crear componente. Y se puede decir que es un componente mirando en el panel de capas. Este es el símbolo para el componente maestro. Un componente masivo simplemente significa el original. Y como queremos mantener el original agradable y seguro, lo hemos trasladado aquí en el marco de Recursos. Por supuesto, vamos a necesitar el logo en estas pantallas. Así que arrastra una copia con todos para arrastrar así. Ahora este clon, esta copia se llama instancia. Y nuevamente, se puede pensar en ello como una copia del componente original. Observe este icono en el panel de capas. Esto es un poco diferente. Éste es mar vacío aquí. Pero si hacemos clic en el componente original, la masa del componente que se llena, este es un icono diferente. Ahora bien, en caso de que este marco de Recursos esté demasiado lejos, siempre puedes hacerlo. Cambie a la pestaña de activos. A partir de aquí vas a tener componentes locales. Y luego debajo del nombre del marco, Eso son recursos en mi caso. Ahora desde aquí, simplemente puedes arrastrar una copia. Ninguna otra tecla de acceso directo, solo haz clic y arrastra. Recuerda siempre enviarles el logo. Entonces podemos usar el campo y, el lugar a 80 píxeles desde la parte superior de la pantalla. Entonces eso es ocho z aunque. Y básicamente ahora estamos usando componentes. Ahora te preguntarás por qué, Chris, ¿por qué deberíamos hacerlo? Porque podemos cambiar de opinión y hacer que el logo, por ejemplo , amarillo, ¿verdad? Oh, en realidad, creo que no agregamos ese color a los estilos de color. Así que manejemos eso. No es gran cosa. Selecciona la pestaña activa, utilízalas para que las puertas abran el color del menú de estilos y luego agrega esa entrada, llámalo resaltado o lo que quieras , dorado, amarillo, donde sea. Y luego podemos volver a Agregar componente. Entonces como dije, es muy útil porque podemos cambiar lotes y montones de instancias, aka copias jugando con el componente maestro original. Así como así, cambia de color y todo se actualiza. Pero obviamente necesitábamos de ancho. Entonces deshagamos con Control Z. Ahora podrías por supuesto jugar con el texto debajo, tal vez cambiar el peso, la alineación, la distancia, incluso el tipo de letra en sí. Entonces este es el poder de los componentes. vamos a usar bastante. Así que no te preocupes si no quieres el 100 por ciento, consíguelo. Por ahora, continuemos. 31. Uso de componentes: guía paso a paso: Bienvenido de nuevo. Tenemos que agregar bastantes campos para este formulario de registro. Ahora comience por mover el existente al marco de Recursos. Cambiemos también al panel de capas para que podamos ver en qué estamos trabajando. Entonces este es un diseño automático. Tenemos 20 píxeles a cada lado en términos de relleno y 15 en la parte superior e inferior, es un ancho fijo y la altura está establecida para abrazar el contenido. Bien, este es nuestro punto de partida. En primer lugar, vamos a necesitar la etiqueta más campos, ni etiquetas, para que sepas cuáles son. Ingresar tu ubicación es una pista. Es algo que te ayude con el formato, pero no es la etiqueta real. Así que toma la herramienta de tipo, tecla de acceso rápido D, y agreguemos esa etiqueta. Ahora para el estilo, esto se va a colocar sobre un fondo oscuro. Entonces hagámoslo. Nuevo Nieto, pero 30 en blanco puro. Y la mayoría de estos campos van a ser obligatorios. Entonces digo que añadimos este símbolo que se desplazó ocho en tu teclado. Se trata de una estrella o un asterisco como se le llama oficialmente. Y esto le dice al usuario que este campo es obligatorio. Tiene que llenarlo. Ahora para que destaque, vamos a usar nuestro color de acento, también conocido como nuestro color de resaltado, y ese es el amarillo en este caso. Ahora por favor ten en cuenta que solo he seleccionado la estrella, no toda la capa. Entonces así es como voy a aplicar estas cosas de grado de color. Ahora, la etiqueta tiene que dejarse alineada con el campo. Pero para mantener las cosas, seleccionemos todo y pulsemos Mayús a. así que hemos agregado otro, el diseño automático. Esto nos ayudará a mantener la etiqueta alineada a la izquierda, pero también podemos cambiar rápidamente el espaciado entre la etiqueta y el campo usando esta parte aquí. Impresionante. Ahora vamos con ellos por ahora. Esto va a ser un salvavidas si alguna vez cambiamos de opinión, recuerda 2050, 100 campos, esto realmente nos va a ayudar. Ahora, continuemos. Este icono de GPS podría cambiarse con otra cosa, ¿verdad? Entonces esto es lo que propongo. Primero, tenemos que seleccionar esas dos formas. El rápido es sostener Control, moverte por encima de él y darle clic en él. Verifique el panel de capas para eso. Hemos profundizado lo más bajo posible o menos, solo deseleccionamos y haz esto. Haga doble clic una vez y luego haga doble clic una vez más. Y ahora tenemos nuestro GPS, dragón de Saigón lejos de este VL porque hay muchas posibilidades de que lo usemos muchas veces. Y podríamos cambiarlo con un icono lleno o algo más, un ícono multicolor. Entonces ahora que está separado, vamos a transformarlo en un componente como de costumbre dando click aquí. Estupendas cosas. Ahora voy a arrastrar una instancia dentro de este diseño automático dentro del campo. ¿Y por qué? Porque a continuación vamos a transformar todo el asunto, todo el campo en un componente. Así como así. No te preocupes si no lo entiendes ahora mismo, solo confía en mí en esto, sigamos. Entonces por ahora tenemos tres componentes en total. Tenemos el logo, el GPS, y este campo. Ahora es el momento de arrastrar una instancia dentro esta primera pantalla arriba de mostrar restaurantes, pero no necesitamos la etiqueta ahí. ¿Qué vamos a hacer? Entonces, ¿en el formulario de registro? Claro. Sí necesitamos una etiqueta, pero no arriba. Entonces esto es lo que hacemos. Vamos a controlar. Haga clic en la etiqueta. Enfócate aquí mismo en el lado derecho de la pantalla en el medio donde dice capa. Observe que tenemos un símbolo aquí mismo. Dice crear propiedad booleana. Ahora, Booleano simplemente significa que es una opción sí o no, verdadera o falsa, uno o z aunque, binario. Haga clic en él y obtendrá esta nueva ventana. El valor predeterminado debe ser verdadero. Y eso es lo que el programa de nombre etiquetado suena casi bien. Crear propiedad y bueno, parece que no ha pasado nada. Aquí sí vemos este resaltado morado. Y si deseleccionamos, entonces damos clic en el componente dentro de la semilla, esta región de propiedades, y nuevamente mostrar etiqueta. Pero, ¿qué hace? Bueno, déjame mostrarte. Ahora deberías ver esta opción aquí mismo, mostrar etiquetada. Y claro que podemos alternarlo y se va o vuelve. Esta es una propiedad booleana. Le dijimos a Figma que queremos controlar la etiqueta si aparece o no. Pero fíjate si haces clic en el componente original, no tienes ese toggle. Y eso es normal. El toggle solo aparece en instancias en colonias, en copias. El componente masivo no lo tiene. Éste de aquí. Por último, puede que te decepcione que este campo se levante cuando se oculta la etiqueta. Después de todo, queremos 20 pixeles entre el campo y el botón, ¿verdad? Bueno, hagámoslo. Seleccione el Copiar y luego muévase aquí, dos restricciones. Aquí el valor por defecto se establece en izquierda y arriba. Queremos que se ponga a izquierda e inferior. Para cambiar eso, simplemente haz clic aquí. Es tan fácil como eso. Y ahora se puede ocultar la etiqueta se va a quedar, pero por favor vea de nuevo esta conferencia. Y cuando estés listo, podremos continuar con el icono y los campos de registro. Muchas gracias. Y recuerda, el toggle solo aparece en la copia, no en el componente maestro original. Bien. Buena suerte con ello. 32. Usa el swap de instancia para cambiar iconos rápidamente: Bienvenida de nuevo. Espero que consigas llegar hasta aquí. Ahora, necesitamos muchos campos para este formulario, pero tenemos aquí este ícono que en realidad no necesitamos. Vimos la propiedad de texto booleano para los textos obviamente, pero vamos a aplicarla aquí también. Dentro del componente principal, por favor seleccione el icono de GPS. Observe que esta es una copia. El original está por encima de él. No vamos a tocar esa. Bien, enfócate en la capa una vez más. Esto es lo que estamos buscando. Aplicar propiedad booleana. ¿Por qué no dice Crear? Porque ya tenemos uno para la etiqueta, pero no se preocupe. Vamos a dar click aquí para hacer uno nuevo. Llámalo show icon, aunque el nombre realmente no importa. En cuanto al valor por defecto, vamos a cambiarlo a falso. Y eso es porque la mayoría de los campos no van a tener un icono. Volvamos a tamizarlos con uno y echarle un vistazo. Ahí, ninguno el icono. Y con bastante buen aviso, hay un pequeño problema y no quiero perder el tiempo en ello. Ahora, en el componente principal, la pista ahora está centrada y eso no es bueno. Entonces, esto es lo que es qué. Ahora tenemos que cambiar lo siguiente. Seleccione el cerebro Auto Layout para el campo, este de aquí, y cambie su configuración para empaquetar. Esto por supuesto afectará a la pantalla, pero el que copie de la pantalla número uno, el ícono del GPS estará demasiado cerca de la mano. Entonces eso no sirve de nada. Aquí. Fui demasiado rápido y seleccioné el campo de instancia. Observe el panel de capas, esto es un error. Todavía puedo cambiarlo al espacio entre, pero no es lo que queremos. Así que usa Control Z y selecciona el diseño automático desde dentro de la instancia. Eso es lo que queremos. Bien, Ahora es el momento de agregar montones de campos. Así que arrastra el primero y céntralo horizontalmente, colocado a unos 40 pixeles de la barra amarilla, dale o toma. Por supuesto. El primer campo debe llamarse FullName. Reemplaza esa etiqueta. Y creo que tenemos que hacer lo mismo por la mano. Esto puede decir John Doe o Christian en ella. Cuando quieras, tienes nombre, lo que sea, dale a Escape y con ellos con él, vamos a tener bastantes campos, y este no necesita ser así de amplio. Entonces esto es lo que propongo. Al igual que la instancia, esta de aquí, esto debería estar configurado para arreglar aquí mismo. Entonces vamos a dar acceso a la web, dividir esto por dos agregando slash do en este campo, y ese es el 28. Ahora bien, la cosa es que también necesitamos un espacio vacío entre los campos. Así que vamos a quitar 20. Entonces ese es el, OH, ahora podrías agregar -20 en el campo o simplemente escribir 308. Ahora, tal vez se sorprenda al ver que este campo no está cambiando. Y eso es porque tenemos el diseño automático dentro de esta instancia. Entonces la instancia en sí tampoco es donde se puede ver el resaltado púrpura aquí mismo. Ahora, tenemos que seleccionar el Auto Layout, este de aquí. En lugar de fijo, vamos a necesitar cambiarlo para llenar contenedor. Ahora puedes preguntarle a Chris, ¿por qué Phil contenedor? Bueno, la instancia es el contenedor, el resaltado azul. ¿Recuerdas? Entonces estamos diciendo, Oye, este campo tiene que ser tan amplio como la instancia. Si la instancia el clon es 308, entonces también debería el campo correcto. Ahora bien, si la instancia se hace más amplia, sigue ese valor. La única otra opción es su contenido. Y eso simplemente significa, oye, Figma, hacer el campo como por qué hace el contenido en sí. Y el contenido en este caso es cristiano estéril. Eso no tendría sentido en esta situación específica. Entonces, obviamente, no lo vamos a usar. Hagamos otra copia y colocémosla a la derecha. La etiqueta debería decir ciudad también, la pista, vamos con algo básico como ciudad selecta. En Seleccione una ciudad. Creo que es Ciudad selecta. Ahora, esto significa que vamos a necesitar el desplegable. Ya tenemos uno en pantalla ellos, pero lo hacemos al lado de San Francisco. Así que selecciónala y muévala a la lluvia de recursos. Entonces vamos a convertirlo en un componente. Por favor tómate tu tiempo con él. Cuando estés listo, arrastra una copia de vuelta a San Francisco. Ahora, como hay bastante pequeños, posible que desee usar el panel de activos para eso, lo que sea que funcione mejor para usted. Cuando estés listo, pensémoslo. Regrese al campo de la ciudad y habilite un icono con el marco seleccionado, tendrá que cambiar el espaciado del espacio de elección empacado entre. Pero ahora mismo solo tenemos una opción de encendido o apagado para el ícono. Y básicamente eso no es lo suficientemente bueno. Entonces necesitamos poder intercambiar estos íconos para cambiarlos. Bueno, por suerte podemos hacer eso en Figma. Así que vuelve al componente principal. La forma más fácil de trabajar es usar el panel de capas y encontrar el GPS Saigón. Aquí, está ligeramente atenuado. Bien, ahora, mueve tu enfoque aquí del lado derecho. Aquí tenemos otro símbolo, justo en esta posición junto a donde dice GPS. Haga clic en él y vamos a tener un intercambio de instancias. Un intercambio de instancias simplemente significa que podemos cambiar el icono. Si deseleccionamos eso y luego seleccionamos el componente maestro, debe tener tres propiedades en total. Entonces eso es mostrar u ocultar la etiqueta. Intercambia el ícono, este de aquí, y finalmente, muestra qué ícono de di alto. Volvamos a seleccionar la ciudad. Los dos alternadores están aquí, y entre ellos, bajamos este trabajo. Por lo que sólo tenemos dos componentes de icono en este proyecto. Así que haz click aquí y deberías encontrar que los datos serán bastante rápidos. Es tan fácil como eso. Pero aquí está la cosa. La diferencia de tamaño rompe el icono y eso no sirve de nada. Pero sí tenemos una solución fácil. Así que vuelve al componente principal, la flecha, y luego vamos a usar un cambio de diseño automático a. ahora el tamaño está totalmente bien. Ahora no quiero aburrirte con varias explicaciones, pero recuerda esto, si eres los iconos tienen un tamaño diferente y quieres poder intercambiarlos. Simplemente use el día de turno en el marco Recursos sobre la masa del componente. Vamos a recapitular. Así que en el componente de campo, seleccionamos el icono GPS y usamos la característica llamada propiedad de intercambio de instancia. Una vez aplicado eso, podemos ir a un clon. Entonces una instancia, podemos cambiar los iconos en función de qué componentes tenemos disponibles en este proyecto. En nuestro caso, solo hay dos iconos, así que obviamente eso es bastante fácil. Ahora en caso de que el icono no encaje, necesitamos usar Shift a en el icono original, también conocido como el componente principal o maestro. Bien, continuemos. 33. Céntrate en tu velocidad: Bienvenido de nuevo. De vez en cuando, vas a tener estas sesiones intensas donde lo único que importa es tu velocidad, por ejemplo aquí mismo, donde necesitamos bastantes campos. Pongámonos a trabajar haciendo una copia del campo de nombre y arrastrándolo hacia abajo, cambiemos el ancho a 656 y el campo debería crecer sin ninguna otra configuración. Mueve el llamado principal a la acción hacia abajo y haz espacio y haz tu mejor esfuerzo para atravesar estos pasos mientras trabajo en segundo plano, déjame decirte algunas cosas sobre mi proceso de pensamiento. Entonces esto es parte del juego. Ahora bien, no importa cuántos trucos elegantes uses en Figma, esto es parte de ello. Ahora aseguró que el objetivo es trabajar de la manera inteligente y eficiente posible. Pero al final del día, tendrás tareas repetitivas, tediosas, tareas aburridas, y esta es una de ellas. Entonces, en lugar de quejarse de ello, se ponen como ejercicio, como una oportunidad para mejorar tus habilidades, C no hace nada difícil lo que está pasando aquí, pero hay que hacerlo. Entonces, como lo veo, me gusta desafiarme a mí mismo para hacerlo lo más rápido que pueda. Durante mi tiempo como CEO de mi empresa de diseño de aplicaciones, cinco años en total, he entrevistado a cientos de diseñadores y siempre les di habilidades. Claro, quería que conocieran las teclas de acceso rápido y tuvieran buenos conocimientos sobre el diseño del programa. Pero siempre busqué la velocidad. La velocidad me demuestra que valoras tu tiempo. La velocidad me dice que aunque no sepas algo, una vez que aprendas que una vez que te atrapen, vas a hacer un gran trabajo. Es uno de esos pocos indicadores que suelen buscar los empleadores. Ahora bien, si bien tu CV puede ser hermoso, no es suficiente para conseguir un gran trabajo. Por lo general ese tiene que ser algún tipo de prueba de habilidades. Y es fácil ver por qué. Debido a que algunos diseñadores pueden tardar 20 min en hacer este trabajo repetitivo, sí puede hacerlo y tener esa tal vez incluso menos deuda, ¿verdad? Esto por sí solo te dice mucho sobre ese diseñador específico. Tan enfocado en tu velocidad, así es como vas a causar una gran primera impresión. Contraseña web y estos campos están hechos. Pero aquí hay algo que quizás hayas notado. Seleccionar estos campos de texto no fue tan bueno para pasar un rato más fácil con ellos, podrías hacer esto. Entonces volvamos al componente principal y seleccionemos la etiqueta. En el lado derecho. Vas a encontrar esta parte que dice contenido. Y se puede ver que este es un campo donde nos muestra el texto actual. Y obviamente esto es etiqueta. Justo por encima de él. Tenemos este icono y dice crear propiedad de texto. Haga clic en él, y va a obtener una nueva ventana para el texto del nombre está totalmente bien, y el valor también está bien. Ahora bien, ¿qué hace esto? Bueno, selecciona cualquier campo. Y en el lado derecho, además de mostrar etiqueta, mostrar icono, también querrás tener esta opción para cambiar el texto directamente desde este lugar. Ahora bien, ¿esto te ahorra mucho tiempo? Bueno, está a discusión. Te mostré intencionalmente esta característica después de que volvimos a etiquetar manualmente todos estos campos. Porque la velocidad requiere práctica. Una cosa es entenderlo, pero otra cosa es hacerlo realmente de vuelta al componente principal. Si podemos editar la etiqueta, seguramente podemos hacer lo mismo por la mano. Así que simplemente Control haz clic en él para seleccionarlo y buscar el contenido en el lado derecho. Haga clic en el mismo icono y cree una nueva propiedad. En esta ocasión, esto debería llamarse, de ahí que el nombre importe porque tenemos que mantenernos organizados. Ahora tenemos el mango, el botón, pero vamos a necesitar el componente. Ahora, arrástrelo desde la pantalla registrada. Tenemos que colocarlo en el marco de Recursos. A partir de aquí, vamos a convertirlo en un componente así. Después selecciona el texto y vamos a hacer lo mismo. Vamos a hacer editable el texto. No hace falta nada más. Bien. Ahora, arrastra una copia y mantén el texto tal como está. Crear una cuenta. Sin embargo , vigila la ortografía. La distancia desde el último campo debe ser la misma que desde el primer campo, la barra amarilla. Te recomiendo 40 pixeles. Eso es para la z aunque, dar captación, por supuesto. Cuando estés listo para seguir adelante, haz una copia de este green y sé más eficiente posible con tus acciones. Ahora, voy a empezar desde abajo. Entonces el texto debería decir, ingrese a su cuenta. De nuevo, por favor vigila tu ortografía. Esto es bastante importante. Elimine los campos de nombre, CD y número de teléfono. Levante los campos de correo electrónico y contraseña y asegúrese de que coincidan con la distancia de la pantalla anterior. Dije volteó los píxeles, así que vamos a usar eso aquí también. Entonces levanta también el botón naranja. Trabajemos en el DAB. Mueve la barra amarilla hacia la derecha para cambiar el peso para estas capas. Por lo que registra esto debe mostrarse en forma regular. Y luego iniciar sesión. Obviamente eso tiene que ser audaz. Para terminar, necesitamos una nueva capa que se llame olvidó la contraseña. Así que haz una copia de la etiqueta y colócala al lado derecho si quieres, también puedes cambiar la alineación del texto desde la izquierda, alinear a la derecha por si acaso podríamos editarla más adelante. Ahora bien, podrías notar que esta nueva capa estará encima de la instancia y eso es totalmente normal, así que no te preocupes por ello, está bien. Bien. Hazlo amarillo. Y básicamente, creo que con casi hecho, no solo tenemos dos hermosas pantallas, sino que hemos aprendido mucho sobre el uso componentes y varias propiedades como Boolean, icon swap o la x propiedad. Bien, a ver si hay algo más. Y si no, sigamos. Muchas gracias. 34. Usa las propiedades de componentes, ¡como un profesional!: Bienvenido de nuevo. Ahora sabemos usar bastante bien los componentes. Entonces me gustaría seguir construyendo sobre ese conocimiento. Entonces, centrémonos en la barra de acción. Esto tiene que ser hecho en un componente también. Entonces esto es lo que propongo. Selecciona todos los elementos así que ahora usa Control C, Control V para pegarlo dentro del marco Recursos. O simplemente puedes arrastrar una copia, lo que sea que funcione mejor para ti. Ahora quita el rectángulo porque no necesitamos eso. Ahora hagamos esto. Selecciona estos tres iconos, el menú de hamburguesas, el filtro y la búsqueda. Todos estos necesitan ser convertidos en componentes. Y sí tenemos una opción aquí mismo donde podemos hacer múltiples componentes. Hola, un solo clic. Así como así. Impresionante. Ahora, ¿por qué no el desplegable? Porque ya lo tenemos aquí en caso de que no maneje eso por favor. Bien, vamos a levantarlos para que podamos ver todos los componentes originales arriba. Bien, Ahora arrastra algunos ejemplares. Primero, el menú de hamburguesas que los otros dos. Bien, es hora de algunos diseños de auto. Entonces, desplaza una derecha para estar en el lado izquierdo, y luego dos iconos en el lado derecho, nuevamente, desplazan a Hablando de eso, recuerda usar Shift a en la masa original de los componentes en los íconos ellos mismos. Eso es súper importante. Ahora vamos a mantenerlo sencillo. Entonces necesitamos 40 entre los íconos de la derecha y luego 20 para los de la izquierda. Ahora bien, podríamos establecer diferentes márgenes, por ejemplo, diez píxeles entre el desplegable y la orilla de comillas del nombre de la ciudad. Ese tipo de detalles hacen las cosas un poco más complicadas de lo que deben ser. Así que siempre voy a elegir la sencillez siempre que puedan. Tener un buen fondo, vamos a tener que seleccionar ambos diseños de auto y luego usar shift. Ellos una vez más, básicamente ahora este es un solo elemento. Y por eso, por supuesto podemos agregar el relleno p De lo contrario, por favor, aunque vamos a necesitar cambiar el relleno. Sin embargo, los ajustes son bastante simples. 32 píxeles a cada lado. En cuanto a la altura, aunque podrías mantenerlo establecido en z. Y he aquí por qué. Subir arriba. Ahora bien, aquí, ambos desplegables deben establecerse en fijos. Ahora bien, ¿por qué arreglado? Porque no necesitamos ninguna flexibilidad. Queremos 720 para el ancho y 112 para el alto. Ahora bien, ¿podríamos hacerlo flexible, receptivo, corto? Podríamos, pero como dije, vamos a mantenerlo sencillo porque eso no es necesario. Por último, necesitamos cambiar la posición del contenido a centro. Esto se hace dando click aquí, bastante simple. Y una cosa más, necesitamos cambiar el arreglo al espacio entre los hechos realmente no nos ayuda a cambiarlo. En esencia, esto se hace y podemos convertirlo en un componente. Bien, cosas geniales. Ahora, hagámoslo editable, como acabamos de aprender. Así que empieza con el control de texto. Haga clic para seleccionarlo junto al contenido. Haga clic en esta flecha para que el texto del nombre esté bien. Y por el valor por defecto que puede quedar San Francisco. A continuación, el desplegable. Aquí es donde quiero que hagas una pausa, a ver si controlas haz clic en él. Puede obtener esta capa, el vector real. Y puede que te enojes porque aquí no hay ninguna configuración. Lo único que ves es este icono que dice Seleccionar instancia. Y esa es una forma famosa de decirte, Oye, en realidad has seleccionado lo incorrecto. No creo que necesites estar aquí. No se puede hacer nada al vector real. Necesitas trabajar en la instancia. Así que puedes hacer clic aquí o simplemente puedes usar el panel de capas para seleccionar realmente la instancia. Puedes reconocerlo por este icono de diamante vacío. Bien, cosas buenas. Ahora apliquemos un booleano porque tal vez queramos apagarlo. Esto se hace usando este icono aquí desde la sección de capas. Cambiemos el nombre para mostrar desplegable. Ahora bien, ¿necesitamos aplicar una propiedad de instancia de swap? Realmente no lo creo para este, probablemente vamos a mantener este ícono. Pero, ¿y el resto? 100 por ciento, eso sí queremos. Así que empieza con el menú de hamburguesas. Haga clic aquí para crear un intercambio de instancias. Y cuando esta vez, por favor nombra a, digamos ICAM-1. Después selecciona el filtro, no el diseño automático, sino la instancia del filtro, crea el nuevo y llamémoslo Icono para finalmente el icono de búsqueda, una nueva propiedad que se llama Icono tres. Y ya terminamos, pero tenemos que probarlo. Entonces hagamos una copia de esta barra de acciones, e intentemos reemplazar un icono. Vamos con el menú de hamburguesas. Entonces por ejemplo digamos que queremos reemplazarlo con el icono del GPS. Entonces, ¿funciona? Y sí, lo hace. Ahora, aquí está la cosa. En caso de que el icono del GPS esté distorsionado, busque la masa del componente y luego use shift. Ellos, ya lo hice. Ahora, juega con él y mira si todo funciona bien. Al intercambiar un icono, es posible que notes un menú desplegable aquí. Tienes componentes locales y prefieres. Este segundo es útil en caso de que quieras importar la enorme biblioteca de iconos, cientos de iconos, tal vez incluso miles. Entonces lo que no quieres hacer es desplazarte como un loco. Entonces, lo que haces es elegir algunos íconos que tienen más probabilidades de ser utilizados para cambiar la lista preferida. Por favor, haga esto, seleccione el componente principal, luego vaya aquí y haga click en este símbolo para editarlo. A partir de aquí, vas a obtener valores preferidos. Y ahora puedes darle a este ícono Plus. Básicamente puedes verificar los componentes que podrías necesitar la mayoría de las veces que no. En caso de que no puedas manejarlo, solo usa este toggle para cambiar el modo de visualización. Y porque tenemos aquí, cambiemos algo porque cuento 123, eso no tiene ningún sentido. Así que en realidad puedes hacer doble clic aquí para cambiarles el nombre. Por ejemplo, el icono a la izquierda mucho más sentido que el icono derecho uno y luego el icono a la derecha dos. Y eso es mucho mejor con casi terminado con eso. Creo que olvidamos algo bastante importante. ¿Y si no hay título? Entonces selecciónelo en el componente principal, y vamos a aplicar una propiedad booleana para eso también, porque puede suceder. Así que esta vez, llámalo mostrar título por ejemplo porque los textos reales podrían cambiar. Pero ¿qué pasa con los dos íconos del lado derecho? ¿Siempre los vamos a necesitar? No lo creo. Entonces hagamos lo mismo. Mostrar icono, derecha, uno. Y entonces vamos a tener el ícono del show justo también. Por lo que estos se pueden establecer en true por defecto. Y cuando termines, vuelve al clon, a la instancia. Y ahí se destacó, no vamos a aplicar un booleano al menú de hamburguesas, porque en la mayoría de las apps, el icono de atrás siempre está presente. Bien, puedes quitar el título, puedes eliminar los iconos correctos. Ahora, para ser honesto, estoy muy orgulloso de ti por llegar tan lejos. Confía en mí, cuando empecé a aprender sobre estas propiedades, estos componentes y demás, lo pasé mal con ello. Lo aprendí paso a paso. Al principio fue frustrante. No estaba encontrando las propiedades adecuadas, pero estoy muy feliz de decir que con los pacientes y la práctica, finalmente lo conseguí. Y tú también Tomemos un descanso para que te pongas al día. Gracias. 35. Así es cómo usas variantes: Bienvenido de nuevo. Hablemos de varianza de componentes. Entonces tomemos la barra de estado. Tenemos que reutilizarlo una y otra vez. Pero y si tenemos 200 pantallas y luego el cliente dice, oye, no la quiero en blanco. Entonces debemos prepararnos para eso. Entonces arrástrela desde la segunda pantalla al marco de Recursos, y hagamos esto. Así que no voy a perder el tiempo con diseño automático para el lado derecho. Voy a guardarlo como está. En cambio, voy a convertirlo en un componente directamente. Ahora, quiero que notes algo mira arriba donde usualmente tenemos el Crear Componente pasado. No es diferente. Dice crear variante. Así que vamos a usarlo. Ahora podemos nombrar a éste demasiado oscuro o coloreado o algo así. Cambia al otro y llámalo claro o blanco o lo que sea. Esto nos va a ayudar a reconocerlos. Observe que hay una línea punteada alrededor de estos dos tipos. Entonces esto nos demuestra que estamos lidiando con la varianza. ¿Qué variaciones? Ahora para el segundo, usemos los colores de selección y hagamos que todos los iconos sean blancos. Entonces para el fondo, hagámoslo naranja con cualquier otro color. ver a qué va esto. Básicamente, estamos haciendo opciones, también conocido como varianza para lo mismo, para el mismo elemento. Entonces, si el cliente cambia de opinión, podemos activar un interruptor y luego terminar con él. Volvamos a la segunda pantalla y cambiemos al panel Activos. Voy a hacer eso para que veas cómo suele ir esto. Puede arrastrar la barra de estado como cualquier otro componente, ni la tecla de acceso rápido simplemente haga clic y arrastre. Por supuesto que hay que alinearlo, pero luego mira por el lado derecho y puedes elegir claro u oscuro. Y esto es totalmente impresionante. Arrastre otro para la pantalla número tres. Y ahora aquí hay otra situación para la varianza. Di que no pusiste una contraseña en la pantalla de inicio de sesión. Podríamos demostrar que el botón está deshabilitado, ¿verdad? Así que vamos a seleccionar el MainComponent y crear la variante. Llamémoslo deshabilitado, que es un término muy común. Entonces cambiemos el estilo. Entonces, eliminemos la sombra por completo y luego cambiemos el color del naranja brillante a cualquier grado que configures en el panel Estilos. Bien, ahora vamos a esa instancia y vamos a cambiarla del estado predeterminado. Ahora bien, el nombramiento del estado predeterminado no tiene mucho sentido. Así que vamos a cambiarle el nombre. Vamos a cambiarlo a activo e.g Y ahora ya sabes qué propiedad uno tampoco suena tan bien. Así que vamos a cambiarle el nombre a estado. Entonces el estado del botón, activo o deshabilitado. Entonces vas a familiarizarte con todos estos términos a medida que pase el tiempo. Los desarrolladores, los codificadores también están muy familiarizados con ellos. Y así así con hacer grandes avances con varianza. Ahora antes de que terminemos, manejemos la tercera pantalla. Aquí está mi enfoque. Selecciona ambos iconos, la flecha hacia atrás y la de información, y luego muévalos al marco Recursos. Puedes redimensionarlo en cualquier momento, por cierto, en caso de que lo desees más grande que usar diseños de auto para cada uno de ellos solo por si acaso. Impresionante. Conviértelos en un componente. Ahora, vuelve a la pantalla número tres aquí y algo a tener en cuenta, en realidad puedes arrastrar una copia de esta otra barra de acción. No es necesario usar el panel de activos o el marco Recursos. Es exactamente lo mismo, no importa en qué elijas confiar. Paso a paso, deshabilitó la flecha desplegable, no necesitamos eso. Reemplazó el ancho del título, maduró su entrega de pizza. Cosas increíbles. Para el icono de la izquierda, queremos la flecha hacia atrás. Tómate tu tiempo con él. Puede que no la tengas en tu lista preferida, pero podemos agregarla ahí en un segundo. Solo tómate tu tiempo con él, entonces deberías estar bien para ir. Hola El ícono, derecho, número uno, porque solo necesitamos el ícono info. Prepararlo y creo que ya terminamos. Sí, en general, este es un excelente progreso y estoy súper entusiasmado con ello. Seguro que necesitas practicar. Claro. Esto puede ser totalmente nuevo y tal vez un poco confuso, pero después de que lo hagas algunas veces, lo vas a conseguir. Confía en mí, te lo prometo, lo vas a conseguir. Sólo quédate con él. Como dije, vaya al componente principal y edite el icono de la izquierda en el back-end aunque a la lista preferida, porque es muy probable que lo vamos a usar bastante. Y con eso, tomemos un descanso. Muchas gracias. 36. Velocidad de ganancia: Bienvenido de nuevo. Echemos un vistazo y veamos cómo podemos mejorar el diseño. En primer lugar, manejemos la pantalla al sistema de clasificación. Arrástralo dentro del marco Recursos y mueve el ícono junto a los otros. Bien, esto es perfecto. Ahora, conviértalo en un componente. Y cuando eso está hecho, Lee arrastra una copia. Ahora, volver a poner el emoji dentro del marco de diseño automático puede ser un poco complicado en el lienzo mismo. Pero si no puedes administrar, solo usa el panel de capas. Arrástralo y suéltalo. Ahora bien, recuerda, nunca pongas un componente principal dentro de otro, eso no funciona. Bien, vamos a convertir esto en un componente y luego vamos a sumar el final. Ahora, potencialmente podríamos hacer tres de ellos. Eso es lo que dice el brief, pero voy a mantenerlo un poco más sencillo. Así que arrastra a otro MOG, uno enojado, y tienes uno adjunto y se llama exactamente así de enojado. Esto tiene que ser 40 por 40 y el color que claramente es malo. Ahora, no tengo un color específico. Mente dorada, solo ve con algo que se vea lo suficientemente diferente de nuestra naranja. Algunas personas podrían confundir nuestro naranja o rojo, así que asegúrate de usar algo que sea lo suficientemente diferente. Bien, hagamos el emoji o componente enojado también. Entonces obviamente arrastra una copia. Por cierto, estoy constantemente por conseguir una cosa. Siempre que convierta un icono en un componente, asegúrese de configurar el diseño automático. Entonces ese es turno ellos, cada ícono aquí necesita este turno, un tratamiento. De lo contrario, no va a quedar bien. Ahora, veamos qué es qué. Ahora bien, esto puede ser un poco difícil, pero realmente quiero que lo hagas de esta manera. Entonces, después de tener una variante de la tarjeta original, quita el emoji verde, y cambiémoslo manualmente por uno enojado. Ahora otra vez, deberías usar tu panel Capas para esto. Esta es la forma más difícil de hacerlo, pero realmente creo que es cama mojada. Recuerda, siempre trabaja con colonias, no con componentes originales. voy a decir una y otra vez porque es bastante importante. ¿Bien? También puedes reemplazar los porcentajes y el número de votos si aún no lo has hecho, solo hazlo sentir real. Y cuando todo esté dicho y hecho, puedes arrastrar una copia desde el panel de activos o en cualquier otro lugar y probarla. Se puede nombrar la propiedad, estado o estado, o algo así. En cuanto a la varianza en sí, buena o mala, positiva o negativa, verde o roja, sea cual sea la palabra , lo mejor para ti. Repito, en realidad a nadie le importa. Es sólo para ti. Lo que más importa es que mantengas las cosas simples e intuitivas. Tómate tu tiempo y agrega clones a la pantalla número dos. Después de eso, creo que ya casi terminamos con eso. Ahora bien, ¿podríamos haber usado Auto Layout y varias otras cosas para la entrada al restaurante? 100% seguro de que podríamos convertir todo en un componente, tal vez hacer algunas variantes para aquellos casos en los que el restaurante está cerrado por el día, por ejemplo, pero ahora estamos hablando de cosas de afinación fina que se suele hacer al final de un proyecto caro. Básicamente es más de las mismas técnicas. Entonces voy a saltarme eso y llamaré a éste. Entonces. En cambio, hagamos esto para practicar mi velocidad. Voy a rehacer el login y registrarme para verbos, pero con un fondo blanco, uno limpio. Entonces hagámoslo. Empecemos con una copia de la pantalla número tres. Ahora, veamos qué tan rápido podemos manejar las cosas. Para el intercambio de títulos. Por favor cámbielo con, por favor inicie sesión o regístrese, luego no hay ícono de información en el lado derecho. No necesitamos eso. Y básicamente eso se hace para la parte superior. Ahora para las pestañas, volvamos a cambiar el tamaño de la barra al sexto año. Es la mitad de 720 porque solo necesitamos poner huevos. Eso es registro. Y luego iniciar sesión. Por favor reemplace el texto, pero podemos mantener el estilo tal como está, naranja y negrita, y luego regular y gris para el otro, para el inactivo. Sin embargo, lo que voy a hacer es que voy a habilitar la transformación all caps. Esto está un poco escondido en Figma, pero eso está totalmente bien. Bien, esto va a ir, recuerde enviar la V barra activa como antes, aunque, antes de hacer eso, es posible que desee cambiar el texto a texto central en lugar de a la izquierda. Eso nos va a ayudar con toda la alineación. Bien. Ahora bien, las pestañas mismas, tardan sólo un minuto, pero bueno, yo me encargué de eso. Piensa en los campos. Son blancos y este es un fondo blanco y va a ser un problema. Entonces pensemos. Ahora podríamos habilitar una sombra paralela. Pero realmente no quiero una fea. Prefiero sombras suaves que no destaquen. realmente visibles son bastante feos. Entonces por eso, creo que vamos a usar un fondo de color. Vamos a cambiarlo. Entonces, hasta entonces, eliminar todas las entradas. Aquí está la forma más rápida de trabajar. Toma todos los campos de la otra versión de este verde y luego arrastra una copia aquí. Ahora coloca todo a 30 pixeles de la parte superior y deberías estar bien para ir. Espero que estés viendo el tema con blanco sobre blanco. No va a funcionar. Ahora, el conjunto fijo, seleccione el tablero de arte, y luego vamos a muestrear el color de la pantalla con du. Ahora bien, el código coloreado en caso de que estés siguiendo es f z aunque, F11, F8. Pero es más sencillo y rápido probarlo. Entonces, eso es lo que la herramienta cuentagotas es cuatro. Entonces vamos a darle un buen uso, ¿verdad? Pero incluso con el fondo, los campos aún no destacan. Además, la etiqueta también es blanca. Entonces, ¿qué debemos hacer? Bueno, esto exige el final mismo. Volvamos al marco de Recursos y veamos qué podemos hacer. Siempre tómate el tiempo para arreglar a todos estos chicos correctamente. En general, los tendrías en una página separada con espacio infinito, pero yo quería mantenerlos cerca para que los veas constantemente. Bien, vamos a crear la variante y llamarla para el BG simple, para fondo simple o algo así, eso tiene sentido para ti. Ahora, la etiqueta tiene que ser azul, mismo peso, pero diferente color. Debería quedar bien. Ahora, en cuanto al asterisco, eso se va a mostrar bastante bien en naranja, creo que va a destacar. Ahora. Vamos a ver en un minuto si efectivamente se ve bien. Ahora para el campo en sí, vamos con una sombra básica. De hecho, voy a mantener la configuración que los valores predeterminados. Ahora bien, aquí está la cosa. De hecho, podríamos usar una tabla que también. Bueno la prueba, varias otras cosas. Pero en definitiva, estoy bastante feliz hasta ahora. Ahora, vamos a probarlo. Entonces. Vas a ver algo. Cuando cambias todos estos campos sin la variante a la nueva, solo se aplica la sombra. El color de la etiqueta en realidad no cambia. He aquí por qué. Regresa al mismo final. Si quieres poder editar tu nivel de gallinas que cambiar la variante a otro estado, específicamente cambia de color, tendrás que usar un fail. Aquí tenemos dos colores. Pero para que esto sea más fácil, vamos a hacerlo. Voy a quitar el asterisco para que el relleno ya no se mezcle. Eso es lo que está causando los problemas. Ahora bien, debería ser azul, el color principal. Entonces ahora si vamos a probarlo, vas a ver que esto funciona bastante bien. Incluso podemos cambiar el contenido de la etiqueta y luego cambiar entre estados. Entonces estamos cambiando los textos reales. Y luego con aplicar el nuevo estado y funciona, todo está bien y bien, ese era el tema que estábamos teniendo mezclado bajo relleno y eso estaba fastidiando las cosas para la Figma. Pero ¿qué pasa con los hombres que aunque el símbolo ese es el riesgo? Bueno, el asterisco necesita establecerse como otra capa de texto. Hagamos que eso suceda. Entonces, una vez que lo tengas, asegúrate de que esté arreglado correctamente, luego configura el relleno. Ahora para el primero, esto tiene que ser amarillo claro, porque es para un fondo de color. Seleccione eso con la etiqueta y luego use shift. Ellos, por defecto, van a ser apilados. Pero se puede cambiar la orientación de aquí, de vertical a horizontal. Y básicamente estamos bien para irnos. Repite lo mismo en la variante. Agrega la estrella, cambia de color a nuestro naranja, luego usa un diseño automático junto con la etiqueta. Bien, ahora he cambiado la orientación. Y básicamente estamos bien para irnos. Permítanme recapitular, porque teníamos dos colores diferentes en la etiqueta cuando cambiamos varianza, cuando cambiamos de estado, la etiqueta permaneció blanca. Figma se estaba confundiendo. Los higos que hemos separado el asterisco y hemos aplicado un color para la etiqueta y otro para la estrella. Además una cosa que puedes hacer es configurar un textil, llamarlo etiqueta o lo que sea que el etiquetado creo que está bastante bien. Por si acaso obtienes una doble estrella en las pantallas anteriores. Eso es solo porque lo escribí manualmente, probablemente hiciste lo mismo. Entonces lo que vas a tener que hacer es que vas a tener que quitarlo uno por uno. Una cosa a tener en cuenta es que no hice el asterisco en un componente. Eso no hace falta, al menos no ahora mismo. Bien. Creo que estamos bastante buenos. Por favor, asegúrate de ver esta conferencia al menos dos veces. Tenía muchas ganas de incluir esto en el curso porque es un error que he cometido yo mismo cuando empecé con la varianza. Y creo que lo mejor es que lo sepas ya que trabajo en segundo plano, déjame decirte la comida para llevar. Cuando se trata de botones o campos. Siempre piensa en los Estados desde el principio y créalos lo antes posible lo antes posible. Ya sabes, la mayoría de los botones necesitarán un estado deshabilitado. Ya sabes, la mayoría de los campos requerirán una etiqueta de encendido o apagado. Entonces esa es la experiencia para ti. Así que en el próximo proyecto, puedes crearlos de inmediato. Y claro que puedes llevarlo aún más lejos. Se puede pensar en estados hover. Si este es un sitio web o estados activos para el campo, tal vez validación, tal vez un trazo rojo cuando pones en el formato incorrecto para la contraseña. A lo mejor la contraseña es demasiado corta, cosas así. A lo mejor un trazo verde en el campo si todo está bien. Ahora bien, todas esas cosas se manejan mejor al principio. De lo contrario, podrías tener problemas como el que acabamos de encontrar. Ahora, antes de terminar, me gustaría cambiar la posición de los botones en la parte inferior, 32 píxeles del borde. He hecho esto antes que otros proyectos, y creo que realmente tiene sentido para el usuario. Básicamente te acostumbras a esta posición y es más fácil para el usuario. Sabes que siempre está ahí en el fondo. Son gays. Con eso. Vamos a continuar. 37. Uso de campos de la manera correcta: Bienvenido de nuevo. Trabajemos en agregar nueva dirección y mi inflamación, que son dos pantallas basadas en campos. Y eso es todo. Así que empieza con una copia de la última pantalla y tomémosla desde arriba. Reemplacemos el ancho de la Biblia, agreguemos la nueva dirección. Puedes quitar las pestañas porque no las necesitamos. Pero eso nos demuestra que aquí no tenemos una separación clara. Entonces tenemos que hacer algo. Básicamente, agreguemos la sombra de Effects. Esa es la forma más sencilla de manejarlo. Ahora los ajustes deberían ser para el desenfoque. Y dos para la y Esta es una sombra muy, muy suave, pero así es como generalmente debes acercarte a ellas. Si puedes ver claramente una sombra, entonces probablemente esté terminada. Bien, Ahora vamos a arrastrar algunos campos nuevos que necesitamos para anecdóticos. Me encantó el hecho de que después de la copiadora hacer Figma se da cuenta de que quieres un poco más. Entonces, cuando presionas Control D , automáticamente coloca la siguiente copia correctamente. Esto es algo precioso. Buen trabajo. Figma. Cuando estés listo, ponte a trabajar y reemplaza todas estas etiquetas. Y de ahí, tengo mi wireframe en la otra pantalla para poder leerlos con bastante facilidad. Es por ello que realmente vale la pena tener dos exhibiciones, su ciudad. Y luego la mano es, seleccionar la ciudad. A continuación tenemos nombre de calle y eligieron una pista que dice Market Street. Por lo que yo sé, esa es una calle real en San Francisco. Si el cliente es de ahí, esto va a hacer que se sienta más real. Ahora, el número de la calle, digamos 548 con algo para la pista. Entonces finalmente el código postal que busqué en Google, es 94104 dash 5401 juego. Se meten con ello y nunca los dejan en sus valores por defecto. contenido repetitivo es probablemente El contenido repetitivo es probablemente lo peor que puedes hacer como diseñador. Bueno, uno de ellos, al menos. Ahora para la ciudad, vamos a necesitar el icono desplegable. Entonces, por favor, habilite desde ese interruptor y luego use el menú desplegable para seleccionar el triángulo. El espaciado tiene que cambiarse de empaquetar el espacio entre, pero ya lo hemos hecho diez veces. Entonces creo que puedes manejarlo. Ahora para el botón, debería decir Crear dirección. Y creo que eso es todo. Ahora voy a hacer zoom a la otra pantalla, a mi información, porque básicamente es exactamente lo mismo, las mismas técnicas. En tanto, creo que la próxima característica más emocionante es Content Grid. Esta es una característica de Adobe XD que te permite poner un montón de contenido con facilidad. Entonces, por ejemplo digamos que tienes 20 miniaturas y quieres 20 imágenes diferentes. Bueno, en lugar de insertarlos uno a la vez, simplemente los arrastras. Y eso es que el programa hace esto. Además es lo mismo con las capas de textos. Es una de las cosas más impresionantes de Adobe XD. Y ahora como Adobe ha comprado Figma, bueno, espero que sea solo cuestión de tiempo hasta que obtengamos esta función. Ahora, conociendo a Adobe, puede tomar semanas o puede llevar años, Eso es, habrá para ti en pocas palabras. Es una compañía enorme y poderosa, pero algunas cosas son increíblemente lentas, especialmente algunas características. En fin, estos son todos los campos bien abotonados. Por favor, asegúrate de manejar todo de tu parte y luego continuar con la siguiente conferencia solo después de haber hecho este paso. Muchas gracias y te voy a ver en un segundo. 38. Cree el menú izquierdo: Bienvenido de nuevo. Diseñemos un hermoso menú de la izquierda de acuerdo con las pautas de diseño de materiales, comience con una copia de la pantalla anterior, aunque vas a tener que eliminar casi todo. Solo la barra de estado es útil. Entonces vamos a construir este menú desde cero. Si no estás familiarizado con el menú de la izquierda, es lo que obtienes al hacer clic en el menú de hamburguesas es cómo llegas a tu configuración, tus métodos de pago, etc. Empecemos con un rectángulo para el área superior. Esto tiene que ser 720 por 288y 288 píxeles. Ese es el estándar 144 dp duplicado. Ahora vamos a hacerla naranja, aunque esto puede ser un degradado o incluso una foto. Por eso en realidad me gusta este diseño a pesar de que es de Google Material Design para colocarlo correctamente. Y después de eso, coloquemos el logo encima de él. Ahora, el logotipo podría ser reemplazado por un avatar. Y nuevamente, esa es una buena característica del menú de la izquierda. Lo hace más interesante. Pero aquí está lo que pasa con el logo. No queremos el texto, solo el icono. Ahora podríamos crear potencialmente una propiedad booleana, pero mantengámosla simple. Desde el marco Recursos, simplemente arrastre el icono afuera. Como se puede ver esto como un vector independiente, sin componente, nada. Esto está totalmente bien. Llévala a una nueva pantalla y vamos a redimensionarla. Creo que uno a cinco por uno a cinco es justo para este rectángulo específico. Y eso es porque nos va a dejar suficiente espacio para agregar algunos detalles como el nombre del usuario y su dirección de correo electrónico. Ahora, tal vez preguntes, Chris, ¿podríamos usar un diseño automático aquí? 100 por ciento? Por supuesto. Ahora, ¿necesitamos agregar un diseño automático? No, en realidad no. Entonces por eso voy a mantenerlo sencillo. Reproduce el logotipo a 32 píxeles del lado izquierdo. Y puedes usar el campo x para eso. O potencialmente podrías mantener presionada la tecla Alt y medir las cosas, luego tocar tus teclas that 'll y eso está bien. Ahora bien, la distancia desde la cima no importa que este momento específico. Debajo, escribamos mi nombre, Christian Baron quest Barron. En cuanto al estilo, título más pequeño, debería estar bien. Izquierda alinearlo con el icono, y dejar unos diez píxeles de él, dar o tomar. Por supuesto. Por último, la dirección de correo electrónico, Chris baron@yahoo.com. Ese no es mi correo electrónico real, así que por favor no lo uses. En realidad no me envíes un correo electrónico en general, usa la plataforma para que te sujeten rápido o por supuesto, el servidor de discurso. Siempre estoy ahí. ¿Bien? Esto debería mostrarse en el estilo de carrocería, pero en blanco puro. Y con los tres elementos seleccionados, ahora podemos moverlos hacia arriba o hacia abajo para colocarlos en el centro del rectángulo naranja. Ahora otra vez, ¿podríamos usar un diseño automático? Claro, claro, pero estoy bien con ello tal y como está. Avanzando hacia abajo, vamos a necesitar bastantes iconos y capa de texto. Ahora bien, el fondo en sí mismo necesita ser de color blanco puro. Selecciona el marco y vuelve a cambiar el relleno a blanco puro. Una cosa que no mencioné es el hecho de que el menú de la izquierda es en realidad dos tercios del ancho de la pantalla. Pero fuimos de ancho completo porque no tiene ningún impacto en este momento. Para que podamos continuar como está. Ahora. Es hora de algunos íconos. Ya tengo algo preparado. Estos son de flat icon.com. Pasé bastante tiempo buscándolos. Los tienes unidos y luego también numerados de arriba a abajo para que puedas pasar un rato más fácil con él. Por favor. Sin embargo, no los use con fines comerciales. Los tienes solo para que puedas trabajar si quieres usarlos para tus propios proyectos, tenemos que pagarlos. ¿Bien? Ahora, cuando arrastras muchos iconos dentro, es posible que tengas algunos problemas con ellos. Por ejemplo, si traté de seleccionar los cinco primeros de ellos, mira lo que pasa. El quinto icono no está siendo seleccionado en este momento. Tengo que hacer una caja mucho más grande para agarrarla. Entonces esto puede ser un poco frustrante tener un tiempo más fácil con ellos. Te sugiero que hagas esto. Entonces, una vez que logre seleccionar los cinco para hacer una selección de caja, por favor use Shift a, luego cambie el modo de diseño de horizontal, el predeterminado en este caso dos verticales. Ahora, una cosa que queda es establecer la distancia. Voy a decir como 60 o algo así. Y eso es porque queremos evitar clics accidentales. Entonces tenemos que ser generosos sin espaciar. Por supuesto, siempre centraron los íconos. Esto es un imperativo absoluto. Puede que tengas la tentación de alinearlos a la izquierda, pero por favor ve con el centro. Puedes hacerlo haciendo clic aquí. Bien, En cuanto al espacio vacío ahí, d2 píxeles como antes, mantengámonos consistentes. Siéntase libre de usar el campo x mientras tenemos el diseño automático configurado. Lo mejor de esto es que siempre puedes eliminar el diseño automático. Simplemente haga clic aquí en el extremo menos, básicamente lo que luego con él. Ahora, por defecto, van a agruparse, pero no se preocupe, simplemente haga clic derecho y elija Desagrupar. Ahora, ¿por qué querrías hacer eso? Porque queremos agregar algunas capas de texto y podríamos tener un tiempo difícil alinearlas correctamente si el grupo juntos. Bien. Ahora, permítame agregar el primer ítem o la escuadra solo ordena en general. Quiero que esto se muestre en el estilo de etiqueta. Entonces eso significa nuevo Nieto 30, audaz. Si no lo tiene, por favor, configúrelo como textil. Eso es lo que el color azul es totalmente fino. Por favor, alinéelo verticalmente y Figma debería ayudarte con esas líneas rojas. Pero aquí está el problema. Los iconos no están dentro de esta pantalla. la pantalla se le llama marco para el, pero los íconos en sí están mucho más arriba. Básicamente los arrastre dentro de Figma, pero probablemente no tenía frame para deseleccionado. Entonces Figma no los colocó dentro de él. No se preocupe. Seleccione todos ellos y arrástrelos al marco 40. Eso va a arreglarlo. Bien. Esto es bastante bueno. Impresionante. Voy a adelantar la palabra mientras hago todas las demás en orden, vamos a tener lo siguiente. Entonces el primero, mis órdenes, luego inflamación aborda ¿qué dirección? Formas de pago y contáctenos. Estos iconos son bonitos y elegantes, pero son bastante serios. Podrías buscar los que sean un poco más interesantes, tal vez un poco más juguetones. Ahora los de colores pueden ser tentadores, pero hay que asegurarse de que no hagan que la aplicación se vea infantil porque la fuente ya está del lado juguetón. Entonces tienes que asegurarte de mantenerte alejado de eso. Ir a territorio amigable con los niños puede ser peligroso. Quieres quedarte semi-profesional. Bien, Esto se ve bien. Hagamos en la parte inferior vamos a tener un botón de cierre de sesión. Entonces hagamos que suceda. Entonces agrega otra capa de texto. Y vamos a hacer algo así. El texto en sí, no es nada especial. Vamos a tener un icono separado para ello. Ahora, solo como nota al margen, podríamos haber usado algunos diseños de auto aquí y allá. Así podríamos ajustar el espaciado entre los iconos y el texto así como entre cada fila. Pero sabes qué, en realidad voy a dejar que te encargues eso porque debería ser bastante fácil de hacer. Ahora para terminar el diseño, separemos el área de cierre de sesión agregando un divisor. Así que obtenga la tecla de acceso rápido L de la herramienta de línea y dibuje una, 720 con un solo píxel para el grosor. Ahora, elige el color gris del cuerpo. Deberías tener un estilo guardado como color. Y la cosa con todo con bueno para ir. Aquí está la cosa. Este es un menú de izquierda moderno, limpio y profesional. Podríamos hacer algo un poco más interesante. Pero otra vez, te voy a dejar a ello porque sí quiero verte virgen y quería darte muchas opciones. Así que de nuevo, vas a tener que llegar a algo un poco más interesante. Por ahora, podemos continuar. 39. Cree casillas de verificación interactivas: Bienvenido de nuevo. Tenemos que manejar el menú correcto. Comienza con una copia de la izquierda. Elimine el icono de cierre de sesión y texto, así como todos los demás iconos. Ahora podemos mantener el divisor y las capas de texto. Este va a ser un sistema de filtro que permita al usuario cambiar la lista de resultados. Es lo que obtienes al hacer clic en este icono desde la parte superior derecha en la pantalla de ellos, pero hazlo. Ahora para el primer lote de opciones, escribiremos estas categorías. Entonces vamos a tener español, americano, internacional, indio. Y finalmente es Valiente, sin puerta, tómate tu tiempo con ella. Potencialmente podrías agregar algunos más o puedes eliminar algunos de ellos, solo asegúrate de que encajen. Ahora vamos a obtener la herramienta rectángulo con buscando crear una casilla de verificación. 48 por 48 hojas para el radio de coordenadas que los píxeles está bien. Bien, echemos un vistazo a la configuración. Desactivemos el relleno. No necesitamos eso. Y activemos el trazo o el tablero la puerta. Ahora el color del borde es bastante importante. El grosor, tres pixeles por favor. Entonces ahora para el color, así que la cosa es, si es demasiado ligero, puede parecer deshabilitado o inactivo. La oscuridad puede ser vista como también en tu cara. Entonces me decidí por este código de color, C3, C3, C3. Ahora siéntete libre de guardarlo. Entonces colorearás estilos como gris claro o algo así como ese color de casilla de verificación. Ahora creo que como el gris funciona un poco mejor. Ahora bien, esto en realidad va a ser un componente. Así que vamos a convertir eso haciendo clic aquí. Cuando estés listo, muévelo al marco de Recursos. Ellos buen momento con ello. Vas a tener que desplazarte un poco por ahí. Recuerda, aleja el zoom, presiona Control, usa el desplazamiento del mouse, usa la tecla de paseo espacial para desplazarte. Aquí queremos crear la variante. Ya deberías estar familiarizado con el proceso . Aquí está la cosa. Quitemos el borde y hagamos que todo el rectángulo sea naranja. De nuevo, tómate tu tiempo con él. No lo apresures. Bien. Cuando estés listo, vamos a tener que añadir la marca de verificación. Y como siempre, he preparado algo. Tienes este ícono, el lote, arrástralo dentro, pero aquí está la cosa. Cuando quieras alinearlo dentro de este cuadrado, asegúrate de echar un vistazo al panel de capas. Eso es porque es bastante fácil desorientarse. Y quizás no sepas por qué las herramientas de alineación no funcionan como se esperaba. Esto es lo que quieres. ¿Bien? Por cierto, asegúrese de cambiar el nombre de la propiedad. Y en realidad también las dos variantes. Llámalos verificados y sin marcar como lo que la propiedad en sí. Ese es el estado probablemente creo que está bien. Estado, lo que sea que funcione mejor para usted. Entonces otra vez, eso está comprobado y sin marcar. Bien, volvamos a la pantalla. Tenemos que arrastrar esta casilla de verificación desde el panel de activos y hacer bastantes movimientos para alinearlos correctamente. Ahora, como estoy trabajando en segundo plano, sí quiero decir que realmente disfruto enseñando diseño AB. Este proceso en sí se basa en algunos principios y técnicas. Una vez que los hayas dominado, realmente puedes concentrarte en lo que es importante. Y así es como se ve y se siente y funciona la app. Como dije, el millón de veces, nadie le importa cómo creaste la app. No es de su incumbencia hacer componentes, varianza y diseños automáticos. El resultado final es lo que importa, cómo se ve, cómo funciona. Eso es lo que importa. No importa si lo hiciste en Photoshop, Figma y Adobe XD. Ahora, obviamente quieres usar las mejores herramientas para el trabajo y las técnicas más avanzadas. Pero nuevamente, el enfoque en lo que es importante. Bien, volvamos a ello. si acaso necesitas algo de flexibilidad aquí, selecciona cada casilla de verificación y mareas juntas y luego usa Shift lo haces para cada opción. Vamos a seleccionarlos a todos. Y luego lo adivinaste, vamos a hacer otra, la maquetación automática. Y aquí está la cosa. Necesitamos tenerlos porque el primero controla la distancia entre la caja y el texto, la casilla de verificación en el texto. Entonces digamos que queremos 20, bueno, solo selecciona todos esos marcos y podrás cambiar rápidamente ese espaciado es bastante sencillo. Y luego el grande nos ayuda a cambiar la distancia vertical. Queremos 40 por ejemplo, ¿verdad? Nuevamente, simplemente escriba eso en. Impresionante. Ahora para darle algo de contexto al usuario, agreguemos un texto que diga Mostrar solo. Esto sí cambia un poco el diseño, pero creo que está bien. Necesita el estilo del texto del cuerpo y el gris para el código coloreado. No queremos que destaque demasiado. Recuerda, esto es solo una pequeña parte del menú. En realidad tenemos dos tipos de filtros. Entonces tenemos tipo de cocina y luego tipo de comida. Cuando estés todo listo, sube el divisor desde abajo. Queremos alrededor de 30 píxeles desde la última casilla de verificación hasta el divisor hasta la línea. Impresionante. Ahora la idea es mostrarle tanto al cliente al desarrollador cómo se supone que debe verse este panel. Así que asegúrate de cambiar el estado de dos o tres casillas de verificación. Hazlos anaranjados, entonces por favor haz lo mismo para el texto asociado. Sólo hazlos anaranjados. Cuando estés listo para seguir adelante, simplemente toma todo aquí y haz una copia abajo. Ahora, déjame acelerar las cosas a medida que cambio el tipo de comida. Entonces esto va a ser pizza, tacos, hamburguesas, café, las obras. Algunos artículos podrían no caber dentro de la pantalla, pero eso no es gran cosa. En realidad. Es genial porque tenemos que demostrar que esto es desplazable. Bien, ahora aquí está la cosa. Tenemos el área superior sin cambios y eso no es genial. Ahora, en general, cuando se trata de filtros, se debe tener una manera de limpiarlos. Entonces, por ejemplo, si tenemos cuatro casillas de verificación, sería bastante molesto desmarcarlas manualmente. Entonces hagámoslo. Quitemos el logotipo y la dirección de correo electrónico. Con la capa de texto restante, vamos a cambiarla a cuatro filtros activos. Y en el lado derecho, me gustaría usar un icono. Pero creo que esa capa de texto podría funcionar un poco mejor. Ser más amplio va a ser un poco más útil. Así que escribe en claro en todas las mayúsculas, misma fuente por supuesto. Sin embargo, una cosa, por favor deje 32 píxeles en el lado derecho también. A la izquierda. Eso es bastante fácil de hacer porque sí tenemos el campo x que nos ayuda bastante. Ahora podríamos haber usado guías, pero en general está bien. Bien, vamos a cambiar el tamaño del rectángulo. 2112 pixeles, 112 pixeles, la altura estándar. Bien, cuando estés listo, puedes centrar el texto y creo que ya terminamos con él. Bueno, no al 100% con la pantalla de Intel, pero la vamos a terminar después del descanso rápido. Por favor, asegúrese de ponerse al día con este punto. Muchas gracias. 40. Crear interruptores de botón: Bienvenido de nuevo. El menú correcto se ve bien, pero tenemos algunas opciones para crear. Todo esto se basa en el breve. No lo estoy mostrando durante la grabación porque ralentiza todo progreso. Pero asegúrate de que lo estoy revisando constantemente y deberías hacer lo mismo. Bien. Permítanme hacer una copia de programa en televisión así como tres entradas. Haz eso. Haz una copia de este diseño automático, el grande. Y entonces vas a tener que quitarlo. Recuerda, usa el símbolo menos del lado derecho, este. Cuando eso esté hecho, vas a tener un marco por defecto. Puedo decir que me encanta eso de figma, pero es lo que es. Vamos a tener que hacer clic derecho y luego elegir Desagrupar. Ahora, eres libre de hacer esas copias. Ahora bien, ¿podríamos haber escrito manualmente algunas capas de textos nuevas? Sí, claro. Pero sí siento que necesitamos sentirnos cómodos con ensuciarnos las manos. Lo mismo aquí con arreglar las cosas. Vas a ver, vas a tener que mover montones de capas. Este es un proyecto real que requiere que pienses de pie. Si no te sientes cómodo moviendo las cosas así, vas a tener un gran problema. La mayoría de los proyectos no son agradables y ordenados. Entonces los desordenados son torpes. La mayoría de las veces, lo que ves en un curso es una versión muy ordenada que se ha preparado que ensayado. Ahora bien, en este caso específico, en realidad he construido este proyecto antes en Photoshop y Adobe XD. Así que estoy bastante familiarizado con ello, pero sigo haciendo todo lo posible para darte una experiencia auténtica al incluir algunos errores y camas desordenadas. Bien, aquí estamos. Quité las casillas y toda la capa de textos debería ser azul y dejarla alineada con todo lo demás, agradable y limpia. Ahora vamos a crear un interruptor de palanca. Comience con un rectángulo que sea 72 por 33 z aunque. Ahora bien, ¿por qué esta talla específica, 72 por 30? Bueno, he medido los otros boggles y esto parece estar en el dinero. Hazlo muy redondeado. Me gusta usar valores súper altos. Ahora para el color, vamos a usar C3. C3, C3. Deberías tenerlo entonces vas a panel Estilos. Bien, ahora mismo por favor alinéelo al lado derecho. Puedes usar la capa de texto claro para eso. A continuación en la lista, vamos a tener que agarrar la herramienta elipse y hacer un círculo perfecto. La tecla de acceso rápido es 0, 0 del círculo. Creo que es así que tiene sentido. Puede mantener presionada la tecla Mayús o puede usar el panel de propiedades. Estoy buscando el 48 por 48, del mismo tamaño que las casillas de verificación. Esto tiene que ser blanco, pero claro que podemos ver lo que pasa con el fondo blanco. Entonces para eso vamos a habilitar una sombra paralela. Ahora bien, los ajustes que he encontrado funcionan mejor en lo siguiente. Son seis para el desenfoque y luego dos para el campo y, 25% de opacidad. Ahora el círculo tiene que colocarse del lado izquierdo para mostrar que está apagado. Por supuesto, se asegura de que esté centrado verticalmente. Cuando estés listo, muévalo al marco de Recursos. Recuerda tener todo bien estructurado funciona muy bien. La idea con las páginas es que puedas hacer una presentación muy agradable para que cualquiera pueda tener un tiempo fácil explotando tu proyecto. En este caso específico, lo estoy haciendo con fines de aprendizaje. Entonces no voy a dividirlo en páginas porque eso no es lo ideal. Por el mismo fin. En realidad es bastante sencillo. Hagamos esto. Ahora. Mueve el círculo hacia la derecha y cambia el rectángulo de abajo a naranja. Ahora bien, el naming debería ser simple encendido o apagado. Y puedes renombrar la propiedad si quieres. Nuevamente, estado estado, algo así. Ahora los toques finales volvieron a la pantalla, y agreguemos tres de estos a la parte superior de la pantalla. Entonces vamos a escribir la línea ellos con claro. Pero aquí está la cosa. Va a ser complicado arreglarlos correctamente. Cuando intentas alinearlos verticalmente con el texto, posible que el texto se mueva por diferentes razones. No voy a meterme en eso. Entonces básicamente no te estás haciendo ningún favor de esta manera. Entonces, por esa razón, vamos a aplicar en el diseño automático para cada fila. Entonces vamos a hacer cuando diseño automático grande, así como así. Y vamos a medir el espaciado desde abajo. Creo que lo pusimos en 40. Sí. Eso se ve casi bien. Por favor, tenga que alternar el set a on y ese es el set a off. Creo que así se ve más interesante. Pero las etiquetas mismas, bueno, una cosa, el brief decía algo sobre la pre-entrega. Acepta tarjetas de crédito y 60 min o menos. Oh, por cierto, este es un gran momento de enseñanza. Cuando cambias el texto, el diseño automático puede darte algunos dolores de cabeza. No se preocupe. Aquí están los hechos. Cambiar el ancho a fijo. Eso va a abrir el campo de ancho. Y aquí se puede poner 656. Puedes recordar ese valor del divisor. Ese es el tamaño de pantalla completo -32 a cada lado, así que eso es 64. Después total. Finalmente cambió el diseño automático de empaquetado a espacio entre ellos. Y en realidad, ese es trabajo, bien hecho. Toda esta pantalla debería estar todo configurado. Aunque no parecía tan complicado. Estos dos menús nos empujaron a un buen trabajo. Si logras llegar hasta aquí, mis sinceras felicitaciones, no ha sido fácil. Pero ahora tomemos un breve descanso y vamos a continuar en un segundo. Gracias. 41. Diseño de cartas con componentes: Bienvenido de nuevo. Es momento de crear mis métodos de pago y estoy pensando que deberíamos usar una tarjeta para eso. Y como sé que hay otra pantalla que usará el mismo diseño de tarjeta, esas son mis direcciones. Entonces deberíamos convertirlo en un componente. Bien, comencemos con una copia de mi inflamación. Eliminemos todos los campos, pero vamos a mantener el botón. Ahora bien, esto debería decir agregar nueva tarjeta. En el pasado, usé un botón de acción flotante y FAB, pero quiero que el usuario se sienta muy cómodo con la posición de este botón. Entonces básicamente siempre debe estar en la parte inferior. Entonces nos vamos a quedar con esa posición. Ahora para la barra de acción, cambiemos el título a métodos de pago. Por cierto, incluso podrías tener un ícono más aquí en la barra de acción para agregar una nueva tarjeta de crédito. Realmente depende de ti. Estas decisiones deben basarse en lo que es mejor para el usuario. Un plus en la barra de acción probablemente no sea lo ideal. Pero considerando que no lo vas a usar todo tan a menudo, ya sabes, potencialmente podrías usarlo de todo en general. Estoy contento con el botón naranja de aquí mismo. Ahora, antes de hacer algo elegante, simplemente agreguemos las capas de texto, la base. Entonces la primera va a ser la tarjeta primaria, lo que ayuda al usuario a saber cuál es la tarjeta predeterminada, si la hay. Ahora bien, para ser honestos, deberíamos incluir la pantalla cuando no haya seleccionado ningún método de pago. Pero vamos a hablar de eso más adelante. En definitiva, vamos a saltarnos bastantes pantallas básicas en las pantallas mediáticas porque no hay nada de especial en ellas. Podríamos agregar al menos diez pantallas más. Pero de nuevo, no va a ser útil todo ese nodo emocionante. Bien, siguiente, agreguemos edit Eso es grueso. Ahora para el número de tarjetas, voy a usar una oscuridad que se crea usando alt Z, la B9. Entonces otra vez, eso es usando alt y las teclas numéricas en tu teclado, 0139. Y una vez que tengas un punto, simplemente copia y pégalo un montón de veces. Recuerda, cuatro caracteres por grupo que son cuatro en total. Si no puedes manejar con un punto, solo usa una estrella. Ese es Shift ocho. Bien, Para el último grupo, esto debería ser visible para que puedas identificar la tarjeta. Impresionante. Ahora, no hay discusión sobre el estilo en este momento. Terminemos con la fecha de vencimiento cero para la barra 28, por ejemplo y ahora podemos hablar de convertir esto en una tarjeta reutilizable. Bien, así que hagamos esto para la primera línea. Usemos el estilo de título más pequeño en caso de que no lo tengas. Eso significa nueva aguja negra, 26 pixeles. Pero la segunda línea, usemos el estilo corporal. Nuevo Nieto, irregular 24 pixeles. Ahora, en términos de color, editar necesita ser naranja ya que es una acción, tiene que demostrar que se puede hacer clic en. Por lo demás. Sólo vamos a usar el azul. Es súper básico. ¿Podríamos usar potencialmente el gris para la segunda línea? Sí, creo que eso también funciona. Realmente depende de ti. Aunque me voy a quedar con el azul. Ahora para la tarjeta en sí, vamos a necesitar un montón de diseños de auto para que esto sea más fácil. Voy a agregar otra acción, hacer primaria. Esto no es útil aquí, pero lo vamos a necesitar para las tarjetas secundarias. ¿Verdad? Ahora vamos a tomarlo uno a la vez. Seleccione estas dos acciones y configúrelas en cambio automático de diseño. Porque queremos poder controlar la distancia entre ellos. Digamos que en este caso probablemente 50. Bien, entonces las tres capas de textos necesitan formar una línea. Así que de nuevo, agárralos y luego usa Shift a. ahora podemos cambiar el modo de espaciado de pack, que es el espacio predeterminado entre, porque obviamente necesitan ser divididos. Ahora no ha pasado nada, pero eso está totalmente bien. Ahora para la segunda fila, agarra ambas capas y presiona Mayús. Una misma cosa que queremos ponerlos a espacio entre en lugar de atrás. Espero que todo tenga sentido hasta ahora. Por último, para poder agregar un solo campo para todos estos chicos, vamos a seleccionar todo así y luego usar shift por última vez. Esto no sólo nos da la opción crear rápidamente un fondo blanco, sino que también podemos controlar la distancia vertical entre ellos. En este caso, digamos por ejemplo estamos buscando 32 a cada lado y 16 para la parte superior e inferior. Ese es nuestro acolchado. Por supuesto que no vamos a mantener bordes cuadrados. Esos no lo han sido, cámbialo a diez pixeles, e.g y creo que esto debería ser bueno. Bien, centralo dentro de la pantalla si aún no lo has hecho. Ahora podríamos hacer esto lo más flexible posible, pero siempre trato de mantener las cosas lo más simples que puedo. Así que selecciona el marco más grande, el que tiene el relleno blanco y cámbialo a ancho fijo. Y eso va a abrir el campo W. Poner en 656. 656 píxeles, y eso debería ser. Pero, ya sabes lo que tengo que decir, 40 pixeles entre estas dos líneas no tiene mucho sentido considerando que tenemos una ropa de cama tan pequeña. Entonces, en realidad, vamos a dejarlo caer a 20, pero elevamos el relleno a 32 para los bordes superior e inferior. En caso de que sientas que es demasiado , puedes rechazarlo. Pero en general, estoy contento con ello. Bien, hagamos de esto un componente. No me gusta la tecla de acceso rápido. Siempre tengo mi mouse en el centro de la pantalla. Así que hacer clic en el icono desde arriba es más fácil para mí. Bien, Ahora vamos a arrastrar una copia y centrarla horizontalmente. No lo he mencionado. Pero mantén 32, 32 píxeles de la barra de acción. De verdad hay que ser consistente porque en realidad ayuda. Bien, ahora, para la tarjeta seleccionada, make primary tiene que ser removida porque obviamente ya es la primaria. Y para demostrar que actualmente está seleccionada, hagamos esto. Podemos agregar la tabla de una gruesa. Los píxeles para el color naranja serían un poco demasiado. Así que vamos con el azul y el amarillo. No creo que tenga suficiente contraste y podría ser un poco gritar en esta situación. Bien, Ahora vamos a arrastrar la segunda tarjeta de los activos. Éste debería haber hecho primario guardado tal como es. Y para que se sienta real, cambie los últimos cuatro dígitos de la tarjeta de crédito así como la fecha de vencimiento. Me encantó el hecho de que el estigma y sabe que estoy en modo de edición de texto. Así que sólo tengo que hacer clic una vez para cambiar estas capas de textos. Estupendas cosas. Bien, cuando estés listo, por favor, pasa a mis direcciones. Voy a hacer zoom a la húmeda bastante rápido. Y como trabajo de fondo, déjame contarte un poco sobre Figma. ¿Qué otros programas de diseño en el mercado hace unos años, por ejemplo, affinity o Sketch, figma, el mundo del diseño por asalto. Producen gran contenido y realmente lograron construir una comunidad y todas las pequeñas cosas que la gente estaba pidiendo. Bueno, Figma entregó a pesar Figma era una súper pequeña y la nueva compañía, lo hicieron en comparación con Adobe, que básicamente tiene dinero ilimitado, ganancias ilimitadas, personas ilimitadas, talento. Bueno, en realidad se movieron bastante despacio. Entonces por eso algunas personas yo incluyo. Estamos un poco decepcionados por el estado de Adobe XD. Las actualizaciones simplemente no venían lo suficientemente rápido. No estoy 100% seguro, pero si no recuerdo bien, Adobe XD estuvo en Beta por lo menos dos años, al menos más que eso, la versión para Windows, salió la primera, creo que fue después del año, tal vez año y medio después de la versión para Mac, estaba furioso. Estaba tan enfadada. Verás, siempre he sido un tipo de Windows, pero en serio considero conseguir una Mac solo para usar Adobe XD. Y luego, cuando vi cómo Adobe simplemente no venía junto con las actualizaciones lo suficientemente rápido , la frustración creció. Y otra vez, no creo que sea el único que se siente así. Entonces por eso Figma básicamente llama como fuego. Y con eso, estamos listos para seguir adelante. Terminamos estas dos pantallas en tiempo récord. Además siempre podemos regresar y hacer ajustes en el uso de los componentes. Gracias. Te voy a ver en un segundo. 42. Así es cómo puedes hacer una hermosa pantalla de tarjeta de crédito: Bienvenido de nuevo. Mencioné que no vamos diseñar cada pantalla intermedia, como cuando no tienes dirección o no se ha puesto una tarjeta de crédito en el sistema. Pero deberíamos aprovechar al máximo esas pocas pantallas con un usuario que podría cambiar de un usuario que podría cambiar opinión si podría dejar, por ejemplo la pantalla de la tarjeta de crédito cuando agrega una a la aplicación. Empecemos por hacer una copia de la última pantalla. Quita ambas cartas porque no las necesitaremos. Un poco de limpieza extra. Cambiemos el llamado a la acción para guardar tarjeta de crédito hace la acción principal probable. En cuanto a la barra de acción en sí, esto debería decir agregar método de pago. Por cierto, en caso de que quieras ser inteligente con él, podrías agregar títulos más elegantes, como ¿cómo vas a pagar? más jóvenes realmente aprecian esto. Ahora bien, si el cliente te da un brief que está dirigido al público más joven, por favor no tengas miedo de darle vida a tu copia. peor de los casos, al cliente no le gusta y vuelves a las cosas aburridas. Pero en caso de que le guste, podrías conseguirte un bonus o al menos causar una muy buena impresión. Así que un condimentar las cosas siempre que puedas. Bien, manejemos los campos. Por cierto, ¿sabías que puedes cambiar el modo de visualización en el panel de activos? Entonces prefiero la versión en miniatura, pero también hay una lista, sin embargo, que me muestra lo desordenado que estoy con mi nombre. Entonces leería el interruptor para ocultar esa vergüenza. Bien, agreguemos para los campos en, aunque recordarán que los centraron en el Lienzo. El primero necesita batir eso en píxeles lejos de la barra de acción. Cambiar el estado a la versión BG simple. Por favor, no olvide agregar un título y una mano apropiados. Ahora bien, esto lleva algún tiempo, pero está totalmente bien. Ahora, los dos primeros campos, voy a ser el número de tarjeta de crédito y luego el nombre en el auto. Ahora para el número de tarjeta de crédito, me pareció mejor usar 12345678 y así sucesivamente. Romper la tecla Z TO no se ve tan bien Para ser honesto. Ahora bien, los otros dos campos tienen que ser una fecha de caducidad y el v. V. v. V. Ahora, lo CVD es el número corto en el dorso de la tarjeta. Ya que estos dos campos no necesitan ser de ancho completo porque son bastante pequeños. Esta es una buena oportunidad para recordarnos a nosotros mismos cómo los hacemos que ninguno de los dos fuera. Y eso es mediante el uso de un ancho fijo en la instancia. Y luego bajar un nivel y configurar el propio campo para llenar contenedor. Bien, espero que esto esté empezando a tener sentido. El campo está dentro de algo. Si eso es algo es más grande y el campo se establece el relleno, entonces obviamente el campo crecerá consecuencia y viceversa. Pero la configuración predeterminada en nuestro caso es que el campo esté configurado en fijo. Ahora bien, por mucho que cambiemos el ancho del contenedor principal, el campo mismo, está haciendo lo suyo. Eso no queremos. Entonces por eso lo estamos cambiando para llenar contenedor. Impresionante. Ahora todo está bien y bien con estos cuatro campos. Pero no hay nada nuevo ni especial aquí en este verde. Es por ello que nos vamos a tomar el tiempo para diseñar algo por encima de todos estos campos. Así que agárralos a todos y muévalos hacia abajo. Comienza con un rectángulo que sea 656 por, digamos 350 o algo así. Centrarlo y hacerlo blanco puro. La idea es hacer un diseño de tarjeta de crédito que te muestre lo que pones dentro esos campos desde abajo. Entonces mientras escribes el texto, ves el cambio de auto. Esto es bastante agradable. Lo he hecho en el pasado y es un buen toque. Ahora bien, ¿esto es necesario? No, no lo es. Pero hace que la pantalla sea más interesante y no es difícil de codificar, así que es bastante barata. Ahora, redondea el radio de coordenadas poniendo diez píxeles, y luego agreguemos el estándar, la sombra. Entonces esta va a ser la base de nuestra guardia. Consigamos la herramienta tipo y escribamos tarjeta de crédito. Configura esto como un dipolo grande, y luego cámbialo a naranja. Ahora potencialmente podríamos escribir Visa o MasterCard, pero mantengámoslo genérico. Entonces por favor usa este ícono que has adjuntado. Esto se llama chip. Ya es de color amarillo dorado y está bastante bien dimensionado. Todo lo que tienes que hacer es colocar a 32 píxeles de ambos bordes. El lado izquierdo y la parte superior. Mantenga presionada la tecla Alt para eso y toque sus teclas de flecha. Estoy seguro de que ya se está convirtiendo en una segunda naturaleza a medida que estás trabajando. Ahora para el número, vamos a usar exactamente el mismo formato. Así que simplemente arrastra una copia. Ahora, aquí está la cosa. Tenemos que medir la mano desde el campo. Pero este es un gran momento de enseñanza. Ahora tal vez quieras copiar pegado, ¿verdad? Pero si haces eso, vas a conseguir ese estilo específico y Figma. Y obviamente no queremos eso. Por eso hicimos la copia. Queremos el formateo anterior, ¿verdad? Entonces, la mejor manera de deshacerte de cualquier formato, incluso cuando te enfrentas a algo en Microsoft Word desde otro sitio web, es esta. Use un programa de bloc de notas estándar. Así que pegarlo ahí y luego copiarlo nuevo y pegarlo en Word o modo grande, lo que sea. Y si haces eso, vas a mantener el formato anterior, en este caso, este formato grueso. Nuevamente, siempre voy al Bloc de notas cuando estoy copiando y pegando cosas en correos electrónicos o cualquier redactor de textos. Y ahora ya sabes que esto se aplica también a Figma. De vuelta a donde necesitamos dejar bastante espacio vacío entre cada grupo. Entonces, la forma más fácil, la forma manual de hacerlo, rompió la tecla de la barra espaciadora y luego usa copiar y pegar entre cada grupo. Ahora la pregunta es, ¿podríamos usar un diseño automático? Seguro que al 100%, pero así es como lo hicimos allá por los días de Photoshop. Ahora lo que voy a hacer en esta versión manual, voy a usar Alt para comprobar la distancia en el lado derecho. Y mientras no tengas una gran diferencia, voy a estar bien con eso. De nuevo, podríamos hacer toda esta tarjeta con diseño automático, pero sé que algunas personas odian el diseño automático. Entonces por eso de vez en cuando, voy a simplificar las cosas. En términos de esta densa 20 píxeles deberían ser buenos entre el chip y esta capa. Pero el color naranja no funciona. En cambio, vamos por el azul. amarillo podría funcionar también, pero tendríamos que cambiar el rectángulo blanco por otra cosa un poco más oscuro. Y entonces creo que eso sería demasiado trabajo, sobre todo porque tenemos un fondo principal coloreado. Entonces eso sería un poco difícil. Bien, ahora para la fecha de vencimiento, agreguemos la capa de texto. Esto debe mostrarse en el estilo del cuerpo. Y luego por el color, Vamos con el gris. En cuanto al nombre, honestamente estoy indeciso. Creo que probablemente etiqueta es lo mejor para ello. Ahora, la parte difícil es que tenemos cargas y montones de capas de texto. Entonces tenemos que asegurarnos de que no choquen entre ellos. Pero sí, creo que eso es todo. Oh, algo que casi se me olvida. Tenemos otro icono para el lado derecho. Echa un vistazo a las cosas malas antes de que terminemos. Y claro, obviamente, levantar los campos que hay debajo. Pero sí, este es el tipo de cosas que los clientes aprecian cuando haces un esfuerzo extra. Esto no estaba en el escrito, no estaba en los wireframes. Simplemente se me ocurrió. En ocasiones el cliente puede rechazar la idea. Puede que no le guste. Pero esto fue lo que, 10 min de trabajo, tal vez 20 min si no tienes ningún íconos. Pero es levantado para aquellos clientes que realmente quieren algo especial que quiere algo con un poco de zinc, creo, sí, por cierto, por su cuenta, favor rehaga esta tarjeta con diseño automático y convertirlo en un componente y compartirlo conmigo. Me gustaría ver cómo te las arreglas, pero no debería ser tan difícil para ser honesto. Házmelo saber en la sección de comentarios. Pero sí, con eso, podemos continuar. Muchas gracias. 43. Diseño de una página de críticas hermosa: Bienvenida de nuevo. Necesitamos crear una hermosa página para las reseñas. Entonces, pongámonos a trabajar. El alambre-marco me muestra que esto tiene que dividirse con la dirección de los restaurantes. Entonces hagamos una copia de la pantalla de inicio de sesión. Quitar los campos porque no los necesitamos. Y no creen que debamos tener un botón aquí que o bien hay una pregunta sobre cómo se supone que deben escribirse las reseñas. Si no hay botón. ejemplo, en mi propio negocio, envío correos electrónicos personalizados con una longitud específica con cada cliente. A lo mejor hace el mismo proceso aquí. De todas formas, volvemos a mojarse. Cambiemos el nombre del título para madurar su entrega de pizza, el nombre del restaurante, las pestañas. Bueno, para el texto, asegura de que el conjunto al centro para que no tengamos que reposicionarlos, controlar hacer clic en ellos es la forma más rápida. Todo esto está bien, todo montado. Entonces la primera debería ser reseñas y luego la segunda obviamente abordar. Ahora, esto último es útil en caso de que quieras ver qué tan lejos está el restaurante, o tal vez quieras recoger el pedido tú mismo. Entonces sí tiene sentido. Ahora, dejemos que estas dos guías. Entonces es negro y naranja. Y luego para el inactivo, eso debería ser regular y el gris. Eso suena como una canción de hip hop que creo que era negra y amarilla. En fin, volvamos a ello. Entonces agreguemos el diseño del chip que contiene el número de reseñas y el porcentaje aunque tenga un relleno, siempre podemos eliminarlo. Además podemos deshacernos de este acolchado. Para ser sinceros, realmente no necesitamos hacer eso, pero quería mostrarte tantas situaciones como fuera posible, así que por eso lo hice. Bien, ahora, asegurémonos de que esté alineado correctamente. Hablando de las cosas innecesarias, este verde es en realidad un pop-up. No me preguntes por qué. Solo confía en mí, como tal, necesitamos un icono X, no la flecha hacia atrás. Entonces, aprovechemos esta oportunidad para cambiarlo. Si seleccionas la barra de acciones, tenemos un desplegable aquí, un intercambio de iconos, pero no hay x en nuestra lista. No se preocupe. Como de costumbre, tengo algo preparado. Se llama x y se adjunta. Ahora, arrastra a este tipo al marco de Recursos y conviértelo en un componente. Por favor, no olvides agregar un diseño automático, así que va a quedar bien. Cuando termines, podemos volver a la barra de acción. Por defecto, nos va a mostrar los íconos preferidos, pero podemos cambiarlo. Pero fíjense cómo tiene sentido. Estamos empezando a tener bastantes componentes aquí, y tenemos que desplazarnos un poco. Entonces esta es la razón por la que preferir es súper útil. Bien, volvamos a ello. Necesitamos algunas cosas más. Primero, algún texto escribe en ocho, positivo y luego negativo. Estos deben estar en capas de textos individuales. Y porque tenemos 8.2, cambiemos el texto arriba al 80 por ciento después votos. Y eso es porque quiero que esto sea lo más real posible . Para el estilismo. Vamos con cuerpo. Vamos a probar el verde del emoji para el positivo, para los votos positivos. Entonces por los votos negativos. Bueno, podemos muestrear colores desde el panel de activos. Entonces supongo que vamos a tener que arrastrar un emoji enojado. Entonces podemos tomarlo, y ahora puedo quitarlo. Una cosa que me encantó de Photoshop fue el hecho de que podrías probar colores de absolutamente. cualquier lugar, incluso fuera del programa, siempre y cuando tuvieras la herramienta cuentagotas, selecciona que aquí, al menos en esta versión de Figma, después de la apertura del Selector de Color, tienes que hacer clic manualmente en el herramienta cuentagotas y luego elegir un color proveniente de otro programa de diseño. Ese clic extra parece un poco raro. Además, puede probar desde cualquier otro lugar , por ejemplo, la interfaz. En fin, volvamos a ello. Agreguemos otro rectángulo de unos 400 píxeles de ancho para la altura, vamos con 20 píxeles, por ejemplo así que esta va a ser la barra que nos muestre visualmente el número de buenos votos. Hazlo súper redondeado. Y para el color verde, claro, tal vez quieras agregar ese color a tus estilos. Sé mi invitado. Ahora, sigamos adelante. Así que asegúrate de que enviaste un poco con la capa de texto. Y luego cuando termines, por favor haz lo mismo para los votos negativos. Pero esta vez a partir de 400. Dividamos eso por cuatro y eso es 100. Ahora, ¿por qué lo dividimos? Porque tengo votos positivos y dos negativos. Así que permítame una proporción por la cosa ciento 101 que me está molestando. Y así se ve esto en este fondo coloreado. Entonces volvamos a cambiarlo a blanco, sobre todo porque tenemos bastantes textos abajo. Ah, por cierto, entre el emoji y los votos positivos, dejemos unos 20 pixeles. Esto es básicamente un resumen de todos los votos que se van a mostrar debajo. Hablando de eso, separemos esta área con un divisor, obtengamos la herramienta de alineación y agreguemos 720 píxeles. Por favor, centéntrate en, si es necesario, y hazlo de un color gris claro. En realidad, creo que tenemos que pastar en nuestro panel de estilos aunque el divisor, este debería ser el más ligero. Pero aquí está la cosa. Si decidimos, así es como debería quedar un divisor, tenemos que volver atrás y arreglar los demás de todas las pantallas anteriores. Ahora bien, aquí está la cosa. No voy a dedicarle demasiado tiempo a eso. Sólo voy a hacer unos pocos. Pero recuerda que tenemos la pantalla de platos donde hay bastantes divisores. Aquí es donde un componente hubiera sido bastante agradable. Pero este es un buen momento de enseñanza cuando aprendes de la manera difícil, tiendes a recordarlo. Así que por favor asegúrate de arreglar todos esos divisores. Para terminar, voy a agregar las pocas capas de textos, que serán los bloques de construcción para las revisiones reales. Y en la próxima conferencia, vamos a darle estilo a todo. En primer lugar, titulado algo que diga, no sé, excelente comida o algo así. Después la fecha, el 14 de octubre de 2023. Entonces el nombre del autor por Chris Barron en este caso. Entonces tal vez unas palabras. La carne de la crítica, algo así como, me encantó todo sobre este restaurante y el proceso de entrega. Agradable y fácil, muy profesional. Y eso suena bastante bien. Bien, tomemos un descanso. Y en el siguiente video, vamos a terminar esto. 44. Cómo estilizar una tarjeta de revisión: Bienvenido de nuevo. Comencemos a darle estilo a esta reseña. Ahora lo principal en lo que debemos pensar es cómo va a ir el usuario a la revisión. Ahora, digo que el título es lo más importante. Así que vamos por más pequeños por LDL en términos del formato de fuente. En cuanto al color, el azul es la única opción porque el naranja implicaría algún tipo de acción que está disponible aquí y ese no es el caso. A continuación, la fecha y el nombre de la hija, estos no son tan importantes. Entonces creo que podemos ir por el cuerpo en cuanto al estilo de la fuente y por el color gris. Abajo alinearlos por cierto, si aún no lo has hecho. Ahora, la carne de la misma, la revisión propiamente dicha. Ahora digo que esto también se puede diseñar como cuerpo, pero hagámoslo azul porque la gente podría querer leerlo versus la fecha y el nombre de la hija, que son básicamente para la decoración propósitos. Bueno, no es exactamente decorativo, pero a la gente realmente no le importan esas cosas. Esos están ahí solo para dar un impulso de credibilidad, ¿verdad? Para que veas que esta es una persona real. sí necesitamos algo visual Aquí sí necesitamos algo visual porque es simplemente demasiado texto. Y digo un pulgar hacia arriba o algo de esa naturaleza. Ahora podríamos usar el mismo emoji, el sonriente. Pero creo que eso es demasiado repetitivo. Entonces, arriesguémonos. Esto es lo que he preparado. Pero ¿sabes qué? En lugar de arrastrarlo y esta pantalla que desplazarse hacia la izquierda. Hagamos esto en realidad. Ahora. De hecho, centrémonos en el marco Recursos y arrastremos el icono directamente allí, porque aquí tiene mucho más sentido como de costumbre, convertirlo en un componente y luego agregar un diseño automático. Como siempre. Sin embargo, debes saber que si hay un ícono positivo, ese siempre debe ser negativo. Y efectivamente tienes uno apegado. Ahora repito, esto es un poco arriesgado. Nos vendrían bien las mismas caras sonrientes, pero tú sí. Aquí, estoy tratando de desviarme, hace algo un poco más interesante. Bien, cuando termines con esos recursos, volvamos a la pantalla de revisión. Arrastre un voto positivo al interior. Y pensemos en eso. En primer lugar, creo que necesitamos un montón de diseño automático y ¿ sabes cuántos? Si no, pasemos por esto juntos paso a paso, fila por fila. Entonces esta es la primera, ¿verdad? Y entonces esta es la segunda. Ahora bien, ¿necesitamos el tercero para este texto corporal? No, no necesariamente. Entonces ahora vamos a agarrar todo así. Y luego Shift a y ya está. Entonces tenemos tres en total para los primeros 21 por cada fila. Obviamente vamos a necesitar ahora ajustes principales, espacio entre y luego configurarlo para llenar contenedor. Ahora. Bien, Impresionante. Agradece tu tiempo con ello. Por cierto, no te apresures. Obviamente voy más rápido, pero siempre puedes hacer una pausa. Ahora sí queremos mucha flexibilidad, así que esto tiene bastante sentido ir por el contenedor de llenado, luciendo genial hasta ahora. Ahora seleccionemos el big frame, el mainframe, y cambiemos su ancho a fijo eso para que podamos configurarlo hasta 656 píxeles. 656 píxeles. Y básicamente, sí, aunque ese es un trabajo bien hecho. Para ser justos, sí necesitamos un poco más de trabajo para terminar. Principalmente necesitamos llenar la pantalla con otras entradas. Entonces hagamos una copia de este divisor desde arriba y colóquelo hacia abajo. No hay espaciado específico en mente porque vamos a crear un diseño automático aquí también. Y eso nos va a permitir escribir un valor específico. Así que vamos con 20 por el momento. Esto también nos ayuda a agregar o eliminar las líneas adicionales mientras mantenemos ese divisor a la misma distancia exacta. Y con eso, hagamos de esto un componente. Como siempre, vamos a tener que usar el marco de Recursos separado. Por cierto, es posible que desee cambiar su tamaño, o puede que desee acercarlo a la pantalla. Ahora, realmente depende de usted cómo lo configuró, pero se asegura de que lo pase bien moviéndose de un lado a otro. Lo principal es que tienes suficiente espacio dentro de eso. Porque después de convertir esto en un componente, podemos hacer una variante solo por el **** de la misma. Lo único que estoy dispuesto a cambiar ahora mismo es reemplazar el ícono, pero aquí hay mucho más potencial. Así que asegúrate de haber intentado explorar las otras opciones de diseño. Como tal vez un color diferente para el título, tal vez un fondo de color diferente. Varias otras cosas que puedes hacer aquí mismo. Pero por ahora, volvamos a nuestra pantalla y en realidad vamos a arrastrar algunas copias. Creo que podemos caber sobre Ford y total, aunque el último puede estar un poco cortado, pero eso está totalmente bien. Se puede cambiar una de ellas a la variante negativa, solo para que tengamos alguna variedad. Pero antes de cambiar el contenido del texto real, tener en cuenta una cosa que el divisor cambia de posición con base en el texto anterior, ¿verdad? Entonces, si es más largo o menor, eso dividió los movimientos, pero no se mueve según la siguiente revisión. Como puedes ver, no funciona. Y eso es porque no dimos ninguna instrucción al respecto. Pero aquí está la cosa. Si selecciona todas estas entradas y luego las agrega a un diseño automático. Eso es trabajo, bien hecho. Ahora, siéntete libre de agregar o eliminar líneas de texto, y deberías ver que funciona bien. Y de hecho esto es correcto. Ahora, aquí está la cosa. Podríamos hacer un booleano por el título. Podemos hacer una variante donde no haya comentarios, opciones, opciones, opciones. Pero ahora mismo para esta grabación, estoy muy contento con esta cantidad de flexibilidad. Se puede hacer mucho más, pero sí, va a llevar un poco más de tiempo. Entonces, por el momento, creo que deberíamos simplemente continuar. Muchas gracias. 45. Mi idea sobre la milla extra: Bienvenida de nuevo. Déjame manejar rápidamente la pestaña de dirección mientras trabajo en segundo plano, creo que es muy esencial que te diga lo que considero la cuenta, la milla extra, yendo la milla extra. Algunos clientes pueden decirle que c en la pestaña Ver, podríamos haber pasado un poco más de tiempo creando varias propiedades para ese componente. Poner la Biblia en roll-off, agregar un booleano, agregar una variante para aquellos casos solo hay un título pero no hay textos corporales, cosas de esa naturaleza. Ahora bien, no creo que eso sea necesariamente ir más allá, no en el sentido de que los clientes se lo agradecerían. Verás, una cosa es que trabajes duro. Y la recompensa es que en el futuro, no tendrás que trabajar tan duro. Tu entrenamiento es difícil, pero entonces la batalla real no es tan dura. Entonces eso es lo que podríamos haber hecho para apuntalar a estos invariantes y otras cosas. Pero es otra cosa crear ese diseño de tarjeta de crédito, por ejemplo, o idear alguna copia encantadora, algún texto precioso dentro del proyecto. Ahora bien, esas son las cosas que el cliente agradecería. Así que por favor asegúrate de no confundir esas dos cosas. Entonces estoy a favor de hacer todo lo posible, no ser llamado perezoso, no ser llamado perezoso, pero siempre hay que tener en cuenta esto. ¿A quién ayuda? ¿Ayuda a mi ego? ¿Me ayuda a practicar mis habilidades? ¿Ayuda al desarrollador o ayuda al cliente? Porque si eres ese el punto de aprendizaje donde sientes que necesitas toda la práctica que puedas conseguir el asegurado, ve a crear todas las variantes, hazlo flexible, hazlo receptivo, lo que sea. Hazlo todo. Pero la decepción viene cuando esperas que el cliente aprecie todas esas variantes y capacidad de respuesta y todo eso cuando de hecho no tiene idea. Aunque lo expliques a detalle, no va a importarle. Lo más probable es que así sean las cosas. Ya sabes, el cliente tiene otras cosas que cuidar mientras trabajas en este curso. Espero que te des cuenta, espero que al menos empieces a darte cuenta de por qué te estaba contando estas cosas al principio, ¿verdad? A nadie le importa lo duro que trabajaste dentro de Figma, podrías haber creado tu propio tipo de letra desde cero, letra por letra, personaje por personaje. A nadie le importa realmente. Lo que les importa es la presentación general y eso es todo. Tu esfuerzo no justifica tu nodo de valor. Tú eres la palabra, el verdadero valor que puedes aportar como diseñador viene para ellos un montón de otras cosas. Ahora comenzando con los básicos, pudiendo comunicarse de manera efectiva tanto con el cliente como con el equipo de desarrollo. Ser puntual, entregando todo a tiempo. Y después de todo lo básico, tienes un verdadero valor como diseñador, ya que un diseñador de aplicaciones viene de tu experiencia en poder agilizar la aplicación, en hacerla más eficiente. Cosas como jerarquía en la primera pantalla donde hay un montón de acciones. Entonces tienes que tener experiencia y saber cómo cerrar tu TI. Ahora para decirlo simplemente, si tú, moviendo un botón y estilizando otro de manera diferente, haciendo que salga mal. Y si eso eleva las tasas de conversión en un diez por ciento, eso es absolutamente enorme, masivo. Diez por ciento día tras día, semanas y meses en fin. Eso es lo que realmente va a ayudar a que el negocio crezca. Pero la habilidad en sí, mover un botón o hacer un botón fantasma, mover un botón en la parte inferior de la pantalla. Eso no es nada. La habilidad no es algo valioso. Entonces espero que te des cuenta de que el mayor valor que puedas aportar al cliente no necesariamente gira en torno a cosas elegantes en Figma, propiedades de varianza y componentes y demás. En mi experiencia, he logrado hacer crecer mi propia tienda de comercio electrónico 20,000 dólares mensuales a 50,000 dólares mensuales. Solo cambia el diseño básico, cosas como mover el título hacia arriba, reducir las brechas, cambiar el tamaño de las miniaturas. Estos son sumamente básicos. Podrías estar atento a ese curso de Photoshop y probablemente aún podrías lograr esas cosas. Entonces, para el punto de vista más técnico, no son difíciles. Las técnicas en sí no son el valor que tienes la experiencia para sugerir esos cambios. Eres tú y sabiendo que, oye, si siempre tenemos un botón en la parte inferior de la pantalla, esto ayuda al usuario y pasante a generar más ingresos, más que ventas al decir, Oye, al hacer que el botón sea gris y desactivada y haciendo que se ilumine cuando se hayan rellenado todos los campos. Eso mejora la experiencia de checkout y eso trae más ventas. Entonces eso es lo que debes traer a la mesa. Los prototipos no súper locos son diseños súper flexibles. Esos pueden ayudar. estoy diciendo que no, pero la mayoría de las veces, te van a ayudar, no al cliente. Entonces puedes preguntar, Chris, ¿Cómo obtengo esta experiencia? Lo consigues trabajando, haciendo tantos proyectos como sea posible. Hay bastantes sitios web como este de aquí que realmente puedes usar. Pero, um, si realmente quieres obtener 20, 30,000 proyectos de dólares para ti, necesitas comenzar con $501,000 y luego verificar las estadísticas, verificar sus análisis. Vea después de entregar este proyecto, mantenerse en contacto con el cliente, pedirle que vea sus análisis, luego sugiera cambios, diseñarlos, que sus desarrolladores los implementen, y luego comprobar el diseño. En un par de semanas. Por ejemplo, en la pantalla de inicio, tenemos una foto de 360 píxeles de alto. Sólo como ejemplo aleatorio, pruébalo 300 pixel uno, ¿verdad? Así que hazlo más pequeño. Después revisa las tasas de conversión. Si es de 2% a 2.4 por ciento. Eso es increíble, ¿verdad? Y luego enjuagas y repites hasta que el negocio crezca. Y todas esas pequeñas cosas que has probado, tienes que recordarlas. Y luego cuando consigas tu próximo proyecto, todas esas pistas te pueden ayudar a ganar mucho más. Entonces ese es el valor que puedes aportar. No se trata de técnicas avanzadas y Figma, se trata de lo que sabes. Gracias y buena suerte. 46. 18 p1crea la pantalla de pago: paso 1: Bienvenida de nuevo. Manejemos la pantalla de pago, comencemos con la copia de la pantalla del método de pago y eliminemos casi todo lo que hay dentro de eso. Bueno, a excepción del botón en la parte inferior. Ahora para el título en la barra de acción, vamos a mantenerlo simple y llamarlo check out. Mantenlo agradable y sencillo esta versión en realidad nos hará la vida mucho más complicada con el fin de ayudar al cliente. Ahora en esta fase, vamos a hacer una pantalla de checkout donde el usuario no está conectado. Si recuerdas, Screen1 tiene la opción de omitir el registro. Pero si quieres hacer un pedido, obviamente vas a necesitar una cuenta. Hagamos esto. Haz una copia de este botón y levántalo 32 pixeles de la barra de acción para los textos, escribamos algo así como por favor inicia sesión o regístrate para continuar. Ahora bien, esto va en contra de que tengamos un botón en la parte inferior, pero esto es lo que propongo. Mantengamos el de abajo, pero cambiémoslo al estado inhabilitado. Así que hazlo gris. Entonces cambiemos el texto con encaje o la palabra thin bucks. Ahora la idea es esta, el botón principal permanece en la parte inferior. Nada ha cambiado en ese sentido. Ahora el usuario sigue esperando que lo vea ahí, pero como no estás conectado, entra un nuevo botón en la parte superior. Entonces esta es solo otra forma de hacer eso. Ahora bien, ¿podríamos usar un solo botón en la parte inferior que diga login? Claro, claro. Pero creo que al ver este botón Hacer Pedido ayuda a impulsar el uso de un largo. Básicamente dice, oh, estás tan cerca, vamos, solo hazlo. Mostrarlo seduce al usuario a seguir adelante. Entonces ese es mi proceso de pensamiento. Ahora, también tenemos que mostrar los artículos en el carrito. Entonces hagámoslo. Coge el tipo herramienta tecla de acceso rápido D y escribe mi mandíbula su entrega de pizza, porque necesitas saber qué restaurante has seleccionado. Elija el di Belle más pequeño del panel Estilos. Ahora bien, en términos de color, azul está totalmente bien, aunque potencialmente podríamos hacerlo naranja para significar que podrías volver atrás y pedir algunos platillos más. Creo que en realidad eso tiene mucho más sentido. Bien, vamos, en realidad vamos a hacerlo. Bien, a continuación, agreguemos algunos platillos. Entonces tengo algo preparado en el nodo malo. Así que sólo voy a pegarlas. En total lo que queremos salir, tres capas, las capas de textos, así la cantidad, el nombre del plato, y finalmente el precio. Ahora potencialmente podrías ocultar la cantidad y simplemente usar esos clásicos botones más y menos para ajustar cuántas piezas quieres. Pero desafortunadamente eso ocupa mucho espacio. Esto es lo que estoy pensando. Puedes tocar la entrada y el pop-up te va a permitir agregar o quitar platos. Y eso es porque creo que es bastante improbable que lo vayas a usar tan seguido. Ahora para el estilo en sí, vamos con cuerpo para los tres. Sin embargo, el precio debería destacar un poco más. Ese es el enfoque clásico. Así que rompe la cadena y cambiémosla a probablemente negrita en lugar de regular. Ahora bien, aquí está la cosa. Nunca me gusta mezclar tallas. Entonces, si los de la izquierda de 26 píxeles, el de la derecha debería ser el mismo. Se puede cambiar el peso o el color, pero no el tamaño. Por cualquier razón, simplemente se siente mal cuando haces eso. Bien, se ve bien. Ahora vamos a necesitar el divisor. Se puede robar uno de la pantalla de visualización, que está bastante resplandeciente. O podrías hacer uno nuevo, lo que quieras. Ahora, a decir verdad, no lo convertí en un componente, pero definitivamente puedes hacerlo. Puede ser útil. Bien, seis por seis píxeles para las hojas de ancho. Y ahora es el momento de agregar diseños de auto para que podamos tener bastante flexibilidad. Entonces, antes que nada, la cantidad y el nombre del plato turno día para ambos. Ahora bien, ahora, cambia la distancia a 20 píxeles. Siguiente en el diseño automático con el precio, bien, cambia el diseño al espacio entre el buen momento con él. Obviamente voy bastante rápido, pero no tienes que recordarte. Tienes la barra espaciadora al alcance de tu mano, así que úsala cuando sea necesario. A continuación, otro con el cambio divisor, ellos, voy a decir que voy a querer unos 30 pixeles aquí. Sin embargo, tan fácil. Ahora bien, la idea es que debas tener suficiente espacio para dar click individualmente en estos platillos. Bien, sólo tenemos uno, pero eso va a cambiar en un segundo. Es por eso que estamos usando diseño automático porque no estamos seguros sobre el tamaño. Así que lo mejor es que horneemos con mucha flexibilidad en este momento. Ahora bien, el divisor podría forzar el contenido al centro porque es más amplio. Ahora bien, si eso sucede, por favor usa esta parte para alinear a la izquierda las cosas. Entonces ese es el primer paso de dos. El segundo es seleccionar el Auto Layout con ambos elementos. Este de aquí, y ahora configurarlo para llenar contenedor. Eso debería darte un buen resultado. Esta es nuestra primera entrada, pero queremos tres y hacer un par de copias. Simplemente arrástrelos con Alt y Shift o use Control D. Sin brecha particular en mente. Simplemente colóquelos donde quiera. Ahora toma todo, las tres capas y el título y usa un turno de tiempo final. Ganaron menos Auto Layout. Y ahora podemos controlar casi todo. Por ejemplo, vamos con para D, para la distancia vertical entre estos tipos. Ahora la pregunta es, ¿agregamos un relleno blanco? Yo creo que sí. Creo que sí, pero eso significa que vamos a tener que cambiar algunas cosas. Aunque no tengo miedo, así que vamos a por ello. Entonces agrega ese relleno, el relleno blanco, y para el relleno, vamos con 32 para cada lado y luego 16 para la parte superior e inferior. Oh, por cierto, por favor redondea las coordenadas a diez pixeles. Esto es un hecho, ¿de acuerdo? Esto obviamente irá de lado a lado, ancho completo. Pero, ¿es esto algo que queremos mantener tal cual? Creo que podríamos, pero creo que un clásico duro tal vez un poco mejor. Además es un gran momento de enseñanza. Entonces pasemos por este escenario. ¿Cómo lo arreglamos? Entonces, antes que nada, vamos a seleccionar el marco grande y cambiarlo a fijo. Con eso, ahora podemos cambiarlo a 656. Nuevamente, esta es la forma más fácil de hacerlo. No asegura la máxima flexibilidad, pero eso está totalmente bien en mi libro, los precios y los divisores hangout. Y si quieres repararlos, solo tienes que seleccionar los tres divisores con Control Shift. Básicamente estos son los culpables. Ellos son los que obligan al auto a ser más ancho. Entonces, si cambiamos la talla 2592, que conozco de memoria porque ya he estado en esta posición antes, ahora deberíamos tener una tarjeta balanceada. Entonces cinco novenos a, y de hecho funciona. Por cierto, no tenemos un componente aquí, pero es posible que necesitemos el componente para más adelante en el camino. veremos por ahora, vamos a tomarlo paso a paso. Ahora la cosa es que me gusta el auto tal como está ahora mismo. Pero creo que para 40 es un poco mucho. Entonces cambiémoslo a 30 para el espacio vertical, quiero decir, pero ya sabes qué, el último divisor, esto no lo está haciendo por mí. No tiene mucho sentido. Así que vamos a Control haga clic en él y eliminarlo. Pero esto tampoco se ve bien. No hay suficiente relleno. Entonces teníamos 16 antes, pero vamos a necesitar aumentarlo. Así que va a haber suficiente altura para que el usuario pueda hacer clic fácilmente en la última entrada. Algunos piensan que 32 debería funcionar bien, y creo que casi hemos terminado con ello. Colócala muy cerca del botón superior que los dos pixeles para ser precisos. Y creo que ya terminamos. Ahora. ¿Podríamos jugar con él un poco más? Deberíamos hacerlo un 20 por ciento más que interesante. Pero sabes qué, hagamos una última cosa. Agreguemos una sombra paralela solo por el **** de la misma. Pero te prometo que esto es por ahora. Pero en este caso específico, pasaremos al otro los casos cuando hayas iniciado sesión, en tan solo un momento. Esto es por ahora. Te voy a ver en un segundo. Gracias. 47. Cree la pantalla de pago: paso 2: Bienvenido de nuevo. Este es el paso dos del proceso. Digamos que te acabas de registrar, ¿verdad? Has hecho una cuenta. ¿Cómo es el auto que mucho como? Bueno, antes que nada, hagamos una copia. El botón de la parte superior se va. Pero digamos que no ingresaste todos tus datos como tu dirección, tu tarjeta de crédito, etc., ¿verdad? Entonces todavía vamos a tener algunas flechas, algunas advertencias. Tomémoslo desde arriba porque has iniciado sesión, vas a tener tu total y la posibilidad de agregar el vale. Así que selecciona la marea, madura su entrega de pizza, y haz una copia con control el asegúrate de seleccionar el texto y no el marco grande por cierto, porque este es un diseño automático, la copia se pone debajo. Lo bueno es que puedes tocar tus teclas de flecha, la tecla de flecha hacia abajo, y el diseño va a cambiar así así. Esto es totalmente impresionante. Bien, ahora tengo algo preparado en mi Bloc de Notas, así que déjame copiar y pegar eso. En definitiva, es el subtotal de la tarifa de envío. ¿Tienes un vale y el gran total? Entonces, todos estos son bastante comunes en la mayoría de las aplicaciones de entrega. El estilo obviamente está apagado, así que vamos a arreglarlo. Por favor, elimine tanto el color como el formato. Aquí está mi opinión. Podemos comenzar con nuevo Nieto regular 26 pixeles, por favor. En cuanto al gran total, audaz y azul. Entonces básicamente tres de cada cuatro cosas son azules. El vale debe ser naranja porque puedes hacer clic en él localmente. Puedes hacer eso en Figma, puedes elegir diferentes estilos de colores. Ahora, tómate tu tiempo con él. Lo que más importa es que guíes al usuario todas estas configuraciones y la tomes poco a poco. Un paso, podrías hacer gran total negro en términos de peso, hacerlo más grueso. Bien, cuando termines, haz una copia con Control D. Nuevamente, esto se va a colocar debajo, pero selecciona ambos y usa Shift a a un layout automático, tendrás la capacidad de cambiar la orientación. ¿Bien? no es fácil navegar porque Todavía no es fácil navegar porque tenemos que cambiarlo al espacio entre la alineación del texto que hay que establecer para escribir una línea. Se ve un poco más visualmente atractivo. Navega por el espacio entre el texto alineado a la derecha. Y si es necesario, es posible que deba cambiar esta configuración de hug contents, el contenedor de llenado en caso que aún no esté seguro de cómo funciona esto. Simplemente prueba todo y mira cómo te va, o simplemente ven a este acorde y pide ayuda. Pero por favor siempre publique capturas de pantalla para que pueda ver lo que está pasando. Pero sí, esto es para la barra superior, 0, solo como paso opcional, selecciona el último producto. Este marco específico aquí. Esto es bastante importante. Ahora, arrastre otro divisor con la ayuda de la herramienta de línea. Hazlo de 59 a 592 píxeles ancho y cambia el color a ese gris claro específico. Sé que esto puede ser un poco complicado de hacer. Entonces, si no puedes seguir este paso específico, simplemente te quedas mal, o podrías eliminar la última entrada y duplicar la del medio que tiene un divisor, nunca nivelar cosa pequeña, retenerte que siempre están opciones. Bien, vamos a hacer la carta inferior, agradable y simple. Comience con una simple capa de textos de información de contacto. El siguiente mojado, escribamos una advertencia. Por favor agregue su información por el Info. Todo esto está escrito en Nieto regularmente. Por cierto, la izquierda debe ser azul y la derecha, ya que es una advertencia, debe leerse para asegurarse de que esto es tan claro como el día. Agreguemos el chevron. También podrías llamarlo adulto, pero no debes confundirlo con la flecha hacia atrás. Eso es otra cosa. ¿Bien? Ahora, inmediatamente debes darte cuenta de que necesitamos convertirlo en un componente, ¿verdad? Entonces déjame saltar adelante mientras lo muevo al marco de Recursos y voy por los escalones. Recuerda, esto necesita ser leído y tiene que ser un diseño automático. Bien, volvamos a la pantalla. Pero el lado derecho usa Shift a en ambos tipos. Deja 20 pixeles entre ellos. Aunque siempre podemos cambiar de opinión. Luego agrega otro, el diseño automático para toda la fila. Cámbielo al espacio entre. Entonces agreguemos un relleno de fondo blanco. Todos estos deberían llegar a ritmo de disparo rápido. Bien, blanco puro. Después agrega tu relleno. 32.16. Cosas increíbles. Espero que te estés divirtiendo. Centrarlo y cambiar el ancho a 656. Y lo creas o no, este es nuestro componente. Ahora obviamente todavía tenemos que hacer algunas cosas, pero no se preocupe, vamos a llegar a la humedad. Bien. Para la parte inferior, veamos qué es, qué. Ahora todavía tenemos algunas cosas que hacer aquí, pero cambiemos un escenario importante en la cima. Entonces comprimimos esta tarjeta cambiando este valor a 20. Y eso es porque necesitamos más espacio abajo. Todavía tiene amplia sala de lectura, pero ahora realmente nos encanta el espacio aquí. Para nuestra mejor suerte, aumentar la altura de línea para estas dos últimas capas de textos. Necesitamos algo un poco más generoso. Ahora, para terminar esta conferencia, por favor agregue un trazo gris muy claro a la nueva entrada que acabamos de configurar. Deberías tener ese salvamento gris. Bien, tenemos unos minutos más y vamos a terminar con este diseño. Tomemos un descanso rápido y vamos a terminar en un Jiffy. Gracias y enhorras por llegar hasta aquí. Muchas gracias. 48. Uso de variantes en la pantalla de comprobación: Bienvenido de nuevo. Aquí es donde dejamos las cosas fuera. Vamos a crear la propiedad text. Primero. Para el texto de la izquierda, este es el icono que estás buscando. Llámalo exactamente así a la izquierda. Y del lado derecho, lo adivinaste lo mismo, ¿verdad? Texto. Ahora podemos crear una variante donde simplemente cambiemos el color del texto. Ahora para ser justos, esto no es absolutamente necesario, pero la variante abre muchas posibilidades. Podrías agregar un color de fondo para el lado derecho, tal vez un signo de exclamación o un icono. Hay un montón de cosas que potencialmente podrías hacer, pero voy a mantenerlo simple por consideraciones de tiempo. Llamó a éste normal, luego al otro probablemente alguna vez. Ahora bien, esto debería ser bastante fácil de seguir en este punto. Volvamos a nuestro diseño y veamos Wordsworth. En primer lugar, desde el panel de activos, vamos a arrastrar en cuatro entradas en total. Navegar. Ahora, me voy a tomar el tiempo para reemplazar el contenido según sea necesario. Voy a necesitar unos segundos para encargarme de eso, así que por favor, ten paciencia con ello. Aquí está la cosa. Creo que se me olvidó cambiar el peso de los textos del lado derecho porque aquí está la cosa, esto tiene que ser audaz, así destaca. Aquí es donde va a ir la atención del usuario por defecto. Entonces la idea aquí es que tengamos el tiempo de entrega el cual se establece por defecto. Nuevamente, esto es bastante importante, que se establece por defecto en SAP, que significa lo antes posible lo antes posible. Y con mencionar se vuelve a poner 60 min, eso es bastante útil. Más abajo tenemos el entregar la dirección y luego la información de contacto porque obviamente sí necesitamos el número de teléfono y finalmente el número de la tarjeta de crédito, el pago. Entonces la idea es el usuario registrado, ¿no? Pero recuerden los campos de ese paso. No se trataba de su número de teléfono, su dirección, o su inflamación de pago. Entonces es por eso que lo estamos mostrando aquí mismo. Ahora. ¿Podríamos haber agregado todo esto en el proceso de registro? Sí, claro, pero esa no es una buena práctica. Entonces un cliente potencial quiere ver primero la app, ver todos los restaurantes. Y una vez que tengamos su atención, tenemos sus intereses, entonces podemos pedir más información. Pero si dormías 12 campos frente a él sin siquiera mostrarle la app, los restaurantes, los platillos. Bueno, eso es frustrante y la mayoría de la gente dejará la esencia de una app. Es para guiar al usuario con la menor fricción posible. La gente no está obligada a comprar nada. Tienen decenas de razones para dejar. Y eso no es necesariamente por tu diseño. Puede llegar tarde al trabajo. A lo mejor tienen algo en la estufa, lo que llora el niño, o alguien en la puerta y así sucesivamente. Entonces, una vez que entiendes que las personas que usan estas aplicaciones son personas reales reales con problemas reales, entonces todo empieza a tener sentido. Entonces es por eso que con hacer que todo sea tan intuitivo, tan sencillo. Así que podrías usar esta app aunque estés medio dormido porque nadie necesita ninguna fracción extra en su vida. Por eso solo estamos pidiendo que Occidente sea necesario al 100% en el punto correcto. El uno, el registro, no hay problema. No tengas tu tarjeta a mano. No hay problema. Pero sí, general, este es el diseño. En caso de que quieras agregar la sombra, te sugiero que primero envuelvas a todos estos tipos, los cuatro en un diseño automático. Y aquí está la cosa va a evitar la doble frontera. Puedes usar un valor negativo aquí menos uno. Eso es totalmente increíble, ¿verdad? Y si realmente quieres ser Becky, después de habilitar una sombra paralela, puedes seleccionar la primera y la última entrada y cambiar el radio de coordenadas manualmente. Recuerda que puedes configurarlos individualmente. Tenga en cuenta que no configuré el radio de coordenadas en mi componente maestro o en mi variante. Eso hubiera sido un problema para las entradas intermedias. Entonces, en cambio, decidí controlarlo, para controlar el radio de coordenadas individuales desde este lugar. Bien, tomemos un breve descanso. 49. Piensa con anticipación en el prototipo: Bienvenido de nuevo. Voy a saltar directamente de nuevo y crear algunas copias de esta pantalla. Y voy a cambiar el estado de la variante paso a paso. También voy a cambiar el texto del lado derecho por algo que parezca un poco más razonable. Ahora la idea aquí es pensar en el prototipo. Podríamos hacer esto interactivo para que tanto el cliente el desarrollador puedan tener un tiempo más fácil con él. La idea es que hagas clic en una de estas advertencias y luego te lleven a esa pantalla específica, el pago que una dirección y así sucesivamente, que también revelará cualquier defecto de cualquier brecha. Entonces, por ejemplo, pantallas que no incluimos, simplemente olvidamos incluirlas. Pop-ups o varios estados que no fueron incluidos en el brief o que el wireframe. Ahora, en caso de que quieras hacer un prototipo completo, necesitarás usar este enfoque paso a paso que estamos tomando aquí, llevándote a través de cada estado. Ahora bien, aquí está la cosa, prototipos complicados, súper avanzados. Hacer. ¿Los recomiendo? Yo digo que depende de qué? En el presupuesto en realidad, si te están pagando algo así como 500 dólares, no, probablemente no haría un prototipo interactivo completo, ¿verdad? En cambio, haría las interacciones más básicas solo para mostrar el flujo estándar de la aplicación. Pero si esto es 423, $5,000 y quieres impresionar al cliente, se aseguran de que vaya por ello. Pero hay otro caso que quizás quieras considerar. Esto es tal vez para tu cartera ¿verdad? Entonces, sí, totalmente. Podrías hacer algo especial C, Se trata de pensar a largo plazo, ¿verdad? Si se trata de un proyecto de 500 dólares, claro, no vale la pena el dinero, ya sabes, hacer algo impresionante, hacer un prototipo impresionante para el cliente. No vale la pena. Pero si esta es una de las pocas entradas en tu portafolio, entonces aprovecha esta oportunidad para crear algo que pueda mostrar tus habilidades, ¿verdad? El cliente recibe algo extra. Claro. Puede que no lo aprecie. Puede que no te pague por esa cosa extra. Pero lo que más importa aquí es que tengas una estrategia. Cuando alguien visita tu portafolio, ¿ qué quieres que vean? ¿Quieres que te paguen? Cuales son las palabras, claro, pero al inicio de tu carrera, eso siempre son cosas. Por lo tanto, debe sentirse a gusto sabiendo que entrega en exceso por una milla a un prototipo bastante bueno para entrar en todas estas pantallas, todos estos pasos adicionales. Pero aquí está la cosa. Cuando tienes altas expectativas, ahí es cuando las cosas se desmoronan. ejemplo, cuando aceptaste $500, pero luego golpeabas con mucho más trabajo del que sugería el wireframe. Y tú piensas, Oye, hice muchas más pantallas. Seguro que me va a pagar más. O, oye, ya sabes, este prototipo me llevó más que palabras. Pero la verdad es que ese no es el caso. Al cliente no le importará. El cliente no te va a pagar más. A lo mejor podría darte un pequeño bono, pero sí, básicamente aceptaste 500 dólares. Y cuando tienes expectativas, cuando te enojas, ahí es cuando esto se va a convertir en una pesadilla. Ahora bien, si lo volteas, si entiendes que vas a hacer todos estos bits extra como una inversión en tu cartera en tu futuro. Aseguran que esto tenga sentido. Ahora para nosotros en este caso específico, este es un curso sobre el diseño de AB y Figma, no sobre la gestión de tu carrera como diseñador, pero sigo sintiendo que debería compartir estos bits de perspicacia contigo. Ahora más que nada, quiero que seas feliz y eso puede pasar si no te estás metiendo en esta carrera con los ojos abiertos. Así que de nuevo, asegúrate de pensar en tu cartera. Piensas en el largo plazo, ¿verdad? Bien, déjame terminar la otra pantalla, mis órdenes mientras platicamos sobre esto y aquello. Aquí está la cosa. Después de realizar un pedido, necesitará la pantalla que lo confirme, bien. Pero es posible que también quieras reordenar al día siguiente o algo así. Entonces, lo que voy a hacer, voy a manejar ambas situaciones aquí. Espero que se sorprenda al ver lo rápido que podemos construir una pantalla en cuestión de segundos reutilizando todo lo que hemos construido hasta ahora. Si hay un último consejo para ti con respecto a estos proyectos, digo que es esto, asegúrate de asignar suficiente tiempo para ellos. Ve esta parte donde trabajamos solos con buena música sonando de fondo con una buena taza de café. Esta no es la parte difícil. En caso de que tengas que aprender a usar componentes varianza, aunque layouts, esto y aquello. Pero esta no es la parte difícil. Esta es la parte buena. Probablemente podría terminar todo este proyecto bajo el día, tal vez hasta medio día. ¿Quién sabe? Pero lo complicado es tratar con el cliente o con el gerente del proyecto. Son ellos que no te dan suficiente información para continuar. Es entonces estar indeciso sobre esto y aquello, y esto conformó a Figma en lo que es hoy. Es por eso que los diseñadores o la cocción tienen tanta flexibilidad en sus diseños porque están hartos de que los clientes cambien de opinión. Lo principal que quieres como diseñador es pasar al siguiente proyecto. Tienes las habilidades para terminar cualquier proyecto en muy poco tiempo. Si solo te quedas solo con un completo, breve y/o un buen wireframe. Pero no es así como es en el mundo real. Imagina si el cliente dice, oye, queremos más espacio entre cada fila o campos más grandes o botones redondeados, un tipo de letra diferente, ese esquema de color diferente. Bueno, por eso estamos usando todas estas funciones avanzadas en Figma para básicamente protegernos contra eso. Ahora, claro, en este caso específico, cambiar el tipo de letra seguiría siendo un poco doloroso aquí y allá porque no configuramos todo como un estilo. Pero a medida que adquieras más experiencia, podrás asegurarte contra todo. Esa es la cosa, eso es lo que hay que cuidar. Bien. Tengamos un descanso rápido. 50. Pensamientos finales sobre el proyecto: Bienvenido de nuevo. Todavía tengo que crear la página Contáctenos, pero esa es una copia muy básica de mi pedido. Entonces me voy a tomar unos minutos para pasar por los movimientos. Ahora mientras trabajo en segundo plano, déjame decirte lo feliz que estoy de que lo hayas hecho aquí. Yo quería incluir el proyecto serio en este curso, no uno simple basado en un par de pantallas, e.g Podríamos haber parado en la primera mitad del curso con las tres primeras pantallas. Lo que realmente quería que esto fuera real, para prepararte para el mundo real. Ahora la verdad es que es mucho trabajo repetitivo. Es mucha preparación. Pero una vez que tienes tus componentes establecidos, una vez que sabes qué fuentes quieres usar, qué colores y así sucesivamente, las cosas caen en su lugar y escucha algunas de mis elecciones. No estoy 100% contenta con el tamaño de los campos. Algo de espaciado está aquí y allá, pero siempre podemos tomarnos el tiempo para jugar con él. A partir de este punto, el cielo es el límite. Puedes hacer que este proyecto luzca 20 por ciento, tal vez 50% mejor en 30 min más o menos. Solo pon un trabajo sólido. Te lleva por ejemplo 10 h construir los cimientos. Pero después de eso, en el metal de los minutos, puedes transformar el diseño en algo mucho mejor. Tómese el tiempo para crear su propia versión basada en lo que ve aquí, me gustaría ver nuevos diseños, nuevas fuentes, mejores íconos de diferentes estilos de iconos que construyeron la vibra principal diferente un esquema de color diferente. A lo mejor hazlo más profesional, más juguetón, lo que sea que se te ocurra, ve a por ello. Ahora asumiendo que has terminado totalmente con el proyecto y quieres compartirlo, por favor no exportes ninguna pantalla como PNGs en su lugar, pulsa el botón de compartir desde este lugar. La vista, los detalles aquí, cualquiera con el enlace puede ver, ese es el estándar y te recomiendo que lo mantengas así. Potencialmente podrías invitar a alguien poniendo ese correo electrónico. Pero me gusta usar esta función Copiar enlace y luego enviarlo a quien quieras. Cuando quieras mostrarme tu versión, por favor usa este botón y envíame tu enlace. Para terminar esta parte, puedes preguntar, es esta al 100% entonces saber que siempre hay cosas que puedes hacer. Pero por ahora podemos terminar el diseño con una sonrisa en su rostro. Espero que estés orgulloso de ti mismo. Esto es totalmente increíble y te agradezco que te quedes conmigo hasta el final. Espero con ansias ver tu propia versión. Gracias y sigue vigilando. Hay más por venir.