Figma to Bubble converter with auto layout

Happy New Year fellow bubblers!

I just launched deezign.io, it lets you instantly convert your figma designs to bubble. Works best with Figma designs that use auto layout, but it will convert fixed layout as well (as fixed containers in bubble).

Here is the basic workflow:

  1. Select your figma design using the deezign plugin. If your design has inputs, dropdowns or buttons, you just have to add an emoji to the name so Deezign knows to convert them to the right element.

  2. Copy your converted design using the deezign chrome extension.

  3. Paste into your editor.

Would love your feedback, thanks!

Bek

8 Likes

What! Dude, well done. Going to try this out tonight.

1 Like

This is so sick! I’ve been pondering for a while how to go about this better.

Signing up now.

Some feedback:

  • I logged in with Firefox and realised I needed a chrome plugin, so I moved over to chrome and thoughtlessness copied over this link “Deezign | Onboard” and it let me be there (not redirect) and generate a code even though I wasn’t logged in on my chrome browser yet. Im sure this isn’t intended so thought I send let you know.
1 Like

Thank you! Would love your feedback!

Oh man good catch!! Patched it real quick, deff forgot to put a “user is logged out” on that page. Appreciate it man!

1 Like

No worries!

Been playing a little and works really good, very sure my client and I will be buying this once he gets back from holidays. We do so much figma work with UntitledUI and the conversion has been fine but time consuming.

1 Like

Thanks man, glad you like it! Yeah UntitledUI is a gem, great launching pad (used it to build the UI for deezign). Hope this adds value to your build process. Please send me any feedback you have or if you run into issue :pray:

Pushed an update that notifies you if the Figma design is using auto layout or not as well as added the emoji legend to the plugin for easy reference.

I’ve just published a step-by-step guide on using the Deezign - Figma to Bubble ‘plugin’. :rocket:

This is a no joke chrome extension that will change how you create design in Bubble !:fire:

Thanks @bek for developing this :fist:

3 Likes

Thanks Gio! Appreciate you doing this!

1 Like

Added a few new features:

  • Curated list of free Figma UI Kits
  • Conversion score in the plugin indicating how well the selected design will convert to bubble
  • Ability to mark figma nodes as buttons, inputs, dropdowns, etc right from the plugin (no more emoji rename)
  • Plugin now supports Figma design mode (was previously just dev mode but Figma made that a paid feature to users :-1:)

1 Like