What is Figma To Vue Mcp

figma-to-vue-mcp is a Model Context Protocol (MCP) server that generates Vue 3 components from Figma designs, adhering to Hostinger’s design system and HComponents requirements.

Use cases

Use cases include generating Vue components for web applications, creating reusable UI components based on Figma designs, and streamlining the design-to-development workflow in teams utilizing Figma and Vue.js.

How to use

To use figma-to-vue-mcp, clone the repository, install dependencies, set up your Figma access token in a .env file, and start the server. Send a POST request to ‘/generate-component’ with the Figma URL and desired component name to generate Vue components.

Key features

Key features include conversion of Figma designs to Vue 3 components with TypeScript, automatic import of HComponents, BEM-style CSS generation, design system consistency, responsive layout handling, and support for component props and dynamic content.

Where to use

figma-to-vue-mcp can be used in web development projects where Vue.js is employed, particularly in applications that require integration with Figma designs and adherence to specific design systems.

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.

Features

• 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

Setup

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 file with your Figma access token:

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

Usage

Send a POST request to /generate-component with the following body:

{
  "figmaUrl": "https://www.figma.com/file/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]",
  "componentName": "MyComponent"
}

The server will respond with:

{
  "component": "// Generated Vue component code"
}

Example

curl -X POST http://localhost:3000/generate-component \
  -H "Content-Type: application/json" \
  -d '{
    "figmaUrl": "https://www.figma.com/file/abc123/MyDesign?node-id=1:1",
    "componentName": "YoutubeLinks"
  }'

Development

• npm run dev: Start development server with hot reload
• npm run build: Build for production
• npm test: Run tests

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT