Bubble Figma Integration - Import your Figma designs and turn them into an app in one click

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

Please note that the price is only for the theme files. We also offer your a cheaper and simplified design where we update your current app design by adjusting colors, texts and icons according to this template without replicating it one-to-one.

To find out the cost of integrating this theme for your site, please contact us.

Visit the official guide to get more details on system themes and customization options