Use Design Tokens

About this plugin

⚠️ Available only to early-access users during beta period.

useDesignTokens is a powerful tool for managing your design tokens in a more organized and consistent way. With its easy-to-use interface and powerful features, it allows you to create, organize, and customize your design tokens with ease.

• Multi-branding: manage design tokens for multiple brands within a single project.

• Contextual overrides (themes): define contextual overrides for color modes, high contrast modes, density, localization, responsiveness, and more.

• Token tiers and alias tokens: You can create token tiers, allowing you to split your design tokens into different levels of hierarchy. You can also create alias tokens that reference tokens in other tiers, allowing you to keep your tokens organized and consistent.

• Alias transforms let you apply transforming rules to the referenced token's value.

• Composite tokens: Create custom token types by grouping together other tokens

• Tree structure: organize your design tokens in a tree-like structure, making it easy to navigate and find the tokens you need.

• Page and frame contexts: apply different contexts for each page or each frame in a page, allowing for greater flexibility and customization.

• Import and export: useDesignTokens supports the W3C design tokens specification and allows you import and export your tokens in JSON format. 

• Sync with Figma native styles, GitHub and Gitlab repositories.

• Team collaboration: everyone in the team can work simultaneously on the same tokens system and see everyone's changes instantly.

Visit usedesigntokens.com for more information.