2019年12月2日

デザイン

【Figma】Smart Animate機能でできること

目次

  1. はじめに
  2. Smart Animate機能とは
  3. 使用できるプロパティ
  4. Smart Animateの使い方
  5. まとめ

はじめに

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

昨日は無料画像素材サイトUnsplashが提供している画像API「Unsplash Source」についての記事でした。

Unsplash Sourceを使ってみよう!


今日は、figmaのSmart Animate機能でプロトタイプに簡単に、もう少しリッチなアニメーションを追加する方法をご紹介します。

0.png (401.3 kB)

Smart Animate機能とは

figmaのSmart Animate機能はAdobe XDの「Auto Animate」と同じような自動アニメーション機能です。

自動アニメーションとは

アニメーションをつけたい画面のアートボード(frame)を複製し、変更を加えると、そのレイヤーに加えられた変更を認識し、その差をアニメーションで表現してくれるというものです。

実際にどんなアニメーションを作ることができるのか、figmaの公式サイトで紹介しているので、そちらの動画をご覧ください。

「Create Advanced Animations with Smart Animate」より

使用できるプロパティ

figmaのSmart Animate機能でサポートされているプロパティのご紹介です。

スケール

レイヤーやオブジェクトの大きさが変わった場合、smart animateでそのオブジェクトが拡大したり縮小したりするよう見せることが可能です。

1.png (336.7 kB)

この例では、再生ボタンをタップ/ホバーするとボタンが大きくなるようにしています。

ポジション

frame間でオブジェクトの位置に変更があった場合、オブジェクトの間の動きをsmart animateが自動で補完してくれます。

2.png (437.3 kB)

この例では、再生位置を終了位置までドラッグで変更することができるようになっています。

透明度 (Opacity)

レイヤーを隠すのではなく、透明度を変更させることにより、オブジェクトをふわっと出したり、フェードアウトさせたりすることが可能です。また、レイヤーのブレンドモードも合わせて使うことによりオシャレ雰囲気を出すことができます。

3.png (299.9 kB)

音楽プレーヤーの画像をタップすると、音楽のカテゴリが出るように、文字と黒の背景の透明度を変えています。

回転 (Rotation)

オブジェクトのローテーションを変更することができます。
1つのオブジェクトのみにかけることも可能ですし、グループ全体での回転にもsmart animateは適用します。

4.png (475.2 kB)

音楽プレーヤー次ボタンをタップすると、ちょっとした回転のアニメーションが入るようにしています。

塗り (Fill)

オブジェクトの塗りをアニメーションすることができます。
単色の塗りだけではなく、グラデーションや画像などもサポートされています!

5.png (351.3 kB)

音楽プレーヤー次ボタンをタップすると、先ほどとは違いパッと画像が切り替わりアニメーションを入れました。

Smart Animateの使い方

次に、Smart Animateの使い方を紹介していきます。

今回はこちらのシンプルな音楽プレーヤーアプリのプロトタイプにアニメーションを加えていきます。

ご自分でも試したいという方はこちらのfigmaファイルを使用して、一緒にプロトタイプを作ってみましょう。
figmaファイルはこちらからダウンロード

また、「sample」ページに出来上がったプロトタイプがあるので、一通りの設定が終わったら、そちらと答え合わせしてみてください。

そのほか今回の記事でご紹介したそれぞれのサンプルも入ってますので、ご興味あればぜひご覧ください。
ステップ1

プロパティパネルの「Prototype」タブをクリック

6.png (9.2 kB)

ステップ2

レイヤー、グループ、もしくはフレームをクリックし、プロトタイプとアニメーションの設定を作っていきます。

今回に関しては、featured tracksの全域をドラッグしたら、アニメーションを付けていきたいので、「featured tracks」のグループをクリックします。

7.png (360.3 kB)

ステップ3

選択したオブジェクトの右側に出てくるつまみをクリックアンドドラッグで、つなげたいフレームにつなげていきます。

これでフレーム間の接続ができました。

8.png (363.0 kB)

ステップ4

「prototype」タブの「Interaction」部分でアニメーションのきっかけとなるトリガー(Trigger)、アクション(Action)、そして最終状態(Destination)を設定していきます。

今回は、トリガーは「On Click」、アクションは「Navigate to」、最終状態はフレーム「Player 2」に設定します。

9.png (8.7 kB)

ステップ5

「Animation」部分の「Transition」フィールドを「Smart Animate」に変更します。

ステップ6

アニメーションをよりナチュラルにするため、イージングとアニメーション時間を設定します。

私の設定は下記画像を参考にしてください。(ご自由に変更いただいて大丈夫です)

10.png (7.6 kB)

ステップ7

つけたいアニメーションの全てにステップ2~6を繰り返し、プロトタイプが出来上がったら、画面右上の「Present」iconからプロトタイプを実際にプレビューできます!

これでプロトタイプの出来上がりです。

まとめ

以上、figmaのSmart Animate機能でプロトタイプに簡単に、もう少しリッチなアニメーションを追加する方法についてご紹介しました!

簡単にもう少しリッチなアニメーションがプロトタイプに導入できるので、ぜひ試してみてください。

また、Adobe XDを使用されている方は似た機能でAuto animateというのがあります。
こちらも記事で紹介しているので、ぜひご覧ください。

Adobe XDとは?XDの便利機能を勉強しよう!【これからはじめるXD】

0

0

AUTHOR

sasakki デザイナー

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

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

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

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

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

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

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

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

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

CONTACT PAGE TOP