Importing from Figma
Bubble's free Figma converter lets you convert your Figma designs into responsive, pixel-accurate Bubble elements in just a few clicks:
Quick start
Select your Figma design Use the plugin to choose the design you want to convert. Bubble supports Figma files with up to 1,000 elements. For best results, use .
Copy from the Chrome extension After submitting your design through the plugin, use the Bubble to Figma Chrome Extension to copy it.
Paste into your Bubble editor Drop your design straight into your Bubble app — no need to rebuild from scratch. Note that Figma doesn't have element definitions for buttons, inputs, multiline inputs, and dropdowns. These can be converted using the Buttons/input tab.
Installing the Chrome extension and Figma plugin
Chrome extension
Once you install the extension, you’ll be able to launch it directly inside any of your Bubble editors. It only works in the editor, so we recommend pinning it to your browser for easy access.
Figma plugin
After downloading the Figma plugin, you can access it via Figma’s Dev Mode under the “Plugins” tab. You’ll be prompted to enter a token — you’ll receive this in the next step below.
Using the extension and plugin
After installing both the Chrome extension and the Figma plugin, go to http://bubble.io/figma-to-bubble to get your access token.
Paste your token into the Figma plugin, and you’re ready to go. Open the plugin in Dev Mode, click on a Figma element you want to convert, and hit Convert. Then, head to your Bubble editor, open the Chrome extension, select the converted element, and paste it into your app.
The converter works best with Figma elements that use . Introduced in 2020, Auto Layout has become the standard for designing responsive interfaces in Figma.
Fixed layout designs will still convert, but the plugin will translate them based on the available Figma properties.
Last updated
Was this helpful?