Flawless App is an app built with a specific purpose in mind… To help you make the design of your app pixel perfect. In this short review we’ll go over the features of Flawless App and see what it can do for you.

Designers vs. Developers

Most developers are a bit OCD, but designers can be OCD too. I worked on projects where designers demanded absolute perfection, every single UI element had to be just right. They drove the developers crazy. We actually had to resort to tricks like having the design of the screen as a background image with an alpha, and having the UI overlaid on top of it. As soon as I saw Flawless App, I remembered this.

Flawless App is brilliant in its simplicity. It’s just a simple macOS app that sits in your menu bar. You use it to load up your design files, and it will overlay this design over your simulator. It’s really simple to use, and it certainly doesn’t require you to modify your code in order to compare your implementation to the original design.

Features

Obviously, the main feature of Flawless App is comparing the UI of your running app with the original design. It supports jpeg, gif, and png formats. It also supports sketch files, which is pretty cool. If you’re using sketch files and your designer used resizing constraints, Flawless App can load up different designs from the same sketch file depending on the device you’re running.

Another cool feature I liked is the animated screenshot. The app would save a gif file of the comparison between the implemented design and the original. I can see this being used as part of the pull requests, so your fellow developers can see that you implemented the design properly.

Test Run

After installing the app, you’ll see the Flawless App logo in the menu bar. All you have to do is drag&drop your design file on the icon. In my case it was a png file of the design:

As you can see from the screenshot, the UI is quite simple. You have three buttons at the bottom: split mode, overlay with alpha and a disable button. Clicking on the little camera button will export a gif of the design comparison in what ever mode you’re currently in.

This is how the split mode looks in action:

I like this mode the best 🙂 And you can really see how helpful it is, especially with the minute differences in the ‘About me’ section.

One other mode you can use is the overlay mode:

Now how cool is that. I wish I had this app a few years ago, it would have saved me a lot of time 🙂

Conclusion

This is a simple app that does its job really well. We all want our apps to look absolutely perfect and this app will help you get there. If you work for a demanding client, this app is an absolute must. I love how the guys at Flawless added sketch support, it just tells me they’re keeping up with the mobile design trends and that they mean business 🙂

It’s definitely worth a look, and it will save you loads of time. And one more thing, all our readers get a special 20% discount 🙂

Have a nice day 🙂
~D;

More resources

• flawlessapp.io
• Dynamic Design Generation
• 20% discount