Linearity Move でファイルを読み込むのは非常に簡単です。

Move を開くとホーム画面が表示されます。Mac では、Move のメニューバーの ファイル > ホーム画面を開く… で同じ操作ができます。この画面の読み込むタブに移動します。

ここでは、Curve、Sketch、Adobe Illustrator、および SVG ファイルと PDF ファイルから選んで読み込むことができます。また、Figma アカウントに接続して、Figma ファイルを Move で直接開くこともできます。

Mac では、メニューバーの ファイル > このMacから開く… を選択してファイルピッカーを開くこともできます。

Move でアニメーションさせる Figma ファイルを準備する

ファイルを準備する方法を知っていれば、Move の自動アニメート機能を使って、Figma デザインを簡単にアニメーション化できます。以下の手順に従って、静的なデザインをダイナミックなアニメーションに変えましょう。

Figma でファイルを準備する まず、Figma でレイヤーを整理し、識別しやすいように名前を付けます。良いレイヤー構造の例については、サンプル Figma ファイルをご確認ください。
ファイルを Linearity Move で読み込む オブジェクトを SVG で、または Figma ファイル全体を Linearity Move にアップロードします。
Move でアニメーションを調整する 自動アニメート機能を使用すると、Move はシーン内の連続するフレーム / アートボードの差分に基づいてアニメーションを自動的に作成します。Move でキーフレームを調整し、要素を編集して、より磨きをかけることもできます。

詳細は以下の通りです。

ステップ 1: Figma でファイルを準備する

作成したいアニメーションをイメージすることから始めましょう。それぞれの重要な動きや変形を、絵コンテなどを使って考えます。

最終的なシーンを最初に考え、その前のステップを逆算して考えるのも有効です。この方法は、アニメーションの計画段階を単純化し、最終的なクオリティを向上させることがあります。

シームレスな自動アニメーションのために、個々のオブジェクトがすべてのシーンで一貫した名前を維持するようにしてください。

オブジェクトは Figma のフレームから出すぎないように配置しましょう。すべての要素がフレームの内側に触れていることを確認してください (たとえば、要素の半分だけが外側にはみ出ている場合は問題ありません)。