
Supa Design Tokens
设计系统

✏️ 介绍
Supa Design Tokens 是一款用于在 Figma 中创建、管理和导出 Design Token 的插件。它可以把颜色、字体、阴影、间距、圆角、断点等设计规范快速生成成 Figma Variables 和 Styles,并支持导出给开发使用,适合搭建设计系统和统一设计规范。
🔨 功能
1. 支持生成 Color、Typography、Effects、Dimensions、Layout 等多类 Design Token 2. 可自动生成完整颜色体系,支持 P3、OKLCH、亮度、透明度和对比度控制 3. 支持批量生成字体层级,包括 Heading、Body 和自定义 Text Style 4. 可设置字体、字号、字重、行高、字间距和命名规则 5. 支持生成阴影、模糊、Spacing、Size、Border Radius 等 Token 6. 支持 Breakpoint 和 Container 等响应式布局 Token 7. 内置 Tailwind、Material UI 等常见设计系统 Token,可快速复用 8. 可一键同步为 Figma Variables 和 Styles 9. 支持批量管理大量 Token,并提供搜索能力 10. 支持导入现有 Figma Token 或符合 DTCG 规范的 JSON 11. 支持导出 CSS、Tailwind、SCSS、JSON 等开发格式 12. 可在 Figma 中自动生成卡片、表格和 Tile 形式的 Token 文档 13. 支持查看颜色可访问性和对比度信息 14. 支持直接编辑 Token Code,方便做更细致的自定义 15. 适合设计系统、团队协作和设计开发交付场景
.png)
.png)
.png)
.png)
.png)
.png)