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.
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!
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.
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, 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?
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.
