¿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!
Última actualización el
|
También se aplica a Adobe XD
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.
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.
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.
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
Mueva los elementos libremente o utilice las herramientas Alinear en elementos de pila en la dirección opuesta a la pila.
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
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.
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.
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:
- 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.
- En la pila, seleccione el elemento que desee utilizar como fondo.
- 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?
- 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.
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?
Inicia sesión en tu cuenta