2021年12月2日

デザイン

Figmaのインタラクティブコンポーネントの基本と作り方

目次

  1. はじめに
  2. インタラクティブコンポーネントとは?
  3. インタラクティブコンポーネントの作り方と事例
  4. インスタンスの中身を変更する
  5. まとめ

はじめに

この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay2の記事です!

昨日は「SkyWayとA-Frameを組み合わせて360度WebVR会議システムを作る!」についての記事でした。

SkyWayとA-Frameを組み合わせて360度WebVR会議システムを作る!

今回は2021年10月26日に新しくFigmaに追加されたインタラクティブコンポーネントについてご紹介していきます。

インタラクティブコンポーネントを使うことで、Figmaで作ったプロトタイプをあまり複雑にすることなく、さらにリッチでリアルな表現をすることができます。

インタラクティブコンポーネントについて聞いたことはあったけど、まだ試してない方インタラクティブコンポーネントを少し触ったけど、もっと勉強したい方に向けた内容となっていますので、少しでも参考になればと思います。

image.png (542.1 kB)

インタラクティブコンポーネントとは?

インタラクティブコンポーネントとは、コンポーネントのVariantの間でインタラクションやアニメーションを定義し、プロトタイピングモードでインスタンスに動きをつけることができるものです。

デザインがどのように動いて欲しいのか、そういったインタラクティブな要素をコンポーネントに定義し、プロトタイプをよりリアルにすることができます。

従来のプロトタイピング機能でもインタラクションをつけることは可能でしたが、何枚も同じようなアートボードを作らないといけなかったりとかなり大変な作業になってしまいがちでした。

今回の、インタラクティブコンポーネントを使用することにより、より簡単に動きをつけることができるようになりました!

(引用元: Interactive components: less wiring, more inspiring

具体的にどういうふうに変わったのか、例をあげてご説明していきます。

今まで

例えば、記事のアイキャッチにホバーすると、記事のタイトルが出てくるというシンプルなプロトタイプの例をあげて考えてみます。
1.gif (146.3 kB)

従来のプロトタイプを使うとこの1パターンを作るだけでも、下記のように4枚のワイヤーが必要になります。

image.png (171.0 kB)

インタラクティブコンポーネントを使用する場合

インタラクティブコンポーネントを使用すれば、このようにアイキャッチのコンポーネントを1つ作り、インタラクションを定義するだけで同様の動きを作ることができます。

そうすることで、プロトタイプを見たときにFigmaはホバーしていない状態とホバー状態のVariantを切り替えてくれます。

image.png (24.8 kB)

インタラクティブコンポーネントの作り方と事例

では、早速 インタラクティブコンポーネントの作り方と事例をご紹介していきます。

インタラクティブコンポーネントはFigmaのVariantsを使って作成します。

FigmaのVariantsとは?

Variantsとはコンポーネントを作成、整理、使用する新しい方法です。1つのコンポーネントに対して複数のバリエーションを作るときに非常に役にたつFigmaの新しい機能です。Variantsをまだ触ったことがない方はこちらのFigmaのVariantsの作り方とできることがまとまった記事をご一読いただいてから、続きをご覧いただくとスムーズかと思います。

STEP1: インタラクションをつけたいVariantを用意する

今回はホバー前とホバー後とでインタラクションをつけたいので、ホバー前とホバー後のVariantを用意します。

image.png (30.5 kB)

Tips: ホバー前、ホバー後のようにプロパティの値として2つしかないものに関してはtrue, falseとしておくとVariantの切り替えがスイッチのような形になり、より直感的なUIになりますimage.png (3.7 kB)

STEP2: インタラクションをVariant間で定義する

インタラクションのスタートのVariant (今回の場合はホバー前)を選択し、「Prototype」のタブの切り替えます。

通常のプロトタイプを定義するのと 同様に、コンポーネントのフレームの右側の真ん中にある青いつまみをクリック&ドラッグで切り替えたいコンポーネントにドラッグし、離します。

そうするとモーダルが開きますので、

- トリガーを「While hovering」
- アクションを「Change to」
- 変更先を 「hover : true」

と定義します。

image.png (19.7 kB)

Change to アクション

Change to アクションは、今回の インタラクティブ機能のために作られた新しいアクションになります。 こちらはインタラクティブコンポーネント間の変更を表すときに使うアクションです。 こちらのアクションは1つのコンポーネントセット内でしか使うことができないのでご注意ください。別々のコンポーネントの間で使用することはできません。

同様にホバー後からホバー前の状態に切り替わる際のインタラクションも定義しておきます。

image.png (58.8 kB)

こちらで準備はバッチリです。

プロトタイプを起動して確認しよう

1.gif (146.3 kB)

動かないな?と思った時は

設定をきちんとしたのにインタラクティブコンポーネントが動かないときはインタラクティブコンポーネントの設定を確認してみましょう。 プロトタイプのパネルの中にチェックボックスがありますのでこちらにチェックが入っているか確認してください。
image.png (7.8 kB)

インスタンスの中身を変更する

このように簡単に作れるインタラクティブコンポーネントですが、若干わかりにくいところがあります。

例えば、前回のステップで作ったプロトタイプを見てみましょう。

image.png (76.7 kB)

今回のデザインのランキングのカードをよりリアルにするために、ホバーした時のタイトルをそれぞれ差し替えていきます。

しかし、現状だと 差し替えるタイトルが表示されておらず、内容を追加することができません。

このようにインタラクティブコンポーネントの種類によってはインスタンスの中身を変更することが難しい場合があります。

こういった状況になってしまった際のインスタンスの中身の変更方法をこれからご紹介します。

STEP1: 変更したいVariantに切り替える

今回の場合、変更したい要素がホバー後のVariant状態のためそのVariantに切り替えます。
image.png (77.4 kB)

STEP2: 内容を変更します

この状態になったらタイトルを変更していきます。
image.png (69.0 kB)

STEP3: Variantを元に戻す

このままプロトタイプとして完成することもできるのですがプロトタイプを最初に開いた際に、ホバー後の状態になってしまいます。
2.gif (85.3 kB)

そのため、 変更後にVariant をもとに戻しておきます。
そうすることで、イメージした挙動をシンプルに正しく表現することができます。
3.gif (94.2 kB)

まとめ

以上、今回は2021年10月26日に新しくFigmaに追加されたインタラクティブコンポーネントについてご紹介しました。

基本の内容ではありますが、少しハマりどころなどもあるためちょっとしたポイントなども含めてご紹介しました。少しでも参考になれば幸いです。

Figmaのお仕事に関するご相談

Bageleeの運営会社、palanではFigmaに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

デザイナーをしています。 好きな食べ物はラーメンです。

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto

sugimoto

asama

ando

CONTACT PAGE TOP