Chào mừng bạn đến khóa học Figma cơ bản, Figma (figma.com) là webapp thiết kế giao diện bằng trình chỉnh sửa đồ họa vector và hỗ trợ tạo Prototype sử dụng các màn hình tạo ra như app thật. Trong bài học này bạn sẽ học được cách sử dụng Figma để vẽ giao diện sản phẩm dạng prototype Lofi, hay còn được gọi là Wireframe để tăng tốc quá trình triển khai các ý tưởng phát triển sản phẩm phần mềm.
Nội Dung:
- I. Phân biệt dạng Prototype LoFi – Wireframe và HiFi.
- II. Mẫu tham khảo
- III. Sử dụng Figma Design:
-
- Giao diện Figma:
- Layers
- Frame
- Tạo Text mới
- Vẽ các hình dạng Shapes cơ bản
- Vẽ đường thẳng, vẽ mũi tên
- Thay đổi màu
- Vẽ Viền Object
- Tạo Icon
I. Phân biệt dạng Prototype LoFi – Wireframe và HiFi.
Prototype dạng Lofi hoặc Wireframe là dạng thiết kế prototype đơn giản dùng để vẽ mô tả nhanh chóng các tính năng và ý tưởng trong dự án thường dùng trong giai đoạn triển khai dự án phần mềm ban đầu.
Ta vẽ Wireframe để xác định các vị trí các thành phần, bố cục của một sản phẩm và sự tương tác cơ bản giữa các màn hình.
Khi vẽ Wireframe bạn nên tập trung vào các yếu tố cốt lõi của sản phẩm, không nên thêm nhiều màu khác nhau ngoài màu chủ đạo nếu cần, và các thành phần khác nên chỉ vẽ thành các khung đơn giản:
Khi đã có bản vẽ Lofi và không có nhiều thay đổi khác, bạn sẽ lấy bản vẽ Lofi đó để biến thành bản Prototype HiFi, là dạng thiết kế hoàn chỉnh có thể sử dụng trong sản phẩm cuối cùng. Design Hifi có sẽ có các nội dung hoàn chỉnh, như thêm ảnh, thêm màu, text… ở dạng này đã có đầy đủ để đưa cho các dev để lập trình sản phẩm.
Bài học này sẽ đề cập đến cách sử dụng figma để vẽ Wireframe.
II. Mẫu tham khảo.
Kết quả sau khi hoàn thành bài học bạn sẽ tạo được một flow app mobile đơn giản gồm 4 màn hình: Homepage, Product Details, Checkout và Confirmation, ta sẽ dùng mẫu này để tìm kiểu về các tính năng của Figma.
III. Sử dụng Figma Design:
1. Giao diện Figma:
Khi bạn đã tạo tài khoản và đăng nhập vào Figma.com, bạn sẽ thấy màn hình liệt kê danh sách file trong tài khoản:
Tạo file mới:
Ở phía bên trái màn hình, chọn Draft, rồi chọn “+ Design file” ở góc phải bên trên màn hình để tạo file mới.
Giao diện thiết kế Figma sẽ hiện ra như sau:
Tất cả các thay đổi sẽ được tự động lưu lại trên Figma, file mới tạo ra sẽ nằm trong thư mục mà bạn đã tạo file, vd. Draft.
Nút Figma:
Nút Figma nằm trên góc trái bên trên của thanh công cụ. Là chỗ tổng hợp các tính năng, của Figma, bạn có thể sử dụng để tìm các chức năng khác nhau trong quá trình làm việc với Figma,. Vd. Ta có nút Back to files để quay lại màn hình ban đầu liệt kê danh sách file.
2. Layers
Layer là bảng liệt kê tất cả các object (vật thể) mà bạn đã tạo ra trong file và thể hiện thứ tự hiển thị object (nằm trước hay sau một vật thể).
Ẩn hiện, đổi tên Object
Di chuột đến tên một object trong bảng Layer, ấn vào hình con mắt để ẩn/hiện một object.
Để đổi tên một Object, nhấn đúp vào tên một object.
Thứ tự Layer, chuyển object lên trước, lùi về sau
Khi một object bị che mất bới một object khác nằm bên trên bạn có thể nhấn chuột phải object bị ẩn rồi chọn bring to front, hoặc send to back object đang che mất để hiện làm nổi object bên dưới.
Hoặc xem bảng Layer rồi chọn object bị ẩn rồi kéo thả lên trên object khác.
3. Frame
Trong figma, bạn có thể coi Frame như một màn hình có kích thước giống như thiết bị thật. Bên trong một frame sẽ chứa các Object để tạo thành một màn hình.
Các object nằm trong frame sẽ di chuyển theo khi bạn thay đổi vị trí và chiều dài, chiều cao trong Figma.
Frame có nhiều tính năng, và trong bài học này chúng ta sẽ đi qua một số tính năng quan trọng của frame.
Sử dụng Hotkey F hoặc chọn từ thanh công cụ để tạo một Frame mới.
Nhìn sang bảng Design bên phải , chọn iPhone 8
Một frame trắng mới sẽ được tạo ra ở không gian làm việc có kích thước màn hình của iPhone 8, phần này cũng sẽ xác định thiết bị ta sẽ hiển thị lúc tạo Prototype Flow.
Ấn đúp tên Frame để đổi tên, ở đây ta sẽ đổi thành màn hình đầu tiên, Homepage.
Tạo tiếp 3 frame còn lại : Product Details, Checkout, Confirmation.
Chọn Frame Homepage, Dùng Hotkey: Ctrl + D để tiện nhân đôi ra frame, mới hoặc Chọn Frame hoặc giữ nút Alt, di chuột để tạo Frame mới.
4. Tạo Text mới
Chọn Text “T” trên thanh công cụ, rồi ấn chuột trái bên trong Frame Homepage.
Thêm text bất kỳ, ví dụ như tên app cần vẽ.
Khi đang highlight text này, nhìn sang mục Text ở bảng Design. Mục Text hiện và cho phép chỉnh sửa các thuộc tính của Text bạn đang chọn. Font chữ, cỡ chữ, kiểu ngang dọc, căn lề trái, giữa, phải. Căn trên , giữa , dưới.
Các Font chữ phổ biến khi sử dụng vẽ wireframe thường là: Open Sans, Impact hoặc Roboto. Đây là các font không có tính nổi bật để người vẽ tập trung vào các yếu tố app quan trọng khác khi vẽ.
Auto width, auto height và fixed size:
Khi tạo Text thì mặc định Figma sẽ để đoạn text đó ở chế độ Auto width (<->) khi bạn nhấn chuột vào bất kỳ đâu trong Workspace, chế độ này sẽ tự động giãn box text ra ngang khi bạn đánh chữ.
Khi chọn Auto height (nút giữa) hoặc chỉnh tay chiều ngang box text sẽ khóa chiều ngang và khi đánh chữ quá chiều ngang , chữ sẽ chui xuống dưới.
Fixed sized, (nút bên phải) sẽ khóa box text cả 2 chiều, nhưng khi đánh chữ vần chui xuống dưới.
Ví dụ ta thay đổi box chữ sang auto height bằng cách chỉnh chiều ngang
1.
2.
3.
4. Text trong một frame có thể chỉnh vị trí ra giữa frame bằng cách chọn text rồi chọn nút Align horizontal center trong bảng Design.
5.
5. Vẽ các hình dạng Shapes cơ bản.
Phần lớn các thành phần UI được vẽ ra dùng chức năng tạo hình này. Cards, textbox, checkbox, radio, buttons, icon.
Ta có thể vẽ các dạng cơ bản như hình tứ giác, hình tròn, đường thẳng…
Cách tạo các hình cũng tương tự như nhau.
Để vẽ hình tứ giác (Hotkey: R) ta chọn trong thanh công cụ “Rectangle”, rồi ấn chuột trái vào chỗ bất kỳ hoặc vào trong frame Homepage để tạo một hình tứ giác cỡ 100×100, hoặc nhấn chuột trái rồi kéo thả theo kích thước mà bạn mong muốn.
Ta có thể thay đổi kích thước hình bằng cách chọn hình đó rồi kéo thả theo ý muốn, giữ nút Shift để phóng to, thu nhỏ khi thay đổi mà không mất tỷ lệ kích thước.
Ta sẽ vẽ một khối hình chữ nhật ở giữa đây để tượng trưng cho một hình ảnh khi vẽ Wireframe.
6. Vẽ đường thẳng và đường thẳng có mũi tên (Hotkey L)
Các bước vẽ cũng tương tự như hình chữ nhật.
Ta có thể thay đổi độ dày của đường thẳng bằng cách thay đổi thông số này ở mục Stroke trong bảng Design, dày bao nhiêu pixel:
Ta cũng có thể thay đổi các phần hiển thị điểm đầu và điểm cuối của một đường thẳng.
Ta sẽ tiếp tục vẽ hình hiệu đặt hình ảnh Wireframe, vẽ 2 đường chéo trong hình chữ nhật vừa tạo:
Khi vẫn đang highlight đường thẳng đó. Nhấn tổ hợp Ctrl + D để nhân đôi đường thẳng rồi, Nhấn nút Figma > Object> Flip Horizontal (Hotkey Shift + H) để đảo chiều ngang đường thẳng, kết quả ta sẽ có 2 đường thẳng cắt chéo.
Thêm một đoạn text chỉ mục đích của ảnh là gì (không bắt buộc)
7. Thay đổi màu
Khi vẽ wireframe ta không cần thiết chú trọng đến màu sắc mà chỉ dùng màu trắng đen, xám. Nhưng nếu cần thiết muốn đặt quan trọng một yếu tố nào đó, ta có thể thay đổi màu như sau.
Chọn một Object.
Nhìn sang phần Fill ở bảng Design, rồi chọn một màu trong color picker.
1.
2.
3. Ấn vào màu bên dưới Fill để hiện ra bảng chọn màu.
4.
8. Vẽ Viền Object
Tất cả object đều có thể vẽ thêm được viền bằng cách chọn một object rồi ấn nút + ở mục Stroke ở bảng Design, theo mặc định kích cỡ viền là 1px.
Viền Object có thể chọn nằm trong, ở giữa hoặc nằm ở bên ngoài.
Bạn có thể chỉnh viền chỉ nằm một vị trí nhất định, trên, dưới, trái phải
Phần Custom cho phép chỉnh các viền có độ dày khác nhau.
Ta sẽ tạo Button cho phần Home Page
- Vẽ 2 hình chứ nhật có viền.
2. Thêm 2 Text vào trong 2 hình chữ nhật.
3.Nhóm thành một Frame Button bằng cách, giữ nút shift rồi nhất chuột trái chọn 2 object Text và hình chữ nhật.
Khi đã chọn 2 object, nhấn chuột phải rồi chọn Frame selection. Làm tương tự với hình chữ nhật và Text kia.
4. Bây giờ Text đã nằm trong Frame, ta có thể căn chỉnh cho text vào giữa, ấn Align horizontal center và Align vertical center.
Làm tương tự với nút kia.
9. Tạo Icon.
Các Icon trong Figma thường được vẽ từ nhiều hình khác nhau gộp lại thành một Frame.
Ở phần này ta sẽ tạo 2 Icon đơn giản, Icon hamburger và icon Share.
Icon Hamburger
Dùng Tool vẽ đường thẳng, Line (Hotkey L) và vẽ 3 đường thẳng, thay đổi độ dày frame bằng 2.
Sau đó ta chọn 3 đường thẳng đó và tạo Frame (Hotkey Ctrl + Alt + G).
Icon Share
Dùng Tool vẽ hình tròn, Elipses (Hotkey O) và vẽ 3 hình tròn xếp theo hình tam giác quay sang trái.
1.
2.
3.Vẽ thêm 2 đường thẳng để nối các hình tròn.
4.Tạo frame các hình tròn và đường thẳng đó, ta sẽ có một icon.
Sau khi vẽ xong bạn đã hoàn thành xong trang Homepage:
Ở phần 2 chúng ta sẽ tiếp tục vẽ tiếp các phần còn lại và điểm qua một số cách để vẽ nhanh hơn, cách tìm kiếm icon trên web và cách tạo prototype cơ bản và share prototype:
Hưỡng dẫn vẽ Wireframe bằng Figma (phần 2)