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 . 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
I was thinking a week ago to contact Bubble and propose a collaboration like this, but you guys keep your closed source very …closed so I didn’t know how to make the proposal. Great! I’m glad that you did it!
@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.
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.
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!
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
. Here is the documentation for this feature, including known limitations and tips on setting up your Figma file. A few things to call out:
