このドキュメントは、Framerを学ぶ日本のユーザーが日本語資料の不足で直面する困難を解消するため、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerをお使いの皆様に少しでもお役に立てれば幸いです。

プロジェクトをセッティングする

まず、基本的なプロジェクト構造が必要です。2つの状態（OffとOn）を持つトグルを作成し、オーバーライドを使ってこれらのトグルを相互に接続し、価格と状態を一緒に更新できるようにします。3つのトグルを選択してから新しいファイルを追加し、新しいオーバーライドを作成します。

FramerでOverrideを作成する

オーバーライドを設定する過程は次の通りです。まず、特定の値を追跡できるストアが必要です。この例では、yearlyというブール値です。1つの価格カードをトグルするとこの値が更新され、それに応じてすべての価格カードの状態と価格が正しく変更されます。

次に、withToggleというOverrideを作成します。このOverrideはキャンバスからコンポーネントを受け取り、Reactコンポーネントとして返し、更新されたpropsを渡します。ここでは一旦Framerから受け取ったpropsをそのまま返します。この状態ではまだ何も動作しません。

バリアントを更新する

Overrideが実際に動作するためには、ストアに保存された現在の値に基づいてバリアントを設定し、コンポーネントをクリックしたときにストアの値を反転させるonClickハンドラーが必要です。こうすることで正しいバリアントが適用され、スムーズに切り替わります。

また、テキストのような他の属性も更新できます。例えば、コンポーネントをクリックしたときにテキストが月間価格から年間価格に変わるように設定できます。

同期した価格カードを完成する

この2つの方法を使用すると、2つの数値を切り替えながらアニメーションする価格カードを作成できます。キャンバスでそれぞれの数字を属性として設定しておき、トグル時に自然な切り替え効果を見ることができます。

必要に応じてAPIを接続し、地域化された価格を取得することも可能です。その過程でもFramerコンポーネント内のアニメーションの利点をそのまま活用できます。

まとめ

FramerのOverrideは、ランタイムでコンポーネントを制御および修正できる強力な機能です。今回は、1つのカードをトグルした際に価格と状態が全体のカードに同期される方法を見てきました。実際にプロジェクトを開いて試してみると、より理解が深まるでしょう。

プロジェクトを試してみる→

この記事はFramer公式ブログの「How to build synced pricing cards using overrides in Framer」を翻訳・アレンジしたコンテンツです。