The latest articles on DEV Community by Benjamin B (@bblackwo). https://dev.to/bblackwo https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F40641%2Fc812b48c-8fd7-4b46-86c0-1bd58ff71076.jpg https://dev.to/bblackwo en Benjamin B Fri, 02 Aug 2019 07:00:24 +0000 https://dev.to/bblackwo/comparing-website-with-designs-using-figma-glueprint-4ahh https://dev.to/bblackwo/comparing-website-with-designs-using-figma-glueprint-4ahh <p>At Australia Post we use <a href="https://www.figma.com/features/">Figma</a> to create and share UI designs. In the past we used Sketch+Zeplin which has a really nice feature called <a href="https://support.zeplin.io/en/articles/1437093-comparing-app-website-with-designs-using-pop-out">"Pop Out"</a>. It allows you to overlay the designs on the running app/website to to easily see if the UI you're developing on matches the designs. Figma does not have this same feature (as far as I know).</p> <p>There is a workaround, however, to get similar functionality with Figma using <a href="http://glueprintapp.com/">GluePrint</a>.</p> <ol> <li><p>Export the design as a PNG (select frame then export as 1x PNG).</p></li> <li><p>Open the image in GluePrint. You can change the opacity from GluePrint by scrolling.</p></li> <li><p>Open your running app/website and GluePrint will be overlayed on top of it. You can then compare it with the designs to make it pixel perfect!</p></li> </ol> <h2> Example </h2> <p><a href="https://i.giphy.com/media/fqgrhd4447r8jbZ4H3/giphy.gif" class="article-body-image-wrapper"><img src="https://i.giphy.com/media/fqgrhd4447r8jbZ4H3/giphy.gif" alt="Example showing the steps above" width="480" height="270"></a></p> <p>It's not as convenient as Zeplin's Pop Out feature but it does the job.</p> <p>If you have any better ideas please let me know in the comments.</p> <h2> Found a typo? </h2> <p>If you've found a typo, a sentence that could be improved, or anything else that can be updated on this blog post, you can submit pull request to update the content directly at <a href="https://github.com/BBlackwo/my-dev.to/blob/master/blog-posts/figma-pop-out/figma-pop-out.md">the repository</a>.</p> design figma zeplin