PCロール

PCロール

【Figma】スライドにアニメーションを付ける

【Figma】スライドにアニメーションを付ける

Figma でスライド作成をしていると、アニメーションを追加したくなりますよね。

PowerPoint にはアニメーションを自分で選んで全て手動で付ける必要がありますが、

なんと、Figma にはスマートアニメートという機能が存在します。

その名の通り、自動でアニメーションをつけてくれる機能です!

今回は、スライドにスマートアニメートをつける方法についてお伝えします。

1. オートレイアウトを解除する
2. スライドを全て矢印でつなぐ
3. 全ての矢印に対し、スマートアニメートの設定を行う

オートレイアウトを解除する

まず、スライドをグループ化している場合は、グループ化(オートレイアウト)の解除を行います。

写真

【コマンド ⌘】キー + 【バックスペース】キー でも解除できます。

こうすることで、スライド一枚一枚が、単体で別のものとして扱われます。

これで、アニメーションを追加する準備が整いました!

スライドを全て矢印でつなぐ

次に、スライドを矢印でつないでいきます。

画面右側の、プロトタイプ」タブを選択すると、矢印を引くことができます。

写真

矢印は、どのスライドからどのスライドに移動させるかを指定しています。

プレゼンテーションでは通常、順番にスライドが進んでいくので、写真のように矢印をつないでいきましょう。

写真

この時、下の写真のような表示が出てくると思うのですが、現時点では『バツ』をクリックして消して構いません。

写真

全ての矢印に対し、スマートアニメートの設定を行う

矢印をつなぎ終わったら、写真のような画面が表示されるように、全ての矢印を選択します。

写真

全て選択したら、① の部分をクリックします。

写真

すると、②③④⑤ のような画面が出てくると思います。

順番に説明します。

②【クリック時】

何をした時に、「スライドを移動する」などの操作が行われるのか、トリガーを設定します。

もともとの、「クリック時」でも良いのですが、「キー/ゲームパッド」を選択し、何のキーを押した時に移動するかを設定すると便利です。

写真 写真

例えば、エンターキーを押した時に移動するように設定したい場合は、ここでエンターキーを押します。

写真

③【次に移動】

② で設定したトリガーで、どのような操作を行うのかを設定します。

今回の場合は、このままで問題ありません。

「次に移動」というのは、次のスライドに移動するということを表していますからね。

④【混合】

こちらも、混合で問題ありません。

⑤【即時】

ここが、今回のポイントです!

即時に次のスライドに移動するのではなく、アニメーションをつけながら移動してほしいので、

スマートアニメートを選択します。

写真

これで、スライドに自動でアニメーションが追加されます!

では、実際にアニメーションを追加した例を見てみましょう。

写真

こちらのようになります!

フェードイン、フェードアウトがきれいに設定されており、スライドもスムーズですよね。

アニメーションを全て自分で設定する大変な作業を、スマートアニメートでは簡単に行うことができます!

日々の作業の時短にもなりますね。

Figma を使ったスライド作成が、さらに捗ること間違いなしです!

おわりに

最後までご覧いただきありがとうございます。

PC ロールでは、テクノロジーに関する情報をまとめて発信しています。

また、おすすめのガジェットについて幅広く紹介するガジェロールもあります。

ガジェットやソフトを使うエンジニア・クリエイターのみなさん、ぜひご覧ください。

ガジェロール | ガジェットの巻物

PC ロール | PC の巻物