デザインコンポーネントを視覚化するための効率的なツール
Capsule Highlighterは、A.comのフロントエンドコンポーネントを視覚的に強調表示することで開発ワークフローを向上させるために設計された無料のChromeアドオンです。このツールを使用すると、ユーザーはCapsuleデザインシステムからのコンポーネントやカスタムおよびPWAコンポーネントを簡単に特定してラベル付けできます。ツールバーアイコンをクリックすることで、ユーザーはこれらのコンポーネントをアウトライン表示するオーバーレイを切り替えることができ、さまざまなUI要素のソースを簡単に区別できます。
視覚的な特定に加えて、Capsule Highlighterは、タイプごとのカウントを表示し、Capsuleの採用状況をカスタムコンポーネントと比較するカバレッジパネルを提供します。ユーザーは監査目的のためにJSONスナップショットをエクスポートすることもできます。このツールはブラウザ内で完全に動作し、ネットワークコールが行われないため、エンジニアリング、デザイン、QAチームがUIの使用状況や移行の進捗を追跡する際の効率が向上します。