Ra mắt trên thị trường vào năm 2015, ứng dụng Figma được biết đến như một công cụ để thiết kế giao diện của người dùng cho website và app. Ngày càng có nhiều doanh nghiệp lựa chọn sử dụng vì sự tiện lợi, hãy cùng thể thao 360 tìm hiểu các tính năng và cách sử dụng ngay sau đây.
Nội dung chính
Figma là gì?
Figma là một ứng dụng prototype, biên tập hoặc chỉnh sửa đồ họa vector dựa vào đám mây, được dùng nhiều để thiết kế giao diện của người dùng với khả năng có thể cộng tác làm việc nhóm từ xa khá vượt trội.
Figma sở hữu giao diện thiết kế trực quan và thân thiện với người dùng. Nếu như bạn đã quen thuộc với phần mềm Photoshop thì việc làm quen với Figma thực sự không mất nhiều thời gian, thậm chí là bạn sẽ cảm thấy các thao tác trên ứng dụng này đơn giản và dễ dùng hơn.
Hướng dẫn cách sử dụng phần mềm Figma
Trước hết, chúng ta sẽ tạo thiết kế mới: “New design file” và sau đó sẽ minh họa những thao tác sử dụng cơ bản.
Công cụ Move, Zoom và Pan
Sau khi đã chọn tạo thiết kế mới, ứng dụng sẽ hiển thị giao diện của mình:
- Phần góc bên trái phía trên sẽ là nơi hiển thị những công cụ của Figma. Bạn sẽ click chọn vào từng biểu tượng để lựa chọn tool mình muốn. Ưu điểm của Figma chính là nếu như bạn không nhớ công cụ đó đang nằm ở đâu, nhưng chỉ cần bạn nhớ tên, thì chắc chắn bạn sẽ tìm được bằng cách gõ tên công cụ đó vào phần Quick actions.
- Sau khi đã click vào biểu tượng hình tam giác để vẽ được 2 hình dạng bất kỳ. Hãy sử dụng công cụ Move (với phím tắt V) để di chuyển từng hình. Nếu như muốn di chuyển cả 2 hình, thì sẽ sử dụng Hand tool (phím tắt H). Phần góc bên phải để bạn có thể Zoom file theo ý thích.
Công cụ Frame
Vì là ứng dụng dùng để thiết kế giao diện UI nên sẽ có đầy đủ những loại Frame với sẵn kích thước để cho bạn thuận tiện trong các thao tác. Thế nhưng, phần Social Media thì Figma lại không cập nhật kích thước mới nhất, nên bạn cần phải kiểm tra kỹ lại toàn bộ kích thước và chỉnh sửa nếu như cần nhé. Để có thể chỉnh sửa kích thước, bạn chỉ cần tiến hành thay đổi W và H nằm ở góc bên phải.
Công cụ Lock, Groups và Hide Layers
Từng layer ở trong Figma sẽ hiển thị tương tự giống như Photoshop. Bạn dễ dàng dùng chuột để thực hiện di chuyển thứ tự các layer. Biểu tượng ổ khóa được dùng để khóa layer, và hình con mắt để ẩn layer đó.
Khi cần nhóm những layer lại với nhau, bạn click chọn các layer cần và ấn Ctrl + G. Nếu muốn bỏ nhóm những layer này thì chọn Ctrl + Shift + G.
Tool Opacity và Fill
Lựa chọn mức Opacity ở trong phần Layer => Pass through. Ngoài tùy chọn Pass through thì ứng dụng này cũng có các tùy chọn hòa trộn khác (Blending Modes) cũng tương tự như Photoshop.
Figma cung cấp rất nhiều tính năng để bạn thiết kế sáng tạo hơn. Fill dùng để đổ màu cho hình và bạn cũng có thể thực hiện điều chỉnh mức Opacity của hình đó. Để tạo được background ở dạng Gradient Color thì trong phần mũi tên có nhiều lựa chọn cho bạn như: Solid, Radial, Linear, Diamond, Angular, Image. Riêng Image được dùng để chèn hình vào trong Shape đó. Hãy thường xuyên luyện tập để tạo được màu sắc mà bạn yêu thích.
Công cụ Rulers và Layout
Trong phần tìm kiếm Quick actions, gõ Ruler thì lập tức sẽ hiển thị tùy chọn Show rulers. Sau đó, bạn chỉ việc nắm và kéo thước để đặt vào thiết kế mà thôi.
Khi tiến hành thiết kế giao diện dành cho điện thoại thì bạn sẽ cần rất nhiều Ruler để có thể căn chỉnh vị trí những vật thể trong thiết kế. Bạn không thể dùng tay làm thủ công tạo từng Ruler được. Vì thế mà chúng ta nên dùng Layout grid.
Sau khi đã chọn Frame thì trong phần Layout grid, thực hiện thay đổi Size để có được mức lưới phù hợp. Lưới bố cục sẽ không phụ thuộc vào lưới pixel. Điều này có nghĩa là Layout grid cũng không phụ thuộc vào độ phân giải hay kích thước cụ thể. Mặt khác, bạn chỉ có thể áp dụng thực hiện lưới bố cục cho một khung.
Công cụ History
Để xem lại lịch sử những phiên bản, trong mục Drafts/ Untitled, bạn chọn vào Show version history. Phần History của Figma hoạt động khá giống với Drive, chỉ cần click chọn vào là sẽ quay lại phiên bản cũ.
Vẽ hình Shape
Trên thanh menu, bạn sẽ lựa chọn hình muốn vẽ. Nếu như muốn vẽ hình vuông hay hình tròn thì trong quá trình vẽ bạn chỉ cần nhấn và giữ phím Shift. Điểm hay của ứng dụng này chính là khi click vào mục Shape thì sẽ hiện ra chấm tròn ở những góc. Bạn dễ dàng thay đổi góc nhọn thành góc tròn.
Ngoài ra ở bên góc phải, bạn cũng có thể điều chỉnh cả 3 thông số để ra được hình mà mình mong muốn. Stroke để tô viền phía bên trong hay bên ngoài cho Shape. Phần Effects sẽ bao gồm đổ bóng Shadow và làm mờ Blur.
Công cụ Distribution và Alignment
Để căn chỉnh vị trí của những layer, bạn chỉ cần chọn vào các layer đó và chọn Alignment. Nếu muốn điều chỉnh lại vị trí của những layer, bạn sẽ click Distribution trong phần ô được tô màu vàng. Tidy up sẽ thường dùng để sắp xếp vị trí của các biểu tượng trên điện thoại, có thể căn chỉnh cả chiều ngang và dọc.
Chèn hình và chữ
Để được chèn hình ảnh vào trong thiết kế, bạn hãy kéo thả trực tiếp file hình đó từ desktop vào file Figma hay chọn File => Place Image để chèn hình. Ứng dụng này cung cấp đầy đủ các tính năng ở menu bên tay phải để bạn tuỳ ý chỉnh sửa chữ.
Xuất file
Ưu điểm của phần mềm này chính là bạn có thể thực hiện export/download từng yếu tố riêng lẻ ở trong bản thiết kế. Ví dụ như chúng ta có thể tải về máy các file hình có đuôi PNG.
Kết luận
Chúng tôi vừa giới thiệu đến bạn khái niệm cũng như tính năng của Figma, nếu như bạn làm công việc thiết kế chắc hẳn ứng dụng này khá phù hợp. Mong rằng thông tin hướng dẫn trên có thể hữu ích đối với bạn.
