Get the M2M ICP Discovery Worksheet
Know who your website should speak to and what to say.
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.
Your Marketing Isn't Bringing in Leads and You Can't Figure Out Why
Score your marketing across 7 key areas in 5 minutes and find out exactly what's holding back your leads and what to fix first.
Questions You Might Be Asking
Symbols were Webflow's original reusable element; components replaced them and added configurable properties. A symbol was static — every instance identical. A component lets you expose text, links, or images as properties so each instance can carry different content while sharing the same structure. If you're starting a new project today, always use components. Existing symbols can usually be converted without much work.
Turn it into a component the second it shows up in two or more places. Nav, footer, CTA blocks, buttons, testimonial cards — all components. For one-off sections like a unique hero, leave it as regular elements. The test: if you'd hate updating this thing in five places, make it a component now. Future you will thank you when a change takes five seconds instead of an hour.
Yes, and it's a good practice once you're comfortable. A Nav component can contain a Button component; a Card component can contain a Badge component. Nested components let you update styles at the lowest level and have changes ripple up. The main trade-off is complexity — deep nesting can make it harder for a teammate to trace where a style is coming from, so keep nesting sane.
Edit the master by opening any instance and clicking the edit icon — changes automatically apply everywhere. To modify just one instance, unlink it first (right-click > Unlink Component), which turns it back into regular elements. Watch out for layout changes on the master, since they can shift downstream pages in unexpected ways. Preview multiple pages after every structural update to the master.
