Figma to Vue MCP Server
by Tomas-Jankauskas
This is a Model Context Protocol (MCP) server that generates Vue 3 components from Figma designs. It's designed to follow Hostinger's design system and HComponents requirements.
Last updated: N/A
What is Figma to Vue MCP Server?
The Figma to Vue MCP Server is a tool that converts Figma designs into Vue 3 components, streamlining the process of translating designs into functional code. It leverages the Model Context Protocol to facilitate this conversion, ensuring consistency with Hostinger's design system and HComponents.
How to use Figma to Vue MCP Server?
To use the server, clone the repository, install dependencies, configure your Figma access token in a .env file, and start the server. Then, send a POST request to the /generate-component endpoint with the Figma URL and desired component name. The server will respond with the generated Vue component code.
Key features of Figma to Vue MCP Server
Converts Figma designs to Vue 3 components
Uses TypeScript and
<script setup>syntaxAutomatically imports and uses HComponents
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
Rapid prototyping of Vue components from Figma designs
Maintaining design system consistency across Vue applications
Automating the conversion of design assets into reusable code
Accelerating the development process by reducing manual coding
Creating Vue components that adhere to Hostinger's design guidelines
FAQ from Figma to Vue MCP Server
What is a Figma access token and where do I get it?
What is a Figma access token and where do I get it?
A Figma access token is required to authenticate with the Figma API. You can obtain it from your Figma account settings under 'Personal Access Tokens'.
What if the generated component doesn't look exactly like the Figma design?
What if the generated component doesn't look exactly like the Figma design?
The server aims to provide a close approximation, but some manual adjustments may be necessary to perfectly match the design. Consider contributing improvements to the project to handle more complex scenarios.
Can I customize the generated component's code?
Can I customize the generated component's code?
Yes, the generated code is a starting point. You can modify it to fit your specific requirements and add custom logic.
Does this server support all Figma features?
Does this server support all Figma features?
The server supports a wide range of Figma features, but some advanced or less common features may not be fully supported. Check the documentation and contribute to expand support.
How do I contribute to the project?
How do I contribute to the project?
Fork the repository, create a feature branch, commit your changes, push to the branch, and open a pull request. See the Contributing section in the README for more details.