Exploración de la cuadrícula de repetición en Adobe XD

Si es diseñador visual, probablemente pase la mayor parte de su tiempo haciendo pequeños ajustes a múltiples elementos visuales. Tal vez su cliente haya decidido que necesita algunos píxeles más de relleno entre cada uno de sus elementos, o tal vez haya decidido que todos sus avatares deben tener esquinas redondeadas. De cualquier manera, es posible que te encuentres haciendo el mismo ajuste en tu diseño una y otra vez... y otra vez.

En Adobe Experience Design CC (Beta), presentamos la función Repetir cuadrícula para abordar este tedioso aspecto del flujo de trabajo de un diseñador. En este artículo, profundizaremos para descubrir el verdadero poder de esta función que ahorra tiempo. Crearemos y ajustaremos una cuadrícula de repetición, le agregaremos contenido y la conectaremos en el modo de prototipo simple y poderoso de Adobe XD. Si desea seguirnos, puede descargar y probar Adobe XD de forma gratuita.

Lectura adicional en SmashingMag:

• Creación rápida de prototipos de UX con accesos directos de Adobe XD
• Cómo crear iconos con Adobe XD
• Cómo utilizamos los prototipos y cómo nos hizo más eficientes

Creación y ajuste de una cuadrícula de repetición

En esencia, una cuadrícula de repetición es un tipo especial de grupo. Al igual que agrupamos objetos, crearemos nuestra Cuadrícula de repetición seleccionando un objeto o un grupo de objetos y convertirlos en una Cuadrícula de repetición. En este ejercicio, crearemos una lista de contactos telefónicos simple con una imagen y un nombre.

Paso 1: crea nuestros objetos iniciales

• En la pantalla de bienvenida, seleccione un tipo de mesa de trabajo para iniciar un nuevo archivo.
• Dibuje un rectángulo usando la herramienta Rectángulo ( R ).
• A la derecha de su rectángulo, use la herramienta Texto ( T ) para escribir algún texto de marcador de posición.
• Con la herramienta Selección ( V ), seleccione ambos objetos, ya sea mediante la selección de marquesina (dibujando un cuadro alrededor de ambos objetos) o seleccionando un objeto y seleccionando Mayúsculas y el otro.

Tenga en cuenta que no necesitamos precisión en este punto, ya que podemos ajustar los elementos más adelante.

Paso 2: cree y cambie el tamaño de su cuadrícula de repetición

Convierta la selección en una Cuadrícula de repetición haciendo clic en el botón en el Inspector de propiedades o usando la tecla de método abreviado Cmd + R .

Nuestro grupo ahora es una cuadrícula de repetición. Puede ver que ahora tiene dos asas, una a la derecha y otra en la parte inferior, y el cuadro alrededor de su grupo es una línea de puntos verde.

Haga clic y arrastre el controlador derecho hacia la derecha, expandiendo la cuadrícula de repetición. Para expandir la cuadrícula de repetición hacia abajo, arrastre el controlador inferior hacia abajo.

Ahora tenemos elementos repetidos en nuestra cuadrícula de repetición. Todos los estilos que apliquemos a cualquier objeto se aplicarán a todas las versiones repetidas del mismo.

Paso 3: ajuste cualquier elemento dentro de su cuadrícula de repetición

Como cualquier grupo, podemos acceder a los elementos que componen la cuadrícula de repetición haciendo doble clic en el grupo. Una vez que hayamos realizado nuestros cambios, podemos salir del contexto de edición presionando la tecla Escape. Sin embargo, existen otras formas de acceder a los elementos componentes. Por ejemplo, podemos profundizar en el elemento en el panel Capas ( Cmd + Y ) o seleccionándolo directamente ( Cmd + Click ).

• Con la herramienta Selección ( V ), haga doble clic en cualquier rectángulo en la Cuadrícula de repetición. Ahora debería ver un cuadro azul claro alrededor de la celda que está editando. Seleccione y arrastre su texto para que esté alineado con su rectángulo.
• Haga clic en el objeto Texto y cambie el tipo de letra y el tamaño en el Inspector de propiedades a la derecha. Todos sus objetos de texto comparten el mismo estilo.
• Presione Escape para salir del contexto de edición y mueva la cuadrícula de repetición para que esté alineada con la mesa de trabajo.

Paso 4: ajuste el relleno de filas y columnas en su cuadrícula de repetición

Ahora que tenemos nuestra cuadrícula de repetición, podemos comenzar a ajustar el espacio entre cada fila y columna. Al pasar el cursor sobre el espacio entre elementos, podemos activar los indicadores de columna y fila y cambiarlos a nuestro gusto.

• Coloque el cursor entre el lado derecho de un elemento de texto y el lado izquierdo de un rectángulo, directamente en la medianil de la columna. Una vez que se muestra el indicador de la columna rosa, arrastre el lado derecho de la canaleta hacia la izquierda y hacia la derecha hasta que se establezca en 30.
• Coloque el cursor entre los rectángulos, directamente en la medianera de la fila. Una vez que se muestre el indicador de fila rosa, arrastre la parte inferior de la canaleta hacia arriba y hacia abajo hasta que se establezca en 30.
• Continúe ajustando el espacio entre las celdas y el tamaño de la Cuadrícula de repetición hasta que tenga la cantidad correcta de elementos que se ajusten a su mesa de trabajo.

Puede convertir cualquier conjunto de objetos en una cuadrícula de repetición. Esos objetos se convierten en una celda en la cuadrícula de repetición. Luego puede editar la celda y ajustar el espacio entre filas y columnas.

Uso de datos en una cuadrícula de repetición

Ahora que tenemos la forma general de nuestra lista de contactos, podemos llenarla con contenido. La forma más sencilla de completar es cambiar cada elemento por separado.

Paso 1: actualice los elementos de texto individuales

• Cmd + Click en un objeto de texto en su cuadrícula de repetición para seleccionarlo. Ahora se encuentra en el modo de contexto de edición de la cuadrícula de repetición.
• Haga doble clic en el elemento de texto para editarlo y cambie el texto a un nombre. Tenga en cuenta que el contenido no se aplica a todos los demás objetos de texto en la cuadrícula de repetición. Sin embargo, cualquier estilo aplicado al objeto de texto se aplica a todos los objetos de texto.

Paso 2: cree un patrón de relleno de imagen

• Arrastre una imagen a uno de los rectángulos para importarla. Su imagen se aplicará como relleno para el rectángulo y cambiará de tamaño automáticamente para llenar la forma. Llamamos a esta función enmascaramiento automático.
• Arrastra una segunda imagen al segundo rectángulo. Definimos el orden en la cuadrícula de repetición en el orden de lectura de izquierda a derecha (de izquierda a derecha y luego de arriba a abajo). Tenga en cuenta que la cuadrícula de repetición ahora alterna entre la primera foto y la segunda foto. Ahora hemos creado un patrón de 2 fotos.
• Arrastra una tercera imagen al cuarto rectángulo. Ahora que ha arrastrado un elemento al cuarto rectángulo, tenemos un patrón de 4 fotografías, siendo la primera y la tercera imágenes idénticas.
• Arrastra una cuarta imagen al primer rectángulo. Esto reemplaza el primer elemento en su patrón de 4 fotos, por lo que ahora debería tener cuatro fotos únicas en su patrón.

El texto trabaja sobre el concepto de anulaciones ; podemos anular el contenido de un objeto de texto en sí mismo, pero los estilos permanecen aplicados a todas las repeticiones del objeto. Sin embargo, podemos construir el concepto de patrones repetidos con objetos enmascarados automáticamente, donde el relleno de imagen de un objeto se repite en un patrón que defina. Por ejemplo, si arrastraste tu tercera imagen al tercer rectángulo, habrías creado un patrón de 3 fotos. De manera similar, si hubiera arrastrado una imagen al quinto rectángulo, habría creado un patrón de 5 fotografías.

Sin embargo, eso puede volverse realmente tedioso. En cambio, lo que haremos será usar contenido que hayamos preparado con anticipación.

Paso 3: arrastre un archivo de texto separado por devolución a su objeto de texto

• Cree un archivo de texto con la extensión .txt. Puede crear esto usando TextEdit de Mac (seleccione Formato > Crear texto sin formato) o cualquier editor de texto que prefiera. Separe cada dato con un retorno.
• Una vez que haya guardado el archivo, arrástrelo desde Finder hasta el objeto de texto de su cuadrícula de repetición en Adobe XD para importar los datos.

Ahora nuestro objeto se repite según el número de líneas en nuestro archivo de texto. Si nuestro archivo de texto tiene cuatro líneas, colocará una línea por objeto de texto y repetirá después de colocar las primeras cuatro.

Paso 4: arrastre una selección de archivos de imagen a su rectángulo.

• En Finder, seleccione una serie de imágenes.
• Arrastre esta selección desde el Finder hasta el rectángulo de su cuadrícula de repetición para importar las imágenes como rellenos para el rectángulo repetido.
• Seleccione el rectángulo y cambie el radio de la esquina arrastrando uno de los controles de radio. Todos sus cambios de estilo se reflejan en cada repetición.

Similar a arrastrar imágenes de una en una, está creando un patrón repetitivo para el relleno de su objeto. Y, al igual que el texto, cualquier cambio en el contenedor se propaga a todas las repeticiones del objeto en la cuadrícula de repetición.

Tenga en cuenta que puede cambiar fácilmente el contenido de una cuadrícula de repetición, ya sea cambiando un objeto individual o arrastrando fuentes de datos. Tenga en cuenta que los datos se importan y no están vinculados, por lo que cualquier cambio que realice en el archivo de origen no afectará los datos que ya ha colocado en su archivo XD. Todos sus estilos y el tamaño y la forma de cualquier contenedor se reflejan en todas las repeticiones de un elemento.

Adición de contenido a una cuadrícula de repetición

Ahora que tenemos una lista de contactos bastante desarrollada, podemos continuar nuestro proceso de diseño, iterando a medida que recibimos comentarios de nuestros colegas y partes interesadas. En este caso, es posible que necesitemos agregar elementos después del hecho. Repeat Grid lo hace fácil al permitirnos agregar elementos a una celda.

En nuestro ejemplo, agregaremos una línea horizontal para separar las celdas verticalmente.

Paso 1: Dibuja mientras estás en el contexto de edición

• Introduzca el contexto de edición de la cuadrícula de repetición.
• Dibuje una línea horizontal sobre la celda de abajo seleccionando la herramienta Línea ( L ) y manteniendo presionada la tecla Mayús mientras arrastra.
• Con la herramienta Selección, ajuste la ubicación de la línea hasta que esté alineada a la izquierda del rectángulo.
• Presione Escape para salir del contexto de edición.

Podemos dibujar cualquier elemento o agregar texto dentro del contexto de edición de la cuadrícula de repetición, incluso después de haberlo creado. Dado que Repeat Grid repite automáticamente cada elemento, esto nos permite la flexibilidad de jugar con el diseño de una manera nueva.

Acabamos de agregar una línea, pero ahora las celdas se superponen entre sí, dejándonos con un desorden visual. Tendremos que agregar espacio vertical entre las celdas. Cuando sucede algo como esto, Repeat Grid vuelve a calcular el margen entre la fila o la columna (desde la parte inferior de una hasta la parte superior de la siguiente, o desde la derecha de una hasta la izquierda de la siguiente) y lo establece en un número negativo si se superponen.

Paso 2: reajustar el relleno negativo

• Pasa el cursor por el espacio de superposición. Tome la parte superior o inferior del rectángulo y tire de él hacia abajo, de modo que la superposición ya no exista, luego un poco más.

Hemos resuelto este problema, pero ¿qué pasa con la adición de ilustraciones que ya hemos creado? Podemos cortar de un contexto y pegar en otro.

Paso 3: cortar y pegar en el contexto de edición de la cuadrícula de repetición

• Descargue el archivo star.svg y arrástrelo a la mesa de trabajo, fuera de su mesa de trabajo actual. Esto importa el archivo star.svg a su proyecto.
• Convierta su ruta importada en una cuadrícula de repetición y arrastre el controlador derecho hacia la derecha hasta que tenga un total de cuatro estrellas. Ajuste el relleno para acercar las estrellas.
• Corte la cuadrícula de repetición con las estrellas ( Cmd + X ), luego haga doble clic en cualquier celda de su lista de contactos para ingresar a su contexto de edición.
• Pegar ( Cmd + V ). Su cuadrícula de repetición de estrellas se pegará en el centro de la celda. Mueve las estrellas para que quede debajo del texto.

A veces, sin embargo, querremos dividir la Cuadrícula de repetición; a veces solo quieres objetos independientes después de haberlos alineado. Para hacer esto, desagruparemos la cuadrícula de repetición y haremos nuestros cambios.

Paso 4: desagrupe la cuadrícula de repetición interna y edite según sea necesario

• Como ya se encuentra en el contexto de edición de la lista de contactos, haga clic en Repetir cuadrícula de estrellas para seleccionarla.
• Desagrupar Repetir cuadrícula seleccionando el botón Desagrupar en el Inspector de propiedades, seleccionando Desagrupar cuadrícula en el menú contextual (Ctrl-clic o botón derecho del mouse), o usando el método abreviado de teclado Cmd + Shift + G .
• Selecciona dos de las estrellas y desmarca el relleno.

Incluso puede agregar objetos a la cuadrícula de repetición después de crearla, ya sea dibujando o pegando en el contexto de edición. Si tiene relleno negativo, puede ajustarlo fácilmente pasando el cursor sobre el área de superposición. Puede usar Repetir cuadrícula como una herramienta de alineación fácil entre elementos y desacoplar los elementos repetidos desagrupando.

Creación de prototipos a partir de una cuadrícula de repetición

Ahora que tenemos una cuadrícula de repetición, la conectaremos a otra mesa de trabajo en modo prototipo. Con Adobe XD, podemos alternar entre los modos de diseño y prototipo rápidamente, lo que nos permite editar tanto la interfaz de usuario como las interacciones al mismo tiempo.

En este caso, solo vamos a crear una segunda mesa de trabajo y conectarla desde nuestra Cuadrícula de repetición en tres escenarios diferentes.

Opción 1: conecte toda la cuadrícula de repetición para una sola interacción

• Cree una segunda mesa de trabajo en su archivo usando la herramienta Mesa de trabajo ( A ). Haga clic a la derecha de su mesa de trabajo existente para crear otra mesa de trabajo junto a la primera.
• Cambie al modo Prototipo haciendo clic en la pestaña en la parte superior del marco de la aplicación o usando el atajo de teclado Cmd + Tab .
• 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.
• Arrastre este conector a la siguiente mesa de trabajo. Seleccione sus opciones de transición en la ventana emergente, luego presione Escape o haga clic fuera para descartarlo.
• Obtenga una vista previa presionando el botón Reproducir en la esquina superior derecha del marco de la aplicación o usando el método abreviado de teclado Cmd + Enter . Haga clic en cualquier lugar sobre la cuadrícula de repetición para reproducir la interacción.

Lo que hemos hecho en este punto es conectar todo el objeto, incluido su relleno, como un punto de contacto para la interacción.

Opción 2: conectar un solo elemento de una cuadrícula de repetición para una interacción

• Deshaga su último cable usando el atajo de teclado Cmd + Z .
• Cmd-clic en un rectángulo en su cuadrícula de repetición para seleccionarlo directamente.
• Arrastre el conector a la derecha del rectángulo y arrástrelo a la segunda mesa de trabajo. Seleccione sus opciones de transición en la ventana emergente como antes, luego deséchelo.
• Si su ventana de vista previa aún no está abierta, iníciela nuevamente y haga clic en el objetivo.

En este punto, tenemos un solo elemento, pero ¿qué pasa si queremos seleccionar toda la celda? Podemos crear un grupo dentro de la cuadrícula de repetición para que sea un punto de acceso válido.

Opción 3: cree un grupo de elementos dentro de la cuadrícula de repetición y cree una interacción a partir del grupo.

• Deshaga su último cable usando el atajo de teclado Cmd + Z .
• Vuelva al modo Diseño haciendo clic en la pestaña o usando el método abreviado de teclado Cmd + Tab .
• Cmd + Click en un rectángulo en su cuadrícula de repetición para seleccionarlo directamente. Presione Mayús y haga clic en el objeto de texto junto a él para agregarlo a su selección.
• Agrupa los dos objetos usando la selección del menú contextual o el atajo de teclado Cmd + G
• Vuelva al modo de creación de prototipos. Tenga en cuenta que su selección sigue siendo la misma que en el modo Diseño.
• Arrastre el conector del grupo a la segunda mesa de trabajo. Ya ha conectado toda el área del grupo como un punto de contacto para la interacción.

Incluso puede crear una interacción configurando el punto de encuentro en toda la cuadrícula de repetición, un elemento individual dentro de ella o un grupo creado dentro de ella.

¡Eso es todo!

Espero que este breve tutorial te haya ayudado a explorar el poder de Repeat Grid. Esta característica simple y poderosa ha sido bastante popular en la versión beta y está evolucionando a medida que recibimos más comentarios de los usuarios. Si tiene una idea para mejorar, compártala en la sección de comentarios a continuación.

Este artículo es parte de la serie de diseño de UX patrocinada por Adobe. La aplicación Experience Design recientemente presentada está hecha para un proceso de diseño de UX rápido y fluido, creando prototipos de navegación interactivos, así como probándolos y compartiéndolos, todo en un solo lugar.

Puede consultar más proyectos inspiradores creados con Adobe XD en Behance y también visitar el blog de Adobe XD para mantenerse actualizado e informado. Adobe XD se actualiza con nuevas funciones con frecuencia y, dado que se encuentra en versión beta pública, puede descargarlo y probarlo de forma gratuita.