Antes de empezar

Quién puede utilizar esta función

Compatible con cualquier equipo o plan

Solo las personas con acceso puede editar al archivo pueden realizar cambios en la posición, las dimensiones o la alineación de una capa.

Cada forma, objeto de texto o imagen que añadas al lienzo tiene su propia capa. Esto te permite ajustar cada capa individualmente a medida que creas diseños cohesivos y complejos.

En este artículo, te mostraremos cómo ajustar la alineación, la posición, las dimensiones y la rotación de tus capas. Esto se aplica a capas individuales, así como a marcos, componentes, grupos y selecciones.

Encontrarás la mayoría de estas propiedades en la parte superior del panel Diseño en la barra lateral derecha. También puedes ajustar algunas de estas propiedades en el propio lienzo.

Alineación

Las herramientas de alineación te permiten organizar capas en el lienzo unas respecto a otras. Figma determinará la alineación de tu capa en función de tu selección específica.

• Seleccionar un objeto o capa: Figma alineará la capa con su capa principal. Puede ser un grupo, un marco o el marco contenedor de un componente.
• Seleccionar varias capas: Figma alineará las capas entre sí, o en relación con su marco principal, o en relación con las capas seleccionadas en una instancia.

Usa los controles de alineación en la barra lateral derecha para alinear un objeto con su capa principal o para alinear varios objetos entre sí: 

• Alinear a la izquierda
• Alinear centros horizontales
• Alinear a la derecha
• Alinear arriba
• Alinear centros verticales

Como alternativa, utiliza los atajos de teclado:

Acción	Atajo del teclado
Alinear arriba	AltW
Alinear a la izquierda	AltA
Alinear abajo	AltS
Alinear a la derecha	AltD
Alinear centros verticales	AltV
Alinear centros horizontales	AltH

Mantén pulsada Mayús y haz clic en los controles de alineación para alinear varios objetos como grupo con su marco principal. Si los objetos residen en diferentes marcos, se alinearán con sus respectivos marcos principales.

Ajustar a la configuración

Al cambiar el tamaño de un objeto, mover capas o mover puntos vectoriales, utiliza la configuración de ajuste para ayudar a alinearlos con otros elementos en el lienzo. Aparecerá una guía roja en el lienzo como indicador visual.

• Ajustar a la geometría: se utiliza solo en el modo de edición vectorial. Cuando esta configuración está activada, al hacer clic y arrastrar un punto vectorial, se alineará con otros puntos vectoriales.
• Ajustar a objetos: alinea los centros y los puntos más exteriores de diferentes objetos.
• Ajustar a la cuadrícula de píxeles: alinea los objetos con una cuadrícula subyacente para evitar errores de píxeles desalineados al exportar elementos. No es necesario que la cuadrícula de píxeles esté visible para que esta configuración funcione.

Para activar y desactivar Ajustar a la configuración, abre un archivo de diseño de Figma y dirígete a  > Preferencias. También puedes encontrar estas configuraciones en el menú de acciones rápidas. 

La opción Ajustar a la configuración se aplica a todos los archivos de Figma Design.

Si tienes habilitadas las opciones Ajustar a geometría o Ajustar a objetos , mantén pulsado Control para deshabilitarlas temporalmente.

Para desactivar temporalmente Ajustar a cuadrícula de píxeles con Control, asegúrate de que estás en modo de edición vectorial y con el zoom en el lienzo. Para saber si te has acercado lo suficiente, activa la cuadrícula de píxeles ⇧ Shift ' y haz zoom hasta que la cuadrícula sea visible. Ten en cuenta que no es necesario activar la cuadrícula de píxeles para utilizar este atajo.

Distribución

Utiliza la distribución para crear un espacio igual entre las capas de una selección. Debes tener más de una capa u objeto seleccionados.

Al utilizar distribuir, Figma conservará la posición de los objetos o capas más exteriores:

• Distribuir el espaciado horizontal: tanto los objetos como las capas exteriores izquierdos como los exteriores derechos mantendrán su posición.
• Distribuir el espaciado vertical: tanto los objetos como las capas superiores e inferiores mantendrán su posición.
• Ordenar (selección inteligente) ↓

Ordena

Utiliza Ordenar para alinear rápidamente capas en una dimensión como filas o columnas, o combina filas y columnas para crear diseños bidimensionales.

A continuación, puedes ajustar el espaciado horizontal y vertical entre los objetos de tu selección con selecciones inteligentes. Más información sobre cómo usar la selección inteligente →

En función de tu selección, verás una de las siguientes opciones:

• Ordenar la selección vertical (una dimensión)
• Ordenar la selección horizontal (una dimensión)
• Ordenar (dos dimensiones)

Selecciones unidimensionales

Para una selección en el eje horizontal o vertical (una dimensión), Figma organizará los objetos según el eje en el que se superpongan.

Solo se ajustara el espaciado horizontal de los objetos en el eje x y el espaciado vertical de los objetos en el eje y.

Figma usará el espaciado más común en la selección para establecer el valor de Espacio entre .

Selecciones bidimensionales

Cuando se utiliza la función de ordenar objetos en dos dimensiones, como una cuadrícula, el proceso de ordenar es mucho más estricto. Figma ajustará el espaciado vertical y horizontal entre los objetos.

El espaciado vertical y horizontal dependerá de su posición inicial y pueden ser iguales o únicos. Una vez que Figma ordene las capas, puedes ajustar el espaciado vertical y horizontal

A diferencia de distribuir, que reposiciona los objetos dentro de los límites de la selección original, ordenar organiza todos los objetos en una cuadrícula que se alinea con la esquina superior izquierda de la selección.

Distribuir u ordenar

Si estás usando ordenar en una selección unidimensional, notarás que funciona de manera similar a la función de distribución. Puedes pensar en ordenar como distribuir con un poco de lógica adicional.

El objetivo principal de la función ordenar es organizar las capas de manera que cumplan con los dos criterios para una selección inteligente. Es decir, estar a la misma distancia y superponerse en cualquiera de los ejes.

• Distribuir solo establecerá una distancia uniforme entre capas, no requiere que las capas se superpongan en ninguno de los ejes. Ordenar realizará ambas tareas, si es necesario.
• Ordenar te permite alinear objetos a lo largo de ambos ejes al mismo tiempo. Distribuir solo funciona a lo largo de un eje a la vez: distribuir el espaciado horizontal o distribuir el espaciado vertical.

Tanto para distribuir como para ordenar, Figma mostrará el espacio entre medias en el campo o en el campo . Esto se basa en el espacio más común entre valores (el modo).

Posición

Puedes ajustar la posición de las capas en el lienzo a lo largo de cualquiera de las dos dimensiones o ejes: horizontal (eje X) y vertical (eje Y).

Figma representa la posición de una capa en el lienzo utilizando las coordenadas X e Y. Estas se refieren a la esquina superior izquierda de los límites de la capa.

1. Abre el panel Diseño de la barra lateral derecha.
2. Utiliza los campos X e Y para ajustar las coordenadas de la capa.
3. También puedes utilizar ecuaciones matemáticas básicas (- + * / ^ () ) para ajustar rápidamente los valores de las coordenadas X e Y. Puedes añadir una ecuación antes o después del valor existente, o reemplazarla con una ecuación completamente nueva. Más información sobre ecuaciones ↓

Desplazar capas

Usa las teclas de flecha para cambiar la posición de las capas. Figma te permite establecer dos cantidades de desplazamiento predeterminadas: pequeño desplazamiento y gran desplazamiento.

Por defecto, el pequeño desplazamiento se establece en 1 y el grande en 10. Ambos valores están en puntos independientes de la resolución. Establece valores de desplazamiento pequeño y grande →

Utiliza flechas para desplazar las capas

Usa las teclas de flecha para desplazar tu selección. Las teclas de flecha utilizarán la configuración de desplazamiento pequeño, mantén pulsada Mayús para utilizar la configuración de desplazamiento grande en su lugar.

• ← Izquierda
• ↓ Abajo
• ↑ Arriba
• → Derecha

Dimensiones

Cada capa del lienzo tendrá sus propias dimensiones. Para ver las dimensiones de una capa:

1. Selecciona la capa en el lienzo o en el panel Capas.
2. Puedes ver las dimensiones en la etiqueta azul debajo del cuadro de límite de la capa.
3. También puedes ver las dimensiones de cualquier capa utilizando los campos W y H en la barra lateral derecha.

Selecciona una capa para realizar cambios en las dimensiones de una capa. A continuación, se muestran algunos métodos:

• Para ajustar el ancho de una capa: sitúa el cursor sobre los límites izquierdo o derecho de la capa hasta que aparezca . Haz clic y arrastra para cambiar el tamaño.
• Para ajustar la anchura de una capa: sitúa el cursor sobre los límites izquierdo o derecho de la capa hasta que aparezca . Haz clic y arrastra para cambiar el tamaño.
• Para ajustar la anchura y la altura de una capa: sitúa el cursor sobre cualquier esquina de los límites de la capa hasta que aparezca . Haz clic y arrastra para cambiar el tamaño.
• Ajusta los campos W y H en la barra lateral derecha.

Limitar las proporciones

El botón te permite limitar las dimensiones de la capa a la proporción actual. Puedes encontrar esta configuración junto a la configuración de dimensiones (W y H) en la barra lateral derecha.

Cuando esta configuración está activada, Figma conservará la relación ancho-alto original cada vez que cambies el tamaño de la capa en la barra lateral. Si actualizas alguno de los campos W y H, Figma actualizará el otro en consecuencia.

Rotación

Rota capas individuales, como objetos, marcos y grupos, o una selección de capas. Figma utilizará el centro horizontal y vertical de tu selección como punto de rotación.

Cada capa que añadas al lienzo tendrá una rotación predeterminada de 0°. Puedes rotar tu selección 180° en cada dirección:

• Un ángulo positivo va en sentido contrario a las agujas del reloj 180°
• Un ángulo negativo va en el sentido de las agujas del reloj -180°

Una vez que pases 180 en cualquier dirección, Figma hará una cuenta regresiva hasta 0° en esa dirección. Por ejemplo: ir 15° más allá de 180° dará lugar a un ángulo de -165°.

Barra lateral derecha

Encuentra el campo de rotación en la parte superior del panel Diseño en la barra lateral derecha.

1. Selecciona la capa u objeto que deseas rotar.
2. En la barra lateral derecha, utiliza el campo para introducir la rotación deseada.

Lienzo

1. Sitúa el cursor justo fuera de uno de los límites de la capa hasta que aparezca el icono.
2. Haz clic y arrastra para rotar tu selección:
   • Arrastra en el sentido de las agujas del reloj para crear un ángulo negativo (hacia -180° ).
   • Arrastra en sentido contrario a las agujas del reloj para crear un ángulo positivo (hacia 180°)
3. Mantén pulsada Mayús. para ajustar los valores de rotación en incrementos de 15.

Voltear capas

Otra forma de replicar capas giratorias es utilizar las transformaciones Girar horizontal y Girar vertical.

Utiliza el menú de clic derecho para aplicar una transformación de giro, o los atajos del teclado:

• Girar horizontalmente: ⇧ Shift H
• Girar verticalmente: ⇧ Shift V

Cada forma, objeto de texto o imagen que añadas al lienzo tiene su propia capa en el lienzo. Esto te permite ajustar cada capa individualmente a medida que creas diseños cohesivos y complejos.

Puedes ajustar la posición de las capas del lienzo a lo largo de cualquiera de las tres dimensiones o ejes: horizontal (eje X), vertical (eje Y) y profundo (eje Z).

A diferencia de los ejes X e Y, no hay un campo específico que puedas ajustar para el eje Z. En su lugar, puedes ajustar la profundidad (eje Z) o la jerarquía de una capa cambiando el orden en el panel Capas.

Esto te permitirá mover capas a la parte delantera o trasera del lienzo, así como mover capas dentro o fuera de grupos o marcos. Más información sobre las relaciones entre capas →

El panel Capas en la barra lateral izquierda te muestra todas las capas de la página actual y refleja el orden en que están apiladas tus capas actualmente: la capa superior está en la parte delantera y la capa inferior está en la parte posterior.

Cambiar el orden de las capas

Hay algunas formas de ajustar el orden de una capa.

• 1

  Panel de capas

  Ajusta el orden de la capa cambiando la posición de la capa en el panel Capas .

  1. Abre el panel Capas en la barra lateral izquierda.
  2. Haz clic y arrastra la capa para cambiar su posición en la jerarquía de capas:
     • Mueve la capa hacia arriba para llevarla hacia adelante
     • Mueve la capa hacia abajo para enviarla de vuelta
  3. Suelta para aplicar.

  Nota: el orden de las capas funciona de forma opuesta dentro de un marco de diseño automático. Esto se debe a que el diseño automático no se diseñó para admitir capas que se superponen.

  Si cambias el orden de las capas en un marco de diseño automático, esto cambiará la posición y el orden de la capa dentro del marco. Fuera de un marco de diseño automático, cambiar el orden de las capas no afectará la posición de una capa en los ejes X o Y.

  Obtén más información sobre el uso del diseño automático →

• 2

  Atajos de teclado

  Adelantar:

  • Mac: ⌘Command ]
  • Windows: Ctrl ]

  Llevar al frente:

  • Mac: ⌘ Command ⌥ Option ]
  • Windows: Ctrl Mayús ]

  Enviar hacia atrás:

  • Mac: ⌘ Command [
  • Windows: Ctrl [

  Enviar al fondo:

  • Mac: ⌘ Command ⌥ Option [
  • Windows: Ctrl Mayús [
• 3

  Menú del botón derecho

  1. Selecciona la(s) capa(s) en el lienzo.
  2. Haz clic con el botón derecho en la selección para abrir el menú contextual:
  3. Elige entre:
     
     • Adelantar
     • Llevar al frente
     • Enviar hacia atrás
     • Enviar al fondo

Ajustar valores

Ecuaciones

Algunos campos en Figma aceptan ecuaciones, esto incluye los campos de posición, dimensión y rotación.

Puedes utilizar ecuaciones para cambiar el tamaño de las capas sumando +, restando -, multiplicando * o dividiendo / el valor existente. También puedes utilizar paréntesis ( ) dentro del campo para ecuaciones más complejas, o ^ para crear exponentes.

Hemos añadido algunos ejemplos a continuación, pero puedes utilizar cualquier número:

• + 10 para añadir 10 al valor actual
• - 20 para quitar 20 al valor actual
• *2 para multiplicar el valor actual por 2
• /4 para dividir el valor actual por 4
• ^2 para crear un exponente del valor actual elevado a la potencia de 2
• (𝑥/2)+6 para dividir el valor actual entre dos y sumar 6 (𝑥=valor actual)
• Mixed+100 para añadir 100 a dos o más objetos seleccionados con valores diferentes

Las ecuaciones también se pueden aplicar a una selección mixta de valores. Cuando se introduce una ecuación en los campos de posición, dimensión o rotación, el cambio se aplicará a todas las capas seleccionadas. 

Limpiar campos

Además de introducir valores manualmente, también puedes «limpiar» los campos. La función de limpieza permite ajustar rápidamente el valor de un campo arrastrando el ratón o panel táctil activo.

Puedes usarlo para los campos de posición, dimensiones y rotación, así como otras propiedades y configuraciones de capa en la barra lateral derecha.

1. Selecciona la capa o el objeto en el lienzo.

2. Sitúa el cursor sobre la etiqueta junto al campo de entrada hasta que aparezca el cursor de limpieza. También puedes situar el cursor sobre el propio campo de entrada y mantener pulsada la tecla modificadora:

   • Mac: ⌥ Option
   • Windows: Alt

3. Haz clic en el icono y arrastra para cambiar el valor de entrada. Arrastra el cursor hacia la izquierda para disminuir el valor o arrástralo hacia la derecha para aumentarlo.

4. Cambia la velocidad a la que borras el campo moviendo el cursor hacia la parte superior de la pantalla para aumentar la velocidad de limpieza o hacia la parte inferior de la pantalla para reducirla.

   Verás una notificación en la parte inferior de la pantalla para la velocidad actual, así como una diferencia en el ancho del cursor. Hay cuatro velocidades de limpieza: 2x, 1x, 1/2 y 1/4.