[NEW] Figma to Bubble import (Responsive Engine)

Showcase
1

Hello Bubblers!

I’m thrilled to introduce Framify’s latest innovation, the “Figma to Bubble” plugin, a game-changer for web designers and developers using Bubble.io. Inspired by our previous work with Bulk Option Set imports, this new plugin is designed to significantly streamline your design-to-development workflow.

What Does ‘Figma to Bubble’ Plugin Offer?

  1. Seamless Integration: Convert Figma designs into Bubble components with ease, including regular components and reusables.
  2. Color Management: Directly change Figma colors to Bubble variables, or maintain original colors as per your design needs.
  3. Organizational Features: Save components to specific folders created in Framify, and assign them to categories for easy management.
  4. Flexibility in Design: Set a maximum width for larger components like Hero sections or entire pages.
  5. Intuitive Naming System: Use specific tags like :IMAGE:, :POPUP:, :INPUT:, :DROPDOWN:, :RG:, etc., to ensure accurate component conversion.
  6. Direct Paste to Bubble’s Clipboard: Save components and paste them directly in Bubble’s editing mode via our Chrome Extension. Access previous conversions quickly and efficiently.
  7. Optimized for Auto-Layout: For best results, it’s recommended to use designs built with Figma’s auto-layout.
  8. Handling Images: Please note that images are swapped with placeholders during conversion. You’ll need to export them separately later using Figma.

Beta Release and Your Feedback

As we gradually roll out this feature, we’re eager to gather your feedback to enhance the plugin further. Our goal is to refine its capabilities based on real-user experiences, making it an indispensable tool for the Bubble community.

Use Cases and Examples:

The plugin excels in various scenarios, whether you’re designing a sleek landing page, crafting intricate UI elements, or assembling complex layouts. Its ability to interpret and convert designs into Bubble’s format reduces manual coding and speeds up the development process.

Troubleshooting Common Issues:

If you encounter any hiccups, such as misalignment or incorrect component types, double-check your Figma elements for correct naming conventions. Also, ensure that your designs leverage auto-layout for optimal conversion results.

We’re excited to see how the “Figma to Bubble” plugin enhances your workflow and helps bring your creative visions to life with greater efficiency. We invite you to try it and share your experiences and suggestions on this forum.

Happy designing and developing!

Get the Plugin Here: https://www.figma.com/community/plugin/1320154135021933807/framify-figma-to-bubble-io-import

Get our Chrome Extentsion here: https://chromewebstore.google.com/u/1/detail/framify/ljmbgfobenkepclmbiahmaclpmhkaile

Read more: Convert Figma to Bubble in 1 click | Framify.io

Looking forward to your feedback and success stories!

P.S. Don’t forget, with Framify you can also save your Option Sets, Styles, Databases for later use in other projects! Check out our other tools and extensions for Bubble.io.

5 Likes
2

Cool plugin. How is it different from the built in Bubble Figma Import? Also, when converting from Figma does the plugin have the same issue that the Bubble Figma import function have, which is often what should be a group in Bubble is upon figma import a shape?

3

Also interested in how this differs from Bubble’s import function :smiley:

4

Bubble’s import function copies the entire node and doesn’t function that well. Hopefully this one works!

5

The bubble import feature is not great at all and it only works for the whole file page so it imports everything. And the worst part is that you can’t bulk delete so I spent 5 min deleting page by page of those I didn’t need. And the ones that I needed did not contain the right elements. For example, a button was not correctly migrated so there are extra steps needed to execute a workflow.

1 Like
6

@jarie pretty much sums it up for you @cmarchan & @boston85719. Bubble’s import requires you to set up API keys, you need to import whole pages, which arent responsive and are built with shapes and it takes a lot of time, usually you’d then build the site from scratch on Bubble.

With this Figma plugin, you can import just what you need, while getting the right element you were looking for. Whether it would be just a button or a whole page. Just open up a Figma project, look for the right section, component - hit Save and in Bubble hit Paste and you are done.

3 Likes
7

Tried it, unbelievably easy to use

1 Like
8

i couldn’t paste it on bubble , bubble is not giving any options

image
image1842×1002 74.4 KB

9

Hey, as I can see from your screenshot you do not have Framify extension installed which is required as all your Figma designs/exports will be saved there and will give you the “Paste” option. Get the extension from: https://framify.io.

Read more about the import here: https://framify.io/blog/best-figma-to-bubble-import-plugin

10

hey if i am trying to paste it showing this again n again and i have installed extension too

image
image1842×1002 53.7 KB

11

Your current paste action tells me that you probably copied your own Index page and you have not copied an element from Framify.

Full process:
When you select a component ( make sure it is made using Auto-Layout in Figma ) you should see a picture of it there, also “Selected Component” should display your component’s name and when you click save, a Toast should appear, letting you know that it was saved.

If you saw the toast that it was saved, open up our Chrome extension inside your Bubble project and go to “More Tools” → “Figma to Bubble” and you should see your freshly saved component there, and if you save another one, it should appear right there.
Hover over the component and click “Copy” the go to Bubble and click on “Paste”.

NOTE: If you have opened up the Figma menu in Framify then this also now acts as “Auto-copy”, which means if you save a component in Figma then it will be automatically ready to be pasted to Bubble (as my example GIF in the main post).

If you do not see your component in our system then make sure that you’ve logged in with the correct account (In Figma & In our chrome extension ).

12

hey ,
thanks its working now just wanted to know i have copied the correct element and showing in framify correct too

image
image1842×1002 280 KB

but while i am pasting it showing like this not correct component coming
image
image1842×1002 69.8 KB

13

Hey!

Huh, I hope you have read also the documentation, because we currently do not support full “HTML” Conversion aka to convert the design to HTML and use the HTML element in Bubble.

As far as I can see from the image you are trying to copy an element which has a complex structure and it seems like it will be better if it is saved as an image, as this is not really a website element rather a graphic. The conversion is not meant for such things.

You can easily convert website layouts, forms, which are build with Figma’s Auto-layout etc from Figma to Bubble, and for Images such as this one, etc you have to use special naming so those would be correctly converted if they are used in a website design and also in some cases those will be replaced with placeholder values for you to edit. Images and Banners have to be saved on your computer separately and uploaded to Bubble, Framify will replace images with default placeholders.