[New feature] Introducing the Figma to Bubble converter (formerly Deezign), now free for all users

Announcements
1

Hi everyone,

I’m Tatiana, Bubble’s VP of Marketing. Today, we’re excited to share that we’ve acquired Deezign and integrated it as Bubble’s Figma to Bubble Converter, now completely free for all Bubble users.

This tool was created by longtime community member @bek . We wanted to extend a big thank you to him for building this — and to the rest of our community for continuing to build amazing tools that make our ecosystem stronger. Like with our Flusk acquisition, we’re excited to bring community innovation into Bubble’s core product. In fact, after we announced the Flusk acquisition at BubbleCon last year, many of you came up to me afterwards and told me I had to talk to Bek!

What the Figma to Bubble Converter does

If you’re already designing in Figma, you can now install the plugin and Chrome extension, then copy and paste your designs directly into Bubble without rebuilding them. This works whether you built the designs yourself or worked with a designer.

How to get started

Here’s a demo to give you a look at the full process:

Setup Steps

One-time setup (do this once):

  1. Go to this page and copy your personal access token
  2. Download the Figma plugin and Chrome extension from the same page
  3. Open any Figma design file, launch the plugin, and paste your token in the Token tab

For each design you want to convert:

  1. In Figma, select the design element you want to convert, then go to the Convert tab of the Figma plugin, and click Convert to Bubble.
  2. Head over to your Bubble app editor and open the Chrome extension. Your converted design will appear automatically.
  3. Click Copy in the extension, then paste it into your Bubble app. That’s it!

The Chrome extension will store your converted designs so you can paste them into any Bubble app.

Best practices for good results

To get the most out of the converter:

  • Use Auto Layout designs when possible — the converter works best this way.
  • Use the Buttons/Inputs tab to mark components as buttons, inputs, dropdowns, or multiline inputs — this will help them convert properly.
  • Copy small pieces of UI rather than entire pages — this gives you better control and cleaner results.
  • Apply styles manually — the converter doesn’t automatically create styles in your Bubble app, so remember to set these up.
  • Remove unconvertible elements — if you see issues, delete any elements that didn’t convert properly.

What to expect

The converter works with both web and mobile designs. Most mobile elements convert successfully, though some native components (like bottom navigation) may not copy-paste perfectly in the Bubble editor. Also, not all conversions will be perfectly responsive, and some elements may need manual adjustment. The tool is not compatible with FigJam files.

For users with existing Deezign accounts, your conversion history is preserved.

Try it out and share your feedback — we’re excited to see how this speeds up your design-to-app workflow.

— Tatiana

Note: This tool is not affiliated with, endorsed by, or sponsored by Figma.

28 Likes
3

Sounds great, thanks for the update!

4

Cool, you guys should do the same thing with a bunch of the most useful/necessary plugins.

5 Likes
5

I was really excited reading this until I got to the disclaimer

Even with that little nuance, this is great. Curious why this wasn’t just done some 2 years ago by fixing the existing Figma to Bubble import feature, but still great to see Bubble offering ways to make design easier.

They are already free

6

Things that need to be official and high quality:

*Calendar
*Charts
*Drag and drop
*S3 Uploader
*Video/audio recorder/uploader
*Websockets
*Tooltips
*JSON parser

Right now these things are either free and low quality or paid and higher quality.

This is just off the top of my head

4 Likes
7

Sounds good

8

Atta boy, @bek !

2 Likes
9

Dropdown

10

Trust me @boston85719 this is one of the best conversion tools, it just has some minor hickups with fixed width, you just have to uncheck it and make it work on mobile.

Other than this, it does take out the designs exactly ‘as is’

2 Likes
11

Even if they are free, they don’t have the “power” of a Bubble native plugin.

2 Likes
12

I’m excited to try it out. I’ve been wanting something that speeds up design. The AI stuff is okay, but I think getting a pro designer to create the Figma and import it in is my preference. Thanks for the insight on the fixed width, as that sounds a lot more manageable

Is the power due to being part of main architecture and are faster, or is it power due to being pre installed?

13

They can expose things we can’t and also have 100% knowledge about how to access everything, which most users do not. There are some things that plugin developers hold very close to their chest because they aren’t obvious.

1 Like
14

I think that @randomanon answered most of your reply.
Faster? maybe a little bit, but not sure about that.
Another example of what Bubble plugin can do and we cannot: Custom fields and condionnal fields and states according to plugins settings and options.

1 Like
15

can i no longer bulk import figma designs at once like before?

16

I saw that on a plugin recently. Forget which one and I then tried to see how to do it in plugin and editor and didn’t see anything for it. Was thinking of something just last night that would benefit from it. Would be nice if that was available in plugin editor.

17

former one(Deezign) was not free. It just had limited converting times and needed to pay for more converting.

This feature is good. And bubble should advertise this more including displaying this feature on the landing page.

I am certain that bubble would fix every bug and limitations of this plugin. And this plugin would be better! .

  • for example, when paste the element from plugin, I hope default width would be infinite. because when I paste the fixed width matters everytime.
18

this is huge!!! well done

19

@tatiana.a