Figma

UI/UX

UI/UXThiết kếĐộ khó: Trung bìnhCó bản miễn phí

Figma

5.0/5Đánh giá của 2dm

Công cụ tiêu chuẩn để thiết kế giao diện; gói Starter miễn phí đủ để bắt đầu.

Công cụ thiết kế giao diện và làm prototype, nhiều người cùng làm trên trình duyệt.

Mở trang chính thức Xem cách dùng

Giới thiệu

Figma là nền tảng thiết kế cộng tác dùng để làm giao diện website, ứng dụng và nhiều sản phẩm khác. Nhiều người có thể cùng mở một file, thấy con trỏ của nhau, bình luận và chỉnh sửa theo thời gian thực.

Bên cạnh Figma Design, hệ sinh thái còn có FigJam (bảng trắng), Figma Slides, Dev Mode (chuyển thiết kế sang thông tin cho lập trình), Figma Make và một số sản phẩm đang ở giai đoạn beta như Figma Sites, Figma Buzz.

Các tính năng như auto layout, component và variables giúp xây bộ nhận diện giao diện dùng lại được, rất hữu ích khi doanh nghiệp có nhiều kênh và nhiều người cùng làm thiết kế.

Tính năng nổi bật

Cộng tác thời gian thực

Nhiều người cùng làm trên một file, có bình luận và cursor chat.

Auto layout

Khung tự co giãn và sắp xếp lại khi nội dung thay đổi.

Component và variables

Tái sử dụng thành phần giao diện và giá trị màu, khoảng cách, chữ.

Dev Mode

Hỗ trợ lập trình viên lấy thông tin để chuyển thiết kế thành code, kết nối design system với codebase qua Code Connect.

Hệ sinh thái đầy đủ

FigJam, Slides, Make, Draw và các sản phẩm khác trong cùng nền tảng.

Branching và merging

Tạo nhánh để thử phương án thiết kế rồi gộp lại.

Dùng để làm gì

Thiết kế website và app

Designer dựng giao diện, gửi link để chủ doanh nghiệp góp ý trực tiếp trên file.

Bộ nhận diện dùng chung

Lưu màu, font, nút bấm thành component để mọi ấn phẩm đồng bộ.

Brainstorm với FigJam

Đội marketing vẽ hành trình khách hàng, lên ý tưởng chiến dịch trên bảng trắng.

Bàn giao cho dev

Lập trình viên dùng Dev Mode để lấy thông số khi dựng giao diện.

Làm slide thuyết trình

Dùng Figma Slides để làm bài trình bày theo đúng nhận diện thương hiệu.

Cách dùng

1
Tạo tài khoản
Đăng ký trên figma.com, có thể bắt đầu với gói Starter miễn phí.
2
Tạo file thiết kế
Tạo file Figma Design mới và chọn khung theo kích thước màn hình cần làm.
3
Dựng component và variables
Định nghĩa màu, chữ, nút bấm thành thành phần dùng lại.
4
Mời cộng tác
Chia sẻ file để đồng nghiệp hoặc khách hàng bình luận trực tiếp.
5
Bàn giao
Chuyển cho lập trình viên xem qua Dev Mode để dựng thành sản phẩm thật.

Video hướng dẫn

Course overview: Figma Design for beginners [1 of 13]
Figma

Free Figma Crash Course for Beginners 2026 UI/UX Design
DesignWithArash

A Guide to Auto Layout: Best Practices, Tips & Tricks Figma
Figma

Ví dụ thực tế

Tình huống minh hoạ

Một công ty du lịch nhỏ ở Nha Trang chuẩn bị làm lại website đặt tour. Designer freelance tạo file Figma, xây sẵn component cho thẻ tour, nút đặt chỗ và bảng màu thương hiệu bằng variables. Chủ công ty mở link trên trình duyệt để bình luận trực tiếp lên từng màn hình, sau đó lập trình viên dùng Dev Mode để lấy thông số và dựng website theo đúng thiết kế.

Mẹo & lưu ý

Xây component trước
Có component chuẩn thì các trang sau làm nhanh và đồng bộ hơn.
Dùng variables cho màu thương hiệu
Đổi một chỗ, cập nhật toàn bộ thiết kế.
Chọn đúng loại seat
Người chỉ góp ý có thể dùng seat rẻ hơn, xem kỹ quyền từng loại seat trên trang giá.