Khi chuyển qua công ty mới, mình cũng thay luôn công cụ design. Ở công ty cũ, mình chủ yếu dùng các sản phẩm của Adobe. Design website hay app cũng chỉ quay qua quay lại Photoshop và Illustrator (thời điểm đó XD của Adobe vẫn còn thiếu nhiều tính năng). Trong một số tác vụ cá nhân, mình cũng có dùng Sketch, tuy nhiên vẫn chỉ dừng lại ở việc tìm hiểu và thực hành là nhiều, không dùng trực tiếp vào công việc hàng ngày. Khi qua team mới, mọi người dùng Figma và mình cũng chuyển qua dùng công cụ này luôn. Sau khoảng hơn một năm sử dụng, mình thấy đây là một quyết định đúng đắn.
Bạn đang xem: Figma là gì
I. Tại sao mình lại chọn Figma làm công cụ design UI
Thật ra câu hỏi nên là ngược lại mới đúng. Tại sao lại không dùng Figma. Cá nhân mình thấy đây là một công cụ dễ học. Nếu bạn đã quen với Sketch hay Illustrator, bạn sẽ chỉ mất khoảng vài ngày để làm quen và khoảng hơn một tuần để thành thục các công cụ trong này. Ban đầu, mình chỉ sử dụng Figma cho các công việc trên công ty, song vì tính nhanh gọn và đơn giản, mình cũng sử dụng Figma trong một số công việc cá nhân khác. Và không chỉ ứng dụng cho UI design, thỉnh thoảng mình còn dùng Figma cho việc dàn trang project để đưa lên Behance, tạo nhanh các quảng cáo trên Facebook hay xử lý một số icon vector đơn giản…
II. Review sơ lược về Figma
Figma ra mắt năm 2016, thời điểm đó, Figma đã gây quỹ được khoản tiền 14 triệu USD. Với giao diện thân thiện và dễ sử dụng, Figma nhanh chóng nổi lên như một công cụ design UI phổ biến trong cộng đồng công nghệ toàn cầu. Một số brand lớn sử dụng Figma cho tới thời điểm hiện tại gồm có: Twitter, Microsolf, GitHub và Dropbox.
Khác với các công cụ trước đây, Figma là một công cụ design trên nền tảng đám mây (cloud-based). Figma có tính năng tương tự như Sketch, tuy nhiên hỗ trợ làm việc nhóm tốt hơn (vì là cloud-based). Dưới đây mình sẽ điểm qua một số tính năng quan trọng của Figma để mọi người có cái nhìn rõ hơn về công cụ này.
Figma có giao diện tương đồng với Sketch, giúp người dùng dễ dàng làm quen và sử dụng một cách nhanh chóng
a. Tính tương thích
Figma hoạt động tương thích trên tất cả các hệ điều hành có trình duyệt web, từ Macs, Windows, Linux đến Chromebooks đều có thể dùng Figma. Đây là công cụ design duy nhất có thể làm được điều này. Tất cả mọi người đều có thể chia sẻ, mở và chỉnh sửa một file Figma dễ dàng dù đang dùng hệ máy nào.
Trong nhiều công ty, designer thường dùng Macs trong khi đó developer lại dùng Windows. Figma giúp hai bên có thể hợp tác được dễ dàng hơn. Figma cũng giảm thiểu việc chuyển qua lại các file hình ảnh hay pdf giữa team design, account và khách hàng. Bây giờ tất cả mọi thứ đều trở nên dễ dàng hơn chỉ với một đường link.
Riêng với bản thân mình, trước đây mình đã phải mua thêm máy Mac chỉ để sử dụng Sketch. Và mỗi khi chuyển file thiết kế, mình phải cân nhắc xem người nhận đang dùng hệ điều hành nào để gửi loại file thích hợp. Giờ khi dùng Figma, mình đã không cần phải lo đến điều ấy.
b. Hỗ trợ làm việc nhóm hiệu quả
Figma là một công cụ browser-based, do đó mọi người trong team có thể làm việc với nhau tương tự như làm việc trong Google Docs. Với mỗi thành viên đang xem hoặc chỉnh sửa file, Figma đại diện bằng một avatar tròn trên thanh công cụ với tên riêng. Click vào avatar này bạn sẽ được thấy thành viên đó đang nhìn phần nào trên design. Chức năng này rất tiện khi bạn muốn biết ai đang làm việc trên file.
Click vào avatar để biết đồng nghiệp của bạn đang nhìn phần nào trên page
Làm việc nhóm kiểu thời gian thực như thế giúp design leader nhanh chóng nắm bắt được tình hình dự án và đưa ra những quyết định sửa đổi nếu có sai sót. Người dùng của Sketch không thể có những hỗ trợ nhanh chóng như vậy.Một số designer nhiều khi sẽ không quen với kiểu làm việc lúc nào cũng bị người khác “nhòm ngó” như thế.. Tuy nhiên hầu hết sẽ quen sau một thời gian dùng thử và được giải thích các lợi ích từ. Một số khác lại không thích thấy trỏ chuột của designer khác trên màn hình làm việc của mình, Figma cũng có một giải pháp cho chuyện này. Bạn có thể vào View -> Show Multiplayer Cursors, con trỏ chuột của người khác sẽ ẩn đi khi có nhiều hơn 1 người đang xem file.
c. Chia sẻ file đơn giản
Một khi bạn chia sẻ file Figma qua việc gửi link cho người khác, người nhận link sẽ có khả năng truy cập vào file đó. Nếu bạn lựa chọn Link to selected frame người nhận sẽ nhìn thấy chính xác frame bạn đang chọn lúc chia sẻ file. Mình rất hay dùng tính năng tiện dụng này khi chia sẻ một file phức tạp, có quá nhiều frame nằm trong một page.
Figma chia sẻ project, file, page và frame với bất cứ ai có quyền truy cập vào thông qua link
d. Hỗ trợ feedback tiện lợi
Figma hỗ trợ bình luận ngay trong app, cả trong chế độ design và prototyping. Ngoài ra comment còn có thể được theo dõi thông qua Slack hoặc email. Nếu bạn đã từng sử dụng các công cụ như Sketch kết hợp với Invision, Marvel, bạn sẽ thấy việc update design sau mỗi đợt feedback cũng ngốn của bạn không ít thời gian. Với chức năng comment ngay trong file thiết kế, Figma đã giải quyết được vấn đề trên một cách nhẹ nhàng.
Người dùng có thể vừa xem file, vừa nhận xét ngay trong cùng một màn hình với Figma
Trong các cuộc họp, thậm chí design team có thể thảo luận thiết kế trên màn hình lớn, ghi chú lại các comment và sửa file ngay lập tức, tất cả chỉ với Figma. Dạng live-feedback này không có trong Sketch – vốn cần phải upload mọi thứ lên cloud.
e. Công cụ mà các developer yêu thích
Figma hiển thị code snippets cho từng đối tượng được chọn. Code có thể hiển thị dưới dạng CSS, dành cho iOS hay Android. Thay vì sử dụng các công cụ của bên thứ ba, developer có thể inspect đối tượng ngay trên file trong lúc xem thiết kế. Mặc dù thế, nếu bạn muốn các thông số phức tạp hơn, bạn vẫn có thể sử dụng Zeplin. Figma đã hỗ trợ Zeplin rất tốt cho tới thời điểm hiện tại.
Developer có thể lấy các thông số để code ngay trong file Figma
f. Tất cả mọi thứ đều được lưu trữ online
Tất cả mọi thứ của bạn đề đã được lưu trữ trên cloud. Bạn sẽ không sợ mất file, hỏng máy hay hàng tá các vấn đề trời ơi đất hỡi khác. Bạn có thể sắp xếp file theo project, mỗi file lại được chia ra làm nhiều page tùy theo nhu cầu của bạn.
Quản lý file thiết kế với Figma
g. Plugin
Khi chuyển sang Figma, điều băn khoăn nhất của mình là plugin. Kho plugin của Sketch quá phong phú. Mỗi khi có một nhu cầu nào đó mình đều có thể tìm thấy đúng plugin cần thiết. Giai đoạn 2018, Figma vẫn chưa hỗ trợ plugin, đây là một điểm yếu lớn.
Tuy nhiên đến khoảng giữa năm 2019, Figma cuối cùng cũng đã tung ra kho plugin của riêng mình. Và ngạc nhiên là chỉ trong những ngày đầu tiên ra mắt, mình đã thấy kho plugin này quá đầy đủ.
Kho plugin của Figma đa dạng và vẫn tiếp tục được cập nhật
Có một điểm khác biệt giữa plugin dùng trên Sketch và Figma: sử dụng plugin trên Figma thì ít lỗi hơn. Cũng có thể mình ngày xưa mình dùng Sketch crack nên hay bị lỗi. Dù là gì thì trải nghiệm plugin trên Figma cũng là một trải nghiệm tuyệt vời. Thật tuyệt khi thấy mọi thứ được cải tiến và trở nên nhanh chóng lẫn thuận tiện hơn.
h. File versioning
Figma tích hợp sẵn chức năng file versioning. Chức năng này cho phép bạn lưu lại trang thái của file design bất kỳ lúc nào. Bạn, hoặc các thành viên trong team design có thể thoải mái sửa đổi mà không lo lắng về việc tracking các version.
Hiện tại chức năng này của Figma có hạn chế cho người dùng miễn phí. Bạn chỉ có thể xem lại lịch sử sửa file trong 30 ngày gần nhất. Tuy nhiên nó cũng giúp ích dù ít dù nhiều cho công việc design của bạn.
Có một tip nhỏ nếu bạn không thích sử dụng tính năng này nhưng vẫn muốn lưu lại nhiều version cho file design. Đó là hãy sử dụng từng page riêng khi muốn sửa đổi file design. Mỗi khi muốn xem lại version bất kỳ, chuyển sang trang thích hơp và mọi thứ đã sẵn sàng. Mặc dù không thể tiện lợi bằng file versioning, nhưng cũng đã giảm thiêu việc thất thoát version trong quá trình design. Tiện hơn là mọi thứ lại chỉ nằm trong 1 file duy nhất.
File version có thể được lưu thủ công hoặc tự động
Các file version được lưu lại có thể được khôi phục dựa theo ý muôn của designer và không ảnh hướng đến file gốc. File khôi phục có thể được ghi đè lên file gốc hoặc duplicate để tạo ra file mới.
i. Prototype tích hợp sẵn
Công cụ prototype của Figma được tích hợp trước cả Sketch. Với Figma, bạn không cần phải nhờ đến các công cụ hỗ trợ prototype như Invision hay Marvel, bạn cũng không cần phải export ra file hình để chuyển cho các bộ phận liên quan như trước đây.
Figma prototype làm việc tương tự như các công cụ khác, kết nối frame này với frame khác tạo ra prototyp hoàn chỉnh cho design của bạn.
Figma protoype có thể được chia sẻ như file design. Những người có link file Figma prototype đã được share có thể xem và trực tiếp comment, feedback được lưu lại trong panel và có thể track thông qua Slack. Developer cũng có thể xem workflow, gửi tin nhắn trực tiếp cho designer.
j. Chức năng Figma dành cho Team thuận lợi cho việc tạo Design System
Design system dần trở thành một phần thiết yếu cho nhiều công ty. Design system sử dụng các component (trong Sketch và Illustrator gọi là symbol) được tái sử dụng trong nhiều ngữ cảnh khác nhau. Các component này được tập hợp lại thành một thư viện sử dụng cho cả UI/UX designer và front-end developer.
Figma team library cho phép/ hoặc không cho phép truy cập vào các components và style
Một khi Figma team library được tạo, các thành viên trong team ngay lập tức có thể truy cập, xem và tái sử dụng các component này trong các dự án khác nhau. Lưu ý là các component này sẽ tự động cập nhật trên tất cả các file một khi có thay đổi từ người tạo.
Tổ chức các component trong Figma rất đơn giản và linh hoạt bằng việc sử dụng file và frame.
Cách tổ chức component trong Figma team library rất đơn giản. Designer có thể tạo một file riêng cho việc chứa các component, hoặc sử dụng các component sẵn có trên file design. Mỗi frame trong page Figma được hiểu là một section trong library, do đó bạn không cần phải đặt tên cho component dạng AA.aA.a.1…
Figma là một công cụ design hỗ trợ rất tốt cho việc teamwork. Đây cũng là một công cụ đơn giản, dễ sử dụng và gọn nhẹ so với các phần mềm cùng loại. Để rõ hơn, chúng ta sẽ đi đến phần đánh giá chi tiết Figam thông qua việc so sánh nó với Sketch và Adobe XD – hai phần mềm được đánh giá cao trong thời điểm hiện tại.
Xem thêm: Aka Là Gì – ý Nghĩa Của Từ Aka
III. So sánh Figma với Sketch, Adobe XD
a. Giới thiệu sơ lược về 2 phần mềm Sketch và Adobe XD
Sketch là một vector graphics editor, phát triển bởi công ty Bohemian Coding. Sketch được phát hành và ngày 7 tháng 9 năm 2010 cho macOS. Đây là phần mềm đoạt giải Apple Design Award năm 2012. Điểm khác biệt giữa Sketch và các vector graphics editor khác là Sketch không hỗ trợ chức năng in ấn. Sketch chỉ có trên macOS. Điểm yếu này có thể được hỗ trợ phần nào nhờ phần mềm của bên thứ 3 và các công cụ handofff.
Vào thời điểm xuất hiện ban đầu, Sketch nổi lên như một hiện tượng trong cộng đồng design. Tuy nhiên ngay sau đó, Figma và Adobe XD ra mắt và nhanh chóng là đối thủ cạnh tranh đáng gờm với các công cụ như prototyping hay làm việc online trực tiếp trên browser.
Adobe XD phát triển bởi Adobe Inc. XD ra mắt ngày 18 tháng 10 năm 2017, là một công cụ design UI/UX chạy trên nền tảng macOS và Windows. XD có phiên bản dành cho iOS và Android dùng để preview design trực tiếp trên thiết bị di động. XD còn hỗ trợ thêm chức năng wireframe và prototyping. Cũng giống như Sketch và Figma, XD có giao diện thân thiện, đơn giản và dễ sử dụng.
b. Giá cả
Giá cả là vấn đề lớn cho các freelancer lẫn những bạn làm việc trong công ty. Cả ba phần mềm đều có các discount dành cho các license giáo dục hoặc theo đợt, nên nếu muốn sắm cho mình license xịn, bạn nên chịu khó tìm kiếm nhé.
Figma: Miễn phí đối với người dùng cá nhân. Bạn có thể tạo 3 project free hoặc nâng cấp lên tài khoản premium 12 USD/ tháng.Sketch: 99 USD dùng trọn đời và được nâng cấp lên version kế tiếp. Nghĩa là nếu bạn mua phiên bản version 9.0 thì có nâng cấp lên 10.0. Nhưng đến bản 11.0, nếu muốn dùng, bạn phải mua tiếp.Adobe XD: có cả bản tính phí và miễn phí tùy thuộc bạn là người dùng cá nhân hay team. Phiên bản tính phí có giá từ 9.99 USD/ tháng
c. Nền tảng hệ điều hành
Mặc dù Sketch là công cụ rất nổi tiếng, song bạn bắt buộc phải sử dụng Mac để có thể đọc được file, điều này gây trở ngại cho developer vốn chủ yếu dùng máy Windows.
Figma: Chạy trực tiếp trên browser. Có app trên cả Windows và Mac. Tuy thế không dùng offline được.Sketch: chỉ có trên máy MacAdobe XD: Mac và Windows
d. Hỗ trợ làm việc nhóm
Google Docs từng thể hiện sự nổi bật của mình so với các công cụ Office của Microsoft nhờ vào tính năng live-collaboration. Và đến nay, Figma cũng làm điều tương tự khi cho phép người dùng khả năng làm việc online trực tiếp trên trình duyệt.
Figma: hỗ trợ live-collaboration rât mượt mà, dù bạn có đang dùng máy Mac, Windows hay thậm chí là Linux.Sketch: không hỗ trợ live-collaboration, tuy nhiên bạn có thể làm được việc này bằng plugin Picnic. Ngoài ra Sketch còn có thêm tính năng Sketch for Teams.Adobe XD: Tại sự kiện Adobe MAX 2019, Adobe đã ra mắt tính năng real-time Coediting.
e. Hỗ trợ cho lập trình viên
Các app được thiết kế riêng cho design UI gần đây được tích hợp sẵn các công cụ spec (kích thước, màu sắc, khoảng cách) dành cho developer.
Figma: hỗ trợ lấy code CSS, iOS, Android ngay trong panel bên phải chương trình.Adobe XD: tự động tạo CSS code snippet thông qua link
f. Làm việc ngoại tuyến
Figma: không có chế độ làm việc offline. Figma cũng không có kế hoạch thêm chức năng này vào app trong một tương lai gần.Sketch: có. Sketch từ khi phát hành đã là một app hoạt động offline.Adobe XD: có, tương tự Sketch.
g. Prototyping
Figma: Figma có hỗ trợ Prototyping. Gần đây Figma đã bổ sung thêm chức năng Smart Animate tương tự như Adobe XD. Figma cũng hỗ trợ Framer – một công cụ làm animation cho UI prototyping.Sketch: có hỗ trợAdobe XD: có hỗ trợ. Adobe XD thậm chí còn hỗ trợ prototyping bằng giọng nói và keyboard/gamepad.
h. Symbol
Symbol (trên Figma gọi là components) giúp công việc design trở nên đơn giản và nhẹ nhàng hơn. Bạn không còn cần phải chỉnh sửa qua lại hàng tá component giống nhau như trước đây nữa. Các app design UI hiện nay đều có hỗ trợ symbol.
Figma: hỗ trợ symbol tích hợp với state, constraints, và override.Sketch: symbol trong Sketch rất ấn tượng và vẫn đang tiếp tục được phát triển.Adobe XD: component có thể sử dụng trong một file hoặc link qua các file khác nhau. XD cũng hộ trợ tạo nhiều phiên bản khác nhau của component để hỗ trợ việc tạo interaction gọi là component states.
i. Kết luận
Nếu là cách đây khoảng 1-2 năm. Sketch có lẽ là lựa chọn tối ưu cho những ai làm UI design. Song với sự phát triển của các công cụ như hiện này, lựa chọn của bạn có lẽ sẽ mở rộng ra hơn. Bạn hoàn toàn có thể thay thế Sketch bằng Figma hoặc Adobe XD.
Với một ít tìm hiểu, bạn hoàn toàn có thể làm chủ được công cụ trong vòng trên dưới hai tuần. Tuy nhiên bạn cũng cần liên tục cập nhật kiến thức. Vì so với 1-2 năm trước, các tool trên cũng đã có những thay đổi đang kể, nếu không cập nhật thường xuyên, bạn sẽ dễ bỏ sót các chức năng mới.
IV. Các cập nhật nổi bật gần đây của Figma
a. Auto Layout
Auto layout là một trong những chức năng thú vị để Figma có thể bắt kịp Sketch. Auto layout giúp Figma có thể làm được những việc sau:
Button có thể thay đổi kích thước kèm với textThay đổi thứ tự các item trong listGiúp tạo ra UI có khả năng resize linh hoạt.Bạn có thể convert component sẵn có thành Auto lauout từ option menu hoặc tổ hợp phím “Shift + A”
Một số trường bạn có thể áp dụng Auto Layout:
Navigation (tưởng tượng đến mỗi lần bạn thêm hay bớt một mục xem, với auto layout, bạn sẽ tiết kiệm được một nửa thời gian đó)Card tin tức với kích thướng co dãn theo nội dungSắp xếp các block khác nhau theo chiều dọc trên thiết kế mobile. Với thiết kế mobile, mỗi lần chỉnh sửa một block, ta đều phải chỉnh lại khoảng cách theo chiều dọc. Điều đó sẽ dễ dàng hơn nếu ta áp dụng auto layout cho toàn bộ các block nội dung của trang.
b. Smart Animate
Smart animate tự động bổ sung transition vào các object giống nhau giữa hai frame. Bạn cũng có thể kết hợp Smart animate với các loại transition khác như Push, Move hoặc Slide để tạo nên các animation ấn tượng hơn. Đây là một chức năng hay, nhưng theo cá nhân người viết thấy, chức năng này chỉ thích hợp khi bạn làm các micro interaction, nếu áp dụng vào các trang lớn, bạn sẽ bị rối. Do mỗi interaction đơn giản bạn cũng cần phải làm hai, ba screen. Do đó người viết vẫn tạm thời vẫn trung thành với các chuyển động căn bản trong Figma.
c. Prototype nâng cao trong Figma
Ngay từ những ngày đầu tiên, chức năng prototype trong Figma đã là một điểm nhấn đáng chú ý. Nếu như với Sketch, bạn chỉ có thể thực hiện prototype với một công cụ khác như: Invision, Marvel, Flinto, Principle… thì với Figma, bạn có thể thực hiện điều này ngay trong phần mềm.
Xem thêm: Blog Là Gì – Cách Tạo Blog Với 5 Bước đơn Giản
Với một số cập nhật mới đây (tháng 8/2020) chức năng prototype của Figma lại ngày càng được nâng cao. Ví dụ thay vì chỉ có thể thực hiện 1 tương tác với một đối tượng, giờ đây bạn có thể thực hiện nhiều tương tác hơn. Cùng một hình ảnh, khi bạn quẹt sang phải màn hình sẽ tương tác khác, quẹt sang trái màn hình sẽ tương tác khác. Người viết bài cũng thấy rất bất ngờ với chức năng này và tự hỏi Figma có đang quá “tham” chức năng hay không khi mọi thứ một designer tưởng tượng ra đều được Figma lần lượt mang vào sản phẩm của mình.
Chuyên mục: Hỏi Đáp
