inflearn logo

Cách sử dụng Figma thân thiện với AI từ A đến Z dành cho designer và developer frontend

Chúng tôi sẽ trình bày toàn bộ quy trình xây dựng sản phẩm từ A to Z, từ những kiến thức cơ bản về Figma đến việc xây dựng và sử dụng một hệ thống thiết kế AI Readable, giúp đẩy nhanh quy trình thiết kế/phát triển bằng AI.

3 học viên đang tham gia khóa học này

Độ khó Trung cấp trở lên

Thời gian Không giới hạn

Figma
Figma
Design System
Design System
AI
AI
collaboration
collaboration
product design
product design
Figma
Figma
Design System
Design System
AI
AI
collaboration
collaboration
product design
product design

Bạn sẽ nhận được điều này sau khi học.

  • Có thể thiết kế các quy tắc về cách đặt tên, hệ thống phân cấp, Auto Layout, token và tài liệu hóa trong hệ thống thiết kế Figma để AI và nhà phát triển diễn giải chính xác.

  • Có thể phân tích GitHub Primer và shadcn/ui bằng Figma, đồng thời thiết lập các tiêu chí để áp dụng vào hệ thống thiết kế của đội ngũ chúng ta.

  • Có thể chẩn đoán màn hình và mã do AI tạo ra, đồng thời khắc phục các lỗi lặp lại bằng skill của Agent và checklist.

  • Bạn có thể kết nối Notion, FigJam Agent, Figma Make và Figma Design để thực hiện một mini sprint từ khâu lập kế hoạch đến triển khai giao diện.

  • Bạn có thể sử dụng Dev Mode và MCP để kết nối hệ thống thiết kế với công cụ tạo mã, đồng thời review kết quả.

  • Có thể xây dựng quy trình cộng tác trong đó nhà thiết kế và nhà phát triển frontend chia sẻ các tiêu chuẩn về token, component và bàn giao.

Lý do màn hình do AI vẽ không giống "của chúng ta"

Trong thời đại AI, chỉ với một dòng prompt là có thể tạo ra bản nháp giao diện.

Thế nhưng khi xem xét kỹ, chiều cao các nút lại không đồng nhất, màu sắc phớt lờ token, còn nhà phát triển thì hỏi lại: "Đây là component nào vậy?" Thực hiện cùng một lệnh năm lần sẽ cho ra năm kết quả khác nhau.

Vấn đề không nằm ở năng lực của AI. Vấn đề là hệ thống thiết kế mà AI không thể đọc được.

Ngay cả khi hệ thống trông được sắp xếp gọn gàng đối với con người, nếu bản thân cấu trúc dữ liệu không thể được máy móc đọc hiểu thì AI sẽ phải phỏng đoán mỗi lần. Với nhà phát triển cũng vậy.

Khóa học này hướng dẫn cách xây dựng lại hệ thống đó để AI có thể đọc được. Không phải tạo mới mà là cách cải thiện hệ thống hiện có.


Khóa học này dành cho cả hai nhóm nghề.

Hệ thống thiết kế không phải là thứ nhà thiết kế tạo ra còn nhà phát triển sử dụng, mà phải là thứ để hai nhóm nghề cùng đọc và viết theo cùng một quy tắc.

Nếu bạn là nhà thiết kế đang làm việc thực tế hoặc sinh viên, đã từng tạo hoặc đang vận hành design system nhưng muốn giải quyết một cách có hệ thống lý do các sản phẩm do AI tạo ra không đồng bộ với hệ thống.

Nếu là nhà phát triển frontend, bạn thường xuyên phải hỏi lại trong quá trình phối hợp chuyển tệp Figma do nhà thiết kế bàn giao thành mã vì token và quy tắc đặt tên không khớp nhau.

Nếu là nhà sáng tạo nội dung độc lập, bạn muốn tự mình đảm nhiệm mọi khâu từ lập kế hoạch, thiết kế đến phát triển, đồng thời kết nối các tác nhân AI vào quy trình làm việc thực tế để tăng tốc.


Về khóa học này


1. Tự làm bằng tay trước, sau đó mới nhờ AI

Chỉ những người đã tự tay tạo ra mới có thể đánh giá sản phẩm do AI tạo ra là tốt hay không tốt.
Vì vậy, mỗi bài thực hành trong khóa học này đều có trình tự cụ thể. Sau khi tự tay tạo component nút, bạn sẽ yêu cầu AI tạo một bộ component; sau khi tự mình thao tác với các mode bằng Variable, bạn sẽ giao cho AI thực hiện theme tối.

Trong khóa học này, chúng ta sẽ đồng thời tìm hiểu những kiến thức nền tảng về Figma và cách ứng dụng AI.


2. Trực tiếp trải nghiệm lý do kết quả mỗi lần đều khác nhau

Nếu ra lệnh cho AI 10 lần, kết quả cả 10 lần đều khác nhau.
Xác định lý do xảy ra sự khác biệt đó và chủ yếu phát sinh ở đâu chính là điểm khởi đầu của quá trình chuyển đổi sang AI. Chỉ sau khi tự tay lần tìm nguyên nhân, bạn mới hiểu "AI Readable" nghĩa là gì.


3. Học cách phán đoán thay vì tạo ra sản phẩm

Khóa học này cùng tìm hiểu phương pháp không ngừng nâng cao hệ thống thiết kế và thiết kế giao diện trong lĩnh vực thiết kế sản phẩm.

Tạo checklist chẩn đoán, đăng ký vòng lặp kiểm chứng thành một kỹ năng và chạy cùng một lệnh năm lần để đo độ sai lệch. Những điểm có độ sai lệch lớn chính là lỗ hổng trong hệ thống của tôi. Hãy lấp đầy những lỗ hổng đó rồi chạy lại.

Danh sách kiểm tra sẽ tiếp tục được hoàn thiện qua từng sprint. Khi khóa học kết thúc, bạn sẽ có trong tay một công cụ chẩn đoán có thể áp dụng nguyên vẹn cho hệ thống do chính mình tạo ra.


4. Khoảnh khắc hệ thống thiết kế trở thành mã nguồn

Trong Dev Mode, hãy tạo cấu trúc bàn giao và sử dụng Dev Mode MCP để AI trực tiếp đọc tệp Figma.

So sánh trực quan cách các token được gắn Code syntax và các token không được gắn tạo ra những đoạn mã khác nhau. Đây là lúc xác nhận rằng AI thực sự đọc các quy tắc do tôi đặt ra.

Chúng ta cũng sẽ tìm hiểu ngắn gọn về Code Connect, công cụ thực sự được các nhóm làm việc trong doanh nghiệp sử dụng cho việc bàn giao.


5. Ở phần cuối, chúng ta sẽ mô phỏng cách sử dụng nhiều công cụ AI khác nhau trong công việc thực tế.

Phần 6 là một mini sprint. Chúng ta sẽ đưa mã nguồn mở trên GitHub vào Figma, lập kế hoạch bằng FigJam Agent, tạo giao diện bằng hệ thống thiết kế, tạo nguyên mẫu bằng Figma Make, viết tài liệu bàn giao và chuyển thành mã.

Không chỉ học từng tính năng riêng lẻ, ở phần cuối, bạn sẽ trực tiếp trải nghiệm cách một tổ chức AI thực sự làm việc.



Sau khi hoàn thành khóa học

  • Bạn có thể kiểm tra hệ thống thiết kế của đội ngũ mình bằng danh sách kiểm tra chẩn đoán và xác định thứ tự ưu tiên cần khắc phục từ đâu.

  • Bạn có thể thiết kế cấu trúc token từ Foundation đến Component theo các nguyên tắc và xây dựng chúng bằng agent.

  • Bạn có thể đo lường mức độ chênh lệch của các sản phẩm do AI tạo ra, truy ngược nguyên nhân về những thiếu sót trong hệ thống và bổ sung các quy tắc.

  • Bạn có thể chủ động dẫn dắt quá trình bàn giao từ thiết kế sang mã bằng Dev Mode và MCP.

  • Bạn có thể hoàn thành trọn vẹn một quy trình từ lập kế hoạch, tạo nguyên mẫu đến hiện thực hóa bằng mã.

  • Ngay cả sau khi khóa học kết thúc, bạn vẫn sẽ hình thành được thói quen tự mình tiếp tục học tập.


Tiến trình sẽ diễn ra như sau

Nhiệm vụ
Cứ mỗi 4–5 buổi học sẽ có một nhiệm vụ. Nếu để lại sản phẩm hoặc suy nghĩ của mình trong phần bình luận, bạn có thể trao đổi phản hồi với những học viên khác đang thực hiện cùng bài thực hành. Các nhiệm vụ tập trung vào những chủ đề không có một đáp án duy nhất, chẳng hạn như quy tắc đặt tên, và những chủ đề chia sẻ thất bại, chẳng hạn như những điểm AI đã làm sai.

Tài liệu thực hành
được cung cấp dưới dạng không gian làm việc Notion và kho lưu trữ GitHub. Mỗi bài thực hành đều có tệp bắt đầu, nên ngay cả khi bỏ lỡ giữa chừng, bạn vẫn có thể tiếp tục theo dõi.

Tài liệu được cung cấp
Danh sách kiểm tra chẩn đoán AI Readable, tệp hệ thống thiết kế dùng cho thực hành, bảng vận hành lộ trình tự học

Cộng đồng
Bạn có thể đặt câu hỏi và chia sẻ sản phẩm trong quán cà phê Naver và phòng trò chuyện mở.


Vui lòng kiểm tra trước khi tham gia khóa học

Kiến thức cần có trước

  • Kinh nghiệm trực tiếp tạo frame, auto layout và component trong Figma.
    Bạn có thể học kiến thức cơ bản qua Phần 1, nhưng tùy vào mức độ hiểu biết về Figma, nội dung này có thể chưa đủ để bạn nắm vững kiến thức cơ bản thông qua khóa học này.

  • Bạn không cần trực tiếp viết mã. AI sẽ chuyển đổi mã, còn chúng ta sẽ đọc và đánh giá.

Môi trường học tập

  • Cần có tài khoản Figma trả phí với Full seat thuộc gói Professional hoặc Edu trở lên.

  • Các tính năng chỉ dành cho gói doanh nghiệp (Organization trở lên) sẽ được thực hiện dưới dạng giảng viên trình diễn.

  • Tài khoản GitHub (miễn phí), tài khoản Notion (gói miễn phí)

  • Các công cụ lập trình AI như Claude (thực hành phần 5~6)

  • Môi trường máy tính để bàn (Windows / macOS)

Tài khoản Figma là bắt buộc. Vui lòng xem trước hướng dẫn chuẩn bị các vật dụng khác được cung cấp miễn phí.


Ai đã tạo ra?

Danggun Soft là đối tác kênh chính thức của Figma, đã hỗ trợ các tổ chức thiết kế và phát triển trong doanh nghiệp triển khai Figma, onboarding Figma và tư vấn hệ thống thiết kế.

Quản lý Lee Juhan, người phụ trách khóa học, đang làm việc tại Dangun Soft với vai trò cố vấn thiết kế UX/UI.
Tại thực tế làm việc, anh đã nhiều lần gặp phải vấn đề nhà thiết kế và nhà phát triển diễn giải khác nhau về cùng một hệ thống thiết kế, nên đã chuyển giải pháp cho vấn đề này thành trình tự bài giảng và các bài thực hành.

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

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

  • Nhà thiết kế có từ 3 năm kinh nghiệm trở lên, đang vận hành hệ thống thiết kế và muốn nâng cao chất lượng cũng như tính nhất quán của sản phẩm do AI tạo ra

  • Lập trình viên frontend liên tục sửa các điểm không nhất quán về token, component và cách đặt tên khi chuyển file Figma thành code

  • Người học trình độ trung cấp muốn vượt qua việc sử dụng Figma cơ bản, phân tích hệ thống thiết kế mã nguồn mở và cải tiến chúng ở cấp độ thực tế.

  • Các nhà thiết kế và nhà phát triển muốn kết nối Figma Make, FigJam Agent, Dev Mode MCP với các dự án thực tế để nâng cao năng suất

  • Nhà sáng tạo độc lập tự mình thực hiện việc lập kế hoạch, thiết kế và phát triển, đồng thời xây dựng hệ thống thiết kế dựa trên AI cùng quy trình chuyển đổi mã.

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

  • Người đã có kiến thức cơ bản về Figma (Phần 1 chỉ ở mức khởi động để theo kịp phần thực hành, không được biên soạn chi tiết như một khóa học nhập môn cơ bản.)

  • Người có kiến thức cơ bản về các công cụ AI

  • Khi tiến hành lớp học, chúng tôi sử dụng tài khoản trả phí của ChatGPT và Figma.

Xin chào
Đây là tgedu

Xin chào, chúng tôi là Dangun Soft.

Dangun Soft là đối tác giải pháp phần mềm đã đồng hành cùng các doanh nghiệp CNTT trong nước từ năm 2002.

Chúng tôi đồng hành cùng khách hàng trong mọi công việc liên quan đến phần mềm, từ tư vấn cùng khách hàng tìm hiểu công cụ nào là cần thiết, xây dựng giải pháp và hỗ trợ kỹ thuật, cho đến đào tạo B2B giúp toàn bộ tổ chức có thể sử dụng phần mềm trên thực tế.

Chúng tôi cung cấp và hỗ trợ sử dụng phần mềm trong hầu hết mọi lĩnh vực, bao gồm Figma, Protopie, JetBrains, GitHub, Microsoft, Adobe và Autodesk. Không phải là công ty chỉ chuyên về một vài sản phẩm nhất định, chúng tôi đã thiết kế những tổ hợp phù hợp dựa trên toàn bộ môi trường làm việc của doanh nghiệp. Nhờ được các nhà phát triển công nhận là đối tác cấp cao nhất, hiện nay chúng tôi đang vươn lên trở thành một doanh nghiệp toàn cầu thông qua hoạt động phân phối độc quyền tại khu vực APAC.

Sau khi cung cấp giải pháp và trao đổi với hầu hết các tập đoàn lớn trong nước, chúng tôi muốn chia sẻ với nhiều người hơn những vấn đề thường xuyên gặp phải tại hiện trường cùng các giải pháp cho chúng.

YouTube chính thức của Tangunsoft: https://www.youtube.com/@tangunsoft
Instagram chính thức của Tangunsoft: https://www.instagram.com/tangunsoft/
LinkedIn chính thức của Tangunsoft: https://www.linkedin.com/company/tangunsoft/posts/?feedView=all

Thêm

Đồng giảng viên

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

Tất cả

51 bài giảng

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

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!

Ưu đãi có thời hạn

169.400 ₫

30%

5.004.586 ₫