[UPDATED PLUGIN] - Epic UI Pack - User Interface Assets

MapleMarvel · March 3, 2023, 12:27pm

Quickly Create Game User Interfaces Using Hundreds Of Predesigned UI Elements

Marketplace Link

Description

This plugin provides an extensive library of user interface (UI) assets that Roblox developers can use to quickly create user interfaces for their games.

Save time with ready-to-use UI assets
Professionally designed, beautiful, high-quality assets
Easily customizable using properties, or convenient attributes
Mix and match UI elements to build complete user interfaces
Responsive text that maintains a consistent size on any device or screen size
Optimized for Roblox with high image quality and fast loading
Intuitive and simple to use
Helpful built-in documentation

How To Use

Click on a UI element to add it to the center of your screen
Optionally, adjust the element attributes in Studio or in code as described below
Press Play to view

It is helpful if you understand UI concepts as described in the Roblox User Interface documentation.

Plugin Permissions

Select Allow when prompted to allow the plugin to manage scripts.
This can also be set in Plugins: Manage Plugins, and editing the script permissions for the plugin. Just click the Edit icon next to “Script Injection Allowed”.
For more info: Plugin Script Modification Permissions.

User Interface Assets

The UI elements in the plugin are listed below.

Attributes
Most elements have attributes that can be used to quickly customize the value or appearance of the element. Attributes can be edited using the attributes panel in Roblox Studio, or using the Roblox Attributes Methods in code. See the Attributes Tutorial below to learn more.

Size
The size of each element can be adjusted to any dimension.

Text
All the text is editable, and is also responsive so that it maintains a consistent size on any device or screen size.

Buttons

These are Roblox TextButtons and ImageButtons, with an enhanced graphical design.

Text Buttons 1

Text buttons in four different styles and ten different colors. The text is editable.

How To Use

Add a button using the plugin.
Select the inserted button within StarterGui.
Edit the text using the element’s attributes as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will handle button clicks with a script using Roblox API button methods.

Four Button Styles
The buttons come in four different styles in ten colors. Or edit the values to create your own design and colors!

Any Button Size
Buttons can be resized to any dimension. The text is responsive so that it automatically resizes (at runtime) to the proper size for computers, tablets, and phones.

Text Buttons 2

Text buttons that point in a direction which is useful for drawing the user’s attention. The text is editable.

How To Use

Add a button using the plugin.
Select the inserted button within StarterGui.
Edit the text using the element’s attributes as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will handle button clicks with a script using Roblox API button methods.

Text With Image Buttons

Buttons that have both text and an image, which is useful for price buttons. The text is editable. The icon image and color is editable so that any icon can be used on any button. These buttons are available in the four different button styles.

How To Use

Add a button using the plugin.
Select the inserted button within StarterGui.
Edit the text using the element’s attributes as described on the More Info pages in the plugin.
Edit the image using properties as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will handle button clicks with a script using Roblox API button methods.

Left Aligned

Right Aligned

Image Buttons

Image buttons of various designs and colors. The icon image and color is editable so that any icon can be used on any button.

How To Use

Add a button using the plugin.
Select the inserted button within StarterGui.
Edit the image using properties as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will handle button clicks with a script using Roblox API button methods.

Buttons Image

Form Elements

Checkbox, radio button, and switch images that can be used in forms you develop. The size and colors are editable. If you need ready-to-use, fully interactive form elements, please see the Forms UI Pack plugin.

How To Use

Add an form element using the plugin.
Select the inserted element within StarterGui.
Press Play in Studio.
Typically, developers will program form functionality using Roblox API methods.

forms01

Icons

Includes over 200 essential icons designed specifically for game development.

Icon Set 1

Icons with a default color of white that can be set to any color.

How To Use

Add an icon using the plugin.
Select the inserted icon within StarterGui.
Edit the size or color using properties as described on the More Info pages in the plugin.
Press Play in Studio.

Icon Set 2

Icons in full color.

How To Use

Add an icon using the plugin.
Select the inserted icon within StarterGui.
Edit the size or color using properties as described on the More Info pages in the plugin.
Press Play in Studio.

icons02

Bars

Bars of various types that can be used to show game or player progress.

Progress Bars

A progress bar that can be used to show the progress of any goal within the game. The bar completion and text are editable.

How To Use

Add a bar using the plugin.
Select the inserted bar within StarterGui.
Edit the text or bar percent using the element’s attributes as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will set the bar values with a script using Roblox API attributes methods.

bars01

Info Bars

These bars can be used to show various game information such as progress, currency, XP, resources, etc. Both left aligned and right aligned versions are included. The icon, bar completion, and text are editable. The button is optional and can be hidden.

How To Use

Add a bar using the plugin.
Select the inserted bar within StarterGui.
Edit the text or bar percent using the element’s attributes as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will set the text, bar values, and handle button clicks with a script using Roblox API methods.

Character Frames

An element that is typically used to show the character portrait, player level, and bars showing the current health, mana, or other stats. The image, text, and bars are all editable.

How To Use

Add a character frame using the plugin.
Select the inserted frame within StarterGui.
Edit the text or bar percent using the element’s attributes as described on the More Info pages in the plugin.
Edit the image using properties as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will set the text, image, and bar values with a script using Roblox API methods.

Tabs

Tabs that can be used to add navigation to your UI.

Tab Style 1

Tabs with designs in both horizontal and vertical orientations. The text is editable, as is the color of the text. An optional separator line can be shown between tabs.

How To Use

Add a tab using the plugin.
Select the inserted tab within StarterGui.
Edit the text using properties as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will set the selected tab with a script using Roblox API attributes methods.

Tab Style 2

A traditional tab style. The text is editable, as is the color of the text, and the color of the tabs.

How To Use

Add a tab using the plugin.
Select the inserted tab within StarterGui.
Edit the text using properties as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will set the selected tab with a script using Roblox API attributes methods.

Windows

Windows that can be used for any purpose within games.

Windows

A window that can be used to display any type of UI content. The title is editable.

How To Use

Add a window using the plugin.
Select the inserted window within StarterGui.
Resize and position as needed.
Edit the title using properties as described on the More Info pages in the plugin.
Add your content to the body.
Press Play in Studio.
Typically, developers will handle the close button with a script using Roblox API button methods.

Dialogs

A dialog box that displays information and has buttons for user interaction. The title, text, and buttons are editable.

How To Use

Add a dialog using the plugin.
Select the inserted dialog within StarterGui.
Resize and position as needed.
Edit the text using the element’s attributes as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will handle button clicks and the close button with a script using Roblox API button methods.

Store

Windows that show coins, gems, and cash packs for sale. The text items, images, and buttons are editable.

How To Use

Add a window using the plugin.
Select the inserted window within StarterGui.
Edit the text, product image, and button using the element’s attributes as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will handle button clicks with a script using Roblox API button methods.

Promos

Windows that show an example of items being promoted. The banner, text items, images, and buttons are editable.

How To Use

Add a window using the plugin.
Select the inserted window within StarterGui.
Edit the text, product image, and button using the element’s attributes as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will handle button clicks with a script using Roblox API button methods.

Achievements

Windows that show an achievement such as the player leveling up or completing a task. The text and buttons are editable.

How To Use

Add a window using the plugin.
Select the inserted window within StarterGui.
Edit the text and button using the element’s attributes as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will handle button clicks with a script using Roblox API button methods.

Quests

Elements that show the progress of a quest or achievement. The title, description, progress bar, and button are editable.

How To Use

Add a quest using the plugin.
Select the inserted quest within StarterGui.
Edit the text, progress bar, and button using the element’s attributes as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will set the bar values and handle button clicks with a script using Roblox API methods.

Panels

Panels are intended to be used to display content within windows. You can adjust the colors to complement the color of your window background.

How To Use

Add a panel using the plugin.
Select the inserted panel within StarterGui.
Resize and position as needed.
Edit the size or color using properties as described on the More Info pages in the plugin.
Press Play in Studio.

Graphics

Graphics that are useful for UI designs.

Accents

How To Use

Add a graphic using the plugin.
Select the inserted graphic within StarterGui.
Resize and position as needed.
Edit the size, color, or transparency using properties as described on the More Info pages in the plugin.
Press Play in Studio.

Lighting

Lighting graphics are useful to showcase other graphics, such as products in your store. The color and transparency are editable.

Sparkles

Sparkles are useful as a background graphic to enhance the appearance. The color and transparency are editable.

Gradients

Gradients are often used behind other elements to add focus or interest. The color and transparency are editable.

accents-gradients

Graphics

Graphics such as these are often used in the background to showcase other graphics. The color and transparency are editable.

accents-graphics

Shadows

Shadows are often used behind or under other graphics to look like a shadow. The color and transparency are editable.

accents-shadows

Metallic Gradients

These gradients are useful to make frames, icons, or other UI elements look metallic. The colors and transparency are editable.

Counters / Notification Badges

Elements that can be used as counters or notification badges. The text is editable.

How To Use

Add a counter using the plugin.
Select the inserted counter within StarterGui.
Edit the text using the element’s attributes as described on the More Info pages in the plugin.
Press Play in Studio.
Typically, developers will set the text with a script using Roblox API attributes methods.

counters01

Stickers

Stickers can be used to showcase products with additional information. The text is editable.

How To Use

Add a sticker using the plugin.
Select the inserted sticker within StarterGui.
Edit the text using the element’s attributes as described on the More Info pages in the plugin.
Press Play in Studio.

stickers-01

Banners

Banners in a ribbon style that can really make the title stand out. The text is editable.

How To Use

Add a banner using the plugin.
Select the inserted banner within StarterGui.
Edit the text using the element’s attributes as described on the More Info pages in the plugin.
Press Play in Studio.

Currency

Images of coins, gems, and money in various amounts that can be used in product images, promotions, or currency displays.

How To Use

Add a graphic using the plugin.
Select the inserted graphic within StarterGui.
Resize and position as needed.
Press Play in Studio.

More

Additional user interface elements.

Grids

Grids can be used for such things as inventory or product listings. The color, grid size, and cell size are editable.

How To Use

Add a grid using the plugin.
Select the inserted grid within StarterGui.
Resize and position as needed.
Edit the grid or cell size using properties as described on the More Info pages in the plugin.
Press Play in Studio.

Text

The text is editable, and is also responsive so that it maintains a consistent size on any device or screen size. This is important, for example, so that your text looks the same on a mobile device as it does on a computer.

How To Use

Add the text using the plugin.
Select the inserted text within StarterGui.
Edit the text using the element’s attributes as described on the More Info pages in the plugin.
Press Play in Studio.

text01

Attributes Tutorial

This tutorial explains how to use the attributes of the UI elements. The help pages within the plugin have a description of all the attributes.

View Tutorial

Progress Bar Example
In this example, you will edit the values and appearance of a progress bar using attributes. The attributes of other elements are set in a similar way.

View The Attributes

First, add a Progress Bar using the plugin.
Click on the Progress Bar element within StarterGui.
In the Properties panel, scroll down to the bottom until you see the Attributes section.

Attributes of the progress bar:

Set Attributes Using The Properties Panel

Use the Properties panel to set the attribute values, and then press Play to see the changes.

Set The Bar Percent

Use the BarPercent attribute to change the bar length.
In the Properties panel, in the Attributes section, enter a value of 20 in the BarPercent attribute.

tutorial02

Press Play in Roblox Studio to play the game.
The progress bar length is now displayed at the new value:

Set The Text Value

Use the TextValue attribute to change the text displayed.
In the Properties panel, in the Attributes section, enter a value of QUESTS 2/10 in the TextValue attribute.

tutorial04

Press Play in Roblox Studio to play the game.
The progress bar text is now displayed with the new text:

Set The Text Size

Attributes can also be used to customize the appearance, such as the size of the text.
In the Properties panel, in the Attributes section, enter a value of 0.9 in the TextSizeScale attribute.

tutorial06

Press Play in Roblox Studio to play the game.
The progress bar text is now displayed at the larger text size:

Set Attributes Dynmically At Runtime

Press Play, and then edit the attribute values to see the changes immediately. This is a great way to see what all the attributes do.

Press Play in Roblox Studio to play the game.
In the Explorer panel, open the Players section, and select the Progress Bar as shown in the screenshot below.
In the Properties panel, in the Attributes section, edit any of the attributes to immediately see the changes.

Set Attributes With Code

Add a LocalScript within ScreenGui as shown below.
In the LocalScript, use the SetAttribute method to set the attribute values.

Press Play in Roblox Studio to play the game and view the new values.

Roblox Documentation

Roblox Attributes Methods

License

The license is fair and easy to understand.

View License

End User License Agreement

The end user of this plugin must purchase this plugin from the Roblox Creator Marketplace in order to obtain the rights in this agreement. The end user meeting these requirements is granted rights to use or modify the UI assets provided by this plugin in Roblox experiences developed by the end user.

Latest Updates

View Updates

Added three new button styles.
Improved price buttons so the text and icon remain centered.
Added achievement windows.
Added store graphics.
Added lighting and sparkles graphics.
Added image with text buttons.
Added additional icons.
Added drop shadows.
Added additional icons.
Added stickers.
Added additional icons.
Added form elements.
Added the Attributes Tutorial above.
Added additional icons.
Added new currency graphics showing stacks of money.
Added settings panel that allows the scripts to be included or excluded.
ModuleScripts have been consolidated into StarterPlayerScripts.
Additional documentation has been added.

Contact Info

If you have any suggestions, requests, or need assistance, then please send me a direct message in these forums. I am happy to help!

Thanks For Your Support

If you like the plugin, then please leave a thumbs up or review on the plugin page in the Roblox Marketplace.

This makes a big difference and helps fund new development. Your support is very much appreciated!

Marketplace Link

Other Great Plugins

Store UI Pack

Quickly Add A Fully Functional Store To Your Game!

Forms UI Pack

Easily Add Interactive Form Elements To Your User Interface (UI)

ph33sh · March 4, 2023, 5:40am

a few comments from trying it so far- It seems every panel is set by default with fixed pixel sizes, with fixed text sizes, unless I’m missing a configuration option. I can manually change the frame and underlying elements to scale and then go through the exercise of adding other size constraints so they work on small mobile screens without the elements becoming too out of whack, but I’m just wondering if I’m missing a built in config for it. The panels I’ve tried won’t adapt well for small screen mobile without a lot of tinkering. (again, maybe i’m missing something).

The built-in documentation is nice, but it might benefit from a more extensive tutorial/ general overview section. There’s a lot of ‘configuration’ settings sprinkled about and it could be helpful for a general overview of how you intend things to be used.

An example of an improvement to some of the help info, for dialogue for example it says “same as described elsewhere” (where??) rather than just listing the attributes.

Anyway, this is just my quick first feedback- overall pretty cool.

alpharetzy2 · March 4, 2023, 5:58am

But why is this so expensive???

alpharetzy2 · March 4, 2023, 5:58am

1200 robux for a plugin, i hated the pricing of these.

ph33sh · March 4, 2023, 8:58am

Someone designing a very nice looking UI for you costs many thousand robux, so getting all of these assets doesn’t seem so expensive in that regard. And often those are just psd’s, rather than in studio.

MapleMarvel · March 4, 2023, 5:46pm

Thanks for the feedback.

Basically all elements are designed to resize to any size and still look good!
When you first insert an element, it is placed at the same size as the preview in the middle of the screen. You can then adjust the position and size to anything that you want.
Each game is different, so the developer can set the size according to their needs. In general, using the Scale parameters of the Size property is the best way to make an element have a size that adjusts based on the dimensions of the screen. A good article on this is at: Positioning and Sizing UI Objects | Documentation - Roblox Creator Hub
The text autosizes at runtime, based on the attribute settings. So you do not have to adjust the text manually.
The Configuration variables are used internally, and should not be altered. So you can ignore them.
I will work on adding additional documentation.
Added an Attributes Tutorial to the original post.

MapleMarvel · March 4, 2023, 5:54pm

It comes down to how much time and effort a developer can save instead of having to do all the work on their own.

Calculate how much it would cost you to design all the assets, scripts, and build the UI on your own.
Comparatively, Roblox plugins are a fraction of the price of those on other asset stores, game engines, or online graphic stores.

The bigger issue is that Roblox takes such a huge cut from developers that it is hard for plugin authors to even get back the money invested in developing the plugin.

Take for example a plugin priced at 1000 Robux:

1000 R$ for a plugin is the listed price.
Roblox takes a 30% cut leaving 700 R$ for the author.
Roblox currently offers an minuscule developer exchange rate of USD 0.0035 per Robux. So that means the author makes a profit of: 700 x .0035 = $2.45 USD per sale. That’s not a lot of money making it back to the author.

Catitudethecat · March 5, 2023, 8:54pm

This is amazing! I’d love to see a midevil kit with your skills!

Simvoid · March 6, 2023, 1:37am

That’s about GBP 15 if you were buying robux to purchase it. Most UI artists would charge around that for less than this plugin gives to be fair.

MapleMarvel · March 6, 2023, 1:35pm

The plugin has been updated with additional documentation for these attributes.

KinderHSPVA · March 22, 2023, 3:48am

Love the UI’s!! The marketplace price is a tad bit too expensive. In my opinion I would probably bring it down 200R$

Dev_Abrahel · March 23, 2023, 6:52am

It’s super cool to have made this plugin but in my opinion it’s a bit expensive 1200 robux for this plugin

alpharetzy2 · March 24, 2023, 12:02pm

Yeah i agree. Bringing it down to 200 or 100 robux would be a far better price than 1200.

iayze1k · March 24, 2023, 12:58pm

That’s a really unfair price for what you’re getting, 100 robux is barely even a dollar. Commissioning a ui artist for this would cost you like 10k robux

Natsu_Dawn · March 26, 2023, 3:43am

Bought this not to long ago, for what you are paying it is definitely worth it. Easy to implement the UI as it’s just a click of a button.

alex_unboxed · March 27, 2023, 7:31am

could you add other forms of currency, i.e cash

MapleMarvel · March 27, 2023, 2:22pm

Sure, please send me a direct message with some examples of the types of images that you had in mind.

woofIamadog421 · March 27, 2023, 8:40pm

100% not.

Suggesting this guy made a design system, it should be more expensive than what he is charging now.

Natsu_Dawn · March 29, 2023, 10:07am

Some feedback: Having the option to not insert scripts would be nice, as all I’m needing is the UI itself, with that if the user has not chosen to insert scripts then unneeded objects like “Configuration”, and “Hover” wouldn’t be added.

Also some of the UI isn’t scaled for all devices properly (etc having offsets instead of scales set in size.), I’d recommend removing the UI contraints as well and with the text have them be scaled. But other than that I think this plugin is very good, you have done a very nice job of creating it.

MapleMarvel · April 3, 2023, 2:45pm

The latest update added a new Settings area that allows you to include or exclude the scripts! Thanks for the suggestion.