How to Plan, Design and Build Quality User Interfaces

Resources Community Tutorials
#23

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.

2 Likes
#24

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

#25

There’s no need for competition :grinning:

1 Like
#26

Speed up the animation. :stuck_out_tongue:

1 Like
#27

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
#28

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:

image
image1488×842 4.24 KB

9 Likes
#29

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

#30

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

#31

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.

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

#32

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

1 Like
#33

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

#34

Is your Adobe Creative Cloud open in the background?

#35

No because that won’t open either.

#36

This was a very descriptive post. Thanks for the information! I am UI Designer who is currently looking to become good. This post will be helping me out, that is for sure! Thanks again! :slight_smile:

2 Likes
#37

Thanks for making this tutorial! Can’t wait to use this to help me make better UIs.

Edit: Wow, I’m late.

2 Likes
#38

How did you manage to change the x to ✓ is it tween service?? I am willing to learn on how you did it. :slight_smile:

#39

It seems as if they exported the lines completely separate, just as lines. From there, they could tween the size, position, and rotation along the way.

1 Like
#40

Great tutorial Excellent, helps alot.

1 Like