Bubble and Figma have teamed up to launch an exciting new integration to import Figma files into your Bubble app! Figma is a fully cloud-based collaborative design tool that we love to use for its powerful functionality packed into a beautiful interface. We’ve heard from our users that they are often collaborating on designs in Figma before starting on their Bubble project. We wanted to make it more seamless to bring your Figma designs into Bubble, so that you can go from prototype to production, all without writing any code.
You guys should really post this under Announcements. There are folks here who are interested/care about this integration (I know it got it’s own little “package” announcement in-app), but nobody’s seen this because it’s hidden in the blog category.
Anyway, super-interesting news, everyone! The Bubble/Figma integration is out of beta.
(Aside: Is that interesting? I mean, Bubble has a WYSIWYG page designer but I guess you can use another WYSIWYG page designer to design your pages now. )
Thanks Keith! These forums posts auto-generate from the blog comments section with their own ‘blog post’ tag (but I’ve since adjusted this to go under Announcements).
I was thinking the same thing. Wondering if anyone can share why they use Sigma before bubble. My guess is for team collaboration on design. Has anyone found any other benefit, besides team collab?
I can always use help with design. Maybe this is the right tool. Thanks bubble
How will the Bubble responsive engine handle Figma created elements? Are there Figma settings that help Bubble better understand the intended responsive design? It seems that the Bubble responsive engine is designed to start with desktop and handle things as they shrink, rather than mobile-first and expand. Does the import take any of that into account… e.g. if using Figma, is it best to design mobile and desktop separately? Or Just import desktop and then use Bubble’s responsive design tools to adapt to mobile (or only import mobile and expand to desktop)?
Yeah, I’m guessing the main benefit here would be in team scenarios where you’ve got UI design folks who know Figma, but don’t know Bubble.
Otherwise, why bother, right?
(I do hope that such teams might someday exist, but I doubt they really do today. My fear about Bubble is that Bubble actually HAS found product/market fit and the market for Bubble is… me.)
Good questions, @jaredg. I’ve only had a slight brush with Figma as a volunteer on a group project, so to even say I have experience with it would be a stretch. I can certainly see its value, though - especially if you’re working with a graphic designer.
Has anyone actually used this feature for a real project yet? Any thoughts to share? @oleksiy, did you get an opportunity to try it out?
Surely, we can’t let @keith have the last word on this.
None from me. I haven’t used it beyond the first test import I did. My projects iterate so much that a one time import from Figma, while nice, isn’t a big help. Right now I’m keeping it in my back pocket in case I have a client that has a designer and strong idea to start off with.
Hey there, I was wondering if some updates had been made since bubble released its new responsive engine. From what I understood frames within Figma look a lot like flexbox so I’m assuming turning a frame into a flexbox might be easier than the previous import. @vivienne do you have information on this ?
I’ve used Figma and it’s way easier to create layouts there.
The UI is focused to only UI design, so it’s fairly quick to mock up a page.
That focus allows for a lot more UI design capability.
For example, I can create a button and have many variants of it. Need a button with a left icon? Drop the button and select the radio option for left icon. Choose my icon. Dark theme? Another radio button.
The most important thing is that I can create a single design library for all of my work in Figma. It doesn’t seem that I can do that with Bubble.
@vivienne I’m grateful that this partnership exists. However, it’s not very useful without the ability to push new revisions from Figma to Bubble, especially as I iterate with an interaction designer. So I’ve stayed away from using it for that reason.
Also going to note here: icons do not import. That’s a show-stopper for me; I have a whole library of custom icons that I utilize for all of my designs.
)
