From d8b414434873c69eb19254362323bac61acd99eb Mon Sep 17 00:00:00 2001 From: Graham Neubig Date: Fri, 27 Feb 2026 13:31:09 -0500 Subject: [PATCH 1/8] Add Figma MCP skill Add a new skill for installing and managing the Figma MCP server, which provides tools to interact with Figma designs directly from OpenHands using OAuth authentication. Co-authored-by: openhands --- skills/figma/README.md | 62 ++++++++++++++++++++++++++++++++++++++++++ skills/figma/SKILL.md | 59 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 121 insertions(+) create mode 100644 skills/figma/README.md create mode 100644 skills/figma/SKILL.md diff --git a/skills/figma/README.md b/skills/figma/README.md new file mode 100644 index 0000000..50895b4 --- /dev/null +++ b/skills/figma/README.md @@ -0,0 +1,62 @@ +# Figma MCP + +Access Figma designs using the Figma MCP server. Read design files, extract components, get design tokens, and inspect layer properties. + +## Triggers + +This skill is activated by the following keywords: + +- `figma` +- `figma design` +- `figma mcp` + +## Details + +The Figma MCP server provides tools to interact with Figma designs directly from OpenHands. It uses OAuth authentication to securely access your Figma account. + +## Installation + +To install the Figma MCP server, run the following command in your terminal: + +```bash +openhands mcp add figma --transport http --auth oauth https://figma.com/mcp/sse +``` + +This will: +1. Add the Figma MCP server to your OpenHands configuration +2. Configure OAuth authentication (you'll be prompted to authorize when first used) +3. Enable the server immediately + +After installation, restart your OpenHands session to apply the changes. + +## Verification + +To verify the installation: + +```bash +openhands mcp list +``` + +You should see the Figma server listed with status "enabled". + +## Managing the Server + +```bash +# Disable the Figma MCP server +openhands mcp disable figma + +# Re-enable the Figma MCP server +openhands mcp enable figma + +# Remove the Figma MCP server +openhands mcp remove figma + +# Get details about the Figma server +openhands mcp get figma +``` + +## Documentation + +- Figma MCP Server: https://developers.figma.com/docs/figma-mcp-server +- Remote Server Installation: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/ +- Figma API: https://www.figma.com/developers/api diff --git a/skills/figma/SKILL.md b/skills/figma/SKILL.md new file mode 100644 index 0000000..c22648f --- /dev/null +++ b/skills/figma/SKILL.md @@ -0,0 +1,59 @@ +--- +name: figma +description: Access Figma designs using the Figma MCP server. Read design files, extract components, get design tokens, and inspect layer properties. +triggers: +- figma +- figma design +- figma mcp +--- + +# Figma MCP + +The Figma MCP server provides tools to interact with Figma designs directly from OpenHands. It uses OAuth authentication to securely access your Figma account. + +## Installation + +To install the Figma MCP server, run the following command in your terminal: + +```bash +openhands mcp add figma --transport http --auth oauth https://figma.com/mcp/sse +``` + +This will: +1. Add the Figma MCP server to your OpenHands configuration +2. Configure OAuth authentication (you'll be prompted to authorize when first used) +3. Enable the server immediately + +After installation, restart your OpenHands session to apply the changes. + +## Verification + +To verify the installation: + +```bash +openhands mcp list +``` + +You should see the Figma server listed with status "enabled". + +## Managing the Server + +```bash +# Disable the Figma MCP server +openhands mcp disable figma + +# Re-enable the Figma MCP server +openhands mcp enable figma + +# Remove the Figma MCP server +openhands mcp remove figma + +# Get details about the Figma server +openhands mcp get figma +``` + +## Documentation + +- Figma MCP Server: https://developers.figma.com/docs/figma-mcp-server +- Remote Server Installation: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/ +- Figma API: https://www.figma.com/developers/api From c9ccd68918e28cb15de7fb699b293bad603e2e48 Mon Sep 17 00:00:00 2001 From: openhands Date: Sun, 1 Mar 2026 13:19:22 +0000 Subject: [PATCH 2/8] fix: correct Figma MCP server URL The URL was incorrectly pointing to https://figma.com/mcp/sse but the official Figma documentation specifies https://mcp.figma.com/mcp Reference: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/ Co-authored-by: openhands --- skills/figma/SKILL.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/skills/figma/SKILL.md b/skills/figma/SKILL.md index c22648f..786c3bd 100644 --- a/skills/figma/SKILL.md +++ b/skills/figma/SKILL.md @@ -16,12 +16,12 @@ The Figma MCP server provides tools to interact with Figma designs directly from To install the Figma MCP server, run the following command in your terminal: ```bash -openhands mcp add figma --transport http --auth oauth https://figma.com/mcp/sse +openhands mcp add figma --transport http https://mcp.figma.com/mcp ``` This will: 1. Add the Figma MCP server to your OpenHands configuration -2. Configure OAuth authentication (you'll be prompted to authorize when first used) +2. You'll be prompted to authorize via Figma OAuth when first used 3. Enable the server immediately After installation, restart your OpenHands session to apply the changes. From ebb5feb75a50b79b3078f819276fec65a8a1d8ec Mon Sep 17 00:00:00 2001 From: openhands Date: Mon, 2 Mar 2026 04:11:55 +0000 Subject: [PATCH 3/8] Add figma skill to marketplace Co-authored-by: openhands --- marketplaces/default.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/marketplaces/default.json b/marketplaces/default.json index 6c81d44..c4f235a 100644 --- a/marketplaces/default.json +++ b/marketplaces/default.json @@ -140,6 +140,18 @@ "images" ] }, + { + "name": "figma", + "source": "./figma", + "description": "Access Figma designs using the Figma MCP server. Read design files, extract components, get design tokens, and inspect layer properties.", + "category": "design", + "keywords": [ + "figma", + "design", + "mcp", + "ui" + ] + }, { "name": "flarglebargle", "source": "./flarglebargle", From 32e903d489401f931671ac9182bc653eb346cfdf Mon Sep 17 00:00:00 2001 From: openhands Date: Mon, 2 Mar 2026 12:29:51 +0000 Subject: [PATCH 4/8] Fix Figma MCP skill: consistent URL, progressive disclosure - Fix URL inconsistency: use official https://mcp.figma.com/mcp URL in both files - Update description to clarify read-only access - Apply progressive disclosure: slim SKILL.md to ~15 lines, move details to README.md - Remove content duplication between files - Add Usage and Troubleshooting sections to README.md Co-authored-by: openhands --- skills/figma/README.md | 44 ++++++++++++++++++++++++++--------------- skills/figma/SKILL.md | 45 ++++-------------------------------------- 2 files changed, 32 insertions(+), 57 deletions(-) diff --git a/skills/figma/README.md b/skills/figma/README.md index 50895b4..7892061 100644 --- a/skills/figma/README.md +++ b/skills/figma/README.md @@ -1,30 +1,27 @@ # Figma MCP -Access Figma designs using the Figma MCP server. Read design files, extract components, get design tokens, and inspect layer properties. +Read-only access to Figma designs using the Figma MCP server. Read design files, extract components, get design tokens, and inspect layer properties. -## Triggers +## Overview -This skill is activated by the following keywords: - -- `figma` -- `figma design` -- `figma mcp` +The Figma MCP server provides tools to interact with Figma designs directly from OpenHands. It uses OAuth authentication to securely access your Figma account. -## Details +With the server enabled, you can: -The Figma MCP server provides tools to interact with Figma designs directly from OpenHands. It uses OAuth authentication to securely access your Figma account. +- **Generate code from selected frames**: Select a Figma frame and turn it into code +- **Extract design context**: Pull in variables, components, and layout data +- **Retrieve design tokens**: Access colors, typography, and spacing values +- **Inspect layer properties**: Get detailed information about any design element ## Installation -To install the Figma MCP server, run the following command in your terminal: - ```bash -openhands mcp add figma --transport http --auth oauth https://figma.com/mcp/sse +openhands mcp add figma --transport http https://mcp.figma.com/mcp ``` This will: 1. Add the Figma MCP server to your OpenHands configuration -2. Configure OAuth authentication (you'll be prompted to authorize when first used) +2. You'll be prompted to authorize via Figma OAuth when first used 3. Enable the server immediately After installation, restart your OpenHands session to apply the changes. @@ -55,8 +52,23 @@ openhands mcp remove figma openhands mcp get figma ``` +## Usage + +The MCP server is link-based. To use it: + +1. Copy the link to a frame or layer in Figma +2. Prompt OpenHands to help you implement the design at the selected URL + +The agent will extract the node-id from the URL and retrieve information about that object. + +## Troubleshooting + +- **OAuth errors**: Re-run the installation command to re-authenticate +- **Server not found**: Ensure you've restarted your OpenHands session after installation +- **Access denied**: Verify you have view access to the Figma file you're trying to access + ## Documentation -- Figma MCP Server: https://developers.figma.com/docs/figma-mcp-server -- Remote Server Installation: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/ -- Figma API: https://www.figma.com/developers/api +- [Figma MCP Server](https://developers.figma.com/docs/figma-mcp-server) +- [Remote Server Installation](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/) +- [Figma API](https://www.figma.com/developers/api) diff --git a/skills/figma/SKILL.md b/skills/figma/SKILL.md index 786c3bd..0ae40e8 100644 --- a/skills/figma/SKILL.md +++ b/skills/figma/SKILL.md @@ -1,6 +1,6 @@ --- name: figma -description: Access Figma designs using the Figma MCP server. Read design files, extract components, get design tokens, and inspect layer properties. +description: Read-only access to Figma designs using the Figma MCP server. Read design files, extract components, get design tokens, and inspect layer properties. triggers: - figma - figma design @@ -9,51 +9,14 @@ triggers: # Figma MCP -The Figma MCP server provides tools to interact with Figma designs directly from OpenHands. It uses OAuth authentication to securely access your Figma account. +Read-only access to Figma designs via the official Figma MCP server. Uses OAuth authentication. ## Installation -To install the Figma MCP server, run the following command in your terminal: - ```bash openhands mcp add figma --transport http https://mcp.figma.com/mcp ``` -This will: -1. Add the Figma MCP server to your OpenHands configuration -2. You'll be prompted to authorize via Figma OAuth when first used -3. Enable the server immediately - -After installation, restart your OpenHands session to apply the changes. - -## Verification - -To verify the installation: - -```bash -openhands mcp list -``` - -You should see the Figma server listed with status "enabled". - -## Managing the Server - -```bash -# Disable the Figma MCP server -openhands mcp disable figma - -# Re-enable the Figma MCP server -openhands mcp enable figma - -# Remove the Figma MCP server -openhands mcp remove figma - -# Get details about the Figma server -openhands mcp get figma -``` - -## Documentation +You'll be prompted to authorize via Figma OAuth when first used. Restart your OpenHands session after installation. -- Figma MCP Server: https://developers.figma.com/docs/figma-mcp-server -- Remote Server Installation: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/ -- Figma API: https://www.figma.com/developers/api +See [README.md](./README.md) for verification, management commands, and detailed documentation. From 6eece6776a53571dcba94a8dd86f56cad05fdc2b Mon Sep 17 00:00:00 2001 From: openhands Date: Mon, 2 Mar 2026 12:57:00 +0000 Subject: [PATCH 5/8] Fix data inconsistency: clarify OAuth is automatic - Updated PR description to use correct installation command - Clarified in README.md that OAuth is handled automatically by the server at runtime, not via an installation flag - All installation commands now consistent across PR description, SKILL.md, and README.md Co-authored-by: openhands --- skills/figma/README.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/skills/figma/README.md b/skills/figma/README.md index 7892061..21ef3a8 100644 --- a/skills/figma/README.md +++ b/skills/figma/README.md @@ -19,10 +19,7 @@ With the server enabled, you can: openhands mcp add figma --transport http https://mcp.figma.com/mcp ``` -This will: -1. Add the Figma MCP server to your OpenHands configuration -2. You'll be prompted to authorize via Figma OAuth when first used -3. Enable the server immediately +This adds the Figma MCP server to your OpenHands configuration. OAuth authentication is handled automatically by the server - you'll be prompted to authorize via your browser when first accessing Figma data. After installation, restart your OpenHands session to apply the changes. From cbca1b29c00e90180baee33ae0f45b501b39a53b Mon Sep 17 00:00:00 2001 From: openhands Date: Tue, 3 Mar 2026 12:39:44 +0000 Subject: [PATCH 6/8] docs: address review comments on Figma MCP skill - Clarify why restart is required (MCP servers initialized at session startup) - Fix OAuth troubleshooting guidance (browser session, not re-running mcp add) Co-authored-by: openhands --- skills/figma/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/skills/figma/README.md b/skills/figma/README.md index 21ef3a8..d2f21f8 100644 --- a/skills/figma/README.md +++ b/skills/figma/README.md @@ -21,7 +21,7 @@ openhands mcp add figma --transport http https://mcp.figma.com/mcp This adds the Figma MCP server to your OpenHands configuration. OAuth authentication is handled automatically by the server - you'll be prompted to authorize via your browser when first accessing Figma data. -After installation, restart your OpenHands session to apply the changes. +**Note:** Restart your OpenHands session after installation to load the new MCP server. This is required because MCP servers are initialized at session startup - the server configuration is loaded once when OpenHands starts, so changes to `mcp.json` require a restart to take effect. ## Verification @@ -60,7 +60,7 @@ The agent will extract the node-id from the URL and retrieve information about t ## Troubleshooting -- **OAuth errors**: Re-run the installation command to re-authenticate +- **OAuth errors**: The Figma MCP server uses browser-based OAuth that caches credentials. To re-authenticate, you may need to clear your browser's OAuth session for Figma or visit `https://www.figma.com/` and log out/log back in. Re-running `openhands mcp add` will refresh the server configuration but won't reset OAuth state cached in your browser. - **Server not found**: Ensure you've restarted your OpenHands session after installation - **Access denied**: Verify you have view access to the Figma file you're trying to access From 20a601ae9766356f06394a8e654723ded70da011 Mon Sep 17 00:00:00 2001 From: openhands Date: Sat, 7 Mar 2026 20:35:05 +0000 Subject: [PATCH 7/8] Clarify Figma MCP README workflows --- skills/figma/README.md | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/skills/figma/README.md b/skills/figma/README.md index d2f21f8..9e1231e 100644 --- a/skills/figma/README.md +++ b/skills/figma/README.md @@ -8,10 +8,10 @@ The Figma MCP server provides tools to interact with Figma designs directly from With the server enabled, you can: -- **Generate code from selected frames**: Select a Figma frame and turn it into code +- **Generate implementation prompts from frames**: Ask OpenHands to read a Figma frame through MCP and generate React, HTML, or other code from the retrieved design data - **Extract design context**: Pull in variables, components, and layout data - **Retrieve design tokens**: Access colors, typography, and spacing values -- **Inspect layer properties**: Get detailed information about any design element +- **Inspect layer properties**: Get detailed information about supported Figma nodes such as frames, components, instances, text, and shapes ## Installation @@ -19,7 +19,7 @@ With the server enabled, you can: openhands mcp add figma --transport http https://mcp.figma.com/mcp ``` -This adds the Figma MCP server to your OpenHands configuration. OAuth authentication is handled automatically by the server - you'll be prompted to authorize via your browser when first accessing Figma data. +This adds the Figma MCP server to your OpenHands configuration. The first time OpenHands calls a Figma MCP tool, the server will open your browser and prompt you to authorize access with Figma OAuth. **Note:** Restart your OpenHands session after installation to load the new MCP server. This is required because MCP servers are initialized at session startup - the server configuration is loaded once when OpenHands starts, so changes to `mcp.json` require a restart to take effect. @@ -53,14 +53,20 @@ openhands mcp get figma The MCP server is link-based. To use it: -1. Copy the link to a frame or layer in Figma -2. Prompt OpenHands to help you implement the design at the selected URL +1. In Figma, copy the link to a frame or layer (for example `https://www.figma.com/file/ABC123/MyDesign?node-id=1-2`) +2. In OpenHands, prompt: `Generate a React component from this Figma frame: https://www.figma.com/file/ABC123/MyDesign?node-id=1-2` +3. OpenHands will use the Figma MCP server to read the frame data, then generate code from the retrieved design information -The agent will extract the node-id from the URL and retrieve information about that object. +You can use the same pattern for other tasks, such as extracting design tokens or inspecting a component tree from a specific node URL. ## Troubleshooting -- **OAuth errors**: The Figma MCP server uses browser-based OAuth that caches credentials. To re-authenticate, you may need to clear your browser's OAuth session for Figma or visit `https://www.figma.com/` and log out/log back in. Re-running `openhands mcp add` will refresh the server configuration but won't reset OAuth state cached in your browser. +- **OAuth errors**: + 1. Visit `https://www.figma.com/`, log out, and log back in to refresh your Figma session + 2. If that does not work, clear your browser cookies/cache for `figma.com` + 3. Restart your OpenHands session and retry the same Figma prompt + + Re-running `openhands mcp add` refreshes the server configuration, but it does not reset OAuth state cached in your browser. - **Server not found**: Ensure you've restarted your OpenHands session after installation - **Access denied**: Verify you have view access to the Figma file you're trying to access From 1b8ab33b117894fb1bf4c325ace59ae9fe7c6c30 Mon Sep 17 00:00:00 2001 From: openhands Date: Thu, 19 Mar 2026 02:32:48 +0000 Subject: [PATCH 8/8] Clarify Figma MCP prompts and OAuth wording Co-authored-by: openhands --- skills/figma/README.md | 35 ++++++++++++++++++++++------------- skills/figma/SKILL.md | 8 ++++---- 2 files changed, 26 insertions(+), 17 deletions(-) diff --git a/skills/figma/README.md b/skills/figma/README.md index 9e1231e..a1fbb93 100644 --- a/skills/figma/README.md +++ b/skills/figma/README.md @@ -1,6 +1,6 @@ # Figma MCP -Read-only access to Figma designs using the Figma MCP server. Read design files, extract components, get design tokens, and inspect layer properties. +Read Figma design data using the Figma MCP server. Inspect files, components, design tokens, and layer properties. ## Overview @@ -8,10 +8,10 @@ The Figma MCP server provides tools to interact with Figma designs directly from With the server enabled, you can: -- **Generate implementation prompts from frames**: Ask OpenHands to read a Figma frame through MCP and generate React, HTML, or other code from the retrieved design data -- **Extract design context**: Pull in variables, components, and layout data -- **Retrieve design tokens**: Access colors, typography, and spacing values -- **Inspect layer properties**: Get detailed information about supported Figma nodes such as frames, components, instances, text, and shapes +- **Generate code from frames**: Ask OpenHands to read a Figma frame through MCP and generate React, HTML, or other code from the retrieved design data +- **Extract design context**: Retrieve variables, components, and layout information from a file or frame +- **Retrieve design tokens**: Pull colors, typography, spacing, and other reusable style values +- **Inspect node properties**: Review supported node types such as frames, components, instances, text, and shapes ## Installation @@ -21,7 +21,7 @@ openhands mcp add figma --transport http https://mcp.figma.com/mcp This adds the Figma MCP server to your OpenHands configuration. The first time OpenHands calls a Figma MCP tool, the server will open your browser and prompt you to authorize access with Figma OAuth. -**Note:** Restart your OpenHands session after installation to load the new MCP server. This is required because MCP servers are initialized at session startup - the server configuration is loaded once when OpenHands starts, so changes to `mcp.json` require a restart to take effect. +**Note:** Restart your OpenHands session after installation to load the new MCP server. This is required because MCP servers are initialized at session startup. ## Verification @@ -51,13 +51,22 @@ openhands mcp get figma ## Usage -The MCP server is link-based. To use it: - -1. In Figma, copy the link to a frame or layer (for example `https://www.figma.com/file/ABC123/MyDesign?node-id=1-2`) -2. In OpenHands, prompt: `Generate a React component from this Figma frame: https://www.figma.com/file/ABC123/MyDesign?node-id=1-2` -3. OpenHands will use the Figma MCP server to read the frame data, then generate code from the retrieved design information - -You can use the same pattern for other tasks, such as extracting design tokens or inspecting a component tree from a specific node URL. +The MCP server is link-based. Start by copying the link to a Figma file, frame, or layer, then use a prompt like one of these in OpenHands: + +- **Generate code from a frame** + ```text + Generate a React component from this Figma frame: https://www.figma.com/file/ABC123/MyDesign?node-id=1-2 + ``` +- **Extract design tokens from a file** + ```text + List the colors, typography, and spacing tokens used in this Figma file: https://www.figma.com/file/ABC123/MyDesign + ``` +- **Inspect component structure** + ```text + Show me the component tree and layer hierarchy for this Figma frame: https://www.figma.com/file/ABC123/MyDesign?node-id=1-2 + ``` + +For each prompt, OpenHands uses the Figma MCP server to read the referenced design data before generating a response. ## Troubleshooting diff --git a/skills/figma/SKILL.md b/skills/figma/SKILL.md index 0ae40e8..1bfb56b 100644 --- a/skills/figma/SKILL.md +++ b/skills/figma/SKILL.md @@ -1,6 +1,6 @@ --- name: figma -description: Read-only access to Figma designs using the Figma MCP server. Read design files, extract components, get design tokens, and inspect layer properties. +description: Read Figma design data using the Figma MCP server. Inspect files, components, design tokens, and layer properties. triggers: - figma - figma design @@ -9,7 +9,7 @@ triggers: # Figma MCP -Read-only access to Figma designs via the official Figma MCP server. Uses OAuth authentication. +Read Figma design data via the official Figma MCP server. Uses OAuth authentication. ## Installation @@ -17,6 +17,6 @@ Read-only access to Figma designs via the official Figma MCP server. Uses OAuth openhands mcp add figma --transport http https://mcp.figma.com/mcp ``` -You'll be prompted to authorize via Figma OAuth when first used. Restart your OpenHands session after installation. +You'll be prompted to authorize via Figma OAuth the first time OpenHands calls a Figma tool. Restart your OpenHands session after installation. -See [README.md](./README.md) for verification, management commands, and detailed documentation. +See [README.md](./README.md) for verification, example prompts, management commands, and detailed documentation.