A đến Z về UI thiết kế sử dụng Figma từ cơ bản đến thực tế

Người mới bắt đầu cũng như người không chuyên ngành đều có thể
từng bước xây dựng khả năng thiết kế UI.

Xin chào.
Tôi là Eric, đang hoạt động
với tư cách là product designer tại New York. 👋

Nếu tôi nói về công việc mà tôi làm với tư cách là một product designer, thì đầu tiên là công việc user research - tìm hiểu về người dùng và nhận phản hồi từ họ, sau đó là UX design như wireframe, thiết kế cấu trúc thông tin được tạo ra dựa trên sự hiểu biết về người dùng, và cuối cùng là UI design - tạo ra design system và sản phẩm UI design cuối cùng mà người dùng thực tế sẽ sử dụng. Với tư cách là một product designer, tôi có ownership đối với gần như tất cả các phần thuộc quy trình UX như vậy, tức là cả UX và UI, nhưng từ đầu thì không phải như vậy.

"Câu chuyện về việc tôi chỉ làm công việc lập kế hoạch nhưng sau 3 tháng đã
có được khả năng thiết kế UI"

Tôi đã làm việc như một người lập kế hoạch ở Seoul trong vài năm trước khi đến New York. Công việc tôi làm lúc đó chủ yếu là tạo wireframe bằng PowerPoint, tức là tài liệu kế hoạch UI, và thực hiện nghiên cứu người dùng. Việc tạo wireframe bằng PowerPoint không yêu cầu độ hoàn thiện về mặt thị giác nên tôi không gặp khó khăn gì khi bắt đầu. Nhưng tôi nghĩ rằng thiết kế UI không phải là lĩnh vực tôi có thể làm được. Tôi có cơ hội hợp tác với các nhà thiết kế UI nhưng bản thân tôi không trực tiếp làm thiết kế UI.

^{👉 Hình ảnh thời gian làm công việc lập kế hoạch ở Seoul và một phần tài liệu lập kế hoạch}

Tôi từng nghĩ rằng thiết kế UI chỉ dành cho những người có khiếu thẩm mỹ bẩm sinh hoặc khả năng thiết kế xuất sắc. Đối với tôi, rào cản để có được khả năng này có vẻ quá cao. Nhưng tôi đã nghĩ rằng để nâng cấp sự nghiệp, mình cần trở thành một product designer đảm nhận tất cả từ nghiên cứu người dùng, lập kế hoạch đến thiết kế UI. Để làm được điều đó, tôi cần phải có khả năng thiết kế UI. Đây chính là thử thách lớn nhất đối với tôi. Ngay cả khi bắt đầu, tôi cũng không biết nên học từ đâu và như thế nào. Tuy nhiên, vì đã có mục tiêu nên tôi bắt đầu tìm kiếm phương pháp. Trong quá trình tìm kiếm, may mắn thay tôi đã gặp được những mentor tốt và biết đến những phương pháp hay.

Và khi biết được phương pháp như vậy, tôi đã có được sự tự tin rằng 'việc trang bị khả năng thiết kế UI không phải là điều bất khả thi đối với tôi'. Chỉ sau 3 tháng bắt đầu học thiết kế UI như vậy, tôi đã hoàn thành dự án thiết kế UI đầu tiên, và điều này đã đóng vai trò quan trọng trong việc tôi có được công việc đầu tiên với tư cách là product designer.

^{👉 Các dự án UI đã thực hiện khi học muộn}

Tôi đã nhận ra rằng thông qua quá trình học tập và rèn luyện này, nếu biết đúng phương pháp thì ngay cả những người không có khiếu thẩm mỹ đặc biệt hoặc không học chuyên ngành thiết kế cũng có thể hoàn toàn trang bị đủ khả năng thiết kế UI.

Tôi sẽ chia sẻ với các bạn những khó khăn mà tôi đã phải vượt qua để có thể nhanh chóng trang bị khả năng thiết kế UI thông qua khóa học này, cũng như bí quyết để có thể vượt qua những khó khăn đó. Vì vậy, tôi sẽ hướng dẫn những bạn đang gặp phải khó khăn tương tự như tôi có thể trang bị khả năng thiết kế UI bằng cách sử dụng công cụ Figma.

1. Bạn có thể thu được gì từ khóa học này? 🙌

① Hiểu quy trình thiết kế UI và biến nó thành của riêng mình

Tôi có một câu hỏi dành cho bạn. 🙋 Những gì bạn đang xem là các màn hình đại diện của những ứng dụng cực kỳ nổi tiếng. Đây là những màn hình được thiết kế rất đẹp mắt. Bạn nghĩ designer đã trải qua quá trình như thế nào để tạo ra những màn hình này? Liệu họ có mở Figma hay Sketch và vẽ ra ngay lập tức không?

^{Nguồn hình ảnh: Spotify, Airbnb}

Về vấn đề này, tôi muốn chia sẻ quan điểm của mình là hầu hết các dự án thiết kế UX/UI đều trải qua nhiều quá trình và suy nghĩ kỹ lưỡng trước khi có được những giao diện như vậy, và chúng liên tục được cập nhật để cung cấp dịch vụ tốt hơn cho người dùng. Thiết kế UI có thể được xem là quá trình tìm kiếm giải pháp cho các vấn đề trong bức tranh lớn của thiết kế UX/UI. Trong khóa học này, tôi sẽ hướng dẫn các bạn về quy trình và các hoạt động cần thực hiện để thiết kế UI.

Có lý do tại sao chúng ta phải trải qua những quy trình này. Để thiết kế UI tốt, không phải chỉ đơn giản là vẽ ngay những màn hình UI cuối cùng đẹp mắt và sắc nét, mà phải thông qua từng bước để giao tiếp hiệu quả với các thành viên trong nhóm hoặc khách hàng và cuối cùng có thể mang lại trải nghiệm tốt nhất cho người dùng. Các bạn cần hiểu lý do tại sao phải trải qua từng bước và biết cách tự mình thực hiện từng bước một cách trực tiếp. Tôi đã chuẩn bị khóa học này để các bạn có thể trang bị khả năng thực hiện từng bước bằng cách sử dụng Figma, giúp quy trình này trở thành của riêng các bạn, tức là có thể trang bị chuyên môn về thiết kế UI.

^{👉 Quy trình thiết kế UI mà tôi thực hiện khi làm việc}

② Trang bị khả năng thực chiến thiết kế UI thông qua thực hành thiết kế

Trước đó chúng ta đã nói rằng để thiết kế UI tốt thì cần phải tuân theo quy trình thiết kế UI. Mục đích của khóa học này là giúp quy trình này trở thành của riêng các bạn thông qua việc học. Để làm được điều này, điều quan trọng nhất là thông qua thực hành, các bạn hãy làm theo từng chương thực tế và các ví dụ thực chiến của khóa học này để thực sự trải qua các giai đoạn thiết kế UI. Vậy thì tôi sẽ cho các bạn biết những sản phẩm sẽ được tạo ra ở từng giai đoạn thông qua các ví dụ.

▪️ Khả năng tạo và sử dụng bản phác thảo tay và wireframe

Phác thảo tay là việc suy nghĩ về ý tưởng có thể giải quyết vấn đề đã cho và vẽ phác một cách thô sơ. Ưu điểm của việc phác thảo là có thể dễ dàng chỉnh sửa ý tưởng trong thời gian ngắn. Càng về các giai đoạn sau, khi ý tưởng được phát triển hơn, độ hoàn thiện về mặt thị giác càng tăng lên nên thời gian chỉnh sửa sẽ mất nhiều hơn.

Wireframe giúp phát triển thêm các ý tưởng từ bản phác thảo, định nghĩa các chức năng cho từng màn hình và kết nối luồng giữa các màn hình. Wireframe có thể được coi là khung xương để chuyển sang giai đoạn thiết kế UI. Khi công việc được phân chia rõ ràng giữa người lập kế hoạch UI và nhà thiết kế UI, thì người lập kế hoạch UI sẽ đảm nhận việc tạo wireframe. Tuy nhiên, đối với product designer hoặc UX/UI designer thì cũng cần biết cách tạo wireframe.

^{👉 Đây là bản phác thảo tôi đã vẽ, trông như được vẽ bằng chân vậy😊😊 Nhưng trong công việc thực tế và môi trường làm việc, những bản phác thảo như thế này có thể rất mạnh mẽ!}

^{👉 Wireframe đã được định nghĩa màn hình, sơ đồ luồng màn hình, v.v.}

▪️ Khả năng tạo và sử dụng thiết kế UI và prototyping

Còn được gọi là Hi-Fi Prototype, thiết kế UI sẽ vẽ ra những màn hình có độ hoàn thiện thị giác cao dựa trên wireframe đã có trước đó. Ở giai đoạn này, các yếu tố visual như font chữ, màu sắc, icon sẽ đạt đến mức độ mà người dùng thực tế sẽ sử dụng. Giai đoạn này cũng quan trọng ở việc phải suy nghĩ kỹ lưỡng về trải nghiệm nào là phù hợp nhất với người dùng. Trong khóa học này, chúng ta sẽ cùng tìm hiểu các nguyên lý thiết kế cần biết để đặt người dùng làm trung tâm. Nếu xây dựng khả năng thực chiến trên nền tảng lý thuyết, bạn có thể trở thành một designer có nền tảng vững chắc! 👍

Prototyping được tạo ra bằng cách kết nối các màn hình với nhau, giúp người dùng có cảm giác như ứng dụng đang thực sự hoạt động.

^{👉 Giai đoạn nâng cao tính hoàn thiện về mặt thị giác, thiết kế UI}

^{👉 Màn hình hoạt động mà không cần lập trình thông qua việc tạo nguyên mẫu}

▪️ Khả năng tạo ra hệ thống thiết kế và handoff

Dựa trên thiết kế UI cuối cùng được tạo ra, tôi sẽ hướng dẫn các bạn cách tạo hệ thống thiết kế bao gồm style guide, component và các yếu tố khác. Khi có hệ thống thiết kế, người dùng sẽ được trải nghiệm giao diện nhất quán, còn designer và developer có thể thiết kế và phát triển một cách hiệu quả, tiết kiệm thời gian, vì vậy nó có thể rất mạnh mẽ trong thực tế. 💪

Cuối cùng, handoff (Hand-Off, HO) có thể được coi là giai đoạn cuối cùng của thiết kế UI, đây là giai đoạn định nghĩa cụ thể các yếu tố chi tiết như kích thước văn bản hoặc nút bấm là bao nhiêu pixel để có thể phát triển thực tế và chuyển giao cho nhà phát triển.

^{👉 Component - yếu tố quan trọng của hệ thống thiết kế}

^{👉 Sản phẩm thiết kế được tạo ra cho phát triển, handoff}

③ Bí kíp vàng cho thiết kế UI - Tiết lộ toàn bộ! 🍯

Tài liệu tham khảo để học thiết kế và nhiều mẹo hữu ích khác giúp những người mới bắt đầu có thể nhanh chóng và dễ dàng đạt được khả năng mong muốn. Tôi sẽ chia sẻ kiến thức và thông tin mà tôi đã tích lũy được trong nhiều năm làm việc về thiết kế UX và UI. Và tôi cũng sẽ đề cập đến những câu hỏi mà các bạn đã học thiết kế UI với tôi thường xuyên hỏi. Nếu có phần nào thắc mắc thêm thì hãy để lại câu hỏi ở phần bình luận nhé^^

④ Thiết kế sự nghiệp và lộ trình 🚀

Sau khi hoàn thành khóa học, bạn sẽ có khả năng thiết kế UI và có thể lập kế hoạch cụ thể cho bước tiếp theo để đạt được sự nghiệp mục tiêu như trở thành UX/UI designer và product designer. Tôi sẽ đưa ra những khuyến nghị và mẹo về các hoạt động nên thực hiện để bạn đạt được mục tiêu của mình.

2. Ai nên tham gia khóa học này? 🧑🏻👩🏻

✔️ Người mới bắt đầu thiết kế sản phẩm, thiết kế UX/UI

Thứ nhất là những người mới bắt đầu mơ ước trở thành product designer, UX/UI designer, UI designer. Tất nhiên cũng bao gồm cả những người không chuyên về thiết kế. Để đạt được mục tiêu nghề nghiệp này, việc có khả năng làm UI design là điều bắt buộc. Nếu bạn theo dõi lớp học này một cách tốt, bạn sẽ có thể đạt được mục tiêu mong muốn nhanh hơn bằng cách trang bị cả kiến thức và lý thuyết cơ bản, cũng như khả năng thực chiến.

✔️ Những người muốn trở thành UX/UI designer nhưng nghĩ rằng mình thiếu khả năng thị giác

Trước đây tôi đã nói rằng tôi cảm thấy thiếu khả năng thị giác. Tôi sẽ chia sẻ bí quyết đã giúp tôi vượt qua điều này để các bạn cũng có thể trang bị khả năng thiết kế UI. Để trở thành designer, bạn cần hiểu rõ quy trình thiết kế UI và biết cách tạo ra các sản phẩm đầu ra ở từng giai đoạn, cũng như cách sử dụng các công cụ. Sau khi hoàn thành khóa học này, các bạn sẽ có thể đạt được mục tiêu đó.

✔️ Những người muốn thành thạo Figma

Trong khóa học này, chúng ta sẽ từng bước tiến hành từ những chức năng cơ bản nhất của Figma như tạo hình dạng, văn bản cho đến những chức năng nâng cao như thiết kế UI, handoff, v.v. Tôi đã thiết kế khóa học để những người mới bắt đầu có thể thành thạo Figma và cuối cùng là phát triển khả năng chuyên môn trong thiết kế UI. Đặc biệt, tôi đã cố gắng cung cấp nhiều ví dụ thực tế thông qua khóa học này. Nếu các bạn chăm chỉ thực hành theo phần này thì sẽ rất có ích.

✔️ Những người muốn củng cố nền tảng cơ bản về thiết kế UI

Cốt lõi của thiết kế UX, UI là thực hiện và lặp lại quy trình thiết kế (iteration) cho đến khi người dùng hài lòng, hoặc cho đến khi giải quyết được những vấn đề mà người dùng gặp phải. Nếu thực hiện theo quy trình mà tôi đã đề cập trước đó, bạn có thể tạo ra những ứng dụng hoặc dịch vụ vững chắc, xem xét nhiều khía cạnh hơn cho người dùng. Sau khi hoàn thành khóa học này, bạn sẽ không chỉ có khả năng thiết kế những ứng dụng đẹp mắt, mà còn trở thành một nhà thiết kế biết cách sử dụng từng bước trong quy trình, và suy nghĩ về cách cung cấp trải nghiệm tốt hơn cho người dùng. Việc học Figma là để hỗ trợ năng lực kỹ thuật và chuyên môn cần thiết để thực hiện từng bước trong quy trình đó.

3. Tại sao lại là Figma? 🤔

✔️ Figma - công cụ All-in-one có thể làm được mọi thứ chỉ với một! 👌

Trong quy trình thiết kế UI, có nhiều công cụ khác nhau có thể sử dụng cho từng giai đoạn. Đó là Adobe XD, Sketch, Figma và những công cụ khác. Trong số đó, có vẻ như không có ứng dụng nào hỗ trợ tất cả các hoạt động cần thiết cho thiết kế UI bằng Figma. Có thể hoàn thành gần như toàn bộ quy trình chỉ với một ứng dụng.

Khi sử dụng ứng dụng Sketch, giai đoạn prototyping cần phải kết hợp với Invision để có thể chia sẻ hiệu quả với các thành viên trong team. Mặc dù bản thân ứng dụng Sketch có tính năng prototyping, nhưng vì là công cụ hoạt động offline nên có hạn chế trong việc chia sẻ trực tuyến hiệu quả với các thành viên team hoặc khách hàng. Và để handoff thì cần phải sử dụng Zeplin.

Nhưng nếu sử dụng Figma, bạn có thể giải quyết toàn bộ quy trình từ wireframe đến handoff chỉ với một ứng dụng duy nhất. Tôi ban đầu sử dụng Sketch rồi chuyển sang Figma, và nhờ đó có thể làm việc hiệu quả hơn và tiết kiệm được rất nhiều thời gian.

^{👉 "Figma = Sketch + InVision + Zeplin"}

✔️ Có thể sử dụng trên cả Windows và MacBook 👏

Theo thống kê, ứng dụng Sketch - một trong những công cụ thiết kế UI được sử dụng nhiều nhất - không thể sử dụng trên Windows. Tuy nhiên, Figma là một công cụ dựa trên nền tảng online nên chỉ cần có trình duyệt như Safari, Chrome là có thể sử dụng được. Có thể sử dụng bất kể bạn đang dùng OS nào như Windows hay macOS.

✔️ Công cụ thiết kế trực tuyến được tối ưu hóa cho cộng tác

Figma là một công cụ trực tuyến nên rất tuyệt vời để cộng tác và giao tiếp thời gian thực với các thành viên trong nhóm hoặc khách hàng. Bạn có thể làm việc thiết kế cùng với các designer theo thời gian thực, và có các tính năng tiện lợi để chia sẻ sản phẩm thiết kế với developer, product manager và những người khác, cũng như viết bình luận và chia sẻ về chúng.

^{👉 Cộng tác thời gian thực với các thành viên trong nhóm thực sự rất tiện lợi.}

✔️ Plugin miễn phí và template giúp tăng năng suất trong công việc thiết kế 😀

Figma có rất nhiều template thiết kế miễn phí và plugin được tạo bởi bên thứ ba. Nếu sử dụng tốt những thứ này, bạn có thể tăng năng suất thiết kế lên gấp vài lần đến vài chục lần. Trong khóa học này, tôi sẽ hướng dẫn cách sử dụng template và plugin, đặc biệt là giới thiệu những template và plugin có tính ứng dụng cao để giúp các bạn phát triển kỹ năng thiết kế UI một cách dễ dàng và nhanh chóng hơn.

^{👉 Plugin và template của Figma}

Câu hỏi Q&A 🙋🏻‍♂️

Q. Tôi có cần biết sử dụng các công cụ khác như ứng dụng Sketch, Zeplin, InVision trước khi học khóa học này không?

A. Hoàn toàn không cần biết gì cả. Figma chứa đựng hầu như tất cả các tính năng cần thiết cho thiết kế UI. Tất cả những gì có thể đạt được thông qua Sketch, InVision, Zeplin đều có thể thực hiện được nếu bạn thành thạo Figma. Tức là, bạn có thể tạo ra các sản phẩm thiết kế bằng cách thực hiện tất cả các bước từ thiết kế UI, tạo prototype, đến handoff (sản phẩm cuối cùng dành cho developer) thông qua Figma.

Q. Người không chuyên ngành có thể học được không?

A. Vâng, khóa học này được thiết kế dành cho người mới bắt đầu và những người không chuyên. Tôi sẽ hướng dẫn từng bước từ kiến thức cơ bản về thiết kế UI, các chức năng cơ bản của Figma, cho đến kiến thức nâng cao và các tính năng cao cấp. Vì vậy, ngay cả khi bạn đã làm công việc hoàn toàn không liên quan đến thiết kế hoặc không phải chuyên ngành, sau khi hoàn thành khóa học này, bạn sẽ có thể trang bị được năng lực chuyên môn về thiết kế UI.

Hỏi: Có môn học tiên quyết nào cần phải học trước không?

A. Nếu bạn hoàn toàn không biết gì về thiết kế UX, UI thì tôi nghĩ bạn nên nghe trước khóa học "Tổng quan về thiết kế UX dành cho người mới bắt đầu" mà tôi đã mở trên Inflearn. Sau khi nghe khóa học này, bạn có thể tích lũy kiến thức tổng quan về thiết kế UX và UI. Quan trọng nhất là bạn sẽ hiểu rõ hơn tại sao cần phải học khóa thiết kế UI này. Nếu bạn đã có kiến thức cơ bản về thiết kế UX, UI thì có thể nghe trực tiếp khóa học này cũng được.

Vậy thì hẹn gặp lại trong lớp học! 👋