Flawless: Visual Quality Check Right Inside iOS Simulator

Got iOS apps? Flawless helps you make them look great on every device

Right about now, thousands of iOS app developers are looking at the new iPhone lineup and scratching their heads. Between the smaller iPhone SE, the “standard” 4.7-inch iPhones and 5.5-inch Plus models, and the brand-new iPhone X with its 5.8-inch screen with a notch at the top, developers sure have their work cut out for them making sure their app designs look good across all those devices. Not to mention the iPads too!

Flawless, a recent edition to Setapp, is the answer. This developer tool helps you compare your design mockups against what’s actually output by your code, so you can see exactly which elements are off, and by how much. It’s the perfect solution for perfectionists who want to get everything pixel-perfect.

How Flawless works

Flawless works with the iOS simulator, which developers use to test their iOS apps on a Mac. The simulator can mimic any iOS device made by Apple (all the iPad, iPhone, and iPod touch models), and your code runs inside it so you can test out your apps on your Mac, and save on-device testing for later.

What you can do with Flawless?

• Share animated designs. You can create and quickly share animated screenshots of your designs with your teammates. GIFs are created right in the simulator with the native functionality, no need to employ other apps. The GIFs you create with Flawless can be paused and resumed to view each step separately and stop the animation when needed
• Use Zeplin with Flawless. If you’re using Zeplin to track and implement your designs, now you can integrate Flawless into this process because it supports Zeplin files. And, you can add them to the app by the simplest drag & drop move.
• Visual quality check right in simulator. Flawless app itself follows your simulator. When it’s upfront, the app is right at hand as well. It also disappears once you switch to another window and the simulator is out of focus.
• No need to resize items manually. Flawless reads the resizing rules from your Sketch files, automatically defines the device you’re running your simulator on right now and resizes appropriately.

When you run Flawless, you’re asked to specify an image file to use for the comparison. This is the mockup you created of what you want your app to look like. Flawless accepts images in Sketch format, as well as JPG, JPEG, GIF, TIFF, and PNG.

Once you choose your image, Flawless will overlay it against what’s showing in the iOS simulator. There are three view options:

1. Overlay. You can choose to have the images overlaid one on top of the other, and then use the slider below to adjust the opacity. If the slider is on 0%, you’re seeing only your app. At 100%, you’re seeing only your design mockup. Move the slider to 50% to see both together, which can help you notice if a button is out of alignment, text has changed size, the colors look right, and so on.

2. Slider. If you choose slider view, Flawless splits the screen in the iOS simulator between your code, and your image. A big slider appears in the middle, and you can slide it back and forth to compare one image to the other.

3. Hidden. If you need to interact with your app running in the simulator, you can click the Hide button to make your mockup image temporarily disappear.

Pixel-perfect design sounds impossible, doesn’t it? It really doesn’t have to be. The developers of Flawless are, well, developers, and they’ve taken great care to make Flawless useful without adding extra work for you. It installs easily as a plugin to the iOS simulator, so there are no libraries to download or manage. And many prominent developers use Flawless and contributed feedback and testing, including engineers from Microsoft, Buffer, and MacPaw.

iOS 11 comes out next week. New iPhones are right behind it, and the iPad comes in four sizes now too. If you’re an app developer, you’ll probably be spending a lot of time with the iOS simulator in the near future, and Flawless can help make you more productive, finding visual bugs before you ship. We’re thrilled to welcome Flawless to the Setapp family.