Crear diseños dinámicos con pilas

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. 

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.

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

• Componentes
• Redimensionado interactivo y restricciones
• Relleno para componentes y grupos

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

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?

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

Editar espacios entre objetos                                                                   Ajustar espacios dentro de una pila

Ecualizar espacios en una pila                                                                        Duplicar elementos en una pila

Reordenar elementos de la pila

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

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:

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

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?