Ngày nay, Figma là một công cụ thiết kế giao diện người dùng (UI) phổ biến được sử dụng rộng rãi trong cộng đồng thiết kế. Bởi lẽ nó cung cấp rất nhiều tính năng và công cụ hữu hiệu giúp nhà thiết kế tạo ra các giao diện tuyệt vời. Trong bài viết này, hãy cùng BAC khám phá 10 Tips Figma hot nhất năm 2024 cho Designers nhé!
1. Áp dụng bố cục tự động Auto Layout
Auto Layout là một tính năng mới lạ trong Figma giúp tự động sắp xếp, thay đổi kích thước và căn chỉnh các phần tử trong giao diện. Figma cho phép bạn tạo khung tùy chỉnh cá nhân với tính năng Auto Layout.
Auto Layout là tính năng tuyệt vời trong việc tiết kiệm thời gian vì người thiết kế có thể tạo các khung tùy chỉnh cho tất cả các loại thành phần như danh sách, hộp thoại, nhóm hình ảnh,... Chỉ cần nhấn Shift+A, sau một giây và một lần bấm nút bạn đã có thể thêm hoặc xóa các phần tử cùng loại.
2. Đổi tên các Layer
Trong quá trình thiết kế, việc đặt tên cho các layer và group vô cùng quan trọng để giữ cho dự án của bạn gọn gàng và dễ quản lý. Bất kể bạn đang phát triển ứng dụng dành cho thiết bị di động hay trang web của công ty, cấu trúc phân cấp và đặt tên cho các lớp sẽ hỗ trợ bạn rất nhiều trong công việc.
Bạn có thể đặt cho mỗi lớp mới một tên mới hoặc phân biệt chúng bằng số, hậu tố hoặc tiền tố. Để thực hiện hãy nhấp đúp vào lớp hoặc nhấp chuột phải và tùy chọn 'Đổi tên' để thay đổi tên lớp. Nếu bạn muốn đổi tên nhiều lớp hãy chọn những lớp mà bạn muốn đổi, sau đó nhấn Ctrl+R và chỉnh sửa chúng thành một nhóm.
Đây là một trong những mẹo và thủ thuật nâng cao của Figma. Bạn có thể tạo các danh mục meta với các tên được phân tách bằng dấu gạch chéo. Ví dụ: nếu bạn có một vài trạng thái nút như Subscribe/Active, Subscribe/Hover, Subscribe/Inactive, Figma sẽ coi tất cả các lớp này là các thành phần liên quan.
3. Luyện tập sử dụng phím tắt
Thật chàm chán nếu như một designer chuyên nghiệp nhìn thấy một nhà thiết kế vật lộn với con chuột của mình thay vì sử dụng phím tắt. Thực tế, sử dụng phím tắt trong Figma là một cách tuyệt vời để tăng năng suất làm việc. Thay vì phải dùng chuột và di chuyển qua lại giữa các công cụ và tính năng, bạn có thể sử dụng các phím tắt để thực hiện các tác vụ nhanh chóng.
- Ctrl + Opt +C để sao chép các thuộc tính đối tượng như màu tô hoặc kiểu văn bản và Ctrl + Opt + V để dán chúng vào đối tượng khác.
- Ctrl + L để sao chép liên kết đến tệp Figma vào bảng tạm. Sau đó, bạn có thể dễ dàng chia sẻ hoặc nhúng nó ở bất cứ đâu
- Khi bạn đã chọn một frame hoặc group, hãy nhấn Return để chọn tất cả các phần tử con và Shift + Return để quay lại phần tử gốc.
- Nhấn Ctrl + Shift + ? để mở một bảng dọc cuối màn hình nơi bạn có thể xem tất cả các phím tắt Figma có sẵn.
Bạn nên luyện tập sử dụng phím tắt mới hàng ngày để tăng tốc độ và nâng cao khả năng thành thạo công cụ figma của mình.
4. Lưới thông minh: Smart and Tidy Grids
Figma cung cấp tính năng lưới Smart and Tidy Grids giúp bạn tạo ra các bố cục giao diện chính xác và cân đối. Bằng cách sử dụng lưới thông minh, bạn có thể căn chỉnh các phần tử theo lưới, giữ cho chúng cân đối và đồng nhất trong toàn bộ giao diện. Điều này giúp tạo ra các giao diện chuyên nghiệp hơn rất nhiều.
Đầu tiên, bạn chọn một nhóm các mục giống hệt nhau rồi bấm vào biểu tượng lưới ở dưới cùng bên phải vùng chọn. Bạn sẽ thấy các thành phần được chọn sẽ được tự động sắp xếp theo một bố cục lưới lý tưởng. Đặc biệt hơn, bạn có thể nhìn vào các đường màu hồng giữa các mục và kéo chúng để điều chỉnh khoảng đệm dọc và ngang. Ngoài ra, bạn cũng có thể hoán đổi các thành phần lưới bằng cách nhấp vào vòng tròn ở trung tâm lựa chọn. Sau đó kéo và thả các mục tới vị trí mới trong vùng đã chọn.
5. Đưa hình ảnh vào Placeholder Shapes một cách nhanh chóng
Figma cho phép bạn đặt hình ảnh vào Placeholder Shapes một cách nhanh chóng. Thay vì phải điều chỉnh kích thước hình ảnh và đặt nó vào trong Shape một cách thủ công, bạn có thể chọn nhiều hình ảnh, sau đó nhấn Ctrl + Shift + K. Sau đó, bạn có thể nhấp vào các shapes và nó sẽ lần lượt lấp đầy chúng bằng các hình ảnh đã chọn.
6. Công cụ chia tỷ lệ (Scale)
Chia tỷ lệ là điều cơ bản trong thiết kế đồ họa và figma cung cấp cho bạn công cụ Scale để thay đổi kích thước của các phần tử một cách dễ dàng và chính xác. Hãy chọn những gì bạn muốn chia tỷ lệ, giữ vùng chọn và nhấn K trên bàn phím, phóng ta hoặc thu nhỏ group đến kích thước phù hợp.
7. Mẹo sử dụng phím cách Figma
Sử dụng phím Spacebar trong Figma là một mẹo nhỏ nhưng rất hữu ích để di chuyển và căn chỉnh các phần tử trong giao diện. Bằng cách nhấn và giữ phím Spacebar, bạn có thể di chuyển các phần tử một cách dễ dàng trên bề mặt làm việc của Figma. Điều này giúp bạn căn chỉnh các phần tử một cách chính xác và nhanh chóng.
Ví dụ như: Khi bạn làm việc với group, chọn và giữ phím cách, bạn có thể tăng kích thước của vùng chọn. Khi vẽ một hình, hãy giữ khoảng trắng để di chuyển phần tử xung quanh theo ý muốn. Nhấn phím cách để đặt đối tượng vào bên trong hoặc bên ngoài bố cục.
8. Chỉnh sửa giá trị cho màu sắc, văn bản và hình dạng
Chúng ta có thể thay đổi các thuộc tính khác nhau của các phần tử Figma một cách trơn tru bằng cách giữ nút Shift.
Đầu tiên, bạn chọn một shape, sau đó mở menu màu và giữ phím Shift trong khi di chuyển lên và xuống. Màu sẽ thay đổi giá trị hex của nó trong bảng màu. Con lăn chuột sẽ ảnh hưởng đến màu sắc và phím Alt sẽ giúp thay đổi độ mờ. Tương tự, bạn có thể điều chỉnh các thuộc tính khác như khoảng cách dòng hoặc kích thước phông chữ. Theo mặc định của figma, bước dịch chuyển được đặt thành 10. Điều này rất thuận tiện cho việc sửa đổi kích thước hình dạng. Nếu muốn thay đổi thông số này hãy chọn Menu > Preferences > Nudge Number và chia tỷ lệ theo nhu cầu của riêng bạn.
9. Sử dụng Eyedropper
Công cụ Eyedropper trong Figma cho phép bạn dễ dàng lấy màu sắc từ các phần tử khác trong giao diện. Bằng cách kích hoạt Eyedropper thông qua phím "i" trên bàn phím, bạn có thể chọn một màu sắc từ bất kỳ đâu trên bề mặt làm việc của Figma và áp dụng nó vào các phần tử khác của thiết kế.
10. Công cụ Arc
Công cụ Arc giúp bạn tạo ra các hình dạng cong và vòng cung. Bạn có biết bạn có thể tạo một vòng cung từ bất kỳ vòng tròn nào thông qua việc nhấn vào dấu chấm và quan sát vòng tròn sẽ biến thành hình vòng cung như thế nào và sửa đổi nó bằng cách di chuyển chuột. Sau đó tìm một dấu chấm khác gọi là `ratio` và phần trên cùng của lát cắt vòng cung để điều chỉnh hình dạng.
Hiện nay, Figma ngày càng được các doanh nghiệp quan tâm và tin dùng. Hy vọng các mẹo trên đây sẽ giúp bạn tận dụng tối đa tiềm năng của figma trong công việc của mình. Áp dụng những công thức trên có thể giúp bạn trở thành một nhà thiết kế Figma xịn xò. Hãy tiếp tục khám phá thêm nhiều điều mới tại BAC's Blog bạn nhé!
Nguồn tham khảo:
https://arounda.agency/blog/
Nhu cầu đào tạo doanh nghiệp
BAC là đơn vị đào tạo BA đầu tiên tại Việt Nam. Đối tác chính thức của IIBA quốc tế. Ngoài các khóa học public, BAC còn có các khóa học in house dành riêng cho từng doanh nghiệp. Chương trình được thiết kế riêng theo yêu cầu của doanh nghiệp, giúp doanh nghiệp giải quyết những khó khăn và tư vấn phát triển.
CÁC KHOÁ HỌC BUSINESS ANALYST BACs.VN DÀNH CHO BẠN
Khoá học Online:
Khoá học Offline:
Tại Tp.HCM:
Tại Hà Nội:
Tham khảo lịch khai giảng TẤT CẢ các khóa học mới nhất
Ban biên tập nội dung - BAC