Học Figma cơ bản

Bài viết này sẽ giúp bạn nắm được cơ bản cách thiết kế trên Figma. Để xem thêm thông tin và các tính năng vui lòng truy cập link sau: help.figma.com.

Nội dung tài liệu gồm các mục

  1. Frames
  2. Constraints
  3. Components
  4. Styles
  5. Smart Selection
  6. Exporting
  7. Commenting
  8. Sharing

1.Frames

Frames trong Figma  giống như các artboards trong các công cụ thiết kế khác. Frames là tập hợp các thành phần cho thiết kế của bạn và đóng vai trò là top-level container chứa hầu hết các thành phần khác được tạo ra trên Figma. Có một số cách để tạo ra Frame trên Figma như sau:

Tạo Frame với kích thước tùy chỉnh
Tạo frame có kích thước tùy chỉnh bằng cách chọn vào biểu tượng frame trên thanh công cụ rồi di chuột vẽ vùng tùy ý.

Tạo Frame có kích thước định trước
Tạo các frame có kích thước định trước, ví dụ như kích thước iPhone X, bằng việc chọn trong thanh công cụ Properties ở bên góc phải.

Tạo Frame từ các thành phần đang có
Tạo frame từ các thành phần đang có bằng cách chọn các thành phần đang có rồi nhấn chuột phải và chọn vào Frame Selection trên menu chuột phải.

Thực hành: tạo frame với 3 cách trên

2. Constraints

Constraints cho phép gắn các thành phần trong thiết kế theo các cạnh của Frame cha chứa nó. Nó cho phép xây dựng các layout đáp ứng cho nhiều loại kích thước màn hình thiết bị.

3. Components

Components cho phép tái sử dụng lại các phần đã tồn tại trong thiết kế, giúp giảm thời gian ở những thiết kế và công việc lặp lại. Các components tạo ra thực thể mới thay vì tạo ra bản sao, điều này cho phép ghi đè các thuộc tính trực tiếp trên canvas.

Có 2 khía cạnh của 1 Component:
1. Component chính, sẽ định nghĩa các thuộc tính của Component.
2. Các thực thể, là bản sao của Component cho phép tái sử dụng lại trong thiết kế.
Các thực thể được liên kết tới Component chính, do đó bất kỳ thay đổi nào ở Côpnent chính sẽ được áp vào cho thực thể.

4. Styles

Tính năng styles cho phép định nghĩa tập hợp các thuộc tính như màu sắc, font chữ, các hiệu ứng trên 1 đối tượng mà có thể được tái sử dụng trên toàn bộ thiết kế của cả nhóm. Bất cứ khi nào thay đổi các thuộc tính của Style thì các đối tượng bất kỳ đang dùng Style đó sẽ ngay lập tức được cập nhật.

Cách tạo Color Styles
Chọn đối tượng muốn tạo Style và trong thanh công cụ Properties, click vào biểu tượng Styles cạnh thuộc tính mà bạn muốn lưu lại. Click vào biểu tượng “+” và bạn sẽ được hỏi để cung cấp tên cho Style.

Cách tạo Text Styles
Chọn đoạn text mà bạn muốn tạo Style và click vào biểu tượng Style bên trong thuộc tính text của thanh công cụ Properties. Click vào biểu tượng “+” và bạn sẽ được hỏi cung cấp tên cho Style.

5. Smart Selection

Smart Selection cho phép bạn điều chỉnh khoảng cách giữa các đối tượng một cách nhanh chóng, tạo ra lưới đồng nhất cho các đối tượng được lựa chọn, và sắp xếp lại các đối tượng bên trong layout dạng lưới. Hãy nghĩ tới các layout dạng lưới sử dụng cho các giao diện inbox, new feeds hay photo galleries

Cách Smart Selection làm việc
Smart Selection làm việc tự động dựa trên các đối tượng được chọn hoặc nhóm từ 3 phần tử trở lên. Với các items được lựa chọn, bạn có thể điều chỉnh khoảng cách, vị trí và kích thước của tất cả các items đó chỉ 1 lần bằng việc kéo các xử lý màu hồng.

6. Exporting

Figma hỗ trợ xuất khẩu theo các định dạng PNG, JPG, SVG và PDF. Khi sử dụng Figma trên trình duyệt, việc xuất khẩu sẽ tự động được lưu trữ vào thư mục Download mặc định. Bạn có thể sử dụng ứng dụng Figma trên desktop để có thể lựa chọn thư mục lưu trữ.

Chọn đối tượng để xuất khẩu
Đầu tiên cần chọn các thành phần trên thiết kế muốn xuất khẩu. Bạn có thể xuất khẩu các layer, đối tượng đơn lẻ hay nhiều layer, nhiều đối tượng, từng group hoặc frame riêng lẻ hay nhiều group, nhiều frame hoặc thậm chí xuất khẩu toàn bộ bản vẽ của bạn 1 lúc.

Áp dụng các thiết lập xuất khẩu
Bạn có thể định nghĩa chính xác cách bạn muốn xuất khẩu các đối tượng, các layer hay các frame, bằng việc sử dụng các thiết lập xuất khẩu trên thanh công cụ Properties.

Figma hỗ trợ xuất khẩu theo các định dạng PNG, JPG, SVG và PDF cũng như theo nhiều độ phân giải màn hình khác nhau và nó sẽ tự động thêm hậu tố vào tên file xuất khẩu ra.

Xuất khẩu đối tượng được chọn
Sau khi các thiết lập xuất khẩu được áp dụng cho thành phần được chọn, thành phần dó sẽ được ghi lại trong danh sách xuất khẩu. Sau này bạn có thể xuất khẩu các thành phần được lựa chọn với hành động đơn giản trong tương lai. Tìm kiếm từ khóa “export” trong menu.

7. Commenting

Các comments được thêm vào layer khác trên Figma. Bạn có thể thêm comment vào bất kỳ đâu trên canvas. Comment có thể được thêm vào cả ở bản thiết kế cũng như xem dưới dạng prototype.

Thêm comments
Để thêm, xem hoặc trả lời cho comment, bạn sẽ cần vào chế độ Comment bằng việc click vào biểu tượng Comment trên thanh toolbar. Sau đó, click vào bất kỳ đâu trên canvas để thêm vào comment của bạn. Bạn cũng có thể @mention tới thành viên trong team để anh ấy/cô ấy nhận được email thông báo về comment.

Thông báo comment
Thanh công cụ Properties có các tùy chọn thêm để show các coments đã được xử lý và lựa chọn có nhận hay không nhận email thông báo khi có comment mới hoặc khi có phản hồi cho comment.

8. Sharing

Chia ser file thiết kế trên Figma rất đơn giản. Mở hộp thoại chia sẻ và chỉ rõ quyền hạn hoặc cho phép truy cập vào link chia sẻ. Với link chia sẻ được phép truy cập thì việc chia sẻ đơn giản chỉ là chia sẻ URL của nó.

Phân quyền
Figma có 4 cấp độ truy cập khác nhau: Chỉ xem, Cho phép Sửa, Admin và Chủ sở hữu. Khi bạn chia sẻ 1 file, bạn có thể chỉ định cấp độ truy cập bạn muốn cho từng người.

Chia sẻ một Frame độc lập
Ngoài ra khi chia sẻ 1 file, bạn có thể liên kết tới 1 frame được lựa chọn trên canvas khi đó nó sẽ được phóng to và focus khi người được chia sẻ mở file.

Đăng bởi g2hngoo

Ham học hỏi, thích thể thao. Đam mê sáng tạo. Thích chia sẻ

One thought on “Học Figma cơ bản

Trả lời

Please log in using one of these methods to post your comment:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: