🎨 figma-ds-agent

Extract Design Systems & Tokens from Figma into React Components and AI Agent Skills using OpenAI Codex.

---

🌟 Features

• 🎨 Figma Token Extraction: Automatically parses Figma files for color palettes, typography scales, spacing, shadows, and component hierarchies.
• 🌐 W3C Design Tokens Standard Format: Exports standard tokens.json compliant with W3C Design Tokens Community Group specification.
• 🤖 AI-Powered Code Generation: Uses OpenAI Codex / GPT models to convert raw Figma AST into production-ready React components with Tailwind CSS.
• ⚡ AI Agent Skill Output (SKILL.md): Exports structured design system rules directly consumable by AI coding assistants (Antigravity, Cursor, GitHub Copilot).
• 🛠️ CLI Integration: Easy-to-use command line interface for CI/CD pipelines or local development.

---

📦 Installation

npm install -g figma-ds-agent

Or run directly via npx:

npx figma-ds-agent extract --url "https://www.figma.com/file/YOUR_FIGMA_FILE_KEY"

---

🚀 Quick Start

1. Set Environment Variables

Create a .env file or export your tokens:

export FIGMA_ACCESS_TOKEN="figd_your_figma_personal_access_token"
export OPENAI_API_KEY="sk-proj-your_openai_api_key"

2. Extract Design System

Run the CLI command:

figma-ds-agent extract --url "https://www.figma.com/file/aBc123Xyz/Design-System" --output ./my-design-system

Output Files:

• ast.json: Raw normalized Design System JSON AST.
• tokens.css: CSS Variables and Tailwind configuration tokens.
• Components.tsx: Auto-generated React components with accessibility standards.
• SKILL.md: Design System rulebook formatted for AI Coding Agents.

---

💡 OpenAI Codex Integration Showcase

figma-ds-agent uses OpenAI Codex APIs to bridge the gap between design specs and code:

1. Figma REST API Parsing: Normalizes complex canvas trees into lightweight Design Token JSON.
2. Codex Prompting: Converts AST into semantic React code adhering to WCAG accessibility guidelines.
3. Agentic Context: Exports SKILL.md to ensure AI Coding Agents produce pixel-perfect UI according to design tokens.

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

---

📄 License

This project is licensed under the MIT License.