Forum Academy Marketplace Showcase Pricing Features

[Beta announcement] Import from Figma

Hello all,

We’re excited to announce that a new feature is available in Beta: importing from Figma! We know that a lot of you probably work on your designs in Figma, so we’re excited to offer this tool to make it easier to bring your work into Bubble.

We’ll state upfront that this feature is not aiming to be a 100% fidelity import, but rather it’s meant to give you a big head start on your Bubble app based on a Figma file. This means that you’ll very likely find that some things don’t carry over very well. We will try to fill in some of these gaps as part of the Beta testing process, but other gaps may not get prioritized because, at the end of the day, Figma and Bubble are two different platforms with different capabilities.

Even in spite of that though, we think the import does a decent job :slight_smile:. Here is the documentation for this feature, including known limitations and tips on setting up your Figma file. A few things to call out:

  • The import will bring in every top-level frame of your Figma file as a new page in your Bubble app (but invisible items will not be imported)
  • This is a one-time, one-way import, i.e. we do not keep a link between a Bubble page and the original Figma frame. If you run the import again, it will again bring in every frame as a new page
  • Names of elements will carry through from Figma to Bubble
  • We do our best to bring in as much styling as we can (this is one area where you may find limitations)
  • Images will still source from Figma’s servers, i.e. for now, we don’t upload the image to your Bubble app
  • Bubble will not make any assumptions about what’s a repeating group in your Figma design

More to note - please check out the documentation!

For the period of the Beta, please feel free to post any feedback on this thread. A big thank you to all of our Alpha testers!!

Cheers,
Allen on behalf of the Bubble team

38 Likes

Awesome! Thank you very much :slight_smile:

1 Like

Testing it. Working great.

Went to https://www.figmafreebies.com/ to get a few templates.

Copying from Figma…

…into Bubble:

For every frame in Figma…

…Bubble created a new page. Awesome.
image

Congratulations, @allenyang and Bubble team :slight_smile:

15 Likes

That’s a good one! :sunglasses:

you guys…this is a HUGE step in the right direction. I imagine this will be even more fluid once you have a new editor alongside it!

3 Likes

That was a quick turnaround in the end! And a very decent integration already. Surely, it will only get better!

Amazing work! Can’t wait to test it out!

Thanks
ZubairLK
Co-founder @ millionlabs.co.uk

Going to just keep throwing feedback in here as we use this (we’ll use it a lot if it keeps making progress):

First thing I noticed was text elements seem not to translate the height correctly.

Example in Figma was 65px wide x 15px high with an auto-line spacing, and ended up being 139px wide x 35px high.

image

1 Like

I was thinking a week ago to contact Bubble and propose a collaboration like this, but you guys keep your closed source very …closed :slight_smile: so I didn’t know how to make the proposal. Great! I’m glad that you did it!

Sounds great @allenyang ,

I don’t see where to add this. The documentation says “Go to Settings > General and scroll down to the “Design Import” section”.

I don’t see it there - or anywhere else.

Am I missing something? Has anyone else experienced this?

Thanks!

Yep - so mine is missing.

@allenyang This happened two times. Initially, the designs (1440px) are loaded onto the imported pages. When I refresh the page, the imported pages are blank and back to 900px in width.

Try doing a hard refresh of page. Worked for me.

What are the tangible benefits of using a Figma?

I’ve been playing with Figma, sketching out some designs but in the same time I could have sketched out the same design in Bubble that works with the responsive editors much better.

Genuinely wondering why one would use Figma as opposed to Bubble as a starting point. For reference, I work as part of a Bubble team as well as on my own for individual projects. If Figma can save me time, I’m up for it. Don’t see an obvious benefit at the moment.

3 Likes

Thanks for the tip.

Didn’t work.

@allenyang This was working yesterday, now getting a ‘Network Error’. API Key also deletes on page refresh.

Amazing, this will be an incredible addition to Bubble!

That’s a curious question. For me, Figma is just all around easier to work with and faster for designing UIs than Bubble is. It has tons of tools and shortcuts for positioning everything just so. Plus it can be used to do advanced vector graphic manipulation. But hey, if Bubble works just fine for you then keep doing that!

2 Likes

Do you have a specific design or Figma background that makes it more intuitive for you?

Curious about this as well as it’s probably not worth me learning it at this stage, but maybe if I were to hire a designer or freelancer it’s easier to hire them as a ‘figma to bubble’ designer