Khóa học Figma UI Design

Khóa học Figma UI Design

Lịch khai giảng

    • Lớp: 24K50L

      Khai giảng ngày: 23/04/2024

      Giờ học: 18:30 - 21:00

      Lịch học: Thứ 3, Thứ 5, Thứ 7

      Giảng viên: Lộc Nguyễn

      Thời lượng: 14 buổi học

      Trình độ: Cơ bản - Trung cấp

      Học phí: 5,800,000đ

      Địa điểm: 06 Phan Đình Giót, P.2, Q.Tân Bình, TP.HCM

      Hỗ trợ thư viện video bài giảng. Giúp bạn sở hữu trọn vẹn kiến thức dù có vắng học.  

    • Lớp: 24RK51L - Remote

      Khai giảng ngày: 13/05/2024

      Giờ học: 19:00 - 21:30

      Lịch học: Thứ 2, Thứ 6

      Giảng viên: Lộc Nguyễn

      Thời lượng: 14 buổi học

      Trình độ: Cơ bản - Trung cấp

      Học phí: 5,800,000đ

      Địa điểm: Học trực tuyến với giảng viên qua Zoom/ Meet/ Classin...

      Hỗ trợ thư viện video bài giảng. Giúp bạn sở hữu trọn vẹn kiến thức dù có vắng học.


  • Sắp có lịch mới
    Liên hệ Keyframe để được hỗ trợ

Học viên review khóa học Figma UI Design tại Keyframe?

Mô tả Khóa học Figma UI Design

Khóa học Figma UI Design từ cơ bản đến trung cấp sẽ giúp bạn:

  • Nhanh chóng thành thạo các công cụ và tính năng mới nhất của Figma cho thiết kế UXUI Product Design. Giáo trình luôn cập nhật thường xuyên theo những thay đổi của Figma.
  • Biết cách phân tích để vẽ và quản lý các thành phần trên giao diện đúng cách và hiệu quả bằng Figma
  • Có được nền tảng cơ sở về thiết kế giao diện.
  • Biết cách tư duy có hệ thống theo atomic design.
  • Biết cách tạo và quản lý các thành phần thiết kế trong design system.
  • Biết về quy chuẩn của thành phần thiết kế theo các design system lớn như Material Design, Ant Design…
  • Biết cách tạo và diễn hoạt các mẫu prototype có thể tương tác được để thể hiện ý tưởng, thử nghiệm với người dùng. Hoặc tạo các đoạn animation đơn giản cho mục đích truyền thông, quảng cáo.
  • Biết cách quản lý và bàn giao thiết kế khi làm việc với Developer.
  • Ứng dụng các plugin cần thiết để tăng hiệu quả cho công việc thiết kế.

Khóa học Figma UI Design phù hợp với ai?

  • Các bạn Junior Designer cần sử dụng thành thạo Figma trong thiết kế UX-UI Website hoặc Mobile App.
  • Các bạn đã và đang là UX UI Designer hay đã tham gia các khóa học về Tư Duy Thiết Kế UX/UI tại Keyframe, muốn sử dụng Figma hiệu quả để tối ưu cho quá trình thiết kế của mình.
  • Các bạn UXUI Designer đang sử dụng công cụ khác muốn chuyển sang Figma.
  • Các bạn làm vai trò quản lý muốn ứng dụng tư duy hệ thống và quy trình thiết kế bằng Figma trong công việc.
  • Những bạn mới bắt đầu tìm hiểu về Thiết Kế UX,UI cũng phù hợp với khóa học này.

Học Qua Hình Thức Trực Tuyến Google Meet Với Giảng Viên Có Gì Khác Với Offline Không?

Cùng xem cảm nhận của các bạn học viên khi tham gia hình thức này nhé.

Giảng viên

  • Có duyên với ngành thiết kế từ năm 2012, với các công việc làm về Packaging, Digital, UI/UX,... Từ năm 2018, mình đã bắt đầu định hình được thế mạnh về UI/UX, vậy là mình bắt đầu nghiêm túc nghiên cứu và phát triển sự nghiệp ở mảng này. Hiện tại mình đang là Lead Designer tại Rooster Beers từ năm 2020.

    Giáo trình

  • Chị Hoàng Giang có hơn 10 năm kinh nghiệm làm việc trong lĩnh vực Product Design. Hiện là UI/UX leader tại TrueMoney Vietnam, đồng thời là người tổ chức cộng đồng Friends of Figma, Hà Nội.

    Giáo trình

    • 1 Buổi Buổi 01 - Làm quen & Tổng quan UI/UX
      • Làm quen
      • Giới thiệu lộ trình học
      • Giới thiệu các sách về sáng tạo và UI/UX
      • Khái niệm về UI và UX
      • Công việc thiết kế UI Design
      • Các nguồn tham khảo tin cậy về UI/UX
      • Định luật Jacob và sự quen thuộc trong thiết kế UI/UX
      • Vai trò của Figma trong dự án thực tế
      • Đăng ký Figma Education Plan
      • Figjam
      • Community của Figma
      • Thực hành vẽ các hình cơ bản
    • 1 Buổi Buổi 02 - Vector network & Các yếu tố cơ bản part 1
      • Khái niệm vector network
      • Thực hành vẽ icon new document
      • Phương pháp Squint test
      • Các yếu tố cơ bản của Visual design
      • Chi tiết yếu tố cơ bản: Typography, color
      • Thực hành công cụ soạn chữ
      • Thực hành công cụ tô màu
      • Quy tắc sử dụng màu sắc 60-30-10
      • Kiểm tra độ tương phản về màu sắc
      • Plugin: Stark
      • Hướng dẫn vẽ viên kim cương bằng Vector network
      • Mask
    • 1 Buổi Buổi 03 - Vector network & Các yếu tố cơ bản part 2
      • Thực hành vẽ icon huy hiệu
      • Chi tiết yếu tố cơ bản: Iconography
      • Plugin: iconify
      • Một số yếu tố cơ bản khác: line, size, shape, image, link, button, input
      • Phân biệt ảnh vector và bitmap
      • Thực hành vẽ nâng cao bộ icon
      • Bài tập thực hành vẽ ổ khóa
      • Chọn đề tài
    • 1 Buổi Buổi 04 - Layout & Auto layout
      • Khái niệm cơ bản về layout
      • Các cách tạo layout: Grids (lưới) basic/layout
      • 8-point grid
      • Hướng dẫn tạo lưới tương ứng trên các thiết bị đáp ứng responsive layout
      • Mẹo dùng lưới
      • Phương thức tạo vách ngăn (containment)
      • Vai trò của negative/white space (không gian âm/khoảng trắng) trong thiết kế
      • Giới thiệu tổng quan về Auto-layout
      • Thực hành tạo Button
      • Thêm/sửa/xóa các phần tử trong auto layout
      • Bài tập vẽ giao diện social media (facebook/instagram)
    • 1 Buổi Buổi 05 - Auto layout
      • Hướng, khoảng cách, đệm
      • Áp dụng khoảng cách âm
      • Nested auto layouts
      • Cài đặt và điều khiển auto layout
      • Thực hành tạo nav bar, check list, card, task card
      • Bài tập áp dụng auto layout cho giao diện social media
      • Tips & tricks
      • Thay đổi kích thước linh động trong auto layout
      • Các ràng buộc constraints
      • Vị trí tuyệt đối
      • Thực hành tạo noti label cho icon
      • Bài tập vẽ giao diện dashboard/quản lý contact
    • 1 Buổi Buổi 06 - Component
      • Lý thuyết về component, variant
      • Cách dùng component
      • Áp dụng tạo component cho các đối tượng đã tạo auto layout: nav bar, check list, card, task card
      • Hướng dẫn tạo 1 variants phức tạp gồm nhiều trường thuộc tính
      • Đổi tên và sắp sếp lại các trường thuộc tính
      • Giá trị boolean trong variants
      • Cấu trúc đặt tên của variants
      • Thực hành tạo variants: banner thông báo, inputs text
      • Bài tập tạo component cho các thành phần trong giao diện quản lý
    • 1 Buổi Buổi 07 - Component nâng cao
      • Chữa bài tập
      • Tips and tricks
      • Thực hành tạo variants: avatars, sticky notes, switcher, mobile và tablet menu
      • Text property
      • Sửa text properties từ design panel
      • Chỉnh sửa thuộc tính văn bản hàng loạt
      • Boolean property
      • Áp dụng boolean property vào card nội dung
      • Instance swap property
      • Áp dụng thuộc tính hoán đổi cá thể trong bộ icon
      • Expose nested instance
      • Áp dụng hiển thị các thuộc tính lồng nhau cho thẻ nội dung và button
      • Phân biệt cách sử dụng variant và component properties
      • Chỉnh sửa hàng loạt trong component set
      • Thực hành: tạo variant tin nhắn, button, toast banner, task cards
    • 1 Buổi Buổi 08 - Atomic design và design system part 1
      • Tư duy theo Atomic design
      • Tổng quan về design system
      • Tham khảo 1 số bộ design system nổi tiếng
      • Các thành phần của design system
      • Lợi ích của việc sử dụng design system
      • Trở ngại của việc áp dụng design system
      • Tạo hệ thống chữ (typography)
      • Thực hành tạo hệ thống chữ theo mẫu của material design
      • Plugin: type scale, lorem ipsum, nisa text, styler,...
      • Bài tập thực hành vẽ giao diện app thương mại điện tử
    • 1 Buổi Buổi 09 - Design system part 2
      • Chữa bài tập app TMĐT
      • Tạo hệ thống màu (color): mô hình màu, cách chọn màu
      • Plugin: image palette, color generator, color palette
      • Thực hành tạo hệ thống màu
      • Tạo hệ thống iconography
      • Hệ thống spacing, grid: 8px, tỉ lệ khung hình, mục tiêu chạm
      • Tạo hệ thống button
      • Thêm ảnh động vào thiết kế
      • Plugin: Lottiefiles
    • 1 Buổi Buổi 10 - IA, flow, wireframe, variable
      • Tổng quan kiến trúc thông tin (IA)
      • Flow và User flows
      • Hướng dẫn thực hành vẽ wireframes
      • Sử dụng lo-fi wireframe kit
      • Sử dụng component từ các design system có sẵn
      • Adapt giao diện UI tương ứng wireframe
      • Mirror design và xem prototype trên Figma mobile
      • Khái niệm token, variable
      • Hướng dẫn tạo variable color tạo theme cho giao diện light/dark mode
      • Sử dụng variable string tạo biến thể ngôn ngữ
      • Sử dụng variable number, boolean tạo biển thể kích thước: mobile/tablet/desktop
      • Thực hành tạo variable cho card sản phẩm, giỏ hàng
    • 1 Buổi Buổi 11 - Prototype part 1
      • Tổng quan prototype
      • Các loại cử chỉ
      • Các bước tạo prototype
      • Prototype trigger, interaction/action và animation
      • Thực hành smart animate
      • Thực hành tạo prototype cho popup/modal sử dụng spring animation
      • Thực hành tạo list ảnh sản phẩm sử dụng scroll to
      • Interactive component prototype, interactive component lồng nhau
      • Bài tập
    • 1 Buổi Buổi 12 - Prototype part 2
      • Thực hành tạo một số tương tác thường gặp: menu, tooltip, chart, table, slide ảnh, trò chơi x-o
      • Kết hợp component, auto layout tạo prototype cho dock menu và tasks list
      • Video trong prototypes
      • Scroll, ứng dụng scroll trong thiết kế landing page
      • Set variable và điều kiện trong prototype
      • Thực hành áp dụng tạo màn hình convert nhiệt độ (C/F), chuyển đổi tỷ giá (VND/USD)
      • Bài tập
    • 1 Buổi Buổi 13 - Trình bày, bàn giao thiết kế
      • Các định dạng và kích thước khi export
      • Pixel preview
      • Tỷ lệ export
      • Ghi chú và sắp xếp file
      • Record prototype
      • Section - phân nhóm bản vẽ
      • Hiểu về độ phân giải
      • Các định dạng ảnh svg, png, jpeg, pdf
      • Hướng dẫn quy hoạch, sắp xếp, ghi chú cho các thành phần trong file thiết kế
      • Plugin trace ảnh, tách nền, tạo mockup
      • Ngăn chặn export, copy duplicate file
      • Hướng dẫn xuất PDF nhiều trang
      • Hướng dẫn nộp bài project cuối khóa
    • 1 Buổi Buổi 14 - Trình bày đồ án & Tổng kết khóa học
      • Trình bày đồ án
      • Tổng kết khóa học
      • Chia sẻ hướng đi, apply Job, Freelancer
  • Anh Lê Minh Quang có hơn 5 năm kinh nghiệm thiết kế. Là một người yêu thích và mong muốn chia sẻ các kiến thức và lợi ích mà Figma mang lại cho UI/UX Design. Hiện đang làm Freelancer.

    Giáo trình

Lớp: 24K50L

Khai giảng ngày: 23/04/2024

Giờ học: 18:30 - 21:00

Lịch học: Thứ 3, Thứ 5, Thứ 7

Giảng viên: Lộc Nguyễn

Thời lượng: 14 buổi học

Trình độ: Cơ bản - Trung cấp

Học phí: 5,800,000đ

Địa điểm: 06 Phan Đình Giót, P.2, Q.Tân Bình, TP.HCM

Hỗ trợ thư viện video bài giảng. Giúp bạn sở hữu trọn vẹn kiến thức dù có vắng học.  

Lớp: 24RK51L - Remote

Khai giảng ngày: 13/05/2024

Giờ học: 19:00 - 21:30

Lịch học: Thứ 2, Thứ 6

Giảng viên: Lộc Nguyễn

Thời lượng: 14 buổi học

Trình độ: Cơ bản - Trung cấp

Học phí: 5,800,000đ

Địa điểm: Học trực tuyến với giảng viên qua Zoom/ Meet/ Classin...

Hỗ trợ thư viện video bài giảng. Giúp bạn sở hữu trọn vẹn kiến thức dù có vắng học.

Cảm nhận học viên

Bùi Nhật Khanh - 23RK45L - Remote

Em cảm ơn thầy Lộc ạ, thầy dạy rất dễ hiểu và nhiệt tình. Những kiến thức thầy truyền tải thật sự có ích cho công việc của em!!!

Trần Hương Ly - 23RK45L - Remote

Mình vừa học xong khóa Figma UI Design của thầy Lộc Nguyễn. Trong quá trình học, thầy giảng dạy khá dễ hiểu và giải đáp rất nhiệt tình, cũng như chia sẻ rất nhiều những kinh nghiệm trong ngành. Sau khóa học mình đã học được rất nhiều, thứ nhất là cách sử dụng công cụ và thứ hai là lối tư duy trong thiết kế cùng rất nhiều kiến thức hữu ích khác. Mình cảm ơn rất nhiều ạ. Vote cho thầy 5 sao!

Tạ Ngọc Bích - 23RK42L - Remote

Thầy Lộc dạy rất dễ hiểu và kiên nhẫn với từng học viên. Bất cứ khi nào mình cần thầy đều sẽ hỗ trợ hết mình. Hôm nào có miss thì khi xem lại video của thầy mình đều tự học và làm theo dễ dàng. Thầy cũng hay chia sẻ những tài liệu có ích cho học viên nữa. Cám ơn thầy và chúc thầy luôn thành công trong sự nghiệp giảng dạy của mình nhé.

Trần Minh Khang - 23K43L

Trước hết em cảm ơn thầy Lộc rất nhiều ạ, thầy không chỉ hướng dẫn về công cụ Figma mà thầy còn đưa ra những lời khuyên trong ngành cực kì hữu ích luôn, thầy cực kì nghiêm túc trong việc giảng dạy, sau khóa học em đã học được rất nhiều, thứ nhất là lối tư duy trong thiết kế và thứ hai là thái độ nghiêm túc khi học tập và làm việc là một thứ cực kì quan trọng. Em cảm ơn rất nhiều ạ :v

Đồng Hà Thanh Thảo - 23K43L

5 sao cho anh Lộc nhá <3 Cảm ơn anh rất nhiều vì đã hỗ trợ em xuyên suốt quá trình làm đồ án cuối khóa. Highly recommend anh Lộc vì không chỉ giảng bài dễ hiểu mà anh còn chia sẻ nhiều kinh nghiệm thực tế trong ngành nữa.

Thông tin chi tiết

Khoá học Figma UI Design nằm trong Lộ trình học UX/UI Product Design Toàn Diện

  • Nếu bạn là người mới thì có thể tham khảo lộ trình dài hạn này nhé.

Vì Sao Bạn Nên Học Figma UI Design Tại Keyframe?

  • Được học và tương tác trực tiếp với giảng viên tại lớp học Offline SG/ HN hoặc Remote Teaching qua Zoom tùy theo hình thức học bạn chọn.
  • Hỗ trợ thư viện online video bài giảng, giúp bạn sở hữu trọn vẹn kiến thức dù có vắng học.
  • Được mentor 1:1 khi làm bài tập và dự án cá nhân xuyên suốt khóa học. Mục tiêu là hoàn thiện sản phẩm khi hoàn thành khóa học để cập nhật vào Portfolio.
  • Hỗ trợ kiến thức mãi mãi.
  • Keyframe cấp chứng chỉ khi hoàn thành khóa học.

Đừng Ngần Ngại

Khóa học Figma UI Design

có trong chương trình học

Chương trình học UI/UX Product Design Completed

Lộ trình: 5 - 9 tháng

FAQ

  • Quy trình đặt chỗ học

    Đóng học phí trực tiếp tại Keyframe

    • HCM: Lầu M, 06 Phan Đình Giót, P. 2, Q. Tân Bình, TP. HCM (Xem bản đồ)
      • Từ thứ 2 đến thứ 7 : 09h00 – 21h00
      • Chủ nhật : 09h00 - 17h00
    • Hà Nội: Số 1, Ngõ 21, Lê Văn Lương, P. Nhân Chính, Q. Thanh Xuân, Hà Nội (Xem bản đồ)
      • Từ thứ 2 đến thứ 7 : 15h00 – 21h00

    Đóng học phí thông qua chuyển khoản nhanh

    • Vietcombank
      • Tô Dương Phương Bình – 0071004405302
  • Học xong có được giới thiệu việc làm không?
    • Keyframe cam kết giới thiệu việc làm đối với học viên hoàn thành lộ trình toàn diện của các chương trình học.
  • Giá trị bằng cấp tại Keyframe
    • Keyframe cấp chứng chỉ đối với học viên đạt tiêu chuẩn hoàn thành khoá học Offline/ Remote Teaching tại Keyframe (Chứng chỉ này có giá trị xác nhận đã hoàn thành học tại Keyframe)
    • Keyframe không cấp chứng chỉ đối với học viên tham gia khoá học Online Video.