Adobe XD

Adobe XD es la última incorporación a la nube creativa del gigante del software. Sus
siglas corresponden a Adobe Experience Design, porque su objetivo es,
precisamente, diseñar experiencias.

Adobe XD lleva en el mercado desde 2015, aunque por entonces tenía otro nombre
(Proyect Comet) y pasó un tiempo en modo beta. Hasta su aparición, no existía en
Adobe ningún software específico para diseñar la experiencia de usuario (la
navegación, el hacer clic, el scroll…), lo que viene a demostrar el impulso que la
User Experiencie ha cogido en los últimos años.

En la actualidad, Adobe XD forma parte del Adobe Creative Cloud, servicio en la

nube que permite dar rienda suelta a la creatividad sin necesidad de ocupar espacio
en el disco duro.

Su definición formal dice que se trata de una software para crear y compartir
interfaces para webs y apps, con el foco puesto en la experiencia de usuario. Y
también para compartir protototipos y así poder contar con feedback sobre el uso
real del producto (no es lo mismo que tu cliente sepa que de esta pantalla se pasa a
la otra, a que lo experimente).

En la práctica es una potente herramienta para crear diseños adaptados a cada

dispositivo, trabajarlos en equipo y ser ágiles en el día a día.

Cuando se abre el programa, hay dos opciones: Diseño y prototipado. En la primera

es donde se escoge el color para los botones, el cuerpo de la letra, la proporción de
las imágenes o los márgenes de la pantalla. Se elige la mesa de trabajo (iPhone,
desktop, Samsung Galaxi Tap…) y se comienza a crear.

El prototipado es donde se crean las interacciones; es decir, qué pasa cuando el

usuario pincha en todos y cada uno de los puntos clicables de la interfaz. Y, una
vez que el proyecto esté listo para recibir feedback, se comparte. La persona a la
que llegará el enlace podrá hacer clic, ir adelante y atrás, hacer scroll…. En
definitva, navegar.

Esta opción de compartir el prototipado, así como de recibir comentarios sobre cada
uno de los elementos, es uno de los puntos fuertes de Adobe XD. Y una de las
claves de todo buen diseño de la User Experience: ningún producto digital debería
salir ahí fuera sin un test de usabilidad.

La herramienta permite también trabajar en línea con el resto del equipo, guardar el
historial de cambios para poder acudir a una versión anterior y editar en vivo, entre
otras funcionalidades (como en Google Docs). El objetico es que el trabajo de
diseño de la UX sea más ágil y que el resultado final se parezca a lo que figura en la
mesa de trabajo.

La competencia de Adobe XD es fuerte. Sketch, Figma o In Vision son las tres

grandes rivales de la última creación de Adobe. Cualquiera de ellas permite trabajar
en equipo, diseñar distintos tipos de interacciones y ofrecer una preview para
mostrar a tu jefe o al cliente.

Sketch es la herramienta más extendida. De momento solo funciona para Mac.

Figma permite trabajar directamente desde el navegador web; es decir, no hay que
instalar ningún tipo de software, por lo que es una herramienta muy útil para
compartir con otros (los desarrolladores, el cliente…).

In Vision es el componente perfecto para generar un prototipo a partir de otra

plataforma de diseño. De hecho, es común combinarla con Sketch

Adobe XD ofrece opciones de diseño y prototipado muy completas, pudiéndose

usar PhotoShop para la creatividades, Illustrator para los gráficos o Premiere para
editar videos.

Flujo de trabajo
A. Inicio B. Formación C. Tus archivos D. Compartido E. Administrar vínculos F. Eliminados G. Archivos recientes H.
Ajustes preestablecidos de mesas de trabajo

Descripción general del espacio de trabajo. Windows

Espacio de trabajo de Adobe XD en Windows

A. Menú principal B. Modo diseño C. Modo prototipo D. Modo compartir E. Vista previa en dispositivo F. Vista previa
G. Porcentaje de zoom. H. Inspector de propiedades I. Mesa de composición J. Mesas de trabajo K. Complementos L.
Capas M. Bibliotecas N. Barra de herramientas

Métodos abreviados generales

Resultado Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Salir Cmd+Q Alt+F4

Teclas para el menú editar

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Deshacer Cmd+Z Ctrl+Z
Rehacer +Cmd+Z Ctrl+Mayús+Z
Cortar Cmd+X Ctrl+X
Copiar Cmd+C Ctrl+C
Pegar Cmd+V Ctrl+V
Apariencia de pegado (en Cmd+Opción+V Ctrl+Alt+V
modo Diseño) y pegar
interacción (en modo Prototipo)
Duplicar Cmd+D Ctrl+D
Eliminar ⌫ Eliminar
Seleccionar todo Cmd+A Ctrl+A
Deseleccionar todo +Cmd+A Ctrl+Mayús+A

Teclas para el menú archivo

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Nuevo Cmd+N Ctrl+N
Abrir… Cmd+Mayús+O Ctrl+Mayús+O
Cerrar Cmd+W Alt+F4
Guardar… Cmd+S Ctrl+S
Guardar como… +Cmd+S Ctrl+Mayús+S
Guardar como documento Opción+Mayús+Cmd+S Mayús+Ctrl+Alt+S
local…
Exportar lote Mayús+Cmd+E Ctrl+Mayús+E
Exportar seleccionados Cmd+E Ctrl+E
Exportar a una aplicación de Opción+Cmd+E No disponible
terceros integrada (si está
instalada en el ordenador una
aplicación integrada con XD)
Importación Mayús+Cmd+I Ctrl+Mayús+I

Teclas para trazado/pluma

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Cambiar a herramienta Pluma P P
Convertir punto Doble clic Doble clic
Punto de control asimétrico Opción Alt
Ajustar ángulo de punto de Mayús Mayús
control
Ajustar ángulo de punto de Mayús Mayús
ancla
Sumar Opción+Cmd+U Ctrl+Alt+U
Restar Opción+Cmd+S Ctrl+Alt+S
Formar intersección Opción+Cmd+I Ctrl+Alt+I
Excluir superposición Opción+Cmd+X Ctrl+Alt+X
Convertir en trazo Cmd+8 Ctrl+8

Teclas para capas (objetos), grupos, grupos desplazables y mesas de trabajo

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Agrupar capas Cmd+G Ctrl+G
Desagrupar capas Mayús+Cmd+G Ctrl+Mayús+G
Crear componente Cmd+K Ctrl+K
Bloquear/desbloquear capa Cmd+L Ctrl+L
Ocultar/mostrar capa Cmd+, Ctrl+,
Máscara con forma Mayús+Cmd+M Ctrl+Mayús+M
Ejecutar repetir cuadrícula Cmd+R Ctrl+R
Seleccionar directamente una Cmd+clic en la capa del lienzo Ctrl+clic en capa en lienzo
capa en un grupo/componente
Cambiar la opacidad de la capa 1 a 9 (0 para 100%) 1 a 9 (0 para 100%)
Seleccionar mesa de trabajo Cmd+clic en parte en blanco de Ctrl+clic en la parte en blanco
 la mesa de trabajo de la mesa de trabajo
Dibujar forma desde el centro Opción+Arrastrar Alt+Arrastrar
Dibujar una forma con relación Mayús+Arrastrar Mayús+Arrastrar
de aspecto 1:1
(cuadrado/círculo perfecto)
Dibujar un triángulo equilátero Mayús+Arrastrar Mayús+Arrastrar
Mostrar/ocultar las guías de la Cmd+; Ctrl+;
mesas de trabajo
Bloquear las guías de las Mayús+Cmd+; Mayús+Ctrl+;
mesas de trabajo
Mover el elemento 10 px Mayús+Flechas Mayús+Flechas
Cambiar el tamaño del Cmd+Flechas Alt+Flechas
elemento en incrementos de 1
px
Cambiar el tamaño del Cmd+Mayús+Flechas Alt+Mayús+Flechas
elemento en incrementos de 10
px
Seleccionar a través de capas Cmd+Clic Ctrl+Clic
superpuestas
Editar relleno Pasar el ratón sobre el lienzo y Pasar el ratón sobre el lienzo y
arrastrar+S arrastrar+S
Duplicar relleno en lados Opción+S Alt+S
opuestos
Editar todos los lados Mayús+S Mayús+S
Desplazamiento horizontal Mayús+Cmd+H Mayús+Alt+H
Desplazamiento vertical Mayús+Cmd+V Mayús+Alt+V
Desplazamiento horizontal y Mayús+Cmd+D Mayús+Alt+D
vertical
Añadir color a activos Mayús+Cmd+C Mayús+Alt+C
Cambiar nombre de las capas Cmd+Opción+R Ctrl+Alt+R
(no se aplica al panel de
activos de documento o
complementos)

Teclas para alinear

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Izquierda Ctrl+Cmd+ Ctrl+Mayús+
Centrar (horizontalmente) Ctrl+Cmd+C Mayús+C
Derecha Ctrl+Cmd+ Ctrl+Mayús+
Superior Ctrl+Cmd+ Ctrl+Mayús+
Centro (verticalmente) Ctrl+Cmd+M Mayús+M
inferior Ctrl+Cmd+ Ctrl+Mayús+

Teclas para organizar

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Traer al frente Mayús+Cmd+] Mayús+Ctrl+]
Traer adelante Cmd+] Ctrl+]
Hacia atrás Cmd+[ Ctrl+[
Enviar detrás Mayús+Cmd+[ Mayús+Ctrl+[

Teclas para distribuir

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Horizontal Ctrl+Cmd+H Ctrl+Mayús+H
Vertical Ctrl+Cmd+V Ctrl+Mayús+V

Teclas para texto

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Negrita Cmd+B Ctrl+B
Cursiva Cmd+I Ctrl+I
Subrayado Cmd+U Ctrl+U
Aumentar tamaño de fuente Mayús+Cmd+> Ctrl+Mayús+>
Disminuir tamaño de fuente Mayús+Cmd+< Ctrl+Mayús+<

Teclas para el menú operaciones

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Desde el centro Opción Alt
Copiar y pegar objetos Opción +Arrastrar Alt+Arrastrar
Restringir Mayús Mayús
Editar texto Intro Intro
Rotar restricción Mayús (15°) Mayús (15°)
Rotar restricción de línea Mayús (45°) Mayús (45°)
Restringir desde el centro Mayús+Opción Mayús+Alt
Selección directa Cmd Ctrl
Cambiar entre los modos Ctrl+Tab Ctrl+Tab
Diseño y Prototipo

Teclas para el menú herramientas

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Seleccionar V V
Rectángulo R R
Elipse E E
Polígono Y Y
Línea L L
Pluma P P
Texto T T
Mesa de trabajo A A
Zoom Entrar en modo de Zoom: Z Entrar en modo de Zoom: Z
Cuentagotas I I

Teclas para operaciones de interfaz y visualización

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Cambiar a modo diseño Opción+1 Alt+1
Cambiar a modo prototipo Opción+2 Alt+2
Cambiar a modo compartir Opción+3 Alt+3
Aumentar  Cmd+,  Ctrl+ +
 Opción y rueda de  Ctrl y rueda de
desplazamiento desplazamiento
 Opción y deslizar  Pellizcar hacia fuera
(Magic Mouse) (almohadilla táctil)
 Pellizcar hacia fuera
(almohadilla táctil)
Reducir  Cmd+ -  Ctrl+ -
 Opción y rueda de  Ctrl y rueda de
desplazamiento desplazamiento
 Opción y deslizar  Pellizcar hacia dentro
(Magic Mouse) (almohadilla táctil)
 Pellizcar hacia dentro
(almohadilla táctil)
Zoom a la selección Cmd+3 Ctrl+3
Zoom hasta ajustar Cmd+0 Ctrl+0
100% Cmd+1 Ctrl+1
200% Cmd+2 Ctrl+2
Desplazar Barra espaciadora Barra espaciadora
Activos Mayús+Cmd+Y Ctrl+Mayús+Y
Capas Cmd+Y Ctrl+Y
Mostrar cuadrícula de diseño Mayús+Cmd+´ Mayús+Ctrl+´
Mostrar cuadrícula cuadrada Cmd+´ Ctrl+´
Modo de pantalla completo Ctrl+Cmd+F No disponible
Cambiar entre los modos de Ctrl+Tab Ctrl+Tab
diseño y de prototipo
Cambiar entre ventanas Cmd+Virgulilla (~) No disponible
(archivos)
Aumentar o disminuir un valor o o
de un campo en 1
Aumentar o disminuir un valor Mantener presionado Mayús y Mantener presionado Mayús y
de un campo en 10 pulsar  o  pulsar  o 

Teclas para el menú ventana

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Maximizar WIN 
Minimizar Cmd+M WIN 
Vista previa Cmd+ ↵ Ctrl+Intro

Teclas para modificadores de funcionamiento

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Panorámica horizontal Mayús+Rueda de Mayús+Rueda de
desplazamiento desplazamiento
Panorámica vertical Rueda de desplazamiento Rueda de desplazamiento

Teclas para la selección y medición de distancias entre elementos

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Habilitar mediciones Opción (con un objeto Alt (con un objeto
seleccionado) seleccionado)
Distancia desde la capa Mantener presionado Opción y Mantener presionado Alt y
seleccionada colocar el cursor sobre colocar el cursor sobre
objeto/grupo/mesa de trabajo objeto/grupo/mesa de trabajo
Distancia relativa al grupo Mantener presionado Mantener presionado Ctrl+Alt y
seleccionado Opción+Cmd y colocar el colocar el cursor sobre un
cursor sobre un objeto del objeto del grupo
grupo

Teclas para especificaciones de diseño

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Zoom Cmd+Rueda del ratón Ctrl+ Rueda del ratón
Cmd+, Cmd - Ctrl+, Ctrl -
Restablecer el zoom Cmd+0 Ctrl+0
Panorámica , , ,  , , , 
Barra espaciadora+Hacer clic y Barra espaciadora+Hacer clic y
arrastrar arrastrar
Panorámica más rápida Mayús+, , ,  Mayús+, , , 

Quitar el foco de la mesa de Esc Ecs

trabajo en vista
Especificaciones
Navegar por mesas de trabajo Mayús+Clic Mayús+Clic
vinculadas

Teclas para edición de vectores

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Comenzar a editar el objeto Intro Intro
vectorial seleccionado
 Dejar de editar el objeto Esc Esc
vectorial seleccionado
Cambiar entre puntos de Doble clic Doble clic
control rectos y especulares
Desconectar controlador de Opción+Arrastrar Alt+Arrartrar
punto de control

Teclas para creación de prototipos

Menú Método abreviado de teclado en Método abreviado de teclado en

MacOS Windows
Ver todas las conexiones en Cmd+A Ctrl+A
modo Prototipo
Ocultar todos los cables Opción Alt
Vista previa Cmd+Intro Ctrl+Intro
Iniciar o detener la grabación Cmd+Ctrl+R No disponible
de vista previa
Detener grabación Esc No disponible
Navegar por mesas de trabajo Flecha derecha o Flecha o
en vista previa o prototipo izquierda
compartido
Crear una nueva línea en el Intro o Mayús+Intro Intro o Mayús+Intro
cuadro de comentarios del
vinculo del prototipo compartido
Enviar comentario introducido Cmd+Intro Ctrl+Intro
en el cuadro de comentarios
del vínculo de prototipo
compartido

SUGERENCIAS Y TRUCOS GENERALES

 En lugar de copiar y pegar grupos de elementos en el diseño, usa la herramienta

Repetir cuadrícula (disponible en el Inspector de propiedades).
 Puedes duplicar una forma seleccionándola, manteniendo presionada la tecla
Opción (en Mac), o la tecla Alt (en Windows), y arrastrando una nueva copia de la
misma.
 Los elementos se pueden bloquear con Objeto > Bloquear (o Cmd + L) en Mac.
Esto lo que hace en realidad es una alternancia del bloqueo, así que usa el mismo
comando para desbloquear los elementos. En Windows, haz clic con el botón
derecho en un objeto y selecciona Bloquear en el menú contextual.
 Habilita la selección directa manteniendo presionada la tecla Cmd o Ctrl. Esto te
permite seleccionar objetos anidados.
 Enmascara rápidamente soltando una imagen sobre una forma: la imagen pasará a
ser el relleno de la forma.
 Crea una máscara editable importando una imagen y luego dibuja una forma sobre
ella. Selecciona ambas cosas y luego elije Objeto > Máscara con forma (en Mac),
 o haz clic con el botón derecho en los objetos y elije Máscara con forma en el menú
contextual. Puedes editar la máscara o la imagen más adelante, haciendo doble clic
en el grupo enmascarado

DIBUJO Y TEXTO

 Puedes desactivar las guías de ajuste manteniendo presionada la tecla Cmd/Ctrl.

 Haz doble clic en cualquier punto de ancla para alternar entre una curva y un
ángulo.
 Presiona Opt/Alt mientras arrastras un controlador de curva para hacer que dicho
controlador de curva sea independiente. (Para que vuelva a ser dependiente, haz
doble clic para volver a un ángulo y luego repite el doble clic).
 Puedes seleccionar puntos de ancla al dibujar con la herramienta lápiz.
 Haz doble clic para introducir un contexto de edición de grupo (puedes agregar
elementos en este contexto), o simplemente presiona Cmd/Ctrl y haz clic en un
objeto de un grupo para seleccionarlo.
 Selecciona un elemento de texto y luego crea uno nuevo para aplicar todos los
estilos del primer elemento al segundo.
 Las combinaciones de trazados (Agregar/Restar/Intersectar/Excluir solapamiento)
no son destructivas. Puedes activarlas y desactivarlas.

IMPORTACIÓN DE CONTENIDO

 Para traer contenido desde Illustrator, selecciona la forma vectorial en Illustrator,

copiala y luego pégala en Adobe XD.
 Para traer contenidos de mapa de bits desde Photoshop, selecciona todo (Cmd + A
o Ctrl + A) en un mapa de bits o una capa de texto (o primero convierta una capa o
vectorial o un grupo en un objeto inteligente), cópialo y pégalo en Adobe XD. La
capa pegada será un mapa de bits. También puedes copiar contenido desde
Photoshop haciendo una selección con la herramienta de marco. Luego, desde los
menús, elije Editar > Copiar (para obtener la selección en la capa actual), o Editar >
Copia fusionada (para obtener la selección en todas las capas de dentro de la
selección).
 Para traer contenido desde Sketch, selecciona una o más capas o grupos, y haz clic
en Hacer exportable. Elije SVG como formato y arrastra y suelta la capa de Sketch
en Adobe XD. Esto te proporcionará contenido vectorial editable en Adobe XD.
 Para importar activos (PNG, JPG, TIFF, GIF, SVG) en Mac, puedes usar Archivo >
Importar, o bien arrastrar y soltar (o copiar y pegar) imágenes en Adobe XD desde
Finder.
En Windows, haz clic en el menú Hamburguesa y haz clic en Importar, o arrastra y
suelta (o copia y pega) imágenes desde el Explorador de archivos.
También puedes copiar y pegar desde el navegador a Adobe XD.

CONTROLES DEL TECLADO

 Al ajustar el radio de vértice, puedes mantener presionada la tecla OPCIÓN para
restringir el ajuste a una sola esquina.
 Para deshabilitar temporalmente el ajuste al mover o cambiar el tamaño de los
elementos, mantén presionada la tecla Cmd o Ctrl.
 Mantén presionada la tecla MAYÚS mientras cambias el tamaño de un elemento
para mantener la relación de aspecto del mismo.
 Mantén presionada la tecla ALT mientras dibujas una forma para dibujar desde el
centro en lugar de la manera predeterminada (que es en la esquina superior
izquierda).
 Para cambiar rápidamente la opacidad de un elemento seleccionado, presiona las
siguientes teclas numéricas. Aquí, 1 = 10 %, 2 = 20 % y así sucesivamente; 0 = 100
%.
 Al desplazar una forma o un punto de control con las teclas de flecha, mantén
presionada la tecla MAYÚS para empujar 10 px.
 Mantén presionada la BARRA ESPACIADORA para aplicar el modo de mano.
Puedes hacer clic y arrastrar para moverse por el lienzo.

MESAS DE TRABAJO

 Para seleccionar una mesa de trabajo, haz clic en su título y Cmd/Ctrl + clic en su
fondo, o doble clic en su fondo.
 Para seleccionar una mesa de trabajo vacía, haz clic en el fondo de la mesa de
trabajo.
 Para duplicar una mesa de trabajo (y su contenido), selecciona la mesa de trabajo y
presiona Cmd (en Mac) o Alt (en Windows) mientras arrastras para hacer una copia.
 Para cambiar el nombre de una mesa de trabajo, haz doble clic en su título.

REPETIR CUADRÍCULA

 Para ajustar el relleno entre los elementos repetidos de una cuadrícula de

repetición, selecciona la cuadrícula de repetición y luego pasa el ratón sobre el
espacio entre los elementos y arrastra. Si estás editando un elemento dentro de la
cuadrícula de repetición, debes presionar ESCAPE para salir del modo de edición.

CREACIÓN DE PROTOTIPOS Y VISTA PREVIA

 Selecciona cualquier objeto de una mesa de trabajo (o toda la mesa de trabajo) y

arrastra un cable para desencadenar una interacción entre mesas de trabajo.
 Arrastra un cable fuera de su destino para dejar sin efecto una interacción que haya
establecido.
 Utiliza la transición Disolver al diseñar para la Web.
 Puedes ver todas las conexiones entre tus mesas de trabajo (excepto las que se
desencadenen directamente desde las mesas de trabajo) presionando Cmd + A (en
Mac) o Ctrl + A (en Windows) en modo Prototipo.
 La ventana Vista previa muestra la mesa de trabajo que contiene la selección actual.
Si no hubiera selección, la ventana Vista previa se abre primero con la mesa de
trabajo Inicio.
 Puedes grabar un vídeo desde la ventana Vista previa del prototipo interactivo. Haz
clic en el ícono de grabación de la barra de títulos para comenzar un vídeo.
 Haciendo clic nuevamente en el botón de grabación, o presionando ESC, se detiene
la grabación de vídeo.
 Puedes usar métodos abreviados de teclado o desencadenadores de mando de
juego en prototipos, según el tipo de experiencia que diseñes. 

USO COMPTARTIDO

 Para poder compartir, debes haber iniciado sesión con una cuenta de Adobe, en la
aplicación de escritorio de Adobe Creative Cloud o en cualquier otra aplicación de
Adobe (como Photoshop, Illustrator y similares). Se admiten tanto los Adobe ID
como los Enterprise ID y los Federated ID.
 Si compartes tu archivo de diseño sin añadir antes interacciones, se cargarán todas
las mesas de trabajo y los usuarios podrán navegar con las teclas de flecha del
teclado. El orden de las mesas de trabajo comenzará por la parte superior izquierda
y se moverá hacia la derecha.
 Si tu diseño incluye interacciones, solo se cargarán y compartirán las mesas de
trabajo conectadas a la mesa de trabajo Inicio.
 La mesa de trabajo definida como mesa de trabajo Inicio es la primera mesa de
trabajo que aparece a los usuarios cuando ven el diseño compartido.
 Puedes cambiar la mesa de trabajo Inicio seleccionando el icono de la mesa de
trabajo Inicio situado junto a la mesa de trabajo, en el modo de prototipo. Este icono
de la mesa de trabajo Inicio solo se muestra para las mesas de trabajo
seleccionadas (o el propio destino dentro de un destino seleccionado).
 Al ver un prototipo en un navegador web móvil, puedes guardar un acceso directo al
mismo en la pantalla de inicio del dispositivo. Esto hace que el prototipo parezca
más una aplicación nativa al presentarlo.