How to Use Figma for Game UI Design: Mockup, Export, and Bring It Into Unity

Most Unity developers design UI directly in the Unity Canvas. You drag in a Panel, add some buttons, resize things until they look roughly right, and keep going. It works, but it is slow — every tweak requires playing the game or entering Play Mode to see the result in context, and iteration is painful.

Figma changes this. You design the whole UI in a browser tool that gives you instant visual feedback, proper spacing controls, and reusable components that update everywhere at once. Then you export what you need and build it in Unity with a clear reference to work from instead of designing and building at the same time.

I started using Figma for game UI mockups about halfway through a mobile project where the menu system kept changing. Every time the layout shifted I was re-parenting Canvas elements and fighting with anchors in Unity. Moving the work to Figma first meant I could iterate freely in five minutes per change instead of twenty, then implement only when the design was settled. That alone made it worth learning.

Why Figma Over Other Design Tools

Figma runs in the browser. No installation, no OS restriction, works the same on Windows, Mac, and Linux. The free plan allows unlimited personal files with up to three editors on shared projects — which covers most solo developers and small teams without paying anything.

The component system is the feature that makes it genuinely useful for game UI specifically. You build a button once as a component, use it across fifty screens, and when the art direction changes you update one source component and every instance updates automatically. That is exactly how Unity prefabs work, and it makes Figma the natural design tool for developers who already think in terms of reusable objects.

Adobe XD is the closest alternative and is largely discontinued in terms of active development. Sketch is Mac-only. Canva is for marketing graphics, not UI wireframes. For game UI design in 2026, Figma is the tool worth learning.

Part 1: Setting Up for Game UI Work

Creating a Frame at Your Target Resolution

In Figma, a Frame is a fixed-size container that represents a screen. For game UI you want frames that match your target resolution. Common starting points:

• Mobile portrait: 1080 x 1920 (or 390 x 844 for iPhone 14 logical resolution)
• Mobile landscape: 1920 x 1080
• Tablet: 2048 x 1536
• PC / Console: 1920 x 1080 or 2560 x 1440

Press F (or the Frame tool in the toolbar) and either drag a custom size or pick a preset from the right panel. Everything you design for that screen goes inside this frame.

If your game supports multiple resolutions, create a separate frame for each. Figma's canvas is infinite — stack several resolution variants side by side and you can see how your UI scales across device types at once.

Grids and Layout Guides

Select a frame and in the right panel add a Layout Grid. For game UI, a simple grid with 8 or 16 pixel column spacing gives you a consistent spatial rhythm to work against. Nothing in the final UI will match perfect grid alignment, but having the guide prevents the random spacing that makes amateur UI feel visually unorganized.

Fonts

Figma uses Google Fonts by default, which are free and available in Unity through TextMesh Pro's font asset pipeline. If your game uses a custom font, upload it to Figma as a local font (the Figma desktop app required for local fonts) and make sure you have the same font file in your Unity project. Font consistency between mockup and implementation matters — a font that renders at 24pt in Figma may look completely different at the same nominal size in Unity depending on import settings.

Part 2: Components — The Most Important Figma Feature for Game Dev

A component in Figma works exactly like a prefab in Unity. You create the master version once, and every copy (called an instance) inherits the master's design. Change the master, all instances update.

Creating a Button Component

1. Design one button in your mockup — background rectangle, label text, any icon.
2. Select all elements of that button.
3. Right-click and choose Create Component (or Ctrl+Alt+K on Windows, Cmd+Option+K on Mac).
4. A purple diamond icon appears in the layer panel — that is the master component.
5. From now on, duplicate this component (Ctrl+D) rather than copying the individual elements. Each duplicate is an instance that stays connected to the master.

When the art direction changes and you need a different button background color, you update the master component once. Every button across every screen in the mockup updates in seconds instead of you hunting down fifty individual button backgrounds.

Component Variants

Buttons need states — normal, hover, pressed, disabled. Figma handles this through Component Variants. Select the master component, click Add Variant in the right panel, and Figma creates a set where each variant represents a different state. In Unity implementation, these variants map directly to the Transition states on a Unity Button component.

Auto Layout

Auto Layout is Figma's flex-box equivalent. Apply it to a group of elements and they space themselves automatically with consistent padding. When you add or remove an item, everything reflows without manual repositioning. For inventory grids, skill bars, and button rows, Auto Layout eliminates most of the tedious manual spacing work that makes mockup maintenance painful.

Part 3: Designing Game-Specific UI Elements

Health and Progress Bars

Design the bar as two overlapping rectangles: the background track and the fill. In Figma you set the fill as a percentage of the track width using constraints. In Unity, progress bars should use fill images or shaders, not a simple image — so when you export, you export the bar track and bar fill as separate sprites, not as one flat image. This is one of the most common mistakes developers make when bringing UI from Figma into Unity: exporting the whole bar as a single PNG when the fill needs to animate independently.

Panels and Windows

Panels should often use 9-slice sprites. In Figma, design your panel as a single rectangle with a border, corner radius, and any decorative details. When exporting, note which areas are the scalable middle and which are the fixed corners — you will set the 9-slice borders in Unity's Sprite Editor after import. Export the panel as a PNG with enough padding around the corners so the border stays intact when Unity stretches the middle.

Icons

Icons work best as SVGs exported from Figma for simple, clean vector shapes, or as PNGs at 2x your base resolution for anything with gradients or complex effects that SVG does not handle well. Combine multiple UI sprites into one texture atlas to reduce draw calls and boost performance. In Figma, you can organize all your icons on a single frame and export them as individual slices, then combine them in Unity using a Sprite Atlas.

Text

Text should usually remain real text inside Unity — not exported as an image. Design the text style in Figma (font, size, color, line height) and use those values to configure TextMesh Pro settings in Unity. Exporting text as a flat PNG loses the ability to localize, resize dynamically, or update copy without reimporting assets.

Part 4: Exporting From Figma

Getting assets out of Figma correctly is where most of the implementation pain either happens or gets avoided.

Naming Layers Before Exporting

Naming is one of those things people ignore until it starts hurting production. A Figma layer named "Rectangle 47" exports as Rectangle_47.png and lands in Unity as an asset with a meaningless name that is annoying to find, track, and replace later. Name every exportable layer descriptively before touching the export dialog:

UI_Button_Primary_Normal
UI_Button_Primary_Disabled
UI_Panel_Inventory
UI_Icon_Sword
UI_HealthBar_Track
UI_HealthBar_Fill

This takes ten minutes at the start and saves hours across the project's lifetime.

Export Settings

1. Select the layers or frames you want to export.
2. In the right panel, click + under the Export section.
3. Set format to PNG for most UI elements. Use SVG for simple vector icons without gradients.
4. Set the multiplier. For a 1080p base resolution, 1x exports at native size. For mobile at 2x DPI, export at 2x and import into Unity at the corresponding pixels-per-unit setting.
5. Click Export Selected.

Do not export everything as one flat screenshot of the frame. Export the parts you need, then build the layout properly in Unity. A flat image of a complete UI screen looks right in Figma and is useless in Unity — nothing can be animated, nothing can change state, and implementing anything dynamic means either rebuilding it from scratch or fighting with a single large texture.

Figma-to-Unity Plugins

Several plugins automate parts of the export-to-Unity pipeline. Figma UI Exporter for Unity exports designs as structured JSON and imports them as Unity prefabs with a single click, keeping designs pixel-perfect from Figma to game. UnityFigmaBridge by Simon Oliver is a popular open-source option that downloads images as PNGs, imports them as sprites, and attempts to match fonts from Google Fonts automatically.

These plugins are worth evaluating for projects with large UI surface areas. For smaller projects or for learning the pipeline, doing the export manually first builds the understanding that makes plugin-generated output easier to debug when something does not match the design.

Part 5: Implementing the Design in Unity

With exported sprites in hand and a clear Figma reference to work from, Unity implementation becomes significantly faster than designing and building simultaneously.

1. Import all exported PNGs into a Assets/UI/Sprites/ folder in Unity.
2. Select each imported sprite and in the Inspector set Texture Type to Sprite (2D and UI).
3. For 9-slice panels, open the Sprite Editor and drag the border handles to define the nine regions that stay fixed versus the center that scales.
4. Create a Sprite Atlas (Assets > Create > 2D > Sprite Atlas) and drag your UI sprite folder into it. This reduces draw calls significantly — Unity batches all sprites in an atlas into a single draw call rather than one per sprite.
5. Build the Canvas hierarchy in Unity using your Figma mockup as the reference. The Figma frame is the Canvas. Figma components become prefabs. Figma layers become GameObjects.

Set Canvas Scaler on your Canvas component to Scale With Screen Size and enter your Figma design resolution as the reference resolution. Unity's Canvas Scaler adapts to all resolutions automatically once this is configured — the UI scales proportionally rather than staying at a fixed pixel size across all devices.

Where Beginners Go Wrong

• Exporting the entire screen as one flat image. Looks fine as a static screenshot, unusable as a game UI. Export individual elements and rebuild the layout in Unity.
• Not naming layers before exporting. "Rectangle 47.png" in Unity is a support ticket waiting to happen six months later when you cannot remember what it is.
• Designing text as images. Text that needs to change, localize, or resize dynamically must stay as real TextMesh Pro text in Unity. Design the style in Figma, implement it as text in Unity.
• Designing at the wrong resolution and not accounting for DPI. A button that looks the right size on a 1920x1080 Figma frame will appear tiny on a mobile device if you did not account for pixel density. Design at logical resolution or account for the multiplier at export.
• Skipping the 9-slice setup for panels. A panel exported as a plain PNG and stretched in Unity looks blurry and pixelated at the corners. Set up 9-slice borders in Unity's Sprite Editor so the corners stay sharp regardless of how the panel is scaled.
• Ignoring the Sprite Atlas. Each UI sprite without an atlas is a separate draw call. A UI with fifty sprites and no atlas burns fifty draw calls on what should be one. Set up the atlas early — retrofitting it later is more work than doing it from the start.

A Practical Workflow for Solo Developers

The full pipeline in order, for a developer who has not used Figma before:

1. Create a Figma account at figma.com — free, no credit card, instant access.
2. Create a new file and add frames at your target resolution.
3. Start with a rough wireframe — grey boxes and placeholder text, no colors. Get the layout right before worrying about aesthetics.
4. Once the layout is approved (even if only by yourself), convert repeated elements into components.
5. Add visual design — colors, fonts, background textures referenced from your art style.
6. Name every exportable layer properly.
7. Export individual sprites using the settings described above.
8. Import into Unity, configure Sprite Type and 9-slice borders, set up a Sprite Atlas.
9. Build the Canvas hierarchy using the Figma mockup as the direct reference.

Keep the Figma file open on a second monitor while implementing in Unity. Having the exact design visible while building removes the constant switching between reference images and the editor that slows down UI implementation.

Next Topics To Learn

• Unity UI and Canvas Explained for Beginners — the Unity side of what this guide sets up, covering Canvas modes, anchors, and the Unity UI component system.
• Unity Mobile Optimization Guide — Sprite Atlas setup, draw call reduction, and Canvas performance are all covered there in the Unity context.
• Midjourney for Game Developers — generating background textures, UI frame art, and decorative elements to fill the Figma mockup before building in Unity.