If you’re reading this article it most likely you’re a UI designer. Nice to meet you! I’m Ahmed, founder of Flawless App and I’d love to tell how my tool can be useful in your design process.

I’m a mobile developer and a designer. So I’ve been on both side of the table and struggled from poorly implemented mobile apps. That’s why we made Flawless App.

From the first glance, Flawless App is a tool for iOS developers mostly. It helps to deliver polished mobile apps by comparing expected design with actual implementation right inside iOS simulator. Indeed, this allows iOS developers to spot and fix visual issues even before a design review occurs. Nevertheless, last month our team released a set of critical features, that are especially valuable for designers and eventually for a whole product-team. So let’s dive in and explore those features which will make you a better designer.

Animated screenshot capture

As a good UI designer, you have to care how well your design is implemented by the developer. If you don’t care what’s going on with your design after you finished it — you’re obviously doing something wrong! UI designers aren’t just “rectangles-drawers”. I truly believe, UI designers are the ones who create a visual language for the product. And more importantly UI designers are responsible to keep this visual language consistent.

And here comes our animated screenshot capture feature. With Flawless App the developer can automatically capture an animated GIF of design and implementation comparison right inside iOS simulator.

The developer just needs to select a design file, choose appropriate comparison mode (Split or Overlay) and press a capture button. This will create a GIF file with comparison right on your Desktop. Because it’s a GIF file it can be shared to whatever service your team uses. This way design reviews would take much less time and pain.

Thanks to our users’ feedback we learned a bunch of useful use-cases for this particular feature like:

• Attach the GIF of comparison to pull requests in version-control-system (Github/Gitlab/Bitbucket). This way the team responsible for code review could also do a design review in a same place.
• Attach the GIF of comparison to a specific task in JIRA/Basecamp/Asana/etc. So the designer can close the task and check design implementation quality.
• Share the comparison with QAs. So they won’t need to check design manually again, instead, they will explore GIFs with comparison and that would be enough to prove the design quality.

Dynamic design generation

Starting from Sketch version 44 Bohemian Coding has introduced resizing constraints. With this extremely powerful feature, a designer can specify the resizing rules for different screen sizes right inside the graphical editor. This is crucial for building truly responsible layouts.

Unfortunately, the developers don’t have such privilege to see how the design would behave on different screen sizes while they implement it. In most cases, the developer has to guess the resizing rules based on common sense. And if there are any difficulties — the designer is the one who should help.

It doesn’t even matter how exactly you share the design with the developer. With current tools, the design becomes a static image at the end. So the developer can’t just resize it and see what happen with elements on different screens.

With Flawless App this is no longer the case. With dynamic design generation, the developer could see how the design would look like on any possible screen size. Therefore it’s much easier to understand the behaviour of the design and to implement it properly and fast. Moreover, with Xcode 9 the developer can launch multiple simulator devices (iPhone 5, iPhone 8, iPad etc.) and examine a single design on all devices at the same time!

All you have to do is to specify resizing constraints for appropriate layers for selected artboard and turn on “Adjust content on resize” option in Sketch. Then send “.sketch” file to the developer. Done.

Our tool will automatically generate a correct design for any selected iOS simulator (iPhone 5, iPhone X, iPad, etc.). The developer doesn’t even need a Sketch installed to see how the design would look like on different screens. This is extremely important because not all developers have Sketch on their machines.

Check motion and animation

Motion and animation are playing a crucial role in the user interface. Even subtle motion in UI can dramatically change how the user interacts with an application. Let’s face it: a correct implementation of animations is vital for smooth user experience. As a UI designer, it’s your responsibility to prepare animations properly so the developer could easily implement it with the code.

That’s why we have introduced an ability to check implementation not just with static images, but with GIF files as well. Just export your animation from whatever tool you use (Principle/Flinto/After Effect/etc.) as a GIF and share it with the developer.

Flawless App will figure out, that the design is in GIF format and play it appropriately with the ability to pause/play an animation. This is the first step to a better animation implementation. And we’re aiming to do much more steps in this direction in the future releases.

Conclusion

Even though Flawless App was designed for iOS developers, I hope now you see that using it would benefit the whole product team. Together with our users and valuable feedback they provide, we’re pushing our product boundaries forward. We believe the visual quality is extremely important if you’re building a matured product and care about your users. Consistent design implementation shouldn’t be a pain in the back.

Feel free to leave comments below and share our tool with iOS developers. I’d really love to know feedback on Flawless App and how well it could fit your design process.