figma-syncRead 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"
Install via ClawdBot CLI:
clawdbot install kristinadarroch/figma-syncBidirectional Figma ↔ Code synchronization skill.
export FIGMA_TOKEN="your-personal-access-token"Get a token at https://www.figma.com/developers/api#access-tokens
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 ./outOutputs: designModel.json, tokens.json, codePlan.json, and generated component files.
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 applyDry-run by default. Pass --execute to apply changes.
python3 scripts/figma_diff.py --file-key <KEY> --local-model designModel.jsonOutputs changes and a patchSpec to sync.
python3 scripts/figma_preview.py --file-key <KEY> --operations ops.jsonShows what would change without touching anything.
Uses exponential backoff, ETag caching, and respects Figma's rate limits (~30 req/min).
Cache stored in .figma-cache/ directory.
AI Usage Analysis
Analysis is being generated… refresh in a few seconds.
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Build scalable, themable Tailwind CSS component libraries using CVA for variants, compound components, design tokens, dark mode, and responsive grids.
Create award-winning, memorable websites with advanced animations, creative interactions, and distinctive visual experiences. Use this skill when building sites that need to be exceptional—portfolio sites, agency showcases, product launches, or any project where "wow factor" matters.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.