Guía del usuario Cancelar

Crear mesas de trabajo con desplazamiento

Buscar
  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. Requisitos del sistema
      1. Requisitos de hardware y software
      2. Adobe XD, Big Sur y Apple Silicon | macOS 11
    5. Conceptos básicos del espacio de trabajo
    6. Cambiar el idioma de la aplicación en Adobe XD
    7. Acceder a kits de diseño de interfaz de usuario
    8. Accesibilidad en Adobe XD
    9. Métodos abreviados de teclado
    10. Consejos y trucos
    11. Opciones de suscripción de Adobe XD
    12. Cambios en el plan de inicio de XD
  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
  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

Descubra cómo crear mesas de trabajo con desplazamiento.

Cuando crea un diseño de XD, a veces una mesa de trabajo no es lo suficientemente larga para adaptarse al contenido. Al alargar una mesa de trabajo y elegir opciones basadas en sus necesidades de diseño, puede desplazar verticalmente una mesa de trabajo para adaptarse a diferentes tamaños de dispositivos.

El desplazamiento vertical ayuda a simular efectos de desplazamiento al diseñar listas desplegables o sitios web. Sin embargo, puede utilizar grupos de desplazamiento para agregar un nuevo nivel de interacción al diseñar interfaces, mapas y galerías de imágenes horizontales de varios paneles.

Mesa de trabajo con desplazamiento

Crear un desplazamiento vertical

  1. En mesas de trabajo preestablecidas: Arrastre hacia abajo el punto más bajo de la mesa de trabajo para aumentar su longitud más que la pantalla del dispositivo. Una línea de puntos indica el inicio del contenido desplazable. 

    Línea de puntos y contenido desplazable
    Línea de puntos y contenido desplazable

  2. En el modo Diseño, seleccione las siguientes opciones en el Inspector de propiedades:

    • Desplazamiento: seleccione Vertical o Ninguno. 
    • Fijar posición al desplazarse: seleccione esta opción para fijar los elementos de diseño en una posición fija y así evitar el desplazamiento con el contenido. 
    • Altura de ventana gráfica: especifique la altura de la ventana gráfica a través de la cual puede ver la mesa de trabajo. 

    Puede aplicar un efecto de desplazamiento vertical para mover el contenido de la mesa de trabajo hacia arriba y hacia abajo.

    Desplazamiento vertical en una mesa de trabajo de tamaño personalizado
    Desplazamiento vertical en una mesa de trabajo

  3. Cablee las mesas de trabajo en el modo de prototipo.

  4. En el modo Prototipo, seleccione las siguientes opciones en el Inspector de propiedades:

    • Preservar posición de desplazamiento: realiza la transición a la siguiente mesa de trabajo a la vez que mantiene la posición de la mesa de trabajo anterior. Vea esta publicación de Twitter para obtener más detalles. 
    • Fijar posición al desplazarse: fija los elementos de diseño en una posición fija para evitar el desplazamiento con el contenido. 
    Preservar posición de desplazamiento
    Preservar posición de desplazamiento

    Fijar posición al desplazarse
    Fijar posición al desplazarse

  5. Para previsualizar la mesa de trabajo, seleccione Vista previa de escritorio  . Arrastre la ventana de vista previa para ver el desplazamiento vertical.

Ejemplos y archivos de muestra

¿Desea trabajar con mesas de trabajo predefinidas para crear una lista vertical desplegable y desplazable?

  1. Use la herramienta Seleccionar para hacer clic en el nombre de la mesa de trabajo o arrastrar por las mesas de trabajo. También puede hacer clic en el nombre de una mesa de trabajo en el panel Capas para seleccionarla en la ventana Documento.
  2. Para alargar la mesa de trabajo seleccionada, arrastre hacia abajo el punto inferior de la mesa de trabajo. Una línea de puntos indica la altura original de la mesa de trabajo.
  3. Puede obtener una vista previa del desplazamiento en una mesa de trabajo directamente en XD, usando la opción Vista previa de escritorio.

Descargue los archivos de muestra y pruébelos o vea este vídeo para obtener más información.

Duración: 1 minuto.

A medida que va creando sus diseños para escritorio o dispositivos móviles, ¿le gustaría ver partes del sitio web solo cuando se desplazan y fijar los elementos de diseño sin que floten? Vea este vídeo para obtener más información sobre mesas de trabajo con desplazamiento y elementos fijados. 

Duración: 1 minuto.

También puede acceder a la comunidad de XD para consultar más tutoriales y archivos de muestra.

Consejos y trucos

Para crear efectos de desplazamiento horizontal en los diseños, use grupos de desplazamiento. Los grupos de desplazamiento le permiten crear prototipos de ventanas de contenido que se pueden desplazar horizontalmente, verticalmente o en ambas direcciones.

Temas relacionados

Logotipo de Adobe

Inicia sesión en tu cuenta

Vínculos rápidos

Ver todos los planes Administrar los planes

Avisos legales    |    Política de privacidad en línea