I have a fairly complex Figma prototype, of a product (produce) section, that I’m taking into Webflow.
Here’s a screen recording of the section in Figma.
I’m not sure where I should start with this. I know how to translate the design of this one for one, but am not sure how to nest each ‘stage’, and then create the pathing/interactions between the stages of the section.
I’ll define each stage of the prototype from top to bottom: (Stage1) Collective Produce Viewing Interface < (2) Type of Produce < (3) Variant of Produce Type < (4) Produce Card.
Looking for some general knowledge and direction on how anyone might approach this, here is what I’m thinking about right now.
- Should I create this whole section inside of a CMS collection item? Or should I nest the content to coincide with each stage?
- Is it even worth it to try and use a CMS for this? Would manually creating the Produce Cards be easier?
- If I do use a CMS, how can I create a component that has multiple images that can be filled by the multi-image CMS field? Should I use a custom slider like described here? I’m not sure a collection is best equipped for something like that.
- Will I have to tackle the multitude of different interactions in one interactions panel? Or can I, again, nest these as components, maybe utilize conditional visibility?
If it’s not clear, I’m a bit over my head with this project. I have a decent understanding of Webflow and how to make things work within the system, but this has surpassed my knowledge. The complexity of this isn’t computing for me at Webflow’s level, unlike it did in Figma. I don’t know how to put the pieces together. I do believe this is something I can create in Webflow, it doesn’t seem out of the realm of possibility, do you all agree? Would greatly appreciate any insight into how to tackle this, thanks.
Project is for a client, and site is a WIP.
Here is my public share link: Webflow - Glassroots Produce