I have 2 beautifully designed pages in figma and i can import them just fine, but they’re fixed and that doesn’t work for mobile responsiveness. Any tips on how to create in figma where it’s easily transferable to column/row or any recommendations on people who are really good at taking designs and implementing them on bubble. No workflow work needed
If you imported them using the import function in Bubble, the issue is not on the side of Figma, meaning the question is not how to design them in Figma so that they would be compatible with Bubble throw the import feature. It is the import feature that needs to be improved to work better. Since the inception of that feature it wasn’t complete as anything in Figma that is a container, usually just came into Bubble as a shape instead of a group.
If you have already imported them. Just begin the task of altering the responsiveness inside of Bubble on your own. Otherwise, you may find a designer/bubble dev that could do it quickly enough I bet.
1 Like
I can help you with your issue 
Well said man
I am offering to help with the development of the UI in FIGMA. If you are interested, we can fix a meeting and I have a look at the designs and know where we go from there. If you want, say the word and I’ll send over my calendly to schedule a meet.
(1) Some desktop screen designs translate to mobile easier than others. Having a separate mobile design done in Figma can help, especially when translating things like tables which go across the screen into cards which will go down the screen.
(2) We always try and develop one version of each page, that is fully responsive (vs two separate pages).
(3) Make sure you or your designer sets up their Figma file using a design system. A design system should define common elements like a spacing grid with side margins, and also font size changes from desktop to mobile if needed. Use a group and call it something like Group Container around your content. Apply breakpoint settings to this group, for example a 40px left/right padding for computers, dropping to a 20px padding for mobile. Put as many settings on the style as possible, verses copying and pasting them onto each page. Use Bubble’s predefined breakpoints.
(4) We don’t ever do a Figma import, but we define each group on the page in Bubble, because if you think about responsiveness from the start (e.g. define your styles, responsive parameters etc) for your whole app, you save hours of time later and make subsequent changes much easier. We’ve taken over lots of projects where the devs use a copy and paste approach, and it not only introduces avoidable tech debt, but it makes their process slower and ours.
We have both an Agency that can set up your design system and show you how to implement this across your app if you want. We also have an Academy course that teaches this stuff from first principles to help you become a better developer! Good luck.