Figma to Vue MCP Server

What is Figma to Vue MCP Server?

A Model Context Protocol (MCP) server that generates Vue 3 components from Figma designs, following Hostinger’s design system and HComponents requirements.

How to use Figma to Vue MCP Server?

Clone the repository, install dependencies, create a .env file with a Figma access token, then start the server with npm run dev or npm start. Send a POST request to /generate-component with a JSON body containing figmaUrl and componentName.

Key features of Figma to Vue MCP Server

• Converts Figma designs to Vue 3 components with TypeScript and <script setup> syntax
• Automatically imports and uses HComponents where appropriate
• Generates BEM-style CSS classes
• Preserves design system consistency
• Handles responsive layouts
• Supports component props and dynamic content

Use cases of Figma to Vue MCP Server

• Rapidly generating Vue 3 UI components from Figma mockups for Hostinger projects
• Maintaining design system consistency by automatically using HComponents
• Reducing manual coding effort for responsive, BEM-structured Vue components
• Prototyping interfaces with live Figma design data

FAQ from Figma to Vue MCP Server

What does Figma to Vue MCP Server do?

It takes a Figma design URL and a component name, then returns a Vue 3 component (with TypeScript, <script setup>, and HComponents) that matches the design.

How do I get started?

Clone the repo, run npm install, create a .env file with your FIGMA_ACCESS_TOKEN, then start the server with npm run dev.

What does the server output?

It returns a JSON object containing the generated Vue component code as a string.

What runtime does it require?

Node.js and npm. The server runs on port 3000 by default.

Do I need a Figma access token?

Yes. You must provide a valid Figma personal access token in the FIGMA_ACCESS_TOKEN environment variable.