Aprenda a usar el relleno para crear fácilmente elementos de diseño según el contenido, como botones, listas desplegables, sugerencias sobre herramientas o cuadros de diálogos modales.

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 cognitiva al crear botones, listas desplegables, sugerencias sobre herramientas o cuadros de diálogo modales.

1
Uso del relleno para crear diseños según el contenido

A diferencia del cambio de tamaño adaptativo 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!

Trabajar con relleno

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. 
Relleno
Mismos valores de relleno en todas las direcciones

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.
1
Diferentes valores de relleno 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

Cuadrículas de repetición y relleno
Uso de la cuadrícula de repetición con relleno

Cuando se aumentan los valores de relleno, XD crea un relleno invisible que actúa como un espacio alrededor de los logotipos o en un área táctil más grande para los botones al crear los prototipos.

  • ¿Quiere cambiar la etiqueta de un botón? Escriba el siguiente texto y el botón cambiará de tamaño.
  • ¿Quiere añadir más filas en una lista desplegable? Use una cuadrícula de repetición para crear más filas dentro de un grupo y observe como el fondo cambia de tamaño junto con la cuadrícula de repetición.

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 tamaño adaptativo 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 puntual 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?

1
Archivos de muestra
  1. Descargue y abra el archivo del botón de muestra en XD.
  2. Seleccione el objeto y el fondo.
  3. Para poder manipular el fondo y el contenido dentro del botón, habilite la opción Relleno en el Inspector de propiedades
    .
  4. Según lo que necesite para su diseño, seleccione y aplique cualquiera de las opciones de relleno.

Más información

Duración: 7 minutos.


Próximos pasos

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.

¿Alguna pregunta o idea?

community

Si tiene alguna pregunta que hacer o una idea que compartir, venga y participe en la Comunidad de Adobe XD. Nos gustaría tener noticias suyas y ver sus creaciones.