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.