Clase magistral de Figma: diseña y haz el prototipo de tu primera aplicación móvil

1. Introducción a la clase dominadora de Figma: Bienvenido a mi curso. Tierra más dura fig marvit. En tan solo 14 días en las escuelas, vas a aprender todas las diferentes herramientas y técnicas y consejos sobre cómo marco de alambre del dedo del pie que diseñar y luego prototipear tu idea de APP desde cero. Voy a compartir con ustedes todo el caso Sharper de uso común para que puedan acelerar su flujo de trabajo dentro de la figura. De igual manera, vamos a compartir con ustedes todas las diferentes herramientas de prototipado y consejos y técnicas sobre cómo utilizar diferentes transiciones afecta diferentes a emisiones para que pueda convertir sus diseños estáticos y diseños aburridos en algo impresionante. Vamos a diseñar juntos receta de alimentos han llamado gérmenes. Vamos a diseñar su pantalla de inicio de sesión X filtros de búsqueda. Son diferentes animaciones de menú ahí donde el menú va a pasar de un esquema a otro y cómo eres inteligente. E hizo cómo usar efectos excesivamente. Cómo usar todo este tipo de cosas Dentro de Sigma. Hay muchas tareas a lo largo de la escuela, así que me voy de pie. Mantén un ojo en tu progreso, y te voy a dar retroalimentación oportuna sobre cómo puedes mejorar tus acentuas habilidades de diseño . Creo que cualquiera puede aprender cualquier herramienta de diseño en tan solo dos semanas, eso es suficiente. Así que empecemos y sumérjase en el producto ahora. 2. Descarga e instalar Figma en Win y Mac: en este video, vamos a ir de cabeza a figment dot com, y vamos a descargar figura MMA, y vamos a ver qué son diferentes características y cómo podemos usarlas. ¿ Cuál es el modelo de precios de la Fig? Mamá, ¿qué es la versión gratuita da y cuál es la versión pagada? Diferencias. Entonces, empecemos. No. En primer lugar vas a ir a figure dot com y esta es su página web, y puedes ver aquí dicen contienda Igman gratis. Entonces tienes que crear tu cuenta por aquí, así que vas a ir a registrarte y crear tu cuenta. Este es el primer paso. Ahora el segundo paso es, una vez que hayas creado tu cuenta, vas a ir a descargas sigma dot com slash descargas. Como se puede ir de receso recurso rol es e ir a descargas y aquí te vas a descargar aplicación de escritorio. Porque si estás en un sistema operativo Mac OS o Mac, vas a descargar esta aplicación de escritorio, y si estás en Windows, vas a descargar la aplicación de escritorio para Windows. Ahora bien, si intentas usar tu fig MMA en tu navegador de lo que vas a utilizar este mapa. Quest, instalador de Windows. La mayoría de la gente creo que 99.9% van a descargar estos sí. Por lo que no necesitamos preocuparnos por esto. Instaladores de Fort solo tienes que descargar la aplicación de escritorio e instalarla en tu PC o Mac. Ahora aquí, les voy a mostrar cuál es el modelo de precios. ¿ Y cuáles son las características que se encuentran en diferentes modelos de precios para este modelo de fig? Primero es gratis para que puedas crear después de dos editores. ¿ Te referías sólo a que dos personas pueden editar un solo proyecto? Puedes tener un equipo fuera a diseñadores y tres proyectos, y puedes crear tres proyectos. Máximo de tres proyectos, historial de versiones de 30 días. Entonces este remolque esto realmente guarda tus, um, um, versiones de diseño. Entonces, cualesquiera que sean los cambios que estés haciendo a un archivo de diseño, se van a guardar por solo 30 días y se van a guardar unos dólares ilimitados. Puedes utilizar nuestra carga, cualquier archivo o cualquier tamaño fuera de archivo. Eso no es un problema. Visores libres ilimitados para que puedas compartir tus proyectos con personas ilimitadas que puedan ver tu proyecto. Ahora puedes ver aquí tenemos profesional y organización. Ahora, lo principal que vamos a estar buscando estamos aquí es la historia de versiones ilimitada. Esto es lo primero, y segundo es invitar sólo a proyectos privados. Entonces, por ejemplo, si son empresas o emprendimiento es que quieren trabajar en solo proyectos privados, pueden crear invitaciones solo pueden enviar, invitar solo invitaciones privadas, dedo diferentes miembros, bibliotecas de equipo compartibles Para que puedas diseñar tus bibliotecas de diseño y compartirlas con en tu equipo. Esa es otra característica de la profesión. Entonces, um, estas son las diferencias. Entonces si eres una organización muy grande, puedes optar por esta. Ahora bien, ¿cuáles son las diferentes características? ¿ Por qué estamos pensando que el estigma es lo próximo grande? No. El motivo es que lo primero es que se trata de una plataforma cruzada. Puedes usar ese diseño incluso en tu navegador. Entonces esto es lo primero Siempre que miras una herramienta de diseño, tienes que ver si es que se puede usar en cualquier lugar de cualquier plataforma. Eso es un plus. Punto segundo es que hay muchas herramientas fuera de las que puedo pensar que son herramientas de próxima generación para diseñadores. Hay un montón de cosas que puedes hacer mucho fuera de las características, pero en este robó horas por completo, diseños responsivos. Entonces tenemos enchufes. Ya puedes ver puedes descargar diferentes enchufes y ampliar la funcionalidad fuera de Sigma que puedes ver por aquí. Aquí no tenemos chapoteo, por lo que puedes descargar cualquier imagen y su imagen de stock que es gratis. De igual manera, tenemos esto, cuantifico, y puedes usar cualquier ícono diferente como icono de diseño de materiales iconos de Scougall. Cuatro iconos impresionantes que son muy populares. Entonces estas son las características de Sigma, y así es como vas a ir por aquí. Date de alta y baja carga fig, aplicación de escritorio MMA y vamos a empezar en la siguiente lección. Entonces pasemos a la siguiente lección. 3. Nueva interfaz Figma 2022: En este video, vamos a ver a Figma, nueva interfaz porque la antigua fue hace dos años. Entonces ahora este es el nuevo. Así que vamos a sumergirnos en la interfaz de sigmas. Vale, así que una vez que inicies sesión en Figma, vas a ver vas a ver que esta va a ser la interfaz, aunque no verás estos son top, estos son los archivos que he abierto. Por lo que estos no van a estar ahí. Si lo estás usando por primera vez. A la derecha, habrá un perfil. Por lo que si hace clic aquí, se puede ver este es mi correo electrónico. Además, puedes ir al perfil de comunidad I configuración del plugin de perfil interno. Entonces estos son los ajustes. Para que puedas ver por aquí, puedes cambiar tu nombre, correo electrónico, contraseña, otras cosas desde aquí. Y también puedes ir al perfil de comunidad desde aquí. Entonces este es mi manejador de comunidad como destinatario y puedes cambiarlo si quieres. Estos son los plugins que has instalado. Puede hacer clic aquí y desinstalar o mostrar detalles desde aquí. Además, puedes a plug-ins desde aquí. Entonces, sea lo que sea que haya instalado, que va a mejorar la capacidad de Figma, esto va a ser por aquí. Para que puedas ver que tengo todos estos plugins. Entonces estos son demasiados plugins de todos maneras. Entonces esta va a ser tu cuenta. El perfil de la comunidad es necesario porque vas a ir a la comunidad para descargar muchas cosas diferentes. Para que puedan ver ahora me he cambiado a mis perfiles de comunidad. Entonces aquí se puede ver que dice comunidad. Entonces si quieres volver a tu perfil principal, tienes que hacer click aquí, cambiar a la esencia o sea cual sea tu nombre en tu Figma como perfil, volverás a la interfaz. De acuerdo, así que empecemos con vistos recientes. Visto recientemente. Entonces cada vez que empieces va a estar por aquí. Por lo que tenemos tres botones. Anteriormente, los botones, pero no muy buenos diseñados. Yo diría yo. Esto es realmente fácil. Nuevo archivo de diseño. Haga clic aquí. Nuevo archivo de gemas de higo, que es para diagramas de pizarra blanca y colaborando diferentes bocetos o ideas. Esta es otra herramienta de Figma. Entonces este es su expediente. Si quieres importar archivo desde boceto figma o cualquier imagen, puedes hacer click aquí y puedes hacer click sobre el archivo fig. Veamos si tengo algo en descargas. De acuerdo, para que puedas ver que tengo este archivo de higo de punto también son archivos de boceto oscuro, por lo que puedes importar o ambos de estos. Simplemente haga clic en el archivo fig y ábralo así. Y tomará algún tiempo importarse porque es una herramienta en línea. Por lo que va a mostrar que se puede ver hecho. Y aquí tengo este expediente por aquí. Voy a hacer doble clic en él. Para abrir este archivo. Se puede ver que es básicamente en Clay maqueta de lo alto para academia. De todos maneras. Entonces volvamos a nuestra interfaz principal, que va a ser esta casa. Y nosotros tenemos, ya saben que este es nuevo archivo. Este es el archivo de gema de configuración. Entonces estaremos creando en su mayoría estos nuevos archivos de diseño o tal vez importando algunos archivos. De acuerdo, así que aquí abajo tenemos todos los expedientes recientes en los que he trabajado o he abierto. Para que puedas ver que hay algunos sistemas de diseño, formas vectoriales dibujadas a mano, formas, muchas cosas. Y si votas por eliminar cualquier archivo de aquí, puedes igual, vamos a hacer click aquí y hacer clic derecho y eliminar de reciente. Puede seleccionar varios archivos. Por ejemplo, vamos, vamos, vamos, vamos a seleccionar varios archivos como yo tengo éste, así que soy, estoy presionando y manteniendo pulsada la tecla Mayús, éste y éste. Por lo que he seleccionado los tres, eliminar tres ítems de recientes. Entonces lo voy a quitar así porque estas son muchas de mis asignaciones estudiantiles. Por lo que siguen presentando. De acuerdo, así que hemos cubierto esta área. Filtrar por todos los archivos, archivos de diseño, fig archivos Gem son prototipos. Normalmente tenemos todos los expedientes. Entonces tenemos esta lista de conmutadores de visor de archivos con iconos pequeños si te gustó esto. Porque te va a mostrar cuánto tiempo hace que creaste o abres este archivo. Se pueden ver algunos de los archivos que he abierto como hace dos meses. Y esta va a ser tu vista de cuadrícula. Por lo que se trata de dos puntos de vista para sus archivos recientes. También tenemos plantillas de mermelada de higo por aquí o diagrama de arquitectura de información , todos estos diagramas, si quieres usarlas, puedes hacer click en éste y simplemente empezar a construir lo que tú quiero. De acuerdo, entonces tenemos estos perfiles de comunidad. Entonces si has ido a la comunidad, puedes descargar iconos, wireframes, sistemas de diseño, todas las cosas gratuitas, plugins todo. Por lo que esta es una característica muy agradable de la nueva característica de las brujas Figma. Puedes ir a buscar cualquier plugins, tal vez. Digamos talla, digamos talla, y ver si tenemos evento C, íconos, tamaños de carreras. Entonces estos son todos plugins diferentes. Entonces aquí tenemos diferentes creadores que en realidad están creando esos plugins. Estos son plugins y además si vas a Archivos, puedes ver que tenemos diferentes archivos que tienen esta pantalla dice por ejemplo, puedes ver tamaños de pantalla iOS 14. Entonces la tabla periódica del iPhone. Entonces estos son todos diferentes tamaños de pantalla. Para que puedas descargar diferentes archivos si quieres descargar. Por ejemplo, si quiero descargar este archivo, este es tamaño A3, A4, A5 para diseñar. Puedes hacer click en este duplicado y se va a duplicar en tu Figma tiene interfaz. Aquí, lo tenemos. De acuerdo, así que volvamos a casa y estarás en la comunidad igual. Puedes hacer click en me gusta o amar esto, lo que sea. Y también puedes acercar, alejar el zoom. Puedes ir a pantalla completa y ver qué otros, otras cosas han creado a este autor. Volvamos. Volvamos por aquí. Puedes hacer click en wireframes y verás muchos wireframes por aquí, plugins, archivos, todo. Para que puedas ver por aquí así. Realmente me encantó este. Entonces voy a replicar éste aquí. Me encanta. De acuerdo, así que esto se trata de comunidades. Así que volvamos a cambiar a mi perfil principal. De acuerdo, así que aquí lo tenemos. Por lo que hemos discutido reciente y de comunidad. También puedes configurar tus archivos desde aquí. Mira, tenemos mi primera clase de figma de diseño o Figma. Se trata de un proyecto. Se puede ver qué aquí. Estos son archivos y estos son de archivos comunitarios. Comunidad. Vale, entonces así es como te va a mostrar una búsqueda, muy avanzada, muy bonita búsqueda. Puedes buscar temas de archivos o personas, incluso personas. Así que seleccionemos a Chris, lo tenemos. Turno a una gente. De acuerdo, así que tengo que entrar a ver. Entonces este es uno de mis compañeros de trabajo. Voy a esconder el e-mail por aquí. Entonces esta es la persona que está trabajando conmigo en este momento es desarrollador. De acuerdo, entonces tenemos barra de búsqueda cubierta. Tenemos este perfil principal cambiar de comunidad a espalda. Hemos cubierto este apartado a la derecha. Esta va a ser tus actualizaciones. Si tienes algunas notificaciones. Por lo que estas van a ser tus notificaciones. Entonces tenemos borradores. Los borradores son en realidad proyectos. Así que en realidad eres proyecto y todo. Se crea una edición, se crea un nuevo archivo. Siempre que se va a crear un nuevo archivo, va a estar en un borrador. Por lo que una vez que haga clic en esto, se puede ver por aquí. Entonces presionemos E para tablero de arte y hagamos clic en éste. De acuerdo, para que puedan ver una vez que creo cualquier cosa, así que va a estar en los borradores. Entonces en la parte superior tenemos la jerarquía. Borradores es el proyecto. Este es el nombre del archivo. Por lo que si hace clic aquí, puede editar el nombre del archivo, mi archivo Figma. ¿ De acuerdo? Si quieres moverlo a algún otro lugar, puedes hacer click sobre esta flecha y podrás ver pasar a proyectos. Por lo que tengo diferentes proyectos como estos. Estamos aquí en la app foodie de clase Figma. Puedo dar click en eso y puedo mover esto por ahí. Además, hay pocas opciones más renombradas lead, favorito este archivo. Por lo que favoreció este archivo significa que si hago click en este favorito, este archivo, se va a mostrar por aquí. Se pueden ver fuegos favoritos. Entonces estos son mi archivo favorito. Entonces si quiero abrir algún archivo favorito, puedo hacerlo fácilmente. Incluso si cierro, es éste. ¿ De acuerdo? Por lo que si quieres cambiar el fondo, haz click en el exterior y tenemos este fondo, puedes cambiarlo a lo que quieras. Entonces tenemos a la izquierda tenemos se pueden ver páginas. Si tienes que hacer click sobre esto para ver las páginas, puedes añadir más páginas aquí. Antes de entrar en eso, estudiemos la jerarquía de Figma. Entonces en la parte superior tenemos equipos. Entonces esto va a ser como por aquí. Por lo que aterriza XID productos compartidos. Estos son mi equipo. Entonces si lo colapso, se puede ver que esto es proyectos compartidos. Este es otro equipo. Tierra que excitado, esto es otra cosa. Por lo que si hago clic en Equipo, se puede ver que dice dos miembros por aquí. Entonces estos son los proyectos que se han creado dentro de ese equipo. Estos son los integrantes. De acuerdo, entonces estas son las personas que en realidad están viendo el acceso a esto porque estos son todos mis alumnos. Y luego tenemos ajustes por aquí. Para que puedas cambiar el nombre del equipo. Las bibliotecas de equipo habilitan el plan y la facturación, actualice su plan si lo desea. Porque algunas de las características, como el uso compartido de bibliotecas o uso compartido de activos es en realidad una característica premium. Tienes que pagar por eso. De acuerdo, así que volvamos a la jerarquía de Figma. Entonces este es mi equipo. Entonces tenemos proyectos dentro de ese equipo. Ya has visto que estos son los proyectos, esto es equipo. La clase Figma es un proyecto foodie app natural. Estos son todos mis proyectos de los que tenemos archivos dentro de esos proyectos. Entonces si abro algún proyecto, abramos, por ejemplo, como tenemos esto. Por lo que tenemos estos borradores, que es proyecto, y luego tenemos un expediente dentro de él. Entonces este es en realidad mi expediente. Puedes tener esto. Estos son en realidad archivo, este es el nombre del archivo, mi archivo HTML de fosfato, y luego estas son las páginas dentro de él. Entonces veamos, tenemos páginas. Entonces archivos y archivo dentro de esos archivos tenemos páginas. Podemos tener diez páginas, 20 páginas, cuántas páginas, lo que quieras. Entonces tenemos múltiples mesas de trabajo dentro de una sola página. Así que volvamos por aquí. Por lo que tenemos esta página. Vamos a alejar el zoom. Entonces este es un tablero de arte. Se trata de un tablero de arte. Y si quiero crear otro tablero de arte, haz click en una Y voy a tener una pizarra de arte de iPhone. Nuevamente, presiona a en tu teclado, iPhone SE. Y de nuevo a, vamos a usar alguna tableta o aquí 11 Pro. Como se puede ver por aquí, estos son todos mis tableros de arte en la parte inferior. Entonces, o se puede decir marcos. Entonces estos son mis diferentes tableros o marcos de arte. Puedo tener tal vez 50 o 60 en cada página. Entonces como en este momento, he seleccionado esta página. Si voy a la segunda página, que no es nada por aquí. Entonces este es el equipo de Figma es jerarquía. Entonces tenemos proyectos y tenemos archivos. Entonces tenemos páginas, múltiples páginas. Y luego tenemos una gran cantidad de marcos y tableros de arte. Por lo que tenemos equipo único, podemos tener dos o tres equipos también. Por lo que normalmente tenemos uno o dos equipos, equipo MAX de lo que tenemos múltiples proyectos dentro de ese equipo. Como puedes ver, te he mostrado por aquí. Por lo que este equipo tiene 12345 proyectos. Este tiene un proyecto. Entonces dentro de ese proyecto, si abro este proyecto, mi vaso, se puede ver que tenemos múltiples archivos. He dejado 1234567891011 archivos en este proyecto de clase Figma. Si abrimos este proyecto de clase Figma, para que puedas ver tenemos varios archivos por aquí. Entonces tenemos como, vamos a la ListView. Tenemos como diez proyectos diferentes, por lo que diez archivos diferentes por aquí. Este es un proyecto que he seleccionado. Estos son el expediente. Entonces si abro algún archivo, seleccionemos este archivo. Tomará algún tiempo cargarse. De acuerdo, así que aquí tenemos el expediente. Esta es la página, una sola página dentro de ella. Y luego tenemos el tablero de arte o el tablero arte único dentro de ese archivo. Entonces si hago clic en esta sección vacía por aquí, puedo ver el nombre de este proyecto y luego el nombre del archivo por aquí. Así que volvamos. Y si quieres crear un equipo, puedes crear un equipo. Se puede vapor. Vamos a crear un equipo y podrás agregar a tus colaboradores después de eso. Y si intentas continuar, te va a pedir el pago porque es una característica premium. Para que puedas tener un solo equipo creo que para la versión normal skip por ahora. Para que puedas ver que me muestra elegir Profesional. 12 dólares por litro al mes. Mermelada de higo es de $1.3 por litro al mes. Creo que es anual. Si es mensual, es alrededor de $15. Entonces vamos, intentemos cerrar esto y volver a nuestro tema. Oh, whoops. Por lo que ha creado un equipo en realidad. Así que intentemos eliminarlo ahora mismo que puedas cambiar el icono, cualquier cosa que quieras. Vamos a los equipos de UX. Por lo que tengo que escribir el nombre para eliminar este equipo. ¿ De acuerdo? De acuerdo, así que veamos si me he perdido algo. De acuerdo, así que dentro de esta área por aquí, así que si tenemos panel izquierdo que es capas, activos y páginas, y luego tenemos las mesas de trabajo por aquí en la parte inferior dentro de esa página. Y se puede ver que dice páginas y esto es tablero de arte. A la derecha. Ya pueden ver que tengo esto por aquí. Inicia conversación si quieres colaborar con alguien, compártelo, si quieres compartir este enlace con alguien, copia enlace y pega eso. O puedes enviar un correo electrónico, teclear el correo electrónico aquí, múltiples correos electrónicos cam comas separadas. Si quieres compartir con múltiples personas, normalmente copio el enlace y lo comparto con quien quiera. De acuerdo, entonces este es el presente o prototipo. Esto en realidad faltan fuentes. Entonces si te falta alguna fuente o tipografía es te va a mostrar aquí root y esto falta en este archivo. Entonces tenemos este nivel de zoom, acercar, alejar un control del 100 por ciento 0. Y luego tenemos vista previa de píxeles, una cuadrícula de píxeles, diferentes opciones de cuadrícula de diseño. Y estos están en la cima. Contamos con diferentes herramientas. Se puede ver por aquí, este es el menú. Por aquí. En el Mac, el menú está en la parte superior, por aquí, en la parte superior de aquí. Y en Windows, se coloca por aquí así. Nuevamente, objetas texto vectorial, arreglas plugins. Y si voy a plugins, puedes ver en la parte inferior he administrado plugins. Así plugins administrados, puedo desinstalar o instalar diferentes nuevos plug-ins o lo que quieras, por qué puedes gestionarlo dentro de ahí. Estas son mis bibliotecas. Estos son en realidad los estilos que he compartido con diferentes miembros del equipo son archivos de diseño diseñados. Estos son en realidad, se puede decir estilos de color, textiles, y vamos a estudiar mucho sobre eso. Ok, Así que en la parte superior se puede ver estos son todos mis archivos abiertos. Entonces si quiero cerrar algunos de los archivos de jerarquía fitbit, así que vamos a cerrar éste. Icono X. estos son los que estoy trabajando en este momento. Entonces no te voy a mostrar esos porque tienen firmar una NDA de todos modos. Entonces aquí tenemos algunos, algún archivo. Se pueden ver que estas son páginas diferentes. Entonces si hago clic en cualquier página, tengo diferentes capas. Activos por aquí. Las capas están por aquí. Por lo que se puede ver estos son en realidad marcos. Este es el icono del marco. Entonces estas, estas son imágenes diferentes. Los iconos son diferentes. Así que siempre que hagas clic en cualquier página, te va a mostrar todos los tableros de arte o imágenes o capas dentro de eso. Volvamos a casa. Y creo que eso es todo. Esto es más que suficiente para que comprendas la nueva interfaz de Figma. Espero que hayan disfrutado esta lección. Asegúrate de seguir aprendiendo y nos encontraremos con otro video hasta entonces, cuídate. Adiós adiós. 4. Diferentes paneles y lo que hacen en la Figma: en esta lección. Nos vamos a sumergir profundamente en mawr sobre la interfaz fuera de Sigma y qué podemos hacer Estamos aquí Diferentes paneles, diferentes capas asevera marcos cosas así. Entonces empecemos ya Ya puedes ver que creé este equipo. Este es mi equipo que tú. Emocionante Se puede ver por aquí. Si quieres crear un nuevo proyecto, puedes dar click aquí Nuevo proyecto y voy a llamarlo Food De Y estos son diferentes ajustes de compartir. Todos los que aterrizan te emocionan pueden dirigirse. Por ejemplo, si invito a un miembro más del equipo, pueden adictar este archivo. Así que voy a dar clic en un proyecto de creación muerta para que puedas ver tu cabello ya he creado Puedes agregar la descripción por aquí Yams, app para nosotros, cosas así. Por lo que ahora puedes ver mi expediente. Entonces si volvemos a fig hma archivos recientes, puedes ver esta es mi app Así que voy con el dedo doble clic y abrirla y tomará algún tiempo porque está almacenada en la nube. Entonces aquí está mi yum zap Se puede ver por aquí y por la derecha. Ya puedes ver, nunca tenemos que abrir un archivo. Hemos diseñado prototipo y podría Así que estas son las tres cosas tres paneles que vas a ver en nuestro cabello de este lado, tenemos capas y activos. Por lo que las capas son básicamente nuestros todos estos marcos. Y dentro de estos marcos, tenemos diferentes objetos, para que puedas verlo. Estamos aquí también. Ya puedes ver que estamos aquí. Contamos con páginas. Por lo que dentro de las páginas, tenemos marcos de alambre, ñames, app y chico de estilo en componentes. Entonces estas son las tres perras que he creado dentro de este proyecto. Y puedes ver dentro de este archivo y puedes agregar nuevas páginas si quieres. Puedes agregar nueva perra. Y, um, vamos a eliminar este clic derecho eliminar. Entonces esto es ñame son estos son el marco de alambre. Este es el componente guía de estilo. Entonces estas son tres páginas, entonces tenemos estos activos. Por lo que los activos son básicamente de un componente. Por lo que si creas un componente, puedes usarlos una y otra vez. Vamos a recuperar componentes en las próximas lecciones para que puedas ver en este momento tenemos muchos componentes diferentes. Entonces si un componente de arrastre puedo arrastrarlo fácilmente y soltarlo en cualquier lugar dentro de mi proyecto. De igual manera, esto te muestra que haces click en esta flecha, te va a volver a mostrar páginas y a veces está oculta. Entonces si tienes algo como esto y no encuentras ¿dónde están mis bebés? Te vas a dar click aquí. Entonces tenemos a la derecha. Tenemos algunos estilos locales thes air. Los textiles que he creado. Estos son pocos estilos de color que he creado. Puedes usarlos una y otra vez. Y este es el panel de la corte. Esto es prototipo y este es diseño. Entonces en prototipo, ibas a prototipo de tu app como esta. ¿ Se puede ver qué? Aquí Están mucho fuera de diferentes flujos que va a fluir de uno a otro. También podemos, si haces clic fuera de aquí, puedes ver que tenemos opciones de dispositivos. Puedes hacer click en iPhone pro, uh, Max iPhone 11. Todos estos diferentes dispositivos en los que quieras mostrar tu prototipo. ¿ Y cuál es la moral? ¿ Vas a usar el color de fondo para ello? Um, marco inicial. Vamos a empezar por la tala. Entonces estas son las opciones de las que tenemos en el diseño. Contamos con estilos locales, color de fondo. Ya hemos discutido eso. Estas son cosas diferentes Te vas a meter en la corte. Gord en realidad está mostrando cuál es el cordón en este artículo? Por lo que si hacemos click por aquí, puede ver esto es una escolta CS para webs, Web's R us y derecho para Dispositivos Apple. Se trata de Android Court para este objeto que he seleccionado a la izquierda. Se puede ver este es el ícono. Este ícono de este 'll va a representar marcos. Entonces cada vez que tengas marcos, vas a ver este ícono por aquí y todo lo que dentro de él por aquí. Entonces esto es en realidad ah componentes. Por lo que tiene esta forma de diamante. Por lo que todas las formas de diamante son componentes de lo que tenemos esto Estos son grupos diferentes. Ya puedes ver que estamos aquí. Puedes abrirlos. También puede abrir estos componentes. Vamos a volver a los componentes más adelante. Pero así es como esto es una forma para ejemplos. Todos estos iconos que muestran que este es este tipo de capa fuera como se puede ver la configuración de perfiles es un texto. Leah. Por lo que tiene para que estuvieras aquí. Por lo que estos son ajustes diferentes. Por ejemplo, al igual que este logotipo. Es un factor. Por lo que tiene un logo vectorial por aquí. Eso todas estas cosas diferentes. Entonces si hacemos click en imagen, vamos a ver, aquí está el ícono de la imagen para que puedas ver esta es tu imagen puedes encontrar instantáneamente dónde está tu archivo. Tus imágenes, tu texto es para que las reconozcas por estos pequeños iconos de la izquierda. Ahora bien, si quieres mover este proyecto hacia otro proyecto, por ejemplo, ahora mismo es en empleos. Yo quiero moverlo. Vas a dar clic aquí, pasar al proyecto, y yo lo voy a mover a la app foodie. Entonces ahora se puede ver que se ha movido a la app foodie y ahora es así digamos foodie ab slash pulgares hacia arriba. Está bien. De igual manera, puedes mostrar el historial de versiones ¿Qué wasa historial de versiones? Cómo edité todo este fuego se puede ver por aquí. Y estos son este es un historial de versiones fuera de mis 30 días anteriores puedo cambiar de nuevo a cualquiera . Entonces si hago clic aquí, se va a suiza dedo del pie trasero en el último. Entonces vamos a no probarlo. También puede ocultar el historial de versiones, estilos publicados y exportación de componentes. Estos diseños duplican este proyecto. Renombrar o eliminar, en su mayoría tenemos que renombrar. Por lo que pinchas por aquí. Uh, puedo traerlo a ñames. Recetas, receta Estar en algo así. veas así es como vas a renombrar. De acuerdo, así que eso es un poco apagado. La familiaridad con esto interfiere. Pasemos a la siguiente lección donde vamos a sumergirnos en estas herramientas y veamos cuáles son estas herramientas y cómo podemos usarlas. Entonces pasemos a la siguiente lección. 5. Uso de cuadros y Frames de trabajo: Ahora en esta nuestra primera lección, vamos del dedo del pie, creamos un nuevo marco o tablero de arte, y lo vamos a manipular y ver qué podemos hacer con él. Entonces vamos a buscar a Stockett ahora. Voy a pasar a mi proyecto de práctica y voy a crear un nuevo archivo y va a ser sin título por profanado, así que le llevará algún tiempo a Lord o aquí así. Entonces ahora tenemos este lienzo en blanco. Si quieres cambiar el color de fondo, usemos como este, y puedes ver aquí tenemos capas, activos y páginas. Si puedes ver por el expediente su Hizb edad uno. Y si hacemos clic aquí me va a mostrar más páginas para que puedan agregar más perras por aquí así. Ahora mismo estoy en la página uno, y lo primero que voy a hacer es ir flojo del dedo del pie. Este marco no haga clic aquí porque tenemos rebanada por aquí, otra herramienta oculta. Entonces haz click en marco y podrás dibujar tu propio marco, por ejemplo, como éste. Entonces esto en realidad son los vencedores 3 42 por 5 80 Y si volvemos a hacer clic en marco o pulsamos la tecla F en el teclado, nos va a mostrar teléfono diferentes opciones o diseñar diferentes tamaños y marcos y tableros de arte para iPhone. Entonces tenemos. Y justo aquí, por ejemplo, si hacemos clic en él, este es el tamaño estándar de Android. Y si queremos crear más son más pantallas. Por aquí, vamos al dedo de tu marco y vamos a crear un marco de tablet por aquí. Tan tablet muchos para que puedas ver esta diferencia entre los tamaños y eso se despejó otra y otra vez, F y yo vamos a ir a tope de gas, y voy a diseñar un sitio web. Entonces voy a dar clic aquí en un escritorio. Entonces así es como puedes crear múltiples marcos diferentes o tableros de arte. Se puede hacer doble clic aquí en la parte superior, y va a mostrar que estamos aquí, por ejemplo, ese stop art board. Puedes renombrarlos o puedes, um, doméstica O aquí, uh, esto es Android. Nuestro señor. Asegúrate de cambiarles siempre el nombre, porque a veces hay múltiples o muchos tableros de arte, y te olvidas de lo que waas el tablero de arte en el que estabas trabajando en lo que hace. Entonces me desnudo son libro. Por lo que puedes ver aquí tenemos tres tableros de arte diferentes y si hacemos click aquí, puedes ver que tenemos diferentes opciones a la derecha. Este es nuestro dab de diseño. Estamos en lo correcto conociendo pestaña diseñada. Y a la izquierda tenemos páginas y dentro de la página uno, tenemos tres libros de arte. Entonces si hacemos click en lugar a esto está vacío, no tenemos nada por aquí en. Si hacemos clic fuera de alguien, cualquier cosa, este es nuestro archivo. Entonces vamos a renombrarlo dedo del pie Llamémoslo marcos y libros de arte. Entonces así es como puedes crear diferentes obras de arte. Ahora bien, si quieres crear algo para lo cual no está listado en los marcos de aquí, lo que no aparece en la lista. Por ejemplo, tenemos este reloj de manzana. Queremos crear algo para el reloj Motorola G o algo así. Por lo que vamos a ir cabeza a este material de diseño de material o estás re fuentes dispositivos slash Ahora, por aquí, puedes ver que tenemos plataformas. Tenemos relaciones de aspecto de dimensión de pantalla se pueden ocultar en los DP's. Entonces esto es lo que vas a usar. Entonces, uh, en la plataforma, si hacemos clic aquí, se puede ver esto son ventanas. Esta es X on. Este es Mac. Este es Apple Watch. Se puede ver u oír 38. 42 mujeres. Entonces si vamos dedo del pie aquí para que puedas ver este es el reloj LG G. Entonces es 1 87 por 1 97 y luego tenemos 2 13 por 2 30 Así que si yo estoy diseñando para algo así para un reloj que no se suscite por aquí, por ejemplo, como puedes ver Moto 3 60 puedo usar estas tallas a 41 por 2 44 Así que voy a retrocede y voy a patear por aquí. Onda set de ella a 42 por 2 44 Algo así. Por lo que waas 2 40 un mordisco de 44 a 41 por 2 44 2 41 por 2 40 pie. Por lo que puedes ver ahora este es tu tablero de arte para este reloj LD azul o reloj Motorola para que puedas usar este puntera diseño algo Así es como creas diferentes tamaños y marcos y tableros de arte para tu trabajo de diseño. Por lo que si haces click o aquí puedes ver, tenemos diferentes opciones. Este es el valor X, cuál es? Demuestra que es lo que está lejos de por aquí. Si te mueves aquí así, puedes ver que los valores X e Y están cambiando. Sabemos qué pasa. No nos preocupan los valores de acento fuera de este marco de borde de arte. Nos preocupa en su mayoría este peso y estatura. También puedes bloquear las restricciones. Por lo que ahora se va dedo del pie crecer en proporción. De acuerdo, entonces 4 50 por ejemplo, Si yo tu 600 va a ir así, va a crecer en proporción. Volvamos a la escuela. Vamos y o controla Z Así que estas son opciones para la tradición. Creo que no necesitamos leer esto de todos modos. Aún así, podemos usar estos son radio de esquina Si quieres dedo del pie usa radio de esquina. Este es el contenido del clip. Entonces lo que sea que te vayas dedo del pie tiene por aquí, por ejemplo, esto lo puedes ver ahora está recortando mi contenido. Por lo que he dibujado un rectángulo sobre esto y muestra Haftar atendido. Y si hago clic aquí y elimino esto, puedes ver que puedo ver más allá de estas tablas de arte en este momento, no es recortar mi contenido. Entonces esto se trata de contenido de clip. Esto es muy importante y creo que eso es todo. No necesitamos mucho dedo del pie al respecto. Si quieres ¿Quieres alinear estos tableros de arte? Vas a presionar turno o mantén presionada la tecla de la nave y haz clic y selecciona todas estas tablas de arte seleccionando sus nombres. Y tú, ¿ Puedes detener una línea como ésta? También puedes usar el estudio arriba que van a utilizar tener algún espacio alrededor de él. Entonces si has seleccionado más objetos puedes ver más de dos objetos puedes ver tenemos esta opción de espaciado múltiple Um, en la fig Ma, esta es una característica realmente genial. Se puede ajustar el espacio, por ejemplo. Yo quiero tener algo así como 80 píxeles de brecha entre ellos. Entonces así es como puedes tener eso. Entonces todo esto se trata de marcos y nuestro tablero, cómo puedes arreglarlos, cómo puedes manejarlos. ¿ Qué es este contenido de clip y qué hace? Creo que no lo has asegurado. Pasemos a la siguiente lección y cavemos más en el producto 6. Herramientas de diseño de uI de Figma UI: este video va a ser sobre mottos de higo. Entonces empecemos y aprendamos cuáles son las herramientas por aquí y cómo podemos usarlas. Entonces primero, vamos del dedo del pie, crear un marco. Este es nuestro tablero de arte. Entonces llamémoslo, um, marco de práctica. De acuerdo, entonces tenemos este marco, y si quieres arraigar, muévelo. Esta es tu herramienta de selección o movido todo. Puedes moverlo por aquí. Entonces lo que sea que dibuje, por ejemplo, he dibujado sec maraña por aquí. Si quiero moverlo, voy a usar este movimiento. Dicho esto es en realidad el defecto se sumará un poco más abajo aquí por aquí. Entonces si quieres escalar algo por proporción, vas a seleccionar este gay o escala Dole. Y ahora puedes ver puedes escalarlo hacia abajo o hacia arriba siempre que estés importando algunos iconos dentro de Sigma AB. Creo que prefiero usar la escala de dole porque va a mantener la proporción y no va a estropear tus iconos por aquí. Así que asegúrate de usarlo cuando vas a escalar algo en proporción como esta. Por ejemplo, imágenes o algo así, que quieres escala del dedo del pie en proporción. Ahora aquí tenemos de nuevo marco dual y rebanada a rebanar es voy a volver a rebanar una vez tenga algo por aquí. Entonces vamos a discutir primero esta forma. ¿ Tenemos rectángulo, línea, flecha, elipse, estrella mal ido y lugar imagen. Entonces empieza por rectángulo para que podamos colocar un rectángulo aquí. Basta con dar click en ese arrastre y salir por aquí. También puedes ver que tenemos radio por aquí. Entonces si quieres oh, selecciona radio de esquina puedes seleccionar arrastrado por aquí. O también puedes poner radio por aquí, por ejemplo. Yo he puesto ocho existe ahora mismo y se puede cambiar el color intercambiar el color por aquí físico. Eso es llenarlo con el color. Entonces aquí tenemos un bonito botón grande Y aquí otra vez, estas mismas todas estas son en realidad opciones. Opciones estándar en X Y posicionamiento Gran Bretaña Alta Tradición Gordon Radio. Ya puedes ver si trato de cambiarlo por aquí te va a cambiar la cabeza. También puedes arrastrar así para cambiar el radio de esquina. Y otra vez si hacemos click aquí tenemos rincones independientes. Se puede tener diferente rincón del SIDA 20 por ejemplo, Like this o CEO como este. Y también puedes tener una opción más, que es nuestro alisado de esquina de Estados Unidos para que puedas tener alisado de esquina como este el cual has visto en mucho fuera de un mac O R us. Nuestro iPhone APS se puede ver por aquí. Esta es una buena opción. También puedes agregar efectos diferentes efectuales aquí. Si quieres agregar sombra de gota, puedes ver que tenemos diferentes efectos. Iremos alrededor de estos efectos de ictus, ictus y efectos, literal. Ahora mismo tienes que preocuparte por esto. Siente los colores que puedes ver o escuchar. Nosotros de nuevo vamos dedo del pie ir profundamente en Phil y sólido indulgente todas estas ints codiciosas. Pero ahora mismo estamos discutiendo esta herramienta de rectángulo. Entonces aquí tenemos la herramienta de ángulo de secta y, um, puedes ya te he mostrado todas las opciones que podemos tener con esto. Entonces una vez que tengamos la seg enredo Dole, vamos a asustar Y otro rectangular aquí como éste, y se superpone así. Entonces así es como se arreglan estos líderes. Para que puedas moverlos por ahí. De acuerdo, entonces cambiemos tu dedo del pie esculler algo como esto, algo así. Entonces me voy de pie algo así de todos modos, Así que ahora me voy a mover de nuevo a herramienta de corte. Entonces si quiero tener una imagen o algo en ella va a ser estamos aquí así usar la herramienta de corte, y puedo hacer click en exportar, y va a exportar Onley esta rebanada. Entonces lo que sea que haya dentro de esta rebanada, la voy a exportar, y me voy de pie. Um, vamos a guardarlo en el escritorio. Déjame mostrarte lo que significa. Escolar. Es ups. Entonces aquí hemos rebanado para que veas esto es rebanada. Entonces esto es, uh, aborto que quería aquí. Por lo que esta es la función off Slice herramienta. No es muy útil, Pero a veces en el diseño web, puedes usar algo como esto. Eliminemos esta rebanada por aquí. ¿ De acuerdo? Ahora, eliminemos estos dos. Entonces tenemos mintiendo a ti puedes arrastrar tu línea así, y puedes cambiar tu grosor del dedo del pie. Cinco. Se va al centro, dentro o fuera. Entonces estos son ajustes diferentes con nuevo centro y hagámoslo 50. Pero este intercambio su dirección y el cambio de aliento sosteniendo el desplazamiento de senos, para tenerlo en diferentes ángulos de calle como este. Entonces si quieres que sea recto en algún ángulo, vas a sujetar el dedo del pie y presiona turno así. Entonces tenemos esto y pasemos a este anuncio. Vastas golpes te da. Podemos tener diferentes esquinas redondas. Se puede ver qué pelo alrededor, tapar un hueco cuadrado, y luego tenemos acostado. Adel y luego tenemos flechas triangulares. Entonces todas estas diferentes opciones y tenemos Dash y Gap. Entonces, uh, vamos. ¿ Qué? Entonces esto es En realidad, 1er 1 es dash y segundo es gap. Entonces vamos a tener que coma. A ver si tenemos, queremos aumentar la brecha. Por lo que he usado 25 para la brecha. Se puede ver que hay mucho espacio entre estos platillos. El metal es en realidad el ángulo por aquí. Esto es articulación Ángulo Medio es en realidad ángulo muy agudo. Y si quieres tener alrededor de ángulo por aquí, entonces esta es en realidad la línea, y tiene muchas opciones diferentes. Vamos a civilidades y retrocedamos del dedo Línea simple. Está bien. Por lo que también puedes guardar este estilo y tú, estilos Congar y estilo adecuado para el trazo. Y puedes reutilizarla ahora mismo nos vamos de pie. Discutir sobre adopciones Esa línea relacionada. Dedo del pie. Entonces, Lyinto, esta es nuestra herramienta de línea. Puedes cambiar el color, lo que quieras. Por ejemplo, como este, normalmente lo uso en enlaces. Por ejemplo, si tengo un impuesto o aquí en esto es un enlace algo así. Por lo que puedes usar líneas para separadores o cualquier cosa. De igual manera, tenemos total Otra vez es una herramienta muy bonita. Y puedes ver ahora mismo si dibujas una fila en la pantalla lejana, va a ser muy pequeña. Entonces, en lugar de usar uno, puedes usar cuatro. Entonces este es un espesor. Entonces si intentas reducir el grosor, va a ser algo así. Entonces si quieres un animal más grande, puedes usar más grosor como este. Entonces creo que alrededor de cuatro o tres es bueno. Bien guapa. Te han cambiado en absoluto. En cualquier lugar que quieras volver a gustarte esto. Si quieres ir con opciones avanzadas siempre puedes ir por aquí. Triángulo Flecha Oh, están mintiendo en absoluto. Oh, no son ninguno Algo así. Es un juego yendo dedo del pie desaparecer todo alrededor ah, cuadrado tendido en absoluto en No así se puede ver se convierte a decir línea simple y no hay flecha en un extremo. Entonces esto es muy extraño para mí porque quería volver a la interestatal y ahora es una línea. Entonces vamos a crear otro Arrojo aquí así y no Sam el espesor así . Entonces este es nuestro cultivable. Entonces las opciones son casi las mismas, como esta herramienta de línea, y eso es todo. Puedes cambiar la dirección cuando quieras. Ah, este es el cultivable. Entonces vamos a ir a las elecciones de elipse del dedo del pie básicamente círculo. Entonces si quieres conseguirlo en una proporción, sostén tu turno y va a estar perfectamente alrededor así. Por lo que ahora mismo estoy sosteniendo y presionando la tecla Mayús. Entonces estos son mis labios, y puedes ver si hago clic aquí. Muestra arco para que puedas hacer click por aquí y seguir arrastrando así y puedes crear un gráfico. Ya puedes ver que estamos aquí. Gráfico o gráfico. Del mismo modo, también se puede cambiar esto para crear un gráfico un círculo, A graph. Por lo que esto es muy fácil en fig. Miley le encantó esta característica. Esto es realmente, realmente interesante. Así que vete aquí en arco y sigue moviéndote así para que puedas cambiar el inicio también. Entonces si quieres tener algo como por aquí así, puedes tener algo como esto. Están esculler así. Esta es una característica realmente genial. Y también esta relación se va dedo del pie Cambiarlo así. Estas opciones son también estamos aquí. Entonces este es el ángulo. Ángulo de inicio menos 90. Uh, esto es, uh esto también es la libertad condicional, creo, y este es el tema técnico necesario. Entonces voy a volver a algo así. Sí, y usemos 100 esquinas por aquí. Y así es como se crea un gráfico de circa muy bonito usando un taburete recién fugado. Entonces este es un taburete labial. Esto es realmente genial. Realmente poderoso. De verdad me encanta. Puedes ver por aquí puedes crear muchas cosas. Por ejemplo, como éste, ¿eh? Cualquier caliente Esta es mi tortilla. De acuerdo, entonces tenemos polígono. De nuevo un polígono va a tener esquinas diferentes. Se pueden aumentar las esquinas. 10 56 Lo que quieras, los huevos se suben ido lo que quieras apareció. Y también puedes cambiar el radio de esquina por aquí. Puedes cambiar el conteo desde aquí. Estos son realmente buenos controles. No he visto estos controles en ningún dedo del diseño. Esto es realmente genial. Sigma tiene muchas características que creo que faltan otras herramientas de diseño. A lo mejor van a tener en uno o dos años y Sigma tiene un secado Ahora, uh entonces nos hemos asustado esto se va de pie. Crea una estrella sosteniendo la tecla de turno. Se puede tener una estrella fuera. Cuatro jardineros, tres esquinas. Esta es una herramienta ninja y, uh, cinco esquinas, seis esquinas. Entonces me voy a quedar con cinco esquinas y este va a ser, creo, el ángulo de las esquinas. Entonces aumentémoslo. Entonces esta va a ser una estrella muy agradable para mis hijas. Creo que les van a encantar estas esta estrella porque tiene algunas que se pueden ver. También puedes cambiar el radio o aquí así. Entonces este es un realmente agradable ser iniciado. A mis doctores realmente les va a encantar de todos modos, así que este es en realidad el ángulo, como se puede ver donde Aquí. A esto se le llama auto. Esta es una relación. Entonces así es en realidad como puedes hacer un gran se puede ver el estilo de hecho gordo o una estrella delgada lo que quieras. No, parece una estrella de mar. Por lo que esta es una gran herramienta. Entonces esto es una estrella. Puedes crearlos. Entonces sobre una imagen de lugar, vamos a mirar la imagen de lugar en la siguiente lección porque tiene muchas opciones. Entonces pasemos a la siguiente lección para discutir, colocar, imagen y humos o sapos higos. 7. Herramienta de tipo en Figma: en este video. Vamos a hablar de herramienta de texto por aquí. Entonces solo besty o text, haz clic en este texto y puedes arrastrar algo como esto para crear un cuadro de texto Por aquí. Tokio, El párrafo. Este es un párrafo, LA, bla, bla , bla, bla, bla, bla. Por lo que se puede ver ahora se va dentro de este contenedor. De igual manera, también puedes usar algo como esto por aquí, por lo que puedes ver estas son las opciones de la derecha. Por lo que tenemos opciones de texto. Se forma tipográfica, que es Roberto. Puedes crear cambio a lo que sea que tengas en tu sistema instalado. Esto es ah, tamaño tipo. Um, así que ahora mismo no tenemos ninguna opción. Vamos a aclarar. Drew es éste. De acuerdo, así que aquí tenemos, ella era de este tamaño. De acuerdo, entonces tenemos tabla media regular. Estos son diferentes estilos fuera de este texto. Entonces tenemos auto. Esto es básicamente altura de línea. Puedo cambiarlo a 1 30 O puedo poner por ejemplo, 200% por aquí. Algo así. Entonces esta es básicamente la diferencia en entre las dos líneas, el sexo entre las dos líneas, ¿ y se puede ver qué tenían estas líneas azules? Esta es en realidad la distancia entre estas líneas azules por debajo de tu siguiente, que se anota como línea de base. Entonces tenemos espaciado entre letras. Puedes tener un 5% mejor espaciado o lo que quieras. Estamos aquí. Entonces tenemos espaciado de párrafos. Entonces si tenemos más de dos párrafos, por ejemplo, cambiémoslo. 100% de esperanzas. Vamos a cambiarlo. 100% y excusa 2%. Y tendremos otro párrafo. O aquí. ¿ Así? Sí. Aquí. Esta es otra chica. Esto va esta gorra y no, Si trato de usar esto, se va dedo del pie. Dar alguna brecha entre estos dos párrafos. Ya se detectó que tengo mama y cajón aquí. Y este va a ser el siguiente párrafo para que pueda tener más espacio dentro de dos párrafos y, uh, escapar. Y así es como va a hacerlo. Este es en realidad mi contenedor. Por lo que puedo moverme así para tener más información dentro de él. De acuerdo, entonces esto demuestra que es un tamaño fijo. Esto demuestra que es altura automática. Entonces es de nuevo sangre a este fondo de este texto por aquí. Y entonces tenemos fuera de ella. Entonces cuando hacemos clic fuera de ella, se va del dedo del pie Moverse alrededor de esto va a tener su propio veredicto. Por lo que es bueno cuando estás creando algunos botones pero en un párrafo vas a usar fijo como este. Entonces volvamos a la escuela, Kamanzi. Y ahora tenemos diferentes opciones fuera de alineación media alinear arriba Línea inferior que va a tener. Por ejemplo, si tengo algo como esto, un contenedor más grande, puedo dejar caer una línea esta puedo en medio alinearlo dentro de este contenedor. Se puede ver esta línea azul. Este es contenedor y también puedo alinearlo en la parte inferior de este contenedor Así que depende cómo no consiga tu línea. Después tenemos centro izquierda y derecha una línea fuera del texto. Entonces hay una alineación de estacas, derecha, derecha, izquierda Incentivo. Entonces esta es básicamente la alineación dentro de este contenedor y esta es la alineación fuera del texto de extrañas, diferentes configuraciones de altura de orden. Cómo así va a estar este contenedor aquí y luego tenemos unas cuantas opciones más como puedes ver donde aquí pocas opciones más son como podemos justificarlo aquí de lo que tenemos subyacente en. Entonces tenemos esto nada de lo que tenemos. Huelga a algo como esto. Párrafo en Dent. Si quieres indenture párrafo como este y el inicio del párrafo, uh, entonces tenemos diferentes casos. mayúscula. En minúscula. Este es el caso del título, y esto es lo más apretado que sé de estas puertas formas sensibles y especies de capital es espaciado. Por lo que estas son diferentes opciones que son el fuerte. Las opciones avanzadas son opciones de tipo abierto. Por lo que ahora mismo puedes ver He seleccionado este teléfono rasa y puedes ver este Tifus tiene espaciado mayúscula y formas sensibles a mayúsculas y minúsculas por lo que puedes tener estas opciones da click si quieres utilizarlas. Por ejemplo, si trato de usar el espaciado de capital por aquí, la guerra está cerca, por ejemplo, así. Así que ahora mira de cerca si trato de, uh, usar uh, este espaciado mayúsculo para que puedas ver el espaciado mayúsculo encender el espaciado Capitolio apagado. De igual manera, tenemos estos estilos numéricos de estilo. Entonces si trato de usar 123456789 para ti, algo así. Para que puedas ver podemos tener a este amigo estilos de número. Estas son de nuevo opciones diferentes, por lo que en realidad son opciones fuera de caras de tipo abierto. Se puede ver que hay opciones estilísticas estilísticas. Espaciado horizontal, denominadores de fracción astutos. Creo que no queremos usar todas estas, pero creo que debes saber que estas son las opciones disponibles estaban aquí. Entonces si eres un geek tipográfico, puedes usar estos conjuntos estilísticos u opciones por aquí. Entonces todo eso se trata de esta herramienta fiscal. Y, um, creo que entenderás lo que hace y cómo puedes cambiar tus cuatro tamaños de estilo. Diferente espaciado entre líneas. Diferente espaciado entre párrafos, cómo se va a comportar. Es altura de auto. Cosas extrañas como su alineación fiscal dentro del contenedor o la alineación de cubiertas fuera del texto en sí. Entonces todo eso se trata de capas Dex. Si tienes alguna sugerencia o alguna mejora en el curso, siempre puedes encomiar, y siempre puedes discutir conmigo. Si no entiendes nada, puedes hacerme preguntas. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección 8. Uso de la bolígrafo para hacer formas: en este video, vamos a aprender sobre la herramienta Ben de Sigma y cómo podemos crear diferentes iconos de formas o diferentes tipos de cosas usando la herramienta pluma. Entonces esto es básicamente para intentarlo así puedes presionar B y aquí tenemos el lapso y solo tienes que hacer click y arrastrar retirar líneas rectas como esta, y vamos a volver del dedo del pie el primero en tener esta forma fue nave, y lo puedes ver ahora mismo muestra que tenemos derrame cerebral. Y este es el ingenio del golpe. Por lo que esto es click en hecho. Y esta es tu forma en este momento puedes ampliarla. Se puede cambiar el grosor de su línea de espesor. También puedes agregar relleno, color, relleno. Hazlo así. De acuerdo, entonces si no tienes ningún relleno de color, puedes hacer doble clic dentro de esta forma en esta nave, como por aquí, y estamos de nuevo de nuevo en la herramienta de bolígrafo más para que puedas ver dónde hemos estado aquí. Este es en realidad Ben Tool y esto es España cubos. Entonces si haces click en el cubo del dolor y puedes hacer click por aquí, es otra vez hacer lo mismo que hicimos para llenar esta nave y Si vas a este Bendel, realidad se va a doblar el dedo del pie estas esquinas. Entonces si haces click en él, puedes ver Ahora hemos levantado esquina por aquí así. Entonces estamos aquí así por aquí, como este Comando o control z para volver atrás para que puedas ver ahora tenemos esquinas dobladas. Entonces si quieres cambiar algún rincón por aquí, puedes volver a dar click aquí. Una vez que hayas seleccionado esto y va a volver a la forma que waas. Entonces volvamos a la Herramienta span. Volvamos a la herramienta de movimiento. Entonces vamos a hacer clic en este movimiento y estamos También podemos mover este nuestro, por ejemplo, tenemos este Joffe o algo así. También podemos mover estos mangos dedo del pie tienen la forma doblada a nuestras necesidades, por ejemplo, así. Y, um si queremos movernos, hace justamente este mango, por ejemplo, quiero este mango. No quiero que este dedo manejado se mueva así para que puedas ver ahora mismo si lo movemos en esta dirección, se está moviendo. Pero si trato de moverlo en destrucción, se va a mover junto con esta segunda manija. Por lo que vas a presionar y mantener presionada la tecla de opción Archer Archer para mover esto sin mover el 2do 1 que puedes ver o escuchar así, por ejemplo. Yo quiero tener algo recto como esto puedes ver ahora de nuevo, Si queremos hacer lo mismo, puedo volver con aquí de nuevo así. Si trato de mover este mango, se va a mover. compré. Entonces así es como puedes mover estos mangos por ahí. Se puede opción opción opción de retención o son para mover el único. También puedes moverlos alrededor de todo este mango. Entonces este es un punto de anclaje para que pueda moverlo a cualquier lugar que quiera. Puedo crear cualquier tipo de factores fuera como este. Puedo quitar el trazo. Puedo agregar diferentes efectos como sombra y todo. Cualquier cosa que yo quiera. Oh, puedo cambiar su folicular. Y eso es lo malo que puedes hacer con Bendel. Entonces eliminemos todo este vector y lo que voy a hacer es por ejemplo, tengo esta nave, por ejemplo. Tengo labios. Por lo que he escuchado esta Ellipse. De acuerdo, Entonces si quiero entrar en estado de ánimo de batalla y quiero cambiar algo en esta elipse, voy a hacer doble clic en ella. Y se puede ver ahora estamos de nuevo en este ah vector amarrado. Entonces tenemos esta pluma para bajar aquí. Y si quiero agregar más puntos de anclaje por aquí, Así que si quiero donde uno por aquí, vamos a presionar escape. Y uno, estamos aquí Escape de prensa porque solo estamos agregando y adiós solo Golpea uno por aquí, Skip. Y uno por aquí y el salto. Ahora voy a ir a moverme, Tool, y los voy a mover por ahí, por ejemplo, como éste, voy a moverlo por dentro. De igual manera, este Oops. Voy a volver a moverme, Tool. Es así, así. Se puede ver lo que estoy tratando de hacer por aquí. Por lo que de esta manera, puedes crear diferentes iconos si quieres. Por ejemplo, si vuelvo a manejar, puedo crear y otros alinean por aquí. Muévete así. Esto, esto, así. Así por aquí, así. Entonces aquí vamos y pasemos de nuevo a la portería de campo. Acude a la herramienta de cubo y voy a seleccionar otro color. Y yo también voy a llenar este. Entonces una cosa más, que creo que me olvidé por aquí, si quieres tener algo curvo, por ejemplo, si tienes una herramienta de bolígrafo, puedes hacer click por aquí y no dejes tus más solo arrastra y habrás ocurrido ángulo. Entonces si quieres haber ocurrido ángulo, puedes hacer algo como esto. Por lo que siempre que quieras un ángulo de chica tarjeta, algunos pueden hacer algo como esto. Por lo que estos son los conceptos básicos de este plan para que puedas crear iconos. No recomiendo que sigas creando diferentes iconos usando el gastado todo. Es una pérdida de tiempo creo que puedes usar. Debes usar ya icono de compilación que son estándar para cualquier dispositivo estadounidense o Android. También lo están en tus sitios web. También puedes comprar iconos premium. Es una verdadera pérdida de tiempo si sigues creando iconos usando esta herramienta de lápiz. Eso ganó. Yo me fui. Yo mayormente despejé con mis alumnos. ¿ Esta es esta forma como por aquí? Este. Entonces vamos a mover esto primero vamos a construir un rectángulo como este, y tendremos esquinas redondeadas fuera de 50 así. Entonces vamos a usar nuestra herramienta de pan y crear algo que sea doble clic en ella. Entonces no tenemos mangos por aquí. Ahora, crea Pento. Se gasta herramienta, y vamos a tener que añadir un pequeño anuncio por aquí. Esperanzas ¿Qué está pasando? Mm, así. Al igual que esto. Esto. De acuerdo, así que hemos creado un anuncio por aquí. Vamos a llenarlo con el mismo color. Por lo que ahora mismo se puede ver aquí tenemos el radio de esquina establecido en 50. Entonces lo voy a usar para tener algo así. Vamos a usarla. De acuerdo, Así que vamos a dar click. Haga clic en Escape, tecla Escape de mama. Y así es como tenemos un ícono muy bonito fuera de la burbuja del habla. Se puede ver el habla, pero bueno, usemos decolor. Entonces así es como puedes crear y manipular diferentes formas y diferentes, diferentes. Se pueden crear diferentes iconos simples usando fig MMA. Creo que eso es todo. No quiero que creas un ícono muy único por aquí, pero realmente añadiría algún ejercicio donde puedas crear algo así y familiarizarte con este mental. Espero que hayan disfrutado usando esta herramienta de prohibición, y si tienen alguna pregunta, siempre pueden preguntarme, Pasemos a la siguiente lección. 9. Actualización de la herramienta de imagen de imagen de: en este video, vamos a ver cómo usar lugar, imagen, imagen, herramienta y Sigma y tal vez pocos mortales. Ahora ve por aquí y holga lugar, imagen o mando nave ke o cuidado controlado nave. Y ya puedes ver voy a seleccionar todas estas diferentes imágenes o aquí. Entonces vamos como éste. Este estoy presionando o sosteniendo Commander Control Key para tener múltiples selecciones. Parece éste, éste. Y vamos a seleccionar, um, este y voy a presionar sobre abierto para que puedas ver ahora tengo cinco imágenes y solo seguir arrastrando así donde quieras colocar algo como esto y Sigma en realidad está llenando todo por su cuenta. Realmente me encanta esta característica. Basta con seguir arrastrando y eso es todo. Entonces puedes ver así es como puedo crear en imagen colledge así. Esta es característica realmente genial Y una cosa más. Entonces así es como puedes colocar imágenes. Y si tienes algo, por ejemplo, dentro de un marco, por ejemplo, tengo unos labios, um, diferentes cada dólar de diferentes personas y por ejemplo, tengo como esto Y ahora si quiero colocar imagen. Y, uh, vamos a seleccionar cualquiera de estos otra vez. Cuatro uno, Duke 34 Muy bien. realmente, Característica realmente,realmente genial. solo puedas arrastrar y soltar todo lo que quieras. Esta es una característica realmente genial. Entonces vamos a ir otra vez colocando todo aquí así. 1234 De acuerdo, así que dejemos esta. Hagámoslo. Este registra este y enfoca en éste. Ahora bien, si haces click en esto o aquí, puedes ver a la derecha. Tenemos a Phil como imagen, y muestra 100% para que puedas reducir la opacidad por aquí. Esto es opacidad. Y si haces click aquí, puedes ver que tenemos diferentes opciones. Por ejemplo, podemos cambiar la exposición o podemos reducir la exposición. Podemos aumentar el contraste, y podemos aumentar la saturación, lo que va a realzar la temperatura de nuestros colores. Esto es, uh, temperatura cálida. Hay temperatura escolar. Esto es un poco controles fuera fotografía E. Así que si quieres dedo del pie retroceder, puedes volver atrás, y se va a dar click en esto. 0% son los ajustes normales como este. Hagámoslo un poco más grande así. Por lo que uso la tecla de turno y uso a este adulto para expandirla. De acuerdo, entonces si quieres cambiar la imagen, puedes volver a hacer click aquí y para ver ejemplos como esta imagen. Y ahora puedes ver aquí tenemos opciones de Phil. Entonces estas son las opciones que muestran que cómo va a llenar este objeto. Entonces esto está lleno. Se va a llenar todo el objeto. Esto está en forma. Y si haces click a pie, puedes ver que está recortado por dentro, y también puedes ver esto no es porque no sea una imagen o imagen redondeada. Por lo que no encaja en su interior. Entonces Ok, entonces vamos a usar a Phil ahora mismo, y también puedes usar crop. Por lo que la cosecha te va a ayudar a cambiar en el tamaño fuera de esto. Y también puedes cambiar la colocación de esta imagen. Por ejemplo, esta imagen estamos aquí, y también puedes cambiar el tamaño de la imagen pulsa y mantén presionada la tecla shift. Y por ejemplo, quiero dedo del pie tener algo como esto. De acuerdo, así también puedes mover la imagen como esta X cerrar esto y puedes ver aquí tenemos la imagen donde la queríamos. Entonces otra vez, vamos a ir a la imagen. Esto es cultivo. Por lo que en cultivo puedes dejar caer la imagen. Por ejemplo, quiero tener algo por aquí como esto y salgamos y se puede ver que esto en realidad está recortando daños. Por lo que básicamente está cambiando el marco de la imagen. Y si quieres volver a ir a cosechar, esta es en realidad la zona de cultivo. Esta sección azul estamos aquí. Si haces clic en esta imagen detrás puedes ver que tenemos diferentes adultos. Estos son negros. Entonces si quieres cambiar el tamaño de la imagen detrás de este cultivo, puedes hacerlo al igual que esta música así. Por lo que esta es una herramienta realmente buena, por lo que también puedes rotarla. Pero creo que eso no va a ayudar por aquí. Se va a deformar esta imagen, así que eso es todo. Entonces esta es una característica realmente agradable de este recorte de la imagen. Entonces puedes usar el estilo por lo que el azulejo realmente va dedo del pie. Ayúdanos a darle estilo a esta imagen. Entonces, en realidad, estoy reduciendo el tamaño de esta imagen porque tenemos que ver el efecto de azulejo. Entonces vamos a moverlo así y X haga click aquí. Entonces así es como está peinando sobre la imagen. Por lo que estas son pocas opciones con la imagen se siente también se puede ocultar la imagen que también se puede mover. También puedes agregar el campo de imagen desde aquí. Hazlo si vas a imagen, te va a decir que Selecciona una imagen. Por lo que construyen cualquier imagen desde aquí. Y estas son opciones diferentes. Cómo va a caber, llenar, llenar, encajar realmente hacer Intenta usar el 100% de la imagen y tratar de encajar dentro de este contenedor. Por ejemplo, si tenemos un contenedor apagado como este y queremos llenarlo con una imagen para que puedas dar click si quieres llenar algo con imagen, puedes dar click sobre aquí está lleno y puedes dar click sobre aquí esta e ir a sólido, sólido y pasar a la imagen. Entonces aquí lo tenemos muestra que tratan de elegir una imagen por aquí para que puedas elegir cualquier imagen , por ejemplo, como se parece a ésta. De acuerdo, entonces ahora puedes ver que está lleno. Y si trato de trastocar, se puede ver que está tratando de encajar toda la imagen en este rectángulo. Ahora está dejando algo a la derecha y a la izquierda. Entonces si traté de reducir el tamaño Ok, entonces este es un ajuste perfecto. Si quiero cosecharlo, puedes ver que puedo cosechar este contenedor. Y también puedo mover esta imagen así. Entonces espero que no hayas destruido esta imagen. Phil están colocando tu imagen y cómo puedes usar este lugar. Herramienta de imagen dentro de Sigma. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección. 10. Herramienta de lápiz a mano, opinión: Esta es la última parte de tus herramientas de higment, y voy a compartir con ustedes algunas de las herramientas que nos quedamos aquí. Por ejemplo, esta herramienta lápiz. Entonces tenemos esta herramienta de mano y disco un mental, aunque estos no son muy útiles. Pero si haces clic en esta herramienta de lápiz, puedes ver que puedes dibujar lo que quieras. Por lo que si tienes una tableta o un dispositivo tabler Ben, puedes firmar fácilmente, o aquí puedes identificar fácilmente áreas de diseño como esta. Por aquí, puedes usar lo que quieras. Puedes dibujar libremente en esta pantalla. Estas son casi mis firmas estaban aquí, y todo esto se trata de lápiz herramienta, así que no tienes que preocuparte por ello. Entonces si quieres cambiar, puedes hacer doble click, y tendrás diferentes opciones como por aquí así, y también puedes aumentar su salto para que veas que estas son casi mis firmas. No muy perfecto. Pero si tuviera una tableta bolígrafo, que voy a comprar en un futuro cercano Aiken, usa algo como esto para poder dibujar factores. Lo que yo quiera, puedo dibujar algunos. Se pueden ver dibujos animados o algo así. Entonces todo esto se trata de este lápiz para entonces tenemos este mango que se va a mover cosa, donde quieras. Entonces retrocedamos para mover Herramienta, que es V Y si quieres ir rápidamente a esta mano para puedes presionar o sostener tu barra espaciadora así y ahora puedes moverte. Por lo que esta es la tecla de corte corto para esta herramienta de mano barra espaciadora de prensa, y puedes moverte en tu lienzo. De igual manera, tenemos esta herramienta de comentarios y puedes agregar tu comando show aquí. Esto es por básicamente por ejemplo, me encanta que seas naturalezas enfermas. Voy a añadir un smiley o aquí Smoochy y la mayoría para que puedas ver en esta sección de comentarios estoy viendo que un comando de mí y dirección de domicilio. Y se puede ver este es mi nombre en pocos segundos. Te amo firmas. Entonces si tienes todo un equipo, ellos pueden contestar y pueden decir eso realmente, o algo así. Lo que sea que quieran dedo del pie comandan aquí. Entonces esto es lo que puedes decir, un poco fuera herramienta de colaboración para colaborar en tu diseño y mejorarlo Así que estas son el resto de las herramientas por aquí. Algunas cosas más que creo que me olvidé, es que si vas por aquí en rectángulo, por ejemplo, he dibujado un rectángulo Y si puedo dibujar elipse por aquí y si me solapo estos, puedo aflojar ambos fuera ellos. estoy seleccionando haciendo clic en turno, turno, manteniendo pulsado el turno y haciendo clic en ambos. Entonces diluyamos este. También, éste también éste. Por lo que aquí tenemos dos formas diferentes. Y si quiero combinarlos, puedes ver que tenemos diferentes opciones por aquí. Selección sindical. Por lo que ahora se combinan y son una forma por aquí así. Aún así, puedes abordarlos. Puedes hacer click por aquí, doble clic, y tendrás que dar forma en el sindicato. Puedes moverlos, por ejemplo. Yo quiero tenerlo aquí. Y yo, por ejemplo, quería duplicarlo. Yo quiero tener otra forma como esta. En realidad presioné y mantuve mi tecla de opción arquero para duplicar estos. Entonces haga clic en esto. Es como esta presionar y mantener la opción Arden. Tendrás la Bellerose y puedes tener algo como esto. Para que veas que esto es un sindicato fuera de esta nave. De igual manera, podemos tener selección de temas. Por lo que ahora puedes ver todas las elipses superiores que restaron de este rectángulo por aquí. Entonces tenemos esto excluye selecciones o lo que sea, um, solapado. Se va a excluir. Entonces, por ejemplo, las áreas superpuestas, van a ser removidas. Se puede ver donde Aquí. Por lo que se puede ver ahora estas áreas superpuestas han sido eliminadas. Para entender esta selección de intersección, vamos a tener nuevas formas. Entonces, eliminemos este. Tenemos un rectángulo por aquí. 2da 1 más aquí, que va a ser un poco más oscuro. Eso es como un barco fuera de ellos. Inspeccionar intersectar. Por lo que Intersect es en realidad lo que sea común dentro de ellos y todo se quita. Por lo que el área común va a estar al final y se va a quitar todo. Entonces así es como funciona en realidad esta, uh, esta combinación o esta herramienta sindical. Si tienes alguna pregunta o no entendiste nada, siempre puedes preguntarme. Pasemos a la siguiente lección. 11. Rellenos y usando degradados en la figura: en este video. Vamos a mirar a este tipo de aquí, y vamos a explorar diferentes formas de utilizar este campo. Cómo puedes usar diferentes colores como solar, rainier lineal, diamante angular, una imagen. Y no vamos a mirar esta imagen que ya hemos discutido Stared. Entonces, um, empecemos por crear un rectángulo por aquí y creemos una elipse por aquí. Entonces estoy sosteniendo turno. Usemos unas 300 esquinas como 16. O aquí y ahora se puede ver que el expediente Phyllis C. Cuatro c cuatro. Esta es su capacidad. Cuánto los colores deben ser transparentes o al norte, algo así. Entonces si trato de usar, por ejemplo, como este color por aquí y trato de agregar otro campo y quiero que sea, um, um, algunos ingredientes como este y cambiemos el color por éste, así que la parte inferior uno va a ser un asesino. A continuación, usa este color, o ahora puedes ver el top es en realidad un int codicioso. Entonces si lo intenté, cuando hago clic aquí, dice lineal. Entonces aquí tenemos color sólido de lo que tenemos lineal Kenia tiene dos puntos para bajar estos puntos por aquí, que en realidad va a mostrar dónde va a parar el sculler y empezar. Por lo que este color va a empezar desde aquí. Si quieres agregar uno más, puedes hacer click aquí de esta manera y puedes usar algún color como este. Por ejemplo, si quieres dedo del pie, cámbialo y también quieres cambiar la parte superior por aquí, por ejemplo, así y quieres que la parte inferior sea muy oscura. Puedes usar algo como esto. Ahora puedes ver que estamos usando un ingrediente lineal encima de estos colores azules. Si quieres resaltar esto incluso ver, tratamos de aumentar su capacidad. Se va a mostrar más por debajo de esta Grady en. Entonces esto es tipo apagado como un tipo verde C de radiante. Y siempre puedes también esconderte y mostrar. Por ejemplo, te has sentido así. Puedo agregar tantos rellenos que quiera, por ejemplo, quiero agregar una radio. La radio va a estar en destrucción. Entonces para radiante vamos a usar este. Entonces eso es que usé radial y se puede ver ahora tiene simplemente regular y luego tiene er vital o transparencia por un lado. Por lo que si haces click aquí, puedes ver que tenemos dos ajustes. Uno es este color. Una es esta capacidad. Entonces por cada punto off colores, puedes tener dos cosas. Por ejemplo, si trato de aumentar la opacidad, se puede ver ahora tenemos Ah, color radial con el límite es en realidad un poco transparente y por dentro es una púa. Por lo que puedes crear muchos efectos como este. Por ejemplo, si trato de usar algo como esto y trato de usar el color blanco por aquí, se puede ver que tenemos este tipo de efecto off. Se puede ver así que el exterior es blanco, que se está mezclando con este fondo. Y dentro está este asesino para que puedas tener más paradas. Por ejemplo, si quieres cambiar el color en esta sección por aquí, por ejemplo, como este 'll, puedes ver ahora lo que está pasando por aquí. De igual manera, se puede cambiar la opacidad de este dedo del pie. Entonces ahora estoy probando circulares de movimiento del dedo del pie y ahí espaciando. Vamos a diluir este. Entonces yo lo soy. He seleccionado esta unicidad tiene límite press delete, y tenemos un color ido. Ahora puedes ver que esto se ve bien. De igual manera, para éste, vamos a quitar el real. Vamos a usar lineales ahora. Se pueden ir muchas cosas por aquí. Por ejemplo, si haces clic en este lineal, puedes cambiar la dirección fuera de este creedy int así. Entonces si trato de cambiar la dirección, puedo cambiar la dirección como esta cruz de prensa y se puede ver aquí tenemos otra. Entonces lo que no voy a hacer es que voy a quitar esta excusa. Um, oscuro por aquí, Onda, Aumentemos la opacidad de esta sección o aquí. Probemos con el dedo del pie. Muévete así. Siguiente. Mueve los colores alrededor, así. Intercambia este dedo algo así que lo arrastra un poco más. Entonces tenemos menos color para esta gota o este, uh, punto por aquí. Por lo que tenemos tres puntos a los puntos asesinos. Por lo que este es puedes crear botón de descarga como ese y color blanco por aquí. De igual manera, se puede hacer lo mismo por aquí. Si quieres crear algo para estos, Uh estos texto por aquí, puedes hacer lo mismo. Entonces intercambio como este. Por lo que ahora puedes ver tenemos muchas opciones. Se puede agregar tantos se siente un cálido incluso en el texto por aquí, incluso para estas formas. Por aquí puedes actuar 234 Cualquiera que sea el afecto que quieras crear, puedes crear un similar para radio. Se puede tener este tipo de cosas para angular. En su mayoría no necesitamos esto. Pero tal vez si quieres usar, puedes ver que estás aquí. Esto es y lo hará? En realidad, crea algo como esto, que en su mayoría no necesitamos. A lo mejor en algún auto interfiera o algo así, podríamos necesitar que tu diamante va a tener algo como esto. Y el último es imagen. Ya hemos discutido esto. Por lo que estas son diferentes opciones de color thes son diferentes. Opciones de Phil por aquí. También puedes crear estilos para esta sensación. Por ejemplo, tengo esto un int codicioso por aquí. Voy a dar clic aquí y usar la pantalla, Ian, y guardarla dentro de ingrediente segundo o algo así. Entonces si trato de usar alguno del rectángulo solo puedo hacer clic aquí y presionar esto y esto se va a aplicar a este rectángulo por aquí. Entonces todo esto se trata de colores y diferentes ingredientes y cómo puedes usar diferentes inTs creativos , diferentes efectos, por ejemplo, este fondo transparente. Puedes tenerlo mezclado con el fondo por aquí para usar el mismo color que el fondo . puede ver si lo movemos dentro del rectángulo de color por aquí, se va a mostrar su límite, pero sobre un fondo blanco, no se va a mostrar. Entonces eso es todo acerca de los colores. Si tienes alguna pregunta que quieras hacerme, siempre puedes preguntarme. Pasemos a la siguiente lección. 12. Botones de degradado de la Gradient del proyecto: Ahora has aprendido todo sobre el resplandor, Phil colorea Todo. Ahora es el momento de tu asignación en tu asignación es que tienes que crear una carga lineal . Li Ingrediente Carga Como este He creado y siempre menciono tu nombre que Grady en Gran Bretaña por Sarah por Julius o Cualquiera que sea tu nombre, porque es más fácil para mí, sabes, retroalimentación. Dar retroalimentación para que sea más fácil para mí dar comentarios. Por lo que Gedeon Britain crea dos botones con cualquier color que te guste. Deben tener algunos colores que el texto sea visible en ellos. Entonces no intentes dedo del pie crear una carga. El que fuera el texto es difícil de leer. Entonces esta es tu próxima asignación. Brillantes cargas por ti. Por lo que estoy deseando ver esta asignación. Esto se puede ver en la pantalla, ¿verdad? ¿ Ruido? Yo no hay ninguna explicación necesaria, así que asegúrate de crearlos y estoy leyendo para tu asignación. Así que empieza a leer ahora. 13. Uso de máscaras en Figma: en este video, vamos a aprender sobre Sigma y cómo usamos diferentes mezquitas y técnicas de enmascaramiento y sigma. Entonces enmascarar es básicamente que tienes un contenedor como puedes ver este rectángulo. Este podría ser mi contenedor y todos los elementos. Por ejemplo, imágenes o botones. Van a estar dentro de este contenedor. Entonces si algo es más grande que este contenedor, se va a cortar. Por lo que no va a lucir fuera de este contenedor. Entonces para entender mejor este ejemplo, vamos a arrastrar y soltar una imagen o aquí. Entonces saquemos esta imagen y la dejemos caer por aquí. Entonces esto es muy grande. Entonces voy a sostener mi llave de la nave y sólo tener alguna talla por aquí. También puedes dimensionar rápidamente usando algo como esto o aquí. Entonces ahora tenemos esta imagen, y aquí tenemos el contenedor. Por lo que la contención está en la parte posterior y la imagen está al frente para crear una mezquita. Vamos a seleccionarlos a ambos, así que vamos a seleccionar y arrastrar alguna selección a su alrededor. Por lo que ambos están seleccionados y vamos a presionar control artístico, controlar todo M o opción de comando y para crear una mezquita. Por lo que puedes ver ahora hemos creado la mezquita con éxito. Ahora, si lo miras por aquí para que veas esta es nuestra imagen. Este es nuestro rectángulo. Esta es nuestra mezquita. Entonces si intentas seleccionar este contenedor y moverlo, puedes ver que va a revelar la porción de la imagen que realmente estamos usando. En realidad estamos alineando este rectángulo, por lo que es igual que un portal. Se puede ver que es un borde donde se pueden ver las otras dimensiones alimentos de todas maneras, Entonces así es como se trata de imágenes. Entonces si quieres ampliar esta imagen, tienes que seleccionar esta imagen y tienes que destetarla así y vamos a jugar set por aquí así. Entonces si trabajas este rectángulo o este contenedor o este este en realidad dedo del pie de la mezquita, ten algo de redondez. Vamos a crear 80 maldad. Entonces tenemos muy bonito este siguiente, como éste. Ups. Entonces tenemos esta mezquita, esta, así que vamos a seleccionar a ambos para moverlos así. Y si queremos un grupo, podemos agruparlos dentro de un puntera grupal tener este grupo sencillo así que no queremos ver selección muy grande todo el tiempo. Entonces así es como se crean mezquitas. Por lo que ahora te vas a añadir una mezquita. Entonces tenemos esta mezquita. Ya has visto que cuando es así, puedo cambiar el tamaño de él así. Puedo cambiar la posición fuera de la mezquita y también si quiero cambiar el tamaño de la imagen por aquí. Entonces si quiero que Toby lo haga más pequeño, voy a seleccionar esta imagen y me voy de pie. Hazlo más pequeño, así, así. De igual manera, si quiero cambiar estos rincones, lo voy a utilizar esta vez. Entonces así es como en realidad creas mezquitas son tener contenedor para crear diferentes tipos de diseños, donde vas a ocultar el resto fuera de la porción ahora, Del mismo modo, puedes tener otros elementos a en la mezquita. Entonces si tengo una carga por ejemplo, como esta, vamos a crear un botón rápidamente. Entonces tenemos este botón, ahí está grupal. Vamos, G, G, Bt en. Y yo quería estar dentro de este rectángulo o dentro de este contenedor. Por lo que quiero tener mi botón dentro de esta mezquita. Entonces lo voy a arrastrar por aquí y dejarlo caer por aquí justo encima de este rectángulo. Por lo que ahora puedes ver este addle extendiéndose desde esta imagen, incluyendo este botón y este rectángulo. Por lo que muestra que estas son las cosas que hay dentro de este contenedor. Por lo que ahora puedes ver no puedo ver mi botón porque está fuera del contenedor. Es igual que un portal medio. Se puede ver el otro lado. Pero si algo está fuera de esos espejos, puedes verlo, así que tienes que moverlo. Entonces estoy tratando de moverlo por aquí. Por lo que tienes que moverlo dentro de este contenedor así. Y ahora se puede ver que está detrás de esta imagen. Entonces voy a moverlo hacia arriba Ahora. Se puede ver que está dentro de esta mezquita y está dentro de este contenedor. Esta esta mezquita debe de área. Entonces no. En caso de querer moverlo, Por ejemplo, quiero dedo del pie ocultar el lado derecho de este botón. Yo puedo hacer eso así. Este el otro final esta carga está fuera de mi contenedor, por lo que no puedo verlo. Entonces esta es en realidad la técnica fuera del enmascaramiento y, ah, esto va a ser muy útil en tu diseño. Lo uso mayormente siempre que importe e imágenes. Utilizo una máscara de dedo del pie rectángulo lo para poder controlar fácilmente su posición. ¿ Es Ilya qué? Yo quiero mostrar lo que quiero ocultar. Entonces este es concepto realmente importante. Espero que hayan entendido este concepto de enmascaramiento y cómo usarlo y cómo tener muchos elementos dentro de una mezquita. Pasemos a la siguiente lección. 14. Proyecto ► enmascarar imágenes tu introducción: ya has aprendido cómo mezquita las cosas. Entonces ahora es el momento de su asignación. Entonces ahora te voy a dar una asignación, dedo del pie, mezquita y objeto o cualquier imagen, y tú vas a crear algún texto introductorio sobre ti que tengo cuatro cuidados o me encanta ver dibujos animados enemigos o estoy muy ocupado o soy enfermera de profesión o lo que sea que esté en tu mente. Entonces, cualquiera que sean tus pasatiempos o que hagas o tu amor se trata, tienes que compartirlo conmigo y usar tu propia imagen. Es mejor que nos presentemos. Entonces déjame mostrarte mi piel lo que he creado. Y también te voy a dar algunos de los consejos sobre cómo crear el enmascaramiento del's. Y cuáles son los problemas que puedes conseguir. Así que vamos a hacer dedo sobre pantallas ahora. Ahora puedes ver aquí he creado dos pantallas. Um, esta es una mezquita personalizada. He creado una forma por aquí, y he insertado mi imagen por dentro, y están dentro de un grupo. Siempre es mejor que agrupe a su grupo, sus elementos que han sido enmascarados. De lo contrario, el estigma va a seguir agregando cosas en ellos. Por lo que siempre que empieces con esto, puedes crear algo como esto. Puedes usar una elipse por aquí, dibujar una elipse con la tecla de desplazamiento, arrastrar tu imagen dentro de ella. Y así, por ejemplo, déjame dibujar sobre drag esto puedes ver No, tengo una imagen cada alquitrán en mis labios. Voy a seleccionar ambas de las elipses en la mezquita inferior. Y voy a mover esto dentro de esto aquí así. Entonces esto es fácil. Y siempre prueba dedo del pie, crea un grupo, por lo que es más fácil dedo del pie. Gestionarlos. Entonces este es un día ahora. Si intentas crear una forma con el péndulo, por ejemplo, trato de crear una forma como esta, y quiero insertar una imagen en el interior. Ahí hay un truco que puedes ver por aquí. No hay Phil están por aquí, así que intenta sumar primero a Phil. De lo contrario, tu imagen no va a llenar esto. Entonces volvamos a traer esto. Y aquí lo tenemos. Vamos como agua fuera de ellos mezquita, y ahora puedes ver he creado una mezquita muy personalizada con la forma personalizada por aquí. Por lo que siempre recuerda que Trata de llenar tu forma vectorial antes de hacer algo así. Entonces este es el ejemplo. Entonces empieza con tu nombre. Bienvenido, John o Sarah o como sea tu nombre y luego a figurar clase y luego algo sobre ti. Al igual que veo muchos jardines enemigos. En su mayoría últimamente re superpoderes les encanta explorar todo tipo de diseños. Incluso me encanta explorar tu diseño o cualquier tipo de diseño. Tres d o me encanta el dedo del pie verlos lavarlos. Y tengo cuatro hijos y freelance de los últimos 10 años. Esta es mi sencilla introducción, y puedes tener un botón muy usos. Empecemos o seamos humildes. Siempre lo que creas que es la palabra clave de tu vida. Entonces esta es la asignación para enmascarar. Así que asegúrate de que creaste me voy dedo del pie sigue buscando tu asignación. ¿ De acuerdo? Entonces, ¿cómo presentar esta asignación? Tienes que hacer clic en este tablero de arte. Tienes que ir a exportar. Haga clic aquí, y esto ya está por aquí. Exportación iPhone Bless. Entonces, no, lo voy a exportar en el escritorio. Y esta es la imagen que vas a subir. Entonces Ok, entonces esta es la imagen. Entonces esta es Puedes ver esta es la imagen, y esta es que tienes que subir y como una asignación, que pueda relacionarme fácilmente. De acuerdo, así que espero con ansias su asignación. Do presentado. Empecemos esta mezquita en asignación. No. 15. Crear estilos reutilizables: en este video, vamos a hablar de ello. azulejos deben que van a ser nuestros colores, ensayos y textiles los cuales puedes usar una y otra vez y fácil re aplicar a otros elementos de texto u otros botones o cualquier cosa que tengas. Por lo que también podemos crear diferentes efectos. Entonces déjame mostrarte haciendo algo para que puedas ver que he usado estaban aquí cuatro colores. Entonces si selecciono este rectángulo, este es un color de relleno Así que cómo puedo usarlo una y otra vez Así voy a dedo click sobre aquí Esto se llama estilo y voy a dar click por aquí, crear estilo Así que una vez que tenga estare, puedo renombrarlo como acero Soy azul algo así y voy a tener un estilo aquí Así que si me muevo sobre él muestra todavía azul. De igual manera, para estos voy a crear diferentes nombres Segunda re color naranja Entonces tenemos este primario azul oscuro y vamos a crear otro Azul primario. Por lo que ahora puedes ver tenemos cuatro esfuerzos de color por encima. Estos son nuestro estilo de equipo. Por lo que estos no son locales a este documento. Por lo que estos son nuestros estilos de diseño locales que podemos aplicar en este documento. Entonces este es nuestro proyecto ahora mismo. Esta es la página de práctica, en realidad. Por lo que tenemos cuatro colas trial, para que veas cómo podemos aplicarlas Fácil. Déjenme mostrarles. Entonces estoy saludo rectángulo también labios por aquí y voy a ir a más que a llenar puedo voy a ir a ir. Hay dos maneras, en realidad Así que ve al estilo y selecciona los colores que quieras. Por ejemplo, quiero este color de manera similar. Por ejemplo, estoy creando una carga. Entonces tengo que estricto ángulo por aquí. Esto es un bonito pero y todo se aplica a ello. Existe. Y yo quería ser así. Entonces esto es muy fácil para mí. No quiero recordar esto y se puede ver aquí tenemos azul oscuro primario. Entonces lo principal es la reutilización, por ejemplo, he aplicado el mismo color. Entonces este rectángulo como este Entonces que si quiero cambiar el color y quiero que sea otro tono fuera este azul. Entonces lo que puedo hacer aquí es que voy a dar click aquí y luego voy a dar click en este estilo de edición. Y aquí tenemos Opción dos cadena descubrir, por ejemplo. Yo quería a Toby, Uh, veamos esta portada. Por lo que ahora puedes ver nuestra primaria Azul oscuro es totalmente diferente. De acuerdo, así que ve por aquí. También puedes ir desde también puedes ir cambios de dedo del pie desde aquí, así que no me gustó este marco e ir a estilos locales y puedes hacer clic en la configuración y vamos cambiarlo de nuevo a algo muy oscuro como esto. Entonces aquí tenemos el color, tamaño y cómo podemos editarlos y cómo podemos volver a aplicarlos y qué efecto tendrá. Entonces, por ejemplo, si quiero que sean algunos otros colores Así que si hago click aquí, puedes verlo me muestra todos estos colores. No puedo adicto ni cambiar de color. No soy de dedo abierto todos los colores. Entonces si quiero volver así tengo que dar click aquí d estilo muerto. Y ahora puedes ver tengo mi relleno de vuelta para que pueda cambiar su color a cualquier cosa, y no está pegado dedo del pie. Estos dos elementos son estos dos ensayos de colores. Ahora vamos a aprender sobre los textiles. Por lo que aquí se puede ver que tengo este rubro. Tengo este párrafo de texto. Es regular. 18 cerdos, Illes Roboto, mueren cara. Y esta es Roberta Light 64 fotos. Puedo aumentar el tamaño de 72 si quiero. Ah, y este es mi rumbo ahora. También puedo crear el mismo estilo Puedes ver el mismo botón por aquí. De vuelta por aquí. Y lo voy a tener rumbo grande o rumbo 72. Eso sería fácil para mí recordar. De igual manera, por aquí, lo voy a tener. Ah, mejor gráfica 18. Entonces significa 18 cerdos es el tamaño de párrafo y se puede ver tengo a textiles por aquí. Entonces cada vez que quiero un nuevo texto por aquí, por ejemplo, estoy escribiendo algo siendo así que quería ser un encabezado. Entonces voy a ir por aquí, click en esto y acabo de soltar mi escondite 72 y me voy de pie tener todos los ajustes que hice por aquí. Ahora bien, si quieres editar este estilo, por ejemplo, ya he creado un estilo y quiero cambiarlo así que la cosa es que tienes toe klik cualquier parte por aquí, o simplemente puedes no gustarte nada que es manera más fácil. Y solo puedes hacer click en esto y voy a cambiar a, digamos negro y voy a tener 64. Usemos algún otro para, por ejemplo, como éste. Esta es mejor, y creo que no tiene un trasero. Entonces usemos pesado. Entonces, um, junta. Entonces esto se ve bien. que veas así es como cambias tu estilo para poder salir fuera de este hueso. Río, puedes seleccionar este. Haga clic en este, vaya a este ícono. Entonces esto es un poco, uh, se puede ver un camino un poco más grande para viajar. A mí me gusta de esa manera. Entonces simplemente me disgustó e ir de estos estilo local y cambiarlo por aquí muy similar a estos asesinos Y estos encabezamientos o este textil. También puedes crear otros estilos. Por ejemplo, quiero tener. Vamos a desconectarlo, y voy a crear ingrediente lineal. Ahora es así y voy a cambiar el color a éste yendo dedo del pie. Aumentar la opacidad. Entonces no, hemos creado por aquí y seleccionamos disco radiante y de nuevo voy a ir a estilos y vamos a barba, ingrediente o aquí. Por lo que tengo mi codicioso en estilo similar así. Entonces si quieres aplicar a este, voy a dar click aquí y este es mi fondo con ingrediente. Y agreguemos algunas cosas más por aquí. Por ejemplo, quiero que lo separemos y quiero algunos efectos. Por ejemplo, quiero sombras por aquí, así que voy a tener sombra de gota, y eso va a ser un poco más oscuro. Sombra de gota que se utiliza algo como esto y me voy dedo del pie tener sangre fuera 50. Vamos a reducirlo a 30. Exclusivo a 25 35 Luciendo bien. Vamos a bajarlo un poco. 6 18 Ahora hemos creado la sombra de gota. Vamos a despejar el estilo para ello. Hemos sido demasiado buen estilo y dar click en este mismo icono plus para crear un estilo. Entonces este es nuestro, ah, sombra caída Cuatro botones, algo así. Entonces tenemos otro estilo. Entonces si salimos fuera de los escándalos y pinchamos aquí, se puede ver que no, tenemos un hecho estilos color, tamaño y textiles. Entonces estos son diferentes tipos de estilos que puedes probar por aquí, y puedes volver a aplicarlos a cualquier que yo crea que quieras. Por ejemplo, voy a estos efectos y así así y tenemos esta sombra, no quiero recordar los valores de esta sombra una y otra vez. Por lo que este es un concepto muy bueno en cualquier y poderoso concepto de estigma. Y me encanta cómo han utilizado estos efectos estilos, colores, ensayos y textiles locales por separado. Entonces espero que hayan entendido el concepto off style y cómo reutilizarlos. Pasemos a la siguiente lección. 16. Panel de efectos de Effects en la aplicación Figma: en este video, vamos a aprender diferentes efectos de tu diseño y cómo puedes usar el panel de efectos de tesis del lado derecho siempre que estés diseñando usando figment. Entonces cuatro cosas que vamos a crear una es esta muy ligera Sombra asentada a su alrededor, sombra muy pequeña a su alrededor. Entonces tenemos otra, que va a ser una sombra gastada muy suave. Entonces tenemos este efecto tres D, y tenemos este efecto de inset, lo mismo que he hecho cuando te compré mi primero un curso de diseño con photoshop, Así que lo estoy haciendo en el lema de higo. Entonces estos son los cuatro efectos que vamos a crear. Entonces antes que nada, voy a quitar todos estos defectos de aquí para mostrarles dónde empecé, en realidad. Entonces, um así aquí tenemos elementos simples. Blanco sencillo. Ahora puedes ver una cosa es común. Tengo un fondo de color claro. Esto es muy importante. Siempre que estés tratando de tener algo de sombra, tienes que tener algún fondo de color claro, color de factura. Esto va a funcionar mucho mejor ahora. El primero que vamos a hacer es ir de pie crear esta sombra por aquí, que va a ser una sombra muy se puede ver muy expandida, muy borrosa. Por lo que presiona este pasaporte y tenemos una simple sombra de gota que se ve así. Esto no se ve muy bien, así que vamos a mejorarlo. Por lo que para las opciones se iban de pie, ven aquí. Por lo que tenemos estas opciones X valora el movimiento off shadow en el lado derecho. Por lo que se va a mover para tratar de presionar cinco por aquí. Se puede ver que se está moviendo. El valor de destrucción es de arriba a abajo. Entonces si quieres moverte al fondo, así es como puedes hacer eso. Así que aumenta el valor vie para mover la sombra en la parte inferior. Si quieres, mueves el otro lado. Vas a usar menos cinco así y menos 15 así. Entonces eso es cool back. De acuerdo, entonces la sangre es lo borrosa que debe ser. Por lo que va a tener algunos bordes suaves. Entonces si intentas aumentar el valor de la sangre, se va dedo del pie se vuelve más suave. Entonces el primer ajuste que vamos a hacer es que voy a usar X uno. Entonces me voy a mover un poco o aquí que voy a usar la sangre 32. Por lo que quería ser muy suave como la sombra y el viral. Tú lo serás. Entonces quiero moverlo un poco hacia abajo. Entonces quiero menos sombra en la parte superior. Un poco más por aquí. Entonces voy a usar 20%. No quiero que sea muy, um sombras duras. Entonces quiero hacerlo suave. Estoy reduciendo la opacidad 20%. Ahora puedes ver que se ve genial. Ahora, lo último que puedes hacer es que vamos a cambiar este color de negro. Entonces el mismo color fuera de este fondo. Entonces voy a dar clic aquí, y lo voy a mover por aquí. Ahora se puede ver de nuevo cuando he seleccionado el color Se fue de nuevo 200%. Entonces lo voy a usar al 30% Ahora. Se puede ver que esto se ve realmente bien. Sombra suave. Te voy a dar asignaciones para hacer algo así. Muy bonito. Muy limpio, muy creativo. Se puede ver por aquí ahora, igual manera para este, vamos a usar algunas otras configuraciones. Entonces de nuevo vamos a ir a soltar sombra. Se puede ver que tenemos más opciones en una capa de sombra, Desenfoque de fondo Blurred. Pero ahora mismo vamos con sombra caída y en una sombra va a ser el próximo. Entonces ahora vamos del dedo del pie Jane los ajustes por lo que x será cero sangre voluntad antes y el valor vie será supervivencia también lo será. Entonces lo queremos muy cerca de nuestro anterior y esto va a ser del 15%. Y el asesino que vamos a usar Lex use este color y voy a reducir su capacidad al 20% así. Entonces esto es un poco diferente de color para el desde el fondo, un poco azulado. Esto es un poco de azul verdoso, pero lo miró. Se busca crear en la parte superior de este fondo. Entonces esto es muy suave. Cerrar resolver sombra. Si quieres dedo del pie cambia un poco el color. ¿ Quieres sombra más oscura? Se puede ir en esta zona más oscura. Si quieres algo de sombra más clara o efecto basado en luz, puedes ir en esta sección. Estamos aquí. Puedes ver Si miras de cerca a la izquierda, puedes ver la luz, la oscuridad, la luz, la oscuridad, oscuridad, luz, oscuridad. Entonces voy a ir con éste por él. Ahora, vamos a ir por esto dentro de efecto de inserto. Entonces haciendo clic en esto y si hacemos click en efectos, queremos dedo del pie tiene que realmente efectos. Uno va a estar en una sombra. Por lo que una vez que usamos en una sombra, se puede ver que ya tiene un interior de efecto insecto no a. En Ha's este efecto, voy a acercarme para mostrarte la diferencia. Entonces este es en realidad tu interior, y, uh, se llama los efectos. Y puedo usar 20% por aquí, y voy a aumentarlo un poco. Disculpa. Tres al norte, abajo un poco arriba. Y ahora voy a usar otro efecto, que va a ser mi sombra de gota. Ahora bien, esta sombra de gota no va a estar oscura por aquí. Cuando algo es mama, habrá una sombra de luz sobre esto. Por aquí en esta zona, la luz va a caer sobre este fondo por aquí. Déjame mostrarte lo que quiero decir. Entonces vamos a tener una sangre de sombra. Vamos a reducir el desenfoque a cero porque no queremos que se borre. ¿ Por qué va a ser divertido? Queríamos estar justo junto con esta línea. O aquí déjame acercar un poco más. Se puede ver esta gran línea o aquí. No, no queremos que esto sea genial. Vamos a usar una línea blanca por aquí Ahora. Si haces zoom, puedes ver que hay una línea blanca. Alejemos un poco. Ahí hay una línea blanca o aquí. Entonces déjame mostrarte. Aumentemos capacidad 200% porque no se puede ver. Ahora se puede ver que tenemos una amplia línea por aquí la cual se va dedo del pie mejorar nuestro efecto interior . Por lo que aquí tenemos un botón perfecto en set. Hemos usado algunos off en una sombra. También puedes usar este cuatro y tenemos una sombra de gota, que va a ser una luz blanca por aquí en esto. A. Entonces esto va a completar su efecto de perspicacia ahora, llegar a este tratado de efecto tratado es muy sencillo. Vamos a crear un efecto. Sombra de gota. Será y vamos a reducir el desenfoque 20 Ahora puedes ver que esto se vuelve sólido. No, vamos a usar el mismo color en este botón y nos vamos a mover los pies a esta sección más oscura o aquí. Entonces usemos, por ejemplo, esta que es todo lo que necesitamos para una carga de tres D. Se puede ver si se quiere aumentar su ah, tratado nous o su sombra, se puede aumentar por ejemplo, ir a seis. Ya puedes ver ahora se ve un poco más tratado. Entonces así es como utilizas diferentes efectos cuando tratas de ser un efecto de sombras diferentes sobre insectos cuando estás tratando de usar fig MMA. Ahora vamos a estudiar los dos últimos efectos que son el desenfoque asesino y el fondo. Si haces clic en su sangre, puedes ver que este holier está realmente borroso y puedes cambiar la sangre citando por ejemplo , 15 o algo así. Entonces si quieres desenfocar capa, será algo así, que es muy fácil, muy fácil de entender el concepto de esta sangre de Lear. Ahora lo último es, vamos a estudiar la sangre de fondo. Ahora, por ejemplo, quiero este artículo y quiero todo encima. Si, por ejemplo, tengo un rectángulo por aquí y está escondiendo toda esta pantalla, por ejemplo. Esta es toda la pantalla, así que voy a añadir el efecto de Bagram Blur. Ahora se puede ver nada está borroso. Entonces una vez que intentes dedo del pie, reduce la opacidad de tu relleno por aquí, por ejemplo, quiero ser 50%. Se puede ver el fondo detrás de este regular en realidad está borroso. Entonces si quieres cambiar el ajuste de sangre, puedes aumentar la sangre. Ya puedes ver ahora es más borrosa y, um, um, no visible, en realidad. Entonces si intentas usar el color blanco, nuestro cabello, algo así, puedes ver esto en realidad es desenfoque de fondo. Entonces si intentas poner algún texto por aquí, um, me gusta mucho. Por lo que en realidad está volviendo. Yo quería estar en la cima de este fondo, algo así. Por lo que puedes ver cada vez que trato de mover esto se va dedo del pie, tener un efecto borroso. Esto va a si intentas moverlo o desplazarlo. Tendrá algún efecto como este. Entonces, ¿este efecto se vio por primera vez en dispositivos IOS? Supongo que sí. De hecho, así es como se puede usar el fondo. No olvides reducir la opacidad de tu color de relleno por aquí porque no va a funcionar sin eso. Entonces si tienes algún escenario como este, no va a funcionar. Así que intenta usar 80% 70% 50% o lo que te parezca bien. Entonces estos son todos los efectos que ya te he mostrado. Si tienes problemas para entender estos efectos para hacerme preguntas y espero verte pronto en la siguiente lección, hasta entonces, toma tu y por 17. Proyecto ► con efectos de capa: ahora, Tu siguiente encargo es que vas a crear estos tres botones con el hecho de sombra con efecto tres D con efecto insecto o prensado. Y quiero que menciones tu nombre en la parte superior. Entonces empieza a crear esta asignación. Te voy a dar unas manos. Estos son mis ajustes. Si vas a esta sombra, puedes ver estos son mis ajustes para sombra 0 15 El valor de sangre es cuatro. Spread es de un color azul oscuro para el mismo. Este 40% azul es la opacidad fuera de la sombra. Entonces tenemos éste. Esto es en realidad dentro de este líder y así soltar sombras. Tú 05 es el valor vie. Entonces hazlo un poco abajo, y luego tenemos el color verde oscuro 100% para este, tenemos que realmente soltar sombras. Una es una línea blanca de 10 líneas en la parte inferior, que ya te he enseñado. Este y en la sombra es 06 desenfoque. Cuatro es de I valor y color naranja oscuro para la sombra dentro del efecto mamario y 100% es su capacidad. Por lo que estoy mirando hacia adelante. Entonces viendo esta asignación, así que empieza a leerla ahora 18. Componentes en Figma: en esto realmente de vamos a hablar de un concepto muy importante, que se llama componentes. Ahora. Los componentes son básicamente tus elementos de diseño que puedes reutilizarlos. Puedes cambiar algunas fuera de sus propiedades, y aún así puedes utilizarlas. Entonces déjenme compartir con ustedes cuál es básicamente el concepto para que componente pueda ser agrupado fuera de cualquier elemento de diseño, sus antecedentes fiscales, sus Parton, sus guardias, sus encabezados que fueron diseñados o cualquier cosa que usted tener. Por lo que básicamente es grupo de dos o tres elementos, por ejemplo. Vamos a crear un botón por aquí, y voy a usar cosas Brugler por aquí. Y una vez que hemos seleccionado esto aquí tenemos esto a la vuelta de esta redondez de esquina. Entonces lo voy a usar por aquí. Entonces tenemos una linda ronda pero la cabeza molesta. Ahora vamos a sumar siguiente por aquí. Entonces Presti y nosotros vamos a tener algún texto como abajo Lord No lo sé, mejor escape y alinémoslo en el medio. Un poco arriba por aquí, Jeanne, el color blanco. Entonces estoy cambiando el er físico de las pilas por aquí ahora mismo. Y vamos a sumar a ed por aquí. Por lo que ya he hablado con algunos fuera de las llaves shocker. Por lo que voy a usar control o comando dedo del pie slash, obtener mi búsqueda, y voy a dedo del pie icono de buceo. Y aquí tenemos cuatro iconos impresionantes. Entonces esto es en realidad Blufgan. Entonces voy dedo del pie die arrow. Entonces puedes ver que tenemos muchos anales por aquí, Así que voy a usar No, ella era ésta. Entonces este es el aire por aquí, y ahora mismo se puede ver que tenemos este vector de adelante y cambiar su con 22.5. De acuerdo, entonces, no, se ve bien. Eso cambia de color a blanco y hagámoslo un poco más grande. Entonces voy a presionar a este país en proporción limitada. Entonces me voy dedo del pie ir con talla, como 36. Algo así. Esto se ve genial. De acuerdo, entonces tenemos algunos de los elementos por aquí. Nuestro voy en nuestro dexter y nuestros antecedentes. Ahora, también puedes aplicar algunos efectos. Si quieres alguna camiseta gota por aquí, puedes tener alguna sombra de gota como esta. Por lo que 8% de sangre x valora el movimiento fuera de esta sombra. Y aquí está la sombra puesta. ¿ Por qué significaría que va a bajar de la retaguardia al fondo del Lear. Por lo que aquí tenemos un botón muy bonito. Ahora, ahora mismo, los vamos a agrupar. Entonces vamos a controlar grupalmente o comandar G. Pero si no quieres tenerlos a tientas, eso también es bueno. Entonces al igual que todos los elementos y nos vamos toe press comando todo K o controlar todo K para crear un componente. Entonces vamos a crear un componente. Ahora puedes ver como tan bonito he creado este componente. Se puede ver que el ojo se ha ido por aquí está totalmente cambiado. Entonces esto es como básicamente un componente maestro El componente maestro es en realidad nuestro principal elemento de diseño que está en su forma original. Entonces vamos a duplicar este para que puedas presionar. Vamos D. Así que ahora puedes ver tengo un elemento duplicado en la parte superior ofrecido, Así que lo he arrastrado hasta aquí. Ahora se puede ver que el yo se fue. El 2do 1 componente a es diferente, aunque es igual que el componente uno. Pero ahora es una instancia. Entonces esto es que se puede ver u oír en el lado derecho de esto llamado Esto se llama instancia. Y si hago clic aquí, no hay instancia. Por aquí está. Se trata de decir componente. Entonces si vuelvo a hacer clic aquí, se puede ver que tenemos esta pequeña área de panel por aquí en su lugar. Componente uno. Por lo que es una instancia instantánea fuera del componente uno. Entonces es igual que si eres programador, este es el concepto de un padre e hijo En Javascript y Java, haces diferentes clases y las mismas propiedades. Por lo que es justo como un padre y un hijo. Por lo que ahora puedes ver a este niño tiene todos los padres de oficina de propiedades. Pero creo que eso no es bueno. Entonces si quiero cambiar, por ejemplo, el color como este, puedo hacer eso. Aún así, se puede ver que es similar en todo como su padre o experimento. Entonces este es el concepto fuera de los componentes. Por lo que tenemos este componente. Entonces, una vez que completamos crear cualquier componente, no podemos revertir. Por lo que este componente va a estar disponible en este panel de activos por aquí para que puedas ver este marco de práctica práctica y tenemos este componente de uno para que también puedas renombrarlo. Por ejemplo, voy a cambiarle el nombre Bt y descargar. Entonces voy a renombrarlo BD en descarga. Entonces ahora si vamos a los activos del dedo, lo puedes ver. Por lo que muestra bonito y descargarlo y lo puedo arrastrar y soltar y colocarlo en cualquier lugar que nazca Así puedes seguir creando mucho fuera de diferentes activos y componentes como este. Pero asegúrate de crearlos una vez que estés finalizada con su diseño porque será difícil. Tienes dedo del pie cambiar el componente maestro para conseguir que el cambio se haga. ¿ Y si quieres crear una nueva empresa así no quiero esta instancia? Quiero un botón nuevo similar a este. Pero yo quería ser otro componente, así que voy a dar click derecho aquí y me voy de pie Usar este comando Desvincular instancia. Entonces ahora se puede ver si voy al panel de capas es de nuevo fuera de marco para que se pueda ver este marco que tengo por aquí puntera componente Así que esto es en realidad en grupo. Si haces click en grupo, se va a salir del grupo porque creamos el grupo en primer lugar. Entonces una vez que tengamos esto, puedo cambiar lo que quiera. Por ejemplo, quiero rincones diferentes. Entonces he hecho clic por aquí, y voy a usar 16 por aquí y 16 o pelo y, uh, celo. Y, ya sabes, aquí, por ejemplo, digamos que quiero un botón como este para poder crear otro componente. Y creo que esto va a ser y de nuevo componente maestro. Así que asegúrese de que una vez que cree un componente maestro, guarde las copias en su diseño y use este componente maestro y muévelo a alguna otra página . Por ejemplo, voy a crear otra perra llamada Guía de estilo. Por lo que una vez que regrese a mi página, me voy dedo del pie a sacar ambos de estos. Vamos a crear una copia. En realidad estoy presionando y sosteniendo Arche y opción tecla dedo del pie arrastrar y crear una copia. Entonces voy dedo del pie flick les sacó Control Comando X, y voy a volver en la guía de estilo y distrito por aquí. Entonces tenemos componente componente por aquí para que puedas renombrarlos por Lord Flat o algo así y, um entonces vamos a volver. Entonces una vez que tienes por aquí y quieres que algo haya cambiado algo, por ejemplo, accidentalmente Jane el dedo del color este regular y realmente no me gusta y no quiero que esté listo. Y quiero volver de pie como era antes. Entonces voy a patear por aquí. Este es el restablecimiento de Dios. Instancia. Una vez que voy a dar clic aquí, se puede ver que dice reset overrides. Por lo que en realidad escuché solo en el color. Entonces si quiero anular, puedo anular impuestos también. Entonces voy a teclear. No descargo ahora. Por lo que ahora si pinchas por aquí y das click en esto dijo anula. Voy a reiniciarlo todo. Por lo que el texto va a retroceder el 1er 1 predeterminado. Pero un icono todo se restablece dedo del pie el componente maestro. De igual manera, si quieres abordar algo o cambiar algo en el componente maestro, puedes hacer click aquí, ir toe master component y se va a ir a otra página. Bueno, en realidad, el componente maestro está residiendo, así que también, puedes agregar alguna descripción por aquí. Lo que quieras en bono. Eso es todo. Eso es lo que son los componentes y las instancias son y cómo se puede ir toe componente maestro , cómo se puede restablecer componentes. Estas son las 43 o cuatro cosas como, en realidad funcionan estos componentes. Y hablaremos de más de estos componentes sobre esta restricción en la siguiente lección porque creo que no quiero que esté listo mucho tiempo. Entonces eso es todo. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 19. Uso de restricciones con componentes: ahora en esta lección, vamos a entrar un poco más de detalle sobre estas limitaciones por aquí. Por lo que las restricciones del país son básicamente limitaciones. Se puede aplicar en un grupo o un componente, Así que permítanme compartir con ustedes cómo se puede hacer eso. Entonces, por ejemplo, hemos creado estos componentes en la lección anterior. Y vamos a mover el dedo por ahí, componente maestro por aquí. Entonces componente maestro es en realidad el que vas a cambiar y aplicar estas restricciones o aquí. Por lo que una vez que haga clic en este icono para expandirlo, puede ver que tendremos restricciones por aquí para cada elemento por aquí. Entonces, como este anuncio de aquí, por ejemplo, déjame mostrarte. En realidad, si trato de ampliarlo, vamos a expandir esto y se puede ver cómo se está expandiendo esto. No quiero extender ese experimento de botón así. Por lo que este texto no está en medio. Esto en realidad se estira, y esto está realmente mal. Entonces volvamos. Controlador Kamanzi Y queremos estoy realmente desarrollar click. Por lo que una vez que hagas clic, te vas a holgar. Este puedes idol presionar control o comando toe directamente holgar este, que no tengas que hacer doble clic o hacer clic dos veces o intenta ir a este elemento. Basta con hacer click. Yo sostengo tu llave de mando del mando y pateo sobre él. Por lo que ahora se puede ver que nos hemos sentado aquí escala y escala en ambos sentidos. Entonces se va a escalar. No queremos que se escale. Entonces vamos a arreglarlo a la derecha por aquí, esquina derecha, y así la parte superior. Por lo que se va a arreglar por aquí. No queremos que este dedo del pie de botón se expanda en destrucción. Sólo queríamos estar expandiendo en la dirección horizontal, ni la vertical. Por lo que así se dice. Si probé dedo del pie expandirlo, puedes ver No, lo es. Se fija en esta esquina que se anota. Ahora puedes ver esto. Este ruido del dólar no fijo. Entonces vamos a solucionar este problema. Entonces controla o mantén, manda tu control y haz clic aquí, y lo vamos a anclar a la izquierda. Y usemos este centro. Uh, están a la izquierda y al centro. Eso es bueno. Por lo que también puedes hacer la misma vida izquierda e inferior o superior. Eso sería bueno. Por lo que también puedes ser así. Entonces una vez que hayamos dicho esto, ustedes van a ver qué es lo que va a pasar si nos expandimos. Se puede ver el abajo o no está en el mismo punto donde debe estar. Y si trato de expandirme desde aquí, puedes ver que este es el comportamiento que quiero tener en este espartano. Ahora la parte más difícil de escalar o tener restricciones es para el fondo desesperado . Y así si haces click en una holgura abatida, es bueno. Se puede expandir en cuatro direcciones, pero no queremos ampliarlo en destrucción. Entonces ahora mismo creo que no es bueno. Entonces lo que vamos a hacer es que vamos a soltar esta sobrecarga de fondo. Esto es en realidad se establece a escala y escala. Entonces este es el comportamiento por defecto. Lo que queremos es en realidad queremos escala en destrucción. puede ver que se escucha el anual que se contrae en dirección horizontal desde izquierda derecha, y esta es la habilidad de arriba a abajo. Por lo que vamos a seleccionarlo de punta del sábado y en destrucción vamos a tener habilidad. Entonces déjame mostrarte cómo se va a comportar. Por lo que hay que diseccionarlo porque estás en este momento en este fondo, así de seleccionado y seleccionar esta de nuevo este componente. Y si lo intento, se puede ver si trato de aumentar la altura, se puede ver que se mantendrá igual. No se va a expandir dedo o escalar y destrucción. Pero si intento ampliarlo desde aquí, se va a expandir en destrucción tanto fuera de los tramos. Entonces este es el comportamiento que he querido con mi componente. Entonces así es como puedes aplicar diferentes restricciones en tus botones en tus diferentes flechas desplegables , menús, menús desplegables. Estás gravado, sus alineaciones y todo lo que puedes ver por aquí. Este es mi abs, que vamos a construir al final de este curso, y se puede ver si voy al estilo. Chicos, tenemos mucho componente Shal aquí, así que pueden ver tengo estos componentes por aquí donde tenemos este ícono y estos iconos se han dejado y arriba. Se puede ver de igual manera, éste ha sido al dedo izquierdo y del pie superior. A pesar de que creo que debería ser por aquí así, correcto y trabajo de todos modos. Entonces así es como en realidad todo está funcionando por aquí. De igual manera, si vas a este, uh, este y si haces click en este addle, puedes ver que es correcto y superior. Entonces se va a pegar por aquí Si pruebo Toe Jane la talla que es cambiar talla de este . Por lo que se puede ver que se va a quedar en la misma zona donde yo quería estar, Así se puede ver que va a estar en la parte superior derecha en la misma posición. Entonces así es como en realidad aplicas restricciones. De igual manera, si miras la receta de búsqueda, ésta va a ser la misma. Como se puede ver por aquí. Debería estar por aquí, en realidad, derecho y arriba. Entonces así es como usas la restricción en tus componentes y los aplicas para tener mejores componentes expandibles o mejores flexibles. Espero que hayan aprendido mucho en esta lección. Pasemos a la siguiente lección. 20. Atajos comunes parte 1 - Figma: en este video, vamos a aprender algo del higo de uso común, mis guardas cortas. Y en esta lección, les voy a mostrar cómo pueden prohibir o hacer zoom en sus pies mi interfaz ocultar y mostrar algunos de los controles. Entonces, empecemos. Entonces primero vamos con el dedo del pie. Mira a Penn. Entonces si puedes presionar tu barra espaciadora y sostenerla y verás esta mano y puedes fácilmente prohibir alrededor o mover este tu marco por donde quieras dedo del pie, este es primer atajo. Ahora, el 2do 1 se trata de los niveles de zoom. Por lo que puedes ver aquí puedes ver que está ajustado a nivel de zoom o 50%. Y fue seleccionado este marco. Si quieres acercar dedo del pie 100% vas a presionar cero por lo que presionando cero para que puedas ver este es el tamaño real del marco fuera del marco son tablero de arte que estoy usando. Ahora también puedes hacer zoom toe fit para que puedas presionar uno para que puedas ver ahora se ha zoom toe fit y es 71% ahora y también puedes presionar uno o nueve. Por lo que uno es más fácil de recordar cero para 100% 1 es para zoom toe fit, y dos es para zoom a selección. Entonces, por ejemplo, si tengo, vamos a alejar primero para y puedes alejar usando comando o control más tecla menos. Entonces tienes dedo del pie sostén tu tecla de control, y junto con eso, tienes que presionar menos fue Omar Plus vamos a acercar así que esto es muy fácil. Además, así que solo estoy sosteniendo mi tecla de control o comando en un Mac si estás en un comando de Mac y si estás en una tecla de control menos y más. Entonces supongamos que waas diseñando en este nivel de zoom y quiero acercar este Hola allá. Entonces, no, voy a seleccionar este objeto primero, Así que voy a arrastrar y aflojar y presionar, también, que puedas ver ahora está en el foco. Entonces si quieres volver atrás o tienes que acercar el dedo del pie al 100% o quieres hacer zoom para encajar pulsa uno. Por lo que esta es una gran manera de alejar y acercar cuando estás diseñando. La mayoría de las veces Cuando estás diseñando, tienes que acercar y alejar muchas veces. Por lo que estos atajos te van a ayudar. Ahora, cada vez que te estabas diseñando, a veces necesitas que tus gobernantes dibujen algunas de las pautas para apoyar tu diseño o tienes que alinear pocas cosas. Entonces en fig ma, tienes que habilitar primero a tus gobernantes para que puedas ver en la parte superior por aquí o a la izquierda. Tenemos normal esto. Entonces vamos a cambio de aliento y estamos ahora Ya puedes ver que tenemos gobernantes en la parte superior y en la izquierda. Entonces si quieres Oh, si no recuerdas este atajo, puedes ir por aquí en este menú y aquí tenemos turno más R. Así que puedes habilitarlo por aquí también. Entonces, una vez que lo hayas habilitado, puedes arrastrar pautas por aquí de esta manera. Van a apuñalar a dos objetos diferentes. Por ejemplo, tengo éste. Voy a arrastrar y soltar mis lineamientos así. Entonces este es otro atajo. turno son y te vas dedo del pie habilitar a tus gobernantes. Ahora he escondido a mi gobernante y se puede ver que mis lineamientos también han desaparecido. Ahora bien, si quieres mostrarle tu diseño a alguien y no quieres mostrarle esta sección de diseño por aquí este panel por aquí también están el panel de capas a la izquierda. Puedes presionar y mantener presionada tu tecla de control o comando junto con tu barra invertida Así controla barra invertida y puedes ver hemos escondido nuestra fig Mazz tú y que está alrededor de nuestros objetos. Por lo que de nuevo se puede mostrar presionando y manteniendo pulsado el comando del controlador más barra invertida Del mismo modo, tenemos otro atajo que es la barra de búsqueda. Entonces si quieres buscar algo rápidamente en fig MMA o quieres agregar algo todo lo que quieres buscar un plug in, tienes instalado la tecla de acceso directo es control barra invertida para que puedas ver control o comando tecla más barra invertida para que puedes buscar por ejemplo, cada alquitrán Andi, solo hago clic aquí aire ITAR enchufe y se puede ver aquí tenemos un nombre que es También podemos volver a ir a buscar y también podemos buscar ejemplos como este contenido real o empresa ganada un montón de cosas. Ahí hay autos cortos. Hay enchufes. Todo puede ser buscado por esta barra de búsqueda por aquí, Así que este es un muy común muy fácil de usar Controlador de teclas de acceso directo Command forward slash. Por lo que tienes que recordarlo barra trasera para esconder tu tú yo granjero slash toe tal Ahora, si estás diseñando para sitios Web o APS móviles, podrías tener tu diseño de cuadrículas o columnas por aquí. Si estás familiarizado con bootstrap u otras horas de Gridley. Entonces voy a agregar rápidamente una gran por aquí, Vamos a añadir pactado. Y, por ejemplo, tenemos esta increíble aquí activada. Y si quiero ocultarlo rápidamente, por ejemplo, por ejemplo, estoy diseñando por aquí y no quiero dedo del pie, ya sabes, Molestado por este credo, tengo dedo del pie use mi tecla de acceso directo, que es control turno más cuatro en Windows y Control más G en Mac controlado Shift cuatro en ventanas para que puedas ver en la parte inferior. Dice cuadrícula de diseño oculta. Esto es muy bonito en fig mark que te muestra la retroalimentación, que es realmente, realmente agradable. Característica de cualquier software de diseño. Si eres una experiencia de usuario o estás familiarizado con la experiencia de usuario, sabes que la retroalimentación es muy importante. Por lo que comanda G en un Mac. Si eres usuario de Mac para ocultar este grado de diseño y controlar turno más cuatro, estas tres teclas se van a ocultar. Lee out crea en Windows, por lo que todo se trata de algunos fuera de los atajos que van a ocultar y mostrar cosas diferentes mientras estás diseñando. Pasemos a la siguiente lección donde voy a compartir con ustedes algunas de las teclas más atajadas que tienen que familiarizarse. Entonces pasemos a la siguiente lección. 21. Atajos de teclado comunes parte 2: en este video, vamos a ver algunos de los atajos de teclado más Sigma que se usan comúnmente cuando estás en un marco o en un lienzo. Por lo que siempre que hayas abierto un nuevo archivo, hay muchas cosas que puedes hacer. Por ejemplo, desea alinear estos objetos. Entonces primero, vamos a ver estas teclas de acceso directo de alineación. Por lo que hay que seleccionar dos objetos para alinearlos. Por lo que una vez que tienes una mentira seleccionada para eliminarlos, puedes presionar arte y nosotros para centros verticales. No, voy a presionar todo y nosotros Así que ahora se pueden ver que se han alineado en dirección vertical . Entonces el de abajo waas subiendo y el de izquierda bajaba, creo que yo Volvamos Contralor Kamanzi y Art y V. Se puede ver así de manera similar podemos hacer, uh, con arte y edad para centros horizontales. Por lo que son centros horizontales son que se puede ver por aquí estos son sus centros. Entonces voy a presionar todo más picor dedo alinearlos así, por ejemplo. Tengo esto y esto y quiero alinearlos o suavemente voy a presionar arte y cada uno para que puedas ver así es como alineas diferentes objetos. Y lo más común, utilizamos alineación horizontal y alineación vertical. Ahora vamos a ver algunos fuera de los atajos de las herramientas aquí en la parte superior, que vamos a exceso muchas veces. 1er 1 es una R F para tablero de arte. Puedes dibujar tu marco o arte, pero por aquí, o puedes hacer clic aquí y elegir entre un tamaño predefinido o aquí, por ejemplo. Voy a ir con este androide. No, vamos a acercarme y me voy a prohibir el dedo por aquí, y voy a presionar mi arquía para una maraña o cuatro elipse, y voy a sostener mi dedo del pie clave de turno, tenerlo en proporción como este infierno por línea. Entonces voy a arrastrar mi línea. Estoy sosteniendo turno, por lo que es recto de igual manera para herramienta fiscal. Voy a presionar mi té, y puedo o arrastrar así o puedo simplemente Presti y oops, estoy tengo dedo de la prensa escape y tengo voy a Presti otra vez y presionar por aquí. Hola, Esperanzas Hola, querida. Algo así y voy a presionar escape en un momento así. Entonces, ¿así es como vas a usar estas herramientas por aquí? Si quieres acceder a la herramienta de gasto, puedes presionar ser tecla de acceso directo y hacer algo así, algo así. Y, um, creo que eso está todo fuera de las teclas de acceso directo, creo que cuáles son de uso común. Y estas son las herramientas que vamos a exceso una y otra vez. Ahora vamos a borrar este, y voy a volver. Estamos aquí y vamos a estudiar. Algunos de los atajos más comúnmente iban a usar muchas veces uno de ellos está duplicado, Así que quería elegirla esta capa, y quiero que sea exactamente igual así. Hay muchas maneras en primer lugar puedes usar arte o tecla de opción y presionar, y tendrás un cursor doble como este. Simplemente arrastra este objeto donde quieras colocarlo, y podrás ver que esto es un duplicado. Ahora puedes presionar y mantener presionado comando o control más d tohave. Otro duplicado, será. Repetirá tu paso. El mismo espaciando todo y duplicar el objeto. No, tenemos tres fuera de estos rectángulos. Yo quiero ponerlos a tientas. Voy a seleccionarlos a todos y ahora voy a presionar Comandante Control Grupo G ellos. Se puede ver el ícono por aquí. Este grupo uno ha sido cambiado. Tiene esta respuesta marchante aquí a su alrededor. Entonces es un grupo y todos estos rectángulos están dentro de este grupo? No. Si quieres Owen, agruparlo con la misma tecla de método abreviado. Pero con una adición off turno. Entonces control o comando, más turno más g Así que puedes ver ahora están de vuelta. Estamos fuera de ese grupo. Ese grupo ya no es. O ahí ahora, la izquierda, se puede ver que esta es nuestra pila anterior. Por lo que tenemos imagen en el rectángulo superior este rectángulo azul uno en la parte inferior tres rectángulos negros y texto. No, Si quieres cambiar la posición fuera del apilamiento sin, sabes, usando tu ratón, puedes o bien arrastrarlos así, se los arrastran así. Por ejemplo, tengo por aquí, así que si muevo mi rectángulo en la parte superior, puede ver que el texto está detrás de este Lear así que si lo muevo hacia arriba, ahora está por aquí. Por lo que esto se llama orden de apilamiento. Voy a cambiar los colores de estos rectángulos para que puedas ver fácilmente la diferencia. Y para éste, voy a usar el blanco. Ahora, puedes ver que tengo todos estos rectángulos por aquí, y este es mi rectángulo en la parte inferior. No. Si quiero cambiar el orden de apilamiento, puedo usar la tecla de acceso directo como desplazamiento de control y corchetes. Entonces, no, voy a presionar. He seleccionado esta capa, por ejemplo, esta capa, esta capa, y la voy a desplazar hacia arriba o hacia abajo mediante el uso de cambio de control en soporte para que puedas ver por aquí ya sea puedes usar esto va dedo del pie estar en la parte inferior. Entonces si golpeo para usar control shift y bracket left record, va a bajar la mayor parte, um, um, fuera de todas las capas, apilan pilas. Entonces, igual manera, si presiono el registro correcto o final, se va a subir. Se puede ver u escuchar la tecla de acceso directo para el teclado Mac es art plus command plus bracket. Por lo que es nuestro soporte de comando y para ventanas control shift y bracket soporte izquierdo y derecho . Por lo que también puedes quitar tu turno de la tecla y solo tienes que pulsar y mantener pulsado el control junto con tu soporte y puedes ver que se moverá un paso hacia arriba, un paso hacia abajo, un paso hacia arriba. Entonces voy a dejar turno dentro de esta, uh, uh, tecla de acceso directo. Por lo que mostraré ambos accesos directos en versión de Mac y en versión de Windows para movimiento de una sola capa si no lo hacía la pila y moviéndose hacia arriba y hacia abajo en la parte inferior y en la parte superior de la pila usando sus teclas de acceso directo. Ahora terminemos esta lección mostrándote las teclas de método abreviado del último dedo del pie, que están enmascarando, y este componente para que puedas ver si pasas el cursor por ahí. También te muestra la tecla de acceso directo para Windows. Es control art plus K. Y para Mac, es control todo para plus sort, command R plus key u option plus key. Tan mismo, todo es igual. solo mando es para Mech. Entonces para crear un componente que se va a utilizar una y otra vez. Entonces me voy holgura del dedo del pie. Todos estos tres y me voy de pie o haga clic aquí o puedo pasar control art y key . Y ahora se puede ver que el icono ha sido cambiado. Y ahora es un componente, por lo que se puede ver esta es una tecla de acceso directo muy buena. Lo vamos a usar una y otra vez si quieres. Dedo del pie, retrocede, puntera tus estados mayores y quieres romper este componente. No quieres usarlo con razón. ¿ Podemos tener muchas opciones por aquí? Está bien. Para que puedas ver u oír. Adelante. Traer para atrás. Estos fueron el atajo. Las claves se utilizan selección de grupos o selección de marcos. También puedes enmarcarlas. Aplanar contorno, utilizar como mezquita. Esta es la siguiente tecla de método abreviado. Te voy a decir control off plus m Entonces así es como se crea un componente? No. Si quieres enmascarar algo, por ejemplo, voy a usar una elipse por aquí. Y quiero mezquita, esta zona detrás de mí. Entonces este es un componente en la parte posterior, y esta es la elipse en la parte superior. Entonces lo que voy a hacer es ir de pie. Mueve esto en la parte de atrás. Este está en la parte de atrás. Se puede ver que esta va a ser mi mezquita y la de arriba va a ser lo que en realidad estoy tratando de ocultar. Por lo que estas porciones de izquierda y derecha ahí van a estar escondidas. Entonces voy a seleccionar a ambos de ellos. Se puede ver mi contenedor está en la parte posterior y mi información o lo que quiera mostrar. Mi contenido está en el contenedor frontal en la parte trasera, contenido en el frente. Por lo que vamos a holgar a ambos y vamos a control de senos del dedo del pie o mando control R más M sobre em. Por lo que se puede ver ahora que son must. Entonces esto es Puedes ver este cartel muestra que puedes ver. ¿ Qué? Aquí. Esto es pequeño. Um, se puede ver como la luna. Entonces este es este ícono. Esto demuestra que esto ha sido enmascarado. Entonces esta es en realidad nuestras mezquitas. Para que podamos ver, mostrar y ocultar nuestra mezquita haciendo clic aquí. También podemos bloquear la capa por aquí, y estos son nuestros componentes. Entonces este es el contenido que estamos tratando de mostrar. Entonces, no, tengo un consejo muy pequeño y sencillo para ti. Entonces una vez que estás diseñando y empezaste a diseñar en fig MMA y te has olvidado de cualquier tiburón . Erkki, no busques en Google. Basta con hacer click aquí en esta zona estrecha, este signo de interrogación. Y aquí tenemos atajos de teclado de atajos. Por lo que una vez que seleccionas estos atajos de teclado, ya sea que estés en un Mac o en un PC con Windows, podrás ver fácilmente cualesquiera que sean los diferentes atajos. Zoom, formas fiscales elección causa que transforman, arreglan y componentes. Por lo que esto termina nuestro higo más atajos. Espero que hayas disfrutado y aprendido Señor de las cartas cortas y las vas a usar en tus próximas lecciones. Y en tu lo nuevo puedes ver proyectos de diseño. Entonces si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 22. Colaboración con diseñadores en Figma: una de las características más cool de Sigma es que puedes colaborar con otros diseñadores, vivir en cualquier diseño. Entonces si estás diseñando, por ejemplo, este archivo puedes ver estás viendo dos cursos por aquí. Uno está por aquí, que es sólo cambiar mostrando el nombre del otro diseñador, que está incluido en mi equipo ahora mismo. Se puede ver aquí dice 40 meses ahora si vuelvo dedo del pie equipo mi equipo, se puede ver este es mi equipo que tú. Emocionante. Y del lado derecho, puedes ver que soy yo. Y este es en realidad mi otro ojo. Mac y yo hemos registrado y usando otra cuenta usando este nombre, así que traté de cambiar en él. Por lo que es más fácil para ti ver que alguien más está tratando de cambiar este diseño. Puedes invitar a miembros haciendo clic en esto en miembros blancos por aquí, Pero tienes que venir a esta pantalla fuera de tu equipo, en realidad, Así que este es mi equipo. Y si volvemos, déjame volver. Y por ejemplo, se puede ver estos son los cambios ings que estoy tratando de hacer. No. Si trato de cambiar algo en mi yo, Mac, o trato de cambiar el movimiento, el cursor se puede ver. Ahora está demostrando que el Fatma o el otro diseñador está tratando de cambiar algo. Entonces si trato de sostener esto y tratar de arrastrarlo por aquí, puede ver que esto está en realidad, uh, pasando en mi otro Mac. Entonces no lo estoy haciendo en mi PC. Entonces si trato de hacer algo como esto Y si trato de cambiar el color, déjame cambiar algunas de las cosas por aquí para que veas que dos diseñadores pueden trabajar simultáneamente en este diseño. Por lo que estoy tratando de moverme, poner a mis clientes y tratando de cambiar, Ya puedes ver. Entonces esta soy yo moviéndome y otra caja se está moviendo por otro diseñador. Entonces así es como en realidad se puede trabajar simultáneamente en un solo diseño y dos o más de dos diseñadores pueden trabajar simultáneamente. Entonces si estás trabajando en equipo, puedes trabajar en un solo diseño, y puedes acelerar tu proyecto teniendo a múltiples diseñadores trabajando en la misma cosa. Entonces si tienes, por ejemplo, guardias de estilo ya creados y tus componentes. Simplemente puedes agregar diseñadores y se van a arrastrar y soltar esos componentes y seguir construyendo proyectos con mucha velocidad. Por lo que esta es una característica muy cool Off Sigma colaboración con sus diseñadores. Se llama colaboración en vivo. Muchas otras herramientas también lo están implementando. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta o tienes alguna sugerencia, siempre puedes preguntarme, Pasemos a la siguiente lección. 23. Trabajar con bibliotecas de equipo: en este video de, vamos a hablar de una característica muy bonita de los matrimonios de Rick llamada bibliotecas de equipo para que puedas compartir tu puedes ver u escuchar textiles. Color se esfuerza en tus estilos de hecho, junto con tus todos los componentes. Entonces cada vez que diseño, en realidad estoy diseñando. su mayoría diseñé en una página de diseño, así que tengo una página separada para guía de estilo. Entonces en esta página, normalmente tengo todos los componentes, todos los iconos diferentes, que ya son componentes. Por lo que voy a compartir con ustedes cómo toe realmente maneja su biblioteca de equipo y cómo puede actualizarla y cómo se reflejará esta actualización a sus otros miembros del equipo. Entonces es Básicamente es la colaboración tipo off diseñado biblioteca compartir donde puedes compartir toda tu empresa y vender tus estilos que has creado en tu proyecto. Por lo que otros diseñadores pueden recogerlos fácilmente y usarlos en otras pantallas. Entonces lo que tienes que hacer es cualquiera que sean tus principales componentes. Por ejemplo, se puede ver navegación inferior. Esto en realidad es un componente, y es instancia realmente guardo todos mis componentes maestros en esta guía de estilo. Por lo que en la guía de estilo, se puede ver. Contamos con todos los componentes que tenemos logo, logo pequeño, logo grande de lo que tenemos. Diferente significaba este plan de dieta chips, y luego tenemos botones diferentes a los que tenemos. Barra de búsqueda. Estas son las navegaciones. Entonces lo que vamos a hacer es crear diferentes marcos, por ejemplo, o éste. Yo lo voy a llamar Navegación. Entonces ahora lo que voy a hacer es que no necesitamos en este. Entonces éste no está en la navegación. Esto en realidad es navegación. Esto en realidad es una navegación. Y, um, esto no es navegación. Esto está fuera de esto. Esto también está fuera. Entonces los voy a separar en remolque, diferentes categorías. Por lo que en realidad los estoy gestionando en diferentes tableros de arte. O puedes llamarlos marcos. Entonces la navegación va a estar por aquí. Entonces lo que sea que esté en la navegación, se va a quedar por aquí. De igual manera, me voy dedo del pie crear otro marco A o F G. Y aquí tengo voy a llamarlo, um, botones y y controles. Entonces por aquí, voy a arrastrar Mis dos finge mi tal barra porque es un elemento de control. Estos están bien, selecciona, muévalos aquí también. Y aparte de eso, creo que esto va a estar bien. Entonces ahora vamos a crear otro marco. Vamos a llamarlo, um, arrestados sean guardias y artículos. Entonces aquí vamos a utilizar todas estas opciones que van a estar dentro de la receta. Cardos. También va a ser receta. Esto en realidad está relacionado con la búsqueda. Vamos a moverlas. Vamos a moverlas en la sección de cargas por aquí porque estos son alfileres, así que los vamos a usar. Um, vale, así que aquí tenemos una tarjeta, una gran receta por aquí, así que voy a ampliar este tablero de arte a continuación. Muévalos por aquí, Haz de este tablero de arte un gran, más grande como este. Después tenemos esta receta grande, esta pequeña receta, luego tenemos esta tarjeta puesta. Entonces tenemos el paso de la receta de paso preparando una receta. Por lo que tenemos diferentes componentes por aquí. De igual manera otra vez. Si quieres quedarte con tu logo , también voy a llamarlos. Vamos a crear en que estén aburridos o marco. Y voy a llamarlo, um ir, ir e iconos. Entonces voy a agarrar todos mis logotipos e iconos y los arrastraré por aquí así. Estos son pocos iconos. En realidad. Puedes crear un paquete completo de cinco conteos por aquí. Entonces en realidad estoy creando Vamos a hacer de esto un regular aquí. Y ahora voy a volver a dimensionar mis tableros de arte. Nada más. Nada de fantasía. Estos son Mis iconos estaban aquí y mi local y me voy de pie. Guárdalos así. De acuerdo, Así que una vez que he creado en gestionado esta guía de estilo, hay que ir a los activos del dedo y se puede ver por aquí. Estos se llaman, pero y luego tenemos Si, um, um, abrimos estos botones y controles, tenemos diferentes botones y controles. Entonces tenemos logotipos. Creo que éste se adapta mejor a la sección de recetas por aquí. Y una cosa más, si quieres cambiar el color de fondo un poco algo más porque es más fácil ver fondos blancos por aquí. De igual manera, para este, voy a usar aquí un poco de garantía de Gresh rojo. De igual manera, para este, voy a ir con esto. Y también por esta diversión, solo para asegurarnos de que todo sea visible fácilmente, Uh, Hagámoslo más pequeño así. De acuerdo, entonces lo hemos manejado todo. Si vamos del dedo activos, se puede ver que tenemos diferentes categorías. Locales y navegación es más fácil dedo del pie. Los reutilizas. No. Una vez que hayas organizado todos tus estilos, tus componentes tienes que hacer clic en este icono de la biblioteca del equipo en este panel de activos movido a oh, este panel de activos y dar click en este. Ahora ya puedes ver tengo esta fig Mahfoud AB puedes dar click en Publicar y nos vamos de pie. Llámalos. Vamos a llamarlos llenos. Ahora se puede ver que es biblioteca editorial. Me está mostrando que va a publicar esta actualización bibliotecaria publicada con éxito. Ahora, una vez que hayas publicado tu estilo, puedes volver a Sigma. Entonces aquí tenemos este estigma un gas estigma, que es nuestro aprendido, Usted emocionante. Y ahora voy a crear un nuevo archivo por aquí. Entonces vamos a crear un nuevo archivo. Sin título y me voy a abrir de pie este sin título y voy a crear un marco. Y si moví activos, puede ver si tenemos una ficha por aquí para crear un sector de componentes Lear. Entonces para eso vamos a explorar nuestras bibliotecas. Entonces voy a dar clic aquí, y me voy a poner de pie hecho esto para este archivo. Por lo que una vez que he encendido esto, puedes ver que puedo tener acceso a todos los botones. Todo lo que tenemos por aquí. Por ejemplo, este botón siguiente arrastra las cosas chip por aquí en esta barra de este tipo por aquí. Por lo que puedo usar todos estos componentes. De igual manera, si trato de crear, por ejemplo, y enredar por aquí y quiero acceso de dedo, los colores que puedes ver tenemos todos los colores por aquí. Entonces estos son mi estilo, por ejemplo, crema radiante de disco. Para que pueda acceder a todos mis estilos, todos mis botones, todos mis componentes, por ejemplo, Aquí si lo llamamos componentes de tarjeta de receta, se puede ver que tengo todos estos componentes. Por ejemplo, éste. Puedo arrastrarlo hasta aquí y usarlo así. Entonces todos mis otros diseñadores, solo pueden arrastrar y soltar dentro de esto un equipo, por ejemplo, tenemos Volvamos atrás y puedes ver que este es nuestro equipo te aprendió emocionante. Por lo que he creado la guía de estilo Theis en este equipo. Por lo que tengo sólo son operados plan de equipo de educación. Por lo que me dejaron crear este sistema de diseño en este diseño guías de estilo que se pueden compartir con otros miembros del equipo. Por lo que ahora se puede ver este fue mi proyecto. Y si creo algún otro miembro del equipo, por ejemplo, esto mucho más estamos aquí. Si abre un nuevo documento o intenta agregar algo por aquí, puede acceder fácilmente a todo este diseño. Y por ejemplo, piernas. Esto es local. Para que puedas ver también podemos acceder a nuestros textiles. Por ejemplo, Si trato de escribir algo por aquí, vamos. Y ahora puedes ver si voy por aquí. Tengo textiles para comida, fig map para poder cambiar a éste o puedo cambiar a éste. Por ejemplo, éste se puede ver que estamos aquí. También puedo cambiar a cualquier estilo de deck que tengas para que puedas ver por aquí tenemos diferentes textiles para que puedas cambiar de dedo cualquier textil. Y si quieres cambiar, ve a la definición toe a. Consigue esto. Entonces si voy por aquí y si cambio algo en esta guía de estilo por aquí, por ejemplo. Vamos a Jane algo por aquí, por ejemplo, este. Entonces voy a cambiar el derecho de esta para que puedas ver en cuanto cambie algo que diga Publicar cambios de editor a tus bibliotecas de equipo si hago clic en publicar. Um, raro cambiado. Entonces voy a actualizar mi biblioteca de publicación que he cambiado esta cosa. Publicar Por aquí. Y ahora si voy a esto por aquí, ¿de acuerdo? Y trato de usar este por lo que ya estaba operado. Vamos a cambiarlo de nuevo. Por aquí. Vamos a cambiarlo de nuevo. Entonces me voy dedo del pie Solo muévalos dentro en medio así. Yo lo fumé en medio. Entonces vamos a publicar de nuevo los cambios. ¿ De acuerdo? Entonces, no, Si voy por aquí, puedes ver que dice que hay sujetos componentes disponibles, así que si puedo descartarlo o puedo revisar Así que si haces click en revisión, dice que tienes que actualizarlo. Entonces si trato de actualizar, se puede ver que se va a actualizar el alineamiento que se ofrece. Entonces déjame mostrarte una actualización más, para que puedas verlo fácilmente así Cambiemos su color a otra cosa. Usemos esto, uh, uh, este color naranja sólo dedo del pie demostrar que he cambiado a un asesino. ¿ Cómo? En realidad funcionan las bibliotecas de vapor. Entonces aquí estoy, probando el uso del dedo del pie. Esta y nueva es en realidad esta naranja, así que tengo que revisarla. Tengo que actualizarlo y se puede ver que se ha actualizado a este naranja. Entonces así es como realmente compartes bibliotecas con los miembros de tu equipo. Puedes compartir tus componentes. Podrás compartir todo tu estilo, guiar tu estilo, tus botones, tus componentes con los miembros de tu equipo. Y así es como realmente los manejas en diferentes marcos dedo del pie. Nómenlos adecuadamente. Entonces cuando alguien acceda a ellos, se puede ver que estamos aquí. Alguien acceda a ellos. Tienen diferentes categorías, por lo que pueden arrastrarlos fácilmente hacia arriba. Entonces tienes que moverte. Siempre que creas un nuevo archivo, tienes que pasar a activos e intentar usar tratando de encender tercero esta biblioteca. Entonces si encendí este, puedes ver también puedo acceder a la biblioteca de colores personales. Entonces eso se despejó un rectángulo. Y si voy por aquí, puedes ver aquí tenemos la aplicación freak Mahfoud, los nuevos colores emocionantes y colores personales. Por lo que estas son todas diferentes bibliotecas, estas bibliotecas de equipo de director. Puedo acceder en remolque cualquier proyecto. Por lo que espero que hayan disfrutado de esta lección de biblioteca en equipo. Si tienes algún problema o si estás atascado algunos en alguna parte, siempre puedes hacerme una pregunta o empezar a discutir. Pasemos a la siguiente lección. 24. Poca de la comunidad en Figma: nueva característica: hoy vamos a ver una característica muy reciente de sigma ab, que es comunidad. Ahora acaban de lanzar su ficha de comunidad. Se puede ver por aquí a la izquierda, Comunidad en cama beta. Esta es versión beta para comunidad y esta es una gran, realmente gran iniciativa y muy gran característica para este fig mi app. Y realmente lo vas a disfrutar. Entonces si haces click aquí en comunidad, puedes ver este es mi perfil de Fichman. Handel dice Fichman.com, S y N3C y la tasa de activo y DC. Y si no sabes configurar tu perfil público, esta URL, puedes ir a esto aquí, tu nombre. Déjame volver a la configuración. Por lo que hay que ir a la configuración. Y se puede ver en ajustes, este es mi nombre, correo electrónico, contraseña. Y entonces tenemos otra cosa que se llama perfil público. Ahora puedes ver he establecido mi perfil público manejador en S y destinatario. Y si quieres establecer tu perfil público, intenta elegir el nombre que te sea específico o lo usas mucho en diferentes foros. De acuerdo, así que una vez que establezcas tu perfil público, así que configura tu perfil público, puedes ir a la comunidad. Así que tuve que dar click dos veces en comunidad para llegar aquí. Algo se estaba estropeando. En realidad, está en beta. Entonces ese es el problema tal vez. De acuerdo, así que aquí tenemos, si miras arriba, tenemos diferentes categorías niños de UI, si haces clic en kits de interfaz de usuario, tendrás muchos kits de interfaz de usuario gratuitos. El pueblo, diferentes miembros de la comunidad que están compartiendo contigo u otros miembros. Entonces esa es una gran iniciativa que diferentes personas han compartido sus recursos y podemos usarlos y traerlos a nuestros proyectos. De igual manera, se puede ver que tenemos diseño web. Por lo que hay muchísimas toneladas de recursos para iconos, para ilustración. Entonces si tú, por ejemplo, si quieres traer algo, puedes hacer click aquí. Y esto nos puede gustar. Por ejemplo, me gustan estos, así que voy a dar click en esto, como puedes duplicar esto. Entonces si hago clic en duplicar, se va a abrir en mi pestaña sigma como un nuevo archivo. Ya puedes ver que tenemos todas las ilustraciones para que las podamos utilizar en nuestros proyectos. Esto es realmente fácil de usar estas ilustraciones. Entonces volviendo a la comunidad, permítanme mostrarles que hay pocas cosas más que les voy a mostrar que podrían ser útiles para ustedes. Una es esta hendidura etiquetas ID. Entonces si quieres buscar algo, iconos, conjunto de iconos o algo puedes hacer click aquí. De igual manera, tenemos ilustraciones. Tendré wireframes y hemos diseñado sistemas que son realmente útiles. Entonces si estás tratando de iniciar algún sitio web o algo así, tienes que usar algún sistema de diseño. Entonces para poder usar eso, hay una característica, déjame solo usar esta. Y vamos a duplicar esto. Se puede ver 1.1 K 1100 personas ya lo han duplicado. Por lo que voy a dar click en duplicado. Y voy a abrir en mi FISMA. A ver, se está llevando algún tiempo. Ok, entonces aquí tenemos los estilos de diseño de materiales te, me pongo. Ahora, si vas por aquí, por aquí, puedes ver que esto está realmente abierto en mis borradores. Entonces este es en realidad mi proyecto el cual es borrador. Si quiero abrirlo, tengo que abrirlo por aquí o moverlo a otra cosa pinchando por aquí. ¿ De acuerdo? Por lo que ahora siempre que en tienes que compartir tu diseño de materiales, tienes que ir a activos. Y se puede ver ya hay una versión ligera, hay muchos activos. Entonces aquí, ahora puedes dar click por aquí y tienes que dar click en publicar. Para publicar estos estilos. Tienes que publicar esta guía de estilo para que puedas usarla en tus diseños. Por lo que voy a dar click en publicar. Pasar al equipo para publicar componentes. Entonces movamos equipo. Pasemos a mi jugada. Pasemos a clase sigma. Este es un proyecto. Entonces voy a decir Material Design Lite. Entonces lo voy a publicar ahora. ¿De acuerdo? Ahora una vez que hayas publicado estos, tenemos que volver a esta clase sigma. De acuerdo, entonces ahora mismo en este proyecto, se ha compartido. Entonces si trato de abrir cualquier archivo, por ejemplo, este sin título por aquí, puedo usar estos componentes. Entonces, eliminemos esto. Suprórmese esto. Entonces si voy a bienes, ya ves que me hemos dejado ir a éste. Vamos a revisar este para que se comparta, pero tengo que habilitarlo. Por lo que he usado este icono de la biblioteca. Por lo que tengo dos nm alerta. Y se puede ver que tengo componentes de diseño de materiales por aquí. Si quiero usar algún componente como este, botón plus o botón Nuevo archivo o como lo llames. Puedo arrastrar y soltar diferentes listas. Puedo arrastrar y soltar diferentes tarjetas. Por lo que no me refiero a crear estos por mí mismo. Este es un muy buen comienzo. Te va a ahorrar toneladas de tiempo. No tienes que crear todos estos componentes. Por lo que esta es la característica de las comunidades. Por lo que la comunidad es realmente útil. Voy a poner un amor por aquí. Y si vuelvo, puedes ver si vuelvo a mi comunidad por aquí, escuela de vuelta, ¿cuál es el problema con esto? A veces no vuelve a la comunidad sigma de todos modos. Entonces si vuelves a mi perfil por aquí y tu perfil es visible, Abramos este. Por lo que puedes ver en este perfil tengo recursos y me gusta así si hago click en me gusta, puedes ver, así que todos los diferentes recursos tengo jugo o me han gustado r por aquí. Para que puedas ver perfil de usuario, biblioteca sigma, he vivido. Aquí. Tenemos estos dos plugins. Entonces así es como en realidad usas tu comunidad. Entonces volvamos a la comunidad y podemos hacer click en plugins para así tenemos que archivar pestañas o archivos de cabello y plug-ins. Por lo que también puedes explorar diferentes creadores. Por ejemplo, esta persona, esta persona, o si quieres seguirlas, puedes seguirlas para nuevas actualizaciones. Entonces cualquier nueva extensiones o algo así. De igual manera, puedo hacer clic en sistemas de diseño, por ejemplo, como este, y puedo usarlo en mis diseños, mis sitios web o lo que sea. Por lo que esta es una gran característica de usar. Consigue diferentes recursos, úsalos y tack y di gracias y pon algo de amor a los recursos o a los creadores de estos recursos. Esa es una característica realmente genial, una gran adición a sigma. Por lo que espero que hayan disfrutado de esta lección. Si tienes alguna pregunta siempre me puedes hacer. Pasemos a la siguiente lección. 25. Uso de cuadrículas y guías: en esta lección antes de cavar en remolque y empezar a diseñar algo me voy a familiarizarte con algunos de los conceptos que utilizamos mucho tiempo en diseños en diseño, tu diseño, Diseño web y mucho fuera de diseñadores y cursos. He visto que en realidad echan de menos esto, lo cual es muy importante, y eso en realidad es cuadrícula de diseño. Por lo que siempre tienes la cuadrícula de diseño del dedo del pie siempre que estés diseñando para una pantalla móvil. Ah, nuestra página web. Entonces en este video, voy a explicar cómo puedes usar este grado de diseño y cómo puedes crear outs de manera diferente cuando estás diseñando para sitios móviles y Web. Ahora bien, si quieres ver cómo crear grado bootstrap, si eres diseñador Web, entonces puedes tener a YouTube mi canal y puedes ver este video. Bootstrap para creación de grupos, este es un video detallado de ocho minutos de video sobre cómo crear y Bush un grado de cuatro en sigma. Entonces, empecemos y veamos cómo podemos crear diferentes tipos de cunas. Entonces en realidad hay dos tipos de carreras, así que les voy a mostrar una es en realidad la avaricia enferma de este cerdo. Y 2do 1 si trato de sumar por aquí, se puede ver que se va a sumar debajo de uno. Por lo que el default es grande, tan grande. Entonces me voy dedo del pie y 10 cerdos enfermos es el tamaño de la caja, así que puedes ver si acercamos aquí. Esta cada caja es de 10 cerdos enfermos por 10 píxeles. Entonces si queremos cambiar algo, por ejemplo, por ejemplo, advertí que la caja va a ser una gran venta y no voy a quitar esto. Por lo que a esto se le llama 88 salida Genial. cual utilizamos mucho tiempo en el desarrollo móvil Android e incluso en nuestros Diseños de U. S. S. Entonces si estás diseñando para iPhones o abs Android, creo que esta es una gran grilla infantil. Entonces si quieres cambiar el color de lo Grande, por ejemplo, quiero que sea un poco en esta gran zona, algo así. Se puede cambiar el color fuera de la pantalla. Entonces, ¿así es como se crea a Theis? Uh, se estimuló. Ahora vamos del dedo del pie a otra cosa, que se llama columnas y filas. Entonces si estoy diseñando para laboratorios móviles, tengo que alinear mis cosas en columnas más grandes. Por lo que nos tienen sencillo layout o siguen algún layout. Entonces para la alineación, voy a agregar algunas columnas para que veas que puedo agregar, como cualquier número de columnas. Pero siempre prueba dedo del pie, añade los números que se pueden dividir por dos. Por lo que nunca sumes nuestros números, ni siquiera usa. Usa siempre números pares. Entonces así es como usas los números pares. Entonces en realidad estoy usando seis ahora mismo en este diseño, se puede ver que puedo ver en segundo plano porque no lo es. Esta es la opacidad, en realidad. Entonces si trato de endurecerlo, se puede ver que no puedo ver qué hay detrás. Entonces es mejor que intente usarlo 10% algo como esto, poder diseñar y alinear fácilmente mis cosas alrededor. Lo que golpeó segundo es su tipo, por lo que puede alinearlo en el medio y puede especificar el puente fuera de las columnas. Por ejemplo, quiero columnas de 80 píxeles de ancho, algo así. Y Goodall es en realidad la distancia entre dos columnas. Entonces esta es la canaleta. Podemos usar 30 algo así, o tal vez 24. Depende del tamaño de la pantalla sea cual sea la pantalla que intentes usar. Entonces si trato de usar 12 por aquí, puedes ver que se ve algo como esto. Ahora, también puedes guardar tu diseño, crea. Se puede ver por aquí, aquí en el estilo de actualización para que pueda guardarlo en 12 columnas o algo así. Parte del nombre aquí, causa así algo como esto. Por lo que he creado estilo acordado y puedo aplicar fácilmente en cualquier verde. De igual manera, por ejemplo, voy a crear otro tablero de arte E. Y voy a usar iPhone ocho más No, voy a crear un genial claro y me voy a puntera press plus y se creó 10 pixel. Yo quiero dedo del pie quería ser como 16 cerdos son geniales, por ejemplo. Por lo que puedo tener un 16. Los cerdos son geniales así. Ahora bien, si trato de colocar mi botón por aquí, por ejemplo, puedo colocar mi botón. Se va a apegar a estas zonas para que veas que este es mi trasero, y voy a usar la redondez fuera de ella, y voy a usar algún color como este. Y si traté de alinearlo en el medio. Entonces ahora mismo está en medio. También puedes tenerlo para gastar dos cajas específicas como esta. Entonces ahora puedes ver así es como en realidad intentas usar lo similar para texto. También puedes alinear tu texto. Hola. Y puedes alinear tu texto a tu cuadrícula así. Entonces estas son en realidad mis reglas. Entonces estoy tratando de usar esta 80 horas aquí para mi siguiente. Entonces esta es en realidad la zona que estoy tratando de usar. Entonces si trato de reducir la capacidad 50% para que puedas ver mejor. Por lo que en realidad esta es la zona de la cabeza o la zona que va a cubrir. Entonces si trato de moverlo por aquí, Entonces si trato de holgar este para que veas este es el límite que lo rodea. También puedes alinearlo en el medio o un trabajo. Pero creo que se va de pie. Usa tanto espacio. Entonces así es como puedes usar esto, y puedes alinear tus diferentes iconos en. Además, se puede agregar otro grado. Por ejemplo, si quiero tener algunas columnas por aquí, para que puedan ver puedo usar cuatro columnas y las voy a tener en el centro. Y ese es tu 60. Usemos más 75. Eso es usarlo. E. Esto se ve un poco mejor para mí, y voy a usar 24. Mayor tamaño 20 es, creo. Bien. Ahora puedes ver que puedo alinear reuniones con discreto. Entonces vamos así. Entonces no tengo dos grados. Una es mi base Rejilla basal o mi credo en la parte posterior, que es un cerdo enfermo, Genial. Cuál es el trabajo, en realidad, cajas y una es cuadrícula de columnas. Entonces uno es, uh, 16 cerdos enfermos también puedo usar hizo por aquí algo así para tener más opciones para alinear cosa. Entonces lo que sea que estés diseñando en una aplicación móvil, prueba dedo del pie tener algo como esto. Te va a guiar. Puedes alinear fácilmente tus elementos en esto junto con estas líneas, por ejemplo, así. De igual manera, también puedes habilitar tus reglas turno y son y puedes, uh, arrastrar y soltar diferentes pautas por aquí. Dedo del pie a línea cosas mejor. Entonces cada vez que trato de crear otro pequeño tablero de arte, se puede ver esta pauta se comin por aquí porque la he dibujado sin seleccionar mi tablero de arte. Por lo que siempre que quieras tener, siempre que quieras tener algo que va dedo del pie actuar como una pauta global, puedes ver tu cabello. Entonces si traté de seleccionar este derecho aviso eléctrico. Entonces si caigo, dibuja algo sobre él. Y si trato de crear otro tablero de arte, por ejemplo, como éste, se puede ver que aquí no hay ninguna pauta. Incluso si trato de usar el mismo tablero de arte que he usado antes. Por lo que se puede ver que no hay pauta porque he seleccionado y he dibujado esta pauta para esta pantalla específica. Ahora bien, si quieres tener una pauta global, por ejemplo, yo creo otro tablero de arte por aquí, que va a ser iPhone Pro X. Vamos a crear del mismo tamaño Ivan ocho plus. Ahora puedes ver que estos son el barco. Los tableros de arte son del mismo tamaño, pero si quiero tener y ah directriz que va a ser global, tienes seleccionado de remolque, y si intentas arrastrarlo y soltarlo dentro de esta zona, va a estar presente el éste. Entonces lo que tenemos que hacer es arrastrarlo y dejarlo caer en el área media, que no es el área común, que es un espacio vacío que no es el 80 off cualquier tablero o marco de arte. Entonces voy a dejarlo caer sobre el cabello y se puede ver que está presente o en las tres tablas de arte . Entonces así es como realmente usas esta global estas pautas globales para alinear todos tus elementos. Por ejemplo, si tengo tal vez una navegación inferior por lo que se alineará a esto. Entonces si tengo una navegación superior, será en esta sección para que puedas dividir toda tu aplicación móvil o tu diseño Web lo que tengas, usando estas pautas Las columnas de Grid para que puedas elegir estos lineamientos locales y globales lineamientos. Estas columnas, este diseño, diseño puntera de cuadrícula, mejores diseños para diseñar APS de mejor aspecto. Espero que no hayas destruido este concepto, y realmente deseo que aprendas esto y lo uses en cualquier proyecto de diseño que hagas. Pasemos a la siguiente lección 26. Nuevo Figma Auto Layout 101: Hoy vamos a echar un vistazo a una de las características de Figma, que es auto-layout. Por lo que se han actualizado recientemente. Este es mi 2022 y te voy a mostrar cómo usar eso. Y agarremos algunos botones y creemos algo increíble para ver cómo funciona. Entonces lo mismo es, empecemos con T, y voy a escribir algún texto por aquí. Vamos a crear un botón. Voy a hacer que sea 20 pixeles. Sigamos usando inter bold. Y para crear un botón, voy a presionar Shift a. y hemos creado un Auto Layout. Se ha agregado maquetación automática. En cuanto agreguemos auto-layout, se puede ver que este es un nuevo panel a la derecha. Tenemos la dirección de la auto-disposición, dirección horizontal, dirección vertical. Estos son los paddings entre el espaciado entre artículos que voy a compartir contigo en unos momentos. Y este es el relleno alrededor de este botón. Agreguemos un color de relleno. Agreguemos un color de relleno de esto. Vamos a usar este color azulado. Y hagamos algunas esquinas redondeadas de ocho píxeles. Y ahora vamos a experimentar el relleno alrededor de este botón. Entonces para este auto-diseño, el relleno es horizontal. Relleno es esto. Para que pueda arrastrarlo así. Se puede ver que hay líneas rosadas dentro del botón que me está mostrando, vamos a mantenerlo a 40. Y esto va a ser el horizontal, superior e inferior. Por lo que voy a guardarlo a 16. Entonces este es mi botón perfecto, tipo de botón perfecto. Tratemos de usar algún color azul oscuro para el texto del botón. De acuerdo, así que este, éste se ve muy bien. De acuerdo, entonces una cosa más que han añadido por aquí. Si pongo el cursor sobre el botón, se puede ver si hago clic aquí, me dejó introducir el valor por aquí. Entonces aquí está el relleno. Por lo que una vez, haga clic una vez. ¿ Y qué pasó? Aquí está el marco. Uy. Por lo que ahora tengo valores diferentes. Para que puedas ver por aquí, tengo diferentes valores para arriba, derecha, inferior, e izquierda. Por lo que creo que necesito hacer click aquí para ver que esta es la correcta. Entonces intentemos reducirlo. Creo que hay un error porque una vez que cambio el valor, esos desaparecieron en realidad. De acuerdo, así que los tengo ahora. Entonces si hago clic aquí, se puede ver esto es si hago clic aquí, 20, vale, así que aquí lo tenemos de nuevo. Por lo que tengo que hacer click aquí de nuevo, diez. Y ahora han desaparecido. Uy, creo que hay un bicho ahora mismo de todos lados, para que puedas controlar todo desde aquí. Entonces si quieres rellenos independientes, puedes abrir esto para que puedas ver que tengo fijaciones independientes para izquierda y derecha. los puedas separar con comas a 4020. Entonces si quiero tener 60 a la izquierda, puedes ver que tengo, puedo tener 60. Esta es mi parte superior e inferior. Tratemos de usar 32 en la parte superior. Aquí lo tenemos. Vamos a mantenerlo en defecto. Vamos a usar 36 a izquierda y derecha, y superior e inferior. Entonces este va a ser mi botón. Ahora, si quiero crear una sencilla barra de menús, solo puedo replicar este Control o Comando D. puede ver que estoy replicando solo este texto Se puede ver que estoy replicando solo este texto y en realidad está en la dirección horizontal. Y este es el espaciado entre ítems. Entonces este es el marco, este es el marco de diseño automático, y estos son los rellenos entre ellos. Para que puedas ver, puedo hacer click y arrastrar así, aumentar el relleno entre ellos. Y en realidad es ampliable. Entonces si intenté Acerca de Nosotros, vamos a usar en cubierta por aquí. Y de nuevo, también tenemos el relleno en la parte superior e inferior. Podemos controlarlo por aquí. Esta es una característica realmente agradable. Tienen un separado el relleno, todo el relleno a su alrededor. Y tienen más, creo, interfaces de usuario más amigables que antes. De acuerdo, así que aquí lo tenemos. Barra de navegación sencilla. Vale, ahora lo que voy a hacer es que voy a replicar todo este marco. Entonces Comando D, marco 234. Y yo tengo estos, todos estos marcos y vamos a seleccionar todos estos marcos. Y tengo que crear otro auto-layout. Ahora tengo otro auto-layout. Ahora se puede ver la dirección es arriba a abajo, esto es vertical. Por lo que ahora vamos a jugar con este espaciado entre artículos. Usaremos 24 por aquí. Y esta es la separación entre estos ítems. Se puede ver que puedo controlarlo desde aquí también. Simplemente puedo hacer click por aquí y entrar como 16. Y tratemos de ver que puedo cambiar el relleno. Tratemos de ver el relleno por aquí. Sí. Estos son los paddings o default. Agreguemos 24 al fondo. Y vamos a sumar la izquierda. Ya se puede ver este es otro marco. Este es otro marco de diseño automático, y he añadido rellenos. También estoy usando este espaciado entre artículos. Para que puedas ver qué aquí, intentemos usar 32. Y si quieres llenarlo de algún color, puedes hacer eso solo para mostrarte que cómo va a funcionar. Entonces este es en realidad el marco exterior. Por lo que tengo marcos interiores de auto. Entonces tengo marcos de auto exteriores, exteriores. Solo para mostrarte que tenemos múltiples ítems que podemos separar por espaciado. Y vamos a añadir una cosa más a este fotograma auto. Voy a añadir, digamos rectángulo por aquí. Tratemos de agregar un rectángulo por aquí. Por lo que se va a colocar por aquí así. Ahora, se puede ver que en realidad consiguió el diseño que era, se puede ver por aquí dirección vertical. Entonces cualquier cosa que añada, va a ser en la dirección vertical en la parte inferior. O si quiero cambiar la posición de este ítem, puedo moverlo hacia arriba o hacia abajo donde lo quiera. Ahora, si quiero que sea en un lugar específico fuera del control de esto. Vamos a crear un círculo más pequeño como este. Y voy a tener esquinas redondeadas de 60. Por lo que es pequeño círculo. Uy, 36 no debería ser la altura k Así que acabo de crear un pequeño círculo, digamos que fue así. Así que quiero un estatus por aquí o por aquí, o tal vez por aquí a la derecha. Tal vez un botón de cierre para este marco. En este momento está dentro del auto-layout. Gestionar la dirección vertical. Aquí hay un pequeño botón mágico. Llama. Dice posición absoluta. Por lo que hay que seleccionar ese elemento, hacer clic en la posición absoluta y va a salir de ese auto-layout. Y vamos a usarlo por aquí así. Ya puedes ver, puedes ver que todavía está dentro de este marco de diseño automático, pero tiene una posición absoluta al igual que lo hemos usado en HTML. Entonces esta es una característica realmente, realmente agradable. De acuerdo, Así que una cosa más es que se puede ver por aquí el abrazo redimensionamiento, redimensionamiento vertical y horizontal redimensionamiento abrazo contenido fijo. Y luego tuvimos el tercero, llenar contenido creo que fue lo que este contenedor. Se puede ver esto es muy bonito, por lo que fuera de esto, este marco exterior, sólo me muestra que el contenido de HUD y ancho fijo. Entonces si trato de usar un ancho fijo, va a ser así. Y vamos a moverla por aquí. En el número dos, muévelo así. De acuerdo, así que para éste, voy a usar contenedor completo. Por lo que se puede ver en cuanto hice clic en el contenedor completo, ha llenado su contenedor. Entonces el contenedor es más oscuro y el más ligero es en realidad mi contenido. Entonces el contenido va a llenar el contenedor. Entonces esto es fijo. contenidos calientes se van a expandir cada vez que I. Así se puede ver si cambié de contenido demasiado caliente, va a volver. De acuerdo, Así que esto es contenido caliente derrame contenedor ancho fijo es autoexplicativo. No necesito explicarlo. Se va a mantener fuera el ancho de este marco. Marco exterior fijo. El contenido va a crecer con el contenido en su interior. Entonces intentemos ver el Día del Juicio. Para que puedas ver el contenido exterior. El marco exterior en realidad se está expandiendo con el contenido interno porque está abrazando el contenido. Yo nunca, el contenido se está expandiendo. Por ejemplo, estoy abrazando algo como esto. Entonces si algo, alguien dentro del que estoy abrazando tal vez un globo, si se empieza a expandir, tengo que expandir mis brazos. Entonces así es como funciona realmente el abrazo. Así que veamos si me he perdido algo por aquí. Por lo que tenemos esta alineación. Creo que necesito mostrarte la alineación por aquí. Así que agreguemos un rectángulo o tal vez un botón por aquí. Vamos a crear un rectángulo. Y solo piensa que es un botón. Así que vamos a crear este botón. Voy a moverla adentro por aquí. Entonces supongamos que este es nuestro botón. Es redondez de píxeles. Entonces este es mi botón. Por lo que en este momento se puede ver todo está alineado a la izquierda. Entonces si hago clic en este marco exterior, llamémoslo marco exterior. Estos son los marcos interiores. ¿ De acuerdo? Entonces una vez que haya seleccionado este marco exterior, se puede ver que estas son las opciones de alineación. Por lo que en este momento está a la izquierda, alineación superior izquierda. Si vamos a éste, como la alineación correcta, se puede ver que todo está alineado a la derecha. El botón también se mueve hacia la derecha. Si uso el medio, va a alinear todo así. ¿ De acuerdo? Entonces a veces lo que pasa es que quiero que este botón esté alineado a la izquierda y tal vez todos estos superiores estén a la derecha. Entonces la forma sencilla es que llamemos a esto btn. Y voy a crear otro diseño automático como este para este botón. Y para todos estos marcos, voy a crear otro automóvil. Por lo que ahora tengo que maquetaciones de auto dentro de esto. Entonces para esto, voy a mantenerlo a la izquierda. Se puede ver, se puede ver ahora y por el medio. Entonces llamemos a este contenido. Llamemos a este botón. Puedes ver que estás aquí. El contenido está en la parte superior, y puedo moverlo el contenido independientemente del botón porque los tengo en dos fotogramas diferentes. Por lo que tengo diferentes contenedores que contienen marcos para ellos. De igual manera, se puede ver ahora está nuevo dentro de ese marco, marco de contenido. Por lo que está moviendo esa dirección que se puede ver por aquí. Así que intentemos, de nuevo haga clic en esto. Llamémoslo status. Y voy a volver a hacer click en éste, posición absoluta y va a volver al lugar donde estaba antes. Entonces intentemos elevar mi estatus. Este es el uno. Tratemos de usarlo por aquí. Vamos a moverla por aquí. ¿ De acuerdo? Por lo que tenemos estudios el, estudiar estas alineaciones. Hemos iniciado esta dirección vertical y horizontal como esta. Después hemos estudiado la separación entre diferentes ítems. Vamos a usar 80. Entonces estos son en realidad, se puede ver ahora este marco tiene que inter-frame. Por lo que sea cual sea el espaciado, será entre estos dos. Entonces, si quieres controlar espaciado entre diferentes grupos de elementos, tienes que agruparlos en marcos de diseño automático. ¿ De acuerdo? Por lo que tenemos pocas opciones más por aquí. Se puede ver como, como se puede ver por aquí, embolsado y espacio entre animaciones muy bonitas. A lo mejor puedo intentar algo aquí. Tratemos de usar estos medios. Ok, creo que necesitamos dos o tres ítems en esta dirección para tener espacio entre. Por lo que ahora mismo tengo una única. Entonces vamos a crear un grupo de botones. Entonces vamos a replicar este comando D. Así que en este momento se está moviendo en la dirección inferior. Hagamos clic en este Auto Frame, marco de diseño automático para los botones, y vamos a moverlos en esta dirección. Vale, ahora, intentemos ver si puedo. De acuerdo, así que tengo que hacerlo lleno contenedor así. Ok. Entonces primero tienes que asegurarte de que tu interframe o donde tengas que usar este espacio entre esté realmente llenando el contenedor. Entonces lo que hice es que en realidad creé tres botones dentro de mi marco de botón. Se puede ver que este diseño es de izquierda a derecha. Porque quiero que llene todo el marco. Por lo que se puede ver por aquí, estas son las opciones de alineación ahora porque he cambiado del espacio trasero de la puerta trasera entre. Entonces si vuelvo a empacar. puede ver que van a todos alinearse así, más cerca unos de otros. Y van a tener este espaciado entre ítems, que es de diez. Entonces vamos a usar 24. Entonces este es el espaciamiento entre ellos en este momento. Pero si me muevo al espacio entre, se puede ver el espaciado entre ellos. Dice auto, auto, auto. Entonces esta es la principal diferencia, por lo que va a espaciarlos automáticamente. Y en este momento se puede ver que este marco de botón está realmente configurado para llenar ese contenedor. El contenedor es el más oscuro. También una cosa más es que creo que los trazos, esto es en realidad si hemos puesto un trazo alrededor del botón, vamos a usar un trazo de 15. Para que puedas ver ahora mismo, utilicémoslo afuera. Y se puede ver ahora mi derrame cerebral en realidad se está saliendo de esto. Tratemos de usar algún color tal vez blanco. Vamos, probemos algo así. Entonces se va fuera de mi marco. Tratemos de ver si se acomoda. Por lo que en este momento dice que los golpes están excluidos. Vamos a incluirlos en el diseño. Ahora se puede ver el relleno y el espaciado todo está contabilizado por los trazos, golpes también. Vale, entonces ahora voy a volver a hacer realidad porque quiero mostrarte algo interesante. En lugar de usar un espaciado de 20 veces, intentemos usar menos diez. Menos diez. Vamos a poner un trazo por aquí solo para mostrarte que va a ser como blanco, tu tema. Así que sólo voy a estar afuera. Tratemos de usar el mismo trazo. Si Dean, afuera, Whoops, óxido, sólo va a ser blanco. Ahora se puede ver tengo tres botones y tres botones que se superponen entre sí. Tratemos de usar un color diferente, un poco diferente por aquí. Así que sólo para mostrarte lo que uno se está superponiendo con el que tenemos en este momento, 33 de ellos. Entonces éste está en la parte inferior en este momento, y estos están en la parte superior. Entonces si lo intenté, así que tenemos una cosa más que es el apilamiento de Canvas. Por lo que se puede decir que dice último en la parte superior. Entonces si cambio a primero en la parte superior, se puede ver que el primero está ahora en la parte superior y otros uno o en la parte inferior. Es útil cuando tenemos diferentes imágenes de avatar, diferentes iconos, y queremos que se superpongan entre sí. Y el último es en realidad el turno de línea base, que es cuando tenemos un ícono y un botón. Así que intentemos, tratar de usar algún ícono. Uy, no por aquí. Vamos ícono. Y voy a usar cualquier ícono en este momento. Vamos a usar este. Este va a ser un álbum de íconos. Y si traté de usar eso dentro de esto, dentro del botón, te permite combinarlos comando G para agruparlos juntos. Y tratemos de tener un texto por aquí. Dice, está bien, voy a alinearlo perfectamente. Si puedo. Vamos a moverlo fuera de esto. Y vamos a mover éste también fuera de éste, solo para ver cómo estos realmente van a alinearse. Entonces voy a tener escribiendo para la guerra entre los ítems. Entonces en este momento lo es en realidad, en realidad es bastante obvio y se está alineando con éste. Tratemos de tener un texto más pequeño, texto más pequeño en la parte inferior. Y tratemos de cambiar el color. Voy a aumentar la distancia a 32. ¿De acuerdo? Por lo que en este momento estos ambos están alineados, pero si quieres cambiar la alineación, intentemos cambiar algo. Se puede ver qué aquí. Si tenemos zapato de alineación basal, entonces podemos cambiar así. Entonces si tenemos dos o tres textos y un icono, podemos utilizar esta alineación de línea base para alinear estos. Por lo que en este momento se puede ver es la alineación de línea base, que no está funcionando para este escenario. Pero puedo garantizarles que en algunos escenarios cuando tenemos un texto y un ícono que no están alineando, que usar esta alineación de línea base. Entonces esto es lo mucho que han cambiado. Han proporcionado nuevas opciones como alineaciones de línea de base, compensando los trazos de lo que tenemos. Éste. Realmente me encanta esta característica de este fijo, éste, posicionamiento absoluto, realmente, realmente agradable característica. Y luego tenemos muy buena presentación de paddings, relleno por todo el artículo. Acolchado izquierdo, relleno derecho. Si pasamos sobre ellos, izquierda, derecha, izquierda, y luego relleno izquierdo y derecho. Vamos a cerrarlos porque en realidad no está emparejando con mi HTML. De cualquier manera. Entonces todo esto se trata. También han movido este abrazo, contenido del abrazo se sienten contentos al marco. Opciones como anchura, altura porque era más adecuado para el marco. Entonces ese es mi reciente video o nuevo video y cómo puedes dominar tu maquetación automática. Concepto muy sencillo. Antes, era demasiado difícil para mí entender. He visto a muchos de mis alumnos en diseño, estudiantes que en realidad están teniendo problemas mientras comprendemos este concepto de auto-layout. Espero que hayas entendido bien el auto-layout y bueno de este video, te conoceré pronto en otro video. Asegúrate de que te gusta suscribirte y compartir este video hasta entonces, cuídate. Adiós. 27. Uso de cuadros de grupo vs: en este video, vamos a aprender las diferencias entre grupos y frames y emprendimientos. Debe usar marcos en lugar de grupos. Ahora, si lo miras por aquí, puedes ver que se trata de un grupo. Esto es una ilustración. Entonces si trato de escalarlo, puede ver que va a escalar todo el grupo Junto con eso, puede ver cuando hago clic aquí, hay un límite azul a su alrededor. En realidad son sus huesos. Entonces este es en realidad el límite de esto. También crece cuando intentas escala dedo del pie cualquier grupo. Por lo que se trata de un grupo fuera de ilustración. Estos son factores diferentes. Si trato de aumentar el tamaño, puede ver que los huesos se están moviendo en realidad. Y si lo miras por aquí en el tamaño de restricción, es una habilidad y ah, en realidad va a escalar. Es un defecto. Se puede decir restricciones. Opción fuera de cualquier grupo. Entonces ahora si trato de seleccionar, por ejemplo, digamos bien y digamos arriba ahora se puede ver lo que está pasando por aquí. Cada grupo ha limitado de acuerdo dedo del pie, el marco padre más cercano para que puedas ver Si lo miras por aquí en toda esta jerarquía el lado izquierdo, cerveza y el marco para este grupo es en realidad nuestro tablero de arte. Ahora vamos a ver qué pasa si trato de aumentar el tamaño a menudo Art Board. Se puede ver que esta restricción está funcionando en realidad para este tablero de arte, lo que se está quedando con la derecha y la izquierda fuera de nuestra pizarra. Ahora veamos qué pasa cuando nunca hemos dicho estas restricciones. Por lo que sobre todo cada vez que intentas importar algún gráfico dentro de tu flema un archivo o te aburres, sucede lo mismo. Por ejemplo, si tienes un grupo como este y ahora es una ilustración, puedes ver si trato de aumentar electo, alejar e intentar aumentar el tamaño de esto. Se puede ver lo que está pasando. El tamaño de la ilustración es en realidad cada vez más grande con este marco, así que vamos a seguir. Veamos la talla su talla es 573 por 5 31 Ahora, si trato de redimensionarlo, puedes ver ahora es 80 98 806 Ahora, si no quieres este comportamiento y no quieres que escale así. Siguiente. Vuelve a cada cable. De acuerdo, entonces ahora si quieres un amplio este comportamiento, quieres que tus iconos se queden donde están. Tienes que usar marcos porque los marcos van del dedo del pie. Déjenme mostrarles. En realidad. Entonces aquí tenemos thes Vamos a enmarcarlo Correcto. Haga clic y encuadre selección. Ahora concibes. Tenemos dos marcos por aquí. Una es esta ilustración lo lamentamos. Este marco de práctica, este es en realidad el tablero de arte. Y entonces tenemos otro marco. ¿ Cuál es este marco? Uno dentro de ella. Entonces llamémoslo opciones. Ahora puedes ver que tenemos marco dentro de un marco. No. Si tratamos de cambiar el tamaño de este marco de práctica, se puede ver el tamaño de este objeto. Se wa 618 por 2 25 No, Si probé de nuevo el dedo del pie, redimensionarlo. Se puede ver. Déjame hacerlo más grande y mostrarte ¿cuál es la diferencia? El tamaño se mantiene igual. Entonces este es el comportamiento que necesito cuando tengo elementos dentro de un contenedor y quiero ir y quiero que se queden en la misma zona donde están y no quiero que se redimensionen. Entonces tienes dedo del pie Usa siempre nuestro marco. De lo contrario tendrás estos problemas que los iconos seguirán creciendo. Por ejemplo, vamos, uh, quitar este marco. Estoy presionado turno controlado o comando shift G toe en grupo este marco y ahora los voy a agrupar. Ahora puedes ver que están en un grupo. Entonces llamemos a esto opciones de grupo. Y si trato de ahora el tamaño es el mismo. 618 por 2 25 Ahora si trato de usar la talla, se puede ver lo que está pasando. Estos iconos se están apagando y todo se está estropeando porque no los quiero. ¿ Conoces escala? Si trato de dar clic en este icono doble clic, puedes ver estas son las restricciones. Por lo que estas son las restricciones, escala y la escala. Por lo que se va dedo del pie cada vez más pequeño. Al cambiar el tamaño de esto para que puedas ver Déjame mostrar, ya sabes. Por lo que estos iconos son los puedes ver ahora ahí 44 esperan nuestro viaje. Tenían como 72 píxeles de ancho. Ahora puedes ver que este es el comportamiento que no queremos. Entonces la diferencia básica entre grupo y marco es que el grupo va a tener restricción. Ledgett dedo del pie el marco padre. El marco padre será en su mayoría es tablero de arte y para el marco no tenemos tales problemas. Marco va dedo del pie. Actúa como un contenedor independiente o una ventana y todo estar alineado de acuerdo a esa segunda cosa es que cada vez que tengamos un marco, por ejemplo , Sí, eso es G, supongo que espera que tengamos marco, selección de amigos todo control y G. Vale, así que tenemos esta fama. Existe otra opción la cual es contenido recortado. Si quieres crear algo, se va dedo del pie actuar como una ventana. Este marco va a actuar como una ventana. Entonces si intentas extender el dedo del pie, por ejemplo este icono fuera de esto, puedes ver ahora se está deslizando afuera porque hemos definido la Gran Bretaña esconderse del marco. Pero si intentas dedo del pie, haz algo con esta ilustración, por ejemplo, este era un grupo y por ejemplo, tengo este vector o este brazo y trato de extenderlo. Se puede ver nada está recortado y una cosa más se puede ver Si trato de hacer clic aquí, el límite en realidad se está ajustando automáticamente. Los huesos se están ajustando automáticamente. Esta es en realidad la característica fuera del grupo. Entonces si tienes algo como esto que quieres, no quieres recortar el contenido, puedes usar este grupo. Y si voy a este ahora, ya puedes ver que tenemos algún icono sobre. Harris dice que se redimensionó para adaptarse a la vida. Intento hacer click aquí, se puede ver ahora el tamaño fuera del marco se ha ajustado al contrato de clip. Entonces en realidad está tratando de encontrar ¿dónde está el límite fuera de este contenido? Por lo que esta es una característica fuera de los marcos tienen una altura específica y leer todo lo que fuera de ellos se va a recortar. Pero grupos, no se van a comportar así. No tienen nada que recortar. Tendrán autolímite. Aumentarán los huesos de tus elementos dentro de ellos de acuerdo a su alto retorno. Por lo que siempre que intentes cambiar el ancho y la altura, va a cambiar el límite fuera de este grupo. Entonces así es en realidad como trato de sugerirte que cada vez que estés diseñando tus abdominales o algo así, por ejemplo, déjame mostrarte esto por aquí. Está bien. Entonces puedes ver por aquí este stop uno es en realidad que quieres crear un marco. Por ejemplo, quiero tener una altura de retorno fija para este frente. Y no quiero que estos iconos de aquí cambien su posición y cambien su tamaño cada vez que trato de aumentar el hardboard o aquí de manera similar para esta barra de aquí. 30 minutos, cuatro personas, 1.5 kilocalorías. Tienes que usar un marco. Si intentas usar un grupo, intentas dedo del pie aumentar la altura de este tablero de arte por aquí. Se va a estropear. Estas cosas se van a mover. Y en realidad, sucedió una vez cuando estaba tratando de diseñar en estos ejercicios sucedieron. Ah, muchas veces si no los he convertido en fotogramas, Así que los marcos realmente van a tener un límite específico y las restricciones van a ir del dedo del pie trabajo dentro de esta área, por ejemplo, Voy dedo del pie usar izquierda y abajo para este. De igual manera, para éste demasiado izquierda y aburrimiento. Ahora bien, si quieres escalar un marco, tienes que hacer click aquí, ir a la escala, herramienta y probar dedo del pie. Usa eso si realmente quieres escalar la altura y el ancho de un marco. Pero para un grupo puedes no necesitas usar la báscula. Puedes usar el movimiento para hacer y solo puedes pulsar el dragón tu turno y mantener presionada la tecla de turno para escalar así. Ahora, una cosa más cada vez que creas ah componente o aquí por lo que los componentes van a actuar igual que los marcos. Todo va a tener limitaciones en. ¿ Puedes ver tu aquí? Ahora puedes ver cada vez que estás dentro de un marco o estás dentro de componente los huesos o las restricciones van a funcionar dentro de este límite, este límite de marco en su lugar. Si miras a este grupo, si trato de seleccionar esta parte superior y digamos a la izquierda estos huesos son estas restricciones, límites son en realidad de acuerdo a su marco padre, se puede ver por aquí el marco padre es este marco de práctica y estas limitaciones se están vinculando a puerta. Por lo que estas líneas, estas líneas punteadas, están mostrando que están vinculadas. Por lo que estas estas restricciones están ligadas al marco espiritual. Entonces cuando hago click por aquí y hago doble clic en este. Si trato de usar, por ejemplo, centro e inferior, se va del dedo del pie. Tener restricciones con esto en este marco por aquí. De igual manera, para este, si trato de usar la izquierda y el trabajo, se va dedo del pie quedarse igual. Entonces este es en realidad el límite por este plátano de aquí. Entonces vamos a reducir el tamaño del plátano presionando turno. Y ahora se puede ver que el hueso es el mismo. Entonces tenemos que presionar de nuevo este límite de redimensionamiento y este es nuestro límite. Ahora bien, si trato de hacer clic aquí, se puede ver que estas restricciones están vinculadas con este marco en lugar del marco padre , que es práctica para él. Entonces espero que hayas entendido las diferencias entre grupos y marcos, y cuando tengas que usar uno en su lugar, el otro pasemos a la siguiente lección. 28. Exportar recursos e imágenes: en esta lección, vamos a hablar de exportar tus imágenes y activos. Ahora bien, esto es muy importante. Si estás diseñando para una aplicación de Android o y yo s app, existen diferentes configuraciones o diferentes opciones de exportación para ambos sistemas de diseño. Entonces, por ejemplo, como puedes ver, esta es mi app android y ha sido diseñada para un dispositivo android. Entonces siempre que estés exportando tus imágenes, por ejemplo, tus ministraciones, son tus imágenes por ejemplo, tus imágenes PNG o cualquier botón o cualquier cosa que tengas para exportarlo a diferentes tamaños. Por lo que hay diferentes dispositivos Android hay Utilizan diferentes tamaños para soportar esa app. Entonces déjame mostrarte un artículo rápido Por aquí. Se puede ver este es un artículo rápido sobre medio que trata de la diversidad y estos son diferentes. Bolsillos son cubos profundos EI. Llamé a los cubos de resolución para dispositivos Android. Tengo un curso completo de fledge separado en dispositivo android y diseño. Pero material de Google, donde he discutido todas estas solo hay que recordar que 0.75 actos 75% 1 siguiente 1.523 y cuatro. Estas son las cosas para las que tienes que exportar. Déjame mostrarte. Si te mudaste a Fig MMA, por ejemplo esta barra inferior tienes que exportar. Entonces he seleccionado esta barra inferior por ejemplo, esta Y si vas por aquí, puedes ver que hay una opción de exportación. Entonces si quieres, quita alguna opción de exportación. Tienes toe klik menos. Y si quieres sumar, tienes que sumar por delante. Y este es en realidad el tamaño que muestra. Muestra una X uno siguiente significa lo mismo 100% 150% 200% 300% 400%. Entonces voy a seleccionar 400% porque en realidad quería dedo del pie tener todas estas tallas. Por lo que estas son las opciones de exportación para un dispositivo android. Se puede ver que estamos aquí al fondo. Dice barras de aburrimiento de exportación. Es un nombre fuera de este grupo. Entonces von x, 100% 304 101 150% y 75% que va a ser más pequeño que el tamaño que hemos diseñado . Hemos diseñado en 100%. Por lo que estas son las opciones de exportación también puedes cambiar el tipo de archivo de nuestro cabello PNG va a ser Puedes decir que va a ser transparente al fondo. Si vas a este adelanto, puedes ver el fondo es transparente para estos tres botones Oh están moviendo Britain o como sea que los llames. Si voy a ir a jpg, ahora va a tener una bolsa blanca. En realidad, me está mostrando este adelanto pero va a tener un fondo blanco. Todos los demás son Déjenme quitar a todos los demás. Siguiente quitar todos estos Y ahora si cambio o jpg todavía, me está mostrando la vista previa equivocada de todos modos, Así que la imagen J P G o J Big va a tener un fondo blanco. Supongo que eso se exporta. Voy a presionar exportación y voy a ir al escritorio y a ver si es como tiene fondo blanco o no. Para que se pueda ver u oír que tiene, como fondo. Tiene fondo blanco. Se puede ver si lo arrastro al fig Mauer aquí. Se puede ver si me acerco y tiene un fondo blanco. De acuerdo, así que esto va a pasar. Ya te dije que la imagen de J. Peg va a tener un fondo blanco. Entonces cualquier cosa que quieras exportar y tú, por ejemplo, mayoría de las imágenes en un sitio web, por ejemplo, esta imagen que podrías estar usando Jay big image, porque una imagen muy grande una imagen de fondo muy grande. Tienes que usar algo como esto. Por ejemplo, en mi este yum Zab en esta pantalla de inicio de sesión. Si me acerco a esta pantalla de inicio de sesión, um, esta pantalla de eslogan se puede ver que tenemos, ah, sobrecarga de fondo, este fondo de imagen. Si tengo que exportar este fondo de imagen en la parte de atrás, se puede ver que es, um todos estos fui dedo del pie agruparlos juntos. Entonces este es todo mi antecedente. Ya puedes ver Así que este va a ser mi antecedente. Por lo que me voy de puntera de prensa, exportación. Y voy a usar un jpg porque Jeb me va a dar el tamaño más pequeño para todo este fondo. Por lo que esto te va a ayudar siempre que estés exportando para sitios web o cualquier cosa que sea muy grande, imagen muy grande. Tienes que usar la imagen J peg en lugar de PNG. PNG debe ser usado para, por ejemplo, estos iconos o tal vez thes botones o algo así. En su mayoría, estos iconos van a ser un SPD para make, así que voy a ir a eso ahora. Por lo que has aprendido que cuando tienes que exportar para dispositivos Android, tienes que añadir diferentes densidades de diferentes tamaños. Por ejemplo, dos x tres x cuatro x, los diferentes tamaños hasta el momento y el dispositivo IOS. Si estás diseñando para un dispositivo IOS, déjame mostrarte por aquí así solo necesitamos una x 100% 200% y 300%. Por lo que estos son los tres tamaños en realidad los cuales son utilizados por los dispositivos IOS. Entonces si estás diseñando para dispositivos IOS, tienes que exportar tus activos a estos tres lados. Entonces volvamos atrás. Tofig MMA y estamos, por ejemplo, voy a seleccionar esta pantalla Si quiero o exportar toda esta pantalla, voy a exportar PNG y voy a exportar a estos tres tamaños uno al lado de X entrada X. Se puede ver la vista previa sobre si exporto por aquí se va toe exportar tres archivos diferentes . Entonces voy a ver qué estamos aquí en el escritorio y ah, aquí tenemos estos tres archivos para que puedas ver este sufijo es en realidad el nombre del archivo el cual se agrega 101 Agregar dos x fuerza el nombre fuera del archivo y luego el sufijo realmente va a te muestran que es el porcentaje de edad o esta es la densidad o esto es ah, podrías escalar esa imagen. Entonces estas son dos cosas diferentes. Tienes uso de remolque en tus laboratorios móviles para números que estabas diseñando De igual manera, para IOS, puedes ver esto en realidad es pantalla de iris. Tienes que usar thes tres hasta ahora somos nosotros para nuestra U. S. T tamaños uno x dos x tres x Para Android. Tenemos en realidad cuatro o cinco tamaños. Una siguiente 1.5 x dos x tres x cuatro X punto sonido cinco x o 75% Así que estos son todos los diferentes tamaños que tienes que exportar. BND va a tener trasfondo transparente. Jeopardy no va a tener trasfondo transparente. SPD es para ilustraciones, por ejemplo como esta ilustración SPD gráfico vectorial escalable. Utilizé mayormente mis iconos y mis ilustraciones. Yo me conozco exportarlos en exceso archivo SVG formarlo. El Pdf es un documento básicamente. Si estás diseñando un documento y quieres exportar o quieres mostrar tus diseños en un archivo pdf, tienes que usar la velocidad de exportar. De igual manera, una vez que hayas configurado todas las opciones de exportación para todas tus diferentes pantallas, puedes ir por aquí dedo del pie lo siento o aquí no por aquí, pero en este menú. Y puedes usar la exportación de archivos para poder exportar todas las diferentes ilustraciones y todo. Si seleccionas todo por aquí que fue selecto todo y entonces puedo ir a exportar. Y estos son todos los diferentes activos que voy a exportar 11 SX. Entonces si tienes un proyecto muy grande puedes decir y quieres exportar todos los activos a la vez , tienes que seleccionar todo el hardboard y usar esta opción de opciones de exportación en el menú de archivos y dar click en los exportadores. Se va a exportar todas las resoluciones diferentes. Entonces eso se trata de exportar tus activos para tus dispositivos android para tu ah, yo uso dispositivos, dispositivos apple y para tus sitios web a. Por lo que espero que hayan aprendido algo creado en esta lección. Si tienes alguna pregunta, siempre pregúntame. Sigue moviéndote y sigue diseñando. 29. 05 variantes en Figma Simple: En este video, vamos a hablar la última y nueva característica de sigma, que es la varianza. Y hay variantes de diferentes componentes como creamos botones, luego se pueden desactivar devoluciones, pueden ser botones primarios, Botones secundarios. Podría haber botones que estén teniendo una barra de carga o estén cargando y descargando estado o prestigio o sobreestados. Por lo que todos estos estados, tenían que tener un sistema para crear todo esto en un solo componente. Entonces en este video vamos a aprender justamente eso. Entonces empecemos. Ahora puedes ver estas son pocas varianza. Te voy a mostrar el poder de la varianza si haces clic aquí y si quieres cambiar a botón gris o deshabilitado, pero, y ya puedes ver solo tienes que usar esta opción por aquí, que es una nueva varianza one. Y entonces tenemos que cambiar al azul. Entonces esto es en realidad lo creé yo mismo. Este es un hecho a medida. De igual manera, como se puede ver por aquí. Aquí tenemos un componente. ¿ Tienes hambre ahora mismo? Y tenemos dos escaleras comprobadas. Podemos comprobarlo encendido, encendido y apagado. Por lo que vamos a crear ambos en este tutorial. Entonces, empecemos. Ahora vamos a empezar de cero. Entonces voy a presionar un tablero para arte y voy a crear un arte. Pero por aquí, entonces vamos a tener rectángulo por aquí o presionar son para rectángulo para crear un bonito botón. Y le daré algo de redondez por aquí. Daremos un color primario, justo este azul. Voy a presionar T para el texto. Y este va a ser nuestro botón primario. ¿ Estamos? De acuerdo, entonces aquí tenemos el texto. Vamos a colorearlo blanco. Entonces tenemos un botón por aquí. Ahora el siguiente paso es, siempre va a trabajar en un componente. Entonces tenemos que seleccionarlos a ambos, crear un componente, y aquí tenemos un componente, llamémoslo pero una palanca de barra inclinada Marie. De acuerdo, entonces tenemos un botón y vamos a crear algo más de varianza. Por lo que se puede ver una vez que haga clic aquí, hay una nueva opción por aquí, que se llama varianza. Por lo que hay que hacer click en este plus, y ahí tenemos otra variante. Entonces personalicemos primero esta variante. Entonces tendremos botón verde por aquí. Vamos a llamarlo algo así. Hagámoslo algo así. Cambiemos el color del texto a black ups así. Entonces vamos a mantenerlo simple y tenemos 2 millones. Entonces adelante. Entonces ahora si haces clic en todo el cuadro delimitador, así que si quieres agregar una nueva variante, puedes hacer click aquí en el signo más y te dará tantas variantes que quieras. Puedo tener el botón gris por aquí así. Y esto va a ser un gris un poco más oscuro como este. Por lo que tenemos ahora mismo tres botones en este marco. Entonces si hacemos clic aquí en todo el límite de esto, estos tres botones, se puede ver que hemos declarado por aquí propiedad. Entonces la propiedad es en realidad podría ser tu tipo, podrían ser tus colores, podría ser el tipo de cosa que estás creando. En realidad está en jerarquía. Va a estar en la cima. Por lo que una propiedad puede tener varianza múltiple. Voy a repetirlo otra vez. Este es un concepto esencial muy, soy muy inicial. Una propiedad puede tener múltiples variantes. Por ejemplo, sólo puedo llamarlo primario. Vamos a llamarlo botón. Ok. Entonces tenemos botón por aquí y luego si hago clic aquí, voy a hacerlo, esto es básicamente la primaria. Esto es, o podemos llamarlo primario, azul primario. Y luego voy a dar click en él. Voy a renombrar la variante a verde primario. Y luego voy a dar click aquí y primaria desactivada. Ok, entonces llamémoslo gris. De acuerdo, entonces hemos completado esto, entonces cómo podemos usarlo. Por lo que ya hemos creado esto. Vamos a moverlo fuera de este marco. Ahora vamos a trasladarnos a nuestros activos. Estamos, tenemos este componente por aquí y vamos a arrastrar este componente de botón. Este es el que acabamos de crear. De acuerdo, así que ahora se puede ver a la derecha tenemos este nombre de propiedad por aquí a la izquierda este es botón. Y a la derecha tenemos la varianza, azul primario, gris primario, verde primario, o lo que sea. Incluso puedes llamarlos como primaria, Hoover y tal vez discapacitados. Depende de ti, Por ejemplo, vamos a nombrar esto rondaba. Entonces tenemos éste para ser inhabilitado. Por lo que ahora puedes ver tenemos tres estados por aquí, hacia casa, primaria y deshabilitada. No estoy seguro de por qué esto se está alineando así. Creo que deberían tener lo mismo se puede decir el mismo orden que nosotros hemos creado aquí. De todos modos, aún así, podemos cambiar a quien queramos, así. Ok. Ahora vamos al punto en el que tenemos que crear una pequeña casilla de verificación, que es una casilla de verificación móvil. Entonces lo voy a hacer redondo. Usemos 320 k Así que primero tenemos que crear diferentes componentes. Entonces ahora vamos a usar una elipse. Apenas 21 por 21 cambió el color a blanco. Hagámoslo un poco así. Muévelo un poco más aquí de este lado y reduzca el ancho de éste. De acuerdo, entonces tenemos un poco de arreglo por aquí. Así que vamos a crear componente haciendo clic aquí o tecla Alt Control o tecla Comando Alt. No estoy seguro de cuál es el atajo en Mac de todos modos, así que puedes hacer click aquí. Y aquí tenemos el componente. Una vez que tenemos el componente, tenemos que crear su varianza. Voy a dar click aquí. Y aquí tenemos otra variante. Hagamos doble clic y vayamos dentro de esta variante, cambiemos su color a verde. Y vamos a mover esto por aquí. De este lado así. Entonces esta va a ser nuestra otra variante. Por lo que para la propiedad, voy a seleccionar gastos generales comprobados. Y una cosa que tienes que hacer es para cuando haces click aquí, tienes que describir su nombre de variante. Para eso, vamos a usar falso. Y para esto es cierto. Entonces esto, esto creará toggle por aquí. Entonces ahora tenemos que usarlo. Entonces vamos a moverlo por aquí. Acude a activos. Tenemos este componente, y vamos a dar click en él. Y tenemos la casilla de verificación por aquí. Realmente agradable. Espero que hayas disfrutado de esta lección. Te voy a encontrar en otra lección pronto. Hasta entonces, cuídate y adiós. 30. Variantes de Figma de Figma avanzadas: Ahora vamos a entrar en un uso un poco más avanzado de estas características. Y vamos a crear entrada por aquí. Conviértalo en un componente. Vamos a sumar varianza. Por lo que antes de crear más de estos en vértice, vamos a crear una nueva propiedad. Estamos aquí en propiedad de la NYU y lo vamos a nombrar tipo. Por lo que tenemos tipo y esta es propiedad. Este inmueble va a ser el estado. Entonces estos son en realidad, estos son ambos en realidad van a ser tipo x Añadir un nuevo tipo para entrecerrar para ser entrada de texto. Y si hacemos clic en uno de ellos, este va a ser estado por defecto o estado normal. Y para éste va a estar activo. Ahora vamos a crear más de estos. Vamos a crear éste, otro. Y para el tipo que vamos a usar, vamos a crear uno nuevo por aquí. Y vamos a usar realmente caído, llamémoslo desplegable. Y luego tenemos otra. Antes de pasar a otro, vamos a añadir un rectángulo por aquí. Polígono en realidad, para el desplegable. Vamos a moverlo así. Vamos a renombrarlo seleccionar. Ahora podemos crear otra variante. Vamos a crear otro obediente. Y voy a volver a usar este por aquí, copiarlo por aquí. Y a ésta la vamos a llamar selecto. Cambiemos el color a otra cosa. Al igual que esto. Sólo para marcar la diferencia. De igual manera para éste, voy a cambiar el color a algo así. De acuerdo, ahora voy a seleccionar este y éste, y este va a ser desplegable Tipo. ¿ De acuerdo? Y para estos dos, estoy sosteniendo turno en realidad. Vamos a utilizar la entrada de texto. Ahora para cada uno tenemos que establecer el, establecer el estado. Este va a ser normal, éste va a estar activo. Entonces ahora se puede ver que en realidad estamos usando dos conjuntos diferentes de estados y tipo. Entonces cómo podemos usarlo, solo arrastra, pon texto por aquí. Y si vamos por la derecha, se puede ver aquí podemos cambiar el estado por aquí. Entonces también podemos cambiar el desplegable y el tipo de éste. Entonces esto es en realidad que Vos uso donde podemos combinar dos propiedades diferentes. Ahora si quieres crear variantes a partir de tus componentes ya creados, así que no , no quieres crear componentes y ya tienes pocos componentes, entonces es muy fácil. Déjame, déjame crear componente por aquí. Pero deben ser dif, diferentes componentes. Por ejemplo, aquí tenemos componentes de diferentes estados. Por ejemplo, tenemos éste. Este es estado activo, llamémoslo activo. Y voy a crear un componente por aquí. Y vamos a las capas. Y aquí tenemos otra. Esto va a ser, llamémoslo nav como contralga normal o normal. Y nav contrala inclinada desactivada. Y si quieres crear ambos y querrás crear variantes, solo tienes que arrastrar así. Y se puede ver a la derecha, se puede ver combinado como varianza. Basta con hacer click en él por aquí así. Y verás ya creadas propiedades desactivadas y normales, variantes. Y para la propiedad sólo vamos a dar el nombre de navegación, tal vez algo así. Y cuando tengas que usarlo, solo arrastra y suelta esto ahora por aquí. Y puedes cambiar su estado así y asegurarte, uh, una cosa más es que si quieres alterar la forma o por ejemplo, si quiero cambiar la forma del estado, eso depende de ti. Ese no es un tema muy grande. Se puede cambiar ambos estados. Para que puedas ver la navegación de tu cabello, navegación normal desactivada es una más grande. Entonces depende de ti. Se puede cambiar cualquier cosa por cualquier variante. Entonces todo eso se trata de la varianza y su poder en fig, mi esperanza hayan disfrutado de esta lección. Te veré pronto en la siguiente lección. Hasta entonces, cuídate y adiós. 31. El enlazo y las superposiciones de los prototipos de tocados de la: en este video de, vamos a aprender algunos de los conceptos básicos de prototipado en Sigma. Ahora puedes ver he diseñado tres pantallas simples y una es en realidad una navegación izquierda , que es un marco personalizado. Por lo que si haces click por aquí, puedes ver el tamaño a 51. Ahora la altura es de 7 26. En primer lugar, vamos a empezar con estas tres pantallas. Entonces aquí tenemos. Vamos a zona para encajar Presiona uno, y te puedes ver aquí. Tenemos tres marcos, así que todos estos tienen el mismo nombre, así que voy a renombrarlos. Hay, uh, uh, renombrarlo uno que lo haya visto en remolque a eso es renombrarlo a tres. Entonces hemos pisado un dedo del pie, 33 pantallas, y no hay mucho en esto. El primero que tienes que notar y hay que recordar es que si quieres algún hecho tus objetos, tienes que nombrarlos igual Lear, por ejemplo. Aquí dice, ilustración o escuchar y ver si vamos en este panel de Lius. Los nombres son la misma administración porque son las copias entre sí, y en la misma siguiente, dice ilustración la misma. O aquí debe ser Ilustración. De acuerdo, entonces también estas capas estaban aquí. Estos grupos, tienen los mismos nombres. El único que está cambiando es uno es Esta ilustración está cambiando. El nombre es el mismo. Y también se puede ver por aquí. Y tenemos estas barras inferiores. Estas son tres barras y en realidad estoy cambiando sus colores. Entonces para éste, el siguiente, tenemos este color diferente para el 3er 1 Este es activo, otro para el nuestro, inactivo. Eso es todo lo que está sucediendo dentro de la pantalla. Entonces tenemos esta navegación izquierda. Entonces primero, lo que vamos a hacer es pasar a nuestro prototipo o escuchar la pantalla del prototipo, y ahora no se puede ver nada apagado. Se seleccionan los tableros de arte. Entonces primero, tenemos pocos ajustes de prototipos como orientación que tenemos dispositivo el cual queremos dedo del pie ver en nuestro prototipo de lo que tenemos el modelo Gould. Excusas de plata de medianoche. Además, tenemos alguna vista previa también. Qué fondo Desea ver estas selecciones. Voy a seleccionar este fondo y luego tenemos el marco de partida. ¿ Cuál deberíamos nosotros? Entonces vamos a usar uno. Y empecemos a combinar estas pantallas. Empieza a conectar estas pantallas Ahora. Primero que vamos a hacer es que he seleccionado este tablero de arte y he hecho clic en este nombre y tenemos unos cuantos. Se puede ver un pequeño círculo por aquí que es básicamente un punto de coleccionista. De igual manera, si pinchamos por aquí, se puede ver si yo estaba en diferentes elementos o grupos. Estoy viendo los mismos artículos de coleccionista. Entonces si quiero oh, tener alguna interacción aplicada dedo del pie Este artículo voy a hacer. Usa este conector para este. Nos moví así y uso su corrector. Entonces en este momento, no usamos más dedo del pie específico alguno nuestro cabello. Entonces vamos a ir con toda la pantalla. Seleccionemos este. Entonces aquí sólo tenemos click y arrastrar y vamos a salir a la siguiente pantalla ahora también . En cuanto salgamos de esto, tenemos pocas opciones Por aquí. La interacción va a estar en tap on drag mientras hoovering mientras presionaba vino mal juego centro del ratón. La mayoría de las hojas. Todas estas son interacciones diferentes. Qué en realidad estás tratando de hacer Así que vamos a seleccionar en tap. Siguiente es lo que va a pasar cuando adaptes este 80 0 adelante. Nunca pongas dedo abierto Superposición barrida con espalda cerca sobre la abertura Así que estas son cosas diferentes que puedes hacer Puedes abrir un enlace que puedes cerrar cualquier excesivamente que estés usando. Se puede volver a la pantalla anterior. Se puede abofetear con otra cosa s. oh, aquí tenemos abierto sobre vivo. Vamos a volver a esto. Abre tu nombre. Están dibujados. Entonces, um, esperan éste otra vez. Entonces aquí está la interacción con entrar. Entonces lo siguiente es lo que cualquier misión que vamos a hacer. Entonces estas son la animación. Citando mudanza. Sigue adelante con diapositiva y deslízate hacia fuera. Enemigo inteligente disolver o instantáneo instantáneo instantáneo va a hacer nada siempre se va a disolver en la siguiente piel. Animado inteligente. Nosotros vamos a usar mayormente este. MoveOn realmente se está moviendo en y en qué dirección. Entonces si se mueve, va a ser así. De acuerdo, para que puedas ver la vista previa de animación por aquí. Siguiente es que tenemos el tiempo de Theis. Entonces tenemos, por ejemplo, vamos a usar 400 milisegundos. Entonces usemos en lugar de mudarnos. Voy a usar smart en cualquier minuto y los voy a usar en una hora. Esta es la opción que uso la mayor parte del tiempo. Me encanta esto. Entonces esto son opciones que he seleccionado por aquí. Y luego otra vez para esto otra vez, el 2do 1 vamos a hacer lo mismo. Por lo que estoy haciendo clic en esta zona blanca. Ya estoy otra vez. Slack click y arrástralo y déjalo al nido siguiente pantalla para que puedas ver los ajustes que he hecho la última vez en tap. Navigato inteligente y facilidad de imagen fuera el tiempo. Se han salvado. Por lo que una vez que hayas seleccionado los ajustes, se va a aplicar toe next screen. Si quieres cambiarlos, puedes cambiarlos. Entonces veamos cómo se ven estos en realidad ahora. Entonces juguemos este presente y pinchemos en este presente y nos vamos de pie. ¿ Ves este prototipo? Ahora puedes ver que estamos en la primera pantalla y ahora vamos a puntear con el dedo del pie. Por aquí, se puede ver al enemigo inteligente de cualquier misión porque lo hemos puesto para moverse, facilitando la facilidad. Y también el nombre de las ilustraciones son el mismo, por lo que se puede ver cómo estas ilustraciones en realidad se están transformando unas en otras . Ahora ya has visto esto. No tenemos nada a lo que volver. Por lo que también podemos establecer tu pestaña. Las secciones estaban aquí. También podemos usar que estos y sí. Entonces la voy a dejar abierta y voy a volver a mi expediente. Y, um, puedo haberla puesto para volver aquí también para que éste vaya al 1er 1 por aquí, voy a ponerlo para ir al siguiente y éste para volver a esa escuela atrás o adelante y tratar de incursionar en adelante. Y se puede ver cómo están cambiando todos estos. De acuerdo, entonces hemos aprendido ese auto Un emir. Si tienes los mismos nombres fuera de los elementos, se van del dedo del pie. Tengo Ah, tiempo de riel. Muy bonito. Suavizado. Cualquier misión a la transición de una forma a otra está cambiando estos. ¿ De acuerdo? No, Lo segundo es área de paso. Por lo que siempre que estés prototipando un montón de diseñadores que cometen este error puedes ver esta 80 horas aquí está muy cerca de la siguiente. Entonces lo primero que podemos hacer es que podamos aumentar su paso India para que puedas hacer algo como esto y eso es llamarlo, Sí, India. Y luego vamos a ir a diseñar y reducir Es opacidad a cero. Entonces, cuando quieras dedo del pie corregir algo, tienes que conectarlo usando esto. Por ejemplo, eliminemos este. El personal medios de comunicación. Ahora puedes ver, por ejemplo, el salto, así que Skip va a ser un botón. Entonces si trato de hacer click por aquí, se puede ver que tiene una caja delimitadora muy pequeña. Ahora lo voy a hacer es ir dedo del pie crear un rectángulo por aquí y tener una idea feliz . Lo vamos a llamar así y vamos a reducir su opacidad al 0% en realidad estaban tratando de ocultarla. ¿ Por qué? Porque esto sólo va a actuar como un tapeado nuestra zona objetivo principal o el patrón ellos. Entonces ahora si vamos a dedo prototipo ahora, ya puedes ver que voy a pasar a esto. Entonces aquí. Ahora, el siguiente paso es que vamos dedo del pie seleccionar este paso cualquiera nuestro cabello y vamos a click y arrastrar y dejárselo a éste. Ahora esto dice en tap Navigator, Pero no queremos llegar nunca a este y dijo que lo vamos a abrir como un excesivamente así que vamos a usar este abierto por ahí y no tenemos ajustes diferentes con la posición fuera esto excesivamente center top left top center, top ride, bottom left, bottom center, bottom center, Algo así. Pero vamos a usar hombres, Will y yo voy a jugar set aquí así como así. Y algunas cosas más es que la voy a usar. Este arriba a la izquierda. También puedo usar esta posición por aquí. También puedo usar manual o superior izquierda que se puede utilizar los hombres lo harán. Creo que me voy a apegar al manual ahora mismo. Estas son pocas opciones de contaminación para centrar o algo por el estilo. De igual manera, tenemos algunas opciones más como ropa Al hacer clic en arquitectos, siempre que alguien haga clic fuera de esta zona, se va a cerrar de nuevo. Tenemos agregar fondo detrás excesivamente, así que vamos a agregar algo de color oscuro tu cabello. También puedes agregar vital y por aquí en do use 50% de capacidad y la cualquier misión que voy a usar se mueve en lugar de instancia. Por lo que se va a mover así desde izquierda, derecha y otros ajustes van a la misma. 400 milisegundos está entrando y saliendo. Disculpe esto. Probemos esto Ahora. Este es el último paso donde íbamos a ir toe klik. Nuestra ficha en el salto. De acuerdo, entonces aquí tenemos nuestra navegación izquierda. Muy bonito. Cuando digo que si trato de pinchar por aquí afuera, va a volver a entrar, salir, entrar, salir. Entonces esto se ve realmente bien. Estos son los dos conceptos básicos de cualquier prototipado. Vas a enlazar tus pantallas juntas. Te vas a mover del dedo del pie de un esquema a otro tocando. Y también nos vamos de toe overlay Diferentes pantallas como puedes ver donde aquí tenemos sobre plomo Estas son las direcciones en movimiento. Muévete. Entonces eso es todo Estos son los fundamentos del prototipado para sigma. Si tienes alguna pregunta, siempre puedes preguntarme. Cuídate todos estos golpeándonos. Trata de tener una buena zona de chupón para que puedas presionarlos con el cuero de golpe que tus bocas fuera de tu PC o tu Mac. Entonces eso es todo. Si tienes alguna pregunta que hacerme, vamos a conocerte en otra lección. 32. Conceptos básicos de la prototipos del proyecto: Ahora ya has aprendido todo lo básico. Preferido hyping ¿cómo? Transición del dedo del pie de un esquema a otro. ¿ Cómo haces inteligente, cualquier hecho y cómo excesivamente pantallas Encima de eso. Entonces conoce tu tarea es que tienes que crear esta pantalla de tres o cuatro patas configurada y tienes dedo del pie compártelo conmigo. Vas a crear algo como esto. ¿ Qué está pasando? Por lo que se pondrá en arrastre de todos modos. Entonces aquí hay tres pantallas y luego tienes barba de remolque algunos excesivamente con cualquiera que tengas, Por ejemplo, el skip. Esto es excesivamente así. Deberían estar viniendo de izquierda, ¿verdad? O donde quieras colocar que tal vez quieras colocarlo en la parte superior. El borde de abajo a arriba. Tanto es de abajo fuera de la pantalla. Depende de ti. Entonces este es el prototipo. Una vez que creas este prototipo, tienes tow click en el prototipo share, y puedes ver que hay ajustes en Lee personas invitadas a este archivo y cualquiera con el link así que holga esto cualquiera con el link y copia link y comparte que enlaces a mí. Entonces soy capaz de ver y ver visualmente tu prototipo. Y te estaré dando retroalimentación. Si tienes alguna mejora, te lo voy a decir. Así que asegúrate de crear este protrude. me puede mencionar tu nombre en alguna parte, así que fácilmente puedo recordar que este es el prototipo de mi esta alumna. Por lo que tres pantallas o tal vez cuatro pantallas o dos pantallas tradición de una a otra y tercera pantalla para el excesivamente. Esta es tu tarea. Entonces, empecemos ahora. Estoy leyendo para ver tu perfecto yo no. 33. Intercambio.: en este video, vamos a aprender algunas cosas más que podemos hacer mientras hacemos prototipos en fig MMA. Entonces vamos a seguir adelante y aprender algunas cosas más, como, incluso ver u oír. Aquí tenemos. Um es como este, esta interacción y se puede ver estamos usando barrida con. Entonces vamos a estudiar atados con y cómo se puede hacer eso. También, vamos a aprender DeLay, por ejemplo. Um, si tenemos por aquí, si vamos a estas interacciones, entonces ahí tenemos interacciones, y entonces tenemos alguna misión. Por lo que dentro de este panel de interacción, vamos a estudiar el dedo del pie. Pocas cosas más s para que podamos mejorar en el prototipado. Entonces aquí lo tenemos. Establezca en la pestaña. También vamos a estudiar drag y también después de dilly todos estos, por ejemplo, vil flotando mientras presionaba él pad de juego thes podría no ser necesario la mayor parte del tiempo. Entonces ahora mismo los vamos a saltar. A lo mejor en el futuro, voy a crear más lecciones sobre estas opciones. Los de son interacciones diferentes mientras se sostiene algún objeto mientras se presiona. A lo mejor estás tratando de crear un juego con la llave keep. Ah, y entrando llave y cambiando algo. Centro del ratón, la mayoría de las hojas. Touchdown. Por lo que estos estos podrían ser en su mayoría necesarios en juegos, básicamente. Entonces aquí estamos. Entonces, empecemos. En primer lugar, voy a eliminar estas interacciones ya significan. Por lo que hay muchas maneras en que puedes ir a este prototipo más hacemos estamos dentro de él. Se puede presionar delete y se va a eliminar esta interacción. De igual manera, para este, voy a presionar delete, o puedes ir por aquí y seleccionar ninguno. Esta es otra forma. Entonces a veces tal vez el estigma no está funcionando para ti. Y tú no estás familiarizado. ¿ Cómo? Dedo del pie quitar esta interacción entre estos dos elementos. se puede hacer. Está bien. Tan barrido con tan primero que vamos a hacer es que ya tenemos esto. Uh, se puede decir que esto es en realidad nuestro exceso Hemos abierto una superposición por aquí. Entonces siempre que estés dentro y excesivamente, y quieras cambiar a otra navegación, por ejemplo, alguna navegación, por ejemplo, como ésta. Por lo que estamos dentro de estos ajustes y queremos ir dentro de los ajustes y y esta son las pantallas de ajuste. Por lo que esto es en realidad izquierda dedo del pie de navegación lo llamó. Es sólo un duplicado de esto. Entonces, um, lo que haremos es que les voy a mostrar cómo va a funcionar en unos segundos. Entonces primero, vamos a holgar esta capa o aquí, y vamos a crear una interacción. Entonces vamos a mover dedo del pie esta pantalla en tap, y vamos a usar eso. El navegador que vamos a utilizar barrido navega en realidad va a quitar este marco. Y se va dedo del pie va a este marco para que todo lo que dejamos atrás será, Ya sabes, um se habrá ido. Entonces este es otro problema. Por lo que la oferta barrida es en su mayoría ir a trabajar del pie. Cuando estás en una excesivamente amarrada ya tienes un excesivamente en tu ab. Te voy a mostrar un ejemplo más. Entonces primero tenemos esto, y va a ir por allá. Y de igual manera, cuando prestemos sobrecarga cruzada, va a volver a esta pantalla, la pantalla, y vamos a usar en tap abofeteado con, y se va a dejar navegación. Este y vamos a usar disolver. Está dentro, o está fuera. Puedes usar cualquiera de ellas por 50. Estoy usando conservas Posición de desplazamiento. Entonces es A veces cuando tenemos una pantalla muy larga. Ahora mismo no lo tenemos. Pero si alguien es tener ah desplazamiento y embattled desplazamiento vertical y han escolarizado se va del dedo del pie Manténgase en la misma posición a la que va. , Se va a preservar esas posiciones de desplazamiento. Si tienes escuela abajo, lo será. Cuando cocines, vuelve. Estará en la misma posición. Por lo que ahora mismo me opuse sólo porque se puede ver diversión. Realmente no lo necesitamos porque nuestra navegación izquierda es pequeña. No se puede desplazar. Entonces juguemos esto. Este es nuestro prototipo. Hasta ver tu cabello. Aquí lo tenemos. Vamos a jugar esto y vamos al salto. Y aquí tenemos nuestra navegación. Entonces sólo, por ejemplo, pensar que esta es la navegación? No, si queremos ir a ajustes y no quiero esconder todas estas pantallas detrás. Entonces voy a seleccionar por aquí y se puede ver todo este marco el marco de parada. Está barrido con otro amigo donde puedo cambiar mi configuración y luego puedo volver. Entonces este es en realidad el caso de uso o escenario off usando una correa con función en fig MMA en fig MMA. Entonces todo esto se trata de barrido con. Ahora, permítanme mostrarles un ejemplo más. Aquí tenemos nuestro higo Mahfoud en el que vamos a diseñar en esta lección. Y puedes ver he diseñado una retroalimentación de superposición muy simple. Entonces una vez que haya presentado esta, uh, esta su opinión sobre un platillo o cualquier receta por aquí. Entonces, cada vez que envíes esto después de enviar esto, te mostrará un mensaje de retroalimentación, y este va a ser ese mensaje de retroalimentación. Entonces lo que vamos a hacer es simplemente pasar al prototipo y este es en realidad nuestro excesivamente se puede ver, esta pantalla se va del dedo del pie. Obtén esto excesivamente así que si te muestro, en realidad, así que vamos a ir rápido a esa pantalla donde tenemos esto por aquí. Entonces si vuelvo aquí, tenemos completamente esto listo para comer ahora. Entonces cuando hacemos click aquí, muestra un excesivamente que ya hemos discutido. Entonces esto no es demasiado. Y si intentas dar click por aquí Si intentas dar click por aquí, no pasa nada porque no lo hemos enlazado con el siguiente juego. Entonces quiero es que quiero abofetear esta pantalla con otra que va a ser Gracias por enviar tu opinión. Entonces volvamos y hagamos eso ahora. Entonces una vez que alguien haga clic aquí, voy a ir a la pantalla. Voy a seleccionar en Tab abofeteado con est'll Pantalla barrida con la pantalla que quería disolver También puedes usar animador inteligente moviendo Voy a relajar Smart, animate Este tiempo está dentro está fuera y eso es todo lo que necesito en este momento. Entonces voy a volver por aquí ahora. Si traté de presionar esto, se puede ver que tenemos esto y desaparece después de algunas veces. Entonces esto es que te lo voy a decir en un segundo. De acuerdo, así que una vez que haces clic en esto por aquí, este es nuestro cuadro único feedback. Lo que he hecho es haber seleccionado la interacción tras retraso. Por lo que después de un saquito, va a desaparecer. Es igual que un mensaje de retroalimentación que aparece y desaparece automáticamente después de algún tiempo. Por lo que vamos dedo del pie aumenta el tiempo a 2000 milisegundo, que es igual a dos segundos. Entonces por aquí, nos vamos holgando el dedo del pie así de cerca, excesivamente. Entonces en lugar de volver atrás o desechar, vamos a usar cerca. Demasiado. Esto es todo lo que necesitamos. Entonces estos son hacia los árboles. Cosas que hemos aprendido en esta lección uno es que una vez que estás de un humor excesivamente, quieres abofetearla con otra pantalla con la que tienes que usar bofetada. Aquí tenemos esta atracción rápida. Entonces donde está, déjame escoger este. Por lo que aquí tenemos de grifo, rápido. De acuerdo, entonces ahora voy a usar estos en. Y, uh, oops, voy a usar disuelto siempre es en realidad mejor para éste porque se va dedo del pie. Um, vamos como este puesto escolar. Va a ser mejor porque no queremos cosas a ninguna arriba y abajo. Solo queremos que aparezca el dedo del pie de la pantalla y desaparezca después de dos segundos. Entonces en realidad, tengo siempre que quieras usar este tiempo, retrasar la ropa del dedo del pie y superponer, tienes holgura de remolque este marco e ir a interacción y usar tras retraso en esta interacción y tiempo usado por aquí y cerrar el excesivamente. Ahora vamos a ver esto. Y si hacemos click aquí, presentar excesivamente Summit review sobre masa viva. Y si hacemos click por aquí, puedes ver gracias. Y va a desaparecer después de dos segundos. Entonces esta es la interacción que queríamos, y la hemos creado usando el ID de bofetada y el retardo de tiempo. Por lo que espero que hayan disfrutado de esta lección. Si tienes alguna pregunta, ¿quieres preguntarme algo sobre prototipado En fig MMA, siempre puedes preguntarme, Pasemos a la siguiente lección. 34. En la interacción de arrastrada con desplazamiento vertical y desplazamiento horizontal: en esta lección, vamos a aprender sobre arrastre en tracción. Entonces si selecciono éste, se puede ver en esta interacción que tenemos en tap on drag. Por lo que esto se va a utilizar mucho tiempo. Y cuando estás diseñando o creando alguna interacción o prototipo, así que en el arrastre en realidad va dedo del pie en rastreado cuando intentas arrastrar algún objeto. Entonces para eso, vamos a crear, uh, y rectángulo aquí. Entonces solo piensa que esto es un correo electrónico. Entonces estás usando, en realidad, por ejemplo, estás usando Gmail, y este es un correo electrónico por aquí. Entonces hay un impuesto tu cabello. Pongamos un texto sin zapatos en este fondo para ser así. Por lo que aquí tenemos un correo electrónico. Sólo piensa que este es un correo electrónico que acabo de recibir. Vamos a usar por aquí a hace minutos. Asumo que acabo de recibir este correo electrónico y este es mi verdadero vamos así y mandar g para controlar un grupo. Somos un grupo. De acuerdo, entonces tenemos este correo escuálido. De acuerdo, Así que sólo nuestro correo electrónico por aquí. Cambia tu sculler por otra cosa, dispárale a éste. De acuerdo, entonces hemos recibido solo un email y quiero arrastrarlo. Y quiero por aquí mis controles, Toby borrar o tal vez se mudó a alguna carpeta o algo así. Entonces voy a usar a Elemental. Aquí hay uno va a ser éste, así que yo Este se va a mover así. De acuerdo, así que copiemos esto y lo coloquemos por aquí. Control C, Comando V. Y aquí tenemos el mismo correo electrónico por aquí. Pero por aquí, queremos que sea arrastrado a este lugar. Arrastra a esta ubicación, y vamos a usar otra. Entonces vamos a crear otros 10 aquí, 84 de altura. Simplemente combinando con esto así, y vamos a usar algún otro color, como este. Y vamos a mover esto un poco más. Estamos aquí. Esto Ok, Entonces este es nuestro estado de arrastre. Si queremos agregar algunos, se pueden ver algunos íconos, labios en ellos, control de turno, contrala inclinada me empeñó. Voy a usar iconos materiales, y va a aparecer o pelo, así que voy a usar delete. Por lo que aquí tenemos borrar. Disculpe esto, y aún hemos comido Hagámoslo adentro. Esto ayuda. Arrastrémoslo y usémoslo por aquí. Sí. Entonces vamos Qué es el Aquí tenemos esta lista, señor Bean. Imagen arrastrada y normal, para que pueda ver fácilmente lo que está pasando. Yo soy yo nunca para ver lo que está pasando por aquí. Entonces aquí tenemos este factor. Vamos a moverlo por aquí con este rectángulo. Vamos a borrar justo aquí. Tenemos este espectro por encima de este rectángulo cambiar su color blanco. Y a continuación, usted un poco de Dexter junto con él. Por lo que estos son apenas pocos ajustes. Quiero dedo del pie te diga que pesas y cómo podemos usarlo. Y cuál es en realidad el caso de uso fuera de esta opción para que podamos tener más opciones por aquí. Solo usemos mantener esto aquí ahora mismo. Sólo tienes que diluir y seleccionarlos todos. Vamos, G. Y esto va a ser nuestras acciones de arrastre Acciones de arrastre Escoltadas. Ahora, si quieres usar esto, también queremos a este grupo Toby por aquí, y lo vamos a posicionar. Vamos. ¿ Ver? Va a estar por aquí, pero va a estar fuera de esta sección o aquí. Esto va a ser por aquí fuera fuera de este marco. Entonces ahora vamos a ir al prototipo. Por lo que hemos comprado estos este email y acciones de arrastre. Tenemos ambos en ambos fuera de estos marcos. Ambos son tableros. Tan sólo un cambio de posición. Entonces tenemos este estado de arrastre y este es en realidad estado normal. Ahora, vamos a hacer prototipos de esto. En primer lugar, vamos a seleccionar este elemento por aquí correo electrónico porque nuestra acción de arrastre va a suceder en este líder. Entonces vamos a vincularlo a esto por aquí drag state y en tap en lugar de en eso vamos a usar en drag. Entonces en drag, se va dedo del pie navegar este estado de arrastre, y vamos a usar smart de todos modos, va y más fácil está fuera. Es decir, voy a usar. Entonces usemos 4 50 milisegundos y veamos cómo sucede esto. Ahora puedes ver que tenemos este correo electrónico por aquí y vamos a realizar sobre acción de arrastre y se puede ver una vez que estoy me he arrastrado. Puedes ver esta opción de eliminación o aquí. Por lo que no hemos creado el arrastre de vuelta por aquí. Entonces vamos a vincular eso ahora. Entonces ahora vas a seleccionar Yo hice esto o esto, así que vamos a seleccionar este y, um, eso se usa en drag. Y se moverá dedo del pie, nunca llegará al estado normal y vamos a usar la misma configuración overhead. Entonces volvamos atrás. Y se arrastra esto así y esto y esto. De igual manera, si quieres tener toda esta Dragnea, también puedes usar esto y también puedes usar la misma acción aquí en drag. Entonces si te perdiste esto un año y utilizas esta zona, lo mismo va a pasar. Ya puedes ver Así que ahora mismo creo que nuestro este está muy cerca. El prototipo. Entonces esta es en realidad la acción de arrastre. Por lo que también puedes tener una pantalla más donde esto realmente se borra. Entonces una vez que has arrastrado y luego tocas esto por aquí, se va del dedo del pie. Elimina este correo electrónico y mueve todos los demás correos electrónicos hacia arriba. Entonces para este ejercicio, quería decirte cómo usar en acción de arrastre y cómo puedes usar eso cuando estás tratando de crear algún prototipo en fig MMA ahora Hablemos de simples acciones de desplazamiento. Corazones bajo escuela y escuela vertical. Ya has iniciado la escuela vertical. Es muy fácil. Tu pantalla es longitud aquí que tu pantalla normal. Pero, ¿qué pasa con la escuela horizontal, por ejemplo? Tengo, como, tres cajas estaban aquí, y esto está afuera. Entonces lo que voy a hacer es quiero que sean atornillados permisibles. Por lo que ahora mismo se puede ver esto está fuera fuera de todo este marco. Entonces, ¿cómo puedo hacer eso? Cómo puedo desplazar estos, Por ejemplo, tengo éste por aquí así. Se está apagando, así que tengo que arrastrarlo dentro de esta fama. Entonces esta es nuestra normal por aquí, y tenemos cuatro diferentes. Se puede ver un cuatro marcos diferentes por aquí para diferentes rectángulos o tal vez imágenes O tal vez cualquier cosa. Um, se puede pensar. Podrían ser tus recetas o cualquier cosa. Entonces si tenemos cuatro de estos, y quiero que sean arrastrados a base de hierbas, así que cada vez que alguien abra esta app, pueden desplazarlos fácilmente. Entonces ahora mismo, si voy por aquí, puedes ver Vamos, um, um, reproducimos esto y lo tenemos por aquí, ¿ verdad? ahora se puede ver en la disección está sucediendo. Entonces esto es en realidad la tribu drag está por aquí, pero quiero que estén a nivel de tornillo tan fácil. Voy a dedo del pie seleccionarlos a todos. voy a usar dentro de un marco, así que voy a usar la selección de fotogramas. Este es mi amigo. Entonces lo que voy a hacer es que voy a reducir el tamaño fuera de mis amigos un tamaño de ventana, en realidad. ¿ Qué es 500? Voy a usar 400 en su lugar. Entonces este va a ser mi amigo. Y voy a usar el contenido de clip así. Eso se usa Z por aquí así. Y voy a usar 400 para el tamaño así. Por lo que esto se ve mejor ahora para cualquier fotograma se pueden seleccionar proporcionando opciones. Por lo que una vez que hayas seleccionado este marco, puedes ir a prototipo por aquí. Por lo que se selecciona este marco. Puedes ir por aquí Sin escolaridad, y queremos tener un comportamiento de desplazamiento horizontal para este comportamiento de desbordamiento. Entonces esto realmente va a pasar por aquí, lo que también puedes ponerlo para todo este tablero de arte para que puedas tener el nuestro bajo desplazamiento vertical y horas hacia la escolaridad. Depende de ti. Por lo que una vez que esto esté configurado, puedes arrastrarlos fácilmente así. Se puede ver realmente agradable. Muy fácil. Es decir, creo que debería explicarlo un poco más. Usemos la ventana. Verdes, Toby. 300 esperanzas, ni 30. Yo quiero que el marco sea 300. Disculpe esto. Entonces aquí tenemos el marco. Se voy a mover el marco. Um 60. Esto Así que voy a mover el contenido dentro del marco como me gusta esto. De acuerdo, entonces marcos en realidad de interior, se va a trabajar del dedo del pie como una ventana. Y ahora cuando trato de usar esto, se puede ver donde Aquí. Muy bonito. Muy bonito drag y escuela por aquí. Es en realidad que dejamos nuestro único elemento por aquí, que es nuestro verde. A mí me iba bien, así que está muy lejos. Es por eso que esto está sucediendo. Entonces usemos todos ellos y estudias para tener un igual de él y distancias entre ellos . Vamos como estos. De acuerdo, así que esto es realmente genial. Muy bonito. Muy bonito. Entonces así es en realidad como se puede prototipar y habilitar el desplazamiento horizontal o la escolaridad vertical y usar marcos para elementos herbales escolares como estos. Entonces creo que esto te va a ayudar mucho en tu prototipado cuando estaba usando sigma estos aires en lo básico que he cubierto. No creo que necesites más que esto ahora mismo para crear interacciones hermosas. Si tienes alguna pregunta, siempre puedes preguntarme. Nos vemos en la siguiente lección. 35. Pasar las transiciones en Prototipos en el prototipos con Figma: En esta lección, vamos a ver una de las características más del prototipado en sigma, que es mientras se cierne. Entonces este es otro disparador. Básicamente tenemos que animar algo o moverlo a otra pantalla cuando estás rondando algo. Entonces déjame mostrarte cómo en realidad lo he usado. Por lo que ahora puedes ver este es mi diseño. En realidad diseñé este sitio web recientemente, ahora mismo en fase de desarrollo. Ahora si miras por aquí, puedes ver cuando me cierro sobre este enlace, se desvanece a color azul, que en realidad es todo mi estado exagerado para mi diseño web. Por lo que siempre que pase el rato sobre esto, se puede ver por aquí. Para que se pueda ver que el color ha cambiado. Entonces esto es en realidad, hice este prototipo para mostrarle a mi desarrollador, mi desarrollador web, que cómo vas a aplicar todo este efecto sobre esta navegación. De igual manera, se puede ver por aquí, mismo que he hecho por estos botones por aquí, llame a un doble seis de manera similar, el de abajo. Entonces así es como le mostré o le expliqué a mi desarrollador que así es como vas a usar esto, estos colores sobre estos botones. Por lo que hoy les voy a mostrar cómo se puede crear fácilmente esto. Este es un ejercicio sencillo. Se puede ver por aquí. Y esto es muy, muy, realmente fácil. Entonces hay solo a las cosas que no necesitas hacer muchas cosas. Ahora, déjame mostrarte, déjame reorganizar estos para ti. De acuerdo, entonces esta va a ser nuestra pantalla predeterminada, o la primera. Entonces este va a ser nuestro primero donde tengamos todos los estados, todos los botones en estado normal. Estado normal significa que van a estar manera simplemente simple que no hay animación hover, nada. Entonces esto va a ser estado por defecto o estado normal. Entonces cuando alguien se cierne sobre este botón. Ahora por cada tarea, por ésta y ésta, voy a tener dos pantallas diferentes. Entonces puedes ver aquí, vamos a llamarlo sobre botón y vamos a llamar a esto o enlace. Entonces, lo que realmente hice, eliminemos estos. Entonces has creado, por ejemplo, has creado esta pantalla o aquí, déjame acercar. Así que sim un símbolo pero en un enlace simple con color gris y asegúrate de tener un objetivo táctil o área de calor alrededor de él. Entonces lo que hice es simplemente dibujé un rectángulo. Déjame mostrarte. Así que simplemente dibujé un rectángulo por aquí, lo hice 0%, y lo muevo dentro de este try ahora, al fondo de este try ahora. Ahora el texto es que la parte superior y tenemos una capa oculta detrás de esto. Entonces esto es lo que vamos a usar. Para crear prototipos o vincular nuestros prototipos. Entonces esto es solo un bot simple y 24 pixel es una redondez y este es el tamaño y ancho. Esto es sólo una forma. Eso es todo lo que necesitamos. Ahora, vamos, hagámoslo un poco más pequeño. Eso es genial. De acuerdo, entonces ahora tenemos listo nuestro estado predeterminado. Ahora voy a replicar esto presionando sosteniendo y presionando opción de arte D Y simplemente arrastrándolo así. Y luego lo vamos a arrastrar así. Entonces este va a ser nuestro defecto. Este va a ser nuestro estado de botón hoover. Y este va a ser nuestro estado de Over link. De acuerdo, entonces lo que vamos a hacer solo vamos a cambiar el color. Usemos algo por aquí. Y yo voy a ir aquí así. Usa esto. De acuerdo, así se puede ver en este estado no he cambiado nada por esto porque si trato de cambiarlo, cuando alguien se cierne, ambos van a cambiar. Ahora, Preparemos el segundo. Entonces aquí en este hipervínculo, nada va a pasar con este botón. Pero este eslabón en realidad va a cambiar su color de este gris al negro raspado. De acuerdo, eso es todo lo que necesitamos. Por lo que ahora vamos a pasar a este prototipo y vamos a vincular estos. En primer lugar. Nosotros vamos a vincular éste a éste. Y sobre nuestra interacción más que onClick, Vamos a presionar este vil rondando. Por lo que todas estas mientras se cierne, mientras se presiona, estas son casi las mismas hojas de ratón entrar. Estos son casi lo mismo como hoovering. Pero tienen algunas otras opciones como tal vez quieras animar algo. Estos son para esas teclas y gamepad es en realidad la tecla que presionaste, por ejemplo, cuatro o cinco o seis, o P, o te cualquier tecla de tu teclado. Ahora mismo no necesitamos entrar en eso. Tan vil rondando vamos a seleccionar mientras se cierne. Y para la animación que voy a usar, usemos disueltos primero. Entonces voy a usar facilidad de entrada y salida 300 milisegundos. Y luego para éste, me voy a mover, vincularlo a éste, la misma, misma configuración de aquí. Ahora veamos cómo termina realmente. Por lo que ahora se puede ver realmente cool. Entonces cada vez que encima de esto, se puede ver cómo en realidad anima y se desvanece a ese color. Realmente genial, realmente genial. De igual manera para éste. Oops, ¿qué está pasando por aquí? A ver, cuál es el problema. Disolver está dentro, fuera o, por lo que no es onClick, Tenemos que seleccionar en mientras hoovering. De igual manera para éste. Ah, muy bonito, muy bonito, efecto realmente, muy cool. De acuerdo, entonces ahora has aprendido a usar este vil hovering en prototipo usando sigma. Espero sin embargo que puedas usar estos afectos en tus prototipos FISMA. Puedes usarlos en tus prototipos de diseño web como lo hice aquí en este prototipo para mostrarle a mi desarrollador que así es como todo el efecto va a funcionar. Por lo que espero que hayan disfrutado de esta lección. Nos vemos pronto en otra lección. Hasta entonces, cuídate y adiós. 36. Proyecto ► en el drag y el camino de la búsqueda y: Ahora es el momento de tu próxima misión. Y tu tarea es que ya has aprendido función de arrastre como esta. Se puede ver dónde aquí en esta función de arrastre prototipo. Y esta es tu primera asignación que tienes para crear un archivo. Esto se puede despejar de manera sencilla. Yo sólo quiero saber que usted ha entendido el concepto. Todo lo que puedes crear un email, lo que quieras, así que arrastra y arrastra. Entonces esta es una porción de esta asignación. Segundo, es que hay que crear algunos este desplazamiento horizontal dentro de un marco. Entonces esta es tu próxima misión. Crea esto y luego tienes que dar click en el prototipo de compartir Cualquiera con el link y copiar link y compartir conmigo el link en tu discusión o en la sección de asignación o proyecto , lo que sea que tengas disponible y quiero ver lo que has creado. Asegúrate de intentar usar tu nombre en algún lugar para que pueda recordar que esto es de este estudiante. Por lo que estoy viendo agricultor a su encargo esperándolo. Ahora sigue diseñando y mejorando y sigue prototipando. Como siempre, esto se va despejado del dedo del pie. Un mundo mejor con buenos diseños en cualquier caso, stock No 37. Aplicación de espejo Figma: vista previa en tu dispositivo real: en este video, voy a hablar de cómo puedes ver o previsualizar tu higo, mi diseño en un dispositivo real. Por lo que hay muchas maneras. Por lo que hay un espejo Sigma de la cancha de aplicaciones. Por lo que tienes que descargar eso en tu móvil, por ejemplo. Puedes ver esto está en tus dispositivos Mac o en tus iPhones. Por lo que tienes que descargar este espejo fig mom para tu iPhone. Y luego tienes que descargar el espejo de estigma para tus abs android. Por lo que ahora mismo tengo mi teléfono Android conmigo. Voy a cambiar a esa pantalla con mi cámara y te voy a mostrar que cómo puedes ver tu este globo ocular de pájaro. Aquí, déjame mostrarte este prototipo en un dispositivo real. Entonces hay unos pasos que te van a ayudar a ver esto porque algunas cosas son confusas y hay muy que puedes ver malas críticas para fig mi app. Creo que están tratando de mejorarlo. Tres estrellas por aquí y también 2.5 SARS o aquí. Por lo que realmente, realmente necesitan mejorar esto. Pero aún así, creo que voy a guiarte a través de todo este proceso. Entonces cambiemos a la otra cámara y veamos cómo realmente tienes que hacerlo. Ahora puedes ver mi impulso higo. App está abierta en mi teléfono android y tienes este email y contraseña tienes dedo del pie escriba la contraseña y el email fuera de tu fig. Mi cuenta. Ya lo he guardado. Entonces voy a presionar el registro. No. Una vez que inicies sesión, te va a preguntar eso. Seleccione un marco o componente que dirija Dax esté directamente sobre el lienzo. Entonces ahora tienes que moverte a tu higo, mi ab por aquí, y tienes que seleccionar los escándalos por aquí. Entonces voy a holgar cámara Estado de uno, que ahora mismo está en mi pantalla. Y verás que después de algún tiempo de carga se ha cargado esta pantalla por aquí. Entonces una vez cargada la pantalla, solo puedo un prototipo, por ejemplo, tocando por aquí. Se va a animar y transitar a diferentes pantallas, aunque es un poco legging y lento. Pero creo que puedes ver tu superior derecha. Estamos aquí que voy a ir a Skip, y se podría ver, el menú deslizante se acerca por aquí. Voy a ir a ajustes y quiero volver atrás y luego me voy de pie, sacar esto. Por lo que es una gran lentitud. Pero creo que, um, se puede ver al menos algunos fuera del trabajo fuera de él y se puede ver cómo en realidad va dedo del pie ser visto en una aplicación móvil. Creo que tienen que trabajar mucho en ello, Pero aún así, es un adelanto muy de vida. Tu diseño. Algunas de las veces en las que estás diseñando, tienes que ver tu diseño real en un dispositivo real como puedes ver donde aquí puedo ver claramente cuál es el tamaño del tipo, qué es un tamaño cuatro, pero que el medio del personal es suficiente para Norte este tipo de cosas. Por lo que tienes que ver tu prototipo en un dedo del pie de un dispositivo en vivo, en realidad ver algunos fuera de las cosas. Por ejemplo, puede ver este botón en realidad es suficientemente bueno dedo del pie, ya sabes, Tab o aquí, por ejemplo, este icono de círculo por aquí, este este este círculo cercano es en realidad una buena tamaño. Puedo fácilmente dap para el dedo. Entonces Estas son las cosas que tienes que ver. Por ejemplo, este teléfono para Chuy de este tamaño de texto y thes márgenes en los lados de este dispositivo. Por lo que estas son algunas de las cosas reales que tienes que ver en vivo en tu dispositivo. Entonces puedes volver atrás. Esperanzas volver a este higo mab. Puedes cerrar sesión y eso es todo. Por lo que espero que hayan disfrutado de esta lección. Tienes que descargar la aplicación estigma Miller en tu dispositivo móvil ya sea que estés en iOS iPhone y asegúrate de que el tamaño de marco de tu tamaño de marco que estás seleccionando el tamaño de tu tablero de arte sea en realidad el mismo que tu dispositivo en este momento. Se puede ver esta aplicación por aquí, que en realidad estoy tratando de usar es Google. Creo que en realidad me deja mostrarte. Es Google pixel para sobresalir. Entonces esto es 400 limón por 8 23 Este es el tamaño para mi este dispositivo android, así que en realidad tenía dedo del pie figura. Una vez que abrí esto por aquí, tuve que ver cuál es el tamaño que realmente va a caber en este dispositivo. De igual manera, si estás probando las pruebas de dedo en y iPhone 11 pro u ocho plus tienes que usar ese dispositivo físico. De lo contrario, ¿no se va a caber dedo del pie toda la pantalla. Va a ser un poco afuera, o tal vez en algún momento dentro de la pantalla y se va. Algunas áreas negras están afuera. Entonces estas son las cosas sobre el uso de la aplicación de espejo fig mom. Espero que hayan aprendido algo valioso de esta lección. Pasemos a la siguiente escucha. 38. Crear trazos de alambre y estudio de inspiración: antes de empezar a diseñar esta, uh, bonita aplicación fuera de cómo las recetas. Te voy a mostrar cuál es mi proceso de planeación y cómo he llegado a este diseño. ¿ Qué me inspiró? Cómo seleccioné thes colores para mi esquema de color. A pesar de que tengo diferentes cursos, puedes mirarlos. Tengo curso de esquema de colores. ¿ Es así como puedes dominar el esquema de color? ¿ Selección de tipografía? No voy a entrar en muchos detalles porque estos son temas grandes, más grandes. Pero cada vez que empiezo a diseñar algo desde la experiencia del usuario, punto de vista, te vas con el dedo del pie. Siempre ten algunos marcos de alambre fuera de thes. Entonces sin estos, no vas a ir a ninguna parte antes de estos marcos de alambre. Tenemos, ah, ah, tener experiencia de usuario, proceso de diseño, usar las historias, usar los escenarios, afinidad, diagramas y todo eso. Por lo que vamos a entrevistar a los usuarios. Vamos a ver cuáles son sus necesidades, y vamos a convertir tus rodillas necesita dedo del pie, hacer las historias, guerras y características, y esas características van a estar en un marco vil. Por lo que el marco de alambre va a ser el punto de partida fuera del diseño de la interfaz de usuario o siempre que se vaya a diseñar. Por lo que tenemos todas las necesidades del usuario por aquí. Y puedes ver esta es mi pantalla de inicio de sesión. Estos son los tiburones de piel de mi dibujo. Mal. Perdona mi diseño, o en realidad trato de ser lo más simple posible. Y puedes ver que tenemos tengo la idea de tener algún, um, um, lugar o algo así. Algunas manzanas por aquí. Algo así. Sí. Viene inicia sesión con Facebook e inicia sesión con Google y salta el Logan, por ejemplo. He visto y estudiado, como, cuatro o cinco vueltas me populares antes de diseñar esta. Esto es realmente importante. Entonces te voy a mostrar, Uh, Uh, esta es la inspiración para mí para el esquema de color, así que realmente me encanta el verde y el naranja. Por lo que principalmente uso esto. Entonces esto es en realidad un esquema de color. Pero no estoy copilando este esquema de color. Es diferente. Estos son colores diferentes. Ahora ya puedes ver que voy a ir de pie a inspiración por su cinismo. Y entonces tenemos un partidario de las ideas. Entonces en estas ideas para un se puede ver estas son las populares recetas abs, pero ninguna de ellas se parece a la mente. Entonces menos totalmente diferente me dieron las ideas. Diferentes ideas como esta navegación de fondo. ¿ Cuáles son las cosas diferentes? Se pueden ver algunas fuera de las cosas. Por ejemplo, la estrella valora esto. Entonces tenemos el ícono de búsqueda por aquí. Por lo que algunas de la adopción legal algunas fuera del asesino son algunas de las que puedes decir ideas como puedes ver estas están separadas por estas líneas. Y si miro en mi diseño, puedes ver que he usado estas líneas similares. Es posible que no te des cuenta de estas cosas muy sencillas. Se puede ver que tengo estos en mis ingredientes por aquí. Entonces esto es realmente importante. Obtienes muchas ideas al ver otras ideas. Vas a tener un montón de ideas si sigues buscando ideas diferentes sobre otros I Otros abdominales. Otros diseñadores que tienes remolque amplían tu puedes decir diseño, gusto y seguir buscando en diferentes diseños. Se va del dedo del pie, te da inspiración y te va a mejorar como diseñador. Por lo que estas son se pueden ver diferentes inspiraciones. Y estas son las ideas que tuve y de thes fui dedo del pie tienen algo como esto. Por lo que sigo probando estos marcos de fuego y se puede ver tenemos postres Sellards medios, postres sanos, destacados en los 30 metros recetas saludables título de receta estrellas, ingredientes y preparación. Debido a que estas son las dos cosas más importantes sin ingredientes, no puedes empezar a preparar tu receta por lo que los ingredientes van a venir. Entonces cada vez que alguien ama este ab, estos son esto en realidad se carga primero, y luego te mueves a la preparación. De igual manera, se puede ver si volvemos a marcos de alambre. Tenemos este tipo de opciones por aquí, entonces esta es mi configuración de cuenta de inicio de sesión, y estas son las cosas que tenía en mente. Para que unas cuantas cosas más como puedes ver u oír, escuchar. Tenemos diferentes alergias y dietas que prefieras. Entonces esto es en realidad esta es una característica que realmente diseñé e implementé en mi búsqueda por aquí , así que puedes ver si voy a buscar para que puedas ver si intentas buscar algo, tienes muchos filtros. Funcionarios. Yo morí planes filtros. Los filtros son alergias comunes como estas otras alergias comunes. La gente tiene comida de soya , granos enteros , gluten, incluyendo analogías o algo así. Por lo que puedes hacer clic y seleccionar ambos de ellos. Puedes seleccionar o bien la dieta y puedes seleccionar una alergia que tengas. Y estos van a ser los resultados. Eso se va a tener relleno este tal barra y te va a mostrar los resultados Así que puedes ver también he añadido este color que está dentro de este esquema de color y también esta naranja para que puedas ver realmente he cambiado algunos de los aspectos. Por ejemplo, tengo mucho apagado tenue, verde opaco en el fondo sobre el cabello en lugar de estar de acuerdo o algún color verde. Yo dije esto. Se puede ver qué aquí y los teléfonos que estoy usando. Por aquí están estas formas de Rubik Google y dinero de Yanta. Entonces si vas a iniciar este diseño están abiertos. Mi diseño en tu flema ahap tratar de descargar e instalar estos formularios es un sentido realmente hermoso . Sentido dijo si naranja y fácil de leer y tener algo de estilo a la misma. Estos son muy claros. Por lo que estos son los dos forts die faces que he usado en el diseño de esto. Este es el logotipo. Me diseñé solo para este ejercicio rápidamente. Para que puedas entender. Simplemente podrías entender el significado de esto. Y, uh, eso es todo. Entonces tengo algunos fuera de los iconos por aquí, que en realidad, um se puede decir que tengo un AB que se llama Nuclear AB. Por aquí, utilizo los iconos de este Puedes utilizar iconos de Google Material Design, icono de Google Material. Para que puedas tal material koukal de Icahn's Y aquí puedes ir por aquí. Yo puedo diseño de materiales y tú puedes seleccionar abajo a Lord desde aquí para que veas que tenemos flechas . Diferente tipo de adultos. Estos son iconos estándar. Se pueden utilizar iconos de él. Son muchos los videos. Yo he demostrado que cómo descargar y usar un icono entero. Se puede ver un sistema. Te voy a compartir estos iconos si quieres. Y puedes tener estos estos archivos SPD. Prefiero usar los archivos SPG como icono porque son expandibles. Entonces eso es todo. Es así como todo mi diseño fue de la mano. Y, uh, espero que disfruten de este ejercicio y aprendan de todo. En realidad lo diseñó. Yo siempre la visión. Siempre sugiere que si eres tipografía Regan o esquema de color o diseño de capas, tienes que tomar otros cursos los cuales van dedo del pie mejorar tus habilidades de diseño aprendiendo una herramienta y las habilidades de diseño son dos cosas separadas. Espero que hayan disfrutado de este video. Cómo preparar tu antes de tu diseño. Tienes que descargar estas cuatro tipografías tienes remolque. Selecciona tu esquema de colores. Tienes que tener algunas ideas e inspiración en tu bolso, y tienes que tener a tus viles amigos, Freddie. Entonces pasemos a la siguiente conferencia y empecemos a diseñar ahora. 39. Planifica las guías de cuadrícula antes de diseñar el diseño de las cuadrículas: ahora, en este video, nos vamos de pie a empezar. Y antes de eso, vamos a manejar nuestros grados y son geniales y vamos a tener algunas pautas para poder definirlas fácilmente antes de empezar y alinear nuestros elementos principales , como nuestra navegación superior o navegación inferior de acuerdo a esos lineamientos. Entonces lo que voy a hacer es tener un equipo que tú emocionado. Entonces tengo un proyecto en él clase de higment, y voy a dar click en nuevo archivo. También puedes hacer clic en borradores de este nuevo archivo, y puedes crear un nuevo archivo. Por lo que una vez que crees un nuevo archivo, va a ser sin título. Entonces vamos a renombrarlo y vamos a renombrarlo a la aplicación gratuita GMA food. Entonces aquí tenemos. Cambiemos el color de fondo, así que voy a ir con un fondo más oscuro porque es más fácil ver las cosas por aquí. Entonces aquí lo tenemos. Lo primero que me gustaría que crearas por aquí son tus marcos viles, que puedas crear tus marcos de alambre en papel, bolígrafo y lápiz y solo tomarte la pantalla corta y traerlos por aquí. Eso es todo lo que no necesitas para dibujar tu Puedes decir marcos de alambre en fig MMA. Si quiere dibujar habitaciones de su esposa por aquí, impuestos hasta usted ahora voy a crear tres páginas. Uno va a ser marcos de alambre. Segundo va a ser nuestro diseño. Um, los próximos eruditos somos nosotros. Sí, o llamémoslo hombre diseño. Y entonces podemos tener otra página llamada Styx Guide. Donde estuvimos, todos nuestros componentes estarán, Así que esto va a ser sobre una estructura. Ahora vamos a ir al diseño principal, y lo primero que vamos a hacer es que vamos a presionar A o F G para ir a este tableros o marcos de arte . Por lo que a la derecha, tenemos iPhone 11 pro Max 11 pro. Voy a ir con 11 pro, y aquí tenemos nuestro tablero de arte ahora, antes de seguir, porque cada marco va a tener los mismos ajustes que el siguiente. Entonces vamos a definir nuestro grado de diseño por aquí. Entonces vamos a presionar este ícono más por aquí, y vamos a ir a las columnas del dedo del pie y vamos a usar cuatro columnas por aquí. Vamos a centrar, Align Aid Y nuestra cada columna tendrá casi 70 grandes de ancho, y Dios tendrá 20. Entonces esta va a ser nuestras columnas y ajustes para nuestro grado de maquetación. Entonces una vez que hayamos definido de manera abierta la calificación, vamos a pasar al siguiente paso, que va a ser nuestros lineamientos. Así que asegúrate de tener regla por aquí arriba y por la izquierda para que puedas ver a la derecha este menú tenemos reglas encendidas. Así que asegúrate de haber aprendido gobernantes encendidos puedes presionar turno en nuestro para encenderlos. Entonces una vez que los hayas hecho y puedas ver hecho apagado y encendido, Así que una vez que estén encendidos, vamos a arrastrar una regla por aquí, y vamos a colocar el 1er 1 en 24 píxeles por aquí, y luego vamos a arrastrar y soltar el siguiente a 72 píxeles por aquí. Entonces esto va a ser para la alineación de nuestros iconos. Nuestros iconos van a estar tocando este 80 por aquí que este va a ser nuestro tal bar por aquí. Y si bajamos aquí será nuestra a las 50 Big Oezil's. Estamos aquí. Se puede ver a la izquierda. Si voy por aquí a la izquierda, puede ver el valor es 1 50 Así que vamos a dejarlo así y vamos a arrastrar el último que va a estar por aquí. Entonces si no estás seguro de que cómo puedes vas a arrastrar estos. Puedes crear tu propio elemento. Entonces aquí, por ejemplo, voy a tener Altura fuera 60 cerdos es para la navegación inferior. Así que voy a dedo del pie crear una caja por aquí fuera de 60 pixeles solo para caja temporal, solo temporal y voy a alinear esto. Por lo que han visto que he hecho clic fuera del dedo del pie, que sea directriz universal. Por lo que tenemos tres lineamientos en la parte superior. De igual manera, puedes hacer lo mismo aquí para que puedas crear un activo fuera de tu rectángulo fuera de tamaño de 24 píxeles y lo vamos a alinear en la parte superior. Y si no sabes cómo dedo del pie hacen exactos 24 pixeles. Simplemente crea estos elementos como este elementos temporales, y vamos a arrastrarlo y soltarlo así. Se va a chasquear por aquí. Esto es realmente bueno, porque tenemos que ser algo. Tenemos algo como esto. Entonces vamos a crear ahora, que sea de lado 72 se puede ver que se está chasqueando correctamente. Lo tenemos en 72. Entonces vamos a estar en 1 50 Eso s cordón. Lo tenemos en 1 50 Así que nuestros principales lineamientos están completos. Vamos, um, um, asegurarnos de que estos sean en realidad lineamientos globales. Entonces voy a dedo klik afuera y arrastrarlo y soltarlo por aquí así, que voy a hacer 1 50 Click exterior arrastrar y soltarlo por aquí así. Entonces creo que tenemos que venir aquí. Entonces vamos a quitarlo y crear uno nuevo. Arrastrémoslo y soltémoslo por aquí. Entonces así es como vamos a diseñar nuestra interfaz principal y cómo vamos a empezar . Este va a ser nuestro lienzo. Entonces una vez que íbamos a completar para pantalla, sólo vamos a replicar este. Por lo que da click en esta presiona la tecla Opción de Artur y vamos a duplicarla así para que también puedas mantener presionada tu tecla de turno a todo puede shift para tenerla alineada de la misma manera en la misma línea, que justo donde tu primera marco es. Entonces así es como realmente lo haces. Entonces esta es nuestra esta va a ser nuestra primera pantalla. Y una vez que tengamos esto, vamos a renombrarlo dedo del pie, um, en sorteo o algo así. Y vamos a Delia Rex usó este rectángulo. Teníamos un rectángulo por aquí, así que dibujemos un rectángulo para el fondo. Para ser este tamaño completo por aquí así, expresa uno para acercar al ajuste y tenemos este fondo. Vamos a llamarlo PG o fondo. Ahora vamos a arrastrar nuestra imagen dentro de ella, y vamos a ir del dedo del pie dentro de este contenedor y moverlo por donde advertimos que la imagen sea 40. Diseño de los usuarios de la pantalla de inicio de inicio de sesión: Ahora pasemos a los recursos para la cena. Yo he atacado con este ejercicio. Tú lo eres. Ya lo has descargado. Ahora lo vamos a abrir y la imagen del conductor por aquí. Entonces aquí está nuestra app de comida. Recurso es, Y dentro de las carpetas de imágenes, se pueden ver estas otras imágenes. Aquí están las imágenes para en fondos que están muy vacías y se pueden utilizar por aquí. Por lo que en realidad uso este. Entonces voy a arrastrarlo y soltarlo e igualar mi así, ese zoom hacia fuera. Y se puede ver que este es en realidad el límite fuera de esta imagen pulse shift, opresión persona Mantener el turno y alterar opción tecla dedo del pie. Hazlo mi grande, más pequeño así. Vas a moverlo así. Y una cosa que vamos a hacer es que vamos a soltar ambas capas y en realidad vamos a control de mezquita, arte y opción de comando marcador. Y así aquí está nuestra mezquita. Entonces ahora puedes ver este fondo en realidad está enmascarado por este rectángulo de aquí, así que estoy libre de moverlo. Ocultemos nuestro diseño. Control de cuadrícula turno cuatro es un atajo en, um, B c y creo que el control G o controlado. No recuerdo el atajo en el Mac, pero se mostrará en pantalla. Entonces, um, solo para asegurarnos de que podamos diseñar fácilmente en lugar de discos que distraía por aquí. Por lo que quiero mover esto. Se puede ver que he seleccionado esta imagen o aquí. Por lo que se está moviendo dentro de este contenedor. Entonces vamos a moverlo así, y puedes agrandarlo y lo puedes maquillar. Es un poco más pequeño así, y creo que esto se ve genial. Ahora bien, si quieres cambiar Ah, esta imagen o cualquier configuración puedes acudir a esta imagen. Puedes cambiar los resaltados aumentar el resaltado, Al igual que este resaltado en realidad lo está haciendo un poco más brillante. Los blancos son sombras más prominentes, Atmore, oscuro contra. Si quieres que las sombras sean más oscuras, puedes ir por aquí o tal vez algo así. Por lo que aquí tenemos nuestra imagen. Ahora vamos a ir a la carpeta de otras fuentes y conseguir nuestro logo Ahora. En realidad, lo que hice es crear este logo dentro del hap estigma y realmente no recomiendo realmente nunca recomiendo lema fig. Crea un logotipo. Entonces lo que está pasando es cuando trato de exportarlo usando SVG formarlo. Me está dando un logo tipo off muy virado. Por lo que ahora puedes ver lo he exportado usando granjeros PNG por aquí y exportado este logo. Y vamos a arrastrar este logo PNG porque s que no está funcionando. No estoy seguro de lo que está pasando, Así que aquí tenemos nuestro expediente. Entonces, arrastrémoslo aquí así. Entonces vamos a colocar nuestro logo así por aquí, y luego vamos a colocar nuestro texto por aquí, que waas libro de recetas Healthy. Ahora vamos a agarrar nuestra herramienta de texto y fideicomisario, y vamos a ir justo aquí. Libro de recetas saludables, y puedes usar Roberta para dos. Pero hemos usado Sí, forma Monta. Este es en realidad un teléfono de Google se pone gratis, y vamos a usar 18 existir por aquí para este. Y, uh, espaciado de letras va a ser del 5%. Y, uh, creo que es todo lo que vamos a alinearlo en medio esto un poco a la izquierda y el color será será el próximo uso excepto un similar de siete años. Ganó 88. Entonces este es en realidad un gran color azul. Puedes ver tu cabello y yo no quiero que el usuario esté muy atento a esto. Entonces aquí. Entonces este es nuestro logo. Y esta es nuestra siguiente línea o como lo llames. De acuerdo, entonces aquí lo tenemos. Entonces vamos a crear dos botones los cuales se van a iniciar sesión con Facebook e iniciar sesión con Google. Entonces consigue y usa esos colores de Google y Facebook. Se puede ir a este sitio web marca color start net, y se pueden encontrar los colores fuera de Google, por ejemplo. Puedes escribir Google por aquí, y este es el color rojo que Google está usando para que puedas copiarlo tomó portapapeles, y puedes usar el mismo color o aquí. Entonces vamos a crear un rectángulo, y vamos a usar colores azules para Google, un regular para Google y Blucher para Facebook, este. Entonces sólo agarrando estos valores por aquí y vamos a crear algunos botones, agarrar un rectángulo y el tamaño de carga que voy a usar es 304 es la tercera vez. 48. Brasil es la altura, así que usemos 304 y 48 es la altura. Siguiente alinearlo en el medio, o puedes usar esta son nuestras opciones picor. Entonces esta es en realidad la tecla de acceso directo. Y voy a usar el color de Facebook, que va a ser copiado de aquí y simplemente basado que estaba aquí así. Entrar. Por lo que tenemos nuestro botón de Facebook. A continuación, usa unas esquinas redondeadas de cuatro salidas alrededor de ness por aquí. Entonces este va a ser nuestro botón, y vamos a arrastrar y soltar nuestro icono de Facebook, que ya tenemos dentro de un recurso son iconos. Y este va a ser Facebook con el Facebook Facebook, Este. Entonces aquí está el Facebook. Lo vamos a arrastrar y soltar por aquí así que se está moviendo por dentro. Esto que está desarreglado esto Vamos, turno barato. Entonces en realidad necesitamos esto. No necesitamos éste. Y también marchar si g un grupo. Entonces este es nuestro Facebook. Oh, genial. Entonces vamos a ponerle el dedo del pie color blanco, o podemos usar un gran off um blanco azulado por aquí. Algo así. Esto también puede funcionar. Por lo que el impuesto que vamos a utilizar es iniciar sesión en Facebook. Reflejan esto nuestra opción V trabajar rápidamente. Alinearlo. O puedes usar este uno Opción B y otra vez, el color. Vamos a usar este mismo color. Entonces nos vamos a sumárselo a nuestros Oops. Lo que estaba ocurriendo se sumó a otros estilos. Voy dedo del pie más azul, um, blanco, uh, azul. Disculpe esto. Y a este color, también. Lo vamos a nombrar Facebook. Sí, humo. Entonces para que esto llegue al mismo blanco, vamos a usar estilos por aquí, igual que este color. Por lo que inicia sesión con Facebook y el texto será Rubik. Por lo que cuatro botones estoy usando verdadero teléfono grande. El árabe también es Google para bien, buenos puños die. Y como puedes ver, es un tipo de letra un poco más grande. Entonces vamos a usar un poco más pequeños así, y vamos a usar 2% o pelo y vamos a usar el caso, Toby, Toby, todos los huecos como este. Ahora de nuevo, lo vamos a alinear en el medio porque se está saliendo. No, podemos alinear estos lados de la carga. Entonces, vamos a tener un hueco. 20 cuatro por aquí a la izquierda. Vamos a tener un 24 estuvieron aquí, dedo del pie. Entonces esa es tu iniciada. Aquí una guerra. Entonces tenemos sobre Gran Bretaña. Aquí te puedes ver. Seleccionemos esto. Todos estos. Agrupemos primero este mando controlador G. Así que tenemos ya puedes ver. No, esto es un poco mejor porque tenemos nuestros antecedentes separados. Ahora puedes ver el enmascaramiento cualquier ojo por aquí. Entonces tenemos todos estos fuera de la mezquita ing. Entonces este es nuestro logo. Entonces agruparemos estos nuestro grupo de logotipos scald them. Este es nuestro fondo para el botón BG Burton mediana. Y estos todos estos están vinculados con el botón Facebook vidi en Facebook así, siempre es mejor. Arreglas todo así. Entonces una vez que tengamos esto, vamos a presionar el control. Comando d son podemos crear un componente o aquí para que puedas hacer cualquier cosa como esto. Entonces en este momento no voy a ir a crear un componente. Voy dedo del pie solo duplicarlo y replicarlo y simplemente tener otra carga aquí como esta. Y, um, arrastremos el ícono de Google por aquí. Sí, lo tenemos. Vamos arrastrados hasta aquí. Mismo color blanco, colores locales. Y este es el acantilado blanco que vamos a usar. Ups. Entonces? Entonces vamos a moverlo con el teclado. Presiono las teclas de turno y flecha para moverlo, porque desde mi ratón, no era duro, fácilmente cangrejo capaz. Entonces, eliminemos a este grupo. Esto en realidad está bien, así que eso es bueno. De acuerdo, entonces vamos a cantar el dedo del pie de color. Mismo blanco por aquí y la Galería Bagram ser asesino de Google. Entonces vamos a ir por aquí y encontrar el color rojo de Google. Este va a ser el asesino de Google y menos que lo haya hecho, agregó y jean el color de la colegiala Asesino. Y ahora vamos a añadir este color de Google a nuestra tienda de estilo. Entonces vamos a añadir Google estilo creado correcto. Entonces tenemos nuestros dos botones. Una cosa más es, si quieres agregar sombras, puedes agregar una tienda de hechos, así que voy a añadir una sombra de gota muy sutil por aquí para desenfocar. Vamos a usar la sangre fuera de ella, y yo la voy a tener demasiado exults como este, y esto va a ser casi 15% Muy, sombra muy sutil. Por lo que una vez que tengamos esta sombra, también podemos despejar un efecto llamado estilo de hechos. Y lo vamos a llamar Burton Shadow. Tan cierto. Entonces ahora vamos a seleccionar sus antecedentes por aquí, y vamos a aplicar el mismo efecto que es todo. Entonces, uh, entonces creo que estas disfrutando esto. Y, um, te sorprenderán realmente las características de Sigma vamos y la última línea por aquí, que es Vamos a navegar. No. O también puedes renombrarlo para omitir iniciar sesión algo como eso no son picor. Vamos a moverlo con las teclas de turno y flecha y también puedes moverlo. Uno cerdos por teclas de flecha como este solo píxel y me voy dedo del pie Hazlo. Presionemos tu presente. Sostén tu llave de espinilla de gota AR, y puedes ver que has seleccionado esta. Y si arrastras y um, sobre tu y otro artículo, te mostrará la distancia entre ambos de estos 2 27 Yo quería a Toby. Vamos, um, usado 20. Creo que es que es bueno lo que se puede definir fácilmente, por lo que también puedes tener el dedo del pie piense en las cosas. Por ejemplo, esta va a ser la idea de tabulador para esta. Y esto va al DAP aquí para éste. Esta va a ser la idea de tabulador o sección para ésta. Por lo que estos tienen algunos buenos márgenes entre ellos. Buena distancia entre ellos. Por lo que el usuario puede rápidamente fácilmente. Por lo que el color para este omite log y será H S B. El color es de 1 78 que es el verde. Tú, nuestro principal color primario 73 es la saturación y el brillo es del 19%. Este es el color para el registro de omitir. Y esta es en realidad nuestra mayor. Se puede ver el color, que son nuestras piernas. Vamos a la universidad verde oscuro. Este es nuestro color verde oscuro, muy negruzco lo estaban usando para texto los cuales son muy oscuros y en su mayoría para thes links color. Por lo que esto se va a vincular. Este es también del mismo color para este logotipo. Las consignas no negras. Es de color verde muy oscuro, ¿ cuál es éste? Omitir saltar largo y así la distancia entre estos dos botones es de 12 12 píxeles. Puedes agregar la distancia si quieres. Si querías ser más espacioso. Puedes agregarlo para ser como 16 así. Y también puedes agregar algo más de distancia por aquí 24 o algo así. Pero creo que me gusta como este 12 es lo suficientemente bueno para mí. Y 20 es lo suficientemente bueno para mí. Entonces así es como se crea y se mantiene en los judíos. Problemas de habilidad fuera de los absueltos porque esto estos tres Pero como son más bajos en esta área nuestro cabello tu Tom puro tu sistema puede llegar fácilmente a esta zona. Ahora bien, si quieres, has completado la pantalla. Entonces, vamos a alejarnos. Esto es muy necesario. Siempre que creas algo, siempre me alejo y veo eso si quiero. Somos sólo un espaciado Son algunos elementos por los que quiero moverme. Se puede ver estos no estaban en los centros donde los moví en el centro un poco arriba por aquí. Se ve genial. Veamos esto en un prototipo por aquí. Por lo que me mudé a este prototipo iPhone 11 probar modelo. Voy a usar la pantalla espacial y, uh, explicó esto es lo único que no me gusta de fig podría tomar algún tiempo porque es una aplicación en la nube. Toma algún tiempo si tus imágenes son muy grandes y toma algo de tiempo para Lord ellas así . Entonces esto se ve bien. Creo que tengo el problema fuera de esto a Chile's por aquí. Se puede ajustar la imagen. ¿ Qué? No obstante, usted advirtió. Entonces vamos a rápidamente sólo la imagen y hagámosla un poco más grande así. De acuerdo, así que esto me está buscando perfecto. Este luce perfecto para acercar al ajuste. Y creo que esto va a terminar con esta lección. Si tenemos algún problema o algo que no se vea genial. Por ejemplo, se puede ver en la imagen de aquí fondo. Hay algo por aquí. Entonces el simple truco es que si quieres quitar algo, voy a usar una elipse por aquí así. Me mudé al diseño, y voy a usar el mismo recolector de color color, y voy a usar el mismo color que esta zona de aquí para que puedas verla aquí. Ahora voy a mover este lote por aquí así, y vamos a moverlo justo por encima de este fondo, y en cambio creo que puedo ver algo de la sombra por aquí. Vamos a acercar. Oops, se ve así. Y hagámoslo un más grande así. Por lo que ahora se puede ver que no es muy visible desde muy lejos. No se puede adivinar que hay algo usado por aquí, Así que es sólo la mayoría dentro de sus fondos. Esto se ve bien. Por lo que estos son simples trucos que puedes aprender cuando alguien está diseñando. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta o no tensas nada, puedes preguntarme. Pasemos a la siguiente lección. 41. Pantalla de casía: diseño de aplicaciones móviles: ahora, lo primero que vamos a hacer es convertir este componente botón toe porque vamos a usar este botón con on Icon. Entonces hagámoslo. Entonces vamos a seleccionar a este grupo. Esta es nuestra carga de Burton Facebook. Y haga clic en esto y esto va a ser un componente. Se trata de componente maestro. Por lo que no queremos Overwatch, Componente Maestro. Toby, Dentro de este diseño, queremos tener sobre instancias o aquí, por lo que comando o controlar datos duplicados para que veas que tenemos otra. Por lo tanto, selecciona este hacha maestra de Comando de Control de Componentes, y lo vamos a mover a nuestra guía de estilo. Entonces si no has creado un marco por aquí, solo presiona f o a y nos vamos a conseguir un marco y basarlo aquí así. Entonces aquí tenemos nuestra pretensión. Ahora, vamos a conseguir algunos ajustes por aquí. Por lo que este texto tengo doble click para conseguirlo. Va a ser, um, um, pegue dedo del pie este lado derecho y en la parte inferior por aquí, o puede tenerlo a la derecha y al fondo. Este va a ser otro escenario, por lo que siempre tendrá el mismo espacio aquí así. De igual manera, para este ícono de Facebook se iban dedo del pie han apagado izquierda y derecha. Por lo que va a mantener el mismo espaciado izquierdo e inferior si tratamos de aumentarlo. Entonces si tratamos de aumentar esta carga, se puede ver si intento aumentarla por aquí. El logotipo de Facebook se pega a esta izquierda. Entonces este va a ser el comportamiento fuera de este botón. Entonces este es nuestro componente. Si queremos cambiarlo más adelante, podemos cambiarlo por nuestro componente maestro. Entonces este va a ser nuestro botón con, um, um, icono de botón. Vamos a llamarlo botón con Icahn. Entonces este va a ser nuestro botón con icono. De acuerdo, entonces volvamos al diseño principal y dejémoslo. Porque en realidad, creo que también deberíamos usar el mismo componente por aquí, Pero ahora mismo lo vamos a dejar porque basó mucho tiempo. Así que una vez que hayas creado componente, sólo tienes que cambiar el color y cambiar el logotipo por aquí. Llamo aquí y tendrás algo como esto. Entonces vamos a sumergirnos. Replicar esto y vamos dedo del pie presionando nuestra tecla de opción y junto con voy a presionar la tecla Mayús para crear otra pantalla como esta. Ahora voy dedo del pie borrar esta imagen por aquí en el fondo esperanzas. Entonces esto va a ser Vamos a renombrar esto primero. Entonces va a ser nuestra pantalla de comidas medias Así que esto se va a hacer significa pantalla. Entonces hagámoslo y abramos éste y vamos dedo del pie quitado Esta elipse esta imagen por aquí Esto es bueno. Vamos, um, quitemos esta mezquita en abajo aquí y vamos en turno en G ian grupo esto y esto se va a quitar por aquí. Esto va a ser una opacidad grande, más pequeña y un 30%, y vamos con el dedo del pie hacerlo un poco más pequeño. He bloqueado esta ex proporciones. Hagámoslo 20 24 32. Este se ve bien. Esto va a estar por aquí en alguna parte. Por lo que este fondo en realidad va a ser de este color e d. F. Tres f cuatro. Entonces este va a ser nuestro mayor color de fondo que va a estar conteniendo por toda pantalla Así que este va a ser nuestro color. Por lo que se puede ver esto se ve muy bien en este fondo. Si queremos aumentar la opacidad, usemos el 40% aquí así. Por lo que este logotipo se va a minimizar aquí en esta pantalla. Dejémoslo así. Vamos a traer iconos antes de eso. Vamos a quitar estos o aquí así. Entonces tenemos este espacio vacío o aquí, vamos a traer nuestros iconos de espalda Adil. Y aquí tenemos el ícono del filtro de lo que tenemos tal botella aquí. Todas estas cosas van a estar por aquí, Así que empecemos. Y esta es nuestra flecha izquierda. Esto en realidad es de 24 por 24 píxeles, así que puedes ver qué pelo 24 es el tamaño, y pongámoslo aquí y alinémoslo así. Entonces tenemos nuestro cono seco o icono de embudo por aquí. Vamos a agarrarlo y dejarlo todo aquí así. Esto también va a ser 24 esto se va a alinear con discreto. Por lo que se puede ver este es el valor fuera de la cuadrícula. Tenemos este diseño crear cuatro columnas y estaban alineando las cosas de acuerdo a eso. Siguiente muévelo en el medio. Escrito a la derecha a la izquierda estaba un poco desequilibrada. Artículo de diseño más aquí. Entonces una vez que lo tengamos, vamos a usar un peso completo por aquí para crear nuestra barra de este tipo. Este es un va a ser nuestro buscador va a tener 48 pixeles de alto. Y, um , van a ser 300 39. Esto es sexualmente el delantero y el color va a ser blanco, y vamos a usar el mismo radio de tablero cuatro para este. Entonces ahora vamos de punta a línea. Creo que este waas alineado sobre el cabello. Este estaba un poco arriba por aquí. El color de estos iconos. Déjame primero el color de Heidi para estos iconos Waas, verde medio, que es nuestro, uh usemos este color. 43615 e. este es nuestro color verde medio. Entonces agreguemos este color 12 una guía de estilo. Se trata de plantel medio cremado. Ups. Creo que tengo seleccionando todos ellos. Entonces vamos a seleccionar uno de ellos. Seleccione este color espera esperanzas. Ahora vamos a tener un verde medio para que puedan ver a veces todos yo menos nosotros. Este es nuestro verde medio. Esto es, um OK, así que este es nuestro logo. Esta es nuestra barra de búsqueda Por aquí. También podemos añadir un efecto de trazo a su alrededor. Va a ser, um, um, asesinos locales, Lex uso decolor. Y vamos a bajar la opacidad a 15% así, para que veas que tenemos línea muy tenue. O aquí, vamos a acercar y mostrarte lo que este efecto está haciendo en realidad. Entonces se puede ver que esto es en realidad lo que está pasando por aquí. Entonces alineemos esto. Remolque estas líneas por aquí así, y este va a ser nuestro tal bar. Vamos a usar un poco de impuestos tu cabello. D um, tal ressie B espera receta como esta. Esto no va a ser todo gorras, por lo que va a ser como se escribe. ¿ Este caso es realmente tal receta como esta? Esto te va a creer grande regular. 16 cerdos, 2%. Entonces este va a ser en realidad nuestro texto. Entonces, um, cambiemos el dedo del pie de color otra cosa porque no va a ser muy, um, brillante o aquí, tal vez algo como esto. Para que veas que estoy usando el mismo color. Simplemente cambiando algunos de los Hughes o cosas así. Estamos sólo de mi agrado aquí, pero debe ser visible para el usuario. Entonces vamos a crear un textil. Ahora bien, este es en realidad nuestro verdadero Bic 16. Y con eso, voy a usar cuál es su propósito. Entonces en realidad es nuestra, um, acción de botón siguiente. Entonces esto es, uh lo puedes ver para que pueda memorizarlo fácilmente. Que esto se va a gravar para los botones es el mismo texto que hemos usado aquí para estos. Estos estaban aquí y también para esto por aquí. Entonces esto va a ser nuestras deudas fiscales. Vamos, uh, Jane este estilo y usemos como es tipo. Entonces esto va a ser un poco mejor para mí así. Ahora vamos a añadir tal ícono por aquí. Entonces get yo era tal ícono es mi ícono de búsqueda, este. Entonces sólo cangrejo y arrastra y suelta por aquí así, así. Simplemente cambia el color que éste. Y, um, disculpa esta para que no queremos que todos los colores llamen la misma atención. Entonces vamos a usar, um, se puede decir que esto va a estar arriba. Este color y decolor es el mismo. Entonces cambiémoslo por otra cosa. Te permite el mismo color que esta barra de este tipo. Entonces voy a seleccionar y es como el mismo color aquí así. Creo que hemos seleccionado el color Hong de todos modos. Entonces es el Selectric de aquí. Esto se ve bien. Añadamos este color. Gran verde. Vamos a llamarlo gran verde para que Zo Motor y veamos qué está pasando. ve bien. También puedo hacerlo un poco aburrido. Poco más ellos o más grisáceos. A lo mejor así. A mí me gusta mejor este color y llamémoslo genial. También voy a usar el mismo gris por aquí para que ese interruptor para discretar esto se vea mejor porque es azul, verde y verde. Todo se veía verde, así que lo he hecho así. Ahora, se completan este tipo de asuntos, podemos agruparlos fácilmente, así que vamos a seleccionarlos todos y mandar y controlar G para agrupar esta parte tal y por qué estamos haciendo esto Porque fácilmente podemos crear un componente fuera de ella. Por lo que esto se va a espaciar a 13 píxeles de aquí. Entonces hagámoslo 14 15 16. Y de igual manera, tenemos éste. Este es también 16 de este lado izquierdo. Por lo que estoy usando clave de opción de arte para mí en la distancia, como se puede ver u escuchar 16 a la izquierda. De igual manera, tenemos éste. Se puede abrir este grupo y tenemos este vector dentro de él. Vamos a eliminarlo porque no queremos tener complicados unos iconos complicados. Entonces me gusta más así. Entonces este es nuestro icono de este tipo. Llamémoslo icono. Esta es nuestra barra de búsqueda. Este son nuestros traseros de fondo para tal barra. Y para todo este tipo de barra, vamos a crear un componente. Entonces mando o control R K Opción K. Y este es nuestro componente. Lo mismo. Vamos a hacer control de comando de para replicarlo, y vamos a puntera cortar esto y moverlo a nuestra guía de estilo por aquí. Entonces esta es nuestra barra de este tipo, para que no veas que estamos construyendo nuestra guía de estilo. Entonces Uops. Entonces una vez que hayamos creado esto, vamos a volver al diseño principal y vamos a crear esta navegación o cabeza. Esta es la navegación que vamos a crear. Ahora vamos del dedo del pie, ten un texto De y vamos a usar a Mees. El texto será No va a ser Rubik. Vamos a desprendernos esto y vamos a dedo usar mina joven de y para 16 cerdos es 5% y voy a usar la alineación media. Va a ayudar cuando lo alineemos y esto va a ser vita siguiente, y el trasfondo detrás será éste. Estamos aquí, Así que voy a usar, um 64 píxeles de ancho y 32 píxeles de alto. Y usemos la frontera Kanakaredes para antes de que puedas ver las comidas está detrás de este rectángulo. Entonces vamos a moverlo hacia arriba y soltar tabla de ellos. Los mueves en el medio así, por lo que esto se siente traída. Entonces estoy moviendo rectángulo de pueblo parece un poco más pequeño, así que voy a hacerlo un poco más grande. Todo filo, lo estamos. De acuerdo, entonces tenemos esto listo Así que cambiemos el color del dedo del pie este Phil, que va a ser nuestro color verde primario, que es un color más nítido para este. Entonces en realidad, nuestro color verde primario es cero e 5956 Así que este es nuestro color reina primaria, para que puedas ver esto es muy afilado. Esto es muy animado o vive Lee, como sea que lo llames, este es un bonito color. Entonces vamos a agrupar esto, y vamos a moverlo por aquí menos use nuestras pautas para alinear el turno de control de asesinatos cuatro. Y creo que hubo control. No estoy seguro de cuál fue el atajo para Mac, pero voy a enumerar hacia abajo. Entonces aquí lo tenemos así. Ahora puedes ver este es nuestro grupo Mies. De acuerdo, entonces este fondo va a ser movible. Entonces vamos dedo del pie, quítalo fuera de esto. Entonces vamos a subirlo. Y este fondo es que se puede ver esto está fuera de este grupo significa Así que tenemos medios activos, mirados en un come on d y esta va a ser nuestra calle inactiva. Entonces en la parte inferior, tendremos a Stoute inactivo tan inactivo asesino fuera del texto será, uh, éste. De acuerdo, este es en realidad nuestro color verde medio para 3615 Así que déjame mostrarte lo que en realidad quiero decir por inactivo. Entonces, ocultemos esto activo y ocultemos este fondo. Se puede ver que este es nuestro estado inactivo. Ahora, vamos a sólo replicar esto. Tenemos esta sobrecarga de fondo, estado activo siguiente y cuello si vamos a escondernos y, um, hay permitiéndoles mejor. Ups. De acuerdo, entonces lo vamos a replicar. Primero usemos algo así como, Oops. Entonces vamos a holgar estas comidas y toda opción. Arrástrelo así. Nuestra distancia de distancia, como 33. 32. Ah, aquí. Y vamos a la prensa del dedo del pie. Vamos, Control de. Replicar esto así, para que puedas verlo en realidad está usando el mismo espacio al replicarlo así. Entonces primero vamos a renombrarlo. Ahora, esto va a ser Sellards y también para este estado inactivo. Empezó éste. Entonces justo el tiempo en realidad reemplazando el texto, entonces los vamos a alinear de nuevo. Way han creado todos estos y se les renombró, uh, control práctico o comando son ensalada. Arrojalo. Esta es una tecla de acceso directo. Ahora lo vamos a mover fuera de este lienzo porque queremos tener una buena distancia entre ellos. Entonces ahora voy a usar distribuir espaciado horizontal como este para que podamos tener algún menú como este. Vamos a moverlo un poco. Por aquí se ve demasiado ancho. Entonces es como estos 40 años. Entonces voy a tener una distancia de 40 entre ellos. 56 algo como esto. Vamos a moverlo un poco. O aquí 26 26. Y en realidad queremos a mi unidad desde aquí. 123 123 y sobre tres. Por lo que todos tienen la distancia de 30 seis dentro de ellos. Entonces ahora si queremos cambiar el fondo simplemente lo que tenemos que hacer es esconder el estofado activo que en el estado inactivo y mover el fondo a éste así. Y al igual que tu ensalada, vamos a usar el estado activo y ocultar el estado inactivo. Entonces así es como lo vamos a mover y cualquier enano alrededor de esta idea de Ugarte. Entonces en la siguiente lección, vamos a preparar el resto de la cosa porque se está haciendo muy largo. No quiero que esto como solo sea realmente aburrido, así que pasemos a la siguiente lección y creemos el resto fuera de la pantalla. 42. Pantalla de casía: diseño de aplicación móvil 2: en esta lección. Vamos a crear la navegación inferior que va a estar al fondo esta app aquí en esto o aquí porque queremos tener navegación primero. Entonces vamos a crear el contenido dentro de él. Entonces para hacer eso, vamos a usar un rectángulo por aquí. Este va a ser un rectángulo para la navegación y va a ser tu blanco. Ahora puedes ver por qué estoy usando el blanco porque va a tener algún contraste en este fondo. Este fondo no es blanco puro. Tiene color verdoso y te rematan en él. Entonces una vez que tengamos esto, vamos a usar un fax por aquí para tener alguna sombra de caída de trampa. Pero esta vez la sombra de gota estará en el lado opuesto. Entonces vamos a usar menos para, como, como, esta sangre va a ser seis como este y vamos a usar 10% algo así como esta sombra muy sutil. Y también puedes tener una sombra fuera del mismo color. Que va a ser esto. Usemos este color de fondo y lo vamos a amplificar así por aquí. Por lo que este es el color de fondo que estaban usando. Y esto es, um, 100%. Entonces vas a usar 15%. Usemos un 20% así. Siguiente acercar. Y, uh, ¿dónde están estos? En realidad, este va a ser tu cabello. De acuerdo, así que aquí está nuestra navegación de fondo. Alejar el zoom en Hyde. El Kruger es así. Entonces esta va a ser nuestra navegación de fondo. En realidad son 60 fotos de eso deberían ser de 60 píxeles. Por eso estaba ocurriendo. Entonces cambiar nuestro No, en realidad, esta waas correcta. Ahora se ve leído. En fin, soy muy grande Zil Perfect. Por lo que trato de ser lo más perfecto que pueda. Ahora vamos a agarrar, y este va a ser nuestro PG de navegación, por lo que será estático. Entonces vamos a arrastrar y soltar todos nuestros iconos en sus estados. Entonces esta va a ser nuestra casa sobre mí e ícono para el primer elemento de navegación home esperanzas. Entonces tenemos uno más grande por aquí. Se trata de 20 por 21. Esto es 28 por 30. Entonces vamos a usar 21 por 20. Así que disculpa 21 cabellos para que puedas ver u oír acercar porque queremos ser ya perfectos por aquí. Esta es nuestra casa de línea vacía. Normal. Y esto va a ser en casa activa así. Entonces, ¿sientes la diferencia? ¿ Algo se mueve por ahí? No. Entonces esto es perfecto. Entonces vamos a ir a este vector y cambiar el color del trazo. Remolque este verde porque este va a ser nuestro color normal. Y este va a ser nuestro activo, por lo que en realidad se descubrirá el color activo. Esto significa colapso. Añadamos dedo decolor sobre estilos también. Entonces esta es nuestra crema primaria. Este es nuestro verde primario. Si quieres arreglarlos, vas a llegar a ellos. Déjame mostrarte. Pero ahora mismo está bien. Así que haz click afuera por aquí. Ser primario Vamos a subirlo así. Y verde medio y gris verde grande, blanco Facebook, Verde oscuro estará en la parte superior así. Esto se ve mejor. Y ahora voy a seleccionar mi tablero de arte. Este va a ser mi hogar activo, y voy a usar este color. Sí, así que ahora mismo estoy en esta etapa, voy a ocultar el estado normal. Esto va a estar activo en casa y vamos a sacar a ambos de dentro. Ahora lo vamos a alinear en medio de esto por aquí, y vamos a hacer lo mismo para todos los demás iconos. Se puede tener la idea de que dentro de casa tenemos que escaleras casa, casa activa normal. Deben estar fuera del mismo tamaño. Por lo que si escondes o muestras una y la otra, no deben parpadear ni cambiar de tamaño o forma ni su posición. Entonces este es en realidad el medio. Se puede ver el punto hacia el norte aquí. Entonces una vez que tengamos casa por aquí, me voy de pie, acelerarlo y voy a traer otros dos iconos por aquí Rápidamente. - Ahora vamos a alinear estos. Entonces tenemos estos tres elementos de navegación y alinémoslos. Entonces primero, vamos a seleccionarlos a todos. Estoy sosteniendo la tecla Command del controlador, y vamos a usar este ordenado. Entonces esto se ve bien. Entonces solo arregla esta en el medio, y ahora vamos a cambiar las escaleras. Entonces esta configuración escaleras inactivas tan activas, vamos a escondernos así. Entonces tenemos tres escaleras por aquí. Ahora bien, si quieres tener algún enfoque mawr, um, um, volver a listar, también puedes usar esta opacidad por aquí para que podamos tener algo así como un 80% en un 90% así . Y también podemos tener algo por aquí así. El 90% en esto se ve un poco más pequeño. Por lo que esta casa vamos a aumentar su tamaño selecciona uso, turno así. Esto se ve mucho mejor, porque thes yo porque estamos buscando más grandes. Y éste se veía un poco más pequeño. Entonces ahora intentemos alinearlos así. Entonces Uops. Entonces alinémoslos en la parte inferior. Eso son estos se ven bien, uh, 19 en la parte superior. Entonces vamos a tener 18 y 18. Vamos a moverlas un poco más arriba así. Entonces esto se ve genial. Mantengamos 13. De acuerdo, entonces nuestro menú de navegación en la parte inferior está completo. Podemos Se puede ver que tenemos un estado inactivo y tenemos uno estados activos. El estado activo es un verde brillante, muy afilado, azul verdoso e inactivo es un poco verde opaco, que está en nuestro esquema de colores. Se llama color verde medio. Por lo que también puedes agregar el peso del trazo fuera de tus s, que son iconos como este. Si quieres tener un ícono muy delgado, iconos como ese, por ejemplo, quiero tener un píxel. Pero así, o tal vez 1.5, esto se ve mejor. El 1.5 se ve bien. Um, entonces creo que nuestra navegación inferior está completa. Podemos cambiarlo fácilmente y pedirlo. Y una cosa más es que también puedes despejar Ah, un componente para éste. Entonces, mando G y este es nuestro fondo. Yo tengo. Y, um eso es correcto. Haga clic y cree componente. Hay muchas maneras en que puedes crear un componente y lo vamos a replicar y controlar y comando E y controlar Comando X para copiar éste, y lo vamos a mover en este marco. Por lo que también, puedes cambiar el fondo de color del marco para ser como, Uops. Entonces vamos a cambiar el marco, el color, el fondo, fondo, sentir el color para ser algo así como genial. Por lo que podemos ver fácilmente otros componentes encima de él. Entonces este es nuestro se puede decir media Ah, se puede decir navegaciones. Nuestros artículos medios que van a estar presentes en cada pantalla, como tal barra, nuestro logotipo está de vuelta en fila, volviendo a la pantalla, y luego tenemos ésta. Entonces ahora en la siguiente lección, vamos a crear el contenido medio, las imágenes y todo eso, así que pasemos a la siguiente escucha. 43. Pantalla de casía: diseño de aplicaciones móviles 3: en este video, vamos a crear esta receta destacada fuera de nuestra app y empecemos. Nos vamos dedo del pie use un currículum toe nuestro ajuste. Y ahora nos vamos de pie. Crea un rectángulo por aquí y vamos a crear un rectángulo y será del tamaño de esta barra de este tipo por aquí. Por lo que serán 3 39 y la altura será 216. Entonces primero tenemos esto. Usemos el radio de frontera de cuatro y este en realidad va a ser el contenedor fuera de la imagen. Entonces esto en realidad va a estar enmascarando muchas cosas. Entonces este va a ser más nuestro contenedor de mezquita. Entonces tomemos la imagen y la arrastremos hasta aquí. Entonces vamos a ir a nuestras imágenes, y, um, la imagen que vamos a usar es ésta o ésta. Entonces, arrastrémoslo y soltémoslo encima de éste para tenerlo algo como esto, como, les compré a ambos, y usemos mezquita. Y dejemos que esta imagen dentro de este enorme zoom aleje. Entonces este es el límite de la imagen. Vamos a mantener turno una opción clave del dedo del pie. Muévete donde quisiéramos tenerlo así. De acuerdo, así que esto parece anotado. No. Hemos creado esta caja principal por aquí. Ahora vamos a tener algún efecto excesivamente sobre esta imagen porque queremos poner algo de texto por aquí. Entonces lo que vamos a hacer es crear un ángulo indirecto por aquí en la parte superior de esta imagen, del mismo tamaño de la imagen de una cabeza, y vamos a mover este rectángulo. Se puede ver que este es el rectángulo, y lo vamos a mover dentro de este grupo enmascarado y llamarlo excesivamente. Entonces una vez que tengamos sobre la superposición, vamos a usar una insulina Grady lineal, tu ingrediente. Y si vamos a usar vital aquí y negro por aquí, Ok, entonces vamos a tener algo como esto, y vamos a cambiar la dirección un poco así, así, y vamos a ir para usar multiplicar por aquí para que puedas ver esto luciendo muy bien un hecho. Entonces, um, lo de los hombres es que también podemos cambiar donde queremos que esté. Por ejemplo, quiero que este color blanco esté por aquí así, y quiero agregar un poco un poco crea color por aquí así, y esto se ve genial. Entonces esta va a ser nuestra superposición, que nos va a ayudar a tener algún texto sobre esto en esta sección de aquí. Entonces este es nuestro grupo de masas porque todo estará dentro de esto. Entonces vamos a seguir sumando cosas en este grupo de mezquitas. Ahora, vamos a crear una forma simple por aquí, que va a ser nuestra etiqueta de receta destacada etiqueta de receta por aquí, que puedas ver que esta es nuestra forma de factor de forma. Vamos dedo del pie, colorelo naranja. Y el valor de este color naranja es e un desarrollo 93. Entonces este es en realidad mi segundo regular primario. Este es de color naranja, y lo vamos a agregar al relleno. Entonces sumémonos primero a otros estilos naranja enfermo, enojado. Esta es nuestra segunda naranja. Entonces lo vamos a quitar y añadimos al relleno por aquí este color. Entonces tenemos esta barra, y si queremos aumentar la altura, podemos usar 20 años o aquí así, también podemos acortarla y moverla así. Entonces llamémoslo Dag y vamos a acercar y poner nuestro texto arriba. D se va a presentar así. Y va a ser el Agente Romanoff. No es cierto. Gran Yantra. Man Suficiente va a ser 14. Va a ser 10% porque queremos mucho espacio en esta sección o aquí. Y movámoslo así. Hagámoslo 24. Y el siguiente uso blanco, que va a ser este blanco, este blanco azulado por aquí y siguiente usa, um, 12 huevos de aquí. Por lo que quería estar alineado en la misma zona como esta pilas por aquí. Entonces usemos a nuestros gobernantes. Este impuesto, este texto debe ser una línea con la misma mentira casi por aquí. O tal vez por aquí así. Guardemos aquí los medios porque es un botón, así que no necesitamos dedo del pie. Prepárate mucho por ello. Esto es sólo texto. Entonces lo vamos a alinear así. De acuerdo, entonces lo siguiente es ah Di ¿lo hace? Este será un verdadero Big 24 2% blanco. Veamos cuál es la distancia desde abajo 7 12 También para este control destacado, Camargue E. Y lo vamos a acercar más a éste porque es un elemento de texto. No queremos preocuparnos por eso. Está muy cerca del fondo. Entonces tenemos 317 pelo textual, que va a ser, um puedes usar tu dedo gordo 14 317. Esto va a ser de nuevo blanco, y vamos a usar sobre el icono del amor por aquí. Y, uh, vamos a ver. ¿ Dónde está? Es éste. Vamos a usar una versión más pequeña 16 cerdos Ilves porque no queremos que sea muy grande que ella fuera blanca por aquí. Entonces creo que en mi real diseñador usó caballero de por aquí así. Entonces esto está mirando creo que esto se ve bien, pero también puedes usar a través del dedo gordo del pie. Rebic gravado me está buscando mejor. Uh, este es en alemán de regular. También puedes usar medio si quieres. Ah, esto Esto va a mirar atrás escribiendo ahora Aquí hay un dip de diseño Si tienes algún artículo que es más pequeño y uno más grande y están en la misma línea, tienes que alinear el fondo de ellos para que veas que vamos a usar el alineación inferior como esta. Pero ya puedes ver ahora se ven ah, mucho por debajo de esto. Entonces lo que tenemos que hacer aquí es que vamos a agarrar una línea como esta y vamos a alinear con los pies cosas que así. Así. Al igual que esto. Al igual que esto. De acuerdo, tan duro se va a alinear con esto porque no es texto. No podías tener algo así. Entonces, ocultemos las líneas. turno ya está. Se puede ver que esto se ve mucho mejor ahora. Hay una cosa que no hemos agregado por aquí, que es la sombra. Entonces aquí está nuestra etiqueta destacada. Vamos a renombrar el nombre de ellos título. Esto es, uh, duro Icahn. Entonces todos estos los voy a mover dentro de este grupo de mástiles así. Puedes mantenerlos en el dedo del pie directo. Eso no es un problema, sino para esto. Dag, creo que quería estar dentro de este idiota esta zona de mezquita porque quería que me recortaran por aquí. Si se está extendiendo fuera de esta frontera. Ahora vamos dedo del pie añade sombra gota a este grupo. Entonces lo soy. Lo que voy a hacer es añadir la sombra de gota a este grupo de mezquita en lugar de tener al rectángulo. Entonces vamos a agregar una sombra por aquí, y esta vez vamos a usar el 20%. Tengamos una sombra. Seis píxeles. La sangre va a ser 12 así. Y, um, eso es más Muévete un poco más cerca. Sangre será 10. Um, usémoslo el doble valor para esto. ¿ Por qué? Entonces este es un truco muy bueno, tonto. Y siempre intenta duplicar este desenfoque. Y vamos a añadir un poco más de color a tu cabello. Vamos a usar decolor y usar 30% para este. Se usa 50%. 65. Bueno, luce mejor. De acuerdo, entonces, en realidad, estoy tratando de usar el mismo color verde ensueño que tenemos en nuestro fondo y tratar de usar un tono más oscuro fuera de él. Selección del 70% y me voy dedo del pie moverlo más de un como este y que ella estaba 50%. Entonces voy a usar a seis el color verde estrella 40%. Entonces esta va a ser mi configuración final. Y si me alejo, se puede ver que esto se ve genial. Ahora la siguiente parte es muy sencilla. Vamos a usar lo mismo el mismo pelo elemental, que es agrupemos esto primero. Entonces lo vamos a recortar. Vamos, G y lo vamos a llamar gran descanso. Ver, ser. Y vamos del pie de mando y control T para crear otro. Y ahora vamos dedo del pie tenemos una pantalla más pequeña, una versión más pequeña, más pequeña de ésta. Y vamos a quitar este destacado por aquí Así se moverá el ciervo y yo pondría todo va a parecer. Y si nosotros, um eso es probar dedo del pie hacer que sea un poco más pequeño así. Ahora puedes ver que hay un problema de que estamos teniendo esto machacado. Icahn está por aquí. Entonces para arreglar esto, vamos a hacer doble click en este y vamos a ir de pie tenemos a Jane, estas restricciones. Entonces esto va a ser justo de fondo. Y para este grupo, se puede ver que es un habilidades iban dedo del pie tenerlo tamaño fijo, así que no intentemos escalarlo. puede ver que está tratando de quedarse en la misma zona. No se está estrujando ni cambiando su forma. No, usemos esto así. No, tenemos nuestra sección más pequeña. Estamos aquí. Acerquemos y arreglemos algunos de los problemas o aquí. Entonces esto es realmente título va a estar en el fondo como cardo aquí. Esto va a ser dentro de la imagen y tendrá automatizado. Usemos esto automatizar y saber. puede ver que está arreglado para éste. Se puede ver que vamos del dedo del pie en grupo comando shift control shift G y esto en realidad está sucediendo debido a este contacto de clip. Por lo que tenemos un marco y el contenido del script teniendo exactamente este tema. Entonces vamos a moverlo por aquí. Más agua de ellos así. Esto se ve mejor. Veamos cuánto el espaciado que tenemos por aquí entonces y entre ellos. Cinco. Entonces ahora lo es. ¿ Oyes esto? Entonces tenemos seis ahora, así que vamos a mover uno Cerdos por aquí. Este corazón van a ser seis cerdos. Se trata de 10 púas es que tienen tabla pequeña de ellos. Wonder 34 en tres. De acuerdo, así que esta ubicación está buscando crear. Entonces ahora tenemos esto. Um Vale, entonces ¿dónde está este título? Por lo que el título también se va a arreglar esta hierba fuera de ella. Este título será de ternera fría y el tamaño cuatro será de 16. Y será John. Trauma vivo y color será este verde medio. Ahora vamos a crear un textil, que ya tenemos. Pero esta vez va a ser Uh huh. No. 16 cerdos, párrafo enfermo así o texto normal. Entonces esto es en realidad de un texto normal. Entonces este va a ser nuestro título. O si también podemos usar algo como, um uh, pequeño título como este. Ah, Bankoff Normal será bueno. Entonces una vez que tengamos esto, podemos replicarlo, así que solo necesitamos replicarlo. Y ahora vamos a renombrarlo pequeño para un C B Simplemente replicado. Tenemos una distancia fuera del comando replicado D, y se apreciará así. 14 debe estar dentro de esto. Por lo que tenemos esta sección mayor por aquí. Entonces lo que podemos hacer aquí es, uh también podemos hacer una cosa más. Entonces si quieres crear un componente, nuestro control todo caso antes de hacer un componente, tienes que asegurarte de que todo sea perfecto. Y lo has hecho bien porque ah, te será difícil ver y cambiar todo por aquí. Entonces controla todo K, esta es nuestra pequeña receta. Yo lo voy a replicar. Vamos, La receta pequeña. Yo lo voy a mover por aquí. A mis caderas. A mi estilo. Guía, estamos aquí así. No, voy a volver a mi diseño principal. Y aquí está mi diseño principal. Alejemos el zoom y veamos qué tenemos por aquí. Entonces esta distancia es un poco demasiado para mí. Entonces voy a ir a guía de estilo e hice algunos cambios o aquí y los voy a soltar a ambos y moverlos un poco Por aquí. Esto se ve mejor. Ahora vamos a retroceder y se ve mejor por aquí. Una cosa más. Si quieres cambiar la imagen por aquí, lo haremos más adelante. Entonces vamos a replicar esta opción de arte. Estoy sosteniendo la llave de Opción Arden. 14 cerdos enfermos. Voy dedo del pie 12 píxeles entre ellos. La distancia, vamos, de dedo del pie. Que se lo copien por aquí. Ahora, tenemos tres recetas pequeñas, y también podemos agregar atacados por aquí. Entonces vamos bajo título menos de 30 minutos. Entonces este es nuestro título, y este es un Rubik 14. Y queríamos ser un gran 16 por aquí. En realidad, queríamos ser grandes porque es un título. Entonces este es en realidad este estilo no Big 16 pero en la sección de texto sobre texto de acción. Entonces este es en realidad el estilo, y tendremos más espacio desde aquí. Entonces vamos a usar tarty dos por aquí y los pisó a todos. Y usaremos casi, uh 12 de aquí. Esto se ve mejor. Y ahora lo que tienes que hacer es que vamos a seleccionar a todos ellos mando y control, G. Y este es nuestro un pequeño, uh, pequeño. Por lo que tengo vacíos. Camina en sección pequeña. Esta es nuestra sección, en realidad. Entonces ahora estamos si miras por aquí. Entonces si seleccionamos todos estos tres, también podemos tener esta opción o sí, podemos James la distancia entre ellos así. También podemos cambiarlo, toe ed, que se ve un poco menos para mi mejor. Por lo que ahora vamos de dedo replicar este comando o control D y moverlo bajo este. Por lo que tendremos otra vez 30 Bigs demasiado de aquí. Y Jeanne thes encabezamientos como este. Y vamos a alejarnos. Es como éste. Vamos a cambiar el tamaño de éste o aquí, y se puede ver talla de este fondo. Nunca lo mismo. Pero tenemos que cambiar el tamaño de este fondo porque waas se quedó atrás. De acuerdo, así que hemos completado esto. Seleccionemos esto. Um, eso es Collab colapsó. Estos y vamos a seleccionar esta navegación inferior. Y vamos a seleccionar esta posición fija cuando la escolaridad porque va a estar en la cima y se va a arreglar. Yo nunca lo tengo Queremos mover esto. Entonces intentemos ver esto en un prototipo y veremos qué está pasando Ahora. Se puede ver que tenemos esta navegación en la parte inferior. Entonces si tratamos de ir a la escuela, estamos jodiendo dentro de esto se puede ver que nos estamos desplazando por dentro Esto Así que esto va a Stace por aquí. Si quieres tener algo en la parte superior, puedes holgar eso también. Pero ahora mismo, creo que esto es mejor tener esta navegación universal en la parte inferior. Ya puedes ver lo único que queda es que tienes que cambiar esas imágenes, que es un pedazo de pastel para ti. Ahora, lo que vamos a hacer es cambiar todas las imágenes de estas recetas, y también vamos a cambiar rápidamente los títulos de fondo por aquí. Entonces les voy a mostrar cómo cambiar la imagen. Vamos a hacer doble clic e ir a este grupo de mezquita y hacer clic en esta imagen o aquí. Y he encontrado un truco muy bonito que si arrastras y sueltas tu imagen sobre esta imagen, siente que va a ser buñido muy fácilmente. Por lo que se va dedo del pie llenarlo en un buen espacio. Entonces déjame mostrarte cuando demuestres lo que realmente quiero que diga el dedo ahora mismo. Entonces, arrastremos esta imagen y la soltemos por aquí. Entonces si trato de dejarlo por aquí, puedes ver que esto va a pasar. Imágenes, tamaño y todo se va del dedo del pie Ve por aquí y son lo mejor. Nuestra mejor cosa que puedes hacer aquí es solo por título arrastrar y soltar sobre esta forma de imagen. Ahora puedes ver que esto se ve mejor. Esto no es lo que me pasó la última vez. De igual manera, para éste, vamos a holgar esta imagen. Uh, este grupo de masas. Y si quieres dirigir esto como la imagen puedes mantener pulsada la tecla de control o comando e ir a este fin esto, selecciona esta imagen y vamos a volver atrás y seleccionar otra imagen. Vamos a relajarnos en este. Entonces voy a dejarlo caer en este campo de imagen y se puede ver que esto es mejor. Esto es más fácil para mí Si aún quieres ajustarlo. Se puede holgar esta imagen. Ve esta imagen, rellena goto crop y puedes colocar la imagen, por ejemplo. Yo quiero colocar este apartado. Yo quiero hacerlo más grande en turno, Um, así y presionar cruz así. Entonces esta es otra forma si quieres personalizarla. Pero ahora mismo estoy quiero colocar rápidamente estas imágenes. Yo quiero cambiar estos números. Yo quiero cambiar estos impuestos por aquí. De igual manera, para este, vamos a hacer el mismo truco, y vamos a ir a esta imagen o aquí. Este es el archivo de imagen. Esta es la imagen libre, abajo aquí. Vamos a arrastrar y soltar lo que tengamos en esta imagen llena, y lo coloca de mucha buena manera para mí. Creo que esta es una gran colocación. Entonces si quiero dejarlo caer y cambiarlo, voy a cambiarlo así. Esto se ve mejor para esto. Menos de 30 minutos serán de color verde oscuro, no usando negro por aquí. Esto es en realidad son negros. Entonces eso es todo por esta pantalla. Hemos completado con éxito esta pantalla, y veamos nuestro prototipo en pantalla y veamos cómo se ve. Tenemos prueba del dedo del pie, pocas cosas, por ejemplo, el top notch por aquí. De acuerdo, Ahora puedes ver esto son nuestros saltos locales, y está justo detrás de esta parte de primera clase por aquí. Por lo que quería estar aquí en esta sección porque tenemos dedo del pie cuidar esto en nuestro diseño primero solía colocar. Yo lo coloqué por aquí, así que fue, ya sabes, conseguir por esta sección. Entonces lo moví por aquí. Entonces así es como vamos a usar y diseñar la pantalla. Las otras próximas tres pantallas, son solo que se puede ver apenas muy parecidas a ésta. Tenemos todo mejor arriba. Sólo necesitamos dedo del pie. Asegúrate de que esta parada de navegación se vaya a mover. Y también la de abajo si tenemos dedo del pie. Por lo que esta va a ser la próxima sesión. Creo que esto estas lecciones son muy largas. Pero tienes que quedarte conmigo. Tienes que construirlo, y tienes que aprender y ver cómo realmente lo hago. Entonces pasemos a la siguiente lección. 44. Pantalla de inicio de tu casía SALADS - Recipe iesos App Design Design: en esta lección. Vamos a crear las próximas pantallas de combustible y puedes ver que estamos aquí. Aquí tenemos. Sellards merece sano, por lo que estos son casi lo mismo. La única excepción es que estos la barra de menú por aquí en realidad se está moviendo de dedo activo en activo. Y este fondo en realidad se está moviendo por aquí. Entonces vamos del dedo del pie, usamos esto y simplemente cambiamos por fuera del impuesto. Esto es lo mismo. Entonces voy a saltarme de verdad muy rápido. O tal vez voy a saltarme esta sección. Yo sólo voy a centrarme en la parte superior por aquí porque todo es igual. Simplemente estamos cambiando imágenes, valores fuera de éste, Eso es todo. Si tenemos, Si tienes alguna pregunta siempre me puedes hacer y eso resolverá tu problema si tienes . Si encuentras algún problema, todo es igual. Sólo estaban cambiando texto e imágenes. Esta receta de parada y navegación. Voy a explicar en esta lección. Entonces, empecemos. Y lo que vamos a hacer es que vamos a replicar esta pantalla, y lo primero que vamos a hacer es trasladarnos a esta zona por aquí, Skip. De acuerdo, entonces esto está activo, inactivo. Y primero, lo que vamos a hacer es quitar lo inactivo e ir al estado inactivo, porque ahora en las comidas se ha ido. Queremos un mal terreno. Toby se mudó a ensaladas por aquí. Y también vamos a cambiar su rico, porque ahora se ve un poco más pequeño porque las ensaladas son una palabra grande. Entonces esto va a ser por aquí así. De acuerdo, Entonces vendedores para vendedores, tenemos estado activo. Se va a esconder un inactivo. Entonces así es como se va a mover. Um, entonces ahora vamos a hacer lo mismo. Simplemente vamos a cambiar todas estas imágenes y todo. El almacén de impuestos aquí rápidamente. Y eso es todo. Normalmente trato de ocultar mi navegación inferior una vez que puedas bloquearlo o puedes ocultarlo dedo del pie fácilmente, manipular estos artículos. Entonces me voy con el dedo del pie. En su mayoría lo esconden así. Si algo así sucede, es porque hemos citado la cosecha del dedo del pie para que puedas ir a llenar, y entonces puedes volver a ir a cosechar para colocarlo donde querías estar. Entonces esto está sucediendo. En realidad, he especificado Grob Ah, en mi, um, um, estafa anterior McCandless o se aburren por aquí. Entonces esto está pasando conmigo, así que no tengas que preocuparte por ello. se puede arreglar. Entonces si voy a esto, puedo usar a Phil y luego puedo seleccionar cualquier imagen desde aquí. A lo mejor este y me voy a bajar el dedo del pie por aquí así, y luego puedo ir a recortar el dedo del pie y moverlo así. Por lo que ahora se puede ver esta pantalla también se completa el segundo al lado de son también los mismos. Entonces no voy a repetirnos. El mismo diseño pasos de nuevo, nuevo. Entonces los voy a crear por mi cuenta, y voy a saltarme esas lecciones porque eso es lo mismo que vamos a hacer en las dos próximas pantallas. Entonces, una vez que haya completado, todas estas pantallas se iban a reunir a continuación, y vamos a dedo en realidad usar nuestras herramientas de prototipado para prototipos de estos cuatro y cinco skins. Entonces pasemos a la siguiente lección. 45. Pantalla de recetas saludables: diseño de la aplicación de la aplicación móvil: Entonces ahora estoy creando, en realidad, la última fuera de estas cuatro pantallas, que es saludable ahora aquí es una parte complicado. Es por eso que en realidad me he detenido aquí y empecé a grabar. Ahora puedes ver por aquí tenemos este trasfondo. Entonces si tratamos de moverlo por aquí ahora, en realidad sano se va a mover dentro de la pantalla en lugar de por aquí. Entonces, uh, cuando tenemos que hacer algo como esto, realidad tenemos que mover toda esta navegación. Entonces usemos esta escuela, muévalos afuera. Por lo que tenemos toda esta navegación con el fondo. Vamos, G, este es otro top que tienen. De acuerdo, Entonces lo que tenemos que hacer es tener dedo del pie mover esto en realidad a la izquierda. Entonces esto en realidad se va a mover así, Entonces significa que va a salir. Y ahora vamos a cambiar de pie las estadísticas. Entonces esto va a estar inactivo. Este fondo se va a mover el dedo del pie sano. Y, uh, ahora será un pozo fuera de sano, y los ricos lo estarán. Creo que esto es bueno y, uh bueno, es saludable. De acuerdo, Así que el estado activo inactivo va a estar oculto y, um, siguiente muévelo en el medio. Esperanzas. Por lo que en realidad queremos mover este fondo a la mitad de esto. De acuerdo, así que esto se ve bien. Nosotros lo hemos movido todo por aquí, y esto va a ser así. El resto es lo mismo. Voy a reemplazar todas las imágenes y los encontraré en la siguiente lección donde estaremos realmente animando estos y en realidad probando toe prototipo esta sección Estamos aquí. 46. Navegación de deslizamiento de deslizamiento de prototipos en Figma: Ahora puedes ver que hemos creado nuestra fuerza, estas pantallas principales y esta pantalla de intro o inicio de sesión. Y estamos en una posición de que podemos sumar algunos prototipos por aquí. Ahora puedes ver todas estas cuatro pantallas. Son 940 exiliados altos. He dejado algo de espacio en la parte inferior. Entonces si lo miras por aquí Así que en realidad, he dejado el espacio porque esta navegación y este fondo todo el contenido se va a mover. Entonces una vez que subamos esta página, esto va a ocupar su lugar por aquí. Entonces va a estar por aquí así, así que no, puedes ver que esto es esto. Es por ello que he dejado algo de espacio en la parte inferior. De acuerdo, entonces ahora vamos a enlazar con los pies estas pantallas, y vamos a pasar a este prototipo por aquí. Y lo primero es que esta va a ser nuestra pantalla principal. Entonces vamos a agarrarlo del dedo desde aquí, y vamos a vincularlo a éste para que puedas ver este botón de reproducción. Esto demuestra que esta va a ser la primera pantalla ahora También podemos agregar algo por aquí. Por ejemplo, agrupar todos estos comandos G y llamémoslo Grupo Logan. Y también podemos vincular esto a éste y al tap nunca vamos a conseguir dedo este medio medio y no va a ser instantáneo. Vamos a usar smart, animate, animate, y vamos a usar la facilidad de entrada y la facilidad de salida durante 400 milisegundos. Entonces este va a ser el hecho que vamos a utilizar de manera similar para este. De acuerdo, entonces una cosa que tienen que mencionar es que cada vez que intentes usar cualquier icono, habrá un área objetivo golpeado. Para eso yo gon hit area significa que tenemos que diseñar algo en el fondo, que va a estar en el área capaz que sea accesible al dedo. Entonces si tienes un área capaz muy pequeña o objetivo golpeado, tu dedo no va a ir del dedo del pie toca este ícono fácilmente. Entonces usa un verdadero seguir tocando esto, y no va a funcionar. Entonces lo que vamos a hacer es, um, vamos dentro de este grupo. Vamos a crear un rectángulo por aquí así. De verdad odio esta, um, funcionalidad que quiero un Simon en grupo. Debería crear este rectángulo dentro de ese grupo en lugar de leerlo en la parte superior. Entonces lo voy a arrastrar a esta flecha a la izquierda y para el ángulo de secta, va a ser, uh, idea húmeda para este error dejado uno. Sólo tienes que ir al diseño y solo Jack este Inyectar este contenido de clip ahora, el área de paso en realidad va dedo del pie ser transparente. 0% de transparencia, porque sólo lo vamos a utilizar para la creación de prototipos. Entonces una vez que tengamos los medios de puñalada y queremos, ya sabes, basarlo en todos los demás grupos también. Entonces yo voy a hacer lo mismo por este. Entonces voy a tener una sección de tabulador por aquí. Toca todavía para este, Do y me voy Teoh, usa algunos DeBlieUx como este. Uh, usemos algo como esto y movámoslo adentro. Este embudo Esto también está en la aplicación de la corte. Sí, y cambiemos este contenido de clip. Me voy de esto si lo tienes. Por lo que tienes que comprobar si hay un marco alrededor de tu ícono y tienes este contenido de clip esto va a ser un dolor en la cabeza. Entonces, um, área de Tab va a ser transparente, así que voy a cambiar la transparencia a 0%. Entonces tenemos iconos de embudo y flecha por aquí, y vamos a soltar a thes Kamar y ver a ambos fuera de ellos. Y nos vamos de pie, um, Biest ellos o aquí así. Entonces vamos, como, a bordo de ellos, diluirlos. Y voy a ir a esperanzas aversión este tiempo basado estamos aquí, van a estar basados en el lugar tan menos al lado para liderar estos en los segundos como este comando, nosotros tu control v, para pegarlos de manera similar para éste. Lo estamos haciendo porque no hemos hecho estos componentes. Si hubiéramos hecho estos componentes, sólo teníamos que sumar en la sección de componentes. Pero creo que este tipo de otros realmente van a funcionar de todos modos. Entonces aquí los tenemos. Ahora vamos a enlazar estas secciones de nuevo, así que vamos a ir al prototipo y abrir esto y seleccionar la puñalada India y vamos a vincularla de nuevo. Uh, esto va a navegar a, y no vamos a usar animate inteligente, pero vamos a usar, um, salir o va a estar en destrucción. Entonces esta pantalla se va a mover así, y esto va a volver de manera similar para ésta otra vez, Vamos a hacer lo mismo. Ajustes que ya la misma. Por lo que tenemos bolsa enlazada y hemos vinculado este log in remolque. Este D's para esta pantalla principal. De acuerdo, entonces vamos a probar este. ¿ De acuerdo? Entonces tenemos la pantalla para apuñalarla, y se puede ver el efecto Yum xyz subiendo. Esto en realidad es inteligente. En cualquier minuto se puede ver mudarse y emitir así. Ahora, lo siguiente que vamos a hacer es que vamos a sumar áreas capaces para todas estas. Entonces lo que tengo que hacer es añadir ah área de tabulador de área adaptable en todas estas. Entonces creo que debimos haber creado esto desde el principio. Pero, um, así es como quería mostrarles que si no se crea el blanco apuñalado, que mucho fuera en realidad, que mucho fuera en realidad, y los diseñadores extrañan cada vez que los imparten sus clases. Por lo que este va a ser tap target. Y, um, esto va a ser 0% lo que esto significa. Entonces tenemos el mismo tiempo que duplicó van a ser cuatro Sellards así en la misma. Sí. Entonces tenemos Vamos D vamos. Nosotros vamos a ir a desiertos esta sección Estamos aquí. Entonces otra vez Vamos d y hacemos lo mismo por este de aquí. Entonces estos son los trofeadores de tap para todos estos. Por lo que esto se va a utilizar en nuestro prototipo. Estos son el blanco golpeado para los dedos. Entonces si tus dedos si tienes este paso objetivo dedos muy pequeños se van a perder este Stargate, y va a tener algunos problemas. Entonces así es como trato de mostrarte cómo vas a hacer la experiencia del usuario o mejorar la usabilidad fuera de la app? No. Voy a añadir todos estos tap targets en todos estos o aquí. Ahora, he creado todos los objetivos de tap. ¿ Por qué? No hice componente porque tengo que mover todo esto por aquí y lo que son Así que solo quería mostrarte cómo crear estos tap targets y por qué son necesarios para prototipos. Entonces ahora vamos a pasar a esta sección de prototipos o aquí. Y para esto significa que esto va a ser comidas para los vendedores. Se puede ver ahora el objetivo del personal. Nosotros lo vamos a mover a ensaladas por aquí. Y va a ser, uh, inteligente cualquier mero. Y va a ser fácil entrar y salir. Por lo que estos son los mismos ajustes que iban a usar para cada uno de estos. Entonces éste se va a mover, por lo que esto merece esto. Saludable se va dedo del pie mover al último a mano. Siguiente. zoom para que puedas ver fácilmente que de igual manera, tenemos este Vendedores Lo sentimos significa y se va a volver a mí años. Aros de postre El postre va a ir al desierto. Saludable se va a kowtow Saludable de igual manera todo de paz. Ahora puedes ver que los he ligado. Ahora vamos a probar esto y ver cómo funciona y se ve este menú de navegación en realidad y se siente así que empecemos y veamos qué podemos preferir. Yo tengo con Sigma. Démosle algo de tiempo a Lord, se está llevando mucho tiempo bajarlo lo mismo. Entonces vamos a seguir adelante y ver nuestro prototipo overhead. Por lo que algunas de las imágenes no se están cargando, pero se puede ver el efecto overhead en este momento para GMA realmente está operando su servicio. Por eso estamos teniendo esta lentitud lenta en esta, um, esta animación y este prototipo, espero que no te importe, pero en realidad así es como vamos a crear esto, uh, sección o aquí. De igual manera, podemos hacer clic en esto y volver ir o pelar sano su escuela desde saludables dos comidas Desser , Sellards y medios. Entonces, ¿así es como realmente prototipos y enlazas tus pantallas? Asegúrate de que las posiciones de este texto y todo sea igual porque puedes ver por aquí. Si trato de hacer click aquí, se siente como si se estuviera moviendo. Algunos errores están ahí en prototipos de masas de fig o no necesitan ser demasiado porque que mostrar a tus desarrolladores que así se verá y hay controles estándar y programación que van a facilitar este movimiento. Entonces espero que hayan disfrutado de esto hasta esto. Espero que hayas aprendido mucho sobre fig, mamá, vamos a crear próximas pantallas en las próximas lecciones. Entonces pasemos a la siguiente lección. 47. Diseño de la aplicación de recetas de los que busca: Ahora, en estos pocos videos, vamos a crear estas pantallas de búsqueda fitter 123 y cuatro. Entonces, realidad, en este verde seleccionamos para deshacer estas selecciones, así que me voy a quedar con sólo una esta. Te voy a mostrar la técnica, y puedes aplicarla a tantos. Si lo hace, quiere el dedo del pie suelto por aquí. Entonces tenemos Ah, esta pantalla con las reservas de este tipo se muestran de lo que tenemos. Tres pantallas eran filtros y opciones de búsqueda avanzada son así siempre que alguien haga clic en la búsqueda, aparecerán estas pantallas. Entonces empecemos y empecemos a diseñar estas pantallas de filtro de búsqueda. Ahora, vamos a volver a nuestro archivo real, y lo primero que siempre vamos a hacer es que vamos a replicar esto. Entonces vamos a replicar esto sano y vamos a renombrarlo dedo del pie. Siento que son todo lo que puedes llamarlo así. Entonces este va a ser nuestro primer artículo de este tipo. Y, um bien, así podemos recoger algunas cosas por aquí. Por ejemplo, no necesitamos esto por aquí, Así que vamos a eliminar esto que este dedo del pie, y de éstos vamos No necesitamos estas pequeñas recetas. Podríamos necesitar este impuesto de rubro por aquí, así que lo voy a mantener aquí así encendido. Creo que no necesitamos usar thes. A lo mejor podríamos necesitar algo como esto, pero ahora mismo, creo que es materia que borramos. De acuerdo, entonces aquí tenemos un rumbo, y vamos a encender nuestra cuadrícula Lior, y la voy a alinear a la izquierda. Eso es mantener la distancia del dedo del pie. Um, 48 está bien. Siguiente. Habilitar a nuestros gobernantes. Este es el trabajo, en realidad. Entonces Ok, entonces creo que 40. Se ve genial. Escondémoslo todo. en turno controlado cuatro o control G, si estás en un Mac, y aquí tenemos nuestro Paul, eres así que creo que debería estar alineado por aquí para que la gente no se salga mucho parpadeo o algo así. Entonces me voy dedo del pie ir por aquí así. De acuerdo, entonces primero vamos a cambiarle el nombre a tierra muerta. Por lo que tenemos un plan de dieta. Las opciones estaban aquí. No, vamos a crear diferentes opciones de plan de die para eso. Vamos a utilizar una técnica que te va a ayudar Acelerar tu trabajo y vamos a empezar con texto ahí. Por aquí. El ganado murió. Usemos esto y me voy dedo del pie color se va a ir asesinos locales. Y voy a usar este blanco incluso f f O puedes usar un poco más de peleador aquí así . No, la técnica más simple es que te vas del dedo del pie. Agrega un cambio de marco, más un Ahora puedes ver aquí tenemos un marco, por lo que vamos a llamarlo opción. Y una vez que alguna vez hicimos el marco, podemos agregar el color de relleno por aquí, y eso va a ser que sean nueve e cinco. Entonces este va a ser un gran color, así que no creemos que esté activo. Por lo que es un estado normal. Entonces le vamos a sumar algo de redondez. Actuemos del 1 al 6 y de la izquierda y la derecha mordiendo. Voy a ir con 16. Algo así. Y arriba y abajo. Voy a ir más de 12. Usemos 13 algo así. Entonces esto se ve genial. Tenemos una caja muy bonita que se va a ampliar con nuestro texto. Entonces si recuerdas hemos usado de manera ordenada fuera antes. Esta es en realidad la bebida ordenada fuera. Ahora voy dedo del pie replicar esto. No vamos a meterlo en otro contenedor, así que vamos a replicar por están presionando la tecla de opción art. Y vamos a tener otra, que es comprar nueva acusación. Vamos a crear otro todo opción de dibujo arrastre para crear uno nuevo. Estoy manteniendo la distancia de 12 por aquí entre estos dos elementos. Entonces tenemos cuatro opciones por aquí. Agrupémoslos juntos. Vamos, G. Así que este es nuestro grupo muerto por aquí, así que lo voy a mover dentro de esta pequeña sección porque ya hemos tenido este grupo. De acuerdo, entonces desde aquí, tenemos mucho espacio, así que no queremos que sea demasiado. De acuerdo, entonces un truco más, te voy a mostrar, Así que déjame mostrarte control turno cuatro. De acuerdo, entonces si haces zoom, puedes ver que estos no están alineados correctamente. Y una cosa más es, si tienes esquinas redondeadas como esta formas ovaladas, tienes que mantenerlas un poco más de una desde la frontera, ¿verdad? Si quieres mantenerlos en la frontera así, Como este 15. Apenas van a ser 12. Esto va a ser juzgado. De acuerdo, Así que voy a hacer de este un escogido como este. O tal vez la voy a mover un poco por dentro porque tenemos esquinas redondeadas por aquí . Se va a ver un poco diferente. Ah, ¿se puede ver un poco. En realidad es un problema visual que cada vez que ves algo como esto, no lo es. No se verá alineado. Entonces este es un truco sencillo que si tienes muchos elementos redondeados como este, tienes que mover un poco tu texto en el dedo del pie derecho, alinearlo visualmente en la línea. Tan controlado nave cuatro. Esto se ve un poco mejor. Incluso tú puedes moverlo. Dos píxeles más en esto lucen muy bien. Murió plan. De acuerdo, entonces tenemos este grupo, solo vamos a replicar este grupo y crear bajo grupo aquí en la parte inferior. De acuerdo, así que ahora mismo son 54. Voy dedo del pie, muévelo más abajo 56 y descanse. Ya lo sabes. Sólo estoy repitiendo lo mismo. Lo que he hecho aquí. De acuerdo, así que esto se ve bien. Ahora tenemos que reducir la altura de este tablero de arte. Wasit es un poco mucho. No necesitamos tanto. Entonces aquí estamos. Por lo que esta es la línea de meta para esta pantalla. Un truco más está por aquí porque si quieres cambiar la altura son la distancia entre estos artículos puedes holgar esto. Agarra esto y puedes aumentar o disminuir la distancia entre ellos. Entonces este es el 13. Y si no puedo hacerlo desde aquí, puedo usar algo desde aquí. 12. Yo quería tener 12 años y de igual manera por aquí. Yo quería tener 12 años. Entonces así es como lo haces rápidamente. Estas son las pocas características que son que realmente brillan en Fig Meyer. Por lo que espero que hayan disfrutado de esta lección el próximo. Nos vamos de pie, hacemos el estado de selección, y te voy a decir cómo lo vamos a hacer en un prototipo más en los próximos. Pasemos y pasemos a la siguiente lección 48. Animación de la selección de filtros de búsqueda de búsqueda: Ahora vamos dedo del pie replicar esta pantalla y vamos de pie ese próximo estado, que va a ser etapa de selección. Entonces voy dedo del pie usar el dedo del zoom 90% a mi gusto. Este se ve bien. Ahora voy con el dedo del pie click y mantenga presionada mi tecla de arte y opción para arrastrarlo y replicar esta pantalla por aquí. Entonces esto se va a terminar tal para y aquí vamos a tener algunos estados de selección por aquí. Entonces una vez que alguien toque todo aquí, habrá un elemento de búsqueda por aquí. Entonces esto va lo que vamos a hacer en esta pantalla? Algo que hemos olvidado lo que aquí es que necesitamos cambiar esta receta así y vamos a usar una puerta aquí, buscar duh o seleccionar opciones selectas. Llamemos a esto ahora uno, alguien haga clic en él. Entonces vamos a ir a este valor, morimos una opción, y vamos a ir de pie replicado esto por el comando E. Así que tenemos otro, y lo vamos a llamar opción. Llamémoslo valor de opción. Y llamémoslo opción, uh, normal. Y llamemos a esta opción una bien para el estado activo. Vamos a usar el color que teníamos, que es verde muy afilado, que es nuestro color primario. Este cero e 5956 Así que este es un esquema de color. Ya lo hemos decidido. Estos son nuestros colores primarios en la pantalla. Uno y yo realmente amo y disfruto este color. Esto es muy bonito, chica. De acuerdo, entonces tenemos este estado selector, pero también queremos un icono o ayuda. Y una cosa más es lo mismo se va a agregar sobrecarga. Entonces lo que haremos es que vamos a traer el ícono por aquí, arrastrado llegué aquí y creé uno para nosotros mismos. Entonces lo primero es, vamos a necesitar una elipse por aquí, que es el turno de espera. Y yo quería a Toby 16 por 16. Hagamos 16 por 16 y será del mismo color. Este, la pantalla, y va a tener un golpe de un cerdo enfermo, y será blanco. De acuerdo, entonces les voy a decir por qué me futuro Dwight, porque se va a separar de este fondo sobre él. También podemos tener un poco más grande, como 18 por 18. Esto es esto se ve bien. De acuerdo, así que tenemos éste, y esto se ve crear. Ahora sólo tenemos que traer el yo ido por aquí, así que vamos a traer daikon. De acuerdo, ahora, aquí están los iconos que ya hemos seleccionado. Son dos los iconos que tienen la marcada así. Se puede ver éste y éste. Entonces me voy a ir con este. Voy a arrastrarlo a mi sigma y nos vamos de dedo rápidamente Cambiar pocas fuera de las cosas o aquí. Por ejemplo. Sólo necesitamos este cheque. Mark, no necesitamos estas líneas están aquí, así que sólo necesito esta. Entonces voy a arrastrar fuera de este grupo, y lo voy a mover dentro de esto, así, Vamos a usar un color blanco. Disculpa este 'll one, y te pones un poco más blanco. Añadamos este dedo del pie de color blanco más blanco, excluido, más claro. Amplía usando teclas command plus, y vamos a holgar esto y vamos a hacerlo un poco más pequeño porque es muy, muy grande. Toma el relevo aquí. Entonces creo que necesitamos sólo, um, como éste. Esto es bueno. Está bien, esto se ve genial. Disculpe la frontera del mismo color que éste. Este más escritor, ¿de acuerdo? Frontera Y esta casilla de verificación tiene debe tener el mismo color. De acuerdo, entonces creo que tenemos a nuestra seleccionada dirigida. Ahora vamos a agruparla porque tenemos cosas por separado para trabajar aquí y allá. Entonces estas son nuestras dos elipses. Esto esta Ok, Entonces esta es una pequeña sección. Esto son alergias. Entonces esto es die Pan di. Opción de grupo planificada virgen. De acuerdo, entonces aquí tenemos la opción activa y la opción normal. Por lo que vamos a mover nuestros dos iconos justo por encima de este activo. No lo vamos a mover dentro porque va a aplicar las mismas cosas por aquí. Los ajustes por aquí. Entonces vamos con el dedo del pie, seleccionamos todos estos comandos G, y esta va a ser nuestra opción. Estudiante activo. Por lo que esta es nuestra opción activa. Esta es otra opción. Normal. Entonces cada vez que alguien hace clic por aquí, o tal vez por aquí, esto va del dedo del pie Ven adelante. De acuerdo, Ahora vamos a agregar algo. Estamos aquí, y lo primero que vamos a hacer es que vamos a ocultar esto y vamos a hacer otro y es tan lamentable rectángulo por aquí. Y vamos a usar algo mismo de configuración como esta. O tal vez podamos usar sólo el texto o aquí y llamarlo dieta de valor. Y, um, vamos a añadir turno A que se va de punta capa de Adaauto a ella. Vamos a usar 12 y, um 11. Y usemos, uh, 36 por aquí en algún particular, que va a ser nuestro color azul, que ya hemos agregado. Uno. F. Cuatro d 96 Ahora cambiemos el color del dedo del pie del texto algo blanco, que va a ser un más vital aquí. Colóquelo aquí y veamos porque encaja. No, es un poco más grande, así que vamos a tener un poco menos. Entonces 10 se ve bien. Acerquemos y veamos si tenemos espacios iguales una parte superior e inferior algo como esto. Alejemos el zoom y veamos un poco más pequeño. Este, éste va a funcionar. Sí, vale, así que en línea es el ajuste, así que tenemos un valor de punto muerto por aquí, que ya está agregado, y vamos a ver si el mismo tipo se va. De acuerdo, entonces esto es lo mismo para no puedo pensar 11 sino un texto de acción. Entonces este es el texto de conexión 11. De acuerdo, así que esto es bueno. Hazlo en el medio. De acuerdo, Entonces una vez que este es seleccionado, éste va así. Y, uh, vamos a crear un icono por aquí. Icono de cruz, Es uso de este turno. Usemos una línea recta y vamos a usar menos 45 algo como esto, y vamos dedo del pie han tapado. Toby redondeado. Ah, un poco más grande. ¿ Quién va a ser de la talla? Y vamos del dedo del pie mando el replicar esto y vamos del dedo del pie. Muévelo a 45 grados así. Vamos a hacer sólo estos. De acuerdo, entonces creo que esto se ve este luce anotado. Ya tenemos a través. Yo llamo, nos vamos de pie. Agruparlos juntos y llamarlo cruz o x. Tengo siguiente. Mover por aquí se ve un poco más pequeño, así que vamos a cambiar un poco su piel. 13. Esto se ve mejor antes de eso. Lejos de esto que tenía 14 años o aquí. Zapatos, ya sabes, adelante. 16. De acuerdo, entonces 16 es en realidad el tamaño para este. Entonces estoy usando la altura. La altura va a ser de 15. Y digamos que tú 16 luce un poco más grande. 15.5. Entonces voy a usar algún tamaño como este, y debe ser, Vamos a moverlo adentro. Esta tal por? Creo que no podemos moverlo porque en realidad está por instancia. Por lo que o bien necesitamos romper esta instancia. Tenemos que romperlo. Entonces vamos a mantenerlo así y cambiar el color grande igual, este mismo color. De acuerdo, entonces no tenemos esto o tal vez podamos tener esto. Creo que esto se ve bien. Ambas acciones son bastante separadas. Por lo que tenemos un estado de selección listo hasta ahora. El truco es, siempre que quieras dedo en cualquier minuto algo en fig, ma o cualquiera de la aplicación proto conducción comprada en estos estados debe ser el mismo. Para que puedas ver u oír. ¿ Escuchar? Esto es diferente. Tenemos diferentes opciones. Opción, opción, opción, opción. Y aquí tenemos. Tenemos cosas diferentes, por lo que debe ser lo mismo. Entonces lo que voy a hacer es que vamos a generar esto replicando éste. Entonces voy a creer esto. Replicar este porque tenemos tenemos necesitamos todos estos estados activos a si queremos a medio y vamos a hacerlo en este estado. Entonces esto va a ser buscar una búsqueda uno. Y en este estado, esta polio, vamos a nombrar, debería ser la misma. Entonces si tienes marco uno que debe enmarcar uno por aquí dedo del pie. Entonces lo voy a mover hacia abajo así por aquí, y va a ser C 0%. Entonces va a ser la transparencia debe ser 0%. De acuerdo, así que lo hemos escondido por aquí, y nos vamos de pie. Usa la búsqueda. Seleccionar opción. Toby presente. Por aquí, va a estar activo de igual manera en esto por aquí, tenemos que esconder algo. Opción activa. Va a ser 0%. Primero lo movamos hacia abajo. Por lo que quería deslizarme así. Entonces lo voy a mover por aquí, y voy a usar 0%. Entonces si entiendes eso, en realidad lo he hecho, estoy tratando de ocultar estos estados. Y cuando nos movíamos a este dedo del pie enemigo. Este, este estado activo, vamos a simplemente mostrarles bien De igual manera, para este icono de cruz. Nosotros lo vamos a mover por aquí como esto puede ser por aquí, por aquí y movernos. Que sea 0%. Por lo que siempre que alguien intente hacer clic aquí, va a entrar al estado. Entonces cada vez que alguien intenta dedo del pie, escoge nuestro intento de activar esto. Se va a entrar en este estado y cada ítem se va a mostrar lenta y poco poco. Entonces este es en realidad el truco detrás de esto. De igual manera, por aquí vamos de pie. Muéstralo. Pero aquí vamos a usar la opacidad. Eso se esconde al usar una opacidad así. De acuerdo, así que intentemos con cualquier hecho y tratemos de conectarlos. Vamos al prototipo de dedo y me voy de pie. Vete por aquí. Y si alguien está bien, así que vamos a ir por aquí. Si alguien intenta hacer click en tap en este, se va a ir a esto y vamos a usar Enemigo Inteligente. Está adentro afuera. No se baja el desplazamiento que hace frío. Empecemos esto. También conectemos algunos de los bares de este tipo por aquí a esta zona. Entonces vamos a ir de pie a este. Inteligente. Cualquier mero. Ok, entonces éste, igual manera, éste de manera similar, éste. De acuerdo, entonces toda la barra de búsqueda ahí correctamente a ésta. Juguemos nuestro prototipo y veamos qué hemos cogido todavía. De acuerdo, así que aquí lo tenemos es nuestro menú animado de carne. Entonces si hacemos clic en esta receta tal, se va a ver, esto sale así. No podemos volver ahora mismo porque está volviendo a éste tenemos dedo del pie. Está bien. Entonces una vez que tengamos estamos en esta pantalla, déjame mostrarles lo que hemos hecho hasta ahora. Entonces para click sobre aquí, ver la cualquier misión por aquí y déjame conectar esto para que podamos repetirlo una y otra vez. De acuerdo, entonces aquí tenemos esta cruz y ¿dónde está cruzando? Al otro lado. Entonces esto es realmente no me gusta esto en estricta mamá, porque mi nombre. Y luego cuando dormí esto debería estar dentro, tomado dedo del pie esta capa por aquí. Entonces este es un icono de cross y voy a añadir um, toques que 80 por aquí. Entonces esta va a ser mi ficha? Sí, por este ícono de cruz. ¿ Qué está pasando? Yo quiero tener una maraña que va a ser su opinión para este. Es icono de cruz. Llamémoslo profundidad. Sí, voy al 0% de opacidad, y se va a volver atrás. Entonces en prototipo, me voy de pie. Mueve esto y éste va a volver a éste. Y volvamos a jugar esto. No. ¿ Ves el efecto por aquí? ¿ Ves cómo este colega tu dieta se desliza junto con ésta? Entonces así es como se crea un bonito aspecto un prototipo inmediato en fig. Mi esperanza que hayas aprendido disfrutó de esta lección. Pasemos a la siguiente lección donde vamos a mostrar la búsqueda. Dichas reservas. Espero que hayan disfrutado de este video, y sé que estos videos son muy largos, pero hay que seguir viendo para aprender algo nuevo 49. Diseñar y prototipos de búsqueda de búsqueda y: Ahora hemos creado la búsqueda, cualquier misión y prototiparla. Ahora vamos dedo del pie pasar a la siguiente pantalla, que van a ser los resultados de búsqueda. Entonces llamémoslo como reservas y puedes ver u oír. Vamos a tener algún estatus por aquí como hemos encontrado estas muchas reservas que es borrar esto siguiente. Diluir esto. Entonces me quedo con esto porque necesito demostrarlo. Teléfono de cinco reservas. Entonces voy a mantener esta misma sección superior por aquí, y vamos a cambiar de dedo el color a algunos geniales como este porque no queremos que quede muy resaltado por aquí. Y ahora vamos a crear una sobrecarga de rectángulo. Por lo que el rectángulo va a ser del mismo tamaño que esta barra de este tipo. Por aquí es 3 39 3 39 y vamos a mantener la altura 24 y vamos a ir de pie tirado así . Van a estar 20 píxeles lejos de las reservas de stop, y vamos a tener algunas esquinas redondeadas, cuatro excretas completas. Eso es habilitar nuestro Así que es un poco fuera fuera de sección Fallar por aquí. De acuerdo, así que esto parece anotado. De acuerdo, entonces, no, este es nuestro punto de partida. Entonces voy a ocultar mi, uh, uh, control de comando out grade Shift cuatro y control G. Creo que para los usuarios de Mac, voy a usar color blanco. Entonces ahora puedes ver por qué he usado este blanco porque las miradas blancas crean sobre este fondo pálido y acabado. Entonces esto es un truco. Quería mostrarte que si intentas usar algún fondo muy claro o muy claro en equipo , tu color blanco va a brillar sobre él. Entonces ahora vamos a sumar algo de sombra, esta. Entonces vamos a ir efectos del dedo del pie. Sombra de gota y sangre serán tres cinco. Cualquiera será uno. Porque no queremos que esté muy lejos. Y el color en con 363636 Y la opacidad será del 10%. Se puede ver que es muy sutil. Sombreado. Reanudar en. Se puede ver que esto es una sombra muy, muy clara, y se ve realmente genial. Está muy cerca de esta capa, y esto se ve muy bien. Ahora vamos a agregar una imagen aquí a la izquierda y a la derecha, vamos a tener algo fuera de la información, como concierto de leche o algo así. Entonces primero vamos con el dedo del pie. Este va a ser nuestro Dana. Y ahora vamos a añadir otro contenedor dentro de éste. Entonces será por aquí así. Esto va a contener nuestra imagen. No. Lo que queremos hacer es que este contenedor actúe como nuestra mezquita para todo esto. Entonces vamos a replicar este control de mando D y vamos a holgar a este contenedor una mezquita. Hemos estado para renombrarlo, contener una mezquita al fondo, y nos vamos a ir dormimos del dedo del pie. Todos los mejores jugadores que queremos dentro de ella y vamos a usar esta mezquita o aquí. Ahora se puede ver a todos estos líderes. No pueden escapar de este tamaño. Entonces si trato de redimensionarlo, puedes ver que siempre se quedará aquí en esto. Una cosa más es que creo que nuestra sombra está perdida por aquí. Entonces vamos a mover esto de esto, y vamos a agregarlo a nuestro grupo de mezquitas. Entonces vamos a sumar lo compartido por aquí. El 3 66 y vamos a usar el 10% de ella aquí. Entonces esto parece funcionar. Esto se ve bien. Entonces tenemos este siguiente contenedor de imagen de la persona que llama, y vamos a arrastrar y soltar la imagen dentro de éste. Usemos esto y llenemos esto con imagen por aquí, como esta imagen y expongamos la imagen. Y estas son las imágenes. Esperan éste. De acuerdo, así que esto se ve bien. Esto se ve bien. Genial. De acuerdo, entonces necesitamos tener alguna información o aquí. Por lo que en la cena de Michigan, tenemos la imagen dentro de ella. Entonces tenemos este contenedor. Este va a ser el contenedor blanco completo. Llamémoslo continuar la luz. Y entonces hemos continuado mezquita, que en realidad está enmascarando todo. De acuerdo, entonces ahora vamos a agregar algo por aquí, como patada de leche. Este va a ser nuestro título. De acuerdo, entonces queremos tener una buena separación de esta imagen. Vamos a moverlo adentro. Este grupo perdió 2120 s bueno desde la cima. Disculpa 12. Entonces tendremos algo más como 5 36 A la gente le encanta. También tendremos opinión por aquí, así que usaremos 251 opiniones y estrellas. Entonces vamos a usar una forma de estrella por aquí, crear un turno de estrella o turno. Voy a usar algún otro ángulo, como 45. Esta luce anotada. Y voy a usar un color naranja por aquí como éste. Un poco más brillante se vería mejor. Al igual que este tamaño será el 12 del próximo año. Esto se ve bien. No sólo Necesitamos replicar estos. Vamos, De. Vamos, D. Ahora, voy a usar algunos de los caballeros de porque la mayoría de estas selecciones se pueden ver por aquí si van por aquí. Este, Esto tiene árabe. Voy a usar en algunos de cada 16. De igual manera, por aquí, voy a usar tu fresa de 16. Y el color será el mismo. Al igual que éste. Un poco crear. De igual manera, para éste, la voy a usar y caballero. Y agrupemos todo lo bueno para este, no vamos a usar este negro, pero tenemos un negro verde. Entonces vamos a usar éste de manera similar, para éste. No queremos que sea muy brillante. Vamos a tal vez podamos usar este color primario verde porque las críticas son muy Puedes ver mentando cualquier app A la gente le encanta leerlas. Por lo que esto está casi listo que aleje y vea cómo son las diferentes distancias. Este, uh, éste se ve un poco más pequeño, así que voy dedo del pie aumentar el tamaño express y mantener el turno. De acuerdo, así que éste se ve mejor ahora. Enfermera línea dejó sitios. OK, así que aquí tenemos la distancia de distancia a Ella usó esto. Muévalos un poco arriba porque está muy cerca de la frontera por aquí. De acuerdo, Entonces una vez que hayamos creado este grupo de mezquitas, este es en realidad nuestro, um, tal resultado. O tal vez podamos tarjeta pequeña. Podemos llamar a una tarjeta pequeña. Ahora, vamos a replicar este. Si desea crear un componente, también puede hacerlo. Entonces voy a cambiar de dedo algunas de las cosas aquí y allá, y luego la voy a mover. Hagamos de esto un componente. Control de Comando. Detered. Replicar. Yo estoy usando. Voy a mover este componente Theis, este componente maestro a nuestra guía de estilo. Entonces vamos a Harrod o aquí así. Ahora vamos a replicar y sólo cambiar las imágenes y el impuesto. Entonces me voy de pie. No voy a entrar en detalles. Esto se va a saltar. Voy a saltarme muy rápido. - No , la pantalla está lista. Se puede ver por aquí. He cambiado todos los diferentes artículos por aquí, y he dejado algo de espacio por aquí en la parte inferior. Entonces cada vez que escolarizamos, tenemos el espacio para esta navegación de fondo, o aquí. Entonces ahora vamos a vincular estos artículos por aquí. Por lo que una vez que use así y haga clic en buscar, debería seguir. Esta búsqueda es er discurso. Entonces hagámoslo. Entonces vamos a seleccionar este ícono, y también necesitamos agregar algún rectángulo por aquí para tener el área activa del grifo como esta. Y va a ser esto va a estar cerca de este tal bar. Toca una DEA, atornillarlos juntos el fin de semana. Si no queremos un grupo, podemos dejarlo como esta idea de paso para tales como esta. Y luego vamos a usar la opacidad al 0%. Y una vez que vamos dedo del pie prototipo se iban dedo del pie dormía igual Esta ficha 80 por aquí y se lo va a mover. Por lo que este está en cualquier hecho. Entonces tratemos de ver lo que hemos logrado. Todavía todavía. Por lo que toda su tasa de dieta A continuación, haga clic aquí y aquí tenemos nuestros resultados. Ahora bien, si quieres Cualquier hecho esto merece, esa es una historia diferente. Tenemos dedo del pie usan las mismas reservas que puedes ver. De acuerdo, así que esto es un pequeño problema. Estamos aquí. Tenemos mucho espacio en la parte inferior porque fuera de ti cosas por aquí. Entonces déjame mostrarte lo que realmente pasa. Por lo que siempre que tengas algo como esto, necesitas tener contenido de clip. Y para esta imagen, queremos al residente del dedo del pie Phil, vamos a ir a la cosecha del dedo del pie. Se puede ver que este límite está fuera de esta zona. Entonces cada vez que tengas esto pero este tipo de límite esto se va dedo del pie dar más espacio en la parte inferior. Entonces vamos a usar crop and call. Se va a arreglar eso y también se puede ver por aquí lo que está pasando. Por lo que el fondo BG es un poco más grande. Este es otro problema. Así que asegúrate de que tus capas no estén saliendo de este contenedor así que Si alguna capa está fuera de este contenedor, se va dedo del pie. Te daré algunos dolores de cabeza así. De acuerdo, Entonces antes de ir a este, necesitamos animar estos para así que vamos a seleccionarlos todos. Vamos, ¿ ves? Y vamos a ponerlos de pie por aquí. Buenos días, V. Ahora los vamos a mover un poco, Doan y, uh, también vamos a cambiar las distancias entre ellos así? No, vamos a usar el mismo truco. 0%. 0%. 0%. Este va a ser 0% a éste va a ser 0%. Entonces tenemos todos estos? No, intentemos reproducirlo y veamos qué podemos conseguir. Entonces aquí lo tenemos. Entonces si hacemos clic aquí, se puede ver que viene una parte superior de abajo que se vuelve a jugar. Está bien. Te dice que estas son las posibles acciones. Entonces así es como se hace este tipo de animaciones usando prototipado. Entonces espero que hayan disfrutado de esta lección si tiene alguna pregunta, alguna sugerencia? Asegúrate de que siempre me lo digas. Pasemos a la siguiente lección. 50. Diseño de ingredientes de recetas de la pantalla: en los próximos videos, vamos a crear esta única receta ingredientes y profesión de receta única, estas dos pantallas y esta superposición. Y estos dos voy a saltarme perfil y ajustes y este este este es casi similar a este tan desiertos por aquí. Entonces voy a saltarme esto y se lo voy a dejar a ustedes chicos y ustedes van a hacer esto. Ya has visto esto. Voy a dedo Incluir todos estos todos estos enlaces de app para que puedas verlos y puedas crear tuyos propios como tu asignación. Esto se superpone. Y estas dos recetas sencillas voy a terminar porque estas son todas estas pantallas van de punta rematar todas las técnicas que te voy a mostrar dentro de Sigma Onda Thies. Esto será un repetitivo que creo que realmente no me gusta. Dedo del pie hazlo ahora mismo. Entonces empecemos con una sola receta ingredientes y luego me voy a volver a ti y voy a ver tus asignaciones y lo que has hecho y has creado No empecemos y empecemos a mandar la pantalla de recetas únicas. Vamos a retroceder dedo del pie camino eran antes. Y creo que necesitamos algo por aquí, como esta ensaladas, y voy a replicar esto. Vamos a replicar merece esta vez. Entonces voy a replicar este y vamos a acercar y voy a llamarlo soltero. Ups. ¿ Qué pasó? Soltero. Eso estaría bien. Entonces lo primero es que no necesitamos esto en la parte superior. También, nuestra esta imagen, se va a ir vied. Tampoco necesitamos éste. Y esto se va a quedar aquí igual. Esto se va a quedar aquí igual. Uh, esto va dedo del pie. Vete. Y ahora lo vas a subir así, y lo vamos a expandir presionando turno. Veamos cómo se expande perfecto. De acuerdo, así que esto es este Look marcado. Ahora, no necesitamos las esquinas redondeadas por aquí, así que vamos a ir dentro de esta mezquita. Usemos el cero. Por lo que tenemos esquinas callejeros. Esta flecha va a ser blanca ahora, y no, necesitamos agrandar esta imagen. Entonces lo que vamos a hacer es que vamos a ver a este grupo de mezquitas, este rectángulo por aquí, en realidad, y vamos del dedo del pie, arrastrarlo por abajo así. Entonces vamos a crear una T 100 luego altura o diseccionar ángulo. Vamos a cambiar el tamaño de esta imagen o aquí, así. Muévete dentro de ella. Genicemos la altura de esto excesivamente, ¿de acuerdo? Y entonces también vamos a mover estos este título por aquí así de duro. Voy en esto todos estos tres en la parte inferior por aquí en alguna parte, Y es nuestro Dag el ciervo etiqueta destacada. También tenemos que moverlo aquí así. De acuerdo, así que esto está hecho. Una cosa más es que necesitamos cambiar demasiado ahora porque queremos mostrar nuestros iconos en la parte superior. Entonces voy a ir a esta superposición. Acude a esta superposición. Esto en realidad es lineal. Entonces voy a mover este gris en la parte superior por aquí. Ahora, uh, en algún lugar por aquí así, ¿Por qué va a estar en esta zona ahí así lo hacen un poco más oscuro así porque tenemos imagen muy grande. No. De acuerdo, así que ahora creo que nuestra flecha trasera es una gran visible ahora, Um, Ok. Entonces si quieres hacerlo un poco más de cuellos. Tratemos de usar un grande más oscuro por aquí así. Al igual que esto. Depende de ti. Depende de ti. ¿ Qué quieres hacer aquí? De acuerdo, así que me gusta de esta manera. Ahora voy a añadir más iconos cuando su parte voy a correr este corazón que tengo si no te gustará este fondo Así que aquí está mi parte. Hago un llamado a este y mi corazón icono ISS, éste. Entonces voy a cangrejo lancha fuera de ellos ex Los movió adentro. Jane Doe coloreada de blanco como este allí sin duda ganó sobre cuadrícula líneas y moverlas a la derecha. El arte se va a acabar. Pasémoslo aquí y más así. Este es un buen control. Envía cuatro o controla G para ocultar estos. Ahora hemos hecho la sección superior por aquí. Ahora vamos a pasar al resto del fondo, así que vamos a diluir este. Estas tres esperanzas yo podría Noche necesito éste suscribe. Vamos a usarla para ingredientes. Vas a tener una navegación aquí. Estamos aquí en alguna parte, así que necesitamos éste. Vamos a diluir todo lo demás. ¿ De acuerdo? Ahora vamos a dibujar algo por aquí para mostrar las estadísticas de esto. Entonces vamos a tener algo por aquí como este 48 que se usa 48 cuatro. Va a ser blanco. Y aquí te mostraremos algunos de arranques como en casa en cualquier minuto por cuántas porciones de persona y cuántas kilocalorías es esta receta. Entonces hagámoslo hecho. Vamos a usar esto y uno más. Que es lo que fue el 1er 1 vez en este reloj. Vamos a arrastrar a todos estos tres a Sigma y vamos a usar este reloj por aquí . Este va a estar por aquí. Este va a estar por aquí. El resto de la cosa es alineación y colores. Entonces el asesino será éste. Esto en realidad es verde medio. No queremos que estén muy resaltados porque esto es sólo una información. Usa una puerta. Nieto, haz clic en él una y otra vez o haz algo al respecto. Y creo que estas tiendas también tienen que ser así. Eso es texto usado por aquí. 30 significa 30 minutos que ella era un espaciado fuera. Seis. Vamos a usar tu Ramana Vamos a desparpadear porque necesitamos aquí una puerta cuatro muy pequeña , pequeña talla 14. Y el color será así. O tal vez así. Al igual que esto. OK, así mismo color que ícono y voy a ir a alinearlo así. Cuatro personas, cuatro personas fueron anotadas. Cuatro personas y 1.5 kilo de calorías. Algo así. Asegúrate de nombrar a estos iconos porque ahora mismo no los estoy nombrando. Esto es energía. Entonces no, sólo los voy a alinear. Y de acuerdo con este bar de aquí y sólo tratar de ver qué se ve mejor a mi gusto. ¿ Se puede ver qué aquí? Esa lucha por aquí es menos. Tengo que sólo, ya sabes, arreglar estos problemas. El distancia entre es de cuatro. Por lo que deben ser seis. Esto es un poco mucho. Este es uno para siete seis. Esto se ve muy bien Siguiente, permitiéndoles ver Bien, esto se ve mejor ahora. Mucho mejor. Nueve. De aquí tenemos 13 selecciones. Que sea Dan. En ninguna parte aquí y también luego desde aquí Ahora este cuerpo casi está terminado. Tengo algún problema. O aquí tenemos mucho espacio, así que voy a alinearlo en medio solo usando mis ojos. No estoy tratando de ser muy pixel perfecto por aquí. Por lo que ahora próximo nacimiento esta barra de menú de ingredientes por aquí. Entonces voy a usar puedes usar una línea. Usemos una línea debajo de ella. Turno para hacerlo recto. Hagámoslo dos píxeles. Vamos a utilizar la mayúscula B Color redondo será este color azul. ¿ Qué es esto, Bill? No, no necesitamos Facebook Blue. ¿ Qué? Necesitamos nuestro azul morado por aquí. Creo que no lo hemos agregado a nuestros colores. Usemos esto y añadimos a otros estilos. Segundo grado azul. Este es nuestro azul. Esto no es Facebook. Ppista. Entonces aquí la tenemos intercambiada a nuestro azul primario, Este. De acuerdo, así que esto va a estar un poco más cerca. cuatro grandes de esto, que debería ser 105 Vale, así que esto se ve genial. Ahora necesitamos otro por aquí, que va a ser Vamos a mover esto dentro de este grupo con este grupo. Entonces esto va a estar dentro por aquí. Receta. De acuerdo, entonces aquí lo tenemos dentro de esta receta, Una pequeña sección. Por lo que es dentro, en realidad pequeña sección. Uh, esta línea se va a mover, y, uh, también necesitamos algunos estados por aquí. Entonces, comando, vamos a mantenerlo así. Simplemente vamos a cambiar los colores y mover esta línea moviendo la vida excluida. Línea móvil. Ahora voy a replicar esto. De acuerdo, Ahora, esto no va a ser resaltado. Entonces vamos a usar algún otro color como este verde medio. Esto se ve bien. Estos ingredientes en realidad es verde oscuro, este. Por lo que nuestro menú también está listo. Veamos cuánto es la distancia de aquí. Se está quedando 36. Queremos tener buen espacio a su alrededor. Por lo que el usuario tiene ni dificultad está pisando aquí en esta sección o aquí. Ahora, vamos a enumerar los ingredientes por aquí. Esto es muy fácil. Esto es sólo una lista. Voy a preparar el 1er 1 y descansar vas a ir a nosotros vamos a replicar. Entonces empecemos. Y vamos a usar. O aquí 10 yo estaba yo era Salman Fish fish. Entonces vamos a usar una línea en un separado por aquí, y la línea va a ser decolor. O tal vez esta decolora decolora. Por lo que queremos ser muy ligeros. No queremos que sea muy prominente aquí, porque esto es sólo un separador. Entonces usemos comun off. Y yo voy a Pete Dexter en el color para ser algo así. Voy a separar los roles de entonces algo así. Entonces vamos a usar lo mismo Vamos a tener la opacidad off 80% porque esto es solo separado o 50% esto se ve mejor. No quiero que sea muy prominente. Y ah, ¿qué estaba buscando? Yo estaba buscando esta esta monda por aquí. En realidad queremos que usemos el mismo o c y lo vamos a colocar por aquí. Ups. O aquí. Vamos, TV. Entonces esto va a ser o escuchar algo como esto. Por lo que siempre que el usuario toque por aquí, se va a activar. Entonces tenemos, Por ejemplo, tenemos preparado este ítem o tenemos esto con nosotros. A continuación, usa un poco más así. Siguiente. Agruparlos ahora de aquí para allá. Mark Control G, esta es nuestra receta. Descansa C B. Así que esto se acabó. Elemento de receta también podemos crear si quieres crear un componente, puedes crear un componente. Y eso sería útil para Y, uh, uh, se está moviendo un poco hacia arriba. 49. Tengamos 40 barba. Gran distancia entre estos y realmente replicamos esto. Vamos a crear esto. Vamos, control D. Vamos, X. Lo vas a mover a guía de estilo Por aquí. Ups. Al igual que esto. Si quieres cambiar el ajuste, por ejemplo, si quieres mover estos a un grupo otra vez, puedo llamarlo icono y quieres moverlo aquí en destrucción en la parte inferior y la derecha, puedes arreglarlos. De igual manera para este, voy a arreglarlo a izquierda y abajo. Entonces esto depende de ti. No voy a entrar en estos demasiados detalles de diseño porque ya te he enseñado. Ahora sólo vamos a replicar esto como esta mañana D dd knee de y D. Así que tenemos lista fuera de todos estos artículos. Eso los voy a seleccionar a todos y me voy de pie. ¿ Qué es esto? Eliminemos estos. ¿ Eso está vacío para himnos? Están selectos todos ellos. Ups. Cerremos este fondo. Ahí estaba me está dando algunos dolores de cabeza. También, este fondo me moví candado. Por lo que quiero seleccionar sólo estos. Ahora voy a usar este. Entonces vamos a mejorarlo un poco más. Yo quiero más espacio, Dean. 20 o quizá más de 20. Parece 24. De acuerdo, entonces creo que 24 se ve mejor. Entonces no sólo vamos a cambiar estos mazos por aquí. Y una cosa más es que voy dedo del pie aumentar la altura de este y también el fondo . Por lo que fui a desbloquear el fondo es el fondo es el número de la bolsa. Es un golpe. Se lo redimensiona así. Entonces me voy a volver pícaro en cerrarlo. Necesitamos un botón o cabello que digamos empecemos a cocinar algo como esto. Entonces vamos a utilizar nuestro botón estándar esa escuela a nuestra guía de estilo. Entonces cuando intentamos dedo del pie, cambia la piel de este, uh, este tablero de arte, puedes ver algunos de estos iconos. Se han estropeado. Ahora estos problemas se presentan cuando tenemos la escala establecida. Así que no intentes dedo del pie siempre que tengas algunos. Algún icono por aquí. No intentes usar la báscula, pero lo que esto va a ser problema. Por lo que la próxima escuela de vuelta que esto realmente sucedió. De acuerdo, entonces aquí los tenemos de vuelta. A ver, ¿Cuáles son los cambios? De acuerdo, así que una cosa que tienes que notar es cuando estás probando dedo del pie, si seleccionas, este ítem escuchará este ícono doble clic en él. Se puede ver si nosotros si estamos tratando de usar la derecha y la parte inferior, en realidad está sucediendo con este. Entonces es este presunto dedo del pie este fondo por aquí, se puede ver la línea bajando. Entonces si trato de cambiar arriba y abajo, se va dedo del pie. Quédate aquí. Entonces creo que deberíamos parar y justo en lugar de usar Así no va a bajar, derecha y arriba. Entonces esto es mejor. Se puede ver que éste se está deteniendo centro y éste se queda. No queremos que esté al fondo. Queríamos estar moviéndonos con la parte superior. Entonces vamos a moverlo ahora. Con éxito y no va a bajar así. Y esa es Jane. Esto vamos a crear un pero nadie aquí. Vamos a arrastrar nuestro mismo botón con el ícono, pero esta vez No necesitamos el ícono. Entonces lo que vamos a hacer es ir a Esta es la instancia que vamos a desvincular la instancia. Entonces porque necesitamos otro botón con sin el ícono para que podamos dar click derecho en este y vamos a utilizar de Dat instancia Ahora, una vez que se detecte la instancia, vamos a eliminar este Ikonomou aquí y para este texto, lo vamos a mover dentro en el medio. Este va a ser texto alineado en medio, y vamos a renombrarlo piernas. Empezar a cocinar. De acuerdo, entonces ahora mismo es un botón azul. No queremos que sea azul de Facebook. Queríamos a Toby nuestro color verde, que es nuestro verde primario. No, hemos agregado sobre el color. No, vamos a hacer doble clic e ir a este fondo. Pero y y en lugar de tener el color simple, podemos tener un radiante lineal. Entonces voy a ir con realmente ingrediente y nos vamos de dedo tener algo como esto de izquierda a derecha. Y vamos a usar la misma galera aquí casi lo mismo un poco. En el lado más ligero. Se puede ver u escuchar este look crear. Ahora puedes ver esto tiene sombra más oscura en un lado y agua más ligera y más nítida en el lado derecho. Entonces aquí tenemos el segundo botón, y ahora lo que podemos hacer es que fácilmente podemos crear otra instancia u otra. Se puede ver primaria, pero así este va a ser otro componente. Entonces este es nuestro componente maestro. Vamos a llamarlo Burton. A simple mando de control e. voy a mover mi componente Marcia a mi estilo. Cometa por aquí. Entonces el Así aquí tenemos dos tipos de pretensiones se pueden ver de lado a lado. Uno es este botón con Icahn. Segundo es pero en el ícono oscuro. Entonces vamos a volver a la escuela o principal diseñado. Alinémoslo en el medio así, como en el medio. A ver si esto está en el medio para que yo piense esto. Ups. Vamos, G siguiente, G siguiente, llámenles artículos de receta. Esto va a ser en la puerta central. ¿ Qué ha pasado? Selecciona todas estas, Margie, y van a estar dentro de un grupo. Hazlos en el medio Ahora está en el medio. Ahora. El resto es que solo hay que cambiar todos estos iconos. Entonces en esto de aquí nos vamos a esconder de los pies este factor y esta elipsis va a estar vacío. Entonces vamos a usar a Vied y vamos a tener algo de paja que va a ser opuesto. Entonces va a ser un mejor así Así. De acuerdo, entonces si tenemos algo vacío por aquí, vamos a usar algo como esto. El resto es que solo tengo que cambiar todos estos textos de forma aérea. Por lo que he ganado el texto. Ahora lo vamos a probar en el prototipo de aquí. Entonces voy a enlazar mis postres por aquí. Esta imagen la voy a enlazar así que esto por aquí. Entonces esperan esto y lo mueven aquí así. Empieza cualquier minuto inteligente y casado Eeasing está fuera. Pasemos a nuestro Perdón, éste. No es uno. Juguemos esto Vendedores significa y desierta. Por lo que bajo pantalla del desierto, nos vamos toe klik Esto y se puede ver que este es el efecto. Esto es realmente bonito. Entonces tenemos que vincularlo de nuevo. Entonces si alguien hace clic en el botón Atrás en lugar de ir por aquí, va a volver a las ensaladas. El hombre pantalla. Ups. ¿ Qué está pasando? Este. Vamos a diluir esto. Entonces esto va a volver postres de dedo del pie como este? Comprueba esto. Echa un vistazo a esto merece volver atrás. Ups. Por lo que volver es un poco diferente. Inteligente y emir. Veamos qué está pasando en Cletus Regresando de a 80 años Aquí. Tenemos que seleccionar la puñalada 80 en realidad. Y esto va a volver al desierto, no seguir adelante. Pero vamos a navegar a Smart. Cualquier mérito está en su fuera. ¿ Cuál es el 2do 1? Entonces aquí tenemos uno. Y si seleccionamos el 2do 1 queremos eliminarlo. Es plus delete. Eso es todo lo que necesitamos. De acuerdo, Entonces este es un hecho que estaba buscando. Se puede ver si nos desplazamos hacia abajo en este. Se puede ver que tenemos este botón. Empecemos a cocinar. Muy bonito. Cruel. De acuerdo, entonces eso va a terminar con esta lección. Vamos a crear una preparación de pantalla más, que es casi similar a ésta. Mucho Urgh repetitivo en el nuevo. El siguiente va a ser excesivamente así que pasemos a la siguiente lección. 51. Prototipos de pantalla de la receta: en este video, vamos a crear la próxima reina, que va a ser preparativos. Entonces vamos a replicar iniciando, pero replicando esto replicando este. Entonces vamos a replicar esto y vamos a mover este dedo por aquí. Por lo que esta línea móvil se va a mover por aquí. Cambio talla dedo 100 102. Dijiste que éste se ve bien. Vamos a cambiarlo, Sculler Toe este. Ups. Este más oscuro y dijo que esto va a estar en este estado. Entonces ya tenemos a Jane, esto. Ahora vamos a movernos en esta zona. Nuestro aquí. Entonces vamos a borrar todo por aquí excepto el de arriba. Y ahora vamos a llamar a uno en lugar de grupo. Lo vamos a llamar pasos de operaciones. Entonces este es nuestro primer paso. Entonces voy a llamarlo paso uno, y vamos a hacerlo, ¿ verdad? Click y escritura, agit. Destruido. Instancia. Por lo que paso un camino podría necesitar esta línea. Eso es diluir este tratamiento. Esto lo puedo hacer. Yo sólo necesitaba éste. De acuerdo, Ahora, lo que vamos a hacer es que tenemos camino rectángulo de agua por aquí. que de nuevo va a ser de color blanco. Estos son nuestros pasos. Entonces esto va a ser blanco, color blanco, blanco, Y va a ser el fondo de este Paso uno. Estamos aquí en este grupo. Esto en realidad es un marco. Por lo tanto, intenta usar fotogramas cuando quieras tener un poco más de control sobre las restricciones, estas restricciones. Entonces esta va a ser nuestra sobrecarga realmente gravada dentro de ella. Por lo que queremos que sea desprendido. Y queremos usar un arreglo. Raro así, algo así. Por lo que tenemos este ancho fijo. Esto va a ser capaz de párrafo ideas duras. ¿ Qué es esto? Estes. Paso uno. De acuerdo, entonces no nos preocupa la altura y le arrancó esta. Intercambia sus alturas, uh, hay cambio de grupo del dedo del pie porque se está comportando de manera muy diferente. Ahora tenemos el grupo suspiros. Eso es moverlo por aquí. Force intentó arreglar todo lo que has advertido, luego conviértelo a marco porque enmarcamos en realidad está intentando dedo del pie usar su propia altura y los Britanos por lo que no necesitamos eso. Entonces este va a ser nuestro párrafo. Entonces ahora voy a usar esto. De acuerdo, entonces este va a ser mi 1er 1 Así que voy a usar la redondez de cuatro. Um, bien. S cuatro se ve bien, y luego vamos a usar un ícono por aquí. Antes de eso, vamos a despejar el dedo del pie en una maraña por aquí. Y lo que vamos a hacer es que esto también va a estar por ahí . Esto va a ser cero. Esto se va a antes, y esto va a ser Oops. Tanto lo siento. Esto va a ser cero dedo del pie. Entonces, en realidad, trato de crear los mismos ángulos por aquí. Entonces aquí tenemos dos. Aquí tenemos cuatro, Que otra vez no es igual a este, uh, blanco o aquí. Entonces ahora vamos a usar nuestro Calero naranja aquí. Vamos a hacer un poco de color más claro. Entonces vamos a añadirlo en maíz naranja claro. Y ahora vas a tener polígono, que va a ser nuestro botón de juego. Vamos a rotarlo dedo del pie. 90 grados. Ups. 45 grados. ¿ Qué está pasando? Menos 90. Victoria. Usemos un gran radio de venta que ella era de este color verdoso. Lex, reduce el ejercicio también. 16. De acuerdo, así que esto se ve al cuadrado. Entonces cada vez que algún usuario hace clic por aquí. Él o ella va a ver este paso en un video. Entonces video con Bob arriba y verán este paso. Entonces esto está casi completo ahora creo que deberíamos convertirlo en marco. Y vamos a sacar a este grupo. Nosotros vamos al grupo de la ONU esto. Ahora tenemos un trasfondo. Cuando esto tenemos polígono rectangular, Esto va a ser un icono. Vamos a moverlo dentro de este marco. Y este ícono va a estar a la izquierda, en la parte inferior, izquierda en la botella. Esto se va a dejar y arriba. De acuerdo, El ciclón va a estar justo en el fondo. Esto se va a dejar en la parte superior y eso es todo lo que necesitamos. De acuerdo, Entonces una cosa más es que necesitamos agregar capa de ataques por aquí para el título. Entonces para el título, vamos a usar el paso uno, sacar el huevo. Entonces este va a ser nuestro rubro malo. Y para eso vamos a usar, um disculpe el mismo fort die feroz y vamos a usar el color que va a ser nuestro verde verde. Disculpe este. Entonces este va a ser nuestro color verde más nítido. Entonces este va a ser el paso uno si queremos. También podemos usar este. Esto es esto no va a ser un problema para nosotros. Entonces usemos esto que aleje el zoom. Y este es nuestro paso principal. Entonces ahora vamos a repetir esto. vamos a agrupar, y vamos a repetir esto. Este es nuestros pasos Paso y vamos a replicar esto y moverlo hacia abajo así. Necesitamos tomar un té menos 16. Hagámoslo 20. Vamos, de. Vamos, D. Así que ahora mismo voy a usar sólo tres pasos que se usan estos tres pasos. No, vamos a cambiar su tamaño. Podemos ver que esto va muy bien porque es un marco y ya tenemos objeto de un constreñimiento por aquí. De igual manera, para éste se cambiará tamaño de manera similar de nuevo. Podemos holgar este paso de preparación y vamos a moverlo así. Entonces estos son nuestros pocos pasos. Vamos a mover esta ruptura por aquí. Y esta vez necesitamos algo con, um con un ícono. Esto aquí, Vamos a borrar esto. No escuchamos 48 para el aire en la distancia entre éstos para el ícono, lo vamos a cambiar. Seleccionar capas escolares. próximo Icahn sella este. De acuerdo, entonces para este truco de íconos, tengo que mostrarte que si quieres agregar un ícono por aquí, no puedes agregar un ícono como este. No se puede arrastrar y soltar una Nikon, por ejemplo. Por ejemplo, este dentro de esto no es así. No te va a dejar agregar. Intento a su instancia. Entonces en cambio y yendo por aquí, vamos a ir a Sy Guide el componente Maestro de carga. Vamos a añadir otro ícono. Déjame mostrarte el truco. Entonces vamos a sumar ese ícono por aquí. Por lo que tenemos nuestro icono se puede ver. No, está dentro de éste. Y, um, vamos a cambiar su color demasiado ancho. Ella era así de blanca, y lo vamos a esconder por aquí. Entonces siempre que queramos arrastrar algo, déjame mostrarte cómo lo vamos a usar. Entonces tenemos este botón ahora y simplemente vamos a ocultar este ícono y mostrar el ciclo. Entonces esto es todo lo que necesitamos hacer. Entonces déjame ver si lo podemos alinear adecuadamente, porque no está en el medio. De acuerdo, así que ahora está en medio. De acuerdo, Entonces esa puerta trasera de la escuela significa diseño e intercambio lo hacen, y voy a cambiar su color dos. De acuerdo, Entonces una cosa más, vamos a agregar este botón BGN, y lo vamos a agregar a nuestros estilos de color. Esta va a ser una muy verde Grady int. De acuerdo, entonces no tenemos genial. Y por aquí, Así que una vez tengamos nuestro ingrediente, vamos a holgar este fondo, y vamos a cambiar a grande Radiant. Eso es todo lo que necesitamos hacer aquí. Entonces, ¿así es como en realidad despejamos esto? Probemos con el dedo del pie. Eso es zapato probado de dedo, nuestra navegación inferior por aquí. De acuerdo, así que hagámoslo un poco más pequeño así. También este fondo antes? No, para este, necesitamos tener un medio de profundidad que va a estar por aquí. Dos áreas, en realidad. ¿ Qué? ¿ Esto? Este sobre chequear. Es éste. Entonces esto se va a preparar puñalada. Y esto va a ser ingrediente. Sí. Entonces voy a esconderlos sólo en un 0%. Y ahora vamos a ir a prototipo de dedo y simplemente nos íbamos a usar algo como esto. Arrastrar y soltar nunca se vuelven demasiado inteligentes. Y lo hizo. Y desde aquí, también necesitamos desbaratar a ambos de estas, um, Lears la mayoría de estas capas por aquí también. Algo así. Entonces vamos a mover esto por aquí. Disculpe a éste para volver. Entonces ahora vamos a probar nuestro prototipo. Veamos qué hemos hecho aquí. ¿ De acuerdo? Esto se ve bien, y podemos bajar y podemos hacer click aquí, y va a ir a nuestra reseña pop up, que vamos a hacer en la siguiente lección. Por lo que tenemos ingredientes y preparación. Ahora bien, si quieres mostrar la progresión y moverlos hacia arriba, moverlos hacia arriba quieres mostrar la cualquier misión que tengas que hacer lo mismo tienes dedo del pie selecciona todos estos, y eso los agrupa controlan. Vamos. G X les llamó pasos. Nos vamos de pie. Vamos, ¿ ves? Y nos vamos de pie Base ellos por aquí. Entonces aquí los tenemos así. Y dentro de este grupo, vamos del dedo del pie, moverlos arriba en la ciudad, posiciones de Jayna. Y ahora vamos a ocultar esto. Entonces vas a usar 0% para la opacidad. Veamos qué sucede esto por aquí. Se puede ver cuando salen así, también se puede ralentizar la animación o aquí. Entonces si quieres frenar la animación en el movimiento por aquí, puedes seleccionar esto y tenemos 300 milisegundos que podemos usar durante 50 muchos segundos. De igual manera, para este, podemos usar 3 50 Ver, ¿cuál es el efecto ahora? Se puede ver que se ve mejor cuando tenemos, uh, este tipo de ajustes. Por lo que estos vienen muy bien así. Por lo que esto termina sobre este prototipado en todo esto, voy a crear una pantalla más la cual va a ser excesivamente y resto de las pantallas y aplicación principal. Vas a diseñar para mí y mostrarme lo que has cogido. Así que pasemos a la siguiente lección y a dónde vamos con el dedo del pie diseñamos nuestro sobre la pantalla, y te voy a mostrar cómo el dedo del pie usa esta superposición pop up y fig MMA 52. Revisión de Pop de superposición de la superposición de la: en esta lección. Vamos a crear esta pantalla excesivamente en fig MMA y donde te voy a mostrar como dedo del pie pop arriba esta superposición y esconderla cuando alguien envía reseñas. Entonces vamos a volver a donde nos fuimos. Esta es la sección donde salimos y ahora vas a crear una pantalla de superposición o aquí , que va a ser una pelea. Por lo que vamos dedo del pie, crear un nuevo marco y será nuestro propio tamaño. Será. Será de 328 pixel vied porque queríamos dentro de esto. Entonces déjame mostrarte. Entonces si yo dragón se puede ver por aquí se puede ver que va a estar dentro de este contenedor. Entonces usemos 330 y la altura será 400 70. Esto es justo y se puede ver estimación y queríamos ser esquinas redondeadas. Entonces voy a usar cuatro por aquí. Se puede utilizar aumentar más, por ejemplo, por ejemplo, así que también va a funcionar. Además, si quieres dedo del pie, añade algo de sombra, depende de ti. Pero ahora mismo voy a usar algún texto por aquí. Entra como, um, barro. De acuerdo, entonces el asesino que vamos a usar va a ganar este. Entonces este va a ser un color de enlace que ya estoy conectado desde arriba. Voy a tener 30 de la izquierda. Voy a tener 20 menos. Mantenlo puntiagudo. Algo así. Después moviéndose hacia abajo. Vamos a tener calificación selecta, por lo que le mostraremos al usuario algunos desvaneciendo muchos por aquí. Vamos a usar el botón de acción. Y el color será este negro oscuro, verdoso que separa. Y vamos a usar lo mismo, uh, uh, este Starwood aquí que ella era la estrella. Vamos a basarlo aquí. El rating estelar. Y ahora, en realidad usuarios buques de guerra Eléctricos. Entonces vamos a aumentar su tamaño. Ahí está cerrarlo. Usemos la habilidad por aquí. Y creo que éste es bueno. Creo que también podemos aumentar la distancia entre ellos arriba así. Entonces voy a seleccionar manteniendo pulsada la tecla de turno, y voy a usar esto. Distribuir espaciado horizontal, espaciado horizontal. Entonces esto es esto Se ve mejor. Queremos tener alguna separación entre ellos para que los usuarios puedan fácilmente saber eso, sin embargo. Afloja esta lectura. Entonces vamos a tener 14 entre estos. Disculpe esto de nuevo, y voy a usar la revisión correcta, y luego vamos a tener cuadro de texto aquí en este libro de texto. Ella era que se va a montar su crítica. Ahí hay un tirado todos ellos sobre ellos a la izquierda, así. De acuerdo, entonces voy a reducir la altura de éste porque también necesitamos una carga. Estaban aquí, así que voy a usar de nuevo. Existen cuatro. Disculpe esto o aquí. El peor. Vamos a usar avistamientos inversos por aquí. Añadamos un poco de trazo alrededor. Va a ser esto. Se utiliza un color más claro como este. Esto se ve mejor. Ahora necesitamos un pero y vamos a ir a los activos del dedo, y vamos a usar sobre botón simple por aquí, y vamos a cambiar de tamaño. De acuerdo, entonces necesitamos poner este botón en nuestra, um, um, guía de estilo y a continuación ver qué está pasando por aquí. Esto está en medio. Uh, hola. Fuera de palabra. Y, um uh, se va a quedar en el centro y en la parte inferior. Entonces veamos ahora, chamarra ahora en el diseño. Está bien. Entonces sólo mirando. Está bien. Por lo que sólo necesitamos cambiar el color del perdón por aquí. Nos vamos a ir con nuestras esperanzas. Uh, entonces vamos a ir con nuestro color sólido Eso va a ser sobre este color azulado. Entonces esta vez voy a usar esta. Por lo que quería estar más cerca de esto. Y tenemos Queremos tener algo de espacio en la parte inferior. También puedes aumentar este marco duro. Este va a ser nuestro sobre labios. Entonces déjame mostrarte lo que está pasando por aquí. Por lo que esto es se puede ver esto está configurado a escala. Hemos querido estar a la izquierda y en la parte superior. No queremos Habilidad hinchazón va a moverlos ahora mismo. Y esto parece creta. Ahora, algo de espaciado vertical. De acuerdo, así que esto es bueno. 30. Se trata de 21. Esto va a ser 20 tardy para D. Así que tenemos esto, uh, diseñado. Esta va a ser nuestra superposición. Y se va a presentar este texto. Presentar una revisión? No, en la pantalla. Cuando alguien intenta hacer click en esto listo para comer ahora, Button. Vamos a mostrarles esto excesivamente. Por lo que una vez que han terminado todo, han preparado el platillo. Queremos que dejen alguna crítica por aquí. Entonces para hacer eso, vamos a vincular esto, Pero hasta esta temprano. Entonces vamos a ir al prototipo y eso pronto se acabe. Y vamos a vincular esta carga a esto y de golpe. No vamos dedo del pie Nunca lleguemos a hacer. Pero vamos a usar esto abierto excesivamente. Entonces en esta sección o aquí, esto va a ser excesivamente. Esto es superposición. Estamos probando el uso del dedo del pie y hay opciones como centro dob izquierda. Lo vamos a usar en la parte inferior inferior centro. Usemos este centro de fondo y vamos a usar mudarse y se va a mover desde abajo así. Siguiente usa 400 milisegundos y empolvamos esto en nuestra app. Esta es la carga. Entonces si he presionado listo para comer, se puede ver u oír. Esto va dedo del pie pobre libro como este, pero necesitamos un fondo. Entonces, um, en esta selección, estamos aquí. Entonces aquí está nuestra inyección esta interacción. Queremos que se cierre al hacer clic afuera. Nos vamos dedo del pie también sumar atrás excesivamente. Entonces yo quería estar al 50% y veamos qué pasa ahora. Entonces este es el efecto en realidad. Entonces si hacemos clic afuera Así que ahora si hacemos clic en este botón, puede ver así es como aparece como así es como cae hacia abajo. Por lo que también puedes hacer click, Puedes usar el botón enviar y puedes enlazarlo de nuevo Esta pantalla principal que gracias ¿ Algo así O tal vez empezar a ir algo nuevo, algo así. Por lo que nunca podrás conseguir todo lo que puedas navegar de nuevo a esta pantalla. Depende de ti. Entonces vamos a probarlo ahora. Y si pinchamos por aquí, Ok. Por lo que hay que ver que se va del dedo del pie. Vuelve atrás. Se va a salir ahora, y será It Will está en sus puntos de venta. Se acabó el uso. Entonces no estoy seguro de por qué me está dando un imbécil cuando se remonta. Inteligente e imagen cumplida en años está en fuera, mudan, se mudan en realidad, así que se va a salir. Estoy usando mudarse adentro. Por eso está haciendo este imbécil. De acuerdo, eso es eso que está al cuadrado. Por lo que se está moviendo muy rápidamente. Eso es bueno. Entonces creo que esto va a terminar nuestro viaje con esta app. He dejado pocas pantallas porque creo que fue un trabajo reparador. Yo quería mostrarte esto excesivamente Cómo sale manguera, muévete. Se mueve en cómo hacemos la cualquier misión fuera de esta selección por aquí valor muerto. ¿ Cómo? Mostramos estos resultados y todas estas cosas diferentes. Por lo que espero que hayan disfrutado de esta lección. Si tienes alguna sugerencia alguna que quieras aprender algo de mí, siempre puedes preguntarme. Puedes ponerte en contacto conmigo. Estoy abierto a las preguntas. No olvides hacerme preguntas. Siempre que te golpeen. Estoy aquí por ti. Sigamos adelante y aprendamos algo nuevo. 53. Aplicación de los Screens de los 6 de los: Ahora ya has aprendido todo te he mostrado cómo diseñé toda esta app. Ahora es tu momento de crear cualquier app. Puedes borrar la app de receta si quieres, o puedes crear cualquier app tu propia idea. No te estoy limitando. Así que crea una app con al menos 6 a 7 pantallas. Al menos seis pantallas que van a transitar. Tienen algunos efectos de transición. Tienen algunos efectos de movimiento, efectos emergentes. Tienen algunas superposiciones que sale con algún tiempo eso crean esto. Entonces te voy a mostrar al menos esta pantalla de inicio de sesión. Entonces tenemos a este Minsk ahí dentro. Tenemos algunas transiciones y luego alguna pantalla con algún movimiento dedo del pie otra pantalla, que es un solo objeto o solo archivo o registro único. Como lo llames, entonces tenemos a los constructores de búsqueda algo. Yo quiero que creas algo como esto. Se puede ver este efecto moviéndose hacia fuera, moviéndose hacia adentro. Entonces quiero que creéis algún efecto como este. También, pantallas subiendo. Registra tus hallazgos son receta encontrada o tus registros telefonean lo que sea. Desapareciendo uno por uno desde Burdeos y abajo. Entonces esta es la tarea que quiero de ti. Entonces empieza a leerlo ahora. Al menos seis pantallas. Si quieres aumentar las pantallas, estoy limitando el número de pantallas. Te estoy dando los últimos números porque creo que no se debe perder el tiempo. Si estás creando, si lo eres, puedes tener. Si tienes mucho tiempo y quieres crear como, 10 pantallas, adelante. No tengo problema pero seis pantallas, al menos así puedo hacer diferentes transiciones. Cómo te mueves de un esquema a otro y has utilizado el grifo de tu área objetivo, lo cual es una experiencia de usuario muy importante. Punto sobre usabilidad Punto de vista. Muchos diseñadores que no usan ese grifo zona urbana, por lo que se va a perder hit la mayor parte del tiempo. Entonces esta es tu tarea. Crea un AP completo de 6 a 7 pantallas o 10 pantallas, lo que quieras tener, y muéstrame todas las transiciones, cómo funciona todo alrededor de esta app. Me encantaría ver tus ideas Estoy leyendo para tu asignación, Así que empieza a crearlo ahora. 54. Gracias y qué sigue: Ahora, muchas gracias por estar conmigo a lo largo toda esta duración de tiempo y aprender junto a mí, espero que hayan aprendido algo útil. Si no puedes entender algo o tener algunas preguntas, siempre puedes ponerte en contacto conmigo a través de esta plataforma. Siempre puedes llegar a mí a través de mi página web. Entonces te excited.com. Puedes contactarme, puedes enviarme un correo electrónico. Puedes unirte a mí en redes sociales y hacerme preguntas o cualquier cosa, cualquier pregunta que tengas respecto al diseño de experiencia de usuario, diseño de interfaz de usuario o freelancing en general. Entonces del entonces te vamos a ver dentro de otro curso. No echa un vistazo a mis otras clases y cursos sobre diseño, sobre tipografía, diseño de maquetación, esquemas de color y todas esas cosas diferentes. Al tratar de dejar una crítica honesta, escribe algunos comentarios sobre lo que hayas aprendido dentro de este curso. Tilden, Nos vemos pronto dentro de otra clase o curso. Hasta entonces, cuídate y adiós.