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.

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.

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.

→ Conversation forum on Unofficial Token Types is here.

Design decisions

Sizing defines the height or width of a design element.

Sizing Tokens can be attached to Number Variables in Figma.

Possible values

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

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.

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.

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.

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

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

For example {token.name.here}

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

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.

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

Transforming Tokens

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

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.

→ SD-Transforms Read-Me Doc, Using the preprocessor

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

→ SD-Transforms Read-Me Doc, ts/size/px

Resources

Mentioned in this doc:

• SD-Transforms - Read Me

• Style Dictionary - Read Me

• Design Tokens Community Group - W3C Draft

• Design Tokens Community Group - 8.0 Types

Community resources:

• None yet!

💡 Something to share? Submit it here!

Known issues and bugs

Tokens Studio Plugin GitHub - Open issues for Token Type Sizing

• Deselecting The "All" Property In Spacing Tokens Removes Other Spacing Tokens #2377

🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our community Slack, submit it on our feedback tool, or send us an email [email protected]

Requests, roadmap and changelog

• W3C DTCG Spec - Unofficial Token Types - Conversation Forum

💌 Visit https://feedback.tokens.studio/ to contribute or subscribe to updates.