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

デザインシステムの特長
チーム全員で使えるデザインシステム

チーム全員でアセットとライブラリを作り、共有しましょう。Figmaのウェブファーストのマルチプレイヤープラットフォームなら、デザインと開発の幅が大きく広がります。

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

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

StripeのロゴNew York TimesのロゴNetflixのロゴ

一貫したデザインをサポート

Figmaは簡単に共同作業やアセットの再利用が可能。チーム全体がクリエイティビティを発揮し一貫性を保つデザインシステムを作成できます。

オープン&フレンドリー

チームライブラリにデザインアセットを公開して、共同作業者全員が簡単にアクセスできるようにします。これで、作業に必要な標準のブランドデザイン要素がすべて、ドラッグアンドドロップするだけで利用できます。詳細はこちら

デザインのスケール変更が簡単

どんなユースケースにでも適応できる強力なデザインシステムを作成できます。

デザインテーマの切り換え

バリアブルモードを使って、ライトモードとダークモード、デスクトップモードとモバイルモードなど、さまざまなテーマで複数のモードを作成できます。 詳細はこちら

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

スタイルやコンポーネントなどを管理

スタイル、バリアブル、コンポーネントを標準化することで、製品やブランド全体で色やパディングなどをシームレスに統一できます。

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

REST APIによるワークフロー自動化

FigmaのバリアブルREST APIを使って、バリアブルをまとめて作成して管理すれば、時間を短縮しながら、デザインシステムを拡大できます。詳細はこちら

開発者に使いやすいデザインシステム

デザインとコーディング両方に最適化したアセットを使用して、製品開発プロセスを合理化できます。

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

デザイントークン

デザインから開発まで、互換性のあるフォーマットにバリアブルをエクスポートできます。

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

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

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

Figmaの「開発モード」インターフェースFigmaの「開発モード」インターフェース

デザインシステムの検査

開発者が使いやすい開発モードでデザインを詳しく調べて、コンポーネントのドキュメンテーションやデザインの点検など、コードベースの役立つインサイトが得られます。詳細はこちら

デザインアナリティクスの追跡、システムの最適化

チームでアセットがどう利用されているか分析できるため、改善が容易です。Figmaのアセット分析用ツールで、使用と効果を最適化できます。

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

使用状況の指標計測

デザインシステムアナリティクスを利用して、チームのコンポーネントやバリアブルについて、頻度や使用状況を確認できます。このデータを使って、効率や使いやすさの改善が必要なアセットにフラグを付けます。詳細はこちら

さらに他の機能を見る

バウンディングボックス内に重なり合う、異なるパターンで塗りつぶされた3つのシェイプバウンディングボックス内に重なり合う、異なるパターンで塗りつぶされた3つのシェイプ

デザイン

リアルタイムでデザインし、アイデアを出し合い、フィードバックを得ることで、優れた製品を作ってリリースします。

デザイン機能の詳細

プロトタイプとして接続されているバウンディングボックス内の4つのシェイププロトタイプとして接続されているバウンディングボックス内の4つのシェイプ

プロトタイプ作成

デザインと並行して、インタラクティブなプロトタイプをノーコードで作成してテストします。

プロトタイプ機能の詳細

透明なシェイプがレイヤー化され、ネガティブスペースの中に塗りつぶされたシェイプとパターンが作られている透明なシェイプがレイヤー化され、ネガティブスペースの中に塗りつぶされたシェイプとパターンが作られている

開発モード

開発モードは、デザインをコードにすぐに変換できる、Figmaの新しい開発者用スペースです。

開発機能の詳細