Creación rápida de prototipos de UX con accesos directos de Adobe XD (hoja de referencia en PDF)

Publicado: 2022-03-10

Resumen rápido ↬ Cada diseñador tiene sus herramientas de creación de prototipos favoritas. Sin embargo, cuando se trata de wireframes y prototipos de UX , a menudo hay más de una herramienta involucrada. Tarde o temprano, te encuentras cambiando de una herramienta a otra para elegir las mejores entre ellas.

(Este es un artículo patrocinado). Adobe anunció Project Comet en octubre del año pasado para brindar una solución todo en uno rápida y eficiente. Hace unos meses, el secreto detrás del nombre en clave se reveló y se hizo público en una versión preliminar: Adobe Experience Design CC (Adobe XD). Diseñado para un diseño de experiencia de usuario rápido y fluido, XD le brinda todo en un solo paquete: le permite esbozar ideas, crear prototipos interactivos, probarlos y compartirlos .

Para darle una ventaja al trabajar con XD, hemos compilado 15 consejos profesionales, que incluyen características que pueden no ser obvias a primera vista, pero que harán que su flujo de trabajo de creación de prototipos sea mucho más fluido. Hemos recopilado todos los accesos directos en un solo archivo PDF (97 KB) que puede descargar aquí.

Adobe XD todavía se encuentra en versión beta pública y se puede descargar gratis, incluso si no es suscriptor de Creative Cloud. Además, periódicamente se añaden nuevas funciones. Tenga en cuenta que se está trabajando en una versión de Windows y que saldrá más adelante en 2016, pero por ahora Adobe XD está disponible solo para Mac OS X.

Repetir cuadrícula

Hacer crecer una cuadrícula de repetición

Para ahorrarle el proceso de copiar y pegar objetos manualmente, XD ofrece una función llamada Exploración de la cuadrícula de repetición. Seleccione el elemento que desea repetir y haga clic en el botón de cuadrícula de repetición en el inspector de propiedades a la derecha (o use el atajo Cmd + R ). Ahora puede arrastrar los controladores verdes para repetir sus elementos. Para arrastrar o hacer crecer una cuadrícula repetida desde el centro, mantenga presionada la tecla Option mientras arrastra. Esto puede ser especialmente útil cuando desea mantener un grupo de objetos centrado en su mesa de trabajo.

Entrar y salir del contexto de edición

Una cuadrícula repetida se trata como un grupo. Si desea agregar algo a todos los elementos en su cuadrícula de repetición, haga doble clic para ingresar al contexto de edición de su cuadrícula y dibuje, pegue o agregue elementos. Esto le evita tener que desagrupar y reagrupar todo el tiempo. Para abrir un nivel en su grupo o repetir la cuadrícula, presione la tecla Escape .

Ajustar relleno

¿Necesita ajustar el relleno en su cuadrícula? Seleccione la cuadrícula de repetición, coloque el cursor sobre el espacio entre sus elementos y arrastre hasta que el relleno sea como le gustaría que fuera. XD incluso proporciona números, para que tenga una mejor idea de qué tan separadas están las celdas.

Ajuste del relleno en una cuadrícula de repetición — Enlace al gif animado

Insertar datos

Diseñar con datos reales es otra característica ingeniosa de XD. En lugar de usar el mismo texto de marcador de posición para cada objeto, puede arrastrar cualquier archivo TXT separado por retorno desde su Finder a cualquier objeto de texto para llenar la cuadrícula con contenido único.

Dibujo

Rejillas de mesa de trabajo

Las cuadrículas de la mesa de trabajo brindan más orientación al dibujar con la herramienta Pluma. Le permiten arrastrar objetos para ajustarlos a la cuadrícula, y también puede ajustar sus puntos de anclaje a ellos mientras dibuja. Para habilitar la cuadrícula, haga clic en el icono de la mesa de trabajo en la barra de herramientas y seleccione Cuadrícula en la barra de propiedades de la derecha. Allí también puedes ajustar el tamaño y el color de la cuadrícula a tu gusto.

Usar la cuadrícula de la mesa de trabajo para dibujar con precisión — Enlace al gif animado

Dibujar y cambiar el tamaño desde el centro

¿Quieres dibujar o cambiar el tamaño desde el centro? Mantenga presionada la tecla Option .

Dibujar desde el centro — Enlace al gif animado

Curvas de Bézier

Las curvas Bezier en XD son muy fáciles de crear. Cualquier punto de anclaje que dibuje con la herramienta Pluma se puede convertir en una curva simplemente haciendo doble clic en él. Para volver a cambiar la curva a un punto, repita.

Dibujar una curva haciendo doble clic en el punto de anclaje — Enlace al gif animado

Para crear una curva asimétrica, haga lo mismo que se describe arriba, mantenga presionada la tecla Option y arrastre y gire los puntos de control para ajustar la curva.

Dibujar una curva asimétrica — Enlace al gif animado

abrir un camino

Si tiene una ruta cerrada, el punto inicial y final se resalta cuando selecciona por primera vez la herramienta Pluma. Haga clic en el punto para abrir la ruta para que pueda continuar dibujando y cambiar la forma según sea necesario.

Abriendo un camino — Enlace al gif animado

Desactivar guías inteligentes

Las guías inteligentes le permiten ajustar cualquier cosa en su mesa de trabajo: la distancia entre los objetos cercanos, los bordes y el centro de la mesa de trabajo y otros objetos, por ejemplo. Si estas ayudas te distraen demasiado o si tu mesa de trabajo parece demasiado compleja, puedes desactivarlas manteniendo presionada la tecla Cmd mientras arrastras.

Cambiar Opacidad

Para cambiar rápidamente la opacidad de un objeto, seleccione el objeto y comience a escribir números. 9 = 90 %, 8 = 80 %, etc.; y 0 te devuelve al 100%.

Cambiar la opacidad escribiendo valores — Enlace al gif animado

Imágenes

Máscara de imagen

Si desea enmascarar una imagen, arrástrela a un rectángulo para recortarla automáticamente o enmascararla con un objeto. El enmascaramiento le brinda más control, ya que le permite reposicionar e incluso crear objetos complejos usando los grupos booleanos para crear una máscara. Al hacer doble clic en el interior, puede ajustar tanto la máscara como la imagen que se está enmascarando. Las máscaras no destruirán la imagen, así que si no está satisfecho con el resultado, simplemente desagrupe y vuelva a enmascarar.

Prototipos

Desconectar un objeto

En el modo de creación de prototipos, conecta elementos a mesas de trabajo para crear transiciones entre ellos y tener una idea de cómo los usuarios experimentarán su diseño. Si desea desconectar algo, simplemente arrastre cualquier lado del cable para eliminar la conexión.

Compartir prototipos

Puede compartir prototipos a través de la web y puede enviar un tutorial con guión de su prototipo a los miembros del equipo, las partes interesadas o los clientes. Para grabar un tutorial con guión, haga clic en el botón de reproducción en la esquina superior derecha de la pantalla de su prototipo. Haga clic en el botón de grabación en la parte superior derecha de la ventana de vista previa y comience a interactuar con su prototipo. Tan pronto como haya terminado, vuelva a hacer clic en el botón de grabación y guarde la grabación como un archivo MOV. Ahora puedes compartirlo.

Grabe y comparta prototipos en Adobe XD — Enlace al gif animado

Diverso

Reutilizar estilos de texto

Si desea reutilizar un estilo de texto que ya configuró en otro objeto de texto, primero puede seleccionar el objeto de texto, cambiar a la herramienta Texto ( T ), luego hacer clic y comenzar a escribir. XD recogerá automáticamente los estilos de texto del objeto previamente seleccionado. Conveniente.

Reutilización de estilos de texto — Enlace al gif animado

Editar un grupo

Los grupos de anidamiento son un concepto poderoso en XD. Para ingresar al contexto de edición, haga doble clic en un grupo. Si tiene un grupo dentro de un grupo, también puede hacer doble clic en el grupo interno. Puede dibujar, agregar texto e incluso pegar en el contexto de edición. Para abrir un nivel en su contexto de edición, presione la tecla Escape .

Más recursos

Una lista de todos los métodos abreviados de teclado que puede utilizar en Adobe Experience Design (enlace),
Los videos de consejos profesionales de Adobe XD brindan instrucciones y flujos de trabajo sobre el uso de las funciones de XD. Un archivo de muestra le permite probarlos usted mismo,
Sitio de ayuda de Adobe con preguntas comunes, consejos y trucos y breves tutoriales (enlace),
Artículos sobre mejores prácticas de UX y UI Design en el blog de Adobe XD,
Proyectos inspiradores creados con Adobe XD en Behance,
Se agregan nuevas características a XD de forma regular. Así que esté atento a los anuncios de nuevas funciones para no perderse nada.
El equipo de Adobe XD espera escuchar sus comentarios sobre Adobe XD UserVoice.

Lectura adicional en SmashingMag:

Cómo diseñar estados de error para aplicaciones móviles
Cómo crear iconos con Adobe XD
Microinteracciones animadas en aplicaciones móviles
Explorando la cuadrícula de repetición en Adobe XD [](https://www.smashingmagazine.com/2016/11/exploring-repeat-grid-in-adobe-xd/)

Gracias a Elaine Chao (@elainecchao) por la ayuda con este artículo.