🚀 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.
-
Configure Figma MCP Server (one-time setup):
claude mcp add --transport http figma https://mcp.figma.com/mcp
-
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
-
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
-
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.
-
Clone the Repository:
git clone https://github.com/LPdsgn/FigmaCodeMaster.git
cd FigmaCodeMaster
-
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).
-
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
-
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
-
Copy the link to a Figma frame or file.
Ensure the link includes ?node-id=... for specific frames.
-
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
- Analyze: The plugin analyzes your
package.json to detect Framework (Next.js, Vue, etc.) and styling (Tailwind v3 vs v4).
- Extract: It pulls design data, tokens, and screenshots from Figma via MCP.
- Generate: It creates component code that matches your existing project structure.
- 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
