skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

huolala-figma-mcp

Converts Figma designs into UI code packages with layout detection and asset slicing.

7|2|Updated May 16, 2026
Search Tags:#MCP#figma#design to code#FastMCP#UI generation#dsl#html export
One-click install
npx skills add https://github.com/reason-machines/mcp-skills --skill huolala-figma-mcp-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: huolala-figma-mcp
Source: https://github.com/reason-machines/mcp-skills/tree/main/skills/huolala-figma-mcp
Command: npx skills add https://github.com/reason-machines/mcp-skills --skill huolala-figma-mcp-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually translating Figma designs into front-end code is slow and error-prone. This Skill runs an MCP service that converts Figma frames into structured HTML, sliced assets, fonts, and DSL data, ready for conversion to React, Vue, Swift, Kotlin, or React Native. ## Core Features & Use Cases - Figma-to-Code Conversion: The figma_to_code_package tool takes a Figma URL and returns a ZIP containing index.html, sliced images, fonts, dsl.json, and a design screenshot. - Layout and Component Detection: Recognizes distributed alignment, linear and overlapping layouts, lists, red-dot badges, and system bars, with optional VLM multimodal support for complex UIs. - Extensible DSL Pipeline: A priority-based processor registry lets you add, reorder, or disable DSL processors for platform-specific output. - Use Case: A developer pastes a Figma design URL into Cursor, the MCP service exports a ZIP package, and the agent converts the HTML and DSL into production-ready React components. ## Quick Start Set up the huolala figma mcp service with my Figma token and convert this Figma design URL into React code.

Frequently Asked Questions about huolala-figma-mcp

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

FAQPage Schema
How do I convert a Figma design to code with an MCP server?▼

Start the huolala-figma-mcp service with python -m mdap_u2c --port=10001, register it in your MCP client, then call the figma_to_code_package tool with a Figma URL containing a node-id. It returns a ZIP with HTML, images, fonts, and DSL data.

What target platforms does Figma to code conversion support?▼

The figma_to_code_package tool accepts a target_platform parameter supporting h5, vue, react, react native, ios, and android. The exported HTML and DSL can be further converted by an LLM into framework-specific code.

Does the Figma MCP service require an API token?▼

Yes, a Figma personal access token is required. Set MDAP_FIGMA_TOKEN in the .env file before starting the service, otherwise Figma API requests will fail with an invalid token error.

Why is my Figma node not found when converting a design?▼

This happens when the node-id in the URL is incorrect or the node was deleted. Right-click the frame in Figma, copy its link, and use that URL since it contains the correct node-id parameter.

How do I enable VLM support for complex UI recognition?▼

Set MDAP_VLM_PROVIDER, MDAP_VLM_API_KEY, MDAP_VLM_MODEL, and MDAP_VLM_BASE_URL environment variables, then restart the service. VLM is disabled by default and helps detect repeating list components and complex layouts.

Why are images missing from the exported ZIP package?▼

Missing images usually stem from image scale configuration or export failures. Retry the conversion with multiple image_scale values such as [3, 2, 1] to ensure assets are sliced at supported resolutions.

Related Skills

Explore More Software Engineering Skills→
reason-machinesreason-machines
4

vibefigma-figma-to-react

Convert Figma designs into React components with Tailwind CSS via the Figma API.

Official
Intermediate
kftofkftof

ui-kit-to-code

Convert hi-fi HTML UI kit screens into framework-native code.

Community
Advanced
BruceTyndallBruceTyndall

visual-regression-checker

Capture and compare web application screenshots against a baseline to detect visual drift.

Community
Intermediate
tankpkgtankpkg
1

@tank/figma-plugin

Guide Figma plugin development using the Plugin API and Dev Mode codegen.

Official
Advanced