← Back to Pixelay Video Tutorials

What this video covers

This tutorial shows how to use the Pixelay Figma plugin to compare Figma designs against a local website build or a live URL. It covers installing the plugin, selecting frames, entering page URLs, generating a comparison link, and using Pixelay’s overlay and measurement tools to spot and fix differences.

Things you'll need

• Figma
• Pixelay

Steps

1. Install Pixelay from Figma Community by searching for “pixelay” under plugins and clicking Install.
2. Open your Figma file, right-click, then choose Plugins > Pixelay Development Comparison.
3. Enter the development URL, such as a localhost address, and select the frames you want to compare, including any frame-specific URL overrides.
4. Click Compare Designs, then open the generated link in your browser to load the selected Figma frames over the website build.
5. Use the toolbar modes to switch between Figma and the build, adjust transparent overlay opacity, compare in split screen, view blended diff overlays, or use draggable overlay to align browser chrome.
6. Use the pixel measurement tool to check spacing and alignment differences directly on screen.
7. Optionally change code in your local build, save, and watch the browser preview update immediately to verify the design match.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Comparing Figma designs with real website URLs in the browser
• Next: Compare Webflow builds
• Open Pixelay in the Figma Community