¿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!
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.
Asegúrese de que está familiarizado con los conceptos básicos de los diseños con contenido:
Antes de empezar a usar pilas, debe conocer estas limitaciones:
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.
Al habilitar la pila, XD hace lo siguiente:
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.
Después de crear y modificar los elementos de pila, utilice cualquiera de las siguientes opciones para reordenarlos:
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:
Ahora que ha aprendido a crear pilas y a trabajar con ellas, aquí se presentan algunos consejos adicionales sobre el uso de 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.
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.
“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.
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 para compartir? Entre y participe en la Comunidad de Adobe XD. ¡Nos gustaría tener noticias suyas y ver sus creaciones!
Inicia sesión en tu cuenta