figma-spec-sync

Extracts Figma spec snapshots via REST API and routes structural deltas into alignment plan work items.

1|Updated Mar 18, 2026
One-click install
npx skills add https://github.com/psw7205/skills --skill figma-spec-sync-psw7205
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-spec-sync
Source: https://github.com/psw7205/skills/tree/main/skills/figma-spec-sync
Command: npx skills add https://github.com/psw7205/skills --skill figma-spec-sync-psw7205

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Design specs in Figma change continuously, and teams lose track of which changes the implementation plan has absorbed. This Skill pulls machine-extracted snapshots of a Figma planning file, computes structural deltas (sections, screens, spec descriptions) against the previous version, and routes each change into an existing alignment plan as actionable work items. ## Core Features & Use Cases - Version-gated snapshot pull: Calls the Figma REST API directly (no MCP required) and caches the file version so unchanged files exit after one API round trip. - Structural delta computation: Folds raw git diff noise into readable section/screen/spec-level changes, detecting renames via screen-name overlap and flagging parser drift with a self-check block. - Plan routing with a sync gate: Compares the plan's recorded Figma version against the snapshot version to detect unreflected pulls, then routes each delta to the correct plan section, decision log, or open-questions list. - Use Case: A designer updates the admin console spec in Figma overnight. In the morning you run the sync, see that two sections were renamed and one new domain appeared, and get proposed work items with Figma evidence and code file:line references ready for approval. ## Quick Start Ask the AI to pull the latest Figma snapshot and show what changed since the plan last reflected it.

Frequently Asked Questions about figma-spec-sync

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sync Figma design specs with my implementation plan?▼

Run the figma-sync script with a figma-spec-sync.json config containing your file key and node ID. It pulls a Markdown snapshot via the Figma REST API, then the delta script compares versions and routes changes into your alignment plan as proposed work items.

How to detect what changed in a Figma file programmatically?▼

Use the Figma REST API to fetch the file version and node tree, then diff structural units (sections, screens, spec texts) rather than raw text. The snapshot-delta script folds renames using screen-name overlap scoring so section renames do not appear as delete-plus-add noise.

Does this require Figma MCP or a paid Figma plan?▼

No. The core pull and delta workflow uses only the Figma REST API with a personal access token scoped to file_content:read. Figma MCP is optional for inspecting individual nodes, but Starter and View/Collab seats are limited to six calls per month.

Why does the gate say unreflected pull when the delta shows no changes?▼

Figma increments the file version even when content is byte-identical, so a version mismatch with an empty delta is normal. The only required action is updating the plan's Sync status table version row, which is the gate's reference marker.

What are the limitations of automated Figma spec extraction?▼

The snapshot structurally cannot capture comments, text under 60 characters, ungrouped canvas mockups, frames smaller than 1000x600, and nested section labels. For those cases, inspect the specific node directly in Figma using the node-id links embedded in the snapshot.