Design system annotations, part 2: Advanced methods of annotating components
> Source: GitHub_Blog
Execute Primary Source
// Problem
デザインから実装への移行過程において、アクセシビリティ要件（aria-label等）が設計段階で考慮されなかったり、実装時に情報の齟齬が生じたりすることで、一貫性が損なわれる課題がある。
// Approach
優先度の高いコンポーネントを選定し、ドキュメントやStorybook、Figmaのプロパティを横断して情報を整理する「Preset annotations」を構築する。さらに、FigmaのCode Connectを用いて属性をコードへ直接紐付ける手法を導入する。
// Result
Preset annotationsにより、設計段階での情報の欠落を防ぎ、開発者への指示を明確化できる。また、Code Connectの活用により、手動のアノテーションを最小限に抑えつつ、正確な属性をコードへ反映することが可能となった。
Senior Engineer Insight
> デザインとコードの同期は常に課題である。Code Connectのように「設計の意図」をコードのプロパティとして直接扱える仕組みを構築することは、開発効率と品質の両面において極めて有効な戦略である。