Ajustes de diseño y distribución

1. Medir distancias entre capas

Puedes medir las distancias entre estos elementos del lienzo:

• Formas y trazados vectoriales
• Capas de texto
• Marcos
• Componentes
• Instancias
• Grupos
• Guías

2. Medir distancias entre objetos

También puedes medir objetos contenidos en marcos, grupos o componentes:

1. Selecciona el primer objeto.
2. Mantén pulsada Alt en Windows u ⌥ Option en macOS.
3. Sitúa el cursor sobre el segundo objeto.
4. Pixso muestra una línea roja entre ambos y el valor de la distancia.

3. Medir distancias entre capas anidadas

1. Selecciona el primer objeto.
2. Mantén pulsadas Ctrl y Alt en Windows, o ⌘ Command y ⌥ Option en macOS.
3. Sitúa el cursor sobre el segundo objeto.

Pixso muestra una línea roja y la distancia correspondiente.

4. Auto Layout

Auto Layout es una propiedad de marcos y componentes que adapta la distribución cuando cambia su contenido. Es útil al añadir capas, modificar textos o cambiar el tamaño de los objetos.

Puedes utilizarlo para:

• Crear botones que se ajusten al texto.
• Crear listas que se adapten al añadir o quitar elementos.
• Construir interfaces completas con marcos de distribución automática.

4.1 Añadir Auto Layout

Auto Layout funciona en marcos. Si lo aplicas a una selección sin marco, Pixso crea uno que contiene los objetos seleccionados.

Puedes aplicarlo a:

• Un marco nuevo o vacío
• Un marco con contenido
• Un componente o conjunto de componentes
• Una capa o un grupo de objetos

Para activarlo:

1. Pulsa Shift + A.

2. Haz clic en + junto a Auto Layout en el panel derecho.

3. O selecciona Añadir Auto Layout en el menú contextual del marco u objeto.

4.2 Propiedades de Auto Layout

Los marcos con Auto Layout muestran propiedades de distribución específicas en el panel derecho.

Notas:

1. La distribución se organiza en una dirección, horizontal o vertical. Para combinar ambas, anida marcos con Auto Layout.

2. Puedes ajustar la separación entre los objetos en la dirección de la distribución.

3. Puedes definir el espacio interior entre los objetos y el marco. Si los cuatro lados tienen el mismo valor, se muestra un único número; si difieren, se indica un valor mixto.

El marco puede adaptar su tamaño al contenido respetando estos espacios interiores.

5. Distribución y alineación

1. Distribución agrupada: utiliza el valor de separación que hayas definido.

Permite alinear el conjunto arriba a la izquierda, arriba al centro, arriba a la derecha, al centro a la izquierda, centrado, al centro a la derecha, abajo a la izquierda, abajo al centro o abajo a la derecha.

2. Distribución uniforme: reparte el espacio entre los objetos y lo adapta al tamaño del marco.

Las opciones de alineación dependen de la dirección de Auto Layout.

• En horizontal: izquierda, centro y derecha.
• En vertical: arriba, centro y abajo.

3. Los ajustes de tamaño distinguen entre el marco con Auto Layout y los objetos que contiene.

Nota: las siguientes operaciones no están disponibles en los marcos con Auto Layout descritos en esta guía:

• Añadir una cuadrícula de diseño al marco.
• Aplicar restricciones convencionales a sus objetos.
• Utilizar selección inteligente en sus objetos.

6. Organización inteligente

La selección inteligente permite ajustar la distribución y la separación de dos o más capas. Puedes:

• Igualar las separaciones horizontales y verticales.
• Crear cuadrículas regulares o irregulares a partir de una selección.
• Cambiar el orden de capas en filas, columnas o cuadrículas.
• Duplicar o eliminar capas y redistribuir las restantes.

Así puedes organizar conjuntos de objetos sin ajustar cada posición por separado.

6.1 Utilizar la selección inteligente

Las capas deben tener separaciones regulares y compartir una distribución reconocible en el eje X, Y o ambos.

Si sus separaciones son irregulares, utiliza Organizar para establecer una distribución uniforme.

La selección inteligente funciona en una dimensión —filas o columnas— y en dos dimensiones —cuadrículas o tablas—.

1. Selecciona las capas que quieras organizar. Pueden tener tamaños y formas distintos e incluir capas, grupos, marcos y componentes.

2. Pixso añade controles inteligentes y un círculo rosa en el centro de cada objeto.

3. Al situar el cursor sobre la selección, aparecen controles rosas para ajustar las separaciones horizontales o verticales.

6.2 Modificar capas de una selección inteligente

Puedes mover, añadir o eliminar elementos sin perder la distribución de la selección. Las operaciones disponibles incluyen:

• Ajustar la separación
• Mover o reordenar capas
• Duplicar capas
• Cambiar su tamaño
• Eliminar capas

El círculo rosa central permite marcar la capa sobre la que quieres actuar.

1. Ajustar la separación

Utiliza los controles inteligentes o introduce valores en el panel derecho.

Arrastra un control para cambiar la separación.

Introduce un valor concreto en el panel derecho.

2. Reordenar capas

Puedes cambiar el orden y la posición de los elementos dentro de la selección.

• Haz clic en el círculo rosa de una capa.
• Arrástrala a la nueva posición.
• Suéltala para confirmar. El conjunto conservará su distribución.

3. Duplicar capas

Puedes duplicar una capa dentro de la selección inteligente.

• Haz clic en su círculo rosa.
• Utiliza el atajo:

macOS:Command + D

Windows:Ctrl + D

• La copia aparece junto al original y las demás capas se desplazan para dejarle espacio.

4. Cambiar el tamaño

Puedes modificar el tamaño de las capas seleccionadas y mantener la separación entre ellas.

5. Eliminar capas

También puedes quitar una capa individual.

• Haz clic en su círculo rosa.
• Pulsa Delete o Backspace.
• Las demás capas se reorganizan para ocupar el espacio libre.

7. Reglas y guías

Las reglas y guías ayudan a colocar objetos con precisión.

7.1 Añadir una guía

Activa primero las reglas. Si no aparecen, pulsa Shift + R o utiliza la opción del menú.

Arrastra desde la regla superior o izquierda hacia el lienzo y suelta en la posición deseada para crear una guía.

Puedes colocar guías en el lienzo o dentro de marcos.

7.2 Eliminar una guía

Arrástrala de nuevo hasta la regla o selecciónala y pulsa Delete o Backspace.

8. Cuadrículas de diseño

8.1 Qué es una cuadrícula de diseño

Ayuda a alinear objetos dentro de un marco y aporta una estructura visual consistente entre diseños para distintas plataformas y dispositivos.

Es independiente de la cuadrícula de píxeles y de una resolución concreta.

Solo se aplica a marcos, tanto de nivel superior como anidados.

Permite:

• Mantener coherencia entre plataformas.
• Reducir decisiones repetitivas al distribuir contenido.
• Ahorrar tiempo al estructurar maquetas y wireframes.
• Organizar galerías, iconos o páginas completas.

Selecciona un marco o componente y pulsa + junto a Cuadrícula de diseño en el panel derecho.

Puedes combinar varias cuadrículas para definir estructuras en distintas dimensiones.

8.2 Propiedades

Hay tres tipos: cuadrícula, columnas y filas.

• En una cuadrícula puedes definir el tamaño de las celdas y el color.

• En columnas y filas puedes configurar cantidad, tipo, tamaño, márgenes y separación.
• Las columnas pueden alinearse a la izquierda, a la derecha o al centro, o estirarse. En el modo de estiramiento, ocupan el marco respetando márgenes y separaciones. Puedes combinar estos ajustes con las restricciones de sus objetos.

8.3 Mostrar u ocultar cuadrículas

Utiliza los atajos correspondientes:

macOS:Command + G

Windows:Ctrl + Shift + 4

9. Restricciones

Las restricciones definen cómo responde una capa cuando cambia el tamaño de su marco.

9.1 Restricciones horizontales

Al modificar la anchura del marco, puedes:

• Izquierda: mantener la distancia al borde izquierdo.
• Derecha: mantener la distancia al borde derecho.
• Izquierda y derecha: mantener ambas distancias; la capa se amplía o reduce horizontalmente.
• Centro: mantener la posición respecto al centro horizontal del marco.
• Escalar: mantener el tamaño y la posición como porcentajes de las dimensiones del marco.

9.2 Restricciones verticales

Al modificar la altura del marco, puedes:

• Arriba: mantener la distancia al borde superior.
• Abajo: mantener la distancia al borde inferior.
• Arriba y abajo: mantener ambas distancias; la capa se amplía o reduce verticalmente.
• Centro: mantener la posición respecto al centro vertical del marco.
• Escalar: conservar proporcionalmente el tamaño y la posición al cambiar el marco.

9.3 Aplicar restricciones

Se aplican a capas dentro de un marco, no a objetos sueltos del lienzo ni a los elementos de Auto Layout descritos en esta guía.

• Puedes aplicarlas a un marco anidado.
• Una capa puede tener restricciones horizontales y verticales.
• No se aplican directamente a los grupos.

Para configurarlas:

1. Selecciona una capa o su elemento principal. Las líneas azules discontinuas indican las restricciones actuales.

2. Ajusta ambos ejes en Restricciones en el panel derecho.

3. Elige las opciones en los menús desplegables.

4. También puedes seleccionar las líneas del control visual.

5. Para mantener el elemento en su sitio durante el desplazamiento del prototipo, activa Fijar posición al desplazarse.

9.4 Ignorar restricciones temporalmente

Para cambiar el tamaño sin aplicar las restricciones, mantén pulsada la tecla modificadora mientras arrastras:

• macOS: Command
• Windows: Ctrl