Guía del usuario Cancelar

Crear diseños dinámicos con pilas

  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

Aprenda a utilizar pilas en Adobe XD para crear diseños dinámicos que reaccionen a los cambios de contenido.

Las pilas de Adobe XD permiten que los objetos dentro de un grupo definan espacios fijos entre ellos. Al cambiar el tamaño, reordenar o modificar objetos dentro de una pila, XD conserva automáticamente el espacio definido entre objetos. 

Resultado del funcionamiento de las pilas

Junto con el relleno y el cambio de tamaño interactivo, las pilas constituyen una potente combinación de funciones que proporciona más control y velocidad en el diseño. Las pilas se aplican a componentes, automatizan el diseño y permiten la edición de botones, menús, menús desplegables y diseños basados en tarjetas en un instante.

¿Es la primera vez que usa XD?

Instalar XD

Conozca los conceptos básicos de la aplicación

¿Ya está usando XD?

Actualizar la aplicación

Descubra las novedades

Antes de continuar

Asegúrese de que está familiarizado con los conceptos básicos de los diseños con contenido:

Limitaciones

Antes de empezar a usar pilas, debe conocer estas limitaciones:

  • Si pasa el ratón por encima de un elemento con un estado con cursor encima que crece en tamaño, el fondo no cambia de tamaño para ajustarse al nuevo estado y los elementos de la pila no se eliminan.
  • Los componentes no pueden actuar como fondo para el relleno y las pilas. En su lugar, cree un componente que contenga tanto el contenido como el fondo.
  • No puede:
    • Convertir grupos especiales en máscaras o grupos booleanos en pilas.
    • Cambiar el tamaño de pilas en la dirección de la pila.
    • Seleccionar un elemento de pila y elementos fuera de la pila.

Habilitar pilas

Puede activar pilas en un grupo o componente que tenga activado el redimensionado interactivo. Seleccione la casilla de verificación Pilas en los controles Redimensionado interactivo del Inspector de propiedades.

XD determina automáticamente la orientación de la pila en función de la estructura del grupo o componente. Sin embargo, si desea cambiar la orientación de la pila, seleccione Vertical u Horizontal en la opción Pila del Inspector de propiedades. 

Cuando se trabaja con componentes, el control de orientación de pila solo está disponible para el componente maestro.

¿Qué sucede cuando se habilitan las pilas?

Al habilitar la pila, XD hace lo siguiente:

  • Identifica automáticamente el fondo (un grupo o una forma colocados al final del grupo en el panel Capas y superposiciones en el lienzo con todos los objetos del grupo),
  • Activa y calcula los valores de relleno,
  • Determina la orientación de la pila: Vertical u Horizontal,
  • Agrupa los elementos superpuestos para conservar el diseño, y
  • Define y corrige los valores de espaciado entre los elementos.
aplicar pilas

Editar elementos de pila

Después de crear elementos de pila, utilice cualquiera de las siguientes opciones para editarlos:

Mover elementos o utilizar la opción Alinear                                                     Cambiar el tamaño de los objetos y el texto de la pila

alinear pilas

Mueva los elementos libremente o utilice las herramientas Alinear en elementos de pila en la dirección opuesta a la pila.

cambiar el tamaño

Seleccione un objeto para cambiar el tamaño y otros objetos de la pila se moverán automáticamente para conservar su espaciado relativo. Utilice Texto de altura automática para ajustar dinámicamente la altura del texto de la pila sin cambiar su anchura.

Editar espacios entre objetos                                                                   Ajustar espacios dentro de una pila

Editar espacios entre objetos

Seleccione un objeto dentro de un grupo o componente apilado y pase el puntero sobre los espacios. Un resaltado rosa representa el espacio entre los objetos de la pila. Haga clic y arrastre el resaltado para editar el espacio entre los objetos.

ajustar espacios entre pilas

Seleccione toda la pila y mantenga pulsada la tecla S del teclado para ajustar los espacios dentro de una pila. También puede utilizar S para editar el relleno.

Ecualizar espacios en una pila                                                                        Duplicar elementos en una pila

Arrastre y utilice Mayús o Mayús + S (cuando la selección esté fuera de la pila).

Utilice Cmd+D para duplicar un elemento dentro de una pila y colocarlo debajo del elemento seleccionado.

Reordenar elementos de la pila

Después de crear y modificar los elementos de pila, utilice cualquiera de las siguientes opciones para reordenarlos:

  • Seleccione los elementos de la pila y arrástrelos por la dirección de la pila en el lienzo.
  • Utilice Cmd+ ] y Cmd + [ para desplazarse hacia arriba y hacia abajo en la pila y Cmd + Mayús + ] y Cmd + Mayús + [ para mover la selección al primer o último lugar de una pila. Estos comandos también están disponibles en el menú contextual (clic derecho).
  • La nueva posición del elemento de pila se resalta con cuadros rosas. Para mantener la alineación al reordenar, pulse Mayús para bloquear los elementos de la pila en la dirección de arrastrar y conservar su alineación original.
Reordenar elementos de la pila

Crear o modificar un fondo de pila

Al crear una pila, XD determina automáticamente el fondo. Sin embargo, cuando se activan pilas en un grupo o componente, la capa o el grupo situados en el nivel más bajo de la pila que se superponen a su contenido se convierten en su fondo.

XD no admite instancias de componentes como fondo.

Para crear y modificar un fondo de pila, siga estos pasos:

create_modify_stack_baground

  1. Cree una forma o un grupo dentro de la pila que actúa como fondo de la pila. También puede crear un fondo fuera de la pila y copiarlo en el grupo apilado.
  2. En la pila, seleccione el elemento que desee utilizar como fondo.
  3. Haga clic con el botón derecho y seleccione Crear fondo o Reemplazar fondo. El elemento seleccionado se traslada al final de la pila y se cambia de tamaño para ajustarse al tamaño de la pila y a los valores de relleno.

Aprovechar al máximo los elementos de pila

Ahora que ha aprendido a crear pilas y a trabajar con ellas, aquí se presentan algunos consejos adicionales sobre el uso de pilas:

Anidar y reorganizar pilas

Puede conseguir diseños bien definidos y fáciles de editar al anidar pilas entre sí, por ejemplo, una pila horizontal en una pila vertical. Puede anidar un número ilimitado de pilas. Vea la ilustración animada para comprender cómo funcionan las pilas anidadas. 

pilas y cuadrículas de repetición

Pilas en componentes y estados

Puede aplicar pilas y relleno a componentes para definir elementos de interfaz de usuario reutilizables en el contexto de sistemas de diseño. Cuando se trabaja con componentes que necesitan una actualización de etiqueta o fila, el uso de pilas hace que el diseño del componente reaccione al cambio y automatice el esfuerzo de diseño manual. Por ejemplo, si tiene varias instancias con anulaciones de contenido, utilice pilas para editar y administrar espacios globalmente. ¡Se acabó la edición manual de cada tarjeta!

Las pilas aplicadas a los componentes principales se aplican automáticamente a todas sus instancias y estados. También puede crear un componente vinculado con pilas y editarlos. 

¿Cómo se comportan las modificaciones con las pilas?

  • Se produce una modificación de espacio cuando se edita manualmente el espacio entre dos elementos de una pila en una instancia o estado. Si modifica el espacio en el componente maestro, los cambios no se aplicarán a la instancia o al estado.
  • Las instancias pueden tener anulaciones de contenido o diseño en elementos como un texto de área más grande. Estas instancias pueden seguir sincronizándose con el patrón para los valores de relleno o los espacios intermedios. 
Comportamiento de las modificaciones con las pilas

Más información

“Junto con el relleno y el cambio de tamaño interactivo, realice una potente combinación de funciones cuando trabaje en un sistema de diseño. Cuando se utilizan pilas en un componente maestro, cualquier instancia de dicho componente respetará esa estructura de apilado”.— Dani Beaumont, Director principal de productos, XD.

Para obtener más información sobre cómo empezar a usar pilas en componentes y grupos, vea este vídeo.

Tiempo de visualización: 1 minuto.

Próximos pasos

Hemos comenzado a usar pilas para definir espacios entre elementos. Dé un paso adelante y obtenga más información sobre cómo crear prototipos animados y compartirlos con diseñadores o responsables de departamento para obtener comentarios.

¿Tiene alguna pregunta o idea?

Pregunte a la comunidad

¿Tiene alguna pregunta o idea para compartir? Entre y participe en la Comunidad de Adobe XD. ¡Nos gustaría tener noticias suyas y ver sus creaciones!

Logotipo de Adobe

Inicia sesión en tu cuenta

[Feedback V2 Badge]