Dorion Design Tokens (Beta)
Generate structured design tokens from Figma with precision.
Plugin Preview
About this plugin
Dorion Design Tokens is a modular, intelligent plugin that converts Figma’s native variables and styles into reusable design tokens for your Design System. It also includes a color ramp generator with advanced customization controls.
Designed for teams seeking visual consistency, scalability, and smooth integration between design and development.
Today, Dorion exports tokens to CSS and JSON, soon it will also support for Dart, always respecting hierarchies, modes, and visual structures.
Key features:
- Extract and export Figma native variables
- Extract and export Figma native styles
- Color ramp generator
- Direct export to CSS
- Direct export to JSON
- Planned compatibility Dart
- Modular, intuitive, high-performance interface
- Support for modes and nested tokens
Perfect for projects that value standardization, speed, and governance at scale.
Plugin Details
| Version | 8 |
|---|---|
| Created | July 28, 2025 |
| Last Updated | October 31, 2025 |
| Category | Import & export plugins |
| Creator | Elias Cezario |
| Stats | 27 installs, 18 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Network Access:
The Dorion plugin was created to facilitate the handoff of Figma Variables and Figma Styles. The plugin connects only to Figma's recommended APIs and follows Figma's best plugin development practices.
- Editor Types:figma
- Allowed Domains:
- https://cdn.jsdelivr.net/npm/prismjs/components/prism-css.min.js
- https://cdn.jsdelivr.net/npm/prismjs/components/prism-json.min.js
- https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.css
- https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js
- https://cdn.jsdelivr.net/npm/prismjs/prism.js
- https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css
More Like This
Discover other plugins in the Import & export plugins category.
html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Convert any website into fully editable Figma designs
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Figma to HTML
Convert Figma design to HTML