home / mcp / figma to vue mcp server

Figma to Vue MCP Server

Generates Vue 3 components from Figma designs, applying the design system and responsive rules.

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "tomas-jankauskas-figma-to-vue-mcp": {
      "url": "http://localhost:3000/generate-component",
      "headers": {
        "PORT": "3000",
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

This MCP server automatically generates Vue 3 components from Figma designs, aligning with Hostinger’s design system and HComponents requirements. It exposes an HTTP endpoint to generate components from a Figma URL and component name, making it easy to integrate design-to-code capabilities into your workflow while ensuring consistent styling and responsive behavior.

How to use

To generate a Vue 3 component using the MCP client, send a request to the server’s generate endpoint with the design source and the desired component name. The server processes the provided Figma URL and returns the generated component code, ready to integrate into your project. This flow enables rapid iteration from design to working UI in Vue 3 with TypeScript and script setup, while applying the design system and responsive layout rules.

How to install

Prerequisites: ensure you have Node.js and npm installed on your system.

# 1. Clone the repository
git clone https://github.com/Tomas-Jankauskas/figma-to-vue-mcp.git
cd figma-to-vue-mcp

# 2. Install dependencies
npm install

# 3. Create a .env with your Figma access token
# (FIGMA_ACCESS_TOKEN is required; PORT is optional)
FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000  # Optional, defaults to 3000

# 4. Start the server
npm run dev  # For development
# or
npm start    # For production

Example and usage notes

Usage typically involves contacting the server’s generate endpoint with the Figma design URL and the desired component name. The server returns the generated Vue component code. An example client call and response are shown in the repository’s usage section to illustrate the request/response pattern.

Configuration and notes

Environment configuration is done via a .env file in the project root. The README specifies setting a Figma access token and an optional port. Keep these values secure and do not share them publicly. The Figma access token enables the server to access Figma designs, and the port determines where the MCP server listens for requests.

Development and troubleshooting

Development commands supported by the project include starting a development server, building for production, and running tests. Use npm run dev for development with hot reload, npm run build to prepare a production bundle, and npm test to run the test suite.

Security considerations

Protect the Figma access token to prevent unauthorized access to design assets. Limit access to the MCP server in production deployments and consider securing the API with appropriate authentication if exposing the generate endpoint beyond trusted clients.