← Back to Pixelay Video Tutorials

What this video covers

The video shows how to use the Pixelay Figma plugin and Pixelay Chrome extension to visually compare Figma frames against a live website, including sites behind a login. It also demonstrates updating uploaded designs, switching comparison views, and using pop-out windows for easier review.

Things you'll need

• Figma
• Pixelay Chrome extension

Steps

1. Open Figma Resources, search for Pixelay under the Plugins tab, and run or save the Pixelay Figma plugin.
2. Select the frames or artboards you want to compare and assign the correct base URL or page-specific URLs for each frame.
3. Click Compare Designs, then Upload Designs to send the frames from Figma and generate a comparison link.
4. Install the Pixelay Chrome extension with Add to Chrome and Add Extension if it is not already installed.
5. Open the generated Pixelay URL in a browser where you are already logged in to the target site, so the extension can overlay the uploaded designs on the live page.
6. Use the comparison views, including opacity adjustment, split screen, diff checker, design/build switching, and pop-out windows, to inspect differences.
7. After making changes in Figma, run Compare Designs again and use Update Designs to upload the revised frames and refresh the comparison link.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Installing the Pixelay Chrome Extension
• Next: Compare local website development builds
• Open Pixelay in the Figma Community