はじめに
この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay2の記事です！
昨日は「SkyWayとA-Frameを組み合わせて360度WebVR会議システムを作る！」についての記事でした。
今回は2021年10月26日に新しくFigmaに追加されたインタラクティブコンポーネントについてご紹介していきます。
インタラクティブコンポーネントを使うことで、Figmaで作ったプロトタイプをあまり複雑にすることなく、さらにリッチでリアルな表現をすることができます。
インタラクティブコンポーネントについて聞いたことはあったけど、まだ試してない方インタラクティブコンポーネントを少し触ったけど、もっと勉強したい方に向けた内容となっていますので、少しでも参考になればと思います。
インタラクティブコンポーネントとは？
インタラクティブコンポーネントとは、コンポーネントのVariantの間でインタラクションやアニメーションを定義し、プロトタイピングモードでインスタンスに動きをつけることができるものです。
デザインがどのように動いて欲しいのか、そういったインタラクティブな要素をコンポーネントに定義し、プロトタイプをよりリアルにすることができます。
従来のプロトタイピング機能でもインタラクションをつけることは可能でしたが、何枚も同じようなアートボードを作らないといけなかったりとかなり大変な作業になってしまいがちでした。
今回の、インタラクティブコンポーネントを使用することにより、より簡単に動きをつけることができるようになりました！
（引用元: Interactive components: less wiring, more inspiring）
具体的にどういうふうに変わったのか、例をあげてご説明していきます。
今まで
例えば、記事のアイキャッチにホバーすると、記事のタイトルが出てくるというシンプルなプロトタイプの例をあげて考えてみます。
従来のプロトタイプを使うとこの1パターンを作るだけでも、下記のように４枚のワイヤーが必要になります。
インタラクティブコンポーネントを使用する場合
インタラクティブコンポーネントを使用すれば、このようにアイキャッチのコンポーネントを１つ作り、インタラクションを定義するだけで同様の動きを作ることができます。
そうすることで、プロトタイプを見たときにFigmaはホバーしていない状態とホバー状態のVariantを切り替えてくれます。
インタラクティブコンポーネントの作り方と事例
では、早速 インタラクティブコンポーネントの作り方と事例をご紹介していきます。
インタラクティブコンポーネントはFigmaのVariantsを使って作成します。
FigmaのVariantsとは？
Variantsとはコンポーネントを作成、整理、使用する新しい方法です。1つのコンポーネントに対して複数のバリエーションを作るときに非常に役にたつFigmaの新しい機能です。Variantsをまだ触ったことがない方はこちらのFigmaのVariantsの作り方とできることがまとまった記事をご一読いただいてから、続きをご覧いただくとスムーズかと思います。
STEP1: インタラクションをつけたいVariantを用意する
今回はホバー前とホバー後とでインタラクションをつけたいので、ホバー前とホバー後のVariantを用意します。
Tips: ホバー前、ホバー後のようにプロパティの値として２つしかないものに関してはtrue, falseとしておくとVariantの切り替えがスイッチのような形になり、より直感的なUIになります
STEP2: インタラクションをVariant間で定義する
インタラクションのスタートのVariant (今回の場合はホバー前)を選択し、「Prototype」のタブの切り替えます。
通常のプロトタイプを定義するのと 同様に、コンポーネントのフレームの右側の真ん中にある青いつまみをクリック&ドラッグで切り替えたいコンポーネントにドラッグし、離します。
そうするとモーダルが開きますので、
- トリガーを「While hovering」
- アクションを「Change to」
- 変更先を 「hover : true」
と定義します。
Change to アクション
Change to アクションは、今回の インタラクティブ機能のために作られた新しいアクションになります。 こちらはインタラクティブコンポーネント間の変更を表すときに使うアクションです。 こちらのアクションは1つのコンポーネントセット内でしか使うことができないのでご注意ください。別々のコンポーネントの間で使用することはできません。
同様にホバー後からホバー前の状態に切り替わる際のインタラクションも定義しておきます。
こちらで準備はバッチリです。
プロトタイプを起動して確認しよう
動かないな？と思った時は
設定をきちんとしたのにインタラクティブコンポーネントが動かないときはインタラクティブコンポーネントの設定を確認してみましょう。 プロトタイプのパネルの中にチェックボックスがありますのでこちらにチェックが入っているか確認してください。
インスタンスの中身を変更する
このように簡単に作れるインタラクティブコンポーネントですが、若干わかりにくいところがあります。
例えば、前回のステップで作ったプロトタイプを見てみましょう。
今回のデザインのランキングのカードをよりリアルにするために、ホバーした時のタイトルをそれぞれ差し替えていきます。
しかし、現状だと 差し替えるタイトルが表示されておらず、内容を追加することができません。
このようにインタラクティブコンポーネントの種類によってはインスタンスの中身を変更することが難しい場合があります。
こういった状況になってしまった際のインスタンスの中身の変更方法をこれからご紹介します。
STEP1: 変更したいVariantに切り替える
今回の場合、変更したい要素がホバー後のVariant状態のためそのVariantに切り替えます。
STEP2: 内容を変更します
この状態になったらタイトルを変更していきます。
STEP3: Variantを元に戻す
このままプロトタイプとして完成することもできるのですがプロトタイプを最初に開いた際に、ホバー後の状態になってしまいます。
そのため、 変更後にVariant をもとに戻しておきます。
そうすることで、イメージした挙動をシンプルに正しく表現することができます。
まとめ
以上、今回は2021年10月26日に新しくFigmaに追加されたインタラクティブコンポーネントについてご紹介しました。
基本の内容ではありますが、少しハマりどころなどもあるためちょっとしたポイントなども含めてご紹介しました。少しでも参考になれば幸いです。
