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
  • Sizing - Token Type
  • Design decisions
  • Possible values
  • Values that reference another Token
  • Apply Sizing Tokens
  • Transforming Tokens
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousBorder WidthNextSpacing

Last updated 4 months ago

Was this helpful?

Sizing - Token Type

Sizing was one of the first Token Types we supported in the plugin.

Since then, a lot has changed.

The Design Tokens Community Group (DTCG) hosts a Token specification on the W3C community group pages for web standards. Although it's in draft form, the tools and technologies working with Design Tokens are trying to align with the W3C DTCG specification.

The W3C DTCG specification does not recognize Sizing as an and instead has defined Dimension Token as the preferred token for size-related design decisions.

If we want to fully align with the spec, it requires Tokens Studio to phase out the Sizing Token. However, we believe the choice should be yours!

If aligning with the W3C DTCG spec is important to your project, we suggest using Dimension Tokens instead.

There is no immediate plan to discontinue support of the Sizing Token Type.

Until we have a thoughtful solution to migrate between Token Types, we've included a custom transformation for this Token Type in the sd-transforms npm package.

If you love Sizing Tokens and want to make your voice heard, we've set up a forum in our feedback tool where you can leave your comments! Hopefully with enough support the DTCG may reconsider having Border Width as its own Token Type.

→


Design decisions

Sizing defines the height or width of a design element.


Possible values

The Sizing Token supports numeric values, with or without a unit.

Hard-coded values

The syntax used to write values for Spacing Tokens is important.

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

  • Units are always written in lowercase.

For example:

1rem

Rem units (rem)

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

For example, a Sizing Token with a value of 2rem will appear as a 32px in Figma.

Pixel units (px)

When you have design elements that should remain static even when users change their preferences, Sizing Tokens can be defined in pixel units.

For example 4px.

Values that reference another Token

When trying to reference another Token as the Value for a Sizing 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 = sizing

    • number

    • dimension


Apply Sizing Tokens

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

You can apply a Sizing Token to all sides of the design element at once, or each side independently.

With one or more elements selected in Figma, right-click on the Sizing Token Name in the Plugin to its 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 all.


Transforming Tokens

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

The preprocessor in the SD-Transforms package will automatically convert the Tokens Studio specific Token Type of sizing to align with the DTCG Format Token Type of dimension.

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


Resources

Mentioned in this doc:

Community resources:

  • None yet!

Known issues and bugs

Requests, roadmap and changelog

→

→

SD-Transforms -

Style Dictionary -

Design Tokens Community Group -

Design Tokens Community Group -

Tokens Studio Plugin GitHub -

Deselecting The "All" Property In Spacing Tokens Removes Other Spacing Tokens

W3C DTCG Spec - Unofficial Token Types -

SD-Transforms Read-Me Doc, Using the preprocessor
SD-Transforms Read-Me Doc, ts/size/px
Read Me
Read Me
W3C Draft
8.0 Types
Open issues for Token Type Sizing
#2377
Conversation Forum
'official token type'
Dimension
Conversation forum on Unofficial Token Types is here.
detailed below↓
Page cover image
Creating a new Sizing Token in the Tokens Studio Plugin for Figma.
Cover

Sizing Tokens can be attached to Number Variables in Figma.

The right-click menu of a Sizing Token is open to reveal the design properties it can be applied to in Figma.

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

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

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

For example {token.name.here}

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

Jump to the guide on Token Values with References by selecting the card below to learn more.

Token Values with References
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.

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.

→

Read Figma's doc on Autolayout here

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.

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.

💡 Something to share?

🐞 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

💌 Visit to contribute or subscribe to updates.

Using Math in Token Values
Style Dictionary
@Tokens-studio/sd-transforms
Submit it here!
community Slack
submit it on our feedback tool
https://feedback.tokens.studio/