Flawless App is a simple tool, which compares expected design with the actual mobile app in a real-time. This helps mobile developers to spot visual bugs before they go to production. And designers can be happy with pixel-perfect implementation of their designs :)
I'm happy to know your thoughts on our tool!
What is the process of comparison? Is FlawlessApp a plugin for Xcode?
Flawless App is a plugin for iOS simulator, which exists inside Xcode. Flawless App put the initial design on the top of developer's implementation right on the iOS simulator. So the developer can spot any visual differences and fix them on fly.
Framer released Glue Print a while back that does something similar. I've been using it w/ my Eng teams and it's great.
It will be cool if you try Flawless App and tell us your thoughts on our tool. Flawless App is integrated right into dev workflow, so it will speed up your engineering team. Also, you can use our tool in 2 comparison modes: split & overlay and compare design mocks landscape mode :)
Is there anything like this for web?
On Zeplin you have the “Pop Screen Out” feature. It opens a window with your design that you can overlay on top of the web implementation. Here's a video where I compare my design from Zeplin with the implementation on the web... as you will see the implementation is still a WIP, lol
Amazing. I had no idea this feature existed in in Zeplin.
For deeper inspection, you can try Visual inspector here - https://www.canvasflip.com/visual-inspector
News to me thanks Pablo! I need to catch up on all your videos.
Why would you want it for the web? Different rendering engines in browsers can mean different sizing in text etc meaning layout could look different across platforms.
A lot of reasons why designs are different from when they are implemented into development is because most designers don't quite understand how development works and what goes into making their designs pixel perfect
true point! With tools, like Flawless App we can make this gap a bit smaller :)
Been using this for check my designs on the iPhone X. Really neat that it works perfectly with Sketch files, and auto-detects all my Artboards. Love the switch and compare mechanism.
wow! Happy, that you liked Flawless App!
This tool seems terrible. I feel bad for every developer out there.
why? Could you please give us more constructive feedback :) We have a lot of happy developers, who use Flawless App daily. It saves many hours on the visual quality check and reduced back & forth communication in the teams.
We invested 2.5 years to build Flawless App and happy to improve it based on your feedback. Thanks!
^ Lisa, founder
In my opinion (and its only an opionin, not fact) is that these tools tend to be very rigid in what is a "completed design". These types of tools tend to advent for pixel-perfection which negates the flexibility of platforms the files (pictures really) are meant to represent.
EX: Just because a button is 5px lower than what Sketch outlined doesn't mean its wrong.
Even more so, I'd possibly "argue" and say that tools like PSD and Sketch are incompatible for designs since they are not usually capability of accounting for real world variants that some browsers create.
This is for mobile application development, so the browser isn’t really applicable.
Sketch is incompatible for designs? Unfortunately the entire design industry is using the tools you suggest aren’t for design.
“Just because a button is 5px lower than what a Sketch outlines doesn’t mean its wrong” — in some cases it is. That developers take these decisions into their own hands is how a lot of designs get butchered up (hence this entire, useful product) If you have bad designers that’s one thing, but this sort of thinking/behavior erodes trust between design and development.
This tool is great IMO. Most developers don’t (often) pay attention to these small details and just “eyeball” it, negating the detail work some designers put in.
Lisa, I’ve shared it with a handful of developers. This is absolutely worth your effort. Will save hundreds of hours over the lifecycle of a product.
Browser, device. All the same. Design tools output in one medium whereas the actual app, site, experience is output in many.
Sketch is incredible incompatible for designs. More than happy to walk you through where it tends to shit the bed (hint anything related to fonts/vertical spacing).
I don't believe its one person's responsibility solely to own the "design". I've written on this topic before and I try to rely on teams owning the output while individuals/groups (design team, etc) own the tools (sketch, psd). However, I'd be more than happy to point out lack on consistency in spacing, font-sizing, color usage, left over values, etc in design files. All things considered, imagine a dev getting a design file (for whichever medium) and values are constantly off by 2-4px but with no real rhyme or reason. That is usually where I've found devs (the ones I'm around) make "exec decisions" to normalize those values.
Relying on a picture to communicate minor nuances is never a safe bet. And expecting a tool that creates "perfect" designs to actually be a valid representation of an ever-changing medium (devices, browsers) will fail every time.
Reminds me of the days I would load the design as a background image and simply build the website on top of it. With responsive design that all came to an end but most designers used to the old ways still don't understand how their designs can't work in the real world anymore.
A better solution is to work with design systems and UI kits. Create a consistent easy to understand design system and any good engineer can perfectly recreate your designs.