Web Development Process - From Figma to Webflow - Part 1

Note: Transcript has been edited for readability and structure.

Hey, my name is Casey, and I'm gonna be walking you through my web design process.

I think it's super important that you have a process when you are designing or developing anything.

I've already begun working with my client and we've worked through the design process. Now I want to show you what it looks like to take that design out of Figma and then move that into Webflow to build out a full website with a CMS collection. We'll then launch that website.

Over the next several videos, we're going to be walking through my process together.

The key to this particular process is to be organized. 

That's what I want to show you. My organization on the front end of the project.Before I really begin building out anything on any of the pages, what does that look like on the front end to make sure that I'm set up for success as I move through that particular build? Let's get into the computer and let's check that out.

What does it look like to make sure that this particular build is going to be one that is organized and ready to go?

The first thing that I've done is just gone through Asana, I've listed out the project, and I've put down all the different tasks that I need to do for this particular project. As I work through the project. More tasks are going to be created here. It's going to grow throughout the time.

But I'll show you the project here in Figma. It's a portfolio website for one of my clients. We've already done the design work.

Design first before building

Making sure that you have gotten most of the design work done on the front end is crucial for a successful project.

The last thing you want to do is change out, whole pages and whole collections and things like that in webflow after you've already spent the time building that out.

If you make sure that you spend extra time on the front end in the design stage working in Figma where you can receive feedback, where you show iterations, where you can do all of those things quickly and get feedback immediately. You can hop on a call and share your screen or they can be on their own Figma file on their own screen,and you can make the designs right then and there so much easier.

So that's what we've done. We've walked through that process. We have everything laid out exactly how he wants.

He feels like it will be the best way to present his body of work to gain new clientele.

Name everything

One of the first things that I have done in preparation for this build is I've gone through and named everything. I've named that so that whenever I pull that into Webflow, I know exactly where this image is going to go. What page is it going to go in? What section is it going to go in?

Proper naming keeps everything nice and neat, and organized. That organization is apart from the different classes you're going to build in Webflow. But having this organization is going to really help you in the build process as well.

Create a File Structure to hold your assets

I have exported the images out of Figma into a particular file structure. I have all the different files that I'm going to need for this particular website, build all the different portfolio pages and how they're gonna be organized so that they're ready to be uploaded into the CMS collection.

Export colors

Next, I took out the colors and made sure that those were in Webflow. Flowbase actually has a nice extension that works well in their toolbox section.

The color swatch importer. 

Colors export well, but gradients don't necessarily export and import in the way that I would hope that they would. Maybe that's something that can be improved in the future.

I think there's probably a limitation in Webflow and how that particularly works.

But I export all of those into a JSON file, and then I'll come back into Webflow and I upload those.

Once imported, they are named as you've named those in Figma.

Fonts

After I do that, I'll take the different fonts that I'm going to be utilizing within this particular project and I will make sure to export those.

I use this Google web fonts helper that allows me to download the different fonts from Google in in a way that it is accessible and that I can work with. I'll upload the WOFF font into Webflow.

You can upload fonts in project settings. Go to fonts, and you can upload the fonts there.

Minimal Fonts

You noticed that I uploaded four fonts. These are the different fonts I'm gonna be utilizing.

You don't want to upload a bunch of extra fonts that you're not gonna be utilizing in your project. Extra fonts increases load time.

WOFF File

The file I'm uploading is the WOFF file. I found that's the smallest file and it's one that is going to work on most web browsers, if not all of them. I haven't really had a problem.

Finweet’s Client First - Style Guide

I'm using one of client firsts or one of Finsweet's wireframes, and, you know, often I'll start a project with either a wireframe or just their straight style guide.

Style Guide

Having a style guide is so important for your particular project.

If you don't have a style guide, it is really gonna make things difficult for you when it comes to,

styling your website.

Once I get the colors uploaded, once I get the fonts uploaded, once I get all of my images outside of figma into that folder structure that I showed you, I will work through this style guide from the very top all the way down to the bottom, making sure that I'm connecting up all of the different fonts, starting with the body font. 

I connect that up and then I'm gonna connect up all the headers. Make sure that the sizes match up to the sizes in Figma.

Another tool I’ve been using in Figma is Relume’s, project starter. And they actually have a style guide built in,and it's all based on the client first system.

Style guides keep things organized and moving along quicker, you don't have to really think about it. You set all this stuff up on the front end when you start the design. Then when it comes time to build, you're not like, what was that size? Let me make sure. Let me try to calculate that into rems and all of that stuff. It's all right there for you.

When you get to the style guide in webflow, you just enter in all the information right over here on the side and you are ready to go.

I continue working through this style guide from the top all the way down to the bottom.

Making sure all the weights match up. Making sure that all the link styles match up, working on the rich text to make sure all those are matching up and then get down here to the colors and and making sure that all the colors are matching up with the different classes that are set up over here as well.

Combo Classes

If I need to change a color, then I've got that class right there. Boom. I can set that up. No problem. Ready to roll as well as the background color. If there's gonna be a lot of this purple gradient in the background set that up so that when I move into the different sections,I can easily apply that to that particular section as a combo class.

Buttons

Then I'm even gonna set up the buttons, making sure that they're matching up in the hover

states and everything like that is ready to go so that when I begin to build, I don't have to stop. I don't have to export, these different icons and put those into the buttons and

format the button. I've already done all of that on the front end.

Organization is key!

Making sure that everything is set up and organized on the front end is going to allow you to build much faster.

Making sure that everything is set up is key.

I hope you'll join me on this journey as we continue to walk through what it looks like to build from a Figma file all the way to launch in webflow.

See you in the next video.