F_MCP

Provides an MCP bridge to control Figma from Claude Code by routing image fetches and commands through a local MCP server and a Figma plugin.

typescript

0

GitHub Stars

typescript

Language

4 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "yerininin-f_mcp": {
      "command": "node",
      "args": [
        "./mcp-ws-image/dist/index.js"
      ]
    }
  }
}

This MCP server bridges Claude Code and Figma by routing MCP commands through a local MCP server and a dedicated Figma plugin. It enables image insertion and other Figma operations by fetching images on the server, encoding them in base64, and applying them inside Figma via a plugin.

How to use

You will connect Claude Code to a local MCP channel and execute commands to manipulate Figma nodes. The flow relies on an MCP server running on your machine, a separate image MCP that fetches and base64-encodes images, and a Figma plugin that decodes and applies those images inside Figma.

How to install

Prerequisites: Node.js and npm installed on your system. A working Claude Code environment and access to Figma Desktop App are also required.

# MCP Server
cd mcp-server && npm install && npm run build

# Image MCP Server
cd mcp-ws-image && npm install && npm run build

# Figma Plugin
cd figma-plugin && npm install && npm run build

Additional setup and configuration

Register the MCP server that handles image fills by adding it to your project configuration. Create or edit the root .mcp.json to register the image fill command so Claude Code can connect to the image fetcher.

{
  "mcpServers": {
    "set_node_image_fill": {
      "command": "node",
      "args": ["./mcp-ws-image/dist/index.js"]
    }
  }
}

Using from Claude Code

Connect to the channel named in your setup, then create a frame and apply an image to a node by providing the channel name and the node’s identifier. This enables you to programmatically insert images into your Figma document.

# Connect to your channel (example channel name)
> join_channel("c32c7nbc")

# Create a frame
> create_frame(x=0, y=0, width=1080, height=1080, name="Banner")

# Apply an image fill to a node
> set_node_image_fill(channel="c32c7nbc", nodeId="44:56", imageUrl="https://...")

Architecture

The system is a three-layer setup: the MCP Server sits between Claude Code and Figma, the Image MCP Server handles image fetching and base64 encoding, and the Figma Plugin runs inside Figma to apply the image data using the Figma API.

Image flow detail

When you call set_node_image_fill, Claude Code sends the request to the Image MCP. The Image MCP fetches the image URL, converts the data to base64, and forwards it via WebSocket to the Figma Plugin. The plugin decodes the data, creates a Figma image, and applies it to the target node.

Network access

The Figma plugin specifies allowed network domains in its manifest. If you add new image sources, update the allowed domains accordingly and rebuild the plugin.

Credits and licensing

This project is derived from open-source work and distributed under an MIT-style license.

Available tools

channel-specs

Marketing channel image size specs used by Claude Code skills

add-figma-command

Guide to add new Figma commands to the MCP workflow

set_node_image_fill

Fetch image from URL, encode to base64, and apply as node image fill in Figma