¿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!
Última actualización el
3 sept. 2021
- Guía del usuario de Adobe XD
- Introducción
- Novedades de Adobe XD
- Preguntas habituales
- Diseñar, crear prototipos y compartir con Adobe XD
- Gestión de color
- Requisitos del sistema
- Conceptos básicos del espacio de trabajo
- Cambiar el idioma de la aplicación en Adobe XD
- Acceder a kits de diseño de interfaz de usuario
- Accesibilidad en Adobe XD
- Métodos abreviados de teclado
- Consejos y trucos
- Diseño
- Mesas de trabajo, guías y capas
- Formas, objetos y trazados
- Seleccionar, redimensionar y rotar objetos
- Mover, alinear, distribuir y organizar objetos
- Agrupar, bloquear, duplicar, copiar y voltear objetos
- Establecer el trazo, el relleno y las sombras paralelas de objetos
- Crear elementos repetidos
- Crear diseños en perspectiva con transformaciones 3D
- Editar objetos utilizando operaciones booleanas
- Texto y fuentes
- Componentes y estados
- Máscaras y efectos
- Maquetación
- Vídeos y animaciones de Lottie
- Prototipo
- Crear prototipos interactivos
- Animar prototipos
- Propiedades de objetos compatibles con la animación automática
- Crear prototipos con teclado y mando de juego
- Crear prototipos utilizando comandos de voz y reproducción
- Crear transiciones temporizadas
- Añadir superposiciones
- Diseñar prototipos de voz
- Crear vínculos de anclaje
- Crear hipervínculos
- Previsualizar diseños y prototipos
- Compartir, exportar y revisar
- Compartir mesas de trabajo seleccionadas
- Compartir diseños y prototipos
- Establecer permisos de acceso de vínculos
- Usar prototipos
- Revisar prototipos
- Trabajar con especificaciones de diseño
- Compartir especificaciones de diseño
- Inspeccionar especificaciones de diseño
- Controles de las especificaciones de diseño
- Revisar y comentar especificaciones de diseño
- Exportar activos de diseño
- Exportar y descargar activos de especificaciones de diseño
- Grupos compartidos para empresas
- Hacer copias de seguridad de recursos de XD o transferirlos
- Sistemas de diseño
- Documentos en la nube
- Integraciones y complementos
- Trabajar con activos externos
- Trabajar con activos de diseño de Photoshop
- Copiar y pegar activos desde Photoshop
- Importar o abrir diseños de Photoshop
- Usar activos de Illustrator en Adobe XD
- Abrir o importar diseños de Illustrator
- Copiar vectores de Illustrator en XD
- Complementos para Adobe XD
- Crear y administrar complementos
- Integración de Jira para XD
- Complemento Slack para XD
- Complemento Zoom para XD
- Publicar diseño de XD en Behance
- XD para iOS y Android
- Solución de problemas
- Problemas conocidos y resueltos
- Instalación y actualizaciones
- Inicio y cierre inesperado
- XD se cierra al iniciar la aplicación en Windows 10
- XD se cierra al cerrar sesión en Creative Cloud
- Problema con el estado de suscripción en Windows
- Aviso de aplicación bloqueada al iniciar XD en Windows
- Generación de volcados de fallos en Windows
- Recopilación y uso compartido de registros de errores
- Documentos en la nube y bibliotecas Creative Cloud
- Crear prototipos, publicar y revisar
- No se pueden grabar interacciones de prototipos en macOS Catalina
- Problemas con flujos de trabajo de publicación
- Los vínculos publicados no aparecen en los navegadores
- Los prototipos no se renderizan correctamente en los navegadores.
- El panel de comentarios aparece repentinamente en los vínculos compartidos
- No es posible publicar bibliotecas
- Importar, exportar y usar otras aplicaciones
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.
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.
.gif "Método B")
- Cree un componente de botón principal.
- Copie y pegue una instancia del componente de botón en un grupo.
- 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.
-8?$png$&jpegSize=100&wid=400 "Método A")
- Cree un componente de botón principal.
- 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.
.gif "Método B")
- Cree un componente de diálogo principal.
- Explore en un botón dentro del componente.
- 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 una instancia del componente de botón dentro del grupo.
Convertirlo en un componente
Seleccionar el grupo y convertirlo en un componente.
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
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.
- Cree un botón como el primer componente principal.
- Anide una instancia de botón dentro de un menú de alternancia.
- 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.
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:
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:
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:
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:
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?
Adobe MAX
La conferencia de creatividad
Del 14 al 16 de octubre en Miami Beach y en línea
Adobe MAX
La conferencia de creatividad
Del 14 al 16 de octubre en Miami Beach y en línea