Get started with UI Builder (UI toolkit) - time to ditch old UI system?

This tutorial/guide will show you how to get started with the new UI builder (UI toolkit) package in Unity. I know that many of you prefer to white your UI in code or would like to have some kind of standardised way of doing that. While I myself love older UI system I also see a lot of positive aspects of this method. I will show you how to create a simple labels, buttons, visual elements and how to style them. Finally at the end we will write some code to make our UI interactive.

You will learn:
- How to create a button in UI builder
- How to create a label, text in UI toolkit
- What is UI builder package
- What are the alternatives to Unity UI system
- How to code UI builder layout

Timestamps:
0:00 - Intro
0:49 - Installing
1:50 - Setup
3:22 - Adding components
4:36 - Placing
6:58 - Absolute position
8:26 - Styles
10:13 - Hover/active attributes
11:23 - Code setup
14:01 - Coding buttons

[harshadjoshi]

Saw a few of your tutorials on UI implementation and they are really well done. There is a lack of tutorials explaining use of UI tools within unity and I am really glad you have picked up these area of unity to make tutorials on. Please keep it up👍👍✌️

[SBARevere]

I was definitely one of those that said they disliked working on UI so this is going to be a huge help!

[jeremiasp]

This is objetively the most well polished introduction to the topic I found so far. The work on it is noticeable. Thank you!

[abdulkadirdursn]

This might be the best video about UI Builder so far. Unlike other videos very clear, easy to understand. Before this ui builder looks like a ton of messy buttons, screens etc for me :D

[serialexperimentsdave]

Thank you, I watched a bunch of tutorials trying to figure out how to change the hover color of a button, your the only one who didn't gloss over it in a vague way.

[crazyfox]

Yesterday I watched the live stream of UI Builder and subscribed. I guess I have good timing.

[touzimsky]

Having a lot of experience with CSS I am really looking forward to UI Builder. From your video it looks pretty straightforward to use.

[syeddaniyalhaidernaqvi]

Maybe one day I'll switch to this UI Builder.. but for now I prefer the old one.. BTW your teaching style is concise and easy to understand. Thankyou for this❤

[Bambalombo]

It's insane to me, that you don't have more subscribers. Love your content :-) Thank you.

[pixelspaghetti]

This video is uber-helpful, literally no better place to start off with the UI toolkit, thanks a lot!

[CareyMcDuff]

Thank you for this! This is the only video I've found that explains how simple it is to create a UI Document object and asset to make a button menu. I'm just getting started in Unity. One reason I did so now is this new UI system. I'm glad I waited and never had to learn the old one!

[TheHronar]

Holy cow, UI Builder is exactly what I've been looking for in a UI solution for Unity. This is amazing.

[ruslan_yefimov]

So easy.. Loved your tutorial, thank you man!

[darrylwolfe]

Just when Im getting used to creating UI, now I discover this UI Builder.

[maxpayenvenic]

now with a bit of CSS skill I able to design UI I always wanted, thx

[bramblewoodhall]

Brilliant! - Clearly explained and gets me up and running with UI Builder with useful examples. Thank you.

[TheLazyIndianTechie]

Great tutorial. Always wondered what UI Doc was. Thanks!

[anbagames]

Thanks for the video! Will definitely check out UI Builder soon in my new project :)

[fokeyjo]

For anyone coming to this on newer Unity versions, the visualElement can now be center-aligned by using the alignSelf option in the Align properties.

[alexter-sarkisov]

Excellent intro tutorial! A couple of points: 1) in my version (2021.3.25f1) you have to manually click 'Add default input modules' in the Event System, otherwise nothing works, 2) When I create button style, font size for some reason defaults to 9.