Tokens Studio for Figma
  • Getting Started
    • Tokens Studio Plugin for Figma
    • Install the Figma Plugin
    • Pro Licence for the Figma Plugin
    • Join the Slack Community
    • Feature Requests - Featurebase
    • Changelog - Featurebase
  • Design Token Fundamentals
    • Intro to Design Tokens
      • Token Anatomy - Type
      • Token Anatomy - Value
      • Token Anatomy - Description
      • Token Anatomy - Name
  • Token Management
    • Token Types
      • Asset
      • Boolean
      • Border - Composite
      • Box Shadow - Composite
      • Color
        • Modified Colors (pro)
        • Gradient Colors
      • Dimension
        • Border Radius
        • Border Width
        • Sizing
        • Spacing
      • Number
      • Opacity
      • Other
      • Text (string)
      • Typography - Composite
        • Font Family
        • Font Weight
        • Font Fallbacks
        • Font Size
        • Line Height
        • Letter Spacing
        • Paragraph Indent
        • Paragraph Spacing
        • Text Case
        • Text Decoration
      • Composition (legacy)
    • Token Values
      • Token Values with References
      • Using Math in Token Values
    • Token Names
      • Token Name Technical Specs
      • Token Groups
      • Edit Token Names
    • Token Description
    • Token Sets
      • JSON View
  • Themes management
    • Themes (pro)
    • Themes that switch
  • Working in Figma
    • Variables and Tokens Studio
    • Styles and Tokens Studio
    • Export to Figma Guide
      • Export Options
      • Export Using Themes (pro)
      • Export Using Token Sets
      • Variables Skipped on Export
      • Styles with Variable References
    • Import from Figma Guide
      • Import Styles from Figma
      • Import Variables from Figma
        • Connect Themes to Imported Variables
        • Imported Variable Types and Token Types
    • Non-local Variables and Styles (pro)
    • Remove Tokens from Figma elements
    • Dev Mode in Figma
  • Settings Management
    • Plugin Settings
    • Base Font Size Setting
    • Token Format - W3C DTCG vs Legacy
  • Token Storage and Sync Integrations
    • Local Document - Figma File Token Storage
      • Figma Data Limits
    • Remote Token Storage Integrations
      • GitHub - Git Sync Provider
      • GitLab - Git Sync Provider
      • Bitbucket - Git Sync Provider
      • Azure DevOps - Git Sync Provider
      • JSONBin - Cloud Sync Provider
      • Supernova - Cloud Sync Provider
      • Tokens Studio Platform - Cloud Sync Provider
      • URL - Server Sync Provider
      • Generic Versioned Storage - Server Sync Provider
    • Multi-file Sync to Remote Storage (pro)
    • Manage Sync Providers
      • Edit Sync Provider
      • Change Active Sync Provider
      • Remove Sync Provider
    • Sync Changes to Remote Storage - Push and Pull
    • Branch Switching (pro) - Version Control
  • Inspect and Debug Tokens
    • Inspect Tokens
    • Remap Tokens
  • Transform Tokens for Development
    • Style Dictionary + SD Transforms
    • Official docs for Style Dictionary
  • Style Dictionary Playground
  • Troubleshooting
    • Reset Tokens from Dev Console
    • Tokens Studio Status
  • Open Source
    • Contribute
    • Shared Plugin Data
Powered by GitBook
On this page
  • Dimension - Token Type
  • Design decisions
  • Possible values
  • Values that reference another Token
  • Apply Dimension Tokens
  • W3C DTCG Token Format
  • Transforming Tokens
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousGradient ColorsNextBorder Radius

Last updated 4 months ago

Was this helpful?

Dimension - Token Type

Dimension Tokens define the size, space, radius, or position of a design element as a numeric value with a unit of measurement.

The primary difference between a Number Token and a Dimension Token is a unit of measurement.

  • Number tokens are intended to be unitless.

    • For example: 4

  • Dimension Tokens are required to have a unit of pixels or rem.

    • For example: 4px

Design decisions

The Dimension Token is used for design decisions requiring a distance and unit of measurement for a specific property of a design element.

  • Many of the properties supported by this token are individually defined in CSS.

Dimension Tokens can be used to define these design properties in Figma:

  • size

  • space

  • border-radius and width

  • absolute position location

  • background blur effects

This is a great way to define tokens that might be used in various use cases, such as a sizing scale applied to text elements, icons, and containers.

Dimension Tokens support responsive and static design properties:

  • Responsive - value in rem units

    • Example: 2rem applied as a min-height property on an auto-layout frame applies a 32px min-height value to the frame

  • Static - value in pixels

    • Example 32px applied as border-radius rounds the corner of a frame to 32px


Possible values

According to the W3C DTCG specification, the value of a Dimension Token must include a numeric value and a unit of measure, either Pixels (px) or Rems (rem).

Referencing Dimension Tokens in math equations may lead to unexpected results if there is a combination of pixel and rem units in the same equation.

Hard-coded values

The syntax used to write numeric values for Dimension Tokens is important.

  • Be sure to avoid any spaces between numbers and units of measurement.

  • Units are always written in lowercase.

Dimension Tokens require a number and a unit of measurement without any spaces as the value. For example:

16px

1rem

Avoid between the number and the unit. For example:

16 px

1 rem

Unitless numbers are not allowed. For example:

16

Negative numbers are supported but may not apply to all design properties.

For example, -4px would work for a spacing property but not as a border radius property.

Rem units (rem)

To support responsive design, you can define your Dimension Token in rem units, and the plugin automatically converts the value to the pixel equivalent when applying the Token in Figma.

For example, a Dimension Token with a value of 1rem, when applied as a will appear as 16px in Figma.

Pixel units (px)

When you have design elements that should remain static even when users change their preferences, the Dimension Token value can be defined in pixel units.

4px

Units not supported

The plugin only supports Dimension Tokens in pixels or rem units, to align with the W3C DTCG specification.

We do not support:

  • percentage (%)

  • em units

Values that reference another Token

When trying to reference another Token as the Value for a Dimension Token, you will see Tokens in the dropdown list that are:

  • Living in Token Sets that are currently active.

    • In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.

  • Token Type is compatible:

    • The same = dimension

However, like all Token Types, you can "force" a reference by manually entering the Token Name between curly brackets.

For example, if you want to reference a Number Token without a unit, you can force the reference by adding the token name, followed by the required unit for a Dimension Token.

{unitless.number}px

The value will show a broken reference until the originating Token Set is marked as enabled.

Select the card below to jump to the technical docs for more information.

Compatible Token Types

After you've created Number Tokens, they can be referenced in another Number Token and several compatible Token Types.

See all Token Types compatible with Dimension Tokens

Typography - Composite

Font Size

Paragraph Spacing

Border - Composite

Spacing

Sizing

Border Radius

Border Width


Apply Dimension Tokens

A Dimension Token can define the numeric value and unit of measurement of several design properties when applied to frames, groups or graphic elements in Figma.

With one or more elements selected in Figma, right-click on the Dimension Token Name in the Plugin to see the design property options.

Select your desired design property by clicking on it to apply the Tokens value instantly.

If you click to apply this Token to an element without accessing the right-click Token menu, the value will be applied as a spacing-gap property.

1. Spacing

The spacing property defines the distance between layers of an auto-layout frame in Figma when the Dimension Token is applied.

For independent styling per side, you can repeat the steps above and apply different Dimension Tokens to each position of the same design element.

If you apply the Token to a frame before auto-layout is applied in Figma, you may have to remove and re-apply the Token after auto-layout has been enabled for the Token Value to apply as expected.

2. Sizing

The Sizing property defines the width or height of polygonal shape, frames, groups or graphic elements in Figma when the Dimension Token is applied.

For independent styling per side, you can repeat the steps above and apply different Dimension Tokens to each position of the same design element.

If you apply the Token as Min/Max Width or Height to a frame before auto-layout is applied in Figma, you may have to remove and re-apply the Token after auto-layout has been enabled for the Token Value to apply as expected.

3. Border radius

The Border Radius property defines the corner roundness of polygonal shape, frames, groups or graphic elements in Figma when the Token is applied.

For independent corner styling, you can repeat the steps above and apply different Dimension Tokens to each corner position of the same design element.

4. Border width

A Border Width property defines the thickness of the stroke applied to text layers, polygonal shapes, frames, groups or graphic elements in Figma when the Dimension Token is applied.

For independent border styling, you can repeat the steps above and apply different Dimension Tokens to each side of the same design element.

If you apply the Border Width property to an element before a stroke is applied in Figma, you may have to remove and re-apply the Dimension Token after the stroke has been enabled for the value to apply as expected.

5. Background blur

The Background Blur property of the Dimension Token defines the intensity of the Layer Blur Effect in Figma when the Token is applied in Figma.

The Background Blur property must be applied to container design elements, like frames, groups, and polygonal shapes with a reduced opacity color fill applied.

6. X and Y Position

The x position and y position properties of the Dimension Token define the absolute position of the design element when the Token is applied in Figma.

X Position

  • The element is absolutely positioned on the horizontal axis in relationship to the parent container.

  • If no parent container is present, it positions the element on the Figma canvas.

Y Postion

  • The element is absolutely positioned on the vertical axis in relationship to the parent container.

  • If no parent container is present, it positions the element on the Figma canvas.

If you apply the x/y property to an element before enabling Absolute Position and Auto-layout in Figma, you may have to remove and re-apply the Dimension Token after they are enabled before the value will be applied as expected.


W3C DTCG Token Format

Dimension Tokens are a relatively new addition to the W3C DTCG specification, which defines this token as being applied to many different design properties.

If we want to fully align with the spec, it requires Tokens Studio to phase out the following unofficial Token Types, which we introduced long before the Dimension Token was added to the spec:


Transforming Tokens

When transforming Dimension Tokens, there are specific configurations to be aware of.

Token Values entered as a number without a unit converted to a number with pixels as a unit.

Token Values entered with math equations need to be checked and resolved.

Running the SD-Transforms pre-processor as part of the generic package will prep your Dimension Tokens for Style Dictionary.


Resources

Mentioned in this doc:

Figma resources:

CSS resources:

Community resources:

  • None yet!

Known issues and bugs

    • Figma is natively halving/doubling their background blur effect values, creating a disconnect between tokens managed by Token Studio and any parsed output.

    • Known CSS quirk which can be solved with a custom Style Dictionary transform

Requests, roadmap and changelog

  • None yet!

This doesn't match the , which focuses on distance, durations, frequencies, and resolutions.

You can also reference a Dimension Token in these additional Token Types; however, they are not recognized in the W3C DTCG specifications as official Token Types, .

→

→

The plugin supports a that allows you to reference a Border Width Token to avoid this issue.

→

to learn about reduced opacity colors using color spaces that support alpha.

This property can't yet be Exported to Figma as a reusable Effect Style from the plugin in the same way that can.

Dimension is an official token type in the W3C Design Token Community Group specifications ().

→

→

→

SD-Transforms -

Style Dictionary -

Design Tokens Community Group -

Design Tokens Community Group -

Design in Figma -

Design in Figma -

Design in Figma -

Design in Figma -

Design in Figma -

MDN Web Docs -

Tokens Studio Plugin GitHub -

Background blur > Figma values changed -

CSS definition for Dimension
Token Values with References
Read Figma's doc on Autolayout here
Read Figma's doc on Autolayout here
Border Composite Token
Read Figma's doc on Layer blur here
→ Jump to the guide on Color Tokens
Box Shadow Tokens
→ Read Figma's docs on Absolute Position
8.2 Dimensions
Spacing
Sizing
Border Radius
Border Width
SD-Transforms Read-Me Doc, ts/size/px
SD-Transforms Read-Me Doc, ts/resolveMath
SD-Transforms Read-Me Doc, Using the preprocessor
Read Me
https://styledictionary.com/
W3C Draft
8.2 Dimension
Explore autolayout properties
Apply and adjust stroke properties
Adjust corner radius and smoothing
Adjust alignment, rotation, and position
Apply blur effect
Dimension
Open issues for Token Type Dimension
Community Post on Featurebase
more details below ↓

💡 Something to share?

Engineers typically transform Tokens used in code with , which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: , an npm package that prepares Tokens for Style Dictionary.

🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our , , or send us an email support@tokens.studio

Submit it here!
Style Dictionary
@Tokens-studio/sd-transforms
community Slack
submit it on our feedback tool

💌 Visit to contribute or subscribe to updates.

https://feedback.tokens.studio/
1

Gap

Apply the Token value to the space between child elements within an auto-layout frame.

2

All

Apply the Token value to padding on all sides of the parent container, and the space between child elements within an auto-layout frame.

3

Horizontal padding

Apply the Token value to the space between the border and child elements on the left and right sides an auto-layout frame.

4

Vertical padding

Apply the Token value to the space between the border and child elements on the top and bottom sides an auto-layout frame.

5

Row Gap

Apply the Token value to the space between rows of child elements in auto-layout frames set to wrap.

6

Top

Apply the Token value to padding on the highest side of an auto-layout frame on the X-axis only.

7

Right

Apply the Token value to padding on the right side of an auto-layout frame on the y-axis only.

8

Bottom

Apply the Token value to padding on the lowest side of an auto-layout frame on the X-axis only.

9

Left

Apply the Token value to padding on the left side of an auto-layout frame on the y-axis only.

All Token Types that accept numeric values can use math equations to calculate their value in Tokens Studio.

Jump to the guide on Tokens with Math Values by selecting the card below to learn more.

Using Math in Token Values
Page cover image
Creating a new Dimension Token in the Tokens Studio Plugin for Figma.
Cover

Dimension Tokens can be attached to Number Variables in Figma. The Plugin will automatically convert these to the pixel equivalent on export.

The right-click menu and sub-menus of a Dimension Token are opened to reveal the design properties it can be applied to in Figma.
Use the spacing property to define the distance between elements.
Use the sizing property to define a fixed height or width.
Use the border radius property to define the roundness of an element.
Use the border width property to define the stroke thickness.

Once a Token has been applied, it will remain attached until you manually remove it.

Rem Units act as a multiplier of the base font size, so when a user changes their preferences to a larger font size or uses a zoom feature in your product, elements defined in rem units will respond accordingly.

The value of 1rem can be configured in the .

plugin settings for Base Font Size
1

All

Apply the Token value to the horizontal and vertical size of the design element.

2

Width

Apply the Token value to the horizontal size of the design element only.

3

Height

Apply the Token value to the vertical size of the design element only.

4

Min Width

Apply the Token value to set the smallest allowed horizontal size of an auto-layout frame.

5

Max Width

Apply the Token value to set the largest allowed horizontal size of an auto-layout frame.

6

Min Height

Apply the Token value to set the smallest allowed vertical size of an auto-layout frame.

7

Max Height

Apply the Token value to set the largest allowed vertical size of an auto-layout frame.

1

All

Apply the Token value to the roundness of all corners of the selected design element.

2

Top left

Apply the Token value to the roundness of the corner on the left highest side of the element on the X-axis only.

3

Top right

Apply the Token value to the roundness of the corner on the right highest side of the element on the X-axis only.

4

Bottom right

Apply the Token value to the roundness of the corner on the left lowest side of the element on the X-axis only.

5

Bottom left

Apply the Token value to the roundness of the corner on the right lowest side of the element on the X-axis only.

There is no immediate plan to discontinue support of unofficial Token Types.

We want to build a thoughtful solution to help Tokens Studio users migrate from these 'unofficial Token Types' to Dimension Tokens if that time comes.

→

Conversation forum on Unofficial Token Types is here.
1

All

Apply the Token value to the stroke thickness on all sides of the selected design element.

2

Top

Apply the Token value to the stroke thickness to the highest side of the element on the X-axis only.

3

Right

Apply the Token value to the stroke thickness to the right side of the element on the Y-axis only.

4

Bottom

Apply the Token value to the stroke thickness to the stroke on the lowest side of the element on the X-axis only.

5

Left

Apply the Token value to the stroke thickness to the left side of the element on the Y-axis only.