Guía del usuario Cancelar

Crear elementos repetidos

  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

Conozca cómo crear elementos repetidos en Adobe XD usando Cuadrícula de repetición

Al diseñar aplicaciones para Web o móviles, a menudo es necesario definir listas contenido o elementos repetidos. Sin embargo, crear estos elementos o actualizarlos puede llevar mucho tiempo cuando hay cambios de diseño.

La función Cuadrícula de repetición convierte un grupo de elementos en un elemento repetitivo. Simplemente, puede tirar del elemento en cualquier dirección y la cuadrícula se repite. Al modificar cualquier estilo de un elemento, el cambio se replica en todos los elementos de la cuadrícula. Por ejemplo, si cambia el tamaño de la imagen en uno de los elementos, todas las imágenes de la cuadrícula cambiarán de tamaño automáticamente.

Si tiene un elemento de texto en la cuadrícula, solo se replicará el estilo del elemento de texto y no el contenido. Por lo tanto, puede aplicar estilo a los elementos de texto rápidamente, manteniendo el contenido diferente en los elementos de la cuadrícula.

Puede reemplazar texto del marcador de posición de una cuadrícula de repetición arrastrando un archivo de texto a la cuadrícula.

Crear una cuadrícula de repetición

Esencialmente, una cuadrícula de repetición es un tipo especial de grupo. Puede crear una cuadrícula de repetición seleccionando un objeto o un grupo de objetos y convirtiéndolos en una cuadrícula de repetición.

  1. Diseñe el elemento de base que quiera repetir, por ejemplo, una combinación de miniaturas de imágenes y texto.

  2. Seleccione los elementos que quiera repetir.

  3. Convierta la selección en una cuadrícula de repetición haciendo clic en el botón del Inspector de propiedades o utilizando el método abreviado de teclado Cmd + R (Mac) o Ctrl + R (Windows).

    Aparecerán controladores grandes en el contorno del elemento.

    Controladores para repetir un elemento o un grupo de elementos
    Controladores para repetir un elemento o un grupo de elementos

  4. Para repetir el elemento en una cuadrícula vertical, arrastre el controlador a la parte inferior del elemento. Para repetir el elemento en una cuadrícula horizontal, arrastre el controlador a la derecha del elemento.

    Cuadrícula de repetición vertical

    Cuadrícula de repetición horizontal

  5. Para seleccionar elementos en una cuadrícula para editarlos, haga doble clic en la cuadrícula.

Para desagrupar los elementos de la cuadrícula y trabajar en ellos por separado, seleccione la cuadrícula y haga clic en Desagrupar cuadrícula en el Inspector de propiedades.

Puede acceder a los elementos componentes de la cuadrícula de repetición haciendo doble clic dentro del grupo.

Después de realizar los cambios, salga del contexto de edición presionando la tecla Escape.

Nota:

También puede acceder a los elementos componentes, bajando por las capas del elemento en el panel Capa o seleccionándolo directamente.

Ajustar el relleno entre dos elementos de una cuadrícula de repetición

Para ajustar el relleno entre dos elementos de la cuadrícula, coloque el cursor sobre el espacio entre los elementos. Cuando el cursor cambie a flechas dobles, arrastre para aumentar o disminuir el relleno.

Cuadrícula vertical con elementos repetitivos
Cuadrícula vertical con elementos repetitivos

Trabajar con texto en una cuadrícula de repetición

Puede utilizar el texto de varias maneras en las cuadrículas de repetición. Puede actualizar cada instancia individual de un objeto de texto de una cuadrícula de repetición, o puede optar por arrastrar un documento .txt rellenado previamente a una cuadrícula de repetición y hacer que el contenido del archivo de texto rellene automáticamente los objetos de texto de la cuadrícula de repetición. 

Actualizar elementos de texto individuales de una cuadrícula de repetición

  1. Haga Cmd + Clic (Mac) o Ctrl + Clic (Windows) en un objeto de texto de la cuadrícula de repetición para seleccionarlo. 

  2. Para editar el elemento de texto, haga doble clic en él y cambie el texto.

Nota:

Los cambios del contenido no se aplican a otros objetos de texto de la cuadrícula de repetición. Sin embargo, cualquier estilo aplicado al objeto de texto se aplicará a todos los objetos de texto.

Arrastrar un archivo de texto separado por retornos a un objeto de texto de una cuadrícula de repetición

Puede reemplazar el texto del marcador de posición de una cuadrícula de repetición arrastrando un archivo de texto a la cuadrícula.

  1. Cree un archivo de texto con extensión .txt. Puede crearlo utilizando TextEdit de Mac o el Bloc de notas de Windows (guardar como .txt), o cualquier otro editor de texto. Asegúrese de que la codificación esté establecida en UTF-8. Separe cada línea de datos con un retorno. 

  2. Arrastre el archivo de texto a la cuadrícula de repetición.

    Arrastre de un archivo de texto sobre un objeto de una cuadrícula de repetición
    Arrastre de un archivo de texto sobre un objeto de una cuadrícula de repetición - Pendiente de modificación

    La cuadrícula de repetición se rellena en la misma secuencia del texto que tiene el archivo de texto. Si hay más cuadrículas que líneas de texto en el archivo, la secuencia se repite.

Trabajar con imágenes en una cuadrícula de repetición

Con las imágenes puede crear patrones repetidos de objetos, donde el relleno de imagen de un objeto se repite conforme a un patrón que usted define.

Puede elegir crear un patrón de relleno de imagen arrastrando las imágenes, una a una, hasta un objeto, o seleccionar varias imágenes y luego arrastrarlas a un objeto de la cuadrícula de repetición.

Arrastre de archivos de imagen sobre un objeto de una cuadrícula de repetición
Arrastre de archivos de imagen sobre un objeto de una cuadrícula de repetición - Pendiente de modificación

Reemplazar imágenes en una cuadrícula de repetición

Para reemplazar las imágenes de la cuadrícula, abra Finder o Explorador de archivos y navegue hasta la ubicación donde haya almacenado las imágenes para su proyecto. Seleccione todas las imágenes que desee que aparezcan en la cuadrícula, arrástrelas y suéltelas sobre el objeto de destino de dentro de la cuadrícula de repetición.

Las imágenes anteriores se reemplazarán por las nuevas, que se redimensionarán automáticamente.

Crear interacciones a partir de una cuadrícula de repetición

Cablear toda la cuadrícula de repetición para una única interacción

  1. En el modo Diseño, cree una segunda mesa de trabajo en el archivo utilizando la herramienta Mesa de trabajo (A).

  2. Cambie al modo Prototipo haciendo clic en la pestaña Prototipo o utilizando el método abreviado de teclado Ctrl + Tab.

  3. Seleccione la cuadrícula de repetición en su primera mesa de trabajo. Aparecerá un conector con una flecha en el lado derecho del objeto, en su punto medio.

  4. Arrastre el conector a la siguiente mesa de trabajo. Seleccione sus opciones de transición en la ventana emergente y luego presione Escape o haga clic fuera de la ventana emergente para descartarla.

  5. Previsualice presionando el botón Reproducir de la esquina superior derecha del marco de la aplicación o usando el método abreviado de teclado Cmd + Enter (Mac) o Ctrl + Enter (Windows). Haga clic en cualquier lugar sobre la cuadrícula de repetición para reproducir la interacción.

Cablear un único elemento de una cuadrícula de repetición para una interacción

  1. Seleccione un objeto de dentro de la cuadrícula de repetición.

  2. Arrastre el conector a la derecha del rectángulo y arrástrelo a la mesa de trabajo que desee vincular. Seleccione sus opciones de transición en la ventana emergente y luego presione Escape o haga clic fuera de la ventana emergente para descartarla.

  3. Previsualice presionando el botón Reproducir de la esquina superior derecha del marco de la aplicación o usando el método abreviado de teclado Cmd + Enter (en Mac) o Ctrl + Enter (en Windows). Haga clic en el objeto para verificar la interacción.

Crear un grupo de elementos dentro de la cuadrícula de repetición y crear una interacción desde el grupo

También puede crear un grupo de objetos dentro de la cuadrícula de repetición y luego crear interacciones desde dicho grupo.

  1. Seleccione un objeto de la cuadrícula de repetición y luego presione Mayús y haga clic en otros objetos para agregarlos a la selección.

  2. Después de seleccionar los objetos, haga clic con el botón derecho y seleccione Grupo en el menú contextual. También puede usar el método abreviado de teclado Cmd + G (Mac) o Ctrl + G (Windows) para agrupar los objetos.

  3. Cambie a modo Prototipo. Arrastre el conector desde el grupo a la mesa de trabajo que desee vincular.

  4. Previsualice presionando el botón Reproducir de la esquina superior derecha del marco de la aplicación o usando el método abreviado de teclado Cmd + Enter (en Mac) o Ctrl + Enter (en Windows). Haga clic en el grupo para verificar la interacción.

Importar contenido con cuadrículas de repetición

Vea el siguiente vídeo de ejemplo para saber cómo empezar a usar cuadrículas de repetición. 

Temas relacionados

Logotipo de Adobe

Inicia sesión en tu cuenta