Skip to content

Commit eed9024

Browse files
committed
Add documentation for Figma Make
1 parent f585d6b commit eed9024

File tree

5 files changed

+1067
-2
lines changed

5 files changed

+1067
-2
lines changed

src/pages/developing/carbon-mcp/onboarding-and-setup.mdx

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ This section describes how to make both connections.
199199
<br />
200200

201201
- Install the `Carbon MCP Claude Desktop extension`, which can be downloaded
202-
[here](./files/carbon-mcp-claude-extension.mcpb).
202+
[here](/developing/carbon-mcp/files/carbon-mcp-claude-extension.mcpb).
203203

204204
<br />
205205
![Claude Desktop Step 3](./images/Claude-Desktop-"Install-the-Carbon-1".png)
@@ -259,6 +259,49 @@ This section describes how to make both connections.
259259
- Save and close the file
260260
- Quit and relaunch Cursor
261261

262+
</AccordionItem>
263+
264+
<AccordionItem title="Figma Make">
265+
266+
#### For IBMers:
267+
268+
<br/>
269+
270+
- Open Figma Make and navigate to click "Connectors"
271+
- Select “IBM” tab
272+
- Click on the “Connect” button for Carbon MCP
273+
- It will open a browser prompting sign-in with your IBMid
274+
- Upon successful authentication, return the the Carbon MCP connector dialogue in Figma Make
275+
- Toggle on the "Enable write tools" button
276+
- For the `doc_search` and `code_search` tools, select "Always run" in the dropdown menu
277+
- Click the "Back" button, then click "X" to close the Connectors menu
278+
- Start a new Make with Carbon MCP, using this as <a href="/developing/carbon-mcp/files/GUIDELINES.txt" download="GUIDELINES.txt">GUIDELINES.md</a> and this as the <a href="/developing/carbon-mcp/files/figma-make-user-prompt.txt" download="figma-make-user-prompt.txt">input user prompt</a> for best code generation results
279+
280+
#### For non-IBMers:
281+
282+
<br />
283+
284+
<InlineNotification kind="info">
285+
To complete the steps below, your Figma admin must enable user creation of custom connectors.
286+
</InlineNotification>
287+
288+
<br />
289+
290+
- Open Figma Make and navigate to click "Connectors"
291+
- Select “Created by you” tab
292+
- Click on the “Create connector” button
293+
- In the Create connector dialogue, enter `carbon-mcp` as the name, and click "Next"
294+
- In the "MCP server URL" field, enter `https://mcp.carbondesignsystem.com/mcp`, and click "Create"
295+
- Click on the “Connect” button for Carbon MCP
296+
- It will open a browser prompting sign-in to Figma
297+
- Upon successful authentication, return the the Carbon MCP connector dialogue in Figma Make
298+
- Toggle on the "Enable write tools" button
299+
- For the `doc_search` and `code_search` tools, select "Always run" in the dropdown menu
300+
- Click the "Back" button, then click "X" to close the Connectors menu
301+
- Start a new Make with Carbon MCP, using this as <a href="/developing/carbon-mcp/files/GUIDELINES.txt" download="GUIDELINES.txt">GUIDELINES.md</a> and this as the <a href="/developing/carbon-mcp/files/figma-make-user-prompt.txt" download="figma-make-user-prompt.txt">input user prompt</a> for best code generation results
302+
<br />
303+
<br />
304+
262305
</AccordionItem>
263306

264307
<AccordionItem title="GitHub Coding Agent" style={{display: "none"}}>
@@ -729,7 +772,7 @@ readability).
729772
this page
730773
- Replace `<TOKEN>` and `<SESSION>` with your actual Carbon MCP auth credentials
731774
- Download a Claude JSON template with the `systemPrompt` attribute
732-
<a href="./files/config.json" download="config.json">
775+
<a href="/developing/carbon-mcp/files/config.json" download="config.json">
733776
here
734777
</a>
735778

0 commit comments

Comments
 (0)