Figma to Unity (Figma MCP → UI Toolkit)

Translate a Figma design into production-ready Unity UI Toolkit code: UXML for structure, USS for style (wired to the project's design tokens), exported assets with correct import settings, and a thin C# controller. The Figma MCP server output (typically React + Tailwind) is a representation of the design, not final code — always re-express it in UXML/USS following the host project's conventions.

Prerequisites

Verify all three before starting. If one fails, stop and tell the user.

1. Figma MCP server connected. Check that Figma MCP tools (e.g. get_design_context) are available. If not, guide the user to enable the Figma MCP server (included with the Figma desktop app / plugin) and restart their MCP client.
2. Figma URL with a node id, in the format https://figma.com/design/:fileKey/:fileName?node-id=1-2. If the URL has no node-id, ask the user to select the frame/component and copy its link.
3. Unity project using UI Toolkit. Look for .uxml/.uss files and UIDocument usage under Assets/. If the project's UI is uGUI (Canvas + TextMeshPro), say so and stop — this skill does not cover uGUI.

Required workflow

Follow these steps in order. Do not skip steps.

Step 1: Extract file key and node ID

From https://figma.com/design/:fileKey/:fileName?node-id=1-2: