見出し画像

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

LottieFiles Japan 公式note

[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

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

2. Gradient Support

アニメーションに一層深みのあるリアリズムを加えましょう。グラデーションのサポートにより、直線的なグラデーションと放射状のグラデーションの両方を組み込むことができます。

3. Boolean Shapes Support

あなたの創造的なアイデアを形に変えましょう！Figma to Lottieは、Boolean Shapeにも対応しており、Union（和）、Subtract（減算）、Intersect（交差）、Exclude（除外）関数を使用して作成されたデザインを、シームレスにアニメーション化します。

4. Vector Mask Support

複雑なデザインに命を吹き込みましょう！Vector Maskをサポートし、コンテンツレイヤーを選択的に隠したり、見せたりすることができます。その結果、あなたのアニメーションにユニークなセンスが加わり、より高度で複雑なビジュアルエフェクトが生まれます。

5. Trim Path Feature

Trim Path機能を使えば、ストロークレイヤーをアニメーション化して、デザインをシームレスに目に留まるモーショングラフィックスに変換できます。

6. Speed Control

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

7. Preset Controls

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

8. Stroke gradient support

あなたの色にはもう少し彩りが必要です。そんなとき、Stroke Gradientsをご利用ください！ストロークのプロパティにリニアおよびラジアルグラデーションを追加できるようになりました。Stroke Gradientsはプリセットでもサポートされています。

9. Nested frames and group rotations

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

10. Auto layout

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

11. Variant component

新しいFigmaからLottieへのアップデート・サポートにより、複雑なアニメーション・デザインの作成が可能になり、単一または複数の変形コンポーネントを持つシーンで、個々のエレメントを詳細にコントロールすることができます。

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


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

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

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

Figma用LottieFilesを今すぐダウンロード

https://lottiefiles.com/jp/

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


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