【Figma】最小限のFrameでスケルトンUIアニメーションを作る

スケルトンUIとはコンテンツが表示されるまでの間、コンテンツの枠組みを表示する読み込みUIの一種で、YouTube、Uber Eats、Pinterestなどのサービスで採用されています。
読み込み中であることを伝えるだけでなく、コンテンツが表示される位置や画面の構成をあらかじめ示すことで、ユーザーが待ち時間に感じるストレスを軽減する役割があります。　　　
今回は、「バリアブル」と「プロトタイプの条件付きアクション」を使って3回明暗が切り替わった後、自動的に完成画面へ切り替わるスケルトンUIの作り方を解説します！

1. UIを準備

まずはキャンバス上に、以下の3つの画面を用意します。

1. Frame1：明るい状態（#DDDDDD）
   • 役割：アニメーションのスタート
2. Frame2：暗い状態（#AAAAAA）
   • 役割：明暗の切り替え回数をカウント
3. Frame3：実際の画像やテキストが表示された最終UI

2. 初期値を設定

バリアブルタブから「数値」を選択します。

名前をcountに変更し、値が0になっていることを確認し、ファイルタブに戻ります。

3. Frameをプロトタイプで繋ぐ

Frame1→Frame2

明るい状態のFrame1から暗い状態のFrame2へ遷移させます。設定は以下の通りです。

1. トリガー：アフターディレイ
   • ディレイ：1ms
2. アクション：次に移動
   • 移動先：Frame2
3. アニメーション：スマートアニメート
   • イージング：線型
   • 所要時間：1000ms

Frame2 → Frame1 / Frame3

次に、Frame2からの遷移を設定します。
ここでは、2回目まではFrame1へ戻し、3回目はFrame3へ進むようにします。設定は以下の通りです。

1. トリガー： アフターディレイ
   • ディレイ： 1ms
2. アクション： 条件付きアクション
3. アニメーション： 即時

条件付きアクションの設定は以下です。

• if count < 3（count が3未満の場合はFrame1へ戻し、countを1増やす）
  • 次に移動： Frame1
    • アニメーション：Frame1→Frame2と同じ
  • バリアブルを設定： count + 1
• else（count が3以上になった場合は、Frame3へ遷移）
  • 次に移動： Frame3
    • アニメーション：即時

完成

これで設定は完了です。
プロトタイプを再生すると、明るい状態と暗い状態を3回繰り返し、Frame3へ自動的に切り替わります。
条件付きアクションはスケルトンUIのように一定回数だけ繰り返すアニメーションを作る際に、無駄なFrameを作成せずに済むため、覚えておくと便利です。
ぜひ試してみてください！