Aprende a utilizar Figma: diseña una UI/UX móvil completa

1. Introducción: bienvenido al curso full mobile you aux con Sigma y este curso vamos a aprender cómo podemos utilizar la herramienta de diseño gratuita basada en la nube llamada Sigma para diseñar hermosos mock ups móviles para tus clientes o incluso tus propios proyectos. Vamos a diseñar un simulacro completo de siete páginas para el nombre de un cliente, Clean Kangaroo, que es esencialmente un servicio de entrega de lavandería. Mi nombre es Nina, y soy tu instructor para este curso. En los últimos 10 años, he diseñado y desarrollado decenas de aplicaciones tanto móviles como web. Y en este curso quiero mostrarles exactamente cómo diseñar un simulacro de móvil completo hasta desde cero. Ya que el curso es genial para cualquier persona. Incluso si eres un diseñador principiante, puedes saltar y aprender a diseñar hermosas marcas móviles. Aquí te dejamos unas cuantas cosas que vamos a aprender en este curso. En primer lugar, vamos a aprender a agregar imágenes e iconos a nuestros proyectos. Entonces vamos a aprender qué son los componentes, que nos ayuda a crear diseños reutilizables en nuestro trabajo. Vamos a aprender restricciones que nos ayudarán a mantener nuestros diseños responsivos para todos los tamaños de dispositivos móviles . Incluso vamos a usar los niños de diseño de Apple para armar algunas partes de nuestro proyecto. Y lo más importante, vamos a trabajar con mucho texto y aprender a aplicar nuevos estilos de fuente y nuevos estilos de color para tu proyecto también. E incluso vamos a usar enchufes para generar cosas como mapas o incluso obtener datos de las hojas de Google justo en tu proyecto de diseño. Incluso vamos a aprender a aplicarnos geniales a lo largo de tu diseño para que tus usuarios o tus clientes los usuarios sean súper felices usando la app que diseñaste. Entonces si estás listo para armar un bonito simulacro móvil para tus clientes o para tus propios proyectos que empiecen y te veré en este curso. 2. Requisitos de maqueta: Muy bien, Así que para dar inicio a este curso, vamos a saltar directamente al diseño de nuestro primer móvil. Tú yo ahora esto es realmente emocionante, y sí quiero mencionar que realmente no necesitas tener mucha información de fondo sobre fig mus . Si este es tu primer proyecto, deberías poder seguir cayendo. Pero por lo demás, si sí quieres aprender algunas de las cosas introductorias a la Fig MMA, sí te recomiendo que revises mi otro curso. Los otros cursos llamaron una introducción a la Fig MMA. En ese curso, repaso muchos de los conceptos básicos como marcos creando formas y explorando algunas de las herramientas y paneles a los que tenemos acceso en fig MMA. Pero si quieres saltar directamente y aprender a medida que vamos, también puedes hacerlo. Um, primero lo primero es que te recomendé ir a fig MMA dot com y armar una cuenta ahí. Si aún no lo has hecho, una vez que estás configurado y estás en la fig MMA, entonces estás listo para saltar a este curso. Entonces para nuestro primer proyecto aquí, vamos a estar trabajando en un móvil. Tú yo para esta empresa llamada Canguro Limpio. Nos vamos a imaginar que tenemos un cliente que nos ha dado este proyecto. Um, típicamente, un cliente se le ocurrirá algo similar donde te darán su nombre. Lo que hacen, um, es siempre lo que páginas Se requieren para el simulacro arriba. Entonces realmente vamos a tratar esto como un simulacro que vamos a diseñar para un cliente. Um, que resulta ser esta empresa llamada Clean Kangaroo Supercool. Ahora, antes de saltar aquí, sí quiero mencionar que tienen acceso a estos requisitos en un pdf. Ah, y el recurso es seguir adelante y descargarlos del recurso es de esta lección. También encontrarás el enlace del estigma para llegar a este archivo. Supongo que en realidad no vas a seguir adelante y copiado de aquí en tu fregona de higos, así que siéntete libre de descargar eso ahora mismo. Um, y luego seguiremos adelante y empezaremos con los requisitos. Entonces veamos qué hace esta empresa aquí. canguro limpio es un servicio de entrega de lavandería bajo demanda. El canguro limpio permite a los usuarios registrarse y solicitar que se les recoja su ropa en otro lugar. Esencialmente, es un servicio de entrega de lavandería que super cool. Veamos qué tienen en términos de activos de marca. Por lo que parece que quieren que en realidad ideemos un esquema de color. No tienen uno ahora mismo para su proyecto. Y luego quieren que también encontremos unos fondos asignados al proyecto, lo cual es genial porque vamos a repasar el color y la tipografía en este curso. Um, y luego veo lo único que nos han proporcionado es el logo, que de nuevo se puede comprobar. Recurso es encontrarlo. Ahora veamos qué requiere su simulacro en cuanto a las páginas. Por lo que primera página es una barra de registro de la página de inicio de sesión con un botón para un tutorial. Las opciones de registro serán correo electrónico y contraseña y luego asignarán con opción de Google también. Bastante cool. Bastante típico para una página editorial de inicio de sesión para explicar cómo funciona en tres pasos. Enfriar. También necesitamos una página para agregar una tarjeta de pago, página de mapa bastante sencilla para permitir que los usuarios establezcan su dirección de recogida y entrega. Está bien, eso es bastante guay. Parece que hay un año tipográfico así que seguiré adelante y arreglaré eso ahí mismo. Realmente rápido. Enfréntate para que los usuarios llamen para recoger la lavandería desde un servicio de lavandería local de su elección y les muestren el precio. De acuerdo, suena bastante guay. Creo que esta va a ser nuestra página principal por lo que veo. Y luego tenemos una página de perfil para ver todas las opciones de perfil del usuario así como los inicios de sesión . Um, bastante guay. Bastante sencillo ahí mismo. Y por último, una página para mostrar a los usuarios de su barra actual activa y también de sus pasados servicios de lavandería y cuánto se les cobró tiene sentido en caso de que los usuarios quieran volver atrás y ver cuánto cuesta su servicio y todo eso. Entonces sin más preámbulos, vamos a saltar directamente a configurar nuestros marcos de alambre y luego a iniciar nuestro archivo de higment para hacer el simulacro para este cliente 3. El marco de alambre: Está bien. Entonces? Y la última lección que repasamos los requisitos de la aplicación para el simulacro de arriba en el que estamos trabajando aquí . Canguro limpio. En realidad he bosquejado. Ah, Lo que creo que quiero incluir en el marco de alambre. Ah, y encontrarás que en el recurso es para este proyecto también. Eso de la última lección si descargaste el recurso es, um adelante y abre a limpiar boceto de marcado canguro. Pdf Si no, adelante y descarga. El recurso es y luego seguir adelante y abrir este archivo. Entonces una vez que lo abras, encontrarás ah, este pequeño dibujo que hice. Um, solo usar bolígrafo y papel para especie de crear un marco de alambre. Y esto es lo que llamamos un marco de alambre. Y tú yo o diseño de interfaz de usuario. Esencialmente, es como un plano para nuestro simulacro antes de que realmente saltemos y lo diseñemos y pasemos mucho tiempo diseñando sin saber exactamente cómo va a ser el proyecto de la obligación. Entonces, esencialmente, por eso hacemos un marco de alambre, generalmente antes de saltar y empezar nuestro simulacro. Ahora bien, si ya tuvieras algunas ideas para este proyecto y empezaste a dibujarlas. Siéntete libre de seguir adelante y tal vez hacer algunos ajustes en el camino basados en tu propio diseño . Si no, vamos a estar usando. Ah, este marco de alambre de aquí está bien encendido. Nos vamos a referir mucho al boceto a lo largo del diseño de este marcado. Por lo que definitivamente ten a mano el archivo. A se hincha, sus requisitos de APP, que de nuevo están en el recurso es carpeta. Así que realmente rápido. Repasemos las páginas aquí que he configurado. Ah, ahora verás su número. De acuerdo a qué? El cliente aquí nos ha dado de uno a siete y aquí se cubren todas las páginas. Tenemos una página de registro de inicio de sesión, um, y bastante sencillo. Con todos los requisitos que se han inscrito con correo electrónico lo enviaron con Google. Um, y luego tenemos un pequeño tutorial pop up. Estoy pensando en poner este tutorial justo en la parte superior de la página de inicio de sesión y luego solo hacer un pequeño pop up. Ah, con un fondo borroso, sólo lo vamos a hacer tarjeta de pago para que puedan tener su tarjeta de crédito. Y luego si vas a la siguiente página aquí. Ahora, he creado aquí una página para que el usuario establezca su dirección en encontrar su dirección para establecer para su servicio de joyería de lavandería. Esta es nuestra página de solicitud de barra principal. Um, ahora, desde aquí, habrá mapa fuera donde ponen su dirección de entrega que siempre pueden tocar esto para ir a esta página y luego actualizar ahí, tal vez nueva dirección si en algún momento cambiaron su dirección, luego aquí abajo, tenemos un grifo de solicitud de lavandería que esencialmente está siempre abierto. Te mostrará las tiendas cercanas. Estoy pensando en hacer algún tipo de, tal vez como, desplazar o deslizar a izquierda y derecha para ir a diferentes, um, para ver diferentes tarjetas para diferentes tiendas. Se puede ver lo que creo que deberíamos incluir aquí. Um, hacia abajo como una especie de hecho más de un dibujo detallado de lo que creo que debería incluirse en la tarjeta de la tienda aquí abajo. Entonces tendremos una imagen de la tienda, tal vez, um, um, nombre de la tienda, dólar por artículo, cuál es su tiempo de entrega. Entonces cuánto tiempo creen que eso tardará en hacer el servicio de lavandería y luego están calificando. Entonces para la estructura de navegación aquí. Es así como los usuarios se estirarán entre la principal, las tres páginas principales aquí, que es la página principal, la página del perfil y luego el pasado o los servicios slash Solicitudes Pasadas Página aquí. He decidido ir con una navegación de barra de tap. Entonces ahí es esencialmente donde ves que tienes una pestaña en la parte inferior y luego puedes ir a varias páginas en función de cuál sea seleccionado. Te llevará a la página correcta. Si utilizas la app instagram, por ejemplo, usan una pestaña, nuestro sistema, donde tienes opciones en la parte inferior aquí y luego cambias entre diferentes páginas. Esto es bastante común en muchas aplicaciones móviles. Y así como sólo tenemos realmente tres páginas principales aquí, nos vamos a apegar a usar una pestaña. Están y luego aquí abajo, solo te dirá el número uno o la opción superior sobre uno lo tomará. Los servicios eran apenas la página siete aquí mismo. Ah, aquí es donde ven sus pasados servicios de lavandería. Um, y otra vez amore versión detallada de lo que creo que debería ir en este tipo de lista. Um, ver aquí sería un nombre de tienda la fecha y hora en que colocaron la orden del servicio de lavandería . Y entonces tal vez dependiendo del estado de este orden, podemos mostrarlo por aquí. Entonces si ya se ha entregado, podemos decir entregarlo. Si actualmente se está lavando o secando, podemos mostrar que por aquí un oleaje en la página dos será la página principal por aquí. El pagina de lavandería y luego la tercera pagina irá a una pagina de perfil. A partir de aquí, pensamos que podemos actualizar abordado. Podemos permitirles editar su nombre. Correo electrónico. Um, pueden acudir a su método de pago. A partir de aquí, hay un poco de apoyo, pero en caso de que quieras ponerte en contacto con el equipo de canguro limpio, digamos en un botón de cierre de sesión, que es bastante típico en un perfil de página de cuenta slash. Entonces si esto es un poco demasiado ahora mismo, no te preocupes por todo. Una vez que empecemos a diseñar, lo vamos a dar paso a paso, página por página y realmente descomponer todo para luego seguir adelante y crear nuestro marcado. Todo el punto de este marco de alambre es sólo tener una idea de todo lo que necesitamos incluir. Por lo que no olvidamos accidentalmente algo o dejamos algo fuera. ¿ Verdad? Entonces, en la siguiente lección, vamos a seguir adelante y en realidad montamos todo Page is Ah, y luego prepárate para empezar a diseñar nuestro simulacro. 4. Cómo configurar nuestros cuadros: Está bien, entonces creo que estamos listos para montar nuestro nuevo proyecto. Ah, así que vamos a ir a Fig Mahir. Si estás en la aplicación de escritorio, es súper fácil crear un nuevo archivo. Simplemente sube aquí y presiona el signo más aquí. Voy a abrir una nueva falta. Vamos a seguir adelante y renombrarlo a Clean Kangaroo. Ya que ese es el proyecto en el que estamos trabajando aquí y ahora tenemos una nueva leva fresca. Está justo frente a nosotros. Ah, lo que voy a hacer es ir adelante y cambiar el color de fondo y hacerlo un poco más oscuro solo para algo de ayuda a crear algún contraste entre nuestros marcos. Aquí, Vamos a seguir y ahora configurar todos los marcos que necesitarán para nuestro proyecto. Entonces si vuelvo a mi boceto que tenía aquí, verás que tenemos siete páginas que necesitamos. Entonces sigamos adelante y configuremos esas páginas con los nombres apropiados, um, um, y luego saltemos a diseñar o iniciar sesión página. Por lo que de nuevo se crean nuevos marcos brillantes presionando f en su teclado. Entonces estamos ya sabes, estamos diseñando para un mock up móvil. Ah, cuando sigamos adelante y solo escogemos el iPhone 11 pro. Esto tiende a adaptarse a muchos de los nuevos tamaños de iPhone también. Sólo voy a hacer que mi fondo sea un poco más claro. Creo que eso es bueno. Entonces sigamos adelante y creemos siete de estas páginas. Por lo que la forma más fácil de crear múltiples marcos a partir de uno que ya han configurado es solo un duplicado presionando comando e r Control de si tu propio Windows. Entonces sé que tenemos un total de siete páginas, así que necesitaré hacer esto seis veces más. Entonces vamos a crear 12 tres, 456 Y ahora tenemos un mercado con siete páginas. Vamos a seguir adelante y utilizar la opción de zoom aquí y hacer zoom para que quepa. Lo que esto hará es simplemente seguir adelante y simplemente alejar el zoom hasta que podamos ver todos nuestros fotogramas. También puedes presionar shift one para alternar esta opción de zoom desde cualquier lugar que estés. Entonces si presiono shift uno puedes ver que se acercará para encajar ahí mismo a bastante práctico. Vamos a seguir adelante y renombrar todos los fotogramas y luego saltar a iniciar nuestra primera página de inicio de sesión , así que para renombrar fotogramas o capas. Ya sea puedes hacer doble clic aquí para que podamos hacer iniciar sesión. Puedo ver que ha cambiado aquí, o simplemente podemos ir aquí en nuestro panel de capas y vamos a hacer tutorial. Este será de pago. Este será mapa. Este va a ser nuestro pozo principal, realidad es una petición de guante. Entonces tenemos o perfil último, no deja. Contamos con nuestra página de servicios. Vamos a seguir adelante y comprobar dos veces que no nos perdimos nada aquí. Por lo que inicia sesión. Pagos tutoriales, solicitudes de mapa, perfil y servicios recortan solicitudes pasadas. Creo que tenemos todo aquí. Entonces, uh, ahora sigamos adelante y solo enfoquémonos en nuestra página de inicio de sesión. Otra forma ordenada de acercar es simplemente mantener presionada la tecla Zet en el teclado y luego seguir adelante y simplemente arrastrar sobre el área. ¿ Quieres hacer zoom en eso? Acercaremos así, así que volviendo a nuestra página de inicio de sesión, necesitaremos un montón de rectángulos, Um, específicamente uno para el correo electrónico. Quieres para el pasado Ward uno para el inicio de sesión y dos para los botones de registro aquí. Entonces eso es un total de cinco rectángulos. Vamos a seguir adelante y crear esos e intentar distribuirlos en consecuencia para que puedas crear un rectángulos presionando nuestro como aprendimos en las secciones anteriores. Adelante y solo arrastremos uno aquí. Um, creo que, um, la altura de 55 estaría bien, y luego solo sigue adelante y suelta. Estoy usando todo para aquí solo para ver dónde, cómo se posiciona aquí. Vamos a seguir adelante. También bajó el tamaño aquí . Hazlo 3 25 solo para que esté espaciado uniformemente entre la izquierda y la derecha. Voy a usar turno son para traer de vuelta a mi gobernante. Y luego voy a agregar algunas guías a mi izquierda y derecha solo para que las cosas sean más fáciles en el futuro . Entonces voy a usar el comando D cuatro veces para duplicar este rectángulo. Una forma ordenada de duplicar las cosas es sostener nuevamente altar y luego arrastrar este rectángulo. Usemos las teclas de flecha para simplemente bajarlo. Aquí tres píxeles. Ah, y luego, si presionas el comando D, en realidad va a seguir adelante y replicar ese mismo tipo de duplicado y movimiento que hice. Ahí vamos a hacerlo tres veces más. 123 y Ahora tenemos cinco campos o botones aquí que podemos usar. Vamos a mover estos abajo, también. Claro que hasta el fondo. Vamos a mover este un poco hacia abajo. Sigamos adelante y agreguemos un poco de estilo a esto a estos campos aquí. Hagamos que el relleno sea blanco y luego agreguemos un trazo de va a hacerlo ligeramente. Creo que aquí mismo es bueno. Si quieres obtener exactamente el mismo color de trazo, adelante y solo introduce esta, um, um, tecla hexagonal en tu recolector de color para el trazo. Sigamos adelante y solo hagámoslo 1.5 píxeles solo para que podamos verlo más fácilmente. Vuelve a seleccionarlos. Sigamos adelante y redondeemos las esquinas a ocho píxeles usando aquí. En realidad, los guisos. Seis. Se ve bien. Apliquemos de nuevo la misma herramienta de radio de esquina de estos. Puede sostener múltiples objetos usando shift debe seguir adelante y agregar algún texto usando el tiki. Tengo un texto aquí mismo, un tipo, un correo electrónico. Simplemente céntrese eso aquí, y luego sólo vamos a estirar todo el camino a través. Ya basta con eso. Yo sólo voy a duplicar sosteniendo viejo Vamos a hacer contraseña para no no te preocupes demasiado por las fuentes y los colores porque volveremos a eso en el futuro. Lecciones. Ahora mismo, sólo estamos tratando de conseguir la configuración básica. Vamos adelante y no quepan este texto aquí abajo a nuestro botón, y puedes centrar el texto usando esta opción aquí, donde dice centro de línea de texto. Hagámoslo iniciar sesión. Hagámoslo dos veces más para o regístrese con correo electrónico. Andi. Por último, inscríbete en Google. Si vuelvo a mi diseño, tenemos aquí una pequeña línea para solo distinguir entre las secciones de inicio de sesión y luego las de registro. Volvamos atrás y hagamos podemos hacer una línea por el presidente Oh, y sólo dibujemos una derecha del lado izquierdo de mi chico al derecho. Las cosas hermosas de los guías es que cuando te acerques a ellos, se encajarán justo en su lugar. Tan solo asegúrate de tener el tamaño adecuado para tu objeto. Una cosa también notar que cuando estás dibujando tu línea solo para asegurarte de que no vas en ángulos extraños aquí, mantén el turno y te ayudará a mantener las cosas en la posición de ángulo recto y soltarte aquí . Y tenemos nuestra línea aquí. Sólo voy a hacer el suyo un poco más ligero. Hagamos lo mismo. C nueve c nueve c nueve. Solo estoy escribiendo esto aquí y creo que eso se ve bien. Hagámoslo 1.5 y bigness. Entonces veo aquí que en realidad son dos líneas, una a la izquierda, otra a la derecha s. Entonces, ¿por qué no vamos adelante y duplicamos eso aquí y entonces voy a sólo arrastrar una mientras mantiene turno de nuevo al medio y el otro al medio está bien, por lo que esencialmente no tienen dos líneas. Entonces, ¿por qué no seguimos adelante y usamos o panel de propiedades aquí, um, para obtener el tamaño exacto es que vamos por aquí s entonces ¿por qué no bajamos esto a 1 45? Creo que eso es muy poco. Hagamos 35 y luego por este. Sigamos adelante y también lo hagamos 35 y luego voy a usar shift y luego las teclas de flecha solo para mover las cosas rápidamente. El turno, unas teclas de flecha te ayudan a mover los tonos para los objetos en 10 píxeles a la vez. De lo contrario, si solo usas las teclas de flecha, hará un píxel a la vez. Por lo tanto, siéntase libre de usar las teclas de cambio y flecha. Pero necesitamos mover las cosas rápidamente o usar las teclas de flecha para simplemente mover las cosas hacia abajo. Pixel por pixel. Adelante y alineemos esos de aquí. Ahí vamos. Añadamos otro texto simplemente duplicando éste y aquí, haciéndolo un poco más pequeño tipo adentro o adelante y simplemente intentamos eso en el medio. Enfriar. Entonces ahora estamos poniendo los conceptos básicos en marcha. Si vuelves a nuestro boceto, seguimos faltando. El logotipo seguía faltando términos. Aquí no tenemos una imagen de fondo ni el ícono del tutorial, así que volveremos en la siguiente lección, en realidad completamos o iniciamos sesión página aquí 5. Imágenes y superposiciones: Muy bien, Así que si has estado siguiendo hasta ahora, empezamos a diseñar nuestra página de inicio de sesión aquí. Por cierto, si no has seguido en el último par de clases, um, um, algo que puedes hacer ya sea en esta lección o en futuras lecciones, puedes ir a las copas del centro comercial por aquí, y el recurso está archivado fuera de este proyecto de diseño en el que estamos trabajando y luego verás acuerdo a la lección, último archivó la última caída de Fichman en la que trabajamos en esa lección. Así que adelante y empieza con esto. Si aún no lo has hecho de otra manera simplemente vuelve a tu fama, un archivo y continúa adelante y esta lección, vamos a explorar cómo podemos agregar imágenes en En realidad adelante y agregó imagen de fondo como bolas o logo de la limpia app canguro aquí mismo también. Entonces, en general, siempre que estés diseñando un proyecto y estás buscando fotos para usar, recomiendo encarecidamente ceniza virgen aquí Ahí, como dicen, la fuente de Internet de imágenes libremente utilizables como todas las imágenes que buscas son gratuitas de usar, Um, utilizo esta persona podría proyectos, y te recomiendo encarecidamente que vayas a comprobarlo y ver si hay una imagen ahí dentro que quieras usar para tus futuros proyectos. Por lo que he usado en Splashed para descargar realmente una imagen. Entonces para encontrar esa imagen ir al recurso es carpeta de este proyecto en el que estamos trabajando y de nuevo, puedes encontrar que al principio mismo de esta sección. Así que adelante y abre imágenes, encuentra la página de inicio de sesión, y luego notarás que aquí hay una imagen de fondo. Nosotros. Adelante y pasemos a Fig MMA. Bueno, tener tu carpeta aquí Así que este fondo J. Peg Jigme permite importar J peg PNG S V G e incluso pdf Y la forma más fácil de hacerlo, es solo para seguir adelante y arrastrar tu imagen a la derecha en tu archivo de dedo. Esta imagen es enorme. Por lo tanto, tómese un tiempo para cargar. Um, te darás cuenta de que se va completamente fuera del marco. Entonces lo que voy a hacer es en realidad mantener turno y Ault, y luego seguir adelante y redimensionarlo. A estas alturas. Probablemente sepas lo que hace el turno. Se mantendrá la proporción para que la imagen no se distorsione. Pero lo que todo hace en realidad nos ayuda a mantener la posición o el centinela nous de esta imagen para que cuando redimensione, no se fuera a la esquina de ahí. De lo contrario, si yo si dejo ir de viejo en solo turno de espera, se puede ver que está muy fuera de mi marco. Entonces por eso estamos usando turno y cosa vieja. Eso está bien aquí mismo. Vamos a seguir adelante y sólo bajarlo y en realidad vamos a asumir un poco más, creo que eso es bueno por ahora. Algo a mencionar es que se pueden recortar imágenes porque, como se puede ver, la imagen es enorme y está cubriendo más espacio, y necesita hacerlo. Entonces vamos a elegir la herramienta de cultivo desde aquí arriba. Y una vez que estemos en la herramienta de cultivo, podemos seguir adelante y simplemente mover estas esquinas azules aquí, y eso nos ayudará a conseguir el tamaño que necesitamos. Se ve bien encajando perfectamente. Um, también puedes acceder a las herramientas de imagen Mawr Aquí está bien, puedes agregarlas todas estas cuando vayas aquí a la derecha y haz clic en esta herramienta de imagen, y desde ahí puedes ajustar tu cultivo. Si cometiste un error, y quieres cambiarlo ahora O puedes hacer cosas como mejorar el contraste. Um, ya sabes, la temperatura de saturación es solo una especie de herramientas sencillas de edición de imágenes que obtendrás en muchas de las aplicaciones de diseño. También puede rotar la imagen desde aquí también. Algo a mencionar aquí es que ahora mismo tenemos cultivos así porque así recortamos nuestra imagen. Pero si sí llenamos así lo que Phil hará es tratar de seguir adelante y poner esa imagen dentro de esa caja limitadora que tenemos en este momento. Si encajamos, intentará hacer proporcionalmente lo mismo. Eso porque esta imagen orginalmente es, um, en esta proporcionada se tratará de mantener eso en para encajar tipo por aquí. Um, podrías hacer azulejo si quieres hacer múltiplo. Entonces esto es realmente grande. Pero si lo hago, digamos 2% o 3% en realidad es tener esta imagen repitiéndose. Um, eso podría funcionar para, como, tal vez un fondo de patrones. Pero para este caso, creo que crop hará el trabajo. Entonces es solo usar cultivo y luego cerrar esto por aquí. Um, ahora notarás mis imágenes de fondo cubriendo todo lo demás. Entonces, vamos a seleccionar la imagen de fondo aquí. Tráelo todo el camino hacia abajo. Ahora está justo debajo de todas mis capas aquí, que es lo que quiero. También quiero agregar un excesivamente encima de esta imagen para que el primer plano aquí no funde con el fondo que tenemos para agregar una superposición. Pasa por donde dice, Phil, ya verás. Ahora mismo es imagen. Asegúrate de tener la imagen seleccionada por cierto, Entonces adelante y pulsa el icono más y Phil. Y ahora mismo nos ha dado un int Grady. Entonces si quieres agregar un Grady a tu imagen, puedes hacerlo. Pero yo sólo quiero seguir adelante y elegir sólido por aquí, las superposiciones en la parte superior de su cuadro. Pero no podemos ver nada, así que bajemos la cuerda una ciudad para que podamos ver partes de la imagen. Y sigamos adelante y elijamos un color más oscuro. Nos vamos negros y luego otra capacidad es demasiado alta aquí, así que vamos a hacer, um, tal vez 50%. Creo que eso es bueno. Por lo que ahí lo tienes. Hemos agregado nuestra imagen al fondo aquí. Ahora sigamos adelante y no nuestro logo. Entonces de nuevo, desde la sección de recurso es, verás que tenemos una carpeta de logotipos por aquí. Adelante y arrastremos aquí su de color y solo sigamos adelante y usemos turno Ault y redimensionar eso de nuevo. Creo que quizá 80 por 80 debería ser bueno. Sólo voy a acercar un poco aquí y vamos a ver. Utilice el centro de línea horizontal por aquí, que es la segunda opción en las herramientas de línea. Un doble centro automáticamente tu imagen dentro de tu marco. Voy a subir un poco, tal vez añadir espaciado de 70 a la parte superior y luego usando T. voy a añadir ah, texto para mi logo. Hagamos canguro limpio. A continuación, asegúrese de seleccionar todo y luego chocó con el tamaño del texto a 26. Y creo que eso se ve bien. Cambia el relleno dos blanco Aquí. Simplemente voy adelante y centro eso, junto con el logo aquí, cosa que se ve bien. Ahora bien, podrías haberte dado cuenta de que todo es una especie de ronda flotante por su cuenta. Nada está realmente relacionado aquí, Um, y qué figura nos permite hacer en las capas, solo las cosas grupales que son relevantes juntas, para que si les hacen cambios o si quieren moverlos, por ejemplo, digamos que quiero mover este campo de correo electrónico en lugar de simplemente mover la caja y luego mover el texto. Simplemente puedo seguir adelante y agruparlos y moverlos juntos o aplicar estilos juntos en todo tipo de cosas diferentes. Por lo tanto, para hacerlo, selecciona tu rectángulo. Estamos sosteniendo turnos como tu texto. Ahora se puede ver que ambos he seleccionado porque ambos tienen este pequeño fondo tintado azul . Usa Command G o Jeon Windows controlado para agrupar las cosas. Hagamos lo mismo para la contraseña para el botón de inicio de sesión por aquí. Hagamos lo mismo por el separador que tenemos aquí Senado con correo electrónico inscribir escuela. Creo que todo es grupo juntos excepto por mi local aquí. Entonces hagamos lo mismo aquí es Bueno, sigamos adelante y renombremos todos estos. Puedes cambiar el nombre de los grupos simplemente haciendo doble clic en el panel de capas aquí, así que vamos a hacer logo en. Sigamos adelante y sólo una especie de convención seguida aquí para agregar una jerarquía que tenga sentido . Entonces sigamos adelante y primero coloquemos nuestro Grupo uno y luego nuestro grupo al que es la contraseña Grupo tres por seis. Y luego cambiemos el nombre del resto e mail password log in. Pero en divider, debo hacer inscribirme botón de email inscrito Google whoops, pero en y la lista. Simplemente adelante y nombra esto o fondo. Y en realidad, vamos a encerrarlo en su lugar su papel para que no lo movamos accidentalmente. Enfriar. Creo que fue bueno por ahora. Ahora sabemos agregar imágenes. Volvamos y añadamos algunos iconos porque, como pueden ver en mis bocetos aquí, tengo algunos iconos para el tutorial para el email y la contraseña. Um, y luego agregaremos el resto de las cosas para la página de inicio de sesión y luego lo terminaremos en la siguiente lección. 6. Agrega íconos: Muy bien, Así que hemos agregado imágenes a nuestra página de inicio de sesión aquí. Entonces sigamos adelante y sumamos los iconos. Um, basado en lo que tengo en mi boceto aquí, vamos a agregar tres iconos, uno para la página editorial en y luego uno para los campos de correo electrónico y contraseña aquí. Y entonces, ¿por qué no seguimos adelante y simplemente cepillamos las cosas un poco para ayudar a terminar nuestra página de registro aquí? Entonces volvamos a Fig MMA. Ahora quiero mostrarte un recurso realmente genial es para iconos que puedes conseguir. Um, hay un sitio web llamado Flat icon dot com. Lo uso para muchos de mis proyectos. Como puedes ver aquí, tienen casi tres millones de iconos vectoriales que puedes usar en múltiples formatos. PNG SPG Tienda de fotos en. Esto es genial porque son completamente libres de usar, aunque sí te piden que le des crédito al artista ahora, sí tienen algunas opciones de precios donde puedes suscribirte y no tener que acreditarlos, y obtienes acceso a mucho más iconos también. Enfriar. Por lo que usando icono plano, he descargado algunos iconos para la página de inicio de sesión. Entonces, ¿por qué no seguimos adelante y los encontramos? Nuestro recurso es para este proyecto yendo a iconos, y luego verás la página de inicio de sesión aquí, por lo que ahora están en formato SPG. Definitivamente puedes importar iconos PNG y J pick en tu proyecto es bajo, Um, aunque no es recomendable porque no obtienes mucho control sobre, por ejemplo, el relleno o poder incluso hacer retoques a los iconos. El beneficio de un tipo de icono SVG es que puedes redimensionarlos sin tener que preocuparte por que los iconos se pixelen. A diferencia de un icono PNG, que es esencialmente rast suscitó un significado de que tiene un estándar dentro de altura. Y si intentas hacer una Nikon más grande que esa resolución, empezará a pixelarse. Entonces recomiendo usar SPG, y ahí es donde vamos a estar haciendo para este proyecto también. Um, así que la última lección arrastramos imágenes a nuestro higo MMA. Podemos hacer lo mismo aquí, pero solo por el bien de ello, te voy a mostrar otro método que también puedes insertar imágenes, que es bastante limpio. Funciona bastante bien para los iconos es baja. Ahora volvamos a cambiar a Fig Mahir. También puedes colocar imágenes en tu higo mis archivos subiendo aquí a las herramientas de forma y luego ves que hay imagen de lugar. O alternativamente, puede presionar el comando shift K o el control de shift K y Windows, y seguirá adelante y abrirá un navegador de archivos para usted que pueda usar. Entonces aquí veo como mi ícono de tres ¿Entonces qué? Seguimos adelante y solo los seleccionamos todos en una apertura rápida. Ahora la herramienta de imagen de lugar te da un montón de opciones. Puedes o bien seguir adelante y simplemente colocar todo y colocaría todas las imágenes aquí, um, en mi marco. O puedo alternativamente arrastrar y colocarlos a medida que voy largo social, Tú cómo funciona eso. Por lo tanto, siéntase libre de hacer eso simplemente arrastrando y nuevamente mantenga el turno para restringir las proporciones . Y entonces una cosa que necesitas hacer es realmente mantener espacio para que mientras estás colocando tu ícono, realmente puedas moverlos. Entonces, ¿por qué no simplemente, um, ponemos eso aquí y luego sigamos adelante y dibujamos mientras mantenemos el turno de nuevo. Entonces este parece que es una contraseña uno. Entonces se va a ir aquí. Vamos a redimensionar y mover estos después de que sea sólo para volver a tener una idea. Voy a mantener turno y hacer el correo electrónico. Uno aquí es bajo. Acabo de soltarme. Y ahí lo tienes. No se añadieron tus tres iconos, y así creo que estamos listos para seguir adelante y hacer unas dos semanas tanto a esos íconos como a otras cosas dentro de nuestra página de maletas. Entonces trabajemos desde aquí arriba y bajemos a primera hora. Vamos a seleccionar aquí nuestro ícono tutorial y luego adelante. Por aquí, verás que no hay Phil sino más bien colores de selección. Y eso es porque cuando tienes un grupo que por defecto y S V. G. Ah, será un grupo de vectores aquí dentro de tu panel de capas. Es por eso que en lugar del relleno, se mostrará como colores de selección. Hará lo mismo, sin embargo, sin embargo, así que adelante y selecciónelo y luego dale un relleno o un color de selección blanco apagado. Vamos a seguir adelante y redimensionar esto a tal vez 35 año. Creo que eso se ve bien. Voy a seguir adelante y añadir una guía. Eso es, Ah, guía horizontal. Aquí puedes hacer, como 36. Simplemente adelante y por favor mi imagen en la esquina de su Que se ve bien. Ahora bajemos. Vamos a acercar. Adelante y haga doble clic aquí. Es posible que notes que cuando tengas algo grupo, tendrás que hacer doble clic en él para empezar a cambiar elementos dentro de un grupo. Entonces por aquí tengo todo mi grupo. Pero si quiero cambiar algo con el texto del correo, tengo que hacer doble clic aquí y luego seleccionar ese texto de correo electrónico. Entonces voy a hacer eso. Vamos a seguir adelante y redimensionar esto a 25 tal vez incluso 22. Ahora este ícono aquí en realidad no es parte del grupo todavía eso para hacer eso. Adelante y arrastra este icono para el correo electrónico al grupo de correo aquí, y así ahora en realidad puedo seguir adelante y mantener el turno y seleccionar eso juntos e incluso el fondo de correo o el campo de texto de correo electrónico y sin usar los centros de línea vertical. Y eso sólo va a seguir adelante y centrar todo para mí. Voy a cambiar el texto aquí a 14 y seguir adelante y cambiar el color, también. Un color más claro porque ese es el texto del positor. No es el correo electrónico real. Voy a usar el color A para A para un cuatro para que puedas meter este código en tu campo aquí, y eso te dará el mismo color si quieres usar eso, y entonces solo por fin espaciemos las cosas correctamente aquí. Tratemos de hacer 15 aquí y luego a 15. En realidad están vamos a hacer 10 ahí. Eso se ve bien. Hagamos lo mismo aquí. Primero coloquemos esto dentro del grupo de contraseñas. Asegúrate de ponerlo dentro del grupo y no fuera. Entonces para asegurarse de que, por ejemplo, esta capa esté dentro del grupo, aquí debería haber un poco de sangría. Si lo pierdes por accidente, solo puedes seguir adelante y, um, rato encima del grupo, y luego definitivamente lo colocará dentro de ese grupo. Es sólo doble rápido aquí. Cambia esto a 25 también, o teníamos un 22. Adelante y seleccionemos todo aquí centro de ellos. Acabo de mover esto hasta que tengamos Sina esta aplicar relleno de un cuatro a 484 Solo mueve esto para que esté coincidiendo con esta posición en la posición del correo electrónico. Parece que olvidé cambiar mi texto a 14. Y de nuevo, voy a centrar eso otra vez porque cuando cambies el tamaño del texto, cambiará la alineación vertical. Así que asegúrate de usar siempre que Lyman Tools para re solo cosas. Si se mueven por ahí, vamos a entrar aquí con el cambio. Esto a 14 es bajo. Bajemos aquí. Adelante y capitalicemos esto o texto por aquí. Y para ello, vaya a la sección de texto fuera de la de sus propiedades. Haz clic en los tres puntos y aquí en tu aviso, tienes un montón de personalización diferente que puedes hacer. A mí me interesaba la letra mayúscula aquí para hacer el caso mayúscula, y así ahora es mayúscula. Adelante y cambia el relleno a blanco, y luego voy a seleccionar las dos líneas y en realidad bajar su ciudad de paga a Vamos a intentar 50%. Incluso podemos hacer algo así como 35. Queríamos definitivamente ser visibles, pero al mismo tiempo sutiles. Creo que eso es bueno. A lo mejor sólo golpe tamaño de texto de este a también 14. Manténgase consistente. Sigamos adelante y seleccionemos todo aquí y también hagamos su línea. Eso se ve bien. Y entonces eso es redimensionar pieza a 14 y 14 aquí. Por último, asegurémonos de que nuevamente alineemos las cosas correctamente. Olvidé hacer esto por algunos de los botones, así que vuelve a entrar. Tan solo asegúrate de que todo esté alineado críticamente, y creo que eso se ve bien aquí. Um, así que si vuelves al boceto aquí, casi terminamos. Solo necesitamos un botón de términos por aquí o una sección de términos. Entonces sólo vamos a hacer un texto en lugar de otro botón, algo. Ya tenemos demasiados botones aquí. Entonces vamos a hacer Vamos adelante y sólo Presti abrir un año de texto y derecho Términos de servicio. Adelante y cámbiate eso a blanco aquí y parece que he estropeado por completo la carcasa aquí. Entonces ahí vamos, términos de servicio, e incluso podemos hacer y política de privacidad. Eso es típicamente lo que ves para poner en negrita ciertas partes del texto. Simplemente selecciona la parte que quieras negrita y luego sigue adelante y usa comando. Sé como atajo, o en realidad puedes acceder a él desde aquí también y ponerlo en negrita. Hagamos lo mismo aquí con términos de servicio. Hazlo audaz. Se ve bien. Asegurémonos de que esté centrado. Está bien, eso está centrado. Y realmente asegurémonos de mantener un espaciado fuera. 36 de abajo es baja. Entonces ahora si me alejo, ya verás que casi terminamos. Siguiente lección. Vamos a volver a hablar de colores y en algunos colores dentro del año porque, como pueden ver, no tenemos ningún color excepto el logo eso. Trataremos de usar el color local, que es un naranja, para escoger un bonito esquema de color para nuestro arriba en la siguiente lección. 7. Elige un esquema de color: todo bien. Entonces vamos a saltar a escoger un esquema de color para nuestra aplicación porque, como mencioné el principio mismo de la sección Ah, el cliente no ha especificado un esquema de color, así que vamos a ayudarles a construir uno en esta lección y luego aprender un poco más sobre esquemas de color y estilos de color en fig MMA. Enfriar. Por lo que se incluye en el recurso es de esta lección habrá un poco de texto archivado que te dará una plantilla que armé para nuestro esquema de color. Vamos a usar eso en tan solo un segundo. Algunas lecturas de buen color. Así que adelante y dar estos artículos o leer. Si quieres aprender más sobre los colores y cómo aplicarlos en tu proyecto, y esto también es realmente genial. Hay un montón de esquema de color. El recurso es así que todos estos sitios web te ayudan a construir un esquema de color para tu proyecto. Um, sé que sigo diciendo esquema de color, y tal vez no sepas exactamente qué es el esquema de color, pero esencialmente, vinieron los colores. Es una especie de palets, ¿verdad? Cuando eres artista, tienes una paleta de diferentes colores que usas en tu diseño o en tu arte, así que es lo mismo. Solo hay tantos colores que podemos usar y que se ven bien juntos. Entonces eso es lo que es un esquema de color, un montón de colores que podemos usar para un proyecto sobre. Nos apegamos a ellos y creamos consistencia con ellos y nos aseguramos de que también haya contraste ahí. Entonces se ve bien y es legible y todo eso. Entonces sigamos adelante y abrimos aquí este segundo recurso. De verdad me gusta. Nos ayudará a idear un esquema de color para nuestro proyecto, así que acabo de abrirlo. Aquí arriba. Se llama colores, desde Bo. Esencialmente, tiene un montón de diferentes paletas de colores o esquemas de color que puedes usar para tus proyectos. Aquí hay algunos realmente bonitos, realmente crujientes y afilados, Um, y hay otros que son algo más livianos, dependiendo del proyecto que estés usando, definitivamente pueden obtener inspiración aquí, o incluso utilizar estos mismos palés en tus proyectos. Tienen un montón de otras cosas. Inspiración, um, obsequios, colores de marca. Si quieres ver el esquema de colores de tus marcas favoritas e incluso algunas realmente geniales Grady Anzas , bueno, uh, vamos a volver al grifo de la paleta de colores. Adelante y escojamos un esquema de color que tenga sentido para nuestro proyecto, ya que el canguro limpio tiene que ver con el agua de limpieza, ¿sabes? Entonces, um, esos colores aire suelen asociarse con el color azul. Um, ahora veo en el proyecto aquí. Ah, su logo ya es naranja. Entonces azul y naranja irán realmente bien juntos. Um, sí. Un buen ejemplo de eso podría ser aquí donde tenemos una especie de azul y naranja. Creo que lo que voy a hacer es que voy a usar esta paleta aquí, pero luego adelante y agregarle algunos colores personalizados también. Entonces sigamos adelante y copiemos algunos de los colores. Pero antes de que hagamos eso, voy a seguir adelante y abrir este enlace del que les hablé. Sólo tienes que seguir adelante y abrir ese enlace aquí. Emitido llevarte derecho a este archivo donde armé una plantilla de esquema de color que puedes usar. Tiene acceso tienes acceso a esos enlaces. Aquí está bien, si puedes abrir eso ahora mismo, estábamos justo en la segunda página web aquí muy rápidamente. Esta es esencialmente tu paleta de colores que vas a usar para tu proyecto. Tenemos un color primario que suele ser el color de la marca, color secundario y luego para acentuar colores que usarán pero no tan frecuentemente como un secundario en colores primarios. Y entonces podemos hacer un color de texto primario y secundario también. Entonces, por ahora, sigamos adelante y solo copiemos esto. Seleccionemos todo aquí. Todo ya está dentro de un grupo, lo cual es agradable. Si bien tener a estos grupos como ese ir adelante y golpear comando, ver o controlar. Ver en Windows en, luego dirígete a tu propio proyecto. Voy a pegarlo justo encima de mi página de inicio de sesión por ahora, pero más tarde organizará esto en otra sección. Yo sólo voy a moverlo aquí por ahora. Solo eliminemos las plantillas y el texto aquí, y luego sigamos adelante y le asignemos algunos colores. Entonces primer color voy a asignar ah probablemente será un color que todos usaron como color secundario . Entonces sigamos adelante y doblemos rápido aquí. También otra forma, si tienes un grupo como este, y quieres seleccionar Ah, un objeto dentro de él sin tener que hacer doble clic en él. Simplemente puedes mantener el comando y luego seguir adelante y seleccionar un objeto dentro. Esa es una forma bastante ordenada de seleccionar las cosas en lugar de tener que duplicar rápido todo el tiempo. Entonces ahora tengo esta seleccionada, Um, Lo que estoy tratando de hacer aquí se le asigna este tipo de color naranja, o veo que tiene múltiples colores naranja, así que vamos a usar el color de aquí para llenar este ángulo de ruptura. La forma más fácil de hacerlo es mantener el control, ver, y luego obtendrás un pequeño selector de color que incluso puedes ver en la esquina superior derecha de tu pantalla, que te permitirá elegirlo. Rellena. Vayamos aquí abajo. Um, ahora te darás cuenta de que aquí hay múltiples naranjas de las que podemos elegir. Entonces sigamos adelante y solo vayamos por aquí donde están las piernas del canguro y elijamos esta naranja. ¿ Qué tan guay es eso? Otra forma en que también se puede agregar relleno mientras se usa un selector de color o en I drop picker como para abrirlo. Y luego usando esto, se me cayó herramienta de aquí también. Entonces volvamos a los colores. Inspo. Um, y me gustan mucho estos tonos de azul aquí, alguien que use esto para el resto de mi paleta de colores. Entonces vamos a hacer copia por aquí con sólo hacer clic en el azul y luego volvamos a pasar a la primaria otra vez. Tengo eso seleccionado usando comando on y elijo este ángulo recto, y por aquí verás justo al lado de tu color de relleno. Hay un pequeño texto que es esencialmente el código hexadecimal de ese color, por lo que en este momento es blanco y blanco tiene un código hexadecimal de seis efs. Entonces si quieres seguir adelante y reemplazar esto usando el comando V o control vía en Windows presionar enter, eso acelerará ese color justo ahí para ti. En realidad voy a cambiar este texto también sólo que podamos usarlo. Y digamos que hay un desarrollador que quiere usar este color. Ya sabes qué código hexadecimal representa. Hagamos lo mismo para el color naranja. Vamos a seguir adelante y copiar este código hexadecimal para ingresar aquí. Volvamos a los colores. Inspo, toma este azul Aquí, tal vez, y sumado a este campo aquí mismo y también texto andan. Por último, quiero hacer un color claro que podamos usar para quizá el fondo de ciertas partes de la app. Simplemente haga doble clic aquí otra vez y luego cambie esto también. Y ahí lo tenemos. Tenemos, ah, bonita paleta de colores que podemos usar para nuestro proyecto. Um, vamos a asignar los colores de texto secundario primario texano más adelante, pero por ahora, vamos a seguir adelante y enfocarnos en aplicar estos colores. 8. Cómo configurar los estilos de color: todo bien. Entonces ahora que hemos creado nuestro esquema de color para arriba, quieres seguir adelante y en realidad agregar los colores del's a lo que se llama el estilo de color, que nos permite reutilizar los mismos colores a lo largo de nuestro proyecto para que podamos cambiar fácilmente estos colores si decidimos hacerlo en el futuro y no tener que cambiar todos los objetos asociados a ese color. Entonces sigamos adelante y seleccionemos el primer color aquí. Voy a mantener el comando aquí y dar clic en él donde diga, Phil, vas a ir por aquí a donde este ícono por lo tanto punto por aquí llamado Estilo. Adelante y haga clic en él y sigo adelante y creo un estilo usando el ícono más y nombrelo Primaria y sigo adelante y creo estilo. Y como pueden ver, tengo este estilo de color de azul. Añadamos el resto de los colores aquí también. Vamos a usar comando rápido en esta naranja. Ahora adelante con el estilo Aquí, Crear estilo secundario. Lo mismo para este color de acento. Gran acento de estilo. Uno. Ya tienes la idea a estas alturas acentúa y ahí la tienes. Tengo este esquema de colores ahora aquí. Entonces ahora ¿cómo aplicamos eso a nuestros botones? Bajemos a nuestra página de inicio de sesión. Vamos a seguir adelante y usar comando y haga clic en el fondo de esto aquí. De lo contrario, si seleccionas todo el grupo, tendrás que agregarle el color aquí en los colores de selección. Por lo que ambos funcionan. Vamos a seguir adelante y sólo en realidad elijamos a todo el grupo. Bajar a los colores de selección, y luego a partir de aquí verás estilos. Así que adelante y abre el estilo. Y ahí lo tienes. Tienen ustedes mismos aquí que pueden usar en ese botón. Um, creo que aquí habría usado el botón primario. Sigamos adelante y cambiemos el color del texto dedo del pie blanco aquí abajo. Y luego bajemos a nuestro siguiente botón por aquí. Date de alta con correo electrónico y luego por aquí otra vez. Pero selecciona un estilo fuera de primaria. Lo mismo para el texto blanco para el Senado con Google Button. Um, voy a seguir adelante y en realidad asignar un relleno de sólo blanco. Creo que eso se ve bastante bien. Vamos a seguir adelante y aplicar el mismo estilo a nuestros iconos aquí para seguir adelante y hacer doble clic. Asegúrese de seleccionar todo el marco o el grupo. Aquí, déjame seguir adelante y cambiar el color de selección usando el estilo de color al primario. Lo mismo para el correo electrónico. Primaria. Ahora es aquí donde sucede la magia. Entonces ahora digamos de repente que cambias de opinión y quieres ir con un color morado . Simplemente puedes elegir uno de los elementos usando ese estilo de color de cabeza por aquí, seguir adelante y dar click en él y luego elegir editar estilo y puedes seguir adelante y ahora cambiar este color. Eso Hagámoslo tal vez un color morado. Ahora, como puedes ver, todo en el proyecto usando ese color está cambiando, y puedes imaginar lo genial que sería eso si tuviera varias páginas diseñadas aquí. Pero incluso aquí dentro de este grupo, eso es super cool. Podemos seguir adelante y simplemente jugar con este Ah, y cambiar nuestro color primario si lo elegimos. Pero en realidad voy a simplemente hacer deshacer y volver a nuestro color principal aquí y allá lo tenemos . Eso son estilos de color para ti. Creo que estamos casi terminados aquí solo voy a hacer un par de toques aquí para sólo mejorar esto un poco lleno, si quieres. De lo contrario, en la siguiente lección, también puedes descargar la higo mi caída que tenemos hasta aquí y empezar con eso. Pero sigamos adelante aquí y mejorarlo. Vamos a acercarnos aquí. Bajar un poco este botón. Sigamos adelante y aumentamos el espaciado entre ellos a cinco, y en realidad nos olvidamos de agregar algo aquí. Normalmente hay botón de contraseña olvidada Voy a agregar como texto. Dale un color blanco y cambió el tubo de espesor. Aguanta. Vamos a seguir adelante y colocar eso por aquí que se ve bien. Voy a subir un poco este divisor hasta que el tienen. A lo mejor está espaciando. Tratemos de hacer 55 píxeles aquí, y luego vamos a reventar estos y tratar de conseguir la escena. Vuelvo a usar todo aquí para ver el espaciado entre diferentes objetos con los que he seleccionado. Eso es bueno. Añadamos un poco más de espaciado entre estos y que sean cinco también. Vamos a alejarnos. Y creo que eso se ve mucho más limpio ahora. Enfriar. Por lo que ahora tenemos una página de maletas terminada. Creo que se ve bastante bonito. Y creo que ahora estamos listos para empezar a entrar en nuestra página tutorial, uh, y diseñamos eso juntos. 9. La página tutorial: Muy bien, entonces tenemos nuestra página de inicio de sesión. Ahora en adelante. Entrémonos en diseñar nuestra página tutorial. Volvamos a mi boceto sólo para ver qué tenemos aquí. Um, Así que estaba pensando que deberíamos hacer un fondo desenfocado de esta pantalla aquí mismo. Entonces, cuando el usuario toca el tutorial, simplemente seguiría adelante y difuminaría el fondo de aquí y luego un poco apareciendo aquí con el título y el texto corporal por aquí. A lo mejor un pequeño vector que podamos usar para mostrar ese paso. Seré bastante guay. Entonces, empecemos a diseñar eso. Entonces en esta lección, vamos a jugar con efectos para agregar una especie de desenfoque de fondo a esta página y luego construir encima de eso. Ah. Entonces lo que tenemos que hacer es realmente copiar todos los elementos aquí dentro en nuestro tutorial también, y verás por qué en un segundo, sigamos adelante, dedos son log and frame aquí, Um, Um, y en realidad, adelante y solo selecciona todo aquí. Adelante y usa comando. Ver o controlar. Ver, para copiar, dirígete a tu página editorial y asegúrate de tener seleccionada la página editorial y luego hacer Comando V y luego seguir adelante y realmente usa el comando G para agrupar todo eso en un solo elemento. De esta manera sólo tenemos un grupo sencillo por aquí. Voy a cerrarlo para que no mueva accidentalmente las cosas. Y ahora sigue adelante y crea un rectángulo presionando el R dos desde la esquina superior por aquí hasta abajo. Entonces una vez que tengas ese rectángulo aquí, sigamos adelante y cambiemos el Phil a negro. Y luego cambiemos la opacidad a, um, pensemos que el 55% se ve bien. Así que ahora pasa a los efectos, crea un nuevo efecto pulsando aquí el signo más y luego haz clic en la sombra de gota y cambia eso a un desenfoque de fondo. Es ahora, como pueden ver, agrega un bonito desenfoque de fondo a mi ángulo recto aquí en. Entonces lo que eso hace es que difumina todo por debajo de él porque esta capas encima de todo el grupo que creamos a partir esencialmente de esta página aquí que acaba de seguir adelante y lo voló todo debajo de ese rectángulo. Si toca las cosas encima de este rectángulo. No se va a difuminar, que es lo que queremos. Continúa la borrosidad de tu desenfoque de fondo haciendo clic en este icono de aquí y cambiando el número aquí. Entonces en este momento son cuatro, pero podemos hacer 10 nuevos 15 a través en más desenfoque. Creo que para nosotros voy a hacer ocho por ahora, creo que ocho trabajo, Um, o incluso seis. Ahora sigamos adelante y creamos un rectángulo para el fondo de mi tutorial. Ese es nuestro vamos a arrastrar uno siendo basado en mi boceto. Algo así se vería bien. Al igual que allá. Se utilizó la herramienta de línea aquí para asegurarse de que esté centrada. Cambiemos el color de relleno a Blanco. Adelante y rodeemos las fronteras a Hagamos 25 pixeles cosa que se ve bien y no, necesitamos textos aquí, uno para los títulos. Hagamos T y tipo y título cuando configuramos la fuente aquí en 22. Sigamos adelante y solo seleccionemos ambos y usemos esa herramienta de Lyman. Sigamos adelante y solo duplicemos este impuesto holding old do body aquí y sigamos adelante y cambiemos el toro a un tamaño regular y telefónico de 14. Ahora te darás cuenta de que si empiezo a escribir aquí, algo aleatorio aquí, el texto seguirá pasando y sigue y sigue. No era lo que queremos para nuestro tutorial para tutorial. Queremos un pequeño tipo de párrafo de texto aquí. Por lo que aquí es donde entra en su lugar su caja de texto. Si re tamaño o texto aquí ahora, puede elegir cuál será el ancho del mismo. Y entonces ahora puedes seguir adelante y solo centrar eso aquí sólo otra vez, asegúrate de que todos estos aires centren juntos. Ahora si agrego más texto aquí, habrá atado por esa caja. Entonces, en nuestro recurso es que tenemos esta app. Notas. Inicia txt. Adelante y abre eso. Notarás que tenemos pasos tutoriales aquí, por lo que el texto de los primeros pasos está por aquí. Entonces sigamos adelante y solo copiemos eso. Y escuchar eso se ve un poco mejor. Vamos a seguir adelante y solo redimensionar eso y de nuevo, asegurémonos de que esté centrado. Vamos a seguir adelante y hacer un centro de alineación para el texto. Creo que aquí podemos hacer tamaño telefónico de 16 para que se vea un poco mejor. Y para el título, sigamos adelante y solo pongámoslo para navegar. Vamos a seguir adelante y en realidad agrupamos todo esto seleccionando todo aquí. Comando G. Asegúrate de que vuelva a estar centrado. Adelante y bajemos un poco estos. Adelante y sumamos otro rectángulo para nuestro pero aquí 2 55 para la altura y el que se ve bien. Yo solo quiero asegurarme de que esto también coincida con eso con de mi botón. Voy a cambiar mi botón Phil a mediante el uso de estilos, voy a cambiar el fondo del botón al azul. Ahora sigamos adelante y añadamos un radio de borde de ocho aquí y luego sigamos adelante y añadamos un texto dentro. Para el siguiente, Cambia el color a los blancos y simplemente sigue adelante y centro de éstos juntos. Agruparlos juntos y vamos a entrar aquí y centrar el texto aquí. Eso se ve bien. Ahora sigamos adelante y añadamos algunos iconos vectoriales. Entonces otra vez, en el recurso es si vas a iconos y entras en tutorial aquí, verás que tenemos tres vectores que podemos usar para nuestros pasos, Um, así que sigamos adelante y en realidad solo los arrastramos todos a mi producto archivo aquí. Si retrocede los higmentos, colóquelos todos uno al lado del otro. ¿ Qué escuela? Vamos adelante y primero redimensionar que tiene su enorme volver aquí. Creo que lo haces un poco más grande que eso. Solo sigamos adelante y saquemos a estos del camino por ahora. Ahora, ten en cuenta los iconos vectoriales como SV G's, um, aparecen como fotogramas en tu proyecto, así que asegúrate de tratarlo como un fotograma cuando te muevas. Entonces sigamos adelante y encontremos aquí este marco para este ícono y en realidad arrástrelo dentro de nuestro grupo aquí. Entonces si me desplaza hacia abajo todo ver Tutorial y entonces este es nuestro grupo, solo por favor ponte dentro de aquí. Y luego mientras sostenía turno, voy a centrar a ambos. Voy a asegurarme de que eso es que creo que podemos agregar un poco más espaciado del dedo del pie nuestro texto aquí, y creo que eso está empezando a verse bien. Entonces, ¿qué vamos adelante y en realidad le agregamos estilo al ícono aquí? Al elegir o estilos de color y tal vez eligiendo la opción secundaria y luego para nuestro título o el texto de aquí. Cambiar sí, también. El azul. A lo mejor. Creo que incluso podemos hacer esto un poco más grande. Probemos 24 y luego sigamos adelante y seleccionemos a estos dos juntos para centrarlos y asegurarnos de que todo aquí también esté centrado. Parece que es así que ahí lo tienes. Ese es nuestro tutorial para crear los dos últimos pasos cuando sigamos adelante y seleccionamos todo este marco aquí y hacemos comando D dos veces para duplicarlo dos veces. Y entonces vamos a alejarnos al igual que estos dos fotogramas y simplemente moverlos justo debajo y haciendo lo mismo aquí. Entonces sigamos adelante y cambiemos el nombre de este tutorial 12. Paso dos cambió el nombre de este tutorial buscado Paso tres. Y luego, por supuesto, vamos a hacer tutorial. Paso uno. Ahora vamos a seguir adelante y simplemente cambiar rápidamente el contenido aquí dentro. Entonces hagámoslo a Volvamos a nuestro archivo de texto aquí y parece que éste se trata de solicitud . Pega ese texto aquí, y luego sigamos adelante y usamos Command X o controlamos las ventanas Exxon para cortar ese ícono de ahí y reemplazarlo por éste. Simplemente voy a dar clic donde está y luego seguir adelante y solo pasé ahí mismo usando Command V o Control V. Ahora parece que sí puso esto dentro del marco del otro. Entonces sigamos adelante y sequemos, salgamos del marco del otro ícono y luego llevemos al otro ícono. Y aun así queremos añadir Aplica el naranja Phil, y eso se ve bien para un paso, también. El siguiente es nuestro Paso tres. Vuelve aquí otra vez, renombró este a votos limpios. Adelante y pega eso aquí. Seleccionemos todo y el texto aquí y solo centrémonos en eso a lo largo. Y luego, por supuesto, vamos a nuestro último Lecter aquí y usando Command X de nuevo, pegue eso aquí y luego simplemente asegurándonos de que eso está fuera de esto, borrando al director de la tienda y luego cambiando el estilo, también. Almacenamiento. Adelante y cambiemos el texto aquí a hecho porque en este punto los usuarios completaron el tutorial, así que se van a hacer con él. Cuento lejos. Por lo que ahí lo tenemos. Ese sartorial paso uno Paso dos e incluso Paso tres 10. Componentes: Muy bien, entonces en esta lección, vamos a hablar de algo muy útil en los componentes de culto de la fig MMA. En lo que va de nuestras páginas tutoriales, hemos creado múltiples tarjetas esencialmente para cada paso del tutorial, correcto, ya que el usuario pasa desde el paso número uno hasta el Paso número tres. El punto de vista, esta pequeña tarjeta tutorial. Um, de donde pueden obtener su información sobre cómo funciona la APP. Ahora digamos que me doy cuenta de que quiero seguir adelante y cambiar el nous redondeado de este fondo por aquí. Entonces por supuesto que puedes ir por aquí y digamos desde 25 Begin dijo que 15. Pero ahora mira lo que pasa. Nuestro tutorial, paso número dos y el paso número tres aún tienen un radio de esquina de 25. Eso es porque realmente no hay relación entre cada una de estas cartas aquí, pero ¿qué componentes nos permiten hacer? En realidad es ir adelante y crear una instancia de estas tarjetas o realmente cualquier cosa que vaya a tener un estilo muy similar o una configuración realmente similar, igual que hacemos aquí, correcto, aunque el texto para cada carta es diferente. Pero generalmente tenemos mucho más pasando aquí en términos de estilo o cómo se colocan los elementos . Y a menos que vayamos y hagamos ese cambio a cada pantalla de forma individual, pero no podremos conseguirlo de otra manera. Entonces ahí es donde entran en juego los componentes. Voy a seguir adelante y deshacer ese radio fronterizo aquí. Tan solo asegúrate de que sean 25 de nuevo. Ahí vamos, y ahora vamos a convertir esto en un componente, y luego verás cómo es útil. Por lo que nuevamente, los componentes pueden ser cualquier parte del diseño que quieras duplicar pared, manteniendo un cierto estilo o cierta característica para que si en algún momento decidiste cambiar eso cambió el estilo, cambió las características fuera de ese componente, puedes hacerlo en un solo lugar y no tener que hacerlo en múltiples lugares. Si viste la lección donde hicimos los estilos de color, es muy similar a los estilos de color donde si solo hace ese cambio aquí, todos nuestros botones y elementos usando ese estilo de color cambiarán en lugar de que tengamos que ir en uno por uno y cambiarlos. Entonces sigamos adelante y saltemos y realmente hagamos un componente así que empecemos con la tarjeta por aquí en tutorial. Paso número uno. Si no has estado siguiendo, asegúrate de ir a la carpeta de recurso es aquí, cual puedes volver a obtener desde el principio de esta sección en adelante y luego subir para ir a maquetas y encontrar la lección en la que estás. Y puedes seguir adelante y abrir el expediente y seguir junto con nosotros. De lo contrario, saltemos. Simplemente voy a seguir adelante y acercar aquí. Sigamos adelante y seleccionemos a este grupo. Y como tal vez recuerden, ese grupo contiene el texto aquí. Poco título A. Zola's the Antecedentes. Ahora acabo de notar que mi botón y mi icono aquí, mi vector aquí están incorrectamente dentro del grupo. Así que sigamos por aquí al panel de capas, Um, Um, y solo sigamos adelante. Y en primer lugar, agrupemos el siguiente botón juntos. El rectángulo siempre es el texto usando el comando G. Vamos a nombrar este siguiente botón, y entonces tenemos el vector aquí. Sigamos adelante y solo seleccionemos a estos dos. Por alguna razón, se han agrupado, pero en realidad queremos seguir adelante y simplemente separarlos y ponerlos en este grupo. Ahí vamos. Y ahora tenemos todo en un solo grupo. Simplemente voy a seguir adelante y volver a pedir un par de cosas. Trae este navegador hasta aquí, trae esto hasta aquí. Acaba de decir ahí en especie de buen orden de arriba a abajo. Creo que eso se ve bien. Entonces ahora sigamos adelante y seleccionemos por completo a todo el grupo. Asegúrate de tener el grupo seleccionado con cada elemento dentro. Ve todo el camino hasta aquí donde dice crear componente. Alternativamente, puedes hacer la opción Command K o Ault Control K, y eso hará lo mismo. Y así ahora verás en mi panel de capas, este grupo de repente tiene un nuevo icono, e incluso el texto es morado. Y entonces eso nos está diciendo que esto ahora es un componente. Entonces ahora lo que voy a hacer es seguir adelante y sostiene a Ault y seguir adelante y arrastrar otra copia a esta página. Ese tutorial Paso número dos página ahora, porque he creado mi componente a partir de este grupo aquí. Este no es mi componente maestro. Lo que he hecho ahora es que he ido adelante y he creado una instancia a partir de ese componente maestro, lo que significa que este grupo aquí ahora pertenece a las propiedades y al estilo y todo aquí. Por lo que vamos a la cabeza sobre Oral Incendiada Paso dos Página. Um, solo voy a seguir adelante y llevar esto afuera. Esta es la tarjeta que originalmente estaba aquí. Yo también voy a sacar esto. Sólo voy a reordenar eso. Entonces está en la cima. Um, OK, entonces ahora lo que queremos hacer es insertar este texto para entrar aquí Control. Ver, para copiar Pace que bajo lo mismo para el texto aquí abajo Ahora para la imagen aquí, voy a hacer algo diferente porque ahora es una instancia de ese componente maestro . No puedo seguir adelante y simplemente traer elementos dentro de aquí, pero definitivamente puedo agregar cosas aquí y luego elegir ocultar o correr ocultar las cosas que quiero mostrar en cada instancia de la misma. Así que vamos a seguir adelante y hacer doble clic aquí para conseguir nuestro icono vectorial por aquí. Yo sólo voy a hacer copia. Subamos aquí a nuestro componente maestro aquí y solo peguemos eso ahora. Simplemente voy a seguir adelante y asegurarme de que lo alinearé con mi otro ícono aquí. Ahí vamos. Vayamos todo el camino hacia abajo y hagamos lo mismo con este iPhone aquí él estaba al mando. Ve, sube aquí y luego vamos a seguir adelante y a la paz que ahí dentro. Parece que ciertamente los inserté en los otros fotogramas vectores para asegurarme de que tienes tus fotogramas independientes entre sí para los iPhones aquí. Y así ahora qué podemos hacer aquí. Vamos a seguir adelante y simplemente deshacernos de esto. Ya que terminamos con ello y solo centramos tanto tiempo, creo que eso está centrado. Adelante y fuera del centro a lo largo del componente maestro en esta página, o simplemente puedes ir aquí y presionar los centros horizontales y verticales, y eso hará lo mismo. Y sigamos adelante y copiemos esto. Adelante y selecciona esta página tutorial antes de pegar aquí. Vamos a seguir adelante y vamos a arrastrar esto fuera de aquí y arrastrar estos hinchan mis cosas de grupo un poco extrañamente en mi tarjeta tutorial. Adelante y seleccionemos un Paso tres territorial y luego sigamos adelante y peguemos así Ahora tenemos otro. Sigamos adelante y copiemos el texto aquí y oigamos y éste dentro de aquí y notarás que éste no está centrado. Entonces primero, sigamos adelante y eliminemos este grupo aquí y vayamos todo el camino hasta nuestro componente maestro aquí. Lo que vamos a hacer es simplemente seguir adelante y estirar ese texto todo el camino para que coincida con nuestros textos corporales y luego seguir adelante y hacer clic en el centro de línea de texto. Entonces ahora si voy aquí abajo, eso debería quedar bien. Ahora, ¿qué pasa con los iconos de aquí? Bueno, esto es lo que vamos a hacer. Vamos a hacer doble clic aquí. ¿ Recuerdas? A pesar de que esta es una instancia de un componente, todavía tienes control sobre algunas de las cosas como lo que muestras y lo que escondes aquí. Adelante y selecciona este grupo y ve donde tenemos toallas. Contamos con lavadora y tenemos el icono de la tienda. Entonces voy a seguir adelante y esconder el icono de la tienda y la lavadora. Entonces sólo tenemos las toallas aquí, las toallas limpias. Sujamos aquí doble rápido adentro y hagamos exactamente lo mismo y éste, sin embargo, sigamos adelante y escondamos la toalla una tienda, y luego sólo tenemos la lavadora. Y por último pero no menos importante aquí arriba. Ahora, una cosa que sí quiero mencionar para esta tarjeta aquí porque este es el componente masivo. Si le hago algún cambio, aunque oculte esos iconos extra aquí dentro, um, en um, realidad va a seguir adelante y quitarlo de mis otras páginas también. Entonces eso no es lo que queremos aquí. Normalmente, cuando crea componentes, desea seguir adelante y colocar sus componentes y un lugar separado en algún lugar diferente en algún lugar separado, para que pueda reutilizarlo sin editar desde otro lugar. Entonces, ¿qué vamos adelante y arrastramos esto afuera y simplemente lo colocamos aquí por ahora? Y sé que se ve un poco organizado, y la siguiente lección vamos a volver y limpiar eso antes. Ahora, vamos a seguir adelante y presionar comando, ver seleccionar. Nuestra Pretoria enmarcará aquí y hará Comando V. Y así ahora tengo otra instancia de ese componente maestro. Ahora, si entro aquí y luego escondo mis toallas en mi lavadora, solo tengo mi icono de tienda, que es exactamente lo que queremos. Entonces, ¿por qué acabamos de hacer eso ahí? Sé que obtuvimos exactamente el mismo resultado que antes. Ahora déjame explicar qué es diferente si subes a tu componente maestro aquí en adelante, puedes identificar un componente maestro a partir de sus instancias mirando realmente el símbolo aquí. Componente maestro tiene este pequeño icono de diamante justo al lado del nombre. Si voy aquí abajo. Ya que esta es una instancia de ese componente maestro, puedo ver que no tiene eso para icono de diamante pequeño. Simplemente tiene uno vacío. Entonces eso me dice que esta es una instancia de ese componente maestro. Entonces ahora si subo aquí y hago doble clic en mis componentes maestros hasta seleccionar este rectángulo aquí No, digamos que quiero cambiar mi nous redondeado a cero justo como ejemplo aquí. Ahora, si voy aquí abajo a mi paso número uno ve tiene un radio de esquina de cero. Lo mismo para el paso número dos y lo mismo para el paso número tres. Eso es bastante guay ahora mismo. Si vuelvo aquí y uso comando, haga clic en mi fondo y entreguelo a bordo de un radio de 20. Lo mismo se aplicará a todas las demás instancias. Digamos que decidí ahora alinear realmente todo mi texto a la izquierda aquí. Entonces si selecciono mi texto y hago una línea que queda aquí, solo voy a asegurarme de que estos tengan el mismo tamaño. Está bien, eso está bien. Yo sólo voy a seleccionarlos y asegurarme de que también estén en el centro. Parece que lo son. Entonces ahora si voy aquí abajo, verás que mi texto ha cambiado a lo largo de todas mis instancias. ¿ Y qué tan genial es eso? En lugar de tener que hacer un cambio en todos mis grupos aquí Ahora, solo estoy haciendo un cambio en el componente maestro ahí. Entonces ahora solo voy a seguir adelante y seleccionar ambos texto aquí y centrarlos de nuevo. Ahora, si me alejo, verás que se han hecho los cambios Aquí está bien, así que sigamos adelante y también renombramos el nombre de este grupo a decir, tutorial card solo para que no lo hagamos Sabemos exactamente lo que este componente maestro representa. Entonces ahora si voy aquí abajo y digamos por alguna razón en mi paso uno o mi marco paso uno aquí. Quiero seguir adelante y usar esto como un grupo completamente separado sin relación con esos componentes maestros, aunque de ahí lo sacamos. Pero digamos que quieres seguir adelante y deshacerte por completo de esa relación ahí. Entonces todo lo que tienes que hacer es simplemente pasar al panel de propiedades aquí y luego donde dice tutorial card. Adelante y selecciona eso. Y luego y luego puedes seguir adelante y seleccionar adjuntar instancia. Y así este es ahora un grupo separado eran en realidad incluso un marco separado. Si voy a mi panel de capas ya ves, no tiene el mismo icono que tenía antes aquí. Entonces ahora si solo sigo adelante y salto aquí y digamos que mueva estos y veamos para liderar este ícono aquí, esto no tendrá relación con el componente maestro ni con ninguna de las otras instancias. Entonces esto ahora está completamente separado, y lo que sea que le hagamos simplemente permanecerá en esta página dentro de este marco a lo largo. Entonces solo voy a seguir adelante y golpear comando Z Bunch veces dos volver a tenerlo como instancia, y ya ves ahora es una instancia de nuevo porque tiene un pequeño borde púrpura como ah de Bella , mi panel de capas, es s tarjeta tutorial y tiene un pequeño ícono que teníamos antes. Entonces ahora sé que esta es una instancia de ese componente, así que siéntete libre de aprovechar los componentes donde puedas. Ah, siempre que veas que tienes múltiples objetos que están relacionados o que tienen el mismo aspecto, probablemente puedas ponerlo en un componente maestro. Y así ahora quiero darte un poco de ejercicio para que realmente sigas adelante y pongas nuestros botones en un componente separado también. En la razón es que, como has notado, Ah, muchos de los botones que estaban usando en realidad tienen un estilo muy similar. Y de nuevo, si decido cambiar el botón de inicio de sesión aquí para que sea negrita, mis otros botones no usarán esa propiedad porque solo estoy cambiando mi registro, sino aquí. Pero normalmente queremos que nuestros botones tengan el mismo aspecto o muy similares con solo pequeños ajustes, como un color de fondo del color del texto. Así que siéntete libre de hacer este ejercicio y crear un componente maestro a partir de tus botones en adelante. Quizás colóquelos fuera de tu diseño por aquí y luego adelante y crea instancias dondequiera que veas tenemos ese botón usado. Algo que sí quiero mencionar antes de saltar a ese ejercicio es que una vez que creas aquí un componente maestro, asegúrate de hacer una instancia y ponerla aquí en lugar de, ah, tus tarjetas separadas. Porque de nuevo, este es un componente. Esta es una instancia de ese componente. Entonces, cualquiera que sea el cambio que quieras hacer aquí, sobre todo en cuanto a lo que quieres agregar o quitar a todo este grupo aquí, te gustaría hacerlo dentro del componente maestro. Si no quieres hacer este ejercicio, siéntete libre de saltarlo y luego simplemente salta al siguiente video donde realmente lo vamos a hacer juntos y aprenderlo un poco más sobre los componentes. Debido a que su súper poderoso 11. Componentes de botones: Muy bien, así que sigamos adelante y saltemos a convertir nuestros botones en componentes. Entonces lo que vamos a hacer aquí es lo que vamos a utilizar uno de estos botones para crear componente maestro y luego crear instancias de él en todas partes estaban usando el botón. Entonces sigamos adelante y usemos la opción él o la vieja clave y arrastremos una copia hasta aquí. Vamos a seguir adelante y sólo arrástrelo aquí y otra vez. Podemos crear componentes subiendo aquí y haciendo click. Crear componentes. Y así ahora eso es pero en componente que tenemos. Se llama botón de inicio de sesión ahora mismo, porque ese es el nombre que teníamos para ello antes. Pero sigamos adelante y sólo Él cambió esto a botón. Y ahora lo que voy a hacer es ir adelante y seleccionar mi trasero y componente aquí. Usar comando. Mira, voy a seleccionar iniciar sesión aquí el marco y solo voy a seguir adelante y pegarlo aquí. Sigamos adelante y solo alineemos eso con donde teníamos nuestro original. Pero aquí y después, sigamos adelante y solo encontramos ese botón de inicio de sesión en nuestros marcos y borrado y solo voy a seguir adelante y bajar esto a justo debajo de mi pasaporte pero adentro y lo que Estamos aquí . Sigamos adelante y solo movamos esta contraseña olvidada justo después de la contraseña y las condiciones de servicio todo el camino hacia abajo, justo encima de mi fondo, solo voy a reorganizar algunas de nuestras capas aquí. No tienes que hacer esto, pero siempre me gusta mantener mis capas organizadas aquí. Entonces ahora esta es una instancia de ese botón. Lo que podemos hacer aquí. Podemos seguir adelante y usar de nuevo la tecla de opción para crear otra instancia. Y sigamos adelante y cambiemos el nombre de éste o el texto para que éste se registre con correo electrónico igual que tenemos aquí abajo. Adelante y alineemos esa lenta usando las teclas de flecha para asegurarnos de que lo hicimos bien. Y entonces sigamos adelante. Y de igual manera élite se inscriben pero aquí y se movieron hacia abajo este rótulo para arriba. Pero aquí dentro, aquí mismo, sigamos adelante y hagamos lo mismo por este último botón de aquí. Esta vez voy a usar el comando D y luego me inscribiré. En realidad es do iniciar sesión con este Google? No, antes tenía un fondo blanco aquí. Por lo que para cambiar mi color, todavía puedo seguir adelante y seleccionar esto. Y ahora mismo tiene colores primarios seleccionados. Pero si quieres cambiar eso, solo puedes seguir adelante y hacer un estilo desprendido que te permitirá elegir tu propio color. Y entonces, claro, necesito bajar aquí a mi fuente y o mi texto aquí y cambiarlo a negro igual que lo teníamos antes. Y entonces, claro, sigamos adelante y para liderarlo, eliminemos la otra copia que teníamos justo debajo de ella eliminar y este colapso esto y traerlos adelante. Tráelo justo debajo de la otra. Entonces el orden tiene sentido y ahí vamos. Entonces ahora si voy a mi maestro Pero en componente aquí, si sigo adelante y decido usar comando sea yo decido negrita en el texto. Verá, mis otros botones tienen un texto de toro. Ahora si entro aquí, si vuelvo aquí y doble clic y para elegir mi texto y digamos que elijo el tamaño de 16 y vuelvo. Ves mi talla tienen aumento aquí. Entonces, por ahora, vamos a seguir adelante y en realidad en negrita. Entonces vamos a seguir adelante y en realidad seleccionar nuestro texto aquí en tal vez hacer un medio, medio camino pedo aquí y luego seguir adelante y CR cambie por allá. Enfriar. Entonces ahora por aquí, estamos bien. Tenemos nuestros botones y estas son todas instancias. Algo que quiero mostrarles aquí es que hicimos un cambio a nuestro fichaje con Google aquí . Entonces lo que realmente hicimos aquí es que le anulamos esa propiedad de ese color de fondo aquí de los componentes maestros, que es azul. Ah, y luego lo cambiamos por el blanco. Entonces digamos que en algún momento decidí hacer que este botón se viera como el resto. Um, si quiero cambiar todo por completo, puedo seguir adelante y seleccionar, ir a mi panel justo aquí, y luego hacer reinicialización desde aquí. Y eso me dará exactamente cómo era ese componente maestro. Entonces puedo seguir adelante y cambiar el texto aquí. Entonces comandemos eso aquí. Digamos que solo quieres cambiar el Phil de nuevo al color original. Entonces puedes doblar rápido aquí y seleccionar tu rectángulo aquí, Asegúrate de tenerlo seleccionado, y yo hago lo mismo. Pero esta vez, en lugar de anulaciones recientes, puedes hacer reset, Phil. Y así que eso sólo va a llegar a llenar que teníamos de los componentes maestros. De lo contrario, puedes seguir adelante y simplemente dejar eso así. Ah, ¿cuáles son las propiedades anuladas para este botón? 12. Uso de páginas para organizar: vamos a hacer para cosas más realmente rápidas aquí solo para envolver los componentes. Vamos a seguir adelante y así por aquí. Como puedes ver, se está poniendo un poco desordenado. Por lo general, queremos tener nuestros componentes y cosas. Tales juegos de erudito en una página separada y nuestros diseños por lo que no hace que nuestro espacio de trabajo esté ocupado aquí. So Figure te permite crear varias páginas dentro de tu archivo, pero simplemente subiendo aquí a donde dice Página uno En este momento, esta es actualmente la página en la que estamos. Se llama Página Uno, um, waken. Adelante y renombralo a. Pero si marcas ups y sigamos adelante y creamos otra página por rápido en el icono Plus aquí y haciendo tal vez componentes y luego adelante y haga clic en Plus y solo hagamos otra para los estilos. Entonces sigamos adelante en nuestro simulacro de arriba. Vamos a seguir adelante y sólo seleccione el grupo de esquema de color aquí y use Command X. Volver a los estilos deben establecerse aquí. Enfriar. Y entonces ahora volvamos a marcar ups. Seleccione los dos componentes. Estar fuera de aquí. Usa Command X de nuevo para cortar luego ve aquí a nuestra página de componentes y pegarlos aquí. Ahí vamos. Enfriar. Entonces ahora quiero hacer otra cosa aquí con los componentes de botón. Por lo general, botones tienen múltiples estados, así que tenemos, ah, botón que podría estar deshabilitado. Por lo que esto puede decirle al usuario que en este momento no pueden usar ese botón encendido. Y luego tenemos un botón, generalmente en estado habilitado. Entonces botón como este usualmente le dice al usuario que está habilitado. Pero, ¿y si quieres crear otro tipo de botón que diga a los usuarios en el botón está deshabilitado? Entonces, para hacer eso, vamos a seguir adelante y usar sal y dragón instancia lejos del componente aquí, y entonces, en realidad, vamos a convertir esta instancia en un componente en sí creando un componente y las capas aquí. Vamos a seguir adelante y renombrar este botón a deshabilitado y el otro a habilitado. Así que asegúrate de seguir esta convención aquí, pero en barra inclinada hacia adelante habilitada y luego botón hacia adelante faja desactivada para la parte inferior aquí . Entonces sigamos adelante y seleccionemos esto deshabilitado. Pero aquí dentro, vamos a seguir adelante y primero desprendemos el estilo aquí, y luego cambiamos el relleno del botón a tal vez tú simpático? Um, una especie de gris aquí funcionaría. Hagamos, um, este color de aquí, un nueve, un nueve, un nueve y una última cosa que voy a hacer rápidamente aquí. Voy a seguir adelante y sólo cambiar el texto aquí. Y como puedes ver ahora, también ha cambiado en el otro botón. En La razón de eso es que hemos convertido la instancia y instancia de este botón en un componente. Por lo que sigue relacionado con este botón y los cambios que le hacemos. Por lo que de nuevo hacerla esta llamada barra de botón barra hacia adelante deshabilitada en la otra. Pero en slash habilitado, te mostraré en un segundo. Por qué, eso es importante. Entonces ahora si vuelves a los dos años de Michael Page aquí, eso se ve mucho más limpio. Por cierto, Ahora verás mi texto aquí ha cambiado de nuevo a botón. Tenemos que volver a cambiar esto a ley. Eso es porque no volvimos a anular el texto a ley. Acabamos de usar lo que tuviera el componente. Entonces cuando lo cambiamos a, pero cambió. El texto aquí está bien, pero el otro se mantuvo igual porque sí hicimos esa anulación para el texto aquí. Ahora bien, si selecciono un botón y voy al panel Instancia aquí, en realidad podría seguir adelante y elegir deshabilitado o habilitado. ¿ Qué tan guay es eso? Nos olvidamos de hacer una última cosa aquí, y eso tiene que ver con la tarjeta tutorial aquí. Ah, y eso es para asignarle el mismo botón también. Entonces volvamos a los componentes y eso Vamos a seguir adelante y copiar este componente y luego seguir adelante dentro de un tutorial card paste. Y así ahora tenemos una instancia de ese botón. Entonces solo vamos a seguir adelante y sobrescribirlos con aquí de 2 a 53 píxeles también. Y adelante y pon esto encima de la otra. Y sigamos adelante y eliminemos el siguiente botón de nuestro componente aquí. Y luego antes de seguir adelante, hagámoslo a continuación aquí sólo porque la mayoría de mis componentes usarán un siguiente botón. A excepción de la última página del tutorial, sólo vamos a cambiar eso por hecho. Hagamos eso volviendo a maquetas y luego si me desplaza hacia abajo hasta la última página. Puedo anular este texto de botones haciendo clic en él y luego escribiendo hecho. Entonces ahora ya ves, tenemos exactamente lo que queremos. Ahora, sé que hoy hemos aprendido mucho aquí, pero todos estos son conceptos y productos muy importantes. muy, muy poderosas y útiles. Y de verdad quiero que consigas un entendimiento y realmente lo aproveches en tus propios proyectos. Creo que estamos listos para pasar a nuestra página de pagos en adelante, así que lo haremos en la siguiente lección. 13. Uso de variantes para crear grupos componentes: Muy bien, entonces antes de saltar a nuestro pago PJ, sí quiero mostrarles dos cosas rápidas que fema actualizó recientemente, pero son súper útiles. Por lo que lo primero se llama instancias de intercambio. Entonces si sigo adelante y selecciono una de las incidencias del botón de inicio de sesión que tenemos aquí, por ejemplo, del lado derecho. Ahora puedes ver que hay una nueva forma de que realmente puedes ir adelante y cambiar o cambiar la instancia que quieras. Por lo que puedo cambiarlo con una versión desactivada de la que quiero, o puedo seguir adelante y cambiarlo de nuevo a la de barrio. Y si tengo múltiples botones o múltiples componentes, puedo encontrarlos fácilmente por aquí e incluso usar una barra de búsqueda por aquí. Ahora por supuesto, esto será mucho más útil una vez que tengas múltiples variaciones de diferentes botones o múltiples botones o múltiples componentes que tal vez quieras intercambiar ancho. Porque en este momento sólo tenemos componentes acoplados. Podría no ser tan útil, pero definitivamente se volverá más útil a medida que empieces a agregar más componentes, más variaciones diferentes de los botones y así sucesivamente. La otra cosa realmente cool que quiero mostrarles que fig más recientemente anunció se llama varianza. Entonces voy a ir muy rápidamente por el artículo de espesor aquí sobre lo que hace la varianza. Y luego vamos a seguir adelante y en realidad aplicarlo a nuestros propios componentes y a nuestros propios diseños. Por lo que la varianza es una gran manera de poder crear múltiples versiones del mismo componente, como el ejemplo aquí que tienen en la imagen. En realidad puedes ir de cabeza y crear diferentes versiones de los botones y poder realmente cambiarlos o personalizarlos en tus instancias de forma muy rápida y rápida. Y les mostraré un ejemplo de eso en tan solo un segundo. Y así como puedes ver aquí en esta imagen, han creado múltiples versiones de los mismos botones. Algunos de ellos con ICANN, Algunos de ellos sin. Tienen versiones secundarias con diferentes colores, diferentes tamaños como o han utilizado todas estas propiedades diferentes, que también puedes ver en el lado derecho del panel por aquí, para poder crear diferentes versiones de sus botones. Pero esto tendrá mucho más sentido una vez que realmente lo aplicemos a nuestro propio proyecto. Entonces, ¿por qué no cambiamos a FISMA y vamos a nuestra pestaña de componentes por aquí. De acuerdo, así que de vuelta aquí en nuestra pestaña Componentes por aquí con la página, vemos dos versiones diferentes de los botones que creamos. Uno de ellos llamó botón y tal habilitado y luego el otro, botón slash deshabilitado. Y eso es para poder identificar fácilmente qué estado del botón queremos. Por lo que ya un poco usamos la misma idea que el grupo variante proporciona. Pero la única diferencia o el beneficio aquí de usar la varianza es que es mucho más fácil de usar en el lado de la instancia. Y también si tienes desarrolladores trabajando contigo o usando tus diseños, ahí podrás utilizar mejor esto. Y así te mostraré eso en un segundo. Entonces para crear una variante, primero necesitas componentes, que ya tenemos por aquí. Entonces sigamos adelante y seleccionemos ambos están aquí. Y ahora verás esta nueva opción llamada combinadores variantes en el costado por aquí. Entonces vamos a seguir adelante y dar click en esto. Y todos notamos que aquí atrás está en lo sumo complacido nuestros dos componentes de botón que teníamos dentro de esta variante de botón. Y se puede ver el nombre por aquí porque estábamos usando esa convención de nomenclatura, FISMA fue lo suficientemente inteligente como para ir de cabeza y convertir esos en propiedades de ese botón. Por lo que tenemos propiedad uno. Entonces debido a que no hay nombre adscrito a esa propiedad, fama se acaba de usar un nombre genérico, propiedad uno por aquí. Y luego seguir adelante y usar la versión desactivada y habilitada. Entonces si hago clic en este, verás que la propiedad uno está configurada en habilitada. Y para esta propiedad una está configurada para desactivar. Lo primero que quiero hacer aquí es seleccionar aquí todo el grupo de variantes. Y vamos a seguir adelante y basta con hacer click en la propiedad uno para seguir adelante y cambiar el nombre a tal vez estado. Entonces esto es sólo algo que tiene más sentido. Ahora tenemos una propiedad llamada estado, que puede ser desactivada o habilitada. Ahora por supuesto, podemos seguir adelante y realmente crear más estados si quieres. Entonces para hacer eso, podemos seguir adelante y hacer más opciones y luego seguir adelante y agregar una nueva variante. Entonces esto va a seguir adelante y crear otra variante y seguir adelante y usar el estado tres, pero podemos seguir adelante y nombrarlo lo que queremos. Entonces en nuestro caso, ¿por qué no vamos adelante y hacemos prensado. Y hasta podemos seguir adelante y moverlo aquí arriba si quieres, y mover éste hacia abajo. Por lo que ahora tenemos un estado habilitado, estado oprimido y un botón de estado deshabilitado. Y queremos seguir adelante y realmente crear algo diferente por aquí para nuestro prestigio. Y entonces, ¿por qué no vamos adelante y bajamos al color de selección aquí, desprendemos el estilo, y quizá vayamos con un botón que sea un poco más oscuro. Esto es solo para que cuando el usuario toca ese botón, se convierta en este estado de prensa. Entonces ahora digamos que queremos otra propiedad y en realidad vamos a seguir adelante y crear una pequeña versión de nuestro botón. Entonces sigamos adelante y pinchemos en el botón, variando grupo por aquí otra vez. Vaya a más opciones, y adelante y haga clic en agregar nueva propiedad como un estado justo debajo. Ahora tenemos una propiedad nueva. Nos pedirá que le demos nombre. Entonces en nuestro caso, vamos a seguir adelante y hacer talla. Y el valor predeterminado para un nuevo muro de propiedades es el predeterminado. Entonces vamos a seguir adelante y en realidad cambiaremos eso a pequeño y grande en tan solo un segundo. Y hacer eso la forma más fácil es seguir adelante y simplemente seleccionar estos tres botones mientras mantiene pulsada la tecla Mayús. Y vamos a seguir adelante y encontrar la propiedad de tamaño por aquí. Adelante y da click en este pequeño error aquí, y ve Añadir Nuevo. Y yo, sigamos adelante y renombremos el nombre de este nuevo valor demasiado grande. Ahora si queremos crear una versión pequeña de todos estos botones, sigamos adelante y solo usamos Command D para duplicar estos botones. Y vamos a seguir adelante y sólo arrastrar el tamaño o el ancho por aquí a, vamos a hacer 150. Eso es perfecto. Y así ahora has adivinado que vamos por aquí a la talla. Adelante, haga clic en la flecha y no agregue valor nuevo y creativo de pequeño. Por lo que ahora como puedes ver, tenemos seis tipos diferentes de botones. Contamos con un botón grande que tiene un estado habilitado, un botón grande que tiene un estado presionado, y un botón grande que tiene un estado deshabilitado. Y de igual manera tenemos un pequeño botón que tiene un estado habilitado. En desactivado botón pequeño y oprima botón pequeño. Entonces ahora probablemente te estés preguntando, ¿cómo es útil esto? Bueno, para demostrar cómo las palabras, volvamos a cambiar a nuestra página de maquetas, donde podemos ir adelante aquí a nuestra página de inicio de sesión o no está de vuelta aquí. A ver. Quiero seguir adelante y cambiar esta instancia de botón por aquí a un pequeño botón pulsado para poder seguir adelante y seleccionarlo. Y ahora en el lado derecho del panel por aquí ven tenemos nuestra variante de botón por aquí. Y ahora tenemos diferentes propiedades que podemos cambiar. Podemos cambiar el estado a, digamos presionado. Podemos seguir adelante y cambiar el tamaño a, digamos, uno pequeño. Y así fema cambia automáticamente eso al tipo de botón que queremos. Digamos que cambias de opinión y quieres eso. Pero en ser grande. Y mostrar la próstata. Ahí lo tienes. Solo tienes que cambiar una propiedad y tienes el botón que quieras. Y puedes hacer mucho más con variantes, como agregar iconos a tus botones y usar eso como estado. Entonces por ejemplo, tienen Icon, false y true aquí, espero que ahora puedas ver cómo los rodamientos realmente nos pueden ayudar a crear diferentes versiones de tus componentes y lo útil que puede ser. Solo para mostrarte algunos últimos consejos rápidos sobre variantes, realidad puedes seguir adelante y hacer clic en la variante por aquí y cambiar el tamaño de la ventana como quieras. E incluso puedes seguir adelante y mover tus botones o tus componentes a diferentes lugares. Y así de esta manera, podría ser más fácil para ti o tu equipo. Así que siéntete libre de organizar tus variantes de una manera que tenga sentido para ti y tal vez para tu equipo de diseño o desarrollo. Te sugerí darte un ejercicio y familiarizarte con la varianza. Quiero que realmente sigas adelante y crees una versión de estas variantes con una imagen también. Y luego seguir adelante y alinear el texto o el texto de botón que tenemos al lado izquierdo del botón para seguir adelante y hacer eso para ambos son variación grande y pequeña de los botones. Y luego vamos a seguir adelante y hacer eso juntos en la siguiente lección. 14. Solución del ejercicio de variantes: Entonces sigamos adelante y creemos una variación de estos botones con imágenes de íconos dentro de ellos también. Entonces primero voy a seguir adelante y abrir mi carpeta de iconos por aquí desde los recursos para este marcado. Yo sólo voy a Como ejemplo, adelante y abre los iconos y entra en login. Y así como prueba, vamos a seguir adelante y arrastrar esto en el punto de envolvente SVG por aquí en R sigma. Adelante y por este lado. De este lado por aquí, las proporciones constreñidas y redimensionarlo a 25 píxeles. Y sigamos adelante y solo arrastremos ese marco por aquí y solo tengámoslo por ahí para nosotros. Ahora sigamos adelante y primer paso, seleccionamos todo lo que tenemos por aquí. Porque lo que queremos hacer es seguir adelante y agregar una versión de nuestra varianza que incluya todos estos diferentes tamaños de estados. Y luego ahora, y ahora también agrega una variación que tiene un icono. Entonces lo primero que queremos hacer es seguir adelante y hacer click en los botones. Variación aquí va a un lado, y vamos a seguir adelante y agregar y nueva propiedad. Vamos a seguir adelante y nombrar esto con ícono así. Por lo que sigma también nos permite usar valores binarios dentro de propiedades privadas aquí también. Entonces para esto aquí, podemos tener dos valores. Uno con icono, por lo que un valor verdadero Y luego uno falso sin icono. Entonces para hacer eso, sigamos adelante y cambiemos este defecto usado haciendo doble clic aquí a verdadero. Entonces ahora tenemos un icono de ancho valor verdadero por aquí. Entonces lo que queremos hacer ahora es seguir adelante y seleccionar todos estos botones por aquí otra vez, y luego seguir adelante y duplicar es manteniendo presionado Alt. Asegúrate de que mientras lo estás duplicando, no salgas de la línea punteada púrpura porque entonces ya no sería un muy int. Está bien, así que solo voy a seguir adelante y en realidad redimensionar mi página de variante por aquí sólo para que se vea un poco mejor y más organizado. Y entonces lo que queremos hacer es que quieras usar estos seis botones y agregarle un icono y luego seguir adelante y mover el texto a la izquierda. Entonces aquí sólo vamos a seguir adelante y seleccionar nuestro texto aquí. Ahora recuerda hacer esto más rápido, siempre puedes mantener el mando y desplazarte juntos. Por lo que puedes seleccionar múltiples capas dentro de otros componentes u otros grupos para que las cosas sean mucho más rápidas para nosotros. Después sigue adelante y usa el texto alinear a la izquierda. Simple como eso. Y ahora sigamos adelante y traigamos nuestro sobre aquí. Y luego sigamos adelante y cambiemos el color de selección por aquí a blanco. Ahora solo voy a seguir adelante y duplicar esto o mantener Alt y simplemente arrastrarlo a cada componente. Y adelante y tráelo a nuestros pequeños iconos por aquí. Al tiempo que se asegura de que todo esté alineado. Ahí vamos. Está bien, impresionante. Entonces ahora lo que queremos hacer es seguir adelante y seleccionar los seis inferiores por aquí que tengan iconos y asegurarnos de que eso esté establecido en verdad cuál es. Y luego vamos a seguir adelante y seleccionar los que no tienen iconos aquí arriba, el icono de 64 ancho en lugar de verdadero, sigamos adelante y agreguemos nuevos y hagamos falsos. Entonces ahora de vuelta aquí, podemos seguir adelante y realmente cambiar el estado deshabilitado, presionado o habilitado. Tenemos el tamaño que podemos cambiar a pequeño, grande. Y ahora para todos ellos, también tenemos una opción llamada icono ancho. Entonces podemos seguir adelante y agregarlo con ICANN y la parte hermosa al respecto usando unos valores verdaderos y falsos en las propiedades de la varianza es que obtienes este bonito interruptor de alternancia por aquí que solo hace las cosas un poco más ordenado. Por lo que ahora puedo tener totalmente una opción con icono. Adelante y elige un icono pequeño o un botón pequeño, y luego usa un estado prensado si quiero. Ahora bien, mientras los swish, me di cuenta de que aquí tengo un poco de un problema de alineación. Así que asegúrate de mantener siempre tus iconos y tus botones alineados para que no se vean raras variaciones entre medias. Entonces sí, Esa es variación para ti. Definitivamente úsalo en tus proyectos. Ahora para el resto de este curso, voy a estar usando componentes sin varianza, pero definitivamente siéntete libre de intentar usar variantes como vamos donde puedas. 15. La página de pagos: todo bien. Creo que estamos listos para saltar a nuestra tercera página aquí, la página de pagos. Pero antes de hacer eso, echemos otro vistazo rápido a nuestro boceto aquí. Por lo que esta es la página de pago. Es bastante sencillo. Simplemente tiene un título aquí, Um, Y luego tenemos la tarjeta de crédito donde el usuario puede ingresar su número de tarjeta de crédito y toda la otra información aquí en, y luego pueden agregar la tarjeta desde aquí y luego ir a la siguiente página. Um, se ve bastante sencillo. No sé ustedes, pero a veces cuando estoy tratando de diseñar un nuevo proyecto o una nueva página, es un poco difícil saber exactamente qué queremos poner ahí o incluso obtener alguna inspiración para un proyecto y nuestros propios diseños. Por supuesto, podemos usar AP similares que estaban diseñando y jugando con esos APS, pero eso podría ser realmente tedioso. ¿ Que así? Por eso te voy a mostrar este sitio web genial aquí llamado patrones. Comienza de cabeza sobre a P doble T R N s dot com para acceder a ella, y es super cool. Esencialmente, es solo, um, um, algo así como Pinterest pero para el diseño de aplicaciones. Por lo que te muestra muchas inspiraciones interesantes que puedes tomar de tipo de algunos de los grifos calientes en el mercado. Incluso tienen categorías. Aquí tienes para basado en la página que estás diseñando. Puedes entrar aquí y obtener inspiración. Vamos a seguir adelante y seleccionar este grifo de compra aquí para ver algo de inspiración de diferentes APS y diferentes empresas. Um, por ejemplo, aquí está la página de pago de Uber. Ya tenemos un diseño en mente en cuanto a mi propio boceto aquí, pero sigamos adelante y veamos qué necesitamos. Por lo que necesitamos un número de tarjeta. Necesitamos una fecha de caducidad, país cvv y código postal. Entonces creo que generalmente se requieren estos 1er 3 campos y los otros son tipo de opcionales. Pero claro, si el cliente quiere que empecemos, definitivamente pongamos aquellos en nuestro diseño también en el futuro. Pero por ahora, centrémonos en sólo poner estos tres campos requeridos. Entonces volvamos aquí a mi página de pagos aquí y fig MMA. Voy a usar esa tecla de texto Ah, y seguir adelante y simplemente crear unas notas aquí. Por lo que los pagos requisitos. Vamos a seguir adelante y usar la izquierda de la línea y sólo mover eso aquí. Por lo que necesitamos el número de tarjeta de crédito aquí. Necesitamos el cvv y luego fecha de caducidad. Hay una buena manera de hacer notas y recordar agregar cosas a tu página aquí. Entonces sigamos adelante y seleccionemos nuestro marco aquí y luego primero queremos a Texan aquí, Así que hagamos texto y luego hagamos al pago. Sigamos adelante y seleccionemos el tamaño de fuente de 26 y luego solo sigamos adelante y movemos eso aquí arriba. ¿ Quieres hacer 50? Creo que eso se ve bien por ahora. Vamos a usar Vamos a acercar aquí y crear un rectángulo para una tarjeta de crédito, y creo que eso está bien aquí. Yo quiero mantener el espaciado de 40 por cada lado. O hagamos realmente 43. Gasta eso aquí también. A lo mejor 1 85 Vamos adelante y pongamos un bonito Grady en Phil para que nos lineemos para el fondo aquí, y voy a seguir adelante y sacar esto un poco aquí. En primer lugar, elijamos colores locales, así que esos son los colores que estaban usando en nuestro proyecto aquí. Um, hagamos este para la parte superior y luego lo mismo para la parte inferior. Pero lo haremos un poco más oscuro. A lo mejor, y luego lo haremos tendrá su inicio de año en año. A lo mejor aquí. Adelante y cerremos eso aquí arriba. Y sigamos adelante y alrededor de las fronteras a tal vez 18 aquí. Eso se ve bien cuando vamos adelante y acaba de enviarle este texto aquí. Se ve bien. Crea otro texto. Vamos a seguir adelante y hacer uno a través de 345 Espacio 5678 Espacio 901 al Espacio 3456 Solo estoy repitiendo algunos números aquí. Voy a agregar algunos espacios dobles aquí en lugar de solo un espacio, solo en algún espaciado entre estos cada cuatro dígitos. Vamos a seguir adelante y seleccionar todo el campo de texto y cambiar el relleno a blanco. Y entonces vamos a moverlo por aquí. Sigamos adelante y lo pongamos en negrita y cambiemos el tamaño de fuente a 16. Do. Sería bueno un espaciado de 30. Probemos 18 para el tamaño de fuente. Eso es aún mejor. Subirlo un poco. Vamos en realidad a ir por aquí a espaciado de letras y agregar alertados. Espaciado apagado. Hagamos 2%. Eso se ve bien, pero igual que un poco de espaciado entre cada uno de mis dígitos. Aquí, voy a usar el comando D para duplicar eso aquí y luego ¿qué queremos después? Queremos la fecha de caducidad. Entonces hagámoslo mes, mes, año, año, justo como un positor aquí que mueva eso aquí abajo. Y entonces vamos a seguir adelante y duplicar. Está aquí y hacer cvv. Vamos a moverlo todo el camino a la derecha. Creo que eso está empezando a juntarse, sólo va a moverlo un poco. Mueve un poco estos hacia arriba. Creo que eso se ve bien. He estado sintiendo que el azul se vería mejor para los grandes de aquí. Entonces, ¿qué vamos adelante y realmente cambiamos nuestros colores? Del naranja al azul? Recuerdo que siempre puedes hacer esto con tu diseño. Um, realmente no hay bien ni mal aquí. Es sólo que realmente es cuestión de lo que te queda mejor para seguir adelante y experimentar con diferentes opciones. No tienes que apegarte a los con los que estamos trabajando aquí. Si quieres usar otro tipo de página por todos los medios, adelante y hazlo ahora. Sigamos adelante y solo seleccionemos todo aquí y usemos el comando G para agruparlos. Cambie el nombre de esto a tarjeta de crédito y sigamos adelante al panel de efectos aquí y agreguemos efectos. Añadir en efecto de drop shadow on para este quiero hacer tal vez un por qué cinco. Debo hacer. voló. 10. Prueba 12. Haciendo hasta una ciudad del 20% que no es demasiado visible. Adelante y agreguemos otra sombra también. Hagamos un desenfoque de 20 año en una Y de ocho. Después cambia la vieja ciudad paga a tal vez 15% o en realidad 5%. Aquí. Probemos 8%. Creo que eso se ve bien. Entonces solo te estamos extrañando. Pero aquí, Así que como recuerdas, creamos nuestros botones como componente. Pero lo colocamos en otra página aquí en la página de componentes. En realidad no tienes que ir allí para acceder a ella. Si vas a la parte superior de activos por aquí, verás todos tus componentes aquí, y yo tengo mis botones. Tiene baja tanto la versión desactivada como la habilitada, um, así que quiero que acabo de usar la habilitada aquí por ahora, y simplemente se pone bellamente en su lugar aquí para asegurarse de que es una línea en el centro. Adelante y también asegurémonos de que todo lo demás esté alineado en este pozo centrista y se le parezca. ISS. Cambiemos esto, pero en texto para agregar tarjeta. Y vamos a cambiar esto a pago aquí para que sea un poco más sencillo. Y entonces, por supuesto, vamos a seguir adelante y centrarlo. Creo que eso se ve bastante bien. Entonces ahí lo tenemos. Esa es nuestra página de pago. Definitivamente podemos volver, líder y luego pulir las cosas aquí arriba. Um, una vez que terminemos con todo lo demás. 16. Restricciones: Está bien. Entonces en la última lección, armamos nuestra página de pago, y ahora en esta lección, vamos a aprender qué son las restricciones. Entonces, esencialmente, hasta ahora, hemos estado haciendo nuestros diseños aquí, asumiendo que siempre se ejecutarán en un iPhone 11 tamaño en. Hemos estado usando sólo una talla para nuestros marcos aquí. Es decir, hemos estado colocando aquí nuestras capas y objetos, asumiendo que solo se ejecutará en una pantalla de iPhone 11. Entonces digamos que el cliente en algún momento decide diseñar o ver sus diseños en un iPhone 11 pro Max aquí. Um, y como puedes ver, no pasará mucho. El marco simplemente se expandirá, pero nuestros diseños se mantendrán del mismo tamaño y otra vez. Eso se debe a que lo hemos estado diseñando en relación solo a un iPhone 11 tamaño pro aquí. Pero ahí es donde vienen las restricciones. Las restricciones nos permiten hacer que sus diseños respondan para que funcionen sin importar en qué marco o en qué entorno hay con el fin de sumar restricciones aquí. Primero, sigamos adelante y solo deshacemos eso. Entonces tenemos nuestro tamaño original aquí, um, y nos vamos a centrar en nuestro pasador y página primero Así que sólo voy a acercar Ah, usando Zet y la escuela aquí. Así que sigamos adelante y solo centrémonos en agregar restricciones a esta página en. Y entonces vamos a seguir adelante y añadimos en todas partes también. Pero primero entendamos cuáles son las restricciones. Entonces, con cualquier objeto seleccionado, puedes acceder a restricciones yendo al panel de propiedades aquí en, luego encontrando restricciones. Se puede ver ahora mismo por defecto tengo una restricción fuera de la parte superior e izquierda, y se puede ver que está arriba a la izquierda porque estos dos marcadores aquí en la restricción son azules y los otros son simplemente negros. Por lo que este campo aquí se está limitando a la izquierda y a la parte superior, que es por defecto lo que sucede con cada objeto. Pero de hecho, lo que queremos hacer es ir adelante y limitarlo a la izquierda y a la derecha aquí, que si el marco se hace más grande o más pequeño, el campo reaccionará a eso. Entonces ahora mismo, si hago mi marco más pequeño, uh, el campo no reaccionará a eso. Entonces para que reaccione y tamaño adecuado, dependiendo del tamaño de pantalla aquí, sigamos adelante y la seleccionemos y luego vayamos por aquí. Quitemos la restricción superior. Entonces vamos a eliminar la restricción superior yendo aquí y simplemente haciendo centro, porque queremos mantener este elemento en el centro de nuestra página y no necesariamente limitado por la parte superior. Y entonces vamos a seguir adelante y también a la izquierda y a la derecha aquí. Entonces no para ver realmente esa inacción. Voy a redimensionar mi marco, haciéndolo más pequeño. Ahora notarás que mi campo está realmente re dimensionando aquí, excepto que hay algo raro pasando con este ícono por aquí. Así que sigamos adelante y agreguemos alguna restricción a este ícono también. Ah, los propios elementos de un grupo tienen ciertas limitaciones que también se pueden cambiar . Entonces si hago doble clic aquí para seleccionar mi icono en y notarás que tiene una restricción de izquierda y derecha. Pero para el ícono mismo, sólo queremos hacer una izquierda constreñida porque sólo queremos limitarla al lado izquierdo de este campo y no al derecho. Entonces ahora si cambio el tamaño de mi marco, ves que funciona como debería, así que vamos a hacer adelante y aplicar esas restricciones a algunos de los elementos de esta página , y vamos a seguir adelante y luego aplicarlo a otras páginas también. Nuevamente, trabajemos nuestro camino de arriba a abajo. Entonces hagamos este botón aquí. Queremos hacer aquí una restricción superior y una de derecha porque queremos eso, pero que se constreñan al lado derecho y no a la izquierda. Nuestro logotipo aquí solo debería permanecer en el centro, y probablemente hagamos realmente este centro también. Vamos al grupo de contraseñas y hagámoslo a menudo derechos y centro. Y entonces otra vez, salta aquí y haz ese cambio para que solo quede para nuestro ícono aquí. Olvidé la contraseña debe estar limitada a los derechos y centro. El botón de inicio de sesión debe tener una restricción de izquierda y derecha y otra vez centro en términos de la restricción vertical. Vamos a seguir adelante y simplemente multi select mediante el uso de turno. Um, todos estos componentes aquí sostienen estos objetos aquí porque van a tener las mismas restricciones que iban a hacer, izquierda y derecha, y entonces vamos a hacer centro. Excepto por estos términos. Aquí, queremos seguir adelante y hacer clic en este y hacer una restricción inferior porque queríamos realmente pegarnos al fondo. Creo que nos olvidamos de una cosa. Abramos aquí nuestro panel de capas. Si recuerdas, bloqueamos nuestra capa de fondo. Eso No podemos editarlo hasta que entramos en nuestras capas y luego lo desbloqueamos. Y para mis antecedentes aquí, asegúrate de tenerlo seleccionado. Queremos hacerlo restricción de izquierda y derecha y superior e inferior. Entonces de esta manera está llenando el tamaño del agujero de la pantalla. Entonces lo voy a volver a bloquear, mano adelante y se derrumbó mi marco. Entonces ahora si el cliente, digamos, decide ir con el iPhone 11 pro Max por sus diseños aquí, pueden hacerlo. Y boom. Como puedes ver, el marco es completamente receptivo, y se redimensionó para ese tamaño de iPhone. Y luego, si sigo adelante y cambio el marco, digamos dos en el iPad. Mini par y ver que sí funciona, aunque probablemente querrías hacer algunos retoques. Así que simplemente re dimensionando estos campos y botones porque eso es demasiado grande para una aplicación de IPAD. Pero aquí solo estamos diseñando para Mobil. Entonces sigamos adelante y solo golpeamos el comando Z encendido. Entonces sigue adelante y selecciona el marco y asegúrate de elegir el iPhone 11 pro aquí. He ganado 11 pro aquí, y sólo voy a seguir adelante y volver a poner esto aquí. Eso se ve bien. Enfriar. Entonces, como ejercicio, quiero que sigan adelante y apliquen esas restricciones a las otras páginas que tenemos aquí. Así que adelante, y como experimento, aplica esas restricciones a las páginas de tutoriales así como a tu página de pago en, y luego en la siguiente lección, lo haremos juntos también. 17. Solución del ejercicio de restricciones: derecho. Por lo que si has estado siguiendo hasta ahora, agregamos algunas restricciones a nuestra página de inicio de sesión. Aquí s así ahora, no importa qué tamaño tenga el marco aquí, si lo cambio alrededor, va a seguir adelante y constreñir todos los elementos dentro a los lados y la parte superior e inferior, por lo que eso nos ayudará a crear algunos diseño realmente receptivo. Y luego te di un ejercicio para seguir adelante y hacer eso por las otras páginas aquí. Entonces vamos a hacer eso juntos aquí también. En primer lugar, quiero empezar con mis pasos de tutorial. Um, pero en realidad voy a seguir adelante y reemplazar a ese grupo que insertamos en segundo plano aquí. Ah, y en realidad usa una imagen en su lugar porque eso es mucho más fácil de controlar con restricciones para el propósito de que la estamos usando aquí en nuestros simulacros. Entonces sigamos adelante y seleccionemos la página de inicio de sesión aquí y luego vayamos hasta abajo para exportar . Sigamos adelante y agreguemos una exportación aquí y solo usamos PNG para tu tipo de archivo y luego sigamos adelante y exportamos inicio de sesión. Te preguntará dónde quieres guardarlo, así que solo lo voy a guardar en mis descargas. Entonces una vez que haya hecho eso, van a seguir adelante y simplemente arrastrarlo desde mi carpeta de descargas justo a esta página de tutoriales. Entonces adelante y simplemente centrarlo a lo largo. Y luego sigamos adelante y sumamos una restricción de izquierda y derecha y superior e inferior. De esta forma, mantendrá esta imagen unida a todos los bordes sin importar cómo la redimensionemos, por supuesto, queremos seguir adelante y simplemente mover esto todo el camino hasta la parte inferior donde tenemos nuestro rectángulo justo debajo de él. Y entonces ya no necesitamos este grupo uno aquí. Por lo que se borra. Y una vez que hagas eso, uh, voy a seguir adelante y aplicar la misma restricción al rectángulo Ah, que estamos usando para nuestro efecto aquí, Correcto, El desenfoque. Entonces sigamos adelante y solo aplicamos la restricción de arriba a izquierda y derecha y también de arriba e abajo. Y entonces podemos seguir adelante y sólo agrupar a estos dos juntos y seguir adelante y simplemente cerrarlo. Simplemente haz las cosas más fáciles. Entonces ahora si cambio el tamaño de esta página Pero este marco por aquí, verás que va a seguir adelante y mantener la imagen para el fondo y el lugar adecuado. Ah, pero la tarjeta tutorial aquí no está constreñida adecuadamente. Entonces es como la instancia de la tarjeta tutorial aquí y luego en una restricción fuera del centro. Entonces ahora si hago lo mismo aquí voy a seguir adelante y mantener el tamaño del año. Simplemente voy a seleccionar el iPhone 11 pro otra vez. Entonces ahora eso funciona. Quiero hacer rápidamente aplicar las mismas restricciones aquí a las otras dos páginas tutoriales. Entonces sigamos adelante y seleccionemos a este grupo. Copiarlo. Estoy aquí a mi tutorial para pegar eso, traerlo aquí abajo para liderar a los otros dos. El bello de ello es que cuando se copia algo, las restricciones también se copiarán con él. Entonces no necesitamos rehacer esa parte. Volvamos a copiar. Tutorial tres. Haz lo mismo. Muévete aquí abajo, borra los otros dos, y entonces todo lo que tenemos que hacer es volver a pasar por la instancia aquí, elige centro. Entonces, al usar centro solo mantendremos el tamaño de esta tarjeta para que no la cambiemos de tamaño. En función del tamaño del dispositivo, solo lo centraremos De acuerdo a la pantalla con la que estamos trabajando aquí. Lo mismo aquí. Por lo que ahora estas páginas están todas hechas. Y por último pero no menos importante, pasemos a nuestra página de pagos aquí. Um, así que eso va a ser súper sencillo para este. Vamos adelante y hagamos centro y top para la tarjeta aquí. No queremos que se redimensione. Por lo que te permite centrar y centrar para esto también, similar a nuestra tarjeta tutorial y luego por el botón aquí queremos hacer. Hagamos izquierda y derecha y centro. Ahora, si cambio el tamaño de este marco a, digamos, un iPhone 11 pro Max aquí, creo que se ve bien. Por lo que ahí lo tienes. Ésas son nuestras limitaciones. Y ahora lo hemos probado a todas las páginas que hemos diseñado hasta ahora. Ahora, para mantener este curso conciso y al grano, no estaré agregando ninguna restricción a cada página individual. Pero al final, voy a incluir un archivo que se puede descargar para el simulacro final arriba. Usted, ojalá incluya todas las restricciones aplicadas. Entonces como ejercicio, definitivamente puedes aplicar restricciones a lo largo de toda la u I y luego volver a ese archivo al final solo para asegurarte de que lo has hecho correctamente. 18. Uso de Plugins: Muy bien, Así que si has estado siguiendo hasta ahora Ah, hemos diseñado algunas de las páginas iniciales aquí, y hemos aprendido un montón de cosas diferentes, desde componentes hasta restricciones. Ah, y ahora creo que estamos listos para saltar a nuestra página de mapa aquí si echamos un vistazo a nuestro boceto aquí. Ah, vemos que tenemos un pequeño mapa con un botón de guardar aquí abajo y tal vez pero dentro para decirnos dónde estamos y una barra de búsqueda en la parte superior. Bastante sencillo. Pero no sé de ti. No estoy 100% seguro de cómo vamos a meter un mapa en nuestro diseño. Y por eso vamos a hablar de enchufes en esta lección. enchufes y la figura están esencialmente ahí para ayudarte a automatizar tu diseño y ayudarte a llevar tus diseños al siguiente nivel y hacer que los diseños sucedan aún más rápido. Por lo que para acceder a enchufes. Si estás en la web arriba, puedes ir a la opción de menú aquí y luego ir a enchufes. Desde aquí, verás la lista de enchufes instalados. Ya que no tenemos ningún enchufe de instalación, verás aquí Solo dice administrar, enchufes. Por lo que vamos a seguir adelante y hacer clic en administrar enchufes. Por lo que desde aquí verá un montón de plugins de funciones como lo que eran los populares que se hacen por la comunidad. Y realmente puedes usar estos a tu favor cuando estás diseñando tus proyectos. Por supuesto, estos aire no todos los enchufes aquí. Puedes seguir adelante y navegar por todos ellos simplemente bajando aquí donde dice, navega enchufes. Entonces como pueden ver, tenemos toneladas de enchufes o vamos todo el camino hacia arriba. Veo virgen. Ash lo tiene enchufe. Si recuerdas, hace un par de lecciones se agregarán imagen de fondo en nuestro inicio de sesión Página en Splash realmente tiene un enchufe en fig MMA. Entonces en lugar de ir al sitio web de ceniza virgen, encontrar imágenes, guardarlas y arrastrarlas a tu fig, mis archivos, um, el tapón de salpicaduras solo te ayudará a hacer lo mismo. Pero sólo en un paso, um, hay gráficos que puedes crear usando este enchufe ahí dentro algunos iconos más. Ahí está Avatar, así que si estás haciendo un apt con avatares, puedes seguir adelante y usar este enchufe en este realmente genial. Aquí se llama Google Sheets Sink. Hay una muy buena posibilidad de que lo exploremos en una sección futura. Ah, lo que hace es que, como el nombre podría sugerir es que hundirá tu diseñado con una hoja de Google. Entonces digamos que tienes un diseño con una lista de texto diferente. En realidad se puede hundir eso con sábanas frescas. Y así, medida que cambies tus hojas de Google, ese texto cambiará dentro de tus diseños. ¿ Qué tan guay es eso? El listado sigue y sigue y sigue. Me encantaría escuchar algunos de los enchufes útiles que has encontrado, y solo hay mucho por explorar. Entonces si sí quieres enviarme una sugerencia de un tapón que estás usando, um, um, definitivamente adelante y compártelo con nosotros en una sección Q y A, o simplemente envíenmelo por correo electrónico. Me puedes enviar un correo electrónico a hola inteligente a gmail dot com. Entonces dejaré eso aquí en la pantalla para que puedas seguir adelante y enviarme un correo electrónico algunos enchufes cool que te encuentres así que en la parte superior aquí, también puedes buscar un plug ins específico para buscar mapa, y luego vamos a usar este 2do 1 aquí y adelante e instalarlo. Entonces esto es solo una pequeña nota para decirnos que el enchufe ha sido diseñado por desarrollador de terceros y no fig mis mismos. Así que adelante y acaba de instalar un enchufe. Y ahí vamos. Enchufe, instalado. Ya veo que está instalado por aquí. Puedo desinstalarlo si no quiero usarlo más. Si quieres saber más sobre lo que hace este plug in y cómo usarlo, puedes seguir adelante y simplemente pinchar aquí, así que ahí es donde vamos a hacer. Y como puedes ver, nos ayuda a hacer un mapa personalizado ardiente rápido. Enfriar. Sólo voy a desplazarse por aquí. Puedes aplicar Google maps o mi caja, así que eso es bastante genial. Y nos está diciendo cómo usarlo. Seleccione cualquier capa, incluyendo rectángulo, labios o incluso polígono y ejecute. Mi pinker suena bastante sencillo, así que vuelve a nuestro diseño aquí. Adelante y, como dice, como dice, crear un rectángulo y quiero que este rectángulo se apodere de todo el marco aquí que se ve bien. No, sigamos adelante y vayamos a esta opción aquí y tenlo en cuenta en la aplicación de escritorio. Se puede acceder a eso desde enchufes también. Pero si estás en la aplicación Web, puedes ir aquí y hacer enchufes. Ahora deberías ver al creador de mapas aquí. Adelante y haz click en él. Podría tardar algún tiempo en cargarse. Una vez que sí carga, te daría Son algunas opciones aquí para que puedas ingresar una dirección personalizada. Puedes cambiar el tipo de mapa que quieras, ya sea una hoja de ruta, híbrido satelital, etcétera. Um, nivel de zoom. Entonces creo que todo lo que voy a hacer es solo tal vez acercar un poco mawr a este mapa. Um, y luego hagamos mapa y ahí lo tienes. Tenemos un mapa justo dentro de nuestros diseños. Bastante cool 19. Terminar la página del mapa: ahora Lester está completo. El resto del diseño para nuestro mapa aquí va a cambiar a mi boceto aquí. Por lo que para la Página de Mapa, queremos una pequeña barra de búsqueda aquí con un pequeño icono de búsqueda así como texto y luego un botón de guardar , así como un ícono de ubicación actual. Por lo que necesitamos iconos aquí y luego una barra de búsqueda y luego en los componentes de botón. Así que sigamos adelante y pasemos a nuestro diseño y empecemos desde arriba. Usemos la herramienta de rectángulo. Dibuja un rectángulo por aquí y sigamos siendo consistentes y mantengamos 25 píxeles de espacio de izquierda y derecha. Entonces por supuesto que necesito cambiar el tamaño de eso un poco un poco más en. Adelante y cambiemos el relleno a blanco. Ahora todavía está apenas visible, entonces ¿por qué no vamos adelante y le agregamos un trazo gris claro? Creo que algo como esto funcionaría, y luego sigamos adelante y establecemos un grosor de 1.5 píxeles. Vamos a seguir adelante y redondearlo a seis píxeles. Hagamos en realidad ocho. Ah, y vamos a seguir adelante y también añadir un efecto de ah drop shadow. Cambia el Y 25 aquí, cambia el soplador a 10 y baja la cuerda una ciudad a tal vez 15% para Vamos realmente a hacer 10%. Vamos a mover la Y a dos, tal vez o tres. Creo que eso está empezando a juntarse. Sólo cambiemos por Tore Design. Aquí tenemos poco icono de búsqueda, por lo que es insertar texto aquí para Buscar. 16 es bueno para el tamaño de fuente. Basta con seguir adelante y cambiar el camino a lo regular. Simplemente voy adelante y agrego algo de espacio para nuestro ícono que vamos a agregar. Entremos y añadamos otra sombra de gota esta vez. Adelante y haz el X cero y el Y también el cero. Adelante y que el soplador 30 sean en realidad 25 en GOP City. A las cinco. Voy a hacer queso droga a una ciudad de la otra 1 a 20% o en realidad 15 así que no es demasiado duro. Creo que eso empieza a verse mejor aquí. Ahora sigamos adelante. Volver a nuestro recurso es para el proyecto. Una vez que tengas ese abierto, repasa dos iconos mapa y luego verás que tenemos son dos iconos años. Entonces lo que simplemente vamos adelante y los arrastramos hacia adentro. Simplemente voy a usar turno viejo para redimensionarlos aquí. Simplemente muévalos por aquí. Empecemos con el icono de búsqueda aquí. Asegúrate de tener las proporciones constreñidas aquí. Después hacer 25 año, para que automáticamente cambie el ancho y la altura juntos. Acercar. Pon eso aquí mismo y luego Vamos a darle un estilo de selección del azul, a menos que también sigamos adelante y cambiemos el color de selección para esto al azul primario que tenemos . Pon esto en la parte inferior y dale una gota de sombra. Sombra nosotros a 20 en 20%. Eso es bueno. Todavía no estoy muy contento con la sombra de la barra de búsqueda aquí. Creo que es un poco demasiado fuerte, así que sigamos adelante y solo cambiemos. El 15% cambia el azul aquí a tal vez 10. Creo que eso es un poco mejor. Queremos cambiar el texto aquí para que volvamos a hacer un color claro. Ya que esto va a ser marcador de posición, siéntete libre de solo poner un nueve un nueve a nueve para el código hexadecimal aquí para obtener el mismo color. Y creo que lo último aquí es nuestro botón de guardar. Entonces cuando sigamos adelante y nos dirigimos a nuestros activos, arriba aquí y adelante y movemos un botón habilitado en la pantalla aquí, solo asegúrate de que tenga un espaciado adecuado, y solo mueve esto aquí arriba. A lo mejor también queremos mostrar al usuario dónde sus anuncios. Entonces cuando sigamos adelante y usamos una forma ovalada, acerque aquí y cree tal vez un círculo de 21 por 21 duplicados que está en el comando D aquí que hacen uno más grande de tal vez 72 por 72 año. Vamos a volver a nuestro panel de líderes y tratar de alinear estos, poner el otro encima del éste y luego simplemente alinearlos juntos en el centro para el más grande. Aquí, vamos a seguir adelante y establecer el color del texto a nuestro usando nuestro color local. Escojamos este color, y luego elijamos el nope, una ciudad de Vamos a hacer el 30% aquí a menos que se cambien los otros labios o el otro círculo a este color aquí. Creo que eso se ve bien por ahora. Podemos incluso hacer esto un poco más grande. Voy a usar a Ault y cambiarme juntos para mantener el nous centro de eso. Y creo que aquí se ve bien. Esto es demasiado grande. Vamos a redimensionarlo a 35 por 35. Asegurémonos de que la proporción constreñida esté encendido y hagamos 35 por 35 aquí. Bueno, en realidad hagamos 38 entonces adelante y alinemos eso aquí. Y creo que eso se ve bastante bien por ahora. Solo necesitamos cambiar este texto a Tenemos por aquí para salvarte, guardar ubicación o recibir vestido. Y ahí lo tenemos. Esa es nuestra página de mapa en. Ya casi estamos ahí. Sólo tenemos tres páginas medias más para ir, y así vamos a completar eso juntos en la siguiente sección del curso. 20. Consejos de diseño UX: hasta el momento, hemos estado trabajando en el usuario y para frases para esta aplicación aquí. Entonces si no estás familiarizado con el diseño de la interfaz de usuario, esto de aquí es un ejemplo de la U I o una interfaz de usuario. El interfaz es con lo que interactúa el usuario. Pero lo que es más importante, tenemos diseño de experiencia de usuario, que es esencialmente cómo se siente la gente mientras está usando el tú I. Cambiemos rápidamente para aprender un poco sobre el diseño de UX y qué es y cómo podemos aplicar a nuestro proyecto. Entonces, ¿cuál es tu experiencia de usuario X, o diseño de UX es un proceso Equipos de diseño utilizados para crear productos que proporcionen experiencias significativas y relevantes a los usuarios. En otras palabras, experiencia de usuario. El diseño es una primera forma humana de diseñar productos, ¿verdad? En lugar de solo pensar en poner ciertos elementos en una página y luego llamarte hoy, realidad pensamos en cómo la gente va a seguir con este producto ah, luego volver atrás y rediseñar y asegurarnos de que lo mejoramos en un forma donde la gente se siente bien por usarlos o incluso genial. Entonces aquí un ejemplo de una U I vs la U ex. Ah, tú. Yo es lo que la gente ve frente a ellos. El interfaz real, mientras que tú X es cómo interactúan con ella, cómo la usan, cómo se sienten mientras la están usando. Por lo que pasa mucho más contigo. Ex great You X es legible para los usuarios ya que esto significa un gran uso de fuentes y tamaños debajo aquí mismo, se puede ver un ejemplo de pobre UX Um, estas fuentes no muy accesibles ni fáciles de leer. Y en general, intenta aumentar tus tamaños de fuente y también usa fondos fáciles de leer a diferencia de algo como esto. Genial. Excusas, colores y formas que aumentan un contraste mejorado. Entonces esto es realmente importante aquí. Quieres asegurarte de tener alto contraste en tus diseños. Um, a la derecha aquí podemos ver un ejemplo de pobre tú X, donde es difícil leer el texto porque tiene bajo contraste la diferencia de color o matiz entre el primer plano aquí, que es el texto y el fondo. Pero va a ser un gris claro aquí es algo bajo, Así que para mejorar este texto, puedes o hacer que el texto sea un poco más oscuro. O si puedes bajar el fondo y hacerlo más ligero, puedes hacerlo también Para ayudar a mejorar el contraste, el espaciado es realmente importante. No se quiere abrumar al usuario con demasiada información en un solo spot. Ah, tan genial que excusas el espaciado para separar el contenido en. Y luego a la derecha aquí, se puede ver que es algo abrumador. Hay demasiada información toda exprimida en un área. Um, así que eso es porque no hay espaciado entre el texto ni los objetos ahí y en general, solo siéntete más tu diseñado con espacio en blanco. Por lo que no es abrumador a menos que dos piezas de contenido sean relevantes. Entonces esto significa que a menos que tengas cosas que estén relacionadas entre sí, intenta espaciarlas tanto como puedas solo para ayudar a mejorar la frescura de U X. Por lo que la alineación es realmente importante también. Genial. Excusas alineación para asegurar que las cosas se sientan bien dice que puedes ver aquí a mi izquierda. Aquí, uh, todo se ve bien y organizado y forrado, mientras que a la derecha, no se siente bien mirando estas formas porque están completamente desalineadas. Entonces si recuerdas a lo largo de nuestro diseño, usamos mucho un lineman herramientas como mencioné antes, porque esto es realmente importante. Y la consistencia de diseño ux es otra grande. Quieres asegurarte de mantenerte consistente con tus colores. Um, y tú eres yo con el fin de mejorar tus huevos. Entonces para nuestro proyecto, por eso se elegiría el esquema de color para que nos quedáramos dentro de una paleta de colores o esquema de colores específicos Así que no confundimos a los usuarios justo en la derecha aquí. Podemos ver que estamos introduciendo algunos nuevos colores a la derecha aquí. Entonces hay un verde a menos que tenga sentido. Entonces, por ejemplo, si quieres decir engratos, Así que si quieres dar, por ejemplo, un tipo de texto de éxito al usuario, por supuesto puedes usar verde, pero intenta no usar demasiados colores y a muchos tipos diferentes de fuentes y cosas así, y tratar de mantenerlo consistente. Um, intenta mantener tus fuentes generalmente del mismo tamaño y mantener juntos el contenido relevante, ¿ verdad? Entonces ves que Texas todo el camino en la parte inferior, donde, como debería estar más cerca del otro texto porque son relevantes, casi terminamos aquí es tan genial que X es fácil de usar, simple como que son botones alcanzables y son lo suficientemente grandes como para presionar. Y, um, no puedo recalcar esto lo suficiente porque he visto muchas aplicaciones donde ya sea los ponen los botones en lugares muy difíciles de alcanzar, sobre todo en móviles. Como se puede ver a la derecha aquí, generalmente, quiere evitar tener botones de uso frecuente en la parte superior. Um, tampoco hagas que tus botones sean demasiado pequeños, sobre todo de nuevo en el móvil, donde estás usando los dedos para atraer con el diseño. Si haces un botón que es demasiado pequeño y tal vez alguien tiene un tamaño de mano más grande que el promedio , es probable que se pierda ese botón. Por lo que definitivamente haz que tus diseños sean accesibles para todos, donde tantas personas como puedas realmente, a veces en diseño. Es muy difícil hacer que tu diseño sea completamente accesible para todos, pero definitivamente lo mejor es intentarlo y hacerlo accesible para que todos lo usen. Libera a tus propios usuarios para que haya mucho más en esto. Agregar grandes nosotros a tus diseños lleva tiempo y pruebas para hacerlo bien. Por lo que por favor sea paciente con ello. Ah, pero puedes empezar aplicando el rígido. Tu diseño. Um y es una gran manera de empezar. Entonces ahora es tu turno de hacer. Gran ux. He puesto aquí este ligero espectáculo. En tu recurso es esto es algo que acabo de armar como un pequeño manual para tu ux que puedes aplicar a tus futuros proyectos. Así que siéntete libre de descargar el pdf y solo tenerlo a mano en algún lugar. Por lo que la próxima vez que estés diseñando tu proyecto, solo puedes recordarte algunas de estas cosas. Um, por si te olvidas. Muy bien, así que aprendimos mucho sobre el diseño de la experiencia de usuario, Y ahora, como estamos diseñando nuestros simulacros, te vamos a tener X en mente y volveremos a ello y asegurarnos de que agregamos todo lo adecuado elementos para una gran experiencia de usuario. 21. Plantillas de diseño de iOS: bien, creo que estamos listos para empezar a diseñar nuestro perfil de solicitudes y páginas de servicios. Pero antes de que hagamos eso, quiero seguir adelante y saltar al recurso es para esta lección aquí mismo. Puedes seguir adelante y descargar este archivo de texto. Ah, donde hay un montón de recurso es para lo que se llama plantillas en fig MMA. Por lo que esencialmente las plantillas en fig Mama, igual que muchas otras aplicaciones como Ward edición Softwares, aligual que muchas otras aplicaciones como Ward edición Softwares,te permiten empezar con Primi template s para que no tengas que hacer muchas cosas desde cero. Y no sólo eso, las plantillas te ayudarán a tener acceso a componentes preconstruidos que solo puedes arrastrar en tu diseño y sobre todo a mano cuando se trata de Apple tú I kids para diseñar. Entonces por supuesto yo nos 13 y cualquier otro todos nosotros con los que trabajaste tendremos ciertas plantillas . Estamos empezando un componente de diseño a él ya construido, por lo que no necesitas seguir adelante y rediseñar esa misma cosa para el material de Google diseñado aquí. Entonces he incluido un montón de recurso está aquí s así que vamos a pasar rápidamente por ellos sólo para que puedas saber cómo puedes usar estos para tu trabajo futuro. Fig MMA tiene sus propias plantillas bajo sitios web. Si tus plantillas fig ma dot com slash, podrás acceder a este sitio web donde tienen un montón de plantillas diferentes como Mobile You I Kits y plantillas de Instagram y un montón de otras cosas cool que puedes usar como Venn diagramas y cosas así, el siguiente recurso aquí es fig. Más recurso es dot com, también muy popular. Como puedes ver, hay muchas plantillas diferentes que tienen que puedes empezar con eso otra vez. Esto te ayuda a saltar a tu diseño sin tener que empezar desde cero. Um, y hay toneladas de recurso está aquí desde la comunidad, así que siéntete libre de aprovechar esto y ahorrar mucho tiempo para tus diseños. Este es otro sitio web fig, mi crash dot com. Adelante y echa un vistazo. Tienen mucho recurso es y ustedes yo chicos esta bajo. Y entonces estos dos últimos recursos es por supuesto, como mencioné los para el recurso de diseño de manzana. ¿ Eso es de aquí? Si bajas, puedes vernos plantillas para que puedas descargar, y sé que ahora mismo no han fingido mi aquí. Pero ten en cuenta, siempre puedes descargar la versión de sketch y luego importarla a tus archivos de figment. Y luego hay un montón de otras si estás diseñando para diferentes plataformas. Entonces ya que estamos diseñando para un iPhone operar ahora sigamos adelante y descarguemos aquí el boceto , así que usa el segundo aquí para descargar para sketch y, bueno, eso es descargar. Voy a ir al último recurso aquí. Si estás trabajando en una aplicación android o en cualquier aplicación que se vaya a ejecutar en dispositivos Android o incluso en algunas aplicaciones Web, definitivamente puedes aprovechar esta página de diseño de materiales por aquí desde Google. Enfriar. Entonces eso son plantillas para nosotros. Um, así que solo sigue adelante y abre ese archivo de boceto de iris que descargaste de Apple y luego en la siguiente lección seguirá adelante y lo usará en nuestro proyecto 22. Trabajar en nuestras páginas principales: Muy bien, Así que si has estado siguiendo hasta ahora, hemos ido adelante y descargado el recurso de diseño de apple para IOS. Ah, si no lo has hecho, adelante y sigue este paso en nuestra última lección. Y luego una vez que descargues eso, deberías poder abrir este archivo aquí mismo desde donde puedes ganar usa los archivos de boceto IOS 13 . Acela ha instalado los fondos que necesitas. Ah, Así que asegúrate de dirigirte a este sitio web aquí mismo. Ya lo tengo abierto. Apple utiliza estos tipos de fuentes a lo largo de su tú I Así que lo mejor es que sigas adelante y descargues todos estos fondos en solo tenerlos en tu sistema. Y así de esta manera, cuando sí importemos el archivo de boceto Ah, no tendremos ningún problema ahí. Así que adelante y descarga estas fuentes y luego volveremos a ello. Entonces voy a seguir adelante y también asegurarme de que tenga todas estas fuentes y luego nos pondremos directo a ello. Quiero mencionar rápidamente que si estás usando la aplicación web fig ma, um, um, adelante y dirígete a fig ma dot com. descargas de slash. Ah, y luego seguir adelante y descargar este instalador de fuentes aquí mismo. Ya sea que tengas Mac o Windows, los tienen a ambos aquí mismo. Um, como puedes ver, no se requiere la aplicación de escritorio. El instalador de fondos. Pero para que puedas aplicar tus fuentes instaladas en tu máquina en tu web de figment up, um, um, en tu navegador, necesitarás usar este instalador de fuentes después de instalar tus fuentes. Sí te recomiendo que dejes el producto que se detengan y simplemente lo abras de nuevo para asegurarte que se hayan aplicado esos fondos que hemos instalado. Entonces ahora que estamos listos para importar son archivo de boceto de EU 13 aquí, vamos a pasar a fig MMA y luego volvamos a los archivos principales. La página principal por aquí. Ya lo he importado. Pero si no has seguido adelante y abre un boceto de US 13 y luego sigue adelante y solo arrastra esto te I elementos diseñados en plus guías a la derecha en tu mapa de fig. Ah, yo sólo debería tomar un segundo allí para convertirlo en un archivo de higment, ya que este es un archivo de boceto. Pero una vez que se complete ese paso, puedes seguir adelante y abrir tu archivo aquí. Por lo que desde aquí tienes acceso a colores, textiles de zonas seguras de Apple, la interfaz IPAD así como la interfaz de iPhone. Ahora mismo, nos interesa la interfaz del iPhone. Aquí s así que adelante y ábrela. Y entonces estamos buscando aplicar un par de cosas ahora mismo. Sólo voy a arrastrar mi boceto de marcado aquí. Ya verás desde aquí que en estas dos páginas, queremos tener barra de navegación aquí en y en estas tres páginas. En las páginas principales se dispondrá de una barra de tap con el fin de alternar entre estas páginas. Entonces sigamos adelante y arrastremos en la barra de navegación y una pestaña o en nuestros diseños desde las pautas de AL US 13. Déjame seguir adelante y acercar aquí, y entonces esto es probablemente lo que estamos buscando. Aquí tenemos las barras de navegación y las barras de estado aire aquí arriba. Por lo que la forma más fácil de aplicar realmente estos en nuestra obligación es simplemente seguir adelante y usar componentes. Estos hay. Todos estos elementos ya son componentes, pero bueno, puedes hacer es que puedes seguir adelante y usarlos en tus propios proyectos. Creo que en este momento sólo estamos interesados en este específico, um, marco aquí. Entonces, ¿por qué no vas adelante y solo presionas comando, Ver en todo el marco, Así que asegúrate de tener todo seleccionado. Um, usa esto. Ustedes elementos, barras de guión y adelante y copian todo el asunto. Usando comando, ¿ Ves? Y luego dirígete a tu proyecto aquí. Vamos a seguir adelante y crear una nueva página y ponle el nombre IOS usted. Yo componentes y voy adelante y solo pego eso aquí. Entonces ahora podemos usar thes a través de nuestros diseños para que podamos usar esta barra de navegación aquí mismo. Entonces, ¿por qué no vamos adelante y solo vamos adelante y simplemente arrastramos eso afuera? Vamos a seguir adelante y también arrastrar este estatus para aquí. Por aquí, veo que también tenemos las barras superiores. Ah, queremos tres opciones en nuestra. Entonces sigamos adelante y seleccionemos este aquí mismo y lo arrastraremos también. Y así sigamos adelante y ahora seleccionamos cada uno de estos por separado y creamos un componente a partir de ellos. Hazlo por la barra de estado, y luego lo haremos por la barra de navegación aquí y por último o por aquí Tabor. Y así ahora si pudiera volver a mi página de marcas aquí, centrémonos en Nuestra página principal está aquí. Vayamos a la parte superior de activos por aquí y luego desde donde tenemos IOS ustedes I componentes. Arrastremos en una barra de estado. Por favor siéntate en la parte superior. Vamos a seguir adelante y usar todas las copias de arrastre sobre cada una de estas páginas, y necesitaremos una barra de navegación en nuestra página de perfil. Entonces sigamos adelante y arrastremos eso. Ahora verás que está cubriendo mi barra de estado. Por lo que uno necesita atajo en Fig Mayes que puede usar comando y los corchetes para mover capas hacia arriba y hacia abajo. Entonces sólo tienes que seguir adelante y presionar comando y el corchete de apertura, y eso moverá tu capa que has seleccionado abajo por debajo de la otra. Eso es lo que queremos aquí. Vamos a seguir adelante y sólo arrastra eso aquí mismo, y luego otra vez usar comando y el corchete de apertura para ponerlo debajo de la capa que queremos . Y por último, sigamos adelante y arrastremos tab o a las tres páginas porque esta será nuestra estructura de navegación . Por lo que usamos esta barra superior para cambiar entre estas tres páginas. Agregaremos los iconos aquí en la siguiente lección, pero por ahora, pero por ahora, sigamos adelante y simplemente renombremos el nombre de nuestras páginas en consecuencia. Entonces, el perfil de éste y los servicios de éste sigamos adelante y simplemente volvamos a mi boceto aquí. Sí, eso se ve bien. Sólo tenemos un botón de edición aquí también. Entonces sigamos adelante y añadamos eso también. Vamos a seguir adelante y eliminar esta plaza justo aquí así como la de aquí. Y vamos a seguir adelante y hacerlo desde aquí está bien y luego en este de aquí, sólo vamos a seguir adelante y sumar y en un botón. Ahora, ten en cuenta, estoy usando la fuente de pantalla SF Pro. Ese es el Ese es el frente que el IOS usa ahora mismo. Así que adelante y elige eso. Y luego sigamos adelante y redimensionemos eso a 24 22 año y movamos eso aquí arriba. Vamos a seguir adelante y cambiar el Phil usando nuestros estilos de color, también. El azul que tenemos, creo que se ve bien. Por lo que ahora hemos configurado nuestras barras de navegación son barras de tap y nuestras barras de estado también. Esa es una especie de la línea de base aquí que necesitamos en el siguiente. Escucha, vamos a volver y empezar a diseñar nuestra barra de pestañas aquí un trabajo de Zarrella en nuestra página de solicitudes . 23. Diseñar una barra de tablas para la navegación: todo bien. Si has estado siguiendo hasta ahora, configuramos nuestras tres páginas principales usando algunos de los componentes del Iowa. Si no has seguido otra vez, ve a la carpeta simulada de UPS y el recurso es para este proyecto y luego abre marcas y sigue adelante y solo abre la lección que está más cercana a ésta y solo importa eso y sigue adelante. Muy bien, así que ahora es momento de diseñar nuestra página de peticiones. Pero antes de que hagamos eso, sigamos adelante y configuremos nuestra ficha son apropiadamente así que adelante y abran. Nuestro recurso es para este proyecto. Una vez que estés aquí, sigue adelante y abre la carpeta Iconos y luego abre Tabor. Y luego verás tres iconos aquí para nuestro toque nuestro. Pero queremos seguir adelante y en realidad sumar estos y nuestros componentes en lugar de estas instancias aquí. Así que adelante y al igual que una de las barras superiores aquí y luego haga clic. Acceda al componente maestro aquí. Una vez que hayas hecho eso, puedes seguir adelante y ahora arrastrar estos iconos hasta aquí. Sigamos adelante y solo arrástrelos y luego sigamos adelante y mantengamos el turno y redimensionarlos aquí y hacemos clic en estas proporciones de restricción. Y entonces démosles un ancho de 32. Simplemente voy a dar clic este año y luego agregar una cuadrícula de diseño y sigamos adelante y elijamos Kahlan en una cuenta de tres. Simplemente cambia la Ciudad Kobe al 5%. Sigamos adelante y cerremos eso, y aquí es donde se expuso. Las rejillas se ponen a mano. Vamos a seguir adelante y sólo doble rápido aquí y mover estos iconos en consecuencia. Querrá Ah, nuestros servicios pasados aquí. Queremos cambiar estos dos por lo que tenemos nuestra solicitud la mitad aquí y luego nuestro perfil aquí también . Abrir o panel de capas. Entonces vemos lo que estamos haciendo aquí. Deshaznos de esta carpa color el 10 color en esta y las decenas color aquí. Y luego sigamos adelante y solo centrémonos Estos vamos a seleccionar o cuadrícula aquí y cambiemos la canaleta a que sea mejor y luego sigamos adelante y solo centramos esos a lo largo. Eso se ve bien. Vamos a añadir un texto para cada uno de ellos tan usado T Vamos a hacer perfiles re tamaños, también. Cada 14 y sigamos adelante y solo movemos eso hacia arriba creo que podemos mover nuestros iconos hacia arriba sólo un poco. Eso son 25 píxeles. Lo mismo aquí y por último aquí. Y luego solo usa el comando D aquí y una vez más. Asegúrate de que esto esté alineado. Sigamos adelante y sólo cambiemos el texto aquí. Haremos servicios y haré solicitudes. Adelante y solo centrar esos largos. Lo mismo aquí. Adelante y ahora quitemos el diseño. Bien. Aquí. Creo que eso se ve bien. Sí queremos una forma de mostrar qué tap está activo. Muy bien, Entonces para mostrar en qué página estaban encendidas, vamos a tener un color de selección diferente basado en el toque que seleccionó. Entonces vamos a grandes tres instancias para cada una de estas siendo seleccionadas. Y para hacer eso, voy a simplemente seguir adelante y seleccionar mi componente completo aquí, usado viejo y arrastrar otro aquí abajo y luego solo usar el comando d dos veces más . Entonces tienes aquí el componente principal y luego tres instancia de ese componente. Y luego voy a crear un componente a partir de cada uno de esos componentes celestiales. Y renombré este a tab R slash profile selected select this here create components renombrado a Tab Bar slash request selected y luego por último, aquí vamos a crear un componente aquí y hacer tap bar servicios seleccionados. Y ahí vamos y un joven estamos haciendo eso para que podamos fácilmente alternar entre cada uno en nuestros diseños de maquetas. Entonces ahora me dirijo por aquí al perfil de barra barra superior seleccionado, y vamos a seguir adelante y seleccionar o icono aquí. Cambia el color de selección, utilizando los estilos a nuestro color primario. Lo mismo para el texto aquí y luego aplicando este el color primario. Hagamos lo mismo aquí pero por petición. Y por último, hagamos lo mismo para los servicios seleccionados una vez más. Sólo voy a entrar aquí y asegurarme de que todo esté centrado. Creo que ahora todo centrado perfectamente. Adelante y volvamos a nuestro discurso de marcado ahora y ahora. Como puedes ver, tengo esta hermosa pestaña o aquí mostrando diferentes páginas. Adelante en nuestra página de solicitudes aquí. Buena palabra, dice Tab o aquí. Y luego cambiemos a Loose. Tenías componentes tap o y luego hacer solicitud seleccionada. Ahí vamos y a menos que a través de lo mismo para perfil, Adelante y haga clic en esta barra de pestañas y haga top board. Y el perfil de éste seleccionado. Y por último pero no menos importante, hagamos servicios Tabor seleccionados. Ahí vamos. Por lo que tenemos un tabulador ahora diseñado para cada página. Um y entonces vamos a seguir adelante y saltar a diseñar nuestra página de peticiones en la siguiente lección. 24. La página de petición: para empezar en nuestra página de solicitudes aquí. Realmente rápido. Pasemos a nuestro dibujo aquí. Ah, así que primero lo primero, queremos un poco de recarga o su ícono de actualización aquí. Queremos que nuestro pequeño fragmento de mapa aquí pueda tocar e ir a nuestro mapa A para establecer nuestra dirección. Um, Y entonces será agradable mostrar un pan de están actualmente seleccionados dirección, supongo. Y luego queremos un grifo de solicitud de lavandería justo aquí y con una tarjetita de tienda aquí. Ah, Bueno, adelante y diseñó la tarjeta de la tienda más tarde. Por ahora, sigamos adelante y empecemos aquí todo el diseño. Entonces vamos a trabajar nuestro camino de arriba a abajo. Primero lo primero. Quiero seguir adelante y crear un pequeño rectángulo aquí. Simplemente sigue adelante y elige el tamaño de tal vez 2 50 píxeles aquí en términos de las alturas, asegúrate de que el con esté tomando por completo el espacio horizontal aquí. Vamos a insertar nuestro mapa aquí, pero antes de hacerlo, en pero antes de hacerlo realidad probé el diseño de la caja del mapa en su lugar. Creo que se ve un poco mejor que el mapa de Google. Al menos para aplicaciones de iPhone, tal vez una aplicación de Android. Se vería bien, Pero aquí quiero seguir adelante y en realidad cambiar mi mapa en esta página y luego en esta página, usando un tipo diferente de mapa. Entonces sigamos adelante y volvamos realmente rápidamente a nuestra página de mapa aquí. Volvamos al rectángulo aquí que está creando nuestro mapa. Y luego sigamos adelante y ejecutemos al creador de mapas. Vuelve a enchufarlo y esta vez elige los tabloides como cuadro de mapa. Hagamos un nivel de zoom fuera 15 y simplemente sigan adelante y hagan mapa. Creo que eso se ve un poco más limpio. Yo sólo quiero cambiar la sombra aquí de mi rectángulo aquí. Sí, Así que para la primera charla aquí, solo quiero cambiar la apertura de una ciudad a tal vez hagamos 7% aquí. Está en dos fuertes. Creo que eso se ve bien. Apliquemos aquí lo mismo con el mapa. Vamos a seguir adelante y seleccionar este rectángulo aquí y ejecutar aquí el creador de mapas Blufgan, vaya a la caja de mapa. Adelante y hagamos el mapa aquí. Una cosa aquí, notarás que está cubriendo mi barra de estado, así que usemos el comando y el soporte de apertura aquí para simplemente moverlo hacia abajo. Cosa que se ve bien. Y ahora mis barras de estado tipo de mezclado con el mapa s. Voy a crear un pequeño rectángulo solo para cubrir especie de la parte superior aquí. Y sigamos adelante y movamos esto debajo de mi barra de estado. Vamos a bloquear la capa de la barra de estado. Vamos a seguir adelante y hacer este rectángulo tal vez un poco más grande aquí. Creo que algo así funcionaría. Y luego sigamos adelante y cambiemos el Phil a blancos Color aquí, Regálalo una ciudad de descuento 50% y agreguemos un efecto de desenfoque de fondo. Vamos a golpear este desenfoque a tal vez 25. Haz 30 aquí. Eso es bueno. Entonces ahora mi barra de estado está en mezclarse tanto con mi mapa, que es lo que quiero de nuevo. Esto es parte de ti X. Quieres asegurarte de que tus usuarios sean capaces de ver su barra de estado ah sin que se mezcle en tu propia app. Entonces sigamos adelante y ahora cambiemos de nuevo a mi recurso es uso de carpeta yendo a iconos entrar en solicitud. Adelante y arrastre estos dos iconos y aquí primero Sigamos adelante y limitemos las proporciones y redimensionarlas a 38. Y vamos a seguir adelante y igual que todo esto y traerlo aquí. Y voy a colocar mi mapa dolor en algún lugar por aquí y seguir adelante y cambiar el color de selección demasiado azul ante un efecto de una sombra gota. A lo mejor cambiar el porqué aquí a ocho. Hagamos 10 Blurt dijo. El Desenfoque a 10. A lo mejor el que pagará ciudad a 15. Vamos a ver cómo se ve mejor eso. Vamos a seguir adelante y también darle un color de selección de azul a mi trasero aquí dentro. Ahora vamos a seguir adelante y sólo moverlo aquí arriba. Y quiero seguir adelante y también dar esto de sombra gota. Pero esta vez hacen aunque Pacenti o el Y cero hacen que el soplador tal vez 10 en. Bajar la droga una ciudad a tal vez 15%. Creo que eso es bueno por ahora eso, pero definitivamente podría ser un poco más visible ahora si cambio a mis diseños aquí. Queremos la solicitud de lavandería Hap por aquí, así que sigamos adelante y creemos un rectángulo de tal vez por aquí. A pesar de que no lo hacemos a mi cuenta o solo uno era perdición aquí y asegurarnos de que en realidad no está cubriendo mi Tabor. Creo que eso es bueno. Cambiemos el Phil dos blanco y aguantemos. También debilita. Separe aquí nuestro radio de esquina y haga de éste 20. Y entonces podemos hacer 20 en este también. Recuerdo una vez que sostienes a Ault una vez esencialmente estás separando tu radio de esquina para cada esquina para que no necesites sostener a Ault. Um, una vez que veas este pequeño círculo dentro de nuestro control de radio fronterizo aquí. Por lo que ahora mismo, cada esquina actuará independiente de la otra, para que puedas seguir adelante y redimensionarlos sin tener que aguantar viejo. Añadamos una sombra de do menos 10 o en realidad menos seis Aquí, aumentar el desenfoque a tal vez 15 o incluso 20. No bajé el OPC a tal vez 8%. Creo que eso se ve bien. Definitivamente no me gusta mi trasero aquí, Así que lo que voy a hacer es en realidad voy a envolver esto en un óvalo, así que sigamos adelante y usemos el okey. Y ahora mismo en realidad estoy colocando eso dentro de ese marco así que no quiero hacer eso. Entonces sigamos adelante y lo hagamos aquí 2 48 por 48 luego redimensionar esto, también. Hagamos 32 o en realidad hasta 30 por 30. Entremos y cambiemos el relleno para éste a blanco, y luego solo asegúrate de seleccionar aquí todo el fotograma de actualización y luego mover eso a aquí . Usa comando cerrar corchete para subirlo. Eso se ve bien. Simplemente voy a usar el comando G para agrupar estos juntos y luego colocarlo aquí y sigamos adelante y finalmente a una sombra de cero ex y por qué, en tan solo un desenfoque de 10 podemos hacer desenfoque 15 y hacer obedecer. Ciudad de 15 es baja. Eso se ve mejor. Sigamos adelante y saltemos aquí y solo eliminemos esa sombra de caída del, uh, uh, recarga o el icono de refrescar aquí. Nosotros sólo queremos que se aplique al círculo aquí. Ah, y pensándolo bien, lo mejor quiero aumentar en realidad. Pagarán ciudad a 20%. Creo que eso se ve un poco mejor. Siéntete libre de jugar con el tipo de cosas de fiesta solo para ver qué se ve mejor. Lo que se siente bien para ti. Ahora sigamos adelante y sumamos un texano aquí y vamos a hacerlo realmente adelante y hacer Elegir Laundry Store y cambiamos el año tamaño de fuente a tal vez 24 22 y moverlo aquí arriba. Agrupemos estos juntos y luego sigamos adelante y simplemente centréelos a lo largo y sigamos adelante y creemos un rectángulo. ¿ Quieres hacer al 95 por 2 95 y solo centrar eso aquí? Eso es bastante bueno. Uh, voy a sostener turno y todo eso en realidad lo hacen un poco más pequeño. A lo mejor necesitamos 75 por 2 75 y luego en el radio de esquina de 20. Ahora sigamos adelante a mis activos aquí. Ve a los componentes locales, abre los componentes y luego sigue adelante y arrastra uno de estos botones. Y aquí el estado habilitado y centro que alargan y luego cambian el texto para solicitar servicio . Vamos al panel de capas y asegurémonos de que eso es parte de este botón es parte de este grupo . Simplemente adelante y lugares dentro de aquí también. Entonces sí, todo eso ahora está en una capa o en un grupo. Enfriar. Entonces ahí lo tenemos. Creo que eso es bastante bueno. Ese es un buen comienzo. Um, si vuelvo a cambiar, tenemos casi todos los elementos aquí dentro. Nos meteremos en diseñar la tarjeta de la tienda en la siguiente lección. Así que siéntete libre de ir a la siguiente lección ahora para empezar a diseñar nuestra tarjeta ah store aquí. 25. Tarjetas de tienda: Muy bien, Así que ahora estamos listos para diseñar nuestra pequeña tarjeta de tienda aquí. Um y vamos a, por supuesto, crear un componente para ese s para que podamos reutilizarlo y hacer varios en el futuro , si es necesario. Vamos a seguir adelante y solo haga clic aquí. Comando usado, ver aquí e ir a nuestros componentes. Vamos por aquí y peguemos aquí. Ahora, claro, se está mezclando con el fondo aquí, Así que voy a seguir adelante y darle un relleno de blanco. Hagamos click en él y primero lo conviertamos en un componente. Entonces este es un componente ahora, así que sigamos adelante y agreguemos un rectángulo dentro cosa justo aquí estaría bien. Ah, aquí es donde irá nuestra imagen. Vamos a seguir adelante y en realidad estirarlo a tal vez altura de 1 50 píxeles. Y sólo voy a cambiar el Phil por el más oscuro Phil aquí. Y entonces vamos a seguir adelante y darle a esto un radio fronterizo de 20 también. Parece estar aquí de nuevo para la primera esquina usó Ault. Um para que separen el radio fronterizo está aquí. Si no puedes hacerlo bien, siempre puedes dos semanas que desde aquí está bien, así que creo que eso se ve bien. ¿ Qué más necesitamos en nuestra tarjeta de tienda? Vayamos aquí abajo. Por supuesto, aquí será donde vaya la imagen. Necesitamos un nombre de tienda, un dólar por artículo, tiempo de entrega y la calificación. Trabajemos en cada uno de esos por separado. Entonces primero, empecemos con el nombre de nuestra tienda. Voy a ir aquí, duplicar eso y hacer dólar por artículo. Por ahora, solo sigamos adelante y pongamos 0 dólares por artículo. Recuerda, esto es sólo un componente. En cada instancia, podremos cambiar eso y ajustarlo. Y voy a redimensionar este también. A lo mejor 14. Está bastante bien. Probablemente podamos bajar estos solo un poquito más, así que le damos más espacio a nuestra imagen Bastante bien. Sigamos adelante y solo duplicemos este aquí y mantengamos un espaciado de 15 desde los lados. Y cambiemos este demasiado cero días y luego usemos escribir una línea para este, así que vamos a estirar esto si quiero, queremos usar la línea izquierda aquí y luego seguir adelante y estirar esa línea izquierda usada. En realidad, no queremos estirar todo el camino. Queríamos sólo para aquí y vamos a redimensionar este 12 tal vez 20. Eso es mejor. Adelante y duplicar este de aquí arriba y hacer cero estrellas o en realidad cero. Esto será para nuestra calificación aquí por lo que podemos hacer 0.0. Así que sigamos adelante y solo acerquemos. Entonces sigamos adelante y creemos una estrella para mi lectura. Aquí está bien otra vez, Lo hermoso de higo Miser. Aquí puedes crear una estrella a partir de las herramientas de forma. Adelante y dibujemos uno. Will sosteniendo turno, tal vez hacer un tamaño apagado 25 por 25. Yo solo centro eso aquí junto con esta fresca Ah, y mis herramientas estrella. Puedo seguir adelante y aumentar y disminuir el conteo. Vamos a mantenerlo un cinco. Podemos seguir adelante y hacer que la tienda tenga una relación alta o menor, una va más nítida y también podemos cambiar el radio de frontera aquí. Ahora bien, esto es demasiado. Entonces lo que voy a hacer, no quiero no quiero ir con los bordes afilados que tiene en este momento. Entonces podemos ir a este lado por aquí e incluso asignar un radio de esquina usando el decimal. Entonces ese punto cero probemos tu 0.5 aquí. Creo que eso se ve bien. Ahora nuestro inicio puede tener múltiples estados. O puede ser simplemente genial, como esto puede estar medio lleno, y entonces tal vez puedas estar completamente lleno como ejemplo en mi boceto aquí tengo ah, estrella completamente de campo. Pero si quiero tener solo 1/2 estrella de relleno, también puede hacer eso. Entonces, cuando creamos componente a partir de esto, pero ten en cuenta, no se pueden crear componentes dentro de otro componente. Um así me quería. Adelante y arrastra esta estrella fuera de aquí y luego adelante y solo dale un relleno gris claro. Aquí, tal vez hacer esto colores se ponen Vamos a crear un componente aquí mismo. Sigamos adelante y solo acerquemos. Y sólo para ver a mi estrella aquí, voy a hacer el comando D y luego simplemente poner esa instancia dentro de mi componente y crear dos estrellas más para mis otros estados. Entonces voy a nombrar uno lleno, el otro 1/2 lleno y el último sin llenar. Entonces es para el sin llenar aquí, dejémoslo tal como está. Entonces para el medio lleno, vamos a seguir adelante y darle un color de oro aquí. Vamos a seguir adelante y crear algún tipo de color dorado aquí. Por supuesto, eso no lo veo porque está cubierto por el llenado. Entonces sigamos adelante y sólo escondamos este. Y creo que algo así funcionaría. Simplemente voy a copiar ese hex y aplicarlo al otro también. Por lo que el relleno funciona sin llenar. Uno funciona, y luego sólo queremos hacer la mitad llena. Una vez. Aprovechemos nuestro de los grupos booleanos haciendo creando un rectángulo aquí sobre la estrella así. Primero, cambiemos el color de los rectángulos, también, este color aquí mismo con un código hexadecimal de apenas sesenta, y luego elijamos el rectángulo y 1/2 forma llena y usando nuestros grupos de bullying, vamos click se cruza elección. Eso se ve bien. Ya basta. Yo quiero usar eso aquí. Tendrá viejo traer una copia aquí. Creo que eso se ve bastante bien. Yo solo quiero seguir adelante y centrar esto a lo largo, y lo movemos un poco aquí. Perfecto. Enfriar. Creo que estamos listos para agregar esto a nuestro diseño. Vamos a seguir adelante y renombrarlo para almacenar tarjeta. Y también vamos a renombrar este también. Sólo tienda se ve bien. Volvamos a nuestras marcas y sigamos adelante y solo eliminemos esta plaza aquí mismo. Entonces pasa por activos aquí y después. Ahora ya verás que aquí tenemos esta tarjeta de tienda. Adelante y arrástrelo, centréelo aquí y sólo vamos a las capas. Y quiero asegurarme de que agregué a mi grupo justo a continuación. Elegir tienda de lavandería. Está bien, así que parece que el fondo aquí se está mezclando por completo con el fondo aquí. Entonces sigamos adelante y seleccionemos nuestro componente o la instancia aquí. Bajen a efectos y agreguemos una sombra de gota. Um, con tal vez una Y de SIDA. Probemos 10 y hagamos un azulado apagado. Tal vez 30 o realmente divertido funcionarían. No estoy bajando el radio para tal vez especie de la oap una ciudad aquí para tal vez 10% renovar 12 cosa que se ve bien. Entonces Sigamos adelante y solo llenemos los datos aquí. Sigamos adelante y cambiemos el nombre de la tienda aquí también. La lavandería de Jack. Solo estoy poniendo al azar nombres de las tiendas aquí. Hagamos una calificación de 3.5 y un tiempo de entrega de Steve dos días y luego cambiemos el orgullo del dólar . Y a tal vez hagamos $1 artículo. Muy bien, entonces ahora queremos poner imagen aquí en este rectángulo por aquí. Vamos a seguir adelante y utilizar la herramienta aquí. Colocar imagen. Entonces sigamos adelante y elijamos imágenes, guardemos tarjetas, y solo voy a seguir adelante y elegir una de estas imágenes aquí. Este se ve bien. Y ahora, si paso el cursor sobre un determinado objeto o forma aquí, como este rectángulo y hago clic, seguirá adelante y en realidad pondrá esa imagen dentro de ese rectángulo. Entonces no, sigamos adelante y solo duplicamos esto dos veces una va a ir por aquí y la otra va a ir por el otro lado. Aquí. Déjame simplemente ocultar mi marco de perfil aquí sólo para que podamos editar esto. Simplemente voy a renombrar esto a lavandería rosas. Vamos a y luego darle una calificación de 4.5. Y entonces podemos cambiar el inicio aquí seleccionándolo. Y ahora, si haces clic en eso, realidad podemos seguir adelante y elegir cuál estamos mostrando. Ahora mismo, estamos mostrando este Intersect uno, pero sigamos adelante y ocultemos eso y hagamos uno lleno. Esto puede cambiarse tiempo de entrega a un día, y hago un dólar 20 el artículo. Vayamos a este de aquí, también, también, y cambiémoslo a la lavandería de Bob. Dale una tienda fuera. No lo sé. Vamos a 2.5. Cambia el tiempo de entrega dos, tal vez tres días y luego cambia la tienda aquí escondiendo mis otros dos a los no llenos. No cambies el precio a tal vez 80 centavos el artículo. Por lo que para reemplazar estas imágenes, solo puedes seguir adelante y hacer doble clic, Ir a la imagen aquí, y luego hacer elegir imagen con hacer otra imagen. Ahí vamos y luego hacemos y luego simplemente cerramos eso y hacemos este aquí, escogemos imagen y luego elegamos ésta. Ahí vamos. Entonces ahora vamos a seguir adelante y simplemente colocar esto en nuestro marco aquí vamos y tener ambos seleccionados y luego arrastrarlos a la solicitud y luego al grupo. Y luego qué? Los tenemos seleccionados. Sigamos adelante y sólo limitamos las proporciones y cambiarlas también. A lo mejor 2 55 en realidad, el principio en 2 a 45. Simplemente muévalos por el otro de aquí. Tan solo asegúrate de que tenga el mismo espaciado. Seleccionemos los tres y asegurémonos de que estén alineados verticalmente y parezca que lo están. Por último, voy a seguir adelante y sólo disminuir la sombra en este para hacer. Puede ser un Y off cinco y un desenfoque de 10 tal vez sólo eligiendo una ciudad del 6% en su lugar. Y lo mismo aquí. Creo que eso se ve bien. Podemos incluso en realidad seguir adelante y traer este icono de refresco hasta aquí y tener un antro o el resto del grupo aquí. Ahí vamos. Creo que eso se ve mejor. Deshazte de ese círculo y creo que eso se ve mejor. Entonces ahí lo tenemos. Esa es nuestra página de peticiones. Antes de que se me olvide de hacerlo. Voy a seguir adelante y bueno, primero, sigamos adelante y simplemente colapsamos. la página de solicitud y mi página aquí. Voy a ir a la página de servicios y solo asegurarme de que también se derrumba. Voy a seguir adelante y solo antihigiénico mi página de perfil. Enfriar. Entonces ahora creo que estamos listos para saltar a nuestras próximas páginas aquí. 26. La página de perfil: bien, así que creo que estamos listos para empezar a diseñar o una página de perfil aquí. Se ve bastante sencillo. Tenemos una pequeña foto para el usuario aquí con el nombre y correo electrónico aquí y botón editar aquí. Y luego tenemos un pequeño widget de mapa fuera de su dirección. Contamos con soporte de pago y luego cerrar sesión. Entonces empecemos a diseñar esta página aquí. Entonces en la página del perfil aquí, voy a seguir adelante y lo primero, hacer esta edición, pero en un poco más pequeña, menos también. Tamaño de fuente de 20 on Cambió la fuente demasiado media aquí o menos, tú semi negrita, más mejor. Entonces sigamos adelante y primero en o por aquí para esa foto de perfil, y podríamos hacer 100 100 por el tamaño. Solo mantengamos un espaciado de 25 píxeles desde la izquierda. Adelante y sumamos. Se necesita para el primero y el último para su nombre. Basta con seguir adelante y arrastrar una copia usando viejo y luego hacer correo electrónico en dominio com. Sigamos adelante y solo movamos estos hacia abajo y eso se ve bien. Vamos a cambiar el tamaño de este 12 tal vez 18 y el nombre aquí a 22 para añadir aquí una foto de perfil. En realidad voy a subir a mis enchufes aquí. Hacer administrar los enchufes. Adelante y naveguemos todos los enchufes aquí, y voy a usar esta bodega aquí llamada avatares. Si lo puedes encontrar, solo tienes que seguir adelante y buscar avatares y luego instalar éste aquí mismo. Una vez instalado, podemos volver a nuestro proyecto y luego con tu, uh, uh, círculo o labios seleccionados, ir a enchufes y luego hacer avatares cool. Entonces creo que eso se ve bien. Uh, seguir adelante. Tenemos nuestra opción de mapa, y entonces qué? Simplemente vamos adelante y usamos sal en este rectángulo con mapa ya ahí dentro y traerlo aquí . Simplemente redimensionarlo hasta que obtengamos espaciado de 25 en ambos lados. Eso se ve bien. Adelante y redimensionemos la altura 200. Dale un radio de frontera de 20. Vamos a moverlo un poco hacia abajo. Y entonces vamos a mover esto o copiar este ícono sobre para simplemente ponerlo en el medio aquí un poco por encima del medio. Agrupemos estos juntos. También queremos agregar la dirección aquí. Entonces, ¿por qué no vamos adelante y duplicamos este bolígrafo aquí y entonces tal vez lo hagamos, uh, claro, constreñido y luego hacemos recto 20? Eso es correcto. 18 en cuanto al ancho. Yo sólo voy a acercar aquí y vamos a hacer izquierda la línea aquí, hacer un texto. 1234 Avión de dirección justo como un Marcador de posición. Y vamos a seguir adelante y hacer un tamaño de granja de 18. Mueve esto aquí arriba. Creo que eso se ve bien. Sólo voy a moverlo un poco hacia abajo. Y entonces creo que solo necesitamos pagos, soporte y cierre sesión aquí. Así que vamos a crear otro rectángulo aquí y sólo hacer 3 25 por 55. A lo mejor hago un radio de esquina de 10 aquí. Subirlo un poco. A lo mejor un poco más bajo que eso, y hagamos un texto. Y luego hagamos el pago. Encuentra eso aquí. Entonces vamos a cambiar primero el relleno dos primario cambiar el relleno del texto a Blanco en el go adelante y duplicar otro aquí. Haz eso más grande y deja la línea a la derecha una línea. Hagamos Estoy usando viejo u opción y luego haciendo la llave ocho para insertar thes pequeños círculos esta nueva 1234 y ese tipo de representa la tarjeta de crédito o la opción de pagos. Creo que incluso podemos hacer esto un poco más grande, como vamos a hacer 65 aquí y luego centrar estos largos. Ahí vamos. Vamos a seguir adelante y agruparlos usando Command G y sigamos adelante y nombrelo Botón de pago, Lo que está duplicado y tenemos apoyo. Entonces hagámoslo apoyo. Además, para dejar el texto aquí y volvamos a nuestra playa de acarreo aquí. Copia esto. Vuelve aquí y pega eso en Basit aquí arriba. Pero quiero simplemente seguir adelante y sólo arrastrar eso aquí En lugar de eso, vamos a seguir adelante y redimensionar eso, también. 22 fueron en realidad vamos a hacer 28 y luego línea vertical y lo que tenemos aquí tenemos, como, 20 raid. Sí, vamos a hacer, uh, moverlo hasta que esté aquí. Adelante y que dure, pero en copia aquí también. Um, así que sigamos adelante y primero asegurémonos de que eso es parte de este grupo aquí en un renombrado ese grupo para apoyar Button y a menos que cierres sesión, vamos a crear una pequeña flecha Icahn aquí y en este momento apenas lo puedes ver. Es realmente pequeño, Así que vamos a seguir adelante y hacer el espesor tres. Eso se ve bien aquí. Cambiemos el color del trazo a blanco. Entonces acabo de acercarme aquí. Pero como se puede ver, que este bordes un poco duros, mientras que por aquí tenemos una especie redonda de bordes bonitos o o esquinas. Entonces vamos a seguir adelante y solo haga doble clic en esta línea aquí para la flecha. Por lo que este paso es importante. Adelante y selecciona este punto aquí mismo. Eso Podemos aplicar cambios a sólo este punto. Después ve a los tres puntos por aquí y luego haz una ronda de gorra fuera. Enfriar. Por lo que eso tiene un estratos redondeados. Bueno por ahí. Se puede hacer esto a cualquier línea. Bueno, solo alejemos el zoom y simplemente escapemos para regresar de ahí. Solo asegurémonos de que esto realmente esté centrado aquí. Parece que ahora está centrado en. Vamos a seguir adelante y mover la flecha dentro del último botón aquí cambió el nombre para cerrar sesión botón, y creo, déjame ver cómo está mi espaciado. Puedo moverlo a un par de píxeles. ¿ Verdad? Y esa es una línea. Ahora, creo que eso funcionaría. Algo que podríamos hacer aquí, podemos ir a nuestro botón de cierre de sesión y cambiar el color primario por el naranja. Aquí. ¿ Ese tipo de significó que esta es una opción de cierre de sesión? Siéntete libre de jugar con eso y ver qué se ve bien. Pero creo que al mirar mi boceto aquí, tenemos bastante cerca de lo que queremos para nuestro diseño. Simplemente voy a seguir adelante y alejarme completamente para ver dónde estamos. Sí, creo que eso se ve bien. 27. La página de servicios: bien, Ya casi terminamos Nuestro diseño aquí. Como puedes ver, hemos completado nuestra página de carga, nuestro tutorial, nuestro tutorial, pagos de página y página de mapa. E incluso hemos pasado por nuestras solicitudes y página de perfil e incluso hemos agregado restricciones para nuestro diseño, lo cual es genial. Entonces ahora, listos para empezar a diseñar nuestra última página aquí, Sigamos adelante y solo acerquemos aquí y sigamos adelante y abramos nuestro boceto que teníamos . Por lo que esta página es súper simple. Esencialmente, sólo queremos una lista. Ah, manojo de servicios o pedidos anteriores o solicitudes que el usuario haya realizado, o incluso una activa. Entonces si tienen un servicio de lavandería funcionando de forma activa hacia abajo, queremos mostrar esto también aquí para que el usuario pueda ver cuál es, um, um, el estado de ahí fuera lavandería. Entonces, como pueden ver aquí, vamos a colocar eso en especie de formato de lista. Um, por todos los servicios que tienen s. Así que sigamos adelante aquí y solo acerquemos aquí y veamos qué exactamente queremos tener en nuestra, um, nuestra lista de allá. Por lo que queremos almacenar nombre. Queremos una fecha en tiempo donde se llevó a cabo la solicitud. Corremos el estado actual y luego, ah, poco precio, uh, mensaje aquí para mostrarles cuánto se les cobraba. Y entonces sólo queremos tener aquí un pequeño icono de zanahoria. Simplemente permitas que entren en esa solicitud y tal vez Seymour información al respecto. O tal vez ponte en contacto con la tienda o con un montón de otras opciones que puedes agregar para tu propio diseño . No vamos a entrar en esa página en este curso, pero, um, voy a dejar eso como ejercicio para ustedes. Entonces si sí quieres seguir adelante y diseñar una página para que vean su solicitud, por todos los medios, adelante y hazlo. Y hasta me lo puedes enviar por correo electrónico. Y estaré encantado de brindarles algunos comentarios. Impresionante. Entonces volvamos a nuestro simulacro aquí arriba, y lo primero que quiero hacer es crear un componente para cada uno de mis elementos de lista en. Por supuesto, creo que a estas alturas ya sabes dónde ponemos nuestros componentes. Está en la página de componentes aquí. Vamos allá y sigamos adelante y creemos un rectángulo usando el R dos. Y solo estoy creando un rectángulo a primera hora. Vamos a seguir adelante y darle un relleno de blanco encendido. En realidad, sigamos adelante y cambiemos el ancho a 3 75 Creo que ese es el ancho del tamaño del iPhone con el que estaban trabajando aquí. Si no estoy errando, sí, 3 75 por 8 12 Así que volvamos aquí. Hagamos 3 75 y hagamos 100 y 10 por la altura aquí. Creo que eso es bueno. Ya tengo algo de texto aquí, Así que como diseñador siempre quieres reutilizar componentes o reutilizar diferentes elementos en tu diseño en lugar de crear otros nuevos solo porque ahorra un montón de tiempo. Entonces sigamos adelante y solo seleccionemos un par de cosas aquí como estos tres textos. A lo mejor aún creo que eso es bueno. Y luego usa comando, mira para copiarlo y luego dirígete a este rectángulo aquí y pega eso. Y aquí en este momento, esto no es un componente. Seleccionemos todo aquí y usemos la tecla de opción de comando, y eso lo convierte en un componente. Y ahora debilita, profundiza y mueve cosas por ahí. Entonces creo que podemos tener el nombre de la tienda más cerca aquí. Veamos qué teníamos en nuestro diseño sin embargo algo parecido. Y tenemos un precio y estado. Entonces hagamos precio. Sigamos adelante y movamos esto aquí. Simplemente dale algo de espaciamiento para nuestras zanahorias y luego sigamos adelante y movamos esto aquí en su lugar y hagamos, uh, dejó la línea. Adelante y alineemos eso por ahí. Vea qué tipo de espaciado tenemos hasta 15 por 15 aquí en términos del espaciado de izquierda e inferior. Y vamos a seguir adelante y solo hacer día mes estás y eso puede deberse H H m m para representar horas y minutos. Se ve bien. Entonces sigamos adelante y asegurémonos de que esto de aquí está centrado verticalmente perfecto. Y luego voy a duplicar este texto usando el comando D derecho. Alinearlo y luego simplemente moverlo todo el camino hasta donde tengo mi signo de dólar Icon. Cambiemos el texto a status. Enfriar. Creo que eso es bueno. Solo queremos agregar o icono de zanahoria aquí. Um, la forma más fácil de hacer eso es dibujar una línea de error, así que voy a hacer turno l como atajo. Crea aquí una línea. Vamos a acercar. Adelante y doble rápido en aquí en. Tan solo toma este extremo de la línea y tráelo todo el camino hasta aquí. Por lo que sólo tenemos un bonito icono de zanahoria aquí. Voy a usar hecho aquí para salir de ahí va a alejarme y luego traer mis zanahorias por aquí, hacerlo un poco más grande. A lo mejor hacer un espesor de dos, tal vez 2.5, y eso es bueno. Y luego quiero asegurarme de que me agradó justo en el centro y a menos que se cambie un color de trazo para que realmente no pueda ver eso aquí, um, eso funciona. adelante y cambiemos el nombre de esta lista de servicios de componentes y vayamos a nuestros maquetas ahora e insertemos ese componente yendo a los activos que vemos aquí mismo. Contamos con lista de servicios. Adelante y arrastremos eso. Por lo que ya lo dice Aiken, quiero hacer cambios de pareja al mismo. Creo que podemos hacerlo un poco más pequeño. Y luego sigamos adelante y añadamos un divisor también. Por lo que podemos especie de ver el siguiente ver la siguiente opción en la lista y diferenciado entre ellos. Entonces sólo voy a volver rápidamente a los componentes. Seleccionemos todo el componente y lo hagamos 95 píxeles de altura. Y luego voy a bajar el nombre de mi tienda unos píxeles y luego tal vez alineé estos aquí en su lugar, y estos también y realmente les traeré unos píxeles hacia abajo y luego seguir adelante y poner este en el centro otra vez. Creo que esto funcionará. Entonces sigamos adelante y dibujemos una línea. Asegúrate de mantenerlo en la calle usando turno y haz que se estire todo el camino. Usa color de trazo. Usemos el control, veamos y sigamos adelante. Y así como eso, color del carruaje. Entonces tal vez hacer, uh, tal vez podamos hacerlo un poco más ligero. Quería ser sutil. Creo que eso es bueno. Vamos a seguir adelante y sólo seleccionarlo y traerlo todo el camino hacia abajo. Tan solo un píxel en la parte inferior. De acuerdo, creo que tenemos eso aquí mismo. Entonces ahora si vas a maquetas, creo que eso se ve mejor. Podemos simplemente seguir adelante y usar todo también. Bajar eso y luego golpear comando de montón de veces solo para ver cómo se vería eso . Creo que esto funciona 28. Datos de muestra de Google Sheets: Ahora les voy a mostrar un enchufe realmente genial que podemos usar para realmente llenar los datos estos servicios por aquí. Um, así que sigamos adelante y busquemos enchufes, abrimos, hombre gestionado enchufes, y luego sigamos adelante y hagamos navegar por todos los enchufes. Y me interesa esta opción de fregadero de Hojas de Google aquí. Si no lo encuentras, busca en las hojas de google. Fregadero justo aquí. Adelante e instálalo. Este plug ins super cool. Y creo que será útil para sus futuros proyectos también. Muy bien, así que una vez que hayas instalado eso y estés de vuelta aquí, en realidad no volveremos a tocar nuestros componentes aquí. Entonces adelante y lleno junto con lo que estamos haciendo aquí. Ve al nombre de la tienda y cambia el texto aquí para, um, hacer un signo de hashtag o un signo de libra como este y hacer tienda subrayado nombre y luego para el icono del dólar aquí. Uh, adelante y lo nombra. Total guión bajo Precio. Asegúrate de poner ese hola ciervo o la llave de la libra aquí. Cambia este 12 fechas con el hashtag antes y luego status será estado hashtag y te diré por qué Eso es importante en tan solo un segundo. Ah, una vez que has renombrado solo sigue adelante y comprueba dos veces que no hiciste ningún error tipográfico ahí dentro y qué había aquí. Yo sólo quiero hacer una última cosa. Entra aquí por el nombre de tu tienda y asegúrate de estirar todo el camino hasta tal vez justo aquí y solo asegúrate de lo mismo con la fecha. Creo que se ve bien. Quiero seleccionar mi fecha y estado y bajarlos par de píxeles. Y también déjame seguir adelante. Y siento que deberíamos mover estos hacia arriba y centrarlos a lo largo. Mi componente aquí s así que vamos a agruparlos juntos y luego usar una línea vertical. Creo que eso se ve mejor. Es ahora si vuelvo aquí. Sí, eso se ve mucho mejor. Ahora mira este ligero tu cuadro de servicios ir a enchufes. Hago las hojas de Google se hunden. Adelante y entra. Este enlace, que está en el recurso es para esta lección. Así que adelante y tómese un momento para descargar eso. Obtén este enlace de ese archivo de texto y ponlo aquí. Ya me adelanté e hice esta hoja esta hoja de Google con datos de muestra. Tan seguro en un segundo cómo luce eso. Entonces si realmente lo abrió, verás que he armado estas pequeñas hojas de ghoul con mis datos con los nombres de mis tiendas. Ah, un par de fechas, algunos precios y algunos artículos de estatus y al azar. Hay todos los datos aleatorios y de datos solo para ayudarnos a generar nuestra pantalla. Um, así que con estas hojas de Google, adelante y usa el link de nuevo y ponlo aquí y luego adelante y elige actualizar la página actual solamente, y luego usar fetch y sink, como puedes ver aquí son la página es no concluido. Se fue adelante y utilizó que las hojas de Google y generó esta página para nosotros. Por supuesto. Por eso necesitamos hacer renombrar nuestros campos para que este plug in sepa qué agarrar de donde, um, sí, asegúrese de leer su documentación. Puedes hacerlo yendo a Google. Ella se hundiría y luego haciendo clic en este pequeño, um, icono de información aquí abajo donde realmente puedes acceder a su documentación y luego ver cómo puedes usar esto para tus propios proyectos y configurar los tuyos propios, uh, Hojas de Google. Pero eso me pareció bastante guay. Y por eso quería incluirlo en esta lección y decirles chicos que podrían hacer algo como esto. Lichens, que tengas acceso a nuestro super poderoso. Por lo que aprovecha para generar tus diseños y ahorrarte una tonelada de tiempo. Entonces con eso, um, creo que nuestras páginas están prácticamente todas hechas aquí. Ahora vamos a volver y aprender un montón de otras cosas. Sé que a estas alturas, ya tienes mucho conocimiento sobre Fichman. Esperemos en realidad puedas usar esto y aplicar todo lo que has aprendido a tus propios diseños en. ¿ En serio? Eso es todo lo que se trata de este curso es experimentar con diferentes herramientas que los higmentos te dieron para generar algunos diseños realmente bonitos. Entonces, antes de terminar este simulacro aquí, vamos a volver a él y hacer un montón de cosas para que sea aún mejor. Um, así te veré en la siguiente lección. 29. Encuentra fuentes personalizadas para utilizar: Muy bien, Hemos completado nuestro simulacro de arriba en la última lección, y quiero tomarme algún tiempo para repasar nuestro simulacro y encontrar oportunidades y lugares donde podamos mejorarlo, empezando por el texto y la tipografía. Um, así que voy a cambiar a un par de recurso. Es que han incluido Ah, en esta lección. Adelante y ábrelos para comprobarlos. Yo sólo voy a ir rápidamente por esos Resource is eso. ¿ Sabes a qué tienes acceso? Um, En primer lugar, si estás intentando usar fuentes personalizadas en tus proyectos de figment, asegúrate de volver a descargar este instalador de fuentes aquí mismo. Por lo que esto solo es necesario si estás usando la aplicación web. Si tienes la aplicación de escritorio y estás usando figment en un escritorio arriba, no necesitas preocuparte por instalar este instalador de fuentes. Por lo que fig MMA en sí utiliza cientos de fuentes accesibles en fuentes de Google. Como si te dirigieras al extranjero. Inicia google dot com, podrás acceder a una gran cantidad de fondos que están disponibles en Sigma. Como siempre, explora algunas otras. No estoy seguro de qué fondos están actualmente en fig MMA, pero estoy seguro que podrás averiguarlo si buscas una fuente específica. De lo contrario definitivamente se puede descargar de cualquiera de las fuentes de Google, que es un gran recurso para encontrar fuentes, um, u otro recurso de tiendas como las fuentes adobe también. Creo que éste requiere una suscripción o una membresía para la nube creativa. Así que adelante y echa un vistazo a esto también. Obtienes acceso a toneladas de fonds, así que vas adelante y navegas. Este recurso es si estás buscando una fuente personalizada. Otra página web genial que quiero mencionar es pareja cariñosa Darko Ah, este sitio web te da un montón de pares de fondos que puedes usar, um, con diferentes tipos de fuentes que se verían bien juntas en tus proyectos. Um, aquí hay un par de fondos diferentes que puedes explorar y ver cuál te gusta y cuál quieres usar para tus propios proyectos. Y esta lección vamos a seguir adelante y en realidad aplicar esta, um, um, combinación de fonds o par de fondos en nuestra aplicación. Um, así que puedes hacer una de dos cosas ya sea va a pasar a las fuentes. Paradox co y luego descarga este rubí IQ y Carla fuente combinada o par de fuentes o de nuevo , si vas al recurso es para el proyecto en el que estábamos trabajando. Clean can group, um, y dirígete a las fuentes. Podrás descargarlos también desde aquí está bien e instalarlos. Entonces voy a seguir adelante y solo instalarlos yo mismo. Asegúrate de seleccionar todos los diferentes pesos. Um, para ese fondo y Mac, solo puedes seguir adelante y seleccionarlos todos y luego solo duplicar rápido para abrirlos, instalarlos todos. Y hagamos lo mismo por estos otros fondos. Aquí. Asegúrate de nuevo. Seleccionas todo, adelante y ábrelo y robaste y todo hecho ahí. Está bien, así que vamos a ir a nuestro higo MMA que se detienen de nuevo porque estoy usando la aplicación de escritorio aquí. No necesito instalar el instalador de fuentes, pero siéntete libre de hacer una pausa aquí y pasar por el instalador frontal y asegurarme de que esos fondos se apliquen en la Web. APA está bien, si estás usando el fig. Ma subió 30. Crear estilos de texto: por lo que, hasta ahora en nuestro proyecto, hemos estado usando el valor predeterminado a la fuente Roboto aquí. Entonces si acerco aquí como, por ejemplo, en nuestra página de inicio de sesión o logotipo, todo ha estado usando esa fuente roboto hasta nuestras páginas principales aquí, en realidad. Ah, donde empezamos a usar algunos de los componentes del IOS. Um, si recuerdas, por ejemplo, para nuestra barra superior y las barras de navegación aquí, um Así que una vez empezamos a usar eso, todo tipo de cambio automático a las fuentes predeterminadas que vienen para iPhones . ¿ Tú? Por qué eso también instalamos, que es sf pro display. Um, así que sé que esto es súper desordenado ahora mismo porque y tus proyectos, típicamente quieres apegarte a una o dos fuentes como máximo. No se quiere tener múltiples combinaciones de fuentes. Um, y también hablamos de esto en nuestra lección UX como ambas. Entonces, solo trabajemos a nuestra manera desde la página de inicio de sesión. Y por supuesto, tenemos la opción de entrar y cambiar cada dedo del pie de texto, nuestras nuevas fuentes Ah, que descargamos. Pero también te mostraría una gran manera en la que puedes configurar estilos igual que configuramos estilos para nuestros colores. Si recuerdas, configuramos un esquema de color. Um, quiero mostrarte cómo en realidad puedes usar estilos para tu tipografía y tu texto también . Por lo que para agregar un estilo de tipo a tu proyecto de producto. Um, sigamos adelante y primero seleccionemos texto. Empecemos con este texto de logotipo aquí. Por lo que instalamos estas dos fuentes. Por lo general, quieres usar un solo fondo para tus encabezamientos, títulos de eso y texto de logotipos y cosas por el estilo. Y entonces el texto corporal sería para todo lo demás. En este caso, son Header Font es Rubik y la fuente del cuerpo va a ser Karla s. Así que vamos a aplicar Rue Big aquí a esto. Ah, texto del logotipo. Entonces ve aquí a donde dice texto. Puedes cambiar la fuente ya sea navegando por aquí. Um o también puedes simplemente seguir adelante y escribir el nombre de fonds. Y aquí, Así que ya sé que es Rubik. Entonces voy a buscar eso aquí y ahora tenemos a Rubik aplicado aquí. Sólo voy a aplicar Ah, peso medio aquí. Se pueden hacer otros. Como si quieres ir realmente grueso con negro o realmente luces. Creo que me gusta el medio aquí. Se ve bastante bien destacando, y no se mezcla. Entonces sigamos adelante y usemos eso. Por lo que a veces el dinero cambió fondos, tus alineaciones podrían cambiarse. Así que adelante y sólo una doble comprobación de que todo esté alineado correctamente. Um, y asegúrate que solo voy a asegurarme de que este logo esté alineado justo en medio del bienestar . Eso se ve bien ahora. Entonces ahora vamos a seguir adelante y convertir esto en, ah tipo estilo que podemos usar en todas las demás páginas. Y nuevamente, el beneficio es que si en algún momento decides cambiar esta fuente, podrás hacerlo en un solo lugar, y todas tus páginas tendrán esa fuente y el estilo nos aplicó. Adelante y vayamos al estilo aquí. Vamos a crear un nuevo estilo. Yo sólo quiero ponerle nombre, um, cabecera, hacer un pequeño guión y luego sólo darle el nombre de los Fonds aquí. Entonces es Rubik. Hagamos 26 punto. Ese es sólo el nombre aquí. No tienes que poner exactamente lo que estoy poniendo aquí. Eso es solo para que pueda identificar mi cabeza de fuente y ver fácilmente qué tamaño y fuente es. Así que crea estilo. Y así ahora, como pueden ver aquí, si sigo adelante y vuelvo a hacer clic en esto, este texto se ha adjuntado a este tipo de estilo de Encabezado Rubik 26 eso para demostrar si voy a esta tarjeta tutorial, por ejemplo . Ahora bien, si recuerdas, esta es una instancia de un componente, por lo que no quisiéramos editar las cosas aquí porque de lo contrario no se aplicaría a las otras tarjetas tutoriales. Entonces sigamos adelante y vayamos a componente maestro desde aquí, y nos debe llevar justo aquí. Ahora si sigo adelante y hago clic en el título por aquí y luego voy a mis estilos aquí, puedo aplicar el mismo encabezado. Estilo Rubik 26. Ese es el único estilo que tenemos en este momento. Pero también pongamos un estilo corporal para este texto aquí usando nuestros otros fondos, que es Carla. Adelante y cambiemos el texto a Carla y sigamos adelante y tal vez rebamos el tamaño de 17. Adelante y crea estilo. Hagamos Body Dash Carla, Y éste era de 17 puntos gran estilo. Ahí vamos. Y ahora tengo un textil estilo body también. Entonces mientras estamos aquí con nuestros componentes, sigamos adelante y aplicamos eso a todos los componentes aquí. Entonces seleccionemos nuestro Pero habilitó aquí y cambiemos el texto a Carla también. Y luego quiero seguir adelante y ponerlo en negrita y cambiar el año tamaño de fuente a 17 también. Sólo voy a asegurarme de que esté centrado aquí. Eso se ve bien. Vamos a seguir adelante y crear un estilo para nuestro pero en texto aquí también. Entonces me voy. Voy a hacer cuerpo Carla 17 puntos. Atrevido aquí. Ahí vamos. Entonces ahora ese botón tiene esa celda incluso está implícito aquí también. Porque de nuevo, esta es una instancia del este botón aquí mismo. Está bien, así que sigamos adelante y aplicamos nuestros fonds a nuestros ah dos componentes aquí, Así primero 1 para almacenar tarjeta. Entonces sigamos adelante y seleccionemos este texto aquí. Um, vamos a ponerlo a nuestra habitación Big fund aquí y vamos a hacer medio por el tamaño de la cosa. Podemos hacer 22. Adelante y sumamos este textil como sala de cabecera 22. Recuerdo que no tienes que crear, um, un estilo para cada fondo, pero si crees que vas a reutilizar cierta fuente o al estado un cierto estilo de fondo en múltiples páginas o múltiples componentes, Creo que esta es la mejor manera de hacerlo que cambiarlos individualmente todos. Entonces vayamos aquí y luego seleccionemos nuestros estilos y hagamos cuerpo Carla 17. Lo mismo aquí, Por último aquí está. Bueno, sigamos adelante y solo asegurémonos de que todo esté centrado. Va a centro. Todas estas acciones podrían asegurarse de que estos aire también se centraran. Perfecto. Vayamos por aquí. Vamos en nuestra lista de servicios. Ah, componente. Adelante y cambiemos este al encabezado Rubik 22 que configuramos. Y estos van a ser el cuerpo Carlos 17. Entonces, con los seleccionados, vamos a hacer, um, cuerpo Carlos 17 y luego tal vez hacer audaz por el precio aquí. Entonces desvinculemos esto o desconectemos este estilo y hagamos el estilo de cuerpo Carlos 17 Bold. Se ve mejor cuando vamos adelante y solo, um, um, trae esto unos píxeles hacia abajo unos píxeles hacia arriba y luego sigue adelante y trae aquí mi nombre de tienda y trata de alinear eso con el otro texto de aquí. Y tal vez podamos bajar estos pocos píxeles. Creo que eso podría verse mejor. Vamos a seguir adelante y agrupar a estos dos juntos así está en el mando G en el ir adelante y seleccionar estos haciendo. Asegúrate de que estén centrados y también centrarlos junto con el resto del componente aquí. Creo que eso es bueno. Así son los componentes aquí ahora tienen el fondo adecuado. Entonces, ¿por qué no hacemos una pausa rápida y luego aplicamos o textiles al resto de nuestros mock ups en la siguiente lección? 31. Aplica estilos de texto en cualquier persona: Está bien. Por lo que nuestros componentes ahora cuentan con textiles aplicados. Y si realmente volvemos a nuestros maquetas, ya podemos ver algunos de esos aplicados, como aquí con nuestros botones. Um, claro, como cosas como este botón olvidado contraseña. Porque no es un componente no se ha aplicado. Siempre es siéntete libre de chequear. Vuelve aquí y luego selecciona los teléfonos adecuados. Basta con seguir adelante y alinearlos de nuevo. A lo mejor bajar un poco esto. Trae estos dos poquito arriba. Eso se ve bien cuando selecciono aquí mis términos y también lo dije al estilo de Body Girl de 17. Negrita. Simplemente lo voy a estirar todo el camino. Ahora bien, si recuerdas antes, no teníamos este final como, ah fuente plegada. Por lo que aún puedes entrar aquí, doble clic y elegir la palabra que quieres o múltiples premios y luego, ah, ah, usa el comando de atajo ser, um y entonces eso va a seguir adelante y en un negrita ese puerto. ¿ Y qué más tenemos aquí? Contamos con nuestro pago. Sigamos adelante y seleccionemos todos estos. Hacer un cuerpo textil carla, 17 puntos. Eso se ve bien. O pero en nuestro automáticamente tiene ese texto de Carla. Cambiemos este pago a cabecera Rubik 26. Sólo voy a estirar eso. Céntrela. Eso se ve bien. Veamos lo que necesitamos para cambiar aquí. Sólo tenemos que cambiar el texto de búsqueda por aquí, también. Debe hacer cuerpo Carlos 17. Y de nuevo, Asegúrate de centrarte en la línea las cosas correctamente para nuestras páginas principales aquí. Veo que mis tarjetas ya tenían la fuente aplicada porque eso era un componente. Pero creo que todo lo demás, um, aparte de la navegación y los tableros superiores aquí están dentro de la página. Entonces, ¿por qué no vamos adelante y primero hacemos la barra superior en la barra de navegación? Así que vamos a duplicar menos rápido en uno de los componentes aquí, o en una de las instancias de la barra de navegación, ir a los componentes maestros. Y entonces aquí aplicemos los mismos teléfonos aquí. Vamos a hacer De hecho vamos a seguir adelante y seleccionar a Rubik como nuestra fuente, tratando de mantener todo lo demás igual. Y luego sigamos adelante y creamos un nuevo encabezado. Lubick 36 punto. Parece que acabo de cometer un error aquí en el nombre. En realidad es una fuente de 34 puntos Así que simplemente sigue adelante y edita el estilo y cambia el nombre aquí a 34. Desde aquí, incluso puedes agregar descripción. Entonces si tienes un equipo y estás trabajando con ellos, puedes decirles a qué se debe aplicar este teléfono. Cosas como esa quiero ir aquí a la pestaña, son Asegúrate de que no tengas ninguna de estas así, pero la parte superior son en sí misma. No se adelantó y cambió esto a Body Carla. 17. Negrita. Arreglar esto y este centro. Hagamos lo mismo, este turno sosteniendo aquí y luego haciendo lo mismo. Adelante y centremos mi año de texto. Bajarlo. Por lo que parece que está a solo 15 píxeles de abajo. Entonces mantengamos que 15 píxeles de abajo y asegurémonos de que eso y esto también estén centrados. Y parece que lo es. No es necesario cambiar la barra de estado porque esas van a ser las fuentes por defecto ahí . Uh, no vamos a tener ningún control sobre esto, así que volvamos a nuestros simulacros. Por lo que los tableros de navegación y tabuladores aquí ahora tienen la fuente correcta. Excepto este botón aquí, Así que cambiemos eso a Cuerpo Carlos 17. negrita se ve bien. Entonces se va a aquí. Seleccionemos estilo y hagamos este estilo aquí. O hagamos realmente los 22 puntos. Uno, así Así que esta página se ve bien. Ahora sigamos por aquí. De hecho, sigamos adelante y hagamos el correo electrónico. Justo éste de aquí. No así no es audaz. Y luego elige éste como el Carlos 17. Bold Rocky, Hagámoslo o en realidad, ni siquiera podemos hacer rou cabeza grande o 22. Sigamos adelante y solo asegurémonos de que esos centrados en el aire y cambiaron la dirección aquí, también. Cuerpo Carlos 17. Audaz cambio estos alineados a centros verticales. Y sólo voy a repetir el mismo proceso para los otros dos botones también. Siéntete libre de hacer una pausa aquí y hacer eso en tus diseños. Muy bien, entonces con los aplicados, creo que casi todo aquí tiene esa nueva fuente, uh, la única excepción son estos dos campos aquí. Así que vamos a saltar aquí y asegurarnos de que esos también están usando textil de Carla 17 y centrar la vertical. Lo mismo aquí, está bien. Con nuestras dos nuevas fuentes aplicadas a nuestro simulacro arriba. Ya puedes ver que las cosas se ven mucho mejor ahora. Ah le tiene un sabor único. Toda la app y todo el marcado se sienten. Um Y si voy a mi página de servicios, veo parte del texto aquí parece que es demasiado grande. Al igual que, por ejemplo, el sello de fecha aquí en el estado probablemente puede ser un poco más pequeño que éste. Entonces cuando sigamos adelante y seleccionamos esto ir a componente maestro y luego para estos dos, en realidad voy a desprender el estilo y luego usar una fuente de 14. Vamos a seguir adelante y que ella realmente cambió el color de relleno también. Ah, un poco más tarde. Creo que eso se ve bien. Entonces cuando sigas adelante y creas un nuevo estilo a partir de eso y tal vez hagas este como cuerpo Carla 14 no apliques lo mismo a nuestro texto de estatus aquí. Entonces cambiemos la fuente aquí. Y cuando se aplica, el mismo relleno 585858 Está bien, así que eso se ve bien. Entonces ahora solo quiero cambiar rápidamente a mis estilos por aquí para mi esquema de color. Tengo un texano primario, un texto secundario. Entonces creo que en realidad no vamos a seguir adelante y sumergirnos en agregar aquí algunos textos primarios y color de texto secundario. Pero puedes seguir adelante y hacer eso y luego, um, desde nuestros componentes, o donde quieras agregar colores similares para los tanques de que tienes aquí, en lugar de tener uno personalizado aquí, puedes simplemente adelante y en realidad usa ah, tus estilos de color. Pero esta vez podrás usar el estilo de color para el texto. No vamos a saltar a eso aquí, pero siéntete libre de aplicar esos a tus proyectos. Ahora si vuelvo, las cosas se ven mucho más limpias aquí. Entonces, sin embargo, dondequiera que veas las cosas se ven un poco extrañas, Siéntete libre de seguir adelante y cambiar el color como lo hemos hecho. Debilitar. Puedes aplicar los mismos colores para escuchar un oleaje, um, y donde sea que veas tienes texto que no quieres que destaque tanto como el otro texto, siéntete libre de seguir adelante y aplicar múltiples estilos de color basados en su texto. Por lo que ahí lo tenemos. Ése son nuestros estilos de tipos aquí, muy útiles y fig ma y definitivamente adelante aplicarlo y ten en cuenta que tienes acceso a ella desde aquí. Siempre que solo selecciones aquí tu lienzo, deberías poder acceder a tus estilos locales tanto los estilos de color como los textiles aquí y luego Desde aquí, en realidad puedes seguir adelante y para hacerlos también. Entonces si deciden en algún momento, digamos que hagan su cabecera 30 puntos aquí, como pueden ver en mi proyecto, cambiará en todas partes. Um, claro, es posible que necesites entrar y ajustar los tamaños de algunos de los cuadros de texto aquí, pero siéntete libre de hacer retoques y aplicar esto también a tus propios proyectos. 32. Toques finales: De acuerdo, Entonces si te has estado cayendo hasta ahora, casi hemos completado nuestro primer simulacro aquí arriba. En esta lección, sólo voy a cavar y publicar las cosas un poco para luego agregar algunas de las cosas necesarias que necesitamos. Entonces, solo sigamos adelante aquí y hagamos que esos cambios siéntanse libres de seguir adelante. También te animo a que pases por tu panel de capas aquí. Ah, y realmente se asegura de que el nombre de todo dentro de tus capas el agrupamiento y todo eso es correcto en él Tiene sentido. No voy a hacer esto en esta lección porque probablemente tomaría demasiado tiempo, pero definitivamente siéntete libre de hacerlo en. Siempre animo a que te mantengas organizado con tus diseños para que no solo tú sino también otras personas, tal vez personas con las que estás colaborando o seas un equipo, um pueda darle sentido a lo que está pasando con tu diseño y cada una de tus marcos. Entonces lo primero que quiero hacer aquí es en realidad seguir adelante y aplicar la barra de estado. Ah, que tenemos aquí a todas las demás páginas también. Entonces en este momento sólo lo tenemos en estas tres páginas. Entonces para hacer eso, um, sigamos adelante y empecemos primero con una página de mapa. En realidad solo sigamos adelante y copie la barra de estado de la página de solicitud porque sería muy similar en y seleccionaría su marco de mapa y hacer comando V o control V en ventanas. Adelante y bajemos un poco nuestra barra de búsqueda. Eso se ve bien. Y luego vamos a nuestra página de pago aquí para una página de pago. Simplemente podemos usar una barra de estado simple como esta. Ah, porque no tenemos nada debajo para tener que desenfocarlo. Así que adelante y sólo copia eso y pegarlo aquí. Y luego por nuestro tutorial. Página de paso aquí. Adelante y cópiala aquí. Entonces, como ves aquí, la barra de estado es demasiado oscura para esta página. Um, típicamente en páginas más oscuras, usamos una barra de estado blanca, así que dirígete a nuestro IOS. Tú yo componentes archivo aquí, Así que si vas por aquí, si aún tienes esto abierto, deberías poder encontrar la versión blanca de esa barra de estado también. Y entonces solo puedes seguir adelante y seleccionar todo aquí, y puedes seguir adelante y solo copiarlo desde aquí y pegarlo por aquí. Adelante y acaba de usar turno e iraquíes para subirlos. Y luego, por supuesto, usando la opción de comando K o control alta que en ventanas para crear eso como componente. Y vamos a seguir adelante y renombrar este estado 12 luz de barra inclinada hacia adelante y renombró esta barra de estado 12 barra de avance oscura. Entonces de esta manera, si vuelves a nuestros maquetas, solo podemos seguir adelante y simplemente elegir esto como la versión ligera del sitio. Podemos seguir adelante y copiar eso a nuestras páginas de inicio de sesión. Bueno, mueve un poco las cosas hacia abajo. Um, voy a seguir adelante y sólo mover mi guía aquí. Creo que eso es bueno. A lo mejor mover esto un poco hacia abajo, también, así como todo lo demás aquí que se ve bien. Ahora, habrías notado que usamos muchos iconos de, ah, ah, ese sitio web plano icono dot com. Entonces si no tienes la versión completa o una suscripción con icono plano, um, definitivamente se requiere que le des crédito a los autores de esos iconos. Eso ir adelante a nuestro recurso es para el proyecto aquí y luego abrir esta app conocida Start txt Y luego aquí abajo, ya verás. Ah, aquí hay algunos créditos, así que sigamos adelante y solo copiemos eso. Ah, y solo adelante y pegarlo en algún lugar de nuestro proyecto aquí. Um, ahora, por supuesto, porque no estamos, um, desarrollando esta aplicación, que es diseñarla, um bueno, solo necesito pasarle esto a quien sea desarrollando esta aplicación para asegurarse de que ponen estos iconos donde pertenece en su aplicación. Notarás que la carcasa está todo en mayúsculas aquí. Entonces, ¿por qué no vamos adelante a nuestras opciones de texto aquí, clic en los tres puntos y luego cambiamos la carcasa a solo minúsculas encendida. Podemos traer esto más bajo aquí y en otra toma para decir, icono créditos tanto que allá como ponerlo aquí para quien quiera usar el's en su proyecto. Por lo que siempre es importante hacer si estás usando iconos que requieren atribuciones. Lo último que quiero hacer aquí se acaba de mejorar Mi página de pago aquí. Parece avión ahora mismo, así que sigamos adelante y llevemos esto, pero en un poco más abajo. Um y luego solo sigue adelante y trae mi tarjeta de crédito un poco más baja también. Quiero seguir adelante e insertar tipo de descripción. Texto aquí en decir, por favor tarjeta de crédito para su cuenta. Ahora, como puedes ver, mi texto sigue y sigue, así que lo que puedes hacer es ir a la opción de texto aquí, click en tres puntos y luego seguir adelante y hacer y puedes seguir adelante. Puedo elegir altura automática o tamaño fijo. Entonces si eliges fijar ojos aquí, podemos seguir adelante y, uh, uh, traer nuestro texto aquí y redimensionarlo para que tal vez coincida con nuestro pero aquí, Así que 25 pixel desde un lado. Adelante y quitemos esto de aquí. Eso se ve bien. Vamos a seguir adelante y mover la tarjeta de crédito un poco más baja. Adelante y desprendió el estilo y cámbialo por ese cuerpo correcto. Carla 17. Y hagamos un poco de un tipo de teléfonos más ligeros aquí, y sigamos adelante y acabemos de terminar este texto aquí. Por favor, agregue una tarjeta de crédito para que su cuenta la use para su servicio de lavandería se ve bien. Yo quiero asegurarme de que esto es 3 25 y luego centro aquí se puede bajar un poco. Tenía algo de espacio para respirar a mi cosa de diseño. Eso se ve mejor. A lo mejor podemos centrar esto también. Perfecto. En algún momento. Es bueno agregar este tipo de indicaciones de descripción a tus usuarios ya sea para decirles por qué estaban cobrando esta tarjeta de crédito de pago aquí o bien decirles cuándo podría usarse esta tarjeta de crédito . Y eso concluye nuestro simulacro de diseño aquí para la aplicación móvil. Entonces si también te interesa hacer un proyecto Web o una aplicación Web diseñada bien, lo haremos en futuras secciones. Ahora quiero darte un ejercicio que hacer por ti mismo. Si acerco a mi página de solicitudes aquí, verás que tenemos nuestra tienda de lavandería elige. Aquí la idea es que se desplazan por las diferentes tiendas y encuentren a la que les gusta solicitar su servicio de lavandería de sorteo y luego presionen este botón de servicio de solicitud. Pero realmente no hay retroalimentación para ellos en este momento y están diseñados para decirles que el pedido o la solicitud aquí se ha colocado. Por lo tanto, siéntase libre de agregar un estado de finalización o algún tipo de retroalimentación a nuestro usuario. A lo mejor algún tipo de tarjeta que les diga que se ha realizado su pedido o que se haya realizado su solicitud . Um, van a ser bastante cool. Así que adelante y agrega algo para decirle a los usuarios que sus solicitudes han sido enviadas. Um, y luego una vez que hagas eso, siéntete libre de incluirme en tu proyecto o envíame un correo electrónico y estaré más que feliz de brindarte algunos comentarios para ti también. Genial. 33. ¿Qué sigue?: Está bien. Por lo que felicidades por terminar tu primer mock up móvil. Tú Yo Esto es increíble. Juntos trabajamos en un mock móvil de siete páginas completo para la aplicación de canguro limpio. Entonces, ¿qué sigue a partir de aquí? Bueno, hay un montón de maneras en las que puedes ir con el dedo o mejorar o jugar con nuestro diseño actual o explorar fig MMA, y tu diseño UX aún más. Lo primero que puedes hacer es salir por ahí, tal vez descargar tus aplicaciones favoritas y realmente inspírate de ellas. Un par de recursos más es que puedes usar en línea incluye ir a Pinterest y buscar diseño de interfaz de usuario y diseño móvil, o incluso ir al sitio web patterns dot com, que se deletrea p t tr n s dot com. Desde donde puedes navegar un montón de diferentes móviles, sabio que puedes obtener inspiración y tal vez aplicarlo a los tuyos Te he diseñado también . La segunda cosa no hizo desde aquí. En realidad es ir adelante y crear un prototipo fuera del diseño que hemos armado. Entonces, lo que un prototipo te permite hacer es ver realmente tu aplicación cobra vida y crear un prototipo interactivo para que las personas las usen realmente para los clientes. Por si se trata de inversionistas para su propia aplicación o cualquiera que sea el caso. Podrás mostrar este prototipo a los desarrolladores y la mitad en Creta. Aplicación natural a partir de esto. Y por supuesto, si quieres ampliar tus conocimientos de U. S u X probando web te diseño definitivamente es un buen siguiente paso porque te dará la ventaja de conocer tanto el diseño móvil como el web. Y esto es realmente importante porque muchos clientes y muchas obligaciones thes días requirieron tanto una versión Web como móvil. Entonces si tienes este conjunto de habilidades, definitivamente te ayudará. Ahora voy a tener un curso estaban todos cubiertos, prototipando compartiendo e incluso una Web do que diseñé en las próximas semanas. Así que siéntase libre de revisar esos una vez su vida y, como siempre, podría notar Hola, inteligente en gino dot com. Cosas como esta siéntete libre de compartir cualquier diseño que tengas o cualquier pregunta que puedas tener, y estaré encantado de responderlas con That dicho, estoy deseando verte en un futuro. Por supuesto,