Description

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"

README (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

Usage Guidance

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.

Capability Analysis

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.

Capability Assessment

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

Version History

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.

Metadata

Slug figma-sync

Version 1.0.0

License —

All-time Installs 1

Active Installs 1

Total Versions 1

Frequently Asked Questions

What is 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". It is an AI Agent Skill for Claude Code / OpenClaw, with 1448 downloads so far.

How do I install Figma Sync?

Run "/install figma-sync" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Figma Sync free?

Yes, Figma Sync is completely free (open-source). You can download, install and use it at no cost.

Which platforms does Figma Sync support?

Figma Sync is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Figma Sync?

It is built and maintained by kristinadarroch (@kristinadarroch); the current version is v1.0.0.

More Skills

Figma Sync