From e05572c7100eee4c176b6d8f2bf47651c529b458 Mon Sep 17 00:00:00 2001 From: Diane Diaz Date: Wed, 20 Aug 2025 14:48:25 -0700 Subject: [PATCH] add figma tutorial --- documentation/docs/mcp/figma-mcp.md | 411 ++++++++-------------------- documentation/static/servers.json | 12 + 2 files changed, 126 insertions(+), 297 deletions(-) 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 -![Figma Design](../assets/guides/figma-mcp-design.png) +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 ( +
+
+
+

ask

+

goose

+
+
+
+ ); +} + +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 -![Figma MCP Output](../assets/guides/figma-mcp-output.png) +#### 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",