강의

멘토링

커뮤니티

Design

/

UI/UX

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

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

難易度 入門

受講期間 無制限

  • LottieFiles
  • inflearn
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 要素へのアニメーション適用方法

  • ウェブ・アプリにそのまま使える 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

Inflearnでのみ!
LottieFiles公式日本語化講座を受講して
業務にすぐに適用してみてください!

🫠 簡単なUIアニメーションを作りたいのですが、方法が分からないです..

🧐 Figmaで作成したアニメーションファイルを開発者にどのように渡すことができるでしょうか?

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

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

CHECK 5

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

Inflearnの講義は様々な音声言語と字幕をサポートしています。

受講画面下部の歯車アイコン(設定)を押した後、
お好みの音声言語と字幕を自由に選択してみてください。

CHECK 6

LottieFilesが認証する
修了証を受け取ってみてください!

講義を
すべて受講し、最後のクイズまで提出すると、
LottieFiles修了証Inflearn修了証の両方を受け取ることができます!
受け取った修了証はLinkedInやポートフォリオで自由に活用してみてください。

Inflearn修了証は
マイページ > 学習履歴 > 修了証メニューですぐに確認できます。

こんな方に
おすすめです

学習対象は
誰でしょう?

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

  • 開発者の助けなしに プロトタイプアニメーションを ご自身で実装したい方

  • LottieFilesが何か聞いたことがあるだけの方、今使ってみる良い機会を探している方!

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

  • アフターエフェクトやコーディングの知識は全く必要ありません。

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

こんにちは
です。

1,858

受講生

71

受講レビュー

4.9

講座評価

4

講座

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

カリキュラム

全体

10件 ∙ (26分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

56件

4.9

56件の受講レビュー

  • wkdud60168477님의 프로필 이미지
    wkdud60168477

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    • ksrtt7828님의 프로필 이미지
      ksrtt7828

      受講レビュー 11

      平均評価 5.0

      5

      100% 受講後に作成

      • choe06127398님의 프로필 이미지
        choe06127398

        受講レビュー 2

        平均評価 5.0

        5

        100% 受講後に作成

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

        • ksjung8344님의 프로필 이미지
          ksjung8344

          受講レビュー 4

          平均評価 4.0

          4

          60% 受講後に作成

          • kukaeden님의 프로필 이미지
            kukaeden

            受講レビュー 489

            平均評価 5.0

            5

            30% 受講後に作成

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

            無料

            LottieFilesの他の講座

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

            似ている講座

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