
FigmaからLottieへ: Figmaでアニメーションを作成するためのすべての最新情報
[Last updated: 08 January 2023]
-------------------------------------------------
LottieFiles for Figmaは、単なるデザイナーのツールキットではなく、画期的なゲームチェンジャーです。Figmaの複雑なデザインと、Lottieの流れるようなアニメーションの間のシームレスな橋渡し役として、このプラグインは、Figma to Lottieを導入して以来、静的なデザインを、制作可能なアニメーションに簡単に変換しています。
まだFigmaからLottieへの機能を使い始めて間もない方は、始める前に以下のブログ記事をご覧ください:
発売以来、Figma to Lottieが、多くの方にとって重要なツールとなっていることを、私たちは理解しています。そのため、私たちは、素晴らしいLottieアニメーションを作成するための最高のツールを提供するために、機能のアップデートを継続的に行っています。
そこで、LottieFiles for FigmaプラグインのFigmaからLottieへの機能の最新アップデートの一覧をご紹介します。
1. Text Support
🔥 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. Gradient Support
アニメーションに一層深みのあるリアリズムを加えましょう。グラデーションのサポートにより、直線的なグラデーションと放射状のグラデーションの両方を組み込むことができます。
3. Boolean Shapes Support
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は、Boolean Shapeにも対応しており、Union(和)、Subtract(減算)、Intersect(交差)、Exclude(除外)関数を使用して作成されたデザインを、シームレスにアニメーション化します。
4. Vector Mask Support
🥳 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
複雑なデザインに命を吹き込みましょう!Vector Maskをサポートし、コンテンツレイヤーを選択的に隠したり、見せたりすることができます。その結果、あなたのアニメーションにユニークなセンスが加わり、より高度で複雑なビジュアルエフェクトが生まれます。
5. Trim Path Feature
@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
Trim Path機能を使えば、ストロークレイヤーをアニメーション化して、デザインをシームレスに目に留まるモーショングラフィックスに変換できます。
6. Speed Control
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. Preset Controls
😎 @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設定を、すべてのレイヤーを一度にスタートさせるにはParallel設定を選んでください。
8. Stroke gradient support
🌈 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
あなたの色にはもう少し彩りが必要です。そんなとき、Stroke Gradientsをご利用ください!ストロークのプロパティにリニアおよびラジアルグラデーションを追加できるようになりました。Stroke Gradientsはプリセットでもサポートされています。
9. Nested frames and group rotations
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. Auto layout
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の登場です!LottieFiles for Figmaプラグインは、あなたのデザインをAuto layoutで正確にレンダリングします。Layoutの方向、折り返し、間隔を調整して、楽しめるアニメーションを作成しましょう。
11. Variant component
🌟 @Figma to Lottie: Latest update now supports Components.
— LottieFiles (@LottieFiles) December 21, 2023
You now have precise control over an individual element's movement, combine elements easily and create complex animations using your existing components.
Explore more at: https://t.co/kt9X5TBEJ0 pic.twitter.com/DCFsI4GD47
新しいFigmaからLottieへのアップデート・サポートにより、複雑なアニメーション・デザインの作成が可能になり、単一または複数の変形コンポーネントを持つシーンで、個々のエレメントを詳細にコントロールすることができます。
ご質問は?ヘルプセンターもあります
FigmaからLottieへのアップデートの機能に関する質問に、私たちがお答えします。専用のヘルプセンターにアクセスしてください。潜在的な制限の理解から、ツールを最大限に活用するためのヒントまで、すべて揃っています。
FigmaからLottieへのヘルプ・センターは、こちらからご覧ください: https://lottie.link/notion-figma-to-lottie-help-center
また、何を作れるかインスピレーションが必要な場合は、このブログ記事をご覧ください: 30日間のFigma to Lottieでインスピレーションを得よう。それでは、よいデザインを!
引用元:https://lottiefiles.com/blog/design/lottiefiles-figma-to-lottie-latest-updates-create-animations