How to Plan, Design and Build Quality User Interfaces

That looks awesome! I made mine simplified, but you definitely beat me to the point :smile: good job for going the extra mile.

How did you change colors in your UI? When switching from X to Check?

1 Like

You do transition colours by using Tween Service. You can tween each RGB value to the check mark value and you’ll get the nice transition effect.

1 Like

Oh, as me, have .01% knowledge of scripting, that’ll be something I have to research.

There’s no need for competition :grinning:

1 Like

Speed up the animation. :stuck_out_tongue:

Thank you so much for this. I was struggling so badly with ui and I was considering hiring someone. Adobe XD is exactly what I needed. Everything looks so crisp

1 Like

I created a blank file with the Roblox Topbar that can serve as a template for those who want to create interfaces that involve the Topbar.

How it looks like:


This is a good tutorial but I have a huge problem. When I want to open Adobe XD there is a blank page and then the program is closing after 2-3 seconds

Oh well nevermind, I did a mistake, now it’s fixed!

For others who may run into the same issue, you must open the Adobe Creative Cloud application first before opening Adobe XD and using its online features, however if your files are offline(saved on your computer), you need not open the Creative Cloud application first before Adobe XD.

Make sure to leave Adobe Creative Cloud running in the background.

Great guide, it’s never occurred to me that Adobe XD could be used for Roblox UI design.

Am I the only one having problems with getting Xd? I install it, but when I tried to open the .exe nothing happens.

Is your Adobe Creative Cloud open in the background?

No because that won’t open either.