Khóa học Figma UI Design

Khóa học Figma UI Design

Lịch khai giảng

    • Lớp: 24K55L

      Khai giảng ngày: 10/09/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: 24RK56G - Remote

      Khai giảng ngày: 16/09/2024

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

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

      Giảng viên: Hoàng Giang

      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
      • 4 - Tìm hiểu wireframe 2
    • 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

  • Có kinh nghiệm hơn 6 năm trong lĩnh vực Graphics Design & UI/UX. Từng tham gia thực hiện sản phẩm cho đa dạng loại hình như Start Up, Tập Đoàn, SME... và có cơ hội làm việc với các thị trường nước ngoài như Singapore, Nhật Bản, Hàn Quốc. Hiện đang là UI/UX Designer tại FPT Software.

    Giáo trình

Lớp: 24K55L

Khai giảng ngày: 10/09/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: 24RK56G - Remote

Khai giảng ngày: 16/09/2024

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

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

Giảng viên: Hoàng Giang

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

Trần Thị Thanh Nga - 24RK51L - Remote

Sau khoá học Figma UI Design, mình đã hiểu sâu vấn đề hơn và định hướng rõ ràng hơn trong công việc sau này. Cám ơn thầy Lộc vì khoá học chất lượng, thầy luôn cập nhật những kiến thức mới, lấy ví dụ dễ hiểu, khiến bài giảng trở nên thú vị hơn.

Phạm Thái Bình - 24K50L

cám ơn thầy Lộc Nguyễn đã dạy tận tình và rất có tâm ạ. Cám ơn thầy và trường rất nhiều ạ. Có dịp mình sẽ học thêm 1 khóa nữa hiuhiu

Trần Xuân Miêm - 24K50L

Mình vừa hoàn thành khóa FIGMA UI Design 24K50L do thầy Lộc Nguyễn đứng lớp. Trong quá trình học thầy luôn quan tâm, giải đáp những thắc mắc của học viên. Đồ án cuối khóa, thầy support mình rất nhiệt tình và tận tâm, thầy giải đáp rất nhanh, không để mình chờ lâu. Điểm thứ nhất mình thích ở thầy là thầy không ngại sửa bài, luôn nêu rõ ràng và chi tiết những chỗ mình làm chưa hợp lý để mình rút kinh nghiệm và sửa lại tốt hơn cho báo cáo cuối khóa. Điểm thứ hai mình thích ở thầy là trong lúc học, thầy luôn truyền cảm hứng, chia sẻ nhiều về những kinh nghiệm trong nghề để học viên hiểu rõ và xác định đúng mục tiêu, đi đúng hướng hơn. 100/100 điểm cho thầy Lộc ạ!!

Trần Hoàng Anh - 24K50L

Thầy Lộc dễ thương, dạy kĩ, dễ hiểu. Bạn nào không biết làm thì cứ túm thầy lại thầy hướng dẫn cho nha, thầy nhiệt tình lắm lắm lắm. 10 ĐIỂMMMMMM!

Nguyễn Trần Hoàng Lợi - 24K49Q

Mình vừa mới hoàn thành khóa học Figma của thầy Quang vào vài ngày trước, hôm nay mình mới có thời gian để lên chia sẻ cảm nhận của mình. Phải nói là khóa học của thầy rất là chất lượng, chất lượng từ giảng viên cho tới nội dung bài học. Thầy Quang dạy rất dễ hiểu từ những kiến thức cơ bản cho đến nâng cao của Figma, bên cạnh đó mình còn cảm nhận được sự tâm huyết của thầy trong quá trình giảng dạy cho tụi mình. Một buổi học kéo dài khoảng 2 tiếng rưỡi và từng giây từng phút trong đó thầy đều giảng các kiến thức vô cùng chi tiết cho tụi mình, thầy còn xuống chỗ từng bạn để chỉ bài nữa. Về nội dung bài học thì đầy đủ và lúc nào cũng update liên tục theo phiên bản mới nhất của Figma, bên cạnh những nội dung về Figma, thầy còn chia sẻ những kiến thức thú vị và cần thiết về UI/UX. Học thầy xong mình cảm thấy lên trình rất nhiều và có đam mê theo đuổi con đường UI/UX hơn nữa. Em cảm ơn thầy rất nhiều và thật vui khi được tham gia lớp học Figma của thầy ạ.

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.