Import Design Tokens from Project Files Using Studio CLI

Use the Studio CLI to import design tokens from your local project files into your Studio project. This allows content editors to work with your custom design components in the Studio canvas. You can also control the design options editors can access by choosing an appropriate access level during the import process.

Before you begin, ensure you have the following:

• Contentstack account
• Node.js installed on your local machine
• Contentstack CLI package
• Access to Studio for your organization.

To import design tokens from your project file to the Studio project, perform the following steps:

1. Open the project file and run the following command in your terminal:
   csdx studio:design-token:add

2. The Studio CLI prompts you to include Studio’s default design tokens. Choose one of the following options:
   • Enter Y to include Studio’s default design tokens along with the tokens in your project files.
   • Enter N to import only the tokens defined in your project files.
3. Select the level of design token access for content editors. The available options are:
   • dynamic: Allows content editors to use only the design options that come from the entries linked to the Studio project. They cannot access or apply custom colors or other styling available in the Studio editing canvas.
   • tokens: Includes access to the dynamic components and the custom design tokens added through the CLI.
   • arbitrary: Extends access beyond dynamic and CLI-added tokens, allowing content editors to use any design properties available in the Studio canvas. This includes selecting custom colors, styles, or visual adjustments.
4. After you select an access level, the Studio CLI scans your project for design token sources such as JavaScript/TypeScript files and CSS files (such as  global.css). It extracts tokens defined using CSS custom properties or JSON/JS structures and generates a register-design-tokens.ts file in your project directory.

   

5. Import the generated file to your project’s main file (for example main.tsx, index.tsx).

   

Once imported, the design tokens become available inside the Studio canvas, ensuring your components use the same design definitions extracted from your project.