Please ignore the design, as it’s a 5 minute job to start the discussion.

I actually want to discuss between the two (or suggest alternatives) options of designing various states of the same component: with multiple pretty-much identical pages or a single page with a component consisting of multiple states.

It might be my OCD or a bit of the developer in me as well, that I try to have as few pages as realistically required. I’m currently working on a very large project on my own and, if I would create a page for each state, the project would be incredibly big (200 pages+). So right now, most of the pages that have various states, such as forms with empty, placeholder, filled and read-only state, I often create a single page with a single component with auto-layout and prototyping each state. While you only have 1 page, when clicking through the prototype, you have each state available, like a realistic product.

Right now this has worked great for me. I can easily find the specific page, my canvas isn’t cluttered with numerous pages and I don’t have to repeat the same elements/changes across various pages, because they often only consist of a single page.

I had a chat with another designer in the company who said “Yeah, but developers don’t work based on the prototype. They look at the canvas to check the (CSS) specs”. That actually got me thinking, because development could be more difficult, since they have to look at a Figma component and each state, instead of all pages as wholes (as there often is just 1 page, instead 5 showing the various states).

So what’s your opinion? Should I stop using Figma’s component function as a page-replacement feature or do you recommend to continue this path? Is there a middle ground or better alternative to reduce clutter on the canvas and preventing repetition (DRY)?

Please share your comment/workflow in a separate comment.