Introducción a las mesas de trabajo en Adobe XD

Aprenda a utilizar las mesas de trabajo para crear sus proyectos de diseño en XD.

Conozca a Jeanee, diseñadora gráfica, elegida para liderar un proyecto de diseño de UX. Va a presentar Adobe XD a su equipo, cuyos miembros tienen diferentes niveles de experiencia con el diseño y las herramientas de UX.

 
  • Está buscando recursos que le ayuden a comenzar rápidamente con el proyecto.

 

  • Necesita tutoriales para empezar y archivos de muestra para aprender sobre la marcha.

Jeanee se está formando en terminologías básicas de diseño y trabajando con mesas de trabajo para crear su primer prototipo en XD. Siga leyendo para saber cómo podemos ayudarla a empezar.

Pruébelo

Obtener archivo de muestra

.xdc; 142 KB

Antes de continuar

Configurar las mesas de trabajo en 4 sencillos pasos

¿Qué es una mesa de trabajo? La mesa de trabajo representa las pantallas de la aplicación o las páginas del sitio web. Simplifica los procesos de diseño y crea diseños interactivos para varios tamaños de pantalla en un único documento. Utilice las mesas de trabajo para crear su proyecto de XD.

Siga leyendo para saber cómo configurar las mesas de trabajo.

Crear una mesa de trabajo nueva

Adobe XD le proporciona mesas de trabajo para tamaños de pantalla populares como los de las distintas versiones de iPhone, iPad y Web. Puede crear una mesa de trabajo personalizada si las opciones no cumplen sus requisitos.

Pantalla Inicio

Mesas de trabajo personalizadas

Utilice los tamaños de mesa de trabajo preestablecidos o cree una mesa de trabajo personalizada.

Aplicación XD

Propiedad de mesa de trabajo

Utilice la herramienta Mesa de trabajo  para crear mesas de trabajo adicionales. Seleccione y aplique los ajustes preestablecidos de mesa de trabajo en el Inspector de propiedades.

Usar una mesa de trabajo existente de Photoshop e Illustrator

Puede importar a XD mesas de trabajo existentes desde Photoshop o Illustrator sin necesidad de volver a crearlas. 

Usar una mesa de trabajo existente de Photoshop e Illustrator

Utilice Archivo > Importar desde XD para abrir las mesas de trabajo de Photoshop o Illustrator en XD con cada mesa de trabajo y capa intacta y editable.

Consulte este artículo en el que se describen las 5 principales formas de utilizar los activos de Photoshop en XD.

Administrar mesas de trabajo

¿Ha cambiado de opinión sobre el tamaño de la mesa de trabajo? Cambie su tamaño. También puede cambiarle el nombre en función de sus necesidades de diseño. ¿Desea crear más mesas de trabajo y administrar su colocación? Duplíquelas y reorganícelas.

Cambiar nombre

Reorganizar

Haga doble clic en el título de la mesa de trabajo.

Redimensionar

Redimensionar

Arrastre el control circular que aparece en los bordes de una mesa de trabajo.

Duplicar

Copiar y pegar mesas de trabajo

Seleccione la mesa de trabajo y pulse Ctrl /Cmd + D.

Alineación y distribución

Alinear y distribuir

Seleccione varias mesas de trabajo y haga clic en Alinear y Distribuir en el Inspector de propiedades. Arrastre la mesa de trabajo para reorganizarla.

Aplicar cuadrículas de diseño o cuadradas

¿Desea definir la estructura subyacente del contenido de diseño añadido en las mesas de trabajo? Aplique cuadrículas de diseño. ¿Desea hacerse una idea de cómo medir rápidamente y alinear el contenido del diseño mientras dispone objetos o texto en las mesas de trabajo? Use cuadrículas cuadradas.

Cuadrículas de diseño

Cuadrículas de diseño

Seleccione una o varias mesas de trabajo y, en la sección Cuadrícula del Inspector de propiedades, elija Diseño.

Cuadrículas cuadradas

Cuadrículas de diseño

Seleccione una o varias mesas de trabajo y, en la sección Cuadrícula del Inspector de propiedades, elija Cuadrado.

Diseñar mesas de trabajo

Una vez creada su primera mesa de trabajo, aprenda a añadir elementos visuales y de texto, cambiar el fondo y crear efectos de desplazamiento.

Añadir elementos visuales y de texto

Crear mesas de trabajo con desplazamiento

Añadir elementos visuales y de texto

Ahora que la mesa de trabajo básica está en su lugar, puede crear o modificar el color de fondo, añadir gráficos y crear o dar formato a estilos de texto en recursos reutilizables. ¿Desea crear una cuadrícula editable de elementos repetidos? Use cuadrículas de repetición.

Añadir elementos visuales y de texto

Añadir elementos

Utilice las herramientas de Dibujo para crear elementos personalizados o seleccione Archivo > Importar para importar elementos existentes como imágenes e iconos de la carpeta del dispositivo. Utilice las herramientas de Texto para crear, dar formato y capturar estilos de texto en recursos reutilizables. 

Para cambiar el color de fondo de la mesa de trabajo, en el Inspector de propiedades, seleccione Rellenar y aplique color desde el selector de color.

Crear elementos repetibles

Repetir elementos

Utilice cuadrículas de repetición para crear objetos con elementos repetitivos, como listas y diseños basados en tarjetas.

Crear mesas de trabajo con desplazamiento

¿Desea añadir efectos de desplazamiento vertical y horizontal en el diseño? Utilice grupos de desplazamiento para crear prototipos de una ventana de contenido.

¿Desea lograr una simulación realista de desplazamiento en equipos de escritorio y móviles? Establezca la posición fija de un elemento en la mesa de trabajo para permitir que otros elementos se desplacen debajo. 

Desplazamiento vertical

Línea de puntos y contenido desplazable

Para extender la mesa de trabajo más allá de la altura de la ventana gráfica, utilice el marcador. El marcador indica la posición hasta la cual debe desplazarse para acceder al contenido.

Fijar posición al desplazarse

Línea de puntos y contenido desplazable

Para fijar los elementos de diseño a una posición fija, seleccione Fijar posición al desplazarse en el Inspector de propiedades.

El diseño final

Ahora que ya conoce lo suficiente sobre las mesas de trabajo, puede jugar con lo que ha aprendido hasta ahora y crear mesas de trabajo más sorprendentes para sus proyectos de diseño.

Sujeto a cambios

Siga adelante y descargue el diseño final para ver el aspecto final del proyecto de diseño.

Más información

Para empezar, vea este vídeo de ejemplo de 4 minutos. También puede descargar los archivos de muestra como prueba al tiempo que ve los vídeos

Archivos de muestra

Sugerencias y trucos

Ahora que ya conoce lo básico sobre las mesas de trabajo en XD, a continuación le ofrecemos algunos consejos y trucos prácticos:

  • Para medir la distancia de un objeto desde los bordes de una mesa de trabajo, haga clic en el objeto y pulse las teclas Opción (en macOS) o Alt (en Windows).
  • Para desactivar la opción de desplazamiento en una mesa de trabajo, seleccione la mesa de trabajo y, en el Inspector de propiedades, cambie Desplazamiento a Ninguno.

Para obtener más sugerencias sobre cómo trabajar con mesas de trabajo, siga en Twitter a @Elainecchao, Directora de productos XD.

¿Qué viene después?

Le ayudamos a comenzar a crear, administrar y compartir mesas de trabajo. Dé un paso adelante y descubra cómo crear guías de mesa de trabajo personalizadas y colocar la mesa de trabajo con cuadrículas.

¿Tiene alguna pregunta o idea?

Pregunte a la comunidad

Si tiene alguna pregunta que hacer o una idea que compartir, venga y participe en la Comunidad de Adobe XD. Nos gustaría que nos dejara sus comentarios y ver sus creaciones.

Logotipo de Adobe

Inicia sesión en tu cuenta