fig4ai

A CLI tool that uses AI to generate design rules and documentation from your Figma files. It analyzes your Figma designs and automatically extracts design tokens, components, and layout information into a structured format.

Overview

https://github.com/user-attachments/assets/c80b7eee-7027-4872-ae30-5279289ff6f7

Features

• 🎨 Extract design tokens (colors, typography, spacing, effects)
• 🧩 Generate component documentation
• 📐 Analyze layout structures
• 🤖 AI-powered pseudo-code generation
• 🔄 Real-time progress indicators
• 📝 Markdown output format

Run

Run directly with npx:

npx fig4ai <figma-url> [--model=claude|gpt4] [--no-ai]

IDE Integration

After generating your .designrules file, you can use it with AI-powered IDEs to automatically generate code and configurations:

Cursor, Windsurf, VS Code

Simply mention the .designrules file in your prompts:

> Generate a Tailwind config based on @.designrules file

> Create a Vue login page using the design tokens from @.designrules

> Build a React component library following @.designrules specifications

The AI will analyze your .designrules file and generate code that matches your design system's: - Color palette - Typography scales - Spacing system - Component structures - Layout patterns - Shadow effects - Border styles - And more...

How it Works

fig4ai follows a sophisticated process to transform your Figma designs into AI-ready context:

1. Data Extraction
2. Connects to Figma API and retrieves comprehensive file data

3. Processes complex nested JSON structure containing all design information

4. Design Token Parsing

5. Parses the JSON structure hierarchically: Canvas > Frame > Component / Instance
6. Extracts design tokens (colors, typography, spacing, effects)
7. Organizes components and their instances with style references

8. Maintains relationship between components and their variants

9. AI-Powered Transformation

10. For each Canvas, sends structured data to GPT-4o
11. Generates semantic pseudo-code with complete styling context
12. Preserves all design decisions, constraints, and relationships

13. Includes accessibility considerations and responsive behaviors

14. Structured Documentation

15. Stores all design tokens and pseudo-code representations in .designrules
16. Uses Markdown format for maximum compatibility
17. Maintains hierarchical structure of the design system

18. Preserves all style references and component relationships

19. AI Context Integration

20. .designrules file serves as a comprehensive design context
21. When mentioned in AI-powered IDEs (Cursor/Windsurf), the file is parsed
22. AI understands the complete design system and can generate accurate code
23. Enables context-aware code generation based on your design system

In essence, fig4ai transforms your Figma file into a structured AI context, making your design system programmatically accessible to AI tools.

Usage

Command Line

npx fig4ai <figma-url> [--model=claude|gpt4] [--no-ai]

Or if you've set FIGMA_DESIGN_URL in your .env file:

npx fig4ai [--model=claude|gpt4] [--no-ai]

AI Options

The tool supports two AI models for enhanced design analysis:

1. Claude (Default)
2. Uses Anthropic's Claude 3 Sonnet model
3. Set CLAUDE_API_KEY in your environment variables
4. Generally better at understanding design context

5. More detailed component analysis

6. GPT-4o

7. Uses OpenAI's GPT-4 model
8. Set OPENAI_API_KEY in your environment variables
9. Alternative option if you prefer OpenAI

You can also run without AI enhancement:

npx fig4ai <figma-url> --no-ai

This will output raw design data in a structured format without AI processing.

Environment Setup

# Required
FIGMA_ACCESS_TOKEN=your_figma_token

# Optional - At least one needed for AI features
CLAUDE_API_KEY=your_claude_api_key
OPENAI_API_KEY=your_openai_api_key

# Optional
FIGMA_DESIGN_URL=your_default_figma_url

Output

The tool generates a .designrules file containing:

• Design token documentation
• Component specifications
• Layout structures
• AI-generated pseudo-code
• Style references
• Accessibility considerations

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions, please: 1. Check the issues page 2. Create a new issue if your problem isn't already listed