Show Main Component Annotations on Instances in Dev Mode
Problem / Use Case 🚨
As designers, we often add Dev Mode Annotations directly to the Main Components in our design system (e.g., adding important context, edge-case warnings, or technical notes to specific variants).
However, when developers inspect a screen in Dev Mode and select an Instance of that component, the annotations created on the Main Component do not appear. Because developers inspect layouts at the screen level, they rarely navigate away to inspect the Main Component file or parent component directly. As a result, critical technical context and design decisions get missed during handoff.
Proposed Solution 💡
Inherit or surface Main Component annotations directly on Instances when inspecting in Dev Mode:
-
If a Main Component (or specific variant) has an active Annotation, displaying a subtle indicator or passing through that Annotation text when a developer selects its Instance.
-
Allow developers to read the context directly on the Instance without requiring them to jump back to the Main Component / Design System file.
Why this matters ⬇️
-
Prevents communication gaps: Key guidelines and warnings written once in the design system are guaranteed to reach developers in context.
-
Saves time: Developers don't have to manually hunt down the Main Component to check for notes.
-
Improves handoff accuracy: Reduces bugs and back-and-forth alignment during implementation.
Thank you for your help! 🙏🏼
