Figmaのデザインを動かす
Figmaで描いたデザインにLibreで動きを付けましょう。ベクターをコピーしてキーフレームを追加し、Lottieファイルとして保存できます。この方法にプラグインは不要です。
Figmaのデザインを動かす編集も書き出しも無料。アカウント登録は不要です。
エディターとドキュメントは英語です。
コピーして、動かして、書き出す
デザインをコピーする
Figmaで動かしたい図形を選び、コピーします。最初は少数の図形で試すと、読み込み結果を確認しやすくなります。
Libreに貼り付ける
StudioでNew animationを選び、Command+VまたはCtrl+Vで貼り付けます。正しく貼り付けられない場合は、FigmaのCopy as SVGでコピーし直して貼り付けてください。
動きを作る
レイヤーを選び、Positionなどのプロパティの横にあるひし形をクリックします。再生ヘッドを進めて値を変えると、次のキーフレームが作成されます。スペースキーでプレビューできます。
アニメーションを書き出す
Exportを選んでLottieのプレビューを確認します。Lottie JSONかdotLottieをダウンロードし、実際に使うプレーヤーで再生を確認してください。
Figmaから引き継げるもの
- 対応するベクター要素が読み込まれます。Smart Animateのトランジションやプロトタイプの操作は引き継がれないため、動きはLibreで作成します。
- デザインが元と違って見える場合は、選択する要素を減らすか、先にベクターパスへ変換してみてください。
まず試してみませんか？ 編集できるSuccessサンプルを開く.