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

iGottic · May 8, 2024, 5:18pm

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.

And it’s free!

What? Free? No way!

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

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

opera_smDvqx3bxN

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!

RobloxStudioBeta_L8SyrZjF1d

Auto importer is here!

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

Latest update

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 · May 8, 2024, 6:00pm

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 · May 9, 2024, 8:19am

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

so1ehee · May 9, 2024, 8:50am

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 · May 9, 2024, 10:54am

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 · May 9, 2024, 12:00pm

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 · May 11, 2024, 5:55pm

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.

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.

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 · May 12, 2024, 1:30pm

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

iGottic · May 13, 2024, 3:30pm

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.

RobloxStudioBeta_bYfoEYw6o4

iGottic · May 23, 2024, 11:51am

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 · June 18, 2024, 1:23pm

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.

Turkish0_0 · June 24, 2024, 6:02am

look interesting i would like to try it

iGottic · June 30, 2024, 1:18pm

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

sponguswastaken · September 29, 2024, 11:51am

splendid, might save me a lot of time

iGottic · October 13, 2024, 3:13pm

Update v.1.1.3+e58cc5a

Fixed auto import feature breaking when using groups in Figma
Fixed opacity-related bugs
Other small fixes and backend changes

Happy importing!

iGottic · October 19, 2024, 2:15pm

Update v1.2.0+03760cf

Removed “oblique” input option
Added shadow value inputs
Added support for auto-importing with shadows in mind
Added “settings” section
Added settings for auto-importing
- Added Respect Auto-Import Corner Radius setting, which automatically adds UICorner instances to import objects that have a cornerRadius greater than zero.
- Added Respect Auto-Import Frame Opacity setting, which applies colors and opacity values from Figma into auto-imported Frame instances
Added Figma object settings
- Added Keep Aspect Ratio setting, which toggles the presence of aspect ratio constraints
- Added Clips Descendants setting, which toggles the ClipsDescendants setting for UI instances
Backend changes to Figma app