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:

``bash
npm install -g figma-mcp-cli
`

Requirements

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

Usage

$3

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

`bash
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

$3

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

`bash
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