The integration lets you specify the Figma file you want to import, and Bubble will bring every visible frame in that file into the current app as its own page.
Because the two platforms do have some inherently different capabilities, we can’t guarantee the import is 100% accurate but it will be close to 100% fidelity, and will enable you get your app`s design great very quickly.
Try the Bubble + Figma integration today to streamline your app design process!
So what do you do?
By teaming up, Bubble and Figma are proud to help users make their dream web app a reality. We both love the spirit of collaboration, so we’re making it even easier to build your own idea without needing to code. Give Bubble, Figma, and this latest integration a try today
How the import works?
Every top-level frame in every page of your Figma file will be imported as a new page in your Bubble app
Invisible items in Figma (made invisible in the layers sidebar) will not be imported
Bubble tries to import as much from Figma as possible, mapping Figma elements to the closest kind of Bubble element
Bubble will create groups out of elements that are grouped in Figma
Names of elements in Figma will carry over to Bubble as well (note that there is a character limit on imported names and Bubble will avoid duplicate names)
Bubble tries to create Styles to match styling from Figma, but in more complex situations (e.g. multiple styles in one piece of text), Bubble may make assumptions about the style to apply or use rich text markup (bbcode) for text
Any kind of vector in Figma will be imported as an image in the app
Any group in Figma that contains only vectors is imported as a whole image (having sub-groups, even if they only have vectors themselves, will not trigger this rule)
Images will source the image uploaded to Figma’s servers, i.e. images will not be automatically uploaded to your Bubble app
Bubble will not make any assumptions about what’s a repeating group
If a shape or frame has invisible fill, it carries as transparent fills
|Professional support||e-mail / chat / helpdesk / phone|
|Access to source code||Open code|