I’m currently working on an automatic Figma to Bubble.is Exporter! It’ll be a new tool that will convert a Figma file to a Bubble.is data .bubble file!
Features Implemented:
Automatically generate Figma Pages as Bubble pages
Convert Figma Shapes to Bubble Shape elements (With a few bugs)
Features in Progress:
I’ll be updating this thread with a live up to date list of all current features and features that are being worked on!
I just thought I’ll write this post to let people know that this tool is actively being worked on and should be available to the public hopefully in the next few weeks!
Are you able to persist the Figma groups to translate over into Bubble groups? What about repeating groups?
I’ve worked with a dev to tinker with the new Figma API a bit when it first released. It’s pretty neat, but curious how the import into Bubble will end up working. Watching!
nice idea, i had a look at their api before, has very clear documentation.
I think this project will be a lot of work to be fluid, i use sketchapp unfortuantly and its not too much effort for me to rebuild things, sometimes i design straight in bubble.
I’m currently just playing around with the Bubble JSON by resetting the app, downloading the blank file and then changing something like adding a page or adding a shape then downloading that and using visual studio code to compare and see what’s changed, it helps to see the data structure it takes to generate the code snippet for that part I’m dynamically adding. I’ll have to try that like this and see what code Bubble adds to it for a group element and see how easy it can be dynamically created
Well I’ve managed to implement dynamic pages, took me a day to work that out, it has a dynamic page title from figma as well as dynamic width and height.
I have a feeling that repeating groups might actually be possible, the best part with how bubble works is it’s all JSON, very easy to read, there were just a few parts that I was struggling to understand but I’ve just brought the paid plan for a month so I’m just back and forth tinkering with the file exporting and re-importing to try and work out why it wasn’t working. One annoying thing is bubble doesn’t tell you if there is an error importing the application when you go through the import process. It also seems like with a bit more work it can be more advanced than just UI as you can dynamically add workflows through the data file too as it’s everything added into that file.
I personally like Adobe XD but their api was too complicated, I’m going to learn Figma as I think that because Bubble is more building functional websites rather than UI design the features it implements for UI designing is more limited compared to solely UI designing and prototyping softwares like XD and Figma so that’s why I thought it would be a good idea to create a tool that can easily make the UI
I’m working on generating basic shape elements first, then will look into other elements. This is very much a WIP. Just thought I would share my findings on this thread as it looks very promising even with basic UI designing. I’m working on generating one element type at a time. I’ve done page generation so now I’m working on shape element generation.
Ok. Do you mind translating this discussion into English for us non-programmers out here? Sounds interesting but I have no idea what ya’ll are talking about.
Sorry about that, basically I’m creating an online tool that will be able to convert a Figma file (Figma is a UI design and prototyping online service that is really intuitive to create UI designs, Link is here: https://figma.com) into a .bubble file. Bubble can now import and export applications on any paid plan so this can’t be done on a free plan however thanks to this new feature I’ve had the idea to create an automatic script that will convert Figma to Bubble in just a few seconds.
Thanks @battlexgenerations. It clears it up somewhat. I’m on a paid plan but I don’t think I’m ready to truly take advantage of the benefit. Something else to look forward to.
This is really interesting. Although we use Bubble a lot for prototypes, it’s UI can still make it cumbersome to sketch ideas quickly. Our go to tool for layout exploration and design is Figma. If there’s a path to move these layouts to Bubble semi-reliably it’d be a large time saver. Thanks for putting the effort into this; I’m excited to see how it develops.
If you know anything about JSON manipulation with PHP then I would be interested in some help as I’ve run into some issues with dynamic element creation
I’ve managed to export my Figma file rectangles into bubble shapes successfully with only a random shape not being rendered successfully, I’ve done the conversion process a few different times with the exact same template and it’s only rendered 3/4 shapes and the non rendered shape changes every time so that’s a bug that I need to look into.
If you are doing this as a hobby or to learn ins and outs of Figma API that is ok, but if you are aiming to get somewhere with this you want to check with Bubble team because as far as I know they can change the JSON structure without notice.
Maybe they can even save you some time and give you access to the JSON structure documentation.
Didn’t think of that tbh, will have to look into it, although they do know that I’m creating this tool and manipulating their json data structure as I emailed them asking for help on the element creation part but now got that sorted
This is awesome! I’ve been looking for something like this and am excited to put this plugin to use once it’s completed. If you need anyone for early stage testing, I’m your guy!
Sounds interesting but I have no idea what ya’ll are talking about.