Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
디자인 · 아트

/

UX/UI

[LottieFiles 공식] Figma to Lottie: Figma에서 만드는 모션 애니메이션 (수료증 발급)

글로벌 모션디자인 플랫폼 LottieFiles의 공식 첫 한글화 강의, 지금 인프런에서 단독으로 만나보세요! 강의를 다 수강하면 LottieFiles 공식 수료증을 받아보실 수 있어요.

(4.9) 수강평 32개

수강생 837명

Thumbnail

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • LottieFiles 플러그인 설치부터 실전 적용까지 전 과정

  • Figma에서 코드 없이 애니메이션을 만드는 방법

  • 텍스트, 아이콘, 캐릭터 등 UI 요소에 애니메이션 적용하는 방법

  • 웹·앱에 바로 적용 가능한 Lottie(JSON) 애니메이션 제작법

CHECK 1

Lottie란 무엇일까요?

Lottie는 JSON 기반의 애니메이션 파일로

Lottie를 활용해 애니메이션을 이미지만큼 쉽게 옮길 수 있어요.

용량이 적고 어느 기기에서나 작동 가능하며

크기를 조정해도 해상도가 낮아지지 않는 것이 Lottie의 강력한 장점이에요.

CHECK 2

왜 Lottie를 사용해야 할까요?

자유로운 크기 조정

해상도의 영향을 받지 않고
확대하거나 축소할 수 있어요.

작은 크기
GIF나 MP4 같은 형식에 비해
품질은 같으면서 훨씬 더 작아요.

상호작용성
Lottie에는 애니메이션 요소가 드러나 있어
상호작용하도록 수정할 수 있고 스크롤링, 클릭,
호버링 같은 상호작용에 반응할 수 있어요.

다양한 플랫폼 지원과 라이브러리
개발자에게 Lottie를 핸드오프하기 정말 쉬워요. Lottie 애니메이션을 iOS, 안드로이드, 웹, 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 애니메이션을 만들고 싶은데, 방법을 모르겠어요..

🧐 피그마에서 만든 애니메이션 파일을 어떻게 개발자에게 전달할 수 있을까요?

정적인 디자인만으론 부족한 지금, 사용자 경험을 살리는 ‘움직이는 디자인’이 필요해요.
이번 강의에서는 LottieFiles 플러그인 설치부터다양한 UI 요소에 애니메이션을 적용하는 법까지,

Figma 안에서 직접 구현할 수 있도록 체계적으로 알려드려요.


코드 없이도 살아있는 화면을 만드는 방법, 지금 시작해보세요!

CHECK 5

<Figma to Lottie: Figma에서 만드는 모션 애니메이션>
어떻게 수강해야 할까요?

인프런 강의는 다양한 음성 언어와 자막을 지원하고 있어요.

수강 화면 하단에서 톱니마퀴 아이콘(설정)을 누른 뒤,
원하는 음성 언어와 자막을 자유롭게 선택해보세요.

CHECK 6

LottieFiles가 인증하는
수료증을 받아보세요!

<Figma to Lottie: Figma에서 만드는 모션 애니메이션> 강의를
모두 수강하고 마지막 퀴즈까지 제출하면,
LottieFiles 수료증인프런 수료증을 모두 받을 수 있어요!
받은 수료증은 링크드인이나 포트폴리오에 자유롭게 활용해보세요.

인프런 수료증은
마이페이지 > 내 학습 > 수료증 메뉴에서 바로 확인하실 수 있습니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 인터랙티브 디자인을 시도해보고 싶은 UI/UX 디자이너

  • 개발자의 도움 없이 프로토타입 애니메이션을 직접 구현하고 싶은 분

  • LottieFiles가 뭔지 들어만 봤던 분, 지금 써볼 좋은 기회를 찾고 있는 분!

선수 지식,
필요할까요?

  • 애프터이펙트나 코딩 지식은 전혀 필요하지 않아요.

  • 기본적인 Figma 사용 경험이 있다면 충분해요!

안녕하세요
입니다.

1,138

수강생

36

수강평

4.9

강의 평점

2

강의

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

커리큘럼

전체

10개 ∙ (26분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

32개

4.9

32개의 수강평

  • 권자영님의 프로필 이미지
    권자영

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    • ksrtt님의 프로필 이미지
      ksrtt

      수강평 9

      평균 평점 5.0

      5

      100% 수강 후 작성

      • 최유빈님의 프로필 이미지
        최유빈

        수강평 2

        평균 평점 5.0

        5

        100% 수강 후 작성

        젛아요 쉽게 설명해주셔서 감사합니당!!!!

        • ksjung님의 프로필 이미지
          ksjung

          수강평 4

          평균 평점 4.0

          4

          60% 수강 후 작성

          • 쿠카이든님의 프로필 이미지
            쿠카이든

            수강평 436

            평균 평점 5.0

            5

            30% 수강 후 작성

            피그마에서 로띠를 어떻게 적용하면 되는지 배웠습니다. 좋은 강의 감사합니다.

            무료

            LottieFiles님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!