Tutorial: How to Import Figma Files Into Bubble

Figma is a really popular, really useful design tool, so it’s no wonder so many people use it to create visual designs for webpages and apps. If that includes you, we have excellent news: You can import your designs directly from Figma into Bubble to create beautiful pages in your Bubble app without writing a single line of code.


This is a companion discussion topic for the original entry at https://bubble.io/blog/figma-import-tutorial/

This is great news, except for one thing.

Not syncing on each subsequent import is a show stopper. The way its built right now, I would spend a bunch of effort in Workflows on the first import, and then each time I update the design in Figma (or if the design is being done by my UX person) all previous workflows would need to be re-added again?

Isn’t there a way to maintain workflows?

IF page already exists, then update the page but KEEP any existing workflows for objects that have the same name/ID and that haven’t changed

IF object on page has changed, then give the user the option to either keep the workflows and show errors instead, OR create a new page

Apps change over time, and Bubble should try to accommodate Figma changes gracefully if possible.

Thanks @vivienne

4 Likes

Hi, I’ve just faced this same situation. The conclusion that I came across is… it is worth not importing, just using Figma to draft but spending most of the time building with the bubble interface.

2 Likes