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

作者 Luis Ouriach

定价

免费

类别

⌨️ 开发

推荐

否

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

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

同分类插件

查看⌨️ 开发全部

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 的工作方式

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 或追踪信息