Component states - global reference page

Problem

Managing component states (default, hover, focus, and active) can be tricky, and in most cases there are baseline, or common approaches that span many components. Currently, we are visually representing states for each component within that component’s page. And while this makes sense initially, it does not scale well.

It makes it tougher for a designer or developer when they have to go to multiple places to answer the simple question, “how are button and text inputs different or the similar?”

Proposal

• Create a single Component states page in our Figma Globals file that documents how we handle states. This could be similar to Material Design’s States page, only in Figma.
• Include states for different components and visually document similarities and differences
• Pajamas could have a similar page, although once interactive examples are present for each component, it would be more geared towards documenting our approach to states, where the content in Figma would be tailored for designers and developers working on new efforts, or designing with existing.

View component states in Figma → (in progress)

Pros

• One place to reference all state information
• Much faster to add new components and build them for default use, instead of trying to configure everything for states that might never get used in a design comp
• If there are theme or dark mode considerations, the documentation can be updated in one place, rather than for each component

Cons

• When referencing design specs in Pajamas, a link to a component’s default design, and state examples might be required (unless we directly reference a new States page in Pajamas)
• Not seeing states directly along side of a component (in an Instances frame, for example)

/cc @gitlab-com/gitlab-ux/figma