Pixelay not loading on URLs (Chrome Extension is required)
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.
Next.js (Vercel) app not loading
If you're trying to compare a Next.js app via Pixelay, this can sometimes give an "Application error: a client-side exception has occurred" message and not load the page. If this happens, you can try using the non-Chrome extension based link below and insert your Pixelay ID: https://pixelay.hypermatic.com/YOUR_PIXELAY_PROJECT_ID_HERE (for example, https://pixelay.hypermatic.com/n4ok457201973)
URL expiration
Your secure links and images will automatically be removed after a 180 day period of inactivity (180 days after the link was last accessed and viewed) to ensure they are not accidentally laying around after they've served their purpose.
Thin white line around image exports
Occasionally some images will contain a faint, thin white line around the edges. Figma does this if a layer isn't positioned on a rounded pixel value (for example, Y: 156.76 or X: 56.3) will automatically result in this sub-pixel line getting included in the export. To resolve the issue, please ensure that your layer positions are all rounded pixel values.
Websites using 'vh' CSS units
If your website CSS uses "vh" units for any elements, Note that these may appear much taller than they normally would at a reasonable browser height due to Pixelay setting the viewport height to be the same as your full Figma mockup.
Create a brand new URL for your Figma file
Due to it being a fairly sensitive feature, instead of adding a button/icon to click, we've made this feature activate only by entering the "Konami Code" on your keyboard while the plugin is running:
Up, Up, Down, Down, Left, Right, Left, Right, B, A
Typing that sequence of keys on your keyboard will trigger the Pixelay plugin to create a brand new URL for your Figma file, so you could enter it in a duplicated Figma file to give it a different brand new URL than the original one.
Pixelated image exports
If you're uploading your designs while the image assets in Figma are still progressively loading, they may be exported looking pixelated, as the image wasn't fully loaded in the Figma file before it was exported. To resolve this, please ensure that all of the images have loaded 100% and are looking sharp inside the Figma file before uploading your images with the Pixelay plugin.
To help further with solving this issue, you can use the "Downsizer" feature to shrink down your image fills to match their layer size, which will shrink their file size and ensure they load much faster in your Figma file.
Designs not uploading from the plugin, or images not loading in the web app
One reason this might be happening is if your ISP (internet service provider) is blocking the QUIC protocol. You can confirm this by opening up your developer console in the browser or in Figma and see the error message ERR_QUIC_PROTOCOL_ERROR.
There are a couple of workarounds for this issue:
- Switching to your mobile phone's Wi-Fi hotspot/tether for your computer's internet connection
- Disabling QUIC in your browser
Netskope blocking the Pixelay frames from loading
There is a known issue with Netskope blocking access to Firebase databases; to resolve this, please ensure you allow firestore.googleapis.com:443 (as per this thread).
VPN may be required in China
Note, if you're in China, the accounts server may be blocked by "The Great Firewall of China". If you're seeing an activation error, despite using a valid key, you will likely need to use a VPN to resolve the issue.
'An error occurred while loading the plugin environment'
This may happen in the Figma desktop app if the Use Developer VM debug setting in Figma is enabled by mistake; you can make sure it's turned off by right-clicking anywhere on your Figma canvas, hovering over Plugins, then hovering over Development, and making sure that the Use Developer VM is unchecked; after it is unchecked (and does not have a tick icon next to it), re-running the Figma plugin should work as expected.