# Implement Design System

**URL:** <https://community.thunkable.com/t/implement-design-system/1168940>\
**Category:** Questions about Thunkable X\
**Created:** [March 15, 2021, 8:52pm UTC](https://community.thunkable.com/t/implement-design-system/1168940 "2021-03-15T20:52:18Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![tbcguytb](https://avatars.discourse-cdn.com/v4/letter/t/8baadc/32.png) [@tbcguytb](https://community.thunkable.com/u/tbcguytb)\
**Post date:** [March 15, 2021, 8:52pm UTC](https://community.thunkable.com/t/implement-design-system/1168940/1 "2021-03-15T20:52:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 15, 2021, 9:39pm UTC](https://community.thunkable.com/t/implement-design-system/1168940/2 "2021-03-15T21:39:31Z")

</div>

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](https://reactnative.dev/docs/style) to know more about what I mean.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [March 15, 2021, 10:19pm UTC](https://community.thunkable.com/t/implement-design-system/1168940/3 "2021-03-15T22:19:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tbcguytb](https://avatars.discourse-cdn.com/v4/letter/t/8baadc/32.png) [@tbcguytb](https://community.thunkable.com/u/tbcguytb)\
**Post date:** [March 15, 2021, 10:57pm UTC](https://community.thunkable.com/t/implement-design-system/1168940/4 "2021-03-15T22:57:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tbcguytb](https://avatars.discourse-cdn.com/v4/letter/t/8baadc/32.png) [@tbcguytb](https://community.thunkable.com/u/tbcguytb)\
**Post date:** [March 16, 2021, 12:10am UTC](https://community.thunkable.com/t/implement-design-system/1168940/5 "2021-03-16T00:10:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![japa6225a](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/japa6225a/32/95982_2.png) [@japa6225a](https://community.thunkable.com/u/japa6225a)\
**Post date:** [March 16, 2021, 7:17am UTC](https://community.thunkable.com/t/implement-design-system/1168940/6 "2021-03-16T07:17:52Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/6/3668cc7e1fc70d3020f9164b7d8cdc6aea981c68.png)

---

<div class="post-metadata">

**Author:** ![tbcguytb](https://avatars.discourse-cdn.com/v4/letter/t/8baadc/32.png) [@tbcguytb](https://community.thunkable.com/u/tbcguytb)\
**Post date:** [March 16, 2021, 2:06pm UTC](https://community.thunkable.com/t/implement-design-system/1168940/7 "2021-03-16T14:06:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![japa6225a](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/japa6225a/32/95982_2.png) [@japa6225a](https://community.thunkable.com/u/japa6225a)\
**Post date:** [March 17, 2021, 12:39am UTC](https://community.thunkable.com/t/implement-design-system/1168940/8 "2021-03-17T00:39:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [March 17, 2021, 2:05am UTC](https://community.thunkable.com/t/implement-design-system/1168940/9 "2021-03-17T02:05:11Z")

</div>

> [@japa6225a](#):
>
> I have been using variables for this

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

* * *

> [@japa6225a](#):
>
> wish there was a **color with Hex**

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

* * *

> [@jared](#):
>
> It would be nice if there was a styles tab somewhere

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.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:25pm UTC](https://community.thunkable.com/t/implement-design-system/1168940/10 "2024-11-08T13:25:59Z")

</div>


