Separate pages for a form or put all states in a single page, single component?

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.

Hi @Ssjeefr

I think you should ask your developer(s) about their preferences, while making sure to explain your constraints too. It’s always good to have insight from peers but everyone have their way of working/understanding others work. If you have the liberty to decided how you’ll hand off your design at your company, definitely talk with people that are going to interpret your Figma file on their own.

On a personal level : while having all the views possible/available can be nice, some developers might have some trouble to detect what changed from a view to the next one (especially when there are 200+ of them).
From your example i’m sure you can spend few minutes to make some documentation explaining that there is a view with a container inside, and all of the component’s variation will fit in this container. So they just have to focus on component variation rather than views.

Hope it helped