Simplifying Design: Moving Invisible Components to Blocks
Today we’re inviting you to try out our new slimmed down Design Tab and the enhanced Blocks Editor that goes along with it!
At Thunkable our mission is to make cross platform app development as simple and as accessible as possible. We’ve come a long way and we have no plans on stopping any time soon. This is the first in a series of exciting updates planned for the platform which we hope you’ll love just as much as we do. Please leave your feedback here to let us know what you think of this latest beta feature.
The most frequent question we get from users is “How do I design my app?”. Did you know there are currently 58 components in our Design Tab? Every time a new project is created Thunkers need to sift through 31 “invisible” components (which don’t require “designing” at all!) to find the UI elements they actually need. Think back to when you were new to Thunkable - more than half of the components in the Design Tab are “invisible”. This made finding the right component slower and more difficult than it needed to be, so we’re making it better. The search bar is great - when you know what you’re searching for - but as a brand new user you still don’t know what anything does yet, so we’re reducing the cognitive overhead by moving the invisible components to the Blocks editor. By making the Invisible components available in the Blocks editor you’ll be able to configure the set up and the logic of these component all at the same time.
Try it Out
Today we’re inviting you to try out our new slimmed down Design Tab and the enhanced Blocks Tab that goes along with it! Simply opt in here: https://x.thunkable.com/account/features
Once you have opted-in you will now have just 27 visible UI components to choose from (much easier to deal with than 58, right?)
- Text Input
- List Viewer
- Web Viewer
- Loading Icon
- Date Input
- Time Input
- PDF Reader
- Data Viewer List
- Data Viewer Grid
- AdMob Banner
- Top Tab Navigator
- Bottom Tab Navigator
- Stack Navigator
- Drawer Navigator
The biggest change is in the Blocks Tab. There are now 4 categories on the left of the screen; UI components, Core, App Features and Advanced (which included the “Any Component” blocks). To improve navigation each category is expandable and collapsible.
Beyond that, the blocks themselves have been improved to make them easier to understand and more intuitive to use. Take our classic translator app as an example.
In the current version, you need to add 4 components to your design, then in the blocks you’re expected to understand that function blocks can/should be nested and that the “result” variable from the Translator should be passed as the input to the Text To Speech component:
That’s quite a lot if you don’t have any experience with coding. With this update you only need two UI components, and the new blocks read more naturally and intuitively. You translate the text, the translation gets passed to the TTS component. Simples!
Tasks that were previously done in the designer, such as setting the language, are now done directly in the blocks so there is less context switching between the Design and Blocks tabs.
When you’re ready to move to more complex ideas, like asynchronous blocks, then there are some alternate “Advanced” blocks that you can use. For example, the translator can work in-line like this (which is how the vast majority of you use it at the moment)
Or it can be set up in advanced mode like this if you need access to additional functionality like error handling.
Finally, the settings for the components formerly-known-as “invisible components” can now all be done directly in the Blocks Editor. Simply click on the gear icon to add your own settings. You can connect to multiple APIs, work with numerous Alerts and even add Push Notifications and AdMob ads without ever having to leave the tab you are working in.
This improved method of adding component settings will also enable us to give you more granular control over your final app settings - another request that we’ve heard many of you asking for.
Ok - there’s a lot to digest in that update. Please take a look at the beta features in your account, test out the new blocks and leave us your feedback.