Syncfusion® Design Tokens

About this plugin

Syncfusion® Design Tokens: The Premier Figma Plugin for Seamless Theme Generation

The Syncfusion® Design Tokens plugin offers a professional and efficient solution for translating style changes made in Figma into custom Syncfusion® themes, ready to be applied in your applications. This tool eliminates the need for manual style transfers, streamlining the design-to-development workflow.

Key Features:

1. Custom Theme Creation: Tailor Syncfusion® component styles in Figma to align with your unique brand identity.
2. Effortless Token Export: Export design tokens directly from Figma with ease.
3. Seamless Integration: Utilize the exported tokens to create custom themes in Theme Studio and implement them in your applications.

How It Works:

This streamlined process involves three simple steps:

1.Customize Your Theme

Modify the styles of Syncfusion® components within Figma to reflect your brand’s identity and design requirements.

2.Export Design Tokens

Leverage the Syncfusion® Design Tokens plugin to export your custom design tokens. The plugin generates two essential files:

1. css-variables.css: This file contains CSS variables for both light and dark themes, derived directly from your Figma designs. Import it into your application alongside the component styles to implement your custom designs. For detailed usage, refer to the CSS Variables Documentation.
2. -tokens.json: This JSON file (e.g., material3-tokens.json) includes style variables and values compatible with Theme Studio for further customization.

3. Tokens to Theme Files

This <theme-name>-tokens.json file, prefixed with the corresponding theme name, can be imported into Theme Studio for further customization. After processing in Theme Studio, you can download the updated styles file and integrate it into your application, bringing your custom themes to life.

Benefits:

1. Efficiency: Minimize manual tasks and reduce errors by automating the design-to-development process.
2. Consistency: Ensure a uniform appearance across your applications by aligning design and development seamlessly.
3. Scalability: Easily adapt and reuse custom themes across multiple projects.

With the Syncfusion® Design Tokens plugin, you can bridge the gap between design and development, creating cohesive and visually stunning user experiences with ease.