skills.rest
modrinth
modrinthOFFICIAL
Explore all skills by this author →
Website𝕏@modrinthGitHub

figma-mcp

Translate Figma designs into Vue layouts using Figma MCP tools.

2.3k|559|Updated Jun 20, 2021
Search Tags:#ui/ux#vue#figma#frontend development#component generation#design to code
One-click install
npx skills add https://github.com/modrinth/code --skill figma-mcp-modrinth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-mcp
Source: https://github.com/modrinth/code/tree/main/.claude/skills/figma-mcp
Command: npx skills add https://github.com/modrinth/code --skill figma-mcp-modrinth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the conversion of Figma designs into functional Vue page or component layouts, streamlining the front-end development process.

Core Features & Use Cases

  • Design Implementation: Translates Figma designs directly into Vue SFCs.
  • Component Mapping: Identifies and utilizes existing UI components and design tokens from the Modrinth codebase.
  • Use Case: When a designer provides a Figma link for a new feature's UI, this Skill can generate the initial Vue component structure, complete with styling and component integration.

Quick Start

Use the figma-mcp skill to translate the Figma design at https://www.figma.com/file/examplefilekey/examplenodeid into a Vue component.

Frequently Asked Questions about figma-mcp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Figma designs to Vue components?▼

To convert Figma designs to Vue components, provide a Figma URL to parse the design context and generate Vue SFCs. The tool translates layouts by mapping colors to design tokens and matching spacing values for accurate frontend implementation.

What is Figma to Vue page generation and how does it work?▼

Figma to Vue page generation is the automated translation of Figma designs into Vue component layouts. It works by parsing Figma URLs, retrieving screenshots and variable definitions, and mapping design elements to existing UI components and design tokens.

Can I map Figma design tokens to an existing Vue codebase?▼

Yes, you can map Figma design tokens to an existing Vue codebase. The translation process identifies reusable components from your codebase and adapts Figma colors and spacing values to match your project's established design tokens.

What's the best way to generate Vue SFCs from a Figma link?▼

The best way to generate Vue SFCs from a Figma link is to pass the URL to the figma-mcp skill. It retrieves the design context and screenshots, then outputs functional Vue single-file components with integrated styling and mapped design tokens.

Does Figma to Vue generation work with custom UI components?▼

Yes, Figma to Vue generation works with custom UI components by identifying and utilizing existing components from your codebase during translation. It adapts the parsed Figma layout to match your specific component library and design system.

Related Skills

Explore More Design & Creative Skills→
northseadlnorthseadl

figma

Fetch Figma design context and translate nodes into React and Tailwind code.

Community
Advanced
Yoriichi-DangYoriichi-Dang

web-component-design

Guide design of reusable UI components across React, Vue, and Svelte.

Community
Basic
boomNDSboomNDS

web-component-design

Create reusable UI components across React, Vue, and Svelte.

Community
Advanced
tankpkgtankpkg
1

@tank/figma-to-code

Translate Figma designs into CSS and component structures.

Official
Advanced