[NEW] Figma to Bubble import (Responsive Engine)

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

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?

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

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

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

@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

Tried it, unbelievably easy to use

1 Like