Skip to main content

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
)

Read Also​