OpenViSTAI · Agents · Blockchain · Crypto
Submit a project
Menu
MCP & Tooling

Figwright

Figwright is a TypeScript MCP server paired with a Figma plugin that connects coding agents to Figma through a local WebSocket relay. It supports reading selected designs to generate framework-aware code and writing or editing canvas content from an agent.

Explore the practical guide ↓

Independent OpenViST project profile, based on linked sources.

Figwright — OpenViST project profile in MCP & Tooling.
OpenViST project illustration. See the linked sources for product details.
Understand the project

Practical overview

When it fits

Use Figwright when an MCP-compatible coding agent needs to work in both directions between Figma and a codebase: generating code from a selected design or changing the canvas from an agent prompt.

Who it is for

  • Developers using MCP-compatible coding agents who want to generate code from Figma designs.
  • Design and engineering teams who want agents to create or edit Figma canvas content.
  • Users of Claude Code, Cursor, Codex or another MCP client.

Documented uses

  • Convert a selected Figma design into framework-aware code informed by layout, typography, variables and components.
  • Reuse a project’s existing framework, styling system, components, tokens and icons in generated code.
  • Create or edit Figma frames, text, auto-layout, styles, variables, components and screens through an agent.
Before you choose

Requirements & limits

The project describes the server as free and says the free Figma tier is sufficient. A Figma desktop app is required to import the development plugin. The repository is public and MIT-licensed.

  • The workflow requires both a local MCP server and a separately imported Figma plugin.
  • The server requires Node.js 20.19+ or 22.12+; the server’s Node version is independent of the project’s build-time Node version.
  • The Figma plugin is installed from a GitHub release rather than the Figma Community marketplace.
  • The project documents both read and write workflows, with 135 tools spanning design inspection and canvas editing.

Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.

Source-based practical guide

Connect an MCP client to the Figma plugin

Set up the local Figwright server and companion plugin so an MCP client can connect to Figma.

Before you start

  • An MCP client such as Claude Code or Cursor
  • Node.js 20.19+ or 22.12+
  • Figma desktop app

Steps

  1. Add the Figwright server configuration using the command below in the MCP client.

    Documented command
    npx -y @figwright/mcp@latest

  2. Download and unzip the plugin zip from the latest GitHub release.

  3. In Figma desktop, import the unzipped manifest.json through Plugins → Development → Import plugin from manifest.

  4. Open Plugins → Development → Figwright; the plugin connects to the local server. Ask the agent to run ping to confirm the link.

Expected outcome

The MCP client and Figma plugin show a connected local workflow.

Guide limitations

  • The Figma desktop app is needed to import the plugin.
  • The plugin is not on the Figma Community marketplace.
  • Node 18, Node 21, and Node 22.0–22.11 are unsupported.
Documentation 1 ↗
Source-based practical guide

Generate a component from a selected Figma frame

Ask a connected coding agent to turn a selected Figma frame into a React component.

Before you start

  • A configured MCP client and connected Figwright plugin
  • A Figma frame selected in the canvas

Steps

  1. Select a frame in Figma.

  2. Prompt the agent: “Code this Figma selection as a React component.”

Expected outcome

The agent can use Figwright to produce framework-aware code from the selected design context.

Guide limitations

  • The README gives this as an example workflow; it does not guarantee a particular generated result.
Documentation 1 ↗
COMPARE OPTIONS

Compare options for AI coding assistance

These projects document a common task and share a project role. This is a source-based comparison, not an execution benchmark or a guarantee of interchangeability.

ProjectDocumented purposePlatformAccess and requirements
FigwrightConvert a selected Figma design into framework-aware code informed by layout, typography, variables and components.CLI, ServerThe project describes the server as free and says the free Figma tier is sufficient. A Figma desktop app is required to import the development plugin. The repository is public and MIT-licensed.
Next Devtools MCPDiscover running Next.js development servers and their available runtime tools.CLI, Server, Self-hostedThe project is published as a public GitHub repository and documents installation through npm tooling.
Ffmpeg SkillCut, join or shorten footage by removing silence.CLI, Server, Self-hostedThe public repository is MIT-licensed. The documented setup uses local FFmpeg and Python; the npx installer requires Node.
Evidence and transparency

Sources & review

Official repository ↗
Source record details
Source availability
Active
Sources checked
4 November 2026
Original website title
awdr74100/figwright · Official homepage title · retained in its source language
How we review sourcesSuggest a correction