コンポーネントをより柔軟に使うVariables
Framerのコンポーネントをより柔軟に使いこなすための機能が「Variables（変数）」です。コンポーネントを複数の場所で使用する際に、テキストや色、サイズなどの要素を個別に変更できるようになります。
たとえば、「お問い合わせ」ボタンというコンポーネントを作成し、それを別のページで「お申し込み」ボタンとして使いたい場合、Variablesを使えばテキストだけを変更することができます。このように、1つのコンポーネントから作られた複製（これを「インスタンス」と呼びます）ごとに、異なる設定が可能になります。
Variablesの基本的な使い方
テキストをVariableにする例
最もよく使われるのは、コンポーネント内のテキストを変数化することです。
コンポーネントをダブルクリックしてコンポーネント専用の編集画面に移動
コンポーネント内のテキスト要素を選択
右側のパネルで「content」の横にある「+」アイコンをクリック
「Create Variable」を選択
変数の種類を選択（通常のテキストなら「Plain Text」）
変数名を設定（例：「Title」）
これで、コンポーネントのインスタンスごとに異なるテキストを設定できるようになります。
通常の編集画面に戻りコンポーネントを選択すると、「Title」という変数が変更できるようになっているのがわかります。
Variablesの管理
Variablesが設定してあるプロパティは紫のボタンになります。そこをクリックし、このコンポーネントで使われているVariablesの一覧を表示することができます。
Variablesの変数を追加したり、デフォルトの値を設定したりなどができます。
変数の種類
Framerでは以下の種類の変数が利用可能です：
Plain Text：通常のテキスト
Formatted Text：書式付きテキスト（段落など長文向け）
Date：日付
Link：リンクURL
Image：画像
Color：色
Toggle：オン/オフの切り替え
Number：数値
Option：選択肢から1つを選択
Event：イベント
Transition：トランジション
Border：枠線
Cursor：カーソル
Shadow：シャドー
レイアウトのプロパティも変数化
また、「Stack Variables」として、レイアウトのプロパティも変数化できます：
Gap：要素間の間隔
Padding：内側の余白
Direction：要素の配置方向
Distribute：要素の分布
Align：要素の整列
同じコンポーネントでもかなり自由に形を変えることができますね。
Variablesの活用
Variablesを活用することで、以下のようなメリットが得られます：
コンポーネントの再利用性が向上
デザインの一貫性を保ちながら柔軟な調整が可能
チーム作業の効率化
Variablesは、Framerでのコンポーネント開発をより効率的にする強力な機能です。基本を押さえた上で、プロジェクトの要件に合わせて適切に活用していきましょう。
←