Figma Mirror: xem thử thiết kế app trên điện thoại thật

Mirror Figma theo trang trợ giúp Figma (đọc ngày 30/10/2026): tab Mirror trong app Figma và figma.com/mirror, đặt frame đúng cỡ máy, chạy prototype trên điện thoại, checklist vùng bấm, cỡ chữ, vùng an toàn, gửi link prototype lấy góp ý và cách xử lý khi Mirror không hiện.

Trả lời nhanh: "Figma Mirror" ngày nay là tab Mirror trong app Figma trên điện thoại. Bạn chọn một frame cấp cao nhất trong file đang mở trên máy tính, mở tab Mirror trên điện thoại (cùng tài khoản), và frame đó hiện lên điện thoại, co theo chiều rộng màn hình, sửa trên máy tính thì điện thoại cập nhật ngay. Không cài được app thì vào figma.com/mirror bằng trình duyệt điện thoại. Muốn bấm thử cả luồng thì mở prototype trong app hoặc mở link prototype. Bảng dưới tóm tắt ba cách.

Các bước và tên tính năng trong bài lấy từ trung tâm trợ giúp Figma (help.figma.com) và trang app Figma trên App Store, Google Play, ColorME đọc ngày 30/10/2026; tên menu giữ tiếng Anh như Figma viết. Mình không mở Figma hay app trên điện thoại khi viết bài này, nên bài không có ảnh chụp màn hình; các hình là sơ đồ ColorME tự dựng, không phải giao diện Figma. Nếu bạn chưa rõ prototype là gì, đọc trước bài Prototype là gì trong thiết kế UI/UX.

Chọn một top-level frame trên máy tính, mở tab Mirror trong app Figma trên điện thoại: frame hiện ra và cập nhật khi bạn sửa. Ảnh: ColorME vẽ, không phải giao diện Figma; app Mộc Trà là ví dụ giả định.

"Figma Mirror" ngày xưa và bây giờ

Các trang trợ giúp Figma mình đọc không nhắc tới một app riêng tên "Figma Mirror"; Figma chỉ viết về Figma mobile app với một tab tên Mirror. Tên trên chợ ứng dụng vẫn giữ chữ này: Google Play ghi "Figma: view. comment. mirror.", App Store ghi "View Designs. Comment. Mirror.", và đường dẫn trên Google Play vẫn là com.figma.mirror.

Theo trang "Guide to the Figma mobile app", app dùng để tìm, xem và bình luận file, chạy thử prototype, và "Mirror selected frames and code layers from your desktop to a mobile device". Trang này cũng ghi rõ: "It's not possible to edit Figma Design files or Figma Slides decks using the mobile app." Bạn vẫn sửa trên máy tính; điện thoại để xem, bấm thử và bình luận.

Về máy hỗ trợ, trang trợ giúp ghi Figma cho iOS "Supported on devices running iOS 16 or later" và cho Android "Supported on devices running Android 8 or later". Trang App Store mình đọc cùng ngày lại ghi "Requires iOS 18.0 or later". Hai nguồn đang lệch nhau, nên trước khi cài bạn xem lại yêu cầu trên chợ ứng dụng của máy mình. Khi máy không cài được, Figma gợi ý dùng figma.com/mirror trên trình duyệt.

Vì sao phải xem trên điện thoại thật?

Một frame điện thoại phóng to trên màn 27 inch nhìn rất thoáng, nhưng cầm trên tay thì nút bấm có thể nhỏ hơn ngón tay, chữ phụ khó đọc, và phần trên cùng, dưới cùng màn hình bị tai thỏ, thanh điều hướng hay ngón cái che. Có ba thứ nên soi trên máy thật:

• Cỡ vùng bấm: WCAG 2.2 (W3C) đặt mức tối thiểu "at least 24 by 24 CSS pixels" ở tiêu chí 2.5.8 và mức nâng cao "at least 44 by 44 CSS pixels" ở tiêu chí 2.5.5. Hướng dẫn trợ năng của Android khuyên mỗi phần tử bấm được có vùng chạm "at least 48dpx48dp".
• Cỡ chữ: chữ chú thích, nhãn nút, giá trị trong bảng. Đọc thử ở khoảng cách cầm máy bình thường.
• Vùng an toàn: những gì nằm sát mép trên, mép dưới và hai góc. Xem trên máy thật là cách nhanh nhất để biết chỗ nào bị che.

Các con số trên lấy từ trang "Understanding SC 2.5.8" và "Understanding SC 2.5.5" của W3C và trang "Make apps more accessible" của Android Developers, đọc ngày 30/10/2026.

Ba mức vùng bấm vẽ đúng tỉ lệ: 24×24 và 44×44 CSS px theo WCAG 2.2, 48×48 dp theo Android Developers (đọc 30/10/2026). Hai ô dưới là ví dụ ColorME vẽ.

Bước 1: đặt frame đúng cỡ máy

Mirror hiển thị frame "scaled to the width of the device you are previewing it on", tức co theo chiều rộng điện thoại. Nếu frame của bạn rộng hơn màn hình thật, mọi thứ sẽ bị thu nhỏ lại khi xem, nút 48 thành nút nhỏ hơn, và bạn đánh giá sai. Vì vậy mình đặt frame đúng cỡ máy ngay từ đầu:

1. Chọn Frame tool, trong thanh bên phải mở nhóm preset Phone (Figma có các nhóm Phone, Tablet, Desktop, Presentation, Watch, Paper, Social Media...) và chọn đúng dòng máy bạn sẽ cầm để thử, hoặc máy gần nhất.
2. Bấm vào chỗ trống trên canvas để bỏ chọn, mở tab Prototype ở thanh bên phải, phần Device. Theo Figma, nếu bạn dùng frame preset, Figma sẽ chọn sẵn thiết bị khớp với preset đó.
3. Dựng giao diện bằng Auto Layout và constraints, để khi đổi sang máy rộng hơn hay hẹp hơn, nội dung co giãn đúng thay vì bị lệch.

Phần Device có thêm vài lựa chọn bạn nên biết:

Nguồn: trang "Set prototype device and background settings" và "Frames in Figma Design", đọc ngày 30/10/2026.

Các lựa chọn trong Prototype › Device và lý do nên đặt frame đúng cỡ máy: Mirror co frame theo chiều rộng điện thoại. Ảnh: ColorME vẽ theo help.figma.com.

Bước 2: mirror frame đang chọn lên điện thoại

Đây là phần "Figma Mirror" đúng nghĩa. Theo trang "View prototypes on a mobile device":

1. Đăng nhập Figma trên máy tính và app Figma trên điện thoại bằng cùng một tài khoản.
2. Mở file cần xem trên máy tính.
3. Chọn một top-level frame (frame cấp cao nhất, không phải layer con bên trong). Figma ghi rõ: "You must select a frame to mirror to a mobile device."
4. Trên điện thoại, mở tab Mirror của app.
5. App hiện frame đang chọn, co theo chiều rộng máy. Nếu frame đó thuộc một prototype, bạn bấm được sang các frame đã nối.

Ba điều kiện hay bị quên: trang trợ giúp ghi "Anyone with can edit access can mirror frames", nên người chỉ có quyền xem sẽ không mirror được; mục ai dùng được tính năng này ghi "All plans"; và hai máy không cần chung wifi: "You don't need to connect to the same wi-fi network to establish a connection between the two."

Cái hay nhất của Mirror là xem thay đổi theo thời gian thực ("View real-time edits to a frame on a mobile device"). Cách dùng gọn: dựng điện thoại cạnh bàn phím, chỉnh cỡ chữ hay khoảng cách trên máy tính rồi liếc sang, khỏi phải xuất ảnh gửi qua.

Không có app? Mở file trên máy tính, vào figma.com/mirror trên trình duyệt điện thoại, đăng nhập cùng tài khoản, rồi chọn frame.

5 bước mirror một frame và 4 điều kiện hay bị quên, theo trang trợ giúp Figma đọc 30/10/2026. Ảnh: ColorME vẽ.

Bước 3: chạy prototype trên điện thoại

Mirror xem từng frame; muốn bấm thử cả luồng (mở app, chọn món, đặt hàng...) thì chạy prototype. Frame phải có prototype connection mới bấm được. Trong app: mở file, bấm menu, chọn View prototypes; prototype chạy từ điểm bắt đầu của flow.

Prototype trên điện thoại có một thanh menu ẩn để đổi flow, chạy lại từ đầu, bật gợi ý hotspot, chia sẻ link hay thoát. Cách mở menu này hai trang trợ giúp ghi khác nhau: một trang ghi "double tap and hold anywhere on the screen", trang hướng dẫn app ghi "press and hold the screen with two fingers". Nếu cách này không được thì thử cách kia. Trong menu còn có chế độ Fixed (giữ tỉ lệ gốc của frame) và Responsive (theo constraints và Auto Layout).

Xem bằng link trên trình duyệt điện thoại cũng được, nhưng Figma lưu ý thanh địa chỉ và thanh dưới của trình duyệt vẫn hiện, chỉ bấm được qua hotspot, và nút quay lại của trình duyệt không dùng được. Prototype cũng không chạy offline trên điện thoại ("Prototypes cannot be played offline on mobile devices"), nên đi gặp khách thì nhớ kiểm tra mạng.

Checklist khi cầm máy thật

Danh sách nên đi qua mỗi lần xem một màn hình mới:

• Nút chính bấm trúng bằng ngón cái khi cầm một tay, không cần với.
• Các nút đứng gần nhau (icon trên thanh, chip lọc) không bấm nhầm sang nút bên cạnh.
• Chữ thân bài đọc thoải mái ở khoảng cách cầm máy, chữ chú thích vẫn đọc được.
• Không có chữ hay nút quan trọng nằm sát mép trên, mép dưới, hai góc.
• Độ tương phản đủ khi tăng độ sáng ngoài trời và khi giảm độ sáng trong phòng tối.
• Danh sách dài cuộn tự nhiên, header không che nội dung.
• Prototype đi hết luồng chính mà không kẹt ở màn nào.

7 thứ nên soi mỗi lần xem một màn hình trên máy thật: bấm, đọc, mép màn hình, luồng. Ảnh: checklist ColorME soạn.

Gửi link prototype để lấy góp ý

Đưa cho người khác cầm máy mới thấy chỗ họ bối rối. Theo trang "Share files and prototypes": mở file, bấm Present, trong presentation view bấm Share prototype, chỉnh quyền rồi Copy link. Người nhận mở link trên điện thoại là bấm thử được.

Vài điều cần biết về quyền xem, đều trích từ trang trợ giúp:

• Link chỉ chứa prototype "is available on paid plans". Ở gói Starter, người xem prototype vẫn mở được file gốc qua "Open in editor".
• Nếu file chia sẻ với quyền "Anyone", ai có link cũng xem được. Nếu không, Figma ghi người xem "will only need a free Figma account to view the file".
• Trong app, người xem có thể nhấn giữ một chỗ trên canvas để để lại bình luận, và nhận thông báo trả lời ở tab Activity.

Một vòng góp ý gọn: gửi link, nhờ người xem thử một nhiệm vụ cụ thể ("đặt một ly trà sen size M"), đọc bình luận, sửa trên máy tính, rồi mirror lại để kiểm tra trước khi gửi bản mới. Khi các nút và màu đã ổn định, gom chúng vào thư viện chung theo bài Design system trong Figma để các màn hình sau không phải chỉnh lại từ đầu.

Vòng góp ý: gửi link prototype, giao nhiệm vụ, đọc bình luận, sửa, mirror kiểm tra; bên phải là quyền xem link trích từ Figma. Ảnh: ColorME vẽ.

Mirror không hiện gì? Kiểm tra lần lượt

Trang trợ giúp của Figma gợi ý các bước sau khi app không chạy như ý:

• Máy có được hỗ trợ không (xem yêu cầu iOS, Android ở trên).
• Bạn đã chọn một top-level frame chưa. Layer con bên trong frame không mirror được.
• Máy tính và điện thoại có đăng nhập cùng một tài khoản không; có thể phải đăng xuất rồi đăng nhập lại.
• Thoát hẳn app rồi mở lại; nếu vẫn lỗi thì gỡ app và cài lại.

Một nguyên nhân nữa suy ra từ điều kiện quyền: nếu bạn chỉ có quyền xem file (ví dụ file người khác gửi), Mirror sẽ không chạy vì cần quyền "can edit". Hãy nhờ chủ file cấp quyền sửa.

5 câu hỏi khi tab Mirror không hiện frame, theo phần Troubleshooting của Figma và trang App Store đọc 30/10/2026. Ảnh: ColorME vẽ.

Mirror chỉ là bước kiểm tra cuối; thiết kế đẹp trên điện thoại bắt đầu từ lưới, cỡ chữ và component dựng đúng. Mới bắt đầu thì bài Figma là gì: lộ trình học Figma cơ bản là điểm xuất phát tốt. Muốn có người hướng dẫn từ wireframe tới prototype và nhận góp ý trực tiếp, bạn xem khóa học UI/UX của ColorME.

Câu hỏi thường gặp

Figma Mirror có còn không?

Các trang trợ giúp Figma (đọc 30/10/2026) không nói về app riêng tên "Figma Mirror"; tính năng nằm ở tab Mirror trong app Figma trên điện thoại, và ở figma.com/mirror trên trình duyệt điện thoại.

Có cần chung wifi giữa máy tính và điện thoại không?

Không. Figma ghi app chạy được bằng wifi hoặc dữ liệu di động, và không cần chung một mạng wifi để hai máy kết nối.

Vì sao tab Mirror không hiện frame?

Thường do chưa chọn một top-level frame trên máy tính, hai máy đăng nhập khác tài khoản, hoặc bạn chỉ có quyền xem file. Mirror cần quyền can edit.

Người không có tài khoản Figma xem prototype được không?

Được nếu file chia sẻ với quyền Anyone: ai có link cũng xem được. Nếu không chia sẻ công khai, Figma ghi người xem cần một tài khoản Figma.