What does Figma to Vue do?

Figma to Vue generates Vue 3 components from Figma designs, automatically incorporating your design system and HComponents for consistency and efficiency.

What technologies does it use?

It utilizes Vue 3, TypeScript, and the ` ` syntax for modern component development. It also generates BEM-style CSS classes.

How does it maintain design system consistency?

The tool is specifically designed to adhere to Hostinger's design system by automatically importing and using HComponents where appropriate.

How do I use Figma to Vue?

You send a POST request to the server with your Figma file URL and desired component name, and the server returns the generated Vue component code.

Does it support responsive layouts?

Yes, Figma to Vue is designed to handle responsive layouts from your Figma designs.

Figma To Vue

Name: Figma To Vue
Author: Tomas-Jankauskas

byTomas-Jankauskas

•

Design Tools

Developer Tools

Productivity & Workflow

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

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

01Generates BEM-style CSS classes.

02Handles responsive layouts.

03Automatically imports and uses HComponents where appropriate.

04Preserves design system consistency.

053 GitHub stars

06Converts Figma designs to Vue 3 components with TypeScript and <script setup> syntax.

Use Cases

01Maintaining design system consistency across Vue.js projects.

02Rapid prototyping of Vue.js components based on Figma designs.

03Automating the conversion of design assets into reusable Vue components.