Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Compare live website builds - 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.. Machine-readable page: /pixelay/tutorials/compare-live-website-builds.md.

Compare live website builds

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.

← 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