
✏️ 介绍
Typography Engine 是一款用于在 Figma 中搭建完整 Typography System 的插件。它可以从统一的配置源生成字号层级、语义化 Text Styles 和 Typography Tokens,并同步到 Figma Variables,再导出为多种开发格式,适合设计系统搭建和设计开发协作。
🔨 功能
1. 支持自动生成 Typography Scale
2. 支持创建 Semantic Text Styles
3. 可统一管理 Typography 命名规则
4. 支持 Responsive Typography Scaling
5. 可实时预览和检查不同文字层级
6. 支持将 Typography Token 同步到 Figma Variables
7. 以统一配置作为 Single Source of Truth,方便持续维护字体体系
8. 支持导出 CSS、SCSS 和 LESS
9. 支持导出 JSON 和 TypeScript
10. 支持导出 SwiftUI 和 Android Compose
11. 支持导出 LVGL
12. 支持标准 Design Tokens 格式
13. 适合 Web、iOS、Android 等多平台设计系统
14. 可用于统一设计端和开发端的 Typography Token

✏️介绍:
AutoSpec 是一款可以自动生成设计标注的 Figma 插件。它会读取你选中的图层、Frame 或组件,并在设计旁边自动生成结构化的说明文档,一键把组件整理成清晰、可编辑的设计规范,方便设计交付和开发查看。
🔨 功能:
1.一键将 Frame 和组件转换为结构化标注文档
2.自动为图层编号,并生成高亮覆盖和完整图例
3.自动展示填充、描边、字体、尺寸、间距、圆角等信息
4.支持识别并展示 Figma Variables 和 Styles
5.文档会直接生成在设计旁边,方便查看和编辑
6.自动整理成清晰易读的 Spec Frame,提升设计交付效率
7.目前支持 Anatomy,可自动拆解组件结构并展示对应属性
8.后续将支持 Measure、Properties 和 Property Table,用于尺寸标注、组件属性和开发交付
使用方式也很简单:选中图层或组件 → 选择文档类型 → 点击 Generate,即可自动生成。

✏️ 介绍
这是一款用于把 Figma 样式快速转换成 CSS 自定义变量的插件。你可以选择颜色格式,并决定文字尺寸是否使用 REM,插件会自动整理命名并生成可直接用于前端开发的样式变量。
🔨 功能
1. 将 Figma 颜色样式导出为 CSS Variables
2. 支持 RGBA、HEX、HSLA 三种颜色格式
3. 支持将文字尺寸导出为 REM 单位
4. 可将 Effects 转换为 `box-shadow`
5. 可将模糊效果转换为 CSS `blur`
6. 自动把 Figma 分组命名转换为双短横线格式
7. 自动将空格、camelCase 转换为 kebab-case
8. 自动移除特殊字符,方便直接用于代码
9. 目前只支持纯色,不支持渐变和图片填充
10. 如果一个样式包含多个颜色,只会导出第一个颜色

✏️ 介绍
Specs Classic 是一款用于自动生成 Figma 页面和组件设计规格说明的插件。选中组件、实例或 Frame 后,可以快速整理出对应的 Specs,适合设计交付、组件文档和开发协作。需要注意的是,Specs Classic 已停止维护,官方建议改用 Specs 2。
🔨 功能
1. 自动生成页面和组件的设计规格说明
2. 支持 Component、Instance 和 Frame
3. 适合设计交付、组件文档和开发协作
4. 可减少手动标注和整理规格的工作量
.png)
✏️ 介绍
这是一款用于快速检查 Figma 文字样式的插件。它可以扫描选中的区域,整理其中使用到的所有文字样式,帮助你发现字体、字号等样式差异,更适合做设计规范检查和样式统一。
🔨 功能
1. 支持同时扫描多个选中的图层或区域
2. 一键分析当前选区中使用到的所有文字样式
3. 快速查看不同文字样式的使用情况
4. 点击某个样式即可高亮所有使用该样式的图层
5. 适合检查字体差异、统一文字规范和整理设计稿
.png)
✏️ 介绍
这是一款用于在 Figma 中快速添加 CTA 按钮的插件。可以一键插入现成按钮,并继续调整样式和交互状态,适合网页、落地页和产品界面快速搭建。
🔨 功能
1. 一键添加 Call to Action 按钮
2. 支持自定义按钮样式
3. 可添加箭头等辅助元素
4. 支持切换不同主题
5. 可开启或关闭 Hover 状态
6. 适合快速制作网页、营销页和产品界面的操作按钮