B2B: Syndigoデザインシステム - 統合コンポーネントライブラリとデザイン・トゥ・コードパイプライン
プロジェクトについて
プロジェクト概要
- 役割: Syndigoにおけるシニアマネージャー、UXデザイン — 2023年11月から現在まで（UX経験10年以上）
- ソリューション: Syndigoのプロダクトスイート全体にまたがる、単一で統合されたコードコネクト済みのデザインシステム …. 断片化し重複したコンポーネントライブラリを、Storybook、GitHub、そして社内のAIプロトタイピングツールに直接つながれた、統制のとれた単一の真実の源に置き換えました。
- 目的: デザイナー、フロントエンドエンジニア、プロダクトマネージャーに、そこから構築できる一貫した単一のシステムを提供し、ドリフトを排除し、デザインとコードの間のギャップを埋め、一貫性やアクセシビリティを犠牲にすることなく組織全体がより速く動けるようにすること。私はSyndigo … MDM、PXM、シンジケーション製品にまたがるB2Bプロダクトデータプラットフォーム … にシニアマネージャー・オブ・UXデザインとして加わりました。私の責任は3つでした：
Nutrition Analysisプラットフォームや Syndication Tracker を含む中核製品全体でエンドツーエンドのプロダクトデザインを主導し、同時にそれらに一緒に取り組むデザイナーを監督すること。
断片化し統制のない設計システムのオーナーシップを引き受け、それを単一で一貫したコードコネクト済みの真実の源へと再構築すること。
8名以上のプロダクトデザイナーからなるチームをマネジメントし成長させ、VP of Designに報告し、Director of Designおよびフロントエンドエンジニアリングと連携すること。
デザインプロセス
私は再構築を明確な段階に分けて進め、各段階を監査に基づいて行いました。
監査：各製品にまたがるすべてのコンポーネントを棚卸しし、Figmaを本番と突き合わせ、あらゆる重複と不整合を洗い出しました。
統合：重複の各セットを単一の正規コンポーネントにまとめ、それぞれをアナトミー、バリアント、バージョン履歴とともに文書化し、明確なワークフロー — アイデア出し、進行中、完了 — を導入し、チケットをデザインフレームに紐づけました。
Code Connect & Storybook：70以上のすべてのコンポーネントについて、Code Connectとコンポーネントコードのファイルを書き起こし、デザインとライブのコード化された形を並べて表示できるようStorybookを構築しました。
GitHub連携：リポジトリにUXの担当者がいなかったため、エンジニアリングが私にアクセスを付与し、私はコンポーネントとCode Connectのファイルを直接GitHubにコミットして、デザインからコードへのループを閉じました。
AIを活用したプロトタイピング：社内で初めてFigma MCPを使い、開発前にテストするためにデザインをコード化されたクリック可能なプロトタイプに変換し、次にLovableとClaude Designをシステムのコンポーネントに固定して、チームがシステムに沿った作業しか生成できないようにしました。
アクセシビリティ：すべてのコンポーネントをWCAG AAA基準を満たすよう構築し、検証しました。
アクセシビリティ
システムはWCAG AAA基準を満たすよう構築されました。コンポーネントはスクリーンリーダー向けに — セマンティックな構造、ARIAロール、明確なラベルを備えて — 設計され、スクリーンリーダーソフトウェアで直接テストされました。色は複数の種類の色覚異常に対応して扱われ、情報が色だけに依存することは決してないようにしました。適合性は自動アクセシビリティツールで確認され、文書化されたガイドラインに記録されたため、あらゆるチームがアクセシブルにシステムを構築し貢献できました。
インパクト指標
70以上のコンポーネントを、単一のコードコネクト済みの真実の源に統合。
Syndigo初のデザインからエンジニアリングへのパイプライン。構築前にコード化されたプロトタイプでデザインを検証。
LovableとClaude Designを通じて、プロダクトおよびデザインチーム全体で全社的にシステムに沿ったプロトタイピングを採用。
一貫したコードコネクト済みコンポーネントにより、デザインから開発までのサイクルタイムを短縮。
背景と課題の提示
デザインシステムには構造がなく、統制もほとんどありませんでした。同じコンポーネントがしばしば製品間で複数の一貫性のないバージョンで存在し、デザインを出荷されたコードにつなぐものは何もありませんでした：Storybookもなく、コードコネクト済みコンポーネントもなく、GitHubにUXの存在もありませんでした。
その結果がドリフトでした。デザイナー、エンジニア、プロダクトマネージャーがそれぞれシステムを異なって解釈し、提供を遅らせ、エンジニアに一貫性のない仕様からUIを再構築させることになりました。
ステークホルダー分析
フロントエンドエンジニア：一貫性のない仕様から作り直すのではなく、デザインの意図と一致し、そのまま本番に組み込めるコンポーネントを必要としていました。
プロダクトデザイナー：私のチームは、UIを再作成するのではなく課題解決に集中できるよう、統制のとれた単一のコンポーネントキットを必要としていました。
プロダクトマネージャー：実際の製品から逸脱することなく、アイデアを素早くプロトタイプしテストする必要がありました。
システム監査
何かを変える前に、システムが実際にどう使われているかを監査し、再構築が証拠に基づくものになるようにしました。
コンポーネントインベントリ：使用中のすべてのコンポーネントをカタログ化し、重複を特定。
Figmaから本番へのマッピング：デザインライブラリを出荷済みUIと比較し、ドリフトを突き止め。
チームインタビュー：デザイナーとエンジニアに、システムが役立った箇所と回避策を取っていた箇所について話を聞きました。
UI Relayプラグイン：システムを運用するためのカスタムFigmaプラグインを構築—コンポーネントをコードにマッピングし、カバレッジとコードの健全性を追跡し、コンポーネントコードを生成・同期し、トークンとテンプレートを管理し、修正すべきギャップを洗い出す — これにより、統制とデザインからコードへの流れを、一度きりの整理ではなく継続的なワークフローに変えました。
課題と解決策
中心的な課題は、デザインとコードの間の欠けたつながりでした。リポジトリにUXの存在がなかったため、私はGitHubへのアクセスを確保し、Code Connectとコンポーネントのファイルのオーナーシップを自ら引き受けたので、デザインの意思決定が再解釈されることなく忠実に本番に届くようになりました。
断片化が2つ目でした。一貫性を手作業で取り締まるのではなく、重複を正規コンポーネントに統合し、システムが再び逸脱するのを止めるためにUI Relayプラグインを構築しました。
採用が3つ目でした。チームがすでに使いたがっていたツール — コード化されたプロトタイプ、Lovable、Claude Design — にシステムを組み込むことで、システムに沿って構築することを最も抵抗の少ない道にしました。
