Design system choice

juliensl · 2025-02-17T00:08:09.183Z

Hi everybody,

I’m new in Bubble, I was a developper and now I want to learn more about no-code.
I saw in a video that we can choose an existing “Theme” to make our design system, here a screenshot :

image1570×885 133 KB

Unfortunately, I cannot see this function anymore.
Is there deleted or is there in another place?

I found lots of documentation about Templates but nothing about Theme.
I don’t want to use a Template because there are to much functionalities, I want to keep control on my app. But, have the possibility to choose a consistent design system easily will help me to save hours.
I’m not a designer. If I do it by my own, I’ll create the worst design system the Internet has ever seen
And I don’t like so much the original theme

Please, tell me that this functionality still exist

Best regards

juliensl · 2025-02-17T16:55:14.383Z

Hi everybody,

I dived into this subject, I found the Google material design 3 that I want to use.
I found a Figma file created by the foundation ton setup his color panel automatically, from um single Primary color.

Now, I would like to import all in my bubble app, I mean :

All colors
All typography styles
All component styles.

I connected my Figma and my Bubble in the settings, succeed to make the transfert, but it only transfert pages and images.
My colors, text and component styles weren’t change

I’m pretty confused, will I have to copy paste all the configuration, one by one, to fit the Material design Schema?

I don’t really understand why this basic feature is not implemented in Bubble, there are plenty complex functionalities very useful, but the basic of a well done design is not solved? Do I missed something ?

Kind regards

NoCodePete · 2025-02-17T17:43:03.945Z

Would highly recommend my tool NoCodeFusion: https://nocodefusion.com/

Full design system and you can use AI to generate designs

lindsay_knowcode · 2025-02-17T22:02:10.111Z

And I highly recommend also

rjwilkinson10 · 2025-02-17T22:45:02.851Z

I have a “template” app in my account that I use as a base style sheet with typography, palette and settings for each element. I use it as the foundation for each new Bubble project and duplicate it. It’s not ideal as it would be great to sync it all from Figma but it saves loads of time when creating a new app.

I’m following @NoCodePete ‘s project too as it looks really cool.

juliensl · 2025-02-18T00:03:13.377Z

Hi everybody!

Thank you for your answers.

@NoCodePete I’m not looking for this kind of tool, I don’t want to start with a project that I will spend time to clean, and understand how it works.
I just need my styles to fit with Material UI 3, I don’t need more.

@rjwilkinson10 yeh, I think that I’ll have to create a template only to implement all the Material UI 3 styles and use it in my different projects
I don’t understand why it doesn’t exist, it looks like so abvious for me…

I understand that Bubble is a product for no-developers to develop app, people with design skills at the beginning, but there are also developers without any skills in design that just want to build faster without coding x)

AndyMountHood · 2025-02-18T03:46:24.245Z

I think if you don’t use a 3rd party Bubble tool/plugin or someone else’s template, the preferred Bubble way is to go to the Styles tab on the left, then the Style Variables tab on top. Select the app’s font and program in its color variables. (Add more color variables as needed.) Then go to the Element Styles tab and select specifics about each kind of element (such as buttons), always using color variables. If you ever change your mind about a color or the font, you can change them in the Style variable tab and they’ll change everywhere, so long as you don’t make exceptions with individual elements. I converted my app to dark mode (no light mode) last week this way.