---
title: PURE – Phương pháp đánh giá UX từ chuyên gia Google
slug: huong-dan-ve-wireframe-trong-figma
url: https://academy.telos.vn/huong-dan-ve-wireframe-trong-figma
generated_date: 2026-06-03 18:47:10
---

Wireframe là gì? Và tại sao người ta vẽ wireframe?
--------------------------------------------------

Trước khi bắt đầu vào phần quan trọng là hướng dẫn vẽ wireframe thì bạn cần biết sơ một tí xem wireframe là gì đã. Wireframe là bản phác thảo bố cục giao diện – thể hiện cấu trúc, vị trí các thành phần, và luồng chức năng của một màn hình hoặc trang, mà không đi vào chi tiết về màu sắc, hình ảnh, hay visual design.

Tên gọi “wireframe” (khung dây) xuất phát từ cách nó trông: những hình chữ nhật, đường kẻ, và placeholder text đại diện cho các vùng nội dung – tiêu đề, ảnh, button, navigation, form – đủ để truyền đạt ý định thiết kế mà không mất thời gian vào phần trình bày.

Một bài khác TELOS đã viết về wireframe bạn có thể xem ở đây: [Wireframe Là Gì?](https://academy.telos.vn/wireframe-khung-xuong-cua-thiet-ke/)

### 

![hướng dẫn vẽ wireframe](https://academy.telos.vn/wp-content/uploads/2020/10/Wireframe.png)

### Chức năng của wireframe

Wireframe phục vụ ba mục đích chính trong quy trình phát triển sản phẩm:

**Làm rõ cấu trúc và chức năng trước khi thiết kế.** Wireframe buộc người vẽ phải trả lời các câu hỏi cụ thể: Màn hình này có những thành phần nào? Chúng được sắp xếp theo thứ tự ưu tiên nào? Người dùng cần thực hiện hành động gì ở đây? Những câu hỏi này nếu để đến giai đoạn visual design mới giải quyết sẽ tốn nhiều thời gian chỉnh sửa hơn.

**Tạo nền tảng để các bên liên quan đồng thuận trước khi đầu tư thời gian.** Một wireframe có thể được vẽ trong 30 phút và trình bày cho team review. Nếu có vấn đề về flow hay cấu trúc, sửa ở giai đoạn này nhanh hơn rất nhiều so với sau khi đã hoàn thiện UI.

**Làm tài liệu đặc tả chức năng.** Wireframe kèm annotation (ghi chú) là cách hiệu quả để mô tả behavior của từng element – button này bấm thì chuyển đến đâu, field này validate như thế nào, trạng thái nào xuất hiện khi nào. Developer và QA đọc wireframe để hiểu yêu cầu chức năng, không chỉ nhìn vào UI đẹp.

### Giai đoạn nào trong quy trình phát triển sản phẩm thì wireframe xuất hiện?

Wireframe thường xuất hiện ở **giai đoạn define và design** – sau khi đã có đủ thông tin từ research (hiểu vấn đề người dùng, yêu cầu business) và trước khi bắt đầu visual design.

Trong quy trình Design Thinking, wireframe thuộc giai đoạn **Prototype** ở mức low-to-mid fidelity – đủ để test ý tưởng, chưa cần đầu tư vào visual.

Trong các team Agile, wireframe thường được tạo trong sprint planning hoặc trước khi bắt đầu sprint – để cả team developer và designer có chung hiểu biết về những gì sẽ được build.

![](https://academy.telos.vn/wp-content/uploads/2025/06/Wireframe-2.svg)

### Có phải lúc nào cũng cần vẽ wireframe không?

Không. Wireframe là công cụ, không phải bước bắt buộc. Có khá nhiều bài viết nói về việc này rồi, [bạn có thể ngó qua](https://medium.com/design-bootcamp/is-wireframing-really-necessary-in-the-design-process-8c9b0d7413e9)

Có những trường hợp wireframe không cần thiết hoặc thậm chí gây lãng phí thời gian:
- **Tính năng đơn giản, đã có pattern rõ ràng:** Thêm một field vào form sẵn có, thêm một item vào navigation – những thay đổi nhỏ không cần wireframe riêng, có thể mô tả bằng văn bản hoặc làm thẳng vào UI.
- **Team nhỏ, làm việc liền mạch:** Khi designer và developer làm việc rất sát nhau và đã có đủ context chung, đôi khi việc vẽ thẳng vào high-fidelity và điều chỉnh nhanh hiệu quả hơn.
- **Sản phẩm cần speed cao:** Ở một số startup giai đoạn đầu, ưu tiên là ship nhanh và iterate từ feedback thực tế – wireframe có thể bị bỏ qua để tiết kiệm thời gian.

Ngược lại, wireframe đặc biệt quan trọng khi: sản phẩm có luồng phức tạp nhiều bước, khi có nhiều bên liên quan cần đồng thuận về scope, hoặc khi thiết kế một tính năng hoàn toàn mới mà team chưa có reference.

Ai thường vẽ wireframe? Ai sẽ cầm wireframe?
--------------------------------------------

Wireframe không phải độc quyền của designer. Tùy môi trường công ty và quy trình làm việc, người vẽ wireframe có thể là:

**BA (Business Analyst), PO (Product Owner), PM (Product Manager):** Họ vẽ wireframe để mô tả yêu cầu chức năng – những gì cần có trên màn hình, flow người dùng cần đi qua – và chuyển cho designer thực hiện. Wireframe của nhóm này thường ở dạng low-fidelity, tập trung vào logic và chức năng hơn là layout.

**[Product Designer](https://academy.telos.vn/khoa-hoc-product-design-va-manage/) / [UI/UX Designer](https://academy.telos.vn/ui-ux-designer-la-gi-kham-pha-cong-viec-va-lo-trinh-hoc/):** Họ vẽ wireframe để khám phá và kiểm chứng giải pháp thiết kế trước khi đầu tư vào visual design. Wireframe của designer thường chi tiết hơn về bố cục, hierarchy, và interaction.

Trong nhiều team, cả hai nhóm đều vẽ – PM vẽ wireframe yêu cầu ban đầu, designer vẽ lại sau khi đã phân tích và có thêm góc nhìn UX. Không có cách nào là đúng tuyệt đối – điều quan trọng là wireframe phải được tất cả các bên liên quan đọc và đồng thuận trước khi chuyển sang bước tiếp theo.

**Ai sẽ cầm wireframe?** Về cơ bản, wireframe là tài liệu tham chiếu cho cả team trong suốt quá trình development: designer dùng nó làm foundation cho visual design, developer dùng nó để hiểu behavior và scope, QA dùng nó để kiểm tra chức năng.

Vẽ wireframe thường dùng những công cụ gì?
------------------------------------------

Có nhiều công cụ phổ biến để vẽ wireframe:
- **Miro:** Collaborative whiteboard, phù hợp cho wireframe nhanh và workshop nhóm. Ưu điểm là dễ dùng, không cần học nhiều. Nhược điểm là ít tính năng thiết kế chính xác hơn.
- **Whimsical:** Giao diện đơn giản, có sẵn component library cho wireframe. Phù hợp cho BA/PM không có nền tảng design.
- **Balsamiq:** Công cụ chuyên wireframe với style “sketchy” cố ý – giúp người xem không bị phân tâm vào visual và tập trung vào cấu trúc.
- **Giấy và bút (vật lý á):** Vẫn là cách nhanh nhất cho giai đoạn brainstorm ban đầu.

### Tại sao vẽ wireframe bằng Figma vẫn có nhiều lợi thế nhất

Dù các công cụ chuyên dụng có ưu điểm riêng, Figma vẫn là lựa chọn tốt nhất để vẽ wireframe cho phần lớn team product, vì một số lý do thực tế:
- **Không cần chuyển file.** Wireframe và high-fidelity design nằm trong cùng một công cụ. Khi wireframe được approve, designer có thể build visual design trực tiếp từ wireframe đó – không cần re-draw lại từ đầu trong tool khác.
- **Collaboration real-time.** Nhiều người có thể cùng nhìn và comment trực tiếp trên file, không cần export hay screenshot. PM comment ngay trên wireframe, designer sửa ngay trong Figma, developer xem link trực tiếp.
- **Component và Library có thể dùng lại.** Với Figma, wireframe có thể được build từ component đã có sẵn – sau này khi chuyển sang visual design, chỉ cần swap style, không cần vẽ lại layout.
- **Prototype ngay từ wireframe.** Figma cho phép tạo interactive prototype từ wireframe, đủ để test flow với người dùng mà không cần visual design hoàn chỉnh.
- **Handoff tích hợp.** Developer có thể inspect wireframe ngay trong Figma để đọc spec, không cần file riêng.

Có nhiều người vì thói quen và các công cụ khác sẽ không chọn sử dụng bằng figma, tuy nhiên khi hướng dẫn thì TELOS hay hướng mọi người về sử dụng Figma để vẽ wireframe, vì những lý do đã kể ở trên.

Hướng dẫn vẽ wireframe bằng Figma – từ cơ bản đến nâng cao
----------------------------------------------------------

### Cấp 1 – Shape cơ bản và Text Tool

Đây là cách tiếp cận tối giản nhất: dùng các hình dạng cơ bản (rectangle, line, ellipse) và Text Tool để phác thảo bố cục. Không cần biết nhiều về Figma để bắt đầu.

**Quy ước phổ biến khi vẽ wireframe theo cách này:**
- Hình chữ nhật trống = vùng nội dung (card, section, container)
- Hình chữ nhật có đường chéo X = vùng ảnh/media
- Text với font đơn giản (thường là gray hoặc đen) = label, heading, body text
- Hình chữ nhật bo góc có label = button
- Đường nằm ngang = divider hoặc input field
- Icon có thể thay bằng hình tròn nhỏ + label

Cấp này phù hợp với: người mới học Figma, BA/PM không có nền tảng design, hoặc bất kỳ ai cần vẽ wireframe nhanh để trình bày ý tưởng ban đầu. Tốc độ quan trọng hơn độ chính xác ở giai đoạn này.

**Giới hạn của cấp 1:** Khi cần chỉnh sửa layout – ví dụ thêm một section giữa trang, thay đổi khoảng cách giữa các element – người vẽ phải di chuyển thủ công từng element. Không có gì “hiểu” được mối quan hệ giữa các thành phần.

![hướng dẫn vẽ wireframe cấp 1 - vẽ phác thảo đơn giản](https://academy.telos.vn/wp-content/uploads/2026/05/Wireframe.png)

### Cấp 2 – Frame và Auto Layout

Frame và Auto Layout là hai tính năng làm thay đổi hoàn toàn cách quản lý layout trong Figma.

**Frame** không phải chỉ là hình chữ nhật. Frame là container có thể chứa các element khác bên trong, có clip content, và quan trọng hơn – có thể được gán Auto Layout.

**Auto Layout** là tính năng cho phép Figma tự quản lý khoảng cách và sắp xếp các element bên trong một frame theo chiều dọc hoặc ngang. Khi thêm hoặc xóa một element, các element còn lại tự điều chỉnh vị trí và khoảng cách.

Ví dụ thực tế: Nếu vẽ một navigation bar bằng cách xếp các button thủ công (cấp 1), mỗi lần thêm/xóa một item phải di chuyển lại tất cả. Với Auto Layout, chỉ cần thêm item vào frame – các item còn lại tự dịch chuyển, khoảng cách tự giữ đều.

**Ứng dụng Auto Layout trong wireframe:**
- **Section layout:** Wrap toàn bộ một section vào frame với Auto Layout dọc – các block nội dung tự xếp chồng và có khoảng cách đồng đều
- **Row layout:** Card, tag, button group – Auto Layout ngang giúp các item tự giãn nở
- **Responsive behavior:** Frame có thể được cấu hình để fill width – tự thay đổi kích thước khi frame cha thay đổi

Cấp này phù hợp với designer hoặc bất kỳ ai cần wireframe đủ sạch để trình bày với team và dễ chỉnh sửa theo phản hồi. Đây là cấp độ đủ để làm việc chuyên nghiệp với wireframe.

![Hướng dẫn vẽ wireframe cấp 2 - có dùng frame và autolayout](https://academy.telos.vn/wp-content/uploads/2026/05/Wireframe-1.png)

### Cấp 3 – Component

Component là tính năng cho phép tạo ra một element “gốc” (master component) và sử dụng lại nhiều bản sao (instance) trong toàn bộ file. Khi chỉnh sửa master component, tất cả instance tự động cập nhật theo.

**Tại sao dùng component khi wireframe?**

Trong một sản phẩm thực tế, nhiều element lặp lại xuyên suốt các màn hình: navigation bar, footer, card, form field, button, modal. Nếu vẽ thủ công từng lần (hoặc copy-paste), khi có yêu cầu thay đổi – ví dụ thêm một item vào navigation – phải vào từng màn hình để sửa.

Với component, chỉ cần sửa ở master component một lần, toàn bộ file cập nhật.

**Wireframe component library** là cách nhiều team setup: xây dựng một set component wireframe chuẩn (button, input, card, nav, modal, v.v.) dùng chung cho toàn bộ dự án. Figma Community có sẵn nhiều wireframe kit miễn phí có thể import và dùng ngay.

**Đây là cách tiếp cận tiêu chuẩn của designer** – vì họ đã quen với Figma và quen với tư duy component-based. Với designer, xây wireframe bằng component không chỉ là tốt cho wireframe, mà còn là bước chuẩn bị tự nhiên cho design system sẽ được xây dựng ở giai đoạn sau.

![hướng dẫn vẽ wireframe cấp 3 - có cả component và tái sử dụng](https://academy.telos.vn/wp-content/uploads/2026/05/Wireframe-2.png)

Vẽ wireframe cần lưu ý điều gì để wireframe tốt và đủ dùng?
-----------------------------------------------------------

Hồi trước tụi mình từng làm một workshop để nói về chủ đề này, chị giảng viên Dương Lê của lớp UX đã nói về nó siêu kỹ. Bạn có thể ngó sơ qua bài recap ở đây: [Recap Workshop Nghề Trong Người #12 – TELOS](https://academy.telos.vn/recap-workshop-nghe-trong-nguoi-12-telos/)

### Lưu ý 1 – Xác định mục tiêu của wireframe trước khi vẽ

Wireframe phục vụ mục đích gì sẽ quyết định độ chi tiết cần có.

**Vẽ nhanh** khi mục tiêu là: [brainstorm](https://academy.telos.vn/x2-hieu-suat-brainstorm-voi-cong-cu-figma/) nội bộ, khám phá nhiều hướng giải pháp, hoặc trình bày ý tưởng sơ bộ để lấy feedback ban đầu. Ở đây tốc độ quan trọng hơn độ hoàn chỉnh. Một wireframe “xấu” nhưng được vẽ trong 20 phút và giúp team align nhanh vẫn tốt hơn một wireframe đẹp mất 2 tiếng.

**Vẽ kỹ** khi mục tiêu là: làm tài liệu đặc tả cho developer, trình bày với stakeholder cấp cao, hoặc usability testing. Ở đây wireframe cần đủ chi tiết để người xem hiểu behavior mà không cần giải thích thêm – annotation, edge cases, trạng thái lỗi, empty states đều cần được thể hiện.

### Lưu ý 2 – Ngôn ngữ chung của team

Wireframe chỉ có giá trị khi tất cả các bên liên quan đọc được và hiểu đúng ý định người vẽ. Điều đó đòi hỏi một số quy ước chung trong team.

Nếu toàn bộ team đang dùng Figma, việc share wireframe trực tiếp trên Figma là lý tưởng – ai cũng có thể vào xem, comment, và đặt câu hỏi ngay trên file. Không cần chuyển đổi định dạng hay giải thích thêm về công cụ.

Nếu team có người dùng công cụ khác (Miro, Confluence, v.v.), cần xem xét: liệu có nên export ra PDF/image để share không, hay nên thống nhất về một công cụ chung. Việc “ai đó không quen Figma” là lý do hợp lý để xem xét lại công cụ – không phải lý do để design team làm việc kém hiệu quả hơn.

Ngoài công cụ, cũng cần thống nhất về quy ước visual trong wireframe của team: placeholder image trông như thế nào, màu nào là interactive element, annotation được đặt ở đâu. Không cần phức tạp – một trang guide đơn giản là đủ.

### Lưu ý 3 – Nếu bạn là người mới thì nên làm gì?

Nếu mới bắt đầu học wireframe, thứ tự thực hành hợp lý là:

**Bắt đầu từ việc trace lại giao diện có sẵn.** Chọn một app quen thuộc (Shopee, Zalo, Grab), vẽ lại wireframe của các màn hình chính bằng shape và text. Bài tập này giúp quen tay với Figma và hiểu cách các element được tổ chức trên màn hình, mà không phải lo về việc tự nghĩ ra bố cục từ đầu.

*Bạn có thể học theo một video hướng dẫn phân tách layer áp dụng autolayout mà [giảng viên Nhân Lưu đã up lên facebook.](https://youtu.be/lMWzmfUJXic?si=f5lndRdfpzR6yi5H)*

**Tiếp theo, thực hành từ brief.** Cho mình một yêu cầu đơn giản – ví dụ “màn hình đăng nhập của một app mua sắm” – và vẽ wireframe từ đó. Lúc này bắt đầu phải đưa ra quyết định về layout và hierarchy.

**Học Auto Layout sớm.** Đây là tính năng nhiều người học Figma bỏ qua lúc đầu vì có vẻ phức tạp, nhưng thực ra là thứ tiết kiệm thời gian nhiều nhất khi làm wireframe và design. Nên học trước khi có thói quen kéo element thủ công quá sâu.

**Xem wireframe thật từ dự án thực tế.** Figma Community có nhiều file wireframe công khai từ các designer. Xem cách họ tổ chức file, đặt tên layer, dùng component – những thứ này không có trong tutorial nhưng ảnh hưởng nhiều đến chất lượng làm việc thực tế.

Kết luận
--------

Wireframe là kỹ năng nằm ở giao điểm giữa tư duy sản phẩm và kỹ năng công cụ. Người vẽ wireframe tốt không chỉ biết dùng Figma – họ hiểu tại sao từng element xuất hiện trên màn hình, ai sẽ dùng nó, và thông tin gì cần có để team có thể tiếp tục làm việc từ bản wireframe đó.

Về mặt công cụ, Figma là môi trường phù hợp nhất để học và thực hành wireframe – vì những gì học được khi vẽ wireframe trong Figma sẽ dùng được trực tiếp trong các giai đoạn tiếp theo của quy trình thiết kế. Tại TELOS Academy, wireframe và các kỹ năng Figma cơ bản được đưa vào **[khóa Figma](https://academy.telos.vn/khoa-hoc-thiet-ke-giao-dien-voi-figma/).** Lớp này khá thú vị là có khá nhiều anh chị Business Analyst cũng tham gia học và đánh giá cao việc vẽ wireframe

Để hiểu sâu hơn về lý do wireframe tồn tại trong quy trình, biết khi nào cần wireframe và khi nào không, và cách wireframe phục vụ cho quyết định thiết kế sản phẩm – những nội dung đó thuộc về tư duy UX, và được học trong [**khóa UX nhập môn**](https://academy.telos.vn/khoa-hoc-nhap-mon-ve-ux-design/) tại TELOS Academy.

**Hoặc quan tâm học luôn nguyên lộ trình hông?**