Tài liệu Tìm hiểu về phần mềm figma

Ủy ban nhân dân Thành phố Hồ Chí Minh Trường Đại Học Sài Gòn ------------------------ Khoa: Công Nghệ Thông Tin Khóa: 17 TÌM HIỂU VỀ PHẦN MỀM FIGMA Giáo viên hướng dẫn V.T.Nguyên 1 Mục Lục Chương 1: Giới thiệu và mô tả chi tiết về phần mềm Figma I. Giới thiệu về phần mềm Figma.......................................................... 1/ Một số định nghĩa cần biết khi dùng Figma.............................................................. 2/ Ưu điểm..................................................................................................................... 3/ Nhược điểm............................................................................................................... II. Mô tả chi tiết phần mềm Figma......................................................... 1/ Giao diện bắt đầu ứng dụng...................................................................................... 2/ Tạo mới File thiết kế giao diện.................................................................................. 3/ Thanh công cụ........................................................................................................... a) Move & Scale..................................................................................................... b) Frame & Slice..................................................................................................... c) Nhóm công cụ Shape.......................................................................................... d) Pen & pencil....................................................................................................... e) Text.................................................................................................................... f) Add/Show comments.......................................................................................... g) Mở rộng.............................................................................................................. 4/ Vùng hiển thị............................................................................................................. 5/ Layer & Assets.......................................................................................................... 6/ Thiết kế chi tiết.......................................................................................................... a) Design................................................................................................................ b) Prototype............................................................................................................ c) Code............................................................................................... 2 Chương 1: Giới thiệu và mô tả chi tiết về phần mềm Figma I. Giới thiệu phần mềm Figma. Figma là một phần mềm thiết kế giao diện người dùng và làm prototype trong một tool, có thể cho nhiều người dùng cùng vào sửa file một lúc giúp tiết kiệm thời gian làm việc. 1/ Một số đặc trưng về Figma.  Frame: giống Artboard trong Sketch, Photoshop và Illustrator.  Component: giống với Symbol trong Sketch.  Master component: giống như Symbols nằm trong page Symbols của Sketch. Khi bạn sửa 1 Symbols trong Sketch các Nested Symbols cũng thay đổi theo, tương tự như vậy khi bạn sửa Master component thì tất cả các component được sinh ra từ Master component cũng sẽ thay đổi theo.  Constraint : hỗ trợ cho responsive design, giống với phần Resizing trong Sketch nhưng nhiều lựa chọn hơn. 2/ Ưu điểm :  Ở mỗi chức năng đều có tooltip hướng dẫn.  Về bố cục giao diện giống Sketch, nhưng đơn giản hơn.  Khi mở file khác tự động sinh tab mới trên thanh tab bar, còn ở Sketch khi mở một file khác lại ra cửa sổ mới.  Cho phép các thành viên khác cùng comment và sửa real-time (Đây có thể coi là điểm mạnh mẽ nhất của Figma).  Trong vòng 30 phút nếu không có thao tác với thiết kế thì Figma sẽ lưu lại 1 version, sau đó nếu bạn có chỉnh sửa như thế nào thì vẫn có thể khôi phục lại version trước đó. Việc này thực sự rất có ý nghĩa khi làm việc với những khách hàng khó tính sửa đi sửa lại thiết kế cả trăm lần sau đó quyết định sử dụng version đầu tiên.  Sử dụng được trên mọi hệ điều hành với 2 phiên bản web app và desktop app. 3/ Nhược điểm :  Layout columns và rows không có dạng đường kẻ như Sketch và Photoshop, chỉ có dạng những mảng màu được opacity và mặc định được đặt lên lớp trên 3     cùng của thiết kế nên khi bật layout lên sẽ ảnh hưởng đến việc nhìn tổng thể cả thiết kế. Mặc dù dùng desktop app nhưng lại không mượt và nhanh như trên Sketch, cảm giác như là khi hoàn thành thao tác thì Figma phải load lại. Việc preview thiết kế cũng bị chậm trễ. Không preview được font chữ như trên Sketch và Photoshop. Chưa cho cài đặt plugin và cũng chưa có kho plugin phong phú như Sketch. Bộ tính năng của Figma tập trung hỗ trợ công việc thiết kế giao diện người dùng và trải nghiệm người dùng, chú trọng khả năng cộng tác theo thời gian thực. 3/ Loại license figma sử dụng: Figma sử dụng giấy phép Creative Commons. Giấy phép Creative Commons là một số giấy phép bản quyền ra đời vào ngày 16 tháng 12 năm 2002 bởi Creative Commons, một công ty phi lợi nhuận của Hoa Kỳ thành lập vào năm 2001. Nhiều giấy phép, đặc biệt là hầu hết các giấy phép nguyên thủy, trao những "quyền nền tảng", như quyền phân phối một tác phẩm có bản quyền mà không được thay đổi, miễn phí, Một số các giấy phép mới hơn không trao những quyền này. Các giấy phép Creative Commons hiện có ở 34 điều luật ở toàn cầu, với chín luật khác đang được phát triển. 4/ Ứng dụng của phần mềm figma: Figma là một phần mềm cho việc thiết kế giao diện, với các tính năng được quy hoạch đặc thù cho việc tối ưu quá trình làm việc, giao tiếp nhóm và bàn giao. Với khối lượng công việc thiết kế giao diện càng phình to ra thì Figma lại càng thể hiện được giá trị của nó. Đây là một lựa chọn gần như tối ưu cho UI/UX Designer. 4/ Hướng dẫn sử dụng Figma II. Mô tả chi tiết về phần mềm Figma. b/ Chức năng Search: 4 - Bạn có thể tìm kiếm File trên thanh tìm kiếm - Cho phép tìm kiếm những File mà bạn đã từng tuy cập trước đây 3/ Thanh công cụ a) Move & Scale - Move tool : là công cụ dùng để di chuyển các khung hình, text. Cách sử dụng : click vào “Move tools” chọn “Move” hoặc nhấn phím V. - Scale tool : là công cụ tăng giảm kích thước theo tỉ lệ ban đầu của khung, text. Cách sử dụng : click vào “Move tools” chọn “Scale” hoặc nhấn phím K. b) Frame & Slice - Frame tool : là công cụ dùng để tạo ra một vùng thiết kế mà ta có thể thực hiện các công thiết kế trong đó. Cách sử dụng : click vào “Region tools” chọn “Frame” hoặc nhấn phím A hay F. - Slice tool:là công cụ dùng để cắt khung hình để export ra file hình ảnh.Cách sử dụng: click vào “Region tools” chọn “Slice” hoặc nhấn S. Ví dụ : -Dùng slice tool vẽ vùng muốn export 5 -Nhấn export chọn “Export Slice 1”. -Có 3 sự lựa chọn: + Xuất hình gốc + Xuất hình đã được cắt + Xuất cả 2 6 - Sau đó chọn nơi để lưu ảnh.Cuối cùng nhấn Save. c) Nhóm công cụ Shape 7 - Rectangle tool : là công cụ dùng để vẽ một hình tứ giác tùy ý. Cách sử dụng : click vào “Shape tools ” chọn “Rectangle” hoặc nhấn phím R. Ví dụ : - Line tool : là công cụ dùng để vẽ một đường thẳng. Cách sử dụng : click vào “Shape tools” chọn “Line” hoặc nhấn phím L. Ví dụ : 8 - Arrow tool : là công cụ dùng để vẽ một đường thẳng có hướng . Cách sử dụng : click vào “Shape tools” chọn “Arrow” hoặc nhấn Shift+L. Ví dụ : - Ellipse tool : là công cụ dùng để vẽ hình ellipse hay hình tròn. Cách sử dụng : click vào “Shape tools” chọn “Ellipse” hoặc nhấn phím O. 9 Ví dụ : - Polygon tool : là công cụ dùng để vẽ một hình tam giác. Cách sử dụng : click vào “Shape tools” chọn “Polygon”. Ví dụ : 10 - Star tool : là công cụ dùng để vẽ một hình ngôi sao. Cách sử dụng : click vào “Shape tools” chọn “Star”. Ví dụ : - Place Image tool : là công cụ dùng để chèn thêm ảnh. Cách sử dụng : click vào “Shape tools” chọn “Place Image” hoặc nhấn Ctrl+Shift+K. Ví dụ : -Chèn thêm ảnh trong tài nguyên máy tính. 11 d) Pen & Pencil - Pen tool : là công cụ dùng để nối, chỉnh các đường vẽ cong. Cách sử dụng : click vào “Drawing tools” chọn “Pen” hoặc nhấn phím P. Ví dụ : 12 13 - Pencil tool : là công cụ dùng để vẽ tùy ý. Cách sử dụng : click vào “Drawing tool” chọn “Pencil” hoặc nhấn Shift+P. Ví dụ : 14 e) Text - Textbox tool : là công cụ dùng để tạo ra vùng gõ văn bản. Cách sử dụng : click vào “Text” hoặc nhấn phím T. Ví dụ : f) Add/Show Comments 15 - Add/Show Comments tool : là công cụ dùng để viết hay hiện đánh giá, bình luận của những người thiết kế đối với mảng giao diện của người khác hay của mình. Cách sử dụng : click vào “Add/Show Comments” hoặc nhấn phím C. Ví dụ : g) Mở rộng - Edit Object tool : là công cụ dùng để chỉnh sửa một thành phần chỉ định trong phiên làm việc. Cách sử dụng : click vào “Edit Object” hoặc doubleclick vào 1 thành phần cụ thể. Ví dụ : 16 + Bend tool : là công cụ dùng để chỉnh góc cạnh của thành phần. Cách sử dụng : click vào “Bend tool” hoặc nhấn phím Ctrl. Ví dụ : 17 + Paint Bucket tool : là công cụ dùng để bật/tắt màu trong thành phần được chỉ định. Cách sử dụng : click vào “Paint Bucket” hoặc nhấn phím B. Ví dụ : - Create Component tool : là công cụ dùng để liên kết các thành phần với nhau được chứa vào một nơi gọi là “Local Components”. Cách sử dụng : click vào “Create Component” hoặc nhấn Ctrl+Alt+K. Ví dụ : 18 - Use as Mask tool : là công cụ dùng để che giấu một thành phần đươc chỉ định ,nó sẽ được thêm vào “Mask Group”. Cách sử dụng : click vào “Use as Mask” hoặc nhấn Ctrl+Alt+M. Ví dụ : b/ Assets 19 - - Vùng Assets (ở vùng bên trái trong tab Assets) là vùng mà ta chỉ thấy các thành phần trong “Local Components” và “Mask Group”. Assets là các khía cạnh của thiết kế của bạn có thể tái sử dụng. Đây có thể là các nút hoặc biểu tượng các thành phần UI phức tạp hơn như menu điều hướng hoặc thanh trạng thái Bạn có thể tạo các thành phần này và biến chúng thành Thành phần chính Sau đó, bạn có thể tạo trường hợp của các thành phần đó để sử dụng chúng trên các thiết kế của mình Mở Assets Tìm và sử dụng các chức năng Khi bạn đã mở Bảng điều khiển, bạn có thể:        Sử dụng trường tìm kiếm để tìm thành phần cụ thể Chuyển đổi giữa Grid và danh sách các thành phần Mở phương thức thư viện Xem các thành phần cục bộ đã được tạo trong Tệp hiện tại Xem các thành phần riêng tư đối với tệp này Xem các thành phần được sử dụng trong tệp Khám phá các thư viện kích hoạt 20