Figma (beta) | Hướng dẫn làm Image Slider/Scroll bằng Interactive Component - PHẦN 1 | kaorumap

Video hướng dẫn làm 1 image scroll/slider bằng interactive component (phần 1) để giảm số lượng frame khi làm prototype trên figma. Nếu bạn nào chưa biết về interactive component thì xem video này trước nhé: • Figma (beta) - Bài 6: ...
Cảm ơn bạn Vương Thái Hùng đã hướng dẫn mình dùng phím tắt I để trích màu nhanh!
Plugins sử dụng trong video:
Unsplash: www.figma.com/...
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

[@chaengsquareblackpink4962]

Chị làm thêm các video về figma tutorials đi ạ

[@ThuyNguyen-ht3th]

dạ chị ơi, thay vì chèn hình thì em chèn video có được không ạ?

[@NienVuong]

sao của em nó ko chạy ạ nó chạy ra màu trắng ko

[@buiviethung9007]

Trường hợp làm nó không auto chạy thì fix sao ạ, Khi dùng 2 trang chuyển qua trang khác quay lại thì slide nó tự động, còn khi em dùng 1 trang thì nó đứng im không chạy

[@kaorumap]

em làm y chang như chị đã làm thì nó sẽ chạy, các bạn khác xem theo đều làm được

[@16.nguyenhuuhuy61]

figma của e ko chạy được after delay. Mà on click thì vẫn dùng được. Này do máy yếu hay sao vậy chị

[@kaorumap]

Chị không rõ nữa em, có thể do mạng chậm hoặc do mình làm nhầm bước nào đó

[@HaiNguyenBrand]

Tks

[@baothang7882]

chị cho em hỏi nếu back lại ảnh trước thì làm như nào vậy ạ

[@kaorumap]

em xem bài này nhé kzbin.info/www/bejne/mH25mJ6ihJ2chM0

[@ngoctruong235]

Cám ơn chị nhiều lắm về những bài giảng rất dễ hiểu ạ.

[@CianaWu]

Em cám ơn chị rất nhiều ạ, phần này em xem nhiều video lắm rùi vẫn không làm được, em xem xong hướng dẫn của chị em làm được ngay luôn.

[@hale-cl9zy]

Cảm ơn bài giảng của chị. Sao em làm khúc chuyển ảnh cuối về ảnh đầu đã chọn Instant nhưng nó cứ giật về bên trái hoài hic

[@dindin3807]

Cám ơn bài viết của chị :3

[@curtis6051]

Chị ơi cho em hỏi về những text box được không ạ. Ví dụ như tap vào rồi sẽ viết được đó ạ. Em đang thắc mắc cái đó, mong chị giúp đỡ em ạ. Em cảm ơn chị!

[@kaorumap]

kzbin.info/www/bejne/g2WlaYlphrVsd9E em xem video này nhé

[@curtis6051]

@@kaorumap Dạ vâng em cảm ơn chị nhiều ạ!

[@edval6404]

I don´t know Vietnamese, however this tutorial was clear enough to understand. It shows really well the possibilities with the new Variants component. Excellent tutorial. Greetings from Cuba.

[@kaorumap]

Thank you, I'm so glad it is helpful to you!

[@PeterHungDesigner]

cho mihnf hỏi trên XD làm được như vậy ko nhỉ. tìm hoài ko ra cách

[@kaorumap]

Mình ko xài XD bạn nha

[@PhanThiTrangFPLHN]

e k kéo đc từ cái var1 sang cái var2 đc thì làm thế nào ạ

[@huyphan2999]

sao em cộng thêm variant mới nó lại bị mất ảnh thế ạ

[@klilesama]

chị đã cứu rỗi đời em, em mới tìm hiểu figma thôi qua phần interact animation em bị lú luôn toàn làm kiểu cho nó qua cái frame khác ko à, làm 1 hồi ra cả 15 cái frame để animation cho 1 trang . Do em coi của mấy ông nước ngoài rồi làm theo . Chị dạy đúng dễ hiểu luôn em đã áp dụng và thành công cám ơn chị nhiều \(@^0^@)/

[@minhbb7434]

Wow em cảm ơn chị vì đã chỉ dẫn ạ, em rất là cần luôn

[@suongphan2319]

Chị ơi, cho e hỏi về Group Selection, Frame Selection với Flatten khác nhau như thế nào được ko ạ? Chị có thể cho e xin nguồn để e tự đọc hiểu thêm khi nào sử dụng cái nào được ko ạ?

[@kaorumap]

Em đọc ở đây nhé www.figma.com/best-practices/groups-versus-frames/

[@suongphan2319]

@@kaorumap Dạ e cảm ơn chị nhiều ạ, cácc bài chị giảng hay lăm ạ. Mong chị có nhiều sức khoẻ ạ.

[@quynhduyennguyen9300]

chị cho em hỏi nếu mình đã làm xong slider rồi mà mình muốn đổi 1 trog những hình ảnh trong đó thì làm như nào ạ

[@nhatsinhdinh]

Khi prototype e không chọn được àfter delay như chị, nó bị disable trong khi em làm y các bước như của chị

[@kaorumap]

Do em chưa đăng ký figma beta nên không có chức năng interactive component, em xem video này để hiểu rõ nhé kzbin.info/www/bejne/bJTRfHZ7bceVoKc

[@longnguyen-ju5ye]

Cảm ơn Clip của chị. Rất dễ hiểu ạ

[@phuonganhpham6780]

variants sao máy e k có ạ

[@HiuHiu-ununu]

Chị ơi, bài viết của chị rất hay. Em có 1 thắc mắc là khi em drag thì image sẽ chỉ chuyển động theo hướng từ phải qua trái. Vậy ta phải set up prototye ntn để có thể drag image theo cả 2 bên ạ? Mong chị giải đáp giúp em! Em cảm ơn nhiều ạ!

[@kaorumap]

do mình tạo 1 interaction từ 1 variant sang variant tiếp theo nên em không thể drag ngược lại được, em có thể ăn gian bằng cách tạo 2 hình chữ nhật to nằm cạnh nhau trên mỗi variant, sau đó tạo liên kết từ hình chữ nhật bên phải 'on drag' xuống variant tiếp theo và tạo liên kết từ hình chữ nhật bên trái cũng 'on drag' lên variant phía trước, sau đó em bỏ fill của 2 hình chữ nhật này đi để nó thành hình trong suốt, lúc đó khi em drag vào vùng của hình chữ nhật nào thì sẽ có interaction tương ứng xảy ra, vậy là drag qua lại đều được, nếu em không làm được thì chị có thể làm thêm 1 video ngắn follow up để giải thích cho cái này

[@HiuHiu-ununu]

dạ em làm được rồi ạ, em thấy phần này rất hay có thể áp dụng cho khá nhiều ý tưởng. Em mới học về design nên còn hơi ngu ngơ trong lĩnh vực này, cũng nhờ các bài hướng dẫn em cũng hiểu ra rất nhiều điều. Em cảm ơn chị nhiều ạ! Chúc chị luôn khỏe mạnh và gặp nhiều niềm vui trong cuộc sống để có thể chia sẻ những kiến thức phong phú, thú vị đến với mọi người ạ!

[@susongngoaikia]

@@kaorumap dạ chị ơi chị có thể làm video hướng dẫn cái này đc ko ạ, chứ em vẫn ko hiểu. Cảm ơn chị nhiều lắm ạ

[@kaorumap]

@@susongngoaikia ok em

[@hoahoang-bi6ep]

cảm ơn chị rất nhiều

[@phungtienuc3408]

Cảm ơn chị rất nhiều

[@05-manhdung11]

quá hay 10 đ ạ

[@joshephdatnguyentien]

cảm ơn chị rất nhiều

[@jkr4807]

Có cách nào để nó vừa after delay, vừa click ko ạ? E thấy có nhìu web, banner tự chuyển động mà cũng có mũi tên để click chuyển hình theo ý mình.

[@kaorumap]

Đó là web em, còn cái này em làm prototype mô phỏng trước khi phát triển thành sản phẩm thật mà

[@truonginh5553]

Chị ơi em làm tuần tự nhưng khi nhấn chạy propotype nó lại bảo cần ít nhất 1 frame là sao chị nhỉ

[@kaorumap]

Tại em chưa tạo frame nào, frame như 1 cái bảng để đặt design lên. Em chọn toàn bộ khung cần chạy prototype, click phải rồi chọn Frame selection là được

[@hienvanvo9245]

Chị ơi sao e tạo component rồi nhưng sao vẫn ko thấy dòng variant để tạo tiếp theo ạ

[@kaorumap]

Figma vẫn đang update liên tục nên một số cái làm giống y chang tutorial cũ sẽ không được, em có thể làm cách khác là tạo các variant em muốn có thành component trước, sau đó chọn tất cả các component rồi chọn nút 'combine as variants' ở panel bên phải nhé

[@nguyenvanmanh9635]

hay cuc ki luon

[@vanhungnguyen893]

Chị ơi cho em hỏi ạ. Cái component của em không sử dụng được after delay với on drag là bị làm sao ạ

[@kaorumap]

Chắc em chưa đăng ký figma beta kzbin.info/www/bejne/bJTRfHZ7bceVoKc

[@HanGia-fe9yt]

giọng c cưng quá đi à ra nhiều video nha

[@kaorumap]

Chị đã update phần donate, cảm ơn gợi ý của em ❤️

[@phuocien.1155]

hay quá ạ

[@bepmechong3375]

Thank c đã có hướng dẫn cực hay

[@BuiThiDieuXuanFPLHN]

Chị có thể hướng dẫn chèn thêm mũi tên để di chuyển vào slideshow k ạ

[@kaorumap]

Chị không hiểu ý em lắm nhưng về đề tài này chị còn 1 cái clip phần 2 màu tím nữa, em xem thử có gợi ý được cho em làm cái em muốn không

[@EnReview92]

Chờ chị ra nhiều video thường xuyên hơn.

[@vixduong3361]

Chị ơi cho em hỏi, sao em On Drag thì lại không chọn được Rectangle 2 ạ

[@kaorumap]

Chắc em chưa đăng ký figma beta nên chưa có chức năng interactive component? Em xem video này để biết cách đăng ký nhé kzbin.info/www/bejne/bJTRfHZ7bceVoKc

[@NgaNguyễnThịXuân-p5u]

Cám ơn bạn

[@jolly1306]

Cảm ơn cô ạ, rất dễ hiểu, e đã làm theo và thành công ah~~

[@thuynguyen-mf7le]

chị ơi, khi em prototype có chức năng After delay và em làm đủ các bước như chị. nhưng khi em present thử thì nó không chạy qua các hình ạ, nó đứng yên ở hình một, em đã thử qua chức năng on drag và on click nhưng nó vẫn đứng yên ạ. chị giúp em với, em cảm ơn chị ạ.

[@kaorumap]

Nếu em làm theo y hệt mà không được thì chị cũng không giúp được gì rồi, vì chị không thể thấy em thao tác ra sao nên không biết sai ở bước nào

[@thuynguyen-mf7le]

@@kaorumap chị ơi hôm đấy Figma của em chắc nó bị lỗi hay do mạng gì á. Hôm sau mở ra thì nó lại chạy bt rồi. Hihi. Em cảm ơn chị ạ, video chị hướng dẫn rất dễ hiểu. 🥰🥰

[@kaorumap]

@@thuynguyen-mf7le vậy tốt quá rồi em ♥️

[@mthuwlee]

thanks alottt❤❤

[@buivietanh3135]

quá hay , cảm ơn chị :3

[@hoailuu9380]

chị hướng dẫn cái Selection Color trong figma đi chị

[@maitrongdung4518]

chị ơi, after play mình phải đăng kí bản beta mới sử dụng được phải ko ạ? Tại e làm theo hướng dẫn mà đến cuối tạo prototype thì figma ko cho dùng after play

[@kaorumap]

đúng rồi em ơi, chị có viết ở phần Description đó, trong video về interactive về component ở đoạn đầu chị có chỉ cách đăng ký beta luôn kzbin.info/www/bejne/bJTRfHZ7bceVoKc

[@maitrongdung4518]

@@kaorumap Dạ vâng ạ, e cảm ơn chị nhiều. Video của chị hay lắm, hi vọng chị ra nhiều video hơn nữa ạ

[@thanhcul2861]

Bạn ơi cho mình hỏi sao mình không thể chọn "After delay" để prototype vậy ạ? mình đã xem và làm giống như hướng dẫn! Mình cảm ơn bạn!

[@kaorumap]

Do bạn chưa có chức năng interactive component trong figma của bạn, bạn xem theo video này kzbin.info/www/bejne/bJTRfHZ7bceVoKc, mình có hướng dẫn cách đăng ký figma beta và giới thiệu về interactive component

[@thanhcul2861]

@@kaorumap mình cảm ơn bạn !

[@ancao5304]

Mong chị ra nhiều video về figma. video chị làm rất hữu ít, cảm ơn chị.

[@lequan5759]

Useful quá ạ

[@cuongnguyenviet]

Chờ mãi mới thêm được 1 video ^^ Cám ơn bạn nhé.

[@kaorumap]

Bạn thông cảm, chỉ thị 16 khổ quá nên mình không có tâm trạng viết bài và quay video 😅

[@lehai5366]

Chị cho em hỏi là tại sao khi em dẫn prototype từ Varient 1 vào Varient 2 mà nó lại dẫn trực tiếp vào ảnh trong Varient 2 vậy ạ

[@kaorumap]

Em đăng ký figma beta chưa?

[@lehai5366]

@@kaorumap Em vừa tải bản beta rồi mà nó vẫn thế ạ :(((

[@kaorumap]

@@lehai5366 bản beta không tải được mà phải email yêu cầu figma đưa email account của em vào những người sử dụng beta

[@lehai5366]

@@kaorumap Em cảm ơn ạ, em vừa xem lại video đki beta của chị

[@RelaxMusic1900]

Giọng chị dễ nghe và kiến thức cũng dễ hiêu , mong chị ra nhiều clip hơn ạ . Em cảm ơn

[@nickeytran]

Cảm ơn chị đã chia sẽ, nhưng em làm thì cái nút after delay nó bị disable mà ko hiểu mình sai ở đâu ạ.

[@kaorumap]

chị không thấy em làm ra sao nên chị cũng không biết em sai ở đâu cả, em có thể từ từ làm lại từng bước xem sao?

[@kaorumap]

mình nghĩ có khả năng figma của bạn chưa có chức năng interactive component, bạn có thể xem video này mình có hướng dẫn cách đăng ký figma beta để có chức năng này nhé kzbin.info/www/bejne/bJTRfHZ7bceVoKc

[@nickeytran]

@@kaorumap à dạ chắc đúng rồi, em cảm ơn chị nhiều ạ

[@quanglinhh]

thank u

[@khanhct3636]

giọng chị nghe hay quá

[@kaorumap]

Chị cảm ơn em nhé!

[@ThaoLe-xv8ty]

chị giảng dễ hiểu và hay lắm ạ. cảm ơn chị

[@DuyenNguyen-hr6kr]

E rất thích series này, chị giảng dễ hiểu lắm ạ.

[@locphan5478]

Tip hay quá chị ơi, cảm ơn chị

[@kaorumap]

[@ngucynguyen9470]

[@nghithai2256]

Em cảm ơn cô! Dễ hiểu lắm ạaaaaaa

[@kaorumap]

Làm theo được ha Nghi, cô thấy cách này tiện và đỡ loạn cái page làm việc của mình, cần sửa gì sửa riêng bên cái component rồi nó tự update trên frame luôn!

[@nghithai2256]

Dạ cô như 1 chân trời mới :))))) hihi bth em group nguyên cái xong không biết làm toàn drag 1 cái là từ trang đầu drag tới trang cuối luôn, không dừng đc mấy trang ở giữa :))))

[@kaorumap]

Haha, nhờ cái update interactive component thần thánh đã thay đổi tất cả

[@franciscoxavier5419]

thumps up chi oi :!!!

[@kaorumap]

Cảm ơn em nhé!

[@franciscoxavier5419]

@@kaorumap da chi..

[@hoahinh3771]

Các video của bạn rất chất lượng, cảm ơn bạn