ストーリーブックを用いた設計トークンの管理

TL私はあなたのスタイルシートと資産ファイルからstorybook addon generating design token documentationを構築しました.
ここでデモをチェックしてください:https://storybook-design-token.netlify.com/
フロントエンド開発者として、私は多くのUIコンポーネントライブラリを構築しました.そうすることで、私の主な問題の一つは、常に同期とデザインと開発を続けている.デザイン言語を翻訳して、私のケースで最も多くのスケッチファイルの形で届けられる私のケースでは、コードへのコードはデザインシステムの全体のライフサイクルを通してデザイン変化で進行中のプロセスです.
デザインと開発のギャップを狭めるために、デザインシステムのドキュメントの多くをブラウザに移動させる方法を評価し、デザインシステムの重要な部分についての1つのポイントを作成します.つまり、UIコンポーネントを越えて、基礎となる設計言語を調べることになります.スケッチとFigmaのようなツールは、図面を作成して、あなたのソフトウェアのルックアンドフィールを輸送するのに最適ですが、彼らはデザインシステムの知識を分散させます.そして、それを見つけて、これらの情報にアクセスするのがより難しくします.それらを実際の製品(すなわちコード)に近づけることは、時代遅れになるより少ないリスクを持っている生活ドキュメンテーションを維持するのを助けます.

デザイントークン

コンポーネントは、当社の製品のビルディングブロックを提供していますが、デザイントークンは、コンポーネントの外観を形成するために使用できるプロパティのセットを定義します.典型的には、タイポグラフィ、色、空間、またはデザインシステムの図像のようなものを定義します.いくつかの良い例を得るためにSalesforce's collection of design tokensを見てください.ブラッドフロストは最近design tokens in context of his atomic design principles .
開発者の視点からのデザイントークンについてのきちんとしたこと?ほとんどの場合、それらは変数(例えばCSSカスタムプロパティまたはSASS変数)とアイコンファイルのような資産として記述できます.

ストーリーブックによる設計トークンの管理

Storybookは、あなたのライブラリーを使っている製品チームのためのきちんとした視覚的で技術的なドキュメンテーションも作成する間、孤立した環境で再利用可能なコンポーネントライブラリを開発するためのすばらしいツールです.私は非常に再利用可能なコンポーネントライブラリを構築する必要がある場合は試してみることをお勧めします.これは、すべての主要なJavaScriptのフレームワークやプレーンHTMLとCSSで素晴らしい作品.

ストーリーとしてのデザイントークン

物語は、コンポーネントとその異なる状態を記述する物語を使用します.これらの物語は、開発者によって小さなテンプレートのフォームの例の使用状況を示す形式で書かれています.IBM's storybookは、様々な構成要素を備えた素晴らしい例を提供する.
私の最初の試みは、物語の本には、手動でストーリーを手動でいくつかの簡単なHTMLテーブルの形で私たちのトークンのリストを書いて取得しています.それは非常に迅速に乱雑でした.代わりに私のコンポーネントのスタイルとスケッチファイル間のトークンを同期すると、私は今、コンポーネントのスタイル、スケッチファイルと私の話の間で同期する必要がありました.さらに、私は自分のコンポーネントで使用したい正しいトークンを見つけるために、私は常にデザイントークンのストーリーと私のコンポーネントの話の間にジャンプを見つけました.(物語は一度に一つの物語を示している)

ストーリーブックデザイントークンアドオンの紹介

幸いにも、物語はあなたの物語を強化するために使用できるアドオン開発のための素晴らしいAPIを提供します.コンポーネントのドキュメントを自動的に生成し、A 11 Yテスト、ソースコードを表示し、much moreを提供する大きなアドオンがあります.
私の手動で設計されたデザイントークンの話に苦労して、私はまた、手動でデザイントークンリストを維持する必要性を排除しながらコンポーネントの話と一緒にすべてのデザイントークンを表示するアドオンを書くことを決めた.これは、CSSやSASSスタイルシートやアセットファイル(現時点でのみSVGファイル)を解析することによって、デザイントークンドキュメントを生成し、レンダリングされた例を完備したものです.さらに、それはあなたのスタイルシートの注釈を使用して、グループ内のデザイントークンを整理することができます.この方法では、トークンの例をレンダリングする方法を定義することもできます.以下はCSSスタイルシートの注釈付きトークンの小さな例です.

/**
 * @tokens Colors
 * @presenter Color
 */

:root {
  --n0: #fff; /* Optional token description */
  --n100: #fbfbfb;
  --n200: #edeeef;
  --n300: #e4e5e7;
  --primary: var(--n300);  /* --primary will be listed as an alias of --n300 */
}

/**
 * @tokens Border Radius
 * @presenter BorderRadius
 */

:root {
  --border-radius-m: 4px;
  --border-radius-l: 8px;
}

the demoを見て、それが何かを見るか、より完全な機能リストと使用ガイドのためにthe repoをチェックしてください.

私は本当にあなたのフィードバックを聞くのが大好きだ.アドオンをうまく使えますか.どのように、あなたはあなたのデザインシステムでデザイントークンを扱いますか?そのlatest beta releaseで、ストーリーブックは、ブラウザであなたのデザインシステムを文書化するために、より多くのツールを導入しています.あなたは、静的デザインツールから離れて、そして、ブラウザーに向かっているデザインdeliverablesを見ますか?