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
  • Composition - Legacy Token Type
  • The way it works today
  • Transforming Tokens
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousText DecorationNextToken Values

Last updated 4 months ago

Was this helpful?

Composition - Legacy Token Type

The Composition Token is a Token Type we initially introduced to support design decisions that are typically composed of multiple parts, like typography, shadows and borders.

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 defines each of these composite design decisions as their own Token Type instead of a generic composition Token Type.

→

You might have noticed Tokens Studio is aligning to the W3C DTCG spec by introducing as many of the same Token Types as reasonable and feasible.

We now support typography, border, and boxShadow as independent Composite Token Types.

We encourage our community to migrate from using the 'legacy' composition Token Type to a corresponding official token type, as we may deprecate it in the future.

We know some of you love the idea of Composition Tokens as a way to have a single token which captures the values of as many design decisions as possible applied to a component. In fact, many of you have requested features to push this idea even further.

While this doesn't align with the direction of the W3C DTCG spec for a Token Type, it could be an interesting feature the Tokens Studio team could work on in the future.


The way it works today

The Composition Token allows you to combine multiple design decisions into a single Token.

When you apply a Design Token to a design element in Figma, the properties are applied to a single layer.

This means that if you try to apply a single Composition Token to a component, like a button, it will only apply the styling properties to the layer it's applied to: the container, the text, or the icons.

It is not possible to define a single Token (of any Type) for all children layers within a design element.

It's important to note that if you use the Composition Token Type, any individual property Tokens defined in the value that are attached to Styles or Variables in Figma will not show in the Figma UI as Styles or Variables.

We suggest replacing your Composition Tokens over time with the independently defined Token Types included in the W3C DTCG specifications.

  • There are numerous challenges with transforming these tokens so they are usable in code.

  • We have several bugs and known issues open specific to this token type.


Transforming Tokens

When transforming Composition Tokens, which are not an official Token Type, the SD-Transforms package has to do a lot of heavy lifting to split out the individual 'Property Tokens' with it so they are usable in code.

Composite Tokens require the SD-Transforms option to expand composite Tokens into multiple Tokens.

Make sure you look at the generic SD-Transforms package to include this option, which allows you to further customize this transformation further using Style Dictionary.


Resources

Mentioned in this doc:

Known issues and bugs

Requests, roadmap and changelog

The problems related to transforming this token type have been described as "untenable to work with" by Joren Broekema, the lead engineer maintaining Style Dictionary,

→

→

SD-Transforms -

Style Dictionary -

Design Tokens Community Group -

Design Tokens Community Group -

Request to remove/deprecate Composition Tokens -

Tokens Studio Plugin GitHub -

Composition Tokens On Text Don't Theme Switch After Closing and Reopening the Plugin

Blank composition properties causing the fill property to not be applied to Figma layer

Deprecate Composition Tokens and replace with a 'template' feature.

See the W3C DTCG Spec 9.0 Composite types for more details
→ If you love Composition Tokens and want to make your voice heard, we've set up a forum in Featurebase where you can leave your comments!
in this GitHub Issue.
SD-Transforms Read-Me Doc, Using the preprocessor
SD-Transforms Read-Me Doc, Using Expand
Read Me
Read Me
W3C Draft
9.0 Composite Types
Github #2800
Open issues for Token Type Composition
#2881
#1943
→ Request
Creating a new Composition Token in the Tokens Studio Plugin for Figma.
Page cover image

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.

Style Dictionary
@Tokens-studio/sd-transforms

🐞 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

community Slack
submit it on our feedback tool

💌 Visit to contribute or subscribe to updates.

https://feedback.tokens.studio/