Explicit State

Explicit State is the practice of baking the five core interaction states into every component as named variants instead of leaving them as invisible team knowledge. You build one button. You add a property called State. Its values are Default, Hover, Focus, Disabled, and Error. Each value maps to exact tokens for background, border, text, shadow, and any transform. When Figma AI or Claude Design reads the file in 2026 it sees state=focus and swaps in the correct focus ring token and color shift. No screenshots. No interpretation. The component becomes executable logic rather than a picture. This is the difference between a system that survives AI generation and one that explodes into ten competing versions of the same button. Structure at this level raises output quality because the machine inherits every decision you bothered to name.

Explicit State is not five separate components scattered across frames with names like Button Hover Final v3. It is not a prototype interaction that only fires when a human hits play. It is not a FigJam sticky note that says "make disabled look gray." It is not drawing the hover state on a separate layer then forgetting to turn it off before handoff. Those patterns assume a human will always be in the loop to correct, interpret, or remember. AI tools have zero memory and zero restraint. They treat every detached layer and unnamed state as intentional and ship it at full speed. The result is not slower progress. It is faster production of sloppy, inconsistent, inaccessible interfaces that would have been caught by human friction in the old days.

Concrete example. Shopify Polaris ships their Button with an explicit State property that lists the five variants and maps each to a queryable token set. Hover pulls background.interactive.hover. Focus pulls the exact border.focus token that meets accessibility standards. When their internal AI tools generate new merchant dashboard flows the output never invents a sixth hover treatment because the structure forbids it. Material Design 3 goes deeper. Their error state on text fields chains reference tokens through system tokens down to the component variant. Google publishes the full hierarchy on m3.material.io so any machine can walk it. GitHub Primer ties the same explicit focus variant to both their Figma library and their React code. The :focus-visible class in production matches the named variant in design with zero drift. Atlassian does the same across Jira and Confluence. Their catalog exposes every state as structured data so code gen tools consume it directly.

The negative example is more common. A Series C fintech team in 2025 had their primary CTA living as seventeen detached instances. One hover used opacity. Another used scale transform. Three different shadow values competed. Focus existed only as a loose layer on one frame. When they pointed Claude Design at the file to generate account settings screens the AI produced a new primary button that mixed all prior sins plus an error state that failed WCAG contrast. The generated screens looked clean in preview. They broke the coded component library and triggered an accessibility audit that cost the team six weeks. The missing explicit states were not a minor documentation gap. They were the ceiling on quality. The machine simply amplified the mess at generation speed.

Another failure case came from a retail SaaS company migrating to Figma AI in early 2026. Their form inputs had default and error states defined as variants but hover and focus lived in separate hidden groups. The AI generated checkout flows where focus rings changed thickness between screens and disabled buttons kept their hover states active. Every new screen compounded the problem. After two sprints of fixes the team finally collapsed everything into one component with the five explicit states. Generation accuracy jumped from 35 percent to 92 percent on interaction consistency. The cleanup took four days. The time saved afterward was measured in months.

Use Explicit State on every interactive component that ships in your product. Buttons, inputs, selects, tabs, navigation items, cards with actions, modals, data tables. Use it before you run your first AI generation pass and before you hand off to developers. Do the work while the component is still simple. Tokenize values first, collapse duplicates second, then add the five states. The return appears the moment the tool generates its first hundred screens and nothing contradicts itself. Teams that treat this as optional discover their brand, contrast ratios, and interaction quality degrade at the exact speed AI can produce new screens.

Skip Explicit State only on purely static marketing assets that live outside the product system. A hero illustration on a campaign landing page does not need an error variant. A brand logo does not need hover. Decorative dividers and illustrative icons get a pass. Everything that touches real users in the actual product does not. The lazy excuse "our components are too complex" really means "we never decided what our error state should look like." Decide. Name it. Attach the tokens. The machine is coming for every unnamed decision.

Default sets the baseline everyone expects. Hover signals affordance. Focus keeps keyboard and screen reader users from getting lost. Disabled explains why an action is unavailable instead of looking broken. Error delivers clear validation feedback without ambiguity. Leave any of these unnamed and the AI will synthesize something plausible that still manages to be wrong. The five states are not arbitrary. They are the minimum set that prevents the majority of interaction bugs.

Your job is no longer to hand draw every state on every screen. It is to define the rules so completely that the machine can draw them better and faster than you while staying on brand. The article Machine Readable Design Systems Are Not Optional in 2026 makes the stakes plain. Structure first. States explicit. Then watch the tools multiply your good decisions instead of your lazy ones.

If a state has no name the machine will invent one and you will ship it.