figma-mcp-server
by: karthiks3000
Claude MCP Server to work with figma
πOverview
Purpose: To provide a Model Context Protocol (MCP) server that facilitates interaction with Figma designs through information extraction and design creation or updates using a dedicated plugin.
Overview: The Figma MCP Server is designed for seamless interaction with Figma design files, enabling users to extract critical design information and create or modify designs efficiently. It operates in two distinct modes: Readonly for information extraction and Write for design updates, catering to diverse user needs within the Figma ecosystem.
Key Features:
-
Readonly Mode: Allows users to extract comprehensive design details such as file information, node specifics, styles, assets, and component variants using a URL link, valuable for analysis and documentation purposes.
-
Write Mode: Enables the creation and updating of Figma designs via a plugin connection, offering functionalities like creating shapes, updating node properties, and providing smart element creation capabilities to enhance workflow efficiency.
Figma MCP Server
A Model Context Protocol (MCP) server for interacting with Figma designs. This server allows Claude AI to extract design information from Figma files and create or update designs using the Figma plugin.
Features
- Readonly Mode: Extract design information from Figma files using a URL link
- Write Mode: Create or update designs by establishing a connection with the Figma plugin
- Comprehensive API: Access a wide range of Figma features through a unified API
- Unit Testing: Includes tests to verify server functionality
- Integration Testing: Tests the flow from creating designs to reading them
Modes
Readonly Mode
In readonly mode, the server extracts design information from a Figma file using a URL link, including:
- File information
- Node details
- Styles (colors, text, effects)
- Assets (images)
- Variables
- Component identification
- Variant detection
- Responsive design detection
Write Mode
In write mode, the server creates or updates designs by connecting with the Figma plugin, including:
- Creating frames, shapes, text, and components
- Creating component instances
- Updating node properties
- Setting fills, strokes, and effects
- Deleting nodes
- Smart element creation
Prerequisites
- Node.js 18 or higher
- A Figma account and access token
- The Figma MCP plugin installed in the Figma desktop app (for write mode)
Installation
- Clone the repository:
git clone https://github.com/your-username/figma-server.git
cd figma-server
- Install dependencies:
npm install
- Build the server:
npm run build
Configuration
Set the Figma access token in the environment:
export FIGMA_ACCESS_TOKEN=your_figma_access_token
Usage
Starting the Server
npm start
Development Mode
npm run dev
Running Tests
# Run unit tests
npm test
# Run integration tests (TypeScript)
npm run test:integration
# Run integration tests (JavaScript)
npm run test:integration-js
# Run all tests
npm run test:all
# Test plugin connection
npm run test:plugin-connection-js
The plugin connection test is a simple WebSocket server that listens for connections from the Figma plugin. It verifies that the plugin is running and can connect to the server.
JavaScript versions of the tests are provided as alternatives that don't require TypeScript compilation.
Project Structure
figma-server/
βββ src/
β βββ core/
β β βββ config.ts
β β βββ logger.ts
β β βββ types.ts
β β βββ utils.ts
β βββ readonly/
β β βββ api-client.ts
β β βββ design-manager.ts
β β βββ style-extractor.ts
β βββ write/
β β βββ plugin-bridge.ts
β β βββ design-creator.ts
β β βββ component-utils.ts
β βββ mcp/
β β βββ server.ts
β β βββ tools.ts
β β βββ handlers.ts
β βββ index.ts
β βββ mode-manager.ts
βββ tests/
β βββ unit/
β β βββ server.test.ts
β βββ integration/
β βββ design-flow.test.ts
βββ plugin/
β βββ code.js
β βββ manifest.json
β βββ ui.html
βββ docs/
βββ usage.md
Documentation
For detailed usage instructions, see the usage documentation.
License
ISC