Figma UI Components for Studio

Resources Community Resources
, , , ,
#1

Roblox × Figma

A set of Figma components and styles for designing themed Roblox Studio UIs.

Components
Components1920×1132 64.3 KB

Get it on Figma →

This project contains 15 separate components, each with alternative variants. The project file also includes all theme colours, both dark and light settings (the colour styles palette contains 1000+ colours; labelled), relative to Studio version 0.455.0.413788.

This project is designed to help speed up your workflow when designing plugins for Roblox Studio. Please see the download links below to import it to Figma.

Download

This is a free set of UI components available to download for use with Figma. Follow the link below to the project page, and clone a copy to your account.

[Link removed]

Examples

The following images are recreations of their respective windows in Roblox Studio using the provided components:

Examples
Examples2060×741 95.3 KB

The Toolbox UI took roughly 5 minutes to reproduce!

Recommended Plugins

Atlas - Theme Switcher

By default, the components included in this project are in dark mode. While light mode styles are included in the file, in order to switch between them you will need to either do it manually, or use the Atlas Figma plugin, which allows for switching between styles.

If required, you will need to add two themes to your “Local Theme Map” section: “Dark” and “Light”. The styles included in the project are already compatible with this plugin. To switch between themes, simply select an object or component with styles applied, open Atlas, and change the theme from the “Selection” dropdown.

Button Resizer

Button Resizer by Microsoft makes it easy to automatically resize button components to fit the text content. I’d highly recommend using it.

Bonus - Theme Exporter/Importer

I created a Figma plugin especially for this project, which allows the entire theme objects to be imported as Styles directly to your project. It currently will import the entirety of the dark and light themes (including modifiers), so may lag you momentarily.

88 Likes
Thinking about new features for Roblox Studio.Data Table, Inspector, Prefabs
#2

Wow! That’s amazing.
I wonder how you imported or replicated Roblox Studio’s UI into Figma? :slight_smile:

3 Likes
#3

Wow- I’ve never seen this before, I love it!

2 Likes
#4

I actually made all the components myself using the tools in Figma. I also made a Figma plugin especially for this (linked at the bottom of the post), which exports the theming information from Studio and imports it into Figma as styles (so your colour palette is populated with Studio’s theme colours).

The replication of Studio UIs were then made (mostly) using the components, some with slight modifications as Studio’s UI can be quite inconsistent. It’s all included in the project file, so you’re free to dive in and have a look at how it’s all put together! You should be able to save a copy of the project to your Figma account (if I’ve shared it correctly).

@Pie_Developer thanks! Glad you like it.

2 Likes
#5

I may be bumping this but these components look amazing. The items in here honestly looks exactly like the Roblox ones, these components will definitely be useful, thank you so much @cxmeels :smiley:

1 Like
#6

Thank you so much, that’s amazing :grinning:

1 Like
#7

This is probably a stupid question, but is it possible to use this as UI for my game or does it only work for other stuff?

#8

Yeah, you could certainly do that, you just need to export what you want using Figma.

Also, it could be me, but I think this is supposed to be green instead of blue @cxmeels

Screenshot_2022-04-29-20-03-01-082_com.microsoft.emmx
Screenshot_2022-04-29-20-03-01-082_com.microsoft.emmx1080×2400 123 KB

#9

Yeah, it is, thought it looked odd, not on Desktop so I used a tutorial of mine to check the toggle, and the colours are wrong

Screenshot_2022-04-29-20-04-57-907_com.microsoft.emmx
Screenshot_2022-04-29-20-04-57-907_com.microsoft.emmx1080×2400 277 KB

#10

this resource is a little outdated. there’s more theme colours now that are not in the figma file, but overall it shouldn’t matter if it’s not 100% correct—you should only really be using something like this for mockups and prototyping

the reason I used blue instead of green for the toggles is because that green colour isn’t (or wasn’t) actually available in the standard studio theme. I also opted for white on the handle because it seemed more accessible than a dark colour

the game settings window (among other built-in plugins) in Studio seem to only loosely use the official theme colours, hence why not all demo interfaces in that figma file are identical to what you actually see

instead of using this resource, I would probably recommend you build the components yourself and import the Studio themes using this figma plugin:

1 Like
#11
#12