Components in Webflow - From Figma to Webflow - Part 2

Transcript edited for readability

Well, Casey here, last time we began this Figma to Webflow journey, and I walked you through the initial starting process of what it is that I do when I am moving from Figma to Webflow and I've already designed out a design and I'm going to build that out in Webflow. So we walk through that in part one. If you missed that, I'd definitely encourage you to to check that out.

Now we're in part two. I've moved over all of the styles and built out the style guide. I wanna show you some of the progress that I've made over the last couple of days. And just the the way that I think about building a website, and hopefully that will help you as you move into Webflow and begin to to utilize the power that it has. So let's hop into the computer. and I'll show you some of the things that I've done over the last couple of days.

Alright. So now we're here in the computer and here are some of the things that I've been able to accomplish over the last couple of days. If we go back over here, you see this at the home page. But if we go back over here to the style guide, let me just show you some of the things that I've been able to do in I do use, and I think I talked about it in the last video, I use client first, you know, version two. They've updated that. The documentation is great. I would certainly encourage you if you're not using Client First to hop on with that. It is amazing. It's it's been super helpful for me. but I've gone ahead and pulled in all of the different styles. I've set up the style guide. We talked about that last time.

But some of the other things that I've done, as you can see here, I begin to build out the navigation bar. And that's one of the first things that I do after I get the style guide set up. I've got all of the styles pulled in all the colors pulled in, everything like that. Ready to go. I build out the navigation bar. And then after I build out the navigation bar, if you can see here at the very bottom, I built out the footer. So those are the first two things that I build on a website whenever I get started. And the reason that I do that is because these two things are gonna show up on every single page in the website. And so after I build them, what I will do is I will actually make these components.

And so you can come over here and you can see there's new components that I've built out. I'll talk about those in just a moment. But the two top components that I've built out is the footer and the nav bar, and those things again are going to show up on every single page. And so I'm gonna go ahead and build those out. The next thing I built out is this call to action. So this call to action is gonna show up on almost every single page on the website. And so I went ahead and built out the call to action. That way, it's there. And what did I do again? Well, I made the call to action a component. So that way, whenever I need it, all I have to do is type in, command e, and then I can type in CTA . Boom. I can throw that on the page wherever I need it.

The other thing that I've done in in keeping with the same theme and building out components is I've gone ahead and built out all of the different buttons that I'm gonna need on the website that comes straight from the design. And the other thing that I've done is I've made each of these buttons, you guessed it, a component. That way, I can easily reuse them. But also, if I need to change them or change the link or anything like that, it's going to be there as soon as I stick it on the website.

And so those are the top things that I've done. Then I've gone over after I get all of those things built out there and I begin to build out the homepage. And so this is usually the first page that I'm gonna build out on the website as the homepage. It houses a lot of the different sections that are gonna connect to the other pages on the website, as well as typically there are some things that will be reusable on the homepage for other pages so that I can turn those into components or either begin to build out those pages.

So that's what I've been doing over the last couple of days. I hope that this has been helpful for you. If you have any questions about anything that I've talked about, definitely leave those in the comments below. And I'll be happy to answer those for you.