Figma cho người mới bắt đầu Ứng dụng vào thiết kế, quản lý và sử dụng IconButton

TÀI LIỆU
THIẾT KẾ, QUẢN LÝ VÀ SỬ DỤNG ICON/BUTTON TRONG QUÁ TRÌNH THIẾT KẾ
UI/UX TRÊN FIGMA CHO NGƯỜI MỚI BẮT ĐẦU


MỤC LỤC
1. Tổng quan về tài liệu.......................................................................................3
1.1

. Thông tin chung......................................................................................3

1.1.1.

Mục đích ............................................................................................3

1.1.2.

Đối tượng sử dụng.............................................................................3

1.1.3.

Phạm vi...............................................................................................3

1.1.4.

Cấu trúc tài liệu...................................................................................4

1.2. Các khái niệm...........................................................................................4
1.2.1.

Icon.....................................................................................................4

1.2.2.

Button.................................................................................................5

1.2.3.

Công cụ thiết kế FIGMA.....................................................................6

2. Thiết kế Icon/Button........................................................................................8
2.1. Các công cụ Figma hỗ trợ để thiết kế.......................................................8
2.1.1.

Các công cụ thiết kế cơ bản...............................................................8

2.1.2.

Các công cụ hỗ trợ...........................................................................15

2.1.3.

Các công cụ thiết kế mở rộng..........................................................19

2.2. Thiết kế Icon trên Figma.........................................................................22
2.2.1. Giới thiệu về Icon template – Công cụ giúp người thiết kế có thể thiết
kế Icon hiệu quả hơn.....................................................................................22
2.2.2.

Các bước thiết kế Icon trên Figma...................................................26

2.2.3. Một số trường hợp thiết kế chi tiết Icon đặc biệt nhưng phổ biến......28
2.2.4. Một số lưu ý khi thiết kế Icon...............................................................31
2.3. Thiết kế Button trên Figma.....................................................................33
2.3.1. Các thành phần và trạng thái của một Button.....................................33
2.3.2. Cách thiết kế Button............................................................................33
3. Quản lý và sử dụng Icon/Button trên figma...................................................35
3.1. Tổ chức, Sắp xếp và lưu trữ Icon/Button trên Figma.............................35
3.1.1. Công cụ sử dụng để tổ chức, sắp xếp và lưu trữ Icon/Button trên
Figma 35
3.1.2.

Tổ chức Icon.....................................................................................37

3.1.3.

Sắp xếp và lưu trữ Icon/Button.........................................................38
1 / 42


3.2. Tối ưu tái sử dụng Icon/Button trên Figma.............................................39
3.3. Đồng bộ Icon dưới dạng Vector được đưa vào Figma từ các nguồn bên
ngoài 40
4. Tài liệu tham khảo...........................................................................................41

2 / 42


1. TỔNG QUAN VỀ TÀI LIỆU
1.1 . THÔNG TIN CHUNG
1.1.1. Mục đích

-

Chung:
 Nắm được sơ lược về cơng cụ thiết kế giao diện Figma
 Nắm được định dạng ảnh Vector, cơng dụng của định dạng ảnh Vector.

-

Thiết kế:
 Có thể chủ động thiết kế Icon dưới dạng vector để hạn chế phụ thuộc
vào nguồn Icon có sẵn.
 Có thể tùy biến thiết kế Icon theo ý tưởng của mình.


-

Tối ưu thiết kế Button.

Quản lý:
 Có thể quản lý được Icon/Button hiệu quả để dễ dàng khi tìm kiếm, sử
dụng.
 Quản lý để tối ưu tái sử dụng Icon/Button.
 Đồng bộ Icon khi được Import từ các nguồn khác về quản lý trên Figma.

-

Sử dụng:
 Sử dụng Icon và Button làm thành phần thiết kế giao diện một cách tối
ưu dựa trên việc quản lý có khoa học.

1.1.2. Đối tượng sử dụng
- Đối tượng sử dụng tài liệu: Người muốn học Figma cơ bản, tập ứng dụng vào việc
thiết kế và quản lý Icon/Button trong quá trình thiết kế UI/UX
1.1.3. Phạm vi
-

Phạm vi nội dung tài liệu:
 Đối tượng thiết kế: Icon, Button dạng nút bấm.
 Tài liệu tập trung vào việc vẽ Icon/Button, không đề cập quá sâu về phần
màu sắc.

-

Phạm vi sử dụng công cụ thiết kế:
 Công cụ thiết kế chính đồng thời để quản lý và sử dụng trực tiếp
Icon/Button: Figma.
3 / 42


1.1.4. Cấu trúc tài liệu
Tài liệu được thực hiện với 3 phần lớn:
-

Phần 1: Tổng quan về tài liệu
 Giới thiệu chung về mục đích, đối tượng sử dụng tài liệu, phạm vi và cấu
trúc tài liệu.
 Đưa ra khái niệm cho các đối tượng chính xuất hiện trong tài liệu.

-

Phần 2: Thiết kế Icon/Button
 Giới thiệu các thành phần thiết kế trên Figma hỗ trợ thiết kế Icon/Button
 Đi vào chi tiết cách thiết kế Icon/Button trên Figma.

-

Phần 3: Quản lý và sử dụng Icon/Button
 Khai thác các công cụ được Figma hỗ trợ để sắp xếp và lưu trữ Icon/Button
hiêu quả.
 Cách quản lý để có thể tối ưu tái sử dụng Icon/Button.

1.2.

CÁC KHÁI NIỆM

1.2.1. Icon
-

Khái niệm: Là tập hợp các chi tiết, hình vẽ được ghép với nhau tạo thành một
biểu tượng giúp cho con người khi nhìn vào có thể liên tưởng tới một hành
động/một sự kiện/cơng việc/thơng tin v.v… nào đó.

-

Phân loại: Dựa vào tính chất minh họa của Icon mà được phân thành 2 loại
 Icon khơng giống với hình dạng thực tế nào nhưng lại được sử dụng như
một thói quen của người dùng:

 Icon mơ phỏng lại theo hình ảnh thực tế như:

-

Công dụng của Icon:
4 / 42


 Nhìn chung Icon có mục đích cơ bản là đem lại cho người dùng một cái
nhìn trực quan hơn về đối tượng mà Icon muốn trỏ tới.
 Minh họa cho một hành động/sự kiện/cơng việc/thơng tin v.v… nào đó.
 Làm cho con người khi nhìn vào có thể dễ dàng liên tưởng tới hành
động/sự kiện/công việc/thông tin v.v… mà người sử dụng Icon muốn
truyền tải.
1.2.2. Button
-

Khái niệm: Button hay còn gọi là “Nút chức năng/Nút điều hướng”, là thành
phần thường xuyên được sử dụng khi thiết kế UI.

-

Vai trò: Hỗ trợ người dùng tương tác và trải nghiệm ứng dụng/website một
cách dễ dàng hơn.

-

Phân loại: Dựa trên hình thái thể hiện của Button, có thể chia Button thành 3
dạng chính
 Dạng 1: Button dạng nút bấm chức năng/điều hướng – Đây là dạng
Button phổ biến nhất khi thiết kế UI/UX. Thông thường, Button dạng này
sẽ bao gồm các thành phần là khung, text và Icon, các thành phần này

có thể kết hợp với nhau hoặc đứng riêng lẻ. Button dạng này thơng
thường có các trạng thái như: Default, hover, Enable, On Click. Một số ví
dụ về Button dạng nút bấm chức năng/điều hướng như sau:

 Dạng 2: Button dạng mở rộng (Expanding Button). Đây là một Button
dạng động và luôn luôn phải đi kèm 2 trạng thái: Thu gọn và mở rộng
nên khi thiết kế, người thiết kế cần phải thiết kế đồng thời 2 trạng thái
trên, ngoài ra thì có thể thiết kế các trạng thái khác của Button khi người
dùng thao tác trên nó như Button dạng 1. Ví dụ:

5 / 42


 Dạng 3: Button dạng công tắc (Toggle Button), đây cũng là một
Button dạng động, thông thường Button này được sử dụng với mục đích
bật/tắt một chức năng nào đó trên chương trình. Ví dụ như:

-

Với phạm vi tài liệu này, tài liệu sẽ hướng dẫn thiết kế và quản lý Button dạng 1:
Button dạng nút bấm chức năng/điều hướng. Các Button dạng 2 và 3 thực chất
cũng là biến thể của Button dạng 1, khác một chút là chúng ln ln có 2 trạng
thái để thể hiện tính động. Tài liệu dù chỉ nói đến thiết kế Button dạng 1 nhưng
có thể từ đó suy ra cách thiết kế và quản lý 2 dạng Button cịn lại.

1.2.3. Cơng cụ thiết kế FIGMA
-

FIGMA là một công cụ thiết kế Vector được ứng dụng nhiều trong việc thiết kế
UI/UX.

-

Nền tảng sử dụng: Website, Appication trên Desktop, Mobile App.

-

Hệ điều hành hỗ trợ Application trên Dekstop: Window và MACOS và Linux

6 / 42


-

Ưu điểm nổi bật:
 Có thể làm việc đội nhóm do Figma được phét triển dựa trên điện toán
đám mây và cũng phát triển rất mạnh về việc hỗ trợ người dùng hoạt
động đối nhóm như: Tạo Project và gán người tham gia vào project, hiển
thị con trỏ chuột của những người đang thao tác trên cùng một file, có
phần comment trực tiếp trên FIGMA.
 Là một cơng cụ có phiên bản miễn phí, phù hợp cho những người muốn
tiếp cận công cụ thiết kế để học tập, luyện tập trước khi quyết định mua
các phiên bản cao hơn cho cơng việc của mình.
 Có cộng đồng thiết kế, giúp người dùng có thể tham khảo ý tưởng thiết
kế từ nhiều nguồn khác nhau trên cộng đồng.
 Kho plugin (chương trình mở rộng) đa dạng.
 Tích hợp prototyping giúp hiển thị giao diện mẫu ngay trên phần mềm.

-

Nhược điểm của FIGMA:
 Với bản WEB, phải phụ thuộc vào chất lượng internet, nếu internet bị
gián đoạn cũng sẽ làm công việc thiết kế gián đoạn theo hoặc khi server
của FIGMA gặp vấn đề cũng sẽ làm ảnh hưởng tới việc thiết kế.
 Với bản miễn phí thì có rất nhiều hạn chế như: Một file thiết kế chỉ tạo
được 3 page thiết kế, chỉ xem được lịch sử file trong 30 ngày gần nhất.
 Chỉ chạy trên hệ thống có RAM 4G trở lên.

7 / 42


2.

THIẾT KẾ ICON/BUTTON

2.1.
-

CÁC CÔNG CỤ FIGMA HỖ TRỢ ĐỂ THIẾT KẾ
Figma cung cấp cho người thiết kế rất nhiều công cụ để thiết kế, thế nhưng với
phạm vi của tài liệu này, các công cụ cơ bản được sử dụng sẽ được trình bày ở
dưới đây.

2.1.1. Các cơng cụ thiết kế cơ bản
FIGMA cung cấp cho người dùng một bộ các công cụ thiết kế cơ bản nhất của
một phần mềm thiết kế Vector như bộ Move Tools, Region Tools, Shape Tools,
Drawing Tools, Text. Chi tiết được trình bày dưới đây.
2.1.1.1.
-

Move Tools

Ý nghĩa: Move Tools là các công cụ giúp chọn, di chuyển, phóng to/thu nhỏ,
xoay các thành phần được thiết kế trên FIGMA.

-

Các công cụ trên Move Tools: Move, Scale

-

Move (Phím tắt để gọi Move: V): Là cơng cụ giúp chọn/di chuyển/phóng to thu
nhỏ thành phần một cách tự do. Người dùng có thể phóng to/thu nhỏ các thành
phần có hệ thống bằng Move qua việc kéo chuột đồng thời nhấn phím Shift trên
bàn phím.

-

Scale (Phím tắt đề gọi Scale: K): Là cơng cụ giúp người dùng có thể phóng
to/thu nhỏ đối tượng thiết kế có hệ thống, đồng thời các thông số chi tiết của đối
tượng cũng sẽ thay đổi theo trong q trình phóng to/thu nhỏ
8 / 42


-

So sánh Move và Scale:
STT
1

Chức năng tương tự nhau

Chức năng khác nhau

- Có thể chọn, xoay, thu Move:
phóng đối tượng

+ Thu/phóng đối tượng theo kích
thước tự do, muốn thu phóng theo hệ
thống thì cần đồng thời nhấn thêm
phím Shift trên bàn phím.
+ Khơng làm thay đổi thơng số của đối
tượng được thu phóng (nếu đối tượng
khơng dùng chức năng outline stroke)

2

Scale:
+ Thu/phóng đối tượng có hệ thống.
+ Làm thay đổi thơng số của đối tượng
được thu phóng tùy theo tỉ lệ thu
phóng.

2.1.1.2.
-

Region Tools

Ý nghĩa: Là nhóm cơng cụ giúp khoanh vùng khu vực cho các đối tượng ở
trong đó ví dụ như khoanh vùng thiết kế (Frame), khoanh vùng cần cắt để

Export (Slice), tạo một vùng làm việc mới (Section).

-

Các cơng cụ trong nhóm Region Tools: Frame, Slice, Section

9 / 42


-

Frame (Phím tắt để gọi Frame là A hoặc F): Làm một công cụ để khoanh
vùng thiết kế, thông thường trong thiết kế UI/UX thì Frame hay được sử dụng
để khoanh vùng màn hình hiển thị, khoanh vùng một thành phần nào đó như
Icon/Button.
 Người dùng có thể thực hiện kéo thả một Frame theo kích cỡ tùy thích
hoặc có thể sử dụng các Template được FIGMA hỗ trợ như sau ở bên
Panel công cụ hỗ trợ bên tay phải:

 Với Frame, FIGMA có cung cấp thêm một cơng cụ hỗ trợ khác là Auto
Layout, sẽ được trình bày tại phần 1.3 Các cơng cụ hỗ trợ
-

Section (Phím tắt để gọi Section là Shift + S): Đây là một chức năng khá mới
của FIGMA. Section có tác dụng là tạo ra một khu vực để chứa đựng các thiết
kế của mình bên trong nó. Người dùng có thể sử dụng Section để chia các khu
vực thiết kế trong một màn Page thiết kế của FIGMA thành nhiều khu vực và
đặt tên cho chúng. Dưới đây là ví dụ chia Section

10 / 42

 Mối tương quan giữa Section và Frame: Section có thể chứa Frame nhưng
Frame không thể chứa Section, Section và Frame có thể chuyển đổi qua lại
cho nhau.
-

Slice (Phím tắt để gọi Slice là S): Đây là chức năng giúp người dùng có thể
lựa chọn các vùng để Export các thiết kế trên FIGMA. Cách Export:

2.1.1.3.
-

Shape Tools

Ý nghĩa: Giúp người dùng có thể thực hiện vẽ nhanh một số các hình khối và
tùy chỉnh trên những hình khối đó.

-

Các hình khối được FIGMA hỗ trợ:

11 / 42


-

Rectangle (Phím tắt: R): Giúp người dùng vẽ các hình khối dạng hình chữ
nhật/hình vng. Kéo thả để tạo các hình chữ nhật với kích thước tự do, vừa
kéo thả vừa nhấn phím Shift để tạo hình vng.

 Người dùng có thể bo trịn góc vng ngay trên hình bằng cách chọn
hình vừa vẽ, bốn góc vng sẽ hiện ra 4 hình trịn nhỏ, kéo 4 hình trịn
này hướng vào trong (tăng kích thước bo trịn) hoặc hướng ra ngồi
(giảm bo trịn), nếu chỉ muốn bo trịn 1 góc thì chọn góc muốn bo trịn,
nhấn Alt đồng thời kéo để bo góc tùy mong muốn.

-

Line (Phím tắt: L): Giúp người dùng vẽ các đường thẳng.

12 / 42


-

Arrow (Phím tắt: Shift + L): Thực chất đay là một hình khối dạng line nhưng
thêm mũi tên ở đầu và khi kéo thả tạo mũi tên, đầu mũi tên sẽ được định hướng
trong q trình kéo thả.

-

Ellipse (Phím tắt: O): Giúp người dùng có thể vẽ các hình Ellipse hoặc hình
trịn. Khi kéo thả thơng thường, hình được vẽ ra sẽ có kích cỡ tùy theo người
dùng nhưng nếu vừa kéo thả vừa nhấn Shift thì hình vẽ được tạo ra sẽ là hình
trịn.
 Một số thao tác trên Ellipse Shapes:

-

Polygon: Giúp người dùng vẽ hình đã giác, khi chọn Polygon, hình vẽ ban đầu

được vẽ ra là hình tam giác, nhưng người dùng có thể hồn tồn sửa số lượng
cạnh của hình.
 Một số thao tác trên Polygon: Bo góc, tăng/giảm số cạnh

13 / 42



-

Star: Giúp người dùng có thể vẽ các hình khối dạng ngơi sao. Các thao tác có
thể có trên Star là: Tăng/giảm độ hướng tâm của các cánh, Bo tròn các cánh,
Tăng số cánh trên ngôi sao.

2.1.1.4.
-

Drawing Tools

Ý nghĩa: Là cơng cụ giúp người dùng có thể vẽ tự do theo nhu cầu mà khơng
cần phụ thuộc vào những hình khối được hỗ trợ sẵn.

-

Nhóm cơng cụ này bao gồm: Pen tool và Pencil tool

14 / 42


-

Pen tool (Phím tắt để gọi Pen là P): Là công cụ giúp người dùng vẽ các
đường nét dựa vào việc nối các điểm neo và điều chỉnh đường con bằng các
đường định hướng.

 Khi sử dụng Pen để tạo ra các điểm neo có thế click chuột đến các vị trí
khác nhau để tạo nhiều điểm neo khác nhau. Khi muốn tạo đường cong,
người dùng thực hiện nhấn giữ và di chuột để sinh ra các đường định
hướng. Nếu muốn tạo các đường định hướng trước khi vẽ thì tại điểm
neo hiện thời, nhấn giữ Alt đồng thời di chuột đến khi tạo ra đường định
hướng như ý.
-

Pencil tool: Là cơng cụ giúp người dùng có thể vẽ các đường nét một cách tự
do. Nếu sử dụng công cụ này thì nên sử dụng bảng vẽ điện tử thay vì dùng
chuột, như vậy các đường nét tạo ra sẽ dễ dàng được như mong muốn của
mình hơn. FIGMA khơng hỗ trợ quá nhiều hiệu ứng cho công cụ này nên đây có
thể coi là một cơng cụ ít khi được sử dụng để thiết kế UI/UX trên FIGMA.

2.1.1.5. Text
-

Ý nghĩa: Giúp người dùng có thể thêm chữ vào thiết kế của mình.

-

Phím tắt: T

2.1.2. Các cơng cụ hỗ trợ
2.1.2.1.

-

Các loại căn chỉnh

Ý nghĩa: Giúp căn chỉnh các đối tượng trong một nhóm đối tượng (>=2 chi
tiết)/Frame một cách nhanh chóng và dễ dàng hơn.
15 / 42


-

Các loại căn chỉnh:

2.1.2.2.
-

Nhóm các thơng số chung của các đối tượng thiết kế

Ý nghĩa: Giúp người dùng có thể chỉnh sửa thơng số của các đối tượng chính
xác hơn

-

Nhóm các thông số chung của các đối tượng thiết kế:

2.1.2.3.
-

AutoLayout và Constrain

Thơng tin chung: AutoLayout và Constrain là hai tính năng hỗ trợ người dùng tự
động sắp xếp và thay đổi kích thước cũng như khoảng cách của các thành
phần trong một Frame khi có những thao tác thay đổi kích thước. Mặc dù hai
tính năng này có chung mục đích nhưng lại có cách hoạt động hồn tồn khác
nhau. Cụ thể như sau:

16 / 42


-

AutoLayout sẽ kiểm sốt cho Frame thích ứng với các thành phần ở trong nó
khi các thành phần có sự thay đổi. Khi mà tạo ra một AutoLayout, thông thường
người dùng sẽ thiết kế các chi tiết trước sau đó mới nhóm chúng lại thành một
AutoLayout. Khi nhóm lại lập tức sẽ xuất hiện một Frame trong suốt bao bọc
quanh các thành phần, và khi các thành phần thay đổi => Frame cũng thay đổi
theo. Một số thông số trong AutoLayout:

-

Constrain thì ngược lại, tính năng này sẽ giúp người dùng hiệu chỉnh các thành
phần dựa trên việc thao tác thay đổi kích cỡ trên Frame, thơng thường để dùng
Constrain hiệu quả, các nhà thiết kế UI/UX sẽ kết hợp thêm với lưới
(Grid).Chính bởi việc các thành phần sẽ được hiệu chỉnh theo Frame nên
Constrain sẽ phải được thiết lập trên các thành phần. Một số thông số hỗ trợ
căn chỉnh khi sử dụng Constrain như sau:

 Trục ngang (Trục X)
 Left: Giữ vị trí của thành phần so với cạnh trái của frame
17 / 42

 Right: Giữ vị trí của thành phần so với cạnh phải của frame
 Left and right: Giữ kích thước và vị trí của layer so với hai cạnh
của frame. Khi thay đổi kích thước có thể khiến các thành phần
phóng to hoặc thu nhỏ dọc theo trục X.
 Centre: Giữ vị trí của thành phần so với trục cạnh ngang của
frame
 Scale: Xác định tỷ lệ phần trăm của kích thước và vị trí thành phần
so với kích thước frame. Scale sẽ giúp duy trì các tỷ lệ đó khi thay
đổi kích thước.
 Trục dọc (Trục Y)
 Top: Giữ vị trí của layer so với cạnh trên của frame
 Bottom: Giữ vị trí của layer so với cạnh dưới của frame
 Top and Bottom: Giữ kích thước của layer và định vị chúng với
cạnh trên và cạnh dưới của frame. Khi thay đổi kích thước có thể
khiến các layer phóng to hoặc thu nhỏ lại dọc theo trục Y.
 Scale: Xác định tỷ lệ phần trăm của kích thước và vị trí layer so
với kích thước frame. Scale sẽ giúp bạn duy trì các tỷ lệ đó khi
bạn thay đổi kích thước.
-

Đặc điểm chung: Chỉ tác động lên những chi tiết/thành phần nằm trong Frame

2.1.2.4.
-

Fill, Stroke và Effect

Fill: là một tính năng giúp người thiết kế có thể đổ màu cho những chi tiết thiết

kế của mình.

18 / 42


-

Stroke: là tính năng thêm viền cho đối tượng/thành phần thiết kế:

-

Effect: là tính năng giúp thêm hiệu ứng cho đối tượng như đổ bóng, làm mờ
nền, làm mờ chính đối tượng.

19 / 42