# 👩‍🎨 The future of UI design in Thunkable

**URL:** <https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738>\
**Category:** Announcements\
**Created:** [December 14, 2020, 6:56pm UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738 "2020-12-14T18:56:52Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![migo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/migo/32/83683_2.png) [@migo](https://community.thunkable.com/u/migo)\
**Post date:** [December 17, 2020, 3:04pm UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/121 "2020-12-17T15:04:04Z")

</div>

That’s really awesome! Thank you! Will try immediately 🙂

---

<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:** [December 17, 2020, 3:15pm UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/122 "2020-12-17T15:15:29Z")

</div>

> [@ianphaas](#):
>
> there were “Picker” and “Pickeritem” components

Nothing gets past this community @ianphaas 😂 yep - they’re under development, but there’s no ETA for them as yet!

* * *

> [@\[Solved\] How do I create a project with the new UI?](https://community.thunkable.com/t/solved-how-do-i-create-a-project-with-the-new-ui/1040718/6):
>
> I am trying these new features in my old app but it is not coming there but when I open a new app it is there

@shauryabagrecha2312m - yes, this is intentional. At the moment it’s an opt-in for new projects. In the future we will have a conversion tool to update existing projects. See the FAQ above:

> [@domhnallohanlon](#):
>
> ### Can I convert from the Legacy UI to the new UI?
> 
> Not right now - but we’re planning on adding a converter so you can migrate existing “rows and columns” projects to shiny new Drag and Drop projects.

EDIT: Moved to [its own topic](http://community.thunkable.com/t/how-do-i-create-a-project-with-the-new-ui/1040718)

---

<div class="post-metadata">

**Author:** ![ringraith2](https://avatars.discourse-cdn.com/v4/letter/r/9f8e36/32.png) [@ringraith2](https://community.thunkable.com/u/ringraith2)\
**Post date:** [December 17, 2020, 5:51pm UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/123 "2020-12-17T17:51:27Z")

</div>

Very interesting UI. I worked with it a little and is very funny and extremely simple and quick in design mode, although I saw that a lot of options, specifically the advanced options are missing.

Keep upgrading the already awesome platform guys…

---

<div class="post-metadata">

**Author:** ![lichicts](https://avatars.discourse-cdn.com/v4/letter/l/bbce88/32.png) [@lichicts](https://community.thunkable.com/u/lichicts)\
**Post date:** [December 19, 2020, 10:30pm UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/124 "2020-12-19T22:30:27Z")

</div>

Are you kidding me? Whooooooooohooooooo! Almighty Thunkable!

---

<div class="post-metadata">

**Author:** ![dpalusak](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/dpalusak/32/83327_2.png) [@dpalusak](https://community.thunkable.com/u/dpalusak)\
**Post date:** [December 21, 2020, 2:22pm UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/125 "2020-12-21T14:22:05Z")

</div>

This looks awesome @domhnallohanlon I can’t wait to fire it up and build something new!! Great job Thunkable Team.

---

<div class="post-metadata">

**Author:** ![juschan0605](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/juschan0605/32/98033_2.png) [@juschan0605](https://community.thunkable.com/u/juschan0605)\
**Post date:** [December 21, 2020, 3:29pm UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/126 "2020-12-21T15:29:57Z")

</div>

Wow!!! Million Thanks @domhnallohanlon  
I HAVE BEEN WAITING FOR THIS UPDATE SO LONG  
as I am doing an to-do app and the spacing of each component in the screen ignores me a lot. (you need to adjust the margin and positioning) Also, can u please update the sidebar for showing screens as I can’t add icons and change it to dark theme. By the way, about dark theme, can u please also add a block component that users can change from light mode to dark mode or other way around by switch or buttons? Thank you very much for your help.

This above suggestions will help me a lot, so please consider adding it in thunkable

---

<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:** [December 22, 2020, 9:00am UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/127 "2020-12-22T09:00:49Z")

</div>

Thanks @Michael_Rogulla for your thorough and considered feedback.

> [@Michael\_Rogulla](#):
>
> horizontal scrolling

There are some work-arounds for this in the community, but would definitely be nice to have this.

> [@Michael\_Rogulla](#):
>
> labels with rich text,

+1

* * *

> [@Michael\_Rogulla](#):
>
> dark mode as a global option,

Something like this should be out next year, I think.

* * *

> [@Michael\_Rogulla](#):
>
> =select multiple components and edit settings all at once

Historically, I’ve done this with the Any Component blocks - but I think this is the first time I’ve heard it suggested for the Design Tab, thanks!

* * *

> [@Michael\_Rogulla](#):
>
> font/background color for the list viewer.

You can do this with the Custom Data Viewer, have you tried that out?

---

<div class="post-metadata">

**Author:** ![gobassky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/gobassky/32/77019_2.png) [@gobassky](https://community.thunkable.com/u/gobassky)\
**Post date:** [December 26, 2020, 7:20am UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/128 "2020-12-26T07:20:49Z")

</div>

Wow, this is fantastic. The most useful feature for me is the group component. There is no longer a need to crack our heads to try and organize the layout in a series of nested column or rows. Nicely done. A few queries though:

1. Also within the group, components now can overlap each other. How do we order them such that a button may be over an image? I am not able to drag the components up and down in the list panel to order them.

2. How you do preview in the browser window if we are developing web app? Can the designer screen include other screen sizes?

3. Also I notice that labels no longer have attributes such as “fill contents” / “fill container” etc. they are fixed and longer texts will be cropped.

Still playing around but in general, the UI looks good. Functionality wise, I will stick to the classic for now due to some the of the above mentioned.

---

<div class="post-metadata">

**Author:** ![rodrigo.arellanoi](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@rodrigo.arellanoi](https://community.thunkable.com/u/rodrigo.arellanoi)\
**Post date:** [December 27, 2020, 6:30pm UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/129 "2020-12-27T18:30:19Z")

</div>

Is missing web api component, and now there aren´t option to clone or add components in Any component block.

I get that columns and rows were changed by group component, but this group component does not allow set scrollable if you need to grows it in function of content.

---

<div class="post-metadata">

**Author:** ![yosef.dc7](https://avatars.discourse-cdn.com/v4/letter/y/9f8e36/32.png) [@yosef.dc7](https://community.thunkable.com/u/yosef.dc7)\
**Post date:** [December 31, 2020, 12:50am UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/130 "2020-12-31T00:50:05Z")

</div>

Up

---

<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:** [January 4, 2021, 12:47pm UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/131 "2021-01-04T12:47:49Z")

</div>

> [@gobassky](#):
>
> Wow, this is fantastic.

Thanks @gobassky - glad you’re liking it so far.

* * *

> [@gobassky](#):
>
> How do we order them such that a button may be over an image?

You can still move components up and down in the component tree - I wrote a quick tutorial here: [Layering Components in Thunkable](http://community.thunkable.com/t/layering-components-in-thunkable/1042162)

* * *

> [@gobassky](#):
>
> How you do preview in the browser window

Are you looking for the web preview button?

 ![web_preview](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/5/35ad1ef4c7e5a965dff2fc947a8d93c6f39e9282.png)

* * *

> [@gobassky](#):
>
> labels no longer have attributes such as “fill contents” / “fill container”

Can you give a simple example of this? Would be keen to get this fixed if it’s blocking you from using the new UI.

Thanks.

---

<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:** [January 4, 2021, 12:52pm UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/132 "2021-01-04T12:52:12Z")

</div>

> [@rodrigo.arellanoi](#):
>
> Is missing web api component

@rodrigo.arellanoi - the Web API component is available in the blocks section now. This is what it looks like:

 ![web_api](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/2/42a7172b804b42aa4ef08eca598a176d1ea4a666.jpeg)

* * *

> [@rodrigo.arellanoi](#):
>
> here aren´t option to clone or add components in Any component block.

Looks like you’re right - I’m not seeing clone or remove either.

 ![dnd_any_component](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/9/995c2adaa21c7508fb2d81325829c0b3cca245cb.png)

I’ll look into this for your and get back to you.

* * *

> [@rodrigo.arellanoi](#):
>
> group component does not allow set scrollable

I think there are plans for horizontal and vertical scrolling - again - I can double check this for you.

* * *

> [@yosef.dc7](#):
>
> Up

What were you trying to bump here @yosef.dc7? (it wasn’t clear to me!)

---

<div class="post-metadata">

**Author:** ![saaransh](https://avatars.discourse-cdn.com/v4/letter/s/fbc32d/32.png) [@saaransh](https://community.thunkable.com/u/saaransh)\
**Post date:** [January 5, 2021, 8:14am UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/133 "2021-01-05T08:14:56Z")

</div>

I want to change one project to the new data base how would I do that or will I have to make again the same app again in the the new data base

---

<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:** [January 5, 2021, 12:58pm UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/134 "2021-01-05T12:58:43Z")

</div>

Hi @saaransh - welcome to the Community! 👋

> [@saaransh](#):
>
> I want to change one project to the new data base

Does this post help answer your question? [When can we convert existing projects to the new UI?](http://community.thunkable.com/t/when-can-we-convert-existing-projects-to-the-new-ui/1042213)

---

<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:** [January 5, 2021, 9:43pm UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/135 "2021-01-05T21:43:40Z")

</div>

A post was split to a new topic: [Downloading the source file from the new UI](https://community.thunkable.com/t/downloading-the-source-file-from-the-new-ui/1042242)

---

<div class="post-metadata">

**Author:** ![towball](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/towball/32/68409_2.png) [@towball](https://community.thunkable.com/u/towball)\
**Post date:** [January 8, 2021, 10:20am UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/136 "2021-01-08T10:20:38Z")

</div>

I like the new UI. Created a simple variable basics (public). Was easy to navigate. Without Rows or Columns would be nice to have be able to select multiple fields at one time and Align Vertical or Align Horizontal. The current line up with the red lines is good but if you had a lot of fields is a lot of work. Hints need Text size available. Great job Thunkable!!!

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/2/42738c17a650a4400d4cc429ce27a35b9a6ba90c.png)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/8/b8347a7acd323f74b5149461ddf11d395f1a4272.png)

---

<div class="post-metadata">

**Author:** ![Kat\_Rostova](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kat_rostova/32/93944_2.png) [@Kat\_Rostova](https://community.thunkable.com/u/Kat_Rostova)\
**Post date:** [January 17, 2021, 10:32am UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/137 "2021-01-17T10:32:44Z")

</div>

I started using the new drag and drop yesterday and oh boy!! Saved me so much time on rebuilding my auth page. I just jumped in without reading any literature about the changes so there was a tiny learning curve on where the invisible components were, but it was super quick to find them. Hint in the blocks… Some blocks pull it as basic, like the sign up for real-time db. When you need it to be able to check for an error and display the error message, you can right click on the block and choose to make it an advanced block. Took me a minute to figure out why I couldn’t check for an already registered user like in the legacy thunkable. The advanced block allowed me to put that check in and display and error if already registered or any error for that matter. 😁😁 Gonna keep working with it today and hopefully have a few more pages built.

Edit: one of the things that would always get me hung up is the design UI in legacy, it was just too time consuming for me when I really needed to focus on the blocks more. I used to abandon all my projects mostly because design took too much time for me since I’m more of a developer and problem solver vs a designer. This new ui makes it very friendly for design-challenged people like me.

---

<div class="post-metadata">

**Author:** ![Power\_Dev](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/power_dev/32/87777_2.png) [@Power\_Dev](https://community.thunkable.com/u/Power_Dev)\
**Post date:** [January 17, 2021, 11:19pm UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/138 "2021-01-17T23:19:02Z")

</div>

Awesome design 😃

---

<div class="post-metadata">

**Author:** ![genius398](https://avatars.discourse-cdn.com/v4/letter/g/c5a1d2/32.png) [@genius398](https://community.thunkable.com/u/genius398)\
**Post date:** [January 27, 2021, 8:11am UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/139 "2021-01-27T08:11:39Z")

</div>

OMG! The new stuff is great! Thanks a lot!

---

<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 5, 2021, 10:27am UTC](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738/140 "2021-03-05T10:27:24Z")

</div>

New user and dove straight in to the new UI. It’s taken a couple of weeks but now I am starting to understand that the various tutorials and documents can be done. Just have to think differently. Personally cannot justify the Pro version for learning/prototype yet.  
Also looking forward to when components/functions like dropdowns (yes I know I can mimic this) and block copy/paste/export and import are available,  
Ta  
James

[Previous page](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738.md?page=1)

[Next page](https://community.thunkable.com/t/the-future-of-ui-design-in-thunkable/1035738.md?page=3)
