
✏️ 介绍
Figmentation 是一款用于自动生成 Figma 设计文档和 Token 标注的插件。它可以从组件中自动提取颜色、字体、间距、边框和效果等设计 Token,并在组件旁边生成结构化说明,适合设计系统维护、开发交付和 UI 组件文档整理。
🔨 功能
1. 自动提取组件中绑定的 Design Token
2. 支持颜色、字体、间距、边框、阴影、模糊等多种属性
3. 可识别背景色、文字颜色和描边颜色
4. 支持提取字号、字体、字重、行高和字间距
5. 支持提取 Padding、Gap、圆角和 Stroke Width
6. 可自动在组件旁生成清晰的 Annotation 标注区域
7. 支持 camelCase、kebab-case 等多种命名方式
8. 优先保留现有 Token 名称,没有名称时可生成备用命名
9. 适合 Design System、组件库和开发 Handoff 场景
10. 可减少重复手动标注和维护设计文档的工作量

✏️ 介绍
这是一款用于检查 Figma 文件中组件使用情况的插件。它可以扫描整个文件,找出哪些组件从未被使用,同时统计每个组件被使用了多少次,适合整理组件库和清理冗余资源。
🔨 功能
1. 扫描整个 Figma 文件中的组件
2. 找出所有未被使用的 Component
3. 统计每个组件的使用次数
4. 帮助识别冗余或废弃组件
5. 适合设计系统维护和组件库清理场景

✏️ 介绍
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. 适合设计系统、团队协作和设计开发交付场景

✏️ 介绍
Component Inventory 是一款用于快速查看和盘点 Figma 组件库的插件。它会自动扫描当前文件中的所有 Component 和 Component Set,并把每个组件生成一个 Instance 集中放到新的页面里,方便查找组件和检查设计系统。
🔨 功能
1. 自动创建一个新的 Component Inventory 页面
2. 扫描当前 Figma 文件中的所有页面
3. 查找所有 Component 和 Component Set
4. 为每个组件生成一个 Instance 并集中展示
5. 方便快速浏览和查找组件
6. 适合做 Design System 盘点和组件库审查
7. 支持设置扫描深度,只包含指定层级内的组件
8. 可通过 Figma Quick Actions 快速调用并设置搜索深度

✏️ 介绍
PaletteFlow 是一款用于在 Figma 中快速查找和管理配色方案的插件。它提供 100,000+ 经过整理的专业色板,可以按氛围、风格或颜色浏览,并一键添加为 Figma Local Variables,适合 UI、品牌、网页和设计系统配色。
🔨 功能
1. 提供 100,000+ 专业整理的配色色板
2. 支持按 Mood、Style 或 Color 浏览和筛选
3. 可一键把整套色板添加为 Figma Local Variable Collection
4. 方便后续统一管理和更新设计系统中的颜色
5. 支持从起始颜色生成互补色、邻近色等配色方案
6. 可从图片中提取颜色,快速生成对应色板
7. 支持保存和管理自己的配色方案
8. 适合 UI/UX、品牌、Web 和产品设计中的配色探索
9. 有助于保持不同页面、组件和产品触点之间的颜色一致性
10. 适合快速建立或补充 Design System 的颜色体系
.png)
✏️ 介绍
UI Elements 是一款用于在 Figma 中快速获取现成 UI 资源的插件。它整合了大量页面 Section、组件和开源图标,可以直接拖拽到设计稿中使用,适合网页、App、后台和其他数字产品的快速搭建。
🔨 功能
1. 提供 130+ 现成页面 Section
2. 提供 6,800+ UI Components
3. 提供 160,000+ 开源 Icons
4. 支持直接 Drag & Drop 到 Figma 画布
5. 组件覆盖 Navigation、Form、Button、Content Block、Date Picker、Dialog 等常见类型
6. Section 覆盖 Homepage、About、Contact、Services 等常见页面模块
7. 支持搜索和自定义不同 UI 元素
8. 提供 Animated Titles,可生成动态标题
9. 动态标题支持导入为 MP4、GIF
10. 支持下载 Lottie 文件用于 Web
11. 适合快速搭建网站、App、营销页面和产品原型
.png)
✏️ 介绍
这是一款用于把现有 Figma Typography Styles 转换成 Variables 的插件。它可以读取当前文件中的文字样式,并自动生成对应的字体相关变量,适合设计系统升级和 Typography Token 管理。
🔨 功能
1. 读取现有的 Figma Text Styles
2. 自动生成 Font Family 变量
3. 自动生成 Font Weight 变量
4. 自动生成 Font Size 变量
5. 自动生成 Line Height 变量
6. 自动生成 Paragraph Spacing 变量
7. 自动生成 Letter Spacing 变量
8. 自动生成 Paragraph Indent 变量
9. 适合把现有文字样式整理成更系统化的 Typography Variables
.png)
✏️ 介绍
这是一款用于快速搭建设计系统的 Figma 插件,重点帮助你自动生成颜色体系、Button Components,以及对应的前端代码。它可以根据基础颜色和按钮规范,一键生成完整的 Variables、Styles、Variants 和 React / CSS 代码,适合设计系统搭建和设计开发协作。
🔨 功能
1. 支持从预设色板选择颜色,也可匹配现有设计系统颜色
2. 可自定义按钮圆角、字体、尺寸和样式
3. 支持自适应尺寸、Padding 和灵活宽高
4. 提供按钮实时预览,生成前可先检查效果
5. 一键生成 48 种 Button Variants
6. 支持 Small、Medium、Large 三种尺寸
7. 支持 Primary、Secondary、Text、Elevated 四种按钮类型
8. 支持 Enabled、Hovered、Pressed、Disabled 四种状态
9. 所有按钮默认支持 Auto Layout
10. 自动将 Color Variables / Styles 绑定到按钮组件
11. 支持一键导出 CSS 和 React 代码
12. 支持 WCAG Color Contrast 对比度检查
13. 可根据一个 Base Color 自动生成完整颜色设计系统
14. 支持生成类似 Tailwind CSS 的颜色层级和 Variables
15. 支持 Light / Dark Mode 配色体系
16. 已生成的 Design System 可重新选中并继续编辑
17. 插件界面支持 Light / Dark Mode
.png)
✏️ 介绍
这是一款用于把现有 Figma Color Styles 快速转换成 Variables 的插件。它可以减少手动重建颜色变量的工作,并支持创建 Collection、Modes,以及把原有 Styles 重新关联到生成的 Variables,适合设计系统从 Styles 迁移到 Variables 的场景。
🔨 功能
1. 支持将现有 Color Styles 一键转换为 Figma Variables
2. 可自定义新建 Variable Collection 的名称
3. 支持使用第一层分组自动创建 Modes
4. 可将原有 Color Styles 重新关联到新生成的 Variables
5. 支持 Solid Color 和带透明度的 Color Styles
6. 适合设计系统从 Styles 迁移到 Variables
7. 可减少手动创建颜色 Token 和重新绑定样式的工作
8. 支持后续继续使用 Alias、Modes 等 Variables 能力
9. 如果需要把 Color Styles 拆分到多个 Modes,文件需要位于支持该能力的付费 Team / Organization 中
.png)
✏️ 介绍
这是一款用于在不同 Figma 文件之间迁移和同步 Variables 的插件。它可以把一个文件中的 Variable Collection 导出成 JSON,再导入到另一个文件中,适合设计系统迁移、Library 合并,以及把 Community 文件中的 Variables 更新到自己的设计系统里。
🔨 功能
1. 支持 Color、String、Number、Boolean 等全部 Variable 类型
2. 支持导出和导入 Variable Collection
3. 通过 JSON 文件在不同 Figma 文件之间迁移 Variables
4. 支持同一 Collection 内的 Value Alias
5. 支持保留 Description、Scope、Code Syntax 等 Variable 信息
6. 支持 Multiple Modes
7. 如果目标文件存在同名 Collection,可选择直接更新而不是新建重复内容
8. 更新时会根据 Variable 和 Mode 名称自动匹配
9. 不存在的 Variable 或 Mode 会自动补充创建
10. 适合迁移设计系统 Library 或同步 Community 资源中的 Variables
11. 跨 Collection 的 Alias 目前会被断开,并替换成对应的原始值
12. 修改 Collection 后通常需要重新打开插件或刷新数据才能同步最新状态
.png)
✏️ 介绍
这是一款用于在 Figma 中快速生成配色色板的插件。适合做 UI 配色、品牌色探索和设计系统颜色方案整理。
🔨 功能
1. 支持直接在 Figma 中生成 Color Palette
2. 适合快速探索不同颜色组合
3. 可用于 UI、品牌和视觉设计配色
4. 适合建立或补充 Design System 的颜色体系
.png)
✏️ 介绍
这是一款用于自动整理 Figma Component Set / Variants 排列结构的插件。它可以根据属性和值,把不同 Variant 自动按行或列排布,减少手动整理组件集的工作,适合设计系统和组件库维护。
🔨 功能
1. 支持自动整理 Component Set 中的 Variant 布局
2. 可为不同 Property 设置横向或纵向排列
3. 支持调整同一 Property 下各个 Value 的排列顺序
4. 可根据已有设置快速重新应用布局
5. Auto Mode 可直接复用上一次配置,无需打开插件界面
6. 第一次使用时会自动应用基础布局规则
7. 适合整理复杂组件集和设计系统中的 Variant 结构
8. Property 的顺序仍需在 Figma 右侧面板中调整
9. 对旋转对象的处理有限,插件会将旋转角度重置为 0