1
/
5

Lightning Talk_Figma | Interactive Componentを使ったら世界が変わった話

こんにちは!Another works デザイナーの澤野(ジャンプ)です!

今回は10月27日にFigmaから正式リリースされた『Interactive Component(インタラクティブコンポーネント)』についてお話しします。

Interactive Componentとは

Interactive Componentを使用すると、Variants内のComponentの相互作用を定義することができます。
(HoverやClick Actionなど、、助かる)

今まではプロトタイプでは、ページ遷移などを定義していましたが、
今回、新しいプロトタイプアクションの Change to を使うことにより、プロトタイプの価値が劇的に向上しました!

実際に組んでみた

初級

手始めにButtonを作成しました

POINT

  • Interaction ditails → While Hovering を選択
  • Animation → Smart animate を選択することによりアニメーション速度などが定義可能

中級

つぎにSelectorを作成しました

①選択できるItemそれぞれにHoverのデザインをあてていく
②全てをインタラクションコンポーネントでつなげる
 (While Hovering と On click の活用)


(少し大変でしたが)完了するとこうなります!

世界変わります、、
早く実際のページに当て込みたいです

上級

だんだん理解してきた...!
と調子に乗り、アニメーションにチャレンジしました
そもそも、アニメーションをFigmaで作れるの?!と驚きが止まりませんでした

今回は While Hovering だけでなく、After delay というInteractionを使いました
After delay を使うとコンポーネントのアニメーション作用後、何msで次のコンポーネントが動き始めるのか定義できます

また、Smart animate 内の CustomImage curve を使うとアニメーションのオフセットや遅延の表現を作ることができます


Auto Layout との併用

毎日お世話になっているオートレイアウト機能とも併用が可能です!

左側のコンポーネントは、画像のサイズを指定しています

右側のコンポーネントでは上から順に、
①左側にドラッグすると2番目につながる
②上から2.3番目は After delay
③4番目は height を 0px のコンポーネント指定

それぞれをオートレイアウトで組みました

本当に世界変わった、、!

特に右側のスレッドの組み合わせは、驚きが止まりませんでした

おわりに

ここまで簡単に Interactive Component を実際に触ってきましたが、
まだまだ未知な部分は多く、できることがたくさんある気がしています

Interactive Component は Variants 内で指定するので、デザインシステムの運用や実際のプロトタイプでとても重宝します

また、ユーザーリサーチやユーザーインタビューにおいても、
プロダクトに近いものをプロトタイピングで組めるので、ユーザーのリアルな意見を抽出できます

今後、Figmaからはもっと色々なリリースがあるかと思います!楽しみに待ちましょう!
(入力時の振る舞いを作れるリリース待ってます笑)

複業クラウドに登録して一歩を踏み出してみませんか?

複業クラウドへの登録はこちら

Another worksでは一緒に働ける仲間を探しています

エンジニア
CTO室立ち上げ!技術で経営課題を解決できるエンジニア募集!
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しています。 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、 事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。 Another worksが契約の間に入らないからこそ実現できています。 専属のCSが採用成功に向けて伴走し、導入2ヶ月以内の採用成功率は70%以上です。 ◎新規事業開発 2020年11月よりリリースをした自治体様との事業『複業クラウド for Public』 1年間で19都道府県20自治体様にご利用いただき、 地方自治体が抱える課題と都内の優秀な複業人材のマッチングを通して 場所にとらわれない挑戦機会の最大化を実現しています。 これからも『複業』というドメインにおいて事業開発をし続けます。 ■中途在籍メンバー出身 ◎ビズリーチ、EPARK、パソナ、パーソル、JAL、レバレジーズ、フォトシンス
株式会社Another works
AI・機械学習エンジニア
AI・機械学習を使って複業を世の中に広めるプロダクトを作りましょう!
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しています。 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、 事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。 Another worksが契約の間に入らないからこそ実現できています。 専属のCSが採用成功に向けて伴走し、導入2ヶ月以内の採用成功率は70%以上です。 ◎新規事業開発 2020年11月よりリリースをした自治体様との事業『複業クラウド for Public』 1年間で19都道府県20自治体様にご利用いただき、 地方自治体が抱える課題と都内の優秀な複業人材のマッチングを通して 場所にとらわれない挑戦機会の最大化を実現しています。 これからも『複業』というドメインにおいて事業開発をし続けます。 ■中途在籍メンバー出身 ◎ビズリーチ、EPARK、パソナ、パーソル、JAL、レバレジーズ、フォトシンス
株式会社Another works
フロントエンジニア
複業クラウドをReactで開発するフロントエンジニア募集
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しています。 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、 事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。 Another worksが契約の間に入らないからこそ実現できています。 専属のCSが採用成功に向けて伴走し、導入2ヶ月以内の採用成功率は70%以上です。 ◎新規事業開発 2020年11月よりリリースをした自治体様との事業『複業クラウド for Public』 1年間で19都道府県20自治体様にご利用いただき、 地方自治体が抱える課題と都内の優秀な複業人材のマッチングを通して 場所にとらわれない挑戦機会の最大化を実現しています。 これからも『複業』というドメインにおいて事業開発をし続けます。 ■中途在籍メンバー出身 ◎ビズリーチ、EPARK、パソナ、パーソル、JAL、レバレジーズ、フォトシンス
株式会社Another works
アプリエンジニア
React Native/創業メンバーのエンジニアとして働きませんか?
成約手数料無料で複業したい人と企業をつなぐプラットフォーム「Another works」を運営しています!企業は必要なタイミングで、必要なプロジェクトに、必要な人材を自由に仲間にすることができます! Another worksは成約手数料も初期費用も無料で、直接つながることができるので、高額な手数料や複雑な契約形態に悩むこともありません!また、約15,000名の登録者もAnother worksに入れば複業案件を自由に探すことができ、エントリーや企業にメッセージを送ることができます! 今話題の【複業】×【SaaS】領域です! トレンドの最先端の領域で、新しい働き方の概念を発信していきます! 副業市場はどんどん拡大しており、Another worksも急成長をしております!創業期メンバーとして一緒にAnother worksを盛り上げてくれるエンジニアを募集しています!
株式会社Another works
サーバーサイドエンジニア
日本で働く全ての人の挑戦機会を最大化させるサーバーサイドエンジニア募集!
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しています。 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、 事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。 Another worksが契約の間に入らないからこそ実現できています。 専属のCSが採用成功に向けて伴走し、導入2ヶ月以内の採用成功率は70%以上です。 ◎新規事業開発 2020年11月よりリリースをした自治体様との事業『複業クラウド for Public』 1年間で19都道府県20自治体様にご利用いただき、 地方自治体が抱える課題と都内の優秀な複業人材のマッチングを通して 場所にとらわれない挑戦機会の最大化を実現しています。 これからも『複業』というドメインにおいて事業開発をし続けます。 ■中途在籍メンバー出身 ◎ビズリーチ、EPARK、パソナ、パーソル、JAL、レバレジーズ、フォトシンス
株式会社Another works
インフラエンジニア
SREチーム立ち上げ!一人目クラウドエンジニア募集!!
成約手数料無料で複業したい人と企業をつなぐプラットフォーム「Another works」を運営しています!企業は必要なタイミングで、必要なプロジェクトに、必要な人材を自由に仲間にすることができます! Another worksは成約手数料も初期費用も無料で、直接つながることができるので、高額な手数料や複雑な契約形態に悩むこともありません!また、約15,000名の登録者もAnother worksに入れば複業案件を自由に探すことができ、エントリーや企業にメッセージを送ることができます! 今話題の【複業】×【SaaS】領域です! トレンドの最先端の領域で、新しい働き方の概念を発信していきます! 副業市場はどんどん拡大しており、Another worksも急成長をしております!創業期メンバーとして一緒にAnother worksを盛り上げてくれるインターン生を募集しています!
株式会社Another works
株式会社Another worksでは一緒に働く仲間を募集しています
11 いいね!
11 いいね!
同じタグの記事
今週のランキング
このストーリーが気になったら、直接話を聞きに行こう