Build a Portfolio CMS in Webflow - Figma to Webflow - Part 3

Video manuscript has been edited for readability

Today we are going to part three of Figma to Webflow, how I take a design in Figma and develop that out in Webflow.

Webflow CMS Tips and Tricks

Today, we're going to be looking at the CMS. I'm going to give you some tips and tricks on how to best design the CMS in Webflow so that it will speed up your build and keep things much more organized.

Let's hop into the computer and check that out.

Alright. Now we're in the computer here. And as you can see on the screen, I have the CMS collection that I have built out for my client, and this started in Figma.

Layout the Webflow Collection Flow in a Figma File

If we pop back over here to the Figma file, you can see that, you know, I have the portfolio page with all the different items.

I actually went ahead and built out all of the different items in Figma and laid them out exactly how they're going to be laid out in the collection page or the portfolio page on the website. That way I would understand how can we make this collection work for future portfolio pieces.

As well as how can we make it consistent so that as people are looking through, they have an idea of what information they're going to be getting as they look through his portfolio.

They would know right away, this is going to be you know, the heading field, the results field, the challenges field, the summary field, the social post field. Everything is consistent, everything is easy to go, scan through, and to see that this guy would actually be a good person to help me when it comes to social media, management, and all the other things that he's currently doing for his clients.

As you can see, I built all of these out and then what I did so that I would have a good understanding of all of the different fields that I'm going to need in the structure that I'm going to need for the actual portfolio page, I took and combined all the different elements from each of the portfolio pieces that were different into one long portfolio piece.

This is actually what I use as a template to build out the actual portfolio page inside of Webflow.

Write out all the fields in a notes app before starting to build your collection in Webflow

The next thing I did before I jumped in and built this out is I opened up a notes file whatever file works for works, and I pulled up Figma, and I have my notes file right next to one another. I went down and literally wrote out every single field that I'm going to need and what type of field it's going to be.

As you see for the category, it's going to be a reference field. The header is going to be a plain text field and the paragraph overview plain text field.

The award is going to be an image field, etcetera, etcetera, etcetera. I went down and wrote out all the different types of fields that I'm going to need.

Then underneath that, I wrote out exactly what that particular field is going to be named in the CMS along with the help text that is there

This gave me an opportunity to really sit down, think about what the flow was going to look like inside of the CMS. As well as on the portfolio page so that when I went inside of Webflow to build that out, I already had all the text written out ready to go.

Essentially, I just copied and pasted each of these into the different fields, and I checked these off as I went through and built out each field inside of the collection.

Let's hop into the collection here and I'll show you what I ended up doing.

Of course, everything has a title. I have a sort order on these. I've got my card image, my header image, my header category, which pulling from this category's file right over here.

A reference file. As well as I went ahead and named, each one of these sections.

The results section and exactly where that's going to appear inside of the collection or the portfolio item so that whenever my client is referencing that, it would make it easy for them.

It is also be easy for me as I'm building this out and connecting each of these fields.

Now, one of the things that I ended up doing inside of the Webflow CMS that I did not do on the notes and what I would highly recommend is if you have something like this, it's pretty complex and long.

I mean, there are three fields out of sixty that are left and so doing the math. What is that? Fifty seven fields that's quite a bit of fields.

To make my life easier when I was connecting these and I'll show you that here in a moment. I labeled each of these as sections and then one a one b one c. That way, they will appear in order when I go to connect each of these fields on the portfolio page.

You can see that there are four sections. Some sections have more options than others, but each of them are labeled so that they will show up in order.

Let me show you that page real quick and show you exactly what I'm talking about here.

If we click over here to the portfolios template. Essentially, when you are connecting these particular pages, you're going to click on one of these items, you're going to go over here to the gear, and then it's going to say get text from. This is where labeling each of those sections particularly down in the social media post area was really helpful.

If I click on this, you can see that there's a header category. Iif you click on, here's the title right here and then the header overview paragraph.It makes it really easy for me. to know exactly what I need to connect that to. But where it becomes really useful and really important is down here in the social content field. When I click on this particular rich text field to connect it, you notice right here that it says social content section one c first post three column grid. Then you click on this next one - section one c, second post three column grid.

I know exactly which field to connect this to, and there's no mystery. There's no guessing or anything like that.

Then as you move to different pages that have different items on that. If we pop over here to the Gym Shark portfolio piece, you can see that in this, we have a lot more fields to connect up particularly in the social content where we have a YouTube video that's going to connect up.

This is section one b standalone video social post. This right here heading is the beginning of that section one a heading in paragraph. As you keep moving down, I know exactly which section I'm in, exactly which post to connect as well as over here on the left side, you noticed that I have each of these labeled, social content, three column grid.

I know exactly what that is as well as I know exactly where the items are, so that I know exactly which rich text field to connect, as well as which one to connect over here on the right side. That makes it really easy.

Pro Tip - Name Sections with Numbers and Letters to find them easier when connecting to the front end of the CMS in Webflow

A pro tip right there that I hope that you take. It's something that I probably should have done from the very beginning because if you we popped back over here to my notes file, you noticed that I don't have those sections on here, and I originally built out the collection without those sections labeled like that.

I have right here social content, first social media posts, section one, but I did not put section one a, one b, one c on there. Everything was just kind of smushed together, and I was having to look through to see which section am I on, which which which one do I need to connect, and it was very tedious.

I went back through and renamed everything in the back end of the collection so that when I was connecting the rest of the post together, it ended up making things run a lot smoother.

Use Conditional Visibility to hide and show sections in Webflow

The other thing that I did is you noticed that on this particular page there are a lot of YouTube videos and then there's a summary section. There's this approach and challenges section. If we pop back over here to the John Wick portfolio piece, you're going to notice that those sections are not there.

We have a results section, but there's not a challenges or approach section. It just hops right into summary and into the social content, but there's no YouTube videos. So one of the ways that you can do that is actually by using the conditional visibility field and that's that's what I've done on most of these right here.

I've used the conditional visibility field in order to to hide different sections. You can see the challenges section which, doesn't appear on the John Wick post it's hidden. So if there's nothing that's put inside of this right side paragraph on the challenges field, it's not going to show up in the collection.

I've gone through and you can see each of these little marks next to the different sections. These are all conditional visibility marks. I there's nothing in that particular rich text field or that particular section, then the entire section would hide or or that particular field would hide.

Conditional Visibility is a really powerful way to be able to give your client options as they're going to be building out a portfolio section in the future without having to build out multiple portfolio sections.

If we hop back over here to the back end of the CMS, you can see all of these different options that they would have a three column grid, a two column grid, different headings and stand alone posts, and they can create different sections and things like that.

All again, following what was in the Figma file, but utilizing the power of conditional visibility and also the rich text fields because the rich text fields give you options.

Rich Text Fields are powerful, especially for portfolio Websites

With Rich Text fields, you can put text, you can put images, you can put videos, you can embed social media posts inside of those fields as well.

They're very powerful to utilize when it comes to building out a portfolio as in in this particular case when you're going to be handing this over to a client.

Conclusion

Hopefully, that gives you some ideas on how you might be able to build out your CMS collections.

Hopefully, you have some ideas on how you might be able to build your next CMS collection as you've watched how I bring a design over from Figma into Webflow and build out a portfolio CMS for one of my clients.

Join me in the next video as we're going to be looking at how we might launch the website. Then what it's going to look like to hand that website off to a client, all the documentation, and things like that that I would do before handing that off to the particular client.

I look forward to seeing you in the next episodes of Figma to Webflow.