The frame is one state
A Figma frame is a photograph of the page at its best moment: real copy, loaded images, no error. Production pages spend most of their life in other states, and each one the design never drew gets decided late, by whoever is coding that afternoon.
The seven states
Default, hover and focus, loading, empty, error, reduced motion, and the in-between state where content has arrived but media has not.
Hover and focus come as a pair because keyboard users never hover. Loading needs a skeleton with the same height as the content it replaces. Empty and error need their own copy, not a blank box. Reduced motion needs a still equivalent for every animation, not a faster animation.
Why this decides layout shift
Cumulative layout shift comes from a state that changes size. If the skeleton, the empty message and the loaded card all share one fixed minimum height, the page does not move when they swap. Our concept demos record a CLS of 0.000 on mobile in nearly every case; the exceptions are 0.001.
What to ask the designer
Ask for the states as frames, or agree the rules in a sentence each: skeleton height, empty copy, error copy, reduced-motion still. The cost is an hour of design now against a day of rework after launch. We run this as a free one-frame trial: you send a frame, we return it built with all seven states.