@fridaplatform-stk/figma2frida-mcp 1.0.1 → 1.0.2
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 +90 -52
- package/dist/figma2frida.js +536 -968
- package/dist/figma2frida.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -19,11 +19,18 @@ This MCP server connects Figma Desktop MCP to your design system components stor
|
|
|
19
19
|
|
|
20
20
|
- Node.js 18+
|
|
21
21
|
- Figma Desktop with MCP enabled (running at `http://127.0.0.1:3845/sse`)
|
|
22
|
-
-
|
|
23
|
-
- Frida AI account with bearer token
|
|
22
|
+
- API token for authentication
|
|
24
23
|
|
|
25
24
|
## Installation
|
|
26
25
|
|
|
26
|
+
### From npm (Recommended)
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npm install -g @fridaplatform-stk/figma2frida-mcp
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### From Source
|
|
33
|
+
|
|
27
34
|
```bash
|
|
28
35
|
# Clone the repository
|
|
29
36
|
git clone <your-repo-url>
|
|
@@ -40,25 +47,17 @@ npm run build
|
|
|
40
47
|
|
|
41
48
|
### Environment Variables
|
|
42
49
|
|
|
43
|
-
|
|
50
|
+
**Note**: Most configuration is built into the package. The following are passed as command-line arguments:
|
|
51
|
+
- `--pinecone-namespace`: Your namespace identifier (required)
|
|
52
|
+
- `--frida-api-token`: Your API token for authentication (required)
|
|
44
53
|
|
|
54
|
+
Optional environment variables for local development:
|
|
45
55
|
```bash
|
|
46
|
-
# Pinecone Configuration
|
|
47
|
-
PINECONE_API_KEY=your_pinecone_api_key_here
|
|
48
|
-
PINECONE_INDEX_NAME=your_index_name
|
|
49
|
-
# PINECONE_NAMESPACE is passed as argument (not in .env)
|
|
50
|
-
|
|
51
|
-
# Frida AI Configuration
|
|
52
|
-
FRIDA_BEARER_TOKEN=your_frida_bearer_token_here
|
|
53
|
-
FRIDA_BASE_URL=https://api.frida.ai
|
|
54
|
-
|
|
55
56
|
# Server Configuration (optional)
|
|
56
57
|
HTTP_STREAM=true # Set to true for HTTP mode, false for stdio
|
|
57
58
|
PORT=8080 # Port for HTTP stream mode
|
|
58
59
|
```
|
|
59
60
|
|
|
60
|
-
**Important**: `PINECONE_NAMESPACE` should NOT be in `.env` - it's passed as a command-line argument.
|
|
61
|
-
|
|
62
61
|
## Local Development
|
|
63
62
|
|
|
64
63
|
### Running Locally
|
|
@@ -79,9 +78,10 @@ chmod +x run-local.sh
|
|
|
79
78
|
The script will:
|
|
80
79
|
- Start the server in HTTP Stream mode
|
|
81
80
|
- Use the namespace from the command-line argument
|
|
82
|
-
- Load all other settings from `.env` file
|
|
83
81
|
- Make the server available at `http://localhost:8080/mcp`
|
|
84
82
|
|
|
83
|
+
**Note**: For local development, you may need to pass the `--frida-api-token` argument as well.
|
|
84
|
+
|
|
85
85
|
### Testing the Server
|
|
86
86
|
|
|
87
87
|
Once running, test with curl:
|
|
@@ -106,7 +106,28 @@ Add this to your MCP configuration file (location depends on your IDE):
|
|
|
106
106
|
"args": [
|
|
107
107
|
"/absolute/path/to/figma2frida_mcp/dist/figma2frida.js",
|
|
108
108
|
"--pinecone-namespace",
|
|
109
|
-
"org01_proj01"
|
|
109
|
+
"org01_proj01",
|
|
110
|
+
"--frida-api-token",
|
|
111
|
+
"your_api_token_here"
|
|
112
|
+
]
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
**Or using npm package:**
|
|
119
|
+
|
|
120
|
+
```json
|
|
121
|
+
{
|
|
122
|
+
"mcpServers": {
|
|
123
|
+
"figma2frida": {
|
|
124
|
+
"command": "npx",
|
|
125
|
+
"args": [
|
|
126
|
+
"@fridaplatform-stk/figma2frida-mcp",
|
|
127
|
+
"--pinecone-namespace",
|
|
128
|
+
"org01_proj01",
|
|
129
|
+
"--frida-api-token",
|
|
130
|
+
"your_api_token_here"
|
|
110
131
|
]
|
|
111
132
|
}
|
|
112
133
|
}
|
|
@@ -114,10 +135,11 @@ Add this to your MCP configuration file (location depends on your IDE):
|
|
|
114
135
|
```
|
|
115
136
|
|
|
116
137
|
**Important**:
|
|
117
|
-
- Use the **absolute path** to `dist/figma2frida.js`
|
|
138
|
+
- Use the **absolute path** to `dist/figma2frida.js` if installing from source
|
|
118
139
|
- Replace `org01_proj01` with your namespace
|
|
119
|
-
-
|
|
120
|
-
-
|
|
140
|
+
- Replace `your_api_token_here` with your API token
|
|
141
|
+
- Both `--pinecone-namespace` and `--frida-api-token` are required arguments
|
|
142
|
+
- Make sure you've run `npm run build` first if installing from source
|
|
121
143
|
|
|
122
144
|
### Restart Your IDE
|
|
123
145
|
|
|
@@ -130,34 +152,6 @@ After adding the configuration, restart Visual Studio / GitHub Copilot to load t
|
|
|
130
152
|
- `figma_suggest_components` - Suggest design system components based on Figma design (with Pinecone & Frida AI)
|
|
131
153
|
- `figma_improve_layout` - Trigger layout improvement to match Figma frame reference
|
|
132
154
|
|
|
133
|
-
## Project Structure
|
|
134
|
-
|
|
135
|
-
```
|
|
136
|
-
figma2frida_mcp/
|
|
137
|
-
├── src/
|
|
138
|
-
│ └── figma2frida/
|
|
139
|
-
│ ├── figma2frida.ts # Main MCP server
|
|
140
|
-
│ ├── clients/
|
|
141
|
-
│ │ └── figma-client.ts # Figma Desktop MCP client
|
|
142
|
-
│ ├── handlers/
|
|
143
|
-
│ │ └── component-suggestion-handler.ts
|
|
144
|
-
│ ├── services/
|
|
145
|
-
│ │ ├── component-lookup.ts
|
|
146
|
-
│ │ ├── frida/
|
|
147
|
-
│ │ │ └── frida-client.ts
|
|
148
|
-
│ │ └── pinecone/
|
|
149
|
-
│ │ └── pinecone-service.ts
|
|
150
|
-
│ └── utils/
|
|
151
|
-
│ ├── component-extractor.ts
|
|
152
|
-
│ ├── design-query-extractor.ts
|
|
153
|
-
│ └── formatters.ts
|
|
154
|
-
├── dist/
|
|
155
|
-
│ ├── figma2frida.js # Built server (for production)
|
|
156
|
-
│ └── figma2frida.d.ts
|
|
157
|
-
├── run-local.sh # Local development script
|
|
158
|
-
├── .env # Environment variables (create this)
|
|
159
|
-
└── package.json
|
|
160
|
-
```
|
|
161
155
|
|
|
162
156
|
## Development
|
|
163
157
|
|
|
@@ -175,19 +169,63 @@ npm run dev
|
|
|
175
169
|
|
|
176
170
|
## Publishing to npm
|
|
177
171
|
|
|
172
|
+
### ⚠️ Permission Required
|
|
173
|
+
|
|
174
|
+
**Important:** This package is published under the `@fridaplatform-stk` scope and requires **permission from Fridaplatform** to publish or update.
|
|
175
|
+
|
|
176
|
+
- You must be a member of the `@fridaplatform-stk` npm organization
|
|
177
|
+
- You must have publish permissions for the organization
|
|
178
|
+
- Contact the Fridaplatform team to request access if needed
|
|
179
|
+
|
|
180
|
+
### First-Time Publishing
|
|
181
|
+
|
|
182
|
+
```bash
|
|
183
|
+
# 1. Login to npm
|
|
184
|
+
npm login
|
|
185
|
+
|
|
186
|
+
# 2. Verify you're logged in
|
|
187
|
+
npm whoami
|
|
188
|
+
|
|
189
|
+
# 3. Verify organization access
|
|
190
|
+
npm access ls-packages @fridaplatform-stk
|
|
191
|
+
|
|
192
|
+
# 4. Build the package
|
|
193
|
+
npm run build
|
|
194
|
+
|
|
195
|
+
# 5. Verify what will be published
|
|
196
|
+
npm pack --dry-run
|
|
197
|
+
|
|
198
|
+
# 6. Publish (requires permission)
|
|
199
|
+
npm publish
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
### Updating/Republishing
|
|
203
|
+
|
|
204
|
+
To update the package with a new version:
|
|
205
|
+
|
|
178
206
|
```bash
|
|
179
|
-
#
|
|
207
|
+
# 1. Update version in package.json (or use npm version)
|
|
208
|
+
npm version patch # for bug fixes (1.0.0 -> 1.0.1)
|
|
209
|
+
npm version minor # for new features (1.0.0 -> 1.1.0)
|
|
210
|
+
npm version major # for breaking changes (1.0.0 -> 2.0.0)
|
|
211
|
+
|
|
212
|
+
# 2. Build the package
|
|
180
213
|
npm run build
|
|
181
214
|
|
|
182
|
-
#
|
|
215
|
+
# 3. Verify changes
|
|
216
|
+
npm pack --dry-run
|
|
217
|
+
|
|
218
|
+
# 4. Publish the update (requires permission)
|
|
183
219
|
npm publish
|
|
184
220
|
```
|
|
185
221
|
|
|
222
|
+
### Installation
|
|
223
|
+
|
|
186
224
|
After publishing, users can install globally:
|
|
187
225
|
|
|
188
226
|
```bash
|
|
189
227
|
npm install -g @fridaplatform-stk/figma2frida-mcp
|
|
190
|
-
figma2frida-mcp --pinecone-namespace org01_proj01
|
|
228
|
+
figma2frida-mcp --pinecone-namespace org01_proj01 --frida-api-token your_api_token_here
|
|
191
229
|
```
|
|
192
230
|
|
|
193
231
|
## Troubleshooting
|
|
@@ -198,8 +236,8 @@ Run `npm install` to install dependencies.
|
|
|
198
236
|
### "Figma MCP connection failed"
|
|
199
237
|
Make sure Figma Desktop is running with MCP enabled at `http://127.0.0.1:3845/sse`.
|
|
200
238
|
|
|
201
|
-
### "
|
|
202
|
-
Make sure you're passing `--pinecone-namespace`
|
|
239
|
+
### "Missing required argument"
|
|
240
|
+
Make sure you're passing both `--pinecone-namespace` and `--frida-api-token` as arguments.
|
|
203
241
|
|
|
204
242
|
### Visual Studio can't find the MCP server
|
|
205
243
|
- Check the absolute path is correct
|