Flawless App aims to help developers work better with designers and fix visual issues on the fly by utilizing an iOS plugin with the ultimate goal of saving time and money. In short, it’s an overlay tool to check for visual differences.

As part of DesignOps there should be a core focus on your tools and how that ties into your team’s overall efficiency and processes. My current DesinOps team recently went through the exercise of figuring out which set of tools would best serve the design organization and how do we support that set. One change that we made was veering away from Zeplin and moving over to Google’s Material Gallery. However, there is one feature that was a nice-to-have that we lost. In Zeplin you can go to a specific screen, click on the overlay icon, and it will pop up another window that you can then place over your iOS simulator and then toggle the transparency from 0-100%.

Zeplin Overlay Feature
Zeplin overlay (after adjusting the overlay window to match the simulator size)

As we did research into how we would accomplish this with Gallery.io we learned two things:

  1. Flawless App is one of the few doing this well with an integrated simulator experience.
  2. The overall importance of overlay tools significantly goes down if your design system is up to speed.

We’ve been playing around with Flawless for the past few weeks, so let’s start with the good. You can’t beat the fact that it plugs directly into the iOS simulator. This blows Zeplin away with the ease of selecting different images or Sketch artboards and having them instantly display. There’s no more trying to line up another window on top of your simulator. You can switch between 3 different modes to help you compare. You can enable the sliding mode where it will run a split screen slider, there’s the transparency overlay mode to toggle from 0-100%, and then there’s the ability to just shut it off and interact directly with the app you have up.

Flawless Split Screen
Flawless split screen with Sketch artboards

To get things set up you simply launch your simulator, open Flawless, and then either drag and drop an image into Flawless or drag an entire Sketch file. Dragging in a Sketch file will give you quick access to select which artboard you want to view within the simulator.

Flawless Screen Comparison

At some point you may want to capture the visual differences you’re seeing, and I think they took a good approach to handling this. You can use their screenshot feature which actually spits out a gif where it toggles the opacity. No more side-by-side screenshots or calling someone over and flipping it back and forth for them!

Now for the bad. I was super excited to see that they had Sketch support. I would be able to quickly update my artboards, sync it through the cloud to our iOS devs, and have them just drop the file directly into Flawless. Unfortunately, this feature is still plagued with bugs. There are several elements that simply just don’t show up. I’ll have half of the design literally disappear and not show up within the simulator. The Flawless App support team has been very responsive and is currently trying to debug this, so hopefully we get some relief here soon.

Another part that is hard to ignore is the price. The current price is $49 per year per user. Zeplin’s overlay feature may not be a slick as the one Flawless has built, but their pricing starts at $0 and even hitting their growing business price you’ll only shell out $26 a month for unlimited users. This is also beside the fact that the overlay feature is just a very small subset of everything Zeplin offers. Flawless is a one-trick pony, but they do it well. I personally think that this should be a free feature that then leads to people purchasing their Flawless X automated functional tests for iOS, or at best $5-10 a year.

If you’re looking into iOS overlay options, then I would definitely at least take advantage of the Flawless App free trial and see what you think. You can learn more by visiting: https://flawlessapp.io.

Easy of Use
Previous articleGoogle’s Material Gallery
Next articleDoes Your Next Design System Get Easier?
Steven Meyer is a design leader at Keap where he oversees a team of product designers working to help small businesses succeed. Steven has history of leading large-scale efforts such as overseeing the creation of one of the largest design systems in the automotive industry. Steven’s experience has spanned through leading Marines, creating his own startup, working for a venture-backed startup, designing and developing at a Fortune 500 company, and more. Steven has worked for large brands such as O’Reilly Auto Parts, Pearson Education, and CDK Global. Steven holds an M.S. in Technology from ASU and a graduate certificate in Strategic Decision and Risk Management from Stanford University.