docs: add figma tutorial (#4231)
This commit is contained in:
dianed-square
+116
-299
@@ -1,347 +1,164 @@
|
|||||||
---
|
---
|
||||||
unlisted: true
|
|
||||||
title: Figma Extension
|
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 Tabs from '@theme/Tabs';
|
||||||
import TabItem from '@theme/TabItem';
|
import TabItem from '@theme/TabItem';
|
||||||
import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
|
import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
|
||||||
|
import CLIExtensionInstructions from '@site/src/components/CLIExtensionInstructions';
|
||||||
import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
|
import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
|
||||||
|
import { PanelLeft } from 'lucide-react';
|
||||||
|
|
||||||
<YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/vHK9Xg_d6Sk" />
|
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.
|
||||||
|
|
||||||
|
:::info
|
||||||
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.
|
The MCP Server requires a Dev or Full seat on Professional, Organization, or Enterprise Figma plans.
|
||||||
|
:::
|
||||||
|
|
||||||
:::tip TLDR
|
:::tip TLDR
|
||||||
<Tabs groupId="interface">
|
<Tabs groupId="interface">
|
||||||
<TabItem value="ui" label="Goose Desktop" default>
|
<TabItem value="ui" label="Goose Desktop" default>
|
||||||
[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)
|
||||||
</TabItem>
|
</TabItem>
|
||||||
<TabItem value="cli" label="Goose CLI">
|
<TabItem value="cli" label="Goose CLI">
|
||||||
**Command**
|
Use `goose configure` to add a `Remote Extension (Streaming HTTP)` extension type with:
|
||||||
```sh
|
|
||||||
npx -y @hapins/figma-mcp
|
**Endpoint URL**
|
||||||
```
|
|
||||||
|
```
|
||||||
|
http://127.0.0.1:3845/mcp
|
||||||
|
```
|
||||||
</TabItem>
|
</TabItem>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
**Environment Variable**
|
|
||||||
```
|
**Required Setup**
|
||||||
FIGMA_ACCESS_TOKEN: <YOUR_TOKEN>
|
|
||||||
```
|
The Dev Mode MCP Server must be enabled in the [Figma desktop app](https://www.figma.com/downloads/)
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
:::info
|
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.
|
||||||
Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`.
|
|
||||||
:::
|
|
||||||
|
|
||||||
<Tabs groupId="interface">
|
Your server will now be running at `http://127.0.0.1:3845/mcp`
|
||||||
<TabItem value="ui" label="Goose Desktop" default>
|
|
||||||
<GooseDesktopInstaller
|
|
||||||
extensionId="figma"
|
|
||||||
extensionName="Figma"
|
|
||||||
description="Figma design tool integration"
|
|
||||||
command="npx"
|
|
||||||
args={["-y", "@hapins/figma-mcp"]}
|
|
||||||
envVars={[
|
|
||||||
{ name: "FIGMA_ACCESS_TOKEN", label: "Access token from Figma user settings" }
|
|
||||||
]}
|
|
||||||
apiKeyLink="https://www.figma.com/developers/api#access-tokens"
|
|
||||||
apiKeyLinkText="Figma Access Token"
|
|
||||||
/>
|
|
||||||
</TabItem>
|
|
||||||
<TabItem value="cli" label="Goose CLI">
|
|
||||||
1. Run the `configure` command:
|
|
||||||
```sh
|
|
||||||
goose configure
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Choose to add a `Command-line Extension`
|
:::info Alternative Setup
|
||||||
```sh
|
If you don't see a `Preferences` menu in the desktop app as described in the instructions, try this:
|
||||||
┌ goose-configure
|
1. Click the `</>` toggle at the bottom of your design file
|
||||||
│
|
2. In the right panel, toggle `Enable MCP server`
|
||||||
◇ 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
|
2. Add the Figma extension to Goose:
|
||||||
```sh
|
<Tabs groupId="interface">
|
||||||
┌ goose-configure
|
<TabItem value="ui" label="Goose Desktop" default>
|
||||||
│
|
<GooseDesktopInstaller
|
||||||
◇ What would you like to configure?
|
extensionId="figma"
|
||||||
│ Add Extension (Connect to a new extension)
|
extensionName="Figma"
|
||||||
│
|
description="Convert Figma designs into code and extract design context"
|
||||||
◇ What type of extension would you like to add?
|
type="http"
|
||||||
│ Command-line Extension
|
url="http://127.0.0.1:3845/mcp"
|
||||||
│
|
/>
|
||||||
// highlight-start
|
</TabItem>
|
||||||
◆ What would you like to call this extension?
|
<TabItem value="cli" label="Goose CLI">
|
||||||
│ figma
|
<CLIExtensionInstructions
|
||||||
// highlight-end
|
name="figma"
|
||||||
└
|
type="http"
|
||||||
```
|
url="http://127.0.0.1:3845/mcp"
|
||||||
|
timeout={300}
|
||||||
4. Enter the command
|
/>
|
||||||
```sh
|
</TabItem>
|
||||||
┌ goose-configure
|
</Tabs>
|
||||||
│
|
|
||||||
◇ 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
|
|
||||||
```
|
|
||||||
|
|
||||||
</TabItem>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Example Usage
|
## 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:
|
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
|
||||||
|
|
||||||
1. Read access for files
|
Let's try converting a Figma design into React code. First, copy the link:
|
||||||
2. Write access for Comments
|
1. Open a design file in the [Figma desktop app](https://www.figma.com/downloads/) where the MCP Server is enabled
|
||||||
3. And any other scopes of your choice.
|
2. In the layers panel, right-click any frame or component and choose `Copy link to selection`
|
||||||
|
|
||||||
Given this [Community Figma design](https://www.figma.com/community/file/1037030891378807455), we'll have Goose build a webpage.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
:::tip
|
:::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
|
### 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.
|
Convert this to React: https://www.figma.com/design/B6IFM1qjwxJw5fOYJYKRl5/Buttons-?node-id=351-8&m=dev
|
||||||
|
|
||||||
Some elements are centralized, some are duplicated, make sure to get them correct. And ensure correct alignment and spacing between elements.
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Goose Output
|
### Goose Output
|
||||||
|
|
||||||
```
|
:::note Desktop
|
||||||
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:
|
I'll help you convert that Figma design to React. Let me first examine the Figma file to understand the design structure and components.
|
||||||
|
|
||||||
─── get_file_info | figma ──────────────────────────
|
```
|
||||||
depth: 4
|
manage_extensions action, extension_name
|
||||||
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: ...
|
|
||||||
|
|
||||||
|
|
||||||
### .../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
|
|
||||||
|
|
||||||
To use this implementation:
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
Would you like me to add any specific interactions or make any adjustments to the implementation?
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Result
|
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.
|
||||||
|
|
||||||
The Figma design has been successfully converted into a webpage with the styling, content and components from the original design.
|
```
|
||||||
|
get_code nodeId, clientLanguages, clientFrameworks
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
get_image nodeId, clientLanguages, clientFrameworks
|
||||||
|
```
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<div className="relative size-full" data-name="Component 1" data-node-id="351:8">
|
||||||
|
<div className="absolute bg-[#d9d9d9] inset-0 rounded-lg" data-node-id="351:2" />
|
||||||
|
<div
|
||||||
|
className="absolute font-['Inter:Black',_sans-serif] font-black inset-[23.33%_2.56%_22.22%_56.41%] leading-[normal] not-italic text-[#333b43] text-[20px]"
|
||||||
|
data-node-id="351:3"
|
||||||
|
>
|
||||||
|
<p className="block mb-0">ask</p>
|
||||||
|
<p className="block">goose</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="absolute aspect-[92/90] bg-center bg-cover bg-no-repeat left-0 right-[52.82%] rounded-lg top-0"
|
||||||
|
data-name="image 1"
|
||||||
|
data-node-id="351:6"
|
||||||
|
style={{ backgroundImage: `url('${imgImage1}')` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Component2() {
|
||||||
|
return (
|
||||||
|
<div className="relative size-full" data-name="Component 1" data-node-id="351:8">
|
||||||
|
<Component1 />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Key Features of the Generated Component:
|
||||||
|
|
||||||
|
- **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.
|
|
||||||
:::
|
:::
|
||||||
@@ -234,6 +234,18 @@
|
|||||||
"endorsed": true,
|
"endorsed": true,
|
||||||
"environmentVariables": []
|
"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",
|
"id": "filesystem-mcp",
|
||||||
"name": "Filesystem",
|
"name": "Filesystem",
|
||||||
|
|||||||
Reference in New Issue
Block a user