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

This article explores advanced methods for creating Preset annotations in design systems, focusing on accessibility integration across design and development workflows.

• •Prioritize components for Preset annotations based on audit issues, implementation frequency, organization priorities, and React usage
• •Cross-reference component docs, Storybook demos, and Figma asset libraries to identify accessibility attributes not conveyed visually or in code
• •Preset annotations are most valuable for newer or less-adopted design systems; mature systems require ongoing maintenance to stay in sync
• •Figma's Code Connect feature offers a promising alternative by embedding accessibility attributes directly into exported developer code
• •The process of mapping hidden component properties for Presets may serve as a foundation for future automated annotation tooling