How to create Roblox Guis using Figma!

[@ChrisisRoblox]

I was using figma to make roblox UI's but i got no idea this plugin exists, lov u🙏😭

[@MonzterDEV]

I'm happy to hear someone else has already been using Figma! I feel like it's quite uncommon. Hope the plugin helps!

[@cryptic2742]

Good to see Figma getting a shoutout. I am happy you're making your own version of the plugin. For more complex GUIs, there's a lot of fixing you'll need to do to your exported UI with the old plugin. Keep it up!!

[@komegaming3500]

I always created Ui's in Roblox and asked myself how other Uis could look so good just in the same programm. But Figma helps me a lot now everything is so much easier, adding gradient, depth, glow and stuff. Thank you for this video since it helped me a lot!

[@BossGamingYT-Live]

LOVE your content Thanks for this website!!!

[@MonzterDEV]

I'm happy to hear! :D Hope you enjoy it!

[@Neoxa7]

thanks for the plugin bro not website

[@nightxzz2]

nice video, i appreciate your content!

[@MonzterDEV]

Glad you enjoy it!

[@pun9052]

good to know. i used to create gui in paint3d and then put the png in my game and then create gui over it using the png as a reference

[@MarshMC23]

Nice Video bro!

[@user-tonnum-51s]

so helpful thanks! :D

[@musembifamily1318]

i have looked so much and i have never seen a good figma tutorial and also you should have named complete begginer guide to figma

[@MonzterDEV]

I'm happy to hear!! I plan on creating a short series on creating UIs with Figma eventually!

[@TypicalGameDeveloper]

@@MonzterDEV Don't

[@Mr_cactus871]

Wow rly amazing!!!!!

[@nanPichi]

Can you teach us how to do it using Ligma?

[@JdjdjdJdjsjsj-h6k]

ty for the video :)

[@cheetahrbx4575]

I haven’t used figma, but from what I see, if you’d like to make more advanced GUI/Logos I think it’s better to use photopea or photoshop.

[@MonzterDEV]

I'd say that those tools server a different purpose, but either works

[@IceWinder]

Wrong. Figma is the industry standard for UI design. Source: professional game designer

[@qwertystone]

ok cool, when are u making a game with personality.

[@DevV1ktor]

AYYYYYYY FIGMA!!! AMAZING VIDEO (PING ME 👀👀👀👀)

[@RyanEXElol]

I will, but what is your discord username?

[@MonzterDEV]

Thanks!!

[@DevV1ktor]

@@MonzterDEV No problem! 🔥

[@DevV1ktor]

@@RyanEXElol I meant it for the KZbin comment 😭

[@Mazen4Gamer]

help when i download the screen gui it did look upside down when i paste it in studio

[@DevOriginalLukas]

Figma is the best free tool to make gui (in my opinion)

[@eugenioiii398]

what should be the rize of the Frame 1280x720 or 1980x1080p

[@byronsagod2208]

Goated

[@MonzterDEV]

Thanks!

[@Ollie-j6l]

Bro i need some serious help. It completely messed up my UI forcing me to delete all of the UIstrokes and there was no drop shadows that i made. My UI looked professional in figma but complete trash in studio. Please help.

[@beemoRBX]

Hello! im having hard time to understand you are putting shadows and design on your button how you do it? i tried to make a shadow for my buttons

[@atlathic]

hey, so i am currently using it, works amazing, but when i try to export it, it says multiple fills r selected meanwhile i only selected the frame. how do i fix this? also, i want to use a scrolling tab but idk how to do that aswell.

[@lukqaz]

Yay

[@Lolgys]

idk why but when i import it to roblox studio it doesn't appears

[@Ollie-j6l]

Make sure its in a screenGUI

[@Lolgys]

@@Ollie-j6l It is

[@VoxBolt]

Same

[@VoxBolt]

Not works for me too

[@OverThere95]

are u gonna continue the obby tutorial series?

[@MonzterDEV]

Yup! Every Friday :D

[@OverThere95]

@@MonzterDEV nice! i'm so excited for this series!

[@Blood_Streams]

Lunacy is also very good and it's very similar to figma

[@MonzterDEV]

I'll have to check it out!

[@amara7734]

considering all the sizes are offsets, is there a way to autoscale for different devices withought a module?

[@mariamkuku6508]

WHAT'S THE PLUGIN HOW DO U SEE THAT PLUGIN THE ROBLOX PLUGIN

[@mariamkuku6508]

Idk

[@Forlornicus]

sorry but im gonna keep using roblox ui its way quicker for me

[@MonzterDEV]

Whatever works!

[@itsLozCS]

You can def plan a layout for your UI way better with Figma / Photoshop. It's way easier to make a design by dragging and dropping rather than making a design on the platform itself imo, similar to web design, it's annoying to code a design and plan that at the same time rather than designing a layout first then code what you made

[@Forlornicus]

@@itsLozCS i dont use roblox anymore i make software and program stuff roblox is too easy

[@Phantom_Blox]

@@Forlornicuswell it’s those who are not experienced will think a certain platform or language is “harder” than other platform or languages lol

[@EvanPilb]

@@Forlornicus developing isn't about which method is harder

[@kaizoku4005]

Your plugin doesn't work. fix it?

[@BadKD]

Can you link the module you talked about in the video that makes the UI appear the same for all platforms?

[@pomarotte2678]

hi, thank you for updating the plugin! Any idea why, if you use components in Figma. The plugin will import them on Roblox as an image with the URL "undefined" instead of a frame and without its children elements? Also, if you detach the instance before using the plugin, it will work fine. Thank you again! :) Edit: Here is a quick workaround I found, I found a Figma plugin called "DETACH THEM ALL" to detach all the component in the selected frame and its children. So I use it, then export my design, then I Ctrl+z to make the frames components again. Also, if I forget to Ctrl+z right away, there is a plugin named “Reattach instances” to do it.

[@-Less-]

Would you be able to import a looped animation into Roblox studios?

[@ShortyJustin]

love you

[@Lyricaluxe]

Figma litterly used robloxs ui corner and UI stroke it's easier to add those on roblox

[@user-tonnum-51s]

but how to get that plugin: "figma to roblox fork"?

[@musembifamily1318]

6:32 how did he insert that image

[@MonzterDEV]

You can copy and paste the image into the Guis frame. Look under the Fill property and it has the color displayed. The image will be put under the Fill property.

[@armaangaminguk]

What is better? Photoshop/Photopea or Figma (I prefer Photoshop/Photopea but it's just an opinion)

[@MonzterDEV]

I prefer Photopea, even over Photoshop for image work like Thumbnails, but Figma is absolutely king for UI design (both for Roblox or website design).

[@TwisterX8]

​@@MonzterDEVDon't mention the KING.

[@naianimator]

@@MonzterDEV But isnt easier to work with photoshop?

[@ice-waterrrr]

figma deez

[@Flairex]

Cartoon Guis are massively trash talked by most of the dev community lmao But this is a good tutorial

[@sfsdfsfsdfsdfsdsdfsdfsdf33]

who gives a fuck its our damn game

[@amara7734]

Second comment and I get alot more. I saw you on the figma to roblox plugin page in the forums so I wanted to ask you directly because I'm stuck. I used several images in figma for backgrounds and such and I would like to know how to import the images as well. As of now, when I attempt to import, it gets the general shapes and colors and works perfectly for frames without images, but for images they simply dont upload. On the forums i saw something about uploading assets via opencloud api and i don't know how to do that. Any help would be appreciated alot. Thanks.

[@S33KZ112]

whats figma!!! i just use studio and make stuff like this sure it takes an extra hour 😭

[@BuraksMemesVlogsAndAnimeツ]

I wanna show a major mistake making Guis: Someone putting arrow instead of ‘’’’. Some putting cross instead of ‘’X’’ or ‘’x’’.

[@MonzterDEV]

Could you elaborate?

[@BuraksMemesVlogsAndAnimeツ]

@@MonzterDEVI think… I have no idea…

[@Luxex1]

Can i ask why my guis is invisible? In roblox studio

[@minebloxproz]

Same

[@MrSythcemen]

how i get the plugin ?

[@Pro123-xg7gw]

Cool

[@hugosnipurr1841]

Ya

[@Bing3107]

Hey would it will be cool if you make a game like strongman simulator by the gang gaming?

[@MonzterDEV]

Hey, I don't have plans of that, sorry!

[@Bing3107]

@@MonzterDEV Try your best if you can

[@Neoxa7]

Hey can you make an Prophunt game tutorial

[@MonzterDEV]

Hey, I don't have plans of that, sorry!

[@ChikmenComments]

pls make sword fighting sim next!!!

[@MonzterDEV]

Hey, I don't have plans of that, sorry!

[@ChikmenComments]

@@MonzterDEV oh, it’s alr!

[@BossGamingYT-Live]

11:55 What happened???

[@MonzterDEV]

No idea haha!

[@Boomirangle]

using sigma 🤓👆

[@VidVisions]

Are you good at building? I really want help

[@MonzterDEV]

Not in the slightest 😭🤣

[@LET655]

Sigma

[@duhv2]

hey!. can you make a tutorial make a bee swarm simulator game?

[@MonzterDEV]

Hey, I don't have plans of that, sorry!

[@duhv2]

@@MonzterDEV its okay, btw i love your vids

[@chxrry_blossomz]

figma ❌ sigma ❌ ligma ✅

[@ThatFATbannana]

it says undefined.

[@queueuof]

erm what the figma

[@monkehhhhhhhh]

How do u make a scrolling guide in figma?

[@MonzterDEV]

I usually make a 'fake' scrolling frame. Basically, just add a vertical line to represent the scroll bar and then create a container frame beside it and store all my usual stuff in there.

[@monkehhhhhhhh]

Ok thank you for helping 🤗

[@alanafarah]

“Buhns”

[@Maukie]

At this point just learn Roblox studio its way easier.

[@Vo3pal]

Not as good as roblox, figma allows more creativity than roblox

[@djstankwank]

what the figma

[@jexeryt]

Figma? More like Ligma

[@shauryadeb-e8l]

thats so skibidi

[@verachez5319]

is it free

[@boblox_studio_dev]

figma balls (the rot consumes)

[@KittyGamingsArt]

L FIGMA LLLLLLLLLL

[@LucasDoorsBlox]

just one letter a way to spell sigma

[@Cortex_ieu]

you are bad with UI's.

[@ThatMagicalGuy1]

😢

[@xxneweraxx7422]

What a useful and informative comment lol