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 - テキストサポート
🔥 Hot off the update list for @figma to Lottie: we’ve added text support, including variable font compatibility!
— LottieFiles (@LottieFiles) July 13, 2023
Now you can create captivating animated text effects using a wide range of font variations - perfect for marketing banners, ads, and more. pic.twitter.com/z9NdV46DUs
テキストをサポートすることで、ユーザーは幅広いフォントバリエーションから選択し、魅惑的で素晴らしいアニメーションのテキストエフェクトを作成することで、創造性を発揮できます。
2 - グラジエントサポート
アニメーションに深みとリアリズムのレイヤーを追加。グラデーションのサポートにより、直線的なグラデーションと放射状のグラデーションの両方を組み込むことができます。
3 - ブール図形のサポート
Exciting news! 🌟
— LottieFiles (@LottieFiles) July 5, 2023
Our LottieFiles for @Figma plugin now supports boolean shapes!
Complex designs and shapes created with the union, subtract, intersect, or exclude functions can now be animated and exported to Lottie with our plugin! No sweat. 🧩 pic.twitter.com/kqzCuE0Bwx
あなたの創造的な考えを形にしましょう！Figma to Lottieは、ブール図形にも対応しているので、UNION、SUBTECT、INTERSECT、EXCELECT関数を使ったデザインを、シームレスにアニメーション化できます。
4 - ベクトルマスクのサポート
🥳 Our LottieFiles for @Figma plugin just got an upgrade: we added vector mask support!
— LottieFiles (@LottieFiles) June 29, 2023
Now you can hide or reveal selected contents of your layers with the Figma to Lottie feature, allowing you to create complex visual effects & apply selective visibility to your animations. pic.twitter.com/0esRcxF65A
複雑なデザインに命を吹き込みましょう！ベクトルマスクに対応しているので、コンテンツレイヤーを選択的に隠したり、表示したりすることができます。その結果 あなたのアニメーションにユニークなセンスを加える複雑な視覚効果も生まれます。
5 - トリムパス機能
@figma to Lottie just got even better with the new Trim Path feature! 🎉 ✂️
— LottieFiles (@LottieFiles) July 26, 2023
Now you can animate stroke layers and create stunning motion designs effortlessly.
Download LottieFiles for Figma now 👉 https://t.co/kt9X5TBEJ0 pic.twitter.com/HoLmtbzPxY
トリムパス機能を使えば、ストロークレイヤーをアニメーション化して、あなたのデザインが人目を引くモーショングラフィックスにシームレスに変身します。
6 - スピード・コントロール
Take charge of your animation speed with the latest @figma to Lottie update!
— LottieFiles (@LottieFiles) August 3, 2023
Now you can speed up or slow down your animation to any pace you like with ease. 🏃♂️
Try out LottieFiles for Figma 👉 https://t.co/kt9X5TBEJ0 pic.twitter.com/dr930r5tTw
自分のドラムのビートに合わせて行進しよう！スピードコントロール機能で、アニメーションのスピードをカスタマイズできます。疾走するもよし、ゆっくり進むもよし。
7 - プリセット・コントロール
😎 @Figma to Lottie feature just got another upgrade: preset controls!
— LottieFiles (@LottieFiles) August 23, 2023
Now you can fine-tune the duration, adjust delays, and choose whether to animate in sequence or in parallel.
Start animating with LottieFiles for Figma at https://t.co/dR1j5j2kz2. pic.twitter.com/VzB4EgGNqU
コントロールの幅が広がれば、精度も高まります。Figmaのプリセット・コントロールをLottieに導入。アニメーションの継続時間を調整したり、その他のコントロールも多数用意されています。連続したレイヤーのアニメーションにはLinear setting、すべてのレイヤーを一度にスタートさせるにはParallelを選んでください。
8 - ストローク・グラディエント・サポート
🌈 A colorful update on @figma to Lottie: stroke gradients!
— LottieFiles (@LottieFiles) September 19, 2023
You can now add linear and radial gradients to the stroke fill, and they are also supported with presets. pic.twitter.com/gUp4HKphYf
あなたの色にはもう少し色が必要です。ストロークグラディエントをサポートしました！ストローク・プロパティに線形および放射状のグラデーションを追加できるようになりました。ストロークグラディエントはプリセットでもサポートされています。
9 - ネスティッドフレームとグループローテーション
Nested frames and group rotations are here by popular demand! 🎉 Now live on LottieFiles for @Figma (https://t.co/XHjutaqYKJ). 😄
— LottieFiles (@LottieFiles) November 22, 2023
With nested frames support, you can animate frames within frames, while grouped rotations eliminate the need to individually move layers. pic.twitter.com/Hc1J5SGtcs
最も要望の多かった2つの機能が導入された： nested framesとGroup Rotationsです。これらの新しいアップデートにより、フレーム内でフレームをアニメーションさせることができるようになり、グループ回転では、レイヤーを個別に動かす必要がなくなりました。レイヤーをグループ化し、一度に回転させるだけです。
10 - オートレイアウト
Announcing 4 key updates on @figma to Lottie. 🔽
— LottieFiles (@LottieFiles) December 4, 2023
1. 🖥️ Auto Layout
- Animate the layout flow direction between vertical, horizontal, and wrapped layouts.
- Auto-space elements as the parent element resizes. pic.twitter.com/4dA1qrXZ4C
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