Figmaだけで作った
ベータ版として公開されているFigma Motionを使ってみました。
ついでに Figma Shadersも使ってみたら、Figmaだけでお手軽にグラフィカルなアニメーションを作れました 
-
Figma Shaders
- GLSLというグラフィックス専用言語で書かれたプログラム
- GPUを使ってリアルタイムにビジュアルエフェクトを生成する機能
今回は Figma Motionについてです！
Figma Motionとは？
デザインファイルから離れることなく、Figmaのキャンバス上で直接、精密で本番環境に対応したアニメーションを作成できる新しいツールです 
現在、オープンベータ版として提供されています
- 外部ツールやプラグインを行き来せず、同じファイル内でモーションデザインを完結させることができる
- 画面下部に 専用の「タイムライン」 が表示される
- デザイン、描画、Devモードと並ぶ、キャンバス上の新しい体験として機能
アニメーション初心者でも、直感的にデザインに「時間」や「動き」という表現を取り入れられるよう設計されているようです 
Figma Motionでできること
Figma Motionでできること・特徴を、実際に機能を使いながら紹介していきます 
使用手順
まず、画面下部のメニューから Motionを選択します
すると、こんな感じで、画面下部にタイムラインが表示されます
さっそく触ってみます！
キーフレームによる基本アニメーション
キーフレーム
映像の特定の位置（フレーム）に、設定値を記録し、時間軸に合わせて変化させる機能
この円をアニメーションさせてみます。
After Effectsなど触ったことある方は見覚えがあると思いますが、◇のアイコンが各プロパティについています。
各プロパティの値を指定した状態で、タイムラインの任意の位置に移動し、◇を押すとキーフレームを打つことができます！
動画を見てもらった方がわかりやすいかもしれません↓
- 0f地点：Scale 100%
- 400f地点：Scale 50%
- 800f地点：Scale 100%
小さくなってまた大きくなるアニメーションです
この動画ではScaleを動かしてみましたが、こんな感じで色んなプロパティを時間軸に合わせて変化させることができます！
キーフレームが打てる要素
執筆時点のベータ版の画面を確認してまとめたため、一部網羅できていない、または今後変更される可能性があります。
| プロパティ名 | 概要 |
|---|---|
| Position（X / Y） | 位置 |
| Scale（横 / 縦） | 大きさ |
| Rotation | 回転 |
| Dimensions（W / H） | 横幅と高さ |
| Opacity | 不透明度 |
| Corner radius | 角丸 |
| Count | 角の数（3 = 三角形） |
| Arc Start | 円弧の始点の角度（0°〜360°） |
| Arc Sweep | 円弧の広がり（100% = 完全な円、50% = 半円） |
| Arc Ratio | ドーナツ型の穴の大きさ（0% = 穴） |
| Stroke ~~ | 線に関する色・不透明度・太さ・パスの開始と終了位置 |
| Inner shadow ~~ | 内側の影の色・不透明度・オフセット・ぼかし・影の広がり |
| Drop shadow ~~ | 外側の影の色・不透明度・オフセット・ぼかし・影の広がり |
| Layer blur ~~ | ぼかしの半径 |
| Background blur ~~ | レイヤーの背後（後ろにある要素）のぼかし半径 |
| Noise ~~ | ノイズのサイズ・密度・色・不透明度 |
| Texture ~~ | テクスチャの不透明度・粒度 |
| Glass ~~ | 光のあたり具合・角度・屈折度合い・厚み・ざらつきなど |
| Shader ~~ | 設定できるものはビジュアルエフェクトによって違う |
タイムライン・キーフレームについては、触ってみて慣れるのと
とにかく大体のプロパティは制御できることを知っておけば良いと思います！
- 各レイヤー / プロパティ（位置、スケール、回転、不透明度など）を独立して設定できる
- 「オートキー（Auto-keyframe）」を有効にして再生中の変更をすべて自動記録させることも可能
用意されたアニメーションを適用できる
- フェード、移動、スケールなどの事前に用意されたアニメーションスタイルを使って、即座に動きを追加できる
- 複数のスタイルを重ねて同時に再生させたり、ドラッグして順序立てて再生させたりすることも可能
右メニューのAnimationsから、色んなアニメーションスタイルを指定することができます！
アニメーションの種類は大きく分けて3種類です
- Enter
- フェードインなどオブジェクトが現れるようなアニメーション
- Cycle
- ループアニメーション、ループしても不自然じゃないように終わりの処理もしている
- Exit
- フェードアウトなどオブジェクトが消えるようなアニメーション
これもめちゃくちゃ種類があります!!
試しに触ってみてもらうのが良いかと思います！
- モーションスタイルを適用した後に微調整もできる
- 各種類の中でも、Fast, Medium, Slowと分類があり、想定アニメーションのスピード感で選べる
スタイル例
Enter - Glide
Cycle - Rotation
Exit - Vanish
Figmaエージェント（AI）を活用したモーション生成
- 作りたい動きをプロンプトで説明するだけで、FigmaのAIエージェントがタイムライン上に実際のキーフレームを構築
- 生成後、タイムライン上でイージング（加速・減速）などを手動で細かく微調整も可能
左メニューの Agentsから、チャットでプロンプトを投げられます
動かしたいオブジェクトを指定した状態でも会話ができます（複数選択可！）
今回は雑に以下を投げてみました！
上から3枚が垂直に落ちてきて、一旦落ち切って、また下から上に順番に上がってくる
スピーディーなアニメーションできる？
オブジェクトが回転していたので、動きの軸の調整ありましたが
少し対話をするだけで、イメージ通りのモーションをつけてくれました。
タイムラインを1から構築する手間が省けるので、かなり強力な機能！
モーションシステムの構築（再利用と一括管理）
- 作成したアニメーションを「コンポーネント」として登録できる
- 他の画面やファイルでも一貫して再利用可能
- また、イージングやタイミングを「バリアブル」として定義できる
- 様々なモーション値の切り替えや、ファイル全体のアニメーションを一括更新が可能
ローディングアニメーションなど、複数ページで使いまわすアニメーションの管理に 
コラボレーションとスムーズな開発者ハンドオフ
- タイムライン上の特定の瞬間に対してタイムスタンプ付きのコメントを残せる
- ピンポイントにフィードバックできる
- Dev Mode（開発モード）では、アニメーションのコードを
CSS、JSON、React、またはmotion.devとして直接コピーできる - Figma MCPサーバーからAIコーディングツールに完全なモーションのコンテキスト（イージングやタイミングの値など）をそのまま渡せる
マイクロインタラクションなどのアニメーションをそのままコードに！
ユーザー体験をリッチにできる
多彩なフォーマットでのエクスポート
-
MP4、GIF、SVG、WebMとして書き出すことができる - サイズをいくつか指定できる
- 0.5x, 1x, 2x
- 1920w, 720h, 1080h, 1440h, 2160h
- フレームレートもいくつか指定できる
- 60fps, 30fps, 24fps, 12fps
フレームレート
動画が1秒間に何枚の静止画（コマ）で構成されているかを示す数値
数値が高いほど映像はなめらかになる
Figma Motionを使った感想
Figma内でグラフィカルなアニメーション作成も完成できそうな可能性を感じました！
動きのテンプレートがあったり、AIに指示して作成もできるのでアニメーションを作ったことがない人でもクオリティの高いものができそうです
また、プロパティ名を出せたりオブジェクトを指定してプロンプトを投げられるので、他の動画生成AI系よりも、細かく指示がしやすいなと思いました。
興味がある方はぜひ試してみてください！
参考