Huolala Figma MCP: Principles and Real‑World Practice

Background

Client‑side engineers spend a large portion of mobile development time (about one‑third) manually reproducing UI designs, facing efficiency pain points, multi‑platform maintenance, and low visual fidelity when relying on manual inspection.

AI Technology Surge

Since the release of ChatGPT in late 2022, a series of AI‑related technologies such as Agents, MCP, and Skills have emerged, making traditional hand‑written UI code generation inadequate for the new AI‑driven programming paradigm.

Existing Technical Solutions

Four typical approaches are compared:

Figma plugin + low‑code platform – supports web languages only, closed source, limited flexibility.

Image input + multimodal large model – supports many languages but yields low UI fidelity and unreliable slicing.

Open‑source figma‑context MCP – open source, high fidelity, but struggles with complex layer slicing and lacks multimodal model integration.

Figma official MCP – closed source, high fidelity, yet still produces inaccurate results on complex pages.

Baidu self‑developed F2C – closed source, high fidelity, but not publicly available.

Product Positioning

Huolala Figma MCP is positioned as an essential UI development tool that addresses the shortcomings of the above solutions by delivering high UI fidelity, accurate slicing, one‑click integration with Cursor, and strong extensibility.

Overall Architecture

User Input Extraction : Parses user prompts to obtain Figma URLs and other parameters.

Figma Data Retrieval : Calls the Figma REST API to fetch node, layer, and style information.

AI Service : Performs proprietary layer cleaning, redundant layer removal, autolayout correction, and icon de‑duplication.

Intelligent IDE Transcoding : Dynamically loads required Skills (e.g., list adjustment, code style adaptation) and generates target‑language code based on the cleaned data.

MCP Functions

figma_to_code_package

: Returns a ZIP containing index.html, sliced images (2x/3x), fonts, and multimodal model output. ui2code_with_skills: Prompt template that triggers the full conversion pipeline. get_figma_property: Retrieves specific node properties for fine‑grained UI tweaks. Skills list: Built‑in resources that can be loaded on demand.

Output Artifacts

index.html : Precisely rendered HTML page serving as a reference for downstream models.

vlm_result.json : Multimodal model’s interpretation of the design.

images_2 / images_3 : 2× and 3× raster assets with semantic names.

fonts : Exported font files.

AI Algorithm Services

List Recognition & Merging

Traditional rule‑based algorithms fail on complex list components. Huolala employs a multimodal large model to output a JSON description of UI elements, then applies custom Skills to adjust HTML layout for horizontal, vertical, and grid lists. The process includes:

{
  "type": "tabBar",
  "x": 0,
  "y": 768,
  "width": 375,
  "height": 44,
  "backgroundColor": "#FFFFFF",
  "items": [
    {"text": "首页", "icon": "home", "x": 28, "y": 770, "width": 40, "height": 40},
    {"text": "订单", "icon": "order", "x": 108, "y": 770, "width": 40, "height": 40},
    {"text": "消息", "icon": "msg", "x": 188, "y": 770, "width": 40, "height": 40},
    {"text": "我的", "icon": "my", "x": 268, "y": 770, "width": 40, "height": 40}
  ]
}

Subsequent Skills rewrite the HTML hierarchy based on the JSON, handling cases such as interleaved lists, lists with dividers, and grid conversion.

Red‑Dot and Bubble Detection

Because small UI elements like notification dots are hard for generic multimodal models, a custom YOLO‑v8 detector was trained on manually labeled and synthetically generated data, achieving >90% accuracy.

Icon Recognition

Icons composed of multiple vector shapes are merged into a single raster image using a pipeline that combines control‑property analysis, geometric features, and layout relationships, followed by pixel‑level similarity detection to remove duplicates.

Layer Cleaning

Redundant or invisible layers are eliminated by projecting each layer onto a matrix; if a layer’s projection is fully covered by higher‑z‑index layers, it is discarded, with special handling for transparency and rounded corners.

Layout Calculation

Complex layouts (e.g., overlapping groups, absolute‑positioned tabs, flex‑based distributions) are identified and recomputed into appropriate CSS structures such as flex, grid, or table based on spacing thresholds and element dimensions.

Practical Deployment

Solution Comparison

Side‑by‑side screenshots show that Huolala Figma MCP consistently produces higher visual fidelity and correct slicing compared with multimodal models, open‑source figma‑context MCP, and the official Figma MCP.

Business Use Cases

New page creation: manual effort reduced from 0.5 day to 2 minutes.

Adding a new card style to an existing page: reduced from 30 minutes to 2 minutes.

Adding a button: reduced from 10 minutes to 1 minute.

These gains are achieved by invoking the service with concise prompts that specify the target language (e.g., React, Objective‑C, Swift, Kotlin, React Native) and desired assets.

Multi‑Language Transcoding

Huolala Figma MCP has been successfully applied to H5, Objective‑C, Swift, Kotlin, and React Native projects, delivering comparable high fidelity across all targets.

Conclusion and Future Work

Automatic analysis of project‑specific component implementations to reduce prompt complexity.

Automated UI‑to‑code mapping that locates the corresponding class in the codebase.

Extended Skills for tasks such as image compression and CDN upload.

Automated visual fidelity scoring to close the loop between generation and verification.

References

https://github.com/glips/figma-context-mcp

https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server

https://docs.ultralytics.com/

https://modelcontextprotocol.io/docs/getting-started/intro

https://agentskills.io/specification