inflearn logo
知識共有
inflearn logo

[LottieFiles 公式] Figma to Lottie: Figmaで作るモーションアニメーション (修了証発行)

グローバル・モーションデザイン・プラットフォームLottieFilesの公式初となる韓国語翻訳講座を、今すぐInflearnで独占公開中!講座をすべて受講すると、LottieFiles公式修了証を受け取ることができます。

難易度 入門

受講期間 無制限

Motion Graphic
Motion Graphic
Animation
Animation
Figma
Figma
No-code
No-code
UIUX
UIUX
Motion Graphic
Motion Graphic
Animation
Animation
Figma
Figma
No-code
No-code
UIUX
UIUX
Thumbnail

学習した受講者のレビュー

学習した受講者のレビュー

4.9

5.0

최유빈

100% 受講後に作成

いいですね、分かりやすく説明ありがとうございます!!!!

5.0

쿠카이든

30% 受講後に作成

FigmaでLottieの適用方法を学びました。良い講義ありがとうございました。

5.0

일요일좋아

100% 受講後に作成

簡単で早く学べて良いです!

受講後に得られること

  • LottieFilesプラグインのインストールから実践的な適用までの全工程

  • Figmaでコードを使わずにアニメーションを作る方法

  • テキスト、アイコン、キャラクターなどのUI要素にアニメーションを適用する方法

  • Web・アプリにすぐ適用可能なLottie(JSON)アニメーション制作法

CHECK 1

Lottieとは何でしょうか?

LottieはJSONベースのアニメーションファイルで、

Lottieを活用して、アニメーションを画像と同じくらい簡単に移すことができます。

容量が少なく、どのデバイスでも動作可能で、

サイズを調整しても解像度が低下しないことが、Lottieの強力なメリットです。

CHECK 2

なぜLottieを使用すべきなのでしょうか?

自由なサイズ調整

解像度の影響を受けずに
拡大したり縮小したりできます。

小さなサイズ
GIFやMP4などの形式に比べ、
品質は同じでありながら、はるかに軽量です。

インタラクティブ性
Lottieはアニメーション要素が公開されているため、
インタラクティブに修正することができ、スクロール、クリック、
ホバーなどのアクションに反応させることができます。

多様なプラットフォーム対応とライブラリ
開発者にLottieをハンドオフするのは非常に簡単です。Lottieアニメーションは、iOS、Android、Web、React Nativeで修正することなくそのまま使用できます。

CHECK 3

世界的な最高のウェブとアプリサービスが
Lottieを使用しています

現場で活発に使われているLottieの活用事例を確認してみてください!

cashbag - showcase card
Gmarket - showcase card(kr) (1)
Qcells - showcase card (2)
showcase card (1)
showcase card (2)
showcase card_kr
showcase card
KR - riid - showcase card


gbike-kr card
Spoon - showcase card kr

その他、様々な活用ケースはこちらでご確認いただけます。

CHECK 4

インフランだけで限定公開!
LottieFiles公式韓国語翻訳講座を受講して
実務にすぐ活用してみてください!

🫠 簡単なUIアニメーションを作りたいのですが、方法がわかりません…

🧐Figmaで作ったアニメーションファイルを、どうすれば開発者に受け渡せるでしょうか?

静的なデザインだけでは不十分な今、ユーザーエクスペリエンスを活かす「動きのあるデザイン」が必要です。
今回の講座では、LottieFilesプラグインのインストールから、多様なUI要素にアニメーションを適用する方法まで、
Figmaの中で直接実装できるように体系的にお教えします。

コードなしで動きのある画面を作る方法、今すぐ始めてみましょう!

CHECK 5

<Figma to Lottie:Figmaで作るモーションアニメーション>
どのように受講すればよいですか?

Inflearnの講義は、多様な音声言語と字幕に対応しています。

受講画面の下部にある歯車アイコン(設定)をクリックした後、
希望する音声言語と字幕を自由に選択してみてください。

CHECK 6

LottieFilesが認定する
修了証を受け取りましょう!

<Figma to Lottie: Figmaで作るモーションアニメーション> 講座を
すべて受講し、最後のクイズまで提出すると、
LottieFiles修了証Inflearn修了証を両方受け取ることができます!
受け取った修了証は LinkedInやポートフォリオに自由に活用してみてください。

インフロンの修了証は
マイページ > 学習状況 > 修了証メニューからすぐにご確認いただけます。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • インタラクティブデザインに挑戦してみたいUI/UXデザイナー

  • 開発者の助けを借りずに、プロトタイプのアニメーションを直接実装したい方

  • LottieFilesという名前を聞いたことがある方、今こそ使ってみる絶好の機会を探している方!

前提知識、
必要でしょうか?

  • After Effectsやコーディングの知識は全く必要ありません。

  • 基本的なFigmaの使用経験があれば十分です!

こんにちは
LottieFilesです。

2,002

受講生

73

受講レビュー

4.9

講座評価

4

講座

LottieFiles(ロッティーファイルズ)は、世界中のデザイナーや開発者が簡単にアニメーションを作成、管理、適用できるように支援するプラットフォームです。Lottieフォーマットベースのアニメーションをウェブ、アプリ、プレゼンテーションなど、さまざまな環境に素早く適用することができ、効率的なチームコラボレーションやモーションデザインのワークフロー向上のための多様なツールを提供しています。

もっと見る

共同知識共有者

講座掲載日: 
最終更新日: 

受講レビュー

全体

58件

4.9

58件の受講レビュー

  • wkdud60168477님의 프로필 이미지
    wkdud60168477

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    • ksjung8344님의 프로필 이미지
      ksjung8344

      受講レビュー 4

      平均評価 4.0

      4

      60% 受講後に作成

      • kukaeden님의 프로필 이미지
        kukaeden

        受講レビュー 507

        平均評価 5.0

        5

        30% 受講後に作成

        FigmaでLottieの適用方法を学びました。良い講義ありがとうございました。

        • ksrtt7828님의 프로필 이미지
          ksrtt7828

          受講レビュー 11

          平均評価 5.0

          5

          100% 受講後に作成

          • choe06127398님의 프로필 이미지
            choe06127398

            受講レビュー 2

            平均評価 5.0

            5

            100% 受講後に作成

            いいですね、分かりやすく説明ありがとうございます!!!!

            LottieFilesの他の講座

            知識共有者の他の講座を見てみましょう!

            似ている講座

            同じ分野の他の講座を見てみましょう!

            無料