Figmaでのバリアブルに関するガイド

Figmaデザインのバリアブルには再利用可能な値が保存され、あらゆる種類のデザインプロパティとプロトタイプアクションに適用できます。デザインの構築、デザインシステムの管理、複雑なプロトタイプフローの作成時に、時間と労力を節約するのに役立ちます。

たとえば、以下のようなことができます。

• デザインシステムを管理する際に、デザイントークンを作成して効率を高める
• 異なるデバイスサイズ間でフレームを切り替え、定義した空間システムに従って、スペーシングを直ちに更新する
• フレーム上のコピーを切り替えて、異なる言語でテキストの流れをプレビューする
• 極めて機能的なチェックアウトカートデザインを作成し、カートに追加されたアイテムに基づいて注文総額を計算する
• 質問に対するユーザーの回答が正しいか正しくないかを示す、条件付きロジックを使用したインタラクティブなクイズのプロトタイプを作成する

Figmaでバリアブルを使用する主な方法は次の3つです。

1. デザインとデザインシステム ↓
2. 高度なプロトタイプ作成 ↓
3. Figma API ↓

デザインおよびデザインシステム用のバリアブル

バリアブルとモードを使用して、デザインシステム用のデザイントークンの実装、異なるコンテキスト間(例:ライト/ダークテーマ)でのデザイン切替を行えます。バリアブルを使用すると、デザインの効率性を高め、より強力なデザインシステムを構築できます。

• Figmaチュートリアル: バリアブルの紹介

  このビデオチュートリアルでは、バリアブルの基礎について説明し、デザイントークンを表すためのバリアブルの使用方法、異なるモードやテーマを説明する色や数字のバリアブルの使用方法などを解説します。
• 記事: バリアブル、コレクション、モードの概要 →

  こちらではバリアブルについての説明しています。バリアブルのさまざまな種類を理解し、バリアブルのコレクションやモードとは何かを学びましょう。

• 記事: バリアブルの作成と管理 →

  バリアブルおよびコレクションの作成方法、他のバリアブル定義の参照方法、デザインで使用できるバリアブルの範囲を限定する方法について説明します。

• 記事: バリアブルをデザインに適用する →

  既存のバリアブルをデザインプロパティに適用する方法について説明します。

• 記事: バリアブルのモード →

  バリアブルの複数の定義を作成し、それぞれをモードに関連付ける方法を説明します。また、それらの定義を使用して、デザインのコンテキストを素早く切り替える方法についても説明します。

• 記事: バリアブルとスタイルの違い →
  

  Figmaは、バリアブルにより機能セットを拡張したため、戸惑っている方もいらっしゃることでしょう。「バリアブルとスタイルの違いは何か？」「この2つをどのように使い分けたらいいのだろう？」と。

• コミュニティファイル: バリアブルのプレイグラウンド →

  バリアブルのハンズオン実習を受けたいですか？バリアブルのプレイグラウンドファイルのコピーを入手して実践しながら学びましょう。

高度なプロトタイプ作成用バリアブル

バリアブルを使用すると、少ないフレームを使用して精度の高いプロトタイプを構築できます。式や条件など、別の高度な機能を備えたバリアブルを使用して、プロトタイプを一段上のレベルへと引き上げましょう。

プロトタイプ作成では、オブジェクトの状態やプロパティを保存するために、バリアブルが使用されます。プロトタイプのインタラクションを使用してバリアブル値を変更すると、デザインにおける外観、コンテンツ、オブジェクトの表示など、あらゆる要素を数枚のシンプルなフレームで変更できます。

• ビデオチュートリアル: バリアブルを使用したプロトタイプ

  視聴して、実際的な例に従って、プロトタイプでのバリアブルの使用方法を学びましょう。バリアブル値の変更方法、簡単な式の構築方法、複数のアクションとif/elseロジックを使用して条件付きチェックを評価する方法を確認します。
• 記事: プロトタイプでバリアブルを使用 →

  Figmaでの、バリアブルを使用したプロトタイプの作成方法の基礎を説明します。内容としては、バリアブルの構成方法、バリアブルの設定アクションを使用してバリアブル値を変更する方法、コンポーネントのバリアントやインタラクティブコンポーネントでバリアブルを使用する方法が含まれます。

• 記事: プロトタイプで式を使用する →

  プロトタイプで式とバリアブルを使用して、動的な文字列値を生成する方法、数値を使用して基本的な算術演算を実行する方法、さらにブール式を評価する方法を説明します。

• 記事: 複数のアクションと条件付きアクション →

  複数のアクションを使用して、同一トリガーにアクションを無制限にスタックする方法や、条件付きアクションを使用することにより、アクションを実行する前にif/else論理を使用して、条件が適切かどうかチェックする方法について説明します。

• 記事: プロトタイプ内のバリアブルモード →

  プロトタイプ内でバリアブルモードを使用する方法を説明します。コンテキストに基づき、特定のモードの値を設定したり、式に特定のモード値を使用したりすることができます。

• コミュニティファイル: 高度なプロトタイプ作成のプレイグラウンド →

  高度なプロトタイプ作成プレイグラウンドをコピーして、プロトタイプ作成においてバリアブルを使用する実践トレーニングを続けましょう。

APIを使用したバリアブル

バリアブルは、プラグインとウィジェットを構築するためのFigmaプラグインAPIとREST APIでサポートされるようになりました。現在、バリアブルはオープンベータ版であるため、フィードバックに応じて機能が変更される可能性があります。

• 開発者用ドキュメント: REST APIについて →

  REST APIにおけるバリアブルのサポートには、バリアブルの問い合わせ、作成、更新、削除のためのエンドポイントが含まれます。

• 開発者用ドキュメント: プラグインAPIについて →

  プラグインAPIにおけるバリアブルのサポートには、バリアブルの作成と読み取り、およびバリアブルのコンポーネントへのバインドが含まれます。たとえば、プラグインを構築して、バリアブルをインポート/エクスポートしたり、スタイルをバリアブルに変換したりすることができます。

• 開発者用ドキュメント: ウィジェットAPIについて →

  ウィジェットはプラグインAPIを使ってバリアブルにアクセスできます。ウィジェットはバリアブルを作成したり読み込んだりできますが、ウィジェットのプロパティをバリアブルにバインドすることはできません。

• Figmaチュートリアル: 変数をGitHubに同期する

  ビデオチュートリアルで、バリアブルをコードベースと同期する方法を説明しています。バリアブルGitHubアクションサンプルレポジトリを使用してFigmaバリアブルとコードベースを同期する方法についても説明します。
• コミュニティファイル: バリアブルREST APIを使用したデザインシステムの同期 →

  FigmaのバリアブルREST APIを使用して自動化されたワークフローを設定し、デザインファイルとコードベース間で変更を同期する方法を説明します。