Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Design

/

UI/UX

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

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

Motion Graphic
Animation
Figma
No-code
UIUX
Thumbnail

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

こんなことが学べます

  • 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,136

受講生

36

受講レビュー

4.9

講座評価

2

講座

로티파일즈(LottieFiles)는 전 세계 디자이너와 개발자들이 손쉽게 애니메이션을 만들고, 관리하고,적용할 수 있도록 도와주는 플랫폼이에요. Lottie 포맷 기반의 애니메이션을 웹, 앱, 프리젠테이션 등 다양한 환경에 빠르게 적용할 수 있으며,효율적인 팀 협업과 모션 디자인 워크플로우 향상을 위한 다양한 도구를 제공합니다.

カリキュラム

全体

10件 ∙ (26分)

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

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

受講レビュー

全体

32件

4.9

32件の受講レビュー

  • wkdud60168477님의 프로필 이미지
    wkdud60168477

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    • ksrtt7828님의 프로필 이미지
      ksrtt7828

      受講レビュー 9

      平均評価 5.0

      5

      100% 受講後に作成

      • choe06127398님의 프로필 이미지
        choe06127398

        受講レビュー 2

        平均評価 5.0

        5

        100% 受講後に作成

        Good! Thanks for explaining it easily!

        • ksjung8344님의 프로필 이미지
          ksjung8344

          受講レビュー 4

          平均評価 4.0

          4

          60% 受講後に作成

          • kukaeden님의 프로필 이미지
            kukaeden

            受講レビュー 436

            平均評価 5.0

            5

            30% 受講後に作成

            I learned how to apply Lottie in Figma. Thank you for the good lecture.

            無料

            lottiefilesの他の講座

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

            似ている講座

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