Figma to Webflow plugin

We're going to take a site design from Figma and turn it into a full-blown production build in Webflow. There was no editing magic there where we stitched together different video clips, except in the way that we stitched together different video clips to demonstrate copying a design from Figma, and pasting it into Webflow. 

This works really well if you’re used to designing in Figma, and you want a quick way to turn those designs into production code with the click of a button. And technically another click, where you go over to Webflow. And a keystroke to paste it in.

There are some critical things, though, to cover here: first, we'll show how to install the plugin, we'll put together our design in Figma using two methods: first with a prebuilt structure, which is essentially structural wireframes, and next, with prebuilt layouts, which has elements already added, and finally, we'll transfer the design to Webflow.

So. First part: install the plugin. This is not the plugin.

But we are in Google Chrome. Let’s switch tabs. We’re doing this from Chrome to show the full page — the full Figma to Webflow plugin page, we’ve included a link with this video, and let's go and try it out. What happens? It opens a new Figma design file so that we can run the plugin — and of course, we can authenticate it with our entire Workspace, our entire Webflow workspace, or any specific Webflow sites that we want to use. Now, you can do this in the Figma app, you can do this in your browser — it’s entirely up to you.

And back in Figma, if you don't see the plugin right away, you can just go up to Resources. You can open the Plugins tab, and, of course, run the Figma to Webflow plugin.

That's part one: installing the thing. Let's design in Figma and we're starting with prebuilt structures.

What is our goal? Our goal here is to build a simple hero section, a quick demo, that’ll look like this in the end.

Now. The key to ALL of this: in order for this to work, our designs need to have auto layout applied.

And with all these prebuilt structures? Auto layout is already  applied and it’s already responsive on all devices like desktop, tablet, mobile landscape, mobile portrait, and the ball that drops in Times Square, at midnight, every New Years Eve.

So. In the plugin, under where it says Structure, let’s create a new page. This is where our design will live. And then we’ll make sure our New page selected — that frame is selected we'll go over and add a section + container. This is our hero section. What do we do now?

We’ll take it further because we want to have kind of a side-by-side hero section. So, this time with our container selected, let's go ahead and add the 2 column structure. And just like that, we created the structure of our entire hero section.

Now, we can add content, and we're going to add exactly three things: a heading, a paragraph, and a button.

So, for our heading, let’s do that by adding text — and for now we’ll do it outside of that frame and we'll just type it in — type in our heading.

The second thing we’ll add is a paragraph. We’ll add some more text, and this time we want more than just one word, so let’s type that now. And of course, let's format our paragraph so it looks like a paragraph, we can always change this later, we can always adjust the design.

The third and final piece of content, of course, is that button. So, how do we do that? Well, with even more text. We’ll call this one, we’ll make the text say “Sign up.” Except something like “Sign up” would be better. 

But here’s the problem: this button’s not a button at all; it’s just text. So, let’s add auto layout to our text.

So with our text selected, we'll just right click, and add auto layout.

And when we added auto layout there? That took our text and put it in a frame — the frame has auto layout.

And let's give our button some color, can be any color for now, and let’s also make sure we give it some breathing room so it has some more breathing room. We can do that in our auto layout section here.

That’s all of our content.

Now, we can just move all this content, we can move this content into the first column of the hero section.

Now, it looks okay, but we might want to adjust the design a bit. And you can do that using, of course, the auto layout controls. Or other, you know, design stuff.

For instance, we could clean this up really quick. We can select the first column, the first column here, and we’ll make sure everything’s left aligned, sort of top-left aligned. The result? Well, it looks better.

And all of this is changeable: if we want the heading and the paragraph to take up the full width of its container we can just set the horizontal resizing to fill container, and it looks plain right now, so let's bring in an image, just drag an image from the desktop right into Figma.

And once we do, let's bring THAT to our second column, we can use the Layers panel here for extra precision. And let’s go ahead and size it so it looks better.

Okay, this is our main structure for our hero section. Is it perfect? Well, let’s see, we’ll submit this build under Grimur’s name to awwwards.com. Will it win site of the day? That’s up to the judges, so lobby now for Grimur’s chance at the spotlight.

For us, here’s what our hero section could look like if we style it in Figma — but of course yours can be whatever you want it to be.

Alright, that was our building our hero section using prebuilt structures. Let's build it even faster with prebuilt layouts. And just like prebuilt structures, these prebuilt layouts will also have auto layout applied and they’ll be responsive in Webflow. 

So, in our plugin under Layouts, let's click to add a navbar and we can go over, and drag it. We can drag our navbar into the frame, of course, making sure it goes to the top of our new page — above our hero section. And just like that, our navbar is done. If we want to style it, let’s just ask Siri to style it. Hey Siri? 

Siri: Uh huh.

Style it.

Siri: A stylet is a hard, sharp, anatomical structure found in some invertebrates. For example, the word stylet or stomatostyle is used for the primitive piercing mouth parts in some nematodes.

Okay. Okay, our design is finished — let’s talk about getting it into Webflow.

This is a really important note. The plugin automatically translates your Figma frame names. These frame names that we can see here in the Layers panel — these names become the names of classes in Webflow. Why is that important? It’s not. Except if your frames are named Frame 1, Frame 2, Frame 30, those won’t be ideal when you’re managing styles in Webflow. So, consider naming your frames before going to Webflow.

Now we cover that..and so much more in detail over on Webflow University — things like HTML TAGS you can use on headings, paragraphs, so check that out on Webflow University if you haven’t already.

So. for us, to grab our design? And all we have to do is select the full frame, which of course, includes all the nested frames, and what Lex calls — you can’t even make this up — “layer-y goodness.” And we’ll go back over to the plugin thing, we’ll make sure to choose our site — we'll do that in the dropdown, and Copy to Webflow.

What do we do now? Let’s go over to Webflow. Now, this isn’t just a blank site. It’s the site we connected several minutes ago in Figma. So all we’re going to do is click on the Body, we’ll make sure Body element is selected, and we’ll press command V on Mac, control V on Windows, we’ll paste.

That’s our design. And just like we mentioned before, it's already, as you can see, responsive in Webflow.

From here, of course, we have full control over everything HTML, everything CSS. And it is that way because our Figma design was converted to using the industry standard flexbox, the same CSS properties used on Apple.com, and Google.com, and Stripe.com, and perhaps unsurprisingly, not Blockbuster.com.

And this is just the beginning. To get up to speed on everything Webflow, check out Webflow University, where we have free courses, tons of documentation — from the basics and fundamentals all the way up to interactions, animations, including importing After Effects animations using a tool called Bodymoving.

Quick note, this is really important. Even though we copied our design from Figma to Webflow, changes in Webflow are not going to get transferred back to Figma. This is a one-way street.

And there's a TON of stuff — so much more to learn and explore with this plugin. Like copying and pasting text styles or color styles directly from Figma to Webflow, and, of course, other best practices. So be sure to check that out on Webflow University.

So, let’s quickly recap. We installed the plugin and authenticated it with Webflow, we made our hero section in Figma using prebuilt structures, we quickly made our navbar using prebuilt layouts, and we pasted the whole thing inside Webflow.

And that’s getting started with the Figma to Webflow plugin.