figma-code-master

🚀 FigmaCodeMaster

---

📋 Prerequisites

Before you begin, ensure you have the following installed:

Requirement	Verification Command	Note
🤖 Claude Code	claude --version	Must be version >= 1.0.33
🐍 Python	python3 --version	3.10+ (for utility scripts)
📦 Node.js	node --version	18+ (for project analysis)
🎨 Figma Account	-	Access to the designs you want to convert

---

📥 Installation

Method 1️⃣ — Direct Installation from GitHub (Recommended)

This method installs the plugin directly from GitHub without manual cloning.

1. Configure Figma MCP Server (one-time setup):

   claude mcp add --transport http figma https://mcp.figma.com/mcp
   

2. Authenticate with Figma:

   • Open Claude Code: claude
   • Type /mcp and press Enter
   • Locate figma in the list and select Authenticate
   • Follow the browser prompt to authorize access

3. Add the Marketplace and Install:

   # Add the marketplace from GitHub
   claude plugin marketplace add LPdsgn/FigmaCodeMaster
   
   # Install the plugin
   claude plugin install figma-code-master@lpdsgn
   

4. Verify Installation:

   # Check that the marketplace was added
   claude plugin marketplace list
   
   # Then open Claude Code to verify the plugin
   claude
   # Inside Claude Code, type: /plugin
   

   ✅ You should see lpdsgn in the marketplace list and figma-code-master in the /plugin interface.

---

Method 2️⃣ — Manual Installation from Cloned Repository

Use this method if you want to modify the plugin or use a local version.

1. Clone the Repository:

   git clone https://github.com/LPdsgn/FigmaCodeMaster.git
   cd FigmaCodeMaster
   

2. Configure Figma MCP Server (one-time setup):

   claude mcp add --transport http figma https://mcp.figma.com/mcp
   

   Then authenticate via /mcp in Claude Code (see Method 1, step 2).

3. Add the Marketplace and Install:

   # Windows
   claude plugin marketplace add ./
   
   # Linux/Mac
   claude plugin marketplace add ./
   
   # Install the plugin
   claude plugin install figma-code-master@lpdsgn
   

4. Verify Installation:

   # Check that the marketplace was added
   claude plugin marketplace list
   
   # Then open Claude Code to verify the plugin
   claude
   # Inside Claude Code, type: /plugin
   

   ✅ You should see lpdsgn in the marketplace list and figma-code-master in the /plugin interface.

💡 Tip: Run /doctor inside Claude Code to verify that the Figma MCP server is connected properly.

---

🎯 Usage

Once installed, usage is simple and works in any project directory.

1. Connect to Figma Designs

1. Copy the link to a Figma frame or file. Ensure the link includes ?node-id=... for specific frames.

2. Start Claude Code in your project folder:

   cd my-react-project
   claude
   

2. Available Commands

Command	Description	Example
/figma-code-master:design-to-code	Convert a Figma frame to code	/figma-code-master:design-to-code https://figma.com/...
/figma-code-master:extract-tokens	Extract design tokens (colors, fonts)	/figma-code-master:extract-tokens https://figma.com/...
/figma-code-master:validate-design	Validate implementation vs Figma	/figma-code-master:validate-design components/Hero.tsx

Tip: You can often just ask similarly in natural language: "Convert this design to code: [LINK]"

3. Workflow Example

1. Analyze: The plugin analyzes your package.json to detect Framework (Next.js, Vue, etc.) and styling (Tailwind v3 vs v4).
2. Extract: It pulls design data, tokens, and screenshots from Figma via MCP.
3. Generate: It creates component code that matches your existing project structure.
4. Validate: Use /validate-design to check pixel accuracy.

---

🔄 Updating the Plugin

To update to the latest version:

Method 1 (Direct from GitHub):

# Update the marketplace
claude plugin marketplace update lpdsgn

# Update the plugin
claude plugin update figma-code-master@lpdsgn

Method 2 (Local Repository):

# Pull latest changes
cd FigmaCodeMaster
git pull origin main

# Update the marketplace
claude plugin marketplace update lpdsgn