Conozca cómo preparar los diseños para conseguir pantallas y diseños diferentes en mesas de trabajo. Use las cuadrículas de las mesas de trabajo para colocar los elementos de diseño.

Las mesas de trabajo representan normalmente cada una de las pantallas que quiere diseñar como parte de su aplicación móvil o sitio web.

Puede tener muchas mesas de trabajo en un único archivo de Adobe XD. Por ejemplo, puede elegir definir mesas de trabajo para experiencias web basadas en móvil, tableta y escritorio dentro de un único archivo. Alternativamente, también puede elegir diseñar varias pantallas de flujo de usuario para una única plataforma en un archivo.

Puede elegir un tamaño preestablecido para la mesa de trabajo al comienzo de su proyecto, a partir de la pantalla de Inicio. Si no desea utilizar los ajustes preestablecidos, puede crear una mesa de trabajo de tamaño personalizado. Una vez que se haya creado su nuevo archivo con el tamaño de la mesa de trabajo elegido, puede agregar tantas mesas de trabajo como desee utilizando la herramienta Mesa de trabajo.

Varias mesas de trabajo para diversas pantallas en un único archivo de XD
Varias mesas de trabajo para diversas pantallas en un único archivo de XD

Para ver todas las mesas de trabajo del proyecto, abra el panel Capas (haga click  en la barra de herramientas). 

Crear mesas de trabajo

Al crear un proyecto o un archivo por primera vez, puede seleccionar el tamaño de la mesa de trabajo entre los preestablecidos en la pantalla de inicio. Para especificar un tamaño personalizado, seleccione Personalizado y especifique el tamaño en píxeles.

Para agregar más mesas de trabajo a un archivo existente, haga clic en la herramienta Mesa de trabajo. Luego, haga clic en uno de los ajustes preestablecidos del panel derecho y haga clic en la ubicación donde desee que quede la mesa de trabajo a colocar.

Para definir una mesa de trabajo de tamaño personalizado, seleccione la herramienta de mesa de trabajo y dibuje la mesa de trabajo que desee directamente en el área de la mesa de composición.

Crear mesas de trabajo con desplazamiento

Puede crear mesas de trabajo por las que sea posible desplazarse con una barra de desplazamiento vertical.

Nota:

Esta versión de Adobe XD no admite desplazamiento horizontal.

Para hacer que una mesa de trabajo pueda disponer de desplazamiento:

Mesas de trabajo creadas con tamaños preestablecidos: si el contenido llega más allá de la longitud prescrita de la mesa de trabajo, arrastre hacia abajo la parte inferior de la mesa de trabajo, hasta la longitud deseada, y continúe diseñando. Una línea de puntos en la mesa de trabajo indica el inicio del contenido desplazable.

Para deshabilitar el desplazamiento, seleccione la mesa de trabajo y luego elija Ninguno en la sección Desplazamiento del Inspector de propiedades.

Mesas de trabajo con tamaños personalizados: para dar desplazamiento a una mesa de trabajo personalizada, seleccione la mesa de trabajo y luego elija Vertical en la sección Desplazamiento del Inspector de propiedades.

Además, especifique una Altura de ventana gráfica, que es el tamaño de la ventana mediante la que se ve la mesa de trabajo. La altura de la ventana gráfica debe ser menor que la altura de la mesa de trabajo, para que pueda aparecer el desplazamiento. También puede especificar la altura de la ventana gráfica moviendo el comienzo de la línea de puntos por el lienzo hasta la posición requerida.

Edición de la altura de la ventana gráfica
Edición de la altura de la ventana gráfica

Para deshabilitar el desplazamiento, seleccione Ninguno en la sección Desplazamiento del Inspector de propiedades.

Seleccionar mesas de trabajo

Para seleccionar una mesa de trabajo, haga clic en la herramienta Selección y realice una de las siguientes acciones:

  • Haga clic en el título de la mesa de trabajo, o bien
  • Haga doble clic en el fondo de la mesa de trabajo

Copiar y redimensionar mesas de trabajo

En Mac, mantenga presionada la tecla Opción y arrastre una mesa de trabajo a copiar. En Windows, mantenga presionada la tecla Alt y arrastre una mesa de trabajo.

Alternativamente, haga clic con el botón derecho en el nombre de la mesa de trabajo, en el panel Capas y seleccione Copiar. A continuación, haga clic otra vez con el botón derecho y seleccione Pegar.

Para cambiar el tamaño de una mesa de trabajo, haga clic en la mesa de trabajo y use los controladores circulares que aparecen en los bordes.

Reorganización de mesas de trabajo

Haga clic en el título de la mesa de trabajo y arrástrela a la nueva ubicación. 

Nota:

Puede arrastrar las mesas de trabajo en el panel Capas y cambiar su orden en la lista Mesas de trabajo. Pero hacer esto solo cambia el orden de apilamiento de las mesas de trabajo y no cambia su posición (coordenadas X e Y).

Cambiar los nombres de las mesas de trabajo

De forma predeterminada, las mesas de trabajo se nombran según el ajuste preestablecido que seleccione y se numeran secuencialmente. Para especificar un nombre personalizado para sus mesas de trabajo, haga doble clic en el título de la mesa de trabajo y escriba el nuevo nombre de la mesa de trabajo.

También puede cambiar el nombre de las mesas de trabajo en el panel Capas. Haga doble clic o bien clic con el botón derecho en el nombre de la mesa de trabajo y seleccione Cambiar nombre.

Alinear y distribuir mesas de trabajo

Seleccione con un marco varias mesas de trabajo y haga clic en las opciones Alinear y Distribuir del Inspector de propiedades.

Alinear y distribuir varias mesas de trabajo
Alinear y distribuir varias mesas de trabajo

Copiar y mover elementos entre mesas de trabajo

Puede mover libremente cualquier elemento de una mesa de trabajo a otra. Simplemente, arrastre el elemento y suéltelo en la mesa de trabajo deseada.

Para copiar un elemento, use Comando + C (en Mac), o Ctrl + C (en Windows). Haga clic en la mesa de trabajo en la que desee pegar el elemento y haga clic en Comando + V (en Mac), o Ctrl + V (en Windows).

También puede arrastrar un elemento mientras mantiene presionada la tecla Opción (en Mac), o la tecla Alt (en Windows) para duplicar elementos.

También puede usar Posición fijada para fijar la posición de elementos, como encabezados y pies de página, en una mesa de trabajo con desplazamiento, o elementos fijados flotantes. El icono de chincheta en el modo de prototipo indica los elementos fijados, y puede colocarlos en capas por encima o por debajo de otros objetos de diseño.

 

Nota:

Si tiene una colección de objetos que no se ajustan a la mesa de trabajo al pegarla, todos se pegarán en el centro de la mesa de trabajo de destino.

Puede utilizar el área gris que rodea las mesas de trabajo como mesa de composición. Puede colocar cualquier elemento en la mesa de composición y copiarlo o moverlo a las mesas de trabajo cuando sea necesario. 

Nota:

Al exportar todas las mesas de trabajo, los elementos de la mesa de trabajo que no formen parte de ninguna mesa de trabajo no se exportarán. Si un elemento se coloca parcialmente en una mesa de trabajo, entonces solo se exporta la parte del elemento que esté en la mesa de trabajo.

Cortar, copiar, mover, redimensionar, hacer zoom y eliminar múltiples mesas de trabajo simultáneamente

Seleccione con un marco varias mesas de trabajo para editarlas simultáneamente. 

Varias mesas de trabajo seleccionadas al mismo tiempo
Varias mesas de trabajo seleccionadas al mismo tiempo

Use la herramienta Selección para arrastrar un marco en torno a las mesas de trabajo que desee seleccionar.

Al seleccionar varias mesas de trabajo, asegúrese de seleccionarlas por completo. Si una mesa de trabajo está cubierta solo parcialmente, se seleccionarán los objetos de la mesa de trabajo en lugar de la propia mesa de trabajo.

Aparece un cuadro delimitador alrededor de las mesas de trabajo seleccionadas. 

Redimensionar

Arrastre los controladores del cuadro delimitador para cambiar el tamaño de las mesas de trabajo seleccionadas.

Cortar, copiar y pegar

 Haga Ctrl + Clic (en Mac) o clic con el botón derecho (en Windows) para abrir el menú contextual que permite cortar, copiar y pegar todas las mesas de trabajo seleccionadas.

Eliminar

Pulse Supr en el teclado o use Ctrl + Clic (en Mac), o clic con el botón derecho (en Windows), para abrir el menú que permite eliminar las mesas de trabajo seleccionadas. Alternativamente, puede seleccionar una o más mesas de trabajo en el panel Capas, hacer clic con el botón derecho y luego elegir Eliminar.

Zoom: entre en modo Zoom haciendo clic en el icono Zoom de la barra de herramientas o presionando Z en el teclado. Una vez en modo Zoom, podrá hacer lo siguiente:

  • Aumentar: haga clic en cualquier lugar del lienzo de Adobe XD o haga clic en la mesa de trabajo requerida. O bien, seleccione mediante marco un área que aumentar.
  • Reducir: Opción + Clic (en Mac), o Alt + Clic (en Windows).

Para aumentar o reducir rápidamente sin entrar en modo Zoom, puede activar temporalmente el modo Zoom:

  • Aumentar: presione Barra espaciadora + Cmd (en Mac), o Barra espaciadora + Ctrl (en Windows) y luego haga clic o seleccione mediante marco un área de la mesa de trabajo.
  • Reducir: presione Barra espaciadora + Cmd + Opt

Para aumentar objetos específicos de la mesa de trabajo, seleccione los objetos y luego elija Ver > Zoom de la selección o ⌘ 3 en Mac. En Windows, use el método abreviado de teclado Ctrl + 3.

Posicionar elementos en mesas de trabajo utilizando cuadrículas

XD le proporciona dos tipos de opciones de cuadrícula: cuadrículas cuadradas y cuadrículas de diseño. 

Cuadrículas cuadradas

Las cuadrículas cuadradas ofrecen guías para alinear objetos y texto. Al dibujar, los objetos se ajustan a la cuadrícula automáticamente cuando los bordes del objeto están dentro de la zona de ajuste a cuadrícula.

Las cuadrículas cuadradas también le ayudarán a tener una idea rápida de las medidas al distribuir objetos o texto en las mesas de trabajo. 

Cuadrículas cuadradas en XD
Cuadrículas cuadradas en XD

Cuadrículas de diseño

Puede usar cuadrículas de diseño para definir columnas en XD. Una cuadrícula de diseño le ayuda a definir la estructura subyacente de su diseño y cómo cada componente del mismo responde a diferentes puntos de interrupción (para diseños interactivos).

Después de aplicar la cuadrícula de diseño a una mesa de trabajo, puede ajustar elementos a ella. Sin embargo, si se cambia el tamaño de la mesa de trabajo o se ajusta la cuadrícula, los elementos fijados no cambian de tamaño ni de ordenación.

Cuadrículas de diseño en XD
Cuadrículas de diseño en XD

Mostrar u ocultar cuadrículas

Seleccione una mesa de trabajo y lleve a cabo uno de los procedimientos siguientes:

  • En Mac: elija Ver > Mostrar cuadrícula de diseño o Ver > Mostrar cuadrícula cuadrada.
  • En Mac o Windows: en el Inspector de propiedades, seleccione un tipo de cuadrícula de la lista desplegable Cuadrícula y seleccione la casilla próxima a ella.
  • Métodos abreviados de teclado: 
    • Mostrar cuadrícula cuadrada:
      • En Mac: ⌘ '  
      • En Windows: Ctrl + '
    • Mostrar cuadrícula de diseño:
      • En Mac: ⇧ ⌘ '
      • En Windows: Ctrl + Tabulador
Definir cuadrículas cuadradas o de diseño en XD
Definir cuadrículas cuadradas o de diseño en XD

Para ocultar la cuadrícula, deseleccione la casilla Cuadrícula.

Establecer preferencias de cuadrícula cuadrada

Las opciones de cuadrícula cuadrada le permiten cambiar el espaciado de una cuadrícula y su color. Puede guardar un conjunto de opciones de cuadrícula como predeterminado para usarlas rápidamente en el futuro. Para obtener más información, consulte Preferencias predeterminadas de cuadrícula cuadrada o de diseño.

Nota:

XD usa un píxel virtual para la mayoría de sus medidas y tamaños de fuente, que es la misma unidad de medida que un píxel CSS, o mediciones en iOS. El píxel virtual es aproximadamente igual a un píxel físico en un monitor de 72 ppp. Actualmente, no se puede cambiar la unidad de medida en XD.

Cambiar el tamaño de cuadrícula

Para cambiar el tamaño de la cuadrícula, edite el valor del espaciado en el Inspector de propiedades. Cuanto menor sea el número, más densa será la cuadrícula. 

Ajustar objetos a una cuadrícula cuadrada

Para ajustar un objeto a una cuadrícula, arrastre un objeto hacia una cuadrícula hasta que uno o más de los bordes del objeto estén dentro de la zona de ajuste de la cuadrícula.

Ajustar a cuadrícula al dibujar objetos
Ajustar a cuadrícula al dibujar objetos

Para evitar ajustar a la cuadrícula, presione la tecla Cmd (en Mac) o la tecla Ctrl (en Windows) mientras arrastra el ratón y dibuja un objeto.

Establecer preferencias de cuadrícula de diseño

Al habilitar una cuadrícula de diseño, XD muestra de forma inteligente las columnas que se adecúan a la naturaleza de la mesa de trabajo. Así, por ejemplo, una mesa de trabajo de teléfono tiene menos columnas, que son más estrechas que las cuadrículas de diseño predeterminadas para una tableta.

Si cambia el tamaño de una mesa de trabajo, los anchos de columna de la cuadrícula de diseño cambiarán para ajustarse al nuevo tamaño de la mesa de trabajo. Los objetos de la mesa de trabajo siguen siendo los mismos y no mantienen su relación con las columnas.

Comportamiento de las cuadrículas de diseño al cambiar el tamaño de la mesa de trabajo
Comportamiento de las cuadrículas de diseño al cambiar el tamaño de la mesa de trabajo

Puede configurar sus preferencias de número de columnas, anchura de columnas, color de columnas, anchura de medianiles y tamaños de márgenes desde el Inspector de propiedades.

Después de cambiar la cuadrícula de diseño, puede hacer que sus cambios pasen a ser predeterminados o puede revertir a la cuadrícula de diseño predeterminada en XD. Para obtener más información, consulte Preferencias predeterminadas de cuadrícula cuadrada o de diseño.

Cambiar las propiedades de columnas y medianiles

Puede cambiar las propiedades de las columnas de diseño según sus necesidades.

Para establecer el número de columnas de una cuadrícula de diseño, edite el valor Columna en el Inspector de propiedades. Cuando cambia el número de columnas, XD vuelve a calcular automáticamente la anchura de las mismas.

El espacio entre las columnas de una mesa de trabajo se llama anchura del medianil. Defina la anchura del medianil editando el valor predeterminado de Anchura del medianil.

Para cambiar la anchura de las columnas, edite el valor predeterminado de Anchura de columna.

Configuración de cuadrículas de diseño en XD
Configuración de cuadrículas de diseño en XD

Cambiar márgenes

Puede cambiar el tamaño de los márgenes al configurar la cuadrícula de diseño. 

Para ajustar los márgenes izquierdo y derecho de manera uniforme, haga clic en el icono de márgenes izquierdo/derecho vinculados y edite el valor del margen.

Para ajustar los márgenes de los cuatro lados individualmente, haga clic en los diferentes márgenes para cada ícono lateral y luego edite los valores para cada margen.

Edición uniforme del tamaño de los márgenes izquierdo y derecho
Edición uniforme del tamaño de los márgenes izquierdo y derecho
Edición individual del tamaño de los márgenes
Edición individual del tamaño de los márgenes

Cambiar el color de las cuadrículas cuadradas o de diseño

Para cambiar el color de las cuadrículas cuadradas o de diseño:

  1. Haga clic en la casilla situada junto a Tamaño cuadrado para cuadrículas cuadradas y Columnas para cuadrículas de diseño.

    Aparecerá el selector de color.

    Edición en cuadrícula
    Edición en cuadrícula
  2. Puede elegir lo siguiente:

    • Especifique los valores HSBA o hexadecimales de los campos HSBA o hexadecimal si conoce los valores exactos.
    • Ajuste el color usando el campo color y el regulador de color. Al hacerlo, los valores numéricos HSBA y hexadecimales se ajustarán en consecuencia.  
    • Establezca la opacidad del relleno utilizando el regulador de color o escribiendo un valor en porcentaje. Si establece alfa en 0, la cuadrícula de diseño cambia a la vista de contorno.
    • Use el cuentagotas para seleccionar un color de una mesa de trabajo.

    Nota:

    Adobe XD también admite abreviaturas para códigos hexadecimales. Por ejemplo, si escribe 0 y presiona Retorno, XD muestra automáticamente el color con código #000000. Del mismo modo, puede escribir 0A, que significará #0A0A0A y 0AF para #00AAFF.

    Podrá ver que el color de la cuadrícula cambia a medida que vaya modificando las opciones en el cuadro de diálogo Colores.

  3. Una vez que haya decidido un color, guárdelo para acceder más fácilmente haciendo clic en el icono + de la parte inferior del selector de color.

Preferencias predeterminadas de cuadrículas cuadradas o de diseño

Vuelva al aspecto predeterminado de cuadrícula cuadrada o de diseño haciendo clic en Usar predeterminado en la sección Cuadrícula del Inspector de propiedades.

Configure sus preferencias de cuadrícula personalizadas como predeterminadas haciendo clic en Establecer como predeterminado. Esta opción establece el ajuste de cuadrícula predeterminada de su cuenta. Cualquier nuevo archivo que abra con XD tendrá este nuevo valor predeterminado.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea