diff --git a/documentation/docs/mcp/figma-mcp.md b/documentation/docs/mcp/figma-mcp.md
index 64f447ea0826..ce6ed6db8ee6 100644
--- a/documentation/docs/mcp/figma-mcp.md
+++ b/documentation/docs/mcp/figma-mcp.md
@@ -1,347 +1,164 @@
---
-unlisted: true
title: Figma Extension
-description: Add Figma MCP Server as a Goose Extension
+description: Add Figma Dev Mode MCP Server as a Goose Extension
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
+import CLIExtensionInstructions from '@site/src/components/CLIExtensionInstructions';
import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
+import { PanelLeft } from 'lucide-react';
-
+This tutorial covers how to add the [Figma Dev Mode MCP Server](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server) as a Goose extension to enable interaction with Figma files, designs, and components.
-
-This tutorial covers how to add the [Figma MCP Server](https://github.com/hapins/figma-mcp) as a Goose extension to enable interaction with Figma files, designs, and components.
+:::info
+The MCP Server requires a Dev or Full seat on Professional, Organization, or Enterprise Figma plans.
+:::
:::tip TLDR
- [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=%40hapins%2Ffigma-mcp&id=figma&name=Figma&description=Figma%20design%20tool%20integration&env=FIGMA_ACCESS_TOKEN%3DAccess%20token%20from%20Figma%20user%20settings)
+ [Launch the installer](goose://extension?type=streamable_http&url=http%3A%2F%2F127.0.0.1%3A3845%2Fmcp&id=figma&name=Figma&description=Convert%20Figma%20designs%20into%20code%20and%20extract%20design%20context)
- **Command**
- ```sh
- npx -y @hapins/figma-mcp
- ```
+ Use `goose configure` to add a `Remote Extension (Streaming HTTP)` extension type with:
+
+ **Endpoint URL**
+
+ ```
+ http://127.0.0.1:3845/mcp
+ ```
- **Environment Variable**
- ```
- FIGMA_ACCESS_TOKEN:
- ```
-:::
-## Configuration
+**Required Setup**
-:::info
-Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`.
+The Dev Mode MCP Server must be enabled in the [Figma desktop app](https://www.figma.com/downloads/)
:::
-
-
-
-
-
- 1. Run the `configure` command:
- ```sh
- goose configure
- ```
-
- 2. Choose to add a `Command-line Extension`
- ```sh
- ┌ goose-configure
- │
- ◇ What would you like to configure?
- │ Add Extension (Connect to a new extension)
- │
- ◆ What type of extension would you like to add?
- │ ○ Built-in Extension
- // highlight-start
- │ ● Command-line Extension (Run a local command or script)
- // highlight-end
- │ ○ Remote Extension (SSE)
- │ ○ Remote Extension (Streaming HTTP)
- └
- ```
-
- 3. Give your extension a name
- ```sh
- ┌ goose-configure
- │
- ◇ What would you like to configure?
- │ Add Extension (Connect to a new extension)
- │
- ◇ What type of extension would you like to add?
- │ Command-line Extension
- │
- // highlight-start
- ◆ What would you like to call this extension?
- │ figma
- // highlight-end
- └
- ```
-
- 4. Enter the command
- ```sh
- ┌ goose-configure
- │
- ◇ What would you like to configure?
- │ Add Extension (Connect to a new extension)
- │
- ◇ What type of extension would you like to add?
- │ Command-line Extension
- │
- ◇ What would you like to call this extension?
- │ figma
- │
- // highlight-start
- ◆ What command should be run?
- │ npx -y @hapins/figma-mcp
- // highlight-end
- └
- ```
-
- 5. Enter the number of seconds Goose should wait for actions to complete before timing out. Default is 300s
- ```sh
- ┌ goose-configure
- │
- ◇ What would you like to configure?
- │ Add Extension (Connect to a new extension)
- │
- ◇ What type of extension would you like to add?
- │ Command-line Extension
- │
- ◇ What would you like to call this extension?
- │ figma
- │
- ◇ What command should be run?
- │ npx -y @hapins/figma-mcp
- │
- // highlight-start
- ◆ Please set the timeout for this tool (in secs):
- │ 300
- // highlight-end
- │
- └
- ```
-
- 6. Choose to add a description. If you select "Yes" here, you will be prompted to enter a description for the extension.
- ```sh
- ┌ goose-configure
- │
- ◇ What would you like to configure?
- │ Add Extension (Connect to a new extension)
- │
- ◇ What type of extension would you like to add?
- │ Command-line Extension
- │
- ◇ What would you like to call this extension?
- │ figma
- │
- ◇ What command should be run?
- │ npx -y @hapins/figma-mcp
- │
- ◇ Please set the timeout for this tool (in secs):
- │ 300
- │
- // highlight-start
- ◇ Would you like to add a description?
- │ No
- // highlight-end
- └
- ```
-
- 7. Obtain a [Figma Access Token](https://www.figma.com/developers/api#access-tokens) and paste it in.
- :::info
- You can generate an access token from your Figma account settings under the Personal access tokens section.
- :::
-
- ```sh
- ┌ goose-configure
- │
- ◇ What would you like to configure?
- │ Add Extension (Connect to a new extension)
- │
- ◇ What type of extension would you like to add?
- │ Command-line Extension
- │
- ◇ What would you like to call this extension?
- │ figma
- │
- ◇ What command should be run?
- │ npx -y @hapins/figma-mcp
- │
- ◇ Please set the timeout for this tool (in secs):
- │ 300
- │
- ◇ Would you like to add a description?
- │ No
- │
- // highlight-start
- ◆ Would you like to add environment variables?
- │ Yes
- │
- ◇ Environment variable name:
- │ FIGMA_ACCESS_TOKEN
- │
- ◇ Environment variable value:
- │ ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪
- │
- ◇ Add another environment variable?
- │ No
- // highlight-end
- └ Added figma extension
- ```
+## Configuration
-
-
+1. Follow the instructions in Figma's [Guide to the Dev Mode MCP Server](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server) to enable the MCP Server.
+
+ Your server will now be running at `http://127.0.0.1:3845/mcp`
+
+ :::info Alternative Setup
+ If you don't see a `Preferences` menu in the desktop app as described in the instructions, try this:
+ 1. Click the `` toggle at the bottom of your design file
+ 2. In the right panel, toggle `Enable MCP server`
+ :::
+
+2. Add the Figma extension to Goose:
+
+
+
+
+
+
+
+
## Example Usage
-The Figma MCP server allows you to interact with your Figma files and designs programmatically. When creating your access token, make sure you give it the appropriate access and scope:
-
-1. Read access for files
-2. Write access for Comments
-3. And any other scopes of your choice.
-
-Given this [Community Figma design](https://www.figma.com/community/file/1037030891378807455), we'll have Goose build a webpage.
+The Figma extension in Goose works alongside the Figma desktop app. You can use the extension to:
+- Convert Figma designs into production-ready code (React, Vue, HTML/CSS, etc.)
+- Extract design tokens, variables, and generate design system rules
+- Capture visual references of your designs
-
+Let's try converting a Figma design into React code. First, copy the link:
+ 1. Open a design file in the [Figma desktop app](https://www.figma.com/downloads/) where the MCP Server is enabled
+ 2. In the layers panel, right-click any frame or component and choose `Copy link to selection`
:::tip
-Get the Figma File ID from the URL. For example, `https://www.figma.com/file/KvR8Wpe6ITaCD3et3H7l6k/AI-Landing-Page` has a file ID of `KvR8Wpe6ITaCD3et3H7l6k`.
+You can provide Goose with a Figma link or simply select an element in the Figma desktop app.
:::
### Goose Prompt
```
-( O)> Convert my figma design with file ID 7r0mLHWx2rrjwn79mcNVNE into a webpage. Get specific detailed information and styling about each element and components within each frame. Make sure to implement any interactions or animations and use a placeholder div with a gray background for images.
-
-Some elements are centralized, some are duplicated, make sure to get them correct. And ensure correct alignment and spacing between elements.
+Convert this to React: https://www.figma.com/design/B6IFM1qjwxJw5fOYJYKRl5/Buttons-?node-id=351-8&m=dev
```
### Goose Output
-```
-I'll help you convert your Figma design into a webpage. Let's break this down into steps and
- gather all the necessary information from your Figma file.
-
-1. First, let's get the file information to understand the overall structure:
-
-─── get_file_info | figma ──────────────────────────
-depth: 4
-file_key: 7r0mLHWx2rrjwn79mcNVNE
-
-
-
-Let me help you convert this Figma design into a webpage. I'll create the HTML and CSS based
- on the design specifications from the Figma file. I'll break it down into sections and impl
-ement all the styling and interactions.
-
-Let's create the files:
-
-─── text_editor | developer ──────────────────────────
-path: ~/D/w/l/m/figma-example/index.html
-command: write
-file_text: ...
+:::note Desktop
+I'll help you convert that Figma design to React. Let me first examine the Figma file to understand the design structure and components.
-### .../figma-example/index.html
-
---- HTML content hidden ---
-
-Now, let's create the CSS file with all the styling:
-
-─── text_editor | developer ──────────────────────────
-path: ~/D/w/l/m/figma-example/styles.css
-command: write
-file_text: ...
-
-
-### .../figma-example/styles.css
-
---- CSS content hidden ---
-
-I've created a complete implementation of the Figma design with the following features and c
-onsiderations:
-
-1. **Typography**:
-- Used the exact fonts from the design: Poppins, Overpass, Nunito Sans, Public Sans, and Ral
-eway
-- Implemented correct font weights, sizes, and letter spacing
-- Maintained the text hierarchy as shown in the design
-
-2. **Colors**:
-- Used the exact color codes from the Figma file
-- Implemented the proper background colors (#250b71 for header and footer)
-- Used correct text colors for different sections
-
-3. **Layout**:
-- Created a responsive layout that matches the design
-- Implemented proper spacing and alignment
-- Used CSS Grid for the book cards
-- Used Flexbox for navigation and content alignment
-
-4. **Components**:
-- Navigation bar with social media links
-- About Me section with placeholder for image
-- Education section with ordered list
-- Book cards with proper styling
-- Mood section with image placeholders
-- Footer with copyright text
-
-5. **Interactive Elements**:
-- Hover effects on navigation links
-- "Next Section" buttons with icons
-- "Go on Top" button at the bottom
-
-6. **Responsive Design**:
-- Added media queries for different screen sizes
-- Responsive adjustments for mobile and tablet views
-- Flexible layouts that adapt to different screen sizes
-
-7. **Images**:
-- Used placeholder divs with background colors for images
-- Maintained aspect ratios from the original design
-
-8. **Accessibility**:
-- Semantic HTML structure
-- Proper heading hierarchy
-- Alt text placeholders for images
-- Readable text contrast
+```
+manage_extensions action, extension_name
+```
-To use this implementation:
+I'll help you convert that Figma design to React. Let me first extract the node ID from the URL and then generate the React code for you.
-1. Make sure all the fonts are properly loaded (they're being loaded from Google Fonts)
-2. Replace the image placeholders with actual images
-3. Add proper links to the social media navigation
-4. Add any additional interactive features or animations as needed
+```
+get_code nodeId, clientLanguages, clientFrameworks
+```
-The implementation maintains the visual hierarchy and styling of the original Figma design while
-ensuring it's responsive and accessible. You can further customize the colors, spacing,
-and other properties by modifying the CSS variables if needed.
+```
+get_image nodeId, clientLanguages, clientFrameworks
+```
-Would you like me to add any specific interactions or make any adjustments to the implementation?
+I've successfully converted your Figma design to React! Here's the generated component:
+
+```jsx
+const imgImage1 = "http://localhost:3845/assets/e0e0f6accb741cb6cacec2697cef047a7eea7e30.png";
+
+function Component1() {
+ return (
+
+ );
+}
+
+export default function Component2() {
+ return (
+
+
+
+ );
+}
```
-### Result
+#### Key Features of the Generated Component:
-The Figma design has been successfully converted into a webpage with the styling, content and components from the original design.
+- **Tailwind CSS Styling**: Uses Tailwind classes for responsive design and styling
+- **Image Asset**: The goose logo is loaded from a localhost server as a background image
+- **Typography**: Uses Inter Black font for the "ask goose" text
+- **Layout**: Positioned absolutely with precise inset values to match the Figma design
+- **Responsive**: Uses relative positioning and percentage-based insets for scalability
-
+#### Component Structure:
+- **Background**: Light gray rounded container (#d9d9d9)
+- **Logo**: Goose silhouette image positioned on the left side
+- **Text**: "ask goose" text positioned on the right in dark gray (#333b43)
+
+The component maintains the exact visual hierarchy and styling from your Figma design while being fully responsive and ready to integrate into a React application with Tailwind CSS.
-:::tip
-In cases where you need to make additional changes, or the final output is not as expected - you can continue to interact with Goose to make adjustments.
:::
\ No newline at end of file
diff --git a/documentation/static/servers.json b/documentation/static/servers.json
index 93f97c41b0cd..5c3c0b755133 100644
--- a/documentation/static/servers.json
+++ b/documentation/static/servers.json
@@ -234,6 +234,18 @@
"endorsed": true,
"environmentVariables": []
},
+ {
+ "id": "figma",
+ "name": "Figma",
+ "description": "Convert Figma designs into code and extract design context (requires local setup)",
+ "url": "http://127.0.0.1:3845/mcp",
+ "link": "",
+ "installation_notes": "The Figma desktop app must be running with the MCP server enabled.",
+ "is_builtin": false,
+ "endorsed": true,
+ "type": "streamable-http",
+ "environmentVariables": []
+ },
{
"id": "filesystem-mcp",
"name": "Filesystem",