Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Uploading designs to compare from Figma - Steps to select Figma parent frames, set URLs, upload designs, and manage Pixelay comparison links.. Machine-readable page: /pixelay/upload-designs.md.

Uploading designs to compare from Figma

Steps to select Figma parent frames, set URLs, upload designs, and manage Pixelay comparison links.

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 website build in the Pixelay web app.

Parent level Figma frames are 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 website 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 website build you can click on any frame's checkbox or image thumbnail to select it (clicking it again will deselect it).

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.

Entering your website URL ​

You can enter the default URL that you would like to compare your designs with by entering a valid URL into the 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.

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.

Ensure you're using SSL https:// URLs In order to load external iFrames in the Pixelay web app, please ensure your live websites and local development URLs are https://.

Adding page specific website 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.

Adding multiple environment website URLs (Optional) ​

If you have more than one website environement (eg. a dev site, staging site, production site), you can optionally add extra base URLs to your Pixelay comparison link, which will allow you to toggle between those environments from a dropdown selector in the Pixelay web app.

To add any additional URLs, click on the List icon button next to your main base URL in the plugin header, then add your new URL (eg. https://dev.yoursite.com or https://test.yoursite.com) and click the Add URL button to add it to your additional environments base URL list. These will be visible as a dropdown list in the Pixelay web app after re-uploading your designs from the Plugin.

To remove any environment URLs, select the URL from the dropdown list in the plugin and click on the Trash* icon button, which will remove it from your list. Please note that you'll need to re-upload your Pixelay designs from the plugin again to relect this change in the Pixelay web app for your current comparison link.

Generating your comparison URL ​

Once you've selected the Figma frames you would like to compare, and assigned them their website build URLs, you can click on the Compare Designs button in the Pixelay toolbar. 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.

Duplicating a Figma file will carry over the URL. If you duplicate your Figma file, the URL plugin data will also be carried across to the new file. If you need to duplicate your file and need a different URL for it than the original Figma file, you can do this by typing the Komami code (Up, Up, Down, Down, Left, Right, Left, Right, B, A) while the plugin window is open. This will generate a brand new Pixelay URL for your new duplicated Figma file. Please note, this will not delete the previous URL.

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.

Please note, to enable comparing your designs with URLs via Pixelay, please install the Pixelay Chrome Plugin, which is also linked to in the plugin's confirmation message.

Accessing your comparison URL from the plugin again ​

If you've already created your comparison URL using the plugin and want to copy the URL again (without re-uploading your designs), you can click on the Compare Designs button in the Pixelay toolbar, which will reveal your previously created comparison URL. To use the URLs again, 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.

Re-uploading your Figma designs to the comparison URL ​

If you've made some design updates or want to include/exclude some different Figma frames, or change any of the website/page links in your comparison URL, you can re-upload your selected designs to the comparison URL in the same way you originally uploaded your designs, by clicking on the Compare Designs button in the Pixelay toolbar, then this time clicking the Update Designs button.

Your comparison URL stays the same when re-uploading designs. Whenever you click the Update Designs button, it will replace any frames and website links that you had previously uploaded, and update the previously generated Pixelay comparison URL with your new designs and links.