🎉 Happy New Thunkable
By: Domhnall O'Hanlon
Tags: No Code, iOS, Design, App Development, Android

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

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!

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.

Account

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

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!

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.

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.

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.

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, the 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?

Rename/Duplicate/Delete

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

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.

FAQs

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.

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.

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.

I can’t find all of the Visible components

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.

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.