👩‍🎨 The future of UI design in Thunkable

[migo]

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

[domhnallohanlon]

@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!

---

@shauryabagrecha2312m

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

[ringraith2]

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…

[lichicts]

Are you kidding me? Whooooooooohooooooo! Almighty Thunkable!

[dpalusak]

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

[juschan0605]

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

[domhnallohanlon]

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?

[gobassky]

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.

[rodrigo.arellanoi]

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.

[yosef.dc7]

Up

[domhnallohanlon]

@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

---

@gobassky

How you do preview in the browser window

Are you looking for the web preview button?

---

@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.

[domhnallohanlon]

@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:

---

@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.

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!)

[saaransh]

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

[domhnallohanlon]

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?

[towball]

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!!!

[Kat_Rostova]

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.

[Power_Dev]

Awesome design

[genius398]

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

[japa6225a]

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