Figma Extension

This tutorial covers how to add the Figma MCP Server as a Goose extension to enable interaction with Figma files, designs, and components.

TLDR

Command

npx @hapins/figma-mcp

Environment Variable

FIGMA_ACCESS_TOKEN: <YOUR_TOKEN>

info

Note that you'll need Node.js installed on your system to run this command, as it uses npx.

Configuration

Goose CLI

1. Run the configure command:

goose configure

2. Choose to add a Command-line Extension

  ┌   goose-configure 
  │
  ◇  What would you like to configure?
  │  Add Extension 
  │
  ◆  What type of extension would you like to add?
  │  ○ Built-in Extension 
  │  ● Command-line Extension (Run a local command or script)
  │  ○ Remote Extension 
  └ 

3. Give your extension a name

  ┌   goose-configure 
  │
  ◇  What would you like to configure?
  │  Add Extension 
  │
  ◇  What type of extension would you like to add?
  │  Command-line Extension 
  │
  ◆  What would you like to call this extension?
  │  figma
  └ 

4. Enter the command

  ┌   goose-configure 
  │
  ◇  What would you like to configure?
  │  Add 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 @hapins/figma-mcp
  └ 

5. Obtain a Figma Access Token and paste it in.

info

You can generate an access token from your Figma account settings under the Personal access tokens section.

 ┌   goose-configure 
 │
 ◇  What would you like to configure?
 │  Add 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 @hapins/figma-mcp
 ◆  Would you like to add environment variables?
 │  Yes 
 │
 ◇  Environment variable name:
 │  FIGMA_ACCESS_TOKEN
 │
 ◇  Environment variable value:
 │  ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪
 │
 ◇  Add another environment variable?
 │  No 
 └  Added figma extension

Goose Desktop

1. Click ... in the upper right corner
2. Click Settings
3. Under Extensions, click the Add link
4. On the Add Extension Manually modal, enter the following:
   • Type: Standard IO
   • ID: figma-mcp (set this to whatever you want)
   • Name: Figma (set this to whatever you want)
   • Description: Figma MCP Server (set this to whatever you want)
   • Command: npx @hapins/figma-mcp
   • Environment Variables
     • Name: FIGMA_ACCESS_TOKEN
     • Value: (Obtain a Figma Access Token and paste it in.)
     • Click Add button
5. Click Add Extension button

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, we'll have Goose build a webpage.

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.

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.

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: ...


### .../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

The Figma design has been successfully converted into a webpage with the styling, content and components from the original design.

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.