こんにちは。AIあれこれ散歩道です。
Figma Motionの書き出しで、動画にすればいいのか、共有リンクで渡せばいいのか、Dev Modeで見てもらえばいいのか迷っていませんか。動きは作れても、共有や実装に渡す段階でつまずくと、せっかくのモーションがチームに伝わりません。
この記事では、Figma Motionの書き出しと共有方法を、レビュー用、提案用、開発者への引き継ぎ用に分けて整理します。既存のFigma Motionの使い方やアニメーション記事と重複しないよう、作った後にどう渡すかへ絞って解説します。
- Figma Motionの書き出し方法が分かる
- 動画と共有リンクの使い分けを整理できる
- Dev Modeで開発者へ渡す情報を確認できる
- 公開前の権限ミスを避けやすくなる
Figma Motionの書き出し基本
書き出しでできること
Figma公式のFigma Motionページでは、MotionをFigma内で編集、レビュー、インスペクト、エクスポートできる機能として説明しています。つまり、Figma Motionの書き出しは、単に動画ファイルを作るだけではありません。チームが同じデザイン文脈の中で動きを確認し、必要に応じて実装へ渡すための工程です。
まずは、誰に見せるのかを決めましょう。上司やクライアントに雰囲気を見せたいのか、開発者に実装条件を渡したいのか、SNSや資料に載せたいのかで、最適な出し方が変わります。
動画とリンクの違い
動画は相手がFigmaに詳しくなくても見やすい一方、細かな状態や数値は伝わりにくいです。共有リンクは元ファイルやレビューコメントと一緒に見られるため、チーム内確認に向いています。開発者向けには、動画だけでなく、元データやDev Modeで確認できる情報も必要です。
- 提案資料には短い動画が向いている
- 社内レビューには共有リンクが向いている
- 実装引き継ぎにはDev Modeと元ファイルが必要
- SNS用は不要な画面や社内情報を除く
- 迷ったら動画とリンクの両方を渡す
GIFやMP4の使い分け
軽く動きを見せたいだけならGIFでも十分な場面があります。ただし、GIFは色数や滑らかさに制限が出やすく、細かなモーション確認には向かないことがあります。見た目の滑らかさや提案資料での品質を重視するならMP4などの動画形式が扱いやすいです。
一方で、開発者に渡す時は、GIFやMP4だけに頼らない方が安全です。動画は完成イメージとして便利ですが、どの要素が何秒で動くのか、どんなイージングなのかまでは読み取りにくいからです。
Dev Modeとの違い
Figma公式ヘルプのHand off motion to developmentでは、Motion ModeやDev Mode、Inspectを使って開発者へモーション情報を渡す流れが説明されています。ここが、ただの動画書き出しと大きく違うポイントです。
開発者には、動画の見た目だけでなく、開始状態、終了状態、時間、遅延、繰り返し、キャンセル時の挙動などが必要になります。実装に必要な情報は動画ではなく仕様として渡す、これを意識すると手戻りが減ります。
共有前に見る権限
Figma Motionの書き出しや共有で怖いのは、デザインそのものよりも権限ミスです。社外に出してはいけない画面、顧客名、売上、未公開機能、個人情報が動画や共有リンクに含まれていないかを確認しましょう。
注意：共有リンクは相手が開けるかどうかだけでなく、相手がどこまで見られるかも確認してください。リンクを知っている人が閲覧できる設定になっていないか、編集権限を渡していないかを見直すことが大切です。
Figma Motionの書き出し実践
最初に決める目的
書き出し前に、まず目的を1つに絞ります。レビューしてほしいのか、承認してほしいのか、実装してほしいのかで、渡す形式と説明が変わります。目的が曖昧なまま書き出すと、受け取った側も何を見ればよいか分かりません。
- レビュー用は見てほしい動きを明記する
- 承認用は完成イメージを短く見せる
- 実装用は数値と状態を添える
- 資料用は不要な画面を削る
- 社外用は権限と情報を必ず確認する
開発者へ渡す情報
開発者へ渡す時は、Figma Motionの書き出しファイルだけでなく、実装に必要な情報を一緒に置くと親切です。たとえば、対象コンポーネント、トリガー、開始状態、終了状態、所要時間、イージング、レスポンシブ時の挙動です。
この情報がないと、開発者は動画を見ながら推測するしかありません。推測が増えるほど、完成後に「思っていた動きと違う」が起きやすくなります。
AIエージェントへ渡す時
最近は、FigmaのデザインやモーションをAIエージェントに渡して、実装案を作る流れも増えています。ただし、AIに任せる場合も、変更してよい範囲、使ってよいライブラリ、既存コードの守るべきルールを指定する必要があります。
メモ：AIエージェントへ渡す時は、誰が話しているかも明確にするとやり取りが安定します。たとえば、依頼者は「デザイナー佐藤」、実装確認役は「エンジニア田中」と決め、佐藤が目的を説明し、田中が実装条件を確認する形にします。
公開前の最終チェック
Figma Motionの書き出し後は、必ず一度、受け取る相手の立場で見直しましょう。再生できるか、リンクが開けるか、モバイルで見づらくないか、不要な画面が映っていないか、音声や字幕が必要か、確認するだけで失敗はかなり減ります。
- リンクを別アカウントやシークレット表示で確認する
- 動画に社外秘情報が映っていないか見る
- スマホで再生して小さすぎないか確認する
- 開発者向けには数値と状態を添える
- 共有後に修正できる連絡先を残す
失敗しやすいパターン
よくある失敗は、動画だけを送って終わることです。動画は分かりやすい反面、実装には不足しがちです。また、社外共有でファイル全体が見える設定になっていたり、承認前の画面をそのまま録画してしまったりすることもあります。
Figmaの料金や利用条件は変更されることがあるため、チームで使う場合はFigma公式Pricingも確認してください。特にチーム権限やDev Modeの扱いは、自分の契約状況と管理画面で見るのが確実です。
Figma Motionの書き出しまとめ
Figma Motionの書き出しは、動画を作る作業ではなく、誰に何を伝えるかを整える作業です。レビュー用、提案用、開発者向けで形式を分け、権限と情報の漏れを確認すると、動きの意図が伝わりやすくなります。
まとめポイント
- Figma Motionの書き出しは目的から決める
- 動画は見せやすいが実装情報は不足しやすい
- 開発者には状態や時間やイージングも渡す
- 共有前に権限と社外秘情報を必ず確認する
