Diseño de aplicaciones y sitios web con Adobe Xd

1. Introducción Diseño de aplicaciones y web: ¿Estás planeando diseñar un sitio web o una aplicación? Pero déjame mostrarte cómo puedes hacer ambas rápidamente usando Adobe XD Y, Martin, tengo más de 20 años de experiencia como diseñador gráfico, ilustrador e instructor certificado por Adobe. He trabajado con empresas como BBC, Disney, Google, Ikea, y no puedo esperar para compartir mis mejores prácticas contigo. Este es un curso práctico aerodinámico centra en un proyecto de diseño de la vida real. Te estaré guiando a través de todo paso a paso, y obtendrás todos los archivos de ejercicios para que puedas seguir adelante. En caso de que prefieras no copiarme. También puedes seguir mi flujo de trabajo utilizando los activos alternativos proporcionados y crear algo completamente único que puedas exhibir en tu portafolio creativo. Estoy bastante seguro de que este curso te inspirará a crear algo increíble. Cubriremos todas las características importantes de DOB XD mientras construimos nuestros prototipos de aplicaciones y sitios web, incluidos componentes, mesas de trabajo, interacciones togal, animaciones, superposiciones, desplazamiento paralaje Al final de este curso, estará seguro de conocer su camino alrededor de DOBXC y listo para crear prototipos complejos y atractivos para Además de todo lo técnico, también cubriremos alguna teoría importante del diseño gráfico que podrás aplicar en cualquiera de tus futuros proyectos creativos. Puedes inscribirte a este curso sin ningún conocimiento previo en ilustración de diseño gráfico o aplicaciones DOB, Pero para completar el proyecto, necesitarás acceso a AOB Creative Cloud y una computadora de escritorio o portátil Pero ahora, es el momento de empezar a crear, así que te veo en la siguiente lección. 2. Descripción general del diseño de la aplicación: Estaremos construyendo una aplicación y un prototipo de sitio web. me ocurrió este tema de autoconciencia, por lo que la aplicación está ayudando a conocernos a nosotros mismos a partir algunos perfiles simples al principio Y como la mayoría de los prototipos aquí, en realidad no ajustaremos los consejos o las respuestas en función lo que la gente elija al principio Pero este tipo de lógica se puede agregar más adelante una vez que el desarrollador comience a trabajar con nuestro diseño. Por supuesto, en este proyecto, nos estaremos concentrando únicamente en el diseño, pero estaremos creando un prototipo en pleno funcionamiento que podrá ser compartido con nuestro cliente, y luego también con el desarrollador Entonces déjame mostrarte cómo va a quedar la app. Esta es la demo que comienza con la pantalla de alcum, y luego tendremos la opción cambiar estos pocos atributos Entonces dependiendo de lo que pensemos de nosotros mismos, podemos elegir estas opciones, y si queremos, también podemos obtener alguna ayuda sobre lo que significan estas palabras, si no estás familiarizado con eso Pero una vez que seleccionamos lo que creemos que somos, y podemos obtener nuestras respuestas y luego nos da algunos consejos, y aquí también hay algunas pequeñas animaciones divertidas. Podemos ir al siguiente consejo. De nuevo, poco de animación ahí arriba, y luego podemos pasar de nuevo a la siguiente. Y uno más al final. Y luego también tenemos un pequeño menú aquí en la parte superior con el que podemos saltar entre los consejos. También podemos saltar de regreso al hogar, y luego podremos jugar con esto. Ahora, como dije, esta pequeña sección de perfilado aquí, la selección que elegimos en realidad no cambia el consejo aquí en este prototipo No obstante, tienes la opción de extender en esta app. Entonces, si quieres ser bueno en DOB XD, proyecto de esta semana es la oportunidad perfecta para que sigas y tal vez tengas más pantallas agregadas para esta app Y como siempre, no tienes que usar exactamente los mismos activos con los que voy a trabajar. No obstante, los tengo todos preparados y listos para funcionar, lo que le ahorrará tiempo y nos permitirá concentrarnos en el flujo de trabajo de XD Sin embargo, si te interesa dónde provienen estos activos , los recursos originales están todos listados y enlazados desde el tablero de activos, para que los puedas encontrar allí. Incluso vinculé el sitio donde encontré la copia que usé en este prototipo, e incluso incluí algunas referencias o ejemplos del estilo que buscaba con mi diseño. Y saltando de nuevo a XD, solo quiero demostrar también que vamos a armar al final una versión de sitio web así como de la misma aplicación de autoconciencia Y esto también va a ser un prototipo en funcionamiento, que podremos probar. Y es una sola página que se desplaza con un menú pegajoso en la parte superior, y también con algunos enlaces de anclaje con los que podemos navegar en la página Y también volver a la casa. Y nuevamente, el selector funciona de la misma manera que en la app. Entonces espero que estén emocionados de comenzar con este proyecto. Y no te preocupes si no estás familiarizado con ese OBXD porque te guiaré paso a paso desde el principio diseñando cosas y luego hasta crear el prototipo completamente funcional al final 3. Pantalla de bienvenida: Puedes descargar el archivo de ejercicio que preparé para comenzar con este proyecto, que incluye ya todos los activos. Es un solo archivo XD. Y una vez que lo abras en XZ, tendrás la opción de guardarlo como un documento en la nube, que te permitirá acceder a él desde diferentes computadoras también Así que una vez que lo abres, siempre puedes elegir Guardar como documento en la nube. Actualmente, para mí se dice documento local porque este ya es un documento en la nube. Este pequeño icono indica el estado. Notarás una vez que abras este archivo que tengo la mesa de trabajo de activos con todos los elementos y copia con la que estaremos trabajando Pero en el panel de la biblioteca, que puedes abrir dando click sobre este icono aquí, también encontrarás colores y estilos de caracteres que ya configuré. Entonces estaremos usando estos gradientes y este color también Y también estoy trabajando con dos familias de fuentes de Adobe, Dan, 2014, y Nunito Recomiendo hundir las dos familias enteras de fuentes para estos Sin embargo, una vez que abras el archivo XD, este debería hundir automáticamente estos fondos seleccionados En este primer video, nos estaremos concentrando en las dos primeras pantallas, la pantalla de bienvenida y la pantalla de archivos pro donde podremos elegir nuestros rasgos personales Así que comencemos con la pantalla de bienvenida. Observe que estoy en el modo de diseño en este momento. Y aquí ya tenemos una mesa de trabajo, cual está preparada para el tamaño de pantalla del iPhone 12 y 12 pro Voy a hacer doble clic primero aquí y renombrar esta Bienvenida. Me gusta usar todas las mayúsculas para nombres de mesas de trabajo que son pantallas reales en la aplicación, y normalmente uso mayúsculas de frases para superposiciones, que estaremos creando más adelante Pero en esta primera mesa de trabajo, ya necesitaremos algún texto Entonces solo voy a usar la herramienta tipo, haz clic aquí, y solo voy a escribir en crecimiento. Ese es el nombre que se me ocurrió para esta aplicación. Entonces voy a cambiar esto ya aquí la derecha a la tipografía a, y de hecho voy a poner esto en negrita Ahora, una vez que presione escape, solo puedo usar este pequeño círculo en el medio para aumentar el tamaño del texto. Y con la herramienta de selección, también podemos moverla y alinearla al centro. Creo que en algún lugar por ahí, va a funcionar. Y luego altere la opción haga clic y arrastre para duplicar esto. Vamos a reducir el tamaño de este texto a 20 tal vez 25 va a ser mejor. Y entonces el texto aquí es, conócete a ti mismo la siguiente línea con un salto de línea para hacer las cosas. exclamación, y luego voy a presionar de nuevo escape, centrar este texto Entonces tal vez podamos cambiar un poco el liderato. Por lo que la distancia entre las líneas puede ser de 25 o 30. Sí, creo que 30 se ve bien. Esto no tiene que ser audaz. A lo mejor podamos hacerlo medio. Y también podemos simplemente usar de nuevo el círculo para reducir el tamaño del texto. Y simplemente lo colocamos debajo del título principal. Ahora, vamos a subir aquí a los activos, primero, voy a simplemente duplicar este elemento. De nuevo, viejo clic y arrastrando con la herramienta de selección, y luego vamos a girarla alrededor, manteniendo presionada la tecla Mayús, alineándola con los bordes Voy a arrastrarlo hacia abajo. También alinea esta esquina aquí en la parte superior, y tal vez solo estírala en un poco. Voy a seleccionar esto y luego hacer clic derecho en Enviar hacia atrás para asegurarme de que nuestro texto esté en la parte superior. Y luego cambiemos el color del texto, el color del campo a blanco. Y luego finalmente, solo necesitamos una imagen, y voy a usar esta. Una vez más, prefiero mantener todos los activos aquí en este tablero de arte, y simplemente siempre duplico las cosas que necesitamos. Así que haz clic y arrastra, y luego aumentemos el tamaño de esto. No tienes que mantener pulsada la tecla mayúsculas, automáticamente mantiene las proporciones iguales. No obstante, mientras estás redimensionando, a veces sucede que las capas no se alinean perfectamente. Por lo que la sombra del coche está en una capa separada como modelo principal. Entonces tal vez necesitemos ajustarlo un poco. Pero primero, quiero asegurarme de que está en el lugar correcto. Me gustaría tener al personaje en algún lugar del centro de la pantalla y hacer que parezca que está apoyada en el borde de la pantalla Sí, creo que eso está cerca, tal vez solo un poco más pequeño, y luego vuelva a arrastrarlo de nuevo. Cuando hago clic fuera de la mesa de trabajo, puedo ver cómo se va a recortar Creo que eso funciona bastante bien. Entonces, si queremos afinar la alineación aquí en la sombra, podemos hacer doble clic y después tener ya sea la sombra o el carácter seleccionado. Podemos usar las teclas de flecha del teclado y simplemente ajustarlas o moverlas hasta que estén perfectamente alineadas Y luego cuando hacemos clic afuera, ahora está configurado, y eso es todo lo que necesitábamos hacer para la pantalla de bienvenida. Esta es definitivamente la pantalla más fácil que tuvimos que crear. El siguiente será mucho más complejo, que vamos a armar en el siguiente video. 4. Creación de la pantalla de perfil: Entonces, avanzando, vamos a usar la herramienta de mesa de trabajo. Y con eso, simplemente haz clic aquí junto a la mesa de trabajo anterior Crea automáticamente la mesa de trabajo del mismo tamaño que antes Y esto lo llamaremos perfil. Nuevamente, estoy usando todas las mayúsculas porque esta es una pantalla importante. Entonces en esta pantalla, estaremos usando un par de elementos. En primer lugar, estaremos usando todos estos activos, así que voy a seleccionarlos. Y como antes, voy a hacer click y arrastrarlos aquí abajo, y luego solo moverlos a la mesa Entonces también necesitaremos algún texto. Entonces voy a usar la herramienta tipo y solo describirte a ti mismo. Pero para este texto, ya tengo configurado el estilo de carácter, así que usaremos este de aquí. Entonces lo formatea automáticamente a la versión que necesitamos, y solo la coloco ahí. Y también necesitaremos un icono, que de nuevo he preparado este signo de interrogación. Simplemente copiemos eso con el Comando C, también podemos copiar. Da click en la mesa de trabajo y Comando V la va a pegar Así que vamos a mover eso aquí por ahora en la parte superior derecha. Más adelante, también necesitaremos un botón. Pero primero, vamos a configurar estas imágenes. Ahora, serán utilizados para un toggle visual. Así que tenemos tres alternancias diferentes que permiten a los usuarios elegir sus rasgos personales Entonces el primero es el selector optimista pesimista. Lo que hay que hacer es alinear estas dos cabezas una encima de la otra. Y prefiero tener al feliz encima, esa va a ser nuestra versión optimista, y debajo está la pasimista Si cambiamos a la capa spanel con comando Control Y, también podemos ver que estas imágenes ya están nombradas Entonces esa es la imagen feliz. Y si lo escondo debajo, también está la cara triste. Entonces voy a volver a encender esto y ya puedo mover los dos juntos. Vamos a necesitar copia adicional aquí, así que solo voy a usar esta o una copia de la de arriba, y voy a escribir optimista y tal vez aumentar el tamaño del lugar ligeramente Aquí, y también voy a poner esto a luz o medio, o tal vez regular va a ser lo mejor para nosotros. Y luego, nuevamente, simplemente duplicamos este texto. Asegúrate de que esté alineado con el anterior, y luego solo voy a escribir pesimista Bien. Entonces eso está más o menos listo para funcionar. Entonces preparemos el siguiente selector. Voy a colocar uno encima del otro el diente y la bombilla Este va a ser el selector entre la personalidad creativa y la metódica, que se representa con el diente Voy a colocarlo uno encima del otro, alinearlo a la cabeza más o menos por ahora, y luego voy a copiar los dos objetos de texto y cambiarles el nombre. Esto va a ser creativo, y éste es metódico Bien, entonces puedo ver que necesitamos movernos esto ligeramente hacia la izquierda, asegurarnos de que todos encajen. En. Y entonces el siguiente selector es probablemente el más único porque aquí, no hay dos imágenes separadas entre las que estaremos haciendo la transición. En cambio, tengo estas formas que usaremos junto con algunas máscaras y la función de auto animación Esencialmente, lo que quiero crear aquí es que vamos a cambiar entre esta forma de cilindro y la esfera. Y van a estar moviéndose entre ese anillo, que es casi como ahí para cambiar de una forma a otra. Y esto es solo un pequeño ejemplo divertido de lo genial visual en direcciones que puedes construir en XD Pero por ahora, sólo voy a poner esto aquí de lado. Y nuevamente, voy a copiar estos objetos de texto. Ahora, aquí, solo necesitamos escribir firma, y la otra es flexible. Por ahora, sólo voy a mover esto a un lado, y más adelante podremos alinear mejor las cosas. Lo que voy a hacer es seleccionar todo esto Y aquí del lado derecho, asegúrate de desactivar la opción de redimensionar responsive Entonces solo pon eso al lado izquierdo, para que eso no tenga restricciones. Y luego, cuando mantienes presionada la tecla Mayús mientras cambias el tamaño, se asegurará de que todo permanezca igual de la manera que lo necesitamos. Sí, creo que eso va a funcionar mejor. Y luego más adelante siempre podremos acercar el texto. 5. Interacciones para la pantalla de perfiles: Ahora que tenemos estos listos, vamos a configurar la primera interacción. Entonces esta va a ser muy fácil. Todo lo que tenemos que hacer es seleccionar todos estos elementos aquí en la parte superior. Entonces hay dos imágenes una encima de la otra y los dos objetos de texto y los convierten en un componente. La forma más corta de hacerlo es presionar comando o control k en el teclado, y se va a indicar con un cuadro delimitador verde que este es un componente, y también importante que en la esquina superior izquierda, si ves un campo estrella verde , eso significa que este es el componente principal Entonces en caso de que dupliques esto, entonces este va a ser el padre y los demás serán los hijos. Por lo que cualquier cambio que realice al componente principal se reflejará en las instancias, pero no al revés. Utilizaremos copias o instancias para la versión del sitio web de esta aplicación. Por eso es importante recordar que este es el componente principal. Ahora bien, la razón por la que tenemos que crear un componente en primer lugar es para poder agregar estados, y tenemos un estado predeterminado creado aquí en la parte superior, pero necesitaremos crear un estado adicional. Yo sólo voy a elegir nuevo estado, y voy a llamar a ese pesimista Ahora, por el momento, no hay diferencia entre los dos, y estoy cambiando aquí, Pero lo que tendremos que hacer es ir al estado pesimista, y luego desde la capa spanel, que de nuevo, puedes revelar presionando Comando Y en el teclado, podrás encontrar Nuevamente, podemos cambiarle el nombre a esto solo para que nos resulte más fácil. Tan optimista selector pesimista. Incluso podemos simplemente poner el selector de inicio para que podamos encontrarlo más rápido. Entonces este se puede abrir, y luego dentro de él, podemos ver todos los elementos como capas en un grupo. Y aquí sólo podemos esconder la fase feliz. Entonces ahora podemos ver la fase establecida. Y entonces ahora si cambiamos entre los dos estados, podemos ver cómo ocurre la transición. Pero para asegurarse de que esté indicado aún mejor, cambie entre estos dos. También voy a cambiar un poco el texto. Entonces voy a hacer doble clic aquí para seleccionar optimista, y que voy a poner en negrita y pesimista, voy a reducir en opacidad Entonces ahora está claro cuál es el seleccionado, y luego podemos cambiar al estado pesimista Y ahí dentro, voy a revertir esto. Entonces voy a seleccionar optimista, ponerla en regular y 30% de opacidad, y luego hacer esta hasta 100% y ponerla Entonces ahora si cambiamos entre los estados, tanto la imagen como el formato del texto cambian Para seguir adelante, tenemos que hacer exactamente lo mismo aquí. Así que ahora solo voy a ser un poco más rápido. Seleccionaré todo esto juntos, presionaré Commando Control K, que crea el componente. Nuevamente, renombraré este selector y teclearé las dos opciones creativas y metódicas, y luego crearemos un nuevo estado para Y eso va a ser lo metódico. Y luego en el estado predeterminado, no tenemos que ver el piñón, así que voy a esconderlo y tenemos que asegurarnos de que la creatividad esté seleccionada y puesta en negrita mientras metódica se puede reducir hasta Y ahora podemos tener seleccionado todo el componente, volver a cambiar a metódico, el segundo estado en el que podemos volver atrás el piñón y apagar la bombilla Y luego sólo tenemos que cambiar el formato sobre el texto de manera similar a antes Esto es regular hasta un 30% de visibilidad, y el otro vuelve a 100 y vuelve a ponerse audaz. Una vez más, no olvides volver al estado predeterminado, y luego puedes simplemente verificar dos veces la transición entre los dos. Creo que esto se ve genial. Y lo mantendremos en la primera opción creativa por ahora. Y luego bajemos a este de aquí. Como dije, esta es la más complicada porque aquí tenemos dos máscaras separadas, y tendremos que agregar una animación tanto para el cilindro como para la esfera Entonces, primero vamos a crear estos grupos de máscaras. Ya creé las formas con las que estaremos haciendo las máscaras. Entonces este de aquí en la parte superior se utilizará con cilindro y este otro se utilizará con la esfera. Entonces, seleccionemos éste y primero el cilindro. Solo uso la tecla Mayús para seleccionarlos juntos. Y luego subiendo al menú de objetos, podemos elegir esta opción llamada máscara con forma. Comandemos Mayús M desde el teclado. Y una vez que lo hagas, fíjate que aquí en el panel de capas, ahora tenemos un grupo de máscaras. Voy a cambiar el nombre de este cilindro de máscara, y hagamos lo mismo por la esfera. Seleccionamos ambos con la tecla Mayús y luego máscara de objeto con forma, y luego renombramos esa esfera de máscara. Una vez más, vamos a verificar lo que logramos. Y aquí, la esfera real actualmente no es visible. Pero una vez que lo bajemos a esa región, que se crea con la máscara, comenzaremos a verla. Así que sólo voy a mostrar esto rápidamente. Si tengo seleccionada la esfera, una vez que entre en esa región, aparecerá. Pero voy a guardarlo aquí por ahora. Y ahora que tenemos las máscaras en su lugar, podemos mover el texto aquí atrás, y alinearlo con los otros objetos de texto anteriores, y luego podemos seleccionar todo esto juntos y convertirlo en un componente. Eso es control de comando K, y voy a renombrarlo aquí también, llamarlo selector firme y flexible, y también crear el estado para ello, nuevo estado y escribir en flexible. Primero, lo que podemos hacer es que vayamos al estado predeterminado y configuremos los objetos de texto. Entonces esto debería ser audaz en la configuración predeterminada, y esto debería reducirse hasta un 30% de visibilidad. Y luego noto que siempre hago clic afuera, luego selecciono todo el componente nuevamente, y luego puedo cambiar entre estados. Porque una vez que haces doble clic para realizar cambios en los elementos, estás dentro del componente, y no puedes ver la opción de estado. Entonces es por eso que siempre hago clic de distancia y luego lo selecciono de nuevo. También puede utilizar el panel de capas para alternar entre los elementos dentro del componente y el propio componente. Entonces tengo el texto flexible seleccionado, configuré de nuevo al 100%, y luego elegimos negrita. Y esta es la última vez que tenemos que hacer esto. Así que solo elijo regular y teclear 30. Eso es genial. Así que ahora vamos a echar un vistazo a esto. Cambiamos entre default y flexible. Funciona bien. Pero ahora tenemos que crear esa animación que mencioné. Entonces aquí en vez de solo una simple transición entre los elementos o imágenes, queremos que este cilindro caiga por el anillo y se convierta en una esfera. Esta es la forma en que se me ocurrió representar la diferencia entre que alguien sea firme o flexible. Entonces un cilindro se siente mucho más firme que una esfera. Entonces la esfera representa flexibilidad mientras que el cilindro representa firmeza. Para poder crear la animación, necesitaremos trabajar con estos elementos dentro de los grupos de máscara. Pero ya están establecidos de la manera que deberían estar en el estado predeterminado. Entonces este es el estado firme. Entonces todo lo que tenemos que hacer es ir al estado flexible. Y dentro de eso, tenemos que mover un poco las cosas. Voy a abrir los elementos. Entonces primero, vamos a mover el cilindro. Entonces voy a encontrar ese objeto. Y una vez seleccionado, puedo girarlo ligeramente y luego comenzar a arrastrarlo hacia abajo y notarlo una vez que vaya por debajo del anillo, en realidad desaparecerá así que ya podemos previsualizar que la visibilidad va a ser completamente cero una vez que llegue a esta parte, porque esa forma que creamos originalmente, esta forma de máscara es la única área donde estará el cilindro visible. Entonces, al moverlo aquí abajo, va a desaparecer. Observe cómo aún trato de mantenerlo en el centro de este anillo. Entonces horizontalmente, sigue alineada. Pero ahora voy a cambiar a la otra máscara y seleccionar ese grupo. Nuevamente, en cada grupo de máscaras, verías la máscara en la parte superior y el objeto debajo. Si quieres encontrarlos más fácilmente más adelante, te recomiendo nombrarlos también. Entonces llamo a esto por máscara y ahí está la esfera. Al igual que en el otro, volvimos a tener la máscara y debajo de ella, teníamos el cilindro. Así que volviendo a la esfera, una vez que tengo esa seleccionada, puedo usar la tecla Mayús, y simplemente dejarla caer en algún lugar por ahí. Y eso es todo lo que teníamos que hacer. Ahora, haciendo clic afuera y seleccionando de nuevo el componente completo. Puedo cambiar entre los dos. Y esto es exactamente lo que quería. Sin embargo, aún no vemos una animación, porque eso solo se mostrará una vez que agreguemos las interacciones y comencemos a usar funciones como la animación automática Pero antes de hacer eso, quiero asegurarme de que todos los elementos estén listos en esta pantalla. 6. Buttons y fondo para la pantalla de perfil: En realidad vamos a necesitar un botón aquí, que nos llevará a la siguiente pantalla. Entonces para este botón, voy a usar la herramienta rectángulo o cuadrado. Y con esto, podemos simplemente dibujar rectángulo aquí en la parte inferior, y podemos mantener el color del campo blanco. Y por ahora, solo me quedaré con la frontera solo para que podamos ver dónde está nuestro botón. Pero voy a arrastrar estos rígidos de esquina hacia abajo, así que es un botón completamente redondeado Y luego con la herramienta de selección, voy a dar clic y arrastrar este texto. Muévelo aquí, y luego haga clic derecho sobre él y tráelo al frente, y solo voy a alinearlo al botón, haga doble clic sobre él, y luego escriba, obtenga sus respuestas. También voy a cambiar esto a medio. No tiene que ser negrita, Aalinearlo al centro del botón, y tener todo seleccionado junto, también puede alinear esto al centro de la pantalla Además de estos elementos, también necesitaremos algunos detalles coloridos en el fondo. Entonces, vamos a copiar primero éste. Haré clic y lo arrastraré, lo traeré aquí abajo y lo enviaré a la parte de atrás. Ese es un atajo que uso con bastante frecuencia. Eso es comando Control Shift corchete izquierdo. Si te resulta difícil de recordar, siempre puedes hacer clic derecho y puedes memorizar estos atajos Son sumamente útiles, y funcionan de la misma manera en todas las aplicaciones de Adobe. Entonces son atajos de arreglo universal. Entonces ese elemento ya está en su lugar. Vamos a traer éste, hacer clic y arrastrar de nuevo, traerlo aquí abajo. Y entonces voy a arrastrar esto hacia arriba, así que aumentando el tamaño y probablemente tenerlo en algún lugar por ahí. Nuevamente, mismo atajo para enviarlo a la parte de atrás. Y luego voy a duplicar esto otra vez. Entonces eso es hacer la tecla de opción y arrastrar. Pero esta vez, voy a voltearlo horizontalmente con este icono a la derecha, y voy a ajustar sus colores ligeramente haciendo clic en la muestra de color de campo, y ahí podemos encontrar el degradado Entonces voy a seleccionar este color y solo reducir su intensidad, hacerlo más brillante y menos saturado. Algo así, creo que va a funcionar. Esencialmente, solo quiero asegurarme de que haya suficiente contraste entre estas formas. Así puedo colocarlo aquí y arrastrarlo a algún lugar por ahí y luego usar el atajo para enviarlo a la parte de atrás. Y creo que hay suficiente contraste entre esta forma y esa. Entonces esto va a funcionar. Pero solo para que tengamos un poco más de diferencia. También voy a seleccionar este color amarillo y hacerlo un poco más amarillo más brillante así. Ahora, permítanme seleccionar esta otra forma, y podemos hacerla más grande. Sólo voy a redimensionarlo. Así que encaja aquí un poco mejor. Sí, creo que es una buena composición. Y por cierto, puedes dibujar estas formas con la herramienta pluma aquí en XD, o puedes traer estas formas desde Illustrator Y sólo para que sepas cómo hacer esto. Si quieres hacer cambios en una forma, solo selecciónela, y luego haz doble clic sobre ella, y luego podrás encontrar puntos de anclaje individuales, puntos de esquina, y también estos puntos suaves donde tienes los mangos, y puedes ajustarlos igual en Illustrator cuando trabajamos con piezas. Volviendo a nuestra pantalla de perfil. Ahora tenemos todos los elementos en su lugar. Sin embargo, tenemos que asegurarnos de que estas formas de fondo también estén conectadas a nuestros tres conmutadores Y la forma en que podemos hacer que esto funcione es que tendremos que colocarlos dentro de los componentes que creamos. Entonces comencemos con este de aquí en la parte inferior. Voy a seleccionar esa forma y después usar comando Control X para cortarla. También puedes usar la opción de editar corte, luego seleccionar este componente y hacer doble clic sobre él, lo que significa que ahora estamos dentro de él. Es como el aislamiento en Illustrator. Y entonces si utilizo Commando Control V, va a pegar esa forma atrás donde estaba en cuanto a su lugar dentro de la pantalla o mesa Pero en términos de arreglo, voy a tener que mandar esto al fondo o al dorso del componente. Entonces ese era comando Control Shift corchete izquierdo. Y ahora que se coloca ahí, podemos dar clic en av, seleccionar de nuevo este componente. Y comprobar si la forma permanece visible en nuestros dos estados. Y se nota en ambas, así que eso es perfecto. Y la razón por la que la colocamos aquí es porque también nos gustaría ver un poco de animación en estas formas cuando cambiamos entre las opciones. Pero eso es algo que vamos a montar más adelante por ahora. Todo lo que quiero asegurarme es que estas formas están todas conectadas a estos togos Entonces ahora podemos seleccionar la segunda forma, cortarla. Haga doble clic en el componente, y luego pegue y envíe al dorso. Haga clic en una v. Solo verifiquemos nuevamente también. Los dos estados funcionan bien. Entonces seleccionemos esta forma. Por último, eso es otra vez, comando x para cortarlo, hacer doble clic en el componente, pegar con comando Control V, y luego enviarlo al fondo. Haga clic en a y verifique los dos estados. Sí, funciona perfectamente. Ahora tenemos todo en su lugar. Es hora de finalmente configurar las primeras interacciones y ver las cosas geniales que podemos lograr con la función de animación automática 7. Alternar interacciones: Para agregar interacciones, tenemos que cambiar al segundo módulo con xD, que se llama prototipo Observe que hay un atajo con el que se puede cambiar fácilmente entre estos. Desde el diseño, que es alterar la opción uno, podemos usar la opción alter dos para cambiar a prototipo. Eso definitivamente vale la pena recordarlo porque vamos a estar cambiando bastante entre estos dos. Ahora estamos en modo prototipo. Podemos seleccionar nuestro primer componente. Y dentro de esto, me gustaría hacer doble clic para entrar dentro de él. Y ahí, me gustaría que seleccionaras la imagen y la otra imagen debajo de ella, esa es la tecla shift de la capa SpanelHapp y la pongas juntas, y también los Entonces deberías tener estas cuatro cosas seleccionadas. El camino detrás de ellos no es necesario para esta selección. Y vamos a convertir esto en un grupo, lo que podemos lograr pulsando comando o control G en el teclado. Y la razón por la que hacemos esto es que va a crear el área a la que podremos asignarle nuestra dirección. Para que puedas ver tener seleccionado el grupo. Tenemos esta pequeña flecha aquí a la derecha. Y simplemente haciendo clic en eso una vez, ya tenemos lista nuestra primera interacción, y el detonante para esto va a ser tap. Por lo que simplemente hacer clic sobre él o tocarlo en la pantalla va a desencadenar la acción, que en este caso, va a ser una transición sencilla. Tenemos que asegurarnos de que el destino esté establecido en el segundo estado de este componente, que es la opción pesimista Para la animación, voy a mantener la función de disolver con la que podremos crear una agradable transición sutil. Y más adelante podemos decidir cómo queremos hacer la flexibilización. Pero siento que la facilidad fuera podría ser buena. Y la duración es por defecto establecida en 0.3 segundos, lo cual creo que es bastante bueno. Pero ya podemos probar esto presionando el icono de reproducción aquí en la parte superior derecha. Entonces, si hago clic en cualquier parte ya sea en la imagen o en los dos objetos de texto o incluso en el medio, ya puedo cambiar al segundo estado. Pero como pueden ver, aún no tenemos forma de volver a la otra opción. Entonces funciona de una manera por ahora. Pero es una solución fácil. Todo lo que tenemos que hacer es seleccionar el componente. Entonces primero haga clic en un peso luego seleccione el componente, cambie al segundo estado, luego haga doble clic. Asegúrese de que el grupo esté resaltado. Da click en la pequeña flecha de la derecha, y luego volveremos a configurarlo de la misma manera. Entonces, esta vez, la transición al estado predeterminado. Y XD es realmente inteligente. Siempre recuerdo tus ajustes de último uso, así que no tienes que preocuparte por configurarlos. Y ahora podemos simplemente hacer clic de distancia y seleccionar el componente, asegurarnos de que está ajustado de nuevo al estado predeterminado, y luego podemos probarlo. Así que de nuevo, usando el botón de reproducción de la derecha, ahora podemos tocarlo y tocar hacia atrás. Así que tenemos nuestro primer diseño de toggle. En este punto, vale la pena mencionar que si enchufa su teléfono a su computadora mientras usa un OBXC y tiene la aplicación XD en su teléfono, podrá ver la vista en vivo de su proyecto actual, y es una excelente manera de probar realmente todo y ver cómo se siente, si las áreas son lo suficientemente grandes como para tocar o cualquier problema con la muesca en la parte superior, ocultando algunos detalles como el texto. Esto es algo que quieres ver aquí en la vista previa de escritorio. Es más fácil verlo en vivo en tu teléfono. Solo asegúrate de descargar la aplicación Adobe XD e iniciar sesión con los mismos detalles de la cuenta de Creative Cloud De esa manera, el documento en la nube en tu escritorio podrá sincronizar y conectarse a la aplicación en tu teléfono. Me encanta la forma en que ADB XD tiene esta función de prototipado en vivo Realmente hace que todo el proceso de diseño tan intuitivo y divertido. Pero para seguir adelante, no olvidemos esa forma en el fondo de este componente. Entonces también quiero que eso cambie cuando los usuarios estén tocando este go go. Entonces para poder hacer eso, primero, en el estado predeterminado, quiero que la forma esté donde está. Pero en el estado pesimista, quiero que se mueva ligeramente Entonces primero cambio el estado. Después doy doble golpecito adentro. Y al tener esa forma seleccionada, necesitamos cambiar su tamaño y sus colores. Pero esto es algo que solo podemos hacer cambiando de nuevo al modo de diseño. Entonces esa es la opción uno. Y dentro de eso, puedo cambiar fácilmente el tamaño de la misma. Puede bajar tal vez hasta aquí, y luego para cambiar el color rápidamente, presionaré Command Shift Y o control shift y, lo que te trae la pestaña de activos del documento a la izquierda. Por supuesto, también puedes acceder a él con este icono aquí. Y luego de aquí, voy a ir con tal vez este color. Entonces un gradiente más fresco, solo para ir con ese color frío o azulado en la cabeza Y lo mejor es que eso es todo lo que tenemos que hacer porque todo ya está configurado con las interacciones. Cualquier elemento que cambie dentro de un componente que utilice estas interacciones también debe actualizarse automáticamente. Entonces, si hago clic lejos, haga clic de nuevo aquí, ahora puedo ver que la forma también está cambiando. Pero si jugamos esto, no va a ser una transición suave. Es sólo un salto rápido entre los dos. Eso se debe a que actualmente estamos usando solo una transición normal de disolución que se desvanece de un estado a otro Sin embargo, en OBX D tiene la característica más cool llamada auto animate, que puede crear el in betweens para estas animaciones y morph estado de un objeto a otro, lo que será capaz de crear una transición suave muy agradable entre los dos estados de la forma, tanto los colores como la posición de la 8. Animación automática y alterna las interacciones: Para poder configurar esto, saltamos de nuevo al modo prototipo, y primero hacemos doble toque dentro del primer estado o estado predeterminado de este componente. Y aquí, todo lo que tenemos que hacer es cambiar la transición a auto animar. Entonces esta es la interacción que ya configuramos. Solo estamos cambiando el tipo, pero va a recordar todo el resto de los ajustes. Entonces no tenemos que preocuparnos por eso. Voy a hacer clic de distancia, hacer clic de nuevo, cambiar al otro estado, y recordar que tenemos que asegurarnos de que esté configurado en ambas direcciones. Entonces voy a tocar dos veces, seleccionar el grupo, y también cambiarlo a auto animar. Ahora, podemos hacer clic en av, seleccionar el componente, volver a configurarlo al estado predeterminado, y es el momento de probarlo. Entonces vamos a ver. Ahora tenemos la opción de animación automática genial creando esa animación suave o transición en la forma de la derecha Realmente no afectó la transición visual aquí en la imagen y el texto, pero incluso eso se volvió un poco más sutil en mi opinión. Entonces, si le prestas mucha atención al texto, porque estamos cambiando entre dos pesos negrita y regular, en lugar de simplemente un estado disolviéndose en otro, realidad se transforma entre los dos Por lo que las letras van aumentando de grosor gradualmente y también disminuyendo gradualmente. Es algo muy sutil, sobre todo porque nuestra animación es muy rápida a los 0.3 segundos, pero aún así ayuda a crear esa transición suave que buscaba. Ahora, tendrá que hacer los mismos pasos exactos en los otros dos selectores Pero solo para estar seguro de que sabes lo que tienes que hacer, voy a pasar por esto muy rápido. Entonces antes que nada, voy a seleccionar este segundo componente. Pulsa dos veces y selecciona todos los elementos que necesitamos aquí. Usando mi panel de capas, también me aseguro de que el diente actualmente oculto esté incluido en este grupo Los agruparé y asignaré la primera interacción, que va a usar auto animar, cambiando a metódico Mira como ya recuerda todo el resto de los ajustes Después hago clic lejos, cambio a metódico, doble toque, agrego la otra interacción, que volverá a cambiar al estado predeterminado Además, voy a seleccionar esta forma aquí, cambiar al modo de diseño, arrastrarla hacia abajo. Y nuevamente, usa una de las opciones de color guardadas, tal vez esta, o podemos usar otra solo para tener alguna variedad aquí. Así que ahora podemos hacer click lejos, dar click atrás, volver al estado predeterminado, y ya podemos probar esto. Hay un hermoso auto animado en acción, cambiando entre las dos imágenes, el texto y la forma en el fondo Ahora, para el último toggle en la pantalla, realidad tendremos que arreglar un problema, y esto es algo que intencionalmente dejé ahí solo para poder mostrarte lo que sucede en caso de que te olvides de configurar algo, y esta es una característica llamada componente anidado Entonces, para poder crear una transición suave entre los dos estados de forma, el cilindro y la esfera, y poder ver esa característica fresca de auto animación en ellos, también tendrían que convertirse un componente dentro de este componente más grande Pero solo para que puedas ver cómo funciona sin él. Sólo volvamos a ver la vista previa. Entonces, cuando cambiamos, está la transición simple. Y aunque cambie esto a auto animar, esto no va a mejorar Entonces déjame mostrarte esto. En primer lugar, voy a cambiar al estado flexible, doble toque aquí. Y en el modo de diseño, voy a simplemente cambiar la forma de este camino aquí, y también vamos a cambiar su color a tal vez este degradado, y luego simplemente cambiarlo ligeramente para que no choque con el otro. Voy a hacer esto un poco más anaranjado. Creo que eso ya empieza a destacar más. Puedo hacerlo un poco más oscuro. Creo que eso va a funcionar bastante bien. Entonces ahora si volvemos al estado predeterminado, ese es el go donde podemos probarlo. Al hacer clic en él, tiene esa transición de disolución porque todavía no tenemos la opción de auto animar Pero si hago doble clic aquí y vuelvo al prototipo, puedo cambiar el tipo de transición a auto animar y me quedo con el resto de los ajustes, luego vuelvo al componente, cambio al estado flexible, doble toque nuevamente, y cambio esto también a auto animar Entonces ahora, cuando volvamos al estado predeterminado, podemos probar esto tocando esto, puedes ver cómo tenemos ahora una animación suave en el camino en el fondo, pero no en estas formas. Y eso es porque esto tendría que convertirse también en un componente o componente anidado para que eso funcione 9. Componentes anidados: No, no te preocupes, si esto se siente demasiado complicado, no tienes que crear ese componente anidado La forma en que se configuró actualmente ya se ve bien, por lo que puedes saltar al siguiente video y continuar con el resto del diseño de la app. No obstante, si te sientes seguro de que ya entendiste todos los conceptos hasta ahora, entonces déjame mostrarte esta solución de crear ese componente anidado Entonces todo lo que tenemos que hacer es remontarnos a los primeros años, asegurarnos de que veamos lo que vamos a seleccionar, y luego tenemos que entrar en el modo de diseño. Haga doble clic para ingresar primero el componente. Y dentro de eso, tenemos a este grupo. Entonces voy a volver a hacer doble clic. Y dentro de ese grupo, voy a poder seleccionar ahora el anillo, el cilindro, y el juramento. Y mientras tengo esto seleccionado, puedo presionar comando control k, lo que va a convertir esto en un componente. Pero fíjate que dado que este es un componente anidado, por lo que fue creado dentro de otro componente, no va a ser considerado el componente principal para ello Objeto, así que no está lleno aquí en la esquina superior izquierda. Entonces cuando quiera hacer algunos cambios a este componente, XD va a generar el componente principal fuera de mis tableros de arte Entonces déjame mostrarte cómo funciona eso. Todo lo que tengo que hacer es hacer clic derecho y elegir Editar componente principal. Y ahí tienes, ese es el nuevo que se genera para mí. Ahora, no te preocupes por tener esto fuera de tus mesas de trabajo, porque lo que sea que asignes a esta versión también se aplicará a la otra instancia en la pantalla Así que para esta versión del componente principal, podemos añadir ahora un nuevo estado. Yo sólo lo llamo esfera. Y aquí, tenemos que repetir lo que hemos hecho antes abriendo el componente y también los grupos de máscara, seleccionando el cilindro, girándolo ligeramente, arrastrándolo hacia abajo, y luego seleccionando la esfera y arrastrando eso hacia abajo también Entonces este es nuestro segundo estado para este componente, y ese es el primero. Y para que esto funcione y actualice aquí en esta interacción que creamos. Solo tenemos que volver a ello, cambiar al estado flexible y notar como el componente anidado aún no está cambiando. Pero ahora que estamos en ese estado, podemos tocar dos veces y volver a tocar dos veces. Y ahí está nuestro componente anidado, que podemos cambiar a esfera Y una vez que volvamos a tocar afuera, podemos volver a cambiar esto al estado predeterminado, y podemos probarlo ahora, y la buena noticia es que no tenemos que hacer nada más. Entonces el auto animar ahora, está funcionando completamente en la imagen toggle así en estas formas y la forma en el fondo, que ya estaba funcionando antes Pero recuerden, para que esto funcionara, tuvimos que crear este componente anidado Y por cierto, puede ahorrarse mucho tiempo planificando sus componentes con anticipación. Entonces, si creamos este componente antes de crear el componente más grande, entonces no sería necesario tener este componente principal fuera de la pantalla, y las cosas habrían sido un poco más rápidas y fáciles de configurar. Como dije, esto puede ser poco confuso y un poco más complejo. Pero es muy importante entender cómo se trabaja con componentes en general en XD Y a medida que te avancen un poco más en el uso de esta herramienta, estarás usando cada vez más componentes anidados así como este Entonces solo para mantener las cosas ordenadas, voy a mover este componente, que es nuestro componente principal para este elemento en el tablero de arte assets, y también le cambiaré el nombre y lo llamaré shapes. Pero la buena noticia es que ahora tenemos este selector de perfiles en pleno funcionamiento. Entonces todo está cambiando muy bien, Las animaciones están ahí, y podemos cambiar todo independientemente unas de otras. Y las únicas cosas que actualmente no están enganchadas o instaladas son el menú Ayuda y el botón. Pero agregaremos esto después de que creamos todas las pantallas adicionales en el siguiente video. 10. Creación de la pantalla de consejos: En comparación con la pantalla de perfil, todo lo demás será bastante sencillo. Así que no te preocupes, en caso de que lo encontraras un poco complejo y confuso. Creo que el resto del proceso le resultará mucho más sencillo. Entonces voy a volver a cambiar al modo de diseño y usando la herramienta mesa de trabajo, voy a crear una nueva mesa de trabajo, y voy a renombrar esto a llamadas de asesoramiento Y para ello, antes que nada, necesitamos algún texto, que voy a pegar aquí. También podemos usar el activo desde aquí en la otra mesa Esto es en realidad lo que necesitamos. Los objetivos establecidos, pueden alinear esto en algún lugar del centro. Entonces también necesitaremos este icono de inicio, que solo arrastre aquí manteniendo presionada la tecla de opción de alterar. Entonces necesitaremos el elemento montañas y esta imagen, y esta burbuja de discurso o marco de texto, y luego también una forma, que voy a configurar más adelante. Pero sí, estos son todos los elementos que necesitaremos al principio. No obstante, aquí también tendremos que diseñar un par de elementos. En primer lugar, necesitaremos un telón de fondo para este ícono solo para hacerlo un poco más interesante. Para ello, voy a usar la herramienta elipse, y con eso, sólo voy a dibujar un círculo perfecto Al mantener presionada la tecla Mayús, puedo asegurarme de que este es un círculo perfecto. Y voy a usar los colores guardados en el panel de bibliotecas que es Commando Control Shift Y, y este amarillo es lo que me gustaría usar para el color del campo. Y no necesito frontera, así puedo quitar eso. Voy a asegurarme de que se envíe a la parte de atrás usando el atajo o haga clic derecho en Enviar al dorso. Y luego seleccionemos las montañas, y solo voy a redimensionarlas un poco Pero tenga cuidado al cambiar el tamaño, es posible que primero deba desactivar la opción de cambio de tamaño receptivo y luego mantener presionada la tecla Mayús para asegurarse de que los elementos dentro de este grupo se mantengan en el mismo lugar Voy a colocar esto en algún lugar por aquí y asegurarme de que el círculo y la montaña estén alineados en algún lugar aquí en el centro. Entonces podemos seleccionar esta forma aquí, voltearla horizontalmente. Y luego moverlo hacia abajo, y probablemente, tenemos que hacer algo más de espacio aquí. Así que solo tocamos dos veces la mesa de trabajo y la arrastramos un poco hacia abajo Y fíjense que aquí hay un punto de corte. Entonces ese es el tamaño original de la pantalla. Y una vez que aumentes el tamaño verticalmente, eso significa que habrá un scroll vertical habilitado automáticamente. Entonces ahora podemos mover esta forma aquí abajo, aumentar su tamaño, y luego seleccionar la imagen y asegurarnos de que llegue al frente. Así que tráelo al frente. Simplemente aumentemos el tamaño de esto. Nuevamente, asegurándose de que la opción de cambio de tamaño responsivo esté desactivada y mantenga presionada la tecla Mayús mientras la está redimensionando desactivada y mantenga presionada , así que esto puede bajar por aquí Y luego la burbuja del habla, en realidad también quiero estar al frente, que pueda estar en algún lugar ahí. Ahora, todo puede subir ligeramente, y luego la mesa de trabajo también se puede mover un poco hacia arriba. En algún lugar por ahí. Ahora, hay una característica que me gustaría que activaras para esta forma. Es la posición fija al desplazarse. Entonces cuando enciendas eso y pruebas esta pantalla, verás que esa forma en realidad no se mueve hacia arriba y hacia abajo, lo que me gusta bastante. Pero hay otras cosas que tendremos que arreglar aquí, sobre todo para el menú. Pero por ahora, solo me gustaría asegurarme de que tenemos todos los elementos necesarios para la pantalla, y este botón de inicio debería ser un poco más pequeño. Así que sólo voy a cambiar el tamaño de eso. Y alinéelo aquí en la esquina. Y luego necesitamos también un menú a la izquierda, para lo cual voy a usar la herramienta de línea. Manteniendo presionada la tecla Mayús, puedo dibujar una línea recta, aumentar el grosor de esta a dos puntos, cambiar el color del borde a negro y agregar tapas redondas, y luego acercar el zoom Puedo asegurarme de que tenemos tres de estos. Así que viejo haga clic y arrastre una vez, y luego otra vez, asegurándose que tenemos la misma distancia entre ellos. Es posible que necesites un poco más de forma extendida como esa. Y cada vez que creo iconos, siempre me gusta crear una forma vacía detrás de ellos, lo que va a ayudar a crear una región más grande en la que podamos tocar en lugar de simplemente confiar en esas pequeñas líneas delgadas. Entonces fíjense cómo tengo esta forma aquí creada, pero esto será invisible. Voy a apagar el relleno y los colores del borde. Pero luego selecciono todo aquí, así que las tres líneas que vacían la forma y convierten esto en un componente presionando comando Control K. Cualquier icono que uses en múltiples pantallas siempre debe estar configurado como componentes. Porque de esa manera podrás volver fácilmente a tu componente principal, hacer algunos cambios simples, y verás las actualizaciones reflejándose en todas las demás pantallas. Sin mencionar el hecho de que solo tendrás que crear la interacción del menú una vez, y eso también se repetirá en todas las pantallas. Entonces esto está listo como componente. Y voy a hacer lo mismo con el icono de home. Entonces, una vez más, voy a usar rectángulo, dibujar aquí y asegurarme de que esté alineado a esta otra forma. Y luego apago los colores de borde y campo, pero asegúrate de que se seleccione tanto el icono de inicio como esa forma a su alrededor y luego presiono comando o control K y lo como esa forma a su alrededor y luego presiono comando o control vuelvo también en un componente. Ahora, estos componentes se mostrarán en su área de activos de documentos, y allí simplemente puede llamarlo inicio y menú. 11. Finalización de la pantalla de consejos: Y por último, también necesitamos crear una flecha aquí en el lado derecho, para lo cual voy a usar la herramienta pluma, toque una. Después haga clic en algún lugar aquí del lado derecho, y luego haga clic nuevamente aquí, intente que sea igual en tamaño. Sin embargo, siempre puedes ajustar esto más adelante. Pero por ahora, estoy contento con la forma en que se ve esto, así puedo aumentar el grosor de esto tal vez hasta tres o cinco puntos. Establecer tapas redondas y juntas redondas también. El color del borde debe ser negro, y esa es la flecha que necesitábamos. Sólo voy a cambiar el tamaño de esto un poco. Al igual que antes, para esto, voy a crear un cuadro delimitador a su alrededor solo para que sea más fácil poder interactuar con este icono Alinear un poco más cerca y luego apagar la visibilidad de esto, seleccionarlos todos juntos, agruparlos primero como Commando Control G, y duplicarlo en el lado izquierdo, voltearlo horizontalmente. Y ahora podemos crear un componente para cada una de estas direcciones. Entonces el uno hacia la izquierda y el otro hacia la derecha. Entonces cada uno estoy usando Commando Control K, y solo voy a llamar a este derecho y ese fue el izquierdo. Y en realidad no vamos a necesitar la izquierda en esta primera pantalla. Eso lo quitaremos más adelante, pero por ahora, puede quedarse ahí. Y ahora que tenemos todo en su lugar, podemos simplemente duplicar esta mesa de trabajo presionando alter option drag con la herramienta de selección, y entonces nuestra segunda mesa de trabajo va a ser AMH Ese es ser AMH Ese Se puede cambiar el texto ya aquí. Apuntar alto. Podemos mantener el círculo en su lugar, eliminar la imagen, y derribar el activo con la opción de alterar dardos, arrastrarlo aquí abajo, podemos aumentarlo de tamaño después de eliminar la opción de cambio de tamaño receptivo y mantener presionada la tecla mayúsculas, podemos alinearlo en algún lugar allí Entonces podemos eliminar todas estas cosas en la parte inferior, y en su lugar, vamos a necesitar esta imagen aquí. Ya podemos redimensionarlo. Y entonces necesitamos este texto. Y voy a usar esta forma. Simplemente voltearlo horizontalmente. Observe que la posición fija mientras garabea ya está encendida Voy a hacer esto más grande, enviarlo a la parte de atrás, y voy a aplicar este color para ello. Quiero asegurarme de que no haya tangentes, como esta burbuja del habla está actualmente alineada exactamente en el borde de esa forma Así que queremos asegurarnos de que ahí haya una buena separación y un bonito contraste. Eso se ve perfecto. Vamos a seguir adelante, crear la siguiente mesa De nuevo, sólo estoy duplicando esto. A éste, voy a llamar impulso. El texto ya puede cambiar aquí. Escribe tu mismo impulso, puedes quitar los dardos y eliminar todos estos elementos Y en este caso, necesitaremos el cohete. Entonces solo duplico eso, alinearlo aquí en el medio. Necesitamos esta imagen. Necesitamos la copia, y necesitamos la misma forma que usamos aquí, pero volteada hacia el otro lado y cambiada a este gradiente Así que déjame acercarme un poco más para asegurarme de que todo esté configurado correctamente. Entonces esto puede ser un conjunto más grande al frente y configurarlo en algún lugar por ahí. Creo que se ve bastante bien. El cohete también puede ser un poco más grande. Solo asegúrate de desactivar el cambio de tamaño receptivo, mantén presionada la tecla Mayús y solo cambia el tamaño un poco Entonces solo un poquito sale de ese círculo. Y luego último, tenemos una pantalla más. Nuevamente, simplemente copie esto y cambie el nombre del tablero de arte real y llámalo compartirlo. Aquí va el mismo texto, compártelo. Una vez más, podemos eliminar estos elementos. Y traer en el lugar megáfono que aquí, puede aumentarlo un poco de tamaño Entonces necesitamos esta forma, aumentarla de tamaño. Asegúrese de que la posición fija cuando el desplazamiento esté activado. Entonces necesitamos que esta imagen también se incremente de tamaño, y luego el último marco de texto. Entonces ahora acercándonos a esto. Podemos volver a alinear las cosas, asegurarnos de que la imagen esté en la parte superior, pero no cubra el texto en el marco de texto, y esa forma puede ser tal vez un poco más ancha y simplemente recortar afuera así. Así de rápido y fácil fue configurar estas pantallas adicionales, obviamente, tener todos los activos visuales y copiar listos, nos ahorró mucho tiempo. Pero en el siguiente video, configuraremos algunas interacciones divertidas para estas imágenes, y también la interacción para poder pasar de la pantalla de perfil a las pantallas de consejos y también poder movernos entre estas pantallas. 12. Configuración de animaciones: Empecemos por crear la primera interacción en esta pantalla de objetivos. Primero, me gustaría que seleccionaras la forma en el fondo y la imagen de montaña y convirtieras esto en un componente. Eso es Commando Control K. Ahora podemos crear un nuevo estado para esto haciendo clic en el signo más, y el nuevo estado puede renombrarle o simplemente mantenerlo como estado predeterminado dos. Pero lo que es más importante es que necesitamos hacer doble clic dentro de esta para poder seleccionar la montaña. Y luego presionando Commando Control Y en las capas, podremos abrir este grupo. Y te darás cuenta de que en realidad hay más elementos aquí. Esto es de nuevo, algo que seguí adelante y preparé en el photoshop. A pesar de que se trataba de una imagen renderizada aplanada, separé la bandera e incluso creé dos versiones de la misma Tenemos una versión morada y una versión verde, todas ellas dispuestas en capas separadas. Entonces en este nuevo estado, lo que quiero es que se levante tanto la bandera morada como la verde. Entonces solo los seleccioné, y luego usando shiftpero, puedo arrastrarlo hacia arriba hasta que salga justo fuera del círculo, pero aún mostrando detrás de la montaña, así que no quieres levantarlo demasiado alto hasta Pero, sí, creo que solo lo tendré en algún lugar por aquí. Y luego una vez que ambos estén levantados, asegúrate de apagar la visibilidad de la bandera morada. Es importante que ambas banderas se levanten primero y solo después de eso apagando la visibilidad porque esto es necesario para que esa animación automática suave funcione Pero ahora podemos simplemente dar clic afuera, seleccionar este componente, y volver al estado predeterminado y cambiar entre estos dos estados, solo comprobando cómo se ve. Estoy contento con eso. Pero para que esto realmente funcione. Volviendo al estado predeterminado, puedo cambiar al modo prototipo y simplemente hacer clic en uno en esta pequeña flecha aquí y mantenerlo en tap auto animar cambiando al estado dos Después cambiamos al estado dos. Y también asignar otra interacción ahí, que volverá al estado predeterminado con la misma configuración. Así que ahora volvamos al estado predeterminado y pulsemos comando control enter para saltar rápidamente a la vista previa donde ya podemos probar esto, y va en ambas direcciones. ¿Qué tan genial es eso? Entonces hagamos lo mismo aquí con las otras imágenes. Una vez más, empiezo por seleccionar estos y convertirlos en un componente. Volviendo al modo de diseño, podemos agregarle el nuevo estado. Y una vez que se crea ese nuevo estado, podemos tocar dos veces. Primero, seleccionemos dentro de este grupo el tablero, y solo podemos redimensionarlo Nuevamente, manteniendo pulsada la tecla mayús para asegurarnos de que no estropeamos las proporciones. Y también, voy a rotarlo ligeramente. Y entonces este dardo también puede ser girado y luego moverse hacia abajo hacia el centro así. Entonces ahora si hacemos clic afuera, podemos verificar el estado predeterminado y el otro estado. Creo que eso se ve muy bien. Y ahora cambiando al modo prototipo, agregamos el auto animar al estado dos Y para el estado dos, queremos agregar también la animación volviendo al estado predeterminado. Así que ahora podemos probar esto y funciona a la perfección. Hagamos lo mismo en la tercera pantalla de consejos. Una vez más, seleccionamos todos estos elementos, y en modo diseño, los convertiré en un componente, luego agregaré el nuevo estado para ello. Y en el nuevo estado, quiero que el cohete salga un poco del marco y también tal vez gire, y el humo también pueda rotar y salir ahí o tal vez solo un poco así. El cohete también puede ser un poco más grande. Entonces se siente como que viene hacia nosotros. Así que vamos a ver rápidamente esto antes y después. Sí, creo que eso funciona bien. Y luego cambiando al modo prototipo, asignamos la primera interacción para cambiar al estado dos. Entonces desde el estado dos, queremos poder volver al estado predeterminado, y luego otra vez, probarlo rápidamente. Ahí está. Efecto. Y entonces, por último pero no menos importante, nos gustaría convertir estos también en un componente. No obstante, aquí, me gustaría añadir también algunos elementos mediante el uso del pano. Entonces todo lo que necesitas hacer es dibujar un poco de forma como esta, usando el pano. Entonces es como un pequeño relámpago. Pero no necesitamos el color del borde. En cambio, queremos usar un color rojo. Estoy usando la herramienta hidroper y muestreando un color del megáfono Entonces esa va a ser una forma que necesitaremos. Y vamos a duplicar esto una vez y otra vez. El que está en el medio, podemos voltear verticalmente, y luego estos podemos simplemente rotar alrededor, tal vez cambiar el tamaño un poco, y luego quiero alinearlos. Aproximadamente donde terminarán en. Pero entonces ahora, voy a seleccionar los tres, y luego usando el soporte izquierdo de control de comando, voy a mover hasta que vayan detrás del megáfono Así que están delante de la forma, ese círculo amarillo, pero detrás del megáfono, y simplemente muy bien y v ahí Ahora, teniendo todos estos seleccionados juntos, podemos crear nuestro componente y luego agregar un nuevo estado para ello. Y en ese nuevo estado, me gustaría mover un poco las cosas. Entonces, antes que nada, me gustaría que esta imagen aumentara de tamaño, también tal vez rote. Y después tener esas partes seleccionadas. Podemos simplemente sacarlos y tal vez aumentar un poco su tamaño. Así que volvamos al estado predeterminado y cambiemos entre los dos estados, solo podemos ver una vista previa rápida de cómo va a quedar esto. Pero para agregar la característica de auto animación, cambiamos a prototipo, clic en este selecto estado dos Y luego para el estado dos, queremos agregar otra interacción, y el destino esta vez es el estado predeterminado. Una vez más, si hacemos una vista previa sobre esto, funciona a la perfección. 13. Interacciones entre pantallas: Ahora es el momento de configurar las interacciones entre estas pantallas, y en realidad no voy a necesitar una flecha en ese lado. Además, no necesito esta flecha del lado izquierdo. Así que solo presiono el espacio atrás mientras los tengo seleccionados, y podemos comenzar con esta flecha. En el modo prototipo, hacemos clic y arrastramos la flecha azul para configurar una interacción con el destino en la segunda mesa Y para el tipo de animación aquí, me gustaría usar transición. Y para la animación, me gustaría usar push left en lugar de disolver. La duración y la flexibilización pueden ser la forma en que es por defecto. Una vez más, si lo acabo de previsualizar, siento que es lo suficientemente rápido, y creo que funciona bien. Entonces ahora que tenemos ese configurado, podemos continuar con la otra flecha derecha, crear la interacción a la siguiente pantalla. Observe que va a usar la misma configuración nuevamente. Así que podemos simplemente configurar muy rápidamente este y mover la interacción en la última pantalla. Entonces solo estoy comprobando que todos van de la manera correcta. Y luego comencemos con éste. Entonces esta es la transición hacia atrás. A partir de aquí, queremos ir ahí. Y en lugar de empujar a la izquierda, queremos usar push right, se aplican los mismos ajustes. Entonces éste puede volver a ir allí, mismos ajustes. Y entonces finalmente este puede ir ahí con los mismos ajustes. Entonces ahora si probamos esto, puedes ver cómo podemos cambiar entre las cuatro pantallas de consejos. Así que eso funciona a la perfección. Y cada una de estas animaciones, también podemos probar. Todavía funcionan de la manera que queríamos. Y luego finalmente, tenemos que asegurarnos también de que desde la pantalla de perfil, podamos saltar a la primera pantalla de consejos. Entonces, antes que nada, asegúrate tener el botón y el texto seleccionados juntos. Puedes convertirlo ya sea en un grupo o en un componente. Eso es Commando Control G, si quieres convertirlo en un grupo o Commando Control K, si quieres convertirlo en un componente. La principal diferencia entre ambos es que si creas un componente, siempre puedes asignarle estados o animación además de aplicar una interacción. Entonces realmente no importa aquí porque no voy a hacer ninguna animación en el botón, sino que solo voy a crear la interacción rápidamente a la primera pantalla de consejos. Y en este caso, quiero usar push left. Así que vamos a probar este también. Al hacer clic en cualquiera de estas opciones, aún podemos cambiar los alternadores Y una vez que estemos contentos con la selección, haciendo clic en obtener sus respuestas, saltaremos a la primera pantalla de consejos que creamos. Y como tenemos todas nuestras mesas de trabajo listas, vamos a enganchar también la pantalla de bienvenida Entonces, al tener esta seleccionada, esta es la que queremos configurar como nuestra pantalla de inicio. Entonces, al hacer clic en ese pequeño icono aquí en modo prototipo, configuraremos nuestro primer flujo. Esta puede renombrarse a app. Y luego a partir de aquí, quiero crear un disparador de tiempo a la siguiente pantalla. Así que sólo voy a arrastrar esta flecha ahí. Y en lugar de tocar, voy a configurar esto a tiempo y tal vez configurarlo por 3 segundos. Y la animación, esta vez se puede configurar para empujar hacia arriba, y tal vez la duración se puede establecer en 1 segundo. Entonces vamos a ver esto si probamos esto después de 3 segundos, va a bajar. Creo que la facilidad de salida debería cambiarse para facilitar adentro hacia afuera. Vamos a probar esto de nuevo. Sí, eso es mucho mejor. Pero la duración puede ser tal vez incluso más larga 1.5 segundos, una prueba más. Sí, eso es mucho más agradable y más suave. Así que ahora podemos atravesar todos los tableros de arte o todas las pantallas que creamos. Y en el siguiente video, estaremos agregando todas las opciones de navegación adicionales como el menú principal, conectaremos el ícono de inicio, y también agregaremos la opción de ayuda para la pantalla de perfil 14. Menús adhesivos: Lo primero que tenemos que arreglar es asegurarnos de que nuestro menú esté siempre visible. Déjame mostrarte a lo que me refiero. Si previsualizo esto y me desplazo, el menú desaparece en la parte superior, por lo que será difícil cambiar sin tener que desplazarse de nuevo hacia arriba. Así que quiero mantener este menú siempre visible aquí, y normalmente llamamos a esto un menú pegajoso. Y para poder hacer esto, antes que nada, en modo diseño, voy a dibujar un rectángulo detrás de estos elementos. Me aseguraré de que vaya hasta el fondo por ahora. Arrastra esto tal vez en algún lugar por aquí. Y por cierto, estoy guardando el texto aquí porque sé que hay una muesca en el teléfono ahí, así que no debería estar superponiendo eso. Pero para esta forma, no quiero usar un borde, solo un campo blanco. Pero tenga activada esta opción llamada desenfoque de fondo. Podemos refinar los ajustes para esto más adelante. Pero por ahora, me gustaría seleccionar también todo aquí en la parte superior y agruparlos junto con el comando Control G. Y una vez que se conviertan en grupo, podemos fijar su posición al desplazarse Esto lo convierte en un menú pegajoso. Entonces ahora si prueba esto , cuando me estoy desplazando, puedes ver que todos se quedan ahí arriba, y tenemos esa característica de desenfoque de fondo genial establecida en ese cngle Si queremos, siempre podemos volver atrás, hacer doble clic en él, y luego ajustar la configuración. Podría reducir la exposición y tal vez aumentar la opacidad de la forma misma al 20% Así que vamos a probar esto. Sí, siento que se ve un poco mejor. A lo mejor se puede incrementar la exposición. Volvamos a comprobarlo. Sí, un poco mejor. Creo que se ve bien. Y en realidad necesitamos hacer lo mismo en estas otras pantallas. Pero para ahorrar tiempo, voy a configurar estos en realidad una vez que tengamos este primer menú en pleno funcionamiento. Así que en realidad voy a eliminar a estos fan. Entonces todos esos elementos que preparamos aquí, podemos simplemente retroceder y eliminarlos. Eso lo sabemos. Los estaremos agregando ahí, pero, volvamos a esta primera instancia y cambiemos al modo prototipo. Doble clic sobre esto. Puedo seleccionar el icono de inicio. Y eso estará vinculado a la pantalla de perfil. Y en este caso, solo me gustaría tener una transición normal de disolución, que es como un desvanecerse. Facilitar y salir para flexibilizar es bueno. Pero la duración tal vez se pueda establecer en 0.6 segundos. Para que podamos probar esto, ver cómo se siente. Creo que eso es bueno. Podría ser un poco demasiado lento, así que sólo podemos volver aquí, otra vez, seleccionar eso y bajar a 0.4 segundos. Vamos a eso una vez más. Sí. Creo que está bien. Pero esta fue la más fácil de configurar. Para el menú real, también tenemos que crear un tablero de arte separado que va a albergar nuestros elementos del menú. Entonces será como un menú desplegable o emergente. Y para esto, voy a crear esa nueva mesa de arte justo encima de estas otras mesas Entonces en el modo de diseño, cambiando a la herramienta mesa de trabajo, primero voy a crear una mesa de trabajo, pero esta no tiene que ser una mesa de trabajo de altura completa, así que puede ser un poco más corta Así. Y voy a llamar a este menú, y podemos acercarnos un poco más. Y antes que nada, voy a crear una forma aquí, que va a ser el propio menú. Podemos agregar esquinas redondeadas. Pero no necesitamos esquinas redondeadas en todos los lados. Entonces aquí en las opciones, podemos dar click en este pequeño go, y podemos encontrar el radio para todas las esquinas. Quiero poner la parte superior izquierda y derecha a cero. Entonces esos son los primeros y los segundos, hay que poner a cero. Hay una indicación sutil de qué esquina estás afectando cuando seleccionas un número. Entonces esa pequeña línea azul de ahí te dice que estás trabajando con la esquina superior izquierda o la esquina superior derecha. O también puedes esperar un poco y obtendrás la punta de la herramienta diciéndote cuál es cuál. Pero ahora que tenemos la configuración, voy a quitar el color del borde. Voy a mantener el color del campo puesto. Pero luego agregaré una sombra, y voy a aumentar la visibilidad u opacidad de esto haciendo clic en la muestra y simplemente arrastrando esta hacia arriba, probablemente Y luego el desenfoque, también voy a establecer en 15, así que crea un borde un poco más suave así. A lo mejor el 50% es un poco duro. Así que vamos a bajarlo al 30%. Sí, eso es un poco más sutil. Creo que eso se ve mejor. Ahora, voy a copiar el texto de aquí. Entonces necesitamos los cuatro de estos, duplicarlos y alinearlos todos a la izquierda. Y entonces solo movamos eso hacia abajo. Mueve este hacia arriba. Entonces el orden debe ser establecer tus metas primero, luego apuntar alto, luego impulsarte, y luego finalmente compartirlo. Entonces una vez que tenga ese orden, puedo colocar el texto aquí, y tal vez podamos reducir un poco el tamaño a 18 puntos. Creo que eso va a encajar mejor. Una vez más, dejó una línea, y luego podemos simplemente alinearla dentro de este desplegable. Y solo necesitamos un icono de X aquí, que ya tenemos preparado en los activos. Sólo puedo arrastrar eso otra vez aquí. Configúrelo en algún lugar allí, y esta x puede ser un componente. Entonces presiono comando o control K, pero todo el menú también debería ser un componente. Entonces selecciono todo junto. Y nuevamente, presione comando o control K. Así que en este caso, debido a que creamos un componente primero para un elemento que estará dentro del componente principal, el anidamiento se configuró en el orden correcto Recuerda, cuando antes estábamos luchando creando este componente anidado, puedes ver que el orden correcto es siempre empezar a crear primero un componente, que luego se envolverá en otro componente Y puede tener incluso múltiples niveles de componentes anidados entre sí Y siempre y cuando comiences con el elemento más pequeño, y luego trabajes tu camino hacia afuera, creando los componentes adicionales, no tendrás ningún problema configurándolos correctamente 15. Superposición de menú: Ahora que tenemos este menú, necesitamos engancharlo a las otras pantallas. Entonces cambiemos al modo prototipo. Y aquí, voy a hacer doble clic hasta que pueda seleccionar el icono del menú y arrastrarlo a esta mesa Por defecto, esta va a ser una transición normal, pero nos gustaría cambiar esto a overlay, lo que cambiará esta línea sólida a línea de trazos. Así es como XD está indicando lo que estamos haciendo. Y también fíjate que obtenemos una vista previa de dónde va a aparecer esta superposición. Y esto en realidad es algo que podemos arrastrar hasta aquí. Ahí es donde quiero que aparezca. Y la animación, me gustaría que se deslizara hacia abajo. Podemos tener facilidad de entrada y salida. A lo mejor 0.4 segundos es bueno, y solo podemos probar esto. Veamos cómo funciona. Si hacemos clic en eso, el menú baja. Si hago clic en algún lugar afuera, vuelve a desaparecer , baja, desaparece, y por cierto, es un comportamiento predeterminado en XD Cada vez que hace clic en AA desde un elemento de superposición, invierte automáticamente la animación original No obstante, siempre me gusta tener una para cerrarla así como esta de aquí. Y lo bueno es que en realidad no tienes que asignar ninguna interacción a eso, porque mientras no haya un elemento activo aquí, hacer clic sobre eso también cerraremos ese menú, igual que haciendo clic en cualquier otro lugar, aparte de los elementos activos, que configuraremos en estos objetos de texto. Entonces para hacer eso, todo lo que tengo que hacer es volver a nuestro menú. Haga doble clic, seleccione el primer texto y arrástrelo a esta pantalla. Pero esta vez, hay que tener cuidado para volver atrás y cambiar la opción de superposición a la transición. Entonces la superposición sólo es necesaria para que aparezca este menú flotante. Pero desde ese menú flotante, te gustaría hacer la transición a estas pantallas con una transición normal, no superpuesta. La razón por la que estaba surgiendo por defecto con superposición es porque ese fue el último tipo de acción o acción utilizada. Así que solo asegúrate de no olvidar cambiar eso a la transición. Y luego con el menú, recomiendo usar disolver, y probablemente puedas usar como out y tal vez 0.3 segundos. Así que vamos a configurar lo mismo para las otras tres pantallas. Aquí no tenemos que cambiar nada. Ahora de nuevo, recuerda los últimos ajustes, y esta vez, no es una superposición Es la transición, entonces la opción correcta. Entonces para compartirlo, tenemos el último ahí. Ahora bien, este menú está completamente enganchado, así que podemos probarlo. Damos click aquí, baja, saltamos a un alto, y podemos volver aquí, otra vez, seleccionar arranque usted mismo, va en el lugar correcto, y luego podemos hacer compartirlo también. Y una vez más, también podemos navegar entre estos fácilmente. Pero ahora también podemos agregar ese menú pegajoso en todas estas pantallas. Así que simplemente podemos duplicar esto. La forma más rápida de hacerlo sería presionar comando o control C para copiar, y luego seleccionar esta siguiente mesa Pulsa Commando Control V, lo pegamos exactamente en el mismo lugar, lo mismo aquí, lo mismo ahí. Y fíjate como ya tiene todo enganchado. Entonces el icono de inicio vuelve a la pantalla de perfil. El menú trae a colación esta superposición, y lo único que tendremos que cambiar son los títulos. Entonces vamos a hacer doble clic tipo en una h. para esta, quiero usar boost tú mismo. Y aquí, escribe en compartirlo, y eso es todo. Una vez más, podemos probar esto. Puedes usar el menú para saltar a la siguiente pantalla. Podemos desplazarnos hacia arriba y hacia abajo para probar nuestro menú pegajoso en la parte superior con esa función de desenfoque de fondo. También tenemos nuestras animaciones. El menú funciona aquí igual que antes. Podemos saltar a la siguiente pantalla desplazarse hacia arriba y hacia abajo obras, trabajos de animación. Las flechas también deberían funcionar. Pero vamos a probar el menú, compartirlo va en el lugar correcto. El desplazamiento también funciona, y el icono de inicio también debería funcionar desde cualquiera de estas pantallas 16. Ayuda Configuración de la pantalla del menú: Ya que estamos de vuelta en la pantalla de perfil, no olvidemos configurar el menú Ayuda, que va a funcionar de manera muy similar a este otro menú que creamos. Solo voy a alejar de nuevo, alejar los activos del camino, y voy a crear una nueva mesa de trabajo en el modo de diseño, usando la herramienta mesa Yo solo creo esa nueva mesa de trabajo, y voy a renombrar esto y llamarlo ayuda Puede colocar esto en algún lugar por aquí. Y ahora sólo podemos reutilizar este otro elemento. Desde dentro de ese componente, creamos un doble clic, seleccionamos esa forma, copiamos y luego la pegamos aquí, solo vamos a girarla alrededor, así arrástrala hacia arriba y colócala en esta esquina. Probablemente tenemos que hacerlo más largo, y entonces podemos simplemente copiar este componente x y ponerlo en la esquina superior derecha. Nuevamente, no vamos a tener que vincularlo realmente. Solo asegúrate de que esté ahí, y luego copiaremos este texto que he preparado, y simplemente lo pegamos aquí, a lo mejor necesitamos un poco más de espacio para esto. Y sí, creo que se ve bien. Ahora solo puede arrastrar esto un poco. Y eso es todo lo que necesitábamos para esta otra superposición que creamos. Pero es importante que esta mesa de apague el color del campo en el fondo De lo contrario, va a encubrir completamente lo que hay debajo de él. Hay algo que para el menú también, es importante que te asegures de que haces. Pero XD por defecto va a eliminar el fiel una vez que crees la interacción de superposición Para lo cual, si recuerdas, solo hay dos cosas necesarias. En primer lugar, asegurándose de que en esta nueva mesa de trabajo, todos estos elementos estén envueltos en un componente Eso es comando Control K. Y luego dentro de la opción prototipo, cuando seleccionamos el signo de interrogación, queremos asegurarnos de que esté enganchado a esta mesa Sin embargo, si recuerdas, donde quiera que use iconos, siempre me gusta crear un cuadro delimitador más grande alrededor de ellos. Entonces eso es algo que no quiero olvidar agregar aquí también. Simplemente voy a dibujar esta forma, permitiendo mucho más espacio para poder tocar esto porque no hay nada más molesto que tener que tocar un par de veces en algún lugar para poder iniciar la interacción. Entonces voy a apagar boarder y llenar, pero selecciono todo esto juntos y convertirlo en un componente Y ahora que es un componente, puedo volver a cambiar al prototipo, engancharlo a esta nueva mesa de trabajo y configurarlo también como una transición de superposición La animación esta vez se puede deslizar hacia la izquierda porque viene de la derecha, por lo que va a deslizarse hacia la izquierda. Y la alineación de la misma ya es buena. Ya que uso el mismo tamaño exacto de mesa de trabajo, no tuve que hacer ningún posicionamiento manual aquí Y en lugar de simplemente facilitar, creo que la facilidad de entrada y salida es mejor y tal vez 0.5 segundos para esto. Así que vamos a probar esto. Si hago clic en la ayuda, entra, Y no importa donde haga clic, la va a esconder. Para que pueda volver a hacer clic en él, hacer clic en cualquier otro lugar, así sucesivamente y así sucesivamente. Y por cierto, si quieres que los detalles en el fondo se difuminen un poco, siempre puedes agregar otro rectángulo aquí en el tablero de arte de ayuda Sin el borde, solo una sensación de color. Asegúrese de que esté configurado todo el camino en el fondo, y luego simplemente haga clic en el desenfoque de fondo. Entonces ahora, si volvemos aquí, cuando haga esto, va a tener ese desenfoque apareciendo ahí. El único problema es que también se desliza en ese desenfoque de fondo en lugar de hacer una transición agradable Entonces veamos antes y después. Y claro, hay formas de arreglar esto, pero no quiero complicar demasiado las cosas Así que sólo voy a borrar esa forma, y creo que funciona bien tal como es. Y la buena noticia es que ya tenemos la app en pleno funcionamiento. Todos los elementos están en su lugar, y todas las navegaciones están listas, por lo que podemos hacer una prueba final a partir de la pantalla de bienvenida Tenemos nuestra animación interaccional cronometrada. Tenemos nuestros togos con los que podemos jugar. Y luego también podemos consultar nuestra ayuda. Después ve a las respuestas, desplázate hacia arriba y hacia abajo, salta a través de ellas. Consulta las animaciones aquí también. Vuelve a la página principal, o vuelve a las respuestas y usa el menú. Y parece que todo está funcionando como se supone que debe hacerlo. Por lo que ahora que la aplicación está completa, en el siguiente video, vamos a convertir esto en un prototipo de sitio web de una sola página. 17. Diseño de sitio web: La buena noticia es que armar este sitio web será mucho más rápido que construir la aplicación. Como ya tenemos todos los elementos diseñados directamente aquí en XD, y podemos reutilizar muy rápidamente todos estos en ese nuevo formato que comenzaremos por crear un nuevo tablero de arte Y esta vez, voy a usar el b 12 80, y podemos colocar esto aquí y simplemente renombrarlo también a página web. Y ya lo voy a extender porque sé que necesitamos más espacio debajo de él, y ese punto de corte marca nuestro primer pliegue dentro del sitio, que es el que primero será visible en la mayoría de las pantallas. Ahora, comencemos copiando cosas. Entonces voy a seleccionar todo en esta pantalla de bienvenida, viejo click y drag, colocándolos aquí. Y entonces estaré moviendo las cosas bastante rápido porque ya no tengo que explicar los pasos. Creo que va a tener sentido lo que estoy haciendo. Entonces estoy redimensionando que el crecimiento va a ser nuestro menú. Eso es parte del menú. La imagen puede estar aquí a la derecha, tal vez incrementada de tamaño. Un poco. Así. El texto puede estar en este caso, alineado a la derecha y aumentado un poco de tamaño. Si alguna vez tienes cosas que se superponen entre sí, como en este caso, sería difícil seleccionar el texto. En lugar de mover esta imagen av, solo puedes abrir el panel de capas. De esa manera puedes seleccionar muy rápidamente cosas que están ocultas y luego solo usar las teclas de flecha del teclado, manteniendo pulsado la tecla Mayús, puedes moverlas más rápido también, y creo que esa va a ser una buena ubicación para el texto. Así que está muy bien alineado con la cabeza. Entonces vamos a duplicar este texto aquí, y voy a escribir goles. Voy a poner esto a todas las mayúsculas con este icono, y lo cambio a regular y también reducir el tamaño arrastrándolo hacia arriba. De hecho, podría ser mejor en medio, y lo alineo con el centro de ese texto, y luego podemos simplemente duplicar esto y luego comenzar a escribir un alto nuevamente, duplicar el impulso de escritura, y luego una vez más compartir. Y por cierto, aquí es donde sería útil configurar un estilo de personaje. Entonces, si entramos en las bibliotecas o los activos de documentos, teniendo uno o todos estos seleccionados, podemos tocar el signo más aquí en estilos de caracteres. Y ahora lo ha guardado. Por lo que de esta manera será mucho más fácil hacer cambios en los cuatro elementos a la vez. Simplemente viniendo aquí al estilo del personaje, elige editar. Si tecleo, digamos, 35 para el tamaño, ya ves de inmediato, todos ellos se actualizarán. Entonces esa es una característica muy útil, recomiendo encarecidamente usar estilos de personajes. Al igual que en las otras aplicaciones de DOB, puede ahorrarle mucho tiempo Y sólo voy a usar una pequeña línea entre estos para separarlos. Entonces déjame dibujar esa línea. Yo configuré esto en gorras redondas blancas, y el tamaño para ser tal vez tres puntos, y luego simplemente arrástralo un poco hacia arriba y luego duplicarlo. Entonces queremos otro ahí y otro ahí. Bien, entonces ese es nuestro menú. Esto también puede ser un poco más alto. Y en realidad, todo puede ir un poco más alto. Simplemente selecciónelos juntos. Moviéndolos hacia arriba. Entonces vamos a traer los elementos adicionales que necesitamos. Entonces necesitamos que este describa usted mismo texto, que podemos colocar aquí, y luego todos estos componentes, podemos copiar y pegar en esta mesa Pero no vamos a necesitar las formas en este caso, así que solo podemos separarlas primero y eliminar rápidamente estas formas. Haga doble clic en Eliminar, haga doble clic en Eliminar, haga doble clic en Eliminar. Y no tienes que preocuparte por estropear tus otras versiones porque son los componentes principales o componentes maestros Y estas son solo instancias de ellas. Entonces estas anulaciones que hacemos aquí no afectarán a las originales. Pero aún así en caso de que hagamos cambios al original, y esto afecte, digamos el texto o estas imágenes, seguirán conectados y actualizándose en esta versión del sitio web también. Así que solo voy a colocar estas tres opciones aquí, y podemos probar esto ya con el comando Control Enter, y vemos las formas apareciendo en el segundo estado así que eso es algo que también tenemos que arreglar. Sólo voy a seleccionar estos cambiar al segundo estado. Y haga doble clic en eliminar, eliminar, eliminar. Y luego asegúrate de que estos se ajusten al estado predeterminado. Entonces, una vez más, solo podemos verificar dos veces si funciona o no. Sí, eso funciona, eso funciona también. Todo bien. Perfecto. Entonces el primer pliegue está hecho. Ahora se trata de copiar el resto. Entonces comencemos con estos. Al ir a copiar estos, pégalos aquí. La forma que no vamos a necesitar por ahora. Este componente puede estar aquí. El texto puede estar en el medio y la imagen a la derecha. También podemos copiar ese texto que establezca tus metas, que en este caso, como tenemos una pantalla más grande, podemos hacer más grande, nuevamente, otra que vale la pena guardar como estilo de personaje. Y por cierto, también vale la pena nombrar tus estilos de personaje, para que sepas dónde los usas. Entonces voy a renombrar esto y llamarlo secciones del sitio. Mientras que este otro es el menú del sitio. Por lo que nos hemos fijado sus metas. Ahí tenemos nuestra imagen. Y en este caso, sólo podemos hacer doble clic en y podemos eliminar este triángulo de burbuja de voz. Porque aquí, solo quiero el texto por su cuenta. Y tal vez esta imagen pueda ser más grande manteniendo pulsada la tecla Mayús. Sólo voy a redimensionarlo. Y entonces sólo vamos a repetir lo mismo para estas otras pantallas. Así que solo voy a acelerar un poco las cosas antes que terminemos con algunos toques finales en el sitio. 18. Incorporación de interacciones al diseño de sitios web: Entonces esta es la versión final del sitio. Como pueden ver, he creado un patrón alterno aquí. Entonces tenemos las imágenes alternando con los marcos de texto. Entonces tenemos un zig zag creado solo para hacerlo un poco más dinámico. Además, también tenemos estas formas, una a la izquierda y otra a la derecha, reutilizadas y reutilizadas desde la app Y si ya probamos esta página, también deberíamos tener estas pequeñas interacciones trabajando aquí. Que en el caso de un sitio web podrían ser efectos de paralaje, que es algo que podemos comunicarnos fácilmente con el desarrollador y el cliente Pero para agregar un poco de interacciones adicionales aquí, me gustaría asegurarme de que el menú se mantenga pegajoso, manera similar a cómo lo hemos hecho en la aplicación. Pero para eso, primero, tendré que crear otro rectángulo en algún lugar por ahí. Asegúrate de que usa el mismo gradiente que detrás de él. Sólo voy a cambiar el color del campo a degradado lineal. Y luego voy a probar estos colores, así que necesitamos este color a la izquierda, y necesitamos ese color a la derecha. Y solo tenemos que asegurarnos de que las dos paradas de gradiente también estén alineadas. Entonces ahora desapareció casi por completo. Pero ahora que esto está en su lugar, podemos simplemente seleccionar todo aquí en la parte superior aparte de esa gran forma en el fondo. Sólo tienes que hacer clic en eso. Y agrupando estos junto con Commando Control G, podemos asegurarnos de que esto se solucionará al desplazarse Entonces ahora si vengo aquí, cuando estoy scroll hacia abajo, se puede ver que está ahí arriba. Y lo único que tenemos que asegurarnos que hacemos es que esté puesto todo el camino en la parte superior. Entonces todo lo demás está debajo de él. Entonces, al tener estos grupos seleccionados, solo nos aseguramos de llevar esto al frente. Entonces ahora probando esto, funcionará perfectamente. Y esto es, por cierto, algo que tienes que asegurarte con estos menús también. Entonces estos, por supuesto, tendrán que estar también encima de todo lo demás. Especialmente en caso de que estés planeando aumentar la longitud de estas pantallas, el menú siempre debe estar por encima de todo lo demás. Pero como tenemos nuestro menú creado, también debemos agregar algunas interacciones en él. Entonces vayamos a la opción de prototipo. Haga doble clic dentro de este grupo, y comenzando con el logotipo y el nombre del sitio, podemos simplemente agarrar esta pequeña flecha y arrastrarla a esta forma grande aquí en el fondo. También podemos simplemente arrastrarlo aquí para asegurarnos de que la forma está seleccionada. Y luego fíjate como XD ya entendió que queremos desplazarnos a esto de barril Esto es importante porque tenemos un menú pegajoso. Entonces si bajo, digamos aquí, una vez que haga clic en eso, simplemente se desplaza de nuevo hacia arriba enseguida. Y ahora para estas otras opciones aquí, vamos a hacer lo mismo, así que selecciono goles y baje asignarlo a ese rubro ahí. Una vez más, vamos a probar esto. Y va ahí abajo, pero el problema es que el menú pegajoso está encubriendo ese texto. Entonces tenemos que asegurarnos de que hay algo que cree un desplazamiento a partir de este texto. Y de manera similar a la técnica que he hecho antes en torno a los iconos, necesitamos crear un área segura, que creará ese desplazamiento. Así que sólo voy a volver al modo de diseño, usar la herramienta rectángulo. Y solo dibuja algo como esto, asegúrate de que vaya por la parte de atrás y no tenga borde y sienta colores. Pero teniendo eso seleccionado junto con el texto, podemos crear un grupo. Y lo mismo que voy a usar para los demás también. Así que simplemente voy a copiar esa forma, luego moverla hacia abajo, asegurarme de que haya suficiente espacio arriba de ahí. Y entonces otra vez, mantengamos el borde puesto por ahora solo para que pueda ver estas formas. Ahí hay otro. No importa lo ancho que sea. Es solo la cantidad de espacio que mantenemos por encima de él es lo importante. Yo creo, eso va a funcionar. Así que vamos a configurarlos todos como grupos, y voy a quitar ese color de trazo más adelante. Entonces solo tenemos que asegurarnos de que tenemos esa opción de compartir también seleccionada y agrupada. Entonces ahora, en modo prototipo, podemos enganchar las cosas. Entonces para los goles, queremos desplazarnos a este grupo aquí, para un alto, queremos desplazarnos más hacia abajo hasta este otro grupo. Y antes de ir más lejos, sólo voy a probar esto. Entonces veamos goles. Tendremos que aumentar la altura de ese rectángulo, un alto. Aquí va lo mismo. Y alto en realidad ahora terminó por estar en la parte superior del menú porque creamos ese grupo que llegó a la cima. Así que vamos a arreglar esto ya ahora. Entonces selecciono el menú pegajoso, lo llevo todo el camino al frente, eso fija la alineación, y luego podemos seleccionar estas formas, hacer doble clic y luego en modo diseño. Sólo puedo extenderlo un poco más, y lo mismo ligeramente vamos a necesitar en estos otros. Podemos extender y extender. Y como estamos aquí, simplemente apaguemos también ya el borde en estas formas. Simplemente hago doble clic cada vez para ir dentro de los grupos. Y ahora podemos volver al menú, y en modo prototipo, selecciono la palabra boost. Baja a impulsarte grupo, y luego compartir, baja todo el camino hasta allí. Así que vamos a probar esto una vez más. Va perfecta alineación un alto. Eso también es perfecto. Impulsarse y compartir. No hay más contenido aquí en la parte inferior, así que no puede desplazarse más allá de esto. Pero también tenemos nuestra opción de casa con la que podemos ir todo el camino de regreso a la cima. Y así de rápido fue crear un prototipo de sitio web en pleno funcionamiento, redestinando todos los elementos que usamos para la aplicación Y en el próximo par de videos, haremos otra versión del prototipo del sitio web mostrando el desplazamiento de paralaje 19. Desplazamiento paralaje: Y como pueden ver, siempre me gusta comenzar con la versión estática final de esa sola página de desplazamiento que luego puedo duplicar y comenzar a agregar todos los movimientos y cambios necesarios para el efecto de desplazamiento de paralaje Desafortunadamente, actualmente en NDBXD la creación de estos efectos de paralaje solo es posible creando estas mesas de trabajo duplicadas Pero en el futuro, podrían agregar algunas características que facilitarán este flujo de trabajo. Pero por ahora, como dije, tendremos que crear mesas de trabajo duplicadas Pero primero, déjame mostrarte este sitio web. Entonces si solo te muestro la vista previa para ello, es comando control enter para llegar rápidamente a la previsualización, esto ya tiene algunos elementos que funcionan. Entonces estos son simples alternadores que edito en estos, y se configuran como componentes con estados separados Y luego si me desplazo hacia abajo, también tenemos algunos componentes más abajo aquí con los que ya podemos interactuar. Pero como puedes ver en este momento, esta es solo una simple página de desplazamiento Una cosa que me aseguré ya es que el menú siempre se mantenga en la parte superior, y esa es una característica muy simple que puedes encontrar en XD Solo asegúrate de seleccionar ese grupo o elemento, que es tu menú. Y luego aquí en las opciones, solo elige la posición fija al desplazarte Entonces, si me quito eso y lo vuelvo a probar, entonces el menú saldrá de la pantalla, lo que obviamente, en este caso, no queremos, entonces, simplemente volveremos a encenderlo. Sin embargo, esta opción no será realmente necesaria para la forma en que estaremos configurando nuestras múltiples mesas de trabajo, para lo cual, lo que es mucho más importante es asegurarnos de que este menú esté configurado como un componente Entonces por el momento, es solo un grupo sencillo, puedo checar aquí en las capas. Es sólo un grupo. Entonces lo que voy a hacer es presionar comando Control K para convertirlo en un componente. Entonces esto va a ser necesario una vez que tengamos múltiples mesas de trabajo, pero aún así queremos asegurarnos de que las interacciones que asignemos a cada uno de estos elementos del menú se apliquen en todas nuestras mesas de Pero volveremos a eso más tarde. Por ahora, solo recuerda, cualquier cosa que necesites como componente, por lo que todos los elementos interactivos como botones, menús, iconos deben crearse primero como componentes. Y entonces lo segundo y más importante que tendrás que hacer antes de empezar a duplicar tu mesa de trabajo es seleccionar todo en esta mesa es seleccionar todo en esta Y luego agruparlos, así que eso es comando o Control G. Así que esto realmente va a hacer que seleccionar las cosas sea un poco más complicado porque siempre tendrás que hacer doble clic para entrar al grupo y luego mover las cosas Pero esto es necesario para la animación de desplazamiento paraax. Sin todo agrupado al principio, tendrás muchos problemas más adelante. Así que recuerda hacer esto desde el principio. Pero ahora estamos listos para comenzar con las animaciones de introducción que nos gustaría agregar al sitio Entonces este aún no es el desplazamiento paraax. Esto es solo las animaciones en el primer pliegue. Entonces para esto, ya voy a duplicar la mesa de trabajo Entonces utilizo la herramienta de selección, y en modo diseño, solo mantengo presionada la tecla alter option y la arrastro hacia la derecha. Asegúrate de tener suficiente espacio a la derecha de tu mesa de trabajo original porque estarás agregando bastantes de estas dependiendo de lo complejo que sea tu sitio Y también, me gusta mantener una buena cantidad de brecha entre las dos mesas de trabajo porque puede haber algunos elementos superpuestos, y puede ser un poco confuso trabajar con ellos Así que a veces hasta hacía que ese espacio fuera más grande. Y más tarde tal vez acercarlos solo para ordenar las cosas. Entonces, antes que nada, me gustaría tener una linda animación sobre el elemento de fondo, esta linda curva que tenemos aquí. Así que en realidad no necesito este personaje o el texto o incluso el menú, y de hecho incluso voy a eliminar estos. Así que solo los selecciono y los borro. Entonces ahí sólo tenemos esa forma. Y lo que voy a hacer con él es agrandarlo realmente, así que voy a hacerlo más grande. Y luego haciendo doble clic sobre él de nuevo, puedo acceder a los puntos de anclaje dentro de él, e incluso puedo moverlos alrededor. Entonces lo que quiero crear aquí es una animación agradable cuando esta curva se va a ajustar. Entonces me aseguro de que cubra toda la pantalla. Y se puede ver que en esta mesa de trabajo, ya tenemos la altura de la ventana gráfica establecida Entonces esa es esa línea de trazos que aquí se indica. Lo que eso significa es que cada vez que pruebo esto, la ventana solo mostrará esa área. Ahora, actualmente, no podemos ver ninguna animación. Apenas podemos ver cómo va a quedar este bonito degradado suave. Pero una vez cambiamos al modo prototipo y seleccionamos toda la mesa Eso es muy importante. Entonces no quieres asignar la animación a elementos individuales. Quieres asegurarte de que se selecciona toda la mesa de trabajo y luego arrastra esta pequeña flecha a la mesa de trabajo duplicada Ahí podemos elegir a qué queremos que se asigne la animación. Entonces en este caso, en realidad lo configuré a tiempo, y me aseguro de que el retraso esté establecido en cero segundos. Esto significa que automáticamente se activará directamente una A tan pronto como probemos esto como prototipo. Y en lugar de transición, quiero que esto sea auto animado, porque me gustaría ver esa animación genial que se creará en la forma como se transforma de un estado a otro Y para que la animación sea aún más suave, voy a agregar es dentro y fuera y tal vez aumentar la duración a 0.8 segundos. Entonces ahora vamos a probar esto. Ya podemos ver cómo se anima. Si sucede demasiado rápido, lo que puedes hacer es volver, seleccionar esa pequeña flecha ahí y cambiar el retraso a tal vez 0.4 segundos. Entonces de esta manera, tenemos un poco más de ese fondo visible antes de que se anima. Y si rápidamente quieres volver a reproducir la animación, solo tienes que presionar el mismo atajo nuevamente, Commando control enter Y sí, estoy contento con la forma en que se ve esto. Y si quieres retrasar elementos en esta animación de introducción, lo que puedes hacer es tener ya otra configuración de mesa Entonces lo que voy a hacer es duplicar esto una vez más a nuestra opción drag. Y una vez más, borre las cosas que aún no quiero revelar. Tenemos que hacer doble clic y luego eliminar cosas. Voy a eliminar el carácter y la línea de etiqueta. Y tal vez solo anima estos pequeños detalles aquí. Entonces voy a mover este texto a la izquierda, entonces este a la izquierda y luego este más afuera. Ya puedes ver que estoy creando un poco de patrón aquí. Entonces, lo que sea que me gustaría aparecer primero está más cerca del borde de la mesa de trabajo, y luego las cosas que me muevo más adelante entrarán un poco más tarde Entonces es una manera de retrasarlos. Y luego este de aquí, solo podemos movernos hacia abajo. Vamos a moverlo ahí abajo. Y luego voy a seleccionar todos estos e incluso reducir su opacidad al 0% Y luego en la siguiente pantalla, los veremos aparecer, pero también tenemos que asegurarnos de que haya una interacción entre estas dos mesas Así que de manera similar a antes, utilizo el modo prototipo, y voy a usar todavía la opción de tiempo. Aquí, voy a establecer este 20 segundo, y el resto de las propiedades para la acción deberían ser las mismas que antes, así no tengo que restablecerlas. Así que vamos a probar esto de nuevo. Vuelvo hasta el principio. Entonces la primera mesa de trabajo, usa el atajo para probarla. Ya podemos ver cómo todos los elementos de la izquierda venían uno por uno y tenían un poco de animación en ellos. Si bien todos los demás elementos aquí que borramos simplemente aparecieron. El motivo de ello es porque, desde luego, entre las dos mesas de trabajo, no hubo instancias en la primera Lo único que OBXD podría hacer ahí es simplemente desvanecerlos y hacerlos Mientras que para estos elementos aquí en la parte inferior, tenía antes y después de la etapa, y podría crear una bonita acción auto animada entre los dos estados O si estamos pensando en términos de animación, incluso podemos llamar a estos fotogramas clave Entonces, probemos esto de nuevo. Las dos etapas de nuestra animación están listas. Pero no nos detengamos ahí. Agreguemos todavía una mesa de trabajo más para esta animación de introducción Entonces voy a duplicar esto más. Y esta vez, en lugar de borrar nada, voy a venir aquí, seleccionar el menú haciendo doble clic sobre él, arrástrelo hacia arriba, y seleccione el carácter, lo arrastraré hacia la derecha, y luego seleccione este texto, y tal vez volviendo al modo de diseño, incluso puedo girarlo manteniendo presionada la tecla Mayús, asegurarme de que sea exactamente 90 grados, moverlo a algún lado por aquí, y tal vez sólo para este texto, voy a reducir la opacidad a 0% No tuve que hacer eso por los otros dos elementos porque ya están fuera de la pantalla. Ahora si volvemos a prototipo, podemos seleccionar toda la mesa de trabajo, arrastrarla a la otra Aún usando el tiempo, el retardo se establece en cero segundo. Pero esta vez, en cambio, voy a usar el snap easing y tal vez establecer la duración en 1 segundo Una vez más, ahora tenemos cuatro mesas de trabajo. Volvamos a la primera y la previsualicemos. Así se podía ver que había un poco de swing de ida y vuelta tanto en la línea de etiqueta el menú y en el personaje, y eso es gracias a esa animación snap que usamos aquí. Entonces, una vez más, vamos a probar esto. Ahí vas. Muy sutil, muy agradable. Y por supuesto, todavía tenemos nuestras animaciones de Togo aquí, y aún podemos seguir desplazándonos hacia abajo. Pero ahora que tenemos esta hermosa acumulación creada para el primer foil del sitio, podemos seguir concentrándonos en el resto del sitio y agregando todos esos efectos de desplazamiento de paralaje 20. Ajustes en el desplazamiento de Parallax: Entonces estamos de vuelta en XZ, y voy a duplicar esta mesa de trabajo, y voy a renombrarla y llamarla paralaje uno De esta manera, sabré que aquí es donde comienza el desplazamiento Entonces, lo primero y más importante que tenemos que hacer es que todo este grupo se desvíe hacia arriba y asegurarnos de que esté aproximadamente alineado aquí donde está nuestro siguiente pliegue. Entonces esta va a ser la sección sobre cómo establecer tus metas. Voy a asegurarme de que nuestro menú se va a quedar aquí arriba, así que voy a arrastrar eso hacia abajo, y que todos estos otros elementos que no queremos ver estén fuera de la pantalla. Así que simplemente arrastraré esto hacia abajo, no la forma, y luego podremos concentrarnos en los elementos de nuestra ventana gráfica Aún así, recuerde que la línea de trazos muestra la ventana gráfica, y ahora podemos comenzar a mover las cosas e incluso escalar elementos hacia arriba y hacia abajo. Entonces, si selecciono este ítem aquí, puedo hacerlo más grande, moverlo un poco hacia la derecha, luego movamos este cuadro de texto hacia abajo. Y siempre trato de evitar crear tangentes o besar entre los elementos Eso básicamente solo significa que quieres evitar colocarlos de una manera en la que sea difícil decir lo que hay al frente y lo que hay detrás. Entonces, cuando está perfectamente alineado aquí, el polo y el borde del marco de texto, se siente raro. Así que queremos asegurarnos de que tenga un poco más de solapamiento que eso. Lo mismo con este elemento, no lo colocaría aquí. Nuevamente, se siente incómodo, quieres asegurarte de que haya al menos un poco más de superposición entre ellos. Ahora, si volvemos a la opción prototipo y seleccionamos la mesa de trabajo anterior, podemos agregar la interacción, y voy a mantenerla en tap auto animar fácil y salir con la misma configuración que antes Entonces solo podemos probar esto, y si toco en cualquier parte de la pantalla, ya veremos la animación. Si quiero probarlo de nuevo, solo presione comando control enter, y veamos. Se ve bien, pero no es tan interesante en este momento. Entonces lo que voy a hacer es seleccionar esta forma aquí en la mesa de trabajo anterior Y como está fuera de la ventana gráfica, podemos jugar con ella en el modo de diseño Entonces, por ejemplo, puedo estirarlo hasta el final, y luego puedo tocar dos veces para seleccionar puntos de anclaje individuales, y puedo hacer una forma completamente diferente, curvándola de esta manera, Y entonces tal vez incluso este punto de aquí pueda surgir Así que casi llenando esa zona. Entonces el set your goes text tal vez pueda moverse hacia la izquierda. Estoy manteniendo pulsada la tecla Mayús mientras la arrastro, y luego esta forma puede bajar. El texto puede aparecer, y esta ilustración puede ir a la derecha. Observe cómo lo estoy moviendo todo en diferentes direcciones porque eso hará que la animación de paralaje sea más interesante Así que vamos a probar esto. Voy a seleccionar esta mesa de trabajo, ya que no quiero ver ahora mismo toda la animación de introducción Solo me estoy enfocando en este primer detalle de paralaje. Y si, eso se ve mucho mejor ya. Vamos a probarlo de nuevo. A mí me gusta esto. Bastante agradable, tanto la forma como anima y todos los demás elementos Y en este punto, vale la pena mencionar que si estás presentando a un cliente y realmente quieres mostrarle la animación de paralaje y concentrarte en cómo las cosas están pasando de un pliegue a otro, hay una manera genial de hacer que eso sea un poco más fácil para Entonces, en lugar de usar el gatillo de toque, puede cambiar a arrastrar, lo que significa que cuando esté probando esto, puede comenzar a arrastrar de derecha a izquierda para ver la transición Y con esto, puedes controlar la velocidad e incluso puedes ir y venir. Entonces, mientras mantengas presionado y sigas arrastrando, realmente puedes concentrarte en todos los elementos y en cómo se mueven Pero recuerda, una vez que dejes ir, se va a quedar con la última mesa Entonces para poder regresar, aún tendrás que presionar simplemente comando el control enter. Para una demostración rápida, siempre es más fácil configurar la pestaña. Pero si quieres ralentizar las cosas y realmente enfocarte en cada detalle, entonces recuerda usar el gatillo de arrastre en su lugar. Pero para este ejemplo, voy a volver a cambiar a tap. Y luego continuemos creando otro duplicado más de esta mesa de Así que voy a mantener pulsada la tecla de opción de alterar, arrastra esto hacia la derecha. Aleje un poco, seleccione todo el grupo, arrástrelo hacia arriba hasta que el siguiente pliegue esté en nuestra ventana gráfica De nuevo, asegúrate de que el menú pegajoso permanezca donde se supone que debe estar y que todos estos otros elementos no se revelen todavía en la ventana gráfica Y justo como antes, lo que voy a hacer aquí es empezar a jugar con estos elementos en el modo de diseño, así que vamos a hacer más grande esta forma. Nuevamente, doble toque en él, cambie su curvatura también. Y nuevamente, similar a evitar tangentes, también me gusta evitar tener, como, una línea afilada alrededor del cuello de los personajes Simplemente se siente un poco extraño una vez más. Ponerlo en algún lugar de aquí se siente mucho más agradable. Y entonces incluso podemos mover estos detalles si no nos gusta la ubicación, podemos tener el texter a la derecha, tal vez un poco más alto también Y entonces este personaje puede ser más grande. Y luego solo tenemos que volver al modo prototipo, conectar las dos mesas de trabajo usando los mismos ajustes de interacción que antes, está dentro y fuera. Entonces, si probamos esto desde el pliegue anterior, Esto es lo que vemos en el siguiente. Y por lo general una vez que tengo todo montado en el nuevo tablero de arte, vuelvo y afino de dónde vienen las cosas. Entonces un subidón puede venir de la derecha. Este texto puede provenir de abajo. El personaje puede venir de arriba, y tal vez con un poco de transición o desvanecido, y entonces esa forma puede venir de la izquierda. Así que vamos a probar esto de nuevo. Haga clic, y luego podremos ver cómo funciona. Una vez más. Sí, se ve bastante bien. Ahora bien, tal vez la transición de personajes no sea la mejor, así que en realidad voy a volver aquí, aumentar la opacidad, arrastrarla hacia abajo. Vamos a probarlo de esta manera. Sí, eso es mejor. No quería crear esa mezcla entre el fondo y el personaje. Entonces ahora eso está arreglado, y ya se ve mucho mejor. Ahora, a partir de este punto, voy a acelerar las cosas porque sólo voy a repetir los mismos pasos que antes, para agregar todas las animaciones de paralaje para el resto de los pliegues de la página Y saltaremos adelante y nos concentraremos en configurar la navegación para nuestro menú pegajoso. 21. Menús y navegación para el sitio web: Entonces ahora tenemos todo en su lugar, cuatro tableros de arte para la introducción y cuatro mesas de trabajo para el scroll de paralaje Vamos a ver cómo funciona. Entonces ahí está nuestra animación de introducción que funciona muy bien. Si toco en cualquier lugar, nos desplazamos hacia abajo, tocamos en cualquier lugar, nuevamente , nos desplazamos hacia abajo, seguimos desplazándonos, y luego llegamos al último pliegue Entonces ahora es el momento de configurar el menú pegajoso y la navegación, porque, por supuesto, actualmente, la forma en que se configura este prototipo, no podemos simplemente garabear arriba y abajo porque, claro, en estos pliegues o en estas mesas de trabajo, no tenemos más detalles Por lo que está completamente oculto lejos de la ventanilla. Por eso es importante incluir un menú pegajoso para este tipo de prototipos de sitios web Ahora, ya que configuramos nuestro menú pegajoso como componente, voy a llegar a esta instancia del mismo. Y puedo decir por la esquina superior izquierda que en realidad este no es el componente principal. Es sólo una instancia de ello o un hijo del original. Entonces, si queremos asegurarnos de que las interacciones se asignen en todas las mesas de trabajo, siempre vale la pena elegir la opción editar componente principal Ahora, como golpeamos o borramos esa, tendrá que generarse por separado fuera de una de nuestras mesas de Pero a partir de esto, ahora podemos hacer doble clic y seleccionar objetivos, y en el modo prototipo, podemos arrastrarlo a esa mesa Usando lo mismo para animar tap con la facilidad de entrada y salida y 1 segundo, creo que va a funcionar Entonces seleccionemos el intercambio que tendrá que ir en la última tabla de inicio. Y solo voy a mover esto aquí en el medio solo para que sea más fácil seleccionar todos los elementos. El impulso tiene que entrar en ese, y un alto necesita ir aquí. Y luego finalmente, queremos el crecimiento, que es el nombre de este producto. Para volver a la página o mesa de trabajo, donde ya tenemos todos los elementos en su lugar Entonces no queremos seguir repitiendo la intra animación. Eso lo vemos una vez. Pero después de eso, queremos volver al primer redil donde ya todo está en su lugar. Entonces ahora que configuramos esto, podemos simplemente llegar a cualquiera de estas páginas y probar las cosas. Así que saltemos para impulsar, luego volvamos a un alto. Y se puede ver que voy intencionalmente de una manera no lineal solo para que podamos ver que todo el enlace va a funcionar. Compartiendo, luego saltar de nuevo a los goles, luego saltar tal vez de nuevo para apuntar alto, y luego volver al primer pliegue. Gracias a nuestro componente, todo funciona como se esperaba, y no tuvimos que repetir todas estas interacciones para cada uno de los tableros de arte duplicados. Trabajar y utilizar componentes en OBXZ es extremadamente importante Entonces, si no has empezado a usarlos, asegúrate de hacerlo porque realmente acelerará tu flujo de trabajo y te hará trabajar de manera más eficiente. Y si disfrutas de este tutorial y quieres aprender cómo también creé la versión app de este proyecto y cómo construí todo desde cero, todos los elementos, entonces recuerda, puedes aprender que desde nuestro diseño gráfico inicia en el boot camp, para lo cual, una vez más, el enlace está en la descripción a continuación. 22. Compartir tu prototipo: Tienes un par de opciones diferentes a la hora de compartir tu prototipo que creaste en AdoBxD Pero probablemente primero, lo más importante es tener dos flujos separados establecidos en caso de que tengas tanto una app como un sitio web en el mismo documento. Pero en caso de proyectos más complejos en los que quizás quieras tener tal vez una versión para tablet también, o quieras tener tanto de orientación de retrato versiones tanto de orientación de retrato como de orientación horizontal para tu app, deberías tener múltiples flujos establecidos Aquí, solo tenemos un flujo por el momento, que es para la app. Pero cuando llego al sitio web y estoy en modo prototipo, ahora puedo dar click sobre este icono de inicio. Lo que establecerá un nuevo flujo para mí. Entonces puedo llamar a este sitio web. Y esto es importante para nuestro siguiente paso, porque en el módulo de acciones, podremos compartir por separado ambos flujos. Entonces, cuando lo enviemos al cliente, obtendrán un enlace para el sitio web y un enlace para la aplicación. Y siempre puedes recomendar que abran el enlace para la app en su teléfono. Mientras que el del sitio web, deben verificar en una computadora de escritorio o en una computadora portátil. Entonces actualmente, tengo seleccionado el flujo del sitio web, y ya el enlace se nombra en consecuencia. Pero puedo escribir aquí me sitio web de crecimiento, y puedo elegir entre los siguientes ajustes de vista desde los cuales se recomienda la revisión de diseño si quieres compartir esto con grupos de interés como el cliente o tus colegas, por qué debes elegir el desarrollo a la hora de compartirlo con el desarrollador. Y también la presentación es útil si estás presentando personalmente algo de XD Pero para esta instancia, me voy a apegar a la revisión del diseño. Y por último, debes decidir sobre los permisos. Entonces, por defecto, cualquiera que tenga el enlace podrá acceder a este prototipo. Por lo que podrán verlo. Por supuesto, no podrán editarlo, pero podrán comentarlo. Y en caso de que quieras que tu proyecto esté un poco más protegido. Se puede decir que solo las personas invitadas tendrán acceso a él. En ese caso, deberá agregar sus direcciones de correo electrónico aquí. Y por último, también se puede asignar una contraseña para restringir el acceso al prototipo. Por ahora, voy a guardarlo con cualquiera que tenga el enlace podrá acceder a él, y luego una vez que haga clic en crear enlace, va a generar esto en un servidor de Adobe. Y escupe esta URL para mí, que puedo copiar o incluso obtener su código embed si quiero colocarla en un sitio web, por ejemplo, y así es como se ve en el navegador Entonces tenemos todo aquí. Funciona de la misma manera que lo hemos visto en XD. Podemos saltar por ahí. También tenemos nuestros pequeños conmutadores que creamos, y lo más importante, las personas invitadas o las que obtuvieron la URL podrán comenzar a comentar sobre esto, ya sea haciendo comentarios generales o fijando comentarios a partes específicas del diseño Digamos que quieren cambiar algo aquí cuando hacen su comentario, cambian de redacción o palabras. Una vez que presente esto, se va a editar ahí, y quien esté leyendo esto siempre obtendrá un poco de resaltado donde se coloca en el diseño. Ahora, cuando empiezas a tener muchos comentarios, siempre puedes resolverlos, editarlos o eliminarlos. Y también hay opciones en la parte inferior para ocultar anotaciones, solo para ver el diseño sin ellas, y también puedes filtrar comentarios en base a muchas opciones diferentes aquí También una forma rápida de invitar a otros colaboradores o revisores con este botón aquí en la parte superior Y también hay otra característica genial, que veremos una vez que exportemos el otro flujo. Entonces seleccioné la aplicación, y tengo todos los mismos ajustes aquí a la derecha. Acabo de crear el enlace y abrir esto en el navegador. Una vez más, tenemos las mismas interacciones apareciendo. Podemos pasar por todo de la misma manera como lo hemos visto en XD Pero además, también tenemos otra forma de navegar por las mesas de trabajo, con estos iconos en la parte inferior También puedo saltar de nuevo a la primera pantalla. Y por si eso no es suficiente, incluso podemos dar click sobre este icono aquí en la parte superior izquierda con el que podremos tener una visión general de todas las mesas que se utilizaron en este proyecto Y si quiero saltar directo a este, simplemente puedo hacer clic en él y luego continuar probando las cosas. En caso de que tengas múltiples pantallas en un proyecto, por defecto, verás todos los comandos de la app. Sin embargo, si quieres filtrar y mostrar solo los comandos asignados a la pantalla actual o a la pantalla actualmente visible, también puedes usar este pequeño toggle aquí. Y hay una última cosa que quería mencionar. Una vez que saltemos de nuevo a XD, note que para ambos flujos, tenemos el pequeño icono de enlace ahí visible Y en caso de que vuelvas y hagas algunos cambios después de recibir tus comentarios. Digamos que movemos este texto ligeramente hacia abajo. Verás que esta pequeña etiqueta de aquí se volvió gris. Indicando que tendrá que recordar actualizar su prototipo compartido volviendo al módulo compartido, asegúrese de que el flujo de la aplicación esté seleccionado y elija Actualizar enlace. Entonces esto va a refrescar el prototipo compartido, y quien esté haciendo la revisión verá de inmediato estos cambios actualizándose en su navegador. Eso es todo lo que quería cubrir para este proyecto. Espero que te haya resultado divertido trabajar, y te ayudará a decidir si UX y diseño web es la dirección en la que te gustaría especializarte. Pero aunque esa no sea la dirección que quieres tomar, estas habilidades y poder usar ese DB XD te será increíblemente útil para exhibir en tu CV y portafolio. 23. Conclusión: Bien hecho para terminar este curso. Espero que te hayas divertido tanto pasándolo como yo lo tuve grabando. Y claro, no te olvides del proyecto de clase. Porque recuerda, la práctica hace la perfección. No puedo esperar a ver tu trabajo, así que asegúrate de presentarlo. Y en caso de que te guste este curso, y te gustaría aprender más de mí, entonces hay muchos otros cursos que puedes encontrar aquí. Ve y compruébalos ya. No puedo esperar a conocerte en la siguiente.