Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
48 Figma Plugins Dành Cho Thiết Kế Website

48 Figma Plugins Dành Cho Thiết Kế Website


Ngày 20 Tháng 12 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu các plugin và công cụ miễn phí dành cho thiết kế, phát triển website nha.

Các Công Cụ Và Tool cho Figma

Chart

Chart là một plugin cho Figma sử dụng dữ liệu thực hoặc dữ liệu ngẫu nhiên để tạo các biểu đồ phổ biến với thiết kế đa dạng. Biểu đồ hỗ trợ các dữ liệu được láy từ Excel, Numbers, Google Trang tính, JSON (API REST), tệp CSV...

Chart

A11y - Color Contrast Checker

Plugin này giúp bạn kiểm tra tỷ lệ tương phản màu của tất cả văn bản hiển thị trong website và đảm bảo người dùng có thể đọc được văn bản của bạn bằng cách tuân thủ các tiêu chuẩn của WCAG.

A11y - Color Contrast Checker

LilGrid

Nó giúp bạn sắp xếp các phần tử một cách tự động dưới dạng grid.

LilGrid

Rename It

Giữ các tệp Figma của bạn có tổ chức rõ ràng, đổi tên hàng loạt các lớp layer và frames.

Rename It

Autoflow

Autoflow giúp bạn dễ dàng vẽ các luồng cho các đối tượng. Chỉ cần chọn 2 đối tượng và một đường thẳng sẽ được vẽ một cách kỳ diệu giữa chúng.

Autoflow

Unsplash

Cho phép bạn chèn các hình ảnh đẹp từ Unsplash vào thiết kế của tệp Figma.

Unsplash

Iconify

Giúp bạn chèn các biểu tượng Material Design, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji và nhiều biểu tượng khác vào tài liệu Figma dưới dạng hình vector.

Iconify

Figma to HTML, CSS, React...

Giúp bạn chuyển đổi các thiết kế Figma sang HTML, CSS, React, Vue v.v.

Figma to HTML, CSS, React

Font Preview

Giúp bạn so sánh và xem các font hiển thị đối với nội dung trong tệp Figma. Ngoài ra nó còn có một số tính năng khác như là lưu trữ các font yêu thích, tính năng lọc và tìm kiếm...

Font Preview

Mockuuups Studio

Giúp bạn tạo các bản mô hình sản phẩm thiết kế figma trên nhiều loại thiết bị phổ biến hiện nay để tăng mức độ trực quan và đẹp mắt cho tệp figma.

Mockuuups Studio

Breakpoints

Xem trước bố cục đáp ứng bên trong Figma frame và chia sẻ hiệu ứng animation.

Breakpoints

Mapsicle

Cho phép bạn có thể nhanh chóng cài đặt bản đồ cho tệp figma. Ngoài ra nó còn có chức năng di chuyển đến vị trí bất kỳ đâu mà bạn muốn hay tìm kiếm các địa điểm ở bất kỳ đâu trên thế giới.

Mapsicle

uiGradients

Cung cấp hơn 350 mẫu gradient cho văn bản, frames, group... trong file thiết kế.

uiGradients

Blush

Tạo và tùy chỉnh các hình minh họa trong thiết kế của bạn với Blush.

Blush

Content Reel

Content Reel cho phép bạn tạo nội dung tùy chỉnh và chia sẻ nó với những người dùng Figma khác.

Content Reel

Figmotion

Nó là một công cụ tạo hiệu ứng animation ngay trong thiết kế file figma mà không cần phải chuyển sang các công cụ tạo chuyển động khác nhau như Principle, Haiku hoặc After Effects

Figmotion

Dark Mode Magic

Giúp bạn chuyển đổi thiết kế dễ dàng sang dark mode.

Dark Mode Magic

Figmoji

Thêm biểu tượng cảm xúc một cách liền mạch vào thiết kế của bạn.

Figmoji

Isometric

Isometric cho phép bạn tạo các isometric layers mà không cần phải thiết lập chúng theo cách thủ công.

Isometric

Design Lint

Design Lint là một plugin mã nguồn mở giúp tìm kiếm các kiểu còn thiếu trong các thiết kế của bạn.

Design Lint

BeatFlyer Lite

Tạo hiệu ứng animation cho các layer của bạn một cách độc lập và có thể kết hợp nhiều hiệu ứng tùy thích trong số hàng chục hiệu ứng có sẵn.

BeatFlyer Lite

Icon Resizer

Giúp bạn điều chỉnh các icon trong file thiết kế có cùng kích thước tiêu chuẩn.

Icon Resizer

Wireframe

Là nơi tổng hợp các mẫu wireframe đẹp mắt dành cho thiết kế figma của bạn.

Wireframe

Palette

Palette giúp bạn tạo bảng màu hoàn hảo thông qua machine learning từ Colormind.

Palette

Blobs

Giúp bạn tạo organic blob shapes cho file thiết kế.

Blobs

Lorem ipsum

Giúp chúng ta tạo các nội dung lorem ispum cho text layer.

Lorem ipsum

SPELLL

Plugin này cung cấp cho Figma & FigJam chức năng kiểm tra chính tả tương tự như của Google Docs.

SPELLL

Fig3D

Chuyển đổi ngay lập tức các hình dạng, biểu tượng, biểu trưng và thiết kế giao diện người dùng của bạn sang mô hình 3D và có được kết xuất tốt.

Fig3D

Image Palette

Trích xuất một bảng màu gồm 5 màu khác nhau từ các hình ảnh đã chọn.

Image Palette

LottieFiles

Giúp bạn tạo và thêm các hiệu ứng animation lottie cho thiết kế figma.

LottieFiles

Google Sheets Sync

Đồng bộ hóa nội dung từ Google Trang tính trực tiếp vào tệp Figma của bạn.

Google Sheets Sync

Style Organizer

Giúp bạn hiển thị và tổ chức cho các kiểu màu sắc, text layer trong file thiết kế.

Style Organizer

Responsify

Một plugin Figma để nhanh chóng kiểm tra các thiết kế của bạn trên nhiều kích thước thiết bị.

Responsify

Morph

Giúp bạn tạo các hiệu ứng đẹp mắt hay được sử dụng trong website như Skeuomorph, Neon, Glitch, Reflection, Glass, Gradient...

Morph

Brandfetch

Giúp chúng ta tạo và thiết kế các nhãn hiệu, logo cho công ty, website, thương hiệu cá nhân...

Brandfetch

Clean Document

Tự động sắp xếp và dọn dẹp tài liệu Figma của bạn.

Clean Document

User Profilet

Cung cấp các hình ảnh avatars đẹp cho tài liệu Figma của bạn.

User Profile

Color Palettes

Cung cấp các bảng màu đẹp mắt cho thiết kế của bạn.

Color Palettes

arc

Giúp bạn tạo các hiệu ứng uốn lượn cho text layer trong Figma.

arc

Pattern Hero

Pattern Hero cho phép bạn đặt các phần tử hoặc frames đã chọn vào lưới để tạo các patterns.

Pattern Hero

Emailify HTML Email Builder

Thiết kế và xuất các email HTML đáp ứng, sẵn sàng sản xuất từ Figma.

Emailify HTML Email Builder

Wave & Сurve

Giúp chúng ta dễ dàng tạo ra các hiệu ứng wave thú vị cho file thiết kế.

Wave & Сurve

Table Generator

Plugin cung cấp các tùy chọn tùy chỉnh có thể được định cấu hình để xác định trước các kiểu ô trong bảng

Table Generator

Feather Icons

Giúp bạn sử dụng các biểu tượng Feather trong Figma.

Feather Icons

Remove BG

Giúp bạn tự động xóa nền của hình ảnh chỉ với một cú nhấp chuột.

Remove BG

Vectary 3D Elements

Plugin Vectary 3D cho tạo và tuỳ chỉnh mô hình 3D dự trên các thiết kế 2D của bạn.

Vectary 3D Elements

HtmlGenerator

HtmlGenerator kết xuất bất kỳ lựa chọn nào thành HTML tương đương với CSS với tốc độ quá trình chuyển đổi nhanh hơn.

HtmlGenerator

SkewDat

Giúp bạn tạo các đối tượng skew trong figma.

SkewDat

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn các figma plugin hữu ích cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.