Connect to Claude
Developer Tools
Productivity & Workflow
Design Tools
Figma To Vue icon

Figma To Vue

CreatedTomas-Jankauskas

Generates Vue 3 components from Figma designs, adhering to Hostinger's design system.

NPM Package Github Repo

About

This tool is a Model Context Protocol (MCP) server designed to streamline the process of converting Figma designs into Vue 3 components. It's specifically tailored to follow Hostinger's design system and HComponents requirements, ensuring consistency and efficiency. By automatically importing and utilizing HComponents, generating BEM-style CSS classes, and handling responsive layouts, it simplifies the development workflow and allows developers to focus on creating dynamic and engaging user interfaces.

Key Features

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

Use Cases

  • Maintaining design system consistency across Vue.js projects.
  • Rapid prototyping of Vue.js components based on Figma designs.
  • Automating the conversion of design assets into reusable Vue components.
    Figma to Vue: Generate Vue 3 Components from Figma