강의

멘토링

로드맵

Inflearn brand logo image
Design

/

UI/UX

[LottieFiles chính thức] Figma to Lottie: Tạo hoạt ảnh chuyển động trong Figma (Cấp chứng chỉ hoàn thành)

Khóa học chính thức đầu tiên bằng tiếng Hàn của nền tảng motion design toàn cầu LottieFiles, hãy gặp gỡ độc quyền tại Inflearn ngay! Khi hoàn thành toàn bộ khóa học, bạn sẽ nhận được chứng chỉ chính thức từ LottieFiles.

(4.9) 33 đánh giá

857 học viên

Motion Graphic
Animation
Figma
No-code
UIUX
Thumbnail

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Toàn bộ quá trình từ cài đặt đến ứng dụng thực tế plugin LottieFiles

  • Cách làm animation không cần code trên Figma

  • Áp dụng animation cho UI: text, icon, character, v.v.

  • Cách tạo animation Lottie (JSON) áp dụng ngay cho web/app

KIỂM TRA 1

Lottie là gì?

Lottie là tệp hoạt hình dựa trên JSON

Sử dụng Lottie, bạn có thể chuyển đổi animation dễ dàng như chuyển đổi hình ảnh.

Dung lượng nhỏ và có thể hoạt động trên bất kỳ thiết bị nào

Việc điều chỉnh kích thước mà không làm giảm độ phân giải là ưu điểm mạnh mẽ của Lottie.

KIỂM TRA 2

Tại sao nên sử dụng Lottie?

Điều chỉnh kích thước tự do

Không bị ảnh hưởng bởi độ phân giải
có thể phóng to hoặc thu nhỏ.

Kích thước nhỏ
So với các định dạng như GIF hay MP4
chất lượng giống nhau nhưng nhỏ hơn rất nhiều.

Tính tương tác
Lottie có các yếu tố hoạt hình được hiển thị
có thể chỉnh sửa để tương tác và phản ứng
với các tương tác như cuộn, nhấp chuột, di chuột.

Hỗ trợ đa nền tảng và thư viện
Việc bàn giao Lottie cho các nhà phát triển thực sự rất dễ dàng. Bạn có thể sử dụng hoạt ảnh Lottie trực tiếp trên iOS, Android, web, React Native mà không cần chỉnh sửa gì.

KIỂM TRA 3

Các dịch vụ web và ứng dụng hàng đầu thế giới đang
sử dụng Lottie

Hãy xem các trường hợp sử dụng của Lottie đang được sử dụng tích cực trong thực tế!

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

Các trường hợp sử dụng đa dạng khác bạn có thể xem tại đây.

KIỂM TRA 4

Chỉ có tại Inflearn!
Tham gia khóa học LottieFiles chính thức được bản địa hóa tiếng Hàn
và áp dụng ngay vào công việc của bạn!

[[SPAN_1]]🫠 [[/SPAN_2]][[SPAN_2]]Tôi muốn tạo animation UI đơn giản nhưng không biết cách làm..[[/SPAN_2]]

[[SPAN_1]]🧐[[/SPAN_2]][[SPAN_2]] Làm thế nào để chuyển file animation được tạo trong Figma cho developer?[[/SPAN_2]]

Chỉ có thiết kế tĩnh thôi là chưa đủ trong thời đại hiện tại, chúng ta cần 'thiết kế chuyển động' để nâng cao trải nghiệm người dùng.
Trong khóa học này, từ việc cài đặt plugin LottieFiles đến cách áp dụng animation cho các thành phần UI khác nhau,
chúng tôi sẽ hướng dẫn bạn một cách có hệ thống để có thể thực hiện trực tiếp trong Figma.

Cách tạo giao diện sống động mà không cần code, hãy bắt đầu ngay bây giờ!

KIỂM TRA 5

<Figma to Lottie: Tạo animation chuyển động trong Figma>
Làm thế nào để học khóa học này?

Các khóa học Inflearn hỗ trợ nhiều ngôn ngữ âm thanh và phụ đề khác nhau.

Nhấn vào biểu tượng bánh răng (cài đặt) ở phía dưới màn hình học,
sau đó tự do chọn ngôn ngữ âm thanh và phụ đề mong muốn.

CHECK 6

LottieFiles chứng nhận
Nhận chứng chỉ hoàn thành!

Khi hoàn thành tất cả các bài gi강의
và nộp bài quiz cuối cùng,
bạn sẽ nhận được cả chứng chỉ LottieFileschứng chỉ Inflearn!
Hãy tự do sử dụng chứng chỉ đã nhận trên LinkedIn hoặc portfolio của bạn.

Chứng chỉ hoàn thành Inflearn có thể
được xem trực tiếp tại menu Trang cá nhân > Học tập của tôi > Chứng chỉ.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Nhà thiết kế UI/UX muốn thử sức với thiết kế tương tác

  • Tự tay làm animation prototype không cần developer.

  • Người chỉ mới nghe nói LottieFiles là gì, người đang tìm cơ hội tốt để thử ngay!

Cần biết trước khi bắt đầu?

  • Không cần kiến thức After Effects hay coding chút nào.

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

Xin chào
Đây là

1,238

Học viên

38

Đánh giá

4.9

Xếp hạng

4

Các khóa học

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

Chương trình giảng dạy

Tất cả

10 bài giảng ∙ (26phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

33 đánh giá

4.9

33 đánh giá

  • wkdud60168477님의 프로필 이미지
    wkdud60168477

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    • ksrtt7828님의 프로필 이미지
      ksrtt7828

      Đánh giá 9

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      • choe06127398님의 프로필 이미지
        choe06127398

        Đánh giá 2

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        Được, cám ơn giải thích dễ hiểu!!!!

        • ksjung8344님의 프로필 이미지
          ksjung8344

          Đánh giá 4

          Đánh giá trung bình 4.0

          4

          60% đã tham gia

          • kukaeden님의 프로필 이미지
            kukaeden

            Đánh giá 439

            Đánh giá trung bình 5.0

            5

            30% đã tham gia

            Tôi đã học được cách áp dụng Lottie trong Figma. Cảm ơn vì bài giảng hay.

            Miễn phí

            Khóa học khác của LottieFiles

            Hãy khám phá các khóa học khác của giảng viên!

            Khóa học tương tự

            Khám phá các khóa học khác trong cùng lĩnh vực!