Các tính năng Figma nâng cao nên sử dụng trong project của bạn

longldh

2 years ago

Nội dung:

I. Plugins

II. Pages

III. Một số Shortcut Key hữu dụng

IV. Cách thêm hình ảnh

V. Effect – các hiệu ứng

VI. Styles

VII. Autolayout

VIII. Components và Variants

IX. Nâng cao về Prototype

X. Chia sẻ design cho người khác cùng sửa , Export.

I. Plugins

Cũng như các ứng dụng thiết kế khác, plugin trong Figma sẽ giúp bổ sung các tính năng mà Figma không có sẵn, việc cài đặt plugin Figma rất đơn giản.

1. Đầu tiên ta ấn nút Resources modal trên Toolbar

2. Chọn Plugins và tìm kiếm các loại plugin cần cài

3. Ấn vào plugin đó bạn muốn cài đặt , và cửa số plugin đó sẽ tư hiện ra để cho bạn sử dụng. (trong trường hợp không chạy luôn thì ấn nút “Run” nếu nó có hiện ra)

Điều đặc biệt với các plugin trên Figma là nó có một thư viện chính thức trên web bạn có thể tự do tìm kiếm dễ dàng hơn: https://www.figma.com/community

Dưới đây là một vài plugin hữu ích bạn có thể cài:

Iconify – giúp bạn tìm icon cần thiết nhanh hơn

Unsplash – một bộ sưu tầm ảnh stock lớn dùng luôn trong Figma

Content Reel – một số text placeholder hữu dụng

Table Creator – plugin giúp vẽ bảng tiện hơn.

II. Pages

Tính năng này hoạt động giống như Sheets trong Excel , nếu bạn có nhiều thiết kế khác nhau dùng trong 1 dự án bạn có thể chia ra thành nhiều Page

1. Nhìn sang Panel bên trái màn hình , chọn Layers

2. Chọn Dropdown bền phải, bạn sẽ nhìn thấy tên Page đó , ấn dấu + để thêm và đặt tên Page mới

3. Nếu bạn muốn chuyển design từ Page ban đầu sang trang mới , chỉ cần copy và paste như bình thường.

III. Một số Shortcut Key hữu dụng

Các tổ hợp bàn phím Shortcut key sẽ rất quan trọng trong việc tăng tốc độ làm việc với Figma thay vì phải dùng các Menu và Toolbar liên tục.

Để hiện tất cả các Shortcut Key mà Figma có , ấn CTRL + SHIFT + /

Đây là một số shortcut cơ bản những người mới dùng nên làm quen trước:

I : lấy màu , hoặc chọn 1 object rồi ấn “I” để áp màu được chọn lên

ALT + nhấn kéo thả chuột trái để copy object

CTRL + D để copy object

Giữ nút SHIFT khi di chuyển object để di chuyển theo một đường thẳng.

Chọn một hoặc nhiều object rồi ấn CTRL + ALT + G để nhóm thành frame cho object đó

V: để chuyển sang con trỏ, chế độ chọn object

F + chuột trái: để tạo Frame mặc định kích cỡ 100 x 100

R + chuột trái: để tạo hình chữ nhật mặc định cỡ 100 x 100

O + chuột trái: để tạo hình tròn mặc định cỡ 100 x 100

Nhấn giữ chuột giữa để di chuyển workspace hoặc giữ Space + kéo chuột trái

Shift + 2: Zoom đến object đang chọn

IV. Cách thêm hình ảnh

Figma rất linh hoạt trong việc thêm ảnh vào trong project và vào trong các object đã tạo sẵn

4.1. Cách thêm ảnh cơ bản:

1. Ấn nút như ảnh trên Toolbar và chọn Place image

1. Nhấp chuột trái vào trong workspace.

4.2. Thêm hình vào Frame và Shapes (các hình tứ giác, hình tròn, tam giác…)

1. Chọn một Frame hoặc Shape

2. Nhìn sang panel Design ở mục Fill ấn vào màu có sẵn ở đó hoặc nếu chưa có gì trong danh sách đo thì ấn “+”

3 Chọn mục trong Panel custom như bên dưới rồi nhấn Choose Image để chọn và thêm ảnh.

4.3. Các tùy chọn căn ảnh sau khi đã thêm ảnh.

Sau khi đã thêm ảnh vào một object , Figma cho bạn một số lựa chọn để căn lại ảnh trong trường hợp ảnh không hiển thị theo ý muốn.

Fill: Zoom ảnh vào để lấp đầy object với ảnh đó.

Fit: Cho ảnh vừa với object, Giữ nguyên tỉ lệ độ phân giải của ảnh

Crop: Lấy một phần của ảnh gốc, có hiển thị một viền trắng ở đằng sau để giúp bạn chỉnh phần của hình ảnh mà bạn muốn lấy.

Tile: Hiện ảnh theo một hình lưới lặp lại, có thể chỉnh cỡ % của ảnh để lặp lại.

V. Effect – các hiệu ứng

Chức năng này nằm ở bên dưới cùng của Panel Design , và cho người dùng một số lựa chọn:

Drop Shadow – Đổ bóng
Inner Shadow – Bóng nằm bên trong object
Layer Blur – Làm mờ cả cái object đó.
Background Blur – làm mờ phần nền đứng sau nó.

Cách sử dụng các effect cũng tương tự như nhau, ví dụ Drop Shadow:

1. Nhấn + ở phần Effects và chọn icon của nó.

2. Chỉnh vị trí bóng đổ với X,Y ,blur – giá trị làm mờ, spread – độ lan rộng của bóng, và màu sắc của bóng .

VI. Styles

Thường trong một project sẽ có yêu cầu sử dụng các kiểu màu nhất định, Figma cho phép bạn đặt tên các kiểu màu hay sử dụng và tạo một danh sách cho phép chọn nhanh mà không cần phải chỉnh lại màu mỗi lần cho object mới. Style không chỉ giới hạn ở mục màu mà có cả cho font chữ , Stroke và Effect nữa.

Dưới đây là cách tạo Style cho màu, tương tự với cách thêm của Font , Stroke và Effect.

1. Nhấn vào icon Styles bên góc phải của mục Fill

2. Nhấn thêm ở header Libraries và nhập tên Style

3. Style đã được thêm vào trong danh sách, nhấn lại vào icon Style để chọn Style bạn muốn sử dụng hoặc Tên style ở mục Fill sau khi đã áp dụng Style đó.

VII. Autolayout

Chức năng này rất tiện trong việc thêm bớt các thành phần trong danh sách, để cho các object tự điều chỉnh mà không cần phải sắp xếp lại từng thành phần một.

1. Tạo tối thiểu 2 object, có thể sắp xếp trái phải, trên dưới, rồi chọn 2 object đó

2. Sang panel Design, ấn + ở auto layout, Figma sẽ tự tạo một Frame cho bạn có thuộc tính đó

3. Một khi đã autolayout và thêm hoặc xóa object , các thành phần trong frame autolayout sẽ tự sắp xếp lại vị trí đúng theo hàng .

Figma cho phép bạn lựa chọn sắp xếp các chiều Autolayout từ trên xuống dưới, từ trái sang phải hoặc sang phải ở một mức độ nhất định rồi xuống dưới lặp lại.

Bạn cũng có thể thay đổi khoảng cách giữa 2 object bằng cách đặt tham số Gap.

VIII. Components và Variants

Component giúp bạn dùng lại một object với nhiều thiết kế khác nhau mà không cần phải vẽ lại từ đầu , component cũng được đưa vào trong danh sách Asset nằm ở Panel bên phải tiện lợi cho việc dùng lại thường xuyên.

8.1 Cách tạo component:

1. Chọn object và ấn nút tạo component trên toolbar , nút nằm bên trái cùng

Khi component được tao thành công, viền highlight của component đó sẽ chuyển sang màu tím .

Khi sử dụng component ta không dùng trực tiếp component ta đã tạo mà phải copy component đó ra. Nó sẽ tạo ra các Instance của component đó.

Instance là các bản sao của một component, khi bạn thay đổi component gốc thì các bản Instance cũng sẽ thay đổi theo.

8.2 Variant:

Variant là các thiết kế phụ của một component , ví dụ như một Textbox có thể là một Combo box chỉ thêm một mũi tên bên cạnh , nhờ có Variant ta có thể thay đổi sang thiết kế đó luôn mà không cần phải vẽ thêm chi tiết.

Để tạo Variant, Chọn Component cần tạo rồi ấn nút “+” cùng chỗ nút tạo component nó sẽ tọa ra một object giống như object component gốc

Bạn có thể thay đổi object variant đó tùy theo ý muốn.

Để sử dụng Variant

1. Tạo một instance mới hoặc nhấn instance có sẵn

2. Nhìn sang góc phải có hiện “Property 1” và một danh sách bên cạnh, đây là chỗ thay đổi Variant.

Bạn có thể đổi tên Property và tên Variant ở bảng Layers

IX. Nâng cao về Prototype

9.1 Cách tạo Pop up và cửa sổ phụ

1. Tạo một Frame Pop up có kích thước nhỏ hơn chiều của Frame chính

2. Kết nối một Object của Frame chính với Frame Pop up

3. Chọn Open Overlay

Khi Preview nếu ấn vào Object đã gán trước đó ở Frame chính Pop up sẽ hiện ra.

9.2 Các tùy chỉnh Overlay

Ta có thể chỉnh vị trí hiện Overlay bằng cách chọn Centered sang Manual và chỉnh vị trí Frame Popup tương ứng.

Để đóng Frame Popup đó, ta có thể chọn “Close when clicking outside” hoặc Thêm thuộc tính Interaction > Close Overlay cho một object trong Frame Pop up.

Ta có thể thêm option nền background xuất hiện cùng với Frame Popup đó , mặc định là nền đen với opacity 25%.