Step 4: Div-frame your site
Next, I like to do something I call div-framing. To do this, I look at all the bigger groups/frames of my Figma file, and try to replicate them with divs in Webflow. You can skip this step if it’s not helpful, but it keeps me organized in the long run.
For the Hopper site, I also added containers to each div section that isn’t full-width, as that’s how most of the original file was defined.
Once you have those divs on your canvas, give each a unique class name. There’s no need to define these classes yet, but you’ll want to go to the settings tab and give each an ID. This comes in handy later if you’re going to add anchor links to your site.
You can also use the grid element (or set your div’s display property to grid) on your site, if you want to. I’m not going to go into best practices for grids here, but Webflow's landing page tutorial using grid will get you up to speed if you want to explore grid.
Step 5: Style your content
Styling your classes is both the easiest and most difficult part of Webflow. It’s super easy to start, but it can be challenging to keep things clean in larger sites.
I wrote a lot more about this in my series showing how to build an agency website, which might be helpful. Be sure to keep your classes generically named, clean, and as minimal as possible.
For example, instead of naming something “Black Hero Text,” try creating a combo class of “All H1 Headings” + “Black Text” instead. This will allow your heading 1 class to deal with size, weight, and positioning, regardless of color. Then you can add a secondary class to change color (or other properties) for your specific use case.
Another thing I find myself doing when going from Figma to Webflow, is making changes to the layout to make things easier to implement. I’m almost always the designer and the developer, so I can make those decisions, but that might not be true for you.
Either way, here’s a word of advice: Don’t try to match your Figma file pixel for pixel. I know, I know — everyone’s all about pixel perfection. But if you’re a designer, this is your chance to see how what you thought would be any easy layout is actually more trouble than it’s worth.
No matter how familiar you are with making websites, things behave differently in code than they do in design tools. In Figma, moving something is as simple as a drag and drop, and each element can live in its own little world, never impacting others. But that’s not the way the web works.
If you’re not the designer, this won’t be as easy to do. I know from personal experience that we designers always want 102% percent accuracy in our designs, but sometimes there has to be a little give and take. Webflow may give you a better way to articulate how complex some things are to implement.
If you’ve got a good rapport with your designer, be sure to involve them in these decisions, and use Figma’s commenting features to your advantage. I find that we understand visuals better than code, so what may be hard to explain in code may be easy to explain and articulate in the Webflow design.
No site I’ve ever designed in Figma and then built in Webflow has been exactly the same. Maybe this will also be true for you.
Step 6: Interactions
Your site may have some complex interactions, but tools like Figma will only help you out so much with that, as most everything will be flat. And unless you have another prototyping tool, you may have nothing but Webflow for interaction design and implementation.
The good news: Webflow is actually one of the best interactions design tools out there. If you’re the designer on your project, there’s no need to make your interactions in Principle, Atomic, InVision Studio, etc. You can just do it right in Webflow.
I won’t get into the interaction design weeds here, as this interactions and animations course is a thorough resource.
That said, it’s worth noting that interactions fall into two different categories:
- Interactions that happen per class, such as when you hover over a button or when an element is clicked, and
- Interactions that are more complex, and involve multiple classes and/or elements
The Interactions panel is great for the latter. For the former, you’ll want to select your element’s state from this dropdown, change its attributes, and then ensure that you have the appropriate transition applied when that class changes the property that you’ve defined.
Step 7: Work your way to mobile
Webflow is not mobile-first, and although you may think that way with your projects, don’t — I repeat, don’t — design the mobile breakpoints before you go to desktop.
You see, the “desktop” version of your site is less a specific viewport than it is a lack of a viewport definition. All the paddings, colors, fonts, flex properties, etc., that you define on this viewport will flow downwards, but can never go upwards. (And that’s true as you step down the smaller breakpoints as well.)
This is very similar, in concept, to how components behave in Figma. You define a master component, and its attributes will flow to all component instances, which in turn can be overridden — but it’s impossible to overwrite a master from the instance itself. If you wanted to do this in Figma, you’d have to go to your master component. Think of your desktop viewport in that way, and you’ll be halfway there.
Often, sites are totally different on mobile and on desktop. This can get confusing quickly as you’ll be constantly tempted to hide and show elements per breakpoint. You can hide elements in Webflow by changing the display property to none.
Pro tip: I always use the landscape (3rd) viewport as if it’s my main mobile viewport. Mobile devices these days are getting bigger and bigger, so I find it’s helpful to start a little above the narrow width of the last viewport. If it works on landscape, then it will work on portrait. You don’t have to do it this way, but I find that fewer differences between those two viewports makes a site easier to maintain.
Step 8: Publish and refine
The view of your site inside the Webflow Designer is, in my experience, about 95% to 99% accurate to what it will look like in the real world.
Once you’re comfy with the state of your site, publish it and test it on:
- Your phone (and the other major mobile OS, if you can)
- In other browsers, and
- In as many different environments as possible
Resize those windows as much as possible to see if it breaks. And if you have the option, use an emulator like BrowserStack to render your page on devices and in viewports that you can’t replicate on your own. Just keep in mind that emulators don’t always do the best job — the real thing is inevitably better.
Also, if you’re using custom code or embeds, now is where you’ll have to start making sure they’re all set up properly, as they don’t render inside the Webflow Designer. For some sites, this will be its own process. For others, this may not be a concern at all.
Wrapping it up
Webflow and Figma are my two favorite design tools. They enable teams to experiment in ways we’ve never been able to before. With Figma, you gain the ability to collaborate with designers, developers, clients, and product managers all over the world and all at once with a single source of truth, never having to worry about updates or saving files.
With Webflow, that workflow doesn’t have to end with the rectangles — you get to log in, build amazing websites and products, and then share and riff off those source designs, keeping the good times rolling.
If you’re working on a team, you’ll already start to see the benefits of a collaborative tool like Figma. Now with Webflow added in, you can finally own the process and actually see your designs turn into the real thing.