Tự thiết kế UI bằng Figma: Hướng dẫn cho non-designer

Hướng dẫn Figma này dành cho bạn — chủ doanh nghiệp, marketing manager, product owner — những người không phải designer chuyên nghiệp nhưng cần biết cách tạo wireframe, mockup để giao tiếp ý tưởng với team dev. Figma là công cụ thiết kế giao diện phổ biến nhất thế giới, miễn phí cho cá nhân, và hoàn toàn chạy trên trình duyệt. Bài viết này sẽ hướng dẫn bạn từ con số 0 đến tự tin tạo được wireframe chuyên nghiệp.

Lead magnet: Tải miễn phí “UI Kit cho SME (Figma template)” — bao gồm template landing page, form đăng ký, dashboard, e-commerce page. Nhận ngay tại đây.

Figma là gì? Tại sao chọn Figma?

Figma trong 30 giây

Figma là một phần mềm thiết kế giao diện (UI design tool) chạy trực tiếp trên trình duyệt web. Bạn không cần cài đặt phần mềm, không cần máy Mac (như Sketch), và hoàn toàn miễn phí cho cá nhân.

So sánh Figma với các công cụ khác

Tại sao Figma thắng:

• Miễn phí cho cá nhân và team nhỏ (tối đa 3 project)
• Real-time collaboration: Nhiều người cùng edit một file, giống Google Docs
• Chạy trên web: Không cần cài đặt, dùng máy nào cũng được
• Community khổng lồ: Hàng triệu template, plugin, UI kit miễn phí
• Industry standard: 80% designer chuyên nghiệp dùng Figma

Bắt đầu với Figma: Setup trong 5 phút

Bước 1: Tạo tài khoản

1. Vào figma.com
2. Click “Sign up” → Đăng ký bằng Google hoặc email
3. Chọn plan “Starter” (miễn phí)
4. Bạn sẽ vào trang Dashboard

Bước 2: Hiểu giao diện Figma

Giao diện Figma gồm 4 vùng chính:

• Toolbar (trên cùng): Các công cụ vẽ — Frame, Rectangle, Text, Pen, v.v.
• Layers Panel (bên trái): Danh sách tất cả element trong file, giống cấu trúc thư mục
• Canvas (giữa): Khu vực làm việc chính — nơi bạn vẽ design
• Properties Panel (bên phải): Thuộc tính của element đang chọn — màu, kích thước, font, v.v.

Bước 3: Tạo file đầu tiên

1. Ở Dashboard, click “New design file”
2. Một file trống sẽ mở ra
3. Nhấn phím F (hoặc chọn Frame tool) → Bên phải sẽ hiện các preset: iPhone 16, Desktop (1440px), Tablet, v.v.
4. Click chọn “Desktop” → Một frame trắng 1440x1024px xuất hiện trên canvas

Xin chúc mừng — bạn vừa tạo “trang giấy” đầu tiên để thiết kế!

Công cụ cơ bản: 10 thứ bạn cần biết

1. Frame (F)

Frame là “container” — khung chứa mọi thứ. Mỗi trang web = 1 Frame. Mỗi component (header, card, button) cũng là 1 Frame.

Mẹo: Luôn bắt đầu bằng Frame, không bao giờ vẽ trực tiếp trên canvas.

2. Rectangle (R)

Hình chữ nhật — dùng để tạo box, card, background, placeholder image.

Mẹo: Bo góc bằng cách chỉnh “Corner Radius” ở panel bên phải (thường 8px cho card, 4px cho button).

3. Text (T)

Gõ chữ. Click lên canvas, bắt đầu gõ.

Font chữ gợi ý cho website Việt Nam:

• Heading: Inter, Montserrat, Poppins (hỗ trợ tiếng Việt tốt)
• Body: Inter, Roboto, Open Sans
• Size heading: 32-48px cho H1, 24-32px cho H2, 18-24px cho H3
• Size body: 16-18px

4. Ellipse (O)

Hình tròn/oval — dùng cho avatar, icon background, decorative elements.

5. Line (L)

Đường thẳng — dùng cho divider, separator giữa các section.

6. Pen (P)

Vẽ hình tự do — bạn sẽ ít dùng công cụ này lúc mới bắt đầu. Chuyển sang dùng khi cần vẽ icon custom.

7. Move (V)

Di chuyển và chọn element. Đây là công cụ mặc định — nhấn V bất kỳ lúc nào để quay về.

8. Hand (H)

Di chuyển canvas (zoom in/out, pan). Hoặc giữ Space + kéo chuột.

9. Zoom

• Ctrl + cuộn chuột: Zoom in/out
• Ctrl + 0: Zoom 100%
• Ctrl + 1: Zoom to fit

10. Auto Layout (Shift + A)

Đây là tính năng quan trọng nhất. Auto Layout giúp các element tự sắp xếp — giống Flexbox trong CSS. Khi thêm/bớt element, layout tự điều chỉnh.

Cách dùng: Chọn nhiều element → Shift + A → Chúng sẽ được wrap trong Auto Layout frame. Điều chỉnh gap (khoảng cách), padding (lề trong), direction (ngang/dọc) ở panel bên phải.

Thực hành: Tự tạo wireframe trang chủ website

Wireframe là bản phác thảo “khung xương” — không cần đẹp, chỉ cần thể hiện đúng bố cục và chức năng. Hãy cùng tạo wireframe cho trang chủ một website doanh nghiệp.

Bước 1: Tạo Frame Desktop

• Nhấn F → chọn “Desktop” (1440x1024)
• Đặt tên frame: “Homepage - Wireframe” (double click vào tên ở Layers panel)

Bước 2: Header/Navigation

1. Vẽ Rectangle ngang toàn frame: width 1440, height 80, màu xám nhạt (#F5F5F5)
2. Thêm Text “LOGO” ở góc trái (font 20px, bold)
3. Thêm Text cho menu: “Trang chủ | Dịch vụ | Về chúng tôi | Blog | Liên hệ” ở phía phải
4. Thêm Rectangle nhỏ (120x40, bo góc 4px, màu xanh) làm nút “Liên hệ ngay”

Bước 3: Hero Section

1. Vẽ Rectangle lớn bên dưới header: width 1440, height 500, màu xám (#E0E0E0)
2. Thêm Text lớn: “Headline chính — Giải pháp cho doanh nghiệp” (font 48px, bold)
3. Thêm Text nhỏ hơn: “Mô tả ngắn gọn về dịch vụ, lợi ích cho khách hàng” (font 18px)
4. Thêm 2 nút CTA: “Tư vấn miễn phí” (màu xanh) và “Xem dịch vụ” (viền xanh)

Bước 4: Services Section

1. Thêm Text heading: “Dịch vụ của chúng tôi” (font 32px, bold, căn giữa)
2. Tạo 3 card ngang hàng (mỗi card: Rectangle 380x250, bo góc 8px)
3. Mỗi card chứa: icon placeholder (hình tròn 60px), tên dịch vụ (18px bold), mô tả (14px)
4. Dùng Auto Layout để 3 card cách đều nhau

Bước 5: Testimonials

1. Heading: “Khách hàng nói gì?” (32px, bold)
2. Tạo 3 card review: avatar (hình tròn), tên khách, đánh giá sao, nội dung review

Bước 6: Footer

1. Rectangle ngang: 1440x200, màu tối (#333333)
2. Chia 4 cột: Logo + mô tả | Links | Dịch vụ | Liên hệ
3. Dòng cuối: ”© 2026 Tên Công Ty. All rights reserved.”

Tổng thời gian: 20-30 phút cho wireframe đầu tiên.

Nâng cấp: Từ wireframe sang mockup

Thêm màu sắc

Thay vì xám, dùng brand colors:

• Primary color: Chọn 1 màu chủ đạo (ví dụ: #2563EB — xanh dương)
• Secondary color: Màu phụ (ví dụ: #F97316 — cam)
• Neutral colors: Đen (#1F2937), xám (#6B7280), trắng (#FFFFFF)
• Background: Trắng hoặc xám rất nhạt (#F9FAFB)

Thêm hình ảnh

1. Kéo file ảnh trực tiếp vào Figma
2. Hoặc dùng plugin Unsplash (miễn phí): Menu → Plugins → Search “Unsplash” → Install → Dùng
3. Place ảnh vào Rectangle bằng Fill → Image

Thêm icon

1. Plugin Iconify: Hàng triệu icon miễn phí
2. Hoặc copy từ heroicons.com, lucide.dev

Tạo Component (để tái sử dụng)

1. Thiết kế xong 1 button → Chọn → Ctrl + Alt + K → Tạo Component
2. Bây giờ bạn có thể copy button này đi khắp nơi. Sửa component gốc → tất cả instance tự cập nhật.

10 plugin Figma miễn phí nên cài ngay

Mẹo Figma cho non-designer

Mẹo 1: Dùng Grid Layout

View → Layout Grid → Thêm grid 12 cột, margin 120px mỗi bên, gutter 24px. Đây là chuẩn layout mà developer dùng — wireframe theo grid sẽ dễ code hơn.

Mẹo 2: Đặt tên layer rõ ràng

Thay vì “Rectangle 1, Rectangle 2,” đặt tên: “Header,” “Hero Section,” “CTA Button,” “Service Card.” Team dev sẽ cảm ơn bạn.

Mẹo 3: Dùng Styles

Tạo Color Styles (màu brand), Text Styles (font cho heading, body, caption). Khi cần đổi font toàn bộ design → sửa 1 chỗ, cập nhật everywhere.

Mẹo 4: Comment trực tiếp

Nhấn C → Click vào bất kỳ đâu trên design → Để lại comment. Developer, PM, team marketing đều có thể reply — giống comment trong Google Docs.

Mẹo 5: Prototype để demo

1. Chuyển sang tab “Prototype” (panel bên phải)
2. Kéo mũi tên từ nút “Liên hệ” sang frame “Trang Liên hệ”
3. Click nút Play (▶) ở góc phải trên → Demo interactive

Prototype giúp bạn “chạy thử” design trước khi code — phát hiện vấn đề UX sớm, tiết kiệm chi phí.

Tài nguyên Figma miễn phí

Community Files (miễn phí 100%)

• Figma Community: figma.com/community — hàng nghìn template miễn phí
• UI Kit cho e-commerce: Search “e-commerce UI kit” trong Community
• Dashboard template: Search “dashboard” — có hàng trăm option
• Mobile app template: Search “mobile app” — iOS, Android template

Khóa học Figma miễn phí

• Figma Official: help.figma.com — tutorial từ cơ bản đến nâng cao
• YouTube: Kênh “Figma” chính thức, “DesignCourse,” “CharliMarieTV”
• Coursera: “Google UX Design Certificate” (có module Figma)

Khi nào nên tự design, khi nào nên thuê chuyên gia?

Tự làm wireframe → Thuê designer hoàn thiện là chiến lược tối ưu nhất. Bạn tiết kiệm 30-50% chi phí vì designer không phải mất thời gian tìm hiểu ý tưởng — bạn đã có wireframe rõ ràng.

Tại Trinh Digital, chúng tôi đón nhận wireframe Figma từ khách hàng và chuyển thành sản phẩm hoàn chỉnh — từ UI design đến development.

FAQ — Câu hỏi thường gặp

Figma có miễn phí không?

Có. Plan Starter miễn phí cho cá nhân với 3 project, unlimited files. Đủ cho hầu hết nhu cầu wireframe và design cơ bản. Plan Professional (300.000 VND/tháng/người) cần khi team > 2 người cùng edit.

Tôi không biết design, có dùng Figma được không?

Hoàn toàn được. Figma không yêu cầu kỹ năng design — bạn có thể bắt đầu bằng việc kéo-thả template có sẵn từ Community. Wireframe (bản phác thảo) không cần đẹp, chỉ cần rõ ràng về bố cục và chức năng.

Figma file có chia sẻ cho developer được không?

Có, đây là điểm mạnh lớn nhất của Figma. Developer mở link → thấy design → click vào element → thấy code CSS, kích thước, màu sắc, font, spacing. Không cần xuất file PSD hay gửi email specs.

Tải ngay UI Kit miễn phí cho SME — template Figma có sẵn cho landing page, form, dashboard. Hoặc liên hệ Trinh Digital để được hỗ trợ từ wireframe đến sản phẩm hoàn chỉnh.