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.
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.
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:
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.
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.
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.