Once you've generated your URL in the Pixelay Figma plugin, you can open it in your web browser to start using the Pixelay web app. The web app is what lets you compare the designs you uploaded via the Figma plugin with the URLs of your website development build.
The web app works by loading each URL to compare as an iFrame, and overlays your Figma designs on top of them. The size of each uploaded image is used to set the width and height of each iFrame, which lets you test out "responsiveness" of your website build against their intended designs from Figma.
Install the Pixelay Chrome Extension. To enable comparing your designs with URLs via Pixelay, please install the Pixelay Chrome Plugin, which will run in the background and load up Pixelay when a URL from the plugin is detected in the browser.
Scrolling the page to view all of your frames
You can navigate the page completely via vertical and horizontal scrolling (either using your mousewheel or by clicking and dragging the scrollbars). Scrolling left and right will allow you to see all of the different frames you uploaded, and scrolling up and down will allow you to see all of the content for each of those frames.
If your Pixelay project has more than 20 Figma frames, to avoid your page slowing down by loading all the URLs at once to scroll through, the Chrome extension will automatically swap into only showing one frame at a time to compare; you can swap between them by choosing any of your Figma frames from the controls panel in the bottom right of the screen.
Toggling between the Figma design and website build modes
To quickly toggle between the original Figma design and your website build, you can click on the Original Figma Design and Live Website Build icon buttons in the Pixelay control panel.
Clicking each of these will toggle the selected mode, and allow you to see each one in isolation from the other mode.
Interacting with the live website previews. Toggling the overlay mode to Live Website Build will allow you to interact with the page. This can be useful if you need to use form fields or click anything that help bring your live website more visually in sync with the original Figma designs you're comparing.
Using the transparent overlay mode
To compare your Figma designs and website build using different levels of opacity, you can click the Transparent Overlay icon button to enable this comparison mode. This will activate the transparent overlay mode.
By clicking/holding and dragging the Overlay Opacity slider, you can specify the amount of transparency between the original design and the live URL.
Using the split screen overlay mode
To compare your Figma designs and website build using a split screen approach, you can click the Split Screen Overlay icon button to enable this comparison mode. This will activate the split screen overlay mode.
By clicking/holding and dragging the blue Split Line in the middle of each design, you can specify the amount of the original design and the live URL to be visual revealed at the same time.
Using the blend-diff overlay mode
To compare your Figma designs and website build using a blend-diff approach, you can click the Blend-Diff Overlay icon button to enable this comparison mode. This will activate the blend-diff overlay mode.
By clicking/holding and dragging the Overlay Opacity slider, you can specify the amount of transparency between the original design and the live URL.
Using the draggable overlay mode
To manually adjust the positioning of the overlay for all of your designs, you can click the Draggable Overlay icon button to enable this comparison mode. This will activate the draggable overlay overlay mode.
By clicking/holding and dragging the Overlay Opacity slider, you can specify the amount of transparency between the original design and the live URL.
Using the measure pixels ruler
To measure the distance between any elements on your page with a pixel ruler, you can click the Measure Pixels icon button to enable this measurement mode. This will activate the measure pixels mode.
While this mode is active, you can measure the pixel distance on the page by by clicking/holding and dragging your mouse cursor between any two points on the page.
By clicking/holding and dragging the Overlay Opacity slider, you can specify the amount of transparency between the original design and the live URL.
Toggling Between Environment URLs
If you've added any extra environment URLs via the Pixelay Figma plugin before uploading your designs to compare, you'll be able to toggle between these from the Change Environment Base URL dropdown selector in the Pixelay web app controls panel.
This will automatically swap the base URL for any frames in your Pixelay previews. For example, selecting https://dev.yoursite.com would change all https://www.yoursite.com URLs to have a base URL of dev.yoursite.com, including any page specific URLs (for example, a Figma frame set to have a page URL of https://www.yoursite.com/about would load https://dev.yoursite.com/about instead).
Using with a hot reload enabled development environment
If your local development URLs are running on an implmentation of Hot Module Replacement (HMR) you will see the frames in the Pixelay web app update automatically in real time (as they're pointing to your development URLs in iFrames) without needing to refresh the Pixelay web app URL itself.
Any changes that you make locally in your code editor will be reflected in the Pixelay web app when you save those files and HMR kicks-in to inject those changes to your URLs.