FigmaからLottieへ: Figmaでアニメーションを作成するための最新情報
[最終更新日: 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
この記事が気に入ったらサポートをしてみませんか?