Repolode
投稿する
awdr74100

awdr74100/figwright

A free, two-way Figma MCP server that lets coding agents turn Figma designs into code and write designs back to the canvas.

代替できる製品:Figma Dev Mode MCP

GitHub で見る
スター
1,103
フォーク
63
未解決の Issue
5
最終コミット
14 時間前

これは何？

Figwright connects an MCP server to a Figma plugin over a local WebSocket relay, so AI agents such as Claude Code, Cursor, and Codex can read from and write to a Figma file. On the read side, it turns a Figma selection into framework-aware code using design context such as layout, typography, variables, and components. On the write side, it can create and edit frames, text, auto-layout, styles, variables, components, and whole screens directly on the canvas.

The server runs locally alongside the plugin, and it works on the free Figma tier because it uses the plugin API rather than Dev Mode. It detects the project's framework and styling system and reuses existing components, tokens, and icons where possible. Several agents can connect at once, and each can claim its own open Figma file.

The project is set up with an npx command in an MCP client config and a plugin imported from a release zip. It also ships two installable agent skills, figma-codegen and figma-build, that guide the read and write workflows.

主な機能

  • 01Converts a Figma selection into code grounded on your framework, styling system, and existing components.
  • 02Exposes 121 MCP tools for reading and writing the Figma canvas.
  • 03Creates and edits frames, text, auto-layout, styles, variables, and components.
  • 04Runs locally, with the plugin using only Figma's public Plugin API.
  • 05Lets several agents work on different open Figma files at the same time.
  • 06Includes a plugin panel that logs every tool call and shows the payload sent to the model.

ユースケース

  • Implementing a Figma design as React or another framework component without a paid Dev Mode seat.
  • Having an AI agent build a screen or section on the Figma canvas from a written spec.
  • Keeping generated code aligned with existing design tokens and component libraries.
  • Running several coding agents against different Figma files in parallel.

トピック

#figma#mcp#design-to-code#code-generation#ai-agents#typescript#ai#claude-code#codegen#codex

よくある質問

figwright とは？
A free, two-way Figma MCP server that lets coding agents turn Figma designs into code and write designs back to the canvas. Figwright connects an MCP server to a Figma plugin over a local WebSocket relay, so AI agents such as Claude Code, Cursor, and Codex can read from and write to a Figma file. On the read side, it turns a Figma selection into framework-aware code using design context such as layout, typography, variables, and components. On the write side, it can create and edit frames, text, auto-layout, styles, variables, components, and whole screens directly on the canvas.
figwright は無料で使えますか？ライセンスは？
figwright は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
figwright は今もメンテナンスされていますか？
活発にメンテナンス中。figwright の最終コミットは 2026年10月19日 です。
figwright は何に使えますか？
Implementing a Figma design as React or another framework component without a paid Dev Mode seat. Having an AI agent build a screen or section on the Figma canvas from a written spec. Keeping generated code aligned with existing design tokens and component libraries. Running several coding agents against different Figma files in parallel.
figwright はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/awdr74100/figwright

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト