medium bookmark / Raindrop.io |

I’m a developer by trade, but am incredibly interested in interface design and have personally designed and built many apps over the last 15 years. Like many of you, I am always looking for new ways to improve my productivity and processes. Two years ago, I found myself growing increasingly frustrated by the inefficiencies in building mobile apps. I would get a design from my team, only to have to work with the development team to reassemble the assets, create a prototype that worked, and then start the process all over again from scratch to build the finished product.

“Why do I have to spend all this time doing the same thing over and over again?”

Obsessed with this problem, I enrolled in a wonderful program at The Recurse Center in New York. There, I set out to devise a solution that would radically reduce the time and complexity involved in building apps.

The Big Idea: Designs as code

In the last few years, there has been an explosion of app-building tools focused on prototyping, design, development, and design-to-development workflow. There has also been a big shift towards interaction design for mobile, focused on the question of, “Why waste a bunch of time and money to get a product developed when you can produce something that “feels” real and get feedback on it with a prototype?”

These tools, and especially prototypes, are a wonderful addition to the designer/developer toolkit, but they just scratch the surface of what is possible to make our processes better. Developers still have to “start from scratch” to build the end product. When looked at this way, prototypes have enhanced the process and improved results, but they haven’t made things significantly more efficient.

For example, we spend a lot of time on prototypes to get user feedback, but they still don’t allow teams to use them as the basis for development.

One way to address this lingering challenge is to treat our designs themselves as part of the development workflow. “Rob, that’s a pretty heady statement, can you tell me what that means?” Sure!

If you think about it, designs have a lot of amazing information baked right into them, such as:

• Document structure & hierarchy
• How to draw all the shapes and vectors
• Typography
• All of the various styles you apply to each of your layers
• The layout of your design elements

Of course, the design needs more information to be able to generate working code. But once I had this “aha” moment (designs as code!), I knew that I had an approach to solve the design>development inefficiencies. In June 2015, I formed Qwikly with my best friend and our co-founder Mark Wise. We set out to build a tool that would allow design and development teams to leverage the rich information contained in their designs, and go directly from design>code without losing any design requirements or duplicating efforts.

Introducing Qwikly for Sketch-to-iOS

In May, we introduced the first public beta version of Qwikly for Sketch-to-iOS. Qwikly automates much of the repetitive work that occurs when teams move from design to development, saving both designers and developers a lot of time. Importantly, it also alleviates the need for those painful conversations when designs are not faithfully realized during the development process.

Here’s how it works: You download our Sketch plugin, start a new project or enable Qwikly for an existing design, add some interactions, and hit run to see Qwikly generate your code and show your app on the iOS simulator.

The designers and developers already using Qwikly beta (available for free here!) have been giving us great feedback.

“So you’re like a prototyping tool on steroids?”

Yup! Our goal is to have Qwikly fit right into your existing workflow. Either use Qwikly to replace your traditional prototyping solution, or use it after you prototype in another tool to generate a better starting point for your application. Since we are generating real code, Qwikly will be able to provide features and functionality not seen in traditional prototyping tools.

Download the beta for free on our website. You can pay for an upgrade when you are ready to get the generated code and hide the ‘Made with Qwikly’ splash screen. We’re working on a lot of new features, including adding rich support for more iOS components through the use of Qwikly’s Sketch symbols, but it can already save you countless hours by bootstrapping your iOS app development while doing things like this (and yes that’s a real project):

With our first product release, Sketch -> iOS is just the first step. Ultimately, we plan to support more design programs (like Photoshop), and more development platforms (like Android and React Native). While we’re still early on in Qwikly’s journey, it’s been awesome to see the vision we had back in 2015 come to fruition and to be receiving such great feedback from our users.

The Future: Blending the design + development processes

The design and development worlds are inching closer to each other. Every day I see a new article “Should designers learn how to code?”, and more developers are starting to use design tools like Sketch. Qwikly exists in between these worlds, with the goal of designing tools that make building apps easier, faster and hopefully more fun. We believe that when design and technology work better together, it results in better products and happier, more productive teams.

Download Qwikly beta here and tell us which features or platforms you’d like to see us support next. We’re building Qwikly for you — design and development teams everywhere — so I always want to hear from you.

Drop us a line in the comments or email me at [email protected].