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】

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

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

無料相談フォームへ

7

1

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

iwasawa ayane

oshimo

yoko oshimo

異業界からやってきたデザイナー。palanARのUIをメインに担当してます。これからたくさん吸収していきます!

CONTACT PAGE TOP