Figma – Công cụ “prototype” và xây app ấn tượng

Thiết kế giao diện là quá trình cần sự thử nghiệm liên tục. Figma ra đời như một vị cứu tinh cho các Designer bởi những tính năng ấn tượng của nó. Tuy không phải là ứng dụng đi đầu trong xây dựng Prototype nhưng nó đã và đang trở thành công cụ tốt nhất. Hãy cùng TELOS tìm hiểu xem Prototype là gì và lý do khiến Figma trở thành ông vua trong việc xây dựng “Prototype”.

Bài viết liên quan:

• Figma – sau hơn một năm sử dụng của một UI designer
• Xây dựng một đội ngũ thiết kế và lập trình trong tổ chức với công cụ Figma làm trung tâm

Figma là công cụ prototype tuyệt vời được nhiều designer tin dùng

1. Prototype là gì

Prototype (hay tạo mẫu) là quá trình tạo một bản mô phỏng cho thiết kế của bạn. Hay có thể hiểu Prototype là quá trình thử nghiệm sản phẩm. Quá trình tạo Prototype đơn giản là bạn sẽ gắn link cho các button, các đường link… Liên kết các trang đã thiết kế thành một mô phỏng cho sản phẩm.

Đây là một công việc rất thú vị, giúp cho team của bạn và khách hàng có thể hình dung rõ ràng về sản phẩm. 

1.1. Tại sao Prototype lại quan trọng trong thiết kế app

• Nâng cao chất lượng sản phẩm
• Prototype cung cấp cho khách hàng một ý tưởng hoàn chỉnh về việc app của họ sẽ trông như thế nào. Cung cấp cho họ một cái nhìn tốt nhất về sản phẩm. 
• Prototyping cho phép bạn sắp xếp hợp lý quá trình phát triển của sản phẩm, tập trung hơn vào các yếu tố giao diện quan trọng.
• Ở giai đoạn prototype, bạn có thể xác định được những yếu tố không cần thiết và loại bỏ chúng để tránh mất thêm thời gian chỉnh sửa.
• Quá trình Prototype làm giảm đáng kể khối lượng công việc của Designer trong việc phát triển dự án, từ đó cũng làm giảm chi phí của khách hàng.
• Có Prototype, khách hàng và designer sẽ dễ dàng làm việc và có thể giảm thiểu những xung đột sau khi bàn giao sản phẩm. 
• Bạn sẽ “tự tin hơn” trong những buổi họp với khách hàng của mình

Prototype giúp designer dễ giao tiếp hơn với sếp, với khách hàng

1.2. Tiêu chí lựa chọn công cụ Prototype phù hợp

Với hàng trăm công cụ Prototype khác nhau như hiện nay, điều quan trọng nhất vẫn là lựa chọn công cụ đáp ứng đầy đủ những chức năng mà bạn cần. Tuy nhiên bạn nên tham khảo 4 tiêu chí dưới đây để lựa chọn công cụ phù hợp.

• Mục đích: Chính xác thì công cụ này làm gì? Các khả năng mà nó cung cấp có phù hợp với nhu cầu thử nghiệm cụ thể của bạn không?
• Dễ dàng tiếp cận: Quá trình Prototype yêu cầu cả sự hợp tác giữa team thiết kế, team Coder cũng như khách hàng của bạn. Vì thế một công cụ dễ dàng tiếp cận và sử dụng cho tất cả mọi người sẽ giúp cho quá trình này diễn ra một cách mượt mà nhất. 
• Tính đồng thời: Bao nhiêu người có thể sử dụng cùng lúc?
• Giá cả: Công cụ mất bao nhiêu chi phí để duy trì hoạt động? 

Figma đáp ứng đầy đủ những tiêu chí trên, biến nó trở thành công cụ mạnh mẽ nhất cho quá trình này. 

2. Giới thiệu về Figma

Figma là một ứng dụng thiết kế giao diện người dùng và xây dựng Prototype, nó hoạt động chủ yếu trên nền tảng web. Ngoài ra bạn cũng có thể sử dụng nó trong rất nhiều lĩnh vực liên quan trong ngành thiết kế đồ họa.

Figma là một trong những ông lớn trong hệ sinh thái ứng dụng thiết kế (design app) hiện nay

Figma được đánh giá là một trong những ứng dụng thiết kế mang tính cách mạng. Nó đang trỗi dậy một cách mạnh mẽ bởi những công dụng mà nó mang lại. Bạn có thể dễ dàng tham gia vì nó miễn phí cho đối tượng sử dụng cá nhân. 

Lý do khiến Figma trở thành công cụ UX/UI mạnh mẽ nhất hiện nay

Figma có nhiều điểm khác biệt so với các công cụ chỉnh sửa đồ họa hiện nay. Điểm khác biệt chủ yếu là vì nó hoạt động trực tiếp trên trình duyệt. Điều này đồng nghĩa với việc bạn có thể chỉnh sửa bản thiết kế của mình thông qua bất cứ nền tảng, thiết bị nào miễn là nó có kết nối Internet. Bạn có thể sử dụng Figma Online hoàn toàn mà không cần tải về máy tính. 

Một lý do khác khiến các Designer yêu thích ứng dụng này là Figma cung cấp một gói miễn phí phong phú với đầy đủ các tính năng, bạn có thể tạo và lưu trữ 3 dự án đang hoạt động cùng một lúc. Nó là quá đủ để bạn học hỏi, thử nghiệm và làm việc trong các dự án nhỏ.

Figma rất dễ làm quen và sử dụng, bạn có thể dễ dàng tiếp cận và sử dụng mượt mà chỉ trong vài giờ vọc phá. 

3. Figma – vị vua mới trong Vua mới trong xây dựng Prototype và thiết kế App

3.1. Không có công cụ nào hiệu quả hơn Figma cho thiết kế từ xa và làm việc theo nhóm

Như đã đề cập phía trên, Figma làm việc trên mọi nền tảng và thiết bị miễn là có kết nối Internet. Điều này thật sự cần thiết khi quá trình Prototype cần sự phối hợp giữa nhiều bên, sẽ thật tuyệt vời khi khách hàng vừa có thể ghi chú ý kiến của họ trên dự án thiết kế, vừa có thể theo dõi quá trình thiết kế để luôn theo kịp và hiểu những gì Designer đang làm. Tránh chỉnh sửa về sau gây mất thời gian và chi phí.

Với Figma, teamwork trở nên dễ dàng hơn bao giờ hết
(Nguồn: Zeta Design)

3.2. Future bắt đầu bằng chữ F, Figma cũng vậy

Figma là một trong những xu hướng hiện nay (và chắc chắn trong tương lai), đặc biệt là trong Thiết kế UI / UX. Minh chứng là rất nhiều công ty lớn đang sử dụng và xây dựng cộng động riêng của họ trên Figma. Sự cộng tác cũng đóng một vai trò quan trọng trong việc đưa ứng dụng này trở thành tương lai của thiết kế. 

Nếu bạn chưa biết, Figma cho phép các nhà phát triển xây dựng sản phẩm của mình bên trong nó (tương tự như App Store hoặc Google Play). Bạn có thể tìm thấy hàng loạt các Plugin hỗ trợ, Template và nhiều thứ hay ho khác.

Không chỉ dừng lại ở mảng thiết kế giao diện, Figma giờ đây được ứng dụng rất nhiều trong nhiều lĩnh vực khác nhau. Từ chỉnh sửa hình ảnh đến thiết kế banner, poster social media. Figma designs meme cũng tuyệt vời lắm nhe. 

3.3. Prototype chỉ với kéo và thả, đơn giản như Canva

Đây là một yếu tố khiến Figma dễ tiếp cận với đa số người dùng. Chức năng Prototype trên ứng dụng hoạt động dựa trên hành động kéo và thả. Đơn giản nhưng cực kì hiệu quả, bạn có thể tạo ra nhiều hoạt cảnh chuyên nghiệp chỉ với vài thao tác đơn giản.

Làm prototype dễ dàng với thao tác kéo, thả

3.4. Figma đảm bảo thân thiện môi trường

Nếu Figma là một sản phẩm vật lí, TELOS tin rằng nó thật sự thân thiện với môi trường. Bởi 3 đặc tính: Tiết kiệm, tái chế và tái sử dụng

Đầu tiên là tiết kiệm, có 3 yếu tố khiến chúng tôi nghĩ như vậy: 

• Không sử dụng bộ nhớ trên các thiết bị của bạn. Tất cả các File bạn tạo sẽ được lưu trữ đám mây. Bạn không cần phải tốn bất cứ chi phí nào cho việc lưu trữ. 
• Cung cấp phiên bản miễn phí, bạn có thể truy cập tất cả các tính năng của nó mà không phải trả bất kỳ chi phí nào, bao gồm cả các công cụ Prototype. Điều này thật sự có lợi cho những bạn mới bước vào nghề, bạn có thể bắt đầu dự án của mình, làm việc với khách hàng mà không cần trả bất kỳ chi phí nào cho công cụ. 
• Thời gian: Bạn có thể sử dụng một cách mượt mà chỉ trong 1 – 2 ngày. Thật sự rất dễ để tiếp cận. Nếu bạn chưa biết bắt đầu từ đâu để trở thành một UI / UX Designer. Học Figma đầu tiên sẽ là sự lựa chọn không tồi.

Tiếp theo là tái sử dụng, Figma cung cấp một chức năng là Components, giúp giảm thiểu các quy trình lặp đi lặp lại. Bạn chỉ cần tạo ra một Components và “tái sử dụng” lại nó cho các trang tiếp theo. Thật đơn giản phải không?

Figma Components giúp giảm thiểu các quy trình lặp đi lặp lại

Là Designer, việc lưu trữ những thiết kế cũ thật sự cần thiết cho sự nghiệp thiết kế của bạn. Có thể bạn sẽ cần dùng đến nó trong những dự án tương lai. Figma hỗ trợ bạn bằng cách không đưa ra bất kì giới hạn nào trong việc lưu trữ. 

3.5. Tùy chọn Interaction, Animation đa dạng nhưng dễ tiếp cận

Trong chế độ Prototype, tương tác (hay Interaction) là nơi bạn có thể chọn loại trình kích hoạt và hành vi. Phần hoạt ảnh (hay animation) là nơi bạn sẽ chọn kiểu và thời lượng hoạt ảnh.

Điều khiến bạn dễ dàng tiếp cận 2 công cụ này bởi tính dễ dàng tiếp cận của nó. Với Interaction, một số tùy chọn phổ biến như: 

• On Click: có nghĩa là tương tác sẽ xảy ra khi người dùng nhấp vào đối tượng hoặc frames mà bạn đã gán trình kích hoạt.
• While Hovering: tương tác của bạn sẽ bắt đầu khi người dùng di chuột trên đối tượng hoặc frames mà bạn gán trình kích hoạt. Nó sẽ trở lại trạng thái ban đầu khi người dùng di chuột xong.
• Mouse Enter/Mouse Leave: tương tác sẽ bắt đầu khi chuột đi vào hoặc rời khỏi đối tượng (hoặc  frames) đã chọn. 
• After Delay: tương tác này tự động xảy ra sau khi hết thời gian quy định, nếu độ trễ của bạn là 200ms thì tương tác sẽ bắt đầu sau 200ms. Chỉ frames mới có thể sử dụng loại tương tác này.

Hiệu ứng thực hiện bởi While Hovering interaction

Tương tự như Interaction, các Animation cũng khá dễ sử dụng. Figma cung cấp một số hoạt ảnh như:

• Instant: Frames hình sẽ thay đổi ngay lập tức, không có bất kì hoạt ảnh nào xảy ra
• Dissolve: Sự mờ dần của Frames hình 1 khi chuyển đổi qua Frames hình 2
• Move In/Out, Push, Slide In/Out: Những tùy chọn Animation phổ biến mà bạn dễ dàng bắt gặp ở bất kỳ đâu. Từ ứng dụng bạn hay xài tới PowerPoint. 

3.6. Hỗ trợ chế độ xem trực quan

Figma cho phép chúng ta xem bản thiết kế trông như thế nào ở nhiều định dạng kích thước khác nhau. Bạn có thể chọn nhiều thiết bị khác nhau, từ Smartphone cho đến máy tính bảng, laptop hoặc thậm chí cả đồng hồ thông minh. Chỉ cần điều chỉnh kích thước trang thiết kế phù hợp, Figma sẽ cho bạn biết chính xác sản phẩm của bạn sẽ xuất hiện trên các thiết bị như thế nào. 

Cuối cùng, nó còn có một chức năng nữa là có thể kết nối với Smartphone của bạn, đưa ra một cái nhìn trực quan nhất về thiết kế của bạn trên các thiết bị sẽ ra sao. 

3.7. Dễ dàng chuyển đổi giữa chế độ Design và chế độ Prototype 

Chưa bao giờ quá trình Sketching (phác thảo) đến prototyping lại đơn giản đến thế. Bạn chỉ cần click qua click lại giữa 2 chế độ design và prototype trong Figma. Nếu bạn sử dụng những phần mềm khác như Invision, bạn phải sử dụng cả Sketch, Abstract hoặc Zeplin.

Figma tích hợp tính năng của Sketch và Invision

4. So sánh Figma với một số công cụ xây dựng Prototype khác

4.1. Figma vs Sketch

Theo quá trình trải nghiệm của TELOS, chúng tôi nhận thấy rằng Figma vượt trội hơn trong việc xây dựng prototype. Minh chứng cho điều này:

• Cung cấp nhiều trình kích hoạt giao diện người dùng hơn: On Click, On Drag, While Hovering, Mouse Enter/Leave và một số tùy chọn khác. Trong khi đó Sketch chỉ cung cấp 1 trình kích hoạt duy nhất là On Click.
• Preview (bản xem trước) hoạt động ổn định hơn.
• Cả hai ứng dụng đều có các Animation cơ bản như Move In / Out. Nhưng Figma có thêm một tùy chọn là Smart Animate. Điều này cho phép bạn tạo các hoạt ảnh nâng cao mà Sketch chưa làm được. 

Figma “nốc-ao” Sketch.

4.2. Figma vs InVision

Về xây dựng Prototype, không có nhiều điểm khác biệt giữa cả 2. Với các Prototype từ trung bình đến phức tạp, Invision được cộng đồng đánh giá là phản hồi chậm.

Figma cũng từng có một số rắc rối liên quan đến hiệu suất hoạt động. Tuy nhiên, với một vài bản cập nhật, công cụ này đã trở nên nhanh hơn và hiện đang hiển thị các thiết kế một cách trơn tru, ngay cả khi nhiều người đang làm việc trên cùng một file.

Figma là người chiến thắng. 

Figma vẫn là “kẻ thắng cuộc” khi đứng trên bàn cân với InVision

Figma được xây dựng tất cả trong một. Với hệ thống tích hợp giữa Design và Prototype. Ứng dụng này đã và đang chứng minh được rằng mình là một ứng dụng hoàn hảo trong lĩnh vực thiết kế App và xây dựng Prototype. Nếu bạn có nhu cầu học Figma, TELOS cung cấp khóa học từ cơ bản đến nâng cao cho cá nhân và doanh nghiệp. Bạn có thể tham khảo ở link sau: https://telos.vn/course/khoa-hoc-thiet-ke-giao-dien-voi-figma/

Nguồn tham khảo:

1. Protopie
2. Inkoiq
3. UX Design
4. Ironhack