Zing Studio: Prototype with code and design
Zing Studio is new way to design and prototype mobile apps. Zing Studio is available for Mac and Windows 10. The prototypes you create run on Mac, Windows, iOS and Android.
This article gives an overview of Zing Studio. But if you’re the kind of person that prefers to jump straight in, you can download Zing Studio and get started right away. No sign up, log in, credit card or email address required!
Why another prototyping tool? Prototyping is all about learning, and with Zing you are in control of the level of detail you need. Just need to quickly string together a few static images? No problem. Want to flesh one of them out with interactive controls and data? Zing can do that too.
Zing Studio is built to scale from experimenting with simple, isolated animations all the way to building full applications that you can publish in the App Store. With Zing you progress gradually, without ever feeling like you’ve been dumped in at the deep end just because you wanted to add that one extra feature.
We achieve this through a unique combination of code and design.
Designable code
Zing Studio is built around a philosophy we call “designable code”. There is nothing quite as powerful or flexible as code for implementing intricate logic and behavior. But code can be cumbersome and lacks the direct feedback of visual interfaces for layout and design. We didn’t want to choose, so we built a new language called Zing Script that brings the two worlds together.
Here’s a simple “Hello, world!” example written in Zing Script.
In Zing Script, your code corresponds exactly with the visual design you are creating. This makes the code easy to read and understand, but it also means that it can be edited directly as text or visually in a designer. We don’t think of the designer and code editor as two distinct activities, but just two different views of the same prototype!
This is best demonstrated with a simple map view example. By switching between the design and code views we can make some updates by changing the code, and some by directly manipulating the design. Any changes we make in the code view immediately show up in the design view, and any changes we make in the design view are reflected in the code.
Build with elements
The Zing design view is a friendly environment for building views and layouts that should feel familiar to anyone used to other visual design tools. However, instead of being limited to simple primitives like text, images and shapes, in Zing you use rich, reusable blocks we call elements.
Elements are configured by setting properties to control their appearance and behavior. Even though they’re as easy to manipulate as images, elements are much smarter. In the following example the Apple.NavigationBar element automatically resizes when it is positioned at the top of the screen, and the Apple.Segmented element’s width adjusts automatically to bound its content. You can override these values, but the default smart behavior is what you want most of the time.
Elements aren’t just visual templates, but fully functional components that spring to life with the interactions, effects, animations and behaviors you are used to when you preview your prototype. Zing includes elements for everything from images and shapes, to videos, vector maps, native controls and more. You can even make your own elements and they automatically work in the design view, just like the ones we’ve included!
This is what the view built above looks like running. Without having written any extra code, all of the elements look and feel the way we would expect. When we switch from the iPhone X to the iPhone 8 skin, the elements automatically resize.
We put a lot of focus into all the little details of our native control elements. Poorly implemented controls are jarring in a prototype, and can distract users from what you are really trying to demonstrate. These details are all important, but are not something you are likely to have a lot of time to invest in when you are working on a specific project. In Zing, you get high quality controls that work just right without any extra effort.
A good example is the humble iOS navigation bar and transition. The navigation bar uses a surprisingly complicated combination of effects and animations to blur the content underneath it, and to seamlessly blend its state from one page to another during a navigation transition. Most prototyping tools ignore these nuances, and use simple opacity and a primitive push transition in their place. In Zing, you get the right behavior when navigating between two pages for free, making your prototypes feel much more real.
Even seemingly simple controls are not always as straightforward as they first appear. For example, in the iOS segmented control, the text in the active cell punches a “hole” through the control. This allows the content behind it to shine through and look great on any background. Many prototyping frameworks fake this and require you to manually background match the color of the active cell text, leading to more work for you and a control that can’t be used above dynamic content.
Elements aren’t just purely visual components. Zing also has elements for scroll views, tab and segmented views, and many others that add structure to your prototype. Zing uses these elements instead of ad hoc “links” to connect parts of your project together in a robust way that works well in both design and code view.
The following example adds two pages to an Apple.TabView element. The tab view element takes care of the tab bar layout and manages the view interactions, leaving you to focus on each tab’s content.
All of Zing’s elements are cross-platform, and work whether you’re previewing on Mac and Windows or running your prototype on a real iOS or Android device. And remember, you can always flip over to the code view to copy, modify or delete parts of your design.
Code away
The design view gets you a long way, but you can add even more depth to your prototype with code.
Coding can be intimidating, especially if you haven’t been exposed to it before. With Zing Studio we’ve designed a language and code editor that work together to make coding a fun experience for everyone. If you haven’t written code in the past, we think that Zing is a great way to learn!
Zing automatically updates your prototype in real time as you edit your code or design, without the need to manually save or run. The Zing Script language is what programming nerds call “statically typed”, which helps detect mistakes and allows us to offer high quality, semantic code completion as you type.
Error messages are displayed inline with your code, highlighting the exact location of any problems and often giving suggestions on how to fix them. Even in very large projects, this feedback is delivered almost instantly, allowing you to fix the problem and remain focused on what you are are working on.
Zing Script makes expressing logic simple and direct. Instead of just assigning simple literal values, you can relate the values of different properties together using property expressions. The following example connects the rotation of a rectangle to the value of a slider element.
Property expressions are reactive to changes. As the slider’s value changes, the rectangle’s rotation will change as well. To help understand these expressions, Zing Studio includes a code “microscope” that annotates your code with the computed expression values as they change.
Zing Script is event driven. Events are instantaneous actions, such as a button being activated or a timer expiring. By providing an event handler, code you write is executed whenever the event occurs. The event handler shown below moves a button to a random location and changes its label when it is tapped.
The examples shown here are only a small glimpse into Zing Script. Zing Script is a full featured, modern programming language with support for HTTP and JSON, asynchronous continuations and a host of other convenience features that make your life easier. And as great as Zing Script is for small projects, it has also been battle tested in projects with more than 25,000 lines of code.
Share the fun
What’s the difference between a prototype and an app? Sometimes nothing!
Zing Studio can export your work as native Apple Xcode or Android Studio projects with a single click. You can easily customize these native projects with any platform specific code you might need and publish them directly to the Apple App Store and Google Play Store.
Ishtar Commander is an amazing companion app for the video game Destiny, and has over a million users across iOS and Android. Best of all, it was built entirely in Zing Studio!
Got a minute?
We’d love for you to give Zing Studio a try. Getting started is easy — there’s no sign up, log in, credit card or email address required, and the entire download is under 15MB. We’re not kidding when we say you can be up and building your first Zing prototype in seconds!
Zing Studio is available now for Mac and Windows 10. If you want to learn more, head over to http://www.zingstudio.io and start creating!
