Đây là phần 2 của bài học vẽ Figma cơ bản:
Chúng ta sẽ tiếp tục vẽ tiếp các màn hình còn lại của flow trong bài học này: Product Details, Checkout và Confirmation.
Bạn có thể dùng các kỹ năng học được từ bài trước để vẽ phần lớn các trang tiếp theo, về cơ bản ta cần tận dụng một số tính năng Figma để hỗ trợ vẽ nhanh hơn.
Nội dung:
- I.Màn hình Product Details
- Copy các object từ một frame sang frame mà vẫn giữ nguyên vị trí đó.
- Scale Tool, Hotkey K
- Tự động sắp xếp
- II. Màn hình Checkout
- Bo tròn góc các hình
- Frame & Group
- III. Màn hình Confirmation
- IV Tìm và import icon ở các trang bên thứ 3
- V.Tạo Prototype Flow
I. Màn hình Product Details:
1. Copy các object từ một frame sang frame mà vẫn giữ nguyên vị trí đó.
Để tránh mất thêm thời gian vẽ lại các thành phần wireframe ở màn hình mới, ta có thể sử dụng lại một số object ở màn hình trước băng cách copy một object từ frame cũ, chọn frame mới rồi paste trực tiếp, bạn sẽ thấy object sẽ được đặt ở vị trí frame mới giống như frame cũ,
*cách này sẽ hiệu quả hơn nếu 2 frame có kích thước giống như nhau.
- Lần lượt chọn từng object, Copy
- Chọn frame muốn copy đến
- Paste vào Frame mới.
- Copy thêm object ảnh wireframe
Chỉnh lại kích cỡ frame hình ảnh để phù hợp layout mới.
2. Scale Tool, Hotkey K
Scale Tool là công cụ giúp căn chỉnh kích thước, làm to, thu nhỏ của các object mà vẫn giữ nguyên tỷ lệ kích thước của object đó, ta dùng tool này để scale các object có các object con bên trong như Frame, Group để tiện không phải thay đổi từng object một.
Trên thanh công cụ, chọn drop down con trỏ và chọn Scale.
Chọn thanh công cụ
Chọn object cần scale, nhấn và di chuột sang phải để làm object to hơn , sang trái để làm object nhỏ hơn.
Ở panel Design bạn có thể nhập tay trị số scale nếu cần thiết.
3.Tự động sắp xếp
Figma có tính năng tự động sắp xếp object theo thứ tự hình lưới, thẳng hàng, nếu bạn có nhiều object bị lệch.
Bạn có thể chọn tất cả các object, Shift + chuột trái hoặc chuột trái kéo thả để chọn các object.
Ấn nút ở góc phải bên dưới các object đã chọn , Figma sẽ tự động sắp xếp các object.
II. Màn hình Checkout
1.Bo tròn góc các hình
Trên hình ta có nút Purchase có bo tròn,
Để bo tròn các góc của hình chữ nhật.
Ở bảng Design , thay đổi tham số corner radius theo nhu cầu bo tròn.
2. Frame & Group
Trên Figma có 2 lựa chọn để nhóm các object với nhau, nhóm thành Frame hoặc nhóm thành Group.
Frame và Group đều có chức năng giống nhau nhưng Frame có thêm chức năng về vị trí object, ẩn nội dung khi cuộn dọc, cuộn ngang, cho phép cuộn dọc, ngang các nội dung không vừa màn hình…
III. Màn hình Confirmation:
IV. Tìm và import icon ở các trang bên thứ 3.
Các icon phổ biến thường đã có sẵn trên các trang web download icon như Iconfinder.com, bạn chỉ cần tải về và dùng trong wireframe của mình mà không cần phải mất thời gian vẽ icon mới.
Truy cập trang iconfinder.com
Tìm kiếm một icon ví dụ như Facebook.
Tải xuống file dạng SVG
Sử dụng icon đã tải xuống trong Figma
Sau khi đã tải xuống icon dạng SVG. Trên thanh công cụ, chọn dropdown hình vuông > Place image/video (Hotkey: Ctrl+Shift+K)
Chọn icon đã tải xuống
Nhấn chuột trái vào trong frame hoặc nhấn giữ và kéo thả chuột trái để tạo Frame theo kích cỡ mong muốn.
V. Tạo Prototype Flow
Như đã đề cập ở đầu bài , Figma có tính năng biến các bản vẽ thành dùng như app thật để chạy thử nghiệm flow mà không cần phải viết code.
Once you have drawn all the screen necessary for your app flow, it is possible to create an interactive prototype where you would simulate the experience of using the app as if it is actually working.
Khi bạn đã chuẩn bị xong các màn hình cần thiết cho một flow, đầu tiên chọn Prototype ở bảng design.
Chọn object trong Frame đầu tiên của flow mà bạn muốn ấn vào để chuyển sang trang tiếp theo, nhấn giữ chuột trái ở nút “+” , di chuột đến Frame màn hình tiếp theo của flow rồi thả ra.
Đây là popup hiện ra khi bạn đã nối flow thành công, để ý phải lựa chọn On Tap thì lúc ấn vào object trong màn hình prototype hệ thống mới chuyển sang màn hình mới.
Tiếp tục thực hiện với các màn hình còn lại
Bạn cũng có thể nối object để chuyển screen ngược lại
Figma mặc định tạo ra điểm băt đầu Flow “Flow starting point” khi bạn tạo thành công kết nối ở frame đầu tiên sang frame thứ 2.
Sau khi nối xong bạn có thể chọn Frame bắt đầu và ấn nút ▶ nằm ở góc phải bên trên để sử dụng Prototype.
Prototype cũng có thể hiện ở dạng cửa sổ khi bạn ấn nút bên cạnh tag hiển thị điểm bắt đầu Flow.
Chia sẻ Prototype Flow
Ấn nút copy
Paste bất kỳ để in ra link