Đọc Thêm_ Công cụ Figma.pptx hướng dẫn làm

Đọc Thêm_ Công cụ Figma.pptx hướng dẫn làm

1. Công cụ Figma Đọc thêm

2. 1. Figma là gì ?

3. 1 . Figma là gì ? Figma là một phần mềm, nền tảng thiết kế UI Đồng thời có thể thực hiện Prototype Figma được biết đến như là công cụ thiết kế giao diện người dùng UI (Interface User) cho website và ứng dụng. Nhiều người có thể cùng chỉnh sửa cùng 1 lúc

4. 1 . 1. Một số sản phẩm, ấn phẩm được thiết kế từ Figma Link

5. 1 . 2. Giao diện Interface Tạo file mới

6. 1 . 3 . Giao diện khi mở file Layers thành phần Thanh menu Share project

7. 1 . 4. Một số phím tắt trong Figma A : Tạo Artboard/Frame mới + : Phóng to - : Thu nhỏ Cmd + C: Copy Cmd + V: Paste Cmd + S : Save Cmd + Z : Undo Cmd + Shift + Z : Redo Cmd + G : Group V : Move tool P : Pen tool T : Type tool Cmd + B : Bold Cmd + I : Italic Cmd + U : Underline Shift + phím mũi tên : để chọn các ký tự lần lượt theo chiều mũi tên vừa bấm R : Vẽ hình chữ nhật, nếu muốn có hình vuông thì khi vẽ giữ phím Shift O : vẽ hình elip, giữ phím Shift để vẽ hình tròn L : vẽ đường thẳng Space : giữ phím space và di chuột Cmd + ] : Đưa 1 layer lên trên 1 layer Cmd + [ : Đưa 1 layer xuống dưới 1 layer Control + C : hút màu Control + G : bật/tắt layout grid Alt : Nếu muốn đo khoảng cách giữa 2 đối tượng Lưu ý: Hướng dẫn sử dụng phím tắt áp dụng với người dùng MacOS

8. 2. Shapes và Lines

9. Hình vuông/ Hình chữ nhật Hình tròn/Oval (nguyên/1 nửa) Hình thoi Hình tam giác Hình ngôi sao 5/ nhiều cánh Vẽ line, mũi tên Nhấn A lt -> vẽ từ tâm Nhấn Shift -> vẽ hình vuông/ tròn 2. Shapes và Lines Công cụ Rectangle Phím tắt R để vẽ

10. 2. Shapes và Lines Khu vực căn chỉnh giữa các hình Khu vực cài thông số Khu vực c ài layout Cài đặt màu sắc viền, ruột

11. 2. Shapes và Lines Chỉnh sửa hình dáng Shapes Click đúp chuột vào đối tượng để chỉnh sửa điểm neo. Dùng công cụ Pentool di chuyển đến shape để thêm điểm neo Nhấn chuột đôi đối tượng -> cửa sổ để bẻ cong mũi tên Bẻ cong Shapes

12. 2. Shapes và Lines Nhấn … để cài đặt bổ sung Cài đặt effect cho shapes

13. 2.1. Các hình khối đối với UI design Hình vuông, hình chữ nhật và dạng lưới trong thiết kế Web Những hình học này gợi nên cảm giác cân bằng, tin cậy và an toàn, vì thế thường áp dụng cho các menu điều hướng và CTA (Call to Action - Kêu gọi hành động). Thiết kế Web với hình tam giác và zigzags Tam giác là hình dạng hình khối mạnh mẽ, thể hiện chuyển động và hướng, điều chỉnh mắt người xem vào một khu vực cụ thể của trang. Hình tròn/Hình bầu dục trong thiết kế Web Không có góc nhọn, đường tròn thể hiện s ự chuyển động mề m mại, hài hoà, tăng thêm tính trẻ trung và vô tư hơn.

14. Đường chéo và Hình nghiêng Tạo ra chuyển động và hướng, thu hút mắt người xem từ điểm này sang điểm khác. Hình khối tự nhiên Không đều, không đối xứng, biểu thị sự thoải mái, thống nhất và dễ tiếp cận. Những hình dạng này trong thiết kế làm nổi bật môi trường tự nhiên ngoài trời. Hình kim cương/Hình thoi trong thiết kế Web Những hình dạng này ít được sử dụng hơn nhưng mang lại cảm giác giao diện hiện đại. 2.1. Các hình khối đối với UI design

15. 3. Công cụ Union Section

16. 3. Công cụ Union Section Sử dụng công cụ để hàn các đối tượng, lấy phần giao và lấy phần ngoài Công cụ căn chỉnh shape

17. 4 . Công cụ Pen

18. 4. Công cụ Pen (phím tắt P) Đặt điểm neo đầu sau đó kết nối với những điểm sau tạo nên shape tự do Click + giữ chuột -> bẻ cong line Click + Shift -> xoay góc 45 độ Kéo điểm neo sang 1 điểm khác để hàn điểm Click Enter -> chế độ Edit điểm neo

19. 4.1. Vector Network là gì ? Khi dùng Pentool vẽ vector phức tạp trong Figma có thể vẽ liên tục với 1 điểm neo chung, tạo thành 1 Vector Network. Việc chỉnh sửa cũng sẽ nhanh chóng và dễ dàng hơn. Link bài tập 2. 3

20. 4.1. Vector Network là gì ? Nhấn Enter để chỉnh sửa điểm neo vector Nhấn Shift + Delete để xóa điểm neo Bo góc điểm neo để có được góc tù

21. 5 . Place Image

22. 5. Place Image Cách 1: Kéo thả Cách 2: Copy -> Paste Cách 3: Place Image -> Chọn ảnh Chọn shape -> Place Image -> chọn ảnh

23. Điều chỉnh lại sắc độ, thông số ảnh 5.1. Cài đặt Image Click đôi vào ảnh -> cửa sổ cài đặt Fill: Toàn bộ ảnh sẽ fit khi co giãn khung. Fit: Ảnh không đổi trong shape kể cả khi co giãn khung Crop: C ắt bớt ảnh Tile: Biến ảnh thành hoa văn Chỉnh sửa lại khung ảnh

24. 6 . Mask

25. 6. Mask Tạo mask nhấn Use as Mask Phím tắt Ctrl + Alt + M Di chuyển khung và mask Thay đổi nội dung mask

26. Màu phủ Chuyển màu Chuyển tròn Chuyển Oval Chuyển kim cương 6. Mask Thao tác với mask Click chuột phải vào mask để: Khóa, lật mask, đưa hình ảnh lên trước/về sau Độ đậm của lớp phủ Tùy chọn Fill Phủ lên mask 1 layer màu hoặc hiệu ứng

27. 6. Mask Công cụ Mask thích hợp khi sử dụng nhiều shapes, chữ Công cụ Place Image phù hợp khi sử dụng 1 ảnh Place Image Mask

28. Thực hành Bài tập trên lớp

29. Thực hành Bài tập trên lớp Link bài tập

30. Thực hành Bài tập trên lớp

31. Thực hành Bài tập trên lớp

32. Thực hành Bài tập về nhà

33. Thực hành Bài tập về nhà Kết hợp shape và pen tool Thực hành vẽ vector Link bài tập 2. 2

34. Thực hành Bài tập về nhà Thực hành Vector Network

35. Thực hành Bài tập về nhà Thực hành Mask

36. THANK YOU !