DEV Community

Cover image for Comparing website with designs using Figma + GluePrint
Benjamin B
Benjamin B

Posted on

Comparing website with designs using Figma + GluePrint

At Australia Post we use Figma to create and share UI designs. In the past we used Sketch+Zeplin which has a really nice feature called "Pop Out". 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).

There is a workaround, however, to get similar functionality with Figma using GluePrint.

  1. Export the design as a PNG (select frame then export as 1x PNG).

  2. Open the image in GluePrint. You can change the opacity from GluePrint by scrolling.

  3. 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!

Example

Example showing the steps above

It's not as convenient as Zeplin's Pop Out feature but it does the job.

If you have any better ideas please let me know in the comments.

Found a typo?

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 the repository.

Top comments (0)