Penpot Prototype Thực Chiến: Interaction, Flow, Overlay, Usability Test Và Inspect Handoff

Penpot là nền tảng thiết kế mã nguồn mở cho phép UI/UX designer chuyển từ màn hình tĩnh sang prototype có thể tương tác, chia sẻ và kiểm thử. Giá trị của nó không nằm ở số lượng dây nối giữa các board, mà ở khả năng biến giả thuyết sản phẩm thành một kịch bản đủ rõ để người dùng thử, stakeholder review và developer hiểu hành vi cần triển khai. Bài viết này chính là hành trình từ nghiên cứu, xây dựng flow, gán interaction, kiểm thử cho đến bàn giao code bằng Penpot, giúp bạn tăng tốc quy trình làm việc và làm chủ mọi khâu.

Thay vì liệt kê các tính năng một cách rời rạc, chúng ta sẽ đi theo một dự án thực tế. Ở đó, bạn sẽ học cách đặt câu hỏi test đúng, tổ chức board khoa học, sử dụng thành thạo trigger và action, tinh chỉnh animation, và đặc biệt là tận dụng Inspect để biến prototype thành ngôn ngữ code chung với developer. Tất cả được dựa trên tài liệu chính thức từ Penpot và cập nhật những mẹo hay nhất.

1. Tổ chức prototype Penpot và workflow nghiên cứu UX

Trước khi kéo các điểm nối và gán hành vi, bạn cần có một bộ khung nghiên cứu rõ ràng. Prototype không chỉ là bản demo sản phẩm; nó là công cụ để trả lời các giả thuyết về hành vi người dùng. Nếu bạn muốn đi sâu vào việc xây dựng hệ thống thiết kế có tính nhất quán, hãy tham khảo thêm về cách xây dựng design tokens trong Penpot cũng như việc bàn giao cho lập trình viên.

1.1. Xác định câu hỏi test trước khi tạo prototype

Một prototype không có giả thuyết rõ ràng giống như con thuyền không bánh lái. Trước khi tạo ra màn hình và nút bấm, bạn cần xác định chính xác câu hỏi mình muốn trả lời: "Người dùng có hiểu công dụng của nút này không?", "Họ có tìm thấy hành động chính trong vòng 5 giây không?". Việc liệt kê các câu hỏi test sẽ là kim chỉ nam cho mọi quyết định tương tác sau này.

"Nếu bạn không biết mình đang tìm kiếm điều gì trong bài usability test, bạn sẽ chỉ tìm thấy những thứ mình muốn thấy." – Một nguyên tắc bất thành văn trong UX research.

Các loại câu hỏi test cần chuẩn bị

• Câu hỏi định hướng: Ví dụ, "Bạn có thể tìm thấy cách tạo một dự án mới mà không cần xem hướng dẫn không?"
• Câu hỏi hành vi: "Khi bạn muốn xóa một bản vẽ, bạn thử nhấn chuột phải trước hay di chuyển chuột sang thanh công cụ?"
• Câu hỏi hệ thống: "Sau khi xem kết quả thanh toán, bạn có biết mình nên chọn đâu để quay lại bước kế tiếp không?"

Việc ghi chú rõ các câu hỏi này sẽ giúp bạn xây dựng một bản kịch bản test, từ đó bạn có thể phân loại mức độ ưu tiên của từng luồng di chuyển. Đây là bước đầu tiên tạo nên một prototype có giá trị chứ không đơn thuần là tập hợp các màn hình đẹp.

1.2. Board naming và cấu trúc layer chuẩn cho prototype

Tổ chức file board trong Penpot có ảnh hưởng trực tiếp tới khả năng bảo trì và chia sẻ prototype. Nếu bạn đặt tên board kiểu "Board 1", "Board 2", hoặc đặt tên layer trùng lặp, chính bạn sẽ bị rối khi cần tạo prototype. Hãy tạo một convention đặt tên rõ ràng cho board và layer như 01_Onboarding_Welcome, 02_Onboarding_PhoneInput. Khi đó, bạn có thể nhanh chóng tạo ra được một hệ thống điều hướng chính xác giữa các board mà không mất công tìm kiếm.

Bên cạnh đó, layer naming còn ảnh hưởng đến chất lượng của việc export tài nguyên và mã CSS trong Inspect. Nếu bạn đặt tên layer Btn_primary_CTA thì khi developer copy CSS từ Penpot, họ sẽ hiểu ngay thành phần đó là gì. Ngược lại, giá trị này sẽ giảm đi đáng kể nếu layer chỉ mang tên là Frame 217. Một quy trình nghiên cứu và QA kỹ lưỡng luôn bắt đầu từ việc giữ file thiết kế thật sạch.

1.3. Cơ chế hoạt động của Prototype trong Penpot (Flows)

Theo tài liệu Prototyping – hướng dẫn chính thức của Penpot, các flow được tổ chức xoay quanh board và các mũi tên tương tác. Mỗi flow bắt đầu từ một board được chọn là điểm vào (entry point). Bạn có thể có nhiều flow trong cùng một file, mỗi flow phục vụ cho một nhiệm vụ cụ thể của người dùng.

Mẹo nhỏ ở đây là hãy tạo một board chuyên dụng để theo dõi sơ đồ flow (ví dụ: board "Flow Map"). Trong board này, bạn có thể đặt các board thu nhỏ và vẽ mũi tên ghi chú để mô tả luồng điều hướng. Việc này rất hữu ích cho cả quá trình tự review và việc trình bày cho stakeholder.

1. Tạo board trung tâm hoặc sử dụng tính năng Artboards để chứa toàn bộ các màn hình của một flow.
2. Đặt tên các frame theo cấu trúc FlowName_Step.
3. Nhóm các flow có liên quan vào nhóm logic, tránh tạo ra một mớ hỗn độn khi số màn hình lên đến hàng trăm.

2. Xây dựng interaction và hotspot tương tác thực chiến

Khi bạn đã có board và layer rõ ràng, bước tiếp theo là gắn các tương tác. Penpot sử dụng cơ chế hotspot: bạn chọn một layer, sau đó kéo từ nút điều khiển (chấm tròn) đến board đích hoặc chọn trong bảng tương tác. Điều này được áp dụng cho bất kỳ layer nào, không chỉ các nút bấm. Bất kỳ đối tượng nào – kể cả text – đều có thể trở thành một hotspot.

2.1. Các trigger quan trọng trong Penpot

Chọn đúng trigger là chọn đúng thời điểm hành động xảy ra. Mỗi trigger có một ngữ cảnh sử dụng riêng. Dưới đây là bảng mô tả ngắn gọn bạn nên nhớ:

• On click: Xảy ra khi người dùng nhấp chuột hoặc chạm vào layer. Đây là trigger phổ biến nhất, phù hợp với mọi nút bấm hoặc thẻ sản phẩm.
• Mouse enter: Xảy ra khi con trỏ chuột đi vào vùng của layer. Thường dùng để hiện menu con, hiện tooltip, hoặc overlay mô tả chi tiết.
• Mouse leave: Ngược lại với Mouse enter, xảy ra khi con trỏ chuột rời khỏi layer. Dùng để ẩn tooltip hoặc đóng dropdown.
• After delay: Xảy ra sau một khoảng thời gian trễ định sẵn (tính bằng mili giây). Ví dụ, sau 2 giây tự động hiển thị một overlay hướng dẫn hoặc chuyển đến màn hình splash.

Lưu ý quan trọng về mobile UX: các trigger Mouse enter và Mouse leave không tồn tại trên thiết bị cảm ứng. Vì vậy, nếu bạn thiết kế prototype mobile-first, hãy luôn có một cách khác để kích hoạt hành động tương tự (ví dụ như nút bấm 'i' để xem thông tin chứ không chỉ hover).

Hiểu đúng bản chất trigger để tránh người dùng bối rối

Nhiều designer mới dùng thường đặt On click cho mọi thứ. Cách này bỏ sót khác biệt giữa desktop và cảm ứng, đồng thời làm tooltip, hover state hoặc màn hình tự chuyển trở nên thiếu tự nhiên. Hãy bắt đầu từ ý định của người dùng và thiết bị mục tiêu, sau đó chọn trigger; với mobile, luôn có phương án tương đương cho hành vi chỉ tồn tại khi hover.

2.2. Các loại action và cách ứng dụng đúng tình huống

Action là hành động xảy ra sau khi trigger được kích hoạt. Penpot cung cấp một loạt các action đã được chuẩn hóa tốt:

• Navigate to: Chuyển hướng đến một board hoặc flow khác. Thường được dùng để chuyển trang chính.
• Open overlay: Mở một board dưới dạng overlay trên màn hình hiện tại. Rất hữu ích cho các popup, modal, menu, hoặc bàn phím.
• Toggle overlay: Đảo trạng thái của overlay – nếu đang mở thì đóng, nếu đang đóng thì mở. Hoàn hảo cho các nút hamburger mở menu và tự đóng lại khi click ra ngoài.
• Close overlay: Đóng overlay hiện tại. Thường được dùng cho nút X hoặc nút Hủy bỏ.
• Previous screen: Quay về màn hình trước đó trong lịch sử điều hướng. Rất hữu ích cho nút Back.
• Open URL: Mở một URL trong tab hoặc cửa sổ mới. Dùng để đưa người dùng đến website ngoài hoặc tài liệu hỗ trợ.

Thực hành: Khi nào dùng overlay tương đối?

Penpot hỗ trợ đặt overlay tương đối với phần tử kích hoạt. Sau khi chọn action Open overlay, hãy chọn trường Relative to, dùng preset vị trí hoặc chọn Manual rồi kéo vùng ghost tới nơi cần hiển thị. Tùy chọn đóng khi bấm ngoài và nền phủ hỗ trợ mô phỏng modal; cách neo tương đối phù hợp với dropdown, tooltip và popover. Luôn thử lại trong View mode vì vị trí đúng trên một board chưa chắc phù hợp ở biến thể màn hình khác.

2.3. Tùy chỉnh animation: Dissolve, Slide, Push

Animation trong prototype không chỉ để làm đẹp, mà còn giúp người dùng hiểu được mối quan hệ không gian giữa các màn hình. Penpot cung cấp các hiệu ứng sau:

• Dissolve: Màn hình mới mờ dần lên thay thế màn hình cũ. Phù hợp cho các bước chuyển nhẹ nhàng, không gây chú ý.
• Slide: Màn hình mới trượt từ một hướng nhất định. Đây là lựa chọn phổ biến cho onboarding, wizard, hoặc các menu trượt (drawer). Bạn chọn hướng trượt (trái, phải, trên, dưới) và thời gian.
• Push: Màn hình mới đẩy màn hình cũ ra khỏi khung nhìn. Thường dùng cho các luồng điều hướng có thứ bậc, khi người dùng đi sâu vào trang con và muốn quay lại.

Lưu ý rằng nếu bạn thiết lập nhiều flow khác nhau, mỗi flow có thể có các animation riêng mà không ảnh hưởng đến nhau. Điều này giúp bạn thử nghiệm nhanh các phong cách chuyển cảnh khác nhau trong cùng một dự án. Trong tài liệu chính thức của Penpot Prototyping, bạn có thể tìm hiểu chi tiết về các thuộc tính ease-in-out, duration và delay để tối ưu cảm giác chuyển động.

2.4. Quản lý multiple flows và fixed scroll

Một dự án thực tế thường có nhiều hơn một luồng chính. Ví dụ, luồng đăng nhập, luồng quên mật khẩu, luồng tạo tài khoản, và luồng mua hàng. Penpot cho phép bạn tạo multiple flows, mỗi flow với một biểu tượng cờ riêng. Trong bảng Prototype, bạn có thể chọn flow muốn thao tác; việc này giúp quá trình research trở nên khoa học hơn vì bạn có thể kiểm tra từng giả thuyết một.

Ngoài ra, một tính năng quan trọng là fixed scroll. Trên thực tế, một số thành phần như thanh header hoặc thanh điều hướng dưới cùng của mobile app luôn cố định khi cuộn nội dung. Trong Penpot, bạn có thể thiết lập vị trí cố định của một layer trên board để nó không bị cuộn theo nội dung. Điều này là vô cùng cần thiết để prototype của bạn phản ánh đúng hành vi thực của sản phẩm.

Mẹo lớn: Hãy sử dụng một board riêng để mô phỏng nội dung dài (high-fidelity content) và một board khác chứa layout có cấu trúc cố định. Khi bạn cập nhật nội dung prototype cho một board, toàn bộ flow và tương tác vẫn giữ nguyên, giúp bạn dễ dàng thực hiện nhiều vòng kiểm thử.

3. View mode, chia sẻ và thực hiện usability test

Sau khi hoàn tất việc gán tương tác, bạn cần đưa prototype vào View mode – trạng thái có thể tương tác và chia sẻ. Hãy nhấn nút Play ở góc trên bên phải của trình chỉnh sửa để mở prototype trong một tab mới. Từ đây, bạn có thể thao tác như một người dùng thực sự và quan sát hành vi của các tương tác đã cài đặt. Bạn nên nhớ rằng View mode là trải nghiệm một màn hình, không phải toàn bộ file board. Nó cho phép bạn ẩn toàn bộ các thành phần thừa và tập trung vào từng flow cụ thể.

3.1. Thiết lập quyền chia sẻ: Can comment và Can inspect code

Khi bạn chia sẻ link prototype cho đồng nghiệp hoặc khách hàng, Penpot cung cấp các tùy chọn quyền đa dạng. Can comment cho phép người xem bình luận trực tiếp lên prototype. Điều này rất hữu ích trong vòng lặp review design, tuy nhiên, bạn cũng cần phải định hướng họ nhận xét mang tính xây dựng: tập trung vào luồng, thông điệp, khả năng tìm thấy nút, không nhận xét về màu sắc nếu không cần thiết

Một quyền khác là Can inspect code. Đây là quyền cho phép developer truy cập vào chế độ Inspect, xem mã CSS, kích thước và thuộc tính của từng element. Nếu bạn muốn họ kiểm tra tính kỹ thuật của thiết kế trong quá trình prototype, hãy cấp quyền này. Tuy nhiên, không nên cấp quyền này cho khách hàng chỉ để xem demo, vì họ sẽ bị nhiễu thông tin kỹ thuật ở bên ngoài. Bạn cần điều hướng đúng phân loại người dùng.

3.2. Usability test với prototype Penpot: Quy trình thực hiện

Usability test không cần một phòng lab đắt tiền. Bạn có thể tiến hành trực tiếp hoặc qua các công cụ ghi màn hình như Loom, OBS hoặc các công cụ họp trực tuyến. Trước khi bắt đầu, hãy gửi cho người tham gia một đường link View mode đã được cấu hình chỉ ở chế độ xem (không cho phép họ vô tình sửa file gốc). Trong buổi test, bạn yêu cầu họ thực hiện các nhiệm vụ cụ thể tương ứng với từng flow đã tạo.

1. Chuẩn bị kịch bản: Tạo 3-5 nhiệm vụ, mỗi nhiệm vụ bắt đầu từ một entry point xác định và có một đích đến rõ ràng.
2. Quan sát việc sử dụng: Ghi chú lại những lúc người dùng do dự, trỏ chuột loanh quanh hoặc bấm sai nơi.
3. Thu thập metric: Đếm số lần click để hoàn thành tác vụ, thời gian hoàn thành, tỉ lệ thành công.
4. Phỏng vấn sau test: Hỏi người dùng cảm nhận chung, điểm mắc kẹt, và điều họ mong đợi được thấy.

Khi sử dụng prototype Penpot, bạn nên lưu ý rằng một số tương tác như mouse enter sẽ không hoạt động đúng trên màn hình điện thoại thật nếu bạn mở bằng đường link trên điện thoại. Hãy xác định rõ thiết bị kiểm thử trong buổi test. Dựa trên các câu trả lời thu được, bạn quay trở lại bảng Prototype và điều chỉnh trigger, action hoặc vị trí overlay cho phù hợp với phản hồi người dùng.

Bạn không thể kiểm thử độ chính xác của accessibility bằng mắt thường. Penpot không phải là công cụ đánh giá WCAG, nhưng việc xây dựng prototype là bước tiền đề tuyệt vời để kết hợp với các công cụ kiểm tra khác như Storybook trong đánh giá accessibility và visual QA.

3.3. Metrics trọng yếu và theo dõi qua nhiều vòng test

Không có một con số duy nhất nào có thể quyết định prototype thành công hay thất bại. Bạn nên thu thập các bộ metric hỗn hợp sau:

• Task success rate (TSR): Tỉ lệ người dùng hoàn thành nhiệm vụ mà không cần trợ giúp.
• Time-on-task: Thời gian trung bình hoàn thành một nhiệm vụ; so sánh với baseline nếu có.
• Error rate: Số lần người dùng thực hiện sai thao tác, thao tác thừa.
• Self-reported satisfaction: Sử dụng thang đo SUS hoặc các câu hỏi như “Bạn cảm thấy việc điều hướng màn hình này dễ 1-5.”

Trong quá trình nghiên cứu, bạn có thể lặp lại các vòng test trên cùng một flow sau khi đã cập nhật prototype. Việc dùng board naming rõ ràng sẽ giúp bạn biết chính xác phiên bản nào của prototype đã được test trong vòng nào, tránh nhầm lẫn khi đối chiếu kết quả.

4. Inspect handoff: Chuyển ngôn ngữ design sang code

Một trong những điểm mạnh nhất của Penpot là khả năng Inspect và tạo mã nguồn trực tiếp từ prototype, thậm chí ngay cả khi bạn đang xem một màn hình trong View mode. Với người dùng có quyền “Can inspect code”, họ có thể nhấp vào bất kỳ layer nào trên board, chọn tab Inspect và xem các giá trị CSS tương ứng. Cùng với việc hỗ trợ chuyển đổi thiết kế để làm việc với lập trình viên front-end, việc này giúp quy trình handoff trở nên mượt mà và ít sai sót.

4.1. Sử dụng Inspect/Copy CSS trong Penpot

Khả năng này được giới thiệu trong tài liệu Developer Tools của Penpot. Bạn có thể click vào một nút hoặc khung văn bản, xem thông tin về vị trí, kích thước, màu sắc, font chữ, khoảng cách lề, bo góc và cả các thuộc tính Flexbox được áp dụng. Penpot cũng cho phép bạn copy toàn bộ CSS đã chọn và dán trực tiếp vào editor code. Điều này rất hữu ích khi bạn cần kiểm tra nhanh xem thiết kế có đang tương thích với một thành phần cụ thể hay không.

Hãy lưu ý rằng CSS được tạo ra không phải lúc nào cũng tinh gọn như code viết tay. Nó mang tính mô tả trạng thái thiết kế chứ chưa tối ưu cho performance. Nhưng trong phạm vi prototype, điều này giúp developer nhanh chóng nắm được ý đồ thiết kế mà không phải tự ước lượng từ pixel. Bạn nên kết hợp nó với một design token hệ thống để duy trì sự nhất quán giữa môi trường thiết kế và code, như đã đề cập trong bài viết về design token và DTCG.

4.2. Bàn giao prototype cho developer: Kiểm thử responsive và visual QA

Có một lầm tưởng rằng chỉ khi thiết kế đã hoàn thiện 100% mới bàn giao cho developer. Thật ra, bạn nên bàn giao ngay khi prototype đã chạy được và các luồng chính đã được kiểm thử. Trong quá trình này, bạn có thể dùng Penpot cùng với các công cụ khác. Nếu bạn đang dùng những component mở rộng, hãy tham khảo thêm mô hình GrapesJS visual builder để hiểu cách component model hỗ trợ QA và handoff trong ngữ cảnh xây dựng web trực quan. Dù không phải là cùng một công cụ, nhưng tư duy chia component nhỏ, gán sự kiện, và kiểm tra responsive là tương đồng.

Trước khi bàn giao, hãy chạy visual QA trên từng board đại diện cho breakpoint mobile, tablet và desktop đã được thiết kế. View mode không tự chứng minh responsive behavior; designer phải chuẩn bị các biến thể cần thiết, kiểm tra fixed scroll, overlay tương đối và ghi rõ quy tắc thay đổi layout để developer triển khai.

4.3. Sự liên hệ với Material 3 và thiết kế có hệ thống

Nếu bạn đang làm việc theo ngôn ngữ thiết kế Material Design 3, các nguyên tắc về expressive UI/UX và accessibility cần được lồng ghép vào Prototype Penpot. Bạn cần đảm bảo màu sắc, tỉ lệ, spacing, và kiểu chữ tuân thủ một hệ thống cụ thể. Bạn muốn kiểm tra xem prototype có đạt các yêu cầu tương phản màu không? Đó là lúc cần tham khảo thêm Material 3 expressive UI/UX và cách tích hợp accessibility. Kết hợp nhiều công cụ cho phép bạn tạo ra một quy trình làm việc vừa chân thực vừa bền vững.

5. Những lưu ý về accessibility trong Prototype và cách tối ưu

Prototype không chỉ là nơi để thử nghiệm tương tác; đó cũng là nơi để đánh giá sơ bộ khả năng tiếp cận của thiết kế. Penpot giúp review tên layer, bố cục và tương phản ở mức thiết kế, nhưng không mô phỏng đầy đủ semantic HTML, ARIA hay thứ tự đọc của screen reader. Hãy đảm bảo bạn kiểm tra các yếu tố sau:

• Màu sắc và độ tương phản giữa nền và văn bản.
• Vùng click tối thiểu 44×44 px theo quy ước touch target của team cho các nút bấm.
• Kích thước chữ có thể đọc được trên thiết bị di động.
• Có khả năng phóng to nội dung trong View mode để xem chi tiết.

Trên prototype, bạn có thể mô phỏng thói quen của người dùng khi họ sử dụng bàn phím để điều hướng (tab, enter). Tuy nhiên, Penpot ở giai đoạn hiện tại có thể chưa tái hiện chính xác thứ tự tab – điều này thường chỉ có trong môi trường code thực tế. Vậy nên các designer thường phải kết hợp với một tài liệu hoặc một landing page mô tả chi tiết hành vi bàn phím.

Hãy nhớ: Prototype là bản khảo sát tương tác. Nó giúp bạn trả lời câu hỏi “Người dùng có hiểu luồng thao tác không?” chứ không phải thay thế các tool kiểm thử accessibility chuyên sâu.

6. Chia sẻ, Cộng tác và Lưu trữ Prototype trong Penpot

Penpot là công cụ mã nguồn mở, vì vậy bạn có toàn quyền kiểm soát dữ liệu của mình. Bạn có thể lưu trữ file trên máy chủ của riêng mình hoặc dùng bản cloud. Tính năng chia sẻ cho phép bạn quản lý các vai trò khác nhau cho từng thành viên. Trong quá trình, nhớ thường xuyên sử dụng chế độ comment để ghi chú các vấn đề phát sinh từ test. Hãy quy định rõ ai có quyền comment, ai có quyền inspect code, ai là editor để tránh việc ai đó vô tình sửa thiết kế trong buổi họp

6.1. Quản lý phiên bản (History) của prototype

Bạn nên tận dụng lịch sử phiên bản của Penpot để quay lại trạng thái trước một vòng test và giữ bằng chứng thay đổi. Trước mỗi vòng kiểm thử, tạo một bản snapshot tên rõ ràng (ví dụ: “Usertest_round1_after_signup_fix”). Như vậy bạn có thể so sánh giữa các phiên bản và trace được luồng cải tiến.

6.2. Thực hành tốt khi làm việc nhóm

Hãy đặt tên board, flow, và các layer theo một quy ước chung được cả team thống nhất. Sử dụng màu sắc cho các flow khác nhau có thể giúp mọi người dễ phân biệt khi nhìn sơ đồ Prototype. Khi chia sẻ link, đừng quên đính kèm hướng dẫn ngắn gọn: “Bắt đầu từ màn hình 01 – Onboarding, bấm nút tiếp tục 5 lần. Nếu bạn bấm nhầm, hãy dùng nút Back đã được designer gắn action Previous screen trong prototype.”

7. Kết luận

Penpot không chỉ là một công cụ vẽ UI miễn phí; nó là một nền tảng mạnh mẽ giúp bạn tạo prototype giàu tính tương tác ngay trong môi trường mở. Bằng cách nắm vững quy trình nghiên cứu, đặt câu hỏi test đúng, tổ chức board khoa học, sử dụng triggers và actions chính xác, cùng việc thiết lập các dòng overlay và animation hợp lý, bạn có thể đưa sản phẩm vượt xa khỏi màn hình thiết kế tĩnh. Điều này góp phần nói lời tạm biệt với những bản prototype rời rạc, thiếu kiểm chứng.

Hơn nữa, việc dùng thử ngay hôm nay và luyện tập theo những kịch bản cụ thể sẽ giúp bạn thành thạo nhanh hơn nhiều so với việc đọc tài liệu khoảng vài giờ. Bắt đầu từ những bài test 15 phút với một đồng nghiệp, ghi lại số lần click sai, và cập nhật prototype dựa trên kết quả đó. Bạn sẽ ngạc nhiên vì sự thay đổi rõ rệt trong chất lượng sản phẩm và hiệu quả làm việc nhóm sau mỗi vòng lặp.

Penpot là sản phẩm mã nguồn mở, có cộng đồng rất tích cực tại GitHub Repository của Penpot. Nếu bạn muốn theo dõi lộ trình phát triển, đóng góp ý tưởng hoặc tham gia dịch thuật tài liệu, đó là nơi bắt đầu tuyệt vời. Đồng thời, hãy tham khảo thêm các bài viết tại blog của chúng tôi để biến nơi đây thành bộ kỹ năng toàn diện cho công việc UI/UX hàng ngày. Đừng để dòng suy nghĩ “vẽ đẹp là đủ” che lấp đi giá trị lớn nhất của bạn: giải quyết vấn đề người dùng thông qua thiết kế có thể kiểm chứng được.

Bây giờ, hãy mở file dự án gần nhất của bạn, chọn một flow đơn giản, thêm 2-3 interaction và chạy thử một vòng test ngay. Sự thành thạo Penpot Prototype sẽ đến từ việc thực hành liên tục và không ngừng thu thập phản hồi. Chúc bạn tạo ra những prototype vừa đẹp vừa đúng nghĩa!