Cách Vẽ Sketch: Hướng Dẫn Từ Cơ Bản Đến Nâng Cao Cho Người Mới Bắt Đầu

Lời mở đầu

Sketch không chỉ là một công cụ thiết kế UI/UX mạnh mẽ mà còn là một “cây bút” số cho những ai muốn hiện thực hoá ý tưởng thiết kế một cách nhanh chóng, linh hoạt và chuyên nghiệp. Đối với người mới bắt đầu, việc làm quen với Sketch có thể gặp không ít khó khăn: từ giao diện người dùng, các phím tắt, cho tới cách tổ chức file và tài nguyên. Bài viết này sẽ cung cấp một hướng dẫn chi tiết, từng bước một, giúp bạn nắm vững cách vẽ Sketch, từ những kiến thức nền tảng cho tới các kỹ thuật nâng cao, nhằm giúp bạn tự tin tạo ra các bản thiết kế UI/UX chất lượng cao.

Lưu ý: Bài viết được viết bằng tiếng Việt, dựa trên phiên bản Sketch 78 (2026) – phiên bản mới nhất tại thời điểm viết. Các bước và giao diện có thể thay đổi nhẹ trong các phiên bản tương lai, nhưng nguyên tắc cơ bản vẫn giữ nguyên.

1. Giới thiệu tổng quan về Sketch

1.1 Sketch là gì?

Sketch là một phần mềm thiết kế vector dành riêng cho macOS, tập trung vào việc tạo ra giao diện người dùng (UI) và trải nghiệm người dùng (UX). Khác với các phần mềm đồ họa chung như Adobe Illustrator hay Photoshop, Sketch được tối ưu hoá cho việc thiết kế giao diện phần mềm, website, ứng dụng di động. Các tính năng nổi bật bao gồm:

• Vector-based design: Đảm bảo mọi yếu tố thiết kế có thể mở rộng mà không bị mất độ nét.
• Symbols (Biểu tượng): Tái sử dụng các thành phần UI một cách dễ dàng.
• Artboards (Bảng vẽ): Quản lý nhiều màn hình, kích thước và trạng thái trong cùng một file.
• Plugins: Hệ sinh thái plugin phong phú giúp mở rộng tính năng (ví dụ: AutoLayout, Content Reel, Stark…).
• Collaboration: Chia sẻ, nhận xét và làm việc nhóm trong thời gian thực (qua Sketch Cloud).

1.2 Tại sao nên học Sketch?

• Tiết kiệm thời gian: Các công cụ như Symbols và Libraries giúp tái sử dụng thành phần, giảm thiểu công việc lặp lại.
• Tích hợp workflow: Sketch dễ dàng xuất file sang các công cụ prototyping (InVision, Figma, Principle) và phát triển (Zeplin, Avocode).
• Cộng đồng mạnh: Hàng ngàn tutorial, tài nguyên UI Kit, plugin và mẫu thiết kế sẵn có.
• Hiệu suất cao: Được tối ưu cho macOS, Sketch chạy mượt mà ngay cả với các file thiết kế phức tạp.

2. Cài đặt và chuẩn bị môi trường làm việc

2.1 Yêu cầu hệ thống

• Hệ điều hành: macOS 10.15 (Catalina) trở lên.
• Bộ nhớ RAM: Tối thiểu 8 GB (khuyến nghị 16 GB cho dự án lớn).
• Ổ cứng: 2 GB dung lượng trống cho cài đặt, plus không gian lưu trữ cho file dự án và plugin.
• Kết nối internet: Cần để tải phần mềm, cập nhật và đồng bộ Sketch Cloud.

2.2 Tải và cài đặt Sketch

1. Truy cập trang chủ Sketch: https://www.sketch.com
2. Nhấn “Free Trial” để tải bản dùng thử 30 ngày (hoặc đăng ký bản trả phí nếu đã có tài khoản).
3. Mở file .dmg và kéo biểu tượng Sketch vào thư mục Applications.
4. Khởi chạy Sketch, đăng nhập bằng tài khoản Sketch Cloud (hoặc tạo tài khoản mới).

2.3 Cài đặt plugin cơ bản

Để tăng năng suất, chúng ta nên cài một số plugin phổ biến:

Plugin	Chức năng	Cách cài
Sketch Runner	Tìm nhanh lệnh, công cụ, layer	Cài qua sketch.run hoặc Runner trong Plugins > Manage Plugins
Content Reel	Đưa nội dung mẫu (text, hình ảnh) nhanh	Tìm trong Plugins > Manage Plugins
Stark	Kiểm tra độ tương phản màu, accessibility	Cài qua Stark trong Sketch Cloud
AutoLayout	Tự động bố trí layout responsive	Cài qua AutoLayout trong Plugins

Cách cài nhanh: Mở Sketch → Plugins → Manage Plugins → Browse Plugins → Tìm kiếm và cài đặt.

3. Giao diện người dùng (UI) của Sketch

3.1 Thanh công cụ (Toolbar)

• Select Tool (V): Chọn và di chuyển layer.
• Insert Tool (I): Thêm các đối tượng (Rectangle, Oval, Line, Text, etc.).
• Slice Tool (S): Chia vùng xuất ảnh.
• Artboard Tool (A): Tạo bảng vẽ mới.
• Zoom (Z) / Hand (H): Thu phóng và di chuyển canvas.

3.2 Sidebar (Bên trái)

• Layers Panel: Quản lý cấu trúc layer, nhóm, symbols.
• Inspector: Thuộc tính chi tiết của layer được chọn (kích thước, màu, border, shadows, opacity…).

3.3 Canvas

• Nơi bạn vẽ, sắp xếp các artboard và layer.
• Hỗ trợ zoom (⌘ + / -), pan (Space + kéo).

3.4 Toolbar trên cùng

Có thể bạn quan tâm: Cách Vẽ Shiba Inu: Hướng Dẫn Chi Tiết Từng Bước Để Tạo Ra Những Bức Tranh Đáng Yêu Và Sống Động

• File, Edit, View…: Các menu truyền thống.
• Insert: Thêm các thành phần UI như button, icon, text field (có sẵn trong UI Kit).
• Plugins: Truy cập nhanh các plugin đã cài.

4. Bắt đầu vẽ: Tạo dự án và artboard đầu tiên

4.1 Tạo file mới

• Mở Sketch → File > New (hoặc ⌘N). Giao diện mặc định sẽ hiển thị một artboard trống.

4.2 Chọn kích thước artboard

• Click vào Artboard Tool (A), sau đó chọn một preset trong thanh bên (iPhone 14, Desktop 1440, Tablet…) hoặc nhập kích thước tùy chỉnh (Width x Height). Ví dụ: 375 x 812 cho iPhone X.

4.3 Đặt tên artboard

• Đặt tên mô tả (ví dụ: “Login Screen”) để dễ quản lý. Đặt tên bằng cách double-click vào tiêu đề artboard trong Layers Panel.

4.4 Thiết lập Grid và Layout

• Vào View > Canvas > Show Layout → Edit Layout.
• Chọn Column Count (12), Gutter (20), Margin (16). Đây là chuẩn thiết kế responsive cho web.
• Bật Show Grid nếu cần (View > Canvas > Show Grid). Grid giúp căn chỉnh chính xác.

5. Vẽ các thành phần UI cơ bản

5.1 Vẽ hình chữ nhật (Rectangle)

1. Chọn Insert > Shape > Rectangle hoặc nhấn R.
2. Kéo trên canvas để tạo hình dạng.
3. Trong Inspector, chỉnh Width, Height, Corner Radius (để bo góc).
4. Đặt màu fill và border (stroke). Đối với button, thường dùng Fill: #007AFF và Border: none.

5.2 Vẽ hình elip (Oval)

• Dùng phím tắt O. Thường dùng cho avatar, icon vòng tròn.

5.3 Thêm text

1. Chọn Insert > Text hoặc nhấn T.
2. Click vào vị trí muốn chèn, nhập nội dung.
3. Trong Inspector, thiết lập Font, Size, Weight, Line Height, Letter Spacing, Color.
4. Sử dụng Text Styles (bên dưới Layer → Create Text Style) để tái sử dụng font cho toàn project.

5.4 Tạo button (nút)

• Vẽ một rectangle, thêm text lên trên, nhóm chúng (⌘G). Đặt tên layer là Button/Primary.
• Tạo Symbol: Chọn nhóm → Create Symbol (⌘Y). Khi cần dùng lại, kéo Symbol từ Assets vào bất kỳ artboard nào.

5.5 Thêm icon

• Có thể kéo icon SVG vào Sketch, hoặc dùng plugin Iconify để tìm và chèn nhanh.
• Đặt icon vào Symbol nếu muốn tái sử dụng.

6. Sử dụng Symbols và Libraries

6.1 Symbols là gì?

Symbols là các thành phần UI được lưu trữ dưới dạng mẫu có thể tái sử dụng. Khi bạn chỉnh sửa Symbol gốc, mọi instance (bản sao) sẽ tự động cập nhật.

6-1.1 Tạo Symbol

Có thể bạn quan tâm: Cách Vẽ Rối: Hướng Dẫn Từ Cơ Bản Đến Nâng Cao Để Tạo Ra Những Tác Phẩm Độc Đáo

1. Chọn các layer muốn gộp (ví dụ: button, header).
2. Nhấn ⌘Y hoặc Create Symbol.
3. Đặt tên có cấu trúc: Button/Primary, Header/NavBar.

6-1.2 Override (Ghi đè)

• Khi chèn Symbol vào artboard, bạn có thể ghi đè nội dung text, hình ảnh, màu sắc.
• Để ghi đè, double-click Symbol, chọn layer con, sau đó chỉnh trong Overrides (bên dưới Inspector).

6-1.3 Libraries

• Libraries cho phép chia sẻ Symbols, Text Styles, Colors giữa các file.
• Để tạo Library: File > Save as Library…. Sau đó bật trong Preferences > Libraries để dùng trong dự án khác.

7. Thiết kế responsive và Auto Layout

7.1 Khái niệm Auto Layout

Auto Layout giúp các thành phần tự động thay đổi kích thước và vị trí dựa trên nội dung và constraints (ràng buộc). Tính năng này rất quan trọng khi thiết kế UI cho nhiều kích thước màn hình.

7.2 Cài đặt Auto Layout (plugin)

• Cài plugin Auto Layout (by Sketch) qua Plugins > Manage Plugins.
• Sau khi cài, chọn một Symbol, sau đó Plugins > Auto Layout > Add Auto Layout.

7.3 Áp dụng Auto Layout

1. Chọn Symbol Button/Primary.
2. Thêm Horizontal Padding (16) và Vertical Padding (12) để đảm bảo nội dung text luôn ở trung tâm.
3. Thiết lập Alignment (Center) và Distribution (Space Between) cho các yếu tố con.
4. Khi thay đổi nội dung text (ví dụ: “Sign In” → “Sign In to Your Account”), chiều rộng button sẽ tự động mở rộng.

7.4 Kiểm tra trên các artboard khác nhau

• Sao chép Symbol vào artboard có kích thước khác (iPhone, iPad, Desktop) để xem cách tự động điều chỉnh.

8. Quản lý màu sắc và Typography

8.1 Color Styles

1. Chọn một layer có màu fill.
2. Trong Inspector, nhấn biểu tượng + bên cạnh Fill → Create Color Style.
3. Đặt tên (ví dụ: Primary/Blue) và lưu.
4. Khi cần thay đổi màu chủ đề, chỉnh màu trong Color Styles → mọi thành phần sử dụng sẽ cập nhật tự động.

8.2 Text Styles

• Tương tự như màu, tạo Text Style cho các tiêu đề, body, caption.
• Ví dụ: Heading/H1, Body/Regular.

8.3 Sử dụng Assets Panel

• Mở Assets (trong sidebar) → chuyển sang tab Colors và Text.
• Kéo thả style vào layer để áp dụng nhanh.

9. Prototyping cơ bản trong Sketch

Mặc dù Sketch không mạnh về prototyping như Figma hay Adobe XD, nhưng vẫn hỗ trợ tạo link giữa các artboard.

9.1 Tạo link chuyển trang

1. Chọn một layer (ví dụ: button “Next”).
2. Trong Inspector, chuyển sang tab Prototype.
3. Nhấn + → kéo mũi tên tới artboard đích (ví dụ: “Home Screen”).
4. Chọn animation: Dissolve, Slide, Push… và thời gian (duration).

9.2 Xem preview

Có thể bạn quan tâm: Cách Vẽ Robin: Hướng Dẫn Từ Cơ Bản Đến Nâng Cao Cho Người Mới Bắt Đầu

• Nhấn ⌘\ (Command + ) để mở Preview.
• Click vào các button để kiểm tra chuyển trang.

9.3 Xuất prototype

• Export qua Sketch Cloud: File > Share > Publish to Sketch Cloud.
• Nhận link để chia sẻ với khách hàng hoặc đồng nghiệp.

10. Xuất file và handoff cho developer

10.1 Export assets

• Chọn layer hoặc Symbol → Make Exportable trong Inspector.
• Đặt định dạng (PNG, JPEG, SVG, PDF), độ phân giải (1x, 2x, 3x) và tên.
• Click Export → lưu vào thư mục dự án.

10.2 Sử dụng Zeplin / Avocode

• Tải plugin Zeplin hoặc Avocode.
• Khi muốn handoff, chọn Plugins > Zeplin > Export Selected Artboards.
• Các developer sẽ nhận được spec, CSS, Swift, Android code tự động.

10.3 Tài liệu thiết kế (Design System)

• Tạo một file riêng “Design System” chứa:
• Colors, Typography, Iconography, Components (Symbols).
• Sử dụng Libraries để chia sẻ trong toàn công ty.

11. Các phím tắt quan trọng giúp tăng năng suất

Phím tắt	Chức năng
⌘N	Tạo file mới
⌘O	Mở file
⌘S	Lưu
⌘Shift+S	Save As…
⌘Z	Undo
⇧⌘Z	Redo
V	Select tool
R	Rectangle
O	Oval
T	Text
A	Artboard
⌘Y	Create Symbol
⇧⌘Y	Detach Symbol
⌘G	Group
⇧⌘G	Ungroup
⌘D	Duplicate
⌘/	Show/hide UI
⌘+ / ⌘-	Zoom in/out
Space + kéo	Pan canvas
⌘K	Show/hide Sketch Cloud

Học và luyện tập các phím tắt này sẽ giảm thời gian thao tác đáng kể.

12. Thực hành: Thiết kế màn hình Đăng nhập (Login) hoàn chỉnh

12.1 Bước 1: Tạo artboard

• Chọn iPhone 14 (390 x 844).

12.2 Bước 2: Thêm logo

• Dùng Insert > Image → kéo logo PNG.
• Đặt ở trung tâm trên cùng, kích thước 80×80.

12.3 Bước 3: Thêm tiêu đề

• Text: “Welcome Back!” → Font: SF Pro Display, 28pt, Bold, Color: #111111.

12.4 Bước 4: Thêm input fields

• Tạo rectangle 320×48, bo góc 8, border 1px #E0E0E0.
• Thêm text placeholder “Email” (gray #A0A0A0), align left.
• Nhóm rectangle + text → Create Symbol → đặt tên Input/Textfield.
• Nhân bản (⌘D) để tạo “Password” field, đổi placeholder.

12.5 Bước 5: Thêm button

• Rectangle 320×48, fill #007AFF, radius 8.
• Text “Sign In”, font SF Pro, 17pt, weight Medium, color White.
• Nhóm → Symbol Button/Primary.

12.6 Bước 6: Thêm link “Forgot password?”

• Text “Forgot password?” → Font 15pt, color #007AFF.
• Đặt dưới button, align center.

12.7 Bước 7: Áp dụng Auto Layout

• Vào Symbol Input/Textfield, thêm padding 12 (vertical) và 16 (horizontal).
• Đối với Button/Primary, thêm padding 12 vertical, 16 horizontal.
• Khi thay đổi độ dài placeholder, các thành phần sẽ tự điều chỉnh.

12.8 Bước 8: Kiểm tra responsive

Có thể bạn quan tâm: Cách Vẽ Rinnegan: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

• Sao chép artboard → đổi kích thước iPad (768×1024). Các Symbol sẽ tự mở rộng dựa trên padding.

12.9 Bước 9: Export và handoff

• Chọn artboard → Make Exportable → PNG 1x, 2x.
• Export → Đưa cho developer.

Kết quả: Bạn đã hoàn thành một màn hình login chuẩn, sử dụng Symbol, Auto Layout, Color & Text Styles – đây là quy trình chuẩn cho mọi dự án UI/UX.

13. Mẹo và thủ thuật nâng cao

13.1 Sử dụng “Resize Constraints”

• Khi không dùng Auto Layout, bạn có thể thiết lập constraints (Left, Right, Top, Bottom) để layer tự động thay đổi kích thước khi artboard thay đổi.

13.2 Tạo “Responsive Grid”

• Sử dụng plugin Responsive Grid để tạo grid 12 cột, 16px margin, 8px gutter, giúp thiết kế responsive nhanh hơn.

13.3 Đặt “Shared Styles” cho shadows

• Tạo một Layer Style cho shadow (X:0, Y:2, Blur:4, Opacity:10%). Khi cần áp dụng, chỉ cần kéo style vào layer.

13.4 Sử dụng “Nested Symbols”

• Symbol có thể chứa Symbol khác. Ví dụ: Card Symbol chứa Avatar Symbol và Button Symbol. Khi cập nhật Button, mọi Card đều cập nhật.

13.5 Export cho multiple platforms

• Khi export, có thể đặt các preset (iOS, Android, Web) trong Export Settings, tự động tạo folder cho từng platform.

14. Tối ưu hoá workflow làm việc nhóm

14.1 Sketch Cloud

• Lưu file trên Sketch Cloud → đồng bộ tự động.
• Cho phép nhận xét trực tiếp trên artboard (bằng công cụ Comment).
• Quản lý phiên bản: File > Version History.

14.2 Branching (Chi nhánh)

• Khi làm việc trên tính năng mới, tạo Branch trong Sketch Cloud → tránh xung đột.
• Khi hoàn thiện, merge lại vào main branch.

14.3 Documentation

• Tạo một artboard “Style Guide” trong cùng file, liệt kê:
• Color palette.
• Typography.
• Component library (Symbols).
• Interaction guidelines (animation, spacing).

15. Kết luận

Việc học cách vẽ Sketch không chỉ dừng lại ở việc biết cách tạo ra các hình dạng cơ bản mà còn bao gồm việc tối ưu hoá quy trình thiết kế qua Symbols, Libraries, Auto Layout và các plugin hỗ trợ. Bằng việc nắm vững những kiến thức này, bạn sẽ:

• Tiết kiệm thời gian: Tái sử dụng component, giảm công việc lặp lại.
• Đảm bảo nhất quán: Màu sắc, typography, spacing luôn đồng nhất trong toàn dự án.
• Dễ dàng hợp tác: Sketch Cloud, version control và handoff chuyên nghiệp giúp làm việc nhóm suôn sẻ.
• Sẵn sàng mở rộng: Các thiết kế có thể nhanh chóng thích nghi với đa nền tảng (mobile, web, desktop).

Hãy bắt tay vào thực hành ngay hôm nay: tạo một dự án mới, áp dụng các bước từ tạo artboard, vẽ component, tạo Symbol cho tới export và handoff. Khi đã thành thạo, bạn sẽ cảm nhận được sức mạnh của Sketch trong việc biến ý tưởng thành sản phẩm thiết kế chất lượng cao, sẵn sàng bước vào giai đoạn phát triển và đưa ra thị trường.

Chúc bạn thành công và luôn sáng tạo!