Hướng dẫn cách tạo prototype trong figma

Cách tạo prototype trong figma là một trong những kỹ thuật cơ bản đầu tiên mà mọi UX/UI designer cần biết. Với bài viết này, Cole sẽ hướng dẫn bạn thiết kế prototype một cách đơn giản với figma. 

Figma là gì?

Figma là một công cụ thiết kế có nền tảng điện toán đám mây tương tự như Sketch về chức năng và tính năng, nhưng có những khác biệt lớn giúp Figma hoạt động cộng tác nhóm tốt hơn. Hiểu một cách đơn giản, Figma giúp tối giản quy trình thiết kế và có hoạt động hiệu quả hơn các chương trình khác trong việc giúp nhà thiết kế và team của mình làm việc cùng nhau hiệu quả.

Ví dụ về prototype trong figma             

Tại sao bạn nên sử dụng Figma?

Figma là một trong những công cụ thiết kế phổ biến nhất hiện nay, chính bởi cơ chế hoạt động đa năng của mình:

Figma hoạt động tốt trên mọi nền tảng

Figma hoạt động trên mọi hệ điều hành chạy trình duyệt web như Mac, PC Windows, máy Linux và thậm chí cả Chromebook đều có thể được sử dụng với Figma. Đây là công cụ thiết kế duy nhất thuộc loại này có thể hoạt động tốt ngay cả khi sử dụng phần cứng chạy các hệ điều hành khác nhau, mọi người vẫn có thể chia sẻ, mở và chỉnh sửa các tệp Figma.

Trong nhiều tổ chức, designer sử dụng máy Mac và developer sử dụng PC Windows. Figma làm gì để giúp gắn kết các nhóm này lại với nhau? Bản chất phổ quát của Figma ngăn chặn sự khó chịu của PNG-pong (nơi các hình ảnh cập nhật được gửi qua lại giữa các nguyên tắc của nhóm thiết kế). Trong Figma, không cần có cơ chế trung gian để cung cấp các tác vụ thiết kế cho tất cả mọi người.

Cộng tác trong Figma rất đơn giản và quen thuộc

Vì Figma dựa trên trình duyệt nên các nhóm có thể cộng tác như trong Google Tài liệu. Những người xem và chỉnh sửa tệp được hiển thị ở đầu ứng dụng dưới dạng hình đại diện hình tròn. Mỗi người cũng có một con trỏ được đặt tên nên việc theo dõi ai đang làm gì rất dễ dàng. Nhấp vào hình đại diện của người khác sẽ phóng to nội dung họ đang xem vào thời điểm đó.

Thao tác đơn giản với giao diện figma

Khi sử dụng Figma, trưởng nhóm thiết kế có thể kiểm tra xem nhóm đang thiết kế gì trong real-time bằng cách chỉ cần mở một tệp được chia sẻ. Nếu một designer bằng cách nào đó hiểu sai bản tóm tắt hoặc câu chuyện của user, thì tính năng này cho phép designer can thiệp, điều chỉnh hướng đi và tiết kiệm vô số thời gian mà lẽ ra có thể bị lãng phí.

Figma chia sẻ một cách dễ dàng và linh hoạt

Figma cũng cho phép chia sẻ dựa trên quyền đối với bất kỳ tệp, page hoặc frame nào (được gọi là artboard trong các công cụ thiết kế khác). Khi liên kết chia sẻ được tạo cho một frame trên một trang, người nhấp vào liên kết đó sẽ mở phiên bản trình duyệt của Figma và chế độ xem phóng to của frame sẽ được tải.

Với hình thức chia sẻ có chọn lọc này, từ tệp đến frame, cho phép các designer, product owners và developers chia sẻ chính xác những gì cần thiết trong các công cụ tracking và phần mềm cộng đồng như Confluence hoặc SharePoint.

Tệp Figma nhúng cung cấp cập nhật theo real-time

Figma cũng chia sẻ các đoạn mã nhúng trực tiếp để dán iFrame vào các công cụ của bên thứ ba. Ví dụ: nếu Confluence được sử dụng để hiển thị các tệp mô phỏng được nhúng thì các tệp đó sẽ không được “cập nhật” bằng cách lưu tệp Figma – các tệp được nhúng đó là Figma file.

Nếu bất kỳ ai trong Figma thực hiện một thay đổi đối với mô hình, thì thay đổi đó có thể được nhìn thấy trực tiếp trong mô hình Confluence được nhúng.

Sự thuận tiện của figma

Figma giúp sự chuyển giao của developer được tạo điều kiện thuận lợi

Figma hiển thị đoạn code trên bất kỳ frame hoặc object được chọn nào ở định dạng CSS, iOS hoặc Android để nhà phát triển sử dụng khi xem xét tệp thiết kế. Bất kỳ developer nào cũng có thể kiểm tra các thành phần thiết kế trong bất kỳ tệp nào mà họ có thể xem. Không cần sử dụng công cụ của bên thứ ba để lấy thông tin. Mặc dù vậy, Figma vẫn tích hợp đầy đủ với Zeplin nếu các nhóm muốn thực hiện nhiều thao tác hơn ngoài việc đo lường và hiển thị CSS đơn giản.

File Figma được lưu trữ online

Vì Figma là một ứng dụng trực tuyến nên nó xử lý việc sắp xếp file bằng cách hiển thị các dự án và file của chúng trong chế độ xem chuyên dụng. Figma cũng hỗ trợ nhiều trang trên mỗi file, như Sketch, vì vậy các Agile team có thể sắp xếp các dự án của mình một cách hợp lý:

• Tạo 1 dự án cho feature theme
• Tạo 1 tệp cho một tính năng lớn
• Tạo các trang trong tệp đó cho mỗi story của user

Đây chỉ là một phương pháp sắp xếp các file có thể được thực hiện chi tiết hơn hoặc ít hơn tùy thuộc vào yêu cầu của quy trình.

Lưu trữ dễ dàng với figma

Tạo prototype trong Figma rất đơn giản và trực quan

Trong khi Sketch gần đây đã thêm artboard vào nguyên mẫu artboard thì Figma đã tiến xa hơn bằng cách cung cấp các hiệu ứng chuyển tiếp giữa các khung. Tính năng tạo mẫu đơn giản của Figma giúp loại bỏ sự cần thiết của một công cụ khác thực hiện tạo mẫu theo phong cách trình chiếu, chẳng hạn như InVision hoặc Marvel. Khi tất cả những gì cần thiết là một bản trình bày đơn giản với các hiệu ứng chuyển tiếp thì không cần phải xuất sang các công cụ đánh giá khác.

Hướng dẫn cách tạo prototype trong Figma

Nếu đây là lần đầu tiên bạn sử dụng Figma để tạo mẫu, tham khảo ngay 11 bước trong quy trình tạo prototype trong Figma ngay dưới đây:

1.Truy cập các tùy chọn tạo mẫu:

Điều đầu tiên bạn cần làm sẽ là hoạt động trong tab “Design”  của Properties panel (khu vực bên phải cửa sổ). Đã đến lúc nhấp vào tab “Prototype”.

Giao diện khởi tạo prototype ban đầu

2.Đổi tên các frame trong luồng ứng dụng của bạn:

Trước khi tạo bất kỳ prototype nào, bạn nên đảm bảo frame của mình có tên riêng biệt. Tham khảo cách đặt tiêu đề mô tả cho ba màn hình của mình: “Login Screen”, “Photo Stream” và “Photo Post” dưới đây. Để đổi tên frame, tất cả những gì bạn cần làm là nhấp đúp vào nhãn của nó ở góc trên bên trái của mỗi frame, nhập tên mới và nhấn Enter. Bạn cũng có thể đổi tên frame trong bảng điều khiển Layers ở bên trái.

Bấm vào tiêu đề frame để đổi tên

3.Đặt frame bắt đầu:

Tạo prototype trong Figma hoạt động bằng cách tạo liên kết giữa các frame và các thành phần trong frame. Khi trình bày prototype, người dùng có thể nhấp vào các phần tử được liên kết để di chuyển xung quanh ứng dụng.

Trước tiên, chúng ta cần thiết lập màn hình nơi bắt đầu user experience (UX) – trải nghiệm người dùng. Nhấp vào frame “Login Screen” đã thiết kế trong bảng điều khiển Layers và sau đó bạn sẽ thấy các tùy chọn thay đổi trong tab Prototype của bảng Properties ở bên phải. Sau đó nhấp vào biểu tượng “+” ở bên phải nơi ghi “Flow starting point” trong bảng Prototype.

Lựa chọn frame bắt đầu

4.Khởi tạo một kết nối:

Nếu chúng ta chọn Frame hoặc các thành phần cụ thể trong Frame của mình trong khi tab Prototype đang mở, chúng ta sẽ có thêm một tay cầm hình tròn ở cạnh bên phải của mọi đối tượng. Tay cầm này cho phép chúng ta thiết lập màn hình mà đối tượng sẽ dẫn đến khi chạm vào.

Hãy sử dụng điều này để tạo kết nối. Đầu tiên, chọn nút “Sign In” trong Login Screen của bạn. Sau đó nhấp và giữ vào tay cầm hình tròn đó và kéo mũi tên qua Photo Stream để tạo kết nối. Khi người dùng nhấn vào nút “Sign In” trong prototype, họ sẽ được đưa đến màn hình “Photo Stream”.

Cách tạo connection trong prototype

Sau khi bạn thực hiện kết nối thành công, một pop-up nhỏ sẽ xuất hiện xác nhận cách tương tác sẽ hoạt động. Hãy xem qua các tùy chọn thả xuống ở đây. Nếu bạn đã nhấp vào, bạn có thể làm cho pop-up này xuất hiện trở lại bằng cách nhấp vào mũi tên kết nối màu xanh nhạt kéo dài từ nút “Sign In” đến Photo Stream Frame.

5.Tạo kết nối khác:

Bây giờ bạn hãy lặp lại quy trình bằng cách liên kết một trong các ảnh trong Photo Stream với Photo Post Frame. Chỉ cần nhấp vào ảnh con hồng hạc và kéo tay cầm kết nối qua Photo Post Frame.

Tạo connection giữa các frame

6.Tạo kết nối cho nút bấm “Back”:

Lặp lại quy trình này một lần nữa để tạo kết nối từ biểu tượng “Home” mà ta đã tạo trong thanh điều hướng đến trang Photo Stream. Đây là chức năng khá thô sơ nhưng nó sẽ giúp user của bạn cảm nhận được cách họ sẽ di chuyển xung quanh ứng dụng.

Tạo connection cho nút bấm “Back”

7.Setup page Profile:

Nhân đôi Photo Post Frame của bạn bằng cách chọn frame đó và nhấn ⌘D (Mac) hoặc CtrlD (PC). Bạn có để ý rằng khi bạn sao chép frame, kết nối từ nút “home” cũng được chuyển sang frame mới không? Mọi kết nối bắt nguồn từ frame nhân bản cũng sẽ được sao chép.

Trong trường hợp này, nếu muốn giữ một kết nối có từ nút “Home” đến trang Photo Stream và bạn muốn xóa liên kết giữa các màn hình, chỉ cần nhấp vào mũi tên kết nối và nhấn “Delete” trên bàn phím.

Thiết lập page Profile

8.Xây dựng profile page:

Giờ là lúc tạo một Profile page đơn giản sẽ kết nối với nút Profile trong thanh điều hướng lúc cuối cùng. Chọn mọi thứ trong bản sao của màn hình Photo Post ngoại trừ workmark và thanh điều hướng, sau đó xóa nó. Khi tạo profile page, bạn cần lưu ý:

• Profile picture ở giữa trên cùng xuất phát từ Photo Post screen.
  Hai nút này là bản sao của nút “Sign In” trên Login Screen.
• Ba bức ảnh động vật được lấy từ Photo Stream.

Ngoài ra, bạn sẽ cần các text boxes, lines, hình elip và một số cột để giúp phân phối các elements này một cách hợp lý.

Thiết lập page Profile

9.Tạo kết nối với Profile:

Bước cuối cùng là tạo kết nối tới Profile screen:

• Nút biểu tượng profile trên Photo Stream, liên kết với Profile Frame
• Nút biểu tượng profile trên Photo Post, liên kết với Profile Frame
• Biểu tượng trang chủ trong Profile Frame hẳn đã được liên kết trở lại Photo Stream, bạn có thể kiểm tra lại lần nữa để chắc chắn.

Tạo kết nối với profile và frame trước đó

10.Test prototype của bạn:

Bạn có thể khởi chạy prototype của mình bằng cách nhấn nút “Present” ở phía trên bên phải giao diện Figma. Hãy thực hiện việc này ngay bây giờ để kiểm tra xem tất cả các kết nối của bạn có hoạt động như kế hoạch không!

Test prototype trên màn hình thiết bị thật

Khi ở tab “Prototype”, hãy chọn “iPhone SE” từ menu thả xuống trong phần “Device”. Sau đó, chỉ cần nhấp lại vào nút “Present”! Một trong những lợi thế của việc sử dụng mô phỏng như thế này là nó mang lại trải nghiệm chính xác hơn về kích thước và tỷ lệ của các thành phần trên màn hình thực của thiết bị.

11.Chia sẻ prototype của bạn:

Để chia sẻ thiết kế của bạn dưới dạng prototype, hãy sao chép liên kết từ thanh địa chỉ của trình duyệt khi bạn đang ở chế độ “Present” và gửi liên kết đó qua email hoặc tin nhắn tức thì.

Vậy là bạn đã biết cách tạo prototype trong figma. Đây là phần mềm quen thuộc với mọi UX/UI designer mà bạn có thể tự học các kỹ năng cơ bản qua tutorials. Theo dõi Cole, tham gia ngay khóa học ba để cập nhật những kiến thức công nghệ hữu ích mới nhất. 

>> Xem thêm: Hướng dẫn chinh phục chứng chỉ CBAP cao cấp