Got an idea. How to go about it?

Hey there,

We are excited to try Bubble out properly. We got an iOS mobile app idea. We know eventually need a native wrapper.

But before we get to that stage…Is there an efficient/best way to translate what we designed in Adobe XD to Bubble? We are sort of lost on that, beyond recreating the whole thing from scratch on Bubble.

Also, what other tips should we know before we start rolling our sleeves and do the work? Right now, all we know is that on the page’s appearance, we should select the checkbox saying that the app is to be a native app, and the tips provided by the subsequent pop-up window. Anything else to look out for?

Thanks so much!

There is so much you need to know…
Well, first of all your app shall be one-page. For screens you will show and hide groups using custom states on the page.

You will need to learn how to make the viewport height responsive - use HeroSizing plugin.

In Styles tab of the Editor create your design System and delete all default styles. This will save you tons of time.

I’m still learning but tutorials are helpful, and you can use a template to see how things are done. The blog is very helpful as well as it’s full of examples of how to build interesting solutions.

I can’t seem to find this Herosizing plugin. Might it have a different name?

Yes, sorry - the plugin name is “Toolit Kit”. This plugin contains several plugins including Hero Sizing.

It is not obvious how to use Hero Sizing plugin, so watch this video before -

Actually it seems the only way to achieve viewport height responsiveness.

1 Like