Adobe XD Intermedio: Creación de Prototipos

Name: Adobe XD Intermedio: Creación de Prototipos
Author: Jessica Henley

Aprenda habilidades intermedias para la creación de prototipos, como las conexiones, la animación automática y el estado de los componentes

Preview the first lesson free — get full access to all 7 lessons.

Solicitar una demo Iniciar sesión

Curso: bajo demanda

Hola, mi nombre es Jessica Henley. Y en esta lección, te mostraré cómo cablear y probar un prototipo. Para comenzar, simplemente haré clic derecho sobre este verde. mesa de trabajo. Y lo que quiero hacer es seguir adelante y seleccionar Copiar, ¿verdad? haga clic en cualquier lugar exterior y pegue. Ahora simplemente voy a moverlo. A continuación, seleccionaré todo en esta tercera pizarra. y toco Eliminar en mi teclado porque quiero empezar de nuevo encima. Simplemente lo dupliqué para que la mesa de trabajo tenga el mismo tamaño. como la pantalla anterior. Ahora voy a seleccionar el rectángulo o puedes tocar el letra R para un atajo. Haciendo clic y arrastrando el rectángulo para cubrir todo tercera mesa de trabajo y seleccionando un color que ya está en mi Muestras de color. Aquí puedo hacer un cambio de diseño mediante una apariencia y cambiando. el color, que es el relleno. O puedo hacer clic derecho sobre él y bajar a Editar. Y aquí, en Editar, puedo simplemente hacer clic y arrastrar para seleccionar el color deseado. Voy a seguir adelante e ir a la herramienta Rectángulo. Entonces, Rectángulo, también puedes tocar la letra R. Y haciendo clic y arrastrando, lo voy a alinear en ambos lados. Vamos a hacer una cuadrícula en un momento. Ahora tengo algunas fotos en la parte inferior de estas flores. Tomé estas fotos y estas son un par de flores. que he tenido. Y una de mis flores favoritas es esta foto que tomé. Así que voy a duplicarlo. Puede tocar Ctrl o Comando D para duplicar, o puede hacer clic derecho y copiarlo y luego pegarlo. Voy a pegarlo porque voy a usar estos. flores varias veces en diferentes mesas de trabajo. A continuación, lo que voy a hacer es seguir adelante y abrir esto, pero también cambie su tamaño para que quepa dentro de este rectángulo blanco. Una vez que esté ajustado por dentro, iré a Texto, o tú puedes toque la letra T para obtener un atajo. Ahora simplemente voy a escribir en la parte superior de esta mesa de trabajo. Aquí, simplemente voy a poner el título como marcador de posición. Y voy a elegir uno de mis estilos de personaje, pero es demasiado pequeño. Así que voy a ir al lado derecho y cambiarlo. Así que ahora voy a probar con un número diferente. Aquí, en Texto, escribiré 50, y con la herramienta Seleccionar, simplemente lo alinearé. También voy a hacer clic en el signo más para agregarlo a mi estilos de personajes. Nuevamente, para el título, seguiré adelante y escribiré con la herramienta Texto. Y dentro de esta caja, simplemente lo llamaré Información como marcador de posición, información para abreviar. Aquí tengo 35, pero déjame intentarlo 38 y 40. Estoy intentando ver cuál quiero conservar. Entonces eso es 32, y puedo simplemente hacer clic y arrastrar y también agregar eso a mi estilo de personaje en caso de que quiera usarlo en el futuro. Entonces tengo 32 como esa fuente, y puedo mantener presionada la tecla Mayús para seleccionar múltiples. Una vez seleccionados los tres elementos, puedo hacer clic en Repetir. Red. Ahora simplemente voy a hacer clic y arrastrar hacia abajo. Ahora también puedes ver una cuadrícula repetida de información en la imagen. como el largo rectángulo blanco. Voy a hacer clic derecho y ir a Reemplazar imagen. Dentro de la carpeta Flores, elegiré una nueva imagen de flor. Puedes ver que cambia, y sigo adelante hasta que llegar hasta el fondo. Botón derecho del ratón, baja a Reemplazar imagen, elige una flor diferente, presione Importar. Así que haré clic derecho sobre él, Reemplazar imagen, y presione Importar. Ahora tengo cuatro imágenes de flores diferentes. Entonces, en esta pizarra, voy a copiar, Haga clic derecho y pegue nuevamente, y simplemente deslícelo por un momento. espaciado. Y nuevamente, seleccione todo y elimine. Una vez eliminado, es hora de seguir adelante y continuar creando. la siguiente pizarra. Haga clic derecho, copie y pegue para obtener la misma imagen. Y voy a resaltar en esta mesa de trabajo. esta foto. Entonces, con el título seleccionado, simplemente haré clic derecho y Copie y pegue, y continúe y deténgalo. Puedo ver qué mesa de trabajo está seleccionada haciendo clic en la parte superior. Ahora, en lugar de copiar la información, necesito seguir adelante. y escribo eso desde cero, porque si intento duplicar desde la red, Tendré cuatro textos informativos. No quiero cuatro, solo quiero una información sobre este particular. mesa de trabajo en la que estoy trabajando ahora mismo. Ahora, solo voy a agregar algunas líneas discontinuas para simular texto. Y, por supuesto, cambiaré su tamaño una vez que haya terminado. Así que simplemente escribe eso ahí. Ahora sólo necesito seleccionarlo y elegir una fuente diferente. Y solo voy a ir con negro, y tratando de ver si me gusta eso. Y a medida que avanzo y lo centro un poco más, aquí vamos. Así que lo siguiente que voy a hacer es simplemente arrastrar Repasé un poco esta mesa de trabajo y voy a cambiar a prototipo. Al hacer clic en esta mesa de trabajo, quiero conectarla, pero no lo hago. desea seleccionar toda la mesa de trabajo, porque queremos que llegue a donde si seleccionamos la primera cuadrícula, en realidad debería ir a la siguiente mesa de trabajo, porque puedes ver las flores coinciden. Así que simplemente haré clic y arrastraré para conectarlo. Puedes decir que está conectado y la conexión está configurado para tocar. Y seguiré adelante y configuraré eso para que se disuelva. Aquí, simplemente seleccionaré la última mesa de trabajo y las conectaré. juntos también. Para que puedas ver la conexión. Hay dos cables que se conectan entre sí. Ahora es el momento de probarlo. Cuando hago clic en el botón de reproducción en la esquina superior derecha, Solo toco. Pero en realidad no es aquí donde quiero empezar. Parece que esto no está conectado, así que necesito volver y conectarlos entre sí. Muy bien, intentémoslo de nuevo. Y hago tapping de nuevo, está funcionando. Haga clic en Información, Información, Información. Puedes ver que hay una manita allí. Cuando hago clic en el primero, puedo ver que la página es laboral. En la próxima lección, te mostraré cómo realizar cambios de diseño. y resolver errores. Gracias por ver.

Intermedio Proveedor : Jessica Henley 7 lecciones · 43m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Chinese

Descripción del curso

La creación de prototipos en Adobe XD le dará una idea de la ejecución de su diseño y estas lecciones le proporcionarán las habilidades esenciales necesarias para llevar su proyecto al siguiente nivel. Una forma de hacerlo es incorporando múltiples cuadrículas de desplazamiento en varias aplicaciones como una forma de mover al usuario a diferentes pantallas. Otra idea es utilizar la animación automática para pasar de una pantalla a otra. Hay una variedad de disparadores y acciones que puede configurar para la animación automática. Manténgase organizado y evite errores renombrando los colores de sus activos y los estilos de carácter para que sean más fáciles de encontrar, y asegúrese de que los objetos estén colocados correctamente en capas para evitar resultados inesperados.

Estas lecciones de Adobe XD cubren cómo crear conexiones entre varias pantallas, probar un prototipo, realizar cambios de diseño y resolver errores. Aprenderá a animar automáticamente, a establecer disparadores y acciones, y a establecer fases. En estas lecciones también se analizará cómo crear estados de componentes, superposiciones y audio.

Lo que aprenderás

Incorpora efectos de auto-animación para transicionar de una pantalla a otra
Identifica los desencadenantes y acciones disponibles para auto-animación
Utiliza múltiples cuadrículas de desplazamiento para mover usuarios a diferentes pantallas
Crea cableado entre pantallas, prueba un prototipo y resuelve errores
Construye estados de componentes, superposiciones y audio
Establece aceleraciones y renombra colores de activos y estilos de caracteres para mantenerte organizado

Puntos clave

La creación de prototipos en Adobe XD proporciona información sobre la ejecución de un diseño y las habilidades para avanzar un proyecto.
Múltiples cuadrículas de desplazamiento pueden incorporarse en aplicaciones como una forma de mover al usuario a diferentes pantallas.
Las transiciones de auto-animación entre pantallas admiten una variedad de desencadenantes y acciones que puedes configurar.
Renombrar colores de activos y estilos de caracteres los hace más fáciles de encontrar, y la estratificación adecuada de objetos ayuda a evitar resultados inesperados.
Las lecciones cubren cableado de pantallas, prueba de prototipos, realización de cambios de diseño, resolución de errores y creación de estados de componentes, superposiciones y audio.

Preguntas frecuentes

¿Qué aprenderé en este curso de Adobe XD?

Aprenderás a incorporar efectos de auto-animación, identificar desencadenantes y acciones, entender diferencias para superposiciones y utilizar cuadrículas de desplazamiento. Las lecciones también cubren cableado entre pantallas, prueba de un prototipo, realización de cambios de diseño, resolución de errores, establecimiento de aceleraciones y creación de estados de componentes, superposiciones y audio.

¿Cuál es el nivel de este curso?

Este es un curso intermedio de Adobe XD enfocado en creación de prototipos, diseñado para llevar tu proyecto al siguiente nivel.

¿Cómo se estructura el curso?

El curso se organiza en siete lecciones: Cableado y prueba de un prototipo; Realización de cambios de diseño y resolución de errores; Auto-animación; Desencadenantes y acciones; Aceleraciones y componentes; Estados de componentes; y Superposiciones y audio.

¿Qué habilidades cubre este curso?

Cubre Adobe XD, Adobe Dimension, creación de prototipos digitales, creación de prototipos de software y habilidades de creación de prototipos.