The Figma to Webflow Design Handover Process 2021

Designers and developers trying to communicate with each other can sometimes be harder than zebras trying to chat with lions. So it's no surprise that when handing off a Figma design to a developer, not everything might completely translate through. The handover process should be kept as easy and streamlined as possible, and ideally without zebra or developer bloodshed.

To make the Figma to Webflow handoff a breeze, you need to start with the right design foundations that have the developer always top of mind.

Before we get into any sort of development, we first need to start with the design. Let's look at where you can go wrong, and how you can make it right.

Web design done wrong

If you want to give a developer a sore stomach, all you need to do is ask him to develop something from Dribbble.

Here's a popular Dribble shot with over 75,000 views.

Now if we put personal preferences of how 'pretty' this is aside, there is no doubt that this would be a pain to develop. How do we know this? Well, if we were to roughly outline each section to give us an overview of what we will have to translate into Webflow, it becomes obvious just how frustrating it would be.

Grid? Who needs it! Consistently? Who cares!

If you're telling me that as a developer you'd be more than happy to build this, I'd also love to see you work through adapting it to different screen sizes.

As a rule of thumb, if it’s too difficult to explain to a web developer, it probably shouldn’t be developed.

By designing with the end result in mind, not only will you be making it easier for you or someone else to develop, you're also making it enjoyable for customers to use.

Now that we know what we want to avoid, we can move onto the good stuff.

Web design done right

Web design that works is designed around a structure; a system that holds both the fabric of the website and the universe together.

This kind of design is also suited to the way users take in information, which is by skimming chunks of data to find what they need. Complicate the design and a user has no idea where to look to find what they need. Follow a grid, and your website users can easily move through the website and find what they're looking for.

Here's an example from Stripe, a digital payment provider.

Not only is it a visual delight, it's also built in a way that is easy for a web developer to build, and more importantly, easy for a customer to digest.

In the same way we did before, we can see an overview of what needs to be built by outlining the different sections on the website.

Straight away we can know where we can use a grid, where we will need columns, and where we need to use spaces to space out all the content.

This simplicity starts from the designer, and carries through to the developer to end up with a website that looks great and is easy for customers to use.

Now that we've seen the good, the bad, and the ugly, we can get back to Figma.

Starting in Figma

Let's start in Figma and make sure our file is ready to take to development.

In our design file we have done a couple of things to make it as easy as possible to pull the colours, fonts, and content from the file as we build.

Let's breakdown the different areas that help to streamline the process.

The design

On-top of the website page design there are a couple of structural elements that makes it easier to design, and also will make it easier to build.

12 Column Grid: For the design, the grid has been turned on so we can see how many columns each section takes up. For example, we can see that our hero takes up 7 columns for the text box, and 5 columns for the image (we will set the image to be larger than the div so that it falls outside of the grid).

Visible Spacers: The spacers have been coloured so we know exactly how big they are to separate out the content.

The style guide

This section makes it easy to quickly add in all the styling elements that you're going to use throughout the Webflow project. To make it easy, you might also want to start in Webflow with a style guide page so you can define all the colours, typography and buttons first.

Color: All the colours in the design have been laid out so we can quickly add them to our Webflow project swatches to keep things consistent.

Buttons: Any buttons that are used are also shown in their hover state, and also their pressed state (if there is one).

Typography: all of the different text sizes and styles are shown, so you can set them once in your Webflow project, and not have to create a new text style again.

The assets

There is also a dedicated section with all the assets used throughout the design, so we can quickly export everything in one go, and without having to waste the time to go through the design and try to select the right layers.

When possible, any assets have been made into objects that can be exported as svg's rather than jpg's, which in turn makes the images crisper and the file sizes smaller.

Tablet and mobile views

Now that the homepage is good to go, should you design out the tablet and mobile views in Figma too? Well, it really depends on personal preference of if the developer is happy to adapt it to the different sizes as it gets built.

From experience, I've found that providing a desktop and mobile design of each page is enough, and the tablet view can just be adapted off of those designs.

Summary

The roles of designers and developers go hand in hand, and therefore they need to be able to know enough about the other to easily work with and handoff files for various projects.

We've just looked at a couple of ways to make the handover process a lot smoother, so let's quickly recap the most important points.

• By designing for the web with the end result in mind you will you be making it easier to build and enjoyable for customers to use
• Make the handoff easier in Figma but showing grids and spacers
• Create a seperate section for the style guide, showing all the colours, fonts and button states
• Also create a seperate section for assets, making them easy to export faster and ensure nothing gets missed
• When possible, provide desktop and mobile designs, but leave the tabet view to be adjusted as the design is built

‍