Guía del usuario Cancelar

Introducción a las mesas de trabajo en Adobe XD

  1. Guía del usuario de Adobe XD
  2. Introducción
    1. Novedades de Adobe XD
    2. Preguntas habituales
    3. Diseñar, crear prototipos y compartir con Adobe XD
    4. Gestión de color
    5. Requisitos del sistema
      1. Requisitos de hardware y software
      2. Adobe XD, Big Sur y Apple Silicon | macOS 11
    6. Conceptos básicos del espacio de trabajo
    7. Cambiar el idioma de la aplicación en Adobe XD
    8. Acceder a kits de diseño de interfaz de usuario
    9. Accesibilidad en Adobe XD
    10. Métodos abreviados de teclado
    11. Consejos y trucos
  3. Diseño
    1. Mesas de trabajo, guías y capas
      1. Empezar a usar mesas de trabajo
      2. Usar guías y cuadrículas
      3. Crear mesas de trabajo con desplazamiento
      4. Trabajar con capas
      5. Crear grupos de desplazamiento
    2. Formas, objetos y trazados
      1. Seleccionar, redimensionar y rotar objetos
      2. Mover, alinear, distribuir y organizar objetos
      3. Agrupar, bloquear, duplicar, copiar y voltear objetos
      4. Establecer el trazo, el relleno y las sombras paralelas de objetos
      5. Crear elementos repetidos
      6. Crear diseños en perspectiva con transformaciones 3D
      7. Editar objetos utilizando operaciones booleanas
    3. Texto y fuentes
      1. Trabajar con herramientas de dibujo y texto
      2. Fuentes en Adobe XD
    4. Componentes y estados
      1. Trabajar con componentes
      2. Trabajar con componentes anidados
      3. Añadir varios estados a componentes
    5. Máscaras y efectos
      1. Crear una máscara con formas
      2. Usar efectos de desenfoque
      3. Crear y modificar degradados
      4. Aplicar efectos de mezclas
    6. Maquetación
      1. Redimensionado interactivo y restricciones
      2. Establecer relleno fijo para componentes y grupos
      3. Crear diseños dinámicos con pilas
    7. Vídeos y animaciones de Lottie
      1. Cómo usar los vídeos
      2. Crear prototipos mediante vídeos
      3. Usar animaciones de Lottie
  4. Prototipo
    1. Crear prototipos interactivos
    2. Animar prototipos
    3. Propiedades de objetos compatibles con la animación automática
    4. Crear prototipos con teclado y mando de juego
    5. Crear prototipos utilizando comandos de voz y reproducción
    6. Crear transiciones temporizadas
    7. Añadir superposiciones
    8. Diseñar prototipos de voz
    9. Crear vínculos de anclaje
    10. Crear hipervínculos
    11. Previsualizar diseños y prototipos
  5. Compartir, exportar y revisar
    1. Compartir mesas de trabajo seleccionadas
    2. Compartir diseños y prototipos
    3. Establecer permisos de acceso de vínculos
    4. Usar prototipos
    5. Revisar prototipos
    6. Trabajar con especificaciones de diseño
    7. Compartir especificaciones de diseño
    8. Inspeccionar especificaciones de diseño
    9. Controles de las especificaciones de diseño
    10. Revisar y comentar especificaciones de diseño
    11. Exportar activos de diseño
    12. Exportar y descargar activos de especificaciones de diseño
    13. Grupos compartidos para empresas
    14. Hacer copias de seguridad de recursos de XD o transferirlos
  6. Sistemas de diseño
    1. Sistemas de diseño con Bibliotecas Creative Cloud
    2. Trabajar con activos de documentos en Adobe XD
    3. Trabajar con Bibliotecas Creative Cloud en Adobe XD
    4. Migrar activos vinculados a Bibliotecas Creative Cloud
    5. Trabajar con tokens de diseño 
    6. Usar activos de Bibliotecas Creative Cloud
  7. Documentos en la nube
    1. Documentos en la nube en Adobe XD
    2. Colaborar y coeditar diseños
    3. Coeditar documentos que compartan con usted
  8. Integraciones y complementos
    1. Trabajar con activos externos
    2. Trabajar con activos de diseño de Photoshop
    3. Copiar y pegar activos desde Photoshop
    4. Importar o abrir diseños de Photoshop
    5. Usar activos de Illustrator en Adobe XD
    6. Abrir o importar diseños de Illustrator
    7. Copiar vectores de Illustrator en XD
    8. Complementos para Adobe XD
    9. Crear y administrar complementos
    10. Integración de Jira para XD
    11. Complemento Slack para XD
    12. Complemento Zoom para XD
    13. Publicar diseño de XD en Behance
  9. XD para iOS y Android
    1. Vista previa en dispositivos móviles
    2. Preguntas frecuentes de Adobe XD para dispositivos móviles
  10. Solución de problemas
    1. Problemas conocidos y resueltos
      1. Problemas conocidos
      2. Problemas resueltos
    2. Instalación y actualizaciones
      1. XD aparece como incompatible en Windows
      2. Código de error 191
      3. Código de error 183
      4. Problemas al instalar complementos de XD
      5.  Solicitud para desinstalar y volver a instalar XD en Windows 10
      6. Problemas con la migración de preferencias
    3. Inicio y cierre inesperado
      1.  XD se cierra al iniciar la aplicación en Windows 10
      2.  XD se cierra al cerrar sesión en Creative Cloud
      3. Problema con el estado de suscripción en Windows
      4. Aviso de aplicación bloqueada al iniciar XD en Windows
      5. Generación de volcados de fallos en Windows
      6. Recopilación y uso compartido de registros de errores
    4. Documentos en la nube y bibliotecas Creative Cloud
      1. Problemas con documentos en la nube de XD
      2. Problemas con componentes vinculados
      3. Problemas con bibliotecas y enlaces
    5. Crear prototipos, publicar y revisar
      1. No se pueden grabar interacciones de prototipos en macOS Catalina
      2. Problemas con flujos de trabajo de publicación
      3. Los vínculos publicados no aparecen en los navegadores
      4. Los prototipos no se renderizan correctamente en los navegadores.
      5. El panel de comentarios aparece repentinamente en los vínculos compartidos
      6. No es posible publicar bibliotecas
    6. Importar, exportar y usar otras aplicaciones
      1. Importar y exportar en XD
      2. Archivos de Photoshop en XD
      3. Archivos de Illustrator en XD
      4. Exportar a After Effects desde XD
      5. Archivos de Sketch en XD
      6. Aplicaciones de terceros que no aparecen en Exportar

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 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.

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

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

Mesas de trabajo personalizadas

Aplicación XD

Utilice la herramienta Mesa de trabajo  para crear mesas de trabajo adicionales. 

Propiedad de mesa de trabajo

Seleccione un ajuste prestablecido de mesa de trabajo en el Inspector de propiedades o arrastre el lienzo para crear una mesa de trabajo personalizada.

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.

Con XD 57 y versiones posteriores, obtiene colores uniformes cuando usa un activo existente con un perfil de color sRGB de Photoshop e Illustrator en un documento XD que tiene un perfil de color sRGB. Si el documento XD tiene un perfil de color Sin gestionar , recibe un mensaje que le pide que cambie el perfil de color a sRGB.

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.

Alinear y distribuir

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 mantener los elementos de diseño en 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

Consejos 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.

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Del 14 al 16 de octubre en Miami Beach y en línea