Figma – sau hơn một năm sử dụng của một UI designer

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.

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…

Khóa học figma của team TELOS. Các kiến thức rất căn bản và nền tảng

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

1. 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.

2. 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.

3. 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

4. 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.

5. 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

6. 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

7. 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.

8. 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.

9. 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.

10. 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.

III. So sánh Figma với Sketch, Adobe XD

1. 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.

2. 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

3. 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 Mac
• Adobe XD: Mac và Windows

4. 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.

5. 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.
• Sketch: có công cụ hỗ trợ handoff riêng, tên là Cloud Inspector. Thậm chí Sketch còn có cả một công cụ miễn phí thay thế là Sketch measure. Link: https://github.com/utom/sketch-measure
• Adobe XD: tự động tạo CSS code snippet thông qua link

6. 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.

7. 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.

8. 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.

9. 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

1. 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 text
• Thay đổi thứ tự các item trong list
• Giú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 dung
• Sắ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ạn có thể xem thêm trong video: Link

2. 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.

Bạn có thể xem thêm trong video: Link

3. 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.

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.

Sử dụng nhiều tương tác hơn chỉ với một đối tượng được chọn (cập nhật tháng 8/2020)

Thêm vào nữa, Figma cũng vừa ra thông báo bổ sung Custom Eases vào chức năng Prototype. Nếu như trước đây bạn đã quá nhàm chán với việc thể hiện những chuyển động đều đều hoặc muốn tự tay điều chỉnh biểu đồ chuyển động, Figma hiện đã có thể thỏa mãn được bạn.

Prototype trong Figma sẽ không còn những chuyển động đều đều chán ngắt…

Với Custom Ease, bạn có thể thực hiện điều chỉnh các chuyển động trước đây chỉ có thể làm trong các công cụ khác như Principle hay Flinto.

Và như mọi lần cập nhật chức năng mới, Figma đều có hướng dẫn tỉ mỉ thông qua các tài liệu và document. Bàn hoàn toàn có thể học theo một cách dễ dàng.

Video hướng dẫn về Custom Ease bạn có thể xem tại link

Bài viết về Custom Ease bạn có thể xem tại link

V. Một số mẹo khi sử dụng Figma

Figma cũng như các app design UI khác, thay đổi rất nhanh, song song vào đó cũng có rất nhiều tips tricks hiệu quả. Dưới đây là một trong số đó

1. Thay đổi kích thước frame mà không bị ảnh hưởng bởi constraint

Với chức năng constraint, bạn có thể gắn đối tượng cố định vào bên trái, phải, ở giữa hoặc thay đổi kích thược theo frame chính. Constraint là một trong những chức năng tuyệt vời của Figma. Tuy nhiên, thỉnh thoảng bạn sẽ muốn bỏ qua chức năng này. Cách đơn giản nhất là bấm phím ⌘ trong khi thay đổi kích thước của frame. 

Paste code SVG thay vì kéo thả hay import

Nếu bạn mở file SVG trong text editor hoặc browser, bạn có thể copy và paste code này trực tiếp vào Figma thay vì download file đó xuống rồi lại upload lên. Nếu bạn tối ưu file SVG trên một số công cụ online như SVGOMG, sẽ có lựa chọn để bạn có thể copy code này vào clipboard.

2. Figma mirror

Có thể bạn không biết Figma có app tên là Figma Mirror trên iOS lẫn Android. App này cho phép bạn prevew design ngay trên thiết bị di động một cách nhanh chóng.

Thậm chí bạn cũng có thể dùng app này trực tiếp trên trình duyệt điện thoại tại link: https://www.figma.com/mirror

3. Điều chỉnh nudge mặc định

Nudge Amount là khoảng di chuyển khi bạn bấm vào các nút điều hướng trên bàn phím để di chuyển đối tượng. Ví dụ với các design system lấy 8px làm khoảng cách chuẩn, bạn có thể set Big nudge thành 8 để khoảng cách giữa các đối tượng luôn là bội của 8, tăng tính đồng bộ cho thiết kế.

4. Paste ảnh trực tiếp vào shape

Bạn có thể paste ảnh trực tiếp từ clip vào shape một cách dễ dàng. Đây là chức năng mới thêm vào của Figma. 

5. Đo khoảng cách

Giữ phím alt/option trong khi di chuột lên trên đối đượng khác sẽ cho bạn biết khoảng cách giữa hai đối tượng.

6. Tìm tất cả các lệnh trong Figma

Nếu bạn muốn gõ các lệnh trong Figma thay vì click vào menu, bạn có thể search bằng tổ hợp phím ⌘ + /. Mẹo này rất thích hợp mỗi khi bạn cần gọi lên một plugin bất kỳ.

7. Chọn đối tượng có cùng thuộc tính

Bạn có thể chọn các đối tượng có cùng thuộc tính fill, font hoặc text. Bạn cũng có thể chọn tất cả các duplicate của một component. Ví dụ, nếu bạn muốn thay đổi font chữ, bạn có thể chọn tất cả các object có cùng font cũ, sau đó thay đổi sang font mới.

8. Phím tắt

Sử dụng phím tắt là một trong những cách nhanh nhất để tăng năng suất làm việc. Và Figma có rất nhiều phím tắt như thế. Bạn có thể quen với các phím như: o để vẽ hình oval, r để vẽ hình chữ nhật, l để vẽ được thẳng hoặc t để gõ một đoạn text.

Sau đây là một số tổ hợp phím hữu ích:

• F: vẽ frame
• Option + 1 hay 2: chuyển đổi qua lại giữa layer panel và library
• Option + 3: đến team library modal
• Option + 8/9/0: chuyển đổi qua lại giữa tab design/prototype/code
• Shift + x: chuyển đổi qua lại màu giữa fill và stroke
• I: pick màu
• Shift + v: flip theo chiều dọc
• Shift + h: flip theo chiều ngang
• ⌘ + option + k: tạo component
• ⌘ + option + b: bỏ link giữa component và đối tượng

Nếu bạn thích các emoji trong design và đang sử dụng mac, đây là tổ hợp phím tắt để gọi ra các emoji: ⌘ + control + space.

Nếu bạn muốn nhiều tổ hợp phím hơn nữa, bạn có thể bấm phím vào biểu tượng dấu hỏi phía dưới bên phải của giao diện Figma, chọn Keyboard Shortcut để xem list các tổ hợp phím tắt. Hoặc bạn cũng có thể dùng công cụ Figma Ninja để học các phím tắt.

9. Đổi tên hàng loạt layer

Bấm tổ hợp phím ⌘ + r để đổi tên layer. Nếu bạn chọn nhiều layer một lúc, bạn cũng có thể đổi tên của chúng một lượt mà không cần phải đổi tên từng layer.

VI. Kết

Giống như hầu hết các công cụ chuyên dùng để thiết kế UI/UX, Figma là một phần mềm dễ học. Giao diện đơn giản, thân thiện, cùng hàng loạt chức năng cũng một phần nào đó giúp bạn nhanh chóng nắm bắt và ứng dụng vào công việc.

Tuy nhiên, đây là một công cụ vẫn tiếp tục được phát triển hàng ngày. Bạn vẫn phải cấp nhật liên tục nếu không muốn bị bỏ lại phía sau. Với mình, chỉ trong vòng 1 năm, Figma đã có những cập nhật đáng kể (Auto layout, smart animate…) mà nếu không theo dõi thường xuyên, mình sẽ lờ đi và tiếp tục làm theo những flow cũ không mấy hiệu quả.

Team TELOS bọn mình đã thiết kế một khóa học để phần nào giúp bạn làm điều đó. Nếu bạn là một người mới trong ngành hoặc mới tiếp xúc với Figma, khóa học này được thiết kế dành riêng cho bạn. Bạn có thể xem chương trình cũng như thời gian gian bắt đầu tại link: https://TELOS.vn/course/khoa-hoc-thiet-ke-giao-dien-voi-figma/

Bài viết này sẽ tiếp tục được cập nhật nhằm mang đến những thông tin bổ ích của TELOS. Hi vọng được gặp lại mọi người trong các bài viết sau.

Các nguồn tổng hợp:

1. Toptal
2. Creative-tim
3. Prototypr.io

-----

TELOS Agency - tư vấn nhận diện thương hiệu, tái định vị thương hiệu hiệu quả
Công ty TNHH TELOS
Địa chỉ: 208 Nguyễn Hữu Cảnh, Phường 22, Quận Bình Thạnh, TP. Hồ Chí Minh
SĐT: 0919 1000 75 (Ms. Yến) hoặc  0949 165 064 (Mr. Nhân)
Email: [email protected]