Research notes continued from https://exploringallthethings.blogspot.com/2025/04/manus-mobile-app-screenshot-to-code.html
Answer from Gpt:
OpenManus and Figma Integration: Current Capabilities and Workflow
Direct Integration with Figma
No Native Figma Support Yet: As of now, OpenManus does not offer a built-in or official integration with Figma. Its design is extensible (it supports connecting to external tools via its “Tool Integration” framework
, but there is no out-of-the-box module for Figma specifically.Community Workarounds: Instead of a direct integration, the community leverages external connectors. For example, the open-source Figma Model Context Protocol (MCP) server acts as a bridge, allowing an AI agent to fetch Figma design data. This MCP server uses Figma’s API to expose a design’s structure and styles to tools like OpenManus
In practice, developers run a local Figma-MCP service and configure OpenManus (or an AI IDE like Cursor) to query it, simulating an “integration” even though it’s not natively built into OpenManus.- medium.com
Extracting Design Data (DOM, CSS, Layout) for Figma
Web Page Analysis: OpenManus can utilize web-browsing tools to scrape and analyze web pages (the project integrated a browser toolchain early on
). This means it can retrieve a page’s DOM structure, CSS styles, and layout details through mechanisms like Puppeteer or headless browser MCP modules (indeed, a “Puppeteer-MCP” exists in the ecosystem). So technically, OpenManus can extract the building blocks of a webpage’s design (HTML elements, style rules, layout hierarchy).Transforming to Figma Format: However, OpenManus does not automatically convert that web data into a Figma file. Converting a webpage into an editable Figma design would require translating the HTML/CSS into Figma’s canvas elements – a non-trivial step that isn’t part of OpenManus’s core features. Developers would have to script this conversion (for example, by generating a Figma plugin or using the Figma plugin API to recreate elements). In short, OpenManus can gather DOM and style info, but exporting it for use in Figma demands custom tooling beyond what OpenManus provides by default.
Using Figma’s Data Itself: Conversely, if the design already lives in Figma, the Figma-MCP approach or similar plugins can extract a JSON of the Figma document’s structure. The MCP server, for instance, pulls relevant layout and styling information via the Figma API and presents it in a simplified JSON form for the AI agent
. This allows OpenManus to “understand” an existing Figma design (nodes, constraints, colors, text, etc.) and potentially use that information in code generation or analysis.
Using OpenManus with the Figma API
Read-Only Access: OpenManus (being an open framework) can make HTTP requests to external APIs, so it couldcall the Figma REST API to retrieve design data (given a file ID and an API token). In fact, the Figma-Context MCP server is essentially doing just that under the hood: it calls Figma’s API to get the file JSON and streams it to the AI
. This means OpenManus can read Figma designs programmatically.No Write Capability: Crucially, Figma’s official API does not allow creating or editing design files – it’s read-only for content. The Figma REST API is limited to reading file structure and metadata (and performing things like comments or team management), but cannot push new nodes or styles into a Figma file
. (Personal access tokens only grant “file content: read” permission, with no write scope available.) As a result, OpenManus cannot use the Figma API to generate a new Figma design or update an existing file’s geometry. Any workflow that creates or updates Figma files must involve Figma’s Plugin API (which runs inside Figma) or manual import/export steps.Implication: In practice, this means OpenManus could extract a design (via the API) but not export a new design into Figma via API. For instance, OpenManus might pull a Figma layout to help generate corresponding code, but it can’t take code and directly write a Figma file. To convert web pages or code into a Figma design, one would need a custom plugin or script acting within Figma itself.
Third-Party Plugins and Tools (e.g. FigmaToWorld)
FigmaToWorld (Export Plugin): FigmaToWorld is a community-developed Figma plugin that facilitates data exchange with external tools. It allows you to export a Figma design into a structured JSON file representing the entire node tree (frames, layers, properties)
. In a workflow context, this plugin is valuable for getting Figma data out to be processed by AI or code. For example, one could design a webpage mockup in Figma, export it as JSON via FigmaToWorld, and then let OpenManus analyze that JSON to generate HTML/CSS code. The plugin preserves the architecture of the design in machine-readable form, which is essential for AI workflows. (Note: FigmaToWorld isn’t an official Figma plugin yet – it must be side-loaded in Figma’s desktop app for now.)“Talk-to-Figma” MCP: Another third-party solution is the Figma-Context MCP (also referred to as “talk-to-figma” MCP by some developers). This isn’t a Figma plugin but a Node.js server that uses the Figma API. Its role is to feed Figma design data to AI agents in real-time. When an AI (like OpenManus or Cursor) requests info about a Figma frame, the MCP server fetches the JSON from Figma and streams only the pertinent details (layout, component names, styles) to the AI
. This effectively lets the AI “see” the Figma design and work with it (e.g., generating code that matches the design).Enabling Workflows: These third-party tools are key enablers for bridging OpenManus with Figma. Since OpenManus itself lacks direct Figma support, plugins like FigmaToWorld and MCP servers provide the missing link. They handle data extraction and even could handle injection (if one wrote a complementary plugin to create Figma nodes). In a web-to-Figma scenario, one might envision using OpenManus to parse a website, produce a JSON describing the design, and then using a Figma plugin to import that JSON and create layers. While such an import plugin isn’t readily available in the community, FigmaToWorld demonstrates the export direction, and it’s plausible to build the reverse. Essentially, third-party plugins are what make any OpenManus ↔ Figma workflow possible at the moment, by doing the heavy lifting that OpenManus alone cannot do due to API limitations.
Limitations and Workflow Examples
Current Limitations: The workflow of converting web pages or code into Figma files is still experimental and piecemeal. There’s no one-click solution that takes a live webpage and yields an editable Figma design. Users must assemble several tools: OpenManus (for intelligence and possibly code/DOM parsing), plus something like a custom script or plugin to construct the Figma file. This multi-step process can be brittle. Moreover, Figma’s API constraints mean any automated Figma creation has to run within Figma itself (plugins) – which requires manual setup and cannot be fully driven by OpenManus alone. Large designs pose performance challenges (even exporting via FigmaToWorld can be slow for big files
), and fidelity is not guaranteed when translating from web code to Figma layers due to differences in how browsers vs. design tools render layouts.Documentation & Roadmap: Official OpenManus documentation does not yet provide guides for Figma integration, since it’s not an official feature. Most knowledge comes from community write-ups and GitHub projects. For example, developers have shared tutorials on using Cursor (an AI IDE similar to OpenManus) with Figma-MCP to automate frontend coding
– demonstrating the design-to-code direction. As for the reverse (code to design), one would have to consult plugin docs and possibly build a custom solution; there aren’t well-publicized case studies of OpenManus generating a .fig file directly. The OpenManus team has hinted at future integrations: their 2025 roadmap lists “integration with popular third-party services” as a goal later in the year, which could imply more seamless hookups to tools like Figma down the line. Until then, any OpenManus ↔ Figma workflow will rely on the community-driven plugins and careful orchestration rather than native capabilities.
Sources:
OpenManus official site – Tool Integration feature
and product roadmapFigma MCP GitHub (Framelink) – explains how an AI agent can access Figma layout data via a local server
“How I Connected Figma to My AI Workflow” – example of setting up Figma-MCP and linking it to an AI IDE
Figma API limitations – Figma’s REST API is read-only for design content
(no write access for creating files)
- FigmaToWorld plugin repo – allows exporting Figma node tree to JSON for external use github.com
Model Context Protocol
"MCP is an open protocol that standardizes how applications provide context to LLMs. Think of MCP like a USB-C port for AI applications. Just as USB-C provides a standardized way to connect your devices to various peripherals and accessories, MCP provides a standardized way to connect AI models to different data sources and tools.
Why MCP?
MCP helps you build agents and complex workflows on top of LLMs. LLMs frequently need to integrate with data and tools, and MCP provides:
- A growing list of pre-built integrations that your LLM can directly plug into
- The flexibility to switch between LLM providers and vendors
- Best practices for securing your data within your infrastructure"
MCP Prompts
Figma MCP: Bridging Figma Designs and Code for Designers
Imagine if your design files could talk directly to the code. Figma MCP makes this possible. It’s a new approach that connects Figma (your design tool) with AI-powered coding tools. Below, we’ll break down what Figma MCP is, why it was created, how it works with AI coding assistants (like the Cursor IDE), and why it benefits you as a designer.
What is Figma MCP (in Simple Terms)?
Figma MCP stands for Figma Model Context Protocol. In plain language, it’s like a bridge between Figma and code . It allows an AI coding assistant to understand and use your Figma design directly when writing code. Think of it as a translator that speaks both design and code.
• “Model Context Protocol” is just a fancy way of saying there’s a standard method for sharing information with AI tools. In this case, Figma MCP shares your design’s details (colors, text, layout, etc.) with the AI.
• By using Figma MCP, an AI assistant can “see” the design through the MCP connection . This means the AI can inspect your Figma file’s components, styles, and structure as if a developer were clicking through the design specs.
• Bottom line: Figma MCP turns your Figma file into something an AI coder can read. It’s like giving the AI a copy of your design blueprint so it can build the code version accurately.
Why Was Figma MCP Created? (The Problem It Solves)
Handing off designs to developers has always been a tricky part of the workflow. Traditionally, turning a Figma design into code involves a lot of tedious work and potential miscommunication. For example, developers might spend time: taking screenshots, manually measuring spacing, copying color codes, and asking questions about fonts or interactions . This process is slow and error-prone, often leading to “constant back-and-forth” between designers and developers .
Figma MCP was created to streamline this design-to-code handoff. It addresses key pain points by making design details immediately available to coding tools. Here’s what it solves:
• Eliminates manual redlines and measurements: No more manually copying color hex codes or pixel values from Figma – the AI gets those directly . This reduces human error and saves time.
• Preserves design intent: The AI gains direct access to your component hierarchy and design system information . It knows which elements are buttons, headers, etc., and how they are styled. This means the generated code can accurately reflect the designer’s intent (fonts, spacing, colors, and all) .
• Speeds up development: By automating the translation of design to code, what used to take hours or days can happen in minutes. The original author noted that tasks which “used to take days of back-and-forth now happen in minutes” . The tedious parts are handled by the tool, freeing developers to focus on fine-tuning rather than rote HTML/CSS transcription.
In short, Figma MCP exists to bridge the gap between design and development. It ensures that nothing is lost in translation when moving from a Figma mockup to the actual product.
How Does Figma MCP Connect Designs to Code (with AI Tools)?
Figma MCP works by linking Figma to an AI-enhanced IDE (Integrated Development Environment) – basically a code editor with AI powers. One example is Cursor, an IDE that has a built-in AI coding assistant. Here’s a simplified look at how the connection happens:
1. A small MCP server runs in the background: A developer on your team sets up the Figma MCP server using Node.js (a runtime for tools) and your Figma API token (a key that lets the tool read the Figma file with permission). This server’s job is to fetch data from your Figma design and serve it to the AI in a structured way. It’s like a little translator app that knows how to talk to Figma.
2. The IDE (Cursor) connects to this server: In the Cursor IDE (or a similar AI coding tool), the developer adds the Figma MCP server as a resource. For example, they tell Cursor: “Here’s a server that can provide Figma design data.” Once linked, a green light indicates the connection is successful . Now the AI assistant in Cursor has a pipeline to request info from Figma via the MCP server.
3. Designer shares a Figma link: Let’s say the designer, has a component or screen ready. You right-click in Figma and copy the link to that design element (Figma allows sharing a link to a frame or selection). You give this link to the developer (or directly paste it into the AI tool if you’re using it yourself).
4. AI Assistant fetches the design details: In Cursor’s AI chat, the developer might prompt something like: “Generate a React component for this design using Tailwind CSS.” They include the Figma link you provided. Because of the MCP connection, the AI can retrieve the Figma design data referenced by that link. It pulls in details like the layout structure, text content, colors, and styles of that specific design. Essentially, the AI is looking at the live design (via the MCP server) rather than working from a static screenshot .
5. Code is generated from the design: The AI uses all that Figma info to write code. For instance, it might output a React JSX file with corresponding Tailwind CSS classes that match the design exactly – the same fonts, spacing, and colors. The author of the Medium article described asking the AI to “generate a React component for this design” and the AI produced code that matched the visual design and even included the design tokens (style variables) used in Figma .
In practice, it’s like magic: you paste a Figma link and get working code. The AI is able to do this because Figma MCP feeds it the raw design specs in a format it understands. It’s much more effective than any plugin that just dumps an image; here the AI gets a structured description of the design. One guide on this integration noted that having Figma MCP yields pixel-perfect implementations and massive time savings, with far fewer miscommunications .
Benefits for Designers (Even If You Don’t Code)
You might be thinking: “This sounds great for developers, but I’m a designer. How does this help me if I’m not writing code?” Even though you might never touch the MCP server or the code editor, Figma MCP can significantly improve your workflow and collaboration with developers:
• Faster Handoff: With MCP, developers can go from design to code much faster. In one case, a developer turned a complex Figma dashboard into React code in ~2 hours, a task that usually took a day or more . For you, this means your designs get implemented sooner, letting you see real results quickly or iterate faster.
• Fewer Back-and-Forth Questions: Since the AI assistant already knows things like exact spacing, font sizes, and colors from the Figma file, developers won’t need to bug you for those details. The code it generates is aligned with the design specs by default . This reduces all those clarification meetings or Slack messages asking “What is the padding here?” or “Is this the correct hex code?”.
• Accuracy and Faithfulness: Developers using Figma MCP are more likely to produce pixel-perfect results that match your vision. The AI doesn’t “eyeball” the design – it uses the exact values from Figma. That means the product UI will look closer to what you designed, with the right fonts, proportions, and hierarchy. Your design systems and style guides carry over into the code automatically .
• Better Collaboration: This setup encourages a single source of truth – the Figma file. Since the AI pulls from the latest Figma design, everyone is literally on the same page. It feels less like throwing your design over the wall to engineering and more like building a shared workflow. You, as the designer, can be confident that if you update the design (and share a new link or update the existing one), the changes can be reflected in code with minimal hassle. It tightens the feedback loop between design and development.
• More Creativity, Less Drudgery: In the big picture, freeing developers from grunt work means they can spend more time on challenging parts of the build (or polishing details) instead of retyping CSS. This often results in a higher-quality end product. And for you, it means you don’t have to compromise as much because of “time constraints” – the team can aim to implement all the nuances of your design since the heavy lifting is automated.
In summary, even if you never write a line of code, Figma MCP helps get your work into the product more swiftly and accurately. It’s as if you sent a blueprint to a 3D printer for code – the outcome is a faithful construction of your design.
An Analogy: Figma MCP as a Design-to-Code Translator
To wrap it up, let’s use a simple analogy. Imagine you designed a complex poster in English, and you need it translated to French. You could give it to someone who doesn’t speak English well and they might ask you about every sentence, possibly mistranslating some phrases. Or you could use a highly skilled translator who understands all the nuances. Figma MCP is like that skilled translator, but for design to code. It ensures nothing gets lost between the Figma “language” and the code “language.”
Another way to picture it: Figma MCP is a bridge. On one side of the bridge is your Figma design, and on the other side is the codebase. Traditionally, crossing that bridge was slow – you had to carry pieces of the design over bit by bit (export assets, write specs, etc.). Now, with this bridge in place, an AI car can drive across and deliver the entire design spec to the code side in one go . The result is a smoother journey from idea to implementation.
Conclusion
Figma MCP connects design and development in a way that hasn’t been possible before. It lets AI tools understand Figma designs directly, making the conversion to code faster and more accurate. For a Figma-based designer, this means your intent is carried through to the final product with less effort and communication overhead. It fosters a more collaborative environment where design and code speak the same language from the start. In short, Figma MCP empowers both designers and developers to create better products together – you bring the creative vision, and the technology helps ensure it’s realized in code form with fidelity and speed.
Sources: The insights above are based on Sebastian Petrus’s “How I Connected Figma to My AI Coding Workflow with MCP” Medium article and related resources , which highlight how Figma MCP transforms the design-to-code workflow. This innovative approach is already showing that “what used to take days of back-and-forth now happens in minutes” , proving its value in real-world design collaboration.