- Pixelay Video Tutorials
Video Tutorials
Troubleshooting Pixelay
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.
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.
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 (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.
If your website CSS uses “vh” units for any elements, please 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.
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.
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.
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
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).
Please 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.
Was this page helpful?