見出し画像

FigmaからLottieへ： Figmaでアニメーションを作成するための最新情報

LottieFiles Japan 公式note

[最終更新日: 2023年12月14日］

LottieFiles for Figmaは、単なるデザイナーのツールキットの1つではありません。Figmaの複雑なデザインとLottieの流れるようなアニメーションの間のシームレスな橋渡し役として、このプラグインは、Figma to Lottieの導入以来、静的なデザインを、プロダクションですぐに使えるアニメーションに簡単に変換できます。

まだFigmaからLottieへの機能を使い始めて間もない方は、始める前に以下のブログ記事をご覧ください：

発売以来、Figma to Lottieが、多くの方にとって重要なツールとなっていることを、私たちは理解しています。そのため、私たちは、素晴らしいLottieアニメーションを作成するための最高のツールを提供するために、機能のアップデートを継続的に行っています。

そこで、LottieFiles for FigmaプラグインのFigmaからLottieへの機能の最新アップデートの一覧をご紹介します。

1 - テキストサポート

テキストをサポートすることで、ユーザーは幅広いフォントバリエーションから選択し、魅惑的で素晴らしいアニメーションのテキストエフェクトを作成することで、創造性を発揮できます。

2 - グラジエントサポート

アニメーションに深みとリアリズムのレイヤーを追加。グラデーションのサポートにより、直線的なグラデーションと放射状のグラデーションの両方を組み込むことができます。

3 - ブール図形のサポート

あなたの創造的な考えを形にしましょう！Figma to Lottieは、ブール図形にも対応しているので、UNION、SUBTECT、INTERSECT、EXCELECT関数を使ったデザインを、シームレスにアニメーション化できます。

4 - ベクトルマスクのサポート

複雑なデザインに命を吹き込みましょう！ベクトルマスクに対応しているので、コンテンツレイヤーを選択的に隠したり、表示したりすることができます。その結果 あなたのアニメーションにユニークなセンスを加える複雑な視覚効果も生まれます。

5 - トリムパス機能

トリムパス機能を使えば、ストロークレイヤーをアニメーション化して、あなたのデザインが人目を引くモーショングラフィックスにシームレスに変身します。

6 - スピード・コントロール

自分のドラムのビートに合わせて行進しよう！スピードコントロール機能で、アニメーションのスピードをカスタマイズできます。疾走するもよし、ゆっくり進むもよし。

7 - プリセット・コントロール

コントロールの幅が広がれば、精度も高まります。Figmaのプリセット・コントロールをLottieに導入。アニメーションの継続時間を調整したり、その他のコントロールも多数用意されています。連続したレイヤーのアニメーションにはLinear setting、すべてのレイヤーを一度にスタートさせるにはParallelを選んでください。

8 - ストローク・グラディエント・サポート

あなたの色にはもう少し色が必要です。ストロークグラディエントをサポートしました！ストローク・プロパティに線形および放射状のグラデーションを追加できるようになりました。ストロークグラディエントはプリセットでもサポートされています。

9 - ネスティッドフレームとグループローテーション

最も要望の多かった2つの機能が導入された： nested framesとGroup Rotationsです。これらの新しいアップデートにより、フレーム内でフレームをアニメーションさせることができるようになり、グループ回転では、レイヤーを個別に動かす必要がなくなりました。レイヤーをグループ化し、一度に回転させるだけです。

10 - オートレイアウト

Auto Layoutの登場です！このプラグインは、あなたのデザインを正確にAuto Layoutでレンダリングします。Auto Layoutの方向、折り返し、間隔を調整して、楽しいアニメーションを作成しましょう。

ご質問は？ヘルプセンターもあります

FigmaからLottieへに関するご質問にお答えします。専用のヘルプセンターにアクセスしてください。機能の制限事項の理解から、ツールを最大限に活用するためのヒントまで、すべて揃っています。

FigmaからLottieへのヘルプ・センターは、こちらからご覧ください： https://lottie.link/notion-figma-to-lottie-help-center

また、何を作れるかインスピレーションが必要な場合は、このブログ記事をご覧ください： 30日間のFigma to Lottieでインスピレーションを得よう。それでは、よいデザインを！

Download LottieFiles for Figma now

https://lottiefiles.com/LottieFiles

引用元：https://lottiefiles.com/blog/design/lottiefiles-figma-to-lottie-latest-updates-create-animations

この記事が気に入ったらサポートをしてみませんか？