Plugin là gì?

Plugin là một kho công cụ đính kèm dành cho Figma. Khi bạn sử dụng Figma plugin, bạn sẽ cảm thấy rất dễ tiếp cận vì tính đơn giản và hiệu quả mà bộ công cụ chính của figma mang lại. Tuy nhiên đôi khi bạn sẽ nảy sinh nhưng kiểu nhu cầu nho nhỏ như kiểu tạo hệ thống màu, canh chỉnh màu hàng loạt hay tạo lập bộ màu từ hình ảnh.

Bản thân figma nổi tiếng với sự tinh gọn, dễ sử dụng và đơn giản trong thao tác của mình, vậy nên các nhà phát triển figma mở rộng các chức năng cho nó bằng cách tạo dựng một hệ thống cộng đồng phụ trợ được đóng góp bởi những bên khác. Và thật đáng mừng khi hầu như tất cả các tài nguyên đó đều miễn phí. Plugin cũng không ngoại lệ, hiện nay trên cộng đồng của Figma, chúng ta đã có hàng chục ngàn plugin đủ thể loại với đủ loại chức năng và mình phải công nhận là các plugin đó rất lợi hại.

Phần một của bài viết này chia sẻ 10 plugin trên figma giúp quản lý hệ thống hoặc thao tác hàng loạt, nhờ đó công việc của bạn trở nên nhẹ nhàng, hãy xem tại đây

Phần hai của bài viết này, chúng mình lại tập trung vào việc các figma plugin có thể giúp người ta tạo ra các element thiết kế dễ dàng như nào, hãy xem tại đây

Các plugin giúp bạn quản lý màu sắc thế nào?

Bên cạnh khóa học Figma mà chúng mình mở ra để giúp mọi người tối ưu việc sử dụng phần mềm, chúng mình còn chia sẻ thêm các kiến thức để giúp đẩy nhanh tốc độ sử dụng công cụ, và Plugin đương nhiên là một phần không thể thiếu.

Trong những plugin được chia sẻ đó, có một nhóm plugin rất xịn, hỗ trợ chúng ta trong quá trình làm việc với màu sắc, một khía cạnh rất quan trọng trong việc thiết kế nói chung và thiết kế UI/UX nói riêng. Hiểu và nắm được cách màu sắc vận hành giúp bạn có được những thiết kế thật sự ấn tượng, thì việc plugin dọn sẵn đường cho bạn trong việc quản lý, hệ thống hóa và cả tạo lập hệ màu sẽ càng giúp con đường thiết kế của bạn trở nên mượt mà hơn.

Tin mình đi, bảo đảm cuộc chơi về màu sắc của các bạn sẽ đa dạng và tốc độ hơn nhiều, chỉ cần tập trung cho việc sáng tạo và nghĩ ý tưởng thôi.

1. Web Gradients

Khởi động với một plugin về gradient. Đây vừa một công cụ đồng thời cũng là một kho thư viện về gradients. Với plugin này thì việc lấy cảm hứng hoặc dùng luôn màu gradient trở nên khá là tiện.

Plugin cho phép bạn lấy màu và lựa chọn theo màu chủ đạo nên càng dễ dàng tìm kiếm, lấy về edit lại cũng khá nhanh, thậm chí cho phép copy CSS để gửi cho cho dev tại chỗ luôn.

Link tải và cài đặt xin mời các bạn vào: WebGradients

Xem video ở dưới đây về cách thức plugin này trên figma giúp bạn làm việc nhanh chóng như thế nào

2. Var Colors

Với các plugin khác thì chúng ta giúp các bạn designer đỡ nhọc nhằn rồi, ở loại figma plugin này chúng ta giúp coder khỏe thêm 1 xí. Chạy cái plugin này nó sẽ giúp bạn copy hết mã màu trong local style của file hoặc trong những item bạn select. Sau đó thì chỉ việc paste để khai báo vào code là được.

Có hỗ trợ css và Sass nha.

Xin mời mọi người: Var Colors

3. Vivid Gradient

Vấn đề bạn hay gặp phải khi kết nối màu trên một gradient đó là nếu để mặc định 2 màu hơi đối lập ở 2 đầu gradient thôi thì chúng ta có thể có một dãy gradient không đẹp cho lắm vì cái khoảng chuyển sắc ở giữa nó bị sắc xám (hay được gọi là “gray dead zone“)

Cái plugin này sẽ giải quyết vấn đề đó bằng cách thêm một vài “trạm trung chuyển” ở giữa cho gradient của bạn vào trông nó sẽ xịn xò hơn rất rất nhiều.

Link tải xin mời: Vivid Gradient

4. Image Palette

Các bạn chắc cũng đã quen thuộc với các công cụ lấy mã màu từ thiết kế như kiểu Kuler của Adobe. Mình vừa tìm ra một cái plugin tương tự trong figma và nó làm phải nói là nhanh như racing boi bốc đầu xe. Rất tiện lợi cho các bạn nào đang cần lấy cảm hứng để pha màu branding, làm ghiền luôn.

Xin mời tải tại: Image Palette

 

5. Chroma Colors

Tạo từng style một cho hệ thống thiết kế của bạn để dùng lại đã là 1 tính trạng của sự lười, giờ bạn có muốn lười hơn? Đây xin giới thiệu plugin Chroma Colors. Với plugin này chỉ với 1 cú click bạn đã cho toàn bộ màu sắc của các object trở thành style (với tên của object đó).

Tưởng tượng kết hợp với Image palette phía trên, sau đó add toàn bộ vào color style, bạn đã có cho mình một bộ màu để có thể bắt đầu thiết kế.

Link của plugin: Chorma Colors

Xem video ở dưới đây về cách thức Các plugin giúp bạn làm việc nhanh chóng

6. Color Guide

Với cái plugin này thì bạn chỉ cần bấm cái, nó sẽ ra nguyên 1 series các màu có trong style của bạn với các thông số, tương phản và cả phần chú thích. Khá tiện khi muốn trình bày và chia sẻ, bàn giao cho các nhân sự khác.

Link cài đặt Plugin : Color Guide

Xem video ở dưới đây về cách thức Các plugin giúp bạn làm việc nhanh chóng

7. Halftones

Với plugin này chúng ta có thể nhẹ nhàng add vào 1 lớp hiệu ứng kiểu halfones hoặc gradient-dots cho thiết kế của mình để phục vụ nhu cầu làm các kiểu hiệu ứng đơn giản. Khi tạo xong lớp hiệu ứng thì bạn có thể tắt mở nó đi mà ko bị ảnh hưởng đến ảnh gốc, khá ổn he.

Link cài đặt ở đây: Halftones

Xem video ở dưới đây về cách thức Các plugin giúp bạn làm việc nhanh chóng

9. Appearance

Trùm cuối đây, figma plugin này giúp bạn tạo lập một thiết kế dark/light mode chỉ trong nháy mắt. Nguyên tắc khá đơn giản: Hãy setup tất cả các màu theo cấu trúc có thể switch được, plugin sẽ giúp bạn switch nó 1 trong 1 thao tác.

Với plugin này thì việc nhọc nhằn nhất của designer có lẽ là setup hệ thống màu cho 2 dạng theme dark và light mode. Sau khi đã setup ổn thỏa xong rồi thì cần nhập tên theo cú pháp “tên màu+[day]” cho light theme và “tên màu+[night]” cho dark theme. Và phần còn lại chỉ là vài nút bấm để generate một version dark/light cho thiết kế của bạn.

Link cài đặt xin mời: Appearance

Nếu có nhu cầu xin hãy xem video hướng dẫn về việc tạo lập darkmode (hơi dài, 24′ lận, nhưng đảm bảo sau này sẽ giúp bạn đỡ đc nhiều tiếng đồng hồ làm việc)

Xem video ở dưới đây về cách thức Các plugin giúp bạn làm việc nhanh chóng

Kết luận

Figma plugin có nhiều cách giúp ta làm việc nhanh, có khi nó khiến ta không cần phải lặp đi lặp lại một loại công việc quá nhiều lần, có khi nó lại generate cho ta những thành phần quá cơ bản có sẵn trong thư viên. Còn với bài viết này, một khía cạnh mà Figma làm việc cực kì ổn đó là giúp bạn tạo lập màu, quản lý màu và hiệu chỉnh các điểm chưa tốt của việc setup màu quá căn bản. Hy vọng một lần nữa, bài viết này sẽ lại giúp bạn nâng cao năng suất thiết kế, làm việc, có nhiều năng lượng sáng tạo hơn.

Và hãy tham gia vào cộng đồng Cùng Học Figma để nhận thêm nhiều tài nguyên, kiến thức thú vị nhé.