Figma Plugin là gì?

Plugin là một sự trang bị đa năng dành cho Figma. Khi bạn sử dụng Figma, có những lúc bạn cần làm những loại hình thao tác nhỏ qua nhiều bước như tạo QR Code hay chèn ảnh thumbnail video và cả dựng mockup, các plugin được những nhà phát triển độc lập đứng ra xây dựng để giúp bạn cải thiện hiệu suất thiết kế, tiết kiệm được thêm hàng tá thời gian làm việc lặt vặt và có nhiều thời gian hơn để sáng tạo.
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 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

Các plugin có thể giúp bạn trong việc làm đẹp thêm thiết kế?

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.

Với bài viết hôm nay, mình xin giới thiệu với bạn một chùm các plugin khác, hỗ trợ các bạn tạo ra những element trong thiết kế hoặc tạo dựng các layout rất nhanh chóng. Chủ đề của bài hôm nay sẽ là các plugin giúp hỗ trợ về mặt thẩm mỹ, nâng cấp thêm cho “nhan sắc” thiết kế UI của bạn.

Tin mình đi, bảo đảm công việc thiết kế của bạn sẽ rảnh tay rất nhiều, chỉ cần tập trung cho việc sáng tạo và nghĩ ý tưởng thôi.

1. Blobs

Khởi động chuỗi các plugin hỗ trợ hôm nay xin giới thiệu đến quý dị một plugin thú dị, đó là Blobs.

Có khi nào bạn kiểu muốn vẽ một vệt gì đó loang ra kiểu rất random, nhưng làm ra thì trông nó méo mó rất thiếu tự nhiên? Plugin này sẽ đơn giản là phẹt ra cho bạn một bãi, có thể customize mức độ uốn éo hoặc mức độ phức tạp của shape. Xong rồi chỉ việc đổi tí màu, cho vào thiết kế, mọi thứ sẽ rực rỡ sinh động hơn nhiều

Xin mời trải nghiệm tại: Blobs

2. Get waves

Sau khi giới thiệu về Blobs rồi, thì ngay sau đó, mình giới thiệu tiếp về Get waves.

Một plugin rất thiết thực cho việc tạo những section dividers dạng sóng cho các thiết kế. Như trong video dưới đây, mình bỏ nó vào landing page sau khi hiệu chỉnh sơ sơ, và nó cũng khá ra gì. Thông thường mình sẽ vẽ ra các shape nhọn, sau đó bo góc, nhưng nếu lười quá thì gọi ông này ra, bấm bấm và cái cho nó random ra một cái mình ưng rồi bóc về xài cũng đc, khá là tiện lợi.

Xin mời mọi người: Get waves

3. StorySet by Freepik

Đây là một sản phẩm của hệ thống Freepik, nó có một trang web riêng là Stories.freepik.com. Trên trang này thậm chí bạn có thể làm animation đơn giản và xuất cả code

Bản thân Freepik cũng phát triển 1 cái plugin để bạn có thể ngồi yên trong figma, không đi đâu cả và gọi nguyên con ảnh minh họa ra để xài luôn. Hàng chính chủ cực xịn ở chỗ ngay cả quản lý về màu sắc của sản phẩm cũng được tính toán để chỉ cần trong 1 vài cú click chuột bạn đã có thể thay đổi nó để phù hợp với thiết kế của bạn.

Link tải xin mời: StorySet

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

Một plugin thú vị. Tác giả của plugin này cũng chính là người đã làm ra plugin Google Sheet Sync luôn (Dave Williames). Nhớ hồi xưa còn phải trả phí để lên các QR Code Generator trên mạng để làm và tải về, giờ làm trực tiếp trong figma luôn.

Dễ hiểu lắm, bật plugin lên rồi nhập nội dung vào thì nó ra QR code thôi, trong video này mình nhập URL của web cá nhân mình, các bạn có thể quét thử để xem kết quả nha.

Link của plugin: QR Code

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

Đâ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 Các plugin giúp bạn làm việc nhanh chóng như thế nào

7. Masonry Grid Layout

Nhiều khi nhìn các thiết kế ngay hàng thẳng lối, vuông vắn quá cũng chán, bạn muốn thiết kế của mình có dạng so le theo các kích cỡ khác nhau theo cột hoặc dòng kiểu Pinterest, Unsplash, … Đó chính là kiểu layout Masonry, một layout rất phù hợp với các loại web showcase sản phẩm nhiều kích cỡ và có tính nghệ thuật.

Plugin này sẽ giúp bạn làm mọi thứ nhanh gọn và rảnh tay hơn, chỉ cần có các shape ảnh khác kích cỡ 1 chiều là bạn đã có thể thấy ngay tính ứng dụng rồi.

Link cài đặt Plugin : Masonry Plugin

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

8. Video cover

Trong một tình huống thiết kế nào đó, bạn cần minh họa cho loại hình video playlist, thumbnail,… nhưng sử dụng ảnh stock đại trà thì lại không đủ chân thật và chính xác, không mô tả hết thực tế. Thì đây, plugin này sẽ giúp bạn làm việc đó.

Chỉ việc nhập URL của video, plugin sẽ chèn ảnh cover của video vào shape tương ứng bạn đang select trong figma. Dù plugin đã rất tiện rồi, nhưng mình vẫn hy vọng là nó có thể chèn hàng loạt nữa cơ =))), thôi kệ có nhiêu xài đỡ nhiêu vậy.

Link cài đặt ở đây: Video cover

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

Cái tên nó nói rõ công dụng của cái plugin này rồi he. Thực tế trên community thì Figma cung cấp cho chúng ta rất rất nhiều dạng mockup rồi, nhiều nhất là các free template và thư viện, nhưng mà với mình thì cái plugin Mockup này cũng khá là tiện vì ưu điểm là nó nhanh và gọn.

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

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

10. 3D Wave

Plugin giúp bạn làm hiệu ứng lượn sóng với thiết kế của mình. 3D Wave có nhiều tùy chọn, giúp bạn thay đổi các yếu tố như độ lượn, mật độ các sóng hay độ sáng tối các vùng trên sóng và cả chiều hiển thị của layer. Và nó miễn phí nữa, hiện tại mình cũng tìm mấy cái tương tự nhưng nó đa phần là demo và bắt trả phí :'(
Tuy nhiên vẫn còn 1 vài bất cập như việc nó chỉ export ra 1 cỡ ảnh, hơi nhỏ và dễ bể (trong khi mấy thằng trả phí thì nó cho bạn vector luôn). Plugin này chắc giúp bạn làm trong 1 số trường hợp mang tính social post hoặc trang trí cấp tốc chứ chất lượng sản phẩm sẽ ko tối ưu nha.

Xin mời tải: 3D Wave

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

Plugin ngoài việc giúp ta làm nhanh, quản lý tốt và tự động hóa nhiều thứ, nó còn có thể hỗ trợ chúng ta cho việc tạo ra những element, trích xuất các thiết kế từ thư viện và hơn hết là giúp ta đỡ phải lo nghĩ về những thứ lặp đi lặp lại. 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é.