Antes de empezar

Quién puede utilizar esta función

Compatible con cualquier equipo o plan

Solo las personas con acceso de 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 agregues al lienzo tiene su propia capa. Esto te permite ajustar cada capa individualmente a medida que creas diseños uniformes 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.

En la barra lateral derecha, encontrarás la mayoría de estas propiedades en la parte superior del panel de diseño. 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 relacionadas entre sí. Figma determinará la alineación de la capa según tu selección específica.

• Seleccionar un objeto o capa: Figma alineará la capa con su capa principal. Esto podría ser un grupo, un marco o el marco que contiene un componente.
• Seleccionar varias capas: Figma alineará las capas relacionadas entre sí, con su marco principal o 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 a los centros horizontales
• Alinear a la derecha
• Alinear a la parte superior
• Alinear a los centros verticales

Como alternativa, usa los atajos de teclado:

Acción	Atajo de teclado
Alinear a la parte superior	AltW
Alinear a la izquierda	AltA
Alinear a la parte inferior	AltS
Alinear a la derecha	AltD
Alinear centros verticales	AltV
Alinear a los centros horizontales	AltH

Mantén presionada la tecla Shift y haz clic en los controles de alineación para alinear varios objetos como un grupo a su marco principal. Si los objetos están 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, usa la configuración Ajustar a y ayuda a alinearlos con otros elementos del lienzo. Aparece una guía roja en el lienzo como indicador visual.

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

Para activar y desactivar la configuración "Ajustar a", abre un archivo de Figma Design y ve a  > Preferencias. También puedes encontrar estas configuraciones en el menú de acciones rápidas. 

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

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

Para deshabilitar temporalmente Ajustar a la cuadrícula de píxeles con Control, asegúrate de estar en modo de edición vectorial y de hacer zoom en el lienzo. Para saber si ampliaste 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 que la cuadrícula de píxeles esté activada para usar este acceso directo.

Distribución

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

Al usar Distribuir, Figma conservará la posición de los objetos o capas más externos:

• Distribuir el espaciado horizontal: Tanto los objetos o capas del exterior izquierdo como del exterior derecho mantendrán su posición.
• Distribuir el espaciado vertical: Tanto los objetos y capas superiores e inferiores mantendrán su posición.
• Ordenar (selección inteligente) ↓

Ordenar

Usa 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 detalles sobre cómo usar la selección inteligente →

Dependiendo 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 en función del eje en el que se superponen.

Los objetos en el eje X tendrán solo su espaciado horizontal ajustado y los objetos en el eje Y tendrán solo su espaciado vertical ajustado.

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

Selecciones bidimensionales

Cuando se usas Ordenar en 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 ordena 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 tu selección.

Distribuir u ordenar

Si estás usando Ordenar en una selección unidimensional, notarás que esto funciona de manera similar a la función Distribuir. Puedes pensar en Ordenar como Distribuir con un poco de lógica extra.

El propósito principal de la función Ordenar es organizar las capas a fin de que cumplan con ambos 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 estas se superpongan en ninguno de los ejes. Ordenar realizará ambas tareas, si es necesario.
• Ordenar te permite alinear objetos en ambos ejes al mismo tiempo. Distribuir solo funciona en un eje a la vez: distribuir el espaciado horizontal o vertical.

Tanto para distribuir como para ordenar, Figma mostrará el espacio entre ellos en el campo o . Esto se basa en el espacio más común entre los 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 empleando las coordenadas X e Y Estas se refieren a la esquina superior izquierda de los límites de la capa.

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

Desplazar capas

Usa las teclas de flecha para desplazar la posición de las capas. Figma te permite establecer dos desplazamientos predeterminados: desplazamiento pequeño y desplazamiento grande.

De forma predeterminada, el desplazamiento pequeño se establece en 1 y el desplazamiento grande, en 10. Ambos valores se encuentran en puntos independientes de la resolución. Establece los valores de desplazamiento pequeño y grande →

Usa las flechas para desplazar las capas

Emplea las teclas de flecha para desplazar la selección. Las teclas de flecha usarán la configuración de desplazamiento pequeño, mantén pulsada la tecla Shift para emplear 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 de capas.
2. Ve las dimensiones en la etiqueta azul debajo del cuadro delimitador de la capa.
3. También puedes ver las dimensiones de cualquier capa empleando los campos W y H en la barra lateral derecha.

Selecciona una capa para realizar cambios en las dimensiones de esta. Hay algunos métodos para hacerlo:

• Para ajustar el ancho de una capa: coloca 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 altura de una capa: coloca el cursor sobre los límites superior o inferior de la capa hasta que aparezca . Haz clic y arrastra para cambiar el tamaño.
• Para ajustar el ancho y la altura de una capa: coloca 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.

Limita las proporciones

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

Cuando esta configuración está activada, Figma conservará la relación original de ancho a alto cada vez que cambies el tamaño de la capa en la barra lateral. Si actualizas cualquiera 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 empleará el centro horizontal y vertical de tu selección como punto de rotación.

Cada capa que agregues al lienzo tendrá una rotación predeterminada de 0°. Puedes girar la selección 180° en cada dirección:

• Un ángulo positivo gira en sentido antihorario hacia 180°.
• Un ángulo negativo gira en sentido horario hacia -180°.

Una vez que pases 180° en cualquier dirección, Figma realizará una cuenta regresiva hacia 0° en esa dirección. Por ejemplo, ir 15° después de 180° le dará un ángulo de -165°.

Barra lateral derecha

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

1. Selecciona la(s) capa(s) u objeto(s) que deseas rotar.
2. En la barra lateral derecha, emplea el campo para ingresar la rotación deseada.

Lienzo

1. Pasa el cursor justo fuera de uno de los límites de la capa hasta que aparece el ícono .
2. Haz clic y arrastra para rotar tu selección:
   • Arrastra en sentido horario para crear un ángulo negativo (hacia -180°).
   • Arrastra en sentido antihorario para crear un ángulo positivo (hacia 180°).
3. Mantén pulsado Shift para ajustar los valores de rotación en incrementos de 15.

Girar capas

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

Emplea el menú del botón derecho para aplicar una transformación de giro o los atajos del teclado:

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

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

Puedes ajustar la posición de las capas en el lienzo a lo largo de cualquiera de las tres dimensiones o ejes: horizontal (eje X), vertical (eje Y) y profundidad (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 cambiar la profundidad (eje Z) o la jerarquía de una capa cambiando el orden en el panel de capas.

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

El panel de capas en la barra lateral izquierda muestra cada capa de la página actual y refleja el orden en que están apiladas actualmente las capas: la capa superior está en la parte frontal y la capa inferior, en la parte posterior.

Cambiar el orden de las capas

Hay algunas formas de cambiar el orden de una capa.

• 1

  Panel de capas

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

  1. Abre el panel de 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 llevar la capa hacia adelante
     • Mueve la capa hacia abajo para enviar la capa hacia atrás
  3. Suelta para aplicar.

  Nota: El orden de las capas funciona de forma opuesta dentro de un marco con disposición automática. Esto se debe a que la disposición automática no se diseñó para admitir capas que se superponen.

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

  Obtén más detalles sobre el uso de la disposición automática →

• 2

  Atajos de teclado

  Adelantar:

  • Mac: ⌘Command ]
  • Windows: Ctrl ]

  Llevar al frente:

  • Mac: ⌘ Command ⌥ Option ]
  • Windows: Ctrl Shift ]

  Enviar al fondo:

  • Mac: ⌘ Command [
  • Windows: Ctrl [

  Enviar al fondo:

  • Mac: ⌘ Command ⌥ Option [
  • Windows: Ctrl Shift [
• 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 al fondo
     • Enviar al fondo

Ajusta los valores

Ecuaciones

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

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

Hemos agregado algunos ejemplos a continuación, pero puedes emplear cualquier número:

• + 10 para agregar 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 en 2 y sumar 6 (𝑥 = valor actual)
• Mixed+100 para agregar 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 ingresa 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. Esto te permite ajustar rápidamente el valor de un campo arrastrando el mouse activo o el panel táctil.

Puedes usar esto 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. Coloca el cursor sobre la etiqueta junto al campo de entrada hasta que aparezca el cursor de limpieza. También puedes pasar el cursor sobre el campo de entrada y mantener presionada la tecla modificadora:

   • Mac: ⌥ Option
   • Windows: Alt

3. Haz clic en el ícono y arrastra para cambiar el valor de entrada. Arrastra el cursor hacia la izquierda para disminuir el valor o hacia la derecha para aumentarlo.

4. Cambia la velocidad con la que limpias 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 sobre la velocidad actual, así como una diferencia en el ancho del cursor. Hay cuatro velocidades de limpieza: 2x, 1x, 1/2 y 1/4.