How to compare Webflow builds with Figma designs using Pixelay

Video Transcript

Today, I’m going to be showing you how to compare your designs in Figma with a web build implementation that you’ve created in the Webflow service.

The first thing we need to do is install a Figma plugin called Pixelay. If you haven’t already done so, you can go to the top toolbar and click on the little Figma icon, go down to “Community”, then click on the search bar and type in the word “pixelay”; and you’ll see a result come up saying “Pixelay Development Comparison”, and what you want to do is click on the “install” button on the right hand side and then just click “install plugin”, and that will change it to say “installed” with a little check box. Once you’ve done that, you’re ready to go. You can swap back into your Figma file with your own designs in it, and we can get started.

In this case I’m just using an existing design from the Webflow website, and to compare this with the development build inside of Webflow we need to run the Pixelay Figma plugin first; what we can do is we can right click anywhere go down to plugins and then go down to Pixelay development comparison and click on that and that’s just going to fire up the Figma plugin we just installed.

Once that loads you’ll see that we’ve got a few things; a text input up the top, these two frames here, which are mirroring the two frames that I’ve got in my Figma design; I’ve got the “small” frame and the “large” frame; and you can also see that the button is grayed out, and it’s grayed out because we need to put in a URL for this to point to; and the URL that we put in here will be the the URL that the designs get compared to, where we can check if the original designs are matching up with the development implementation. Typically, that would be a “localhost” URL, Pixelay is designed to b really good with local hosts or local development environments, but if we do try and do Webflow URL for now; I’ve just put in a demo Webflow URL in there, and then I’m just selecting both of my frames to be compared and then I click on “Compare to designs”. What this is doing is it’s just taking these two frames, uploading them, and it’s going to give me a URL in a moment that I can use.

The Pixelay comparison page is ready; and to compare these designs we need to open this link in our browser; I can either click on this to copy the URL, or I can just click on the open a link. This is loading up the Pixelay web app, and you can see here immediately that something has gone wrong; you can see that we’ve got our Figma design, we can see the Figma design just just fine, but we can’t see our web build that we were after. If I just move these controls up a little bit; if I click on the Figma mode which reveals the original Figma files that we’re comparing, then if I click on the development mode, you can see we’ve got this very unhappy face here; the reason for that is we’re basically loading these URLs in iFrames, and because we’re trying to load it in from a the Webflow domain, Webflow has a security policy set which does not allow you to embed their iFrames on external websites. They have a number of reasons for doing this, I believe one of them is they just don’t want people to embed iFrames on a custom domain without paying for a plan, that’s potentially one, and there might be some other reasons as well. The bottom line is, we unfortunately can’t load in URLs directly from Webflow, but there is a workaround that I’m going to show you right now.

I’m just going to close out of this, and close out of Pixelay. I’m going to go to the the Webflow site; underneath Webflow, in the Webflow University section, which is like their tutorials; there’s a tutorial called “Code export”; if you search for that, it’s going to take you to a page which will explain how you can export the HTML, CSS, images and JavaScript from your Webflow project. Just be mindful that this is only available as a feature on paid Webflow plans, so if you don’t have a paid web the Webflow plan and want to do this you, will have to upgrade before you can do it.

What this is going to do is, it’s going to let you export your code from Webflow and it’s going to let you download it all to your computer. The steps for that are that you basically just open up your Webflow project, there’s an export button in the top right corner and; in this little video here it’s got the the export button; you click on “Export Code” and then in the bottom right there’s a button that says “Prepare Zip”, and if you click on that, it will download a zip file to your computer with all of the code up for your Webflow website. I’ve got one on my desktop that I’ve downloaded from Webflow as a sample; it’ll look something like this; it’ll just be a zip file, and I’m going to double click on the zip file, and that’s going to give me this file here. I can see I’ve got my CSS, I’ve got my images, I’ve got my HTML and I’ve got my JavaScript. That’s great, that’s exactly what we want.

What we’re going to do now is, if you open up a code editor, I’m just opening Visual Studio Code, and I’m going to drag the folder that we just unzipped into Visual Studio and that’s going to give me a list of all the files that we’ve got here; the CSS, images, JavaScript and index file. What we want to do is, we want to start a BrowserSync server; and BrowserSync is a tool that allows you to synchronize your browser across multiple pages from some source code that you’ve got; in this case if we run BrowserSync, we’ll be able to run a little local server, and any changes that we make to our CSS, our HTML, or our images, they will all be reflected in the browser across multiple pages at the same time.

To do this, we can just click on the “Get started” button on the BrowserSync home page. If you click on “get started”, it’ll just give you the three points that you need; it’s a very simple installation. The first thing you’ll need is to have Node.js installed, which you may or may not already have, they’ve got a link here for the installers if you do need to install Node first.

After you’ve done that you can copy the command from the second point, which is to install BrowserSync; if you copy that command and go back to your your Visual Studio Code editor, if you haven’t already got a terminal open, you can open it by going to the top toolbar and clicking on “Terminal”, and then clicking on “New Terminal”. In our terminal we just want to paste in the command we copied, and this is going to install BrowserSync globally; it means we can run it on any of our projects now and in the future. We’ll just wait for that to finish up; and BrowserSync is finished installing now.

To start BrowserSync, we can use the command from point 3, which is the final point. This command here is going to start a mini server and provide a local URL to view our website. I’m just going to paste that in to my terminal here and hit enter, and you can see it has really quickly spun up a server for us. In the terminal it’s telling us what the URL is; we can access that here, but it has also just spun it up and opened it up in the browser for me immediately anyway. We can definitely see that it’s working, and this is all the content or HTML that we’d expect.

Now, you can see in the URL bar we’ve got this little URL called “localhost” running on port “3000”, and that means that it’s running on our machine; it’s running on our computer, and it’s completely outside of Webflow, but we have access to this. The other cool thing is now that we’ve got this running, we can actually go into our CSS, and we can start changing things if we need to in here; we can change the font size, and immediately you can see that bump up. If I make something ridiculous that will bump up there, I’m not having to refresh the browser, it’s just instantly doing that for me, and that’s that’s really neat. That’s cool, and I’ll show you what that means in a moment, because we’re going to go back into Figma now.

What you want to do is, you want to get this URL here; just select that or copy it and paste it from your terminal. If we jump back into Figma we’ll close off Pixelay and give it a restart. The easiest way to restart it once you’ve already run it once in your page is just to go to the right hand column here, click on the “Pixelay” icon, and that will fire up the Figma plugin again without having to open up the menu.

Once this loads up we’re just going to change the URL that it saved in there for us; I’m going to get rid of that and instead I’m going to paste in the URL that I just copied from the terminal. These two have already inherited it, so you don’t have to override it. If you have multiple pages, in this case I’m just doing the one page, but if you do have an “about” page and a “projects” page and a “contact” page, what you can do is you can paste in the the main URL, and then add in your extra details at the end; if this is a “contact” page I could do “/contact.html”, if this one was “about”, I could do “about.html”; you can you can figure out what those URLs are if you do have more URLs; but in this case I’m just going to leave it as the default and inherit the global URL, because we’re just comparing the one page for now.

Now that I’ve got that in there, I can click on my “Compare Designs” button once again. This is just going to quickly upload those images and generate a URL for us, which is actually the same URL as before, but it’s just been updated with those new URLs. I’m just going to click and open the link again, and this time it’s loading up the web app, it’s going to be looking for different URLs; you can see here it’s pointing to localhost port 3000 instead of pointing to the the other URL that we had before from Webflow. You can see here, if I change the opacity, you can see that the the heading size is different from the one in the design.We’ve got the Figma design and then we’ve got the build; and you can see some differences there and in terms of the the dev build and the design for the smaller screen; the heading is quite different.

What we can do is now that we’ve got localhost running, we can jump into Visual Studio Code, and we can start playing around with with some of these things. As we had in here before, this font size issue, we can tweak that and you’ll see it immediately change on the left here. We can play around with that until it’s closer to what we actually expected it to be, and that’s going to let us do it really quickly; that’s that’s exactly the the font size; we can see that it’s matching up now, there’s no difference at all there, and it’s fixed it on the mobile one too; that’s pretty cool. If we made that huge again, you can see it updates straight away, and we can see there’s something clearly off there.

Of course, you can use different methods to compare these two as well; this is the split screen method; we’ve got the contrast diff method, which can be good for really small differences as well; then we’ve also got the overlay mode; if that there’s something off, you can line up the designs to line up the parts that work, and then that’ll help you get an idea of where things are getting messed up; in this case it’s obviously that heading again that we want to we want to fix, and you can just move that around; you can also use the pixel measuring tool, which will give you an idea of if you’ve got spacing differences; you can get an idea of how big those differences are, which can be really handy, especially for things with crazy margins or really specific sizing, and all that sort of stuff; and then the opacity one is probably the most common, where you can just go back and forth on the opacity and play around with that; I’m just going to reset that back, and that’s the perfect version that we’re after, at size “58”;

So, that’s the way that you can get your Webflow builds inside of Pixelay. I know it’s a little bit of a workaround, unfortunately there’s just there’s just no way to get around the iFrame content blocking issue, and the ideal scenario is really to somehow get your your web builds into a local environment, because it just makes the iteration speed so much quicker, as you can see here. I hope that that’s been helpful for anyone who’s wondering how to compare their Figma designs with a Webflow implementation. I know that it can be tricky to do it across multiple pages; so I hope that this minor inconvenience of needing to export the site locally can help you at least get to the point where you can start making these changes like this, and then once you’ve made those changes, you should be able to then put those back into Webflow as well, if you need to deploy it there, or if you’re deploying this code to a separate service like Netlify or S3, then you can just deploy this folder straight to those, and that’ll work just fine.

That’s it. If you need to revisit this link, you can keep going back to it once you’ve uploaded the designs once, and point to the right URLs, link is reusable. You can just go back into the browser and use that again if you need to, but feel free to experiment with it, and I hope that it works out for you.

Until the next time with some more Figma tutorials, that’s going to be it for today. I hope you’ve learnt something that you can take away for your team, or to help out with your own workflows with comparing your Figma designs to Webflow builds. Thank you as always for watching, and we’ll speak to you soon.