figma

This MCP server provides a unified interface to interact with Figma designs. In Readonly mode, you can fetch design information from a Figma file using a URL, including file metadata, node details, styles, assets, variables, components, variants, and responsive behavior. In Write mode, the server can create or update designs by connecting to the Figma plugin, enabling actions such as creating frames, shapes, text, and components; instantiating components; updating node properties; applying fills, strokes, and effects; deleting nodes; and performing smart element creation. The server exposes a range of endpoints through the MCP protocol to access these capabilities via a consistent API, allowing Claude AI or other clients to programmatically read and modify Figma designs.

To use the server, ensure you have a valid Figma access token set in your environment. Start the server with the Node.js runtime, then connect to it using the MCP client tooling or your integration layer. When performing write operations, you will need the Figma plugin installed in the Figma desktop app and appropriate permissions to modify the target design. The server also includes unit and integration tests to verify functionality and flow from design creation to reading, which you can run as part of your development workflow.

Prerequisites:

• Node.js 18 or higher
• npm (comes with Node.js)
• A Figma account and a valid access token
• The Figma MCP plugin installed in the Figma desktop app for write mode (if you plan to use write capabilities)

Install and run locally:

1. Clone the repository:

git clone https://github.com/your-username/figma-server.git
cd figma-server

2. Install dependencies:

npm install

3. Build the server (if the project uses a build step):

npm run build

4. Configure environment variables (see configuration section below).
5. Start the server:

npm start

If you prefer development workflows with hot reloads or TypeScript compilation, you can use the development script:

npm run dev

Configuration is typically provided via environment variables (see the Configuration section).

Tips and common issues:

• Ensure FIGMA_ACCESS_TOKEN is set with a valid Figma API token; without it, read/write operations will fail.
• If you encounter build/runtime errors, confirm Node.js version compatibility (Node 18+ is recommended) and that dependencies are installed correctly.
• For write operations, the Figma plugin must be installed and properly connected to allow programmatic design changes.
• When running tests, there are both TypeScript and JavaScript variants for integration tests; use the one that fits your environment.
• Review API endpoints and tool handlers in the MCP server codebase to understand available actions (e.g., read node details, update node properties, create components, etc.).