【Figma Tips】サクッとカルーセルアニメーションを作る方法

はじめに

こんにちは、エキサイト株式会社デザイナーの山﨑です。 今回はFigmaでサクッとカルーセルアニメーションを作る方法をご紹介します。

レイヤー構造を理解していないと意外と作るのに手間取るカルーセルアニメーションですが、手順通りに作れば以下のようなカルーセルを作ることができます。

①フレームを作る

まず初めに左上のツールバーから「フレーム」を選択し、カルーセルのフレームを375px×180pxで作ります。フレームの名前も「1_Carousel」に変更してください。

②サムネイルを3種類作り、コンポーネントを作る。

①と同じ要領で296px×180pxのフレームを作り、わかりやすくするためA・B・Cと名付けたサムネイルを作ります。この時、色は左の「塗り」から任意を色を選択すると変更することができます。

3つのサムネイルをそれぞれコンポーネントにします。

コンポーネントは、コンポーネントにしたい要素をクリックした状態で右クリックし、「コンポーネントの作成」をクリックすれば作ることができます。

③作ったサムネイルをフレームに入れ込む

写真のように、フレーム「1_Carousel」がはみ出した状態で3つのサムネイルを入れ込みます。

ここでポイントです。

この時、「1_Carousel」のフレーム内のレイヤーでは上からA、C、Bの順番で配置してあります。基本的にカルーセルアニメーションでは、

「1_Carousel」

 ┗1. 真ん中に配置したいサムネイル(この状況ではA)

 ┗2. 左に配置したいサムネイル(この状況ではC)

 ┗3. 右に配置したいサムネイル(この状況ではB)

の順番で配置してください。

同じような手順で、「1_Carousel」をコピーしてレイヤーの順番、サムネイルの位置、フレーム名を変えて「2_Carousel」「3_Carousel」も作っていきます。

各カルーセルコンポーネント化し、コンポーネント化したカルーセルを全て選択してバリアント化します。

④ページインジケーターを作る

375px×9pxのフレームを作り、その中に9px×9pxの円を三つ並べます。この時、一番右の円を黒にしてあとの2つはグレーにします。

完成したページインジケーターをコピーして真ん中の円が黒、右側の円が黒verを作り、それぞれコンポーネント化します。

バリアントとして統合し、プロパティ名を「Paging Indicator」、各バリアントに「1」「2」「3」と名称変更すれば完成です。

⑤作ったカルーセルをアニメーションで使うフレームに入れ込む

375px×230pxでフレームを作り、そこにカルーセル「1_Carousel」とページインジケーター「1」を入れます。

このフレームをコピーして、カルーセル「2_Carousel」ページインジケーター「2」、カルーセル「3_Carousel」ページインジケーター「3」に変更したフレームを作ります。

ここまでくればほぼ完成です。

⑥アニメーションをつけて完成

「1」のフレームをクリックした状態で、インタラクションの設定を行います。赤枠の通りに設定してください。これと同じ設定を「2」「3」のフレームに行うとこのような状態になります。

アニメーションを再生する前に文字を削除して完成です。

最後に

最後に、エキサイトではデザイナー、フロントエンジニア、バックエンドエンジニア、アプリエンジニアを絶賛募集しております!

興味があればぜひぜひ連絡ください!🙇

www.wantedly.com