Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Developer Tools
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"
skill openclawclawhub Free
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 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md, references/api-guide.md, references/design-spec-schema.json, scripts/figma_common.py, scripts/figma_diff.py, scripts/figma_preview.py
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- kristinadarroch
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
figma-sync
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
Pull (Read + Generate Code)
python3 scripts/figma_pull.py --file-key <KEY> --platform rn-expo --output-dir ./out python3 scripts/figma_pull.py --file-key <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 <KEY> --patch-spec patch.json python3 scripts/figma_push.py --file-key <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 <KEY> --local-model designModel.json Outputs changes and a patchSpec to sync.
Preview
python3 scripts/figma_preview.py --file-key <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
DesignSpec Schema API Guide
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
3 Scripts2 Docs1 Config
- SKILL.md
- references/api-guide.md
- scripts/figma_common.py
- scripts/figma_diff.py
- scripts/figma_preview.py
- references/design-spec-schema.json