Diseña una interfaz de usuario interactiva para una aplicación móvil en Figma

1. Introduccion: Piensa en una aplicación móvil favorita. ¿Qué tan fácil es de usar? ¿Qué hace que sea fácil de usar? ¿Qué la convierte en tu app favorita? ¿Cómo se hizo? ¿Alguna vez te has parado a pensar en cómo lo diseñó la compañía detrás de él? Antes de que alguna línea de código se escribiera para esa aplicación móvil, alguien se sentó y diseñó cada parte de ella, cada pantalla, cada botón, cada imagen. Alguien diseñó eso. Y en esta clase, voy a mostrarte exactamente cómo hacer eso, y lo haremos paso a paso. Te mostraré cómo diseñar tu propia aplicación de compras de múltiples proveedores hermosa e interactiva en Figma. Figma es una de las mejores, si no las mejores plataformas de diseño UIUX del mercado actual Esta clase está pensada para ser fácil para los principiantes. Incluso si eres nuevo en el diseño de UI, esta clase está destinada a dar cabida a todos, incluidos los principiantes. Al final de esta clase, tienes una interfaz de usuario de aplicación móvil completamente diseñada que incluye una elegante barra de inicio, una navegación suave en la pestaña inferior, pantallas de autenticación limpias, una hermosa pantalla de inicio, una pantalla de vendedor única, una pantalla de chat y otras partes geniales de una poderosa aplicación cotidiana. Trabajaremos a través del diseño de cada pantalla paso a paso, comenzando con los elementos esenciales de la interfaz como la barra de inicio y la barra de pestañas. Luego construiremos funciones del mundo real, incluida la página o pantalla de vendedores destacados, categorías de productos, una sola pantalla de vendedor, una pantalla de chat en tiempo real y mucho más. También aprenderá a refinar y actualizar sus diseños usando jerarquía visual, espaciado y opciones de color. Una vez hecho el diseño, limpiaremos todo y agregaremos interactividad para darle vida al proyecto Esta clase es perfecta para usuarios principiantes o intermedios de Figma que quieran afinar sus habilidades trabajando en un proyecto del mundo real que puedan agregar a Es práctico, práctico y está repleto de consejos y trucos que puedes comenzar a aplicar a tu flujo de trabajo de inmediato. Entonces, si estás listo para subir de nivel tus habilidades Figma trabajando en una interfaz de usuario de aplicación móvil que se ve y se siente profesional, esta clase está lista para ti La siguiente lección, sigamos adelante y veamos la demo de la app que vas a estar construyendo. Entonces te veré en breve. 2. Demostración del proyecto: Entonces aquí estamos dentro de Figma, y esta es una ventana de presentación para Figma Entonces quiero mostrarte una demo del proyecto que vas a construir en esta clase. Y así cuando alguien carga la aplicación móvil por primera vez, esto es lo que verá en su teléfono. Y ahora, una vez que se esté doneloading, los llevará a la pantalla de autenticación donde podrán registrarse o Ahora bien, esta es la pantalla de registro, y si ya tienen una cuenta, pueden seguir adelante e iniciar sesión en lugar de registrarse. Entonces, si hago clic en Iniciar sesión, ellos simplemente continuarán y proporcionarán su nombre de usuario, correo electrónico y contraseña, y luego iniciarán sesión. En caso de que, por alguna razón, se encuentren en esta pantalla y no tengan cuenta, pueden volver a la pantalla de registro. Ahora, con eso dicho, podemos ir a la supongamos que terminaron de autenticarse y ahora es el momento de entrar en la aplicación móvil Entonces, si hago clic en este logotipo, aquí nos llevan a la pantalla de inicio, y como pueden ver, tenemos una bonita barra de búsqueda. Tenemos los datos de usuario de inicio de sesión. Tenemos algunos iconos bonitos, notificaciones aquí. Tenemos la barra de estado. Vamos a ver cómo crear eso. Tenemos una sección de vendedores destacados. Tenemos una sección de categorías de productos populares. Cada uno de estos es clicable, y tenemos otra sección de categorías de productos Ahora, si quieren ver todos los vendedores destacados y no solo estos tres, pueden hacer clic en Ver todos, y serán llevados a la pantalla de vendedores destacados, y pueden desplazarse hacia arriba para ver el resto de los vendedores. Ahora digamos que nos interesa saber más sobre las patadas de la Policía Queremos visitar la tienda. Simplemente podemos hacer clic en eso. Nos llevan a la tienda y podemos leer más sobre Patadas policiales, los detalles sobre, podemos hacer clic en esto para ver sus productos, o podemos hacer clic en este botón de chat para charlar con ellos. Entonces si digo chat, podemos ir al área de chat donde estuvimos platicando con la tienda de Police Kicks Siempre podemos simplemente ir y volver. Ahora bien, esto debería abrir la aplicación del teléfono en su teléfono si quieren llamar. Así que volviendo, si estamos aquí, simplemente siempre podemos hacer clic en el icono de inicio para volver a la pantalla de inicio y comenzar ahí mismo. Entonces, para cuando terminemos, terminarás con una interfaz de usuario móvil interactiva como esta. Y esto es algo que puedes compartir con tu equipo o clientes potenciales para mostrarles lo que has podido diseñar para ellos. También es una ventaja añadida para ti en caso de que quieras crear una aplicación móvil real. Puedes compartir tu diseño con las personas que desarrollarán la app móvil. Eso significa que si están compartiendo una cotización para construir esta aplicación contigo, no deberían incluir el diseño de UIUX porque lo has hecho tú Pueden cotizar para la codificación y la programación, pero tú mismo has hecho la parte de diseño. Entonces esa es una ventaja añadida. Eres capaz de no incurrir en el costo de pagarle a alguien para que diseñe tu UIX Y entonces creo que esta es una buena introducción al diseño de la interfaz de usuario móvil FIGMA Y así, si estás listo y emocionado de comenzar con esto, estoy muy emocionado de mostrarte cómo hacerlo. Entonces, sin perder más tiempo, sigamos adelante y empecemos. Nos vemos en la siguiente lección. 3. Barra de estado: Ahora aquí estamos dentro de nuestro simulador, y queremos comenzar construyendo nuestra barra de estado. Esto se llama barra de estado. Y rápidamente puedo volver a cambiar aquí a mi editor. Aquí es donde creé la aplicación de referencia de muestra que vamos a referirnos. Pero puedo ir aquí y volver a los archivos. Eso me llevará directo al equipo actual que está sosteniendo mis proyectos para este equipo específico. Pero también puedo venir aquí, y el equipo se llama Kyoko Para que pueda venir aquí y decir crear nuevo. Y ya había creado un nuevo equipo llamado New Skillshare CLASS Entonces voy a hacer clic en Nueva clase de Skillshare. O déjame crear un equipo completamente nuevo. Entonces tienda móvil Equipo, y voy a crear TIM. Y en caso de que sea tu primera vez usando Figma, vamos a ver esto En caso de que sea tu primera vez usando Figma y no entiendas qué es un equipo, qué es un archivo, qué páginas, tal vez quieras echar un vistazo a mi clase anterior de Figma donde lo cubrí en detalle Pero ahora mismo, sólo vamos a saltarnos por ahora porque estamos creando un equipo, y voy a elegir titular, el plan gratuito. Y ahora estamos dentro de la tienda móvil Team. Dentro del equipo de tienda móvil, tenemos un proyecto. No podemos crear más de un proyecto. Pero dentro de un proyecto, podemos crear varios archivos de proyecto. Entonces puedo renombrarle este vamos a darle un nombre diferente. Aplicación móvil. Digamos Mobile App, Enter, y ahora se llama Mobile AppUI. Si hago doble clic en él, no tenemos ningún archivo. Entonces voy a crear un nuevo archivo de diseño, así que solo voy a decir diseño. Y ahora aquí estamos dentro de nuestro editor Figma. Tenemos un archivo de diseño que aún no tiene nombre. Podemos darle un nombre de interfaz de usuario móvil, y ahí vamos. Entonces voy a crear un marco. Al hacer clic en eso, tendremos diferentes plantillas que podremos empezar a usar. Sólo voy a usar el iPhone 16 Pro max. Ahí vamos. Y quiero darle un color de fondo. Entonces mientras aún esté seleccionado, voy a seleccionar esto, y quiero darle un Color oscuro tal vez hasta ese punto. Queremos darle un tema oscuro, así como así. Lo siguiente, si nos fijamos en esto, tenemos el tiempo. Tenemos algunos íconos aquí. Entonces voy a seleccionar la herramienta de texto y tipos 12 del mediodía. Voy a poner eso ahí. Y ahora te darás cuenta si me cambio aquí, tenemos varios íconos. Ahora, ya había descargado varias imágenes que vamos a utilizar. Permítanme simplemente ampliar esto. Todos estos son iconos que descargué de icono plano. Y voy a compartir esta carpeta justo debajo de este reproductor de video. Puedes descargar todos estos iconos para que puedas seguirlos. Entonces ahora mismo estamos trabajando en la Sara Spar, así tenemos los íconos de Spar de inicio Voy a abrir eso. Bien. Y sólo voy a arrastrarlos y soltarlos ahí, así como así, tan simple como eso. Entonces ahora, déjame poner eso ahí. viene la batería, y ahí viene el Wi Fi. Para arrastrar por ahí, estoy manteniendo pulsada la rueda del ratón. Para acercar y alejar, estoy manteniendo pulsada Control y desplazando la rueda del ratón Así que quiero seleccionar este turno de mantener presionado para seleccionar múltiples. Mientras mantienes pulsada la tecla Shift, voy a reducir el tamaño hasta ese punto. Y vamos a arrastrar esto hasta ese punto. Voy a poner esta VPN ahí mismo porque estoy asumiendo que el usuario tiene una VPN activa en su teléfono en este momento. Creo que estos dos son más grandes de lo que queremos que sean, así que solo voy a redimensionarlos así Seleccione todos ellos. Control G para agruparlos. Ahora, cuando los agrupamos, se les dio el nombre grupo uno. Voy a llamarlos start aspaEnter ahora cada uno de ellos tiene el nombre que tenía cuando lo importamos excepto el tiempo, así que podemos simplemente llamar a esto la hora o simplemente dejar eso así Entonces ahora tenemos la barra de estado. Estamos listos para pasar a la siguiente parte, que es la barra de navegación inferior. Entonces, en la siguiente lección, veamos cómo crear esta barra de pestañas. Se llama barra de pestañas o barra de pestañas inferior. 4. Barra de pestañas: Ahora es el momento de crear la barra de pestañas o la barra de navegación inferior. Así que volviendo a nuestro archivo. Ahora, antes de seguir adelante, recuerden, teníamos esto. Déjame alejar el zoom. Esta es la pantalla de bienvenida. Entonces esto es en lo que estamos trabajando actualmente, y vamos a trabajar en el resto. Entonces volviendo a nuestra obra de arte, voy a llamar a esto la pantalla de bienvenida. Y dentro de la pantalla de bienvenida, tenemos la barra de inicio, que creamos aquí arriba. Puedo ocultarlo y mostrarlo. Así que voy a mantener pulsada Control y acercar con la rueda del ratón y dejarme crear esta forma. Déjame dibujar en cualquier lugar ahí. Tamañarlo en consecuencia. Déjame mantener el control y alejar con una rueda del ratón para ver el tamaño relativo. Ahí vamos. Y ahora, seleccionando esto, voy a darle un color relativamente más brillante en comparación con el fondo. Déjame empujar eso. Sí, en algún lugar ahí. Yo solo lo estoy haciendo freestyle, pero tienes que usar los colores de tu marca Así que tenlo en mente. Ahora tenemos este rectángulo, y como pueden ver, se llama el rectángulo. Puedo llamarlo la pestaña, pero fondo. Y ahora voy a volver a nuestra carpeta. Y en la carpeta aquí, la carpeta Activos, tenemos iconos de barra de tabulación. Voy a seleccionarlos a todos y dejarlos caer aquí. Cuando los suelte, no están dentro de nuestra pantalla de bienvenida, así que puedo arrastrarlos y soltarlos dentro de la pantalla de bienvenida. También puedo hacer lo mismo para el fondo de la pestaña. Esto. Ahora, tenemos la barra de entrantes. Déjame solo esconder eso. Ahora bien, estos no son visibles porque después de ponerlos dentro del marco de la pantalla de bienvenida, y están fuera de este marco, no los podemos ver. Entonces, si selecciono todos ellos seleccionando esto, luego mantengo presionado Shift y esto, puedo arrastrar y hacerlos visibles dentro de la pantalla de inicio el marco de la pantalla de bienvenida. Ahora también quiero reducirlos en tamaño, manteniendo presionada turno para asegurarnos redimensionamos proporcionalmente. De hecho, voy a seleccionar todos estos entonces Control G para agruparlos y llamarlos la barra de pestañas. Entonces ahora, dentro de la barra de pestañas, tenemos los iconos. Voy a seleccionar eso hasta los iconos de Control G. Tab. Dentro de la barra de pestañas, tenemos el fondo de la barra de pestañas. Déjeme simplemente ponerlo a continuación. Fondo de la barra de tabulación y los iconos de la barra de pestañas como grupo. Si explico el grupo, los tenemos a todos. Ahora sólo voy a seleccionar el icono de inicio, luego ponerlo en el centro así. Selecciona la cartera, ponla aquí mismo. Icono de configuración. El menú de hamburguesas. Y por último, el ícono de messenger o chat. Como puedes ver, Figma tiene algunos buenos resaltadores para mostrarte cuando te mueves en línea recta Si selecciono el icono de inicio y luego arrastre, como pueden ver, me está ayudando a ver que me estoy moviendo en línea recta. Ahora, si intentas seleccionar esto, vas a seleccionar todo el grupo. Si desea seleccionar alguno de estos elementos individuales, puede mantener presionada la tecla Control y luego seleccionar. Entonces puedes arrastrarlo. Mantenga presionado Control, seleccione, arrastre eso, mantenga presionado Control. Mantenga presionado el control. Puedo moverlo con mis teclas de flecha. Y creo que estamos muy bien posicionados. Ahora, permítanme seleccionar el grupo de iconos de la barra de pestañas y empujarlo hacia arriba con mi tecla hacia arriba en el teclado. Lo quiero en algún lugar arriba. Mantenga presionado el control y alejar el zoom. Y ahora tenemos una bonita barra de tabulación. Déjame desocultar la barra de estrellas, y ahí vamos. Entonces para terminar esto, creo que podemos simplemente seguir adelante y agregar el logo y este ícono de carga. Así que volviendo a nuestra carpeta, carpeta Activos, otros íconos, creo que ahí fue donde estábamos. No creo que tenga este ícono de carga, así que solo lo puedo descargar desde aquí, pero voy a incluirlo para ti. Lo encontrarás en la carpeta. Volviendo aquí, voy a seleccionar esa exportación como PNG. Todo bien. Carga de exportación. Ahora aquí lo vamos a buscar. Ahí vamos. Corta eso. Lo pondré en los otros íconos y lo pegaré ahí. Ahora volviendo aquí, puedo arrastrar y soltar eso ahí y ponerlo en la pantalla de bienvenida, como pueden ver, cargando. Al volver aquí, puedo tomar el logo y dejarlo caer aquí también. Y ahí vamos. Terminamos con la pantalla de bienvenida. Creo que aquí estamos avanzando. En la siguiente lección, vamos a crear la pantalla de registro. La pantalla de registro. Te veré en breve. 5. Pantalla de registro: A, bienvenido de nuevo. Entonces ahora es el momento de crear la pantalla de registro. Vamos a echar un vistazo rápido a nuestra pantalla de registro aquí. Eso es lo que tenemos. Así que sigamos adelante y volvamos a nuestro espacio de equipo. Ahora, con esto, permítanme simplemente colapsar todo lo que tenemos dentro de este grupo. Esa es la pantalla de bienvenida. Ahora, para hacer una nueva pantalla, puedo empezar de nuevo desde cero aquí y tengo que crear todos los colores y todo, o puedo seleccionar esto. O bien, permítanme seleccionar así el menú de capas y luego mantener presionada tecla Alt y arrastrar manteniendo presionada la tecla Mayús para moverme en línea recta. Así que fuera y luego turno. Así como así. Entonces ahora tenemos dos pantallas. Este es el segundo. Déjame solo arrastrarlo y ponerlo justo debajo. Quiero que se muevan hacia abajo mientras nosotros nos movemos hacia la izquierda, hacia Entonces llamaré a esto la pantalla de registro. Si lo expando, tiene todo lo que tiene este otro, pero quiero deshacerme de la barra de pestañas porque la pantalla de registro no tiene eso. Voy a dejar el logo pero borrar la carga. Empuja esto hacia arriba. Control y Musewel para desplazarse acercar. Y ahora vamos a crear nuestro formulario de registro, crear una cuenta para empezar, copiar eso. Vas a tener que teclear. Entonces seleccionaré texto, pegaré eso ahí dentro. Lo recogeré y lo dejaré ahí en el centro. Voy a seleccionar esto y hacerlo más pequeño manteniendo presionada la tecla Shift. Entonces lo arrastraré al centro así. A continuación, por supuesto, usemos una herramienta de rectángulo para crear los campos de formulario. Déjame elaborar hasta ese punto. Ahora puedo escoger esto y arrastrarlo para asegurarme de que está en el centro. Después selecciónela, acercar el zoom. Podemos editar el radio de la esquina, ir aquí a la apariencia, luego el radio de la esquina. Vamos a darle diez. Sí, diez es bueno. Voy a escoger el tipo de herramienta de texto dentro de aquí. Usa un nombre. Vamos a empujarlo, posicionarlo correctamente. Después voy a seleccionar un color claro para el texto mientras aún esté seleccionado. Usa un nombre, así como así. Ahora selecciona esto y esto y agruparlos. Recuerda, aquí estamos trabajando desde adentro porque dibujamos dentro de esta pantalla, el texto y el campo se colocaron automáticamente dentro de la pantalla. Y ahora los hemos agrupado. Voy a llamar a eso Campo Cálido. Déjame llamarlo nombre de usuario. Todo bien. Entonces voy a seleccionar el grupo, mantener pulsada la tecla Alt y arrastrar, manteniendo pulsada la tecla shift para moverme en línea recta. Y ahora vamos a darle ese espaciado. Déjala ahí. Después Control D para repetir el mismo movimiento que hiciste el último. Con Control D, estás rehaciendo lo que acabas de hacer. Así que ahora envía un correo electrónico a la contraseña del nombre de la compañía, mantén presionada Control para escribir esto directamente. Control de correo electrónico. Nombre de la empresa. Control, contraseña, control de retención. Vuelva a escribir la contraseña. Ahí vamos. A mí me gusta. Volviendo aquí, tenemos el botón de registro y ya tenemos una cuenta subiendo, vamos a seleccionar esta salida y cambiar, luego espaciarla un poco más que el resto porque este es el botón. Y justo, tendremos que renombrar todos estos, pero no hay problema. Voy a hacer doble clic en esto y decir registrarse. Y lo voy a poner en el centro así. De hecho, voy a alinear así el texto al centro. Mantenga pulsado el control para seleccionar el fondo directamente, y vamos a darle un color. Voy a seleccionar la herramienta cuentagotas y muestrear en algún lugar de aquí Digamos eso. Mantenga presionado el control para seleccionarlo directamente. Voy a seleccionar esto y darle ese color de fondo. Creo que este es el color de fondo, así como así. También voy a decir Control B para que sea audaz. Ahora, seleccionaré este texto, sostendré y desplazaré para moverme en línea recta. Y aquí voy a copiar esto. Por supuesto, recuerda que te dije que vas a tener que escribir esta pasta que ahí dentro. Ahora, de hecho, quiero hacer de este un texto separado. Entonces arrastraré con out para duplicarlo, mantén presionado shift para moverme en línea recta y luego pegaré eso ahí porque quiero que esté separado y verás por qué más adelante. Entonces sosteniendo esto y esto, los agruparé y los llamaré un conteo de tener. Bien, así que seleccionando este grupo, cambiémosle el nombre a correo electrónico. Un campo, seleccione esta empresa. Un campo, Entrar, seleccionar esta contraseña uno, Nosotros campo, y finalmente Asignar dos campos de formulario Ahora, también los seleccionaré a todos. Después Control G para agruparlos, y voy a llamar a este grupo campos Fm. Voy a colapsar el grupo, colapsar la cuenta Han. Entonces este es el botón de registro. Entrar. Tener una cuenta, crear una cuenta, logotipo de Sharp. Ahora siempre podemos simplemente reorganizarlos de acuerdo a cómo están dispuestos en la pantalla Crear una cuenta viene debajo del logo, luego tenemos el botón de registro, luego los campos del formulario. el zoom, manteniendo pulsado Control. Ahí vamos. Así que ahora puedo seleccionarlos todos y empujarlos hacia arriba con la tecla de flecha hacia arriba en el teclado. Y creo que ahí mismo, están muy bien centralizados. Entonces eso es todo para la pantalla de registro. En la siguiente lección, de hecho, vamos a seguir adelante y hacer la pantalla de firma porque es una réplica de esto. Entonces voy a seleccionar esto. Al mantener pulsado el control, voy a seleccionar la pantalla, y luego no puedo y arrastrar, luego mantener presionada la tecla Mayús para moverme en línea recta. Y cuando aparezca esa segunda medida que muestra que el espaciado es igual, voy a soltarlo, para que podamos tener incluso espaciado entre todos ellos. Y claro, ahora este es el control de mantener pulsado para seleccionar el fotograma. Esta es la pantalla de inicio de sesión, Enter. Si colapso eso y expando. De hecho, la voy a arrastrar a continuación. Entonces es el tercero. Voy a ampliar eso. Ahora, veamos, solo necesitamos obtener el nombre de usuario y contraseña. Quitar doble clic, eliminar eso. Mantenido el turno para moverte en pequeños incrementos y en línea recta Haga doble clic en eliminar eso. Para que podamos dejar estos tres, y seleccionaré estos dos manteniendo presionado el turno. Mantenga pulsada la tecla shift para seleccionar estas, empujarlas hacia arriba, y ahí vamos. Entonces ahora, básicamente, así es como crear las pantallas de registro y firma. En la siguiente lección, veamos cómo crear la página de inicio, esta página de inicio. Te veré en breve. 6. Pantalla de inicio: Veamos cómo crear la página de inicio. Volviendo a nuestro espacio de trabajo. Antes de seguir adelante, siento que debo seleccionar todos estos y empujarlos un poco hacia abajo después de ese spot. Sólo lo estoy viendo. El objetivo aquí es entender cómo usar las herramientas. Tendrás que tomarte un tiempo para entender los principios de diseño si quieres crear una aplicación real. Entonces ahora, voy a mantener presionada Control para hacer doble clic en esto, por supuesto, para cambiar esto para iniciar sesión en tu cuenta. Déjame ponerlo en el alinearlo al centro, y luego déjame empujarlo así así. También deberían cambiar manteniendo presionado el control. Ya tengo una cuenta, aún no tengo una cuenta. No tener un registro de cuenta. Voy a arrastrar eso más cerca así así. Ahora, sigamos adelante y creamos la pantalla de inicio. Así que voy a colapsar eso. Mantenga presionado Control, luego mantenga presionado y arrastre y solo alinéelo debajo de ahí. Y puedes hacer doble clic en esto o doble clic en esto para cambiarle el nombre a Pantalla de inicio Y voy a arrastrar y ponerlo debajo de la pantalla de firma. Expandirlo así. De hecho, es muy gracioso, pero no deberíamos haber puesto esto aquí mismo en la pantalla de bienvenida, por cierto, no sé por qué lo puse ahí. Creo que es porque inicialmente quería mostrarte cómo hacer esa barra de pestañas. Pero luego terminamos poniéndolo ahí. Se supone que debemos eliminarlo de ahí, entonces Control X. Y voy a seleccionar esto manteniendo presionada Control. Entonces ahora pegarlo ahí mismo. Se va a pegar en su lugar, exactamente donde estaba en la otra pantalla. Ahora quiero deshacerme de todos estos porque no los necesitamos. Entonces así es como debería verse la pantalla de bienvenida en realidad. Entonces entrando aquí, vamos echar un vistazo rápido a lo que tenemos aquí. Entonces tenemos esa zona de navegación. Así que sigamos adelante y creamos la barra de búsqueda. Entonces solo voy a seleccionar esa herramienta de rectángulo y dibujar nuestra barra de búsqueda, tal vez ese tamaño. Vamos a darle un radio de diez esquinas, así como así. Tenemos estos tres iconos, así que vamos a importarlos. Va a cambiar a nuestra carpeta. Entonces, de hecho, permítanme escoger todos estos en los otros íconos dentro de la carpeta de otros íconos. Déjame simplemente arrastrarlos a nuestro espacio de trabajo aquí. Entonces los voy a poner aquí a un lado. Debido a que no los colocamos dentro de una pantalla, no están en ninguna pantalla aquí mismo en las capas. Ahora sólo podemos seguir adelante y organizarlos relativamente. Déjame poner eso ahí. Tenemos al usuario. Tenemos las notificaciones. Por ahora, usemos esos, mantén presionada la tecla shift para redimensionarlos en pequeños incrementos Ponlos ahí. Mantenga presionado el control para hacer zoom con la rueda del mouse. Va a mantener presionado el turno para continuar redimensionándolos. Tire de esto hasta el final. Bien, déjame poner esto a un lado porque no lo necesitamos por ahora. Y recuerden, la razón por la que podemos verlo aquí afuera es porque aún no forma parte de este marco. Recuerda, solo los dejamos aquí. Así que ahora acercar el zoom. Voy a ampliar eso. Y aquí, solo podemos controlar y seleccionar esta copia, acercar. Voy a pegar eso ahí dentro. Buscar productos. seleccionaré y los agruparé, Control G, y renombrarlos a la barra de búsqueda. esto lo puedo llamar. Seleccionaré estos tres y tal vez los agruparé Control G, y los llamaré nervio del contexto porque navegas con él según el contexto. Haga doble clic en esto y empújelo tal vez hacia la izquierda. Creo que ahora está bien equilibrado. También puedo tomar este texto. Mantenga pulsado y arrastre y póngalo aquí mismo porque como puede ver aquí, tenemos el nombre de la persona que está logueado. Así que mantén presionado Control y haz doble clic en eso. Bienvenido Kim, selecciónalo y elimínalo. Oh, ahora, reemplacemos eso con esto porque Kim es un usuario. Así como así. A continuación, vamos a crear los vendedores destacados. Entonces voy a seleccionar esa herramienta de rectángulo y dibujar en algún lugar ahí dentro. Le daremos un radio fronterizo de 20, así como así. Ahora podemos dibujar otro o podemos seleccionar esto y arrastrar le voy a dar a esto un color diferente por ahora, y luego vamos a redimensionarlo tal vez hasta ese punto Podemos convertirlo en un cuadrado dándole quizá 121 por 121. Y ahora es un cuadrado. Y para el radio fronterizo, hagámoslo diez. Pongámoslo en algún lugar ahí. Todas estas patadas. Y de hecho, se supone que esto es una imagen, pero no hay problema. Manteniendo presionada la hoja, podemos redimensionarla. Escojamos el texto. Policías patadas al centro alinean el texto, y pongámoslo justo debajo Y ahora voy a cambiar a nuestra carpeta de activos aquí y voy a entrar en las miniaturas Digamos patadas. Voy a dejar caer eso ahí. Ahí vamos. Y ahora manteniendo pulsada Shift, voy a redimensionarlo. Yo había prefabricado las imágenes para que fueran al cuadrado, así que son 512 por 512 píxeles Puedo ponerlo ahí mismo, luego mantener presionado turno para redimensionarlo proporcionalmente, y luego podemos darle un radio de borde de 20 Antes de hacer eso, permítanme poner eso a un lado y eliminar esto. Eso fue sólo una guía. Ahora podemos tomar esto y darle un radio fronterizo de 20. No, diez. Y ahí vamos, la policía patea. Podemos empujar esto hacia arriba así. Ahora, manteniendo presionado el turno, puedo seleccionar esos dos, mantener presionados y cambiar para moverme en línea recta hasta tal vez ese lugar, y luego Control D para repetirlo. Después manteniendo presionado el turno, puedo seleccionarlos a todos. Mantenga pulsada la tecla Mayús para cambiar el tamaño proporcionalmente. Y ahora tenemos tres objetos que encajan perfectamente. Ahora voy a ampliar eso voy a asegurarme de que esto esté correctamente alineado a la imagen. Seleccione eso, redimensiónela en consecuencia. Y ahora vamos a dar esos dos nombres diferentes, motores Eagle. Pega eso. Y ta ropa de caballero. Copia eso. Pegar. Creo que le había dado esta talla 14. Oh, esa es la talla diez. Todo bien. Entonces seleccionando esto, le voy a dar talla diez. Selecciona los nombres, empújalos hacia abajo. Todo bien. Entonces ahora quiero darle el mismo color que esta barra de pestañas. Así que manteniendo el control para alejar el zoom. Mientras se selecciona esto, seleccionaré el color, luego el color pico dos. Entonces voy a seleccionar eso. Entonces déjame darle a esto el color blanco. Así como así. Entonces puedo hacer doble clic en esto y subir desde computadora. Vamos a Activos, miniaturas. Se supone que son los Eagle Motors. Después haga doble clic en esta subida desde la computadora. Estos son los zapatos, los adolescentes usan. Podemos hacer doble clic en el nombre Control B para ponerlo en negrita. También podemos darle un color diferente. Este color lo seleccionamos para el logo. Volviendo aquí, también podemos crear los vendedores destacados y el botón Ver. Entonces ahora quiero seleccionar todo esto y llamarlo Control G. Vendedores destacados, Enter. Y lo voy a empujar hacia abajo con la tecla de flecha. Después seleccionaré esto, mantén presionada la tecla Alt. Y voy a decir vendedores destacados. Yo creo, déjame arrastrar este botón aquí. Mantenga presionado el control para seleccionar el fondo en sí. Y vamos a darle un radio de borde de 50 para que sea redondeado. Ver. Hacerlo más pequeño. Puedo colocarlo ahí mismo. Mantenga presionada la tecla Shift para reducir el tamaño. Mantenga presionado el control para seleccionar el texto directamente y reducir el tamaño a tal vez nueve. Control para seleccionar el fondo en sí. Mantenga presionada la tecla Mayús para reducir el tamaño, seleccione el texto. Creo que ahora estamos bien. Vamos a empujarlo hacia adentro. Empujemos el texto hacia adentro. Creo que este es un buen lugar para terminar con esto. No queremos que esta lección sea demasiado larga. En la siguiente lección, veamos cómo crear la sección de categorías populares y tal vez esta otra sección. Entonces te veré en breve. 7. Perfeccionamiento de las tarjetas de vendedores destacados: Solo date cuenta de que hay algo que olvidamos en la lección anterior. Si volvemos a nuestro diseño de referencia aquí, como puedes ver, tenemos una miniatura que está dentro de una tarjeta Esto se llama tarjeta, la parte blanca, y esa tarjeta está sosteniendo la miniatura y el nombre Pero aquí en nuestra implementación aquí, no teníamos tarjeta para cada tienda. Vamos a crear una tarjeta. Lo que queremos hacer es que pueda mantener pulsado Control para seleccionar el fondo, luego para duplicarlo. Entonces déjame darle un color de fondo blanco, así como así. Cierra eso. Para el radio fronterizo, vamos a darle diez. Y ahora permítanme simplemente arrastrar y ponerlo justo donde la imagen donde se encuentra con las esquinas de la imagen. Y quiero arrastrar esto y también quiero darle el mismo tamaño que la imagen en definitiva. Entonces ahora si lo expando, tenemos una tarjeta. Ahora puedo seleccionar el texto, el color del texto, elegir la gota para los ojos o dos. Y luego ahí vamos. Controle para seleccionar esto directamente, luego redimensionarlo solo para asegurarse de que tenemos el mismo espaciado que aquí arriba Sólo podemos seleccionar esto y esto y esto y posicionarlo así. La imagen debe ser mucho más pequeña. Entonces déjame seleccionar la imagen directamente. Mantenga pulsada la tecla Mayús y hacia afuera para cambiar su tamaño desde todas las esquinas, desplazar y alejarse mientras selecciona y arrastra Y quiero darle un radio fronterizo de cinco. Así como así. Ahora podemos seleccionar la imagen aquí y aquí, seleccionar todas estas y eliminarlas. Mantenga pulsado el control para seleccionar la imagen directamente. Mantenga pulsada la tecla Mayús para seleccionarla y ahora las tiene todas seleccionadas. Mantenga pulsado y turno. Vamos a moverlo a ese lugar tal vez. Entonces Control D. Ahora, voy a mantener pulsado. De hecho, antes de hacer eso, si bien tenemos estos tres seleccionados, solo vamos a agruparlos y llamémoslos tarjeta de vendedor destacado. Así que ahora tenemos vendedores destacados, y dentro de vendedores destacados, tenemos una tarjeta. Este rectángulo puede ser el fondo del vendedor destacado. Ese es el trasfondo. Entonces tenemos la tarjeta. Podemos simplemente Control D para duplicarlo, y luego arrastrar Recordar, hemos controlado escritura para duplicarlos. Y ahora, como puedes ver, ambos están bien espaciados, espaciados uniformemente. Sin seleccionados, puedo mantener pulsada la tecla shift para seleccionar estos otros para poder colocarlos en el centro así cuando veas esos reflejos rojos. Ahora, manteniendo pulsado el control, puedo seleccionar este fondo y redimensionarlo porque en la parte superior, se ve un poco apagado en la parte inferior Creo que ahora están bien posicionados. Control Shift seleccionar múltiples. Eso estaba ahí. Controla, haz doble clic ahí, copia eso, controla, controla, selecciona la imagen directamente. Haga doble clic en él. Haga clic afuera, Control para seleccionarlo directamente. Haga doble clic en eso, suba desde la computadora. Entonces creo que aquí mismo tuvimos estas patadas. Cierra eso. Creo que ahora hemos hecho la mejora que queríamos hacer. Tenemos una tarjeta que podemos reutilizar por todas partes si queremos. Entonces ahora en la siguiente lección, veamos cómo crear la sección de categoría de vendedores populares, esta sección. Te veré en breve. 8. Categorías de productos populares: Ahora es el momento de crear la sección de categorías de productos populares. Volvamos a nuestra pantalla de inicio. Eso es lo que tenemos. Por supuesto, como ya habrás adivinado, podemos simplemente elegir estos dos, mantener presionados y luego arrastrar mientras mantenemos presionada la tecla Mayús para movernos en línea recta Ahí vamos. Solo quiero hacer doble clic en esto y copiar. Tendrás que teclear eso. Control, doble clic pegar. Entonces ahora, sigamos adelante y creamos el arte de la ropa. Así que sólo voy a elegir la herramienta rectángulo. Y saca solo una pequeña carta así. Y de hecho, déjame si, es un cuadrado 89 por 89. Podemos ir con eso por ahora. Vamos a darle un radio de 20. Debería haber descargado íconos para estos diferentes. ¿Los descargué? Creo que lo hice. Vamos a entrar aquí y ver las categorías de productos. Sí, ya los descargué. Así que la ropa. Ve No, estamos en el lugar equivocado. Así que déjame dejar caer la ropa ahí. Mantenido el turno para cambiar su tamaño. Voy a ponerlo ahí mismo, y debería haberlos hecho negros. Pero no hay problema. Te voy a enseñar cómo hacer eso en una lección futura. Entonces déjame poner eso ahí mismo. Mantenga pulsado y turno. Esto es ropa. Si bien todavía está seleccionado, me alinearé al centro, y luego simplemente lo pondré en el centro de esa tarjeta así. Con ese seleccionado, de hecho, voy, en primer lugar, a seleccionar a esos dos, agruparlos. Y cambiarles el nombre para et me acaba de llamarlos categoría de producto detesto Y quiero que estemos organizados, así que solo me tomaré un momento aquí para colapsar todo lo que aún no estamos usando. Como estamos trabajando en la pantalla de inicio, esto es automáticamente en la pantalla de inicio. Entonces ahora si arrastro esto, puedo espaciarlo así. A lo mejor digamos, ¿cuántos tenemos aquí? Tenemos cuatro. Control D una vez más. De hecho, antes de hacer eso, ahora, esta es la categoría de productos de ropa. Quiero incluir también no, esto no es un grupo. Entonces déjame solo Control Shift G para desagrupar eso. Esto es solo texto, pero como lo copiamos de aquí, duplicamos esto y lo duplicamos de este y de un grupo anterior. Creo que lo duplicamos de este grupo. Entonces mientras se selecciona esto, solo puedo decir Control Shift G, y ahora ya no es un grupo, es solo texto de categoría de producto popular. Entonces seleccionaré esta ropa y este grupo aquí mismo y los agruparé y los llamaré cosa producto. Tarjeta. Déjame llamarlo tarjeta. Tarjeta de producto de ropa. Y ahora, si lo selecciono, lo estoy seleccionando todo. Puedo arrastrar mientras mantengo pulsado y turno. Después Control D para repetir lo que acabo de hacer dos veces. Y luego seleccionándolos todos, puedo mantener presionada la opción Mayús para cambiar su tamaño. Quiero que sean Déjame ponerlos en el centro. Así como así. Mantenga pulsado el control para seleccionar el nombre. Podemos darle talla diez, mantener pulsado el control aquí, talla diez, mantener presionada Control y Shift para seleccionar múltiples. Entonces Electrónica, zapatos de decoración para el hogar. Mantenga el control, selecciónelo directamente. Electrónica. Control de la Decoración del Hogar. Control, zapatos de doble clic. Ahora seleccionaré los tres, cuatro de ellos, los duplicaré con out y shift. Y creo que ese es un buen lugar. Solo necesitamos dos filas, bolsas para utensilios de cocina fitness. Entonces ahora, por supuesto, manteniendo pulsada Control, puedes seleccionar esto. Después haga doble clic en él para reemplazarlo Electrónica. Voy a la categoría de productos Activos, Electrónica. Haga clic en Afuera. Haga clic de control y, a continuación, haga doble clic. Como dije, te voy a mostrar de dónde vas a conseguir estas imágenes. No te preocupes. De hecho, hagámoslo ahora mismo. Yo sólo voy a icono plano. Icono plano. ¿Qué es esto? Tres iconos. Bien, vamos a eliminar ese texto libre. Y digamos ropa. Entonces este es el que seleccioné, creo. Si bien esto está seleccionado, puedes optar por descargar esto o esto, pero yo prefiero esto, y luego puedes editar icono y darle el color que quieras. Una vez cargado esto, puedes seleccionar esta rueda de colores y elegir hacerla de cualquier color. Pero ahora elegí hacerlo blanco, pero se supone que debo hacerlo. Déjame darle este color de fondo. Entonces seleccionando esto, quiero darle este color. Entonces haz doble clic en esa copia porque ese es el color de fondo. Quiero que tenga el mismo color que el color de fondo. Así que pega eso ahí dentro, Enter. Y ahora lo voy a descargar lo quiero al 64. Ahora, hagámoslo 256. Gratis DoOwnLoadFashion. Así que volviendo aquí, puedo entrar aquí y simplemente arrastrar y soltar esto aquí. Y ahora manteniendo presionado el turno, puedo cambiar el tamaño de eso y luego Control haga clic en esto para eliminarlo. Haga clic en esto y colóquelo ahí. En turno para redimensionarlo desde todos los lados. Esto no está dentro de esa tarjeta. ¿Dónde está esa tarjeta? Mientras se selecciona esto, voy a seleccionar el grupo original, luego Control G, solo para asegurarme de que los tengo en el mismo grupo. Entonces llamaré a esto la tarjeta de ropa. Tarjeta de categoría de ropa. Ahora, voy a seleccionar estos otros y eliminarlos. Seleccione ese turno. Entonces forma D. Voy a repetir lo mismo para la electrónica. Ahora que ya hemos creado estos tres, voy a seleccionar estos así, luego arrastrarlos y ponerlos ahí mismo. Y ahora si Control hago clic en esto y hago doble clic en él, puedo subir desde computadora e ir a Descargas, y aquí está el que acabamos de descargar, y ahora está cargado ahí. Entonces voy a adelantar esta parte simplemente reemplazando lo que tenemos en estos duplicados. Decoración. Vamos a mojar esa edición Controla, elige el color de fondo aquí, copia. Haga doble clic en Pegar. Descarga, 256, descarga gratuita. Volviendo aquí. Yo solo voy a controlar, seleccionarlo, hacer doble clic en él, subir desde computadora. Auto. Entonces aquí estamos. Acabo de terminar de reemplazarlo todo. Déjame seleccionar estos y empujarlos hacia abajo, así como así. Al alejar el zoom, mantener pulsado Control. Nuestra aplicación está llegando muy bien. Entonces una cosa que quiero hacer es seleccionar este y este turno solo para crear la sección final aquí mismo porque podemos combinar esos dos, empujar estos dos hacia arriba. Y la sección final aquí son otras categorías de productos. Entonces haré doble clic en eso y lo pegaré ahí. Y ahora notarás que estos son solo botones que se pueden desplazar en esta dirección que se pueden arrastrar y Así que sólo vamos a seleccionar esto y ponerlo aquí mismo. Manteniendo el turno, voy a hacer esto más grande. Y debido a que este es un grupo, voy a seleccionar esto directamente. Sí, podemos dejar ese punto de vista. De hecho, déjenme quitar eso. Seleccione esto, control seleccione seleccionar el texto directamente. ¿Qué es este accesorio? Control para seleccionar el fondo directamente. Entonces hagamos que tal vez sea un gris claro. Sostenga hacia fuera y cambie los juguetes, vehículos. Mantenga pulsado el control para seleccionar el texto directamente. Juguetes. Mantenga pulsado el control para seleccionarlo. Control para seleccionar el texto directamente. Vehículos de control. Creo que ese es un buen lugar para terminar que pueda acercarlos más, sostenerlos así así. Puedes empujar esto hacia abajo. Mantenga pulsada la palanca de cambios para seleccionar todos estos y empujarlos hacia abajo. Entonces creo que estamos llegando a alguna parte. La app ya está empezando a tomar forma y me está gustando mucho. Ahora, también podemos seleccionar estos y manteniendo pulsada la tecla turno, podemos redimensionarlos proporcionalmente para que puedan estar en línea con ese botón de ahí mismo Empujarlos hacia la izquierda, por cierto. Y creo que ahora tenemos una bonita página de inicio. Recuerda, el objetivo aquí no es hacer la interfaz de usuario perfecta de la aplicación. El objetivo es mostrarte un flujo de trabajo que puedes usar si es tu primera vez usando Figma y estás interesado en aprender el diseño de UI UX Solo quiero mostrarte un buen flujo de trabajo. Pero cuando estás trabajando en un proyecto real, tienes que recordar los principios de diseño. Entonces ese es un objetivo aquí. Entonces, en la siguiente lección, veamos cómo crear esta sección antes de pasar a estas otras dos, que son relativamente fáciles. Entonces te veré en breve. 9. Pantalla de vendedores destacados: Ahora es el momento de crear la pantalla de vendedores destacados. Así que permítanme volver a nuestra referencia. Entonces estos son los vendedores destacados. Entonces, cuando alguien hace clic en los vendedores destacados, los llevan a esta pantalla aquí mismo donde pueden desplazarse y ver todos los vendedores destacados. Entonces, ¿cómo creamos esto? Volviendo a nuestra obra de arte, zoom, voy a Control, selecciono este fotograma, y ahora y arrastra manteniendo pulsada la tecla Mayús para moverme en línea recta, y ahí vamos Ahora bien, lo bueno de Figma es que solo podemos reutilizar la mayoría de estas piezas Así que solo voy a deshacerme de todo lo demás que no estamos usando manteniendo presionado el turno. O simplemente selecciona dentro del marco y arrastra. Creo que voy a arrastrar todo el camino hasta allí. Ahora, una cosa que quería que hiciéramos antes de seguir adelante es seleccionar eso, mantener presionado el turno. Sí, digamos talla 15. Entonces seleccionaré esto también. Talla 15, así como así. Solo quería redimensionarlos para hacerlos un poco más grandes que el texto de la tarjeta Ahora, volviendo a esto, como pueden ver, si me acerco, tenemos una imagen, entonces tenemos algún texto, luego descripción. Veamos cómo implementar esto. Voy a seleccionar esto, copiarlo, controlar, seleccionar este marco y pegarlo ahí. Haz doble clic en eso y haz doble clic en eso, deshazte de eso. Ahora tenemos estos dos quiero seleccionar eso y ponerlo en algún lugar ahí. Y de hecho, como ya puedes adivinar, aquí no tenemos nombre, así que Control, selecciona el nombre y quítalo. De hecho, vamos a Control seleccionar el fondo. Luego Controla, selecciona la imagen y aumentemos su tamaño mientras mantienes presionada la tecla shift para aumentar el tamaño proporcionalmente Así como así. Pero déjame acercarme a esto. Y seleccionaré la herramienta de texto y escribo un As kicks. Bien, así que sólo voy a seleccionar este texto ficticio. Voy a seleccionar el texto para una vez más, arrastrar para pegar un párrafo, así como así. Ahora tenemos esta calificación de estrellas. Entonces voy a seleccionar este menú desplegable, luego seleccionar la estrella y dibujar una estrella manteniendo presionada turno, tal vez hasta ese punto 16 por 16. Eso es 18 por 18. Vamos a darle un espaciado de dos. Después Shift Control D. Así que tenemos cinco estrellas. Podemos seleccionar eso y arrastrarlo hasta allí para duplicarlo. Tenemos un espacio de calificación de cinco estrellas, tres k reseñas, tres K críticas. Puede empujar esto con flechas de teclado. Ahora quiero seleccionar estos cinco, agruparlos y llamarlos estrellas ratings o estrellas. Esas son las cinco estrellas. Entonces el grupo sigue seleccionado, puedo seleccionar ese entonces Control G para llamarlo calificación. Ahora dentro de la calificación, tenemos las estrellas, las cinco estrellas y la calificación. Permítanme simplemente copiar eso, pegarlo solo para aumentar la cantidad de texto, seleccionar este grupo, organizarlo correctamente. Permítanme aumentar este tamaño ligeramente a tal vez 16. Creo que me gusta cómo se ve ahora. O tal vez podamos empujar esto hacia arriba, mantener esto abajo para que el espaciado aquí mismo sea el mismo que el espaciado aquí. Todo bien. Entonces ahora, seleccionando esto directamente, puedo mantener presionada Control y Mayús y darle este color. Entonces esta es una calificación de cuatro estrellas. Haga clic afuera. Y ahora tenemos un solo vendedor destacado llamado Polis Kicks. Todo bien. Entonces ahora puedo seleccionar esto en su totalidad y Control G para agruparlo. Entonces llámalo tarjeta de vendedor destacado. Contraerlo. Ahora puedo arrastrar con out y turno. Vamos a darle ese espaciado de 17 o el espaciado que quieras. Después, cambia el Control D para duplicarlo varias veces. Ahora, te darás cuenta si quieres duplicarlo más, déjame simplemente deshacer ese deshacer Control D, luego Control D. Viene delante de la barra de tabulación. Y eso es porque la barra de tabulación en la jerarquía aquí está debajo de esta tarjeta. Como puedes ver la tarjeta está aquí arriba y la barra de pestañas está aquí. Así podremos seleccionar las tarjetas. Y de hecho, permítanme agruparlos a todos. Tarjetas de vendedor destacadas. Tarjetas en plural. Y luego arrástralo justo debajo de la barra de pestañas. Y ahora parece estar detrás de la barra de pestañas porque el usuario espera poder desplazarse. Entonces ahí vamos. Ahora, podemos seleccionar esta barra de pestañas, y veamos si podemos agregar alguna sombra de borde. Sí, sombra. Aquí estamos. Entonces para la X, quiero decir tal vez cinco negativos si me acerco, negativo 20, negativo cinco. Digamos cinco negativos. Sí, como pueden ver, ahí está esa sombra. Digamos también cinco negativos. ¿Y qué pasa con el diez negativo? Me alejo. Ahora, como pueden ver, hay alguna sombra paralela justo detrás de ahí. Bien, juega con eso. No quiero detenerme demasiado en ese punto. Ahora lo siguiente, claro, es cambiar el detalle para cada uno de los vendedores. Entonces Control, selecciona esto, haz doble clic en él. Entonces esto podría ser Eagle Motors. Volvamos a las clases de Figma, activos, miniaturas. Haga clic afuera. Haga clic de control, haga doble clic de nuevo. Esa puede ser la juguetería. Cierra eso. Control. Haga doble clic. Eagle Motors. Ahora, volvamos a nuestra referencia y veamos si tenemos todo correcto. Ahora, como puedes ver, tenemos diferentes íconos en diferentes pantallas dependiendo del contexto, pero no vamos a pasar tiempo tratando de actualizar los íconos porque ya sabes cómo colocar esos íconos ahí. Entonces depende de ti hacer ese trabajo. ¿Nos hemos olvidado de algo más? No creo que hayamos olvidado nada. En la siguiente lección, ahora vamos a crear esta página de detalles para uno de los vendedores porque si alguien toca esto o selecciona esto en su teléfono, serán llevados a la policía es detalles de la tienda. Ahora pueden leer más sobre la tienda de policía o llamarlos. Esto abrirá el teléfono. Esto abrirá esta pantalla y podrán platicar con patadas policiacas También pueden hacer clic en los productos para ver los productos policiales, y pueden tener una visión general rápida de la compañía. Entonces veamos cómo crear esto en la siguiente lección. Nos vemos en breve. 10. Pantalla para vendedores individuales: Bienvenido de nuevo. Estamos progresando, y eso me alegro. Cuando alguien hace clic en la tarjeta Police Kicks, se supone que deben estar llevando a la página de detalles de la tienda Police Kicks. Todo bien. Así que volviendo a nuestro espacio de trabajo aquí, voy a Control Select Inside, luego afuera y arrastre para duplicar eso. Y de hecho, olvidé que se suponía que debíamos cambiar el nombre de estos. Entonces esta es la pantalla de inicio. Este es el doble clic que presentó la pantalla del vendedor. Y se supone que esta es la pantalla de un solo vendedor. Así que ahora voy a borrar todos esos cambios de vuelta aquí. Puedo ver que necesitamos una imagen. Podemos simplemente Controlar, seleccionar esto, luego copiar, Control C, Control seleccionar esto, controlar V, y solo voy a mantener presionada la mayúsculas para escalarla desde todos los ángulos, así como así. Entonces vamos a crear esta tarjeta. Mi asiento sigue deslizándose hacia abajo. Bien, así que vayamos a este menú desplegable. Y luego rectángulo también. Dibujemos nuestro rectángulo ahí mismo. Creo que ese es un buen lugar. Si bien está seleccionado, vamos a darle tal vez 20. Seleccione también la imagen. Vamos a darle 20. Sí, creo que les di diez cada uno. Entonces diez, diez. Déjame alinear eso con eso. Empuje hacia arriba con las teclas con la tecla de flecha. Y creo que ahora estamos llegando a alguna parte. Entonces seleccionando esto, luego vamos al seleccionador de color de color Entonces vamos a darle ese mismo color ahí. Seleccionar exterior. A continuación, vamos a darle un nombre. Entonces sólo voy a seleccionar motores Eagle. Control seleccione porque está en un grupo, Control seleccione luego arrastre para poner el nombre ahí. Quiero seleccionar este Alt y arrastrar. Pongamos eso ahí. También necesitamos esta calificación, haga doble clic en eso, luego haga doble clic en eso. Alt y arrastra eso. Y pongámoslo ahí mismo. Solo estamos reutilizando lo que ya dedicamos tiempo a crear. Esa es la ventaja de usar Figmre. Se pueden reutilizar componentes. Bien, así que vayamos al acerca. Entonces seleccionando esto y arrastre Alt, luego haga doble clic en este Alt arrástralo. Lo expandiré hasta tal vez ese lugar. Arrastre y suelte esto en alguna parte de aquí. Mantenga presionada la tecla Mayús para aumentar el tamaño. Control, seleccione el fondo. Quiero controlar, seleccionar el fondo para poder cambiarlos a diez radios de borde, controlar, seleccionar los textos. Yo agujero. Quiero hacer esto 15. Controle, selecciónelo. Vamos a ponerlo ahí mismo. Entonces voy a arrastrar. Déjenme darles ese espaciado de 14. Y mientras eso esté seleccionado, mantendré presionada la opción Mayús, luego cambiaré el tamaño de los dos mientras mantengo presionada la opción Mayús Empujarlos hacia la izquierda, ligeramente hacia arriba. Mantenga presionado el control. Quiero darle ese color de fondo. Entonces creo que este era el color. Entonces para el texto, vamos a darle un color blanco. Voy a hacer doble clic en esa copia. Pasta Pasta. Vamos a terminar ahí. Y tenemos nuestra tarjeta. Haga doble clic en esto. Vamos a empujar esto a este otro lado. Ahora, aumentemos el tamaño del nombre de la compañía tal vez hasta 24. Empujemos esto hacia abajo. Desplazamiento hacia afuera. Piensa que ahora estamos empezando a conseguir algo significativo. Control seleccione esto. Esto es chat. Sí, creo que ahora tenemos algo increíble. No sé lo que queda. Siempre puedes actualizar los iconos y los detalles que necesites. Esto ya está aquí, vamos a tener más sentido, por cierto. Esto es patadas de Policía. Estás viendo patadas de Policía. Y de hecho, en realidad necesitamos tener esto teníamos una flecha. Otros iconos. Sí, teníamos esta flecha. Creo que en realidad lo necesitamos en lugares como estos. Así que vamos a empujar eso y aquello porque queremos darle al usuario una forma de navegar hacia atrás para volver a donde vino. Creo que ese es el mismo caso aquí mismo porque si seleccionas vendedores destacados, mira todo lo que te llevan aquí y siempre puedes volver atrás. Seleccionando estas tres copias. Yo Control seleccione aquí. En primer lugar, seleccione Control, luego Control V para pegar en su lugar. Y ahora esto se supone que son vendedores destacados. Controla B para que sea audaz, y vamos a darle ese color. Quizá podamos llamar a esta tienda Polskiks. Podemos darle esa audaz en eso para que el usuario sepa que está viendo la tienda de patadas policiales Si dicen atrás, se los llevan de donde vinieron. Vendedores destacados, si dices de nuevo, te llevan de vuelta a la página principal. Veamos qué teníamos aquí. Así que no necesitamos el perfil de usuario ahí mismo porque solo estás viendo vendedores destacados. Incluso aquí, no necesitas eso Sí, pero en general, creo que ahora tenemos una bonita pantalla de vendedor único con todos los detalles. Y sí, hagamos esto un poco más grande. Y controla, selecciona el texto dentro de los productos. Empuje ligeramente hacia abajo. Ahora, si estoy viendo esto en mi teléfono, puedo seleccionar esto. Hagámoslo 11. Empuje hacia arriba. Si selecciono esto, me van a llevar a una lista de todos los productos que Eagle Motors está vendiendo. Ahí vamos. Entonces en la siguiente lección, sigamos adelante y terminemos las pantallas con la pantalla de chat porque también tenemos esta pantalla de chat, que es algo que puedo darte como tarea. Pero vamos a ver cómo crearlo en la siguiente lección. Te veré en breve. 11. Pantalla de chat: Y bienvenidos de nuevo. Entonces ahora estamos a punto de terminar de hacer las pantallas. Sólo tenemos esta sesión de chat para terminar. Así que vayamos a nuestra obra de arte o nuestro diseño, y aquí estamos. Ahora, voy a Control, seleccione esto como de costumbre. Entonces voy a arrastrar, y asegurémonos de que esté uniformemente espaciado y manteniendo presionada la palanca de cambios para movernos en línea recta. Voy a dejar ir ahí. Entonces esta es la pantalla de chat. Entrar. Déjame simplemente deshacerme de la imagen. Y algunos de estos, ¿qué tenemos aquí, por cierto? Nosotros solo tenemos la charla. Entonces quiero que me quede con esta caja y los textos, empujarlos hacia arriba, así como así. Selecciona el texto, empújalo hacia arriba. Supongamos que es una consulta. Nosotros hicimos esa pregunta. Déjame aumentar el tamaño aquí. Acercar. Selecciona el texto ahí arriba, empuja eso ahí. Ahora bien, se supone que esté hasta tal vez ese lugar porque quieres permitir que el usuario sepa cuál es su burbuja de discurso y cuál es la burbuja de discurso del vendedor, así como así. Entonces voy a seleccionar estos dos, arrastrar hacia abajo, tal vez ese espaciado, pero empuja esto hacia este lado. Podemos variar el tamaño. Así que solo arrastraré esto y copiaré y pegaré. A lo mejor fue una respuesta larga. Déjame arrastrarlo hacia abajo, así puedo seleccionar aquí. Entonces vamos a darle este color para mantener esa consistencia de marca. Entonces para el color del texto, vamos a darle el color de fondo. Entonces ahora solo puedo seleccionarlos todos, luego los arrastre, les doy el espaciado de 21. Dimos los originales. Esto puede ser más corto. Cómo arrastrar. Así como así. Y ahora tenemos nuestra pantalla de chat. Entonces creo que eso es suficiente para la pantalla de chat. En la siguiente lección, hagamos un poco limpieza porque perdimos la noción de todas nuestras agrupaciones y organización en general para nuestro proyecto Entonces veamos cómo organizar todo para que tengamos un documento limpio y legible. Te veré en breve. 12. Limpieza: Ahora es el momento de hacer un poco de limpieza de nuestro diseño porque ahora mismo todo está desorganizado No es muy desorganizado, pero perdimos la noción de dónde estamos y qué grupo pertenece a dónde Entonces comencemos con la pantalla de inicio. Esta es la pantalla de inicio. En primer lugar, vamos a deshacernos de estos dos, borre eso. Ahora comencemos con la pantalla de bienvenida. Dentro de la pantalla de bienvenida, tenemos el logo. Tenemos el icono de carga y la barra de estado. Eso está bien. Dentro de la pantalla de registro, y de hecho, quiero ocultar esa pantalla. Dentro de la pantalla de letreros, escondamos el resto. Dentro de esto de aquí, tenemos el logo. Eso está bien. Tenemos ese texto de introducción Entonces tenemos los rellenos telefónicos, el botón, y ellos tienen un grupo de texto de cuenta. Entonces tenemos la barra Sarus, que podemos poner encima del logo de la tienda Estar en una buena jerarquía. Entonces eso está bien. A continuación, así que vamos a esconder eso y a dar a conocer esto. La pantalla de firma, tiene un logotipo de tienda. Tenemos ese texto. Tenemos los campos de formulario. Dentro de los campos del formulario, tenemos la contraseña. Correo electrónico y nombre de usuario. Déjame colapsar el nombre de usuario y ponerlo por encima de estos otros. Se supone que el correo electrónico está en el medio, y eso está bien. Entonces tenemos ese texto. Tenemos el botón de registro, luego la barra Srtus. Puedes ponerlo ahí mismo. , a continuación, pasemos a la pantalla de chat, que deberíamos haber puesto al final aquí mismo. Entonces éste antes que él. Entonces eso. Así que colapsar, alto eso. Entonces vayamos primero a la pantalla de inicio. Dentro de la pantalla de inicio, tenemos el déjame colapsar. Déjame seleccionar colapsar todo primero. Bien, tenemos la categoría de ropa hasta aquí Esas son las diferentes categorías de productos. Así que con todos ellos seleccionados, Control G categorías de productos. Estas son las otras categorías de productos. Entonces todo el camino hasta allí, no, necesitamos esto, este turno de mantener presionado, y esto. Después Control G, otras categorías. Entonces tenemos ese botón. Botón Ver. Eso también es un botón VWA. Ver el botón de un vendedor destacado. Y este es el botón de ver producto Gore. Y de hecho, quiero que agrupemos todo aquí desde eso hasta eso y este grupo Control G. Vamos a llamarlo categorías de productos populares. Entonces vamos a agrupar también este y este grupo y ese Control G. Esos son los vendedores destacados. Y esconderlo y mostrarlo. También podemos ocultar las categorías de vendedores populares y mostrar que otras categorías, texto y el propio grupo, controlar G, otras categorías De hecho, podemos llamar a estas secciones. Sección, sección de categorías populares y sección de vendedores destacados. Y por supuesto, la sección de vendedores destacados es lo primero. Después las categorías populares, luego otras categorías. Y tenemos al usuario del perfil, que se supone que está aquí arriba. De hecho, antes de movernos eso, solo vamos a seleccionarlo junto con el nombre y estos dos y agruparlos y llamarlos contexto, nervio Vgación o nervio colapsarlo, y pongámoslo por encima de vendedores destacados Entonces tenemos la barra de búsqueda, que viene por debajo de ella. Entonces tenemos la barra de pestañas. Que viene en la parte inferior, entonces tenemos la barra de estado, que debería llegar en la parte superior. Todo bien. Entonces la pantalla de inicio ahora está bien organizada. Como puedes ver, tenemos la barra de estado, luego tenemos el nervio contextual, la barra de búsqueda, vendedores destacados, vendedores populares, otras categorías y la barra de pestañas. Ahí vamos. Así que vamos a esconder eso. Ahora, veamos los vendedores destacados. Y aquí dentro, seleccionemos esto es Control G. Nervio del contexto. Contraer. Entonces tenemos eso. Y entonces entonces vamos a colapsar eso. Entonces tenemos la barra de inicio, que debería llegar en la parte superior. Esto debería estar debajo la barra de pestañas debido a esta sección aquí. Recuerda. Pero ahora, dentro de la barra de pestañas , no, dentro de las tarjetas de vendedor destacadas, también necesitamos organizarnos. Vamos a colapsar todo primero. Sí, tenemos cinco Tenemos todas estas tarjetas de vendedor destacadas. También puedes llamarlos vendedor destacado tarjeta uno. Se puede obtener muy específico, muy detallado sobre lo que es cada uno de estos componentes. Porque si abres uno, también encontrarás que tienes otros grupos. Así que consigue lo más detallado posible y lo más organizado posible. Entonces al menos para entender cómo organizar tus grupos. Colapsar eso, ocultar eso. Vamos a entrar aquí. Esto es muy rápido y directo. Colapsar todos estos. Empecemos por poner el larguero de arranque en la parte superior Vamos a crear este contexto nav Control G. Esa es la uña del pulgar. Esta es la tarjeta. Solo llamémoslos detalles del vendedor. Control G. Detalles del vendedor. Esta es la miniatura del vendedor. Después la barra de pestañas en la parte inferior. Entonces tenemos la barra de inicio. Nervio de contexto, detalles del vendedor. La miniatura del vendedor debe estar por encima de ella. Bien, colapsar eso ahora, finalmente. Hagamos esto. Un texto. Entonces ahora, he agrupado todos los grupos de texto de chat. Y claro, puedes reorganizarlos. Y luego tenemos la barra de pestañas, luego tenemos la barra de inicio, que podemos poner aquí arriba. Y ahí vamos. Así que vamos a mostrarlo todo Y ahí vamos. Veamos cómo agregar interactividad en la siguiente lección Te veré en breve. 13. Añadir interactividad: Es momento de agregar interactividad y enlaces a las diferentes partes para permitir la navegación y presentación Entonces para hacer eso, antes que nada, tienes que asegurarte de que estás dentro del modo de diseño. Si estás en modo sorteo, no tendrás esta opción llamada prototipo, que es lo que necesitamos. Y eso es porque si nosotros, por ejemplo, Control seleccionamos esta pantalla o marco y cambiamos a prototipo, notarás que tenemos estos íconos más apareciendo. Y si estamos en modo drone y Control seleccionamos esto, no los tendremos. Y esos son los ganchos que se supone que debes usar para enlazar a otras partes de la app. Así que asegúrate de estar en modo de diseño. Y ahora, si selecciono esto, Control lo selecciono y cambio a prototipo, puedo arrastrar esto y ponerlo ahí mismo. Señaló eso. En cuanto veas lo más destacado, eso significa que esos dos están vinculados. Si alguien hace clic en esto, será llevado a esta pantalla. Entonces para comprometerme, solo voy a hacer clic afuera, pero también puedo elegir el comportamiento. Se puede elegir el destino, acción, navegar hacia o todas estas otras cosas. Si selecciono eso, ahora si voy a tengo dos opciones aquí, puedo previsualizar o presentar. Si tenemos una vista previa, va a abrir un simulador aquí y si elijo presente, va a abrir una nueva pestaña. Ahora, de vuelta aquí, estamos aquí dentro. Si selecciono esto, nos va a llevar a esa pantalla de registro. Ahora, déjame cerrar eso. Y también podemos cerrar esto. Si lo selecciono, como pueden ver, nos está llevando a la pantalla de registro. Ahora, entrando aquí, quiero acercarme. Y recuerden, esto era un grupo. Yo quería que solo tuviéramos esto por control seleccionando esto. La razón por la que no lo hicimos un texto continuo hasta el final fue porque quería que hiciéramos de este un solo enlace, no todo el texto para que cuando alguien haga clic en esto, sea un enlace por sí solo, y estoy manteniendo presionado el control para seleccionarlo directamente. Y si selecciono eso, puedo arrastrarlo y llevarlo a la página de firma. Si ya tienes una cuenta, puedes iniciar sesión. Entonces serás llevado a la página de firma si haces clic en esta. Entonces veamos eso en acción. Vista previa de eso. Si hacemos clic para ir a la página de registro, si ya tenemos una cuenta, podemos iniciar sesión y nos llevan a la página de firma. Ahora, hagamos lo mismo aquí. Puedo mantener pulsado Control y seleccionarlo, luego arrastrarlo a eso y hacer clic afuera. Ahora puedo decir bien. Ahora bien, si vuelvo a hacer clic en esto, selecciónelo. Seremos llevados a la página de inicio de sesión. Si no tenemos una cuenta, seremos llevados a la página de registro. Así como así. Alejar. Déjame cerrar el previsor. Déjame ajustar mi asiento. Acercar. Acercar Ahora, aquí podemos decir que si alguien hace clic en este botón, se supone que deben ser llevados a los vendedores destacados, esta pantalla. Entonces voy a conectarlo a eso. Si tenías una pantalla de categorías populares, que deberías tener y hacer clic en Ver todo, se supone que debes ser llevado a la pantalla de categorías populares, pero nosotros no la tenemos. Entonces no nos vamos a preocupar por eso. Todo bien. Entonces también tenemos esta página de inicio. Bien, entonces también tenemos el alquitrán. Aquí solo estamos haciendo conexiones aleatorias. No estamos tratando de seguir un orden específico. Entonces, si estamos en la pantalla del vendedor destacado, podemos seleccionarlo. Entonces seleccione Control, y yo lo seleccionaré y nos llevaré de vuelta a casa porque si seleccionamos el icono de inicio, se supone que debemos ser llevados a la pantalla de inicio. A esto se aplica el mismo caso. Seleccione control, Control seleccione. Entonces vayamos a la página principal. El mismo caso aplica a esto, Control seleccione, luego vaya a la página principal. Todo bien. Si hacemos clic en el botón de chat, se supone que debemos estar tomando el chat con esta tienda. Entonces mantendré presionado Control y nos llevaré ahí. Haga clic en el exterior. ¿Qué más? Si hacemos clic aquí en el botón B, quiero mantener pulsado Control para seleccionar el icono, entonces podemos volver aquí porque llegamos al gráfico desde esta parte. Si estamos dentro de la tienda, probablemente salimos de la lista de tiendas. Así podremos seleccionar este icono de atrás y vincularlo ahí atrás, seleccionar afuera. Si estamos dentro de la lista de vendedores destacados, probablemente venimos de la página principal. Entonces seleccionando Control, selecciónelo, luego vuelva a colocarlo ahí. ¿Qué más? Ahora bien, si estamos viendo esto como un grupo, sólo voy a seleccionar Control seleccionar el fondo en sí. Nos van a llevar a la página de detalles de Police Kicks. Porque es una tarjeta, la seleccionas, te llevan a la página de detalles ahí. ¿Se nos ha olvidado algo? A ver si necesitamos algo más. Esta es la tienda Police Kicks. Por lo que también podemos vincular esta tienda aquí, manteniendo pulsada Control. Voy a vincularlo a esa tienda. También voy a hacer lo mismo con la miniatura para que donde quiera que toques, solo te lleven a la tienda También haré del nombre un enlace a la tienda. Y eso es en realidad lo mismo deberíamos haber hecho para esto porque queremos asegurarnos de que están apuntando a la tienda correcta. Entonces, si alguien hace clic en el nombre de la tienda, es llevado a la tienda. Y ahora creo que entiendes cómo crear interactividad, cómo vincular cada enlace con el destino correcto Sí, creo que todo está bien. Entonces pasemos a la presentación. Quiero que lo veamos como una presentación. Vamos a cerrar eso. Ahora bien, si hago clic en eso, nos llevan a esa página. Y de hecho, quiero que el logo nos lleve a la página principal. Pero por ahora, estamos en la página de registro. Si aún no tenemos una cuenta, nos llevan a la página de registro. Muy bien, ahora quería que pudiéramos navegar a la página principal haciendo clic en este logotipo Y esto también. Así que ahora hagamos clic en Reproducir de nuevo. Ahí vamos. Si hago clic en esto, nos llevan a la página principal. Ahora bien, si quiero ver todos los vendedores destacados, simplemente voy a hacer clic en eso. Visualizamos a todos los vendedores. También puedo regresar. Así que ahora volvamos a todos los vendedores. También puedo volver a la pantalla de inicio desde la pantalla de la página de vendedores destacados. Aquí, si selecciono el fondo, la tarjeta o el nombre, nos llevan a la tienda de detalles de la tienda. Y si tenemos mucha curiosidad y queremos hacerle más preguntas a la tienda, deberíamos ser policías patadas aquí Podemos iniciar una conversación con ellos y comenzar a comunicarnos, averiguar cuánto cuestan sus productos. Entonces creo que este es un buen lugar para terminar con esto. Esto fue solo una introducción rápida al diseño de la interfaz de usuario de Figma y aplicaciones móviles Por supuesto, hay muchos más consejos y trucos bajo la manga, y los voy a compartir en futuras clases. Pero por ahora, vamos a parar ahí. Pero antes de que te vayas, tengo algunas cosas más que quiero compartir contigo, así que te veré en la siguiente lección. No vayas a ningún lado. 14. Reflexiones finales: Y eso es una envoltura. Quiero felicitarte por seguir conmigo desde el principio hasta el final. Finalmente lo terminaste, y ahora tienes una aplicación móvil, interfaz de usuario que puedes mostrar a tus amigos, clientes o posibles empleadores. Ahora, me gustaría ver qué has podido crear. En Skillshare, nos gusta subir nuestros proyectos y recibir comentarios de compañeros y profesores Así que sigue adelante y haz clic en la pestaña Proyectos y Recursos justo debajo este reproductor de video y haz clic en el botón Enviar para subir capturas de pantalla de la interfaz de usuario de tu aplicación móvil. Y una cosa más, si te pareció útil esta clase, realmente te agradecería que te tomaras solo 1 minuto de tu tiempo para dejar una reseña. Déjame saber cómo me fue. Déjame saber cómo estuvo la clase. ¿Te gustó? ¿Recomendarías lo recomendarías a principiantes o intermedios? Realmente agradecería cualquier comentario porque realmente ayuda a que esta clase sea más visible en la plataforma y permite que más estudiantes estén expuestos a ella. Entonces solo ve a la pestaña de reseñas y haz clic en Revisión laboral, y realmente, realmente lo agradeceré. Además, no olvides consultar mi perfil donde tengo varias clases más sobre diseño web. Modelado en tres D con Blender y otro software diferente. Consulta mis clases y ve si algo te interesa. Vivimos en una era digital donde las habilidades digitales son muy importantes, y eso es en lo que me especializo. No olvides seguirme también para que me avisen cada vez que tengo una clase completamente nueva. Así que hasta la próxima vez, mantente creativo. Paz.