Figma Motionのご紹介: キャンバスにタイムラインが追加されました
モーションがキャンバスに統合されました。コンポーネント、バリアブル、チームと同じファイル内にあるので、あなたのデザインは始めたその日から生き生きとします。
Figma Motionのご紹介: キャンバスにタイムラインが追加されましたを共有
カスタマースナップショット: Atlassian
Atlassian社では、キャンバスにモーションを統合することで、リリースを妨げることのある摩擦を解消しました。シニアプロダクトデザイナーのAlexandra Pereira氏は言います。「アニメーションイラストは、スペシャリストから引き継ぐものだったのが、システムの標準機能になります。Dev Modeとタイムライン上でのコメント機能により、シームレスなやりとりが可能になります。」
モーションに詳しくないデザイナーの方には、エージェントが基本を案内します。リードプロダクトデザイナーのDavy Fung氏は言います。「バナーをアニメーション化しているとき、よく出来ていることとそうでないことを提案するようエージェントにプロンプトを出しました。リードモーションデザイナーのMaxwell Hathaway氏は言います。「これで誰もがモーションを理解できるようになります。要素の動き方をすぐに見ることができ、より迅速に魅力を出すことができます。」
モーションは、使いこなせると When you’re designing motion, you’re designing with time. Understanding the mechanics turns movement into meaning.Principles in motion
本日より、他のデザインと同じキャンバス上でモーションがネイティブになります。モーションはボトルネックでも個人作業でもなくなりました。あらゆるデザイナーがFigmaエージェントにプロンプトを出して、新しいアニメーションタイムライン上でモーションを直接作成できるようになり、創造の壁を低くしながら可能性を引き上げます。Dev Modeへのアクセスと機能により、全体のエクスペリエンスは遥かにスムーズなハンドオフを可能にします。
同じファイルでデザインとアニメーション化
カスタムアニメーションスタイルが登場し、まもなく自分のスタイルを作成して保存できるようになります。
Motionは、Design、Draw、Dev Modeと並び、キャンバスの最新の連携機能です。任意のフレームをMotionモードに切り替えると、デザインと並んでタイムラインが表示されます。
- タイムラインコントロール: レイヤーをドラッグしてタイミングを調整し、スクラブして任意の瞬間をプレビューし、位置やスケール、回転、不透明度を独立してキーフレーム化します。オートキーフレーミングを有効にすると、再生ヘッドが動いている間に全ての変更を記録します。キャンバスで時間ベースのコメントを追加することで、誰でもアニメーション内の特定の瞬間を指摘でき、チーム全体がモーションレビューに参加できます。
- アニメーションスタイル: プリセットのアニメーションスタイル (フェード、ムーブ、スケール) を追加することで、最も簡単な方法で始めてから、キャンバス上でさらに洗練させることができます。タイムライン上でアニメーションスタイルを重ねて同時に再生したり、ドラッグして順番を設定したりできます。
キーフレームがキャンバスに統合されたことで、アトミックデザインがアトミックモーションデザインになりました。インタラクティブ業界で最後の大きなピースと言えます。
カスタマースナップショット: Adanna Onuekwusi
プロダクトデザイナーでありイラストレーターであるAdanna Onuekwusi氏にとって、モーションはいつも喜びと感情を作品に吹き込む方法になっています。それでも、1枚のイラストをアニメーション化するために外部ツールやブラウザーベースのプラグイン、Figmaを行き来する必要があり、常にコンテキストを切り替えなければなりませんでした。キャンバスにモーションを直接統合したことでそれが変わります。彼女は言います。「全てを1か所にまとめられると本当に便利です。モーションプロセスを体系化してライブラリとして公開できるので、1人で行う作業だったのが、他の人にも恩恵のあるものへと広がります。」
全てのファイルにモーションシステムを構築
優れたモーションとは、一度限りのアニメーションの寄せ集めではありません。一度定義されたらどこでも適用できる値のセットです。しかし、ほとんどのチームにはそのようなシステムを構築する場所がなく、モーションはスプリントのたびに始めから再構築され、リリースされた納品物は、何がデザインされたかではなく、誰の手が空いていたかを反映するものになっています。
- アニメーションコンポーネント: コンポーネントはデザインシステムの基本ユニットです。これにモーションも導入されました。コンポーネントのアニメーションを一度作成すると、塗りやタイポグラフィと同じように、そのコンポーネントはあらゆる画面やコラボレーターのファイルをまたいで移動できます。
- モーションバリアブル: モーションバリアブルを使用してそのアニメーションをカスタマイズできます。イージングバリアブルを作成し、そのバリアブルに複数のモードを定義してアニメーション全体で適用します。ページレベルでモードを切り替えると、そのバリアブルを参照している全てのアニメーションが一度に更新されます。
毎日触れるものなら、ソフトウェアは何かを感じさせるものであるべきです。モーションはそれを生き生きとさせるもう一つの道筋なのです。
シェーダーエフェクトとモーション
シェーダーが表現する全てのプロパティをモーションタイムライン上でキーフレーム化できるようになりました。従来、Figmaのアニメーション化可能なプロパティは限られていました。それがシェーダーによって変わります。スライダーや入力フィールドで操作できるものは何でもキーフレームを使ってアニメーション化できるようになりました。
3D変換が近日登場
モーションと3D変換は、同じデザイン決定の中で採用されました。要素の動き方を考えているとき、それが空間のどこに位置するかを考えているでしょう。
3D変換なら、ネイティブコントロールとドラッグ時のライブプレビューを使って、Z軸上でフレーム、ベクトル、テキストを回転させることができます。全ての変換は完全に編集可能なままです。結果はCSSにエクスポートされ、MCPを通じて接続されるため、構築した空間デザインは、コーディングされた空間デザインとなります。同じファイル内で3D変換とモーションを組み合わせると、Figmaでは従来不可能だった空間的なインタラクションをプロトタイプ化できます。
Figmaエージェントでもっと先まで
モーションには、高い技術が求められます。アニメーションを制作したことのないデザイナーにとって、Figmaエージェント 今日から、Figma専用に設計されたエージェントと一緒にキャンバス上で直接作業を始めましょう。Figmaデザインエージェントが登場
もうアニメーションを制作しているデザイナーの方には、エージェントが反復作業を処理し、作品をさらに洗練させたりディテールを詰めたりすることに集中できる時間が生まれます。イージングカーブやタイミングを調整したり、プロパティを追加したり、消して再考したりできます。複数のプロンプトを同時に実行できるので、エージェントが複数のフレームを処理している間も流れが途切れません。
エンタープライズシステムでは、ガードレール内で生成できることはとても重要です。速度と同様に一貫性やアクセシビリティ、導入の品質を確保できるようになります。
デザインしたモーションをリリース
本番のモーションは、デザインされたものと完全に一致することはめったにありません。イージングやタイミングなど何時間もかけて調整したディテールは、ファイルとコードの間で失われてしまいます。Figmaは、ハンドオフの前にそのギャップを埋めます。アニメーション化されたフレームを選択し、ファイルから直接MP4、GIF、SVG、WEBMとしてエクスポートすることで、早い段階で方向性を揃え、意見を得ることができます。
ファイルを制作する準備ができたら、Dev Modeに切り替えてMotionタブを開きます。全体のタイムラインを見て確認できます。全てのタイミング値、イージングカーブ、キーフレームは、制作者による解釈の必要なく読み取ることができます。アニメーションコードをCSS、JSON、またはフレームワーク対応のReactおよびmotion.devで直接パネルからコピーできます。
モーションはMCPと互換性 Figma’s MCP server brings your design decisions into the tools where code gets written—so what gets built actually matches what was designed. Here’s what that unlocks for everyone who builds products.
The TL;DR on MCP: Why context matters and how to put it to work
チームメイトが必要な形式でモーションを簡単に確認・翻訳できれば、意図とリリースの間のギャップが縮小されます。
アニメーションは仕上げのステップやスコープ上のリスクではなくなりました。モーションは他の全ての要素と同じデザインプロセスを経ることになります。最初のフレームから最終ビルドまでが1か所で完結します。
Motionはオープンベータ中です。スターターユーザーは限定的エクスポートでモーションにアクセスできます。全プランのフルシートユーザーは、モーションプリミティブとエクスポートにアクセスできます。有料プランでは、フルデザインシステムの統合とモーション用Figmaエージェントが利用可能です。
効果的なモーションデザインの原則を知り、Figma Motionでアニメーションを作成してみてください。プレイグラウンドファイルでモーションをお試しになるか、ヘルプセンターから始めましょう。3D変換のウェイトリストは、こちらで登録してください。
FigmaのCEOであり共同創設者であるDylan FieldによるConfigのまとめをお読みください。
