← Back to Pixelay Video Tutorials

What this video covers

This video shows how to compare Figma designs against a Webflow build using the Pixelay Figma plugin. Because Webflow URLs cannot be embedded directly in Pixelay, it also demonstrates exporting the Webflow code and serving it locally with BrowserSync so the build can be compared at a localhost URL.

Things you'll need

• A Figma file with the designs to compare
• A paid Webflow plan to export code
• Node.js and BrowserSync for running a local server

Steps

1. Install the Pixelay Development Comparison plugin from Figma Community and open it from Plugins.
2. Select the Figma frames you want to compare, enter a URL for the build, and click Compare to designs to generate a Pixelay comparison link.
3. If the Webflow URL does not load in Pixelay, export the Webflow project code as a zip using Webflow's Export Code and Prepare Zip options.
4. Unzip the exported files, open them in Visual Studio Code, and start a local BrowserSync server after installing Node.js and BrowserSync.
5. Copy the localhost URL from BrowserSync, reopen Pixelay in Figma, replace the old URL with the local URL, and run Compare Designs again.
6. Open the new Pixelay link in the browser and use split screen, contrast diff, overlay mode, opacity, or the pixel measuring tool to spot and fix design differences.
7. Adjust the local HTML/CSS as needed until the Webflow build matches the Figma design, then reuse the Pixelay link as needed.

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 local website development builds
• Open Pixelay in the Figma Community