<p>Published on <a href="https://blog.prototypr.io/stop-playing-fix-it-ping-pong-with-your-developer-3aa80acb04e9?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Ahmed Sulaiman <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kG4Bv1oWhF4TDTeeTxu1FQ.png"></p>
<h4><em>Introducing Flawless App</em></h4>
<p>You’ve made the perfect app design for an iPhone app. <br />Your Sketch artboards meet all user pain points and solve the user problem smoothly, your animations are functional yet beautiful, and your UX tweaks and prototypes make users smile.</p>
<p>That’s what you passed over to your developer anyway… But it’s not what’s experienced after coding! Wrong margins, colors, text sizes and other silly visual mistakes make you think that <em>someone</em> doesn’t have eyes… Sometimes it feels as though the precise implementation of your pixel-perfect design can only exist in fairytales.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8jmqaMboxOwto0TgFStioA.gif"></p>
<p>Having been both a developer <em>and</em> designer in my career, I’ve sat on both sides of the table and experienced this “implementation mystery” one too many times.</p>
<p>So much so, that it lead me to build my own solution to this ever present collaboration dilemma. Along with my team, we created Flawless App to help designers and developers <em>work together</em> <em>better,</em> and achieve the intended experience without playing ‘fix-it’ ping-pong. You can even grab yourself a free full license:</p>
<pre>🎁❤️We’re giving away <strong>5 free licenses</strong> to Flawless App! Simply share this article with the <strong>#FlawlessAppLove</strong> hashtag on Twitter or Facebook, and the 5 readers with the most likes &amp; shares will get a free license. Pretty simple!</pre>
<h3>What is Flawless App?</h3>
<p><a href="https://flawlessapp.io/?prototypr">Flawless App</a> enables you to compare your app design mockups side-by-side with a developer’s coded implementation, in a real-time. It’s specifically for iOS, so works right alongside the iPhone Simulator, allowing developers to easily spot and fix visual issues:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*c5cUrdJBlFraSLIcMpnEvA.gif">Flawless App live comparison: design vs real app</p>
<p>Whenever you make updates to your design, just send over the latest versions, and your developer friend can start working from them — a picture is worth a thousand words!</p>
<p>Aside from the ‘<em>design-to-real app comparison’</em>, the rest of this article will show you how to use Flawless to improve productivity and collaboration between design and development.</p>
<p>Let’s dive in!</p>
<h3>📸 Use Animated Screenshots</h3>
<p>Obviously, you care how well developers implement your design. Nowadays, UI designers aren’t just “rectangles-drawers” or “artists”. Designers create a visual language for the product, and build entire relationships with users. If the final product is to work as intended, it needs to look just like the designs we made. Making design reviews therefore becomes part of the job.</p>
<blockquote><p><em>If the final product is to work as intended, it also needs to look exactly like the designs we made.</em></p></blockquote>
<p>To speed up design reviews with developers, using <a href="https://flawlessapp.io/?prototypr">Flawless</a>’s ‘Animated Screenshot’ feature, developers can automatically capture animated GIFs of the expected design along with the real outcome. Check it out here👇</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Ffl8mwBcTAy8%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dfl8mwBcTAy8&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Ffl8mwBcTAy8%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/14666c6d61d15ad3207e800592fa9696/href">https://medium.com/media/14666c6d61d15ad3207e800592fa9696/href</a></iframe></p>
<h4>How Animated Screenshots Works:</h4>
<ul>
<li>The developer selects a design file, chooses the appropriate comparison mode (Split or Overlay) and simply presses the capture button.</li>
<li>This records a GIF file with the comparison, right on your desktop.</li>
</ul>
<p>Since the output is a GIF, it can also be shared with whichever service your team uses, saving time and pain in design reviews. You’ll be able to see every visual difference in just moments!</p>
<h4>Tips:</h4>
<p>If you’d love to make your team’s workflow smoother, advise your developers to:</p>
<ul>
<li><strong>💬 Send the GIF via Slack</strong>. Now everyone will be on the same page of project implementation. If there is a visual bug, you will have a chance to spot it quickly.</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/566/1*bURISX-24amD8HdMG8jttg.png"></p>
<ul>
<li>🖥 <strong>Attach the GIF to pull requests</strong> in version-control-systems (Github/Gitlab/Bitbucket). This way someone responsible for the code review can carry out a design review in the very same place.</li>
<li>🎟 <strong>Attach to JIRA/Basecamp/Asana tasks</strong>. Team leads can then close the task and check design implementation quality right away.</li>
<li><strong>🤗 Share the comparison during QAs</strong>. 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.</li>
</ul>
<h3>🖥📱Let Flawless App handle different screen sizes</h3>
<p>We all love Sketch and its new cool features. For instance, starting from Sketch 44, you can use resizing constraints. With this extremely powerful feature, you’re able to specify the resizing rules for different screen sizes right inside Sketch — a crucial feature for building truly responsible layouts! But what about your developers?</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*EVF7iCGLx12Q5bNnkB1w8Q.png"></p>
<p>Unfortunately, developers don’t have such a privilege to see how a design behaves on different screen sizes whilst they implement the design. In most cases, a developer has to guess resizing rules based on common sense. And such design resizing “by developer” can be a bit weird…👀</p>
<p>Moreover, it doesn’t matter <em>how</em> you share your designs with developers. The reality is: the design becomes a static image in the end — the developer can’t just resize it and see what happens with elements on an iPhone 4 or iPhone X!</p>
<blockquote><p>Developers can launch multiple simulator devices (iPhone 5, iPhone 8, iPad etc.) and examine a single design on all devices at the same time!</p></blockquote>
<h4>Solving the resizing problem</h4>
<p>With Flawless App, resizing is no longer the problem. The tool uses resizing constraints and generates those design layouts dynamically! The developer can now see how one design would look on any possible screen size. It becomes much easier to understand the behaviour of the design and implement it properly in this way.</p>
<p>In Xcode 9, the developer can even simultaneously launch multiple simulator devices (iPhone 5, iPhone 8, iPad etc.) and examine a single design on all devices at the same time!</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FV4ocRgC8Iuo%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DV4ocRgC8Iuo&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FV4ocRgC8Iuo%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/1af31ee05b14a90d69a3a1eba7e0f0f6/href">https://medium.com/media/1af31ee05b14a90d69a3a1eba7e0f0f6/href</a></iframe></p>
<h4>How resizing it works:</h4>
<p>Here’s how to best make use of Flawless App’s resizing feature:</p>
<ul>
<li>Specify resizing constraints for appropriate layers at selected artboard</li>
<li>Turn on the artboard option “Adjust content on resize” in Sketch.</li>
<li>Then send “.sketch” file to the developer. Done.</li>
</ul>
<p>💫 <a href="https://flawlessapp.io/?prototypr">Flawless App </a>will automatically generate a correct design for any selected iOS simulator (iPhone 5, iPhone X, iPad, etc.). Developers don’t even need Sketch installed to see how the design would look like on different screens.</p>
<h3>😍 Create precise motion and animation</h3>
<p>Motion and animation play a crucial role in the user interface. Even subtle motion in the UI can dramatically change how the user interacts with an app. Obviously, correctly made animations are vital for smooth user experiences.</p>
<p>As UI designers, it’s our responsibility to prepare animations properly so that developers can easily implement them with code. And developers should make the implementation accurately, but how can they do this just from the output of our favourite prototyping tools?</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*C1DCHD_a6GGCww1n0j7GXQ.png">Flinto, Principle and Kite</p>
<blockquote><p>This is the first step to better animation implementation.</p></blockquote>
<p>To make the job easier, we introduced the ability to compare the implementation with not just with static images, but 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 — nothing extra is needed any more. Here’s how the motion comparison works:</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F_P0owQ7uxwE%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D_P0owQ7uxwE&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F_P0owQ7uxwE%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="https://medium.com/media/47a53aa4555af76b0dcb905aecb1ebfb/href">https://medium.com/media/47a53aa4555af76b0dcb905aecb1ebfb/href</a></iframe></p>
<h4>How does this work?</h4>
<p>Flawless App figures out that the design is in GIF format, and plays it appropriately with the ability to pause/play an animation. This is the first step to better animation implementation. And we’re aiming to make many more steps in this direction with future releases.</p>
<h3>🎁 Win Flawless App for free</h3>
<p>Flawless App is designed to be used predominantly in the hands of iOS developers, but I hope you can see how using it benefits the whole product team. We believe visual quality is extremely important when building mature products and caring about your users. Accurate and fast design implementation shouldn’t be a pain in the back.</p>
<p>And as a bonus for your desire to make perfect products,<strong> we are happy to give FIVE </strong><a href="https://flawlessapp.io/?prototypr"><strong>Flawless App </strong></a><strong>licenses for free to all Prototypr readers. </strong>Simply share this article with #FlawlessAppLove hashtag on Twitter or Facebook. Five readers with the most likes &amp; shares will get a free license. Pretty simple!</p>
<p><em>The winners will be announced on 24th of April. <br />Good luck and let’s make world full of beautiful mobile apps, together!</em></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/400/1*rTH1NzcuZWg4Jxtpxua3Cw.gif"><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=3aa80acb04e9" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/stop-playing-fix-it-ping-pong-with-your-developer-3aa80acb04e9">Stop Playing “Fix-It” Ping-Pong with Your Developer.</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Stop Playing “Fix-It” Ping-Pong with Your Developer.

Introducing Flawless App

Top Stories