A build system that transforms design tokens into platform-specific styles for iOS, Android, CSS, JS, and more.
Style Dictionary is a build system that transforms design tokens into platform-specific style code. It solves the problem of maintaining consistent styles across iOS, Android, CSS, JS, and other platforms by allowing teams to define design attributes (like colors and sizes) in a single source and automatically generate the necessary files for each target environment.
Design system teams, product designers, and developers working on multi-platform applications who need to synchronize styles across web, mobile, and other interfaces.
Developers choose Style Dictionary for its extensibility, automation of style consistency, and support for a wide range of output formats, reducing manual errors and speeding up the design-to-development workflow.
A build system for creating cross-platform styles.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Generates style definitions for iOS, Android, CSS, JS, and more from a single token source, as shown in the example outputs for SCSS variables, Android XML, and Objective-C constants.
Allows creating custom transforms and formats to tailor outputs, demonstrated in the 'Extending' section with code for registering new transforms, enabling adaptation to unique project needs.
Supports optional Category/Type/Item hierarchical naming for semantic clarity, making tokens easier to organize and access, as recommended in the Design Tokens section.
Enables organizing tokens across multiple JSON or JS files with deep merging into a unified set, allowing scalable and modular token architecture without manual consolidation.
Requires Node.js and a config-driven build step, adding complexity to development pipelines and slowing down style updates for large token sets, which may not fit all workflows.
Setting up the config.json file with platforms, transforms, and formats can be intricate, especially for teams new to design token systems, with a steep learning curve for optimal use.
While extensible, it lacks out-of-the-box integrations with modern design tools like Figma or frameworks, often requiring custom work for seamless adoption in specific ecosystems.