Transformaciones CSS en términos de Figma: translate, rotate, scale y skew

Introducción

Tres de las cuatro funciones de transformación de CSS tienen un equivalente directo en Figma: translate() corresponde a los campos X e Y, rotate() al campo de rotación y scale() se parece más a la herramienta Scale. skew() no tiene ningún control en el panel de propiedades de Figma. Lo que más confunde es el signo de la rotación, el punto de origen y el orden de las operaciones.

Este artículo es un mapa de vocabulario para quienes leen CSS y trabajan en Figma. Explica qué hace cada función según la referencia de transform en MDN y qué hace el control equivalente de Figma según su centro de ayuda. No dice nada sobre cómo una herramienta de importación convierte las transformaciones.

Las cuatro funciones, una junto a otra

MDN enumera las mismas cuatro familias: translate() mueve un elemento, rotate() lo gira alrededor de su origen, scale() multiplica su tamaño y skew() lo inclina a lo largo de los ejes X e Y. En CSS todas conviven en una sola propiedad transform, como una lista separada por espacios.

Translate: desplazamientos CSS frente a X e Y de Figma

translate(12px, 50%) mueve un elemento 12px en el eje X y la mitad de su propia altura en el eje Y. El segundo valor es opcional. Los porcentajes se refieren al tamaño del cuadro delimitador del propio elemento, no al del padre. Por eso translate(-50%, -50%) es una forma habitual de centrar algo que ya está colocado en la esquina superior izquierda de su contenedor.

Figma no tiene un campo de desplazamiento. Los campos X e Y muestran dónde está la capa y se refieren a la esquina superior izquierda de sus límites. Al escribir un valor nuevo, la capa se mueve hasta allí, y los campos aceptan operaciones matemáticas básicas, de modo que añadir +12 a la X actual equivale al empujón de translate(12px, 0). Cuando giras una capa, Figma sigue calculando X e Y a partir de la esquina superior izquierda original, así que los números no saltan.

Para saber cómo funciona la colocación de un elemento antes de cualquier transformación, consulta CSS position en Figma.

Rotate y transform-origin

rotate() recibe un ángulo en deg, turn o rad. rotate(0.5turn) y rotate(180deg) son la misma rotación. Los valores positivos giran el elemento en sentido horario.

Figma va en sentido contrario. En el campo de rotación, en la parte superior del panel Design, un ángulo positivo gira en sentido antihorario y uno negativo en sentido horario. El campo va de -180 a 180 grados, y un valor que pasa de 180 vuelve por el otro lado, de modo que 15 grados más allá de 180 se convierte en -165. El artículo de ayuda de Figma explica que CSS usa las direcciones opuestas para el ángulo de rotación, y Dev Mode lo refleja: una capa girada 90 grados en el lienzo aparece como rotate(-90deg). Cuando copies un número de una herramienta a la otra, invierte el signo.

El punto alrededor del cual giras importa tanto como el ángulo. En CSS lo define transform-origin, cuyo valor inicial es 50% 50% 0, el centro del cuadro del elemento. Las palabras clave son atajos de porcentajes: left y top valen 0%, center vale 50%, right y bottom valen 100%.

.box {
  transform: rotate(30deg);
  transform-origin: 0 0; /* rotate around the top-left corner */
}

El valor por defecto de Figma coincide: gira alrededor del centro de la selección actual. Para usar otro pivote, selecciona la capa, pulsa Option R en Mac o Alt R en Windows y arrastra el objetivo al nuevo punto. Si arrastras justo fuera de los límites de una capa, la giras, y con Shift se ajusta a incrementos de 15 grados. El artículo de ayuda de Figma sobre rotación y posición cubre cada uno de estos puntos.

Un detalle de SVG según MDN: en los elementos SVG el transform-origin inicial es 0 0, salvo en los elementos svg raíz y en los hijos svg de foreignObject, que usan 50% 50%. Una rotación que parece centrada en una caja HTML puede girar desde la esquina en una forma SVG.

Scale

scale(2) duplica un elemento y scale(0.5) lo reduce a la mitad. Los argumentos son factores sin unidad, y cuando se omite el segundo, es igual al primero, así que scale(2) es lo mismo que scale(2, 2). scale(2, 0.5) estira en horizontal y aplasta en vertical.

En Figma, el control más cercano es la herramienta Scale, que se activa con la tecla K. Una caja de anclaje define desde qué dirección escala el objeto, y puedes usar el multiplicador de escala o los campos de dimensiones. El artículo de ayuda de Figma indica que la herramienta conserva la relación de aspecto e ignora las restricciones (constraints) de las capas anidadas para escalarlas de forma proporcional. Escalar una capa de texto también cambia su tamaño de fuente, algo distinto de un simple cambio de ancho y alto.

Esa es la principal diferencia. Cambiar el tamaño de un frame en Figma modifica sus dimensiones y deja que las constraints respondan. scale() en CSS multiplica el tamaño del elemento por un factor y no tiene constraints a las que responder. El artículo sobre la herramienta Scale es la referencia del lado de Figma.

Voltear es un caso relacionado. Figma voltea una capa con Shift H (horizontal) o Shift V (vertical), y su artículo de ayuda señala que Figma usa la transformación CSS matrix para los volteos, incluso si después aplicas una rotación. Por eso una capa volteada puede aparecer en Dev Mode como un valor matrix() y no como una función rotate() o scale().

Skew

skew(30deg, 20deg) inclina un elemento 30 grados en X y 20 grados en Y, y skewX() y skewY() se encargan de un solo eje cada una. Skew recibe ángulos, no factores.

El panel de propiedades de Figma no tiene un campo de skew. En la comunidad de Figma hay varios plugins de skew, y quienes desarrollan pueden definir la matriz de transformación de la capa mediante la Plugin API. La documentación de relativeTransform dice que una capa se puede inclinar asignando los valores correctos de la matriz, y advierte de que el skew no aparece en el panel de propiedades y puede confundir a quien trabaje con un nodo inclinado. Si encuentras una forma inclinada en un archivo, comprueba cómo llegó hasta ahí antes de editarla a mano.

CSS tiene el mismo vacío de otra forma: no existe una propiedad skew individual. translate, rotate y scale existen como propiedades independientes, pero para inclinar hace falta la propiedad transform.

El orden de las transformaciones y lo que una transformación no cambia

Cuando una lista de transform tiene varias funciones, se aplican de izquierda a derecha, y cada una crea un nuevo espacio de coordenadas para la siguiente. El orden cambia el resultado:

.one { transform: translateX(200px) rotate(135deg); } /* shift, then rotate */
.two { transform: rotate(135deg) translateX(200px); } /* rotate, then shift along the rotated axis */

Mismos valores, posiciones distintas. Si alguna vez reconstruyes a mano una pila de CSS en Figma, aplica los pasos en el mismo orden, o la capa acabará en otro sitio.

Las propiedades independientes también tienen un orden fijo: primero translate, luego rotate, después scale y por último transform.

Hay dos efectos secundarios fáciles de pasar por alto. Un valor de transform distinto de none crea un contexto de apilamiento y convierte al elemento en el bloque contenedor de sus descendientes con position: fixed y position: absolute. Además, no todos los elementos se pueden transformar: las cajas en línea no reemplazadas no admiten transformaciones. Si una transformación parece no hacer nada, comprueba primero el valor de display. Para saber cómo organizan los contenedores a sus hijos antes de aplicar cualquier transformación, consulta el mapa de flexbox a auto layout.

Conclusión

Translate, rotate y scale tienen cada uno su lugar en Figma: los campos X e Y, el campo de rotación y la herramienta Scale. Skew no lo tiene, y necesita un plugin o la Plugin API. Revisa tres cosas cuando pases una transformación de una herramienta a otra: el signo de la rotación (en Figma lo positivo es antihorario y en CSS es horario), el origen (ambos usan el centro por defecto y ambos se pueden mover) y el orden de las operaciones. Para el lado del diseño de la misma correspondencia, lee CSS Grid a capas de Figma.

Preguntas frecuentes

¿Tiene Figma un control de skew?

No en el panel de propiedades. El skew llega mediante plugins de la comunidad o definiendo la matriz de transformación con la Plugin API. La documentación de Figma advierte de que un skew definido así no aparece en el panel.

¿Por qué una rotación de 90 grados en Figma aparece como rotate(-90deg) en Dev Mode?

Figma trata un ángulo positivo como antihorario, mientras que CSS lo trata como horario. El artículo de ayuda de Figma dice que CSS usa la dirección opuesta, así que Dev Mode invierte el signo.

¿Cuál es el transform-origin por defecto en CSS y qué usa Figma?

CSS usa 50% 50% por defecto, el centro del cuadro del elemento. Figma gira por defecto alrededor del centro de la selección actual, y puedes mover el punto con Option R en Mac o Alt R en Windows.

¿Es scale() de CSS lo mismo que cambiar el tamaño de una capa en Figma?

No exactamente. scale() multiplica el tamaño dibujado por un factor sin unidad. La herramienta Scale de Figma (K) es lo más parecido: conserva la relación de aspecto y escala las capas anidadas de forma proporcional, incluido el tamaño de fuente del texto.