[Figma] Các phím tắt cơ bản
Mình sẽ giới thiệu 1 số phím cơ bản nhé :
- Zoom To / Nhỏ sử dụng phím + / .
- Sử dụng phím Space & giữ phím sẽ xuất hiện bàn tay, kết hợp cùng với chuột trái để di chuyển và view khung hình.
- Move Tool : ấn phím V.
- Frame Tool : ấn phím F.
- Slice Tool : ấn phím S.
- Ngoài ra còn 1 số phím tắt để vẽ các hình vuông, tròncác bạn theo dõi ở hình ảnh dưới dây hoặc tìm hiểu trong khi thiết kế nhé.
Tạo các Layout Design Sử dụng Frame Tool
Thống nhất lại cách gọi nhé, cả cái màn hình hiển trị trước mắt chúng ta thì gọi là khung hình. Trong đó là cả 1 project với nhiều Layout khác nhau, mỗi Layout là 1 màn hình của 1 website hoặc Mobile App. Mình gọi nôm na vậy cho dễ hiểu nhé.
Khi tạo 1 Project mới, các bạn quay lại màn hình đầu tiên sau khi đăng nhập và ấn vào dấu [+] ở góc trên cùng bên trái nhé.
Lúc này Figma sẽ tự động vào giao diện thiết kế của Project bạn vừa tạo.
Tạo 1 khung Layout design giao diện cho trang Dashboard [màn hình trang chủ] của 1 Mobile App trên thiết bị Iphone 8.
Sau đó chọn Frame Tool [phím tắt F] thì ở khung bên phải sẽ xuất hiện 1 list các loại màn hình, các bạn chọn thử màn hình Iphone 8 nhé.
Lúc này ở cột bên trái sẽ xuất hiện 1 Layout tên là Iphone 8 và ở khung View giữa sẽ có 1 khung màu trắng, đó sẽ chính là 1 màn hình của Mobile App.
Click vào tên iPhone 8 ở khung bên trái để đổi tên thành Mobile-dashboard nhé.
Thiết kế màn hình Dashboard cho Mobile App
Bước 1 : vẽ phần header
Chọn hình ô vuông ở thanh công cụ trên cùng bên trái hoặc phím tắt R để sử dụng Rectangle Tool, sau đó click chuột vào khung hình View của dashboard và kéo 1 hình chữ nhật như hình sau :
Khi chọn Rectangle Tool và vẽ 1 hình chữ nhật để tạo vùng Header, bạn có thể kéo theo 4 chiều để ước lượng chiều cao [ chiều rộng mặc định là full chiều ngang] hoặc gõ kích thước ở phần Option bên phải.
Chọn màu cho nó ở mục FILL, nếu thích màu Gradient thì chọn tiếp dấu [+] ở mục Fill đó.
Ở phần Header này mình sẽ điền tên của App và 1 số text nhỏ
Ấn phím T để chọn Text Tool và viết text tại điểm bất kỳ ở khung Header, sau khi viết xong có thể căn chỉnh vị trí sau
Ở phần Option bên phải sẽ tự động chuyển sang option cho phần Text Tool, các bạn tự khám phá với các điều chỉnh Font, màu sắc, kiểu chữ nhé
Ở phần Header này các bạn tạo 2 Text giống của mình, 1 là tên ABC gì đó, ở dưới là 1 text nhỏ hơn dạng Excerpt hoặc gọi là Slogan cũng được
Nếu muốn nhóm các Layer ở khung bên trái lại thành Group và đặt tên là Header cho gọn thì các bạn click chuột vào cả 3 layer và ấn Ctr + G nhé. Sau đó lick vào tên để đặt lại là Header
Bước 2 : Vẽ phần menu chính
Ở màn hình Dashboard này, dưới phần Header sẽ là phần các menu chính, mình sẽ thiết kế dưới dạng các Button để người dùng click vào để vào nhanh các chức năng này.
Các bạn chọn Rectangle Tool để vẽ các khối hình vuông, sau đó đặt các Text và Icon lên đó. Phần Text thì như ở Header đã làm, còn phần Icon thì có 2 cách sau:
- Sử dụng Ảnh có sẵn
- Sử dụng Font-Icon : phần này mình sẽ nói ở 1 bài riêng nhé
Khi đã tạo 1 khối hình vuông làm Button, các bạn chọn 1 Ảnh có sẵn làm Icon. Cách làm như sau :
Vào menu có hình Vuông và bấm sẽ ra 1 List các menu, chọn Place Image [phím tắt hơi khó diễn tả]. Sau đó chọn 1 Ảnh làm Icon, lúc này Figma cho phép bạn lấy ảnh đó làm nền cho 1 khối hình hoặc tách biệt, thì các bạn bấm vào vùng tránh xa cái khối Button kia để nó không chọn làm nền. Rồi từ từ thay đổi size vào kéo nó vào cho cân đối như hình dưới nhé.
Button kia mình chọn màu trắng, và cho nó box-shadow 1 chút xíu để tạo bề nổi cho nó. Các bạn tự phám phá mấy cái này nhé :]. Còn nền cho cả màn hình thì click vào Layout Mobile-Dashboard bên trái và chọn background cho nó ở Option bên phải, chọn màu xám nhẹ để cái button trắng kia nó nổi.
Sau đó Copy cả cái Group kia thành 5 Button nữa, rồi căn chỉnh cho nó giống hình dưới nhé :
Bước 3 : Thiết kế phần Tab
Sau khi đã xong các button chính, chúng ta sẽ thiết kế phần Tab chính. Nó là 1 khối màu trắng ở dưới cùng, trên đó có các Icon và Text thể hiện biểu tượng cho mỗi màn hình, bấm vào chúng sẽ thay đổi các màn hình liên tục.
Các bạn quan sát hình trên, mình đã tạo sẵn một khối màu trắng và đổ bóng [box-shadow], nó chính là option Effect đó nhé. Ấn + ở mục Effect đó sẽ có nhiều thứ hay ho để tinh chỉnh.
Tiếp theo là các Icon, các bạn chọn các ảnh có sẵn làm Icon và Insert nó thông qua Place Image nhé. Và điền text vào để giống hình dưới đây.
Cái tab ở giữa mình thêm 1 hình tròn có đổ màu Gradient để diễn đạt nó là Tab quan trọng nhất để làm nổi bật :]]
Các bạn chịu khó tự thực hiện để rèn tư duy sử dụng Tool nhé. Có thực hành mới hình thành thói quen khi tiếp cận các Tool mới được.
Vậy là chúng ta đã cùng thiết kế xong màn hình Dashboard của giao diện cho một Mobile App và thực hành 1 số công cụ cơ bản. Để thiết kế màn hình đẹp hơn, các bạn cần có thêm thẩm mỹ và 1 số điều chỉnh nữa. Các bạn có thể khám phá dần dần nhé.