DEV Community

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

Posted on

3

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.

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay