A naukri.com initiative
Github
2w
128
Image Credit: Github
Design system annotations, part 2: Advanced methods of annotating components
- In part two of the design system annotation series, creating Preset annotations for design system components is explored.
- To build Preset annotations, start by assessing components to determine which ones need it and what properties should be included.
- Components are prioritized based on organization priorities, accessibility audit issues, React implementations, and frequency of implementation.
- Various sources like component documentation, Storybook demos, and Figma asset library are cross-referenced to map out component properties for Preset annotations.
- Preset annotations may not be necessary for every team, but they are beneficial for younger design systems and less adopted ones.
- Maintaining Preset annotations is crucial as design system components evolve, ensuring alignment between annotations and components.
- Automated annotation tools require an understanding of component properties, making the creation of Preset annotations a potential step towards automation.
- Experimentation with Figma's Code Connect feature in Dev Mode allows adding accessibility details directly into the code, reducing the need for some annotations.
- Tips for setting up Code Connect include maintaining consistency, experimenting in a design system library branch, and using visual regression testing.
- Future plans include releasing the GitHub Annotation Toolkit, aiming to improve component accessibility through annotations.
Read Full Article
7 Likes
For uninterrupted reading, download the app