Behind the scenes: How we built the new iPhone app — now powered by Workspaces

Good design is timeless, and so are the best design tools. That’s why we’ve been rebuilding core aspects of Sketch for the past few years — optimizing our tech stack and building our products for the new era — including features like Workspaces and real-time collaboration.

But there’s been one product that has been in need of some tender loving care for a while — our iPhone app. Today, we want to show you how we reimagined our app and the building blocks that made it possible.

Let’s peek behind the wizard’s diamond curtain.

What’s this new Sketch iPhone app?

If we had to summarize the new iPhone app in one phrase, it’d be “Sketch on the go”. The app is no longer just for mirroring. Instead, it’s a simplified and accessible version of Sketch that you can take anywhere, whether it’s right before a meeting, while in line at the grocery store or whenever the need strikes.

As our co-founder and co-CEO Pieter Omvlee describes it, “Changes aren’t mirrored from Mac to iPhone, but rather the iPhone is a full participant in the collaborative editing engine.”

Now, let’s take a look at how we made this work.

The road to iPhone app

In every way, the iPhone app is another window into Sketch. To make this possible, we carried over our rendering and collaboration engines to iOS so that the app could work its magic right on your device.

But how does this differ from the app we had before? Back when Sketch was just for local documents, the only way you could see your work in the context of a real device was if you established a peer-to-peer connection for sending rendered images from your Mac to your phone. It got the job done, but its performance wasn’t the best and it depended heavily on the stability of your connection — which was extra challenging for people using limited corporate networks.

Now, with the advent of Workspaces and real-time collaboration, new possibilities began to take shape. “We asked ourselves, what if Mirror could just open an online Sketch document and receive live updates from our collaboration engine?” says Pieter. And that’s essentially what this new app is — a native viewer that lets you see changes in real-time.

Collaborative design at its finest

Bringing the iPhone app to life, as with everything in Sketch, was a cross-team effort. Designers, developers, product managers, and writers all came together to create what is now the new iOS experience. We also invited the whole company to dogfood the app, which not only helped us build a better product but also to start working on improvements.

“We decided early on that we wanted to build the app mostly using default iOS system components, which meant I had to familiarize myself with Apple’s Human Interface Guidelines as much as possible,” recalls Product Design Lead Janik Baumgartner. “That also meant that, even in the earlier design stages, I was already in constant communication with our developers, asking them how we could achieve what we needed with as little custom UI as possible.”

“By taking our designers’ vision and trying to ground that in what was possible with SwiftUI, we ended up taking the right shortcuts and arriving at a great product faster.”

Designer 🤝 Developer communication

Our designers and developers spent most of the project jumping on quick huddles to offer feedback on how the UI was shaping up, which helped them find better solutions in record time. But that doesn’t mean there weren’t any challenges. Though we were working with the same technology as our Mac app, a mobile app needs to work in a much smaller space and account for touchscreens.

According to Mac developer Jorge Pedroso, “Though we faced some limitations with SwiftUI, it made us prioritize the simplicity and effectiveness we were going for with the app’s design. By taking our designers’ vision and trying to ground that in what was possible with SwiftUI, we ended up taking the right shortcuts and arriving at a great product faster.”

And Philipp Seibel, another one of our great Mac developers, agrees: “The key here was that we didn’t have a single idea or solution in mind. By handing out internal releases to our own designers from the beginning, we were able to iterate and improve fast until we found the most intuitive way to view Sketch documents on iOS.”

“By handing out internal releases to our own designers from the beginning, we were able to iterate and improve fast until we found the most intuitive way to view Sketch documents on iOS.”

Creating a Sketch experience fit for the small screen

“I can still remember seeing our first documents rendering with our engine on an iOS device and knowing we had reached an important milestone,” remembers Philipp. “We were able to get most of our tech stack running on iOS in just a few weeks. That gave us the opportunity to focus more on the new platform itself and how those technologies could be best made accessible on a mobile device.”

For example, with our rendering engine running on iOS, we were able to build different prototypes of a document viewer to see which UI designs worked best.

“It was cool to work with Xcode and Sketch. I like to think of Sketch as an IDE that’s not just for designers but for the whole team since you can easily collaborate, make changes while prototyping, and then see those changes in action,” shared Mac developer Luigi Parpinel. “We decided to go with SwiftUI, even if it’s still rough around the edges, because it gives us a modern and future-proof codebase that we’ll be able to maintain and iterate on in a fast and reliable way.”

But what our developers enjoyed most about building the iPhone app was being able to work closely with multiple teams across Sketch.

The state of Sketch

For our Product Manager Paulo Pereira, the most fascinating and rewarding aspect of working on the iPhone app is how it would’ve been a near impossible feat just a couple of years ago.

“Our small team was able to build the app in a few months because we had the important engineering foundations already in place. Over recent years, a lot of people have developed our document model and native rendering engine, the backend infrastructure and Workspaces, real-time collaboration, and a shared prototype player,” shares Paulo. “So this isn’t the same Sketch of just a few years ago — we’re now in a position to build products and features that we simply couldn’t before. And we’re not staying put either.”

The iPhone app is another testament to everything we can now build with Sketch thanks to our growing team’s hard work. The last few years have brought you big updates — including Workspaces, real-time collaboration and improved prototyping — and now you can see how these all work together to improve Sketch as a whole. We’re so excited to share what’s next — as Paulo said, we’re just getting started.