How to design better UI?

Hi guys,

I’m wondering how, as a non-devloper, I can make better looking clean design, specifically for repeating groups. It’s just an mvp, so I won’t justify hiring a UI dev (at the moment).

Are there any resources or plugins in which I can accomplish clean looking cards for example for repeating groups showing users data?

Think of something like this:

Just something that’s doable, as I have a dashboard that doesn’t have the best presentation.

Thanks a lot.

1 Like

Yeah, you can especially when you have a reference UI like this Its’s possible, am open for discussion if you don’t mind, we can work something together

get a free figma template or buy a figma template…inspect the elements in figma and recreate them in the Bubble app

2 Likes

I personally find that @ThomasC2A has done a great job with https://www.nocodable-components.com/

The templates are actually very good and with a bit of knowledge you can easily customize. You can even try it for free (3 components).

Might be worth looking into.
Mike

2 Likes

i steal from dribbble.com

4 Likes

That’s interesting, does figma contain the same features/structure as bubble for designing elements that would translate well?

Yes. When you inspect Figma files you see the width, height, color, font size etc.

It is very easy.

1 Like

You can have a look at https://madewithframes.com/ and https://www.basislab.io/. Both are great tools to have a consistent UI design throughout your app. And it’s easy to use

2 Likes

All good recommendations given already.

And to add to that: If you want to learn how to build good looking (responsive and consistent) UI yourself, then @gregoryjohn 's Flexcamp is highly recommended: Flexcamp: Master responsive design in Bubble

1 Like

Thanks everyone for the suggestions. Appreciate it.

2 Likes

Hello everyone, following the valuable tips from my colleagues here, I would like to contribute with one more, the Bubble Essential Kit, created by @renatoasse here in Brazil.

I already use it and recommend it, for those who have difficulty, like me, creating layout and working with screen design, it’s a great help!

It is divided by types of screens, from structures for landing pages, to complete SaaS models, Dashboards, etc.

There is a specific section on Repeating Groups, with several types, including table ones.

Examples of the available layouts, which just copy and paste into your bubble application: Bubble Essential Kit | Repeating Groups (Cards) | #1 Bubble.io Component Library

You could also use a 3rd party service to import your Figma designs into Bubble. I haven’t used one of these services yet but I am interested in giving them a try

Both support Figma to Bubble import

Connect with me:

Hey everyone, I’m considering investing in a component library to speed up my development process. Out of the options I’ve explored, essentialkit.io is my current favorite. deezign.io and framify.io also caught my eye, but the latter seems a bit inactive. I’m hoping to find something similar to Relume for Webflow; having a library like that is a real game-changer. Any recommendations?

As @drixxon mentioned, I also lean heavily on dribbble.com but if you want something to do some heavy lifting for you, you could also try Bolt.new

Hey,

I’m currently building elemium.io, a Bubble UI & Styles Library.

elemium-library

I’m at 250+ components for now, and growing.

If you want to check that out, all component can be linked to Styles, so they adapt to your styles and colors.

Tell me what you think :slight_smile: