Với xuất phát điểm là một công cụ dùng để thiết kế giao diện. Figma đã không ngừng thay đổi và cập nhật giúp tối ưu hóa không chỉ trong lĩnh vực thiết kế giao diện mà còn là lĩnh vực sáng tạo nói chung. 

Với cộng đồng rộng lớn cùng giao diện trực quan dễ sử dụng. Việc bạn khám phá để thiết kế Slide không phải là điều gì quá khó khăn. Trong khóa học Figma cấp tốc ngày hôm nay, hãy cùng TELOS tìm hiểu về cách ứng dụng công cụ này trong thiết kế Slide phục vụ cho nhu cầu của bạn. 

Bài viết liên quan: 

lam-slide-bang-1-cong-cu-ui-design-tai-sao-khong

Làm slide bằng 1 công cụ UI Design – tại sao không?

1. Lý do khiến Figma là công cụ làm Slide cực hiệu quả

Trước khi đi vào nội dung chính, mình xin khẳng định lại một vấn đề: Figma là công cụ thiết kế slide hiệu quả. Đúng vậy – Tuy nhiên, nó không thể thay thế các công cụ làm slide chuyên nghiệp như Powerpoint hay Google Slide. 

Vì về bản chất thì đây vẫn là công cụ được thiết kế để tối ưu hóa quy trình thiết kế giao diện. Một số tính năng hoặc phím tắt sẽ khác so với Powerpoint khiến cho những người đã quen việc sử dụng Powerpoint sẽ thấy hơi khó chịu. Tuy nhiên nếu bạn thích khám phá, làm slide với những hiệu ứng chuyển cảnh chuyên nghiệp chỉ bằng một vài click chuột. Thì đây là công cụ rất đáng để thử. 

mot-mau-presentation-template

Một mẫu presentation template

Được rồi, vậy thì mình cùng điểm qua một vài lý do nào! Đầu tiên là: 

1.1. Ứng dụng trực quan – dễ thao tác

Không phức tạp các công cụ trong hệ thống Adobe. Công cụ này được thiết kế với sự tối giản khiến cho bất cứ ai cũng có thể làm quen nhanh chóng. Chỉ cần tham gia 1 khóa học Figma, bạn hoàn toàn có thể làm chủ công cụ này để làm mọi thứ mình thích. 

thiet-ke-truc-quan-de-thao-tac

Thiết kế trực quan dễ thao tác

1.2. Cộng đồng rộng lớn, cập nhật liên tục

Là yếu tố có sức ảnh hưởng lớn nhất đến một công nghệ. Figma hiện nay đã và đang trở thành công cụ thiết kế có cộng đồng lớn mạnh nhất. Chỉ cần tìm kiếm điều bạn thắc mắc trên tab cộng đồng, hàng loạt các template, plugin sẽ giúp bạn giải quyết hầu như mọi vấn đề bạn gặp phải trong quá trình thiết kế. 

Trong việc thiết kế Slide cũng vậy, bạn sẽ phải gặp khá nhiều vấn đề liên quan tới việc tìm kiếm hình ảnh minh họa, vector, giải quyết vấn đề liên quan tới vẽ biểu đồ, xử lý thống kê số liệu… Có rất nhiều plugin hỗ trợ bạn việc này. 

cai-gi-kho-co-cong-dong-lo

Cái gì khó? Có cộng đồng lo

1.3. Khả năng cộng tác

Hiện tại, Figma cho phép tối đa 2 người chỉnh sửa 1 file đối với bản miễn phí. Đây vừa là ưu điểm vừa là nhược điểm khi sử dụng để làm slide. Ưu điểm là với 2 người chỉnh sửa thì tốc độ làm slide sẽ được đẩy nhanh hơn.

Nhược điểm là bị giới hạn số người cộng tác nên sẽ hạn chế việc chỉnh sửa. Lời khuyên của mình nếu nhóm của bạn có 3 thành viên trở lên. Hãy phân chia công việc hợp lý (người research, người ghi chú, người chỉnh sửa, người làm slide). Như vậy thì tốc độ làm việc sẽ được tối ưu hóa. 

lam-viec-cung-nhau-that-don-gian

Làm việc cùng nhau thật đơn giản

1.4. Đơn giản vì nó nhẹ hơn Powerpoint

Chúng ta đều biết Powerpoint là ứng dụng khá nhẹ và đa số cấu hình máy hiện nay đều dễ dàng để sử dụng nó. Tuy nhiên thì, đối với một file thuyết trình nặng hay có quá nhiều hiệu ứng chuyển cảnh. Thì máy của bạn sẽ bắt đầu nóng lên và giật lag. 

Cách dùng figma chỉ đơn giản là máy tính được kết nối mạng, file thiết kế sẽ được lưu trữ đám mây khiến cho máy bạn đỡ phần nào. Từ đó máy tính sẽ làm việc ổn định hơn. 

cong-cu-su-dung-he-thong-luu-tru-dam-may

Công cụ sử dụng hệ thống lưu trữ đám mây

1.5. Khả năng chỉnh sửa hàng loạt với Component

Đây cũng là điểm khác biệt lớn nhất giữa Figma và những công cụ thiết kế slide thông thường. Như các bạn đã biết, trong việc thiết kế slide thì những element sẽ được tái sử dụng nhiều lần. Ví dụ như các element button, mũi tên, bảng, ô được sử dụng hầu như ở mọi slide để minh họa cho bài thuyết trình Vì thế, việc chỉnh sửa hàng loạt là một yếu tố hết sức hữu ích giúp đẩy nhanh quá trình làm việc. 

Đây là một phần quan trọng trong khóa học Figma tại TELOS. Trong khóa học chúng mình sẽ nói sâu hơn về khía cạnh này. Trong phạm vi bài viết, bạn chỉ cần hiểu đơn giản component là những elements có tính tái sử dụng trong thiết kế. 

chuc-nang-components-toi-da-hoa-hieu-suat-lam-viec

Chức năng components tối đa hóa hiệu suất làm việc

1.6. Hiệu ứng Animate sinh động, dễ thiết lập

Lý do cuối cùng và cũng là quan trọng nhất mà mình nghĩ rằng ứng dụng này ăn đứt hầu hết các công cụ thiết kế slide hiện nay. Đó là chính là yếu tố chuyển cảnh giữa các slide với nhau. Việc sử dụng Powerpoint để làm animate không phải là không thể. Tuy nhiên thì theo mình thấy nó khó hơn rất nhiều so với việc sử dụng công cụ này. 

Như các bạn đã biết thì thiết kế giao diện yêu cầu khá nhiều chuyển động để minh họa cho thiết kế. Nếu biết tận dụng chức năng này vào trong figma designs slide. Bạn sẽ có cho mình một bài thuyết trình với đầy hiệu ứng sống động chỉ với một vài click chuột. 

ban-co-the-tao-ra-nhung-hieu-ung-ao-ma-voi-smart-animate

Bạn có thể tạo ra những hiệu ứng ảo ma với Smart Animate

2. Các khái niệm cơ bản cần nắm khi thiết kế slide

Được rồi, chúng ta hãy bắt tay vào những bước cơ bản nhất để xây dựng một buổi trình chiếu slide. Trước tiên thì mình cần phải giải thích một số khái niệm mà chúng ta sẽ phải quen khi làm việc. 

2.1. Frame

Trong khóa học Figma tại TELOS, chúng mình đã chỉ ra các hệ thống phân cấp trong tool này. Trong đó Frame đóng vai trò như một bao bì dùng để đóng gói các element. Trên phương diện thiết kế Slide, bạn chỉ cần hiểu Frame là slide. Nghĩa là một frame sẽ đại diện cho 1 slide trong file thuyết trình của bạn. Vì thế, nếu bạn cần tạo thêm 1 slide, hãy tạo thêm 1 frame. 

day-la-cong-cu-frame

Đây là công cụ frame

2.2. Move

Với phím tắt là V, Move là công cụ giúp bạn tương tác với mọi thứ. 

move-tool

Move tool 

2.3. Prototype

Đây là công cụ giúp bạn tạo chuyển động trên slide. Về cơ bản, bạn chỉ cần nối frame 1 với frame 2 (tương ứng với slide 1 và slide 2) lại với nhau thì hiệu ứng chuyển động sẽ được kích hoạt. Những yếu tố khác để tạo nên sự sinh động và liên kết giữa 2 slide sẽ được thiết lập ở bảng Interaction Details. Để hiểu rõ hơn, mời bạn tham khảo qua khóa học Figma tại TELOS.

cong-cu-prototype

Công cụ prototype

3. Các bước cơ bản tạo Slide

Để hướng dẫn bằng “văn bản” có lẽ sẽ khá khó để bạn có thể thực hành theo. Vì thế nên mình xin gửi bạn Video làm slide từ anh Nhân – Creative Leader tại TELOS. Đây là bài chia sẻ trong buổi giao lưu về việc học figma tại fanpage Figma Designer Việt Nam (https://www.facebook.com/figmavn). 

Mời các bạn cùng xem:

Hướng dẫn làm slide trong khóa học Figma của giảng viên Lưu Trọng Nhân

Dưới đây là một vài hướng dẫn cơ bản. Bạn có thể đọc và thực hành theo: 

3.1. Thiết lập slide đầu tiên của bạn

Nhấp vào New design file. Chọn công cụ Frame (phím tắt F) để vẽ một cái khung. Hoặc bạn có thể chọn nhanh bằng cách chọn Presentation – slide 16:9 bên tay phải của file thiết kế. Như vậy sẽ giúp bạn tiết kiệm thời gian. 

Đổi tên frame của bạn bằng cách nhấp đúp vào tiêu đề màu xanh ở trên cùng bên trái của frame.

cach-tao-slide

Cách tạo slide 

3.2. Thêm văn bản tiêu đề

Sử dụng Công cụ Văn bản ( T ) và viết tiêu đề của bạn. Sử dụng các hộp văn bản riêng biệt cho các dòng riêng biệt. Điều chỉnh văn bản của bạn bằng cách sử dụng công cụ text được hiển thị bên tay phải. Ở đây bạn có thể điều chỉnh font, kích thước, dạng chữ…

an-t-va-viet-nhung-gi-ban-muon-trinh-bay

Ấn T và viết những gì bạn muốn trình bày

3.3. Thêm hình ảnh

Bạn có thể sử dụng ảnh có sẵn hoặc ảnh của riêng bạn. Để thêm một hình ảnh, việc đơn giản nhất bạn chỉ cần tìm ảnh trên mạng, copy chúng và paste lại vào figma (tổ hợp Ctrl + C, Ctrl + Z). Hoặc nếu ảnh có sẵn trong máy, bạn chỉ cần kéo thả vào là xong. 

Về hình ảnh thì còn khá nhiều yếu tố nâng cao, tuy nhiên trong phạm vi khóa học figma cấp tốc này, bạn chỉ cần làm như hướng dẫn trên là được.

them-anh-vao-man-hinh-lam-viec

Thêm ảnh vào màn hình làm việc

3.4. Tạo hiệu ứng chuyển cảnh

Như vậy là chỉ với 3 bước đơn giản bạn đã có thể tạo ra được slide với hình ảnh và chữ đầy đủ. Việc cần làm tiếp theo là tạo hiệu ứng chuyển tiếp giữa 2 slide. 

Khi bạn chuyển sang chế độ Prototype, trên các frame sẽ xuất hiện những dấu chấm trắng viền xanh như hình trên. Việc bạn cần làm là click chuột vào dấu chấm đó. Giữ chuột và kéo đến Frame (slide) mà bạn muốn. 

cach-ma-prototype-hoat-dong

Cách mà prototype hoạt động

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

Khóa học FigmaCreative đi sâu vào khía cạnh sử dụng công cụ này để làm các công việc sáng tạo. Đây là một khía cạnh cực kỳ mạnh mẽ của bên cạnh việc sử dụng công cụ để thiết kế giao diện. Đến với khóa học này, bạn sẽ được học làm slideshow, thiết kế đồ họa đơn giản, triển khai hệ thống hóa các thiết kế bài đăng trên mạng xã hội…

giang-vien-cua-khoa-hoc-figma-creative-khanh-nimal

Giảng viên của khóa học Figma Creative – Khánh Nimal

4.1. Ai nên học khóa học Figma này? 

Khóa học Figma này dành cho bất cứ ai làm việc trong lĩnh vực sáng tạo. Không chỉ giúp bạn nắm bắt được tư duy sử dụng công cụ. Giảng viên còn cung cấp cho bạn một kho template có sẵn để thực hành 1 cách nhanh chóng. Một số ngành nghề phù hợp để học khóa này:

4.2. Kiến thức mà bạn có

Khóa học Figma Creative cung cấp cho bạn kiến thức để sáng tạo không ngừng với công cụ này. Ngoài ra bạn còn được chia sẻ kho template xịn sò từ giảng viên. Ngoài ra, điều quan trọng nhất mà TELOS muốn đem lại cho học viên của mình là khả năng tự học về sau. Giúp bạn phát triển hơn trong lĩnh vực sáng tạo.

khoa-hoc-dao-sau-vao-tu-duy-sang-tao

Khóa học Figma đào sâu vào tư duy sáng tạo

Kết luận

Là một công cụ đa năng có thể ứng dụng được trong nhiều khía cạnh sáng tạo khác nhau. Với tốc độ phát triển cùng với cộng đồng rộng lớn, Figma có thể trở thành công cụ sáng tạo mạnh mẽ không chỉ trong lĩnh vực UX/UI. Việc tham gia khóa học Figma tại TELOS sẽ giúp bạn trang bị toàn diện kiến thức về công cụ này. Sẵn sàng gia nhập vào lĩnh vực sáng tạo đầy tiềm năng này. 

Hy vọng những kiến thức trên là hữu ích cho bạn. Hãy theo dõi chúng mình để đón xem nhiều bài viết về Design của TELOS nữa trong tương lai.