How to compare local website builds with Figma designs using Pixelay

Video Transcript

Today, I’m going to be showing you how to compare your designs from Figma with a real website implementation that’s based on those designs.

To do this we’re going to be using a Figma plugin called Pixelay, and if you haven’t already installed it, I’ll show you how to do it. You can go to the top left and click on the Figma icon in the toolbar go down to community click on “plugins” and then in the search bar at the top if you just type in the word “pixelay”, hit enter, and you’ll see it pop right up as the the only result; as you can see here I’ve already got it installed, but if you haven’t installed it yet, you can click on the “install” button on the right hand side and it’ll change to look like mine where it says “installed”.

Once you’ve gone ahead and done that, you can jump back to your Figma file. In this case, I’m using my friend’s website design, which is in development, and we can actually compare what’s in the Figma file with the development build. The development build is currently running locally in my browser, this is the development version that’s in progress and I can click through it this is the real website. I basically want to compare this website build with the original Figma designs and see how how close they are.

Now that we’ve got Pixelay installed in the right-hand side of the menu, if you just right click anywhere on the screen, go to “plugins” and then go down to “Pixelay Development Comparison” and click on that. You’ll see this is the initial screen that comes up; because I’ve used the Figma plugin before, I have a few things already selected, but if you’re running it for the first time none of the frames will be selected.

To run you through what’s happening, essentially all of the frames that you’re seeing in the listing inside of the Pixelay Figma plugin is mirroring all the frames that we can see on the left hand side here. I’m in a page called “New Designs”, and this “New Designs” page has all these frames in it; you can see that there’s quite a few and they’re all being mirrored in the Pixelay app plugin screen.

I’ve already put in my URL, but you can see here, if I actually remove the URL from the text box, we’ve got some text here that is asking for a development URL; then it’s got an example of a URL that we could use, which is localhost port 8080. The way you can get that URL is by going to your web development build and clicking in the URL bar and seeing what that URL is; in my case it’s actually localhost on port 3000. I’m going to copy that URL and I’m going to paste it into Pixelay, and you can see here it’s populated it, and all of the frames down here have also been pre-populated with localhost 3000.

You’ll also notice there’s a few frames here that have been overridden with different URLs, and the reason is because Pixelay supports comparing multiple designs against multiple URLs at the exact same time. If you’re only comparing one page and you just want to compare the home page or just one sub page against a couple of frames or a couple of sizes, a larger width and a shorter width for example, you can just put in this top one here, and by default everything you select will inherit that 3000 port.

In my case, I want to compare a couple at the same time, so what I can do is I can check and uncheck what I do and don’t want; in this case I can uncheck the “writing” pages and I can just select the “home” page and the “home” page for mobile; those correlate to this page here, this frame here, and then we’ve got some mobile designs over here. In this case, I’ve got the mobile “about” page and the “home” page on mobile as well; I’ve got those four frames selected and I’ve got my URL for the local development environment put in there and then the overriding pages here, “/about” which correlates to this “about” page here; that’s where I got that URL from.

Now that we’ve got all those ready, I can click on this “Compare Designs” button; it’s going to compare those 4 frames we just selected; if I click on that, what that’s doing now is it’s actually going through those frames in Figma, getting all the image data and it’s uploading it to a private storage bucket and creating a unique URL which is actually going load in these designs over the top of your development builds in the browser. We’ll see what that looks like in just a moment once it’s finished uploading.

Okay, it’s telling us that the comparison page is now ready, and in order to compare our designs we can open the link in our browser. There’s two ways of doing that; one would be to click on this little “copy” icon and that will copy the URL to my clipboard and then I can just paste it, but the easier way is to just click on this “open link” link here and that will open up a browser tab with the URL that’s just been generated.

you can see here we’re running on Pixelay on the Figmatic app domain, it’s just loading in our designs now and this is essentially going to sync up the designs that we just had in Figma and our development build. The images are loaded and you can you can get a sense of what’s happening already. We’re currently in the Chrome web browser at the URL that was just generated, and if I scroll across you’ll see here that the 4 frames we selected have all been loaded into the browser.

If you’ve already spotted it, you can see that there’s these overlays that are that are visible; what’s going on there is we’ve got this little toolbox in the bottom right hand corner and we’ve got this whole suite of overlays available to us, and tools available to us. By default Pixelay uses a mode called “transparent overlay”, and what that does is it overlays the Figma designs that we just selected onto your live development build and lets you use this little slider here to actually move that up and down; you can change the opacity from 0 to 100. If it’s at a hundred percent that means that we’re looking at the Figma design and all the way down to zero percent reveals the live development build, and anything in the middle gets you some level between that lets you compare them.

That’s one way of doing it; there’s a few other modes as well. If you just want to do a really quick toggle between Figma and the development build, these two first options switch between those; this is the original Figma design mode this is the web development build mode. If you just want to toggle completely between those two we can do that and that all that will come through. That’s roughly what those look like. The third mode is the one we just looked at, that’s the opacity opacity mode.

The fourth mode is one that’s called split screen; split screen will let you have the Figma design and the build up at the exact same time at at full opacity, but you can actually swipe between the two and that’s a really cool way just to get a quick sense of what’s different or what’s the same. We can see here for example, this is obviously looking a bit off. There’ll be some that are less off and some that are more off. This text look like it looks like it’s completely wrong and this one’s not looking too great either.

The other option we have is the fifth one; that’s blended diff overlays, and this one essentially does a diff on the foreground and background overlay; you can see up here there’s a really clear sense that things aren’t aligned. If everything is looking perfect and aligned, you won’t see any overlap and any of this jagged or offset text, it should just line up exactly if it’s correct, but we can see here there’s clearly some things that are going wrong. You can slide that up and down as well if you want to get a bit more of a sense of what’s happening underneath the scenes, you can change that opacity in this mode as well.

The other mode that we have available to us is mode six, which is the draggable overlay. You can see here in these particular mockups, because we’re using this pseudo mobile Chrome browser or Safari browser at the top, that’s automatically going to throw our designs off as well. What we can do is we can reduce the overlay a little bit; we can see what’s going on and if we need to we can re-adjust our designs just by clicking and dragging them and that’ll let us move that that Chrome window up and out of the way, and give us a more accurate picture of what’s going on. This can be really handy if that it’s looking good but there’s something that’s pushing the the site down artificially, or you just want to line up the main thing and see what else is out of whack. The draggable overlay is a really good way to correct any mishaps in the browser that might be throwing off the original design positioning. That’s a really cool way of doing that, and this will this will move them all at the same time, that’s really handy if they’ve all got the same error if they’ve all got this bar at the top or something like that, you don’t have to manually drag each single frame exactly, you can get it right once and then they’ll all inherit it as well. That’s a really cool way of just realigning it.

The last tool that we have in the toolbox is this pixel measurement device. We can see here that there’s a few things that have gone wrong. For example, this text here is clearly sitting way too low; what we can do is, you can just click and drag and this will automatically give you on-screen pixel measurements. You can measure the distance between certain discrepancies, so we can see here that if we measure between these two elements that we’ve got roughly 70 pixels of extra margin that shouldn’t be there that we can bring up. That’s just a really quick way of getting the distance between two elementsl left or right, up or down, you can go either way and that’s a really nice way of getting measurements to actually put back into your codebase.

You can see on the corners here as well we’ve got a ruler; that ruler is accurate to pixels. For example, if I measure between this and this, it’s exactly 100 pixels. If you just need a really quick way of lining up measurements, you just overlay these two corners here and get a rough sense of how wide that is, or how tall something is if we’re using the side one. That’s pretty quick.

Tto show you practically how you can make changes on the fly, what I’m going to do is I’m going to split the screen up and open up my development build at the same time. If I just bring this down a bit and put them side by side. I’m only using one monitor, and this would be much easier with having two monitors set up, but that’s okay. As I mentioned before, this copy here is clearly incorrect but because we’re running a development build at port 3000, it’s actually showing us what page each one is getting pulled in from up here; you can you can click on those links and that’ll open it up in a new tab and show you exactly what URL is being used per preview.

In this case, we can see here the home preview is just purely on the home page. I have access to that in my code, this is my code over here, which is being run in the browser. I can see that the copy isn’t right, it just says “designer in London”, but it’s really meant to say “experience and interaction designer in London”. We’ve also got some italics here which aren’t showing up in the design. To fix that, I can change it in my code base here. If I change that to “experience and interaction designer” and just save that, because we have live reload going in the background, you can see here it’s immediately updated my build in the preview; I didn’t even have to refresh the page, as soon as I hit “save”, it’s pushing that update into the to the browser window and I can immediately see the change here.

The other thing is that we don’t want are these italics, so I’m going to remove those hit “save” again and you’ll see here, it’s reloaded the page. The reason it’s taking a second to come in is because there’s some entry animations going on, which is cool that you can see all those anyway. Here we can see that the line break should actually be after the word designer, so I’m adding that in. Okay, and I’ve capitalized “designer” even though it’s not meant to be capitalized, so I’m just going to remove that capitalization, re-save that, and there we go. That’s looking a little bit better, if we toggle between the two now we can see that the copy is correct. That’s really cool that we can see all that being updated. The other thing is we’ve got this menu overlap here, that’s another thing that we could tweak if we if we wanted to do that as well.

That’s a super easy and fast way of doing this if you’ve got a development version running. I should point out that you could run this against live URLs too, and I can give you a really quick example of that if we jump back into Figma now. I’m just going to close the Pixelay plugin and restart it. Because we’ve already run the Figma plugin once, if you go over to the right-hand side you’ll see this little “plugin” section in the column, and you’ll see a little icon with the Pixelay icon; if you click on that, it’ll re-run the Figma plugin without you having to right-click and find the plugin in the in the context menu.

Okay, this is refreshing the page, and just to give you a quick demo of how this can work against live pages as well, I’m just going to use the Figmatic website. If I do “hypermatic.com”, and it doesn’t have a port. Obviously this is a completely different website to the one that we have in the design, but this is more of just an example to show you how it can work on a live website as well. I’ve just replaced the “about” page with the “Figmatic about” page and the desktop version as well, and then for the home screen I’ve just left a blank because it’s inheriting the Figmatic URL from up here. If I click on “Compare Designs” again, it’s going to re-run what we just saw the very first time.

Just while this is loading, I wanted to mention one important caveat to to using live URLs as opposed to development/localhost URLs, which is really what Pixelay is built for. It’s built for being able to make quick changes in development before the site’s gone live, before you’ve sent it out to everybody on your team and telling them it’s perfect, when there might be some things that are wrong with it; that’s that’s really what it was purpose-built for. However, if you have already pushed something live, this is a way that you can validate what you’ve actually put live to the designs as well.

Okay, the comparison page is ready, we can click on the link once again. I’ll actually just show you how to copy paste it; if you want to do the copy/paste method, you just click on this little “copy” icon here, that’ll copy it to my clipboard, then I just go back to Chrome, paste it in and hit “enter”.

That’s going to load my images now, it’s just downloading those and syncing them up against the web URLs. This is going to look pretty funny, but it’s just more of an example to show you what it does look like against a live site. Okay, we’ve got our “about” page on the Figmatic web site, and it’s being overlaid against our Figma designs that we just just had a look at. You can see here clearly, they’re two completely different designs, but the main thing to note is that up here we can click on that URL preview and it is in fact loading it from the live domain.

You can use this to compare live websites (obviously they would need to be relevant URLs for it to be useful), but you can use this as a method to compare with a live site as well. You’re not going to be able to make those quick development changes the same way that you you can with a live development version running, but again,it can just be a nice way to revalidate a design that’s already been shipped or published to your live web site, that can be quite quite handy.

I do have to say the important caveat is, the reason this is working against something like “hypermatic.com” is that “hypermatic.com” doesn’t have any any code that’s blocking it from being used in an external service. If I rerun this example for you to show it show you what I mean. I’ll just rerun Pixelay now, and I’m just going to give you a really quick example of the edge case where this this isn’t going to quite work. If I just do one page this time, and this time I’m not going to use my own website, I’m going to use “google.com”, and I’m just going to compare one, just so you can see how it doesn’t actually work.

The reason it’s not going to work is because for security reasons and other reasons in general, a lot of websites will add protection on it to make sure that they can’t be loaded into other web pages, and and that’s not every web site, but certainly a lot of the bigger ones who have a lot more issues with people trying to pretend to be them or things like that. They’ll tend to have some code on the server that’ll block you from using a service like this against their website.

You can see here that the design has loaded in perfectly, but if we go to the development build, you can see that it’s blank and we’ve got this little sad face here, and that means that the page couldn’t be loaded because there’s there’s an error going on behind the scenes. If I “inspect” the page and go to “console”, you’ll see here that it refused to display Google because “The X-Frame option is set to same-origin”; if you if you see that error come up when you go to “inspect” or go to your dev tools. you’ll know that you can’t be loading it in from something like Google.

Having said that, this isn’t an issue for any website that you own and and have control over. If you are doing this against a a development build locally, a “localhost” build like the one we were just doing here on our own local development environment, that works perfectly. and in fact that’s really the way you you should be doing it most of the time. However, if you’re uploading your builds to a staging URL or an internal preview URL, as long as you’re not actively putting that code to block frames being loaded on cross-origin domains on to your own servers, then Pixelay is going to work perfectly fine for those development preview URLs, too.

Anyway, I just wanted to give you a little bit of a heads up on that in case you run into that error, but as long as you’re sticking to local development and sticking to websites that you’re building, you really shouldn’t run into any issues at all.

I hope that’s been a valuable Figma tutorial for you, if you’ve been wondering how you can get your developers to be more aligned with with the original design, or if you’re a creative director or a lead designer who really doesn’t want to spend all of their time figuring out what’s what’s not right in the design what’s clearly not working and then drawing lines on a piece of paper to tell the development team what they need to fix; this is a really good way of getting the distance between design and development down to pretty much zero. You want the design from Figma and the development environment to be one and the same; you should be able to see them in tandem, and that’s exactly the problem that Pixelay has been built to solve.

I think that’s a great place to end. It if you have any questions, as always please just let me know; or any suggestions that you think that the plugin would be better with, I’m always happy to to listen to those suggestions and and get them added into the plugin. Thank you very much for watching, as always, and stay tuned for more Figma tutorials very soon.