← Back to Pixelay Video Tutorials

What this video covers

This tutorial shows how to use the Pixelay Figma plugin to compare Figma frames with a live website URL. It covers installing the plugin and browser extension, uploading designs to a Pixelay URL, and using comparison modes like opacity, split view, diff, and measurement for QA.

Things you'll need

• Figma
• Pixelay browser extension

Steps

1. Install Pixelay from the Figma Community Plugins tab.
2. Open your Figma file, then right-click and go to Plugins > Pixelay.
3. Paste the live website URL into the plugin, and override the URL per frame if needed.
4. Select the frames to compare and click Compare Designs, then Upload Designs to create a Pixelay URL.
5. Install the Pixelay browser extension from the Chrome store if you want to compare live website URLs.
6. Open the Pixelay web app URL in your browser to view the uploaded Figma designs alongside the live site.
7. Use opacity, split screen, diff mode, overlay offset, measurement, and frame navigation to inspect differences.

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 websites behind a login with Figma designs
• Open Pixelay in the Figma Community