playbooks

home / skills / openclaw / skills / figma-sync

figma-sync skill

/skills/kristinadarroch/figma-sync

This skill reads Figma files, extracts design tokens, generates React Native Expo TS or Web React + Tailwind code, and diffs patches.

npx playbooks add skill openclaw/skills --skill figma-sync

Review the files below or copy the command above to add this skill to your agents.

Files (9)
SKILL.md
1.8 KB
---
name: figma-sync
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"
---

# figma-sync

Bidirectional Figma ↔ Code synchronization skill.

## Setup

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

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

## Commands

### Pull (Read + Generate Code)

```bash
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)

```bash
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

```bash
python3 scripts/figma_diff.py --file-key <KEY> --local-model designModel.json
```

Outputs changes and a patchSpec to sync.

### Preview

```bash
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](references/design-spec-schema.json)
- [API Guide](references/api-guide.md)

Overview

This skill synchronizes Figma files with local code and design models, enabling bidirectional updates between Figma and generated React/React Native projects. It extracts design tokens and component structure, generates TypeScript code for RN-Expo or Web React + Tailwind, and can write minimal patches back to Figma. The tool supports dry-run previews, diffs, and respects Figma rate limits with caching and backoff.

How this skill works

The skill reads a Figma file using a personal access token and builds a structured designModel and tokens.json. It generates a codePlan and source files for the selected platform (rn-expo or web-react), and can compute diffs between the local model and the live Figma file to produce a minimal patchSpec. Push operations are dry-run by default and require an explicit execute flag to apply changes back to Figma. Caching, ETag checks, and exponential backoff reduce API usage and collisions.

When to use it

  • When you need consistent design tokens and component code derived from a Figma file.
  • When onboarding a design system into a React Native Expo or React + Tailwind project.
  • When you want to preview or review changes before applying them to Figma (dry-run).
  • When you must synchronize incremental local edits back to Figma with minimal patches.
  • When auditing or backing up multiple versions of Figma design state into local archives.

Best practices

  • Set FIGMA_TOKEN as an environment variable and keep it scoped to your account.
  • Run pull to generate designModel.json and tokens.json before making local edits.
  • Use diff to produce patchSpec and validate with preview before executing push.
  • Limit node-ids when pulling to reduce API calls and accelerate iteration.
  • Store the .figma-cache directory in CI-friendly storage or ignore it in VCS as needed.

Example use cases

  • Generate RN-Expo TypeScript components and design tokens from a Figma file for a mobile app scaffold.
  • Extract tokens and Tailwind-based components to integrate a design system into a web repo.
  • Create a patchSpec via diff to update color tokens in Figma after token refactoring locally.
  • Preview a batch of UI adjustments against a live Figma file without applying changes.
  • Archive snapshots of a Figma file by exporting designModel.json and tokens.json for backups.

FAQ

How do I authorize access to Figma?

Export a personal access token from Figma and set FIGMA_TOKEN in your environment before running commands.

Are pushes destructive?

Pushes are dry-run by default; pass --execute to apply the generated patchSpec to Figma.

Which platforms are supported?

Supported targets are rn-expo (React Native + Expo + TypeScript) and web-react (React + Tailwind CSS).