Figma MCP CLI

A CLI tool to automate Figma MCP configuration and code generation.

Description

This CLI tool helps you set up the Figma MCP (Model Context Protocol) environment in VS Code and generate frontend code from Figma designs using Copilot.

Installation

Install the CLI globally using npm:

npm install -g figma-mcp-cli

Requirements

• Node.js (version 20 or higher)
• A Figma Personal Access Token (obtain from Figma Account Settings)

Usage

Initialize Figma MCP Environment

Run the init command to set up the Figma MCP server in your VS Code project:

npx figma-cli init

This command will:

• Prompt for your Figma Personal Access Token
• Prompt for the VS Code project root path (defaults to current directory)
• Create a .env file with the token
• Update .vscode/settings.json to configure the MCP server

Generate Code from Figma Design

After initialization, use the gen command to generate frontend code:

npx figma-cli gen

This command will:

• Check for the required environment variable
• Prompt for a Figma design link (copy link to selection)
• Prompt for the target frontend framework (React, Vue, HTML/CSS, Other)
• Provide instructions to paste the link into Copilot and generate code

Commands

• figma-cli init: Initialize the Figma MCP environment
• figma-cli gen: Generate code from Figma design using Copilot

License

ISC