Skip to main content

For years I have the same issue with my devs: “Where to find a hover state for this button?”

I’ve tried different approaches, but the most native (and most useful for devs) it is to have ability to see all component states on the fly, without leaving document and trying to find some piece of design documentation.

You already introduced this as Playground feature, but it is not useful for devs. So my suggestion:



  1. Rename “Playground” to “Inspect component”

  2. Add Inspect panel in playground modal (in dev mode)

  3. Increase size of modal

  4. Add zoom-in\zoom-out features for component preview

Hey @Alex_Prime, thanks for the feedback!

We’ll pass this onto our team for consideration.

As a seasoned Figma designer who is putting on a dev hat, I’m really surprised how un-useful the component playground is from a dev perspective right now. The fact that the state of the component in the playground is not reflected in the inspector (in fact the inspector is actually disabled while in playground mode) makes it virtually useless other than providing a bit of documentation to the developer of what the intended component props might be.

I strongly suggest you ditch the component playground and instead make the “Component Information” portion of the Inspector the playground - allow the dev to directly change the properties (variants etc) the way they can in the playground - and of course make it obvious when the component they’re inspect’s state has different from the design state (it should never actually permanently change the design of course).

Currently as far as I can tell, if a dev wants the goods on all the states of a component, they need to jump to the component definition, but then (depending on how the library is set up) they lose all the context for that component and might have to hunt through a long list of variants to find the one they were trying to look up.

Reply


Terms & ConditionsCookie settings