UI Importer

UI Importer (compatible with Figma) is a Unity Editor extension that automatically converts UI layout JSON exported from Figma into ready-to-use uGUI Prefabs. Pair it with the companion Figma export plugin to bridge your design and Unity workflow with zero manual layout work.

▼ KEY FEATURES

■ One-click Prefab generation

Right-click any exported JSON file and choose "UI Importer > Create Prefab". Each root node becomes its own prefab, saved next to the JSON file.

■ Full hierarchy reproduction

Parent-child structure from your design is preserved exactly in Unity. RectTransform position, size, anchors, and rotation are all configured automatically.

■ Auto Layout → LayoutGroup

Horizontal and Vertical Auto Layout frames are converted to HorizontalLayoutGroup / VerticalLayoutGroup with full spacing, padding, and alignment support.

■ 9-Slice support

Nodes flagged as 9-slice in the source JSON are imported as Image.Type.Sliced with sprite borders applied automatically (Single sprite mode).

■ Mask & ScrollRect

Image masks, shape masks, content clipping, and overflow scrolling (horizontal / vertical / both) are converted to Mask, RectMask2D, and ScrollRect automatically.

■ Responsive Constraints

Constraints (MIN / CENTER / MAX / STRETCH / SCALE) are translated into proper RectTransform anchors so your UI scales correctly across resolutions.

■ TextMeshPro integration

Text nodes become TextMeshProUGUI with font, size, color, alignment, line height, letter spacing, bold/italic, and overflow mode all preserved. Configurable font mappings let you map source font names to your project's TMP Font Assets.

■ Button auto-detection

Any node whose name starts with a configurable prefix (default: "btn") receives a Unity Button component automatically. Nested buttons are prevented to avoid conflicts.

▼ SUPPORTED FEATURES

- Auto Layout (Horizontal / Vertical) → LayoutGroup

- Text → TextMeshProUGUI

- Image / Export → Image + Sprite (auto sprite lookup)

- Fill Color → Image (solid color)

- 9-Slice → Image (Sliced) with sprite border

- Opacity (with children) → CanvasGroup

- Mask (Image / Shape) → Mask + Image / RectMask2D

- Clip Content → RectMask2D

- Overflow Scrolling → ScrollRect

- Constraints → RectTransform anchors

- Rotation → RectTransform.localEulerAngles.z

- Button Prefix → Button component

▼ REQUIREMENTS

- Unity 6 or later

- TextMeshPro

- Unity UI (uGUI)

- Companion Figma export plugin (free, available on Figma Community)

▼ WORKFLOW

1. Open the companion Figma export plugin in Figma.

2. Select the frames you want to export and download the JSON file.

3. Place the JSON file and image assets into your Unity project's Assets folder.

4. Right-click the JSON file → Assets > UI Importer > Create Prefab.

5. Use the generated prefab in your scene.

▼ DOCUMENTATION & SUPPORT

A full PDF documentation is included in the package. For more information, tutorials, and updates, visit the official website:

https://onederappli.jp/figma-to-unity/index.html

────────────────────────────

"Figma" is a trademark of Figma, Inc. This asset is an independent third-party tool and is not affiliated with, endorsed by, or sponsored by Figma, Inc.