功能描述

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"

使用说明 (SKILL.md)

figma-sync

Name: Figma Sync
Author: kristinadarroch

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 \x3CKEY> --platform rn-expo --output-dir ./out
python3 scripts/figma_pull.py --file-key \x3CKEY> --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 \x3CKEY> --patch-spec patch.json
python3 scripts/figma_push.py --file-key \x3CKEY> --patch-spec patch.json --execute  # actually apply

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

Diff

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

Outputs changes and a patchSpec to sync.

Preview

python3 scripts/figma_preview.py --file-key \x3CKEY> --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

安全使用建议

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 output files (.figma-cache/, ./out/) and generates a pluginSpec.json intended for a companion Figma plugin — node changes are dry-run by default; actual mutations require loading the spec into a Figma plugin or using the plugin bridge. Recommended actions: verify the author/source (homepage missing), ask the publisher to update metadata to list FIGMA_TOKEN and runtime deps, run the scripts locally in an isolated environment, inspect pluginSpec/patchSpec before using --execute, and use a least-privilege Figma token. If you cannot verify the source, avoid supplying long-lived tokens or run the skill only against non-sensitive test files.

功能分析

Type: OpenClaw Skill Name: figma-sync Version: 1.0.0 The OpenClaw skill 'figma-sync' is designed for bidirectional synchronization with Figma. It requires and reads the `FIGMA_TOKEN` environment variable for authentication with the official Figma API (`https://api.figma.com`), which is a necessary and transparent high-risk capability for its stated purpose. All network requests are directed to Figma, and file system operations are confined to local output and cache directories (`./out`, `.figma-cache`). There is no evidence of data exfiltration to unauthorized endpoints, malicious execution, persistence mechanisms, obfuscation, or prompt injection attempts in `SKILL.md` to subvert the agent's behavior beyond its stated function.

能力评估

⚠ Purpose & Capability

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.

✓ Instruction Scope

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.

⚠ Install Mechanism

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).

⚠ Credentials

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.

✓ Persistence & Privilege

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.

版本历史

v1.0.0

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.

元数据

Slug figma-sync

版本 1.0.0

许可证 —

累计安装 1

当前安装数 1

历史版本数 1

常见问题

Figma Sync 是什么？

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". 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 1448 次。

如何安装 Figma Sync？

在 OpenClaw 或 Claude Code 对话框中运行命令「/install figma-sync」即可一键安装，无需额外配置。

Figma Sync 是免费的吗？

是的，Figma Sync 完全免费（开源免费），可自由下载、安装和使用。

Figma Sync 支持哪些平台？

Figma Sync 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。

谁开发了 Figma Sync？

由 kristinadarroch（@kristinadarroch）开发并维护，当前版本 v1.0.0。

Figma Sync