Guía del usuario Cancelar

Usar componentes anidados en Adobe XD

  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 componentes anidados en sistemas de diseño en Adobe XD.

Para crear un sistema de diseño es necesario tener la capacidad de crear componentes según un enfoque molecular para lograr una reutilización y flexibilidad óptimas. Al crear componentes, XD le permite anidarlos entre sí y crear objetos complejos como menús, diseños basados en tarjetas y muchos más. 

Continúe leyendo para aprender a crear y utilizar componentes anidados para una experiencia de diseño optimizada.

Componentes
Usar componentes anidados en XD

¿Es la primera vez que usa XD?

Obtener XD

Conozca los conceptos básicos de la aplicación

¿Ya está en Adobe XD?

Actualizar la aplicación

Descubra las novedades

Antes de continuar

Familiarícese con estos conceptos:

Terminología sobre componentes

Primero debe familiarizarse con algunos términos relacionados con los componentes anidados:

  • Componente principal: un componente principal es el componente que define y controla todas las propiedades del componente.
  • Instancia de componente: una instancia de componente es una copia del componente principal que hereda los cambios realizados en el componente principal.
  • Componente anidado: un componente anidado es un componente dentro de otro componente.
  • Componente externo: un componente externo es un componente que tiene otro componente en su interior.

Crear un componente anidado

Con los componentes anidados, puede crear más sistemas de diseño sólidos. Cuando modifica un componente principal, todas sus instancias replican ese cambio, incluso si este se ha aplicado en un componente anidado dentro de él.

Para crear componentes anidados, puede usar cualquiera de estos métodos:

Método A: copiar y pegar una instancia de componente en un grupo y convertirlo en un componente.

  1. Cree un componente de botón principal.
  2. Copie y pegue una instancia del componente de botón en un grupo.
  3. Seleccione el grupo y conviértalo en un componente. 

Método B: copiar y pegar una instancia de componente dentro de otro componente ya creado.

Pegue una instancia del componente de botón dentro del grupo

  1. Cree un componente de botón principal.
  2. Copie y pegue una instancia del componente de botón dentro de otro componente.

Método C: examinar una parte de un componente y convertirlo en un componente.

  1. Cree un componente de diálogo principal.
  2. Explore en un botón dentro del componente.
  3. Convierta el botón en un componente.

Ejemplo

Usemos el Método A para crear un componente de cuadro de diálogo.

Pegar una instancia de botón

Pegar la instancia

Pegar una instancia del componente de botón dentro del grupo.

Convertirlo en un componente

Crear el componente

Seleccionar el grupo y convertirlo en un componente.

Crear un componente de botón

Crear un componente de botón

Cree un componente de botón para el cuadro de diálogo.

Crear un contenedor de cuadro de diálogo

Contenedor de cuadro de diálogo

Cree un contenedor de cuadro de diálogo con texto y otros objetos dentro como un grupo.

Prácticas recomendadas

A continuación se indican algunas prácticas recomendadas para crear componentes anidados:

  • Puede crear un componente con varios componentes anidados en su interior. No obstante, cuando los componentes tienen varios estados con muchos objetos, el rendimiento puede verse afectado. En estos casos, para lograr un rendimiento óptimo, puede anidar componentes hasta un máximo de tres niveles y limitar el número de estados por nivel a un máximo de diez estados por componente.
  • No anide un componente dentro de sí mismo. Esto puede generar un componente no válido, ya que los componentes son autorreferenciales.
  • Si tiene un componente anidado con varios estados en un componente principal externo, puede cambiar el estado del componente anidado. A continuación, el cambio de estado se propaga a todas las instancias del componente exterior.

Sincronización de componentes anidados

Con la sincronización de componentes anidados, los cambios realizados en los componentes anidados dentro de un componente principal se propagan a todas las instancias de dicho componente principal. 

Veamos cómo funciona. 

Ejemplo 1: un botón dentro de un contenedor que recibe cambios del botón principal.

  1. Cree un botón como el primer componente principal.
  2. Anide una instancia de botón dentro de un menú de alternancia.
  3. Anide una instancia del menú de alternancia dentro de un contenedor.

Cualquier cambio realizado en el componente del botón principal se propaga a todos los botones anidados dentro del menú de alternancia y el contenedor.

Pegue una instancia del componente de botón dentro del grupo

Ahora, cree dos instancias del botón principal, dos instancias del menú de alternancia principal y una instancia del contenedor principal.

Veamos algunos casos:

Caso 1:

Caso 1

Cambiar el color del botón anidado dentro del menú principal de alternancia a azul. 

Todos los botones anidados dentro de las instancias del menú de alternancia y dentro de los contenedores cambiaron de color a azul.

Sin embargo, las dos instancias del botón principal no cambian de color. Esto se debe a que los cambios en los componentes anidados son contextuales a sus contenedores. El cambio de color solo se aplica a instancias del botón dentro del menú de alternancia. 

Caso 2:

Caso 2

Cambiar el color del botón dentro del contenedor principal a rosa. El botón dentro de la instancia del contenedor también cambia a rosa.

Observe que los otros botones no cambian de color. Esto se debe a que los cambios en los componentes anidados son contextuales a sus contenedores. El cambio de color solo se aplica a instancias del botón dentro del menú de alternancia dentro del contenedor. 

Caso 3:

Caso 3

Cambiar el color del botón anidado dentro de la instancia del contenedor a verde.

Ninguno de los otros botones cambia al color verde porque este cambio se ha realizado en una instancia, no en un componente principal, como una modificación. 

Caso 4:

Caso 4

Continuando a partir del caso 3, cambiar el color del botón anidado dentro del contenedor principal a violeta. 

El botón anidado de la instancia del contenedor no cambia de color porque ya tiene una modificación.

Cuestiones a las que prestar atención

  • Los componentes anidados no pueden ser componentes principales. Por tanto, si necesita que el cambio sea en el componente principal, haga clic con el botón derecho en el componente anidado y seleccione Editar componente principal
  • Si se intercambia un componente anidado en una instancia del componente externo, Restablecer a un estado principal en el componente anidado del principal no cambiará la instancia con el componente intercambiado. 

Prácticas recomendadas

A continuación se indican algunas prácticas recomendadas para modificaciones en instancias de componentes anidados:

  • Para crear una variación del componente para reutilizarla, cree un estado en el componente principal en lugar de una instancia con modificaciones.
  • Al modificar instancias, asegúrese de modificar la propiedad que no necesita las modificaciones del componente principal. Por ejemplo, en un componente de botón, la modificación del texto garantiza que la etiqueta pueda ser diferente, pero el tamaño y el color siguen sincronizados con el componente principal.

Añadir componentes anidados de Bibliotecas Creative Cloud

Las Bibliotecas Creative Cloud le ayudan a distribuir los estilos y componentes de los sistemas de diseño para reutilizarlos de forma homogénea en todos sus documentos. Para crear y distribuir un sistema de diseño a través de Bibliotecas Creative Cloud, seleccione los activos del sistema de diseño añadiendo colores, estilos de caracteres y componentes al panel Activos de documento y publíquelos como una biblioteca para reutilizarlos en XD y otras aplicaciones de Creative Cloud. Para obtener más información sobre cómo usar Bibliotecas Creative Cloud, consulte Usar Bibliotecas Creative Cloud en XD.

Preguntas frecuentes

En las versiones anteriores de XD, los cambios realizados en un componente anidado no se aplicaban en las instancias del componente externo. Para evitar estos problemas, abra sus documentos en la última versión de XD.

No. Cuando abra un documento existente con componentes anidados en la última versión de XD, se migrarán automáticamente esos componentes al nuevo modelo para que pueda comenzar lo más rápido posible.

Cuando XD abrió su documento, estos componentes específicos no coincidían con su versión en el panel Activos. Para migrar sin pérdida de datos, estos componentes principales se han convertido en instancias en el lienzo. Si desea que el componente principal vuelva al lienzo, haga clic con el botón derecho en la instancia externa y seleccione Editar componente principal. Tras esto, si desea que el componente principal tenga el mismo aspecto que la instancia en el lienzo, puede transferir cualquier modificación necesaria de la instancia al componente principal. 

Para tener acceso a las modificaciones, abra los documentos vinculados en la última versión de XD. Cualquier documento vinculado en el futuro también debe abrirse en la última versión de XD para garantizar que funcione correctamente. 

A partir de XD 34, ya no se permite anidar un componente principal dentro de otro componente principal. Si hace algo que anteriormente hubiera creado un componente principal anidado, el componente interno cambia a una instancia. 

Más información

Para obtener más información sobre los componentes anidados en XD, vea este vídeo.
Duración: 10 minutos

¿Qué viene después?

Hemos comenzado a trabajar con componentes en XD. Dé un paso más y obtenga más información sobre cómo compartir sus diseños con diseñadores o responsables de departamento para obtener comentarios.

¿Tiene alguna pregunta o idea?

pregunte a la comunidad

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

Logotipo de Adobe

Inicia sesión en tu cuenta