Streaming live at 10am (PST)

Workflow to produce webflow site from figma design

I’m wondering if anyone could offer advice on my work flow… for webflow as I’m going around in circles.

So I’ve had a design done for me by a designer. I’ve got a Figma file with my design at different viewport sizes. I have tried to reproduce each component element in a single draft (non-published) page to produce my ‘design system’ for my website. My idea was to do this so I could copy the components from one source location and reproduce the components quickly over many pages. I have used my CMS extensively throughout my design.

I know that symbols exist but because of the limitation to put a symbol in a collection list as a list item I don’t know how to reproduce my design work efficiently. If I put a collection list in a symbol, for example, for a set of cards showing off a businesses case studies then each time I want to change a filter on the symbol then I need to make a new symbol with a different filter setting… seems the wrong way to do things. If you could put a symbol inside a collection list you could change the filter without having to reproduce the entire symbol.

I’m now finding that as I go from page to page I have to amend the class names each time I copy a component from my design system page to my intended site pages because webflow automatically updates the classes to prevent duplication. Because of this I make mistakes and I’m getting in a mess with multiple versions and conflicting names etc. It’s also a nightmare to update.
I just want to create a symbol for each of my components and then use those on a page in my CMS collection lists. But I can’t.

Can anyone help by sharing their workflow for how I can do this efficiently without introducing errors into my design? How do I use a collection list in a symbol that allows control of the filters and is there anything else I should know to keep my work slick and error free? It can’t be as hard as I’m making out.


Here is my site Read-Only: LINK - the design system is on the page 'Design System - New.