Interplay

作者 Michael Fitzgerald

定价

免费

类别

⌨️ 开发

推荐

否

✏️ 介绍 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 的工作方式

同分类插件

查看⌨️ 开发全部

CSS variables import/export丨Figma 变量复制到 CSS

作者 Luis Ouriach

✏️ 介绍这是一款用于在 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 引用关系

Figma to Code (HTML, Tailwind, Flutter, SwiftUI)丨Figma转代码

作者 Bernardo Ferrari

✏️ 介绍这是一款可以把 Figma 设计稿直接转换为前端代码或移动端代码的插件。它会尽量保留原始布局和视觉细节，并自动生成响应式页面代码，适合设计师快速验证页面，也适合开发者减少重复还原设计稿的工作。 🔨 功能 1. 将 Figma 布局转换为响应式网页代码 2. 支持 HTML、Tailwind、React JSX、Svelte、styled-components 3. 支持生成 Flutter 和 SwiftUI 移动端代码 4. 自动优化布局结构，并尽量保持与原设计一致 5. 支持根据项目需求选择不同开发框架 6. 所有转换都在本地设备完成，不上传设计数据 7. 完全免费，无内购 8. 开源，可查看和参与社区维护 9. 可离线使用，不收集用户数据、Cookie 或追踪信息