バリアント（Variants）

バリアント（Variants）とは？

1つのコンポーネントに複数の異なる状態（デザインやスタイル）を持たせるための機能です。この機能を使うことで、再利用するコンポーネントがさらに柔軟になります。
アニメーションやインタラクションを作る際もバリアントが活躍します。

バリアントの基本的な概念

1. コンポーネントの状態を定義する
   Variantsは1つのコンポーネント内で、異なるスタイルやプロパティ（例: 色、サイズ、位置、透明度など）を「状態」として定義できます。

2. 状態間のアニメーション
   バリアントを使用すると、状態間をスムーズにアニメーションで切り替えることができます。Framerが自動的にプロパティの差を補完し、滑らかなトランジションを生成します。

3. トリガーで切り替える
   バリアントの状態をトリガー（例: クリック、ホバー、スクロールなど）によって切り替えることができます。

バリアントの活用例

1. ボタンのホバーエフェクト
   ボタンのデフォルト状態を設定し、ホバー時に色や影を変える。

2. モーダルの開閉アニメーション
   モーダルの閉じた状態と開いた状態をバリアントで定義し、クリックで切り替える。

3. スクロールアニメーション
   スクロール量に応じてコンポーネントの透明度や位置を変化させる。

4. 複雑なアニメーション
   バリアントを利用して、複数の状態を連続的にアニメーションで切り替える。

作り方

バリアントの作り方を紹介します。今回はサイト内で使うボタンを複数の状態で作ります。

1. コンポーネントを作成する。まずは基本となるコンポーネントを作ります。

2. コンポーネントを選択した状態で、すぐ右の+ボタンをクリック。すると2つ目のバリアントが作成されます。

   

3. 色、テキスト、角丸を変更してみましょう。

4. 作成したバリアントをキャンバスに追加。

バリアントは、インタラクションの設計やプロトタイプ作成を効率化し、視覚的にリッチなアニメーションを手軽に実装するための非常に強力なツールです。ぜひ作って遊んでみてください。