flcker/figma-ui-desktop

Figma Desktop UI Development Guide (Framelink MCP Edition)

Solves the problem of poor fidelity when developing desktop UI from Figma designs. The root cause is treating Figma's "canvas data" (absolute coordinates, inline color values, pixel-level layer stacks) as "implementation data", directly copying it leading to rigid layouts, inaccurate colors and fonts, and missing assets.

Why use Framelink for desktop instead of the official Figma MCP Server: The official MCP's core tool get_design_context by default only generates Web code (React/Tailwind, with optional Vue/HTML/iOS), does not support Qt Widget / QML / WinUI / Flutter, and requires payment. Framelink's positioning of "only providing framework-agnostic Figma data, leaving translation to the model" — this "shortcoming" is actually an advantage in multi-framework desktop scenarios: the model can translate canvas data into any target framework, rather than being locked into Web.

This skill targets two tools from Framelink figma-developer-mcp:

Tool	Channel	Purpose
get_figma_data	Precision Channel	Fetches canvas data by fileKey + nodeId: layout, content, visuals, component information
download_figma_images	Visual Channel	Exports SVG/PNG/GIF of nodes to a local directory

If targeting Web frontend (React/Vue/HTML), use figma-ui-web instead of this skill.

Core Principles

1. Dual-channel parallel, prohibit single-channel coding. The precision channel provides exact values, the visual channel provides overall layout and text. Using only one will inevitably lead to distortion.
2. Use exact values, do not visually estimate. Colors, font sizes, font weights, spacing, corner radii, borders, shadows — always use the exact values from the design.
3. Request the design first, do not spontaneously write UI.
4. Implementation must be verified with a closed loop: Take a screenshot of the actual running program, compare it to the design screenshot → automatically fix detected defects → iterate with manual critique.

Workflow

Phase 1: Coarse Reading (Understand Requirements & Structure)

When the design is large, read it coarsely first to avoid overloading context:

1. Use get_figma_data to fetch the top-level structure (depth controls traversal, start shallow), understand which pages/sections/controls exist.
2. Use download_figma_images to export overall interface images, understand layout and text.

Phase 2: Detailed Reading (Get Precise Data Before Implementation)

For the specific section or control to be implemented, call both simultaneously:

• get_figma_data (with nodeId, read coordinates, color values, font sizes, spacing, corner radii, borders node by node)
• download_figma_images (export an image of the section to confirm relative positioning)

After obtaining data, perform structural analysis before writing code:

• Which nodes are repeating patterns (list items, cards, buttons) → extract into custom controls/components of the target framework
• Which absolute positioning is actually layout (horizontal alignment, centering, space-between, grid) → convert using the mapping table below
• Which are semantic roles (navigation/form/list) → map to existing control libraries of the target framework
• Image/icon nodes → use download_figma_images to download original files to the resource directory, do not hand-draw

Phase 3: Implementation (Framework-Agnostic Translation)

Use exact values from the design for colors, font sizes, and spacing. When translating, consult the "Canvas Concept → Target Framework" mapping table below. Do not invent controls — use the target framework's standard layouts/controls when available. Reserve absolute positioning only when "precise pixel-level positioning is truly necessary."

Phase 4: Validation Closed Loop

Desktop environments lack browser automation tools like Playwright. Validation method: Take a screenshot of the actual compiled and running program, compare it side-by-side with the design screenshot. Automatically fix obvious defects; manual critique identifies subtler issues (spacing, font weight, color nuances), proactively feed them to the AI for precise fixes, and proceed to the next iteration.

Canvas Concept → Target Framework Mapping Table

Figma canvas uses absolute coordinates + pixel layers; implementations must translate these into each framework's layout semantics. Consult this table during translation:

Canvas/Design Concept	Qt Widget	QML (Qt Quick)	WinUI 3 (XAML)	Flutter
Horizontal Layout	QHBoxLayout	Row	StackPanel (Orientation=Horizontal)	Row
Vertical Layout	QVBoxLayout	Column	StackPanel (Orientation=Vertical)	Column
Grid Layout	QGridLayout	Grid / GridLayout	Grid	GridView / Table
Absolute Positioning	setGeometry / move	Item + x/y	Canvas + Canvas.Left/Top	Stack + Positioned
Stacking/Overlay	Child widget stacking / raise()	z property / Stack	Canvas.ZIndex	Stack
Center Alignment	addStretch / setAlignment	anchors.centerIn	HorizontalAlignment/VerticalAlignment=Center	Center / Align
Space-Between Alignment	addStretch on both sides	anchors.left/right + margins	Margin distribution	MainAxisAlignment.spaceBetween
Spacing	QSpacerItem / layout spacing	spacing property	Margin / Padding	SizedBox / Padding / Spacer
Color	QPalette / stylesheet	Theme / property binding	Resource ResourceDictionary	ThemeData / ColorScheme
Font Size/Font	QFont	font.pixelSize	FontSize	TextStyle.fontSize
Corner Radius	stylesheet border-radius	Rectangle radius	CornerRadius	BorderRadius
Shadow	QGraphicsDropShadowEffect	DropShadow	ThemeShadow / DropShadow	BoxShadow
Icon	QIcon / Resource	Image / icon font	FontIcon / SymbolIcon	Icon
Component Reuse	Custom QWidget subclass	Custom QML Component	UserControl / Custom Control	Widget
State/Variant	Enum + update()	State / Property-driven	VisualStateManager	setState / AnimatedWidget

Anti-Laziness Rules

AI tends to use only one channel and then write code. Explicitly require:

• "Call both get_figma_data and download_figma_images simultaneously to read the design."
• "Do not write code using only images/screenshots of the design."
• "Read exact values from get_figma_data line by line, compare colors/font sizes/spacing, do not visually estimate."
• "Translate into the target framework's standard layouts/controls using the mapping table, do not invent."

Fidelity Self-Checklist

After generation, check each item systematically (more reliable than "does it look similar overall"):

• Colors (used exact values, not approximations)
• Font size / Font weight
• Spacing / Margins / Padding
• Corner radius / Borders / Shadows
• Layout (translated into target framework standard layouts, not directly copied absolute coordinates)
• Hierarchy / Z-order
• Icons/images used as original files, not hand-drawn
• Repeatable patterns extracted into components/custom controls

Reference Sources

Methodology is adapted from the official Figma MCP + Playwright UI development workflow (see "Using Figma MCP and Playwright MCP to Improve UI Development and Debugging Efficiency"), core ideas of "dual-channel + validation closed loop + explicit anti-laziness requirements" are retained. Tool names are adapted for Framelink figma-developer-mcp, mapping table expanded to cover multiple desktop frameworks.