[Beta announcement] Import from Figma

Figma might be faster overall but if you’re creating designs in Figma and then having to import into Bubble and reconcile, I suspect the overall time would actually be longer.

Keen to explore the collaboration aspect of it though.

@allenyang Importing the template below didn’t really go well. The font isn’t taken over. Not sure if the font is available from Bubble’s side.

That might be because you haven’t imported the font in Figma, so neither Bubble nor Figma recognize it:

image

Thanks all for the positive feedback! We’re very excited about this feature and happy to see that the community is as well

Responding to a few folks’ comments from the thread:

@joe5 - Yes, we adjust the sizing of text elements because Figma treats text elements’ padding differently, so we’re attempting to get our imported text elements to look more similarly to Figma’s

@nocodeventure - the imported pages becoming blank sounds like a bug - if the page doesn’t come back, could you please file a bug report? Also re: fonts - yes, as @rukevweb suggested, if the font doesn’t exist in Bubble it won’t get imported. But if you’re trying to import a font that does exist normally in Bubble, please file that as a bug!

@scriptschool - Are you still not seeing the feature? Is this the case across all your apps? That’s odd…could you please file that as a bug report too?

@lantzgould - Sometimes this error is just a temporary thing and you should try again in a little bit. But if you’re consistently getting that error, please file it as a bug and please share the Figma file with us (because it might be something about the file that causes our import to time out, for example)

1 Like

Hi Allen,

I would rather see the imported files organized inside a Folder map, that way we can organize templates inside one simple demo :slight_smile:

2 Likes

I have personally found moqups slightly easier to use for wireframing over figma, however now that I can import from figma, i will give it a another try. Great addition

This is amazing timing, we just moved our mockup process to Figma - so happy you did this.

FIGMA import button greyed out in settings page

I have a figma frame i want to import. I loaded my api key from figma into the design import section and my figma file ID but Import button is greyed out and not available to select button to begin import. DO I need to adjust any other bubble settings to make this work?

That’s a bit odd - there’s just the most basic of validation behind that button (usually errors will show up in red text below). If this is still happening for you after refreshing the page, could you please file a bug so that we can get details on the API Key / File ID you’re using?

I’m getting the same message also. @allenyang any ideas how to fix it?

ANy ideas on how I can trouble shoot this? I created a new Figma project and a new API key.

Still getting the ‘Network Error’ message…

Have you checked about ad/tracking blockers-blockers ?

1 Like

@lucas.ar you’re the man! It worked. Thanks so much

1 Like

Can we import Buttons, drop downs and similar elements to be the correct types in Bubble?

Maybe we can setup a naming convention so that Bubble can do it more reliable.

My first try suggests that a button will be imported as a shape with text element above it?

Please help @allenyang

1 Like

Hot Suggestion (IMO)! - Add a special “meta-language” to the names of object frames and have Bubble translate them into Bubble Objects:

The idea would be to add a tag to the name of a Figma element ( “{Button}” for example), then have Bubble create an object of that element type (such as a button).

This could work for:

  • Buttons
  • Text Input
  • Text
  • Data Groups
  • Groups (general)
  • Repeating Groups

And then you can extend the concept over time for advanced ideas:

  • identifying similar pages as transitions of the same page (to create only one Bubble page.
  • Identifying pages to ignore (similar to the concept of importing multiple pages as a single page because they are just transitions of the original.

The key value will come from identifying which elements will be tied to data elements:

  • Containers that will be bound to List of Things (like Repeating Groups)
  • Containers that will be bound to a Thing (like Repeating Groups)
  • Elements that will be bound to fields of a Thing
4 Likes

@allenyang Do we have a future improvement plan for this feature? Like increasing the conversion precision rate (no more “rectangles”).

This is my biggest request.

That is brilliant. Bonus points if it can tie in to reusable elements somehow.

Hey, I’m keen to know whether you starting using Figma to design. I’ve been designing directly in Bubble and thinking about Figma. Would love to get your thoughts.

I design in Figma exclusively both within my team and on my own. I can create frames (or pages) side by side and view the entire design from a birds eye view rather than scrolling on a page. I tend to put a lot more thought in UI design if I’m not distracted with workflows and databases.

It’s also great to use as an asset repository and a place to create, edit or export multiple file types, png, jpeg, svg, pdf.

Figma has auto-layout and flexbox and when you get the hang of it, you’ll realise how similar it is to Bubble, so rebuilding in Bubble is really quick.

This is my process:

4 Likes