Matching styles in Figma

Styles in Figma

Figma’s styles (aka Design Tokens) enable designers to reuse colors, text and other effects on design objects.

Learn more about styles in Figma’s Help Center.

Matching

If styles are already present in the Figma file, story.to.design will use any matching styles automatically, instead of hardcoded colors or text styles.

This process is only done when importing a component. If substantial modifications to styles have been made, it will required a “Re-process” in order to re-match the styles.

Styles supported

story.to.design currently only matches the following styles:

• ✅ Colors
• ✅ Text
• ❌ Effects
• ❌ Layouts

Compatibility with Tokens Studio

story.to.design can only match Figma styles and doesn’t match “virtual” Tokens defined in Tokens Studio.

As Tokens Studio’s data model is open, it’s something we might consider releasing in the future, if there’s enough user demand.