figma-mcp-cli 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# Figma MCP CLI
|
|
2
|
+
|
|
3
|
+
A CLI tool to automate Figma MCP configuration and code generation.
|
|
4
|
+
|
|
5
|
+
## Description
|
|
6
|
+
|
|
7
|
+
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.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
Install the CLI globally using npm:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install -g figma-mcp-cli
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Requirements
|
|
18
|
+
|
|
19
|
+
- Node.js (version 20 or higher)
|
|
20
|
+
- A Figma Personal Access Token (obtain from [Figma Account Settings](https://www.figma.com/settings))
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
### Initialize Figma MCP Environment
|
|
25
|
+
|
|
26
|
+
Run the `init` command to set up the Figma MCP server in your VS Code project:
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
figma-cli init
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
This command will:
|
|
33
|
+
|
|
34
|
+
- Prompt for your Figma Personal Access Token
|
|
35
|
+
- Prompt for the VS Code project root path (defaults to current directory)
|
|
36
|
+
- Create a `.env` file with the token
|
|
37
|
+
- Update `.vscode/settings.json` to configure the MCP server
|
|
38
|
+
|
|
39
|
+
### Generate Code from Figma Design
|
|
40
|
+
|
|
41
|
+
After initialization, use the `gen` command to generate frontend code:
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
figma-cli gen
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
This command will:
|
|
48
|
+
|
|
49
|
+
- Check for the required environment variable
|
|
50
|
+
- Prompt for a Figma design link (copy link to selection)
|
|
51
|
+
- Prompt for the target frontend framework (React, Vue, HTML/CSS, Other)
|
|
52
|
+
- Provide instructions to paste the link into Copilot and generate code
|
|
53
|
+
|
|
54
|
+
## Commands
|
|
55
|
+
|
|
56
|
+
- `figma-cli init`: Initialize the Figma MCP environment
|
|
57
|
+
- `figma-cli gen`: Generate code from Figma design using Copilot
|
|
58
|
+
|
|
59
|
+
## License
|
|
60
|
+
|
|
61
|
+
ISC
|