Aplicación web de moda de Figma UI/UX - Diseñar una aplicación web completa UI/UX - Aprende Figma

1. INTRODUCCIÓN: Bienvenido a esta app web figma, curso de diseño UI UX. Me llamo Danny Chelsea y seré tu instructor en este curso. En este curso, diseñarás una aplicación web de moda completa, UI UX. Por lo que esta es la app completa que vas a diseñar en este curso. Si bien diseñarás esta aplicación web, UI UX UI puede alarmar y diferentes tipos de técnicas y mejores prácticas de Figma. Te mostraré ¿cómo puedes preparar tu proyecto? ¿ Cómo se puede hacer diseño de sistemas, diseño de sistemas de color , sistema de cuadrícula, crear componente , crear grupo, y tantas cosas. Echemos un vistazo a la app que vas a diseñar en este curso. Por lo que esta es la app completa que vas a diseñar aquí. Entonces en la parte superior, tenemos nuestro ítem de navegación, y luego tenemos a nuestros lindos heterosexuales. Y después de eso tenemos nuestros artículos de moda mujer, artículos de moda para hombre. Tenemos nuestra paloma se muestra, y luego categoría suscripción sexual y nuestro pie de página. Aquí en la sección principal, podemos ver que tenemos este botón de desplazamiento horizontal. Entonces si hago clic en el Horrigan a este cromátido se va a desplazar horizontalmente. Voy a hacer click aquí. Se va a volver a la primera posición. Incluso haciendo esto, también podemos hacer Horizontal Distribuirte. También vamos a aprender a hacer este tipo de opciones de desplazamiento de desplazamiento en Figma. Y desde aquí, si hago clic en este ítem, podemos ver un modelo funciona con nuestra información de artículos de moda en la caja modelo. También tenemos esta protuberancia en las mejores opciones esco. que puedas hacer tus artículos de esta manera, o simplemente puedes hacer click en el botón y luego tenemos nuestra información, y después de eso, tenemos este ícono de cierre. Si hago clic aquí, se va a eliminar. Y si lo vuelvo a abrir, y si hago clic en nuestro lado, se va a eliminar también de aquí. Y dos, mientras diseñarás esta sección de categoría, vas a aprender a trabajar con imágenes. En Figma, se pueden ver diferentes tipos de formas que he agregado en estas imágenes bajo esta sección de categoría zumo. Entonces te voy a mostrar cómo seleccionar imágenes, cómo trabajar con imágenes en Figma. Y luego tenemos nuestras secciones de suscripción y nuestras secciones de pie de página. También vas a aprender muchas cosas sobre los plugins de Figma. Se pueden ver todos estos iconos que tenemos en esta aplicación web que uso desde plugin. Por lo que también vas a aprender a usar un tipo diferente de plug-ins para iconos y otras paradas. Y también tenemos nuestras características de registro. Entonces si hago click en el Registrarse, se va a mostrar nuestro pop-up modal. Y esta aunque forma de inscribirse. Si hago clic en el registro, puedo pasar a la página de inicio de sesión. Y desde el inicio de sesión, tengo basado ODP. Y después de verificar este RTP, podremos llegar a nuestro hogar. Y una cosa es notable aquí es que mientras estamos mostrando la suscripción, podemos ver un poco de animación y transición desde diferentes sitios. Entonces, lo que vas a hacer este tipo de prototipo, vas a aprender a usar la animación, superponer y profundizar diferentes tipos de prototipos, funcionalidades, por ejemplo. Entonces si yo, si hago clic en él, para que podamos ver que el inicio de sesión viene del lado derecho. Y si hago clic en el inicio de sesión, está viniendo desde arriba. Y si hago clic en la periferia, se ha ido. Y ahora podemos ver nuestra página de inicio. Va lo mismo aquí. Por lo que se puede ver poca animación en el momento de la oferta vamos. También vas a aprender a hacer prototipos en este curso. Este curso te ayudará mucho a mejorar tus habilidades. Y lo más importante, después de terminar este curso, vas a tener un proyecto completo que podrás añadir a tu portafolio. Por lo tanto, voy a esconderme, animarlos a disfrutar de este curso. Nos vemos en la clase. 2. Diseño de cuadrículas de diseño y sistema de color: Bienvenido a esta conferencia. En esta parte, vamos a empezar a trabajar en nuestra aplicación de moda o web, UI UX. Por lo que en cuanto inicies sesión en tu cuenta de Figma, ves este tipo de interfaz de usuario. Ahora desde aquí, tenemos un nuevo archivo de diseño tan rápido que necesitamos crear, necesitamos abrir archivo de InDesign. Y después de eso, necesitamos seleccionar a nuestros amigos. Aquí en la barra superior, por lo general se ven todas las herramientas o Figma. A partir de aquí, necesitamos seleccionar un marco. Entonces voy a seleccionar el marco aquí en la erupción esa esquina. Te va a dar un par de opciones. Entonces bajo esta parada de mazo, voy a seleccionar este indexado de opciones. Ahora nos da un marco, ¿verdad? Entonces básicamente vamos a diseñar este tipo de moda en ninguna parte, pero no exactamente igual porque vamos a sumar un par de características más y un poco de cambios, no sólo por fines de referencia, por lo que sólo podemos mirar en él a qué sección tenemos. Muy bien, así que ahora pasemos a los proyectos tan rápido antes de comenzar cualquier diseño, siempre es una sabia decisión preferir diseño de tu sistema para que sepas qué tipo de color, qué tipo de puente, cualquier estilo que desea utilizar. Y luego se puede reutilizar de esta manera. Puedes hacer que tu diseño sea igual para cada página. Se va a organizar tu proyecto y se verá pixel perfecto. Muy bien, tan rápido. Y tendremos que crear una cuadrícula de diseño. Entonces voy a crear aquí una cuadrícula de diseño, y nos va a dar este tipo de grilla, pero quiero tener solo columna. Por lo tanto voy a seleccionar columna y luego voy a tener 15. Y entonces podemos empezar a trabajar de este lado a este lado. Quiero decir, cualesquiera que sean los datos que agreguemos, agregaremos de este lado a este lado. Ahora voy a hacerlo R. Ahora voy a hacer que sea una cuadrícula de diseño de estilo es tokens egregious contar. Por lo que selecciono la cuadrícula, luego hago clic en este ícono, luego hago clic en este plus, y puedo decir columna de rejilla principal. ¿ De acuerdo? Ahora se va a ahorrar aquí. Pero si tengo ahora digamos que creé un fotograma más, entonces simplemente puedo seleccionar este fotograma desde aquí, desde la cuadrícula y luego solo puedo reutilizarlo. Muy bien, Así es como podemos mantener una distancia desde el lado izquierdo y el lado derecho. Y podemos el fin de semana, sabemos que desde donde necesitamos comenzar nuestro diseño. Ahora, vamos a crear uno más. El diseño es un sistema de diseño que es para el color. Por lo que he seleccionado par de código de color para eso. Por agregar este código de color, solo estoy agregando algún rectángulo aleatorio y este es mi código de color que quiero tener. simplemente puedas escribir este código de color o puedes usar tu propio código de colores, no importa. Ahora, esto, este rectángulo está seleccionado, y este es el código de color. Entonces voy a simplemente reemplazar este código de color con mi código de color y luego haga clic en. Este proceso es casi igual. Y entonces aquí podemos ver par de color preconstruido que el figma ha añadido. Pero no vamos a usar ninguno de estos. Por lo que voy a hacer click en él. A esto se llama, ahora como se selecciona este ítem y he añadido este color, podemos ver este color. Y aquí puedo decir color primario. En cuanto cree un estilo, se va a quedar aquí. Ahora crea un rectángulo más. Ahora tenemos este campo, tenemos este color. Ahora si hago click en este estilo, entonces se puede ver que este es nuestro color primario que acabamos de crear. Vale, ahora, va igual. Por éste. Quiero tener un código de color diferente. Y tengo este código de color, que está en esto. Así que voy a seleccionar éste aquí. Y voy a decir que éste es para pie de página. Y luego voy a crear un rectángulo más aquí. Y luego tengo un código de color más. Para que solo puedas agregar tantos colores como tengas para tu proyecto y luego solo agregarte en tu estilo. Entonces puedo decir botón Suscribirse. Después de eso, tenemos uno más. Y ahora éste, voy a cambiar éste por este color. Y puedo decir que es una rejilla oriental para fondo de categoría. Sólo puedo intentar agregar o cualquier laboratorio significativo para que tenga sentido. Y después si tienes que cambiar algo, entonces puedes entenderlo fácilmente. ¿ Y tenemos un código de color más, que va a ser este? Y éste va por nuestro botón Añadir al carrito. Ahora, en cuanto lo tenga todo ahora puedo quitar esto. Ahora no necesito tener ningún objeto porque nuestro color de color ya está guardado en nuestro estilo de color. Entonces, ante todo, tenemos este trasfondo en la cabeza. Permítanme añadir un fondo, por lo que parece que todavía tenemos uno. Así que lo voy a quitar. Entonces ahora tenemos éste. Entonces voy a seleccionar un rectángulo desde aquí, y voy a diseñar este rectángulo para nuestro encabezado. Y entonces tenemos nuestro color sigue siendo correcto que acabamos de crear. Y se puede ver todo el código de color está aquí. Voy a seleccionar este estilo de un color. Ahora si lo ejecuto, si ejecuto esto, selecciono este fotograma, lo siento, necesitamos seleccionar este fotograma para ejecutarlo. De acuerdo, entonces la conexión es interrumpida, así que esa es la razón. Por lo que se selecciona el marco. Y luego si hago clic en él, entonces se va a abrir. Y definitivamente para trabajar, no hay nada de qué preocuparse. Acabamos de agregar un rectángulo y voy a añadir esto. Para que podamos ver nuestro marco, podemos ver nuestro diseño. Creo que podemos mantener esta altura. Solo quería ver la altura si es más grande o más pequeña. Déjame reorganizarlo y luego emparejarlo con éste. Llamar. Se ve realmente bonito. Y podemos mantener esta altura para nuestro rectángulo. Así que voy a detener este video aquí mismo. Y en nuestra próxima conferencia vamos a diseñar todo este tema. Entonces nos vemos en la próxima conferencia. Adiós. 3. Barra de navegación y diseño de encabezados: Hola, Bienvenido a esta conferencia. En esta parte, diseñaremos esta sección de cabecera para que podamos ver que tenemos un EMS y luego tenemos estos Dido y Barto y un poquito de razón aquí. Entonces primero voy a añadir la imagen aquí para que rápido, tendré que seleccionar este rectángulo aquí. Voy a seleccionar este rectángulo aquí. Y luego voy a hacer doble clic en él para que pueda hacer un poco de diseño aquí. Entonces, ¿qué puedo hacer aquí? Basta con hacer doble clic aquí. Y entonces necesito seleccionar éste. Y aquí tienes. Por lo que quiero tener de esta estantería aquí. Y después de eso necesito hacer click en el Hecho. Ahora desde aquí, necesito seleccionar este lugar, MS, para que pueda seleccionar aquí la imagen. Entonces voy a pegar la imagen aquí. Por lo que ahora podemos ver este EMS y lo voy a añadir aquí. Ahora. Se ve bien. Entonces, ¿qué puedo hacer ahora? Creo que sólo puedo ajustar esto de esta manera. Y después de eso, tenemos, por lo que también podemos cambiar el nombre de éste. Entonces voy a cambiar el nombre de este nombre. Voy a decir cualquiera de las dos imágenes. Por lo que siempre es una mejor práctica hacer agregar nombre de tu artículo o de tu groove para que después puedas identificarte fácilmente. Y ahora tenemos que sumar este tipo de diseño. Entonces para eso, lo que voy a hacer, voy a crear y seleccionar nuestra elipse aquí. Y debe ser la misma altura y peso, tal vez 25 por 25. Y luego voy a añadir un color. Entonces vamos a añadir el mismo color. Entonces voy a añadir este color aquí. Pero lo que voy a hacer, voy, lo que voy a hacer. De acuerdo, por lo que necesitamos agregar color de adición para éste. Entonces este es el color que tenemos una después de seleccionar aquí, sólo podemos cambiar el contraste en este color para que pueda decir 50%. Entonces va a verse así, pero tendremos que usar un color diferente. Entonces voy a seleccionar este color y luego tendré que hacer click sobre él. Cambiémoslo al 50 por ciento. Sí, tal vez el 40 por ciento. Pero no necesitamos tener este efecto. Voy a quitar este efecto aquí y vamos a ver cómo se ve. Por lo que está fuera de éste. Entonces se ve así similar a este color. Y ahora lo que voy a hacer, voy a hacer, voy a duplicarlo un par de veces. Y voy a dibujarlo aquí. Entonces para hacer un duplicado, solo hay que presionar seleccionar éste y controlar D, o en el botón derecho y copiar y pegar. Y ahora voy a duplicarlo un par de veces. Control D, Control D. Ahora tenemos toda esta elipse. Entonces, lo que voy a hacer, les voy a hacer un grupo para que podamos, voy a presionar Control G o desde aquí se puede decir selección grupal. Entonces voy a hacer otro, ahora sé que voy a duplicar este grupo para que consigamos algún diseño aquí. Ahora tenemos dos grupos, grupo uno y grupo dos. Y combinado en este grupo, puedo decir hojas de calentador. Entonces tenemos esta cosa ahora aquí. Voy a arrastrarlo aquí. Voy a hacer un duplicado de éste y ponerlo aquí. Pero esta vez tenemos que comer verticalmente, así que voy a rotarlo de esta manera. Y entonces voy a ponerlo en este lado. Y aquí vamos. Ahora veamos cómo se ve. Se ve bien. Y lo voy a poner en el mismo tamaño. Muy bien, entonces ahora tenemos un texto y botones. Así que agreguemos este título rápido. Entonces, ¿cuál es el texto aquí? Encuentra tu vestido aquí. Podemos añadir diferentes textos. Y ese es otro tema. Así que voy a hacerlo, está bien. Por lo que ahora podemos volver a habilitar nuestra vamos de nuevo, lo siento, voy a eliminar este texto primero de aquí. No necesitamos tener este texto aquí. Y voy a agregar esta cuadrícula de nuevo y vamos a empezar nuestra, vamos a empezar a sumar nuestro texto a partir de estos. Genial, así que voy a añadir este texto aquí y voy a decir, voy a decir, voy a decir, bien a la moda aquí. Puedo decir, oh, todo lo hace capital. Bien para ti. Aquí. Y ahora voy a aumentar el tamaño de fuente de éste a 48. Se ve bien, creo 4848, tal vez 36, así que podemos seleccionar. Y voy a cambiar el color de este texto. Entonces cambia el color de éste. A lo mejor podemos elegir el color blanco. De qué color no se va a quedar bien. Entonces podemos probar el bloque uno, supongo que el negro es bueno aquí. Eso no es un problema. Para que podamos elegir este color negro, pero el bazo no es bueno, por lo que voy a tener variedad. Entonces tendré que escribir para encontrar tu moda aquí. Y aquí va tan bien A la moda. Y después de eso tenemos otro texto. Entonces lo voy a empezar desde aquí. Y el texto es seleccionar tu vestido de permite colección. Así que podemos simplemente flotar aquí mismo. Esclavo a tu vestido desde online. Pero esta vez necesitaremos un tamaño más pequeño de texto, por lo que no necesitamos tener el mismo tamaño. A lo mejor podemos seleccionar máximo a D6 y no 20 exactamente. Voy a seleccionarlo 20. Y después de eso, vamos a añadir nuestro botón aquí. Por lo que ahora voy a añadirlo, ponlo de esta manera. Entonces si lo haces de esta manera, entonces puedes ver que esta línea de puntos va a impedir, significa que ambos están en el mismo tamaño desde el mismo punto de partida. Ahora, tendremos que diseñar nuestro botón. Entonces voy a diseñar nuestro botón aquí. Y el nombre inferior va a ser un afilado ahora. Entonces lo voy a empezar desde aquí. Entonces este va a ser nuestro botón. Y aquí primero voy a sumar este radio fronterizo para agregar border-radio 20. Y entonces un texto voy a tener que añadir aquí. Por lo que voy a decir Shop Now. Y de nuevo, y tendremos que cambiar el tamaño de fuente de éste. No es herméticamente seis va a ser 16. Y lo voy a poner en el centro. Y aquí tienes. Tenemos esta Tienda Ahora texto y ahora rápido, hazlo un grupo. Por lo que esta herramienta va a ser grupal y podemos guardar botón afilado ahora. A partir de aquí, tendremos que cambiar el color de fondo. Por lo que tendremos que cambiar el color de fondo. Entonces, ¿qué podemos hacer? Podemos sumar nuestro color. Para este texto, podemos añadir color blanco. Por lo que ahora tenemos este botón Shop Now y encuentra tu moda aquí. ¿ Qué más nos quedamos? Tenemos botón. Y entonces una cosa que puedo hacer, puedo disminuir el tamaño del botón. Y entonces sólo puedo ponerlo aquí. Y tenemos aquí el texto que podemos poner. Podemos poner aquí el texto. Y yo puedo, creo que necesitamos que podamos arrastrar eso. posible que lo veas para que podamos agregar nuestro ítem de navegación aquí. Así que voy a seleccionar éste y ponerlo aquí. También podemos sumar un poco de radio fronterizo aquí. Y veamos cómo se ve ahora. Ahora se ve mejor. Ahora en la parte superior podemos añadir nuestro texto de nuestros elementos de menú. Entonces voy a empezar desde aquí, y voy a tener nuestro hogar. Y después de eso lo voy a duplicar. Entonces en casa. Y entonces podemos decir, se puede decir Camiseta. Entonces podemos decir, o en lugar de, podemos decir, está bien, podemos hacerlo. Podemos decir camiseta y luego podemos decir zapatos. Entonces podemos decir moda masculina. Y entonces voy a duplicarlo a. Entonces voy a tener, podemos decir aquí, en lugar de manifestación, podemos decir manufactura. Y entonces tendremos uno más offshore, que va a ser nuestro inicio de sesión y apuntarnos. Para el, para el inicio de sesión, voy a seleccionar aquí nuestro radio fronterizo. Entonces voy a no border-radio, voy a añadir aquí un rectángulo. Voy a añadir esto o este, este tamaño. Entonces, lo que voy a hacer, voy a añadir radio fronterizo aquí, 20 píxeles. Y entonces aquí puedo decir inicio de sesión. Puedo decir firmar aquí. Y necesito cambiar el tamaño a 12. Necesito talla es 12 aquí. Entonces tenemos botón de inscribirse y luego después de eso, me dejaré agruparlo rápido grupo McDermott y voy a decir que me apuntes. Y también necesitamos tener un texto más para nuestro botón de inicio de sesión, para, para nuestra opción de inicio de sesión. Para que podamos decirlo aquí. Por lo que podemos decir firmar. Y voy a cambiar el color inferior. Ya tenemos nuestro color, que va a ser podemos decir este color. Veamos cómo se ve. Se ve bien, pero preferiría tener botón de inicio de sesión e inicio de sesión. Nosotros ahora con éste. Por lo que voy a presionar el Comando D. Y en lugar de firmar en este texto va a ser, en lugar de firmar, este texto va a ser firmado. Entonces, en lugar de firmar, voy a decir que inicie sesión. Ahora, si abro éste, entonces podemos ver firmar y firmar. Pero preferiría tener un color diferente. Entonces voy a añadir color diferente, éste. Y para éste, voy a elegir éste también. Y por la oportunidad, el gato, está bien, así que para cambiar el color del texto aquí. Entonces aquí veremos que ¿dónde está el uno? Entonces esta es la señal de apagado. puedas ver que cuando seleccionas un grupo o un nuevo crea un grupo, ves todos los ítems del grupo. Entonces en el grupo tenemos un rectángulo y un texto. Y hay una razón por la que podemos ver dos colores. Uno es para éste, que es nuestro texto. Entonces ahora voy a cambiar éste a blanco y va lo mismo para éste. Este bloque va a ser blanco. Ahora tenemos este diseño. Creo que está bien. Pero antes de eso, lo que tengo que hacer. Por lo que necesito comprobar si todo está en el mismo lado, misma distancia. Entonces tenemos este pez almendrado mostrado, voy a seleccionar toda esta cosa. Y luego en cuanto seleccionas todas estas cosas, hay una propiedad llamada datos ordenados. Se puede ver en el, he dicho si su si su artículo no lo tiene para artículos y no tienen exactamente una anchura o altura. Entonces éste estará en un tazón y si haces clic en él, entonces se va a ajustarlo. Ahora. Ahora veremos que tiene el mismo tamaño, ¿de acuerdo? Y otra cosa que tenemos que hacer, tenemos que hacerles un grupo. Entonces presiona Comando G. Ahora podemos renombrar el nombre. Podemos decir nav bar, y ahora no tenemos nada aquí. Ya se puede ver éste no es visible porque ya tenemos esto, ya tenemos este, este ítem exactamente a la misma distancia. Por lo que ahora puedo ver que se ve realmente bonito. Tenemos el sign-up, el texto de inicio de sesión, y así como tenemos estas partes de nav. Entonces para la barra de navegación, si selecciono ésta, tenemos 16, o cada artículo, tenemos 16. Ahora tenemos éste. Muy bien, así que ahora si quiero, también puedo arrastrar todo y puedo simplemente arrastrar y soltar porque conocemos todos nuestros datos ahora en grupo. Pero otra cosa que me di cuenta aquí, sólo podemos arrastrar que lleva un poco de centro. Y lo mismo va para éste. Veamos cómo se ve ahora. Ahora se ve mejor. De nuevo, déjame revisar el ordenado apagado Si lo es. Ok, tenemos el formato correcto ahora, hemos terminado con éxito nuestra sección de cabecera. Y en la segunda parte siguiente, vamos a empezar a trabajar en esta parte. Nos vemos en la próxima conferencia. 4. Diseño de tarjetas para mostrar elementos de moda: Bueno, bienvenido de nuevo una vez más. En esta parte, comenzaremos a diseñar nuestra tarjeta. Para eso. En primer lugar, lo que voy a tener que hacer así tenemos una estrella MS y luego Dido, y luego cuando icono, y luego el texto. Tan rápido tendremos que crear aquí un rectángulo. Entonces tenemos un título también, y tenemos dos íconos aquí que tendremos que diseñar. De acuerdo, tan rápido, voy a añadir a un rectángulo para la tarjeta. Por lo que vamos a empezar a trabajar desde esta cuadrícula. Y aquí también desde esta rejilla significa que vamos a tomar un espacio de este blanco y luego esta sombra roja, esta blanca, y luego esta sombra roja. Vamos a empezar desde aquí. Nuestro rectángulo. Podemos tomar el tamaño. Podemos tomar esta fila de árboles. De acuerdo, entonces tenemos este rectángulo y voy a añadir el pequeño movimiento de radio fronterizo de tal vez cinco. Déjame ver cómo se ve ahora. Se ve así. De acuerdo, entonces necesitaremos un poco de espacio desde arriba porque tendremos que poner aquí nuestro título. Por lo que ahora tenemos este ítem y luego necesitaremos hacerlo en efecto. Por lo que voy a añadir este efecto aquí y efecto de sombra paralela. Y también voy a cambiar el color. Este color va a ser el color blanco aquí. Entonces este es el color blanco. Y ahora en la parte superior aquí dentro de la tarjeta, tendremos que tomar otro rectángulo, el rectángulo para nuestra imagen. Por lo que voy a llevar este tamaño a este nivel y también hacer que el prestatario tenga cinco píxeles. Y tendremos que ponerlo exactamente del mismo tamaño. Muy bien, así que veamos. Entonces tenemos éste y aquí pegaremos nuestro emus. Y ahora qué más tenemos? Tenemos, vale, así que creo que necesitamos hacer nuestro rectángulo un poco más grande porque tenemos texto barato. Entonces primero se va a poder nombrar. Entonces, ¿qué podemos decir? Podemos decir, podemos decir esta opción aquí. Tenemos título y luego una estrella. Por lo que voy a añadir un texto aquí. Y este texto va a ser, podemos decir, puedo decir vestido de novia, sólo un ejemplo. Y los textos deben ser de 16 píxeles. Así que esperando solo 16 píxeles. Y luego tenemos 16 pixel para este ícono. Entonces tenemos una estrella, así sucesivamente. Usando una estrella, voy a tomar ayuda del plugin llamado íconos de alimentador. Si no sabes cómo instalar el plugin, simplemente ve a esto y explora plug-ins en la comunidad. Y aquí solo puedes buscar cualquier plug-in para el icono. Entonces solo puedes usarlo. Se puede ver que ni el plug-in que tienen mucho plug-in que tienen, sólo hay que hacer click en Instalar, entonces él va a agregar. Y luego desde aquí solo puedes explorarlo desde aquí. Por lo que ahora voy a tomar ayuda de iconos de relleno. También puedes instalar este plugin. Entonces en los iconos de relleno, creo, y tenemos este ícono estrella. Entonces sólo vamos a abrirnos, salir aquí, y aquí podremos ver todos los iconos. Voy a decir una estrella. Se puede ver que tenemos este comienzo aquí. Así que voy a seleccionar a esta estrella donde está. Por lo que ahora ha seleccionado de esta manera. Y lo voy a poner aquí. Pero antes de eso se puede ver que va a seleccionar fuera del marco, pero hay que asegurarse de que está dentro del marco, lo contrario no podrás verlo. Entonces ahora si yo, si abro este punto de vista, ahora podemos ver que esta es estrella está aquí, pero debería comenzar desde el punto de partida de este texto. De acuerdo, entonces tenemos ahora este espacio. Y no voy a hacer cambios de altura porque ya está en buena posición, 24 por 24. Entonces, lo que voy a hacer, voy a hacer que sean un duplicado. Entonces presiona Comando D. Y voy a tener poco menos espacio entre esto. Y voy a duplicarlo 345. Por lo que ahora se ve bien. Así que voy a seleccionar, convertirlos en un grupo. Voy a decir estrella. Y ahora tenemos esta estrella. Entonces, ¿qué podemos hacer ahora tenemos que sumar qué más tenemos aquí. Tenemos ícono, y luego necesitamos cambiar el color de éste. Por lo que se puede ver que actualmente el color de selección es negro. Entonces también una cosa que debes notar que este no es tu color de relleno principal y principal es principalmente un color de tu trazo porque es. Un trazo, se puede ver este tipo de trazo que agrega. Pero si quieres cambiar el fondo de éste, entonces tienes que hacerlo de esta manera. Entonces hay que hacer esto de esta manera. Entonces ahora lo hará, entonces se verá así. Definitivamente también podemos hacer éste. Entonces, ¿qué puedo hacer? Voy a, para éste, voy a seleccionar este 14 aquí para el trazo, voy a seleccionar el bloque. Entonces se verá así. Pero no quiero tener éste. Sólo quiero tener el color negro negro. Por lo que no necesitamos tener este trasfondo. Tampoco necesitamos tener éste. Por lo general no se va a mostrar ahora tenemos este color negro y ahora aquí necesitamos agregar uno más. Toma. Este texto va a estar aquí. Por lo que voy a añadir un texto aquí. Y puedo decir tal vez 50 lectura, sólo un número de escritura para mostrar. Y de esta manera, y podemos llevar la talla a 16, pero debe estar en el centro para que solo podamos arrastrarlo un poco de esta manera. Muy bien, entonces se ve bien, pero si queremos, creo que podemos cambiar el color y déjame probar cómo se ve. Si seleccionamos un color diferente y se ve, no se ve bien, pero solo podemos quedarnos con un color negro, pero en cambio, solo podemos decir que es un color atrevido. Entonces es un perno para que podamos ver que tenemos número de lectura. Entonces tenemos título, aceptamos guión mostrado. Y entonces quiero añadir un texto más, que va a ser nuestro precio. Por lo que podemos decir símbolo del dólar y pueden decir a los $50. Y asegúrate de que el punto de partida sea el mismo. Y viene de 19 por 19. Muy bien, entonces tenemos nuestro precio, tenemos esta imagen. Y otra cosa ahora tenemos que tener, tenemos que mostrar nuestra necesidad de pegar nuestra imagen aquí que no tenemos. Entonces antes de eso, antes de ir más allá, lo que voy a hacer primero, les voy a hacer un grupo en estos tres ítem. Y entonces voy a hacer lo ordenado para que podamos, conocemos a esa estrella. Entonces tenemos este título. Así que conviertan en un grupo primero. Y voy a renombrar se puede guardar guardia señal de texto. Ahora si voy aquí, ya vemos que éste es visible. Significa que tenemos la misma distancia. Ahora otra cosa que necesitamos agregar aquí, tenemos aquí un botón más que necesitamos agregar. Entonces voy a tomar la mitad de este rectángulo de esta herramienta elipse, no el rectángulo. ¿ De acuerdo? Quiero seleccionar la herramienta elipse. Por lo que tenemos Ellipse Tool aquí. Y voy a seleccionar la herramienta elipse. Y para hacerlo más oscuro, siempre hay que asegurarse de que esconderse en un mojado exactamente mismo. Entonces se ve así. Creo que podemos llevarnos un poco más grandes, tal vez 32 por 32. Y podemos ponerlo en la misma y a la misma distancia. De esta manera, podemos ponerlo aquí. Pondremos nuestro ícono, para que podamos poner nuestro ícono aquí. Entonces antes de eso quiero cambiar el color de fondo. Por lo que quiero tener este color aquí. Y luego seleccionaremos nuestro icono de blog aquí, el ícono del corazón. Y puedo decir, así que aquí puedo decir este ícono del corazón. Y luego primero lo voy a poner dentro del marco y luego sacó el ícono del corazón dentro de éste y hacer que el trazo color a blanco. Y sólo puedo centrarlo un poco. Y aquí vamos. Muy bien, por lo que se ve muy bien. Voy a detener este video aquí mismo y seguiremos desde la próxima conferencia. 5. Selecciona y muestra varias imágenes en una tarjeta: Bienvenido de nuevo una vez más. En esta parte, trataremos implementar el resto del diseño. Por lo que tenemos esta opción. Ahora, tenemos esta tarjeta. Ahora queremos hacerles un grupo, toda la parte, para que sepamos que esta parte solo podemos duplicar para hacer múltiples ítems. Entonces tenemos este corazón aquí. Entonces esto sale para convertirlos en un grupo primero. Entonces voy a hacerles un grupo y cambiarle el nombre. Y voy a decir aquí, como la mantequilla. Entonces tenemos nuestra corteza, que es otro diseño. Tenemos este rectángulo para el texto y luego tenemos el rectángulo carro principal. Para que pueda cambiar el nombre de éste. Podemos decir carro principal. Y entonces nuestra tarjeta EMS, que es ésta, que va a ser tarjeta humorística. Por lo que ahora tenemos nuestra tarjeta principal, tenemos nuestra tarjeta MS, tenemos nuestro botón Me gusta. Y puedo hacerles un grupo y puedo decir moda, tarjeta de moda. Muy bien, así que ahora puedo hacer que se duplique. Voy a presionar Duplicar hasta aquí desde esta tarjeta. Y luego lo voy a duplicar un par de veces. Entonces cuatro. Y luego phi seis. Por ahora, tal vez seis. Y tenemos, tenemos esta tarjeta, ¿verdad? De acuerdo, entonces tenemos este número de artículo ahora, pero queremos tener aquí una opción Scroll View para que podamos instalarlo. Ahora es el momento de pegar nuestra imagen aquí. Entonces, ¿cómo podemos hacerlo para hacerlo tan rápido, qué tendré que hacer? Entonces este es nuestro carrito, esta es nuestra tarjeta. Por lo que voy a ampliar todos estos para que podamos seleccionar nuestro protector de imágenes. Porque voy a tener múltiples, múltiples IMS por completo. Por lo que ahora voy a seleccionar la imagen. Por lo que da click en Coloca el lío. Ahora voy a seleccionar de tres a seis o siete cartas. Por lo que voy a seleccionar las imágenes aquí. Entonces 12, luego 34567. De acuerdo, y entonces voy a abrirla. Por lo que en cuanto carga todas las imágenes se pueden ver agregando inmensas. Lo que voy a tener que hacer, entonces solo tendré que hacer clic uno por uno. Entonces acabo de publicar, se puede ver que siete imágenes seleccionadas. Entonces, ¿qué puedo hacer ahora? Sólo puedo hacer clic en él. Se ha seleccionado un EMS, luego 10mers. Ok, lo voy a anular la selección. De acuerdo, así que déjame quitarlo. Entonces voy a hacer con dos de nuevo porque quería mostrarte algo que luego el número de posición de la imagen. Así que vamos a seleccionar la imagen aquí. Así que voy a seleccionar esta imagen. Entonces voy a seleccionar esta imagen, esta imagen. Estos, estos, estos, éstos, no éste, éste, éste, y éste. Ahora vamos a hacer clic en Abrir. Y en cuanto lo seleccionemos, así emite tres sitios. Tenemos que esperar unos momentos porque lleva tiempo subir la MS Así que en cuanto nuestra imagen esté lista, podremos verla en nuestras millas. Y aquí tienes. Se puede ver que 80 desorden, el último que seleccionaste estará en la primera posición. Por lo que solo puedes empezar a hacer distinto. Ahora solo puedo presionar click uno por uno, esto. Y esto. Aquí vamos. Y vamos a tener aquí una imagen más, que va a ser nuestro último ítem. Y así déjame ver qué podemos ver aquí? Por lo que tenemos dos imágenes aquí. Tenemos cinco hembras, pero no estamos seguros de este ítem aquí. Y ahora. Podemos simplemente salvarla. Entonces, ¿qué puedo hacer? Sólo puedo presionarlo directamente. Sólo lo voy a quitar ahora voy a quitar estas imágenes. Entonces ahora lo que quiero que veas aquí, si tenemos esta imagen, es como puedes agregar múltiples límites porque tenemos aquí otra tarjeta que es tal vez ésta. En lugar de este tenemos tenemos para un texto aquí. Entonces hicimos un error aquí. Quitamos nuestro artículo cuando hice esta cosa. Entonces ahora tenemos esta , MS aquí, pero tenemos otra moda aquí en ésta. Por lo que tenemos esta tarjeta, que es esta tarjeta y esta tarjeta. Eso aunque podemos ver aquí. Voy a arrastrar éste para ver si tenemos MAC o no. Por lo que no tenemos MS aquí. Por lo que podemos tener que presionar una imagen para este ítem aquí. Por lo que voy a arrastrar el EMS, seleccione uno que pierda. Nuevamente. A lo mejor puedo unirme a su izquierda. Entonces tenemos éste, este ítem, y voy a seleccionar éste. Y ahora tengo que presionar esta imagen aquí. Entonces la cosa es que si nuestro marco está fuera de cuatro, si nuestras imágenes son una especie de marco, entonces en ese caso tendremos que hacerlo o usted de él porque no sabemos entonces bien tenemos este ítem o no. Por lo que podemos añadir un par de artículos más aquí. Así que tal vez dos. Pero en cuanto lo puse dentro del marco, entonces consigo entonces obtengo la misma distancia. Por lo que en ese caso más rápido tendremos que preparar nuestra tarjeta y luego podremos en nuestro trabajo y luego pondré la posición de este ítem. Así que está bien. Entonces no lo duplicé. Por lo que necesita hacer un duplicado. Por lo que tenemos un artículo aquí. Tenemos otro artículo aquí. Por lo que esta es tarjeta diferente. Entonces voy a sumar para defendernos aquí. Ahora tenemos otra imagen aquí, que es esta. Ya tenemos una foto aquí. Por lo que voy a añadir dos imágenes más para este ítem. Entonces voy a colocar correos electrónicos desde aquí. Voy a decir éste por este artículo y otro, otra imagen para éste. Por lo que voy a seleccionar Colocar imagen. Y entonces puedo decir, agreguemos éste. Y aquí tienes. De acuerdo, así que ahora nuestro trabajo es establecer todos estos correos electrónicos fuera de esto. Entonces aquí, ahora tenemos rápido, vamos a ponerlo aquí. Y después podremos reorganizarlo tan pronto como tengamos distinto. Por lo que ahora estos dos elementos están fuera de nuestro marco. Así que ahora lo que voy a hacer, lo voy a poner en deflación es que el marco y este es marco incentivo. Entonces ahora tenemos nuestro, éste, que es éste. Tenemos éste, y tenemos éste. Entonces hagámoslo. Ahora. Tenemos, podemos ver que la distancia es de 20. Y éste es también necesitamos seleccionar distancia 20. ¿ De acuerdo? Entonces si ves que esta línea roja está en la misma, entonces significa que tu posición es la misma. ¿ De acuerdo? Así que ahora si vengo aquí, entonces podemos ver todas las imágenes, pero podemos ver el lado derecho, así sucesivamente que ahora lo que voy a hacer, tendré que añadir vista de desplazamiento horizontal para esta tarjeta de moda. Hemos diseñado nuestros artículos hasta ahora. Y en la siguiente parte, vamos a aprender cómo se puede hacer la vista de desplazamiento horizontal. Así que no te confundas. Lo que hicimos básicamente acabamos de crear una tarjeta, agregamos MS múltiples imágenes, y luego solo estamos agregando múltiples tarjetas para que podamos hacer horizontal se llama Ver para ¿verdad? Voy a detener este video aquí mismo, y seguiremos desde la próxima conferencia. 6. Selección de cuadros y desplazamiento horizontal: Bienvenido de nuevo una vez más. En esta parte, intentaremos agregar vista de desplazamiento horizontal cuando haga doble clic en esto, en este icono. Y como lección, van a rastrear para eso. Tendremos que convertir a todos y cada grupo en un marco. Entonces sólo podemos hacerlo. Por lo que tenemos nuestro diseño de autos y todas y cada una de las tarjetas son nuestros grupos. Por lo que se puede ver esta carta es un grupo, descarte es un grupo. Esta tarjeta es un grupo. Descartar es un grupo, y el descarte es un grupo. También puedo arrastrarlo aquí. Creo que esta tarjeta es la ranura. Esta tarjeta es una ranura. Esto, esto, esto, esto y esto. Entonces ahora lo que voy a tener que hacer, tendré que hacer grupo hacer un marco, todas y cada una de las cartas. Bien, tan rápido, haz, hazlo un marco. Entonces este carro, tendremos que hacer marco, ¿ verdad? Selecciona la tarjeta. Y luego una selección de cuadros, esta va a ser nuestro marco uno. Y así voy a deshacer o Control Z para deshacer tan rápido, vamos a empezar desde aquí para que podamos, sabemos que nuestro marco uno es nuestro primer ítem. ¿De acuerdo? Entonces este es nuestro primer ítem. Entonces voy a hacer clic derecho y voy a decir selección de fotogramas. Y entonces éste va a ser nuestro marco. Y éste va a ser nuestro marco también. Por lo que voy a decir selección de cuadros. Todd va a ser Frames conferencia para esto va a ser esta, nuestra selección de marcos. Y este artículo es, son estos artículos. Entonces voy a decir, voy a deshacer ésta porque esta va a ser nuestra quinta posición. Entonces cuatro, y voy a hacer clic derecho y decir fase de selección de fotogramas. Y entonces esta va a ser nuestra posición de sexto número. Por lo tanto selección de marcos que siete de selección. Y el último es la selección de cuadros. Déjame ver cuál es el último. Por lo que el último ítem es el número ocho, número siete, el número seis, el número cinco, el número cuatro. Muy bien. Ahora, selecciona todo el marco que acabamos de crear. Tenemos que crear, necesitamos hacer un marco ahora. Entonces enmarca estos, estos, estos, estos, estos, y luego selecciona todo el marco que tengas. Y luego después de eso en clic derecho y hacer selección de fotogramas. Ahora tienes un fotograma único y dentro este marco, puedes cambiarle el nombre. Puedes configurar ese mainframe dentro de tu marco principal. Tienes tu marco múltiple, que es tu cada elemento. Ahora. Necesitas seleccionar tu mainframe y luego golpeas el lado derecho, podrás ver el contenido de Cliff. Necesitas revisar éste. Entonces tan pronto como harías el contenido de Cliff, lo que tendrás que hacer, podrás ver en este tipo de cosas. Y luego hay que arrastrarlo hasta donde quieras mostrar, quieres mostrar, queremos mostrar esta cuadrícula sin un desplazamiento. Queremos mostrarlo hasta esta rejilla. Porque nosotros, al principio decidimos hacerlo de esta manera. Dejaremos este gradiente de espacio en blanco más amplio y el lado izquierdo y el lado derecho este amplio y levantado espacio. Ahora, si vengo aquí, podré ver que nuestro ítem es sólo de esto. También podemos hacer una cosa. Podemos simplemente mostrar estos tres ítem. Pero lo haremos más tarde. Pero ahora tenemos nuestro marco aquí y luego vamos al prototipo. Aquí, se puede ver que el desbordamiento está tirando de ruido tirando. Es necesario seleccionar este desplazamiento horizontal. ¿ De acuerdo? Ahora si vengo aquí , ahora, puedo desplazar nuestros datos horizontalmente. Pero ahora podemos ver que tenemos este pequeño tema de diseño y ahora tendremos que arreglarlo. ¿De acuerdo? Ahora podemos desplazar nuestro artículo horizontalmente. Pero antes de eso, déjame arreglar este. Así que vuelve al diseño de nuevo y voy a abrir éste. Por lo que tenemos este ítem aquí, que es nuestro para nuestro ítem numero, este es nuestro artículo quinto número. Tenemos problema con nuestros seis artículos número. Por lo que el ítem de seis números se superpone con nuestro artículo quinto número. Tenemos nuestro artículo número quinto, luego tenemos nuestro marco número seis. Entonces marco número seis. Debería tener esto. De acuerdo, así que ahora tenemos esto. Entonces debería empezar así, ¿ verdad? Por lo que debería hacer trabajo ahora. Ahora intentemos de nuevo, hagamos este contenido de clip, y luego voy a volver a ajustar el tamaño aquí. Entonces voy a ajustar el tamaño a aquí. Muy bien, entonces ahora tenemos esta opción. De acuerdo, entonces parece que también necesitamos sumar solo nuestras otras dos partes con esta. Entonces voy a abrir ese acantilado otra vez. Entonces tenemos nuestros seis ahora, nuestro siete está superpuesto con éste. Se puede ver. Por lo que ahora necesitamos seleccionar R7 y luego tenemos que asegurarnos de que con un siete, tengamos esta distancia. Tenemos esta distancia de 28. Ahora. Tenemos nuestros seis, tenemos 07, pero ahora tenemos nuestros ocho con superposición. Ahora tenemos el mismo tamaño. Entonces esta es nuestra a, esta es nuestra encuestada, y esto es seis, este es nuestro cuatro. Esto es tres, este es nuestro cinco, este es nuestro 678. ¿De acuerdo? Por lo que ahora de nuevo, voy a seleccionar el mini acantilado y luego ajustado con nuestra rejilla. Ahora, creo, vale, genial. Ahora no tenemos solapamiento. Pero se puede ver que en la parte inferior tenemos poco tema aquí. Entonces necesitamos cambiar nuestra altura de este contenido de clip para que simplemente pueda arrastrarlo de esta manera un poco para que podamos conseguir la sombra. Ahora podemos desplazar nuestro artículo. Perfecto. No tenemos ningún problema con eso. Para que podamos desplazarlo. Lo vamos a desplazar y podemos desplazarlo. Entonces otra cosa se nota que creo que tenemos poco más espacio de aquí y luego aquí. Entonces, ¿qué puedo hacer ahora? Simplemente puedo ir aquí. De acuerdo, así que voy a volver a abrir este ítem para agregar solo este número aquí. Entonces tenemos, tenemos esto, creo que tenemos este 14420, pero a partir de aquí, de T, de cuatro. Por lo que tenemos que asegurarnos de que tengamos nuestra distancia 20 entre toda la tarjeta. Entonces tenemos seis. Entonces si seleccionamos seis, entonces podemos ver es una T solo tenemos 277 también va a tener 20. Y luego a partir de las ocho, vamos a llegar a la India también. Muy bien, por lo que ahora selecciona mainframe y luego ajustado con la cuadrícula que queremos mostrar. Entonces voy a añadirlo aquí. Aquí vamos. Ahora podemos ver que tenemos exactamente el mismo look. Y se ve muy bien. Podemos hacer un desplazamiento de esta manera. Ahora queremos tener aquí un ítem más, senador arregla que quiero mostrar aquí. Queremos mostrar sólo para coche. No queremos mostrar este pequeño aquí. Voy a ajustarlo con esta rejilla. Y entonces, ¿qué puedo hacer? Todo el asunto ahora puedo añadir sólo uno también. Y puedo ajustarlo de esta manera. Podemos ajustarlo. La mitad de este de aquí, la mitad de ésta de aquí. O alternativamente, ¿qué podemos hacer? También podemos cambiar nuestra red. Entonces en lugar de 1015, tal vez ahora podamos sumar 20. Y después podemos decidir, entonces podemos seleccionarlo de esta manera. Sí, vale, así que ahora tenemos este show, así que podemos simplemente afirmar con 20 o así. Hagámoslo 18. Lo siento, en lugar de 20 Ahora lo haré 1919 exactamente. Tenemos que hacerlo 21. De acuerdo, entonces tenemos esta rejilla y en el lado derecho estamos tomando la cara en esto y necesitamos el lado izquierdo. Estamos tomando uno blanco, uno rojo, uno blanco uno rojo, uno blanco , cien, cien, cien. Entonces esto es lo principal aquí. Y ahora tenemos esta tarjeta principal. Y para el tablero del acantilado, quiero tener poco más espacio aquí. ¿ Por qué es esto? ¿Para que podamos ver toda la tarjeta? Se puede ver que la tarjeta no es visible. Por lo que necesito agregar un poco más de espacio aquí. Aquí vamos. Por lo que tenemos esta tarjeta, y luego tenemos este diseño, tenemos esta tarjeta, y podemos desplazar nuestro artículo. Perfecto. Y en la siguiente parte, vamos a implementar esto a botón y luego haremos un desplazamiento. 7. Recorrido horizontal haciendo clic en el botón de desplazamiento: Bienvenido de nuevo una vez más. En esta parte, vamos a tratar de agregar esto a nuestro botón y luego datos, y luego esto toma, luego después de eso, vamos a agregar esta horizontal. Llamemos opción haciendo clic ahora mismo que podemos hacer es llamar a mi haciendo este tipo de cosas de cambio, alguna cosa de arrastrar y soltar. Pero queremos tener dos botones aquí. Y luego cuando le hagan click, vamos a mostrar este origen a los listicles demasiado rápido. Añadamos el texto aquí. Entonces voy a añadir texto aquí y voy a decir aquí, puedo decir aquí fisura de almendra. Entonces esta moda mujer de oro. Así que asegúrate de que sea, el punto de partida es el mismo con este ítem. Entonces hombres faciales y no queremos tenerlo audaz. Podemos decir que es perno medio y luego podemos decir estas cosas. Entonces estoy en facial y lo haré, podemos hacer una cosa, supongo. Ok. Entonces aquí tenemos esto subrayado. No quiero añadir este subrayado. Por lo que quiero dejarlo de esta manera y luego seguir para agregar esto al botón aquí. Entonces primero vamos a añadir un botón. Entonces voy a tomar esta herramienta de elipse y luego voy a dibujar nuestras vidas aquí. Así que asegúrate de que tenga la misma altura y peso. 46 por 46 rápido, tendré que mirarlo. Cómo se ve, es más grande o más pequeño. Por lo que ahora 4243. Entonces tendré que añadir primero efecto y luego cambiar el color de fondo de éste. Y este va a ser este color de fondo blanco. Y aquí tenemos que añadir un ícono. Así que voy a volver a tomar la mitad de este plug-in llamado iconos de alimentador. Voy a decir, está bien, así que tenemos este icono de flecha derecha e izquierda. Por lo que voy a decir seleccionar este ícono. Y luego voy a seleccionar este ícono y luego arrastrarlo aquí. Voy a arrastrarlo aquí. Y el centro, no estaríamos, vale, así que está dentro de éste. Entonces tenemos este ícono. Y ahora qué puedo hacer? Lo que voy a hacer, les voy a hacer un surco. Puedo decir grupo y luego decir ícono correcto. Y entonces podemos hacer que se duplique. Entonces presiona Comando D. Y luego necesitamos tener un ícono más, que va a quedar icono. Por lo que voy a quitar este ícono de aquí. Y luego voy a seleccionar este ícono izquierdo. Este icono de la izquierda va a aparecer aquí. Y lo voy a poner aquí. Lo mismo. Ahora tenemos nuestro ícono izquierdo y el ícono de paseo. Esta es nuestra flecha a la izquierda. Este es un ícono correcto. Entonces este es nuestro ícono correcto. Este va a ser nuestro ícono izquierdo. Por lo que voy a cambiar el nombre a icono de la izquierda. Icono de la izquierda. Y voy a poner esta flecha a la izquierda dentro de esta ranura. Tenemos este ícono de izquierda y derecha, y luego les voy a hacer un grupo. Por lo que este ícono izquierdo e ícono derecho, hemos seleccionado dos. Puedo nombrar éste y éste, hacerles un grupo. Digamos, podemos decir botón de desplazamiento. De acuerdo, así que ahora estas dos cosas, sólo podemos sumar un punto de partida de este grupo. Se puede ver la línea en el lado izquierdo del texto y en la línea en una cuadrícula. ¿ De acuerdo? Entonces significa que está en la posición perfecta aquí. Por lo que ahora todo lo que necesitamos agregar es opciones de llamada. Entonces cuando el usuario seleccionará éste, queremos mostrar el último fotograma que es decente. De esta manera vamos a poder hacer se llama. Cuando un usuario haga clic en este ítem, queremos mostrarles el primero. Entonces así es como podemos hacer un desplazamiento. Y lo bueno es que en nuestra parte anterior, ya creamos nuestro marco. Por lo que sólo podemos hacer éste fácilmente si tenemos una selección de fotogramas porque el prototipo de prototipado es siempre buscar el marco. Ahora tenemos todos estos marcos son primer marco es éste. Y nuestro último marco es el marco ocho, que es el último. Por lo que cuando un usuario haga clic en este lado derecho, vamos a seleccionar ayuda a fotogramas. Cuando cualquiera haga clic en el lado izquierdo, vamos a seleccionarlos y el fotograma número uno. Entonces esta es la lógica principal aquí. Por lo que ahora vamos a hacer clic en el prototipado y ahora haga clic en los ítems de la derecha. Entonces cuando lo tengamos, cuando tengamos esto. Por lo que ahora se puede ver que por defecto se va a seleccionar todo el grupo, pero tenemos que seleccionar exactamente este botón. Este, botón de icono derecho se puede ver. Por lo que voy a hacer click en él. Y ahora dentro del prototipo donde se necesita hacer click sobre estas interacciones y aquí haga clic en Ninguno. Entonces en lugar de encendido. Entonces cuando el usuario va a hacer onclick, queremos mostrar, queremos mostrar, queremos desplazarnos también. De acuerdo, no llegar a la marina. Normalmente usamos navegar a, para pasar de un lugar a otro lugar. Pero esta vez tenemos que seleccionar un scroll también, porque queremos desplazarnos a donde queremos ir. Queremos desplazarse a nuestra, se puede ver. Nuestro marco donde queremos desplazarnos, queremos desplazarnos es Columba marco número ocho, que es el último elemento. Nuevamente. Antes de seleccionar, permítanme aclararlo. Por lo que vas a la sección prototipo. Selecciona tu botón que quieres mostrar. Después de seleccionar la batuta, se agrega interacción. Agregas estos espectáculos indirectos. Aquí. Lo seleccionas, clic en él, seleccionas un onclick, y después de eso, haces clic en Desplazarse hacia y después de la escuela a donde quieres desplazarte, quieres ir al marco ocho, que es el último elemento de la derecha lado. Y hay que asegurarse de que sea un marco que hicimos en nuestra conferencia anterior. Por lo que voy a hacer click sobre este marco ocho. Y después de eso aquí podrás ver cualquier mención qué tipo de animación quieres tener, quieres animar y luego tienes esta animación aquí. Simplemente se puede decir fácil de entrar y salir, luego disfrazarse o escuchar de lo que tiene, solo puede hacerlo de esta manera. Así que tal vez quieras tener bouncy, tal vez quieras tener lentitud. Mantén la lentitud. Ahora si vuelvo aquí y luego pueden ver que tenemos este ícono ahora. Entonces si hago clic en él, Aquí vamos, están en el último fotograma. Genial. Ahora si hago clic en hacia la izquierda sobre ella no va a funcionar porque no entramos prototipo modelo. Nuestro hisopo es llamada siempre es integral porque lo hicimos antes. Y si hago clic en él, se va a ir por el lado grande. De acuerdo, entonces, ¿qué podemos hacer aquí? Podemos simplemente agregar, simplemente podemos añadir otro prototipo. Por lo que vuelve a seleccionar este ítem y haz clic en él. Vaya a esta sección de clics, seleccione una herramienta de desplazamiento. Y entonces este término va a ser nuestro marco uno. Genial. Y de nuevo, queremos tener algún conocido e íntimo. Va a ser lento. ¿ Qué pasa con el gentil? ¿ Qué quieren decir con gentil? ¿ Zen? De acuerdo, así que vamos a seleccionar éste. Ahora. Estamos en ritmo rápido. Estamos en entonces el último ítem. Ahora si hago clic en él, y luego estamos en el primer marco. Entonces éste está funcionando. Éste está funcionando, y éste está funcionando. Por lo que has aprendido a hacerlo. Entonces creo que gentil significa que te va a dar un poco de animación. Sólo hay un nombre de la animación. Simplemente puedes jugar con éste. Simplemente puedes jugar con este tipo de animación. Al igual que tienen un par de opciones. ¿Cuál? Hormona o lo que prefieras, solo seleccionas cualquiera de ésta, entonces se va a sumar en tu nuestro proyecto. Por lo que hemos agregado con éxito en este diseño. Tenemos este pequeño ícono que diseñará aquí y luego esta moda. Y podemos rastrear a éste de esta manera. También podemos arrastrar éste dentro. Nuestro botón también está funcionando. Muy bien, así que voy a detener este video aquí mismo y continuaremos con la siguiente conferencia. Nos vemos en la próxima conferencia. Adiós adiós. 8. Diseño de tarjetas de moda para hombres: Bienvenido de nuevo una vez más. En esta parte, trataremos de sumar una sección más para la moda masculina. Para eso ante todo, tendré que aumentar el tamaño del mainframe. Entonces voy a simplemente seleccionar éste y luego arrastrarlo. Y ahora tendremos que añadir una textura más. Por lo que voy a duplicar este texto aquí. Entonces voy a decir Comando D, y luego voy a añadir éste aquí. puedas ver que siempre necesitas seguir la línea roja que te mostrará para que puedas entender que está empezando desde el mismo tamaño, desde el mismo, desde el mismo punto de partida. Ahora, se lo voy a decir a la moda masculina. Y después de eso, tendremos tipo similar de diseño de auto con diferente imagen pero deriva. Y esta vez no vamos a mostrar esta opción de desplazamiento. Más bien, vamos a tener que columna, vale, así que primero voy a hacer que sea un duplicado. Entonces no este marco. No necesitamos seleccionar el marco, más bien voy a seleccionar esta tarjeta. Ok. Entonces voy a hacer que sea un duplicado de grupo. Y entonces voy a arrastrar uno más aquí. Y desde el mismo punto de partida que tenemos aquí. Está bien, genial. Por lo que ahora se puede ver que tenemos alguna distancia 37 de la parte superior del título. Y ahora podemos ver que tenemos hombres peces. Y entonces lo que quiero, quiero tener. Entonces más bien aún podemos leer esta imagen, pero después la vamos a cambiar. Así que voy a, lo que voy a hacer, voy a hacer que se duplique. Queremos mostrarnos porque ya tenemos cuatro aquí. Entonces voy a presionar el Comando D y luego cuatro. ¿ De acuerdo? Muy bien, entonces hay un error que hice aquí. En lugar de seleccionar a todo el grupo, solo estaba seleccionando. Entonces, ¿qué puedo hacer ahora? Voy a decir, vamos a cambiarlo a nim. Diré tarjeta de moda para hombres. Ahora voy a hacer un duplicado. Ahora puedo duplicar toda la tarjeta. Y luego tenemos este punto de partida. Entonces haz y hazlo. Muy bien, así que primero voy a hacerles un grupo. Así que hazlos crecer más rápido. Todos estos hombres tarjeta de moda. Y antes de eso, vale, así que tenemos nuestro ordenado. Significa que está a la misma distancia. Se puede ver que 202020. Entonces no tenemos ningún sentido ni nada. Entonces voy a hacerles un grupo. Podemos decir que los hombres hacen una fila. Y entonces voy a hacer que sea un duplicado. Entonces esta va a ser nuestra segunda fila. Lo siento, necesitamos tener, debemos tener este punto de partida desde aquí. Aquí va. Entonces tenemos esta cosa, 202020. Y ahora podemos decir estos hombres de moda. Tenemos aquí este diseño de moda, que va a ser estos hombres de moda. Entonces, vale, así que ahora una cosa que quiero agregar, quiero hacer que estas dos filas en un grupo y ahora podemos darles un esclavo africano. Moda masculina. Podemos decir sección de moda masculina. Y ahora déjame ver si tenemos ordenado. De acuerdo, así que tenemos este ordenado, tenemos 37 distancia. Tenemos nuestra distancia para éste. De acuerdo, así que no tenemos un problema con eso. Muy bien, así que ahora se ve muy bien. Hemos añadido este. Ahora es el momento de agregar múltiples imágenes para estos cuatro ítems. Entonces para eso, voy a seleccionar Vuelva a seleccionar Colocar imagen. Y luego en lugar de hombre o mujer facial, el tallo, voy a seleccionar hombres faciales. Entonces tenemos 448 imagen, así que voy a seleccionar ocho, MS aquí, 2334567, y luego ocho. Ahora lo que voy a tener que hacer, por lo que va a sumar nuestros e-mails aquí y en el momento. Por lo que toma algún tiempo cargar toda la MS Basado en tu velocidad de internet y el tamaño de la imagen. Por lo que en cuanto estén listas nuestras imágenes, deberíamos poder verla en nuestro ratón. Aquí tienes. Ahora tenemos ocho imagen, así que voy a seleccionar, voy a reemplazar esta imagen por ésta. Entonces reemplace esta imagen por ésta. Y para reemplazar esta imagen por ésta, ésta, ésta, ésta, y ésta. Ahora, deberíamos poder ver nuestros e-mails aquí. Tomará algún tiempo o podemos simplemente hacer Refresca ahí. Se va a reemplazar nuestra MS esta imagen principal o minimizar. Por lo que ahora tenemos hombres, faciales y mujeres peces listos. Lo que quiero tener, quiero tener una paginación aquí en el fondo para esta moda de hombre. Entonces tenemos este diseño, tenemos este diseño y tenemos, así que no me gusta esta imagen, así que voy a reemplazar esta imagen. Voy a seleccionar otra foto. Así que voy a decir, voy a seleccionar éste. Creo que hicimos un sumar éste. Y voy a reemplazar esta imagen por ésta. Pero no tiene cara. No obstante, es todavía es mejor. De acuerdo, entonces tenemos esta cosa aquí ahora. Ahora quiero tener aquí nuestra paginación, así que la agregaremos en nuestra próxima parte. Voy a detener este video aquí mismo para ver cuál es la próxima conferencia. 9. Diseño de paginación: Bienvenido de nuevo una vez más. En esta parte, trataremos de sumar nuestra paginación. Hasta ahora hemos hecho este diseño y nuestra aplicación se ve muy bien ahora. Por lo que tenemos esta tarjeta, tenemos esta opción aquí. Y ahora es el momento de sumar nuestra paginación aquí mismo. Entonces para agregar una paginación, trataremos de tomar la salud de nuestra herramienta elipse. Y entonces voy a empezar a diseñar desde este medio de dos artículos. Entonces me voy a llevar ls y desde aquí voy a empezar a diseñar esto. Por lo que tenemos que asegurarnos de que tengamos la misma altura y peso. Entonces podemos decir 35 o tal vez 40, supongo. Lo cambiaremos más tarde, no te preocupes. Por lo que 40 por 40. Ahora déjame ver cómo se ve. Se ve así. Creo que es del tamaño perfecto, así que podemos quedarnos con éste. Voy a añadir efecto aquí. Y entonces voy a cambiar el color a este color blanco. Y ahora tenemos que sumar exactamente la posición. Yo quería tener esta posición. De acuerdo, para que podamos empezar desde esto. Vamos a empezar desde, vamos a empezar desde éste, que es nuestro a d subshell, esta rejilla. Y entonces podemos decir 123456, luego 123456 hasta aquí podemos sumar nuestra paginación. Muy bien, lo haremos. Eso no es un tema. Por lo que ahora voy a añadir, y luego aquí tendremos que añadir un ícono. Por lo que ya tenemos nuestro ícono, que es este ícono, flecha icono izquierdo. Así que voy a, está bien, que podamos directamente, podemos obtener directamente este ícono de nuestro plugin que ya tenemos. Entonces relleno iconos, así que vamos a añadir esto, este ícono aquí. Entonces se va a sumar aquí. Y lo vamos a poner en el centro. Y entonces voy a ponerlo en el centro. Y ahora tenemos este ícono. Entonces Fastow, tendremos que hacerles un grupo. Entonces esta elipse. Antes de hacerlos un grupo, voy a duplicar esta elipse porque necesitamos alguna elipse para nuestras otras opciones. De acuerdo, entonces la cosa es que pude, voy a seleccionar la elipse antes. De acuerdo, así que ahora tenemos estos ascensores. Muy bien, entonces tenemos este texto, tenemos este ícono, y luego tenemos esta elipse aquí. Y aquí tienes. Nieve aquí. Dentro de la elipse, tendremos que agregar un texto, y este texto va a ser uno. Y tendremos que añadir múltiples textos. Pero primero déjame ponerlo en el centro. En el mismo tamaño. Debe estar en el medio. Entonces, lo que voy a hacer, lo voy a poner de esta manera cosa. Aún tenemos que hacerlo. Entonces en lugar de 16, que sea 18. Que sea 18. Muy bien, entonces ahora está en el medio, así que voy a hacer, que sea un grupo también. Entonces no éste. Sólo necesito hacer grupo esta elipse y esta herramienta. Entonces voy a hacer el grupo make. Puedo decir elemento de paginación. Elemento de paginación. Ahora tenemos nuestro artículo, tenemos nuestro siguiente botón, botón Anterior, entonces tenemos nuestro artículo. Ahora voy a duplicar este grupo para que podamos sumar par de, par de botones, par de artículos de paginación, 123 y luego cuatro. Y éste va a ser un punto. Entonces para un ok, así que necesitaremos más en realidad, cuatro, luego cinco, luego 67, y luego el 81. Y entonces esto va a ser nuestros dos y esto va a ser C. Y esto va a ser cuatro, y esto va a ser cinco. Por lo que hay que añadir ci dot aquí, no cinco. Vamos a tener este punto cuatro. Y entonces 54 es, entonces éste va a ser cinco. Y entonces éste va a ser seis. Y Siete y aquí tendremos que hacerlo, aquí no necesitamos tener este texto. Queremos tener este ícono correcto. Por lo que ahora me voy a llevar la salud de esta elipse, lo siento, no los ascensores. Por lo que necesitamos tomar la salud de este plug-in para que podamos agregar nuestro ícono. Por lo que esta vez tendremos que añadir este ícono correcto. Voy a ponerlo en el centro. Y luego lo que voy a tener que hacer, primero ponlo dentro. Y este es el ícono correcto. ¿ Y cuál es la paginación? Tenemos par de artículo de paginación. Por lo que 4321. Y así podemos ver de esta manera, pero deberíamos tener otra elipse aquí por la mala. Debemos tener aquí esta elipse. Entonces, ¿dónde está esta elipse? Entonces éste y este puntos suspensivos. Mírelo aquí. No necesitamos tener este elevadores si elimino éste. De acuerdo, por lo que no deberíamos eliminar éste. Tenemos nuestro cómo este elemento de paginación es este, son estos elementos de paginación. Entonces tenemos este artículo, pero ahora no tenemos, vale, Así que este es nuestro elemento de paginación, así que este es nuestro ícono correcto. Entonces voy a ponerlo dentro de éste. Entonces ahora tenemos esto y esta flecha la izquierda debe estar dentro de esta paginación. Entonces tenemos esta paginación y siete a una. Así que solo estoy buscando este artículo de paginación. Oh, está bien. Por lo que estas dos cosas no están en grupo, así que conviertan en un grupo. ¿ De acuerdo? Por lo que ahora podemos decir artículo de paginación también. De acuerdo, así que ahora voy a seleccionar todos estos elementos de paginación aquí. Y entonces tendré que hacer esto ordenado para que podamos ver que podamos tener la misma distancia. Y entonces podemos ver que sigue siendo, nuestros datos no es Distribuir Horizontal Distribuir espaciado vertical. Y después hemos distribuido horizontalmente desplazándose. Entonces tenemos bien, pero tenemos que hacerlo en el mismo tamaño porque se puede ver que éste no es del mismo tamaño. No necesitas tener esta cosa de esta manera. No necesitas tener esta cosa de esta manera. No queremos tenerlo de esta manera. Entonces, ¿qué tenemos que hacer? Tenemos que asegurarnos de que tenga en la misma esta capa. También podemos aumentar el espacio, pero ahora está bien si tomamos esto, de esta manera, pero aún así tenemos que asegurarnos de que cada ítem sea seleccionado desde la misma distancia. Y de esta manera podemos ajustarlo. Pero después podemos hacer el orden de otra vez. Pero ahora solo me estoy centrando en la misma, ah, misma altura y mismo punto de partida desde arriba y abajo. Ya se puede ver que se ve igual. Y de esta manera podemos. Entonces déjame ponerlo aquí para que no haga ningún problema aquí. Bueno, lo haremos. Por lo que ahora podemos poner el ítem uno por uno aquí. Y entonces podemos asegurarnos de que todo esté perfectamente alineado. Seis, siete. Y luego esto. Por lo que ahora podemos seleccionar todas estas paginación juntas. Y puedo decir df, perfecto. Por lo que ahora tenemos de todo, desde el mismo tamaño. Se puede ver que arrancando la parte superior e inferior y desde cada ítem tenemos la misma distancia. Todo está bien. Ahora tenemos nuestra originación. Ahora una cosa que quiero hacer cambios aquí. Entonces este ítem, quiero cambiar este fondo, este color de fondo, este nuevo color verde, para que signifique que éste está marcado y éste está seleccionado. Y ahora lo tenemos todo desde aquí. Para revisar éste, ¿qué podemos hacer? Básicamente, podemos seleccionar nuestra otra cuadrícula. Tenemos nuestras opciones de grid, ¿verdad? Contamos con nuestra columna principal de rejilla. Por lo que podemos seleccionar, decir sólo para probar propósito. Podemos seleccionar y saludar, y luego puedo seleccionar tardy. Entonces podemos, aquí sólo podemos echarle un vistazo, que todo está partiendo de esta manera, desde el medio de la línea. Vale, así que de esta manera también puedes revisar tu grid para que siempre tengamos, así que esto es lo que tenemos ahora. Otro derecho? Entonces nuestra paginación está hecha. Hemos implementado con éxito nuestra paloma se muestra así como nuestra horizontal se llama Ver, y esta es nuestra cabecera. Y en la siguiente parte, trataremos de diseñar nuestra sección de categoría. Nos vemos en la próxima conferencia. Adiós adiós. 10. Diseño de categorías de moda: Bienvenido de nuevo una vez más. En esta parte, agregaremos nuestra sección de categorías para nuestra aplicación de diseño de moda. Entonces, ante todo, lo que básicamente hacemos, intentaremos diseñar así para que sepas trabajar con el contraste de la imagen. Entonces te voy a mostrar esta cosa. Entonces primero tendremos que tomar la mitad de esta herramienta rectángulo. Entonces voy a añadir esta herramienta de rectángulo. Y antes de eso, necesitaremos agregar nuestro texto aquí. Entonces primero voy a duplicar este texto aquí, este título. Voy a duplicar éste, y voy a rastrearlo aquí. Entonces exactamente el mismo punto de partida que queremos tener. Tal vez aquí. Y puedo decir éste, ¿de acuerdo? O podemos tomar un poco más de espacio desde la parte superior. Puedo decir elegir categoría. Por lo que podemos decir Elegir Categoría. Y entonces vamos a tener el mismo diseño. Así que elige categoría. Y luego queremos tener un rectángulo aquí. Entonces voy a añadir aquí este rectángulo y luego añadir, lo siento, necesitamos este tamaño, tamaño normal. Y luego tenemos esta categoría. Para que podamos rastrear un poco más. Y entonces queremos tener esta categoría, estos dentro de este rectángulo. Y aquí vamos. Entonces tenemos esta opción ahora, pero estábamos preparados a un color para éste, que es este color. Por lo que quiero añadir este color para esta categoría de fondo. Y después de eso, tendremos que añadir nuestro rectángulo para sumar nuestra imagen de categoría. Así que voy a añadir este tamaño y asegurarme de que, vale, Primero déjame añadir, déjame añadir algún margen aquí. Entonces frontera radio aquí, así que cinco. Y veamos cómo se ve. A lo mejor podemos intentar sumar diez. Aquí tienes. Y entonces sólo podemos seleccionar la tarjeta desde aquí. Y esta es la tarjeta. Ahora queremos sumar. Así que voy a decir, voy a hacerlo, para que pueda cambiar el nombre de éste. Puedo decir Categoría, Categoría tarjeta media. Entonces di tarjeta de elemento de categoría. Y ahora quiero duplicar éste. Queremos tener queremos tener este tipo de y asegurarnos de que tengamos el mismo punto de partida y final. Entonces este va a ser nuestro punto de partida y final. Entonces podemos hacer esta cosa 43. Vale, entonces tenemos ahora cuarenta y tres, cuarenta y tres, cuarenta y tres. Y nuestro inicio y final en el lado izquierdo es lo mismo. Entonces tenemos este punto. Entonces si selecciono éste, puedo ver que este símbolo rojo está conectado a éste. Y éste también está conectado. De acuerdo, entonces ahora lo que voy a hacer, voy a seleccionar toda esta tarjeta rectángulo, no descartar. Voy a hacerles un grupo, y después voy a hacerlo no necesitamos hacer orden porque ya es que ya tiene la misma distancia. Entonces voy a duplicarlo. Y luego voy a sumar, voy a sumar aquí una fila más. Y déjame hacerlo, está en lo mismo. Entonces si ves este símbolo rojo, entonces está en el mismo desde arriba y abajo. ¿ De acuerdo? Entonces ahora estos dos, voy a hacerles un grupo. Entonces sólo puedo reorganizarlo. Está bien, genial. Perfecto. Por lo que lo necesito en el centro de este ítem. Por lo que ahora tenemos estos 44 o cuatro artículos. Ahora lo que voy a hacer, voy a seleccionar MAS para estos cuatro ítems para colocar imágenes. Y entonces en lugar de éste, voy a decir categoría de moda. Tenemos 36. Vamos a seleccionar esto. Vamos a seleccionar estos todos. Y vamos a sumar dos diferentes, tengo dos alma famosa diferente. Se va a llevar algún tiempo sumar este. Todavía se está cargando. Y ahora tenemos seis. Por lo que quiero presionar este aquí. Quiero presionar este aquí. Quiero añadir este aquí. Quiero añadir este aquí. Este de aquí, alguien aquí. Muy bien, así que todavía necesitamos imagen, así que voy a colocar imagen. Voy a ir a esta carpeta. Voy a sumar. Voy a seleccionar esto. Y voy a seleccionar esto. Y entonces voy a presionarlo aquí. Entonces esto, y esto. Genial. Por lo que ahora deberíamos poder ver nuestras cuatro imágenes. Ahora encima de las imágenes, quiero agregar texto. Entonces para eso, lo que quiero tener, este es nuestro grupo, y este es nuestro viejo grupo, ¿ verdad? Así creció cuatro. Nosotros tenemos, y tenemos este grupo. Y tenemos estos correos electrónicos. ¿ De acuerdo? Por lo que ahora tenemos esta imagen. Entonces tenemos esta imagen, esta imagen. Entonces si seleccionas esta imagen y entonces tendrá una opción para cambiar el contraste de MS. Vale, entonces lo tienes, como si tuviera mucha funcionalidad que solo puedes probar en base a tu, solo puedes cambiar la asociación de exposición. Par de otras opciones que tienen. De esta manera, solo se puede azar el diseño principal del EMS agregue color de fondo o cualquier cosa. Puedes hacerlo de esta manera. Por lo que voy a aumentar el contraste. Y para éste, también voy a cambiar el contraste. Necesito cambiar. De acuerdo, así que por alguna razón éste no está seleccionado. Por lo que voy a seleccionar esta imagen aquí y también cambiar el contraste de ésta de esta manera. Y luego selecciona éste aquí. Y voy a cambiar el contraste de ésta y esta exposición para que se vea un poco oscura. Y vamos a poner nuestro texto aquí. Entonces éste va a ser éste. Y aquí vamos, tenemos éste. Entonces nuestro contraste va a verse así. Y estos son los cuatro. Y aquí tenemos otros MAs. Y para esta imagen, voy a seleccionar este contraste así. Estas imágenes. Tenemos que añadir esto, no este mes. Y luego tenemos esta imagen. Y entonces tenemos estos zapatos. Muy bien, entonces tenemos todo esto ahora. Por lo que sólo podemos agregar el texto aquí. Entonces voy a presionar el texto aquí encima de éste. Puedo decir vestido de novia. Ahora, no lo hace. Éste no es visible en absoluto. Entonces, ¿qué tenemos que hacer? Tendremos que cambiar el color a blanco para éste. Pero sigue siendo, no es factible. Entonces, ¿qué podemos hacer ahora? Podemos simplemente cambiar el contraste de imagen de este ítem para que sea visible. Ahora, se puede ver eso. Por lo que podemos decir un vestido de novia. Y entonces para éste, necesitaremos un texto más. Entonces, en realidad, ¿qué puedo hacer? Básicamente podemos duplicar este texto. Y entonces voy a ponerlo aquí. Puedo decir chaqueta de invierno. Por lo que puedo decir chaqueta de invierno y es visible. Y entonces puedo decir zapatos. Y entonces tenemos éste. Por lo que tenemos que cambiar esto a zapatos. Así que voy a decir zapatos. Y debería ponerlo en el centro. Y el centro, tenemos espectáculos pero no es visible. Entonces voy a añadir un poco más de contraste y el poco oscuro para que sea un símbolo vivo. Entonces zapatos. Y luego para éste, puedo decir, oh, creo que necesito hacerla más oscura. Por lo que voy a duplicar este texto aquí. Entonces voy a arrastrarlo aquí y asegurarme de que lo sea. Puedo decir una chaqueta de invierno. Muy bien, entonces tenemos nuestra Camiseta para ese arte del plato. Voy a duplicar este texto y después tenemos que sumar, voy a decir una camiseta. Pero no se ve bien aquí tenemos dos. Nuevamente, tenemos que cambiar este contraste en éste solo para hacerlo un poco oscuro. Genial. Este es el contraste, entonces este es el gráfico normal. Creo que necesitamos genes éste aquí. Y aquí vamos, tenemos este humor. Y voy a cambiar este duplicado. Y entonces tenemos éste, fragmento. Y luego tenemos otra, otra categoría aquí. Pero no cambié el contraste, supongo que más. Entonces tendré que Meca esto. Y entonces puedo decir, duplique éste. Esta puedo añadir a nuestra camiseta de invierno. Sólo estoy agregando un nombre aleatorio. Y luego tenemos otro que va a poder calzar. Y entonces podemos decir zapatos térmicos. Tenemos que hacerlo un poco de contraste. Aquí va. Por lo que tenemos nuestras categorías listas ahora. Muy bien, Así que has aprendido a agregar imágenes encima de los correos electrónicos. ¿ Cómo podemos enviar mensajes de texto? Y entonces sabes que ¿cómo puedes sumar el contraste? Entonces este fue el principal propósito de mostrarte ¿cómo puedes agregar en éste? Por lo que voy a detener este video justo aquí y seguiremos con desde la próxima conferencia. Nos vemos en la próxima conferencia. Adiós. 11. Diseño de sección de boletines: Bienvenido de nuevo una vez más. En esta parte, vamos a tratar de agregar suscripción que he mostrado en nuestro diseño similar a éste. Resuelve para eso. Entonces, ¿qué tenemos? Básicamente tenemos éste aquí. Muy bien, así que en primer lugar, voy a aumentar el tamaño del marco u horizontalmente para que agreguemos, podemos agregar más opciones aquí. Ahora tenemos que tomar aquí la mitad de este rectángulo. Voy a dibujar un rectángulo aquí. Y este es el rectángulo que quiero diseñar aquí. Y luego veamos cómo se ve. Entonces tenemos este tamaño de rectángulo. Puedo disminuirlo un poco y luego tenemos este tema aquí. Por lo que voy a seleccionar este color también. Y después de eso, necesitamos agregar a una imagen aquí. Para eso, quiero agregar, quiero dibujar aquí un rectángulo para poner aquí nuestros e-mails. Por lo que quiero añadir a un rectángulo aquí. Y lo que quiero tener, quiero añadir poco diseño aquí. Así que haz doble clic. Por lo que quiero tener esto. Tenemos que seleccionar este aquí de esta manera, y aquí también de esta manera. Y el medio. Y aquí también de esta manera. Y después de eso, quiero añadir poquito de radio de agua 20 pixel. Y álcalis. Hacerlo. Entonces agrega lo que sea, 20 pixeles. Veamos cómo se ve. Se ve así. Ahora quiero pegar nuestros e-mails aquí. Así que por favor una imagen. Y vemos lío quiero pegar aquí, puedo pegar éste. Y en cuanto tengamos éste. Y deberíamos poder ver nuestra imagen aquí. Muy bien, por lo que también tenemos un campo de entrada aquí y luego un título. Entonces tenemos éste. Por lo que voy a añadir rápidamente un texto aquí. Y puedo decir suscribirse a carta de noticias. Por lo que tenemos este tema aquí. Podemos decir suscribirse a nuestro boletín. Y así voy a aumentar el tamaño de fuente de ésta. Debe ser de 30 a un poco más grande. Y voy a cambiar la fuente, darle estilo a ésta. Este no. Voy a añadir algo como éste. No exactamente éste. Se ve bien, pero no es factible totalmente. Por lo que vamos a seleccionar algo más hasta que podamos elegir éste, subíndice dos boletín. Y aquí tenemos dos diseño más, que es estos dos diseño que teníamos antes. Entonces, lo que es básicamente es golpear nuestro diseño de elipse que teníamos. Entonces voy a duplicar éste. Entonces, ¿dónde está este diseño de la elipse de cabecera? Por lo que este diseño de la elipse de cabecera está aquí. Entonces tenemos que subir. Entonces tenemos que subir y bajar. Entonces esta es nuestra principal ilustración que diseñamos antes. Entonces, lo que voy a hacer básicamente voy a hacer de ellos un componente. Así que haga clic con el botón derecho y luego cree componente, de acuerdo, Para que podamos reutilizarlo. Por lo que ahora está dentro de nuestro activo. Está dentro de nuestro activo. De acuerdo, entonces tenemos esta cosa. Así que lo que voy a hacer, sólo voy a duplicar, sólo voy a arrastrarlo aquí. Voy a simplemente arrastrarlo aquí. Y luego otra vez, voy a simplemente arrastrarlo aquí. Y tenemos nuestro boletín y poco por aquí. Y luego voy a añadir a un rectángulo aquí para agregar el texto aquí. Entonces voy a añadir el texto aquí para nuestra suscripción, para nuestro botón. Por lo que debería verse así. Después a los 20. Y entonces voy a elegir éste. Voy a añadir esta tiza. Entonces, ¿qué tenemos básicamente aquí tenemos este resultado. Aquí no tenemos ningún derrame cerebral. Entonces no necesitamos tener ningún derrame cerebral aquí. Entonces tenemos 20, creo. En lugar de 20, agreguemos fiesta. Por lo que ahora tenemos este diseño tardy. Y voy a duplicar éste. Y voy a la casualidad el tamaño del segundo botón. Y lo voy a fusionar con éste. Tan rápido, cambia el fondo de éste para que sepamos básicamente lo que estamos diseñando. Entonces esto es todos los botones posteriores. Entonces así es como luce nuestro segundo botón que solo lo duplique. Así que solo duplique el mismo botón aquí y luego plegado en la parte superior. Ahora tenemos éste aquí. Creo que necesitamos aumentar, necesitamos aumentar nuestra necesidad de aumentar nuestro este lado inferior. Por lo que solo puedes aumentar un poco en este tamaño y este lado. Y aquí tenemos un texto que va a ser nuestro texto de placeholder. Y éste va a ser de 12 píxeles. Mucho más que eso. Voy a ponerlo aquí. Entonces correo electrónico. Y entonces quiero añadir a un ícono de nuestro ícono que se llama r. podemos decir icono centavo. Y sólo en shock aquí. Ponlo aquí. También agrega solo el texto y el centro. Y déjame así que esté fuera del marco, por lo que debe estar dentro del marco. Ahora tenemos nuestro ícono y tenemos nuestros textos. Por lo que puedo sumar un poco más cerca de éste. Aquí vamos. Tenemos este e-mail, tenemos esto. Ahora tenemos este texto aquí. Tendremos que añadir botón suscribirse. Y lo voy a seleccionar a 16. Podemos seleccionarlo 20, supongo que tan veinte o descender tamaño de fuente para este tipo de botón. Por lo que podemos decir suscribirse aquí. Genial, tenemos esto, esto, y ¿por qué tenemos que solucionar este problema aquí? Por lo que necesitamos añadirlo de esta manera. Y luego tenemos nuestra imagen, tenemos nuestro este diseño, nuestra suscripción, y luego este texto quiero añadir aquí. Y podemos sumar. Y voy a duplicar este texto aquí. Y para éste, voy a hacer que el tamaño de la fuente sea 216. Y aquí voy a añadir otro texto. Yo puedo decir. Llegarás lejos y descuento por promoción por correo electrónico. Por lo que obtendrá oferta con descuento por promoción por correo electrónico. Hay ocho para éste. Por lo que tenemos nuestra suscripción, vamos a conseguir los cuatro y descuento por promoción por correo electrónico. Este es nuestro boletín. Es sólo el boletín básico. Muy bien, por lo que hemos diseñado nuestra parte de suscripción hasta ahora. Y en la próxima conferencia trataremos de hacer otra cosa. Entonces nos vemos en la próxima conferencia. Adiós adiós. 12. Diseño de sección de pie de página: Bienvenido de nuevo una vez más. En esta parte, diseñaremos nuestra sección de fotos para eso, tendré que aumentar un poco más el tamaño del marco. Muy bien, entonces en nuestro pie de página tenemos este tipo de diseño. Por lo que tenemos nuestro, tenemos nuestros dos artículos, por lo que producto y luego información sobre poca información y luego ícono social. Tan rápido voy a diseñar este rectángulo aquí. Y luego voy a dibujar este rectángulo porque necesitamos un rectángulo para agregar nuestro artículo aquí. Y veamos cómo se ve. Cómo se ve básicamente el blanco. Entonces debería ser esto. Entonces estas áreas blancas, de acuerdo, así que voy a añadir el color del fondo. Sólo soy carpeta. Entonces se ve así. Entonces este es nuestro pie de página. Ahora vamos a añadir nuestro, vamos a añadir nuestro ítem a una carpeta. Entonces primero vamos a sumar nuestro título y podemos decir que podemos ver que esta es la aplicación eficiente. Y se puede decir, todos los hombres se visten. Sólo un nombre aleatorio que solo estoy agregando. No debe ser significativo. El propósito principal es mostrar ese texto. Entonces vamos a empezar nuestro artículo desde aquí, naranjas. Y luego voy a, voy a duplicarlo. Y para este texto va a ser de 16 píxeles, o tal vez 15 pixel. Aquí puedo decir eso. Puedo decir vestido de novia. Entonces podemos decir vestido de fiesta, DJs. Y entonces puedo decir, podemos decir una colección de invierno, colección ventanas. Y entonces voy a añadir un texto más aquí y voy a decir los zapatos de alguien. Muy bien, así que tenemos esta cosa. Así que voy a, echemos un vistazo. Tan rápido, selecciona todas estas cosas, hazlas un grupo. Y aquí tienes. Entonces no necesitamos una buena idea porque ya está en la misma distancia que tenemos. Entonces, ¿ahora qué puedo hacer aquí? Básicamente, podemos hacerles un grupo. Y entonces voy a duplicar éste. Y entonces tendré que duplicarlo para este ítem. Y entonces puedo decir vestido de niño. Y luego tenemos otra información y el texto y el lado derecho. Por lo que voy a seleccionar el texto aquí, y voy a añadir el texto aquí que podemos decir sobre. Y aquí vamos. Podemos sumar estos sobre desde aquí. Y esto sobre tamaño va a estar en este lado es de 20, ¿verdad? Entonces éste es también 20. Y aquí quieres agregar información segundos, dice Loren Ipsum. Sólo quiero agregar algún texto ficticio aquí. Entonces para agregar texto ficticio. Y podemos tomar, solo puedes agregar este texto ficticio aquí. Entonces esto y esto. Por lo que tenemos este texto aquí. Y luego voy a dibujar, por lo que sólo hay que seleccionar la herramienta Texto y luego dibujar esta inflamación de esta manera. Para que este lado, para que sea lo que pegues aquí, APR dentro de esta, dentro de esta opción. Pero en lugar de 15, por lo que 20 hacemos Agregar Seleccionado 12. Y entonces sólo funcionará. O podemos hacer una cosa, podemos darle un paso atrás aquí, y luego puedo hacerlo hacerlo aquí. Entonces tenemos nuestro acerca, tenemos nuestra información, pero aún así tenemos que sumar solo este poquito. Creo que desde aquí podemos ajustarlo. Genial. Entonces tenemos éste y en la parte inferior tenemos icono shri para éste. Por lo que quiero diseñar este ícono de esta manera. Entonces no voy a rectángulo, voy a tomar la herramienta elipse. Entonces voy a agregar esta herramienta elipse de esta manera y luego definir la herramienta Elipse 40 por 4040, y luego 40. Y veamos cómo se ve. Entonces se ve así. Así que tenemos este 40 y luego voy, voy a duplicarlo. Selección duplicada. Entonces, ¿cuántos iconos tenemos? Tenemos nuestros cuatro iconos. Tenemos cuatro iconos. Así que lo voy a duplicar cuatro veces tres y los cuatro y convertirlos en un grupo. Todo este rubro, crecimiento económico. Se puede decir, podemos decir como ir. Y déjame ver, vale, así que tenemos la misma distancia y ahora voy a cambiar el color de fondo de éste. Podemos seleccionar este color. Y ahora dentro de esto, tendremos que agregar nuestra fuente de ícono social que voy a tomar iconos del ícono de alimentador. Y voy a decir, voy a decir Facebook. Voy a decir Facebook. Por lo que tendré que seleccionar todo este Facebook. Necesito seleccionar éste dentro de esto. Y lo voy a llevar dentro. Entonces nuestro Facebook está aquí. Y entonces tenemos que sumar en estrella. Así que voy a seleccionar este instar, ponerlo dentro de este marco, y luego arrastrar el ícono de Instagram dentro de este. Por lo que ahora tenemos nuestro ícono de Instagram, pero creemos que necesitamos ponerlo en el centro de esta manera. Sí. Ahora tenemos nuestro LinkedIn. Entonces tenemos nuestro LinkedIn de esta manera. Y entonces necesito ponerlo dentro del marco. Y luego después de eso tenemos ícono de Twitter. Entonces voy a ver Twitter. Por lo que Twitter va a aparecer aquí y luego ponerlo dentro. Antes de eso, ponlo aquí. Y luego aquí vamos. Entonces tenemos todo nuestro ícono. Por lo que hemos diseñado con éxito nuestro pie de página es sólo un alimento o artículo básico. Y voy a detener este video aquí mismo. Y en la próxima conferencia, trataremos diseñar nuestra inscripción e inicio de sesión. Nos vemos en la próxima conferencia. Adiós. 13. Inscríbete en el diseño de página: Bienvenido de nuevo una vez más. Hasta ahora hemos diseñado nuestra página principal. Hemos diseñado nuestro pie de página, nuestra parte de boletín de suscripción, nuestra sección de categoría sobre paginación, sección de moda, este origen a la vista de desplazamiento. Y ahora tendremos que hacer dos cosas más. Uno es para la página de inscripción e inicio de sesión. Y otra cosa es que al hacer doble clic en él, les mostraremos una caja modal emergente como este tipo de tarjeta. Y también implementaremos este tipo de visión de alcance horizontal que hicimos antes. Y entonces lo haremos, tendremos que diseñar esta cosa también. Así que para eso, primero, voy a completar esta página de registro e inicio de sesión. Entonces vamos a mirar en él. Y ahora tenemos nuestra sección de diseño aquí. Por lo que para eso para agregar características de inscripción e inicio de sesión, tendremos que crear nuestro marco diferente para nuestro inicio de sesión de inscripción. Y trataré de mostrar un diseño de pantalla más. Entonces esta es nuestra materia de mazo. Ahora voy a seleccionar un marco más. Entonces vamos a configurar de escritorio. Voy a cambiar el nombre, lo voy a decir en casa. La pieza principal. Ahora voy a seleccionar un marco. Y ahora esta vez voy a dibujar nuestro marco personalizado. Entonces voy a dibujar un marco personalizado. Para que puedas dibujar un marco personalizado. Voy a dibujarlo en este tamaño. Por lo que agregaremos un EMS y luego agregaremos nuestra información. Así que voy a hacerlo en este tamaño. Sí. Así que voy a decir que se apague. Voy a añadir un radio de frontera a píxel. Y no tratando de arreglar eso, supongo que puedo arreglar que este píxel sea suficiente para éste. Y aquí voy a añadir un rectángulo más. Aquí, o un ángulo indirecto. Mostraremos nuestra MS Así que quiero, lo haré algún rectángulo para que podamos ajustarlo con los lados izquierdo. Y ahora desde aquí, ¿qué podemos hacer? Así que voy a hacer que sea poco esto. Y ahora tendré que sumar el MS en esta parte. Entonces, ¿qué puedo hacer? Tratemos de agregar esta MS. Vamos a seleccionar esta imagen. Y ahora, así que voy a pegar esta imagen aquí. De acuerdo, entonces, ¿qué más tenemos? Tenemos alguna otra compra asombra? A lo mejor podemos probar este EMS y vamos a ver. Oh, este no. Voy a quedarme con la anterior. Y aquí tenemos que agregar un texto y este texto va a ser sine de sign-off. Entonces, y después tendremos que sumar esto a 20 o tal vez 24. Y entonces voy a cambiar el color a, voy a añadir un color que tenemos, todos, el oscuro que tenemos. Entonces creo que hay un color verde oscuro y preconstruido. Entonces voy a quedarme con éste. Y entonces aquí también necesitamos, ahora podemos pulir nuestra rejilla para que sepamos eso exactamente desde donde empezamos. Por lo que tenemos nuestra rejilla preconstruida. Entonces, ¿puedo hacer ahora? Entonces este es nuestro texto. Entonces voy a ponerlo aquí. Por lo que vamos a empezar a diseñar nuestros artículos a partir de esto. Genial, está bien, así que voy a seleccionar nuestro rectángulo aquí, y aquí, vamos a tener que, tendremos que dibujar nuestro campo de entrada. Voy a añadir border-radio en dos píxeles. Y tenemos que sumar aquí nuestra frontera. Entonces en la frontera un píxel. Y antes de eso, permítanme correr éste y veamos cómo se ve para que sepamos exactamente dónde necesitamos hacer cambios. Entonces tenemos éste y lleva algún tiempo hacer esto. Muy bien, entonces tenemos este diseño, así que voy a cambiar el fondo de éste. Voy a hacerla blanca. Y entonces tenemos este blanco. Y dentro de estos voy a poner un nombre. Voy a decir, poner un texto aquí. Voy a decir nombre. Nombre va a ser este nombre. Y en lugar de 24 y va a ser 12, va a ser 12. Tenemos que ajustar éste. Entonces este nombre y este rectángulo, voy a hacer grupo. Y luego voy a hacer un duplicado. Por lo que necesitamos tener dos ítem, dos artículos más. Entonces uno es para correo electrónico, uno es para contraseña, y también necesitamos uno para nuestro botón. Y antes botón necesitamos otro artículo. Entonces voy a decir nombre y ahora voy a cambiar el texto, así que nombre. Y entonces este va a ser nuestro E-mail, va a ser nuestro email, y esta va a ser nuestra contraseña. Todos estos son de Marcador de posición, texto de Marcador de posición. Entonces contraseña y éste va a ser nuestro texto, pero este texto va a estar aquí. Así que voy, voy a cambiar, quitar esto toma de aquí. Y para éste, no necesitamos tener ninguna frontera. Por lo que necesitamos tener nuestro color de fondo, que es este color. Y ahora necesito poner aquí este texto. Y aquí podemos decir que cierre la sesión. Muy bien, y puedo ponerlo aquí. Por lo que quiero aumentar el tamaño de fuente de este texto. Entonces voy a añadirlo, supongo, y luego solo puedo asegurarme de que esté en el centro. Ahora tenemos nuestra firma y podemos añadir nuestro ícono aquí. Así que voy a seleccionar el ícono Filtrar aquí. Voy a añadir este ícono. Así que sólo voy a arrastrar éste aquí. Y voy a cambiar este color a blanco y ponerlo en el marco. Muy bien, así que tenemos nuestra sign-off, tenemos nuestra página de inscripción. Y aquí quiero añadir a un botón de Acuerdo que muchas veces vemos con términos y condición. Por lo que tenemos este término y condición. Y aquí vamos. Y podemos sumar un pequeño radio fronterizo. Por lo que puedo sumar a este radio fronterizo 1010. Puedo sumar este radio fronterizo cinco. Y así es como va a verse. El derecho. Entonces tenemos esta paginación y creo que podemos añadir un icono aquí, que va a ser nuestro icono Don o selecto ícono. Entonces no hay ningún icono para éste. Entonces no hay ningún icono para esto. Ok. Entonces hay ícono. Estaba buscando éste que se llama Check ícono. Sí. Muy bien. Este es el nombre de éste. Y voy a poner este ícono dentro de esta caja. Muy bien, por lo que nuestra página de inscripción está lista, y ahora tenemos que agregar un texto más aquí. Por lo que voy a seleccionar texto aquí. Puedo escribir aquí en texto, puedo decir que ya tengo una cuenta, luego inicie sesión aquí. Por lo que ya tiene un inicio de sesión de cuenta aquí. Por lo que si ya estás ya tienen una cuenta, entonces pueden iniciar sesión haciendo clic aquí. Y si no tienen diez, podemos enviarlos a ritmo de cierre de sesión. Así que ahora voy a, um, vale, así que nuestra base de inscripción hecha, y voy a detener este video aquí mismo, y seguiremos con la siguiente conferencia. Nos vemos en la próxima conferencia. Adiós. 14. Inicia sesión y diseño de página de OTP: Bienvenido de nuevo una vez más. En esta parte, diseñaremos nuestra pasta de inicio de sesión y nuestro diseño basado en ODP. Por lo que necesitamos tipo similar de diseño para nuestra página de inicio de sesión. Entonces, lo que voy a hacer, voy a seleccionar este marco. Y luego voy a duplicar este fotograma. De acuerdo, así que ahora voy a hacer que la página de inicio de sesión. Ok. Entonces te voy a hacer que te voy a decir iniciar sesión. Y también voy a cambiar el texto para firmar. Y entonces voy a cambiar esto. Quita este más bien. Voy a añadir esta cosa aquí. Y también voy a añadir esta cosa aquí. Y no necesitamos tener éste aquí. No necesitamos tener este aquí. Entonces, está bien, así que tenemos este aquí, para que podamos rastrearlo aquí. Podemos empezar desde aquí. Creo que podemos simplemente reorganizar este. También puedes arrastrar éste aquí. Por lo que mantienen 34. Y voy a poner este texto aquí. Para que pueda decir aquí, no tenga cuenta. Puedo decir que no tengas cuenta. Entonces puedo decir que puedo decir firmar aquí. Y éste va a ser sinusoidal. Muy bien, entonces terminamos con nuestra base de inicio de sesión, y ahora necesitamos otro diseño para nuestra OTP. Entonces voy a duplicarlo. Entonces tenemos nuestra fase de inicio de sesión y tenemos nuestro inicio de sesión. Ahora, todo va a ser nuestro RTP, ODP. Entonces aquí no necesitamos tener éste. No necesitamos tener éste. Pero aún así, necesitamos tener un botón aquí en lugar de este texto. Podemos, Ok, creo que podemos mantener este texto aquí. Puedes, simplemente puedo escribir aquí o la p que va a estar bien. Entonces todos los P aquí. Por lo que aquí va a ser donde paga OTP. Aquí. Voy a cambiar que se lleve a la verificación. Puedo decir verificar. Por lo que voy a decir verificar. Esto va a ser lo que texto. Aquí quiero añadir para caja de rectángulo para nuestra OTP que necesitamos poner. Así que voy a decir este tamaño. Y voy a añadir este color blanco. Y luego voy a sombrear. Y luego un golpe. Sí, un poco de radio fronterizo, tal vez diez píxeles, no diez píxeles, cinco píxeles. Y vamos a correr y veamos cómo se ve. Hasta el momento. Tenemos nuestra página de inicio de sesión de registro. Entonces esta es nuestra OTP paga y se ve así. Está bien. No necesitamos tener este texto aquí. Así que ahora solo necesito duplicar éste un par de veces. Entonces voy a añadirlo. De acuerdo, entonces tenemos que hacer un duplicado. Y luego 23456. Por lo que tenemos 61 y después podemos ver verificación, de acuerdo. En cuanto los verifíquelo, los enviaremos a la página de inicio. Muy bien, así que hemos diseñado nuestro ritmo de inicio de sesión, nuestro inicio de sesión paga, nuestro ritmo de diseño. Y hasta ahora hemos diseñado tantas cosas. Y así tenemos jugadores de OTP inicio de sesión página de registro, ritmo y homebase. Y luego la siguiente parte, vamos a tratar de diseñar esta caja modelo y también tendremos que sumar nuestro prototipado. Nos vemos en la próxima conferencia. Adiós adiós. 15. Diseño de cajas modales: Bienvenido de nuevo una vez más. En esta parte, trataremos de diseñar nuestra caja modelo para nuestro artículo. Para eso, voy a crear una primera vez, necesito crear aquí nuestro marco personalizado. Por lo que voy a seleccionar un marco aquí. Y puedo decir, este es nuestro marco. Sí, podemos hacer este tamaño y luego voy a añadir border-radio diez. Y este nombre de marco va a ser, puedo decir lo que puedo decir. Puedo decir bulbos modelo de artículo. Muy bien, así que ahora quiero agregar imagen. Para eso. Necesito agregar un rectángulo primero. Y este es nuestro rectángulo que quiero sumar diez. Vale, entonces tenemos este rectángulo y lo voy a duplicar. Voy a añadir uno más aquí. Entonces voy a sumar dos. Vale, vamos, pongámoslo en el mismo tamaño. Ahora, yo rápido, quiero añadir dos imágenes aquí. Entonces lo que voy a añadir, voy a tener que añadir a EMS aquí. Voy a seleccionar éste y éste. Y pongámoslo primero aquí. Entonces éste está aquí y éste. Por lo que estos son los dos EMS. Y como ya te dije cómo hacer esto, desplazándote, ya lo sabes. Entonces lo que vamos a aplicar las mismas técnicas tan rápido. Quiero hacer, convertirlo en un fragmento, fragmento, convertirlo en un marco. Entonces este va a ser un marco nueve. Y este va a ser nuestro de marco, fotograma número diez. Pero si lo desea, también puede cambiar el nombre porque este número viene de todo el proyecto. O en nuestra otra, en nuestra página de inicio, hicimos ocho marcos. Entonces como resultado, va a partir de las nueve y luego diez. De acuerdo, entonces ahora tendré que hacerles un grupo. Entonces voy a combinar, lo siento, necesitamos hacerlos en un grupo, que va a ser nuestro grupo, elefante de nuevo. De acuerdo, entonces ahora lo que tenemos que hacer básicamente, así que tenemos que hacer click en este contenido de clip y luego necesitamos dimensionarlo hasta este pequeño espacio aquí. ¿ De acuerdo? Entonces tenemos estas cosas y está bien, así que otra cosa que olvidé agregar, déjame agregarla rápido. Tan rápido, vamos a seleccionar éste. Olvidé agregar este efecto, así que vamos a añadir este efecto aquí primero. Y si lo ejecutamos, también podemos correr éste de esta manera para que podamos verlo. Entonces tenemos nuestro marco. Y yo, combinamos todos estos en un solo marco. Y luego está bien, Así que se ve bien. De acuerdo, entonces hay un tema aquí. Este no tiene frontera para, quiero decir, para éste. Entonces si miramos aquí, si miro este fotograma número diez, y éste es el fotograma número diez, pero este marco no tiene bordes, por lo que necesitamos agregar agua a este marco para que tengamos exactamente lo mismo. De acuerdo, entonces selecciona el marco y agrega border-radio aquí, no el borde. Por lo que tenemos estos dos limitada-radio. Muy bien, por lo que ahora podemos seleccionar nuestro mainframe para estos dos. Por lo que luego da click en el portapapeles y luego hazlo de esta manera. Ahora ve a este prototipado. Y aquí en desplazamiento horizontal, ahora, deberíamos poder ver, deberíamos poder desplazar nuestro artículo ahora mismo necesitamos poner estos para hacer el artículo aquí, al botón aquí. Por lo que ya tenemos nuestro botón listo. Por lo que sólo podemos reutilizarlo. Reutilizarlo. ¿Qué podemos hacer? ¿ Dónde están nuestros botones? Entonces tenemos nuestro hogar. Y permítanme minimizar esto para que sepamos dónde está nuestro botón. Por lo que tenemos nuestro artículo de paginación, tenemos nuestra tarjeta de moda marco, y tenemos nuestra sección principal, sección rectángulo de paginación. Por lo sección principal. Estas son las dos cosas que tenemos. Tenemos ícono derecho, nos queda ícono. De acuerdo, entonces, ¿qué podemos hacer aquí? Para que podamos duplicarlo y luego puedes arrastrar un icono. Podemos arrastrarlo desde aquí. En realidad, voy a deshacer éste. Voy a deshacer este aquí. Ojalá no hayamos roto nada. Ojalá no hayamos roto nada. Ok. Aquí todo está bien. Entonces, lo que voy a hacer básicamente, voy a hacerlo donde está. Entonces voy a convertirlo en un componente para que podamos reutilizarlo. Entonces crea componente y se va a crear el icono izquierdo. Componente. Muy bien, ahora no necesitamos arrastrarlo y soltarlo desde aquí. Podemos hacerlo directamente desde nuestro componente, desde nuestro activo. Entonces tenemos nuestro ícono izquierdo, así que voy a arrastrarlo icono de la derecha. Voy a arrastrarlo aquí. Y luego tenemos nuestro ícono izquierdo. Así que voy a arrastrarlo aquí. Qué fácil es, así que no necesitamos hacer lo mismo una y otra vez. Y ahora otra cosa es que necesitamos ponerlo dentro de nuestra caja. De acuerdo, para que podamos asegurarnos de que tenemos, son exactamente la misma distancia aquí. Y también necesitamos agregar éste de este tamaño. Para que podamos hacerlo de esta talla. Y déjame ver cómo se ve. Entonces se ve así. Vale, así que tenemos que disculparnos. Creo que hemos cometido algún error aquí, así que voy a ponerlo aquí. De acuerdo, entonces tenemos ahora la misma distancia de este tamaño y también el punto de partida es mismo. Asegúrate de que tengamos esta cosa. Por lo que tenemos punto de partida semi. Ahora, si me paso a este prototipado, así que para este botón, ya tenemos, ya tenemos un prototipo. Viene de la anterior, así que voy a quitar éste. Ahora, no tenemos ningún prototipo para este botón. Y como conocimos componente, tomó toda la funcionalidad y características de nuestro patrón anterior. Por lo que sólo hay que seleccionar éste aquí. Y a partir de aquí, solo necesitas quitar el prototipo. Entonces no tenemos ningún prototipado ahora en este patrón. Y podemos hacer sobre prototipos desde aquí. Por lo que ahora voy a sumar interacciones. Aquí. Haga clic en él, haga clic en onclick. Y luego a partir de aquí necesitamos agregar un scroll a donde queremos desplazarse. Queremos desplazarse. Queremos desplazarse a éste es el marco nueve. Y necesito comprobar cuál es exactamente el marco nueve y cuál está recortado diez. Entonces éste es el marco nueve y éste está enmarcado en agosto. Ahora estamos en desde las nueve. Tendremos que ir al marco diez. De acuerdo, entonces tenemos que hacerlo ahora, se supone que debemos movernos para desplazarse al fotograma número diez. Y entonces necesitamos tener animación íntima. Y luego en lugar de salir fácil, tenemos que ponernos suaves. De acuerdo, entonces tenemos que decir gentil de aquí a aquí. De acuerdo, así que va a parecer este tipo de, este tipo de innovación. Y a partir de éste, si hacemos clic en él en interacciones, seleccionamos un scroll de ninguno para desplazarse para agregar fotograma nueve. Este es nuestro marco nueve. Y en animación. Y luego selecciona esto y gentil. Ok, Así que ojalá podamos ver que podemos, podemos, podemos desplazarnos de izquierda a derecha y de izquierda a derecha. Por lo que hemos aprendido a hacerlo. Muy bien, ahora, ¿qué más tenemos? Tenemos que añadir un texto y luego necesitamos agregar de texto normal. Y luego ahora un par de otras opciones. Entonces voy a sumar R. Así que ahora voy a volver a la sección de diseño aquí. Y aquí. En primer lugar, agreguemos esta rejilla de diseño para que sepamos desde donde podemos empezar. Podemos empezar desde éste. Por lo que voy a añadir un texto. Por lo que voy a editar texto aquí. Voy a decir, vamos a decir, vamos a empezar desde aquí. Podemos decir facial de verano, el vestido de verano, o puedo decir camiseta de verano. Sólo texto aleatorio. De acuerdo, entonces tenemos esto en lugar de 15, voy a seleccionarlo a 20 para que se vea más grande. So T Algunos son camiseta. Aquí vamos. Y luego después de eso quiero tener, así que voy a copiar este algún texto de Loren ipsum. De nuevo, voy a añadir este texto aquí. Y voy a dibujar un texto. Y lo voy a pegar aquí, pero no necesitamos tener gemelos. Tenemos que tener un 12. Genial, Se ve bien por lo que podemos reducir la distancia entre estos dos artículos. Y entonces también puedo reducir esta altura de este texto. Por lo que tenemos esta información ahora. Y después de eso, queremos tener un icono de uno más. Un icono de precio y luego botones más y menos. Entonces voy a decir dólar por 5450 y el tamaño va a ser 20. Está bien, se ve bien y sigue siendo, necesitamos agregar un par de opciones aquí. Por lo que aquí también necesitamos tener un one plus y luego el número y luego el botón menos. Entonces para eso, voy a añadir aquí un rectángulo. Voy a dibujar rect, pequeño tamaño de rectángulo, añadir border-radio cinco, y luego cambiar el color a blanco. Entonces podemos sumar nuestro derrame cerebral y veamos cómo se ve. Se ve así. Y luego voy al Comando D. Y a la D de lo que tendré que hacer. Así que voy a añadir aquí icono menos, que toma como menos. Pero definitivamente puedes dibujarlo. Y entonces tendré que añadir variar porque tamaño de y aquí podemos ponerlo en el centro. A la derecha, podemos ponerlo en el centro. Y entonces tenemos que sumar aquí un número. Puedo decir cinco, pero vamos a cambiar el tamaño de la fuente a tamaño normal, tal vez 20, y luego ponerlo dentro del texto. Entonces el número es cinco. Y luego vamos a añadir un texto más, que va a ser nuestro ícono plus. Entonces este ícono plus. Y de nuevo, lo agregaré porque tamaño del tamaño de fuente. Entonces voy a decir que 40 no son 44, éste, creo 36 o 24. Necesito ponerlo en el centro. Por lo que ahora tenemos este menos y luego tenemos este ícono plus. Yo escribiré. Se ve bien, pero ahora ¿ qué necesitamos tener? Tenemos algunas otras cosas que agregar. Tenemos este oh, LMS especial y luego éste y este botón. Entonces voy a sumar, así que lo que puedo hacer aquí. Para que podamos hacer todos estos ítems en un grupo, esto, esto y esto, y también esto, hacerlos un grupo. De acuerdo, sé que podemos decir número de artículo. Y aquí necesitaremos sumar nuestra talla. Y voy a sumar efectos de éste. Y vamos a ver. Entonces tenemos esto y quiero tener un radio fronterizo de cinco píxeles, y luego puedo duplicarlo cuatro veces. Entonces voy a decir Control D. Así que en lugar de hacer directamente esto primero, agreguemos texto aquí. Y puedo decir grande, y éste no va allá. Entonces va a ser de 20 pixeles. Y entonces podemos ponerlo aquí. Podemos ponerlo aquí, no están en el lado derecho, sino en el lado raro. Por lo que ahora tenemos esto y tenemos esto. Voy a presionar Comando G. Y ahora puedo hacer un duplicado de este ítem. Creo que para grandes. Entonces éste va a ser medio. Éste va a ser pequeño, y éste va a ser extra grande, extra grande. Estos textos, creo que necesito ajustarlo. Y tengo esta cosa aquí. Pero no es del mismo tamaño, por lo que necesitamos ajustar este aquí. Muy bien, entonces ahora se ve igual. Y aunque también podemos comprobarlo de esta manera, podemos seleccionar todo este grupo. Y luego podemos revisar nuestro ordenado. Entonces hay un totalmente apagado. Entonces tenemos esta cosa aquí. Y aquí tienes. Tenemos esta cosa creo que todavía no está en el centro. Por lo que quiero asegurarme de que esté en el centro. Sí, se ve en el centro. Pero vamos a revisarlo de nuevo. En este momento. Está en el centro. Y bien, así que yo, ahora tenemos que añadir un botón aquí. Y este botón va a ser un botón y tres colores. Por lo que quiero agregar herramienta elipse aquí. Así herramienta Elipse. Y luego aquí quiero sumar 45. Este es nuestro 45 ascensores. Y aquí quiero sumar artículos T. Y ahora puedo elegir este número y éste, y también éste. Tenemos icono T. Y ahora tenemos que añadir un botón más. Para eso. Tenemos que dibujar un rectángulo aquí. Y luego podemos sumar esta celda 25. Y aquí vamos. Tenemos que tensar nuestro color. Y voy a añadir plugin. Por lo que necesitamos seleccionar nuestro ícono de carrito. Entonces este es nuestro ícono de carro. Voy a ponerlo aquí. Y lo que quiero tener, así que necesito primero ponerlo en la caja, en el marco, y luego cambiar el color a blanco. Y entonces tendré que editar texto. Así que voy a decir, voy a decir “Añadir al carrito”. Para x igual tenemos Agregar al Carrito. Muy bien, entonces tenemos nuestro diseño de botones ahora. Pero para el tamaño de fuente, creo, para las fuentes, creo que puedo cambiarlo a 14. ¿ Y tenemos esto? Podemos llevarlo un poco más cerca de este ícono. Entonces tenemos nuestro botón, tenemos nuestro diseño. Pero aquí quiero tener un icono, que va a ser este ícono, que es nuestro ícono de ropa. Entonces voy a ponerlo aquí. Por lo que voy a cambiar el ancho y la altura a 35 por 35. Y arrástralo aquí. Y veamos cómo se ve. Está fuera del marco ahora, así que pon arrástralo al interior del marco, entonces solo lo podemos ver. Por lo que ahora tenemos nuestro ícono, tenemos nuestro diseño y podemos hacer es llamar. Muy bien, así que finalmente tenemos este fin, éste. Ahora en la siguiente parte, vamos a tratar de conectar esta caja modelo con nuestro mainframe, donde tenemos nuestro, donde tenemos nuestro ítem. Por lo que cuando el usuario haga clic en este ítem, abriremos este cuadro modelo. Por lo que voy a detener este video aquí mismo y seguiremos con la próxima conferencia. Nos vemos en la próxima conferencia. 16. Superposición de prototipos para mostrar la caja modal: Bienvenido de nuevo una vez más. En esta parte, agregaremos nuestra caja modelo, nuestra caja modelo de artículo con nuestra tarjeta. Tan rápido, déjame dirigir esta casa. Lo que podemos ver en nuestro hogar. Entonces esta es nuestra caja modelo que necesitamos conectar. De acuerdo, Entonces para eso, así que digamos cuando el usuario hará clic en este ítem, queremos mostrar este cuadro modelo, que es nuestro modelo de artículo funciona. Por lo que ahora esta es nuestra página principal y este es nuestro diseño principal. Y el fin de semana horizontalmente Skoll, podemos desplazarnos particularmente de esta manera. Y luego tenemos nuestro diseño de paginación. Tenemos nuestra sección, tenemos nuestra paginación. Tenemos nuestro pie de página. Por lo que ahora quiero, y voy a hacer clic en él. Esta tarjeta, quiero mostrar nuestra caja modelo que acabamos de diseñar aquí. De acuerdo, así que ahora voy a hacer click en este modo prototipo aquí y luego seleccionar este fotograma. Sólo este marco. Ahora, cuando seleccionas este marco, puedes ver que este marco, ¿de acuerdo? Por lo que ahora tendré que sumar esta interacción. Por lo que da click en él, pincha y necesitamos tener una opción rápida. Y luego aquí, en lugar de navegar a, necesitamos seleccionar Abrir. Abrir excesivamente significa la caja modelo que vamos a mostrar donde queremos mostrar. Queremos mostrar con lo que queremos mostrarte y mostrar nuestros trabajos de modelo de artículo. Ahora aquí verás un par de opciones. Entonces éste ya está conectado. ¿ De acuerdo? Por lo que ahora si vengo aquí, si hago clic aquí, puedo ver en este cuadro modelo. ¿ De acuerdo? Pero aún tenemos que sumar un par de opciones y esta también está funcionando. Entonces aquí tenemos dos opciones. Uno está cerca cuando un click afuera, significa que si hago clic fuera del cuadro modal, queremos cerrar nuestros horrorosamente no lo son. Actualmente, no está funcionando. Así que vamos a seleccionar éste. Y vamos a ver, ahora se va a eliminar si hago clic en RC ahora, en realidad no se ve superpuesto. Estoy en los libros de modelos porque cuando abrimos caja modal, que normalmente vemos algún tipo de sombra, como el fondo va a conseguir un poco de desenfoque, por lo que a continuación tienen esta opción de agregar un fondo detrás de superposición. Selecciona éste. Ahora, ¿qué podemos ver? Ahora podemos ver éste ahora. Se ve realmente bonito. Parece que el modelo original funciona ahora, tipo de cosas que solemos ver. Y ahora aquí hay una opción. Entonces, cuánto color quieres, como si agregas 100%, entonces te va a dar todo el fondo negro. Si los agregamos, entonces se obtiene esto, este tipo de suelo, dale una fiesta. Y ahora cómo quieres mostrar tu opción. Quiero decir, cómo quieres agregar tu modelo funciona. Entonces tenemos este tipo de antecedentes ahora. Ahora si hago clic, nuestro sitio va a eliminar. Ahora, podemos ver que nuestro modelo viene de lado izquierdo, pero también podemos seleccionar desde lado derecho, lado izquierdo. Ahora si hago clic en él, va a venir del lado izquierdo. También podemos seleccionar de TAF. Por lo que ahora va a venir de lo más alto. Entonces voy a mantener este n Ahora, nuevo, necesitamos trabajar en este ícono. Ahora si hago clic en esto, debería continuar, pero no está funcionando ahora, así sucesivamente. Eso lo que voy a tener que hacer, voy a tener que ir a este marco, que es este marco. Y aquí tendré que seleccionar éste. Y ahora necesito agregar la interacción aquí. Entonces lo que quiero decir aquí, cuando onClick, lo que quiero, quiero decir cerca superposición. Vale, ahora sólo voy a conectarlo aquí. Ahora si hago clic en él, se va a cerrar, abrir éste y luego cerrar. Por lo que también puedo sumar aquí la dimensión. Cerrar superposición. La superposición va a volver directamente. Por lo que va a llamar automáticamente del oficial desde fuera de juego. Y creo que necesito ajustar un poco este diseño. Así que volvamos al diseño. Lo siento. Necesito, querías ponerlo aquí en este tamaño. Este es nuestro seno. Y haz esto. Y simplemente podemos llamarlo, podemos hacer click a nuestro lado. Se va a seguir, Quitar y luego dar click sobre él. Muy bien, perfecto. Por lo que tenemos todo nuestro diseño y en la siguiente parte, agregaremos este prototipado para el registro y el inicio de sesión paga. Nos vemos en la próxima conferencia. 17. Prototipo para inscríbete e inicia sesión en la página: Bienvenido de nuevo una vez más. En esta parte, trataremos de agregar prototipos para nuestra base de inscripción e inicio de sesión. Muy bien, tan rápido pasar a la opción prototipo. Y ahora desde aquí, y ahora tenemos que hacer click en el botón Inscribirse, click en el botón Registrarse, y luego agregar indirection. Y aquí pincha. Y en lugar de navegar para hacer click Abrir superposición porque queremos mostrar nuestra, ¿qué queremos aparecer en superposición? Queremos mostrar base de registro. Por lo que aquí, selecciona toda esta opción y también esta. Entonces en lugar de instante quiero tener, quiero decir mudarse y luego agregar mudarse de duro. Y luego puedes seleccionar, puedes seleccionar el mango. Vale, así que ahora déjame intentarlo. Entonces si hago clic en firmar, entonces tenemos este bonito diseño. Por lo que necesitamos sumar cualquiera como el fondo al 40% porque tenemos fondo blanco. Ahora parece que tenemos este tema, tal vez el 50 por ciento. Ahora se ve bien. Por lo que cuando el usuario haga clic en la página de registro, queremos enviarlos a la página de inicio. De acuerdo, así que ahora primero en una imagen, primero en el prototipo de inicio de sesión. Por lo que da clic en el inicio de sesión. Por lo que haga clic en el inicio de sesión y luego agregue interacciones, haga clic en él. Y aquí hay que hacer clic de nuevo abrir superposición. Y a partir de esta superposición abierta, esta vez necesitamos seleccionar nuestra página de inicio de sesión. Haga click en este elemento, seleccione el contraste de color al 50 por ciento. Y en la animación morphing, lo que quieras. Y luego gentil. Ahora, veamos. Si hago clic en el inicio de sesión. Entonces estamos en fase de firma, pero hay un tema. No me di cuenta de éste. Vale, entonces tenemos otra imagen de fondo, otra imagen aquí. Así que permítanme resolver éste rápidamente. Entonces tenemos nuestra cara de inicio de sesión aquí. Entonces de donde viene esta cosa. Entonces voy a quitar éste, y ahora se ha ido. Por lo que nuestro inicio de sesión está hecho. Ahora, cuando el usuario haga clic en esto, el inicio de sesión, queremos mostrarlos a la página principal. De acuerdo, así que volveré al prototipo. Cuando el usuario haga clic en el botón de inicio de sesión, queremos enviarlos a home-base. Entonces, haz click y luego navega a donde queremos ir a nuestra página de inicio. Y luego en lugar de instantáneo, quiero decir mudarse dentro y fuera. De acuerdo, así que vamos a intentarlo. De acuerdo, así que estamos en homepage, pincha en ella, inicio de sesión estaban en la página principal. Y cuando el usuario haga clic en la página de inscripción, los enviaremos a la fase de inicio de sesión. Después de la firma, los enviaremos a la página de inicio de sesión. Por lo que voy a añadir indirección, haga clic en él, y luego puedo decir navegar a donde quiera que llegue. Los vamos a mandar a ritmo de inicio de sesión. En lugar de instancia, terminamos a decir morfina y luego esta cosa. Así que apúntate y luego apúntate. De acuerdo, entonces hay un tema aquí. Ahora, pensando lógicamente que tenemos nuestra caja modelo. Podemos decir que si llegas a, tendremos que sentarnos superposición abierta. Ok. Por lo tanto, superposición abierta a la fase de inicio de sesión. Vale, así que ahora volveré. Ahora si hago click en la inscripción es tenemos esta d. Ahora si hago click en la fase de Regístrate, ahora estamos en la página de inicio de sesión, y si hago click en la página de inicio de sesión, estamos en nuestra página de inicio. Y otra cosa que necesitamos agregar ya tenemos una cuenta de inicio de sesión aquí. De nuevo, va a nuestros compañeros de inicio de sesión. Por lo que haga clic en él y luego haga clic en Abrir superposición. Y a partir de aquí, tenemos que hacer clic aquí Iniciar sesión y luego agregar 50 versa. Y en lugar de instancia, añadir moviéndose a algunos duros. Por lo que ya tienen una cuenta, ya tienen una cuenta de inicio de sesión aquí. Así que iniciar sesión y si iniciar sesión, entonces cuando en casa y hay otro bien, así que hicimos un error aquí porque voy a ir rápido agregado aquí. Así que no tengas una cuenta inscribirte aquí. Por lo que necesito añadir aquí un texto, que va a ser N es un error. Así que apúntate aquí. Si no tiene cuenta, así que pincha sobre ella y luego necesitamos enviarlas. Tenemos que enviarlos a inscribirse es superposición abierta. Queremos ir a apuntarte ritmo y luego pasar instantáneamente al sitio. De acuerdo, así que agregamos esto. Voy a quitar este prototipo del diseño de pares. Por lo que si haces click en el inicio de sesión, los enviaremos a la fase RDB porque tenemos a nuestros jugadores OTP. De acuerdo, Así que ahora, así que haga clic en él. Por lo que OnClick no se abre superposición. Y éste va a ser OTP y sumar. Todas estas cosas. Muévete desde el dedo del pie y va a ser del 50%. Por lo que iniciar sesión pegar desde aquí, no tengas una cuenta regístrate aquí. Ya. Tener una cuenta de inicio de sesión aquí. Y luego dar click en el inicio de sesión fueron para que nos enfrentemos, pero hemos perdido nuestra imagen. Así que voy a arreglar este aquí. Entonces tenemos esta imagen. Así que voy a, voy a duplicar rápidamente, rápidamente voy a duplicar este EMS Desde aquí. Y voy a arrastrar éste. Muy bien, así que tenemos nuestra imagen aquí. Y ahora al hacer doble clic en el verificar, los enviaremos a la página de inicio y volveremos al prototipo. Cuando hacen click en este botón, agregamos una direcciones y va a ser nuestro onclick, navega a donde queremos ir, queremos ir a casa pegar. Y va a ser instancia. De acuerdo, así que ahora si hago clic en el verificar, estamos aquí. Por lo que ahora dar click en el inicio de sesión y ellos inician sesión van a ser nuestros pares OTP desde la pasta OTP. Si hago clic en él, pasamos a éste. Entonces estamos en nuestra base de registro. Entonces tendré que arreglar este texto. Ya. Tener una cuenta. Entonces estamos en una página de inicio de sesión. No tengas una cuenta que cierre la sesión aquí y luego firmarla. Cerrar sesión, luego firmar y verificar en. De acuerdo, y si hago clic en él, podemos ver nuestra caja modelo y luego hemos agregado la opción de llamada de artistas también. Muy bien, por eso hemos agregado todo tipo de prototipos. 18. Exportar y compartir el diseño: Bienvenido a esta conferencia. En esta parte, vamos a aprender a exportar nuestro diseño. Hasta ahora hemos creado para marco. Uno es registro, inicio de sesión, diseño de artículos para el hogar y arte si enmarcas. Entonces digamos que quiero exportar este hogar rápido. Para eso, sólo hay que seleccionar el marco que quiero exportar. Y luego en la parte inferior hay una opción llamada Exportar. Haga clic en el icono más. Aquí, hay un número de artículo. ¿ Cuántos artículos desea exportar? 12 o tres, lo que quieras. Al igual que, soy pobre, como una X0 a X. Entonces el formato. Quiero tener un formato JPEG e incluir esta cosa. Ahora, solo puedes explorar la cantidad, exportarla, va a exportar tu diseño. Entonces dependiendo del tamaño y las MAs o lo que haya agregado, va a llevar tiempo en base a ello. Por lo que ahora está exportando. Tomará, te tomará un tiempo en exportar el papel. De esta manera, tendrás que seleccionar tu marco y luego hacer clic en el botón Exportar. Entonces va a hacerlo. También puede seleccionar el formato que desea tener para su exportación. Y entonces también puedes nuestra cara y no puedes esperar por ellos, convertirte en menos moldeado, sentarte en el espacio. Por lo que voy a hacer click en L1 para que puedas ver que ha descargado. Por lo que ahora si hago clic en él, deberíamos poder ver nuestra página de inicio. Entonces esta es nuestra página de inicio que acabamos de diseñar. Aquí se puede ver que todo está aquí. Todo está aquí. Esta es nuestra imagen. Se ve realmente bonito. Muy bien, entonces ahora vamos a exportar nuestra base de registro. Así que solo selecciona el marco y luego desde aquí exporta, y luego selecciona JPEG y luego exporta pieza de inicio de sesión. Entonces voy a hacer clic en él para comprobarlo. Entonces este es nuestro registro o marco, y entonces este es nuestro inicio de sesión. Entonces si quiero importar, exportar nuestro lado en que voy a añadir este inicio de sesión y luego voy a hacer click sobre él. Este es nuestro inicio de sesión, luego nuestro OTP. Así que da click sobre él y voy a explorar todo. Y luego el último tenemos nuestros modelos de artículos. Entonces esta es nuestra OTP y tenemos nuestro modelo de artículos aquí. Entonces tenemos nuestra exportación. Y así es como podemos ver. Este es nuestro diseño de modelo de artículo. ¿ Está bien? Y desde aquí también se puede compartir. Por lo que sólo tenemos que hacer click en el Compartir. Y se puede seleccionar, puede ver o puede editar, pueden, simplemente, pueden ver el desorden. Y luego puedes simplemente poner la dirección de correo electrónico del miembro de tu equipo y luego enviar invitación. O simplemente puedes copiar el enlace y luego compartirlo. ¿ De acuerdo? Esto también va a funcionar. Entonces esta copia el enlace y luego por ejemplo, solo puedes compartirlo aquí. Y déjame abrirlo en una ventana diferente. Ahora voy a pegarlo. Y no deberíamos poder ver nuestro diseño aquí. Por lo que se va a cargar dos va a tomar tiempo par de momento. Y así quiero decir unas cuantas cosas aquí y aquí. También puedes obtener código incrustado. Se puede añadir. También puedes, si lo deseas, también puedes publicar en comunidad. Tienen tantas opciones aquí. Aquí va. Entonces este es nuestro diseño. Ahora, está pidiendo inicio de sesión, pero para ver éste, no necesitamos iniciar sesión. Podemos acceder a nuestro diseño aquí. Y dependiendo de cuántos archivos tengas, lleva tiempo cargarte. Podemos ver todo nuestro marco ahora aquí, pero aún tomará algún tiempo cargar nuestro MS y porque tenemos muchas imágenes, así que ahora esta es nuestra página de inicio. Entonces así es como podrás compartir esto con los miembros de tu equipo. Puedo ver es sólo una que te pierdes eso. Dile que cualquiera pueda ver. Pero si tienes acceso de inicio de sesión y entonces lo serás, podrás ver otras funcionalidades. Muy bien, así que voy a detener este video aquí mismo.