Implement Design System

Does Thunkable have a design system where we can apply a style of one object to another. I created a layout and now I have to start the long task setting each field to look the same. I have one field done. Can i reuse its propeties (color, border, text color etc) and apply it to another.

Tbcguy

2 Likes

There is no simple way to do this. It would be nice if there was a styles tab somewhere and we could assign styles to any given component and repeat that style but there’s not. You’ll have to set each components color font size margins borders and all of that individually. You can use the all component blocks to do it programmatically but that can take some time to paint things on the screen. It would be nicer if there were just style settings that were very convenient to use.

Come to think about it. Considering the entire system is built on react native, we should in theory be able to access a CSS style sheet. See this link to know more about what I mean.

4 Likes

If you set one component to the style required then just use the duplicate option to produce similar components.

1 Like

I do that already. But I guess I’m asking once my layout is setup can I apply say a global component design. Instead of going through each component seperately

1 Like

Yes that is what I’m talking about, almost a stylesheet, then apply styles to each component. Oh well, i will have to make do. Fantastic still nonetheless

I have been using variables for this. Only wish there was a color with Hex block

Interesting. I will have a look at implementing something like that. I have already redone the ui, but i will keep something like this in mind. Do you mind why you would use this type of code. Does your ui respond to changes or is this just a certain button on the screen that you use this for? This is runtime code isn’t it. I am looking at design time to speed up changes to components that are similar.

Yes, run time. Some of the buttons depend on entered data.

+1 for an approach like this - I have some Tutorials and DIY Guides that show how to do this.


You can just use a text block with. “#a9a9a9” for example.


This sort of idea comes up quite a bit - styling and themes in general are definitely something we want to add into the platform going forward, but it’s not something we’re actively working on right now.

4 Likes