Lightning Talk_Figma | Interactive Componentを使ったら世界が変わった話 | Lightning Talk_LT会レポート

こんにちは！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 内の Custom の Image curve を使うとアニメーションのオフセットや遅延の表現を作ることができます

Auto Layout との併用

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

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

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

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

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

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

おわりに

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

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

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

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

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

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

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

エンジニア

CTO室立ち上げ！技術で経営課題を解決できるエンジニア募集！

株式会社Another worksは、複業したい人と企業や自治体をマッチングするプラットフォーム「複業クラウド」を開発、運営しています。 ▍複業クラウドの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しており、事業ピポットすることなくご利用企業／個人双方にとって良いプロダクトを開発し続けています。現在は85,000名（2024年10月9日時点）にご利用いただき、導入企業も2,000社（2024年8月31日時点）を超える急成長を遂げています。 ◎手数料や中間マージンが無料人材業界の常識を覆す。通常であれば紹介手数料50万円〜100万円や、中間マージン30〜50%が発生する中、企業と個人が直接契約ができるサービスを提供しています。専属のカスタマーサクセスが採用成功に向けて伴走することで、複業人材の採用成功率は85％以上です。 ◎新規事業展開複業の社会実装の実現に向けて、複業クラウドを軸にした関連する新規事業を展開しています。 ▼複業クラウドfor Public 優秀な複業人材が自治体職員とともに行政課題解決に取り組み、地方創生の実現を目指すプロジェクトを全国各地で行なっています。専門性の高い知見を備えた複業人材を活用することで、DXの推進計画や広報戦略の立案などあらゆる行政課題を解決することができます。日本全国の202自治体に複業クラウドを導入頂いており（2024年12月2日時点）これは導入数、複業人材の登用数、プロジェクト組成数において日本一の実績を誇っています。 ▼プロウィズ - 大手企業様×正社員／複業人材 ▍Another worksの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎社員について年代：20代が中心　平均年齢：28歳　社員数：50名　男女比：6：4 ◎社員出身企業ビズリーチ / リクルート / パーソル / パソナ / ベネフィット・ワン / レバレジーズ / ネオキャリア / マイナビ / ディップ / / etc

株式会社Another works

AI・機械学習エンジニア

AI・機械学習を使って複業を世の中に広めるプロダクトを作りましょう！

株式会社Another worksは、複業したい人と企業や自治体をマッチングするプラットフォーム「複業クラウド」を開発、運営しています。 ▍複業クラウドの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しており、事業ピポットすることなくご利用企業／個人双方にとって良いプロダクトを開発し続けています。現在は85,000名（2024年10月9日時点）にご利用いただき、導入企業も2,000社（2024年8月31日時点）を超える急成長を遂げています。 ◎手数料や中間マージンが無料人材業界の常識を覆す。通常であれば紹介手数料50万円〜100万円や、中間マージン30〜50%が発生する中、企業と個人が直接契約ができるサービスを提供しています。専属のカスタマーサクセスが採用成功に向けて伴走することで、複業人材の採用成功率は85％以上です。 ◎新規事業展開複業の社会実装の実現に向けて、複業クラウドを軸にした関連する新規事業を展開しています。 ▼複業クラウドfor Public 優秀な複業人材が自治体職員とともに行政課題解決に取り組み、地方創生の実現を目指すプロジェクトを全国各地で行なっています。専門性の高い知見を備えた複業人材を活用することで、DXの推進計画や広報戦略の立案などあらゆる行政課題を解決することができます。日本全国の202自治体に複業クラウドを導入頂いており（2024年12月2日時点）これは導入数、複業人材の登用数、プロジェクト組成数において日本一の実績を誇っています。 ▼プロウィズ - 大手企業様×正社員／複業人材 ▍Another worksの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎社員について年代：20代が中心　平均年齢：28歳　社員数：50名　男女比：6：4 ◎社員出身企業ビズリーチ / リクルート / パーソル / パソナ / ベネフィット・ワン / レバレジーズ / ネオキャリア / マイナビ / ディップ / / etc

株式会社Another works

フロントエンジニア

複業クラウドをReactで開発するフロントエンジニア募集

株式会社Another worksは、複業したい人と企業や自治体をマッチングするプラットフォーム「複業クラウド」を開発、運営しています。 ▍複業クラウドの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しており、事業ピポットすることなくご利用企業／個人双方にとって良いプロダクトを開発し続けています。現在は85,000名（2024年10月9日時点）にご利用いただき、導入企業も2,000社（2024年8月31日時点）を超える急成長を遂げています。 ◎手数料や中間マージンが無料人材業界の常識を覆す。通常であれば紹介手数料50万円〜100万円や、中間マージン30〜50%が発生する中、企業と個人が直接契約ができるサービスを提供しています。専属のカスタマーサクセスが採用成功に向けて伴走することで、複業人材の採用成功率は85％以上です。 ◎新規事業展開複業の社会実装の実現に向けて、複業クラウドを軸にした関連する新規事業を展開しています。 ▼複業クラウドfor Public 優秀な複業人材が自治体職員とともに行政課題解決に取り組み、地方創生の実現を目指すプロジェクトを全国各地で行なっています。専門性の高い知見を備えた複業人材を活用することで、DXの推進計画や広報戦略の立案などあらゆる行政課題を解決することができます。日本全国の202自治体に複業クラウドを導入頂いており（2024年12月2日時点）これは導入数、複業人材の登用数、プロジェクト組成数において日本一の実績を誇っています。 ▼プロウィズ - 大手企業様×正社員／複業人材 ▍Another worksの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎社員について年代：20代が中心　平均年齢：28歳　社員数：50名　男女比：6：4 ◎社員出身企業ビズリーチ / リクルート / パーソル / パソナ / ベネフィット・ワン / レバレジーズ / ネオキャリア / マイナビ / ディップ / / etc

株式会社Another works

エンタープライズCS

総額6.5億円シリーズB調達完了／人材業界を変えるエンプラCSを募集！

株式会社Another worksは、複業したい人と企業や自治体をマッチングするプラットフォーム「複業クラウド」を開発、運営しています。 ▍複業クラウドの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しており、事業ピポットすることなくご利用企業／個人双方にとって良いプロダクトを開発し続けています。現在は85,000名（2024年10月9日時点）にご利用いただき、導入企業も2,000社（2024年8月31日時点）を超える急成長を遂げています。 ◎手数料や中間マージンが無料人材業界の常識を覆す。通常であれば紹介手数料50万円〜100万円や、中間マージン30〜50%が発生する中、企業と個人が直接契約ができるサービスを提供しています。専属のカスタマーサクセスが採用成功に向けて伴走することで、複業人材の採用成功率は85％以上です。 ◎新規事業展開複業の社会実装の実現に向けて、複業クラウドを軸にした関連する新規事業を展開しています。 ▼複業クラウドfor Public 優秀な複業人材が自治体職員とともに行政課題解決に取り組み、地方創生の実現を目指すプロジェクトを全国各地で行なっています。専門性の高い知見を備えた複業人材を活用することで、DXの推進計画や広報戦略の立案などあらゆる行政課題を解決することができます。日本全国の202自治体に複業クラウドを導入頂いており（2024年12月2日時点）これは導入数、複業人材の登用数、プロジェクト組成数において日本一の実績を誇っています。 ▼プロウィズ - 大手企業様×正社員／複業人材 ▍Another worksの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎社員について年代：20代が中心　平均年齢：28歳　社員数：50名　男女比：6：4 ◎社員出身企業ビズリーチ / リクルート / パーソル / パソナ / ベネフィット・ワン / レバレジーズ / ネオキャリア / マイナビ / ディップ / / etc

株式会社Another works

インターン／オープンポジション

総額6.5億円シリーズB調達完了／長期インターンとして力を貸してください！

株式会社Another worksは、複業したい人と企業や自治体をマッチングするプラットフォーム「複業クラウド」を開発、運営しています。 ▍複業クラウドの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しており、事業ピポットすることなくご利用企業／個人双方にとって良いプロダクトを開発し続けています。現在は85,000名（2024年10月9日時点）にご利用いただき、導入企業も2,000社（2024年8月31日時点）を超える急成長を遂げています。 ◎手数料や中間マージンが無料人材業界の常識を覆す。通常であれば紹介手数料50万円〜100万円や、中間マージン30〜50%が発生する中、企業と個人が直接契約ができるサービスを提供しています。専属のカスタマーサクセスが採用成功に向けて伴走することで、複業人材の採用成功率は85％以上です。 ◎新規事業展開複業の社会実装の実現に向けて、複業クラウドを軸にした関連する新規事業を展開しています。 ▼複業クラウドfor Public 優秀な複業人材が自治体職員とともに行政課題解決に取り組み、地方創生の実現を目指すプロジェクトを全国各地で行なっています。専門性の高い知見を備えた複業人材を活用することで、DXの推進計画や広報戦略の立案などあらゆる行政課題を解決することができます。日本全国の202自治体に複業クラウドを導入頂いており（2024年12月2日時点）これは導入数、複業人材の登用数、プロジェクト組成数において日本一の実績を誇っています。 ▼プロウィズ - 大手企業様×正社員／複業人材 ▍Another worksの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎社員について年代：20代が中心　平均年齢：28歳　社員数：50名　男女比：6：4 ◎社員出身企業ビズリーチ / リクルート / パーソル / パソナ / ベネフィット・ワン / レバレジーズ / ネオキャリア / マイナビ / ディップ / / etc

株式会社Another works

インフラエンジニア

SREチーム立ち上げ！一人目クラウドエンジニア募集！！

成約手数料無料で複業したい人と企業をつなぐプラットフォーム「Another works」を運営しています！企業は必要なタイミングで、必要なプロジェクトに、必要な人材を自由に仲間にすることができます！ Another worksは成約手数料も初期費用も無料で、直接つながることができるので、高額な手数料や複雑な契約形態に悩むこともありません！また、約15,000名の登録者もAnother worksに入れば複業案件を自由に探すことができ、エントリーや企業にメッセージを送ることができます！今話題の【複業】×【SaaS】領域です！トレンドの最先端の領域で、新しい働き方の概念を発信していきます！副業市場はどんどん拡大しており、Another worksも急成長をしております！創業期メンバーとして一緒にAnother worksを盛り上げてくれるインターン生を募集しています！

株式会社Another works

株式会社Another worksからお誘い

この話題に共感したら、メンバーと話してみませんか？

株式会社Another worksでは一緒に働く仲間を募集しています

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

澤野遥

株式会社Another works / リードデザイナー

デザインデザイナープロダクト新機能 Figma

14 いいね！

14 いいね！

Lightning Talk_LT会レポート

毎月月末金曜日に開催のLT会のレポートです！

フォロー

もっと見る

澤野遥さんにいいねを伝えよう

澤野遥さんや会社があなたに興味を持つかも