🖼️ Figma
Quick Summary
Figma is a cloud-based UI/UX design platform. While primarily known for web and app interface design, Figma has become the standard tool for prototyping and building game navigation interfaces and UI system layouts in modern game projects.
Why Figma for Game UI
Figma eliminates the isolated file management of Photoshop or Illustrator — every collaborator works on the same file in real time, in the browser:
- Real-time collaboration: Designers, developers, and producers work simultaneously
- Component system: Reusable UI components (buttons, panels, icons) that update everywhere when changed
- Prototyping: Interactive mock-ups of navigation flows without writing code
- Developer handoff: Inspect mode shows exact dimensions, colors, fonts, and spacing for implementation
Game UI Applications
- HUD layout design: Health bars, minimap placement, inventory grid sizing
- Menu system flows: Pause menu, inventory, shop, settings — interaction wireframes
- Style guides: Color palettes, typography, icon libraries
- Cross-functional communication: Art directors sharing UI vision with programmers
Figma vs Photoshop for UI
| Figma | Photoshop | |
|---|---|---|
| Collaboration | Real-time, browser | File sharing |
| Vector native | Yes | Partial |
| Prototyping | Built-in | Plugin/external |
| Dev handoff | Built-in inspect | Manual |
| Painting/illustration | No | Yes |