Zenn
🎨

【TSKaigi2025 day1】「堅牢なデザインシステムをつくるためのTypeScript活用」で学ぶ、デザインシステムの構築と運用

に公開
Figma
TypeScript
デザイン
designsystem
TSKaigi
tech

こんにちはkei9oです。普段はRuby on Railsを使った開発業務に携わっていますが、個人的にTypeScriptを勉強してます。

本日開催されたTSKaigi2025の1日目に参加し、特にtakanoripさんのセッション「堅牢なデザインシステムをつくるためのTypeScript活用」が勉強になったのでレポートします！

セッション概要

デザインシステムとは？ そして直面する課題

セッションの冒頭で、デザインシステム[1]は「ルールセット」「ドキュメント」「実装」の3要素から成り立ち、これらはどれ一つ欠けても機能しないと説明がありました（参考: 「ちいさくはじめるデザインシステム[2]」）。

しかし、現実にはデザインシステムのルールを開発チーム全体で意識的に保ち続けるハードルは高いです。たとえば、ドキュメントが更新されずに実態と乖離してしまうことでルールが陳腐化したり、実装を進める中で気づかないうちにルールから外れてしまうといった意図しない逸脱も発生したりします。

堅牢なデザインシステム構築への3つのアプローチ

これらの課題に対し、takanoripさんはTypeScriptとLLMを活用した以下の3つのアプローチを提示しました。

  1. 仕組みによるルールの強制: 人間の善意に頼らず、TypeScriptの型システムなどを活用してルールを仕組み化
  2. 逸脱の可視化: ルールは守られないことを前提とし、逸脱している箇所を容易に発見できる仕組みを導入
  3. ドキュメントの継続的更新: LLMなどの技術支援を受け、ドキュメントを常に最新の状態に維持

TypeScriptを活用した具体的な取り組み事例

セッションでは、TypeScriptをデザインシステムに活かす具体的な方法がいくつか紹介されました。

1. デザイントークン[3]の型定義活用

  • Style Dictionary[4]の導入: デザイントークンをJSONなどで一元管理し、Style Dictionaryを用いて各プラットフォーム（Web, iOS, Androidなど）向けの型定義やコードを自動生成します。これにより、タイポや意図しない値の使用を防ぎ、デザインの一貫性を担保。

2. コンポーネントのprops[5]設計

  • Styleの直接上書きを禁止: コンポーネントのスタイルを外部から直接上書きできないようにpropsを設計。
  • CSS記述の制限: 開発者が任意のCSSを記述できないようにすることで、予期せぬスタイル崩れを防止。
  • 自由度と制約のバランス: 基本的に自由度を下げつつ、本当に必要な箇所にはバリアントやオプションを用意することで、システムの堅牢性と開発の柔軟性を両立。

3. Figmaとの連携

  • FigmaをSSoT (Single Source of Truth)[6]として活用: デザインツールであるFigmaを信頼できる唯一の情報源と位置づけ、デザイントークンをビジュアルとセットで管理します。これにより、デザイナーとエンジニア間の認識齟齬を低減。

4. LLMによるドキュメント自動生成・更新支援

  • ドキュメント作成の効率化: デザインシステムのドキュメント作成・更新には、デザイナーとエンジニア双方の知識が求められます。このプロセスにLLMを導入することで、両者の負担を軽減し、効率的にドキュメントを整備。
  • 説得力のあるドキュメント: 常にメンテナンスされているドキュメントは、デザインシステムへの信頼性を高め、チーム全体の開発効率が向上。

所感

これらの取り組みを実践することで、実際にCSSの意図しない上書きを防ぎ、スタイル崩れのリスクを低減できるとのことでした。

このセッションを聞いて、TypeScriptの静的型付けの恩恵をデザインシステムに応用することで、より堅牢でメンテナンス性の高い開発基盤を構築できる可能性を感じました。特に、デザイントークンやコンポーネントのprops設計に型を導入することでヒューマンエラーを減らし、コードの品質を初期段階から高められる点は大きなメリットだと感じます。

まとめ

堅牢なデザインシステムを整備・運用することは、プロダクト全体の一貫性を保つだけでなく、開発リソースの配分を最適化し、結果としてチーム全体の生産性向上に役立ちそうです！

今回の知見を自分も試せたらまた書こうと思います💡

ではまた〜👋

脚注

  1. デザインシステム: デザインの一貫性を保ち、効率的な開発を促進するための再利用可能なコンポーネントやルールの集合。 ↩︎

  2. 書籍 ちいさくはじめるデザインシステム ↩︎

  3. デザイントークン: デザインシステムを構成する色・フォント・余白等の最小単位。名前を付けて一元管理し、一貫性維持と開発効率向上を目的とする設計値。 ↩︎

  4. Style Dictionary: デザイントークンを一元管理し、iOS、Android、Web等の多様なプラットフォームに対応したスタイルコードを自動生成するビルドシステム。 ↩︎

  5. props (プロパティ): Reactなどのコンポーネントに渡されるデータ。TypeScriptで型定義することにより、データの型安全性を保証し、開発効率と保守性を向上させる仕組み。 ↩︎

  6. SSoT (Single Source of Truth / 信頼できる唯一の情報源): 特定の情報に対し、組織内で唯一信頼できるとされる正規の情報源。データの重複や矛盾を防ぎ、一貫性を保つための原則またはシステム。 ↩︎

Discussion