Một số mẹo tiết kiệm thời gian thiết kế trong khóa học Figma tại TELOS

Là một trong những chương trình bài bản nhất ở tại TELOS. Khóa học Figma được giảng dạy bởi thầy Lưu Trọng Nhân (TELOS Creative Leader) không chỉ mang lại cho bạn những kiến thức bài bản về công cụ mà còn là những kinh nghiệm, mẹo vặt. Giúp bạn tăng 20 lần hiệu suất làm việc trong lĩnh vực sáng tạo nói chung và thiết kế giao diện nói riêng. 

Trong bài viết ngày hôm nay, tụi mình sẽ tổng hợp một số mẹo hữu ích trong khóa học cũng như cung cấp một số plugin giúp bạn tiết kiệm thời gian làm việc một cách tối đa. 

Bài viết liên quan: 

• Thiết kế Fintech khó khăn? Thử ngay 12 Figma UI Kit
• Muốn x20 lần hiệu suất làm việc? Cài ngay 18 Figma Plugins này
• Học theo lộ trình – trang bị đầy đủ cho hành trình trở thành UI/UX Designer

Sử dụng figma như pro!

1. Tổng hợp các mẹo sử dụng Figma

1.1. Hệ thống hóa với style 

Trong khóa học Figma, style là một yếu tố quan trọng được đề cập xuyên suốt khóa. Style một một yếu tố quan trọng trong thiết kế nói chung. Việc xây dựng dự án thiết kế của bạn theo một phong cách nhất định sẽ giúp cho thiết kế trở nên đồng bộ, bắt mắt và trên hết truyền tải đúng thông điệp mà doanh nghiệp mang lại. 

Ngoài ra, một ứng dụng khác của style cũng được hướng dẫn chi tiết trong khóa là đổi hệ thống từ light mode sang dark mode. Nếu như bạn chỉ thiết kế một cách thông thường và không có tính hệ thống, việc thay đổi dark/light mode thật sự rất tốn thời gian.

Trong Figma, 2 thành phần thường được áp dụng style nhiều nhất là font chữ và màu sắc. Đơn giản vì đây là 2 thành phần thường xuyên được thay đổi và sử dụng liên tục trong suốt quá trình làm việc. 

Hãy tưởng tượng xem, một ngày đẹp trời khách hàng của bạn muốn thay đổi toàn bộ hệ thống thiết kế từ màu xanh sang màu đỏ. Sẽ là cơn ác mộng nếu ngồi tinh chỉnh từng yếu tố. Bạn có thể mất tới hàng tuần hoặc thậm chỉ cả tháng trời (với một hệ thống lớn) chỉ ngồi tinh chỉnh màu sắc.  

Với việc hệ thống quá file thiết kế với style, chỉ cần một vài cú nhấp chuột. Công việc 1 tháng trời có thể giải quyết trong 5 phút. 

Anh Nhân Lưu giảng viên của khóa học Figma tại TELOS có chia sẻ về cách xây dựng một hệ thống style cơ bản. Tham khảo: 

Hướng dẫn Figma – Xây dựng hệ thống màu Dark/Light Mode

Tăng tốc độ làm việc với hệ thống style

1.2. Chỉnh sửa hàng loạt đối tượng với components

Tương tư như Style, components là một chức năng giúp chỉnh sửa thiết kế một cách nhanh chóng. Tuy nhiên khác với style chỉ chỉnh sửa các thành phần cơ bản như font chữ, màu sắc. Components cho phép nhà thiết kế chỉnh sửa hàng loạt những thành phần cụ thể hơn như icon, hình ảnh, kích thước, tỷ lệ, ui elements…

Bất kể bạn sử dụng figma designs giao diện, slide hay các ấn phẩm digital thì việc tái sử dụng các thành phần là điều chắc chắn. 

Còn nếu bạn muốn tìm hiểu trước về khái niệm components là gì. Mời xem qua video về Tư duy hệ thống.

Chỉnh sửa thành phần thiết kế dễ dàng với components

1.3. Loại bỏ phông nền với plugin unbackground

Chắc hẳn việc tách nền là tác vụ thường xuyên nhất mà cho dù bạn là dân chuyên hay không thì đều phải trải qua. Đôi khi, việc tách nền chiếm rất nhiều thời gian của chúng ta mà thành phầm không được như ý muốn. 

Kế đến, bạn cũng mất kha khá thời gian để sử dụng các website remove background trên mạng. Sử dụng Photoshop cũng là cách thường được sử dụng nhưng không phải ai cũng xài được photoshop để tách nền hiệu quả. 

Trong khóa học figma, giảng viên đưa ra khá nhiều plugin giúp bạn tách nền một cách dễ dàng. Có plugin trả phí và miễn phí. Mới đây mình mò được 1 plugin miễn phí khá xịn sò – “unbackground”. Plugin giúp bạn loại bỏ phông nền chỉ với vài thao tác mà không cần đăng kí hay set API key gì cả. 

Plugin unbackground

1.4. Điều chỉnh khoảng cách với auto layout và constraints

Bạn đã bao giờ bực mình chỉ vì căn chỉnh các thành phần trên file thiết kế chưa? Cho dù mắt bạn có “tinh” tới đâu thì vẫn luôn có một độ chênh lệch nhất định khiến tổng thể file thiết kế trở nên khó nhìn. Nhận biết được điều này, figma cho ra tính năng auto layout, constraints giúp người dùng setup file thiết kế căn chỉnh 1 cách tự động. 

Ngoài ra, khả năng thật sự mà 2 tính năng này đem lại là biến đổi thành phần theo kích thước file thiết kế. Ví dụ, bạn đang thiết kế một post facebook kích thước 1200×630. Bạn muốn chuyển thành post twitter với kích thước 1500×500. Thay vì ngồi tinh chỉnh từ element mất thời gian, bạn có thể set up những thông số khiến cho các thành phần thay đổi theo tỷ lệ file thiết kế một cách nhanh chóng. 

Để hiểu rõ hơn. Mời bạn xem qua video dưới đây: 

Ứng dụng auto layout thiết kế khung chat

1.5. Thu phóng đối tượng với scale tool

Là một tính năng ít khi được sử dụng trong thiết kế giao diện, Scale tool giúp bạn thu phóng đối tượng một cách tự do mà không tuân theo bất kỳ quy luật thiết kế nào. Thông thường, việc thu phóng một frame sẽ cần bạn set up kỹ lưỡng các thông số về auto layout và constraints. Tuy nhiên nếu bạn đang trong tình trạng cấp bách chỉnh sửa nhanh một frame hay một đối tượng. Sử dụng Scale tool sẽ giúp bạn đẩy nhanh tiến trình làm việc. 

Tuy nhiên thì đây là một công cụ “nên hạn chế sử dụng” trong thiết kế giao diện. Bởi nó là một công cụ thu phóng bất chấp và không quan tâm đến các thông số về kích cỡ. Như bạn cũng đã biết thì kích thước hay tỷ lệ là yếu tố quan trọng bật nhất trong thiết kế giao diện. Và Scale tool phá hỏng những thông số đó. Nên là bạn chỉ nên sử dụng scale tool trong thiết kế graphics hoặc vẽ minh họa thôi nha!

Scale tool – công cụ thu phóng tự do

1.6. Phím tắt

Chúng ta sẽ tới một phần khá thú vị. Cách sử dụng figma thành thạo chính là việc bạn phải sử dụng quen những phím tắt trên giao diện làm việc của công cụ này. Việc sử dụng phím tắt giúp bạn thao tác cực nhanh cũng như hạn chế những sai sót trong quá trình làm việc. Ngoài ra, sử dụng phím tắt là một cách tốt để bảo vệ con chuột của bạn (chuột máy tính cũng là con người mà 🥺). 

Dưới đây là một số phím tắt được sử dụng rất nhiều mà bạn nên làm quen, đảm bảo có nhiều phím tắt bạn không biết đâu. 

Các phím tắt cơ bản: 

• Frame (F): tạo frame.
• Slice (S): tạo vùng để export nhanh.
• Move (V): Di chuyển đối tượng
• Scale (K): Phóng to thu nhỏ tự do một đối tượng
• Pen (P):  vẽ vector
• Pencil (S): vẽ tự do (kết quả vẫn là đường vector).
• Rectangle (R): vẽ hình vuông
• Line (L): Vẽ đường thẳng
• Arrow (Shift + L): vẽ mũi tên
• Ellipse (O): Vẽ hình ê-líp, hình tròn (giữ shift)
• Star: Vẽ hình sao (điều khiển các thuộc tính đa giác bằng bảng tham số)
• Place Image (Ctrl+Shift+K): Chèn hình ảnh nhanh từ máy tính
• Text (T): Tạo chữ
• Hand tool (H): di chuyển vùng nhìn

Các phím tắt nâng cao:

• Ctrl + chuột trái: deep select (chọn sâu 1 đối tượng).
• Shift + I: mở components libraries 
• Alt + chuột trái: copy nhanh một đối tượng 
• Ctrl + /: search mọi thứ mà bạn cần (mình sử dụng chủ yếu để search plugin)
• Ctrl + \:  tắt/mở giao diện làm việc
• Shift + A: tạo auto layout cho 1 đối tượng được chọn 
• Ctrl + Alt + K: tạo components cho 1 đối tượng được chọn

Figma có một hệ thống phím tắt rất đa dạng

1.7. Đổi tên hàng loạt layer

Một mẹo khá hữu ích để có thể quản lý file hiệu quả là đặt tên có mục đích. Nhiều bạn làm việc vẫn rất hay quên đặt tên cho các file thiết kế của mình khiến cho coder hay designer khác nhận file thiết kế của bạn lúng túng không biết đâu là lần. 

Vì thế việc đặt tên file là cực kỳ quan trọng. Nhưng trong thực tế đôi khi bạn sẽ quên làm việc này. Tuy nhiên thì bạn có thể dễ dàng thay đổi tên layer hàng loạt với công cụ Rename (phím tắt Ctrl +R). 

Thao tác đơn giản bạn chỉ cần chọn vào các frame cần đổi tên. Nhấn tổ hợp Ctrl +R và nhập tên mới mong muốn cho các frame thiết kế. 

Thay đổi tên layer nhanh chóng với tính năng Rename

2. Một số plugin hữu ích khác

Nếu bạn hỏi plugin figma là gì? Đơn giản đó là những phần mềm bên thứ 3 được phát triển để hỗ trợ người dùng làm việc. Hiện nay có hàng ngàn plugin được công bố trên community. Tất nhiên là chúng ta không thể sử dụng tất cả chúng. Vì thế ngoài unbackground mình đã kể trên, mình sẽ liệt kê cho các bạn thêm một vài plugin hữu ích. 

2.1. Ratios – tạo ra tỷ lệ hình ảnh chính xác

Như mình đã đề cập phía trên, tỷ lệ là yếu tố cực kì quan trọng không chỉ trong thiết kế giao diện mà còn là thiết kế đồ họa nói chung. Trong thực tế làm việc, chúng ta rất hay biến đổi tỷ lệ hình ảnh vô tội vạ, khiến cho hệ thống thiết kế không đồng nhất. 

Link Plugin: Ratios

Ratios – plugin giúp bạn tạo ra tỷ lệ vàng trong thiết kế

2.2. LottieFiles – kho animation miễn phí

Ảnh động lúc nào cũng nhìn thú vị hơn đúng không nào. LottieFiles  cung cấp cho bạn kho tài nguyên animation hoàn toàn miễn phí. Plugin hỗ trợ bạn xuất file gif hay png. 

Link Plugin: LottieFiles

Lấy hàng ngàn ảnh động thú vị với LottieFiles

2.3. Brandfetch – lấy tài nguyên các thương hiệu nổi tiếng

Với plugin này, Bạn sẽ có quyền truy cập vào tài nguyên từ các thương hiệu khắp nơi trên thế giới. Bạn có thể lấy logo, hệ thống màu hoặc thậm chí là cả phông chữ của thương hiệu. Tiết kiệm thời gian google quá trời!

Link Plugin: Brandfetch

Brandfetch plugin

2.4. Mapsicle – chèn bản đồ vào thiết kế 1 cách nhanh chóng

Đúng như miêu tả, plugin này giúp bạn chèn bản đồ vào file thiết kế một cách trực quan nhất. Bạn không cần phải google map và cap màn hình lại đâu. 

Link Plugin: Mapsicle 

Mapsicle – chèn bản đồ một cách dễ dàng

2.5. QR code Generator – tạo qr code chỉ trong 1 nốt nhạc

Thay vì phải sử dụng các trang web tạo QR rườm rà nhiều công đoạn. Với plugin này bạn chỉ cần 1 URL là tạo xong QR code. 

Link Plugin: QR code Generator 

Plugin QR code Generator

2.6. Iconfy – kho icon miễn phí

Cuối cùng là Iconfy, kho icon lớn bật nhất trong figma.

Link Plugin: Iconfy

Plugin Iconfy 

3. Khóa học Figma tại TELOS

Để sử dụng công cụ một cách thành thạo, việc hiểu bản chất cốt lõi của công cụ là điều tối quan trọng mà chúng cần nắm rõ. Khóa học Figma tại TELOS hướng dẫn bạn cách sử dụng các chức năng khác nhau của công cụ mạnh mẽ này. Hỗ trợ hình thành các ý tưởng nền tảng về thiết kế giao diện nói riêng, cũng như việc sử dụng figma trong công việc sáng tạo nói chung.

Khóa học figma tại TELOS – giảng viên Lưu Trọng Nhân

4. Kết luận

Trên đây là một số mẹo và kỹ thuật mà mình tin rằng nếu bạn áp dụng và luyện tập mỗi ngày. Việc sử dụng công cụ thành thạo sẽ là sớm hay muộn. Figma là một công cụ với rất nhiều điều mới mẻ mà chúng ta cần khám phá. Để có thể thành thạo hơn, việc tham gia một khóa học figma sẽ giúp cho bạn hình thành tư duy hệ thống cũng như hiểu về bản chất của từng phím tắt, từng công cụ. 

Hy vọng những chia sẻ trên đây là hữu ích đối với bạn. Đừng ngần ngại liên hệ với chúng mình để được tư vấn miễn phí về khóa học nhé!