Design system annotations, part 2: Advanced methods of annotating components

This post details advanced methods for creating 'Preset annotations' for design system components. It outlines a process for prioritizing components that would benefit most from these annotations, using internal tools like Primer Query and criteria such as alignment to organization priorities, frequency in audit issues, React implementation, and implementation frequency. The post also details how to map out necessary properties by cross-referencing component documentation on Primer.style, coded demos in Storybook, and component properties in Figma assets, as well as other potential sources like team experiences and audit findings. It provides a concrete example with the TextInput component, detailing its Preset annotation and learnings about maintenance and potential automation. It also addresses the confusion arising from overlap with other annotation types and suggests solutions.
More from the Design System Annotations trail
- Design system annotations, part 1: How accessibility gets left out of components
- Considerations for making a tree view component accessible
- Design's journey towards accessibility
- Unlocking inclusive design: how Primer's color system is making GitHub.com more inclusive
- Creating an accessible search experience with the QueryBuilder component