How to create Roblox Guis using Figma!

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 พ.ย. 2024

ความคิดเห็น • 118

  • @ChrisisRoblox
    @ChrisisRoblox 8 หลายเดือนก่อน +20

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

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน +2

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

  • @cryptic2742
    @cryptic2742 6 หลายเดือนก่อน +9

    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
    @komegaming3500 4 หลายเดือนก่อน +5

    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
    @BossGamingYT-Live 8 หลายเดือนก่อน +6

    LOVE your content
    Thanks for this website!!!

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน +2

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

    • @Neoxa7
      @Neoxa7 7 หลายเดือนก่อน +1

      thanks for the plugin bro not website

  • @MarshMC23
    @MarshMC23 8 วันที่ผ่านมา +1

    Nice Video bro!

  • @nightxzz2
    @nightxzz2 8 หลายเดือนก่อน +5

    nice video, i appreciate your content!

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน +1

      Glad you enjoy it!

  • @musembifamily1318
    @musembifamily1318 8 หลายเดือนก่อน +2

    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
      @MonzterDEV  8 หลายเดือนก่อน

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

    • @TypicalGameDeveloper
      @TypicalGameDeveloper 7 หลายเดือนก่อน

      @@MonzterDEV Don't

  • @user-tonnum-51s
    @user-tonnum-51s 7 หลายเดือนก่อน +4

    so helpful thanks! :D

  • @Mr_cactus871
    @Mr_cactus871 8 หลายเดือนก่อน +1

    Wow rly amazing!!!!!

  • @qwertystone
    @qwertystone หลายเดือนก่อน +2

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

  • @cheetahrbx4575
    @cheetahrbx4575 8 หลายเดือนก่อน +2

    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
      @MonzterDEV  8 หลายเดือนก่อน

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

    • @IceWinder
      @IceWinder 6 หลายเดือนก่อน +2

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

  • @JdjdjdJdjsjsj-h6k
    @JdjdjdJdjsjsj-h6k 8 หลายเดือนก่อน +1

    ty for the video :)

  • @lukqaz
    @lukqaz 8 หลายเดือนก่อน +1

    Yay

  • @DevOriginalLukas
    @DevOriginalLukas 2 หลายเดือนก่อน +3

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

  • @Blood_Streams
    @Blood_Streams 8 หลายเดือนก่อน

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

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน

      I'll have to check it out!

  • @byronsagod2208
    @byronsagod2208 8 หลายเดือนก่อน

    Goated

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน

      Thanks!

  • @pomarotte2678
    @pomarotte2678 6 หลายเดือนก่อน

    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.

  • @Mazen4Gamer
    @Mazen4Gamer 3 หลายเดือนก่อน +1

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

  • @ShortyJustin
    @ShortyJustin 7 หลายเดือนก่อน

    love you

  • @OverThere95
    @OverThere95 8 หลายเดือนก่อน +1

    are u gonna continue the obby tutorial series?

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน +1

      Yup! Every Friday :D

    • @OverThere95
      @OverThere95 7 หลายเดือนก่อน +1

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

  • @amara7734
    @amara7734 4 หลายเดือนก่อน

    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.

  • @Pro123-xg7gw
    @Pro123-xg7gw 5 หลายเดือนก่อน

    Cool

  • @atlathic
    @atlathic 9 วันที่ผ่านมา

    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.

  • @beemoRBX
    @beemoRBX 2 หลายเดือนก่อน

    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

  • @Forlornicus
    @Forlornicus 8 หลายเดือนก่อน +28

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

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน +8

      Whatever works!

    • @itsLozCS
      @itsLozCS 2 หลายเดือนก่อน +3

      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
      @Forlornicus 2 หลายเดือนก่อน +1

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

    • @Phantom_Blox
      @Phantom_Blox 17 วันที่ผ่านมา +1

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

    • @EvanPilb
      @EvanPilb 10 วันที่ผ่านมา

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

  • @BadKD
    @BadKD 4 หลายเดือนก่อน

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

  • @nanPichi
    @nanPichi 16 วันที่ผ่านมา

    Can you teach us how to do it using Ligma?

  • @amara7734
    @amara7734 4 หลายเดือนก่อน

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

  • @Lolgys
    @Lolgys 4 หลายเดือนก่อน +3

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

    • @Ollie-j6l
      @Ollie-j6l หลายเดือนก่อน

      Make sure its in a screenGUI

    • @Lolgys
      @Lolgys หลายเดือนก่อน

      @@Ollie-j6l It is

    • @VoxBolt
      @VoxBolt 15 วันที่ผ่านมา

      Same

    • @VoxBolt
      @VoxBolt 15 วันที่ผ่านมา

      Not works for me too

  • @Flairex
    @Flairex 4 หลายเดือนก่อน

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

  • @Ollie-j6l
    @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.

  • @ChikmenComments
    @ChikmenComments 8 หลายเดือนก่อน

    pls make sword fighting sim next!!!

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน

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

    • @ChikmenComments
      @ChikmenComments 8 หลายเดือนก่อน

      @@MonzterDEV oh, it’s alr!

  • @Lyricaluxe
    @Lyricaluxe 9 วันที่ผ่านมา

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

  • @-Less-
    @-Less- 7 หลายเดือนก่อน

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

  • @armaangaminguk
    @armaangaminguk 3 หลายเดือนก่อน

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

    • @MonzterDEV
      @MonzterDEV  3 หลายเดือนก่อน

      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
      @TwisterX8 2 หลายเดือนก่อน

      ​@@MonzterDEVDon't mention the KING.

    • @naianimator
      @naianimator 2 หลายเดือนก่อน

      @@MonzterDEV But isnt easier to work with photoshop?

  • @ice-waterrrr
    @ice-waterrrr หลายเดือนก่อน

    figma deez

  • @DevV1ktor
    @DevV1ktor 8 หลายเดือนก่อน +2

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

    • @RyanEXElol
      @RyanEXElol 8 หลายเดือนก่อน

      I will, but what is your discord username?

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน

      Thanks!!

    • @DevV1ktor
      @DevV1ktor 8 หลายเดือนก่อน

      @@MonzterDEV No problem! 🔥

    • @DevV1ktor
      @DevV1ktor 8 หลายเดือนก่อน

      @@RyanEXElol I meant it for the TH-cam comment 😭

  • @Neoxa7
    @Neoxa7 8 หลายเดือนก่อน

    Hey can you make an Prophunt game tutorial

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน

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

  • @hugosnipurr1841
    @hugosnipurr1841 8 หลายเดือนก่อน +1

    Ya

  • @BuraksMemesVlogsAndAnimeツ
    @BuraksMemesVlogsAndAnimeツ 8 หลายเดือนก่อน

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

  • @user-tonnum-51s
    @user-tonnum-51s 7 หลายเดือนก่อน

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

  • @Bing3107
    @Bing3107 8 หลายเดือนก่อน

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

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน

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

    • @Bing3107
      @Bing3107 8 หลายเดือนก่อน

      @@MonzterDEV Try your best if you can

  • @kaizoku4005
    @kaizoku4005 2 หลายเดือนก่อน

    Your plugin doesn't work. fix it?

  • @MrSythcemen
    @MrSythcemen 2 หลายเดือนก่อน

    how i get the plugin ?

  • @duhv2
    @duhv2 8 หลายเดือนก่อน

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

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน +1

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

    • @duhv2
      @duhv2 7 หลายเดือนก่อน

      @@MonzterDEV its okay, btw i love your vids

  • @S33KZ112
    @S33KZ112 หลายเดือนก่อน

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

  • @musembifamily1318
    @musembifamily1318 8 หลายเดือนก่อน

    6:32 how did he insert that image

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน

      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.

  • @VidVisions
    @VidVisions 3 หลายเดือนก่อน

    Are you good at building? I really want help

    • @MonzterDEV
      @MonzterDEV  3 หลายเดือนก่อน +1

      Not in the slightest 😭🤣

  • @LET655
    @LET655 5 หลายเดือนก่อน

    Sigma

  • @queueuof
    @queueuof 2 หลายเดือนก่อน

    erm what the figma

  • @djstankwank
    @djstankwank 11 วันที่ผ่านมา

    what the figma

  • @Luxex1
    @Luxex1 7 หลายเดือนก่อน

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

  • @Boomirangle
    @Boomirangle หลายเดือนก่อน

    using sigma 🤓👆

  • @ThatFATbannana
    @ThatFATbannana 3 หลายเดือนก่อน

    it says undefined.

  • @Maukie
    @Maukie 4 หลายเดือนก่อน +1

    At this point just learn Roblox studio its way easier.

    • @Vo3pal
      @Vo3pal 28 วันที่ผ่านมา

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

  • @BlueStarViews
    @BlueStarViews 2 หลายเดือนก่อน

    “Buhns”

  • @chxrry_blossomz
    @chxrry_blossomz 6 หลายเดือนก่อน

    figma ❌
    sigma ❌
    ligma ✅

  • @jexeryt
    @jexeryt 3 หลายเดือนก่อน

    Figma? More like Ligma

    • @shauryadeb-e8l
      @shauryadeb-e8l 3 หลายเดือนก่อน

      thats so skibidi

  • @BossGamingYT-Live
    @BossGamingYT-Live 8 หลายเดือนก่อน

    11:55 What happened???

    • @MonzterDEV
      @MonzterDEV  8 หลายเดือนก่อน +1

      No idea haha!

  • @ima_monkeh
    @ima_monkeh 7 หลายเดือนก่อน

    How do u make a scrolling guide in figma?

    • @MonzterDEV
      @MonzterDEV  7 หลายเดือนก่อน

      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.

    • @ima_monkeh
      @ima_monkeh 7 หลายเดือนก่อน +1

      Ok thank you for helping 🤗

  • @verachez5319
    @verachez5319 4 หลายเดือนก่อน

    is it free

  • @AlienTwelve
    @AlienTwelve 2 วันที่ผ่านมา

    the after ui is absolute trash, figma can do way more than that, and it can also easily be made in roblox studio

  • @boblox_studio_dev
    @boblox_studio_dev 7 หลายเดือนก่อน

    figma balls
    (the rot consumes)

  • @KittyGamingsArt
    @KittyGamingsArt 3 หลายเดือนก่อน

    L FIGMA LLLLLLLLLL

  • @LucasDoorsBlox
    @LucasDoorsBlox 7 หลายเดือนก่อน

    just one letter a way to spell sigma

  • @Cortex_ieu
    @Cortex_ieu 6 หลายเดือนก่อน +1

    you are bad with UI's.

    • @ThatMagicalGuy1
      @ThatMagicalGuy1 6 หลายเดือนก่อน

      😢

    • @xxneweraxx7422
      @xxneweraxx7422 3 หลายเดือนก่อน

      What a useful and informative comment lol