Comparing Figma designs with real website URLs in the browser

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 allows you to 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 allows you to test out “responsiveness” of your website build against their intended designs from Figma.

​

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.

​

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 on each of these will toggle the selected mode, and allow you to see each one in isolation from the other mode.

​

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.

​

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.