claude-code-figma

claude-code-figma: An AI-First Developer Tool

Part of the Claude Code ecosystem of AI-integrated tools

claude-code-figma is a command-line tool built from the ground up for AI integration. Unlike traditional developer tools meant for direct use, this CLI is optimized for Claude Code to extract, transform, and implement Figma designs as code that seamlessly integrates with your existing project.

🤖 AI-First Approach: Commands, outputs, and workflows are designed for optimal Claude Code interpretation, creating a bridge between Figma designs and your codebase.

Installation

Global Installation

npm install -g claude-code-figma

Local Installation

npm install claude-code-figma

Usage

Authentication

Before using the tool, you need to authenticate with Figma:

claude-code-figma auth

This will guide you through creating a personal access token on Figma's website and saving it securely.

Extract Metadata

To extract metadata from a Figma component:

claude-code-figma extract [figma-url]

Example:

claude-code-figma extract https://www.figma.com/file/abcdef123456/MyDesigns?node-id=123%3A456

Options

• -o, --output <path>: Save output to a file instead of printing to console
• -f, --format <format>: Output format (json or yaml, default: json)
• -v, --verbose: Enable verbose logging
• --optimize: Optimize output for component mapping (recommended for Claude Code integration)

Example:

claude-code-figma extract https://www.figma.com/file/abcdef123456/MyDesigns?node-id=123%3A456 --output component-metadata.json --optimize

The --optimize flag transforms the raw Figma data into a more structured format that helps Claude Code:

• Identify component types (button, modal, card, etc.)
• Find matching components in your codebase
• Map Figma properties to your component props
• Generate Tailwind CSS classes for styling
• Identify colors that need to be added to your Tailwind config
• Provide implementation guidance specific to the component type
• Preserve design intent while using your project's component system

The optimization process automatically generates Tailwind CSS classes for:

• Layout (flex, grid, padding, margin, etc.)
• Typography (font size, weight, color, etc.)
• Colors (background, text, border colors)
• Borders and rounded corners
• Sizing and spacing
• Shadows and effects

Integration with Claude Code

Using the Init Command with Claude Code (Easiest)

The easiest way to set up integration is to:

• Install this tool in your project:

  npm install --save-dev claude-code-figma
  

• Ask Claude Code to run the init command:

  Please run claude-code-figma init and follow its instructions to create a CLAUDE.md file
  

• Claude Code will:

  • Run the init command
  • Read the instructions
  • Create a customized CLAUDE.md file for your project
  • Adjust it based on your project's structure

Manual Integration

Alternatively, you can manually add the following to your project's CLAUDE.md file:

## Figma Integration

This project uses the `claude-code-figma` CLI tool to extract design information from Figma. 

### Converting Figma designs to code

When a Figma link is provided, use the following steps:

1. Extract the Figma metadata:
   ```bash
   claude-code-figma extract <figma-url> --optimize

• Based on the metadata, implement the component using:
  • The project's existing theme system for colors, typography, and spacing
  • The component structure from the Figma design
  • The naming conventions used in the codebase
  • The framework and styling approaches used in the project

## Example Workflow

1. User provides a Figma link to Claude
2. Claude runs `claude-code-figma extract <url> --optimize` to get optimized metadata
3. Claude uses the component mapping hints to find existing components in the project
4. Claude analyzes the optimized metadata and the project's existing code/themes
5. Claude generates a component that matches the design while respecting project conventions and reusing existing components

## The AI-First CLI Paradigm

`claude-code-figma` represents a new approach to developer tooling, where:

1. **Designed for AI Collaboration**: Commands are structured for optimal AI interpretation, not just human readability
2. **Contextually Adaptive**: Outputs adapt to each project's specific conventions and structure
3. **Progressive Discovery**: The tool helps Claude Code understand your project's patterns and preferences over time
4. **Metadata Transformation**: Figma design data is transformed to match your code's structure and style
5. **Natural Language Interface**: Users interact with the tool through Claude Code using natural language

This approach shifts the developer workflow from:

Human → CLI → Output → Human interpretation → Code

To a more efficient model:

Human → Claude Code → CLI → Optimized data → Claude Code → Production-ready code

By embracing this AI-first paradigm, `claude-code-figma` dramatically reduces the cognitive load and manual effort required to implement designs, allowing developers to focus on higher-level tasks while maintaining full control over the code quality and style.

## License

ISC