FigJamをご利用いただいているブランド
拡大縮小できるデザインシステム
再利用可能なアセットで共同作業を行い、チームや製品全体で一貫性とイノベーションを可能にするデザインシステムを作成します。
![アイコン、色、タイプフェーススタイル、スペーサーのライブラリ](https://cdn.sanity.io/images/599r6htc/regionalized/3f1bfae9ff0fba1b956c69af93cb1b4f33b6381a-1080x864.png?w=780&h=624&q=75&fit=max&auto=format)
スピーディーなイノベーションのための構造作り
スタイル、バリアブル、コンポーネントが標準化されているので、カラーからパディングにいたるまで、あらゆる要素を製品やブランド全体にシームレスに適用できます。
ライブラリを共有して一貫性を高める
アセットをチームライブラリに公開して、承認済みの最新のデザイン要素をいつでもドラッグアンドドロップだけで使えます。
製品の成長に合わせてデザインシステムを拡大縮小
バリアブルモードなどの強力なデザインシステム機能により、ユースケースやテーマなどに合わせて拡大縮小できます。
デザインシステムの機能を見る
デザインとコード全体で連携したデザインシステムにより、製品開発プロセスを簡素化します。
![エクスポートするアプリ製品の写真のライトモードとダークモードのビュー](https://cdn.sanity.io/images/599r6htc/regionalized/8aba504f624298af854a8e5a4ce2b4c1d4a25746-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
デザイントークンの実装
バリアブルやモードを使って、デザインシステムのデザイントークンを実装できます。カラートークンを使ってライトモードとダークモードを切り替えたり、タイポグラフィートークンを使ってブランド間でフォントを変えたりできます。それだけではありません。
![ボタンのカスタムバリアブルのメニューを選択しているカーソル](https://cdn.sanity.io/images/599r6htc/regionalized/b528ac7dc506552ca7bc36117786f9798c82d135-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
コンポーネントをコードに結合
コンポーネントのプロパティを使用して、コンポーネントをカスタマイズしやすくし、Reactプロパティにマッピングします。
![APIコードのインスペクトビュー](https://cdn.sanity.io/images/599r6htc/regionalized/4718e38ae8ef3190a4115e5b561ce6a53a02a80a-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
デザインシステムの同期を維持
Figmaのバリアブル、REST APIを使用して、バリアブルを一括で作成および管理し、デザインシステムの拡大縮小にかかる時間を節約します。
![コンポーネントライブラリの利用状況のアナリティクスを示すグラフ。](https://cdn.sanity.io/images/599r6htc/regionalized/371d2f6ab148c305241db44219d4add125c7d009-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
利用状況のアナリティクスの追跡
デザインシステムアナリティクスでチームのコンポーネントとバリアントの使用状況を確認します。
Figmaに移行してからは、昼と夜ほどの違いがありました。それがデザインシステム構築のきっかけとなりました。
James Davis 氏、News UK社リードデザイナー
![](https://cdn.sanity.io/images/599r6htc/regionalized/c0409f4dd0804c5da99663f2331648567e207df7-720x721.png?rect=0,1,720,720&w=360&h=360&q=75&fit=max&auto=format)
Spotify社のクロスプラットフォームデザインシステム
Spotify社のデザインシステムチームが、一貫性の向上を求めて、コンポーネントにクロスプラットフォームアプローチを採用した事例をご確認ください。
![Salesforce社、Spotify社、GitHub社、Atlassian社のロゴ。](https://cdn.sanity.io/images/599r6htc/regionalized/e66c0135b18d0b8cf72e01aa70ff9e8862c15974-721x720.png?rect=1,0,720,720&w=360&h=360&q=75&fit=max&auto=format)
主要ブランドのオープンデザインシステムを確認する
GitHub、Atlassian、Salesforceなどのブランドのオープンデザインシステムにアクセスします。
![背景がラベンダー色の上昇グラフ。](https://cdn.sanity.io/images/599r6htc/regionalized/af629f67f59dd2047351715a55c7467d49f18452-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
デザインシステムアナリティクスを最大限に活用する5つの方法
デザインシステムアナリティクスでは、チームによる意思決定の改善と導入促進のために必要なコンテキストを提供します。