[Tutorial Series] Rapidly prototype and animate a new UI using Figma and UI Toolkit

TUTORIAL | FIGMA DESIGN | GITHUB REPO

Rapidly prototype and animate a new UI using Figma and UI Toolkit​

Coming up with a good design for your game is incredibly difficult but instrumental in ensuring a cohesive and easy to use experience. There are many tools that you can pick from for mocking up new ideas. One of my favorites is Figma, which is a (primarily) web-based tool that lets you brainstorm, design, and prototype ideas – either solo or collaboratively in real time. Part 1 of the series will teach you the basics of Figma (free tier) while prototyping two game screens – the main and settings. By the end you will have enough knowledge to quickly prototype your own designs! Part 2 will take the design into Unity's UI Toolkit, diving deep in styling and animation. By the end you'll know how to use style transitions to animate your own game UI.



Links

• [Part 1] Design an interactive game UI with Figma
• [Part 2] Use style transitions to animate a menu with UI Toolkit

Learning Outcomes

Part 1:
You'll learn how to do the following in Figma:

• Use auto layout to organize and align elements
• Create reusable styles and components with variants
• Configure and run prototype workflows for interactivity
• Install plugins

Part 2:
You'll learn how to do the following in Unity:

• Import and use custom fonts
• Define and use stylesheet variables
• Use transition properties to animate, including registering event listeners in C#