Establecer relleno fijo para componentes y grupos

Adobe XD le permite ajustar los valores de relleno fijo en grupos o componentes con estados y modificar la escala del fondo automáticamente cuando se realizan cambios de contenido.

Esto reduce la cantidad de elementos de diseño y la sobrecarga mental al crear botones, listas desplegables, notas informativas sobre herramientas o cuadros de diálogo modales.

A diferencia del cambio de redimensionado interactivo que actúa cuando cambia el tamaño de un grupo completo, el relleno actúa cuando cambia el contenido dentro de un grupo.

¡Diga adiós al cambio de tamaño manual y dé la bienvenida a la flexibilidad y a flujos de trabajo más rápidos!

El relleno es la distancia desde el fondo visual hasta el borde del contenido en cada lado identificado por un fondo estirado. 

XD identifica automáticamente un fondo cuando:

• Cualquier forma, grupo o grupo booleano se coloca en la parte más baja de la capa del grupo o componente y 
• Otros elementos se superponen a la capa más baja. 

Para controlar con precisión el tamaño de fondo de un objeto a través del relleno, realice los siguientes pasos: 

1. En el Inspector de propiedades, deslice el botón para habilitar la opción de relleno.
2. En función de lo que necesite para su diseño, establezca los valores de las opciones Mismo relleno para todas las direcciones o Relleno diferente para cada dirección.

Solo podrá ver la opción Relleno si el elemento de fondo de la estructura de capas está en la última posición en el grupo y se superpone a los demás objetos.

Cuando mueve o cambia el tamaño del contenido dentro de un grupo o componente, XD identifica el fondo, calcula los valores de relleno y los modifica en el Inspector de propiedades.

Los valores actualizados se mantienen en el grupo o componente y el fondo se redimensiona automáticamente. Cuando un grupo o componente no tiene fondo visual, el valor de relleno se establece en 0.

¿Quiere modificar los valores de relleno?

Use cualquiera de las opciones siguientes:

• En el Inspector de propiedades, actualice los valores de relleno existentes.
• Para cambiar el tamaño del relleno en un lienzo, presione la tecla `, desplace el cursor sobre el área de relleno y arrastre.
• Para actualizar los valores de relleno en un grupo o componente, cambie el tamaño manualmente o mueva el fondo en el lienzo.
• Para editar todos los valores de relleno, seleccione Mayús + `.
• Para editar valores de relleno opuestos, seleccione ` + Alt.

Ejemplos

Relleno en componentes con estados

Los componentes heredan el comportamiento del relleno de su componente maestro. Esto significa que los valores de relleno establecidos en el componente maestro se sincronizan en los estados o instancias.

La anulación del relleno ocurre cuando usted:

• Cambia los valores de relleno en la instancia de un componente y en un componente maestro o
• La instancia no actualiza sus valores de relleno.

Cosas a tener en cuenta

• Al habilitar el relleno:
  • Todas las instancias de componentes o estados heredan automáticamente la propiedad establecida en el componente maestro o en el estado predeterminado, sin la opción de anulación local.
  • La opción Enviar al fondo en el lienzo coloca cualquier elemento de un grupo o componente justo encima del fondo del grupo.
• Si el fondo es un componente, una máscara o grupo booleano, se aplican reglas de cambio de redimensionamiento interactivo para cambiar el tamaño del objeto.
  

• Si se elimina un fondo, XD evalúa el grupo y automáticamente convierte la siguiente capa potencial en fondo y actualiza los valores de relleno. Si no hay una capa de fondo, el valor de relleno se restablece en 0.

Limitaciones

• Los componentes y el texto de punto no pueden actuar como fondo para un grupo o componente.
  

• El relleno no se mueve en modo Prototipo cuando se usan los estados Pasar el ratón o Tocar dentro del contenido del diseño.

Ejemplos y archivos de muestra

¿Quiere cambiar la etiqueta de un botón sin que la etiqueta se desborde fuera del botón?

Más información

¿Qué viene después?

Ya conoce los conceptos básicos del relleno. Dé un paso más y aprenda a crear sus prototipos o diseños interactivos y a compartirlos con interesados en el proyecto, como desarrolladores y otros diseñadores.

¿Tiene alguna pregunta o idea?