Cómo diseñar y crear prototipos de una experiencia de diseño de UI/UX para móviles con la herramienta de diseño Figma: aprende a usar Figma

1. 1 video de introducción: bienvenido a cómo diseñar y crear prototipos de una experiencia de UX móvil utilizando la herramienta de diseño Sigma. Mi nombre es Aaron Lawrence, y soy diseñador principal de UX y fundador de agencia AUX llamada UX Honey en San Francisco , California También soy instructor aux, donde imparto clases diseño avanzado de UX en la Academia de Arte Universidad, también aquí en San Francisco. En este curso, aprenderás fig HMA, una herramienta de diseño basada en la nube que se está convirtiendo en la herramienta de diseño estándar de UX para la industria y diseñadores de UX por igual. Empresas como Google, Twitter, uber, Airbnb, Microsoft han adoptado la Fig MMA como su herramienta de diseño preferido debido a su fácil colaboración y eficiencia en la creación de diseño. Y mi parte favorita es que es gratis. Entonces vamos a mostrarte el resultado de este curso. En la próxima serie de videos, te mostraré paso a paso, cómo diseñar y prototipar una experiencia de pedido de té Boba bajo demanda. Aprendes a hacer un registro, página una página de inicio de sesión, aprendes a hacerlo. GIFs animados. Trabajaremos en la experiencia de compra, cómo crear elementos fijos como estás viendo aquí, transiciones para tus dropdowns móviles prototipo. Aprenderás estados de botones. Pasaremos y crearemos un pago de salida de cheque y la compra final del té Boba que se está entregando a mi ubicación. Y sí, tengo té Boba También, trabajaremos en la página del perfil Página del historial de pedidos, y cerraremos la sesión y crearemos una experiencia sin fisuras. También aprendes todas las diferentes formas en que puedes crear transiciones entre pantallas. Cuando hagas prototipos usando fig MMA, aprenderemos a usar la función smart, animate. Aprenderemos a crear, mover y mover pantallas, deslizarnos hacia arriba y deslizarnos hacia abajo. Aprenderemos a crear un menú móvil, aprenderemos a crear modelos y también crearemos una biblioteca de componentes reutilizables, estilos de color y textiles todo ello que hagan que el diseño sea más eficiente y fácil a la hora de editar. También aprendes a crear un enlace para tu prototipo y compartir ese enlace con tus compañeros de equipo o con usuarios para pruebas de usuario. Aprenderás a invitar a otros a tu diseño y mejores prácticas. Cuando se trata de colaboración dentro de la Fig MMA, también aprendes a exportar activos U Y para ingeniería y a inspeccionar código como CSS y HTML dentro de tus diseños. También te mostraré todos los atajos de higo pero de teclado y cómo usarlos y los mejores que uso día a día. También te mostraré cómo descargar figment plug ins y para ir en línea y descargar kits de gooey . Te mostraré cómo tú o tus compañeros pueden crear comentarios juntos. Y por último pero no menos importante, he creado un archivo Fichman para que descargues y abras dentro de fig MMA que contiene todos los diseños que has visto dentro de la aplicación de pedidos Boba Tea. Ya hay prototipo Listo para ir que puedes usar es una seguridad ahora o despegar si te gusta y usará este archivo de diseño para ir paso a paso y recrear el prototipo que vimos antes dentro del archivo. También tienes todos los activos que viste listos para salir. He escrito todas las teclas rápidas y tengo una lista de mis enchufes favoritos que podrías usar dentro de la Fig MMA. También usa ese archivo para mostrarte las entradas y salidas de cómo funciona el dedo del pie dentro de fig MMA, y hará que el aprendizaje de diseño y aprendizaje figura de la diversión en el sentido que va a pasar y crear juntos en lugar de solo una lista de videos para que puedas ver y hacer en tuyos propios. Y puedes caminar conmigo mientras recreamos toda esta experiencia juntos. Este curso es genial para cualquier persona cuyo diseño de aprendizaje y quiera aprender a crear prototipos una experiencia de usuario o si eres diseñador y ya conoces otras herramientas y quieres cepillar cómo funciona el fig mo mo. Está bien, bueno, gracias por mirar, y ojalá disfruten de la clase. 2. Introducción a la clase para figma y descarga el archivo de clase: Muy bien, Bienvenido dedo del pie. Cómo construir una aplicación móvil Diseño de experiencia utilizando la herramienta de diseño Fig, clase MMA. Mi nombre es Aaron Lawrence, y seré su instructor para la clase antes de entrar en fig MMA y construir la aplicación móvil que compartiré con ustedes en un segundo. A mí me gusta caminar por la agenda para la clase. Entonces el primer video aquí en el que estás en este momento es la intro a la herramienta de diseño de figment y el paso del archivo. Entonces te construí un archivo que descargarás en la clase y te mostraré cómo configurar eso , darte un paseo por ese archivo así como fig MMA, y luego podemos continuar con la siguiente serie de videos, que es cómo diseñar la experiencia de aplicación móvil. Se trata de una experiencia de pedidos de té boba que se comparten con ustedes aquí en un momento que las aplicaciones se dividen en una serie de escenarios que se van a desglosar en una serie de videos. Por lo que el primer video que tendrá después de éste es cómo diseñar el flujo de trabajo de inicio de sesión e inscribirse . El siguiente video será la experiencia del flujo de trabajo de compras. El siguiente video después de eso será la experiencia de flujo de trabajo de check out, y el siguiente video después de eso será la experiencia de flujo de trabajo de perfil. Um, creo que la mejor manera de aprender una nueva herramienta y aprender diseñado solo entra en ella y diviértete. Entonces este no es un video donde vas a tener un montón de instrucciones y cosas que hacer. Simplemente vas a seguir conmigo y vamos a aprender haciendo diseño. Entonces mientras estamos en estos videos on y estos escenarios diseñando, usarás el dedo del pie mutt fig. Aprende a crear y utilizar una biblioteca de componentes. También aprenderás a crear y compartir unos prototipos clicables que disputas el prototipo o lo compartas con tu equipo. Aprenderás a invitar a otros y cómo funciona la colaboración. Dentro de la Fig MMA. Aprenderás a exportar activos U Y y también inspeccionarás el diseño para los atributos de código, y podrías usar esos atributos de código para la ingeniería. Aprenderás atajos de teclado de fig MMA. Aprendes a usar enchufes de figura y a descargar kits de gooey desde línea. Aprenderás a crear comentarios, y también tendrás algunos pensamientos finales y un futuro será el último video allí. Muy bien, Así que antes de mostrarles los bienes y los diseños que vamos a construir en esta clase, solo quiero hablar un poco de por qué Sigma se ha convertido en ah, herramienta de diseño muy popular para las grandes empresas de tecnología y la mayoría de la industria. Y las empresas que utilizan estas herramientas son empresas son Sigma Tool. ¿ Son algunas empresas como Google Twitter, uber Airbnb, Microsoft por decir algunas? Um, pero ¿por qué fig MMA? El de las grandes cosas aquí es que se trata de una aplicación de almacenamiento de archivos basada en la nube. Entonces eso significa que almacena todos tus archivos en las nubes. no hay más administración de archivos tratando de rastrear el archivo más reciente. Um, puedes acceder a estos archivos desde cualquier computadora a través de Internet, por lo que no solo existe en tu computadora. Existen en la nube, y son accesibles en cualquier lugar. Mi cosa favorita de Sigma ser una aplicación basada en la nube es que un auto guarda tu trabajo para que nunca pierdas progreso en tu trabajo. Está guardando constantemente tu archivo en segundo plano, para que nunca tengas el bloqueo similar o el bloqueo de la aplicación, y luego perdiste el trabajo. otra cosa, lo que ha sido muy adoptado a lo largo de muchas de las empresas es que es genial con colaboración, y una de las razones por las que es genial es que usa puedes ver múltiples ratones, y hace que para colaboración en tiempo real. Entonces si otras personas están en la herramienta, puedes ver ahí ratones en la herramienta, y hace que sea realmente fácil colaborar con otros compañeros de equipo. Esto también facilita el uso de ingenieros y PM's. Y es genial porque los ingenieros pueden entrar en tus diseños y pueden esperarlos, y pueden agarrar los atributos del código CSS y copiarlos y pegarlos en su base de código. La otra cosa hace que Sigma gris ¿no? ¿ Vive el prototipado en la herramienta, por lo que no tienes que usar una herramienta para diseñar y otra para crear prototipos? Es una especie de, ah, una parada para todo eso. Hace que ese prototipo sea realmente fácil de compartir, y te da un enlace clicable que puedes compartir con cualquiera de tu equipo o puedes enviarlo a los usuarios y puedes hacer pruebas con ellos. Podrás verlos pasar por el enlace. También puedes descargar la aplicación de espejo de barro fig que te mostraré en tu teléfono, y podrás ver tus diseños que estás creando en tiempo real también en tu teléfono. También hace que um, la creación de componentes e instancias de componentes sea realmente fácil. Te mostraré eso también en esta clase, y hace que crear guías de estilo y estilos de personajes y colores para reutilizarlos durante tus diseños sea realmente fácil también. Pero te aseguro, uh, seguro que estás en esta clase y hace que caiga comentarios para que otros compañeros de equipo tú mismos puedan dejar los cómics en la herramienta en el contexto de tus diseños, lo que realmente hace que sea realmente fácil ver qué las personas se están refiriendo a cuando están dando comentarios a tu diseño, que también te muestran en los videos finales. También tiene un sinfín de espacio de tablero de arte y diseño de página y tiene muchos enchufes que puedes usar para hacer que el diseño sea más rápido. Está bien, entonces es un poco sobre por qué fig MMA, Vamos a hacer un recorrido por la aplicación que vamos a aprender en esta clase. Entonces voy a ir al prototipo aquí y tenemos una pantalla de carga. Es la experiencia de aplicación de té Boba. Y lo que esto hace es permitir que cualquiera en San Francisco se abra para descargar esta aplicación y que le ordenen té Boba y entregue en tiempo real. Entonces, esencialmente, si quiero Boba Tea entregada en mi oficina, puedo pedir un té Boba y puedo tenerlo entregado en mi oficina con en San Francisco en plazo de 15 minutos. Por lo que aprenderemos en el primer video. Después de esto, aprenderemos a construir la página de inicio de sesión de registro que verás aquí. Ya puedes ver que tiene un sistema de tap en la parte superior, izquierda y derecha, y sigamos adelante e iniciemos sesión. Alguien puso mi nombre o mi email mi contraseña en Presione el botón de inicio de sesión fig. Ma también soporta GIF animados para que puedas ver ese pequeño GIF gastador de carga. Te lo mostraré también. Y luego aquí está la experiencia de compra. Aquí están todos los tres Boba o para tés Boba, sabores que tenemos en oferta. Aquí tenemos la barra de pestañas aquí que se mantiene fija, lo que significa que no camina con todo el resto del contenido. Te mostraré cómo hacer eso también en esta clase. Y digamos que quiero pedir aquí una de estas bebidas regulares de té Boba. Sólo tengo que tocar en cualquier parte de esta plaza y se abre la leche regular, compras de té, um, ajustes. Y aquí puedo cambiar la leche si quisiera, tal vez leche no láctea, leche almendras. También puedo cambiar la dulzura regular aquí y los ratones mediáticos. Por lo que en esta experiencia de usuario cambiará el dulce regular a un semidulce. Por lo que aquí también usará el figment para aprender a crear un desplegable móvil, que es una diapositiva aquí arriba que se puede ver. Y cuando hago clic en el semi dulce, se puede ver que el SEMISWEET se ha poblado ahora. Por lo que realmente se siente como una aplicación ah riel, aunque solo son tus diseños. Y estas son las cosas que hacemos para mostrar ingeniería, cómo construir la experiencia, las transiciones y los pequeños detalles que tenemos en nuestros diseños. Por lo que puedes ver aquí puedo seleccionar mis toppings. Los toppings que tengo en selección son tapioca grande, tapioca pequeña o jalea de lichi. Puedo ver el total aquí, y tengo el botón de agregar. Entonces sigamos adelante y sumamos tapioca grande para que puedas ver haber agregado la tapioca grande. He visto subir un poco el precio y voy a seguir adelante y añadir esto a mi carrito. Se puede ver esa transición donde bajó la pantalla. Eso vamos a aprender también en esta clase. Y pude ver ahora que he añadido esto a mi carrito, hago clic en el carrito aquí. Veo que le agregué la bebida de leche, una carrera, leche regular, bebida de té, y puedo editar. Yo puedo quitar esto. También puedo agregar cualquier cantidad, pero estoy bien con ello. Yo sólo quiero que me entreguen un trago. Aquí está el sub total los impuestos, la cuota de entrega, ese total del pedido. Y yo estoy bien para ir. Si quiero cerrar esto, comprimo la X, y la cerrará, um, abajo así y puedo volver a abrirla. Por lo que tu aprendió estos pequeños estados de transición en esta clase también. Entonces sigamos adelante y hagamos lo siguiente y verás Ah, la dirección aquí. Puedo poner la dirección en mi departamento y mi número de teléfono prensa hecho, pero digamos que quería volver en absoluto. Puedo presionar la flecha de atrás. Se puede ver que la pantalla se desliza de izquierda a derecha, y también se puede ver que entra de derecha a izquierda. Aquí. Esos son pequeños detalles de transición que aprenderán también en la clase. Y voy a seguir adelante y poner aquí la información de mi tarjeta de crédito. Prensa hecha. Y pude ver mi tomo mi pedido total aquí en $9.49. Y voy a seguir adelante y pagar y pudimos ver estaban usando ese spinner otra vez al pago de siete ng . Y ya verás ahora veo la entrega de mi té Boba en el mapa en tiempo real. Y bang, está aquí. Puedo decir, OK, lo tengo. Y me lleva de vuelta a mi pantalla de inicio. Yo quiero ir a ver mi perfil aquí. Aiken, Tab más a mi perfil. Ya veo. Ahora estoy en la pestaña de perfil activo. Puedo ver una foto de mí misma. Puedo añadir un cuadro. Puedo editar la información aquí. Ah, y por cierto, esta no es una foto mía. Esa es sólo una imagen aleatoria que tengo de alguien usando un enchufe, um, en fig MMA. Eso es realmente aseado. Es un plug in llamado, um, activos de contenido, que te voy a mostrar cómo descargar y solo tira fotos para ti Realmente fácil. También, ahí está la pestaña de pedidos aquí, y puedo ver mi pedido más reciente fue que un té de leche regular construido, la fecha y el total ahí, y puedo hacer clic atrás en el móvil. T ah, uh, son el icono del té Boba. ¿ Escuchar? Me lleva de vuelta a mi experiencia de compra. Puedo volver a mi perfil, puedo cerrar sesión, y estoy de vuelta en la pantalla de inicio de sesión aquí. Está bien. Bastante impresionante. Entonces esa es una especie de los bienes que gobiernan pasan en esta clase y aprenden a construir. Pero seguir adelante en este momento es lo que tendrás que hacer. Si no lo has hecho ya es, adelante y ve a fig MMA, um, sigma dot com y solo puedes hacer una búsqueda en Google como Sigma descargar y encontrar la descarga de producto. Um, U R L, que es sigma dot com slash descargas y descarga ya sea para Mac o Windows. Estoy usando un Mac, y la mayoría de las personas que hacen diseño trabajan aquí usando un Mac, um, así que descarga la aplicación local para tu archivo de figment y lo verás aquí presionando la descarga. Aparecerá en mi esquina inferior izquierda. Doy doble clic en eso. Se mostrará, pero mis aplicaciones y puedes empezar a usar barro de higo. Lo que es realmente ordenado, sin embargo, también es, um, también se puede acceder a fig MMA a través de la Web también. Entonces puedes ver aquí tengo el archivo cargado aquí en Web y puedo ir por todos los diseños que acabo de mostrarte en Web. Pero para esta clase, lo mejor es usar la aplicación local, así que descarga la aplicación local. Y la mejor parte es que es gratis. No te cuesta nada. De acuerdo, así que adelante y descarga la aplicación si tú, um, no lo has hecho ya y pausas el video y voy a seguir adelante y puedes unirte a nosotros después descargar la fig. Mi solicitud. Muy bien, Ahora que tienes sigma en marcha, adelante y descarga aquí el archivo o carpeta de la clase. Se llama archivo fig MMA para descargar Y una vez que tengas eso descargado, puedes seguir adelante y abrir. Tiene dos cosas en ella. Tiene la figura, un archivo de clase que vas a abrir y fungir. Te mostraré cómo hacer eso aquí en un segundo. Y este es el archivo que vamos a usar para toda la clase. Además, cuenta con las fuentes para el archivo sobre el diseño que estamos haciendo para esa experiencia de aplicación de té Boba . Y se podía ver todas las fuentes aquí. Esto ya debería estar instalado en tu aplicación fig MMA, pero por si acaso no lo es. Usted lo tiene aquí. Puedes estancar esos en tu máquina. Está bien. Antes de que abras este, um, archivo aquí, voy a ir a Fig MMA. Um, principio de sigma se ve algo como esto. Aterrizas en esta página, tienes tus borradores, tus enchufes, tu reciente tu búsqueda. Tienes tu, um, um, tu configuración aquí la mayor parte del tiempo. Voy a entrar en los borradores aquí, y estoy haciendo nuevos tableros de arte. Tu aplicación de tu producto probablemente como la mía porque tiene. Ya tengo muchos archivos que estoy usando, pero podrías hacer el nuevo archivo aquí Y así es como creas un nuevo archivo de trabajo aquí lo has visto, como he hecho aquí. Si hace clic en titulado Aquí, así es como se crea un nombre para ello. Acabas de decir nombre aquí y ahora tengo un nombre aquí, archivo creado. Me meteré en los trabajos internos de Fig Mahir. Um, pero lo mejor es abrir el archivo que he creado para ti, y vamos a repasar todos los detalles y sólo vamos a aprender haciendo lo que creo que es la forma más divertida de aprender. De acuerdo, entonces ahora que estás aquí y tienes el archivo, um, si ya estás en un archivo dentro de fig Ma, puedes venir Teoh esta sección aquí. Entonces ven a esto. Um, hago click en la parte superior, como cuatro cajas aquí. Mi aplicación de figura llega a mi casa como dashboard. Aquí, ve a la sección de borrador aquí, y lo que vas a querer hacer es que vas a querer hacer clic y arrastrar este archivo aquí. Esta figura, un archivo de clase, barra el té boba en este espacio aquí para que puedas ver los reflejos azules. Y así cargarás este archivo y eventualmente tendrás esta figura un archivo de clase aquí. Voy a seguir adelante y eliminar el que acabo de crear llamó nombre aquí. Por eso borrar. Entonces si alguna vez quieres administrar este espacio, solo tienes que hacer clic derecho en diferentes, um, archivos que has creado dentro de fig mond. Puedes eliminarlos, duplicarlos, renombrarlos compartir, um, copiar enlaces, abrirlos. También puedes simplemente abrirlos haciendo doble clic. Entonces una vez que tengas abierto el archivo de clase de figura ocho, solo haz doble clic en él y bang estaban en el archivo aquí, um bueno y me siguió. Vamos sólo al prototipo final aquí, y esta será la buena sección Teoh a la que echar un vistazo. Lo que voy a hacer es que voy a alejarme haciendo ah, comando si estás en un Mac o controlar tu en a en un PC menos así comando menos para mí y ya estoy haciendo alguna funcionalidad básica dentro de fig mo Solo mando menos para alejar comando Plus para acercar. Y si yo quería también, uh, acercar y alejar, puedo mantener pulsado Z y ver cómo eso me da la mi lupa. Y solo hago clic y hago zoom, click y selecciono click y arrastre, y eso hará zoom en el tablero de arte o esta página de arte a cualquier parte de la página. Puedo mandar menos otra vez, y lo siguiente dedo del pie que es importante aprender es si sostienes la barra espaciadora, te da esta manecita, y esta mano, si haces clic y arrastras, te permite moverte este espacio alrededor bastante rápido. Entonces esos son algunos de los fundamentos de realmente cualquier herramienta de diseño. Es tu comando de uso menos comando plus para acercar y a medida que acercas, usas la barra espaciadora y la mano que te dice que muevas las cosas para ayudarte a posicionarte. Y luego puedes mantener presionada la Z para acercar los lugares que quieras ver más. Digamos que quiero agarrar ese Ah, este pequeño ícono de flecha y yo consumo aquí atrás. De acuerdo, así que sigamos adelante y hagamos un paseo por un mahir de higo otra vez como viste antes. Si quiero cambiar el nombre de este archivo de diseño, basta con dar click en la parte superior aquí. Puedo cambiar el nombre. También tengo todas mis capas aquí, cuales te mostraré cómo hacer eso aquí en un segundo. Um, para este sistema de página aquí. Entonces, ¿qué figura te permite hacer primero? En primer lugar es que te permite crear páginas aquí a la izquierda. Se puede ver que tengo el aprendizaje. Paige, aquí es donde vamos a seguir adelante y diseñar que la aplicación de té Boba tiene la biblioteca de componentes. Um, página aquí. Aquí es donde vamos a poner todos nuestros componentes. Eso se reutilizará. ¿ Lo estás? I componentes. Tiene el prototipo final. Esta es la experiencia real de aplicación de té boba que acabas de ver ya construida . Listo para ir en fig, MMA. Por si alguna vez te quedas atascado durante la clase o solo quieres sumergirte en los diseños ya. No he visto cómo los he usado. Um, eso está todo ahí para ti. Tengo los bienes de diseño. Este es un desglose de todos los iconos me gusta y fotos que vamos a usar para esta clase ya aquí. Y también tengo el botiquín. Este es el kit pegajoso del IOS. Y esto tiene todas las funciones para, como, teclados para tus dispositivos iPhone. Um, notificaciones. Todo ahí. No lo usaremos todo. Pero está ahí para ti, um, para futuros proyectos, si necesitas. Entonces lo que podías hacer. Aquí digamos que quiero crear una nueva página. Este es un nuevo flujo de trabajo en el que quiero trabajar. Solo tienes que hacer clic en el botón más aquí, y se podía ver que tengo una página seis. Simplemente voy a llamar a esto como, nueva página aquí y ahora tengo un nuevo espacio de arte al que puedo ir a crear todos mis diseños aquí. Entonces sigamos adelante y ah, borre esta página aquí. Entonces vamos a eliminar a este tipo de aquí. Ya puedes ver puedo borrar página. Puedo renombrar Aiken duplicarlo. También puedo hacer una nueva página también. Simplemente vamos a seguir adelante y borrarlo. Por eso agregas páginas y borras páginas. Ahora que estamos en, um, um, la página de aprendizaje aquí, se puede ver en la parte superior. Aquí tenemos nuestras herramientas. Tienes la herramienta de selección. Algunas herramientas mueven desde herramientas de escala. Tienes la herramienta de tablero de arte aquí. Es una herramienta de marco en la rebanada para, uh, meternos en estos como lo hacemos. Creo que es mejor cuando, um, um, solo un diseño a medida que vamos, y hablaré de estas herramientas Maurin hátilmente a lo largo de los videos de aquí y te mostraré cómo las usamos. Pero aquí está la herramienta de forma para crear rectángulos, líneas, círculos, estrellas del polígrafo. También puedes colocar imágenes. También puedes simplemente arrastrar imágenes y simplemente arrastrarlo a la figura MMA en los DAT. Cómo se puede. Es así como tiendo a colocar imágenes en esta herramienta. Tienes la herramienta de pluma, que te permite crear cualquier forma que quieras aquí, que nos metemos más en, um como usamos la herramienta o como hacemos estas series de videos aquí tenemos el comentario, um, herramienta, que tengo, ah, video hacia el final aquí. Cómo usar esto. Y entonces tenemos los mismos ajustes similares aquí en la parte superior. Tenemos el archivo aquí buscando archivo abierto desde un navegador. Puedes guardar este archivo como ah, como un archivo real para que lo puedas sacar de la nube como lo hice aquí, Um, para los documentos para esta clase, puedes exportar um, tablas de arte y puedes exportar el pantallas como pdf's. Algunas funciones adictas básicas como asiento de comando, un comando de copia V para pegar. Um, y luego tienes algunas áreas de vista para ver rejillas. Se pueden ver capas de vista. Um, un montón de cosas, Mucho como cualquier herramienta diseñada que no uses. Aprenderás todo esto. Simplemente aprendiste lo básico. Y, um, aprenderás a medida que necesites aprender. Entonces te mostraré casi el 90% de la herramienta, um, que uso y todavía hay algunas cosas dentro de ella que no uso. No encuentro todo eso útil para, pero están ahí algunos ajustes de opciones. Tienes algunos ajustes vectoriales de tienes algún vector? Nunca he usado esto para nada. Tan sólo una cabezas arriba. Tienes algunas características de texto aquí? ¿ Nunca podré usar esto aquí? Yo uso el campo de texto por aquí del que hablaré aquí en un momento. Tienes un rango ordenando objetos. A veces usaré esto, pero también uso quickies para estos también. Estos airean cómo el dedo del pie como objetos de capa uno encima del otro y los arreglan. Tienes tus ventanas. Rara vez. ¿ Alguna vez uso esto también? El plug ins o cool. Yo sí uso mucho los enchufes. Entonces, um, tengo un video hacia el final aquí que solo habla de solo enchufes que soy y lo increíbles que son y luego ayudan. Podrías simplemente buscar rápidamente cualquier cosa aquí si quisieras Teoh, um, como teclado. Y te va a dar atajos de teclado aquí, cuales tengo un video encendido hacia el final del cual hablaremos. Entonces si alguna vez te atascas, puedes Puedes, ah hacer la ayuda aquí, está bien, Y entonces Así que sigamos adelante y solo creamos un rectángulo aquí. Se puede ver que he agarrado el rectángulo a que he hecho clic y arrastrado aquí y se podía ver la columna de la izquierda. Aquí hay mucho que ver con mis capas y mis páginas aquí que tú que tengo la columna correcta aquí tiene que ver con lo que sea que seleccione. Para que puedas ver esto es un básico Estoy en la pizarra de arte. Está mostrando mis antecedentes para el tablero de arte, algunos estilos locales. Te mostraré cómo configurar estos en el video. La siguiente serie de videos que harán y hago click en el rectángulo Ver de las cosas de los derechos Va a cambiar Boone. Entonces ahora se ha cambiado a funciones de rectángulo aquí, así que puedo cambiar el ancho de esto. Yo sólo estoy aguantando. Digamos que quiero 20. puede ver que se va a poner muy pequeño. Vayamos como no sé, 2000 si queremos. Y sigamos adelante y hagamos este 2000 también. Tenemos una plaza. Voy a acercar eso. Entonces cambié el ancho y la altura de ese cuadrado. Digamos que quiero a Teoh. Gírala. Esa es la rotación. También puedes simplemente girar con solo hacer clic en el lateral. Aquí, ya ves, cuando mi paso el ratón sobre el costado de cualquier esquina, obtengo una herramienta de rotación, y si solo hago clic y arrastre, gira elementos. Pero si quiero ponerme más específico, puedo dar click aquí para rotar y ponerme más específico. También puedo alrededor de los bordes aquí enfermo y ver si subo aquí alrededor de los bordes y se van a más vueltas, eventualmente convirtiendo este rectángulo en un círculo. Si hago clic en las, um, esquinas independientes, esto permite tal vez solo redondear una esquina a la vez. Se puede ver justo la parte superior derecha ahí se está redondeando y voy a sumergirme en Mawr profundamente en estas , um características a medida que continuamos con la clase. Pero tengo un presentido aquí. Puedo cambiar los colores. Digamos que quiero hacer esto azul. Puedo cambiar un sólido a un Lanier, que es un int Grady, y tengo dos colores. Digamos que aquí quiero cambiar este color y a tal vez algo más Ah, morado Y podía ver su al 0% de opacidad. Aquí hay en el pasado. El deslizador lo hace transparente, y ahora lo hemos hecho. Una flor llena era una especie de color agradable. Tengo mis colores de documento aquí abajo que puedes ver también. Y digamos que quiero agregar un trazo como quiero agregar un trazo negro a esto. Entonces aquí está mi derrame cerebral. Se puede ver lo que hice aquí fue que presioné el plus y he añadido un trazo aquí. Y luego si puedo hacer más el grosor del trazo aquí, puedes ver también puedo hacer lo mismo que hice con la sensación. Puedo cambiar el color de la misma. Puedo cambiarlo de puntera sólida. Lanier tienen diferente resplandor. Es divertido. Simplemente ve a jugar con estos dos. ¿ Qué es yo sólo quiero un sólido aquí. Aquí puedo cambiar los colores. Vamos como un azul más oscuro, ¿de acuerdo? Y entonces tengo la transparencia aquí. Entonces si quiero que toda la imagen sea transparente, puedo empezar a moverla hacia abajo. Eventualmente desaparece, Volviendo de nuevo hacia arriba. Parece que puedo hacer lo mismo con mi sentir. Aquí se puede ver. Sólo estoy haciendo transparente el campo. Bastante simple. Sólo estaban presionando el teclado hacia abajo Arrow. Para ello, también puedes escribirlo. Digamos que quiero, como, 20 ya sabes, voy a volver 200 Yo podría hacer lo mismo aquí por el trazo. Comprimiendo flecha de desplazamiento hacia abajo y estoy viendo un derrame cerebral. Vete por el derrame cerebral. Aiken, haz un interior. Yo puedo hacer un centro. También puedo hacer un exterior sus cosas bastante simples para los efectos. Aquí. Puedes hacer sombras sueltas, cosas así. Por lo que tiene una sombra de gota aquí. Vámonos. Um, aplicar. Coloca sombra aquí lo puedes hacer en nuestras sombras. Predeterminado para soltar sombra. Eso es mayormente lo que la mayoría de la gente usa. Vamos a hacer esto. Um, vamos a empezar con tal vez el 70% aquí sobre la transparencia. Hagámoslo 40 a la izquierda o a la derecha y 40 en la parte inferior. ¿ Qué hay a lo largo? Desenfoque en él y puedes empezar a ver esa sombra caída. Y si quiero cambiar el color de la sombra de gota, vamos a querer poner un poco de azul en esa sombra de gota ahí tenemos un poco de azul en marcha. Voy a seguir adelante y borrar los trazos. Aiken borrar. Yo puedo presionar el globo ocular y eso es simplemente todavía mantiene el trazo por simplemente no lo puedo ver y tú comprimes el menos aquí y yo podría simplemente borrarlo. Entonces ahora solo tengo ah rectángulo y tengo la sombra aplicada al mismo. Voy a seguir adelante y dar clic en este rectángulo y si hago un comando, ver o voy a ello aquí y hago una copia y luego voy a hacer un comando V o editar y pego . Se puede ver que acabo de pegar un rectángulo aquí. También puedo mantener la opción click y arrastrar, y puedo copiar un rectángulo aquí y si mantengo el turno mientras lo hago, lo mantiene en línea. Entonces está exactamente en la misma alineación que la que estoy copiando. Aquí. Se puede ver que no puedo arrancar de esto. Pero si deshago turno, puedo. Pero vamos a seguir adelante y hacer que todos estos no estén un poco alineados aquí. Entonces ahora tengo tres rectángulos y se puede ver aquí en mi panel de la izquierda. Aquí tengo deshacerme de estos. Acabo de presionar. Eliminar. Puedo seleccionar estos rectángulos con solo hacer clic en estas capas por aquí, lo cual es útil, porque a medida que empiezas a conseguir muchos, muchos elementos de diseño yendo a tu página, es agradable saber que solo puedes ir a seleccionarlo por aquí. También puedo mantener pulsado turno, y puedo seleccionar un par de estos. Seleccionarlos todos. ¿ Y si solo quiero uno y tres delgados? Puedo mantener pulsado el comando y sólo puedo seleccionar el uno y tres. También puedo hacer clic en Encuentra el aquí. Uh, click en el propio rectángulo. Dicho turno, Haga clic en otro Y se podía ver Tengo estos dos seleccionados. No este ahora mismo, Sólo estos dos de aquí. Puedo mover a estos dos por ahí. Puedo mantener turno de nuevo y desrecortado Y sólo tengo éste seleccionado. O podría hacer clic y arrastrar, y puedo seleccionar todos estos así como así. Y puedo mantener pulsado, desplazar y hacer clic y arrastrar de nuevo y ver cómo no aislaba las áreas que estoy haciendo clic y arrastrando. Entonces esos son algunos bonitos, como, realmente, fundamentos de cualquier herramienta de diseño es, um, poder seleccionar elementos crear elementos a algún color en algunos, acariciados a algunos efectos, pudiendo seleccionar múltiples objetos. Estos seleccionan múltiples objetos múltiples. Otra cosa que es bastante fundamental para es poder Teoh, alinear estos Así puedes ver he seleccionado los tres de estos y presioné el alineamiento y bang. Todos están alineados en la parte superior. También puedo conducir distribuirlos así que puedo decir ordenado aquí arriba, o es para distribuir el espaciado horizontal. Y hace un espaciado igual de izquierda a derecha y de izquierda a derecha aquí. Muy bien, para que puedan ver el montón de esas funciones que acabo de mostrar que también estaban, um, en el arreglo configurando aquí um, ajustes de objetos aquí arriba. Digamos que tengo Ah, voy a hacer uno de estos sólo negro. Voy a volver a sólido y sólo hacer uno negro, y luego voy a hacer éste aquí. Voy a hacer que éste vuelva a un sólido y sólo haga éste. Um, Cualquier color encontrar por mi hazlo rosa para este caso. Ahora, puedes ver mi estratificación aquí. Entonces tengo el rosa en la parte superior. Tengo al Grady en medio del negro a la izquierda. Quiero cambiar cualquiera de estos anillos de capa. Puedo ir a objeto y puedo ir a llevar al frente. Entonces sea cual sea el objeto que haya seleccionado, he seleccionado esta plaza que podría llevar al frente y se trajeron boom. Llevamos esa a primera plana. Si quiero traerlo, um, sigamos adelante y digamos que quiero traer este rosa ahora. Tengo que objetar. Trae al frente y puedo ver que se ha subido al frente. Ahora bien, si quiero mandar esto todo el camino a la parte de atrás, puedo ir mandar a atrás y él acepta a la parte de atrás. Y si quiero sacarlo uno voy a sacar adelante y ya puedes ver cómo me adelanté eso . También puedo hacer lo mismo haciendo haciendo clic en las capas y arrastrando las capas para que veas estoy arrastrando las capas hacia arriba y voy a llevar el rosa todo el camino hasta la parte superior aquí. Cosas bastante simples. Um, digamos que quiero voltear este elemento aquí. ¿ Qué hacer? Um, voy a hacer que una de las esquinas tenga una forma diferente aquí, y quiero voltearla. Simplemente ve al objeto, ve a voltear horizontal, y verás que se volteará horizontal. O podría voltearla vertical también. Y tengo que también puedo hacer. Su rotación aquí arriba está bien, pero me gusta hacer la rotación con sólo poner mi ratón por aquí y girarlo así como así . Está bien, genial. Entonces eso fue un poco de análisis de los conceptos básicos de fig MMA, la herramienta de diseño. Vamos a hablar un poco de la estructura de este expediente que te he dado. Entonces tenemos las páginas aquí, vamos a crear todo en este aprendizaje. Paige, aquí arriba a la izquierda. Contamos con la página de biblioteca de componentes para poner todos nuestros componentes. Aquí tienes el prototipo final. Entonces esencialmente esta página de aprendizaje que tenemos en la parte superior eventualmente se verá como este archivo aquí desglosado en esos cuatro escenarios que he etiquetado aquí en la parte superior. Estos son sólo un cuadrado con texto en él. Eso, um, me ayuda a organizar mis archivos. Por lo que tienes el registro y el archivo aquí. Aquí tienes los escenarios de orden. El check out aquí y las pantallas de perfil aquí. Entonces, ¿esos ya están todos en el expediente ahí? Prototipos. Ya puedes ver si haces click en la pestaña del prototipo por aquí y yo hago clic y arrastre esto aquí. Es así como prototipamos juntas nuestras pantallas, Lo cual les mostraré en el siguiente archivo o en el siguiente video aquí. Pero puedes ver que todo está aquí para ti. Um, pero la mejor manera ah, tomó para aprender esto es en realidad solo que vamos a recrear esto, pero es que es una red de seguridad. Si lo necesitas, podría tener todos los bienes de diseño por aquí, y así ya siempre tenemos todo lo que necesitas aquí es Bueno, um y sí, y con sin más preámbulos, creo estamos listos para seguir adelante y entrar en la siguiente sección de este video, que es vamos a aprender a empezar a diseñar esa aplicación móvil, y vamos a empezar con, iniciar sesión y registrarnos flujo de trabajo. Entonces de nuevo, quiero agradecerte por tomar la clase y te veré en el siguiente video. Cuídate. 3. Diseñar el inicio y la inscripción de las screens y creación de componentes y la creación y la animación inteligente: Muy bien, bienvenidos a la siguiente clase. Entonces esta va a ser la divertida serie de videos donde lleguemos a diseñar esa aplicación móvil . El té Boba app de pedidos bajo demanda que viste en el último video. Y lo que vamos a hacer es empezar con, iniciar sesión e inscribirnos en el flujo de trabajo. Y mientras estamos haciendo eso, aprenderemos a crear y usar una biblioteca de componentes y también aprenderemos a crear y compartir el prototipo clicable también. Adelante y empecemos. Um, lo que vamos a hacer aquí es ir a los bienes de diseño aquí que tienes y lo que quieres hacer aquí es si sacas el zoom de este tablero de arte aquí, el que dice que los bienes de diseño no hacen clic en el interior tu hace aire pinchando en , haga clic en el propio tablero de arte. Se puede ver aquí esta mercancía de diseño o puedo hacer clic en la capa aquí a la izquierda que dice bienes de diseño. Y eso es dar click en todo el tablero de arte. Adelante y haga clic que pueda hacer un comando, ver o controlar. A ver si estás en un PC. Pero comando, mira, para Mac o puedes ir a editar copia, pasar a la página de aprendizaje aquí y seguir adelante y ritmo eso. Copia eso otra vez y pega eso aquí para que puedas ver los todos los elementos que vamos a usar para esto. Está bien. Y las páginas que vamos a diseñar aquí son la figura fuera del enlace prototipo final . Aquí te dejamos todo este Siri debajo de esta barra negra que dice registrarse e iniciar sesión. Todos pueden ver aquí mismo, así que no los copie. Um, voy a traer algunos de estos elementos aquí. Sólo para que me recuerde qué mostrarles a medida que continuamos nuestro viaje en la construcción de esta aplicación. Está bien, vámonos. El prototipo final. Te voy a mostrar muy rápido cómo se verá esto en la versión final de este video . Vamos a hacer una pantalla de carga con el mapa. Vamos a hacer el login, registrate pestañas así como esta. Y luego vamos a crear estos formularios aquí y dar click o tocar en el email y el formulario de nombre toque en el teclado, pone el correo electrónico, pincha en la contraseña, abre las entradas de contraseña que no puedes vivir tipo en fig. MMA no tiene esa funcionalidad donde pueda, como, vivir, escribir algo. Entonces estás especie de prototipado o burlándote de cómo se verá esta experiencia una vez que se desarrolle , y luego podrías teclear en el teclado. Pero la mayoría de las herramientas de prototipo no tienen esa funcionalidad a menos que estés usando código real. Y así llegaremos a este punto, um, um, y vamos a seguir adelante y nos detendremos ahí. De acuerdo, entonces lo primero que vamos a hacer, um, que vamos a aprender es cómo crear un tablero de arte. Así que adelante y pasa a la página de aprendizaje aquí, y lo que vas a querer hacer es ir a la parte superior izquierda. Aquí. Ahí está esta herramienta, que se llama el marco. Da click en el marco y verás a la derecha aquí funciona como se diseñó. Tendrás una lista completa de, um, um, tamaños de tableros de arte que puedes crear fácilmente dentro de fig MMA. Por lo que tiene teléfono tiene tabletas aquí, ver de iPad. Mini iPad Pro cuenta con escritorio. Estás buscando un diseño para un libro de Mac. Libro MacBook Pro Surface. Un yo Mac ha visto plantillas aquí tiene papel, tiene redes sociales para este caso se puede. También puedes simplemente hacer clic y arrastrar y hacer cualquier tipo de tamaño de tablero de arte que quieras. Y podrías manipular los tamaños con con y altura aquí. Así que digamos que quiero que este tablero de arte sea 100 por 100 especie de tablero de arte más pequeño a partir de un zoom en eso bastante simple otra vez. Podrías simplemente hacer click aquí, crear el marco para nuestro, um, cualquier marco que quieras. Pero para nuestros propósitos aquí, voy a seleccionar estos dos son tableros y eliminarlo. Aquí vamos a usar el iPhone X. Entonces vamos a ir al, um, um, el iPhone 11 pro X y sólo tienes que hacer clic en él y puedes verlo automáticamente agregó el tamaño de tablero de arte afiliado a un iPhone X que tienes. También puedo mover esta nuestra pizarra por ahí con solo hacer clic en la parte superior y arrastrarla. Entonces voy a seguir adelante y ponerlo aquí, ¿ verdad? Y lo primero que quiero hacer en este tablero de arte, una vez que lo tenga seleccionado es que quiero venir a la sensación aquí, y quiero dar click en el campo y voy a hacer esto todo negro. Así que arrastra este punto aquí, todo el camino hasta la tasa inferior. Y lo que eso hizo es que creó el fondo de esto para ser negro. Puedes cambiarlo de cualquier color si lo deseas. Vamos a usar el negro para este ajuste. Por lo que en este momento acabas de aprender a crear un hombre, un tablero de arte que es específico de un tamaño de pantalla del iPhone 11. O puedes crear cualquier tablero de arte de tamaño que te gustaría. Y luego aprendimos a agarrar que están aburridos Aquí, puedes ver que hay una capa, um, um, en nuestro nuevo tablero de arte por aquí, capa. Si hace clic en esta capa, podemos nombrarla. Adelante y ponle un nombre a esto. ¿ Qué dicen esto es la pantalla de carga y puedes ver aquí puedo cambiar el relleno, así que solo hago clic fuera de ella. Haga clic de nuevo en él. Puedo cambiar la sensación aquí. Está bien. Lo siguiente que quiero mostrarles es cómo guardar o cómo crear un y guardar un color para reutilizar a lo largo de esta experiencia. Entonces tenemos el negro, que es un color hexadecimal. Um lo tenemos. 000000 es el tono hexadecimal que vamos a hacer aquí es vamos a dar click en los pequeños cuatro puntos aquí que ves, y tenemos una cosa llamada estilos de color. Ya tengo algunos aquí etiquetados Puede que no tengas ninguno en este momento, y eso está totalmente bien. Vamos a hacer esto juntos. Así que adelante y pulsa el botón más aquí, mira donde dice crear estilo. Y lo que eso va a hacer va a crear un color negro para que podamos reutilizar. Entonces llamemos a esto negro y sigamos adelante y presionemos el botón crear estilo sobre obedecer el boom de bada . Y tengo un estilo negro aquí si quiero en este estilo negro, todo lo que tengo que hacer es dar click en él. Si hago clic en el tablero de arte aquí, Um y yo no tenemos nada seleccionado en la pestaña de diseño. Simplemente me muestra mi tablero, que muestra todos los estilos, incluyendo el color y los textiles. Probablemente aún no tengas textiles. Eso está bien. Vamos a armar estos juntos. Entonces si quiero cambiar el negro aquí, solo hago doble clic en el negro click derecho sobre el negro y luego verás este pequeño ajuste aquí, presiona la configuración y puedo cambiar esta propiedad negra y ver cómo cambia ya en mi tablero de arte. Entonces, dondequiera que viva este color negro, tengo muchas tablas de arte. Puedo cambiarlo en un solo lugar, y cambiará a lo largo de todas las pantallas, lo cual te mostraré aquí en un minuto. De acuerdo, entonces, um, ahora tenemos nuestra primera pantalla con el fondo negro. Lo que vamos a querer hacer aquí es pasar a la sección buena de diseño y agarrar la información. Es la configuración y la batería y el tiempo que vive en tu iPhone, y puedes ver la pestaña aquí. Conseguí esto del botiquín. Si vas a la página de diseño aquí y puedes ver todos estos ajustes aquí para la barra de estado , um, um, el porcentaje de configuración del WiFi tiempo de batería, todo esto cambió a lo largo de tu cuando estás usando un iPhone. Normalmente solo voy con el tiempo en la batería en la parte superior, y hace que se sienta más como una aplicación riel en vivo que estás usando, que es el objetivo de estas herramientas es toe imic software real a pesar de que es solo diseños de pantalla lo que nos permite probar y aprender rápidamente en un analfabeto rápidamente y luego finalmente construir estas experiencias de aplicación con ingenieros con código real y eventualmente obtener una aplicación para comercializar y crear negocios. De acuerdo, entonces volvamos a nuestra pestaña de aprendizaje aquí. Ya he creado el que va a necesitar. Entonces solo si haces clic en él aquí y vas adelante y haces un comando, ve y vuelve a tu tablero de arte aquí, puedes ver que estoy haciendo zoom en la celebración de Z, y luego estoy usando mi barra espaciadora otra vez para moverme. Alguien incluso zoom aún más apretado aquí con sólo mantener pulsado Z haciendo clic y arrastrando. Y voy a ritmo esto. Alguien haga un comando V o puedes ir a editar pegar hasta ti que pegó eso. Aquí. Voy a poner eso en la parte superior aquí, así como esto. Eso debería estar bien. Es posible que veas que esto ya está a la derecha. Seleccionado. Tiene la posición fija al desplazarse, asegúrese de que la casilla esté marcada. No queremos que esta barra de estado se mueva por ahí. Queríamos mantenerlo fijo. Eso siempre se queda en esa posición en la parte superior de tu dispositivo iPhones. Voy a alejarme haciendo un comando menos aquí. Y lo siguiente que vamos a hacer aquí si quieres. Si quieres volver a la pestaña final del prototipo y solo checa qué somos lo que estamos construyendo aquí. Um, estamos construyendo esta pantalla aquí. Tiene el mapa. Tiene la barra de estado tiene este icono fresco este té Boba tiene el logotipo del té Boba y tiene este texto cargando aquí. Volvamos a la página de aprendizaje aquí. Vamos a agarrar este mapa Aquí. Tengo el que ya ha sido recortado y te mostraré, um, cómo recortar esto si quieres conseguir esta sección aquí. Así que adelante y agarra la imagen a la izquierda. Aquí, se puede ver que hay una cosecha a la que llamé en la parte superior. Adelante y da click en eso y puedo tirar de esto ahora y puedo recortar una imagen que puedes ver aquí he recortado una imagen prensa retorno y lo recorta presiona comando Z o editar deshacer. Y se remonta a los pasos que he hecho. Si vas turno de mando. Ver, que es redo se puede ver aquí. Y espesor. Agradable. Porque tiene estos, Um tiene las teclas rápidas aquí, junto a tus funciones. Entonces a medida que te acostumbras tanto esto es mejor empezar a aprender los quickies encendido. Y puedes moverte a través de esto bastante rápido. Alguien un turno de mando. ¿ Ver? Y he recortado esto aquí abajo. Ahora, si también quiero mover la imagen dentro de este cultivo hacia abajo, puedo seguir adelante y volver a hacer clic en la herramienta de cultivo. Y con sólo hacer click en el interior de mi cultivo, puedo mover esta imagen alrededor. Y si también quiero volar un poco esta imagen, puedo agarrar las esquinas de esta imagen, y la puedo escalar. Por lo general, cuando estás escalando, lo mejor es mantener el turno para que no, um, deformes tu imagen. Entonces si mantienes turno, sostiene la perspectiva de tu imagen. Algunos manteniendo turno ahora mismo al arrastrar mi ratón arriba y abajo y estoy disminuyendo y al revés . Es que estoy escalando mi imagen. Está bien. Lo siguiente aquí es que puedes ver Cuando entré en la herramienta de recorte, automáticamente abrió las funciones de imagen aquí, Así que déjame hablar un poco de eso aquí en un segundo. Entonces si voy al Phil aquí tiene la imagen en esta caja y hago click en ella, puedes ver que estoy en la zona de cultivo ahora mismo. También puedo cambiar esto. Puedo encajar la imagen a ese cuadrado. Puedo sentirlo. Entonces se siente la plaza. Entonces lo escalo. Es sentir que el espacio lo puedo azulejar, que nunca usaría realmente, pero va a azulejar la imagen. Entonces si lo escalo así, se puede ver un poco fresco todo el azulejo que está pasando. El estilo es algo así como tu azulejo de piso. Ya sabes, está tomando sección ah, y lo está copiando todo el camino vertical y horizontalmente. También tengo algunos ajustes de imagen del motor aquí. Permítanme agregar, um, el color dentro de esta imagen, y puedo retroceder un poco la transparencia aquí. Nunca usé estos, um, um, así que suelo mantenerme alejado de estos. Um, sigamos adelante y regresemos. Um, así que si regresara y quisiera llenar esta forma del color, lo puedes ver, Rellenarlo con el color volvería a la imagen aquí. Siempre lo guardo en imagen. Nunca usé realmente azulejo que a menudo tampoco. Um, usualmente solo lo configuro para tener ah fit y podemos volver a nuestra cosecha si quisieras recortar a este tipo otra vez. Une Zewe para cambiar tus imágenes. Aquí es si hago click en esta imagen, mira donde dice elegir imagen. Puedo hacer click y puedo seleccionar otra imagen. Digamos que para este caso voy a seleccionar una de mis, uh, imágenes aquí. Vamos seleccionable bit t imagen así y acabo de intercambiar esta imagen. Pero es, um está siendo en forma y recortada dentro de ese espacio para que puedas ver que está interpolada un poco la imagen . De acuerdo, algunas funciones básicas de imágenes y recorte. Sólo voy a volver al espacio que tenemos aquí. Pero por el bien del diseño, sigamos adelante y agarremos esta imagen que ya recorté y vayamos a pegarla en este tablero de arte. Entonces si quiero pagar algo en un arte nacido de nuevo, hice clic en la parte superior izquierda que es el tablero de arte. Ah, Capa. Y yo hago un comando V. Puedes ver puedes ir a pegar Aquí está bien comando V. Y ahí está el mapa. Ahora quiero establecer este mapa. Um, debajo de la ah, podría ver que debería estar por debajo de la barra de estado aquí, que es. También quiero bajar un poco la transparencia sobre ello. Para que veas que voy a seguir adelante y bajar la transparencia. Digamos que aquí alrededor del 20%. Sólo estoy presionando. Desplazamiento hacia abajo, cambio hacia arriba. Si deshaces turno, te da el ah real, incrementos. Y si mantienes turno, te da incrementos hasta el 10. Por lo que 2030 40 50. 60. Haz 20 aquí. Eso se ve bien. De acuerdo, Ahora, vamos a agarrar el logo del té Boba aquí en todo uhm rosa. Entonces voy a agarrar ese comando de prensa V. Voy a volver a mi tablero de arte aquí. Voy a pegarlo justo en el centro. Se puede ver automáticamente alinearlo, um, horizontal verticalmente centrado para mí o horizontalmente centrado. Y justo por ahí sí tiene que ser perfecto. Al igual que eso está bien. Lo siguiente que voy a añadir para esta pantalla de carga es que voy a volver aquí. Voy a agarrar esto. Ilustración del té Boba aquí. Comando Atrapado. ¿ Ver? Copiarlo. Voy a reventar por aquí, y voy a pegarlo justo encima. Comando V segunda copia es comando C y Pegar Comando V. La próxima vez que vamos a hacer es voy a usar la herramienta de texto. Entonces la herramienta aquí está en la parte superior izquierda Que tiene el té en él es el textil. Voy a dar click en él. Y así es como puedo crear tipografía en mi aplicación. Por lo que ahora he hecho clic en él. Voy a dar clic y arrastrar en el withs de mi tablero de arte aquí así como esto. Y voy a teclear la palabra cargando y hacemos tres puntos. También voy dedo del pie cambiar esto, Phil aquí en el dedo inferior blanco para que veas que se está cargando ahora. Y vamos a entrar en algunos atributos de texto, um, y funciones de texto que podemos hacer ahora mismo presionando la sensación en el texto aquí. Yo puedo cambiar esto. Cualquier color que yo quiera. Tengo la barra de colores aquí. Arrastré este Aiken seleccionar colores y también puedo hacer transparencias aquí, todo dentro de este ajuste de color y similares a los colores que ah, son los, um, los cuadrados que te mostré en el pasado video donde te podría hacerlos Grady intel cerca , Um, puedes hacer eso así como texto. A pesar de que no lo recomendaría. Normalmente no pongo resplandor y texto. Um, la mayor parte de su diseño sirve a la comunicación. Entonces, um, cuando tu tipografía ah, tiene a Grady en el Senado y hace un difícil de leer. Y el objetivo de la tipografía es Teoh es leerla y ayudar a educar, um, la persona que usa esta aplicación o dándoles contexto. Entonces, um, otra vez. Y no uses las hormigas lineales Grady nada así para tu Texas. Usted sólido. Voy a usar el blanco por ahora. Ahora, sigamos adelante y digamos, quiero volar esto un poco. Quiero hacer este tamaño de texto más grande. Alguien cercano. El Phil aquí no tengo que hacer es seleccionar el cuadro de texto que tengo y ver aquí donde dice 15. Puedo empezar a golpear eso. Hagámoslo 18 y puedes bajar en él también. Es así como disminuyes e incrementas fuentes, tamaños de fuente, esta de abajo. Se llama espaciado entre letras, y ese es el espacio entre las letras. Yo quiero subirme un poco eso. Hagamos como ocho ahí un poco más fácil de leer cuando está espaciado así. De acuerdo, Y sigamos adelante y pongamos este, um, texto aquí para tener una transparencia a su, digamos, 50% transparente. En realidad, no, lo Guardémoslo 100 y en realidad vamos a escoger. De acuerdo en que podemos usar. Entonces cada vez que usamos pastoreo, típicamente me gusta poner un poco de color azul en mi gris versus simplemente gris. Um, la coloración azul ayuda a agregar un poco más de tono moderno a la aplicación, Así que voy a escoger. Um, cualquier gris azul como este está bien. Cualquier azul funcionará para. Puede ser como un azul frío o un azul más oscuro, o incluso un azul azulado si quieres, pero simplemente ve con el azul normal. Digamos que un poco más tarde. OK, hagámoslo bien. En este punto, quiero guardar este color, así que quiero volver a utilizar este color. Entonces cómo lo hizo antes es. Hacemos click en los cuatro puntos aquí, el menú para rellenos. Y tuvimos ese pequeño plus aquí en una prensa plus Y voy a llamar a esto gris fresco. Puedes darle cualquier nombre que quieras, McCall Mind cool, gris. Y voy a crear este estilo. Y ahora puedo reutilizar este estilo en cualquier momento que quiera. Se puede ver cuando hago clic en él, tiene el color gris frío. Si no quiero usar ese color, por ejemplo, quería probar otra cosa. Da clic en este desprendimiento aquí y ahora lo separa. Y puedo volver a la configuración de color normal que teníamos. Pero no quiero hacer eso. Yo sólo quiero mantenerlo tan fresco. Gris por ahora. Muy bien, genial. Por lo que tenemos la pantalla de carga aquí. Voy a revisar mi lista de chequeo para asegurarme de que te mostré todo lo que pasamos solo en esta pantalla. Lo que aprendimos fue, um, algunos ajustes de tipografía. Aprendimos algo de color a usar InTs Grady, re dimensionamiento, recorte de texto e imágenes, creando estilos de color. Um, y luego nos meteremos en, um creando algunos de los componentes en el siguiente verde aquí, yo sólo La siguiente pantalla que vamos a construir es si hace clic de nuevo en el prototipo final aquí, voy a mostrarte. ¿ Es éste Boba? Date de alta e inicia sesión en pantalla aquí. Volvamos a nuestro aprendizaje Paige aquí. Está bien, Así que ahora ya no hemos sido bordo. Se puede ver aquí que tiene el fondo negro y algunos, um, y la barra de estado aquí un oleaje. En lugar de crear otro tablero de arte nuevo mediante el uso de la herramienta de marco aquí, Lo que realmente queremos hacer es solo queremos copiar este tablero de arte. Entonces hay un par de formas en que podemos copiar esto puedo dar click en la parte superior aquí. Se puede ver cuando se hace click en el tablero de arte en los reflejos azules versus cualquier cosa que yo soy. Ah, quiero hacer click en y seleccionar dentro del tablero de arte en sí. Pero en este caso, queremos seleccionar todo nuestro tablero. 2do 2do click, puedo seguir adelante, mover y arrastrar que nuestro informe alrededor. Pero quiero copiarlo para que un día pueda hacer es poder hacer un comando, ver, ver, y puedo hacer un Comando V. Y copia la pizarra de arte automáticamente para mí y lo coloca derecho a la derecha de eso, um, nuestro tablero a la izquierda. Aquí, se puede ver otra forma en que podría hacer esto es que puedo hacer click en la pizarra de arte, Opción Hold hasta que consiga la flecha doble. Aquí se puede ver la flecha doble clic y arrástrela hacia la derecha y luego soltarla. Y cuando lo suelto, también lo he copiado. Entonces una vez más en esa. Doy clic y mantenga la opción hasta obtener la flecha doble. Y cuando sostengo turno, mantiene esto alineado para que no pueda moverme. Puedes enviar moviendo mi ratón hacia arriba y hacia abajo, pero no voy a dejar que quite este tablero de arte de la alineación donde si deshago turno, puedo moverlo tanto como quiera a alguien ahold turno porque quieres tus tablas en línea. ¿ Quieres tener un diseño limpio organizado, um, um,? Correcto, Así que ahora tengo la nueva pantalla de carga. Llamemos a esto carga. Llamemos a esto la pantalla de inicio de sesión aquí, así que si solo haces doble clic sobre la capa y lo haces, Inicia sesión. Bueno, inicias sesión y te inscribes porque está a la vez Muy bien, Cool. Entonces este punto, empecemos a quitar algunas cosas. Entonces quitemos el té boba. Quitemos el mapa. Voy a quedarme con esto. Um, esta carga en realidad lo eliminaría para empezar de nuevo. Está bien, Genial. Entonces sigamos adelante y agarremos el logo que tenemos aquí que tiene el blanco y veamos aquí y hagamos un comando. ¿ Ver? Copiarlo. Voy a Es pan sobre el otro tablero de arte que tengo aquí y hacer un comando v Muy bien. Al igual que eso. Y lo siguiente que quiero hacer es que quiero agarrar aquí la herramienta de texto, y quiero crear las pestañas de registro y de inicio de sesión. Entonces hice clic en el textil aquí. Voy a dar clic y arrastrar a algún lugar. El medio está bien. Voy a escribir inscribirme. Voy a hacerlo todo gorras que acabo de escribir con mis bloques de gorra puestos. Haz este blanco y puedes cambiar fácilmente el texto aquí haciendo. Puedes cambiar las mayúsculas de texto aquí con el menú de texto en la parte superior yendo a mayúsculas originales , puedes hacer minúsculas aquí o mayúsculas también. Yo quiero conservar mi número. Caso. Está bien, genial. Por lo que nos hemos apuntado aquí y lo que lo tengo está establecido en Roboto Bold 19 puntos. Sigamos adelante y creemos esto como un estilo de personaje que podemos usar y reutilizar a lo largo esta aplicación. Entonces cómo hacer eso es similar a cómo creamos el estilo de color. Vea un poco de cuatro puntos aquí a la derecha en este cuadro de diálogo de texto. Voy a dar click en él y ya tengo algunos textiles y estilos de carácter ya creados aquí. Puede que no lo veas, um, pero lo que podrías hacer aquí es crear uno nuevo y solo llamemos a esto. A veces sólo les nombro lo que son. Se trata de una altura de 19 puntos o píxeles en el punto correcto, y es negrita. Ahí lo tienes. Ahora por qué eso es útil es, digamos que vuelvo a usar la herramienta de texto. El comando rápido Etem a utilizar para agarrar la herramienta de texto. Bastante simple, su té y se puede ver cuando se cierne sobre él. Te da el quickie. Algunos de Presti. Si tan sólo escribo algo otra vez. Entonces digamos que voy a hacer esto fuera del tablero de arte aquí. Entonces hago el texto aquí, y solo escribo uno. Si creo hombres, gire esto, um, um, dedo del pie minúscula también. Está bien. Y si selecciono esta fuente y entro en el texto aquí y agarro esos atributos que creamos el estilo del personaje dicen 19 puntos en negrita, está configurando automáticamente ese personaje, y puedo cambiarlo a blanco. Y tengo el mismo tamaño de fuente y carácter y textil que el que he creado aquí . Date de alta. Correcto. Entonces lo que voy a hacer es copiar este cartel aquí arriba. Voy a mantener la opción, hacer clic y arrastrar a la derecha, y puedes ver y decirle a esos que se reúnan justo en el centro. Se puede ver ahí mismo, y se romperá aquellos que encuadernación caja. Ese cuadro de texto para inscribirme que acabo de copiar se ajustará al original del que copié . Voy a agarrar los dos y solo voy a usar mi tecla de flecha en mi teclado y solo mover los hacia la izquierda un poco solo para que ambos estén alineados y se pueda ver que ambos están centrados en la página. En este punto, voy a volver a escribir en ley. Y ahora voy a romper este estilo y hacer su desde el cuadro de diálogo textil de carácter aquí y convertirlo en un real regular. Vamos Sí, hagámoslo regular. También lo voy a cambiar a alrededor del 40% de opacidad aquí, para que se pueda ver eso. Por lo que una vez más he agarrado el inicio de sesión. Lo he desprendido del textil que hemos tenido canta al estilo desligado. Ahora, esto me permite hacer cualquier culpa que yo quiera. Se quiere elegir otras fuentes, se puede entrar y selectiva sus fuentes, pero estamos usando Roboto para este caso, y voy a cambiarlo a un regular. Incluso puedes hacer luz si quisieras. Vamos con la luz. Voy a quitar la opacidad a 40. A lo mejor hacer 50. Ahora, eso se ve bien. De acuerdo, Lo siguiente que voy a hacer es agarrar la herramienta de rectángulo. Entonces tengo en la parte superior izquierda aquí, y voy a crear una pequeña línea. Entonces lo que hice fue agarrar la herramienta de rectángulo. Acerqué un poco y he hecho clic y arrastrado y he hecho una pequeña línea aquí donde rectángulo aquí muy delgada. Ahora lo que voy a hacer es cambiar este color para que sea este rosa. Entonces lo que podría hacer es que quiero ah, color que estoy viendo ya en mi diseño, puedo intentar seleccionarlo aquí tratando de igualarlo. También puedes simplemente agarrar el cuentagotas aquí y pasar el cursor sobre cualquier color que quieras y dar click en él. Y automáticamente hará este color para ti Otra forma. Puedes agregar el color aquí es que puedo hacer click en este elemento puedo copiar y ritmo. Es valor hexadecimal por aquí comando. Ves, puedo hacer click en este nuevo rectángulo que he creado y puedo mandar v press return en el teclado, y tengo el mismo color. El modo en que me gusta hacer esto es que sigamos adelante y creemos un estilo de color. Entonces ahora que tengo el auto que voy a reutilizar y este va a ser un color de acción, Entonces este es el color que son botones. Van a ser en su mayoría cualquier cosa que se pueda hacer clic en la aplicación que queremos crear con este color de acción primaria. Entonces ahora tengo el color. Voy a seguir adelante y dar clic en nuestro crea estilo aquí, y C ya tenía uno creado Lo ha vuelto a crear. Voy a llamar a este color de acción primaria. Voy a crear ese ahí para que veas este nuevo color que tenemos aquí en la segunda línea. Está bien, genial. Por lo que ahora tenemos el registro y el inicio de sesión yendo. Volvamos al prototipo final aquí. Vamos a ver el apuntalado. Por lo que teníamos nombre apellido correo electrónico contraseña aquí. Y aquí es donde vamos a entrar en la creación de algunos componentes aquí, que esta es una pieza realmente importante check out toe piece. Vamos a crear estos campos de formulario. Volvamos a nuestro aprendizaje aquí. Y lo que voy a hacer es que voy a usar la herramienta de línea, Así que voy a ir donde pueda seleccionar el rectángulo. Basta con dar click en él. ¿ Ves el desplegable? ¿ Ves la herramienta de línea? Sólo voy a hacer una línea, no de borde a borde, sólo una especie de dentro de algunos límites. aquí. Dale algo de espacio a la izquierda y a la derecha a la pizarra de arte. Si sostengo turno , me dará una línea recta. Si no sostengo turno, se puede ver que da líneas torcidas. Queremos una línea realmente recta aquí, y voy a seguir adelante y hacer esto, um, blanco. Entonces sigamos adelante y agarramos blanco y otra vez, voy a hacer blanco ah, atributo de color que podría reutilizar y volver a seleccionar. Entonces, solo llamemos a esto blanco. Hace que sea realmente fácil para mí seleccionar esto, ¿verdad? Por lo que ahora tengo Blanco es un estilo. Es demasiado fuerte para ahora mismo. En lo que respecta al color, vamos a tirar de esto hacia atrás en transparencia. Hagamos esto como 20% aquí. Muy bien, 20%. ¿ Qué es bastante bueno? Entonces ahora te estás quedando el colgado de ello. Um, tenderé a disminuir un poco, también, también, medida que vamos. Um, ojalá esté al ritmo adecuado para que sigas cuando si tienes que hacer una pausa y algo así hacerlo por ti mismo y volver y presionar play, eso está bien, también. Es lo siguiente que quiero hacer. Aquí te voy a copiar sobre esto. Date de alta aquí. Imágenes clicar y arrastrar. Opción Hold. Copiarlo así y ver cómo se centra. Significa que tiene un ajuste de párrafo centrado. Donde si jalo esta caja, va a centrar el texto dentro de ella. Yo quiero me dejó una línea. Esto así no línea senadora, pero salió de la línea. Y cómo hago eso aquí es que se pueden ver las pestañas de alineación a la derecha. Si hago el correcto, se alinea a la derecha su centro. Queremos izquierda una línea. Sí, así como eso. Eso se ve bien. Y pongamos este título tu nombre de pila, todos gorras. Voy a centrarme. Voy a disminuir un poco la altura. Está bien, eso se ve bien. De acuerdo, así que ahora vamos a crear realmente un componente. Entonces esta es, um, una pieza importante de cómo hacer el diseño de múltiples tableros y aplicaciones de arte. Um, realmente fácil y eficiente cuando quieres hacer cambios a través de más de un tablero de arte. Entonces lo que voy a hacer es copiar este, uh, uh, nombre el campo de texto aquí y esta línea cuando una copia, hombre C y yo vamos a venir a mi página que creé aquí llamada Biblioteca de componentes. Y vamos allá. Lo voy a pegar aquí. Puedes ver que tienes el nombre de pila en la línea aquí. Ahora, voy a llamar. Esto volvería a donde escribí el nombre de pila, y lo voy a llamar título. Asegúrate de que tu cuadro de texto dos escalas. El tonto contigo no quiere tu cuadro de texto así. Um, eso ¿Por qué quieres el completo con de la línea que tenemos aquí? De acuerdo, entonces voy a seleccionar la línea y el título. Y así es como creamos un componente. ¿ Ves este pequeño icono en forma de diamante en la parte superior? Adelante y haz click en eso, y podrás ver cuchillo seleccionado. Ha cambiado la selección de un azul que se ve aquí a un morado. Eso significa que este es el componente maestro ahora, Así que queremos cambiar este nombre a forma. Lo vamos a llamar forma predeterminada. De acuerdo, Entonces lo que vamos a tener es que vamos a tener esta página que se llama Biblioteca de componentes la izquierda, y eso va a albergar todos nuestros componentes que vamos a usar a lo largo de este diseño que estamos creando aquí. De acuerdo, así que tengo la biblioteca de componentes. Hemos creado nuestro primer componente. Se puede ver aquí formulario predeterminado. Vamos a usar este componente. Entonces ahora estoy en esto de vuelta a nuestra capa de aprendizaje Paige aquí. Si voy a activos, puedes ver un feliz aquí, y hago clic y arrastro este componente a mi tablero de arte. Y ya ves cómo tiene una selección púrpura y no una selección azul, porque el morado es mi componente. Lo que voy a hacer es eliminar el nombre que hemos creado, y lo voy a reemplazar por el componente. Entonces eso es bastante común. Lo que haces es crear un elemento u I, y cuando debes crear un componente es siempre que copie algo. Entonces si quiero copiar esto y decir, Ahora, Ahora, haz un apellido en ese punto, no debí haber copiado este componente o este, um, este um, tú formo rellené aquí y lo duplicé y cambié el nombre. En ese punto, debí haber creado un componente y empezar a usar componentes. Entonces lo que no quieres tener es que no quieres terminar con todo un montón de formas como esta que son todas individuales, que no puedes cambiar desde una vista maestra. Y te mostraré cómo hacer eso aquí en un segundo. Entonces volvamos a casa en un comando Z retrocedemos un poco y otra vez, Fig debe salvar esto todo el tiempo. Podría ir archivo y podría decir, um ya ves, no hay salvamento aquí. Puedo hacer un comando s, que es el atajo para guardar, y ya verás aquí. Dice figura fig, MMA auto guarda tu trabajo y me da un poco de señal de paz. Y siempre ponen diferente. Um, yo lo llamo como pequeños ah emojis adentro. Siempre que haces un comando, mira, ellos igual que, al azar ponen cualquier emoción que quieran. Solo somos amables. Por lo que solo te están haciendo saber que ya ni siquiera guardas tu trabajo. Me gusta simplemente lo guarda automáticamente para ti. De acuerdo, entonces ahora tengo mi componente otra vez. A qué accedo yo que fue movido de mis capas aquí a mis activos, y hice clic y arrastré mi componente al tablero de arte igual que así. Y quiero reemplazar este nombre usted. Por qué eso he hecho con el componente aquí, y voy a hacer clic en este componente, y voy a cambiar el título del nombre de nuevo a nombre. Muy bien, entonces ahora tenemos un componente cuando hizo que vive en esta biblioteca de componentes y tenemos una instancia que significa una representación infantil de ese componente maestro viviendo aquí en este tablero de arte . Entonces ahora lo que voy a hacer es copiar este componente, y ahora voy a crear más instancias arriba, y les voy a mostrar por qué. Es importante que nos detengamos e hiciéramos un componente antes de copiar el texto original y línea que creamos anteriormente. Entonces ahora que tenemos nombre, voy a cambiar este dedo del pie apellido, Haz eso también para ser un segundo. Está bien. Y vamos a copiar esto otra vez y ya pueden ver que me está dando incrementos de espaciado aquí. Soc al dicho 12 Allí 18. Me está ayudando a distribuir automáticamente el espaciado igual cuando se sostiene cuando se copia de esa manera . Entonces cuando hago clic y arrastre y mantenga presionado el cambio hacia abajo por eso me gusta copiar de esa manera. Entonces de nuevo, si mantengo la opción y hago clic y arrastre y mantengo presionado shift lo mantiene alineado. Y también me ayuda. No. Ah, esto es un espaciado de 18 píxeles del último componente que hay en la parte superior. Y esa es la distribución igualitaria. Eso es lo que quiero. Genial. Entonces sigamos adelante y llamemos a este correo electrónico. Y la última que tuvimos aquí fue contraseña. Está bien, Ahora mira esto. Por eso es realmente importante que hiciéramos un componente. Digamos que estoy hablando con mi cliente u otro diseñador, y ellos son como, Hey, ¿ sabes qué? Es mejor que hagamos todo este texto de nombre aquí rosa. Yo soy como, OK, ya sabes, voy a seguir adelante y darte ese ejemplo o ir, adelante y cambiarlo algo. Está bien, sigamos adelante y cambiamos todos estos dos rosados. En los viejos tiempos, teníamos un click en uno de estos aquí y cambiamos cada uno rosa, así que tuve que hacer clic y luego seleccionar el nombre y cambiar el rosa. Entonces tengo que volver al apellido y cambiar un rosa, y luego tengo que ir al correo electrónico y cambiar una contraseña rosa de 30 y cambio de rosa. Pero cuando nosotros cuando pensamos en configurar? ¿ Eres y componentes así? Lo que puedo hacer ahora es que puedo ir a mi biblioteca de componentes por aquí. Y este es ese componente maestro que creé. Entonces todos los maestros viven aquí. Entonces cambié este color de texto aquí por el rosa que hicimos aquí así, y vuelvo a mi aprendizaje Paige, reloj. Todos ellos ya cambiaron para mí. Entonces esa es la belleza de por qué configuramos componentes. Y por qué reutilizamos componentes es que hace que editar un componente realmente fácil porque lo haces en un área, el componente maestro aquí y ves que todos cambian a lo largo de tus tableros de arte. Y digamos que tenías muchas, muchas tablas de arte diferentes como esta. Imagina tener que cambiar todos esos. De acuerdo, voy a volver a mi componente. No quiero volver a cambiarlo a rosa. Sólo están dando ese ejemplo. Yo quiero volver atrás y cambiar esto en blanco, tal y como teníamos antes. Está bien, genial. Por lo que ahora tenemos la página de registro luciendo bastante bien. Um, todo lo que necesitamos hacer es agregar este pequeño, um eyeball, que mostrará tu contraseña si estás escribiendo esto o, um, también disfrazará la contraseña también y el botón de registro, 4. Diseñar la experiencia de compras: Muy bien, bienvenido de nuevo. Por lo que en los últimos videos trabajamos en el login y el trabajo de registro fluye en este video, vamos a cubrir el flujo de trabajo de compras. Entonces déjame mostrarte lo que vamos a hacer en este próximo video. Entonces el último que trabajamos en el registro el login, y en este punto, dejamos justo aquí, que es la pantalla de carga y esta siguiente serie de videos o este video que estamos en momento, estamos va a construir este flujo de trabajo de tener, um, capacidad de seleccionar una bebida de té Boba y agregada a tu carrito. Entonces déjame mostrarte eso ahora mismo, también construiremos esta barra de pestañas en la parte inferior que se mantiene fija. Significa que no se mueve como me deslizé hacia abajo y se puede ver si hago clic y arrastrarlo hacia arriba. Sigma transiciona automáticamente esto como si estuviera deslizando en un dispositivo móvil. Está bien. Y en ese punto, el siguiente tren fuera para reconstruir este fuera es la pantalla de selección. Para que pudieras ver tenemos un estado de transición donde esto se desliza hacia arriba. Si toco la X, se desliza hacia abajo como una transición. Por lo que aprendimos eso está bien, y también aprenderemos a crear un desplegable móvil. Entonces si toco este dulce regular aquí, puedes ver que tengo una superposición deslizante hacia arriba, y si toco en la parte superior, se desliza hacia abajo. Y si toco una selección semi dulce, puedes verlo actualiza la selección donde dijo Dulce Regular a semidulce. Y luego lo siguiente que haremos es crear el estado activo para las selecciones de tope. Entonces si hago clic en el grande o golpeo en el tapioca grande de remate, se puede ver ahí y presiono en, y eso se sumará al carro ahí. Está bien, genial. Entonces sigamos adelante y nos pongamos en marcha. Entonces volvamos a, um, um, estamos aprendiendo página aquí en la que estábamos. Podías ver este aquí, y recuerdas dónde lo dejamos? Cosimos el log in, um, y el botón ir aquí a esta pantalla de carga. Voy a copiar aquí la pantalla de carga. Y así lo que hice de nuevo fue, um le doy clic a Option clicked y arrastrado una vez que me dieron las flechas dobles. Es mi ratón que copió que se aburren y me mantuve turno, por lo que mantiene la alineación. Entonces cuando no tengo turno sale de alineación. Cuando mantengo turno, lo mantiene en línea al siguiente tablero de arte. Voy a, um, um, hacer clic y arrastrar fuera del tablero de arte. Se puede ver cómo lo estoy haciendo aquí. Y eso sólo va a seleccionar cosas dentro del tablero de arte. Y voy a borrar la boba en la carga. También voy a seleccionar la barra de estado aquí. Voy a mandar ver o copiar aquí, y luego voy a borrarlo. Y voy a agarrar este tablero de arte alejado un poco aquí, en realidad, Antes de alejarme, voy a crear una guía para mostrarme la parte inferior de mi pantalla. Entonces si no estás viendo a tus gobernantes aquí, puedes ir a ver o a tus píxeles y podrías ver, um, donde dice, mostrar gobernantes, esto dará, ya sabes, gobernantes ahora mismo. Y si voy vista mostró gobernantes otra vez. Ya veré a los gobernantes. Quieres a los gobernantes fuera porque quieres poder arrastrar guías. Entonces si estoy encendido si estoy en tablero de arte, arrastro una guía se queda en ese tablero de arte. Ya puedes ver ahora es Onley en el tablero de arte. Si no estoy en el tablero de arte y estoy más en sólo el área de diseño, condono arrastrar una guía y se queda fuera del tablero de arte. Por lo que se queda en cualquier lugar, para que siempre pueda verlo. Puedo hacer clic en él, arrástrelo Si quiero quitarlo, solo puedo deslizarlo de nuevo hacia arriba en la regla, y lo elimina. Entonces este punto, quiero agarrar la guía, y luego quiero seleccionar aquí mi tablero de arte, y quiero hacerlo realmente largo. No te preocupes demasiado por, um, cuánto tiempo es. Sólo hazlo bastante largo aquí. Al igual que tengo la mía a los 2000. Hagámoslo aún más largo como 2400 píxeles. De acuerdo, así que eso se ve bien. Y luego voy a pegar, um, um, la barra de estado de nuevo. No, lo voy a copiar desde aquí. Pégala desde allí. Asegúrese de que esta barra de estado tenga la posición fija al desplazarse aquí. Entonces lo configuramos en el último video, pero eso es realmente importante. Ahora que vamos a poder desplazarnos hacia abajo y ver contenido aquí. De acuerdo, entonces lo siguiente que quieres es que queremos crear esa barra de pestañas. Por lo que tengo la ficha están aquí sobre los bienes de diseño. Adelante y agárrala. Copiarlo y podrás pagar. Por lo que fuera del tablero de arte, por ahora es lo que va a crear esto. Nosotros solo queremos agarrar esos iconos para que veas que tengo este estatus. Um, esta barra de navegación ah en la parte inferior o barra de tabuladores en la parte inferior está fijada en 375 de ancho y podemos hacerla de 8 85 alturas. Cisco, agarra un cuadrado, un rectángulo aquí. Y solo hagamos un rectángulo en este tablero de arte aún no importa el tamaño. Simplemente hazlo igual con que el tablero de arte. Entonces te dieron 3 75 y luego vamos a llegar a los atributos de altura aquí en la parte superior. ¿ Verdad? Hagamos que ese 85. Está bien, Genial. Por lo que ahora lo puedes ver aquí. Se ve bastante bien. Sigamos adelante y bajemos eso un poco. Por lo que ahora está al ras al fondo de este tablero de arte. Entonces, ¿qué? Queremos hacer ahora es cuando se hace clic en él en la pestaña de diseño, ver donde acceden a posición fija al pasear. Adelante y golpeemos eso y te voy a mostrar cómo se ve eso. Um, una vez que tengamos algún contenido en y cómo esto se mantendrá fijo en la parte inferior a medida que se desplaza hacia abajo. Entonces lo siguiente que queremos hacer es darle a esto un fondo de color. Entonces sigamos adelante y dio debilite hacer un poco de un negro apagado. Entonces vamos a buscar las paletas de color azul y vamos a conseguir suficiente donde pueda verlo como en negro. Eso se ve bien. Podríamos dio um, 012436 como color. O simplemente puedes usar tu mejor juicio si quieres. Está bien, así que ahora tienes la ficha son vamos. Ponga estos iconos en juego alguien para agarrar los tres y los voy a poner al fondo. Se puede ver que están debajo del rectángulo. Eso se debe a que lo que sea la posición fija en la Fig MMA se arreglará en la parte superior. Aquí se puede ver el sistema de capas. Tiene etiquetas en esto. Nuestros puertos se ha fijado en la parte superior. Cualquier cosa que esté fija irá automáticamente a la parte superior de la disposición de capas. Cualquier cosa que no esté arreglada irá debajo de este título de desplazamiento aquí, y este es el resto del contenido. Entonces lo que queremos hacer es fijar la posición de estos iconos y los verás saltar desde el sistema de capas izquierdo aquí arriba a las posiciones de capas fijas aquí. Por lo que vamos a tocar el clic en la posición fija al desplazarse y verás que se movieron arriba desde el área de desplazamiento hasta el área fija. Y vamos a seguir adelante y hacer que se debiliten aún más, Haga clic y arrástrelos en el medio están en la parte superior del rectángulo, así que ahora están tendidos encima de él. Vamos a seguir adelante y visualmente hacerlos centrados aquí. Eso se ve bien solo usando mis teclas de flecha en mi teclado, y ahora lo que queremos es que queremos crear un estado activo. Entonces sigamos adelante y seleccionemos el ícono del perfil aquí y el icono del carrito de compras y empujemos esos hacia atrás y transparencia. Entonces vamos a hacer alrededor del 30% aquí. Eso se ve bien. Siguen visibles, pero da al usuario e indicación de dónde están en esta pestaña, nuestro sistema. Por lo que puedes ver aquí. Estamos creando esta pantalla aquí donde esto se va a mantener fijo y la barra de estado en la parte superior se mantendrá fija y te desplazarás hacia abajo y verás todo este contenido. Está bien, Cool. Entonces, vamos a alejarnos un poco. Puedes eliminar el rectángulo que teníamos aquí. Ahora que tenemos esta ficha, nuestro sistema en juego y vamos a agarrar la primera bebida de té Boba aquí. Entonces este es el té regular de Boba. Sólo mando, ¿ ves? Copiarlo. Ya tiene que decir el, um el con y altura para ti. Sólo tienes que seguir adelante y pegarlo y verás sentido que no está fijo y automáticamente estaba debajo de la barra de estado, lo cual es bueno. Eso es una especie de lo que queremos. Agarremos este logotipo del té Boba aquí, Comando, a ver, ver, a menos que lo peguemos aquí. Entonces ahora quieres cambiar el texto de este logotipo del té Boba a un texto negro Trabajo dice Boba, Todo lo que tienes que hacer aquí es solo triple click, triple click en él y luego mantén pulsado turno y selecciona las otras letras. Ahora tengo la palabra bala Just Boba seleccionado ¿dónde? Dice, Phil, solo adelante y cámbiate. El color estaba haciendo negro. También podemos usar nuestros estilos de color que hicimos porque aquí hicimos un negro y seleccionamos el negro también. Está bien, eso se ve bien. Entonces lo siguiente que queríamos agregar es el texto aquí teníamos tinte regular y dulce de caramelo y chocolate, y teníamos el precio para su Bueno, correcto. Entonces voy a agarrar la herramienta de texto aquí. Voy a escribir la palabra regular y de nuevo, se puede ver mi línea de Teoh moratoria de Texas en la parte inferior aquí en el personaje. Ah, cuadro de diálogo de texto. Es esta pieza aquí que sucede A veces. A mí me gusta tenerlo alineado en el medio y no en el fondo. Eso está bien Ahí. Vamos a seguir adelante y hacer de esto un Vamos a hacer sobre una fuente de 16 puntos y vamos a agarrar un poco de espaciado de letras aquí. Um, está demasiado apretado ahora mismo. Se puede ver sin letras frente a ella. Zalkind de difícil de leer y verás a qué me refiero cuando realmente le das algo de espaciado entre letras . Ahora mismo está en menos 2%. Está justo debajo de la caja en la que puedes cambiar el ancho y la altura de tu diversión y vamos a reventarlo. Vamos a darle un 8% y sólo se podría ver cómo sólo un poco de espaciado hace que sea un poco más fácil de leer de nuevo en la alineación de párrafos que no hemos establecido en centrado. Hagámoslo un alineado a la derecha. Entonces si hago click en el derecho en el cuadro de texto aquí, puedes ver que lo tengo alineado a la derecha. Y eso se ve bien. OK, así que como lo hicimos antes en el último video, vamos a crear un estilo de personaje para esto. Por lo que ahora tenemos una fuente de 16 puntos. Entonces sigamos adelante y creemos un nuevo 16 punto. Escribirlo 16 punto y es un regular. Yo creo que la diversión regular para que podamos reutilizar eso a medida que pasemos por esto. Está bien, Lo siguiente que queremos hacer es escribir el tinte dulce de caramelo y chocolate . Entonces a partir de aquí, sólo voy a copiar esta misma capa. Este cuadro de texto aquí otra vez, yo solo presioné, um, opcion shift tips que mantiene esa alineación a la derecha, cual es realmente bueno no lo quiero apagado así. Yo quiero mantenerlo alineado directamente, y vamos a teclear esto. Y así en este punto, realidad quería no estar centrada en la caja, sino en la parte superior. Entonces voy a hacer la alineación desde la propiedad de texto aquí alineada la parte superior. Ahí vas. Eso se ve bien. De acuerdo, entonces tenemos dulce una carpa de caramelo y chocolate. Enfriar. Correcto. Entonces este punto, ¿qué hace que este texto sea más grande? Entonces vamos a desprenderlo del carácter textil que tenemos aquí. Entonces 16 vamos a hacer esto probablemente demasiado grande allí. Hagámoslo un 22. Eso debería ser. Eso debería estar bien. Voy a estirar esto. Entonces quiero tres líneas aún afuera se ve bien ahí. Y vamos a hacer de esto un regular, y eso se ve bien. Enfriar. Entonces ahora que tenemos, um, um, esto a los 22 tenemos aquí el, um, um, el texto del título. Es 16 y la descripción gravada a 22. Hagamos un textil para esto también, que podamos reutilizar esto ahora. Entonces ahora estamos consiguiendo una, um una combinación de textiles agradables que podemos usar. Tenemos el 16 punto, tuvimos los 19 puntos que configuramos desde las páginas de inicio de sesión, y ahora tendremos el más grande, que será un 22. Entonces vamos a agarrar esto y que sea un 22 punto. Sólo estoy escribiendo en 22 punto y ya verás por qué hacer esto, Um, cuando lleguemos a los próximos sabores de Siris de Boba Tea porque vamos a teclear los sabores y las descripciones y entonces fácilmente podemos ponerlos exactamente así. Está bien, eso se ve bien. Um, una cosa que teníamos que hacer era la etiqueta del precio. Alguien para copiar la misma fractura de tipo regular. Te mostraré por qué usamos algunos de los estilos de personajes y el reloj Realmente útil. Aquí solo voy a escribirlo. Sólo voy a escribir para creo que fue por 99 y digamos que no lo tengo alineado aquí a este texto, pero sí lo tengo bien alineado en el ajuste de párrafo. Si quiero crear alineación entre los tres de estos elementos, solo selecciona los tres, y puedes ver en la parte superior aquí tengo estos iconos de alineación. Entonces aquí está la alineación a la izquierda. Esto fue alineación centrada pero quiero alineación derecha aquí. Alguien para dar click a la derecha y lo puedes ver. Alineó los tres de estos a la derecha ahora y a la 4 99 que quiero hacerlo. No el 22. Um, pero vamos a ver cómo se ve en el 19 Bold. Eso se ve bien. No lo guardes. El 19 audaz y lo último que queremos usar. Voy a copiar este. Voy a crear el anuncio. Sólo tienes que indicar al usuario que pueden agregar esto a su carrito y vamos a darle el color de acción aquí y mientras Ah, que se ve Eso se ve bastante bien. Está bien, genial. Entonces, ¿qué vamos a hacer a continuación? Um, sigamos adelante y coseremos esto para que podamos ver cómo se ve esto en el prototipo. Entonces si recuerdas, teníamos el prototipo de la pantalla de inicio de sesión iniciar sesión, botón en la pantalla de inicio de sesión se conectaba a la pantalla de carga, y el botón ir en el teclado te llevaría a la pantalla de carga. Y como aprendimos en el último video, la pantalla de carga necesita dedo del pie. Ten un retraso para que no puedas hacer clic en ningún elemento dentro del tablero de arte. Para crear un retraso de tablero de arte, hay que seleccionar el tablero de arte en sí mismo. Por lo que tengo seleccionada la pantalla de carga. Voy a dar clic y arrastrar el brazo prototipo de la boya, y ya puedes ver ahora está conectado a la pantalla de compras. Voy a cambiar este nombre de las compras o de la pantalla de carga aquí a pantalla de compras porque copiamos eso. Y de nuevo, todo lo que hice fue seleccionar la pantalla aquí, consiguió la capa a la izquierda y simplemente triplicó, hizo clic en la capa, y pude escribir en las compras. Está bien, genial. Por lo que sólo queremos que esta remolca esta interacción aquí desaparezca después de cierto tiempo de duración. Entonces en el prototipo aquí, cuando selecciono el enlace prototipo que tengo en tap, sigamos adelante y hagamos después del retraso. Y tres segundos es alrededor de la derecha o 3000 milisegundos aquí. Un instante debe estar bien. No queremos ninguna animación inteligente ni nada,está bien, está bien, luego seguir adelante y pulsar el botón de reproducción en la parte superior. Y ahora se podía ver el prototipo. Aquí tenemos la pantalla de carga. Podemos simplemente pasar por el log in, y se puede ver cuando toqué el botón de inicio de sesión, la pantalla de carga aparece durante tres segundos y luego, sí, sí, tenemos la pantalla de compras con nuestro primer sabor por encima de una t aquí. Ya ves, si hago clic y arrastro hacia arriba, ve cómo están las cosas que se arreglan la pestaña aquí y la barra de estado aquí en la parte superior, los elementos de configuración, esos aires todos fijos. Eso es lo que significa tener un elemento fijo es que esas cosas no se van a desplazar mientras todos los demás contenidos se desplazan. Está bien, así que vamos a añadir el resto de los sabores del té Boba que teníamos aquí. Por lo que puedes ver aquí. Yo tenía el, um, el siguiente sabor aquí y sólo seguir adelante y ritmo que justo en su lugar, así como. Y queremos un poco de alrededor de un espaciado de un píxel en el medio. Entonces eso se ve entre las dos fotos así como así, Vale. Y entonces lo que queremos hacer aquí probablemente sea mejor solo copiar este texto aquí, y puedes mantenerlo alineado, así que voy a mantener opción. Voy a hacer clic y arrastrar hacia abajo y otra vez, voy a mantener el turno. Entonces no estoy haciendo esto. Por lo que puedes ver como muevo mi ratón por mantén pulsado el turno. No puedo mover el ratón por ahí. Es mantener toda esta información aquí alineada. Simplemente lo espacio como a mitad de camino a tu imagen aquí. Y también voy a ir a objetar y traer al frente aquí ella puede ver bien. Y sobre ese sabor, lo que teníamos aquí fue que tenemos un café con sabor a cerveza fría premium con té negro, y es para 99. Entonces volvamos a nuestra pestaña de aprendizaje aquí. Y cambiemos eso aquí. Y vamos a ver aquí lo que decía Brew premium frío con té negro. Escriba eso en. Está bien, somos el espaciado ahí, y quiero dejar caer el con a la tercera línea y tenía ahí el espaciado. Enfriar. Lo estamos pasando bastante rápido. Eso es bueno. De acuerdo, para que veas que estos dos, um, elementos encajan. Todo desde la pestaña están arriba. Vamos a agarrar el siguiente sabor aquí, que es el sabor del té macho. Y yo solo mando ver, copiarlo y comando v pegarlo. Y voy a seguir adelante y ponerlo en la posición correcta aquí Ahí tienes. Y voy a copiar el mismo texto aquí en la opción. Haga clic y arrastre. Mantenga turno. Entonces otra vez, sosteniendo opciones, obtengo la flecha doble, selecciono todos estos elementos. Y si quiero, puedo agruparlas para que sea fácil desde una próxima selección. Entonces si solo hago una selección de grupo aquí y mantengo opción y hago clic y arrastre No, los tengo copiados. Y de nuevo, quiero traerlos al frente. Doy click derecho sobre ellos, traigo al frente. También puedes usar la opción de comando flechas arriba y abajo para que las teclas rápidas subieran estas en las capas. Está bien. Y sigamos adelante y llamemos a éste un macho. Uh, y el texto en él waas premium frio brew up. Ese fue el, um, el café con sabor. Entonces sigamos adelante y solo cambiemos este texto para tener una descripción t macho. Entonces llamémoslo mata premium y té negro. Eso debería funcionar. Está bien, genial. Entonces lo siguiente que queremos agregar es el sabor final, que se puede ver aquí en, um, el prototipo final aquí. Aquí arriba estaba el texto aquí. Dulce macho japonés t Volvamos atrás y añadamos eso realmente rápido. Entonces dulces japoneses mucho, uh, T que es mi bebida favorita, por cierto, fuera de todos esos, está bien. Y el último es el chai Tia. Bueno, um, así que vamos a agarrar la foto chai aquí. Apenas el que tiene un poco más. Es lo mismo que la t regular Simplemente le tiene un poco más de un color. Adelante y selecciona. Eso se puede ver cuando pego. Si no tengo mi tablero de arte seleccionado, solo me gusta el ritmo. Esto no va a pasar el ritmo en la pizarra de arte. Se puede mover en segundo lugar el tablero de arte. No va con ella. Así que recuerda siempre, Teoh seleccionó el tablero de arte y luego pega cuando estés en el tablero de arte, voy a bajar esto. Yo sostengo turno cuando me muevo, así que no muevo las proporciones. Ya se pegó justo en el exacto con eso lo quería lleno cuando lo moví hacia abajo. Al igual que así. De acuerdo, en este punto, sigamos adelante. Y, um, copia. Voy a subir un poco esto. Copiemos este texto aquí y otra vez. Voy a hacer click derecho e ir a traer la opción de frente o comando arriba y abajo puedo subir para traer al frente y abajo para traer a atrás Así puedes ver eso Y este es el sh i t . Por lo que la descripción para eso se hace con té Golden Chai. Volvamos a nuestro aprendizaje, Paige, y voy a escribir eso en made with Golden Chuy T creo que eso también fue el 5 99 Muy bien, te estabas poniendo un poco más caro. Ahora está bien. Está bien, Genial. Entonces ahora tenemos esos cuatro sabores en Vamos adelante y volvamos a nuestros prototipos otra vez. Puedes hacer clic en el botón de reproducción, o simplemente podrías hacer el toque. Si solo tienes por aquí, también puedes presionar. Um, la ficha están ahí la parte superior. Y ahora puedes ver cómo se ve desplazar para que puedas desplazarte por estos sabores. Se puede ver la línea entre el café y la mata no está ahí. Entonces volvamos atrás y agreguemos eso. Pero eso se ve bastante bien. Volvamos atrás. Um, voy a volver a seleccionar así que una cosa que hago es, um adelante y seleccionar fuera del tablero de arte. Inicia la flecha del ratón hacia la derecha y haz clic y arrastra sobre solo los elementos que quieras seleccionar en el propio tablero de arte. Así que sólo tenemos esos sabores justo el chai y el macho Ahora seleccionó una flecha na minha hacia abajo hasta que se puede ver yo creé esa pequeña línea ahí para el macho t. bien, así que de nuevo muchas maneras de llegar a mi prototipo, puedo prensa regalos o puedo dar click en la pestaña de la parte superior. Vamos a ir tab de nuevo a la parte superior ahí, y ahí está en mis sabores. Está bien, genial. Entonces ahora que tenemos aquí el tablero de arte, se podía ver que lo hicimos bastante largo. Volvamos atrás y acortemos eso ahora que tenemos todo el contenido en juego. Entonces lo que voy a hacer es añadir otra guía no sólo al fondo de mi contenido, sino un poco más allá. Por lo general quieren dar algo de espacio para la barra de pestañas para que toda la información chai el chai del té chai vaya por encima de la barra de pestañas para que puedas ver sobre ahí está bien. Sólo un doble cheque voy a copiar esto, atrapar nuestro y sólo ver. Sí. Probablemente podríamos mover un poco esta guía hacia arriba aquí. Simplemente lo queremos donde ese té chai se sentará en el extremo muy bajo de la pestaña o el deslizamiento . Um, bueno, siéntate encima de esa ficha. Barra que tabulador son no ocultará contenido que tenemos aquí. De acuerdo, así que esto es una especie de cosa de MMA higo que sucede aquí. Es un poco de bicho. Um, Entonces si quiero estirar este tablero de arte con contenido que se fija dentro de él, se puede ver qué pasa. Ve cómo empieza a aplastarse el contenido que está arreglado. Entonces mira lo que pasó con la Boba y la barra de Estado. Es una cosa que pasa con las cifras. no me he dado cuenta del todo. Entonces lo que tendemos a hacer es simplemente hacer clic y arrastrar y seleccionar todos los elementos que tengas. Y ahora tablero de arte, haz un comando. ¿ Ver? Simplemente cópielo, luego elimínelo por ahora. Después agarra el tablero de arte y acortarlo a esa guía que hicimos aquí. Y luego manda V. Bueno, ritmo de vuelta en su lugar. Ahí vas. Te daré un segundo para que hagas eso. De acuerdo, entonces en este punto, qué es volver a nuestro prototipo y podemos comprobar cómo se ve eso. Por lo que puedes ver aquí tenemos el regular del café, el macho. Y si no agregáramos ese espacio extra en la parte inferior, el niño terminaría en el deslizamiento inferior luciendo así. O peor de los casos ocultaría ese botón de agregar. Pero ya que agregamos ese espacio adicional, se puede ver donde simplemente va justo a la parte superior de esa barra de navegación. Entonces se ve bien, Nikkan Second, desliza hacia arriba y figura qué te da esa transición de deslizar. Por lo que actúa como si estuviera frotando con el dedo. Y si tuvieras, um, si descargas la aplicación de espejo Sigma en tu teléfono, puedes ver por qué eso lo hace sentir como una aplicación real en tu dispositivo móvil. Está bien, bueno, eso se ve bien. Um, así que lo siguiente que queremos hacer aquí es si toco en cualquier parte no solo el botón agregar, sino en cualquier parte del espacio del té de leche de aquí, va a abrir el móvil de selección para la leche regular milty. Entonces esa es esta pantalla aquí se ve así. Entonces sigamos adelante y construyamos esta pantalla aquí, y vamos a trabajar en el desplegable también a la derecha aquí. Por lo que vuelven a los aprendizajes. Paige, esto va a ser una altura de tamaño de pantalla regular. Entonces vamos a copiar la pantalla de carga que teníamos aquí. Por lo que de nuevo, acabo de sostener opción. Agarra esa tabla de arte, sostén el turno y arrástrala hacia la derecha. Eso voy a dar clic y arrastrar desde la derecha para seleccionar los elementos dentro del tablero de arte. Y ahora voy a borrar eso cuando presioné elite. De acuerdo, quiero reutilizar esta foto. Entonces sigamos adelante y presionemos comando, ¿ Ves? Y voy a mandar V esta foto aquí en la parte superior, y luego puedes ver aquí donde si muevo de abajo hacia arriba como, digamos, quiero anotar cosas así, ella y mezclar la perspectiva de la foto, Um, no sostiene la relación de aspecto e interpreta lates la foto así. Y realmente no se ve bien para las fotos. Entonces lo que queremos hacer es aquí es que quieres ir a la imagen aquí. Da click en él y podrás ver donde dice Imagen de cultivo. Adelante y hagamos uno que diga Fit image aquí. En realidad, ¿Qué se va a llenar? Ahí vas. Entonces otra vez pasamos de cultivo a sentir y cómo llegué aquí. ¿ Se acaba de dar click en la imagen? Phil aquí ven a donde se recortó y pongo sentir, y ahora puedes ver cuando lo muevo hacia arriba, no me da. No desafía la perspectiva de esa imagen. Yo quiero mover la imagen real dentro de esto hacia arriba. Entonces si vuelvo a hacer clic en la imagen y hago doble clic, así que hay un clic. Pero si hago doble clic, llego al cultivo aquí en la parte superior, suprimí el cultivo y lo puedes ver. Ahora puedo agarrar la imagen dentro de eso que he recortado y puedo subirla un poco. Y sobre de ahí debería estar bien. A lo mejor darle un poco más de espacio a esto. Entonces otra vez, yo es pre me puso de nuevo a la cosecha para poder volver ahora a llenar y volver a cosechar, y luego simplemente mover esto hacia arriba un par de maneras. se puede hacer. De acuerdo, a estas alturas, um, vamos a seguir adelante y divertirnos un poco más. Vamos a hacer la sección de prototipos para esto primero, pero necesito hacer un botón de cierre en la parte superior izquierda. Entonces cuando toques esto, um, también puedes cerrar la pantalla y volver a la pantalla con sabor con una pantalla de compras . Entonces lo que voy a hacer es que voy a agarrar un rectángulo aquí se puede ver tener un rectángulo y ellos hacen clic y arrastran Va a mantener el turno abierto hacia arriba, Sin mantener el turno, Sólo tienes que hacer clic y arrastrar y voy a redondear los bordes. Entonces por aquí tengo el radio de esquina. Basta con presionar 100. Está bien. Y a ver cómo lo hizo redondear esa selección. Dado que este es un elemento real, queremos que este sea el color procesable. Entonces vamos a agarrar nuestra acción primaria Colorea ese rosa y voy a copiar este comando. A ver, voy a hacer clic fuera de ella. Voy a volver a hacer clic en el tablero de arte y voy a mandar V, que es una pasta en su lugar. Voy a seleccionar el que acabo de pegar, y lo voy a girar 90 grados y tengo un botón más. Sonam va a seleccionar ambos y voy a dar click derecho cuando un grupo, esta selección o también puedes mandar G. Te daré un segundo para hacer eso. Y ahora que tengo ese botón agrupado o ese más disponible, voy a girar el botón más. Y ahora tengo la X que quiero. Y como cualquier cosa que utilicemos eso va a ser que creemos que se va a reutilizar. Vamos a hacer de esto un componente. Alguien de reducirlo sólo un poquito. Eso se ve bien. Voy a copiarlo. Voy a volver a nuestra biblioteca de componentes aquí, y voy a acelerar eso aquí, mover esto un poco y voy a crear el componente. Por lo que consigo lo pegué aquí. El pequeño top, um, icono de diamante crear componente. Y voy a nombrar esto cerca y sólo poner un cierre de impuestos X así. Impresionante. Ahora volvamos a nuestra página de aprendizaje aquí y volvamos al activo de capas. Ah, tabulador delayer aquí en la parte superior. Vamos a la pestaña de activos y agarremos el componente X que acabamos de crear. Y pongamos eso en lugar de esta X ahora. De esa manera, cuando volvemos a utilizar esto, podemos cambiarlo con bastante facilidad desde la misma área desde el componente maestro. Y cambia en todos los tableros de arte. De acuerdo, entonces vamos a tener la parte divertida. Adelante y prototiquemos esto, um Ah, transición aquí en nuestro prototipo. Por lo que es click en la página de compras aquí. Vayamos a la pestaña del prototipo aquí y solo seleccionemos solo la imagen de la probidad regular. Vamos a seguir adelante y conectarlo a que la pantalla a la derecha. En realidad etiquetemos esta pantalla aquí. Esto dice pantalla de carga, porque la copiamos. Llamemos a éste la pantalla de selección. Muy bien, entonces ahora tenemos esta pantalla de selección. Por lo que de nuevo tenemos las compras. Ah, cepa. Aquí seleccionamos el té regular Boba. Hacemos clic en el pequeño conector prototipo bocoso en la pantalla de selección, y ahora tenemos la interacción en tap simplemente buena. Y se fue a mudarse. A veces los años sólo pueden decir instantáneo como este. Um, lo que queremos hacer es que queremos crear una jugada en escenario, así que te mostraré cómo se ve. Estamos solo instantáneos por ahora y debilitamos. Hacer la X aquí, volver la X en la pantalla de selección de vuelta a la pantalla de compras, y podríamos simplemente hacerlo al instante. De acuerdo, así que si toco en cualquier lugar donde estaba la foto, puedes verla simplemente instantáneamente transiciones a esa pantalla de selección. Y si toco en la X que instancia transiciones instantáneamente a la pantalla de compras. Eso no queremos. Queremos una transición. Queremos que esta pantalla se deslice hacia arriba y en la X se deslice hacia abajo. Entonces lo que tenemos que hacer es seleccionar el prototipo ah. Entonces ah, línea gooey que acabamos de hacer. Eso fue del té Boba aquí y donde dice instantáneo. Queremos que esto tenga una mudanza. Entonces lo que está diciendo es esta pantalla de aquí, esta nueva pantalla se va a mover, y luego se define cómo se va a mover. Entonces aquí tenemos la diapositiva a la izquierda. Se puede ver un ejemplo de eso va a entrar de la diapositiva derecha izquierda. Tenemos las escrituras de diapositivas van a entrar desde la derecha. Tenemos la diapositiva hacia abajo para entrar de arriba hacia abajo, y tenemos la que queremos hacer, que es la diapositiva hacia arriba. Por lo que esta pantalla, esta pantalla de selección de aquí, se va a deslizar hacia arriba en la parte superior de la pantalla de tu compra. Entonces ahora tenemos eso para asegurarnos de que tengas esta seleccionada en MoveOn y las, um, especificaciones de cómo se va a mover. Concéntrate en arriba. Vamos a ver el prototipo ahora. Entonces si toco en cualquier lugar donde el té regular de leche es que se puede ver cómo esto se desliza hacia arriba y creo que X sigue en el instante. Entonces ahora queremos que este dedo del pie de la pantalla también se deslice hacia abajo presionando la X. Son muchas veces cuando haces esto, he visto es a veces tendrás que mudarte, seleccionado, y luego tendrás estas especificaciones establecidas en Muévete hacia abajo y hace que se vea como la cosa que quieres. Pero déjame mostrarte lo que pasa aquí para ver cómo trajo la otra pantalla en esa transición con ella. Entonces déjame hacer eso otra vez. Da clic en el Té de Boba regular aquí, se desliza hacia arriba. Eso es lo que queríamos. Esa es una buena transición. Pero cuando presioné la X. Se puede ver que la pantalla viene de arriba, la pantalla de abajo en la pantalla de compras, y se desliza de nuevo hacia abajo. No queremos eso. Queremos que esto parezca que simplemente se desliza hacia arriba y luego se desliza hacia abajo de nuevo. Entonces eso es causado porque tenemos la selección aquí en la animación definida como mudarse cuando realmente queríamos ser una mudanza fuera. Es como, Fuera del camino. Por lo que de nuevo tenemos la selección regular de té de leche entrando como diciéndole al prototipo que mueva esta pantalla hacia arriba, esta pantalla hacia arriba,se mueva y luego tenemos el botón X siendo informado para salir y bajar a exponer esta pantalla. Aquí la pantalla de compras. Entonces sigamos adelante y miremos ese toque lateral en la foto de selección de té de leche regular deslizarse hacia arriba. Y luego ahora que tenemos el tobogán para mover el movimiento hacia fuera, lo verás moverse hacia fuera y simplemente se mueve hacia abajo. No trae la otra pantalla con ella, así que muévete. Eso es arriba y salir. Bajando fresco. Ese es un patrón móvil realmente común, un patrón de interacción. ¿ Las cosas se deslizan hacia arriba con una X y luego se deslizan hacia abajo con la X también. Cuando está entrando de izquierda a derecha, eso suele ser un botón de retroceso. Y tendremos oportunidades en, um, um, la experiencia del carrito de compras para crear prototipos de lo que se ve con el botón Atrás. Está bien, genial. Entonces en este punto, um, queremos agregar algunas etiquetas de que estás en el té regular de leche, alguien que copie este texto regular aquí. Lo voy a pegar aquí. Y creo que dijimos que esto era de 16 puntos. Vamos a hacer de este un 22 punto. Al igual que el regular ahí. Eso se ve bien. Voy a copiar eso y sólo llamarlo leche regular T. Y voy a hacer de este uno de mis descansos. Desconecta esto y solo hazlo audaz. Eso se ve bien. Tipo de centro. Esto de aquí. Si quieres divertirte de verdad con ello, solo vamos a subir el té de leche hasta un montón entero para que veas que lo he hecho ahora 32 y tengo el regular que se ve Que se ve bien. Eso es llegar ahí. Una cosa que necesito agregar aquí es, um se puede ver la palabra té de leche. Tiene mucho de dejar reunión, um, um, espaciado de párrafos. Entonces el espacio entre la palabra leche y la palabra T este espacio aquí que se llama arrendamiento o altura de línea o espaciado de párrafos. Um, la razón que se llama dejar estaba de vuelta en el día en que estaban haciendo tipografía. Solían tener que hacerlo de metal, y lo harían Tendrían una máquina de tipografía donde cortarían letras individuales . Y entonces ellos, um, arreglarían um, esas cartas para hacer palabras. Y en realidad pondrían pedazos de plomo entre cada palabra aquí para hacer el dejar. Por eso se llamaba dejar, porque tenías diferentes tamaños de punto de metal. Entonces en el mundo de los lenguajes CSS, eso se llama altura de línea aquí. Entonces sigamos adelante y hagamos de eso una altura de línea más pequeña. Voy a decir sólo 50 como punto de arranque. Y entonces ahora bajemos. Entonces, um sí, 38 es perfecto. Entonces ahora tengo este set en 42 del tamaño de fuente y 38 para la altura de línea y 8% para el, um, el espaciado de caracteres. Está bien, eso se ve bien. Ya hemos creado un poco de alguna jerarquía aquí con la fuente regular y el té de leche . Desde que hemos creado un 42 audaz. No estoy seguro de si realmente usaremos la fuente así de grande en adelante, pero por si acaso, sigamos adelante y hagámoslo. Hagamos un, um, un estilo de carácter de 42 puntos o textil. Por lo que ahora tenemos un rango bastante bueno de 40 42. Necesito cambiar el nombre de esto. Yo lo mecanografié. 43. Es 42. De acuerdo, así que tenemos 40 a 20 a 19 y 16 es bastante bueno hasta ahora. Obtén alguna vez una gama de estilos de personajes que debilitan y los textiles debilitan de la que podemos sacar. Está bien. Lo siguiente que habrá que hacer es que vamos a crear estos pequeños desplegables, uh, piezas aquí para leche y hielo dulce regular y medio. Entonces vamos a entrar en este prototipo aquí, o en la pantalla. Um, pantalla de selección. Agarremos un rectángulo y solo hagamos un rectángulo. No importa de qué tamaño sea. Tengo el mío set en Let's dio um, vamos a hacer 3 20 con y 70 65 altura debería estar bien. Enfriar, y tiene una sensación en este momento. No queremos tener un Phil. Queremos tener un derrame cerebral. Entonces quitemos el relleno. 5. Diseñar la experiencia de pago: Muy bien, bienvenidos a la siguiente serie de videos. Entonces en este video, vamos a cubrir el flujo de trabajo de check out. Por lo que acabamos de diseñar y crear prototipos de los flujos de trabajo de inicio de sesión y de registro. Hicimos el flujo de trabajo de compras, y ahora vamos a pasar por el flujo de trabajo de check out, Um, y para ver cómo se ve eso, vamos a pasar por el prototipo aquí. Por lo que ya hemos hecho esto. Hemos creado el registro en el inicio de sesión. Puedes poner tu correo electrónico en tu contraseña en. Has iniciado sesión en su carga de la aplicación. Tienes todo el té boba. Esto es lo que hicimos en el último video que creamos en el té Boba, um, sabores aquí que puedes seleccionar si tocas el té de leche regular aquí, puedes ver que hicimos la leche el dulce regular y el hielo medio caer hacia abajo selecciones, los botones de selección de tope. Y también hemos prototipado la X que cierra eso. Ábrelo de nuevo. Hicimos una selección desplegable móvil, pero ves aquí si seleccionas semidulce, cambia el semi dulce. Puedes seleccionar la tapioca grande puedes hacer el anuncio y luego vamos en este video. Vamos a construir y diseñar el flujo de trabajo de check out. Entonces si toco el icono de la compra, ahora estoy experimentando la experiencia de check out donde me muestra la aplicación me muestra mi selección, cuál fue? Tomé mi té con leche. Mi cantidad era una que pude editar. Quitar estos. Si quiero oír, puedo cerrar esto. Vuelve atrás. Y si estoy listo después de ver mis totales, las cuotas de entrega, los impuestos podría ir al siguiente. Se puede ver que esa pantalla se desliza de izquierda a derecha y la parte posterior se desliza hacia atrás . Bueno, haremos esa transición prototipo también. Puedes poner en tu dirección estos componentes de aire que ya hicimos, por lo que debería ser bastante sencillo y rápido hacer que estas prensa Andone vayan a la siguiente y otra vez , Si quiero volver atrás, puedo volver todo el camino a el principio. Puedo cerrar. Es un patrón de interacción muy común que utilizamos en dispositivos móviles. Ponte a deslizarte con la X. Ahora puedo entrar en una serie de botones traseros, agarrar mi dirección. Puedo poner en mi información de pago prensa hecha. Veo el total que pago. Está confirmando el pago. Y entonces puedo ver mi té Boba siendo entregado a mí con una serie de pantallas que tienen el , um, el , um, um, efecto de transición de duración del tiempo. Ahora se puede ver la pantalla final. Ha llegado mi té Boba y presiono OK, lo tengo. Y estoy de vuelta en la pantalla aquí, así que vamos a trabajar a través de eso en este video. Volvamos a nuestro archivo ah figment que creamos aquí. Se puede entrar en el aprendizaje Paige que tengo aquí. Quieres empezar a crear prototipos de cómo se ve cuando alguien hace clic o el usuario toca esto. Echa un vistazo a Icahn aquí en la barra de pestañas. Entonces vamos a agarrar desde el principio aquí. Vamos a agarrar esta pantalla de carga aquí, Comando ver y ven aquí. Comando V. Pégala y movámoslo en posición. Aquí, vamos a llamar a este cheque. Entonces de nuevo, basta con dar click en el tablero de arte, click en la capa de la izquierda y teclear, echar un vistazo y vamos a seguir adelante y quitar todo lo que tenemos ahí. Una de las cosas que vamos a necesitar para esta pantalla es que vamos a necesitar la X. Así que vamos a agarrar esa X y pegarla. ¿ Qué le toca al prototipo? Asegúrese de que no tenga ningún prototipo de enlaces prototipo preexistentes ya establecidos en él . Y lo hace. Así que vamos a seguir adelante y agarrar eso. Sólo tienes que arrástrelo y soltarlo. Ahora que esa X no hace nada en el prototipo y en el prototipo final de la foto aquí , se puede ver lo que estamos buscando diseño del dedo del pie aquí arriba es queremos tener el título de check out, el té de leche regular con las selecciones predefinidas, la cantidad con la capacidad de agregar más de uno. Ah, y quitó botones. Y entonces queremos poner en estos totales aquí que tenemos. Entonces sigamos adelante y diseñemos para arriba. Esta sección aquí probablemente copiará y pegará thes um, y lo hará fácil. Pero empecemos con el check out, um, um, tab en la parte superior de ahí. Entonces vamos a agarrar este regular luchado aquí nos permite copiarlo y pegarlo aquí. Hagámoslo blanco. Vamos a centrarlo y lo pondremos aquí. Llame a este cheque todo bien, y esto ya estaba fuera de 16 puntos. El estilo de color son los textiles. Eso es bueno. Reutilizar eso. Adelante y centrémonos un poco esto. Eso se ve bien ahí, bien, y sigamos adelante y copiemos esto. Ahora cambiemos la alineación de un párrafo centrado. Alinear alineación a una izquierda, Una línea que se ve bien. Y llamemos a esto el té regular con leche. Tenemos 16 punto, y también hicimos un 14 punto audaz Vamos a hacer de este un punto de 14 puntos. Negrita. Eso se ve bien. Está bien. Y voy a copiar esto. Voy a mantener la opción click y arrastrar y mantener pulsado el turno. La membresía evita que las cosas se muevan. Alineación así. Yo sostengo turno. Ya no puedo hacer eso. Y sigamos adelante y veamos cuando estiro la altura de este cuadro de texto, estaba por defecto a una alineación media para el texto. Hagamos alineación superior que solo lo mueve a la parte superior del cuadro de texto que se ve bien y las selecciones que teníamos para esta leche regular a ti como teníamos leche, teníamos un semi dulce, y también tuvimos el para volver aquí y echar un vistazo hielo medio. Y entonces también tuvimos la gran tapioca. Muy bien, hagámoslos un poco más grandes. Vamos a agarrar nuestro Vamos a hacer de este nuestro 19 punto. Sí, eso se ve bien. Um, ¿qué hacer? 19 puntos de luz? Sí. Eso se ve bien Ahí. Y luego hagamos de esto el color gris más claro, el gris frío que hicimos. Está bien, eso se ve Eso se ve bien. Muy bien, este punto. Voy a usar el comando comando de teclado rápido son, o ir a la herramienta de forma aquí e ir al rectángulo. Voy a mantener el turno, clic y arrastrar y hacer una caja de rectángulo aquí en el centro. Algo así. Podemos hacer esto alrededor de 60 por 60 aquí. Y hagamos de esto también el gris frío. Así que selecciona el gris frío que hicimos antes. Um, todo lo que tienes que hacer ahí es dar click en los deportes de cuatro puntos como Phil. Aquí están todos nuestros estilos de color. Enfriar, gris. Y retrocedamos la opacidad de esto a unos 30. Eso se ve bien. De acuerdo, sigamos adelante y hagamos un cuadro de texto del mismo tamaño de este rectángulo. Aquí, tipo uno. Hagamos esto, um, blanco. Puedes seleccionar nuestros estilos de color preexistentes lo hacen blanco. Y aquí hay un caso donde sí quiero que esté, ah, ah, en la alineación del párrafo central, pero también en medio del cuadro de texto. Y sigamos adelante y hagamos de este el 42 punto que pasaré a un 22. Parece que, Sí, vamos a hacer este 42 punto. También voy a copiar el té de leche regular y moverlo hacia la derecha y solo teclear Q dos. ¿ Por qué? Por la cantidad. Y seguir adelante y hacer el cuadro de texto igual con. Y ahí tienes. Se puede ver la cantidad ahí, ¿verdad? Siguiente cosa arriba eres tú. Enhorabuena. El, um la X que hicimos aquí dar click y copiarlo. Simplemente estás copiando el componente y vamos a retroceder y revertir esto. Así que vuelve atrás y hazlo un regular, Uh, no 90 grados. Y ya puedes ver ahora tenemos el símbolo más. Voy a copiarlo aquí y convertirlo en el símbolo menos. Ya que aún no has hecho clic en nada, el usuario Esto está deshabilitado. Entonces vamos a hacer de este el color gris frío y tirar de esto hacia atrás alrededor de 20% de capacidad, tal vez como 40% de capacidad. Por lo que eso habilitaría si agregara más de uno. Se puede subir hasta 23 y luego volver. Teoh. 2 a 1. De acuerdo, y luego vamos a copiar aquí este té de leche regular y hagamos un botón para la edición. Y como esto es de grifo herbal, esto es algo con lo que puedes involucrarte en el producto. Hagámoslo el color de acción primaria. Eso se puede ver aquí, y yo también quiero hacer uno para el remove y hacer un poco de espaciado. Aquí, vamos a nuestro pequeño visual, um, jerarquía aquí. Hagamos una línea entre estos dos. Por lo que acabo de agarrar la herramienta de línea. También puedes clave rápida que es L. Y también hagamos de esto el gris fresco y tonificarlo de nuevo a aproximadamente 20% de capacidad. Ah, tal vez 30% de opacidad ahí, ¿verdad? Bastante simple. Echa un vistazo a la página que estamos construyendo. Vamos a divertirnos un poco y prototipemos esto aquí. Entonces si seleccionas el uno y el círculo y el ícono del auto de compras y haces un comando G, que es grupo o puedes hacer clic derecho e ir a selección de grupos. Vayamos a la pestaña de prototipos aquí. Ahora arrastremos este pequeño brazo prototipo de producto bocoso a la pantalla de check out aquí desde la experiencia de compra que tenemos, queríamos estar al grifo. Queremos que se mueva aquí. Muévete y queríamos venir de abajo. Algunos se mueven hacia arriba. Y ahora para la X. Sigamos adelante y arrastrémoslo de vuelta a la pantalla de compras aquí, y queremos que eso se mueva y se mude aquí abajo. Entonces es bueno de nuestro prototipo y veamos cómo se ve eso aquí. Pero una pulsación, el botón de reproducción o el botón presente, es posible que ya tengas la pestaña abierta. Sólo tienes que ir caminando a esa pestaña y puedes ver aquí. Cuando presioné el icono de la compra, se desliza hacia arriba, la pantalla se desliza hacia arriba, y cuando presiono la X, se desliza hacia abajo Muy bonito. Si quieres agregar más pantallas para que se muestre cómo se ve si agregaste más números aquí, presiona que quite. Siéntase libre de hacer eso. Voy a yo solo suelo elegir no hacer eso, Um, Um, por estos solo esto más sobre enseñarte la herramienta. Pero puedes ir a hacer eso en tu propio tiempo si quisieras. Um, este punto, sólo vamos a copiar. Um, este texto de cantidad del prototipo final, solo puedes seleccionarlo. Copiarlo Ahora que ya sabes usar la herramienta de texto. Um, transmites Construye esto si querías, pero vamos a seguir adelante y copiarlo. Acelera un poco las cosas. Simplemente pégalo. Recuerda seleccionar el tablero de arte. Si tan solo seleccionas dentro de nuestra pizarra, ¿ ves cómo pega? Um, no en su lugar. Pero si seleccionas el tablero de arte desde arriba aquí y presiona comando v it pega en su lugar desde donde lo copiaste. Y luego hicimos una línea aquí para esta selección desplegable. Agarramos esa línea. Y vamos a ritmo que aquí y darle a esto una sección en caso de que tuvieras más de un derecho En este punto, lo que podemos hacer es que quieras tener un anuncio o un botón de cancelación que puedan usar Ercan o siguiente y botón de cancelar que el usuario pueda comprometerse con en cualquier momento. Entonces si quieres? Simplemente cancela todas las cosas por las que pasas en la experiencia del carrito de compras. Eso puedes tener y aquí tendremos los siguientes botones que nos ayudarán a ir a la siguiente página. Entonces lo que voy a hacer es que voy a añadir aquí el botón de agregar. Voy a hacerlo menos ancho. Lo voy a copiar por aquí. Y creo que en realidad son el original con podría estar bien. Probablemente sigamos el con aquí alrededor de 1 45 de ancho. Ahora voy a copiarlo. Eso se ve bien. Está bien. Y lo que voy a hacer aquí es que voy a desprender este componente, así que lo voy a quitar como componente y traerlo de vuelta a sólo un elemento de diseño. Entonces, ¿lo que haces es correcto? Haga clic en el botón. Bueno, para seleccionar primero el botón, y luego a la derecha, haga clic en él y presione separar instancia. Y se puede ver que pasó de una Ah púrpura, caja de límite a una selección de cuadro de límite azul que indica que ya no es un pick un componente. Ahora, voy a cambiar el texto a este botón de aquí a siguiente, y voy a cambiar el texto aquí por éste para ser cancelado. Y lo que voy a hacer aquí es que voy a agarrar este cuarto trasero y voy a añadir voy a quitar el campo. Entonces ve este menos aquí a la derecha, Pero quita el campo. Yo quiero añadir otro sentimiento. Simplemente presiono otra vez el plus, pero quiero agregar un trazo, y quiero hacer el trazo. El color primario que teníamos para que puedas ver aquí tiene el a Voy a mover estos un poco a la izquierda, centrarlos hacia arriba. Y ahora tenemos un botón primario y un botón secundario. Entonces vamos a hacer este botón secundario. Ah, componente para que lo podamos reutilizar. Por lo que de nuevo, he agarrado el botón de cancelar. Voy a la página de la Biblioteca de Componentes aquí a la izquierda, y la pego en esa página. Voy a seleccionar todo. Ve al icono del diamante aquí, la parte superior crea componentes. Y donde eso dice, botón primario, llamémoslo secundario. Se cambió. El fueron cancelados a sólo discurso de texto. Y Eric, volvamos a nuestro aprendizaje Paige aquí, y vamos a colocar ese componente que cancela componente botón en estas páginas. Por lo que presioné la pestaña de activos en la parte superior, dejada aquí por las capas. Puedo ver el botón secundario. Aquí hago clic y lo arrastro al prototipo. Pégalo justo encima de ese botón de cancelación. Elimina el botón de cancelar. Seleccioné el tablero de arte aquí en el lugar de prensa superior. Espero que no pagaran en algún lugar. Un segundo. Por lo que ahí tenemos el botón de cancelar. Voy a copiarlo. Mi pegado en el tablero de arte. Por lo general, si originalmente no pasas este botón en el tablero de arte en sí, no pagará en algún lugar como si hubiera pasado antes. Entonces déjame seguir adelante y bajar esto. Bien. Ahora bien, así es. Encima del botón de cancelar, voy a mandar. ¿ Ver? Y ahora voy a seleccionar ese botón de cancelar, que no es el componente y se elimina. Y ahora voy a seleccionar el tablero de arte, pegar en su lugar, y luego cambiar que el texto de este componente ahora haciéndolo una instancia de ese componente y vocación. Cancelar. Está bien, así que sigamos adelante y hagamos que el botón de cancelación vuelva a la pantalla original de la compra aquí que no tiene la notificación para el carrito de compras, y todavía estábamos queriendo la misma interacción aquí. Dedo del pie desliza esta página hacia abajo para que puedas ver cuando hago clic en ella, se desliza hacia abajo. Queremos que el siguiente botón vaya a la siguiente serie de páginas aquí. Entonces si vuelves a la pestaña de capas aquí y miramos el prototipo final, la siguiente serie de páginas aquí es configurar mi dirección. Por lo que la entrega de la Boba, um, terminará en mi dirección que introduzco aquí. Entonces vamos a tener la flecha de atrás aquí, Así que volvamos a nuestro aprendizaje. Paige, vamos a agarrar este tablero de arte aquí. Qué es la opción de retención Haz clic y arrastra y mantén pulsado el turno y vamos a copiar esta página. En este punto, vamos a agarrar el icono de flecha. Entonces si vas a los bienes de diseño que creé por aquí y agarras este icono de flecha Presiona Comando, mira, y vamos a guardar la X aquí por ahora, solo por posicionamiento de la flecha da click en la pantalla de check out que estamos en aquí mismo, la nueva que copiamos. Sigamos adelante y nombremos esta dirección. Por lo que hice clic en el tablero de arte doble clic en la capa de direcciones de la izquierda y puedo cambiar el nombre. Voy a pegar esto en su lugar, Pegue esto en el tablero de arte, colóquelo justo alrededor de la posición de la X, cópielo, borre la X presione la dirección. Yo arte tablero la parte superior aquí y pego esa flecha. Ahora se llama esta dirección aquí y sigamos adelante y eliminemos todo esto. Estos elementos aquí. Entonces vamos a prototipear esto. Por lo que la siguiente pantalla aquí va a ir a la pantalla de direcciones. Pero en este caso, todavía vamos a tener que estar de grifo aquí. Nos vamos a mudar en lugar de salir. El tuyo podría ser en instantáneo o inteligente animate. Vamos a crear mudarse. Y queremos que éste se deslice de izquierda a derecha, y queremos que aquí se mueva la flecha de atrás. Pero en lugar de entrar desde la izquierda, queríamos entrar desde la derecha para que se mueva hacia la derecha. Por lo que entrar permite que esta pantalla de direcciones se mueva desde la izquierda y cuando nosotros, cuando decimos salir, permite que esta pantalla que hemos seleccionado salga del camino y queremos ir a la derecha. Entonces a veces tú. Si no está claro cómo estos trabajos acaban de conocerse, haz thes selecciones y luego entra en tu prototipo y ve a jugar con él en el prototipo. Y te ayuda a encontrar Hallows Air trabajando para ti para que puedas ver lo siguiente esto se va a deslizar en esta página de direcciones. Si quiero volver, puedo volver atrás. Y es una interacción bastante común ver esto deslizarse hacia arriba. Ver a la X ir a continuación. Y ahora entramos a un Siris de botones traseros y pantallas traseras. De acuerdo, entonces en este punto, necesitamos poner la información de la dirección en. Entonces voy a volver a algunos de los componentes que ya hemos tenido. Entonces si recuerdas, construimos aquí en la pantalla de activos. Construimos algunos componentes por defecto de forma. Entonces vamos a agarrar ese componente, haga clic y arrástrelo a la pizarra de arte. Había uno de los incumplimientos. Llamemos a esta dirección. Y como esta aplicación ya conoce mi nombre, ya he iniciado sesión en ella y me he inscrito previamente y le doy mi nombre. Vamos a agarrar el formulario de enfoque lleno aquí y podrías ver si haces click en un, um en un componente y te llevaremos a ese componente si haces click y arrastras. Así es como lo usas en el tablero de arte aquí. Así que ya tengo, ah forma de entrada que he creado que tiene. Ya tenemos el que es un foco ST input. Entonces sigamos adelante y digamos nombre aquí y prepoblaremos esto con mi nombre y sigamos adelante y cambiemos el texto por todo minúscula. En este momento tenemos el campo de dirección. Ya que esta es una aplicación que solo funciona en San Francisco, vamos a teclear en San Francisco y vamos a hacer este 30% de opacidad. Para que, um, en realidad, antes de hacer el San Francisco necesitamos poner el departamento o el dulce aquí. Está bien. Y ahora, ya que esta no es una aplicación que Onley usa en San Francisco, tecleemos en San Francisco como ciudad, y sigamos adelante y por defecto que, um, son hacer la opacidad 30% opacidad. Por lo que está deshabilitado. El vestido tiene que estar dentro de San Francisco. Está bien, y luego sigamos adelante y veamos cómo hace el producto que te da todos los atributos de espaciado . Por lo que está distribuyendo por igual estos campos de formulario para nosotros a 20 píxeles cada uno y tuvimos el estado California. Y lo siguiente que teníamos aquí fue asegurarnos de que esto esté igualmente distribuido aquí. Teníamos el número telefónico aquí. Está bien. Bastante simple, ya que ya hemos tenido estos componentes construidos. Um, voy a revisar dos veces, pero ¿la página final? Sí. Se ve bien. Ya tenemos esto. Prototícala para arriba, para que puedas ver. Así es como luce eso. Voy a continuación. Ahora tenemos la dirección. Voy a copiar esta dirección, opción de retención, dando click en el tablero de arte y turno. Y voy a presionar. Voy a hacer doble clic en la capa de este tablero de arte y solo llamarlo un vestido uno. Muy bien, Entonces en este punto, voy a copiar el teclado que tenemos del log in. Sólo mando. Verás, voy a seleccionar el comando de dirección V y compré un bang, pero un boom. Tenemos la pantalla del teclado. Ahora, sigamos adelante y solo pre poblemos los tres aquí. Entonces si puedes ver, tengo el componente para la entrada activa Quédate ya para estos campos de formulario. Algunos simplemente van a copiar este cambio de opción de retención y arrastrarlo y simplemente llevar esto a la parte superior de todo el número de teléfono y el departamento y la dirección. Entonces voy a mandar ¿Ves? Ahora copia estos, y voy a borrar el departamento, el número de teléfono, y voy a ir a seleccionar la pizarra de arte otra vez. Comanda V y coloca los aquí. Entonces en este thes que pegan en su lugar. Ahora tengo la dirección, mi tipo en la dirección, y sólo vamos a poner, como, como, 111 Aw, calle Noboa. Y lo haremos. Aquí estaba apartamento me corté dulce y sólo hagamos 123 por el departamento. Y entonces teníamos el número telefónico aquí. Adelante y agarra aquí a Aaron Lawrence y hagamos el 1112225555 como número telefónico. De acuerdo, a estas alturas, este botón go necesitamos hacer esto dicho hecho. Entonces si seleccionas el go, sigamos adelante y cambiemos el texto de nuevo a Roboto para que podamos cambiarlo y presionar Ah, doble clic en el cuadro de texto y llamarlo hecho. Y lo que eso hará es que no te permitirá avanzar. Simplemente desliza el teclado hacia abajo y puedes ir a ah, el siguiente botón aquí y pasar a la siguiente pantalla. Entonces este punto, voy a aguantar opción. Voy a hacer clic y arrastrar este prototipo móvil o tablero de arte móvil y hacer una duplicación de la misma. Voy a Ya puedes ver hasta dónde estaba la figura inteligente. Se dio cuenta de que copié esta nuestra pizarra. Y cuando dejé ir, cambió la dirección de uno aquí a dos y noté que siempre estaba numerando tableros de arte . Por lo que acaba de empezar automáticamente a numerar de manera incremental mi tablero de arte. Herramienta muy inteligente. Voy a borrar el teclado, y ahora es prototipo esto arriba. Entonces voy a volver a mi ficha de prototipos aquí. El top, derecha, voy a dar click en él y vamos a seguir adelante y dar click en la dirección, el departamento y el número de teléfono. Aquí, vamos a hacer un comando G o un clic derecho y simplemente agrupar estos como una sola selección y seguir adelante y arrastrar el prototipo brazo bobo a la siguiente dirección. Una pantalla y queremos arriba pero solo queremos instantáneo. No, Um, no queremos que pasen cosas extravagantes aquí en este punto. Vamos a seguir adelante y seleccionamos el botón hecho aquí y pinchemos y agarramos el brazo bobo. Haga clic en él al tablero de arte, dirigido a y al grifo y de nuevo. Instantáneo. Nada de fantasía. De acuerdo, entonces ahora ¿qué pasa si te metes temprano en la dirección? El apartamento o el número de teléfono es? Obtienes el teclado. Simplemente lo vamos a autopoblar por ahora en el arte. Pero si quieres hacer pantallas individuales para cada una, ahora sabes cómo hacerlo. Y luego si presionas don , baja un teclado. Quién puede pasar a la siguiente pantalla aquí, que es en poner los detalles de su tarjeta de crédito. Muy bien, tan bien. Voy a copiar esta dirección uno aquí sosteniendo opción. Selecciono el tablero de arte, haga clic en él, opción de retención para obtener la flecha doble, haga clic y arrastre shift o de nuevo. Podría simplemente copiarlo, y puedo mandar V y me lo va a pegar. Entonces comando ver comando ser, Vamos a llamar a este pago y llamarlo uno. Y vamos a volver a etiquetar la parte superior aquí al pago y vamos a entrar en nuestra pestaña de prototipos aquí, justo aquí. Vamos a rab la flecha porque la flecha ahora irá a abordar donde antes de esta era iba al check out. Ahora el botón Atrás y la flecha irán a la pantalla de pago. Entonces otra vez, nada de fantasía. Nosotros solo queremos en tap. Ah, y nosotros sí. ¿ Queremos que se mueva? Sí, correcto. Y queremos ir a la derecha. Entonces sigamos adelante y eliminemos algunos de estos aquí y vamos a ver cómo se ve eso en el prototipo dijo presiono siguiente esperanza que no funcionó. Entonces vamos a ver qué pasa aquí arriba. No, uh, uh, conectamos el siguiente botón a esta pantalla. Entonces vamos a agarrar a continuación. Y vamos a agarrar el prototipo brazo gooey conectado al Pago uno. Y queríamos mudarnos aquí. Entonces queremos al grifo, mudarnos y queremos entrar desde la izquierda y luego queremos la flecha aquí al salir y queremos salir de la derecha. Entonces para volver a través de eso, aquí está nuestro cheque que tenemos a continuación. Aquí está la información de Theodore s. El número de teléfono Prensa hecho. Presiono el siguiente botón, y esta página va a entrar desde la izquierda, se va a mover desde la derecha. Eso se puede ver. Y entonces esta pantalla de aquí se va a mover hacia la derecha para que veas cómo ese movimiento se mueve a la izquierda . Nuestro siguiente botón aquí dice que esta página se va a mover desde la izquierda y la flecha aquí, conectándose a la dirección a pantalla va a salir del camino hacia la derecha. Y eso es lo que parece. Muévete, muévete. De acuerdo, vamos a ver los detalles del pago. Lo que teníamos aquí fue, um, teníamos los detalles de la dirección en la parte superior. Entonces sigamos adelante y agarremos el té regular con leche y el dulce semi, uh, el texto semi dulce y medio hielo aquí, solo peguémoslo directamente en el mismo lugar en la pantalla de pago. Y vamos a cambiar esto a entrega o entregarlo a. Y solo introduzcamos la información que hicimos en la última pantalla aquí. Entonces tenemos mi nombre. Tienes a Aaron Lawrence. Contamos con la calle 111 Boba y tenemos el número 111 o 123 para el departamento. Y tenemos el número telefónico, que era 1112225555 Muy bien, genial. Entonces en este punto, vamos a arrastrar hacia arriba otro de estos, um, componentes de forma que hicimos. Entonces si vamos a la a las pantallas de activos de la izquierda aquí, quizá vayamos a las pantallas de activos de la izquierda. Agarremos el formulario predeterminado. Ponle eso a la pizarra de arte aquí. Y este va a ser nombre en tarjeta. Yo estoy en un ejemplar. Este es pozos al espaciado 20, y éste va a ser un número de auto, luego arrastrar. Um, click, Mantener, opción y turno. Copia esta tarjeta número uno aquí. Y llamemos a ésta la fecha de caducidad. Y lo que voy a hacer aquí es que voy a seleccionar el elemento de línea. En realidad, lo que voy a hacer es agarrar un rectángulo aquí y sólo hacer uno negro. También puedo hacer clic en el que la dejo caer, haga clic en el fondo para que sea del mismo color que el fondo. Y sólo quédate ese dedo del pie. Oculta aquí este documento de formulario. Lo que pasa cuando creas un símbolo tienes una instancia es que puedo crear el inicio. Puedo cambiar los estilos de la misma Como puedo cambiar. El color puede cambiar. El pastoreo aquí puede cambiar los estilos de ese componente. Pero en realidad no puedo manipularlo como no puedo entrar en esta línea aquí y hacer diferentes anchuras fuera de las líneas. Podía ver que todavía no me dejó hacer eso. Por lo que lo mantiene bastante fiel al componente. Entonces lo estoy haciendo aquí es que sólo estoy fingiendo. Se puede ver que tengo esa larga fila. No quiero esa línea ahí porque quiero poner el cvv encima de eso. Entonces lo que voy a hacer es agarrar esta fecha de caducidad. Voy a pagar a alguien como, click derecho, mover esto al frente y voy a llamar a éste el cvv. Sólo un pequeño campo aquí para tres números, y yo voy a hacer lo mismo. Voy a crear aquí una caja negra y simplemente la capa encima de la parte superior. Puedo presionar I para obtener la tecla rápida para obtener el cuentagotas y seleccionar el fondo. Y tengo el negro para que veas aún tengo los componentes que estoy usando, pero he creado espacio para ellos. Y de esa manera, si alguna vez quiero cambiar este componente, Maestro, no desconecté estos dos componentes y tengo que volver a entrar y volver a cambiar estos. Está bien, Genial. Entonces en este punto, sigamos adelante y pongamos el total que teníamos. Entonces creamos un elemento total aquí, y hemos mostrado el total aquí está bien, que es 9 49 Y sus mejores prácticas antes de comprar algo es ver el total en que tu compra aquí para poner eso centrado. Y tuvimos nueve, creo que 49 como el total. Aquí, vamos a cambiar este botón para pagar. Y ahora estamos en bastante buena forma. Entonces ahora que presiono el botón Atrás y pongo toda la información de dirección en presiono siguiente Nam en la pantalla de pago aquí, casi termino con el pago. Entonces vamos a Ah, vamos a poblar esto realmente rápido usando el, um las formas que creamos que están en el estado activo. Y entonces lo que voy a hacer aquí es que voy a copiar este pago. No se aburren. Estoy dando click en el tablero de arte sosteniendo opción y turno, arrastrándolo hacia la derecha, y he hecho una copia de la misma. Voy a ir a mis bienes aquí. Voy a agarrar mis componentes que he creado. Recuerda este formulario Enfoque. Um, estado activo que tenemos. Iba a reemplazar todos estos aquí por este componente, así que solo voy a poner una habitación justo encima de la otra por ahora mismo. Voy a agarrar los cuatro de, um , comando, Ver mis borrar estos aquí, y voy a reemplazar los activos aquí. Correcto. Para que se pudiera ver aquí. Necesito poner esta forma debajo del rectángulo, por lo que le da algo de espacio. Y también necesito agarrar el rectángulo que creé aquí. Se puede ver cómo hago eso es dar clic y arrastrar desde la derecha que selecciona todos los elementos aquí para poder seleccionar más de un elemento. Seleccione todos estos elementos. ¿ En serio? Sólo estoy tratando de llegar a estos dos tratando de llegar a este formulario de entrada lleno y este rectángulo aquí. Entonces ahora los tengo también. Ahora voy a sostener turno. Voy a dar click en el título y poner componente aquí para el cvv. Y ahora he d seleccionado eso. Y yo sólo tengo el rectángulo aquí. Entonces ahora que tengo eso seleccionado, voy a hacer clic en el rectángulo en el panel de capas de la izquierda y voy a mover eso por encima este componente. Está bien, así que sigamos adelante y cambiemos estos. Entonces teníamos nombre en tarjeta, y solo usaré mi nombre por ahora. No voy a poner los detalles de mi tarjeta, pero, um, eso cambió el texto aquí a caso original y luego tuvimos, um los detalles de la tarjeta son los números. Entonces número de tarjeta y luego seguir adelante y mantener opción y presionar la letra. Ocho golpearon cuatro, hacen cuatro balas, hacen otras cuatro balas, y luego solo van 1111 Siempre expone el de la izquierda desde los últimos cuatro de esos dígitos de aquí. Voy a seleccionar las fechas de caducidad y voy a poner yo diría 01 2020. Y voy a hacer el cvv aquí cvv y fue 2123 Cool. ¿ Verdad? En este punto, necesitamos también el teclado. Entonces es sólo agarrar el teclado aquí que creamos para el tablero de arte de direcciones, Pégalo en el pago. ¿ No son pájaro que tenemos aquí? Está bien. Y ahora estamos en buena forma, así que sigamos adelante y prototiquemos esto. Simplemente selecciona todos estos componentes que hicimos aquí, ve a la pestaña de prototipos. Quieres un grupo estos adelante y click derecho. Consiguió una selección de grupo o comando G. Y adelante y flecha esto a esto. Agarra al pequeño bocín Aero a este tablero de arte aquí. CNC está conectado ese tablero de arte. No queremos nada elegante solo encima. Um, cuando sí te mudas, es solo instantáneo. Y eso abre el teclado solo prepoblará todos estos campos de formulario. Y luego voy a copiar esto una vez más aquí, y voy a seleccionar el botón hecho. Voy a arrastrar el pequeño prototipo brazo bobo a la pantalla de pago tres. Y en esta interacción aquí, solo queremos en tap Instant y vamos a eliminar el teclado. Y entonces aquí tenemos la paga. Pero al ir a algún lado, no queremos que eso funcione ahora mismo. Y también lo tenemos aquí. Tienes opciones en tu UX aquí para esto. Podrías hacer esto, um, 30% de opacidad hasta llenar toda la información. Una vez que lo llenas todo, va a plena capacidad. Puedes mantenerlo 100% que hacer estados aéreos para estos, donde te pones un poco como la línea se pone roja y dice, um, te ves como algo así y las líneas se ponen rojas indicando que siguen siendo información a llenar. Um, pequeñas cosas que piensan en tu UX. Si tienes curiosidad por alguna clase ah ux, tengo clase aux que puedes echar un vistazo a dos bajo mi nombre. Um, pero para este caso, solo quiero enseñarte Ah, una experiencia de aplicación móvil y cómo usar el estigma para construir eso. Está bien, así que sigamos adelante. Um, tenemos ese prototipo. Vayamos a revisar eso. Por lo que hago clic en los nombres aquí pre poblar, tener la prensa de teclado hecha, y ahora estoy listo para pagar. Entonces lo siguiente que queremos hacer aquí es que quieres agarrar esa pantalla de carga que teníamos aquí? Adelante y agarremos el que hicimos aquí en un principio. Después de que te conectes, lo voy a copiar, y voy a ir a esta sección. Presione el comando V y he colocado tablero de arte en mis diseños. Voy a quedarme aquí el, um, um, el regalo del animador GIF del cargador. Simplemente borra el logo, y voy a copiar. Um, en realidad, sólo agarrar este texto de entrega, agarrar esta pantalla de carga y ver cómo queda la línea. Yo lo quiero centrado en línea. Ahora solo quiero centrarlo justo debajo de ese regalo de carga. Ahora, también quiero mantener el cuadro de contorno de texto igual con del tablero de arte. Y cuando tengo eso y el párrafo centrado con eso mantiene este texto directamente en el centro y vamos a seguir adelante y cambiarlo a presentar pago, así como así. De acuerdo, entonces en este punto, solo podemos seleccionar el botón de pago, clic en el prototipo que queremos en la parte superior. Aquí no hay nada de fantasía. Tan solo instantáneo. Simplemente ve directo a presentar el pago y vamos a ver cómo se ve eso. Por lo que haces click en el pago y ahora estás en la pantalla donde está enviando el pago. De acuerdo, así que el finalizar nuestra experiencia de flujo de trabajo de check out, queremos mostrar el té Boba en tiempo real siendo entregado a su domicilio con una serie de pantallas y eventualmente conseguir entregados aquí al final. Está bien, genial. Entonces volvamos a nuestra pestaña de aprendizaje Paige aquí y vamos a copiar esta pantalla de carga. Y cambiemos el nombre de esta pantalla de carga a entrega y haremos entrega uno. Vamos a hacer click fuera del tablero de arte. Basta con hacer clic y arrastrar para seleccionar el regalo de carga y el pago y simplemente eliminarlo. Y recuerda, teníamos este mapa aquí de San Francisco. Vamos a agarrar este mapa. Entonces si solo recuerdas, solo tienes que hacer clic en él ya lo recortó. Ya está en la posición correcta. Simplemente manda, Ver, y luego pasa a esta entrega un tablero de arte, seleccionando el tablero de arte y mando v Ill ritmo justo en su lugar. Está bien. Y lo siguiente es, vamos a nuestro tablero de arte de artículos de diseño aquí a la izquierda, y agarremos este pequeño ícono de Boba con el círculo blanco detrás de él. Comando ver, vamos a copiarlo. Vamos a pegar eso en algún lugar de nuestra aplicación. Digamos que tal vez aquí y ahora vamos a agarrar el icono del pin del mapa aquí y otra vez, como explicaría en el último video. Si quieres un montón de iconos, sólo tienes que ir al sustantivo proyecto dot com type en el icono del mapa. Podrías conseguir un montón de estos pequeños pines de mapa que quieres o incluso simplemente teclear en mapa y conseguir un montón de thes aquí que querías, verdad? Entonces tengo uno aquí en el diseño, mercancías se aburren. Simplemente ve a agarrar ese comando, mira, y estoy sosteniendo turno de nuevo mientras otorgo click y drag ven a la tabla de arte final aquí que tenemos. Colocemos el ícono del mapa. Qué hacer en algún lugar dirá, como en algún lugar de aquí, eso está bien. De acuerdo, Y entonces la próxima vez que te quiero enseñar aquí es la herramienta de pin. Entonces esa es esta pequeña sección de alfileres de aquí. Esta es una herramienta de dibujo y te permite crear cualquier forma personalizada que te gustaría. Se puede ver que sólo puedo dar la vuelta y es como conectar los puntos. 6. Diseñar las screens de perfil: Está bien. Bienvenido al quinto video de cómo construir una aplicación móvil usando fig MMA designed toe en este video, vamos a cubrir el flujo de trabajo ah profile. Por lo que ya hemos creado el login, Regístrate de compras, echa un vistazo a todas las cosas impresionantes y tendremos el video aquí el cual será el último video de nosotros diseñando juntos. Um terminará con el perfil, um, tabulador que construimos antes. También tendremos otra serie de videos adelante solo para hablar de otras formas en que usas Fig Mahato. Invita a las personas a tu diseño y colabora con ellas cómo exportar activos, Uhm y dejar que los ingenieros inspeccionen tu diseño en busca de atributos de código. Hablaremos de fig, teclado MMA. Te mostraré algunos enchufes de higment y cómo conseguir kits booey en línea. Y luego cómo crear comentarios y tengo algunos pensamientos finales y de cara al futuro. De acuerdo, entonces volvamos a nuestro expediente aquí y otra vez. La pantalla que vamos a estar construyendo hoy es esta pantalla de aquí, que es una vez que obtienes una vez que toques en la pestaña, son donde está el perfil. Te lleva a la pantalla de perfil aquí puedo cambiar entre pedidos y perfil, ver una foto de mi Bueno, no soy realmente yo, pero algunos rastrean en línea, y tiene algo de mi información de perfil que podría editar. Esta información puede agregar una foto Puedo cerrar sesión también. De acuerdo, así que volvamos a nuestro archivo aquí y pasemos a donde lo dejamos último, que, que, um, estaba terminada la experiencia de check out. Tenemos un prototipo bastante completo de flodge para una experiencia de usuario de entrega boba. Um, pero vamos a seguir adelante y agarrar las piezas finales de esto. Entonces vamos a agarrar la, um, página de registro aquí y vamos a copiar ese comando. A ver, llevemos eso aquí hasta el borde final. Y vamos a pasar eso por aquí. Dale un poco de espaciado, y cambiemos el nombre de esto como nuestra pantalla de perfil. Entonces de nuevo, acabo de seleccionar esta pantalla aquí, y escribí, hice doble clic en la capa de la izquierda y presiono perfil, que, ojalá, en este punto, estás consiguiendo el ahorcamiento de copiar tableros de arte y renombrarlos a la izquierda. Otra cosa que necesito de esto es que voy a necesitar esta pestaña son de la pantalla de compras aquí . Entonces sigamos adelante y seleccionemos ese comando. A ver, y vamos a seguir adelante y ritmo que en esta pantalla de perfil tenemos el comando V y que va a pegar en su lugar. Quitemos todo el formulario, los campos, los botones ahí, qué hay de quitar este logotipo y agarremos estas dos pestañas y solo moverlas hacia arriba solo un poquito sobre su bien. Por lo que en este punto, queremos que el estado activo de este sea el ícono del perfil y volver a un estado por defecto para esta ilustración de té Boba. Entonces vamos a agarrar el ícono del perfil aquí. Vamos a sentir que ya la tenemos puesta en White. Hagamos 100% la opacidad. Está bien, genial. Lo siguiente que tenemos que hacer es agarrar esta ilustración de té Boba aquí y lo que hay que seguir adelante y simplemente agregarle una sensación. ¿ Qué está haciendo blanco a todo ese dedo del pie morado? Y sigamos adelante y hagamos de esto un 40% de opacidad, en realidad, 30%. Ahí vas. Ahora es muy claro para el usuario que están en el grifo de perfil después de que tocaron en él, y que estos son Estados por defecto. Y este es el estado activo. Entonces vamos a cambiar el registro y el texto de inicio de sesión. Llamemos, inscríbase perfil y llamemos al inicio de sesión aquí. Órdenes. Está bien. Bastante bastante simple. De acuerdo, ahora lo que vamos a hacer aquí es hacer el espacio para la foto de esa persona, así que sólo agarra el círculo aquí. Quickie también es cero, y hagamos un pequeño círculo aquí. ¿ De acuerdo? Entonces voy a tener un video en la próxima serie. Um, unos 21 o dos adelante para hablar de enchufes de figment. Pero también puedes conseguir algunos enchufes ahora mismo. Y quiero mostrarles uno que uso todo el tiempo. Se llama contenido, riel. Y cómo llegar a ese enchufe es si vuelves a tu tablero de instrumentos, al hacer clic en las cuatro casillas aquí en la parte superior izquierda te lleva de vuelta a esta pantalla. Recuerdo aquí es donde se pueden crear archivos. Aquí también es donde agregas gente, que te mostraré en el siguiente video. En este punto, estás en los borradores aquí. Aquí es donde puedes crear tantas de estas tablas de arte como quieras. Si vas al enchufe aquí, verás todos los enchufes que puedes usar, y puedes ver este aquí. Se llama Popular para llamar contenido Riel. Si haces clic en contenido riel, también puedes buscarlo y presionar instalar. Se lo instalará en tu higo MMA, todo gratis para ti. Entonces, ¿por qué no vas adelante e instalas ese enchufe? Te daré un segundo. Es bastante rápido, también. Al igual que todos desinstalan esto e instalarlo va bastante rápido. Vuelve a mis borradores, y luego si quieres volver a tu archivo de clase ah, solo tienes que hacer triple click en eso. Estamos de vuelta en lo mismo que estamos. De acuerdo, Lo que es realmente genial de este plug in es que quiero llenar esto con una imagen este círculo. Por lo que en la parte superior aquí en nuestro menú, tenemos enchufes. Haga clic en el plug in y el que acabamos de agregar contenido. Riel. Ve agarrar contenido riel, y queremos avatar aquí. Entonces vamos a dar click en los avatares, y podríamos poner masculino, femenino o ambos. Algunos ponen machos. Basta con dar click en machos y se pre poblará esto con cualquier correo que desee. Se puede volver a hacer clic en él, y en otro, podría simplemente ir a través de él anuncio tanto contenido como quiera. Bastante bastante guay. También puedo simplemente tomar texto como Vamos a agarrar este texto de perfil aquí. Tú sólo me miras. Yo me daré nombres, números telefónicos, direcciones, números, fechas. Laura Epsom e te manda RL's, um asi va a pre poblar esta cosa para mí. Entonces no solo lo pienso y lo escribo todo simplemente bastante cool. Está bien, así que déjame cambiarme. Voy a cambiar una vez más, voy a agarrar esto. Agarró otro avatar. Muy bien, cogamos a ese tipo como ese tipo. De acuerdo, entonces en este punto, tenemos su imagen de perfil. Y ahora vamos a añadir el nombre. Entonces es sólo copiar este texto de perfil aquí. Haga clic y arrastre y mantenga presionado el turno mientras una opción y mientras hace clic y arrastre. Vamos a copiarlo. Está en una disposición centrada. Queremos que deje una línea para ahora mismo, así que queda en línea. Es Vamos a centrarnos en un poco. Y este fue el sistema de 19 puntos. Volvamos a un pensar que teníamos 16 regulares. Eso es perfecto. Vamos a agarrar 16 aquí y voy a estirar este texto y voy a volver a la alineación de texto no siendo centrada, sino en la parte superior, así como así. Y soy un tipo en la información de mi perfil que utilicé cuando me inscribí. Entonces era mi nombre. Aaron Lawrence. Puedes escribir el tuyo si quieres. Teníamos prueba en gmail dot com y vamos a romper a Aaron Lawrence en dos líneas en caso gente tenga nombres largos aquí. Y sigamos adelante y hagamos de esto el frío color gris aquí. Está bien, eso se ve genial. Tengamos un poco más de estilo visual. Agarremos un rectángulo. Simplemente puedes hacer nuestro o puedes ir a la herramienta de forma aquí y pongamos un rectángulo detrás de todo esto. Entonces aquí está mi rectángulo. Voy a agarrarlo del panel de capas de la izquierda y solo tienes que hacer clic y arrastrarlo y moverlo detrás de todo y vamos a seguir adelante y cambiar esto hacia arriba. Hagámoslo ese color gris frío que teníamos, y luego hagamos muy baja la opacidad en él Hagamos como Eso está bien. Hagamos de hecho otro color aquí. ¿ Qué es desprendido eso? Vamos a hacer Vamos a hacer un blanco y sólo bajarlo un 10. Eso todavía no funciona para mí. A veces el diseño visual Tú chico tipo de ir un par de rutas. Um, así que vamos a agarrarnos. Ah, color azul. Ahí vas. Ahora estamos llegando a algún lugar. Debería ser simplemente muy sutil. Voy a subir un poco la opacidad. Tienes 35% y vamos a usar algo en el medio. Irá sobre su, um, a 54 56 b como color. Es un color de fondo. Demos un trazo a esto, um, en esta imagen de perfil. Entonces está en un trazo aquí. Bueno, voy a ir con White por ahora mismo que soy un tono de vuelta. Pero hagámoslo, como, realmente grueso. ¿ De acuerdo? Creo que pienso por qué debería estar bien. De acuerdo, Así que ahora este Texas A se ve un poco pequeño. Um, Así que volvamos atrás y lo pongamos blanco. Vamos a darle un poco más de jerarquía visual y vamos a llegar al 19 punto Bold. Sí, así. Vayamos atrevidos. Está bien, eso se ve bien ahora, ¿verdad? Entonces lo siguiente que hay que hacer aquí es ir a agregar la función para agregar una foto. No lo vamos a crear prototipos, pero vamos a añadir el botón para hacerlo. Por lo que tengo este pequeño icono de la cámara. También agarramos el icono de edición. Por qué estamos aquí Encima en el tablero de artículos de diseño Arte. Volvamos aquí y pasemos esos a este tablero de arte. Pero deja estos aquí por ahora. ¿ De acuerdo? Agarremos este círculo aquí. También puedes simplemente presionar O en tu teclado y voy a mantener pulsada la opción shift. Al hacer esto, también podrías simplemente mantener el turno si mantienes la opción. Va desde el centro de donde estás haciendo clic. Si solo mantienes el turno, va de izquierda a derecha. Estoy sosteniendo turnos de opción. Puedo ir al centro desde donde hago clic y voy a hacer un pequeño botón de acción para subir la foto. No demasiado grande sobre eso de grande. Y como esto es algo que se puede hacer clic, vamos a hacer de este el color de acción y vamos a agarrar este ícono de la cámara y sigamos adelante. Voy a dar click derecho en él. Trae al frente mi reducirlo un poco. Voy a mantener turno cuando me rebajen. Si no sostengo turno, terminarás haciendo cosas como esta, lo cual no es bueno. Se quiere mantener la perspectiva de esa ilustración de la cámara. Está bien, coloca eso justo en el centro. me cayó un poco eso. ¿ Qué hay de un derrame cerebral? ¿ Qué hay en un trazo más oscuro, Como un trazo de tres píxeles a esto? Dale algo de separación de la imagen que se ve bien que pueda tocar esa cámara para meterme en mis fotos y seleccionar una nueva foto. Si quiero editar alguna de esta información aquí, voy a Ah, comprimiré el icono de edición. Vamos a seguir adelante y hacer eso también en color de acción para que puedas ver el color de acción aquí. Voy a copiar las órdenes aquí. Dejó una línea , la voy a cambiar a 100% de opacidad aquí. Y yo sólo voy a escribir la palabra añadida. Aquí, ponlo junto a ese ícono y muévelo hacia abajo. Está bien. Y eso me permitiría entrar en la edición de estos, um, esta información aquí. Está bien. Lo siguiente que hay que hacer es ir a hacer la página de pedidos aquí, así que es copiar esta página de perfil. Vamos por la izquierda aquí. ¿ Cómo se llama esta orden? Y otra vez, vamos a hacer este texto Tuvimos perfil era 19. Um, este texto de aquí fue, creo dijo a los 19 Bolds y hagámoslo blancos. Es Los blancos tenían 100% de opacidad. Hagamos este perfil aquí 19 puntos regular o livianos y vamos a hacer que ese 50% de opacidad. Y entonces cambiemos este rectángulo sobre las órdenes del dedo del pie. Y luego solo eliminemos todas las cosas del perfil que hicimos dado el trasfondo. Y en este punto, sólo queremos llamar algunos de los detalles que ordenamos aquí. Entonces vamos a agarrar una de las fotos, esta foto de té con leche aquí. Y vamos a agarrar esta información aquí. Entonces voy a agarrar la foto primero. Voy a pasar la foto a la orden por ahora. Justo en cualquier lugar es bueno. Voy a reducirlo un poco. Y también voy a agarrar la información del pedido aquí. Copia esto. Está bien. Y sigamos adelante y peguemos esto debajo de la orden aquí. ¿ Verdad? Entonces vamos a sacudir el, um lo llamaremos un té de leche. Aquí. Tomemos la información que dice Semidulce de leche, hielo medio, tapioca grande. Y cambiemos eso a, um, cantidad. Y pongamos uno aquí y centrémonos en eso. Vamos a centrarnos debajo del texto de té de leche regular aquí. Voy a hacer lo mismo con del tablero de arte. Entonces sé que está exactamente en el centro de ese tablero de arte. Cuánto de lo mismo al texto de té de leche regular, Pero se puede ver que tiene la alineación izquierda. Entonces vamos al área de texto aquí y lo que lo hace centrar la alineación de párrafos. Eso se ve bien. Está bien. Y entonces lo que vamos a hacer aquí es recortar este círculo aquí o esto. Ah, um, esta imagen aquí y convertirla en un círculo. Entonces vamos a seleccionar la imagen. Si vas dedo del pie de la parte superior aquí, donde tiene tu voluntad no tu dentro de tu altura Atributos. Ahí está el radio de esquina, um, campos aquí, adelante y presiona shift y la flecha arriba y simplemente hazlo un montón de veces. También puedes simplemente escribir alrededor de 100. Eso debería estar bien. Hagamos el con en él 1 90 por 90 y luego vamos a seguir adelante y volar un poco esta imagen . Entonces lo que puedes hacer aquí es si haces triple click en la imagen y luego vas a la herramienta de recorte en la parte superior. Ahora lo tengo recortado dentro del círculo. Aquí puedes agarrar la imagen y mantener el turno y solo volar. La imagen podría volarla así. Y voy a rebajar un poco este círculo. Estoy sosteniendo turno cuando bajé el tamaño, así que selecciono la esquina. Sostenga el turno, rebajarlo, adelante y tírelo por aquí. Mueve eso un poco hacia abajo. ¿ Verdad? Y también teníamos una línea que pusimos en algún lugar aquí en la página de check out. Teníamos esta línea. Vamos a seleccionar esta línea. Basta con copiarlo. Ahora volvamos a este tablero y vamos a sumar esto a un par de lugares. Lo vamos a pegar. Lo vamos a agregar justo encima de esa imagen. Dale algo de espacio, pero por debajo de la pestaña de órdenes. Entonces si tenemos más información sobre estos pedidos, puede desplazarse por debajo de esa línea. Y también vamos a centrar esto aquí. Y además añadir la fecha alguien una copia, esta cantidad y hacer la fecha Héroes lo dicen. 0103 1020 y el precio del mismo era un dólar o $9.50 49 centavos. Está bien, sigamos adelante y hagamos que el texto sea blanco para el total. Y vamos a hacerlo 19. negrita. Está bien, y sigamos adelante y tomemos una línea. Simplemente separe este orden aquí y podemos ADM O aquí abajo es que vamos. Lo que está bien si lo hacemos de esta manera, es si tenemos más órdenes que uno. Podríamos copiar estos y hacerlos un poco más pequeños. Podemos sumar un montón de años enteros. Queríamos decir que esto era como un Nord er de tres kaput ellos aquí. Y digamos que la cantidad fue de tres. Podríamos tener tres. Si fue como seis de estos, entonces podemos tener seis y todos tener diferentes sabores dentro de él. Por lo que este diseño escala para tener que esas diferentes variaciones. No tienes que hacer esto. Sólo lo estoy haciendo segundo, ¿ ves? Está bien, genial. Entonces, um, ahí está la página de pedidos. Adelante. Voy a volver un poco aquí. Vamos a seguir adelante y prototipos esto Así que vamos primero a la pantalla de compras aquí. Y vamos a agarrar este icono de perfil aquí, alejar el zoom. Es como que alejas realmente lejos para este. Presiona la pestaña del prototipo en la parte superior, ¿verdad? Agarra el pequeño brazo prototipo bocoso y adelante y conéctalo al perfil aquí. En este punto, queremos en tap. Y no queremos nada elegante. Tan solo instantáneo. Eso es todo. También queremos llevar esta ilustración Bebida de la Boba y conectar que de nuevo a la página de compras aquí, se puede ver y nada de fantasía. Tan solo instantáneo. Por lo que al grifo y al instante. Está bien. Y una cosa que tenemos que hacer también voy a copiar. Um, mi copia ese texto de orden aquí, y voy a hacer de este texto el, um 16 puntos regular al 100% de opacidad. Y haz de esto el color rosa o de acción y solo haz que esto cierre sesión y sigamos adelante y conectamos ese botón de cerrar sesión haciendo zoom. Agarró un pequeño enlace prototipo. O si solo lo mueves a la derecha, paseará la página por ti. Vámonos. Envió eso de vuelta a la pantalla de inicio de sesión aquí, Enfriar y por último pero no menos importante, conectemos los pedidos aquí a la pantalla de pedidos. Por lo que ordena en la pestaña de perfil a la pantalla de pedidos en tap, y queremos inteligente, animar. Y luego hagamos lo mismo para el perfil. Ah, texto en la pantalla de pedidos para ir a la pantalla de perfil en tap. Inteligente, animemos y sigamos adelante y echemos un vistazo a eso, ¿ verdad? Entonces, para volver a la pantalla de compras, toco en el perfil. Se puede ver un ir al perfil aquí si voy a las órdenes. El simpático, inteligente, animado aplicó la transición del rectángulo sobre las órdenes del dedo del pie. Hago perfil Aiken. No cierre sesión. Puedo volver a dar clic en el ícono de la bebida Boba, llevarte al centro, y puedo cerrar sesión. Me lleva a una pantalla de cierre de sesión. De acuerdo, así que esa es más o menos una aplicación funcional completa que acabamos de construir en cualquier lugar, todo el camino desde iniciar sesión en ordenar una bebida boba, usar múltiples interacciones, agregar la bebida, hacer deslizamientos, poner la información de la dirección, poner los detalles de la tarjeta de crédito, ver las pantallas de carga usando GIF animados, ver las transiciones de los retrasos de tiempo en las pantallas, llegar a una experiencia final aquí. Ver el té Boba ha llegado y después pasar a tus perfiles, tus pedidos y cerrar sesión. Está bien. Genial. Por lo que ese tipo de cubre en su mayoría todo lo que hemos hecho en construir la aplicación móvil para esta experiencia de té Boba bajo demanda. Quiero agradecerte si lo sacaste tan lejos por no sólo comprar la clase y pasar por la clase, sino simplemente seguir con esto conmigo aquí y pasar el tiempo en aprender algo como este diseño. A mí me apasiona mucho el diseño artesanal. Es un gran oficio. Si te estás metiendo en ello, es honorable oficio de corte, y toma tiempo y compromiso dedo del pie aprender. Y, um, y para desarrollar esto. Entonces gracias por tomarse el tiempo y desarrollar tu oficio conmigo. La siguiente serie de videos que terminaré aquí es, um, vamos a aprender un poco de cómo invitar a otros a tu pizarra, cómo exportar activos, inspeccionar código y tus diseños, teclado atajos, más de los enchufes de figment de los que llegaste a ver un pequeño adelanto de hace poco en este video , cómo crear comentarios, pensamientos finales, y en adelante todos los videos realmente rápidos que conjuntos toman un par minutos por recorrer, y ya completaste la mayor parte de la clase. Así que solo quédate con estos últimos videos para empatar todo. De acuerdo, bueno, gracias otra vez. Espero que te diviertas con tu prototipo, y te veré en los próximos videos de 7. Colaborar con los demás y exportar recursos de UI para la ingeniería: todos Bienvenidos al siguiente video. Por lo que este punto pasamos por la mayor parte de Sigma aprendiendo las entradas y salidas del diseño y las herramientas y todas las funciones para esos diseños en particular que creamos y el prototipado . La siguiente serie de videos es más alrededor de mostrarte cómo invitar a personas a tu tablero. Cómo exportó U. Y activos atajos de teclado, enchufes, cómo crear comentarios, algunos pensamientos finales yendo hacia adelante a los videos bastante cortos solo para mostrarte cómo el dedo del pie trabaja continuamente con Sigma como tú trabajar con equipos y trabajar con otros y cómo llegar a ser más eficiente con él. De acuerdo, así que sigamos adelante y veamos cómo invitar a otros y cómo se ve la colaboración en fig MMA, así como cómo exportar u I activos como iconos, um, e ilustraciones y cómo inspeccionar código para ingenieros. Entonces si vas a nuestro expediente aquí en el que estábamos y podemos ir a volver a nuestro aprendizaje. Paige, esta es la página donde creamos nuestro prototipo aquí. ¿ Tienes ganas de invitar a alguien a colaborar en este tablero aquí y tendrán acceso a todas las páginas de aquí. Más o menos todo este archivo. Todo lo que tienes que hacer es subir aquí para compartir, click en el enlace compartir, y tienes dos opciones. Podrás convertirlos en un espectador o editor. Entonces si eres permite que los pies vean las palabras de arte pueden meterse en los, um, um, tableros de arte. Echale un vistazo. Pueden mirar los prototipos, pero no podrán cambiar las cosas a su alrededor. No podrán diseñar como lo hicimos nosotros. Si los haces editor, entonces van a Van Pueden entrar en tu tablero de arte y pueden cambiar las cosas. Tomado, tomado, hacer más o menos acceso completo al fig MMA, igual que lo tienes. Y para la vista de ti solo fue eso es gratis. Podrás invitar a todos los espectadores que quieras a tu mesa directiva como has invitado a los editores de Mawr. Creo que tienes alrededor de tres que puedes invitar. Después de eso, comienzas a pagar por la herramienta, por lo que es más o menos gratuito para ti usar e invitar a tantos espectadores como quieras. Pero una vez que invitas a más personas a editar tu tablero, se convierte en un modelo de suscripción. Está bien, genial. Por lo que solo puedes pasar, invitar a tantas personas como quieras. Cómo se ve cuando están en tu tablero es bastante aseado. Esta es una de mis características favoritas en la fig. MMA. Um, así que digamos que he ido por aquí. Tengo un enlace, um, um, Ver o Editar aquí. Um, y he agregado a alguien o he hecho clic en la vista aquí en él. Y digamos que agregué, El correo de alguien puede que me ponga por ahora mismo. Ahí está mi email que le envié un email fuera. Quien reciba ese correo dice que es un ingeniero. Abrirán ese correo electrónico y tendrán acceso a Fig MMA en su escritorio en un navegador de Internet. No necesitarán instalar software. Será gratis para ellos. Acaban de abrir una ventana de navegador en su Internet, y tendrán acceso a este archivo como ven aquí, algunos en Internet. Ahora mismo, estoy en chrome y tendrán acceso a este archivo. Pueden funcionar y diseñar tal como lo hicimos nosotros, pero dentro del navegador. Y lo que está realmente limpio es si estás trabajando en tu expediente y esta persona entra al um la persona que invitaste entra a este tablero. Podéis ver sus bocas para que veas tengo dos A's con círculos morados aquí en la parte superior , ¿ verdad? Y uno es Aaron Lawrence diciendo que soy yo. Otro soy yo también, Pero esto sería que verás más de uno de estos pequeños iconos de perfil aquí en la parte superior. Y esas son las personas que están en su tablero ahora mismo trabajando. Entonces si me alejo un poco, podrás ver mi ratón desde el otro proyecto en el que estaba. Entonces déjame volver por aquí. Y así ahora estoy en la ventana del navegador. Yo soy ese usuario al que invité. Y si vuelvo a la Fig MMA, puedo ver aquí a mi ratón para poder ver a la gente en mi pizarra. Puedo ver lo que están haciendo en tiempo real, y podemos colaborar juntos. Es muchas veces que he usado esto abriendo un software para compartir pantalla o una videollamada ah con alguien, y estamos al teléfono. Estamos charlando juntos. También estamos trabajando juntos en Fig MMA para que podamos charlar. Puedo hablar con esta persona. Puedo ver sus bocas moviéndose y podemos colaborar juntos. Entonces es realmente genial. Se puede enviar esto a los gestores de productos. Ingenieros los invitan a colaborar contigo, y podrías verlos y espiarlos ya que continuamente trabajan en fig mo contigo, también pueden ver a tu ratón, para que sepan que estás en la pizarra. Y otra cosa que pueden hacer aquí es así que si quieres invitar continuamente a más gente al fig MMA, otro acercamiento a esto es que acabamos de invitar a alguien a nuestra junta o archivo aquí. También puedes crear equipos. Entonces aquí tengo un ah nuevo proyecto, un nuevo equipo, y comprimo nuevo proyecto aquí. Aiken escribe en un nuevo nombre de equipo y puedo crear un equipo por aquí y dentro de un equipo puedo Aiken invitar. Um puedo agregar tableros a este equipo, y podría invitar a la gente a solo este equipo y tener una serie de tablas. Para que así pueda tener mis propios proyectos personales en mis borradores, y puedo tener mis proyectos de equipo dentro de mi equipo aquí. También puedo ir e invitar a la gente a este equipo para que veas que tengo un tablero aquí. Tengo a mi equipo, y si quiero invitar a alguien, tengo que miembros y comprimir la invitación aquí y hago lo mismo. Puedo invitar a la gente a ver o editar, y tendrán acceso a todos los tableros dentro de este equipo. También puedo hacer algo de gestión de usuarios aquí. Aquí puedo cambiar gente de televidentes a editores. Puedes rebajarlos, y ahí es donde empieza a meterse. Un costo mensual es que quieres crear equipo para empezar a agregar editores a estos tableros. La mayoría de las veces, realmente no uso demasiado equipo. Yo solo invito a la gente a mis tableros aquí, y tengo ah, diferentes personas en diferentes tableros con los que trabajo. Y eso es casi el 90% de los casos es que solo estás invitando a la gente a través de Ah, ese botón de compartir en la parte superior derecha, y les estás agregando espectador en ello. Si quieres llegar a una corporación similar más grande, típicamente usarán esta sección aquí, que está creando un equipo. Está bien, genial. Una vez que tienes gente en tu junta, si son ingenieros. Una de mis otras cosas favoritas de Fig MMA es que puedes hacerle saber a tus ingenieros que pueden inspeccionar estos diseños y que pueden obtener atributos de código. Podrás todo lo que también los uses. Entonces si vienes por aquí a la derecha donde hemos diseñado prototipo y tenemos la pestaña de código Así que si tocas en la pestaña de código, esto es genial y haces click en cualquier cosa aquí. Te dará atributos dedo del pie en lo que hayas hecho clic. Por lo que puedes ver he hecho clic en este formulario predeterminado aquí. Y si hago click en el texto , me mostrará la posición. Me mostrará la idea de que estoy usando el estilo de fuente, el peso de la fuente, el tamaño de la fuente, la altura de la línea. También me dará el espaciado entre letras. Y pueden copiar esto. Simplemente pueden seleccionarlo, mandar C y estar listos para salir. También hace otra gran cosa para ti, ¿ no? Y les muestra inspecciones, por lo que les muestra el espaciado entre la izquierda y la derecha aquí de esta forma. Les muestra el espaciado desde la parte superior de este tablero de arte hasta la parte inferior. Lo mismo con este botón. Entonces cualquier cosa en la que haga clic, pueden conseguir detalles de inspección para que pueda venir por aquí sobre sus bocas. Ves, son 104 de este lado, uno de cinco de ese lado. Es un montón de veces atrás en el día, solíamos tener que inspeccionar nuestros, um, nuestros documentos y hacer lo que llamaríamos redlining lo que estás viendo aquí. Y estos eran dos. Para informar las dimensiones de los píxeles y el espaciado para los ingenieros y ayudarles a descomponer nuestra ayuda. Descompondríamos nuestros diseños para ayudarles a entender cómo se presentan nuestros diseños desde un punto de vista compositivo. Pero ahora no necesitamos hacer eso. Simplemente pueden entrar y luego pueden ver basado en usar esa pestaña de código. A qué se ve todo pueden hacer clic en formas, ver lo que esta anchura y altura. Esto aquí para este rectángulo. De qué color código hexadecimal es el que puede copiar estos códigos hex hace que sea realmente fácil para ellos inspeccionar tu diseño. Si los invitas como espectador, aún tienen acceso a, um haciendo, ver el código aquí. No necesitan ser editores para entrar aquí y esperar tu diseño. Si quieren cambiar algo, entonces necesitan ser editora. Por lo que puedes invitar a un ingeniero justo como espectador. Y tienen la funcionalidad completa que estás viendo aquí mismo desde la pestaña de código y también pueden entrar en el prototipo está bien, y dar click alrededor en el prototipo y ver cómo la función es genial. Entonces vamos a echar un vistazo al siguiente punto, que es cómo los activos de exportación. Entonces digamos que quería que Teoh exportara esta ilustración de este Boba aquí. Fango de higo lo hace Muy simple. Todo lo que tienes que hacer es seleccionar el icono o la ilustración y presionar. Si te desplazas hasta la parte inferior justo aquí en tu pestaña de diseño, solo tienes que pulsar el botón más. Tiene la exportación, y luego te da diferentes opciones. Aquí, puedes hacer una x dos x Esto lo explotará, um, um, y lo hará más grande. Entonces si hago dos X, lo hará el doble del tamaño que es en este momento y tiene PNG J peg spg. Pdf así que la mayoría del tiempo, cuando estás implementando para software no vas a usar. PDF usan p y G para activos que tengan un fondo transparente. Tan casi un ícono que necesitas y usas clavijas J en su mayoría solo para fotos. Entonces la mayoría de las veces estás usando ya sea un PNG para tus iconos o lo que llamamos un SPG. Se trata de un gráfico vectorial escalable. Entonces si le di al ingeniero un PNG, eso significa que tienen que mantener este, um, icono oírlo de este tamaño. Si hacen que este ícono sea más grande, se pixelará. Pero si les doy un SPG un gráfico vectorial escalable, eso significa que pueden escalarlo. En realidad pueden hacerlo más grande como lo estoy haciendo ahora mismo y se mantiene limpio. No se pixelan. Como puedes ver las líneas, estás realmente limpio. Por lo que la mayoría de las veces estamos regalando S P. G para este tipo de iconos, y todo lo que tienes que hacer es seleccionar el icono que te gustaría, o la ilustración que te gustaría seleccionar SPG pulsa aquí el botón de exportación. Lo voy a poner en mi descarga y eso he exportado. Entonces vamos a echar un vistazo a lo que eso parece ahí está mi Boba, Tsv g, y puedes ver que está aquí arriba a la izquierda. Vamos a hacer eso otra vez. Vamos a agarrar una Nikon. Vamos a agarrar este té Boba y mi icono aquí. De acuerdo, entonces presiona la exportación. Ve a S V G aquí, Exportar logo. Ahora se va a ver que es SPG también y se podría ver aquí. Hagámoslo como PNG para que puedas ver. Entonces sigamos adelante y seleccionemos PNG aquí. Exporta ese logotipo y vamos a echar un vistazo a cómo se ve. Se trata de un PNG para ver cómo tiene un cuarto trasero transparente. Vamos a hacerlo es una clavija J y se puede ver cómo tiene un fondo blanco ahora como una clavija J, así que figura hace que sea muy sencillo exportar activos. Si seleccionas esta bebida de té Boba y este té Boba, um, logo aquí, también puedes exportar más de una a la vez. Entonces digamos que los quiero como exportación PNG. Esos reemplazan los archivos, exportará ambos. Se puede ver el PNG aquí o el té Boba, y el logotipo aquí ha sido exportado. Digamos que quiero a esos dos como un activo. Entonces todo lo que tienes que hacer aquí es seleccionar tanto la ilustración como el logotipo y hacer click derecho o presionar el comando G y agruparlos como un solo elemento. Después presiona la exportación en la parte inferior. Correcto. Vamos a seguir adelante y hacer esto A P y G Vamos a exportarlo. Vamos a llamarlo logo y T y ya puedes ver ahora este es un activo. Por lo general, lo que vas a querer hacer es pasar por tu diseño y exportar cualquier cosa que no pueda ser ingeniada. Que sería como este globo ocular. Sería el logo en esta página. Dale aquí tendríamos el logo, estas fotos que querrías exportar. Entonces vamos a presionar la exportación aquí e ir a J. Peg y exportar estas fotos. Ahora puedes ver la foto aquí. Te gustaría exportar estas pequeñas zanahorias que hicimos aquí para los botones desplegables. Uh, esta marca de verificación, con sólo seleccionarlos, ¿quieres exportar esta X aquí? Ellos sólo quieren pasar por cualquier cosa que no sea, um, texto y colores y, uh, o botones y sólo exportar los iconos, las ilustraciones, las fotos. Entonces en este caso, querrías exportar este círculo blanco y el mapa, y ahí lo tienes. Eso es más o menos lo que podrías hacer para exportar todos tus activos y ponerlo en una carpeta , y podrías ser capaz de implementar esta aplicación. Ahora, con el prototipo y los activos que se han exportado, puedes entregarlos a tu equipo de ingeniería, o podrías ponerlo en la página web por ti mismo y estar listo para salir. Está bien, así que eso cubrió mayormente cómo invitar a otros a la pizarra. ¿ Cómo parece la colaboración poder ver encendido el ratón de otras personas y cómo exportar activos U Y e inspeccionar código para ingeniería? Muy bien, En el siguiente video, pasaremos por atajos de teclado. Vamos a ver algunos enchufes, Um, y nos vemos ahí. Gracias otra vez. Adiós. 8. Atajos de teclado y shortcuts+plugins+GUI: Muy bien, Bienvenidos al siguiente video. Cubriremos los atajos de teclado de fig MMA y nos sumergiremos en los enchufes de figment y vamos a ver también los kits booey. Está bien, así que sigamos adelante a Ah, los atajos de teclado. Entonces estoy en el archivo de diseño que tienes aquí, y creé una página aquí llamada Quickies aquí. Así que adelante, repasa las teclas demasiado rápidas, y he escrito aquí una lista de mis atajos de teclado favoritos. Estos son los que uso más común, y los voy a pasar por aquí contigo ahora mismo. Um, así que el primer set que uso mucho hay herramientas a la izquierda y comandos a la derecha. Por lo que para las herramientas, uso mucho V para llegar a la herramienta de selección. Esta herramienta de selección me permite seleccionar elementos y cosas en el tablero. Entonces digamos que aquí estoy en la herramienta de rectángulo, y quiero llegar rápidamente a una herramienta de selección. Acabo de presionar de la y ahora estoy de vuelta en la herramienta de selección. Yo uso P para entrar en el pin. Herramienta jabonosa en mi teclado me lleva rápidamente a la herramienta de lápiz podría hacer una selección o dibujar forma como lo estoy haciendo ahora mismo. Y luego Si quiero seleccionar esta forma, comprimo V y ahora vuelvo a la herramienta de selección. Y puedo mover esta forma alrededor i u Z mucho para llegar a la herramienta de zoom para proceder al zoom, herramienta, click y arrastrar, y he acercado al área que he hecho clic y arrastrado utilizo Ah, son para la herramienta de rectángulo mucho. Entonces solo presiona son y puedo crear un rectángulo aquí. ¿ Puedo comprimir V start para seleccionarlo y oh, para la herramienta de círculo. Y si sostengo turno cuando hago un círculo, me dará un círculo perfecto por ir sin turno. Hará óvalos para mí, y podrás ver una vez que crea el óvalo o el círculo o el rectángulo y automáticamente salta a la herramienta de selección aquí, l para la herramienta de línea. Es me permite crear líneas que puedes ver cuando mantengo el turno. Te da líneas rectas cuando no mantienes turno. Eso te permite hacer cualquier línea que te gustaría. Entonces Ahí está la línea. Duerme esa barra espaciadora para la herramienta de mano que te permite moverte por el espacio de tablero de arte fácil. Y luego, um, yo para la herramienta cuentagotas, que permite seleccionar colores. Entonces digamos que tengo este rectángulo y quiero ir fácilmente agarrar este color rosa aquí. Simplemente presiono I en el teclado. Ya verás que abre un pequeño círculo aquí que te permite ver el color que estás seleccionando, y yo iré a seleccionar. Diga, este rosa aquí y mira mi rectángulo. Se vuelve rosa. Tan herramientas bastante simples ahí, um, y atajos para llegar a esas herramientas. De los siguientes de los que quiero hablar aquí son los comandos. Entonces, um, para acercar, puedes hacer un comando plus y luego acercar y luego alejar, puedes hacer el comando menos algunos, alejar, acercar, alejar , alejar, alejar, acercando. Es mucho tiempo. Estoy usando esos comandos con la combinación de Z para la sierra lápiz. Amplíe, seleccione el espacio que quiera. Si estoy demasiado lejos, me alejaré o volveré a acercar y luego usaré la barra espaciadora para la mano que diga que se mueva. Muy bien, entonces la siguiente que tenemos aquí es para opciones de texto. Para que puedan ver tengo este texto aquí 12 y tres. Cuando haga desplazamiento de comando más delgado, eso va a subir el tamaño de los textos. Y si hago comando turno más pequeño que eso va a reducir el tamaño de los textos sierra Selecciona aquí el texto 123 e iré comando turno menos que y lo puedes ver. Se va más pequeño, algunos disminuyendo el texto. Y si hago cambio de mando más delgado, entonces va a subir. Tamaño del texto para que veas cada vez más grande el Texas. Ahora, lo siguiente que hago en conjunto con el cambio de comando mayor que menor que para hacer texto grande es también usar el cambio de opción mayor que un menor que para disminuir la altura de la línea o aumentar la altura de la línea. Por lo que se puede ver ahora la altura de la línea, este tipo de apretado. Tengo palabras superpuestas. Entonces mientras aún tengo esta seleccionada, voy a cambiar del, um, um, comando turno e ir al turno de opción. Entonces pasé de turno de comando mayor que menor que y ahora voy a ir al turno de opción y se puede ver lo que pasa aquí es que estoy aumentando la altura de línea haciendo turno de opción mayor que y luego lo estoy disminuyendo haciendo turno de opción. Menos que eso. Una vez más para disminuir el tamaño de fuente y seleccionarlo. Y estoy haciendo cambio de comando menos que y estoy disminuyendo el tamaño de fuente y luego para aumentar la altura de línea, voy a pasar a turno de opción mientras el texto sigue seleccionado y voy a ir opción turno menos que a disminuir la altura de la línea y mayor que para aumentarla. Por lo que estos cuatro de aquí se llevan un poco de práctica haciéndolo, pero una vez que consigues el ahorcamiento, se vuelve muy natural. De acuerdo, Lo siguiente que quiero mostrar es, um, el comando para mover capas encima de la otra llamada adelantar o debajo de la otra , que se llama traer hacia atrás. Por lo que estos dos comandos aquí. Entonces digamos que aquí tengo estos dos rectángulos, y esto es para cualquier capa, cualquier forma, y escribe cualquier elemento gráfico que estés usando en fig MMA. Si quiero llevar este rectángulo debajo del rectángulo negro debajo del rectángulo rosa . Todo lo que tengo que hacer es seleccionar el rectángulo negro. Hacer opción de comando y puedo ir flecha abajo para traer hacia atrás y se puede ver que va por debajo del rectángulo. Y si quiero traer arriba direccionando todo de nuevo, solo usaré la opción de comando flecha arriba. Se puede ver cómo funciona eso. También puedo hacer estos con más de una forma. Entonces si sostengo turno y colecciono y selecciono ambos de estos rectángulos, también puedo mover esos hacia arriba y hacia abajo. Entonces digamos que quiero traerlo por debajo del texto aquí y puedo traerlos de nuevo arriba. Yo quiero Así que más o menos de 80% a 90% del uso de herramientas en fig MMA. Podrás tener estos conjuntos de comandos quickie y que cubrirán la mayor parte de su uso de herramientas que usarás. Y también los he dejado aquí en este documento. Entonces si te acercas al documento aquí y ves las llaves rápidas, tendrás estas aquí. Otra forma de ver los quickies en fig MMA es si vas al pequeño signo de interrogación aquí en la parte inferior. Donde dice ayuda y recurso es y haces clic en eso y luego vas Teoh Atajos de teclado rápidos aquí. Sólo tienes que seguir adelante y dar click en eso. Y luego aquí están todos tus atajos de teclado o teclas rápidas aquí, y puedes ver por herramientas. Aquí están todos los para las herramientas. Aquí están todos los para ver tienes zoom. Sí, atajos de texto, formas, selecciones, cursores en sus transformaciones, arreglos y accesos directos de componentes allí. Entonces si solo quieres ir bajo el capó y ver qué tipo de atajos figura figura figura figura figura figura para ti, puedes ir aquí haciendo clic en el signo de interrogación de la parte inferior derecha y entrar en los atajos de teclado como So. Otra forma de ver los atajos de teclado es, siempre que estés en una herramienta, digamos que quiero mirar la herramienta de rectángulo o la herramienta de línea donde la herramienta de labios proporciona atajos a la derecha aquí. Por lo que hay atajos a tu marco y a tu herramienta de selección de herramientas de corte, y también hace lo mismo aquí. Si entras en los menús Seiken, selecciona un objeto, y pude ver todos los quickies aquí a la derecha Así que trae el frente. Trae el retroceso. Bloquear la capa aquí y lo mismo para la edición. Deshacer comando Z redo comando shift. Ver comando Cortar X copy Comando. Ver comando pegar V pegar sobre Selección Comando shift B. Así también puedes ver los teclados de múltiples maneras. Puedes verlo por la pregunta Marcar, y también puedes entrar en los menús aquí y en las herramientas y ver los accesos directos a medida que avanzas . Está bien, Cool. Por lo que eso cubre los teclados. Vamos a ver algunos de los enchufes ahora. Así que creé otra página aquí en el archivo Sigma que tienes y este se llama plug ins favoritos. Y estos son mis cuatro tapones favoritos top que confinaste en fig MMA. Entonces para ir a buscar enchufes de pie y para ir a ver enchufes de mentas de enchufe, solo tienes que ir a la parte superior izquierda. Aquí, ve a tu panel de control. Da click en las cuatro casillas aquí en la parte superior izquierda, te lleva al salpicadero. Aquí es donde tienes la capacidad de buscar proyectos. Aquí podrás ver tus proyectos recientes. Tienes tus borradores y luego tienes tus enchufes. aquí. Entonces estos son todos tus enchufes aquí, y mis cuatro enchufes favoritos favoritos aquí se llaman contenido. Riel, corrector ortográfico, ceniza virgen y hoz de mapa para que veas que hay algunos populares aquí allá. Estos son bastante populares. Estos primeros a la en chapotear el contenido riel. También puedes buscar enchufes, así que solo tienes que ir a navegar por todos los enchufes y puedes escribir, digamos, mapa, hoz. Aquí, se puede ver el de aquí. También puedes escribir en el corrector ortográfico. Se podía ver aquí el corrector ortográfico. Son bastante fáciles de instalar. Así que vamos a decir que quiero instalar este corrector ortográfico mientras tienes que hacer es dar click en SpellChecker. Se puede ver dónde está instalado. Puedo desinstalarlo y luego volver a hacer clic, y lo he instalado en la aplicación. Cosas bastante simples. Es divertido simplemente dar la vuelta y simplemente albergar todos los enchufes que el producto te proporciona . Ahí hay toneladas de ellos. Son bastante geniales. Vayamos a ver algunos de mis favoritos aquí, y te mostraré cómo usar un plug in. Volvamos al expediente aquí. Simplemente haga clic en su archivo de clase de higment. Yo estoy en la página del enchufe aquí. Vamos a ver contenido riel. Por lo que muchos de estos enchufes que desea seleccionar un elemento. Entonces vamos a seguir adelante y agarrar y hacer un rectángulo aquí en la parte superior en la barra de menús. Aquí, tienes enchufes. Sigue adelante y haz clic en los enchufes, y estos son los que tendrás instalados. Entonces en este caso, vamos a ver contenido riel. Entonces hago clic en contenido real, y está abriendo ese enchufe. Y lo que esto hace es que me proporcione. Soy diferentes tipos de contenido que necesito. Alguien lo puso cuadro de texto aquí, y me da avatares de texto e iconos. Entonces si hago clic en este texto y quiero nombres, me da versiones aleatorias de nombres me darán números telefónicos aleatorios. Me dará direcciones que necesito. Me daría fechas y horarios. Se llenará de Laura algunos si quieres solo texto predeterminado, correos electrónicos generados aleatorios y aleatorios te generaron RL's también. También puedo hacer clic en esta forma de rectángulo aquí goto avatares, y esto me dará automáticamente diferentes fotos de personas los científicos quieren machos dicen hembras aquí puedo hacer tanto masculino como femenino. Simplemente Es solo una selección aleatoria de fotos. Entonces soy el siguiente un fácil si estoy haciendo un montón de diferentes, um, mesas de equipo En este momento, necesito diferentes fotos de personas o redes sociales donde pueda ver tengo mucha gente en fotos dedo del pie poblado mis diseños. Esto hace que sea realmente fácil hacer eso siguiente, también tiene algunos iconos. Tienes que instalar una fuente para utilizar los iconos. Realmente no uso tanto los iconos otra vez. Yo uso el proyecto de sustantivo aquí. Te mostré antes dónde si quieres alguno, digamos, un icono de perfil, sólo tienes que ir a sustantivo Proyecto. Puedes descargarlo como te mostré en el video pasado y arrastrar el gráfico vectorial escalable a tu archivo de figment y puedes usar eso. Está bien. Otro enchufe fresco en que me parece realmente valioso es la ceniza virgen. Entonces si tienes que virgen ceniza, esto son solo fotos gratis que puedes usar Así va más allá solo fotos de gente aquí tal selecto esta plaza y yo solo podría insertar fotos aleatorias. Simplemente me daría cualquier aleatorio. Esa es una foto realmente hermosa ahí, pero también me da algunos presets aquí. Puedo tener animales, arquitectura, arquitectura, y si solo vuelvo a hacer clic en arquitectura, me da más opciones arquitectónicas. Lo mismo en la naturaleza me da naturaleza también. Sé poblar cualquier forma. Entonces digamos que quiero, um, un círculo aquí que hago retrato. Dame una vista de retrato aquí o espacio y también puedo buscar cosas. Digamos que quiero como un tigre y aquí hay algunas fotos de algunos tigres. Bastante guay, ¿verdad? Tal ceniza virgen. Tan solo una forma rápida de obtener un acceso gratuito a muchos tipos diferentes de fotos también. También puedes ir dedo del pie sobre splash dot com, y tienen una biblioteca de fotos que puedes descargar. Está bien. El siguiente es corrector ortográfico, así que solo tienes que seguir adelante y seleccionar cualquier tipografía o párrafos o contenido escrito. Ve a tu plug in y solo tienes que hacer clic en el corrector ortográfico ahí y lo hará. Automáticamente, um, um, revisión ortográfica cualquier cosa que tengas, Así que déjame ir. Volvamos, Teoh. Teclas rápidas aquí, selecciona todo esto. Ve a hacer corrector ortográfico y ahora se está cargando. Me está diciendo que yo gotero está mal escrito o tiene un espaciado incorrecto en él. Tan bonito aseado. Um, tienen siete errores aquí hablando de herramienta cuentagotas. Vamos a seleccionar los comandos. Probablemente me den algunos errores aquí también, también . Sí. Se han mostrado algunos errores. ¿ Qué es triste? ortografiado. Esta palabra vería comando. Y yo hago revisión ortográfica. Bueno, supongo que es una palabra. Pero, um, sí, mejor caso a cuando lo haces deletrear si quieres. Comprobación ortográfica se utiliza Graham temprano. Puedes copiar y pegar esto en un correo electrónico y 1/2 gramo temprano. Comprébalo también. Está bien, genial. El siguiente aspecto a revisar es el mapa Hoz. Algunos obstáculos son bastante geniales. Uno de mis enchufes favoritos aquí. Um so otra vez, solo empieza con la forma que despeja este año. Hacer un rectángulo grande. Y esto es para cualquier cosa que quieras relacionado mapa. Entonces si quieres alejarte del estilo normal de un mapa de Google y quieres tener un tema más como un tema oscuro o como,mapa temático, mapa temático, puedes venir aquí a mapear, hoz, click en abrir mapa hoz, y te da diferentes estilos aquí. De repente mueve esto un poco hacia la izquierda. Entonces digamos que esto es un estilo callejero. Es más gráfico. Se puede hacer estilo al aire libre. Aquí haces un estilo ligero. mí me gusta un tema oscuro que te da un satélite. Aquí tienes tu satélite más calles aquí. A mí me gusta personalmente el tema oscuro. Mucho tema oscuro puedes crear otro con, Um, puedes alejar. Podría traer a todo el mundo aquí si quisiera. Hagamos sólo los Estados Unidos. Muchos California y yo podemos hacer diferentes whiffs aquí, así que digamos 1000 por 1000 Si quería y presiono crear mapa, me va a dar una captura de pantalla de ese diseño dentro de la forma. Aquí. Voy a conseguir una con un montón de calles, pequeñas líneas que sean duras del dedo del pie crear. Digamos que aquí San Francisco y se puede ver ahora tengo San Francisco generado. Dentro de esta forma, es una imagen. Por lo que voy a mi imagen de sentir aquí. Aquí tengo la imagen. Puedo entrar y recortar esta imagen si quiero comprar presionando el cultivo en la parte superior. Y eso es hoz de mapa. Entonces esos son mis cuatro enchufes favoritos. Te dejaré, um, estos aquí para ti, y podrías usar esos y enchufarlos. Um, y puedes encontrar tus enchufes aquí. Otra forma de ir a tu hombre. Es a tus enchufes es si solo haces click en los enchufes en la parte superior, yendo a administrar los enchufes, te llevará de vuelta a esa página que acabamos de visitar. Muy bien, Lo último es ir a ver cómo descargar botiquines. Entonces un botiquín es, um, la palabra que e g u Me refiero a interfaz gráfica de usuario, y figura tiene todo un montón de ellos para que los uses. Entonces si vas a una búsqueda de Google, tengo una aquí para ti y solo Google busca y descarga kits de gooey fig MMA. Mi favorita es esta descarga 49 gratis. Um, es el tú yo almacene dot com. Si haces click en este, te llevará a un enlace aquí, y esto tiene todo un montón de lets, ya sabes, y verdes Ah, botones. aquí ¿Cuáles son para fig? MMA? No tienen para visión de boceto, Otras herramientas de diseño. Y digamos que quiere este panel web base de monedas aquí. Todo esto es gratis. Acabas de entrar, presiona libre descarga bajará bajo en la parte inferior izquierda. Aquí, sigamos adelante y abramos eso. Cuando abres esa carpeta, aquí te da P y G's de estos diseños. Se puede ver. Y tiene un tema oscuro en un tema claro. También te da este archivo de higment. Entonces si quieres instalar ese archivo de figment, um, um, haz lo mismo que hicimos en el principio donde descargaste el archivo Sigma que proporcioné y lo arrastraste y lo dejaste caer en tu espacio de borrador aquí. Entonces te mostraré. Entonces lo que harás aquí es este cangrejo este archivo y solo tienes que hacer clic y arrástralo a fig MMA como así. Y importará este archivo y podrás seguir adelante. Voy a cancelar. Ya estaba tenerlo descargado. Está bien, genial. Otra cosa que puedes dio también puedes arrastrar y soltar archivos de boceto de la misma manera en fig MMA, y jalará en tus archivos de boceto con todos los diseños listos para ir, no mantendrá el prototipo de costura que no dibujaste. Pero traducirá todos los diseños que has hecho en Sketch en dos fig Mahir. Vamos con el chico cono Coin base Panel Web. Ese fue el que acabamos de descargar. Y se puede ver aquí tengo los temas de luz, y tengo los botiquines. Puedo entrar en todos estos. Aiken, selecciona los elementos gráficos dentro de este niño QE. Puedo cambiarlos un poco. Es un buen punto de partida. Estás buscando empezar por el diseño básico en este caso, um, tener un tablero para base de monedas. Y tiene las dos versiones ligeras, y tiene las versiones oscuras aquí. Un oleaje como puedes ver, hay toneladas de botiquines aquí, um, um, que podrías ir a descargar online y echar un vistazo y jugar con. Pero así es como lo haces aquí. Y aparecen en tu panel de control aquí, como tengo en el Web basado, uh, uh, monedero base Web dashboard aquí acabas de ver. Está bien, genial. Entonces eso es un resumen de, um, um, más o menos cómo hacer atajos de teclado y cómo usar los enchufes de figura y descargar kits Q B en el último video se mostrarán. Ya veremos cómo crear comentarios, símbolos que tendrán algunos pensamientos finales y de cara al futuro. ¿ Verdad? Vea el último video. Cuídate Adiós. 9. Comentarios y pensamientos finales: Muy bien, bienvenido de nuevo al video final de cómo construir diseñar una aplicación móvil usando fig, mi herramienta de diseño. Entonces en este punto, vamos a pasar por cómo crear comentarios en el contexto de un diseño es bastante simple y tener algunos pensamientos finales y de cara al futuro. Sigamos adelante, y estamos en el archivo diseñado por el producto que descargaste. Volvamos a nuestra pestaña de aprendizaje Paige, donde construimos el prototipo aquí, y te mostraré cómo tú y tu celular, tú y tus compañeros de equipo otras personas pueden compartir comentarios basados en el diseño que estás viendo aquí. Entonces vamos por aquí y vamos a crear un par de comentarios. Entonces si ves la parte superior izquierda la barra de herramientas aquí la parte superior izquierda, hay un pequeño icono de burbuja de altavoz. Adelante y haz click en eso, y eso mostrará comentarios pero también te dará la capacidad de dejar caer un comentario. Entonces sigamos adelante y dejemos caer un comentario. Digamos, um, dejemos caer un comentario en el mapa aquí, y voy a escribir Zoom un poco el mapa, y coloqué un comentario ahí. Y así es agradable ya que puedes ver que el comentario está en contexto al elemento de diseño en el que estoy comentando, que hace que sea realmente fácil entender a tus compañeros de equipo cuando te dan retroalimentación sobre tu diseño en lo que son refiriéndose a. Quizás vayas a esta línea aquí es como alinear la capacidad de la línea y sin el contexto. Si acabas de leer un comentario que configurara la opacidad de la línea, no sabrías a qué se refería esta persona. Pero como han dejado caer este comentario justo en la línea, tienes una idea de ese cambio. Y de nuevo, digamos que era un cambio que necesitábamos hacer. Por eso tenemos la biblioteca de componentes. Aquí lo único que tienes que hacer ahora es ir a agarrar esta línea y lo que sube su capacidad al 40% ahora . Y volvamos a nuestro aprendizaje Paige. Y ahora cada línea de cada página se ha actualizado, um, en esa área. Por eso hacemos esos componentes. Hace que sea realmente fácil hacer cambios como ese que vienen a veces a través del comentario. Volvamos atrás y digamos que quiero volver a revisar mis comentarios. Todo lo que tienes que hacer es hacer clic en él y verás los comentarios sobre y dónde existen. Y también verás a la derecha aquí verás una lista tuya. De todos los comentarios que sucedieron aquí una vez que haya completado un comentario o una vez que haya completado un comentario, puedo dar clic en la resolución aquí y eso desaparece. Es así como resuelves un comentario y te vas. Otra que quiero hacer aquí es Vamos a hacer un comentario de prueba. Aquí está Aiken. Etiquetar a las personas haciendo el at. Y aquí una lista de personas que tengo en mi proyecto, y Aiken las etiquetó con este comentario. Entonces veamos caer. Yo puedo etiquetarme. Está bien, genial. Y seguiré adelante y me etiquetaré aquí. Y esto me avisará. Recibiré un correo electrónico que alguien ha dejado un comentario dentro de mi archivo de diseño de la FIG MMA. Y así confiné los comentarios aquí, pero también lo puedo ver a través de notificaciones por correo electrónico, lo que facilita gestionar muchos comentarios entrando. Um, así que alguien me deje un comentario, voy a entrar, me etiquetan en él. Leí el comentario y me refería a resolver o tener una conversación con ellos. Tan prácticamente la esencia de comentar y cómo funcionan los comentarios. Podrás volver a verlos. Una vez que te alejas del icono del comentario, desaparecen. Entonces recuerda que tu no podrás verlos hasta que hagas click en el icono de comentario aquí en la parte superior. Eso es anuncio del dedo del pie y mostrar comentarios. Y luego puedes dar la vuelta y hacer clic en tantos comentarios como quieras, y acabaremos de terminar hasta. Este botón es impresionante. Hagamos un buen comentario. Bueno, ¿te gusta un poco de emoji aquí? ¿ Al igual que pulgares arriba? Enfriar. Ahí tienes, Derechos. Eso son comentarios en pocas palabras. Um, y lo último son solo algunos pensamientos finales sobre seguir adelante. Entonces de nuevo, hay muchas más cosas que podemos cubrir en la Fig MMA. He cubierto mayormente el prototipo básico de ser y transiciones dentro de los prototipos y cómo diseñar esta aplicación móvil aquí. Espero que te haya sacado algo de valor. Mi pensamiento final es justo Se necesita práctica. Simplemente practica continuamente en ello. Hicimos una aplicación móvil. Si quieres hacer, digamos, una versión Web, hice una nueva página aquí. Llámala Web ve a tu tablero de arte aquí y puedes agarrar una versión de escritorio aquí. Vamos a seguir adelante y te gusta un libro de Mac y puedes diseñar a cabo ah sitio web también. Entonces eso no sólo es para aplicaciones móviles. Puedes hacer prácticamente cualquier tamaño de pantalla aquí y crear prototipos de cualquier experiencia de usuario que vayas por, um, um, y también de cara al futuro. Asegúrate de descargar la aplicación de espejo fig MMA en tu dispositivo móvil si estás especialmente si estás haciendo experiencias de usuario móvil en esto te permite ver los diseños de pantalla móvil directamente en tu teléfono para que puedas ver cómo se verían en el teléfono. Eso es realmente importante. Y si quieres mantenerte conectado conmigo, puedes ir a mi página web. Se trata de Aaron Lawrence design dot com, y puedes venir aquí y ver enlaces a mi trabajo. Puedes contactarme directamente a través del sitio aquí. Te vas a contactar muy aquí en el fondo. Ves parte de mi trabajo y sin embargo de seguir adelante, te deseo lo mejor. Um, espero que esto fuera valioso para ti, y también tengo un par de clases más que puedes consultar en diseño de experiencia de usuario. Si solo buscas mi nombre o encuentras algunos de mis videos escribiendo en ti x slash ey design y me verás en otra clase que se sumerge más profundamente en el proceso UX del neumático que se presenta aquí donde pasamos por el oro, haz gol establecer problemas y suposiciones Lo hicimos. Te enseño a hablar con los usuarios y los clientes tenían una síntesis, sintetizar y temática tus insights que aprendiste estás buscando identificación de las necesidades y validaciones del usuario y al llegar a experimentos para validar tu hipótesis sobre lo que crees que funcionará o cómo resolverías una necesidad de usuario o un problema. Y crearás una interacción, modelo o prototipo y cómo probar ese prototipo y luego cómo colaborar con gerentes de producto , ingenieros y ejecutar en los diseños que tienes, y luego una continuación de construir y medir y aprender ese proceso de lanzamiento de software y aprender a iterar y cambiar para tener éxito. De acuerdo, bueno, ahí lo tienes. Gracias de nuevo y espero que lo mejor y nos vemos en la siguiente clase. Adiós. 10. Video extra: Dissolve, pasar y mover en - mover: El bonus videos. Por lo que en los próximos cuatro videos vamos a cubrir un montón más de las funciones de prototipado dentro de Figma. Y también vamos a cubrir algunas de las características más recientes que ha lanzado el figma, incluyendo variantes de componentes y también componentes interactivos, lo cual es súper impresionante. Y como cualquiera, como todos mis videos que tengo aquí, he hecho un archivo para ti. Entonces si vas a descargar, el archivo debería verse algo así, donde en cada conjunto del prototipo funciones o características que aprenderemos en esta clase. Tengo el extremo superior es el ejemplo aquí. Por lo que esta fila aquí cubrirá el ejemplo de lo que vamos a aprender. Está prototipado, listo para salir por si te pierdes y quieres ir a ver cómo lo he hecho. Y luego lo haremos juntos en el video aquí. Entonces verás el ejemplo y verás el que haces. Y haremos el que diga que lo hacen juntos. Y cubriremos toda una suite de nuevas características de prototipo, incluyen algunas selecciones y modales desplegables, así como menús. Se fijará en construir algunos regalos de carga a través del uso de la función de hazaña de prototipo de animate inteligente. También estamos haciendo algunos deslizamientos horizontales, algunos deslizamientos verticales. Combinaremos ambos para hacer una rica interacción de deslizamiento de mapa. Y también cubriremos algunos de los componentes y una varianza. Y los componentes interactivos que son realmente divertidos y útiles para entrar. De acuerdo, entonces no deberías tener este expediente. De no ser así, adelante y ve a descargarlo. Y recuerda cuando lo descargues, es posible que veas que se trata de un archivo zip. Entonces si ves el ZIP al final del formato de archivo, solo tienes que hacer triple clic en este archivo, doble o triple clic. Y abrirá el archivo aquí y entrará en esa carpeta. Y recuerda, no se puede simplemente hacer un triple clic en este archivo FIG, fig aquí. En realidad tienes que entrar en Figma y entrar en tus secciones de borradores. Probablemente los años no se parezcan a los míos porque aquí tengo un montón de archivos, pero entrarás en tus secciones de borradores dentro de tu pestaña de inicio en Figma. Y agarrarás este archivo aquí, puedes ver aquí y arrastrarlo a Figma. Ya sabes, lo has hecho bien cuando Figma te da ese contorno azul. Y luego cargará el archivo, importará el archivo. Y deberías ver el nuevo archivo aquí y tu carpeta de borrador aquí y verlo. Concluye la carga. Presionarás el botón hecho y tendrás este archivo aquí. Voy a borrar éste sólo para que no tenga copias del mismo. Está bien. Entonces sigamos adelante y arranquemos con el primer video aquí vamos a cubrir la disolución, prototipo, el retraso, y la mudanza y la salida. Entonces echemos un primer vistazo al prototipo de disolución aquí. Entonces voy a presionar el botón de reproducción aquí arriba en la parte superior derecha. Eso va a abrir el prototipo. Y lo primero que notarás es que esto se está cargando en un dispositivo real. Por lo que nunca, cubrí eso en algunos de los videos pasados. Pero sólo para reiterar, si hago clic fuera de alguno de los tableros de arte y me meto en el espacio de arte, sólo el área gris. Y no estoy en la pestaña Diseño, pero entre la pestaña Prototipo, verás que puedo seleccionar un dispositivo. A veces se cargará no es ningún dispositivo. Y luego puedes seleccionar el modelo del dispositivo. Entonces tengo aquí iPhone 11, y lo tengo en puerta espacial gris, tu ya debería tener esta cargada porque he grabado esto, incrustado esto en el archivo que has descargado, pero por si acaso no sabes cómo cambiar los dispositivos. De acuerdo, así que vamos a ver la función de disolver en el prototipo. Por lo que más o menos tenemos una pantalla de inicio, repulsa el botón de vista. Y verás entrar esta pantalla disuelta. Y lo disuelto solo significa que tiene un retraso de tiempo para que esta pantalla se cargue. Es una interacción muy sencilla. Entonces vamos a seguir adelante y empezar asegurándonos de que somos primeros en el tipo de prototipo aquí en la parte superior derecha. Entonces no la pestaña Diseño, sino la pestaña Prototipo. Y arrastremos este botón Inicio hacia esta pantalla. Lo que hace este botón Inicio es que significa que esta va a ser la primera pantalla desde la que van a cargar los prototipos. De acuerdo, entonces lo que vamos a hacer aquí es que vamos a presionar el botón de vista aquí. Y mientras estamos en la pestaña Prototype y arrastra el brazo de la GUI a la siguiente pantalla. Y verás que ya está sentado, al grifo y disuelto. Pero veamos primero cómo se ve con instantáneo. Instantáneo. Sólo va a significar que no va a tener retraso de tiempo. Y sigamos adelante y jugemos esto. Y si pulsas el botón de vista, mira cómo no hubo retraso ahí. Así que lo más comúnmente cuando estás en la función de prototipo y haces clic en la flecha aquí y obtienes el cuadro de diálogo Detalles de interacción aquí en la parte superior derecha. Se va a por defecto a impar tap u onclick e in-state. Y para esto todo lo que tenemos que hacer es sólo presionar disolver. Y entonces nos va a dar algunos, algunos de los estados de transición facilidad de entrada, facilidad de salida. También me gusta hacer tanto a gusto como a facilidad fuera. Cualquiera de los dos depende de ti. Están, no lo son, están muy matizados. No tienen demasiadas distinciones entre los dos, pero facilidad fuera, facilidad de entrada. Depende de ti. Lo que sí importa aunque aquí es el retraso de tiempo. Entonces vamos a hacer de esto un retraso realmente largo. Digamos que son 5 mil milisegundos. Y vamos a ver ese retraso. Debe haber mucho tiempo. Y se puede ver que es retraso de 5 segundos. Por lo que 5 mil milisegundos hicieron para un retraso de tiempo realmente largo. Entonces eso es un poco demasiado de una disolución o retraso. Volvamos aquí. Vamos a cambiarlo de nuevo a, digamos sólo un 1000 y tendremos una linda disolución. Vuelve al prototipo. Voy a presionar R en mi teclado. Y eso va a ser lo mismo que presionar el botón de reinicio en la parte inferior derecha. Y va a reiniciar el prototipo de vuelta a dondequiera que ponga esta pequeña etiqueta de inicio. Y de nuevo, puedes simplemente hacer clic y arrastrar esto a cualquiera de las mesas de trabajo que quieras. Pulse Ver. Y eso fue un bonito retraso ahí. Está bien, bastante guay. Sigamos adelante y miremos el siguiente. De acuerdo, entonces ahora esta siguiente interacción aquí en la función prototipo es un retraso, y esto suele ser un retardo de pantalla completa. Y así hay algunas cosas comunes que evitar aquí, que me meteré en un segundo. Pero todo lo que tienes que hacer aquí para mostrar el ejemplo se acaba de obtener el ejemplo aquí, mover, arrastrar y soltar, o arrastrar la etiqueta de inicio a este prototipo. Y oprima el botón Reproducir. Por lo que voy a seleccionar esta mesa aquí y presionar el botón de reproducción. Y verás que tiene un editor de cargadores. Nuestro retardo de tiempo, va a la página alta. Entonces una vez más cargando y dice hola. Es similar a una función de disolución. Es sólo que toda la página se establece en un retraso. Entonces sigamos adelante y lo hagamos rápidamente. Debería ser bastante simple. Arrastremos el inicio de nuevo al conjunto de pantallas de prototipos aquí que están al lado de la u du. Y esto no tiene ninguna función de prototipo para ella. Entonces cosa a través de un vacío aquí es si hago clic, digo este botón de carga, en realidad, vamos a hacer el cargador. Entonces si yo, si selecciono este GIF cargando, GIF animado, y tiré de la GUI, brazo GUI para que el prototipo establezca a la siguiente mesa de trabajo. En cuanto a eso. Y hago click en tap. Verá que esta función después de retardo está desactivada. Es algo común a evitar. Por lo que para conseguir una pantalla completa para retrasar y pasar a otra pantalla, en realidad hay que seleccionar toda la mesa de trabajo o toda la pantalla. Entonces lo que voy a hacer es deshacer esta función de prototipo. Y voy a seleccionar dónde dice iPhone 11 Pro. Si quiero nombrar a este tablero de arte aquí, solo puedo hacer click hasta las capas. Y llamemos a esta página de carga. De acuerdo, Entonces donde dice cargando página ahora voy a volver a dar clic. Y ahora tengo toda la mesa de trabajo seleccionada, es decir, tengo todo este marco. Y voy a volver al prototipo. Y se puede ver el inicio aquí desde el prototipo en esa pantalla. Y lo voy a arrastrar a la página alta aquí. Y lo verás en tap. Y si hago clic en el menú desplegable on tap, verás que se ha habilitado el retardo posterior porque hemos seleccionado toda la mesa de trabajo. Entonces sigamos adelante y hagamos después del retraso. Y luego justo al lado de retraso total, tenemos los milisegundos por cuánto tiempo queremos que esto se retrase. Entonces sigamos adelante y hagamos. Vamos a ponerlo por 5 mil SEK milisegundos, que serán cinco segundos. Y luego para la animación, tenemos diferentes estados. Podemos hacer un instante el cual simplemente cargará instantáneamente la página. Y tenemos una disolución y tenemos mudarnos, mudarnos , lo cual te mostraré en un rato. Pero sólo vayamos a instituto por ahora. Lo mantendremos simple. De acuerdo, entonces lo que voy a hacer es seleccionar la mesa de trabajo aquí, cargando página. Voy a presionar el botón de reproducción. Y verás esta página cargando. Después de cinco segundos, carga la página alta. Entonces esa es una función de retardo. Entonces volvamos a entrar. Y si ven los detalles de interacción aquí donde dice la animación instantánea, qué hay que seguir adelante y aplicar esa función de disolución que aprendimos en el, en el último prototipo que hicimos. Y no hagamos un 1000 milisegundos, quizá hagamos 500. Y así ahora verás la pantalla alta aquí. Entra con un disolver y no será una carga instantánea. Por lo que pasarán cinco segundos y la carga, y verás la disolución. Sí, es una disolución bastante rápida. Podemos divertirnos un poco con él. Vamos a añadir un poco más. Hagamos realmente, hagamos 1, 0, 0, 0, 0, 0, 0. Así que sé como un 1 segundo. Disolver. Ve a ver cómo se ve eso. De acuerdo, eso es bastante bueno ahí. Está bien, genial. Si te interesa alguna carga yo animé gifs que ves aquí, puedes ir a nuestra página web. Y tengo las indicaciones hacia la izquierda aquí. Se llama cargando punto io. Seguiré adelante y levantaré un navegador. Y esto tiene, tiene iconos animados gratuitos y gifs animados mientras carga regalos que puedes descargar como GIF y pop esos derecho en Figma si quieres. Entonces digamos que te interesa esta animación, pero quiero cambiar el color. Digamos que quiero cambiar este color para sólo decir un negro aquí. Voy a borrar todos los demás aquí y hacer un gris, algo así. Y quiero descargarlo como GIF. Todo lo que tengo que hacer es presionar el regalo tu descarga gratuita. Lo verás descargándose en la parte superior o inferior izquierda. Así que descarga spinner one S. Y todo lo que realmente tengo que hacer ahora es tomar esto y arrastrarlo a Figma. Bueno lo que puedo hacer es que veas cómo tiene un transparente o tiene un fondo blanco. Aquí puedo poner este GIF a un fondo transparente. Y ahora puedo volver a descargarlo y descargar eso. Y ya verás ahora cuando lo descargue en, tiene un fondo transparente. Y podríamos fácilmente simplemente colocar este cargador y disminuirlo un poco en esta pantalla. Y ya verás ahora tenemos el nuevo gif de carga. Pasan cinco segundos. Y mucho, tenemos la pantalla alta. Muy bien, bastante guay. Pasemos al siguiente, que está abierto y cerrado. Y esto va a usar una interacción de movimiento hacia arriba y hacia abajo. Entonces voy a agarrar el Start al ejemplo aquí para que podamos ver qué vamos a hacer. Esta es bastante simple otra vez. Todo lo que es esta pantalla al lado, Se va a deslizar hacia arriba y la x se va a deslizar hacia abajo. Es muy común para configurar páginas o cualquier cosa que tenga un botón de cancelación y un botón de guardar. Esto simplemente se deslizará hacia arriba. Tendrías una cancelación, tienes una Guardar, cerrar de nuevo hacia abajo. Si tienes más de un flujo de trabajo, te mostraré cómo funcionan estas mejores páginas de inicio para dar inicio a un flujo de trabajo. Y luego pasas por el flujo de trabajo. Ahora vamos a aprender en el siguiente video. Así que solo cuelga fuerte. Y para ver esta interacción y hacerlo juntos, Agarremos el Inicio. Pasó a la página de abajo donde dice que sí. Y bastante simple aquí. Adelante y agarremos el botón de vista. Vaya a la pestaña Prototipo. Desliza esto a la pantalla. Queremos arriba. Y en la animación no queremos instantáneo, no queremos disolver, queremos entrar. Y luego con mover adentro, esto nos permite movernos hacia la izquierda, movernos hacia la derecha, mover la pantalla hacia abajo. Y en este queremos que se mueva hacia arriba. De acuerdo, ahora sigamos adelante y pasemos al prototipo y veamos eso. De acuerdo, a ver cómo se movió hacia arriba, pero tuvo una transición realmente lenta. Cl ese movimiento que parecía un poco demasiado lento. Ejemplos buggy. Por lo que queremos hacer esto rápido. Entonces mira donde dice que la facilidad de entrada aún estaba fijada en 100 milisegundos. A qué se debe alrededor de 200 milisegundos ahí. Y ahora eso debería cargarse bastante rápido. Sí, ahí tienes. Eso es lo que queremos. Pero casi demasiado rápido para eso. Vamos a hacer 300 milisegundos. ¿ De acuerdo? Y luego sigamos adelante y cerremos el, esto con la x. Entonces si agarramos la x y la siguiente pantalla, arrástrela a la pantalla negra original aquí. Y un error común es que lo dejas en movimiento, y verás qué pasa aquí. Voy a hacer abajo. Por lo que se mueve hacia abajo. Y lo que vas a querer hacer es poner esto para que se mueva. Pero vamos a ver lo que parece una mudanza porque es un error muy común lo que sucede. De acuerdo, entonces tenemos la vista que se ve más grande se desliza hacia arriba bastante rápido. Esa fue una buena velocidad para esa transición. Y ahora qué pasa cuando x se pone HIT? Ve cómo la página, La Página Negra, empuja la página blanca una vez más hacia abajo. Entonces ve cómo salió la página negra de arriba. Esa es una interacción impar para dispositivos móviles. Y lo que queremos hacer aquí, si hago clic en la X, es que, es porque está diciendo mudarse, estás permitiendo que la pantalla negra se mueva. Y Figma te da un pequeño demo de cómo se verá esto. Entonces lo que queremos hacer es que se mueva. Entonces es decirle a la pantalla blanca a la derecha que especie de salir del camino, salir del camino, y de qué manera queremos definir está a la derecha. Entonces en este caso queremos que se mueva hacia abajo. De acuerdo, esto debería funcionar perfectamente. Por lo que presionamos el botón de vista. Esta página se desliza y observa cuando hacemos la x, se mueve fuera del camino y la pantalla detrás de ella se queda en su ubicación frente a venir desde la parte superior de ahí. Está bien, genial. Eso cubre más o menos el primer video. Y el siguiente video vamos a cubrir las superposiciones, el molde, los modales, y los menús. Y te veré en el siguiente video. Gracias, Adiós. 11. Video extra: superas, modales y menus: Bienvenido al video 2 de los videos bonus, donde vamos a cubrir superposiciones, modales, y menús, ¿verdad? Entonces volvamos a ese expediente en el que estábamos trabajando. Voy a desplazarme hacia abajo por aquí y otra vez, lo que estoy haciendo es que estoy, estoy usando z como tecla rápida para obtener el zoom. Entonces si lo ves, yo sostengo z y hago clic y arrastre. Eso me acerca a donde quiera mirar en mi tablero de arte. Y luego uso la barra espaciadora. Sostengo la barra espaciadora y hago clic y arrastre para moverme. Y luego usaré si estás en un PC, puedes usar Control. Si estás en un Mac, puedes usar comando, pero usaré Command Menos para salir del Zoom Out y en Command Plus para entrar. De acuerdo, Así que el próximo, Vamos a agarrar al inicio del prototipo. Pasémoslo al ejemplo. Y ahora vamos a ver el prototipo más impulsado por el flujo de trabajo, que te permitirá tener un movimiento hacia arriba y bajar conjunto de pantallas y luego un movimiento izquierda y mover a la derecha conjunto de pantallas. Entonces esto es un poco más complicado, pero sigue siendo bastante sencillo. Vamos a ver cómo se ve esto. Qué es demo it real rapido y luego nos pondremos en hacerla. De acuerdo, así como hicimos en el último video, tenemos un deslizamiento hacia arriba y luego tenemos un tobogán, ¿verdad? Y lo verás ahora la x está en la parte superior derecha. Eso es muy intencional. Y es para ayudarnos a crear un flujo de trabajo. Y luego también permitir que el usuario salga del flujo de trabajo cuando quiera. Entonces, cuál es su flujo de trabajo comienza cuando presionamos Inicio y por qué esa x está en la parte superior derecha. Ya verás aquí, como ves la siguiente pantalla se desliza desde la izquierda. Y si quiero volver una pantalla, puedo volver aquí. Una vez más iniciamos pantalla dos diapositivas en. Puede que haya algunas configuraciones que queremos introducir o algunos campos de formulario que desee introducir aquí en este flujo de trabajo. Y luego vamos al número tres. Y digamos que quieres cancelar este flujo de trabajo. Un par de cosas que puedes hacer. Se puede volver atrás, se puede volver atrás. Puedes presionar la X. Y ahora estás de vuelta en esa pantalla Inicio original. O si no quieres retroceder tres pantallas, solo puedes cerrar la x y ahora estás de vuelta en el flujo de trabajo aquí. Entonces es por eso que las x's en la parte superior derecha es porque nos da bienes raíces aquí por el botón Atrás en la parte superior izquierda. Entonces otra vez, vamos a pasar por la pantalla número 3, pantalla para aquí. Y estamos completando el flujo de trabajo aquí. Y si quieres X fuera, boom, x fuera en cualquier momento. De acuerdo, entonces vamos a hacer esa interacción otra vez. Agarremos el inicio y arrastrémoslo a la serie de pantallas al lado que haces. Voy a acercarme un poco. Agarremos el botón Ver. Y otra vez, vamos a prototipo. Asegúrate de estar en la pestaña Prototipo. Desliza el brazo prototipo por aquí, y ya ves que está preestablecido para ti. Entonces queremos arriba, no queremos salir. Nosotros queremos mudarnos. Pero vamos a ver qué es, veamos cómo se ve esto. Muévete y puedes decir que a veces se ve un poco raro. De acuerdo, ya ven cómo la última pantalla, esta pantalla negra de aquí, se movió hacia arriba. Y no queremos eso, eso es una, eso es una interacción rara. Queremos que esta pantalla blanca se especie de capa sándwiched encima de esa pantalla de inicio aquí. Y eso es porque seleccionamos mudarnos. Entonces si sí nos mudamos, esto va a funcionar muy bien. Entonces vamos a ver eso. De acuerdo, eso es lo que queríamos. Y ahora vamos a coger la x y jugar donde podamos deslizar la x y hacer que nos mudemos. Y de nuevo, no queremos que se mueva aquí arriba. Y puedes ver algunas veces que te olvidas de hacer la flecha abajo. Y puede verse algo así. A ver cómo se movió hacia arriba. Eso es muy, muy raro. Queremos que se repita la misma interacción que estaba presentando esta pantalla. Por lo que de nuevo, se movió hacia arriba. Queremos repetir y revertir esa interacción. Queríamos volver a bajar. Entonces en este caso queremos ir a seleccionar el prototipo para la x, mover eso hacia abajo. Y bada bing, bada, boom. Está bien. Lo siguiente es que queremos hacer una especie de como iniciar el flujo de trabajo aquí. Agarremos este botón. Vayamos al número dos. En este caso, no queremos salir, queremos movernos en pantalla y queremos que entre desde la izquierda. Y se puede ver mudarse y aquí tenemos la izquierda. Y vamos a ver eso. Entonces tenemos View. Voy a iniciar este prototipo y los dos se deslizan desde la izquierda. Muy bonito. De acuerdo, Y luego mismo trato. Vamos a agarrar el botón Atrás aquí, y vamos a arrastrarlo hasta el uno. Y lo que queremos hacer aquí es que esto se mueva a la derecha y tenemos el mismo error común que sucede es que lo dejamos y nos movamos y no nos mudamos. Y ya verás qué pasa aquí cuando presione la flecha Atrás. Vea cómo se movió la pantalla única. Eso no queremos. Queremos que las dos pantallas aquí repitan y reviertan esa misma interacción en la que salió a la vista. Simplemente invertirlo. Queremos volver a salir. Pero ahora mismo se puede ver a los que entran. Eso es porque lo dejamos adentro, nos mudamos. Entonces sigamos adelante y muévete, muévelo por aquí. Y ahora verás la interacción correcta donde se desliza el número dos. Si haces el botón Atrás, cita atrás. ¿ De acuerdo? Y entonces también tengo una barra gris más o menos transparente aquí. Se puede ver que se ve así. Y es transparente por una razón porque no quieres que el usuario lo vea. Simplemente queremos usar esto como mecanismo prototipo para permitir que el usuario arrastre esta foto o esta pantalla fuera del camino. Tan común. Si entras en una pantalla que tiene un botón Atrás, es común que la gente tu dispositivo móvil deslice esta pantalla fuera del camino. Y así es lo que esto representará aquí. Voy a hacerlo un poco más grande solo para que puedas ver. Y entonces lo que queremos, no queremos que esto esté en los detalles de interacción aquí. Por lo que lo deslizamos hacia atrás, esta plaza transparente de vuelta a uno. No queremos en tap, pero en realidad quería hacer en arrastre aquí. Y queremos la misma animación que queremos salir y salir a la derecha. Entonces ahora cuando pueda hacer como usuario, puedo presionar el botón Atrás que volveremos a uno. O puedo arrastrar haciendo clic en el prototipo, sosteniendo el dedo en el teléfono y arrastrando esta pantalla fuera del camino, ver cómo funcionaba eso ahí. Enfriar. Por lo que esto es llenar bien. Esto se está llenando como un prototipo real, como una aplicación de manzana de rueda. Presiona el botón Atrás, vuelve a bajar, entra en el flujo de trabajo. Puedes hacer clic y arrastrar para deslizar esto. Y ahora vamos a meter el resto de estos prototipados. Lo que podemos hacer aquí es que tenemos la x y todas estas pantallas, pero la x realmente solo te va a llevar de vuelta a esta pantalla de inicio. Por lo que una nueva característica para Figma ahora es que puedes pegar en múltiples mesas de trabajo. Entonces, ¿qué es borrar los ejes en estas otras pantallas? Vamos a agarrar la x. Y si estás en un PC, es Control C, como en cat. Si estás en una manzana, entonces es Comando C. Y sigamos adelante y seleccionemos los tres de estos. Estoy en un Mac y voy al Comando V, como en Victor. O si estás en un control de PC V. Y va a colocar esa x automáticamente en las tres de esas pantallas con la interacción que queremos que se remonta a la pantalla de inicio. De acuerdo, y es bastante sencillo de aquí en adelante solo hacemos que el siguiente botón vaya al número 3. Si queremos asegurarnos de que esté al grifo, queremos entrar. Y queremos que esta pantalla se mueva desde la izquierda. Y luego lo mismo con el botón Atrás. Queremos volver de la pantalla 3 aquí al número 2. Y queremos salir y a la derecha. Por lo que de nuevo, la pantalla va a entrar desde la izquierda y luego salir hacia la derecha. Lo mismo para 34. Hacemos el siguiente botón a la pantalla de avance. ¿ Podemos querer que se mueva desde la izquierda? Y luego para la flecha de atrás pasando de la pantalla número 4 al número 3, queremos que se mueva hacia la derecha. Está bien, eso debería estar completo. Vamos a mirarlo. Entonces tenemos la vista, la pantalla se desliza hacia arriba. Tenemos el inicio. Presione Siguiente, obtuvo el número 3. La prensa F4 va al número cuatro. Se puede cancelar. Cerrar x, se remonta a la pantalla de inicio. Puedes volver a lanzar el flujo de trabajo. Ve Número 4, o puedes volver atrás, atrás. Incluso en el caso número 2. Puedes deslizar y presionar X y estás de vuelta en la pantalla aquí. Genial, eso fue divertido. Pasemos al siguiente, que son los downs modales móviles. Entonces voy a envolver esta pantalla Inicio para que puedas ver rápidamente el ejemplo de cómo funciona esto. Pulse aquí el botón de reproducción. Y así este es un desplegable para dispositivos móviles. Entonces cuando, digamos que quiero seleccionar mi color favorito, clic en este desplegable y verás que aquí arriba se deslizan elementos de menú. Y digamos que selecciono aquí rojo. Entonces verás que está poblado de rojo aquí. Presione la X, vuelva al Select color. Hacer la misma ruta. Puedo hacer clic en cualquier lugar fuera o tocar en cualquier lugar fuera de esta selección desplegable aquí y lo cierra. De acuerdo, así que sigamos adelante y agarra el Start de nuevo a la serie de pantallas aquí que dice que sí. Ahora lo que vamos a hacer aquí es que voy a pasar a la herramienta de mesa de trabajo superior donde dice marco. Y si estás en esta herramienta, ya sea si estás en la pestaña Diseño o en la pestaña prototipo, prototipo. Te permitirá hacer click para crear diferentes tamaños y dispositivos para los que estarías diseñando. Entonces en este caso, somos tamaños de pantalla y dimensiones son iPhone 11 x Así que vamos a seguir adelante y dar click en eso. Y solo se va a arrastrar automáticamente colocar una mesa de trabajo sobre Figma. Y ahora necesitamos simplemente encoger este tablero de arte hacia abajo desde arriba. Queremos mantener el mismo ancho, pero queremos mover de arriba hacia abajo por lo que es alrededor de un poco más de tres, poco más o un poco menos de la mitad de la mesa de trabajo a la izquierda. Y entonces lo que haremos es si solo haces click en la parte superior y arrastras hacia abajo. Diremos de eso se ve bien. De acuerdo, entonces lo que voy a hacer es que voy a seleccionar algunos de los elementos aquí desde arriba. Solo seleccionemos, No te preocupes por las líneas. Solo seleccionemos todo el texto aquí. Presiona Comando C. O si estás en un PC Control C. Voy a seleccionar la mesa de trabajo aquí. Y otra vez, Comando o Control V como en Victor a colocar. Está bien, eso se ve bien. Ahora creo que tenemos todas las piezas que necesitaríamos. De acuerdo, entonces lo que vamos a hacer aquí es que vamos a hacer clic en el desplegable. Basta con agarrar todo este elemento, presionar el prototipo, y de nuevo arrástrelo a este tablero de arte aquí. Y verá interacción, el cuadro de diálogo Detalles de interacción aquí. Queremos la acción para impar tap. Esa es la función que apuntan a la que queremos crear. Pero el mecanismo aquí queremos cambiar. Entonces en lugar de navegar a donde quieres que diga la superposición abierta. Y luego una vez que tengas superposición, nos va a dar nuestras opciones de superposición, y nos vamos a meter en estas opciones aquí en el siguiente conjunto de videos o prototipos aquí, justo después de esto uno vamos a hacer el modal, pero ahora mismo queremos hacer centrados en fondo. Queremos habilitar el clic cuando se cierra, al hacer clic fuera o tocar fuera. Eso significa que cualquiera de la zona por encima de ésta se cerrará. Y también queremos agregar una superposición de fondo. Prevalece a negro, lo cual es más común. Y hasta podemos hacerla más oscura. Podemos hacer 50 por ciento de opacidad aquí. Y luego para la animación aquí, no queremos en su lugar. Pero vamos a ver lo que hemos creado hasta ahora para que veas cómo funciona Instant. Voy a quitar cualquiera de los, se puede ver este todavía tenía un brazo prototipo conectado al tablero de arte aquí en la parte superior. Simplemente pinchemos y eliminemos eso por ahora. De acuerdo, entonces vamos a seleccionar este tablero de arte con la etiqueta de inicio en él. Presiona el botón de reproducción, y ya verás ahora tenemos el menú desplegable aquí. Y si lo cierras, se va. Pero no hay transición, ¿verdad? Es instantáneo. Y queremos tener una transición aquí. Entonces si volvemos a seleccionar los detalles de interacción prototipo, y ves donde dice animación, queremos usar el mismo que acabamos de aprender en la última pantalla. Queremos que esos se muevan en animaciones. Y a partir de éste, no queremos que la izquierda a la derecha, queremos que se mueva hacia arriba. Y luego cuando haga clic automáticamente fuera de la superposición, invertirá eso para usted. Por lo que se moverá fuera del camino y hacia abajo cuando haga clic fuera de él. Entonces volvamos al prototipo aquí. Selecciona el menú desplegable, y ahí tienes. Ya ves cómo se deslizó eso. Y cuando hagas clic fuera de ella, va a revertir esa interacción automáticamente para ti. Enfriar. Entonces eso es bastante sencillo ahí. Y ahora sólo vamos. Digamos que queremos rojo. Vamos a dar click aquí. Y al tocar, no queremos nada de la animación aquí. Tan solo instantáneo está bien. Y ahora vamos a seleccionar la x aquí para conectarla a la pantalla de inicio para que pueda quitar esta selección fácilmente. Tan solo instantáneo está bien también. Y ahora tendremos una completa selección desplegable para un dispositivo móvil. Haz clic en el menú SlideUp entra, quieres rojo. Aparecerá rojo. Presione X, puede hacerlo todo de nuevo. Está bien, genial. Pasemos al siguiente. Muy similar. Este será el modal. Y voy a mover este inicio aquí abajo al ejemplo. Vamos a ver este realmente rápido. Está bien, así que tenemos un botón presionado, el texto aquí, y verás que dice alto y podemos cerrarlo. Entonces solo una interacción modal para un dispositivo móvil. Y sigamos adelante y movamos la etiqueta del prototipo de inicio a la que dice que sí. Cambiemos esta prueba de texto. Sólo di, no lo sé diga Abierto. Así que acabo de hacer clic en él. Presiono T en mi teclado. Eso me da la herramienta de texto. Se hace clic una vez que lo selecciona, si se hace clic, si se triple-clic algunos haciendo clic dos veces, un selecciona automáticamente todo. Entonces de nuevo, puedo triple-click y escribir abrir de nuevo. De acuerdo, así que digamos que tengo el modal aquí construido otra vez, pero vamos, vamos a borrar esto por ahora. Empecemos de cero aquí. Tan mismo cosa. Voy a venir al marco aquí. Herramienta de marco en la parte superior izquierda, voy a seleccionar el iPhone Pro X me va a dar una mesa de trabajo. Y lo que voy a hacer aquí es tomar este marco de tablero de arte. Voy a hacerlo un poco menos alto. Entonces voy a dar click desde arriba, Vamos a moverlo aquí abajo. Pero en este caso, también quiero hacerlo menos amplio también. Por lo que está actuando como modal. No cubre todo el teléfono desde el espacio vertical hasta el espacio izquierdo y derecho, pero cabe un poco justo en el medio del teléfono. De acuerdo, así que eso ya es un buen comienzo. Y lo que queremos hacer es volver a la pestaña Diseño. Y vamos a seguir adelante y redondear estos rincones. Entonces se ve donde dice marco. Voy a redondear las esquinas poniendo, digamos 20. ¿ De acuerdo? No y normalmente no quieres ir demasiado pesado como no quieres tener esquinas que sean muy redondeadas así. Simplemente quieres unas bonitas esquinas redondeadas sutiles. Por lo que 20 deben ser perfectos. De acuerdo, y luego para llegar al prototipo, qué hay que seguir adelante y pulsar el clic en el botón Abrir. Deslizemos el brazo prototipo por aquí, por encima de este tablero de arte. Y sigamos adelante y llamemos a esto al grifo. Y de la misma manera que lo hacíamos antes de ir a navegar, vamos a cambiar esto para abrir la superposición. Y ahora en lugar de hacer centrados en fondo como lo hicimos antes, Hagamos centrados. Y sigamos adelante y cerrémonos al hacer clic afuera. Lo que también hace agregar una superposición de fondo. Podemos mantenerlo en 25 per se aquí. Y de nuevo, hagamos sólo una interacción de disolver. No necesitamos que se mueva ni nada por el estilo. De acuerdo, eso debería quedar bien. Adelante y veamos cómo se ve eso en el prototipo. Presiona abierta, está bien, y tenemos un modal. Adelante y cerrémoslo. Abrir y cerrar. Está bien, Eso se ve bien. Vamos a añadir algunas de las piezas a este modal aquí. Voy a copiar este alto, y voy a seleccionar la mesa de trabajo, pegar el alto aquí, sólo un poco centrado si quieres también. Y también voy a dar clic en la X aquí, pegar la x, y eliminar esta interacción. Otra forma de quitar el pequeño brazo GUI aquí, como puedas, haz clic con el botón derecho en una pizarra de arte y ver dónde dice Eliminar interacciones. Eso eliminará todas las interacciones justo en ese tablero de arte. Adelante y pongamos esta x en la parte superior derecha. Arrástrelo hasta el punto de partida de este tablero de arte. Y sigamos adelante y digamos al grifo, disolver, eso debería funcionar perfecto. Y sólo va a cerrar este modal para nosotros. Presiona X y estamos de vuelta ahí. Por lo que abre y cierra. Y también puedes tocar en cualquier lugar fuera del modal y cerrarlo también. De acuerdo, Esa fue la forma de hacer un modal. Vamos a arrastrar el punto de inicio hacia el de abajo. Y vamos a ver un menú que viene de la barra de título. Y esta es una interacción muy, muy común que encontrarás en muchos dispositivos móviles. Por lo que hago click en la mesa de trabajo aquí. Mi prensa R en mi teclado, eso me llevará a cualquier pantalla que tenga la etiqueta de inicio en ella. Y verás que hay un menú de hamburguesas o un icono de hamburguesas en la parte superior de esta barra de título. Tengo la barra de título arreglada. Para que veas que tengo todos sus seleccionados aquí en la parte superior. Y he presionado fijo al desplazarme. Lo que esto hará es de nuevo, solo lo mantiene en la parte superior a medida que el usuario se desplaza y se mantendrá fijo. No se mueve mientras todo el contenido, como los números 1, 2 y 3, nos desplazaremos. Entonces verás cómo eso se desplaza a continuación. Y verás entrar el menú. Por lo que hago clic en el icono Menú y el menú se desliza de izquierda a derecha. Si hago clic fuera de ella, lo cierra. Interacción bastante cool. Vayamos a la cabeza y construyámoslo. Por lo que voy a volver a hacer clic en la pestaña Prototipo. Y voy a arrastrar la sección de inicio a la que dice que sí. Voy a mover un poco todo este texto por aquí. Eso vamos a necesitar en un segundo. Entonces, no lo elimines. Haga clic en la Herramienta de Mesa de Trabajo. Y sigamos adelante y volvamos a soltar un clic en la herramienta de mesa de trabajo. ¿ Qué es la sequía? Se le cayó un iPhone Pro X aquí. Y este caso queremos que sea igual. Podemos hacerlo del mismo tamaño que la pantalla. A la izquierda. Debería estar bien. Pero no queremos que sea del mismo ancho. Queremos que sea un poco más delgado. Entonces digamos que aquí es bueno. Y lo que podemos hacer aquí. Entonces si vamos a la pestaña Diseño aquí, tendrás un color de relleno. Por lo que cuando seleccionas el nivel de mesa de trabajo, te permite llenar la mesa de arte con lo que quieras llenar. Incluso puedes hacerlo totalmente transparente. Podría presionar 0 y es totalmente transparente, nuestra pizarra, o puedo entrar en ella y seleccionar un color. Entonces en este caso, sé que es debido debe hacer esto azul. Puedes hacer cualquier color que quieras, no es realmente tu mundo. Se puede hacer cualquier cosa. Um, pero por este ejemplo, hagámoslo azul. Sólo por diversión para cambiarlo un poco. Y sigamos adelante y metamos este texto en el menú. Aquí. Muévelo un poco hacia abajo. Está bien, Genial. Por lo que tenemos nuestro diseño de menú aquí. Vamos a seleccionar el icono del menú de hamburguesas. Y arrastrémoslo hasta el diseño de menú que tenemos en tap. Y luego otra vez memoria donde dice navegar a. Por lo que tenemos el on tap es bueno. Navega hasta donde quieras cambiarlo para meterte en estas superposiciones. Y de nuevo, la superposición abierta, igual que lo hicimos antes. Y en lugar de centrado o inferior, queremos que entre de arriba a la izquierda. Entonces este medio de arriba a la izquierda aquí. Las mismas funciones que queríamos cerrar al hacer click fuera. Y queremos agregar un color de fondo detrás de él. Y de nuevo, no queremos tener disolución ni instantáneo. Entonces de nuevo, podemos mantenerlo en un instante por ahora y solo ver cómo se ve. Pero vamos a cambiar eso aquí en un segundo. Está bien, ahí está el menú entró. Podemos hacer click fuera de él, cerrarlo. Pero se puede ver un no tuvo transición. Simplemente apareció instantáneamente. Entonces vamos a sumar la transición para que se mueva. Entonces otra vez, si salimos de la animación aquí, permitimos que se mueva. Y queremos que esto entre por la izquierda. Por lo que a la izquierda va a estar bien. Está bien, lo siento, queremos que entre de la derecha. Entonces, dondequiera que esté la posición del menú a la izquierda, queremos que venga de moverse de aquí derecho. Y si alguna vez te pierdes, Eso es lo hace Figma en este pequeño ejemplo. Te muestra que esta pantalla sea esta nueva pantalla que vas a prototipo aquí, se va a deslizar por encima de la pantalla que estás en la pantalla a.Vale, vamos a ver eso. Eso debe ser completo. Entonces vamos a presionar R en el teclado, haga clic en el ícono de la hamburguesa. Y se desliza dentro. Cierra aquí. Se desliza hacia fuera. Muy bien, genial. Entonces ahí lo tienes. Ahí tienes un menú. Y eso concluye este video. Y el siguiente conjunto de videos aquí veremos la función de prototipo smart animate construirá un look cool y cargador. Y haremos desplazamiento horizontal y vertical. Como siempre. Gracias, y nos vemos en el siguiente video. Adiós. 12. Video extra: animar inteligente y construir un cargador y desplazamiento horizontal y Loader vertical: Bienvenido a Video 3. En los videos bonus vamos a cubrir smart animate. Vamos a construir un cargador, un cargador de pantalla usando smart animate. Y vamos a ver el deslizamiento horizontal y vertical y el desplazamiento. Está bien, así que sigamos adelante y volvamos al archivo aquí. Voy a presionar Periodo de Comando, que mostrará todo el mi fig, fig, mi interfaz. Eso es lo que estoy haciendo aquí. Presionando periodos de comando para eliminar todo, periodo de comandos para ver todas mis herramientas de interfaz dentro de Figma. Vayamos a donde lo dejamos fuera, que estaba construyendo este menú. Agarremos el punto de arranque por aquí. Y vamos a ir rápidamente a ver el ejemplo de smart animate. Entonces lo que es más animado hace esencialmente animará tu conjunto de pantallas para mostrar la siguiente pantalla. Y eso lo cubrimos en la última serie de videos. Sólo voy a tocarlo brevemente. Hay un par de cosas. Los errores comunes que encontré una y otra vez usando smart animate que solo quiero resaltar y algunos pequeños consejos rápidos para ti. Presione R en el teclado. Pero de nuevo, hemos prototipado este círculo aquí. Y se puede ver cómo, y hace a la siguiente pantalla con el círculo más grande. Y si haces clic en el círculo más grande, hace clic y vuelve a bajar. Tan muy, muy rica animación para realmente simple Técnica de hacer. Resultados tan altos, sencillos de hacer. Entonces lo que vamos a hacer es agarrar esta etiqueta de inicio a la sección que haces. Todo lo que tenemos que hacer literalmente es agarrar este círculo, prototiparlo a la pantalla junto a la derecha. Y en lugar de mudarnos, solo presionamos smart animate. Y va a hacer todo el trabajo por nosotros. Y vamos a seguir adelante y hacer clic en este círculo aquí, arrastrar hacia atrás y animar inteligente. Y se puede ver esa interacción ocurriendo aquí y aquí muy rápido. Se puede controlar la velocidad de transición. Entonces si volvemos a la de aquí, digamos que son 800 milisegundos y ya verás que habrá una menor. Y en la ropa irá más rápido. Incluso puedes cambiar el color si quieres también. Pasemos al diseño. Vamos a cambiarlo de caramelo rosa a este azul de aquí. Y verás que poco a poco cambia de colores también. Impresionante, Bastante cool. Está bien. Otra cosa común que sólo quiero tocar brevemente es un error que ocurre con bastante frecuencia. Voy a arrastrar esto. No tienes que seguirme en esta. Yo solo quiero llamarlo para el registro y entrar aquí, eso pasa. De acuerdo, así que voy a seguir adelante y jugar esto. Esto es lo que hay que evitar. Y primero te voy a mostrar el problema aquí es que si toco Login, verás cómo no hubo transición. No hubo deslizamiento de este triángulo rosa sobre la pantalla de inicio de sesión. Y lo que realmente queremos es algo que se parezca más a esto aquí donde voy a copiar sobre esta pantalla. Voy a agarrar los detalles de inicio de sesión, pero eliminar todo esto. Voy a aguantar, voy a agarrar los textos de inicio de sesión, presionar negrita, Comando B para negrita, que sea un 100 por ciento. Y voy a seguir adelante y hacer otro comando B para desnegrado, hacer de esto una fuente ligera. Y yo voy a tomar el mismo rectángulo aquí, y aquí está la llave. Estoy agarrando este mismo rectángulo de la última pantalla, y lo voy a deslizar para iniciar sesión. Y ahora cuando presionamos el inicio de sesión a esta pantalla y el registro de vuelta a esta pantalla. Todo con animates inteligentes. Verás el inteligente animado de Logan. Al hacer clic en el Inscribirse, vuelve a registrarse con el Smart Animate. Ya verás que la transición es mucho mejor. Entonces ve cómo esa transición muy inteligentemente terminó. Entonces lo que pasa aquí es si, digamos que copié la pantalla de inscripción y eliminé este rectángulo, y creé uno nuevo. Esta genial de aquí. Eso es lo que provoca el problema aquí. Entonces ya verás ahora cuando vuelva a inscribirme , no hace transición. Y es porque Figma antes, cuando usas el mismo rectángulo aquí, figma identifica este rectángulo como el mismo rectángulo que estás usando en la pantalla de inicio de sesión. Entonces lo sabe. Estás diciendo que quiero que este rectángulo se mueva hacia este lado de la Mesa de Trabajo usando smart animate, donde si dibujas un nuevo rectángulo, no distingue entre el rectángulo rosa aquí debe ser el rectángulo gris aquí trata su cabeza como dos elementos diferentes. Entonces es realmente importante si un poco superar ese concepto. Por lo que voy a volver un poco al Comando Z. Entonces puedes ver, digo que le digo a Figma durante este prototipo aquí para animar inteligentemente a esta pantalla de inicio de sesión. Que yo quiero este mismo rectángulo por aquí, así que identifica que está diciendo, oh, es apuntar, este rectángulo vive aquí. Y fuera iniciar sesión. Aquí vive el mismo rectángulo. Y un inteligente anima va a hacer su trabajo para hacer la animación, para moverla por aquí. Pero de nuevo, si es algo nuevo que dibujaste, rompe esa relación que tienes aquí. Y otra cosa que sucede a veces durante Smart Animate es que te darás cuenta de que algo simplemente se va, se vuelve raro. A ver. Normalmente verás elementos como volar alrededor de la pantalla, como dicen este globo ocular entra volando o el bokeh t hace algo diferente. Es difícil de reproducir porque sucede de vez verás algunas funciones extrañas, pero el smart animate. Y así el truco es, es smart animate house para hacer mucho con el agrupamiento. Entonces si estás viendo algunos elementos raros de la interfaz volando por la pantalla, toma la primera pantalla y agrupa todo. Entonces digamos que ninguno de estos se agruparon aquí. Adelante y haz un comando G, o puedes hacer un objeto y grupo que voy a hacer, o si estás en un PC Control G por, voy a agrupar todos los elementos aquí y prácticamente sí agrupa todo lo que no es eso lo que quieres animar. Agarra los botones. Incluso puedes agrupar todo esto, el botón y los campos de formulario. Y así solo empieza a agrupar las cosas. Y prometo que una vez que empieces a agrupar, notarás la animación o la cosa, el elemento que intentas animar va a animar mucho mejor. Entonces solo un pequeño truco si estás teniendo problemas con la función smart animate y no se está animando correctamente, comienza a agrupar elementos. Y, y esperemos que veas un cambio en eso. De acuerdo, vamos a divertirnos un poco ahora. Vamos a construir este cargador aquí. Entonces voy a agarrar el nivel de inicio a la pantalla debajo de carga. Voy a presionar play. Y lo que vamos a construir es algo que se ve así. Entonces se ve que se carga. Y luego tienes una transición desde la barra de título aquí en la parte superior del mapa. De acuerdo, Así que vamos, vamos a hacer eso. En el que dice que sí. Agarremos el inicio. Vamos a hacer estallar eso por aquí. Y esto es realmente sencillo. Simplemente queremos copiar esta página. Simplemente seleccionaré el tablero de arte. Yo estoy aquí. Van a hacer Comando o lo siento, opción. Y eso va a copiar y arrastrar aquí el mismo tablero de arte. O voy a hacer un Comando C y Comando V, como en Victor, y eso lo va a pegar. Voy a quitar esta etiqueta de inicio uno. Para que puedas ver en el prototipo dice punto de inicio de flujo, inicia uno, solo tienes que pulsar el signo menos aquí, ver donde dice eliminar punto de partida y eliminarlo. Y todo lo que queremos hacer es agarrar esto. Cuando voy a la pestaña Diseño y agarro la barra de carga rosa y simplemente la muevo hasta la parte superior. Y aquí es donde vamos a combinar la función de retardo de la que acabamos de aprender. Por lo que seleccionamos todo el prototipo, toda la mesa de trabajo, hacemos clic y lo arrastramos hasta la parte de carga aquí. Y de nuevo, no queremos tap, queremos tras retraso. Y hagamos un pequeño retraso. Hagamos unos 100 milisegundos. Y queremos el animate inteligente, pero queremos una mayor facilidad en o un retraso más largo a la misma. Entonces hagámoslo, hagamos 20 mil milisegundos a segundos. Por lo que dos segundos especie de estado de carga. Vamos a pulsar el botón Reproducir. Y deberías ver esa interacción aquí. No hemos definido nada que suceda después de esta pantalla. Entonces todo lo que debes ver es solo la carga que ocurre. Entonces otra vez, tomamos en la pantalla de inicio aquí. Lo hemos configurado para hacer un realmente rápido con menos de un segundo, se cargará a esta pantalla. Y luego hace el soft delay y transiciona el rectángulo rosado desde el inicio de esa pantalla hasta las hormigas. Entonces esa es la animación inteligente, la Smart Animate haciendo su magia. Y lo mismo. Queremos seguir adelante y mirar la pantalla aquí. Y queremos arrastrar esto hasta aquí. Y un mismo trato que queremos tras retraso, retraso muy lento o muy rápido , por lo que 100 milisegundos. Y podemos hacer un animate inteligente también. Y así verás ahora cuando empieces esto en, luego carga el mapa de San Francisco con la barra de título en la parte superior y la barra de navegación en la parte inferior. Está bien, pero vamos a divertirnos un poco aquí. Entonces si recuerdas en el último prototipo aquí, verás un retraso, verás una transición. Cómo la barra de título hay transición hacia abajo. Se deslizó así hacia abajo. Esa es una transición bastante cool donde se puede ver la que hemos hecho. Eso no lo ha hecho. Simplemente carga el mapa y se puede ver cómo se disuelve en. Entonces sigamos adelante y creemos un estado de transición para esto. Este es un pequeño hackeo que puedes usar. Entonces otra vez, tenemos tras retraso, tenemos animate inteligente. Y lo que queremos hacer es primero agarrar la sección de la barra de título aquí en esta pantalla. Y pongámoslo aquí en la pantalla de carga. Y también agarremos esta sección de barra de navegación, y pongámosla en esta pantalla. Entonces Comando V, así que solo estoy presionando Comando C. Cuando tengo estos elementos, seleccionando el tablero de arte en la parte superior aquí, y presionando Comando V. Ahora voy a seleccionar este elemento gráfico aquí, la barra de nav o la barra de título. Soy una espera Shift y voy a flecha hacia arriba y simplemente moverlo fuera del camino. Ni siquiera se ve que se hace difícil seleccionarlo. Ya sabes, está ahí cuando haces clic y arrastras tu selección. Y yo voy a hacer lo mismo para la barra de navegación de abajo. Y luego simplemente sacarlo del camino para que veas que sigue ahí. Entonces lo que estamos diciendo para decirle a Figma es que en la siguiente pantalla con el animate inteligente, reconozca estas dos formas y mueva esta forma hacia abajo para pasar a posición por aquí en la pantalla del mapa. De acuerdo, vamos a ver ese prototipo. A ver cómo se pone como ese poquito de una transición lenta. Pero creo que ahora sólo somos geniales. Muy bonito. Muy bien, Así que un pequeño hackeo ahí en la función de animación inteligente. De acuerdo, vamos a ver algunos flotando realmente rápido y algunas transiciones apremiantes. Entonces en el prototipo, así que más o menos flotar. Pasa el ratón sobre él, verías el punto. No hay flotador ni dispositivos móviles. Entonces esto es solo para que veas cómo funciona el hover como prototipo. Solo usarías esto para sitios web de escritorio y diseño de aplicaciones de escritorio. Pero lo puedes ver aquí y aprendiste aquí. Lo siguiente que vamos a hacer aquí es una interacción apremiante, que aquí te mostraré y nos meteremos en ello. Y esto funciona realmente bien para cuatro gráficos. Para que veas aquí tengo una gráfica y quiero presionar o frotar esta gráfica. Y cuando toco y sostén, veo los detalles para 2016. Entonces digamos que estamos midiendo abrazos aquí. 2016 hubo 513 abrazos. Eso es bastante impresionante. Significa que tienes más que un abrazo al día. Y podría simplemente cómo funcionaría esto cuando agregas ingeniero esto es solo puedes fregar el dedo por el gráfico y poder ver los detalles en cada uno de estos niveles aquí. Muy bien, volvamos al expediente. Agarremos el punto de inicio hacia el que dice que sí. Muy fácil aquí. Sólo tienes que seleccionar el círculo por aquí. Manténgalo en Smart Animate, blanco en lugar de en tap, queremos mientras se mantiene el cursor. Entra en el prototipo. Y se puede ver cuando el ratón entra en él, cambia de color un poco demasiado lento de un retraso. Entonces vamos a ver ese retraso aquí. Sí, así que 200 milisegundos, vamos a cambiarlo de nuevo a sólo 300 milisegundos aquí. Entonces 3 000 MS. Ciérrelo, y ahora deberíamos tener un buen estado de flotación. Está bien, eso se siente bien. Pasemos a la pantalla gráfica aquí y aprendamos a hacer el estado The Press aquí. Entonces lo que voy a hacer es llevarme este tablero de arte aquí. Y de nuevo estoy sosteniendo opción. Voy a dar clic y arrastrar, copiar esta pantalla aquí. Si bien estoy en la pestaña Prototipo, mira eso dice punto de inicio de flujo, presiona Menos para eliminar el punto de partida. Por lo que de esa manera se inicia en esta pantalla. Y luego cuando voy a copiar sobre el 513, abrazos aquí, basta con dar click y arrastrar. Voy a agruparlo Comando G, sólo para que esté todo en una forma. Entonces lo tenemos aquí. Voy a pegarlo en su lugar. Y ahora vamos a seleccionar, basta con hacer click y arrastrar. Voy a mantener turno en mi teclado. Y voy a seleccionar la, casi todas las barras excepto la que somos, que queremos resaltar cuando fregamos. Y voy a hacer de estos todos 30 por ciento de opacidad. Entonces se van. Nosotros vamos a hacer lo mismo para las fechas. Agarremos todo menos 2016, Hagamos estos 30 por ciento de opacidad en la capa dentro de la pestaña Diseño. Y nos vemos bien. ¿ De acuerdo? Y entonces lo que queremos hacer aquí es que puedes hacer dos cosas. Puedes seleccionar la barra 2016 y puedes hacer el prototipo directamente desde aquí. O puedes hacer un área de grifo más grande. Entonces voy a agarrar un rectángulo. También puedes usar la tecla rápida del teclado es r Voy a hacer un rectángulo que es un poco más grande para el 2016, solo para que haya un espacio de tap más grande. Y ahora voy a arrastrar este rectángulo hacia el, hasta el tablero de arte donde tenemos los 513 abrazos. Y la función de prototipo para esto no está en grifo, pero queremos mientras presionamos. Y no necesitamos hacer animate inteligente que hacen una disolución. Entonces es sólo una especie de retraso, un poco de retraso. Y volvamos a la pestaña Diseño aquí. Ahora que sabemos que esta zona gris es el objetivo prototipo para la siguiente pantalla, Sigamos adelante y volvamos al 0% de opacidad en la capa de paso. Y ahora deberíamos ver esa interacción. Adelante y pulsa Play, ve a tu prototipo, y luego simplemente haz clic y mantén pulsado el 2016. Y verás que uno de los puntos destacados de la zona. Y cuando sueltes el ratón, verás un poco destacado. Entonces estado, lo mismo si abres esto en el Figma. Si descargas Figma en tu teléfono e inicias sesión, puedes ver lo mismo. Podrás probar los prototipos en tu teléfono. Y esto será lo mismo que pongas el dedo hacia abajo y golpeando y sosteniendo con el dedo, verías aparecer el abrazo 513 de nivel superior. Y luego cuando te sueltes el dedo, lo verás volver a este estado. De acuerdo, bastante simple. Vamos a entrar un poco más una interacción complicada, que es el deslizamiento horizontal, sombody, acabo de arrastrar el área de inicio hacia el área de deslizamiento horizontal, tablero de arte. Voy a presionar play. Y así esto es lo que vamos a construir, que es si se desliza en estas tarjetas aquí, se puede ver que hay deslizamiento horizontal. Tienes el Alimento 1, 2 también. De acuerdo, parece bastante complicado, pero en realidad es bastante simple aquí. Sólo vamos a hacer uno, vamos a hacer los animales. Así que adelante y arrastra la sección de inicio hasta el tablero de arte que dice que sí. Y puedes ver que aquí tengo todo un juego de cartas para cada animal. Y uno de los plug-ins cool que uso para conseguir todas estas fotos. Digamos que aquí tengo un montón de plazas. Es que puedo ir a un plugin. Se llama Contenido real o Unsplash. Vamos a ver Unsplash. Y Unsplash me dará un montón de fotos al azar. Entonces digamos que aquí quiero animales. poblará todos Aquípoblará todos estos rectángulos con fotos. Yo puedo hacer arte. Poblar con arte. Por lo que es una manera fácil de conseguir, solo consigue un montón de fotos gratis que puedes tener en Figma. Y si triples click en ellas, puedes ver desde la pestaña Diseño, puedes recortarlas un poco si quieres. Voy a pasar de fallado a cosechar y se puede ver cómo lo cosecha para que quepas. De acuerdo, un poco pro tip, pero sigamos adelante y empecemos a construir el deslizamiento horizontal para los animales. Entonces cuando hizo clic y desliza hacia la izquierda o hacia la derecha. Entonces lo primero que queremos hacer aquí es lo que sean los elementos que queremos hacer deslizamiento horizontal, sacarlos de tu tablero de arte. Entonces ya lo hice por ti, pero solo empieza con los elementos que quieres crear que están detrás de la pantalla aquí, pero hazlos todos dispuestos frente a ti. Al igual que poner todas las piezas de ajedrez en la pizarra por diga. Bueno que queremos hacer es también queremos seleccionar cada uno de estos y agruparlo. Entonces voy a seleccionar este. Voy a Comando G o Control G. También puedes hacer clic derecho y decir grupo. Entonces si estos se desagruparan aquí, se vería algo así. Entonces haría clic con el botón derecho y pasaría por aquí a selección de grupos o Comando G. Así que ya los he agrupado para ti, pero solo asegurándome de que están todos agrupados aquí, solo para que sean fácilmente seleccionable. Y ahora vamos a seleccionarlos todos. Voy a dar clic y arrastrar para seleccionar todos estos. Y luego esto es lo que realmente importa. Voy a hacer clic derecho en estos y voy a enmarcar esta selección. Entonces otra vez, seleccione todos estos realmente importantes aquí. Haga clic derecho. Enmarque la selección y se puede ver en el menú, en las capas aquí tengo todos estos grupos. Y cuando haga clic derecho y vaya a la selección de marcos, verá que es encuadre. Agrupó aquí todas estas imágenes en un marco. Y puedes llamar a lo que se llama a éste animales. Entonces tengo aquí un marco llamado animales que tiene todas las imágenes y las tarjetas que acabamos de crear y agrupar en cada una. Entonces si quiero seleccionar al oso aquí, si quiero seleccionar al tigre. De acuerdo, Así que ahora vamos a hacer es vamos a arrastrar este tablero de arte. Por lo que voy a dar clic a los animales, asegúrate de tener seleccionada la capa de mesa de trabajo. Voy a arrastrarlo a este tablero de arte. Y sabe que está en el tablero de arte porque resaltará el azul. Así que asegúrate de que esté en el tablero de arte. Una de las formas que pone a prueba esto como seleccionar la mesa aquí y moverla o moverla por ahí. Si estos no se mueven, a veces se verá así. No lo tendrás en la pizarra de arte. Se verá como si estuviera en la mesa de trabajo. Pero cuando mueves este tablero de arte, oops, Inténtalo de nuevo. De acuerdo, Así que sí, se verá así. Y luego cuando muevas la mesa de trabajo, te darás cuenta, oh espera, estos son estos están en la mesa de arte, lo que también significaría que no aparecieron en tu prototipo a. Entonces de nuevo, solo asegúrate de que tu tablero de arte aquí, esta capa está dentro del tablero de arte animal aquí. Entonces puedes ver aquí mismo, no lo hice, aún no está en la pizarra de arte. Alguien golpeó comando C. Voy a seleccionar la mesa de trabajo. Voy a pegarlo dentro. Entonces ahora cuando lo muevo y se puede ver cómo está, está ahí. De acuerdo, así que aquí está la pieza clave para hacer este pergamino horizontal. Así que selecciona aquí el marco animal. Entonces en tu paleta de capas, solo selecciona los animales. Y lo que queremos hacer es mantener el mando desde aquí derecho y arrastrar y especie de recorte en esta dirección de cuadro. Esto es realmente importante. Entonces de nuevo, si estás haciendo clic y arrastrando en él y se ve así, no tienes seleccionada la capa de mesa de trabajo. Por lo que de nuevo, vuelve atrás y selecciona donde dice los animales en el nivel de tablero de arte y sostén Comando. Y arrastra esto justo a la derecha del tablero de arte. Y aún podemos ver todas las fotos aquí. Entonces lo que queremos hacer aquí es en la pestaña Diseño aquí, la parte superior derecha, donde dice Contenido de Clip. Adelante y haga clic en eso. Y lo que va a ser, va a recortar el contenido desde donde arrastramos este brazo aquí. Entonces es recortar el tablero de arte. Por lo que casi estamos recortando este marco aquí. Y estamos permitiendo que el contenido clip recorte ese contenido para que no lo veamos. También es una buena idea asegurarse un poco más de espacio en la parte inferior y en la parte superior de este recorte. Entonces de esa manera entra la sombra. Y también mover esta línea aquí todo el camino a la izquierda. Eso es realmente importante. Te mostraré por qué voy a hacer dos opciones donde no está y verás la diferencia. Entonces estamos casi terminados. Estamos listos para hacer este prototipo y hacer de este marco un deslizamiento horizontal. Entonces todos nosotros, es muy sencillo. Todo lo que necesitamos hacer es ir al prototipo aquí y ver dónde dice desbordamiento, desplazamiento de desbordamiento. Basta con hacer desplazamiento horizontal. Y ahora vamos a mirar. Deberías tener el desplazamiento horizontal. Por lo que si tocas y haces clic, verás las tarjetas moviéndose en esta dirección. De acuerdo, Y así la razón por la que sacar el tablero de arte todo el camino hacia la izquierda es para que las imágenes parezcan que se desplazan más allá del dispositivo. Entonces yo no voy a hacer eso. Lo voy a hacer a mitad de camino. Digamos que aquí. Y se puede ver qué pasa, ver cómo ellos, no se desplazan hasta el final del dispositivo. Se ve raro. Es como si estuviera entrando en un parpadeo, en tierra parpadeante. Entonces lo que queremos hacer aquí es que siempre me aseguro de que sea todo el camino hasta el final de nuestro aeropuerto para que parezca que va directo al final donde vive el dispositivo. Enfriar. Ahí vas. Ahí hay desplazamiento horizontal. Vamos a hacer desplazamiento vertical aquí, que es más o menos la misma técnica. Muy sencillo. Por lo que de nuevo, tenemos aquí la navegación de nivel superior. Y es la misma idea, son solo las cartas que se desplazan aquí. Entonces sigamos adelante y movamos este arranque uno hacia el tablero de arte a la derecha que dice que sí. Nuevamente, tengo todas estas seleccionadas aquí. Y de nuevo, solo asegúrate de que cada uno esté agrupado. Sólo estoy pasando por el comando G en todos estos, asegurándome de que estén todos agrupados. Y yo consigo, voy a seleccionarlos todos a la vez. Muy, muy importante. Adelante y enmarque esta selección. Ahora podemos saber mirando las capas de la izquierda que era un marco. Vamos a nombrar a este animal otra vez. Y podemos ver cuando seleccionamos el encuadre animal de la izquierda que hay todos los grupos y luego las cartas dentro de él. El mismo tipo de trato. Vamos a entrar, arrastrar esto tablero de arte aquí, ir al fondo y mantener el Comando. Desliza esto todo el camino hacia arriba. Vuelve a la pestaña de diseño y recuerda recortar este contenido. Ahora podemos ver los contenidos siendo recortados. Y de nuevo, vamos a sumar algo de espacio a la izquierda en algún espacio a la derecha. Y queremos que llegue justo donde está el inicio de ese menú. Entonces parece que se está desplazando por debajo de ese menú. Y ahora que lo hemos hecho, estamos bien para ir. Podemos ir al prototipo, sí podemos conocer el desplazamiento, y podemos hacer desplazamiento vertical. Y ahora si presionamos Play, verás aquí misma función. Está bien, genial. Así que vamos a ver combinar ambos para hacer una interacción de mapa de aspecto realmente genial. Para que puedas seguir adelante y agarrar la etiqueta de inicio y arrastrar eso hacia donde dice deslizamiento vertical y horizontal. Y les voy a mostrar el ejemplo aquí en el prototipo. Por lo que tienes un mapa y puedes ver con ambas capacidades de deslizamiento vertical y horizontal. Y hace para una interacción de mapa realmente genial donde estás haciendo clic y deslizando. De nuevo muy sencillo. Entonces sigamos adelante y jalemos el de inicio hacia ti. ¿ Tengo esta imagen de mapa grande aquí? Todo lo que tienes que hacer es simplemente arrastrar esto a este archivo y puedes ver cómo sigue siendo una gran imagen se va a recortar un poco. Eso es bueno, Eso es lo que queremos. Pero mismo trato que hicimos con todas las páginas de nivel de tarjeta. Queremos seguir adelante ya que este es un elemento, no necesitamos un grupo lo. Pero vamos a seguir adelante y hacer clic derecho en él. Y enmarquemos esta selección. De acuerdo, Así que ya puedes ver ahora a la izquierda tenemos un marco, llamémoslo mapa. Y dentro de este mapa tenemos la imagen. Volvamos atrás y seleccionemos aquí el nivel del marco. Así que asegúrate de que estás en el marco, no en el MAP, mapa de ciclo de MAP, imagen, el marco. Y hagamos lo mismo. Sostén Comando, arrastra esto hacia la izquierda. Pull comando, arrástrelo desde la derecha. Esto es realmente importante. Haces esto o out el deslizamiento vertical y horizontal no funcionará. Por lo que estamos más o menos enmascarando esta imagen aquí. Entonces si miraste, si sacé esto de nuevo, no necesitas hacer esto, pero si saco esto de nuevo, puedes ver aquí que todavía tenemos el mapa, tenemos el encuadre. Todavía no hemos hecho el contenido del clip. Entonces si el clip, el contenido se ve así. Pero aquí se puede ver el marco. Enmarcamos el mapa. Entonces todo lo que necesitamos hacer ahora es volver a este tablero de arte. Asegúrate de seleccionar aquí en las capas izquierdas, seleccionamos el mapa, hacemos el contenido del clip. Entonces de nuevo, estoy solo en la mesa de arte del mapa, no en toda la mesa de trabajo, solo en el mapa. Se puede ver incluso puedo hacer clic en él, recortar un poco más abajo del menú aquí está bien también. Esa será la misma interacción. Adelante y ve a Prototipo. Tengo un desplazamiento. Por lo que consigo, estoy seleccionando justo el marco de mapa aquí a la izquierda. Ya he hecho prototipo. Y vamos a hacer desplazamiento horizontal y vertical. Y ahora si vamos al botón Play, el tuyo debería verse algo así. De acuerdo, eso fue bastante divertido. Espero que hayas sacado mucho de ese video. Y en el siguiente video aquí vamos a aprender algunos scroll dos funciones, componente varia y vamos a mapear. Terminaremos con los componentes interactivos. Gracias. Nos vemos pronto. 13. Video extra: se recorrer, las variantes y los componentes interactivos: Antes del último video en las secciones de video bonus, cubriremos el scroll para funcionar las variantes de componentes y los componentes interactivos, ¿verdad? Entonces volvamos al archivo aquí. Y acabamos de envolver con el mapeo y mostrando el deslizamiento vertical y horizontal para que se vea así en la demo. Ahora sigamos adelante y arrastramos esta zona de inicio hacia donde dice Tap para desplazarse hacia abajo. Y ya verás aquí si yo, voy a seguir adelante y mostrar esto en el prototipo, voy a presionar la obra aquí. Y qué es esto, puedes deslizar hacia abajo, ver todo el resto del contenido. Pero lo que vamos a hacer es que vamos a crear algo donde si tocas esta tarjeta o tocas en cualquier sección, va a desplazar al usuario hacia abajo a esta sección en la que definas, generalmente más común. Esto lo verás en sitios web cuando desplázate por la parte inferior. Y hay un botón que dice como una flecha aquí que dice desplazar de nuevo hasta la parte superior. Eso lo verás como la misma interacción aquí. E incluso podemos construir eso aquí sobre esto, sobre esto por un segundo rápido. De acuerdo, Así que más o menos sigamos adelante y agarremos la etiqueta de anclaje de inicio hacia el prototipo aquí. Es una interacciones muy, muy simples. Entonces tenemos estas cuatro cartas aquí. Si presionas play en el prototipo, solo desliza el dedo dice normal. Aquí no hay interacción. Estoy dando click en este carrito, no pasa nada. Y todo lo que tenemos que hacer aquí es dentro del tablero de arte en sí es, voy a dar click en esta tarjeta. Cuánto desigual usualmente arrastramos estos prototipos para agregar sus marcos. En este caso, la voy a arrastrar a otra tarjeta dentro del mismo prototipo, digamos esta sección aquí. Y ya sabe en tap, scroll to, va a por defecto a eso. Y tiene instantáneo. No queremos instantáneo. Pero te voy a mostrar cómo se ve el instante solo para que puedas evitarlo. De acuerdo, entonces aquí tocamos la tarjeta y ves un instantáneamente lleva al usuario aquí, pero no hubo transición. Entonces queremos que esa transición entre. Entonces en lugar de in-state, queremos animar. Y animate desplazará sin problemas al usuario hasta ese punto. Entonces sigamos adelante y volvamos a hacer clic en la tarjeta. Y puedes ver que se remonta al carrito aquí arriba o abajo. Entonces ve que desplazarlo bien desplácese hacia abajo. No quieres que sea demasiado largo de un pergamino. Adelante y digamos como 20, 1000 milisegundos aquí. Eso probablemente sea demasiado lento. Se puede ver lo lento que es eso. Queremos uno rápido, suave. Entonces tal vez hasta 500 milisegundos serán probablemente lo suficientemente buenos. Ahí vas. Agradable transición facilidad allí. Y entonces sigamos adelante y agarremos la flecha aquí donde dice que sí. Yo sólo voy a copiar eso. Voy a rotarlo. Soy un rebajarlo un poco. Y voy a colocar esto en la parte inferior justo aquí. Y aquí podemos hacer lo mismo. Podemos crear prototipos de esta flecha para llevarte de nuevo a la tarjeta aquí. Misma función, Alan, toque, scroll para animar. Y ahora puedes ver aquí vamos a ir al fondo. Si hago clic en la flecha, me lleva de nuevo a la parte superior. Y se puede ver que todavía tiene un poco de tarjeta de habitación debajo. Entonces lo que podríamos hacer aquí es mover esta flecha hasta la cima. En realidad podemos agrupar aquí la sección superior de la barra. Voy a crear un marco. Cuando una cosecha sólo un poquito. Muy bien, y agarra el prototipo. Y vamos a tirarlo todo el camino hasta la parte superior de esta sección aquí. Ahora veamos qué pasa. Ahí. Vuelve a la posición. Por lo que no oculté el carro como lo hacía antes. Enfriar. Eso es más o menos un pergamino para funcionar. puede usar esto para móviles, Sepuede usar esto para móviles,se puede utilizar para web, pero es más comúnmente utilizado ya sea para bajar a sección por sección o desplazarse, o para hacer que el usuario todo el camino vuelva a subir al top sin tenerlos tienen que gustar deslizar todo el camino y seguir deslizando. De acuerdo, ahora vamos a ver un poco los componentes y las componentes y variantes de componentes y los componentes interactivos. Por lo que esta es una de las características más recientes que salió de Figma recientemente. Y tú basas el último conjunto de videos en el curso, debes saber hacer un componente y lo que esto nos está permitiendo hacer aquí voy a demo esta página. Nos está permitiendo en una pantalla seleccionar todas las variaciones. Digamos que quería seleccionar aquí mi sabor diferente y permitiéndonos hacer todas estas variaciones en una. Pantalla aquí, y eso se llama componentes interactivos de componentes, pero también utiliza una característica llamada varianzas de componentes son variantes también. Y entonces, ¿cómo solíamos tener que hacer esto? Uh, un poco se ve así. Tienes que crear prototipos de todas estas diferentes interacciones y casos posibles para que el usuario haga clic en. Y así ahora tenemos que resolver todo eso con sólo una pantalla aquí. Entonces vamos a ver una variante primero, y luego veremos varianza de componentes o componentes interactivos. Entonces si vamos a la biblioteca de componentes aquí, ver aquí tengo un sistema de casillas de verificación. Entonces hagamos un componente muy primero, vamos a copiar ambos de la plata porque los vamos a necesitar. Entonces solo selecciona esos dos. Ve a Comando C. Voy a alejarme un poco y vamos a ir a la parte superior aquí y pegarlos. Por lo que estos ya son componentes porque se puede ver cómo al hacer clic en ellos, son morados. Seleccionemos ambos. Hagamos clic derecho en ellos. Y hagamos instancia de desprendimiento. Por lo tanto, de nuevo, seleccione ambos de estos botón derecho, no desenlazar instancia. Eso lo va a desprender del componente. Ahora puedes ver que son contornos azules versus morado, lo que significa que ya no están relacionados con componentes. Son una especie de puntería. Entonces, empecemos con la primera casilla de verificación aquí. Digamos, cambiemos este golpe por él. Sólo hagámoslo un trazo rosa. Y cambiemos este texto a unos textos más oscuros como este. Entonces de nuevo, acabo de seleccionar el color aquí, lo cambié a rosa. Seleccionado, sí. Y seleccioné un color de nuestra biblioteca. Si no tienes los colores, Solo desconecta. Por lo que desconecto el color aquí. Se puede ver si se pasa el cursor, dice estilo de desvinculación. Y puedo hacer cualquier color que quiera. Aquí puedes hacer negro. Entonces eso es que tal vez solo a negro. De acuerdo, entonces lo que primero queremos hacer es decir que este es un buen componente que queremos usar. O quieres reutilizar esta casilla de verificación eventualmente. Entonces vamos a hacer clic derecho en él. Y sigamos adelante y hagamos de esto un componente. Puede pulsar Crear componente aquí. También puedes hacer eso haciendo clic en este pequeño para diamante, como el icono de diamante de Foursquare en la parte superior. Y hará lo mismo. Se creará un componente. Ahora lo que queremos hacer aquí es si puedes ver a la derecha, tenemos una, al seleccionar este componente, tenemos una característica llamada varianza. Adelante y presione Plus en esa variante. Y va a duplicar la casilla de verificación aquí que tenemos. Y llamemos a éste activo. Entonces tenemos uno que ya es predeterminado, que está prepoblado para la etiqueta que ya estaba etiquetada anteriormente en el archivo. Pero este nuevo, lo cambiamos a activo. Y sigamos adelante y digamos que esto es no. Y ahora lo que queremos hacer es seleccionar unos un triple clic hasta llegar al relleno o al solo el rectángulo. Entonces triple-click, consiguió el rectángulo. Voy a ir al relleno, prensa plus. Y voy a agarrar ese rosa y hacer que se llene. Y luego voy a copiar esta casilla de verificación. Voy a sostener Opción. Y lo voy a arrastrar a este componente aquí, así que ya no necesito este. De acuerdo, Entonces ahora lo que podemos hacer, tenemos estos dos componentes establecidos. Podemos volver a nuestra capa de transición móvil aquí en las páginas. Y podemos arrastrar estos componentes al archivo. Entonces si vamos a Activos, verás aquí todos los componentes locales que estaban en esa capa de página llamada biblioteca de componentes. Y verás las nuevas que hicimos porque las hicimos con un color más oscuro aquí. Entonces ya ves donde dice que sí. Arrastremos eso aquí. Y lo que podrías hacer en este punto cuando estás diseñando es, digamos, voy a hacer esta pantalla. Soy un borrar todos estos aquí. Vamos a agarrar uno nuevo. Hagamos el fondo aquí sólo un poco más claro para que podamos ver el, vamos sólo a ir blanco. Y cambiaremos esto a un color más oscuro. Ahí vas. De acuerdo, Entonces cuando se trabaja con componentes, tenemos la sección predeterminada de este componente. Pero digamos que quiero hacer prototipos de esto más. Y quiero hacer de éste el estado seleccionado. Podría hacer aquí, haga clic en el icono Sí y verá el área de componentes. Entonces tengo el sí, deja caer nuestra casilla de verificación. Ya verás aquí tiene el área de componentes. Asegúrate de estar en la pestaña Diseño, no en la pestaña Prototipo de la pestaña Diseño. Vea dónde dice checkbox default. Y este pequeño desplegable tiene la variante. Por lo que fácilmente puedo decir que realmente quiero cambiar esto al estado activo. Y lo cambiará automáticamente al estado activo. Y puedes agregar tantas varianzas que quieras. Entonces puedes ver aquí cuando haga clic en el No, y voy a volver a hacer clic aquí. Y cargamos esto. Un solo clic lo cambia para saber. Otro. Rápido lo cambia a sí. Entonces eso es más o menos varianza en pocas palabras. Pero figma ha lanzado una característica aún mejor que es componentes interactivos ahora, que antes voy a arrastrar el nivel de inicio hacia estas pantallas. Entonces antes de los componentes interactivos, si queríamos una interacción, digamos por una función en la que eliges tu género y o bien seleccionas masculino o femenino. Digamos que quieres hacer femenino y querías que el usuario tuviera un estado flotante. En realidad tendrías que crear otra pantalla para el estado de desplazamiento. Y digamos que hubo un estado seleccionado. En realidad tendrías que crear otra pantalla aquí para el estado seleccionado. Por lo que ya tengo este prototipo. Entonces antes de los componentes interactivos, esto es lo que tendríamos que hacer. Tenemos tres pantallas para que se vea muy aerodinámico y sin fisuras. Al igual que vuelvo a pasar el rato sobre la hembra, no hay flotador en el móvil, pero digamos que esto era para web y haces clic y hay un estado activo. Bastante así tres estados de este botón todo toma tres pantallas diferentes para conseguir esa interacción. Entonces ahora con componentes interactivos, que construiremos aquí en un segundo, podemos conseguir una pantalla que lo haga todo. Si hago clic fuera de ella se vuelve atrás. Entonces sigamos adelante y construyamos eso. Entonces si pasamos a la sección aquí donde dice normal, Agarremos este botón aquí. Entonces lo voy a agarrar. Voy al Comando G. Simplemente adelante y agruparlo. Entonces sigamos adelante y agarramos esto. Volvamos a nuestras capas aquí en la parte superior. Asegúrate de que puedes ver tus páginas aquí. A veces no lo verás porque este no es el camino pero tira esto hacia abajo, tira de tus capas hacia abajo si es necesario. Pasemos a nuestra biblioteca de componentes. Y puedes ver que ya he construido esto, así que puedes ver cómo funciona, pero sigamos adelante y hagamos esto juntos. Entonces en la misma zona donde construimos nuestras casillas de verificación, coloquemos el comando V si estás en un Mac o Control V si estás en un PC, PC, Vamos a colocar este botón femenino aquí o este botón de selección aquí . Y ahora vamos a conseguir que los diferentes estados entren y empecemos a trabajar con los componentes interactivos. Entonces sigamos adelante y asegurémonos de que estamos agrupados comando G. Vamos a hacer clic derecho en él. Hagámoslo un componente. Entonces vamos a crear un componente. Y sigamos adelante y miremos hacia atrás en nuestra pestaña Diseño. Y asegurémonos de que llamamos a éste. Entonces en el fotograma superior aquí, voy a ir triple-click en mis capas de la izquierda. Llama a este el estado predeterminado. Sólo para que sepa cuando seleccioné eso, ese es el estado por defecto y lo nombré. Sigamos adelante y seleccionemos el componente aquí. Y vamos a añadir la variante. Entonces, ¿qué hay de añadir la primera variante aquí? Y llamemos a éste el estado de hover. Está bien, y luego se puede ver ya he agrupado esta selección aquí, así que vamos a triple-click hasta que lleguemos, asegúrate de que estamos en la pestaña Diseño. Por lo que pasó del prototipo a la pestaña de diseño. Triple-click hasta que acabemos de tener seleccionado el rectángulo. Entonces no queremos tener la hembra, el ícono aquí para hembra, solo el rectángulo y donde dice trazo en la mano derecha, para el panel derecho donde dice diseño, vamos añadir un trazo. Por defecto es de un píxel. Soy fan de mantener tus trazos gruesos. Normalmente nunca hago trazos de un píxel. Ya sea 23, la mayoría de los casos tres o cuatro es más común. Tan sólo para hacerlo muy presente, presentable y una aparente. Entonces uno a veces puede parecer un error, como si fuera demasiado delgado, no parece que sea un derrame cerebral intencional. Entonces seamos intencionales, digamos cuatro. Y sigamos adelante y hagamos de esto el contorno rosado aquí. De acuerdo, Entonces ahora si volvemos atrás y seleccionamos todo el, este componente con todas las variantes en él. Entonces vea donde dice Estado Default. Ya verás que tiene la propiedad un estado de hover predeterminado. Y tiene muy, tiene sección variante propia. En este punto verás aquí las tres pequeñas opciones de menú, los tres pequeños puntos en la varianza. Esto es importante. Porque aquí es donde podemos agregar más varianza. Por lo que agregamos una nueva variante más. Y lo sumará al fondo aquí. Y llamemos a esto el estado seleccionado. Y de nuevo, voy a seleccionar sólo el fondo. Por lo que el triple clic y los tailandeses obtienen ese fondo. Hagamos todo el fondo rosa. Agarremos el ícono aquí. Hagámoslo blanco. Y cambiemos el texto de negro a blanco. De acuerdo, Entonces ahora mismo tenemos tres botones diferentes que podríamos usar. Voy a volver a la capa de transición móvil aquí y entrar en los activos. Y tenemos este botón aquí que hemos creado. Y tiene las diferentes varianzas en hover, estado seleccionado. Pero no nos hemos conocido, prototipos aún por ser interactables, ¿verdad? Simplemente tenemos el conjunto de varianza. Entonces volvamos a nuestra biblioteca de componentes. Y lo que podemos hacer ahora es que podemos establecer características de prototipo dentro de un componente. Suena loco, pero es muy, muy fácil. Y todo lo que acabamos de hacer, vamos a aplicar pero sólo a los botones. Entonces sigamos adelante y asegurémonos de que todos estén agrupados. Por lo que los agrupamos antes. Seleccione el estado predeterminado de la varianza. Entonces ves que estás por defecto y ahora ve a la pestaña Prototipo. Y ahora se puede crear prototipos dentro de los componentes. Así que sigamos adelante y arrastremos esta flecha prototipo por aquí. Y digamos que onclick está bien. En realidad ¿qué hace éste mientras se cierne? Se va al estado de hover. Y no hagamos instantáneamente, Vamos a disolver, digamos aquí 300 milisegundos. Entonces de nuevo, tomé el de arriba, lo arrastré hasta el que tiene el trazo. Y en lugar de decir onclick, lo he hecho mientras flotaba. Y ahora vamos a hacer lo mismo con el que es el estado flotante. Vamos a hacer clic en ese. Pasar al estado seleccionado. Y queremos que este sea onclick y se disuelva va a funcionar muy bien. Y luego también queremos que alguien haga clic fuera de esto, el usuario haga clic fuera del seleccionado y te lleve de vuelta al estado predeterminado. Queremos onclick y queremos disolver. De acuerdo, entonces vamos a borrar este. Vamos a seguir adelante y copiar esta página aquí. En realidad ni siquiera es necesario copiarlo. Vamos, eliminemos este botón aquí. Pasemos a nuestra biblioteca de activos si todos nuestros botones de componentes. Y se puede ver el aquí que dice estado por defecto. Cuando acabamos de hacer. Y ya sabes, es uno que acabamos de hacer porque tiene el valor predeterminado, el estado flotante y el estado seleccionado. Cuando vamos a la pestaña Diseño y miramos las diferentes variantes. Y ahora vamos a presionar Play. Y verás justo en el prototipo solo, el componente, varianza de componentes interactiva en juego. Entonces está el estado por defecto. Si flotas, obtienes esa transición a solo el trazo. Y si haces click en él, obtenemos el estado seleccionado. Y si hace clic fuera de este estado seleccionado, puede ver que vuelve al estado predeterminado. Entonces de nuevo, eso es más o menos tomar el prototipado que hemos hecho aquí dentro de esta variante de componente, la selección. Y aplicando esos prototipos en un solo componente para esas diferentes interacciones. Ha sido una característica que he estado esperando desde siempre. Nuevamente, hacer que llegue a mostrar este tipo de interacciones. Se necesitan tantas pantallas como lo hace conseguir esta pantalla aquí. Esto es lo que parecía desde hace un par de años. Por lo que es realmente genial que el figma haya introducido este tipo de características y es un ahorro de tiempo. Es menos pantallas para que manejemos y es realmente fácil de configurar. Y puedes configurar eso para casi todo. Aquí puedes hacer tus estilos de botones. Se puede ver en éste he creado botones aquí. Y si prototipeas este botón por aquí, Ese es el estado flotante. Por lo que tienes el estado de desplazamiento para este botón. Y así si volvimos a nuestro archivo aquí y entramos a nuestros activos, y arrastramos este botón por aquí, pulsa Play. puede ver que tiene el estado de hover negro más oscuro. Y de nuevo es, es un botón. Entonces lo que podríamos hacer es engañar o es un componente. Entonces, lo que es genial del componente es que puedo usar todos estos botones diferentes aquí. Yo puedo decir que éste es salvo. Éste es el siguiente. Esta es cancelada. Este es impresionante. Y éste es encantador. Y puedo volver a mis capas. Puedo ir a mis componentes. Digamos que ya no quiero rosa. Yo quiero cambiar este color al azul. Y quiero cambiar este flotador para decir, un gris más claro aquí. Y ahora cuando volvamos a nuestra pizarra, verás que todas las versiones de ese botón cambian al azul. Y ahora vamos a mirar el estado de hover. Se puede ver que también ha cambiado, por lo que actualiza todas las diferentes instancias son hijos de ese componente maestro, todo en un solo swoop, en una sola edición. De acuerdo, Ahí lo tienes. Ese es el final de todos los videos bonus. Como siempre, muchas gracias por tomar las clases. Tengo un par de clases nuevas saliendo pronto que me acercaré y avisaré a todos cuando lancen. Y como siempre, diviértete diseñando y te deseamos lo mejor. Adiós.