This 53 minute tutorial follows the first part where we designed this Units frame from the game Anime Last Stand inside of Photoshop, which you can watch for free here.

In this second part, we'll be learning how to import and reconstruct this entire UI from scratch inside of Roblox Studio.

Throughout this video, we'll cover:

• Using CanvasGroup in order to create our Top and Bottom Bars in the Main frame.

• Adding our texture and stylizing our Main UI frame with a gradient and transparency effects

• Using ListLayout and Padding to create our Search Bar and Item text.

• Using ListLayout to create our item details such as the XP Bar, and Upgrade Sliders so that the elements are not simply manually or absolutely positioned, but uses relative position that adheres to the defined layout properties.

You'll learn how we can take our initial design and to create it into a full-fledged, tangible product that is ready for programming and development.

This tutorial is over 53 minutes in length, and is part of our Design Academy bundle, which you can check out here.

Terms and Conditions: Please review our Policy Page thoroughly before making your purchase. By completing your purchase, you agree to adhere to the terms and conditions described therein.

If you enjoyed these design products, consider upgrading to Unlimited Access, to see more of what we have to offer, or browse our collection of premium design products.