figma-design-md-plugin
OfficialExtract Figma tokens into design docs.
Design & Creative#documentation#design system#figma#design tokens#markdown generator#ai coding agents#typeui
AuthorAradotso
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Teams struggle to keep code and documentation aligned with real design tokens captured in Figma, which leads to inconsistent UI and slow implementation cycles.
Core Features & Use Cases
- Token extraction from Figma: Reads local paint, text, spacing-related styles, radius, effects, grid styles, and component families from a Figma file to produce structured TypeUI-ready markdown.
- Generates DESIGN.md and SKILL.md: Produces standardized documentation the AI coding workflow can follow to implement interfaces that match the Figma source.
- Agent-ready output: Creates rules that enforce using extracted colors and typography without hardcoding or drifting from the design system.
Quick Start
Tell an AI agent to guide you through running the Figma plugin to extract tokens from your Figma file and generate DESIGN.md and SKILL.md for your design system implementation.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: figma-design-md-plugin Download link: https://github.com/Aradotso/design-skills/archive/main.zip#figma-design-md-plugin Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.