首页 › 龙虾技能列表 › Figma Sync — 技能工具

Figma Sync — 技能工具

v1.0.0

Read Figma files, extract design tokens, generate React Native Expo TS or Web React + Tailwind code, write back to Figma, and diff local models against Figma for minimal patches. Triggers: "pull figma", "sync figma", "figma to code", "push to figma", "diff figma", "extract design tokens", "generate from figma", "preview figma changes"

0· 1,330·0 当前·0 累计
by @kristinadarroch·MIT-0
下载技能包
License
MIT-0
最后更新
2026/3/1
安全扫描
VirusTotal
无害
查看报告
OpenClaw
可疑
high confidence
The skill appears to implement a legitimate Figma-to-code sync, but its manifest/metadata omits required credentials and dependencies and the package is delivered as scripts with no install/dependency declaration — these mismatches merit caution before installing.
评估建议
This skill's code looks coherent for syncing Figma ↔ code, but there are important mismatches you should address before use: 1) The scripts require you to set FIGMA_TOKEN (a personal access token) but the skill metadata does not declare this — assume you must provide that secret. 2) The package has no install/dependency spec: it requires python3 and the 'requests' library; run it in a controlled environment (virtualenv or container) and inspect the scripts yourself. 3) The tool writes caches and...
详细分析 ▾
⚠ 用途与能力
The code and SKILL.md align with the stated purpose (reading Figma, extracting tokens, generating code, producing plugin-compatible patch specs). However the registry metadata claims no required env vars or binaries while the runtime clearly needs a FIGMA_TOKEN and Python + requests; that mismatch is incoherent and should be fixed by the author. Network access to api.figma.com is necessary and expected for the stated purpose.
✓ 指令范围
SKILL.md and the scripts confine actions to Figma API calls, local caching (.figma-cache/), and writing output files (out/, pluginSpec.json, patchSpec.json, etc.). The scripts do not reference unrelated system paths, other credentials, or external endpoints beyond api.figma.com. They also correctly note that node mutations require a companion Figma plugin.
⚠ 安装机制
There is no install spec, but the skill ships multiple Python scripts that import 'requests' and expect python3. The registry declared no required binaries. That is inconsistent: the skill will likely fail unless the runtime has Python 3 and the 'requests' package available. Lack of a packaged/install step or dependency declaration increases friction and risk (user may run unvetted scripts).
⚠ 凭证需求
The runtime requires a Figma token (FIGMA_TOKEN) — used by get_token() and api_get() — which is appropriate for the purpose. However the skill metadata did not declare any required env vars or a primary credential. The omission is an information gap: users won't be warned that a secret token is needed nor that it will be used to call Figma. The code does not request unrelated credentials.
✓ 持久化与权限
The skill does not request permanent/always-on inclusion and does not modify other skills or system-wide settings. It writes cache and output files in the working directory (expected). Autonomous invocation (model invocation enabled) is the platform default and not by itself a red flag here.
安全有层次，运行前请审查代码。

License

MIT-0

可自由使用、修改和再分发，无需署名。

运行时依赖

无特殊依赖

版本

latestv1.0.02026/2/9

Initial release: Figma → React Native Expo TS / Web React + Tailwind code generation. Recursive node translation, auto-layout → flexbox, image export, design token extraction, diff support.

● 无害

安装命令 点击复制

官方npx clawhub@latest install figma-sync
镜像加速npx clawhub@latest install figma-sync --registry https://cn.clawhub-mirror.com

技能文档

Bidirectional Figma ↔ Code synchronization skill.

Setup

export FIGMA_TOKEN="your-personal-access-token"

Get a token at https://www.figma.com/developers/api#access-tokens

Commands

Pull (Read + Generate Code)

python3 scripts/figma_pull.py --file-key  --platform rn-expo --output-dir ./out
python3 scripts/figma_pull.py --file-key  --node-ids 1:2,3:4 --platform web-react --output-dir ./out

Outputs: designModel.json, tokens.json, codePlan.json, and generated component files.

Push (Write Back)

python3 scripts/figma_push.py --file-key  --patch-spec patch.json
python3 scripts/figma_push.py --file-key  --patch-spec patch.json --execute  # actually apply

Dry-run by default. Pass --execute to apply changes.

Diff

python3 scripts/figma_diff.py --file-key  --local-model designModel.json

Outputs changes and a patchSpec to sync.

Preview

python3 scripts/figma_preview.py --file-key  --operations ops.json

Shows what would change without touching anything.

Platforms

  • rn-expo: React Native + Expo + TypeScript (primary)
  • web-react: React + Tailwind CSS (secondary)

Rate Limits

Uses exponential backoff, ETag caching, and respects Figma's rate limits (~30 req/min). Cache stored in .figma-cache/ directory.

References

数据来源：ClawHub ↗ · 中文优化：龙虾技能库
OpenClaw 技能定制 / 插件定制 / 私有工作流定制

免费技能或插件可能存在安全风险，如需更匹配、更安全的方案，建议联系付费定制

了解定制服务