DESIGN/设计资源·UI-KIT
mikaelvesavuori/figmagic
从 Figma 文档一键生成设计 Token、图标和 React 组件，让设计与开发无缝对接。Generate design tokens, export graphics, and extract React components from Figma documents with one CLI command—bridging the gap between design and development.
从 Figma 设计稿里提取设计令牌、导图和生成组件。A CLI tool that turns your Figma designs into design tokens, SVG graphics, and React components, connecting design and development.
怎么装：Install: npm install -g figmagic
02 / 现在的位置02 / Why now
首次发现FIRST SEEN
03 OCT 202603 OCT 2026
增长GROWTH
+0.0%+0.0%
863 → 863 stars · 5 个快照863 → 863 stars · 5 snapshots
状态STATUS
长期未更新Not updated
项目最近一次提交是2025年6月，仍在维护Active project with recent commits (June 2025)
03 / 它能帮你做什么03 / What it helps you do
提取Figma中的设计令牌
导出图形为SVG文件
生成可直接使用的React组件
切换明暗主题的令牌
自定义输出格式和单位
Export colors, spacing, and other tokens as JSON
Convert Figma elements into responsive React components
Generate SVG graphics from design layers
Switch between light and dark color themes
Customize output formats for files and tokens
04 / 安装04 / Install
$ Node 用户的安装方式。The install route for Node users.
两种装法选一个即可 —— 上面那条给命令行用户，下面那条给写代码的用户。Pick one of the two — the first is for command-line users, the second for people writing code.
全局安装：npm install -g figmagicInstall globally with npm install -g figmagic, or add it as a dev dependency with npm install figmagic -D.
05 / 限制与风险05 / Limits and risk
风险不是警告，是可信度的一部分。以下结论只基于文档静态扫描，我们不会执行项目里的任何代码。Risk here is evidence, not an alarm. These findings come from static scanning of the docs; we never execute a project’s code.
限制LIMITS
未知Unknown
静态扫描STATIC SCAN
在 README、SKILL.md 和依赖清单中没有匹配到已知风险模式。No known risk patterns matched in the README, SKILL.md or dependency list.这不等于安全that does not mean it is safe，只能说明文档里没写。 — only that the docs do not mention it.
静态扫描未发现明显风险，但不代表安全。A static scan of the project’s documentation found no known risk patterns, but this does not guarantee complete security.
这里只做静态扫描：读 README、SKILL.md 和依赖清单，不执行代码。没有命中不代表安全。This is static scanning only: we read the README, SKILL.md and dependency list, and never execute code. No findings does not mean safe.
{
"agents": [
{
"agent": "vscode",
"evidence": "readme: …| | `.vscode/` | Visual Studio Code…"
}
],
"apiKey": "r replace **FIGMA_URL** and **FIGMA_TOKEN** in a `.env` file with your own file I",
"docker": null,
"taxonomy": {
"scores": {
"design": 15,
"ai-tools": 0,
"dev-tools": 1,
"indie-web": 0,
"skill-agent": 0,
"productivity": 0
},
"primary": "design",
"secondary": "ui-kit"
},
"localRuntime": null,
"skillMdTotal": 0,
"skillMdErrors": [],
"treeTruncated": false,
"categoryScores": {
"data": 0,
"agent": 0,
"media": 0,
"design": 15,
"browser": 0,
"devtool": 1,
"security": 0,
"marketing": 0,
"productivity": 0
},
"classification": [],
"scannedSources": [
"readme"
],
"skillMdFetched": 0
}