Conversation
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 <openhands@all-hands.dev>
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 <openhands@all-hands.dev>
all-hands-bot
left a comment
all-hands-bot
left a comment
There was a problem hiding this comment.
🔴 Needs improvement: Critical inconsistency between installation commands and architectural issues with skill structure. See inline comments for details.
Co-authored-by: openhands <openhands@all-hands.dev>
all-hands-bot
left a comment
all-hands-bot
left a comment
There was a problem hiding this comment.
🔴 Needs improvement: Installation commands contradict each other and will break for users. The previous "fix" did not resolve this.
- 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 <openhands@all-hands.dev>
all-hands-bot
left a comment
all-hands-bot
left a comment
There was a problem hiding this comment.
🔴 Needs improvement: Same data consistency issue persists - installation commands don't match across the PR.
- 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 <openhands@all-hands.dev>
all-hands-bot
left a comment
all-hands-bot
left a comment
There was a problem hiding this comment.
🟡 Acceptable - Structure is clean and follows conventions. Core functionality looks solid, but documentation could be more precise about what actually happens when using this skill.
all-hands-bot
left a comment
all-hands-bot
left a comment
There was a problem hiding this comment.
🟡 Acceptable - Structure is clean and follows conventions. Core functionality looks solid, but documentation could be more precise about what actually happens when using this skill.
|
This should not be marked ready yet because it requires testing with oauth, which a human needs to do. |
all-hands-bot
left a comment
all-hands-bot
left a comment
There was a problem hiding this comment.
🟡 Acceptable - Clean structure, follows conventions. Two minor clarifications would improve user experience.
- 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 <openhands@all-hands.dev>
all-hands-bot
left a comment
all-hands-bot
left a comment
There was a problem hiding this comment.
🟡 Acceptable - Functional skill that follows repository conventions, but documentation has clarity gaps that will cause user confusion. The installation works, but users will struggle to understand the actual workflow.
|
|
||
| With the server enabled, you can: | ||
|
|
||
| - **Generate code from selected frames**: Select a Figma frame and turn it into code |
There was a problem hiding this comment.
🟡 Suggestion - Vague Mechanism: "turn it into code" - who does what here? The MCP server reads Figma data, then OpenHands generates code from that data. This is passive voice hand-waving. Be explicit: "Read Figma frame data via MCP; ask OpenHands to generate React/HTML/etc from the retrieved design data"
| - **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 |
There was a problem hiding this comment.
🟢 Minor - Overpromising: "any design element" - does this actually work for every element type in Figma? If there are limitations (certain node types, plugin-generated content, etc.), say so. Absolute promises bite you when users find the edge case.
| 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. |
There was a problem hiding this comment.
🟡 Suggestion - Still Vague: "automatically" and "when first accessing" - WHEN exactly? Does the prompt happen during openhands mcp add or when OpenHands first calls a Figma tool? Users will wonder if they missed a step. Be concrete: "The first time OpenHands calls a Figma MCP tool, the server will open your browser to authorize via Figma OAuth."
| 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. |
There was a problem hiding this comment.
🟠 Important - Not Actionable: This is STILL wishful thinking masquerading as documentation. A previous review asked for concrete examples and the thread was marked resolved, but no example was added.
Give users something they can actually copy:
## Example Workflow
1. In Figma, right-click a frame → Copy link (e.g., `https://www.figma.com/file/ABC123/MyDesign?node-id=1-2`)
2. In OpenHands, prompt: "Generate a React component from this Figma frame: [paste URL]"
3. The agent will retrieve the frame data and generate code based on its structureWithout this, users will guess, get frustrated, and file issues.
|
|
||
| ## 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. |
There was a problem hiding this comment.
🟡 Suggestion - Ambiguous Troubleshooting: You present two different solutions as if they're the same thing: "clear your browser's OAuth session for Figma OR visit https://www.figma.com/ and log out/log back in"
Which should users try first? Are these the same thing or different approaches? Clarify:
To re-authenticate:
1. First, visit https://www.figma.com/, log out, and log back in to reset your OAuth session
2. If that doesn't work, clear your browser's cookies/cache for figma.com
3. Restart your OpenHands session to pick up the new auth stateOrdered steps beat "maybe try this or that".
4 participants
Summary
Adds a new skill for the Figma MCP server, which provides tools to interact with Figma designs directly from OpenHands.
Fix #81
What's included
skills/figma/SKILL.md- Main skill file with installation instructionsskills/figma/README.md- Skill documentationInstallation command
OAuth authentication is handled automatically - you'll be prompted to authorize when first used.
Evidence
Cannot be tested in current environment:
openhands mcp add figma --transport http https://mcp.figma.com/mcpopenhands mcp listReferences
Future updates
This is an initial version with installation instructions. Future updates will include: