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 Bodymovin. 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.
