[v1.1.2] Figma Importer Assistant, a faster way to create your UI

[iGottic]

Figma Importer Assistant

It’s a shame that Roblox Studio doesn’t natively support Figma imports, but with the help of this plugin, you can make the import process easier!

The plugin is designed with an intuitive and easy-to-use interface that speeds up your UI/UX workflow, and retains your original creation across all screen resolutions and devices.

Here is what it looks like:

I created this plugin out of necessity. As a UI developer myself, I got tired of always pulling out the calculator, punching in numbers, and wasting time when I could be doing something else instead.

How it works

Take a look at this YouTube video to learn how to use the plugin, and more importantly, know exactly what it does and does not do.

[Roblox Studio] Figma Importer Assistant tutorial

And it’s free!

What? Free? No way!

It doesn’t hurt, so go ahead and add the plugin to your library here:

Creator Hub - Store

If you want to take advantage of auto import, you will also also need to head to download this Figma plugin and install it locally: Roblox Figma Importer Assistant.zip (3.3 KB)

Here are install instructions: Figma-Import-Assistant/Docs/Temp/InstallInstructions.md at main · MiaGobble/Figma-Import-Assistant · GitHub

More info about auto export/import tags: Figma-Import-Assistant/Docs/Temp/Tags.md at main · MiaGobble/Figma-Import-Assistant · GitHub

Source code is open, contributions are welcome!

After some time, Figma Importer Assistant is finally available on GitHub! You’re free to learn from the code and make your own contributions. If you make a contribution that you believe should be added to the main release, let me know in the replies below.

Source code: GitHub - MiaGobble/Figma-Import-Assistant: Source code for Figma Importer Assistant for Roblox
Releases: Releases · MiaGobble/Figma-Import-Assistant · GitHub

There is also a beta branch where you can access less stable versions of new features before everybody else! It’s over here: GitHub - MiaGobble/Figma-Import-Assistant: Source code for Figma Importer Assistant for Roblox

Better than the others?

Let’s face it, automating everything leads to a lack of customization and gives you a result you weren’t hoping for.

With other tools, you still have to put in the extra work to make it work with different devices via contextual scaling and aspect ratio constraints. With this plugin, you can customize how you import your content without the headache of scaling, aspect ratios, positioning, reclassing, and most importantly, how modular the UI is.

With auto-layout, you can customize a blockout to automatically be generated in just moments. All that’s needed is for you to export the images!

Auto importer is here!

Yup, finally! Here is a video showcasing this early access feature:

[Figma Importer Assistant] Auto Import Example

Latest update

@iGottic

Update v1.1.2+dd27d49 [Reupload Patch]

Looks like I uploaded the wrong binary to Git and Roblox! Auto importing didn’t work for anybody, and that is now fixed

Support this plugin

Want to know how you can support this project? Here are some simple ways:

• Add the plugin to your library! Doing so helps the project reach out further, even if you never download it.
• Support me on my Patreon page for just $1 a month.
• Leave feedback in DMs or in the replies below so that it can improve.

Thanks folks! Questions, comments, criticism, and praise can go in DMs or in the replies below ^v^

[KazabiteBoltiz]

A true blessing, There’s a lot of figma to roblox plugins that try their best to recreate the ui using frames. This one allows devs to import their ui separately as images. My UI workflow has just been upgraded.

[Rickety_Code]

I think my co worker who is a ui designer uses figma

[so1ehee (Sol)]

Such as fantastic plugin! as user of Figma I really happy more people making tools to speed up the process on creating high quality UI

Could you tell me what sets your plugin apart from the one I’ve been using before?

Figma to roblox

[iGottic]

Other automatic importers try to automatically import everything automatically, which can lead to issues. Sometimes it’s done with frames, sometimes with images, but it never imports the way you need it. This plugin allows you to input parameters and build it in studio the way it was meant to be.

With other tools, you still have to put in the extra work to make it work with different devices via contextual scaling and aspect ratio constraints. It also does not make the assumption that you import under a 1920x1080 resolution, which again, is handy for scaling.

Finally, it does not give freedom for how you want to export the image (e.g. with a different resolution than designed), nor does it make it easy to create scrolling content or user inputs.

[iGottic]

Quick patch update!

• Backend code improvements
• Fixed an error caused by non-selection
• Fixed sizing issues with plugin UI
• Fixed scrolling issues with plugin UI
• Added option to create a text box
• Changed some default properties of various instances

Thanks to @Pseudoisochromatic for finding a couple of these issues!

[Rawblocky]

The plugin is very awesome, but, I’m still going in the route of automatically converting UI

I made a Figma to Roblox plugin that uses another Figma plugin to generate a JSON of the UI currently selected and using that slap it on Roblox; I didn’t really market it because I’m not really proud of how it’s made and presented, as well as the fact that there’s a few bugs, and I don’t really make plugins, especially Figma plugins, but, I really really love the automatic nature of it.

@iGottic

Other automatic importers try to automatically import everything automatically, which can lead to issues.

That’s honestly the thing I like about it, because I don’t have to manually import everything one by one and take several minutes, especially when the UI becomes very complicated; I feel like this plugin is more for image-based UI rather than simple frames.

@iGottic

With other tools, you still have to put in the extra work to make it work with different devices via contextual scaling and aspect ratio constraints. It also does not make the assumption that you import under a 1920x1080 resolution, which again, is handy for scaling.

Regardless, you’re always going to do manual work. If I were to use your plugin to make this UI:

I’d have to not only punch in the calculations of every single UI element, but also the color, the text sizes, the font, the images, etc., but, when I use an automatic converter, it just gives its best guess on what to do. I can just tinker things that I feel wrong or out of place, like the font or scaling, by just changing its properties or using a plugin like AutoScale. However, with your solution, you not only have to input the sizes and positions, but also the font, the text colors, etc… The only thing that saves time using this plugin is the fact that it automatically converts it to Scale and fits correctly with AspectRatio

Also, complicated UI like this is going to be severely time consuming to import (images uses a plugin I made):

But, automatically converting it just saves the initial time of manually punching in the sizes, positions, colors, etc.; Of course, it can still make errors, like incorrect classes, but, there is less manual work to be done, if you know what you’re doing.

This is a great plugin, but I feel like its geared towards people who don’t really want to learn Roblox UI or how to use an automatic conversion method. I feel like it’s great how it automatically converts the UI into Scale, fixes AspectRatio, etc., but, for the more advanced developers who has plugins to rescale UI and knowledge on how Roblox UI elements work might prefer a more automatic method.

I would love if you create a plugin that goes towards an automatic approach rather than a manual approach, as I’m more of a fan of an automatic approach.

[iGottic]

@Rawblocky

I would love if you create a plugin that goes towards an automatic approach rather than a manual approach, as I’m more of a fan of an automatic approach.

I’ll definitely consider an option for this! Can you forward your plugin so I can take a look at what it does?

[iGottic]

Here comes a second patch!

• Improved the backend code to prepare for future updates
• The plugin will retain open/close widget state between Studio sessions
• Separated instance creation buttons and figma properties into two different sections

Thanks to @Rawblocky for sharing his plugin in DMs, as well as giving some pointers for future updates.

[iGottic]

QOL, Commands, and Centering!

Today’s update introduces a ton of awesome changes to help improve your workflow.

• Added “Alignment” section, containing two input boxes to set the anchor point of a GUI object
• Added a search widget that can be opened via a keybind set in the shortcuts menu in Roblox Studio. Search widget runs commands, more info below
• Fixed a bug where undoing or redoing actions during the import process would mess up things
• Adjusted visibility behavior of input boxes to only show when usable
• Fixed bugs related to editing ScreenGUI instances
• You can now override the default 1920x1080 resolution reference for importing by setting the dimensions in the ScreenGUI itself
• Other small QOL changes and bug fixes

As mentioned in the second bullet point, I’ve added commands! To run commands, you need to set a keybind to open the command input widget. Start by going here in Studio:

Then search “figma” and set a bind for “FigmaImportAssistantSearch”. For example, I set mine to Ctrl+O:

Upon using that keybind, you should get a popup command input widget! To run a command, type in the input box and press enter.

Currently, there are only commands for instance creation, since I want to start by just testing the concept of commands. To create an instance via command, type c and the class name of the instance supported. For example, frames can be created with cframe, text labels with ctextlabel, and etc.

You can also truncate commands that have a unique sequence of characters in the name! For example, the command cframe is the only one that starts with cf, so simply typing cf suffices! However, some can’t be as a short. For example, the shortest command for image labels is cimagel.

These updates are here to improve QOL and prepare for future changes. Let me know what you think. Thanks!

[iGottic]

Update v1.1.2+dd27d49

• Created Auto Import feature
• Created Figma plugin
• Bug fixes
• QOL improvements
• Made this resource open-source

Auto importing is finally here! Get a blockout ready at any time and only worry about importing the images and making small fixes!

Auto importing is in a baby stage and will receive many improvements over time to make it much more intuitive.

[Figma Importer Assistant] Auto Import Example

[Turkish0_0 (キ・へ・キ一一明るい月明かりを追いかけて)]

look interesting i would like to try it

[iGottic]

Update v1.1.2+dd27d49 [Reupload Patch]

Looks like I uploaded the wrong binary to Git and Roblox! Auto importing didn’t work for anybody, and that is now fixed