skills.rest
vikisingh23
vikisingh23COMMUNITY
Explore all skills by this author →
GitHub

design-sync

Sync DESIGN.md tokens with the Figma design library.

4|Updated Apr 28, 2026
Search Tags:#documentation#markdown#figma#diff#design-system#design-tokens#design-sync
One-click install
npx skills add https://github.com/vikisingh23/neuraforge-ai --skill design-sync-vikisingh23
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-sync
Source: https://github.com/vikisingh23/neuraforge-ai/tree/main/skills/design-sync
Command: npx skills add https://github.com/vikisingh23/neuraforge-ai --skill design-sync-vikisingh23

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Keep DESIGN.md in sync with the Figma design library by automatically extracting tokens, showing diffs, and updating documentation to reflect the latest design system.

Core Features & Use Cases

  • Sync DESIGN.md with the connected Figma library to update color, typography, spacing, elevation, and component tokens.
  • Update only colors from Figma for targeted refreshes without rewriting the entire file.
  • View diffs since the last sync to review changes before applying updates.
  • Rebuild DESIGN.md from a Figma file URL to regenerate the documentation from scratch.

Quick Start

Run the design-sync command to synchronize DESIGN.md with the Figma design library and update all tokens.

Frequently Asked Questions about design-sync

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

FAQPage Schema
How do I keep Figma design tokens in sync with markdown documentation?▼

To keep Figma design tokens in sync with markdown documentation, you can automatically extract colors, typography, spacing, and elevation tokens from your Figma library and update your DESIGN.md file to prevent token drift.

Can I preview token changes before updating my design system documentation?▼

Yes, you can preview token changes before updating design system documentation by viewing a diff since the last sync, allowing you to review modifications before applying updates to the markdown file.

How do I update only colors in DESIGN.md from Figma without rewriting the entire file?▼

You can update only colors in DESIGN.md from Figma by running a targeted color refresh, which extracts color tokens and applies them without rewriting typography, spacing, or component properties.

What is the best way to regenerate design system markdown from a Figma file URL?▼

The best way to regenerate design system markdown from a Figma file URL is to rebuild the documentation from scratch, mapping component properties, shadows, and typography scales directly into the DESIGN.md structure.

How does design token drift happen between Figma and developer documentation?▼

Design token drift happens when Figma library updates are not reflected in developer documentation, causing mismatched colors, typography, and spacing values that automated token synchronization resolves.

Does design token synchronization support component properties and elevation tokens?▼

Yes, design token synchronization supports component properties and elevation tokens, mapping Figma library updates directly to tokens.components and tokens.elevation structures within your markdown documentation.

Related Skills

Explore More Design & Creative Skills→
NagyViktNagyVikt
2

figma-generate-design

Generate and synchronize Figma screens from source code UI structures.

Community
Advanced
rahulgupta2018rahulgupta2018

adk-unit-guide

Generate structured Markdown guides for code units from source files and tests.

Community
Intermediate
auldsyababuaauldsyababua
6

markdown-validation

Validate Markdown files for syntax, links, and formatting standards.

Community
Advanced
Sir-chawakornSir-chawakorn
9

design-token-system

Architect W3C-DTCG design-token systems with Style Dictionary for multi-platform exports.

Community
Advanced