mirror of
https://github.com/block/goose.git
synced 2026-07-17 12:56:20 +02:00
docs: add figma tutorial (#4231)
This commit is contained in:
dianed-square
+116
-299
@@ -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';
|
||||
|
||||
<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.
|
||||
|
||||
|
||||
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
|
||||
<Tabs groupId="interface">
|
||||
<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 value="cli" label="Goose CLI">
|
||||
**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
|
||||
```
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
**Environment Variable**
|
||||
```
|
||||
FIGMA_ACCESS_TOKEN: <YOUR_TOKEN>
|
||||
```
|
||||
|
||||
**Required Setup**
|
||||
|
||||
The Dev Mode MCP Server must be enabled in the [Figma desktop app](https://www.figma.com/downloads/)
|
||||
:::
|
||||
|
||||
## Configuration
|
||||
|
||||
:::info
|
||||
Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`.
|
||||
:::
|
||||
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.
|
||||
|
||||
<Tabs groupId="interface">
|
||||
<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
|
||||
```
|
||||
Your server will now be running at `http://127.0.0.1:3845/mcp`
|
||||
|
||||
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)
|
||||
└
|
||||
```
|
||||
:::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`
|
||||
:::
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
2. Add the Figma extension to Goose:
|
||||
<Tabs groupId="interface">
|
||||
<TabItem value="ui" label="Goose Desktop" default>
|
||||
<GooseDesktopInstaller
|
||||
extensionId="figma"
|
||||
extensionName="Figma"
|
||||
description="Convert Figma designs into code and extract design context"
|
||||
type="http"
|
||||
url="http://127.0.0.1:3845/mcp"
|
||||
/>
|
||||
</TabItem>
|
||||
<TabItem value="cli" label="Goose CLI">
|
||||
<CLIExtensionInstructions
|
||||
name="figma"
|
||||
type="http"
|
||||
url="http://127.0.0.1:3845/mcp"
|
||||
timeout={300}
|
||||
/>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
## 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
|
||||
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.
|
||||
|
||||
|
||||
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.
|
||||
:::note Desktop
|
||||
|
||||
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
|
||||
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?
|
||||
```
|
||||
manage_extensions action, extension_name
|
||||
```
|
||||
|
||||
### 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,
|
||||
"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",
|
||||
|
||||
Reference in New Issue
Block a user