Các Figma Plugin cần thiết cho một Product Designer

Cuộc chiến giữa Figma và Sketch là câu chuyện chưa có hồi kết tính tới thời điểm hiện tại. Cả 2 đều có những ưu và nhược điểm của mình, một mạnh về làm việc collaboration và quản lí file nhưng lại không hỗ trợ Plugin; một chiếm ưu thế về sự ổn định và nguồn plugin dồi dào nhưng lại không đa dạng nền tảng (chỉ cho MacOS). Năm 2019 đánh dấu thêm một cuộc đua nữa giữa 2 ông lớn trên, trong lúc Sketch có vẻ "hụt hơi" trong việc làm cho câu chuyện teamwork trở nên dễ dàng thì Figma lại đang "bứt tốc" về đích với việc cho ra mắt hàng loạt Plugin phục vụ cho nhiều mục đích khác nhau.

Đã có những lúc mình cực kỳ ghen tị với các bạn sử dụng Sketch (không phải không được dùng mà là do đặc thù công việc) vì hệ thống Plugin của họ quá khủng và đa dạng. Nhưng tính tới thời điểm này, Figma đã cho ra lò hơn 40+ Plugin, không ngoại lệ mình cũng là một trong số những người rãnh rỗi để thử hết đống plugin này để chọn ra những "vũ khí" tốt nhất phục vụ cho công việc thiết kế Product hiện tại, nếu bạn chưa có thời gian để thử hết những điều thú vị mới mẻ này từ Figma thì hãy nghía qua một số checklist của mình sau đây:

1, Aspects (by Cosmin Negoita)

Aspects là một plugin nhỏ giúp thay đổi kích thước các elements được chọn để phù hợp với tỷ lệ khung hình nhất định. Plugin này hầu hết được thiết kế cho hình ảnh, nhưng vẫn hoạt động tốt với bất kỳ loại layer nào. Ưu điểm lớn nhất của plugin này là scale về các tỉ lệ hình ảnh phổ biến nhưng không làm lẻ số của W & H, điểm trừ là không hỗ trợ scale về tỉ lệ 1:1

2, Content Reel (by Microsoft)

Khi làm user testing trên các bản prototype hay demo cho các bên liên quan mình luôn làm cho bản thiết kế trông "thật" nhất có thể để có được phản hồi chính xác nhất so với việc chỉ đưa các nội dung giả (dummy content) nhạt toét vô vị vào thiết kế. Craft của Sketch đã giải quyết vấn đề này cực kỳ tuyệt vời, trong 1 thời gian, và bây giờ trên Figma cũng có plugin quyền năng tương tự giúp mình tạo những nội dung như tên, email, URLs, công ty, ảnh đại diện một cách ngẫu nhiên – Content Reel. Hy vọng trong tương lai Microsoft sẽ hỗ trợ nhiều loại ngôn ngữ hơn trong đó có tiếng Việt.

3, Content Buddy (by Ismael Gonzalez)

Nếu Content Reel hỗ trợ tạo ra những nội dung ngẫu nhiên thì Content Buddy lại hỗ trợ tìm kiếm nội dung văn bản và thay thế những nội dung đó. Content Buddy work hầu hết trong các trường hợp như components, frames và group. Ngoài ra bạn có thể kết hợp 2 plugin Content Buddy (CB) và Content Reel (CR) với nhau để việc thay đổi các nội dung văn bản nhanh hơn, dùng CB để chọn các văn bản có nội dung giống nhau sau đấy dùng tiếp CR để thay đổi các nội dung vản bản đó ngẫu nhiên.

4, Figma Walker (by Kazushi Kawamura)

Figma Walker cho phép bạn có thể "nhảy" nhanh tới một frame hoặc một page bất kỳ, plugin này đặc biệt hữu dụng khi làm việc trên 1 file có quá nhiều frame, plugin này thậm chí có thể tìm và gọi luôn 1 components. Một lưu ý đặc biệt là nếu bạn muốn tối ưu hoá việc tìm kiếm các frame hoặc page thì phần naming gọn gàng và có quy tắc là một điều không thể thiếu.

5, Interplay (by Michael Fitzgerald)

Interplay kết nối với bộ design system code của bạn, nó cho phép truy cập và sử dụng component ngay trên Figma. Bạn có thể chỉnh sửa các properties, thay đổi nội dung và kéo thả vào trong canvas của Figma, plugin này có thể không áp dụng cho hệ thống design của bạn nhưng nó đóng một vai trò tuyệt vời cho việc tham khảo cho việc tạo ra các component như cách tổ chức layer, naming layer. Hiện tại nguồn resource của Interplay khá khiêm tốn chỉ mới có Ant Design và ReactBoostrap, hy vọng trong tương lai sẽ có nhiều resource để chúng ta tham khảo được nhiều hơn.

6, Map maker (by Kazushi Kawamura)

Với những màn hình bắt buộc người dùng phải tương tác với bản đồ, chắc hẳn ai trong chúng ta cũng đã từng lên Googlemap, sau đó tìm kiếm địa điểm rồi chụp hình lại và kéo thả vào trong figma. Với Map maker bạn không cần phải lên google nữa mà chỉ cần thao tác trực tiếp trên Figma là đã có 1 layer cho bản đồ rồi, ngoài ra nó còn hỗ trợ custome bản đồ bằng JSON. Một điểm mình cực kỳ thích Map maker so với Mapsicle là nó có thêm "Show Marker".

7, Similayer (by David Williames)

Nếu bạn có nhiều object trong một frame và muốn chọn ra những object liên quan để tiện cho việc chỉnh sửa (ví dụ chọn tất cả các text Title) thì Similayer sẽ giúp bạn thực hiện việc này, chỉ đơn giản là chọn 1 object sau đó chọn các thuộc tính liên quan tới object đó → Bùm bạn đã chọn được hết tất cả object.

8, Time machine (by Square)

Làm Product bắt buộc bạn phải cải tiến các tính năng hiện có liên tục, vì vậy số lượng lưu trữ các màn hình cũng tăng lên rất nhiều, những lúc thế này mình hay copy các màn hình liên quan tới tính năng đó và bỏ nó vào một Page khác trong Figma để đề phòng bất trắc sau này. Với Time maching, Plugin này sẽ tự động copy các màn hình bạn muốn lưu lại, bỏ vào 1 page tên là "Time Machine" và đặt tên cho Frame với ngày được lưu.

9, Unplash (by Unplash)

Nói về ảnh thì không thể không nhắc tới Unplash – nguồn ảnh miễn phí, đa dạng và đẹp nhất đối với mình. Với Unplash plugin bạn có thể chèn một hình ảnh ngẫu nhiên hoặc hình ảnh với danh mục cụ thể.

P/s: Unsplash License cho phép hình ảnh được sử dụng tự do cho các dự án thương mại và cá nhân.

Trên đây là những plugin mà mình cảm thấy cần thiết theo góc nhìn của mình mà bạn có thể dùng để tham khảo, tất nhiên vì mới launch nên sẽ có một số hạn chế nhất định. Hy vọng trong tương lai một số lập trình viên có thể tiếp tục ra lò những plugin hay ho nữa để contribute cho cộng đồng designer dùng Figma này (ví dụ như một cái plugin nào đó giống content reel nhưng hỗ trợ tiếng Việt chẳng hạn).