skills.rest
Firzus
FirzusCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-to-unity

Convert Figma designs into Unity UI Toolkit UXML, USS, and C# controllers.

1|Updated May 12, 2026
Search Tags:#uxml#uss#unity#ui toolkit#figma#mcp#design translation
One-click install
npx skills add https://github.com/Firzus/agent-skills --skill figma-to-unity
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-unity
Source: https://github.com/Firzus/agent-skills/tree/main/skills/game/figma-to-unity
Command: npx skills add https://github.com/Firzus/agent-skills --skill figma-to-unity

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you convert a Figma frame, component, HUD, or menu into production-ready Unity UI Toolkit code without manually translating layouts, tokens, and assets.

Core Features & Use Cases

  • Figma-to-Unity Translation: Converts design structure into UXML, USS, and a minimal C# controller that fits a Unity UI Toolkit project.
  • Token and Asset Mapping: Reuses project design tokens where possible, exports needed sprites or icons, and applies correct Unity import settings.
  • Design-Accurate Implementation: Uses Figma MCP outputs, screenshots, and variable definitions to match spacing, typography, colors, and responsive layout behavior.
  • Use Case: A designer shares a Figma link for a HUD panel, and this Skill produces the Unity UI hierarchy, styles, and controller wiring needed to build it in the project.

Quick Start

Provide a Figma URL with a node id and ask me to implement that design in your Unity UI Toolkit project.

Frequently Asked Questions about figma-to-unity

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

FAQPage Schema
How do I convert Figma designs to Unity UI Toolkit?▼

To convert Figma designs to Unity UI Toolkit, this Skill translates Figma frames into matching UXML and USS files along with a minimal C# controller. It reuses project design tokens and exports required sprites to ensure the Unity hierarchy matches the source layout accurately.

Can I generate UXML and USS directly from a Figma file?▼

Yes, you can generate UXML and USS directly from a Figma file by providing a Figma URL with a node id. The Skill uses Figma MCP context and variable definitions to map spacing, typography, and colors into production-ready Unity UI Toolkit styles.

Does the Figma to Unity conversion handle asset export and import settings?▼

The Figma to Unity conversion does handle asset export by extracting needed sprites or icons from the design and applying correct Unity import settings. This ensures visual elements maintain their intended appearance within the UI Toolkit project.

What do I need to translate Figma menus into Unity HUDs?▼

To translate Figma menus into Unity HUDs, you need a Figma URL with a node id and an active Unity UI Toolkit project. The Skill requires Figma MCP context to validate the generated structure and styling against the source screenshot.

Why does my Figma layout not match the Unity UI Toolkit output?▼

If your Figma layout does not match the Unity UI Toolkit output, the Skill validates the implementation against the source screenshot to identify discrepancies. It uses Figma MCP outputs to correctly map responsive layout behavior, spacing, and typography.

Related Skills

Explore More Design & Creative Skills→
thanhquan3010thanhquan3010

figma

Convert Figma designs into React and Tailwind CSS code.

Community
Intermediate
cuozgcuozg
4

unity-uitoolkit-create

Generate Unity runtime UI with UXML, USS, and C# controller scripts.

Community
Intermediate
jinlulijinluli

unity-uitoolkit

Build and manage Unity UI with UI Toolkit, USS, and UXML.

Community
Advanced
dyCuong03dyCuong03
6

unity-uitoolkit

Generate and update Unity UI Toolkit UXML/USS assets with UIDocument and PanelSettings.

Community
Intermediate