Importing Figma Designs Into Bubble

Figma is an online graphics editor that makes it easy to collaborate with designers. Bubble recently added support for importing Figma designs. This blog post shows a real world example for importing a design via Figma.

Prepare the Design File

Each frame in Figma page will be imported as a new page within Bubble and will have that frames name as the page name. Also, if you have designed inputs these will come over as generic elements in Bubble.

Obtain Information from Figma

Obtain the Figma File ID by opening up the design and taking the portion after https://www.figma.com/file/ and before the following trailing slash. So for the file ID would be “Ujdslijjklsdjkj” without the quotes.

https://www.figma.com/file/Ujdslijjklsdjkj/Mobile-app?node-id=0%3A1

In Figma go to the Settings page and go to the “Personal access tokens” section. Click “Create a new personal access token”:

Perform the Import Into Bubble

In Bubble go to Settings and then “Design Import”. Provide the API Key obtained from the Personal access token above and the Figma File ID that was obtained from the URL of the design you want to import. Enter these two values and click Import.

Conclusion and Caveats

Importing designs from Figma into Bubble is a new feature of Bubble and may not always save time depending on the design. When creating generic elements in Bubble to input fields the time savings can come from being able to use the Copy Format functionality and pasting the format into a new input field.

Leave a Reply

Your email address will not be published. Required fields are marked *