Figma for Unity Developers — How to Create Game UI and Image Assets

Setup and context

Building a game often means spending countless hours on UI creation. Menu screens, health bars, inventory layouts, buttons—creating all these from scratch in illustration or image editing software is tedious and time-consuming.

Figma is the ideal tool for designing game UI assets efficiently and exporting them for use in your projects. This guide walks you through everything a Unity developer needs to know: designing game UI in Figma, setting up proper export formats, and integrating them seamlessly into your Unity project.

Whether you're looking to boost your development workflow or you're new to Figma, this article will give you a solid foundation to build professional game interfaces quickly.

Why Figma Works for Game Development

Let's explore what makes Figma such a great fit for game projects.

1. Browser-based, no installation required Figma runs entirely in the browser. There's no complex setup—Mac, Windows, Linux, all use the same interface. For teams working across different operating systems, this universality is a huge advantage.

2. Real-time collaborative editing In team settings, designers and programmers can edit simultaneously. Changes appear instantly across all connected devices, dramatically improving communication efficiency. Cloud-based version control happens automatically.

3. Component system for asset reuse Create buttons, panels, and other UI elements as components. Build once, reuse everywhere. When you update the master component, all instances update automatically—a massive time-saver for multi-screen games.

4. SVG and PNG export options SVG is vector-based, meaning you can scale it to any size in Unity without quality loss. PNG export gives you raster options for different use cases.

5. Prototype and animation features Test interactions and animations directly in Figma. Show stakeholders how your UI actually feels and responds—no need to build working prototypes first.

Designing Core Game UI Elements

Let's break down how to design the main UI elements your game needs.

Menu Screen Design

The main menu is your game's first impression. Here's what you'll typically include:

Key components:

• Background: Texture or gradient reflecting your game's world
• Title text: Your game name, large and legible
• Button group: Start, settings, quit, etc. (with variant states)
• Logo and artwork: Visual identity and branding
• Decorative elements: Particle effects, light effects, or reference images

In Figma, use the Rectangle tool to build buttons, then layer text on top. The key is grouping these elements and converting them into components.

Step-by-step process:

1. Set canvas size to match your Unity Canvas (e.g., 1920 × 1080)
2. Place your background layer
3. Add title text in the center-top area
4. Stack buttons vertically (80-120px spacing)
5. Convert buttons to components with variants (Normal/Hover/Pressed)

HUD Elements (Health Bars, Minimap, etc.)

HUD elements sit on-screen during gameplay—HP bars, mana bars, minimaps, and status displays.

Common HUD elements:

• Health bar: Background + colored fill + text number
• Mana bar: Similar structure (usually blue-tinted)
• Icons: Character portrait, enemy indicator, etc.
• Numeric displays: Score, level, wave count
• Timer: For time-limited challenges

Use Figma's auto-layout feature to position these precisely, accounting for different screen resolutions and aspect ratios.

Best practices for HUD placement:

• Top-left: Player stats (level, name)
• Top-right: Enemy or boss info
• Bottom-left: Inventory icons, item count
• Bottom-right: Score, time, combo counter
• Bottom-center: Power gauge, focus meter

Avoid overlapping elements and always leave safe margins for mobile notches and screen edges.

Button Design and State Management

Buttons need multiple visual states to guide player interaction:

Button states:

• Default: Idle appearance (base color, white text)
• Hover: Mouse over state (slightly brighter or different color, optional glow)
• Pressed: Actively clicked (darker color, slightly offset down, scaled smaller for tactile feedback)
• Disabled: Unclickable state (grayed out, 50-60% opacity)

Figma's component variant system lets you manage all these states in one place, making it easy to keep them consistent.

Creating a button component:

1. Place a rectangle + text layer
2. Group them together
3. Right-click → "Create component"
4. Add a "State" variant
5. Create entries for Default, Hover, Pressed, Disabled
6. Fine-tune the styling for each variant

Inventory Screen Design

RPGs often have complex inventory UIs with grids and filters. Figma handles these efficiently.

Main components:

• Grid layout: Item slots in rows and columns (4×6, 5×4, etc.)
• Item icons: 64×64px is standard for each slot
• Detail panel: Shows selected item information
• Sort and filter controls: By category or rarity
• Equipment slots: Shows currently equipped items

Use Figma's Layout Grid feature for precision:

1. Enable grid in the right panel (Layout Grid → Add grid)
2. Grid size: 72px (64px item + 8px margin)
3. Gutter: 8px
4. Offset: 8px

Everything snaps perfectly into place.

Dialog Boxes and Conversation UI

Story sequences need clean dialog layouts.

Key components:

• Background panel: Semi-transparent overlay (80-90% opacity)
• Character name: 24-28px font size
• Dialogue text: Multi-line, medium or bold weight
• Next button: Blinks or animates
• Choice buttons: For branching conversations

9-Slice Scaling for Flexible UI

Here's where things get important. Setting up 9-slice (nine-slice) in Unity lets you scale UI elements like buttons and panels without distortion.

What is 9-Slice?

9-slice divides an image into 9 sections: four corners, four edges, and a center. The corners stay fixed while edges and center stretch—perfect for buttons and panels that need flexible sizing.

[1]━━━━[2]━━━━[3]
 ┃      ┃      ┃
[4]━━━━[5]━━━━[6]
 ┃      ┃      ┃
[7]━━━━[8]━━━━[9]

• Sections 1, 3, 7, 9 (corners): Don't scale
• Sections 2, 4, 6, 8 (edges): Stretch with scaling
• Section 5 (center): Scales freely

When designing in Figma, keep these in mind:

1. Corners: For rounded buttons, make corner areas large enough (minimum 24×24px)
2. Edges: Define expandable regions clearly (minimum 16px width)
3. Center: This area scales—use patterns or gradients that work when stretched

Setting up 9-Slice in Unity

1. Export as PNG from Figma
2. Drag into your Assets folder
3. Select the sprite, then in Inspector set Texture Type to "Sprite (2D and UI)"
4. Open the Sprite Editor
5. Set slice values (L: 24, R: 24, T: 24, B: 24 as an example)
6. Click Apply

Your button or panel now scales smoothly without distortion.

Export and Import Workflow

Exporting from Figma

Right-click your UI element → Export. Choose SVG or PNG, then download.

SVG export settings:

• Format: SVG
• Include "id" attribute: OFF
• Include stroke content: ON if needed
• Flatten selection: OFF for multi-color assets

PNG export settings:

• Format: PNG
• Scale: 1x, 2x, or 3x depending on your intended resolution
• Background: Transparent

Importing into Unity

Drag your exported files into the Assets folder. Unity automatically converts SVG to texture.

Import settings to adjust:

1. Select the texture in Assets
2. In Inspector, set:
   • Texture Type: "Sprite (2D and UI)"
   • Sprite Mode: "Single" for individual assets, "Multiple" for sprite sheets
   • Pixels Per Unit: 100 (adjust based on your art style)
   • Filter Mode: "Point (no filter)" for pixel art, "Bilinear" for smooth art
   • Compression: "None" or "Fast" for quality
3. Click Apply

Now you can use your sprites in Canvas UI or as game objects.

Texture Atlasing for Performance

Combining Multiple Elements

Combine multiple UI sprites into one texture atlas to reduce draw calls and boost performance.

Figma placement strategy:

• Buttons: 8×8 grid (each 64×64px)
• HUD elements: Separate grid (mixed sizes: 16×16, 32×32, 64×64)
• Spacing: 2-4px between elements to prevent edge bleeding

Unity Sprite Atlas process:

1. Right-click in Project window
2. Create → 2D → Sprite Atlas
3. Select the atlas, then in Inspector click Add
4. Add your sprites
5. Click Pack Preview to confirm
6. Click Pack

Result: Draw calls drop to 1/10th, memory usage improves, and performance jumps significantly.

Sprite Editor Deep Dive

The Sprite Editor is Unity's powerful tool for fine-tuning imported graphics.

Key Sprite Editor Features

1. Slice settings: Configure 9-slice values

   • Click Slice button
   • Choose Automatic or Manual
   • Set corner and edge dimensions

2. Frame division: For sprite sheets with multiple frames

   • Use Grid by Cell Size
   • Enter cell dimensions
   • Click Slice

3. Bone setup: For skeletal animation (when needed)

   • Define bone hierarchy

Careful Sprite Editor setup means cleaner, more optimized rendering in your game.

Example: Button Setup

1. Select button image in Inspector
2. Open Sprite Editor
3. Set slice values:
   • Left: 16px
   • Right: 16px
   • Top: 16px
   • Bottom: 16px
4. Apply and Pack
5. In Canvas, your button scales perfectly with 9-slice applied

Resolution and Aspect Ratio Considerations

Games run on vastly different screens. Smartphones, tablets, PCs—each has different resolutions and aspect ratios.

Device-Specific Resolutions

Mobile phones:

• Standard: 1080×1920 (1:1.78)
• High: 1440×2560 (1:1.78)
• Ultra-wide: 1080×2340 (1:2.17)
• DPI: 330-480

Tablets:

• iPad: 2048×1536 (4:3)
• Android: 1280×800 to 2560×1600 (16:10)
• DPI: 150-320

PC:

• Full HD: 1920×1080 (16:9)
• WQHD: 2560×1440 (16:9)
• DPI: 96-192

Design Approach

1. Choose a reference resolution (e.g., 1920×1080)
2. Place critical UI elements centrally
3. Make expandable elements sit on edges
4. Use readable text sizes (minimum 24px recommended)
5. Leave safe margins (20-40px from screen edges)

In Unity, use Canvas Scaler to adapt to all resolutions automatically.

Canvas Scaler settings:

• UI Scale Mode: "Scale With Screen Size"
• Reference Resolution: 1920×1080
• Screen Match Mode: "Match Width Or Height"
• Match: 0.5 (balance between width and height)

Component Management for Scalable UI

Figma's component system is your secret weapon for managing game UI at scale.

Power of Components

Once you componentize a button, you can use it in every menu: main menu, pause menu, settings screen. Update the master component once, and every instance updates automatically.

Need to change a button's hover color globally? One edit, hundreds of buttons updated instantly.

Component Hierarchy Example

Buttons/
  ├─ PrimaryButton
  │   ├─ Small (48×48)
  │   ├─ Medium (64×64)
  │   └─ Large (80×80)
  └─ SecondaryButton
      ├─ Small
      ├─ Medium
      └─ Large

HUD/
  ├─ HPBar
  │   ├─ Compact
  │   └─ Full
  └─ MiniMap
      ├─ 256×256
      └─ 512×512

Panels/
  ├─ MenuPanel
  ├─ DialogBox
  └─ SettingsPanel

This structure keeps your entire design system consistent, scalable, and easy to maintain across large projects.

Color Space Management

Linear vs. sRGB

When importing textures into Unity, watch out for color space mismatches.

• sRGB (standard): Monitor display color, Figma's default
• Linear: Rendering calculations, better for physics-based rendering

If you're using Linear color space in Unity, imported colors might look off.

Quick fix:

1. Select your texture
2. In Inspector, check "sRGB (Color Texture)"
3. For Linear projects, turn OFF

Design in sRGB in Figma; adjust in Unity based on your project's color space setting.

Summary

Figma transforms game UI development from a tedious chore into a smooth, efficient process. Master these key areas:

Core concepts to remember:

• Menu, HUD, button, and inventory design patterns
• 9-slice setup for flexible UI scaling
• SVG/PNG export and Unity import workflows
• Component system for part management
• Resolution and aspect ratio adaptation
• Texture atlasing for performance
• Color space consistency

Next steps:

• Start small: design a few buttons first
• Get comfortable with components and variants
• Measure performance gains from atlasing
• Try collaborative editing with teammates

Add Figma to your development pipeline and enjoy building beautiful game UIs. The community and documentation are active and helpful—don't hesitate to reach out when you have questions.

With Figma and Unity working together smoothly, you'll move from prototype to polish faster than ever. Here's to your next great game!