Design tokens are design decisions, represented as data, that ensure systematically unified and cohesive product experiences.Spectrum, Adobe’s Design System
Getting Started with useDesignTokens

To get started with useDesignTokens, you'll first need to create an account and sign in. From there, you can create a new project for your design tokens. Once your project is set up, you'll have a few options for how to initially set up your tokens system.

  • Manually set up your tokens system: This option allows you to start from scratch and manually create your design tokens, giving you complete control over the process.

  • Import from a JSON file: If you have existing design tokens in W3C Design Tokens Community Group format, you can import them into useDesignTokens.

  • Import from Figma styles: If you're using the Figma plugin, you can easily import existing Figma styles as design tokens. Figma only supports color, text style, shadow and grid layout token types at the moment.

  • If you already have design tokens set up in your Figma document by Tokens Studio plugin, then you can import them into useDesignTokens as well.