Guía del usuario Cancelar

Establecer relleno fijo para componentes y grupos

  1. Guía del usuario de Adobe XD
  2. Introducción
    1. Novedades de Adobe XD
    2. Preguntas habituales
    3. Diseñar, crear prototipos y compartir con Adobe XD
    4. Requisitos del sistema
      1. Requisitos de hardware y software
      2. Adobe XD, Big Sur y Apple Silicon | macOS 11
    5. Conceptos básicos del espacio de trabajo
    6. Cambiar el idioma de la aplicación en Adobe XD
    7. Acceder a kits de diseño de interfaz de usuario
    8. Accesibilidad en Adobe XD
    9. Métodos abreviados de teclado
    10. Consejos y trucos
    11. Opciones de suscripción de Adobe XD
    12. Cambios en el plan de inicio de XD
  3. Diseño
    1. Mesas de trabajo, guías y capas
      1. Empezar a usar mesas de trabajo
      2. Usar guías y cuadrículas
      3. Crear mesas de trabajo con desplazamiento
      4. Trabajar con capas
      5. Crear grupos de desplazamiento
    2. Formas, objetos y trazados
      1. Seleccionar, redimensionar y rotar objetos
      2. Mover, alinear, distribuir y organizar objetos
      3. Agrupar, bloquear, duplicar, copiar y voltear objetos
      4. Establecer el trazo, el relleno y las sombras paralelas de objetos
      5. Crear elementos repetidos
      6. Crear diseños en perspectiva con transformaciones 3D
      7. Editar objetos utilizando operaciones booleanas
    3. Texto y fuentes
      1. Trabajar con herramientas de dibujo y texto
      2. Fuentes en Adobe XD
    4. Componentes y estados
      1. Trabajar con componentes
      2. Trabajar con componentes anidados
      3. Añadir varios estados a componentes
    5. Máscaras y efectos
      1. Crear una máscara con formas
      2. Usar efectos de desenfoque
      3. Crear y modificar degradados
      4. Aplicar efectos de mezclas
    6. Maquetación
      1. Redimensionado interactivo y restricciones
      2. Establecer relleno fijo para componentes y grupos
      3. Crear diseños dinámicos con pilas
    7. Vídeos y animaciones de Lottie
      1. Cómo usar los vídeos
      2. Crear prototipos mediante vídeos
      3. Usar animaciones de Lottie
  4. Prototipo
    1. Crear prototipos interactivos
    2. Animar prototipos
    3. Propiedades de objetos compatibles con la animación automática
    4. Crear prototipos con teclado y mando de juego
    5. Crear prototipos utilizando comandos de voz y reproducción
    6. Crear transiciones temporizadas
    7. Añadir superposiciones
    8. Diseñar prototipos de voz
    9. Crear vínculos de anclaje
    10. Crear hipervínculos
    11. Previsualizar diseños y prototipos
  5. Compartir, exportar y revisar
    1. Compartir mesas de trabajo seleccionadas
    2. Compartir diseños y prototipos
    3. Establecer permisos de acceso de vínculos
    4. Usar prototipos
    5. Revisar prototipos
    6. Trabajar con especificaciones de diseño
    7. Compartir especificaciones de diseño
    8. Inspeccionar especificaciones de diseño
    9. Controles de las especificaciones de diseño
    10. Revisar y comentar especificaciones de diseño
    11. Exportar activos de diseño
    12. Exportar y descargar activos de especificaciones de diseño
    13. Grupos compartidos para empresas
  6. Sistemas de diseño
    1. Sistemas de diseño con Bibliotecas Creative Cloud
    2. Trabajar con activos de documentos en Adobe XD
    3. Trabajar con Bibliotecas Creative Cloud en Adobe XD
    4. Migrar activos vinculados a Bibliotecas Creative Cloud
    5. Trabajar con tokens de diseño 
    6. Usar activos de Bibliotecas Creative Cloud
  7. Documentos en la nube
    1. Documentos en la nube en Adobe XD
    2. Colaborar y coeditar diseños
    3. Coeditar documentos que compartan con usted
  8. Integraciones y complementos
    1. Trabajar con activos externos
    2. Trabajar con activos de diseño de Photoshop
    3. Copiar y pegar activos desde Photoshop
    4. Importar o abrir diseños de Photoshop
    5. Usar activos de Illustrator en Adobe XD
    6. Abrir o importar diseños de Illustrator
    7. Copiar vectores de Illustrator en XD
    8. Complementos para Adobe XD
    9. Crear y administrar complementos
    10. Integración de Jira para XD
    11. Complemento Slack para XD
    12. Complemento Zoom para XD
    13. Publicar diseño de XD en Behance
  9. XD para iOS y Android
    1. Vista previa en dispositivos móviles
    2. Preguntas frecuentes de Adobe XD para dispositivos móviles
  10. Solución de problemas
    1. Problemas conocidos y resueltos
      1. Problemas conocidos
      2. Problemas resueltos
    2. Instalación y actualizaciones
      1. XD aparece como incompatible en Windows
      2. Código de error 191
      3. Código de error 183
      4. Problemas al instalar complementos de XD
      5.  Solicitud para desinstalar y volver a instalar XD en Windows 10
      6. Problemas con la migración de preferencias
    3. Inicio y cierre inesperado
      1.  XD se cierra al iniciar la aplicación en Windows 10
      2.  XD se cierra al cerrar sesión en Creative Cloud
      3. Problema con el estado de suscripción en Windows
      4. Aviso de aplicación bloqueada al iniciar XD en Windows
      5. Generación de volcados de fallos en Windows
      6. Recopilación y uso compartido de registros de errores
    4. Documentos en la nube y bibliotecas Creative Cloud
      1. Problemas con documentos en la nube de XD
      2. Problemas con componentes vinculados
      3. Problemas con bibliotecas y enlaces
    5. Crear prototipos, publicar y revisar
      1. No se pueden grabar interacciones de prototipos en macOS Catalina
      2. Problemas con flujos de trabajo de publicación
      3. Los vínculos publicados no aparecen en los navegadores
      4. Los prototipos no se renderizan correctamente en los navegadores.
      5. El panel de comentarios aparece repentinamente en los vínculos compartidos
      6. No es posible publicar bibliotecas
    6. Importar, exportar y usar otras aplicaciones
      1. Importar y exportar en XD
      2. Archivos de Photoshop en XD
      3. Archivos de Illustrator en XD
      4. Exportar a After Effects desde XD
      5. Archivos de Sketch en XD
      6. Aplicaciones de terceros que no aparecen en Exportar

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 mental al crear botones, listas desplegables, notas informativas 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 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!

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

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.
Cuadrículas de repetición y relleno
Uso de la cuadrícula de repetición con relleno

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?

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.

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

Pregunte a la comunidad

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

Logotipo de Adobe

Inicia sesión en tu cuenta