Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We are updating our Terms of Service for all Unity subscription plans, effective October 13, 2022, to create a more streamlined, user-friendly set of terms. Please review them here: unity.com/legal/terms-of-service.
    Dismiss Notice
  3. Have a look at our Games Focus blog post series which will show what Unity is doing for all game developers – now, next year, and in the future.
    Dismiss Notice

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

Discussion in 'UI Toolkit' started by Yecats, May 1, 2022.

  1. Yecats

    Yecats

    Joined:
    Jul 13, 2014
    Posts:
    67
    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
    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#
     
    JuliaP_Unity likes this.
unityunity