figma-to-unitylisted

Implements Figma designs (frames, components, HUD elements, menus) as Unity UI Toolkit interfaces — UXML hierarchy, USS styles mapped to design tokens, exported sprite assets, and a minimal C# controller — using the Figma MCP server (get_design_context, get_metadata, get_screenshot, get_variable_defs). Use when the user provides a Figma URL and wants it implemented in a Unity project, asks to "implement this Figma design in Unity", "build this HUD/menu/component from Figma", "convert Figma to UXML/USS", or mentions figma-to-unity.
Firzus/agent-skills · ★ 1 · Web & Frontend · score 72

Install: claude install-skill Firzus/agent-skills

# 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`: - **File key**: the segment after `/design/` - **Node ID**: the `node-id` query parameter value (e.g. `1461-137`) ### Step 2: Fetch desig