👩‍🎨 The future of UI design in Thunkable

As 2020 draws to a close we’re thrilled to share with you one of the biggest updates we’ve ever made to Thunkable - take a look at our beautiful new project design page:

We’re hoping that in 2021 Thunkable users will create their most beautiful UIs, faster than ever before

Background

Last month we announced a new drag and drop project design page and moved invisible components to the blocks editor as opt-in features. We were delighted so many of you tried it out and your feedback was used to add new features and fix things that weren’t working.

This release takes it to the next level by completely updating the UI and giving you a significantly improved user experience.

Each time you create a new project in Thunkable, you have the option of trying out the new UI designer.

new_project
Let’s take a closer look.

Top Bar

Every pixel counts when you’re designing your app. We’ve reduced the size of the top bar so you have more space to work with and added new functionality.

Logo/Design/Blocks

Clicking on the logo still brings you back to your projects page. The design and blocks tabs are still doing what they’ve always done - they’re just taking up less space doing it now!

design and blocks

Project Title

We’ve moved the project title from the component tree to the centre of your screen. Not only does this work a lot better for longer project names, but you also have the ability to edit your project name directly from the top bar.

Test and Share

The Web Preview experience has been updated meaning you can now test in the design tab and the blocks editor. Live Testing is still the fastest way to try out native mobile features and allowing you to share your projects with colleagues, clients, and the community still remains one of our central goals.

Download and Publish

To save space all of the download and publish options now live quite happily in one menu together.

Project Actions

Previously, you had to leave your project if you wanted to duplicate it, delete it, or view its details page. All of these are now available from the new Project Actions menu.

actions

Account

This is the same Account menu that you know and love…keep reading…there are lots of other new things to come!

account

Side Bar

The aim of the side bar is to allow you to enrich your designs with data, images and other files and to get you from prototype to production with minimum friction.

Designer

This is your shiny, new, 2021, UI designer. No more invisible blocks, the contrast has been improved in the component tree, multiple screens, pan and zoom, drag and drop, alignment guides, resizable components, simplified properties. It handles great in all weather and each project comes with that unmistakable new app smell too - take it for a test drive today!

:mega: One area where it would be great to hear from the community is around the properties. We’ve shipped with the “essentials” but are definitely planning on adding more. Let us know which ones you want to see.

Data

One of the most powerful features of Thunkable is that you can add real data - your data - to a design with just a few clicks. To make working with and managing data as easy as possible, you now have a dedicated panel to manage all your Google sheets, Airtable and Local Data sources.

data

Assets

You can upload and rename any media assets that your project requires; images, audio, video, PDFs and Lottie animations are all supported here.

Settings

Historically a lot of new users have struggled to find the settings for their projects. The distinctive new gear icon should hopefully make this a lot easier to see. In Project Settings you can still find version numbering and custom package names along with space for your API keys. You can create accounts with Firebase, Google Maps, Yandex Translate, Microsoft Azure, and Cloudinary and safely add all your keys here.

Tutorials

The old tutorial pop-out has a new panel to itself too. The tutorial videos appear in a modal that can be moved and resized and remembers where you left off watching. After this update we have big plans for new tutorials in the New Year. If you have any ideas that you’d like to see let us know and we’ll consider every suggestion we receive.

Help

Did you notice that the help menu wasn’t in the top bar anymore? It’s down here in the bottom corner - curious users clicking on the new question mark icon can get help from the Docs, YouTube, or this amazing Community.

help

Designer

Multiscreen

All your screens are now visible in one place. The screen you’re working on is active, but you can drag and drop components onto inactive screens to switch focus at any time.

new_screen_600

Pan and Zoom

A bigger canvas to design on requires some new controls to navigate around it. You can select items with the arrow, pan around with the hand tool, zoom in and out with the magnification buttons and recenter on the current active screen.

Hotkeys: coming soon!

Drag and Drop

Each component can now be precisely positioned, anywhere you want on the phone screen. Smart guides help you with aligning components and for the first time we’re supporting layering of multiple components. The position of a component in the tree is what determines the “z index” on the screen.

Resize

All UI components now have handles at the corners to allow you to resize things quickly. When combined with the “Duplicate” feature this will save you tons of time.

Properties

We’ve shipped with (what we hope are!) the essential properties that you need to get started. We plan on adding lots more - please let us know what you want to see so we can prioritise based on user demand. In terms of redesign, there individual sections in the properties panel are now collapsible.

Component Name

Like the project title, the component name is now interactive too. Clicking on it will allow you to rename it. Pretty neat, right?

component_name

Rename/Duplicate/Delete

Components now have this new properties menu too. Here you can still rename, but also duplicate and delete a component.

component_properties

There’s no way to “un-delete” a component right now - so be careful with that last one.

Testing

Test early - test often! We actively encourage you to use the Web Preview and the Live Testing app as much as possible while you are working on your app. By moving the Web Preview button to the top bar you can now try your designs directly from the Blocks Editor, as well as the Design Tab. Hopefully by spending less time clicking back and forth between tabs you’ll be able to get your apps published sooner.

cc: @Community_Testers @Beta_Testers @Power_Thunkers

23 Likes

FAQs

Here are all the #draganddrop FAQs in a single post, to keep things easier to follow and cross reference.

Can I swap between the new UI and the Legacy UI?

No. When you create your project you can choose whether to use the new UI or not.

See also:

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.

See also:

Can I convert from the new UI to Legacy?

Nope. We want to focus on the new UI right now. Getting the existing UI to support layers and groups is out of scope.

Are there any performance benefits when using the new UI?

You should notice improvements in terms of adding, resizing, renaming and positioning components in your designs. This update is focused on making the UI design portion of app development as straightforward, intuitive, and fast as possible.

See also:

Are some of the Visible Components missing?

At the time of launch the Admob banner, Date Picker, Time Picker, Switch, Stack Navigator won’t be in the new UI. We’re actively working on getting versions of these components out to you soon.

See Also:

Are some of the Component Properties missing?

We’ve launched with the most frequently used properties but there might be some advanced properties that aren’t immediately available. Let us know which ones you want/need and we’ll prioritise accordingly.

See Also:

Are some of the Invisible Components missing?

Nope! The Realtime DB, Airtable, Local Storage, and Local DB components (along with all the other API components) are now accessible directly from the blocks. For RealtimeDB use Cloud variables, Airtable is available through the Data tab, and Local Storage is available through stored variables.

See Also:

Does the new UI have less features than the old one?

Nope! We’ve reordered things into the top bar and the side bar, moved some things into menus and even added a couple of things in to a new menu, so you actually have more features - they’re just organised more efficiently now.

See Also:

Do you have any tips for using the new UI?

Drag and Drop is a big improvement over the old Snap to Position system, but at the same time it is also a change for existing users. Here are some FAQs around usability and UX of the new design tab:

Are there any known bugs?

Thanks to the feedback from the Community we already know about quite a few of them. However, since we get feedback via email, PMs, Github Issues etc there might not be 100% visibility for everyone on what these are. We’re working to improve how we handle and respond to these issues as they arise.

See also:

Great work. I like it. It worth a try.

2 Likes

Wow… This is a major UI cleanup. I am very impressed!

I am curious about two screenshots in the above post. The first displays a drop down to download the app as android or ios, publish as web or publish as ios/android. the pro icon only appears on web. has publishing to ios and android always been free?? i probably missed this somewhere ahaha.

Second thing i noticed:

Is there a rough eta for figma? i know it was mentioned before in a webinar however seeing option in the assets has me excited!

Great work on the UI, fantastic design. I love it!

6 Likes

Glad you like it @giorgiospugnesi, and great to see you in the community again!


Yep, publishing for iOS has always been free :smiley:

“Publishing” for Android just downloads the APK (for self publishing!) but we’re thinking about ways we might build out a system similar to iOS next year.


Well… it’s not officially part of this release but … :joy:

2 Likes

WOW. This is a big change. I’m happy to see all of these tweaks!

I have questions about what Figma is – I suppose I can Google that – and how layered/overlapping components will work.

I guess we can forgive you all a bit for the small avalanche of bugs that cropped up recently! :wink: Clearly, you were busy behind the scenes.

So is this a “coming soon in 2021” sort of update?

4 Likes

:frowning: I have tried it but when we can code an app on the new design always? PLEASE PUBLISH THE NEW DESIGN ON WEBSITE THUNKABLE FOREVER

1 Like

Wow! This is great! Thunking gets easier day by day…

3 Likes

I love this! A superb work! :+1:

1 Like

You can opt in to try it right now @tatiang and @eko.devs.apploroceo. As folks get more familiar with it, it will become opt-out


You just put one component on top of the other! The new UI makes it that easy!


Was this possible in the current UI @samclever? Thanks for your suggestion, I’ll pass it along.

EDIT: Moved this to its own topic now.


That’s a great question @tchind - we’re planning to launch a converter for legacy projects next year. See the FAQ above:


Love your enthusiasm @unknownthunker! It’s opt-right now, the next step, in the coming weeks, is to move to opt-out, and eventually, in 2021, to make it the default for all projects but we want users to get a chance to try it out first since this is quite a significant change

3 Likes

Hi @domhnallohanlon,

some thought by me about this new GUI:

  • in my apps I use the automatic sizing features for components a lot. This is useful for example in displaying information in labels, lists, buttons whatever: just set your row/column to “fill container” in height or width, and set “wrap=yes” then the contents of a row/columns get scaled correctly in different devices and different screen orientation. The new GUI is not even capable to adjust the position and sizes if you rotate from portrait to landscape. And I assumed that switching the screen to “landscape” in desinger mode would show me the GUI also in landscape, but no, it doesn’t.
  • for me it seems ok if a user can decide which GUI to use, but I hope, that the “old” GUI doesn’t die out over the time, and that also some improvements will take place in the old GUI. My personal wishlist contains horizontal scrolling, labels with rich text, dark mode as a global option, edit settings for a group of components (=select multiple components and edit settings all at once), font/background color for the list viewer.

And I am very curious about Figma, looks like a great addition!

6 Likes

Hi, glad to see that thunkable adds new content. However isn’t it better to focus on bugfixing given the current state of things?

I know that adding new content is much more motivating than bugfixing, but it just keeps piling up as time goes by.

I don’t know how thunkable works internally but it’s been 2, 3 weeks that I’m here and I’ve discovered a lot of bugs that sometimes have been present for a long time.

I’m going to make a strange comparison but it reminds me of the Fortnite game of the new content but full of bugs.

And I strongly encourage the community to report bugs they encounter and give as much info as possible.

And to organize longer test phases. I noticed that the updates were frequent but are there really test phases before they are released? Personally, I’m looking for stability before anything else.

1 Like

even I have bugs but I ignore them…
in October I did created an topic in which I was blaming thunkable for one of my apps which had to go in a competition but I left it behind now
ill making other apps
well thunkable app has a connection with ur storage in builder too I think

i discovered them in nov and oct

lmao

u trying to pressurize staff
even I have many bugs but I wnt
till the time it becomes hec tick
also see ur errors first

they are beta

Dear @domhnallohanlon, congrats for such a steep progress in the development!
Thanks for listening to the input of your faithful fans, and keep listening to it :slight_smile:
I really love this new UI, and I can just say one thing - take a look at this mockup:

CONGRATS AND JUST KEEP GOING STRONG!

7 Likes

@domhnallohanlon,

These changes, plus the potential for the block / design split screen are big improvements.But…

I REALLY miss being able to pop out the Preview as a responsive web app!

This has become a central development tool for me. When developing block intensive apps, it is nice to be able to have the responsive web app open on one screen, and the development environment in another. That way I can test the block functionality without switching between devices. And having the wide scree of the Responsive Web App (vs. the itty bitty phone emulator) provides a lot more real estate to read my custom log to see exactly what is happening in my block processing.

2 Likes

as of now lets not give them to much pressure
regards
ekansh’s kindness

1 Like

but you can test it inside thunkable and that’s more than enough for me

2 Likes

really it isnt
when u go to publish there are issues
so thats the issue no.idk too

@domhnallohanlon,

I happened to notice in one of your screenshots that there were “Picker” and “Pickeritem” components, I hope that this means that we will be able to use dropdowns (something I think most of us have wanted for a long time!) soon!:smile:

5 Likes

Yes, even I noticed that. A dropdown will be the best feature yet!

3 Likes