05 Jan 2022
admin

Thiết kế app ui/ux cực đơn giản và hiệu quả với figma

Trong một vài tác vụ cá nhân, mình cũng có dùng Sketch, mặc khác 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 mỗi 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 dùng, mình thấy đây là một quyết định đúng đắn.

Bài viết Thiết Kế Ui/ux Cực đơn giản Và Hiệu Quả Với Figma Là Gì thuộc chủ đề về Hỏi Đáp đang được rất nhiều bạn quan tâm đúng không nào !! Hôm nay, Hãy cùng vinaspar.co tìm hiểu Thiết Kế Ui/ux Cực đơn giản Và Hiệu Quả Với Figma Là Gì trong bài viết hôm nay nha !

Với vinaspar.co đội ngũ phát triển và designer hơn 10 năm kinh nghiệm đa lĩnh vực từ TMDT tới OTT bạn có thể an tâm phát triển app chất lượng tốt nhất và xu thế mới nhất hiện nay. Đươc đội ngũ Vinaspar tư vấn nhiệt tình và hẫu mãi tốt.

Các bạn đang xem nội dung : “Thiết Kế Ui/ux Cực đơn giản Và Hiệu Quả Với Figma Là Gì”

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 danh mục 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 vài tác vụ cá nhân, mình cũng có dùng Sketch, mặc khác 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 mỗi 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 dùng, mình thấy đây là một quyết định đúng đắn.

Bạn đang xem: Figma là gì, giới thiệu về figma

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ỉ 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 dùng Figma trong một vài công việc cá nhân khác. Và không những ứ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 vài 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 ra quỹ được khoản tiền 14 triệu USD. Với giao diện thân thiện và dễ dùng, Figma nhanh chóng nổi lên như một công cụ design UI thường nhật trong cộng đồng công nghệ toàn cầu. một vài brand lớn dùng Figma cho tới thời điểm hiện nay 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, mặc khác 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 vài 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 đơn giản làm quen và dùng một cách nhanh chóng

a. Tính tương thích

Figma vận hành 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 khả năng dùng Figma. Đây là công cụ design duy nhất khả năng làm được điều này. Tất cả mọi người đều khả năng chia sẻ, mở và chỉnh sửa một file Figma đơn giản dù đang dùng hệ máy nào.

Trong nhiều công ty, designer thường dùng Macs trong lúc đó developer lại dùng Windows. Figma giúp hai bên khả năng hợp tác được đơn giản 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 đơn giản 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ỉ để 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, vì thế mọi người trong team khả năng 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 vài 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ế.. mặc khác 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 vài 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 khả năng 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.

Bài Nổi Bật Geeky Là Gì - What Does Geeky Mean

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ẽ 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. mặt khác comment còn khả năng được theo dõi thông qua Slack hoặc email. Nếu bạn đã từng 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 khả năng 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 khả năng 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 xuất hiện 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 khả năng hiển thị dưới dạng CSS, dành cho iOS hay Android. Thay vì dùng các công cụ của bên thứ ba, developer khả năng 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 khả năng dùng Zeplin. Figma đã hỗ trợ Zeplin rất tốt cho tới thời điểm hiện nay.

Developer khả năng 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 khả năng sắp xếp file theo project, mỗi file lại được chia ra làm nhiều page tùy theo mong muốn 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á đa dạng. Mỗi khi có một mong muốn nào đó mình đều khả năng tìm thấy đúng plugin rất 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.

mặc khác đế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: dùng plugin trên Figma thì ít lỗi hơn. Cũng khả năng 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 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 khả năng thoải mái sửa đổi mà không lo lắng về việc tracking các version.

hiện nay chức năng này của Figma có Giảm cho người dùng miễn phí. Bạn chỉ khả năng xem lại lịch sử sửa file trong 30 ngày gần nhất. mặc khác 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 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 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 quy trình design. Tiện hơn là mọi thứ lại chỉ nằm trong 1 file duy nhất.

File version khả năng được lưu thủ công hoặc tự động

Các file version được lưu lại khả năng đượ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 khả năng đượ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 khả năng được chia sẻ như file design. Những người có link file Figma prototype đã được share khả năng xem và trực tiếp comment, feedback được lưu lại trong panel và khả năng track thông qua Slack. Developer cũng khả năng 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 dùng các component (trong Sketch và Illustrator gọi là symbol) được tái 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 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 khả năng truy cập, xem và tái 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 ngay từ người tạo.

Tổ chức các component trong Figma rất đơn giản và linh động bằng việc dùng file và frame.

Cách tổ chức component trong Figma team library rất đơn giản. Designer khả năng tạo một file riêng cho việc chứa các component, hoặc 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, vì thế 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ễ 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 nay.

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 khả năng đượ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. mặc khác 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ễ 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 nha.

Figma: Miễn phí đối với người dùng cá nhân. Bạn khả năng 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 dùng Mac để khả năng đọc được file, điều này gây ra 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, mặc khác bạn khả năng làm được việc này bằng plugin Picnic. mặt khác 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 vận hành 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 khả năng 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à phương pháp đâ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 khả năng 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 khả năng làm chủ được công cụ không quá trên dưới hai tuần. mặc khác 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 ngay đang kể, nếu không cập nhật nhiều, 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 số những chức năng thú vị để Figma khả năng bắt kịp Sketch. Auto layout giúp Figma khả năng làm được những việc sau:

Button khả năng thay đổi ngay kích thước kèm với textThay đổi thứ tự các item trong listGiúp tạo ra UI khả năng resize linh động.Bạn khả năng convert component sẵn có thành Auto lauout từ option menu hoặc tổ hợp phím “Shift + A”

một vài trường bạn khả năng á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ẽ đơn giản 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 khả năng kết hợp Smart animate với những 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. vì thế 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ỉ khả năng 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 khả năng 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 vài 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ỉ khả năng thực hiện 1 tương tác với một đối tượng, giờ đây bạn khả năng 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 danh mục của mình.

Chuyên mục: Hỏi Đáp

Các câu hỏi về Thiết Kế Ui/ux Cực đơn giản Và Hiệu Quả Với Figma Là Gì

Nếu có bắt kỳ câu hỏi thắc mắt nào vê Thiết Kế Ui/ux Cực đơn giản Và Hiệu Quả Với Figma Là Gì hãy cho chúng mình biết nha, mõi thắt mắt hay góp ý của các bạn sẽ giúp mình nâng cao hơn hơn trong các bài sau nha <3 Bài viết Thiết Kế Ui/ux Cực đơn giản Và Hiệu Quả Với Figma Là Gì ! được mình và team xem xét cũng như tổng hợp từ nhiều nguồn. Nếu thấy bài viết Thiết Kế Ui/ux Cực đơn giản Và Hiệu Quả Với Figma Là Gì Cực hay ! Hay thì hãy ủng hộ team Like hoặc share. Nếu thấy bài viết Thiết Kế Ui/ux Cực đơn giản Và Hiệu Quả Với Figma Là Gì rât hay ! chưa hay, hoặc cần bổ sung. Bạn góp ý giúp mình nha!!