How to compare live website builds with Figma designs using Pixelay

Video Transcript

Today I’m going to be showing you how to compare your Figma designs with live website URLs using the Pixelay Figma plugin.

The first thing we need to do, if you just jump into the Figma Community search for the word “Pixelay”, and under the “Plugins” tab, you’ll see Pixelay pop up. If you just click on the “Install” button, you’ll be ready to go.

I’m just going to jump back into my file, and I’m just using a portfolio website today to compare. I’m just going to right click anywhere, go down to “Plugins”, click on “Pixelay” and that’s just going to open up the Figma plugin we just installed a moment ago. It’s a fairly simple interface, all we need to do is put in our website that we want to compare our designs with. In this case, I’m going to be comparing this portfolio site, so I’m just going to copy the URL from the website and paste it into the top bar over here, and what that’s going to do is it’s going to set that as the base default URL to compare. In my case, I actually don’t want to compare the homepage, I want to compare the about page and the projects page. What I can do is I can actually override these URLs per page or per frame, and I can just do that by going to the URL clicking on that, copy/pasting it, pasting it into the input fields here in the Figma plugin and if I grab the projects page, I’m going to copy/paste that URL into the input as well. Now you can see it’s going to compare the about page for these two, because you’ve got the mobile and the desktop, and then the projects page just on the desktop for this one.

That’s the way that you put in the URLs, and all you have to do is just select the ones that you want, I’m just going to leave all of them checked, as I’ve only got a few. After you’ve selected them, just click on the “Compare Designs” button in the Figma plugin; if you click on that, it’s going to prompt you to create a new URL, which will be a Pixelay URL. You just have to click on the “Upload Designs” button, this will just show it the first time it loads the Figma plugin, once you’ve uploaded it as we’ll see in a minute you can actually re-upload them, so if you make changes to your Figma designs and you want to re-upload them or you want to change the URLs or add more or remove frames, you can actually do that and re-upload these designs to the same URL and you’ll be able to refresh that. We’ll have a look at what that looks like in a second, but for now it’s just going to be doing the initial upload of the designs and also create your own Pixelay URL, which is going to open up a web app in a minute once the upload finishes. In a second, once it finishes we’re going to see a couple of different things; this is different to the last Figma tutorial which is mostly just comparing local development website builds, this one’s going to be for production builds.

As you can see here, it’s now ready, it’s created the URL that we can use. We’ve got two options here; we can either compare local development URLs, so that’s things like localhost or local web development on your machine, or you can compare live URLs, which is what we we want to do today. These are two different web app URLs that you can use, and because we’re going to be comparing live website URLs, we also need to make sure that we’ve installed the Pixelay browser extension. You can do that just by clicking on the link here, and that will take you to the Chrome store; I’m using the Brave browser which is very similar to the Chrome browser, and so your button might say “Install in Chrome” or “Instal in Brave”, and if you just click on that button up here, it should look like mine where, it then says “Remove”, because it’s now been installed. I’ve already installed it, but if you haven’t, just click on that link in the Figma plugin, open up the extensions page, and click on “Install”, and then you’ll be ready to go.

Once you’ve installed the Chrome extension or the browser extension, you can now go to the Pixelay web app URL, and you can do that by just copy pasting the link. You can click on the little copy icon here, copy it to your clipboard, and then we can open up that URL in our browser and that’s just going to load up the Pixelay web app to your unique URL that you’ve just created from the Figma plugin. You can see here, it’s loaded up our designs, and we can actually scroll across left to right. You’ll notice here that our Figma designs have been uploaded, but there’s also some other other designs going on which are actually from the live website. The easiest way to see this is we can either change the opacity, so this changes the opacity of the overlay, or we can actually switch directly into the Figma design or the live website itself. That is the live website there, you can see if I hover over these items that’s all live, this is all HTML, and the Figma version is just the design, there’s nothing going on here, it’s just the design.

The comparison modes actually let you compare the two, so we can see here we can actually compare the design and the build by changing the opacity; we can look at the split version, we can actually use a split screen to compare them, so that’s another way we can do it; we can also use the diff mode which can be helpful for finding really subtle differences, this helps you sort of find those; if we need to we can actually move the overlays around to change the offset just in case the offset in the website has some weird stuff going on, you can change that a little bit there too; and of course we can also do measurement, so if you’re in development mode and you want to figure out how how off these these things are, you can click anywhere and measure them to get the difference in pixels.

That’s that’s the way you can do that, you can also jump to frames; this is handy if you’ve got a bunch of different frames, we’ve only got three, but you can actually skip directly to those frames as well and just use that menu there and that will jump straight to them, so you don’t have to scroll a whole bunch to get there. You can see here it’s the entire page; we’re comparing multiple viewports at the exact same time, we don’t need to switch between pages, we can just scroll left and right very easily, up and down, you’ll get the entire viewport and these viewports are being matched to your Figma designs. The size of the viewports, the width and the height, are exactly whatever your frames are in Figma. You’re really getting a truly responsive comparison, because it’s changing the viewport to match the width of the Figma frame; you can really see what the responsive version actually looks like compared to the original Figma design.

That’s that’s what that looks like there. It’s really simple, you can just keep comparing these as much as you want. The idea here would be if you’ve got a live website you can do QA on it, quality assurance, and check that everything’s actually looking the way that it should. These designs are a bit outdated, that’s why the the copy looks different but you can see already like you could tweak the the menu margins just to make sure those are all lining up exactly if you wanted to really tweak them, same with the columns, the columns are a little bit too wide, or not wide enough in this case. The idea here is you would go back to your website development, update these visual changes in your code and push it up to the live site, and then hopefully you’d have something that’s much much closer to the original Figma designs.

That’s how you can compare those, and as I mentioned you can also re-upload these. If you wanted to re-upload these, for example, in the case of the projects page; if I just jump back into the development mode, I’m just going to copy that new text and I’m going to put that into the projects area, whoops; actually, I don’t have that font. I can’t do that, but if I could do that, I would; in this case, I’m just going to move these around a little bit just to show you that it is going to get updated. What I can do is I can actually rerun the Figma plugin; I’m just going to click on the Pixelay Figma plugin again, and I’m just going to re-upload just the one page this time. This time I’m just going to do the projects page, and you can see here this time when I click on the “Compare Designs” button it’s already showing me the link. I can get that back again, I don’t have to re-upload it to get that link again, I can just jump in here, copy that link again if I needed it for quick reference.

I can also click the “Update Designs” button, which I’ll do now. This is going to update the existing link with your Figma designs re-uploaded to the same link. If you just wanted to narrow it down, or add more frames, or change the URLs, you can use the re-upload function to update the link without having to create a whole new link and share it around, and do all that sort of thing; you can just re-upload them and do that really quickly. It’s just confirmed it, so it’s re-uploaded now, and if I just jump back to my existing URL, I’m just going to hit refresh. This time we should only see the one frame because we’ve just re-uploaded it; we can see here it’s only got one frame now, we’ve just updated the link that we were already using, and this time you can see the design’s been updated; you can see the the columns are even more out of whack now because I just wanted to show you what that looks like when you do update it.It’s the development mode and then the comparison mode, so you can just keep doing that, you can just keep changing either your Figma designs or the build, and hopefully you’ll be able to do much more accurate QA on your websites rather than having to manually figure out where all the differences are; this is a much quicker way of figuring out how accurate the build is compared to your original Figma designs.

Okay, that’s pretty much it for today; I just wanted to show you how to compare your Figma designs with the live website URLs instead of the local development URLs which were covered in a different YouTube Figma tutorial. If you’ve been looking for an easier way to do QA or quality assurance on your Figma designs compared to the website build, then consider using the Pixelay Figma plugin as a part of your toolkit for for doing that. As always, thank you for watching, and we’ll be back soon with more Figma tutorials just like this one.