How to compare websites behind a login with Figma designs using Pixelay

Video Transcript

Today I'm going to be showing you how to really easily visually compare your designs that you've created in Figma against a real website that requires authentication or is sitting behind a login screen, you'll be able to visually compare the accuracy of your designs versus the implementation of that design in code.

To get started, all we need to do is click on the little "Resources" icon in the header of your Figma toolbar and just search for the word "Pixelay", and under the "Plugins" tab you'll see the Pixelay Figma plugin pop up. To run the Figma plugin, all you need to do is either click on this "Run" button here or you can click on this three dots "More options" icon, click on "Save" and that'll save it to your Figma plugins list to use it again later. I've already saved it to my Figma plugins list, so to run the Figma plugin, we can just go to our Figma canvas, right click anywhere, go down to "Plugins", go down to "Saved Plugins" and then click on the "Pixelay" item, and that's just going to run the Pixelay Figma plugin that we set up a moment ago.

Once you've got that set up, you'll see here that the first thing that loads is all of the artboards that you've got on your canvas. Artboards are really just the parent frames; any Figma frames that you've got directly on the page will be treated as screens or artboards in the Pixelay options here, and what you can do is basically go through and select the frames that you want to add to your comparison. In this case, I'm just going to add all of the frames, you might only want to add a couple depending on your use case, and once you've selected the frames that you want to compare what you need to do is put in the URLs or the website links for each of these comparisons depending on what website they're going to actually be sitting on in the browser.

For example, we're going to be comparing these designs for Github with the real Github page when we're logged in; these are just the Figma designs and what I can do is I can grab that Github URL, I'm going to paste that in as my base you URL; this is the default or domain level URL, and by default you can see here that every page is just going to get marked with that default URL. That's fine in the case of the desktop and mobile designs for the home page of the logged in screen, but we can see here that these frames over here are for different pages. We've got one for code spaces, so if we click on code spaces, we can see here that this one is not just Github.com, it's got a forward slash, so what we can do is specifically paste in the URLs for those ones. In this case we've got "code spaces" and we've also got "issues"; we can paste in "forward slash issues" into these two, so the mobile and the desktop one for issues.

Now we've got everything set up, we've got our default domain, which is going to be used for these first two, and we've also got our other domains for those extra two pages. Once you've got those ready to go, all you need to do is click on the "Compare Designs" button, so I'm going to click on that now, and because this is the first time we're using the Figma plugin in this file what we're going to do is click on the "Upload Designs" button. I'm going to click on "Upload Designs" and what that's going to do is it's going to take these six frames from Figma and it's going to upload them online and give you a very special link that you can use in a moment, and we'll be able to compare these designs with the live website directly in the browser; I'll show you what that looks like in a minute.

Okay, it's finished uploading our frames, and the important thing to note is before you open up the URL that it gives you, you do have to make sure that you've got the Pixelay Chrome extension also installed. If you click on the link here, that'll take you to the Chrome extension page; you can see we've got it here, the Pixelay for Figma Chrome extension. All you need to do is click on "Add to Chrome" and that's going to add the extension, click on "Add Extension" and that'll install the extension. You don't have to do anything with the extension, it's just going to live in your extensions panel and what it's going to do is it's going to kick in whenever it detects a Pixelay URL which we've got down here.

You can see here that it's generated of comparison URL and it's taking the base domain or the base URL that we gave the Figma plugin a minute ago and it's adding in this Pixelay ID query string, that's automatically getting added, and what you can do is you can copy that URL to your clipboard or you can click on this link here, and if you then go ahead and paste it into the browser; I'm I'm already logged into Github, so if you're using a site that needs authentication, just make sure that you're already logged in and that'll make sure that the cookies or the authentication is saved in the browser. Now when we open up our Pixelay link, if we paste that in and load that up, you can see here that the browser extension is now picking up on that link and loading up a brand new page. It's still on the Github domain but the Chrome extension is kicking in and loading up all of our frames in iFrames and then loading in the designs over the top, and I'll show you what that looks like.

By default, it's just set to 50% opacity, but if we change that you can see here that as we change the opacity we can see that the designs versus the build is all kicking in, and that's basically what it looks like there. You've got all your different frames that we uploaded from Figma, we can see here we've got all the different frames, and we've got our Figma designs, and our Figma builds overlaid on top of each other. We can really easily see where the differences are in this design and there's a few different ways to compare the designs; we can look at a split screen, so if you wanted to use a split screen comparison you can really easily kind of go over each part of your design and just see exactly what differences you can notice and here we can see that the fonts are a little bit different, that will be something that you'd want to correct.

We've also got another way of doing it which is this diff checker; this basically picks up on any visual differences, and you can see the color kind of goes off if it's not matching up, for example, the logo is perfectly matched but as we can see hear some of this text is obviously not matched because we've got some differences in color that's highlighting those offsets in position, and you can basically just go through all of your different frames and navigate through them. You can switch between design and build, we've got our design and build if you just want to swap between them, the cool thing about switching between the build is you can also then interact with the with the website; you can actually interact with these pages here, and that's basically what it looks like.

The other thing you can do is you can pop out any of these pages, if you wanted to pop them out into their own window, you can do that; just click on these little pop-out icons and that's going to specifically load just the one frame in its own window. That just gives you a really easy way to view the design in one window if you wanted to do that, and this also gets around the issue of if you're using vertical height units or rem unitsm sometimes the relative nature of those units might get a bit weird if you've got a really long page for example, and because these are being loaded into longer iFrames, in some cases, some of that vertical height might be a little bit offset, and popping it out into its own window can sometimes help with that comparison as well.

That's basically what it looks like, we can see here that there's quite a few differences on this this Frame here, we can see that this whole block has basically not been included in the design; that's obviously a difference that you'd pick up on, but this is a really easy way of comparing sites if they require authentication. This obviously works for sites that don't require authentication as well, so if you've just got a regular website that you're building, or if you've got a site that's on a local development environment, you can use the Pixelay extension for that as well; but this is a really cool example of a site that does require a login portion of the the build.

If you wanted to re-upload those designs to look at them again, what you can do is you can go back to Figma, make the changes that you want to make; whether it's positioning or text or images or whatever. You can do a new headingm and we can move some of this around, not that it's going to be more accurate in this case, but we can change that, and if you just open up the Figma plugin again jump into the "Compare Designs" button, click on "Compare Designs" again, you can see here that this time it's showing our link immediately because we've already created the URL once.

To update those designs, just click on the "Update Designs" button and that's going to upload the images once again, and whatever changes were made in those frames in the meantime are automatically going to get uploaded. You can also deselect frames, so if you wanted to create an updated link without as many frames or add new frames you can do that as well. We've got our link updated, that's been confirmed; if we jump back to the browser and refresh we should see our new heading. We've got our new heading here, if we have a look at that we can see the new heading and the positioning has been changed; obviously this is for the worse, the comparison is not looking as accurate as it should, but that's just an example of how you can update the design as well.

Of course, the cool thing is this is also going to stay in sync with the URL. Whatever URLs you're comparing, every time you reload the page you're going to get the latest version of the development URLs, or the website URLs, so those will always be up to date. It's pretty handy if you want to do a handoff process with your developer, you can basically create a Pixelay link for them and put their URLs that you know they're going to be using, whether there's a local, or production, or an internal Network URL, and you don't have to do anything after that; they can just keep making changes if they're using hot reload or live reload, the website portion of the comparison is going to keep updating on the fly, and the designs are just going to stay as is until you decide to update them Figma.

That's basically it for today, I'll leave it there and keep it pretty simple; I just wanted to run through how to do this if you've been wondering how to use Pixelay, or how to use a service to compare your designs in Figma with production builds or builds that require authentication or login screens, this is a really easy way that you can do that in your own workflow. As always, thank you for watching, and we'll be back soon with more Figma tutorials like this one very soon.