Importing from Figma

This feature will import your Figma design into your Bubble app. Due to the differences in the two platforms, the import will not be at 100% fidelity, but can give you a head start on the app design process.

How to import a Figma file

• Go to Settings > General and scroll down to the Design Import section

• You can find your Figma API key by going to your Figma account settings

  • On your Figma dashboard page, click your name in the upper left, and then Create a new personal access token if you don’t have one already - this is your API key

• You can find the Figma File ID by looking at the URL when you have the file open in Figma

  • The URL should have the format figma.com/file/{random letters and characters}, or figma.com/file/{random letters and characters}/[slightly more readable name]; the file ID is the {random letters and characters}

• Clicking “Import” will begin the import, which can take a few minutes for large Figma files

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

Tip: During the import, Bubble will treat every image as a separate image, even if two images are technically copies of one another. Also, in the event the Figma file has a large image (e.g. an SVG containing large embedded PNGs), Bubble will still faithfully try to import those (very large) images!

Known limitations

• This is a one-way, one-time import and we do not maintain a link between a Bubble page and the Figma frame; if you trigger the import again, it will simply create a new Bubble page for each top-level Figma frame again

• If you experience a “Network error” upon trying to import:

  • First, check your ad-blocking / anti-tracking software, as that can sometimes block our call to Figma’s API

  • Please try again a little bit later; if you consistently experience this, please file it as a bug

• Because Figma allows tighter constraints around text boxes, Bubble will add to the height and width of text elements to get it closer to the Figma design

• Any styling that’s possible in Figma but not currently possible in Bubble will not be imported - though workarounds usually exist for implementing complex styling; these include:

  • No bottom vertical alignment for text

  • Can only have one shadow per element

  • Can do a max of 3 colors for gradients

  • Does not support multiple fills at the same time — Bubble only takes the first fill in an object

  • 0px rounded borders are overridden

• There are some other styling properties that we do not carry over yet, but which might come in a future release; examples include:

  • Having different border styling on different sides of an element

  • Elements that go off the frame towards the top or left

Note also that if you try importing a significantly large and complex Figma file, the import may timeout (this also depends on your computer's resources). If you're bumping into this limitation, try breaking up your Figma file into smaller files and importing those individually instead.

Tips for setting up your Figma file

• Since this feature imports every frame in your Figma file, if you have a very large Figma file with many variants of a given page, you may want to copy a subset of frames to a new file to use in your import

• Remember that every top-level frame gets imported as a new page, and that the import is a one-time import. You may want to consider designing a Bubble page in chunks in Figma, and doing periodic imports to bring in new chunks into Bubble

• Great way to make mobile pages and add them directly to your application.

• Experiment with importing components from your Figma file all bundled into a frame so that you can easily copy / paste them while building your Bubble application

• You can outline elements as strokes with no issue; these will transfer over normally.

• If you want to import masked elements, create a group (not a frame) with the masked elements only. We look at a group to see if any of the elements in the group are masked - if a masked element is found, the whole group is imported as an image.

• If you’re experiencing trouble importing an image: Make sure you’re using the image object and not an image fill on a frame. Currently, we only support image objects (i.e. when you click “place an image” on Figma) and you can mask it with other objects as needed.

• If you’re experiencing problems with importing background fills: when frames are imported as pages, we don’t currently support fills for those pages. If the fill isn’t showing up for objects, inner frames, etc. please check and make sure there aren’t multiple fills. Bubble only supports a single fill for any element so we only choose one.

Troubleshooting

• If you're encountering a "Network Error" or if Bubble does not consider your API Key and File ID to be valid, first try regenerating a new API Key in your Figma account...

• ...if that also does not work, try turning off any ad / tracking blockers you may have active.