# Troubleshooting Pixelay

# Loading production URLs

By default, any live/production URLs (eg. google.com) are unlikely to load properly in the Pixelay web app.

To use Pixelay with staging/production URLs, please install the Pixelay Chrome Plugin (opens new window), which will run in the background and allow loading live URLs that aren't from your local development environment.

# Thin white line around image exports

Occassionally some images will contain a faint, thin white line around the edges. Figma does this (opens new window) if a layer isn't positioned on a rounded pixel value (eg. 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.

# HTTPS vs HTTP Pixelay URLs

Whenever you create a Pixelay comparison URL, the plugin will automatically generate two different URLs: an SSL https:// URL and a non-SSL http:// URL.

If you're comparing a live/production website, you'll need to ensure your own website URLs are https:// and also use the Pixelay https:// URL to compare them.

If you're comparing a localhost development environment URL, you'll need to ensure your own local website URLs are http:// and also use the Pixelay http:// URL to compare them.

# Websites using "vh" CSS units

If your website CSS uses "vh" units for any elements, please note that these may appear much taller than they normally would at a resonable browser height due to Pixelay setting the viewport height to be the same as your full Figma mockup.

# 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 (opens new window) 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:

  1. Switching to your mobile phone's Wi-Fi hotspot/tether for you computer's internet connection
  2. Disabling QUIC (opens new window) in your browser

# VPN may be required in China

Please note, if you're in China, the license server may be blocked by "The Great Firewall of China". If you're seeing a license error, despite using a valid key, you will likely need to use a VPN (opens new window) to resolve the issue.