# Using Pixelay

# Preparing designs in the Figma plugin

Pixelay works by uploading images of your top level parent frames from the current Figma page via the Pixelay Figma plugin, and overlaying them with the URLs of their pages in your web development builds in the Pixelay web app.

Parent frames required

To compare your designs, your Figma page must contain at least one "Parent Frame". This means, any "frames" that are located directly underneath your page.

# Selecting Figma frames to compare

To get started, you'll need to select the frames from your Figma design that you would like to compare with URLs in your web development build.

Pixelay will load all of your "parent frames" into the plugin as a list of designs that you can use to compare with your web development build; you can click on any frame's checkbox or image thumbnail to select it (clicking it again will deselect it).

# Entering your local development URL

You can enter the default URL that you would like to compare your designs with by entering a valid URL into the Development URL input field in the Pixelay toolbar. This URL will be used as the default page that will be loaded to compare you selected designs against.

Pixelay is designed to work with local development URLs

Please ensure you're using local development URLs (eg. localhost) or staging site URLs which do not have any X-Frame-Options or a Content-Security-Policy set on your server that will prevent your URLs being loaded as iFrames inside the Pixelay web app.

# Adding page specific local development URLs

If you're comparing multiple frames at the same time, you can specify a URL per frame to compare. For example, if you're comparing an "About" page design, you might put it a URL like https://yoursite.com/about/. This specific URL will override the default URL in the Pixelay toolbar.

Pixelay is designed to work with local development URLs

Please ensure you're using local development URLs (eg. localhost) or staging site URLs which do not have any X-Frame-Options or a Content-Security-Policy set on your server that will prevent your URLs being loaded as iFrames inside the Pixelay web app.

# Highlighting Figma parent frames to select them

To make it easier to select the Figma parent frames that you want to compare, clicking or highlighting any frame(s) on your Figma page will automatically filter them down in the available frames list in the Pixelay plugin.

# Refreshing Figma parent frames

If the Pixelay plugin is already running and you need to add or remove any parent frames on your current Figma page, you can make those updates as needed and then click on the Refresh icon button in the Pixelay plugin toolbar.

# Generating your comparison URL

Once you've selected the Figma frames you would like to compare, and assigned them their web development build URLs, you can click on the Compare Designs button in the Pixelay toolbar. This will show you a small note to mention that Pixelay is not designed to work with "production URLs".

You can then click the Upload Designs to Compare button to confirm and start the upload. This will upload images of the Figma frames you've selected and generate a URL that will take you to the Pixelay web app.

# Opening your comparison URL

After all of your frames have been uploaded, you'll see a confirmation message that will let you know the comparison page URL is ready to use. You can either click on the Copy icon button to copy the URL and paste it into your web browser (or share it with someone else), or simply click on the open the link link in the confirmation message. This will open up the Pixelay web app in your browser and let you begin comparing your Figma designs and website development URLs.

# Comparing designs in the web app

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 web development builds against their intended designs from Figma.

Pixelay is designed to work with local development

Please ensure you're using local development URLs (eg. localhost) or staging site URLs which do not have any X-Frame-Options or a Content-Security-Policy set on your server that will prevent your URLs being loaded as iFrames inside the Pixelay web app.

# 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 Web Development 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 web development builds 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 web development builds 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 web development builds 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.