メインコンテンツまでスキップ

Figmaでのデザインシステム

すべての人のためのデザインシステム

チーム全体がアクセスできる共有アセットとライブラリを作成します。Figmaを使用して、デザインシステムの採用を可能にし、一貫性と効率性を高めます。

デザインシステムの一部としてトグル、シェイプ、レター、バウンディングボックスがグリッド上に重ねられているデザインシステムの一部としてトグル、シェイプ、レター、バウンディングボックスがグリッド上に重ねられている

FigJamをご利用いただいているブランド

Puma社ロゴPatagonia社ロゴStripe社ロゴNew York Times社ロゴNetflix社ロゴSpotify社ロゴ

拡大縮小できるデザインシステム

再利用可能なアセットで共同作業を行い、チームや製品全体で一貫性とイノベーションを可能にするデザインシステムを作成します。

アイコン、色、タイプフェーススタイル、スペーサーのライブラリアイコン、色、タイプフェーススタイル、スペーサーのライブラリ

スピーディーなイノベーションのための構造作り

スタイル、バリアブル、コンポーネントが標準化されているので、カラーからパディングにいたるまで、あらゆる要素を製品やブランド全体にシームレスに適用できます。

ライブラリを共有して一貫性を高める

アセットをチームライブラリに公開して、承認済みの最新のデザイン要素をいつでもドラッグアンドドロップだけで使えます。

製品の成長に合わせてデザインシステムを拡大縮小

バリアブルモードなどの強力なデザインシステム機能により、ユースケースやテーマなどに合わせて拡大縮小できます。

デザインシステムの機能を見る

デザインとコード全体で連携したデザインシステムにより、製品開発プロセスを簡素化します。

エクスポートするアプリ製品の写真のライトモードとダークモードのビューエクスポートするアプリ製品の写真のライトモードとダークモードのビュー

デザイントークンの実装

バリアブルやモードを使って、デザインシステムのデザイントークンを実装できます。カラートークンを使ってライトモードとダークモードを切り替えたり、タイポグラフィートークンを使ってブランド間でフォントを変えたりできます。それだけではありません。

バリアブルを使ってみる

ボタンのカスタムバリアブルのメニューを選択しているカーソルボタンのカスタムバリアブルのメニューを選択しているカーソル

コンポーネントをコードに結合

コンポーネントのプロパティを使用して、コンポーネントをカスタマイズしやすくし、Reactプロパティにマッピングします。

コンポーネントのプロパティを見る

APIコードのインスペクトビューAPIコードのインスペクトビュー

デザインシステムの同期を維持

Figmaのバリアブル、REST APIを使用して、バリアブルを一括で作成および管理し、デザインシステムの拡大縮小にかかる時間を節約します。

ドキュメントを見る

コンポーネントライブラリの利用状況のアナリティクスを示すグラフ。コンポーネントライブラリの利用状況のアナリティクスを示すグラフ。

利用状況のアナリティクスの追跡

デザインシステムアナリティクスでチームのコンポーネントとバリアントの使用状況を確認します。

コンポーネントアナリティクスの詳細情報

Figmaに移行してからは、昼と夜ほどの違いがありました。それがデザインシステム構築のきっかけとなりました。

James Davis 氏、News UK社リードデザイナー

newsukのロゴ
詳しい内容を読む

Spotify社のクロスプラットフォームデザインシステム

Spotify社のデザインシステムチームが、一貫性の向上を求めて、コンポーネントにクロスプラットフォームアプローチを採用した事例をご確認ください。

記事を読む

Salesforce社、Spotify社、GitHub社、Atlassian社のロゴ。Salesforce社、Spotify社、GitHub社、Atlassian社のロゴ。

主要ブランドのオープンデザインシステムを確認する

GitHub、Atlassian、Salesforceなどのブランドのオープンデザインシステムにアクセスします。

designsystems.comにアクセス

背景がラベンダー色の上昇グラフ。背景がラベンダー色の上昇グラフ。

デザインシステムアナリティクスを最大限に活用する5つの方法

デザインシステムアナリティクスでは、チームによる意思決定の改善と導入促進のために必要なコンテキストを提供します。

ガイドを入手する

FAQ