Figma - Bài 7: Smart Animate | kaorumap

Figma - Bài 7: Smart Animate
Video này mình sẽ giải thích về Smart Animate của figma và hướng dẫn các bạn làm 1 đoạn demo nhỏ bằng Smart Animate.
File demo trong video:
www.figma.com/community/file/...
Plugins sử dụng trong video:
Unsplash: www.figma.com/community/plugi...
Content Reel: www.figma.com/community/plugi...
Tìm hiểu thêm về Smart Animate tại:
help.figma.com/hc/en-us/artic...
Giảng viên: Nguyễn Ngọc Thảo Nguyên.
/ kaorumap
-------------------------------------------------------------------------------------------
Please SUBSCRIBE to my channel for more arts and guides.
Follow me: / kaorumap .
------------------------------------------------------------------
#Figma #FigmaTutorial #FigmaForBeginners
© Copyright by kaorumap ☞ Do not Re-up

[@thuynguyen-mf7le]

trời ơi đúng cái em đang cần. video chị nói rất dễ hiểu, cảm ơn chị đã hướng dẫn ạ. Hy vọng chị ra nhiều video hơn nữa. 😘

[@TVCookingTV]

Rất thích các video về figma của bạn!

[@minhanhnguyen1863]

chị ơi xem hướng dẫn của chị rất hay và dễ hiểu, mong chị ra thêm nhiều video nữa nha. Thanks chị nhiều ạ!!!!

[@quoctruongtran6976]

Đây là một kênh cực kỳ hữu ích ở mảng design. Em cảm ơn chị đã cho ra những video chất lượng như vầy ạ. Em rất thích cách chị hướng dẫn, rất dễ hiểu. Em chúc cho kênh của chị sẽ phát triển hơn trong thời gian sắp tới ❤

[@DungNguyen-nm9ft]

Thực sự vô cùng hay. Mong chị sớm ra video ạ.

[@suna4285]

Video chị làm rất dễ hiểu, cảm ơn chị !

[@uctran2551]

Rất là bổ ích nhờ chị mà em mới biết trong figma có cả chuyển động luôn á tại em mới học

[@hunkfong91]

Cảm ơn chị rất nhiều. Mình beginner rất cần những video như thế này.

[@nguyetchau2606]

Hello chị, cảm ơn chị đã hướng dẫn. Rất cụ thể và dễ hiểu.

[@trinhngocquy4613]

Video bổ ích quá, cám ơn chị nhiều

[@turenanim7093]

Cảm ơn bạn rất nhiều. Bài chia sẻ rất hữu ích

[@vanletrieu3257]

Cảm ơn chị đã hướng dẫn cách dùng figma hay. Tất cả các bài giảng của chị rất hữu ích. Mong chị ra thêm nhiều video như vậy nữa 🥰

[@kaorumap]

Cảm ơn em nha!

[@phongnguyen0000]

Cảm ơn chị rất nhiều! Hy vọng chị sẽ ra clip thực hành về làm ra 1 sản phẩm ví dụ như app về food quy trình từng bước làm research, user flow.v.v. như thế nào? Để em hiểu rõ ơn ạ.

[@manhtranvan3160]

cảm ơn chị rất nhiều, rât mong chị ra nhiều video bổ ích hơn

[@phantrinh]

cám ơn bạn nhiều, video rất hữu ích

[@phongdv7854]

Xin cảm ơn. Hay lắm chị

[@bechupngoc]

Mình đã bắt đầu những bước đầu tiên về UI UX bằng clip của bạn, mong bạn ra thêm clip về các bước làm research, luồng... nhé

[@linhnguyen-tk4vz]

chờ c làm video như ngóng mẹ về chợ. c ra video nhiều hơn nữa nhé, yêu c

[@kaorumap]

Chị cũng muốn lắm mà con chị nghỉ hè rồi nên đời không như là mơ, hết làm designer lại phải làm nội trợ trông trẻ 😂😂😂

[@thosandat]

video hay lắm.cảm ơn bạn

[@anhdang3103]

Cảm ơn cô ạ

[@liamnguyen3379]

cảm ơn cô nhiều !

[@quangduy6575]

Mong chị làm 1 chuỗi seri về các hiệu ứng trong FIGMA

[@LinhDuong-su6kp]

hay quá chị ơi, rất dễ hiểu ạ

[@kaorumap]

cảm ơn em!

[@thaoduongda5403]

Hay quá à

[@NguyenNam-rh7mq]

Cảm ơn chị rất nhiều ạ. mong chị sớm ra thêm video ạ :))))

[@kaorumap]

Cảm ơn em, chị sẽ cố gắng, tình hình tphcm đang tệ nên chị cũng gặp 1 số khó khăn ở nhà, không có tâm trạng làm video mới lắm 🥲

[@LongNguyen-tr5bf]

Hi chị ! Cho e hỏi là sao protopyte On Drag của em lại đi từ dưới lên mà ko phải từ phải qua trái ạ

[@nganton9830]

Cảm ơn chị rất nhiều vì video rất hay ạ. Dạ chị cho e hỏi làm sao để xuất đoạn animate đó ra để đưa cho DEV bỏ vào code ạ. Rất mong nhận được sự phản hồi từ chị ạ.

[@PhuongNguyen-lg9lu]

Great 🎉

[@thanglong617]

thanks C

[@meraklis94]

Chị ơi, chị làm hướng dẫn để up một ít chuyển động của project lên behance được không ạ? Em đang tìm hiểu nhưng không biết phải làm như thế nào

[@hunghuynh49]

Chị ơi, cho mình hỏi ở giây 13:07 cái phần nội dung trong email adrdess và password đó tự điền. Muốn thay đổi nội dung thì ntn vậy chị. Cám ơn chị

[@thuynguyen-xh2jn]

Chị ơi. Làm sao không cần kích mà tự chuyển động hiển thị ra được chị nhỉ?

[@voxuantruyen9920]

Bạn cho mình hỏi, khi mình làm smart animate cho email bằng on drag thì khi present mình chỉ drag theo chiều dọc chứ không như chiều ngang như của bạn. Không biết mình bị lỗi không ta?

[@phungminh6077]

ai muốn vào team chị ấy nè

[@phamman4351]

chị ơi sao lúc chạy thử chị chèn dc điện thoại vậy chỉ em với ạ !!!!!!

[@xuando5857]

cảm ơn chị rất nhiều ạ. Chị có thể cho em hỏi. Mình có cách nào download hoặc lưu lại đoạn demo khi mình play để làm thành video hướng dẫn sử dụng không ạ?

[@kaorumap]

Lưu lại đoạn demo chắc chỉ có cách quay màn hình thôi em, chị chưa nghĩ ra cách nào khác vì chị cũng tự học tự mò thôi

[@shanka1987]

Kaorumap làm một bài giới thiệu về các hiệu ứng của prototype đi ạ

[@kaorumap]

Bạn có thể xem các bài khác trong playlist figma mình có giới thiệu những cách làm prototype khác

[@TuanTuNhien]

Các bài giảng rất dễ hiểu ạ, em đã theo dõi hết danh sách bài figma cơ bản của chị và hiện đang có thắc mắc: Như bài này nếu muốn làm drag xóa cho tất cả các danh sách tên như thế kia thì phải làm thêm từng trang cho mỗi người hay sao ạ, theo em nghĩ như vậy thì dài quá mà không khả thi. Em đang có tư duy làm thêm Variants cho Component tên đó nhưng chưa biết làm sao để nó drag sang và xóa được ạ. Rất mong chị làm thêm video nói chi tiết hơn về câu hỏi của em ạ. Em cảm ơn chị nhiều ạ.

[@kaorumap]

Không làm như vậy em, đây là thiết kế prototype (dạng demo để cho người ta biết nó sẽ như thế nào ở sản phẩm thật) nên không ai cần xoá tất cả hết, chỉ demo là khi xoá sẽ ra sao thôi em

[@TuanTuNhien]

@@kaorumap oh dạ vâng em hiểu rồi ạ, em cảm ơn chị vì những video rất dễ hiểu, hy vọng c ra thêm nhiều video kiến thức nữa về figma ạ

[@uchuyhuynh7265]

Cô ơi, cho em hỏi chút ạ, lúc set prototype ở frame 1 và frame 2 em thấy cô để On Tap, không hiểu sao trên Figma của em không có On Tap ạ. Với lại em chưa hiểu lắm những tính năng interaction như On click, on drag, after delay, key/ gamepad... nếu được nhờ cô làm một clip giải thích giúp em được không ạ? Em cảm ơn cô, những bài giảng của cô rất hữu ích ạ

[@kaorumap]

figma mình xài trên browser nên nếu của bạn thiếu chức năng nào đó thì khả năng cao là bạn chưa đăng ký figma beta, mình có 1 video hướng dẫn đăng ký figma beta để làm interactive component, bạn xem lại nhé kzbin.info/www/bejne/bJTRfHZ7bceVoKc. Về các tính năng thì đơn giản là dịch từ tiếng Anh sang tiếng Việt thôi: On click nghĩa là khi click vào thì action đó (có thể là frame 1 biến thành frame 2) sẽ thực hiện; after delay nghĩa là sau 1 khoảng thời gian chờ (do mình chọn) thì action đó tự thực hiện, không cần click gì cả; on drag nghĩa là action sẽ thực hiện khi bạn drag chuột; key/gamepad là action sẽ thực hiện khi bạn nhấn 1 nút trên bàn phím (nút do bạn tự chỉ định), bạn chịu khó xem hết các clip figma của mình thì cũng sẽ thấy mình thực hiện demo gần hết các tính năng này rồi, video riêng mình không hứa được do mình cũng khá bận và có 1 số kế hoạch làm những video nội dung khác rồi

[@wolfgang1609.]

thèm video mới quá :((

[@chuyencuaandy]

Tks chị, phần này cho em hỏi là ở đoạn sổ ra bảng chọn kiểu yes no thì nên dùng open overlay hay làm nhiều frame ạ. Vì khi em lf project cảm giác nó rất là lộn xộn bởi những đường prototype. Kiểu phải copy ra nhiều nó copy cả các liên kết nữa, nên lúc muốn dùng prototype mở ra thì nhằng nhịt lắm, nên em muốn giảm bớt frame đi ạ 😭

[@kaorumap]

Cái đó tùy em thôi, bài này chị nói về smart animate nên hạn chế đề cập tới mấy cái khác. Cá nhân chị thấy interactive component tiết kiệm và giảm được đáng kể số lượng frame hơn.

[@chuyencuaandy]

@@kaorumap chị có thể làm thêm các bước để bắt đầu 1 dự án mới hoàn toàn được không ạ, ví dụ là nên tạo component (interactive component) khi nào, nên làm sắp xếp các frame như nào, làm sao để ít phải tạo nhiều frame... được không ạ. Em mới làm mà kiểu cứ xắp xếp lung tung hết lên, các đường prototype dính hết vào nhau.

[@kaorumap]

Interactive component chị đã hướng dẫn ở figma bài 6 interactive component rồi em, còn những cái khác có thời gian chị sẽ làm tiếp

[@chuyencuaandy]

@@kaorumap Rồi kiểu em cũng chưa biết là mình tạo màn hình đã đủ chưa. Ví dụ: - em có 1 frame Main có 4 text là A B C D - em muốn khi bấm vào A thì text đổi thành A1, bấm vào B thì thành B1, tương tự C thành C1 và D thành D1. - vậy em cần tạo nhiều frame chứa các trường hợp kiểu như (A1, B, C, D) (A, B1, C, D) (A, B, C1, D) (A, B, C, D1) (A1, B1, C, D) (A1, B, C1, D).... có thể lên đến vài chục frame vì chứa các trường hợp thay đổi text khác. hay là chỉ cần tạo 4 frame chứa 4 trường hợp chính rồi nối frame Main vào 4 cái đó thôi ạ?

[@linhtrang5903]

hiệu ứng tab chữ vào khung input sao thế chị ạ

[@NghiaNguyen-bi4ge]

cho mình hỏi là làm sao có thể plug in file vector từ Ai vào trong figma được và chèn hình kiểu clipping mask ạ?

[@kaorumap]

Hình vector bạn muốn đem từ ai sang figma chỉ cần copy bên ai (ctrl C) rồi sang figma paste vào (ctrl V) thôi

[@lilaclikeyou4624]

Chị cho em hỏi tại sao đoạn nhảy lên cửa số "Are you sure?" mình không tách nó thành 1 frame riêng và dùng open overlay vậy ạ?

[@kaorumap]

Em làm kiểu nào cũng được hết nhé, vì bài này chị tập trung giảng smart animate nên chị không muốn mất thời gian giải thích về open overlay

[@lilaclikeyou4624]

​@@kaorumap Em hiểu rồi, cảm ơn chị. Video của chị hướng dẫn rất hay ạ

[@trunguctran1498]

Cô ơi! Cô cho em hỏi. Em lỡ bỏ cái hiện thị đường giới hạn gợi ý (như smart guides trong Ai) trên figma rồi, làm sao để cho hiện lên cô nhỉ?

[@kaorumap]

em vô đây xem 3 cái snap trên cùng em có mở lên không nhé, có thì nó sẽ tự dính tự canh với grid và các object khác như kiểu smart guide www.dropbox.com/s/7q51t2suu93o9u2/Screen%20Shot%202021-06-26%20at%2012.05.37%20PM.png?dl=0

[@trunguctran1498]

@@kaorumap dạ được rồi. em cảm ơn cô nhiều nhiều

[@thuynguyen-mf7le]

chị ơi, em hỏi chị chút ạ. em muốn làm cái Notification kiểu nó hiện từ trên xổ xuống, xong tầm 3s là nó tự biến mất, hoặc người dùng tắt nó đi. cái đó gọi là gì và cách làm như nào ạ chị?

[@kaorumap]

không biết phải cái em cần không nhưng chị nghĩ là overlays kzbin.info/www/bejne/o4m8dnSJZs9oZ5o

[@hmeiiuyn3840]

cô cho em hỏi mk kết hợp với cuộn lên xuống thế nào ạ. em làm thử là mk phải group chúng lại nên lúc làm gạt sang xóa nó k đc ạ

[@kaorumap]

Em xem bài Prototype mình có hướng dẫn phần này rồi nhé

[@tramvothibich329]

Dạ c cho em hỏi làm sao để fill in gmail với mật khẩu vào xong nhấn ra nó được như chị v ạ . Rất mong được c giải đáp ạ

[@kaorumap]

kzbin.info/www/bejne/g2WlaYlphrVsd9E video này có hướng dẫn phần đó nha em

[@tramvothibich329]

@@kaorumap dạ em cảm ơn c nhiều ạ 🥰

[@vantruongthithanh5670]

Cho em hỏi là Email Login tại sao lại là mask group vậy ạ?

[@kaorumap]

Em xem kỹ lại nhé, mask group để sau đó làm animation cho cái mask và chữ email login xuất hiện dần từ trái sang phải

[@vantruongthithanh5670]

@@kaorumap Dạ, em biết mình làm sai chỗ nào rồi. Em cảm ơn cô.

[@nguyenduyen8719]

Chị ơi video của mình đang để chế độ Không công khai đó ạ.

[@kaorumap]

Chị đang làm phụ đề nên chưa public em