Figma scale
This document is incomplete.
How Figma scale works - Figma SCALE is a representation of responsive scaling (not a static scaling)
Transform?
While figma and other major design tools has both transform value, and explicit rotation value (which can be calculated from transform value), The intuitive way to represent a rotation value is by using a Rotation
token. Overall all figma node properties, the only two property that has impact to final transform (based on css) is scale
and rotation
.
But those two value comes from different property, one from node#roation
(or node#relativeTransform
), one from node#constraint#scale
- a dynamic scale
representor.
For this reason, while we tokenize the design, we use Rotation
token rather than Transform
token.
e.g.
// node example (this is a abstract example, the syntax may differ.)
// [scale only example]
{
rotation: 0,
constraints: "SCALE"
}
// in this case, only scale property will be assigned to final transform value.
// Step 1 tokenization
Scale(
scale: aspect_ratio, // a dynamically calculated value to make scale responsive
child: node
)
// Step 2 merge transform
Transform(
scale: matrix4, // a scale value that is represented as matrix 4
child: node
)
// ------------------------------------------
// [rotation only example]
{
rotation: 30,
constraints: "MIN"
}
// in this case, only scale property will be assigned to final transform value.
// Step 1 tokenization
Rotation(
rotation: 30,
child: node
)
// Step 2 merge transform
Transform(
rotation: 30,
child: node
)
// ------------------------------------------
// [rotation + scale example]
{
rotation: 30,
constraints: "SCALE"
}
// Step 1 tokenization
Transforms(
transforms: [
Rotation(
rotation: 30
),
Scale(
scale: aspect_ratio, // a dynamically calculated value to make scale responsive
)
]
child: node
)
// Step 2 merge transform
Transform(
rotation: 30,
scale: matrix4,
child: node
)