ご利用いただいているブランド
スケーラブルなデザインシステム
再利用可能なアセットで共同作業を行い、チームや製品全体で一貫性とイノベーションを可能にするデザインシステムを作成します。
スピーディーなイノベーションのための構造作り
スタイル、バリアブル、コンポーネントが標準化されているので、カラーからパディングにいたるまで、あらゆる要素を製品やブランド全体にシームレスに適用できます。
ライブラリを共有して一貫性を高める
アセットをチームライブラリに公開して、承認済みの最新のデザイン要素をいつでもドラッグアンドドロップだけで使えます。
プロダクトの成長に合わせて、デザインシステムをスケールさせましょう。
バリアブルモードなどの強力なデザインシステム機能により、ユースケースやテーマなどに合わせてスケールできます。
デザインシステムの機能を見る
デザインとコード全体で一貫したデザインシステムにより、製品開発プロセスを簡素化します。
デザイントークンの実装
バリアブルとモードを使って、デザインシステムのデザイントークンを実装しましょう。色トークンを使用してライトモードとダークモードを切り替えたり、タイポグラフィトークンを使用してブランド間でフォントを変更したり、その他さまざまなことが可能です。
Figmaのコンポーネントをコードにマッピングする
コンポーネントのプロパティを使用して、コンポーネントをカスタマイズしやすくし、Reactプロパティにマッピングします。
デザインシステムの同期を維持
Figmaのバリアブル、REST APIを使用して、バリアブルを一括で作成および管理し、デザインシステムをスケールさせながら作業時間を削減しましょう。
利用状況のアナリティクスの追跡
デザインシステムアナリティクスでチームのコンポーネントとバリアントの使用状況を確認します。
Figmaに移行してからは、昼と夜ほどの違いがありました。それがデザインシステム構築のきっかけとなりました。
James Davis 氏、News UK社リードデザイナー
Spotify社のクロスプラットフォームデザインシステム
Spotify社のデザインシステムチームが、一貫性の向上を求めて、コンポーネントにクロスプラットフォームアプローチを採用した事例をご確認ください。
主要ブランドのオープンデザインシステムを確認する
GitHub、Atlassian、Salesforceなどのブランドのオープンデザインシステムにアクセスします。
デザインシステムアナリティクスを最大限に活用する5つの方法
デザインシステムアナリティクスでは、チームによる意思決定の改善と導入促進のために必要なコンテキストを提供します。
FAQ
Figmaは、デザイナーがデザインシステムを作成および維持するのに役立つコラボレーションデザインツールです。デザインアセット、コンポーネント、ガイドラインを共同で開発、共有、更新できる一元化された環境を提供します。Figmaは、デザインし、プロトタイプを作成し、組織内の製品およびアプリケーション間でのデザインの一貫性を確保するプロセスを簡素化します。
デザインシステムは、再利用可能なコンポーネント、ガイドライン、アセットの集合であり、デザインプロセスの一貫性と効率性を維持するのに役立ちます。デザイナー、開発者、ステークホルダーの信頼できる唯一の情報源として機能します。こちらのデザインシステムに関する優れた入門コースをご覧ください。
デザインシステムを作成するには、タイポグラフィーのスタイル、カラーパレット、グリッドシステム、アイコンなど、ブランドのアイデンティティに沿ったビジュアル要素を定義する必要があります。
Figmaコミュニティでは、Airtable、Amplify、Atlassianなどの主要な企業が提供する多くのオープンデザインシステムを見つけることができます。