
✏️ 介绍
这是一款用于在 Figma Variables 和 CSS Variables 之间进行导入、导出和转换的插件。它可以把本地变量整理成 CSS 变量格式,也可以把已有的 CSS 变量重新导入 Figma,适合设计系统、Design Token 管理以及设计与前端之间的变量同步。
🔨 功能
1. 将 Figma 本地 Variables 导出为 CSS Variables 格式
2. 按 Collection 和 Mode 自动整理,并生成对应的 `:root` 变量分组
3. 支持一次导出全部本地变量
4. 支持 Cherry Pick,只选择两个 Collection 进行导出,例如 Primitive 和 Semantic
5. 可通过表格方式浏览所有本地变量和 Collection
6. 支持直接粘贴 CSS Variables,并转换为 Figma Variables
7. 支持拖拽上传 CSS 文件,自动生成对应的 Figma Variables
8. 导入时支持变量 Alias,方便保留已有的 Token 引用关系
.png)
✏️ 介绍
Interplay 是一款把真实代码组件和 Design Token 引入 Figma 的设计系统插件。它可以连接设计系统代码仓库,让设计师直接在 Figma 中使用生产环境里的组件和 Token,并保持设计稿与代码同步,适合设计系统、组件库和设计开发协作场景。
🔨 功能
1. 导入设计系统代码仓库,并在 Figma 中浏览和使用真实代码组件
2. 将代码组件直接拖入画布,并自动生成对应的 Figma Component
3. Figma 组件会持续关联原始代码组件,减少设计与生产代码不一致的问题
4. 可直接编辑组件内容以及各种 Code Component 属性
5. 支持在画布中直接修改文字,相关代码属性会自动同步更新
6. 支持直接在 Figma 画布中调整组件尺寸,并重新同步代码布局结果
7. 可在 Figma 中直接使用圆角、Padding、Gap 等 Design Token
8. 支持将颜色、阴影、字体等 Token 转换成 Figma Styles
9. 支持通过 CLI 和 Design System Manager 接入团队自己的设计系统
10. 内置部分开源组件库,可直接体验和测试 Interplay 的工作方式
.png)
✏️ 介绍
这是一款可以把 Figma 设计稿直接转换为前端代码或移动端代码的插件。它会尽量保留原始布局和视觉细节,并自动生成响应式页面代码,适合设计师快速验证页面,也适合开发者减少重复还原设计稿的工作。
🔨 功能
1. 将 Figma 布局转换为响应式网页代码
2. 支持 HTML、Tailwind、React JSX、Svelte、styled-components
3. 支持生成 Flutter 和 SwiftUI 移动端代码
4. 自动优化布局结构,并尽量保持与原设计一致
5. 支持根据项目需求选择不同开发框架
6. 所有转换都在本地设备完成,不上传设计数据
7. 完全免费,无内购
8. 开源,可查看和参与社区维护
9. 可离线使用,不收集用户数据、Cookie 或追踪信息