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

Resources Community Resources
, , , ,
#1

FigmaImportAssistantIcon
FigmaImportAssistantIcon512×512 11.9 KB

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.

How it works

There are two ways to import UI from Figma into Studio using this plugin:

  • Manually
  • Automatically

For automatic importing, there is also a supplementary Figma plugin.

In Studio, the plugin looks like this:

plugin-appearance-example
plugin-appearance-example361×788 15.3 KB

You can learn more at the documentation site.

And it’s free!

What? Free? No way!

You can learn how to install it here.

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

Learn more

You can get started here:

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^

96 Likes
Export ui from Figma to roblox help
Importing UI From Figma SUCKS
Featured Plugins in the Creator Store
#2

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.

6 Likes
#3

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

2 Likes
#4

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

2 Likes
#5

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.

1 Like
#6

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!

2 Likes
#7

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:

image
image1920×1070 56 KB

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):

image
image1920×1236 87.3 KB

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.

8 Likes
#8

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

#9

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

2 Likes
#10

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:

image
image708×543 46.6 KB

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

image
image875×625 29.5 KB

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!

1 Like
#11

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.

3 Likes
#12

look interesting i would like to try it :smiley:

1 Like
#13

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 :slight_smile:

#14

splendid, might save me a lot of time

1 Like
#15

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!

1 Like
#16

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

RobloxStudioBeta_gW4fV5VBiq
RobloxStudioBeta_gW4fV5VBiq532×644 18.7 KB

1 Like
#17

Hello,

I just wanted to give this project a quick bump as I’ve found it very useful and I think other developers will too. The other Figma auto import plugins can be a bit buggy and don’t work (as you’ve pointed out earlier in the thread) and this is the most consistent one. The semi-manual approach to importing the images makes it the most reliable so far. The other plugins don’t reliably upload the assets making them a pain or outright impossible to use at times.

While I haven’t run into any issues, I think some improved documentation could go a long way for new users as the current documentation made for somewhat of a learning curve. I also hope to see more tags implemented in the future for the auto import.

Thank you for your work on this plugin and I hope it continues!

All the best,

A9X

1 Like
#18

Thanks for the feedback, both positive and constructive! I would love to add more tags and improve documentation, so keep an eye peeled :slight_smile:

1 Like
#19

i didn’t see that this exsited untill now, i cant wait to use it

2 Likes
#20

Documentation Update

Finally, some proper documentation! You can learn more about installation, importing, tags, cleanup, etc on the new website, which can be found here: Figma Importer Assistant

Included with this change is also an official publish for the Figma plugin, meaning you no longer need to use a manifest file. It’s linked on the website! (Note: As of writing this, the Figma plugin is still unlisted since it’s under review. If the link isn’t working yet, give it a bit before it does!)

Documentation was much needed, and still is getting improvements over time. It has issues, so if you spot any, please DM me!