5 Tips & Tricks for Better Apps using Bubble.io

Hanan A.S.
A Song of Art & Science
3 min readAug 24, 2022

Use Iconify for icons

Do you use iconfiy for UI design in Figma? No need to download the icons, simply use the iconify plugin and copy/paste the name to get the correct icon. Style as you like, use conditionals to change icon if you need to, give it some transitions…be creative 😉

Page Custom States for Faster Apps

I have recently been helping a community member with an employee time tracking app where the dashboard is all about that day’s record for that user. So instead of doing a search to find that entry every time I need it in a workflow, I simply save it once as a custom state for that page.

Now let’s assume that your mobile app has 4 main pages (groups, all on the same page) and each one is about a certain data type, save that record as a custom state to the page on page load and see how your apps get a wicked speed boost!

Search External Database Faster

Also in my latest app, users could search a certain youtube playlist for a meditation video, but a search youtube operation API call costs 100 quota 🤯

So I just added a list on the screen, made the data source the result of a GET public playlist items and passed the playlist id and max results as parameters. I then filtered the list by the search field value. Worked like magic ✨🤩

Use Classify Plugin to Add Some “style” to your UI. Pun intended 😃

It is such a bummer when you have to settle with an element’s style that doesn’t match the real UI design because the technology does not give you so much power to do so! I for one, needed a tabbar with background blur, popups that look like mobile action sheets and repeating groups with visible overflow…Classify came to the rescue.

Just add a class and drop and HTML element anywhere on the screen and used that to set the class style. Awesome stuff 😎

Leverage Bubble’s Power to Make your App More Humane ❤️

For example; instead of hi[name]! you can use the current time to say good morning or afternoon. You can also copy & paste text that contains emojis right into a text element to make it fun…it’s all up to you.

Got any tips you’d like to share? Please do!

If you need any help with an existing bubble project, check here. We’re all ready to help. I can also build an app from scratch or coach you 1-on-1 as you build your own.

‘till next time, lots of love and #keepdesigning!

--

--

Hanan A.S.
A Song of Art & Science

What remains of a Human Female. Digital Product Designer. Bookworm.